/* ============================================================
   BUZÓN CERTIFICADO — template-buzon-certificado.css
   Prefijo de clases: bc-
   ============================================================ */


/* ── RESET ASTRA ──────────────────────────────────────────── */
.page-template-template-buzon-certificado #page,
.page-template-template-buzon-certificado #content,
.page-template-template-buzon-certificado .site-content,
.page-template-template-buzon-certificado .ast-container,
.page-template-template-buzon-certificado #primary,
.page-template-template-buzon-certificado #main,
.page-template-template-buzon-certificado .entry-content,
.page-template-template-buzon-certificado .ast-article-single,
.page-template-template-buzon-certificado .ast-entry-content-wrap {
  padding:    0 !important;
  margin:     0 !important;
  max-width:  none !important;
  width:      100% !important;
}

.bc-pagina {
  width: 100%;
  overflow-x: hidden;
  background: #ffffff;
}


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

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

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

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

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

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

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

.bc-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;
}

.bc-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;
}

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

.bc-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);
}

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

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


/* ════════════════════════════════════════════════════════════
   2. PAQUETES
   ════════════════════════════════════════════════════════════ */
.bc-paquetes {
  padding:          5rem 0 4rem;
  background:       #ffffff;
  scroll-margin-top: var(--header-total, 130px); /* compensa header fijo al navegar con ancla */
}

.bc-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;
}

/* H05 — bloque de 2 columnas centrado en el viewport.
   Antes: columnas 420px 1fr (la col. derecha 1fr absorbía todo el
   espacio sobrante y desplazaba el bloque hacia la izquierda, con un
   gutter central desproporcionado). Ahora ambas columnas tienen ancho
   de contenido y el par se centra dentro del contenedor. */
/* Separación entre columnas tomada de Figma 1633:2893 → Group 162:
   columna cards (ancho 414.44px, x 0) vs columna info (x 594.22)
   = 179.78px ≈ 180px = 11.25rem. Mismo aire que Correo Certificado.
   Antes: 4rem (64px).
   Col. izquierda a 412px = ancho real de .bc-cards-grid (2×176 + 60 de gap);
   con 420px el total (420+180+535=1135) rozaba el ancho útil del
   contenedor (1200 − 2×2rem = 1136px) y podía desbordar. */
.bc-paquetes__layout {
  display:               grid;
  grid-template-columns: 412px 535px;
  gap:                   11.25rem;
  align-items:           start;
  justify-content:       center;
}

.bc-paquetes__logo {
  display:   block;
  max-width: 100%;
  height:    auto;
  margin:    0 0 1.5rem 10px;
  object-fit: contain;
}

.bc-cards-grid {
  display:               grid;
  grid-template-columns: repeat(2, 176px);
  gap:                   60px;
  justify-content:       start;
}

.bc-card {
  display:         flex;
  flex-direction:  column;
  width:           176px;
  height:          208px;
  background:      var(--color-fondo-card, #f5f5f5);
  border-radius:   16px;
  overflow:        hidden;
  text-decoration: none;
  transition:      transform var(--transicion, .3s), box-shadow var(--transicion, .3s);
}

/* H04 — hover consistente con las tarjetas de Correo (sombra marcada) */
.bc-card:hover {
  transform:  translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.bc-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:         0.75rem 0.5rem 1.75rem;
}

/* H04 — tipografía consistente con las tarjetas de Correo */
.bc-card__num {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    2.125rem; /* 34px, igual que .correo-card__numero */
  line-height:  1;
  color:        #ffffff;
}

.bc-card__unit {
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.8125rem; /* 13px, igual que .correo-card__unidad */
  line-height:    1.3;
  color:          #ffffff;
  text-align:     center;
  text-transform: uppercase;
}

.bc-card__info {
  padding:         0.6rem 0.5rem 0.75rem;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             2px;
}

.bc-card__precio {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    1.5625rem; /* 25px, igual que .correo-card__precio */
  color:        #0d2666;
  margin:       0;
}

.bc-card__vig {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    0.75rem; /* 12px, igual que .correo-card__vigencia */
  color:        #0d2666;
  text-align:   center;
  margin:       0;
}

.bc-card--centrada {
  grid-column:  1 / -1;
  justify-self: center;
}

.bc-paquetes__col-info {
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
  padding-top:    0.5rem;
}

.bc-paquetes__subtitulo {
  font-family:  'Poppins', sans-serif;
  font-weight:  500;
  font-size:    clamp(1rem, 1.8vw, 1.4375rem);
  color:        #0d2666;
  margin:       0;
}

.bc-paquetes__pasos {
  list-style:       none;
  counter-reset:    paso;
  margin:           0;
  padding:          0 0 0 2.75rem;
  display:          flex;
  flex-direction:   column;
  gap:              1rem;
}

.bc-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;
}

