/* ============================================================================
   COMPONENTES › FLECHA DE SCROLL
   ----------------------------------------------------------------------------
   Invita a bajar. En el HTML es un <a> real que apunta a #sobre-nosotros:
   además de verse, funciona con click y con teclado.
   La animación "rebote" se define en base/animaciones.css.
   ============================================================================ */

.flecha-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);                    /* centrado horizontal exacto */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-texto-suave);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color var(--transicion);
}

.flecha-scroll:hover { color: var(--color-acento); }

/* El rebote se aplica al ÍCONO, no al contenedor.
   ¿Por qué? Porque el contenedor ya usa transform para centrarse
   (translateX(-50%)) y una animación con transform lo pisaría, mandando la
   flecha fuera del centro. */
.flecha-scroll svg {
  animation: rebote 2s ease-in-out infinite;
}