/* =====================================================================
   Formulario de Inscripción 2026 — Enseña Perú
   Hoja de estilos única. Orden según DESIGN.md:
   tipografía → tokens → base → layout → componentes → estados → responsive.
   Regla de fidelidad: ningún hex suelto; todo color deriva de los tokens.
   ===================================================================== */

/* =====================================================================
   0. TIPOGRAFÍA (DESIGN.md §3)

   Quicksand se sirve DESDE AQUÍ, no desde Google. Cargarla de
   fonts.googleapis.com enviaba la IP y el User-Agent de cada postulante a
   un tercero en EE. UU. —una transferencia internacional que el aviso de
   privacidad de la Sección 2 no declara— en un formulario que además
   recoge datos sensibles. De paso desaparecen dos conexiones a un dominio
   ajeno en la ruta crítica del render, y 'style-src'/'font-src' pueden
   quedarse en 'self' cuando se añada la CSP.

   Los .woff2 son los mismos que servía Google (Quicksand v37, OFL-1.1:
   ver fuentes/OFL.txt). Son fuentes VARIABLES —traen fvar/gvar—, así que
   un solo archivo por subconjunto cubre todo el rango de pesos y el
   descriptor 'font-weight: 500 700' hace que el navegador interpole el
   peso real en vez de fabricar una negrita sintética. De ahí que haya dos
   bloques y no cuatro.

   Los unicode-range van copiados literalmente del CSS de Google: son los
   que hacen que el navegador se descargue solo el subconjunto que el
   texto necesita. Se descartó 'vietnamese', que aquí no se usa: el
   castellano vive entero en 'latin' (las vocales tildadas y la ñ están
   precompuestas dentro de U+0000-00FF).

   OJO al rehacer esto: las url() se resuelven contra la ubicación de ESTA
   hoja (publico/), así que la ruta es 'fuentes/…' y NO 'publico/fuentes/…'.
   ===================================================================== */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fuentes/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fuentes/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   1. TOKENS DE DISEÑO (DESIGN.md §2)
   ===================================================================== */
:root {
  /* --- Marca --- */
  --rojo-marca: #E8232A;        /* Rojo Enseña Perú (logo, papel rasgado) */
  --teal-marca: #17C3B2;        /* Barra superior fina y acentos secundarios (ícono WhatsApp) */

  /* --- Acción / interacción --- */
  --azul-accion: #1B7FA6;       /* Botones Sí seleccionado, flechas, progreso, valores de select */
  --azul-accion-hover: #166887;
  --azul-accion-suave: rgba(27, 127, 166, 0.12);  /* Hover de option-cards y fondos de énfasis */
  --azul-cinta: #2D9CDB;        /* Cinta "Convocatoria Abierta" */

  /* --- Texto --- */
  --texto-titulo: #37424A;
  --texto-cuerpo: #5A6670;
  --texto-placeholder: #9AA5AD;

  /* --- Superficies --- */
  --fondo-pagina: #FFFFFF;      /* Fallback si fondo.webp no carga */
  --fondo-tarjeta: #FFFFFF;
  --fondo-control: #F1F3F4;
  --borde-suave: #E3E7EA;
  --sombra-tarjeta: 0 1px 4px rgba(55, 66, 74, 0.10);
  --sombra-flotante: 0 6px 18px rgba(55, 66, 74, 0.14);  /* Menús de autocomplete */

  /* --- Estados --- */
  --rojo-error: #E02B35;
  --texto-error: #FFFFFF;
  --verde-exito: #1F6B52;      /* Confirmaciones ("postulación registrada") */

  /* --- Foco accesible (derivado de --azul-accion, DESIGN.md §8) --- */
  --anillo-foco: rgba(27, 127, 166, 0.35);

  /* --- Fondo decorativo (grid + esquinas fijas, DESIGN.md §4) ---
     Celda y grosor de línea escalan de forma continua entre móvil y
     desktop. La celda tiene su propia recta, calibrada a 425px→42.75px
     (la mitad del tamaño móvil previo) y 1920px→148px.
     El ancho de cada textura rasgada es el ancla de su rincón: el logo y
     el pdl se derivan de él (ver --logo-* / --pdl-*), así la textura los
     arrastra al escalar y quedan "fijos respecto a" ella. */
  --gris-cuadricula: #F0F0F0;       /* líneas del grid de fondo */
  --tam-cuadricula: clamp(42.75px, calc(12.83px + 7.04vw), 148px);
  --grosor-cuadricula: calc(var(--tam-cuadricula) / 18.5); /* mantiene la proporción 8px:148px del grid de referencia */
  --textura-rasgada-superior: url('img/textura_rasgada_superior.webp');
  --textura-rasgada-inferior: url('img/textura_rasgada_inferior.webp');

  /* Ancla de cada rincón: el ancho de la textura rasgada (única recta
     b + k·vw por rincón, calibrada a 425px→150px y 1920px→máx). */
  --rasgado-sup-ancho: clamp(150px, calc(67.84px + 19.33vw), 439px);
  --rasgado-inf-ancho: clamp(150px, calc(59.88px + 21.20vw), 467px);

  /* Logo (rincón superior-izq.), como fracción de --rasgado-sup-ancho.
     Calibradas contra los máximos actuales (a 1920px), así el escritorio
     se ve igual y el logo queda pegado al mismo punto de la textura. */
  --logo-escala: 0.410;   /* ancho del logo = 180/439 */
  --logo-x:      0.182;   /* left           = 80/439 */
  --logo-y:      0.125;   /* top            = 55/439 */

  /* pdl (rincón inferior-der.), como fracción de --rasgado-inf-ancho.
     escala > 1 porque el banner pdl es más ancho que su textura. */
  --pdl-escala:  0.857;   /* ancho del pdl  = 400/467 */
  --pdl-x:       0.086;   /* right          = 40/467 */
  --pdl-y:       0.257;   /* bottom         = 120/467 */

  /* --- Métricas --- */
  --ancho-columna: 800px;
  --ancho-columna-small: 600px;
  /* Padding vertical de .columna. */
  --padding-columna-sup: 40px;
  --padding-columna-inf: 80px;
  --radio-tarjeta: 8px;
  --radio-control: 6px;
  --espacio-tarjeta: 24px;
  --altura-control: 44px;
}

