/* ═══════════════════════════════════════════
   LORENNA REAL ESTATE — Design System
   ═══════════════════════════════════════════ */

/* ─── Fonts ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── Custom Properties ──────────────────── */
:root {
    /* Palette — warm gold + deep black for luxury feel */
    --gold:           #B8924A;
    --gold-light:     #D4AF6E;
    --gold-pale:      #F5EFE0;
    --black:          #101010;  /* principal — texto, bordes, logo, botones sólidos */
    --black-elevated: #1A1A1A;  /* hover / superficies elevadas */
    --black-deep:     #0A0A0A;  /* fondos de secciones grandes (hero, footer, contacto) */
    --charcoal:       #3D3D3D;
    --slate:        #6B7280;
    --silver:       #9CA3AF;
    --cloud:        #F3F4F6;
    --white:        #FFFFFF;
    --cream:        #FAFAF7;
    --success:      #16A34A;
    --error:        #DC2626;
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', -apple-system, sans-serif;
    
    /* Spacing scale */
    --sp-xs:  0.25rem;
    --sp-sm:  0.5rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2rem;
    --sp-2xl: 3rem;
    --sp-3xl: 4rem;
    --sp-4xl: 6rem;
    
    /* Layout */
    --max-width:    1200px;
    --header-h:     80px;
    --radius:       6px;
    --radius-lg:    12px;
    --shadow:       0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
    --transition:   0.3s ease;
}

/* ─── Reset ──────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--charcoal);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol { list-style: none; }

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font: inherit;
    border: none;
    outline: none;
}

/* ─── Typography ─────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--black);
    line-height: 1.2;
    font-weight: 600;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.section-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: var(--sp-sm);
}

/* ─── Layout ─────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--sp-lg);
}

.section {
    padding: var(--sp-4xl) 0;
}

/* ─── Buttons ────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--radius);
    transition: all var(--transition);
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background: var(--gold);
    color: var(--white);
}
.btn-primary:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 146, 74, 0.35);
}

.btn-outline {
    background: transparent;
    color: var(--black);
    border: 1.5px solid var(--black);
}
.btn-outline:hover {
    background: var(--black-elevated);
    color: var(--white);
}

.btn-white {
    background: var(--white);
    color: var(--black);
}
.btn-white:hover {
    background: var(--gold-pale);
}

.btn-sm {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: all var(--transition);
}

.site-header.scrolled {
    border-bottom-color: var(--cloud);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--sp-lg);
}

.logo {
    display: inline-flex;
    align-items: center;
}

.logo img {
    display: block;
    width: auto;
    object-fit: contain;
}

/* Selector de máxima especificidad posible sin !important — (0,2,1),
   supera con margen al reset global `img { height: auto }` (0,0,1). Revisé
   TODO el archivo (grep de "height"): no hay ninguna otra regla que toque
   un <img> dentro de .logo. Si esto no se ve reflejado después de subir el
   archivo, es 100% caché del navegador/servidor o que el archivo no llegó
   a subirse — ya no puede ser el CSS. */
.site-header .logo img {
    height: 75px !important;
    max-height: 75px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-brand .logo img {
    height: 180px;
    max-height: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* logo-completo-2.webp ya es la variante clara (texto blanco + dorado,
   transparente) pensada para el footer oscuro — no necesita filtro. Si en
   algún momento vuelve a usarse un logo oscuro acá, ahí sí hace falta
   `filter: brightness(0) invert(1)` para blanquearlo. */

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-xl);
}

.nav-links a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--charcoal);
    transition: color var(--transition);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--black);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Selector de idioma (ES | EN) — pisa el estilo genérico de .nav-links a
   (tamaño, subrayado on-hover) porque es un componente aparte, no un link
   de navegación más. */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-switch a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--charcoal);
    transition: color var(--transition);
}

.lang-switch a::after {
    content: none;
}

.lang-switch a:hover {
    color: var(--black);
}

.lang-switch a.active {
    color: var(--gold);
    font-weight: 600;
}

.lang-switch .lang-sep {
    color: var(--silver);
    font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════
   DROPDOWN "LEGAL" DEL NAV
   Desktop: :hover puro CSS. Móvil: .open vía JS (ver app.js) — no hay
   hover real en touch, así que ahí el click alterna un acordeón.
   ═══════════════════════════════════════════ */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--charcoal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--transition);
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
    color: var(--black);
}

