/* ═══════════════════════════════════════════════════
   BLINQ — Plataformas de cursos (/plataformas-de-cursos)
   Estilos propios de la página. Los componentes base (secciones, columnas,
   filas, proceso, FAQ) vienen de ui.css.

   El visual del hero es un OBJETO DE DEMO: la plataforma de una academia de
   ejemplo («Academia Raíz»), con SU color de marca (verde), no el de Blinq.
   Sus colores van fijos (no son tokens), igual que .rx en rescate web.
   Escala con unidades de contenedor (cqw) para verse igual en 390 y 1280.

   Las otras demos de la página siguen la misma regla y la misma academia:
   · .cj  — recorrido del estudiante en cinco pantallas de celular (02).
   · .cxa — panel del creador (03). Reutiliza la barra del navegador del hero.
   Los esquemas que explican cómo trabaja Blinq (.cxp proceso, .cxf flujo del
   video) no son demos: usan los tokens del sitio.
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   HERO · escenario
   ───────────────────────────────────── */
.cx { container-type: inline-size; }

.cx-stage {
    position: relative;
    padding: 5cqw 5cqw 21cqw;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--bg-2);
    font-size: clamp(6.5px, 2.15cqw, 12.5px);
    line-height: 1.3;
}

/* Ventana del navegador (objeto físico: lleva sombra de medio) */
.cx-win {
    overflow: hidden;
    border-radius: 1.6cqw;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), var(--shadow-media);
    color: #1B1F1C;
    font-family: var(--font-body);
}

.cx-chrome {
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 1.6cqw 2.2cqw;
    background: #E9EBEE;
    color: #3C4043;
}

.cx-dots { display: flex; flex: none; gap: 1cqw; }
.cx-dots i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #C4C8CD; }

.cx-url {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1.2cqw;
    min-width: 0;
    padding: 0.9cqw 2cqw;
    border-radius: 99px;   /* barra de URL del navegador: objeto de demo, no un botón */
    background: #FFFFFF;
    font-size: 0.92em;
    white-space: nowrap;
    overflow: hidden;
}

.cx-url svg { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-url span { overflow: hidden; text-overflow: ellipsis; }

.cx-tag {
    flex: none;
    padding: 0.5cqw 1.4cqw;
    border: 1px solid #C4C8CD;
    border-radius: 0.8cqw;
    font: 500 0.8em var(--font-mono);
    color: #5F6368;
}

/* Barra superior de la academia */
.cx-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    padding: 1.8cqw 2.6cqw;
    border-bottom: 1px solid #E3E7E4;
}

.cx-brand { display: flex; align-items: center; gap: 1.4cqw; font-weight: 700; letter-spacing: -0.01em; }

.cx-logo {
    display: grid;
    place-items: center;
    width: 4.4cqw;
    height: 4.4cqw;
    border-radius: 1cqw;
    background: #1F6F4A;
    color: #FFFFFF;
    font-size: 0.95em;
}

