/* ============================================================================
   planes.css — páginas de planes: /planes/ (hub), /planes/radios/,
   /planes/teamtalk/ y la página dedicada de cada plan.
   Solo se carga en esas plantillas (block extra_head). Usa la paleta de flr.css.
   ============================================================================ */

/* ── Hub de servicios (/planes/) ─────────────────────────────────────────── */
.hub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-6);
    max-width: 980px;
    margin: 0 auto;
}
.hub-card {
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hub-card:hover,
.hub-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--color-accent-border);
    box-shadow: var(--shadow);
}
.hub-card__icon { font-size: 48px; line-height: 1; }
.hub-card__title { margin: 0; font-size: var(--fs-xl); }
.hub-card__price { margin: 0; font-weight: 800; color: var(--color-accent); font-size: var(--fs-lg); }
.hub-card__desc { margin: 0; color: var(--color-text-soft); line-height: 1.55; }
.hub-card__features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.hub-card__features li { margin: 0; padding-left: 26px; position: relative; }
.hub-card__features li::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    color: var(--color-accent); font-weight: 700;
}
.hub-card__cta { margin-top: auto; align-self: flex-start; }

/* ── Rejilla de tarjetas de plan ─────────────────────────────────────────── */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-6);
    align-items: stretch;
    margin-top: var(--space-5);
}

/* ── Tarjeta de plan: partial core/_partials/plan_card.html ─────────────── */
.plan-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--space-6) var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.plan-card:hover,
.plan-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--color-accent-border);
    box-shadow: var(--shadow);
}
.plan-card--destacado {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), var(--shadow);
}
.plan-card__badge {
    position: absolute; top: -14px; left: var(--space-5);
    margin: 0;
    padding: var(--space-1) var(--space-3);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1.4;
}
.plan-card__name { margin: 0 0 var(--space-2); font-size: var(--fs-xl); }
.plan-card__desc { margin: 0 0 var(--space-4); color: var(--color-text-soft); font-size: var(--fs-sm); line-height: 1.5; }

.plan-card__pricing {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.plan-card__price {
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
}
.plan-card__amount {
    font-size: clamp(30px, 7vw, 40px);
    font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    color: var(--color-text);
    white-space: nowrap;
}
.plan-card__currency { font-size: 0.6em; vertical-align: top; color: var(--color-text-soft); margin-right: 2px; }
.plan-card__per { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); }
.plan-card__alt {
    list-style: none; padding: 0;
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm); color: var(--color-text-soft);
}
.plan-card__alt li { margin: 0 0 2px; }
.plan-card__savings { color: var(--color-success); font-weight: 600; }

.plan-card__features { list-style: none; padding: 0; margin: 0 0 var(--space-4); flex: 1; }
.plan-card__features li {
    position: relative; margin: 0;
    padding: var(--space-2) 0 var(--space-2) 32px;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.45;
    color: var(--color-text);
}
.plan-card__features li:last-child { border-bottom: 0; }
.plan-card__features li::before {
    content: "✓";
    position: absolute; left: 0; top: calc(var(--space-2) + 1px);
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700;
}

/* «Incluye en el paquete»: el mismo bloque en la tarjeta (.plan-card__includes)
   y en la página del propio plan (.plan-includes). */
.plan-card__includes-label,
.plan-includes__label {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs); font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-accent);
}
.plan-card__includes,
.plan-includes {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.plan-includes { max-width: 520px; margin-top: var(--space-2); }
.plan-card__includes li,
.plan-includes li {
    position: relative; margin: 0; padding-left: 22px;
    font-weight: 600; color: var(--color-text);
}
.plan-card__includes li::before,
.plan-includes li::before {
    content: "+";
    position: absolute; left: 4px; top: -1px;
    color: var(--color-accent); font-weight: 900;
}
.plan-card__actions {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-top: auto;
}

/* ── Página dedicada de un plan ──────────────────────────────────────────── */
.plan-hero {
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
    padding: var(--space-8) 0 var(--space-7);
    border-bottom: 1px solid var(--color-border);
}
.plan-hero__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--space-5); }
.plan-hero__eyebrow { margin: 0 0 var(--space-4); color: var(--color-text-soft); font-size: var(--fs-sm); }
.plan-hero__eyebrow a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--color-accent); text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.plan-hero__eyebrow a:hover { color: var(--color-accent-hover); }
.plan-hero__title { font-size: clamp(28px, 4vw, 44px); margin: 0 0 var(--space-2); }
.plan-hero__subtitle { font-size: clamp(16px, 1.5vw, 19px); color: var(--color-text-soft); margin: 0 0 var(--space-6); max-width: 64ch; }