/* =====================================================================
   2. BASE: reset mínimo y tipografía (DESIGN.md §3)
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Quicksand', 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--texto-cuerpo);
  min-height: 100vh;
  /* Grid de fondo tileable en CSS puro (DESIGN.md §4): a diferencia de una
     imagen con background-size:cover, nunca recorta ni distorsiona sea cual
     sea la proporción del viewport. Las esquinas (logo/pdl/papel rasgado)
     viven aparte en .fondo-decorativo. */
  background-color: var(--fondo-pagina);
  background-image:
    linear-gradient(to right, var(--gris-cuadricula) var(--grosor-cuadricula), transparent 1px),
    linear-gradient(to bottom, var(--gris-cuadricula) var(--grosor-cuadricula), transparent 1px);
  background-size: var(--tam-cuadricula) var(--tam-cuadricula);
  background-attachment: fixed;
  background-position: -20px -30px;
}

[hidden] {
  display: none !important;
}

h1 {
  font-size: 27px;
  font-weight: 700;
  color: var(--texto-titulo);
  text-align: center;
  line-height: 1.35;
  margin-bottom: 12px;
}

h2 {
  /* Subtítulos de subsección ("Identificación", "Información personal"):
     a la izquierda, fuera de las tarjetas */
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-titulo);
  text-align: left;
  margin: 28px 0 12px;
}

p {
  margin-bottom: 12px;
}

/* Párrafo que contiene una cadena larga sin espacios —una dirección de correo,
   una URL— y que por tanto puede desbordar su tarjeta en pantallas estrechas.
   Vive aquí como clase y no como style="" en la vista porque la CSP del
   .htaccess declara style-src 'self' sin 'unsafe-inline': un atributo style
   inline se descarta en silencio y el desbordamiento vuelve sin avisar. */
.texto-quebrable {
  overflow-wrap: break-word;
}

a {
  color: var(--azul-accion);
}

a:hover {
  color: var(--azul-accion-hover);
}

strong,
b {
  font-weight: 700;
}

ul,
ol {
  padding-left: 24px;
  margin-bottom: 12px;
}

