/* Missed-call calculator — shared styles for the generic page + every per-vertical
   page (missed-call-calculator*.html, es/calculadora-llamadas-perdidas*.html).
   Loaded AFTER /styles.css, which provides the design tokens (--display, --primary,
   --cyan, --text, --surface, --line, --bg, --muted, --font). CSP-safe: served from
   'self'. Per-vertical pages are emitted by scripts/gen-calculators.mjs — keep the
   markup it generates in sync with the selectors here. */
:root{--maxw:880px}
.lp{padding:2.6rem 0 4rem}.lp .wrap{width:min(var(--maxw),92vw)}
.lp-hero .eyebrow{margin:0 0 .5rem}
.lp-hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(2rem,5.2vw,3rem);line-height:1.08;margin:.2rem 0 .9rem}
.lp-hero .sub{font-size:clamp(1.05rem,2.2vw,1.3rem);color:rgb(var(--text)/.84);max-width:46ch;margin:0 0 1.5rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 .25rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;padding:.8rem 1.3rem;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{color:#04121b;background:linear-gradient(96deg,rgb(var(--primary)),rgb(var(--cyan)),rgb(var(--cyan-2)))}
.btn-primary:hover{text-decoration:none;filter:brightness(1.06)}
.btn-ghost{color:rgb(var(--text));border-color:rgb(var(--line)/.28);background:rgb(var(--surface)/.4)}
.btn-ghost:hover{text-decoration:none;border-color:rgb(var(--cyan)/.6)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
.lead{font-size:1.16rem;line-height:1.7;color:rgb(var(--text)/.9);margin:2rem 0 .5rem;padding-left:1rem;border-left:2px solid rgb(var(--cyan)/.5)}
.lp-section{margin:2.6rem 0}
.lp-section h2{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.7rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .7rem;color:rgb(var(--text))}
.lp-section p{color:rgb(var(--text)/.82);margin:.5rem 0}.lp-section ul{padding-left:1.15rem;margin:.8rem 0}.lp-section li{color:rgb(var(--text)/.82);margin:.35rem 0}
.faq h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin:1.4rem 0 .3rem;color:rgb(var(--text))}.faq p{color:rgb(var(--text)/.8);margin:.2rem 0}
.cta-card{margin:3rem 0 1rem;padding:2rem 1.6rem;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgb(var(--primary)/.14),transparent 60%),rgb(var(--surface)/.5);border:1px solid rgb(var(--line)/.18)}
.cta-card h2{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 .5rem}.cta-card p{color:rgb(var(--text)/.84);margin:0 0 1.1rem}
.disclaimer{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgb(var(--line)/.1);font-size:.82rem;line-height:1.6;color:rgb(var(--muted))}.disclaimer p{margin:.4rem 0}
/* calculator */
.calc{margin:1.5rem 0 .5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:1.25rem}
@media (max-width:720px){
.calc{grid-template-columns:1fr}
.calc .result{position:sticky;bottom:0;z-index:5;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .7rem;text-align:left;margin:.3rem -4vw 0;border-radius:16px 16px 0 0;padding:.62rem 1rem calc(.62rem + env(safe-area-inset-bottom,0px));box-shadow:0 -14px 30px rgb(var(--bg)/.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:radial-gradient(120% 160% at 50% 0%,rgb(var(--primary)/.2),transparent 62%),rgb(var(--surface)/.96)}
.calc .result .cap,.calc .result .per,.calc .result .sub2,.calc .result .yr{display:none}
.calc .result .big{font-size:clamp(1.7rem,9vw,2.3rem)}
.calc .result .permo{display:inline;font-size:.95rem;font-weight:600;color:rgb(var(--text)/.6);margin-left:.08rem}
.calc .result-cta{margin:0;align-self:center;padding:.6rem .9rem;font-size:.86rem;white-space:nowrap}
.calc .result-cta .btn-num{display:none}
}
.calc-panel{padding:1.4rem 1.3rem;border-radius:16px;border:1px solid rgb(var(--line)/.16);background:rgb(var(--surface)/.42)}
.field{margin:0 0 1.15rem}.field:last-child{margin-bottom:0}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;color:rgb(var(--text));margin:0 0 .15rem}
.field .hint{display:block;font-size:.78rem;color:rgb(var(--muted));margin:0 0 .5rem}
.field .row{display:flex;align-items:center;gap:.9rem}
.field input[type=range]{flex:1;height:44px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;outline-offset:6px;margin:0}
.field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgb(var(--line)/.22)}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:24px;width:24px;margin-top:-9px;border-radius:999px;cursor:pointer;background:linear-gradient(96deg,rgb(var(--primary)),rgb(var(--cyan)));border:2px solid rgb(var(--bg))}
.field input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:rgb(var(--line)/.22)}
.field input[type=range]::-moz-range-thumb{height:22px;width:22px;border-radius:999px;cursor:pointer;background:linear-gradient(96deg,rgb(var(--primary)),rgb(var(--cyan)));border:2px solid rgb(var(--bg))}
.field input[type=range]:focus{outline:none}
.field input[type=range]:focus-visible{outline:2px solid rgb(var(--cyan)/.75);outline-offset:6px;border-radius:999px}
.field .val{min-width:5.5ch;text-align:right;font-family:var(--display);font-weight:700;font-size:1.05rem;color:rgb(var(--cyan))}
.field .num{width:100%;font-family:var(--font);font-size:1.05rem;padding:.6rem .8rem;border-radius:10px;border:1px solid rgb(var(--line)/.24);background:rgb(var(--bg)/.5);color:rgb(var(--text))}
.field .num:focus{outline:2px solid rgb(var(--cyan)/.6);border-color:transparent}
.result{display:flex;flex-direction:column;justify-content:center;gap:.35rem;text-align:center;padding:1.6rem 1.3rem;border-radius:16px;border:1px solid rgb(var(--cyan)/.28);background:radial-gradient(120% 140% at 50% 0%,rgb(var(--primary)/.16),transparent 62%),rgb(var(--surface)/.55)}
.result .cap{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:rgb(var(--muted))}
.result .big{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(2.4rem,8vw,3.4rem);line-height:1;color:rgb(var(--text))}
.result .per{font-size:.95rem;color:rgb(var(--text)/.7)}
.result .sub2{font-size:.92rem;color:rgb(var(--text)/.8);margin:.5rem 0 0}
.result .sub2 b{color:rgb(var(--cyan))}
.result .yr{font-size:.9rem;color:rgb(var(--muted));margin-top:.2rem}
.leadform{margin:1.4rem 0 .25rem;padding:1.4rem 1.3rem;border-radius:16px;border:1px solid rgb(var(--line)/.16);background:rgb(var(--surface)/.4)}
.leadform h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:0 0 .25rem;color:rgb(var(--text))}
.leadform p.note{font-size:.88rem;color:rgb(var(--muted));margin:0 0 .9rem}
.leadform .grid{display:flex;flex-wrap:wrap;gap:.7rem}
.leadform input{flex:1 1 200px;font-family:var(--font);font-size:1rem;padding:.7rem .85rem;border-radius:10px;border:1px solid rgb(var(--line)/.24);background:rgb(var(--bg)/.5);color:rgb(var(--text))}
.leadform input:focus{outline:2px solid rgb(var(--cyan)/.6);border-color:transparent}
.leadform .status{font-size:.9rem;margin:.8rem 0 0;min-height:1.2em}
.leadform .status.ok{color:rgb(var(--cyan))}
.leadform .status.err{color:#ff9b8a}
.leadform .actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.9rem}
.result-num{display:inline-flex;align-items:baseline;justify-content:center;gap:.06rem}
.result .permo{display:none}
.result-cta{margin-top:1.05rem;align-self:center}
.field .moneywrap{position:relative;width:100%}
.field .moneywrap .moneysign{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:rgb(var(--muted));font-size:1.05rem;pointer-events:none}
.field .moneywrap .num{padding-left:1.7rem}
/* per-vertical "pick your industry" strip */
.verticals{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0 .25rem}
.verticals a{display:inline-flex;align-items:center;font-size:.86rem;font-weight:600;color:rgb(var(--text)/.86);padding:.42rem .85rem;border-radius:999px;border:1px solid rgb(var(--line)/.22);background:rgb(var(--surface)/.4);text-decoration:none}
.verticals a:hover{text-decoration:none;border-color:rgb(var(--cyan)/.6);color:rgb(var(--text))}
.verticals a[aria-current=page]{border-color:rgb(var(--cyan)/.7);color:rgb(var(--cyan));background:rgb(var(--primary)/.12)}