:root{--calc-15111c:#15111c;--calc-1b1721:#1b1721;--calc-0b0910:#0b0910;--calc-251c38:#251c38;--calc-2e2445:#2e2445;--calc-43375f:#43375f;--calc-fb8b2c:#fb8b2c;--calc-ffb35c:#ffb35c;--calc-d9561a:#d9561a;--calc-ffd36e:#ffd36e;--calc-b4ec5a:#b4ec5a;--calc-5d8f24:#5d8f24;--calc-f1e7da:#f1e7da;--calc-c4b8aa:#c4b8aa;--calc-958a7e:#958a7e;--calc-f1e7da1f:#f1e7da1f;--calc-f1e7da33:#f1e7da33;--calc-ff9b85:#ff9b85;--calc-1c0d03:#1c0d03;--calc-3a3050:#3a3050;--calc-ff9f4d:#ff9f4d;--calc-a8400d40:#a8400d40;--calc-8a300a66:#8a300a66;--calc-ffd3a055:#ffd3a055;--calc-fb8b2ccc:#fb8b2ccc;--calc-6f8a2c:#6f8a2c;--calc-56701f:#56701f;--calc-2a1205:#2a1205;--calc-f1e7da0d:#f1e7da0d;--calc-241005:#241005;--calc-ffffff40:#ffffff40;--calc-000000b3:#000000b3;--calc-000000cc:#000000cc;--calc-1b1528:#1b1528;--calc-000:#000;--calc-261d38:#261d38;--calc-000000a6:#000000a6;--calc-c9ff7a40:#c9ff7a40;--calc-b4ec5a17:#b4ec5a17;--calc-d8ff9a:#d8ff9a;--calc-b4ec5a33:#b4ec5a33;--calc-2f284566:#2f284566;--calc-2a243d80:#2a243d80;--calc-ffd36e1f:#ffd36e1f;--calc-1d1626:#1d1626;--calc-000000e6:#000000e6;--calc-3b3048:#3b3048;--calc-2a1a3d:#2a1a3d;--calc-352a47:#352a47;--calc-5b4e6b:#5b4e6b;--calc-1d16260f:#1d16260f;--calc-f1e7da55:#f1e7da55;--calc-fb8b2c2e:#fb8b2c2e;--calc-fb8b2c12:#fb8b2c12;--calc-b4ec5a1f:#b4ec5a1f;--calc-f1e7da1a:#f1e7da1a;--calc-f1e7da2e:#f1e7da2e;--calc-15111c66:#15111c66;--calc-f1e7da66:#f1e7da66;--calc-15111ca6:#15111ca6;--calc-b4ec5a2a:#b4ec5a2a;--calc-f1e7da1c:#f1e7da1c;--calc-f1e7dab3:#f1e7dab3;--calc-fb8b2c33:#fb8b2c33;--calc-1f0c02:#1f0c02;}

:root{
  --night:var(--calc-15111c); --night-2:var(--calc-1b1721); --soil:var(--calc-0b0910);
  --witch:var(--calc-251c38); --witch-2:var(--calc-2e2445); --witch-line:var(--calc-43375f);
  --pumpkin:var(--calc-fb8b2c); --pumpkin-hi:var(--calc-ffb35c); --ember:var(--calc-d9561a); --candle:var(--calc-ffd36e);
  --brew:var(--calc-b4ec5a); --brew-deep:var(--calc-5d8f24);
  --bone:var(--calc-f1e7da); --bone-2:var(--calc-c4b8aa); --bone-3:var(--calc-958a7e);
  --line:var(--calc-f1e7da1f); --line-2:var(--calc-f1e7da33);
  --danger:var(--calc-ff9b85);
  --sans:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:"Grenze Gotisch","Segoe UI",serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --r-ctl:8px; --r-panel:18px;
  --header-h:72px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navigation-offset,var(--header-h)) + 68px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--bone);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--pumpkin);color:var(--calc-1c0d03)}
:focus-visible{outline:2px solid var(--pumpkin);outline-offset:3px;border-radius:6px}
a{color:inherit}
img,svg{display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.i{width:1em;height:1em;flex:none}
html{scrollbar-color:var(--calc-3a3050) var(--night)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--night)}::-webkit-scrollbar-thumb{background:var(--calc-3a3050);border-radius:10px;border:2px solid var(--night)}

