/* ============================================================
   MENSAJERÍA INSTANTÁNEA — template-mensajeria.css
   Reescritura completa. Prefijo de clases: mi-
   ============================================================ */


/* ── RESET ASTRA ──────────────────────────────────────────── */
/* Elimina restricciones de ancho y padding del theme Astra   */
.page-template-template-mensajeria #page,
.page-template-template-mensajeria #content,
.page-template-template-mensajeria .site-content,
.page-template-template-mensajeria .ast-container,
.page-template-template-mensajeria #primary,
.page-template-template-mensajeria #main,
.page-template-template-mensajeria .entry-content,
.page-template-template-mensajeria .ast-article-single,
.page-template-template-mensajeria .ast-entry-content-wrap {
  padding:    0 !important;
  margin:     0 !important;
  max-width:  none !important;
  width:      100% !important;
}

/* Contenedor principal de la página */
.mi-pagina {
  width: 100%;
  overflow-x: hidden;
  background: #ffffff;
}


/* ════════════════════════════════════════════════════════════
   1. HERO — imagen de flujo completo, texto superpuesto
   ════════════════════════════════════════════════════════════ */
.mi-hero {
  position:  relative;
  width:     100vw;
  left:      50%;
  transform: translateX(-50%);
  overflow:  hidden;
  background: #1a52a8;
}

/* La imagen fluye naturalmente (sin crop) */
.mi-hero__foto {
  display:        block;
  width:          100%;
  line-height:    0;
  pointer-events: none;
}

.mi-hero__foto picture {
  display: block;
  width:   100%;
}

.mi-hero__foto picture img {
  display: block;
  width:   100%;
  height:  auto;
}

.mi-hero__foto::after { display: none; }

/* Capa de texto: superpuesta sobre la imagen */
.mi-hero__capa {
  position: absolute;
  inset:    0;
  z-index:  2;
  display:  flex;
  align-items: center;
}

.mi-hero__capa .andes-container {
  padding-top:    3.5rem;
  padding-bottom: 3.5rem;
}

.mi-hero__titulo {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size:   clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  color:       #ffffff;
  max-width:   640px;
  margin:      0 0 1.25rem;
}

.mi-hero__descripcion {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size:   clamp(0.9rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color:       #ffffff;
  max-width:   560px;
  margin:      0 0 2.5rem;
}

.mi-hero__descripcion strong { font-weight: 700; }

.mi-hero__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-lima, #afd81a);
  color:           #ffffff;
  font-family:     'Montserrat', sans-serif;
  font-weight:     600;
  font-size:       1.0625rem;
  border-radius:   20px;
  width:           248px;
  height:          38px;
  text-decoration: none;
  transition:      opacity var(--transicion, .3s ease);
}

.mi-hero__btn:hover { opacity: .85; color: #ffffff; }

@media (max-width: 768px) {
  /* Hero — layout apilado: imagen arriba, bloque de texto abajo con fondo azul */
  .mi-hero {
    display:        flex;
    flex-direction: column;
    width:          100% !important;
    left:           auto !important;
    transform:      none !important;
    padding-inline: 0    !important;  /* cancela global section {padding-inline:1rem} */
    overflow:       visible !important;
  }
  .mi-hero__foto {
    order: 1;
    width: 100%;
  }
  .mi-hero__capa {
    order:      2;
    position:   relative !important;
    inset:      auto     !important;
    background: #1a52a8;
    padding:    2rem 0 2.5rem;
    width:      100%;
  }
  .mi-hero__titulo      { font-size: clamp(1.2rem, 4.5vw, 1.75rem); max-width: none !important; }
  .mi-hero__descripcion { font-size: clamp(0.875rem, 2.5vw, 1rem); max-width: none !important; font-weight: 400; margin-bottom: 1.5rem; }
  .mi-hero__btn         { width: auto; padding-inline: 2rem; }
}


/* ════════════════════════════════════════════════════════════
   2. PAQUETES
   Fondo blanco. 2 columnas: cards | info+formulario
   ════════════════════════════════════════════════════════════ */
.mi-paquetes {
  padding:           5rem 0 4rem;
  background:        #ffffff;
  scroll-margin-top: var(--header-total, 130px);
}

/* Título — Montserrat SemiBold 32px #0d2666 centrado */
.mi-paquetes__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  600;
  font-size:    clamp(1.3rem, 2.5vw, 2rem);
  color:        #0d2666;
  text-align:   center;
  margin:       0 0 3rem;
}

