/* =====================================================================
   QUIZ "DESCUBRE TU RUTA IDEAL" · INEXSU
   Identidad: ADN de marca INEXSU 2026 (Casa Conceptual)

   CÓMO ESTÁ ORGANIZADO ESTE ARCHIVO
   1. Colores y tipografías (variables)  ← aquí se cambia casi todo
   2. Base y temas (oscuro / claro)
   3. Encabezado y progreso
   4. Textos
   5. Botones
   6. Bienvenida (navy)
   7. Preguntas (gris)
   8. Formulario (gris)
   9. Resultado (banda verde + gris)
   10. Carga y adaptación a pantallas

   RITMO DE COLOR (igual al del sitio):
   · Bienvenida sobre navy: título coral + lima, botón coral.
   · Preguntas y formulario sobre gris: títulos navy, etiquetas y botón en rojo,
     selección en navy con check lima.
   · Resultado: banda verde (título azul + lima) y programas sobre gris.
   · Texto claro: gris del ADN (#E2E2E2), nunca blanco puro.
   ===================================================================== */

/* ---------- 1. COLORES Y TIPOGRAFÍAS ---------- */
:root {
  /* Principales (fondos) */
  --navy:  #030A36;
  --verde: #0C3A37;
  --gris:  #E2E2E2;
  --rojo:  #AA091F;

  /* Secundarios (acentos) */
  --lima:     #C5E86C;
  --coral:    #EE3831;
  --amarillo: #F6EB61;
  --azul:     #0857C3;      /* solo sobre gris */
  --azul-titular: #0784F4;  /* títulos y etiquetas sobre navy o verde */

  /* Transparencias de la paleta */
  --line-d: rgba(226, 226, 226, .14);   /* línea sobre oscuro */
  --line-l: rgba(3, 10, 54, .14);       /* línea sobre gris */
  --soft-d: rgba(226, 226, 226, .74);   /* texto secundario sobre oscuro */
  --soft-l: rgba(3, 10, 54, .7);        /* texto secundario sobre gris */
  --tint-l: rgba(3, 10, 54, .04);       /* relleno de tarjeta sobre gris */

  --f-display: "Big Shoulders", "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-text: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pad: 20px;          /* margen lateral del quiz */
  --radius: 16px;
  --radius-sm: 12px;
}

/* ---------- 2. BASE Y TEMAS ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--navy);
  color: var(--gris);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s;
}
body[data-theme="light"] { background: var(--gris); color: var(--navy); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--azul-titular); outline-offset: 3px; }

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) calc(32px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 3. ENCABEZADO Y PROGRESO (siempre navy, como el header del sitio) ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  margin: 0 calc(var(--pad) * -1);
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--pad) 0;
  background: var(--navy);
  color: var(--gris);
}
.top-row { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 14px; }
.logo { display: block; width: 108px; height: auto; }   /* archivo: assets/logo-inexsu-claro.svg */
.step { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--soft-d); }
.progress { height: 4px; background: var(--line-d); margin: 0 calc(var(--pad) * -1); }
.progress-fill { height: 100%; width: 0; background: var(--lima); transition: width .5s cubic-bezier(.4, 0, .2, 1); }

/* ---------- 4. TEXTOS ---------- */
.kicker {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 12px;
}
.title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  line-height: .92;
  font-size: clamp(56px, 16vw, 74px);
  margin-bottom: 16px;
}
.title span { display: block; }
.title-sm { font-size: clamp(42px, 12vw, 54px); }
.lead { font-size: 16px; margin-bottom: 24px; }

/* En oscuro */
[data-theme="dark"] .kicker { color: var(--azul-titular); }
[data-theme="dark"] .title { color: var(--coral); }
[data-theme="dark"] .title span { color: var(--lima); }
[data-theme="dark"] .lead { color: var(--soft-d); }
/* En claro */
[data-theme="light"] .kicker { color: var(--rojo); }
[data-theme="light"] .title { color: var(--navy); }
[data-theme="light"] .title span { color: var(--rojo); }
[data-theme="light"] .lead { color: var(--soft-l); }