/* ---------- Encabezado (igual al de la web) ---------- */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--night) 90%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:var(--bone)}
.brand-mark{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--calc-ff9f4d);
  background:linear-gradient(90deg,transparent 21%,var(--calc-a8400d40) 23%,transparent 27%,transparent 73%,var(--calc-a8400d40) 77%,transparent 79%),radial-gradient(130% 100% at 50% 18%,var(--pumpkin-hi) 0%,var(--pumpkin) 46%,var(--ember) 100%);
  box-shadow:inset 0 -4px 7px var(--calc-8a300a66),inset 0 2px 2px var(--calc-ffd3a055),0 6px 18px -8px var(--calc-fb8b2ccc)}
.brand-mark::after{content:"";position:absolute;left:50%;top:-5px;width:5px;height:8px;border-radius:3px 3px 1px 1px;background:var(--calc-6f8a2c);transform:translateX(-50%) rotate(14deg);transform-origin:bottom center;box-shadow:3px 2px 0 -1px var(--calc-56701f)}
.hw-logo{width:25px;height:25px;overflow:visible}
.hw-logo .lens{fill:var(--candle);animation:candle 3.6s steps(1,end) infinite}
.hw-logo .lens+.lens{animation-delay:-1.7s}
.hw-logo .frame{fill:none;stroke:var(--calc-2a1205);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@keyframes candle{0%,100%{opacity:1}12%{opacity:.78}14%{opacity:1}47%{opacity:.86}49%{opacity:1}71%{opacity:.7}73%{opacity:.95}}
.brand-name{display:grid;gap:4px;font:600 17px/1 var(--sans);letter-spacing:-.02em}
.brand-name small{font:700 9.5px/1 var(--sans);letter-spacing:.2em;color:var(--bone-3)}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 12px;border-radius:7px;text-decoration:none;font-size:14px;color:var(--bone-2);transition:color .2s ease,background-color .2s ease}
.nav-links a:hover{color:var(--bone);background:var(--calc-f1e7da0d)}
.nav-links a[aria-current="page"]{color:var(--pumpkin)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-login{padding:8px 10px;font-size:14px;text-decoration:none;color:var(--bone-2)}
.nav-login:hover{color:var(--bone)}

/* ---------- Botones ---------- */
.btn{--bg:var(--pumpkin);--fg:var(--calc-241005);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border-radius:var(--r-ctl);border:1px solid var(--bg);background:var(--bg);color:var(--fg);font:600 14px/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .16s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s ease;box-shadow:inset 0 1px var(--calc-ffffff40),0 8px 18px -12px var(--calc-000000b3)}
.btn .i{font-size:17px;transition:transform .22s var(--ease-out)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--pumpkin-hi);box-shadow:inset 0 1px var(--calc-ffffff40),0 12px 24px -12px var(--calc-000000cc)}.btn:hover .i-go{transform:translateX(3px)}.btn:hover .i-down{transform:translateY(2px)}}
.btn-sm{min-height:40px;padding:8px 14px;font-size:13.5px}
.btn-dark{--bg:var(--calc-1b1528);--fg:var(--bone);box-shadow:0 10px 24px -14px var(--calc-000)}
@media (hover:hover) and (pointer:fine){.btn-dark:hover{background:var(--calc-261d38)}}

