/*
  componente_internet_3_columnas_b (mobile-first)
  - Used by templates/paragraph--internet-3-columnas-b.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_b {
  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_b_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_b_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_b_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_b_panel {
  width: 100%;
}

.componente_internet_3_columnas_b_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_b_grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.componente_internet_3_columnas_b_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;
  /* Sin padding: el padding lo lleva _box_top, asi la pildora de
     _box_features puede ir pegada a los bordes y al fondo de la columna. */
  padding: 0 !important;
  border-radius: 60px !important;
  /* --box-border-color viene de field_color_borde (inline style del twig). */
  border: 1px solid var(--box-border-color, #FF006E) !important;
  background: transparent !important;
  text-align: center !important;
}

.componente_internet_3_columnas_b_box_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 28px 20px 20px;
}

/* field_descripcion: "pildora" rosa claro con la lista de
   caracteristicas. margin-top:auto la empuja al fondo de la columna (las 3
   columnas miden lo mismo), y el margin de -1px la monta sobre el borde de
   la columna para que ambos bordes coincidan en uno solo. */
.componente_internet_3_columnas_b_box_features {
  /* La lista se centra como bloque dentro de la burbuja, pero sus items
     quedan alineados a la izquierda entre si (como en el mockup). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% + 2px);
  /* Alto minimo comun para que las 3 pildoras midan lo mismo aunque sus
     listas tengan distinta cantidad de items (~5 items de 16px + padding). */
  min-height: 240px;
  margin: auto -1px -1px;
  padding: 40px 38px;
  border: 1px solid var(--box-border-color, #FF006E);
  border-radius: 60px;
  /* Rosa lavanda: el color del borde mezclado con el celeste claro de la
     tarjeta (--iplan-bg-soft), no con blanco. */
  background: color-mix(in srgb, var(--box-border-color, #FF006E) 12%, var(--iplan-bg-soft, #EDF4FC));
  color: var(--box-border-color, #FF006E);
  font-family: Inter;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  color: var(--contacto-text-color, #FD006E);

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

.componente_internet_3_columnas_b_box_features ul {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding-left: 18px;
  /* Por si el theme global le saca las viñetas a los ul. */
  list-style: disc outside;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.componente_internet_3_columnas_b_box_features li {
  margin: 0;
  padding-left: 2px;
}

.componente_internet_3_columnas_b_box_features li::marker {
  color: var(--box-border-color, #FF006E);
}

.componente_internet_3_columnas_b_box_features p {
  margin: 0;
}


/* field_titulo_columna_b ("Internet WORK"): texto con formato, puede traer
   su propio <p>. */
.componente_internet_3_columnas_b_box_title {
  color: var(--box-border-color, var(--Magenta, #FF006E));
  text-align: center;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
  color: var(--Magenta, #FF006E);
text-align: center;
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 42px; /* 105% */
text-transform: capitalize;
}

/* field_texto_columna_b: bajada de la columna ("CONEXION POTENTE Y
   ESTABLE..."). */
.componente_internet_3_columnas_b_box_subtitle {
  margin-top: 20px;
  color: #7B828C;
  text-align: center;
  font-family: Inter;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: var(--Gris, #7B828C);
text-align: center;

/* Subtitulo 20 */
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}

/* field_texto_columna_b_2: texto chico ("IDEAL PARA: ..."). */
.componente_internet_3_columnas_b_box_text {
  color: #7B828C;
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: var(--Gris, #7B828C);
text-align: center;

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

/* Los campos de texto con formato traen sus propios <p>: sin margenes extra
   que separen de mas los bloques de la columna. */
.componente_internet_3_columnas_b_box_title p,
.componente_internet_3_columnas_b_box_subtitle p,
.componente_internet_3_columnas_b_box_text p,
.componente_internet_3_columnas_b_subtitle p {
  margin: 0;
}

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

.componente_internet_3_columnas_b_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_b_dots .swiper-pagination-bullet-active {
  background: var(--iplan-pink, #fd006e);
}

.componente_internet_3_columnas_b_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_b_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_b_inner {
    padding: 36px 32px 32px;
  }

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

/* 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_b_inner {
    padding: 40px 62px;
  }

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

  /* !important: .componente_internet_3_columnas_b_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_b_grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: 14px;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .componente_internet_3_columnas_b_box {
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .componente_internet_3_columnas_b_box_top {
    padding: 30px 24px 20px;
  }

  .componente_internet_3_columnas_b_box_title {
    font-size: 40px;
  }

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

  .componente_internet_3_columnas_b_btn {
    width: auto;
  }
}

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