/* =======================================================================
   Gema Hogar Residencial — HERO · TLALLI · QUIÉNES SOMOS · ASESOR ·
   CÓMO DESARROLLAMOS · CONTACTO
   ======================================================================= */

:root{
  /* ---------------------------- PALETA DE MARCA ------------------------- */
  --bg:#F7F5F2;              /* fondo principal                            */
  --bg-alt:#EDE7DC;          /* fondo alterno de sección                   */
  --bg-dark:#12100D;         /* fondo oscuro (hero, footer)                */
  --surface:#E1D9CB;         /* placeholder de imagen sobre fondo alterno  */

  --ink:#2A2622;             /* texto principal                            */
  --ink-soft:#2A2622;
  /* Oscurecido desde #8A8378: a ese tono el texto secundario daba 3.05:1
     sobre --bg-alt, por debajo del 4.5:1 que exige WCAG AA para texto
     normal. Mismo matiz, misma familia cálida — solo más profundo.        */
  --body:#6B655C;            /* texto secundario                           */

  --accent:#D9A441;          /* acento / detalles / íconos                 */
  /* Oscurecido desde #B07C1C por la misma razón: 2.97:1 sobre --bg-alt.
     Al ser también el fondo de --cta, el ajuste sube de paso el contraste
     del texto crema de los botones (--cta-ink), que estaba en 3.36:1.     */
  --accent-deep:#845D15;     /* acento legible sobre fondo claro           */
  --gold:#F4D488;            /* texto dorado sobre fondo oscuro            */

  --cta:#845D15;             /* botón CTA: fondo                           */
  --cta-ink:#F7F5F2;         /* botón CTA: texto                           */
  --cta-hover:#7E5610;       /* hover CTA                                  */

  /* Tintes derivados de --ink / --bg-dark para bordes, velos y sombras */
  --line:rgba(42,38,34,.10);
  --line-strong:rgba(42,38,34,.16);

  --gutter:3.2vw;
  /* El ritmo del carrusel lo lleva JS con setInterval, no el CSS: este token
     existía sin que nadie lo leyera. Se conserva --marquee-seconds porque sí
     alimenta la animación de la cinta y JS lo sobreescribe.                */
  --marquee-seconds:28s;     /* JS lo sobreescribe */

  /* ------------------------------ MOVIMIENTO ---------------------------- */
  /* Curvas propias: las de CSS (ease, ease-out) son demasiado suaves y las
     animaciones pierden intención. Estas tres cubren todo el sitio.         */
  --ease-out:cubic-bezier(.23,1,.32,1);        /* entradas y salidas        */
  --ease-in-out:cubic-bezier(.77,0,.175,1);    /* movimiento en pantalla    */
  --ease-soft:cubic-bezier(.4,0,.2,1);         /* color y hover             */

  /* Duraciones. Nada de UI pasa de 300ms: por encima se siente lento aunque
     técnicamente no lo sea.                                                 */
  --dur-press:140ms;   /* respuesta al clic                                 */
  --dur-hover:180ms;   /* color y fondo                                     */
  --dur-pop:200ms;     /* desplegables, acordeones, lightbox                */
  --dur-panel:260ms;   /* paneles y barras que entran desde un borde        */
}

*,*::before,*::after{box-sizing:border-box}

/* ====================== TRANSICIÓN ENTRE PÁGINAS ======================= */
/* Ir de la home a Tlalli era un parpadeo en blanco. Con esto el navegador
   hace un fundido entre las dos páginas: el sitio deja de sentirse como dos
   documentos sueltos. Donde no haya soporte, la navegación es la de antes.  */
@view-transition{navigation:auto}

/* Deliberadamente NO se le da view-transition-name a la cabecera. En la home
   está debajo de un hero de 100vh y en Tlalli está pegada arriba: el
   navegador la trataría como el mismo elemento y la haría volar media
   pantalla. Un fundido limpio es mejor que un elemento compartido que
   miente sobre la posición.                                                */
/* Simétrico a propósito: este mismo par de pseudoelementos se usa también en
   la apertura del plano dentro de la propia página, y ahí desfasar la
   salida dejaría ver un destello del fondo antes de que llegue el velo.    */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:220ms;
  animation-timing-function:var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-deep)}