/* ---------- 5. BOTONES ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  border: 0; border-radius: 999px;
  padding: 16px 22px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s, box-shadow .2s, color .2s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn + .btn { margin-top: 10px; }
.btn svg { width: 20px; height: 20px; }

/* Principal: coral sobre navy, rojo sobre gris */
[data-theme="dark"] .btn-primary { background: var(--coral); color: var(--navy); }
[data-theme="dark"] .btn-primary:hover { background: var(--amarillo); }
[data-theme="light"] .btn-primary { background: var(--rojo); color: var(--gris); }
[data-theme="light"] .btn-primary:hover { background: var(--navy); }

/* Secundario (contorno) */
[data-theme="dark"] .btn-ghost { background: transparent; color: var(--soft-d); box-shadow: inset 0 0 0 1.5px var(--line-d); }
[data-theme="light"] .btn-ghost { background: transparent; color: var(--soft-l); box-shadow: inset 0 0 0 1.5px var(--line-l); }
[data-theme="light"] .btn-ghost:hover { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }

/* WhatsApp: navy con ícono lima (sobre gris) */
.btn-wa { background: var(--navy); color: var(--gris); }
.btn-wa svg { color: var(--lima); }
.btn-wa:hover { background: var(--verde); }

/* ---------- 6. PANTALLAS Y BIENVENIDA ---------- */
.screen { display: none; flex-direction: column; flex: 1; padding-top: 28px; animation: in .35s ease; }
.screen.active { display: flex; }
.spacer { flex: 1; min-height: 28px; }
@keyframes in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

#screen-welcome { position: relative; padding-top: 44px; }
.rings { position: absolute; top: 18px; right: -4px; width: 104px; pointer-events: none; }
.rings circle { fill: none; stroke-width: 1.4; }
.rings circle:nth-child(1) { stroke: var(--azul-titular); }
.rings circle:nth-child(2) { stroke: var(--lima); }
.rings circle:nth-child(3) { stroke: var(--coral); }

.facts {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  margin-bottom: 20px;
}
.facts li { padding: 14px 0 12px; text-align: center; }
.facts li + li { border-left: 1px solid var(--line-d); }
.facts strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 38px; line-height: 1; color: var(--lima); }
.facts span { font-size: 11px; color: var(--soft-d); text-transform: uppercase; letter-spacing: .14em; }
.note { font-size: 14.5px; color: var(--soft-d); margin-bottom: 26px; }
.note strong { color: var(--gris); font-weight: 600; }

.campos {
  background: var(--verde);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
}
.campos-lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lima); margin-bottom: 10px; }
.campos ul { list-style: none; }
.campos li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--gris); }
.campos li + li { border-top: 1px solid var(--line-d); }
.campos i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---------- 7. PREGUNTAS (gris) ---------- */
.question {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 9vw, 40px); line-height: .98;
  color: var(--navy);
  margin-bottom: 24px;
}
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--tint-l);
  border: 1.5px solid var(--line-l);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 15px; font-weight: 500; line-height: 1.35;
  transition: border-color .2s, background-color .2s, color .2s;
}
.option:hover { border-color: rgba(3, 10, 54, .4); }
.option .ico {
  flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--gris);
  box-shadow: inset 0 0 0 1px var(--line-l), inset 4px 0 0 var(--c, transparent);   /* franja con el color del campo */
}
.option .txt { flex: 1; }
.option .chk {
  flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-l);
  display: grid; place-items: center;
}
.option .chk svg { width: 13px; height: 13px; opacity: 0; stroke: var(--navy); }
.option[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--gris); }
.option[aria-pressed="true"] .ico { background: rgba(226, 226, 226, .1); box-shadow: inset 4px 0 0 var(--c, transparent); }
.option[aria-pressed="true"] .chk { background: var(--lima); box-shadow: none; }
.option[aria-pressed="true"] .chk svg { opacity: 1; }

/* ---------- 8. FORMULARIO (gris) ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft-l);
  margin-bottom: 7px;
}
.field label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input {
  width: 100%;
  padding: 14px 15px;
  background: var(--tint-l);
  color: var(--navy);
  border: 1.5px solid var(--line-l);
  border-radius: var(--radius-sm);
  font-size: 16px;            /* 16px evita el zoom automático en iPhone */
  -webkit-appearance: none;
}
.field input::placeholder { color: rgba(3, 10, 54, .45); }
.field input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(8, 87, 195, .15); }
.field.bad input { border-color: var(--rojo); }
.error { display: none; font-size: 13px; font-weight: 500; color: var(--rojo); margin-top: 6px; }
.error.show { display: block; }

