/* Ajustes de móvil. Capa aparte: no altera style.css de la entrega. */

@media (max-width: 760px) {
  /* La base del cerebro mide 116% y sale del escenario a propósito, con
     una máscara que desvanece sus bordes. Ahí no hay nada que encoger:
     lo que faltaba era recortar en el contenedor, que no tenía overflow
     y dejaba 28px de scroll horizontal en la página. */
  .brain-experience { overflow-x: clip; }

  /* Zonas táctiles: la marca medía 18px de alto y «Volver al inicio», 15. */
  .brand, .back-top, .acv-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .rotation-rail input { height: 44px; }

  /* Legibilidad de rótulos. */
  .header-note, .static-note, .section-note { font-size: 13px; }
}

/* Las burbujas del cerebro salían cortadas por los bordes de la pantalla.

   El círculo mide clamp(66px, 5.5vw, 112px): en un móvil el 5.5vw da unos
   20px, así que se queda en el mínimo de 66. Dentro va «Comprender», que a
   11px ocupa 60px, y deja 2px de holgura por lado. En una caja cuadrada
   cabría, pero el borde es un círculo: a la altura del texto la cuerda es
   más estrecha que el diámetro, así que el texto rompe la curva. Y como la
   burbuja está pegada al margen (left:2% y right:0), se ve partida.

   Se agranda el círculo y se separa de los bordes. Medido: la holgura pasa
   de 2px a 10px, y ningún círculo sale ya de la pantalla. */
@media (max-width: 900px) {
  .orbit-label { width: 86px; }
  .orbit-label small { font-size: 12px; }
  .orbit-two { left: 4%; }
  .orbit-three { right: 2%; }

  /* Rótulos por debajo del mínimo cómodo de lectura */
  .eyebrow,
  .recovery-story-index { font-size: 12px; }
}