@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   THE IMAGE METHOD · sistema visual
   Negro, blanco, musgo y plata. Sin color sorpresa: la tensión del
   concepto se resuelve con tratamiento (grano, desenfoque, contraste),
   no con un tono nuevo. Un color más habría abaratado el negro.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TIPOGRAFÍAS ─────────────────────────────────────────────── */
@font-face{
  font-family:"Libre Baskerville"; src:url("../fonts/LibreBaskerville-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville"; src:url("../fonts/LibreBaskerville-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville"; src:url("../fonts/LibreBaskerville-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Aloevera Display"; src:url("../fonts/AloeveraDisplay-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Brooklyn"; src:url("../fonts/Brooklyn-SemiBold.otf") format("opentype");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ── 2 · VARIABLES ───────────────────────────────────────────────── */
:root{
  --negro:#0A0A0A;
  --negro-alto:#050505;      /* más hondo que el fondo, para pozos */
  --negro-carbon:#141414;    /* superficies elevadas */
  --blanco:#FFFFFF;
  --musgo:#82873E;
  --musgo-claro:#A3A857;     /* sólo sobre negro, para pasar AA */
  --plata:#9FA3A9;
  --plata-honda:#6E7278;

  --tinta:var(--blanco);
  --papel:var(--negro);
  --linea:rgba(255,255,255,.14);
  --linea-fuerte:rgba(255,255,255,.30);

  --display:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --ui:"Brooklyn", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* escala — Baskerville pide cuerpo algo menor y titular más grande */
  --t--2:clamp(.68rem, .66rem + .10vw, .74rem);
  --t--1:clamp(.78rem, .75rem + .16vw, .88rem);
  --t-0 :clamp(.96rem, .93rem + .18vw, 1.06rem);
  --t-1 :clamp(1.10rem, 1.04rem + .30vw, 1.30rem);
  --t-2 :clamp(1.30rem, 1.18rem + .58vw, 1.68rem);
  --t-3 :clamp(1.56rem, 1.34rem + 1.05vw, 2.18rem);
  --t-4 :clamp(1.88rem, 1.52rem + 1.70vw, 2.90rem);
  --t-5 :clamp(2.20rem, 1.68rem + 2.55vw, 3.75rem);
  --t-6 :clamp(2.60rem, 1.80rem + 3.90vw, 5.00rem);
  --t-7 :clamp(3.10rem, 1.60rem + 7.20vw, 8.00rem);
  --t-monumento:clamp(3.6rem, 1.0rem + 15.5vw, 17rem);

  --e-3:clamp(.5rem,.45rem + .2vw,.7rem);
  --e-2:clamp(.75rem,.68rem + .3vw,1rem);
  --e-1:clamp(1rem,.9rem + .5vw,1.5rem);
  --e-0:clamp(1.5rem,1.3rem + .9vw,2.25rem);
  --e-1x:clamp(2.25rem,1.9rem + 1.5vw,3.5rem);
  --e-2x:clamp(3.5rem,2.8rem + 3vw,6rem);
  --e-3x:clamp(5rem,3.6rem + 6vw,9.5rem);

  --ancho:min(calc(100% - 2.5rem), 1440px);
  --ancho-texto:68ch;
  --curva:cubic-bezier(.22,1,.36,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);

  color-scheme:dark;
}

/* ── 3 · BASE ────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* el header fijo no debe tapar el ancla */
  scroll-padding-top:5.5rem;
}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--display);
  font-size:var(--t-0);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* nunca scroll horizontal */
}
img,video,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--ui); font-weight:600; line-height:1.03; letter-spacing:-.035em; text-wrap:balance }
p{ margin:0 0 1em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }
ul{ margin:0; padding:0 }
::selection{ background:var(--musgo); color:var(--blanco) }

:focus-visible{
  outline:2px solid var(--musgo-claro);
  outline-offset:3px;
  border-radius:2px;
}

.contenedor{ width:var(--ancho); margin-inline:auto }
.solo-lectores{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.salto{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--blanco); color:var(--negro);
  padding:.7rem 1.1rem; font-family:var(--ui); font-size:var(--t--1);
  text-decoration:none; transition:top .2s var(--curva);
}
.salto:focus{ top:1rem }

/* ── 4 · PIEZAS COMUNES ──────────────────────────────────────────── */
.rotulo{
  font-family:var(--ui); font-size:var(--t--2);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--musgo-claro); margin:0 0 var(--e-1);
  display:flex; align-items:center; gap:.9rem;
}
.rotulo::before{
  content:""; width:2.4rem; height:1px; background:var(--musgo); flex:none;
}
.rotulo--solo::before{ display:none }

.plomo{ color:var(--plata); max-width:min(var(--ancho-texto), 100%) }
.plomo--ancho{ max-width:min(76ch, 100%) }

.regla{ border:0; border-top:1px solid var(--linea); margin:var(--e-2x) 0 }

.seccion{ padding-block:var(--e-3x); position:relative }
.seccion--corta{ padding-block:var(--e-2x) }

.numeral{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.2em;
  color:var(--plata-honda);
}

