/* ============================================================
   SYNAP · el traje nuevo — «Apple × LinkedIn en el verde de la casa»
   (concepto Kenavia, 31-ago-2026)

   Se carga DESPUÉS de sitio.css, solo cuando la sesión trae la
   compuerta ?traje=nuevo. No toca una sola palabra del sitio:
   re-viste las clases st-* existentes. El día que Diego apruebe,
   esto se funde con sitio.css y muere la compuerta.
   ============================================================ */

@font-face{font-family:'Geist';src:url('/fonts/geist-variable-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono-variable-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ---- Los tokens cambian de traje ---- */
.st-body{
  --font-sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --canvas:#F5F3EF;
  --crema:#F5F3EF;
  --crema-oscura:#ECEAE3;
  --surface:#FFFFFF;
  --tinta:#1C1E21;
  --carbon:#3C4046;
  --piedra:#8A8D93;
  --line:#E6E2DA;
  --line-soft:#EFECE5;
  --grafito:#14170F;
  --grafito-2:#1B1F17;
  --radius-pill:999px;
  --radius-control:12px;
  --radius-card:18px;
  --radius-frame:18px;
  background:var(--canvas);
}

/* la rejilla de papel milimetrado se retira: el lienzo respira solo */
.st-rejilla{background-image:none}
/* el corte de 20 grados cede a la seccion recta */
.st-corte-sup,.st-corte-inf{clip-path:none;margin-top:0}

/* ---- Navegación: barra blanca de negocios ---- */
.st-nav{background:#FFFFFF;border-bottom:1px solid var(--line)}
.st-nav-in{padding-block:15px}
.st-links a{font-family:var(--font-sans);font-size:14.5px;font-weight:500;color:var(--carbon);letter-spacing:0;text-transform:none}
.st-links a:hover,.st-links a[aria-current]{color:var(--tinta)}
.st-brand b{font-weight:800}
.st-brand span{font-size:8px;letter-spacing:.28em}

/* ---- Botones: píldoras ---- */
.st-btn{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:0;padding:13px 28px;border-radius:999px;background:var(--oliva);border-color:var(--oliva);color:#FFFFFF;transition:background .18s ease,border-color .18s ease}
.st-btn:hover{background:var(--oliva-hondo);border-color:var(--oliva-hondo)}
.st-btn.fantasma{background:#FFFFFF;color:var(--tinta);border:1px solid #D8D4CB}
.st-btn.fantasma:hover{background:var(--crema-oscura)}
.st-btn.claro{background:#FFFFFF;color:var(--tinta);border-color:#FFFFFF}
.st-btn.claro:hover{background:var(--crema-oscura);border-color:var(--crema-oscura)}

/* ---- Hero: centrado, tipografía de acabado Apple ---- */
.st-hero{padding-block:96px 84px}
.st-hero-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.st-hero-grid .st-kick{letter-spacing:.32em;color:var(--piedra)}
.st-h1{font-weight:800;font-size:clamp(40px,6vw,84px);line-height:1.0;letter-spacing:-.035em;max-width:16ch;margin-inline:auto}
.st-h1 b{font-weight:800}
.st-lead{font-size:20px;margin-inline:auto;margin-top:30px;max-width:60ch}
.st-acciones{justify-content:center;gap:14px;margin-top:38px}

/* el panel del hero se vuelve la tarjeta de confianza */
.st-hero-grid .st-panel{width:100%;max-width:760px;margin-top:64px;text-align:left;border-radius:var(--radius-card);box-shadow:0 18px 50px rgba(28,30,33,.08)}
.st-panel-h{padding:15px 24px;font-size:10.5px;letter-spacing:.22em}
.st-paso{padding:16px 24px;gap:16px}
.st-punto{width:16px;height:16px;border-width:2px;border-color:var(--tinta)}
.st-punto.lleno{background:var(--tinta);border-color:var(--tinta)}
.st-paso:last-child .st-punto.lleno{background:var(--oliva);border-color:var(--oliva)}
.st-paso b{font-size:15px}
.st-paso i{font-size:11px;margin-top:2px;display:block}
.st-paso .t{font-size:10.5px;letter-spacing:.12em}

/* ---- Cifras: de franja a tarjetas ---- */
.st-cifras{border:0;gap:18px}
.st-cifras div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);border-right:1px solid var(--line);padding:28px 30px}
.st-cifras b{font-weight:800;color:var(--oliva)}

/* ---- Secciones ---- */
.st-sec{padding:96px 0}
.st-sec-t{font-weight:800;font-size:clamp(30px,4vw,52px);letter-spacing:-.03em;line-height:1.05}
.st-sec-p{font-size:18px;line-height:1.7}
.st-oscura{background:var(--grafito)}
.st-oscura .st-kick{color:var(--oliva-luz)}

.st-trayecto{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-card);padding:26px 30px;margin-top:26px}

/* ---- Escenas y capacidades: tarjetas sueltas ---- */
.st-escenas{gap:18px;border:0;background:transparent}
.st-esc{border:1px solid var(--line);border-radius:var(--radius-card);padding:30px 28px 32px}
.st-oscura .st-esc{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--crema)}
.st-oscura .st-esc p{color:rgba(245,243,239,.66)}
.st-esc .num{color:var(--oliva)}
.st-oscura .st-esc .num{color:var(--oliva-luz)}
.st-esc h3{font-weight:700;font-size:22px}

.st-caps{gap:18px;border:0;background:transparent}
.st-cap{border:1px solid var(--line);border-radius:var(--radius-card);padding:26px 26px 28px}
.st-cap h4{font-weight:700}

.st-confianza{gap:18px;border:0;margin-top:36px}
.st-confianza div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);border-right:1px solid var(--line);padding:24px 26px}

