/* ============================================================
   CORREO ELECTRÓNICO CERTIFICADO
   Frame Figma: frame-correo
   Página: /correo-certificado/
   ============================================================ */

/* ── HERO ── */
.correo-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 0 !important;
}

.correo-hero__imagen {
  position: relative;
  width: 100%;
}

.correo-hero__imagen picture {
  display: block;
  width: 100%;
}

.correo-hero__imagen img {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(135deg, #336198, #0e2666);
}

.correo-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 53, 60, 0.18);
  z-index: 1;
}

.correo-hero__contenido {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0 !important;
  padding-inline: 2rem;
}

/* ── HERO ── */
.correo-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 0 !important;
}

.correo-hero__imagen {
  position: relative;
  width: 100%;
}

.correo-hero__imagen picture {
  display: block;
  width: 100%;
}

.correo-hero__imagen img {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(135deg, #336198, #0e2666);
}

.correo-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 53, 60, 0.18);
  z-index: 1;
}

.correo-hero__contenido {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0 !important;
  padding-inline: 2rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .correo-hero__imagen img {
    object-position: center top;
  }
}

@media (max-width: 480px) {
  .correo-hero__imagen img {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;
  }
}

.page-template-template-correo .andes-main-wrap {
  padding-top: 0 !important;
}

/* ── HERO TEXTO — Figma node 1653:3179 Group 163 ── */
.correo-hero__texto {
  max-width: 640px;
}

.correo-hero__titulo {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 35px;
  line-height: 52.5px;
  letter-spacing: 0;
  color: #ffffff;
  text-align: left;
  margin: 0 0 20px 0;
}

.correo-hero__subtitulo {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 28.5px;
  letter-spacing: 0;
  color: #ffffff;
  text-align: left;
  max-width: 493px;
  margin: 0 0 104px 0;
}

.correo-hero__subtitulo--negrita {
  font-weight: 600;
}

.correo-hero__acreditacion {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 28.5px;
  letter-spacing: 0;
  color: #ffffff;
  text-align: left;
  margin: 0 0 14px 0;
}

.correo-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  background: #afd81a;
  border-radius: 20px;
  width: 248px;
  height: 33px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.correo-hero__btn:hover,
.correo-hero__btn:focus {
  opacity: 0.88;
  color: #ffffff;
}

/* RESPONSIVE — Tablet 768px */
@media (max-width: 768px) {
  .correo-hero__titulo {
    font-size: 26px;
    line-height: 39px;
  }
  .correo-hero__subtitulo {
    font-size: 14px;
    line-height: 21px;
    max-width: 100%;
    margin-bottom: 78px;
  }
  .correo-hero__acreditacion {
    font-size: 14px;
    line-height: 21px;
  }
  .correo-hero__btn {
    font-size: 14px;
    width: 186px;
    height: 28px;
  }
}

/* RESPONSIVE — Mobile 375px */
/* ── SECCIÓN PAQUETES — Figma 1657:3289 / 1657:3287 / 1657:3233 ── */

.correo-paquetes {
  padding: 80px 0 60px;
  background: #ffffff;
  scroll-margin-top: var(--header-total, 130px); /* compensa header fijo al navegar con ancla */
}

/* Título sección — Montserrat 600, 32px, #0D2666, CENTER */
.correo-paquetes__titulo {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  color: #0d2666;
  text-align: center;
  letter-spacing: 0;
  margin: 0 0 50px 0;
}

/* Layout 2 columnas — izq 412px / der 1fr */
.correo-paquetes__layout {
  display: grid;
  grid-template-columns: 412px 1fr;
  gap: 12rem;
  align-items: start;
}

/* ─ COLUMNA IZQUIERDA ─ */
.correo-paquetes__logo {
  margin-bottom: 37px;
}
.correo-paquetes__logo img {
  width: 100%;
  max-width: 354px;
  height: auto;
}

