/* ============================================================
   AVB Inmobiliaria — hoja de estilos del sitio
   Estructura, no estética final. El pase por Claude Design
   trabaja sobre este archivo.
   ============================================================ */

:root{
  /* Paleta del SISTEMA-ESTETICO-avb.md. Nada de negro puro: todos los
     neutros con tinte frio hacia el matiz del azul de marca (~198). */
  --tinta:#565D61;          /* gris del pie de iavb.cl (--gris-textos). 6,6:1 sobre blanco */
  --gris:#5A7078;           /* texto secundario. 5,22:1 */
  --suave:#E8F0F3;          /* tarjetas y boton secundario */
  --fondo:#F4F8F9;          /* fondo de seccion */
  --linea:#C9D8DD;
  --blanco:#fff;

  /* El azul de marca vive como SUPERFICIE, nunca como fondo de texto
     blanco: esa combinacion da 2,97:1 y reprueba. Con tinta encima da
     5,33:1 y aprueba. Para texto azul sobre claro van los dos de abajo. */
  --marca:#009fe3;
  --marca-link:#0079AE;     /* texto azul sobre claro. 4,83:1 */
  --marca-hondo:#00688F;    /* texto azul pequeno. 6,22:1 */
  --wa:#25d366;

  /* 22-sep-2026: UNA sola tipografia en todo el sitio, la del home nuevo.
     Pedido de Nico: el home es creativo, los interiores mantienen su
     estructura y su SEO, pero la letra es la misma en todas partes.
     Referencia apple.com/apple-watch-series-12: la del sistema en Apple
     (SF Pro) e Inter en el resto, peso 600/700 y tracking negativo.
     Antes era Overpass con Gloock en el H1; respaldo en
     _reversa-22sep/tipografia/. --serif se conserva como alias para no
     tocar las reglas que la usan. */
  --sans:"Overpass",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:var(--sans);

  /* Su video es 3,6:1. La proporcion de la tarjeta decide cuanto de su
     cuadro se ve: 12/5 muestra el 67% y queda 50% mas alto que su banner
     actual, que es el punto 1 de su propio documento de mejoras. */
  --ratio-hero:12/5;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--tinta);line-height:1.6;background:var(--blanco)}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---------- Cabecera ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--tinta);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.top img{height:38px}
