/* ==================================================================
   MV LEGAL — Componentes y mejoras
   ------------------------------------------------------------------
   Este archivo se carga DESPUÉS de style.css. Contiene los componentes
   que no existían en la maqueta original (chat, galería de propiedad,
   artículo del blog, paginación, mensajes de formulario, accesibilidad)
   y los ajustes de comportamiento del sitio multipágina.
   ================================================================== */

/* ============ ACCESIBILIDAD ============ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--gold);
    color: var(--navy);
    padding: 14px 24px;
    font-weight: 700;
    letter-spacing: 1px;
}
.skip-link:focus {
    left: 0;
}
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Campo trampa antispam: invisible para personas, visible para robots. */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}
:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}
a, button { -webkit-tap-highlight-color: rgba(201,169,97,0.25); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ============ AJUSTES DE ENCABEZADO ============ */
.top-bar-info a { transition: color 0.3s; }
.top-bar-info a:hover { color: var(--gold); }

/* Flecha del submenú: en escritorio es decorativa, en móvil es un botón real. */
.dropdown-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--navy);
    font-size: 0.8rem;
    padding: 10px 14px;
    cursor: pointer;
}
nav > ul > li > a::after { pointer-events: none; }

/* ============ MENSAJES FLASH ============ */
.flash {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 25px 0 -10px;
    padding: 18px 24px;
    border-left: 4px solid var(--gold);
    background: var(--cream);
    color: var(--navy);
    font-size: 0.95rem;
    line-height: 1.6;
}
.flash i { font-size: 1.3rem; color: var(--gold); margin-top: 2px; }
.flash-success { border-left-color: #2e9e5b; background: #eef8f1; }
.flash-success i { color: #2e9e5b; }
.flash-error { border-left-color: #c0392b; background: #fdefed; }
.flash-error i { color: #c0392b; }
.flash a { color: var(--navy); text-decoration: underline; font-weight: 600; }

/* ============ FRANJA DE LLAMADO A LA ACCIÓN ============ */
.cta-strip {
    background: var(--cream);
    border-top: 1px solid rgba(201,169,97,0.25);
    padding: 70px 0;
}
.cta-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}
.cta-inner h2 { font-size: 2rem; margin: 12px 0 10px; }
.cta-inner h2 span { color: var(--gold); }
.cta-inner p { color: var(--gray-dark); max-width: 520px; }
.cta-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cta-strip .btn-whatsapp:hover { background: transparent; color: #1a9c4c; border-color: #1a9c4c; }

/* ============ BOTONES FLOTANTES Y CHAT ============ */
.floating-stack {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.chat-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--navy);
    color: var(--gold);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(10,37,64,0.35);
    transition: transform 0.3s, background 0.3s, color 0.3s;
    flex: none;
    order: 2;
}
.chat-toggle:hover { transform: scale(1.08); background: var(--gold); color: var(--navy); }
.floating-stack .whatsapp-float { order: 3; }

.chat-panel {
    order: 1;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--white);
    border-top: 4px solid var(--gold);
    box-shadow: 0 20px 50px rgba(10,37,64,0.28);
    overflow: hidden;
    animation: chatIn 0.28s ease;
}
@keyframes chatIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-head {
    background: var(--navy);
    color: var(--white);
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.chat-head strong { display: block; font-family: 'Playfair Display', serif; color: var(--white); font-size: 1.1rem; }
.chat-head span { font-size: 0.78rem; color: rgba(255,255,255,0.7); }
.chat-close {
    background: none;
    border: 0;
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
}
.chat-close:hover { color: var(--gold); }
.chat-body { padding: 18px 20px 10px; }
.chat-intro { font-size: 0.9rem; color: var(--gray-dark); margin-bottom: 16px; }
.chat-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 9px;
    background: var(--cream);
    border-left: 3px solid transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--navy);
    transition: all 0.25s;
}
.chat-option i { color: var(--gold); width: 18px; text-align: center; }
.chat-option:hover { border-left-color: var(--gold); background: #f3ece0; padding-left: 20px; }
.chat-option-alt { background: transparent; border: 1px dashed #dcdcdc; }
.chat-foot {
    padding: 12px 20px 16px;
    font-size: 0.72rem;
    color: var(--gray);
    border-top: 1px solid #eee;
    text-align: center;
}

.to-top {
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(10,37,64,0.15);
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(10,37,64,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.3s;
    z-index: 998;
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--navy); color: var(--gold); }

/* ============ BUSCADOR DE PROPIEDADES ============ */
.search-box form { display: block; }
.search-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
.search-actions .search-btn {
    margin-top: 0;
    width: auto;
    flex: 1 1 260px;
    max-width: 360px;
}
.search-box .search-grid { margin-bottom: 0; }
.search-reset {
    color: var(--gray-dark);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    padding: 6px 0;
}
.search-reset:hover { color: var(--gold); border-bottom-color: var(--gold); }

.results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 45px 0 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ececec;
}
.results-count {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray-dark);
    font-weight: 600;
}
.results-count strong { color: var(--navy); font-size: 1.05rem; }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cream);
    border: 1px solid rgba(201,169,97,0.4);
    color: var(--navy);
    font-size: 0.78rem;
    padding: 6px 12px;
    font-weight: 600;
}
.filter-chip i { font-size: 0.65rem; color: var(--gold); }

