/* ==========================================================================
   Slider de lanzamientos (Swiper): imagen a pantalla completa del banner con
   un titulo superpuesto. Los slides los arma el template desde
   paragraph.field_item_slider (field_imagen_slider + field_titulo_slider).
   Ver templates/paragraph--mercury-slider-lanzamiento.html.twig y
   js/bannerLanzamiento.js. Depende de css/general.css (variables de color y
   tipografia) y de css/swiper-bundle.min.css.

   Mobile-first: en celular/tablet la tarjeta es CUADRADA (aspect-ratio 1/1);
   desde 996px pasa a banner ancho de alto fijo.

   Dos modos de navegacion segun paragraph.field_navegacion_bullets:
   - false (base): flechas + contador "X de Y" + boton CTA.
   - true (.launch-slider--bullets): bullets centrados abajo que solo cambian
     de slide; sin flechas ni CTA. Ver bloque al final.
   El click en la imagen del slide lleva a su pagina (.launch-slider__link).
   ========================================================================== */

:root {
  --launch-slider-radius: 60px;
  --launch-slider-pad: 24px;
}

.launch-slider {
  max-width: 1308px;
  margin-inline: auto;
  margin-top:32px;
  padding:0 16px;
}

.launch-slider__swiper {
  position: relative;
  overflow: hidden;
  border-radius: var(--launch-slider-radius);
  aspect-ratio: 1 / 1;
  /* min-height: 468px; */
  background: #0c0a14;
  color: var(--iplan-white);
  font-family: var(--font-base);
  max-height: 438px;
  height:100%;
  width: 100%;
}

/* ---------- Slide (imagen + titulo) ---------- */

.launch-slider__slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Envoltorio del contenido del slide: <a> a la pagina del slide si tiene
   field_url_seccion, <div> si no. Ocupa todo el slide. */
.launch-slider__link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

a.launch-slider__link {
  cursor: pointer;
}

a.launch-slider__link:hover,
a.launch-slider__link:focus {
  color: inherit;
  text-decoration: none;
}

a.launch-slider__link:focus-visible {
  outline: 2px solid var(--iplan-white);
  outline-offset: -4px;
  border-radius: var(--launch-slider-radius);
}

.launch-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Caption (solo el titulo) ----------
   Mobile: apilado y centrado en la mitad inferior, arriba de los controles.
   Desde 996px: abajo a la izquierda. */
.launch-slider__caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding: var(--launch-slider-pad) 20px;
  /* deja aire abajo para los controles (CTA ~40px + gap + pager 26px) + 24px */
  /* padding-bottom: calc(var(--launch-slider-pad) + 104px); */
  text-align: center;
}

/* Con video de fondo el texto blanco se puede perder si el video es claro:
   el caption (que cubre todo el slide) lleva un gradiente oscuro desde abajo,
   donde va el texto. Solo aplica a slides con <video>. */
.launch-slider__link:has(.launch-slider__img--video) .launch-slider__caption {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0) 75%
  );
}

.launch-slider__caption > * {
  width: 100%;
  text-align: inherit;
}

/* imagen sobre el titulo: tamano natural, sin deformarse (solo no se pasa
   del ancho del caption). Pisa el width:100% de .launch-slider__caption > * */
.launch-slider__caption > .launch-slider__title-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Texto "nuevo lanzamiento" (field_nuevo_lanzamiento), arriba de la imagen
   del titulo. */
