/* =============================================
   KULTTIA LAB — LANDINGS DE PRODUCTO
   Academia y Negocios. Mobile-first.
   Usa los tokens de estilos.css.
   ============================================= */

/* --- Base de sección --- */
.lx-hero {
    padding-top: 8rem;
    padding-bottom: 3rem;
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
}
.lx-hero::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    width: min(80vw, 640px);
    height: min(80vw, 640px);
    background: radial-gradient(circle, var(--acid-blue-glow) 0%, transparent 65%);
    filter: blur(40px);
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
}
.lx-hero h1 {
    font-size: clamp(2.3rem, 7vw, 4.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 1rem 0 1.25rem;
}
.lx-hero h1 span,
.lx-accent {
    color: var(--acid-blue);
    text-shadow: 0 0 18px var(--acid-blue-glow);
}
.lx-lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 560px;
    line-height: 1.75;
    margin-bottom: 2rem;
}
.lx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.lx-actions .btn i { margin-left: 0.5rem; font-size: 0.85em; }
.lx-note {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.lx-note strong { color: var(--text-main); }

.lx-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
.lx-section + .lx-section { border-top: 1px solid var(--border-color); }
.lx-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--acid-blue);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.lx-label::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--acid-blue);
    flex-shrink: 0;
}
.lx-h2 {
    font-size: clamp(1.7rem, 4.5vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
    max-width: 760px;
}
.lx-sub {
    color: var(--text-muted);
    max-width: 600px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}
.lx-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2.5rem;
}
.lx-head-row .lx-sub,
.lx-head-row .lx-h2 { margin-bottom: 0; }

/* --- Marcos: navegador y teléfono --- */
.lx-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0b0b0d;
    border: 1px solid var(--border-color-strong);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(35, 61, 255, 0.08);
}
:root[data-theme="light"] .lx-frame {
    box-shadow: 0 30px 70px -25px rgba(17, 24, 64, 0.35), 0 0 0 1px rgba(35, 61, 255, 0.08);
}
.lx-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: #17171a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lx-frame-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3a40;
    flex-shrink: 0;
}
.lx-frame-bar span {
    margin-left: 10px;
    flex: 1;
    max-width: 260px;
    height: 20px;
    border-radius: 6px;
    background: #222226;
    color: #9a9aa3;
    font-size: 0.68rem;
    line-height: 20px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lx-frame img,
.lx-phone img {
    display: block;
    width: 100%;
    height: auto;
}

.lx-phone {
    position: relative;
    width: 100%;
    border-radius: 34px;
    padding: 8px;
    background: #101013;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}
.lx-phone img { border-radius: 26px; }
.lx-phone::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 30%;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #101013;
    z-index: 1;
}

/* --- Hero: composición --- */
.lx-stage {
    position: relative;
    padding-bottom: 2.5rem;
    min-width: 0;
}
.lx-stage .lx-phone {
    position: absolute;
    right: -4px;
    bottom: 0;
    width: 27%;
    max-width: 190px;
}
.lx-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--border-radius-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-blue-subtle);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
}
.lx-chip i { color: var(--acid-blue); }
.lx-chip.is-a { left: -6px; top: 18%; }
.lx-chip.is-b { left: 8%; bottom: 0; }

