/* ===== Wabely · sistema de diseño (cian #60FDFC + negro + blanco) ===== */
@import url("fonts.css"); /* tipografías autoalojadas — sin cargas externas (RGPD) */
:root{
  --cyan:#60FDFC; --cyan-dim:#2BC9C8; --cyan-deep:#0c5b5a;
  --bg:#000000; --surface:#0a0b0d; --surface-2:#0f1114; --surface-3:#14171c;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-cyan:rgba(96,253,252,.35);
  --white:#ffffff; --text:#e9edf0; --muted:#8b93a0; --faint:#565e6b;
  --glow:0 0 40px rgba(96,253,252,.22); --glow-strong:0 0 60px rgba(96,253,252,.38);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  --display:"League Spartan",sans-serif; --body:"DM Sans",sans-serif; --mono:"JetBrains Mono",monospace;
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%)}
body::after{content:"";position:fixed;top:-20%;left:50%;transform:translateX(-50%);width:900px;height:600px;z-index:-2;
  background:radial-gradient(circle,rgba(96,253,252,.14),transparent 65%);filter:blur(20px);pointer-events:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);font-weight:500}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em;color:var(--white)}
.section{padding:110px 0}
.section-head{max-width:640px;margin-bottom:56px}
.section-head h2{font-size:clamp(30px,4.6vw,52px);margin:14px 0 16px}
.section-head p{color:var(--muted);font-size:18px}
.center{margin-left:auto;margin-right:auto;text-align:center}
.muted{color:var(--muted)}
/* logo */
.logo{display:inline-flex;align-items:center;gap:9px}
.logo img{height:30px;width:auto}
.logo .word{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.04em;color:var(--white)}
.logo .word b{color:var(--cyan)}
/* nav */
header.nav{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.94);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:14px;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--white)}
.has-drop{position:relative;z-index:1}
.has-drop:hover,.has-drop:focus-within{z-index:130}
.has-drop>.trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.drop{position:absolute;top:100%;left:-14px;padding-top:14px;display:none;min-width:262px;z-index:130}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop-inner{position:relative;z-index:130;background:#0a0c0f;border:1px solid var(--line-2);border-radius:var(--r-md);padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.85)}
.drop-inner a{display:block;padding:11px 14px;border-radius:9px;font-size:14px;color:var(--text)}
.drop-inner a:hover{background:var(--surface-2);color:var(--cyan)}
.drop-inner a small{display:block;font-size:12px;color:var(--muted);font-family:var(--body)}
.nav-cta{display:flex;align-items:center;gap:14px}
.btn{font-family:var(--body);font-weight:700;font-size:15px;border:none;border-radius:var(--r-full);padding:13px 24px;cursor:pointer;transition:transform .15s,box-shadow .25s,background .2s,color .2s;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.btn-primary{background:var(--cyan);color:#00201f;box-shadow:var(--glow)}
.btn-primary:hover{background:#7dfffe;box-shadow:var(--glow-strong);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--line-cyan);color:var(--cyan)}
.btn-sm{padding:10px 18px;font-size:14px}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px}
/* hero */
.hero{position:relative;padding:96px 0 80px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(44px,6.6vw,78px);margin:20px 0 22px}
.hero h1 .accent{color:var(--cyan);text-shadow:0 0 34px rgba(96,253,252,.5)}
.hero p.lead{font-size:20px;color:var(--muted);max-width:520px;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.pillars{display:flex;gap:26px;margin-top:40px;flex-wrap:wrap}
.pillars .p{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px}
.pillars .p::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
/* device mock */
.device{position:relative;margin:0 auto;width:262px;aspect-ratio:9/16;border-radius:26px;border:1px solid var(--line-2);
  background:linear-gradient(160deg,#0d0f12,#000);box-shadow:0 30px 80px rgba(0,0,0,.7),var(--glow);padding:12px}
.device .screen{position:relative;height:100%;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line)}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:20px;opacity:0;animation:cycle 12s infinite}
.slide:nth-child(1){animation-delay:0s}.slide:nth-child(2){animation-delay:4s}.slide:nth-child(3){animation-delay:8s}
@keyframes cycle{0%{opacity:0;transform:scale(1.04)}4%,30%{opacity:1;transform:scale(1)}36%,100%{opacity:0}}
.slide .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.slide .big{font-family:var(--display);font-weight:900;font-size:34px;color:#fff;line-height:.95}
.slide .price{font-family:var(--display);font-weight:900;font-size:44px;color:var(--cyan);text-shadow:0 0 24px rgba(96,253,252,.5)}
.slide.s1{background:radial-gradient(circle at 30% 20%,rgba(96,253,252,.18),transparent 60%)}
.slide.s2{background:linear-gradient(180deg,#050607,#0b1a1a)}
.slide.s3{background:radial-gradient(circle at 70% 80%,rgba(96,253,252,.14),transparent 60%)}
.nfc-badge{position:absolute;bottom:-14px;right:-14px;background:var(--surface-2);border:1px solid var(--line-cyan);border-radius:var(--r-full);
  padding:9px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cyan);display:flex;align-items:center;gap:8px;box-shadow:var(--glow)}
.nfc-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* page hero (páginas de sistema) */
.page-hero{padding:80px 0 40px;position:relative}
.page-hero .eyebrow{margin-bottom:14px;display:inline-block}
.page-hero h1{font-size:clamp(38px,5.6vw,66px);max-width:14ch}
.page-hero p{color:var(--muted);font-size:20px;max-width:620px;margin:20px 0 30px}
.breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--faint);margin-bottom:22px}
.breadcrumb a:hover{color:var(--cyan)}
/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:38px 24px}
.stat{text-align:center}
.stat .n{font-family:var(--display);font-weight:900;font-size:40px;color:var(--white)}
.stat .n span{color:var(--cyan)}
.stat .l{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
/* grids + cards */
.grid{display:grid;gap:20px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;transition:transform .2s,border-color .2s,box-shadow .3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);border-color:var(--line-cyan);box-shadow:var(--glow)}
a.card{color:inherit}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(96,253,252,.1);border:1px solid var(--line-cyan);margin-bottom:20px}
.card .ico svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.7}
.card h3{font-size:21px;margin-bottom:9px}
.card p{color:var(--muted);font-size:15px;flex:1}
.card .more{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--cyan);text-transform:uppercase}
.card:hover .more{color:#7dfffe}
/* showcase 2-col */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.showcase .panel{background:linear-gradient(180deg,#0d0f12,#050607);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.panel .bar{display:flex;gap:6px;margin-bottom:14px}
.panel .bar i{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.panel .row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--surface)}
.panel .thumb{width:52px;height:34px;border-radius:6px;background:linear-gradient(135deg,var(--cyan-deep),#111);flex:none;border:1px solid var(--line)}
.panel .meta{flex:1}
.panel .meta .t{font-size:13px;color:var(--text);font-weight:500}
.panel .meta .s{font-family:var(--mono);font-size:11px;color:var(--muted)}
.panel .dot{width:9px;height:9px;border-radius:50%}
.panel .on{background:#00e676;box-shadow:0 0 8px #00e676}.panel .off{background:#ff5252}
.panel .send{margin-left:auto;font-family:var(--body);font-size:12px;font-weight:700;color:#00201f;background:var(--cyan);border:none;border-radius:var(--r-full);padding:7px 14px}
.feature-list{list-style:none;margin-top:24px}
.feature-list li{display:flex;gap:12px;padding:10px 0;color:var(--text);font-size:16px}
.feature-list li svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:2;flex:none;margin-top:3px}
/* escaparate / brillo */
.window{position:relative;margin:0 auto;max-width:420px;aspect-ratio:4/5;border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,#0b0d10,#000);padding:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.window::before{content:"";position:absolute;top:-30%;right:-20%;width:70%;height:80%;background:radial-gradient(circle,rgba(96,253,252,.32),transparent 65%);filter:blur(10px)}
.window .sun{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cyan);display:flex;align-items:center;gap:7px;z-index:2}
.window .sun i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff,var(--cyan));box-shadow:0 0 18px var(--cyan)}
.window .vscreen{position:relative;z-index:1;height:100%;border-radius:12px;border:1px solid var(--line-cyan);background:linear-gradient(160deg,#04201f,#000);box-shadow:0 0 40px rgba(96,253,252,.3),inset 0 0 40px rgba(96,253,252,.06);display:flex;flex-direction:column;justify-content:space-between;padding:24px}
.window .vscreen .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.window .vscreen .h{font-family:var(--display);font-weight:900;font-size:42px;line-height:.9;color:#fff}
/* módulos / pasos */
.mod{display:flex;gap:20px;align-items:flex-start;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.mod .num{font-family:var(--mono);font-size:13px;color:var(--cyan);border:1px solid var(--line-cyan);border-radius:8px;padding:6px 10px;flex:none}
.mod h3{font-size:19px;margin-bottom:6px}
.mod p{color:var(--muted);font-size:15px}
/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 28px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--line-cyan);box-shadow:var(--glow);position:relative}
.plan.featured::before{content:"Recomendado";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#00201f;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:var(--r-full)}
.plan .name{font-family:var(--display);font-weight:800;font-size:24px;color:#fff}
.plan .desc{color:var(--muted);font-size:14px;margin:8px 0 20px;min-height:40px}
.plan .price{font-family:var(--display);font-weight:900;font-size:34px;color:var(--white);margin-bottom:4px}
.plan .price small{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;letter-spacing:.1em}
.plan ul{list-style:none;margin:22px 0 26px;flex:1}
.plan ul li{display:flex;gap:10px;padding:8px 0;font-size:14px;color:var(--text);border-top:1px solid var(--line)}
.plan ul li:first-child{border-top:none}
.plan ul li svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:2.2;flex:none;margin-top:3px}
.plan .btn{width:100%;justify-content:center}
.note{text-align:center;color:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.1em;margin-top:22px}
/* FAQ */
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;background:var(--surface);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--white)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex:none;width:22px;height:22px;position:relative}
.faq-item summary .plus::before,.faq-item summary .plus::after{content:"";position:absolute;background:var(--cyan);border-radius:2px}
.faq-item summary .plus::before{top:10px;left:2px;right:2px;height:2px}
.faq-item summary .plus::after{left:10px;top:2px;bottom:2px;width:2px;transition:opacity .25s}
.faq-item[open] summary .plus::after{opacity:0}
.faq-item[open] summary{color:var(--cyan)}
.faq-item .a{padding:0 24px 22px;color:var(--muted);font-size:15px;max-width:820px}
.faq-item:hover{border-color:var(--line-2)}
/* blog */
.post-meta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--cyan);margin-bottom:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag-chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-full);padding:4px 10px}
.post-body{color:var(--text);font-size:17px;line-height:1.75}
.post-body h2{font-size:26px;margin:34px 0 12px}
.post-body p{margin-bottom:16px;color:var(--muted)}
.post-body ul{margin:0 0 16px 20px;color:var(--muted)}
.post-body li{margin-bottom:8px}
.post-body strong{color:var(--text)}
/* form / contacto */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact .info h2{font-size:clamp(30px,4.4vw,48px);margin:14px 0 16px}
.contact .info p{color:var(--muted);font-size:17px;margin-bottom:26px}
.contact .info .chan{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:16px}
.contact .info .chan svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.8}
.contact .info .chan a:hover{color:var(--cyan)}
form.lead{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 14px;color:var(--text);font-family:var(--body);font-size:15px;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(96,253,252,.12)}
.field textarea{resize:vertical;min-height:96px}
.field .err{color:#ff7676;font-size:13px;margin-top:6px;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:#ff5252}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12px;color:var(--faint);margin-top:6px}
.form-msg{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);font-size:14px;display:none}
.form-msg.ok{display:block;background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.4);color:#7dffb0}
.form-msg.bad{display:block;background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.4);color:#ff9a9a}
/* CTA band */
.cta-band{position:relative;text-align:center;padding:90px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(96,253,252,.16),transparent 70%);z-index:-1}
.cta-band h2{font-size:clamp(32px,5vw,58px);margin-bottom:18px}
.cta-band p{color:var(--muted);font-size:19px;max-width:560px;margin:0 auto 34px}
/* sales highlight banner */
.sales{position:relative;border:1px solid var(--line-cyan);border-radius:var(--r-xl);padding:48px;background:linear-gradient(120deg,rgba(96,253,252,.08),transparent 60%),var(--surface);overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.sales::after{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:120%;background:radial-gradient(circle,rgba(96,253,252,.25),transparent 65%);filter:blur(16px)}
.sales h2{font-size:clamp(28px,4vw,44px);position:relative;z-index:1}
.sales p{color:var(--muted);font-size:17px;margin-top:12px;max-width:560px;position:relative;z-index:1}
.sales .btn{position:relative;z-index:1}
/* footer */
footer{padding:64px 0 40px}
footer .wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
footer .about{color:var(--muted);font-size:14px;max-width:320px;margin-top:16px}
footer h4{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:500}
footer a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .2s}
footer a:hover{color:var(--cyan)}
.copy{border-top:1px solid var(--line);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.08em}
/* imágenes */
.shot{display:block;width:100%;border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.imgband img{width:100%;max-height:520px;object-fit:cover;display:block;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pageshot{max-height:460px;object-fit:cover}
/* cookie banner (RGPD/LSSI) — rechazar tan fácil como aceptar */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:720px;margin:0 auto;background:#0a0c0f;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.7);padding:20px 22px;display:none}
.cookie.show{display:block}
.cookie h4{font-family:var(--display);font-size:18px;color:#fff;margin-bottom:8px}
.cookie p{color:var(--muted);font-size:14px;margin-bottom:14px}
.cookie a{color:var(--cyan)}
.cookie .row{display:flex;gap:12px;flex-wrap:wrap}
.cookie .row .btn{flex:1 1 0;min-width:130px;justify-content:center}
.cookie .cfg{margin-top:10px;text-align:center;font-size:12px}
.cookie .cfg a{color:var(--muted);text-decoration:underline}
/* páginas legales */
.legal-body{max-width:820px;color:var(--text);font-size:16px;line-height:1.75}
.legal-body h2{font-size:24px;margin:32px 0 10px}
.legal-body h3{font-size:18px;margin:22px 0 8px;color:#fff}
.legal-body p,.legal-body li{color:var(--muted);margin-bottom:12px}
.legal-body ul{margin:0 0 14px 20px}
.legal-body a{color:var(--cyan)}
.legal-body strong{color:var(--text)}
.legal-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:9px 11px;text-align:left;color:var(--muted);vertical-align:top}
.legal-body th{color:var(--text)}
/* ===== TEMA CLARO (data-theme="light") ===== */
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f8fb; --surface-2:#eef2f7; --surface-3:#e4e9f0;
  --line:rgba(12,22,32,.10); --line-2:rgba(12,22,32,.16); --line-cyan:rgba(4,150,140,.45);
  --text:#0e1519; --text-muted:#566270; --text-faint:#95a0ad;
  --cyan:#079e92; --cyan-dim:#06897f; --primary:#079e92; --primary-hover:#068a80; --primary-dark:#046a62;
  --glow:0 10px 30px rgba(12,22,32,.10); --glow-strong:0 14px 44px rgba(12,22,32,.16);
}
:root[data-theme="light"] body::before{background-image:linear-gradient(rgba(12,22,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,22,32,.05) 1px,transparent 1px)}
:root[data-theme="light"] body::after{background:radial-gradient(circle,rgba(7,158,146,.10),transparent 65%)}
:root[data-theme="light"] header.nav{background:rgba(255,255,255,.92)}
:root[data-theme="light"] .logo .word{color:var(--text)}
:root[data-theme="light"] .btn-primary{color:#ffffff}
:root[data-theme="light"] .hero h1 .accent{text-shadow:none}
:root[data-theme="light"] .cookie{background:#ffffff}
/* textos que usaban blanco puro → oscuros en modo claro */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .stat .n,
:root[data-theme="light"] .plan .name,
:root[data-theme="light"] .plan .price,
:root[data-theme="light"] .cookie h4,
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .legal-body h3,
:root[data-theme="light"] .faq-item summary{color:var(--text)}
/* mocks de "pantalla" (fondo oscuro fijo): su texto se mantiene claro */
:root[data-theme="light"] .panel .meta .t{color:#e6eaef}
:root[data-theme="light"] .panel .meta .s{color:#9aa6b4}
/* botón de tema */
.theme-toggle{background:transparent;border:1px solid var(--line-2);color:var(--text);width:38px;height:38px;border-radius:var(--r-full);cursor:pointer;display:grid;place-items:center;flex:none}
.theme-toggle:hover{border-color:var(--line-cyan);color:var(--cyan)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
/* sub-nav legal */
.legalnav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.legalnav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-full);padding:6px 12px}
.legalnav a:hover{border-color:var(--line-cyan);color:var(--cyan)}
.legalnav a.on{color:var(--cyan);border-color:var(--line-cyan)}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* responsive */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .hero .visual{order:-1}
  .showcase{grid-template-columns:1fr;gap:36px}
  .contact{grid-template-columns:1fr;gap:36px}
  .cols-4{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .sales{grid-template-columns:1fr;text-align:center}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:#000;border-bottom:1px solid var(--line);padding:20px 24px;gap:18px;align-items:flex-start}
  .nav-links.open .drop{position:static;display:block;padding-top:10px}
  .nav-links.open .drop-inner{background:transparent;border:none;box-shadow:none;padding:0}
  .section{padding:76px 0}
  .cols-4,.cols-3,.cols-2,.row2{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr;gap:28px}
  .sales{padding:32px}
  footer .wrap{grid-template-columns:1fr}
}