/* =====================================================================
   NOCTURNA — Web Pública B2C
   ---------------------------------------------------------------------
   Estilos globales. Mobile-first. Sin frameworks.
   ===================================================================== */

/* -------------------------------------------------------------------
   FONTS — self-hosted (Nocturna Design System, SIL OFL).
   No Google Fonts / third-party: better LCP, simpler CSP.
   Plus Jakarta Sans = todo el UI · Aspekta = SOLO el logotipo.
   Sin serif, sin itálica (regla de marca). Mono = stack del sistema.
   ------------------------------------------------------------------- */
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("fonts/Aspekta-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* -------------------------------------------------------------------
   TOKENS — Nocturna Design System (subset) + B2C additions
   ------------------------------------------------------------------- */
:root {
  /* Brand */
  --noc-violet:        #9344D1;
  --noc-violet-700:    #752CB9;
  --noc-violet-900:    #58218A;
  --noc-violet-deep:   #30125C;
  --noc-violet-deeper: #1B0A36;
  --noc-violet-line:   #210736;

  /* Cyan — secondary accent (per user) */
  --noc-cyan:          #22D3EE;
  --noc-cyan-soft:     #0EA5BE;
  --noc-cyan-glow:     rgba(34, 211, 238, 0.55);

  /* Canvas / surfaces */
  --noc-ink:           #080812;
  --noc-ink-canvas:    #04020B;
  --noc-ink-surface:   #0C051F;
  --noc-ink-elevated:  #15082B;

  /* Text */
  --noc-paper:         #E3E5EA;
  --noc-text:          #E3E3E3;
  --noc-text-muted:    #9A939F;
  --noc-text-dim:      rgba(227, 227, 227, 0.6);

  /* Semantic */
  --noc-success:       #5EB52C;
  --noc-danger:        #BE2626;
  --noc-warning:       #E1CA17;

  /* Gradients */
  --grad-radial-purple:
    radial-gradient(circle at 50% 50%, #58228A 0%, #1B0A36 100%);
  --grad-hero:
    radial-gradient(ellipse 80% 60% at 50% 0%, #2A0F4E 0%, #0A0418 45%, #04020B 100%);
  --grad-image-fade:
    linear-gradient(180deg, rgba(4,2,11,0) 0%, rgba(4,2,11,0.95) 88%);
  --grad-bottom-fade:
    linear-gradient(180deg, rgba(4,2,11,0) 0%, rgba(4,2,11,1) 26%);

  /* Shadows / glows */
  --shadow-card:      0 0 15px 0 rgba(12, 11, 13, 0.25);
  --shadow-glow:      0 0 30px 0 rgba(147, 68, 209, 0.6);
  --shadow-glow-sm:   0 0 13px 0 rgba(147, 68, 209, 0.9);
  --shadow-glow-lg:   0 0 76px 0 rgba(147, 68, 209, 0.45);
  --shadow-glow-cyan: 0 0 22px 0 rgba(34, 211, 238, 0.55);

  /* Typography */
  /* Brand: display = Plus Jakarta Sans Bold (NO serif, NO italic). */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — mobile-first */
  --fs-mega:     56px;   /* hero display */
  --fs-display:  40px;   /* section heroes */
  --fs-h1:       32px;
  --fs-h2:       26px;
  --fs-h3:       20px;
  --fs-h4:       17px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-label:    12px;
  --fs-micro:    11px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.0;
  --lh-snug:     1.12;
  --lh-body:     1.5;
  --lh-loose:    1.65;

  /* Radii */
  --r-pill:      9999px;
  --r-lg:        20px;
  --r-md:        15px;
  --r-sm:        8px;
  --r-xs:        4px;

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* Z-indices */
  --z-base: 0;
  --z-sticky: 40;
  --z-nav: 50;
  --z-overlay: 100;

  /* Layout */
  --page-pad:   16px;
  --max-w:      1280px;
  --content-w:  1180px;

  /* Transitions */
  --t-fast:   140ms cubic-bezier(.2, .8, .2, 1);
  --t-norm:   240ms cubic-bezier(.2, .8, .2, 1);
  --t-slow:   480ms cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 768px) {
  :root {
    --page-pad:   32px;
    --fs-mega:    72px;
    --fs-display: 56px;
    --fs-h1:      44px;
    --fs-h2:      34px;
    --fs-h3:      22px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-pad:   48px;
    --fs-mega:    88px;
    --fs-display: 68px;
    --fs-h1:      52px;
    --fs-h2:      40px;
  }
}

@media (min-width: 1440px) {
  :root {
    --page-pad:   80px;
    --fs-mega:    104px;
    --fs-display: 80px;
  }
}

/* -------------------------------------------------------------------
   RESET
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--noc-text);
  background: var(--noc-ink-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
img, picture, svg, video { display: block; max-width: 100%; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible {
  outline: 2px solid var(--noc-violet);
  outline-offset: 2px;
}
::selection { background: var(--noc-violet); color: var(--noc-text); }

/* -------------------------------------------------------------------
   TYPE UTILITIES
   ------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noc-violet);
  line-height: 1;
}
.eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--noc-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--noc-cyan-glow);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot { animation: none; }
}

/* Brand: display = Plus Jakarta Sans Bold, tight, no serif, no italic.
   Accent word = violet color only (never italic). */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: var(--fw-bold);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--noc-text);
  text-wrap: balance;
}
.display em {
  font-style: normal;
  color: var(--noc-violet);
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--noc-text);
  text-wrap: balance;
}
.h1 em {
  font-style: normal;
  color: var(--noc-violet);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--noc-text);
  text-wrap: balance;
}
.h2 em { font-style: normal; color: var(--noc-violet); }
.h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--noc-text);
}
.h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--noc-text);
}
.body-lg {
  font-size: 18px;
  line-height: var(--lh-loose);
  color: var(--noc-text);
}
.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--noc-text); }
.body-muted { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--noc-text-muted); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--noc-text); }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noc-text);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.section {
  padding: var(--sp-16) 0;
  position: relative;
}
@media (min-width: 768px) {
  .section { padding: var(--sp-20) 0; }
}
@media (min-width: 1024px) {
  .section { padding: var(--sp-20) 0; }
}
.section--tight { padding: var(--sp-10) 0; }
.section--hero {
  padding-top: calc(72px + var(--sp-6));
  padding-bottom: var(--sp-12);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}