/* Botones ---------------------------------------------------------- */
.btn{
  --btn-fondo:var(--blanco); --btn-tinta:var(--negro); --btn-borde:var(--blanco);
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:3.25rem; padding:.9rem 1.7rem;
  background:var(--btn-fondo); color:var(--btn-tinta);
  border:1px solid var(--btn-borde); border-radius:0;
  font-family:var(--ui); font-size:var(--t--1);
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.btn:hover{ --btn-fondo:var(--musgo); --btn-tinta:var(--blanco); --btn-borde:var(--musgo) }
.btn--fantasma{ --btn-fondo:transparent; --btn-tinta:var(--blanco); --btn-borde:var(--linea-fuerte) }
.btn--fantasma:hover{ --btn-fondo:var(--blanco); --btn-tinta:var(--negro); --btn-borde:var(--blanco) }
.btn--musgo{ --btn-fondo:var(--musgo); --btn-tinta:var(--blanco); --btn-borde:var(--musgo) }
.btn--musgo:hover{ --btn-fondo:var(--blanco); --btn-tinta:var(--negro); --btn-borde:var(--blanco) }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none }
.btn__giro{
  width:.55rem; height:.55rem; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:giro .7s linear infinite; display:none;
}
.btn[data-cargando] .btn__giro{ display:block }
@keyframes giro{ to{ transform:rotate(360deg) } }

/* ── 5 · CABECERA ────────────────────────────────────────────────── */
.cab{
  position:fixed; inset:0 0 auto; z-index:90;
  background:rgba(10,10,10,0);
  border-bottom:1px solid transparent;
  transform:translateY(0); will-change:transform;
  transition:transform .38s var(--curva), background .4s var(--curva-suave), border-color .4s var(--curva-suave);
}
.cab[data-fija]{ background:rgba(10,10,10,.92); border-bottom-color:var(--linea) }
.cab[data-oculta]{ transform:translateY(calc(-100% - 2px)) }
@supports (backdrop-filter:blur(4px)){
  .cab[data-fija]{ background:rgba(10,10,10,.72); backdrop-filter:blur(14px) saturate(120%) }
}
.cab__fila{
  width:var(--ancho); margin-inline:auto;
  display:flex; align-items:center; gap:var(--e-1);
  min-height:4.75rem;
}
.cab__marca{
  text-decoration:none; font-family:var(--ui);
  font-size:var(--t--1); letter-spacing:.30em; text-transform:uppercase;
  display:flex; align-items:baseline; gap:.55rem; margin-right:auto;
  min-height:2.75rem; align-content:center; flex-wrap:wrap;   /* objetivo táctil */
}
.cab__marca b{ font-weight:500 }
.cab__marca span{ color:var(--plata-honda); letter-spacing:.18em; font-size:.85em }
.cab__nav{ display:none }
@media (min-width:1080px){
  .cab__nav{ display:block }
  .cab__nav ul{ display:flex; gap:var(--e-1); list-style:none }
  .cab__nav a{
    font-family:var(--ui); font-size:var(--t--2); letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; color:var(--plata);
    padding:.85rem 0; position:relative; display:inline-block;
    transition:color .3s var(--curva);
  }
  .cab__nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--musgo-claro); transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--curva);
  }
  .cab__nav a:hover,.cab__nav a[aria-current]{ color:var(--blanco) }
  .cab__nav a:hover::after,.cab__nav a[aria-current]::after{ transform:scaleX(1) }
}
.cab__cta{ display:none }
@media (min-width:1080px){ .cab__cta{ display:inline-flex; min-height:2.75rem; padding:.6rem 1.2rem } }

.cab__hamb{
  display:grid; place-content:center; gap:5px;
  width:3rem; height:3rem; background:none; border:1px solid var(--linea);
  cursor:pointer; transition:border-color .3s var(--curva);
}
.cab__hamb:hover{ border-color:var(--linea-fuerte) }
.cab__hamb span{ display:block; width:1.15rem; height:1px; background:currentColor; transition:transform .35s var(--curva), opacity .25s }
.cab__hamb[aria-expanded="true"] span:first-of-type{ transform:translateY(3px) rotate(45deg) }
.cab__hamb[aria-expanded="true"] span:last-of-type{ transform:translateY(-3px) rotate(-45deg) }
@media (min-width:1080px){ .cab__hamb{ display:none } }

.panel{
  position:fixed; inset:0; z-index:95; background:var(--negro-alto);
  padding:6rem var(--e-1) var(--e-1);
  overflow-y:auto; display:flex; flex-direction:column; gap:var(--e-1);
}
.panel[hidden]{ display:none }
.panel ul{ list-style:none; display:flex; flex-direction:column }
.panel li{ border-bottom:1px solid var(--linea) }
.panel a{
  display:flex; align-items:baseline; gap:1rem; padding:1.05rem .25rem;
  text-decoration:none; font-size:var(--t-2);
}
.panel a i{
  font-style:normal; font-family:var(--ui); font-size:var(--t--2);
  color:var(--musgo-claro); letter-spacing:.14em; min-width:2ch;
}
.panel .btn{ margin-top:auto }

/* ── 6 · PRELOADER ───────────────────────────────────────────────── */
.velo{
  position:fixed; inset:0; z-index:200; background:var(--negro);
  display:grid; place-items:center;
  transition:opacity .6s var(--curva), visibility .6s;
}
.velo[data-ido]{ opacity:0; visibility:hidden; pointer-events:none }
.velo__texto{
  font-family:var(--ui); font-size:var(--t--1);
  letter-spacing:.55em; text-transform:uppercase; text-indent:.55em;
  color:var(--plata); display:flex; gap:.05em;
}
.velo__texto span{
  opacity:0; transform:translateY(.4em);
  animation:sube .5s var(--curva) forwards; animation-delay:calc(var(--i) * 42ms);
}
@keyframes sube{ to{ opacity:1; transform:none } }
.velo__barra{
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--musgo); transform:scaleX(0); transform-origin:left;
  animation:barra 1.15s var(--curva-suave) forwards;
}
@keyframes barra{ to{ transform:scaleX(1) } }

