/* ==========================================================================
   YPF RUTA — Rediseño 2026 · Qué es YPF RUTA · Bloque de soluciones

   Figma:
     mobile  267:28084  (375)
     tablet  274:44220  (768)
     desktop 267:27005  (1440)

   Son TRES layouts distintos con el mismo contenido y el mismo markup:

     mobile   imagen arriba, texto abajo. Los cuatro bloques abiertos.
     tablet   imagen a la izquierda (183px) y texto a la derecha. Los
              cuatro abiertos.
     desktop  ACORDEÓN: sólo un bloque abierto por vez. Los títulos quedan
              en la columna izquierda y la imagen del bloque abierto pasa
              a la derecha del panel.

   La imagen se escribe UNA sola vez por bloque, dentro del bloque. En
   desktop la del bloque abierto se posiciona en absoluto sobre la derecha
   del panel y las otras quedan ocultas: así no hay que repetir el markup de
   la imagen ni mantener dos copias.

   El comportamiento de acordeón vive en js/newdesign/acordeon.js y sólo se
   activa de 1100px para arriba.
   ========================================================================== */

.nd-acc {
  background-color: var(--nd-black);
  overflow: hidden;
  padding: 100px var(--nd-gutter);
  position: relative;

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

/* El fondo va aparte para poder animarlo (ver reveal.css) */
.nd-acc::before {
  background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-plataforma-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;
}

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

.nd-acc__panel {
  padding: 40px 20px;
  position: relative;
}

.nd-acc__items {
  display: flex;
  flex-direction: column;
  gap: 37px;
}

/* --------------------------------------------------------------------------
   Bloque
   -------------------------------------------------------------------------- */

/* La línea separadora se dibuja como fondo y no como border.
   Motivo: en desktop la marca azul del bloque abierto va ENCIMA de esa misma
   línea, no debajo. Como fondo se pueden apilar las dos capas en la misma
   base y animar el ancho de la azul.

   La alternativa —un elemento aparte posicionado en absoluto— obligaría a
   poner position: relative en el bloque, y eso lo convertiría en contenedor
   de referencia de la imagen, que se posiciona contra el panel. */
.nd-acc__item {
  background-image: linear-gradient(#6d6d6d, #6d6d6d);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

.nd-acc__item:last-child {
  background-image: none;
}

.nd-acc__media {
  display: block;
  overflow: hidden;
}

.nd-acc__media img {
  aspect-ratio: 338 / 378;
  border-radius: var(--nd-radius);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* El título es un botón: en desktop abre y cierra el bloque. Se ve como
   texto, no como botón. */
.nd-acc__title {
  margin: 0;
}

.nd-acc__toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: var(--nd-white);
  cursor: default;
  display: block;
  font-family: var(--nd-font-display);
  font-size: 24px;
  font-weight: var(--nd-w-medium);
  line-height: 30px;
  padding: 0;
  text-align: left;
  width: 100%;
}

.nd-acc__toggle:focus-visible {
  outline: 2px solid var(--nd-white);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Lista de checks
   -------------------------------------------------------------------------- */

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

.nd-acc__checks li {
  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;
}

.nd-acc__checks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%230451DD'/%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.1' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  content: "";
  flex-shrink: 0;
  height: 16px;
  margin-top: 2px;
  width: 16px;
}

/* El último bloque no lleva checks sino un párrafo */
.nd-acc__text {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 0.28px;
  line-height: 20px;
  margin: 0;
}

.nd-acc__text b {
  font-weight: var(--nd-w-bold);
}

/* --------------------------------------------------------------------------
   Tablet — Figma 274:44220
   La imagen pasa a la izquierda y el texto a la derecha.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .nd-acc {
    padding: 80px var(--nd-gutter);
  }

  .nd-acc::before {
    background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-plataforma-tablet.svg");
  }

  .nd-acc__panel {
    padding: 60px 40px;
  }

  .nd-acc__items {
    gap: 24px;
  }

  .nd-acc__item {
    align-items: center;
    display: grid;
    column-gap: 24px;
    grid-template-columns: 183px minmax(0, 1fr);
  }

  .nd-acc__media {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .nd-acc__title {
    grid-column: 2;
    grid-row: 1;
  }

  .nd-acc__body {
    grid-column: 2;
    grid-row: 2;
    padding-top: 16px;
  }
}

/* --------------------------------------------------------------------------
   Desktop — Figma 267:27005 · acordeón
   -------------------------------------------------------------------------- */

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

  .nd-acc::before {
    background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-plataforma.svg");
  }

  .nd-acc__panel {
    margin: 0 auto;
    max-width: 1300px;
    padding: 140px 220px;
  }

  /* La columna de títulos ocupa 415px; el resto del panel queda libre para
     la imagen del bloque abierto. */
  .nd-acc__items {
    gap: 24px;
    width: 415px;
  }

  .nd-acc__item {
    display: block;
  }

  .nd-acc__toggle {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .nd-acc__toggle:hover {
    opacity: 0.7;
  }

  /* Apertura y cierre animados.

     El alto del cuerpo no se puede animar con display o height:auto, así que
     se usa el truco de grid: la fila va de 0fr a 1fr, que sí interpola. Por
     eso el cuerpo tiene que tener UN solo hijo —de ahí que la marca azul
     quede afuera, como hermana. */
  .nd-acc__body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding-top: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      padding-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease;
  }

  /* El hijo tiene que poder achicarse a 0 y recortar lo que sobra */
  .nd-acc__body > * {
    min-height: 0;
    overflow: hidden;
  }

  .nd-acc__item.is-open .nd-acc__body {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-top: 16px;
  }

  /* Marca azul: segunda capa de fondo, apoyada sobre la línea gris. Crece de
     0 a 179px desde la izquierda. En el último bloque también hay línea gris
     (en mobile no la lleva, por eso se repone acá). */
  .nd-acc__item,
  .nd-acc__item:last-child {
    background-image: linear-gradient(var(--nd-blue), var(--nd-blue)),
      linear-gradient(#6d6d6d, #6d6d6d);
    background-position: left bottom, left bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 2px, 100% 1px;
  }

  /* La transición se declara con más peso que la del reveal —que sólo lista
     opacity y transform— y repitiendo su opacidad, para no perder el fundido
     de entrada del bloque. */
  .nd-acc__items .nd-acc__item {
    transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nd-acc__item.is-open {
    background-size: 179px 2px, 100% 1px;
  }

  /* En desktop la entrada de los bloques es sólo opacidad, sin desplazarlos.

     Motivo: un transform sobre el bloque lo convierte en el contenedor de
     referencia de sus hijos absolutos, y la imagen —que se posiciona contra
     el panel— se iría de lugar.

     Ojo con el will-change: `will-change: transform` produce el MISMO efecto
     aunque no haya ningún transform aplicado. Por eso acá se deja sólo en
     opacity, no alcanza con poner transform: none. */
  .nd-reveal-ready .nd-acc__item[data-reveal] {
    transform: none;
    will-change: opacity;
  }

  /* Todas las imágenes se paran en el mismo lugar, sobre la derecha del
     panel, y sólo se ve la del bloque abierto. Al estar las cuatro montadas
     el cambio es un fundido cruzado y no un salto. */
  .nd-acc__media {
    bottom: 140px;
    display: block;
    height: 358px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 220px;
    transition: opacity 0.4s ease;
    width: 309px;
  }

  .nd-acc__item.is-open .nd-acc__media {
    opacity: 1;
  }

  .nd-acc__media img {
    aspect-ratio: auto;
    height: 100%;
  }
}