/* Estilos de la página de Precios (misbestias.com). Van en archivo EXTERNO,
   no en línea, porque la CSP es style-src 'self': los <style> y style="" en
   línea se bloquean en producción. Usa los tokens de marca.css. */

      /* ========================================================================
         Específico de Precios — solo tokens de marca.css (nada de números sueltos).
         Toggle Mensual/Anual 100 % CSS: radios ocultos + selectores :checked ~.
         Esta página no tiene JavaScript (CSP script-src 'none').
         ====================================================================== */

      .pricing {
        position: relative; /* ancla los radios ocultos */
      }

      .pricing-intro {
        padding: var(--sp-xxxl) 0 var(--sp-xl);
        text-align: center;
      }
      .pricing-intro h1 {
        font-size: var(--fs-display);
      }
      .pricing-intro .lead {
        color: var(--text-muted);
        font-size: var(--fs-title);
        line-height: var(--lh-snug);
        margin: var(--sp-md) auto 0;
        max-width: 46ch;
      }

      /* --- Radios del toggle: ocultos pero enfocables por teclado --- */
      .ciclo-radio {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }

      /* --- Toggle (segmentado) Mensual / Anual --- */
      .toggle {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp-sm) var(--sp-md);
        margin-top: var(--sp-xl);
      }
      .toggle__caption {
        color: var(--text-muted);
        font-size: var(--fs-body);
        font-weight: var(--fw-medium);
      }
      .toggle__group {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-xxs);
        background: var(--surface-soft);
        border: 1px solid var(--border);
        border-radius: var(--radius-round);
        padding: var(--sp-xxs);
      }
      .toggle__opt {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-xs);
        min-height: var(--min-touch);
        padding: 0 var(--sp-lg);
        border-radius: var(--radius-round);
        color: var(--text-muted);
        font-weight: var(--fw-semibold);
        font-size: var(--fs-body);
        cursor: pointer;
        user-select: none;
      }
      .toggle__save {
        font-size: var(--fs-xs);
        font-weight: var(--fw-bold);
        color: var(--success);
        background: var(--success-bg);
        border: 1px solid var(--success-border);
        border-radius: var(--radius-round);
        padding: var(--sp-hair) var(--sp-sm);
      }

      /* Estado activo del toggle según el radio marcado */
      #ciclo-mes:checked ~ * .toggle__opt--mes,
      #ciclo-ano:checked ~ * .toggle__opt--ano {
        background: var(--primary);
        color: var(--on-primary);
      }
      #ciclo-ano:checked ~ * .toggle__opt--ano .toggle__save {
        color: var(--on-primary);
        background: transparent;
        border-color: var(--on-primary);
      }
      /* Foco visible dibujado sobre la etiqueta del radio enfocado por teclado */
      #ciclo-mes:focus-visible ~ * .toggle__opt--mes,
      #ciclo-ano:focus-visible ~ * .toggle__opt--ano {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
      }

      /* --- Alternancia de precios mes/año (display natural con revert) --- */
      .precio--ano {
        display: none;
      }
      #ciclo-ano:checked ~ * .precio--mes {
        display: none;
      }
      #ciclo-ano:checked ~ * .precio--ano {
        display: revert;
      }

      /* --- Planes --- */
      .plans {
        display: grid;
        gap: var(--sp-xl);
        grid-template-columns: 1fr;
        margin-top: var(--sp-xxl);
        align-items: start;
      }
      .plan {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--sp-md);
      }
      .plan--popular {
        border: 2px solid var(--accent);
      }
      .plan__badge {
        position: absolute;
        top: calc(-1 * var(--sp-md));
        left: var(--sp-xl);
        background: var(--accent);
        color: var(--on-primary);
        font-family: var(--font-body);
        font-size: var(--fs-xs);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-brand);
        text-transform: uppercase;
        padding: var(--sp-xxs) var(--sp-md);
        border-radius: var(--radius-round);
      }
      .plan__name {
        font-size: var(--fs-xl);
      }
      .plan__price {
        display: flex;
        align-items: baseline;
        gap: var(--sp-xs);
        flex-wrap: wrap;
        min-height: var(--sp-huge); /* evita saltos al alternar mes/año */
      }
      /* Cifras en Inter 700 (estilo "Número/Dato" del rediseño) */
      .plan__amount {
        font-family: var(--font-body);
        font-size: var(--fs-xxl);
        font-weight: var(--fw-bold);
        line-height: var(--lh-tight);
        color: var(--brand-ink);
      }
      .plan__period {
        color: var(--text-subtle);
        font-size: var(--fs-md);
      }
      .plan__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-sm);
        color: var(--text-muted);
        font-size: var(--fs-body);
      }
      .plan__list li {
        display: flex;
        gap: var(--sp-sm);
        align-items: flex-start;
      }
      .plan__list .ico {
        color: var(--success);
        margin-top: var(--sp-hair);
      }
      .plan__cta {
        margin-top: auto; /* alinea los botones abajo en la fila */
      }
      .plan__renew {
        font-size: var(--fs-sm);
        color: var(--text-subtle);
        line-height: var(--lh-snug);
      }

      /* --- Disponibilidad (CTA honesto, sin checkout) --- */
      .availability {
        margin-top: var(--sp-xxl);
      }
      .availability .card {
        text-align: center;
      }
      .availability h2 {
        font-size: var(--fs-title);
        margin-bottom: var(--sp-xs);
      }
      .availability p {
        color: var(--text-muted);
        margin: 0 auto;
        max-width: 52ch;
      }
      .billing-note {
        margin: var(--sp-lg) auto 0;
        max-width: 60ch;
        color: var(--text-subtle);
        font-size: var(--fs-md);
        line-height: var(--lh-snug);
        text-align: center;
      }

      /* --- Comparar --- */
      .section {
        padding: var(--sp-xxxl) 0;
      }
      .section > .wrap > h2 {
        font-size: var(--fs-display-sm);
        text-align: center;
        margin-bottom: var(--sp-xl);
      }
      .table-card {
        padding: 0;
        overflow-x: auto;
      }
      table.compare {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--fs-body);
        min-width: 520px;
      }
      table.compare caption {
        text-align: left;
        padding: var(--sp-md) var(--sp-md-plus) 0;
        color: var(--text-subtle);
        font-size: var(--fs-md);
      }
      table.compare th,
      table.compare td {
        text-align: left;
        padding: var(--sp-md) var(--sp-md-plus);
        border-bottom: 1px solid var(--divider);
        vertical-align: top;
      }
      table.compare tr:last-child th,
      table.compare tr:last-child td {
        border-bottom: none;
      }
      table.compare thead th {
        font-family: var(--font-display);
        font-weight: var(--fw-semibold);
        color: var(--brand-ink);
        font-size: var(--fs-lg);
      }
      table.compare .val {
        text-align: center;
        width: 20%;
      }
      table.compare tbody th {
        font-weight: var(--fw-semibold);
        color: var(--text);
      }
      table.compare .popular-col {
        background: var(--primary-tint);
      }
      .compare-note {
        margin-top: var(--sp-md);
      }

      /* --- Preguntas --- */
      .faq details {
        background: var(--white);
        border: 1px solid var(--divider);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        padding: var(--sp-md) var(--sp-lg);
        margin-bottom: var(--sp-md);
      }
      .faq summary {
        font-weight: var(--fw-semibold);
        color: var(--brand-ink);
        cursor: pointer;
        min-height: var(--min-touch);
        display: flex;
        align-items: center;
      }
      .faq details p {
        color: var(--text-muted);
        margin-top: var(--sp-xs);
        padding-bottom: var(--sp-xs);
      }

      @media (min-width: 860px) {
        .plans {
          grid-template-columns: repeat(3, 1fr);
        }
        .plan--popular {
          margin-top: calc(-1 * var(--sp-md)); /* el del medio resalta (center-stage) */
        }
      }

/* Contenedor oculto de los símbolos SVG (antes era style="position:absolute" en línea). */
.icon-defs { position: absolute; width: 0; height: 0; }