/* Sistema de diseño Home Choice v2 — fuente única de las 5 plantillas.
   Deriva de docs/sistema-diseno-v2.md y del manual de marca. */
/*  */

@font-face{font-family:Newsreader;src:url('fonts/newsreader-latin-variable.woff2') format('woff2-variations');font-weight:200 800;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* manual-de-marca §5.2 / §5.3 — dos territorios, dorado idéntico en ambos */
  --black:#141210;      /* base 60% · BIENES RAÍCES */
  --graphite:#3A342C;   /* secundario 30% · BIENES RAÍCES */
  --cream:#F1EDE4;      /* base 60% · LEGAL */
  --slate:#2B2822;      /* secundario 30% · LEGAL */
  /* dorado v3 — decisión de Adrián 2026-07-27 (ronda 2): el champagne plano #BFAB69 de la
     ronda anterior corrigió el "mostaza berreta" de v1 (#C9A227) pero se pasó de frenada —
     "no se nota dorado, demasiado plano/lavado". v3 sube saturación/calidez (H43° S55% L55%,
     dentro del rango H42–50° del manual §5.5) manteniendo el mismo piso AAA de contraste
     (8.23:1 sobre --black, supera el 7.7:1 del manual §5.4) y agrega RELIEVE METÁLICO solo
     en .btn vía gradiente vertical sutil (--gold-top → --gold) + borde biselado reluciente
     (--gold-edge, inset highlight) — NO el sheen diagonal de 3 paradas de v1, que queda
     eliminado. Los demás acentos (.link, barra logo, numeración, thumb/track, dots) siguen
     planos con var(--gold), sin borde reluciente — eso es exclusivo de los botones. */
  --gold:#CBA84E;         /* acento 10% · ambos — dorado cálido (H43 S55 L55) */
  --gold-hover:#AD8B33;   /* hover — mismo hue, más oscuro (L44) */
  --gold-top:#D3B569;     /* parada superior del gradiente metálico de .btn (L62) */
  --gold-edge:#F0E5C7;    /* filo/highlight reluciente de .btn — inset 1px superior (L86) */
  /*  */
  --ink:#1A1712;        /* texto sobre claro */
  --paper:#F5F1E8;      /* texto sobre oscuro */
  --line-l:rgba(20,18,16,.14);
  --line-d:rgba(241,237,228,.16);
  --r:.5rem;            /* manual §5.7 */
  /* rampa PITI — hue 46°, validada sobre slate: 3.33/5.57/7.67/9.38 : 1 */
  --p1:#91751C; --p2:#C09B25; --p3:#DBB847; --p4:#E6CD7F;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:'General Sans',system-ui,sans-serif;font-size:18px;line-height:29px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.display{font-family:Newsreader;font-weight:600;font-size:68px;line-height:74px;letter-spacing:-.02em}
.h1{font-family:Newsreader;font-weight:600;font-size:55px;line-height:61px;letter-spacing:-.02em}
.h2{font-family:Newsreader;font-weight:600;font-size:44px;line-height:51px;letter-spacing:-.02em}
.h3{font-family:Newsreader;font-weight:500;font-size:35px;line-height:43px}
.h4{font-weight:700;font-size:28px;line-height:36px}
.lead{font-size:22px;line-height:34px}
.small{font-size:14.5px;line-height:21px;font-weight:500}
.upper{text-transform:uppercase;letter-spacing:.08em}
.tab{font-variant-numeric:tabular-nums}
.medida{max-width:620px}
.dim{color:rgba(20,18,16,.70)}
.dim-d{color:rgba(241,237,228,.72)}

.eyebrow{font-size:14.5px;line-height:21px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:12px;margin-bottom:24px}
.eyebrow::before{content:'';width:32px;height:1px;background:var(--gold);flex:none}

.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-block;background:linear-gradient(180deg,var(--gold-top) 0%,var(--gold) 100%);box-shadow:inset 0 1px 0 var(--gold-edge),inset 0 -1px 0 rgba(20,18,16,.28);color:var(--black);padding:17px 32px;font-weight:700;font-size:18px;text-decoration:none;border-radius:var(--r);transition:background .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}
.btn:hover{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-hover) 100%);box-shadow:inset 0 1px 0 var(--gold-edge),inset 0 -1px 0 rgba(20,18,16,.32),0 0 0 1px rgba(203,168,78,.4),0 6px 20px -4px rgba(203,168,78,.35)}
.btn-ghost{display:inline-block;color:inherit;text-decoration:none;font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:4px}
.link{text-decoration:none;font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:2px}
/*  */

/* ---------- 01 HEADER ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
/* header sólido al hacer scroll: antes subía a rgba(43,40,34) (--slate) que es MÁS CLARO que
   --black — de ahí el "grafito claro" que Adrián marcó. Ahora va de --black a un tono aún
   más oscuro, sin subir nunca de luminosidad (2026-07-27). */