.nav-dropdown-toggle svg {
    transition: transform var(--transition);
}

.nav-dropdown:hover .nav-dropdown-toggle svg,
.nav-dropdown.open .nav-dropdown-toggle svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    /* top:100% pegado (sin margin-top) a propósito: un gap ahí es la causa
       clásica de que el dropdown se cierre al mover el mouse en diagonal
       hacia él — el padding-top de acá abajo da el aire visual sin crear
       esa zona muerta sin hover. */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px var(--sp-sm) var(--sp-sm);
    z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--charcoal);
    transition: background var(--transition), color var(--transition);
}

.nav-dropdown-menu a::after {
    content: none;
}

.nav-dropdown-menu a:hover {
    background: var(--gold-pale);
    color: var(--black);
}

.nav-dropdown-menu a.dropdown-all {
    font-weight: 600;
    color: var(--gold);
    border-bottom: 1px solid var(--cloud);
    border-radius: 0;
    margin-bottom: var(--sp-xs);
    padding-bottom: 0.75rem;
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--black);
    transition: all var(--transition);
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: var(--black-deep);
    overflow: hidden;
    padding-top: var(--header-h);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.6) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--sp-4xl) var(--sp-lg);
}

.hero h1 {
    color: var(--white);
    max-width: 700px;
    margin-bottom: var(--sp-lg);
}

.hero h1 em {
    font-style: italic;
    color: var(--gold-light);
}

.hero-subtitle {
    color: var(--silver);
    font-size: 1.125rem;
    max-width: 540px;
    margin-bottom: var(--sp-3xl);
    line-height: 1.7;
}

/* ─── Search Box ─────────────────────────── */
.search-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-lg);
    max-width: 900px;
}

.search-tabs {
    display: flex;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-lg);
}

.search-tab {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--slate);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.search-tab.active {
    background: var(--black);
    color: var(--white);
}

.search-tab:hover:not(.active) {
    background: var(--cloud);
}

.search-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
    align-items: end;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

/* Campo de búsqueda libre del hero: ocupa 2 columnas en el grid de 4. */
.field-span-2 {
    grid-column: span 2;
}

.field-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-group select,
.field-group input {
    padding: 0.75rem 1rem;
    background: var(--cloud);
    border-radius: var(--radius);
    color: var(--charcoal);
    font-size: 0.9375rem;
    transition: background var(--transition);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.field-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.field-group select:focus,
.field-group input:focus {
    background: var(--white);
    box-shadow: 0 0 0 2px var(--gold);
}

.search-fields .btn {
    height: 100%;
    min-height: 48px;
}

/* ═══════════════════════════════════════════
   LOCATION AUTOCOMPLETE (hero + filtros de propiedades.php)
   ═══════════════════════════════════════════ */
.location-autocomplete {
    position: relative;
}

.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 250px;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--cloud);
}

.autocomplete-dropdown.open {
    display: block;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background var(--transition);
}

.autocomplete-item:not(:last-child) {
    border-bottom: 1px solid var(--cloud);
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--gold-pale);
}

.autocomplete-item-name {
    font-size: 0.9375rem;
    color: var(--charcoal);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-item-type {
    font-size: 0.75rem;
    color: var(--silver);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Stats bar ──────────────────────────── */
.hero-stats {
    display: flex;
    gap: var(--sp-3xl);
    margin-top: var(--sp-3xl);
}

.stat {
    text-align: left;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1;
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--silver);
    margin-top: var(--sp-xs);
}

/* ═══════════════════════════════════════════
   PROPERTY CARDS
   ═══════════════════════════════════════════ */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-xl);
}

.property-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all var(--transition);
    cursor: pointer;
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.property-card:hover .card-image img {
    transform: scale(1.05);
}

.card-badges {
    position: absolute;
    top: var(--sp-md);
    left: var(--sp-md);
    display: flex;
    gap: var(--sp-xs);
}

.badge {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    backdrop-filter: blur(8px);
}

.badge-sale {
    background: rgba(184, 146, 74, 0.9);
    color: var(--white);
}

.badge-rent {
    background: rgba(16, 16, 16, 0.85);
    color: var(--white);
}

.badge-type {
    background: rgba(255,255,255,0.9);
    color: var(--charcoal);
}

.card-body {
    padding: var(--sp-lg);
}

.card-price {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: var(--sp-sm);
}

