/**
 * Landing pages SEO — koinos-core-plugin
 *
 * Mobile-first: todo lo base es para celular y sólo crece con min-width.
 * Breakpoints: 640px y 1024px, los dos únicos valores que queremos en el
 * proyecto (ver la deuda C3 de la auditoría: hoy conviven 540/600/640/768/1024).
 *
 * Los colores salen de los tokens del tema con fallback literal, porque este CSS
 * puede cargar en páginas donde el tema todavía no definió :root.
 *
 * Todo está scopeado bajo .kl — comparte página con Elementor y el tema.
 */

.kl {
    --kl-purple: var(--koinos-purple-600, #7c3aed);
    --kl-purple-dark: var(--koinos-purple-700, #6d28d9);
    --kl-purple-soft: var(--koinos-purple-50, #faf8ff);
    --kl-text: var(--koinos-gray-700, #374151);
    --kl-muted: var(--koinos-gray-500, #6b7280);
    --kl-border: var(--koinos-gray-200, #e9ebef);
    --kl-ink: #1f2937;

    /* Piso táctil de 44px (WCAG 2.5.5 / HIG). Se aplica a todo control de .kl. */
    --kl-tap: 44px;

    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px 64px;
    color: var(--kl-text);
    font-family: var(--koinos-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    line-height: 1.65;
}

/* ─────────────────────────────── Hero ─────────────────────────────── */

.kl__hero {
    padding: 40px 0 8px;
    text-align: center;
}

.kl__eyebrow {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kl-purple);
}

.kl__h1 {
    margin: 0 0 16px;
    font-size: clamp(1.9rem, 7vw, 3rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--kl-ink);
    text-wrap: balance;
}

.kl__lead {
    margin: 0 auto 28px;
    max-width: 56ch;
    font-size: 1.075rem;
    color: var(--kl-muted);
}

/* ────────────────────────────── Botones ───────────────────────────── */

.kl__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kl__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--kl-tap);
    padding: 12px 26px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s, color .18s, transform .18s;
}

.kl__btn:focus-visible {
    outline: 3px solid var(--kl-purple);
    outline-offset: 3px;
}

.kl__btn--primary {
    background: var(--kl-purple);
    color: #fff;
}

.kl__btn--primary:hover {
    background: var(--kl-purple-dark);
    color: #fff;
}

.kl__btn--ghost {
    background: transparent;
    color: var(--kl-purple);
    border: 2px solid var(--kl-border);
}

.kl__btn--ghost:hover {
    border-color: var(--kl-purple);
    color: var(--kl-purple);
}

/* ─────────────────────────────── Stats ────────────────────────────── */

.kl__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 36px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--kl-border);
}

.kl__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kl__stat-n {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--kl-purple);
}

.kl__stat-l {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--kl-muted);
}

/* ────────────────────────────── Secciones ─────────────────────────── */

.kl__section {
    margin-top: 44px;
}

.kl__h2 {
    margin: 0 0 14px;
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    line-height: 1.25;
    font-weight: 800;
    color: var(--kl-ink);
    text-wrap: balance;
}

.kl__body {
    margin: 0;
    font-size: 1.025rem;
}

.kl__list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.kl__list li {
    position: relative;
    padding: 0 0 0 28px;
    margin-bottom: 10px;
}

.kl__list li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kl-purple);
}

/* ──────────────────────────────── FAQ ─────────────────────────────── */

.kl__q {
    border-bottom: 1px solid var(--kl-border);
}

.kl__q-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: var(--kl-tap);
    padding: 14px 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--kl-ink);
    cursor: pointer;
    list-style: none;
}

.kl__q-title::-webkit-details-marker { display: none; }

.kl__q-title::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--kl-purple);
    transition: transform .18s;
}

.kl__q[open] .kl__q-title::after {
    transform: rotate(45deg);
}

.kl__q-body {
    margin: 0;
    padding: 0 0 18px;
    color: var(--kl-muted);
}