img{display:block;max-width:100%}
figure{margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ------------------------- RESPUESTA AL CONTACTO ----------------------- */
/* Todo lo que se puede pulsar cede un poco al pulsarse. Es el detalle que
   hace que la interfaz parezca estar escuchando. La escala se queda entre
   .97 y .98: por debajo se nota como un truco.                            */
.btn,.btn-sq,.arrow,.bar__burger,.foot__social a,
.lotes__more,.lotes__sortbar button,.plano__btn,.wabar a{
  transition:transform var(--dur-press) var(--ease-out);
}
.btn:active,.btn-sq:active,.arrow:active,.bar__burger:active,
.foot__social a:active,.lotes__more:active,.lotes__sortbar button:active,
.wabar a:active{transform:scale(.97)}
/* El plano es una superficie grande: una escala menor basta y no marea. */
.plano__btn:active{transform:scale(.99)}

/* Los estados hover solo existen donde hay cursor. En pantalla táctil el
   hover se dispara al tocar y se queda pegado hasta el siguiente toque.   */
@media (hover:hover) and (pointer:fine){
  .arrow:hover{border-color:var(--accent);color:var(--cta-hover)}
  .lotes__more:hover{border-color:var(--accent);color:var(--accent-deep)}
  .lotes__sortbar button:hover{border-color:var(--accent);color:var(--accent-deep)}
  .foot__social a:hover{border-color:var(--accent);color:var(--accent)}
  .lotes__table tbody tr:hover th,
  .lotes__table tbody tr:hover td{background:rgba(217,164,65,.07)}
}

/* ------------------------ ENTRADA DE LAS IMÁGENES ---------------------- */
/* Las fotos con loading="lazy" aparecían de golpe al terminar de descargar,
   justo cuando el visitante las tiene delante. Ahora entran desenfocadas y
   se enfocan: el desenfoque tapa el salto entre "no hay nada" y "hay una
   foto". Solo se marcan las que aún no han cargado, así que una imagen en
   caché no parpadea. 8px y no más: el desenfoque de un elemento grande es
   caro, sobre todo en Safari.                                              */
[data-img]{
  opacity:0;filter:blur(8px);
  transition:opacity 480ms var(--ease-out),filter 480ms var(--ease-out);
}
[data-img="in"]{opacity:1;filter:blur(0)}

/* ------------------------ ENTRADA AL HACER SCROLL ---------------------- */
/* El atributo lo pone JS, nunca el HTML: si el script falla o no llega, el
   contenido está visible desde el primer momento. Una página que esconde
   su texto esperando a un observador es una página rota.                   */
[data-reveal]{
  opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
}
[data-reveal="in"]{opacity:1;transform:none}
/* Escalonado de 60ms. Más lento y el visitante espera a que la sección
   termine de montarse; el escalonado nunca bloquea un clic.                */
[data-reveal-delay="1"]{transition-delay:60ms}
[data-reveal-delay="2"]{transition-delay:120ms}
[data-reveal-delay="3"]{transition-delay:180ms}

/* ------------------------------- keyframes ----------------------------- */
/* .86 y no 0: nada en el mundo real aparece de la nada. Una escala inicial
   visible hace que la letra entre en lugar de materializarse.              */
@keyframes alLetter{from{opacity:0;transform:translateY(26px) scale(.86);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes alLoaderOut{0%{opacity:1}99%{opacity:0}100%{opacity:0;visibility:hidden}}
@keyframes alMarkLift{from{transform:translateY(0) scale(1)}to{transform:translateY(-38vh) scale(.2)}}
@keyframes alPhotoIn{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:scale(1)}}
@keyframes alFadeIn{from{opacity:0}to{opacity:1}}
@keyframes alLineIn{from{opacity:0;transform:translateY(34px);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Versión corta de alLineIn para bloques de texto apilados: 34px de recorrido
   son para las palabras enormes del hero de la home, no para un párrafo.    */
@keyframes alRise{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes alImgIn{from{opacity:0;filter:blur(10px);transform:scale(1.02)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes mxMarquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
@keyframes mxProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ================================ LOADER =============================== */
/* La intro se ve una vez por visita: JS la salta al volver a la home dentro
   de la misma sesión. Aun así se recortó a la mitad. Un titular que tarda
   cinco segundos en asentarse hace que la página entera parezca lenta,
   aunque haya cargado igual de rápido.                                     */
.loader{
  position:fixed;inset:0;z-index:90;
  background:var(--bg-dark);
  display:grid;place-items:center;
  animation:alLoaderOut .62s var(--ease-out) 1.18s forwards;
}
.loader__mark{
  display:flex;
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(52px,8.4vw,124px);letter-spacing:.11em;color:var(--gold);
  animation:alMarkLift .62s var(--ease-in-out) 1.18s forwards;
}
/* Escalonado de 90ms: suficiente para leerse en cascada, no tanto como para
   que el visitante espere a la última letra.                               */
.loader__mark span{display:block;animation:alLetter .58s var(--ease-out) both}
.loader__mark span:nth-child(1){animation-delay:.06s}
.loader__mark span:nth-child(2){animation-delay:.15s}
.loader__mark span:nth-child(3){animation-delay:.24s}
.loader__mark span:nth-child(4){animation-delay:.33s}
.loader__mark span:nth-child(5){animation-delay:.42s}
.loader__mark span:nth-child(6){animation-delay:.51s}

/* ================================= HERO ================================ */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;background:var(--bg-dark)}

.hero__photo{
  position:absolute;inset:0;
  animation:alPhotoIn 1.6s var(--ease-out) 1.18s both;
}
.hero__photo img{width:100%;height:100%;object-fit:cover}

.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,13,.52) 0%,rgba(18,16,13,.10) 34%,rgba(18,16,13,.16) 66%,rgba(18,16,13,.40) 100%);
}

.hero__type{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  font-family:"Cormorant Garamond",serif;font-weight:300;color:var(--bg);
  /* "CONSTRUYENDO" mide ~8.16em: el tope en vw evita que la línea 2 se corte
     en viewports poco anchos. En pantallas amplias manda el valor en vh. */
  font-size:min(15.5vh,6.8vw);line-height:1;letter-spacing:.015em;
  text-shadow:0 2px 34px rgba(18,16,13,.32);
}
.hero__word{
  position:absolute;transform:translateY(-50%);pointer-events:auto;
  animation:alLineIn .82s var(--ease-out) both;
}
/* Escalonado de 110ms entre líneas: se lee como una frase que se compone,
   no como tres elementos independientes.                                   */
.hero__word--1{left:10.5%;top:27.5%;animation-delay:1.5s}
.hero__word--2{left:40%;top:58%;animation-delay:1.61s}
.hero__word--3{left:23%;top:83%;animation-delay:1.72s}

/* Bajada + CTA del hero. El template no traía este bloque; se coloca en el
   hueco libre de la columna izquierda (entre la 1ª y la 3ª línea del titular)
   y reutiliza .lead y .btn sin alterar ningún valor existente. */
.hero__intro{
  position:absolute;left:10.5%;top:44%;width:min(30%,340px);
  pointer-events:auto;
  font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  animation:alFadeIn .6s var(--ease-out) 1.9s both;
}
.hero__intro .lead{margin:0;color:rgba(247,245,242,.94)}
.hero__intro .btn-pair{margin-top:24px}
/* En móvil el titular ocupa la columna izquierda entera: la bajada baja al pie. */
@media (max-width:900px){
  .hero__intro{left:var(--gutter);right:var(--gutter);top:auto;bottom:4%;width:auto}
}

/* ============================== SITE HEADER ============================ */
/* Cabecera del sitio: no es sticky, se desplaza con el contenido. */
.bar{
  position:relative;z-index:40;
  background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);height:76px;
}
.bar__logo{display:block;line-height:1}
.bar__logo:hover{color:inherit}
.bar__logo-name{font-size:24px;font-weight:700;letter-spacing:.005em;color:var(--accent-deep);line-height:1}
.bar__logo-name span{font-size:11px;vertical-align:super;font-weight:600}
.bar__logo-sub{font-size:6.5px;font-weight:600;letter-spacing:.13em;color:var(--body);margin-top:3px}

.bar__nav{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:400;color:var(--ink-soft)}
.bar__nav a{transition:color var(--dur-hover) var(--ease-soft)}
.bar__nav-caret{display:flex;align-items:center;gap:6px}
.bar__nav-caret span{
  display:block;width:7px;height:7px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
}
.bar__contact{display:flex;align-items:center;gap:5px;margin-left:6px}

.bar__burger{
  display:none;width:38px;height:38px;padding:0;
  background:none;border:1px solid var(--line-strong);cursor:pointer;
}
.bar__burger span{
  display:block;width:18px;height:1.4px;margin:3px auto;background:var(--ink);
  transition:transform var(--dur-pop) var(--ease-out),opacity 120ms linear;
}
/* Las tres barras se convierten en una cruz. El movimiento explica que el
   mismo botón que abrió el menú es el que lo cierra.                       */
.bar__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.4px) rotate(45deg)}
.bar__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bar__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.4px) rotate(-45deg)}

/* El menú móvil vive en el flujo, así que empuja al contenido de abajo. Un
   cambio de display lo haría saltar. La rejilla de 0fr a 1fr anima el alto
   real sin necesidad de conocerlo, y el desplazamiento del interior evita
   que los enlaces se aplasten mientras se abre.                            */
.mnav{
  position:relative;z-index:39;
  display:grid;grid-template-rows:1fr;
  background:var(--bg);border-bottom:1px solid var(--line);
  font-size:16px;color:var(--ink-soft);
  transition:grid-template-rows var(--dur-panel) var(--ease-out),
             opacity var(--dur-pop) var(--ease-out),
             border-color var(--dur-panel) var(--ease-out),
             border-width var(--dur-panel) var(--ease-out);
}
.mnav__inner{
  overflow:hidden;min-height:0;
  display:flex;flex-direction:column;
  padding:6px var(--gutter) 14px;
  transition:transform var(--dur-panel) var(--ease-out);
}
/* El borde también se recoge. Con la rejilla en 0fr el panel mide cero, pero
   un borde de 1px transparente seguiría pintando una franja del color del
   fondo justo debajo de la cabecera.                                        */
.mnav[inert]{
  grid-template-rows:0fr;opacity:0;
  border-bottom-color:transparent;border-bottom-width:0;
}
/* Por encima de 1100px la cabecera muestra su navegación completa y este
   panel no se abre nunca: no tiene por qué existir.                        */
@media (min-width:1101px){
  .mnav{display:none}
}
/* -8px y no -100%: al cerrarse el panel se retira hacia arriba lo justo
   para leerse como un repliegue, sin recorrer toda su altura.             */
.mnav[inert] .mnav__inner{transform:translateY(-8px)}
.mnav a{
  padding:11px 0;border-bottom:1px solid var(--line);
  transition:color var(--dur-hover) var(--ease-soft);
}
.mnav a:last-child{border-bottom:none}
/* Reserva para navegadores sin soporte de inert: sin JS el menú no se abre
   nunca, así que se mantiene plegado igual.                                */
.mnav[hidden]{display:none}

/* ============================ ELEMENTOS COMUNES ======================== */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent-deep)}

