/* ==========================
   CONTENEDOR AISLADO
========================== */
#suscribir {
  all: initial;
  display: block;
  font-family: Calibri, "Segoe UI", Tahoma, sans-serif;
  color: #1f2733;
  background: #F2F6FA;
  line-height: 1.5;
}

/* Reset interno */
#suscribir *,
#suscribir *::before,
#suscribir *::after {
  all: unset;
  box-sizing: border-box;
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}

/* Variables */
#suscribir {
  --rojo: #CC0000;
  --rojo-osc: #A30000;
  --dorado: #E8A317;
  --gris: #5C6B7A;
  --gris-claro: #F2F6FA;
  --borde: #E1E8F0;
  --blanco: #FFFFFF;
}

/* ==========================
   ESTRUCTURA GENERAL
========================== */
#suscribir .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================
   HERO PRINCIPAL
========================== */
#suscribir .hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 460px;
  background: var(--rojo);
}

#suscribir .hero__text {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  border-left: 6px solid var(--dorado);
}

#suscribir .hero__brand {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--dorado);
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 18px;
}

#suscribir .hero__text h1 {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.15;
}

#suscribir .hero__text p {
  margin-top: 20px;
  font-size: 1.05rem;
  color: #ffe8ec;
  max-width: 30em;
}

#suscribir .hero__img {
  background: #b9bfc6 url("/imagenes/banners/suscripcion.png") center/cover;
}

/* HERO RESPONSIVE */
@media (max-width: 820px) {
  #suscribir .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  #suscribir .hero__img {
    min-height: 220px;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-top: 6px solid var(--dorado);
    order: -1;
  }

  #suscribir .hero__text {
    padding: 40px 24px;
    text-align: left;
  }

  #suscribir .hero__text h1 {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  #suscribir .hero__text p {
    font-size: 1rem;
    margin-top: 16px;
  }
}

/* ==========================
   SECCIÓN DE PREGUNTAS
========================== */
#suscribir .seccion {
  padding: 64px 0 24px;
  text-align: center; /* centra todo el texto */
  display: flex;
  flex-direction: column;
  align-items: center; /* centra horizontalmente los elementos */
  justify-content: center; /* centra verticalmente si hay altura definida */
}

#suscribir .seccion h2 {
  font-size: 1.8rem;
  color: var(--rojo);
  margin-bottom: 20px;
}

#suscribir .seccion .sub {
  color: var(--gris);
  font-size: 1.05rem;
  max-width: 800px; /* limita el ancho para mejor lectura */
  line-height: 1.6;
  text-align: center; /* asegura que el texto largo también esté centrado */
}


#suscribir .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 28px;
  padding: 32px 0 64px;
}

#suscribir .card {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 30px 32px;
  box-shadow: 0 10px 30px rgba(154, 168, 184, 0.18);
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

#suscribir .card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

#suscribir .num {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--dorado);
  line-height: 1;
}

#suscribir .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gris);
  text-transform: uppercase;
}

#suscribir .card h3 {
  margin: 14px 0 22px;
  font-size: 1.25rem;
  color: var(--rojo);
  font-weight: 700;
}

#suscribir .sol {
  background: var(--rojo);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: auto;
  box-shadow: 0 6px 16px rgba(154, 168, 184, 0.25);
}

#suscribir .sol__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dorado);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#suscribir .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dorado);
  display: inline-block;
}

#suscribir .sol p {
  color: #fff;
  margin-top: 12px;
  font-size: 1rem;
}

/* ==========================
   SECCIÓN CTA FINAL
========================== */
#suscribir .cta {
  all: unset;
  display: block;
  background: var(--rojo);
  color: #fff;
  text-align: center;
  padding: 70px 24px 80px;
  border-top: 8px solid var(--dorado);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  max-width: 98%;
}

#suscribir .pill {
  display: inline-block;
  background: var(--dorado);
  color: var(--rojo);
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 999px;
  margin-bottom: 26px;
  font-family: "Trebuchet MS", sans-serif;
}

#suscribir .cta h2 {
  font-size: 2.2rem;
  max-width: 16em;
  margin: 0 auto;
  line-height: 1.2;
  font-family: "Trebuchet MS", sans-serif;
}

#suscribir .cta p {
  margin: 18px auto 0;
  color: #ffe8ec;
  max-width: 34em;
  font-size: 1.1rem;
  font-family: Calibri, "Segoe UI", Tahoma, sans-serif;
}

/* ==========================
   SECCIONES DE ACCIÓN
========================== */
/* Sección de acciones */
#suscribir .acciones,
#suscribir .acciones-final {
  text-align: center;
  padding: 60px 24px;
  background: var(--gris-claro);
  border-top: 1px solid var(--borde);
  box-sizing: border-box;
}

#suscribir .acciones__intro h2,
#suscribir .acciones-final h2 {
  color: var(--rojo);
  font-size: 1.9rem;
  margin-bottom: 12px;
}

#suscribir .acciones__intro p,
#suscribir .acciones-final p,
#suscribir .acciones__info p,
#suscribir .acciones__mensaje p {
  color: var(--gris);
  font-size: 1.05rem;
  margin-bottom: 22px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Botones de acción */
#suscribir .acciones__botones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 30px auto;
  max-width: 700px;
}

#suscribir .btn-accion {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#suscribir .btn-accion:hover {
  transform: translateY(-2px);
}

/* Botón correo */
#suscribir .btn-accion.correo {
  background: var(--rojo);
  color: #fff;
}

#suscribir .btn-accion.correo:hover {
  background: var(--rojo-osc);
}

/* Botón WhatsApp */
#suscribir .btn-accion.whatsapp {
  background: #25D366;
  color: #fff;
}

#suscribir .btn-accion.whatsapp:hover {
  background: #1DA851;
}

/* Responsive */
@media (max-width: 700px) {
  #suscribir .acciones__botones {
    flex-direction: column;
    gap: 16px;
  }

  #suscribir .btn-accion {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    padding: 16px 20px;
  }
}


/* Ajustes responsive para botones */
@media (max-width: 600px) {
  #suscribir .btn-accion {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 1.05rem;
  }
}