/*
  componente_internet_3_columnas (mobile-first)
  - Used by templates/paragraph--internet-3-columnas.html.twig. Tarjeta
    redondeada SIN ola de gradiente (a diferencia de componente_comparativa /
    componente_comparativa_imagen_lateral): fondo claro liso, columnas en
    forma de "pill" (borde rosa, esquinas muy redondeadas), la 2da resaltada
    con relleno rosa claro, y UN solo boton CTA compartido debajo de todas
    las columnas (no uno por columna).
  - Mismos 2 breakpoints reales que el resto del theme: mobile y tablet-v
    (760px) renderizan igual (slider si hay 2+ columnas), tablet-h (996px) y
    desktop (1366px) renderizan igual (fila estatica SIN slider) — el query
    de 1366px es intencionalmente un no-op.
*/

.componente_internet_3_columnas {
  background: color-mix(in srgb, var(--color-fondo, transparent) calc(var(--color-fondo-opacity, 0) * 100%), transparent);
  /* padding-top: 32px; */
  margin-top:32px;
}

/* background con color-mix() aunque no haya field_mercury_color_bg cargado:
   var(--inner-color-fondo, var(--iplan-bg-soft)) cae en --iplan-bg-soft si no
   hay override, y color-mix(bg-soft, bg-soft) da bg-soft sin necesitar una
   regla condicional aparte. Cuando SI hay color cargado (inline style del
   twig), se mezcla ese color a su % de opacidad sobre el bg-soft de base -
   no sobre transparent como el fondo de la seccion- porque esta tarjeta
   siempre debe verse solida, nunca dejar pasar lo que hay detras. */
.componente_internet_3_columnas_inner {
  position: relative;
  background: color-mix(in srgb, var(--inner-color-fondo, var(--iplan-bg-soft)) calc(var(--inner-color-fondo-opacity, 1) * 100%), var(--iplan-bg-soft));
  max-width: 1308px;
  margin: 0 auto;
  padding: 28px 20px 24px;
  border-radius: 60px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin:0 16px;
}

.componente_internet_3_columnas_title {
  width: 100%;
  color: var(--iplan-pink, #fd006e);
  font-family: Inter;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
}

.componente_internet_3_columnas_subtitle {
  width: 100%;
  color: var(--Gris, #7B828C);
  text-align: center;
  font-family: Inter;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.componente_internet_3_columnas_panel {
  width: 100%;
}

.componente_internet_3_columnas_swiper {
  width: 100%;
  overflow: hidden;
}

/* Base (mobile/tablet-v): Swiper's own CSS pone .swiper-wrapper en
   display:flex, que ya es lo que se quiere aca (1 columna por vista). */
.componente_internet_3_columnas_grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.componente_internet_3_columnas_box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  /* Alto minimo en mobile/tablet-v (slider); se libera desde 996px. */
  min-height: 300px !important;
  /* flex:0 0 100% (no flex:1): con Swiper sin inicializar (1 sola columna) el
     padre sigue siendo flex; con flex:1 varias columnas se verian todas
     juntas en fila en vez de una sola a pantalla completa. Se pisa por
     completo en la fila de 996px+ mas abajo. */
  /* Sin max-width: el slide debe ocupar el 100% del swiper-wrapper (como
     .componente_comparativa_box) para que Swiper muestre exactamente 1 caja
     por vista; un max-width mas chico que el viewport dejaria asomar la
     siguiente caja en el mismo viewport, rompiendo el "1 a la vez". */
  flex: 0 0 100% !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
  border-radius: 60px !important;
  /* --box-border-color viene de field_color_borde (inline style del twig). */
  border: 2px solid var(--box-border-color, #FF006E) !important;
  background: transparent !important;
  text-align: center !important;
}


/* field_mercury_color_bg de cada columna (mismo nivel que su
   field_mercury_titulo_cajas). Declarada despues de --highlight para que un
   color cargado por el editor gane sobre el tinte rosa automatico de la 2da
   columna tambien; --box-color-fondo/-opacity vienen del inline style del
   twig, mismo patron color-mix() que el resto del theme. */
.componente_internet_3_columnas_box--custom-bg {
  background: color-mix(in srgb, var(--box-color-fondo, transparent) calc(var(--box-color-fondo-opacity, 0) * 100%), transparent) !important;
}

.componente_internet_3_columnas_box_title {
  color: var(--box-title-color, var(--Magenta, #FF006E));
text-align: center;
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 42px; /* 105% */
}

.componente_internet_3_columnas_box_img_superior {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.componente_internet_3_columnas_box_img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 56px;
  margin: 0 auto;
  object-fit: contain;
}

.componente_internet_3_columnas_box_text {
  font-family: Inter;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0%;
  color: #7B828C;
  text-align: center;
  margin: 0;
}

.componente_internet_3_columnas_box_cta {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 8px;
}

.componente_internet_3_columnas_dots.swiper-pagination {
  position: static;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.componente_internet_3_columnas_dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  background: color-mix(in srgb, var(--iplan-pink, #fd006e) 30%, #fff);
  opacity: 1;
}

.componente_internet_3_columnas_dots .swiper-pagination-bullet-active {
  background: var(--iplan-pink, #fd006e);
}

.componente_internet_3_columnas_cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Overrides el look sitewide de .button_mercury (mayusculas, padding chico)
   para que coincida con el pill "Contratar" del mockup. */
.componente_internet_3_columnas_btn {
  padding: 14px 32px;
  border-radius: 999px;
  background-color: var(--iplan-pink, #fd006e);
  color: #fff;
  font-family: var(--font-family-mont);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  width: 100%;
  max-width: 260px;
      background: var(--iplan-pink);
    color: var(--iplan-white);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

/* Tablet vertical — layout identico a mobile, solo mas aire. */
@media (min-width: 760px) {
  .componente_internet_3_columnas_inner {
    padding: 36px 32px 32px;
  }

  .componente_internet_3_columnas_title {
    font-size: 32px;
    line-height: 36px;
  }

  .componente_internet_3_columnas_box_text {
    font-size: 16px;
  }
}

/* Tablet horizontal — el unico cambio real: el slider de Swiper le da paso a
   una fila estatica SIN slider (el JS destruye la instancia de Swiper y no
   la vuelve a crear en este breakpoint). Las 3 columnas pasan a ir lado a
   lado, en partes iguales. */
@media (min-width: 996px) {
  .componente_internet_3_columnas_inner {
    padding: 48px 64px;
  }

  .componente_internet_3_columnas_title {
    font-size: 40px;
    line-height: 42px;
  }

  /* !important: .componente_internet_3_columnas_grid es tambien el
     swiper-wrapper — Swiper le pone width/transform/height inline mientras
     esta activo. Si el destroy() no llega a limpiar esos inline styles justo
     antes de que se evalue este media query, un inline style sin !important
     pisaria estas reglas aunque coincida el breakpoint. */
  .componente_internet_3_columnas_grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: 24px;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .componente_internet_3_columnas_box {
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 60px 24px !important;
    min-height: 0 !important;
  }

  .componente_internet_3_columnas_dots.swiper-pagination {
    display: none;
  }

  .componente_internet_3_columnas_btn {
    width: auto;
  }
}

/* Desktop — intentionally identical to tablet-h, no overrides here. */
@media (min-width: 1366px) {
  .componente_internet_3_columnas_inner{
    margin: 32px auto 0 auto;
  }
}