.card-price small {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--slate);
}

.card-title {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: var(--sp-xs);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-location {
    font-size: 0.8125rem;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-md);
}

.card-location svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.card-features {
    display: flex;
    gap: var(--sp-lg);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--cloud);
}

.feature {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: 0.8125rem;
    color: var(--slate);
}

.feature svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
}

.feature strong {
    color: var(--charcoal);
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════════ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4xl);
    align-items: center;
}

.about-image {
    /* Ya NO overflow:hidden acá — el ::after ahora sale del box (marco
       "flotante" en la esquina), así que recortar el contenedor lo
       cortaría a él también. El recorte a esquinas redondeadas se movió a
       la imagen/placeholder mismos (border-radius funciona directo sobre
       un <img>, no hace falta un contenedor con overflow para eso). */
    position: relative;
}

.about-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

.about-image::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60%;
    height: 60%;
    border: 3px solid var(--gold);
    border-radius: 0 0 var(--radius-lg) 0;
    pointer-events: none;
    /* Detrás de la foto — así se ve como un marco que "sale" por atrás en
       la esquina, no una línea encima de la imagen. */
    z-index: -1;
}

/* Placeholder de foto (nosotros.php — Gerente General) hasta que se suba
   la real: mismo tamaño que .about-image img para que el layout no salte
   cuando se reemplace por el <img> real. */
.about-image-placeholder {
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cloud);
    color: var(--silver);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    padding: var(--sp-lg);
    border-radius: var(--radius-lg);
}

.about-text p {
    color: var(--slate);
    margin-bottom: var(--sp-lg);
    line-height: 1.8;
}

/* Cargo debajo del nombre (ej. "Realtor & Lawyer") — más específico que
   `.about-text p` para poder pisarle el color gris por el dorado. */
.about-text .gerente-title {
    color: var(--gold);
    font-weight: 600;
    font-size: 1rem;
    margin-top: -0.5rem;
}

.social-links {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cloud);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}

.social-links a:hover {
    background: var(--gold);
    color: var(--white);
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
    margin-top: var(--sp-xl);
}

.about-feature {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--black);
}

.about-feature svg {
    width: 20px;
    height: 20px;
    color: var(--gold);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   VALORES / DIFERENCIADORES (nosotros.php)
   ═══════════════════════════════════════════ */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-lg);
    margin-top: var(--sp-2xl);
}

.value-card {
    background: var(--white);
    border: 1px solid var(--cloud);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl) var(--sp-lg);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-md);
    border-radius: 50%;
    background: rgba(184, 146, 74, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon svg {
    width: 26px;
    height: 26px;
    color: var(--gold);
}

.value-card h3 {
    margin-bottom: var(--sp-sm);
}

.value-card p {
    color: var(--slate);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Nuestros Servicios (nosotros.php) reusa .value-card — mismo lenguaje
   visual que Valores — solo pisa la cantidad de columnas a 3. Hereda los
   breakpoints de .values-grid (2 cols en 1024px, 1 en 768px). */
.services-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ═══════════════════════════════════════════
   MISIÓN / VISIÓN (nosotros.php)
   ═══════════════════════════════════════════ */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    margin-top: var(--sp-2xl);
}

.mv-card {
    background: var(--white);
    border: 1px solid rgba(184, 146, 74, 0.35);
    border-radius: var(--radius-lg);
    padding: var(--sp-2xl);
}

.mv-card h3 {
    color: var(--gold);
    margin-bottom: var(--sp-md);
}

.mv-card p {
    color: var(--slate);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════
   CONTACTO COMPACTO (nosotros.php, antes del CTA)
   Variante clara de .contact-detail — esa clase tiene texto blanco/plata
   pensado para el fondo negro de .contact-section; acá el fondo es claro.
   ═══════════════════════════════════════════ */
.contact-compact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xl);
    margin-top: var(--sp-2xl);
}

.contact-compact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
}

.contact-compact-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(184, 146, 74, 0.12);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-compact-text {
    font-size: 0.9375rem;
    color: var(--slate);
    line-height: 1.6;
}

.contact-compact-text strong {
    display: block;
    color: var(--black);
    font-weight: 600;
    margin-bottom: 2px;
}

/* ═══════════════════════════════════════════
   CONTACT / LEAD FORM
   ═══════════════════════════════════════════ */
