/* ==========================================================================
   PARCHE DE ACCESIBILIDAD — interpretertranslation.com
   Fecha: 2026-10-20  ·  Revisión de referencia: docs/REVISION_INDEPENDIENTE_2026-10-19.md
   Ámbito: solo lo que se puede corregir con CSS. El resto (landmark <main>,
   alt del sello, label del pasaporte) está en parche-accesibilidad.php.

   CÓMO REVERTIR: borrar este fichero (y parche-accesibilidad.php) y purgar caché.

   Todos los selectores de este fichero existen en el HTML capturado del sitio.
   No se ha inventado ninguno; se indica de dónde sale cada uno.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) CONTRASTE DEL MENÚ PRINCIPAL  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   Problema: los ítems del menú de escritorio se pintan con #9b9b9b sobre el
   fondo blanco de la píldora del header (#FFFFFF, ver template_73_elementor.json).
   Contraste real medido: 2,78:1. El mínimo para texto normal (15 px, peso 500)
   es 4,5:1.

   Origen del color: plantilla Elementor del header (post 73), widget nav-menu
   con clase CSS "mi-menu" y ajuste color_menu_item = #9B9B9B. Ese valor se
   imprime en el CSS generado de la plantilla (elementor/post-73.css), que NO
   está en la captura local, por eso aquí se fuerza el color.

   Selector real (home.html, líneas 272-276):
     <div class="... mi-menu ...">
       <nav class="elementor-nav-menu--main ...">
         <ul id="menu-1-f91a3bc" class="elementor-nav-menu">
           <li class="... menu-item ..."><a class="elementor-item">Home</a>

   Se limita a .elementor-nav-menu--main (menú de escritorio) para NO tocar el
   menú móvil, que ya usa #014b7a sobre fondo claro y sí pasa contraste.

   Color elegido: #595959 = 7,0:1 sobre #ffffff. Mantiene el aspecto gris del
   diseño y deja margen de sobra sobre 4,5:1 por si el fondo cambia de blanco
   puro a un gris muy claro.
   -------------------------------------------------------------------------- */

.mi-menu .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item > a.elementor-item {
    color: #595959 !important;
}

/* El ítem de la página actual conserva el color de marca (Elementor lo pinta
   con la global "primary"). Si esa global fuese un color claro, forzar aquí
   #014b7a (9,18:1 sobre blanco). Comprobado: en el HTML el ítem activo lleva
   la clase .elementor-item-active. */
.mi-menu .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item > a.elementor-item-active {
    color: #014b7a !important;
}

/* --------------------------------------------------------------------------
   2) ESTADOS HOVER / FOCUS DEL MENÚ  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   El hover usa la global "secondary" de Elementor, #1DBBC4: sobre la píldora
   blanca del header da 2,34:1 (mínimo 4,5:1). Se sustituye por un teal
   oscurecido que conserva el tono y llega a 4,97:1 sobre blanco.

   El submenú desplegable usa #00C2CB sobre #E6F9FA (1,9:1); con #0F7C82
   queda en 4,61:1 sobre ese mismo fondo claro.
   -------------------------------------------------------------------------- */

.mi-menu .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item > a.elementor-item:not(.elementor-item-active):hover,
.mi-menu .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item > a.elementor-item:not(.elementor-item-active):focus {
    color: #0f7c82 !important;
}

.elementor-nav-menu ul.sub-menu li a:hover,
.elementor-nav-menu ul.sub-menu li a:focus {
    color: #0f7c82 !important;
}



/* --------------------------------------------------------------------------
   3) INDICADOR DE FOCO VISIBLE EN EL MENÚ  ·  WCAG 2.2 AA 2.4.7
   --------------------------------------------------------------------------
   Selectores reales: los enlaces del menú (.elementor-item) y el botón
   hamburguesa (.elementor-menu-toggle, presente en home.html línea 302).
   No cambia nada en reposo; solo al navegar con teclado.
   -------------------------------------------------------------------------- */