.hd.solid{background:linear-gradient(135deg,rgba(20,18,16,.94) 0%,rgba(14,12,10,.94) 100%);backdrop-filter:blur(8px);border-bottom-color:var(--line-d)}
.hd-in{max-width:1280px;margin:0 auto;padding:20px 48px;display:flex;align-items:center;gap:48px;color:var(--paper)}
.mark{font-family:Newsreader;font-weight:600;font-size:26px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;border-left:2px solid var(--gold);padding-left:16px;line-height:1.12}
.mark small{display:block;font-family:'General Sans';font-weight:500;font-size:14px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.nav{display:flex;gap:32px;margin-left:auto;font-size:14.5px;font-weight:500;letter-spacing:.02em}
.nav a{text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a.on{border-bottom-color:var(--gold)}
.lang{display:flex;gap:8px;font-size:14.5px;font-weight:500}
.lang a{text-decoration:none;opacity:.55}
.lang a.on{opacity:1;color:var(--gold)}

/* ---------- 02 HERO · full-bleed video scroll-scrub ----------
   
   Reemplaza el layout split 50/50 por un hero full-bleed: sección de 300vh
   con un contenedor sticky de 100vh adentro. El scroll mapea a
   video.currentTime (JS al pie de la sección hero en index.html — vanilla,
   sin GSAP). El <video> se inyecta por JS solo si viewport>900px y sin
   prefers-reduced-motion; el <img id="heroPoster"> queda siempre como
   fallback/poster real en el DOM, nunca se retira. Mecánica validada por
   Adrián en Desktop/Tony/Hero-Video/prototipo/index.html (2026-07-27).
   Territorio Bienes Raíces del manual §8.1 — fondo negro, dorado solo en
   .btn/.gold, sin texto blanco sobre dorado (§5.4). */
.hero{position:relative;background:var(--black);color:var(--paper);height:300vh}
/* 
   RONDA 2 del fix de header/cred (2026-07-27, wide-AND-short real ~2000x1000
   de Adrián — la ronda 1 solo probó 16:9 ALTO y no alcanzaba). Dos cambios
   de fondo:
   1) `justify-content:center` desbordaba el contenido HACIA EL HEADER cuando
      no entraba (mitad arriba/mitad abajo). Ahora `flex-start`: el contenido
      arranca SIEMPRE justo debajo del padding-top (despeje de header FIJO,
      nunca depende de cuánto mida el contenido) — el overflow, si lo hay,
      cae solo hacia abajo (contra .cred), nunca contra el header.
   2) Con flex-start, el overflow hacia abajo SÍ podía tapar el cta-row con
      .cred (bug 2, cred z-index:3 > hero-txt z-index:2). Se ataca por los
      dos lados: padding-top/bottom más ajustados a las medidas reales
      (header≈104px, cred≈62px) y el h1 con clamp() en vh (ver `.hero-txt
      h1` abajo) para que el bloque completo entre incluso a 850px de alto. */
/* 
   RONDA 3 refinamiento (2026-07-27, pedido Adrián): sin el eyebrow (removido del
   hero, redundante con el logo del header) y con el h1 más grande, el bloque
   quedaba pegado arriba con un hueco enorme hacia .cred. padding-top pasa de
   fijo 118px a clamp(118px,14vh,210px) — el PISO 118px es EXACTO al de la
   ronda 2 (misma garantía: a 850px de alto o menos, clamp() usa el mínimo y
   el comportamiento es IDÉNTICO al de antes, cero riesgo de reabrir el bug de
   header). Por encima de ~843px de alto el padding crece con el viewport y
   empuja el bloque hacia abajo (efecto "centrado" sin perder la garantía
   estructural de flex-start: el contenido sigue sin poder crecer HACIA el
   header, solo hacia .cred, igual que ronda 2). */
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(118px,14vh,210px) 0 80px}
.hero-frame{position:absolute;inset:0;overflow:hidden}
.hero-media-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
/* Scrim con banda superior PERMANENTE (independiente de .hd.solid): antes el
   contraste bajo el header dependía 100% del toggle JS (scrollY>80), que
   con un hero de 300vh se sentía como un salto brusco al activarse. Ahora
   el header siempre tiene una zona oscurecida detrás desde scroll 0 — el
   toggle de .hd.solid sigue existiendo pero ya no es la única fuente de
   contraste, así que el cambio se percibe suave, no un pop (bug 3). */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,0) 170px),linear-gradient(90deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.48) 40%,rgba(20,18,16,.12) 66%,rgba(20,18,16,0) 100%)}
.hero-txt{position:relative;z-index:2;padding:0 64px 0 48px;max-width:640px;width:100%}
/* 
   h1 del hero con clamp() en vh — RONDA 3 (2026-07-27): tope subido de 68/74px
   a 80/86px y piso de 40/46px a 46/52px. Sin el eyebrow (removido, redundante
   con el logo del header) sobraba altura y el h1 se sentía chico frente al
   resto del sitio (`.display` en otras secciones ya usa 68/74 como base). El
   factor vh también sube (6.5→8 / 7→8.6) para que gane tamaño antes en
   viewports medios, no solo en los muy altos. Sigue sin tocar .cred: la
   garantía de piso viene de `.hero-sticky` (arriba), no de este clamp.
   `min(vh,vw)` agregado tras QA en matriz de celulares angostos-y-altos: en
   mobile el h1 SOLO depende de vh, sin techo de ancho — a 360×960/320×1000
   (aspect ratio Android real, no un caso de laboratorio) el h1 desborda su
   propio contenedor (h1.scrollWidth > clientWidth, palabras cortadas,
   confirmado con Playwright: "Encuentra"/"finánciala" recortadas). El término
   vw solo actúa como techo en viewports angostos — en desktop (≥1024px de
   ancho) es siempre mayor que el término vh y no cambia nada (verificado en
   los 5 viewports desktop del brief, valores idénticos a antes). */
.hero-txt h1{font-size:clamp(46px,min(8vh,17vw),80px);line-height:clamp(52px,min(8.6vh,18vw),86px)}
.hero-txt .lead{margin-top:16px}
.cta-row{display:flex;align-items:center;gap:32px;margin-top:32px;flex-wrap:wrap}
.cred{position:absolute;left:0;right:0;bottom:0;padding:20px 48px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:32px;background:rgba(20,18,16,.80);backdrop-filter:blur(3px);z-index:3}
.cred .gold{color:var(--gold)}

/* ---------- secciones ---------- */
/* Superficies de sección: SOLO crema, negro e imagen.
   El grafito queda como secundario 30% (cards, paneles), nunca como fondo de sección.
   Decisión de Adrián 2026-07-26, coherente con manual §5.2/§5.3. */
.sec{padding:160px 0}
.s-cream{background:var(--cream);color:var(--ink)}
/*  */
/* antes subía de --black (L7%) a --ink (L9%) y --slate (L15%) — el gradiente terminaba
   MÁS CLARO que como empezaba, de ahí el "grafito claro" que Adrián marcó como feo. Ahora
   va de --black a un tono aún más oscuro (#0E0C0A): profundidad sutil, nunca sube de tono
   (2026-07-27). */
.s-black{background:linear-gradient(135deg,var(--black) 0%,#0E0C0A 100%);color:var(--paper)}
.s-black .eyebrow{color:rgba(241,237,228,.75)}

/* ---------- 04 PORTFOLIO ---------- */
/*  */
/* display:block obligatorio: <a> es inline por default y sin esto, con sus hijos
   (img/.bleed-data) en position:absolute, la card queda sin contenido en flujo →
   colapsa a 0x0 en el punto donde cae en el documento y su contenido absoluto
   termina montado sobre la sección anterior (bug confirmado por Adrián en vivo,
   desktop, sobre el título de #portafolio). */
.bleed{display:block;position:relative;height:80vh;min-height:560px;overflow:hidden}
.bleed img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.bleed::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.70) 20%,rgba(20,18,16,.18) 48%,rgba(20,18,16,0) 70%)}
.bleed-data{position:absolute;left:0;right:0;bottom:0;padding:48px;z-index:2;color:var(--paper);display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px;max-width:1280px;margin:0 auto}
.precio{font-family:Newsreader;font-weight:600;font-size:55px;line-height:61px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ficha-inline{display:flex;gap:48px}
.ficha-inline dt{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(241,237,228,.62);margin-bottom:4px}
.ficha-inline dd{font-size:22px;font-variant-numeric:tabular-nums}
.sec2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.sec2 figure:nth-child(2){margin-top:96px}
.r43{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:var(--r)}
.cap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-l)}