.contact-section {
    background: var(--black-deep);
    color: var(--white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-4xl);
    align-items: start;
}

.contact-info h2 {
    color: var(--white);
    margin-bottom: var(--sp-lg);
}

.contact-info p {
    color: var(--silver);
    line-height: 1.8;
    margin-bottom: var(--sp-2xl);
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-lg);
}

.contact-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(184, 146, 74, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-detail-icon svg {
    width: 20px;
    height: 20px;
    color: var(--gold-light);
}

.contact-detail-text {
    font-size: 0.9375rem;
    color: var(--silver);
}

.contact-detail-text strong {
    display: block;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 2px;
}

/* Form */
.contact-form {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--sp-2xl);
}

.contact-form h3 {
    margin-bottom: var(--sp-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--slate);
}

.form-field input,
.form-field textarea,
.form-field select {
    padding: 0.875rem 1rem;
    background: var(--cloud);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--charcoal);
    transition: all var(--transition);
    width: 100%;
}

.form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    background: var(--white);
    box-shadow: 0 0 0 2px var(--gold);
}

/* ═══════════════════════════════════════════
   SELECTOR DE CÓDIGO DE PAÍS (teléfono)
   ═══════════════════════════════════════════ */
.phone-input-group {
    display: flex;
    align-items: stretch;
    background: var(--cloud);
    border-radius: var(--radius);
    transition: background var(--transition), box-shadow var(--transition);
}

.phone-input-group:focus-within {
    background: var(--white);
    box-shadow: 0 0 0 2px var(--gold);
}

.phone-country-wrap {
    position: relative;
    flex-shrink: 0;
}

.phone-country-btn {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0.75rem;
    background: transparent;
    border-right: 1px solid rgba(16, 16, 16, 0.12);
    color: var(--charcoal);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius) 0 0 var(--radius);
}

/* El <input> original: mismo alto y tipografía que el resto de .form-field
   input, pero sin su propio fondo/borde/sombra — ahora esos los lleva
   .phone-input-group para que se vea como un solo campo integrado. */
.phone-number-input.phone-number-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.phone-country-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    max-height: 280px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--cloud);
    z-index: 60;
    overflow: hidden;
}

.phone-country-dropdown.open {
    display: flex;
    flex-direction: column;
}

.phone-country-search.phone-country-search {
    border: none;
    border-bottom: 1px solid var(--cloud);
    border-radius: 0;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    background: var(--white) !important;
    box-shadow: none !important;
}

.phone-country-options {
    overflow-y: auto;
    max-height: 230px;
}

.phone-country-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background var(--transition);
}

.phone-country-option:hover {
    background: var(--gold-pale);
}

.phone-country-option-code {
    color: var(--silver);
    flex-shrink: 0;
}

.phone-country-option-empty {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--silver);
    text-align: center;
}

.form-message {
    padding: var(--sp-md);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: var(--sp-md);
    display: none;
}

.form-message.success {
    display: block;
    background: rgba(22, 163, 74, 0.1);
    color: var(--success);
    /* Más presencia que un mensaje de error común — es la confirmación de
       que el lead se envió, merece destacarse. */
    padding: var(--sp-lg);
    border-left: 4px solid var(--gold);
    font-size: 0.9375rem;
}

.form-message.error {
    display: block;
    background: rgba(220, 38, 38, 0.1);
    color: var(--error);
}

/* ═══════════════════════════════════════════
   FORM BLOQUEADO (anti-duplicados / anti-spam)
   ═══════════════════════════════════════════ */
.form-locked {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-sent,
.btn-sent:hover {
    background: #16A34A;
    color: var(--white);
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* ═══════════════════════════════════════════
   PROPERTY DETAIL PAGE
   ═══════════════════════════════════════════ */
/* El breadcrumb ahora es la primera sección de la página (antes lo era
   .detail-hero) — la padding que despeja el header fijo se mudó para acá;
   .detail-hero se queda con un padding-top chico nomás, mismo fondo cream
   para que las dos secciones se lean como una sola franja continua. */
.detail-breadcrumb-bar {
    padding-top: calc(var(--header-h) + var(--sp-lg));
    padding-bottom: var(--sp-sm);
    background: var(--cream);
}

.detail-hero {
    padding-top: var(--sp-lg);
    padding-bottom: var(--sp-xl);
    background: var(--cream);
}

/* Image Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 280px 280px;
    gap: var(--sp-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.gallery-grid .gallery-main {
    grid-row: 1 / -1;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity var(--transition);
}

.gallery-grid img:hover {
    opacity: 0.9;
}

.gallery-more {
    position: relative;
}

.gallery-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
}

/* Detail Layout */
.detail-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-3xl);
    padding: var(--sp-3xl) 0;
}