/* ---- El teléfono ---- */
.st-tel{border-radius:38px;box-shadow:0 40px 90px rgba(20,23,15,.28)}
.st-tel-pantalla{border-radius:30px}

/* ---- Cierre y formulario ---- */
.st-cierre{padding:96px 0}
.st-campo input,.st-campo select,.st-campo textarea{border-radius:12px}
.st-ok{border-radius:var(--radius-card)}

/* ---- Precios ---- */
.st-escalera{border-radius:var(--radius-card)}
.st-plan{border-radius:var(--radius-card)}
.st-planes{gap:18px}
.st-banda{border-radius:var(--radius-card)}

/* ---- Pie ---- */
.st-pie{background:var(--canvas)}
.st-pie a{font-family:var(--font-sans);font-size:13.5px;color:var(--carbon)}
.st-pie a:hover{color:var(--tinta)}

/* ============================================================
   LA ENTRADA · cuatro actos, una sola vez por visitante
   ============================================================ */
.entrada{position:fixed;inset:0;z-index:100;background:#101211;color:#F4F5EF;overflow:hidden;font-family:var(--font-sans)}
.entrada.se-va{opacity:0;transition:opacity .9s ease}
.entrada-halo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70vw;height:60vh;background:radial-gradient(ellipse at center,rgba(90,107,71,.20),rgba(16,18,17,0) 68%);pointer-events:none}
.entrada-marca{position:absolute;top:44px;left:50%;transform:translateX(-50%);opacity:0;animation:entradaMarca .8s ease .1s both}
@keyframes entradaMarca{from{opacity:0}to{opacity:1}}
.entrada-acto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:0 24px}
.entrada-a1{animation:entradaActo 2.8s cubic-bezier(.22,1,.36,1) .2s both}
.entrada-a2{animation:entradaActo 2.8s cubic-bezier(.22,1,.36,1) 3.1s both}
@keyframes entradaActo{0%{opacity:0;transform:translateY(26px)}14%{opacity:1;transform:translateY(0)}82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-16px)}}

