/* ==========================================================================
   YPF RUTA — Rediseño 2026 · "¿Qué es YPF RUTA Contado?"

   Figma:
     mobile  267:27989  (375)
     tablet  274:36026  (768)
     desktop 267:27581  (1440)

   Es una caja redondeada con su propio fondo (un SVG por breakpoint), un
   velo oscuro sobre la mitad izquierda para que el texto se lea, el bloque
   de texto encima y la foto de los celulares a la derecha.

   En mobile todo se apila y la foto se va abajo, desbordando un poco hacia
   los costados como en el diseño.
   ========================================================================== */

.nd-contado {
  background-color: var(--nd-black);
  padding: 100px 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;
}

.nd-contado__inner {
  margin: 0 auto;
  max-width: var(--nd-max-width);
  width: 100%;
}

/* --------------------------------------------------------------------------
   La caja
   -------------------------------------------------------------------------- */

.nd-contado__box {
  border-radius: var(--nd-radius);
  overflow: hidden;
  padding: 40px 20px;
  position: relative;
}

/* Fondo y velo van juntos en el mismo pseudo-elemento, como dos capas de
   background: así se animan como una sola pieza (ver reveal.css) y el velo
   sigue quedando por encima del fondo, que es el orden que pide el diseño.

   El velo del lado del texto ("Rectangle 3299" en el Figma) es el SVG tal
   cual lo exporta Figma, no una aproximación en CSS. Son tres capas
   superpuestas y la clave está en la tercera:

     1. degradado lineal negro -> transparente
     2. radial negro al 20% de opacidad
     3. radial AZUL #0167FE centrado fuera de la esquina superior izquierda

   Esa tercera capa es el resplandor azulado de arriba a la izquierda. Con un
   simple degradado negro la zona quedaba apagada y se perdía.

   El SVG lleva preserveAspectRatio="none", así que se estira a la medida que
   le demos. En mobile no va: el Figma no lo tiene ahí porque el fondo propio
   de esa vista ya resuelve el contraste. */
.nd-contado__box::before {
  background-image: url("../../assets/newdesign/home/bkg-ruta-contado-mobile.svg");
  background-position: top center;
  background-repeat: no-repeat;
  /* Ver la nota de los otros fondos: se mapea exacto en vez de recortar */
  background-size: 100% 100%;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.nd-contado__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Textos
   -------------------------------------------------------------------------- */

.nd-contado__tag {
  align-self: flex-start;
  background-color: #00adee;
  border-radius: 2px;
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 12px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 1px;
  line-height: 14px;
  padding: 5px 10px;
  text-transform: uppercase;
}

.nd-contado__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-contado__text {
  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;
}

.nd-contado__text p {
  margin: 0;
}

/* El Figma deja un renglón en blanco entre el párrafo y los bullets */
.nd-contado__text ul {
  list-style: disc;
  margin: 22px 0 0;
  padding-left: 21px;
}

/* --------------------------------------------------------------------------
   Botón

   En mobile va lleno y a todo el ancho; de tablet para arriba queda como
   contorno celeste, según el Figma.
   -------------------------------------------------------------------------- */

.nd-contado__cta {
  align-items: center;
  background-color: var(--nd-blue);
  border: 1px solid 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;
  margin-top: 16px;
  padding: 0 10px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Foto de los celulares
   -------------------------------------------------------------------------- */

.nd-contado__media {
  margin-top: 80px;
  position: relative;
  z-index: 1;
}

/* Desborda a los costados, como en el Figma de mobile */
.nd-contado__media img {
  display: block;
  height: auto;
  margin-left: -13%;
  max-width: none;
  width: 126%;
}

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

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

  .nd-contado__box {
    align-items: center;
    display: flex;
    min-height: 551px;
    padding: 40px;
  }

  /* Se suma el velo como capa de arriba. 448 de 720 de ancho = 62%. */
  .nd-contado__box::before {
    background-image: url("../../assets/newdesign/home/contado-velo.svg"),
      url("../../assets/newdesign/home/bkg-ruta-contado-tablet.svg");
    background-position: left top, top center;
    background-repeat: no-repeat, no-repeat;
    background-size: 62% 100%, 100% 100%;
  }

  .nd-contado__content {
    flex: 0 1 307px;
    max-width: 307px;
  }

  .nd-contado__cta {
    background-color: transparent;
    border-color: #00adee;
    color: #00adee;
    width: 186px;
  }

  .nd-contado__cta:hover,
  .nd-contado__cta:focus-visible {
    background-color: #00adee;
    color: var(--nd-white);
  }

  .nd-contado__media {
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 0;
    width: 53%;
  }

  .nd-contado__media img {
    margin-left: 0;
    width: 100%;
  }
}

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

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

  .nd-contado__box {
    min-height: 585px;
    padding: 40px 0 40px 96px;
  }

  /* En desktop el velo mide 828x650 sobre una caja de 1296x585:
     64% de ancho y 111% de alto (se pasa por abajo, lo recorta la caja). */
  .nd-contado__box::before {
    background-image: url("../../assets/newdesign/home/contado-velo.svg"),
      url("../../assets/newdesign/home/bkg-ruta-contado.svg");
    background-size: 64% 111%, 100% 100%;
  }

  .nd-contado__content {
    flex-basis: 416px;
    max-width: 416px;
  }

  .nd-contado__title {
    font-size: 48px;
    letter-spacing: 0.96px;
    line-height: 52px;
  }

  .nd-contado__media {
    width: 54%;
  }
}