:root{
    --bg:#0B0711; --bg2:#140C1E; --surface:#1B1327; --surface-2:#241834;
    --border:#2E2140; --border-2:#3A2A52;
    --violet:#7C3AED; --violet-bright:#A78BFA; --violet-soft:rgba(124,58,237,.16);
    --gold:#F5C56B; --text:#F4F1FB; --muted:#A79BB8; --muted-2:#8F86A6;
    --ok:#34D399;

    /* ---- capa visual ---- */
    /* Escala de espaciado: pasos de 4px con salto grande arriba, para que el
       ritmo vertical sea decisión y no acumulación de márgenes sueltos. */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px;
    --sp-6:30px; --sp-7:40px; --sp-8:56px;

    /* Radios concéntricos: el interior siempre = exterior - padding, o las
       curvas no son paralelas y se nota aunque nadie sepa por qué. */
    --r-xl:28px; --r-lg:20px; --r-md:15px; --r-sm:11px; --r-pill:999px;

    /* Sombras ambientales difusas en dos capas: contacto corto + halo largo.
       Una sola sombra dura lee como sticker pegado. */
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -4px rgba(0,0,0,.5);
    --sh-2:0 2px 6px rgba(0,0,0,.35), 0 16px 32px -12px rgba(0,0,0,.6);
    --sh-3:0 8px 24px -8px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.75);
    --sh-cta:0 1px 0 rgba(255,255,255,.14) inset, 0 8px 20px -6px rgba(124,58,237,.55),
             0 18px 40px -16px rgba(124,58,237,.45);

    /* Luz superior: el borde de arriba de cada superficie recibe un highlight
       de 1px. Es lo que separa "caja de color" de "material". */
    --luz:inset 0 1px 0 rgba(255,255,255,.07);
    --luz-fuerte:inset 0 1px 0 rgba(255,255,255,.12);

    /* Hairlines: bordes por color translúcido, no por gris opaco. */
    --hair:rgba(255,255,255,.07);
    --hair-2:rgba(255,255,255,.11);

    /* Curvas propias: las nativas de CSS son débiles y hacen que el motion
       se sienta accidental en vez de intencional. */
    --ease-out:cubic-bezier(.23,1,.32,1);      /* entradas: arranca rápido, se siente inmediato */
    --ease-in-out:cubic-bezier(.77,0,.175,1);  /* movimiento en pantalla */
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased;
    background:
      radial-gradient(56% 30% at 82% 4%,  rgba(124,58,237,.15) 0%, transparent 60%),
      radial-gradient(48% 26% at 10% 22%, rgba(245,197,107,.06) 0%, transparent 58%),
      var(--bg);
    background-attachment:fixed}
  /* Grano fijo: le saca el plano perfecto al degradé sin costar repaints. */
  body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:520px;margin:0 auto;padding:0 22px}
  section{padding:var(--sp-8) 0}
  section + section{border-top:1px solid rgba(255,255,255,.045)}
  /* placeholders visibles para el equipo */
  .todo{background:rgba(245,197,107,.14);border:1px dashed var(--gold);color:var(--gold);
    border-radius:8px;padding:2px 8px;font-size:.92em}
  /* header sticky con countdown */
  .hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
    padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--hair);
    background:rgba(11,7,17,.72);backdrop-filter:blur(14px) saturate(140%)}
  .brand{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);
    font-weight:600;white-space:nowrap;display:flex;align-items:baseline;gap:6px}
  .brand b{color:var(--text);letter-spacing:.16em}
  .brand i{font-style:normal;font-size:9.5px;opacity:.62;letter-spacing:.1em}
  .live{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);white-space:nowrap}
  .cd{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:600;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .pulse{width:7px;height:7px;border-radius:99px;background:var(--ok);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pl 1.8s infinite}
  @keyframes pl{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
  /* hero */
  .hero{background:radial-gradient(120% 80% at 50% -10%, #1a0f2b 0%, var(--bg2) 45%, var(--bg) 100%);padding-top:34px}
  .eyebrow,.sec-eyebrow{display:inline-flex;align-items:center;gap:7px;
    font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--violet-bright);margin-bottom:var(--sp-5);padding:6px 11px;
    border-radius:var(--r-pill);background:var(--violet-soft);
    border:1px solid rgba(167,139,250,.24);box-shadow:var(--luz)}
  /* clamp con tope en el tamaño aprobado: a 390px y más se ve idéntico a
     lo que validó el cliente; solo baja en pantallas más angostas. */
  h1{font-size:clamp(24px,7.7vw,30px);line-height:1.14;letter-spacing:-.02em;font-weight:800;margin-bottom:14px}
  .gold{color:var(--gold)}
  .lead{color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:20px}
  .lead b{color:var(--text)}
  /* video slot */
  .video{position:relative;border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--hair-2);aspect-ratio:16/9;margin:var(--sp-5) 0 var(--sp-6);
    display:grid;place-items:center;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    box-shadow:var(--sh-2), var(--luz)}
  .video .ph{color:var(--muted-2);font-size:13px;text-align:center;padding:14px}
  .video video{width:100%;height:100%;object-fit:cover}
  /* El contenedor es un grid con place-items:center, así que un hijo no se
     estira solo. El player de Vturb trae su propio 16:9 por padding, mismo
     ratio que .video, y necesita ocupar el ancho completo. */
  .video vturb-smartplayer{display:block;width:100%;grid-area:1/1;align-self:stretch;justify-self:stretch}
  /* bullets "sin..." */
  .sins{display:flex;flex-direction:column;gap:10px;margin:18px 0 22px}
  .sin{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
  .sin b{color:var(--text)}
  .sin .x{flex:0 0 20px;height:20px;border-radius:99px;background:var(--violet-soft);border:1px solid var(--violet);
    display:grid;place-items:center;font-size:11px;color:var(--violet-bright)}
  /* CTA */
  .cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:var(--sp-5);
    border-radius:var(--r-pill);border:none;cursor:pointer;text-decoration:none;letter-spacing:-.01em;
    background:linear-gradient(180deg,#9F7BF5,var(--violet) 62%,#6D2FE0);color:#fff;font-size:16px;font-weight:700;
    box-shadow:var(--sh-cta);
    transition:transform 160ms var(--ease-out),filter 160ms var(--ease-out)}
  .cta:active{transform:scale(.97)}
  .cta > span:last-child{
    width:26px;height:26px;flex:0 0 26px;border-radius:var(--r-pill);
    display:grid;place-items:center;font-size:13px;
    background:rgba(255,255,255,.16);box-shadow:var(--luz-fuerte);
    transition:transform 220ms var(--ease-out),background 220ms var(--ease-out)}
  .cta:active > span:last-child{transform:translate(2px,-1px);background:rgba(255,255,255,.24)}
  .cta-sub{font-size:12px;color:var(--muted-2);text-align:center;margin-top:10px}
  /* card evento */
  .card{border-radius:var(--r-lg);padding:var(--sp-5);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    border:1px solid var(--hair);box-shadow:var(--sh-1), var(--luz)}
  .card .row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:5px 0}
  .card .row span{color:var(--muted)} .card .row b{color:var(--text)}
  .schedule .h{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--muted)}
  .schedule .h b{color:var(--text);font-family:var(--mono)}
  .gift{margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--violet-soft);
    border:1px solid var(--violet);font-size:13px;color:var(--text)}
  /* section titles */
  h2{font-size:clamp(20px,5.6vw,23px);line-height:1.2;letter-spacing:-.01em;font-weight:750;margin-bottom:16px}

  /* learn list */
  .learn{display:flex;flex-direction:column;gap:12px}
  .learn .it{display:flex;gap:var(--sp-3);align-items:flex-start;border-radius:var(--r-md);
    padding:var(--sp-4) var(--sp-5);font-size:14.5px;color:var(--muted);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    border:1px solid var(--hair);box-shadow:var(--sh-1), var(--luz)}
  .learn .it b{color:var(--text)}
  .learn .n{flex:0 0 26px;height:26px;border-radius:9px;background:var(--violet-soft);border:1px solid var(--violet);
    display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--violet-bright)}
  /* steps (CPR en página) */
  .steps{display:flex;flex-direction:column;gap:0}
  .step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
  .step:last-child{border-bottom:none}
  .step .n{flex:0 0 34px;height:34px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border-2);
    display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--gold)}
  .step h3{font-size:15.5px;margin-bottom:4px}
  .step p{font-size:13.5px;color:var(--muted);line-height:1.5}
  /* resultados */
  .proofgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .shot{aspect-ratio:4/5;border-radius:var(--r-md);border:1px solid var(--hair);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    box-shadow:var(--sh-1), var(--luz);
    display:grid;place-items:center;color:var(--muted-2);font-size:11.5px;text-align:center;padding:var(--sp-3)}
  .arc{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
    border-radius:99px;padding:7px 13px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
  .arc b{color:var(--gold);font-family:var(--mono)}
  /* faq */
  details{border:1px solid var(--hair);border-radius:var(--r-md);margin-bottom:var(--sp-2);overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    box-shadow:var(--sh-1), var(--luz)}
  summary{padding:15px 16px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
  summary::after{content:"+";color:var(--violet-bright);font-weight:700}
  details[open] summary::after{content:"–"}
  details p{padding:0 16px 15px;font-size:13.5px;color:var(--muted);line-height:1.55}
  /* footer */
  .legal{font-size:11.5px;color:var(--muted-2);line-height:1.6}
  footer{padding:26px 0 60px;border-top:1px solid var(--border)}
  /* toast push */
  .toast{position:fixed;left:14px;right:14px;bottom:14px;max-width:492px;margin:0 auto;background:rgba(27,19,39,.96);
    border:1px solid var(--border-2);border-radius:14px;padding:11px 13px;display:flex;align-items:center;gap:11px;
    box-shadow:0 16px 40px -12px rgba(0,0,0,.7);backdrop-filter:blur(6px);
    transform:translateY(140%);opacity:0;z-index:30;
    transition:transform 200ms var(--ease-out),opacity 160ms var(--ease-out)}
  .toast.show{transform:translateY(0);opacity:1;
    transition:transform 400ms var(--ease-out),opacity 300ms var(--ease-out)}
  .toast .ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
    background:var(--violet-soft);border:1px solid var(--violet);font-size:15px}
  .toast .tx{font-size:12.5px;line-height:1.35} .toast .tx b{color:var(--text)} .toast .tx span{color:var(--muted)}
  /* Los hover van detrás del gate de puntero: en touch quedan pegados tras el tap. */
  @media (hover: hover) and (pointer: fine){
    .cta:hover{filter:brightness(1.06)}
    summary:hover{color:var(--violet-bright)}
  }

  /* La plantilla no traía NINGÚN estado de foco: 8 interactivos (3 CTAs y 5 del
     FAQ) sin forma de saber dónde está parado quien navega con teclado.
     Solo aparece en navegación por teclado: con mouse no cambia nada. */
  :focus-visible{outline:2px solid var(--violet-bright);outline-offset:2px;border-radius:4px}
  .cta:focus-visible{outline-offset:3px}
  summary:focus-visible{outline-offset:-2px;border-radius:14px}

  /* El summary del FAQ es el tap target más chico de la página. */
  summary{min-height:44px;align-items:center;transition:color 150ms var(--ease-out)}
  details[open] summary{color:var(--text)}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important;scroll-behavior:auto!important}
    .toast{transition:opacity 150ms linear!important}
    .cta:active{transform:none!important}
  }