/* ── 7 · HERO ────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding-block:7rem var(--e-1x); isolation:isolate;
  overflow:clip;
}
.hero__fondo{
  position:absolute; inset:0; z-index:-2; overflow:clip;
}
.hero__fondo img,.hero__fondo video{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  filter:grayscale(1) contrast(1.14) brightness(.62);
  transform:scale(1.06);
}
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.34) 34%, rgba(10,10,10,.80) 74%, var(--negro) 100%),
    radial-gradient(120% 78% at 76% 26%, rgba(10,10,10,0) 0%, rgba(10,10,10,.72) 100%);
}
/* grano finísimo, generado, sin pedir un archivo más */
.grano::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.055; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.hero__monumento{
  font-family:var(--ui); font-weight:600;
  font-size:var(--t-monumento); line-height:.80; letter-spacing:-.045em;
  margin:0; text-transform:uppercase; color:var(--blanco);
  mix-blend-mode:normal;
  display:block; white-space:nowrap;
}
.hero__monumento em{
  font-style:normal; display:inline-block;
  /* la palabra se revela por barrido de luz */
  background:linear-gradient(100deg,
    var(--blanco) 0 38%, var(--musgo-claro) 47%, var(--blanco) 56% 100%);
  background-size:280% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:barrido 2.6s var(--curva-suave) .35s both;
}
@keyframes barrido{ to{ background-position:0 0 } }

.hero__cuerpo{ width:var(--ancho); margin-inline:auto; position:relative }
.hero__frase{
  font-size:var(--t-4); max-width:19ch; margin:var(--e-0) 0 var(--e-1);
  letter-spacing:-.028em;
}
.hero__frase i{ font-style:italic; color:var(--musgo-claro) }
.hero__pie{
  display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-1);
  align-items:center; justify-content:center; margin-top:var(--e-1);
}

