/* Paleta CONA */
:root {
	--blue: #2D53AC;
	--green: #779A31;
	--orange: #e57b26;
	--white: #fff;

	--text: rgba(12, 18, 38, .92);
	--muted: rgba(12, 18, 38, .66);

	--card: rgba(255, 255, 255, .92);
	--border: rgba(45, 83, 172, .14);

	--shadow1: 0 18px 55px rgba(45, 83, 172, .10);
	--shadow2: 0 35px 90px rgba(45, 83, 172, .16);
}

/* wrapper */
.cd-wrap {
	padding: 26px 0 90px;
	background:
		radial-gradient(circle at 12% 10%, rgba(45, 83, 172, .12), transparent 45%),
		radial-gradient(circle at 88% 12%, rgba(229, 123, 38, .10), transparent 50%),
		radial-gradient(circle at 50% 95%, rgba(119, 154, 49, .10), transparent 60%),
		#fff;
}

.cd-back {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
	font-weight: 900;
	color: rgba(45, 83, 172, .92);
	margin: 10px 0 18px;
}

/* HERO */
.cd-hero{
  border-radius: 26px;
  padding: 44px;
  display:grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 30px;
  position: relative;
  overflow: hidden;

  /* 🔥 la imagen manda */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color:#fff;
  box-shadow: var(--shadow2);
  border: 1px solid rgba(255,255,255,.14);
}


.cd-hero::before {
	content: "";
	position: absolute;
	inset: -120px;
	background:
		radial-gradient(circle at 30% 30%, rgba(229, 123, 38, .20), transparent 55%),
		radial-gradient(circle at 70% 60%, rgba(119, 154, 49, .18), transparent 60%),
		radial-gradient(circle at 55% 40%, rgba(255, 255, 255, .06), transparent 60%);
	filter: blur(22px);
	opacity: .9;
	pointer-events: none;
}

.cd-hero-left {
	position: relative;
	z-index: 2;
}

.cd-hero-right {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.cd-breadcrumb {
	font-size: 12px;
	letter-spacing: .8px;
	opacity: .8;
	margin-bottom: 12px;
}

.cd-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 900;
	font-size: 12px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
}

/* =========================
   BOTÓN WHATSAPP
========================= */
.btnWhatsapp{
	cursor: pointer;
}
.cd-btnPrimary.whatsapp {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 18px 45px rgba(34,197,94,.28);
  color: #fff;
}

.cd-btnPrimary.whatsapp i {
  font-size: 18px;
}

.cd-btnPrimary.whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(34,197,94,.38);
}


.cd-title {
	margin: 16px 0 14px;
	font-size: clamp(34px, 3.6vw, 54px);
	letter-spacing: -0.8px;
	line-height: 1.05;
}

.cd-desc {
	color: rgba(255, 255, 255, .88);
	line-height: 1.7;
	max-width: 760px;
}

/* hero meta */
.cd-meta {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.cd-meta-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
}

.cd-meta-item i {
	margin-top: 2px;
	color: rgba(255, 255, 255, .90);
}

.cd-meta-item strong {
	display: block;
	font-size: 13px;
	font-weight: 900;
}

.cd-meta-item span {
	display: block;
	font-size: 12.5px;
	opacity: .9;
	margin-top: 2px;
}

/* icon big */
.cd-iconBig {
	width: 150px;
	height: 150px;
	border-radius: 28px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
}

.cd-iconBig i {
	font-size: 58px;
	color: rgba(255, 255, 255, .92);
}

/* GRID (sticky zone) */
.cd-grid {
	margin-top: 26px;
	display: grid;
	grid-template-columns: 1.55fr .85fr;
	gap: 26px;
	align-items: start;
	overflow: visible;
}

/* main sections */
.cd-section {
	background: rgba(255, 255, 255, .75);
	border: 1px solid var(--border);
	border-radius: 22px;
	box-shadow: var(--shadow1);
	padding: 26px 26px;
	margin-bottom: 18px;
}

