/* ────────────────────────────────────────────────────────────────────
   Antel — landing de activación de beneficios.
   Sample mínimo. El equipo de diseño de Antel reemplaza el bloque
   :root con sus tokens reales y opcionalmente sustituye Nunito por
   la tipografía de marca. El layout y la lógica del SDK no requieren
   tocar nada del CSS.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Tokens visuales — Antel reemplaza por su paleta */
  --antel-primary:      #00569A;
  --antel-primary-dark: #003D6F;
  --antel-accent:       #FF6600;
  --text:               #1A1A2E;
  --text-muted:         #5D687D;
  --bg:                 #F6F8FC;
  --surface:            #FFFFFF;
  --border:             rgba(26, 26, 46, 0.10);
  --error:              #D63333;
  --success:            #29BD32;
  --radius:             12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Nunito, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.landing {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* Header */
header { margin-bottom: 24px; }
.logo { height: 48px; display: block; margin-bottom: 16px; }
h1 {
  color: var(--antel-primary-dark);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0 0 8px;
}
h2 {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 12px;
}

/* Switcher de pantallas */
.screen { display: none; }
.screen.visible { display: block; animation: fadeIn 200ms ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bloque de T&C scrollable */
.terms-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
  max-height: 220px;
  overflow: auto;
  font-size: 0.95rem;
}
.terms-box p { margin: 0 0 8px; }

/* Checkbox de aceptación */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  cursor: pointer;
  user-select: none;
}
.checkbox input { margin-top: 3px; }

/* Widget de captcha */
.cf-turnstile { margin: 16px 0; min-height: 65px; }

/* Botón principal */
button {
  width: 100%;
  padding: 14px 16px;
  background: var(--antel-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, transform 100ms;
}
button:hover:not(:disabled) {
  background: var(--antel-primary-dark);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Mensaje de error */
.error {
  color: var(--error);
  font-size: 0.92rem;
  margin-top: 12px;
  min-height: 1.2em;
}

/* Spinner de loading */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--antel-primary);
  border-radius: 50%;
  margin: 40px auto 16px;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Check de éxito */
.checkmark {
  width: 72px;
  height: 72px;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 32px auto 16px;
  box-shadow: 0 8px 24px rgba(41, 189, 50, 0.25);
}

/* Links */
a {
  color: var(--antel-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--antel-primary-dark); }

/* Detalles personalizados del cliente (nombre + plan + ref),
   poblados desde validate() — nunca desde la URL. */
.customer-details {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  margin: -4px 0 16px;
}

/* Nota de fallback bajo la pantalla de éxito (link manual a Disney+
   por si el redirect automático no dispara). */
.muted {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 8px;
}