.mi-menu .elementor-item:focus-visible,
.mi-menu .elementor-menu-toggle:focus-visible {
    outline: 2px solid #014b7a !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}


/* --------------------------------------------------------------------------
   4) SKIP LINK VISIBLE AL RECIBIR FOCO  ·  A11Y-02 (parte CSS)
   --------------------------------------------------------------------------
   El enlace existe en todas las páginas:
     <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
   Pero el tema lo deja recortado (.screen-reader-text) y no siempre lo libera
   al enfocar. Esta regla es una red de seguridad: en cuanto recibe foco se
   convierte en una píldora legible arriba a la izquierda.

   OJO: que el enlace *funcione* depende de que exista el destino #content;
   eso lo resuelve parche-accesibilidad.php, no este CSS.
   -------------------------------------------------------------------------- */

.skip-link.screen-reader-text:focus {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 100000 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    background: #014b7a !important;
    color: #ffffff !important;          /* 9,18:1 sobre #014b7a */
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: underline !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}


/* --------------------------------------------------------------------------
   5) DESTINO DEL SKIP LINK  ·  A11Y-02 (parte CSS)
   --------------------------------------------------------------------------
   El header del sitio es fijo y mide ~104 px (así lo documenta frontend.css,
   módulo de páginas legales). Sin este margen, al saltar con el skip link el
   primer contenido queda tapado por el header.
   #content lo crea parche-accesibilidad.php.
   -------------------------------------------------------------------------- */

main#content {
    scroll-margin-top: 120px;
}

/* El <main> recibe foco por programa (tabindex="-1") al usar el skip link.
   No debe pintar un anillo alrededor de toda la página: no es un control. */
main#content:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   6) TEXTO GRIS CLARO DE LA PORTADA  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   El parrafo del bloque "Spain Retreat 2027" de la portada usa #7f7f7f sobre
   blanco: 4,0:1 (necesita 4,5:1). Se oscurece a #6b6b6b (5,3:1). Es el unico
   texto de la portada que no pasaba; el resto usa colores de marca.

   Si el cliente cambia ese color en Elementor, esta regla deja de ser
   necesaria: se borra y ya esta.
   -------------------------------------------------------------------------- */

.elementor-element-95bc140 > p {
    color: #6b6b6b !important;
}

/* --------------------------------------------------------------------------
   7) TITULOS DE PASO DEL FORMULARIO DE PARTICIPANTES  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   "Arrival (Madrid)", "Departure (Madrid)"... usan el teal #00C2CB al 18,4 px:
   2,19:1 sobre blanco (necesita 4,5:1 porque no llega a texto grande). Con
   #0F7C82 queda en 4,97:1 y el tono sigue siendo el de la marca.
   -------------------------------------------------------------------------- */

.step-2 .title-step h4,
.step-3 .title-step h4,
.step-4 .title-step h4,
.step-5 .title-step h4,
.title-step h4 {
    color: #0f7c82 !important;
}

/* --------------------------------------------------------------------------
   8) GRIS DE TEXTO DE ELEMENTOR  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   El tema tiene un color global propio, --e-global-color-759be76 = #7F7F7F,
   que usan decenas de parrafos. Sobre blanco da 4,0:1 y no llega al minimo.
   Se redefine a #6B6B6B (5,3:1): mismo gris, un punto mas oscuro, y todo el
   sitio cumple de una vez. Se hace aqui y no en Elementor para poder
   revertirlo borrando este fichero.
   -------------------------------------------------------------------------- */

html .elementor-kit-7 {
    --e-global-color-759be76: #6b6b6b;
}

/* Enlaces dentro del texto de los formularios (teal #00C2CB sobre blanco). */
.wpcf7-list-item-label a,
.wpcf7-acceptance a {
    color: #0f7c82 !important;
}

/* --------------------------------------------------------------------------
   9) TITULOS TEAL DE LOS PAQUETES  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   /packages/ usa #1DBBC4 (la global "secondary") en tres h2 de 52 px: sobre
   blanco da 2,34:1, y el minimo para texto grande es 3:1. Con #0F7C82 queda
   en 4,97:1, el mismo teal oscuro que ya usamos en el hover y en el carrito.
   -------------------------------------------------------------------------- */

.elementor-element-cda34e4 > h2,
.elementor-element-d3e6565 > h2,
.elementor-element-36db6d7 > h2 {
    color: #0f7c82 !important;
}

/* --------------------------------------------------------------------------
   10) BLOQUE DE RESERVA DEL RETIRO  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   El HTML del widget "Select Your Package" (pagina /interpreter-package/)
   lleva los colores escritos en style="", asi que no se pueden tocar desde
   el CSS del tema: hay que pisarlos. Se seleccionan por el propio valor
   incrustado para no afectar a nada mas de la pagina:

     #00C2CB sobre blanco  = 2,19:1  ->  #0F7C82 = 4,97:1
     #94A3B8 sobre blanco  = 2,56:1  ->  #64748B = 4,76:1
   -------------------------------------------------------------------------- */

#booking-agreement [style*="#00c2cb"],
#booking-agreement [style*="#00C2CB"] {
    color: #0f7c82 !important;
}

#booking-agreement [style*="#94a3b8"],
#booking-agreement [style*="#94A3B8"] {
    color: #64748b !important;
}

