/* ==========================================================================
   YPF RUTA — Rediseño 2026 · "APP YPF RUTA"

   Figma:
     mobile  267:27930  (375)
     tablet  274:35966  (768)
     desktop 267:27521  (1440)

   El panel usa .nd-panel (base.css), el mismo cristal esmerilado que
   "Clientes que nos eligen".

   El cartel "¡Descargala!" va en HTML, no quemado en la imagen: así se puede
   editar el texto y no depende de que el PNG venga con el recorte justo.
   ========================================================================== */

.nd-app {
  background-color: var(--nd-black);
  overflow: hidden;
  padding: 80px var(--nd-gutter);
  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 aparte para poder animarlo (ver reveal.css) */
.nd-app::before {
  background-image: url("../../assets/newdesign/home/bgk-app-ypf-ruta-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-app__inner {
  margin: 0 auto;
  max-width: var(--nd-max-width);
  position: relative;
  width: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Panel

   En mobile es una sola columna y el orden cambia respecto de desktop: el
   teléfono se mete entre el título y la lista. Por eso el panel es grid y
   .nd-app__content usa display: contents, para que sus hijos se ordenen como
   ítems del grid sin duplicar markup.
   -------------------------------------------------------------------------- */

.nd-app__panel {
  display: grid;
  gap: 40px;
  padding: 40px 20px;
}

.nd-app__content {
  display: contents;
}

.nd-app__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;
  order: 1;
}

.nd-app__media {
  order: 2;
}

.nd-app__list {
  order: 3;
}

.nd-app__cta-text {
  order: 4;
}

.nd-app__stores {
  order: 5;
}

/* --------------------------------------------------------------------------
   Teléfono + cartel
   -------------------------------------------------------------------------- */

.nd-app__media {
  overflow: hidden;
  position: relative;
}

.nd-app__phone {
  display: block;
  height: auto;
  width: 100%;
}

.nd-app__badge {
  align-items: center;
  background-color: #00adee;
  color: var(--nd-white);
  display: flex;
  font-family: var(--nd-font-display);
  font-size: 20px;
  font-weight: var(--nd-w-medium);
  justify-content: center;
  letter-spacing: 1px;
  line-height: 1;
  min-height: 62px;
  padding: 10px 16px;
  position: absolute;
  right: 0;
  top: 0;
}

/* --------------------------------------------------------------------------
   Lista con checks
   -------------------------------------------------------------------------- */

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

.nd-app__list li {
  color: var(--nd-white);
  display: flex;
  font-family: var(--nd-font-display);
  font-size: 16px;
  font-weight: var(--nd-w-regular);
  gap: 18px;
  letter-spacing: 0.208px;
  line-height: 1.2;
}

/* Check celeste, embebido: una sola definición para todos los ítems */
.nd-app__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2300ADEE'/%3E%3Cpath d='M5.4 10.4l3.1 3.1 6.1-6.1' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  content: "";
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

/* --------------------------------------------------------------------------
   Llamado a la acción y botones de las tiendas
   -------------------------------------------------------------------------- */

.nd-app__cta-text {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 18px;
  font-weight: var(--nd-w-medium);
  line-height: 22px;
  margin: 0;
}

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

/* Los SVG ya traen el fondo negro y el borde gris del botón */
.nd-app__stores a {
  display: block;
  line-height: 0;
  width: 148px;
}

.nd-app__stores img {
  display: block;
  height: 48px;
  width: 148px;
}

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

/* --------------------------------------------------------------------------
   Tablet — Figma 274:35966
   Pasa a dos columnas: textos a la izquierda, teléfono a la derecha.
   -------------------------------------------------------------------------- */

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

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

  .nd-app__panel {
    align-items: center;
    display: flex;
    gap: 60px;
    padding: 86px 40px;
  }

  .nd-app__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
  }

  .nd-app__media {
    flex: 0 0 265px;
    width: 265px;
  }

  .nd-app__stores {
    flex-direction: row;
    gap: 24px;
  }
}

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

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

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

  .nd-app__panel {
    margin: 0 auto;
    max-width: 1077px;
    min-height: 570px;
    padding: 86px 110px;
  }

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

  .nd-app__cta-text {
    font-size: 24px;
    line-height: 30px;
  }
}