fieldset {
  border: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* =====================================================================
   3. LAYOUT (DESIGN.md §4)
   ===================================================================== */

/* Esquinas fijas del fondo (logo, pdl, papel rasgado): position:fixed +
   clamp(calc()) en vez de una foto compuesta con background-size:cover,
   así no se recortan ni se distorsionan en ningún ancho. Hay una sola
   recta (b + k·vw) por rincón — el ancho de la textura rasgada
   (--rasgado-sup-ancho / --rasgado-inf-ancho) — calibrada con dos
   referencias de diseño reales: fondo_celular.jpeg (800px) y fondo.webp
   (1920px); en el celular las piezas ocupan proporcionalmente más que una
   regla de tres directa, de ahí el término fijo en px además del vw. El
   logo y el pdl NO tienen recta propia: son fracciones de esa ancla
   (--logo-* / --pdl-*), así siguen a su textura al escalar. Sin escalón en
   ningún ancho intermedio (RESPONSIVE, §7 solo ajusta .columna; el logo/pdl
   sí se ocultan por debajo de 768px, la textura no). */
.fondo-decorativo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fondo-rasgado-superior,
.fondo-rasgado-inferior {
  position: absolute;
  background-size: cover;
}

.fondo-rasgado-superior {
  top: 0;
  left: 0;
  width: var(--rasgado-sup-ancho);
  aspect-ratio: 439 / 441;
  background-image: var(--textura-rasgada-superior);
}

.fondo-rasgado-inferior {
  right: 0;
  bottom: 0;
  width: var(--rasgado-inf-ancho);
  aspect-ratio: 467 / 463;
  background-image: var(--textura-rasgada-inferior);
}

.fondo-logo,
.fondo-pdl {
  position: absolute;
  background: no-repeat center / contain;
}

.fondo-logo {
  top: calc(var(--rasgado-sup-ancho) * var(--logo-y));
  left: calc(var(--rasgado-sup-ancho) * var(--logo-x));
  width: calc(var(--rasgado-sup-ancho) * var(--logo-escala));
  aspect-ratio: 204 / 200;
  background-image: url('img/logo.webp');
}

.fondo-pdl {
  right: calc(var(--rasgado-inf-ancho) * var(--pdl-x));
  bottom: calc(var(--rasgado-inf-ancho) * var(--pdl-y));
  width: calc(var(--rasgado-inf-ancho) * var(--pdl-escala));
  aspect-ratio: 543 / 207;
  background-image: url('img/pdl.webp');
}

/* Logo móvil: solo visible en celular, oculto en desktop */

.subtitulo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}

.logo-celular {
  display: none;
  width: 20%;
  @media (max-width: 767px) {
    display: block;
  }
}

/* Columna central */
.columna {
  max-width: var(--ancho-columna);
  width: 50dvw;
  margin: 0 auto;
  /* Mismo padding en todos los anchos: no lleva override en RESPONSIVE (§9) */
  padding: var(--padding-columna-sup) 24px var(--padding-columna-inf);
  position: relative;
  z-index: 1;
}

/* Secciones del wizard: bloques que el JS muestra/oculta */
.seccion {
  animation: aparecer 0.2s ease-out;
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Párrafos introductorios de sección */
.seccion-intro {
  font-size: 16.5px;
  text-align: center;
  margin-bottom: 24px;
}

/* Grid de campos cortos: pares breves a 2 columnas */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 24px;
}

/* =====================================================================
   4. COMPONENTES
   ===================================================================== */

/* ---------------------------------------------------------------
   4.1 Barra de progreso del wizard (DESIGN.md §5.1)
   Stepper de 7 puntos conectados por línea. Solo informativo.
   --------------------------------------------------------------- */
.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 28px;
  list-style: none;
  padding: 0;
}

.stepper-paso {
  position: relative;
  flex: 1;
  max-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Línea conectora entre puntos */
.stepper-paso + .stepper-paso::before {
  content: '';
  position: absolute;
  top: 11px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--borde-suave);
  z-index: 0;
}

.stepper-paso.completado + .stepper-paso::before,
.stepper-paso.actual + .stepper-paso::before {
  background: var(--azul-accion);
}

.stepper-punto {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fondo-tarjeta);
  border: 2px solid var(--borde-suave);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Completado: relleno azul con check */
.stepper-paso.completado .stepper-punto {
  background: var(--azul-accion);
  border-color: var(--azul-accion);
}

.stepper-paso.completado .stepper-punto::after {
  content: '✓';
  color: var(--texto-error); /* blanco */
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Actual: anillo azul */
.stepper-paso.actual .stepper-punto {
  border-color: var(--azul-accion);
  box-shadow: inset 0 0 0 3px var(--fondo-tarjeta);
  background: var(--azul-accion);
}

/* Nombre del paso: solo visible en el actual */
.stepper-nombre {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--azul-accion);
  text-align: center;
  white-space: nowrap;
}

.stepper-paso.actual .stepper-nombre {
  display: block;
}

