/* ============================================================================
   TAX SOLUTIONS - SMART TAXES · home.css (V3 "VERDE ROLEX + ORO", orden 0827-b)
   Los 6 bloques del esqueleto (cap. 13) con el ADN del CONCEPT V3.
   ========================================================================== */

/* ============================================================
   ① HERO V3 "VERDE ROLEX + ORO" (T1): bloque de presencia en verde
   Rolex profundo, titular Anton ORO gradiente (pulcro, T2), halo
   crema sutil tras el expediente, fichas y chips blancos POP.
   El resto del sitio sigue blanco frio: ESTE es el bloque de presencia.
   ============================================================ */
/* T18 (V4): el verde CRECE hacia abajo (+40px sobre el viewport) para que la
   fila de adjetivos quede bien dentro del verde y la barra de conversion
   monte el borde inferior mitad-dentro/mitad-fuera; ~100vh visual en reposo */
.hero{
  position:relative;height:calc(100vh + 40px);min-height:720px;
  overflow:hidden;
  background:
    radial-gradient(120% 85% at 50% -12%,rgba(32,80,58,.55) 0%,rgba(32,80,58,0) 58%),
    linear-gradient(168deg,#123B2C 0%,#0E2E22 76%,#0C2A1F 100%);
}
/* isolation: el sandwich de apilamiento del titular V5 (relleno bajo el
   objeto / trazo sobre el objeto, generados por el MISMO span) vive en el
   contexto de .hero-stage - cero costo de paint */
.hero-stage{position:absolute;inset:0;isolation:isolate}

/* titular gigante ORO (T1+T2): 2 lineas centradas; letra PULCRA (cero filtros
   SVG, 0827-b). T24+T26 (V5): cada span pinta DOS veces su propio texto via
   pseudo-elementos content:attr(data-text) - ::after = relleno gradiente con
   z:-1 (se hunde BAJO el expediente dentro del contexto aislado) y ::before =
   trazo fino oro (el h1 va DESPUES del objeto en el DOM: pinta ENCIMA por
   orden natural). Misma caja/fuente/talla/tracking heredados del span →
   registro al pixel POR CONSTRUCCION, imposible de desalinear. REGLA DURA:
   ni el h1 ni los spans llevan transform/z-index/clip/will-change (cualquiera
   crea stacking context y rompe el sandwich); la entrada anima la variable
   --wip (clip-path de los DOS pseudos A LA VEZ), jamas paint. */
.hero-h1{
  position:absolute;left:-5%;top:49%;
  /* centrado vertical sin transform: alto = 2 lineas de .86em + gap .15em
     = 1.87em → media caja .935em (equivale al translateY(-50%) anterior) */
  margin-top:-.935em;
  width:110%;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--disp);font-weight:400;
  /* T20 (V4): 17vw -> 15.8vw en el tramo 1181-1898 - a 1920+ el techo de 300px
     ya abria los claros de las esquinas que el dueño marco para las fichas;
     este ajuste replica esa geometria aprobada tambien en 1440 */
  font-size:clamp(96px,15.8vw,300px);line-height:.86;
  /* T22 (V5): aire CLARO entre las 2 lineas del titular (+.15em, ES y EN) */
  row-gap:.15em;
  letter-spacing:-.01em;text-transform:uppercase;
  text-align:center;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  pointer-events:none;user-select:none;
}
/* T23 (V5): LETRAS COMPLETAS por idioma - muere el sangrado/tangencia. La
   linea mas larga REAL medida en Anton (EN "SMART" tracked k=4.815em,
   ES "INTELIGENTES" k=4.699em) queda con aire limpio a fichas y bordes en
   1440/1920/2560 (la tangencia ficha↔S de V4 era el "S cortada" del dueño).
   Tablet (<=1180) conserva el 15.8vw aprobado y el movil su caja propia. */
