/* ══════════════════════════════════════
   planes.css
   Plan Kumpa & Dulce Espera
   ══════════════════════════════════════ */

/* ══════════════════════════════
   HERO — Kumpa
══════════════════════════════ */
.plan-hero--kumpa {
  background: linear-gradient(
    90deg,
    #295bcb 0%,
    #5f43b5 18%,
    #8b31a3 35%,
    #b22195 52%,
    #d51789 70%,
    #f2077c 88%,
    #f2077c 100%
  );
}

/* ══════════════════════════════
   HERO — Dulce Espera
══════════════════════════════ */
.plan-hero--dulce {
  background: linear-gradient(
    90deg,
    #d6339e 0%,
    #d62a85 20%,
    #e15b97 40%,
    #e789b9 60%,
    #f9aeae 80%,
    #f9aeae 100%
  );
}

/* ══════════════════════════════
   HERO (Shared)
══════════════════════════════ */
.plan-hero {
  position: relative;
  border-radius: 0 0 40px 40px;
  padding: 52px 24px 48px;
  overflow: hidden;
  min-height: 180px;
}

.plan-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.plan-hero-pre {
  color: rgba(255, 255, 255, .78);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.plan-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .12);
}

/* ── Large background logo decoration ── */
.plan-hero-bg-logo {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  height: 140%;
  max-height: 320px;
  width: auto;
  object-fit: contain;
  opacity: .18;
  filter: brightness(10) drop-shadow(0 0 40px rgba(255,255,255,.15));
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════
   BREADCRUMB
══════════════════════════════ */
.plan-breadcrumb {
  padding: 12px 0;
  background: #fff;
  border-bottom: 1px solid #e8ecf2;
}

.plan-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0d2d6b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .2s;
}

.plan-breadcrumb a:hover {
  color: #1a56c4;
}

.plan-breadcrumb a svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ══════════════════════════════
   MAIN CONTENT
══════════════════════════════ */
.plan-main {
  padding: 40px 24px 48px;
  background: #fff;
}

.plan-grid {
  display: grid;
  grid-template-columns: 48% 48%;
  gap: 40px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.plan-text {
  order: 1;
}

/* ══════════════════════════════
   TEXT
══════════════════════════════ */
.plan-question {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  color: #5a5a6a;
  line-height: 1.25;
  margin-bottom: 14px;
}

.plan-question strong {
  font-weight: 900;
  color: #2a2a3a;
  display: block;
}

.plan-desc {
  font-size: 14px;
  line-height: 1.75;
  color: #5a6272;
  margin-bottom: 22px;
  max-width: 460px;
}

/* ══════════════════════════════
   BENEFITS
══════════════════════════════ */
.benefits-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #3a3a4a;
  margin-bottom: 12px;
}

.benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #3a3a4a;
}

.check {
  background: #1565d8;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ══════════════════════════════
   CTA BUTTON — gradient pill
══════════════════════════════ */
.cta-plan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #e91e8c 0%, #7b2d8e 40%, #1a56c4 100%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 32px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(26, 86, 196, .25);
  transition: transform .2s, box-shadow .2s;
}

.cta-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 86, 196, .35);
}

/* ══════════════════════════════
   PLAN PHOTO
══════════════════════════════ */
.plan-photo {
  order: 2;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}

.plan-photo img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  display: block;
}

.plan-photo--missing {
  min-height: 300px;
  background: linear-gradient(135deg, #e8f0ff 0%, #c8d8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════
   DULCE ESPERA — Overrides
══════════════════════════════ */

/* Breadcrumb pink */
.plan--dulce .plan-breadcrumb {
  border-bottom-color: #f8d0e8;
}

.plan--dulce .plan-breadcrumb a {
  color: #d63384;
}

.plan--dulce .plan-breadcrumb a:hover {
  color: #8b0054;
}

/* Simple pink checks (no circle) */
.check-dulce {
  color: #d63384;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.45;
}

/* CTA pink pill centered */
.plan--dulce .cta-plan-de {
  background: #d63384;
  box-shadow: 0 4px 18px rgba(214, 51, 132, .25);
  display: flex;
  justify-content: center;
  text-align: center;
}

.plan--dulce .cta-plan:hover {
  background: #c0206e;
  box-shadow: 0 8px 24px rgba(214, 51, 132, .35);
}

/* Photo: large, aligned bottom-right, contain */
.plan--dulce .plan-photo {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.plan--dulce .plan-photo img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: right bottom;
}

/* Grid: align to end so photo reaches base */
.plan--dulce .plan-grid {
  align-items: end;
}

/* Compact benefits */
.plan--dulce .benefits-list {
  gap: 5px;
  margin-bottom: 22px;
}

.plan--dulce .benefits-list li {
  font-size: 13px;
  line-height: 1.4;
}

/* ══════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════ */
@media (max-width: 1024px) {
  .plan-grid {
    gap: 32px;
  }
}

/* ══════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
══════════════════════════════ */
@media (max-width: 768px) {
  .plan-hero {
    padding: 36px 16px 32px;
    border-radius: 0 0 28px 28px;
  }

  .plan-hero-title {
    font-size: clamp(28px, 9vw, 44px);
  }

  .plan-hero-bg-logo {
    height: 120%;
    max-height: 220px;
    right: -8%;
    opacity: .14;
  }

  .plan-main {
    padding: 28px 16px 36px;
  }

  .plan-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .plan-text {
    order: 2;
  }

  .plan-photo {
    order: 1;
  }

  .plan-photo img {
    max-height: 300px;
  }

  .plan-question {
    font-size: clamp(20px, 6vw, 28px);
  }

  .plan-desc {
    max-width: 100%;
  }

  .cta-plan {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════
   RESPONSIVE — SMALL (≤ 400px)
══════════════════════════════ */
@media (max-width: 400px) {
  .plan-hero-bg-logo {
    display: none;
  }

  .plan-hero-title {
    font-size: 28px;
  }
}