/* ══════════════════════════════════════════════════════════════════
   Auditoría de accesibilidad, visibilidad y uso · 8/10/2026
   Va sin @layer a propósito: así le gana a las utilidades de Tailwind,
   que viven en capas. Cada regla dice qué arregla.
══════════════════════════════════════════════════════════════════ */

/* Foco con teclado (WCAG 2.4.7). Los enlaces que ya tienen su anillo
   (clases focus-visible:ring...) quedan como estaban; el resto, que
   tenía outline-none sin reemplazo, recupera la marca. */
a:focus-visible:not([class*="focus-visible:"]),
button:focus-visible:not([class*="focus-visible:"]),
[tabindex]:not([tabindex="-1"]):focus-visible:not([class*="focus-visible:"]),
summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Campos de los formularios: antes solo cambiaba el color del borde. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.contact-form__input:focus-visible {
  outline: 2px solid var(--theme-cta, #0E2A5C);
  outline-offset: 2px;
}

/* Letra mínima (Lighthouse: "texto legible"). El pie y los avisos
   legales estaban en 11 px. */
.text-tiny { font-size: .8125rem; line-height: 1.5; }

/* "Caso siguiente." pasó de <p> a <h2> para ordenar los encabezados:
   que se vea igual que antes. */
.h8-page h2.h8-eyebrow { letter-spacing: normal; text-wrap: wrap; }

/* Botón para pausar el video de portada (WCAG 2.2.2). */
.hero-video-control {
  position: absolute;
  right: 0; /* la sección ya trae el margen de página: así queda alineado con "Hablemos" */
  bottom: 22px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 40px;
  background: rgba(8, 25, 54, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease;
}
.hero-video-control:hover { background: rgba(8, 25, 54, .85); }
.hero-video-control:active { transform: scale(.97); }
.hero-video-control:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 767px) {
  .hero-video-control { bottom: 12px; padding: 8px 14px; }
}

/* Parallax de la foto de portada en rubros y ciudades: la imagen va un
   poco más grande para que el corrimiento no deje bordes. */
.landing-hero__medio { overflow: hidden; }
.landing-hero__medio img[data-parallax] { scale: 1.16; will-change: auto; }

/* "Cómo trabajamos": el paso que se está leyendo queda a pleno y los
   demás apagados, ligado al scroll (lo prende motion.js). El apagado se
   queda en .58 para que el texto siga pasando el contraste 4,5:1. */
.pasos-scroll > li {
  opacity: .58;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1);
}
.pasos-scroll > li.is-activo { opacity: 1; }

/* La fila del equipo en el celular se puede recorrer con teclado. */
.radial-cards-marquee__collection:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pasos-scroll > li { opacity: 1; transition: none; }
  .landing-hero__medio img[data-parallax] { scale: 1; }
}

/* Portada de rubros y ciudades en el celular: la bajada iba en 32 px,
   casi del tamaño del título (41 px), y ocupaba seis renglones. */
@media (max-width: 767px) {
  .subpage .landing-hero__bajada.t-lead { font-size: 1.3125rem; line-height: 1.3; }
}