.no-results {
    text-align: center;
    padding: 70px 30px;
    background: var(--cream);
    border: 1px dashed rgba(201,169,97,0.5);
}
.no-results i { font-size: 3rem; color: var(--gold); margin-bottom: 20px; }
.no-results h3 { margin-bottom: 12px; }
.no-results p { color: var(--gray-dark); max-width: 520px; margin: 0 auto 25px; }

/* La tarjeta de propiedad ahora es un enlace real. */
a.property-card { display: block; color: inherit; }
.property-code {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(10,37,64,0.85);
    color: var(--white);
    font-size: 0.68rem;
    letter-spacing: 2px;
    padding: 5px 12px;
    text-transform: uppercase;
    z-index: 2;
}

/* ============ FICHA DE PROPIEDAD ============ */
.prop-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 50px;
    align-items: start;
}
.prop-gallery { margin-bottom: 35px; }
.prop-main-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gray-light);
}
.prop-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prop-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 2;
}
.prop-badge {
    background: var(--gold);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 16px;
}
.prop-badge.dark { background: var(--navy); color: var(--white); }
.prop-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.prop-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color 0.25s, opacity 0.25s;
    opacity: 0.75;
}
.prop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prop-thumb:hover { opacity: 1; }
.prop-thumb.active { border-color: var(--gold); opacity: 1; }

.prop-header { margin-bottom: 30px; }
.prop-header h1 { font-size: 2.3rem; margin-bottom: 12px; }
.prop-location {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-dark);
    font-size: 0.95rem;
}
.prop-location i { color: var(--gold); }
.prop-price-row {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.prop-price {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--navy);
}
.prop-price small { font-size: 1rem; color: var(--gray); font-family: 'Montserrat', sans-serif; }

.prop-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: #ececec;
    border: 1px solid #ececec;
    margin-bottom: 40px;
}
.prop-spec {
    background: var(--white);
    padding: 24px 15px;
    text-align: center;
}
.prop-spec i { color: var(--gold); font-size: 1.4rem; margin-bottom: 10px; display: block; }
.prop-spec .value { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.prop-spec .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray); margin-top: 4px; }

.prop-block { margin-bottom: 45px; }
.prop-block h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cream);
    position: relative;
}
.prop-block h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: var(--gold);
}
.prop-block p { color: var(--gray-dark); }
.prop-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 25px;
}
.prop-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.93rem;
    color: var(--gray-dark);
}
.prop-list li i { color: var(--gold); margin-top: 5px; font-size: 0.8rem; }

.prop-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--navy);
}
.prop-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    padding: 45px 30px;
    background: var(--cream);
    border: 1px dashed rgba(201,169,97,0.55);
}
.video-placeholder i { font-size: 2.4rem; color: var(--gold); }
.video-placeholder p { max-width: 460px; }

/* Barra lateral de contacto de la propiedad */
.prop-aside {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.prop-card-contact {
    background: var(--navy);
    color: var(--white);
    padding: 35px 30px;
    border-top: 4px solid var(--gold);
}
.prop-card-contact h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 8px; }
.prop-card-contact p { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-bottom: 22px; }
.prop-card-contact .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.prop-contact-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
}
.prop-contact-line i { color: var(--gold); }
.prop-card-note {
    background: var(--cream);
    border-left: 3px solid var(--gold);
    padding: 25px;
    font-size: 0.88rem;
    color: var(--gray-dark);
    line-height: 1.7;
}
.prop-card-note strong { display: block; color: var(--navy); margin-bottom: 8px; font-family: 'Playfair Display', serif; font-size: 1.05rem; }