/* ---------- Héroe ---------- */
.hero{position:relative;overflow:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px;padding-top:48px;padding-bottom:28px}
.hero h1{font:700 clamp(44px,5.3vw,66px)/1 var(--display);letter-spacing:-.01em;margin:0 0 22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--pumpkin)}
.hero-copy p{font-size:18px;line-height:1.55;color:var(--bone-2);max-width:46ch;margin:0 0 30px}
/* Escenario de las brujas: capas con profundidad */
.stage-wrap{justify-self:end;width:min(100%,560px);display:grid;gap:10px}
.stage{position:relative;aspect-ratio:1314/1239;width:100%;-webkit-tap-highlight-color:transparent}
.stage img.art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ground{position:absolute;left:4%;right:4%;bottom:-3%;height:16%;border-radius:50%;background:radial-gradient(closest-side,var(--calc-000000a6),transparent);pointer-events:none}
.light{position:absolute;left:18%;right:18%;top:36%;bottom:18%;border-radius:50%;background:radial-gradient(closest-side,var(--calc-c9ff7a40),var(--calc-b4ec5a17) 55%,transparent);mix-blend-mode:screen;pointer-events:none;opacity:.8}
.stage.hot .light{opacity:1}
.vapor{position:absolute;left:34%;width:32%;top:52%;height:24%;pointer-events:none}
.vapor span,.burst{position:absolute;bottom:0;width:var(--s,9px);height:var(--s,9px);border-radius:50%;border:1.5px solid var(--calc-d8ff9a);background:var(--calc-b4ec5a33);opacity:0;left:var(--x)}
.vapor span{animation:rise var(--d,2.8s) var(--delay,0s) cubic-bezier(.3,.6,.4,1) infinite}
@keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}15%{opacity:.9}100%{transform:translateY(-130px) scale(1.15);opacity:0}}
.mist{position:absolute;left:-6%;right:-6%;bottom:-3%;height:26%;pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(ellipse 50% 100% at 50% 100%,var(--calc-000) 55%,transparent 100%);mask:radial-gradient(ellipse 50% 100% at 50% 100%,var(--calc-000) 55%,transparent 100%)}
.mist::before{content:"";position:absolute;inset:0 -30%;background:radial-gradient(30% 45% at 25% 75%,var(--calc-2f284566),transparent 70%),radial-gradient(28% 40% at 55% 85%,var(--calc-2a243d80),transparent 70%),radial-gradient(30% 45% at 82% 75%,var(--calc-2f284566),transparent 70%)}
.mist::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,var(--night) 88%)}
.witch-hit{position:absolute;border:0;padding:0;color:transparent;font-size:0;background:transparent;cursor:pointer;border-radius:40% 40% 12% 12%;z-index:4}
.witch-hit::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(closest-side,var(--calc-ffd36e1f),transparent);opacity:0;transition:opacity .25s ease}
@media (hover:hover) and (pointer:fine){.witch-hit:hover::after{opacity:1}}
.witch-hit:focus-visible{outline:2px dashed var(--pumpkin);outline-offset:4px}
.hit-izq{left:6%;top:7%;width:27%;height:90%}
.hit-cen{left:35%;top:2%;width:32%;height:60%}
.hit-der{left:68%;top:9%;width:30%;height:89%}

/* Globo de diálogo de cada bruja */
.bubble{position:absolute;z-index:6;width:min(270px,62%);padding:16px 16px 14px;border-radius:16px;background:var(--bone);color:var(--calc-1d1626);box-shadow:0 18px 40px -18px var(--calc-000000e6);
  transform-origin:var(--bo,0 100%);opacity:0;transform:scale(.96) translateY(4px);transition:opacity .18s ease,transform .22s var(--ease-out);pointer-events:none}
.bubble.on{opacity:1;transform:none;pointer-events:auto}
.bubble[data-w="izq"]{left:16%;top:12%;--bo:0% 100%}
.bubble[data-w="cen"]{left:28%;top:-2%;--bo:50% 100%}
.bubble[data-w="der"]{right:14%;top:14%;--bo:100% 100%}

.bubble .say{margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--calc-3b3048)}
.bubble .who{margin:0 0 4px;font:700 22px/1 var(--display);color:var(--calc-2a1a3d)}
.bubble .go{display:flex;flex-wrap:wrap;gap:6px}
.bubble .go a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;border-radius:999px;background:var(--calc-1d1626);color:var(--bone);font:600 13px/1 var(--sans);text-decoration:none;transition:transform .14s var(--ease-out),background-color .18s ease}
.bubble .go a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.bubble .go a:hover{background:var(--calc-352a47)}}
.bubble .x{position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--calc-5b4e6b);display:grid;place-items:center;cursor:pointer;font-size:16px}
.bubble .x:hover{background:var(--calc-1d16260f)}
.stage-hint{margin:0;text-align:center;font-size:13.5px;color:var(--bone-3);display:flex;gap:8px;justify-content:center;align-items:center}
.stage-hint .i{font-size:16px;color:var(--bone-2)}