@keyframes cae{ 0%{ transform:scaleY(0); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:top } 56%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
/* ── 8 · LA LECTURA · percepción / intención ─────────────────────
   Reducida a la frase grande y un comparador bajo. Sin párrafo, sin
   leyendas, sin porcentaje y sin scanlines. */
.brecha{ background:var(--negro-alto); padding-block:var(--e-2x) }
.brecha__frase{
  width:var(--ancho); margin:0 auto var(--e-1x);
  font-family:var(--display); font-weight:700;
  font-size:var(--t-5); line-height:1.1; letter-spacing:-.03em;
  max-width:min(18ch,100%);
}
.brecha__frase i{ font-style:italic; color:var(--musgo-claro) }

.eje{
  position:relative; width:var(--ancho); margin-inline:auto;
  aspect-ratio:2/1; overflow:clip; background:var(--negro-carbon);
  touch-action:pan-y; cursor:ew-resize;
}
@media (max-width:720px){ .eje{ aspect-ratio:4/3 } }
.eje__cara{ position:absolute; inset:0 }
.eje__cara img{ width:100%; height:100%; object-fit:cover; object-position:50% 12% }
/* percepción: plana y fría. Nada de ruido encima de las caras. */
.eje__cara--percepcion img{ filter:grayscale(1) contrast(.88) brightness(1.02) }
.eje__cara--intencion{ clip-path:inset(0 0 0 var(--corte,50%)) }
.eje__cara--intencion img{ filter:contrast(1.08) saturate(1.04) }

.eje__linea{
  position:absolute; top:0; bottom:0; left:var(--corte,50%); width:1px;
  background:rgba(255,255,255,.92); z-index:3; pointer-events:none;
}
.eje__tirador{
  position:absolute; top:50%; left:var(--corte,50%); z-index:4;
  transform:translate(-50%,-50%); width:2rem; height:2rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.95); background:rgba(10,10,10,.3);
  pointer-events:none;
}
.eje__tirador::before,.eje__tirador::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-block:3px solid transparent;
}
.eje__tirador::before{ left:.45rem; border-right:4px solid #fff; transform:translateY(-50%) }
.eje__tirador::after{ right:.45rem; border-left:4px solid #fff; transform:translateY(-50%) }

.eje-control{ width:var(--ancho); margin:var(--e-2) auto 0 }
.eje-control label{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.16em;
  text-transform:uppercase; color:var(--plata-honda);
}
.eje-control input{
  -webkit-appearance:none; appearance:none; width:100%; height:2.75rem;
  background:none; cursor:ew-resize; display:block;
}
.eje-control input::-webkit-slider-runnable-track{ height:1px; background:var(--linea-fuerte) }
.eje-control input::-moz-range-track{ height:1px; background:var(--linea-fuerte) }
.eje-control input::-webkit-slider-thumb{
  -webkit-appearance:none; width:1rem; height:1rem; margin-top:-.5rem;
  border-radius:50%; background:var(--blanco); border:none;
}
.eje-control input::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:50%; background:var(--blanco); border:none;
}

/* ── 9 · EL SISTEMA · 5 PIEZAS ───────────────────────────────────
   Retícula editorial en pantallas medianas, carrusel nativo en móvil
   y recorrido horizontal ligado al scroll en escritorio. */
.sistema__cabeza{ width:var(--ancho); margin:0 auto var(--e-1x) }
.sistema__titulo{ font-size:var(--t-5); max-width:16ch }
.riel-envoltura{ position:relative }

.dims{
  width:var(--ancho); margin-inline:auto;
  display:grid; gap:var(--e-1); grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none; padding:0;
}
@media (min-width:1000px){
  .dims{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  /* las dos filas arrancan en la misma columna: nada se corre a la
     derecha al bajar. Tres arriba, dos abajo, alineadas a la izquierda. */
  .dim:nth-child(1){ grid-column:1 / span 2 }
  .dim:nth-child(2){ grid-column:3 / span 2 }
  .dim:nth-child(3){ grid-column:5 / span 2 }
  .dim:nth-child(4){ grid-column:1 / span 2 }
  .dim:nth-child(5){ grid-column:3 / span 2 }
}
@media (max-width:640px){
  /* En celular, el recorrido queda completo y visible, sin carrusel. */
  .dims{
    display:grid; grid-template-columns:1fr; gap:var(--e-1x);
    overflow:visible; padding:0;
  }
  .dim{ width:100%; flex:auto }
}
.dim{ display:grid; grid-template-columns:minmax(0,1fr); gap:.35rem }
.dim__foto{
  aspect-ratio:4/5; overflow:clip; background:var(--negro-carbon);
  margin-bottom:var(--e-3);
}
.dim__foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  transition:transform 1s var(--curva);
}
.dim:hover .dim__foto img{ transform:scale(1.02) }
.dim__n{ font-family:var(--ui); font-size:var(--t--2); letter-spacing:.2em; color:var(--musgo-claro); margin:0 }
.dim__t{ font-size:var(--t-2); margin:0 }
.dim__p{ color:var(--plata); font-size:var(--t--1); margin:0; max-width:min(34ch,100%) }
.riel__progreso{
  width:var(--ancho); margin:var(--e-1) auto 0; height:1px;
  background:var(--linea); position:relative; overflow:hidden;
}
.riel__progreso i{
  position:absolute; inset:0; background:var(--musgo-claro);
  transform:scaleX(var(--avance,0)); transform-origin:left;
}
@media (min-width:1080px){
  .sistema{ padding-bottom:0 }
  .riel-pegado{
    position:sticky; top:0; height:100svh;
    display:flex; align-items:center; overflow:clip;
  }
  .dims{
    display:flex; gap:var(--e-1x); width:max-content; margin:0;
    padding-inline:max(2.5rem,calc((100vw - 1440px)/2));
    will-change:transform;
  }
  .dim{
    width:clamp(340px,30vw,460px); flex:none; min-width:0;
    grid-template-columns:minmax(0,1fr);
  }
  .dim__p{ max-width:100% }
}

/* ── 9b · HUECO PENDIENTE ────────────────────────────────────────
   Mismo criterio que el resto del sitio de Michelle: lo que falta se
   ve, con su etiqueta. No se rellena con una foto que no toca. */
.hueco{
  background-image:linear-gradient(180deg,rgba(10,10,10,.10),rgba(10,10,10,.78)),url("fotos/michelle-vertical.jpg");
  background-size:cover; background-position:center;
  border:1px dashed rgba(255,255,255,.28);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 8px, transparent 8px 16px),
    var(--negro-carbon);
  display:grid; align-content:center; justify-items:start;
  gap:.3rem; padding:var(--e-1); margin:0;
}
.hueco__t{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.2em;
  text-transform:uppercase; color:var(--lemon-borde,#E8D68A); margin:0;
}
.hueco__p{
  font-family:var(--ui); font-size:var(--t--2); color:var(--plata);
  margin:0; line-height:1.55; max-width:26ch;
}
.hueco--ancho{ aspect-ratio:16/9 }

/* ── 10 · FRASE DE CORTE ─────────────────────────────────────────
   Aquí aterrizan los tres pilares que antes iban bajo la portada. */
.corte{
  background:var(--negro); padding-block:var(--e-3x);
  border-block:1px solid var(--linea);
}
.corte__caja{ width:var(--ancho); margin-inline:auto }
.corte__texto{
  font-size:var(--t-6); max-width:min(17ch,100%); letter-spacing:-.035em;
  line-height:1.08; margin:0;
}
.corte__texto i{ font-style:italic; color:var(--musgo-claro) }
.corte__pilares{
  display:flex; flex-wrap:wrap; gap:.6rem var(--e-1x);
  margin:var(--e-1x) 0 0; padding-top:var(--e-1);
  border-top:1px solid var(--linea);
  font-family:var(--ui); font-size:var(--t--2);
  letter-spacing:.24em; text-transform:uppercase; color:var(--plata);
}

/* ── 10b · GUARDARROPA Y COLABORADORA ────────────────────────────── */
.guardarropa__rejilla{
  width:var(--ancho); margin:0 auto var(--e-2x);
  display:grid; gap:var(--e-1x); align-items:center;
}
.guardarropa__foto{ margin:0; aspect-ratio:4/3; overflow:clip; background:var(--negro-carbon) }
.guardarropa__foto img{ width:100%; height:100%; object-fit:cover; object-position:center }
@media (min-width:900px){
  .guardarropa__rejilla{ grid-template-columns:1fr 1fr; gap:var(--e-2x) }
}
.colab{
  width:var(--ancho); margin-inline:auto;
  display:grid; gap:var(--e-1x); align-items:center;
  border-top:1px solid var(--linea); padding-top:var(--e-2x);
}
@media (min-width:900px){
  .colab{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--e-2x) }
}
.colab__foto{
  aspect-ratio:4/5; overflow:clip; margin:0; background:var(--negro-carbon);
}
.colab__foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%; image-rendering:auto;
}
.colab__nombre{ font-size:var(--t-3); margin:0 0 var(--e-2) }
.pendiente-linea{
  border-bottom:1px dashed var(--lemon-borde,#E8D68A);
  color:var(--plata); font-weight:400;
}
.nota-interna{
  margin-top:var(--e-1); padding-left:.9rem;
  border-left:1px solid var(--musgo);
  font-family:var(--ui); font-size:var(--t--2);
  color:var(--musgo-claro); line-height:1.65;
}

/* ── 11 · IMAGE SIGNAL LAB ───────────────────────────────────────── */
.lab{ background:var(--negro-alto) }
.lab__rejilla{
  width:var(--ancho); margin-inline:auto;
  display:grid; gap:var(--e-1x); align-items:start;
}
@media (min-width:1000px){ .lab__rejilla{ grid-template-columns:1.05fr .95fr; gap:var(--e-2x) } }

.lab__titulo{ font-size:var(--t-5); max-width:14ch }
.lab__instruccion{ color:var(--plata); margin:var(--e-1) 0 var(--e-1) }

.lab__set{ border:0; padding:0; margin:0; min-width:0 }
.lab__set legend{ padding:0; margin:0 0 var(--e-2); font-family:var(--ui); font-size:var(--t--2); letter-spacing:.24em; text-transform:uppercase; color:var(--musgo-claro) }
.lab__opciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem }
.lab__op{ position:relative }
.lab__op input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.lab__op span{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  min-height:3.25rem; padding:.85rem 1rem;
  border:1px solid var(--linea); background:transparent;
  font-family:var(--ui); font-size:var(--t--1); letter-spacing:.1em; text-transform:uppercase;
  color:var(--plata); transition:.3s var(--curva);
}
.lab__op span::after{ content:"+"; color:var(--plata-honda); font-size:1.1em; line-height:1 }
.lab__op input:hover + span{ border-color:var(--linea-fuerte); color:var(--blanco) }
.lab__op input:focus-visible + span{ outline:2px solid var(--musgo-claro); outline-offset:3px }
.lab__op input:checked + span{
  border-color:var(--musgo); background:rgba(130,135,62,.14); color:var(--blanco);
}
.lab__op input:checked + span::after{ content:"✓"; color:var(--musgo-claro) }
.lab__op input:disabled + span{ opacity:.35 }
.lab__aviso{
  margin:var(--e-2) 0 0; font-family:var(--ui); font-size:var(--t--2);
  letter-spacing:.06em; color:var(--plata-honda); min-height:1.4em;
}