.top .wrap>a{display:flex;align-items:center;min-height:44px}
.nav{display:none;gap:1.5rem}
.nav a{color:#fff;text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--marca)}
.hamb{background:none;border:0;color:#fff;font-size:1.6rem;min-width:44px;min-height:44px;cursor:pointer}
.movil{display:none;background:#262c30;padding:.5rem 0}
.movil.abierto{display:block}
.movil a{display:block;color:#fff;text-decoration:none;padding:.85rem 4vw;min-height:44px}
@media(min-width:900px){.nav{display:flex}.hamb{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(420px,68vh,640px);display:flex;align-items:flex-end;
  background:var(--tinta) center/cover no-repeat;overflow:hidden}
.hero--alto{min-height:clamp(480px,82vh,760px)}

/* ---------- Hero de la portada: banda de video + bloque de titular ----
   Su video NO es material en bruto, es su banner terminado: trae
   "INMOBILIARIA AVB / Tu vida, el mejor espacio" quemado en el cuadro y un
   "SIGUENOS iavb.cl" al pie. La primera version ponia nuestro H1 encima y
   quedaban DOS titulares apilados a la izquierda. Se comprobo renderizando
   el recorte real, no mirando el primer fotograma, que esta limpio y
   enganaba: el texto entra recien a los 0,6 s.

   Por eso el video va a su proporcion nativa, entero y sin recortar, donde
   sus graficas se leen como fueron disenadas, y el titular baja a su
   propio bloque. */

/* ---------- Hero de la portada: banda de video + bloque de titular ----
   Su video NO es material en bruto, es su banner terminado: trae
   "INMOBILIARIA AVB / Tu vida, el mejor espacio" quemado en el cuadro y un
   "SIGUENOS iavb.cl" al pie. Poner nuestro H1 encima dejaba DOS titulares
   apilados. Por eso el video va entero, a su proporcion real, y el titular
   baja a su propio bloque.

   La banda va en TODOS los tamanos. A 375px mide unos 104px de alto: es
   delgado, pero no es peor que el banner que AVB tiene hoy, y es
   movimiento, que es justo lo que se quiere mostrar.

   Lo que cambia en telefono es el ARCHIVO, no la presencia: el JS baja una
   version de 132 KB en vez de la de 912 KB. Esos 900 KB de datos moviles
   no tienen sentido en algo decorativo, y menos en un sitio cuyo argumento
   de venta es sacar a AVB de un home de 9,9 MB.

   El poster AVIF se ve hasta que el video arranca. Lo dibuja el propio
   elemento de video, asi que no lleva opacity ni fundido: si el video no
   corre nunca, queda el poster quieto y no se nota nada raro. */
.hero-banda{display:block;background:var(--tinta);line-height:0;overflow:hidden;position:relative}
/* Boton de reproducir, solo para quien tiene "reducir movimiento" activado.
   Nace oculto con el atributo hidden y lo muestra el JS unicamente si la
   guarda impidio el arranque. */
.hero-banda__play{position:absolute;right:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--tinta);border:0;
  font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;
  padding:.7rem 1.1rem;border-radius:999px;min-height:44px;
  backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(86,93,97,.25)}
.hero-banda__play:hover{background:#fff}
.hero-banda__play:focus-visible{outline:3px solid var(--marca);outline-offset:3px}
.hero-banda__video{display:block;width:100%;height:auto;aspect-ratio:18/5;object-fit:cover}

/* El bloque del titular, debajo de la banda. Fondo plano, sin imagen ni
   degradado: ya no hace falta porque arriba hay video.
   padding:0 a proposito, es un <section> y recibia el padding generico
   ADEMAS del de su .wrap. El aire lo pone el .wrap y nadie mas. */
.hero-texto{background:var(--tinta);color:#fff;padding:0}
.hero-texto .wrap{padding-block:clamp(2.25rem,4.5vw,4rem)}
.hero-texto h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,7vw,4.25rem);line-height:1.02;letter-spacing:-.015em;
  margin:.85rem 0 .6rem;text-wrap:balance}
.hero-texto .bajada{margin-top:.9rem;max-width:52ch;opacity:.92}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,18,20,.88) 0%,rgba(15,18,20,.35) 45%,transparent 75%)}
.hero .wrap{position:relative;z-index:2;color:#fff;padding:2.5rem 0}
.tag{display:inline-block;background:var(--marca);color:#000;font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:.45rem 1rem;border-radius:2px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,7vw,4.25rem);
  line-height:1.02;letter-spacing:-.015em;margin:.85rem 0 .6rem;text-wrap:balance}
.hero .comuna{font-size:1.05rem;opacity:.9}
.hero .bajada{margin-top:.9rem;max-width:44ch;opacity:.92}
.ficha-destacado{padding:1.25rem 0;background:var(--suave)}
.ficha-destacado__interior{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.mensaje-destacado{max-width:58ch;padding:.3rem 0 .3rem 1rem;border-left:4px solid var(--marca);
  color:var(--tinta);font-family:var(--sans);font-weight:600;line-height:1.3;text-transform:uppercase;white-space:pre-line}
@media(max-width:699px){.ficha-destacado__interior{align-items:flex-start;flex-direction:column}}

/* ---------- Franja de campanas (slider de portada) ----------
   Carrusel con scroll-snap del navegador, sin libreria. AVB hoy carga
   Slick, que son 42 KB mas jQuery para hacer exactamente esto.

   Las piezas son enlaces de verdad: su slider actual son 7 imagenes con el
   texto quemado y cero enlaces, asi que una promocion como "Paga el pie en
   hasta 12 cuotas" no lleva a ninguna parte. */
.campanas{background:var(--fondo)}
.campanas__pista{display:grid;grid-auto-flow:column;grid-auto-columns:86%;
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:1.75rem;padding-bottom:.5rem;
  scrollbar-width:thin;overscroll-behavior-x:contain}
.campanas__pista:focus-visible{outline:3px solid var(--marca);outline-offset:4px}
@media(min-width:900px){.campanas__pista{grid-auto-columns:calc(33.333% - .667rem)}}

.campana{position:relative;scroll-snap-align:start;border-radius:8px;
  overflow:hidden;background:var(--tinta);color:#fff;text-decoration:none;
  display:block;min-height:120px}
.campana__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
/* El texto solo lleva velo cuando existe: si la pieza es una imagen con el
   mensaje ya dibujado adentro, no se le encima nada. */
.campana__txt{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.25rem;
  background:linear-gradient(to top,rgba(86,93,97,.94) 10%,rgba(86,93,97,.55) 60%,transparent)}
.campana__titulo{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:1.05rem;line-height:1.05;letter-spacing:.015em}
.campana__bajada{font-size:.9rem;opacity:.9;margin-top:.25rem}
a.campana:hover .campana__img{transform:scale(1.03)}
.campana__img{transition:transform .4s ease}
@media(prefers-reduced-motion:reduce){.campana__img{transition:none}
  a.campana:hover .campana__img{transform:none}}

.campanas__mandos{display:flex;gap:.5rem;margin-top:1rem}
.campanas__flecha{width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--linea);background:#fff;color:var(--tinta);
  font-size:1.5rem;line-height:1;display:grid;place-items:center}
.campanas__flecha:hover{background:var(--suave)}
.campanas__flecha:focus-visible{outline:3px solid var(--marca);outline-offset:3px}

/* ---------- Datos clave ---------- */
.datos{background:var(--tinta);color:#fff;padding:1.5rem 0}
.datos ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
@media(min-width:760px){.datos ul{grid-template-columns:repeat(4,1fr)}}
.datos .lbl{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;opacity:.65}
.datos .val{font-family:var(--sans);font-weight:600;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.1;margin-top:.2rem}

/* ---------- Secciones ---------- */
section{padding:clamp(3.25rem,7vw,5.5rem) 0}
/* Aca esta el cambio que saca al sitio de lo tibio: los titulos dejan de
   ser un serif liviano y pasan a Archivo 800 en mayuscula, apretados. */
.titulo{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.5rem,3.8vw,2.6rem);line-height:1.02;letter-spacing:.02em;text-wrap:balance}
.intro{color:var(--gris);margin-top:.6rem;max-width:60ch}
.encabezado{margin-bottom:2rem}
.fondo-suave{background:var(--fondo)}

/* ---------- Botones ---------- */
/* Primario: tinta con blanco, 15,84:1. NUNCA azul con blanco, que da
   2,97:1 y el sistema estetico lo prohibe explicitamente. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--tinta);color:#fff;font-family:inherit;font-weight:600;font-size:1rem;
  letter-spacing:.01em;text-decoration:none;border:0;padding:.9rem 1.75rem;
  border-radius:4px;min-height:48px;cursor:pointer;transition:background-color .2s ease}
.btn:hover{background:#464C50}
.btn:focus-visible{outline:3px solid var(--marca);outline-offset:3px}
/* Claro: sobre imagen o video, que es donde un boton oscuro se pierde */
.btn--claro{background:rgba(255,255,255,.94);color:var(--tinta);backdrop-filter:blur(8px)}
.btn--claro:hover{background:#fff}
/* Secundario sobre fondo claro */
.btn--suave{background:var(--suave);color:var(--tinta)}
.btn--suave:hover{background:var(--linea)}
 /* Contorno claro: SOLO sobre imagen o fondo oscuro. Es blanco. */
.btn--linea{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.btn--linea:hover{background:rgba(255,255,255,.12)}
/* Contorno oscuro: para superficies claras. Existe porque "Ver ficha" iba
   con .btn--linea dentro de la tarjeta del modelo, que es blanca, y quedaba
   blanco sobre blanco. El boton al PDF de la ficha era invisible. */
.btn--contorno{background:transparent;border:1px solid var(--linea);color:var(--tinta)}
.btn--contorno:hover{background:var(--suave)}

/* ---------- Tarjetas de proyecto ---------- */
.proyectos{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.proyecto{position:relative;border-radius:6px;overflow:hidden;background:var(--tinta);
  display:flex;flex-direction:column;min-height:430px;text-decoration:none;color:#fff}
.proyecto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proyecto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,18,20,.92) 15%,rgba(15,18,20,.25) 60%,transparent 85%)}
.proyecto__txt{position:relative;z-index:2;margin-top:auto;padding:1.5rem;display:grid;gap:.35rem}
/* Heredaba el blanco de .proyecto y quedaba en 2,97:1. Ahora lleva tinta. */
.proyecto__estado{align-self:start;background:var(--marca);color:#000;
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:.4rem .9rem;border-radius:2px}
.proyecto h3{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.02;letter-spacing:.015em}
.proyecto .lugar{font-size:.92rem;opacity:.85}
.proyecto .detalle{font-size:.92rem;opacity:.85}
.proyecto .desde{font-family:var(--sans);font-weight:600;font-size:1.4rem;margin-top:.3rem}
.proyecto .ver{margin-top:.7rem;font-size:.85rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--marca)}

/* ---------- Modelos ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}
.filtro{border:1px solid var(--linea);background:#fff;color:var(--tinta);font-family:inherit;
  font-size:.9rem;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;min-height:44px}
.filtro[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.modelo{background:#fff;border:1px solid var(--linea);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.planta{aspect-ratio:500/630;background:#fff;display:grid;place-items:center;
  color:var(--gris);font-size:.8rem;text-align:center;padding:.5rem;border-bottom:1px solid var(--linea)}
.planta img{width:100%;height:100%;object-fit:contain}
.modelo .cuerpo{padding:1.25rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.modelo h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
/* 24-sep-2026: cada dato de la tarjeta en su propia linea. Antes iban en una
   fila con flex-wrap que se cortaba donde caia, con la cifra grande mezclada
   con texto chico y las vinetas del navegador sueltas. Mismo orden visual que
   la maqueta del multimodelo del 22-sep, salvo que dormitorios y banos ya no
   comparten linea: el pedido del 24-sep fue un dato por linea. */
.medidas{list-style:none;display:grid;row-gap:.2rem;color:var(--gris);font-size:.92rem;line-height:1.35}
.modelo .medidas{margin:0 0 .5rem;padding:0 0 1rem;border-bottom:1px solid var(--linea)}
.medidas .m-sup{display:flex;align-items:baseline;gap:.35rem;margin-bottom:.15rem}
.medidas .m-sup .sup{font-size:1.45rem;line-height:1.1}
/* Con el relleno lateral general del boton (1,75rem) "Cotizar este modelo"
   se partia en dos lineas en la grilla de 4 columnas. */
.modelo .cuerpo .btn{width:100%;justify-content:center;text-align:center;padding-inline:1rem}
/* Los botones se van al pie para que queden alineados entre tarjetas aunque
   un modelo no tenga terraza o precio. */
.modelo .medidas + .btn{margin-top:auto}
.modelo-atributos + .btn{margin-top:auto}
.modelo .cuerpo .btn + .btn{margin-top:-.15rem}
.modelo-atributos{padding:.95rem 0;border-bottom:1px solid var(--linea)}
.modelo-atributos h4{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.modelo-atributos ul{list-style:none;display:grid;gap:.45rem;margin-top:.65rem;color:var(--gris);font-size:.88rem;line-height:1.35}
.modelo-atributos li{display:grid;grid-template-columns:8px 1fr;gap:.55rem;align-items:start}
.modelo-atributos li::before{content:"";width:6px;height:6px;margin-top:.42rem;border-radius:50%;background:var(--marca)}
.sup{font-family:var(--sans);font-weight:600;font-size:1.25rem;color:var(--tinta)}
.modelo .cta{margin-top:auto;display:block;text-align:center;text-decoration:none;
  background:var(--tinta);color:#fff;font-weight:600;padding:.75rem;border-radius:4px;min-height:44px}
.modelo .cta:hover{background:#464C50}

/* ---------- Familias de modelos, 03-oct-2026 ----------
   Pedido de la reunion del 30-sep: como iroyal.cl. Todo esto actua solo con
   .familias--js, que pone el JavaScript; sin el, la grilla de siempre. */
.familias--js .familias__pestanas{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 0 2rem}
.familias__pestana{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.6rem 1.3rem;
  border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta);
  font:inherit;font-weight:600;font-size:.98rem;cursor:pointer}
.familias__pestana[aria-selected="true"]{background:#000;border-color:#000;color:#fff}
.familias__n{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .35rem;border-radius:999px;
  background:var(--suave);color:var(--tinta);font-size:.8rem}
.familias__pestana[aria-selected="true"] .familias__n{background:var(--marca);color:#000}
.familias__pestana:focus-visible,.resumen:focus-visible,.modelo__volver:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.familias--js .familias__lista{display:grid;gap:.85rem;list-style:none;margin:0;padding:0}
.familias--js .familias__lista li[hidden]{display:none}
.resumen{display:grid;gap:.8rem;width:100%;text-align:left;padding:1.1rem 1.2rem;background:#fff;color:var(--tinta);
  border:1px solid var(--linea);border-radius:10px;font:inherit;cursor:pointer}
.resumen.activa{border:2px solid #000;padding:calc(1.1rem - 1px) calc(1.2rem - 1px)}
.resumen__cab{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.resumen__nombre{font-weight:600;font-size:1.08rem;color:#000}
.resumen__estado{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#0B6B3A;background:#E3F4EA;border-radius:6px;padding:.25rem .5rem}
.resumen__m2{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.resumen__m2>span{display:grid;gap:.1rem;text-align:center;background:var(--fondo);border-radius:8px;padding:.45rem .3rem;
  font-size:.9rem;font-weight:600;color:#000}
.resumen__m2 small{font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gris)}
.resumen__m2 .resumen__total{background:#fff;outline:1.5px solid #000;outline-offset:-1.5px}
.resumen__precio{font-weight:600;color:#000}
.resumen__ver{font-size:.88rem;font-weight:600;color:var(--marca-hondo)}
.resumen__ver::after{content:" \203A"}
.modelo__volver{display:none}
.familias--js .grilla{display:block}
.familias--js .grilla .modelo{display:none}
@media(min-width:700px){
  .familias--js .familias__cuerpo{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:1.5rem;align-items:start}
  .familias--js .familias__lista{max-height:calc(100vh - 120px);overflow:auto;padding:2px;position:sticky;top:84px}
  .familias--js .grilla .modelo.visible{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(250px,1fr);
    position:sticky;top:84px;border-radius:10px}
  .familias--js .grilla .modelo.visible .planta{height:auto;border-bottom:0;border-right:1px solid var(--linea)}
  .resumen:hover{border-color:#000}
}
@media(max-width:699px){
  .resumen__ver{display:flex;justify-content:space-between}
  .familias--js .grilla .modelo.abierto{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;border:0;border-radius:18px 18px 0 0;padding-bottom:2.5rem;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
  .familias--js .modelo.abierto .modelo__volver{display:flex;align-items:center;gap:.4rem;position:sticky;top:0;z-index:1;
    width:100%;min-height:52px;padding:.8rem 1.2rem;background:#fff;border:0;border-bottom:1px solid var(--linea);
    font:inherit;font-weight:600;color:#000;cursor:pointer;text-align:left}
  .familias--js .modelo.abierto .planta{max-height:52vh;width:100%}
  body.hoja-abierta{overflow:hidden}
  body.hoja-abierta .barra-cot,body.hoja-abierta .flotante{visibility:hidden}
}
@media(prefers-reduced-motion:no-preference) and (max-width:699px){
  .familias--js .grilla .modelo.abierto{animation:hoja-sube .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes hoja-sube{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
}
.vacio{color:var(--gris);padding:2rem 0}

/* ---------- Presentacion y galeria ---------- */
.presentacion-proyecto{padding-bottom:0}
.presentacion-proyecto img{display:block;width:min(100%,700px);height:auto;margin-inline:auto;border-radius:8px}
.galeria{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,900px);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:thin;padding-bottom:.65rem}
.galeria:focus-visible{outline:3px solid var(--marca);outline-offset:4px}
.galeria figure{position:relative;border-radius:8px;overflow:hidden;scroll-snap-align:start;background:var(--tinta)}
.galeria img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,3vw,1.6rem);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.55) 55%,transparent);display:grid;gap:.2rem}
.galeria figcaption strong{font-family:var(--sans);font-size:clamp(1rem,2.3vw,1.4rem)}
.galeria figcaption span{font-size:.92rem}
.galeria__mandos{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.galeria__mandos[hidden]{display:none}
.galeria__flecha{width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--tinta);font-size:1.45rem;cursor:pointer}
.galeria__flecha:hover{background:var(--suave)}
.galeria__flecha:focus-visible{outline:3px solid var(--marca);outline-offset:3px}
.galeria__flecha:disabled{opacity:.38;cursor:not-allowed}
@media(max-width:699px){.galeria{grid-auto-columns:92%}.presentacion-proyecto .wrap{width:100%}.presentacion-proyecto img{border-radius:0}}

/* ---------- Equipamiento ---------- */
.equipo{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem 1.5rem}
.equipo li{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0}
.equipo li::before{content:"";flex:0 0 7px;height:7px;margin-top:.6rem;border-radius:50%;background:var(--marca)}
.entrega{margin-top:2rem;background:#fff;border:1px solid var(--linea);border-radius:6px;padding:1.25rem 1.5rem}
.entrega .lbl{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.entrega .val{font-family:var(--sans);font-weight:600;font-size:1.6rem}

/* ---------- Diferenciadores (pedido de AVB) ---------- */
.difs{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.dif{background:#fff;border:1px solid var(--linea);border-radius:6px;padding:1.5rem;display:grid;gap:.5rem}
.dif__icono{width:44px;height:44px;border-radius:50%;background:var(--suave);display:grid;
  place-items:center;font-size:1.3rem}
.dif h3{font-size:1.05rem;font-weight:600}
.dif p{color:var(--gris);font-size:.93rem}
/* Pantalla ancha: todos los cuadros en una sola fila, por estetica (Daniela, 03-nov-2026).
   Con 6 o mas no caben y vuelven a la grilla normal. */
@media(min-width:1100px){
  .difs:not(:has(> .dif:nth-child(6))){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1rem}
  .difs:not(:has(> .dif:nth-child(6))) .dif{padding:1.25rem}
}

/* ---------- Cifras (741 departamentos) ---------- */
.cifras{background:var(--tinta);color:#fff}
.cifras ul{list-style:none;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  text-align:center}
.cifras .n{font-family:var(--sans);font-weight:600;font-size:clamp(2.6rem,6.5vw,4rem);
  color:var(--marca);line-height:.95;letter-spacing:-.02em}
.cifras .t{margin-top:.4rem;font-size:.95rem;opacity:.85}

/* ---------- Mapa ---------- */
.mapa{aspect-ratio:16/9;background:var(--suave);border-radius:6px;display:grid;place-items:center;
  color:var(--gris);margin-top:1.5rem}
/* 25-sep-2026: horario y "Como llegar" en la seccion Ubicacion de cada ficha. */
.ubicacion__horario{margin-top:.6rem;color:var(--gris);font-size:.95rem}
.ubicacion__horario strong{color:var(--tinta)}
.ubicacion__llegar{margin-top:1rem}
/* El iframe median 380 px fijos dentro de un marco 16:9: en escritorio sobraban franjas vacias. */
.mapa{overflow:hidden}
.mapa iframe{display:block;width:100%;height:100%}

/* ---------- Formulario ---------- */
.cotizar{background:var(--tinta);color:#fff}
.cols{display:grid;gap:2.5rem}
@media(min-width:900px){.cols{grid-template-columns:1fr 1fr;gap:4rem}}
.cotizar .titulo{color:#fff}
.cotizar .intro{color:#fff}
.form{display:grid;gap:.9rem;margin-top:1.5rem}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.82rem;color:#fff}
/* El select iba sin estilar y salia con el gris claro por defecto del
   navegador, al lado de campos oscuros. Se veia como un campo de otro
   sitio. */
.campo input,.campo textarea,.campo select{font-family:inherit;font-size:1rem;padding:.8rem .9rem;
  border:1px solid #fff;border-radius:4px;background:#fff;color:#1d1d1f;min-height:46px}
.campo textarea{min-height:96px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--marca);border-color:var(--marca)}
.enviar{background:var(--tinta);color:#fff;border:0;font-family:inherit;font-size:1rem;font-weight:600;
  padding:.95rem;border-radius:4px;cursor:pointer;min-height:48px}
.enviar:hover{background:#464C50}
/* Dentro de .cotizar el fondo de la seccion ES var(--tinta), asi que el
   boton quedaba del mismo color exacto que lo que tiene detras y se leia
   como texto suelto, no como boton. Medido el 9-sep-2026: los dos daban
   rgb(14,37,48). Va en azul de marca CON TINTA ENCIMA, que es la unica
   combinacion aprobada: blanco sobre el azul da 2,97:1 y reprueba. */
.cotizar .enviar{background:var(--marca);color:#000}
.cotizar .enviar:hover{background:#00b4ff}
.legal{font-size:.78rem;color:#8d9599}
.legal-enlaces a{color:inherit;text-decoration:underline;text-underline-offset:2px;margin-right:1.2rem;display:inline-block;padding:.35rem 0}
.ejecutiva{background:rgba(255,255,255,.12);border-radius:6px;padding:1.5rem;margin-top:1.5rem}
.ejecutiva .rol{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.ejecutiva h3{font-family:var(--sans);font-weight:600;font-size:1.4rem;margin:.3rem 0 .8rem}
.ejecutiva a:not(.btn){color:#fff;text-decoration:none;display:flex;align-items:center;min-height:44px}
/* Tarjetas de ejecutivas con foto y agendamiento (plantillas/_ejecutivas.php),
   24-sep-2026. No se ven hasta que una ejecutiva se marque en el panel con
   "Mostrar su tarjeta". Variante oscura dentro de cotizar, clara sobre blanco. */
.ejecutivas{display:grid;gap:1rem;margin-top:1.5rem}
.ejecutiva-tarjeta{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:start;border-radius:6px;padding:1.25rem}
.ejecutiva-tarjeta:not(:has(.ejecutiva-tarjeta__foto)){grid-template-columns:1fr}
.ejecutiva-tarjeta__foto{width:96px;height:96px;border-radius:50%;object-fit:cover}
.ejecutiva-tarjeta h3{font-family:var(--sans);font-weight:600;font-size:1.2rem;letter-spacing:-.02em;line-height:1.2}
.ejecutiva-tarjeta__cargo,.ejecutiva-tarjeta__proyectos{font-size:.9rem;margin-top:.15rem}
.ejecutiva-tarjeta__acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 .3rem}
.ejecutiva-tarjeta__acciones .btn{min-height:44px;padding:.6rem 1.1rem;font-size:.95rem}
.ejecutiva-tarjeta__enlace{display:flex;align-items:center;min-height:44px;text-decoration:none;overflow-wrap:anywhere}
.ejecutivas--oscuro .ejecutiva-tarjeta{background:rgba(255,255,255,.12);color:#fff}
.ejecutivas--oscuro .ejecutiva-tarjeta__enlace{color:#fff}
/* Sobre oscuro, azul de marca con texto negro: blanco sobre el azul da 2,97:1 y reprueba. */
.ejecutivas--oscuro .ejecutiva-tarjeta__agendar{background:var(--marca);color:#000}
.ejecutivas--oscuro .ejecutiva-tarjeta__agendar:hover{background:#00b4ff}
.ejecutivas--claro .ejecutiva-tarjeta{background:#fff;border:1px solid var(--linea)}
.ejecutivas--claro .ejecutiva-tarjeta__cargo,.ejecutivas--claro .ejecutiva-tarjeta__proyectos{color:var(--gris)}
.ejecutivas--claro .ejecutiva-tarjeta__enlace{color:var(--marca-link)}
.ejecutivas__wa{margin-top:1rem}
/* 26-SEP-2026 16:10 (Codex). Pulida de la columna de contacto en Cotizar. Radios y anchos
   alineados con la tarjeta; ambos CTA mantienen sus colores AA ya aprobados. */
.cotizar .ejecutivas--oscuro .ejecutiva-tarjeta{border-radius:14px}
.cotizar .ejecutivas--oscuro .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__acciones{
  margin-left:calc(-96px - 1rem);width:calc(100% + 96px + 1rem)}
.cotizar .ejecutivas--oscuro .ejecutiva-tarjeta__acciones .btn{
  flex:1 1 100%;width:100%;min-height:48px;border-radius:12px}
.cotizar .ejecutivas__wa{display:flex;width:100%;min-height:48px;border-radius:12px}
.cotizar .ejecutivas--oscuro .ejecutiva-tarjeta__acciones .btn:focus-visible{outline-color:#fff}
.cotizar .financiamiento{padding:1.25rem;border-radius:14px}
.cotizar .financiamiento .btn{display:flex;width:100%;min-height:48px;border-radius:12px;margin-top:.25rem}
.cotizar .financiamiento .btn:focus-visible{outline-color:var(--tinta)}
.cotizar:has(.financiamiento) .enviar{border-radius:12px}
.flotante{transition:opacity .18s ease,visibility .18s ease}
.flotante--oculto{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.flotante{transition:none}}
@media(max-width:420px){.ejecutiva-tarjeta{grid-template-columns:72px 1fr}.ejecutiva-tarjeta__foto{width:72px;height:72px}.cotizar .ejecutivas--oscuro .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__acciones{margin-left:calc(-72px - 1rem);width:calc(100% + 72px + 1rem);margin-top:2rem}}
.wa-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--wa);color:#0b2e18;
  font-weight:600;text-decoration:none;padding:.8rem 1.3rem;border-radius:4px;margin-top:1rem;min-height:48px}

/* ---------- Pie ---------- */
footer{background:#0f1214;color:#9aa3a8;padding:2.5rem 0;font-size:.9rem}
footer a{color:#cfd5d8;text-decoration:none;display:flex;align-items:center;min-height:44px}
.pie-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.6rem}
.disclaimer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.25);font-size:.78rem;line-height:1.5}

/* ---------- Flotantes ---------- */
.flotante{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;flex-direction:column;gap:.6rem}
.flotante a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);text-decoration:none;font-size:1.5rem}
.f-wa{background:var(--wa);color:#0b2e18}
.f-visita{background:var(--marca);color:#000;font-size:1.35rem}
@media(min-width:900px){.flotante{right:1.5rem;bottom:1.5rem}}

/* ---------- Marcador de material pendiente ---------- */
.pendiente{background-color:#f7f8f9;background-image:repeating-linear-gradient(45deg,#f7f8f9,#f7f8f9 10px,#eef1f2 10px,#eef1f2 20px);
  border:1px dashed #c4ccd0;border-radius:6px;display:grid;place-items:center;text-align:center;
  color:var(--gris);font-size:.85rem;padding:2rem 1rem;min-height:180px}

/* ---------- Portada simple: paginas sin imagen de cabecera ---------- */
.portada-simple{background:var(--tinta);color:#fff;padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,4vw,3rem)}
.portada-simple h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.1}
.portada-simple .bajada{margin-top:1rem;max-width:52ch;color:#c9cfd2;font-size:1.05rem}

/* ---------- Bloque centrado de cierre ---------- */
.centro{text-align:center}
.centro .intro{margin-inline:auto}

/* ---------- Edificios entregados ----------
   Lista, no tarjetas: son 13 y lo que importa es poder recorrerlos y
   comparar el año con la cantidad, no mirar 13 fotos que no tenemos. */
.entregados{list-style:none;counter-reset:ed;margin-top:2rem}
.entregado{display:grid;gap:.15rem 1.25rem;align-items:baseline;
  grid-template-columns:auto 1fr;padding:1rem 0;border-bottom:1px solid var(--linea)}
.entregado:last-child{border-bottom:0}
.entregado__anio{font-family:var(--sans);font-weight:600;font-size:1.5rem;color:var(--marca-link);
  grid-row:span 2;min-width:4ch}
.entregado__nombre{font-weight:600;font-size:1.1rem}
.entregado__comuna{color:var(--gris);font-size:.92rem}
.entregado__unidades{color:var(--gris);font-size:.92rem;grid-column:2}
@media(min-width:700px){
  .entregado{grid-template-columns:auto 1fr auto auto;gap:1.5rem}
  .entregado__anio{grid-row:auto}
  .entregado__unidades{grid-column:auto;text-align:right;font-weight:500;color:var(--tinta)}
}

/* ---------- Titulo de tarjeta cuando es H2 ----------
   En /proyectos las tarjetas usan H2 por jerarquia, pero se ven igual
   que el H3 de la portada. */
.proyecto__nombre{font-family:var(--sans);font-weight:600;text-transform:uppercase;font-size:1.6rem;line-height:1.02;letter-spacing:.015em}

/* ---------- Boton de WhatsApp ----------
   Texto oscuro sobre el verde: es el codigo visual que la gente reconoce,
   y blanco sobre ese verde no da contraste suficiente. */
.btn--whatsapp{background:var(--wa);color:#0b2e18}
.btn--whatsapp:hover{background:#1fbe5c}

/* ---------- Pagina de gracias ---------- */
.gracias{background:var(--suave);min-height:70vh;display:grid;place-items:center;
  text-align:center;padding-block:clamp(3rem,8vw,6rem)}
.gracias .wrap{max-width:640px}
.gracias__marca{width:72px;height:72px;border-radius:50%;background:var(--marca);
  color:var(--tinta);display:grid;place-items:center;margin:0 auto 1.5rem}
.gracias h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:1.15}
.gracias__bajada{margin-top:.75rem;color:var(--gris);font-size:1.05rem}
.gracias__acciones{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}
.gracias__otros{margin-top:2rem;font-size:.95rem;color:var(--gris)}
.gracias__otros a{color:var(--marca-hondo)}

/* Los tres pasos: dicen que va a pasar despues, que es la duda real
   de alguien que acaba de dejar sus datos. */
.pasos{list-style:none;display:grid;gap:1rem;margin-top:2.5rem;text-align:left}
.pasos li{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;
  background:#fff;border:1px solid var(--linea);border-radius:8px;padding:1.1rem 1.25rem}
.pasos__n{grid-row:span 2;width:34px;height:34px;border-radius:50%;
  background:var(--superficie,#e8f0f3);color:var(--tinta);
  display:grid;place-items:center;font-weight:600;font-size:.95rem}
.pasos__t{font-weight:600}
.pasos__d{color:var(--gris);font-size:.93rem}

/* Campo trampa del anti spam. Fuera de pantalla y no "display:none":
   algunos bots ignoran lo que esta oculto con display, pero llenan esto. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Marca de la copia de demostracion. Solo aparece cuando el sitio se genera
   con --demo, para que nadie confunda la copia con el sitio publicado. */
.marca-demo{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--tinta);color:#fff;text-align:center;
  font:500 13px/1.4 Ubuntu,system-ui,sans-serif;
  padding:.55rem 1rem;letter-spacing:.02em;
}

/* El hueco al pie es SOLO para la demostracion. Antes se aplicaba siempre,
   asi que el sitio real tambien arrastraba 2,4rem de aire de mas. */
body:has(.marca-demo){padding-bottom:2.4rem}

/* Y el boton flotante tiene que subir para no quedar debajo de la barra.
   En la demo se veia cortado a la mitad. */
body:has(.marca-demo) .flotante{bottom:3.6rem}
@media(min-width:900px){body:has(.marca-demo) .flotante{bottom:4.1rem}}

/* ---------- Blog ----------
   Las tarjetas que AVB pidio en el punto 8 de su documento de mejoras.
   Los colores salen de los tokens de arriba: la fecha usa --marca-hondo
   y no --marca, porque es texto chico sobre fondo claro. El azul de marca
   no aparece como fondo de texto en ningun lado de este bloque. */
.wrap--lectura{width:min(760px,92vw);margin-inline:auto}

.posts{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  align-items:start;margin-top:1.5rem}

.post{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;overflow:hidden;
  transition:box-shadow .18s ease,transform .18s ease}
.post:hover{box-shadow:0 8px 24px rgba(86,93,97,.1);transform:translateY(-2px)}
.post__link{display:block;color:inherit;text-decoration:none;height:100%}
.post__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--suave)}
.post__txt{padding:1rem 1.1rem 1.2rem}
.post__fecha{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--marca-hondo);margin-bottom:.4rem}
.post__titulo{font-size:1.08rem;line-height:1.3;margin:0 0 .5rem;text-wrap:balance}
.post__bajada{font-size:.92rem;color:var(--gris);margin:0 0 .75rem}
.post__mas{font-weight:600;font-size:.9rem;color:var(--marca-link)}
.post__link:hover .post__mas{text-decoration:underline}

/* ---------- Un articulo ----------
   Ancho de lectura acotado a 760px: un texto de 2.500 caracteres a todo
   el ancho de la pantalla no se lee, se abandona. */
.entrada{padding:2.5rem 0 1rem}
.miga{font-size:.85rem;color:var(--gris);margin-bottom:1.25rem}
.miga a{color:var(--marca-link)}
.entrada__titulo{font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.15;margin:0 0 .6rem;text-wrap:balance}
.entrada__fecha{display:block;font-size:.85rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--marca-hondo);margin-bottom:1.5rem}
.entrada__portada{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:1.75rem;
  background:var(--suave)}

.entrada__cuerpo{font-size:1.05rem;line-height:1.75}
.entrada__cuerpo p{margin:0 0 1.1rem}
.entrada__cuerpo h2{font-size:1.5rem;line-height:1.25;margin:2rem 0 .8rem}
.entrada__cuerpo h3{font-size:1.2rem;margin:1.6rem 0 .6rem}
.entrada__cuerpo ul,.entrada__cuerpo ol{margin:0 0 1.1rem;padding-left:1.4rem}
.entrada__cuerpo li{margin-bottom:.4rem}
.entrada__cuerpo a{color:var(--marca-link)}
.entrada__cuerpo img{max-width:100%;height:auto;border-radius:10px;margin:1.2rem 0}
.entrada__cuerpo blockquote{margin:1.5rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--marca);color:var(--gris)}

/* ---------- Simulador hipotecario ----------
   Va en la columna lateral de la ficha, bajo la ejecutiva. Estilo
   secundario a proposito: el boton principal de esta pagina es enviar la
   cotizacion, y este enlace se lleva a la persona a otro sitio. */
.financiamiento{margin-top:1.5rem;padding:1.1rem 1.2rem;background:var(--suave);border-radius:10px}
.financiamiento h3{font-size:1rem;margin:0 0 .3rem;color:var(--tinta)}
.financiamiento p{font-size:.9rem;color:var(--gris);margin:0 0 .9rem}

/* ==========================================================================
   Tipografia unificada con el home, 22-sep-2026
   Titulares en peso 700 con tracking negativo y SIN mayusculas forzadas:
   todos los textos del HTML ya vienen con mayuscula inicial, medido.
   Solo cambia la letra; ni colores, ni estructura, ni marcado.
   ========================================================================== */
body{letter-spacing:-.011em}
h1,h2,h3,.titulo,.proyecto h3,.proyecto__nombre,.campana__titulo,.entrada__titulo,.post__titulo{
  font-weight:600;letter-spacing:-.03em;text-transform:none}
.hero h1,.hero-texto h1,.portada-simple h1,.gracias h1{font-weight:600;letter-spacing:-.04em;line-height:1.02}
.titulo{letter-spacing:-.035em;line-height:1.05}
.cifras .n,.datos .val,.sup,.entrega .val,.ejecutiva h3,.entregado__anio,.proyecto .desde{font-weight:600;letter-spacing:-.03em}
.tag,.proyecto__estado,.datos .lbl,.entrega .lbl,.ejecutiva .rol,footer h4,.proyecto .ver,.post__fecha,.entrada__fecha{
  text-transform:none;letter-spacing:0;font-weight:600}
.tag,.proyecto__estado{font-size:.8rem}
.datos .lbl,.entrega .lbl{font-size:.8rem}
footer h4{font-size:.85rem}
.proyecto .ver{font-size:.9rem}

/* ---------- Tour virtual 360, 22-sep-2026 ----------
   Etiqueta sobre la foto de la tarjeta, boton y apartado en la ficha, y la
   ventana que abre el recorrido encima de la pagina (plantillas/_tour.php).
   La etiqueta va al lado del enlace de la tarjeta, no adentro: un enlace no
   puede contener otro. */
.proyecto-caja{position:relative;display:flex}
.proyecto-caja>.proyecto{flex:1}
.tour-btn{position:absolute;z-index:3;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.95);color:var(--tinta);
  font-size:.82rem;font-weight:600;text-decoration:none;box-shadow:0 2px 12px rgba(0,0,0,.28);
  transition:background-color .2s ease}
.tour-btn:hover{background:#fff}
.tour-btn:focus-visible,.recorrido:focus-visible{outline:3px solid var(--marca);outline-offset:3px}
.icono-360{flex:0 0 auto}
.tour-hero{margin-top:1.4rem}
.recorrido{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:var(--tinta);color:#fff;text-decoration:none}
.recorrido img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.recorrido::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,18,20,.55),transparent 55%)}
.recorrido:hover img{transform:scale(1.03)}
.recorrido__play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;min-height:48px;padding:.9rem 1.6rem;
  border-radius:999px;background:rgba(255,255,255,.95);color:var(--tinta);font-weight:600;
  box-shadow:0 4px 20px rgba(0,0,0,.3)}
@media (prefers-reduced-motion:reduce){.recorrido img{transition:none}}

.tour{border:0;padding:0;margin:auto;width:min(1100px,94vw);height:min(760px,88vh);max-width:100vw;max-height:100vh;
  background:#0f1214;color:#fff;border-radius:10px;overflow:hidden;flex-direction:column}
.tour[open]{display:flex}
.tour::backdrop{background:rgba(8,12,14,.82)}
.tour__barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .5rem .5rem 1.1rem}
.tour__titulo{font-weight:600;font-size:.95rem;line-height:1.25}
.tour__cerrar{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:#2b2f32;
  color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.tour__cerrar:hover{background:#3d4246}
.tour__cerrar:focus-visible,.tour__cotizar:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.tour__marco{flex:1;min-height:0;background:#000}
.tour__marco iframe{display:block;width:100%;height:100%;border:0}
.tour__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem}
.tour__nota{font-size:.92rem;color:rgba(255,255,255,.85)}
.tour__cotizar{background:var(--marca);color:#000}
.tour__cotizar:hover{background:#33b5ea}
html.tour-abierto{overflow:hidden}
@media (max-width:699px){
  .tour{width:100vw;height:100vh;height:100dvh;border-radius:0}
  .tour__nota{display:none}
  .tour__cotizar{flex:1}
}

/* ---------- Multimodelo, 25-sep-2026 ----------
   Cotizar hasta 5 modelos en un envio (plantillas/proyecto.php). Es la
   maqueta que vio Daniela (propuesta-multimodelo.html), con sus colores
   pasados a los aprobados: sobre el gris de .cotizar el texto va blanco
   (6,6:1) y lo elegido va en azul de marca CON NEGRO encima, porque blanco
   sobre el azul da 2,97:1. Los grises #b8c0c4 de la maqueta no pasaban AA
   sobre el gris nuevo y no se trajeron. */
.modelo.en-cot{outline:3px solid var(--marca);outline-offset:-3px}
.modelo .agregar.quitar{background:var(--marca);color:#000}
.modelo .agregar[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

.multi{display:grid;gap:.9rem}
.cotizar .contador{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.cotizar .contador b{color:#fff;text-decoration:underline;text-decoration-color:var(--marca);text-decoration-thickness:3px;text-underline-offset:4px}
.cotizar .ayuda{font-size:.88rem;color:#fff;margin-top:.2rem}
.elegidos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;list-style:none;padding:0}
.elegidos:empty{display:none}
.elegidos li{display:flex;align-items:center;gap:.4rem;background:var(--marca);color:#000;
  border-radius:999px;padding:.3rem .35rem .3rem .9rem;font-size:.9rem;font-weight:600}
.elegidos button{border:0;background:#0089C3;color:#000;width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:1.1rem;line-height:1}
.otros{border:1px solid rgba(255,255,255,.35);border-radius:14px;padding:.4rem 1.1rem 1rem}
.otros summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
/* multi-filtro y no .filtro: .filtro ya es el boton de comuna de /proyectos. */
.multi-filtro{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.multi-filtro button{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:.4rem .9rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:40px}
.multi-filtro button[aria-pressed="true"]{background:#fff;color:#1d1d1f;border-color:#fff}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;max-height:320px;overflow:auto;padding:.15rem .2rem .15rem .1rem}
.chip{position:relative;display:grid;gap:.1rem;text-align:left;background:#646A6E;color:#fff;
  border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:.6rem .7rem;cursor:pointer;min-height:44px}
.chip[hidden]{display:none}
/* La casilla queda oculta a la vista pero sigue siendo la que se envia y la
   que recibe el teclado; el foco se ve en la tarjeta entera. */
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip:focus-within{outline:3px solid #fff;outline-offset:2px}
.chip strong{font-size:.95rem}
.chip span{font-size:.8rem;color:#fff}
.chip.sel,.chip:has(input:checked){background:var(--marca);border-color:var(--marca);color:#000}
.chip.sel span,.chip:has(input:checked) span{color:#000}
.chip:has(input:disabled){opacity:.45;cursor:not-allowed}
.sin-modelo{display:flex;gap:.6rem;align-items:center;font-size:.95rem;min-height:44px;cursor:pointer}
.sin-modelo input{width:20px;height:20px;accent-color:var(--marca)}
.error-form{color:#fff;background:#8a1c1c;border-radius:6px;padding:.6rem .8rem;font-size:.9rem;font-weight:600}
.error-form[hidden]{display:none}

/* Barra inferior: recuerda cuantos modelos llevas mientras recorres las
   plantas. A la derecha deja libre el boton flotante de WhatsApp. */
.barra-cot{position:fixed;left:1rem;right:5.5rem;bottom:1rem;z-index:45;display:none;align-items:center;justify-content:space-between;
  gap:.8rem;background:var(--tinta);color:#fff;border-radius:14px;padding:.5rem .5rem .5rem 1rem;box-shadow:0 6px 24px rgba(0,0,0,.3);font-weight:600}
.barra-cot.ver{display:flex}
.barra-cot .btn{background:var(--marca);color:#000;padding:.6rem 1rem;min-height:44px;white-space:nowrap;flex:none}
@media(min-width:900px){.barra-cot{left:auto;right:6rem;width:420px}}
/* En la demo, sobre la marca de demostracion y el selector de color. */
body:has(.marca-demo) .barra-cot{bottom:6.3rem}
/* 29-sep-2026: NEGRO AVB, decidido por Daniela ("Negro 100%", correo del 28-sep).
   Son las mismas reglas que probo el selector temporal de la demo
   (lib/selector-oscuro.php, ya retirado), ahora como diseno del sitio. Van al
   final para ganar por orden con el mismo peso. El texto sobre fondo claro
   sigue en --tinta (#565D61); lo que pasa a negro son las superficies oscuras. */
:root{--negro-avb:#000;--negro-avb-menu:#161616;--negro-avb-hover:#2a2a2a}
:is(.top,.hero,.hero-banda,.hero-texto,.campana,.datos,.proyecto,.cifras,.cotizar,.portada-simple,.marca-demo,.recorrido,.galeria figure,footer,.tour,.barra-cot){background-color:var(--negro-avb)}
.filtro[aria-pressed="true"]{background-color:var(--negro-avb);border-color:var(--negro-avb)}
.modelo .cta,.btn:not(.btn--claro,.btn--suave,.btn--linea,.btn--contorno,.btn--whatsapp,.f-wa,.tour__cotizar,.cotizar .enviar,.ejecutivas--oscuro .ejecutiva-tarjeta__agendar,.cta-hero,.barra-cot .btn),.enviar:not(.cotizar .enviar){background-color:var(--negro-avb)}
.modelo .cta:hover,.btn:not(.btn--claro,.btn--suave,.btn--linea,.btn--contorno,.btn--whatsapp,.f-wa,.tour__cotizar,.cotizar .enviar,.ejecutivas--oscuro .ejecutiva-tarjeta__agendar,.cta-hero,.barra-cot .btn):hover,.enviar:not(.cotizar .enviar):hover{background-color:var(--negro-avb-hover)}
.movil{background-color:var(--negro-avb-menu)}
.tour__cerrar{background-color:var(--negro-avb-menu)}
.tour__cerrar:hover{background-color:var(--negro-avb-hover)}
.denuncia-aviso{background-color:var(--negro-avb-menu)}
.denuncia-opcional,.denuncia-opcional[open] summary{border-color:var(--negro-avb-hover)}

/* 29-sep-2026: redes sociales visibles (Daniela: "faltan las rrss"). En la
   barra solo en escritorio, junto al menu; en celular van al final del menu
   desplegable; y siempre en el pie. */
.redes{display:flex;align-items:center;gap:.5rem}
.redes a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;transition:background-color .2s,transform .2s}
.redes a:hover,.redes a:focus-visible{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.redes svg{width:18px;height:18px}
.redes--top{display:none}
@media(min-width:900px){.redes--top{display:flex;margin-left:.5rem}.top .nav{margin-left:auto}}
.redes--movil{padding:.75rem 4vw 1rem;gap:.75rem}
.redes--movil a{width:44px;height:44px;padding:0;min-height:0;flex:none}
.redes--pie{margin-bottom:1.25rem}

/* 30-sep-2026: LOGO SUELTO EN LA BARRA (reunion con Daniela). El bloque negro
   colgante del 29-sep tapaba los titulos de las portadas sin foto (Blog,
   Experiencia) y, sobre barra negra, no se entendia: en iavb.cl funciona
   porque su barra es blanca. Ahora el logo va grande pero dentro de la barra. */
.top .wrap{min-height:76px}
.top__logo{display:flex;align-items:center;flex:none}
.top__logo img{width:136px;height:auto}
@media(max-width:899px){.top .wrap{min-height:64px}.top__logo img{width:120px}}
/* Con 8 opciones (las de iavb.cl) el menu completo cabe desde 1200 px; entre
   900 y 1199 se usa el menu del celular. */
.nav{gap:1.1rem}
.nav a{font-size:.9rem}
@media(min-width:900px) and (max-width:1199px){.nav{display:none}.hamb{display:inline-block}.redes--top{display:none}}
/* Menu del celular: si es mas alto que la pantalla, se desplaza dentro. */
.movil.abierto{max-height:calc(100vh - 64px);overflow-y:auto}
/* Pie: "footer a" le daba 44 px de alto a 36 de ancho y los circulos salian
   ovalados (reunion 30-sep, en PC y telefono). */
.redes--pie a{width:40px;height:40px;min-height:0;padding:0;flex:none;display:inline-grid}

/* 29-sep-2026: MAS MOVIMIENTO (Daniela: "el sitio tiene muy poco movimiento,
   los botones, los textos son planos"). Todo respeta "reducir movimiento":
   con esa preferencia del sistema, el sitio queda quieto como antes.
   1) Botones y tarjetas se elevan al pasar el mouse.
   2) Titulos, tarjetas y fotos entran suave al aparecer en pantalla, con
      animacion ligada al scroll (solo CSS; donde no existe, se ven directo). */
@media (prefers-reduced-motion: no-preference){
  .btn,.modelo,.proyecto,.entregado,.ejecutiva-tarjeta{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background-color .2s,color .2s}
  .btn:hover,.btn:focus-visible{transform:translateY(-2px)}
  .modelo:hover,.proyecto:hover,.entregado:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
  @supports (animation-timeline: view()){
    .encabezado,.modelo,.proyecto,.entregado,.presentacion-proyecto,.equipo li,.ficha-destacado{
      animation:entra-suave linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
@keyframes entra-suave{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}

/* 29-sep-2026: botones de cotizar en la ficha (acuerdo con Nico: al menos 3,
   el primero visible sin bajar). */
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.hero-ctas .tour-hero{margin-top:0}
.btn.cta-hero{background:var(--marca);color:#000;font-weight:600}
.btn.cta-hero:hover,.btn.cta-hero:focus-visible{background:#33b5ea;color:#000}
.cta-medio{background:var(--negro-avb,#000);color:#fff;padding:2.5rem 0}
.cta-medio .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.cta-medio__texto{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:600;letter-spacing:-.02em;margin:0}
/* La barra fija ahora aparece siempre al pasar la portada: su texto no debe
   partirse en dos lineas en celulares chicos. */
.barra-cot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 29-sep-2026: equipamiento con icono vectorial por item (acuerdo con Nico).
   Reemplaza el punto celeste; el icono sale de iconoEquipamiento(). */
.equipo li{align-items:center;gap:.85rem;padding:.55rem .75rem;border-radius:12px;background:#fff;border:1px solid var(--linea)}
.equipo li::before{content:none}
.equipo__icono{flex:none;width:28px;height:28px;color:var(--marca-link,#007bb0)}

/* 29-sep-2026: con mas botones en la portada de la ficha, su contenido crece
   hacia arriba y la etiqueta quedaba bajo el bloque del logo (Villuco en
   celular). El contenido deja libre el tramo que cuelga el logo. */
.hero .wrap{padding-top:calc(56px + 1.25rem)}
@media(min-width:900px){.hero .wrap{padding-top:calc(126px + 1.5rem)}}
.video-proyecto{padding:2rem 0}
.video-proyecto video{display:block;width:100%;height:auto;aspect-ratio:1280/334;object-fit:cover;border-radius:6px;background:#000}

/* 03-oct-2026: el detalle de las familias (panel fijo en escritorio, hoja en
   celular) no se eleva al pasar el mouse ni entra con el scroll: va anclado. */
.familias--js .grilla .modelo,.familias--js .grilla .modelo:hover{transform:none;translate:none;animation:none}
.familias--js .grilla .modelo.visible:hover{box-shadow:none}
@media(max-width:699px){.familias--js .grilla .modelo.abierto:hover{box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}}
@media(prefers-reduced-motion:no-preference) and (max-width:699px){
  .familias--js .grilla .modelo.abierto{animation:hoja-sube .28s cubic-bezier(.2,.7,.2,1)}
}

/* 03-oct-2026: confirmacion de la consulta general en Contacto. */
.aviso-enviado{margin-top:1.25rem;padding:1rem 1.2rem;border-radius:8px;background:#E3F4EA;color:#0B4F2B;font-weight:600}

/* ============================================================
   09-oct-2026 (Claude Code): PASE A BLANCO, pedido de Daniela en su audio
   del 09-oct ("el blanco va mejor, se ve más limpio, más ordenado"; "es
   muy cargado"). Revierte las superficies del NEGRO AVB del 29-sep, salvo
   la barra de arriba y el pie: el logo de AVB que tenemos es solo blanco y
   necesita fondo oscuro. Todo va en este bloque, al final, para ganar por
   orden y para que la reversa sea borrarlo.
   Peso: la regla negra usa :is(... .galeria figure ...), que vale (0,1,1);
   por eso estas superficies llevan "body" delante, para empatar y ganar por orden.
   Contrastes: texto --tinta sobre blanco 6,6:1; numeros en --marca-link
   (4,83:1), nunca el celeste --marca como texto (2,97:1, reprueba).
   ============================================================ */
body :is(.hero-texto,.datos,.cifras,.portada-simple){background-color:#fff;color:var(--tinta)}
.datos{border-bottom:1px solid var(--linea)}
.datos .lbl{opacity:1;color:var(--gris)}
.cifras{border-block:1px solid var(--linea)}
.cifras .n{color:var(--marca-link)}
.cifras .t{opacity:1;color:var(--gris)}
.hero-texto .bajada{opacity:1;color:var(--gris)}
.portada-simple{border-bottom:1px solid var(--linea)}
.portada-simple .bajada{color:var(--gris)}

/* Cotizar: fondo claro, campos con borde, ejecutiva en su variante clara. */
body .cotizar{background-color:var(--fondo);color:var(--tinta)}
.cotizar .titulo{color:var(--tinta)}
.cotizar .intro{color:var(--gris)}
.cotizar .campo label{color:var(--tinta)}
.cotizar .campo input,.cotizar .campo textarea,.cotizar .campo select{border-color:var(--linea)}
.cotizar .contador b{color:var(--tinta)}
.cotizar .ayuda{color:var(--gris)}
.cotizar .otros{border-color:var(--linea);background:#fff}
.cotizar .multi-filtro button{color:var(--tinta);border-color:var(--linea)}
.cotizar .multi-filtro button[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.cotizar .chip{background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.cotizar .chip span{color:var(--gris)}
.cotizar .chip:focus-within{outline-color:var(--marca)}
.cotizar .ejecutiva{background:#fff;border:1px solid var(--linea)}
.cotizar .ejecutivas--claro .ejecutiva-tarjeta{border-radius:14px}
.cotizar .ejecutivas--claro .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__acciones{
  margin-left:calc(-96px - 1rem);width:calc(100% + 96px + 1rem)}
.cotizar .ejecutivas--claro .ejecutiva-tarjeta__acciones .btn{flex:1 1 100%;width:100%;min-height:48px;border-radius:12px}
@media(max-width:420px){.cotizar .ejecutivas--claro .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__acciones{
  margin-left:calc(-72px - 1rem);width:calc(100% + 72px + 1rem)}}
.volver-modelos{display:inline-flex;align-items:center;min-height:44px;margin-top:.2rem;
  color:var(--marca-link);font-weight:600;font-size:.92rem;text-underline-offset:3px}

/* Barra fija de cotizar: clara y con borde, ya no un bloque negro. */
body .barra-cot{background-color:#fff;color:var(--tinta);border:1px solid var(--linea);box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* Planta mas grande (Daniela: "planta más grande, menos números"). */
.resumen__m2{grid-template-columns:1fr}
@media(min-width:700px){
  .familias--js .grilla .modelo.visible{grid-template-columns:minmax(300px,1.8fr) minmax(230px,1fr)}
}
@media(max-width:699px){
  .familias--js .modelo.abierto .planta{max-height:64vh}
}

/* Simulador bajo las plantas (Daniela: "más arriba"). */
.financiamiento--modelos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;
  margin-top:2rem;padding:1.25rem 1.5rem;border:1px solid var(--linea);background:#fff;border-radius:14px}
.financiamiento--modelos p{margin:0}
.financiamiento--modelos .btn{flex:none}

/* Ubicacion: mapa mas chico, Como llegar y Waze destacados. */
.ubicacion__llegar{display:flex;flex-wrap:wrap;gap:.6rem}
.mapa{aspect-ratio:auto;height:clamp(240px,30vw,320px)}

/* Portada sobre blanco: los botones del titular eran para fondo oscuro
   (claro translucido y linea blanca) y desaparecian. */
.hero-texto .btn--claro{background:var(--negro-avb,#000);color:#fff;backdrop-filter:none}
.hero-texto .btn--claro:hover{background:var(--negro-avb-hover,#2a2a2a)}
.hero-texto .btn--linea{border-color:var(--tinta);color:var(--tinta)}
.hero-texto .btn--linea:hover{background:var(--suave)}
/* La planta llena su columna en escritorio (antes quedaba a 400 px, centrada). */
@media(min-width:700px){
  .familias--js .grilla .modelo.visible .planta{width:100%;height:auto;max-height:78vh;object-fit:contain;padding:1rem;align-self:center}
}
/* Barra fija en celular angosto: "Mi cotización (n)" + "Terminar" caben sin cortarse. */
.barra-cot .barra-corto{display:none}
@media(max-width:420px){
  .barra-cot .barra-largo{display:none}
  .barra-cot.con-modelos #barra-txt{display:none}
  .barra-cot.con-modelos .barra-corto{display:inline}
  .barra-cot.con-modelos .btn{flex:1}
}

/* 13-oct-2026, Nico: cotizar arriba en el detalle del modelo. El boton va en
   el celeste de la marca (accion principal) justo bajo las medidas, y en
   escritorio la barra flotante se retira: tapaba "Ver ficha" y el detalle.
   En celular la barra se queda, porque ahi la lista y la hoja no la tapan. */
.modelo__cotizar{display:flex;flex-direction:column;gap:.5rem;margin:.9rem 0 .4rem}
.modelo .cuerpo .btn.agregar{background:var(--marca);color:#000;border:1px solid var(--marca);text-align:center}
.modelo .cuerpo .btn.agregar:hover{background:#00b4ff;border-color:#00b4ff}
.modelo .cuerpo .btn.agregar.quitar{background:#fff;color:var(--tinta);border-color:var(--marca)}
.modelo__terminar{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  color:var(--marca-link);font-weight:600;text-underline-offset:3px}
.modelo__terminar[hidden]{display:none}
@media(min-width:700px){
  body .barra-cot,body .barra-cot.ver{display:none}
}
@media(max-width:699px){
  .modelo__terminar{display:none}
}
/* A 319 px la barra mide ~215 px y el texto se cortaba ("¿Te inte…"):
   en celular angosto baja a dos lineas en vez de cortarse. */
@media(max-width:420px){
  .barra-cot #barra-txt{white-space:normal;overflow:visible;font-size:.86rem;line-height:1.2}
}

/* ============================================================
   20-oct-2026, reunion con Daniela (revision en celular).
   Notas en docs/NOTAS-reunion-20oct.md.
   ============================================================ */

/* (1) Ventana "Ver planta y detalle": X grande y visible para salir. */
@media(max-width:699px){
  .familias--js .modelo.abierto .modelo__volver{justify-content:space-between;padding-right:.7rem}
  .modelo__x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
    border-radius:50%;background:#000;color:#fff;font-size:1.9rem;line-height:1;font-weight:400}
}
@media(min-width:700px){.modelo__x{display:none}}

/* (2) Cifras del inicio: las cuatro iguales, numero arriba y texto debajo. */
.cifras li{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.cifras .n{display:block}
.cifras .t{display:block;max-width:14ch;line-height:1.3}
@media(max-width:520px){
  .cifras ul{grid-template-columns:1fr 1fr;gap:1.75rem 1rem}
  .cifras .n{font-size:2.5rem}
}

/* (3) Tarjeta de la ejecutiva en Cotizar: los botones iban encima de la foto
   cuando el nombre y el cargo eran mas bajos que ella. Ahora la foto ocupa su
   propio bloque y los botones parten siempre debajo de ella. */
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto){
  grid-template-columns:96px 1fr;grid-template-rows:auto auto 1fr;column-gap:1rem;row-gap:.15rem}
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__datos{display:contents}
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__foto{grid-column:1;grid-row:1 / 4}
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) :is(h3,.ejecutiva-tarjeta__cargo,.ejecutiva-tarjeta__proyectos){grid-column:2}
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) h3{align-self:end;margin:0}
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__acciones{
  grid-column:1 / -1;margin:1rem 0 .3rem;width:auto}
.cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__enlace{grid-column:1 / -1}
@media(max-width:420px){
  .cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto){grid-template-columns:72px 1fr}
  .cotizar :is(.ejecutivas--claro,.ejecutivas--oscuro) .ejecutiva-tarjeta:has(.ejecutiva-tarjeta__foto) .ejecutiva-tarjeta__acciones{margin:1rem 0 .3rem;width:auto}
}

/* (4) Tarjeta de modelo: sin el recuadro de "Total", una sola linea. */
.resumen__m2{display:block;font-size:.95rem;color:var(--tinta)}
.resumen__m2 b{font-weight:600;color:#000}

/* (5) Simulador hipotecario destacado: bloque celeste y boton relleno. */
.financiamiento--modelos{background:#E5F5FC;border:1px solid #9ED8F2;border-left:5px solid var(--marca);padding:1.4rem 1.5rem}
.financiamiento--modelos h3{font-size:1.3rem;color:#000}
.financiamiento--modelos p{color:var(--tinta);font-size:.98rem}
body .financiamiento.financiamiento--modelos .btn.financiamiento__btn{background:var(--marca);color:#000;border:1px solid var(--marca);
  min-height:48px;font-weight:600}
body .financiamiento.financiamiento--modelos .btn.financiamiento__btn:hover{background:#00b4ff;border-color:#00b4ff}
@media(max-width:600px){body .financiamiento.financiamiento--modelos .btn.financiamiento__btn{width:100%;justify-content:center;text-align:center}}

/* (7) Postventa: "Ver qué cubre mi garantía" quedo blanco sobre blanco tras el
   pase a fondo blanco del 13-oct (la regla de arriba solo cubria .hero-texto). */
.portada-simple:not(.somos-portada) .btn--linea{border-color:var(--tinta);color:var(--tinta)}
.portada-simple:not(.somos-portada) .btn--linea:hover{background:var(--suave)}

/* (16, 21-oct) Menu: la seccion actual queda marcada. El HTML ya traia
   aria-current="page" y nada lo pintaba. El celeste va solo como raya: como
   texto sobre el gris de la barra no pasa AA. */
.nav a[aria-current="page"]{font-weight:600;text-decoration:underline;text-decoration-color:var(--marca);
  text-decoration-thickness:3px;text-underline-offset:.45em}
.movil a[aria-current="page"]{font-weight:600;box-shadow:inset 4px 0 0 var(--marca)}

/* (15, 21-oct) Las plantas desaparecian al achicar la ventana del computador:
   bajo 900 px la ficha pasaba a modo celular y el detalle solo abria al tocar.
   Ahora el detalle va al lado desde 700 px. Entre 700 y 1099 px la planta va
   arriba y los datos debajo, porque las dos columnas internas no caben. */
@media(min-width:700px) and (max-width:1099px){
  .familias--js .familias__cuerpo{grid-template-columns:minmax(230px,300px) 1fr}
  .familias--js .grilla .modelo.visible{grid-template-columns:1fr;position:static}
  .familias--js .grilla .modelo.visible .planta{border-right:0;border-bottom:1px solid var(--linea);max-height:60vh}
}

/* (13, 21-oct) Flechas iguales en todos los carruseles (Novedades del inicio y
   galeria de la ficha): mismo boton de 48 px, misma flecha y a la izquierda,
   lejos del boton flotante de WhatsApp. */
.campanas__mandos,.galeria__mandos{justify-content:flex-start;gap:.6rem}
.campanas__flecha,.galeria__flecha{width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);
  background:#fff;color:var(--tinta);font-size:1.45rem;line-height:1;display:grid;place-items:center;cursor:pointer}

/* ============================================================
   22-oct-2026, Daniela (punto 9) y Nico: portada grande del inicio.
   Foto a casi pantalla completa con velo oscuro abajo para que el
   titular blanco se lea (contraste medido sobre el velo, no sobre la foto).
   ============================================================ */
.portada-grande{position:relative;display:flex;align-items:flex-end;min-height:min(82vh,780px);min-height:min(82svh,780px);
  background:#000;color:#fff;overflow:hidden;isolation:isolate;padding:0}
.portada-grande__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.portada-grande::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.82) 100%)}
.portada-grande .wrap{padding-top:clamp(5rem,12vh,8rem);padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.portada-grande h1{color:#fff;font-weight:600;font-size:clamp(2.3rem,6.2vw,4.6rem);line-height:1.05;letter-spacing:-.02em;
  margin:.9rem 0 1rem;max-width:16ch;text-wrap:balance}
.portada-grande .bajada{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.6vw,1.2rem);max-width:52ch;margin:0}
.portada-grande .hero__acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.portada-grande .btn--claro{background:#fff;color:#000;border:1px solid #fff}
.portada-grande .btn--claro:hover{background:#e8f0f3;border-color:#e8f0f3}
.portada-grande .btn--linea{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85)}
.portada-grande .btn--linea:hover{background:rgba(255,255,255,.14)}
@media(max-width:600px){
  .portada-grande{min-height:78vh;min-height:78svh}
  .portada-grande::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.85) 100%)}
  .portada-grande .hero__acciones .btn{flex:1 1 100%;justify-content:center;text-align:center}
}

/* 22-oct-2026, Nico: el video del inicio en su propia seccion, con aire y entero.
   Antes iba pegado bajo la portada grande, a todo el ancho y recortado. */
.video-marca{background:#fff;padding:clamp(2.5rem,6vw,4.5rem) 0}
.video-marca .hero-banda{border-radius:14px;overflow:hidden;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.video-marca .hero-banda__video{aspect-ratio:auto;height:auto;object-fit:contain}
@media(max-width:600px){.video-marca{padding:1.5rem 0 .5rem}.video-marca .hero-banda{border-radius:10px}}

/* ============================================================
   29-oct-2026, ajustes finales de Daniela.
   ============================================================ */

/* 1. Portada en pantalla grande. En un monitor de 1920 o mas el titular
   llegaba a su tope de 4,6rem y la foto seguia creciendo: el texto quedaba
   chico y perdido abajo a la izquierda. Desde 1440 px todo el bloque crece
   con el ancho de la pantalla: a 1440 px mide lo mismo que antes, y de ahi
   sube en proporcion, como se ve en un Mac. El alto sigue siendo 82vh,
   solo que sin el tope de 780 px. */
@media(min-width:1440px){
  .portada-grande{min-height:82vh;min-height:82svh}
  .portada-grande .tag{font-size:.89vw;padding:.5vw 1.11vw}
  .portada-grande h1{font-size:5.1vw}
  .portada-grande .bajada{font-size:1.33vw}
  .portada-grande .hero__acciones{gap:.83vw;margin-top:1.78vw}
  .portada-grande .hero__acciones .btn{font-size:1.11vw;padding:1vw 1.94vw;min-height:3.33vw}
}

/* 2. Tarjetas de proyecto. La etiqueta de estado se estiraba a todo el
   ancho de la tarjeta (en una grilla, align-self no basta: hace falta
   justify-self) y tapaba la foto. La foto gana altura para mostrar la
   fachada, y el punto entre datos tiene aire propio. */
.proyecto__estado{justify-self:start}
.proyecto{min-height:540px}
.proyecto img{object-position:center 30%}
@media(max-width:600px){.proyecto{min-height:480px}}
.proyecto .sep{display:inline-block;margin-inline:.2em;opacity:.8}

/* 3a. Datos de la ficha en una sola fila. Con cinco datos y cuatro columnas
   fijas, "Estado de venta" caia a una segunda fila. Ahora cada dato toma el
   ancho de su texto y el aire se reparte parejo entre ellos. */
@media(min-width:760px){
  .datos ul{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:2rem}
}
/* Desde 900 px los cinco caben siempre en una fila: el valor se achica con
   el ancho hasta 1200 px en vez de bajar a una segunda fila (medido por
   Codex el 29-oct: Bosques de Villuco a 1024 px). */
@media(min-width:900px){
  .datos ul{flex-wrap:nowrap;column-gap:clamp(1rem,2.2vw,2rem)}
  .datos .val{font-size:clamp(1.2rem,2.3vw,2rem);white-space:nowrap}
}

/* 3b. El mensaje destacado de la ficha va como etiqueta junto al estado,
   en contorno para no competir con el celeste. */
.hero-etiquetas{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.tag--linea{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85);padding:calc(.45rem - 1px) calc(1rem - 1px)}

/* 4. Varios videos en el banner del inicio. Flechas a los lados y puntos
   abajo, sobre el video. Solo se ve el video activo (los demas llevan
   hidden). Las flechas son de 44 px como minimo, para el dedo. */
.video-carrusel{position:relative}
.video-carrusel .hero-banda__video[hidden]{display:none}
.video-carrusel__flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;
  font-size:1.9rem;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0 0 .15rem}
.video-carrusel__flecha:hover{background:rgba(0,0,0,.8)}
.video-carrusel__flecha:focus-visible,.video-carrusel__puntos button:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.video-carrusel__flecha--ant{left:.75rem}
.video-carrusel__flecha--sig{right:.75rem}
.video-carrusel__puntos{position:absolute;left:0;right:0;bottom:.4rem;z-index:2;margin:0;
  display:flex;justify-content:center;gap:.1rem;line-height:0}
.video-carrusel__puntos button{width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0;
  display:grid;place-items:center}
.video-carrusel__puntos button::before{content:"";width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.video-carrusel__puntos button[aria-current="true"]::before{background:#fff;width:22px;border-radius:5px}
@media(max-width:600px){.video-carrusel__flecha{font-size:1.6rem;background:rgba(0,0,0,.45)}
  .video-carrusel__flecha--ant{left:.4rem}.video-carrusel__flecha--sig{right:.4rem}}

/* Envio de formularios web: el usuario siempre ve que algo esta cargando
   (regla de Nico, 02-nov-2026). Sin apagado por reducir movimiento: es
   informacion, no adorno. */
.enviar--cargando{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:progress}
.enviar--cargando:disabled{opacity:1}
.cargando__giro{flex:none;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cargando-giro .7s linear infinite}
.enviar--cargando::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:3px;background:currentColor;opacity:.6;animation:cargando-barra 1.2s ease-in-out infinite}
@keyframes cargando-giro{to{transform:rotate(360deg)}}
@keyframes cargando-barra{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}