.bc-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;
}

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

.bc-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;
}

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

.bc-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);
}

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

.bc-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;
}

.bc-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. */
.bc-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;
}

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

@media (max-width: 1100px) {
  .bc-paquetes__layout { grid-template-columns: 370px 460px; gap: 5rem; } /* H05 — sigue centrado por justify-content */
}
@media (max-width: 900px) {
  .bc-paquetes__layout        { grid-template-columns: 1fr; gap: 2rem; }
  .bc-cards-grid              { grid-template-columns: repeat(3, 1fr); gap: 45px; max-width: 580px; }
  .bc-card, .bc-card--centrada { width: 100%; }
}
@media (max-width: 768px) {
  .bc-paquetes__titulo { font-size: calc(2rem * 0.75); }
  .bc-paquetes__subtitulo { font-size: calc(1.4375rem * 0.75); }
}
@media (max-width: 560px) {
  .bc-cards-grid  { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: none; }
  .bc-formulario  { padding: 1.5rem 1.25rem; }
}
@media (max-width: 375px) {
  .bc-paquetes__titulo { font-size: calc(2rem * 0.55); }
  .bc-paquetes__subtitulo { font-size: calc(1.4375rem * 0.55); }
}


/* ════════════════════════════════════════════════════════════
   3. CONTEXTO / CARRUSEL
   ════════════════════════════════════════════════════════════ */
.bc-contexto {
  padding:    4rem 0;
  background: #ffffff;
}

.bc-contexto__card {
  position:            relative;
  background-color:    #64b7df;
  background-image:    var(--bc-ctx-fondo, none);
  background-size:     cover;
  background-position: center;
  border-radius:       20px;
  padding:             3.5rem 2rem 3rem;
  overflow:            hidden;
}

.bc-contexto__card::before {
  display: none;
}

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

.bc-contexto__header {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   2.5rem;
}

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

.bc-contexto__andes-check {
  flex-shrink:   0;
  width:         240px;
  height:        auto;
  object-fit:    contain;
  border-radius: 12px;
  background:    #ffffff;
}

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

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

.bc-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;
}

.bc-contexto__carrusel-wrap {
  position:    relative;
  z-index:     1;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.bc-contexto__swiper {
  flex:      1;
  min-width: 0;
  width:     100% !important;
}

.bc-ctx-prev,
.bc-ctx-next {
  flex-shrink:  0;
  width:        44px;
  height:       44px;
  background:   none;
  border:       none;
  padding:      0;
  cursor:       pointer;
  transition:   opacity var(--transicion, .3s);
}

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

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

.bc-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.5rem 1.125rem;
  height:         100%;
  opacity:        0.65;
  transition:     opacity .3s, transform .3s;
}

.bc-ctx-item--central {
  opacity:   1;
  transform: scale(1.02);
}

.bc-ctx-item.swiper-slide-active { opacity: 1; }

.bc-ctx-item__num {
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--color-lima, #afd81a);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       2.5rem;
  color:           #ffffff;
  flex-shrink:     0;
}

.bc-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;
}

.bc-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;
}

.bc-ctx-item--central .bc-ctx-item__titulo,
.bc-ctx-item--central .bc-ctx-item__texto { font-size: .9375rem; }

