/*
 * Base global del tema.
 * Reproduce el bloque <style> global de las páginas del prototipo.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Complementa al scroll por JS: si el navegador salta a un ancla directamente,
     deja hueco para el header fijo. */
  scroll-padding-top: var(--header-offset);
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  /* Sin line-height global a propósito: el prototipo deja `normal` en body y
     solo fija --lh-body en los párrafos concretos que lo llevan. Poner 1.6
     aquí engorda todas las secciones respecto al diseño. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--coral);
  text-decoration: none;
}

a:hover {
  color: var(--coral-hover);
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

img,
video {
  max-width: 100%;
}

/*
 * Imprescindible desde que las imágenes salen de la Biblioteca de Medios:
 * wp_get_attachment_image() escribe los atributos width y height del original
 * (que es lo que evita los saltos de maquetación al cargar), y sin esto el
 * navegador respeta esa altura literal y deforma la imagen al reducir el ancho.
 *
 * Los VÍDEOS de sección llevan ahora los mismos atributos, y por el mismo
 * motivo: reservan el hueco antes de que llegue el fichero. Sin este
 * `height: auto` el atributo se toma como altura literal y el vídeo sale
 * aplastado — y además anula el `aspect-ratio` que algunos tienen en su CSS,
 * porque esa propiedad solo actúa cuando la altura es automática.
 *
 * Los vídeos de los modales que sí quieren una altura fija (los de paso a
 * paso) la fijan en modals.css con más especificidad, así que no les afecta.
 */
img,
video {
  height: auto;
}

/*
 * Vídeos decorativos (en bucle, silenciados y sin controles).
 * Si Chrome los considera "hovered" les superpone su propia capa nativa
 * (botón de Picture-in-Picture / controles), que se ve como un rectángulo gris
 * sobre el vídeo y aparece y desaparece al mover el ratón. Como no son
 * interactivos, lo más limpio es que no capturen el puntero.
 * Se identifican por disablepictureinpicture, que solo llevan estos: el vídeo
 * del modal sí es interactivo y queda fuera de esta regla.
 */
video[disablepictureinpicture] {
  pointer-events: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
  overflow-wrap: break-word;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
}

/* Enlace para saltarse el menú con el teclado. Vive fuera de la pantalla hasta
   que recibe el foco, y entonces aparece sobre el header (que es fixed con
   z-index 50, de ahí el 100). */
.exr-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--coral);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-feature);
  transition: transform 160ms ease;
}

/* :focus y no :focus-visible: este enlace tiene que aparecer siempre que reciba
   el foco, venga como venga. */
.exr-skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* Utilidad: texto solo para lectores de pantalla */
.exr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Animaciones globales ---------- */

/* Flotación suave de las insignias de recompensa (sección 8) */
@keyframes floatBadge {
  0%,
  100% { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
}

/* Crossfade de las capturas de tracking (modal de minijuegos) */
@keyframes gtCrossfade {
  0%, 20%  { opacity: 1; }
  50%, 70% { opacity: 0; }
  100%     { opacity: 1; }
}

/* Reveal al entrar en viewport. El estado inicial lo aplica reveal.js solo si
   hay IntersectionObserver y no hay reduced-motion, de forma que sin JS el
   contenido queda visible por defecto. */
[data-reveal].is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}