/* Lo que el diseño no puede llevar en línea. Los estilos del diseño van en el HTML tal como vienen del
   artifact, así que para cambiarlos en pantallas chicas hace falta !important: un style="" le gana a
   cualquier regla de una hoja sin él. */

body { margin: 0; }
a { color: #007AA3; }
a:hover { color: #333399; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Enlace para saltar la navegación: sólo aparece al llegar con el teclado. */
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 10; background: #FFFFFF; color: #0E1340; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.saltar:focus { left: 16px; }

/* Menú en pantallas chicas: el botón reemplaza a los siete enlaces, que se despliegan bajo el logo. */
.abrir-menu { display: none; box-sizing: border-box; width: 44px; height: 44px; padding: 10px; border: 1px solid #E2E8F2; border-radius: 8px; background: #FFFFFF; cursor: pointer; flex-direction: column; justify-content: space-between; }
.abrir-menu span { display: block; height: 2px; border-radius: 2px; background: #0E1340; transition: transform .2s, opacity .2s; }
.abrir-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.abrir-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

@media (max-width: 1080px) {
  .abrir-menu { display: flex; }
  .menu { display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; border-top: 1px solid #E2E8F2; }
  .menu.abierto { display: flex !important; }
  .menu a { padding: 12px 0; border-bottom: 1px solid #E2E8F2; }
}

/* Formulario de contacto. */
form.contacto .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.contacto button:disabled { opacity: .6; cursor: progress !important; }
/* Turnstile en modo «sólo si hace falta» queda vacío casi siempre: el margen negativo anula el hueco de la grilla. */
form.contacto .cf-turnstile { grid-column: 1 / -1; margin-bottom: -16px; }
form.contacto .estado { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: 8px; font-size: 15px; font-weight: 500; }
form.contacto .estado.bien { background: #E8F6EE; color: #14633A; }
form.contacto .estado.mal { background: #FFF4F2; color: #8A1F11; }

/* Páginas de texto: privacidad, divulgación responsable y 404. */
.texto { max-width: 820px; margin: 0 auto; padding: 72px 24px 88px; color: #525A72; font-size: 17px; }
.texto .antetitulo { margin: 0 0 12px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.08em; color: #007AA3; }
.texto h1 { margin: 0; font-family: Sora, sans-serif; font-weight: 700; font-size: 38px; line-height: 1.15; color: #0E1340; }
.texto h2 { margin: 40px 0 0; font-family: Sora, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.25; color: #0E1340; }
.texto p, .texto ul { margin: 14px 0 0; }
.texto ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.texto strong { color: #1A1F36; font-weight: 600; }
.texto .fecha { margin-top: 16px; font-size: 14px; }
.texto .boton { display: inline-block; margin-top: 28px; background: #333399; color: #FFFFFF; text-decoration: none; padding: 14px 22px; border-radius: 8px; font-weight: 600; }

/* Teléfonos: los títulos del diseño (52 y 34-38 px) no caben y desbordan la pantalla. */
@media (max-width: 600px) {
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  .portada-interior { padding-top: 64px !important; padding-bottom: 72px !important; }
  .texto { padding-top: 48px; padding-bottom: 64px; }
}