@media (min-width:1181px){
  .hero-h1{font-size:clamp(96px,14.5vw,295px)}
  html[lang^="es"] .hero-h1{font-size:clamp(96px,14.85vw,290px)}
}
.h1-line{
  display:block;position:relative;white-space:nowrap;
  /* T26: headroom net-cero - la caja del span gana .14em ARRIBA sin mover el
     layout (misma receta que salvo la tilde de DUEÑOS, F5 v3); los pseudos
     (inset:0) heredan ese aire y el wipe inset() ya no muerde las S/X/T */
  padding-top:.14em;margin-top:-.14em;
  color:transparent; /* la letra base es solo geometria: pintan los pseudos */
}
/* las DOS pinturas del span (T24+T26): mismo texto via attr(data-text), misma
   caja via inset:0, mismo padding - el registro no puede romperse */
.h1-line::before,.h1-line::after{
  content:attr(data-text);
  position:absolute;inset:0;padding-top:.14em;
  clip-path:var(--wip,none);
  pointer-events:none;
}
/* ::before = TRAZO fino oro medio al ~60% (T24), pinta SOBRE el expediente:
   sobre las letras doradas se funde invisible, sobre el cuero verde revela
   el contorno y la palabra se lee COMPLETA. Capa ESTATICA, cero filtros. */
.h1-line::before{
  color:transparent;
  -webkit-text-stroke:1.15px rgba(216,180,105,.6);
}
/* ::after = RELLENO gradiente dorado (T2), z:-1 lo hunde BAJO el expediente.
   Stops re-mapeados a la caja con headroom (.14em de 1em = 14% de techo):
   el reparto del gradiente sobre los glifos queda BYTE-IGUAL al aprobado
   (0% viejo→14%, 30%→39.8%, 62%→67.3%, 100%→100%). */
.h1-line::after{
  z-index:-1;
  color:transparent;
  background:linear-gradient(180deg,#F8E7AE 0%,#F8E7AE 14%,var(--gold-3) 39.8%,var(--gold-2) 67.3%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;
}
/* la linea corta se abre con tracking para acompanar a la larga
   (contraste editorial: linea 1 tracked, linea 2 apretada) */
.h1-sp{letter-spacing:.45em;margin-right:-.45em}

/* el objeto: cutout ESTUDIO centrado ENCIMA del titular (oclusion Rolex).
   .hero-set es el contenedor-ancla: fichas, halo y float viven RELATIVOS a el.
   T16: bloque titular+objeto BAJADO (centrado vertical real del viewport). */
.hero-set{
  position:absolute;left:50%;top:53.5%;transform:translate(-50%,-50%);
  /* V5 (T26): SIN z-index - el sandwich del titular es por ORDEN DE ARBOL
     (relleno z:-1 < objeto < trazo del h1 posterior en el DOM < chips z:5);
     un z positivo aqui taparia el trazo */
  width:clamp(300px,30vw,520px);
}
/* T1: halo de luz MUY sutil tras el expediente (radial crema 6-8%) para
   separarlo del verde profundo; estatico, relativo al objeto (0704-e2) */
.hero-set::before{
  content:"";position:absolute;left:50%;top:48%;
  width:190%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(244,239,227,.085) 0%,rgba(244,239,227,.04) 44%,rgba(244,239,227,0) 72%);
  pointer-events:none;z-index:0;
}
.hero-obj{display:block;position:relative;z-index:1}
.hero-obj img{width:100%;height:auto;display:block}

/* tarjetas-ficha satelite (patron Fluted Bezel / Calibre 3255):
   posiciones relativas al objeto con techos px (disciplina responsive) */
.ficha{
  position:absolute;width:clamp(150px,11.8vw,200px);margin:0;
  background:#FFFFFF;border:1px solid var(--line-cold);
  border-radius:14px;overflow:hidden;
  /* T1: POP blanco sobre el verde profundo (sombra ambiental honda) */
  box-shadow:0 26px 60px rgba(4,12,8,.5);
  z-index:4;
}
.ficha img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.ficha figcaption{padding:.65em .95em .8em}
.ficha figcaption b{display:block;font-weight:700;font-size:clamp(.8rem,.95vw,.95rem);color:var(--ink)}
.ficha figcaption span{display:block;font-weight:600;font-size:clamp(.68rem,.8vw,.8rem);color:var(--muted-light)}
/* T20 (V4, burbujas del dueño): FUERA del titular - la izquierda ARRIBA en el
   claro superior-izquierdo (a la altura de la linea 1, antes de la T); la
   derecha al BORDE derecho a media altura (libre de "NTES"). Siguen relativas
   al objeto con techos px (disciplina responsive); movil 390 intacto.
   T23 (V5, reequilibrio): el techo px viejo (-620/-660) congelaba el empuje
   cuando .hero-set capea a 520 (>1856px) y la ficha-a acababa MONTADA en la S
   de SMART a 2560; el vw sigue gobernando hasta 2560 y las fichas se quedan
   en las esquinas, lejos de los glifos. */
