/* ==========================================================================
   Correcciones responsive — hoja aditiva, cargada la última.
   Ver notas/13-responsive-top100.md y notas/14-auditoria-responsive.md

   El sitio replicado escala TODO con el tamaño de fuente raíz:

     @media (max-width: 768px) { html { font-size: 2.75vw } }
     html { font-size: calc(14 / 1920 * 100vw) }

   Eso produce un salto brusco justo en 769px: el texto base cae de 29,6px a
   7,9px y no vuelve a ser legible hasta ~1400px. Tablets y portátiles
   pequeños quedan ilegibles.

   Aquí sólo se pone un suelo a ese valor. A partir de 1440px la regla es la
   identidad, así que el diseño original queda intacto donde ya funcionaba.
   ========================================================================== */

html {
  /* ≥1440px: calc() ya vale 10.5px o más → sin cambio.
     769–1439px: se queda en 10.5px en lugar de bajar hasta 5.6px. */
  font-size: max(10.5px, calc(14 / 1920 * 100vw));
}

@media screen and (max-width: 768px) {
  html {
    /* 2.75vw a 320px son 8.8px (texto base de 12.3px). Suelo de 10px y
       techo de 12px: en tablets (600–768px) 2.75vw daba hasta 21px y todo
       salía gigante (cabeceras de 630px, tarjetas de 1500px). */
    font-size: clamp(10px, 2.75vw, 12px);
  }
}

/* --------------------------------------------------------------------------
   Áreas seguras: el botón flotante de inscripción va fijo abajo y en móviles
   con barra de gestos queda pegado al borde.
   -------------------------------------------------------------------------- */

.reg-btn {
  bottom: max(2rem, env(safe-area-inset-bottom, 0px));
}

@media screen and (max-width: 768px) {
  .reg-btn {
    bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 0.8rem));
  }
}

/* --------------------------------------------------------------------------
   Áreas táctiles: enlaces del menú móvil y del footer con altura suficiente.
   Sólo aplica en móvil, donde se tocan con el dedo.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  /* Los enlaces del menú móvil se estilan en brand.css (sección Menú móvil) */
  .footer .fast__links a,
  .documents-list li a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .lang .mobile a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Movimiento reducido: el original anima siempre (marquee con GSAP, cinta de
   logos con Swiper, punto pulsante). Se respeta la preferencia del sistema.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Sin desbordamiento horizontal en ningún ancho.
   -------------------------------------------------------------------------- */

body {
  overflow-x: hidden;
}

/* Tablas de resultados: scroll contenido en lugar de romper la página. */
.results_content .container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}