/** ---------------------------------------------   ZONA DE SUSCRIPCIÓN  ----------------------------------------- ***/
.suscripcion {
  width: 100%;
  height: 200px !important;
  background: url("/Images/zona_suscripcion.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.suscripcion .overlay {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Caja blanca que contiene texto y botón */
.cont_susc {
  background: transparent;
  padding: 20px 10px; /* más padding abajo para el botón */
  flex: 1;
  position: relative; /* necesario para ubicar el botón */
  right: 90px;
}

.cont_descripcion {
  background: #fff;
  border-radius: 20px;
  padding: 20px 30px 40px; /* top-right-bottom-left */
  font-size: 16px;
  color: #1a1c1c;
  line-height: 1.4;
  align-items: stretch;
}

/* Botón dentro, abajo a la derecha */
.cont_susc .btn-suscribete {
  position: absolute;
  bottom: 10px;
  right: -70px;
  margin: 0;
}

/* Boton de suscribete */
.btn-suscribete {
  margin: 20px 0 40px 20px; /* Top-right-bottom-left */
  position: relative;
  background-image: linear-gradient(to bottom right, #f8c78c 40%, #e99a3c 60%);
  width: 180px;
  height: 45px;
  color: #1a1c1c;
  border-radius: 60px;
  display: flex;
  align-items: center;
  text-decoration: none;
  letter-spacing: 2px;
  border-top: 0.5px solid rgb(0 0 0 / 35%);
  border-left: 0.5px solid rgb(0 0 0 / 35%);
  cursor: pointer;
  transition: 0.35s ease;
  padding-left: 20px;
}

.btn-suscribete:hover {
  /* box-shadow: 0px 6px 0px #c9812a;  */
  box-shadow: 7px 5px 56px -14px #c9812a;
}

.btn-suscribete:active {
  box-shadow: 7px 5px 56px -10px #c9812a;
}

.container_susc {
  position: absolute;
  right: 5px;
  width: 35px;
  height: 35px;
  margin-left: 10px;
  background: #1a1c1c;
  border-radius: 50%;
  transition: 0.35s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e99a3c;
}

.btn-suscribete:hover .container_susc {
  rotate: -30deg;
}

/* ---------- TARJETAS DE PLANES ---------- */
.planes {
  display: flex;
  gap: 15px;
  width: 100%;
  max-width: 395px;
  height: 120px;
}

.plan-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: radial-gradient(
    circle at top left,
    #e99a3c 0%,
    #008b4e 43%,
    #0a6635 100%
  );
  color: #fff;
  border-radius: 15px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
  min-width: 60px;
  box-shadow: 0 3px 8px rgb(0 0 0 / 30%);
  text-align: left;
}

/* Texto por defecto oculto */
.plan-card .precio,
.plan-card h4 {
  display: none;
}

/* Icono contenedor */
.plan-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-card .icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-card .icon i {
  font-size: 18px;
}

/* Iconos según tipo */
.plan-card.estandar .icon {
  background-color: #f6fffee6;
  color: #0a6635;
}

.plan-card.premium .icon {
  background-color: #1a1c1c71;
  color: #ffe66d;
}

/* Cuando está activa (expandida) */
.plan-card.active {
  flex: 4;
  box-shadow: 0 6px 15px rgb(0 0 0 / 40%);
}

.plan-card.active .precio,
.plan-card.active h4 {
  display: block;
}

.plan-card .precio {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 10px;
}

.plan-card .precio span {
  font-size: 12px;
  font-weight: normal;
}