@media (prefers-reduced-motion:no-preference){
  .light{animation:flicker 3.2s ease-in-out infinite alternate}
  .mist::before{animation:drift 26s linear infinite alternate}
  .stage-wrap{animation:conjure 1s .1s var(--ease-out) both}
}
@keyframes flicker{0%{opacity:.62}40%{opacity:.85}60%{opacity:.7}100%{opacity:.95}}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

/* Entrada del héroe: una sola coreografía */
@media (prefers-reduced-motion:no-preference){
  .hero-copy h1,.hero-copy p,.hero-copy .btn{animation:up .7s var(--ease-out) both}
  .hero-copy p{animation-delay:.08s}.hero-copy .btn{animation-delay:.16s}
}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes conjure{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Brujas que se asoman en cada resultado */
.brew-wrap{position:relative;isolation:isolate}
.brew-wrap .brew{z-index:1}
.peek{position:absolute;z-index:0;right:26px;bottom:calc(100% - 44px);width:104px;height:auto;pointer-events:none;transform:translateY(80%);transition:transform .45s var(--ease-out)}
.peek.up{transform:translateY(-8%)}


/* ---------- Índice fijo ---------- */
.index{position:sticky;top:var(--navigation-offset,var(--header-h));z-index:20;background:color-mix(in srgb,var(--night) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.index .wrap{display:flex;gap:8px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.index .wrap::-webkit-scrollbar{display:none}
.index a{display:inline-flex;align-items:center;gap:8px;flex:none;scroll-snap-align:start;padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);color:var(--bone-2);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .16s var(--ease-out)}
.index a .i{font-size:16px;color:var(--bone-3);transition:color .2s ease}
.index a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.index a:hover{color:var(--bone);border-color:var(--calc-f1e7da55)}}
.index a[aria-current="true"]{color:var(--calc-241005);background:var(--pumpkin);border-color:var(--pumpkin)}
.index a[aria-current="true"] .i{color:var(--calc-241005)}

/* ---------- Calculadoras ---------- */
main{padding-bottom:40px}
.calc{padding:72px 0 8px}
.calc+.calc{border-top:1px solid var(--line);margin-top:56px}
.calc-head{max-width:62ch;margin-bottom:28px}
.calc h2{font:700 clamp(34px,4vw,48px)/1 var(--display);margin:0 0 12px;letter-spacing:-.005em}
.calc-head p{margin:0;color:var(--bone-2)}
.guide{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:14px;font-weight:600;color:var(--pumpkin);text-decoration:none}
.guide:hover{text-decoration:underline;text-underline-offset:4px}
.calc-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start}

/* Campos */
form.ing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
.field{display:grid;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.seg-label{font-size:13.5px;font-weight:600;color:var(--bone)}
.field label small{font-weight:400;color:var(--bone-3)}
.ctl{display:flex;align-items:stretch;height:48px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--night-2);transition:border-color .18s ease,box-shadow .18s ease}
.ctl:focus-within{border-color:var(--pumpkin);box-shadow:0 0 0 3px var(--calc-fb8b2c2e)}
.ctl input{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--bone);font:600 17px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center;padding:0 4px;caret-color:var(--pumpkin);outline:none}
.ctl input::placeholder{color:var(--bone-3);font-weight:400}
.unit{display:grid;place-items:center;padding-right:10px;font-size:13px;color:var(--bone-3)}
.step,.sign{flex:none;width:42px;border:0;background:transparent;color:var(--bone-2);display:grid;place-items:center;cursor:pointer;font-size:16px;transition:color .15s ease,background-color .15s ease,transform .12s var(--ease-out)}
.step:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl);border-right:1px solid var(--line)}
.ctl>.step:last-child,.ctl>.sign{border-left:1px solid var(--line)}
.ctl>:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.step:active,.sign:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.step:hover,.sign:hover{color:var(--pumpkin);background:var(--calc-fb8b2c12)}}
.hint{margin:0;font-size:12.5px;color:var(--bone-3)}
.err{margin:0;font-size:12.5px;color:var(--danger);display:flex;gap:6px;align-items:center}
.field.bad .ctl{border-color:var(--danger)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--night-2)}
.seg button{border:0;background:transparent;color:var(--bone-2);font:600 13px/1 var(--sans);padding:9px 16px;border-radius:999px;cursor:pointer;transition:color .18s ease,background-color .18s ease}
.seg button[aria-checked="true"]{background:var(--bone);color:var(--night)}
.seg-row{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.form-foot{grid-column:1/-1;display:flex;gap:16px;align-items:center}
.link-btn{border:0;background:none;padding:6px 0;color:var(--bone-3);font:500 13.5px/1 var(--sans);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.link-btn:hover{color:var(--bone)}

/* Resultado: el caldero */
.brew{position:relative;overflow:hidden;border-radius:var(--r-panel);border:1px solid var(--witch-line);background:radial-gradient(120% 70% at 50% 120%,var(--calc-b4ec5a1f),transparent 60%),linear-gradient(180deg,var(--witch-2),var(--witch));padding:26px 26px 22px}
.brew::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--brew) 30%,var(--brew) 70%,transparent);opacity:.7}
.res-label{margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--bone-2)}
.res-main{margin:0;font:600 clamp(28px,3.4vw,40px)/1.15 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--bone)}
.res-main .ax{color:var(--bone-3);font-weight:500}
.res-sub{margin:8px 0 0;color:var(--bone-2);font-size:14.5px}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--calc-f1e7da1a)}
.res-grid div{min-width:0}
.res-grid dt{font-size:12.5px;color:var(--bone-3);margin-bottom:3px}
.res-grid dd{margin:0;font:600 17px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.res-grid dd small{font-weight:400;color:var(--bone-2);font-size:13px}
.notes{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.notes li{display:flex;gap:9px;font-size:13.5px;color:var(--bone-2);line-height:1.45}
.notes li .i{margin-top:2px;font-size:16px;color:var(--candle)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border-radius:var(--r-ctl);border:1px solid var(--calc-f1e7da2e);background:var(--calc-15111c66);color:var(--bone);font:600 13.5px/1 var(--sans);text-decoration:none;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .14s var(--ease-out)}
.chip .i{font-size:16px}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--calc-f1e7da66);background:var(--calc-15111ca6)}}
details.spell{margin-top:18px;border-top:1px solid var(--calc-f1e7da1a);padding-top:14px}
details.spell summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--brew)}
details.spell summary::-webkit-details-marker{display:none}
details.spell summary .i{transition:transform .2s var(--ease-out)}
details.spell[open] summary .i{transform:rotate(180deg)}
details.spell ol{margin:12px 0 0;padding-left:20px;display:grid;gap:7px;font-size:13.5px;color:var(--bone-2);font-variant-numeric:tabular-nums}
.empty{display:grid;gap:8px;justify-items:start;padding:12px 0}
.empty .i{font-size:28px;color:var(--bone-3)}
.empty p{margin:0;color:var(--bone-2)}
.bub{position:absolute;bottom:4px;width:var(--s);height:var(--s);border-radius:50%;border:1.5px solid var(--calc-d8ff9a);background:var(--calc-b4ec5a2a);pointer-events:none}

