/* ===========================================================
   ABOUT-SCRUB — timón que entra/gira/sale, sección fijada
   ===========================================================
   Mismo criterio que css/hero-scrub.css: componente aislado que depende
   solo de las variables ya definidas en :root por css/style.css. La
   posición/rotación en cada instante las controla js/about-scrub.js
   escribiendo directamente el transform del elemento.

   El pin y la secuencia (entra → gira → sale) se aplican en TODOS los
   anchos, pero con un eje de movimiento distinto según el dispositivo:
   - Escritorio (≥1025px, ver AXIS_BREAKPOINT en el JS): el timón entra
     desde la derecha y sale por la izquierda (translateX).
   - Móvil (<1025px): el timón entra desde abajo y sale por arriba
     (translateY) — mismo comportamiento, eje vertical en vez de
     horizontal, porque en móvil "izquierda/derecha" no deja tanto
     margen como "abajo/arriba". */

.about-scrub {
  position: relative;
  background: var(--color-bg);
  /* Alto del "carril" de scroll durante el cual la sección queda fijada.
     Lo fija JS vía --about-scrub-vh (ver CONFIG.SCROLL_HEIGHT_VH); 220vh
     de respaldo si el JS no llega a ejecutarse. */
  height: var(--about-scrub-vh, 220vh);
}

/* Se ancla justo debajo del header, igual que .hero-scrub__sticky, para
   que quede fijada mientras dura el efecto y el texto no se mueva
   ("la sección se muestra estática") hasta que el timón termina de
   salir. */
.about-scrub__sticky {
  position: sticky;
  top: var(--header-h, 0px);
  height: calc(100svh - var(--header-h, 0px));
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  /* flex-start (no center) a propósito: con el texto centrado
     verticalmente en toda la altura del viewport, el usuario tenía que
     hacer scroll por un tramo largo de fondo vacío (antes de que el
     "sticky" se fije del todo) antes de que apareciera cualquier texto,
     percibido como un hueco excesivo entre el hero y "Quiénes somos".
     Con el texto arriba, aparece casi en cuanto la sección entra. */
  align-items: flex-start;
  padding-top: var(--space-3);
}

.about__text { position: relative; z-index: 2; }

.about__wheel {
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  /* Apagado para que quede detrás del texto sin robarle contraste: se
     reduce saturación/brillo (en vez de gris puro, para conservar algo
     del tono dorado de la marca) y una opacidad moderada. */
  filter: saturate(0.55) brightness(0.42) contrast(0.95);
  opacity: 0.55;
  will-change: transform;
}

@media (min-width: 1025px) {
  .about__wheel {
    /* Se ancla por el borde superior (top fijo, sin translateY) en vez
       de centrarlo verticalmente: con un timón tan grande (~600px) y el
       texto arriba, centrarlo respecto al bloque de texto lo hacía
       arrancar por encima del propio sticky y el overflow:hidden lo
       recortaba por arriba. Anclado por el borde de arriba, sea cual
       sea su tamaño final (min(37.8vw,558px), varía con el viewport),
       nunca se recorta y siempre cubre hacia abajo desde justo debajo
       del header hasta más allá del último párrafo. */
    top: 20px;
    left: 50%;
    /* -10% sobre min(42vw, 620px): 37.8vw / 558px. */
    width: min(37.8vw, 558px);
    /* Posición de reposo (fuera de pantalla a la derecha) hasta que el
       JS calcule el progreso real de scroll; evita un salto visible si
       el script tarda un frame en arrancar. */
    transform: translateX(-50%) translateX(60vw);
  }
}

@media (max-width: 1024px) {
  .about__wheel {
    /* En móvil el movimiento es vertical, así que aquí sí se centra
       (top:50% + translateY(-50%) en el JS) sin riesgo del recorte que
       había en escritorio: el timón (min(75vw,380px) de diámetro) cabe
       de sobra dentro del alto del sticky sin tocar los bordes. */
    top: 50%;
    left: 50%;
    width: min(75vw, 380px);
    /* Posición de reposo (fuera de pantalla por abajo) hasta que el JS
       calcule el progreso real de scroll. */
    transform: translate(-50%, -50%) translateY(60vh);
  }

  /* El sticky ahora tiene una altura fija (calc(100svh - header)) y
     overflow:hidden en todos los anchos (antes esto solo pasaba en
     escritorio). En móvil, con el texto completo (título + 5 párrafos +
     botón) a tamaño normal, el contenido no cabía en una sola pantalla y
     el botón quedaba recortado/invisible por debajo del borde. Se
     comprime el espaciado vertical (sin tocar el texto en sí) para que
     todo quepa dentro del alto del sticky. */
  .about-scrub__sticky { padding-top: 0.4rem; }
  .about-scrub .eyebrow { margin-bottom: 0.5rem; }
  .about-scrub .about__text h2 { margin-bottom: var(--space-3); }
  .about-scrub .about__copy { gap: 0.75rem; }
  .about-scrub .about__copy p { font-size: 0.92rem; line-height: 1.45; }
  .about-scrub .about__actions { margin-top: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .about-scrub { height: auto; }
  .about-scrub__sticky { position: relative; top: auto; height: auto; overflow: visible; padding-block: var(--space-8) var(--space-7); }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  /* Sin animación: se queda fijo, centrado y visible desde el
     principio, en vez de deslizarse/girar/salir con el scroll. */
  .about__wheel { transform: translateX(-50%) !important; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .about__wheel { transform: translate(-50%, -50%) !important; }
}