/* --- Cursos con portada --- */
.lx-courses {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
.lx-course {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.lx-course:hover,
.lx-course:focus-within {
    border-color: var(--border-blue-subtle);
    box-shadow: 0 0 24px var(--acid-blue-light);
    transform: translateY(-4px);
}
.lx-course-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-card-hover);
}
.lx-course-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lx-course:hover .lx-course-cover img { transform: scale(1.04); }
/* Portada diseñada (curso sin imagen subida): la misma de academia.kulttia.com — nivel, título y firma */
.lx-course-cover:has(.lx-cover-alt) { container-type: inline-size; }
.lx-cover-alt {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6cqw 6.5cqw;
    background: radial-gradient(120% 120% at 0% 0%, #fff 0%, #eef0f5 45%, #dde1ea 100%);
    color: #0e0f14;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lx-course:hover .lx-cover-alt { transform: scale(1.04); }
.lx-cover-lvl {
    width: fit-content;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    background: #233dff;
    color: #fff;
    font-size: max(7px, 3.4cqw);
    font-weight: 600;
    line-height: 1.2;
}
.lx-cover-t {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 72%;
    font-size: max(10px, 8cqw);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
}
.lx-cover-k {
    align-self: flex-end;
    font-size: max(7px, 3.6cqw);
    font-weight: 700;
}
.lx-cover-k b { color: #233dff; }
/* Con la portada diseñada, la insignia va arriba a la derecha para no tapar el nivel */
.lx-course-cover .lx-cover-alt ~ .lx-badge { left: auto; right: 12px; }
.lx-course-body {
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.lx-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.lx-course-meta i { color: var(--acid-blue); margin-right: 0.35rem; }
.lx-course p {
    color: var(--text-muted);
}
.lx-course .lx-req {
    margin-top: 0.6rem;
    font-size: 0.85rem;
}
.lx-course .lx-req strong { color: var(--text-main); font-weight: 600; }
.lx-course .article-link { margin-top: auto; padding-top: 1.25rem; }
.lx-course.is-soon { cursor: default; }
.lx-course.is-soon:hover { transform: none; box-shadow: none; border-color: var(--border-color-strong); }

.lx-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.7rem;
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--border-color-strong);
    color: var(--text-muted);
    white-space: nowrap;
}
.lx-badge.is-blue {
    border-color: var(--border-blue-subtle);
    background: var(--bg-element);
    color: var(--acid-blue);
}
.lx-course-cover .lx-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(10, 10, 10, 0.78);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}

/* --- Showcase con captura fija (sticky) --- */
.lx-show {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
.lx-steps { display: grid; gap: 2.5rem; }
.lx-step { min-width: 0; }
.lx-step-num { display: block; }
.lx-step h3 {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    line-height: 1.2;
    margin: 0.4rem 0 0.6rem;
}
.lx-step p {
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 440px;
}
.lx-step-shot { margin-top: 1.25rem; }
.lx-screen { display: none; }

/* --- Bento --- */
.lx-bento {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.lx-tile {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.5rem;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.lx-tile:hover {
    border-color: var(--border-blue-subtle);
    box-shadow: 0 0 22px var(--acid-blue-light);
}
.lx-tile p {
    color: var(--text-muted);
}
.lx-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--acid-blue-light);
    color: var(--acid-blue);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.lx-tile-media {
    margin-top: 1.5rem;
    margin-bottom: -1.5rem;
    margin-right: -1.5rem;
    border-radius: 12px 0 0 0;
    overflow: hidden;
    border: 1px solid var(--border-color-strong);
    border-right: 0;
    border-bottom: 0;
    background: #0b0b0d;
}
.lx-tile-media img {
    display: block;
    width: 100%;
    height: auto;
}
.lx-tile.is-phone .lx-phone {
    width: 62%;
    max-width: 240px;
    margin: 1.5rem auto -6rem;
}
.lx-tile.is-accent {
    background: linear-gradient(140deg, var(--bg-card), var(--bg-element));
    border-color: var(--border-blue-subtle);
}

/* --- Certificado --- */
.lx-cert {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
.lx-cert-img {
    perspective: 1200px;
    min-width: 0;
}
.lx-cert-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 40px 80px -30px rgba(17, 24, 64, 0.6), 0 0 0 1px rgba(35, 61, 255, 0.12);
}
.lx-list {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.5rem;
}
.lx-list li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}
.lx-list li i {
    color: var(--acid-blue);
    margin-top: 0.3rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.lx-list strong { display: block; }
.lx-list span { color: var(--text-muted); font-size: 0.95rem; }

/* --- Pasos numerados --- */
.lx-flow {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    counter-reset: paso;
}
.lx-flow > div {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.lx-flow > div::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
}
.lx-flow strong { display: block; }
.lx-flow p { color: var(--text-muted); }

/* --- Bloque empresa / cierre --- */
.lx-band {
    display: grid;
    gap: 2rem;
    align-items: center;
    background: linear-gradient(120deg, var(--bg-card), var(--bg-element));
    border: 1px solid var(--border-blue-subtle);
    border-radius: 20px;
    padding: 2rem 1.5rem 0;
    overflow: hidden;
}
.lx-band h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.2; margin-bottom: 0.75rem; }
.lx-band p { color: var(--text-muted); max-width: 520px; margin-bottom: 1.5rem; }
.lx-band-copy { padding-bottom: 0.5rem; min-width: 0; }
.lx-band .lx-frame { border-radius: 14px 14px 0 0; border-bottom: 0; }

.lx-final {
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5.5rem;
}
.lx-final h2 { font-size: clamp(1.7rem, 4.5vw, 2.8rem); line-height: 1.15; margin: 0 auto 1rem; max-width: 900px; }
.lx-final p { color: var(--text-muted); margin: 0 auto 2rem; max-width: 560px; }
.lx-final .lx-actions { justify-content: center; }

/* --- Pestañas del panel (Negocios) --- */
.lx-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: var(--border-radius-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.lx-tabs button {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--border-radius-pill);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.lx-tabs button:hover { color: var(--text-main); }
.lx-tabs button[aria-selected="true"] {
    background: var(--acid-blue);
    color: #fff;
}
.lx-panel-shots { position: relative; }
.lx-panel-shots .lx-frame-body { position: relative; aspect-ratio: 1200 / 750; }
.lx-panel-shots .lx-frame-body img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lx-panel-shots .lx-frame-body img.is-on { opacity: 1; transform: none; }
.lx-panel-caption {
    margin-top: 1rem;
    color: var(--text-muted);
    min-height: 1.6em;
}

/* --- Foco visible --- */
.lx-tabs button:focus-visible,
.lx-course a:focus-visible,
.lx-actions .btn:focus-visible {
    outline: 2px solid var(--acid-blue);
    outline-offset: 3px;
}

/* =============================================
   Animaciones al hacer scroll (solo con .lx-on,
   que se activa si no hay prefers-reduced-motion)
   ============================================= */
.lx-on [data-lx] {
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--lx-delay, 0s);
    will-change: opacity, transform;
}
.lx-on [data-lx="up"] { transform: translateY(40px); }
.lx-on [data-lx="left"] { transform: translateX(-48px); }
.lx-on [data-lx="right"] { transform: translateX(48px); }
.lx-on [data-lx="scale"] { transform: scale(0.92); }
.lx-on [data-lx="tilt"] { transform: rotateX(18deg) translateY(40px) scale(0.96); transform-origin: 50% 100%; }
.lx-on [data-lx].is-in { opacity: 1; transform: none; }

/* Hero: entrada al cargar */
.lx-on .lx-hero [data-lx] { transition-duration: 1s; }

/* Parallax: el JS mueve --lx-y */
[data-parallax] { transform: translate3d(0, var(--lx-y, 0px), 0); }
.lx-on [data-lx][data-parallax].is-in { transform: translate3d(0, var(--lx-y, 0px), 0); }

@media (prefers-reduced-motion: reduce) {
    .lx-course,
    .lx-course-cover img,
    .lx-panel-shots .lx-frame-body img { transition: none; }
    .lx-course:hover { transform: none; }
    [data-parallax] { transform: none; }
}

/* =============================================
   Tablet / escritorio
   ============================================= */
@media (min-width: 700px) {
    .lx-courses { grid-template-columns: repeat(2, 1fr); }
    .lx-courses.has-three { grid-template-columns: repeat(2, 1fr); }
    .lx-bento { grid-template-columns: repeat(2, 1fr); }
    .lx-flow { grid-template-columns: repeat(2, 1fr); }
    .lx-band { padding: 3rem 3rem 0; }
    .lx-chip.is-a { left: -18px; }
}

@media (min-width: 1000px) {
    .lx-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        padding-top: 10rem;
        padding-bottom: 5rem;
        gap: 3.5rem;
    }
    .lx-section { padding-top: 6.5rem; padding-bottom: 6.5rem; }
    .lx-courses.has-three { grid-template-columns: repeat(3, 1fr); }
    .lx-flow { grid-template-columns: repeat(3, 1fr); }
    /* Cuatro tarjetas en 2×2: en cuatro columnas los textos quedan de 2 a 4 líneas */
    .lx-flow.is-four { grid-template-columns: repeat(2, 1fr); }

    /* Showcase: pasos a la izquierda, captura fija a la derecha */
    .lx-show { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 4rem; }
    .lx-steps { gap: 0; }
    .lx-step {
        min-height: 62vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0.35;
        transition: opacity 0.4s ease;
    }
    .lx-step.is-active { opacity: 1; }
    .lx-step-shot { display: none; }
    .lx-screen {
        display: block;
        position: sticky;
        top: calc(50vh - 15rem);
        align-self: start;
    }
    .lx-screen .lx-frame-body { position: relative; aspect-ratio: 1200 / 750; }
    .lx-screen .lx-frame-body img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: translateY(16px) scale(0.985);
        transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .lx-screen .lx-frame-body img.is-on { opacity: 1; transform: none; }
    .lx-screen-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 1.1rem;
    }
    .lx-screen-dots i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--border-color-strong);
        transition: background 0.3s, width 0.3s;
    }
    .lx-screen-dots i.is-on { width: 24px; border-radius: 6px; background: var(--acid-blue); }

    /* Bento 6 columnas */
    .lx-bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); }
    .lx-tile.span-4 { grid-column: span 4; }
    .lx-tile.span-3 { grid-column: span 3; }
    .lx-tile.span-2 { grid-column: span 2; }
    .lx-tile.row-2 { grid-row: span 2; }

    .lx-cert { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4rem; }
    .lx-band { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: 3.5rem 0 0 3.5rem; }
    .lx-band-copy { padding-bottom: 3.5rem; }
    .lx-band .lx-frame { border-right: 0; border-radius: 14px 0 0 0; }
}

