/* ============================================================
   Portada de CursoDetalle (hero + ficha rapida)
   Adaptado del mockup curso-bim-ia; clases con prefijo cdp- para
   no chocar con los estilos existentes del sitio.
   ============================================================ */

.cdp-root {
    --cdp-azul-1000: #00121d;
    --cdp-azul-950: #001f30;
    --cdp-azul-900: #003450;
    --cdp-azul-700: #165a7f;
    --cdp-azul-600: #286f8e;
    --cdp-cian-500: #0fefd9;
    --cdp-cian-400: #73f4e5;
    --cdp-cian-300: #aef4e9;
    --cdp-cian-200: #d9fcf5;
    --cdp-fg: var(--landing-fg, #003450);
    --cdp-fg-soft: var(--landing-fg-soft, #4a7089);
    --cdp-line: var(--landing-line, #dbe7ee);
    --cdp-card: var(--landing-card, #ffffff);
    --cdp-page: var(--landing-page, #ffffff);
    --cdp-sombra: 0 1px 2px rgba(0, 52, 80, .06), 0 8px 24px rgba(0, 52, 80, .06);
    --cdp-activo: #04756a;
    --cdp-secnav-bg: rgba(255, 255, 255, .92);
    --cdp-page-alt: var(--landing-page-alt, #f0fdfa);
    --cdp-cian-700: #04756a;
    --cdp-cian-600: #06b8a6;
    --cdp-estado-punto: var(--cdp-cian-600);
    --cdp-check: var(--cdp-cian-700);
    --cdp-urgencia-bg: var(--cdp-page-alt);
    --cdp-ahora-grad: linear-gradient(135deg, var(--cdp-azul-900), var(--cdp-cian-700));
    --cdp-azul-800: #0d4972;
    --cdp-mem-bg: var(--cdp-page-alt);
    --cdp-mem-halo: rgba(15, 239, 217, .2);
    --cdp-mem-btn-bg: var(--cdp-azul-900);
    --cdp-mem-btn-hover: var(--cdp-azul-800);
    --cdp-mem-btn-fg: #ffffff;
    --cdp-resultado-n-grad: linear-gradient(135deg, var(--cdp-cian-700), var(--cdp-azul-600));
    --cdp-modulo-hover: var(--cdp-page-alt);
    --cdp-radio: 14px;
    --cdp-radio-lg: 18px;
    font-family: "Montserrat", sans-serif;
    color: var(--cdp-fg);
    text-align: left;
}

.cdp-root *, .cdp-root *::before, .cdp-root *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */
.cdp-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: 76px;
    background:
        radial-gradient(1200px 520px at 78% -10%, rgba(15, 239, 217, .20), transparent 60%),
        linear-gradient(135deg, var(--cdp-azul-1000) 0%, var(--cdp-azul-900) 46%, var(--cdp-azul-700) 100%);
    color: #fff;
}

.cdp-luz {
    position: absolute; border-radius: 999px; pointer-events: none;
    filter: blur(90px); opacity: .5;
}
.cdp-luz--a {
    width: 460px; height: 460px; top: -170px; right: -110px;
    background: radial-gradient(circle, var(--cdp-cian-500), transparent 70%);
}
.cdp-luz--b {
    width: 380px; height: 380px; bottom: -180px; left: -120px;
    background: radial-gradient(circle, var(--cdp-azul-600), transparent 70%);
    opacity: .65;
}
.cdp-malla {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 100%);
    mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 100%);
}

.cdp-migas, .cdp-portada { position: relative; z-index: 1; }

/* ---------- Migas ---------- */
.cdp-migas ol {
    list-style: none;
    max-width: 1280px; margin: 0 auto; padding: 16px 16px 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(217, 252, 245, .92);
}
.cdp-migas li { display: flex; align-items: center; gap: 6px; }
.cdp-migas li + li::before { content: "/"; opacity: .45; }
.cdp-migas a { color: rgba(217, 252, 245, .92); }
.cdp-migas a:hover { color: var(--cdp-cian-400); text-decoration: underline; }
.cdp-migas li[aria-current] { color: #fff; font-weight: 600; }

/* ---------- Portada ---------- */
.cdp-portada { padding: 26px 16px 0; }
.cdp-portada-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; gap: 28px; grid-template-columns: 1fr;
}

.cdp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cdp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.cdp-pill--tipo {
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.cdp-pill--vivo {
    background: linear-gradient(90deg, var(--cdp-cian-500), var(--cdp-cian-400));
    color: var(--cdp-azul-950);
}
.cdp-punto {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--cdp-azul-950);
    animation: cdp-latido 2s ease-in-out infinite;
}
@keyframes cdp-latido {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(15, 239, 217, .55); }
    50% { opacity: .65; box-shadow: 0 0 0 6px rgba(15, 239, 217, 0); }
}

.cdp-titulo {
    margin: 18px 0 0;
    font-size: clamp(1.875rem, 5.6vw, 3.125rem); font-weight: 800;
    line-height: 1.08; letter-spacing: -.02em; color: #fff;
    font-family: "Montserrat", sans-serif;
}
/* Tonalidad del título: degradado diagonal (de esquina a esquina) recortado a las letras,
   blanco arriba-izquierda hacia cian abajo-derecha. Si el navegador no soporta el recorte, queda blanco. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cdp-titulo {
        display: inline-block; /* el degradado abarca justo la caja del texto, no todo el ancho de la columna */
        /* Predomina el blanco: se mantiene sólido hasta la mitad y recién ahí arranca el viraje a cian */
        background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #d9fcf5 68%, var(--cdp-cian-300) 86%, var(--cdp-cian-500) 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }
}
.cdp-resumen {
    margin: 16px 0 0; max-width: 52ch;
    font-size: 16px; line-height: 1.7; color: rgba(217, 252, 245, .92);
}

.cdp-acredita { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cdp-acredita-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    font-size: 12px; color: rgba(217, 252, 245, .94);
}
.cdp-acredita-item svg { width: 15px; height: 15px; flex: none; color: var(--cdp-cian-400); }
.cdp-acredita-item strong { color: #fff; }

.cdp-docente {
    margin-top: 24px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.cdp-docente-item { display: inline-flex; align-items: center; gap: 10px; }
.cdp-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; border-radius: 999px;
    background: linear-gradient(135deg, var(--cdp-cian-500), var(--cdp-azul-600));
    color: var(--cdp-azul-1000); font-size: 13px; font-weight: 800; letter-spacing: .04em;
    box-shadow: 0 0 0 3px rgba(15, 239, 217, .16);
    object-fit: cover; overflow: hidden;
}
.cdp-docente-rol { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(217, 252, 245, .92); }
.cdp-docente-nom { font-size: 13px; font-weight: 700; color: #fff; }

.cdp-bandera { display: inline-flex; align-items: center; margin-left: 7px; vertical-align: middle; }
.cdp-bandera svg {
    width: 18px; height: 12px; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.cdp-bandera.flag:not(.icon) {
    display: inline-block;
    width: 16px;
    height: 11px;
    margin: 0 0 0 7px;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.cdp-rating {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    font-size: 13px; color: rgba(217, 252, 245, .94);
}
.cdp-rating svg { width: 14px; height: 14px; color: #fbbf24; }
.cdp-rating strong { color: #fff; }

.cdp-media {
    position: relative;
    border-radius: var(--cdp-radio-lg); overflow: hidden;
    background: var(--cdp-azul-950);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.cdp-media::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(15, 239, 217, .85), rgba(255, 255, 255, .05) 55%, rgba(40, 111, 142, .7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.cdp-media img { display: block; width: 100%; height: auto; }

/* ---------- Ficha rapida ---------- */
.cdp-ficha { position: relative; z-index: 2; margin-top: -56px; padding: 0 16px 26px; }
.cdp-ficha-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
}
.cdp-ficha-item {
    position: relative;
    display: block;
    padding: 16px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio);
    background: var(--cdp-card);
    box-shadow: var(--cdp-sombra);
    transition: border-color .2s, transform .2s;
}
.cdp-ficha-item:hover { border-color: var(--cdp-tono-borde); transform: translateY(-2px); }
.cdp-ficha-item--destacado {
    border-color: var(--cdp-tono-borde);
    background: linear-gradient(160deg, var(--cdp-tono-suave), transparent 70%), var(--cdp-card);
}
.cdp-ficha-item[data-tono="1"] { --cdp-tono: #0f766e; --cdp-tono-borde: rgba(15, 118, 110, .45); --cdp-tono-suave: rgba(15, 118, 110, .13); }
.cdp-ficha-item[data-tono="2"] { --cdp-tono: #0369a1; --cdp-tono-borde: rgba(3, 105, 161, .45); --cdp-tono-suave: rgba(3, 105, 161, .13); }
.cdp-ficha-item[data-tono="3"] { --cdp-tono: #4338ca; --cdp-tono-borde: rgba(67, 56, 202, .45); --cdp-tono-suave: rgba(67, 56, 202, .13); }
.cdp-ficha-item[data-tono="4"] { --cdp-tono: #6d28d9; --cdp-tono-borde: rgba(109, 40, 217, .45); --cdp-tono-suave: rgba(109, 40, 217, .13); }

.cdp-ficha-ico {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--cdp-tono-suave);
    color: var(--cdp-tono);
    margin-bottom: 10px;
}
.cdp-ficha-ico svg { width: 21px; height: 21px; }

.cdp-ficha-item dt {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cdp-fg-soft);
}
.cdp-ficha-item dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--cdp-fg); }
.cdp-ficha-item dd strong { font-weight: 800; }
.cdp-ficha-extra { display: block; margin-top: 3px; font-size: 13px; color: var(--cdp-fg-soft); }

/* ---------- Grupos de pills bajo la ficha ---------- */
.cdp-creds {
    max-width: 1280px; margin: 18px auto 0;
    display: flex; flex-wrap: wrap; gap: 22px 40px;
}
.cdp-grupo-lbl {
    margin: 0;
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-fg-soft);
}
.cdp-grupo-pills { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cdp-marca {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--cdp-line); background: var(--cdp-card);
    font-size: 12px; font-weight: 600; color: var(--cdp-fg);
}
.cdp-marca svg { width: 14px; height: 14px; color: var(--cdp-fg-soft); }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
    .cdp-migas ol, .cdp-portada, .cdp-ficha { padding-left: 24px; padding-right: 24px; }
    .cdp-ficha-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .cdp-migas ol, .cdp-portada, .cdp-ficha { padding-left: 32px; padding-right: 32px; }
    .cdp-portada-inner { grid-template-columns: 1fr 460px; align-items: center; gap: 40px; }
    .cdp-ficha-inner { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Menu rapido de secciones ---------- */
.cdp-secnav {
    position: sticky; top: 0; z-index: 30;
    margin-top: 28px;
    border-top: 1px solid var(--cdp-line); border-bottom: 1px solid var(--cdp-line);
    background: var(--cdp-secnav-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cdp-secnav-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; gap: 4px; overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: none;
}
.cdp-secnav-inner::-webkit-scrollbar { display: none; }
.cdp-secnav a {
    flex: none;
    padding: 13px 12px;
    border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 700; color: var(--cdp-fg-soft);
    white-space: nowrap; text-decoration: none;
    transition: color .18s, border-color .18s;
}
.cdp-secnav a:hover { color: var(--cdp-fg); text-decoration: none; }
.cdp-secnav a.is-activa { color: var(--cdp-activo); border-bottom-color: var(--cdp-cian-500); }

/* ---------- Cuerpo (contenido + columna de compra) ---------- */
.cdp-layout { padding: 0 16px; }
.cdp-layout-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; gap: 32px; grid-template-columns: 1fr;
}
.cdp-layout-inner > * { min-width: 0; }

/* ---------- Bloques de seccion ---------- */
.cdp-bloque { padding-top: 48px; scroll-margin-top: calc(var(--cdp-sticky-offset, 160px) - 32px); }
.cdp-bloque-titulo {
    position: relative; margin: 0; padding-top: 16px;
    font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--cdp-fg);
    font-family: "Montserrat", sans-serif;
}
.cdp-bloque-titulo::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 46px; height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--cdp-cian-500), var(--cdp-azul-600));
}
.cdp-bloque-bajada { margin: 8px 0 0; color: var(--cdp-fg-soft); font-size: 14px; }
.cdp-prosa { margin-top: 18px; display: grid; gap: 14px; }
.cdp-prosa p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--cdp-fg-soft); }

@media (min-width: 768px) {
    .cdp-secnav-inner, .cdp-layout { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
    .cdp-secnav-inner, .cdp-layout { padding-left: 32px; padding-right: 32px; }
    .cdp-layout-inner { grid-template-columns: 1fr 340px; align-items: start; gap: 44px; }
}

/* ---------- Modo oscuro (html.dark, mismo mecanismo del sitio y del mockup) ----------
   Los tokens de color base (--cdp-fg, --cdp-fg-soft, --cdp-card, --cdp-line, --cdp-page)
   ya siguen a los --landing-* del sitio, que cambian solos bajo html.dark.
   Aqui solo va lo que el mockup redefine aparte en oscuro. */
html.dark .cdp-root {
    --cdp-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --cdp-activo: var(--cdp-cian-300);
    --cdp-secnav-bg: rgba(0, 18, 29, .92);
    --cdp-estado-punto: var(--cdp-cian-400);
    --cdp-check: var(--cdp-cian-400);
    --cdp-urgencia-bg: var(--cdp-azul-950);
    --cdp-ahora-grad: linear-gradient(135deg, #fff, var(--cdp-cian-400));
    --cdp-mem-bg: var(--cdp-azul-950);
    --cdp-mem-halo: rgba(15, 239, 217, .18);
    --cdp-mem-btn-bg: var(--cdp-cian-500);
    --cdp-mem-btn-hover: var(--cdp-cian-400);
    --cdp-mem-btn-fg: var(--cdp-azul-950);
    --cdp-resultado-n-grad: linear-gradient(135deg, var(--cdp-cian-400), var(--cdp-cian-600));
    --cdp-modulo-hover: rgba(255, 255, 255, .05);
}
html.dark .cdp-ficha-item[data-tono="1"] { --cdp-tono: #5eead4; --cdp-tono-borde: rgba(94, 234, 212, .45); --cdp-tono-suave: rgba(94, 234, 212, .13); }
html.dark .cdp-ficha-item[data-tono="2"] { --cdp-tono: #7dd3fc; --cdp-tono-borde: rgba(125, 211, 252, .45); --cdp-tono-suave: rgba(125, 211, 252, .13); }
html.dark .cdp-ficha-item[data-tono="3"] { --cdp-tono: #a5b4fc; --cdp-tono-borde: rgba(165, 180, 252, .45); --cdp-tono-suave: rgba(165, 180, 252, .13); }
html.dark .cdp-ficha-item[data-tono="4"] { --cdp-tono: #c4b5fd; --cdp-tono-borde: rgba(196, 181, 253, .45); --cdp-tono-suave: rgba(196, 181, 253, .13); }

/* ---------- Tarjeta de compra (columna derecha) ---------- */
.cdp-compra { padding-top: 44px; scroll-margin-top: calc(var(--cdp-sticky-offset, 160px) - 28px); }
.cdp-compra-caja {
    position: relative; overflow: hidden;
    padding: 22px 20px 20px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
    box-shadow: var(--cdp-sombra);
}
.cdp-compra-caja::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--cdp-cian-500), var(--cdp-azul-600), var(--cdp-cian-500));
}
.cdp-compra-estado {
    display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(6, 184, 166, .18);
    color: var(--cdp-activo);
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.cdp-compra-estado::before {
    content: ""; width: 7px; height: 7px; border-radius: 999px;
    background: var(--cdp-estado-punto);
    animation: cdp-latido 2s ease-in-out infinite;
}
.cdp-compra-precio { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.cdp-compra-antes { font-size: 15px; font-weight: 600; color: var(--cdp-fg-soft); text-decoration: line-through; }
.cdp-compra-ahora {
    font-size: 36px; font-weight: 800; line-height: 1;
    background: var(--cdp-ahora-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cdp-compra-off {
    padding: 4px 9px; border-radius: 6px;
    background: linear-gradient(135deg, var(--cdp-cian-500), var(--cdp-cian-400));
    color: var(--cdp-azul-950);
    font-size: 12px; font-weight: 800;
}
.cdp-compra-nota { margin: 8px 0 0; font-size: 12px; color: var(--cdp-fg-soft); }

.cdp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 10px;
    border: 0; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700;
    padding: 12px 18px;
    text-decoration: none;
    transition: background-color .18s, color .18s, box-shadow .18s, transform .18s, border-color .18s;
}
.cdp-btn:hover, .cdp-btn:focus { text-decoration: none; }
.cdp-btn svg { width: 16px; height: 16px; flex: none; }
.cdp-btn--comprar {
    background: linear-gradient(90deg, var(--cdp-cian-500), var(--cdp-cian-400));
    color: var(--cdp-azul-950);
}
.cdp-btn--comprar:hover, .cdp-btn--comprar:focus { color: var(--cdp-azul-950); box-shadow: 0 0 22px rgba(15, 239, 217, .45); }
.cdp-btn--comprar:active { transform: translateY(1px); }
.cdp-btn--grande { margin-top: 16px; padding: 14px 18px; font-size: 15px; }
.cdp-btn--wa, .cdp-btn--secundario {
    border: 1px solid var(--cdp-line); background: transparent; color: var(--cdp-fg);
}
.cdp-btn--wa:hover, .cdp-btn--wa:focus, .cdp-btn--secundario:hover, .cdp-btn--secundario:focus { color: var(--cdp-fg); }
.cdp-btn--wa svg { width: 17px; height: 17px; color: #25d366; }
.cdp-btn--wa:hover { border-color: #25d366; }
.cdp-btn--secundario:hover { border-color: var(--cdp-cian-500); }

.cdp-compra-urgencia {
    margin: 16px 0 0; padding: 10px 12px;
    display: flex; align-items: center; gap: 8px;
    border-radius: var(--cdp-radio);
    background: var(--cdp-urgencia-bg);
    font-size: 13px; color: var(--cdp-fg-soft);
}
.cdp-compra-urgencia svg { width: 15px; height: 15px; flex: none; }
.cdp-compra-urgencia strong { color: var(--cdp-fg); }

.cdp-compra-incluye {
    margin: 16px 0 0; padding: 16px 0 0; list-style: none;
    border-top: 1px solid var(--cdp-line); display: grid; gap: 9px;
}
.cdp-compra-incluye li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13px; line-height: 1.5; color: var(--cdp-fg-soft);
}
.cdp-compra-incluye svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--cdp-check); }

@media (min-width: 1024px) {
    .cdp-compra { position: sticky; top: calc(var(--cdp-sticky-offset, 152px) + 16px); }
}

/* El sitio centra los h2 globalmente: el titulo de seccion va a la izquierda si o si */
.cdp-root h2.cdp-bloque-titulo, .cdp-root .cdp-bloque-bajada { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- Membresia (dentro de la tarjeta de compra) ---------- */
.cdp-membresia {
    position: relative; overflow: hidden;
    margin-top: 18px; padding: 18px;
    border-radius: var(--cdp-radio);
    border: 1px solid rgba(15, 239, 217, .45);
    background: radial-gradient(320px 160px at 88% 0%, var(--cdp-mem-halo), transparent 68%), var(--cdp-mem-bg);
}
.cdp-membresia-cabecera { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cdp-membresia-tag {
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(90deg, var(--cdp-cian-500), var(--cdp-cian-400));
    color: var(--cdp-azul-950);
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.cdp-membresia-oferta {
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--cdp-line);
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--cdp-fg-soft);
}
.cdp-root .cdp-membresia h3 {
    margin: 12px 0 0; font-size: 15px; font-weight: 800; line-height: 1.35;
    color: var(--cdp-fg); text-align: left !important;
    font-family: "Montserrat", sans-serif;
}
.cdp-membresia-texto { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--cdp-fg-soft); }
.cdp-membresia-lista { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cdp-membresia-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--cdp-fg-soft); }
.cdp-membresia-lista svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--cdp-check); }
.cdp-membresia-precio { margin: 14px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cdp-membresia-ahora { font-size: 24px; font-weight: 800; line-height: 1; color: var(--cdp-fg); }
.cdp-membresia-antes { font-size: 13px; font-weight: 600; color: var(--cdp-fg-soft); text-decoration: line-through; }
.cdp-membresia-periodo { font-size: 12px; color: var(--cdp-fg-soft); }
.cdp-membresia-btn { margin-top: 14px; padding: 12px 16px; background: var(--cdp-mem-btn-bg); color: var(--cdp-mem-btn-fg); font-size: 13px; }
.cdp-membresia-btn:hover, .cdp-membresia-btn:focus { background: var(--cdp-mem-btn-hover); color: var(--cdp-mem-btn-fg); }

/* ---------- Resultados ("Al finalizar..., seras capaz de") ---------- */
.cdp-resultados {
    margin: 20px 0 0; padding: 0; list-style: none;
    display: grid; gap: 10px; grid-template-columns: 1fr;
}
.cdp-resultados li {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 15px 15px 17px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio);
    background: var(--cdp-card);
    font-size: 14px; line-height: 1.55; color: var(--cdp-fg);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.cdp-resultados li::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cdp-cian-500), var(--cdp-azul-600));
}
.cdp-resultados li:hover { border-color: var(--cdp-cian-500); box-shadow: var(--cdp-sombra); }
.cdp-resultados-n {
    flex: none;
    font-size: 17px; font-weight: 800; letter-spacing: -.02em;
    background: var(--cdp-resultado-n-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 768px) {
    .cdp-resultados { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Temario (plan de estudios) ---------- */
.cdp-bloque-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cdp-enlace-accion {
    border: 0; background: none; cursor: pointer; padding: 0;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--cdp-activo);
}
.cdp-enlace-accion:hover { text-decoration: underline; }
.cdp-temario {
    margin-top: 20px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card); overflow: hidden;
}
.cdp-modulo + .cdp-modulo { border-top: 1px solid var(--cdp-line); }
.cdp-modulo > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 16px; cursor: pointer;
    list-style: none;
    font-size: 15px; color: var(--cdp-fg);
}
.cdp-modulo > summary::-webkit-details-marker { display: none; }
.cdp-modulo > summary:hover { background: var(--cdp-modulo-hover); }
.cdp-modulo-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none; border-radius: 9px;
    background: linear-gradient(135deg, var(--cdp-azul-800), var(--cdp-cian-600));
    color: #fff;
    font-size: 13px; font-weight: 800;
}
.cdp-modulo[open] > summary .cdp-modulo-n {
    background: linear-gradient(135deg, var(--cdp-cian-500), var(--cdp-cian-400));
    color: var(--cdp-azul-950);
}
.cdp-modulo-nom { flex: 1; font-weight: 700; line-height: 1.35; }
.cdp-modulo-chev { width: 18px; height: 18px; flex: none; color: var(--cdp-fg-soft); transition: transform .2s; }
.cdp-modulo[open] > summary .cdp-modulo-chev { transform: rotate(180deg); }
.cdp-modulo-temas { margin: 0; padding: 0 16px 16px 56px; list-style: none; display: grid; gap: 7px; }
.cdp-modulo-temas li {
    position: relative;
    padding-left: 16px;
    font-size: 14px; line-height: 1.55; color: var(--cdp-fg-soft);
}
.cdp-modulo-temas li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 6px; height: 6px; border-radius: 999px; background: var(--cdp-cian-500);
}