.h2{
  margin:0;
  font-size:clamp(34px,3.7vw,55px);font-weight:500;
  line-height:1.14;letter-spacing:-.012em;color:var(--ink);
}
.lead{font-size:15.5px;line-height:1.78;color:var(--body)}

.rule{position:absolute;top:0;bottom:0;left:51.5%;width:1px;background:rgba(138,131,120,.30)}
.rule--soft{background:rgba(138,131,120,.24)}

.btn-pair{display:flex;align-items:stretch;gap:3px}
.btn{
  display:grid;place-items:center;padding:14px 24px;
  background:var(--cta);color:var(--cta-ink);font-size:14.5px;font-weight:500;
  transition:background var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
.btn-sq{
  display:grid;place-items:center;width:46px;
  background:var(--cta);color:var(--cta-ink);font-size:16px;
  transition:background var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.btn-sq:hover{background:var(--cta-hover);color:var(--cta-ink)}
}

/* El par botón + flecha es una sola pieza: se pulsa junta aunque se toque
   solo una mitad. Escalar cada parte por su cuenta las separaría.          */
.btn-pair:active .btn,
.btn-pair:active .btn-sq{transform:scale(.98)}

.bar .btn-sq{width:34px;height:34px;font-size:15px}

.arrow{
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--accent-deep);
  font-size:15px;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease-soft),
             color var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}

/* ============================ PROYECTO ACTUAL ========================== */
.sol{position:relative;background:var(--bg);padding:74px var(--gutter) 96px}
.sol__grid{
  display:grid;grid-template-columns:44% 48%;
  justify-content:space-between;align-items:start;gap:4%;
}
.sol__copy{display:flex;flex-direction:column;align-items:flex-start}
.sol__title{margin-top:26px;max-width:11.4em}
.sol__lead{margin:32px 0 0;max-width:44ch}
.sol .btn-pair{margin-top:38px}
.sol__arrows{display:flex;gap:10px;margin-top:44px}

.sol__count{
  margin:0 0 0 6px;display:flex;align-items:center;
  font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.08em;
  color:var(--body);
}
.sol__count span:first-child{color:var(--accent-deep)}

.sol__stage{
  position:relative;width:100%;aspect-ratio:1.14;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),calc(100% - 52px) 100%,0 100%);
  background:var(--bg-alt);
  /* El dedo manda en horizontal y el navegador sigue mandando en vertical:
     sin esto, arrastrar de lado bloquearía el scroll de la página.         */
  touch-action:pan-y;
  cursor:grab;
}
.sol__stage[data-dragging]{cursor:grabbing}
.sol__track{
  display:flex;height:100%;
  transform:translate3d(0,0,0);
  transition:transform 420ms var(--ease-out);
}
/* Mientras el dedo está encima no hay transición: el track sigue al dedo
   1:1. La transición vuelve al soltar, y como es una transición y no un
   keyframe, se puede reapuntar a mitad de camino sin reiniciar.            */
.sol__track[data-dragging]{transition:none}
/* Antes era un apilado con fundido: bonito, pero imposible de arrastrar. Un
   fundido no tiene posición intermedia, así que el dedo no puede llevarlo a
   medio camino. Ahora es una tira que se desplaza, y el gesto sí tiene a
   dónde agarrarse.                                                         */
.slide{
  position:relative;flex:0 0 100%;height:100%;
  /* Las fotos que quedan fuera de cuadro pierden un poco de luz: da
     profundidad y deja claro cuál es la que se está mirando.               */
  opacity:.55;transition:opacity 420ms var(--ease-out);
}
.slide.is-active{opacity:1}
/* Mientras se arrastra no se atenúa ninguna: el visitante está mirando las
   dos a la vez y oscurecer la que entra sería mentirle sobre dónde está. */
.sol__track[data-dragging] .slide{opacity:1;transition:none}
.slide img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.slide__scrim{
  position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,13,0),rgba(18,16,13,.86));
}
.slide__caption{
  position:absolute;left:28px;bottom:22px;
  font-size:17px;font-weight:400;color:var(--bg);pointer-events:none;
}

/* ============================= QUIÉNES SOMOS =========================== */
.tech{position:relative;background:var(--bg-alt);padding:82px 0 0}
.tech__grid{
  padding:0 var(--gutter);
  display:grid;grid-template-columns:50% 40%;
  justify-content:space-between;gap:4%;align-items:start;
}
.tech .h2{margin-top:30px;line-height:1.16}
.tech__lead{margin:34px 0 0}

.tech__cta{
  position:sticky;top:100px;z-index:20;
  margin:26px 0 0 58%;width:max-content;
}

.tech__marquee{margin-top:82px;padding-bottom:96px;overflow:hidden}
/* linear, no ease: es movimiento constante. Cualquier curva haría que la
   cinta pareciera frenar y arrancar en cada vuelta.                        */
.marquee{
  display:flex;gap:22px;width:max-content;
  animation:mxMarquee var(--marquee-seconds) linear infinite;
}
/* Con cursor encima la cinta se detiene: si alguien se para a mirar una
   foto, moverla es pelear con él. La barra de avance se para con ella.    */
@media (hover:hover) and (pointer:fine){
  .tech__marquee:hover .marquee,
  .tech__marquee:hover .track__bar{animation-play-state:paused}
}
.card{
  position:relative;width:62vw;aspect-ratio:1.72;flex:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 56px),calc(100% - 56px) 100%,0 100%);
  background:var(--surface);
}
.card img{width:100%;height:100%;object-fit:cover}
/* Foto vertical 3:4 en tarjeta 1.72: el encuadre centrado corta el techo del
   portón y deja solo empedrado. Subimos el recorte para conservar la estructura. */
.card__img--alto{object-position:center 26%}
.card__scrim{
  position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,13,0),rgba(18,16,13,.82));
}
.card__caption{
  position:absolute;left:30px;bottom:26px;
  font-size:20px;line-height:1.32;color:var(--bg);pointer-events:none;
}

.track{position:relative;height:2px;margin:38px var(--gutter) 0;background:rgba(42,38,34,.12)}
/* Barra a ancho completo que se estira con scaleX desde la izquierda. Antes
   animaba width de 0% a 100% en bucle infinito: eso recalcula layout y
   repinta en cada frame mientras la sección esté en pantalla, para siempre.
   scaleX va en GPU y no toca el layout ni una vez.                          */
.track__bar{
  position:absolute;left:0;top:-1px;width:100%;height:3px;
  background:var(--accent);
  transform-origin:left center;
  animation:mxProgress var(--marquee-seconds) linear infinite;
}

/* ============================= FLOATING PILL =========================== */
/* Entra desde su propio borde inferior: translateY(100%) se mide contra el
   alto de la píldora, así que no hay que saberlo ni mantenerlo a mano.     */
.pill{
  position:fixed;left:50%;bottom:0;z-index:50;
  opacity:0;transform:translate(-50%,100%);
  transition:opacity var(--dur-pop) var(--ease-out),
             transform var(--dur-panel) var(--ease-out);
  background:var(--bg);border:1px solid var(--line);border-bottom:none;
  box-shadow:0 -6px 24px rgba(18,16,13,.07);
  padding:16px 30px;display:flex;gap:26px;
  font-size:13.5px;color:var(--ink);
}
.pill a{transition:color var(--dur-hover) var(--ease-soft)}
.pill.is-visible{opacity:1;transform:translate(-50%,0)}

/* ================================ ASESOR =============================== */
/* Mismo ritmo vertical que .sol y el mismo corte de esquina que .sol__stage */
.asesor{position:relative;background:var(--bg);padding:56px var(--gutter) 72px}
.asesor__grid{display:grid;gap:34px}

