/* =====================================================================
   Pantalla de bienvenida — Plataforma de Naturalización (banco 2025)
   Mobile-first (sección 8.1): una sola columna, botones grandes,
   nada pensado para escritorio.
   ===================================================================== */

/* =====================================================================
   Tipografía AUTOHOSPEDADA (sin CDN externos: la política de privacidad
   promete no compartir datos con terceros, y un CDN de fuentes recibe la
   IP de cada visitante).
   - Public Sans (SIL OFL; la fuente del U.S. Web Design System): fuente
     variable — un solo .woff2 cubre los pesos 400/600/700.
   - IBM Plex Mono (SIL OFL): solo para anotaciones de documento
     (etiquetas de referencia) y avisos legales en caja ámbar.
   ===================================================================== */
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #1a3c6e;        /* azul institucional (navy estructural) */
  --azul-claro: #e8eef7;
  --rojo: #b22234;        /* (heredado; ya no es el color de acción — ver --accion) */
  --texto: #1c2533;
  --texto-suave: #4a5568;
  --borde: #d7dee8;
  --aviso-bg: #fff8e6;
  --aviso-borde: #e2c275;
  --radio: 12px;

  /* ================================================================
     Botón de ACCIÓN principal: rojo brillante (#B22234 Old Glory Red +
     texto blanco). El feedback de error usa un rojo vino distinto
     (--rojo-error) para que el ojo los diferencie. Global a toda la app.
     ================================================================ */
  --accion:        #B22234;   /* relleno del botón de acción principal (Old Glory Red) */
  --accion-oscuro: #8E1B29;   /* hover/active del botón de acción */
  --rojo-error:    #8B2332;   /* feedback de respuesta incorrecta / alertas (rojo vino) */
  --ambar:         #d97706;   /* ámbar fuerte — énfasis en instrucciones N-400 */

  /* ================================================================
     Sistema de color POR SECCIÓN (heredado del panel). El tono pleno
     va en bordes de acento; el "-suave" en fondos de círculos de
     ícono y etiquetas. Identidad visual, NO funcionalidad: botones
     como "Escuchar" siguen en navy, y el rojo #B22234 es exclusivo
     del botón de acción principal.
     ================================================================ */
  --color-comandos: #1F3A5F;  --color-comandos-suave: #B6CCE3;  /* navy */
  --color-n400:     #4A3B8C;  --color-n400-suave:     #C6BCE8;  /* morado/índigo */
  --color-civismo:  #2166A5;  --color-civismo-suave:  #ADD0EE;  /* azul brillante */
  --color-lectura:  #2D6B4A;  --color-lectura-suave:  #B1DCC5;  /* verde bosque */
  --color-examen:   #C17A2E;  --color-examen-suave:   #EFCEA9;  /* ámbar/naranja */
  --color-oath:     #B08A2E;  --color-oath-suave:     #EAD7A9;  /* dorado */
  --color-progreso: #3D5568;  --color-progreso-suave: #B9CBDA;  /* azul grisáceo */
}

* { box-sizing: border-box; }

/* =====================================================================
   RED DE SEGURIDAD GLOBAL para íconos SVG (misma que en landing.css).
   Un <svg> con solo viewBox (sin width/height) se infla a pantalla completa
   si le falta una regla de tamaño. Esta regla base de baja especificidad da
   un tamaño seguro por defecto; cualquier regla de contexto (.btn-bocina svg,
   .tarjeta .icono svg, .btn-inicio svg, etc.) tiene más especificidad y la
   sobrescribe. .icono-svg queda para fijar el tamaño explícitamente.
   ===================================================================== */
svg { width: 24px; height: 24px; }
.icono-svg { width: 24px; height: 24px; }

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

/* =====================================================================
   Micro-transiciones GLOBALES (pulido, no espectáculo): todo botón del
   sitio transiciona suave y se oscurece apenas al pasar/presionar.
   welcome.css se carga en todas las páginas, así que esto cubre todo.
   ===================================================================== */
button, .boton-continuar {
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease,
              transform 0.15s ease, filter 0.15s ease;
}
button:hover, .boton-continuar:hover { filter: brightness(0.96); }
button:active, .boton-continuar:active { filter: brightness(0.93); }
button:disabled { filter: none; }

body {
  margin: 0;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: #f4f6fa;
  line-height: 1.55;
  font-size: 1.0625rem;   /* 17px en rem: escala con la preferencia del navegador */
}