.ficha-a{left:clamp(-1000px,-33.4vw,-390px);top:12%}
.ficha-b{right:clamp(-1040px,-34vw,-395px);top:27%}

/* chips pildora de esquina (arriba-izq oro / arriba-der gris frio)
   T19 (V4): +60-80px de aire entre la nav y la fila de chips (el bloque
   respira arriba, mas centrado) */
.hero-chip{
  position:absolute;z-index:5;top:clamp(162px,20vh,205px);
  display:inline-flex;align-items:center;gap:.55em;
  background:rgba(255,255,255,.96);border-radius:999px;
  padding:.62em 1.05em;font-weight:700;
  font-size:clamp(.72rem,.85vw,.86rem);color:var(--ink);
  box-shadow:0 12px 32px rgba(4,12,8,.42);
}
.hero-chip .up{width:.95em;height:.95em;flex:none}
.hero-chip .up path{stroke:var(--emerald);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chip-oro{left:4%;border:1px solid var(--accent)}
.chip-frio{right:4%;border:1px solid var(--line-cold);color:var(--ink-soft)}

/* fila inferior de adjetivos en crema/oro suave (T1) */
.hero-adjs{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(4.2rem,8vh,5.8rem);z-index:5;
  width:var(--wrap);padding-inline:var(--pad-x);
  display:flex;justify-content:space-between;align-items:baseline;
  font-weight:600;font-size:clamp(.92rem,1.15vw,1.18rem);
  letter-spacing:.05em;color:#E9DFC4;
}
/* ============================================================
   BARRA DE CONVERSION (sobrevive V1 -> V2 en blanco frio)
   ============================================================ */
.conv-band{position:relative;z-index:8;background:var(--surface)}
/* T5 (V3): la barra de 3 tarjetas MAS GRANDE y abarcando los lados
   (ancho min(1720px,94vw), tarjetas mas altas, iconos y cifras mayores) */
.conv-bar{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.5vw,1.6rem);
  width:min(1720px,94vw);margin-inline:auto;
  /* T18 (V4): la barra monta el borde inferior del verde MITAD dentro / mitad
     fuera (estilo overlay aprobado); -64px fijo murio */
  margin-top:clamp(-52px,-3.2vw,-42px);
}
.conv-cell{
  display:flex;align-items:center;gap:1.1em;
  background:#FFFFFF;
  border:1px solid var(--line-cold);
  box-shadow:0 22px 54px rgba(16,24,15,.14);
  border-radius:20px;padding:clamp(1.2em,1.6vw,1.7em) clamp(1.3em,1.8vw,1.9em);
}
.conv-cell .ico{width:clamp(2.2em,2.6vw,2.8em);height:clamp(2.2em,2.6vw,2.8em)}
.conv-cell b{display:block;font-weight:800;font-size:clamp(1.02rem,1.25vw,1.3rem);line-height:1.25}
.conv-cell span{display:block;font-size:clamp(.8rem,.92vw,.94rem);color:var(--muted-light);font-weight:600}

/* ============================================================
   ② VERDE · C5 MANIFIESTO + DOCK (marfil)
   ============================================================ */
.manifest{
  position:relative;background:var(--surface);
  padding-block:calc(var(--sec-pad) + 1.5rem) var(--sec-pad);
  overflow:clip;
}
.manifest-grid{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
  position:relative;z-index:2;
}
.manifest-copy .kicker{color:var(--ink);margin-bottom:1.2rem}
.manifest-h2{
  font-family:var(--disp);font-weight:400;line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink-display);
  font-size:clamp(2.4rem,5.5vw,5.8rem);max-width:14ch;
}
.manifest-copy p{
  margin-top:1.4rem;max-width:52ch;font-size:clamp(.95rem,1.05vw,1.05rem);
  color:var(--ink-soft);
}
.ghost-02{right:-2%;top:4%;font-size:min(18vw,260px);color:rgba(22,35,28,.1);z-index:1}