.asesor__photo{
  position:relative;width:100%;aspect-ratio:4/5;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
  background:var(--surface);   /* bloque sólido si la foto aún no existe */
}
.asesor__photo img{width:100%;height:100%;object-fit:cover}

.asesor__copy{display:flex;flex-direction:column;align-items:flex-start}
.asesor__title{margin-top:22px;max-width:13ch}
.asesor__role{
  margin:14px 0 0;font-size:15px;letter-spacing:.01em;color:var(--accent-deep);
}
.asesor__lead{margin:24px 0 0;max-width:52ch}
.asesor .btn-pair{margin-top:32px}

/* ========================== CÓMO DESARROLLAMOS ========================= */
.proc{position:relative;background:var(--bg-alt);padding:56px var(--gutter) 72px}
.proc__head{max-width:46ch}
.proc__title{margin-top:22px}
.proc__lead{margin:20px 0 0}

.proc__grid{display:grid;gap:22px;margin-top:44px}
.proc__card{
  display:flex;flex-direction:column;height:100%;
  padding:30px 28px 34px;background:var(--bg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.proc__icon{color:var(--accent)}
.proc__icon svg{display:block;width:32px;height:32px}
.proc__card h3{
  margin:22px 0 0;font-size:21px;font-weight:500;
  line-height:1.25;letter-spacing:-.005em;color:var(--ink);
}
.proc__card p{margin:14px 0 0;font-size:15.5px;line-height:1.72;color:var(--body)}

/* =============================== CONTACTO ============================== */
.contacto{background:var(--bg-dark);padding:64px var(--gutter) 76px}
.contacto .eyebrow{color:var(--gold)}
.contacto .h2{margin-top:22px;color:var(--bg)}
.contacto__lead{margin:20px 0 0;max-width:46ch;color:rgba(247,245,242,.66)}

.contacto__list{margin:40px 0 0;display:grid;gap:20px;max-width:52ch}
.contacto__row{margin:0}
.contacto__list dd{margin:0}
.contacto__label{
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(247,245,242,.5);
}
/* min-height uniforme: área táctil en los enlaces y mismo ritmo en el resto */
.contacto__value{
  display:flex;align-items:center;min-height:44px;
  margin:2px 0 0;font-size:17px;line-height:1.45;color:var(--bg);
}
a.contacto__value{color:var(--gold);transition:color var(--dur-hover) var(--ease-soft)}
a.contacto__value:hover{color:var(--accent)}

.contacto .btn-pair{margin-top:44px}
.contacto .btn{padding:18px 30px;font-size:16px}
.contacto .btn-sq{width:56px;font-size:17px}

/* ================================ FOOTER =============================== */
.foot{
  background:var(--bg-dark);color:rgba(247,245,242,.62);
  border-top:1px solid rgba(244,212,136,.16);
  padding:52px var(--gutter) 0;font-size:14.5px;line-height:1.7;
}
.foot__grid{display:grid;gap:38px}
.foot__title{
  margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);
}
.foot__org{margin:0;font-style:normal}
.foot__org strong{display:block;font-weight:600;color:var(--bg)}

.foot__nav{display:flex;flex-direction:column}
.foot__nav a{padding:11px 0;transition:color var(--dur-hover) var(--ease-soft)}
.foot__nav a:hover{color:var(--gold)}

.foot__legal{display:flex;flex-direction:column}
.foot__privacy{display:block;padding:11px 0;transition:color var(--dur-hover) var(--ease-soft)}
.foot__privacy:hover{color:var(--gold)}
.foot__social{display:flex;gap:6px;margin-top:10px}
.foot__social a{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(244,212,136,.22);color:var(--gold);
  transition:border-color var(--dur-hover) var(--ease-soft),
             color var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
.foot__social svg{display:block;width:18px;height:18px}

.foot__bottom{
  margin-top:48px;border-top:1px solid rgba(247,245,242,.1);
  /* El colchón inferior evita que la píldora fija tape el copyright */
  padding:26px 0 96px;
  display:grid;gap:12px;font-size:13px;line-height:1.65;
  color:rgba(247,245,242,.44);
}
.foot__note{margin:0;max-width:72ch}
.foot__bottom p{margin:0}

/* --------------------------- CRÉDITO DE AUTOR -------------------------- */
/* Se separa del bloque legal y sube de contraste para que sí se lea. */
.foot__credit{
  grid-column:1/-1;          /* ocupa la fila completa en pantalla ancha */
  margin:0;padding-top:22px;
  border-top:1px solid rgba(244,212,136,.14);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,245,242,.6);
}
.foot__credit a{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding-bottom:3px;
  font-size:14px;font-weight:600;letter-spacing:.12em;
  color:var(--gold);
  transition:color var(--dur-hover) var(--ease-soft);
}
/* Subrayado que se completa al pasar el cursor */
.foot__credit a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.45;
  transform:scaleX(.34);transform-origin:left;
  transition:transform var(--dur-panel) var(--ease-out),
             opacity var(--dur-hover) var(--ease-soft);
}
.foot__credit-arrow{
  font-size:12px;line-height:1;
  transition:transform var(--dur-pop) var(--ease-out);
}
/* El foco por teclado sí conserva el efecto: ahí no hay falso positivo. */
.foot__credit a:focus-visible{color:var(--accent)}
.foot__credit a:focus-visible::after{transform:scaleX(1);opacity:1}
.foot__credit a:focus-visible .foot__credit-arrow{transform:translate(2px,-2px)}
@media (hover:hover) and (pointer:fine){
  .foot__credit a:hover{color:var(--accent)}
  .foot__credit a:hover::after{transform:scaleX(1);opacity:1}
  .foot__credit a:hover .foot__credit-arrow{transform:translate(2px,-2px)}
}

/* ------------------- ASESOR · PROC · FOOT en pantalla ancha ------------- */
@media (min-width:901px){
  .asesor{padding:74px var(--gutter) 96px}
  .asesor__grid{
    grid-template-columns:38% 56%;justify-content:space-between;
    align-items:center;gap:6%;
  }
  .asesor__photo{
    clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),calc(100% - 52px) 100%,0 100%);
  }
  .asesor__title{margin-top:26px}
  .asesor__lead{margin-top:32px}

  .proc{padding:82px var(--gutter) 96px}
  .proc__grid{grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
  .proc__card{padding:36px 34px 40px}

  .contacto{padding:88px var(--gutter) 100px}

  .foot{padding-top:64px}
  .foot__grid{grid-template-columns:1.3fr 1fr 1fr;gap:6%}
  .foot__bottom{
    grid-template-columns:auto 1fr;align-items:baseline;
    gap:8px 48px;padding-bottom:110px;
  }
}

/* ============================== RESPONSIVE ============================= */
@media (max-width:1100px){
  .bar__nav{display:none}
  .bar__burger{display:block}
  .hero__type{font-size:min(12.5vh,6.8vw)}
}

@media (max-width:900px){
  :root{--gutter:24px}

  .hero__type{font-size:min(10.5vh,7.8vw)}
  .hero__word--1{left:7%;top:26%}
  .hero__word--2{left:32%;top:50%}
  .hero__word--3{left:14%;top:74%}

  .rule{display:none}

  .sol{padding:56px var(--gutter) 72px}
  .sol__grid{grid-template-columns:1fr;gap:40px}
  .sol__title{max-width:none}

  .tech__grid{grid-template-columns:1fr;gap:0}
  .tech .h2{margin-top:22px}
  .tech__lead{margin-top:24px}
  .tech__cta{margin-left:0;top:92px}
  .tech__marquee{margin-top:52px;padding-bottom:64px}
  .card{width:82vw}
  .card__caption{font-size:17px;left:22px;bottom:22px}
}