/* Grid tarjetas: 2 columnas × 4 filas (7 cards) */
.correo-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.correo-card {
  background: #f5f5f5;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  min-height: 208px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* RESPONSIVE — Mobile 375px */
/* ── SECCIÓN PAQUETES — Figma 1657:3289 / 1657:3287 / 1657:3233 ── */

.correo-paquetes {
  padding: 80px 0 60px;
  background: #ffffff;
  scroll-margin-top: var(--header-total, 130px); /* compensa header fijo al navegar con ancla */
}

/* Título sección — Montserrat 600, 32px, #0D2666, CENTER */
.correo-paquetes__titulo {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  color: #0d2666;
  text-align: center;
  letter-spacing: 0;
  margin: 0 0 50px 0;
}

/* Layout 2 columnas — izq 412px / der 1fr */
.correo-paquetes__layout {
  display: grid;
  grid-template-columns: 412px 1fr;
  gap: 12rem;
  align-items: start;
}

/* ─ COLUMNA IZQUIERDA ─ */
.correo-paquetes__logo {
  margin-bottom: 37px;
}
.correo-paquetes__logo img {
  width: 100%;
  max-width: 354px;
  height: auto;
}

/* Grid tarjetas: 2 columnas × 4 filas (7 cards) */
.correo-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.correo-card {
  background: #f5f5f5;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  min-height: 208px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Badge superior con degradado lima */
.correo-card__badge {
  background: linear-gradient(135deg, #AFD81A 0%, #d4f05a 100%);
  border-radius: 0 0 50% 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
}

/* número grande — 34px Montserrat 700 blanco */
.correo-card__numero {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 700 !important;
  font-size: 34px;
  line-height: 1;
  color: #ffffff !important;
  letter-spacing: 0;
}

/* "CORREOS" — 13px Montserrat 700 blanco */
.correo-card__unidad {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 700 !important;
  font-size: 13px;
  line-height: 1;
  color: #ffffff !important;
  letter-spacing: 0;
}

/* Área inferior: precio + vigencia */
.correo-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 14px;
  gap: 6px;
}

/* Precio — 25px Montserrat 700 #0D2666 */
.correo-card__precio {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  color: #0d2666;
  text-align: center;
  margin: 0;
}

/* Vigencia — 12px Montserrat 700 #0D2666 */
.correo-card__vigencia {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: #0d2666;
  text-align: center;
  margin: 0;
}

/* 7ª tarjeta: centrada en su propia fila */
.correo-card--centrada {
  grid-column: 1 / -1;
  justify-self: center;
  width: 176px;
}

/* Enlace envolvente de card */
.correo-card-link {
  display: block;
  text-decoration: none;
}

@media (min-width: 1025px) {
  .correo-card-link:hover .correo-card {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 1024px) {
  .correo-card-link:hover .correo-card {
    transform: none;
    box-shadow: none;
  }
}

/* ─ COLUMNA DERECHA ─ */

/* Subtítulo — Poppins 500, 21px, #0D2666, LEFT */
.correo-paquetes__subtitulo {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 31.5px;
  color: #0d2666;
  text-align: left;
  margin: 0 0 32px 0;
}

/* Lista de pasos — Poppins 400, 17.7px, #000000 */
.correo-paquetes__pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-reset: paso;
}

.correo-paquetes__pasos li {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 17.7px;
  line-height: 26.6px;
  color: #000000;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  counter-increment: paso;
}

.correo-paquetes__pasos li::before {
  content: counter(paso);
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #c6e34f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  line-height: 1;
}

/* Formulario — bg #F5F5F5, radius 18px, 489×522px */
.correo-paquetes__formulario {
  background: #f5f5f5;
  border-radius: 18px;
  padding: 27px 28px 30px;
  max-width: 489px;
}

/* Título formulario — Poppins 600, 17px, #0D2666, CENTER */
.correo-formulario__titulo {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: #0d2666;
  text-align: center;
  margin: 0 0 20px 0;
}

.correo-formulario__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Campos — Poppins 400, 15.1px, #44535F, border #44535F, radius 9px */
.correo-formulario__campo {
  width: 100%;
  height: 29px;
  border: 0.91px solid #44535f;
  border-radius: 9px;
  background: #ffffff;
  padding: 0 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22.7px;
  color: #44535f;
  box-sizing: border-box;
  outline: none;
}

.correo-formulario__campo::placeholder {
  color: #44535f;
  opacity: 0.8;
}

.correo-formulario__campo:focus {
  border-color: #0d2666;
}

/* Autorización — Poppins 400, 11px, #44535F */
.correo-formulario__autorizo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 17px;
  color: #44535f;
  cursor: pointer;
}

.correo-formulario__autorizo input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: #0a3c83;
}