/* =============================================
   Páginas institucionales (Nosotros, Servicios)
   Fotos, bloques alternos, etiquetas y cifras.
   ============================================= */

/* --- Foto con marco --- */
.lx-photo {
    position: relative;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: radial-gradient(circle at 70% 30%, var(--acid-blue-glow), transparent 60%), linear-gradient(140deg, var(--bg-card), var(--bg-main));
    border: 1px solid var(--border-color-strong);
    box-shadow: 0 30px 80px -25px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(35, 61, 255, 0.08);
    min-width: 0;
}
:root[data-theme="light"] .lx-photo {
    box-shadow: 0 30px 70px -25px rgba(17, 24, 64, 0.35), 0 0 0 1px rgba(35, 61, 255, 0.08);
}
.lx-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lx-photo.is-portrait { aspect-ratio: 4 / 3; }
.lx-photo.is-portrait img { object-position: 50% 20%; }
.lx-photo figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.25rem 1.1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}
.lx-photo figcaption strong { font-size: 1.05rem; }
.lx-photo figcaption span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c9d1ff;
}
.lx-stage.is-photo { padding-bottom: 1.5rem; }
.lx-stage.is-photo .lx-chip.is-b { left: auto; right: 6%; bottom: 0; }

/* --- Bloques alternos imagen / texto --- */
.lx-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
.lx-split > * { min-width: 0; }
.lx-split .lx-h2 { margin-bottom: 0.75rem; }
.lx-split-copy > p {
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 1rem;
    max-width: 560px;
}
.lx-split-copy > p.lx-kicker {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 500;
}
.lx-split-copy .lx-list { margin: 1.75rem 0; }
.lx-split-copy .lx-actions { margin-top: 2rem; }
.lx-num { display: block; margin-bottom: 0.5rem; }