/* Perfiles de espesor */
.lenses{display:grid;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--calc-f1e7da1a)}
.lens-row{display:grid;grid-template-columns:96px minmax(0,1fr) 92px;gap:14px;align-items:center}
.lens-row .nm{font-size:13px;color:var(--bone-2);line-height:1.25}
.lens-row .nm b{display:block;font-size:17px;color:var(--bone);font-variant-numeric:tabular-nums}
.lens-row svg{width:100%;height:auto;overflow:visible}
.lens-row .mm{text-align:right;font:600 17px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.lens-row .mm small{display:block;font-size:12.5px;font-weight:500;color:var(--brew)}
.lens-row .mm small.base{color:var(--bone-3)}
.lens-row path.glass{fill:var(--calc-f1e7da1c);stroke:var(--calc-f1e7dab3);stroke-width:1.2;vector-effect:non-scaling-stroke}
.lens-row.best path.glass{fill:var(--calc-fb8b2c33);stroke:var(--pumpkin)}

/* ---------- Banda final ---------- */
.cta{margin-top:96px;background:radial-gradient(90% 140% at 85% 0%,var(--pumpkin-hi),var(--pumpkin) 45%,var(--ember));color:var(--calc-241005)}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) auto;align-items:center;gap:32px;padding-top:56px;padding-bottom:56px}
.cta h2{font:700 clamp(34px,4.2vw,52px)/1 var(--display);margin:0 0 12px}
.cta p{margin:0;max-width:52ch;color:var(--calc-1f0c02);font-size:17px}
.cta small{display:block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--calc-1f0c02)}
footer{background:var(--soil);color:var(--bone-3);font-size:13.5px}
footer .wrap{display:grid;gap:18px;padding-top:36px;padding-bottom:40px}
footer p{margin:0;max-width:80ch;line-height:1.6}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
footer nav a{text-decoration:none;color:var(--bone-2)}
footer nav a:hover{color:var(--bone)}