@media (max-width:620px){
  .hero__type{font-size:min(9vh,11vw)}
  .hero__word--1{left:6%;top:24%}
  .hero__word--2{left:6%;top:47%}
  .hero__word--3{left:10%;top:70%}

  .slide__caption{left:20px;bottom:18px;font-size:15px}
  .sol__stage{clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
  .card{width:88vw;clip-path:polygon(0 0,100% 0,100% calc(100% - 38px),calc(100% - 38px) 100%,0 100%)}

  .pill{gap:16px;padding:13px 18px;font-size:12px;width:max-content;max-width:calc(100vw - 24px);overflow:auto}
}

/* ========================= PREFERENCIA: MENOS MOVIMIENTO =============== */
/* Menos movimiento no es cero movimiento: se quitan los desplazamientos y
   las escalas, y se conservan las transiciones de opacidad y color, que
   son las que explican qué acaba de cambiar.                               */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{display:none}
  .hero__photo,.hero__intro,.hero__word,.loader__mark,.loader__mark span{animation:none}
  .marquee,.track__bar{animation:none}
  .thero__photo,.thero__inner>*{animation:none}
  [data-img] {opacity:1;filter:none;transform:none;transition:opacity .2s linear}
  /* El arrastre se conserva: seguir al dedo es manipulación directa, no una
     animación. Lo que se acorta es el asentamiento al soltar.              */
  .slide{opacity:1;transition:none}
  .sol__track{transition:transform 120ms linear}
  .pill{transform:translate(-50%,0);transition:opacity .3s linear}

  /* Nada que cambie de posición ni de tamaño. */
  .btn:active,.btn-sq:active,.arrow:active,.bar__burger:active,
  .foot__social a:active,.lotes__more:active,.lotes__sortbar button:active,
  .wabar a:active,.plano__btn:active,
  .btn-pair:active .btn,.btn-pair:active .btn-sq{transform:none}
  .mnav,.mnav__inner{transition:opacity .2s linear}
  .mnav[inert] .mnav__inner{transform:none}
  .bar__burger span{transition:opacity .12s linear}
  .foot__credit a::after{transition:opacity .2s linear}
  .foot__credit a:hover::after,
  .foot__credit a:focus-visible::after{transform:scaleX(.34)}
  .foot__credit a:hover .foot__credit-arrow,
  .foot__credit a:focus-visible .foot__credit-arrow{transform:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* Estado "sin intro": la clase la aplica JS con ?skipIntro=1 */
.no-intro .loader{display:none}
.no-intro .hero__photo,
.no-intro .hero__intro,
.no-intro .hero__word{animation:none}

/* =======================================================================
   PÁGINA TLALLI RESIDENCIAL  ·  /tlalli
   Mismos tokens, mismas fuentes, mismos cortes de esquina y mismos botones
   que el resto del sitio. No se introduce ningún color ni tipografía nueva.
   ======================================================================= */

/* Solo para lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sección activa en el header y en el menú móvil */
.bar__nav a.is-active{color:var(--accent-deep);border-bottom:1px solid currentColor;padding-bottom:2px}
.mnav a.is-active{color:var(--accent-deep)}

/* Botón secundario sobre fondo oscuro (hero y cierre) */
.btn--ghost{
  background:transparent;color:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(247,245,242,.34);
  transition:background var(--dur-hover) var(--ease-soft),
             box-shadow var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{
    background:rgba(247,245,242,.10);color:var(--bg);
    box-shadow:inset 0 0 0 1px rgba(247,245,242,.52);
  }
}

/* ------ Hueco de imagen: bloque sólido con el nombre del archivo ------- */
/* El <img> lleva onerror="this.remove()": si el archivo no existe, queda a
   la vista la etiqueta con la ruta y el layout conserva su tamaño. */
.ph{position:relative;background:var(--surface);overflow:hidden}
.ph>img,.ph>video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.ph__name{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  padding:16px;text-align:center;
  font-size:12px;line-height:1.7;letter-spacing:.06em;color:var(--body);
}

/* -------------------------- Sección genérica --------------------------- */
.tsec{position:relative;background:var(--bg);padding:56px var(--gutter) 72px}
.tsec--alt{background:var(--bg-alt)}
/* Mismo tope de medida que .sol__title en la home: el titular no cruza la
   pantalla completa en monitores anchos. */
.tsec .h2,
#cierre .h2{margin-top:22px;max-width:17em}
.tsec__lead{margin:26px 0 0;max-width:64ch}
@media (min-width:901px){
  .tsec{padding:82px var(--gutter) 96px}
  .tsec .h2{margin-top:26px}
}

/* ============================== HERO TLALLI ============================ */
/* Fondo sólido igual al de la home (--bg-dark): sin foto propia, la mitad
   derecha queda libre para el video horizontal del desarrollo.             */
.thero{
  position:relative;overflow:hidden;
  background:var(--bg-dark);
  padding:64px var(--gutter) 48px;
}
.thero__grid{display:grid;gap:44px}

/* Entrada del hero de Tlalli. La home tenía una intro coreografiada y esta
   página, que es la de venta, no tenía ninguna: el mismo sitio se sentía
   como dos. Aquí no hay loader que esperar, así que empieza de inmediato y
   se asienta en un segundo — la mitad que en la home, porque a esta página
   se llega desde un anuncio y el titular tiene que estar ya.
   Se desactiva con .no-intro, que JS pone al volver dentro de la sesión:
   quien ya vio la intro de la home no tiene por qué esperar otra.          */
/* Escalonado de 80ms: el bloque se compone de arriba abajo, en el mismo
   orden en que se lee.                                                     */
.thero__inner>*{animation:alRise .6s var(--ease-out) both}
.thero__inner>.eyebrow{animation-delay:.06s}
.thero__inner>.thero__title{animation-delay:.14s}
.thero__inner>.thero__lead{animation-delay:.22s}
.thero__inner>.thero__ctas{animation-delay:.30s}
.thero__inner>.thero__facts{animation-delay:.38s}
.thero__video{animation:alPhotoIn 1.2s var(--ease-out) both}

.no-intro .thero__inner>*,
.no-intro .thero__video{animation:none}
.thero .ph__name{color:rgba(247,245,242,.42)}

.thero .eyebrow{color:var(--gold)}
.thero__title{
  margin:20px 0 0;max-width:15ch;
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(36px,5.4vw,72px);line-height:1.06;letter-spacing:.005em;
  color:var(--bg);
}
.thero__lead{margin:22px 0 0;max-width:46ch;color:rgba(247,245,242,.84)}
.thero__ctas{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:30px}
.thero__ctas .btn-pair{margin:0}

.thero__facts{
  margin:34px 0 0;padding:22px 0 0;list-style:none;
  border-top:1px solid rgba(247,245,242,.18);
  display:grid;gap:13px;
  font-size:13.5px;line-height:1.5;color:rgba(247,245,242,.80);
}
.thero__facts li{display:flex;gap:10px;align-items:flex-start}
.thero__facts svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--gold)}
/* Las cuatro cifras del hero pesan igual, pero el precio por metro es la que
   se está buscando al llegar de un anuncio: se lee primero. Mismo tamaño,
   mismo color, sin badge — solo el peso ligeramente más alto de los números,
   como ya distingue --ink de --body en el resto del sitio.                 */
.thero__facts li:first-child span{color:var(--bg);font-weight:600}

/* Video horizontal a la derecha del hero; en móvil pasa debajo del texto.
   El borde es necesario: el fondo del <video> y el del hero son el mismo
   --bg-dark, así que sin borde el recuadro no se distingue del fondo.      */
.thero__video{
  width:100%;aspect-ratio:16/9;background:var(--surface);
  border:1px solid rgba(247,245,242,.18);
}
.thero__video video{display:block;width:100%;height:100%;background:var(--bg-dark)}