/* Botón enviar — Poppins 600, 13px, #FFFFFF, bg #0A3C83, 109×28px, radius 18px */
.correo-formulario__btn {
  align-self: flex-end;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: #ffffff;
  background: #0a3c83;
  border: none;
  border-radius: 18px;
  width: 109px;
  height: 36px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.correo-formulario__btn:hover,
.correo-formulario__btn:focus {
  opacity: 0.88;
}

/* ── RESPONSIVE PAQUETES — Tablet 768px ── */
@media (max-width: 768px) {
  .correo-paquetes__titulo {
    font-size: 24px;
    line-height: 29px;
  }
  .correo-paquetes__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .correo-cards__grid {
    gap: 45px;
    grid-template-columns: 1fr 1fr;
  }
  .correo-card__numero {
    font-size: 26px;
  }
  .correo-card__unidad {
    font-size: 10px;
  }
  .correo-card__precio {
    font-size: 19px;
    line-height: 23px;
  }
  .correo-card__vigencia {
    font-size: 9px;
  }
  .correo-paquetes__subtitulo {
    font-size: 16px;
    line-height: 24px;
  }
  .correo-paquetes__pasos li {
    font-size: 13px;
    line-height: 20px;
  }
  .correo-formulario__titulo {
    font-size: 13px;
    line-height: 20px;
  }
  .correo-formulario__campo {
    font-size: 12px;
  }
  .correo-paquetes__formulario {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .correo-hero {
    padding-inline: 0 !important;
    margin-top: 0 !important;
  }
  .correo-hero__imagen {
    min-height: 480px;
  }
  .correo-hero__contenido {
    padding-inline: 1.25rem;
  }
  .correo-hero__texto {
    max-width: 100%;
  }
  .correo-hero__titulo {
    font-size: 19px;
    line-height: 29px;
    text-align: left;
  }
  .correo-hero__subtitulo {
    font-size: 10px;
    line-height: 15px;
    text-align: left;
    max-width: 100%;
    margin-bottom: 57px;
  }
  .correo-hero__acreditacion {
    font-size: 10px;
    line-height: 15px;
    text-align: left;
  }
  .correo-hero__btn {
    font-size: 13px;
    min-height: 44px;
    width: auto;
    padding-inline: 1.5rem;
  }

  /* Paquetes — Mobile 375px */
  .correo-paquetes {
    padding: 48px 0 40px;
  }
  .correo-paquetes__titulo {
    font-size: 18px;
    line-height: 22px;
    text-align: left;
  }
  .correo-paquetes__layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .correo-cards__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .correo-card__badge {
    min-height: 80px;
  }
  .correo-card__numero {
    font-size: 19px;
  }
  .correo-card__unidad {
    font-size: 7px;
  }
  .correo-card__precio {
    font-size: 14px;
    line-height: 18px;
  }
  .correo-card__vigencia {
    font-size: 7px;
  }
  .correo-paquetes__subtitulo {
    font-size: 12px;
    line-height: 18px;
    text-align: left;
  }
  .correo-paquetes__pasos li {
    font-size: 10px;
    line-height: 15px;
  }
  .correo-formulario__titulo {
    font-size: 10px;
    line-height: 15px;
  }
  .correo-formulario__campo {
    font-size: 11px;
    height: 26px;
  }
  .correo-formulario__autorizo {
    font-size: 9px;
    line-height: 14px;
  }
  .correo-formulario__btn {
    font-size: 10px;
    width: 90px;
    height: 24px;
  }
  .correo-paquetes__formulario {
    padding: 20px 16px 24px;
  }
  .correo-paquetes__pasos {
    margin-bottom: 24px;
  }
}

/* ============================================================
   BENEFICIOS — Figma 1294:3729 | 1440×820px
   Nodo ítems: 1294:3740 (Frame 109) depth=4
   ============================================================ */

/* Sección — bg #3F79AC (Figma 1294:3729) */
.correo-beneficios {
  position: relative;
  background: #3f79ac;
  width: 100%;
  overflow: hidden;
  padding: 80px 0 20px 0;
}

/* Vectores decorativos — ocultos */
.correo-beneficios__vec {
  display: none !important;
}

/* 1294:3732 — Vector lima 1 · x=536 y=488 · 179×189px */
.correo-beneficios__vec--lima-1 {
  left: 37.2%;
  top: 59.5%;
  width: 179px;
  height: 189px;
  background: #bee420;
  border-radius: 47% 53% 62% 38% / 55% 45% 55% 45%;
}

/* 1294:3733 — Vector blanco pequeño · x=337 y=614 · 50×60px · rot 38.3° */
.correo-beneficios__vec--blanco-1 {
  left: 23.4%;
  top: 74.8%;
  width: 50px;
  height: 60px;
  background: #ffffff;
  border-radius: 35% 65% 40% 60%;
  transform: rotate(38.3deg);
  opacity: 0.85;
}

/* 1294:3734 — Vector blanco grande · x=630 y=347 · 93×115px · rot 38.3° */
.correo-beneficios__vec--blanco-2 {
  left: 43.7%;
  top: 42.3%;
  width: 93px;
  height: 115px;
  background: #ffffff;
  border-radius: 40% 60% 30% 70%;
  transform: rotate(38.3deg);
  opacity: 0.85;
}

/* 1294:3735 — Vector lima 2 · x=416 y=678 · 113×134px */
.correo-beneficios__vec--lima-2 {
  left: 28.9%;
  top: 82.7%;
  width: 113px;
  height: 134px;
  background: #bee420;
  border-radius: 35% 65% 55% 45%;
}

/* Layout 2 columnas — Desktop 1440px */
.correo-beneficios__cols {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 548px 1fr;
  gap: 80px;
  align-items: start;
}

/* ─── Columna izquierda ─── */

/* 1294:3737 — Montserrat SemiBold 600 · 32px · lh 39px · #FFFFFF */
.correo-beneficios__titulo {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  letter-spacing: 0;
  color: #ffffff;
  text-align: left;
  margin: 0 0 32px 0;
}

/* 1294:3738 — Poppins Light 300 · 20px · lh 30px · #FFFFFF */
.correo-beneficios__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 48px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.correo-beneficios__lista li {
  position: relative;
  padding-left: 1.4em;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
  text-align: left;
}

.correo-beneficios__lista li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 30px;
}

/* 1294:3748 — Montserrat SemiBold 600 · 18px · #FFF · 248×33px · bg #AFDA1A · radius 20px */
.correo-beneficios__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  background: #afda1a;
  border-radius: 20px;
  width: 248px;
  height: 33px;
  text-decoration: none;
  transition: opacity 0.5s ease-out;
}