.cd-section .cd-p{
	color:rgba(12, 18, 38, .82);
	line-height: 1.75;
	margin-bottom: 16px;
}

.cd-h2 {
	font-size: 22px;
	letter-spacing: -.3px;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.cd-h2 i {
	color: var(--orange);
}



/* accordion */
.cd-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cd-accItem {
	border-radius: 16px;
	border: 1px solid rgba(45, 83, 172, .14);
	background: rgba(255, 255, 255, .86);
	overflow: hidden;
}

.cd-accItem summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px;
	font-weight: 900;
	color: rgba(12, 18, 38, .88);
}

.cd-accItem summary span {
	font-size: 12px;
	color: rgba(45, 83, 172, .85);
	background: rgba(45, 83, 172, .08);
	border: 1px solid rgba(45, 83, 172, .14);
	padding: 6px 10px;
	border-radius: 999px;
}

.cd-accItem summary strong {
	flex: 1;
}

.cd-accItem summary i {
	opacity: .7;
	transition: transform .2s ease;
}

.cd-accItem[open] summary i {
	transform: rotate(180deg);
}

.cd-accBody {
	padding: 0 16px 16px;
	color: var(--muted);
}

.cd-accBody ul {
	margin: 10px 0 0 18px;
	line-height: 1.8;
}

/* benefits list */
.cd-benefits {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.cd-benefit {
	display: flex;
	gap: 12px;
	padding: 14px 14px;
	border-radius: 18px;
	border: 1px solid rgba(45, 83, 172, .14);
	background: rgba(255, 255, 255, .88);
}

.cd-benefit i {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(135deg, var(--green), rgba(119, 154, 49, .82));
	box-shadow: 0 14px 40px rgba(119, 154, 49, .18);
}

.cd-benefit h3 {
	margin: 2px 0 6px;
	font-size: 16px;
	color: var(--text);
}

.cd-benefit p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65;
}

/* pay box */
.cd-payBox {
	border: 2px dashed rgba(45, 83, 172, .22);
	border-radius: 22px;
	padding: 18px 18px;
	background: rgba(255, 255, 255, .85);
	display: flex;
	gap: 16px;
	align-items: center;
}

.cd-payBrand {
	font-weight: 1000;
	font-size: 22px;
	color: var(--blue);
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(45, 83, 172, .08);
	border: 1px solid rgba(45, 83, 172, .14);
}

.cd-payInfo p {
	margin: 6px 0;
	color: var(--muted);
}

/* ASIDE sticky */
.cd-aside {
	position: relative;
	overflow: visible;
}

.cd-card {
	position: sticky;
	top: 110px;
	/* ajusta si tu header es alto */
	border-radius: 22px;
	overflow: hidden;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--border);
	box-shadow: var(--shadow2);
}

/* 🔥 FIX DEFINITIVO STICKY */
.cd-wrap .container {
  overflow: visible !important;
}
/* JS sticky fallback */
.cd-card.is-fixed {
  position: fixed;
  top: 110px;
  width: calc(100% * 0.85 - 26px); /* coincide con grid */
  max-width: 380px;
}

.cd-card.is-stop {
  position: absolute;
  bottom: 0;
  top: auto;
}


.cd-cardTop {
	padding: 18px 18px;
	display: flex;
	gap: 12px;
	align-items: center;
	background: linear-gradient(135deg, rgba(45, 83, 172, .96), rgba(10, 18, 40, .96));
	color: #fff;
}

.cd-cardIcon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .18);
}

.cd-cardIcon i {
	font-size: 22px;
}

.cd-cardPrice span {
	display: block;
	font-size: 12px;
	opacity: .9;
}

.cd-cardPrice strong {
	display: block;
	font-size: 24px;
	letter-spacing: -.3px;
	margin-top: 2px;
}

.cd-cardBody {
	padding: 18px 18px 18px;
}

.cd-cardBody h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--text);
}