@media (min-width:901px){
  .thero{
    height:calc(100svh - 76px);min-height:680px;
    display:flex;align-items:center;padding:0 var(--gutter);
  }
  .thero__grid{
    width:100%;grid-template-columns:1.05fr 1fr;align-items:center;gap:64px;
  }
  .thero__title{font-size:clamp(36px,4.4vw,76px)}
  .thero__facts{grid-template-columns:repeat(2,1fr);gap:26px;margin-top:42px}
}

/* ============================== UBICACIÓN ============================== */
.ubi__grid{display:grid;gap:38px}
.ubi__refs{margin:30px 0 0;padding:0;list-style:none;max-width:46ch}
.ubi__refs li{
  display:flex;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.ubi__refs li:first-child{border-top:1px solid var(--line)}
.ubi__refs b{
  flex:none;min-width:8.6em;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);
}
.ubi__refs span{font-size:15.5px;line-height:1.5;color:var(--ink)}
.ubi .btn-pair{margin-top:34px}
.ubi__map{
  position:relative;width:100%;aspect-ratio:1.14;background:var(--bg-alt);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),calc(100% - 52px) 100%,0 100%);
}
.ubi__map iframe{display:block;width:100%;height:100%;border:0}
.ubi__photo{margin-top:20px;aspect-ratio:16/10}
.ubi__caption{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--body)}
@media (min-width:901px){
  .ubi__grid{grid-template-columns:44% 48%;justify-content:space-between;gap:4%;align-items:start}
}

/* =========================== QUÉ COMPRAS HOY =========================== */
.pv__cols{display:grid;gap:22px;margin-top:44px}
.pv__col{padding:30px 26px 34px;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.pv__col--done{background:var(--cta)}
.pv__col--next{background:var(--bg)}
.pv__col h3{margin:14px 0 0;font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.005em}
.pv__col--done h3{color:var(--cta-ink)}
.pv__col--next h3{color:var(--ink)}
.pv__col--done .eyebrow{color:var(--gold)}
.pv__list{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:17px;font-size:15.5px;line-height:1.7}
.pv__list li{display:flex;gap:12px}
.pv__list svg{flex:none;width:17px;height:17px;margin-top:4px}
.pv__col--done .pv__list{color:rgba(247,245,242,.92)}
.pv__col--done .pv__list svg{color:var(--gold)}
.pv__col--next .pv__list{color:var(--body)}
.pv__col--next .pv__list svg{color:var(--accent)}
/* "Después" trae menos texto por línea que "Hoy": con el mismo espaciado,
   la tarjeta clara se quedaba corta y dejaba un vacío al fondo mientras la
   de acento llegaba hasta abajo. Un gap mayor —el mismo valor que ya usa
   .pv__cols en escritorio— reparte ese aire entre los puntos en vez de
   dejarlo caído al final, sin tocar el contenido ni el layout.             */
@media (min-width:901px){
  .pv__col--next .pv__list{gap:26px}
}
.pv__note{margin:28px 0 0;font-size:13px;line-height:1.7;color:var(--body);max-width:74ch}
@media (min-width:901px){
  .pv__cols{grid-template-columns:repeat(2,1fr);gap:26px;margin-top:56px}
  .pv__col{padding:36px 34px 40px}
}

/* ============================= DATOS EN FILA =========================== */
.stats{display:grid;gap:1px;margin-top:38px;background:var(--line)}
.stat{background:var(--bg);padding:22px 0 24px}
.tsec--alt .stat{background:var(--bg-alt)}
.stat__num{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(27px,3.1vw,40px);line-height:1.1;letter-spacing:.005em;color:var(--ink);
}
.stat__label{margin-top:7px;font-size:13px;line-height:1.5;color:var(--body)}
@media (min-width:901px){
  .stats{grid-template-columns:repeat(4,1fr);margin-top:48px}
  .stats--3{grid-template-columns:repeat(3,1fr)}
  .stat{padding:26px 24px 28px}
  .stat:first-child{padding-left:0}
}

/* ================================ PLANO ================================ */
.plano__btn{
  display:block;width:100%;margin-top:36px;padding:0;
  border:0;background:var(--surface);cursor:zoom-in;
}
.plano__btn .ph{display:block;aspect-ratio:1.515;overflow:hidden}
/* Acercamiento mínimo al pasar por encima: anuncia que la imagen se puede
   ampliar antes de hacer clic. El contenedor recorta, así que el layout no
   se mueve.                                                                */
.plano__btn .ph>img{transition:transform 320ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .plano__btn:hover .ph__name{color:var(--accent-deep)}
  .plano__btn:hover .ph>img{transform:scale(1.02)}
}
.plano__hint{
  margin:14px 0 0;display:flex;gap:8px;align-items:center;
  font-size:13px;line-height:1.6;color:var(--body);
}
.plano__hint svg{flex:none;width:15px;height:15px;color:var(--accent)}

/* El plano abría y cerraba de golpe. Ahora entra en 200ms y sale en 140ms:
   al abrir el visitante decide, al cerrar ya decidió y quiere volver.
   El estado cerrado es [hidden], que es el que ya maneja el JS.
   transition-behavior:allow-discrete mantiene el display hasta que termina
   la salida; donde no esté soportado, el panel simplemente aparece.        */
.lb{
  position:fixed;inset:0;z-index:80;
  background:rgba(18,16,13,.95);padding:14px;
  opacity:1;
  transition:opacity var(--dur-pop) var(--ease-out),
             display var(--dur-pop) var(--ease-out) allow-discrete;
}
.lb[hidden]{
  display:none;opacity:0;
  transition:opacity 140ms var(--ease-out),
             display 140ms var(--ease-out) allow-discrete;
}
@starting-style{.lb{opacity:0}}

/* La imagen es el contenido del diálogo, no un desplegable anclado a un
   disparador: escala desde su centro. Desde .96, nunca desde 0.            */
.lb__scroll{
  width:100%;height:100%;overflow:auto;display:grid;place-items:center;
  touch-action:pinch-zoom;transform-origin:center;
  transform:scale(1);
  transition:transform var(--dur-pop) var(--ease-out);
}
.lb[hidden] .lb__scroll{transform:scale(.96);transition-duration:140ms}
@starting-style{.lb .lb__scroll{transform:scale(.96)}}
.lb__scroll img{max-width:100%;height:auto}
.lb__close{position:absolute;top:14px;right:14px;z-index:2}

/* -------- El plano se convierte en el plano, no aparece encima ---------- */
/* La miniatura y la imagen ampliada son la misma foto. Con view-transition
   el navegador las trata como un solo elemento que cambia de tamaño y de
   sitio, así que se ve "amplié esto" en vez de "se abrió un diálogo".
   El nombre lo pone y lo quita el JS, porque dos elementos no pueden
   compartir view-transition-name a la vez.                                 */
::view-transition-group(plano){
  animation-duration:300ms;
  animation-timing-function:var(--ease-out);
}
::view-transition-old(plano),
::view-transition-new(plano){
  animation-duration:300ms;
  animation-timing-function:var(--ease-out);
  /* La miniatura recorta y la ampliada entra completa: el ajuste de altura
     evita que la foto se estire durante el trayecto.                       */
  height:100%;object-fit:cover;
}

/* Mientras corre la transición, el fundido propio del lightbox se apaga: si
   no, se animaría dos veces la misma apertura y llegaría tarde.            */
:root[data-vt] .lb,
:root[data-vt] .lb__scroll{transition:none}

@media (prefers-reduced-motion:reduce){
  .lb{transition:opacity 150ms linear,display 150ms linear allow-discrete}
  .lb__scroll,.lb[hidden] .lb__scroll{transform:none;transition:none}
}

/* ========================== LOTES Y SUS PRECIOS ======================== */
.pay{margin-top:48px}
.pay__title{margin:0;font-size:21px;font-weight:500;line-height:1.25;color:var(--ink)}
.pay__list{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:pay}
.pay__list li{
  display:flex;gap:14px;padding:20px 22px;background:var(--bg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  font-size:15.5px;line-height:1.72;color:var(--body);
}
.pay__list li::before{
  counter-increment:pay;content:counter(pay,decimal-leading-zero);
  flex:none;padding-top:3px;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent-deep);
}
@media (min-width:901px){
  .pay__list{grid-template-columns:repeat(2,1fr);gap:16px 26px}
}

.lotes__sortbar{display:flex;flex-wrap:wrap;gap:8px;margin:44px 0 18px;align-items:center}
.lotes__sortbar span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.lotes__sortbar button{
  min-height:40px;padding:0 14px;background:var(--bg);
  border:1px solid var(--line-strong);color:var(--ink);
  font:inherit;font-size:13.5px;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease-soft),
             color var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
.lotes__sortbar button[data-active]{border-color:var(--accent);color:var(--accent-deep)}

.lotes__table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.lotes__table thead th{
  padding:14px 12px;text-align:left;border-bottom:1px solid var(--line-strong);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);white-space:nowrap;
}
.lotes__table tbody th,
.lotes__table tbody td{
  padding:15px 12px;text-align:left;border-bottom:1px solid var(--line);
  font-weight:400;color:var(--ink);
  transition:background var(--dur-hover) var(--ease-soft);
}
.lotes__table tbody th.lotes__lote{font-weight:600;white-space:nowrap}
.lotes__sort{
  display:inline-flex;align-items:center;gap:7px;
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  transition:color var(--dur-hover) var(--ease-soft);
}
.lotes__sort:hover{color:var(--accent-deep)}
/* La flecha gira en vez de cambiar de icono: el giro dice que es el mismo
   criterio del revés, no otro criterio distinto.                           */
