/* Kala — estilos base (portados de kala-agenda/landing/kala-landing.html) */
:root{
  --brand:#153252; --brand-2:#21456b;
  --accent:#3f9ed8; --accent-deep:#2b7fb8;
  --ok:#2f9e6f; --ok-text:#1f7a55; --due:#c65b5b; --wa:#25d366;
  --ind:#3f7fd8; --par:#1f9e94; --gru:#7b5cc4;
  --bg:#eef3f9; --surface:#ffffff; --surface-2:#f6f9fc;
  --ink:#15304e; --ink-soft:#3f5b78; --muted:#657d97;
  --border:#d8e2ee; --hair:#e7eef6;
  --shadow:0 1px 2px rgba(21,48,78,.05), 0 12px 30px -12px rgba(21,48,78,.18);
  --shadow-soft:0 1px 2px rgba(21,48,78,.04), 0 6px 18px -10px rgba(21,48,78,.14);
  --glow:radial-gradient(55% 60% at 50% 38%, rgba(63,158,216,.28), transparent 70%);
  --radius:16px; --maxw:1140px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--accent:#57b0e6; --accent-deep:#8fccf1; --ok:#4cc08a; --ok-text:#6fd3a4; --due:#e07a7a; --bg:#0c1826; --surface:#132539; --surface-2:#0f1e30;
    --ink:#e9f1fa; --ink-soft:#b8c9dc; --muted:#8ba0b7; --border:#26405c; --hair:#1d334c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.55);
    --shadow-soft:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.5);
    --glow:radial-gradient(55% 60% at 50% 38%, rgba(87,176,230,.26), transparent 70%);}
}
:root[data-theme="light"]{--accent:#3f9ed8; --accent-deep:#2b7fb8; --ok:#2f9e6f; --ok-text:#1f7a55; --due:#c65b5b; --bg:#eef3f9; --surface:#ffffff; --surface-2:#f6f9fc;
  --ink:#15304e; --ink-soft:#3f5b78; --muted:#657d97; --border:#d8e2ee; --hair:#e7eef6;
  --shadow:0 1px 2px rgba(21,48,78,.05), 0 12px 30px -12px rgba(21,48,78,.18);
  --shadow-soft:0 1px 2px rgba(21,48,78,.04), 0 6px 18px -10px rgba(21,48,78,.14);
  --glow:radial-gradient(55% 60% at 50% 38%, rgba(63,158,216,.28), transparent 70%);}
:root[data-theme="dark"]{--accent:#57b0e6; --accent-deep:#8fccf1; --ok:#4cc08a; --ok-text:#6fd3a4; --due:#e07a7a; --bg:#0c1826; --surface:#132539; --surface-2:#0f1e30;
  --ink:#e9f1fa; --ink-soft:#b8c9dc; --muted:#8ba0b7; --border:#26405c; --hair:#1d334c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.55);
  --shadow-soft:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.5);
  --glow:radial-gradient(55% 60% at 50% 38%, rgba(87,176,230,.26), transparent 70%);}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#precio{scroll-margin-top:84px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.18; text-wrap:balance; letter-spacing:-.01em; margin:0}
p{margin:0}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep)}

