@property --v{syntax:"<number>";inherits:false;initial-value:0}
:root{--bg:#f6f4ee;--bg2:#ece9df;--ink:#12141a;--mut:#555a69;--card:#fff;--line:#dcd8ca;--acc:#c6f432;--acc-ink:#12141a;--acc2:#5a34ff;--ok:#1f9d5c;--bad:#e5484d;--r:18px;--inv:#12141a;--inv-fg:#f6f4ee}
:root[data-theme=dark]{--bg:#0d0f14;--bg2:#141821;--ink:#f1f1ec;--mut:#a0a6b5;--card:#181c26;--line:#2a2f3d;--acc2:#8b6cff;--inv:#232838;--inv-fg:#f1f1ec}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.logo{font-family:"Bricolage Grotesque",Inter,sans-serif;line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(2.5rem,6.2vw,4.8rem);font-weight:800}
h1 em{font-style:normal;background:var(--acc);color:var(--acc-ink);padding:0 .15em;border-radius:.15em}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;margin-bottom:.6rem}
h3{font-size:1.25rem;margin:.4rem 0}
a{color:inherit}
.wrap{max-width:1160px;margin:auto;padding:0 20px}
.narrow{max-width:780px}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{position:fixed;top:8px;left:8px;background:var(--acc);color:var(--acc-ink);padding:8px 14px;z-index:99;border-radius:8px}
:focus-visible{outline:3px solid var(--acc2);outline-offset:3px}
code{font:.9em "JetBrains Mono",monospace;background:var(--bg2);padding:1px 6px;border-radius:6px}

/* fondo */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.7}
:root[data-theme=dark] #bg{opacity:.9}
.bg-pill{position:fixed;left:16px;bottom:18px;z-index:40;display:flex;align-items:center;gap:6px;background:var(--card);color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:4px 6px 4px 10px;font:500 .75rem "JetBrains Mono",monospace;box-shadow:0 4px 16px rgba(0,0,0,.15);max-width:calc(100vw - 90px);backdrop-filter:blur(8px)}
.bg-pill b{color:var(--ink)}
.bg-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.bg-nav-btn,.bg-pin-btn,#bgBtn{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font-size:.72rem;display:grid;place-items:center;transition:background .15s,transform .1s}
.bg-nav-btn:hover,.bg-pin-btn:hover,#bgBtn:hover{background:var(--bg2);transform:scale(1.08)}
.bg-pin-btn.on{background:var(--acc);color:var(--acc-ink);border-color:var(--ink)}
.bg-cat-link{text-decoration:none;padding:3px 9px;border-radius:99px;background:var(--bg2);color:var(--ink);font-weight:600;font-size:.7rem;border:1px solid var(--line);white-space:nowrap;transition:background .15s}
.bg-cat-link:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--ink)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:1.3rem}
.logo-mark{width:30px;height:30px}
.logo-mark path{fill:var(--acc);stroke:var(--ink);stroke-width:2}
.logo-mark .ch{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dot{color:var(--acc2)}
nav#menu{display:flex;gap:22px}
nav#menu a{text-decoration:none;color:var(--mut);font-weight:500;font-size:.95rem}
nav#menu a:hover,nav#menu a.on{color:var(--ink)}
.nav-actions{display:flex;gap:8px;align-items:center}
.icon-btn{background:var(--card);border:1px solid var(--line);color:var(--ink);width:42px;height:42px;border-radius:12px;cursor:pointer;font-size:1.1rem;flex:none}
.burger{display:none}

/* botones */
.btn{display:inline-block;background:var(--acc);color:var(--acc-ink);font-weight:600;text-decoration:none;padding:14px 26px;border-radius:999px;border:2px solid var(--ink);cursor:pointer;font-size:1rem;font-family:inherit;box-shadow:0 5px 0 var(--ink);transition:transform .15s,box-shadow .15s;transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px));box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translate(var(--mx,0px),calc(var(--my,0px) + 3px));box-shadow:0 2px 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn-ghost{background:var(--card);color:var(--ink)}
.btn-sm{padding:8px 18px;font-size:.9rem;box-shadow:0 3px 0 var(--ink)}
.wide{width:100%;text-align:center;margin-top:14px}