.lotes__sort svg{
  width:9px;height:9px;opacity:.4;
  transition:opacity var(--dur-hover) var(--ease-soft),
             transform var(--dur-pop) var(--ease-out);
}
th[aria-sort="ascending"] .lotes__sort,
th[aria-sort="descending"] .lotes__sort{color:var(--accent-deep)}
th[aria-sort="ascending"] .lotes__sort svg{opacity:1}
th[aria-sort="descending"] .lotes__sort svg{opacity:1;transform:rotate(180deg)}
.lotes__cta a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;white-space:nowrap;color:var(--accent-deep);
  transition:color var(--dur-hover) var(--ease-soft);
}
.lotes__cta a:hover{color:var(--cta-hover)}
.lotes__cta a span[aria-hidden]{margin-left:5px}
.lotes__table.is-collapsed tr.is-extra{display:none}

.lotes__more{
  margin-top:24px;display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 26px;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease-soft),
             color var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
.lotes__more svg{width:11px;height:11px;transition:transform var(--dur-pop) var(--ease-out)}
.lotes__more.is-open svg{transform:rotate(180deg)}
.lotes__note{margin:26px 0 0;font-size:13px;line-height:1.7;color:var(--body);max-width:78ch}
.lotes .btn-pair{margin-top:38px}

@media (min-width:901px){
  .lotes__sortbar{display:none}
  .lotes__table thead th:nth-child(2),
  .lotes__table thead th:nth-child(3),
  .lotes__table thead th:nth-child(4),
  .lotes__table thead th:nth-child(5),
  .lotes__table tbody td:nth-child(2),
  .lotes__table tbody td:nth-child(3),
  .lotes__table tbody td:nth-child(4),
  .lotes__table tbody td:nth-child(5){text-align:right}
  .lotes__table thead th:nth-child(2) .lotes__sort,
  .lotes__table thead th:nth-child(3) .lotes__sort,
  .lotes__table thead th:nth-child(5) .lotes__sort{flex-direction:row-reverse}
  .lotes__table thead th:last-child,
  .lotes__table tbody td.lotes__cta{text-align:right}
  .lotes__table tbody th,
  .lotes__table tbody td{padding-left:12px;padding-right:12px}
  .lotes__table tbody th:first-child,
  .lotes__table thead th:first-child{padding-left:0}
  .lotes__table tbody td:last-child,
  .lotes__table thead th:last-child{padding-right:0}
}

/* Móvil y tablet: cada fila es una tarjeta apilada, sin scroll horizontal */
@media (max-width:900px){
  /* Los encabezados desaparecen: cada dato lleva su etiqueta con data-label
     y el orden se controla desde .lotes__sortbar. display:none evita que la
     fila de encabezados siga midiendo y ensanche la página. */
  .lotes__table thead{display:none}
  .lotes__table,
  .lotes__table tbody,
  .lotes__table tbody tr{display:block}
  .lotes__table tbody tr{
    background:var(--bg);margin-bottom:14px;padding:18px 20px 14px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  }
  .lotes__table tbody tr:hover th,
  .lotes__table tbody tr:hover td{background:transparent}
  .lotes__table tbody th.lotes__lote{
    display:block;padding:0 0 12px;border-bottom:1px solid var(--line);
    font-size:18px;
  }
  .lotes__table tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:9px 0;border-bottom:none;
  }
  .lotes__table tbody td::before{
    content:attr(data-label);flex:none;
    font-size:12px;letter-spacing:.05em;color:var(--body);
  }
  .lotes__table tbody td.lotes__cta{
    display:block;margin-top:8px;padding:0;border-top:1px solid var(--line);
  }
  .lotes__table tbody td.lotes__cta::before{content:none}
  .lotes__more{width:100%;justify-content:center}
}

/* ============================ CÓMO SE COMPARA ========================== */
/* Mismo patrón de dos tarjetas de .pv__cols: una neutra y una con el color
   de acento. Aquí la sección va sobre --bg, así que la tarjeta neutra usa
   --bg-alt (igual que .proc--light .proc__card) para seguir leyéndose. */
.cmp__cols{display:grid;gap:22px;margin-top:44px}
.cmp__card{
  display:flex;flex-direction:column;padding:30px 26px 34px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.cmp__card--otro{background:var(--bg-alt)}
/* La de Tlalli pesa más: fondo de acento y corte de esquina más profundo. */
.cmp__card--tlalli{
  background:var(--cta);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
}
/* El acento queda reservado a la tarjeta de Tlalli. */
.cmp__card--otro .eyebrow{color:var(--body)}
.cmp__card--tlalli .eyebrow{color:var(--gold)}
.cmp__card h3{
  margin:14px 0 0;font-size:21px;font-weight:500;
  line-height:1.25;letter-spacing:-.005em;
}
.cmp__card--otro h3{color:var(--ink)}
.cmp__card--tlalli h3{color:var(--cta-ink)}

.cmp__rows{margin:22px 0 0;display:grid}
.cmp__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;
}
.cmp__row dt{font-size:14px;line-height:1.5}
.cmp__row dd{margin:0;font-size:16px;font-weight:500;line-height:1.5;white-space:nowrap}
.cmp__card--otro .cmp__row{border-bottom:1px solid var(--line)}
.cmp__card--otro .cmp__row dt{color:var(--body)}
.cmp__card--otro .cmp__row dd{color:var(--ink)}
.cmp__card--tlalli .cmp__row{border-bottom:1px solid rgba(247,245,242,.20)}
.cmp__card--tlalli .cmp__row dt{color:rgba(247,245,242,.78)}
.cmp__card--tlalli .cmp__row dd{color:var(--cta-ink)}

/* Las dos últimas filas son el resultado: mismo tratamiento que .stat__num. */
.cmp__row--em{padding-top:16px}
.cmp__row--em dd{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(22px,2.4vw,28px);line-height:1.1;letter-spacing:.005em;
}
.cmp__row:last-child{border-bottom:none;padding-bottom:0}
.cmp__card--tlalli .cmp__row:last-child dd{color:var(--gold)}

