/**
 * SonicMaps — Pricing page (2026).
 *
 * Pairs with sm-site.css, which carries the tokens, reset, typography, buttons,
 * header and footer. Nothing here is used by the landing page (sm-home.css) or
 * by the old inline-styled pages.
 *
 * CUIDADO con los nombres: el JavaScript de la página es el de siempre, ya probado
 * contra Stripe, y depende de estos ganchos. No renombrarlos ni reutilizarlos:
 *   #payment-option  #currencyoptions  #basic-price  #plus-price  #pro-price
 *   #annual  #quarterly  .billing  .vat
 * `planterms()` reescribe el innerHTML de TODO .billing, así que esa clase solo
 * puede ir en el renglón "per month (billed …)" de cada plan.
 */

/* La cabecera clara (.site-header--light), el skyline de remate (.page-skyline) y el
   pie negro que lo continúa (.site-footer--after-skyline) viven en sm-site.css desde
   que la página de FAQ los comparte. */

/* ---------- Masthead ---------- */

.pricing-masthead {
    /* Longhand a propósito: va en el mismo elemento que .container y la
       abreviatura le anulaba los 24px laterales (en móvil el selector de plan
       se salía hasta los bordes). */
    padding-top: clamp(44px, 6vw, 72px);
    padding-bottom: clamp(26px, 3.4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 13px;
}

/* El producto manda: es lo que se vende en esta página. Mismo tratamiento que la
   sección del Editor en la portada (.product-title--editor), para que se reconozca. */
.pricing-masthead__product { margin: 0; font-size: clamp(32px, 5.2vw, 48px); line-height: 1.05; }
.pricing-masthead__product span { color: var(--sm-editor); }

/* Descriptor del producto (qué hace el Editor), no un título de página. */
.pricing-masthead__title { margin: 0; font-size: clamp(19px, 2.6vw, 23px); font-weight: 700; line-height: 1.25; }
.pricing-masthead__lead { margin: 0; max-width: 620px; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--sm-muted); }

/* ---------- Billing period and currency ---------- */

.pricing-controls { display: flex; align-items: center; justify-content: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 8px; }

.plan-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #E6EBF2;
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 15px;
}
.plan-switch label { cursor: pointer; }

/* `planterms()` deja los rótulos en `white` y `lightgrey` con estilo en línea, que sobre
   fondo claro serían invisibles. Como el JS no se toca, se neutraliza aquí con
   !important —la única forma de ganarle a un estilo en línea— y el estado activo se
   reconstruye desde la casilla con :has(). */
