/* WF Subscriptions — Tabla de precios ([wfns_pricing]) */

.wfns-pricing{
    --wfns-pr-radius: 14px;
    font-family: var(--wfns-pr-font, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
    color: var(--wfns-pr-text, #0f172a);
    box-sizing: border-box;
}
.wfns-pricing *, .wfns-pricing *::before, .wfns-pricing *::after{ box-sizing: border-box; }

/* ── Interruptor mensual / anual ─────────────────────────────────────── */
.wfns-pricing-toggle{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:26px; }
.wfns-pricing-toggle-label{ font-size:14px; font-weight:600; color:var(--wfns-pr-muted,#64748b); transition:color .15s; cursor:pointer; user-select:none; }
.wfns-pricing:not(.wfns-pricing--annual) .wfns-pricing-toggle-label[data-period="monthly"],
.wfns-pricing--annual .wfns-pricing-toggle-label[data-period="annual"]{ color:var(--wfns-pr-text,#0f172a); }
.wfns-pricing-switch{ position:relative; width:44px; height:24px; border-radius:99px; background:var(--wfns-pr-border,#e5e7eb); border:none; cursor:pointer; padding:0; flex-shrink:0; transition:background .2s; }
.wfns-pricing-switch:focus-visible{ outline:2px solid var(--wfns-pr-accent,#2563eb); outline-offset:2px; }
.wfns-pricing-switch-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.wfns-pricing--annual .wfns-pricing-switch{ background:var(--wfns-pr-accent,#2563eb); }
.wfns-pricing--annual .wfns-pricing-switch-knob{ transform:translateX(20px); }

/* ── Visibilidad ligada al periodo activo ────────────────────────────── */
/* Por defecto todo es visible; solo se ocultan los bloques marcados con
   el periodo que NO está activo. Los marcados "always" (planes sin
   variante anual) nunca se ocultan, sea cual sea el estado del toggle. */
.wfns-pricing:not(.wfns-pricing--annual) [data-period="annual"]{ display:none !important; }
.wfns-pricing--annual [data-period="monthly"]{ display:none !important; }

/* ── Rejilla / lista ──────────────────────────────────────────────────── */
.wfns-pricing-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(max(230px,calc((100% - (var(--wfns-pr-cols,3) - 1)*16px)/var(--wfns-pr-cols,3))),1fr)); }
@media(max-width:560px){ .wfns-pricing-grid{ grid-template-columns:1fr !important; } }
.wfns-pricing-list{ display:flex; flex-direction:column; gap:12px; }

.wfns-pricing-card{
    position:relative; border:1.5px solid var(--wfns-pr-border,#e5e7eb); border-radius:var(--wfns-pr-radius);
    padding:22px 20px 24px; background:var(--wfns-pr-bg,#fff); display:flex; flex-direction:column;
}
.wfns-pricing-row{
    display:grid; grid-template-columns:1fr auto auto; gap:22px; align-items:center;
    border:1.5px solid var(--wfns-pr-border,#e5e7eb); border-radius:var(--wfns-pr-radius); background:var(--wfns-pr-bg,#fff);
    padding:18px 20px;
}
@media(max-width:700px){
    .wfns-pricing-row{ grid-template-columns:1fr; row-gap:14px; }
    .wfns-pricing-row .wfns-plan-row-price{ text-align:left; }
}

/* ── Elementos reutilizados del selector de planes (mismo lenguaje visual) ── */
.wfns-plan-top{ display:flex; align-items:flex-start; margin-bottom:12px; min-height:20px; }
.wfns-badge{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#b45309; background:#fffbeb; border:1px solid #fde68a; padding:3px 9px 3px 7px; border-radius:20px; white-space:nowrap; }
.wfns-badge svg{ width:11px; height:11px; flex-shrink:0; }
.wfns-plan-name{ font-size:17px; font-weight:800; margin-bottom:10px; color:var(--wfns-pr-text,#0f172a); }
.wfns-plan-price-row{ display:flex; align-items:baseline; gap:5px; }
.wfns-plan-price{ font-size:26px; font-weight:800; color:var(--wfns-pr-text,#0f172a); font-variant-numeric:tabular-nums; }
.wfns-plan-price-period{ font-size:13px; font-weight:500; color:var(--wfns-pr-muted,#64748b); }
.wfns-plan-renewal{ font-size:11.5px; color:var(--wfns-pr-muted,#64748b); margin-top:3px; }
.wfns-plan-renewal b{ color:var(--wfns-pr-text,#0f172a); font-weight:600; font-variant-numeric:tabular-nums; }
.wfns-plan-divider{ height:1px; background:var(--wfns-pr-border,#eef2f7); margin:16px 0; }
.wfns-plan-desc{ font-size:13px; color:var(--wfns-pr-muted,#64748b); line-height:1.5; margin:0 0 12px; }
.wfns-plan-feats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.wfns-plan-feats li{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--wfns-pr-text,#0f172a); font-weight:500; }
.wfns-feat-check{ flex-shrink:0; width:16px; height:16px; border-radius:50%; background:color-mix(in srgb, var(--wfns-pr-accent,#2563eb) 12%, transparent); color:var(--wfns-pr-accent,#2563eb); display:flex; align-items:center; justify-content:center; }
.wfns-feat-check svg{ width:9px; height:9px; flex-shrink:0; }

.wfns-plan-row-main{ min-width:0; }
.wfns-plan-row-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:4px; }
.wfns-plan-row-name{ font-size:16px; font-weight:800; color:var(--wfns-pr-text,#0f172a); }
.wfns-plan-row-desc{ font-size:12.5px; color:var(--wfns-pr-muted,#64748b); margin:0 0 8px; line-height:1.45; }
.wfns-plan-row-feats{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 16px; }
.wfns-plan-row-feats li{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--wfns-pr-text,#0f172a); font-weight:500; white-space:nowrap; }
.wfns-plan-row-price{ text-align:right; flex-shrink:0; }
.wfns-plan-row-price .wfns-plan-price{ font-size:20px; }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.wfns-pricing-cta-wrap{ margin-top:20px; }
.wfns-pricing-row .wfns-pricing-cta-wrap{ margin-top:0; }
.wfns-pricing-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
    padding:11px 20px; border-radius:calc(var(--wfns-pr-radius) * 0.6); background:var(--wfns-pr-accent,#2563eb);
    color:#fff; font-size:14px; font-weight:700; text-decoration:none; text-align:center;
    border:none; cursor:pointer; transition:filter .15s, transform .1s;
}
.wfns-pricing-row .wfns-pricing-cta{ width:auto; padding:10px 18px; }
.wfns-pricing-cta:hover{ filter:brightness(1.08); color:#fff; }
.wfns-pricing-cta:active{ transform:scale(.98); }

.wfns-pricing-notice{ padding:12px 16px; background:#fef2f2; border:1px solid #fca5a5; border-radius:8px; color:#991b1b; font-size:13px; }

/* ── Modal para CTAs tipo "modal" ─────────────────────────────────────── */
.wfns-pricing-modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:100000; display:flex; align-items:center; justify-content:center; padding:24px; }
.wfns-pricing-modal-box{ position:relative; width:100%; max-width:720px; height:min(80vh,760px); background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.wfns-pricing-modal-close{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(15,23,42,.06); color:#0f172a; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1; }
.wfns-pricing-modal-close:hover{ background:rgba(15,23,42,.12); }
.wfns-pricing-modal-iframe{ width:100%; height:100%; border:none; display:block; }