/* ==========================================================================
   YPF RUTA — Rediseño 2026 · "Plataforma de soluciones"

   Figma:
     mobile  267:27736  (375)
     tablet  274:35750  (768)
     desktop 267:27307  (1440)

   Lo particular de esta sección: la columna de texto respeta el contenedor
   (mismo eje izquierdo que el resto del sitio) pero el slider IGNORA el
   contenedor y se va hasta el borde derecho de la ventana.

   Cómo se resuelve: la sección es full-bleed y el interior lleva SÓLO
   padding-left, calculado para caer justo donde arranca el contenedor
   centrado. Sin padding-right, el slider llega hasta el borde y ahí Swiper
   recorta. Ver js/newdesign/home-plataforma.js para el 2.3 / 1.2.
   ========================================================================== */

.nd-plat {
  background-color: var(--nd-black);
  /* "cover" y no "100% 100%": estirar el SVG dejaba bordes raros y una franja
     negra a la izquierda, porque el dibujo no llega a los cantos del lienzo.
     Con los espaciados de abajo la sección mide ~1063px de alto en mobile,
     que es justo el alto del SVG, así que a 375px calza 1:1. */
  background-size: cover;
  overflow: hidden;
  padding: 80px 0 100px;
  position: relative;

  /* Full bleed */
  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-plat::before {
  background-image: url("../../assets/newdesign/home/bgk-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;
}

/* Sólo padding izquierdo: alinea con el contenedor centrado en pantallas
   anchas y cae en el gutter en las angostas. El lado derecho queda libre
   para que el slider se escape. */
.nd-plat__inner {
  display: flex;
  flex-direction: column;
  padding-left: var(--nd-gutter);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Columna de texto
   -------------------------------------------------------------------------- */

.nd-plat__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  order: 1;
  padding-right: var(--nd-gutter);
}

.nd-plat__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nd-plat__title {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 36px;
  font-weight: var(--nd-w-bold);
  letter-spacing: 0.72px;
  line-height: 42px;
  margin: 0;
}

.nd-plat__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: 0;
}

.nd-plat__cta {
  align-items: center;
  align-self: flex-start;
  background-color: var(--nd-blue);
  border-radius: var(--nd-radius);
  color: var(--nd-white);
  display: flex;
  font-family: var(--nd-font-display);
  font-size: 16px;
  font-weight: var(--nd-w-medium);
  height: 45px;
  justify-content: center;
  letter-spacing: 0.32px;
  line-height: 28px;
  min-width: 186px;
  padding: 0 10px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nd-plat__cta:hover,
.nd-plat__cta:focus-visible {
  background-color: #0340b0;
  color: var(--nd-white);
}

/* --------------------------------------------------------------------------
   Flechas prev / next — sólo mueven el slider, el texto queda fijo
   -------------------------------------------------------------------------- */

.nd-plat__nav {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  order: 3;
}

.nd-plat__nav-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  /* Flecha dibujada como SVG embebido: un solo asset para los dos botones */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: 0;
  cursor: pointer;
  height: 24px;
  padding: 0;
  transition: opacity 0.2s ease;
  width: 24px;
}

.nd-plat__nav-btn--prev {
  transform: rotate(180deg);
}

.nd-plat__nav-btn:hover {
  opacity: 0.6;
}

/* Swiper apaga el botón cuando no hay más slides para ese lado */
.nd-plat__nav-btn.swiper-button-disabled {
  cursor: default;
  opacity: 0.3;
}

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

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */

.nd-plat__slider {
  margin-top: 80px;
  min-width: 0; /* imprescindible: si no, el flex item no deja recortar */
  order: 2;
  position: relative;
}

.nd-plat__swiper {
  overflow: hidden;
}

/* El degradado que "esconde" las cards contra el borde derecho.

   Va pegado al borde de la ventana, no a la card: es un overlay del ancho
   del slider, que llega hasta el canto derecho. Funde al negro del fondo
   de la sección y queda POR ENCIMA de las cards (z-index 2), pero con
   pointer-events: none, así no se come el arrastre con el dedo.

   Angosto a propósito: tiene que morder sólo la card que se está yendo, no
   ensuciar la que todavía se lee entera.

   Al llegar al tope del scroll ya no hay nada escondido, así que se va con
   un fade out; cuando el track vuelve para atrás, entra con un fade in. Es
   la misma condición que el tope (ver pintarDegradado() en el JS). */
.nd-plat__fade {
  background: linear-gradient(to left, var(--nd-black) 0%, rgba(0, 0, 0, 0) 100%);
  bottom: 0;
  display: none;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.4s ease;
  width: 110px;
  z-index: 2;
}

.nd-plat.is-final .nd-plat__fade {
  opacity: 0;
}

.nd-plat__swiper .swiper-slide {
  height: auto;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.nd-plat__card {
  background-color: var(--nd-white);
  border-radius: var(--nd-radius);
  box-shadow: 0 4.658px 5.823px rgba(175, 175, 175, 0.25);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  min-height: 420px;
  padding: 24px;
  position: relative;
  transition: box-shadow 0.25s ease;
}

.nd-plat__card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

/* Botón invisible que cubre toda la card.
   Va aparte y no envolviendo el contenido porque un <button> no puede
   contener un <h3>. Así el HTML queda válido y la card sigue siendo
   accesible por teclado. */
.nd-plat__card-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: var(--nd-radius);
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.nd-plat__card-toggle:focus-visible {
  outline: 2px solid var(--nd-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Estados: idle (cerrada) / seleccionada (abierta), animados

   Cerrada  -> pill arriba, título abajo, sin cuerpo.
   Abierta  -> pill + título arriba, cuerpo desplegado abajo.

   Cómo se anima, que son dos movimientos a la vez:

   1. La cabecera (pill + título) es la que empuja. Cerrada tiene flex-grow: 1
      y, con space-between, manda el título al fondo de la card. Al abrir, el
      flex-grow va a 0 —y flex-grow SÍ es animable—, así que la cabecera se
      encoge y el título sube solo.

   2. El cuerpo crece de 0 a su alto real con el truco de grid 0fr -> 1fr,
      que es la única forma de animar hacia "auto". Sube desde abajo mientras
      aparece.

   El alto de la card nunca cambia: la fila del slider no salta.
   -------------------------------------------------------------------------- */

.nd-plat__card-head {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  justify-content: space-between;
  transition: flex-grow 0.35s ease;
}

.nd-plat__card.is-open .nd-plat__card-head {
  flex-grow: 0;
}

.nd-plat__card-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}

.nd-plat__card.is-open .nd-plat__card-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* El hijo tiene que poder achicarse a 0 y recortar lo que sobra */
.nd-plat__card-body > * {
  min-height: 0;
  overflow: hidden;
  padding-top: 16px;
}

.nd-plat__pill {
  align-self: flex-start;
  background-color: #00adee;
  border-radius: 2px;
  color: var(--nd-white);
  font-family: var(--nd-font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 14px;
  padding: 4px 8px;
  text-transform: uppercase;
}

.nd-plat__card-title {
  color: #252525;
  font-family: var(--nd-font-display);
  font-size: 20px;
  font-weight: var(--nd-w-medium);
  letter-spacing: 0.4px;
  line-height: 24px;
  margin: 0;
}

.nd-plat__card-text {
  color: var(--nd-black);
  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-plat__card-text b {
  font-weight: var(--nd-w-bold);
}

/* Lista con checks */
.nd-plat__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nd-plat__list li {
  color: var(--nd-black);
  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;
}

/* Check embebido: se define una sola vez y lo usan todos los items */
.nd-plat__list 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;
}

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

@media (min-width: 768px) {
  .nd-plat {
    padding: 180px 0;
  }

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

  /* Dos columnas: texto fijo a la izquierda, slider a la derecha.
     El slider ocupa las dos filas para poder crecer en alto. */
  .nd-plat__inner {
    column-gap: 24px;
    display: grid;
    grid-template-columns: 348px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .nd-plat__head {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .nd-plat__nav {
    align-self: start;
    grid-column: 1;
    grid-row: 2;
    margin-top: 72px;
  }

  .nd-plat__slider {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .nd-plat__card {
    min-height: 390px;
  }

  .nd-plat__fade {
    display: block;
    width: 90px;
  }
}

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

@media (min-width: 1100px) {
  .nd-plat {
    padding: 200px 0 180px;
  }

  /* Alinea el texto con el contenedor centrado de 1296px; en pantallas más
     angostas que eso cae en el gutter de 72px. */
  .nd-plat__inner {
    column-gap: 136px;
    grid-template-columns: 417px minmax(0, 1fr);
    padding-left: max(var(--nd-gutter), calc((100% - var(--nd-max-width)) / 2));
  }

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

  /* Ancho fijo de card, como en el Figma. El JS pasa a slidesPerView 'auto'
     en este breakpoint, así Swiper respeta esta medida en vez de calcularla.
     Como efecto secundario bueno: en monitores anchos las cards no se
     estiran, entran más. */
  .nd-plat__swiper .swiper-slide {
    width: 304px;
  }

  .nd-plat__fade {
    width: 190px;
  }
}