/* ──────────────────────────── CTA de cierre ───────────────────────── */

.kl__cta {
    margin-top: 52px;
    padding: 32px 22px;
    border-radius: 20px;
    background: var(--kl-purple-soft);
    text-align: center;
}

.kl__cta-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--kl-ink);
}

.kl__cta-text {
    margin: 0 0 22px;
    color: var(--kl-muted);
}

.kl__actions--center {
    align-items: stretch;
}

/* ───────────────────────── Enlazado interno ───────────────────────── */

.kl__related {
    margin-top: 52px;
}

.kl__rel-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kl__rel-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: var(--kl-tap);
    padding: 14px 18px;
    border: 1px solid var(--kl-border);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .18s, background-color .18s;
}

.kl__rel-link:hover {
    border-color: var(--kl-purple);
    background: var(--kl-purple-soft);
}

.kl__rel-t {
    font-weight: 700;
    color: var(--kl-ink);
}

.kl__rel-d {
    font-size: 0.8rem;
    color: var(--kl-muted);
}

/* ═══════════════════════════ ≥ 640px ═══════════════════════════════ */

@media (min-width: 640px) {
    .kl {
        padding: 0 32px 80px;
    }

    .kl__hero {
        padding-top: 64px;
    }

    .kl__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .kl__stats {
        gap: 24px;
    }

    .kl__stat-n {
        font-size: 1.75rem;
    }

    .kl__stat-l {
        font-size: 0.85rem;
    }

    .kl__section {
        margin-top: 56px;
    }

    .kl__cta {
        padding: 44px 40px;
    }

    .kl__rel-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════════════ ≥ 1024px ══════════════════════════════ */

@media (min-width: 1024px) {
    .kl {
        padding-bottom: 96px;
    }

    .kl__lead {
        font-size: 1.15rem;
    }
}

/* ──────────────────────── Preferencias del SO ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .kl__btn,
    .kl__q-title::after,
    .kl__rel-link {
        transition: none;
    }
}

/* ─────────────────────────────── Planes ───────────────────────────── */

.kl__plans {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kl__plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    border: 1px solid var(--kl-border);
    border-radius: 18px;
    background: #fff;
}

.kl__plan--featured {
    border: 2px solid var(--kl-purple);
    box-shadow: 0 12px 32px rgba(124, 58, 237, .12);
}

.kl__plan-badge {
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--kl-purple);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kl__plan-name {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--kl-ink);
}

.kl__plan-price {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--kl-purple);
}

.kl__plan-pitch {
    margin: 0 0 18px;
    font-size: 0.92rem;
    color: var(--kl-muted);
}

.kl__plan-feats {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 0.94rem;
}

.kl__plan-feats li {
    position: relative;
    padding: 0 0 0 24px;
    margin-bottom: 8px;
}

.kl__plan-feats li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 800;
    color: var(--kl-purple);
}

.kl__plan-cta {
    width: 100%;
}

/* Add-on: se presenta aparte del grid, es un upsell y no un plan más. */
.kl__addon {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    padding: 24px 22px;
    border: 1px dashed var(--kl-border);
    border-radius: 18px;
    background: var(--kl-purple-soft);
}

.kl__addon-name {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--kl-ink);
}

.kl__addon-pitch {
    margin: 0;
    font-size: 0.92rem;
    color: var(--kl-muted);
}

@media (min-width: 640px) {
    .kl__plans {
        grid-template-columns: repeat(2, 1fr);
    }

    .kl__addon {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .kl__addon .kl__btn {
        flex: 0 0 auto;
    }
}

@media (min-width: 1024px) {
    /* La página de precios necesita más ancho que una landing de texto. */
    .kl[data-landing="precios"] {
        max-width: 1060px;
    }

    .kl__plans {
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
    }

    .kl__plan-price {
        font-size: 1.75rem;
    }
}