.lab__lectura{
  border:1px solid var(--linea); background:var(--negro); padding:var(--e-1);
}
.lab__lectura h3{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.24em;
  text-transform:uppercase; color:var(--musgo-claro); font-weight:500; margin-bottom:var(--e-1);
}
.perfil{ display:grid; gap:.85rem; margin-bottom:var(--e-1) }
.perfil__fila{ display:grid; grid-template-columns:10ch 1fr auto; gap:.9rem; align-items:center }
.perfil__nom{ font-family:var(--ui); font-size:var(--t--2); letter-spacing:.14em; text-transform:uppercase; color:var(--plata) }
.perfil__barra{ height:2px; background:rgba(255,255,255,.12); position:relative; overflow:hidden }
.perfil__barra i{
  position:absolute; inset:0; background:var(--musgo-claro);
  transform:scaleX(var(--v,0)); transform-origin:left;
  transition:transform .7s var(--curva);
}
.perfil__val{ font-family:var(--ui); font-size:var(--t--2); color:var(--plata-honda); font-variant-numeric:tabular-nums; min-width:4ch; text-align:right }
.lab__veredicto{ border-top:1px solid var(--linea); padding-top:var(--e-1); margin-top:var(--e-1) }
.lab__veredicto p{ color:var(--plata) }
.lab__veredicto strong{ color:var(--blanco); font-weight:700 }
.lab__nota{
  margin-top:var(--e-1); font-family:var(--ui); font-size:var(--t--2);
  color:var(--plata-honda); line-height:1.6; border-left:1px solid var(--linea); padding-left:.9rem;
}
.lab__sinjs{ margin-top:var(--e-1); color:var(--plata) }
/* ── 12 · PÁGINA DEL PROGRAMA ────────────────────────────────────
   Aquí —y sólo aquí— viven la inversión y el detalle completo. */