.plan-switch #annual,
.plan-switch #quarterly { color: var(--sm-muted-2) !important; font-weight: 600; transition: color 0.18s ease; }
.plan-switch:not(:has(#payment-option:checked)) #annual,
.plan-switch:has(#payment-option:checked) #quarterly { color: var(--sm-ink) !important; font-weight: 700; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slider {
    position: absolute;
    inset: 0;
    background: #AFBBCB;
    border-radius: 999px;
    transition: background-color 0.18s ease;
    pointer-events: none;
}
.slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.18s ease;
}
.switch input:checked + .slider { background: var(--sm-blue); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 3px solid #FFC56B; outline-offset: 3px; }

/* Pegado a "Annual plans", porque es ese plan el que ahorra */
.plan-save {
    margin-left: -6px;
    font-size: 12px;
    font-weight: 700;
    color: #0B6B4B;
    background: #DDF5EA;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}
/* Con el trimestral elegido el ahorro se apaga, para que se note lo que se deja pasar */
.plan-switch:has(#payment-option:checked) .plan-save { color: #6E7B8C; background: #DCE2EA; }

/* En móvil los cuatro elementos no caben en una línea: o se partían los rótulos
   o se salía "Quarterly plans" por el borde. Se oculta el ahorro, que es
   secundario; los dos rótulos y el interruptor tienen que leerse juntos para que
   se entienda el control. La fuente fluida evita encadenar breakpoints hasta 320px. */
@media (max-width: 560px) {
    .plan-save { display: none; }
    .plan-switch { gap: 10px; padding: 8px 14px; font-size: clamp(12.5px, 3.6vw, 15px); }
    .plan-switch #annual, .plan-switch #quarterly { white-space: nowrap; }
    .switch { width: 40px; height: 23px; }
    .slider::before { width: 17px; height: 17px; }
    .switch input:checked + .slider::before { transform: translateX(17px); }
}

.pricing-currency { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--sm-muted); }
.pricing-currency select {
    font: inherit;
    font-size: 15px;
    padding: 9px 11px;
    border: 1px solid #CBD3DE;
    border-radius: 9px;
    background: var(--sm-surface);
    color: var(--sm-ink);
}

/* ---------- Plans ---------- */

.plans { padding-top: 0; }
.plans__inner { display: flex; flex-direction: column; gap: 26px; }

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 24px;
    align-items: start;
}

.plan {
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 22px;
}
.plan__head { display: flex; flex-direction: column; gap: 8px; }
.plan__name { margin: 0; font-size: 22px; font-weight: 700; }
.plan__for { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sm-muted-2); }

.plan__amount { display: block; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.plan__amount--custom { font-size: 34px; letter-spacing: -0.02em; line-height: 1.6; }

/* .billing y .vat los rellena planterms(); .billingpro es fijo y la función no lo toca */
.plan__meta { margin: -12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--sm-muted-2); }
.plan__meta .vat:not(:empty) { font-weight: 600; }

.plan__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; font-size: 15px; line-height: 1.45; }
.plan__features li { display: flex; gap: 11px; align-items: flex-start; }
.plan__features svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--sm-blue); }
.plan__features a { font-weight: 600; }
/* Las cantidades que cambian de un plan a otro, resaltadas: son el motivo real por el
   que alguien sube de plan, y antes había que comparar las dos listas para verlas. */
.plan__q { font-weight: 800; color: var(--sm-ink); }
.plan__new { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--sm-blue); }
.plan__inherits { margin: -8px 0 0; font-size: 13px; font-weight: 700; color: var(--sm-muted-2); }

