/* ============ TOKENS ============ */
  :root{
    --violet: #6B38B5;
    --violet-deep: #4E278A;
    --blue: #3B25F0;
    --orange: #FFA535;
    --orange-deep: #F0871C;

    --ink: #221733;
    --ink-soft: #4A3F5C;
    --muted: #746a87;
    --line: #E6DEF4;
    --line-soft: #F0EAF9;

    --surface: #FFFFFF;
    --surface-soft: #FAF7FD;
    --surface-violet: #EAE0F9;
    --surface-deep: #170C2B;
    --surface-deep-2: #221238;

    --grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
    --grad-brand-soft: linear-gradient(120deg, rgba(107,56,181,.14), rgba(59,37,240,.14));
    --grad-hero: radial-gradient(circle at 14% 18%, rgba(255,165,53,.20), transparent 42%),
                 radial-gradient(circle at 82% 8%, rgba(59,37,240,.55), transparent 46%),
                 radial-gradient(circle at 92% 78%, rgba(107,56,181,.5), transparent 50%),
                 linear-gradient(160deg, #1B0E32 0%, #241141 46%, #2C1050 100%);

    --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

    --shadow-sm: 0 2px 10px rgba(34,23,51,.06);
    --shadow-md: 0 14px 34px rgba(43,20,90,.14);
    --shadow-lg: 0 30px 70px rgba(23,12,43,.35);

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --container: 1240px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  }

  body{
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
  }

  img,svg{ display:block; max-width:100%; }
  a{ color: inherit; text-decoration: none; }
  button{ font: inherit; cursor: pointer; }
  input,select{ font: inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4,p{ margin:0; }

  h1,h2,h3,h4{
    font-family: var(--font-display);
    color: var(--ink);
    text-wrap: balance;
    letter-spacing: -0.01em;
  }

  .container{
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }

  .skip-link{
    position:absolute; left:-999px; top:auto;
    background: var(--ink); color:#fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0; z-index: 999;
  }
  .skip-link:focus{ left:0; top:0; }

  :focus-visible{ outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family: var(--font-display); font-weight: 700; font-size: .78rem;
    letter-spacing: .11em; text-transform: uppercase; color: var(--violet);
  }
  .eyebrow .chev{ width: 13px; height: 13px; color: var(--orange); }
  .eyebrow.on-dark{ color: #C9B4F2; }
  .eyebrow.on-dark .chev{ color: var(--orange); }

  .demo-tag{
    display:inline-flex; align-items:center; gap:.4rem;
    font-size: .74rem; font-weight: 600; color: var(--muted);
    background: var(--surface-violet); border: 1px solid var(--line);
    padding: .3rem .7rem; border-radius: 100px;
  }
  .demo-tag svg{ width: 13px; height: 13px; color: var(--violet); flex-shrink:0; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    padding: .85rem 1.5rem; border-radius: 100px; border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
  }
  .btn svg{ width: 17px; height: 17px; }
  .btn-primary{ background: var(--orange); color: #2A1500; box-shadow: 0 10px 24px rgba(255,165,53,.35); }
  .btn-primary:hover{ background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,165,53,.42); }
  .btn-ghost-light{ background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
  .btn-ghost-light:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
  .btn-outline{ background: transparent; color: var(--violet); border-color: var(--violet); }
  .btn-outline:hover{ background: var(--surface-violet); transform: translateY(-2px); }
  /* Botón del header: el texto es más largo que el original ("Valuación
     gratuita"), pero se pidió mantener el mismo ancho — así que en vez de
     estirarse a lo ancho, el texto envuelve en 2-3 líneas (con letra más
     chica) dentro de un ancho fijo, estilo banner/badge compacto. */
  .header-valuation-btn{
    white-space: normal; text-align:center; max-width: 168px;
    font-size: .74rem; line-height: 1.2; padding: .6rem 1rem;
  }
  .btn-text{ color: var(--violet); font-family: var(--font-display); font-weight: 700; font-size: .9rem; display:inline-flex; align-items:center; gap:.4rem; }
  .btn-text svg{ width:14px; height:14px; transition: transform .18s ease; }
  .btn-text:hover svg{ transform: translateX(3px); }
  .btn-block{ width: 100%; }

  /* ============ BRAND MARK ============ */
  .mark{ display:block; }
  .logo{ display:inline-flex; align-items:center; gap:.65rem; }
  .logo .mark{ width: 30px; height: 30px; }
  .logo-word{ font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; color: var(--ink); letter-spacing: -0.01em; }
  .logo-word span{ color: var(--violet); }
  .logo.on-dark .logo-word{ color:#fff; }
  .logo.on-dark .logo-word span{ color: var(--orange); }
  .logo-brand .logo-img{ display:block; height: 34px; width: auto; }

  /* ============ TOPBAR ============ */
  .topbar{
    background: var(--surface-deep);
    color: #C9B7E8;
    font-size: .82rem;
  }
  .topbar .container{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:.55rem; padding-bottom:.55rem; gap:1rem;
  }
  .topbar-left{ display:flex; align-items:center; gap:1.4rem; }
  .topbar-item{ display:flex; align-items:center; gap:.45rem; white-space:nowrap; }
  .topbar-item svg{ width:14px; height:14px; color: var(--orange); flex-shrink:0; }
  .topbar-right{ display:flex; align-items:center; gap:.9rem; }
  .topbar-right a{ display:flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; background: rgba(255,255,255,.08); transition: background .18s ease, transform .18s ease; }
  .topbar-right a:hover{ background: var(--orange); transform: translateY(-2px); }
  .topbar-right svg{ width:14px; height:14px; }

  /* ============ HEADER ============ */
  .site-header{
    position: sticky; top:0; z-index: 60;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
    transition: box-shadow .25s ease, padding .25s ease;
  }
  .site-header.scrolled{ box-shadow: var(--shadow-sm); }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding-block: 1rem; gap: 1.5rem;
    transition: padding .25s ease;
  }
  .site-header.scrolled .header-inner{ padding-block: .68rem; }

  .main-nav{ display:flex; align-items:center; gap: 1.7rem; }
  .main-nav a{
    font-weight: 600; font-size: .95rem; color: var(--ink-soft);
    position:relative; padding-block:.3rem; white-space:nowrap;
  }
  .main-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
    transition: transform .22s ease;
  }
  .main-nav a:hover{ color: var(--violet); }
  .main-nav a:hover::after{ transform: scaleX(1); }

  .header-actions{ display:flex; align-items:center; gap: .9rem; }

  .nav-toggle{
    display:none; width:42px; height:42px; border-radius: 10px; border:1px solid var(--line);
    background: var(--surface-soft); align-items:center; justify-content:center;
  }
  .nav-toggle svg{ width:20px; height:20px; color: var(--violet); }

  .mobile-nav{
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }

  /* ============ HERO ============ */
  .hero{
    position: relative; overflow: hidden;
    background: var(--grad-hero);
    color: #fff;
    padding-top: clamp(2.8rem, 6vw, 4.6rem);
    padding-bottom: 0;
  }
  .hero-watermark{
    position:absolute; top: -14%; right: -8%;
    width: min(60vw, 620px); height: auto; opacity: .1;
    transform: rotate(-8deg);
  }
  .hero-skyline{
    /* Silueta decorativa que hace de transición entre el hero y la
       sección de abajo. Estaba pintada de var(--surface) (blanco), pero
       la sección que sigue (.stats) es oscura (var(--surface-deep)) —
       por eso se veían esos "recortes" blancos raros en los bordes en
       vez de una transición prolija. Ahora usa el mismo color que la
       franja de stats, para que la silueta se funda con lo que sigue. */
    position:absolute; left:0; right:0; bottom:-2px; width:100%; height:auto; color: var(--surface-deep);
  }
  .hero-inner{ position:relative; z-index:2; }
  .hero-grid{
    display:grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items:center;
    padding-bottom: 4.5rem;
  }
  .hero-copy .eyebrow{ margin-bottom: 1.1rem; }
  .hero-copy h1{
    font-size: clamp(2.35rem, 1.2rem + 3.1vw, 3.7rem);
    line-height: 1.06; font-weight: 800; color: #fff;
  }
  .hero-copy h1 em{ font-style: normal; color: var(--orange); }
  .hero-copy .hero-seo-kicker{
    margin-top: .7rem; font-size: .95rem; color: #B9A6DC; max-width: 46ch;
  }
  .hero-copy p{
    margin-top: 1.3rem; font-size: 1.08rem; color: #D9CCF1; max-width: 46ch;
  }
  .hero-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap: 1rem; margin-top: 2rem; }
  .hero-proof{ display:flex; align-items:center; gap: .8rem; margin-top: 2.4rem; }
  .avatar-stack{ display:flex; }
  .avatar-stack span{
    width: 34px; height:34px; border-radius:50%; border: 2px solid #2C1050;
    display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700;
    color:#fff; margin-left:-10px; font-family: var(--font-display);
  }
  .avatar-stack span:first-child{ margin-left:0; }
  .hero-proof-text{ font-size: .86rem; color: #C9B7E8; }
  .hero-proof-text strong{ color:#fff; }
  /* El cliente pidió que "5.0 en Google · más de 300 clientes ya confiaron
     en Expertias" quede en una sola línea. El texto completo necesita
     ~660px de ancho — de sobra en desktop, pero en el layout de una sola
     columna (por debajo de 1080px, ver .hero-grid) el contenedor puede ser
     más angosto que eso. Por default queda con salto de línea normal
     (nunca se corta invisible); recién a partir de los 700px de ancho de
     pantalla, donde ya entra completo, se fuerza una sola línea. */
  @media (min-width: 700px){
    .hero-proof-text{ white-space: nowrap; }
  }
  /* Antes había dos líneas de prueba social seguidas (equipo + reseñas de
     Google) y ésta llevaba un margen más chico para quedar pegada a la de
     arriba. El cliente pidió sacar la línea de "Equipo Expertias" — ahora
     ésta es la única, así que usa el margen normal de .hero-proof (herencia
     de la regla de arriba) en vez de este que la dejaba muy pegada al CTA. */
  /* El glyph "★" queda visualmente más arriba que el texto aunque el flex
     los centre por caja (align-items:center) — es metrics del propio
     carácter, no un problema de layout. Se nudgea un poco hacia abajo para
     que quede alineado con el renglón de texto. */
  .hero-stars{ color: var(--orange); font-size: 1rem; letter-spacing: 1px; flex-shrink:0; position: relative; top: 2px; }

  .hero-art{ position: relative; }
  .hero-art-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-lg);
  }
  .hero-photo{
    border-radius: var(--radius-md);
    aspect-ratio: 4/3.1;
    overflow:hidden;
    position:relative;
    background:
      linear-gradient(200deg, rgba(255,165,53,.9), transparent 55%),
      linear-gradient(20deg, var(--blue), var(--violet));
  }
  .hero-photo svg{ position:absolute; inset:0; width:100%; height:100%; }
  .hero-photo-tag{
    position:absolute; left: 1rem; top: 1rem;
    background: rgba(23,12,43,.55); backdrop-filter: blur(4px);
    color:#fff; font-size:.74rem; font-weight:700; padding:.4rem .75rem; border-radius: 100px;
    display:flex; align-items:center; gap:.4rem;
  }
  .hero-photo-tag i{ width:7px; height:7px; border-radius:50%; background:#42E08A; display:block; box-shadow:0 0 0 3px rgba(66,224,138,.25); }
  .hero-float-card{
    /* Antes iba abajo-a-la-izquierda (left/bottom negativos), pero desde
       que el hero muestra una propiedad real con título/precio superpuesto
       sobre la franja inferior de la foto (.hero-photo-info, que ocupa
       todo el ancho abajo), esa esquina quedaba tapada por esta tarjeta.
       Se movió arriba-a-la-derecha, lejos tanto de esa franja como del
       tag "Propiedad destacada" (que está arriba-a-la-izquierda). */
    position:absolute; right:-1.2rem; top:-1.2rem;
    background:#fff; color: var(--ink); border-radius: var(--radius-md);
    padding: 1rem 1.2rem; box-shadow: var(--shadow-lg);
    display:flex; align-items:center; gap:.85rem;
    max-width: 250px; z-index: 3;
  }
  .hero-float-card .icon-badge{ background: var(--grad-brand-soft); color: var(--violet); }
  .hero-float-card strong{ display:block; font-family: var(--font-display); font-size: 1rem; }
  .hero-float-card span{ font-size: .78rem; color: var(--muted); }

  .icon-badge{
    width: 42px; height:42px; border-radius: 12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: var(--grad-brand-soft); color: var(--violet);
  }
  .icon-badge svg{ width:20px; height:20px; }
  .icon-badge.solid{ background: var(--grad-brand); color:#fff; }
  .icon-badge.orange{ background: rgba(255,165,53,.16); color: var(--orange-deep); }

  /* ============ SEARCH WIDGET ============ */
  .search-widget{
    position: relative; z-index: 5;
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.5rem 1.7rem;
    margin-top: -3.6rem;
    border: 1px solid var(--line-soft);
  }
  .search-tabs{ display:flex; gap:.4rem; margin-bottom: 1.2rem; flex-wrap:wrap; }
  .search-tab{
    border:none; background: var(--surface-soft); color: var(--ink-soft);
    padding: .62rem 1.15rem; border-radius: 100px; font-weight:700; font-size:.88rem;
    display:flex; align-items:center; gap:.45rem; transition: all .18s ease;
  }
  .search-tab svg{ width:15px; height:15px; }
  .search-tab[aria-selected="true"]{ background: var(--grad-brand); color:#fff; box-shadow: 0 8px 18px rgba(75,40,170,.28); }
  .search-tab:hover:not([aria-selected="true"]){ background: var(--surface-violet); color: var(--violet); }

  .search-fields{
    display:grid; grid-template-columns: .85fr .85fr 1.4fr 1.2fr .55fr; gap: .8rem; align-items:end;
  }
  /* El grupo de pills de dormitorios necesita más ancho que un <select>
     simple (4 botones en una fila) — ver la tercera columna de arriba,
     agrandada respecto a las demás para que "Cualquiera/1+/2+/3+/4+" no
     obligue a los pills a partirse en dos líneas en desktop. */
  .field-dormitorios .filter-chip-list{ flex-wrap:nowrap; }
  .field-dormitorios .filter-chip{ padding:.62rem .6rem; white-space:nowrap; }
  /* "Apto crédito" ahora vive como un campo más de la misma fila del
     buscador (antes era un chip suelto debajo, junto al badge de
     sincronización) — el label arriba, igual que los demás campos, y el
     chip toggle abajo ocupando el mismo alto que un <select>/input. */
  .field-credit .filter-chip{
    width:100%; justify-content:center; height:47px; padding:0 .6rem; white-space:nowrap;
  }
  .field label{
    display:block; font-size: .76rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem;
  }
  .field .select-wrap{ position:relative; }
  .field select, .field input[type="text"], .field input[type="number"]{
    width:100%; appearance:none; background: var(--surface-soft);
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    padding: .78rem 2.2rem .78rem .9rem; color: var(--ink); font-weight:600; font-size:.92rem;
    transition: border-color .18s ease, background .18s ease;
  }
  .field select:hover, .field input:hover{ border-color: var(--violet); }
  .field select:focus, .field input:focus{ border-color: var(--violet); background:#fff; }
  .field .select-wrap svg{
    position:absolute; right: .8rem; top:50%; transform: translateY(-50%);
    width: 14px; height:14px; color: var(--violet); pointer-events:none;
  }
  .field-keyword{ margin-bottom: 1rem; }
  .field-keyword input{ padding-right: .9rem; }
  .price-range-inputs{ display:flex; align-items:center; gap:.5rem; }
  .price-range-inputs input{ min-width:0; padding-right:.9rem; }
  .price-range-sep{ color: var(--muted); font-weight:700; flex-shrink:0; }
  /* Mismo patrón que .price-range-inputs, pero para el par de <select>
     "Dormitorios mínimo/máximo" (buscador de la home y panel de filtros
     de /propiedades.php) — cada <select> viene envuelto en su propio
     .select-wrap (por la flechita del ícono), así que acá sólo se
     encarga de ponerlos en fila y que se achiquen parejo. */
  .dormitorios-range-inputs{ display:flex; align-items:center; gap:.5rem; }
  .dormitorios-range-inputs .select-wrap{ flex:1; min-width:0; }
  .dormitorios-range-inputs select{ padding-right:1.7rem; }
  .dormitorios-range-inputs .select-wrap svg{ right:.55rem; }
  /* El botón de búsqueda dejó de ir "metido" en la grilla de campos (donde
     quedaba chico, a la derecha, poco visible) y pasa a su propia fila,
     centrado y más grande — pedido explícito: que sea notorio. */
  .search-actions{ display:flex; justify-content:center; margin-top: 1.1rem; }
  .search-submit{
    height: 54px; padding-inline: 2.6rem; font-size:1rem;
    box-shadow: 0 10px 24px rgba(75,40,170,.28);
  }
  .search-submit svg{ width:18px; height:18px; }

  /* Búsqueda avanzada / Ver mapa de zonas / CTA de Personal Shopper: las
     3 quedan en la misma línea en desktop (pedido explícito del cliente),
     separadas por espacio entre el grupo de links y el CTA. En mobile
     (ver media query más abajo) vuelven a apilarse, una debajo de otra. */
  .search-foot{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.7rem 1.5rem;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line);
  }
  .quick-links{ display:flex; gap: 1.1rem; flex-wrap:wrap; justify-content:center; }
  .quick-links a{ font-size:.82rem; font-weight:700; color: var(--violet); }
  .quick-links a:hover{ text-decoration: underline; }

  /* CTA a Personal Shopper dentro del buscador de la home: para quien no
     encuentra lo que busca en los filtros, sin tener que bajar hasta la
     sección del mapa para verla (pedido: "más potente" = también ofrecer
     una salida clara cuando la búsqueda por cuenta propia no alcanza). */
  .search-shopper-cta{
    display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
    font-size:.86rem; color: var(--ink-soft);
  }
  .search-shopper-cta a{
    display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color: var(--violet);
  }
  .search-shopper-cta a svg{ width:14px; height:14px; transition: transform .15s ease; }
  .search-shopper-cta a:hover{ text-decoration: underline; }
  .search-shopper-cta a:hover svg{ transform: translateX(3px); }

  /* ============ SECTION LAYOUT ============ */
  section{ padding-block: clamp(3.4rem, 6vw, 5.8rem); }
  .section-soft{ background: var(--surface-soft); }
  /* Un tono más marcado que .section-soft, para que secciones consecutivas
     (ej. "Explorá en el mapa", entre "Propiedades destacadas" y "Nuestro
     equipo", ambas más claras) no se vean todas "iguales de blancas" y se
     pierda la estructura de la página al bajar. El cliente reportó que,
     aun con esta alternancia, seguía viéndose "todo el mismo fondo" —
     .section-soft y .section-violet eran demasiado parecidas entre sí y
     con el blanco (diferencia de apenas un par de puntos de luminosidad).
     Se subió el contraste real de --surface-violet (violeta bien visible,
     no un blanco con matiz) y se suma un borde superior fino en cada
     sección para marcar el límite incluso donde el cambio de color por sí
     solo no alcanza. */
  .section-violet{ background: var(--surface-violet); }
  #destacadas, #mapa, #equipo, #carreras, #resenas{ border-top: 1px solid var(--line); }
  /* "Trabajá con nosotros": el cliente pidió sacar el título repetido
     (ya está el eyebrow "Sumate al equipo") y bajar la altura de la
     sección — achicamos el padding vertical respecto del resto. */
  #carreras{ padding-block: clamp(2.2rem, 4vw, 3.4rem); }
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap: 2rem;
    margin-bottom: 2.6rem; flex-wrap:wrap;
  }
  .section-head h2{ font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.4rem); margin-top:.6rem; font-weight:800; }
  .section-head p{ color: var(--muted); margin-top:.7rem; max-width: 52ch; }
  .section-head-tags{ display:flex; align-items:center; gap:.7rem; margin-top:.6rem; }

  .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in-view{ opacity:1; transform: translateY(0); }

  /* ============ STATS ============ */
  .stats{ padding-block: 1.7rem; background: var(--surface-deep); color:#fff; }
  .stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
  .stat{ text-align:center; padding-inline:1rem; border-right: 1px solid rgba(255,255,255,.1); }
  .stat:last-child{ border-right:none; }
  .stat-num{
    font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem);
    color:#fff; font-variant-numeric: tabular-nums;
  }
  .stat-num span{ color: var(--orange); }
  .stat-label{ font-size: .82rem; color: #B9A6DD; margin-top:.35rem; font-weight:600; }

  /* ============ ZONA (landing SEO /zona/<slug>, ver zona.php) ============ */
  .zone-stats-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem;
    background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
    padding: 1.6rem;
  }
  .zone-stat{ text-align:center; padding-inline: .6rem; }
  .zone-stat-num{
    font-family: var(--font-display); font-weight:800; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
    color: var(--violet); font-variant-numeric: tabular-nums;
  }
  .zone-stat-label{ font-size:.8rem; color: var(--muted); margin-top:.3rem; font-weight:600; }
  .zone-stats-note{ color: var(--muted); font-size:.86rem; margin-top:.9rem; }
  .zone-about{
    margin-top: 1.6rem; padding: 1.6rem; background: var(--surface-soft);
    border-radius: var(--radius-md); border: 1px solid var(--line);
  }
  .zone-about h2{ font-size: 1.2rem; margin-bottom:.6rem; }
  .zone-about p{ color: var(--ink-soft); line-height:1.7; }
  .zone-links-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
  .zone-link-card{
    display:flex; align-items:center; justify-content:space-between; gap:.6rem;
    padding: 1rem 1.2rem; background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm);
    font-weight:700; color: var(--ink); transition: all .18s ease;
  }
  .zone-link-card:hover{ border-color: var(--violet); color: var(--violet); box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .zone-link-count{ font-size:.78rem; font-weight:600; color: var(--muted); }

  /* ============ OPERATIONS ============ */
  .ops-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
  .op-card{
    border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 1.6rem; background:#fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .op-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
  .op-card h3{ font-size: 1.08rem; margin-top: 1rem; }
  .op-card p{ color: var(--muted); font-size: .88rem; margin-top:.4rem; }
  .op-card .btn-text{ margin-top: 1rem; }

  /* ---- Pasos numerados y diferenciados por color (landing de valuación) ---- */
  .step-card{ position: relative; border-top: 4px solid transparent; overflow: hidden; }
  .step-card .step-number{
    position: absolute; top: 1.1rem; right: 1.2rem;
    font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
    opacity: .16; line-height: 1;
  }
  .step-1{ border-top-color: var(--violet); }
  .step-1 .icon-badge{ background: rgba(107,56,181,.14); color: var(--violet); }
  .step-1 .step-number{ color: var(--violet); }
  .step-2{ border-top-color: var(--blue); }
  .step-2 .icon-badge{ background: rgba(59,37,240,.14); color: var(--blue); }
  .step-2 .step-number{ color: var(--blue); }
  .step-3{ border-top-color: var(--orange-deep); }
  .step-3 .icon-badge{ background: rgba(255,165,53,.16); color: var(--orange-deep); }
  .step-3 .step-number{ color: var(--orange-deep); }
  .step-4{ border-top-color: #1FAE6B; }
  .step-4 .icon-badge{ background: rgba(66,224,138,.18); color: #1FAE6B; }
  .step-4 .step-number{ color: #1FAE6B; }

  /* ---- Banner de tecnología / IA ---- */
  .ai-banner{
    margin-top: 1.6rem; display:flex; align-items:flex-start; gap: 1.1rem;
    background: var(--grad-hero); border-radius: var(--radius-lg);
    padding: 1.8rem 2rem; color:#fff; box-shadow: var(--shadow-lg);
  }
  .ai-banner-icon{ background: rgba(255,255,255,.14); color:#fff; width:48px; height:48px; }
  .ai-banner-icon svg{ width:24px; height:24px; }
  .ai-banner h3{ font-family: var(--font-display); font-size: 1.15rem; margin-bottom:.4rem; }
  .ai-banner p{ color: #DCD3F0; font-size: .92rem; max-width: 62ch; }
  @media (max-width: 640px){
    .ai-banner{ flex-direction: column; padding: 1.5rem; }
  }

  /* ============ FEATURED PROPERTIES ============ */
  .prop-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .prop-card{
    border-radius: var(--radius-md); overflow:hidden; background:#fff;
    border: 1px solid var(--line); transition: transform .22s ease, box-shadow .22s ease;
  }
  .prop-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .prop-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--surface-violet); }
  /* Selector de hijo directo (">"), no descendiente: esta regla es para
     una foto/gráfico decorativo que ocupe toda la tarjeta (mismo trato que
     ".prop-media img" de abajo). Con el selector genérico anterior también
     alcanzaba, sin querer, el <svg> del corazón de favoritos (que vive
     dentro de .fav-btn, dos niveles más adentro) — le pisaba el position
     absolute + inset:0 pensado para "llenar toda la tarjeta" por encima
     del centrado de .fav-btn, y el corazón terminaba pegado en la esquina
     superior izquierda del círculo en vez de centrado. */
  .prop-media > svg{ position:absolute; inset:0; width:100%; height:100%; }
  .prop-media img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: cover; object-position: center;
    color: transparent; /* si la foto no carga, oculta el texto alternativo en vez de desbordarlo sobre el badge */
    font-size: 0;
  }
  .prop-badge{
    position:absolute; top:.85rem; left:.85rem; z-index:2;
    background: var(--violet); color:#fff; font-size:.72rem; font-weight:800;
    padding:.32rem .7rem; border-radius:100px; letter-spacing:.02em;
  }
  .prop-badge.rent{ background: var(--orange); color:#2A1500; }
  .fav-btn{
    position:absolute; top:.75rem; right:.75rem; z-index:2;
    width:36px; height:36px; border-radius:50%; border:none; padding:0; line-height:0;
    background: rgba(255,255,255,.92); display:grid; place-items:center;
    transition: transform .18s ease;
  }
  .fav-btn:hover{ transform: scale(1.08); }
  .fav-btn svg{
    width:17px; height:17px; color: var(--ink-soft); transition: color .18s ease, fill .18s ease;
    display:block;
    /* El path del corazón no es perfectamente simétrico dentro de su
       viewBox 24x24 (queda un poco más "alto" que "ancho") — este ajuste
       fino lo recentra visualmente dentro del círculo del botón. */
    transform: translate(0, 0.5px);
  }
  .fav-btn.active svg{ color: var(--orange); fill: var(--orange); }
  .prop-price-tag{
    position:absolute; bottom:.85rem; left:.85rem; z-index:2;
    background: rgba(23,12,43,.72); backdrop-filter: blur(3px); color:#fff;
    font-family: var(--font-display); font-weight:800; font-size:1rem;
    padding: .4rem .8rem; border-radius: var(--radius-sm);
  }
  .prop-body{ padding: 1.15rem 1.25rem 1.35rem; }
  .prop-loc{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color: var(--muted); font-weight:600; }
  .prop-loc svg{ width:13px; height:13px; color: var(--violet); }
  .prop-title{ font-size: 1.06rem; margin-top:.5rem; font-weight:700; }
  .prop-feats{ display:flex; gap: 1rem; margin-top: .9rem; padding-top:.9rem; border-top: 1px solid var(--line-soft); }
  .prop-feat{ display:flex; align-items:center; gap:.35rem; font-size:.8rem; color: var(--ink-soft); font-weight:600; }
  .prop-feat svg{ width:15px; height:15px; color: var(--violet); }
  .prop-cta{ margin-top: 1.15rem; }

  .featured-foot{ display:flex; justify-content:center; margin-top: 2.6rem; }

  /* ============ ZONES ============ */
  .zones-wrap{ display:flex; flex-wrap:wrap; gap: .8rem; }
  .zone-chip{
    display:flex; align-items:center; gap:.6rem;
    border: 1.5px solid var(--line); border-radius: 100px; padding: .7rem 1.1rem 0.7rem .7rem;
    background:#fff; transition: all .18s ease;
  }
  .zone-chip .icon-badge{ width:34px; height:34px; border-radius:50%; }
  .zone-chip .icon-badge svg{ width:16px; height:16px; }
  .zone-chip strong{ display:block; font-size:.92rem; font-family: var(--font-display); }
  .zone-chip span{ display:block; font-size:.74rem; color: var(--muted); }
  .zone-chip:hover, .zone-chip.active{ border-color: var(--violet); background: var(--surface-violet); transform: translateY(-3px); }

  /* ============ TEAM ============ */
  .team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .team-card{
    text-align:center; padding: 1.8rem 1.3rem; border-radius: var(--radius-md);
    background:#fff; border:1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease;
  }
  .team-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .team-avatar{
    width: 78px; height:78px; border-radius:50%; margin-inline:auto;
    display:flex; align-items:center; justify-content:center;
    color:#fff; overflow:hidden; position:relative;
    background: var(--grad-brand);
  }
  .team-avatar svg{ width: 36px; height:36px; }
  .team-avatar img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position: center top;
    color:transparent; font-size:0;
  }
  .team-card h3{ font-size:1.02rem; margin-top:1rem; }
  .team-role{ font-size:.8rem; color: var(--violet); font-weight:700; margin-top:.2rem; }
  .team-zone{ font-size:.78rem; color: var(--muted); margin-top:.3rem; }
  .team-desc{ font-size:.82rem; color: var(--muted); margin-top:.5rem; line-height:1.4; }
  .team-links{ display:flex; justify-content:center; gap:.55rem; margin-top: 1.1rem; }
  .team-links a{
    width:32px; height:32px; border-radius:50%; background: var(--surface-soft);
    display:flex; align-items:center; justify-content:center; transition: background .18s ease, transform .18s ease;
  }
  .team-links a svg{ width:14px; height:14px; color: var(--violet); }
  .team-links a:hover{ background: var(--grad-brand); transform: translateY(-2px); }
  .team-links a:hover svg{ color:#fff; }

  /* ============ CTA BAND ============ */
  .cta-band{
    background: var(--grad-hero);
    color:#fff; position:relative; overflow:hidden;
  }
  .cta-band .hero-watermark{ opacity:.08; top:-30%; right:-10%; }
  .cta-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center; position:relative; z-index:2; }
  .cta-copy h2{ color:#fff; font-size: clamp(1.7rem, 1rem + 2vw, 2.5rem); font-weight:800; }
  .cta-copy p{ color:#D9CCF1; margin-top: 1rem; max-width: 46ch; }
  .cta-points{ display:flex; flex-direction:column; gap:.7rem; margin-top: 1.5rem; }
  .cta-point{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:#EFE7FA; font-weight:600; }
  .cta-point svg{ width:16px; height:16px; color: var(--orange); flex-shrink:0; }

  .tasacion-card{
    background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px); border-radius: var(--radius-lg); padding: 1.8rem;
  }
  .tasacion-card h3{ color:#fff; font-size:1.15rem; }
  .tasacion-card > p{ color:#C9B7E8; font-size:.85rem; margin-top:.35rem; }
  .form-row{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem; margin-top: 1.3rem; }
  .form-field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
  .form-field.full{ grid-column: 1 / -1; }
  .form-field input, .form-field select, .form-field textarea{ width:100%; min-width:0; }
  .form-field label{ font-size:.74rem; font-weight:700; color:#C9B7E8; text-transform:uppercase; letter-spacing:.05em; }
  .form-field input, .form-field select{
    background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--radius-sm);
    padding: .72rem .85rem; color:#fff; font-weight:600;
  }
  .form-field select option{ color: #221733; }
  .form-field input::placeholder{ color: #B9A6DD; }
  .form-field input:focus, .form-field select:focus{ border-color: var(--orange); background: rgba(255,255,255,.13); }
  .tasacion-card .btn{ margin-top: 1.3rem; }
  .form-success{ display:none; text-align:center; padding: 1.5rem 0; }
  .form-success.show{ display:block; }
  .form-success .icon-badge{ margin-inline:auto; background: rgba(66,224,138,.18); color:#42E08A; }
  .form-success h4{ color:#fff; margin-top:1rem; }
  .form-success p{ color:#C9B7E8; font-size:.88rem; margin-top:.4rem; }

  /* ============ NOSOTROS (historia / misión / visión) ============ */
  .about-story{ max-width: 740px; margin: 0 auto; }
  .about-story p{ color: var(--ink-soft); font-size: 1.05rem; line-height: 1.8; margin-top: 1.2rem; }
  .about-story p:first-child{ margin-top: 0; }
  .about-story strong{ color: var(--ink); }
  .mv-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; max-width: 920px; margin: 0 auto; }
  .mv-card{
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 2rem; background:#fff; box-shadow: var(--shadow-sm);
  }
  .mv-card h3{ font-size: 1.25rem; margin-top: 1.1rem; }
  .mv-card p{ color: var(--muted); margin-top: .7rem; line-height: 1.65; }
  @media (max-width: 720px){
    .mv-grid{ grid-template-columns: minmax(0,1fr); }
  }

  /* ============ CAREERS (TRABAJÁ CON NOSOTROS) ============ */
  .careers-grid{ align-items:start; }
  .careers-copy p{ color: var(--muted); margin-top: 1rem; max-width: 46ch; }
  .careers-points{ margin-top: 1.6rem; }
  .careers-points .cta-point{ color: var(--ink-soft); }
  .careers-mailto{ margin-top: 1.7rem; }

  .apply-card{
    background:#fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.8rem; box-shadow: var(--shadow-md);
  }
  .apply-card h3{ font-size: 1.15rem; }
  .apply-card > form > p{ color: var(--muted); font-size:.85rem; margin-top:.35rem; }
  .apply-card .form-field label{ color: var(--muted); }
  .apply-card .form-field input,
  .apply-card .form-field select,
  .apply-card .form-field textarea{
    background: var(--surface-soft); border: 1.5px solid var(--line); color: var(--ink);
  }
  .apply-card .form-field input::placeholder,
  .apply-card .form-field textarea::placeholder{ color: var(--muted); }
  .apply-card .form-field input:focus,
  .apply-card .form-field select:focus,
  .apply-card .form-field textarea:focus{ border-color: var(--violet); background:#fff; }
  .apply-card .form-field select option{ color: var(--ink); }
  .apply-card .form-success h4{ color: var(--ink); }
  .apply-card .form-success p{ color: var(--muted); }
  .form-field textarea{ resize: vertical; min-height: 84px; font-family: inherit; }

  /* ============ FOOTER ============ */
  .site-footer{ background: #100820; color: #B9A6DD; padding-top: 4rem; }
  .footer-grid{ display:grid; grid-template-columns: 1.4fr .8fr .8fr 1.1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .footer-about p{ font-size:.88rem; margin-top: 1rem; max-width: 34ch; color:#A594C6; }
  .footer-social{ display:flex; gap:.6rem; margin-top: 1.4rem; }
  .footer-social a{ width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; transition: background .18s ease, transform .18s ease; }
  .footer-social a svg{ width:15px; height:15px; color:#D9CCF1; }
  .footer-social a:hover{ background: var(--grad-brand); transform: translateY(-2px); }
  .footer-col h4{ color:#fff; font-size: .9rem; margin-bottom: 1.1rem; }
  .footer-col ul{ display:flex; flex-direction:column; gap: .7rem; }
  .footer-col a{ font-size: .87rem; transition: color .18s ease; }
  .footer-col a:hover{ color: var(--orange); }
  .footer-contact li{ font-size:.87rem; }
  .footer-contact li a{ display:flex; align-items:flex-start; gap:.6rem; transition: color .18s ease; }
  .footer-contact li a:hover{ color: var(--orange); }
  .topbar-item:hover{ color:#fff; }
  .footer-contact svg{ width:15px; height:15px; color: var(--orange); flex-shrink:0; margin-top: .15rem; }
  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
    padding-block: 1.5rem; font-size:.8rem; color:#8875AC;
  }
  .footer-bottom .tokko{ display:flex; align-items:center; gap:.45rem; }
  .footer-bottom .tokko svg{ width:14px; height:14px; color: var(--orange); }
  .footer-bottom .tokko a{ color:#8875AC; text-decoration: underline; text-underline-offset: 2px; transition: color .18s ease; }
  .footer-bottom .tokko a:hover{ color: var(--orange); }

  /* ============ WHATSAPP FLOAT ("Hablar con un asesor") ============ */
  .wa-widget{ position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 70; }
  .wa-float{
    width: 58px; height:58px; border-radius:50%; border:none; cursor:pointer;
    background: #25D366; box-shadow: 0 12px 26px rgba(37,211,102,.45);
    display:flex; align-items:center; justify-content:center;
    transition: transform .2s ease;
  }
  .wa-float:hover{ transform: scale(1.08); }
  .wa-float svg{ width:28px; height:28px; color:#fff; }

  .wa-menu{
    position:absolute; right:0; bottom: calc(100% + 12px); width: 250px;
    background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: .6rem; display:flex; flex-direction:column; gap:.2rem;
    opacity:0; visibility:hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease;
  }
  .wa-widget.open .wa-menu{ opacity:1; visibility:visible; transform: translateY(0); }
  .wa-menu-title{
    font-family: var(--font-display); font-weight:700; font-size:.8rem;
    color: var(--muted); padding: .5rem .7rem .3rem;
  }
  .wa-menu a{
    display:flex; align-items:center; padding: .6rem .7rem; border-radius: var(--radius-sm);
    font-size:.88rem; font-weight:600; color: var(--ink);
  }
  .wa-menu a:hover{ background: var(--surface-soft); color: var(--violet); }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1160px){
    /* Con "Ingresar" afuera todavía entra hasta ~1160px; por debajo, en
       vez de seguir achicando el texto del nav hasta hacerlo ilegible,
       pasamos directo al menú hamburguesa (antes ese cambio pasaba recién
       a los 760px, pensado para 5 ítems de nav en vez de los 6 actuales). */
    .main-nav{ display:none; }
    .nav-toggle{ display:flex; }
    /* .mobile-nav es hermano de .container (que envuelve a .header-inner)
       dentro de <header>, no hermano directo de .header-inner — por eso
       el selector apunta a .site-header, no a .header-inner (con "+" el
       menú nunca abría: bug pre-existente que encontramos al testear
       este cambio, corregido acá y en main.js). */
    .site-header.menu-open .mobile-nav{ max-height: 420px; border-top: 1px solid var(--line-soft); }
    .mobile-nav ul{ display:flex; flex-direction:column; padding: 1rem clamp(1.25rem,4vw,2.5rem) 1.4rem; gap:.3rem; }
    .mobile-nav a{ display:block; padding:.7rem .2rem; font-weight:700; color: var(--ink); border-bottom:1px solid var(--line-soft); }
    .mobile-nav .mobile-cta{ margin-top:.8rem; }
  }

  @media (max-width: 1080px){
    .hero-grid{ grid-template-columns: minmax(0,1fr); }
    .hero-art{ max-width: 480px; }
    .search-fields{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .field-credit{ grid-column: 1 / -1; }
    .field-credit .filter-chip{ width: 160px; }
    .ops-grid, .team-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
    .prop-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cta-grid{ grid-template-columns: minmax(0,1fr); }
    .footer-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap: 1.6rem; }
    .stat:nth-child(2){ border-right:none; }
  }

  @media (max-width: 760px){
    .topbar-left .topbar-item:nth-child(2){ display:none; }
    .topbar-left .topbar-item:nth-child(3){ display:none; }
    .topbar-right{ display:none; }
    .main-nav{ display:none; }
    .nav-toggle{ display:flex; }
    /* El resto de las reglas del menú hamburguesa (abrir/cerrar, estilo de
       la lista) ya están en @media (max-width: 1160px) más arriba, que
       cubre también este rango. */

    .hero-copy p{ max-width: none; }
    .hero-float-card{ position:static; margin-top: 1rem; max-width:none; }
    .hero-art-card{ padding-bottom: 1rem; }
    .search-widget{ margin-top: 1.6rem; padding: 1.2rem; }
    .search-fields{ grid-template-columns: minmax(0,1fr); }
    .field-credit .filter-chip{ width:100%; }
    .search-foot{ flex-direction:column; align-items:center; }
    .search-shopper-cta{ margin-top:.4rem; }
    .field-dormitorios .filter-chip-list{ flex-wrap:wrap; }

    .ops-grid, .team-grid, .prop-grid{ grid-template-columns: minmax(0,1fr); }
    .stats-grid{ grid-template-columns: 1fr 1fr; }
    .footer-grid{ grid-template-columns: minmax(0,1fr); gap: 2.2rem; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
    .cta-band .container, .hero .container{ padding-inline: 1.25rem; }
    section{ padding-block: 3rem; }
    .form-row{ grid-template-columns: minmax(0,1fr); }
    .btn{ white-space: normal; text-align:center; }
    .form-field.full{ grid-column: 1; }
  }

  /* ============ PÁGINA DE RESULTADOS ============ */
  .results-hero{
    background: var(--grad-hero); color:#fff; padding-block: 2.2rem 2.6rem; position:relative; overflow:hidden;
  }
  .results-hero .hero-watermark{ opacity:.08; }
  .breadcrumb{ font-size:.82rem; color:#C9B7E8; display:flex; gap:.4rem; align-items:center; position:relative; z-index:2; }
  .breadcrumb a{ color:#C9B7E8; }
  .breadcrumb a:hover{ color:#fff; }
  .results-hero h1{ color:#fff; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); margin-top:.6rem; position:relative; z-index:2; }
  .results-hero p{ color:#D9CCF1; margin-top:.4rem; position:relative; z-index:2; }

  .results-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items:start; padding-block: 2.6rem; }
  .filters-panel{
    position:sticky; top: 90px; background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
    padding: 1.4rem; display:flex; flex-direction:column; gap:1.3rem;
  }
  .filters-panel h3{ font-size:.98rem; }
  .filter-group{ display:flex; flex-direction:column; gap:.6rem; }
  .filter-group .label{ font-size:.76rem; font-weight:700; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  .filter-chip-list{ display:flex; flex-wrap:wrap; gap:.4rem; }
  .filter-chip{
    border:1.5px solid var(--line); background:#fff; color: var(--ink-soft); font-size:.8rem; font-weight:600;
    padding:.4rem .75rem; border-radius:100px; transition: all .15s ease;
  }
  .filter-chip[aria-pressed="true"]{ background: var(--grad-brand); border-color:transparent; color:#fff; }
  .filter-chip:hover:not([aria-pressed="true"]){ border-color: var(--violet); color: var(--violet); }
  .filters-panel select, .filters-panel input[type="number"], .filters-panel input[type="text"]{
    width:100%; border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.6rem .75rem;
    background: var(--surface-soft); font-weight:600; color: var(--ink); font-size:.88rem;
  }
  .filters-panel select:focus, .filters-panel input:focus{ border-color: var(--violet); background:#fff; }
  .filters-panel .price-range-inputs{ gap:.4rem; }
  .filters-panel .price-range-inputs input{ padding:.6rem .5rem; text-align:center; }
  .filters-panel .dormitorios-range-inputs{ gap:.4rem; }
  .filters-panel .dormitorios-range-inputs select{ width:auto; flex:1; min-width:0; padding:.6rem .5rem; }
  .filters-clear{ font-size:.82rem; color: var(--violet); font-weight:700; text-align:left; background:none; border:none; padding:0; }

  .results-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: 1.4rem; flex-wrap:wrap; }
  .results-count{ font-size:.92rem; color: var(--ink-soft); font-weight:600; }
  .results-count strong{ color: var(--violet); }
  .results-sort select{
    border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.55rem .8rem; font-weight:600; font-size:.85rem; background:#fff;
  }

  .pagination{ display:flex; justify-content:center; gap:.5rem; margin-top: 2.4rem; }
  .pagination button{
    width:38px; height:38px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-weight:700; color: var(--ink-soft);
  }
  .pagination button[aria-current="true"]{ background: var(--grad-brand); border-color:transparent; color:#fff; }
  .pagination button:disabled{ opacity:.4; cursor:not-allowed; }

  .empty-state{ text-align:center; padding: 3.5rem 1rem; color: var(--muted); }
  .empty-state .icon-badge{ margin-inline:auto; width:56px; height:56px; }
  .empty-state h3{ margin-top:1rem; color: var(--ink); }
  .empty-state p{ margin-top:.4rem; }

  .skeleton-card{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); background:#fff; }
  .skeleton-media{ aspect-ratio:4/3; background: linear-gradient(100deg, var(--surface-soft) 30%, var(--line-soft) 50%, var(--surface-soft) 70%); background-size:200% 100%; animation: shimmer 1.4s infinite; }
  .skeleton-line{ height:12px; border-radius:6px; margin:.9rem 1.1rem; background: linear-gradient(100deg, var(--surface-soft) 30%, var(--line-soft) 50%, var(--surface-soft) 70%); background-size:200% 100%; animation: shimmer 1.4s infinite; }
  .skeleton-line.w60{ width:60%; }
  .skeleton-line.w40{ width:40%; }
  @keyframes shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce){ .skeleton-media, .skeleton-line{ animation:none; } }

  @media (max-width: 900px){
    .results-layout{ grid-template-columns: minmax(0,1fr); }
    .filters-panel{ position:static; }
  }

  /* ============ FICHA DE PROPIEDAD: galería tipo Airbnb/Idealista ============
   * Foto principal grande a la izquierda + grilla 2x2 de miniaturas a la
   * derecha (hasta 4 visibles); si hay más fotos, la última celda muestra
   * un overlay "+N fotos". Todo dentro de una altura fija (no aspect-ratio,
   * el mismo criterio "a prueba de balas" que ya usamos en el resto del
   * sitio) para que nunca queden miniaturas deformadas ni espacio muerto.
   * Cualquier foto (principal o miniatura) abre la galería completa en un
   * lightbox con navegación. */
  .property-gallery{ display:flex; gap:.6rem; height: 440px; border-radius: var(--radius-lg); overflow:hidden; }
  .property-gallery-main{
    flex: 1.6 1 0; position:relative; background: var(--surface-violet);
    padding:0; margin:0; border:none; display:block; line-height:0; cursor:zoom-in;
  }
  .property-gallery-main img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
    display:block; color:transparent; font-size:0;
  }
  .property-gallery-grid{
    flex: 1 1 0; display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:.6rem; min-width:0;
  }
  /* Si hay menos de 4 miniaturas, la grilla se adapta en vez de dejar
     celdas vacías (1 sola foto = llena todo el espacio; 2 = apiladas;
     3 = dos arriba + una abajo ocupando todo el ancho). */
  .property-gallery-grid.grid-count-1{ grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .property-gallery-grid.grid-count-2{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .property-gallery-grid.grid-count-3{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .property-gallery-grid.grid-count-3 button:nth-child(3){ grid-column: 1 / 3; }
  .property-gallery-grid button{
    position:relative; padding:0; margin:0; border:none; background: var(--surface-violet);
    display:block; line-height:0; overflow:hidden; cursor:zoom-in;
  }
  .property-gallery-grid img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
    display:block; color:transparent; font-size:0;
  }
  .property-gallery-more-overlay{
    position:absolute; inset:0; background: rgba(23,12,43,.6); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1rem; text-align:center;
  }
  @media (max-width: 900px){
    .property-gallery{ flex-direction:column; height:auto; }
    /* En columna, "flex: 1.6 1 0" / "flex: 1 1 0" (base desktop) fija
       flex-basis:0, que pisa cualquier "height" declarado acá — hay que
       resetear el flex-basis (flex:none) para que la altura fija se
       respete en mobile. */
    .property-gallery-main{ flex:none; height:260px; }
    .property-gallery-grid{ flex:none; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height:72px; }
    /* En mobile la grilla es una fila (no 2x2) — con menos de 4 fotos,
       repartimos el ancho entre las que haya en vez de dejar columnas
       vacías reservadas por la regla de 4 columnas de arriba. */
    .property-gallery-grid.grid-count-1{ grid-template-columns: 1fr; }
    .property-gallery-grid.grid-count-2{ grid-template-columns: 1fr 1fr; }
    .property-gallery-grid.grid-count-3{ grid-template-columns: 1fr 1fr 1fr; }
    .property-gallery-grid.grid-count-3 button:nth-child(3){ grid-column: auto; }
  }

  /* ---- Lightbox de fotos (galería completa) ---- */
  .gallery-lightbox{
    display:none; position:fixed; inset:0; z-index:200; background: rgba(10,4,20,.94);
    align-items:center; justify-content:center;
  }
  .gallery-lightbox.open{ display:flex; }
  .gallery-lightbox-stage{ max-width: 90vw; max-height: 85vh; display:flex; align-items:center; justify-content:center; }
  .gallery-lightbox-stage img{ max-width: 90vw; max-height: 85vh; object-fit:contain; border-radius: var(--radius-sm); }
  .gallery-lightbox-close, .gallery-lightbox-nav{
    position:absolute; display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.3);
    color:#fff; transition: background .18s ease;
  }
  .gallery-lightbox-close:hover, .gallery-lightbox-nav:hover{ background: rgba(255,255,255,.24); }
  .gallery-lightbox-close{ top:1.2rem; right:1.2rem; }
  .gallery-lightbox-close svg{ width:20px; height:20px; }
  .gallery-lightbox-nav{ top:50%; transform: translateY(-50%); }
  .gallery-lightbox-nav svg{ width:22px; height:22px; }
  .gallery-lightbox-nav.prev{ left:1.2rem; }
  .gallery-lightbox-nav.next{ right:1.2rem; }
  .gallery-lightbox-counter{
    position:absolute; bottom:1.4rem; left:50%; transform: translateX(-50%);
    color:#fff; font-size:.85rem; font-weight:600; background: rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.3); padding:.35rem .9rem; border-radius:100px;
  }
  @media (max-width: 640px){
    .gallery-lightbox-nav{ width:38px; height:38px; }
    .gallery-lightbox-nav.prev{ left:.5rem; }
    .gallery-lightbox-nav.next{ right:.5rem; }
  }

  /* ============ MAPA DE UBICACIÓN (ficha de propiedad) ============ */
  .property-map-wrap{ margin-top: 1.8rem; }
  .property-map-wrap h3{ font-size: 1.05rem; margin-bottom: .8rem; }
  .property-map{
    width:100%; height: 320px; border-radius: var(--radius-md); overflow:hidden;
    border: 1px solid var(--line); background: var(--surface-violet);
  }
  .property-map-note{ font-size:.78rem; color: var(--muted); margin-top:.6rem; }
  .price-alert-btn{ margin-top:.9rem; }

  .property-layout{ display:grid; grid-template-columns: 1fr 340px; gap: 2.6rem; align-items:start; padding-block: 2.4rem 4rem; }
  .property-main h1{ font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); }
  .property-meta{ display:flex; flex-wrap:wrap; gap: 1.4rem; margin-top: 1.2rem; padding: 1.2rem 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
  .property-meta .item{ display:flex; align-items:center; gap:.5rem; font-size:.92rem; color: var(--ink-soft); font-weight:600; }
  .property-meta .item svg{ width:18px; height:18px; color: var(--violet); }
  .property-desc{ margin-top: 1.6rem; color: var(--ink-soft); line-height:1.75; white-space:pre-line; }
  .property-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top: 1.6rem; }
  .property-tags span{ background: var(--surface-violet); color: var(--violet); font-size:.8rem; font-weight:700; padding:.4rem .8rem; border-radius:100px; }

  .property-sidebar{ position:sticky; top:90px; display:flex; flex-direction:column; gap:1.2rem; }
  .property-price-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.6rem; box-shadow: var(--shadow-md); }
  .property-price-card .price{ font-family: var(--font-display); font-weight:800; font-size:1.8rem; color: var(--ink); }
  .property-price-card .ref{ font-size:.78rem; color: var(--muted); margin-top:.3rem; }
  .agent-card{ display:flex; align-items:center; gap:.9rem; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line-soft); }
  .agent-card .team-avatar{ width:52px; height:52px; flex-shrink:0; }
  .agent-card .team-avatar svg{ width:26px; height:26px; }
  .agent-card strong{ display:block; font-size:.92rem; }
  .agent-card span{ font-size:.78rem; color: var(--muted); }
  .property-price-card .btn{ margin-top:1.3rem; }

  @media (max-width: 900px){
    .property-layout{ grid-template-columns: minmax(0,1fr); }
    .property-sidebar{ position:static; }
  }

  /* ============ HERO: propiedad destacada (rotativa) ============ */
  .hero-art-card-link{ display:block; text-decoration:none; }
  .hero-photo-info{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding: 1.6rem 1.1rem 1rem; display:flex; flex-direction:column; gap:.3rem;
    background: linear-gradient(0deg, rgba(15,7,30,.86), rgba(15,7,30,.15) 80%, transparent);
    color:#fff;
  }
  /* Especificidad a propósito: ".hero-photo-info .hero-photo-badge" (dos
     clases) en vez de sólo ".hero-photo-badge". Esta etiqueta es un
     <span> hijo de .hero-photo-info, y la regla de más abajo
     (".hero-photo-info span{ color:#E3D7F7 }", pensada para el texto
     secundario tipo "Centro, Rosario · USD 80.000") tiene más
     especificidad que una sola clase — le estaba ganando el color al
     texto de esta etiqueta y la dejaba casi ilegible (lila muy pálido
     sobre fondo blanco). */
  .hero-photo-info .hero-photo-badge{
    align-self:flex-start; background:#fff; color: var(--violet); font-size:.68rem; font-weight:800;
    padding:.28rem .6rem; border-radius:100px; margin-bottom:.2rem;
  }
  .hero-photo-info .hero-photo-badge.rent{ background: var(--orange); color:#2A1500; }
  .hero-photo-info strong{ font-family: var(--font-display); font-size:1.02rem; font-weight:800; }
  .hero-photo-info span{ font-size:.82rem; color:#E3D7F7; }
  .hero-photo img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; color:transparent; font-size:0;
    /* Efecto "Ken Burns": zoom + paneo lentísimo en loop, para que la foto
       destacada del hero se sienta "viva" sin distraer del texto/precio
       superpuesto. .hero-photo ya tiene overflow:hidden, así que el
       zoom nunca se sale de la caja redondeada.
       Ojo: el estado "from" arranca en scale(1.06) y no en scale(1) a
       propósito. Con scale(1) la imagen queda exactamente al ras del
       borde inferior del recorte en ese instante exacto de la animación,
       y el redondeo de subpíxeles del navegador dejaba ver una línea
       finita del fondo degradado por debajo. Arrancar ya con un poco de
       "de más" (nunca al ras) evita esa costura en cualquier punto del
       loop. */
    transform-origin: 55% 42%;
    animation: heroKenBurns 24s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes heroKenBurns{
    from{ transform: scale(1.06) translate(0, 0); }
    to{ transform: scale(1.18) translate(-2.2%, -1.3%); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-photo img{ animation: none; }
  }

  /* ============ MAPA DE ZONAS (home) ============ */
  .map-wrap{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--line); }
  /* Antes hasta 480px de alto (46vw) — el mapa era lo más grande de toda la
     sección. Con el rediseño a pestañas (Fase 29) ya no hace falta que sea
     tan grande: se achicó a un rango más chico, coherente con el pedido de
     que la sección ocupe menos pantalla. */
  .zones-map{ width:100%; height: clamp(260px, 30vw, 340px); background: var(--surface-violet); }

  .map-search-area-btn{
    position:absolute; top:1rem; left:50%; transform: translateX(-50%); z-index:1000;
    display:flex; align-items:center; gap:.5rem;
    background: var(--ink); color:#fff; font-family: var(--font-display); font-weight:700; font-size:.85rem;
    padding:.65rem 1.2rem; border-radius:100px; border:none; box-shadow: var(--shadow-md);
    transition: transform .18s ease, background .18s ease;
  }
  .map-search-area-btn svg{ width:15px; height:15px; }
  .map-search-area-btn:hover{ background: var(--violet); transform: translateX(-50%) translateY(-2px); }
  .leaflet-popup-content{ font-family: var(--font-body); font-size:.85rem; }

  /* ============ CARRUSEL DE EQUIPO ============ */
  .team-carousel{ display:flex; align-items:center; gap: .8rem; }
  .team-carousel-track{
    display:flex; gap: 1.2rem; overflow-x:auto; scroll-snap-type: x proximity;
    padding-block:.3rem; scroll-behavior: smooth; flex:1; min-width:0;
  }
  .team-carousel-track::-webkit-scrollbar{ height:6px; }
  .team-carousel-track::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; }
  .team-carousel-track .team-card{
    flex: 0 0 auto; width: min(240px, 78vw); scroll-snap-align: start;
  }
  .team-carousel-nav{
    flex-shrink:0; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
    background:#fff; display:flex; align-items:center; justify-content:center; transition: all .18s ease;
  }
  .team-carousel-nav:hover{ border-color: var(--violet); background: var(--surface-violet); }
  .team-carousel-nav svg{ width:18px; height:18px; color: var(--violet); }
  @media (max-width: 640px){
    .team-carousel-nav{ display:none; }
  }

  /* ============ FICHA: propiedades similares (carrusel) ============ */
  .similar-properties{ margin-top: 3.2rem; }
  .similar-properties .section-head{ margin-bottom: 1.4rem; }
  .similar-carousel{ display:flex; align-items:center; gap: .8rem; }
  .similar-carousel-track{
    display:flex; gap: 1.2rem; overflow-x:auto; scroll-snap-type: x proximity;
    padding-block:.3rem; scroll-behavior: smooth; flex:1; min-width:0;
  }
  .similar-carousel-track::-webkit-scrollbar{ height:6px; }
  .similar-carousel-track::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; }
  .similar-card{
    flex: 0 0 auto; width: min(300px, 82vw); scroll-snap-align: start;
  }
  .similar-carousel-nav{
    flex-shrink:0; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
    background:#fff; display:flex; align-items:center; justify-content:center; transition: all .18s ease;
  }
  .similar-carousel-nav:hover{ border-color: var(--violet); background: var(--surface-violet); }
  .similar-carousel-nav svg{ width:18px; height:18px; color: var(--violet); }
  @media (max-width: 640px){
    .similar-carousel-nav{ display:none; }
  }

  /* ============ VISTOS RECIENTEMENTE (/propiedades.php) ============ */
  /* Franja liviana entre el hero violeta y el listado: no necesita el
     padding-block grande de una section completa. */
  .recently-viewed{ padding-block: 2.4rem 0; }
  .recently-viewed .section-head{ margin-bottom: 1.4rem; }

  /* ============ MAPA + ZONAS (home) ============
     Rediseño (Fase 29): antes era un grid de 2 columnas (mapa grande +
     tarjeta de zonas), que ocupaba mucha pantalla — sobre todo el mapa,
     hasta 480px de alto — y en mobile el mapa directamente se ocultaba
     (ver nota vieja más abajo, ya no aplica). El cliente pidió, de 3
     opciones, la de una única tarjeta con pestañas ("Mapa interactivo" /
     "Por zona"): nunca se ven las dos vistas a la vez, así que la sección
     ocupa mucho menos espacio en ambas versiones (desktop y mobile), y de
     paso el mapa vuelve a estar disponible en mobile (antes no lo estaba). */
  .map-zone-card{
    background:#fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); overflow:hidden;
  }
  .map-zone-tabs{ display:flex; border-bottom: 1px solid var(--line); }
  .map-zone-tab{
    flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding: 1rem; font-family: var(--font-display); font-weight:700; font-size:.9rem;
    color: var(--muted); background:none; border:none; border-bottom: 3px solid transparent;
    cursor:pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  }
  .map-zone-tab svg{ width:17px; height:17px; flex-shrink:0; }
  .map-zone-tab:hover{ color: var(--violet); }
  .map-zone-tab.is-active{ color: var(--violet); border-bottom-color: var(--violet); background: var(--surface-soft); }
  .map-zone-panel{ padding: 1.4rem; }
  .map-zone-panel[hidden]{ display:none; }
  .map-zone-panel .zones-map{ border-radius: var(--radius-md); }
  @media (max-width: 560px){
    .map-zone-tab{ font-size:.82rem; padding:.85rem .5rem; }
    .map-zone-tab svg{ width:15px; height:15px; }
    .map-zone-panel{ padding: 1rem; }
  }

  /* Nota histórica: .personal-shopper-card sigue en uso en zona.php (no se
     tocó). .map-shopper-grid, .zone-card y .map-wrap (grid de 2 columnas
     de antes) quedaron sin uso en esta página tras este rediseño. */
  .personal-shopper-card{
    background:#fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.9rem; box-shadow: var(--shadow-md);
    display:flex; flex-direction:column; justify-content:center;
  }
  .personal-shopper-card h3{ font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); font-weight:800; margin-top: 1.1rem; line-height:1.25; }
  .personal-shopper-card h3 .accent{ color: var(--violet); }
  .personal-shopper-card > p{ color: var(--muted); margin-top:.6rem; }
  .personal-shopper-card .cta-points{ margin-top: 1.4rem; gap: .85rem; }
  .personal-shopper-card .cta-point{ color: var(--ink-soft); align-items:flex-start; }
  .personal-shopper-card .cta-point svg{ color: var(--violet); margin-top:.15rem; }
  .personal-shopper-card .btn{ margin-top: 1.5rem; align-self:flex-start; }
  /* .zone-card-list / .zone-link-card.compact: mismo lenguaje visual de
     tarjeta de zona ya definido antes del rediseño de la Fase 29, reusado
     ahora dentro de .map-zone-panel (ver arriba). */
  .zone-card-list{ display:flex; flex-direction:column; gap:.6rem; }
  .zone-link-card.compact{ padding:.75rem .95rem; font-size:.92rem; }
  .zone-link-card.compact .zone-link-count{ font-size:.74rem; }

  /* ============ PERSONAL SHOPPER (banner chico e independiente, home) ============
     Antes era una tarjeta grande de 2 columnas junto al mapa; el cliente
     pidió separarlo en un banner propio, más chico, debajo de "Explorá el
     mercado con nosotros" / "Explorá por zona" (Fase 25). Rediseño posterior
     (Fase 28): el cliente pidió 3 opciones más llamativas manteniendo la
     identidad visual del sitio y eligió la de fondo con el degradé de marca
     (el mismo violeta→azul ya usado en el hero y en íconos sólidos), en vez
     del fondo lavanda plano que tenía antes. */
  .shopper-banner-section{ padding-block: clamp(1.4rem, 2.6vw, 2.1rem); }
  .shopper-banner{
    display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
    background: var(--grad-brand); border-radius: var(--radius-lg);
    padding: 1.3rem 1.7rem; box-shadow: var(--shadow-md);
    position: relative; overflow: hidden;
  }
  /* Brillo sutil arriba a la derecha, mismo recurso que ya usa el hero para
     que el degradé no se vea plano — puramente decorativo. El cliente pidió
     "animarlo un poco" para que el banner no se sienta estático: el brillo
     ahora se desplaza en un loop lento y continuo (18s) en vez de quedar
     fijo, y el ícono tiene un balanceo/pulso suave — todo sutil, sin texto
     que se mueva ni nada que distraiga de la lectura. */
  .shopper-banner::before{
    content:""; position:absolute; inset:-20%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.20), transparent 55%);
    pointer-events:none;
    animation: shopperGlowDrift 18s ease-in-out infinite;
  }
  .shopper-banner .icon-badge{
    background: rgba(255,255,255,.16); color:#fff; flex-shrink:0; position:relative;
    animation: shopperIconFloat 4.5s ease-in-out infinite;
  }
  .shopper-banner-text{ display:flex; flex-direction:column; gap:.2rem; flex:1 1 320px; min-width:0; position:relative; }
  .shopper-banner-text strong{ font-size:1.08rem; font-weight:800; color:#fff; }
  .shopper-banner-text strong .accent{ color: var(--orange); }
  .shopper-banner-text span{ font-size:.87rem; color: rgba(255,255,255,.86); }
  .shopper-banner .btn{ flex-shrink:0; white-space:nowrap; position:relative; transition: transform .2s ease, box-shadow .2s ease; }
  .shopper-banner .btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
  @keyframes shopperGlowDrift{
    0%, 100%{ transform: translate(10%, -6%) scale(1); }
    50%{ transform: translate(-6%, 8%) scale(1.15); }
  }
  @keyframes shopperIconFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-3px); }
  }
  @media (prefers-reduced-motion: reduce){
    .shopper-banner::before, .shopper-banner .icon-badge{ animation: none; }
  }
  @media (max-width: 560px){
    .shopper-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
    /* flex:1 1 320px en .shopper-banner-text usa ese 320px como base del
       eje principal — en fila (desktop) es ancho, pero acá el eje principal
       pasa a ser vertical (column), así que sin este reset el texto quedaba
       con ~320px de ALTO y el botón lejos abajo. */
    .shopper-banner-text{ flex: 0 1 auto; }
    .shopper-banner .btn{ align-self:stretch; justify-content:center; }
  }

  /* ============ RESEÑAS DE GOOGLE (home) ============ */
  /* Dos columnas: la tarjeta con el puntaje real de Google a la
     izquierda, y a la derecha un carrusel con reseñas reales que pasó
     el cliente (copiadas tal cual de su perfil) — antes era sólo la
     tarjeta centrada y quedaba mucho espacio en blanco alrededor. */
  .reviews-grid{ display:grid; grid-template-columns: minmax(0,380px) minmax(0,1fr); gap:2rem; align-items:stretch; }
  .reviews-card{
    background:#fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 2.4rem;
    text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .reviews-google-logo{ width:36px; height:36px; }
  .reviews-rating-row{ display:flex; align-items:baseline; gap:.6rem; margin-top:.9rem; }
  .reviews-score{ font-size: 2.4rem; font-weight:800; color: var(--ink); line-height:1; }
  .reviews-stars{ display:flex; gap:.2rem; color: var(--orange); }
  .reviews-stars svg{ width:20px; height:20px; }
  .reviews-count{ color: var(--muted); font-weight:600; margin-top:.5rem; }
  .reviews-card .btn{ margin-top:1.5rem; }

  .testimonial-carousel{
    background: linear-gradient(160deg, #ffffff 0%, #ffffff 55%, #f2eafb 130%);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 2.6rem 2.8rem 2.2rem; position:relative;
    display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  }
  .testimonial-quote-mark{
    position:absolute; top:-.6rem; left:1.4rem; width:84px; height:84px;
    color: var(--surface-violet); z-index:0; pointer-events:none;
  }
  .testimonial-track{ position:relative; min-height: 9rem; z-index:1; }
  .testimonial-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden; transform: translateX(10px);
    transition: opacity .5s ease, transform .5s ease, visibility .5s;
  }
  .testimonial-slide.is-active{ position:relative; opacity:1; visibility:visible; transform:none; }
  .testimonial-text{
    font-size: 1.15rem; line-height:1.65; color: var(--ink); font-weight:600;
    position:relative; z-index:1;
  }
  .testimonial-author{ display:flex; align-items:center; gap:.85rem; margin-top: 1.5rem; }
  .testimonial-avatar{
    width:42px; height:42px; border-radius:50%; background: var(--grad-brand); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--surface-violet);
  }
  .testimonial-author strong{ display:block; font-size:.93rem; }
  .testimonial-source{
    display:flex; align-items:center; gap:.35rem; font-size:.8rem; color: var(--muted); margin-top:.15rem;
  }
  .testimonial-source svg{ width:13px; height:13px; flex-shrink:0; }
  .testimonial-controls{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:1.9rem; }
  .testimonial-nav{
    flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
    background:#fff; display:flex; align-items:center; justify-content:center; transition: all .18s ease;
  }
  .testimonial-nav svg{ width:16px; height:16px; color: var(--violet); }
  .testimonial-nav:hover{ background: var(--violet); border-color: var(--violet); color:#fff; }
  .testimonial-nav:hover svg{ color:#fff; }
  .testimonial-dots{ display:flex; align-items:center; gap:.5rem; }
  .testimonial-dot{ width:8px; height:8px; border-radius:50%; background: var(--line); transition: all .18s ease; }
  .testimonial-dot.is-active{ background: var(--violet); width:22px; border-radius:5px; }
  /* Barra de progreso: se llena en 6s (mismo intervalo que el auto-avance
     en main.js) y se reinicia cada vez que cambia la reseña — le da al
     visitante una señal visual clara de que el carrusel rota solo, no
     sólo que "ya cambió". Se pausa al pasar el mouse. */
  .testimonial-progress{
    height:3px; border-radius:99px; background: var(--line); margin-top:1.6rem;
    overflow:hidden; position:relative; z-index:1;
  }
  .testimonial-progress-bar{ height:100%; width:0%; background: var(--grad-brand); border-radius:inherit; }
  .testimonial-progress-bar.is-animating{ animation: testimonialProgress 6s linear forwards; }
  .testimonial-progress-bar.is-paused{ animation-play-state: paused; }
  @keyframes testimonialProgress{ from{ width:0%; } to{ width:100%; } }
  @media (prefers-reduced-motion: reduce){
    .testimonial-progress{ display:none; }
  }
  @media (max-width: 900px){
    .reviews-grid{ grid-template-columns: minmax(0,1fr); }
    .testimonial-quote-mark{ width:64px; height:64px; }
  }

  /* ============ BÚSQUEDA AVANZADA (filtros de /propiedades.php) ============ */
  .filters-advanced-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    background:none; border:none; padding:0; font-weight:700; font-size:.85rem; color: var(--violet);
  }
  .filters-advanced-toggle svg{ width:14px; height:14px; transition: transform .18s ease; }
  .filters-advanced-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
  .filter-advanced{ display:flex; flex-direction:column; gap:1.1rem; padding-top:.2rem; }
  .filter-check label{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; font-weight:600; color: var(--ink-soft); }
  .filter-check input{ width:16px; height:16px; accent-color: var(--violet); }

  /* ============ MODAL: avisar si baja de precio ============ */
  .modal-overlay{
    display:none; position:fixed; inset:0; z-index:100; background: rgba(23,12,43,.55);
    align-items:center; justify-content:center; padding: 1.2rem; backdrop-filter: blur(2px);
  }
  .modal-overlay.open{ display:flex; }
  .modal-card{
    position:relative; background:#fff; border-radius: var(--radius-lg); padding: 2rem 1.8rem;
    max-width: 440px; width:100%; box-shadow: var(--shadow-lg);
  }
  .modal-card h3{ font-size:1.15rem; padding-right: 2rem; }
  .modal-card > p{ color: var(--muted); font-size:.88rem; margin-top:.5rem; }
  .modal-close{
    position:absolute; top:1.1rem; right:1.1rem; width:32px; height:32px; border-radius:50%;
    border:none; background: var(--surface-soft); display:flex; align-items:center; justify-content:center;
  }
  .modal-close svg{ width:15px; height:15px; color: var(--ink-soft); }
  .modal-card .form-field label{ color: var(--muted); }
  .modal-card .form-field input{ background: var(--surface-soft); border: 1.5px solid var(--line); color: var(--ink); }
  .modal-card .form-field input:focus{ border-color: var(--violet); background:#fff; }
  .modal-card .form-success h4{ color: var(--ink); }
  .modal-card .form-success p{ color: var(--muted); }
  .modal-card .btn{ margin-top: 1.3rem; }

  @media (max-width: 760px){
    .zones-map{ height: 240px; }
  }