@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/BarlowCondensed-700.woff2') format('woff2'); }
:root { --bg0:#0B0B0A; --bg1:#121210; --bg2:#171712; --bg3:#1D1D16; --ac:#C6FF1E; --achi:#E4FF8A; --fg:#F0EAD6; --mu:#9A9A8C; --di:#6E6E5E;
  --line:rgba(240,234,214,.14); --lineh:rgba(198,255,30,.45); --f:'Barlow Condensed','Arial Narrow',Impact,sans-serif; --ancho:1240px; }
:root:not([data-theme="dark"]) { color-scheme: dark; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg0); color:var(--fg); font-family:var(--f); font-size:19px; line-height:1.45; min-height:100vh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.ancho { width:min(var(--ancho), 100% - 32px); margin:0 auto; }
.m { color:var(--mu); }
code { font-family:Consolas, 'Courier New', monospace; font-size:.82em; background:rgba(198,255,30,.08); border:1px solid var(--line); padding:1px 6px; border-radius:3px; color:var(--achi); }

.barra { position:sticky; top:0; z-index:20; background:rgba(11,11,10,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.barra-in { display:flex; align-items:center; justify-content:space-between; height:62px; }
.marca { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2em; color:var(--ac); font-size:26px; }
.marca img { height:34px; width:auto; }
.barra nav { display:flex; gap:24px; letter-spacing:.1em; font-weight:600; font-size:17px; text-transform:uppercase; }
.barra nav a { color:var(--mu); } .barra nav a:hover { color:var(--ac); }

.hero { padding:84px 0 70px; background:radial-gradient(900px 400px at 75% 10%, rgba(198,255,30,.14), transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg0)); border-bottom:1px solid var(--line); }
.hero h1 { font-size:clamp(38px, 6vw, 74px); line-height:1.02; font-weight:700; letter-spacing:.02em; max-width:900px; }
.hero h1 span { color:var(--ac); }
.hero p { color:var(--mu); font-size:23px; max-width:720px; margin-top:18px; }
.botones { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 26px; background:var(--ac); color:#0b0b0a; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:17px; border:1px solid var(--ac); cursor:pointer; }
.btn:hover { background:var(--achi); }
.btn.sec { background:transparent; color:var(--fg); border-color:var(--line); } .btn.sec:hover { border-color:var(--ac); color:var(--ac); }
.ancho-total { width:100%; }

section.ancho { padding:56px 0 8px; }
h1, h2, h3, h4 { font-weight:700; letter-spacing:.04em; }
h2 { font-size:34px; color:var(--fg); margin-bottom:18px; text-transform:uppercase; letter-spacing:.12em; }
h2::after { content:''; display:block; width:56px; height:3px; background:var(--ac); margin-top:8px; }

.filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
.filtros input { flex:1 1 220px; max-width:320px; background:var(--bg3); border:1px solid var(--line); color:var(--fg); padding:9px 14px; font-family:var(--f); font-size:18px; outline:0; border-radius:99px; }
.filtros input:focus { border-color:var(--ac); }
.f { padding:6px 16px; border:1px solid var(--line); border-radius:99px; background:none; color:var(--mu); font-family:var(--f); font-size:16px; letter-spacing:.08em; cursor:pointer; }
.f.on, .f:hover { border-color:var(--ac); color:var(--ac); background:rgba(198,255,30,.07); }

.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:20px; }
.tarj { display:flex; flex-direction:column; background:var(--bg2); border:1px solid var(--line); transition:transform .15s, border-color .15s, box-shadow .15s; overflow:hidden; }
.tarj:hover { transform:translateY(-3px); border-color:var(--lineh); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.tarj .foto { aspect-ratio:16/10; background:#0e0f10; overflow:hidden; border-bottom:1px solid var(--line); }
.tarj .foto img { width:100%; height:100%; object-fit:cover; }
.sin-foto { height:100%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%, rgba(198,255,30,.25), transparent 60%), linear-gradient(145deg,#1a1a14,#0b0b0a); }
.sin-foto img { height:46%; opacity:.9; }
.sin-foto.grande { aspect-ratio:16/10; flex-direction:column; gap:12px; color:var(--mu); }
.sin-foto.grande img { height:90px; }
.tarj .cuerpo { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tarj .cab { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.tarj h3 { font-size:23px; line-height:1.1; }
.tarj p { color:var(--mu); font-size:17px; flex:1; }
.pie-t { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.cat { color:var(--di); letter-spacing:.14em; text-transform:uppercase; font-size:14px; font-weight:600; }
.precio { color:var(--ac); font-weight:700; font-size:24px; }
.chip { display:inline-block; padding:2px 10px; border-radius:99px; border:1px solid var(--line); font-size:13px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; font-weight:600; }
.chip.pru { border-color:rgba(240,180,41,.6); color:#f0b429; } .chip.ok { border-color:var(--ac); color:var(--ac); } .chip.lis { border-color:rgba(198,255,30,.55); color:var(--achi); background:rgba(198,255,30,.07); }

.paquetes { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.paq { background:var(--bg2); border:1px solid var(--line); border-top:3px solid var(--ac); padding:18px; display:flex; flex-direction:column; gap:10px; }
a.paq:hover { border-color:var(--lineh); }
.paq h3 { font-size:24px; } .paq p { color:var(--mu); font-size:17px; }
.paq ul { list-style:none; font-size:16px; color:var(--mu); columns:2; } .paq li::before { content:'+ '; color:var(--ac); } .paq li a:hover { color:var(--ac); }
.precio-paq { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:auto; }
.precio-paq s { color:var(--di); } .precio-paq strong { color:var(--ac); font-size:30px; } .ahorro { color:var(--achi); font-size:15px; letter-spacing:.06em; }
.comprar { padding:11px 20px; background:var(--ac); color:#0b0b0a; border:0; font-family:var(--f); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:17px; cursor:pointer; width:100%; }
.comprar:hover:not(:disabled) { background:var(--achi); }
.comprar:disabled { background:transparent; border:1px solid var(--line); color:var(--di); cursor:not-allowed; }

.pasos { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; margin-bottom:60px; }
.pasos div { background:var(--bg2); border:1px solid var(--line); padding:18px; }
.pasos b { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; background:var(--ac); color:#0b0b0a; font-size:20px; border-radius:50%; margin-bottom:8px; }
.pasos h4 { font-size:22px; margin-bottom:4px; } .pasos p { color:var(--mu); font-size:17px; }

.pie { margin-top:auto; border-top:1px solid var(--line); background:var(--bg1); padding:26px 0; color:var(--mu); font-size:17px; }
.pie strong { color:var(--ac); letter-spacing:.14em; }

/* producto */
.prod { padding-top:26px; padding-bottom:60px; }
.miga { color:var(--di); margin-bottom:14px; font-size:16px; letter-spacing:.06em; } .miga a:hover { color:var(--ac); }
.prod-top { display:grid; grid-template-columns:minmax(0, 1.65fr) minmax(300px, 1fr); gap:30px; align-items:start; }
.galeria .principal { display:block; border:1px solid var(--line); background:#0e0f10; }
.galeria .principal img { width:100%; }
.mini { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-top:8px; }
.mini a { border:1px solid var(--line); display:block; } .mini a:hover { border-color:var(--ac); } .mini img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.compra { background:var(--bg2); border:1px solid var(--line); border-top:3px solid var(--ac); padding:20px; display:flex; flex-direction:column; gap:12px; position:sticky; top:80px; }
.compra h1 { font-size:42px; line-height:1; } .compra .res { color:var(--mu); font-size:20px; }
.precio-g { font-size:44px; font-weight:700; color:var(--ac); line-height:1; }
.garantias { list-style:none; color:var(--mu); font-size:16px; border-top:1px solid var(--line); padding-top:10px; } .garantias li::before { content:'✓ '; color:var(--ac); }
.nota { font-size:16px; }
.dos { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:34px; margin-top:44px; }
.dos ul { list-style:none; display:flex; flex-direction:column; gap:7px; } .check li::before { content:'✓ '; color:var(--ac); font-weight:700; }

/* docs */
.doc { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:40px; padding-top:30px; padding-bottom:60px; }
.toc { position:sticky; top:84px; align-self:start; display:flex; flex-direction:column; gap:6px; border-right:1px solid var(--line); padding-right:16px; max-height:calc(100vh - 100px); overflow:auto; }
.toc a { color:var(--mu); font-size:17px; padding:3px 0; } .toc a:hover { color:var(--ac); } .toc .volver { color:var(--ac); letter-spacing:.1em; text-transform:uppercase; font-size:15px; margin-bottom:6px; } .toc strong { font-size:22px; margin-bottom:6px; } .toc .btn { margin-top:12px; font-size:14px; padding:8px 12px; }
.md h1 { font-size:42px; margin-bottom:18px; } .md h2 { margin-top:34px; font-size:28px; } .md h3 { margin:22px 0 8px; font-size:22px; color:var(--achi); }
.md p, .md li { color:#d8d2bf; font-size:19px; } .md p { margin:10px 0; } .md ul, .md ol { margin:10px 0 10px 24px; } .md li { margin:4px 0; }
.md pre { background:#0e0f10; border:1px solid var(--line); padding:14px; overflow:auto; margin:12px 0; } .md pre code { background:none; border:0; padding:0; color:#d8f5a0; font-size:14px; }
.md blockquote { border-left:3px solid var(--ac); padding:6px 14px; background:rgba(198,255,30,.05); margin:12px 0; color:var(--mu); }
.tabla { overflow:auto; margin:12px 0; } .md table { border-collapse:collapse; width:100%; font-size:17px; } .md th { text-align:left; color:var(--ac); letter-spacing:.06em; font-size:15px; text-transform:uppercase; } .md th, .md td { border:1px solid var(--line); padding:7px 10px; vertical-align:top; } .md tr:nth-child(even) td { background:rgba(240,234,214,.02); }
.lista-docs { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px; margin-bottom:50px; }
.lista-docs a { display:flex; flex-direction:column; border:1px solid var(--line); padding:10px 14px; background:var(--bg2); } .lista-docs a:hover { border-color:var(--ac); } .lista-docs span { color:var(--di); font-size:14px; letter-spacing:.1em; text-transform:uppercase; }
main.ancho > h1 { font-size:46px; margin:30px 0 10px; }

#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:50; display:none; align-items:center; justify-content:center; cursor:zoom-out; padding:20px; }
#lightbox.on { display:flex; } #lightbox img { max-height:92vh; max-width:96vw; border:1px solid var(--lineh); }
.aviso-b { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--lineh); padding:10px 22px; z-index:60; max-width:92vw; }

@media (max-width:860px) {
  .prod-top, .doc { grid-template-columns:1fr; } .compra, .toc { position:static; } .toc { border-right:0; border-bottom:1px solid var(--line); padding:0 0 14px; max-height:none; }
  .barra nav { gap:14px; font-size:15px; } .marca { font-size:22px; } .paq ul { columns:1; } body { font-size:18px; }
}