.intent { border: 0; margin: 24px 0 18px; }
.intent legend {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 26px; line-height: 1; color: var(--navy);
  margin-bottom: 12px;
}
#intent-options { display: grid; gap: 8px; }
.intent-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-l);
  border-radius: var(--radius-sm);
  background: var(--tint-l);
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.intent-opt input { width: 18px; height: 18px; accent-color: var(--lima); flex: none; }
.intent-opt:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--gris); }

.consent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--tint-l);
  font-size: 13px; color: var(--soft-l);
  cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rojo); flex: none; }
.consent strong { color: var(--navy); font-weight: 600; }
#contact-form .btn-primary { margin-top: 22px; }

/* ---------- 9. RESULTADO ---------- */
#screen-result { padding-top: 0; }
.band {
  margin: 0 calc(var(--pad) * -1) 28px;
  padding: 28px var(--pad) 26px;
  background: var(--verde);
  color: var(--gris);
}
.badge {
  display: inline-block;
  background: var(--lima); color: var(--navy);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 12px;
  margin-bottom: 16px;
}
.campo {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft-d);
  margin-bottom: 10px;
}
.campo i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.band .title { color: var(--azul-titular); margin-bottom: 16px; }
.band .title span { color: var(--lima); }
.result-desc { font-size: 14.5px; line-height: 1.65; color: var(--soft-d); }

.programs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.program {
  padding: 14px 16px;
  border: 1.5px solid var(--line-l);
  border-radius: var(--radius-sm);
  background: var(--tint-l);
}
.program .name { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--navy); }
.program .type { font-size: 12.5px; color: var(--soft-l); margin-top: 3px; }
.program.primary { background: var(--navy); border-color: var(--navy); padding: 16px 16px 18px; }
.program.primary .name { color: var(--gris); font-size: 16px; }
.program.primary .type { color: var(--soft-d); }
.program .tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); background: var(--lima);
  border-radius: 999px; padding: 3px 9px;
  margin-bottom: 8px;
}
.next {
  font-size: 14px; color: var(--navy); font-weight: 500;
  border-left: 3px solid var(--rojo);
  padding: 4px 0 4px 14px;
  margin-bottom: 22px;
}

/* ---------- 10. CARGA Y ADAPTACIÓN ---------- */
.sending {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(3, 10, 54, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--soft-d); font-size: 14px;
}
.sending[hidden] { display: none; }
.sending-iso { width: 52px; height: auto; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* Tablet o computador (feria): el quiz se muestra como tarjeta centrada.
   El fondo de la página es verde para que la tarjeta (con su encabezado navy)
   se separe claramente del fondo. */
@media (min-width: 720px) {
  :root { --pad: 32px; }
  body, body[data-theme="light"] { padding: 48px 0; }
  /* Fondo de la página según la pantalla */
  body[data-bg="gris"]  { background: var(--gris); }
  body[data-bg="verde"] { background: var(--verde); }
  body[data-bg="navy"]  { background: var(--navy); }
  #app {
    min-height: auto;
    border-radius: 24px;
    overflow: hidden;
    padding-bottom: 36px;
    box-shadow: 0 30px 60px -20px rgba(3, 10, 54, .55);
  }
  body[data-theme="dark"] #app { background: var(--navy); }
  /* el navy de arriba evita un borde claro en las esquinas del encabezado */
  body[data-theme="light"] #app { background: linear-gradient(var(--navy) 0 60px, var(--gris) 60px); }
  /* Sobre fondo gris, la tarjeta clara necesita un borde para no fundirse */
  body[data-bg="gris"][data-theme="light"] #app { box-shadow: 0 0 0 1px var(--line-l), 0 30px 60px -20px rgba(3, 10, 54, .35); }
  .top { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .sending-iso { animation: none; }
  .progress-fill, body { transition: none; }
}