@media (max-width: 1024px) {
  .bc-contexto__titulo { font-size: 2rem; }
  .bc-contexto__icono  { width: 60px; }
}
@media (max-width: 768px) {
  .bc-contexto__titulo { font-size: calc(2.8125rem * 0.75); }
  .bc-contexto__icono  { width: 60px; }
}
@media (max-width: 600px) {
  .bc-contexto__titulo  { font-size: 1.4rem; }
  .bc-contexto__icono   { width: 48px; }
}
@media (max-width: 375px) {
  .bc-contexto__titulo { font-size: calc(2.8125rem * 0.55); }
}


/* ════════════════════════════════════════════════════════════
   4. BENEFICIOS
   ════════════════════════════════════════════════════════════ */
.bc-beneficios {
  width:            100%;
  background-color: #64b7df;
  padding:          56px 0;
  overflow:         hidden;
}

.bc-beneficios__cols {
  display:               grid;
  grid-template-columns: 1fr 47%;
  width:                 100vw;
  position:              relative;
  left:                  50%;
  transform:             translateX(-50%);
  background:            #2f5e96;
}

.bc-beneficios__texto {
  position:        relative;
  z-index:         0;            /* crea stacking context: texto y contenido encima de decos */
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             1.25rem;
  background:      transparent;
  padding:         2.5rem 3rem 2.5rem max(2rem, calc(50vw - 600px));
  overflow:        hidden;       /* recorta estrellas en el límite de la columna */
}

.bc-beneficios__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  600;
  font-size:    clamp(1.4rem, 2.2vw, 2rem);
  line-height:  1.25;
  color:        #ffffff;
  max-width:    480px;
  margin:       0;
}

.bc-beneficios__lista {
  list-style:     disc;
  padding-left:   1.5rem;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

.bc-beneficios__lista li {
  font-family:  'Poppins', sans-serif;
  font-weight:  300;
  font-size:    clamp(.9rem, 1.4vw, 1.25rem);
  line-height:  1.5;
  color:        #ffffff;
}

.bc-beneficios__lista li::marker {
  color: #bee420;
}

.bc-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;
}

.bc-beneficios__decos {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        -1;   /* detrás del texto, encima del fondo #2f5e96 */
  overflow:       visible;
}

.bc-deco {
  display:  block;
  position: absolute;
}

/*
 * Tamaño y posición reales del nodo Figma 1263:2019 (Beneficios, Buzón),
 * medidos desde la esquina inferior-derecha del panel de texto
 * (límite con la columna de tarjetas / fondo del panel).
 */

/* Estrella lima grande */
.bc-deco-1 { width: 179px; height: 183px; bottom: 93px; right: 18px; }
/* Cruz blanca mediana */
.bc-deco-2 { width: 104px; height: 141px; bottom: 275px; right: 10px; }
/* Cruz blanca pequeña */
.bc-deco-3 { width:  57px; height:  78px; bottom:  71px; right: 347px; }
/* Estrella lima mediana — asoma desde abajo */
.bc-deco-4 { width: 113px; height: 107px; bottom: -22px; right: 204px; }

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

/* Viewport de tarjetas — alto y gap igual a Figma nodo 1263:2019 (Beneficios, página Buzón) */
.bc-beneficios__tarjetas {
  background-color:      transparent;
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows:        auto;
  gap:                   36px 41px;
  padding:               1.25rem 1.25rem 1.25rem 0.75rem;
  align-content:         start;
  align-items:           start;
  height:                820px;
  overflow-y:            auto;
  scrollbar-width:       thin;
  scrollbar-color:       rgba(255,255,255,.4) transparent;
}

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

/* Radio/gaps igual a Figma nodo 3984:11056 */
.bc-ben-card {
  background:     #ffffff;
  border:         none;
  border-radius:  17px;
  padding:        1.125rem;
  display:        flex;
  flex-direction: column;
  gap:            22px;
  box-shadow:     0 1px 4px rgba(0,0,0,.06);
}

.bc-ben-card--centrada {
  grid-column: 1 / -1;
  max-width:   calc(50% - 20.5px);
  margin:      0 auto;
}

