/* Tokens y componentes compartidos por la página de captura y la de gracias. */
:root {
  --bg: #0a1c29;
  --bg-2: #0f2a3d;
  --card: #102b3e;
  --line: rgba(255, 255, 255, .11);
  --text: #f7f4ee;
  --muted: #b9c9d6;
  --orange: #ff8a5b;
  --orange-hi: #ffa27d;
  --ink: #173f59;
  --wa: #25d366;
  --bad: #ff6b5e;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --f-display: 'Montserrat', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mark: 'Roboto Condensed', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--f-body);
  overflow-x: hidden;
}
/* Grano sutil sobre toda la página */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
b, strong { font-weight: 700; }
svg.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--orange-hi); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.accent { color: var(--orange); }

/* Marca */
.wordmark { display: inline-flex; flex-direction: column; font-family: var(--f-mark); font-weight: 700; line-height: .98; text-transform: uppercase; text-decoration: none; letter-spacing: .01em; }
.wordmark small { font-weight: 400; font-size: .62em; text-transform: none; }
.wordmark span { font-weight: 300; font-size: 1.05em; text-transform: none; }
.wordmark b { font-size: 1.5em; }

/* Píldoras */
.pill {
  display: inline-flex; align-items: center; gap: .6em; padding: .55em 1.1em;
  border: 1px solid rgba(255, 138, 91, .45); border-radius: 999px;
  background: rgba(255, 138, 91, .08); font-size: .95rem; font-weight: 500;
}
.dot { width: .6em; height: .6em; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: ping 2s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 .7em rgba(61, 220, 132, 0); } }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: .9em 1.8em; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 1.05rem/1.2 var(--f-body); text-decoration: none; text-align: center;
  color: var(--ink); background: linear-gradient(180deg, var(--orange-hi), var(--orange));
  box-shadow: 0 10px 30px -8px rgba(255, 138, 91, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 36px -8px rgba(255, 138, 91, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .65; cursor: progress; transform: none; }
.btn .i { transition: transform .2s var(--ease); }
.btn:hover .i { transform: translateX(4px); }

/* Aparición al hacer scroll (solo si hay JS) */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* Fondo oscuro con halo y anillos (páginas de preguntas y gracias) */
html { background: #0a1c29; }
body.backdrop { min-height: 100svh; background: radial-gradient(70% 45% at 15% 0%, rgba(139, 108, 246, .38), transparent 70%) no-repeat top / 100% 900px, radial-gradient(60% 40% at 90% 30%, rgba(214, 239, 251, .12), transparent 70%), #0a1c29; }
body.backdrop::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 50% 78%, transparent 0 150px, rgba(255, 255, 255, .05) 150px 151px); }
.wrap--narrow { width: min(720px, 100% - 32px); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* Marca AP15 */
.logo { font: 800 1.7rem/1 var(--f-display); letter-spacing: -.04em; text-decoration: none; color: #fff; }
.logo b { color: #b9a7ff; font-weight: 800; }
h1, h2, h3 { letter-spacing: -.025em; }