/* Capa propia sobre la entrega de la Línea Oftálmica. No modifica style.css
   ni las hojas de cada guía: se puede retirar quitando este enlace.

   Varias zonas táctiles quedaban por debajo del mínimo cómodo de 44px, y las
   más pequeñas eran justo las de navegación: «Todas las guías» y «Volver a
   las guías» medían 14 y 20px de alto. Se amplían con un pseudo-elemento
   invisible en lugar de agrandarlas, para que la composición no cambie ni un
   píxel: el texto conserva su tamaño y su sitio.

   Ojo: .video-skip ya es position:absolute y se coloca sobre el video. No
   redeclarar su posición o se descuadra; al estar posicionada ya sirve de
   contenedor para su propio ::after. */
@media (max-width: 900px) {
  .brand,
  .audience,
  .cover-back,
  .back-link,
  .cover-bottom > a { position: relative; }

  .brand::after,
  .audience::after,
  .cover-back::after,
  .back-link::after,
  .cover-bottom > a::after,
  .video-skip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Esta es un poco más estrecha que el mínimo: se ensancha a los lados */
  .video-skip::after { left: -10px; right: -10px; }
}

/* Portada de glaucoma completamente en negro con «menos movimiento».

   No basta con la variable --black: dentro de su media query de movimiento
   reducido hay una regla explícita `.video-black{opacity:1}` que la pisa, y
   deja la portada en negro puro sobre un fotograma que sí es luminoso.

   El resultado es una pantalla negra entera al abrir la guía, que se lee
   como un error. Se baja el velo para que el ojo se vea por debajo de la
   frase. No se reactiva ningún movimiento: el video sigue detenido en su
   primer fotograma, que es justo lo que pide el ajuste. */
@media (prefers-reduced-motion: reduce) {
  .video-black { opacity: .62; }
}

/* «Línea oftálmica» estaba a 11px. Se sube al mínimo cómodo. */
@media (max-width: 900px) {
  /* `.intro .eyebrow` (11px) gana por especificidad al `.eyebrow` suelto */
  .intro .eyebrow { font-size: 12px; }
}