.logo{display:block; width:auto; height:34px; border-radius:6px}
.plate{background:#fff; padding:9px 13px; border-radius:11px; box-shadow:var(--shadow-soft); display:inline-flex}
.plate.big .logo{height:52px}

header{position:sticky; top:0; z-index:30; backdrop-filter:saturate(1.4) blur(10px); background:var(--bg); background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--hair)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px}
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:15px; padding:12px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff; box-shadow:var(--shadow-soft)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(21,48,78,.4)}
@media (prefers-color-scheme:dark){.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep)); color:#08131f}}
:root[data-theme="dark"] .btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep)); color:#08131f}
:root[data-theme="light"] .btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff}
.btn-ghost{border-color:var(--border); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-lg{font-size:16.5px; padding:15px 28px; text-wrap:balance}

.hero{position:relative; text-align:center; padding-top:76px; padding-bottom:62px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:var(--glow); pointer-events:none}
.hero>*{position:relative}
.hero h1{font-size:clamp(40px,6.2vw,74px); line-height:1.03; color:var(--ink); margin-top:18px}
.rot{display:inline-block; color:var(--accent-deep)}
.br-m{display:none}
.rot .w{display:inline-block; will-change:transform,opacity}
.rot .w.out{opacity:0; transform:translateY(-.5em); transition:opacity .32s ease, transform .32s ease}
.rot .w.in{animation:wordIn .42s cubic-bezier(.2,.9,.3,1.2)}
@keyframes wordIn{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
.hero .lede{margin:24px auto 0; font-size:20px; color:var(--ink-soft); max-width:33em}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:34px}
.microtrust{margin-top:22px; font-size:14.5px; color:var(--muted); display:inline-flex; align-items:center; gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}

section.band{padding-top:56px; padding-bottom:56px}
.band-head{max-width:40em; margin-bottom:34px}
.band-head.center{margin-left:auto;margin-right:auto;text-align:center}
.band-head h2{font-size:clamp(27px,3.1vw,38px); color:var(--ink)}
.band-head p{margin-top:14px; color:var(--ink-soft); font-size:18px}

/* demo dúo */
.duo{display:grid; grid-template-columns:minmax(318px,372px) 1fr; gap:44px; align-items:center}
.stage-phone{display:flex; flex-direction:column; align-items:center; gap:14px}
.device{position:relative; width:352px; max-width:90vw; border-radius:48px; padding:14px;
  background:linear-gradient(160deg,#20303f,#0d1620); box-shadow:0 2px 6px rgba(0,0,0,.3), 0 40px 74px -32px rgba(21,48,78,.5), 0 0 0 1.5px rgba(255,255,255,.05) inset}
.device::after{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:118px; height:23px; border-radius:0 0 17px 17px; background:#0d1620; z-index:3}
.screen{position:relative; border-radius:36px; overflow:hidden; background:var(--surface); height:552px; display:flex; flex-direction:column}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
.demo-cap{font-size:13.5px; color:var(--muted); font-weight:600; min-height:18px; text-align:center}
.demo-cap b{color:var(--accent-deep); font-weight:700}

/* calendario estilo app */
.calpanel{background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow)}
.cal-bar{display:flex; align-items:center; gap:9px; padding:16px 20px; border-bottom:1px solid var(--hair)}
.cal-bar .t{font-family:var(--serif); font-weight:700; color:var(--ink); font-size:16.5px}
.cal-bar .pill{margin-left:auto; font-size:12px; font-weight:650; color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 13%, var(--surface)); padding:5px 11px; border-radius:999px}
.calgrid{display:grid; grid-template-columns:52px repeat(3,1fr)}
.hc{padding:12px 4px 10px; text-align:center; background:var(--surface-2)}
.hc.day{border-left:1px solid var(--hair)}
.hc .dn{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hc .dd{font-size:16px;font-weight:700;color:var(--ink); font-family:var(--serif); margin-top:1px}
.tl{font-size:11.5px;color:var(--muted);text-align:right;padding:6px 8px 0 0;border-top:1px solid var(--hair); min-height:58px; font-variant-numeric:tabular-nums}
.dc{position:relative; border-top:1px solid var(--hair); border-left:1px solid var(--hair); min-height:58px; padding:3px}
.ev{position:absolute; inset:3px; border-radius:9px; padding:6px 9px 6px 11px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; color:#fff; box-shadow:0 2px 5px rgba(21,48,78,.22); animation:evpop .42s cubic-bezier(.2,.9,.3,1.35)}
.ev::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3.5px; background:rgba(0,0,0,.22)}
.ev .en{font-size:12.5px;font-weight:700;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .et{font-size:10.5px;opacity:.9;font-variant-numeric:tabular-nums;margin-top:1px}
.ev.ind{background:var(--ind)} .ev.par{background:var(--par)} .ev.gru{background:var(--gru)}
.ev.leaving{opacity:0; transform:scale(.85); transition:opacity .24s ease, transform .24s ease; animation:none}
.ev.moved{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%, transparent), 0 2px 5px rgba(21,48,78,.22)}
@keyframes evpop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* pain */
.pain{background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:44px 40px; box-shadow:var(--shadow-soft)}
.pain h2{margin-top:12px; font-size:clamp(25px,2.9vw,34px); color:var(--ink); max-width:16em}
.pain-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin:28px 0 26px}
.pain-item{display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-size:16.5px}
.pain-item .x{flex:none; width:24px;height:24px;border-radius:7px; display:grid;place-items:center; margin-top:1px; color:#c65b5b; background:color-mix(in srgb,#c65b5b 13%, var(--surface)); font-size:13px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-soft); transition:transform .2s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px; background:color-mix(in srgb,var(--accent) 15%, var(--surface)); color:var(--accent-deep)}
.card h3{font-size:20px;color:var(--ink);margin-bottom:9px}
.card p{color:var(--ink-soft); font-size:15.5px}

.strip{position:relative; overflow:hidden; background:linear-gradient(155deg,var(--brand),#0f2138); color:#eaf3fb; border-radius:24px; padding:46px 40px; box-shadow:var(--shadow)}
.strip::before{content:""; position:absolute; inset:auto -10% -40% 40%; height:80%; background:radial-gradient(50% 60% at 50% 50%, rgba(87,176,230,.25), transparent 70%)}
.strip>*{position:relative}
.strip .eyebrow{color:var(--accent)}
.strip h2{margin-top:10px; color:#fff; font-size:clamp(24px,2.6vw,32px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
.step .k{font-family:var(--serif);font-size:15px;color:var(--accent);font-weight:700}
.step b{display:block;margin:8px 0 5px;font-size:17.5px;color:#fff}
.step p{color:#b9cfe4;font-size:15px}

.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.trow{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-soft)}
.trow .ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--brand),var(--accent-deep))}
.trow b{color:var(--ink);font-size:16.5px}
.trow p{color:var(--muted);font-size:14.5px;margin-top:4px}

.close{position:relative; text-align:center; padding-top:82px; padding-bottom:40px; overflow:hidden}
.close::before{content:""; position:absolute; inset:0 0 auto 0; height:100%; background:var(--glow); pointer-events:none}
.close>*{position:relative}
.close h2{margin-top:26px; font-size:clamp(32px,4vw,50px);color:var(--ink);line-height:1.1}
.close h2 em{font-style:normal;color:var(--accent-deep)}
.close .kicker{margin-top:16px; font-size:18px; color:var(--ink-soft)}
.close .cta-row{display:flex; justify-content:center; margin-top:28px}
.contact{margin-top:22px;font-size:15px;color:var(--muted)}
.contact a{color:var(--accent-deep); font-weight:650; text-decoration:none; border-bottom:1.5px solid color-mix(in srgb,var(--accent) 40%, transparent)}

footer{border-top:1px solid var(--hair); padding:30px 0 46px; color:var(--muted); font-size:13.5px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

.wa-float{position:fixed; right:22px; bottom:22px; z-index:50; display:inline-flex; align-items:center; gap:11px; background:var(--wa); color:#fff; text-decoration:none; padding:13px 20px 13px 15px; border-radius:999px; font-weight:700; font-size:15.5px; box-shadow:0 8px 24px -6px rgba(37,211,102,.6), 0 2px 6px rgba(0,0,0,.2)}
.wa-float .lbl{white-space:nowrap}
.wa-float::before{content:""; position:absolute; inset:0; border-radius:999px; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-float{transition:opacity .25s ease, transform .25s ease}
@media (max-width:560px){.wa-float .lbl{display:none} .wa-float{padding:15px; right:16px; bottom:16px} .wa-float{transition:opacity .25s ease, transform .25s ease, visibility 0s 0s} .wa-float.near-cta{opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .25s, transform .25s, visibility 0s .25s}}
.wa-float:focus-visible{outline:3px solid #fff; outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wa-float,.wa-float::before{transition:none; animation:none}}

.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none} .bubble,.ev,.wa-float::before{animation:none} .rot .w.in{animation:none} .thread{transition:none}}

@media (max-width:900px){
  .duo{grid-template-columns:1fr; gap:36px; justify-items:center}
  .calpanel{width:100%; max-width:480px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:22px}
  .trust{grid-template-columns:1fr}
  .pain-list{grid-template-columns:1fr}
  .nav .btn-ghost{display:none}
}

/* eventos ya cargados: sin animación de entrada (.ev.busy, definida después, sí anima) */
.ev.still{animation:none}

/* ===== Landing Kala · lanzamiento octubre 2026 ===== */
.launch{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.02em; color:#fff; background:linear-gradient(90deg,#1f7a55,#17706f); padding:7px 15px; border-radius:999px; box-shadow:var(--shadow-soft); text-wrap:balance}
.hero .eyebrow{margin-top:20px}
.eyebrow.warn{color:var(--due)}
.hero h1{margin-top:12px}

/* demo: pastillas y panel */
.pills{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 auto 26px}
.pills button{font:inherit; font-size:14.5px; font-weight:650; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); padding:8px 16px; border-radius:999px; cursor:pointer}
.pills button[aria-pressed="true"]{color:#fff; background:var(--brand); border-color:var(--brand)}
@media (prefers-color-scheme:dark){.pills button[aria-pressed="true"]{background:var(--accent); color:#08131f; border-color:var(--accent)}}
:root[data-theme="dark"] .pills button[aria-pressed="true"]{background:var(--accent); color:#08131f; border-color:var(--accent)}
.pills button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.demo-cap{max-width:340px}
.pn-body{min-height:330px}
.pn .calgrid{grid-template-columns:44px repeat(5,1fr)}
.pn .dc,.pn .tl{min-height:54px}
.pn .hc.today .dd{color:var(--accent-deep)}
.ev.gcal{background:repeating-linear-gradient(135deg,#9aa9b8 0 6px,#8c9bab 6px 12px)}
.pn .ev .et{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pn .ev.moved{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 65%, transparent), 0 2px 5px rgba(21,48,78,.22)}
.ev.busy{animation:shake .5s ease 2; box-shadow:0 0 0 2px color-mix(in srgb,var(--due) 60%,transparent)}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.fi-head{display:flex; gap:14px; align-items:center; padding:22px 22px 8px}
.fi-ava{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:21px; color:#fff; background:linear-gradient(135deg,var(--ind),var(--brand))}
.fi-name{display:block; font-size:18px; color:var(--ink)}
.fi-rate{font-size:13.5px; color:var(--muted)}
.fi-card{margin:12px 22px 22px; background:var(--surface-2); border:1px solid var(--hair); border-radius:14px; padding:14px 16px 0; overflow:hidden}
.fi-prev{margin:0 0 6px; font-size:13.5px; color:var(--muted); font-style:italic}
.fi-rows,.dy-list{list-style:none; margin:0; padding:0 22px 20px}
.fi-rows{padding:0}
.fi-rows li{display:grid; grid-template-columns:3.4em 1fr; gap:8px; padding:8px 0; border-top:1px solid var(--hair); font-size:14.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.fi-d{color:var(--muted); font-weight:650}
.fi-rows li.pay .fi-t{color:var(--ok-text); font-weight:600}
.fi-total{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 -16px; padding:13px 16px 14px; border-top:1px solid var(--hair); background:color-mix(in srgb,var(--due) 8%,var(--surface)); transition:box-shadow .3s, background .3s}
.fi-total span{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fi-total b{display:inline-block; font-family:var(--serif); font-size:clamp(22px,2.6vw,28px); line-height:1; color:var(--due); font-variant-numeric:tabular-nums; transition:transform .2s; transform-origin:right center}
.fi-total b.bump{transform:scale(1.08)}
.fi-total.al-dia{background:color-mix(in srgb,var(--ok) 10%,var(--surface))} .fi-total.al-dia b{color:var(--ok-text); font-size:20px}
.fi-total.focus{background:color-mix(in srgb,var(--due) 16%,var(--surface)); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--due) 55%,transparent)}
li.new{animation:pop .4s cubic-bezier(.2,.9,.3,1.2); color:var(--ink)}
.dy-t{padding:22px 22px 10px; font-family:var(--serif); font-size:17px; color:var(--ink)}
.dy-list li{display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; padding:11px 0; border-top:1px solid var(--hair); font-size:14.5px}
.dy-h{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:650}
.dy-p{color:var(--ink); font-weight:600}
.dy-s{font-size:12.5px; font-weight:650; color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); padding:3px 9px; border-radius:999px; white-space:nowrap}
li.mark.ok .dy-s{color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,var(--surface))}
li.mark.bad .dy-s{color:var(--due); background:color-mix(in srgb,var(--due) 14%,var(--surface))}
.pdf-thumb{margin:18px 22px 22px; max-height:380px; opacity:0; transform:translateY(16px) scale(.97); transition:opacity .5s ease, transform .5s ease}
.pdf-thumb.in{opacity:1; transform:none}
.fac-fit{margin:16px 22px 8px; background:#fff; opacity:.45; filter:grayscale(1); transition:opacity .45s, filter .45s}
.fac-fit[data-s]{opacity:.7}
.fac-fit[data-s="borrador"],.fac-fit[data-s="emitiendo"],.fac-fit[data-s="emitida"],.fac-fit[data-s="siempre"],.fac-fit[data-s^="nc-"]{opacity:1; filter:none}
.fac-fit .ar-pie{opacity:0; transition:opacity .5s}
.fac-fit[data-s="emitida"] .ar-pie,.fac-fit[data-s="siempre"] .ar-pie,.fac-fit[data-s="nc-emitida"] .ar-pie{opacity:1}
.nm-rows{list-style:none; margin:0; padding:14px 22px 4px}
.nm-rows li{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--hair); opacity:.35; transition:opacity .45s, background .45s}
.nm-rows li:first-child{border-top:0}
.nm-rows li.on{opacity:1}
.nm-rows li.on:nth-child(2){transition-delay:.12s} .nm-rows li.on:nth-child(3){transition-delay:.24s} .nm-rows li.on:nth-child(4){transition-delay:.36s} .nm-rows li.on:nth-child(5){transition-delay:.48s} .nm-rows li.on:nth-child(7){transition-delay:.12s}
.nm-ic{font-size:18px; line-height:1}
.nm-k{display:block; font-size:14.5px; color:var(--ink)}
.nm-tx small{font-size:12.5px; color:var(--muted)}
.nm-v{font-family:var(--serif); font-size:17px; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.nm-rows li[data-g="crece"] .nm-v{font-family:inherit; font-size:13.5px; white-space:nowrap}
.nm-note{margin:0 22px 18px; font-size:13.5px; color:var(--muted); font-style:italic}
.fc-note{margin:0 22px 16px; font-size:13.5px; color:var(--muted); font-style:italic; opacity:0; transition:opacity .5s}
.fac-fit[data-s="siempre"] + .fc-note{opacity:1}
/* Hoja de "Comprobantes en línea" de ARCA (la misma que arma core/factura_paciente_pdf.py de Kala): negro y gris sobre blanco. */
.ar{background:#fff; color:#000; font:12px/1.3 Helvetica,Arial,sans-serif; padding:12px 14px 8px}
.ar b{font-weight:700}
.ar-orig,.ar-head,.ar-row,.ar-rec,.ar-tot{border:1px solid #000}
.ar-orig{text-align:center; font-weight:700; font-size:14px; padding:4px; border-bottom:0}
.ar-head{position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:146px}
.ar-em,.ar-cb{display:flex; flex-direction:column; gap:2px; padding:10px 12px 8px}
.ar-em{padding-right:34px}
.ar-cb{border-left:1px solid #000; margin-top:42px; padding-top:0; padding-left:30px}
.ar-name{font-size:18px; margin-bottom:1px}
.ar-prof{color:#5a5a5a; margin-bottom:5px}
.ar-letra{position:absolute; left:50%; top:-1px; transform:translateX(-50%); width:54px; height:46px; background:#fff; border:1px solid #000; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.ar-letra b{font-size:28px}
.ar-letra span{font-size:9px; font-weight:700; margin-top:2px}
.ar-tit{position:absolute; top:10px; left:calc(50% + 30px); font-size:20px}
.ar-nro{font-weight:700; margin-bottom:3px; white-space:nowrap}
.ar-row,.ar-row2{display:flex; justify-content:space-between; gap:12px}
.ar-row{padding:6px 12px; border-top:0}
.ar-rec{margin-top:4px; padding:6px 12px; display:flex; flex-direction:column; gap:4px}
.ar-tab{width:100%; margin-top:8px; border-collapse:collapse}
.ar-tab th{background:#e6e6e6; border:1px solid #000; padding:4px 6px; font-size:11px; text-align:right}
.ar-tab th:first-child,.ar-tab td:first-child{text-align:left}
.ar-tab th:nth-child(3),.ar-tab td:nth-child(3){text-align:center}
.ar-tab td{padding:6px; text-align:right; vertical-align:top; height:40px}
.ar-tab td small{display:block; color:#5a5a5a; font-size:10.5px}
.ar-tot{display:flex; flex-direction:column; align-items:flex-end; gap:4px; padding:8px 12px; margin-top:6px}
.ar-tot span{font-weight:700}
.ar-total{font-size:14px}
.ar-pie{display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:start; margin-top:8px}
.ar-qr svg{display:block; width:72px; height:72px; fill:#000}
.ar-aut{font-size:13px; padding-top:10px}
.ar-cae{display:flex; flex-direction:column; gap:4px; padding-top:8px; font-weight:700}
.ar-pag{text-align:center; font-size:11px; margin-top:2px}
.ar-kala{text-align:center; font-size:10px; color:#5a5a5a; margin-top:4px}

/* dolor: antes y después */
.contrast{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px}
.ct{border-radius:16px; padding:22px 22px 20px; border:1px solid var(--border)}
.ct-k{display:inline-block; margin-bottom:10px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.ct-old{background:var(--surface-2)} .ct-old .ct-k{color:var(--due)}
.ct-old ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--muted); font-size:16px}
.ct-old li{text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--due) 55%,transparent)}
.ct-new{background:color-mix(in srgb,var(--ok) 9%,var(--surface)); border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.ct-new .ct-k{color:var(--ok-text)}
.ct-new>p:first-of-type{font-family:var(--serif); font-size:20px; line-height:1.35; color:var(--ink)}
.ct-voice{display:inline-block; margin-top:14px; padding:8px 13px; border-radius:14px 14px 4px 14px; background:#effdde; color:#1d2b1a; font-size:15px; box-shadow:0 1px 1px rgba(0,0,0,.12)}
.ct-ok{margin-top:12px; font-size:14px; font-weight:650; color:var(--ok-text)}

.cards.four{grid-template-columns:repeat(4,1fr)}

/* informes */
.rep{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center}
.rep>*{min-width:0}
.rep h2{margin-top:12px; font-size:clamp(27px,3.1vw,38px)}
.rep-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.rep-list li{position:relative; padding-left:28px; color:var(--ink-soft)}
.rep-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--ok-text); font-weight:800}
.rep-list b{color:var(--ink)}
.rep-note{margin-top:18px; font-size:14.5px; color:var(--muted)}
.pdf-stack{position:relative; padding:26px 0 0 26px}
.pdf-stack .back{position:absolute; top:0; left:0; width:80%; max-height:94%; transform:rotate(-3.5deg); opacity:.9}
.pdf-stack .front{position:relative; width:88%; margin-left:auto}

/* qué hace / qué no */
.scope{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.sc{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 26px 22px; box-shadow:var(--shadow-soft)}
.sc h3{display:flex; align-items:center; gap:10px; font-size:20px; color:var(--ink)}
.sc-ic{width:30px; height:30px; border-radius:9px; display:inline-grid; place-items:center; font-family:var(--sans); font-size:15px; font-weight:800; color:#fff}
.sc-yes .sc-ic{background:var(--ok)} .sc-no .sc-ic{background:var(--due)}
.sc ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px}
.sc li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:15.5px}
.sc li::before{content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px; border-radius:50%}
.sc-yes li::before{background:var(--ok)} .sc-no li::before{background:var(--due)}
.scope-legal{margin-top:18px; text-align:center; font-size:14px; color:var(--muted)}
.scope-legal a{color:var(--accent-deep)}

/* precio */
.pricing{max-width:1120px; margin:0 auto; text-align:center}
.pricing h2{margin-top:16px; font-size:clamp(28px,3.4vw,40px)}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:30px; align-items:stretch}
.price{position:relative; display:flex; flex-direction:column; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:26px; padding:34px 30px 30px; box-shadow:var(--shadow)}
.price.best{border:2px solid color-mix(in srgb,var(--ok) 55%,var(--border)); background:color-mix(in srgb,var(--ok) 5%,var(--surface))}
.plan-k{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.plan-tag{position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:linear-gradient(90deg,#1f7a55,#17706f); padding:5px 13px; border-radius:999px}
.price-row{display:flex; justify-content:center; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:14px}
.price-row s{color:var(--muted); font-size:20px}
.price-row strong{font-family:var(--serif); font-size:clamp(42px,5vw,56px); line-height:1; color:var(--ink)}
.price-row span{color:var(--muted); font-size:17px}
.price-note{margin-top:10px; color:var(--ink-soft); font-weight:650}
.best .price-note{color:var(--ok-text)}
.plan-sub{align-self:stretch; margin-top:20px; background:color-mix(in srgb,var(--ok) 10%,var(--surface)); border:1px dashed color-mix(in srgb,var(--ok) 50%,var(--border)); border-radius:14px; padding:16px; font-size:16px; font-weight:650; color:var(--ok-text)}
.price-list{list-style:none; margin:28px auto 0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; color:var(--ink-soft)}
.price-list li::before{content:"✓  "; color:var(--ok-text); font-weight:800}
.price-fine{margin-top:12px; font-size:14px; color:var(--muted)}
.refer{margin-top:20px; text-align:left; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--border)); border-radius:14px; padding:14px 16px; font-size:15px; color:var(--ink-soft)}
.refer b{color:var(--ink)}
.price .btn{margin-top:auto}
.price .refer,.price .plan-sub{margin-bottom:24px}

/* IA San Juan: firma del header y quién está detrás */
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.by{font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap}
.by b{color:var(--ink-soft); font-weight:700}
.by:hover b{color:var(--accent-deep)}
.team{display:grid; grid-template-columns:180px 1fr; gap:40px; align-items:center; max-width:880px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:36px 40px; box-shadow:var(--shadow-soft)}
.team-photo{width:180px; height:180px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,var(--surface))}
.team h2{margin-top:10px; font-size:clamp(25px,2.8vw,34px); color:var(--ink)}
.team-bio{margin-top:14px; color:var(--ink-soft)}
.team-sign{margin-top:14px; font-size:15px; color:var(--muted)}
.team-sign b{color:var(--ink)}
.team .btn{margin-top:18px}
.foot-iasj{color:var(--ink-soft); font-weight:650}

/* dudas y footer */
.doubts{max-width:34em; margin:46px auto 0; padding:28px 26px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border)); border-radius:20px; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); color:var(--ink-soft); font-size:15.5px; box-shadow:var(--shadow-soft)}
.doubts-t{font-family:var(--serif); font-size:clamp(21px,2.4vw,26px); line-height:1.25; color:var(--ink); margin-bottom:8px}
.doubts-t b{color:var(--accent-deep)}
.doubts .btn{margin-top:18px}
.doubts-alt{display:block; margin-top:14px; font-size:14.5px; color:var(--muted)}
.doubts-alt:hover{color:var(--accent-deep)}
.legal{display:flex; gap:18px; flex-wrap:wrap}
.legal a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--hair)}
.legal a:hover{color:var(--accent-deep)}

@media (max-width:1000px){ .cards.four{grid-template-columns:1fr 1fr} .rep{grid-template-columns:minmax(0,1fr); gap:36px} }
@media (max-width:900px){ .contrast,.scope,.plans{grid-template-columns:1fr} .plans{max-width:520px; margin-left:auto; margin-right:auto; gap:30px} .team{grid-template-columns:1fr; justify-items:center; text-align:center; padding:30px 22px} .team-photo{width:140px; height:140px} }
@media (max-width:420px){ .by{display:none} }
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding-top:44px; padding-bottom:40px} .hero .lede{font-size:18px} .br-m{display:inline}
  .btn-lg{width:100%; justify-content:center; text-align:center}
  .cards.four{grid-template-columns:1fr}
  .pain{padding:30px 20px} .strip{padding:34px 22px} .price{padding:30px 18px 24px} .price .btn-lg{padding-left:14px; padding-right:14px; font-size:16px} .price-list{display:grid; justify-content:center; text-align:left; font-size:15px}
  .pn .calgrid{grid-template-columns:36px repeat(5,1fr)} .pn .dc,.pn .tl{min-height:46px}
  .pn .ev{padding:4px 4px 4px 7px} .pn .ev .en{font-size:11px} .pn .ev .et{font-size:9.5px}
  .fi-head,.dy-t,.dy-list{padding-left:14px; padding-right:14px}
  .fi-card{margin:10px 14px 14px; padding:12px 12px 0} .fi-total{margin:0 -12px; padding:12px} .fi-rows li{font-size:13.5px; gap:6px}
  .pdf-thumb{margin:14px}
  .fac-fit{margin:14px 14px 10px} .fc-note{margin:0 14px 14px} .nm-rows{padding:10px 14px 2px} .nm-note{margin:0 14px 14px}
  .pdf-stack{padding:18px 0 0 14px} .pdf-stack .back{left:10px}
  .nav .btn{padding:10px 14px; font-size:14px}
  footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){ li.new,.fi-total,.fi-total b,.pdf-thumb,.ev.busy,.fac-fit,.ar-pie,.fc-note,.nm-rows li{animation:none; transition:none} }
@media (max-width:560px){ .microtrust{display:block; max-width:22em; margin-left:auto; margin-right:auto} .microtrust .dot{display:inline-block; vertical-align:2px; margin-right:6px} }

/* tercera opción: prueba gratis (acento azul en lugar del verde del anual) */
.price.trial .price-note{color:var(--accent-deep)}
.price.trial .plan-sub{background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); color:var(--ink-soft); font-weight:600}
@media (min-width:901px) and (max-width:1100px){ .price{padding:30px 20px 26px} .price-row strong{font-size:40px} }

/* formulario /kala/baja */
.pedido{max-width:640px; margin:0 auto; padding-top:48px; padding-bottom:64px}
.pedido h1{font-size:clamp(30px,4vw,42px); color:var(--ink); margin-top:10px}
.pedido .intro{margin-top:14px; color:var(--ink-soft)}
.pedido-card{margin-top:28px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:28px; box-shadow:var(--shadow-soft)}
.pedido-tipos{display:grid; gap:12px; border:0; padding:0; margin:0}
.pedido-tipos legend{font-weight:700; margin-bottom:10px}
.tipo{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); cursor:pointer}
.tipo:has(input:checked){border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.tipo input{margin-top:5px; accent-color:var(--accent-deep)}
.tipo b{color:var(--ink)}
.tipo small{grid-column:2; color:var(--ink-soft); font-size:14.5px; line-height:1.5}
.campo{margin-top:20px}
.campo label{display:block; font-weight:700; font-size:15px}
.campo .ayuda{display:block; margin-top:2px; color:var(--muted); font-size:14px; font-weight:400}
.campo input,.campo textarea{display:block; width:100%; margin-top:8px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px 14px}
.campo textarea{min-height:96px; resize:vertical}
.campo input:focus,.campo textarea:focus{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); border-color:var(--accent)}
.campo [aria-invalid="true"]{border-color:var(--due)}
.campo .error{display:block; margin-top:6px; color:var(--due); font-size:14px; font-weight:600}
.campo .error:empty{display:none}
.trampa{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.pedido-acciones{margin-top:24px}
.pedido-acciones .btn[disabled]{opacity:.6; cursor:progress}
.pedido-nota{margin-top:14px; color:var(--muted); font-size:14px}
.pedido-estado{margin-top:20px; padding:16px 18px; border-radius:14px; font-weight:600}
.pedido-estado:empty{display:none}
.pedido-estado.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--ok) 45%,var(--border)); color:var(--ok-text)}
.pedido-estado.mal{background:color-mix(in srgb,var(--due) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--due) 45%,var(--border)); color:var(--ink)}
.pedido-estado a{color:inherit}
.pedido-alt{margin-top:22px; padding:20px 22px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); color:var(--ink-soft); font-size:15.5px}
.pedido-alt b{color:var(--ink)}
.pedido-alt .btn{margin-top:12px}
@media (max-width:560px){ .pedido-card{padding:22px 16px} .pedido-acciones .btn{width:100%; justify-content:center} }

/* planes Free / Basic / Plus */
.plan-feats{list-style:none; align-self:stretch; margin:20px 0 24px; padding:0; text-align:left; display:grid; gap:9px; font-size:15.5px; color:var(--ink-soft)}
.plan-feats li{padding-left:24px; position:relative}
.plan-feats li::before{content:"✓"; position:absolute; left:2px; color:var(--ok-text); font-weight:800}
.plan-feats li.no{color:var(--muted)}
.plan-feats li.no::before{content:"✕"; color:var(--muted)}
.plan-sub b{color:var(--ink)}
.plan-alt{margin-top:14px; font-size:15px; font-weight:650; color:var(--accent-deep); text-decoration:none; border-bottom:1px solid transparent}
.plan-alt:hover{border-bottom-color:currentColor}
.trial-band{display:flex; align-items:center; justify-content:space-between; gap:22px 30px; margin-top:30px; padding:26px 30px; text-align:left; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border)); border-radius:22px; box-shadow:var(--shadow-soft)}
.trial-band .plan-k{color:var(--accent-deep)}
.trial-band p{margin-top:8px; color:var(--ink-soft); max-width:40em}
.trial-band b{color:var(--ink)}
.trial-band .btn{flex-shrink:0}
.plan-table-wrap{margin-top:34px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.plan-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; font-size:15px; text-align:center}
.plan-table caption{caption-side:top; padding:0 0 12px; font-size:14px; color:var(--muted); text-align:center}
.plan-table th,.plan-table td{padding:13px 14px; border-top:1px solid var(--border)}
.plan-table thead th{border-top:0; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.plan-table tbody th{text-align:left; font-weight:600; color:var(--ink-soft); width:40%}
.plan-table td{color:var(--ink); font-weight:650}
.plan-table td small{display:block; font-weight:500; font-size:13px; color:var(--muted)}
.plan-table td.y{color:var(--ok-text)}
.plan-table td.n{color:var(--muted)}
.plan-notes{list-style:none; max-width:46em; margin:22px auto 0; padding:0; display:grid; gap:8px; font-size:14.5px; color:var(--muted); text-align:left}
.plan-notes b{color:var(--ink-soft)}
@media (max-width:700px){ .trial-band{flex-direction:column; align-items:stretch; padding:24px 20px} }
@media (max-width:560px){ .plan-table{font-size:13.5px} .plan-table th,.plan-table td{padding:11px 6px} .plan-table tbody th{padding-left:12px} .plan-table thead th{font-size:11.5px; letter-spacing:.04em} .plan-table td small{font-size:11.5px} }
.trial-band p.trial-note{margin-top:10px; font-size:14.5px; color:var(--muted)}

/* destacado: facturación con ARCA, a todo el ancho debajo de las cuatro tarjetas */
.card-feature{grid-column:1/-1; display:flex; gap:20px; align-items:flex-start; border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.card-feature .ic{flex:none; margin-bottom:0}
.card-feature p{max-width:52em}
.feature-tag{display:inline-block; margin-bottom:8px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.feature-qs{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,max-content); gap:6px 22px; font-size:14.5px; font-weight:600; color:var(--ink)}
@media (max-width:760px){ .feature-qs{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .feature-qs{grid-template-columns:1fr; gap:5px} }
@media (max-width:560px){ .card-feature{flex-direction:column; gap:14px} }

/* Reescritura "mi cliente" (nov 2026): lema del hero, pie de la demo, Telegram, cierre del dolor, bloques, planes y preguntas. */
.motto{margin-top:14px; font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-style:italic; color:var(--accent-deep)}
.demo-foot{margin-top:22px; text-align:center; font-size:16.5px; font-weight:600; color:var(--ink-soft)}
.tgwhy{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:34px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:40px; box-shadow:var(--shadow-soft)}
.tgwhy h2{margin-top:10px; font-size:clamp(25px,2.9vw,34px); color:var(--ink)}
.tgwhy-copy p{color:var(--ink-soft); font-size:16.5px; margin:0 0 12px}
.tgwhy-copy .btn{margin-top:6px}
.tgwhy-copy .tgwhy-note{margin-top:14px; font-size:13.5px; font-style:italic; color:var(--muted)}
.pain-close{margin-top:4px; font-family:var(--serif); font-size:clamp(19px,2vw,23px); color:var(--ink)}
.pain-close b{color:var(--accent-deep); font-weight:600}
.cards.blocks{grid-template-columns:minmax(0,1fr)}
.card-plain{border-color:var(--border); background:var(--surface)}
.plan-sum{margin-top:6px; font-family:var(--serif); font-size:18px; color:var(--ink)}
.faq{max-width:46em; margin:0 auto; display:grid; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-soft)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; padding:17px 20px; font-weight:650; font-size:16.5px; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font-size:20px; line-height:1; color:var(--accent-deep); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0; padding:0 20px 18px; color:var(--ink-soft); font-size:15.5px}
.close .kicker em{font-style:normal; color:var(--accent-deep)}
.close-sub{margin-top:8px; font-size:16.5px; color:var(--ink-soft)}
@media (max-width:760px){ .tgwhy{grid-template-columns:1fr; gap:18px; padding:28px 22px} }
@media (prefers-reduced-motion:reduce){ .faq summary::after{transition:none} }

/* Tus cuentas con imágenes: tarjetas + "¿quién me debe?" a la izquierda, cierres en PDF a la derecha. Factura con su hoja. */
.ctl{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:start}
.ctl-cards{grid-template-columns:1fr 1fr; gap:16px}
.ctl-cards .card{padding:22px 20px}
.tg-mini{margin-top:16px; display:flex; flex-direction:column; gap:6px; padding:16px 14px; border-radius:18px; color:#111; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:linear-gradient(165deg,#d8dc8f 0%,#9cc38a 38%,#7fb38a 62%,#b9d197 100%)}
.tg-mini .tg-b{animation:none}
.card-media{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,300px); gap:20px; align-items:start}
.card-media>*{min-width:0; max-width:100%}
.card .fac-hoja{margin:0; width:100%}
@media (max-width:1000px){ .ctl{grid-template-columns:minmax(0,1fr); gap:30px} .card-media{grid-template-columns:auto minmax(0,1fr)} .card-media .fac-hoja{grid-column:1/-1; max-width:420px} }
@media (max-width:560px){ .ctl-cards{grid-template-columns:1fr} .card-media{display:flex} }