/* --- Etiquetas (formatos, clientes) --- */
.lx-tags-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.75rem 0 0.8rem;
}
.lx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.lx-tags span {
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--border-color-strong);
    background: var(--bg-card);
    color: var(--text-muted);
    white-space: nowrap;
}
.lx-tags.is-blue span {
    border-color: var(--border-blue-subtle);
    background: var(--bg-element);
    color: var(--text-main);
}

/* --- Cifras --- */
.lx-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
    max-width: 560px;
}
.lx-stats strong {
    display: block;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--acid-blue);
}
.lx-stats span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Cita --- */
.lx-quote {
    margin: 0;
    padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    border-left: 3px solid var(--acid-blue);
    background: var(--bg-element);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    line-height: 1.6;
    font-style: italic;
}

/* --- Bento: número en lugar de icono --- */

.lx-tile p strong { color: var(--text-main); font-weight: 600; }
.lx-tile .article-link { margin-top: auto; padding-top: 1.25rem; }

@media (min-width: 560px) {
    .lx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
    .lx-bento.is-three .lx-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .lx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; }
    .lx-split.is-reverse > :first-child { order: 2; }
    .lx-photo.is-portrait { aspect-ratio: 3 / 4; }
    .lx-split.is-narrow-img { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .lx-split.is-reverse.is-narrow-img { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
    .lx-split.is-narrow-img .lx-photo.is-portrait { max-width: 440px; justify-self: end; width: 100%; }
    .lx-bento.is-three { grid-template-columns: repeat(3, 1fr); }
    .lx-bento.is-three .lx-tile:last-child:nth-child(odd) { grid-column: auto; }
}

/* --- Ajustes de páginas institucionales --- */
.lx-hero.is-long h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); }
.lx-hero .lx-lead + .lx-lead { margin-top: -1rem; }
.lx-beliefs p { color: var(--text-muted); }
.lx-beliefs b { color: var(--text-main); font-weight: 600; }
a.lx-tile { color: inherit; text-decoration: none; }
a.lx-tile:focus-visible { outline: 2px solid var(--acid-blue); outline-offset: 3px; }
.lx-tile .lx-tile-link { margin-top: 0; padding-top: 1rem; }
.lx-tile.is-wide .lx-tile-media { margin-top: auto; }
.lx-tile.is-wide .lx-tile-link { margin-bottom: 1.5rem; }

