/**
 * a11y.css — Correcciones de accesibilidad UNE-EN 301549:2022 / WCAG 2.1 AA
 * Sitio: overskink.com
 *
 * Fichero aparte a proposito: theme.css lo regenera wp-elementor-porter,
 * asi que estas correcciones viven fuera para sobrevivir a una regeneracion.
 * Se encola con dependencia de 'wp-porter-theme' (ver functions.php).
 */

:root {
  /* Verde de marca oscurecido para texto sobre fondo claro.
     Mismo tono (72deg) y saturacion que --lime, luminosidad 0.26.
     Contraste 5.68:1 sobre #FFFFFF y 5.21:1 sobre #F5F5F5.
     El --lime original da 2.12:1 sobre blanco: no vale para texto. */
  --lime-txt: #5c6e17;
}

/* ─────────────────────────────────────────────────────────────
   9.1.4.3 Contraste (minimo)
   ───────────────────────────────────────────────────────────── */

/* La seccion de cierre del home se quedo sin ninguna regla de fondo:
   renderizaba su contenido (disenado en blanco) sobre blanco, es decir
   ratio 1:1 — titular y parrafo literalmente invisibles.
   Se restaura el fondo oscuro que el diseno presupone. */
.elementor-element .final-cta {
  background: var(--black);
}

/* Asterisco de campo obligatorio en los formularios: iba en --lime
   sobre fondo blanco (2.12:1). Pasa a la variante accesible. */
.elementor-element .req {
  color: var(--lime-txt);
}

/* Numerales grandes de los bloques de proceso. Van siempre sobre
   seccion clara (#FFFFFF en el home, #FFFFFF/#F5F5F5 en "Como
   trabajamos"), donde --lime da 2.12:1 y 1.95:1 frente al 3:1 que
   exige el texto grande.
   No se tocan .v-label, .stat-num ni .timeline-num: esos van siempre
   sobre #0D0D0D, donde --lime rinde 9.15:1 y es correcto. */
.elementor-element .step-num,
.elementor-element .big-num {
  color: var(--lime-txt);
}

/* Cabeceras con fotografia de fondo (.hero y .sub-hero).
   El velo plano rgba(13,13,13,.62) no basta donde la foto tiene altas
   luces: sobre esos puntos el rotulo lima caia a 2.6-2.8:1 y el acento
   lima del titular a 2.86:1.
   En lugar de oscurecer la foto entera se anade un velo en degradado
   que refuerza solo la banda izquierda, que es donde se apoya el texto,
   y deja practicamente intacta la mitad derecha de la imagen.
   isolation:isolate hace que la seccion forme contexto de apilamiento
   propio; asi el velo con z-index:-1 queda sobre el fondo de la seccion
   y bajo su contenido, sin tener que reposicionar los hijos (el
   indicador "Scroll" va en position:absolute y no debe tocarse). */
.elementor-element .hero,
.elementor-element .sub-hero {
  position: relative;
  isolation: isolate;
}

.elementor-element .hero::before,
.elementor-element .sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(13, 13, 13, 0.88) 0%,
    rgba(13, 13, 13, 0.82) 45%,
    rgba(13, 13, 13, 0.48) 72%,
    rgba(13, 13, 13, 0.15) 100%
  );
}

/* ─────────────────────────────────────────────────────────────
   9.2.4.1 Evitar bloques
   ───────────────────────────────────────────────────────────── */

/* Destino del enlace de salto. Es un envoltorio semantico (landmark
   main) y no debe alterar la maquetacion existente. */
main#content {
  display: block;
}

/* Recibe el foco por programa al usar el enlace de salto, pero sin
   dibujar un anillo alrededor de toda la pagina. */
main#content:focus {
  outline: none;
}

/* El enlace de salto debe hacerse visible al recibir el foco.
   El tema padre ya lo saca del clip; aqui se le da contraste propio
   (blanco sobre #0D0D0D = 18.4:1) y se asegura que quede por encima
   de la cabecera fija. */
.skip-link.screen-reader-text:focus {
  background-color: var(--black);
  color: #fff;
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  z-index: 100001;
}

/* ─────────────────────────────────────────────────────────────
   9.2.4.7 Foco visible
   ───────────────────────────────────────────────────────────── */

/* El sitio no definia ningun estilo de foco y dependia del anillo por
   defecto del navegador, que se pierde sobre los fondos oscuros.
   Indicador de dos tonos: el trazo negro se ve sobre fondo claro y el
   halo lima sobre fondo oscuro, asi funciona en ambos contextos y
   cumple el 3:1 de 9.1.4.11 en los dos casos. */
.elementor-element a:focus-visible,
.elementor-element button:focus-visible,
.elementor-element input:focus-visible,
.elementor-element select:focus-visible,
.elementor-element textarea:focus-visible,
.elementor-element summary:focus-visible,
.elementor-element [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--lime);
}

/* El halo no debe quedar recortado por contenedores con overflow. */
.elementor-element .nav-dropdown__link:focus-visible,
.elementor-element .f-link:focus-visible {
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────────────────────────────────
   9.1.4.12 Espaciado del texto
   ───────────────────────────────────────────────────────────── */

/* Con los valores del criterio (interlineado 1.5, letra 0.12em,
   palabra 0.16em) el pie de pagina desbordaba horizontalmente en
   360px: los rotulos .eyebrow llevan letter-spacing 0.28-0.32em y
   los items de rejilla no podian encoger por debajo de su contenido. */
.elementor-element .eyebrow {
  overflow-wrap: break-word;
}

.elementor-element footer [class*="grid-cols"] > * {
  min-width: 0;
}