.detail-main h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--sp-sm);
}

.detail-location {
    font-size: 1rem;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xl);
}

.detail-price-row {
    display: flex;
    gap: var(--sp-2xl);
    padding: var(--sp-lg);
    background: var(--gold-pale);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-2xl);
}

.detail-price-item {
    display: flex;
    flex-direction: column;
}

.detail-price-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
}

.detail-price-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
}

/* Features grid — 5 columnas ahora (se sumó Año de construcción) */
.detail-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-md);
    margin-bottom: var(--sp-2xl);
}

.detail-feature {
    text-align: center;
    padding: var(--sp-lg);
    background: var(--cloud);
    border-radius: var(--radius);
}

.detail-feature svg {
    width: 24px;
    height: 24px;
    color: var(--gold);
    margin-bottom: var(--sp-sm);
}

.detail-feature-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    display: block;
}

.detail-feature-label {
    font-size: 0.75rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* "Consultar" — cualquier dato importante que falte se muestra así en vez
   de dejar el campo vacío u ocultarlo (precio, mantenimiento, habitaciones,
   baños, parqueos, área, año de construcción). Hereda el tamaño/peso del
   contenedor (.detail-price-value o .detail-feature-value), solo cambia
   color y le saca el peso — se lee claramente como "dato pendiente", no
   como un valor real. */
.value-missing {
    color: var(--silver);
    font-weight: 500;
    font-style: italic;
}

/* Description */
.detail-section {
    margin-bottom: var(--sp-2xl);
}

.detail-section h3 {
    margin-bottom: var(--sp-md);
    padding-bottom: var(--sp-sm);
    border-bottom: 2px solid var(--gold-pale);
}

.detail-description {
    color: var(--slate);
    line-height: 1.8;
    white-space: pre-line;
}

/* "Mostrar más" de la descripción — max-height grande de "expandido" a
   propósito (no hay forma nativa de animar hacia height:auto), lo
   suficientemente alta para no cortar descripciones normales. */
.description-collapsible {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.description-collapsible.is-collapsed {
    max-height: 120px;
    position: relative;
}

.description-collapsible.is-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--white));
    pointer-events: none;
}

.description-toggle {
    color: var(--gold);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.description-toggle svg {
    transition: transform var(--transition);
}

.description-toggle.is-open svg {
    transform: rotate(180deg);
}

/* Amenities */
.amenities-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-sm) var(--sp-md);
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: 0.9375rem;
    color: var(--charcoal);
    padding: var(--sp-sm) 0;
}

.amenity-item svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
    flex-shrink: 0;
}

/* Sidebar */
.detail-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-xl));
}

.sidebar-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--sp-xl);
}

.sidebar-card h3 {
    margin-bottom: var(--sp-lg);
}

.sidebar-card .form-field {
    margin-bottom: var(--sp-md);
}

/* WhatsApp button */
.btn-whatsapp {
    background: #25D366;
    color: var(--white);
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    transition: all var(--transition);
}

.btn-whatsapp:hover {
    background: #1FAD54;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   CLOSING CTA (index.php, nosotros.php)
   ═══════════════════════════════════════════ */
.closing-cta {
    background: var(--black-deep);
    color: var(--white);
    text-align: center;
    padding: var(--sp-4xl) 0;
}

.closing-cta .section-label {
    color: var(--gold-light);
}

.closing-cta h2 {
    color: var(--white);
    max-width: 640px;
    margin: 0 auto var(--sp-md);
}

.closing-cta p {
    color: var(--silver);
    max-width: 560px;
    margin: 0 auto var(--sp-xl);
    line-height: 1.7;
}

.closing-cta-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-md);
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   MAPA (contacto.php)
   ═══════════════════════════════════════════ */
.map-frame {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: var(--radius-lg);
    filter: grayscale(0.2);
}

/* ═══════════════════════════════════════════
   SECCIÓN LEGAL (legal.php + legal/*.php)
   ═══════════════════════════════════════════ */