/* ---------- Docente (conoce a tu instructor) ---------- */
.cdp-instructor {
    position: relative; overflow: hidden;
    margin-top: 22px; padding: 22px;
    display: grid; gap: 18px; grid-template-columns: 1fr;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
}
.cdp-instructor::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--cdp-azul-600), var(--cdp-cian-500), transparent);
}
.cdp-instructor-retrato {
    display: inline-flex; align-items: center; justify-content: center;
    width: 92px; height: 92px; border-radius: 22px;
    background: linear-gradient(135deg, var(--cdp-azul-800), var(--cdp-cian-600));
    color: #fff; font-size: 26px; font-weight: 800; letter-spacing: .04em;
    box-shadow: 0 10px 26px rgba(6, 184, 166, .28);
    object-fit: cover;
}
.cdp-instructor-rol { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cdp-fg-soft); }
.cdp-root h3.cdp-instructor-nom {
    margin: 4px 0 0; font-size: 18px; font-weight: 800; line-height: 1.3;
    color: var(--cdp-fg); text-align: left !important;
    font-family: "Montserrat", sans-serif;
}
.cdp-instructor-bio { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--cdp-fg-soft); }
.cdp-instructor-datos { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--cdp-fg-soft); }
.cdp-instructor-datos strong { color: var(--cdp-fg); }
@media (min-width: 768px) {
    .cdp-instructor { grid-template-columns: auto 1fr; align-items: start; gap: 22px; }
}