.launch-slider__new {
  color: #FFF;

/* Titulo bold mobile */
font-family: Inter;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.launch-slider__title {
  margin: 0;
  color: #EDF4FC;
  font-family: 'Inter', var(--font-base), sans-serif;
  font-style: normal;
  font-weight: 700;
  /* mobile-first: escala con el ancho de la tarjeta cuadrada */
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.launch-slider__subtitle {
  margin: 0;
  color: #FFF;
  font-family: 'Inter', var(--font-base), sans-serif;
  font-size: clamp(22px, 7vw, 28px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.launch-slider__text {
  margin: 0;
  color: var(--Blanco, #FFF);
  font-family: 'Inter', var(--font-base), sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Titulo, subtitulo y texto pueden traer HTML del editor (<p>, <strong>...):
   los hijos heredan la tipografia del contenedor y no suman margenes. */
.launch-slider__title > *,
.launch-slider__subtitle > *,
.launch-slider__text > * {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.launch-slider__title strong,
.launch-slider__subtitle strong,
.launch-slider__text strong {
  font-weight: 700;
}

/* ---------- Controles (CTA + pager) ----------
   Mobile: columna centrada abajo (CTA arriba, pager abajo).
   Desde 996px: fila abajo a la derecha (pager primero, CTA al final). */
.launch-slider__controls {
  position: absolute;
  left: 50%;
  bottom: var(--launch-slider-pad);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100% - 2 * var(--launch-slider-pad));
}

/* CTA (field_url_seccion). Pildora blanca outline. Reusa .btn de general.css. */
.launch-slider__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1;
  color: var(--iplan-white);
  border: 1px solid var(--iplan-white);
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
  color: var(--Blanco, #FFF);

/* Texto */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: normal;
}

.launch-slider__cta:hover {
  background: var(--iplan-white);
  color: #0c0a14;
}

.launch-slider__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.launch-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--iplan-white);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.launch-slider__nav:hover {
  opacity: 1;
}

.launch-slider__nav svg {
  width: 18px;
  height: 18px;
}

.launch-slider__nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* Contador "X de Y" (Swiper pagination type 'fraction'). */
.launch-slider__fraction.swiper-pagination {
  position: static;
  width: auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--iplan-white);
  font-family: Inter;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}

.launch-slider__fraction .swiper-pagination-current,
.launch-slider__fraction .swiper-pagination-total {
  font-variant-numeric: tabular-nums;
}

/* Un solo slide: sin pager (el CTA se mantiene). */
.launch-slider--single .launch-slider__pager {
  display: none;
}

/* ==========================================================================
   >= 760px : mismo layout, mas aire.
   ========================================================================== */
@media (min-width: 760px) {
  :root {
    --launch-slider-pad: 32px;
  }
}

/* ==========================================================================
   >= 996px : de tarjeta cuadrada a banner ancho de alto fijo. El titulo pasa
   a la esquina inferior izquierda.
   ========================================================================== */
@media (min-width: 996px) {
  :root {
    --launch-slider-pad: 44px;
  }

  .launch-slider__swiper {
    aspect-ratio: unset;
    height: 438px;
  }

  /* titulo: abajo a la izquierda */
  .launch-slider__caption {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    /* max-width: 55%; */
    padding: var(--launch-slider-pad);
    gap:20px;
  }

  /* video: el texto va abajo a la izquierda, se oscurece esa esquina */
  .launch-slider__link:has(.launch-slider__img--video) .launch-slider__caption {
    background: linear-gradient(
      to top right,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.4) 35%,
      rgba(0, 0, 0, 0) 65%
    );
  }

  /* controles: fila abajo a la derecha (pager primero, CTA al final via
     row-reverse: en el DOM el CTA va antes que el pager). */
  .launch-slider__controls {
    left: auto;
    right: var(--launch-slider-pad);
    transform: none;
    flex-direction: row-reverse;
    align-items: center;
    gap: 22px;
    max-width: none;
  }

  /* banner ancho: el titulo deja de escalar con vw y queda fijo */
  .launch-slider__title {
    font-size: 34px;
  }

  .launch-slider__subtitle {
    font-size: 25px;
  }

  .launch-slider__text {
    font-size: 16px;
  }
}

/* ==========================================================================
   >= 1366px : mismo layout, mas aire.
   ========================================================================== */
@media (min-width: 1366px) {
  :root {
    --launch-slider-pad: 56px;
  }
.launch-slider{
    padding:0;
  }
  /* .launch-slider__swiper {
    height: 337px;
  } */

  .launch-slider__title {
    font-size: 40px;
    line-height: 42px; /* 105% */
    width:800px;
  }
}

/* ==========================================================================
   Modo bullets (field_navegacion_bullets = true): bullets centrados abajo en
   todos los tamanos, sin flechas, contador ni CTA.
   ========================================================================== */

/* deja aire abajo para los bullets (10px) + 24px */
.launch-slider--bullets .launch-slider__caption {
  padding-bottom: calc(var(--launch-slider-pad) + 34px);
}

.launch-slider--bullets .launch-slider__pager {
  gap: 8px;
}

/* Cada bullet es un <button> que solo cambia de slide. El activo va blanco
   solido, el resto blanco translucido. */
.launch-slider__bullet {
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}

.launch-slider__bullet:hover,
.launch-slider__bullet:focus-visible {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.15);
}

.launch-slider__bullet:focus-visible {
  outline: 2px solid var(--iplan-white);
  outline-offset: 3px;
}

.launch-slider__bullet.is-active {
  background: var(--iplan-white);
}

@media (min-width: 996px) {
  /* deja aire abajo para los bullets centrados (bottom 24px + 10px) */
  .launch-slider--bullets .launch-slider__caption {
    padding-bottom: calc(var(--launch-slider-pad) + 16px);
  }

  /* bullets: centrados y pegados al borde inferior, por debajo del titulo */
  .launch-slider--bullets .launch-slider__controls {
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translateX(-50%);
  }
}