/* Layout 2 columnas */
/* Figma 1633:2893 (frame-mensajería instantánea) → Group 162:
   · columna cards  (Group 161) → x 0      · ancho 414.44px
   · columna info   (Group 160) → x 594.22
   · separación real entre ambas = 179.78px ≈ 180px = 11.25rem
   Mismo aire que Correo Certificado (.correo-paquetes__layout).
   Antes: 3rem (48px) — las viñetas quedaban pegadas a las tarjetas. */
.mi-paquetes__layout {
  display:               grid;
  grid-template-columns: 420px 1fr;
  gap:                   11.25rem;
  align-items:           start;
}

/* Logo del producto */
.mi-paquetes__logo {
  display:   block;
  max-width: 100%;
  height:    auto;
  margin:    0 0 1.5rem 10px;
}

/* Grid de cards: 2 columnas — gap igual al de SMS */
.mi-cards-grid {
  display:               grid;
  grid-template-columns: repeat(2, 176px);
  gap:                   60px;
  justify-content:       start;
}

/* Tarjeta de paquete */
/* H09 — tarjetas igualadas al sistema de diseño de Correo (crece con contenido) */
.mi-card {
  display:         flex;
  flex-direction:  column;
  width:           176px;
  min-height:      208px;
  height:          auto;
  background:      var(--color-fondo-card, #f5f5f5);
  border-radius:   17px;
  overflow:        hidden;
  text-decoration: none;
  transition:      transform var(--transicion, .3s), box-shadow var(--transicion, .3s);
}

/* H09 — hover con sombra marcada, igual que .correo-card */
.mi-card:hover {
  transform:  translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Badge superior — gradiente lima/verde (igual que correo) */
.mi-card__badge {
  flex:            1;
  background:      linear-gradient(160deg, #c6e34f 0%, #8db520 100%);
  border-radius:   0 0 50% 50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  padding:         24px 16px 40px; /* igual que .correo-card__badge */
}

/* Número — Montserrat Bold 34px blanco */
.mi-card__num {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    2.125rem; /* 34px = .correo-card__numero */
  line-height:  1;
  color:        #ffffff;
}

/* Unidad — Montserrat Bold 11px blanco */
.mi-card__unit {
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.8125rem; /* 13px = .correo-card__unidad */
  line-height:    1.3;
  color:          #ffffff;
  text-align:     center;
  text-transform: uppercase;
}

/* Info inferior */
.mi-card__info {
  padding:         10px 8px 14px; /* igual que .correo-card__info */
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
}

/* Precio — Montserrat Bold 20px #0d2666 */
.mi-card__precio {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    1.5625rem; /* 25px = .correo-card__precio */
  color:        #0d2666;
  margin:       0;
}

/* Vigencia — Montserrat Bold 11px #0d2666 */
.mi-card__vig {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    0.75rem; /* 12px = .correo-card__vigencia */
  color:        #0d2666;
  text-align:   center;
  margin:       0;
}

/* Card centrada (última fila) */
.mi-card--centrada {
  grid-column:  1 / -1;
  justify-self: center;
}

/* Columna derecha */
.mi-paquetes__col-info {
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
  padding-top:    0.5rem;
}

/* Subtítulo — Poppins Medium 23px #0d2666 */
.mi-paquetes__subtitulo {
  font-family:  'Poppins', sans-serif;
  font-weight:  500;
  font-size:    clamp(1rem, 1.8vw, 1.4375rem);
  color:        #0d2666;
  margin:       0;
}

/* Lista de pasos — numerada con círculos lima */
.mi-paquetes__pasos {
  list-style:       none;
  counter-reset:    paso;
  margin:           0;
  padding:          0 0 0 2.75rem;
  display:          flex;
  flex-direction:   column;
  gap:              1rem;
}

.mi-paquetes__pasos li {
  counter-increment: paso;
  position:          relative;
  font-family:       'Poppins', sans-serif;
  font-weight:       400;
  font-size:         clamp(.85rem, 1.3vw, 1.0625rem);
  line-height:       1.45;
  color:             #000000;
}

.mi-paquetes__pasos li::before {
  content:          counter(paso);
  position:         absolute;
  left:             -2.75rem;
  top:              0;
  width:            28px;
  height:           28px;
  background:       var(--color-lima);
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-family:      'Montserrat', sans-serif;
  font-weight:      700;
  font-size:        .8rem;
  color:            #ffffff;
}

/* Formulario — bg #f5f5f5, radius 20px */
.mi-formulario {
  background:    var(--color-fondo-card, #f5f5f5);
  border-radius: 20px;
  padding:       2.25rem 2rem;
  max-width:     535px;
}

/* Título formulario — Poppins SemiBold 17px #0d2666 centrado */
.mi-formulario__titulo {
  font-family:  'Poppins', sans-serif;
  font-weight:  600;
  font-size:    1.0625rem;
  line-height:  1.5;
  color:        #0d2666;
  text-align:   center;
  margin:       0 0 1.25rem;
}

.mi-formulario__form {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

/* Campo — bg blanco, border #44535f, h 32px, radius 10px */
.mi-formulario__campo {
  background:    #ffffff;
  border:        1px solid #44535f;
  border-radius: 10px;
  height:        36px;
  padding:       0 1rem;
  font-family:   'Poppins', sans-serif;
  font-size:     .875rem;
  color:         #44535f;
  width:         100%;
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color var(--transicion, .3s);
}

.mi-formulario__campo:focus    { border-color: #0d2666; }
.mi-formulario__campo::placeholder { color: #44535f; opacity: .8; }

/* Checkbox autorización */
.mi-formulario__check {
  display:     flex;
  align-items: flex-start;
  gap:         0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size:   .75rem;
  color:       #44535f;
  line-height: 1.4;
  cursor:      pointer;
}

.mi-formulario__check input[type="checkbox"] {
  width:        20px;
  height:       20px;
  min-width:    20px;
  accent-color: #0d2666;
  cursor:       pointer;
  margin-top:   1px;
}

/* Botón Enviar — igualado a .correo-formulario__btn de Correo Certificado:
   alineado a la derecha, Poppins 600 13px, 109×36px, radius 18px.
   Antes: centrado, 14px, 119×34px, radius 20px. */
.mi-formulario__btn {
  align-self:      flex-end;
  background:      #0a3c83;
  color:           #ffffff;
  font-family:     'Poppins', sans-serif;
  font-weight:     600;
  font-size:       13px;
  line-height:     1;
  border:          none;
  border-radius:   18px;
  width:           109px;
  height:          36px;
  padding:         0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      opacity .2s ease;
}

.mi-formulario__btn:hover,
.mi-formulario__btn:focus { opacity: .88; }

/* Responsive paquetes */
@media (max-width: 1100px) {
  .mi-paquetes__layout { grid-template-columns: 370px 1fr; gap: 5rem; }
}
@media (max-width: 900px) {
  .mi-paquetes__layout        { grid-template-columns: 1fr; gap: 2rem; }
  .mi-cards-grid              { grid-template-columns: repeat(3, 1fr); gap: 45px; max-width: 580px; }
  .mi-card, .mi-card--centrada { width: 100%; }
}
@media (max-width: 560px) {
  .mi-cards-grid  { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: none; }
  .mi-formulario  { padding: 1.5rem 1.25rem; }
}


/* ════════════════════════════════════════════════════════════
   3. CONTEXTO / CARRUSEL
   Fondo blanco + card azul redondeada + Swiper
   ════════════════════════════════════════════════════════════ */
.mi-contexto {
  padding:    4rem 0;
  background: #ffffff;
}

/* Card azul con esquinas redondeadas + GIF animado de fondo */
.mi-contexto__card {
  position:         relative;
  background-color: #0e2666;
  background-image: var(--mi-ctx-fondo, linear-gradient(135deg, #0e2666 0%, #336198 55%, #4f92c8 100%));
  background-size:   cover;
  background-position: center;
  border-radius: 20px;
  padding:       3.5rem 2rem 3rem;
  overflow:      hidden;
}

/* Overlay azul semitransparente sobre el GIF para que el texto sea legible */
.mi-contexto__card::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(135deg, rgba(14,38,102,0.80) 0%, rgba(51,97,152,0.70) 55%, rgba(79,146,200,0.60) 100%);
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.mi-contexto__titulo,
.mi-contexto__swiper {
  position: relative;
  z-index:  1;
}

/* Cabecera: ícono + título */
.mi-contexto__header {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   2.5rem;
}

.mi-contexto__titulo-grupo {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

/* Logo Andes_Check — esquina superior derecha del header de la card */
.mi-contexto__andes-check {
  flex-shrink:   0;
  width:         240px;
  height:        auto;
  object-fit:    contain;
  border-radius: 12px;
  background:    #ffffff;
}

@media (max-width: 1024px) {
  .mi-contexto__andes-check { width: 180px; }
}

@media (max-width: 600px) {
  .mi-contexto__andes-check { display: none; }
}

.mi-contexto__icono {
  flex-shrink:  0;
  width:        80px;
  height:       auto;
  object-fit:   contain;
  border-radius: 14px;
}

/* Título — Montserrat SemiBold 45px blanco */
.mi-contexto__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  600;
  font-size:    clamp(1.5rem, 3.5vw, 2.8125rem);
  color:        #ffffff;
  margin:       0;
  line-height:  1.2;
}

/* Wrapper carrusel + flechas */
.mi-contexto__carrusel-wrap {
  position:    relative;
  z-index:     1;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

/* Swiper — ocupa todo el espacio entre las flechas */
.mi-contexto__swiper {
  flex:    1;
  min-width: 0;
  width:   100% !important;
}

/* Flechas — usan las imágenes Flecha_Izquierda.png / Flecha_Derecha.png */
.mi-ctx-prev,
.mi-ctx-next {
  flex-shrink:  0;
  width:        44px;
  height:       44px;
  background:   none;
  border:       none;
  padding:      0;
  cursor:       pointer;
  transition:   opacity var(--transicion, .3s);
}

.mi-ctx-prev img,
.mi-ctx-next img {
  display:       block;
  width:         44px;
  height:        44px;
  object-fit:    contain;
  border-radius: 50%;
}

.mi-ctx-prev:hover,
.mi-ctx-next:hover { opacity: 0.80; }

/* Slide: tarjeta blanca */
.mi-ctx-item {
  background:     rgba(255,255,255,.96);
  border-radius:  20px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.875rem;
  padding:        1.125rem;
  height:         100%;
  opacity:        0.65;
  transition:     opacity .3s, transform .3s;
}

/* Slide activo — eco-ctx-active es gestionada exclusivamente por el JS custom,
   Swiper nunca la toca, garantizando que el resaltado viaje con el slide real */
.eco-ctx-active .mi-ctx-item {
  opacity:   1;
  transform: scale(1.02);
}

.mi-ctx-item__img img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: 12px;
  object-fit:    cover;
}

/* Título slide — Montserrat SemiBold 13-15px */
.mi-ctx-item__titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:   .875rem;
  line-height: 1.3;
  color:       #000000;
  text-align:  center;
  margin:      0;
}

/* Texto slide — Montserrat Regular 12-15px */
.mi-ctx-item__texto {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size:   .8125rem;
  line-height: 1.5;
  color:       #000000;
  text-align:  center;
  margin:      0;
}

.eco-ctx-active .mi-ctx-item .mi-ctx-item__titulo,
.eco-ctx-active .mi-ctx-item .mi-ctx-item__texto { font-size: .9375rem; }

/* Responsive contexto — estilos legados (swiper) */
@media (max-width: 1024px) {
  .mi-contexto__titulo { font-size: 2rem; }
  .mi-contexto__icono  { width: 60px; }
}
@media (max-width: 600px) {
  .mi-contexto__titulo  { font-size: 1.4rem; }
  .mi-contexto__icono   { width: 48px; }
}

/* ── Tabs de contexto — Figma node 1633:3043 ──────────────── */
.mi-ctx-tabs {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.625rem;
  padding:         0 0 2rem;
  justify-content: flex-start;
}

.mi-ctx-tab {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.5rem 1.25rem;
  border:          2px solid rgba(255, 255, 255, 0.25);
  border-radius:   30px;
  background:      rgba(255, 255, 255, 0.08);
  color:           rgba(255, 255, 255, 0.75);
  font-family:     'Montserrat', sans-serif;
  font-weight:     600;
  font-size:       clamp(.75rem, 1.1vw, .9375rem);
  cursor:          pointer;
  transition:      background var(--transicion, .3s),
                   border-color var(--transicion, .3s),
                   color var(--transicion, .3s);
}

.mi-ctx-tab:hover {
  background:   rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.55);
  color:        #ffffff;
}

.mi-ctx-tab--activo {
  background:   rgba(175, 216, 26, 0.18);
  border-color: var(--color-lima, #afd81a);
  color:        var(--color-lima, #afd81a);
}

.mi-ctx-tab--activo:hover {
  background:   rgba(175, 216, 26, 0.28);
}

.mi-ctx-tab__icono {
  flex-shrink: 0;
  width:       26px;
  height:      26px;
  object-fit:  contain;
}

/* ── Paneles ── */
.mi-ctx-paneles {
  position: relative;
  z-index:  1;
}

.mi-ctx-panel {
  display:     flex;
  gap:         3rem;
  align-items: center;
}

/* hidden + display: none al mismo tiempo */
.mi-ctx-panel[hidden] { display: none; }

.mi-ctx-panel__picture {
  flex:       0 0 auto;
  width:      44%;
  max-width:  480px;
}

.mi-ctx-panel__picture img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: 16px;
  object-fit:    cover;
}

.mi-ctx-panel__info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.mi-ctx-panel__logo {
  width:       52px;
  height:      52px;
  object-fit:  contain;
  flex-shrink: 0;
}

.mi-ctx-panel__titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size:   clamp(.9rem, 1.4vw, 1.125rem);
  color:       #ffffff;
  margin:      0;
  line-height: 1.3;
  text-transform: uppercase;
}

.mi-ctx-panel__texto {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size:   clamp(.875rem, 1.15vw, 1rem);
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.88);
  margin:      0;
}

/* Responsive tabs + paneles */
@media (max-width: 1024px) {
  .mi-ctx-panel { gap: 2rem; }
  .mi-ctx-panel__picture { width: 48%; }
}

@media (max-width: 768px) {
  .mi-ctx-panel {
    flex-direction: column;
    gap:            1.5rem;
  }
  .mi-ctx-panel__picture {
    width:     100%;
    max-width: 100%;
  }
  .mi-ctx-tab__label { font-size: .75rem; }
}

@media (max-width: 480px) {
  .mi-ctx-tabs { gap: .5rem; }
  .mi-ctx-tab  { padding: .4rem .9rem; }
  .mi-ctx-tab__icono { width: 20px; height: 20px; }
}


/* ════════════════════════════════════════════════════════════
   4. BENEFICIOS
   Full-width. Izquierda: blanco + texto. Derecha: gradiente + 4 cards.
   ════════════════════════════════════════════════════════════ */
.mi-beneficios {
  width:    100%;
  overflow: visible;
}

/* Grid 2 col full-width — escape de contenedor Astra */
.mi-beneficios__cols {
  display:               grid;
  grid-template-columns: 1fr 46%;
  width:                 100vw;
  position:              relative;
  left:                  50%;
  transform:             translateX(-50%);
}

/* Columna izquierda — blanca */
.mi-beneficios__texto {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            1.5rem;
  background:     #ffffff;
  /* Alinea con el borde izquierdo de .andes-container (misma card de arriba) */
  padding: 4rem 3rem 4rem max(2rem, calc(50vw - 600px + 2rem));
}

@media (min-width: 1440px) {
  .mi-beneficios__texto {
    padding-left: calc(50vw - 660px + 2rem);
  }
}

/* Título — Montserrat SemiBold 32px #2d353c */
.mi-beneficios__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  600;
  font-size:    clamp(1.3rem, 2.2vw, 2rem);
  line-height:  1.3;
  color:        var(--color-texto-oscuro, #2d353c);
  max-width:    520px;
  margin:       0;
}

/* Lista — Poppins Light 20px */
.mi-beneficios__lista {
  list-style:     disc;
  padding-left:   1.875rem;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.mi-beneficios__lista li {
  font-family:  'Poppins', sans-serif;
  font-weight:  300;
  font-size:    clamp(.95rem, 1.4vw, 1.25rem);
  line-height:  1.5;
  color:        var(--color-texto-oscuro, #2d353c);
}

/* Botón CTA — igual que hero */
.mi-beneficios__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-lima, #afd81a);
  color:           #ffffff;
  font-family:     'Montserrat', sans-serif;
  font-weight:     600;
  font-size:       1.0625rem;
  border-radius:   20px;
  width:           248px;
  height:          38px;
  text-decoration: none;
  transition:      opacity var(--transicion, .3s);
  align-self:      flex-start;
}

.mi-beneficios__btn:hover { opacity: .85; color: #ffffff; }

/* Columna derecha — imagen fondo (fondo.png) + gradiente azul fallback + cards con scroll */
.mi-beneficios__tarjetas {
  background-color:      #2d5a93;
  background-image:      linear-gradient(to bottom, rgba(45,90,147,0.92), rgba(117,197,234,0.88));
  background-size:       cover;
  background-position:   center;
  background-repeat:     no-repeat;
  /* fondo.png se inyecta como background-image desde el PHP inline style */
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   50px 55px;
  padding:               1.25rem;
  padding-bottom:        0;        /* el peek de la siguiente fila asoma sin padding inferior */
  align-content:         start;
  align-items:           start;
  height:                480px;    /* ~3 filas visibles + peek de la siguiente */
  overflow-y:            auto;
  scrollbar-width:       thin;
  scrollbar-color:       rgba(255,255,255,.4) transparent;
}

.mi-beneficios__tarjetas::-webkit-scrollbar        { width: 5px; }
.mi-beneficios__tarjetas::-webkit-scrollbar-track  { background: transparent; }
.mi-beneficios__tarjetas::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.4); border-radius: 4px; }

/* Tarjeta de beneficio — bg blanco, border #2d353c 0.9px, radius/gaps igual a Figma nodo 3984:11056 */
.mi-ben-card {
  background:     #ffffff;
  border:         0.9px solid #2d353c;
  border-radius:  17px;
  padding:        1.125rem;
  display:        flex;
  flex-direction: column;
  gap:            22px;
}

.mi-ben-card__header {
  display:     flex;
  align-items: flex-start;
  gap:         32px;
}

.mi-ben-card__header img {
  display:     block;
  flex-shrink: 0;
  width:       56px;
  height:      56px;
  object-fit:  contain;
}

/* Título tarjeta — Montserrat Bold 13px negro */
.mi-ben-card__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    0.8125rem;
  line-height:  1.3;
  color:        #000000;
  margin:       0;
}

/* Lista — Poppins Light 12px negro con check */
.mi-ben-card__lista {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.mi-ben-card__lista li {
  position:     relative;
  font-family:  'Poppins', sans-serif;
  font-weight:  300;
  font-size:    0.75rem;
  line-height:  1.4;
  color:        #000000;
  padding-left: 1.25rem;
}

.mi-ben-card__lista li::before {
  content:             '';
  position:            absolute;
  left:                0;
  top:                 0.05em;
  width:               16px;
  height:              16px;
  background-image:    url('../assets/images/mensajeria/pagina-mensajeria-instantanea/seccion-beneficios/Mask%20group.png');
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center;
  display:             inline-block;
}

/* Responsive beneficios */
@media (max-width: 1200px) {
  .mi-beneficios__cols { grid-template-columns: 54% 46%; }
}
@media (max-width: 900px) {
  .mi-beneficios__cols {
    grid-template-columns: 1fr;
    width:     100%;
    left:      auto;
    transform: none;
  }
  .mi-beneficios__texto    { padding: 3rem 2rem; }
  .mi-beneficios__tarjetas { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 1rem; padding-bottom: 0; height: 380px; }
}
@media (max-width: 540px) {
  .mi-beneficios__tarjetas { grid-template-columns: 1fr; gap: 20px; height: 400px; }
}


/* ════════════════════════════════════════════════════════════
   5. ECOSISTEMA
   Fondo blanco + título + ventana redondeada (tabs + card)
   ════════════════════════════════════════════════════════════ */
.mi-ecosistema {
  padding:    5rem 0 4rem;
  background: #ffffff;
}

/* Título — Montserrat SemiBold 32px #0d2666 centrado */
.mi-ecosistema__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  600;
  font-size:    clamp(1.3rem, 2.2vw, 2rem);
  color:        #0d2666;
  text-align:   center;
  margin:       0 0 2.5rem;
}

/* Ventana — transparente, pestañas flotantes sobre la foto, igual que SMS */
.mi-ecosistema__ventana {
  background:    transparent;
  border-radius: 20px;
  overflow:      hidden;
  box-shadow:    0 4px 20px rgba(14,38,102,.12);
  position:      relative;
}

/* ── Barra de tabs — píldora blanca flotante centrada sobre la foto ── */
.mi-eco-tabs {
  position:        absolute;
  top:             1rem;
  left:            50%;
  right:           auto;
  transform:       translateX(-50%);
  z-index:         10;
  display:         flex;
  flex-wrap:       nowrap;
  gap:             0.5rem;
  padding:         0.5rem 1rem;
  background:      #ffffff;
  border-radius:   30px;
  box-shadow:      0 2px 8px rgba(0,0,0,.15);
  width:           fit-content;
  max-width:       calc(100% - 3rem);
  overflow-x:      auto;
  scrollbar-width: none;
}

.mi-eco-tab {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.4rem 1rem;
  border-radius:   30px;
  background:      #ffffff;
  font-family:     'Montserrat', sans-serif;
  font-weight:     600;
  font-size:       .75rem;
  color:           #000000;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--transicion, .3s), color var(--transicion, .3s);
}

.mi-eco-tab:hover        { background: #eef3fb; color: #0d2666; }
.mi-eco-tab--activo      { background: var(--color-lima, #afd81a); color: #ffffff; }
.mi-eco-tab--activo:hover{ background: #9cc318; color: #ffffff; }

/* ── Cuerpo de la ventana: foto + texto — alto igual a SMS
   para que object-fit:cover recorte a los lados y no arriba/abajo ── */
.mi-eco-cuerpo {
  position:   relative;
  min-height: 700px;
  overflow:   hidden;
  display:    flex;
  align-items: center;
  background: #0e2666;       /* fallback si imagen no carga */
}

/* Foto de fondo — lado derecho */
.mi-eco-cuerpo__foto {
  position:          absolute;
  inset:             0;
  width:             100%;
  height:            100%;
  object-fit:        cover;
  object-position:   right center;
  display:           block;
  z-index:           0;
}

/* Bloque de texto — encima de la imagen (sin overlay azul, igual que SMS) */
.mi-eco-cuerpo__info {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  padding:        3.5rem 3rem;
  max-width:      760px;
}

/* Nombre del servicio — Montserrat SemiBold 22px blanco, igual que SMS */
.mi-eco-cuerpo__nombre {
  font-family:    'Montserrat', sans-serif;
  font-weight:    600;
  font-size:      22px;
  line-height:    1;
  color:          #ffffff;
  margin:         0;
  text-transform: uppercase;
}

/* Descripción — Poppins Regular 19px blanco, igual que SMS */
.mi-eco-cuerpo__texto {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size:   19px;
  line-height: 28.5px;
  color:       #ffffff;
  margin:      0;
  max-width:   702px;
}

/* Botón "Conocer más" — #afd81a, 199×36px, radius 20px */
.mi-eco-cuerpo__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-lima, #afd81a);
  color:           #ffffff;
  font-family:     'Montserrat', sans-serif;
  font-weight:     600;
  font-size:       1.0625rem;
  border-radius:   20px;
  width:           199px;
  height:          36px;
  text-decoration: none;
  align-self:      flex-start;
  transition:      opacity var(--transicion, .3s);
}

.mi-eco-cuerpo__btn:hover { opacity: .85; color: #ffffff; }

/* Logo blanco — esquina inferior derecha */
.mi-eco-cuerpo__logo {
  position:   absolute;
  bottom:     2rem;
  right:      2.5rem;
  z-index:    3;
  width:      195px;
  height:     auto;
  display:    block;
  background: transparent;
}

/* Responsive ecosistema — igual a SMS */
@media (max-width: 1024px) {
  .mi-eco-cuerpo         { min-height: 400px; }
  .mi-eco-cuerpo__info   { padding: 140px 0 0 40px; }
  .mi-eco-cuerpo__nombre { font-size: 18px; }
  .mi-eco-cuerpo__texto  { font-size: 15px; }
  .mi-eco-cuerpo__logo   { width: 140px; bottom: 1rem; right: 1rem; }
}
@media (max-width: 480px) {
  .mi-eco-tabs           { gap: .3rem; padding: .75rem 1rem; }
  .mi-eco-tab            { font-size: .6875rem; padding: .35rem .75rem; }
  .mi-eco-cuerpo         { min-height: 480px; }
  .mi-eco-cuerpo__info   { padding: 80px 1rem 0 1.5rem; }
  .mi-eco-cuerpo__nombre { font-size: 14px; }
  .mi-eco-cuerpo__texto  { font-size: 12px; }
  .mi-eco-cuerpo__logo   { width: 120px; bottom: 1rem; right: 1rem; }
}


/* ════════════════════════════════════════════════════════════
   6. NUESTROS CLIENTES
   Fondo blanco. Título centrado + imagen logos.
   ════════════════════════════════════════════════════════════ */
.mi-clientes {
  padding:    4rem 0 5rem;
  background: #ffffff;
}

/* Título — Montserrat Bold 32px #0d2666 centrado */
.mi-clientes__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    clamp(1.3rem, 2.2vw, 2rem);
  color:        #0d2666;
  text-align:   center;
  margin:       0 0 2.5rem;
}

/* Imagen de logos centrada */
.mi-clientes__logos {
  display:         flex;
  justify-content: center;
}

.mi-clientes__logos img {
  display:   block;
  max-width: 100%;
  height:    auto;
}