/* WEB-08 · precios: selector Mensual/Anual, preguntas frecuentes y pie en columnas */

/* ── Selector segmentado ── */
.bill{display:flex;justify-content:center;margin:0 0 28px}
.bill[hidden]{display:none}
.seg{--p:4px;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:var(--p);border-radius:999px;background:var(--track);isolation:isolate}
.seg-thumb{position:absolute;z-index:-1;top:var(--p);bottom:var(--p);left:var(--p);width:calc((100% - 2*var(--p))/2);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.12),0 2px 8px rgba(16,24,40,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.seg[data-state="a"] .seg-thumb{transform:translateX(100%)}
[data-theme="dark"] .seg-thumb{background:#2b2b46;box-shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3)}
.seg-btn{appearance:none;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--text-2);padding:9px 26px;min-width:112px;border-radius:999px;cursor:pointer;transition:color .25s ease;-webkit-tap-highlight-color:transparent}
.seg-btn[aria-pressed="true"]{color:var(--text)}
.seg-btn:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.seg-btn:hover{color:var(--text)}}
@media (max-width:640px){.seg{display:grid;width:100%;max-width:320px}.seg-btn{min-height:44px;padding:9px 12px}}

.price .pn{font-variant-numeric:tabular-nums}
.price small,.plan .terms{transition:opacity .18s ease}
.price small.swap,.plan .terms.swap{opacity:0}
.plan .terms[data-m]{min-height:3.2em}
@media (prefers-reduced-motion:reduce){.seg-thumb,.seg-btn,.price small,.plan .terms{transition:none}}

/* ── Preguntas frecuentes ── */
.faq{max-width:760px;margin:64px auto 0;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-size:17.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg) translateY(-2px);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:focus-visible{outline:2px solid var(--btn);outline-offset:2px;border-radius:6px}
.faq-a{padding:0 40px 24px 0}
.faq-a p{margin:0;color:var(--text-2);font-size:16px;line-height:1.65}
.faq details[open] .faq-a{animation:faqIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.faq summary:hover::after{border-color:var(--text)}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}.faq details[open] .faq-a{animation:none}}
@media (max-width:640px){.faq{margin-top:48px}.faq summary{font-size:16.5px;padding:18px 0;min-height:44px}.faq-a{padding-right:8px}}

/* ── Pie en columnas ── */
footer.ft{padding:64px 0 36px;font-size:14px}
footer.ft .wrap{display:block}
.ft-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px 32px}
.ft-brand p{margin:14px 0 0;max-width:240px;color:var(--text-3);line-height:1.55}
footer.ft nav.ft-col{display:block}
.ft-col h2{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text)}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.ft .ft-col a{display:inline-block;color:var(--text-2);transition:color .2s ease}
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--border)}
.ft-lang{display:inline-flex;padding:3px;border-radius:999px;background:var(--track)}
footer.ft .ft-lang a{padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-3);transition:color .2s ease,background .2s ease}
footer.ft .ft-lang a[aria-current="true"]{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.12)}
[data-theme="dark"] footer.ft .ft-lang a[aria-current="true"]{background:#2b2b46}
footer.ft a:focus-visible{outline:2px solid var(--btn);outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){footer.ft .ft-col a:hover,footer.ft .ft-lang a:hover{color:var(--text)}}
@media (max-width:980px){.ft-top{grid-template-columns:repeat(2,1fr)}.ft-brand{grid-column:1/-1}}
@media (max-width:640px){
  footer.ft{padding:48px 0 32px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  footer.ft .ft-col a,footer.ft .ft-lang a{display:inline-flex;align-items:center;min-height:44px}
  .ft-col ul{gap:0}
  .ft-bottom{margin-top:36px}
}
@media (prefers-reduced-motion:reduce){footer.ft a{transition:none!important}}

/* ── Anual = puesta en marcha gratis ── */
.seg-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.seg-tag{font-size:11px;font-weight:600;line-height:1.2;color:var(--accent-text);letter-spacing:0;white-space:nowrap}
.plan .terms.free{color:var(--accent-text);font-weight:600}
@media (max-width:640px){.seg-btn{padding:8px 8px}}

/* FAQ en dos grupos */
.faq{border-top:0}
.faq-g+.faq-g{margin-top:44px}
.faq-h{margin:0;padding:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.faq-g details:first-of-type{border-top:1px solid var(--border)}
.faq summary{overflow-wrap:anywhere}
.faq-a p{overflow-wrap:anywhere}
@media (max-width:640px){.faq-g+.faq-g{margin-top:36px}}

/* WEB-09 · nota de precios en una línea y nota de plan anual */
#precios .note{max-width:900px}
.plan .terms[data-m]{min-height:4.8em}