/* ============================================================================
   quiz-aliado.css — Adaptación del quiz a la paleta de aliadovisas.com

   Se carga DESPUÉS de quiz.css. Cumple 2 funciones:

   1. DEFINE las variables CSS (`--navy`, `--gold`, `--text`, etc.) que el
      quiz.css espera. Estas variables originalmente venían de visade-pages.css
      en visasdeturismo, pero en aliadovisas usan otros nombres (`--color-*`).
      Sin esto, los `var(--gold)` etc. devolvían `initial` y todo se veía blanco.

   2. APLICA los ajustes específicos de aliadovisas:
      · tipografía Cinzel para títulos
      · fondo cream (`#FAF7F0`) en lugar del beige de visasdeturismo

   IMPORTANTE: las variables se definen en el scope `.quiz-wrap` para no
   contaminar el resto del sitio que ya tiene su propio sistema de variables.
   ============================================================================ */


/* ──────────────────────────────────────────────────────────────────────────
   Definición de variables — debe ir ANTES de cualquier override que las use
   ────────────────────────────────────────────────────────────────────────── */

.quiz-wrap {
  /* Paleta principal aliadovisas (matchea --color-primary-navy / --color-accent-gold del main.css) */
  --navy:        #0B1F3A;
  --navy-deep:   #060F1F;
  --navy-light:  #162B4A;
  --navy-elev:   #1E3659;

  --gold:        #C8A75D;
  --gold-light:  #D9B874;
  --gold-dark:   #A8873E;
  --gold-soft:   rgba(200, 167, 93, 0.14);

  /* Tonos neutros */
  --white:       #FFFFFF;
  --paper:       #FAF7F0;   /* fondo cream aliadovisas */
  --sand:        #F2F2F2;
  --slate:       #5e6f8c;
  --text:        #32445f;
  --border:      rgba(11, 31, 58, 0.1);

  --shadow:      0 18px 55px rgba(11, 31, 58, 0.1);

  --success:     #10b981;
  --danger:      #b84c4c;
}


/* ──────────────────────────────────────────────────────────────────────────
   Tipografía: Cinzel para títulos (coherente con el resto del sitio)
   ────────────────────────────────────────────────────────────────────────── */

.quiz-card h1,
.quiz-title,
.quiz-q-title,
.quiz-result-title,
.quiz-whatsapp-cta__title,
.quiz-disqualified .quiz-result-title,
.quiz-disqualified h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Cuerpo y resto: Montserrat (heredado del sitio) */
.quiz-card,
.quiz-subtitle,
.quiz-result-empath,
.quiz-whatsapp-cta__intro,
.quiz-whatsapp-cta__benefits,
.quiz-whatsapp-cta__micro,
.quiz-option-label,
.quiz-field-label,
.quiz-fav-msg {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}


/* ──────────────────────────────────────────────────────────────────────────
   Fondo del wrap: cream aliadovisas (en vez del beige de visasdeturismo)
   ────────────────────────────────────────────────────────────────────────── */

.quiz-wrap {
  background: linear-gradient(180deg, #FAF7F0 0%, #FFFFFF 100%);
}


/* ──────────────────────────────────────────────────────────────────────────
   Override de contraste — asegura visibilidad de la opción seleccionada
   Estos selectores ya están en quiz.css pero los reforzamos por especificidad
   para protegernos de cualquier rule conflictiva en main.css de aliadovisas.
   ────────────────────────────────────────────────────────────────────────── */

.quiz-wrap .quiz-option {
  background: #ffffff;
  color: var(--text);
}

.quiz-wrap .quiz-option:hover {
  border-color: var(--gold);
  background: rgba(200, 167, 93, 0.04);
}

.quiz-wrap .quiz-option.is-selected {
  border-color: var(--gold);
  background: rgba(200, 167, 93, 0.12);
  box-shadow: 0 0 0 1px var(--gold) inset;
}

.quiz-wrap .quiz-option.is-selected .quiz-option-label {
  color: var(--navy);
  font-weight: 600;
}

/* Radio/checkbox marcados: oro relleno con check blanco */
.quiz-wrap .quiz-option input[type="radio"]:checked,
.quiz-wrap .quiz-option input[type="checkbox"]:checked {
  border-color: var(--gold);
  background: var(--gold);
}

/* Inputs de texto/email/tel — sin perder el contraste */
.quiz-wrap .quiz-input {
  background: #ffffff;
  color: var(--navy);
  border-color: var(--border);
}

.quiz-wrap .quiz-input:focus {
  border-color: var(--gold);
  outline: 3px solid rgba(200, 167, 93, 0.25);
  outline-offset: 1px;
}