/* Versión móvil del stepper: "PASO 3 DE 7 · CONTEXTO" (oculta en desktop) */
.stepper-movil {
  display: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--azul-accion);
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------
   4.2 Tarjeta de pregunta (DESIGN.md §5.2)
   --------------------------------------------------------------- */
.tarjeta {
  background: var(--fondo-tarjeta);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--espacio-tarjeta);
  margin-bottom: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.campo {
  transition: opacity 0.2s ease;
}

/* Etiqueta de pregunta */
.campo-etiqueta {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--texto-cuerpo);
  margin-bottom: 12px;
}

/* Asterisco de obligatorio: pegado al final, mismo color */
.campo-etiqueta .obligatorio {
  color: inherit;
}

/* Texto de ayuda bajo la etiqueta */
.campo-ayuda {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-placeholder);
  margin: -6px 0 12px;
}

/* ---------------------------------------------------------------
   4.3 Toggle Sí / No (DESIGN.md §5.3)
   Radios reales ocultos + labels estilizados: el estado vive en el
   radio, no en JS. Nunca preseleccionar.
   --------------------------------------------------------------- */
.toggle-sino {
  display: flex;
  width: 100%;
}

.toggle-sino input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-sino label {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo-control);
  border: 1px solid var(--borde-suave);
  color: var(--texto-placeholder);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

/* Radio de esquinas solo en los extremos externos */
.toggle-sino label:first-of-type {
  border-radius: var(--radio-control) 0 0 var(--radio-control);
  border-right: 0;
}

.toggle-sino label:last-of-type {
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
}

.toggle-sino input[type="radio"]:checked + label {
  background: var(--azul-accion);
  border-color: var(--azul-accion);
  color: var(--texto-error); /* blanco */
}

.toggle-sino input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--anillo-foco);
  outline-offset: 2px;
  z-index: 1;
}

/* ---------------------------------------------------------------
   4.4 Select estándar (DESIGN.md §5.4)
   Placeholder gris; valor elegido en azul (el JS alterna .tiene-valor).
   --------------------------------------------------------------- */
select {
  width: 100%;
  height: var(--altura-control);
  padding: 0 40px 0 14px;
  background: var(--fondo-control);
  border: 0;
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-placeholder);
  appearance: none;
  cursor: pointer;
  /* Chevron ▾ derecho (SVG inline con el color de --azul-accion) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B7FA6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

select.tiene-valor {
  color: var(--azul-accion);
  font-weight: 700;
}

select option {
  color: var(--texto-cuerpo);
  font-weight: 500;
}

/* ---------------------------------------------------------------
   4.5 Autocomplete con búsqueda (DESIGN.md §5.5)
   Para catálogos de 100+ opciones. El JS reemplaza el <select> nativo;
   el valor válido vive en un <input type="hidden">.
   --------------------------------------------------------------- */
.autocomplete {
  position: relative;
}

.autocomplete-caja {
  width: 100%;
  height: var(--altura-control);
  padding: 0 40px 0 14px;
  background: var(--fondo-control);
  border: 0;
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-cuerpo);
}

.autocomplete-caja::placeholder {
  color: var(--texto-placeholder);
}

/* Con valor confirmado (elegido de la lista): azul, como el select */
.autocomplete-caja.tiene-valor {
  color: var(--azul-accion);
  font-weight: 700;
}

.autocomplete-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--fondo-tarjeta);
  border-radius: var(--radio-control);
  box-shadow: var(--sombra-flotante);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.autocomplete-opcion {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-cuerpo);
  cursor: pointer;
}

.autocomplete-opcion:hover,
.autocomplete-opcion.resaltada {
  background: var(--azul-accion-suave);
}

.autocomplete-vacio {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--texto-placeholder);
}

/* ---------------------------------------------------------------
   4.6 Input de texto (DESIGN.md §5.6) — estilo subrayado
   --------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borde-suave);
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-titulo);
  transition: border-color 0.15s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
  color: var(--texto-placeholder);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  outline: none;
  border-bottom: 2px solid var(--azul-accion);
  margin-bottom: -1px; /* compensa el px extra del subrayado */
}

/* ---------------------------------------------------------------
   4.7 Textarea (DESIGN.md §5.7) — caja completa
   --------------------------------------------------------------- */
textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  background: var(--fondo-control);
  border: 0;
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--texto-titulo);
  resize: vertical;
}

textarea::placeholder {
  color: var(--texto-placeholder);
}