/* ---------- Requisitos y perfil (generales por modalidad) ---------- */
.cdp-dos-col { display: grid; gap: 32px; grid-template-columns: 1fr; }
.cdp-root h2.cdp-bloque-titulo--sm { font-size: 18px; }
.cdp-requisitos { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: cdpreq; }
.cdp-requisitos li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; line-height: 1.55; color: var(--cdp-fg-soft);
    counter-increment: cdpreq;
}
.cdp-requisitos li::before {
    content: counter(cdpreq);
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none; border-radius: 999px;
    border: 1px solid var(--cdp-line);
    font-size: 12px; font-weight: 700; color: var(--cdp-fg);
}
.cdp-perfil { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cdp-perfil li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.55; color: var(--cdp-fg-soft);
}
.cdp-perfil svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--cdp-check); }
@media (min-width: 1024px) {
    .cdp-dos-col { grid-template-columns: 1fr 1fr; }
}

/* Foto del docente en el hero: zoom al rostro (las fotos son retratos de busto y a 44 px la cara se pierde) */
.cdp-avatar--foto { position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%); }
.cdp-avatar--foto img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 22%;
    transform: scale(1.35); transform-origin: 50% 26%;
}

/* ============================================================
   Secciones finales: certificados, PDUs, resenas, grupo, confianza,
   compromiso, preguntas, relacionados y barra movil
   ============================================================ */
