/* ═══════════════════════════════════════════════════════════
   Fase 2 — Legibilidad y contraste · Guardián en el Muro
   Público prioritario: 55–70 años. Objetivo: lectura cómoda y
   contraste WCAG 2.2 AA, conservando la estética "Atalaya".
   Se carga DESPUÉS de tailwind.css y del <style> en línea, así
   que estos ajustes ganan por orden de cascada. Reversible:
   basta con quitar el <link> de esta hoja para volver atrás.
   ═══════════════════════════════════════════════════════════ */

/* 1) Zoom tipográfico uniforme: 16px → 18px de raíz.
      El cuerpo (text-base) pasa a 18px y los párrafos guía
      (text-lg) a ~20px, manteniendo las proporciones del diseño. */
html { font-size: 112.5%; }

/* 2) Interlineado más holgado para textos largos. */
body { line-height: 1.65; }

/* 3) Contraste: --text-3 pasaba 4.28:1 (falla AA).
      #9A938A sube a 6.6:1 sobre el fondo y 6.4:1 sobre bg-soft. */
:root { --text-3: #9A938A; }

/* 4) Texto secundario (text-sm) un punto más legible:
      0.92rem ≈ 16.6px (antes 15.75px). */
.text-sm { font-size: 0.92rem; }

/* 5) Botones: texto grande y zona de toque cómoda (≥48px). */
.btn-primary,
.btn-secondary {
  font-size: 1.0625rem;      /* ~19px */
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* 6) Barra superior: el cuerpo crece, pero la barra se mantiene en una línea.
      (Los ajustes van dentro de <header> para no afectar el resto.) */
header .nav-link { font-size: 14px; padding: 6px 12px; }
header .text-sm  { font-size: 14px; }                 /* enlace "Contacto" */
header .btn-primary {                                  /* botón "Apoyar el ministerio" */
  font-size: 14px;
  min-height: 0;
}
.md\:flex.gap-6 { gap: 1.25rem; }                      /* junta un poco los enlaces */

/* 6b) R-04 (reauditoría): el nav horizontal completo no cabe en el pill por
       debajo de ~1400px y se recortaba el botón "Apoyar el ministerio".
       Solución: ensanchar un poco el contenedor para pantallas anchas y, por
       debajo de 1400px, usar el menú compacto (hamburguesa) en vez de recortar.
       No se reduce más la letra ni se oculta el desborde. */
header > div.glass { max-width: 78rem; }               /* ~1404px: cabe el nav completo */

@media (max-width: 1399px) {
  header nav.md\:flex,
  header .md\:flex.items-center.gap-3 { display: none !important; }  /* nav y CTA de escritorio */
  header #menuBtn { display: inline-flex !important; }               /* hamburguesa visible */
  /* El panel compacto solo se mostraba hasta 768px; aquí lo habilitamos en toda
     la franja (769–1399) donde ahora aparece la hamburguesa. */
  header #mobileMenu.open { display: grid !important; grid-template-columns: 1fr 1fr; gap: .55rem; }
  /* Todos los enlaces del panel con el MISMO tratamiento legible: texto claro
     sobre superficie translúcida (evita texto oscuro sobre fondo oscuro en los
     enlaces que llevan clase btn-primary, p. ej. "Contacto"). */
  header #mobileMenu.open > a { padding: .72rem 1rem; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.03) !important; color: var(--text-1) !important; text-align: center; font-size: 1.02rem !important; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  header #mobileMenu.open > a.btn-primary { grid-column: 1 / -1; }
}

/* 7) Menú móvil: enlaces grandes y fáciles de pulsar. */
@media (max-width: 768px) {
  #mobileMenu > a {
    font-size: 1.02rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 9) Enlace "Saltar al contenido": oculto hasta recibir foco con el teclado. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -130%);
  z-index: 10000;
  background: var(--gold-1);
  color: #1A1206;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 22px;
  border-radius: 0 0 14px 14px;
  text-decoration: none;
  transition: transform .2s ease;
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid #1A1206;
  outline-offset: 2px;
}

/* 8) Respeto a quien prefiere menos movimiento.
      Neutraliza el movimiento continuo de fondo (trazos de luz, destellos,
      "motas" y respiraciones) que de otro modo recorre la pantalla —
      incluido el entorno del formulario de oración y las páginas de lectura. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}