/* índice editorial de propiedades — sin foto, para no exponer material flojo en grilla */
.idx{display:grid}
.ix{display:grid;grid-template-columns:230px 1fr 260px 140px;gap:32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line-l);text-decoration:none;transition:padding-left .25s cubic-bezier(.4,0,.2,1),background .25s}
.ix:hover{padding-left:16px;background:rgba(20,18,16,.03)}
.ix .zona{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55)}
.ix .tipo{font-family:Newsreader;font-weight:500;font-size:28px;line-height:36px}
.ix .specs{font-size:14.5px;color:rgba(20,18,16,.55)}
.ix .pr{font-family:Newsreader;font-weight:600;font-size:28px;line-height:36px;text-align:right}

/* acordeón del índice — activado por JS; sin JS, .ix sigue enlazando directo a la ficha */
.ix-toggle{display:grid;grid-template-columns:230px 1fr 260px 140px 24px;gap:32px;align-items:baseline;width:100%;padding:26px 0;border:0;border-bottom:1px solid var(--line-l);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:padding-left .25s cubic-bezier(.4,0,.2,1),background .25s}
.ix-toggle:hover{padding-left:16px;background:rgba(20,18,16,.03)}
.ix-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ix-toggle .zona{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55)}
.ix-toggle .tipo{font-family:Newsreader;font-weight:500;font-size:28px;line-height:36px}
.ix-toggle .specs{font-size:14.5px;color:rgba(20,18,16,.55)}
.ix-toggle .pr{font-family:Newsreader;font-weight:600;font-size:28px;line-height:36px;text-align:right}
.ix-toggle .car{font-size:22px;line-height:1;color:var(--gold);text-align:right;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.ix-toggle[aria-expanded="true"] .car{transform:rotate(45deg)}
.ix-panel{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.ix-panel .item{padding:32px 0 40px;border-bottom:0}
/*  */

.bleed-data.alt{grid-template-columns:auto 1fr;direction:rtl}
.bleed-data.alt>*{direction:ltr}
.bleed-data.alt .ficha-inline{justify-content:flex-start}

/* ---------- 04b STICKY STACK · 3 destacadas del portafolio ---------- */
/*  */
/* feature nueva 2026-07-27 (pedido explícito, no bugfix). Namespace propio .stk-*:
   NO reutiliza .bleed/.bleed-data porque esas cargan un @media(max-width:768px) que
   aplana el bleed a bloque estático — acá el efecto inmersivo también corre en mobile.
   position:sticky es CSS puro y universal: sin soporte, cae a static → cards apiladas
   y navegables sin más (fallback obligatorio ya cubierto sin JS). El darken+scale de la
   card tapada es JS progresivo (ver script dedicado en index.html), desactivado bajo
   prefers-reduced-motion más abajo. Territorio bienes raíces (manual §8.1): fondo oscuro,
   dorado solo en .btn (texto negro, ya resuelto por .btn base — no se toca ese contraste). */
.stk{position:relative}
.stk-item{display:block;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;text-decoration:none}
.stk-item:nth-child(1){z-index:1}
.stk-item:nth-child(2){z-index:2}
.stk-item:nth-child(3){z-index:3}
.stk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stk-dim{position:absolute;inset:0;background:var(--black);opacity:0;z-index:1;pointer-events:none}
/* fix 3/4 (Adrián, piloto v2 2026-07-27): datos arriba + oscurecido invertido para
   no taparlos con la card siguiente; header solid clearance medido con Playwright
   (74px mobile / 125px tablet 768 / 104px desktop) + margen.
    */
.stk-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.66) 24%,rgba(20,18,16,.14) 52%,rgba(20,18,16,0) 72%);z-index:1;pointer-events:none}
.stk-data{position:absolute;left:0;right:0;top:0;padding:100px 20px 32px;z-index:2;color:var(--paper)}
.stk-cta{margin-top:20px}
.stk-cta .btn{margin-top:20px;display:inline-block}
@media (min-width:768px){
  .stk-data{padding:150px 48px 48px;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:start;gap:48px}
  .stk-cta{margin-top:0;text-align:right}
  .stk-cta .ficha-inline{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .stk-item{transform:none!important}
  .stk-dim{opacity:0!important}
}

/* ---------- 05 DIFERENCIAL · doble licencia ---------- */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:64px;border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden}
.dual>div{padding:48px}
.dual>div:first-child{border-right:1px solid var(--line-d)}
.dual .n{font-family:Newsreader;font-size:35px;line-height:43px;color:var(--gold);font-variant-numeric:tabular-nums}
.dual .h4{margin-top:8px}
.dual p{margin-top:16px}
/* gradiente de marca "amanecer dorado" — manual §5.8, endpoint recalibrado al dorado fino
   champagne (2026-07-27, ver :root). El texto sobre la zona dorada DEBE ir en tinta (AAA),
   nunca en dorado ni blanco (regla dura §5.4). */
.dual-note{margin-top:32px;padding:28px 48px;background:linear-gradient(135deg,#141210 0%,#726641 55%,var(--gold) 100%);border-radius:var(--r);display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.dual-note b{font-weight:700;color:var(--paper);white-space:nowrap}
.dual-note .txt{flex:1;min-width:280px;color:rgba(241,237,228,.86)}
.dual-note .lic{color:var(--black);font-weight:700}

/* ---------- 06 CALCULADORA · territorio LEGAL ---------- */
.calc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:96px;align-items:stretch;margin-top:64px}
.calc-grid>div:first-child{display:flex;flex-direction:column;justify-content:space-between}
.campos{display:grid;grid-template-columns:1fr}
.campo{border-bottom:1px solid var(--line-l);padding:20px 0 14px}
.campo:first-child{padding-top:0}
.campo dt{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55);margin-bottom:6px}
.campo dd{font-size:22px;font-variant-numeric:tabular-nums}
.panel{background:var(--slate);color:var(--paper);padding:48px;border-radius:var(--r)}
.resultado{font-family:Newsreader;font-weight:600;font-size:82px;line-height:88px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stack{display:flex;height:56px;width:100%;gap:2px;margin:48px 0 32px}
.stack i{display:block;height:100%;border-radius:2px}
.lg-row{display:grid;grid-template-columns:14px 1fr auto auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line-d)}
.lg-row:last-child{border-bottom:1px solid var(--line-d)}
.dot{width:14px;height:14px;border-radius:2px}
.lg-row .val{font-variant-numeric:tabular-nums;font-weight:500}
.lg-row .pct{font-variant-numeric:tabular-nums;color:rgba(241,237,228,.62);font-size:14.5px;min-width:52px;text-align:right}
.disclaimer{font-size:14.5px;line-height:21px;color:rgba(20,18,16,.55);margin-top:32px}


