/* ==========================================================================
   YPF RUTA — Rediseño 2026 · Hero secundario

   El hero de las páginas internas. En el Figma el componente se llama
   "hero / secondary", así que está escrito para reusarse tal cual en
   Financiamiento y Esquemas de contratación: sólo cambian los textos y el
   fondo, que se pasa por variable.

   Uso:

     <section class="nd-hero2 nd-hero2--quees">
       <div class="nd-hero2__inner">
         <h1 class="nd-hero2__title">...</h1>
         <p class="nd-hero2__lead">...</p>
       </div>
     </section>

   Para una página nueva se agrega abajo un modificador con sus tres fondos.

   Los fondos van en este archivo y NO en una variable declarada inline en el
   HTML. Motivo: una url() dentro de una custom property se resuelve relativa
   a la hoja donde se USA la variable, no donde se declara. Puesta inline, la
   ruta terminaba resolviéndose desde css/newdesign/ y el fondo no cargaba.

   Primera implementación: Qué es YPF RUTA
     mobile  267:28062  (375x591)
     tablet  274:44207  (768x658)
     desktop 267:26992  (1440x658)

   Ojo con la alineación, que cambia: en mobile el texto va a la izquierda y
   de tablet para arriba va centrado.
   ========================================================================== */

.nd-hero2 {
  align-items: center;
  background-color: var(--nd-black);
  display: flex;
  min-height: 591px;
  overflow: hidden;
  padding: var(--nd-nav-h) var(--nd-gutter) 0;
  position: relative;

  /* Full bleed, igual que las secciones del home */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* El fondo va en un pseudo-elemento para poder animarlo sin arrastrar el
   texto. Ver css/newdesign/reveal.css. */
.nd-hero2::before {
  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;
}

.nd-hero2__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0 auto;
  max-width: var(--nd-max-width);
  position: relative;
  width: 100%;
  z-index: 1;
}

.nd-hero2__title {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 38px;
  font-weight: var(--nd-w-bold);
  letter-spacing: 0.38px;
  line-height: 44px;
  margin: 0;
}

/* Salto de línea forzado que sólo aplica de tablet para arriba: en mobile
   el ancho es otro y el corte del Figma dejaba una línea suelta. */
.nd-hero2__br {
  display: none;
}

.nd-hero2__lead {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 16px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 0.32px;
  line-height: 20px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Tablet — el texto pasa a estar centrado
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .nd-hero2 {
    min-height: 658px;
  }

  .nd-hero2__inner {
    gap: 16px;
    text-align: center;
  }

  .nd-hero2__br {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  /* En el Figma el bloque mide 858 de ancho (1440 menos 291 de cada lado) */
  .nd-hero2__inner {
    max-width: 858px;
  }

  .nd-hero2__title {
    font-size: 48px;
    letter-spacing: 0.48px;
    line-height: 60px;
  }
}

/* --------------------------------------------------------------------------
   Fondos por página

   Un bloque por página. Para sumar una nueva, se copia este patrón con sus
   tres archivos.
   -------------------------------------------------------------------------- */

/* Qué es YPF RUTA */
.nd-hero2--quees::before {
  background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-hero-mobile.svg");
}

@media (min-width: 768px) {
  .nd-hero2--quees::before {
    background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-hero-tablet.svg");
  }
}

@media (min-width: 1100px) {
  .nd-hero2--quees::before {
    background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-hero-desktop.svg");
  }
}

/* Arriba de 1440 entra la versión ancha del fondo (1920x658). El corte se veía
   porque el SVG de 1440 se estiraba hasta un 33% de más y las curvas se
   aplanaban; este está dibujado al ancho y a 1920 mapea 1:1 con el alto del
   hero, que también es 658.

   El corte es a 1441 y no a 1920 a propósito: entre 1441 y 1919 el archivo de
   1440 igual se estira, y es justo el rango donde aparece el problema —una
   ventana de 1920px de pantalla da unos 1900 y pico de viewport, así que un
   corte en 1920 no llegaría a dispararse nunca en ese monitor—. */
@media (min-width: 1441px) {
  .nd-hero2--quees::before {
    background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-hero-1920.svg");
  }
}

/* Financiamiento
     mobile  310:2529   (375x591)
     tablet  274:45588  (768x658)
     desktop 267:26891  (1440x658)
     1920    331:6284   (1920x658)

   Mismas medidas que Qué es YPF RUTA, así que el componente entra tal cual: el
   único cambio es el fondo y que acá el hero lleva sólo título, sin bajada.

   El archivo de tablet vino nombrado "mobile-tablet" y no "tablet"; se usa de
   768 para arriba igual que en la otra página. */
.nd-hero2--financiamiento::before {
  background-image: url("../../assets/newdesign/financiamiento/bkg-hero-mobile.svg");
}

@media (min-width: 768px) {
  .nd-hero2--financiamiento::before {
    background-image: url("../../assets/newdesign/financiamiento/bkg-hero-mobile-tablet.svg");
  }
}

@media (min-width: 1100px) {
  .nd-hero2--financiamiento::before {
    background-image: url("../../assets/newdesign/financiamiento/bkg-hero-desktop.svg");
  }
}

@media (min-width: 1441px) {
  .nd-hero2--financiamiento::before {
    background-image: url("../../assets/newdesign/financiamiento/bkg-hero-1920.svg");
  }
}