/* ================================================
   PRICING.CSS — Planes y precios con toggle mensual/anual
   Proyecto: SmartDaga Landing
   Autor: e-DAGA Systems
================================================ */

/* ── Toggle mensual / anual ── */
.toggle-row    { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 3rem; }
.tgl-lbl       { font-size: .9rem; font-weight: 600; color: #9CA3AF; transition: color .2s; }
.tgl-lbl.on    { color: var(--dark); }
.tgl-sw        { position: relative; width: 52px; height: 28px; flex-shrink: 0; }
.tgl-sw input  { opacity: 0; width: 0; height: 0; position: absolute; }
.tgl-track     { position: absolute; inset: 0; background: #D1D5DB; border-radius: 100px; cursor: pointer; transition: background .3s; }
.tgl-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .3s; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.tgl-sw input:checked ~ .tgl-track              { background: var(--green); }
.tgl-sw input:checked ~ .tgl-track::after       { transform: translateX(24px); }
.badge-save    { background: var(--green); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: .18rem .5rem; border-radius: 100px; vertical-align: middle; margin-left: .35rem; }

/* ── Grilla de planes ── */
.plans         { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: start; }
.plan          { border: 1px solid var(--border); border-radius: 20px; padding: 2rem 1.75rem; background: #fff; transition: box-shadow .2s; }
.plan:hover    { box-shadow: 0 16px 48px rgba(0,0,0,.09); }
.plan.featured { background: var(--navy); color: #fff; border: 2px solid var(--orange); box-shadow: 0 20px 60px rgba(10,36,99,.22); }

/* Cabecera del plan */
.plan-tag                { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: .4rem; }
.plan.featured .plan-tag { color: var(--orange); }
.plan-price-wrap         { display: flex; align-items: baseline; gap: .2rem; margin: .5rem 0 .25rem; }
.plan-cur                { font-size: 1.1rem; font-weight: 700; color: var(--dark); }
.plan.featured .plan-cur { color: #fff; }
.plan-amt                { font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--dark); }
.plan.featured .plan-amt { color: #fff; }
.plan-per                { font-size: .78rem; font-weight: 500; color: #9CA3AF; margin-left: .1rem; }
.plan.featured .plan-per { color: rgba(255,255,255,.5); }
.plan-desc                { font-size: .85rem; color: #6B7280; margin: .6rem 0 1.25rem; }
.plan.featured .plan-desc { color: rgba(255,255,255,.6); }

/* Divisor y features */
hr.plan-hr                { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0; }
.plan.featured hr.plan-hr { border-color: rgba(255,255,255,.12); }
.plan-feats               { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.75rem; }
.plan-feat                { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; }
.plan-feat .c             { color: var(--green); font-weight: 900; flex-shrink: 0; margin-top: .05rem; }
.plan.featured .plan-feat .c { color: #86efac; }
.plan-feat span           { color: var(--text); }
.plan.featured .plan-feat span { color: rgba(255,255,255,.82); }

/* Botones de plan */
.btn-plan     { width: 100%; padding: .85rem; border-radius: 10px; font-size: .9rem; font-weight: 700; text-align: center; cursor: pointer; border: none; text-decoration: none; display: block; transition: all .2s; font-family: var(--font-main); }
.bp-green     { background: var(--green); color: #fff; }
.bp-green:hover  { background: var(--green2); }
.bp-orange    { background: var(--orange); color: #fff; }
.bp-orange:hover { background: #ea580c; }
.bp-ghost     { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); }
.bp-ghost:hover  { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

/* Toggle mensual/anual — control de visibilidad */
[data-annual]              { display: none; }
.annual-on [data-annual]   { display: block; }
.annual-on [data-monthly]  { display: none; }