.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,16px);opacity:0;pointer-events:none;display:flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;background:var(--bone);color:var(--night);font:600 14px/1 var(--sans);box-shadow:0 14px 30px -12px var(--calc-000);transition:transform .25s var(--ease-out),opacity .2s ease}
.toast.on{transform:translate(-50%,0);opacity:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .calc-body{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--header-h:64px}
  .wrap{padding:0 16px}
  .hero .wrap{grid-template-columns:1fr;gap:8px;padding-top:28px}
  .stage-wrap{justify-self:center;width:min(100%,440px);order:-1}
  .bubble{width:min(250px,70%)}
  .hero h1{margin-bottom:14px}
  .hero-copy p{font-size:16.5px;margin-bottom:22px}
  .calc{padding-top:48px}
  .calc+.calc{margin-top:36px}
  .brew{padding:22px 18px 18px}
  .cta .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:44px}
  .lens-row{grid-template-columns:72px minmax(0,1fr) 78px;gap:10px}
}
@media (max-width:420px){
  form.ing{grid-template-columns:1fr}
  .brand-name small{display:none}
  .nav-login{display:none}
  .res-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vapor{display:none}
  .hw-logo .lens{animation:none}
  *{transition-duration:.01ms!important}
}

html[data-tema="app"]{--calc-15111c:#f4f7fa;--calc-1b1721:#ffffff;--calc-0b0910:#edf3f8;--calc-251c38:#ffffff;--calc-2e2445:#ffffff;--calc-43375f:#d6e1e9;--calc-fb8b2c:#205b90;--calc-ffb35c:#286ba6;--calc-d9561a:#12304b;--calc-ffd36e:#205b90;--calc-b4ec5a:#205b90;--calc-5d8f24:#1d4f7c;--calc-f1e7da:#16334a;--calc-c4b8aa:#46647a;--calc-958a7e:#587084;--calc-f1e7da1f:#16334a1f;--calc-f1e7da33:#16334a33;--calc-ff9b85:#b44837;--calc-1c0d03:#ffffff;--calc-3a3050:#b6cede;--calc-fb8b2ccc:#205b90cc;--calc-f1e7da0d:#16334a0d;--calc-241005:#ffffff;--calc-1b1528:#1d4f7c;--calc-261d38:#12304b;--calc-b4ec5a17:#205b9017;--calc-b4ec5a33:#205b9033;--calc-ffd36e1f:#205b901f;--calc-f1e7da55:#16334a55;--calc-fb8b2c2e:#205b902e;--calc-fb8b2c12:#205b9012;--calc-b4ec5a1f:#205b901f;--calc-f1e7da1a:#16334a1a;--calc-f1e7da2e:#16334a2e;--calc-15111c66:#f4f7fa66;--calc-f1e7da66:#16334a66;--calc-15111ca6:#f4f7faa6;--calc-b4ec5a2a:#205b902a;--calc-f1e7da1c:#16334a1c;--calc-f1e7dab3:#16334ab3;--calc-fb8b2c33:#205b9033;--calc-1f0c02:#ffffff;--night:#f4f7fa;--night-2:#fff;--soil:#edf3f8;--witch:#fff;--witch-2:#fff;--witch-line:#d6e1e9;--bone:#16334a;--bone-2:#46647a;--bone-3:#587084;--line:#d6e1e9;--line-2:#b6cede;--primary:#205b90;--display:var(--sans);--header-h:94px;color-scheme:light}
html[data-tema="app"] .hero .wrap{grid-template-columns:1fr}html[data-tema="app"] .app-header{position:sticky;top:0;z-index:30}
@media(max-width:760px){html[data-tema="app"]{--header-h:77px}}