/* ============ ARTÍCULO DEL BLOG ============ */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 55px;
    align-items: start;
}
.article-head { margin-bottom: 35px; }
.article-head h1 { font-size: 2.4rem; margin-bottom: 18px; }
.article-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray);
    font-weight: 600;
}
.article-meta i { color: var(--gold); margin-right: 7px; }
.article-hero {
    background: var(--navy);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 21 / 9;
    font-size: 4rem;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}
.article-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(201,169,97,0.05) 0 12px, transparent 12px 24px);
}

.prose { font-size: 1.02rem; line-height: 1.9; color: var(--gray-dark); }
.prose > * + * { margin-top: 20px; }
.prose h3 {
    font-size: 1.35rem;
    color: var(--navy);
    margin-top: 38px;
    margin-bottom: 4px;
}
.prose h4 { font-size: 1.1rem; color: var(--navy); margin-top: 28px; }
.prose strong { color: var(--navy); }
.prose ul { padding-left: 4px; }
.prose ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}
.prose ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--gold);
    font-size: 0.75rem;
}
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }

.article-share {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 45px;
    padding-top: 28px;
    border-top: 1px solid #ececec;
}
.article-share span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--navy);
}
.share-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e2e2e2;
    color: var(--navy);
    transition: all 0.3s;
}
.share-btn:hover { background: var(--navy); color: var(--gold); border-color: var(--navy); }

/* Barra lateral del blog */
.blog-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; }
.widget {
    background: var(--cream);
    padding: 30px 28px;
    border-top: 3px solid var(--gold);
}
.widget h3 { font-size: 1.15rem; margin-bottom: 18px; }
.widget ul li { margin-bottom: 12px; }
.widget ul li a {
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
    transition: color 0.3s;
}
.widget ul li a::before { content: '›'; color: var(--gold); font-weight: 700; }
.widget ul li a:hover { color: var(--gold); }
.widget-cta { background: var(--navy); border-top-color: var(--gold); color: var(--white); text-align: center; }
.widget-cta h3 { color: var(--white); }
.widget-cta p { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-bottom: 20px; }
.widget-cta .btn { width: 100%; justify-content: center; }

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* ============ ÁREAS LEGALES CON DETALLE ============ */
.area-block {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 45px 0;
    border-bottom: 1px solid #ececec;
    align-items: start;
}
.area-block:last-child { border-bottom: 0; }
.area-head { display: flex; flex-direction: column; gap: 16px; }
.area-head .icon {
    width: 66px; height: 66px;
    background: var(--cream);
    border: 1px solid rgba(201,169,97,0.4);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.area-head h3 { font-size: 1.35rem; line-height: 1.35; }
.area-body p { color: var(--gray-dark); margin-bottom: 20px; }
.area-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.area-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid #e6e6e6;
    padding: 9px 16px;
    font-size: 0.85rem;
    color: var(--gray-dark);
    transition: all 0.3s;
}
.area-tag i { color: var(--gold); font-size: 0.7rem; }
.area-tag:hover { border-color: var(--gold); color: var(--navy); }

/* ============ TARJETAS NOTARIALES ============ */
.notarial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}
.notarial-card {
    background: var(--white);
    padding: 34px 30px;
    border: 1px solid #ededed;
    border-top: 3px solid transparent;
    transition: all 0.35s;
}
.notarial-card:hover {
    border-top-color: var(--gold);
    box-shadow: 0 18px 40px rgba(10,37,64,0.1);
    transform: translateY(-6px);
}
.notarial-card i { font-size: 1.7rem; color: var(--gold); margin-bottom: 16px; display: block; }
.notarial-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.notarial-card p { font-size: 0.9rem; color: var(--gray-dark); }