.bc-ben-card__header {
  display:     flex;
  align-items: center;
  gap:         32px;
}

.bc-ben-card__icono {
  flex-shrink: 0;
  width:       56px;
  height:      56px;
  display:     flex;
  align-items: center;
  justify-content: center;
}

.bc-ben-card__icono img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.bc-ben-card__titulo {
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    0.875rem;
  line-height:  1.3;
  color:        #000000;
  margin:       0;
}

.bc-ben-card__lista {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.bc-ben-card__lista li {
  position:     relative;
  font-family:  'Poppins', sans-serif;
  font-weight:  300;
  font-size:    0.8125rem;
  line-height:  1.45;
  color:        #000000;
  padding-left: 1.625rem;
}

.bc-ben-card__lista li::before {
  content:             '';
  position:            absolute;
  left:                0;
  top:                 0.1em;
  width:               18px;
  height:              18px;
  background-image:    url('../../../../wp-admin/images/BuzonCertificado/pagina-buzon-certi/ventana-beneficios/Mask%20group.png');
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center;
  display:             inline-block;
}

@media (max-width: 1200px) {
  .bc-beneficios__cols { grid-template-columns: 53% 47%; }
}
@media (max-width: 900px) {
  .bc-beneficios {
    padding: 32px 0;
  }
  .bc-beneficios__cols {
    grid-template-columns: 1fr;
    width:     100%;
    left:      auto;
    transform: none;
  }
  .bc-beneficios__texto    { padding: 2.5rem 2rem; }
  .bc-beneficios__tarjetas { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 1rem; padding-bottom: 0; height: 560px; }
}
@media (max-width: 768px) {
  .bc-beneficios__titulo   { font-size: calc(2rem * 0.75); }
  .bc-beneficios__lista li { font-size: calc(1.25rem * 0.8); }
  .bc-deco-1 { width: 116px; height: 119px; }
  .bc-deco-2 { width:  68px; height:  92px; }
  .bc-deco-3 { width:  37px; height:  51px; }
  .bc-deco-4 { width:  73px; height:  70px; }
}
@media (max-width: 540px) {
  .bc-beneficios__tarjetas { grid-template-columns: 1fr; gap: 20px; height: 460px; }
}
@media (max-width: 375px) {
  .bc-beneficios__titulo   { font-size: calc(2rem * 0.6); }
  .bc-beneficios__lista li { font-size: calc(1.25rem * 0.7); }
}


/* ════════════════════════════════════════════════════════════
   5. ECOSISTEMA
   ════════════════════════════════════════════════════════════ */
.bc-ecosistema {
  padding:    5rem 0 4rem;
  background: #ffffff;
}

.bc-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 */
.bc-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 ── */
.bc-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;
}

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

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

/* Alto igual a SMS para que object-fit:cover recorte a los lados y no arriba/abajo */
.bc-eco-cuerpo {
  position:    relative;
  min-height:  700px;
  overflow:    hidden;
  display:     flex;
  align-items: center;
  background:  #0e2666;
}

.bc-eco-cuerpo__foto {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: right center;
  display:         block;
  z-index:         0;
}

.bc-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 */
.bc-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 */
.bc-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;
}

.bc-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);
}

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

.bc-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) {
  .bc-eco-cuerpo       { min-height: 400px; }
  .bc-eco-cuerpo__info { padding: 140px 0 0 40px; }
  .bc-eco-cuerpo__nombre { font-size: 18px; }
  .bc-eco-cuerpo__texto  { font-size: 15px; }
  .bc-eco-cuerpo__logo   { width: 140px; bottom: 1rem; right: 1rem; }
}
@media (max-width: 768px) {
  .bc-ecosistema__titulo { font-size: calc(2rem * 0.75); }
}
@media (max-width: 600px) {
  .bc-eco-tabs           { gap: .3rem; padding: .75rem 1rem; }
  .bc-eco-tab            { font-size: .6875rem; padding: .35rem .75rem; }
}
@media (max-width: 480px) {
  .bc-eco-cuerpo         { min-height: 480px; }
  .bc-eco-cuerpo__info   { padding: 80px 1rem 0 1.5rem; }
  .bc-eco-cuerpo__nombre { font-size: 14px; }
  .bc-eco-cuerpo__texto  { font-size: 12px; }
  .bc-eco-cuerpo__logo   { width: 120px; bottom: 1rem; right: 1rem; }
}
@media (max-width: 375px) {
  .bc-ecosistema__titulo { font-size: calc(2rem * 0.55); }
}


