/* ==========================================================================
   YPF RUTA — Rediseño 2026 · Esquemas de contratación / Hero "Elegí cómo
   conectarte"

     mobile  267:30542  (375x1385)
     tablet  279:46644  (768x658, la frame arranca en y=60)
     desktop 267:26617  (1440x890)
     1920    331:7417   (1920x890)

   No es el mismo hero que Qué es YPF RUTA y Financiamiento: además del título
   lleva dos tarjetas. Por eso vive en su propio archivo y no como modificador
   de hero-secundario.css.

   Ancho de contenido: 1080px, igual que "Convenios" (a 1440 son 180 de padding
   lateral y dos tarjetas de 530 con 20 de gap).

   Las dos tarjetas alinean la lista abajo (`justify-content: space-between`):
   el título arriba, los ítems pegados al piso del contenido. Es lo que hace el
   Figma en los tres breakpoints, y por eso la lista de 4 ítems de la segunda
   arranca más arriba que el ítem único de la primera.

   Alto de tarjeta: en el Figma es fijo (378 en mobile y tablet, 450 en
   desktop). Acá va como `min-height` y las dos se estiran a la más alta, así
   la maqueta aguanta si mañana cambian los textos.
   ========================================================================== */

.nd-hero3 {
  background-color: var(--nd-black);
  overflow: hidden;
  /* El título arranca a 156px del borde de arriba, o sea unos 60 por debajo
     del navbar fijo. Mismo criterio que en desktop. */
  padding: 156px var(--nd-gutter) 80px;
  position: relative;

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

/* El fondo va en un pseudo-elemento aparte del contenido, para poder animarlo
   sin arrastrar las tarjetas. Ver css/newdesign/reveal.css. */
.nd-hero3::before {
  background-image: url("../../assets/newdesign/esquema-de-contratacion/bkg-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.
     Ver el comentario largo en css/newdesign/hero-secundario.css. */
  background-size: 100% 100%;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.nd-hero3__inner {
  margin: 0 auto;
  max-width: 1080px;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* En mobile el título va a la izquierda; de tablet para arriba, centrado.
   Misma regla que el hero secundario de las otras dos páginas.

   El margen de abajo es grande a propósito: el Figma de mobile deja ~285px de
   aire entre el título y la primera tarjeta para que se vea el dibujo del
   fondo. */
.nd-hero3__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 0 285px;
}

/* --------------------------------------------------------------------------
   Las dos tarjetas
   -------------------------------------------------------------------------- */

.nd-hero3__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.nd-hero3__card {
  display: flex;
  flex-direction: column;
  /* El título arriba y la lista al piso */
  justify-content: space-between;
  min-height: 378px;
  overflow: hidden;
  padding: 40px 20px;
  /* Mismo degradado que .nd-panel pero a 117°, como lo define este nodo */
  background-image: linear-gradient(117deg,
      rgba(40, 69, 112, 0.238) 7.407%,
      rgba(4, 81, 221, 0.136) 99.894%);
}

/* Ojo: es 55 Roman en el Figma, no bold. Un título grande y liviano. */
.nd-hero3__card-title {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 44px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 0.44px;
  line-height: 50px;
  margin: 0;
}

.nd-hero3__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nd-hero3__item {
  color: var(--nd-white);
  display: flex;
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-regular);
  gap: 8px;
  letter-spacing: 0.28px;
  line-height: 20px;
}

/* El check va arriba y no centrado: en los ítems de dos líneas tiene que
   quedar a la altura de la primera. Los 2px lo centran ópticamente contra esa
   línea —(20 de line-height − 16 del ícono) / 2—. */
.nd-hero3__check {
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-top: 2px;
  width: 16px;
}

/* --------------------------------------------------------------------------
   Tablet — dos columnas y el título centrado
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .nd-hero3 {
    padding: 148px var(--nd-gutter) 88px;
  }

  .nd-hero3::before {
    background-image: url("../../assets/newdesign/esquema-de-contratacion/bkg-hero-tablet.svg");
  }

  .nd-hero3__title {
    margin-bottom: 60px;
    text-align: center;
  }

  .nd-hero3__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nd-hero3__card {
    padding: 40px 24px;
  }
}

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

@media (min-width: 1100px) {
  .nd-hero3 {
    padding: 153px var(--nd-gutter);
  }

  .nd-hero3::before {
    background-image: url("../../assets/newdesign/esquema-de-contratacion/bkg-hero-desktop.svg");
  }

  .nd-hero3__title {
    font-size: 48px;
    letter-spacing: 0.48px;
    line-height: 54px;
    margin-bottom: 80px;
  }

  .nd-hero3__card {
    min-height: 450px;
    padding: 86px;
  }
}

/* Arriba de 1440 entra la versión ancha del fondo, por el mismo motivo que en
   los otros heros: el archivo de 1440 estirado achata las curvas. */
@media (min-width: 1441px) {
  .nd-hero3::before {
    background-image: url("../../assets/newdesign/esquema-de-contratacion/bkg-hero-1920.svg");
  }
}