/* ---------- 06 CALCULADORA · superficie clara, sin panel oscuro ---------- */
/* rampa secuencial sobre CREMA (hue 46°, luminosidad monotónica creciente) */
:root{--q1:#493B0E;--q2:#7C6418;--q3:#B39123;--q4:#DCB94C}
.calc2{display:grid;grid-template-columns:1fr 1.1fr;gap:96px;align-items:start;margin-top:64px}
.ctrls{display:grid}
.ctrl{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:22px 0 18px;border-bottom:1px solid var(--line-l);cursor:pointer}
.ctrl:first-child{padding-top:0}
.ctrl .lb{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55)}
.ctrl .vv{font-size:22px;font-variant-numeric:tabular-nums;text-align:right;font-weight:500}
.ctrl input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(20,18,16,.18);margin-top:14px;border-radius:2px}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:grab;border:2px solid var(--cream);box-shadow:0 0 0 1px rgba(20,18,16,.25)}
.ctrl input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:grab;border:2px solid var(--cream)}
.ctrl input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.out .resultado{font-family:Newsreader;font-weight:600;font-size:82px;line-height:88px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.out .stack{display:flex;height:52px;width:100%;gap:2px;margin:40px 0 8px}
.out .stack i{display:block;height:100%;border-radius:2px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.lg{margin-top:24px}
.lg-row{display:grid;grid-template-columns:14px 1fr auto 62px;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line-l)}
.lg-row:last-child{border-bottom:1px solid var(--line-l)}
.dot{width:14px;height:14px;border-radius:2px}
.lg-row .val{font-variant-numeric:tabular-nums;font-weight:500}
.lg-row .pct{font-variant-numeric:tabular-nums;color:rgba(20,18,16,.55);font-size:14.5px;text-align:right}

:root{--q5:#EBDBA8}
.ctrl .hint{grid-column:1/-1;font-size:14.5px;line-height:21px;color:rgba(20,18,16,.55);margin-top:10px}
.adv{margin-top:24px;border-top:1px solid var(--line-l)}
.adv summary{cursor:pointer;padding:22px 0;font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55);list-style:none;display:flex;align-items:center;gap:12px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::after{content:'+';margin-left:auto;font-size:22px;color:var(--gold)}
.adv[open] summary::after{content:'–'}
.adv summary:hover{color:var(--ink)}
.adv-in{padding-bottom:8px}
.adv .hint{font-size:14.5px;line-height:21px;color:rgba(20,18,16,.55);padding-top:20px}
.lg-row[data-row="pmi"].off,.stack i.off{display:none}
.tagpmi{font-size:14.5px;color:rgba(20,18,16,.55);margin-left:8px}
.aviso-pmi{margin-top:24px;padding:16px 20px;border-left:2px solid var(--gold);background:rgba(191,171,105,.10);font-size:18px;line-height:29px;border-radius:0 var(--r) var(--r) 0}
.aviso-pmi.off{display:none}

.seg-plazo{border:0;padding:22px 0 18px;border-bottom:1px solid var(--line-l);display:block}
.seg-plazo .lb{display:block;margin-bottom:14px}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sg{font-family:inherit;font-size:18px;font-weight:500;padding:13px 0;background:transparent;color:var(--ink);border:1px solid var(--line-l);border-radius:var(--r);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.sg:hover{border-color:rgba(20,18,16,.35)}
.sg.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.sg:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.supuestos{margin-top:32px;padding:24px 28px;border:1px solid var(--line-l);border-radius:var(--r);background:rgba(20,18,16,.025)}
.sup-t{color:rgba(20,18,16,.55);margin-bottom:16px}
.sup-l{display:grid;gap:0}
.sup-l>div{display:flex;justify-content:space-between;gap:24px;padding:9px 0;border-bottom:1px solid var(--line-l)}
.sup-l>div:last-child{border-bottom:0}
.sup-l dt{font-size:18px;color:rgba(20,18,16,.70)}
.sup-l dd{font-size:18px;font-weight:500}
.sup-f{font-size:14.5px;line-height:21px;color:rgba(20,18,16,.55);margin-top:16px;padding-top:16px;border-top:1px solid var(--line-l)}
.sup-f b{font-weight:500;color:var(--ink)}
/* ---------- 07 PROCESO ---------- */
/*  */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px}
.paso{padding:0 48px 0 0;position:relative}
.paso+.paso{padding-left:48px;border-left:1px solid var(--line-d)}
.paso .n{font-family:Newsreader;font-size:55px;line-height:61px;color:var(--gold);font-variant-numeric:tabular-nums}
.paso .h4{margin-top:12px}
.paso p{margin-top:12px}
/* .pasos es grid de 3 col fija sin breakpoint entre 767px (donde .pasos ya colapsa a
   1fr, ver @media max-width:767px más abajo) y ~1080px → a 768px exacto desborda
   ~43px (medido con Playwright). Se agrega 2 col en el rango 768-900; por debajo de
   767 sigue ganando la regla existente que ya la deja en 1fr. */
@media (max-width:900px){
  .pasos{grid-template-columns:repeat(2,1fr);gap:32px 40px}
  .paso{padding:0}
  .paso+.paso{padding-left:0;border-left:0}
}

/*  */
/* ---------- 07b FOTO DE FONDO EN SECCIÓN + TIMELINE DE PROCESO CON ÍCONOS ----------
   agregado piloto v2 — vida visual en financiamiento.html / vender.html (fotos ADN
   aprobadas + timeline con íconos). Namespace .ptl-* propio, no reutiliza .tl-*
   (nosotros.html) para no tocar el timeline de otra página. */
.sec-foto{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.sec-foto::before{content:'';position:absolute;inset:0;background:rgba(9,9,11,.90);z-index:0}
.sec-foto>.wrap{position:relative;z-index:1}

.proceso-tl{margin-top:64px}
.ptl-axis{height:1px;background:var(--line-d)}
.ptl-items{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ptl-item{position:relative;padding-top:28px;padding-right:8px}
.ptl-item::before{content:'';position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.ptl-ico{width:26px;height:26px;color:var(--gold);display:block;margin-bottom:16px}
.ptl-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ptl-num{display:block;font-family:Newsreader;font-weight:600;font-size:22px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:12px}
.ptl-item .h4{margin-top:0}
.ptl-item p{margin-top:10px}
@media (max-width:900px){
  .ptl-axis{display:none}
  .ptl-items{grid-template-columns:1fr;gap:0}
  .ptl-item{padding:28px 0 28px 28px;border-left:1px solid var(--line-d)}
  .ptl-item:first-child{padding-top:0}
  .ptl-item:first-child::before{top:4px}
  .ptl-item:not(:first-child)::before{top:32px}
  .ptl-item::before{left:-5px}
}

/* ---------- 08 PROPIETARIOS FUERA EE.UU. ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;margin-top:64px}
.checks{display:grid;gap:0}
.check{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line-l);align-items:start}
.check:last-child{border-bottom:1px solid var(--line-l)}
.check .k{width:8px;height:8px;background:var(--gold);margin-top:11px;flex:none}

/* ---------- 09 TONY ---------- */
.tony{display:grid;grid-template-columns:1fr 1.15fr;min-height:640px}
.tony-media{position:relative;background:#1F1B17;overflow:hidden}
.tony-media img{width:100%;height:100%;object-fit:cover}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:48px;border:1px dashed rgba(241,237,228,.35);color:rgba(241,237,228,.75)}

.tony-media .pie{position:absolute;left:0;right:0;bottom:0;padding:24px 32px;background:linear-gradient(0deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,0) 100%);z-index:2}
.tony-media .nom{font-family:Newsreader;font-weight:600;font-size:28px;line-height:36px;color:var(--paper)}
.tony-media .rol{font-size:14.5px;line-height:21px;color:rgba(241,237,228,.72);margin-top:2px}
.tony-txt{padding:120px 48px 120px 96px;display:flex;flex-direction:column;justify-content:center}
.timeline{margin-top:64px}
.tl-axis{height:1px;background:var(--line-d);position:relative}
.tl-fill{position:absolute;left:0;top:0;height:1px;background:var(--gold);width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1)}
.tl-items{display:grid;grid-template-columns:repeat(4,1fr)}
.tl-item{padding-top:28px;position:relative;padding-right:24px}
.tl-item::before{content:'';position:absolute;top:-4px;left:0;width:9px;height:9px;background:var(--gold)}
.tl-year{font-family:Newsreader;font-weight:600;font-size:28px;line-height:36px;font-variant-numeric:tabular-nums}
.tl-txt{font-size:14.5px;line-height:21px;color:rgba(241,237,228,.72);margin-top:6px}

/* ---------- 10 BLOG ---------- */
.notas{margin-top:64px}
.nota{display:grid;grid-template-columns:240px 1fr 110px;gap:48px;align-items:baseline;padding:32px 0;border-top:1px solid var(--line-l);text-decoration:none;transition:padding-left .25s cubic-bezier(.4,0,.2,1)}
.nota:last-of-type{border-bottom:1px solid var(--line-l)}
.nota:hover{padding-left:16px}
.nota .cat{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:#8A6E1F}
.nota .fecha{font-size:14.5px;color:rgba(20,18,16,.55);font-variant-numeric:tabular-nums;text-align:right}

/* ---------- 11 CIERRE ---------- */
.cierre{background:var(--black);color:var(--paper);padding:160px 0}
.cierre-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:96px;align-items:end;margin-top:48px}
.contacto{display:grid;gap:0}
.cto{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--line-d);align-items:baseline}
.cto:last-child{border-bottom:1px solid var(--line-d)}
.cto dt{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(241,237,228,.62)}

/* ---------- 12 FOOTER ---------- */
.ft{background:var(--black);color:var(--paper);padding:72px 0 48px;border-top:2px solid var(--gold)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.ft h5{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(241,237,228,.62);margin-bottom:20px}
.ft ul{list-style:none;display:grid;gap:12px}
.ft a{text-decoration:none;font-size:18px;border-bottom:1px solid transparent;transition:border-color .2s}
.ft a:hover{border-bottom-color:var(--gold)}
.aviso{margin-top:64px;padding-top:32px;border-top:1px solid var(--line-d);font-size:14.5px;line-height:21px;color:rgba(241,237,228,.62);display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}

/* motion */
/* MOTION — regla dura: el contenido NUNCA depende de que una animación dispare.
   El estado oculto solo existe si el JS ya corrió (html.js). Sin JS, sin observer
   o si algo falla, todo queda visible. */
/* 
   RONDA 3 (2026-07-27) — root cause del reveal del hero (contenido ya visible
   al cargar, arriba, pineado): `.rv{transition:opacity .6s...}` es incondicional,
   así que también animaba la ENTRADA al estado oculto (1→0 al agregar html.js),
   no solo la salida (0→1 al agregar .in). Si `.in` llegaba mientras esa
   ocultación todavía estaba a mitad de camino, el reveal arrancaba desde ese
   valor intermedio en vez de 0 — confirmado con muestreo de getComputedStyle
   por rAF en +20 corridas (valores de arranque de 0.40–0.46 en vez de 0, un
   "dip" en lugar de reveal limpio). `transition:none` en el estado oculto lo
   vuelve INSTANTÁNEO (nunca se ve, es interno) — el `:not(.in)` es OBLIGATORIO:
   sin él, `html.js .rv` (más específico que `.rv`) le sigue ganando la guerra
   de especificidad a `.rv{transition:...}` INCLUSO con `.in` puesto, matando
   también la transición del reveal (bug propio, cazado con el mismo muestreo
   por rAF: opacity saltaba de 0 a 1 en <5ms). Con `:not(.in)` el override de
   transición deja de aplicar en cuanto `.in` llega, y `.rv{transition:...}`
   vuelve a mandar — confirmado reveal completo + escalonado (d1<d2<d3) en
   corridas repetidas. No afecta a ninguna sección de abajo (su "ocultar" ya
   termina de sobra antes de que el usuario llegue con scroll). */
html.js .rv:not(.in){opacity:0;transform:translateY(18px);transition:none}
.rv{transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.rv.in{opacity:1!important;transform:none!important}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
/* reveal de imagen: escala + opacidad, nunca clip que la deje en 0% visible */
html.js .clip:not(.in){opacity:0;transform:scale(1.04);transition:none}
.clip{transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.4,0,.2,1)}
.clip.in{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .clip,.rv,.clip{opacity:1!important;transform:none!important;transition:none!important}
  .tl-fill{transition:none}
}
.pnote{background:var(--slate);color:rgba(241,237,228,.75);padding:14px 48px;font-size:14.5px;line-height:21px;position:relative;z-index:60}
.pnote b{color:var(--gold);font-weight:500}

/* ============================================================
   PLANTILLAS INTERIORES — listado, detalle, servicio, contacto
   ============================================================ */

/* hero de página interior — territorio bienes raíces, compacto */
.ph-hero{background-color:var(--black);color:var(--paper);padding:180px 0 96px;position:relative}
.ph-hero .lead{color:rgba(241,237,228,.72);margin-top:24px}
.ph-hero .eyebrow{color:rgba(241,237,228,.75)}
.crumbs{font-size:14.5px;font-weight:500;color:rgba(241,237,228,.55);margin-bottom:32px}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--gold)}
.crumbs span{margin:0 10px;opacity:.5}

/*  */
/* stats destacados en hero de página interior (nosotros) — mismo lenguaje tipográfico
   que .paso/.pv/.dual (Newsreader + var(--gold) + .tab tabular-nums), namespace propio.
   Dorado sobre negro (.ph-hero) = territorio Bienes Raíces, 7.7:1 AAA, cumple manual §5.4. */
.stats-tl{display:flex;flex-wrap:wrap;gap:40px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(241,237,228,.18)}
.stats-tl .stat-n{font-family:Newsreader;font-weight:600;font-size:48px;line-height:1;color:var(--gold)}
.stats-tl .stat-l{margin-top:8px;font-size:14.5px;font-weight:500;color:rgba(241,237,228,.65)}

/* ---- LISTADO DE PROPIEDADES ---- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;padding:32px 0;border-bottom:1px solid var(--line-l)}
.fl{font-family:inherit;font-size:14.5px;font-weight:500;padding:11px 20px;background:transparent;color:var(--ink);border:1px solid var(--line-l);border-radius:var(--r);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fl:hover{border-color:rgba(20,18,16,.35)}
.fl.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.fl:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.conteo{margin-left:auto;align-self:center;font-size:14.5px;color:rgba(20,18,16,.55);font-variant-numeric:tabular-nums}

.lista{display:grid;gap:0}
.item{display:grid;grid-template-columns:420px 1fr auto;gap:48px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line-l);text-decoration:none;transition:background .25s}
.item:hover{background:rgba(20,18,16,.03)}
.item .thumb{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:var(--r)}
.item .zona{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55)}
.item .nom{font-family:Newsreader;font-weight:500;font-size:35px;line-height:43px;margin-top:6px}
.item .specs{display:flex;gap:32px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-l)}
.item .specs div{font-variant-numeric:tabular-nums}
.item .specs dt{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55);margin-bottom:2px}
.item .pr{font-family:Newsreader;font-weight:600;font-size:44px;line-height:51px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.item .est{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55);text-align:right;margin-top:6px}
.item.off{display:none}

/* ---- DETALLE DE PROPIEDAD ---- */
.det-hero{position:relative;height:82vh;min-height:600px;overflow:hidden}
.det-hero img{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover}
.det-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.60) 22%,rgba(20,18,16,.10) 52%,rgba(20,18,16,0) 72%)}
.det-data{position:absolute;left:0;right:0;bottom:0;z-index:2;color:var(--paper);padding:48px 0}
.det-data .wrap{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.det-body{display:grid;grid-template-columns:1.25fr .75fr;gap:96px;align-items:start}
.hoja{display:grid;gap:0;margin-top:8px}
.hoja>div{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line-l)}
.hoja dt{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55)}
.hoja dd{font-variant-numeric:tabular-nums}
.aside{position:sticky;top:112px;border:1px solid var(--line-l);border-radius:var(--r);padding:32px;background:rgba(20,18,16,.025)}
.aside .pr{font-family:Newsreader;font-weight:600;font-size:55px;line-height:61px;font-variant-numeric:tabular-nums}
.aside .mini{display:grid;gap:0;margin:24px 0}
.aside .mini>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-l)}
.aside .mini dt{color:rgba(20,18,16,.70)}
.aside .mini dd{font-weight:500;font-variant-numeric:tabular-nums}