/* ════════════════════════════════════════════════════════════
   6. NUESTROS CLIENTES
   ════════════════════════════════════════════════════════════ */
.bc-clientes {
  padding:    4rem 0 5rem;
  background: #ffffff;
}

.bc-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;
}

.bc-clientes__logos {
  display:         flex;
  justify-content: center;
}

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


/* ════════════════════════════════════════════════════════════
   OVERRIDES — fuerza estilos visuales clave contra Astra
   Usa el prefijo de plantilla para máxima especificidad
   ════════════════════════════════════════════════════════════ */

/* Hero: fondo, altura mínima y posicionamiento */
.page-template-template-buzon-certificado .bc-hero {
  background: #1a52a8 !important;
  width:      100vw   !important;
  position:   relative !important;
  left:       50%     !important;
  transform:  translateX(-50%) !important;
  overflow:   hidden  !important;
}
.page-template-template-buzon-certificado .bc-hero__capa {
  position:    absolute !important;
  inset:       0        !important;
  display:     flex     !important;
  align-items: center   !important;
}

/* Hero título — tamaño fijo para igualar otras páginas */
.page-template-template-buzon-certificado .bc-hero__titulo,
.page-template-template-buzon-certificado h1.bc-hero__titulo,
h1.bc-hero__titulo {
  font-weight:    700       !important;
  font-size:      35.2px    !important;
  text-transform: uppercase !important;
  line-height:    1.15      !important;
  color:          #ffffff   !important;
}

/* Responsive del hero: ver bloque "Responsive overrides" al final del archivo */

/* Hero descripción */
.page-template-template-buzon-certificado .bc-hero__descripcion {
  font-size:   16px        !important;
  font-family: 'Poppins', sans-serif !important;
  color:       #ffffff    !important;
  margin:      0 0 28px    !important;
}

/* Hero botón — verde lima con texto blanco */
.page-template-template-buzon-certificado .bc-hero__btn {
  display:          inline-flex !important;
  align-items:      center      !important;
  justify-content:  center      !important;
  background:       #afd81a     !important;
  color:            #ffffff     !important;
  text-decoration:  none        !important;
  border-bottom:    none        !important;
  box-shadow:       none        !important;
  border-radius:    20px        !important;
  width:            248px       !important;
  height:           38px        !important;
  font-family:      'Montserrat', sans-serif !important;
  font-weight:      600         !important;
  font-size:        1.0625rem   !important;
}

/* Cards de paquete — flex con badge verde y datos abajo */
/* H04 — tarjetas de Buzón igualadas al sistema de diseño de Correo
   (tamaños 34/13/25/12px, la tarjeta crece con el contenido, hover con sombra) */