/* secciones */
.sec{padding:96px 0}
.alt{background:color-mix(in srgb,var(--bg2) 72%,transparent)}
.eyebrow{font:500 .8rem "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--acc2);margin-bottom:10px}
:root[data-theme=dark] .eyebrow{color:var(--acc)}
.sub{color:var(--mut);max-width:62ch;margin-bottom:34px;font-size:1.1rem}
.note{color:var(--mut);font-size:.9rem;margin-top:14px}
.lbl{display:block;font-weight:600;margin:18px 0 6px}
.hl{background:linear-gradient(transparent 60%,var(--acc) 60%)}
:root[data-theme=dark] .hl{color:var(--acc);background:none}

/* hero */
.hero{padding:64px 0 96px;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.rot{color:var(--acc2);border-right:.08em solid currentColor;padding-right:.05em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.lead{font-size:1.2rem;color:var(--mut);margin:22px 0 30px;max-width:54ch}
.lead strong{color:var(--ink)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.stats{list-style:none;display:flex;gap:34px;margin-top:44px;padding:0;flex-wrap:wrap}
.stats b{font:800 2.2rem "Bricolage Grotesque";display:block;line-height:1}
.stats span{font-size:.85rem;color:var(--mut)}
.hero-visual{position:relative;margin:0 12px 20px 0}
.hero-visual img{border:2px solid var(--ink);border-radius:26px;box-shadow:12px 12px 0 var(--acc2);aspect-ratio:9/10;object-fit:cover;width:100%}
.float{position:absolute;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:9px 14px;font-weight:600;font-size:.9rem;box-shadow:4px 4px 0 var(--ink);transform:translate(var(--dx,0),var(--dy,0));transition:transform .25s ease-out;white-space:nowrap}
.float em{font-style:normal;font-weight:400;color:var(--mut)}
.f1{top:6%;left:-8%}.f2{top:44%;right:-6%}.f3{bottom:12%;left:-6%;background:var(--acc);color:var(--acc-ink)}
.f4{bottom:-4%;right:6%;background:var(--ink);color:var(--acc);font:500 .85rem "JetBrains Mono",monospace;margin:0}

/* negocios */
.biz{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:10px 16px;border-radius:999px;cursor:pointer;font:500 .95rem Inter,sans-serif;transition:.15s}
.chip:hover,.chip[aria-pressed=true]{background:var(--inv);color:var(--inv-fg);border-color:var(--ink)}
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font:700 .75rem/21px Inter;text-align:center}
.biz-plan{margin-top:18px;font-weight:600}
.phone{background:var(--ink);border-radius:44px;padding:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);transform:rotate(-2deg);max-width:340px;justify-self:center;width:100%}
.phone-in{background:#fff;color:#12141a;border-radius:34px;overflow:hidden;min-height:560px;transition:opacity .25s,transform .25s}
.phone-in.swap{opacity:0;transform:scale(.97)}
.ph-top{display:flex;justify-content:space-between;padding:12px 18px;font:600 .75rem Inter;align-items:center}
.ph-top i{width:22px;height:3px;background:#12141a;border-radius:3px;box-shadow:0 6px 0 #12141a}
.ph-img{height:190px;object-fit:cover;width:100%}
.ph-body{padding:18px 20px 22px}
.ph-body h4{font:800 1.45rem/1.1 "Bricolage Grotesque";color:var(--c);margin-bottom:6px;word-break:break-word}
.ph-body p{font-size:.9rem;color:#555a69}
.ph-btn{display:block;margin:16px 0;background:var(--c);color:#fff;text-align:center;font-weight:600;padding:12px;border-radius:999px;font-size:.95rem}
.ph-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph-row span{background:color-mix(in srgb,var(--c) 12%,#fff);border-radius:10px;padding:10px 4px;text-align:center;font-size:.72rem;font-weight:600;color:var(--c)}
.ph-foot{margin-top:14px;font-size:.75rem;color:#777;display:flex;gap:6px;align-items:center}
.promo{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center;margin-top:80px;background:var(--inv);color:var(--inv-fg);border-radius:28px;padding:28px 40px 28px 28px}
.promo img{border-radius:20px;aspect-ratio:1;object-fit:cover;object-position:top}
.promo h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:10px}
.promo .big{color:var(--acc)}
.promo p{opacity:.85;margin-bottom:20px;max-width:56ch}
.promo .eyebrow{color:var(--acc)}
.promo .btn{border-color:var(--acc);box-shadow:0 5px 0 var(--acc2)}

/* tarjetas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:34px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--ink)}
.card p{color:var(--mut);margin-bottom:12px}
.card small{font:500 .8rem "JetBrains Mono",monospace;color:var(--acc2)}
:root[data-theme=dark] .card small{color:var(--acc)}
.spot .card{background:radial-gradient(360px circle at var(--x,-999px) var(--y,-999px),color-mix(in srgb,var(--acc2) 16%,transparent),transparent 70%),var(--card)}
.ico{font-size:2rem;display:inline-block;transition:transform .3s}
.card:hover .ico{transform:scale(1.2) rotate(-8deg)}

/* aprende */
.flow{display:grid;gap:24px}
.steps{display:flex;gap:10px;flex-wrap:wrap}
.stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.track{display:flex;justify-content:space-between;position:relative;padding:20px 0 34px}
.track::before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:3px dashed var(--line)}
.node{position:relative;font-size:2rem;background:var(--card);padding:0 6px;text-align:center;z-index:1;opacity:.35;transition:.3s}
.node i{display:block;font:normal 500 .75rem "JetBrains Mono",monospace;color:var(--mut)}
.node.on{opacity:1;transform:scale(1.2)}
.packet{position:absolute;top:calc(50% - 8px);left:8%;width:16px;height:16px;border-radius:50%;background:var(--acc);border:2px solid var(--ink);transition:left .7s ease;z-index:2}
.explain h3{margin-top:0}.explain p{color:var(--mut)}

/* playground */
.pg-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;min-height:360px;box-shadow:10px 10px 0 var(--acc2)}
#code{background:#0d0f14;color:#c6f432;border:0;padding:16px;font:.85rem/1.6 "JetBrains Mono",monospace;resize:vertical;min-height:360px;tab-size:2}
#preview{width:100%;height:100%;min-height:360px;border:0;background:#fff}

/* oportunidad */
.race{display:grid;gap:18px;margin:8px 0 24px}
.lane{display:grid;grid-template-columns:180px 1fr 64px;gap:14px;align-items:center}
.meter{height:24px;background:var(--card);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.meter div{height:100%;width:0;background:var(--bad)}
.meter.good div{background:var(--ok)}
.lane span{font:600 1rem "JetBrains Mono",monospace}
.verdict{margin-top:18px;font-weight:600;min-height:1.6em}
.calc{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;margin-top:56px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px}
.calc label{display:block;margin-top:18px;font-weight:500}
.calc output{float:right;font:600 .95rem "JetBrains Mono",monospace;color:var(--acc2)}
:root[data-theme=dark] .calc output{color:var(--acc)}
input[type=range]{width:100%;accent-color:var(--acc2);margin-top:8px;height:28px}
.calc-out{background:var(--inv);color:var(--inv-fg);border-radius:18px;padding:28px;display:grid;gap:18px;align-content:center}
.calc-out span{font-size:.9rem;opacity:.75;display:block}
.calc-out b{font:800 2.4rem "Bricolage Grotesque";color:var(--acc);line-height:1.1}
.calc-out p{font-weight:500}

/* seguridad */
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px}
.audit{display:grid;gap:8px;margin-top:16px}
.opt{display:flex;gap:14px;align-items:center;background:var(--bg);border:1px solid var(--line);padding:12px 16px;border-radius:12px;cursor:pointer;transition:.15s}
.opt:has(input:checked){border-color:var(--ink);background:var(--bg2)}
.opt input{width:20px;height:20px;accent-color:var(--acc2);flex:none}
.opt span{flex:1}.opt b{font:600 .95rem "JetBrains Mono",monospace;white-space:nowrap}
.opt small{display:block;color:var(--mut);font-size:.82rem}
.gauge-row{display:flex;gap:20px;align-items:center;margin-top:22px}
.gauge{--v:0;--g:var(--bad);width:96px;height:96px;flex:none;border-radius:50%;background:conic-gradient(var(--g) calc(var(--v)*1%),var(--line) 0);display:grid;place-items:center;transition:--v .4s}
.gauge b{width:72px;height:72px;border-radius:50%;background:var(--card);display:grid;place-items:center;font:800 1.5rem "Bricolage Grotesque"}
.gauge-row p{font-weight:500}
.pw-row{display:flex;gap:8px;margin-top:16px}.pw-row .input{margin:0}
.pw-meter{height:12px;background:var(--bg2);border-radius:99px;margin-top:14px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .3s,background .3s}
.pw-out{margin-top:12px;font-weight:500;min-height:3.2em}
.tips{margin-top:14px;padding-left:20px;color:var(--mut);display:grid;gap:6px}

/* quiz */
.quiz{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px;margin-top:24px}
.prog{height:6px;background:var(--bg2);border-radius:9px;margin-bottom:22px}
.prog i{display:block;height:100%;background:var(--acc2);border-radius:9px;transition:width .3s}
.quiz h3{font-size:1.5rem;margin-bottom:16px}
.ans{display:block;width:100%;text-align:left;margin-bottom:10px;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:14px 18px;border-radius:12px;cursor:pointer;font:inherit;transition:.15s}
.ans:hover{border-color:var(--ink);transform:translateX(4px)}
.result h3{font-size:2rem}.result p{color:var(--mut);margin:10px 0 20px}
.result .cta-row{gap:10px}

/* planes */
.packs{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch}
.packs .card{position:relative;display:flex;flex-direction:column}
.packs .card ul{flex:1}
.packs .hot{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--acc2)}
.packs .starter{border:2px dashed var(--acc2)}
.tag{position:absolute;top:-13px;right:18px;background:var(--acc);color:var(--acc-ink);border:1px solid var(--ink);font:600 .72rem "JetBrains Mono",monospace;padding:3px 12px;border-radius:99px}
.price{font:800 2.3rem "Bricolage Grotesque";margin:6px 0 14px}
.packs ul{list-style:none;padding:0;color:var(--mut);font-size:.95rem;margin-bottom:18px}
.packs li{padding:5px 0 5px 24px;position:relative}
.packs li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.packs .btn{text-align:center}

/* cotizador */
.quote{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.opts{border:0;padding:0;display:grid;gap:10px}
.opts .opt{background:var(--card)}
.total{position:sticky;top:90px;background:var(--inv);color:var(--inv-fg);border-radius:24px;padding:28px}
.total h3{margin-top:0}
.total ul{list-style:none;padding:0;min-height:60px;font-size:.95rem;opacity:.85}
.total li{display:flex;justify-content:space-between;padding:4px 0;gap:10px}
.sum{display:flex;justify-content:space-between;align-items:end;border-top:1px dashed currentColor;margin:14px 0 6px;padding-top:14px}
.sum b{font:800 2rem "Bricolage Grotesque";color:var(--acc)}
.total small{opacity:.7}
.total .btn{border-color:var(--acc);box-shadow:0 5px 0 var(--acc2)}
.flash{animation:flash 1s}
@keyframes flash{30%{box-shadow:0 0 0 6px var(--acc)}}

/* proceso */
.timeline{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px;position:relative}
.timeline::before,.timeline::after{content:"";position:absolute;top:0;left:0;height:4px;border-radius:4px;background:var(--line);right:0}
.timeline::after{background:var(--acc2);transform-origin:0;transform:scaleX(var(--p,0))}
.timeline li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:22px;transition:.4s;opacity:.5}
.timeline li.done{opacity:1;border-color:var(--ink);transform:translateY(-4px)}
.timeline p{color:var(--mut);font-size:.95rem;margin-top:6px}

/* glosario, faq, formulario */
.input{width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:13px 16px;font:inherit;margin-top:6px}
.gloss mark{background:var(--acc);color:var(--acc-ink);border-radius:3px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:10px;transition:border-color .2s}
details[open]{border-color:var(--ink)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 1.3rem/1 Inter;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mut);margin-top:10px}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-side img{border-radius:24px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--acc);margin-bottom:24px}
.form{display:grid;gap:16px;margin-top:20px}
.form label{font-weight:500}

.foot{border-top:1px solid var(--line);padding:30px 0 80px;color:var(--mut);font-size:.9rem;background:var(--bg)}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wa{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-size:1.6rem;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:40;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}

.rv{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .hero-grid,.quote,.pg,.biz,.calc,.sec-grid,.contact,.promo{grid-template-columns:1fr}
  .hero-visual{max-width:460px;margin:10px auto 20px}
  .f1{left:-2%}.f2{right:-2%}.f3{left:-2%}
  nav#menu{display:none;position:absolute;top:66px;left:0;right:0;background:var(--bg);flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--line)}
  nav#menu.open{display:flex}
  .burger{display:block}
  .lane{grid-template-columns:1fr 64px}.lane b{grid-column:1/-1}
  .total{position:static}
  .sec{padding:68px 0}
  .timeline{grid-template-columns:1fr}
  .timeline::before,.timeline::after{display:none}
  .promo{padding:24px;margin-top:56px}.promo img{max-width:220px}
  .phone{transform:none}
}
@media(max-width:480px){#bgHint{display:none}.f2{white-space:normal;max-width:190px}.stats{gap:22px}.nav-actions .btn-sm{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* tipografías que cambian */
.f-play{font-family:"Playfair Display",serif!important;font-style:italic}
.f-cav{font-family:Caveat,cursive!important;font-size:1.12em}
.f-bung{font-family:Bungee,sans-serif!important;font-size:.78em;letter-spacing:0}
.f-glitch{font-family:"Rubik Glitch",sans-serif!important;font-size:.9em;letter-spacing:0}
.f-mono{font-family:"JetBrains Mono",monospace!important;font-size:.82em;letter-spacing:-.04em}
.morph{color:var(--acc2);display:inline-block;transition:filter .18s,opacity .18s}
.morph.blur,.rot.blur{filter:blur(6px);opacity:.2}
:root[data-theme=dark] .morph{color:var(--acc)}

/* antes y después */
.ba{--pos:50%;position:relative;height:430px;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:10px 10px 0 var(--acc);user-select:none}
.ba-layer{position:absolute;inset:0;overflow:hidden}
.ba-old{clip-path:inset(0 calc(100% - var(--pos)) 0 0);background:#ffff66;color:#0000cc;font-family:"Times New Roman",Times,serif}
.ba-new{background:#fffaf2;color:#2b1a0e;font-family:Inter,sans-serif}
.ba-bar{display:flex;gap:6px;align-items:center;padding:9px 12px;background:#f1efe9;border-bottom:1px solid #ddd;font:.75rem "JetBrains Mono",monospace;color:#555}
.ba-bar i{width:9px;height:9px;border-radius:50%;background:#ccc}
.ba-bar.old{background:#c0c0c0;border-bottom:2px outset #fff;color:#000;font-family:Tahoma,sans-serif}
.bn-nav{display:flex;gap:18px;align-items:center;padding:14px 26px;font-size:.85rem;color:#6b4a2b}
.bn-nav b{margin-right:auto;font:800 1.1rem "Bricolage Grotesque";color:#b45309}
.bn-hero{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;padding:18px 26px}
.bn-hero small{color:#9a4508;font-weight:600}
.bn-hero h3{font:800 clamp(1.5rem,3vw,2.2rem)/1.05 "Bricolage Grotesque";margin:8px 0 16px}
.bn-btn{display:inline-block;background:#b45309;color:#fff;padding:11px 20px;border-radius:99px;font-weight:600;font-size:.9rem}
.bn-hero p{font-size:.8rem;color:#6b4a2b;margin-top:14px}
.bn-hero img{border-radius:16px;aspect-ratio:4/3;object-fit:cover}
.bo{padding:10px 24px}
.bo h3{font:bold 2rem "Comic Sans MS","Comic Sans",cursive;color:#ff0000;text-shadow:2px 2px #00ff00;margin:8px 0}
.bo p{margin:6px 0}.bo u{color:#0000ee}
.bo-mq{overflow:hidden;white-space:nowrap;background:#000080;color:#ffff00;font-weight:bold}
.bo-mq span{display:inline-block;padding-left:100%;animation:mq 12s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.bo table{margin:8px 0;border:3px ridge #999;background:#fff}.bo td{border:1px solid #999;padding:3px 10px}
.bo-ct b{background:#000;color:#0f0;font-family:monospace;padding:0 4px}
.bo small{font-size:.7rem;color:#555}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:var(--ink);transform:translateX(-50%);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--acc-ink);border:2px solid var(--ink);display:grid;place-items:center;font-weight:700}
.ba-tag{position:absolute;bottom:12px;background:var(--inv);color:var(--inv-fg);font:600 .75rem "JetBrains Mono",monospace;padding:4px 10px;border-radius:99px;pointer-events:none}
.ba-tag.l{left:12px}.ba-tag.r{right:12px}
#baRange{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba:has(#baRange:focus-visible){outline:3px solid var(--acc2);outline-offset:3px}
.ba-notes{grid-template-columns:repeat(3,1fr)}

/* kit de marca */
.kit{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.kit-why{margin-top:20px;color:var(--mut);min-height:4.8em}
.kit-card{--k1:#1d4ed8;--k2:#e0e7ff;--k3:#0f172a;background:var(--k2);color:var(--k3);border:2px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:10px 10px 0 var(--k1);transition:background .4s,color .4s,box-shadow .4s}
.kit-hero{padding:34px 30px 26px;text-align:center}
.kit-logo{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:18px;background:var(--k1);color:var(--k2);font:800 1.8rem "Bricolage Grotesque";margin-bottom:12px}
.kit-hero h3{font-size:clamp(1.8rem,4vw,2.6rem);margin:6px 0;word-break:break-word;font-family:"Bricolage Grotesque"}
.kit-hero p{opacity:.85}
.kit-btn{display:inline-block;margin-top:16px;background:var(--k1);color:var(--k2);padding:11px 24px;border-radius:99px;font-weight:600}
.kit-spec{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 30px;border-top:1px solid color-mix(in srgb,var(--k3) 15%,transparent)}
.kit-spec span{font-size:1.6rem;font-family:"Bricolage Grotesque"}
.kit-spec small{font:500 .75rem "JetBrains Mono",monospace;opacity:.75}
.kit-sw{display:flex;height:34px}.kit-sw i{flex:1}
.kit-css{margin:0;background:#0d0f14;color:#c6f432;padding:14px 20px;font:.78rem/1.6 "JetBrains Mono",monospace;white-space:pre-wrap}
.kit-css code{background:none;padding:0}
.kit-card.swap .kit-hero{animation:pop .4s}
@keyframes pop{40%{transform:scale(.96);opacity:.6}}

/* juego phishing */
.g-type{font:600 .85rem "JetBrains Mono",monospace;color:var(--acc2);margin:6px 0 10px}
:root[data-theme=dark] .g-type{color:var(--acc)}
.g-box{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:1.05rem;white-space:pre-wrap;word-break:break-word;margin-bottom:18px}
.g-box.url{font:500 1rem "JetBrains Mono",monospace}
.g-fb{margin-top:16px;padding:14px 18px;border-radius:12px;display:none}
.g-fb.good,.g-fb.bad{display:block}
.g-fb.good{background:color-mix(in srgb,var(--ok) 15%,var(--card));border:1px solid var(--ok)}
.g-fb.bad{background:color-mix(in srgb,var(--bad) 12%,var(--card));border:1px solid var(--bad)}
.g-fb .btn{margin-top:12px;display:block;width:max-content}

/* planes con inclinación 3D */
.packs .card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s,border-color .2s}
.packs .card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}

/* glosario en tarjetas */
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:16px}
.flip{position:relative;height:150px;border:0;padding:0;background:none;cursor:pointer;perspective:900px;font:inherit;color:inherit;text-align:left}
.fr,.bk{position:absolute;inset:0;border-radius:14px;padding:16px 18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.fr{background:var(--card)}
.fr b{font:700 1.2rem "Bricolage Grotesque",sans-serif}
.fr small{color:var(--mut);font-size:.8rem;margin-top:4px}
.bk{background:var(--inv);color:var(--inv-fg);transform:rotateY(180deg);font-size:.9rem;line-height:1.45}
.flip[aria-pressed=true] .fr{transform:rotateY(-180deg)}
.flip[aria-pressed=true] .bk{transform:rotateY(0)}
.flip:hover .fr{border-color:var(--ink)}

/* página 404 */
.nf{min-height:100vh;display:grid;place-content:center;justify-items:center;text-align:center;padding:40px 20px;gap:18px}
.chip .sw{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;border:1px solid var(--line)}
@media(max-width:900px){.kit,.ba-notes{grid-template-columns:1fr}.bn-hero{grid-template-columns:1fr}.bn-hero img{display:none}.ba{height:470px}.bn-nav span{display:none}}

/* catálogo & showroom de fondos */
.showroom-stage{background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:28px 32px;box-shadow:8px 8px 0 var(--acc2);display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;margin-bottom:34px;position:relative}
.stage-badge{display:inline-flex;align-items:center;gap:8px;font-size:1.4rem;font-weight:800;font-family:"Bricolage Grotesque",sans-serif;margin-bottom:8px}
.badge-cat{font:600 .7rem "JetBrains Mono",monospace;text-transform:uppercase;background:var(--bg2);color:var(--acc2);border:1px solid var(--line);padding:2px 8px;border-radius:99px}
:root[data-theme=dark] .badge-cat{color:var(--acc)}
.stage-vibe{font-size:1.15rem;font-weight:600;color:var(--ink);margin:4px 0 8px}
.stage-for{color:var(--mut);font-size:.95rem;margin-bottom:12px}
.stage-for strong{color:var(--ink)}
.stage-hint{font:500 .85rem "JetBrains Mono",monospace;background:var(--bg);border:1px solid var(--line);padding:8px 14px;border-radius:10px;display:inline-block;color:var(--mut)}
.stage-hint span:first-child{color:var(--acc2);font-weight:700}
:root[data-theme=dark] .stage-hint span:first-child{color:var(--acc)}

.stage-ctrls{display:grid;gap:18px;background:var(--bg);border:1px solid var(--line);padding:20px;border-radius:18px}
.ctrl-group{display:grid;gap:8px}
.lbl-sm{font:600 .75rem "JetBrains Mono",monospace;text-transform:uppercase;color:var(--mut)}
.palettes{display:flex;gap:10px;flex-wrap:wrap}
.pal-btn{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:none;cursor:pointer;display:flex;overflow:hidden;padding:0;transition:transform .15s,border-color .15s}
.pal-btn span{width:50%;height:100%}
.pal-btn:hover{transform:scale(1.15)}
.pal-btn.on{border-color:var(--ink);transform:scale(1.2);box-shadow:0 0 0 2px var(--acc)}
.stage-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.stage-actions .btn{flex:1;min-width:130px;text-align:center;padding:10px 14px;font-size:.85rem}

.catalog-tabs{margin-bottom:24px}
.catalog-tabs .chip.on{background:var(--inv);color:var(--inv-fg);border-color:var(--ink)}

.bg-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.bg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.bg-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.bg-card.active{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--acc)}
.bg-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bg-card-top .ico{font-size:1.6rem}
.bg-card h4{font:800 1.2rem "Bricolage Grotesque";margin:2px 0 6px}
.bg-card-vibe{font-size:.88rem;color:var(--mut);line-height:1.4;margin-bottom:8px}
.bg-card-for{font-size:.78rem;color:var(--ink);font-weight:500;margin-bottom:14px;background:var(--bg);border-radius:6px;padding:4px 8px}
.bg-card-btns{display:flex;gap:8px;margin-top:auto}
.bg-card-btns button{flex:1;font-size:.8rem;padding:7px 10px}

/* laboratorio de efectos UI */
.ui-lab{margin-top:72px;border-top:1px dashed var(--line);padding-top:54px}
.ui-lab-head h3{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:.2rem 0 .5rem}
.ui-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}
.ui-card{display:flex;flex-direction:column;position:relative}
.ui-demo{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:20px 16px;margin:14px 0;display:grid;place-items:center;min-height:110px}
.spark-btn{position:relative}
.tilt-card{transition:transform .15s ease-out,border-color .2s;transform-style:preserve-3d;perspective:800px}
.tilt-badge{background:var(--card);border:2px solid var(--ink);padding:8px 16px;border-radius:99px;font:700 .85rem "Bricolage Grotesque";box-shadow:3px 3px 0 var(--acc2);pointer-events:none}

.term-card{grid-column:span 2}
@media(max-width:900px){.term-card{grid-column:span 1}.showroom-stage{grid-template-columns:1fr}}
.term-box{width:100%;background:#090b10;color:#c6f432;border-radius:12px;overflow:hidden;border:1px solid #232838;font:500 .82rem/1.5 "JetBrains Mono",monospace;display:flex;flex-direction:column}
.term-bar{background:#12151e;padding:6px 12px;display:flex;align-items:center;gap:6px;color:#7a8299;font-size:.72rem}
.term-bar span{width:9px;height:9px;border-radius:50%;background:#e5484d;display:inline-block}
.term-bar span:nth-child(2){background:#f5a623}
.term-bar span:nth-child(3){background:#1f9d5c}
.term-bar i{margin-left:auto;font-style:normal}
.term-log{padding:12px 14px;max-height:140px;overflow-y:auto;display:grid;gap:4px}
.term-log .line{white-space:pre-wrap;word-break:break-word}
.term-log .res{color:#00f0ff}
.term-log .err{color:#ff5c8a}
.term-in{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#0d1017;border-top:1px solid #1a1e2b}
.term-ps{color:#5a34ff;font-weight:700}
.term-input{flex:1;background:none;border:none;outline:none;color:#fff;font:inherit}
.sound-demo{display:flex;flex-direction:column;gap:12px;align-items:center}
.sound-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}