@media (min-width: 768px) {
  .section--hero {
    padding-top: calc(80px + var(--sp-8));
    padding-bottom: var(--sp-16);
  }
}

/* -------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 52px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--noc-text);
  background: var(--noc-violet-900);
  border: 1px solid rgba(0,0,0,0.5);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.btn:hover { background: var(--noc-violet); box-shadow: var(--shadow-glow-sm); }
.btn:active { transform: scale(0.97); }
.btn--lg { height: 60px; padding: 0 var(--sp-8); font-size: 17px; }
.btn--sm { height: 40px; padding: 0 var(--sp-4); font-size: 14px; }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--noc-violet);
  color: var(--noc-text);
}
.btn--ghost:hover { background: rgba(147, 68, 209, 0.12); box-shadow: none; }
.btn--cyan {
  background: transparent;
  border: 1px solid var(--noc-cyan);
  color: var(--noc-cyan);
}
.btn--cyan:hover { background: rgba(34, 211, 238, 0.1); box-shadow: var(--shadow-glow-cyan); }
.btn--pill {
  height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}
.btn--full { width: 100%; }
.btn .arr {
  display: inline-block;
  transition: transform var(--t-fast);
}
.btn:hover .arr { transform: translateX(3px); }

/* -------------------------------------------------------------------
   NAVBAR (transparent → solid on scroll)
   ------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: var(--sp-4) 0;
  transition: background var(--t-norm), border-color var(--t-norm), padding var(--t-norm);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(4, 2, 11, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--noc-violet-line);
  padding: var(--sp-3) 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.nav__brand .nav__mark { width: 28px; height: 28px; }
.nav__brand .nav__wordmark {
  font-family: "Aspekta", var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--noc-text);
}
.nav__links {
  display: none;
  align-items: center;
  gap: var(--sp-8);
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
}
.nav__link {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--noc-text);
  opacity: 0.75;
  transition: opacity var(--t-fast), color var(--t-fast);
  position: relative;
  padding: var(--sp-2) 0;
}
.nav__link:hover { opacity: 1; }
.nav__link.is-active { opacity: 1; color: var(--noc-violet); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--noc-violet);
}
.nav__cta-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.nav__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--noc-violet-line);
  color: var(--noc-text);
}
@media (min-width: 1024px) {
  .nav__hamburger { display: none; }
}
.nav__hamburger svg { width: 18px; height: 18px; }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: var(--z-overlay);
  background: var(--noc-ink-canvas);
  padding: var(--sp-5) var(--page-pad);
  transform: translateY(-100%);
  transition: transform var(--t-norm);
  display: flex;
  flex-direction: column;
}
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-12);
}
.nav-drawer__close {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--noc-violet-line);
  color: var(--noc-text);
}
.nav-drawer__close svg { width: 18px; height: 18px; }
.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.nav-drawer__link {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--noc-text);
}
.nav-drawer__link.is-active { color: var(--noc-violet); }
.nav-drawer__footer {
  margin-top: auto;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--noc-violet-line);
}
.nav-drawer__socials {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.nav-drawer__socials a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--noc-violet-line);
}
.nav-drawer__socials svg { width: 18px; height: 18px; color: var(--noc-text); }

/* -------------------------------------------------------------------
   OWL MARK (official logo from design system)
   ------------------------------------------------------------------- */
