/* ==========================================================================
   04 · HERO
   Un solo plano: el vídeo ocupa la pantalla completa, sin cortes ni paneles
   encima. El texto se sostiene sobre un velo Ink que nace del borde
   izquierdo, que es el «plano de color» que exige el manual para poner
   texto sobre fotografía.
   ========================================================================== */

.hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: 560px;
  height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

/* --- Vídeo, entero, a sangre --------------------------------------------- */

.hero__medio {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink) url("/assets/hero-poster.jpg?v=2") center / cover no-repeat;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* mantiene al operario fuera del texto */
  display: block;
}

.hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(15, 40, 48, .90) 0%,
      rgba(15, 40, 48, .84) 30%,
      rgba(15, 40, 48, .52) 54%,
      rgba(15, 40, 48, .16) 78%,
      rgba(15, 40, 48, .08) 100%),
    linear-gradient(180deg,
      rgba(15, 40, 48, .28) 0%,
      transparent 26%,
      transparent 74%,
      rgba(15, 40, 48, .34) 100%);
}

/* --- Contenido ------------------------------------------------------------ */

.hero__contenido {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.6vh, 2rem);
  padding-block: clamp(2rem, 5vh, 4rem);
  color: var(--blanco);
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--celeste-claro);
}
.hero__kicker::before {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: var(--rule);
  background: var(--celeste-marca);
  flex: none;
}

.hero__titular {
  max-width: 15ch;
  font-size: clamp(2.75rem, 6.6vw, 6rem);
  line-height: var(--lh-display);
  font-weight: 900;
  letter-spacing: var(--tr-display);
  color: var(--blanco);
}
.hero__titular .linea { display: block; overflow: hidden; }
.hero__titular .linea > span { display: block; }
.hero__titular em { font-style: normal; color: var(--celeste-claro); }

.hero__bajada {
  color: rgba(255, 255, 255, .86);
  max-width: 32ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
}

/* --- Adaptaciones --------------------------------------------------------- */

@media (max-width: 1100px) {
  .hero__velo {
    background:
      linear-gradient(90deg,
        rgba(15, 40, 48, .92) 0%,
        rgba(15, 40, 48, .86) 46%,
        rgba(15, 40, 48, .56) 78%,
        rgba(15, 40, 48, .32) 100%),
      linear-gradient(180deg, rgba(15, 40, 48, .30) 0%, transparent 30%, rgba(15, 40, 48, .42) 100%);
  }
}

@media (max-width: 900px) {
  .hero { height: auto; min-height: min(80svh, 640px); align-items: end; }
  .hero__video { object-position: 58% center; }
  .hero__titular { max-width: 14ch; font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero__bajada { max-width: 30ch; }
  .hero__contenido { padding-block: clamp(3rem, 10vh, 5rem) 2.5rem; }
  .hero__velo {
    background: linear-gradient(180deg,
      rgba(15, 40, 48, .52) 0%,
      rgba(15, 40, 48, .38) 28%,
      rgba(15, 40, 48, .84) 66%,
      rgba(15, 40, 48, .93) 100%);
  }
  .hero__acciones .boton { flex: 1 1 auto; justify-content: center; }
}