/* Breadcrumb (Inicio > Legal > [Servicio]) en el hero corto */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: 0.8125rem;
    color: var(--slate);
    margin-bottom: var(--sp-md);
}

.breadcrumb a {
    color: var(--slate);
    transition: color var(--transition);
}

.breadcrumb a:hover {
    color: var(--gold);
}

.breadcrumb span[aria-current] {
    color: var(--black);
    font-weight: 500;
}

/* El último segmento ahora es <a> también (antes era <span>, no
   clickeable) — .breadcrumb-current lo distingue visualmente (más oscuro,
   más peso) sin sacarle el hover/cursor de link. */
.breadcrumb a.breadcrumb-current {
    color: var(--black);
    font-weight: 600;
}

.breadcrumb a.breadcrumb-current:hover {
    color: var(--gold);
}

/* Párrafo intro SEO — administracion.php (y reusable en cualquier
   página que necesite un bloque de texto centrado, largo, con buen
   line-height para lectura y para el contenido indexable). */
.section-intro-text {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--charcoal);
}

/* Grid de servicios en legal.php — reusa .value-card, solo cambia a 3 cols
   y le agrega lugar para el botón "Ver más". */
.legal-services-grid {
    grid-template-columns: repeat(3, 1fr);
}

.legal-services-grid .value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.legal-services-grid .value-card p {
    flex: 1;
}

.legal-services-grid .value-card .btn {
    margin-top: var(--sp-lg);
}

/* Imagen arriba de la card, edge-to-edge (2026-08-18) — legal.php y
   administracion.php, grid de servicios. .value-card trae padding en
   todos los lados; acá se le saca el de arriba y la imagen "sangra" con
   márgenes negativos hasta los bordes reales de la card. overflow:hidden
   + el propio border-radius de .value-card hacen que solo las esquinas de
   ARRIBA de la imagen queden redondeadas (las de abajo las tapa el resto
   del contenido, que sí conserva su padding normal). Mismo lenguaje visual
   que las property cards del listado (object-fit: cover, altura fija). */
.legal-services-grid .value-card {
    padding-top: 0;
    overflow: hidden;
}

.service-card-image {
    display: block;
    width: calc(100% + 2 * var(--sp-lg));
    height: 200px;
    object-fit: cover;
    margin: 0 calc(-1 * var(--sp-lg)) var(--sp-lg);
}

/* Imagen de la sección "Sobre este servicio" en las fichas de legal/ y
   administracion/ (2026-08-18) — wrapper propio (.service-image-wrap),
   deliberadamente NO .about-image: ese lleva un marco dorado decorativo
   (::after) pensado para el retrato de Lorenna Rivera en nosotros.php: acá
   se pidió solo borde redondeado + sombra sutil, sin el marco. */
.service-detail-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow); /* --shadow, no --shadow-lg: pedido "sombra sutil" explícitamente */
    display: block;
}

/* "¿Qué incluye?" — lista de bullets con check dorado */
.service-includes-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md) var(--sp-xl);
    margin-top: var(--sp-2xl);
}

.service-includes-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    font-size: 0.9375rem;
    color: var(--charcoal);
    line-height: 1.5;
}

.service-includes-list li svg {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
}

/* "¿Cómo trabajamos?" — pasos numerados (sí es una secuencia real acá,
   por eso el número tiene sentido y no es solo decoración). */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-lg);
    margin-top: var(--sp-2xl);
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--black);
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: var(--sp-md);
}

.step-card h3 {
    margin-bottom: var(--sp-sm);
    font-size: 1.0625rem;
}

