/* ==========================================================================
   YPF RUTA — Rediseño 2026 · Hero de la home

   Figma:
     mobile  267:27688  (375)
     tablet  274:35710  (768)
     desktop 267:27265  (1440)

   Mobile first. Los valores salen medidos del Figma:
     · desktop  padding 147 / 72 / 68 · título 68/72 · video 1296x727 · play 140
     · tablet   padding 134 / 24 / 64 · título 48/54 · video 720x404  · play 110
     · mobile   padding 114 / 24 / 48 · título 48/54 · video 315x177  · play 80

   El disparador de video y el modal viven en video-modal.css porque se
   reutilizan en otras secciones.
   ========================================================================== */

.nd-hero {
  background-color: var(--nd-black);
  overflow: hidden;
  padding: 114px var(--nd-gutter) 48px;
  position: relative;

  /* Full bleed: el fondo ocupa el 100% del ancho de la ventana aunque
     .main-layout esté limitado a 1440px. El contenido sigue centrado y
     tope 1296px gracias a .nd-hero__inner. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* El fondo va en un pseudo-elemento y no en la sección para poder animarlo
   sin arrastrar el contenido. Ver css/newdesign/reveal.css.
   Mobile por defecto (SVG 375x721); el de desktop entra en el media query de
   768 para no bajar los dos archivos en celular. */
.nd-hero::before {
  background-image: url("../../assets/newdesign/home/bgk-hero-mobile.svg");
  background-position: top center;
  background-repeat: no-repeat;
  /* 100% 100% y no cover: los SVG llevan preserveAspectRatio="none", así que
     el dibujo se mapea exacto sobre la caja de la sección a cualquier ancho.
     Con cover, arriba de 1440 el SVG se agrandaba y recortaba el 25% de abajo,
     y los trazos dejaban de encontrarse entre sección y sección: se veía un
     corte horizontal duro en cada juntura. */
  background-size: 100% 100%;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

/* Fundido a negro sobre la mitad inferior.
   En el Figma es una capa aparte (267:27278). Acá va por CSS para que el
   degradado siga cayendo en el mismo lugar aunque el SVG se recorte al
   adaptarse a viewports más angostos o más altos que 1440x1222. */
.nd-hero::after {
  background: linear-gradient(to top, var(--nd-black) 0%, rgba(0, 0, 0, 0) 100%);
  bottom: 0;
  content: "";
  height: 55%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.nd-hero__inner {
  margin: 0 auto;
  max-width: var(--nd-max-width);
  position: relative;
  width: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Textos
   -------------------------------------------------------------------------- */

.nd-hero__eyebrow {
  color: var(--nd-white);
  font-family: var(--nd-font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 20px;
  margin: 0;
  text-transform: uppercase;
}

.nd-hero__title {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 48px;
  font-weight: var(--nd-w-bold);
  letter-spacing: 0.96px;
  line-height: 54px;
  margin: 32px 0 0;
}

.nd-hero__lead {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 0.56px;
  line-height: 22px;
  margin: 32px 0 0;
}

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.nd-hero__media {
  margin-top: 60px;
}

/* --------------------------------------------------------------------------
   Tablet — Figma 274:35710
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .nd-hero {
    padding-bottom: 64px;
    padding-top: 134px;
  }

  .nd-hero::before {
    background-image: url("../../assets/newdesign/home/bgk-hero.svg");
  }

  .nd-hero__title {
    margin-top: 29px;
    max-width: 581px;
  }

  .nd-hero__lead {
    margin-top: 24px;
  }

  .nd-hero__media {
    margin-top: 40px;
  }

  .nd-video__play {
    height: 110px;
    width: 110px;
  }
}

/* --------------------------------------------------------------------------
   Desktop — Figma 267:27265
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .nd-hero {
    padding-bottom: 68px;
    padding-top: 147px;
  }

  .nd-hero__title {
    font-size: 68px;
    letter-spacing: 1px;
    line-height: 72px;
    max-width: 856px;
  }

  .nd-hero__media {
    margin-top: 41px;
  }

  .nd-video__play {
    height: 140px;
    width: 140px;
  }
}