.page-template-template-buzon-certificado .bc-card {
  display:          flex        !important;
  flex-direction:   column      !important;
  width:            176px       !important;
  min-height:       208px       !important;
  height:           auto        !important;
  background:       #f5f5f5     !important;
  border-radius:    17px        !important;
  overflow:         hidden      !important;
  text-decoration:  none        !important;
  color:            inherit     !important;
  border-bottom:    none        !important;
  box-shadow:       none        !important;
}
/* hover consistente con Correo — con !important para vencer el box-shadow:none del bloque */
.page-template-template-buzon-certificado .bc-card:hover {
  transform:  translateY(-8px)           !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.2) !important;
}
.page-template-template-buzon-certificado .bc-card__badge {
  flex:             1           !important;
  background:       linear-gradient(160deg, #c6e34f 0%, #8db520 100%) !important;
  border-radius:    0 0 50% 50% !important;
  display:          flex        !important;
  flex-direction:   column      !important;
  align-items:      center      !important;
  justify-content:  center      !important;
  gap:              4px         !important;
  padding:          24px 16px 40px !important;
}
.page-template-template-buzon-certificado .bc-card__num {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700   !important;
  font-size:   2.125rem !important; /* 34px = .correo-card__numero */
  color:       #ffffff !important;
}
.page-template-template-buzon-certificado .bc-card__unit {
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    700       !important;
  font-size:      0.8125rem !important; /* 13px = .correo-card__unidad */
  color:          #ffffff   !important;
  text-transform: uppercase !important;
  text-align:     center    !important;
}
.page-template-template-buzon-certificado .bc-card__info {
  padding:        10px 8px 14px !important;
  display:        flex          !important;
  flex-direction: column        !important;
  align-items:    center        !important;
  gap:            6px           !important;
}
.page-template-template-buzon-certificado .bc-card__precio {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700     !important;
  font-size:   1.5625rem !important; /* 25px = .correo-card__precio */
  color:       #0d2666 !important;
  margin:      0       !important;
}
.page-template-template-buzon-certificado .bc-card__vig {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700     !important;
  font-size:   0.75rem !important; /* 12px = .correo-card__vigencia */
  color:       #0d2666 !important;
  text-align:  center  !important;
  margin:      0       !important;
}

/* Beneficios CTA */
.page-template-template-buzon-certificado .bc-beneficios__btn {
  display:         inline-flex !important;
  align-items:     center      !important;
  justify-content: center      !important;
  background:      #afd81a     !important;
  color:           #ffffff     !important;
  text-decoration: none        !important;
  border-bottom:   none        !important;
  box-shadow:      none        !important;
  border-radius:   20px        !important;
  width:           248px       !important;
  height:          38px        !important;
  font-weight:     600         !important;
}

/* Ecosistema CTA */
.page-template-template-buzon-certificado .bc-eco-cuerpo__btn {
  display:         inline-flex !important;
  align-items:     center      !important;
  justify-content: center      !important;
  background:      #afd81a     !important;
  color:           #ffffff     !important;
  text-decoration: none        !important;
  border-bottom:   none        !important;
  box-shadow:      none        !important;
  border-radius:   20px        !important;
  font-weight:     600         !important;
}

/* ── Responsive overrides — neutralizan los !important del bloque anterior ── */

/* Cards: fluid en mobile */
@media (max-width: 900px) {
  .page-template-template-buzon-certificado .bc-card {
    width:      100%   !important;
    height:     auto   !important;
    min-height: 180px  !important;
  }
}

/* Hero: layout apilado en mobile/tablet
   Debe usar !important para vencer las reglas globales del override block */
@media (max-width: 768px) {
  .page-template-template-buzon-certificado .bc-hero {
    display:        flex        !important;
    flex-direction: column      !important;
    width:          100%        !important;
    left:           auto        !important;
    transform:      none        !important;
    overflow:       visible     !important;
    padding-inline: 0           !important;  /* cancela global section {padding-inline:1rem} */
  }
  .page-template-template-buzon-certificado .bc-hero__foto {
    order: 1 !important;
    width: 100% !important;
  }
  .page-template-template-buzon-certificado .bc-hero__capa {
    order:      2               !important;
    position:   relative        !important;
    inset:      auto            !important;
    background: #1a52a8         !important;
    padding:    2rem 0 2.5rem   !important;
    width:      100%            !important;
  }
  .page-template-template-buzon-certificado .bc-hero__titulo,
  .page-template-template-buzon-certificado h1.bc-hero__titulo,
  h1.bc-hero__titulo {
    font-size: clamp(1.2rem, 4.5vw, 1.75rem) !important;
    max-width: none                           !important;
  }
  .page-template-template-buzon-certificado .bc-hero__descripcion {
    font-size:     clamp(0.875rem, 2.5vw, 1rem) !important;
    max-width:     none                          !important;
    margin-bottom: 1.5rem                        !important;
  }
  .page-template-template-buzon-certificado .bc-hero__btn {
    width:          auto !important;
    padding-inline: 2rem !important;
  }
}