/* ============ PASOS / PROCESO ============ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    counter-reset: paso;
}
.step {
    position: relative;
    padding: 35px 28px;
    background: var(--white);
    border: 1px solid #ededed;
}
.step::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: rgba(201,169,97,0.35);
    line-height: 1;
    display: block;
    margin-bottom: 14px;
}
.step h4 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: 0.9rem; color: var(--gray-dark); }

/* ============ FORMULARIOS: ESTADOS Y AYUDAS ============ */
.form-group .req { color: var(--gold); }
.form-hint {
    display: block;
    margin-top: 7px;
    font-size: 0.78rem;
    color: var(--gray);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
    border-color: #c0392b;
    background: #fdf6f5;
}
.field-error {
    display: block;
    margin-top: 6px;
    color: #c0392b;
    font-size: 0.8rem;
    font-weight: 600;
}
.form-errors {
    background: #fdefed;
    border-left: 4px solid #c0392b;
    padding: 20px 25px;
    margin-bottom: 30px;
}
.form-errors strong { display: block; color: #a5281b; margin-bottom: 10px; }
.form-errors ul li {
    position: relative;
    padding-left: 20px;
    font-size: 0.9rem;
    color: #7d2318;
    margin-bottom: 5px;
}
.form-errors ul li::before { content: '•'; position: absolute; left: 5px; }

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
}
.form-check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--gold); }
.form-check label {
    font-size: 0.85rem;
    color: var(--gray-dark);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}
.form-check a { color: var(--navy); text-decoration: underline; }

.file-drop {
    border: 1px dashed #cfcfcf;
    background: #fbfbfb;
    padding: 26px;
    text-align: center;
    transition: border-color 0.3s, background 0.3s;
}
.file-drop:hover { border-color: var(--gold); background: var(--cream); }
.file-drop i { font-size: 1.7rem; color: var(--gold); display: block; margin-bottom: 10px; }
.file-drop input { border: 0 !important; padding: 10px 0 0 !important; font-size: 0.85rem; }

/* Tipos de cita seleccionables (radio con apariencia de tarjeta) */
.agenda-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.agenda-type { position: relative; }
.agenda-type:has(input:checked) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}
.agenda-type:has(input:checked) i { color: var(--navy); }
.agenda-type:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ============ CALCULADORAS: NOTA LEGAL ============ */
.calc-disclaimer {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--cream);
    border-left: 3px solid var(--gold);
    font-size: 0.85rem;
    color: var(--gray-dark);
    line-height: 1.7;
}
.calc-disclaimer i { color: var(--gold); font-size: 1.1rem; margin-top: 3px; }

/* ============ PÁGINA 404 ============ */
.error-page {
    text-align: center;
    padding: 120px 0;
}
.error-code {
    font-family: 'Playfair Display', serif;
    font-size: 8rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}