.plan-hero__pricing { display: flex; gap: var(--space-5); flex-wrap: wrap; margin: 0 0 var(--space-6); }
.plan-hero__price {
    flex: 1; min-width: min(220px, 100%);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
}
.plan-hero__price--accent { border-color: var(--color-accent); background: var(--color-accent-soft); }
.plan-hero__price-label { margin: 0 0 var(--space-1); color: var(--color-text-soft); font-size: var(--fs-sm); }
.plan-hero__badge {
    display: inline-block; margin-left: var(--space-2);
    padding: 2px 10px;
    background: var(--color-accent); color: var(--color-text-on-accent);
    font-weight: 700; border-radius: var(--radius-pill); font-size: var(--fs-xs);
}
.plan-hero__price-value { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1; color: var(--color-text); }
.plan-hero__currency { font-size: 0.7em; vertical-align: top; color: var(--color-text-soft); }
.plan-hero__per { font-size: var(--fs-sm); color: var(--color-text-soft); font-weight: 400; margin-left: 4px; }
.plan-hero__savings { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-success); font-weight: 600; }
.plan-hero__cta { margin: 0 0 var(--space-4); }
.plan-hero__note { margin: 0 0 var(--space-4); color: var(--color-text-soft); }
.plan-hero__audience { margin: 0; color: var(--color-text-soft); }

.plan-section { padding: var(--space-7) 0; background: var(--color-bg); }
.plan-section--soft { background: var(--color-bg-soft); }
.plan-section .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-5); }
.plan-section h2 { font-size: clamp(22px, 2.5vw, 30px); margin: 0 0 var(--space-5); }
.plan-section__lead { color: var(--color-text-soft); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }

.plan-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}
.plan-feature {
    padding: var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.plan-feature__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.plan-feature__desc { margin: 0; color: var(--color-text-soft); line-height: 1.55; }

.plan-feature-list {
    list-style: none; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-2);
    margin: var(--space-5) 0;
}
.plan-feature-list li { margin: 0; padding: var(--space-2) 0 var(--space-2) 28px; position: relative; }
.plan-feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }

.plan-specs { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.plan-specs__title { font-size: var(--fs-lg); margin: 0 0 var(--space-4); }
.plan-specs__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-2) var(--space-6);
    margin: 0;
}
.plan-specs__list dt { font-weight: 600; color: var(--color-text-soft); }
.plan-specs__list dd { margin: 0 0 var(--space-4); color: var(--color-text); }

.plan-prose { max-width: 720px; }
.plan-longdesc { line-height: 1.65; font-size: var(--fs-md); }

.plan-faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 760px; }
.plan-faq__item {
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.plan-faq__item[open] { border-color: var(--color-accent-border); }
.plan-faq__q { font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.plan-faq__q:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.plan-faq__a { margin-top: var(--space-2); color: var(--color-text-soft); line-height: 1.55; }

.plan-cta-final {
    padding: var(--space-8) 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}
.plan-cta-final h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 var(--space-4); }
.plan-cta-final p { margin: 0 auto var(--space-6); color: var(--color-text-soft); max-width: 60ch; }

@media (max-width: 720px) {
    .plan-hero__pricing { flex-direction: column; }
    .plan-hero__badge { margin-left: 0; margin-top: var(--space-1); display: inline-block; }
}