.step-card p {
    color: var(--slate);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Formulario embebido al final de cada página de legal/ — vive dentro de
   .contact-section (fondo oscuro), reusa .contact-form tal cual (esa ya
   trae su propio fondo blanco + colores correctos, no hace falta tocarla).
   Solo hace falta vestir el título/subtítulo que quedan directo sobre el
   fondo oscuro. */
.legal-form-wrap {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.legal-form-wrap > .section-label {
    color: var(--gold-light);
}

.legal-form-wrap h2 {
    color: var(--white);
}

.legal-form-wrap > p {
    color: var(--silver);
    margin-bottom: var(--sp-2xl);
}

.legal-form-wrap .contact-form {
    text-align: left;
    margin-top: var(--sp-xl);
}

/* ═══════════════════════════════════════════
   LISTINGS PAGE
   ═══════════════════════════════════════════ */
.listings-header {
    padding-top: calc(var(--header-h) + var(--sp-2xl));
    padding-bottom: var(--sp-2xl);
    background: var(--cream);
}

/* Subtítulo opcional del hero corto (nosotros.php, contacto.php) */
.page-header-subtitle {
    max-width: 620px;
    margin-top: var(--sp-md);
    color: var(--slate);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.filters-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
    align-items: end;
    background: var(--white);
    padding: var(--sp-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-lg) 0;
}

.results-count {
    font-size: 0.9375rem;
    color: var(--slate);
}

.results-count strong {
    color: var(--black);
}

.sort-select {
    padding: 0.5rem 1rem;
    background: var(--cloud);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--charcoal);
    cursor: pointer;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    padding: var(--sp-3xl) 0 var(--sp-xl);
}

.page-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--charcoal);
    transition: all var(--transition);
}

.page-btn:hover {
    background: var(--cloud);
}

.page-btn.active {
    background: var(--black);
    color: var(--white);
}

.page-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
    background: var(--black-deep);
    color: var(--silver);
    padding: var(--sp-3xl) 0 var(--sp-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(5, 1fr);
    gap: var(--sp-xl);
    margin-bottom: var(--sp-3xl);
}

.footer-brand .logo {
    /* Antes tenía color/display pensados para cuando el logo era texto
       ("Lorenna."). Ahora es una imagen cuadrada de 180px — solo necesita
       más aire debajo antes del párrafo, el resto ya lo resuelve .logo
       (inline-flex) heredado. */
    margin-bottom: var(--sp-lg);
}

.footer-brand p {
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 300px;
}

.footer-col h4 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-lg);
}

.footer-col a {
    display: block;
    font-size: 0.875rem;
    color: var(--silver);
    padding: var(--sp-xs) 0;
    transition: color var(--transition);
}

.footer-col a:hover {
    color: var(--gold-light);
}

.footer-bottom {
    padding-top: var(--sp-xl);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.95);
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.25);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* ═══════════════════════════════════════════
   LOADING & EMPTY STATES
   ═══════════════════════════════════════════ */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4xl);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cloud);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state {
    text-align: center;
    padding: var(--sp-4xl) var(--sp-xl);
    color: var(--slate);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--silver);
    margin-bottom: var(--sp-lg);
}

.skeleton {
    background: linear-gradient(90deg, var(--cloud) 25%, #e8e8e8 50%, var(--cloud) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .search-fields {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .detail-content {
        grid-template-columns: 1fr;
    }

    .detail-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .detail-sidebar {
        position: static;
    }

    .filters-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .legal-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --sp-4xl: 3rem;
    }
    
    .site-header .logo img {
        height: 55px !important;
        max-height: 55px;
    }

    .footer-brand .logo img {
        height: 140px;
        max-height: 140px;
    }

    .nav-toggle {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--sp-xl) var(--sp-lg);
        gap: var(--sp-md);
        box-shadow: var(--shadow-lg);
        transform: translateY(-120%);
        transition: transform var(--transition);
    }
    
    .nav-links.open {
        transform: translateY(0);
    }

    /* En móvil no hay :hover real — solo manda .open (click, ver app.js). */
    .nav-dropdown:hover .nav-dropdown-menu {
        display: none;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 0 var(--sp-md);
        margin-top: var(--sp-sm);
        border-left: 2px solid var(--gold-pale);
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + var(--sp-xl));
        padding-bottom: var(--sp-2xl);
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: var(--sp-xl);
    }
    
    .search-fields {
        grid-template-columns: 1fr;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }
    
    .about-image img,
    .about-image-placeholder,
    .service-detail-image {
        height: 300px;
    }

    .mv-grid {
        grid-template-columns: 1fr;
    }

    .contact-compact-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .legal-services-grid {
        grid-template-columns: 1fr;
    }

    .service-includes-list {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .closing-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .closing-cta-actions .btn {
        width: 100%;
    }

    .map-frame {
        height: 260px;
    }

    .properties-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 300px;
    }
    
    .gallery-grid .gallery-main {
        grid-row: auto;
    }
    
    .gallery-grid > :not(.gallery-main) {
        display: none;
    }
    
    .detail-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .amenities-list {
        grid-template-columns: 1fr 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .filters-bar {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--sp-sm);
        text-align: center;
    }
}