.pagina-interna{ background:var(--negro) }
.pagina-interna .cab{ position:sticky }
.ficha{ width:100%; padding-block:7rem var(--e-2x) }
.ficha__rejilla{ width:var(--ancho); margin-inline:auto; display:grid; gap:var(--e-1x) }
@media (min-width:960px){
  .ficha__rejilla{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--e-2x); align-items:start }
}
.ficha__titulo{ font-size:var(--t-5); letter-spacing:-.03em; margin:.35rem 0 .5rem }
.ficha__formato{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.14em;
  text-transform:uppercase; color:var(--musgo-claro); margin:0;
}
.ficha__bloque{ margin-top:var(--e-1x); border-top:1px solid var(--linea); padding-top:var(--e-1) }
.ficha__bloque h2{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.2em;
  text-transform:uppercase; color:var(--plata-honda); font-weight:500; margin:0 0 var(--e-2);
}
.ficha__ul{ list-style:none; display:grid; gap:.45rem; padding:0; margin:0 }
.ficha__ul li{
  position:relative; padding-left:1.1rem; color:var(--plata); line-height:1.6;
}
.ficha__ul li::before{
  content:""; position:absolute; left:0; top:.72em; width:.45rem; height:1px; background:var(--musgo);
}
.ficha__nota{
  font-family:var(--ui); font-size:var(--t--2); color:var(--plata-honda);
  line-height:1.65; margin:var(--e-2) 0 0;
}
.ficha__caja{ border:1px solid var(--linea); background:var(--negro-carbon); padding:var(--e-1) }
.ficha__inversion{ border-bottom:1px solid var(--linea); padding-bottom:var(--e-1); margin-bottom:var(--e-1) }
.ficha__etq{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.2em;
  text-transform:uppercase; color:var(--plata-honda); margin:0 0 .35rem;
}
.ficha__cifra{ font-size:var(--t-3); letter-spacing:-.02em; margin:0; line-height:1.15 }
.ficha__pie{ width:var(--ancho); margin:var(--e-2x) auto 0 }

.reserva{ display:grid; gap:var(--e-2) }
.reserva__campo{ display:grid; gap:.35rem; margin:0 }
.reserva__campo label{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.14em;
  text-transform:uppercase; color:var(--plata-honda);
}
.reserva__campo input{
  font:inherit; font-size:var(--t-0); padding:.85rem .9rem; min-height:3rem;
  border:1px solid var(--linea-fuerte); background:var(--negro); color:var(--blanco);
  border-radius:0; width:100%;
}
.reserva__campo input:focus-visible{ outline:2px solid var(--musgo-claro); outline-offset:1px }
.reserva .btn{ width:100% }
.reserva__estado{ font-family:var(--ui); font-size:var(--t--2); color:var(--musgo-claro); margin:0; line-height:1.6 }
.reserva__estado[data-error]{ color:#E8A9A0 }
.reserva__legal{
  font-family:var(--ui); font-size:var(--t--2); color:var(--plata-honda);
  line-height:1.65; margin:0;
}

/* enlace de texto discreto, para acciones secundarias */
.enlace{
  font-family:var(--ui); font-size:var(--t--1); letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--plata);
  border-bottom:1px solid var(--linea); padding-bottom:.25rem;
  display:inline-flex; align-items:center; min-height:2.75rem;
  transition:color .3s var(--curva), border-color .3s var(--curva);
}
.enlace:hover{ color:var(--blanco); border-color:var(--blanco) }

/* ── 13 · NIVELES ────────────────────────────────────────────────── */
.niveles{ background:var(--negro-alto) }
.niveles__cabeza{ width:var(--ancho); margin:0 auto var(--e-1x) }
.niveles__titulo{ font-size:var(--t-5); max-width:13ch }
.niveles__lista{ width:var(--ancho); margin-inline:auto; display:grid; gap:var(--e-1) }
@media (min-width:1100px){ .niveles__lista{ grid-template-columns:repeat(3,1fr); align-items:stretch } }

.nivel{
  border:1px solid var(--linea); background:var(--negro);
  padding:var(--e-1); display:flex; flex-direction:column; gap:var(--e-2);
  position:relative; transition:border-color .4s var(--curva), background .4s var(--curva);
}
.nivel:hover{ border-color:var(--linea-fuerte) }
.nivel--destacado{ border-color:var(--musgo); background:linear-gradient(180deg, rgba(130,135,62,.09), transparent 42%) }
.nivel__n{ font-family:var(--ui); font-size:var(--t--2); letter-spacing:.26em; color:var(--plata-honda) }
.nivel__nombre{ font-size:var(--t-3); letter-spacing:-.02em }
.nivel__formato{
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.14em;
  text-transform:uppercase; color:var(--musgo-claro); margin:0;
}
.nivel__resumen{ color:var(--plata); margin:0 }
.nivel .btn{ width:100% }



/* ── 14 · PROCESO ────────────────────────────────────────────────── */
.proceso__cabeza{ width:var(--ancho); margin:0 auto var(--e-1x) }
@media (min-width:1000px){
      }
.paso[data-visto] .paso[data-visto] .paso__n{ font-family:var(--ui); font-size:var(--t--2); letter-spacing:.24em; color:var(--plata-honda) }
.paso__t{ font-size:var(--t-2); margin:.35rem 0 .5rem; letter-spacing:-.02em }
.paso__p{ color:var(--plata); font-size:var(--t--1); margin:0; max-width:min(34ch,100%) }