/* Contador de caracteres discreto, abajo a la derecha */
.contador-caracteres {
  display: block;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-placeholder);
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   4.8 Fecha (DESIGN.md §5.8)
   --------------------------------------------------------------- */
input[type="date"] {
  width: 100%;
  height: var(--altura-control);
  padding: 0 14px;
  background: var(--fondo-control);
  border: 0;
  border-radius: var(--radio-control);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-titulo);
}

/* Fecha sin valor: se ve como placeholder */
input[type="date"]:invalid,
input[type="date"].sin-valor {
  color: var(--texto-placeholder);
}

/* Ícono de calendario en azul (WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(42%) sepia(57%) saturate(651%) hue-rotate(155deg) brightness(88%) contrast(90%);
}

/* ---------------------------------------------------------------
   4.9 Radios y checkboxes como option-cards (DESIGN.md §5.9)
   --------------------------------------------------------------- */
.option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 52px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-control);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-cuerpo);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.option-card + .option-card {
  margin-top: 8px;
}

.option-card input[type="radio"],
.option-card input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--azul-accion);
  cursor: pointer;
}

.option-card:hover {
  background: var(--azul-accion-suave);
}

/* Seleccionada: borde azul 1.5px (el JS alterna .seleccionada) */
.option-card.seleccionada {
  border: 1.5px solid var(--azul-accion);
  /* compensa el medio px para que la tarjeta no "salte" */
  padding: 13.5px 15.5px;
}