.correo-beneficios__btn:hover,
.correo-beneficios__btn:focus {
  opacity: 0.88;
  color: #ffffff;
}

/* ─── Columna derecha: ítems de beneficio ───
   Figma 1294:3740 — grid 2 cols · scroll oculto */
.correo-beneficios__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-height: 820px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 2;
}

.correo-beneficios__items::-webkit-scrollbar {
  display: none;
}

/* Card beneficio — Figma Frame 104-107 (1294:3740 hijo 1-4)
   bg: #FFFFFF · border: 0.903px #2C353C · radius: 17.33px
   layout: flex col · padding: 18.06px */
.correo-beneficio-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
  border: 0.9px solid #2c353c;
  border-radius: 17.33px;
  padding: 18.06px;
}

/* Fila superior: ícono + título */
.correo-beneficio-item__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Ícono circular — Figma: 54×54px · fill #B8DB24 */
.correo-beneficio-item__icono-wrap {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.correo-beneficio-item__icono-wrap picture {
  display: contents;
}

.correo-beneficio-item__icono-wrap img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
}

/* Título — Figma: Montserrat weight:700 size:22.579px lh:27.524px color:#000000 */
.correo-beneficio-item__titulo {
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 700;
  font-size: 22.58px;
  line-height: 27.52px;
  color: #000000;
  letter-spacing: 0;
  margin: 0;
  text-align: left;
}

/* Lista de puntos — Poppins weight:300 size:18.063px lh:27.095px color:#000000 */
.correo-beneficio-item__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.correo-beneficio-item__lista li {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 18.06px;
  line-height: 27.1px;
  color: #000000;
  padding-left: 18px;
  position: relative;
}

.correo-beneficio-item__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: url('/wp-content/themes/astra-child/assets/images/correo/Maskgroup.webp') no-repeat center / contain;
}

