/* Bit Bruto — contenedor de scroll paginado. */

.bb-pager {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge antiguo */
}

.bb-pager::-webkit-scrollbar { width: 0; height: 0; }

/* Con sesión iniciada, WordPress empuja la página 32px hacia abajo (46 en
   móvil) para hacer sitio a su barra. Sin descontarlo, el pie de cada sección
   cae fuera de la pantalla y, como el documento no scrollea, no hay forma de
   llegar a él. Lo sufre el equipo, que mira la web logueado, y no sus
   visitantes. */
body.admin-bar .bb-pager {
  height: calc(100vh - 32px);
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

/* Modo suave: se activa desde JS cuando alguna sección no cabe en la ventana. */
.bb-pager.bb-suelto { scroll-snap-type: y proximity; }

.bb-seccion {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

/* Una sección más alta que la ventana no debe recortar su contenido. */
.bb-pager.bb-suelto .bb-seccion { overflow: visible; }

/* Colores de fondo de cada sección. */
.bb-home        { background: var(--bb-negro); }
.bb-lema        { background: var(--bb-negro); }
.bb-statement   { background: var(--bb-naranja); }
.bb-disciplinas { background: var(--bb-negro); }
.bb-nosotros    { background: var(--bb-gris); }
.bb-contacto    { background: var(--bb-azul); }

@media (prefers-reduced-motion: reduce) {
  /* Se nombra también .bb-suelto: esa clase lleva dos selectores y ganaba por
     especificidad, así que con el enganche aflojado la preferencia del
     visitante se quedaba sin efecto. */
  .bb-pager,
  .bb-pager.bb-suelto {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

/* ---- Cabecera ---- */

.bb-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bb-alto-header);
  pointer-events: none;
}

/* El logo es un SVG en línea que hereda el color de aquí, así que se pinta
   con los negros y blancos exactos de la paleta. Una imagen externa no puede
   heredarlo: habría que invertirla con un filtro y el tono dependería del
   color con el que venga el archivo. */
.bb-header__enlace {
  pointer-events: auto;
  display: block;
  line-height: 0;
  color: var(--bb-blanco);
  transition: color 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bb-header--oscuro .bb-header__enlace { color: var(--bb-negro); }

/* La pantalla de disciplinas no lleva logo en el diseño: son cinco bandas de
   borde a borde y el logo se comería el primer título. */
.bb-header--oculto {
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.bb-header__logo {
  width: var(--bb-logo-ancho);
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .bb-header__enlace { transition: none; }
}

/* ---- Indicador de scroll ---- */

.bb-indicador {
  position: fixed;
  bottom: clamp(16px, 3vh, 34px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--bb-blanco);
  cursor: pointer;
  opacity: 1;
  /* Retardo a 0 por defecto: al reaparecer (se quita --oculto) la
     visibilidad vuelve a "visible" al instante, sin esperar al fundido. */
  transition: opacity 500ms ease, transform 300ms ease, visibility 0s linear 0s;
}

.bb-indicador--oculto {
  opacity: 0;
  /* Aquí sí hay retardo: la visibilidad no pasa a "hidden" hasta que el
     fundido de opacidad termina (500ms), para no cortar la animación de
     salida con un salto brusco. Al quitar esta clase manda de nuevo la
     transición de arriba, sin retardo. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, transform 300ms ease, visibility 0s linear 500ms;
}

.bb-indicador__linea {
  display: block;
  width: 1px;
  height: clamp(20px, 4vh, 34px);
  background: currentColor;
  transform-origin: top;
  animation: bb-latido 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.bb-indicador__flecha {
  width: 18px;
  height: auto;
}

.bb-indicador--arriba { transform: translateX(-50%) rotate(180deg); }

@keyframes bb-latido {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-indicador__linea { animation: none; transform: none; opacity: 1; }
  .bb-indicador { transition: none; }
}

/* ---- Foco de teclado ---- */

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.bb-header__enlace:focus-visible { outline-color: var(--bb-naranja); }