/* =====================================================================
   Landing del curso en directo · wyckoff_live/landing.html
   Mismo lenguaje visual que la web: Plus Jakarta Sans, fondos claros,
   tarjetas bento muy redondeadas, bloques oscuros (#2b2b2b → #111) y
   acentos morado #5b42f3 y rosa #ff3366. La portada reutiliza
   .hero-gradient de static/css/style.css.
   Todas las clases empiezan por .lp- para no chocar con live.css.
   ===================================================================== */

.lp {
    --lp-purple: #5b42f3;
    --lp-pink: #ff3366;
    --lp-ink: #111;
    --lp-muted: #6c6a7a;
    --lp-line: rgba(17, 17, 17, .08);
    --lp-soft: #f8f9fa;
    /* Paleta de la cabecera: azul noche, índigo y texto gris azulado */
    --lp-navy: #0b1033;
    --lp-indigo: #25308f;
    --lp-text: #474c66;
    --lp-line2: #e3e6f3;
    color: var(--lp-ink);
}
.lp h1, .lp h2, .lp h3, .lp h4 { margin-top: 0; }

/* ---------- Utilidades de texto ---------- */
.lp-eyebrow {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--lp-purple);
    margin-bottom: 1rem;
}
.lp-eyebrow--light { color: #cdbdff; }
.lp-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 1.25rem;
}
/* Segunda línea de los titulares con el degradado de marca */
.lp-grad {
    background: linear-gradient(135deg, var(--lp-purple), var(--lp-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-head { max-width: 760px; margin-bottom: 3rem; }
.lp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-head__lead { font-size: 1.15rem; line-height: 1.7; color: var(--lp-muted); margin: 0; }
.lp-footnote { font-size: .85rem; color: var(--lp-muted); margin: 1.75rem 0 0; }
.lp-pill {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    color: var(--lp-purple);
    margin-bottom: .9rem;
}
.lp-pill--brand {
    color: #fff;
    background: linear-gradient(135deg, var(--lp-purple), var(--lp-pink));
    padding: .4rem .9rem;
    border-radius: 50rem;
}

/* ---------- Secciones ---------- */
.lp-section { padding: 6rem 0; background: #fff; }
.lp-section--soft { background: #f6f4fb; }
.lp-section--pricing { background: linear-gradient(135deg, #f3f0ff 0%, #fff5f8 100%); }

/* ---------- Botones ---------- */
.lp-cta { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.lp-cta svg, .lp-btn svg { width: 18px; height: 18px; }
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 0;
    border-radius: 50rem;
    padding: 1rem 1.75rem;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    background: linear-gradient(135deg, var(--lp-purple), var(--lp-pink));
    box-shadow: 0 10px 25px rgba(91, 66, 243, .25);
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(91, 66, 243, .32); }
.lp a:focus-visible, .lp button:focus-visible, .lp select:focus-visible, .lp input:focus-visible {
    outline: 3px solid var(--lp-pink);
    outline-offset: 3px;
}

/* ======================= 1. PORTADA (estilo Founderz) ======================= */
/* Sube por debajo del menú como el resto de cabeceras de la web */
.lp-hero {
    position: relative;
    overflow: hidden;
    margin-top: -80px;
    padding: 150px 0 100px;
    border-radius: 0 0 40px 40px;
    background: #05081f; /* mientras carga la foto */
    color: #fff;
}
.lp-hero__bg { position: absolute; top: 60px; right: 0; bottom: 0; left: 0; }
.lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Sombra azul noche: muy densa bajo el texto, abierta en el centro para la figura */
.lp-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 8, 31, .94) 0%, rgba(8, 12, 48, .82) 34%, rgba(12, 18, 80, .28) 58%, rgba(12, 18, 80, .35) 100%),
        linear-gradient(0deg, rgba(5, 8, 31, .55) 0%, rgba(5, 8, 31, 0) 35%);
}
.lp-hero__inner { position: relative; z-index: 1; }

.lp-alert {
    margin-bottom: 1.5rem;
    padding: .9rem 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    color: #6c4511;
    font-weight: 600;
    text-align: center;
}
.lp-alert--error { color: #a12542; }
.lp-alert a { color: inherit; font-weight: 800; }

.lp-hero__eyebrow { font-size: 1.05rem; font-weight: 600; color: rgba(255, 255, 255, .92); margin-bottom: 1rem; }
.lp-hero-title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.5px;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.lp-soft { display: block; color: rgba(255, 255, 255, .82); }
.lp-hero-lead { font-size: 1.15rem; line-height: 1.65; color: rgba(255, 255, 255, .85); max-width: 600px; margin-bottom: 2.25rem; }

/* En colaboración con: logotipos en blanco */
.lp-partners__label { font-size: 1rem; font-weight: 600; margin-bottom: .9rem; }
.lp-partners { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.lp-partners__logo { height: 44px; width: auto; filter: brightness(0) invert(1); }
.lp-partners__logo--usb { filter: none; } /* ya viene en blanco */
.lp-partners__sep { width: 1px; height: 40px; background: rgba(255, 255, 255, .35); }
.lp-partners__text { font-size: .85rem; line-height: 1.2; color: #fff; letter-spacing: .2px; }
.lp-partners__text strong { font-size: 1.05rem; font-weight: 800; }

/* Ficha blanca (como la de Founderz) */
.lp-hcard {
    max-width: 440px;
    margin-left: auto;
    padding: 2.25rem 2rem 1.75rem;
    border-radius: 1.5rem;
    background: #fff;
    color: var(--lp-ink);
    box-shadow: 0 30px 70px rgba(5, 8, 31, .35);
}
.lp-hcard__edition { font-size: 1rem; font-weight: 700; color: var(--lp-purple); margin-bottom: .35rem; }
.lp-hcard__offer {
    display: inline-block;
    margin: .35rem 0 .25rem;
    padding: .3rem .8rem;
    border-radius: 50rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--lp-purple), var(--lp-pink));
}
.lp-hcard__price { font-size: 3.5rem; font-weight: 500; letter-spacing: -1.5px; line-height: 1.1; margin: 0; }
.lp-hcard__old { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: #999; }
.lp-hcard__terms { font-size: .95rem; font-weight: 700; margin: .25rem 0 1.25rem; }
.lp-hcard__status { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin: .5rem 0 1.25rem; }
.lp-hcard__list { list-style: disc; padding-left: 1.2rem; margin: 0 0 1.5rem; }
.lp-hcard__list li { font-size: 1.02rem; line-height: 1.45; padding: .25rem 0; }
.lp-hcard__list li::marker { color: var(--lp-ink); }
.lp-hcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.lp-hbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .65rem 1rem;
    border-radius: 50rem;
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lp-hbtn--solid { background: var(--lp-purple); color: #fff !important; border: 1px solid var(--lp-purple); }
.lp-hbtn--solid:hover { background: #4a35c4; border-color: #4a35c4; }
.lp-hbtn--outline { background: #fff; color: var(--lp-ink) !important; border: 1px solid var(--lp-ink); }
.lp-hbtn--outline:hover { background: var(--lp-ink); color: #fff !important; }
.lp-hcard__foot { margin: 1.1rem 0 0; font-size: .9rem; line-height: 1.5; text-align: center; color: var(--lp-muted); }
.lp-hcard__foot a { color: var(--lp-purple); font-weight: 700; text-decoration: none; }
.lp-hcard__foot a:hover { text-decoration: underline; }

/* ======================= 2. POR QUÉ ESTE CURSO (texto + vídeo + desplegables) ======================= */
/* Paleta de la cabecera: azul noche, índigo y el morado de marca (sin rosa) */
.lp-why {
    --why-navy: #0b1033;
    --why-indigo: #25308f;
    --why-text: #474c66;
    --why-line: #e3e6f3;
    --why-tint: #f3f2ff;
    background: #fff;
}
.lp-why__eyebrow { color: var(--lp-purple); }
.lp-why__title { color: var(--why-navy); }
/* Segunda línea del título: degradado índigo → morado, como la cabecera */
.lp-grad-blue {
    background: linear-gradient(135deg, var(--lp-indigo) 0%, var(--lp-purple) 100%); /* paleta de toda la landing */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-why__text { font-size: 1.05rem; line-height: 1.75; color: var(--why-text); }
.lp-why__text p { margin-bottom: 1.1rem; }
.lp-why__text p:last-child { margin-bottom: 0; }
.lp-why__lead { font-size: 1.15rem; font-weight: 600; color: var(--why-navy); }

/* Vídeo 16:9 con esquinas redondeadas y sombra azul noche */
.lp-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #05081f; /* se ve mientras carga el reproductor */
    box-shadow: 0 30px 60px rgba(5, 8, 31, .22);
}
.lp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Desplegables: fila de cinco tarjetas que se abren por separado */
.lp-drops {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: start; /* abrir una no estira las demás */
    margin: 3.5rem 0 2.5rem;
}
.lp-drop {
    background: #fff;
    border: 1px solid var(--why-line);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(11, 16, 51, .04);
    transition: background-color .2s ease, border-color .2s ease;
}
.lp-drop summary,
.lp-drop--static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 70px;
    padding: .9rem 1.25rem;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.3;
    color: var(--why-navy);
}
.lp-drop summary { cursor: pointer; list-style: none; }
.lp-drop summary::-webkit-details-marker { display: none; }
.lp-drop summary svg,
.lp-drop--static svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--why-navy); transition: transform .25s ease; }
.lp-drop--static svg { color: var(--lp-purple); }
.lp-drop[open] { background: var(--why-tint); border-color: #dcd8ff; }
.lp-drop[open] summary svg { transform: rotate(180deg); }
.lp-drop summary:hover { color: var(--why-indigo); }
.lp-drop ul { margin: 0; padding: 0 1.25rem 1rem 2.4rem; }
.lp-drop li { font-size: .92rem; line-height: 1.45; color: var(--why-text); padding: .2rem 0; }
.lp-drop li::marker { color: var(--why-navy); }
.lp-drop__dates { list-style: none; padding-left: 1.25rem !important; }
.lp-drop__dates li { display: flex; justify-content: space-between; gap: .75rem; border-top: 1px solid #e6e4fb; padding: .4rem 0; }
.lp-drop__dates li:first-child { border-top: 0; }
.lp-drop__dates b { color: var(--why-navy); font-weight: 700; }
.lp-drop__dates span { white-space: nowrap; }
/* El PACK tiene muchos cursos: lista con desplazamiento propio */
.lp-drop__scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.lp-drop__note { margin: 0; padding: 0 1.25rem 1rem; font-size: .82rem; color: var(--why-text); }
.lp-drop__note--top { padding-bottom: .5rem; font-weight: 700; color: var(--why-indigo); }
.lp-drop__note a { color: var(--lp-purple); font-weight: 700; text-decoration: none; }
.lp-drop__note a:hover { text-decoration: underline; }
.lp-why__cta { min-width: 200px; padding: .8rem 1.75rem; }

/* ---------- Franja del dossier PDF (final de la sección 2) ----------
   Minimalista: miniatura de la portada, una línea de texto y el campo de
   email con el botón dentro. Al enviarlo cambia al estado final. */
.lp-dossier {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 470px);
    align-items: center;
    gap: 1rem 1.75rem;
    max-width: 1040px;
    margin: 3.5rem auto 0;
    padding: 1rem 1.25rem 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--lp-line2);
    border-radius: 1.5rem;
    box-shadow: 0 22px 44px -32px rgba(11, 16, 51, .4);
    scroll-margin-top: 110px;
}
.lp-dossier__cover { padding: .2rem .35rem; }
.lp-dossier__cover img {
    display: block;
    width: 56px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 10px 18px -8px rgba(11, 16, 51, .5);
    transform: rotate(-4deg);
}
.lp-dossier__title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--lp-navy); }
.lp-dossier__sub { margin: .15rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--lp-text); }
.lp-dossier__form { margin: 0; }
.lp-dossier__form[hidden], .lp-dossier__done[hidden] { display: none !important; }

/* Campo de email con el botón dentro */
.lp-dossier__field {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem;
    background: #f6f7fd;
    border: 1px solid var(--lp-line2);
    border-radius: 50rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.lp-dossier__field:focus-within { background: #fff; border-color: var(--lp-purple); box-shadow: 0 0 0 3px rgba(91, 66, 243, .15); }
.lp-dossier__field input {
    flex: 1;
    min-width: 0;
    padding: .5rem .9rem;
    border: 0;
    background: transparent;
    font-size: .95rem;
    color: var(--lp-navy);
    outline: none;
}
.lp-dossier__field input::placeholder { color: #8a8fa8; }
.lp-dossier__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .62rem 1.15rem;
    border: 0;
    border-radius: 50rem;
    background: var(--lp-purple);
    color: #fff !important;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, opacity .2s ease;
}
.lp-dossier__btn:hover { background: #4a35c4; }
.lp-dossier__btn svg { width: 16px; height: 16px; }
.lp-dossier.is-loading .lp-dossier__btn { opacity: .65; cursor: progress; }

/* Aceptación de privacidad, mensajes y antispam */
.lp-dossier__consent {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .5rem .5rem 0;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--lp-muted);
    cursor: pointer;
}
.lp-dossier__consent input { flex: 0 0 auto; margin-top: .1rem; accent-color: var(--lp-purple); }
.lp-dossier__consent a { color: var(--lp-purple); font-weight: 700; text-decoration: none; }
.lp-dossier__consent a:hover { text-decoration: underline; }
.lp-dossier__msg { margin: .4rem .5rem 0; font-size: .8rem; font-weight: 600; color: #a12542; }
.lp-dossier__msg:empty { display: none; }
.lp-dossier__captcha { margin-top: .4rem; }
.lp-dossier__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Estado final */
.lp-dossier__done { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.lp-dossier__ok { display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.4; color: var(--lp-navy); }
.lp-dossier__ok svg { flex: 0 0 auto; width: 20px; height: 20px; color: #1f9d6b; }
.lp-dossier__ok strong { overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
    /* Tablet: miniatura y texto arriba, formulario debajo a todo el ancho */
    .lp-dossier { grid-template-columns: auto minmax(0, 1fr); max-width: 640px; }
    .lp-dossier__form, .lp-dossier__done { grid-column: 1 / -1; }
    .lp-dossier__done { justify-content: space-between; }
}
@media (max-width: 575.98px) {
    .lp-dossier { margin-top: 2.5rem; padding: 1rem; gap: .9rem 1rem; border-radius: 1.25rem; }
    .lp-dossier__cover img { width: 46px; }
    .lp-dossier__title { font-size: 1rem; }
    .lp-dossier__sub { font-size: .84rem; }
    .lp-dossier__field input { padding: .5rem .7rem; }
    .lp-dossier__btn { padding: .62rem .95rem; }
    .lp-dossier__done { flex-direction: column; align-items: stretch; }
}

/* ======================= 3. LAS CLASES EN DIRECTO (texto + temario + fechas) ======================= */
/* Fondo de bloque destacado (secciones 3 y 5): tinte índigo, trama de puntos y esquinas redondeadas */
.lp-tint {
    position: relative;
    border-radius: 3rem;
    background-color: #eef0fa;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(37, 48, 143, .08) 1px, transparent 0),
        linear-gradient(180deg, #eef0fa 0%, #f6f7fd 100%);
    background-size: 22px 22px, 100% 100%;
}
.lp-classes__title { color: var(--lp-navy); }
.lp-classes__text { font-size: 1.02rem; line-height: 1.75; color: var(--lp-text); }
.lp-classes__text p { margin-bottom: 1rem; }
.lp-classes__label { font-weight: 700; color: var(--lp-navy); margin: 1.75rem 0 .75rem; }

/* Etiquetas del formato de las clases */
.lp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.75rem; }
.lp-tags li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 50rem;
    background: #fff;
    border: 1px solid #d8dbea;
    font-size: .88rem;
    font-weight: 600;
    color: var(--lp-navy);
}
.lp-tags svg { width: 16px; height: 16px; color: var(--lp-purple); }

/* Botón con borde (como "Descarga el temario" de Founderz) */
.lp-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: 50rem;
    border: 1px solid var(--lp-purple);
    color: var(--lp-purple) !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.lp-outline-btn svg { width: 18px; height: 18px; }
.lp-outline-btn:hover { background: var(--lp-purple); color: #fff !important; }

/* Módulos del temario */
.lp-modules { display: grid; gap: 1rem; }
.lp-mod {
    background: #fff;
    border: 1px solid var(--lp-line2);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(11, 16, 51, .04);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-mod[open] { border-color: #d6d2ff; box-shadow: 0 12px 30px rgba(37, 48, 143, .08); }
.lp-mod summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
}
.lp-mod summary::-webkit-details-marker { display: none; }
.lp-mod summary > svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--lp-purple); transition: transform .25s ease; }
.lp-mod[open] summary > svg { transform: rotate(180deg); }
.lp-mod__head { display: flex; flex-direction: column; gap: .25rem; }
.lp-mod__num { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--lp-indigo); }
.lp-mod__title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--lp-purple); }
.lp-mod summary:hover .lp-mod__title { color: var(--lp-indigo); }
.lp-mod__badge {
    padding: .15rem .55rem;
    border-radius: 50rem;
    font-size: .65rem;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-purple));
}
.lp-mod ul { margin: 0; padding: 0 1.5rem 1.4rem 2.75rem; }
.lp-mod li { font-size: 1rem; line-height: 1.6; color: var(--lp-text); padding: .3rem 0; }
.lp-mod li::marker { color: var(--lp-purple); }

/* Fechas y horarios, debajo del temario */
.lp-dates { margin-top: 4rem; scroll-margin-top: 1.5rem; }
.lp-dates__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.6px; color: var(--lp-navy); margin: 0 0 .5rem; }
.lp-dates__lead { margin: 0 0 1.25rem; color: var(--lp-text); }

/* ======================= 4. TODO PRECIO Y VOLUMEN (texto + cifras + explorador) ======================= */
.lp-pack { background: #fff; }
.lp-pack__title { color: var(--lp-navy); }
.lp-pack__text { font-size: 1.05rem; line-height: 1.75; color: var(--lp-text); }
.lp-pack__text p { margin-bottom: 1rem; }
.lp-pack__text p:last-child { margin-bottom: 0; }
.lp-pack__text strong { color: var(--lp-navy); }
.lp-pack__owned {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: .55rem 1rem;
    border-radius: 50rem;
    background: rgba(91, 66, 243, .08);
    color: var(--lp-indigo);
    font-weight: 700;
    font-size: .92rem;
}
.lp-pack__owned svg { width: 18px; height: 18px; color: var(--lp-purple); }

/* Cifras 2 × 2 */
.lp-pack__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp-stat {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid var(--lp-line2);
    box-shadow: 0 10px 30px rgba(11, 16, 51, .05);
}
.lp-stat__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(91, 66, 243, .09);
    color: var(--lp-purple);
}
.lp-stat__icon svg { width: 20px; height: 20px; }
.lp-stat strong { font-size: 2rem; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--lp-navy); }
.lp-stat > span:last-child { font-size: .92rem; color: var(--lp-text); margin-top: .25rem; }
/* La cuarta, en el azul de la cabecera */
.lp-stat--brand { background: linear-gradient(135deg, var(--lp-navy), var(--lp-indigo)); border-color: transparent; }
.lp-stat--brand strong { color: #fff; }
.lp-stat--brand > span:last-child { color: rgba(255, 255, 255, .78); }
.lp-stat--brand .lp-stat__icon { background: rgba(255, 255, 255, .14); color: #fff; }

/* Explorador: el negro de la página del PACK pasa al azul noche de la cabecera */
.lp-explorer {
    position: relative;
    margin-top: 3.5rem;
    padding: 2rem;
    border-radius: 2rem;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0%, rgba(91, 66, 243, .38), transparent 55%),
        linear-gradient(160deg, #05081f 0%, #0b1033 55%, #18207a 100%);
    box-shadow: 0 30px 70px rgba(5, 8, 31, .25);
}
.lp-explorer__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.lp-explorer__eyebrow { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: 1.6px; color: #b9adff; }
.lp-explorer__meta { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .6); }

/* Altura común de las tres columnas: cada una se desplaza por dentro */
.lp-explorer__grid {
    --explorer-h: 520px;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 0;
}
.lp-explorer__list {
    max-height: var(--explorer-h);
    overflow-y: auto;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, .1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.lp-explorer__tab {
    display: block;
    width: 100%;
    padding: .85rem 1rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 .75rem .75rem 0;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.lp-explorer__tab span { display: block; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.lp-explorer__tab small { display: block; margin-top: .15rem; font-size: .75rem; color: rgba(255, 255, 255, .4); }
.lp-explorer__tab:hover { color: rgba(255, 255, 255, .85); }
.lp-explorer__tab.is-active { color: #fff; background: rgba(91, 66, 243, .2); border-left-color: #8f7bff; }
.lp-explorer__tab.is-active small { color: #b9adff; }
/* Más específico que el foco rosa general (.lp button:focus-visible): sobre el azul se ve mejor el lila */
.lp .lp-explorer__tab:focus-visible, .lp .lp-explorer__select:focus-visible { outline: 2px solid #b9adff; outline-offset: -2px; }

/* Panel del curso elegido: temario + profesores */
.lp-explorer__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
.lp-explorer__panel[hidden] { display: none; }
.lp-explorer__content {
    max-height: var(--explorer-h);
    overflow-y: auto;
    padding: 0 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, .1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.lp-explorer__course { font-size: 1.35rem; font-weight: 800; letter-spacing: -.4px; margin-bottom: .75rem; }
.lp-explorer__desc { font-size: .92rem; line-height: 1.7; color: rgba(255, 255, 255, .62); margin-bottom: 1.5rem; }
.lp-explorer__section { margin-bottom: 1.5rem; }
.lp-explorer__section h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: .65rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.lp-explorer__section ul { list-style: none; margin: 0; padding: 0; }
.lp-explorer__section li { display: flex; gap: .75rem; align-items: baseline; padding: .4rem 0; font-size: .9rem; color: rgba(255, 255, 255, .72); }
.lp-explorer__section li::before { content: '→'; color: #8f7bff; flex: 0 0 auto; }
.lp-explorer__section li small { margin-left: auto; flex: 0 0 auto; font-size: .75rem; color: rgba(255, 255, 255, .35); }

.lp-explorer__profs { padding-left: 1.5rem; }
.lp-explorer__profs-title { font-size: .75rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #b9adff; margin-bottom: 1rem; }
.lp-prof { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.lp-prof img, .lp-prof__initial {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .15);
}
.lp-prof__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-purple));
}
.lp-prof__name { margin: 0; font-weight: 700; font-size: .92rem; }
.lp-prof__role { margin: .1rem 0 0; font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .5); }

/* Desplegable de cursos: solo en móvil y tablet */
.lp-explorer__select {
    display: none;
    width: 100%;
    margin-bottom: 1.25rem;
    padding: .8rem 1rem;
    border-radius: .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 700;
}
.lp-explorer__select option { color: var(--lp-navy); }

/* ======================= 5. ESPACIO WYCKOFF (texto + precio + bento de herramientas) ======================= */
.lp-space__title { color: var(--lp-navy); }
.lp-space__text { font-size: 1.05rem; line-height: 1.75; color: var(--lp-text); }
.lp-space__text p { margin-bottom: 1rem; }
.lp-space__text p:last-child { margin-bottom: 0; }

/* Ficha de precio: el azul de la cabecera */
.lp-space__price {
    padding: 1.75rem;
    border-radius: 1.5rem;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(91, 66, 243, .45), transparent 60%),
        linear-gradient(150deg, var(--lp-navy) 0%, var(--lp-indigo) 100%);
    box-shadow: 0 24px 50px rgba(11, 16, 51, .22);
}
.lp-space__price-label { margin: 0 0 .5rem; font-size: .8rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #b9adff; }
.lp-space__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 1.25rem; }
.lp-space__price-row s { font-size: 1.1rem; color: rgba(255, 255, 255, .55); }
.lp-space__price-row strong { font-size: 2rem; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.lp-space__price-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
.lp-space__price-list li { display: flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; }
.lp-space__price-list svg { flex: 0 0 18px; width: 18px; height: 18px; color: #b9adff; }
.lp-space__price-foot { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .82rem; color: rgba(255, 255, 255, .7); }

/* Tarjetas de herramienta */
.lp-space__grid { margin-top: 2.5rem; }
.lp-tool {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 1.5rem;
    border-radius: 1.5rem;
    background: #fff;
    border: 1px solid var(--lp-line2);
    box-shadow: 0 10px 30px rgba(11, 16, 51, .06);
}
.lp-tool__body { display: flex; gap: .9rem; padding: 1.25rem .5rem 0; }
.lp-tool__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 66, 243, .09);
    color: var(--lp-purple);
}
.lp-tool__icon svg { width: 20px; height: 20px; }
.lp-tool h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.3px; color: var(--lp-navy); margin: .3rem 0 .4rem; }
.lp-tool p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--lp-text); }

/* Marco de aplicación para las capturas */
.lp-frame {
    border-radius: 1rem;
    overflow: hidden;
    background: #f5f6fc;
    border: 1px solid var(--lp-line2);
}
.lp-frame__bar { display: flex; gap: .35rem; padding: .55rem .75rem; background: #eceef8; border-bottom: 1px solid var(--lp-line2); }
.lp-frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: #c9cde3; }
.lp-frame__bar span:first-child { background: #ff8fa8; }
.lp-frame__bar span:nth-child(2) { background: #ffd48a; }
.lp-frame__bar span:nth-child(3) { background: #9be3b8; }
.lp-frame img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) {
    .lp-frame { height: 300px; display: flex; flex-direction: column; }
    .lp-frame picture { flex: 1; min-height: 0; display: block; }
    .lp-frame img { height: 100%; object-fit: cover; object-position: left top; }
    .lp-frame--chart img { object-position: center 35%; }
    .lp-doc { flex: 0 0 auto; height: 300px; overflow: hidden; }
}

/* Vista de un informe integral (estructura del documento) */
.lp-doc {
    min-height: 220px;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lp-line2);
    box-shadow: inset 0 0 0 6px #f5f6fc;
}
.lp-doc__head {
    display: grid;
    gap: .45rem;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, var(--lp-navy), var(--lp-indigo));
}
.lp-doc__tag { font-size: .7rem; font-weight: 800; letter-spacing: 1.6px; color: #b9adff; }
.lp-doc__line { display: block; height: 10px; border-radius: 50rem; background: rgba(255, 255, 255, .85); }
.lp-doc__line--title { width: 70%; height: 14px; }
.lp-doc__line--sub { width: 45%; background: rgba(255, 255, 255, .4); }
/* Portada real del informe */
.lp-doc .lp-doc__company { display: flex; align-items: center; gap: .6rem; margin: .35rem 0 0; color: #fff; }
.lp-doc .lp-doc__company strong { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.lp-doc__ticker {
    flex: 0 0 auto;
    padding: .2rem .55rem;
    border-radius: .45rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--lp-navy);
    background: #fff;
}
.lp-doc .lp-doc__title {
    margin: 0;
    font-size: .86rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
    display: -webkit-box;          /* máximo dos líneas */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp-doc .lp-doc__toc-label { margin: 0; padding: .8rem 1.4rem 0; font-size: .75rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lp-text); }
.lp-doc__toc { margin: 0; padding: .35rem 1.4rem 1rem 2.6rem; }
.lp-doc__toc li { padding: .22rem 0; font-size: .88rem; font-weight: 600; color: var(--lp-navy); border-bottom: 1px dashed #e3e6f3; }
.lp-doc__toc li:last-child { border-bottom: 0; }
.lp-doc__toc li::marker { color: var(--lp-purple); font-weight: 800; }

/* ======================= 6. CERTIFICACIÓN WYCKOFF ESSENTIAL ======================= */
.lp-cert { background: #fff; overflow: hidden; }
.lp-cert__title { color: var(--lp-navy); }
.lp-cert__text { font-size: 1.05rem; line-height: 1.75; color: var(--lp-text); }
.lp-cert__text p { margin-bottom: 1rem; }

/* Tres datos clave */
.lp-cert__facts { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: .85rem; }
.lp-cert__facts li { display: flex; align-items: center; gap: .85rem; }
.lp-cert__facts strong { display: block; color: var(--lp-navy); font-size: 1rem; }
.lp-cert__facts li > span:last-child { font-size: .9rem; color: var(--lp-text); line-height: 1.4; }
.lp-cert__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 66, 243, .09);
    color: var(--lp-purple);
}
.lp-cert__icon svg { width: 20px; height: 20px; }

/* Logotipos de quien lo expide, a color sobre blanco */
.lp-cert__issuers-label { margin: 0 0 .6rem; font-size: .75rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lp-text); }
.lp-cert__issuers { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lp-cert__issuers img { height: 44px; width: auto; }
.lp-cert__sep { width: 1px; height: 36px; background: var(--lp-line2); }

/* Certificado: papel ligeramente girado sobre un halo de la paleta */
.lp-cert__figure { position: relative; padding: 1.5rem 0; }
.lp-cert__figure::before {
    content: '';
    position: absolute;
    inset: 8% 6%;
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-purple));
    filter: blur(50px);
    opacity: .22;
}
.lp-cert__paper {
    position: relative;
    border-radius: .9rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lp-line2);
    box-shadow: 0 30px 60px rgba(11, 16, 51, .18);
    transform: rotate(-1.5deg);
    transition: transform .4s ease;
}
.lp-cert__paper:hover { transform: rotate(0deg) scale(1.01); }
.lp-cert__paper img { display: block; width: 100%; height: auto; }
.lp-cert__caption { position: relative; margin-top: 1.25rem; text-align: center; font-size: .85rem; color: var(--lp-text); }

/* ======================= 7. GRUPO PRIVADO DE WHATSAPP (texto + móvil con chat de ejemplo) ======================= */
.lp-group__title { color: var(--lp-navy); }
.lp-group__text { font-size: 1.05rem; line-height: 1.75; color: var(--lp-text); }
.lp-group__text p { margin-bottom: 1rem; }
.lp-group__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.lp-group__list li { display: flex; align-items: center; gap: .8rem; }
.lp-group__list strong { display: block; color: var(--lp-navy); font-size: .98rem; }
.lp-group__list li > span:last-child { font-size: .88rem; line-height: 1.4; color: var(--lp-text); }

/* Móvil: marco azul noche, como la cabecera */
.lp-phone { max-width: 360px; margin: 0 auto; }
.lp-phone__screen {
    display: flex;
    flex-direction: column;
    height: 720px;
    border-radius: 2.6rem;
    border: 10px solid var(--lp-navy);
    overflow: hidden;
    background: #efeae2;
    box-shadow: 0 40px 80px rgba(11, 16, 51, .28), 0 0 0 1px rgba(255, 255, 255, .3) inset;
}
.lp-phone__caption { margin-top: 1rem; text-align: center; font-size: .85rem; color: var(--lp-text); }

/* Chat con el aspecto de WhatsApp (sin su logotipo) */
.lp-chat__head { display: flex; align-items: center; gap: .55rem; padding: 1.4rem .9rem .75rem; background: #008069; color: #fff; }
.lp-chat__back svg { width: 20px; height: 20px; }
.lp-chat__avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-purple));
}
.lp-chat__avatar svg { width: 20px; height: 20px; }
.lp-chat__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lp-chat__info strong { font-size: .95rem; }
.lp-chat__info small { font-size: .72rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lp-chat__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .4rem;
    padding: .6rem .7rem;
    overflow: hidden;
    background-color: #efeae2;
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .05) 1px, transparent 0);
    background-size: 16px 16px;
}
.lp-chat__day {
    align-self: center;
    margin: .1rem 0 .25rem;
    padding: .2rem .6rem;
    border-radius: .5rem;
    background: #fff;
    font-size: .65rem;
    font-weight: 700;
    color: #54656f;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.lp-msg {
    position: relative;
    align-self: flex-start;
    max-width: 85%;
    padding: .35rem .55rem 1.05rem;
    border-radius: .2rem .75rem .75rem .75rem;
    background: #fff;
    color: #111b21;
    font-size: .78rem;
    line-height: 1.33;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.lp-msg time { position: absolute; right: .5rem; bottom: .2rem; display: inline-flex; align-items: center; gap: .15rem; font-size: .62rem; color: #667781; }
.lp-msg time svg { width: 14px; height: 14px; color: #53bdeb; }
.lp-msg__name { display: block; margin-bottom: .1rem; font-size: .72rem; font-weight: 700; }
.lp-msg__name--1 { color: #c2185b; }
.lp-msg__name--3 { color: var(--lp-purple); }
.lp-msg__name--4 { color: #00838f; }
/* Mensaje propio (del alumno que mira) */
.lp-msg--out { align-self: flex-end; background: #d9fdd3; border-radius: .75rem .2rem .75rem .75rem; }
.lp-msg--image img { display: block; width: 100%; height: auto; margin: .15rem 0 .3rem; border-radius: .45rem; }
.lp-msg--image { width: 58%; }
.lp-msg__doc { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .35rem; padding: .45rem .55rem; border-radius: .45rem; background: #f5f6f6; }
.lp-msg__doc svg { flex: 0 0 26px; width: 26px; height: 26px; color: #e53935; }
.lp-msg__doc b { display: block; font-size: .78rem; }
.lp-msg__doc small { font-size: .65rem; color: #667781; }

.lp-chat__input { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem .9rem; background: #efeae2; }
.lp-chat__input > span:first-child { flex: 1; padding: .55rem .9rem; border-radius: 50rem; background: #fff; font-size: .8rem; color: #8696a0; }
.lp-chat__send { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #008069; color: #fff; }
.lp-chat__send svg { width: 18px; height: 18px; }

/* ======================= Horario + mapamundi (dentro de la sección 3) ======================= */
/* Lista de clases (un tercio) */
.lp-schedule {
    background: #fff;
    border: 1px solid var(--lp-line2);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(11, 16, 51, .05);
    overflow: hidden;
}
.lp-schedule__zone {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .9rem 1.25rem;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--lp-navy), var(--lp-indigo)); /* la cabecera, en pequeño */
}
.lp-schedule__zone svg { flex: 0 0 18px; width: 18px; height: 18px; }
.lp-schedule__zone strong { font-weight: 800; }
.lp-schedule__list { list-style: none; margin: 0; padding: .25rem 0; }
.lp-schedule__list li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    border-top: 1px solid #eef0f8;
}
.lp-schedule__list li:first-child { border-top: 0; }
.lp-schedule__n {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    color: var(--lp-purple);
    background: rgba(91, 66, 243, .09);
}
.lp-schedule__when { font-size: .95rem; color: var(--lp-text); }
.lp-schedule__when b { color: var(--lp-navy); text-transform: capitalize; }
.lp-schedule__when [data-date] { text-transform: uppercase; font-size: .85rem; }
.lp-schedule__time { font-weight: 800; color: var(--lp-purple); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tarjeta del mapa (dos tercios) */
.lp-map-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--lp-line2);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(11, 16, 51, .05);
}
.lp-map-card__hint { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-weight: 700; color: var(--lp-navy); }
.lp-map-card__hint svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--lp-purple); }
.lp-map { position: relative; aspect-ratio: 360 / 132; margin: auto 0; }
.lp-map img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Marcadores de ciudad */
.lp-map__pin {
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--lp-indigo);
    box-shadow: 0 2px 6px rgba(11, 16, 51, .3);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease;
}
.lp-map__pin:hover, .lp-map__pin:focus-visible { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }
.lp-map__pin.is-active { background: var(--lp-purple); z-index: 2; animation: lpPin 2s ease-out infinite; }
@keyframes lpPin {
    0%   { box-shadow: 0 0 0 0 rgba(91, 66, 243, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(91, 66, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(91, 66, 243, 0); }
}
/* Nombre de la ciudad: visible en la elegida y al pasar el ratón */
.lp-map__label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: .25rem .6rem;
    border-radius: 50rem;
    background: var(--lp-navy);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
/* Etiqueta a un lado cuando hay otra ciudad justo encima */
.lp-map__pin--left .lp-map__label, .lp-map__pin--right .lp-map__label { bottom: auto; top: 50%; transform: translateY(-50%); }
.lp-map__pin--left .lp-map__label { left: auto; right: calc(100% + 8px); }
.lp-map__pin--right .lp-map__label { left: calc(100% + 8px); }
.lp-map__pin.is-active .lp-map__label,
.lp-map__pin:hover .lp-map__label,
.lp-map__pin:focus-visible .lp-map__label { opacity: 1; }

/* Botones de ciudad bajo el mapa */
.lp-zones { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.lp-zone {
    padding: .4rem .85rem;
    border-radius: 50rem;
    border: 1px solid #d8dbea;
    background: #fff;
    color: var(--lp-navy);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lp-zone:hover { border-color: var(--lp-purple); color: var(--lp-purple); }
.lp-zone.is-active { background: var(--lp-purple); border-color: var(--lp-purple); color: #fff; }
.lp-zone--local { border-style: dashed; }

/* ======================= 6. PROFESOR ======================= */
.lp-teacher-photo {
    max-width: 440px;
    margin: 0 auto;
    border-radius: 2rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #2b2b2b;
    box-shadow: 0 30px 60px rgba(17, 17, 30, .18);
    position: relative;
}
/* Detalle de marca: borde degradado sutil */
.lp-teacher-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(135deg, var(--lp-purple), var(--lp-pink));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.lp-teacher-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-bio { font-size: 1.05rem; line-height: 1.8; color: #333; }
.lp-bio a { color: var(--lp-purple); font-weight: 700; }
.lp-creds { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 1.5rem 0 0; }
.lp-creds li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 700;
    padding: .55rem 1rem;
    border-radius: 50rem;
    background: var(--lp-soft);
    border: 1px solid var(--lp-line);
}
.lp-creds svg { width: 16px; height: 16px; color: var(--lp-purple); }

/* ======================= 7. INSCRIPCIÓN ======================= */
.lp-price-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 2rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 70px rgba(91, 66, 243, .14);
    border: 1px solid rgba(91, 66, 243, .12);
}
.lp-price-card__main { padding: 3rem; text-align: center; }
.lp-price-card__special { font-size: .95rem; color: var(--lp-muted); margin: 0 0 .5rem; }
.lp-price { font-size: 4.5rem; font-weight: 800; letter-spacing: -3px; line-height: 1.1; margin: .25rem 0 .25rem; }
.lp-price__cur { font-size: 2rem; letter-spacing: -1px; }
.lp-price__old {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #999;
    text-decoration: line-through;
}
.lp-price-card__terms { font-size: .85rem; color: var(--lp-muted); margin-bottom: 1.75rem; }
.lp-checkout h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .75rem; }
.lp-checkout p { font-size: .95rem; color: var(--lp-muted); }
.lp-checkout .lp-btn { width: 100%; }
.lp-confirm { display: flex; gap: .6rem; align-items: flex-start; text-align: left; font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; cursor: pointer; }
.lp-confirm input { margin-top: .3rem; accent-color: var(--lp-purple); flex: 0 0 auto; }
.lp-login-hint { margin: 1.25rem 0 0; font-size: .9rem; }
.lp-login-hint a { color: var(--lp-purple); font-weight: 700; }
.lp-price-card__seats { display: inline-flex; align-items: center; gap: .4rem; margin: 1.5rem 0 0; font-size: .85rem; color: var(--lp-muted); }
.lp-price-card__seats svg { width: 16px; height: 16px; }

.lp-price-card__side {
    padding: 3rem;
    background: linear-gradient(180deg, #2b2b2b 0%, #111 100%);
    color: #fff;
}
.lp-price-card__side-title { font-size: .75rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #cdbdff; margin-bottom: 1.25rem; }
.lp-checklist { list-style: none; padding: 0; margin: 0; }
.lp-checklist li {
    position: relative;
    padding: .8rem 0 .8rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .98rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}
.lp-checklist li:first-child { border-top: 0; }
.lp-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: .8rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lp-purple), var(--lp-pink));
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-checklist strong { color: #fff; }
.lp-checklist span { display: block; font-size: .8rem; color: #cdbdff; }

.lp-pack-note {
    max-width: 1000px;
    margin: 1.5rem auto 0;
    padding: 1.5rem 1.75rem;
    border-radius: 1.5rem;
    background: #fff;
    border-left: 4px solid var(--lp-purple);
}
.lp-pack-note p { font-size: .95rem; color: var(--lp-muted); margin: .5rem 0 0; }

/* ======================= 9. FINAL ======================= */
.lp-final {
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    border-radius: 3rem 3rem 0 0;
    margin-bottom: -3rem; /* anula el mt-5 del pie: el bloque enlaza con él */
}
.lp-final::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 0%, rgba(91, 66, 243, .35), transparent 55%),
                radial-gradient(circle at 10% 100%, rgba(255, 51, 102, .2), transparent 50%);
    pointer-events: none;
}
.lp-final .container { position: relative; z-index: 1; }
.lp-final__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -2px; margin-bottom: 1rem; }
.lp-final__lead { font-size: 1.2rem; color: rgba(255, 255, 255, .75); margin-bottom: 2rem; }
.lp-disclaimer { max-width: 620px; margin: 2.5rem auto 0; font-size: .8rem; line-height: 1.6; color: rgba(255, 255, 255, .5); }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1199.98px) {
    .lp-drops { grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
    .lp-drop summary, .lp-drop--static { min-height: 60px; }
}
@media (max-width: 991.98px) {
    /* Explorador: desplegable arriba y temario + profesores en una columna */
    .lp-explorer { padding: 1.5rem; margin-top: 2.5rem; }
    .lp-explorer__select { display: block; }
    .lp-explorer__list { display: none; }
    .lp-explorer__grid { grid-template-columns: 1fr; --explorer-h: 460px; }
    .lp-explorer__panel { grid-template-columns: 1fr; }
    .lp-explorer__content { padding: 0; border-right: 0; }
    .lp-explorer__profs { padding: 1.25rem 0 0; margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
    .lp-section { padding: 4.5rem 0; }
    /* Tablet y móvil: sombra uniforme, texto centrado y ficha debajo */
    .lp-hero { padding-bottom: 70px; text-align: center; }
    .lp-hero__shade { background: linear-gradient(180deg, rgba(5, 8, 31, .78) 0%, rgba(8, 12, 48, .88) 55%, rgba(5, 8, 31, .95) 100%); }
    .lp-hero__bg img { object-position: 58% 20%; }
    .lp-hero-lead { margin-left: auto; margin-right: auto; }
    .lp-partners { justify-content: center; }
    .lp-hcard { margin: 0 auto; text-align: left; }
    .lp-dates { margin-top: 3rem; }
    .lp-price-card { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .lp-drops { grid-template-columns: 1fr; gap: .6rem; }
    /* Móvil: los botones mandan; los marcadores solo señalan (son muy pequeños para el dedo) */
    .lp-map__pin { width: 10px; height: 10px; pointer-events: none; }
    .lp-map__label { display: none; }
    .lp-map-card { padding: 1.1rem; }
    .lp-tint { border-radius: 2rem; }
}
@media (max-width: 575.98px) {
    .lp-cert__issuers img { height: 36px; }
    .lp-cert__paper { transform: none; }
    .lp-space__price { padding: 1.35rem; }
    .lp-space__price-list { grid-template-columns: 1fr; }
    .lp-tool { padding: .75rem .75rem 1.25rem; }
    .lp-pack__stats { gap: .65rem; }
    .lp-stat { padding: 1.1rem; }
    .lp-stat strong { font-size: 1.45rem; }
    .lp-explorer { padding: 1.15rem; border-radius: 1.5rem; }
    .lp-section { padding: 3.5rem 0; }
    .lp-hero__eyebrow { font-size: .95rem; }
    .lp-hero-lead { font-size: 1.05rem; }
    .lp-hcard { padding: 1.75rem 1.4rem 1.5rem; }
    .lp-hcard__price { font-size: 3rem; }
    .lp-hcard__actions { grid-template-columns: 1fr; }
    .lp-partners { gap: 1rem; flex-wrap: nowrap; }
    .lp-partners__logo { height: 34px; }
    .lp-partners__sep { height: 32px; }
    .lp-partners__text { font-size: .75rem; text-align: left; }
    .lp-partners__text strong { font-size: .9rem; }
    .lp-why__text { font-size: 1rem; }
    .lp-why__lead { font-size: 1.08rem; }
    .lp-video { border-radius: 1.1rem; }
    .lp-group__list { grid-template-columns: 1fr; }
    .lp-mod summary { padding: 1.1rem 1.15rem; }
    .lp-mod__title { font-size: 1.08rem; }
    .lp-mod ul { padding: 0 1.15rem 1.2rem 2.3rem; }
    .lp-mod li { font-size: .95rem; }
    .lp-price-card__main, .lp-price-card__side { padding: 2rem 1.5rem; }
    .lp-price { font-size: 3.5rem; }
    .lp-final { border-radius: 2rem 2rem 0 0; padding: 4.5rem 0; }
}

/* Quien pide menos movimiento no ve animaciones */
@media (prefers-reduced-motion: reduce) {
    .lp-cert__paper, .lp-cert__paper:hover { transform: none; transition: none; }
    .lp-map__pin.is-active { animation: none; }
    .lp-btn { transition: none; }
    .lp-btn:hover { transform: none; }
}