/* ── RESPONSIVE — Tablet ≤1024px · 2 columnas · fontSize × 0.75 ── */
@media (max-width: 1024px) {
  .correo-beneficios {
    padding: 60px 0;
  }
  .correo-beneficios__cols {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .correo-beneficios__titulo {
    font-size: 24px;
    line-height: 29.25px;
  }
  .correo-beneficios__lista li {
    font-size: 15px;
    line-height: 22.5px;
  }
  .correo-beneficios__btn {
    font-size: 13.5px;
    width: 186px;
    height: 28px;
  }
  /* 2 columnas ×0.75 */
  .correo-beneficios__items {
    column-gap: 27px;
    row-gap: 20px;
    max-height: 615px;
  }
  .correo-beneficio-item {
    gap: 10px;
    padding: 13.55px;
    border-radius: 13px;
  }
  .correo-beneficio-item__icono-wrap {
    width: 40px;
    height: 40px;
  }
  .correo-beneficio-item__icono-wrap img {
    width: 40px;
    height: 40px;
  }
  .correo-beneficio-item__titulo {
    font-size: 16.94px;
    line-height: 20.64px;
  }
  .correo-beneficio-item__lista li {
    font-size: 13.55px;
    line-height: 20.33px;
  }
}

/* ── RESPONSIVE — Mobile ≤480px · 1 columna · fontSize × 0.55 ── */
@media (max-width: 480px) {
  .correo-beneficios {
    padding: 40px 0;
  }
  .correo-beneficios__cols {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-inline: 1rem;
  }
  .correo-beneficios__vec {
    display: none;
  }
  .correo-beneficios__titulo {
    font-size: 17.6px;
    line-height: 21.45px;
  }
  .correo-beneficios__lista li {
    font-size: 11px;
    line-height: 16.5px;
  }
  .correo-beneficios__btn {
    font-size: 9.9px;
    width: 136px;
    height: 25px;
  }
  /* 1 columna */
  .correo-beneficios__items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  .correo-beneficio-item {
    gap: 8px;
    padding: 9.93px;
    border-radius: 9.53px;
  }
  .correo-beneficio-item__icono-wrap {
    width: 30px;
    height: 30px;
  }
  .correo-beneficio-item__icono-wrap img {
    width: 30px;
    height: 30px;
  }
  .correo-beneficio-item__titulo {
    font-size: 12.42px;
    line-height: 15.14px;
  }
  .correo-beneficio-item__lista li {
    font-size: 9.93px;
    line-height: 14.91px;
  }
}

/* ─── Estrellas decorativas ─── */
.correo-beneficios__estrellas {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 1rem;
}

.correo-estrella {
  position: absolute;
  pointer-events: none;
}

.correo-estrella--1 {
  bottom: 0;
  left: 40%;
  width: 30px;
  height: 30px;
}

.correo-estrella--2 {
  bottom: 20px;
  left: 55%;
  width: 60px;
  height: 60px;
}

.correo-estrella--3 {
  bottom: 60px;
  left: 35%;
  width: 50px;
  height: 50px;
}

.correo-estrella--4 {
  bottom: 80px;
  left: 50%;
  width: 40px;
  height: 40px;
}

@media (max-width: 480px) {
  .correo-beneficios__estrellas {
    height: 80px;
  }
  .correo-estrella--1 {
    width: 20px;
    height: 20px;
  }
  .correo-estrella--2 {
    width: 40px;
    height: 40px;
  }
  .correo-estrella--3 {
    width: 35px;
    height: 35px;
  }
  .correo-estrella--4 {
    width: 25px;
    height: 25px;
  }
}

/* ============================================================
   ECOSISTEMA CORREO
   ============================================================ */
.correo-ecosistema {
  padding: 5rem 0 4rem;
  background: #ffffff;
}

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

.correo-ecosistema__ventana {
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(14, 38, 102, 0.12);
  position: relative;
}

.correo-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, 0.15);
  width: fit-content;
  max-width: calc(100% - 3rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.correo-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: 0.75rem;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.correo-eco-tab:hover {
  background: #eef3fb;
  color: #0d2666;
}

.correo-eco-tab--activo {
  background: #afd81a;
  color: #ffffff;
}

.correo-eco-tab--activo:hover {
  background: #9cc318;
  color: #ffffff;
}

.correo-eco-cuerpo {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #0e2666;
}

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

.correo-eco-cuerpo__info {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  padding: 3.5rem 3rem !important;
  max-width: 760px !important;
  height: auto !important;
}

.correo-eco-cuerpo__nombre {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.correo-eco-cuerpo__texto {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 28.5px !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  margin: 0 !important;
  max-width: 702px !important;
}

.correo-eco-cuerpo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #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 0.3s ease;
}

.correo-eco-cuerpo__btn:hover {
  opacity: 0.85;
  color: #ffffff;
}

.correo-eco-cuerpo__logo {
  position: absolute !important;
  bottom: 2rem !important;
  right: 2.5rem !important;
  z-index: 3 !important;
  width: 195px !important;
  height: auto !important;
  display: block !important;
  background: transparent !important;
}

.correo-ecosistema .andes-container {
  max-width: 1400px;
  width: 100%;
  padding-inline: 1rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .correo-eco-cuerpo {
    min-height: 400px;
  }
  .correo-eco-cuerpo__info {
    padding: 140px 0 0 40px !important;
  }
  .correo-eco-cuerpo__nombre {
    font-size: 18px !important;
  }
  .correo-eco-cuerpo__texto {
    font-size: 15px !important;
  }
  .correo-eco-cuerpo__logo {
    width: 140px;
    bottom: 1rem;
    right: 1rem;
  }
}

@media (max-width: 480px) {
  .correo-eco-tabs {
    gap: 0.3rem;
    padding: 0.75rem 1rem;
  }
  .correo-eco-tab {
    font-size: 0.6875rem;
    padding: 0.35rem 0.75rem;
  }
  .correo-eco-cuerpo {
    min-height: 480px;
  }
  .correo-eco-cuerpo__info {
    padding: 80px 1rem 0 1.5rem !important;
  }
  .correo-eco-cuerpo__nombre {
    font-size: 14px !important;
  }
  .correo-eco-cuerpo__texto {
    font-size: 12px !important;
  }
  .correo-eco-cuerpo__logo {
    width: 120px !important;
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

/* ── CLIENTES ── */
.andes-clientes {
  padding: 4rem 0;
  background: #ffffff;
}

.andes-clientes__titulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #0e2666;
  margin-bottom: 2rem;
  text-align: left;
}

.andes-clientes__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  align-items: center;
}

.andes-cliente-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.andes-cliente-logo img {
  width: 100%;
  max-width: 180px;
  height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.andes-cliente-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 1024px) {
  .andes-clientes__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .andes-clientes__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .andes-clientes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}



.correo-beneficios__texto {
  padding-top: 120px;
}

.correo-beneficios__estrellas {
  position: relative;
  height: 80px;
  margin-top: 16px;
}

.correo-beneficios__estrella {
  position: absolute;
}

.correo-beneficios__estrella--1 {
  width: 160px;
  right: -20px;
  left: auto;
  bottom: -40px;
  top: auto;
}

.correo-beneficios__estrella--2 {
  width: 100px;
  right: 120px;
  left: auto;
  bottom: -190px;
  top: auto;
}

.correo-beneficios__estrella--3 {
  width: 50px;
  right: -10px;
  left: auto;
  top: -160px;
  bottom: auto;
}

.correo-beneficios__estrella--4 {
  width: 35px;
  right: 190px;
  left: auto;
  top: -30px;
  bottom: auto;
}


@media (max-width: 480px) {
  .correo-beneficios__estrellas {
    display: none;
  }
}

@media (max-width: 1024px) {
  .correo-beneficios__estrella--1 {
    width: 80px;
  }
  .correo-beneficios__estrella--2 {
    width: 40px;
    bottom: -40px;
  }
  .correo-beneficios__estrella--3 {
    width: 50px;
    top: -30px;
  }
  .correo-beneficios__estrella--4 {
    width: 25px;
  }
}

/* ============================================================
   FIX RESPONSIVE HERO — evitar que el texto se recorte
   ============================================================ */

/* Tablet: dar alto a la imagen para que el texto absoluto quepa
   y reducir el margin gigante del subtítulo */
@media (max-width: 1024px) {
  .correo-hero__imagen {
    min-height: 420px;
  }
  .correo-hero__imagen img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .correo-hero__subtitulo {
    margin-bottom: 24px !important;
  }
  .correo-hero__contenido {
    justify-content: center;
    padding-block: 1.5rem;
  }
}

/* Móvil: alto suficiente y márgenes mínimos para que quepa todo */
@media (max-width: 480px) {
  .correo-hero__imagen {
    min-height: 520px;
  }
  .correo-hero__subtitulo {
    margin-bottom: 16px !important;
  }
  .correo-hero__contenido {
    padding-block: 1.5rem;
  }
}

/* Zona 1025–1200px: el hero de desktop se queda sin alto y el
   margin de 104px esconde el subtítulo. Se cubre esta franja. */
@media (max-width: 1200px) {
  .correo-hero__imagen {
    min-height: 460px;
  }
  .correo-hero__imagen img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .correo-hero__subtitulo {
    margin-bottom: 32px !important;
  }
  .correo-hero__contenido {
    justify-content: center;
    padding-block: 1.5rem;
  }
}