.entrada-a1 div{font-size:clamp(34px,4.6vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:22ch}
.entrada-a2 .peq{font-size:clamp(22px,2.8vw,38px);font-weight:600;color:#C9CDC2}
.entrada-a2 .ke{font-size:clamp(34px,4.4vw,62px);font-weight:900;letter-spacing:-.02em;color:#F4F5EF;margin-top:10px}
.entrada-a2 .ke b{color:#93AC7C;font-weight:900}

.entrada-a3{animation:entradaA3 5.4s ease-out 6.1s both}
@keyframes entradaA3{0%{opacity:0}6%{opacity:1}90%{opacity:1}100%{opacity:0}}
.entrada-hitos{display:flex;justify-content:space-between;align-items:flex-end;width:min(1220px,92vw)}
.entrada-hito{display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0}
.entrada-hito b{font-size:clamp(15px,2.3vw,33px);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.entrada-hito .p{width:12px;height:12px;border-radius:50%;background:#93AC7C}
.entrada-hito.exito b{color:#93AC7C;font-size:clamp(19px,2.9vw,41px)}
.entrada-hito.exito .p{box-shadow:0 0 0 7px rgba(147,172,124,.22)}
.entrada-hito:nth-child(1){animation:entradaHito .7s cubic-bezier(.22,1,.36,1) 6.4s both}
.entrada-hito:nth-child(2){animation:entradaHito .7s cubic-bezier(.22,1,.36,1) 6.95s both}
.entrada-hito:nth-child(3){animation:entradaHito .7s cubic-bezier(.22,1,.36,1) 7.5s both}
.entrada-hito:nth-child(4){animation:entradaHito .7s cubic-bezier(.22,1,.36,1) 8.05s both}
.entrada-hito:nth-child(5){animation:entradaHito .7s cubic-bezier(.22,1,.36,1) 8.6s both}
.entrada-hito:nth-child(6){animation:entradaHito .7s cubic-bezier(.22,1,.36,1) 9.15s both}
.entrada-hito:nth-child(7){animation:entradaExito .8s cubic-bezier(.34,1.56,.64,1) 9.8s both}
@keyframes entradaHito{from{opacity:0;transform:translateY(16px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes entradaExito{from{opacity:0;transform:scale(.82);filter:blur(12px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
.entrada-via{width:min(1020px,80vw);height:2px;background:rgba(147,172,124,.25);position:relative;margin-top:44px}
.entrada-via i{position:absolute;left:0;top:0;height:2px;background:#93AC7C;width:0;animation:entradaVia 3.4s cubic-bezier(.4,0,.2,1) 6.4s both}
@keyframes entradaVia{to{width:100%}}

.entrada-a4{animation:entradaA4 3s cubic-bezier(.22,1,.36,1) 11.7s both}
@keyframes entradaA4{0%{opacity:0;transform:scale(.97)}18%{opacity:1;transform:scale(1)}100%{opacity:1}}
.entrada-a4 .nombre{font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:.02em;margin-top:26px}
.entrada-a4 .nombre b{color:#93AC7C;font-weight:900}
.entrada-a4 .bajada{font-family:var(--font-mono);font-size:12px;letter-spacing:.42em;color:#8A8F84;margin-top:14px;text-transform:uppercase}
.entrada-a4 .eslogan{font-size:22px;font-weight:600;color:#C9CDC2;margin-top:30px}

.entrada-saltar{position:absolute;bottom:32px;right:38px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:#8A8F84;background:none;border:1px solid #2E332A;border-radius:999px;padding:9px 18px;cursor:pointer;text-transform:uppercase}
.entrada-saltar:hover{color:#F4F5EF;border-color:#8A8F84}

@media (prefers-reduced-motion: reduce){.entrada{display:none}}
@media (max-width: 720px){
  .entrada-hitos{flex-direction:column;align-items:center;gap:14px}
  .entrada-hito{flex-direction:row;gap:12px}
  .entrada-via{display:none}
}

/* ---- móvil: el hero centrado hereda las reglas responsivas de sitio.css ---- */
@media (max-width: 900px){
  .st-hero{padding-block:64px 52px}
  .st-cifras{grid-template-columns:1fr;gap:14px}
}

/* ---- El aire bajo las cifras: sin el corte diagonal, el negro subia
   34px y se comia la separacion. Las tarjetas respiran sobre el lienzo. ---- */
.st-body .st-cifras{margin-bottom:84px}

/* ---- El KE del lockup: la regla vieja .st-brand span (hecha para la
   bajada en mono diminuto) capturaba el span del acento y lo bajaba a su
   propia linea. Dentro del wordmark, el span es solo color. ---- */
.st-brand b{font-size:20px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.st-brand b span{display:inline;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;color:var(--oliva);margin:0}