.cd-cardSub {
	margin: 0 0 14px;
	color: var(--muted);
	line-height: 1.6;
	font-size: 14px;
}

.cd-cardList {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: rgba(12, 18, 38, .82);
}

.cd-cardList i {
	color: var(--green);
}

.cd-cardBtns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cd-btnPrimary,
.cd-btnOutline {
	text-decoration: none;
	font-weight: 1000;
	padding: 12px 14px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.cd-btnPrimary {
	color: #fff;
	background: linear-gradient(135deg, var(--orange), #ff9a45);
	box-shadow: 0 18px 45px rgba(229, 123, 38, .22);
}

.cd-btnPrimary:hover {
	transform: translateY(-2px);
	box-shadow: 0 26px 70px rgba(229, 123, 38, .28);
}

.cd-btnOutline {
	color: rgba(45, 83, 172, .95);
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(45, 83, 172, .22);
	box-shadow: 0 16px 45px rgba(45, 83, 172, .10);
}

.cd-btnOutline:hover {
	transform: translateY(-2px);
	background: rgba(45, 83, 172, .96);
	color: #fff;
}

/* CERTIFICACIÓN (fuera del sticky zone) */
.cd-cert {
	margin-top: 26px;
	background: linear-gradient(135deg, rgba(45, 83, 172, .98), rgba(119, 154, 49, .92));
	border-radius: 26px;
	padding: 26px;
	color: #fff;
	box-shadow: var(--shadow2);
}

.cd-certInner {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 22px;
	align-items: center;
}

.cd-certRight {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cd-certImg {
  max-width: 100%;
  max-height: 240px;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.cd-certLeft h2 {
	font-size: 28px;
	margin: 0 0 10px;
	letter-spacing: -.5px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cd-certLeft p {
	opacity: .95;
	line-height: 1.75;
}

.cd-certPoints {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: .95;
}

.cd-certPoints i {
	color: rgba(255, 255, 255, .95);
}

.cd-certMock span {
	display: block;
	opacity: .9;
	margin-bottom: 10px;
}

.cd-certPaper {
	background: #fff;
	color: #111;
	border-radius: 18px;
	padding: 16px;
	min-height: 220px;
	box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
}

.cd-certPaper strong {
	display: block;
	font-size: 22px;
	margin-bottom: 10px;
}

.cd-line {
	height: 10px;
	border-radius: 999px;
	background: rgba(45, 83, 172, .12);
	margin: 12px 0 10px;
}

/* ──────────────────────────────────────────────
   RESPONSIVE – solo lo que hace falta
─────────────────────────────────────────────── */

@media (max-width: 980px) {

  .cd-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cd-hero {
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    gap: 24px;
  }

  .cd-hero-right {
    justify-content: center;
    margin-bottom: 12px;
  }

  .cd-iconBig {
    width: 110px;
    height: 110px;
  }

  .cd-iconBig i {
    font-size: 44px;
  }

  .cd-title {
    font-size: clamp(24px, 7vw, 40px);
    text-align: center;
  }

  .cd-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .cd-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  /* Tarjeta de precio/arriba en móvil */
  .cd-aside {
    order: -1;               /* la sube al inicio */
  }

  .cd-card {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
  }

  /* Desactiva cualquier sticky/fixed que el JS pueda poner */
  .cd-card.is-fixed,
  .cd-card.is-stop {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
  }

  .cd-section {
    padding: 20px 16px;
  }

  .cd-accordion .cd-accItem summary {
    padding: 14px 16px;
    font-size: 0.95rem;
  }

  .cd-cert {
    padding: 24px 16px;
  }

  .cd-certInner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .cd-hero {
    padding: 24px 16px;
  }

  .cd-title {
    font-size: clamp(22px, 8.5vw, 34px);
  }

  .cd-h2 {
    font-size: 18px;
  }

  .cd-cardTop {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }

  .cd-cardPrice strong {
    font-size: 2.1rem;
  }

  .cd-btnPrimary {
    font-size: 0.95rem;
    padding: 12px 16px;
  }
}