/* ==========================================================================
   Accesibilidad base — foco visible y movimiento reducido
   --------------------------------------------------------------------------
   Este archivo se escribe a mano y NO lo genera Tailwind. `npm run css`
   sobrescribe static/css/main.css por completo, así que estas reglas viven
   aparte para sobrevivir a cada recompilación.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Foco visible — WCAG 2.4.7

   El sitio no tenía ni un solo estilo de foco. Quien navega con teclado no
   veía dónde estaba: el feedback de los botones vive en atributos
   `onmouseover` inline, que sólo responden al ratón y nunca se disparan
   con Tab.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid #1751a9;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Sobre fondos oscuros el azul de marca se confunde con el fondo (el hero
   es #050e1f), así que ahí el anillo pasa a blanco. */
.cfy-hero-section :focus-visible,
.cfy-footer :focus-visible,
footer :focus-visible {
  outline-color: #ffffff;
}

/* Navegadores sin soporte de :focus-visible no deben quedarse sin indicador. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid #1751a9;
    outline-offset: 3px;
  }
}


/* --------------------------------------------------------------------------
   2. Movimiento reducido — WCAG 2.3.3

   Deliberadamente NO se usa el `animation-duration: 0.01ms` global que se ve
   por ahí: ese truco destruye también el feedback útil. Aquí se separan las
   dos cosas.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  /* 2a. Movimiento decorativo e infinito: se detiene del todo.
     Zoom continuo del mapa del hero, partículas flotantes, puntos que laten,
     líneas de flujo, marquesina y el degradado animado de header y footer.
     Ninguno transmite información; sólo ambientan.

     El selector de atributo alcanza las animaciones declaradas en `style=`
     inline, que es como están escritas casi todas en estos layouts. Una
     regla !important de hoja de estilos gana a un inline sin !important. */
  .cfy-ping,
  .cfy-particle,
  .cfy-flow-line,
  .cfy-rainbow-text,
  .rm-node-now,
  .rm-node-next,
  [style*="animation"] {
    animation: none !important;
  }

  /* 2b. Las transiciones sí comunican cambio de estado — hover, apertura de
     menús, foco — así que se acortan en lugar de eliminarse. Quien pidió
     menos movimiento sigue percibiendo QUE algo cambió, sin el recorrido. */
  *,
  *::before,
  *::after {
    transition-duration: 0.08s !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   3. Área táctil mínima — WCAG 2.5.8

   Medido en un viewport de 375px: los puntos del carrusel quedaban en 10x10,
   las banderas de idioma en 20x20 y los iconos sociales del footer en 16x24.
   Todos por debajo del mínimo de 24x24.

   Se agranda la ZONA SENSIBLE con una capa invisible centrada, no el elemento
   en sí, para que el aspecto no cambie. El paso entre elementos es de 28px
   (iconos sociales) y 34px (puntos), así que las capas de 24px no se solapan
   y no queda ambiguo qué se está pulsando.
   -------------------------------------------------------------------------- */

.cfy-social-link,
.causfy-lang-item,
#cfy-dots button {
  position: relative;
}

.cfy-social-link::after,
.causfy-lang-item::after,
#cfy-dots button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 24px;
  min-height: 24px;
}