/* Listas largas: grid de 2 columnas en desktop */
.columnas-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.columnas-2 .option-card + .option-card {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   4.10 Franja de error (DESIGN.md §5.10)
   Banda pegada al borde inferior de la tarjeta del campo inválido.
   El JS la inserta/retira dinámicamente junto con .tiene-error.
   --------------------------------------------------------------- */
.franja-error {
  background: var(--rojo-error);
  color: var(--texto-error);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 6px;
  /* Se extiende de borde a borde de la tarjeta anulando su padding */
  margin: 16px calc(-1 * var(--espacio-tarjeta)) calc(-1 * var(--espacio-tarjeta));
}

/* Cuando la franja acompaña a un campo intermedio (no al final de la
   tarjeta), versión compacta con radio propio */
.campo .franja-error {
  margin: 12px 0 0;
  border-radius: var(--radio-control);
}

/* Estados de error en los controles */
.tiene-error input[type="text"],
.tiene-error input[type="email"],
.tiene-error input[type="tel"] {
  border-bottom-color: var(--rojo-error);
}

.tiene-error select,
.tiene-error textarea,
.tiene-error input[type="date"],
.tiene-error .autocomplete-caja {
  box-shadow: inset 0 0 0 1px var(--rojo-error);
}

.tiene-error .toggle-sino label,
.tiene-error .option-card {
  border-color: var(--rojo-error);
}

/* ---------------------------------------------------------------
   4.11 Navegación del formulario (DESIGN.md §5.11)
   Par de botones circulares 44px unidos en pastilla, centrados.
   --------------------------------------------------------------- */
.navegacion {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

/* Réplica al inicio de la sección: mismo par, margen hacia el título. */
.navegacion.superior {
  margin-top: 0;
  margin-bottom: 28px;
}

.btn-nav {
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--azul-accion);
  color: var(--texto-error); /* blanco */
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.btn-nav:hover {
  background: var(--azul-accion-hover);
}

.btn-nav.atras {
  border-radius: 22px 0 0 22px;
  border-right: 1px solid var(--azul-accion-hover);
}

.btn-nav.siguiente {
  border-radius: 0 22px 22px 0;
}

/* Botón único (bienvenida, volver de rechazo): pastilla completa con texto */
.btn-nav.solo {
  border-radius: 22px;
  border-right: 0;
  width: auto;
  min-width: 64px;
  padding: 0 28px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Botón final rectangular "Finalizar inscripción" */
.btn-finalizar {
  display: block;
  width: 100%;
  height: var(--altura-control);
  border: 0;
  border-radius: var(--radio-control);
  background: var(--azul-accion);
  color: var(--texto-error); /* blanco */
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-finalizar:hover {
  background: var(--azul-accion-hover);
}

/* Estado de envío: bloquea doble submit */
.btn-nav:disabled,
.btn-finalizar:disabled {
  cursor: wait;
  opacity: 0.72;
}

.btn-nav:disabled:hover,
.btn-finalizar:disabled:hover {
  background: var(--azul-accion);
}

/* ---------------------------------------------------------------
   4.12 CTA de ayuda — WhatsApp (DESIGN.md §5.12)
   La pieza gráfica ya trae el texto y el número: el enlace solo la
   envuelve y la imagen se encuadra con §4.13.
   --------------------------------------------------------------- */
.cta-whatsapp-imagen {
  display: block;
  transition: opacity 0.15s ease;
}

.cta-whatsapp-imagen:hover {
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   4.13 Imágenes de campaña (DESIGN.md §5.13)
   Alineadas al padding de su contenedor y centradas. El height:auto
   es obligatorio: los atributos width/height del <img> fijarían la
   altura intrínseca y deformarían la imagen al reducirse el ancho.
   --------------------------------------------------------------- */
.imagen-campana {
  width: 100%;
  height: auto;
  margin: 20px auto;
}

/* etapas.webp trae mucho aire arriba y abajo: se recorta al bloque útil */
.imagen-etapas {
  aspect-ratio: 1440 / 620;
  object-fit: cover;
  object-position: center 47%;
}

/* Pieza única de la pantalla de éxito: sola sobre el fondo, con el
   radio y la sombra de una tarjeta para que se lea como superficie */
.imagen-final {
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}

/* =====================================================================
   5. PANTALLAS ESPECIALES (DESIGN.md §7)
   ===================================================================== */

/* Bienvenida: títulos apilados centrados */
.pantalla-bienvenida .subtitulo {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--azul-accion);
  margin-bottom: 20px;
}

/* Cinta "Convocatoria Abierta" */
.cinta-convocatoria {
  display: inline-block;
  background: var(--azul-cinta);
  color: var(--texto-error); /* blanco */
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 16px;
  border-radius: var(--radio-control);
}

.exitos {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

/* Aviso importante en la bienvenida */
.aviso-importante {
  color: var(--texto-titulo);
}

/* Rechazo y éxito: sin stepper, texto centrado */
.pantalla-final {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  min-height: calc(100vh - var(--padding-columna-sup) - var(--padding-columna-inf));
  min-height: calc(100dvh - var(--padding-columna-sup) - var(--padding-columna-inf));
}

.pantalla-final .tarjeta {
  text-align: left;
}

/* =====================================================================
   6. ESTADOS Y ACCESIBILIDAD (DESIGN.md §8)
   ===================================================================== */

/* Foco visible en todo control */
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible,
.autocomplete-caja:focus-visible,
.option-card:focus-within {
  outline: 3px solid var(--anillo-foco);
  outline-offset: 2px;
}

/* El input de texto conserva su foco por subrayado (§4.6), sin anillo */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible {
  outline: none;
}

/* Campo inválido marcado por el servidor o JS */
[aria-invalid="true"] {
  border-color: var(--rojo-error);
}

/* Transiciones de aparición de bloques condicionales (≤ 200ms) */
.bloque-condicional {
  animation: aparecer 0.2s ease-out;
  display:flex;
  flex-direction: column;
  gap: 24px;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =====================================================================
   7. RESPONSIVE (DESIGN.md §9)
   ===================================================================== */

/* 768–1199px: sin reglas propias. La columna ya es fluida (max-width + margin
   auto) y su padding es el mismo en todos los anchos, así que el override que
   vivía aquí repetía el valor base. Las esquinas de .fondo-decorativo escalan
   con el clamp() continuo de la sección LAYOUT (§3), sin escalón propio. */

/* < 768px: 1 columna, stepper reducido, controles a ancho completo.
   .fondo-decorativo NO se oculta: sigue el mismo clamp(calc()) de LAYOUT
   (§3), calibrado con fondo_celular.jpeg hasta 800px de ancho. */
@media (max-width: 1199px) {
  .columna {
    max-width: var(--ancho-columna-small);
    width: 100dvw;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .fondo-logo,
  .fondo-pdl {
    display: none;
  }

  h1 {
    font-size: 24px;
  }

  .grid-2,
  .columnas-2 {
    grid-template-columns: 1fr;
  }

  .columnas-2 .option-card + .option-card {
    margin-top: 0; /* el gap del grid ya separa */
  }

  /* Stepper de puntos → texto "PASO N DE 7 · NOMBRE" */
  .stepper {
    display: none;
  }

  .stepper-movil {
    display: block;
  }

  /* Toggles y botones a ancho completo */
  .navegacion {
    width: 75%;
    gap: 0;
  }

  .btn-nav {
    flex: 1;
    max-width: none;
  }

  .btn-nav.solo {
    width: 100%;
  }
}