/* Hero: texto centrado y la escena de los caballitos a todo el ancho.
   Depende de tokens.css. La imagen y el video miden 5:2 (1520×608); en celular
   se recortan a 2:1 para ganar altura sin perder los cuatro vasos. */

.hero {
  background: var(--fondo);
}

.hero__texto {
  display: grid;
  justify-items: center;
  gap: var(--espacio-4);
  padding-block: var(--espacio-7) var(--espacio-6);
  text-align: center;
}

.hero__titulo {
  max-width: 14ch;
  color: var(--texto-marca);
  font-family: var(--fuente-display);
  font-size: var(--texto-hero);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-ajustada);
}

.hero__subtitulo {
  color: var(--texto-marca);
  font-family: var(--fuente-display);
  font-size: var(--texto-subtitulo);
  font-weight: var(--peso-normal);
  letter-spacing: var(--espaciado-subtitulo);
  /* Compensa el espacio que deja el espaciado tras la última letra. */
  margin-right: calc(var(--espaciado-subtitulo) * -1);
}

.hero__descripcion {
  max-width: 34ch;
  font-size: var(--texto-grande);
  text-wrap: balance;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-3);
  margin-top: var(--espacio-2);
}

.hero__medio {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.hero__imagen,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En el recorte de celular, mantiene a la vista los cuatro vasos. */
  object-position: 85% 50%;
}

.hero__video {
  opacity: 0;
  transition: opacity var(--transicion);
}

.hero__video[data-activo] {
  opacity: 1;
}

/* Botón para pausar o reanudar el video */
.hero__control {
  position: absolute;
  right: var(--espacio-4);
  bottom: var(--espacio-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  padding: 0;
  border: var(--grosor-borde) solid var(--borde);
  border-radius: var(--radio-pildora);
  background: var(--color-blanco);
  cursor: pointer;
}

.hero__control[hidden] {
  display: none;
}

/* Icono de pausa: dos barras. Con data-pausado se vuelve triángulo de reproducir. */
.hero__control-icono {
  width: 0.75rem;
  height: 0.875rem;
  border-inline: 0.25rem solid var(--accion-activa);
}

.hero__control[data-pausado] .hero__control-icono {
  width: 0;
  height: 0;
  margin-left: 0.1875rem;
  border-block: 0.4375rem solid transparent;
  border-left: 0.75rem solid var(--accion-activa);
  border-right: 0;
}

@media (min-width: 48rem) {
  .hero__texto {
    padding-block: var(--espacio-8) var(--espacio-7);
  }

  .hero__medio {
    aspect-ratio: 5 / 2;
  }

  .hero__imagen,
  .hero__video {
    object-position: 50% 50%;
  }
}