.cdp-root {
    --cdp-sombra-alta: 0 18px 40px rgba(0, 52, 80, .14);
    --cdp-estado-incluido-bg: rgba(6, 184, 166, .18);
    --cdp-estado-opcional-bg: rgba(74, 112, 137, .2);
    --cdp-estrella: #d97706;
    --cdp-relacionados-bg: var(--cdp-page-alt);
    --cdp-barra-bg: rgba(255, 255, 255, .96);
    --cdp-grupal-btn-bg: var(--cdp-azul-900);
    --cdp-grupal-btn-hover: var(--cdp-azul-800);
}
html.dark .cdp-root {
    --cdp-sombra-alta: 0 18px 40px rgba(0, 0, 0, .45);
    --cdp-estado-opcional-bg: rgba(174, 244, 233, .16);
    --cdp-estrella: #fbbf24;
    --cdp-relacionados-bg: var(--cdp-azul-950);
    --cdp-barra-bg: rgba(0, 31, 48, .96);
}
.cdp-root h2, .cdp-root h3 { text-align: left; }

/* ---------- Certificados (carrusel con scroll-snap) ---------- */
.cdp-carrusel { position: relative; margin-top: 22px; min-width: 0; }
.cdp-carrusel-pista {
    min-width: 0;
    display: grid; gap: 16px;
    grid-auto-flow: column;
    grid-auto-columns: min(300px, 78vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* overflow-x:auto recorta también en vertical; el padding superior (compensado con el margen
       negativo) deja sitio para que la tarjeta se eleve al pasar el cursor sin que se corte arriba */
    padding-top: 6px; margin-top: -6px;
    padding-bottom: 4px;
    /* Sin barra de desplazamiento: se navega con las flechas (y con arrastre/rueda, que siguen funcionando) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cdp-carrusel-pista::-webkit-scrollbar { display: none; }
.cdp-carrusel-pista > * { scroll-snap-align: start; }
.cdp-carrusel-mandos { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* Pie del carrusel: nota de opcionales a la izquierda y flechas a la derecha, en una sola fila */
.cdp-carrusel-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 12px; }
.cdp-carrusel-pie .cdp-certs-nota { flex: 1 1 320px; margin: 0; text-align: left !important; }
.cdp-carrusel-pie .cdp-carrusel-mandos { flex: none; margin: 0 0 0 auto; }
.cdp-carrusel-btn {
    display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0; border-radius: 999px;
    border: 1px solid var(--cdp-line); background: var(--cdp-card); color: var(--cdp-fg);
    cursor: pointer; transition: border-color .18s, color .18s;
}
.cdp-carrusel-btn:hover { border-color: var(--cdp-cian-500); color: var(--cdp-activo); }
.cdp-carrusel-btn:disabled { opacity: .4; cursor: default; }
.cdp-carrusel-btn svg { width: 18px; height: 18px; }
.cdp-carrusel-btn[data-mover="-1"] svg { transform: rotate(90deg); }
.cdp-carrusel-btn[data-mover="1"] svg { transform: rotate(-90deg); }

.cdp-cert {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cdp-cert:hover { border-color: var(--cdp-cian-500); transform: translateY(-3px); box-shadow: var(--cdp-sombra-alta); }
.cdp-cert-lamina {
    position: relative;
    padding: 22px 22px 0;
    background:
        radial-gradient(420px 200px at 80% 0%, rgba(15, 239, 217, .22), transparent 65%),
        linear-gradient(140deg, var(--cdp-azul-1000), var(--cdp-azul-800));
}
.cdp-cert-lamina img {
    display: block; width: 100%; height: auto;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 0 rgba(255, 255, 255, .1), 0 18px 40px rgba(0, 0, 0, .45);
    transform: perspective(900px) rotateX(4deg);
    transform-origin: bottom center;
    transition: transform .3s;
}
.cdp-cert:hover .cdp-cert-lamina img { transform: perspective(900px) rotateX(0deg) translateY(-4px); }
.cdp-cert-lamina--pendiente { display: grid; place-items: center; aspect-ratio: 1600 / 1131; padding: 22px; }
.cdp-cert-pendiente {
    display: grid; justify-items: center; gap: 10px;
    text-align: center; font-size: 13px; font-weight: 600; line-height: 1.5;
    color: rgba(217, 252, 245, .95);
}
.cdp-cert-pendiente svg { width: 34px; height: 34px; color: var(--cdp-cian-400); }
.cdp-cert-pie { padding: 18px; }
.cdp-cert-estado {
    display: inline-block; margin-bottom: 10px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.cdp-cert-estado--incluido { background: var(--cdp-estado-incluido-bg); color: var(--cdp-activo); }
.cdp-cert-estado--opcional { background: var(--cdp-estado-opcional-bg); color: var(--cdp-fg); }
.cdp-cert-pie h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--cdp-fg); }
.cdp-cert-pie p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--cdp-fg-soft); }
.cdp-cert-sellos { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cdp-cert-sellos img {
    width: 34px; height: 34px; padding: 3px; border-radius: 999px;
    background: #fff; object-fit: contain; box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
.cdp-certs-nota {
    margin: 16px 0 0; padding: 14px 16px;
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px dashed var(--cdp-line); border-radius: var(--cdp-radio);
    font-size: 13px; line-height: 1.6; color: var(--cdp-fg-soft);
}
.cdp-certs-nota svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--cdp-activo); }
.cdp-certs-nota strong { color: var(--cdp-fg); }