.owl {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.owl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter var(--t-norm), transform var(--t-norm);
}
.owl.is-live img {
  animation: owl-breathe 6s ease-in-out infinite;
}
@keyframes owl-breathe {
  0%, 92%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  95% { transform: scale(1.03); filter: drop-shadow(0 0 12px rgba(147, 68, 209, 0.55)); }
}
.owl.is-celebrating img {
  animation: owl-celebrate 1.6s cubic-bezier(.2, 1, .3, 1);
  filter: drop-shadow(0 0 24px rgba(147, 68, 209, 0.85));
}
@keyframes owl-celebrate {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .owl.is-live img,
  .owl.is-celebrating img { animation: none; }
}

/* -------------------------------------------------------------------
   FORM — TWO-STEP WAITLIST
   ------------------------------------------------------------------- */
.waitlist {
  width: 100%;
  position: relative;
}
.waitlist__step {
  transition: opacity var(--t-slow), transform var(--t-slow), filter var(--t-slow);
}
.waitlist__step[hidden] {
  display: none !important;
}
.waitlist__step.is-entering {
  opacity: 0;
  transform: translateY(8px);
}
.waitlist__step.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Step 1: inline email + button */
.step1 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 540px) {
  .step1 { flex-direction: row; }
}
.step1__input {
  flex: 1;
  height: 56px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(12, 5, 31, 0.7);
  border: 1px solid var(--noc-violet-line);
  color: var(--noc-text);
  font-size: 16px;
  font-weight: var(--fw-medium);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
.step1__input::placeholder { color: var(--noc-text-muted); }
.step1__input:focus {
  border-color: var(--noc-violet);
  box-shadow: 0 0 0 3px rgba(147, 68, 209, 0.2), var(--shadow-glow-sm);
  background: rgba(20, 8, 45, 0.85);
}
.step1__input.is-error {
  border-color: var(--noc-danger);
  box-shadow: 0 0 0 3px rgba(190, 38, 38, 0.2);
}
.step1__submit {
  height: 56px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  background: var(--noc-violet);
  border: 1px solid rgba(0,0,0,0.5);
  color: var(--noc-text);
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-shadow: var(--shadow-glow-sm);
}
.step1__submit:hover { background: #A352E3; box-shadow: var(--shadow-glow); }
.step1__submit:active { transform: scale(0.97); }
.waitlist__micro {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--noc-text-muted);
  letter-spacing: 0.02em;
}
.waitlist__error {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--noc-danger);
  font-weight: var(--fw-medium);
  min-height: 18px;
}

/* Step 2: profile */
.step2 {
  background: rgba(12, 5, 31, 0.7);
  border: 1px solid var(--noc-violet-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.step2__intro {
  font-size: 15px;
  color: var(--noc-text);
  line-height: 1.4;
}
.step2__intro strong { color: var(--noc-violet); font-weight: var(--fw-bold); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noc-text-muted);
}
.field__label .opt { color: var(--noc-text-dim); text-transform: none; letter-spacing: 0; }
.field__input {
  height: 48px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(4, 2, 11, 0.5);
  border: 1px solid var(--noc-violet-line);
  color: var(--noc-text);
  font-size: 15px;
  transition: border-color var(--t-fast), background var(--t-fast);
  outline: none;
}
.field__input:focus { border-color: var(--noc-violet); background: rgba(20, 8, 45, 0.6); }
.field-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-3);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  height: 34px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--noc-violet-line);
  color: var(--noc-text);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { border-color: var(--noc-violet); }