.error-page h1 { font-size: 2.2rem; margin: 10px 0 18px; }
.error-page p { max-width: 560px; margin: 0 auto 35px; color: var(--gray-dark); }
.error-links { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* ============ PÁGINA DE CONFIRMACIÓN ============ */
.thanks {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 40px;
    background: var(--cream);
    border-top: 4px solid var(--gold);
}
.thanks .icon {
    width: 90px; height: 90px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
}
.thanks h1 { font-size: 2rem; margin-bottom: 15px; }
.thanks p { color: var(--gray-dark); margin-bottom: 15px; }
.thanks .btn { margin-top: 20px; }

/* ============ AJUSTES DE IMÁGENES ============ */
img { height: auto; }
.about-image img,
.profile-image img,
.notarial-image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ============ RESPONSIVO DE LOS COMPONENTES NUEVOS ============ */
@media (max-width: 1024px) {
    .prop-layout,
    .article-layout { grid-template-columns: 1fr; gap: 45px; }
    .prop-aside,
    .blog-aside { position: static; }
    .cta-inner { grid-template-columns: 1fr; }
    .cta-actions { justify-content: flex-start; }
    .area-block { grid-template-columns: 1fr; gap: 22px; padding: 35px 0; }
}

@media (max-width: 768px) {
    /* El submenú se abre con su propio botón, no al tocar el enlace. */
    .dropdown-toggle {
        display: block;
        position: absolute;
        right: 0;
        top: 4px;
    }
    nav > ul > li.has-dropdown { position: relative; }
    .has-dropdown > a { padding-right: 45px; }
    /* En móvil el desplegable lo abre el botón, no la flecha decorativa. */
    .has-dropdown > a::before { display: none; }
    .has-dropdown.open .dropdown-toggle i { transform: rotate(180deg); }
    .dropdown-toggle i { transition: transform 0.3s; display: block; }

    .floating-stack { right: 18px; bottom: 18px; gap: 12px; }
    .to-top { left: 18px; bottom: 18px; width: 42px; height: 42px; }
    .whatsapp-float { width: 56px; height: 56px; font-size: 1.9rem; }
    .chat-toggle { width: 46px; height: 46px; font-size: 1.1rem; }
    .chat-panel { width: calc(100vw - 36px); }

    .prop-header h1 { font-size: 1.7rem; }
    .prop-price { font-size: 1.9rem; }
    .prop-specs { grid-template-columns: repeat(2, 1fr); }
    .prop-thumbs { grid-template-columns: repeat(3, 1fr); }
    .article-head h1 { font-size: 1.7rem; }
    .article-hero { aspect-ratio: 16 / 9; font-size: 2.6rem; }
    .error-code { font-size: 5rem; }
    .thanks { padding: 45px 25px; }
    .results-bar { flex-direction: column; align-items: flex-start; }
    .search-actions .btn,
    .search-actions .search-btn { width: 100%; justify-content: center; }
}

/* ============ IMPRESIÓN ============ */
@media print {
    .top-bar, header, footer, .floating-stack, .to-top,
    .newsletter, .cta-strip, .preloader, .breadcrumb,
    .prop-thumbs, .article-share { display: none !important; }
    body { color: #000; background: #fff; }
    .section { padding: 20px 0; }
    a { color: #000; text-decoration: none; }
    .prop-layout, .article-layout { grid-template-columns: 1fr; }
}

/* ==================================================================
   AJUSTES FINALES DE ELEMENTOS SEMÁNTICOS
   ------------------------------------------------------------------
   Las tarjetas dejaron de ser <div> con onclick y ahora son enlaces
   reales; los puntos del slider y los tipos de cita son controles
   nativos. Estas reglas normalizan su apariencia.
   ================================================================== */
a.blog-card,
a.practice-card,
a.property-card { display: block; color: inherit; }

.slider-dot { padding: 0; appearance: none; }

label.agenda-type { display: block; margin: 0; }

.testimonial blockquote { margin: 0; }
.testimonial blockquote p { margin: 0; }
blockquote.about-quote { margin: 0; }

figure.testimonial { margin: 0; }

/* El pie de foto del testimonio conserva la maquetación original. */
figcaption.testimonial-author { display: flex; align-items: center; gap: 15px; }

/* ==================================================================
   LOGOTIPO REAL DE LA FIRMA
   ------------------------------------------------------------------
   El encabezado y el pie usan los archivos de marca oficiales
   (logo-mv-legal-color.png y logo-mv-legal-blanco.png) en lugar del
   recuadro tipográfico "MV" de la maqueta original.
   ================================================================== */
/* Composición horizontal de la marca:
   el emblema oficial (MV LEGAL con la balanza) más la bajada de línea escrita
   como TEXTO. El archivo original mide 226x226 px, de modo que si se usara
   entero, la línea "Abogados & Bienes Raíces" quedaría ilegible al reducirlo
   a la altura de una barra de navegación. Escribirla como texto la mantiene
   nítida en cualquier pantalla y además la hace legible para buscadores. */
.logo {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo-emblema {
    height: auto;
    max-height: 58px;
    width: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
.logo-lema {
    font-size: 0.68rem;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.35;
    max-width: 108px;
    padding-left: 14px;
    border-left: 1px solid rgba(201,169,97,0.45);
}

.footer-logo {
    display: flex;
    margin-bottom: 25px;
}
.footer-logo .logo-emblema { max-height: 74px; }
.footer-logo .logo-lema {
    max-width: 120px;
    font-size: 0.7rem;
}

/* El isotipo tipográfico solo se conserva para el preloader. */
.preloader-logo { letter-spacing: 1px; }

@media (max-width: 1024px) {
    .logo-emblema { max-height: 50px; }
    .logo-lema { font-size: 0.62rem; letter-spacing: 2px; max-width: 92px; padding-left: 11px; }
}
@media (max-width: 768px) {
    .logo-emblema { max-height: 44px; }
    /* En pantallas pequeñas manda el emblema: el lema se omite para dejar
       espacio al botón del menú. */
    .logo-lema { display: none; }
    .footer-logo .logo-lema { display: block; }
}

/* La barra de navegación se ajusta a la altura real del logotipo. */
.nav-wrapper { padding: 12px 0; }
@media (max-width: 768px) { .nav-wrapper { padding: 10px 0; } }