/* =====================================================================
   03 · HERO / PORTADA (id="inicio")
   Video de fondo con una capa oscura encima y el título principal.
   Para cambiar el video: reemplaza img/hero-video.mp4
   (img/hero-poster.jpg se muestra mientras carga el video).
   El movimiento con el scroll está en js/parallax.js
   ===================================================================== */

.hero {
  position: relative;
  min-height: min(calc(100vh - 42px), 1000px);   /* alto de la pantalla menos la huincha de arriba */
  padding-top: calc(var(--alto-header) + 32px);   /* el texto nunca queda debajo del menú */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Video a pantalla completa */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;   /* lo mueve js/parallax.js al hacer scroll */
}

/* Capa oscura para que se lea el texto */
.hero__capa { position: absolute; inset: 0; background: rgba(8, 6, 5, .75); }   /* capa oscura al 75% */

.hero__contenido {
  position: relative;
  padding-bottom: clamp(90px, 16vh, 180px);   /* distancia del texto al borde de abajo: súbelo o bájalo aquí */
  display: flex;
  flex-direction: column;
  gap: 36px;
  animation: subir 1.2s ease backwards;   /* "backwards" deja que js/parallax.js lo mueva después */
}

.hero__saludo { font-size: 20px; letter-spacing: 6px; }

.hero__titulo {
  font-size: clamp(52px, 8.4vw, 120px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 1150px;
}

.hero__botones { display: flex; gap: 16px; flex-wrap: wrap; }


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .hero { min-height: 700px; }
  .hero__contenido { padding-bottom: 80px; gap: 28px; }
  .hero__saludo { font-size: 14px; }
}

@media (max-width: 700px) {
  .hero { min-height: 620px; }
  .hero__contenido { padding-bottom: 56px; gap: 22px; }
  .hero__saludo { font-size: 12px; letter-spacing: 5px; }
  .hero__botones .boton { flex: 1; padding: 0 16px; }
}