/* El plan destacado: oscuro y sin margen superior, para que sobresalga de la fila */
.plan--featured {
    margin-top: 0;
    background: var(--sm-navy);
    border-color: var(--sm-navy);
    color: #FFFFFF;
    box-shadow: 0 24px 48px -16px rgba(14, 26, 43, 0.45);
    position: relative;
}
.plan--featured .plan__for,
.plan--featured .plan__meta,
.plan--featured .purchase { color: #B7C2D3; }
.plan--featured .plan__features { color: #E6ECF5; }
.plan--featured .plan__q { color: #FFFFFF; }
.plan--featured .plan__features svg { color: #7FA6FF; }
.plan--featured .plan__features a { color: #9FBDFF; }
.plan--featured .plan__new { color: #FFE300; }
.plan__badge {
    position: absolute;
    top: -13px;
    left: 32px;
    background: var(--sm-blue);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}

.plan .btn { width: 100%; justify-content: center; }

/* ---------- Free Player account ---------- */

.listen {
    background: #fbfbfb;
    border: 1px solid var(--sm-border);
    border-radius: 16px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    flex-wrap: wrap;
}
.listen__text { display: flex; flex-direction: column; gap: 4px; }
.listen__text strong { font-size: 16px; }
.listen__text span { font-size: 15px; line-height: 1.5; color: var(--sm-muted-2); }
.listen__link { font: inherit; font-size: 15px; font-weight: 700; color: var(--sm-blue); background: none; border: 0; padding: 4px; cursor: pointer; }
.listen__link:hover { color: var(--sm-blue-dark); text-decoration: underline; }

/* No es letra pequeña: quita un miedo antes de pulsar el botón, así que se lee
   al mismo tamaño que las líneas de las tarjetas. */
.pricing-note { margin: 0; font-size: 15px; color: var(--sm-muted); text-align: center; }
/* La nota habla de los botones de las tarjetas: se acerca a ellas para que no
   parezca que pertenece al bloque de cuenta gratuita que viene justo debajo. */
.plan-grid + .pricing-note { margin-top: -12px; }

/* ---------- Clients ---------- */

/* Va sobre el mismo fondo que los planes, así que los dos paddings de sección se
   sumaban (hasta 224px) sin que nada marcara el cambio. Separa el de .plans. */
.section--flush-top { padding-top: 0; }

.pricing-clients { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.pricing-clients__lead { margin: 0; max-width: 640px; text-align: center; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--sm-muted); }
/* Nueve logos a este tamaño no caben en una línea (~1210px para 1152 de
   contenedor) y el noveno quedaba huérfano. El max-width fuerza el corte en
   5 + 4: flex centra cada línea por separado, así que las dos quedan simétricas.
   Coincide además con el ancho del texto de encima. */
.pricing-clients__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 44px; max-width: 720px; }
/* Los logos son siluetas de blanco puro sobre alfa (vienen de la pricing antigua,
   que tenía fondo oscuro). brightness(0) los lleva a negro conservando el canal
   alfa: equivale a reexportarlos en negro, bordes antialiased incluidos. No hace
   falta una segunda versión de cada archivo. Si algún día se sustituyen por
   logos a todo color, hay que quitar el filtro. */
.pricing-clients__row img { height: 64px; width: auto; filter: brightness(0); opacity: 0.55; }
.pricing-clients__row img.is-wide { height: 46px; }

/* Igualar peso óptico, no altura de caja: estos tres son de trazo fino y con
   mucho aire dentro del propio archivo, así que a la altura base se leen
   bastante más pequeños que el resto. */
.pricing-clients__row img[src*="oxford"]  { height: 74px; }
.pricing-clients__row img[src*="calvary"] { height: 74px; }
.pricing-clients__row img[src*="hdsb"]    { height: 70px; }

/* ---------- Quote ---------- */

.pricing-quote { background: var(--sm-surface); }
.pricing-quote figure { margin: 0 auto; max-width: 820px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pricing-quote blockquote { margin: 0; font-family: var(--sm-serif); font-size: clamp(22px, 3.2vw, 30px); line-height: 1.4; }
.pricing-quote figcaption { font-size: 15px; color: var(--sm-muted-2); font-weight: 600; }

/* ---------- FAQ ---------- */

.pricing-faq__inner { max-width: var(--sm-measure); margin: 0 auto; }
.pricing-faq h2 { margin: 0 0 22px; font-size: clamp(26px, 3.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; text-align: center; }
.pricing-faq__list { display: flex; flex-direction: column; border-top: 1px solid #DCE2EA; }
.pricing-faq details { border-bottom: 1px solid #DCE2EA; padding: 18px 4px; }
.pricing-faq summary { font-size: 17px; font-weight: 700; cursor: pointer; }
.pricing-faq details p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--sm-muted); }
.pricing-faq__all { margin: 22px 0 0; text-align: center; font-size: 15px; }

/* ---------- Final call to action ---------- */

.pricing-cta { padding-bottom: var(--sm-section-pad); }
.pricing-cta__box {
    background: #e3e7eb;
    border-radius: 24px;
    padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: var(--sm-ink-hero);
}
.pricing-cta__box h2 { margin: 0; font-size: clamp(28px, 4.4vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.pricing-cta__box p { margin: 0; font-size: 17px; color: var(--sm-muted); }
.pricing-cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 6px; }

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
    .plan { padding: 26px 22px; }
    .listen { padding: 18px 20px; }
    .plan__amount { font-size: 44px; }
    .plan-switch { font-size: 14px; gap: 10px; padding: 7px 14px; }
}

/* El fondo de esta caja (#e3e7eb) es casi igual que --sm-border (#E3E8EF), asi que
   el contorno del boton fantasma desaparecia. Sobre esta superficie necesita un
   borde mas oscuro para seguir leyendose como boton. */
.pricing-cta__box .btn--ghost { border-color: #C2CCD9; }
.pricing-cta__box .btn--ghost:hover { border-color: var(--sm-blue); }