/* ---------- PDUs ---------- */
.cdp-pdus {
    margin-top: 22px; padding: 24px;
    display: grid; gap: 22px; grid-template-columns: 1fr;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
}
.cdp-pdus-cifra { display: flex; align-items: baseline; gap: 12px; height: fit-content; }
.cdp-pdus-num {
    font-size: 64px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
    background: var(--cdp-ahora-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cdp-pdus-lbl { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--cdp-fg); }
.cdp-pdus-texto p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--cdp-fg-soft); }
.cdp-pdus-texto p + p { margin-top: 12px; }
.cdp-pdus-texto strong { color: var(--cdp-fg); }

/* ---------- Resenas ---------- */
.cdp-resenas { margin-top: 20px; display: grid; gap: 20px; grid-template-columns: 1fr; }
.cdp-resenas-resumen {
    padding: 20px; text-align: center;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card); height: fit-content;
}
.cdp-resenas-nota {
    display: block;
    font-size: 52px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
    background: var(--cdp-ahora-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cdp-resenas-estrellas { display: inline-flex; gap: 3px; margin-top: 8px; }
.cdp-resenas-estrellas svg { width: 16px; height: 16px; color: var(--cdp-estrella); }
.cdp-resenas-base { display: block; margin-top: 8px; font-size: 12px; color: var(--cdp-fg-soft); }
.cdp-resenas-lista { display: grid; gap: 14px; }
.cdp-resena {
    margin: 0; padding: 18px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
}
.cdp-resena blockquote { margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 1.7; color: var(--cdp-fg); }
.cdp-resena blockquote::before { content: "\201C"; }
.cdp-resena blockquote::after { content: "\201D"; }
.cdp-resena figcaption { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--cdp-fg-soft); }

/* ---------- Tarifa de grupo (bloque luminoso, igual en claro y oscuro) ---------- */
.cdp-grupal {
    position: relative; overflow: hidden;
    margin-top: 22px; padding: 26px;
    display: grid; gap: 22px; grid-template-columns: 1fr;
    border-radius: var(--cdp-radio-lg);
    background: linear-gradient(100deg, var(--cdp-cian-500) 0%, var(--cdp-cian-400) 58%, var(--cdp-cian-300) 100%);
    color: var(--cdp-azul-1000);
    box-shadow: 0 18px 44px rgba(6, 184, 166, .3);
}
.cdp-grupal-luz {
    position: absolute; top: -150px; right: -100px;
    width: 360px; height: 360px; border-radius: 999px; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .85), transparent 70%);
    filter: blur(50px);
}
.cdp-grupal-texto, .cdp-grupal-precio { position: relative; z-index: 1; }
.cdp-grupal-tag {
    display: inline-block; margin-bottom: 12px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--cdp-azul-900); color: var(--cdp-cian-300);
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.cdp-grupal h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--cdp-azul-1000); }
.cdp-grupal p { margin: 10px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--cdp-azul-900); }
.cdp-grupal-precio {
    padding: 20px; border-radius: var(--cdp-radio);
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .55);
    text-align: center; height: fit-content;
}
.cdp-grupal-monto { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--cdp-azul-1000); }
.cdp-grupal-unidad { display: block; margin-top: 8px; font-size: 12px; color: var(--cdp-azul-900); }
.cdp-grupal-btn { width: 100%; margin-top: 16px; padding: 13px 18px; background: var(--cdp-grupal-btn-bg); color: #fff; font-size: 14px; }
.cdp-grupal-btn:hover, .cdp-grupal-btn:focus { background: var(--cdp-grupal-btn-hover); color: #fff; }
.cdp-grupal-btn svg { width: 17px; height: 17px; color: #4ade80; }

/* ---------- Por que confiar ---------- */
.cdp-confianza { margin-top: 22px; display: grid; gap: 24px; grid-template-columns: 1fr; }
.cdp-confianza-marco {
    position: relative; overflow: hidden;
    display: grid; place-items: center; gap: 12px;
    aspect-ratio: 16 / 9;
    border-radius: var(--cdp-radio-lg);
    background:
        radial-gradient(520px 240px at 70% 10%, rgba(15, 239, 217, .2), transparent 62%),
        linear-gradient(140deg, var(--cdp-azul-1000), var(--cdp-azul-800));
    text-align: center;
}
.cdp-confianza-play {
    display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}
.cdp-confianza-play svg { width: 26px; height: 26px; }
.cdp-confianza-pend { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: #fff; text-align: center; }
.cdp-confianza-pend span { font-weight: 500; color: rgba(217, 252, 245, .95); }
.cdp-confianza-pie { margin: 12px 0 0; font-size: 13px; color: var(--cdp-fg-soft); }
.cdp-confianza-pie strong { color: var(--cdp-fg); }
.cdp-confianza-razones { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.cdp-confianza-razones li { display: flex; align-items: flex-start; gap: 13px; }
.cdp-confianza-razones h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--cdp-fg); }
.cdp-confianza-razones p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--cdp-fg-soft); }
.cdp-confianza-ico {
    position: relative; isolation: isolate;
    display: grid; place-items: center;
    width: 42px; height: 42px; flex: none; border-radius: 13px;
    background: var(--cdp-tono-suave); color: var(--cdp-tono);
}
.cdp-confianza-ico::after {
    content: ""; position: absolute; inset: 3px; z-index: -1;
    border-radius: inherit; background: var(--cdp-tono);
    filter: blur(12px); opacity: .38;
}
.cdp-confianza-ico svg { width: 20px; height: 20px; }
.cdp-confianza-ico[data-tono="1"], .cdp-compromiso-item[data-tono="1"] { --cdp-tono: #0f766e; --cdp-tono-suave: rgba(15, 118, 110, .14); }
.cdp-confianza-ico[data-tono="3"], .cdp-compromiso-item[data-tono="3"] { --cdp-tono: #4338ca; --cdp-tono-suave: rgba(67, 56, 202, .14); }
.cdp-confianza-ico[data-tono="4"], .cdp-compromiso-item[data-tono="4"] { --cdp-tono: #6d28d9; --cdp-tono-suave: rgba(109, 40, 217, .14); }
.cdp-confianza-ico[data-tono="5"] { --cdp-tono: #b45309; --cdp-tono-suave: rgba(180, 83, 9, .14); }
html.dark .cdp-confianza-ico[data-tono="1"], html.dark .cdp-compromiso-item[data-tono="1"] { --cdp-tono: #5eead4; --cdp-tono-suave: rgba(94, 234, 212, .13); }
html.dark .cdp-confianza-ico[data-tono="3"], html.dark .cdp-compromiso-item[data-tono="3"] { --cdp-tono: #a5b4fc; --cdp-tono-suave: rgba(165, 180, 252, .13); }
html.dark .cdp-confianza-ico[data-tono="4"], html.dark .cdp-compromiso-item[data-tono="4"] { --cdp-tono: #c4b5fd; --cdp-tono-suave: rgba(196, 181, 253, .13); }
html.dark .cdp-confianza-ico[data-tono="5"] { --cdp-tono: #fcd34d; --cdp-tono-suave: rgba(252, 211, 77, .13); }

/* ---------- Compromiso ---------- */
.cdp-compromiso { margin-top: 22px; display: grid; gap: 14px; grid-template-columns: 1fr; }
.cdp-compromiso-item {
    padding: 20px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cdp-compromiso-item:hover { border-color: var(--cdp-cian-500); transform: translateY(-3px); box-shadow: var(--cdp-sombra); }
.cdp-compromiso-ico {
    position: relative; isolation: isolate;
    display: grid; place-items: center;
    width: 50px; height: 50px; border-radius: 16px;
    background: var(--cdp-tono-suave); color: var(--cdp-tono);
    transition: transform .25s;
}
.cdp-compromiso-ico::after {
    content: ""; position: absolute; inset: 4px; z-index: -1;
    border-radius: inherit; background: var(--cdp-tono);
    filter: blur(15px); opacity: .4;
    transition: opacity .25s;
}
.cdp-compromiso-item:hover .cdp-compromiso-ico { transform: translateY(-2px); }
.cdp-compromiso-item:hover .cdp-compromiso-ico::after { opacity: .72; }
.cdp-compromiso-ico svg { width: 24px; height: 24px; }
.cdp-compromiso-item h3 { margin: 14px 0 0; font-size: 16px; font-weight: 800; color: var(--cdp-fg); }
.cdp-compromiso-item p { margin: 7px 0 0; font-size: 13px; line-height: 1.65; color: var(--cdp-fg-soft); }

/* ---------- Preguntas frecuentes ---------- */
.cdp-faq {
    margin-top: 20px;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card); overflow: hidden;
}
.cdp-faq-item + .cdp-faq-item { border-top: 1px solid var(--cdp-line); }
.cdp-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 16px; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 700; color: var(--cdp-fg);
}
.cdp-faq-item > summary::-webkit-details-marker { display: none; }
.cdp-faq-item > summary:hover { background: var(--cdp-modulo-hover); }
.cdp-faq-chev { width: 18px; height: 18px; flex: none; color: var(--cdp-fg-soft); transition: transform .2s; }
.cdp-faq-item[open] > summary .cdp-faq-chev { transform: rotate(180deg); }
.cdp-faq-item p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.7; color: var(--cdp-fg-soft); }

/* ---------- Grupo dentro de la columna de compra ---------- */
.cdp-compra-grupal {
    margin-top: 14px; padding: 18px;
    border: 1px dashed var(--cdp-line); border-radius: var(--cdp-radio-lg);
}
.cdp-compra-grupal h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--cdp-fg); }
.cdp-compra-grupal p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--cdp-fg-soft); }
.cdp-compra-grupal a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--cdp-activo); }
.cdp-compra-grupal a:hover { text-decoration: underline; color: var(--cdp-activo); }

/* ---------- Sigue formandote (cursos relacionados) ---------- */
.cdp-relacionados { margin-top: 56px; padding: 44px 16px 56px; background: var(--cdp-relacionados-bg); }
.cdp-relacionados-inner { max-width: 1280px; margin: 0 auto; }
.cdp-relacionados-grid { margin-top: 22px; display: grid; gap: 18px; grid-template-columns: 1fr; }
.cdp-rel {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--cdp-line); border-radius: var(--cdp-radio-lg);
    background: var(--cdp-card);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cdp-rel:hover { transform: translateY(-4px); border-color: var(--cdp-cian-500); box-shadow: var(--cdp-sombra-alta); }
.cdp-rel-media { display: block; aspect-ratio: 780 / 450; background: var(--cdp-azul-950); overflow: hidden; }
.cdp-rel-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cdp-rel-body { padding: 16px; }
.cdp-rel-tag {
    display: inline-block; padding: 3px 8px; border-radius: 6px;
    background: var(--cdp-cian-500); color: var(--cdp-azul-950);
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.cdp-rel-body h3 { margin: 10px 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.cdp-rel-body h3 a { color: var(--cdp-fg); text-decoration: none; }
.cdp-rel-body h3 a:hover { color: var(--cdp-activo); text-decoration: underline; }
.cdp-rel-body p { margin: 6px 0 0; font-size: 12px; color: var(--cdp-fg-soft); }
.cdp-rel-body p.cdp-rel-precio { margin-top: 10px; font-size: 16px; font-weight: 800; color: var(--cdp-fg); }
.cdp-rel-precio span { font-size: 13px; font-weight: 600; color: var(--cdp-fg-soft); text-decoration: line-through; margin-right: 6px; }

/* ---------- Barra fija de compra en movil ---------- */
.cdp-barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid var(--cdp-line);
    background: var(--cdp-barra-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
    transform: translateY(110%);
    transition: transform .25s ease;
}
.cdp-barra-movil.is-visible { transform: translateY(0); }
.cdp-barra-movil .cdp-btn--comprar { width: auto; margin-top: 0; padding: 11px 20px; }
.cdp-barra-movil-antes { display: block; font-size: 11px; color: var(--cdp-fg-soft); text-decoration: line-through; }
.cdp-barra-movil-precio strong { font-size: 18px; font-weight: 800; color: var(--cdp-fg); }

/* ---------- Curso no encontrado ---------- */
.cdp-vacio { max-width: 640px; margin: 0 auto; padding: 80px 16px; }
.cdp-vacio .cdp-btn { display: inline-flex; width: auto; margin-top: 20px; }

/* ---------- Modales de bootstrap en modo oscuro (antes en CursoDetalleLanding2.css) ---------- */
html.dark .modal-content { border: 1px solid var(--landing-line); background: var(--landing-card); color: var(--landing-fg); }
html.dark .modal-header, html.dark .modal-footer { border-color: var(--landing-line); }
html.dark .modal-title, html.dark .modal-header .close { color: var(--landing-fg); }

@media (min-width: 640px) {
    .cdp-pdus { grid-template-columns: auto 1fr; }
    .cdp-pdus-cifra { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .cdp-resenas { grid-template-columns: 230px 1fr; }
    .cdp-grupal { grid-template-columns: 1fr 260px; align-items: center; padding: 32px; }
    .cdp-compromiso { grid-template-columns: repeat(3, 1fr); }
    .cdp-relacionados { padding-left: 24px; padding-right: 24px; }
    .cdp-relacionados-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cdp-confianza { grid-template-columns: 1fr 1fr; align-items: start; }
    .cdp-relacionados { padding-left: 32px; padding-right: 32px; }
    .cdp-relacionados-grid { grid-template-columns: repeat(3, 1fr); }
    .cdp-barra-movil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cdp-barra-movil { transition: none; }
    .cdp-rel:hover, .cdp-cert:hover, .cdp-compromiso-item:hover { transform: none; }
    .cdp-cert-lamina img, .cdp-cert:hover .cdp-cert-lamina img { transform: none; transition: none; }
}

/* Reparto de PDUs (datos fijos del mockup) */
.cdp-pdus-reparto { margin: 16px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--cdp-line); display: grid; gap: 9px; }
.cdp-pdus-reparto li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--cdp-fg-soft); }
.cdp-pdus-reparto strong { color: var(--cdp-fg); font-variant-numeric: tabular-nums; }