#booking-agreement a {
    color: #0f7c82 !important;
}

/* Cabeceras de precio del mismo bloque (widgets Heading de Elementor). */
.elementor-element-a39546f4 .elementor-heading-title,
.elementor-element-92f235c5 .elementor-heading-title {
    color: #0f7c82 !important;
}

.elementor-element-92f235c5 .elementor-heading-title {
    color: #64748b !important;
}

/* --------------------------------------------------------------------------
   11) TEALES Y GRISES SUELTOS  ·  A11Y-01  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   Tres paginas mas con el mismo teal #00C2CB / #1DBBC4 y el gris #94A3B8
   escritos a mano (style="" en el HTML del widget o en el CSS del shortcode):

     /training-package/     precio y linea "PER PERSON..."
     /priority-list-2027/   h4 de cabecera y los numeros 01-04
     /program-schedule/     fecha y "Reserve Your Place"

   Mismos valores corregidos que en el resto: #0F7C82 (4,97:1 sobre blanco,
   4,78:1 sobre #ECFEFF) y #64748B (4,76:1 sobre blanco).
   -------------------------------------------------------------------------- */

.elementor-element-4224e1d9 [style*="#00c2cb"],
.elementor-element-4224e1d9 [style*="#00C2CB"] {
    color: #0f7c82 !important;
}

.elementor-element-4224e1d9 [style*="#94a3b8"],
.elementor-element-4224e1d9 [style*="#94A3B8"] {
    color: #64748b !important;
}

.elementor-element-c78a045 .elementor-heading-title,
.elementor-element-d5a2427 .elementor-heading-title,
.elementor-element-14637b8 .elementor-heading-title {
    color: #0f7c82 !important;
}

.ice-feat-num {
    color: #0f7c82 !important;
}

/* --------------------------------------------------------------------------
   12) BOTONES "WATCH VIDEO TOUR" DE LAS EXCURSIONES  ·  WCAG 2.2 AA 1.4.3
   --------------------------------------------------------------------------
   Van sobre tarjetas azul marino (#144173) pero el texto esta en #003067:
   azul oscuro sobre azul oscuro, 1,25:1. En blanco queda en 8,6:1 y el
   borde se aclara para que se siga viendo la pildora.
   -------------------------------------------------------------------------- */

.it-card-pill-btn,
.it-card-pill-btn span,
.it-card-pill-btn svg {
    color: #ffffff !important;
}

.it-card-pill-btn {
    border-color: rgba(255, 255, 255, 0.65) !important;
}

/* --------------------------------------------------------------------------
   13) COLOR DE ENLACE POR DEFECTO DEL TEMA  ·  coherencia de marca
   --------------------------------------------------------------------------
   Hello Elementor trae en su reset.css:

       a { color: #cc3366; }
       button, [type=submit] { color: #cc3366; }

   (ese #cc3366 es el rosa que se veia en los enlaces sin color propio)

   Todo enlace que no tenga un color propio en Elementor (politica de
   privacidad del formulario, listas de iconos del pie, enlaces de imagen...)
   heredaba ese rosa, que no es de la marca.

   Esta regla solo alcanza a los enlaces SIN color propio: cualquier enlace
   configurado en Elementor tiene mas especificidad y se queda como esta.
   -------------------------------------------------------------------------- */

a {
    color: #014b7a;
}

a:hover,
a:focus {
    color: #0f7c82;
}

/* El pie va sobre azul marino (#01253F): ahi el enlace tiene que ser claro. */
.elementor-location-footer a,
.elementor-element-2b9c7ea a {
    color: #ffffff;
}

.elementor-location-footer a:hover,
.elementor-location-footer a:focus,
.elementor-element-2b9c7ea a:hover,
.elementor-element-2b9c7ea a:focus {
    color: #9be7ea;
}

/* --------------------------------------------------------------------------
   14) BOTON "CLEAR" DEL PANEL DE FIRMA
   --------------------------------------------------------------------------
   El boton solo define "color: inherit" y el borde por variable, asi que
   hereda el rosa #C36 del reset del tema. Se fija al azul de marca.
   -------------------------------------------------------------------------- */

.eweb-sig__clear {
    color: #014b7a !important;
    border-color: rgba(1, 75, 122, 0.45) !important;
}

.eweb-sig__clear:hover,
.eweb-sig__clear:focus {
    color: #0f7c82 !important;
    border-color: #0f7c82 !important;
    background-color: rgba(15, 124, 130, 0.08) !important;
}

/* Cualquier boton sin color propio deja de heredar el rosa del tema. */
button,
[type="button"],
[type="submit"] {
    color: inherit;
}