/* dock del journey (marco completo: frame 16:9 sin recorte) */
.dock{position:relative}
.dock-stage{position:relative;aspect-ratio:2.24/1;width:100%}
.dock-frame{
  position:absolute;width:133.4%;left:-33.4%;top:-60.3%;
  aspect-ratio:1600/893;pointer-events:none;
}
.dock-frame img{position:absolute;inset:0;width:100%;height:100%}
.dock-open{opacity:0}
.dock-chips{
  position:absolute;left:0;top:8%;z-index:3;
  display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;
}
.dock-chip{
  font-family:var(--disp);font-weight:400;font-size:clamp(.9rem,1.15vw,1.15rem);
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--gold-2);
  border-radius:12px;padding:.5em .9em;
  box-shadow:0 12px 28px rgba(16,24,15,.28);
  opacity:0;transform:translateY(16px) scale(.92);
}
.dock-cta{
  position:relative;z-index:3;margin-top:1rem;
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;font-size:.95rem;color:var(--ink);
  opacity:0;
}
.dock-cta .u{position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--accent)}
.dock-tally{margin-top:1.1rem;max-width:340px}
.dock-tally::before,.dock-tally::after{transform:scaleX(0)}
.manifest .cinta{right:2%;top:-6%;width:170px;opacity:.5;z-index:1}

/* ============================================================
   ③ AMARILLO · C3 BANDA OSCURA MACRO (ink)
   ============================================================ */
.invest{
  position:relative;background:var(--ink);color:var(--surface);
  min-height:70vh;display:flex;align-items:center;
  overflow:clip;padding-block:clamp(4rem,8vh,6rem);
}
.invest-macro{
  position:absolute;left:0;top:-8%;bottom:-8%;width:48%;
  z-index:2;overflow:clip;
}
.invest-macro img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.invest-macro::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,var(--ink) 99%);
}
.invest-copy{
  position:relative;z-index:3;margin-left:auto;width:50%;
  padding-right:var(--pad-x);
}
.invest-h2{
  font-family:var(--disp);font-weight:400;line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2.4rem,5vw,5rem);max-width:23ch;
}
.invest-micro{margin-top:1.3rem;color:var(--muted-dark);font-size:clamp(.92rem,1vw,1rem);max-width:46ch}
.invest-link{
  position:relative;display:inline-flex;margin-top:1.4rem;
  font-weight:800;color:var(--gold-2);font-size:.95rem;
}
.invest-link .u{position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--accent)}
.invest-ghost{
  position:absolute;left:38%;bottom:-.18em;z-index:1;
  font-family:var(--disp);font-weight:400;white-space:nowrap;line-height:.8;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:min(14vw,220px);
  -webkit-text-stroke:1.5px rgba(155,168,157,.16);color:transparent;
  pointer-events:none;user-select:none;
}

/* ============================================================
   ④ FUCSIA · "LAS BARRAS DEL LOGO" (marfil, EL pin del sitio)
   ============================================================ */