/* galería */
.galeria{columns:3;column-gap:8px;margin-top:32px}
.galeria button{padding:0;border:0;background:none;cursor:pointer;display:block}
.galeria button{width:100%;break-inside:avoid;margin-bottom:8px}
.galeria img{width:100%;height:auto;border-radius:var(--r);transition:opacity .25s}
.galeria button:hover img{opacity:.86}
.galeria button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lightbox{position:fixed;inset:0;background:rgba(20,18,16,.97);z-index:100;display:none;place-items:center}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:82vh;width:auto;height:auto;object-fit:contain}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 32px;color:var(--paper);font-size:14.5px;font-variant-numeric:tabular-nums}
.lb-x,.lb-p,.lb-n{background:none;border:0;color:var(--paper);font-size:28px;cursor:pointer;padding:12px 18px;line-height:1;font-family:inherit}
.lb-p,.lb-n{position:absolute;top:50%;transform:translateY(-50%);font-size:40px}
.lb-p{left:16px}.lb-n{right:16px}
.lb-x:hover,.lb-p:hover,.lb-n:hover{color:var(--gold)}
.lb-x:focus-visible,.lb-p:focus-visible,.lb-n:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- PÁGINA DE SERVICIO ---- */
.pasos-v{display:grid;gap:0;margin-top:48px}
.pv{display:grid;grid-template-columns:120px 1fr;gap:48px;padding:40px 0;border-top:1px solid var(--line-l);align-items:start}
.pv:last-child{border-bottom:1px solid var(--line-l)}
.pv .n{font-family:Newsreader;font-weight:600;font-size:44px;line-height:51px;color:var(--gold);font-variant-numeric:tabular-nums}
.faq{margin-top:48px}
.qa{border-top:1px solid var(--line-l)}
.qa:last-of-type{border-bottom:1px solid var(--line-l)}
.qa summary{cursor:pointer;padding:28px 0;font-family:Newsreader;font-weight:500;font-size:28px;line-height:36px;list-style:none;display:flex;gap:32px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';margin-left:auto;color:var(--gold);font-family:'General Sans';font-size:28px}
.qa[open] summary::after{content:'–'}
.qa .a{padding-bottom:28px;max-width:720px;color:rgba(20,18,16,.72)}

/* ---- CONTACTO ---- */
.form{display:grid;gap:24px;margin-top:48px;max-width:620px}
.f{display:grid;gap:8px}
.f label{font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(20,18,16,.55)}
.f input,.f textarea,.f select{font-family:inherit;font-size:18px;padding:15px 16px;border:1px solid var(--line-l);border-radius:var(--r);background:rgba(255,255,255,.55);color:var(--ink)}
.f textarea{min-height:140px;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

@media (max-width:900px){
  .item{grid-template-columns:1fr;gap:24px}
  .item .pr,.item .est{text-align:left}
  .det-body,.calc2,.split2,.cierre-grid{grid-template-columns:1fr;gap:48px}
  .aside{position:static}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .f2{grid-template-columns:1fr}
}

/* ============================================================
   RESPONSIVE — mobile-first correction pass
   ============================================================ */

/* botón de menú: oculto en desktop */
.menu-btn{display:none}
.nav-back{display:none}

@media (max-width:1080px){
  .wrap{padding:0 32px}
  .hd-in{padding:16px 32px;gap:24px}
  .nav{gap:22px}
  .display{font-size:56px;line-height:62px}
  .h2{font-size:38px;line-height:45px}
  .ix{grid-template-columns:200px 1fr 130px;gap:24px}
  .ix .specs{display:none}
  .ix-toggle{grid-template-columns:200px 1fr 130px 24px;gap:24px}
  .ix-toggle .specs{display:none}
  .item{grid-template-columns:300px 1fr auto;gap:32px}
  /*  */
}

@media (max-width:767px){
  .wrap{padding:0 20px}

  /* tipografía mobile — tabla §1 del sistema */
  body{font-size:17px;line-height:27px}
  .display{font-size:42px;line-height:47px}
  .h1{font-size:35px;line-height:41px}
  .h2{font-size:29px;line-height:36px}
  .h3{font-size:24px;line-height:31px}
  .h4{font-size:20px;line-height:27px}
  .lead{font-size:20px;line-height:31px}
  .sec{padding:96px 0}
  .cierre,.calc{padding:96px 0}
  .ph-hero{padding:132px 0 64px}
  .stats-tl{gap:28px;margin-top:36px;padding-top:24px}
  .stats-tl .stat-n{font-size:38px}

  /* header con menú desplegable */
  .hd-in{padding:14px 20px;gap:16px}
  .mark{font-size:21px;padding-left:12px}
  .mark small{font-size:14px;letter-spacing:.1em}
  .menu-btn{display:block;margin-left:auto;background:none;border:1px solid var(--line-d);border-radius:var(--r);color:var(--paper);font-family:inherit;font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;cursor:pointer}
  .menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .hd .nav,.hd .lang,.hd>.hd-in>.btn{display:none}
  .hd.open{background:var(--black)}
  .hd.open .nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--black);border-top:1px solid var(--line-d);padding:8px 20px 24px;gap:0;margin:0}
  .hd.open .nav a{padding:18px 0;border-bottom:1px solid var(--line-d);border-top:0;font-size:20px}
  .hd.open .lang{display:flex;position:absolute;top:calc(100% + 1px);right:20px;padding:22px 0}
  .hd.open>.hd-in>.btn{display:block;position:absolute;top:100%;left:20px;right:20px;margin-top:309px;text-align:center} /* despeja panel .hd.open .nav (289px reales) + gap 20px — bugfix overlap 2026-07-27 */

  /* hero — el layout full-bleed (hero/hero-sticky/hero-frame/hero-scrim/
     hero-txt/.cred) se resuelve en @media(max-width:900px) más abajo, para
     que el umbral coincida con el de deshabilitar video+scrub del <script>
     de index.html. Acá solo quedan cta-row/.btn, que ya eran globales.
      */
  .cta-row{gap:20px;margin-top:32px}
  .btn{width:100%;text-align:center}
  .cta-row .btn-ghost{width:100%;text-align:center}

  /* portfolio: layout apilado movido a bloque dedicado @media(max-width:768px)
     más abajo — ver nota ahí (breakpoint 767 no cubría 768 exacto). */
  .sec2{grid-template-columns:1fr;gap:48px}
  .sec2 figure:nth-child(2){margin-top:0}
  .ix{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .ix .pr{text-align:left;font-size:24px;line-height:31px}
  .ix .specs{display:block;margin-top:4px}
  .ix-toggle{grid-template-columns:1fr;gap:6px;padding:22px 0;position:relative}
  .ix-toggle .pr{text-align:left;font-size:24px;line-height:31px}
  .ix-toggle .specs{display:block;margin-top:4px}
  .ix-toggle .car{position:absolute;top:22px;right:0}
  /*  */

  /* diferencial, proceso, split */
  .dual{grid-template-columns:1fr}
  .dual>div{padding:32px 24px}
  .dual>div:first-child{border-right:0;border-bottom:1px solid var(--line-d)}
  .dual-note{padding:24px;gap:16px}
  .dual-note b{white-space:normal}
  .pasos{grid-template-columns:1fr;gap:0}
  .paso{padding:28px 0;border-top:1px solid var(--line-d)}
  .paso+.paso{padding-left:0;border-left:0}
  .split2{grid-template-columns:1fr;gap:48px}
  .tony{grid-template-columns:1fr}
  .tony-media{min-height:420px}
  .tony-txt{padding:64px 20px}
  .tl-items{grid-template-columns:1fr 1fr;gap:24px 16px}
  .tl-item{padding-right:0}

  /* calculadora */
  .calc2{grid-template-columns:1fr;gap:48px}
  .segs{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .sg{font-size:15px;padding:12px 0}
  .resultado,.out .resultado{font-size:56px;line-height:62px}
  .lg-row{grid-template-columns:14px 1fr auto;gap:12px}
  .lg-row .pct{display:none}
  .supuestos{padding:20px}
  .sup-l>div{flex-direction:column;gap:2px}

  /* notas */
  .nota{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .nota .fecha{text-align:left}
  .nota:hover{padding-left:0}

  /* cierre y footer */
  .cierre-grid{grid-template-columns:1fr;gap:48px}
  .cto{grid-template-columns:1fr;gap:4px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:40px}
  .aviso{flex-direction:column;gap:16px}

  /* interiores */
  .item{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .item .pr,.item .est{text-align:left}
  .item .nom{font-size:24px;line-height:31px}
  .item .specs{gap:24px}
  .filtros{gap:6px;padding:24px 0}
  .fl{padding:10px 14px}
  .conteo{margin-left:0;width:100%;padding-top:8px}
  .det-hero{height:auto;min-height:0}
  .det-hero img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3}
  .det-hero::after{display:none}
  .det-data{position:static;padding:24px 0;background:var(--black)}
  .det-data .wrap{grid-template-columns:1fr;gap:24px}
  .det-body{grid-template-columns:1fr;gap:48px}
  .aside{position:static;padding:24px}
  .hoja>div{grid-template-columns:1fr;gap:4px}
  .galeria{grid-template-columns:1fr 1fr;gap:6px}
  .pv{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .qa summary{font-size:22px;line-height:30px;gap:16px;padding:22px 0}
  .f2{grid-template-columns:1fr}
  .crumbs{margin-bottom:24px}
  .lb-p,.lb-n{font-size:32px;padding:10px 12px}
}

@media (max-width:420px){
  .tl-items{grid-template-columns:1fr}
  .ficha-inline{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr}
}

/* Grid items no encogen por debajo de su contenido (min-width:auto por defecto).
   Sin esto, un input o una fila de datos fuerza scroll horizontal aunque la
   columna haya colapsado a 1fr. */
.split2>*,.calc2>*,.det-body>*,.cierre-grid>*,.dual>*,.sec2>*,.ft-grid>*,
.item>*,.ix>*,.nota>*,.lg-row>*,.hoja>div>*,.pv>*,.tl-item>*{min-width:0}
.f input,.f textarea,.f select{width:100%;max-width:100%}

@media (max-width:767px){
  .ficha-inline{width:100%;max-width:100%}
  .split2{gap:48px}
  .wrap.split2{padding-left:20px;padding-right:20px}
}

/*  */
@media (max-width:768px){
  /* Portfolio (.bleed/.bleed-data/.ficha-inline) apilado — sube el techo del breakpoint
     mobile de 767 a 768: a 768px exacto, con el layout desktop, .bleed-data.alt (rtl)
     montaba su ficha-inline sobre el título de la card y .ficha-inline desbordaba ~44px
     (bug detectado por Adrián en vivo, tablet). .bleed-data.alt tiene mayor especificidad
     que .bleed-data — hay que resetearla explícita. */
  .bleed{height:auto;min-height:0}
  .bleed img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;transform:none!important}
  .bleed::after{display:none}
  .bleed-data{position:static;padding:24px 20px;background:var(--black);grid-template-columns:1fr;gap:24px;max-width:none}
  .bleed-data.alt{grid-template-columns:1fr;direction:ltr}
  .bleed-data.alt .ficha-inline{justify-content:flex-start}
  .ficha-inline{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
}

/*  */
@media (max-width:900px){
  /* Header/nav: el menú hamburguesa de arriba solo activa en @media max-width:767px,
     dejando el rango 768-900 con el nav completo en fila — a 768px exacto "Vender e
     invertir" wrapea y el nav + .btn.hd-cta desbordan (scrollWidth≈811>768, medido con
     Playwright). Mismo patrón de breakpoint gap que .bleed/.bleed-data arriba: en vez
     de duplicar toda la regla en 767, se sube el techo del colapso a 900 (consistente
     con el resto de los breakpoints "tablet" del sistema, ej. .ptl-items, .item).
     Additivo puro — no se toca el bloque @media max-width:767px existente. */
  .hd-in{padding:14px 20px;gap:16px}
  .mark{font-size:21px;padding-left:12px}
  .mark small{font-size:14px;letter-spacing:.1em}
  .menu-btn{display:block;margin-left:auto;background:none;border:1px solid var(--line-d);border-radius:var(--r);color:var(--paper);font-family:inherit;font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;cursor:pointer}
  .menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .hd .nav,.hd .lang,.hd>.hd-in>.btn{display:none}
  .hd.open{background:var(--black)}
  .hd.open .nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--black);border-top:1px solid var(--line-d);padding:8px 20px 24px;gap:0;margin:0}
  .hd.open .nav a{padding:18px 0;border-bottom:1px solid var(--line-d);border-top:0;font-size:20px}
  .hd.open .lang{display:flex;position:absolute;top:calc(100% + 1px);right:20px;padding:22px 0}
  .hd.open>.hd-in>.btn{display:block;position:absolute;top:100%;left:20px;right:20px;margin-top:309px;text-align:center} /* despeja panel .hd.open .nav (289px reales) + gap 20px — bugfix overlap 2026-07-27 */
}

/*  */
@media (max-width:900px){
  /* Hero full-bleed scroll-scrub — mobile/tablet: mismo umbral que el <script>
     de index.html que decide si inyecta el <video> (matchMedia max-width:900px).
     Por debajo de este ancho el <video> NUNCA se crea (Network limpio) — acá
     solo cae el layout de vuelta a bloque simple, sin el scroll-jack de 300vh
     (300vh de scroll sin nada que scrubear sería una trampa de UX en mobile).
     Queda: imagen fija arriba (poster real, `img#heroPoster`) + texto y tira
     de credenciales en flujo normal debajo — mismo espíritu del hero apilado
     original, sin las propiedades grid/order que ya no aplican (el marcado
     cambió de grid 2 columnas a full-bleed con capas absolutas). */
  /*  */
  .hero{height:auto}
  .hero-sticky{position:static;height:auto;overflow:visible;display:block;padding:0}
  .hero-frame{position:relative;inset:auto;height:56vh;min-height:340px}
  .hero-scrim{background:linear-gradient(0deg,rgba(20,18,16,.90) 0%,rgba(20,18,16,.15) 60%,rgba(20,18,16,0) 100%)}
  .hero-txt{position:static;padding:32px 20px 8px;max-width:none}
  .cred{position:static;display:grid;grid-template-columns:1fr;gap:10px;padding:24px 20px;background:var(--black)}
}
@media (prefers-reduced-motion:reduce){
  /* Sin scrub: el <script> de index.html ya no crea el <video> bajo reduced-motion,
     pero si algún navegador llegara a insertarlo igual, esto lo neutraliza:
     poster estático, cero transform/transición sobre las capas del hero. */
  .hero-media-el,.hero-scrim{transition:none!important}
}

/* La galería sale del ancho de la columna de texto y usa todo el bloque */
.det-body>div:first-child .galeria{margin-left:0;margin-right:calc(-1 * (var(--gal-bleed, 0px)))}
@media (min-width:1024px){
  .det-body{grid-template-columns:1.35fr .65fr;gap:64px}
  .galeria{columns:3}
}
@media (max-width:767px){ .galeria{columns:2;column-gap:6px} .galeria button{margin-bottom:6px} }