/* ── 15 · FAQ ────────────────────────────────────────────────────── */
.faq__rejilla{
  width:var(--ancho); margin-inline:auto;
}
.faq__cabeza{
  display:grid; gap:var(--e-1); align-items:end;
  margin-bottom:var(--e-1x); padding-bottom:var(--e-1x);
  border-bottom:1px solid var(--linea);
}
.faq__cabeza .rotulo{ margin-bottom:0 }
.faq__cabeza .niveles__titulo{ max-width:18ch }
@media (min-width:900px){
  .faq__cabeza{
    grid-template-columns:minmax(12rem,.35fr) minmax(0,1fr);
    gap:var(--e-2x);
  }
}
.faq__lista{ display:grid; gap:var(--e-1x); counter-reset:faq }
@media (min-width:900px){
  .faq__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-2x) }
}
.faq__columna{ min-width:0 }
.pregunta{ border-top:1px solid var(--linea); counter-increment:faq }
.pregunta:last-child{ border-bottom:1px solid var(--linea) }
.pregunta summary{
  cursor:pointer; list-style:none; padding:var(--e-1) 0;
  display:grid; grid-template-columns:2.5rem minmax(0,1fr) 1rem;
  gap:var(--e-1); align-items:center;
  font-size:var(--t-0); letter-spacing:-.012em;
  transition:color .3s var(--curva);
}
.pregunta summary::-webkit-details-marker{ display:none }
.pregunta summary:hover{ color:var(--musgo-claro) }
.pregunta summary::before{
  content:counter(faq,decimal-leading-zero);
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.16em;
  color:var(--musgo-claro);
}
.pregunta summary::after{
  content:""; width:.7rem; height:.7rem; justify-self:end;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-20%) rotate(45deg); transition:transform .35s var(--curva);
}
.pregunta[open] summary::after{ transform:translateY(20%) rotate(-135deg) }
.pregunta__r{
  padding:0 var(--e-1) var(--e-1) calc(2.5rem + var(--e-1));
  color:var(--plata); max-width:min(58ch,100%);
}
.pregunta__pendiente{
  display:block; margin-top:.7rem; padding-left:.9rem;
  border-left:1px solid var(--musgo);
  font-family:var(--ui); font-size:var(--t--2); color:var(--musgo-claro); line-height:1.6;
}

/* ── 16 · CIERRE ─────────────────────────────────────────────────── */
.cierre{
  position:relative; min-height:100svh; display:grid; place-items:center;
  text-align:center; overflow:clip; isolation:isolate; padding-block:var(--e-3x);
}
.cierre__fondo{ position:absolute; inset:0; z-index:-2 }
.cierre__fondo img{ width:100%; height:100%; object-fit:cover; object-position:50% 24%; filter:grayscale(1) brightness(.5) contrast(1.15) }
.cierre__fondo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--negro) 0%, rgba(10,10,10,.42) 34%, rgba(10,10,10,.86) 78%, var(--negro) 100%);
}
.cierre__marca{
  font-size:var(--t-7); letter-spacing:-.045em; line-height:.92; text-transform:none;
}
.cierre__marca i{ font-style:italic; color:var(--musgo-claro) }
.cierre__p{ color:var(--plata); max-width:38ch; margin:var(--e-1) auto var(--e-1x) }
.cierre__botones{ display:flex; flex-wrap:wrap; gap:var(--e-2); justify-content:center }

/* ── 17 · PIE ────────────────────────────────────────────────────── */
.pie{ border-top:1px solid var(--linea); padding-block:var(--e-1x); background:var(--negro-alto) }
.pie__fila{
  width:var(--ancho); margin-inline:auto; display:grid; gap:var(--e-1);
  font-family:var(--ui); font-size:var(--t--2); color:var(--plata-honda);
}
@media (min-width:820px){ .pie__fila{ grid-template-columns:1fr auto; align-items:center } }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; list-style:none }
.pie__enlaces a{ text-decoration:none; letter-spacing:.16em; text-transform:uppercase; color:var(--plata) }
.pie__enlaces a:hover{ color:var(--blanco) }
.pie__nota{ margin:var(--e-1) 0 0; max-width:74ch; line-height:1.7 }

/* ── 13b · NIVELES · acceso escalonado y acordeón ────────────────
   Sin precios: la cifra vive en programa/. Aquí sólo el estado. */
.nivel__fila{ display:flex; align-items:baseline; gap:.8rem }
.nivel__detalle{
  font-family:var(--ui); font-size:var(--t--2); color:var(--plata-honda);
  margin:0; line-height:1.6;
}
.nivel__estado{
  display:inline-flex; align-items:center; gap:.55rem; align-self:flex-start;
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.1em;
  text-transform:uppercase; color:var(--plata);
  border:1px solid var(--linea); padding:.42rem .75rem;
}
.nivel__estado::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%;
  background:var(--plata-honda); flex:none;
}
.nivel__estado[data-abierto]{ color:var(--musgo-claro); border-color:rgba(163,168,87,.42) }
.nivel__estado[data-abierto]::before{ background:currentColor }
.nivel--bloqueado{ opacity:.82 }
.nivel__cerrado{
  font-family:var(--ui); font-size:var(--t--1); letter-spacing:.13em;
  text-transform:uppercase; color:var(--plata-honda);
  border:1px dashed var(--linea); padding:.95rem 1.7rem; text-align:center;
  margin:0; min-height:3.25rem; display:flex; align-items:center; justify-content:center;
}
.niveles__nota{
  width:var(--ancho); margin:var(--e-1x) auto 0;
  font-family:var(--ui); font-size:var(--t--2); color:var(--plata-honda);
  max-width:min(74ch,100%); line-height:1.7;
}

/* acordeón nativo: semántico, con teclado, estado anunciado por el navegador */
.mas{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea) }
.mas > summary{
  cursor:pointer; list-style:none; padding:.9rem 0; min-height:2.75rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--ui); font-size:var(--t--2); letter-spacing:.14em;
  text-transform:uppercase; color:var(--plata);
  transition:color .25s var(--curva);
}
.mas > summary::-webkit-details-marker{ display:none }
.mas > summary:hover{ color:var(--blanco) }
.mas > summary::after{
  content:""; width:.62rem; height:.62rem; flex:none;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--curva);
}
.mas[open] > summary::after{ transform:translateY(2px) rotate(-135deg) }
.mas__cuerpo{ padding-bottom:var(--e-2) }
.mas ul{ list-style:none; display:grid; gap:.4rem; padding:0; margin:0 }
.mas li{
  position:relative; padding-left:1rem; font-size:var(--t--1);
  color:var(--plata); line-height:1.55;
}
.mas li::before{
  content:""; position:absolute; left:0; top:.7em; width:.4rem; height:1px;
  background:var(--musgo);
}