.metodo{
  position:relative;background:var(--surface);overflow:clip;
}
.metodo-inner{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(3rem,5vh,4.5rem);
}
.metodo-head{position:relative;z-index:3;margin-bottom:clamp(1.6rem,3vh,2.6rem)}
.metodo-head .kicker{color:var(--ink)}
.metodo-h2{
  font-family:var(--disp);font-weight:400;line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink-display);
  font-size:clamp(2rem,3.6vw,3.6rem);margin-top:.6rem;max-width:26ch;
}
.ghost-metodo{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  font-family:var(--disp);font-weight:400;white-space:nowrap;line-height:.8;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:min(14vw,230px);
  -webkit-text-stroke:1.5px rgba(22,35,28,.07);color:transparent;
  pointer-events:none;user-select:none;z-index:1;
}
.stage{
  position:relative;z-index:2;
  height:clamp(360px,52vh,520px);
}
.stage-cols{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.6vw,3rem);
}
.scol{position:relative}
.sbar{
  position:absolute;left:12%;right:12%;bottom:0;height:var(--bh);
  background:linear-gradient(180deg,var(--gold-2),var(--accent) 60%,#8F6C33);
  border-radius:10px 10px 4px 4px;
  transform:scaleY(0);transform-origin:bottom center;
  box-shadow:0 18px 40px rgba(143,108,51,.28);
}
.scol:nth-child(1){--bh:34%}
.scol:nth-child(2){--bh:48%}
.scol:nth-child(3){--bh:62%}
.scol:nth-child(4){--bh:78%}
.scopy{
  position:absolute;left:0;right:0;bottom:calc(var(--bh) + 18px);
  text-align:center;
}
.scopy .snum{
  display:block;font-family:var(--disp);font-weight:400;line-height:.85;
  font-size:clamp(2.2rem,4vw,3.6rem);
  -webkit-text-stroke:1.5px var(--accent);color:transparent;
}
.scopy .hl{margin-top:2px}
.scopy .ico{margin:.5rem auto .35rem;display:block}
.scopy h3{font-family:var(--ui);font-weight:800;font-size:clamp(.92rem,1.05vw,1.05rem)}
.scopy p{font-size:clamp(.76rem,.85vw,.86rem);color:var(--muted-light);font-weight:600;max-width:22ch;margin:.25rem auto 0}
.flecha-metodo{
  position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible;
}
.flecha-metodo path{fill:none;stroke:var(--emerald);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.flecha-metodo .punta{fill:var(--emerald);stroke:none;transform-origin:center;opacity:0}
.metodo-tally{position:relative;z-index:3;margin-top:clamp(1.4rem,3vh,2.2rem);max-width:520px}
.metodo-tally::before,.metodo-tally::after{transform:scaleX(0)}

/* ============================================================
   ④.5 ESCAPARATE bento de servicios (marfil-2)
   ============================================================ */
.escaparate{
  position:relative;background:var(--surface-2);
  padding-block:var(--sec-pad);overflow:clip;
}
.esc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.6rem,3vw,2.6rem);flex-wrap:wrap}
.esc-head .kicker{color:var(--ink)}
.esc-h2{
  font-family:var(--disp);font-weight:400;line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink-display);
  font-size:clamp(2rem,3.8vw,3.8rem);margin-top:.6rem;max-width:22ch;
}
.esc-link{position:relative;font-weight:800;font-size:.95rem;color:var(--ink);white-space:nowrap}
.esc-link .u{position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--accent)}
.bento{
  position:relative;display:grid;z-index:2;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(150px,15.5vw,225px);
  gap:clamp(.7rem,1vw,1rem);
}
.tile{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 14px 34px rgba(16,24,15,.1);
}
.tile-media{position:absolute;inset:0;overflow:hidden}
.tile-media img{width:100%;height:100%;object-fit:cover}
.tile-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(185deg,transparent 38%,rgba(16,24,15,.82) 88%);
}
.tile-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1rem 1.1rem;color:var(--surface);
  display:flex;flex-direction:column;gap:.2rem;
}
.tile-body .ico{width:1.7em;height:1.7em;margin-bottom:.25rem}
.tile-body h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.05rem,1.3vw,1.35rem);line-height:1.08}
.tile-body p{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.82);max-width:34ch}
.tile-go{
  position:absolute;right:.9rem;top:.9rem;z-index:2;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
}
.tile-go svg{width:.85rem;height:.85rem}
.tile-go svg path{stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.t-featured{grid-column:1/span 6;grid-row:1/span 2;background:var(--ink);color:var(--surface)}
.t-featured .tf-in{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1.2rem,2vw,2rem);
  background:
    radial-gradient(70% 60% at 72% 30%,rgba(212,180,105,.24),transparent 70%),
    radial-gradient(100% 80% at 20% 100%,rgba(16,24,15,.5),transparent 60%);
}
.t-featured .kicker{color:#FFFFFF;margin-bottom:.7rem}
.t-featured h3{
  /* F5 v3: 1 -> 1.09 - con line-height 1 el acento de la Ú de "NÚMEROS"
     tocaba el 0 de "30" de la linea de arriba y se leia "3Q" (letra pulcra T2) */
  font-family:var(--disp);font-weight:400;line-height:1.16;
  text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(1.7rem,2.8vw,2.8rem);max-width:17ch;
}
.t-featured p{margin-top:.7rem;color:var(--muted-dark);font-weight:600;font-size:.9rem;max-width:44ch}
.t-featured .btn{margin-top:1.1rem;align-self:flex-start}
.t-p1{grid-column:7/span 3}
.t-p2{grid-column:10/span 3}
.t-p3{grid-column:7/span 3}
.t-p4{grid-column:10/span 3}
.t-p5{grid-column:1/span 4}
.t-learn{grid-column:5/span 4;background:var(--ink-soft);color:var(--surface)}
.t-learn .tl-in{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.1rem 1.2rem;overflow:hidden;
}
.t-learn .tl-num{
  position:absolute;right:-4%;top:-12%;
  font-family:var(--disp);font-weight:400;line-height:.8;font-size:clamp(6rem,9vw,9.5rem);
  /* T12: esmeralda de la casa, jamas el verde chillon */
  -webkit-text-stroke:1.5px rgba(33,134,92,.4);color:transparent;
  pointer-events:none;
}
.t-learn h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.05rem,1.3vw,1.35rem)}
.t-learn p{font-size:.78rem;font-weight:600;color:var(--muted-dark);max-width:30ch}
.t-learn .ico path{stroke:var(--emerald-2)}
.t-verde{
  /* T12: superficie en esmeralda PROFUNDA de la casa (#1E4034), no chillona */
  grid-column:9/span 4;background:var(--emerald-deep);color:#F1FBF5;
  display:flex;align-items:center;padding:1.2rem;
}
.t-verde p{font-family:var(--ui);font-weight:700;font-size:clamp(1rem,1.25vw,1.3rem);line-height:1.35;max-width:26ch}
.t-verde b{color:var(--gold-3)}
.esc-sticker{position:absolute;pointer-events:none;z-index:3}
.esc-clip{right:-1.5%;top:-26px;width:64px;opacity:.85}
.escaparate .cinta{left:-2%;bottom:-4%;width:140px;opacity:.4;z-index:1}

