:root{
  /* Marca */
  --mint:#75d3a8;
  --mint2:#1aa892;
  --violet:#6b2aa6;
  --violet2:#4c266e;
  --gris-claro:#eafffb;
  --gris-claro2:#d2dfdc;
  --mint-kpi:#75d3a8; /* checks */
  --violet-cta:#7f0689;
  --line:#d7dde3;

  /* UI */
  --ink:#0b1b1a;
  --muted:#5b6b6a;
  --bg:#ffffff;
  --soft:#f4fbf9;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.10);
  --border: 1px solid rgba(11,27,26,.10);

  /* Fuente */
  --font: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body{ font-family: var(--font); color: var(--ink); }
a{ color: inherit; }

h1, h2, h3, .fw-bold{ letter-spacing: -0.02em; }

.cs-landing .container{ max-width: 1140px; }

/* Navbar */
.navbar{ background:#fff; border-bottom: var(--border); }
.nav-link{ color:#2a3a39; font-weight:600; }
.nav-link:hover{ color: var(--violet); }

/* Hero */
.hero{
  position: relative;
  padding: 72px 0 56px;
  color:#fff;
  background:
    linear-gradient(90deg, rgba(9,26,24,.18) 0%, rgba(9,26,24,.55) 55%, rgba(9,26,24,.20) 100%),
    url("../img/bg-contigosalud1.webp") center/cover no-repeat;
}

.badge-brand{
  background: rgba(64,214,191,.18);
  border: 1px solid rgba(64,214,191,.35);
  color: #d8fffa;
  backdrop-filter: blur(6px);
}

.card-soft{
  border:0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form-card{
  background:#fff;
  color: var(--ink);
  border-radius: var(--radius);
}

.btn-brand{
  background: var(--mint);
  border-color: var(--mint);
  color:#06201d;
  font-weight:800;
}
.btn-brand:hover{ background: var(--mint2); border-color: var(--mint2); color:#fff; }

.btn-brand2{
  background: var(--violet);
  border-color: var(--violet);
  color:#fff;
  font-weight:800;
}
.btn-brand2:hover{ background: var(--violet2); border-color: var(--violet2); color:#fff; }

.btn-outline-brand{
  background:var(--gris-claro);
  color:#000;
  border:1px solid var(--gris-claro);
  font-weight:700;
}
.btn-outline-brand:hover{ background:var(--gris-claro2); color:#000; }

#btnCotizar.is-loading{ cursor: not-allowed; opacity: .9; }

/* Sections */
.section{ padding: 72px 0; }
.section-soft{ background: var(--soft); }
.section-full{ width: 100%; }

/* KPI (hero) */
.kpi-item{
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.95);
}
.kpi-item::before{
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 20px; height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 999px;
  background: rgba(117,211,168,.18);
  color: var(--mint-kpi);
  font-weight: 900;
}
.hero .kpi-item .small-muted{ color: rgba(255,255,255,.80) !important; }
.kpi-list .fw-bold{ letter-spacing: -0.01em; }
.small-muted{ color: var(--muted); }

/* Cards */
.feature-card{
  border: var(--border);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
  height:100%;
}
.feature-card .img{
  height: 190px;
  background:#e9f7f4;
  background-size: cover;
  background-position: center;
}

/* Plan cards */
.plan-card img.plan-img{
  width: 100%;
  object-fit: cover;
  display: block;
}
.plan-card{ transition: transform .25s ease, box-shadow .25s ease; }
.plan-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

/* News cards */
.news-card img.news-img{
  width: 100%;
  object-fit: cover;
  display: block;
}
.news-card{ transition: transform .25s ease, box-shadow .25s ease; }
.news-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

/* ===== Comparador (tabla) ===== */
.compare-wrap{
  border-radius: var(--radius);
  overflow:hidden;
  border: var(--border);
  background:#fff;
}

.compare-table{ border-color: var(--line); }

.compare-table thead th{
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 16px;
}

.compare-left{
  width: 30%;
  font-weight: 500;
}

.compare-pill{
  display:inline-block;
  background: var(--violet-cta);
  color:#fff;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
}

.compare-left-title{
  font-size: 22px;
  font-weight: 800;
  margin-top: 10px;
  color: #111;
}

.plan-head{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
}

.plan-check{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(117,211,168,.55);
  background: rgba(117,211,168,.12);
  color: var(--mint-kpi);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

.plan-name{
  font-weight: 800;
  color: var(--violet-cta);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.plan-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mint-kpi);
}
.plan-mark svg{
  width: 16px;
  height: auto;
  display: block;
  fill: currentColor;
}
@media (min-width: 992px){
  .plan-mark svg{ width: 22px; }
}

.compare-table tbody th,
.compare-table tbody td{
  padding: 18px 16px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.compare-price-row td{ padding-top: 22px; padding-bottom: 22px; }

.price-from{ font-size: 14px; color:#111; line-height: 1.2; }
.price-from strong{ font-size: 16px; }
.price-sub{ font-size: 13px; color:#6b7280; margin-top: 2px; }

.btn-compare{
  margin-top: 10px;
  background: var(--violet-cta);
  color:#fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  border: 0;
}
.btn-compare:hover{ background: #6a0473; color:#fff; }

.ok{
  color: var(--mint-kpi);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}

.copago{ font-weight: 700; color:#111; font-size: 14px; }

/* Precio separador marcado */
.compare-price-row th,
.compare-price-row td{
  border-top: 2px solid #aeb8c2 !important;
  border-bottom: 2px solid #aeb8c2 !important;
  background: #fff;
}

/* ===== Comparador: desktop vs mobile ===== */
.compare-mobile{ display:none; }

@media (max-width: 991.98px){
  .compare-desktop{ display:none; }
  .compare-mobile{ display:block; }
}

/* ===== Mobile cards ===== */
.compare-m-card{
  background:#fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.compare-m-name{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  color: var(--violet-cta);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.compare-m-price{
  color:#111;
  font-size: .95rem;
  margin-bottom: 10px;
}
.compare-m-price span{
  color:#6b7280;
  font-size: .85rem;
}

.compare-m-list{
  list-style:none;
  padding: 0;
  margin: 12px 0 0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.compare-m-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: .95rem;
  color:#111;
}

.compare-m-list .ok{
  font-size: 18px;
  margin-top: 1px;
}

.compare-m-list .copago{
  display:inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(127,6,137,.10);
  color: var(--violet-cta);
  line-height: 1.4;
}

/* Pills */
.pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(107,42,166,.12);
  color: var(--violet);
  border: 1px solid rgba(107,42,166,.22);
  white-space: nowrap;
}

 /* Sticky WhatsApp - flotante */
.sticky-cta{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
}

.sticky-cta a{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sticky-cta a:hover{
  background: #1ebe5d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}

/* ===== Recurso 4 imágenes: hover reveal ===== */
.resource-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  height: 100%;
}

.resource-img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .35s ease;
}

.resource-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 16px 16px 14px;
  color:#000;
  background:var(--mint);
  transform: translateY(65%);
  transition: transform .35s ease;
}

.resource-title{
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.resource-text{
  font-size: .95rem;
  opacity: .92;
  margin-bottom: 10px;
}

.resource-cta{
  font-weight: 800;
  font-size: .95rem;
  color: var(--violet);
}

.resource-card:hover .resource-img,
.resource-card:focus-within .resource-img{ transform: scale(1.05); }
.resource-card:hover .resource-overlay,
.resource-card:focus-within .resource-overlay{ transform: translateY(0%); }

/* ===== Club Beneficios (solo 1 versión) ===== */
.club-beneficios{
  color:#fff;
  background: #7f0689;
  position: relative;
  overflow: hidden;
}

.club-beneficios::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(circle at 8% 35%, rgba(255,255,255,.08) 0 260px, transparent 261px),
    radial-gradient(circle at 38% 50%, rgba(255,255,255,.06) 0 320px, transparent 321px),
    radial-gradient(circle at 70% 42%, rgba(255,255,255,.07) 0 300px, transparent 301px),
    radial-gradient(circle at 92% 58%, rgba(255,255,255,.06) 0 320px, transparent 321px);
  pointer-events:none;
}

.club-beneficios .container{ position: relative; z-index: 1; }

.club-brand{ height: 34px; width:auto; }

.club-title{
  font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.club-copy{
  max-width: 920px;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.45;
  opacity: .95;
}

.club-pill{
  background:var(--mint);
  border-radius: 12px;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.club-logo-svg{
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
}
.club-logo-svg svg{
  height: 44px;
  width: auto;
  display:block;
  fill: currentColor;
}

.club-btn{
  background:#fff;
  color:#7f0689;
  border:0;
  border-radius:999px;
  padding: 12px 26px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.club-btn:hover{ background:#f6f0f8; color:#650b78; }

/* Floating select */
.floating-select{ position: relative; }
.floating-select label{
  position: absolute;
  top: -8px;
  left: 12px;
  background: #fff;
  padding: 0 6px;
  font-size: 12px;
  color: var(--mint2);
  font-weight: 500;
  z-index: 2;
}
.floating-select .form-select{ padding-top: 14px; }

.form-control::placeholder{ color: #6c757d; opacity: 1; }

.form-control:focus,
.form-select:focus{
  border-color: var(--mint);
  box-shadow: 0 0 0 .15rem rgba(64,214,191,.25);
}

.plan-list{
  list-style:none;
  padding-left:0;
  margin:0;
}
.plan-list li{
  position:relative;
  padding-left:22px;
  margin:8px 0;
  font-size:.95rem;
  color: var(--muted, #5b6b6a);
}
.plan-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
  opacity:.9;
}

.club-title{
  font-size:2rem;
  font-weight:700;
}

.club-extra{
  font-size:1.1rem;
  font-weight:600;
  opacity:.9;
}
.club-note{
  font-size:.85rem;
  opacity:.75;
}

/* ===== Responsive unificado ===== */
@media (max-width: 991.98px){
  .hero{ padding: 56px 0 42px; }
  .sticky-cta{ display:block; }

  .resource-img{ height: 260px; }
  .resource-overlay{ transform: translateY(0%); }

  .plan-name{ white-space: normal; }
}

@media (max-width: 575.98px){
  .club-logo-svg, .club-logo-svg svg{ height: 38px; }
  .club-pill{ padding: 12px 14px; }
}


.nav-phone {
  color: var(--c2);
}

.nav-phone:hover {
  color: var(--c1);
}

.btn-wa {
  background: #25D366;
  color: #fff;
  border-radius: 30px;
  padding: 6px 16px;
  font-weight: 600;
  transition: all .2s ease;
}

.btn-wa:hover {
  background: #1ebe5d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}