.cx-nav { display: flex; align-items: center; gap: 2.4cqw; color: #5B635E; font-size: 0.9em; }
.cx-nav b { color: #1F6F4A; font-weight: 600; }

.cx-avatar {
    display: grid;
    place-items: center;
    width: 4cqw;
    height: 4cqw;
    border-radius: 50%;
    background: #DDEFE5;
    color: #1F6F4A;
    font-weight: 700;
    font-size: 0.85em;
}

/* Aula: reproductor + temario */
.cx-body {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 2.4cqw;
    padding: 2.6cqw;
    background: #F6F8F6;
}

.cx-player {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1.2cqw;
    /* Fotograma de ejemplo: ventana con luz natural (dato de la demo, no un efecto de marca) */
    background:
        linear-gradient(90deg, transparent 58%, rgba(255, 236, 196, 0.55) 58% 76%, transparent 76%),
        linear-gradient(160deg, #3A4A44 0%, #24302C 55%, #1A2320 100%);
}

.cx-play {
    display: grid;
    place-items: center;
    width: 9cqw;
    height: 9cqw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
}

.cx-play svg { width: 3.6cqw; height: 3.6cqw; margin-left: 0.6cqw; fill: #1F6F4A; }

.cx-lock {
    position: absolute;
    top: 1.6cqw;
    left: 1.6cqw;
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    padding: 0.6cqw 1.4cqw;
    border-radius: 0.8cqw;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 0.78em;
}

.cx-lock svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cx-scrub {
    position: absolute;
    right: 2cqw;
    bottom: 1.8cqw;
    left: 2cqw;
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    color: #FFFFFF;
    font: 500 0.78em var(--font-mono);
}

.cx-scrub__track { flex: 1; height: 0.7cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.cx-scrub__fill { display: block; width: 38%; height: 100%; background: #FFFFFF; }

.cx-lesson { margin: 1.8cqw 0 0; }
.cx-lesson small { display: block; color: #5B635E; font-size: 0.82em; }
.cx-lesson b { display: block; margin-top: 0.4cqw; font-size: 1.12em; letter-spacing: -0.01em; }

.cx-file {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    margin-top: 1.6cqw;
    padding: 1.3cqw 1.6cqw;
    border: 1px solid #E3E7E4;
    border-radius: 1cqw;
    background: #FFFFFF;
    font-size: 0.86em;
}

.cx-file svg { flex: none; width: 1.3em; height: 1.3em; fill: none; stroke: #1F6F4A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-file u { color: #1F6F4A; font-weight: 600; text-decoration: none; }

.cx-done {
    display: inline-flex;
    align-items: center;
    gap: 0.8cqw;
    margin-top: 1.6cqw;
    padding: 0.9cqw 1.8cqw;
    border-radius: 0.8cqw;
    background: #1F6F4A;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.86em;
}

/* Temario con progreso */
.cx-side {
    display: grid;
    align-content: start;
    gap: 1.4cqw;
    padding: 2cqw;
    border: 1px solid #E3E7E4;
    border-radius: 1.2cqw;
    background: #FFFFFF;
}

.cx-prog__head { display: flex; justify-content: space-between; font-size: 0.86em; color: #5B635E; }
.cx-prog__head b { color: #1B1F1C; }
.cx-prog__track { height: 1cqw; margin-top: 0.8cqw; border-radius: 1cqw; background: #E3E7E4; overflow: hidden; }
.cx-prog__fill { display: block; width: 50%; height: 100%; background: #1F6F4A; }

.cx-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.cx-list li {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    padding: 1.1cqw 0;
    border-top: 1px solid #EEF1EF;
    font-size: 0.88em;
    color: #5B635E;
}

.cx-list li:first-child { border-top: 0; }

.cx-list i {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.8cqw;
    height: 2.8cqw;
    border: 1px solid #C9D1CC;
    border-radius: 50%;
}

.cx-list svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cx-list .is-done i { border-color: #1F6F4A; background: #1F6F4A; }
.cx-list .is-now { color: #1B1F1C; font-weight: 600; }
.cx-list .is-now i { border: 0.6cqw solid #1F6F4A; }

/* Tarjeta flotante: la venta que acaba de entrar */
.cx-sale {
    position: absolute;
    z-index: 2;
    right: 3cqw;
    bottom: 3cqw;
    display: flex;
    align-items: center;
    gap: 2cqw;
    width: 52cqw;
    padding: 2.2cqw 2.6cqw;
    border-radius: 2cqw;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(157, 0, 255, 0.35), 0 26px 48px -24px rgba(14, 11, 23, 0.55);
    font-family: var(--font-body);
}

.cx-sale__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 7cqw;
    height: 7cqw;
    border-radius: 1.4cqw;
    background: #E8F5EE;
}

.cx-sale__icon svg { width: 3.6cqw; height: 3.6cqw; fill: none; stroke: #15803D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cx-sale__t { display: grid; gap: 0.4cqw; min-width: 0; }

.cx-sale__k {
    display: flex;
    align-items: center;
    gap: 1cqw;
    font: 500 0.8em var(--font-mono);
    letter-spacing: 0.02em;
    color: #7A00C7;
}

.cx-sale__k::before {
    content: "";
    width: 1.3cqw;
    height: 1.3cqw;
    border-radius: 2px;
    background: #9D00FF;
}

.cx-sale__t b { font-weight: 600; }
.cx-sale__t span { color: #6B6878; font-size: 0.88em; }

@media (prefers-reduced-motion: no-preference) {
    .js .cx-sale { animation: cx-in 0.5s ease 0.6s both; }
}

@keyframes cx-in { from { opacity: 0; transform: translateY(8px); } }


/* ─────────────────────────────────────
   01 · Prueba (proyecto en curso)
   ───────────────────────────────────── */
.cx-proof { margin-top: clamp(28px, 3vw, 40px); }


/* ─────────────────────────────────────
   03 · ¿Plataforma propia o de terceros?
   ───────────────────────────────────── */
.cx-vs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    overflow: hidden;
}

.cx-vs__col { padding: clamp(22px, 2.6vw, 32px); }
.cx-vs__col + .cx-vs__col { border-left: 1px solid var(--line); }

.cx-vs__k {
    margin: 0 0 6px;
    font: 500 0.8125rem var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--text-3);
}

.cx-vs__col--own .cx-vs__k { color: var(--link); }

.cx-vs h3 { margin: 0 0 18px; }

.cx-vs ul { display: grid; margin: 0; padding: 0; list-style: none; }

.cx-vs li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    line-height: 1.55;
    color: var(--text-2);
}

.cx-vs li:first-child { border-top: 0; padding-top: 0; }
.cx-vs li b { display: block; color: var(--text); font-weight: 600; }
.cx-vs li .i { margin-top: 0.22em; color: var(--text-3); }
.cx-vs__col--own li .i { color: var(--link); }

.cx-fees { margin-top: 24px; }


/* ─────────────────────────────────────
   02 · Recorrido del estudiante (demo: cinco pantallas de celular)
   Cada paso es su propio contenedor: las medidas en cqw son relativas al
   ancho de la columna, así que la pantalla se ve igual en 1280 y en 390.
   ───────────────────────────────────── */
.cj { margin: clamp(8px, 2vw, 20px) 0 0; }

.cj-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cj-step {
    container-type: inline-size;
    display: grid;
    gap: 20px;
    align-content: start;
}

/* El celular (objeto físico: lleva sombra) */
.cj-phone {
    aspect-ratio: 9 / 17;
    padding: 2.6cqw;
    border-radius: 10cqw;
    background: #15131B;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 22px 40px -26px rgba(14, 11, 23, 0.55);
    font-family: var(--font-body);
    font-size: clamp(8px, 5.2cqw, 14px);
    line-height: 1.3;
}

html.dark-mode .cj-phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 40px -26px rgba(0, 0, 0, 0.8); }

.cj-scr {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 7.6cqw;
    background: #F6F8F6;
    color: #1B1F1C;
}

.cj-bar {
    display: flex;
    align-items: center;
    gap: 2.4cqw;
    padding: 7cqw 5cqw 3.4cqw;
    border-bottom: 1px solid #E3E7E4;
    background: #FFFFFF;
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cj-logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 7cqw;
    height: 7cqw;
    border-radius: 1.8cqw;
    background: #1F6F4A;
    color: #FFFFFF;
    font-size: 0.85em;
}

.cj-tag {
    margin-left: auto;
    padding: 0.6cqw 2cqw;
    border: 1px solid #C9D1CC;
    border-radius: 1.4cqw;
    font: 500 0.74em var(--font-mono);
    color: #5B635E;
}

.cj-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2.6cqw;
    min-height: 0;
    padding: 5cqw;
}

.cj-body--center { align-items: center; text-align: center; }

.cj-thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: 3cqw;
    /* Fotograma de ejemplo (dato de la demo, no un efecto de marca) */
    background:
        linear-gradient(90deg, transparent 58%, rgba(255, 236, 196, 0.55) 58% 76%, transparent 76%),
        linear-gradient(160deg, #3A4A44 0%, #24302C 55%, #1A2320 100%);
}

.cj-play {
    display: grid;
    place-items: center;
    width: 13cqw;
    height: 13cqw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
}

.cj-play svg { width: 5.4cqw; height: 5.4cqw; margin-left: 0.8cqw; fill: #1F6F4A; }

.cj-thumb__k {
    position: absolute;
    left: 3cqw;
    bottom: 3cqw;
    padding: 0.6cqw 2cqw;
    border-radius: 1.4cqw;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font-size: 0.72em;
}

.cj-scrub {
    position: absolute;
    right: 4cqw;
    bottom: 4cqw;
    left: 4cqw;
    height: 1.2cqw;
    overflow: hidden;
    border-radius: 1cqw;
    background: rgba(255, 255, 255, 0.3);
}

.cj-scrub span { display: block; width: 38%; height: 100%; background: #FFFFFF; }

.cj-k { font: 500 0.74em var(--font-mono); letter-spacing: 0.01em; color: #5B635E; }
.cj-title { font-size: 1.12em; line-height: 1.2; letter-spacing: -0.015em; }
.cj-meta { font-size: 0.82em; color: #5B635E; }

.cj-mods { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid #E3E7E4; }
.cj-mods li { padding: 1.8cqw 0; border-bottom: 1px solid #E3E7E4; font-size: 0.8em; color: #3D4440; }

.cj-price { font-size: 0.84em; color: #5B635E; }
.cj-price b { font-size: 1.3em; letter-spacing: -0.02em; color: #1B1F1C; }
.cj-price small { display: block; font-size: 0.92em; }

.cj-btn {
    display: block;
    margin-top: auto;
    padding: 3cqw;
    border-radius: 2cqw;
    background: #1F6F4A;
    color: #FFFFFF;
    font-size: 0.86em;
    font-weight: 600;
    text-align: center;
}

.cj-body--center .cj-btn { align-self: stretch; }

/* Pago aprobado */
.cj-ok {
    display: grid;
    place-items: center;
    width: 16cqw;
    height: 16cqw;
    margin-top: 3cqw;
    border-radius: 50%;
    background: #E1F2E8;
}

.cj-ok svg { width: 8cqw; height: 8cqw; fill: none; stroke: #1F6F4A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.cj-receipt {
    width: 100%;
    margin: 1cqw 0 0;
    padding: 0.6cqw 4cqw;
    border: 1px solid #E3E7E4;
    border-radius: 3cqw;
    background: #FFFFFF;
    text-align: left;
}

.cj-receipt div { display: flex; justify-content: space-between; gap: 3cqw; padding: 2cqw 0; border-top: 1px solid #EEF1EF; font-size: 0.76em; }
.cj-receipt div:first-child { border-top: 0; }
.cj-receipt dt { color: #5B635E; }
.cj-receipt dd { margin: 0; font-weight: 600; text-align: right; }

.cj-pill {
    display: inline-flex;
    align-items: center;
    gap: 1.6cqw;
    padding: 1cqw 3cqw;
    border-radius: 1.6cqw;
    background: #E1F2E8;
    color: #1F6F4A;
    font-size: 0.76em;
    font-weight: 600;
}

.cj-pill i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #1F6F4A; }

.cj-next {
    display: grid;
    gap: 0.6cqw;
    width: 100%;
    padding: 2.4cqw 3cqw;
    border: 1px dashed #C9D1CC;
    border-radius: 2cqw;
    font-size: 0.78em;
    text-align: left;
}

.cj-next small { color: #5B635E; font-size: 0.92em; }

/* Aula */
.cj-prog { display: flex; justify-content: space-between; font-size: 0.8em; color: #5B635E; }
.cj-prog b { color: #1B1F1C; }
.cj-track { display: block; height: 1.6cqw; margin-top: -1cqw; overflow: hidden; border-radius: 1cqw; background: #E3E7E4; }
.cj-track span { display: block; height: 100%; background: #1F6F4A; }

.cj-lessons { display: grid; margin: 0; padding: 0; list-style: none; }

.cj-lessons li {
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 1.8cqw 0;
    border-top: 1px solid #EEF1EF;
    font-size: 0.8em;
    color: #5B635E;
}

.cj-lessons i {
    display: grid;
    flex: none;
    place-items: center;
    width: 4.6cqw;
    height: 4.6cqw;
    border: 1px solid #C9D1CC;
    border-radius: 50%;
}

.cj-lessons svg { width: 3cqw; height: 3cqw; fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cj-lessons .is-done i { border-color: #1F6F4A; background: #1F6F4A; }
.cj-lessons .is-now { color: #1B1F1C; font-weight: 600; }
.cj-lessons .is-now i { border: 1.1cqw solid #1F6F4A; }

/* Evaluación */
.cj-chips { display: flex; flex-wrap: wrap; gap: 2cqw; }

.cj-chip {
    display: inline-flex;
    align-items: center;
    gap: 1.4cqw;
    padding: 1cqw 2.4cqw;
    border: 1px solid #D5DCD8;
    border-radius: 1.6cqw;
    background: #FFFFFF;
    font: 500 0.76em var(--font-mono);
}

.cj-chip svg { width: 1.1em; height: 1.1em; fill: none; stroke: #1F6F4A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cj-dots { display: flex; gap: 1.2cqw; margin-top: -0.6cqw; }
.cj-dots i { flex: 1; height: 1.2cqw; border-radius: 1cqw; background: #DDE3DF; }
.cj-dots .is-done { background: #1F6F4A; }
.cj-dots .is-now { background: #7DB89A; }

.cj-q { font-size: 0.98em; line-height: 1.3; letter-spacing: -0.01em; }

.cj-opts { display: grid; gap: 2cqw; margin: 0; padding: 0; list-style: none; }

.cj-opts li {
    display: flex;
    align-items: center;
    gap: 2.4cqw;
    padding: 2.4cqw 3cqw;
    border: 1px solid #DDE3DF;
    border-radius: 2cqw;
    background: #FFFFFF;
    font-size: 0.8em;
}

.cj-opts i { flex: none; width: 4cqw; height: 4cqw; border: 1px solid #B8C2BC; border-radius: 50%; }
.cj-opts .is-on { border-color: #1F6F4A; background: #EEF7F2; font-weight: 600; }
.cj-opts .is-on i { border: 1.2cqw solid #1F6F4A; }

/* Constancia */
.cj-cert {
    display: grid;
    gap: 2cqw;
    padding: 6cqw 5cqw 5cqw;
    border: 1px solid #DDE3DF;
    border-radius: 3cqw;
    background: #FFFFFF;
    outline: 1px solid #CFE3D8;
    outline-offset: -2cqw;
}

.cj-cert .cj-k { color: #1F6F4A; }
.cj-receipt--cert { margin: 0; padding: 0; border: 0; border-radius: 0; }
.cj-receipt--cert div { padding: 1.2cqw 0; border-top: 0; font-size: 0.72em; }
.cj-cert__name { font-size: 1.25em; letter-spacing: -0.02em; }

.cj-cert__foot {
    display: flex;
    align-items: center;
    gap: 3cqw;
    margin-top: 2cqw;
    padding-top: 3cqw;
    border-top: 1px solid #EEF1EF;
}

.cj-qr { flex: none; width: 22cqw; height: 22cqw; fill: #1B1F1C; }
.cj-code { display: grid; gap: 0.6cqw; min-width: 0; font-size: 0.72em; }
.cj-code small { font-size: 0.92em; color: #5B635E; overflow-wrap: anywhere; }
.cj-code b { font: 500 0.95em var(--font-mono); overflow-wrap: anywhere; }

/* Pie de cada pantalla (texto real de la página, con tokens) */
.cj-cap {
    display: grid;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
}

.cj-num { font: 500 0.8125rem var(--font-mono); color: var(--link); }

.cj-h {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.cj-p { margin: 0; font-size: 0.925rem; line-height: 1.55; color: var(--text-2); }

.cj .caption { margin-top: 28px; }
.cj-hint { display: none; }


/* ─────────────────────────────────────
   03 · Panel del creador (demo)
   ───────────────────────────────────── */
.cxa { container-type: inline-size; margin: 0; }

.cxa-stage {
    padding: 4cqw;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--bg-2);
    font-size: clamp(6.5px, 1.95cqw, 12px);
    line-height: 1.3;
}

.cxa-win {
    overflow: hidden;
    border-radius: 1.6cqw;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), var(--shadow-media);
    color: #1B1F1C;
    font-family: var(--font-body);
}

.cxa-app {
    display: grid;
    grid-template-columns: 19cqw minmax(0, 1fr);
    background: #F6F8F6;
}

.cxa-side {
    display: grid;
    align-content: start;
    gap: 0.6cqw;
    padding: 2.6cqw 1.6cqw;
    border-right: 1px solid #E3E7E4;
    background: #FFFFFF;
    font-size: 0.92em;
    color: #5B635E;
}

.cxa-brand { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 1.6cqw; font-weight: 700; color: #1B1F1C; }
.cxa-side > span:not(.cxa-brand) { padding: 1cqw 1.4cqw; border-radius: 0.8cqw; }
.cxa-side .is-on { background: #E1F2E8; color: #1F6F4A; font-weight: 600; }

.cxa-main { display: grid; gap: 2cqw; min-width: 0; padding: 2.6cqw; }

.cxa-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.cxa-head b { font-size: 1.1em; letter-spacing: -0.01em; }

.cxa-csv {
    display: inline-flex;
    align-items: center;
    gap: 1cqw;
    padding: 1cqw 2cqw;
    border-radius: 0.8cqw;
    background: #1F6F4A;
    color: #FFFFFF;
    font-size: 0.88em;
    font-weight: 600;
    white-space: nowrap;
}

.cxa-csv svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cxa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }

.cxa-kpis span,
.cxa-card {
    display: grid;
    align-content: start;
    gap: 0.8cqw;
    padding: 1.8cqw 2cqw;
    border: 1px solid #E3E7E4;
    border-radius: 1.2cqw;
    background: #FFFFFF;
}

.cxa-kpis small,
.cxa-card small { font-size: 0.82em; color: #5B635E; }
.cxa-kpis b { font-size: 1.3em; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cxa-cards { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.6cqw; }
.cxa-card { gap: 1.4cqw; }

.cxa-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2cqw;
    align-items: end;
    height: 13cqw;
}

.cxa-bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.6cqw; height: 100%; }
.cxa-bars i { width: 100%; height: calc(var(--h) * 0.78); border-radius: 0.6cqw 0.6cqw 0 0; background: #9CCBB3; }
.cxa-bars span:last-child i { background: #1F6F4A; }
.cxa-bars em { font: normal 500 0.76em var(--font-mono); color: #5B635E; }

.cxa-stack { display: flex; gap: 2px; height: 2.2cqw; overflow: hidden; border-radius: 0.8cqw; }
.cxa-stack i { width: var(--w); background: #1F6F4A; }
.cxa-stack i:nth-child(2) { background: #7DB89A; }
.cxa-stack i:nth-child(3) { background: #D5DCD8; }

.cxa-legend { display: grid; gap: 0.8cqw; margin: 0; padding: 0; list-style: none; font-size: 0.82em; color: #5B635E; }
.cxa-legend li { display: flex; align-items: center; gap: 1.2cqw; }
.cxa-legend i { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 2px; background: #1F6F4A; }
.cxa-legend li:nth-child(2) i { background: #7DB89A; }
.cxa-legend li:nth-child(3) i { background: #D5DCD8; }
.cxa-legend b { margin-left: auto; color: #1B1F1C; font-variant-numeric: tabular-nums; }

.cxa-table { overflow: hidden; border: 1px solid #E3E7E4; border-radius: 1.2cqw; background: #FFFFFF; }

.cxa-tr {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1.6cqw;
    align-items: center;
    padding: 1.5cqw 2cqw;
    border-top: 1px solid #EEF1EF;
    font-size: 0.88em;
}

.cxa-tr:first-child { border-top: 0; }
.cxa-th { background: #F6F8F6; font: 500 0.78em var(--font-mono); color: #5B635E; }
.cxa-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxa-tr > span:nth-child(3) { display: flex; align-items: center; gap: 1cqw; }

.cxa-mini {
    flex: none;
    width: 7cqw;
    height: 1cqw;
    border-radius: 1cqw;
    /* Barra de avance de la demo (dato, no efecto) */
    background: linear-gradient(90deg, #1F6F4A var(--w), #E3E7E4 0);
}

.cxa-st { justify-self: start; padding: 0.4cqw 1.4cqw; border-radius: 0.8cqw; background: #E1F2E8; color: #1F6F4A; font-size: 0.9em; font-weight: 600; }
.cxa-st--draft { background: #EEF0EF; color: #5B635E; }

/* En un contenedor angosto (celular): sin menú lateral y letra que se lee */
@container (max-width: 520px) {
    .cxa-stage { padding: 3cqw; font-size: 3cqw; }
    .cxa-app { grid-template-columns: minmax(0, 1fr); }
    .cxa-side { display: none; }
    .cxa-main { gap: 2.6cqw; padding: 3cqw; }
    .cxa-kpis span, .cxa-card { padding: 2.4cqw; }
    .cxa-bars { height: 18cqw; }
    .cxa-stack { height: 3cqw; }
    .cxa-legend i { width: 2.4cqw; height: 2.4cqw; }
    .cxa-tr { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 3cqw; padding: 2cqw 2.4cqw; }
    .cxa-tr > span:nth-child(2) { text-align: right; }
    .cxa-mini { display: none; }
}


/* ─────────────────────────────────────
   06 · Cómo la construimos (seis etapas)
   ───────────────────────────────────── */
.cxp { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }

.cxp__step {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px clamp(24px, 3vw, 48px);
    padding: clamp(26px, 3vw, 36px) 0;
    border-bottom: 1px solid var(--line);
}

.cxp__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-content: start; }

.cxp__num {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    font: 500 0.875rem var(--font-mono);
    color: var(--link);
}

.cxp__head .h3 { align-self: center; }
.cxp__head .p { grid-column: 2; margin: 0; }

.cxp__k {
    margin: 0 0 10px;
    font: 500 0.75rem var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.cxp__col--us .cxp__k { color: var(--link); }

.cxp__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cxp__col li {
    position: relative;
    padding-left: 16px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-2);
}

.cxp__col li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--line-2);
}

.cxp__col--us li::before { background: var(--brand); }

/* Cuentas a tu nombre */
.cxp-own {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 3fr);
    gap: 18px 32px;
    align-items: center;
    margin-top: clamp(28px, 3vw, 40px);
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.cxp-own__k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.cxp-own__k .i { color: var(--link); }

.cxp-own__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 0; padding: 0; list-style: none; }

.cxp-own__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    font-size: 0.925rem;
    line-height: 1.5;
    color: var(--text-2);
}

.cxp-own__list .i { margin-top: 0.2em; color: var(--text-3); }
.cxp-own__list b { display: block; font-weight: 600; color: var(--text); }

.cxp-own__note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--text-2);
}


/* ─────────────────────────────────────
   07 · Tecnología: flujo de una reproducción
   ───────────────────────────────────── */
.cxf { margin: 0 0 clamp(40px, 5vw, 64px); }

.cxf__flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cxf__node {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 18px 20px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    font-size: 0.925rem;
    line-height: 1.5;
    color: var(--text-2);
}

.cxf__node b { font-size: 1rem; font-weight: 600; color: var(--text); }
.cxf__k { font: 500 0.75rem var(--font-mono); color: var(--text-3); }
.cxf__node--end .cxf__k { color: var(--link); }

/* Conector con flecha entre nodos */
.cxf__node + .cxf__node::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -33px;
    width: 32px;
    height: 1px;
    background: var(--line-2);
}

.cxf__node + .cxf__node::after {
    content: "";
    position: absolute;
    top: calc(50% - 3.5px);
    left: -9px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--text-3);
    border-right: 1px solid var(--text-3);
    transform: rotate(45deg);
}


/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (min-width: 1000px) {
    .cxa-split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; }
}

/* Recorrido: debajo de 1100 px las cinco pantallas pasan a una tira que se desliza */
@media (max-width: 1099px) {
    .cj-scroll {
        margin-inline: calc(-1 * var(--gutter));
        padding: 4px 0 14px var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: thin;
    }
    .cj-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    .cj-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(70vw, 260px);
        width: max-content;
        padding-right: var(--gutter);
    }
    .cj-step { scroll-snap-align: start; }
    .cj-hint { display: inline; }
}

@media (max-width: 999px) {
    .page-hero__grid--visual:has(.cx) { grid-template-columns: minmax(0, 1fr); }
    .page-hero__visual.cx { max-width: 620px; width: 100%; }
    .cxa { max-width: 680px; width: 100%; }
    .cxp__step { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cxp__head { grid-column: 1 / -1; }
    .cxp__col { padding-left: 58px; }
    .cxp__col--us { padding-left: 0; }
    .cxp-own { grid-template-columns: minmax(0, 1fr); }
    .cxf__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cxf__node:nth-child(3)::before,
    .cxf__node:nth-child(3)::after { display: none; }
}

@media (max-width: 767px) {
    .cxf__flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cxf__node + .cxf__node::before { top: -25px; left: 30px; width: 1px; height: 24px; }
    .cxf__node + .cxf__node::after { top: -9px; left: 27px; transform: rotate(135deg); }
    .cxf__node:nth-child(3)::before,
    .cxf__node:nth-child(3)::after { display: block; }
    .cx-vs { grid-template-columns: minmax(0, 1fr); }
    .cx-vs__col + .cx-vs__col { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 599px) {
    .cx-stage { padding: 4cqw 3cqw 23cqw; }
    .cx-sale { width: 62cqw; }
    .cx-nav span { display: none; }
    .cxp__step { grid-template-columns: minmax(0, 1fr); }
    .cxp__col, .cxp__col--us { padding-left: 58px; }
    .cxp-own__list { grid-template-columns: minmax(0, 1fr); }
}