/* ============================================================
   ④.6 SECCION ESPEJO (invertida del ②; acento alterno esmeralda)
   ============================================================ */
.espejo{
  position:relative;background:var(--surface);
  padding-block:var(--sec-pad);overflow:clip;
}
.espejo-grid{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
  position:relative;z-index:2;
}
.espejo-media{
  position:relative;border-radius:20px;overflow:hidden;
  aspect-ratio:4/3;box-shadow:0 22px 54px rgba(16,24,15,.18);
}
.espejo-media img{width:100%;height:100%;object-fit:cover}
.espejo-copy .kicker{color:var(--ink)}
.espejo-copy .kicker .up path{stroke:var(--emerald)}
.espejo-h2{
  font-family:var(--disp);font-weight:400;line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink-display);
  font-size:clamp(2.2rem,4.6vw,4.6rem);margin-top:.6rem;max-width:16ch;
}
.espejo-rows{margin-top:1.6rem}
.espejo-row{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1rem 0;border-top:1px solid var(--hairline-light);
}
.espejo-row:last-child{border-bottom:1px solid var(--hairline-light)}
.espejo-row .ico{margin-top:.15em}
.espejo-row b{display:block;font-weight:800;font-size:1rem}
.espejo-row span{display:block;font-size:.86rem;color:var(--muted-light);font-weight:600;max-width:52ch}
.espejo-marca{
  position:absolute;left:-4%;bottom:-8%;width:min(30vw,380px);opacity:.05;
  pointer-events:none;z-index:1;
}

/* ⑤ CTA ATMOSFERICO: las reglas viven en base.css (ley j9a: el ⑤ cierra
   las 10 paginas y se INSTANCIA, no se reescribe) */

/* ============================================================
   MOBILE (ley 0704-l: todo dentro de MQ, desktop intacto)
   ============================================================ */