@media (min-width: 700px) and (max-width: 999px) {
    .lx-tile.is-wide { grid-column: 1 / -1; }
}

/* --- Logos de clientes: monocromo, color al pasar el cursor --- */
.lx-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lx-logos li {
    height: 76px;
    display: grid;
    place-items: center;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: background 0.3s, border-color 0.3s;
}
.lx-logos img {
    display: block;
    width: auto;
    height: var(--h, 32px);
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.72;
    transition: filter 0.3s, opacity 0.3s;
}
:root[data-theme="light"] .lx-logos img {
    filter: grayscale(1) brightness(0);
    opacity: 0.62;
}
.lx-logos li:hover {
    background: #fff;
    border-color: var(--border-blue-subtle);
}
.lx-logos li:hover img { filter: none; opacity: 1; }
.lx-logos li.is-mono:hover img { filter: grayscale(1) brightness(0); }
@media (prefers-reduced-motion: reduce) {
    .lx-logos li, .lx-logos img { transition: none; }
}

@media (max-width: 420px) {
    .lx-chip { font-size: 0.74rem; padding: 0.45rem 0.75rem; }
    .lx-chip.is-a { top: 8%; }
    .lx-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* =============================================
   Cómo enseñamos: diagramas SVG animados (.lx-dg)
   El trazo se dibuja al entrar en pantalla (.is-in,
   lo pone el revelado de landing.js). Sin .lx-on o con
   prefers-reduced-motion se ven completos y quietos.
   ============================================= */
.lx-method {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}
.lx-mcard {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.lx-mcard:hover {
    border-color: var(--border-blue-subtle);
    box-shadow: 0 0 22px var(--acid-blue-light);
}
.lx-dg {
    margin: 0;
    padding: 1.75rem 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-element);
    background-image: radial-gradient(var(--border-color-strong) 1px, transparent 1.2px);
    background-size: 18px 18px;
}
.lx-dg svg {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}
.lx-mcard-body { padding: 1.5rem; }
.lx-mtag { text-transform: uppercase; }
.lx-mcard-body > p:not(.lx-mtag) { color: var(--text-muted); }
.lx-dg-keys {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.lx-dg-keys.is-wide { grid-template-columns: minmax(0, 1fr); }
.lx-dg-keys li {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color-strong);
    border-radius: 10px;
}
.lx-dg-keys b,
.lx-dg-note b { display: block; color: var(--text-main); font-weight: 600; }
.lx-dg-note { margin-top: 1rem; font-size: 0.9rem; }
.lx-dg-note b { display: inline; }
@media (min-width: 1000px) {
    .lx-method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .lx-dg { padding: 2.25rem 1.5rem 1.75rem; }
    .lx-mcard-body { padding: 1.75rem 2rem 2rem; }
}

/* Piezas del dibujo */
.lx-dg .dg-line { fill: none; stroke: var(--acid-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lx-dg .dg-thin { fill: none; stroke: var(--acid-blue); stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.lx-dg .dg-head { fill: none; stroke: var(--acid-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lx-dg .dg-node { fill: var(--acid-blue); }
.lx-dg .dg-ring-node { fill: var(--bg-card); stroke: var(--acid-blue); stroke-width: 3; }
.lx-dg .dg-hub { fill: var(--acid-blue-light); stroke: var(--border-blue-subtle); stroke-width: 1.5; }
.lx-dg .dg-pill { fill: var(--bg-card); stroke: var(--border-blue-subtle); stroke-width: 1.5; }
.lx-dg .dg-pill.is-key { stroke: var(--acid-blue); stroke-width: 2; }
.lx-dg .dg-circ { fill: var(--acid-blue-light); stroke: var(--acid-blue); stroke-width: 2; }
.lx-dg .dg-flag { fill: var(--acid-blue); }
.lx-dg .dg-stop-a { stop-color: var(--acid-blue); stop-opacity: 0.22; }
.lx-dg .dg-stop-b { stop-color: var(--acid-blue); stop-opacity: 0.02; }
.lx-dg .dg-dot,
.lx-dg .dg-climb { fill: var(--text-main); stroke: var(--acid-blue); stroke-width: 3; }
.lx-dg .dg-t { fill: var(--text-main); font-family: var(--font-primary); font-size: 19px; font-weight: 600; }
.lx-dg .dg-t.dg-sm { font-size: 17px; }
.lx-dg .dg-t.dg-xs { font-size: 15px; }
.lx-dg .dg-tm { fill: var(--text-muted); font-family: var(--font-primary); font-size: 16px; font-weight: 500; }
.lx-dg .dg-num { fill: var(--text-muted); font-family: var(--font-primary); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.lx-dg .dg-sign { fill: var(--acid-blue); font-family: var(--font-primary); font-size: 20px; font-weight: 700; }
.lx-dg .dg-flow { fill: none; stroke: var(--text-main); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.1 22; opacity: 0; }
.lx-dg .dg-ping { fill: none; stroke: var(--acid-blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lx-dg .dg-climb { opacity: 0; }
.lx-dg .dg-pop,
.lx-dg .dg-fade { transform-box: fill-box; transform-origin: center; }
.lx-dg .dg-orbit,
.lx-dg .dg-spin { transform-box: view-box; }

/* Estado inicial (solo con animación activa) */
.lx-on [data-lx="dg"] { opacity: 1; transform: none; transition: none; }
.lx-on .lx-dg .dg-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.2s; transition-delay: var(--d, 0s); }
.lx-on .lx-dg .dg-pop { opacity: 0; transform: scale(0.4); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: var(--d, 0s); }
.lx-on .lx-dg .dg-fade { opacity: 0; transform: translateY(6px); transition: opacity 0.6s, transform 0.6s; transition-delay: var(--d, 0s); }
.lx-on .lx-dg .dg-orbit,
.lx-on .lx-dg .dg-spin { opacity: 0; transition: opacity 0.4s var(--d, 0s); }
.lx-on .lx-dg.is-in .dg-draw { stroke-dashoffset: 0; opacity: 1; }
.lx-on .lx-dg.is-in .dg-pop,
.lx-on .lx-dg.is-in .dg-fade { opacity: 1; transform: none; }
.lx-on .lx-dg.is-in .dg-orbit,
.lx-on .lx-dg.is-in .dg-spin { opacity: 1; }

/* Movimiento continuo después del dibujo */
.lx-dg.is-in .dg-orbit { animation: dg-spin 8s linear var(--d, 0s) infinite; }
.lx-dg.is-in .dg-spin { animation: dg-spin 6s linear var(--d, 0s) infinite; }
.lx-dg.is-in .dg-ping { animation: dg-ping 8s ease-out var(--d, 0s) infinite both; }
.lx-dg.is-in .dg-ping.is-soft { animation: dg-ping-soft 4s ease-out var(--d, 0s) infinite both; }
.lx-dg.is-in .dg-flow { opacity: 0.85; transition: opacity 0.4s var(--d, 0s); animation: dg-march 1.4s linear infinite; }
@supports (offset-path: path('M0 0')) {
    .lx-dg .dg-climb { offset-path: path('M72 311 H96 V251 H186 V191 H276 V131 H366 V66 H402'); offset-rotate: 0deg; }
    .lx-dg.is-in .dg-climb { animation: dg-climb 6s cubic-bezier(0.5, 0, 0.3, 1) var(--d, 0s) infinite both; }
}
@keyframes dg-spin { to { transform: rotate(360deg); } }
@keyframes dg-ping {
    0% { opacity: 0; transform: scale(1); }
    2% { opacity: 0.9; }
    16% { opacity: 0; transform: scale(2.6); }
    100% { opacity: 0; transform: scale(2.6); }
}
@keyframes dg-ping-soft {
    0% { opacity: 0; transform: scale(1); }
    4% { opacity: 0.7; }
    30% { opacity: 0; transform: scale(1.22); }
    100% { opacity: 0; transform: scale(1.22); }
}
@keyframes dg-march { to { stroke-dashoffset: -22.1; } }
@keyframes dg-climb {
    0% { offset-distance: 0%; opacity: 0; }
    6% { opacity: 1; }
    70% { offset-distance: 100%; opacity: 1; }
    88% { offset-distance: 100%; opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lx-mcard { transition: none; }
    .lx-dg *, .lx-dg.is-in * { animation: none !important; transition: none !important; }
    .lx-dg .dg-flow, .lx-dg .dg-ping, .lx-dg .dg-climb { display: none; }
}

/* =============================================
   Tarjetas: un solo estilo por rol y filas parejas
   (cursos, método, bento, pasos/principios).
   ============================================= */
/* Número o etiqueta de tarjeta (01, 02 · Tema…) */
.lx-tile-num,
.lx-mtag,
.lx-num,
.lx-step-num,
.lx-flow > div::before {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
    color: var(--acid-blue);
}
.lx-tile-num,
.lx-mtag,
.lx-flow > div::before { display: block; margin-bottom: 0.75rem; }

/* Título de tarjeta */
.lx-course h3,
.lx-tile h3,
.lx-mcard h3,
.lx-flow strong {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

/* Párrafo de tarjeta */
.lx-course-body > p,
.lx-tile > p,
.lx-tile-copy > p,
.lx-mcard-body > p:not(.lx-mtag),
.lx-flow p {
    font-size: 0.95rem;
    line-height: 1.65;
    text-wrap: pretty;
}

/* Título de sección seguido directo de una fila de tarjetas: mismo aire que con subtítulo */
.lx-h2 + :is(.lx-bento, .lx-flow, .lx-courses, .lx-method) { margin-top: 1.5rem; }

/* El diagrama queda centrado en su área (que la fila iguala abajo) */
.lx-dg {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Filas alineadas: cada tarjeta comparte las pistas de su fila (subgrid),
   así etiqueta, título, texto y enlace arrancan a la misma altura que en
   las vecinas aunque falte una parte (p. ej. la tarjeta «Próximamente»). */
@supports (grid-template-rows: subgrid) {
    /* Cursos: portada · meta · título · texto · requisito · enlace */
    .lx-courses > .lx-course {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 6;
        row-gap: 0;
    }
    .lx-course > .lx-course-body {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 2 / span 5;
        row-gap: 0;
    }
    .lx-course-body > .lx-course-meta { grid-row: 1; }
    .lx-course-body > h3 { grid-row: 2; }
    .lx-course-body > p:not(.lx-req) { grid-row: 3; }
    .lx-course-body > .lx-req { grid-row: 4; }
    .lx-course-body > .article-link { grid-row: 5; justify-self: start; }

    /* Método: diagrama · etiqueta · título · texto · claves */
    .lx-method > .lx-mcard {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
        row-gap: 0;
    }
    .lx-mcard > .lx-dg { grid-row: 1; }
    .lx-mcard > .lx-mcard-body {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 2 / span 4;
        row-gap: 0;
    }
    .lx-mcard-body > .lx-mtag { grid-row: 1; }
    .lx-mcard-body > h3 { grid-row: 2; }
    .lx-mcard-body > p:not(.lx-mtag):not(.lx-dg-note) { grid-row: 3; }
    .lx-mcard-body > .lx-dg-keys,
    .lx-mcard-body > .lx-dg-note { grid-row: 4; align-self: start; }

    /* Bento: icono/número · título · texto · enlace · imagen */
    .lx-bento > .lx-tile {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
        row-gap: 0;
        align-content: start;
    }
    .lx-tile > .lx-tile-icon,
    .lx-tile > .lx-tile-num { grid-row: 1; justify-self: start; }
    .lx-tile > h3 { grid-row: 2; }
    .lx-tile > p,
    .lx-tile > .lx-tile-copy { grid-row: 3; }
    .lx-tile > .article-link { grid-row: 4; justify-self: start; align-self: end; }
    .lx-tile > .lx-tile-media { grid-row: 5 / -1; align-self: end; }
    .lx-tile > .lx-phone { grid-row: 5; align-self: start; }

    /* Pasos y principios: número · título · texto */
    .lx-flow > div {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
    }
    .lx-flow > div::before { grid-row: 1; }
    .lx-flow > div > strong { grid-row: 2; }
    .lx-flow > div > p { grid-row: 3; }
    .lx-flow > div > p:only-child { grid-row: 2 / -1; }

    @media (min-width: 1000px) {
        .lx-bento { grid-auto-rows: auto; }
        .lx-bento > .lx-tile.row-2 { grid-row: span 10; }
    }
}

/* Tarjeta de ancho completo en cualquier bento */
.lx-tile.span-6 { grid-column: 1 / -1; }