/* Una sola columna, ancho cómodo para teléfono y centrado en pantallas grandes */
.contenedor {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 18px 40px;
}

/* Tableta (iPad vertical/horizontal): una sola columna, algo más ancha.
   No se convierte en layout de escritorio (sección 8.1). */
@media (min-width: 700px) {
  .contenedor { max-width: 680px; }
}

/* ---------- Encabezado ---------- */
.cabecera {
  background: var(--azul);
  color: #fff;
  text-align: center;
  padding: 32px 52px 28px;   /* espacio lateral para el botón de inicio */
  position: relative;
}

/* Botón de inicio (Home) fijo en el encabezado navy de todas las pantallas */
.btn-inicio {
  position: absolute; top: 14px; left: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: #fff; text-decoration: none;
  border-radius: 10px; background: rgba(255, 255, 255, 0.12);
}
.btn-inicio svg { width: 22px; height: 22px; display: block; }
.btn-inicio:active { transform: translateY(1px); }
.cabecera h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.25;
}
.cabecera p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
}

/* ---------- Bloques de texto ---------- */
.intro {
  margin: 26px 0 10px;
}
.intro h2 {
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: var(--azul);
}

/* ---------- Pasos de la entrevista ---------- */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.paso {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 14px;
}
.paso .num {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.paso .cuerpo { flex: 1; }
.paso h3 {
  margin: 4px 0 4px;
  font-size: 1.08rem;
}
.paso p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.97rem;
}

/* Etiqueta visible para los pasos orientativos (N-400 y decisión final) */
.etiqueta-orientativo {
  display: inline-block;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-borde);
  color: #7a5b14;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* Aclaración visible (no nota al pie escondida).
   Monoespaciada, un punto más chica: aire de anotación de documento oficial. */
.aclaracion {
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin: 22px 0;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #5c4a1a;
}
.aclaracion strong { color: #4a3a10; }

/* Aviso legal DISCRETO al pie (una línea, sin fondo ni borde). Se usa en las
   páginas de contenido en vez del recuadro ámbar grande. */
.aviso-linea {
  text-align: center; margin: 30px 0 4px;
  font-size: 0.8rem; color: var(--texto-suave); line-height: 1.5;
}

/* ---------- Botón Continuar (grande, touch-friendly) ---------- */
.acciones {
  margin: 30px 0 10px;
}
.boton-continuar {
  display: block;
  width: 100%;
  min-height: 56px;
  background: var(--accion);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 56px;
  border-radius: var(--radio);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.boton-continuar:active { transform: translateY(1px); }

.nota-acceso {
  text-align: center;
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin-top: 12px;
}

/* ---------- Aviso legal (sección 9), visible en el pie ---------- */
.aviso-legal {
  margin-top: 34px;
  padding: 18px;
  background: #eef1f6;
  border-top: 3px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.aviso-legal h2 {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--texto);
}
.aviso-legal p { margin: 0; }

/* =====================================================================
   Footer del sitio — presente en TODAS las páginas (welcome.css se carga
   en todas). Colores fijos (navy) para que funcione con o sin landing.css.
   Incluye los enlaces a las 4 páginas legales/informativas.
   ===================================================================== */
.sitio-footer {
  background: #1F3A5F;
  color: #DCE6F0;
  text-align: center;
  padding: 30px 20px 36px;
  margin-top: 44px;
}
.sitio-footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px; margin: 0 0 16px;
}
.sitio-footer-nav a {
  color: #fff; text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
}
.sitio-footer-nav a:hover { text-decoration: underline; }
.sitio-footer-aviso {
  margin: 0 auto; max-width: 64ch;
  font-size: 0.82rem; line-height: 1.55; color: #AFC0D8;
}

/* =====================================================================
   Barra de logo simple — header de regreso al inicio (p. ej. bienvenida.html).
   Replica el look del nav de la landing (fondo blanco, navy #1F3A5F, alto
   ~60px) sin necesitar landing.css. Solo el logo, que enlaza a index.html.
   ===================================================================== */
.site-logo-bar { background: #fff; border-bottom: 1px solid var(--borde); }
.site-logo-bar-inner {
  width: 100%; max-width: 600px; margin: 0 auto;
  padding: 0 18px; min-height: 60px;
  display: flex; align-items: center;
}
@media (min-width: 700px) { .site-logo-bar-inner { max-width: 680px; } }
.site-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.site-logo img { display: block; flex: 0 0 auto; }
.site-logo-txt { color: #1F3A5F; font-weight: 800; font-size: 1.12rem; }