.cmp__diff{margin-top:40px;padding-top:30px;border-top:1px solid var(--line-strong)}
.cmp__diff-line{
  /* En móvil la frase cae debajo del número: el row-gap le da aire. */
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  font-size:17px;line-height:1.4;color:var(--ink);
}
.cmp__diff-num{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(44px,6.4vw,72px);line-height:1.05;letter-spacing:.005em;
  color:var(--ink);
}
.cmp__diff-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--body);max-width:60ch}
.cmp__note{margin:30px 0 0;font-size:13px;line-height:1.7;color:var(--body);max-width:78ch}
.cmp .btn-pair{margin-top:34px}

@media (min-width:901px){
  /* En móvil manda el orden del HTML, que ya pone a Tlalli arriba. */
  .cmp__cols{grid-template-columns:repeat(2,1fr);gap:26px;margin-top:56px}
  .cmp__card--otro{order:1}
  .cmp__card--tlalli{order:2}
  .cmp__card{padding:36px 34px 40px}
  .cmp__diff{margin-top:52px}
}

/* =============================== RESPALDO ============================== */
/* Reutiliza .proc/.proc__card; solo cambia el fondo para mantener la
   alternancia claro/alterno de la página. */
.proc--light{background:var(--bg)}
.proc--light .proc__card{background:var(--bg-alt)}
.proc__intro{margin:26px 0 0;max-width:64ch}
.proc__sub{margin:48px 0 0;font-size:21px;font-weight:500;line-height:1.25;color:var(--ink)}
.proc--light .proc__grid{margin-top:26px}
.proc .btn-pair{margin-top:38px}
.proc__photo{margin-top:48px;aspect-ratio:16/9}
.proc__caption{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--body)}
@media (min-width:901px){
  .proc--light .proc__grid{grid-template-columns:repeat(2,1fr);margin-top:34px}
  .proc__photo{aspect-ratio:16/7}
}

/* ================================ ASESOR =============================== */
.asesor--alt{background:var(--bg-alt)}
.asesor--alt .asesor__photo{background:var(--surface)}
.asesor__video{margin-top:28px;width:100%;aspect-ratio:16/9;background:var(--surface)}
.asesor__video video{display:block;width:100%;height:100%;background:var(--bg-dark)}

/* ========================== PREGUNTAS FRECUENTES ======================= */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:21px 0;min-height:44px;cursor:pointer;list-style:none;
  font-size:17px;line-height:1.45;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;margin-top:5px;
  border-right:1.4px solid var(--accent-deep);border-bottom:1.4px solid var(--accent-deep);
  transform:rotate(45deg);
  transition:transform var(--dur-pop) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary{transition:color var(--dur-hover) var(--ease-soft)}
@media (hover:hover) and (pointer:fine){
  .faq summary:hover{color:var(--accent-deep)}
}

/* Abrir y cerrar la respuesta. ::details-content permite animar el alto de
   un <details> sin JS; donde no exista, la respuesta aparece de golpe como
   hasta ahora. La salida es más rápida que la entrada: al cerrar ya se
   terminó de leer.                                                         */
.faq details::details-content{
  block-size:0;overflow:hidden;opacity:0;
  transition:block-size 160ms var(--ease-out),
             opacity 110ms var(--ease-out),
             content-visibility 160ms allow-discrete;
}
.faq details[open]::details-content{
  block-size:auto;opacity:1;
  transition:block-size 240ms var(--ease-out),
             opacity 200ms var(--ease-out) 40ms,
             content-visibility 240ms allow-discrete;
}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
}
@media (prefers-reduced-motion:reduce){
  .faq details::details-content,
  .faq details[open]::details-content{transition:opacity 150ms linear}
  .faq summary::after{transition:none}
}
.faq__a{margin:0;padding:0 0 24px;max-width:70ch;font-size:15.5px;line-height:1.78;color:var(--body)}
@media (min-width:901px){
  .faq{margin-top:48px}
  .faq summary{font-size:19px;padding:24px 0}
}

/* ================================ CIERRE =============================== */
.cierre__ctas{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:44px}
.cierre__ctas .btn-pair{margin-top:0}
.cierre__ctas .btn{padding:18px 30px;font-size:16px}
.cierre__ctas .btn-sq{width:56px;font-size:17px}
.cierre__meta{margin:30px 0 0;font-size:13px;line-height:1.7;color:rgba(247,245,242,.52)}

/* ====================== BARRA STICKY DE WHATSAPP ======================= */
.wabar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,245,242,.94);border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform var(--dur-panel) var(--ease-out);
}
.wabar a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;
  background:var(--cta);color:var(--cta-ink);font-size:16px;font-weight:500;
  transition:background var(--dur-hover) var(--ease-soft),
             transform var(--dur-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .wabar a:hover{background:var(--cta-hover);color:var(--cta-ink)}
}
.wabar svg{width:19px;height:19px}
@media (max-width:900px){
  .wabar{display:block}
  .wabar.is-visible{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .wabar{transition:none}
}

/* ============================= PÁGINAS LEGALES ========================== */
/* Aviso de privacidad y Términos y condiciones. Reutilizan .tsec, .eyebrow,
   .lead y la paleta de siempre; solo se añade la tipografía de artículo
   largo que ninguna otra página necesitaba.                                */
.legal-hero{background:var(--bg-dark);padding:96px var(--gutter) 56px}
.legal-hero .eyebrow{color:var(--gold)}
.legal-hero h1{
  margin:20px 0 0;max-width:22ch;
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(32px,4.6vw,56px);line-height:1.12;letter-spacing:.005em;
  color:var(--bg);
}
.legal-hero .lead{margin:22px 0 0;max-width:60ch;color:rgba(247,245,242,.84)}
.legal-hero__meta{margin:28px 0 0;font-size:13px;color:rgba(247,245,242,.56)}
@media (min-width:901px){
  .legal-hero{padding:132px var(--gutter) 72px}
}

.legal-toc{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:1px;max-width:64ch;counter-reset:toc}
.legal-toc a{
  display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink);
  transition:color var(--dur-hover) var(--ease-soft);
}
.legal-toc li:first-child a{border-top:1px solid var(--line)}
.legal-toc a:hover{color:var(--accent-deep)}

.legal{max-width:74ch}
.legal section{padding:40px 0;border-top:1px solid var(--line)}
.legal section:first-of-type{border-top:none;padding-top:0}
.legal h2{
  margin:0;
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(23px,2.6vw,31px);line-height:1.22;color:var(--ink);
  scroll-margin-top:28px;
}
.legal h3{margin:26px 0 0;font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.legal p{margin:16px 0 0;font-size:15.5px;line-height:1.78;color:var(--body)}
.legal ul,.legal ol{margin:16px 0 0;padding-left:1.25em;display:grid;gap:9px;font-size:15.5px;line-height:1.7;color:var(--body)}
.legal li::marker{color:var(--accent-deep)}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--cta-hover)}
.legal__note{margin:18px 0 0;padding:16px 18px;background:var(--bg-alt);font-size:13.5px;line-height:1.7;color:var(--body)}
.legal__pending{color:var(--accent-deep);font-weight:600}
.legal__table-wrap{margin:18px 0 0;overflow-x:auto}
.legal table{width:100%;min-width:420px;border-collapse:collapse;font-size:13.5px}
.legal th,.legal td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-weight:600;color:var(--ink);background:var(--bg-alt)}
.legal__cta{margin-top:44px}

@media (min-width:901px){
  .legal section{padding:52px 0}
  .legal h2{font-size:clamp(25px,2.2vw,32px)}
}