/* ============================================================
   LÓGICA ESCÉNICA · Home de conversión
   Se apoya en interior.css (tokens, nav, cta, exp, pillars, foot).
   Añade: spotlight, hero accionable, manifiesto breve, prueba social.
   ============================================================ */

/* Spotlight sutil del cursor (fuente de atención) — solo carbón */
.spot{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,40%),
    rgba(247,255,54,.045), rgba(247,255,54,0) 60%);
  mix-blend-mode:screen;opacity:0;transition:opacity .6s var(--ease)}
body.pointer .spot{opacity:1}
@media (prefers-reduced-motion:reduce){.spot{display:none}}

/* ============================================================
   HERO — claridad + deseo + acción en el primer pantallazo
   ============================================================ */
.hero{position:relative;min-height:clamp(600px,92svh,1000px);display:flex;align-items:center;
  padding:clamp(6rem,14vh,9rem) 0 clamp(3rem,7vh,5rem);overflow:hidden;border-bottom:1px solid var(--line)}
.hero__img{position:absolute;inset:0;width:100%;z-index:0}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:contrast(1.04) saturate(.95) brightness(1.08)}
.hero__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.72) 32%,rgba(11,11,11,.35) 62%,rgba(11,11,11,.1) 100%)}
.hero__in{position:relative;z-index:3;width:var(--wrap);margin-inline:auto}
.hero .eyebrow{color:var(--yellow);opacity:.9;margin-bottom:1.4rem}
.hero h1{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;line-height:.86;
  font-size:clamp(3rem,1.5rem + 8vw,8rem);text-transform:uppercase;color:var(--ivory)}
.hero .sub{max-width:40ch;margin:1.8rem 0 0;color:rgba(244,243,239,.82);
  font-size:clamp(1.1rem,1rem + .7vw,1.45rem);line-height:1.5}
.hero .sub strong{color:#fff;font-weight:600}
.hero .btnrow{justify-content:flex-start;margin-top:2.2rem}
.hero .coords{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid rgba(244,243,239,.18)}
.hero .coords span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,243,239,.6);display:flex;align-items:center;gap:.55rem}
.hero .coords span::before{content:"";width:5px;height:5px;background:var(--yellow);flex:none}
.hero .scrollcue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero .scrollcue .ln{width:1px;height:40px;background:linear-gradient(var(--yellow),transparent);
  animation:hdrop 2.2s var(--ease) infinite}