@media (max-width:900px){
  .manifest-grid{grid-template-columns:1fr}
  .dock{margin-top:1rem}
  .dock-open{opacity:1}
  .dock-closed{opacity:0}
  .dock-chip{opacity:1;transform:none}
  .dock-cta{opacity:1}
  .dock-tally::before,.dock-tally::after{transform:scaleX(1)}
  .invest-macro{position:relative;width:100%;height:280px;top:0;bottom:auto}
  .invest-macro::after{background:linear-gradient(180deg,transparent 55%,var(--ink) 99%)}
  .invest{display:block;padding-top:0}
  .invest-copy{width:100%;padding:2.5rem var(--pad-x) 0 0}
  .invest-ghost{left:4%;font-size:min(18vw,150px)}
  .metodo-inner{min-height:0}
  .stage{height:auto}
  .stage-cols{position:relative;grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
  .scol{display:flex;flex-direction:column-reverse;gap:.6rem}
  .sbar{position:relative;left:0;right:0;height:10px;width:100%;border-radius:6px;transform:none;transform-origin:left center}
  .scopy{position:relative;bottom:auto;text-align:left}
  .scopy p{margin-inline:0}
  .scopy .ico{margin-inline:0}
  .flecha-metodo{display:none}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(160px,44vw,220px)}
  .t-featured{grid-column:1/span 2;grid-row:auto/span 2}
  .t-p1,.t-p2,.t-p3,.t-p4{grid-column:auto/span 1}
  .t-p5{grid-column:1/span 1}
  .t-learn{grid-column:2/span 1}
  .t-verde{grid-column:1/span 2}
  .espejo-grid{grid-template-columns:1fr}
}

@media (max-width:1180px) and (min-width:761px){
  /* rango tablet: las fichas se meten al viewport (nada de captions amputados)
     y conservan el flanqueo Rolex de V3 (T20 solo reubica el desktop ancho) */
  .ficha-a{left:clamp(-232px,-19vw,-146px);top:36%}
  .ficha-b{right:clamp(-232px,-19vw,-146px);top:48%}
}

@media (max-width:760px){
  /* T18/T20 (V4): el movil 390 aprobado NO se toca - se neutraliza el
     crecimiento desktop del verde y el sello Rolex l1 sigue intacto */
  .hero{height:100vh;min-height:100svh}
  /* SELLO ROLEX @390 con ley movil l1: titular ARRIBA (sangrado leve),
     objeto abajo con brecha 40-50px, fichas compactas flanqueando el objeto */
  .hero-h1{top:26%;font-size:clamp(64px,19.5vw,96px)}
  .h1-sp{letter-spacing:.32em;margin-right:-.32em}
  .hero-set{top:61%;width:clamp(200px,56vw,260px)}
  .ficha{width:clamp(118px,33vw,146px)}
  .ficha figcaption{padding:.5em .7em .6em}
  .ficha figcaption b{font-size:.72rem}
  .ficha figcaption span{font-size:.62rem}
  .ficha-a{left:clamp(-70px,-18vw,-56px);top:6%}
  .ficha-b{right:clamp(-70px,-18vw,-56px);top:58%;bottom:auto}
  .hero-chip{font-size:.68rem;padding:.55em .9em;top:84px}
  .chip-oro{left:5%}
  .chip-frio{right:5%}
  .hero-adjs{bottom:5rem;font-size:.85rem;letter-spacing:.04em}
  .conv-bar{grid-template-columns:1fr;margin-top:-26px;width:90vw}
  .conv-cell{padding:.8em 1.1em}
  .manifest{padding-top:calc(var(--sec-pad) + 1rem)}
}

/* ============================================================
   reduced-motion: la pagina COMPONE en reposo
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sbar{transform:none}
  .dock-open{opacity:1}
  .dock-closed{opacity:0}
  .dock-chip{opacity:1;transform:none}
  .dock-cta{opacity:1}
  .loader-tally::before,.loader-tally::after,
  .dock-tally::before,.dock-tally::after,
  .metodo-tally::before,.metodo-tally::after{transform:scaleX(1)}
  .flecha-metodo .punta{opacity:1}
}