/* Extraído literal de la web de CEI (css/cei-base.css, líneas 304-463):
   solo el modo accesibilidad y su botón. Las líneas 1-302 (las clases
   Global-*) están en css/cei-base.css, que se carga desde el 25/09/2026. */

/* ==========================================================================
 * MODO ACCESIBILIDAD: LA WEB SIN VIDRIO (Eduardo, 16/09/2026)
 *
 * Lo enciende el botón de la barra y se recuerda en el navegador de quien lo
 * activa. Apaga los desenfoques y deja en color plano las superficies que hoy
 * son translúcidas. No toca nada más: ni tipografías, ni colores de marca, ni
 * tamaños.
 *
 * POR QUÉ IMPORTA: sobre un fondo desenfocado el texto cambia de contraste
 * según lo que pase por detrás, así que no hay forma de garantizar un ratio; y
 * el desenfoque en movimiento marea a quien tiene sensibilidad vestibular.
 *
 * DOS PALANCAS, Y LA PRIMERA HACE CASI TODO:
 *
 *   1. Los tokens. El vidrio de la casa sale de `--Global-Velo-Blanco` y
 *      `--Global-Vidrio-Blur`; redefinidos aquí, cambian de golpe la barra, sus
 *      desplegables, el buscador y los paneles flotantes sin tocar una sola
 *      regla de las suyas.
 *   2. Una red de seguridad con `backdrop-filter: none` sobre todo, para lo que
 *      no pase por los tokens (el filtro «liquid glass» de Blink lleva su
 *      `url(#CeiLiquidGlass)` escrito al lado del token).
 *
 * LO QUE NO SE TOCA, Y A PROPÓSITO: los velos oscuros que hay ENCIMA de las
 * fotos —el de las tarjetas de área al pasar por encima y el del pie de las
 * piezas del portfolio—. Esos no son decoración: son lo que hace legible el
 * texto blanco sobre una imagen que no controlamos. Quitarlos en un modo de
 * accesibilidad sería justo lo contrario de lo que se busca.
 * ========================================================================== */

:root[data-accesible="plano"] {
  --Global-Velo-Blanco: #ffffff;
  --Global-Velo-Blanco-60: #ffffff;
  --Global-Vidrio-Blur: none;
}

/*
 * El `!important` está justificado aquí y en pocos sitios más: es una
 * preferencia explícita del visitante y tiene que ganarle a cualquier regla del
 * tema, del constructor o de un plugin, escrita hoy o dentro de un año.
 */
:root[data-accesible="plano"] *,
:root[data-accesible="plano"] *::before,
:root[data-accesible="plano"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* El velo del buscador lleva su alfa escrita a mano, no por token. */
:root[data-accesible="plano"] .Buscador-velo {
  background-color: #ffffff !important;
}

/*
 * SIN MOVIMIENTO QUE EMPIECE SOLO (Eduardo, 16/09/2026)
 *
 * Fuera todas las animaciones: las de scroll —las piezas que entran al
 * aparecer, la barra de matrícula de la ficha, el mosaico de la home que se
 * ensancha— y las que se repiten sin parar, como la marquesina de empresas.
 * Es la otra mitad del mismo encargo que el vidrio: quien pide plano no quiere
 * cosas moviéndose por su cuenta mientras lee (y es lo que pide la WCAG 2.2.2
 * para el contenido que arranca solo y dura más de cinco segundos).
 *
 * `animation: none` deja cada elemento en SU estado, no en el primer fotograma:
 * todas nuestras animaciones esconden desde el `from` del @keyframes y ninguna
 * declara el estado oculto en la regla base, así que al quitarlas todo queda
 * visible y quieto. Es la misma degradación que ya se ve hoy en Firefox y
 * Safari, donde `animation-timeline` no existe.
 *
 * Las transiciones se quedan: esas las dispara el visitante al pasar o pulsar,
 * no van solas. Y el `prefers-reduced-motion` del sistema sigue por su cuenta,
 * que es quien apaga estas mismas animaciones sin tocar el vidrio.
 */
:root[data-accesible="plano"] *,
:root[data-accesible="plano"] *::before,
:root[data-accesible="plano"] *::after {
  animation: none !important;
}

/*
 * Los vídeos decorativos se paran desde JavaScript (js/cei-accesible.js): el
 * CSS no puede pausar un <video>. Aquí solo se deja dicho que, parados, se ven
 * por su póster, que es lo que ya traen casi todos.
 */
:root[data-accesible="plano"] video {
  --cei-video-parado: 1;
}

/* --------------------------------------------------------------------------
 * El botón: oculto, pero el primero al tabular (Eduardo, 16/09/2026)
 *
 * No se ve. Aparece solo cuando el foco llega a él, que es lo primero que pasa
 * al pulsar el tabulador en cualquier página: va el primero del marcado y el
 * <header> abre el <body>, así que no hay nada antes.
 *
 * Es el patrón del enlace de «saltar al contenido» de toda la vida, y por el
 * mismo motivo: quien necesita esto navega con teclado y lo encuentra sin
 * buscarlo; a quien no, no le ocupa un hueco en la barra.
 *
 * SE OCULTA CON `opacity`, NO CON `display` NI `visibility`: esos dos lo
 * sacarían del orden de tabulación y no habría forma de llegar. Y
 * `pointer-events: none` para que, invisible, no se pueda pulsar por accidente
 * el trozo de cabecera que ocupa.
 *
 * `:focus` ADEMÁS de `:focus-visible`: el foco por teclado siempre es
 * «visible», pero un navegador que no entienda el segundo dejaría el botón
 * escondido con el foco dentro, que es lo peor que puede pasar aquí.
 *
 * Los dos `translateY` no se estorban: el primero lo centra en la barra —es un
 * absoluto con `top: 50%`— y el segundo es el que lo sube a esconderse. Al
 * enfocarlo se queda solo el primero.
 * -------------------------------------------------------------------------- */

.MenuNavegacion-accesible {
  position: absolute;
  top: 50%;
  left: var(--MenuNavegacion-paddingX, 20px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Color-White);
  color: var(--Global-Color-Black);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateY(-150%);
  transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.2s ease, color 0.2s ease;
}

.MenuNavegacion-accesible:focus,
.MenuNavegacion-accesible:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.MenuNavegacion-accesible:hover {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

/* Encendido: relleno fijo, para que se vea sin depender del color. */
.MenuNavegacion-accesible[aria-pressed="true"] {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

.MenuNavegacion-accesibleIcono svg {
  display: block;
  width: 18px;
  height: 18px;
}