/* Capa propia sobre la entrega. No modifica style.css: se retira quitando
   este enlace del index.html.

   Zonas táctiles por debajo del mínimo cómodo de 44px. Se amplían con un
   pseudo-elemento invisible en vez de agrandarlas, para que la composición
   no cambie ni un píxel.

   Dos cuidados:
   - .scroll-cue ya es position:absolute y se coloca sobre la portada. No
     redeclarar su posición o se descuadra; ya sirve de contenedor.
   - En los botones [data-topic] el :before está ocupado por el punto que
     marca el activo. Hay que usar ::after. */
@media (max-width: 900px) {
  .brand,
  nav[aria-label="Información del sitio"] > * { position: relative; }

  .brand::after,
  .scroll-cue::after,
  [data-topic]::after,
  nav[aria-label="Información del sitio"] > *::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Más estrechos que el mínimo: se ensanchan a los lados */
  nav[aria-label="Información del sitio"] > *::after { left: -8px; right: -8px; }
}

/* El titular de portada aparecía cortado: se leía «cerebrovascula» porque
   un <svg> con z-index:1 se pinta encima del h1, que queda en z-index:0, y
   tapaba la última letra. Comparado el render antes y después: la cara se
   sigue viendo igual detrás, solo deja de comerse la «r».

   Va sin media query: pasa en escritorio, no en móvil. */
.hero .hero-copy { position: relative; z-index: 2; }