/* ── 14b · PROCESO · cuatro pasos, sin línea de tiempo ───────────── */
.proceso{
  width:var(--ancho); margin-inline:auto; display:grid; gap:var(--e-1);
  list-style:none; padding:0;
}
@media (min-width:820px){ .proceso{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e-1x) } }
.paso{ border-top:1px solid var(--linea); padding:var(--e-2) 0 0 }

@media (max-width:760px){
  :root{ --ancho:min(calc(100% - 2rem),42rem); --e-3x:clamp(4.5rem,14vw,6.5rem) }
  .cab__marca span{ display:none }
  .hero{ min-height:min(48rem,100svh); padding-block:6.75rem 2.5rem }
  .hero__monumento{ white-space:normal; font-size:clamp(3.2rem,16vw,5.1rem); line-height:.84 }
  .hero__frase{ max-width:22ch; font-size:var(--t-2); line-height:1.28 }
  .hero__pie .btn{ width:100% }
  .brecha__frase,.sistema__cabeza,.niveles__cabeza,.proceso__cabeza,.faq__cabeza,.colab__texto{ text-align:center }
  .rotulo,.faq__cabeza .rotulo{ justify-content:center }
  .dims{ margin-inline:auto; width:var(--ancho); padding-inline:0 }
  .lab__opciones{ grid-template-columns:1fr }
}

@media (min-width:761px){
  .sistema__cabeza,.niveles__cabeza,.proceso__cabeza,.faq__cabeza{
    display:grid; justify-items:center; text-align:center;
  }
  .sistema__cabeza .rotulo,.niveles__cabeza .rotulo,.proceso__cabeza .rotulo,.faq__cabeza .rotulo{ justify-content:center }
  .sistema__titulo,.niveles__titulo,.faq__cabeza .niveles__titulo{ margin-inline:auto }
  .sistema__cabeza .plomo,.niveles__cabeza .plomo,.faq__cabeza .plomo{ margin-inline:auto; max-width:62ch }
}

/* Sistema editorial: un eje por sección, texto de lectura limitado y
   alineación izquierda reservada a tarjetas y listas escaneables. */
.plomo,.dim__p,.paso__p,.nivel__resumen,.pregunta__r{ max-width:68ch }
.dim__t,.nivel__nombre,.paso__t{ text-wrap:balance }
@media (max-width:760px){
  .sistema__titulo,.niveles__titulo,.faq__cabeza .niveles__titulo{ margin-inline:auto }
  .plomo,.dim__p,.paso__p,.nivel__resumen,.pregunta__r{ max-width:34ch; margin-inline:auto }
  .nivel__fila,.paso,.pregunta summary{ text-align:left }
}

/* ── 20b · ALTERNATIVA SIN JAVASCRIPT ────────────────────────────── */
.sin-js{ font-family:var(--ui); font-size:var(--t--1); color:var(--plata); margin:0 }
.js .sin-js{ display:none }

/* ── 18 · REVELADOS LIGADOS AL SCROLL ────────────────────────────── */
[data-revelar]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--curva) var(--retraso,0ms), transform .9s var(--curva) var(--retraso,0ms);
}
[data-revelar][data-visto]{ opacity:1; transform:none }

/* barra de progreso de lectura */
.progreso{
  position:fixed; inset:0 0 auto; height:2px; z-index:99; background:transparent;
}
.progreso i{
  display:block; height:100%; background:var(--musgo-claro);
  transform:scaleX(var(--avance,0)); transform-origin:left;
}

/* ── 19 · MOVIMIENTO REDUCIDO ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  [data-revelar]{ opacity:1; transform:none }
  .dims{ scroll-snap-type:none }
  .riel-pegado{ position:static; height:auto; display:block }
  .dims{
    display:grid!important; width:var(--ancho)!important;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
    padding-inline:0!important; transform:none!important;
  }
  .dim:nth-child(n){ grid-column:auto; width:auto; flex:auto }
  .riel__progreso{ display:none }
  .hero__monumento em{ background:none; -webkit-text-fill-color:var(--blanco); color:var(--blanco) }
  .velo{ display:none }
  }

/* ── 20 · SIN JAVASCRIPT ─────────────────────────────────────────── */
.no-js .velo{ display:none }
.no-js [data-revelar]{ opacity:1; transform:none }
.no-js .lab{ display:none }
.no-js .eje__tirador,.no-js .eje__linea{ display:none }
.no-js .eje__cara--intencion{ clip-path:inset(0 0 0 50%) }
.no-js .eje-control{ display:none }
.js .lab__sinjs{ display:none }
.no-js .riel-pegado{ position:static; height:auto; display:block }
.no-js .dims{
  display:grid; width:var(--ancho); grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  padding-inline:0; transform:none;
}
.no-js .dim:nth-child(n){ grid-column:auto; width:auto; flex:auto }
.no-js .riel__progreso{ display:none }

/* ── 21 · IMPRESIÓN ──────────────────────────────────────────────── */
@media print{
  .cab,.velo,.progreso,.baja,.panel{ display:none!important }
  body{ background:#fff; color:#000 }
  .hero{ min-height:auto }
}