/* ==========================================================================
   La Estacion - Correcciones de accesibilidad (WCAG 2.1 AA / UNE-EN 301549)
   Generado por auditoria de accesibilidad. Cada bloque indica el criterio
   que resuelve. No editar a mano: se regenera desde el proceso de auditoria.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [1.4.3 Contraste (minimo)] Navegacion principal y sus submenus.
   El tema servia texto #333333 sobre el azul corporativo #009ad8: 3.97:1 en
   texto de 15px en negrita, que NO es "texto grande" y por tanto exige 4.5:1.
   Se conserva el azul de marca y se lleva el texto a negro puro, que sobre
   #009ad8 da 6.61:1. El blanco no era opcion: solo alcanza 3.17:1.
   -------------------------------------------------------------------------- */
.elementor-55 .elementor-nav-menu--main .elementor-item,
.elementor-55 .elementor-nav-menu--main .elementor-item:link,
.elementor-55 .elementor-nav-menu--main .elementor-item:visited,
.elementor-55 .elementor-nav-menu--dropdown .elementor-item,
.elementor-55 .elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-55 .sm-vertical .elementor-sub-item,
.elementor-55 .elementor-nav-menu .sub-menu .elementor-sub-item {
  color: #000000 !important;
}

/* Estados: se mantiene el contraste en hover, focus y elemento activo. */
.elementor-55 .elementor-nav-menu--main .elementor-item:hover,
.elementor-55 .elementor-nav-menu--main .elementor-item:focus,
.elementor-55 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-55 .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-55 .elementor-nav-menu--dropdown .elementor-item:focus,
.elementor-55 .elementor-nav-menu .sub-menu .elementor-sub-item:hover,
.elementor-55 .elementor-nav-menu .sub-menu .elementor-sub-item:focus {
  color: #000000 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Los submenus desplegables se sirven sobre el mismo azul; se fija el fondo
   de forma explicita para que el calculo de contraste sea determinista. */
.elementor-55 .elementor-nav-menu--dropdown,
.elementor-55 .elementor-nav-menu .sub-menu {
  background-color: #009ad8 !important;
}
/* --------------------------------------------------------------------------
   [2.4.7 Foco visible] + [1.4.11 Contraste no textual]
   Refuerzo global del indicador de foco. El tema ya define un anillo, pero
   sobre fondos oscuros/imagen quedaba por debajo de 3:1. Se usa doble anillo
   (negro + blanco) para garantizar >=3:1 sobre cualquier fondo.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #ffffff !important;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   [1.3.1 Informacion y relaciones] Utilidad para encabezados accesibles que
   no deben alterar el diseno visual (H1 de pagina cuando el titulo visible
   esta dentro de una imagen o de un carrusel).
   -------------------------------------------------------------------------- */
.a11y-sr-only:not(:focus):not(:active),
.a11y-sr-only:not(:focus):not(:active) * {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   [1.2.x] Enlaces a video externo que sustituyen a reproductores incrustados
   (paginas /quienes-somos/). Mantiene relacion 16:9 uniforme, esquinas
   redondeadas coherentes con el diseno y respuesta visible a hover/foco.
   -------------------------------------------------------------------------- */
.a11y-video-link img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.a11y-video-link a {
  display: block;
  position: relative;
  border-radius: 14px;
}
/* Marca visual de "reproducir" para que el enlace se lea como video */
.a11y-video-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 34px 34px;
  pointer-events: none;
  transition: background-color .25s ease, transform .25s ease;
}
.a11y-video-link a:hover img,
.a11y-video-link a:focus-visible img {
  transform: scale(1.015);
  filter: brightness(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.a11y-video-link a:hover::after,
.a11y-video-link a:focus-visible::after {
  background-color: rgba(0, 122, 173, .92);
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .a11y-video-link img,
  .a11y-video-link a::after { transition: none; }
  .a11y-video-link a:hover img,
  .a11y-video-link a:focus-visible img { transform: none; }
}

/* --------------------------------------------------------------------------
   [3.3.2 Etiquetas o instrucciones] Marca visible de campo obligatorio en los
   formularios de Elementor. Antes solo existia el atributo HTML required, sin
   indicacion perceptible visualmente.
   -------------------------------------------------------------------------- */
.elementor-field-group > label.elementor-field-label .a11y-required-mark,
.elementor-field-group .a11y-required-mark {
  color: #b3001b; /* 7.3:1 sobre blanco */
  font-weight: 700;
  margin-inline-start: .25em;
}
.a11y-form-required-note {
  font-size: .875rem;
  margin-block-end: 1rem;
  color: #4a4a4a;
}
.a11y-form-required-note .a11y-required-mark { margin-inline-start: 0; }

/* --------------------------------------------------------------------------
   [3.3.1 Identificacion de errores] Estilo del mensaje de error por campo
   inyectado por accessibility.js.
   -------------------------------------------------------------------------- */
.a11y-field-error {
  display: block;
  color: #b3001b;
  font-size: .875rem;
  margin-block-start: .35rem;
  font-weight: 600;
}
.elementor-field-group [aria-invalid="true"] {
  border: 2px solid #b3001b !important;
}

/* --------------------------------------------------------------------------
   [2.2.2 Poner en pausa, detener, ocultar] Boton de pausa inyectado por
   accessibility.js sobre carruseles y videos de fondo con reproduccion
   automatica.
   -------------------------------------------------------------------------- */
.a11y-motion-toggle {
  position: absolute;
  z-index: 99;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: rgba(0, 0, 0, .72);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}
.a11y-motion-toggle:hover { background: rgba(0, 97, 138, .95); }
.a11y-motion-toggle svg { inline-size: 20px; block-size: 20px; fill: currentColor; }
.a11y-motion-host { position: relative; }

/* --------------------------------------------------------------------------
   [1.2.x] Alternativa textual del video de /galeria/. El video queda
   etiquetado como alternativa multimedia al texto, por lo que el texto debe
   ser localizable y legible.
   -------------------------------------------------------------------------- */
.a11y-media-alt {
  margin-block: 1.5rem;
  border: 1px solid #d6d6d6;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: #fafafa;
}
.a11y-media-alt > summary {
  cursor: pointer;
  font-weight: 700;
  padding: .25rem 0;
}
.a11y-media-alt > summary:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
}
.a11y-media-alt .a11y-media-alt__body { margin-block-start: 1rem; }
.a11y-media-alt .a11y-media-alt__body p { margin-block: .6rem; }
.a11y-media-alt__note {
  font-size: .9rem;
  color: #4a4a4a;
  margin-block-end: .75rem;
}

/* --------------------------------------------------------------------------
   [1.2.2 / 1.2.3 / 1.2.5] Bloque de alternativa textual del video de
   /galeria/. El video se declara alternativa multimedia al texto, por lo que
   la transcripcion debe ser visible, localizable y legible.
   -------------------------------------------------------------------------- */
.a11y-media-alt-wrap { margin-block-start: 1rem; }
.a11y-media-alt__label {
  margin-block-end: .75rem;
  font-size: .95rem;
  line-height: 1.5;
}
.a11y-media-alt__t {
  display: inline-block;
  min-inline-size: 3.4em;
  font-variant-numeric: tabular-nums;
  color: #00618a;
  font-weight: 700;
}
.a11y-media-alt .a11y-media-alt__body p {
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   [1.4.3 Contraste (minimo)] Calendario de Cloudari OneBox.
   Los dias ya pasados se pintaban en #cccccc sobre blanco (1.6:1). Aunque no
   son elementos interactivos, el numero del dia sigue siendo texto que aporta
   informacion, por lo que se lleva a #767676 (4.54:1) manteniendo la
   distincion visual respecto a los dias activos.
   -------------------------------------------------------------------------- */
.celda-dia.dia-pasado .numero-dia,
.dia-pasado .numero-dia {
  color: #767676 !important;
}

/* Los dias pasados no son accionables: no deben sugerir que lo son. */
.celda-dia.dia-pasado {
  cursor: default !important;
}

/* --------------------------------------------------------------------------
   [1.4.1 Uso del color] Enlaces dentro de bloques de texto.
   Los enlaces en linea se distinguian unicamente por el color (#000000 sobre
   texto #333333: 1.66:1 de diferencia, muy por debajo del 3:1 exigido para
   diferenciar solo por color). Se les anade subrayado permanente, que es un
   indicador no cromatico.
   Se excluyen menus, botones y otros componentes de navegacion, donde el
   contexto ya identifica el elemento como accionable.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button),
.entry-content a:not(.elementor-button),
.legal-wrap a:not(.elementor-button),
.a11y-media-alt a,
.elementor-widget-html p a:not(.elementor-button),
.elementor-widget-html li a:not(.elementor-button) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.elementor-widget-text-editor a:not(.elementor-button):hover,
.elementor-widget-theme-post-content a:not(.elementor-button):hover,
.entry-content a:not(.elementor-button):hover,
.legal-wrap a:not(.elementor-button):hover,
.elementor-widget-html p a:not(.elementor-button):hover,
.elementor-widget-html li a:not(.elementor-button):hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   [1.4.10 Reajuste del texto] A 320 px CSS el documento generaba scroll
   horizontal porque cadenas largas sin espacios (direcciones de correo, URLs)
   no rompian linea. Se permite el corte solo cuando la palabra no cabe.
   -------------------------------------------------------------------------- */
.email-link,
a[href^="mailto:"],
a[href^="tel:"],
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.a11y-media-alt__body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* El panel deslizante del widget OneTap vive fuera del lienzo hasta que se
   abre; no debe contabilizar como desbordamiento del documento. */
nav.onetap-accessibility.onetap-plugin-onetap {
  max-inline-size: 100vw;
}

/* --------------------------------------------------------------------------
   [1.3.2 / 2.3.3 / robustez] Animaciones de entrada de Elementor.
   Elementor marca los elementos animados con .elementor-invisible
   (visibility: hidden) hasta que su animacion se dispara al hacer scroll. Si
   la animacion no llega a dispararse, el contenido queda permanentemente
   invisible y fuera del arbol de accesibilidad.
   Red de seguridad: cuando el usuario pide movimiento reducido, el contenido
   se muestra directamente y no se anima.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .elementor-element,
  .animated {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Elementor oculta el contenido animado con visibility: hidden hasta que la
   animacion se dispara al hacer scroll. visibility: hidden ademas RETIRA el
   elemento del arbol de accesibilidad, de modo que quien navega por
   encabezados o landmarks sin desplazarse no puede alcanzarlo.
   Se sustituye por opacity: 0, que mantiene el elemento en el arbol de
   accesibilidad conservando exactamente el mismo efecto visual: la animacion
   de entrada sigue llevandolo de 0 a 1 al entrar en pantalla. */
.elementor-invisible {
  visibility: visible !important;
  opacity: 0;
}

/* Salvaguarda: si la animacion no llega a dispararse, accessibility.js marca
   el elemento con .a11y-reveal y se muestra igualmente. */
.a11y-reveal.elementor-invisible,
.elementor-invisible.animated {
  opacity: 1 !important;
}