.chip.is-selected {
  background: var(--noc-text);
  color: var(--noc-ink-canvas);
  border-color: var(--noc-text);
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: 13px;
  color: var(--noc-text-muted);
  line-height: 1.4;
}
.checkbox-row input { position: absolute; opacity: 0; }
.checkbox-row .box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  border: 1px solid var(--noc-violet-line);
  background: rgba(4, 2, 11, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  margin-top: 1px;
}
.checkbox-row input:checked + .box {
  background: var(--noc-violet);
  border-color: var(--noc-violet);
}
.checkbox-row input:checked + .box::after {
  content: "";
  width: 6px; height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Step 3: celebration */
.celebrate {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  background: var(--grad-radial-purple);
  border: 1px solid var(--noc-violet);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-glow);
  position: relative;
  overflow: hidden;
}
.celebrate__owl {
  width: 88px; height: 88px;
  margin: 0 auto var(--sp-5);
  filter: drop-shadow(0 0 24px rgba(147, 68, 209, 0.8));
}
.celebrate__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--noc-text);
  margin-bottom: var(--sp-3);
}
.celebrate__num {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--noc-violet);
}
.celebrate__sub {
  font-size: 14px;
  color: var(--noc-text-muted);
  margin-bottom: var(--sp-6);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.celebrate__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  justify-content: center;
}
@media (min-width: 540px) {
  .celebrate__ctas { flex-direction: row; }
}
.celebrate__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--noc-text);
  border-bottom: 1px solid var(--noc-violet);
  padding-bottom: 2px;
  transition: color var(--t-fast);
}
.celebrate__cta:hover { color: var(--noc-violet); }

/* -------------------------------------------------------------------
   STICKY BAR (mobile)
   ------------------------------------------------------------------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--page-pad);
  background: rgba(20, 8, 45, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--noc-violet-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  transition: transform var(--t-norm);
}
.sticky-bar.is-hidden { transform: translateY(100%); }
.sticky-bar__txt {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--noc-text);
}
.sticky-bar__cta {
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--noc-violet);
  color: var(--noc-text);
  font-size: 13px;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 1024px) {
  .sticky-bar { display: none; }
}

/* -------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--noc-violet-line);
  padding: var(--sp-16) 0 var(--sp-8);
  margin-top: var(--sp-16);
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--sp-8);
  }
}
.footer__brand .footer__tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--noc-text);
  margin: var(--sp-4) 0 var(--sp-6);
  max-width: 280px;
}
.footer__socials {
  display: flex;
  gap: var(--sp-3);
}
.footer__socials a {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--noc-violet-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.footer__socials a:hover { border-color: var(--noc-violet); background: rgba(147, 68, 209, 0.1); }
.footer__socials svg { width: 18px; height: 18px; color: var(--noc-text); }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noc-violet);
  margin-bottom: var(--sp-4);
}
.footer__col ul li { margin-bottom: var(--sp-3); }
.footer__col ul a {
  font-size: 14px;
  color: var(--noc-text);
  opacity: 0.8;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.footer__col ul a:hover { opacity: 1; color: var(--noc-violet); }
.footer__bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--noc-violet-line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--noc-text-muted);
  letter-spacing: 0.04em;
}
@media (min-width: 640px) {
  .footer__bottom { flex-direction: row; align-items: center; }
}

/* -------------------------------------------------------------------
   PROGRESSIVE REVEAL (scroll-triggered)
   ------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* `.no-anim` is applied in JS to elements already in viewport at load —
   they appear instantly so the hero never flashes black. */
[data-reveal].no-anim {
  opacity: 1;
  transform: none;
  transition: none;
}
[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal-delay="5"] { transition-delay: 500ms; }
[data-reveal-delay="6"] { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-delay] {
    opacity: 1; transform: none; transition: none;
  }
}

/* Page-bottom space for sticky bar (mobile only) */
.page {
  padding-bottom: 88px;
}
@media (min-width: 1024px) {
  .page { padding-bottom: 0; }
}

/* Helpers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-cyan { color: var(--noc-cyan); }
.text-violet { color: var(--noc-violet); }
/* Honeypot: trampa anti-bot. Fuera de pantalla, fuera del tab order y del
   árbol de accesibilidad — un humano no lo ve ni lo completa; un bot sí. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Brand: no italics anywhere — kept as no-op so any legacy usage is safe. */
.italic { font-style: normal; }

/* -------------------------------------------------------------------
   UTILITIES — replace repeated inline styles (tokenized, DRY)
   ------------------------------------------------------------------- */
.u-mt-5 { margin-top: var(--sp-5); }   /* was inline 20px */
.u-mt-8 { margin-top: var(--sp-8); }   /* was inline 32px */
.u-mb-5 { margin-bottom: var(--sp-5); } /* was inline 20px */
.u-mb-6 { margin-bottom: var(--sp-6); } /* was inline 24px */
.owl--36 { width: 36px; height: 36px; }
.owl--42 { width: 42px; height: 42px; }
.owl--50 { width: 50px; height: 50px; }
.is-static { cursor: default; }
.hero__phone-screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.badge-medal img { width: 50px; height: 50px; object-fit: contain; }