@keyframes hdrop{0%{transform:scaleY(0);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .scrollcue .ln{animation:none}}
@media(max-width:820px){
  .hero__img{width:100%}
  .hero__img::after{background:linear-gradient(180deg,rgba(11,11,11,.75),rgba(11,11,11,.55) 40%,rgba(11,11,11,.92))}
  .hero .sub{color:rgba(244,243,239,.9)}
}

/* Botón grande */
.btn--lg{padding:1.15rem 1.9rem;font-size:.8rem}

/* ============================================================
   MANIFIESTO breve — el prólogo, domesticado
   ============================================================ */
.mani{padding:clamp(4rem,12vh,8rem) 0;border-bottom:1px solid var(--line);text-align:center;
  background:radial-gradient(120% 80% at 50% 30%,rgba(247,255,54,.04),transparent 55%)}
.mani .line{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(1.7rem,1.1rem + 3.4vw,3.6rem);max-width:20ch;margin:0 auto 3rem;color:var(--fg)}
.mani .line em{font-style:normal;background:var(--yellow);color:#111;padding:0 .12em}
.words3{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2.4rem}
.words3 .w{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.4rem,1rem + 2.6vw,3rem);color:var(--faint);transition:color .6s var(--ease),background .6s var(--ease)}
.words3 .w.on{background:var(--yellow);color:#111;padding:0 .2em}
.mani .foot-note{margin-top:2.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}

/* ============================================================
   PROBLEMA del actor
   ============================================================ */
.prob{padding:clamp(3rem,8vh,5.5rem) 0;border-bottom:1px solid var(--line)}
.prob .pains{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:2rem}
.prob .pain{background:var(--card);padding:clamp(1.4rem,3vw,2.2rem);
  transition:background .3s var(--ease),color .3s var(--ease)}
.prob .pain .q{font-family:var(--disp);font-weight:800;font-size:clamp(1.1rem,1rem + 1vw,1.5rem);
  line-height:1.15;margin-bottom:.6rem;color:var(--fg);transition:color .3s var(--ease)}
.prob .pain p{color:var(--muted);font-size:.95rem;transition:color .3s var(--ease)}
.prob .pain:hover{background:#0b0b0b}
.prob .pain:hover .q{color:#F4F3EF}
.prob .pain:hover p{color:rgba(244,243,239,.72)}
@media(max-width:720px){.prob .pains{grid-template-columns:1fr}}

/* ============================================================
   BLOQUE SISTEMA (respuesta) — reutiliza .pillars de interior.css
   ============================================================ */
.answer{padding:clamp(3rem,8vh,5.5rem) 0;border-bottom:1px solid var(--line)}

/* Secciones home genéricas */
.hsec{padding:clamp(3rem,8vh,5.5rem) 0;border-bottom:1px solid var(--line)}
.hsec .head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}

/* ============================================================
   ELIGE TU PUNTO DE ENTRADA — orientación inmediata tras el hero
   ============================================================ */
.entry{padding:clamp(2.4rem,6vh,4rem) 0;border-bottom:1px solid var(--line);background:var(--ivory)}
.entry .lead{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:.8rem 1.4rem;margin-bottom:1.6rem}
.entry h2{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;line-height:1;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);color:#141414;max-width:16ch}
.entry .lead p{color:rgba(20,20,20,.6);max-width:30ch;font-size:.98rem}
.entry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.entry-c{background:#fff;padding:clamp(1.3rem,2.2vw,1.7rem);display:flex;flex-direction:column;gap:.6rem;
  text-decoration:none;color:#141414;transition:background .3s var(--ease),color .3s var(--ease);min-height:210px}
.entry-c .ek{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,20,20,.45);transition:color .3s var(--ease)}
.entry-c h3{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;font-size:1.18rem;line-height:1.08}
.entry-c p{color:rgba(20,20,20,.62);font-size:.9rem;line-height:1.5;transition:color .3s var(--ease)}
.entry-c .ego{margin-top:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#141414;transition:color .3s var(--ease)}
.entry-c:hover{background:#0b0b0b;color:#F4F3EF}
.entry-c:hover .ek{color:var(--yellow)}
.entry-c:hover p{color:rgba(244,243,239,.72)}
.entry-c:hover .ego{color:var(--yellow)}
@media(max-width:860px){.entry-grid{grid-template-columns:1fr 1fr}.entry-c{min-height:0}}
@media(max-width:520px){.entry-grid{grid-template-columns:1fr}}

/* ============================================================
   LEGIBILIDAD MÓVIL — más claridad, menos gris, párrafos legibles
   ============================================================ */
@media(max-width:640px){
  body{font-size:16px;line-height:1.55}
  .prob .pain p,.pillar .muted,.trio .c p,.rev p{color:rgba(20,20,20,.72)}
  body.tone-carbon .muted,body.tone-carbon .trio .c p{color:rgba(244,243,239,.72)}
  /* Secciones de fondo claro: el texto secundario SIEMPRE oscuro, aunque el body sea tone-carbon */
  body.tone-carbon .band-ivory .muted,body.tone-carbon .band-ivory .trio .c p{color:rgba(20,20,20,.72)}
  body.tone-carbon .band-y .muted,body.tone-carbon .band-y .trio .c p{color:rgba(0,0,0,.72)}
  .hero .sub{max-width:32ch}
  .sala .kick,.entry-c p,.pain p{max-width:38ch}
}

/* ============================================================
   CAMPUS teaser
   ============================================================ */
.campus-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);overflow:hidden}
.campus-teaser .txt{padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.campus-teaser .pic{position:relative;background:#000;min-height:260px}
.campus-teaser .pic img{width:100%;height:100%;object-fit:cover;opacity:.8}
.campus-teaser .pic .pl{position:absolute;inset:0;margin:auto;width:64px;height:64px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center}
.campus-teaser .pic .pl i{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px}
@media(max-width:760px){.campus-teaser{grid-template-columns:1fr}}

/* ============================================================
   PRUEBA SOCIAL — cifras + testimonios
   ============================================================ */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.metric{background:var(--card);padding:clamp(1.4rem,3vw,2.2rem)}
.metric .n{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;font-size:clamp(1.9rem,1.2rem + 3vw,3.4rem);line-height:.9}
.metric .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:.9rem;line-height:1.5}
@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1px}
.tcard{background:var(--card);padding:clamp(1.6rem,3vw,2.4rem)}
.tcard .quote{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;font-size:clamp(1.2rem,1rem + 1.1vw,1.7rem);line-height:1.1;color:var(--fg)}
.tcard .quote::before{content:"“";color:var(--yellow)}
.tcard .quote::after{content:"”";color:var(--yellow)}
.tcard .who{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:1.2rem}
@media(max-width:760px){.tgrid{grid-template-columns:1fr}}

/* ============================================================
   ADMISIÓN final (home)
   ============================================================ */
.admision{padding:clamp(4rem,11vh,8rem) 0;text-align:center}
.admision h2{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(2rem,1.2rem + 4.4vw,4.6rem);max-width:20ch;margin:0 auto 1.2rem;color:var(--fg)}
.admision h2 .yl{color:#111}
.admision p{color:var(--muted);max-width:46ch;margin:0 auto 2.2rem}
.admision .btn--ghost{border-color:var(--line);color:var(--fg)}
.admision .btn--ghost:hover{border-color:var(--fg);background:transparent}

/* ============================================================
   FILMBAND — fotograma a pantalla completa con frase
   ============================================================ */
.filmband{position:relative;height:clamp(360px,58vh,600px);overflow:hidden}
.filmband img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:contrast(1.05) saturate(.9)}
.filmband .fb-cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(1.4rem,5vw,3.4rem);
  background:linear-gradient(0deg,rgba(11,11,11,.82),rgba(11,11,11,.15) 55%,rgba(11,11,11,.35))}
.filmband .fb-cap p{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.02;color:#fff;
  font-size:clamp(1.6rem,1rem + 3vw,3.4rem);max-width:20ch}
.filmband .fb-cap p .yl{color:#111}
.hero .scrollcue .mono{color:rgba(244,243,239,.6)}

/* ============================================================
   DIAGNÓSTICO — franja amarilla corporativa
   ============================================================ */
#diagnostico{background:var(--yellow);border-bottom:1px solid rgba(0,0,0,.12)}
#diagnostico .eyebrow{color:rgba(0,0,0,.55)}
#diagnostico .h-sec{color:#111}
#diagnostico .muted{color:rgba(0,0,0,.72)}
#diagnostico .dg-opt{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.16);color:#111}
#diagnostico .dg-opt:hover{background:#fff}
#diagnostico .dg-opt .qn{color:rgba(0,0,0,.45)}
#diagnostico .dg-opt.active{background:#111;color:var(--ivory)}
#diagnostico .dg-opt.active .qn{color:rgba(244,243,239,.55)}
#diagnostico .dg-result{background:#fff;border-color:rgba(0,0,0,.14)}