/* Página /precios (spec 2026-10-26_pagina_precios_spec.md). Usa el sistema del sitio; lo propio es la línea de precio tipo ticket. */
:root {
    --pr-ink: #0f172a;
    --pr-copy: #5a6578;
    --pr-green: #0b6e4f;
    --pr-green-dark: #095a41;
    --pr-line: #d9e1ee;
    --pr-soft: #f5f7fb;
    --pr-header-h: 84px;
}

.pr-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.pr-top { padding: 2.2rem 0 3rem; }

.pr-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}
.pr-head h1 {
    margin: 0.7rem 0 0.6rem;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--pr-ink);
}
.pr-head p { margin: 0; max-width: 60ch; color: var(--pr-copy); font-size: 1.05rem; line-height: 1.6; }

.pr-switch {
    display: inline-flex;
    flex-shrink: 0;
    padding: 4px;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    background: #fff;
}
.pr-switch label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--pr-ink);
    cursor: pointer;
}
.pr-switch label span { font-size: 0.78rem; font-weight: 700; color: var(--pr-green-dark); }
#periodo-mensual:checked ~ .pr-head label[for="periodo-mensual"],
#periodo-anual:checked ~ .pr-head label[for="periodo-anual"] { background: var(--pr-ink); color: #fff; }
#periodo-anual:checked ~ .pr-head label[for="periodo-anual"] span { color: #bfe0d2; }
#periodo-mensual:focus-visible ~ .pr-head label[for="periodo-mensual"],
#periodo-anual:focus-visible ~ .pr-head label[for="periodo-anual"] { outline: 3px solid var(--pr-green); outline-offset: 2px; }

/* Subgrid: nombre, para quién, precio, lista, botón y nota quedan a la misma altura en las 3 tarjetas. */
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.1rem; row-gap: 0; }
.pr-plan {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    padding: 1.6rem;
    border: 1px solid var(--pr-line);
    border-radius: 20px;
    background: #fff;
}
.pr-plan h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--pr-ink); }
.pr-plan-for { margin: 0.45rem 0 0; color: var(--pr-copy); line-height: 1.5; }

/* La línea de precio como el total de un ticket de mostrador. */
.pr-price { margin: 1.2rem 0 1.1rem; padding-top: 1rem; border-top: 2px dotted #b8c3d4; }
.is-annual { display: none; }
#periodo-anual:checked ~ .pr-plans .is-annual { display: block; }
#periodo-anual:checked ~ .pr-plans .is-monthly { display: none; }
.pr-price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0; }
.pr-amount {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pr-ink);
    font-variant-numeric: tabular-nums;
}
.pr-unit { font-size: 0.9rem; font-weight: 600; color: var(--pr-copy); text-align: right; }
.pr-price-note { margin: 0.35rem 0 0; font-size: 0.84rem; color: var(--pr-copy); font-variant-numeric: tabular-nums; }

.pr-highlights { display: grid; gap: 0.6rem; align-content: start; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.pr-highlights li { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--pr-ink); line-height: 1.45; }
.pr-highlights li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--pr-green); }
.pr-highlights li.is-all { font-weight: 700; }
.pr-soon {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #fff4d6;
    color: #7a5200;
    font-size: 0.74rem;
    font-weight: 700;
    vertical-align: 1px;
}
.pr-cta { justify-content: center; align-self: start; min-height: 48px; }
.pr-plan-note { margin: 0.75rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--pr-copy); }
.pr-plan-note a, .pr-pay a { color: var(--pr-green-dark); font-weight: 700; }

.pr-section-head h2, .pr-pay h2, .pr-faq h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    letter-spacing: -0.03em;
    color: var(--pr-ink);
}
.pr-section-head p { margin: 0 0 1.2rem; color: var(--pr-copy); max-width: 70ch; }

.pr-compare-head, .pr-table tr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 110px); align-items: center; }
.pr-compare-head {
    position: sticky;
    top: var(--pr-header-h);
    z-index: 5;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pr-line);
    border-radius: 14px 14px 0 0;
    background: var(--pr-ink);
    color: #fff;
    font-weight: 700;
}
.pr-compare-head span:not(:first-child) { text-align: center; }

.pr-group { border: 1px solid var(--pr-line); border-top: 0; background: #fff; }
.pr-group:last-of-type { border-radius: 0 0 14px 14px; }
.pr-group summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0 1rem;
    background: var(--pr-soft);
    cursor: pointer;
    list-style: none;
}
.pr-group summary::-webkit-details-marker { display: none; }
.pr-group summary h3 { margin: 0; font-size: 1rem; color: var(--pr-ink); }
.pr-group-count { color: var(--pr-copy); font-size: 0.84rem; }
.pr-group summary svg { margin-left: auto; width: 18px; height: 18px; transition: transform 0.2s; }
.pr-group:not([open]) summary svg { transform: rotate(-90deg); }
.pr-group summary:focus-visible { outline: 3px solid var(--pr-green); outline-offset: -3px; }

.pr-table { width: 100%; border-collapse: collapse; }
.pr-table tr { padding: 0.55rem 1rem; border-top: 1px solid #edf1f7; }
.pr-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--pr-ink); line-height: 1.4; }
.pr-table td { display: flex; justify-content: center; }
.pr-yes svg { width: 18px; height: 18px; color: var(--pr-green); }
.pr-no svg { width: 16px; height: 16px; color: #8a96a8; }

.pr-info { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.pr-pay { padding: 1.6rem; border: 1px solid var(--pr-line); border-radius: 20px; background: #fff; }
.pr-pay ul { margin: 0; padding-left: 1.2rem; color: var(--pr-ink); line-height: 1.7; }
.pr-faq dl { margin: 0; }
.pr-faq dt { margin-top: 1rem; font-weight: 700; color: var(--pr-ink); }
.pr-faq dt:first-child { margin-top: 0; }
.pr-faq dd { margin: 0.3rem 0 0; color: var(--pr-copy); line-height: 1.6; }

@media (max-width: 980px) {
    .pr-plans { grid-template-columns: 1fr; row-gap: 1.1rem; }
    .pr-plan { display: flex; flex-direction: column; grid-row: auto; }
    .pr-info { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    :root { --pr-header-h: 72px; }
    .pr-top { padding-top: 1.2rem; }
    .pr-head { flex-direction: column; align-items: stretch; gap: 1.2rem; }
    .pr-switch { display: flex; }
    .pr-switch label { flex: 1 1 auto; justify-content: center; padding: 0 0.8rem; white-space: nowrap; }
    .pr-switch label span { font-size: 0.72rem; }
    .pr-plan { padding: 1.25rem; }
    .pr-amount { font-size: 2.3rem; }
    .pr-compare-head, .pr-table tr { grid-template-columns: minmax(0, 1fr) repeat(3, 54px); }
    .pr-compare-head { padding: 0.65rem 0.75rem; font-size: 0.8rem; }
    .pr-table tr { padding: 0.55rem 0.75rem; }
    .pr-table th[scope="row"] { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-group summary svg { transition: none; }
}