/**
 * Tabla de precios — koinos-core-plugin
 *
 * Mobile-first: una columna, y sólo crece con min-width (640 / 1024), los dos
 * breakpoints del proyecto.
 *
 * Cada tarjeta lleva su acento en una variable local (--a*), así el mismo
 * marcado sirve para los cinco planes y agregar uno nuevo es sumar un modifier
 * de 4 líneas, no duplicar el bloque entero.
 *
 * Todo scopeado bajo .kp — comparte página con Elementor y el tema.
 */

.kp {
    --kp-ink: #1b1235;
    --kp-body: #6b7280;
    --kp-line: #eceaf3;
    --kp-tap: 44px;

    display: grid;
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 4px;
    font-family: var(--koinos-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* ─────────────────────────── Acentos por plan ─────────────────────────── */

.kp__card--violet  { --a: #6d28d9; --a-soft: #f3f0ff; --a-ring: #ede9fe; }
.kp__card--rose    { --a: #ec4899; --a-soft: #fdf2f8; --a-ring: #fce7f3; }
.kp__card--amber   { --a: #d97706; --a-soft: #fffbeb; --a-ring: #fef3c7; }
.kp__card--indigo  { --a: #4f46e5; --a-soft: #eef2ff; --a-ring: #e0e7ff; }
.kp__card--gradient{ --a: #7c3aed; --a-soft: #f5f3ff; --a-ring: #ede9fe; }

/* ────────────────────────────── Tarjeta ───────────────────────────────── */

.kp__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 24px 24px;
    border: 1px solid var(--kp-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(27, 18, 53, .06);
    overflow: hidden;
}

/* ───────────────────────── Cabecera e icono ───────────────────────────── */

.kp__head {
    text-align: center;
}

.kp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--a-soft);
    color: var(--a);
}

.kp__icon svg {
    width: 36px;
    height: 36px;
}

.kp__name {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--kp-ink);
    text-wrap: balance;
}

/* Subtítulo con filete a cada lado. Los filetes son pseudo-elementos flexibles
   para que se adapten al largo del texto sin medirlo. */
.kp__tag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--a);
    font-size: .98rem;
    font-weight: 600;
}

.kp__tag::before,
.kp__tag::after {
    content: "";
    flex: 1;
    height: 1.5px;
    background: var(--a-ring);
}

.kp__pitch {
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--kp-line);
    color: var(--kp-body);
    font-size: .96rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ─────────────────────────────── Precio ───────────────────────────────── */

.kp__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 0 22px;
    padding: 18px 12px;
    border-radius: 16px;
    background: var(--a-soft);
    text-align: center;
}

.kp__amount {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--a);
}

.kp__period {
    font-size: .88rem;
    color: var(--kp-body);
}

/* ────────────────────────────── Features ──────────────────────────────── */

.kp__feats {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.kp__feats li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--kp-line);
    font-size: .95rem;
    line-height: 1.45;
    color: #3f3d56;
}

.kp__feats li:last-child {
    border-bottom: 0;
}

.kp__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--a);
    color: #fff;
}

.kp__check svg {
    width: 12px;
    height: 12px;
}

/* ──────────────────────────────── CTA ─────────────────────────────────── */

.kp__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--kp-tap);
    padding: 15px 22px;
    border-radius: 14px;
    background: var(--a);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter .18s, transform .18s;
}

.kp__cta:hover {
    filter: brightness(1.08);
    color: #fff;
    transform: translateY(-1px);
}

.kp__cta:focus-visible {
    outline: 3px solid var(--a);
    outline-offset: 3px;
}

.kp__chev {
    width: 17px;
    height: 17px;
}

.kp__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    color: #9ca3af;
    font-size: .82rem;
}

.kp__lockicon {
    width: 14px;
    height: 14px;
}

/* ───────────────────── Tarjeta destacada (Completa) ───────────────────── */

.kp__card--featured {
    padding-top: 0;
    border-color: transparent;
    box-shadow: 0 22px 50px rgba(87, 45, 180, .22);
}

/* La cabecera sangra hasta los bordes y se apoya sobre el degradé. */
.kp__card--featured .kp__head {
    position: relative;
    margin: 0 -24px 26px;
    padding: 34px 24px 30px;
    background: linear-gradient(160deg, #8b5cf6 0%, #6d28d9 55%, #5b21b6 100%);
    color: #fff;
}

/* Panza convexa del degradé: un óvalo del mismo color asomando por abajo.
   Con border-radius sobre el bloque la curva saldría cóncava. */
.kp__card--featured .kp__head::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -26px;
    height: 54px;
    border-radius: 50%;
    background: #5b21b6;
    z-index: -1;
}

.kp__card--featured .kp__icon {
    background: #fff;
    color: #6d28d9;
    box-shadow: 0 8px 22px rgba(30, 12, 70, .25);
}

.kp__card--featured .kp__name,
.kp__card--featured .kp__tag,
.kp__card--featured .kp__pitch {
    color: #fff;
}

.kp__card--featured .kp__tag::before,
.kp__card--featured .kp__tag::after {
    background: rgba(255, 255, 255, .45);
}

.kp__card--featured .kp__pitch {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    color: rgba(255, 255, 255, .92);
}

/* Cintillo diagonal en la esquina superior derecha. */
.kp__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 148px;
    height: 148px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.kp__ribbon span {
    position: absolute;
    top: 30px;
    right: -36px;
    width: 180px;
    padding: 7px 0;
    background: linear-gradient(90deg, #fb7185, #f97362);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}

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

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

    .kp__card {
        padding: 34px 28px 26px;
    }

    .kp__card--featured {
        padding-top: 0;
    }

    .kp__card--featured .kp__head {
        margin: 0 -28px 26px;
        padding: 38px 28px 32px;
    }
}

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

@media (min-width: 1024px) {
    .kp {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        align-items: start;
    }

    /* El destacado se levanta sobre los vecinos, como en el diseño. */
    .kp__card--featured {
        margin-top: -18px;
        margin-bottom: -18px;
        z-index: 1;
    }

    .kp__name {
        font-size: 1.9rem;
    }

    .kp__amount {
        font-size: 2.6rem;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .kp__cta {
        transition: none;
    }
    .kp__cta:hover {
        transform: none;
    }
}