/* Chollo Consolas — estilos de toda la web (fase 2, 2026-09-14).
   Diseño "neón" (cian/magenta), elegido por el usuario entre tres variantes. */

/* ============ COLORES Y TIPOGRAFÍAS ============ */
/* Tipografías servidas desde la propia web (15/09), no desde Google Fonts: con
   Google llegaban tarde, el texto se recolocaba al cambiar de fuente y en PC
   movía la portada (CLS 0,39); además ya no se envía la IP de cada visita a
   Google. Solo el subconjunto latino (español y €). Licencia SIL Open Font
   License, que permite alojarlas. base.html precarga las tres de arriba. */
@font-face { font-family:'Orbitron'; font-style:normal; font-weight:700 900; font-display:swap; src:url(orbitron.woff2) format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:500; font-display:swap; src:url(rajdhani-500.woff2) format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap; src:url(rajdhani-600.woff2) format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:700; font-display:swap; src:url(rajdhani-700.woff2) format('woff2'); }
@font-face { font-family:'Share Tech Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(share-tech-mono.woff2) format('woff2'); }
:root {
  --bg:#05060d; --bg2:#0a0e1f; --panel:rgba(13,18,40,.78); --panel-solid:#0d1228;
  --c1:#00e5ff; --c2:#ff2bd6; --c3:#7c4dff; --ok:#3dffa8;
  --txt:#e9f2ff; --muted:#8f9cc2; --line:rgba(0,229,255,.22);
  --f-display:'Orbitron','Rajdhani',system-ui,sans-serif;
  --f-body:'Rajdhani',system-ui,sans-serif;
  --f-mono:'Share Tech Mono',ui-monospace,monospace;
  --grid:rgba(0,229,255,.10); --glow:0 0 18px rgba(0,229,255,.45);
  /* Blanco puro (16/09): con #f3f5fa se notaba el recorte de las fotos de fondo blanco. */
  --foto:#ffffff;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--txt); font-family:var(--f-body); font-size:16px; }
body { min-height:100vh; overflow-x:hidden; line-height:1.4; }
a { color:inherit; text-decoration:none; }
button, input, select { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--c1); outline-offset:2px; }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--c1); color:#000; padding:8px 12px; }
.skip:focus { left:8px; }
.wrap { position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 16px; }

/* Fondo: resplandores + rejilla en perspectiva + scanlines */
.fx { position:fixed; inset:0; pointer-events:none; z-index:0; }
.fx-glow { background:
  radial-gradient(60vw 40vh at 15% 0%, color-mix(in srgb, var(--c3) 28%, transparent), transparent 70%),
  radial-gradient(50vw 40vh at 95% 10%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%),
  linear-gradient(180deg, var(--bg2), var(--bg) 60%); }
.fx-grid { top:auto; height:55vh; bottom:0; perspective:420px; overflow:hidden; opacity:.9; }
.fx-grid::before { content:""; position:absolute; left:-50%; right:-50%; bottom:-10%; height:160%;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px; transform:rotateX(62deg); transform-origin:bottom; animation:gridmove 6s linear infinite;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%); mask-image:linear-gradient(to top, #000 10%, transparent 85%); }
@keyframes gridmove { from { background-position:0 0; } to { background-position:0 48px; } }
.fx-scan { background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; }

/* Esquinas cortadas reutilizables */
.cut-s { clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }

/* Que la cabecera fija no tape el título al saltar a una sección (en móvil,
   con el buscador en su propia fila, la cabecera es más alta). */
/* 15/09: también en PC, donde el menú de plataformas ya ocupa dos líneas. */
section[id] { scroll-margin-top:175px; }

/* ============ CABECERA ============ */
header.top { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.top-row { display:flex; align-items:center; gap:14px; padding:12px 16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:900; letter-spacing:.06em; line-height:.95; flex:none; }
.brand svg { width:38px; height:38px; filter:drop-shadow(var(--glow)); flex:none; }
.brand-txt { display:flex; flex-direction:column; font-size:18px; }
.w1 { color:var(--txt); }
.w2 { background:linear-gradient(90deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.search { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); padding:4px 4px 4px 14px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.search input { flex:1; min-width:0; background:transparent; border:0; outline:0; font-size:16px; padding:6px 0; }
.search input::placeholder { color:var(--muted); }
.search button { background:transparent; border:0; color:var(--c1); font-family:var(--f-mono); font-size:12px; padding:8px 10px; white-space:nowrap; }
.tg { display:none; align-items:center; gap:8px; padding:11px 16px; font-family:var(--f-display); font-size:12px; letter-spacing:.08em; font-weight:800;
  background:linear-gradient(90deg,var(--c1),var(--c3)); color:#000;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.hdr-log { display:flex; align-items:center; padding:10px 14px; font-family:var(--f-display); font-size:12px; letter-spacing:.08em; font-weight:800;
  color:var(--c2); box-shadow:inset 0 0 0 1px var(--c2);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.hdr-log:hover { background:color-mix(in srgb,var(--c2) 15%, transparent); }
/* Blog: botón junto al buscador en todas las pantallas; en móvil, a la derecha
   del logotipo (el buscador baja a su propia fila). */
@media (min-width:860px) { .tg { display:flex; } }
@media (max-width:640px) { .hdr-log { margin-left:auto; padding:8px 12px; font-size:11px; } }
@media (max-width:640px) { .top-row { gap:10px; padding:10px 16px; } .search { order:3; flex-basis:100%; } }
.platforms { display:flex; gap:8px; overflow-x:auto; padding:0 16px 12px; scrollbar-width:none; }
.platforms::-webkit-scrollbar { display:none; }
/* En PC no hay gesto de deslizar: si no caben, a otra línea en vez de esconderse. */
@media (min-width:860px) { .platforms { flex-wrap:wrap; overflow:visible; } }
.chip { flex:none; display:flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line); background:var(--panel);
  font-family:var(--f-display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:.2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.chip i { font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--c1); }
.chip i:empty { display:none; }
.chip:hover, .chip.on { color:#000; background:var(--c1); border-color:var(--c1); box-shadow:var(--glow); }
.chip:hover i, .chip.on i { color:#000; }
.chip-tarjetas { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%, transparent); }
.chip-tarjetas:hover, .chip-tarjetas.on { background:var(--ok); border-color:var(--ok); }
/* Preventas (16/09): el amarillo de su etiqueta. */
.chip-preventas { color:#ffd23f; border-color:color-mix(in srgb,#ffd23f 45%, transparent); }
.chip-preventas i { color:#ffd23f; }
.chip-preventas:hover, .chip-preventas.on { color:#000; background:#ffd23f; border-color:#ffd23f; box-shadow:0 0 18px color-mix(in srgb,#ffd23f 45%, transparent); }

/* ============ BOTONES Y TÍTULOS ============ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; font-family:var(--f-display); font-weight:800; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; border:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.btn-p { background:linear-gradient(90deg,var(--c1),var(--c3)); color:#000; }
.btn-p:hover { filter:brightness(1.12); }
.btn-s { background:var(--panel); color:var(--txt); box-shadow:inset 0 0 0 1px var(--line); }
.btn-s:hover { box-shadow:inset 0 0 0 1px var(--c1); }
.hl { background:linear-gradient(90deg,var(--c1),var(--c2) 60%,var(--c3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:34px 0 14px; flex-wrap:wrap; }
.sec-title { font-family:var(--f-display); font-weight:900; font-size:clamp(20px,3.4vw,28px); text-transform:uppercase; letter-spacing:.04em; margin:0;
  display:flex; align-items:center; gap:10px; }
.sec-title::before { content:""; width:10px; height:26px; background:linear-gradient(var(--c1),var(--c2)); box-shadow:var(--glow); flex:none; }
.sec-sub { font-family:var(--f-mono); color:var(--muted); font-size:12px; letter-spacing:.08em; }
.lead { color:var(--muted); font-size:19px; font-weight:500; max-width:640px; margin:0 0 20px; }
.page-title { font-family:var(--f-display); font-weight:900; font-size:clamp(26px,5vw,44px); line-height:1.05; text-transform:uppercase; margin:10px 0 10px; }

/* ============ PORTADA: HERO ============ */
.hero { padding:26px 0 10px; display:grid; gap:20px; }
@media (min-width:960px) { .hero { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; padding:50px 0 24px; } }
.eyebrow { font-family:var(--f-mono); color:var(--c1); font-size:13px; letter-spacing:.2em; display:flex; align-items:center; gap:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); animation:pulse 1.6s infinite; flex:none; }
@keyframes pulse { 50% { opacity:.35; } }
.hero h1 { font-family:var(--f-display); font-weight:900; font-size:clamp(30px,6.2vw,62px); line-height:1.02; margin:12px 0 14px; text-transform:uppercase; }
.hero .hl { filter:drop-shadow(0 0 22px color-mix(in srgb, var(--c2) 45%, transparent)); }
.cta-row { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:640px) { .lead { font-size:17px; } }
.side { display:grid; gap:10px; }
.boss { position:relative; display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:center; padding:16px; transition:transform .25s;
  background:linear-gradient(135deg, color-mix(in srgb,var(--c1) 12%, var(--panel-solid)), var(--panel-solid) 55%, color-mix(in srgb,var(--c2) 14%, var(--panel-solid)));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); }
.boss::before { content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(135deg,var(--c1),var(--c2)); pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.boss:hover { transform:translateY(-3px); }
.boss .pic { height:120px; display:grid; place-items:center; background:radial-gradient(circle, #ffffff22, transparent 70%); }
.boss .pic img { max-height:112px; object-fit:contain; filter:drop-shadow(0 10px 16px #000a); }
.boss .lbl { font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--c2); margin-bottom:4px; }
.boss .t { font-weight:700; font-size:17px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.boss .off { position:static; }
.boss-code { margin-top:8px; font-family:var(--f-mono); font-size:12px; color:var(--c2); border:1px dashed var(--c2); padding:5px 8px; display:inline-block; }
.boss-code b { color:var(--txt); }
@media (min-width:960px) { .boss { grid-template-columns:170px minmax(0,1fr); padding:20px; } .boss .pic { height:170px; } .boss .pic img { max-height:160px; } .boss .t { font-size:20px; } }
.hud { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat { background:var(--panel); border:1px solid var(--line); padding:14px 12px 16px; position:relative;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); }
.stat::after { content:""; position:absolute; left:10px; right:10px; bottom:8px; height:2px; background:linear-gradient(90deg,var(--c1),transparent); }
.stat b { display:block; font-family:var(--f-display); font-size:clamp(22px,4.4vw,34px); color:var(--c1); text-shadow:var(--glow); }
.stat span { font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }

/* Top drops: tira deslizable de tarjetas normales con el puesto encima */
.drops { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 250px); gap:14px; overflow-x:auto; padding:6px 2px 10px;
  scroll-snap-type:x mandatory; scrollbar-width:thin; counter-reset:puesto; }
.drops .card { scroll-snap-align:start; counter-increment:puesto; }
/* Puesto en una etiqueta sólida arriba a la izquierda (antes era un número
   grande sobre la foto y la tapaba). */
.drops .card .pic::after { content:"#" counter(puesto); position:absolute; left:6px; top:6px; z-index:2; font-family:var(--f-display); font-weight:900;
  font-size:16px; line-height:1; color:#000; background:linear-gradient(90deg,var(--c1),var(--c2)); padding:6px 9px; pointer-events:none;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }

/* Sección destacada con dos pestañas (fase 4, 17/09): "Lo más visto" (clics
   reales) y "Top drops" (descuento) comparten una sola tira. Los botones hacen
   de título de sección, así que heredan su tipografía; el activo se ve en neón
   y el otro apagado. Sin la barra vertical de .sec-title::before delante (la
   lleva el conjunto, no cada pestaña). */
.dest-tabs { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dest-tab { font:inherit; font-size:clamp(17px,2.9vw,24px); text-transform:uppercase; letter-spacing:.04em;
  background:none; border:0; padding:2px 0; cursor:pointer; color:var(--muted); opacity:.62; transition:.2s;
  border-bottom:2px solid transparent; }
.dest-tab:hover { opacity:.85; color:var(--txt); }
.dest-tab.on { opacity:1; color:var(--txt); border-bottom-color:var(--c1);
  text-shadow:0 0 10px rgba(0,229,255,.5), 0 0 22px rgba(0,229,255,.25); }
@media (max-width:420px) { .dest-tab { font-size:15px; letter-spacing:.02em; } .dest-tabs { gap:8px; } }

/* El puesto de "Lo más visto" en tonos cálidos, para que se distinga de un
   vistazo del de Top drops — una ordena por descuento y la otra por clics
   reales, y en la práctica casi nunca coinciden (0-2 de 8 el 17/09). */
.drops.visto .card .pic::after { background:linear-gradient(90deg,#ff8a00,#ff2d55); color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45); }

/* ============ FILTROS ============ */
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
/* Tiendas en neón con el color de su marca (15/09, donde antes estaba "Con
   cupón"), dentro de un desplegable que abre el botón "Tiendas" (usuario). */
.tool-tiendas b { font-weight:400; display:inline-block; transition:transform .2s; }
.tool-tiendas[aria-expanded="true"] b { transform:rotate(180deg); }
.tool-tiendas.elegida { border-color:var(--t); color:var(--t); text-shadow:0 0 6px color-mix(in srgb,var(--t) 70%, transparent); }
.tiendas { display:flex; gap:8px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); padding:12px; margin-bottom:16px; }
.t-btn { flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; background:#05060dcc; color:var(--t);
  border:1px solid color-mix(in srgb,var(--t) 55%, transparent); font-family:var(--f-display); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; text-shadow:0 0 6px color-mix(in srgb,var(--t) 70%, transparent), 0 0 14px color-mix(in srgb,var(--t) 40%, transparent);
  box-shadow:0 0 8px color-mix(in srgb,var(--t) 22%, transparent), inset 0 0 8px color-mix(in srgb,var(--t) 14%, transparent); transition:.2s;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.t-btn i { font-style:normal; font-family:var(--f-mono); font-size:10.5px; opacity:.75; text-shadow:none; }
.t-btn i:empty { display:none; }
.t-btn:hover { border-color:var(--t); box-shadow:0 0 14px color-mix(in srgb,var(--t) 45%, transparent), inset 0 0 10px color-mix(in srgb,var(--t) 25%, transparent); }
.t-btn.on { background:var(--t); color:#000; text-shadow:none; border-color:var(--t); box-shadow:0 0 18px color-mix(in srgb,var(--t) 60%, transparent); }
.tool { background:var(--panel); border:1px solid var(--line); padding:8px 12px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--txt); }
.tool[aria-pressed="true"], .tool[aria-expanded="true"] { background:var(--c1); color:#000; border-color:var(--c1); }
.tool-clear { border-color:var(--c2); color:var(--c2); }
.filters { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); background:var(--panel); border:1px solid var(--line);
  padding:14px; margin-bottom:16px; }
.f-wide { grid-column:1 / -1; }
.f-box label, .f-label { display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.f-box select, .f-box input { width:100%; background:var(--bg); border:1px solid var(--line); padding:8px 10px; font-size:15px; }
.range { display:flex; align-items:center; gap:6px; }
.range span { color:var(--muted); }
.pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill { border:1px solid var(--line); padding:5px 10px; font-size:14px; font-weight:600; background:var(--bg); }
.pill:hover, .pill.on { border-color:var(--c1); color:var(--c1); box-shadow:inset 0 0 0 1px var(--c1); }

/* ============ TARJETAS ============ */
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:720px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:1080px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.card { position:relative; background:var(--panel); display:flex; flex-direction:column; transition:transform .25s; min-width:0;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); }
.card::before { content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(135deg,var(--c1),transparent 35%,transparent 65%,var(--c2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; transition:.25s; pointer-events:none; z-index:3; }
.card:hover { transform:translateY(-4px); }
.card:hover::before { opacity:1; }
.card-link { position:absolute; inset:0; z-index:1; }
.card-link:focus-visible { outline-offset:-4px; }
/* Foto en un recuadro claro idéntico en todas las tarjetas, con la imagen
   encajada entera dentro (sin recortar): antes cada foto ocupaba lo que
   daba su forma y su resolución, y el usuario veía unas más grandes que
   otras (14/09). */
.card .pic { position:relative; aspect-ratio:1 / .82; margin:8px 8px 0; background:var(--foto); overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%); }
.card .pic img { position:absolute; inset:0; margin:auto; width:86%; height:86%; object-fit:contain; transition:transform .3s; }
.card:hover .pic img { transform:scale(1.04); }
.plat { position:absolute; top:10px; left:10px; z-index:2; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; padding:3px 7px;
  border:1px solid currentColor; background:#000b; color:var(--muted); }
.plat-playstation { color:#5b9bff; } .plat-nintendo { color:#ff5c5c; } .plat-xbox { color:#46e07f; }
.plat-pc { color:#ffb13d; } .plat-retro { color:#c79bff; }
.off { position:absolute; top:8px; right:8px; z-index:2; font-family:var(--f-display); font-weight:900; font-size:13px; color:#000; background:var(--c2); padding:6px 8px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.pic-tags { position:absolute; left:8px; right:8px; bottom:8px; z-index:2; display:flex; flex-wrap:wrap; gap:4px; }
.record, .promo-end-badge, .agotado { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.04em; padding:3px 6px; background:#000c; border:1px solid; }
.record { color:var(--ok); } .promo-end-badge { color:var(--c1); } .agotado { color:#ff6b6b; }
/* Preventa: etiqueta sólida, que se vea de un vistazo (usuario, 14/09). */
.preventa { font-family:var(--f-display); font-weight:900; font-size:11px; letter-spacing:.06em; padding:4px 8px; color:#000; background:#ffd23f;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.is-agotado .pic img, .is-agotado.detail .detail-pic img { filter:grayscale(1) brightness(.6); }
.body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.store { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 6px; min-height:30px; font-family:var(--f-mono);
  font-size:11px; color:var(--muted); letter-spacing:.06em; }
/* Tienda: nombre en neón con el color de su marca (15/09, elegido por el
   usuario frente al logo; antes, logo sobre blanco). */
.store-name { display:inline-flex; align-items:center; padding:4px 10px; font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t, var(--c1)); border:1px solid color-mix(in srgb,var(--t, var(--c1)) 55%, transparent);
  text-shadow:0 0 6px color-mix(in srgb,var(--t, var(--c1)) 70%, transparent), 0 0 14px color-mix(in srgb,var(--t, var(--c1)) 40%, transparent);
  box-shadow:0 0 8px color-mix(in srgb,var(--t, var(--c1)) 22%, transparent), inset 0 0 8px color-mix(in srgb,var(--t, var(--c1)) 14%, transparent);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.store time { white-space:nowrap; }
.title { font-weight:700; font-size:15.5px; line-height:1.18; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:37px; }
.desc { margin:0; color:var(--muted); font-size:13.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rating-row { font-size:13px; color:var(--muted); }
.review-count { opacity:.8; }
.price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
/* En las tarjetas: tachado encima, precio debajo e iconos a la derecha de los
   dos, en todas las pantallas — con el precio y el tachado en fila, en las
   tarjetas estrechas (Top drops en PC, móvil) los iconos saltaban de línea. */
.card .price { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; }
.card .was { grid-row:1; grid-column:1; font-size:13px; line-height:1; }
.card .now { grid-row:2; grid-column:1; }
.card .pack-badge { grid-row:3; grid-column:1 / -1; }
.card .acts { grid-row:1 / 3; grid-column:2; }
.now { font-family:var(--f-display); font-weight:900; font-size:22px; color:var(--c1); text-shadow:var(--glow); }
.was { color:var(--muted); font-size:14px; }
.pack-badge { font-family:var(--f-mono); font-size:11px; color:var(--ok); }
.coupon { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; text-align:left;
  border:1px dashed var(--c2); padding:6px 8px; font-family:var(--f-mono); font-size:12px; color:var(--c2); background:color-mix(in srgb,var(--c2) 8%, transparent); }
.coupon b { color:var(--txt); letter-spacing:.06em; word-break:break-all; }
.coupon-copy { flex:none; }
button.coupon:hover { background:color-mix(in srgb,var(--c2) 18%, transparent); }
.coupon-info { border-style:solid; color:var(--ok); border-color:var(--ok); background:color-mix(in srgb,var(--ok) 8%, transparent); }
/* "Me gusta" y compartir como iconos al final de la línea del precio. */
.acts { position:relative; z-index:2; margin-left:auto; align-self:center; display:inline-flex; gap:6px; }
.like, .share { background:transparent; border:1px solid var(--line); height:32px; min-width:32px; padding:0 8px; font-family:var(--f-mono); font-size:14px;
  color:var(--muted); display:inline-flex; gap:4px; align-items:center; justify-content:center; }
.like-n:empty { display:none; }
.like:hover, .share:hover { color:var(--txt); border-color:var(--c1); }
.like.liked { color:var(--c2); border-color:var(--c2); }
.go { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; font-family:var(--f-display); font-weight:800; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#000; background:linear-gradient(90deg,var(--c1),var(--c3));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
/* Móvil: una oferta por fila, en horizontal como la oferta destacada (foto a
   la izquierda, datos a la derecha). Con dos por fila todo quedaba apretado
   (usuario, 14/09). Solo en las rejillas; la tira de Top drops sigue en vertical. */
@media (max-width:719px) {
  .grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .grid .card { display:grid; grid-template-columns:136px minmax(0,1fr); }
  .grid .card .pic { aspect-ratio:auto; height:auto; min-height:150px; margin:8px 0 8px 8px; }
  .grid .card .body { padding:8px 12px 10px; gap:5px; }
  .grid .card .title { min-height:0; font-size:15.5px; }
  .grid .card .go { padding:8px; font-size:11px; }
  .grid .card .off { top:6px; right:6px; font-size:12px; padding:4px 6px; }
}
@media (max-width:420px) {
  .now { font-size:20px; }
}

.pager { display:flex; justify-content:center; gap:6px; margin:22px 0 6px; flex-wrap:wrap; }
.pager button { min-width:40px; background:var(--panel); border:1px solid var(--line); padding:8px 10px; font-family:var(--f-mono); }
.pager button.on { background:var(--c1); color:#000; border-color:var(--c1); }
.pager button:disabled { opacity:.35; cursor:default; }
.pager .gap { align-self:center; color:var(--muted); }
.empty { grid-column:1 / -1; text-align:center; color:var(--muted); padding:40px 10px; font-size:17px; }
.empty a, .linkish { color:var(--c1); background:none; border:0; padding:0; text-decoration:underline; }

.community { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:36px 0 0; padding:20px 22px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--c3) 22%, var(--panel-solid)), var(--panel-solid)); border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)); }
.community strong { display:block; font-family:var(--f-display); font-size:17px; letter-spacing:.03em; margin-bottom:4px; }
.community span { color:var(--muted); font-weight:500; }

/* Blog (próximamente) */
.blog { display:grid; gap:14px; }
@media (min-width:820px) { .blog { grid-template-columns:1.4fr 1fr 1fr; } }
.post { position:relative; background:var(--panel); border:1px solid var(--line); overflow:hidden; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); }
.post .art { position:absolute; inset:0; opacity:.55; }
.post:nth-child(1) .art { background:conic-gradient(from 210deg at 70% 30%, var(--c3), var(--c2), var(--c1), var(--c3)); filter:blur(30px) saturate(1.3); }
.post:nth-child(2) .art { background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--c1) 35%,transparent) 0 2px, transparent 2px 14px), radial-gradient(circle at 80% 20%, var(--c1), transparent 60%); }
.post:nth-child(3) .art { background:radial-gradient(circle at 20% 80%, var(--c2), transparent 55%), radial-gradient(circle at 90% 10%, var(--c3), transparent 50%); filter:blur(8px); }
.post > *:not(.art) { position:relative; }
.tag { align-self:flex-start; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; padding:3px 8px; background:#000b; color:var(--c1); border:1px solid var(--c1); margin-bottom:8px; }
.post h3 { font-family:var(--f-display); font-size:clamp(16px,2.2vw,21px); margin:0 0 6px; text-transform:uppercase; line-height:1.15; }
.post p { margin:0; color:#ffffffc9; font-weight:500; }
.soon { position:absolute !important; top:12px; right:14px; font-family:var(--f-mono); font-size:10px; color:var(--c2); letter-spacing:.14em; }

/* ============ FICHAS Y LISTADOS ============ */
.crumbs { font-family:var(--f-mono); font-size:12px; color:var(--muted); margin:18px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumbs a { color:var(--c1); }
.list-head { margin-bottom:18px; }
.more { text-align:center; margin:24px 0 0; }
/* Ficha de producto (15/09): al estilo de Chollos Deluxe que pidió el usuario,
   con el neón de la web. Foto y acciones a la izquierda, precio y botón
   partido cupón | ver chollo a la derecha, apartados debajo y lateral con el
   canal y los nuevos chollos. En móvil, barra fija abajo con precio y botón. */
.ficha-wrap { display:grid; gap:18px; margin-top:8px; align-items:start; }
@media (min-width:1100px) { .ficha-wrap { grid-template-columns:minmax(0,1fr) 300px; } }
.ficha { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; background:var(--panel-solid); border:1px solid var(--line); padding:16px;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px)); }
/* Orden en el HTML: foto, acciones/etiquetas, datos. En móvil los datos (precio
   y botón) van justo debajo de la foto y las acciones al final; en PC las
   acciones quedan bajo la foto y los datos ocupan la columna derecha entera. */
.ficha { grid-template-areas:"pic" "info" "extra"; }
@media (min-width:820px) {
  .ficha { grid-template-columns:minmax(240px,320px) minmax(0,1fr); grid-template-areas:"pic info" "extra info"; grid-template-rows:auto 1fr;
    column-gap:28px; row-gap:14px; padding:26px; }
}
.ficha-extra { grid-area:extra; display:grid; gap:14px; align-content:start; }
.detail-pic { grid-area:pic; position:relative; display:grid; place-items:center; aspect-ratio:1 / 1; padding:26px 16px; background:var(--foto); overflow:hidden; }
.detail-pic img { max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:819px) { .detail-pic { aspect-ratio:auto; height:230px; padding:14px; } .detail-pic img { max-height:200px; } }
.ficha.is-agotado .detail-pic img { filter:grayscale(1) brightness(.6); }
.ficha-acts { display:flex; gap:8px; }
.ficha-acts .like, .ficha-acts .share { height:38px; padding:0 12px; font-size:14px; gap:6px; }
.mini-h { font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:6px; margin:0 0 10px; }
.ficha-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ficha-tags a { font-family:var(--f-mono); font-size:12px; color:var(--muted); border:1px solid var(--line); padding:4px 9px; }
.ficha-tags a:hover { color:var(--c1); border-color:var(--c1); }
.ficha-info { grid-area:info; min-width:0; }
.ficha-info h1 { font-family:var(--f-display); font-size:clamp(20px,2.6vw,28px); line-height:1.12; margin:10px 0 12px; text-transform:uppercase; text-wrap:balance; }
.ficha-precio { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:6px 0; }
.ficha-precio .now { font-size:clamp(34px,5vw,44px); line-height:1; }
.ficha-precio .was { font-size:19px; }
.pct { align-self:center; font-family:var(--f-display); font-weight:900; font-size:14px; color:#000; background:var(--c2); padding:6px 9px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.xp { height:8px; background:#ffffff14; margin:12px 0 4px; position:relative; overflow:hidden; max-width:540px; }
.xp i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--c1),var(--c2)); box-shadow:var(--glow); }
.xp-l { font-family:var(--f-mono); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; max-width:540px; }
.ficha-info .coupon { margin:14px 0 0; font-size:13px; padding:9px 10px; max-width:540px; }
.cta { display:flex; align-items:stretch; margin:16px 0 6px; max-width:540px; }
.cta-code { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border:1px dashed var(--c2); border-right:0;
  background:color-mix(in srgb,var(--c2) 8%, transparent); font-family:var(--f-mono); font-size:13px; color:var(--c2); text-align:left;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px); }
.cta-code b { color:var(--txt); font-weight:400; font-size:17px; letter-spacing:.12em; word-break:break-all; }
.cta-code small { font-size:11px; opacity:.85; flex:none; }
.cta-code:hover { background:color-mix(in srgb,var(--c2) 18%, transparent); }
.btn-go { font-size:14px; padding:16px 26px; white-space:nowrap; }
.cta .btn-go { clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }
.cta .btn-go.solo { clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
@media (max-width:519px) {
  .cta { flex-direction:column; }
  .cta-code { border-right:1px dashed var(--c2); border-bottom:0; }
  .cta .btn-go.solo { width:100%; }
}
.fine { font-family:var(--f-mono); font-size:12px; color:var(--muted); margin:6px 0 0; }
.ficha-sep { height:1px; background:linear-gradient(90deg,var(--c1),var(--c2) 50%,transparent); margin:22px 0 18px; opacity:.8; }
.analisis { display:grid; gap:20px; max-width:70ch; }
.analisis h2 { font-family:var(--f-display); font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px;
  display:flex; align-items:center; gap:9px; color:var(--c1); }
.analisis h2 .ic { width:22px; height:22px; display:grid; place-items:center; border:1px solid currentColor; font-family:var(--f-mono); font-size:12px; flex:none; }
.analisis h2.a-ok { color:var(--ok); }
.analisis h2.a-pink { color:var(--c2); }
.analisis h2.a-warn { color:#ffc53d; }
.analisis h2.a-violet { color:#b49bff; }
.analisis .a-titular { font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--txt); text-transform:uppercase;
  border-left:3px solid var(--c1); padding-left:10px; box-shadow:-6px 0 12px -8px var(--c1); }
.analisis p { margin:0; font-size:17px; font-weight:500; color:#dbe5f8; }
.feat { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.feat li { padding-left:18px; position:relative; color:#dbe5f8; font-weight:500; font-size:17px; }
.feat li::before { content:"▸"; position:absolute; left:0; color:var(--c2); }
.specs { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 18px; margin:0; font-size:16px; }
.specs dt { font-family:var(--f-mono); font-size:13px; color:var(--muted); padding-top:2px; }
.specs dd { margin:0; font-weight:600; }
.specs a { color:var(--c1); }
/* Lateral: canal y nuevos chollos (debajo de la ficha en pantallas estrechas). */
.ficha-aside { display:grid; gap:16px; }
@media (min-width:720px) and (max-width:1099px) { .ficha-aside { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.aside-promo { position:relative; padding:20px 18px; overflow:hidden;
  background:linear-gradient(140deg, color-mix(in srgb,var(--c3) 45%, var(--panel-solid)), var(--panel-solid) 55%, color-mix(in srgb,var(--c2) 30%, var(--panel-solid)));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); }
.aside-promo::before { content:""; position:absolute; inset:0; padding:1px; background:linear-gradient(135deg,var(--c1),var(--c2)); pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.aside-promo .lbl { font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--c2); margin:0; }
.aside-promo h2 { font-family:var(--f-display); font-weight:900; font-size:21px; line-height:1.05; text-transform:uppercase; margin:6px 0 8px; }
.aside-promo p { margin:0 0 14px; color:#ffffffc9; font-weight:600; font-size:15px; }
.aside-promo .btn { width:100%; font-size:12px; }
.nuevos { background:var(--panel-solid); border:1px solid var(--line); padding:14px 14px 6px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); }
.nuevo { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-top:1px solid #ffffff10; }
.nuevo:first-of-type { border-top:0; }
.nuevo .th { width:64px; height:64px; background:var(--foto); display:grid; place-items:center; padding:4px; }
.nuevo .th img { max-width:100%; max-height:56px; object-fit:contain; }
.nuevo .t { font-weight:700; font-size:15px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nuevo .p { display:flex; justify-content:space-between; align-items:baseline; margin-top:3px; }
.nuevo .p b { font-family:var(--f-display); font-weight:900; color:var(--c1); font-size:16px; }
.nuevo .p span { font-family:var(--f-mono); font-size:12px; color:var(--c2); }
.nuevo:hover .t { color:var(--c1); }
/* Columna principal: la ficha y, debajo, "Ofertas relacionadas" (15/09). */
.ficha-main { display:grid; gap:26px; min-width:0; }
.rel-wrap .sec-title { margin:0 0 14px; font-size:clamp(18px,2.4vw,24px); }
.rel-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:719px) { .rel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
.rel { display:flex; flex-direction:column; gap:6px; background:var(--panel-solid); border:1px solid var(--line); padding:10px; transition:border-color .2s, transform .2s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); }
.rel:hover { border-color:var(--c1); transform:translateY(-2px); }
.rel-pic { position:relative; aspect-ratio:1 / 1; background:var(--foto); display:grid; place-items:center; overflow:hidden; }
.rel-pic img { max-width:86%; max-height:86%; object-fit:contain; }
.rel-p { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; }
.rel-p b { font-family:var(--f-display); font-weight:900; font-size:19px; color:var(--c1); text-shadow:var(--glow); }
.rel-p s { color:var(--muted); font-size:13px; }
.rel-t { font-weight:700; font-size:15px; line-height:1.18; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rel:hover .rel-t { color:var(--c1); }
.rel-pct { font-family:var(--f-mono); font-size:12px; color:var(--c2); }
.rel-pct:empty { display:none; }
/* Lateral: ofertas con cupón (15/09), mismas filas que "Nuevos chollos" con el
   código en vez del descuento. */
.con-cupon { padding-bottom:12px; }
.cc-code { font-family:var(--f-mono); font-size:12px; color:var(--c2); border:1px dashed color-mix(in srgb,var(--c2) 60%, transparent);
  padding:1px 6px; white-space:nowrap; max-width:60%; overflow:hidden; text-overflow:ellipsis; }
.nuevo .p .cc-code { font-size:11.5px; }
.cup-mas { display:block; margin-top:8px; font-family:var(--f-mono); font-size:12px; color:var(--c1); }
/* Barra fija en móvil con precio y botón: siempre a mano sin bajar a buscarlo. */
.buybar { display:none; }
@media (max-width:819px) {
  .buybar { position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; align-items:center; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 88%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
  .buybar .bb-p { display:grid; line-height:1.05; }
  .buybar .bb-p b { font-family:var(--f-display); font-weight:900; font-size:22px; color:var(--c1); text-shadow:var(--glow); }
  .buybar .bb-p s { font-size:13px; color:var(--muted); }
  .buybar .btn-go { flex:1; padding:14px 10px; font-size:12px; }
  body:has(.buybar) { padding-bottom:80px; }
  body:has(.buybar) .to-top { bottom:92px; }
}
.notice { color:#ff8a8a; font-weight:600; margin:0 0 8px; }
.price-breakdown { border:1px solid var(--line); background:var(--bg); padding:10px 12px; margin:8px 0 12px; font-size:15px; }
.price-breakdown-row { display:flex; justify-content:space-between; color:var(--muted); padding:2px 0; }
.price-breakdown-final { color:var(--ok); font-weight:700; margin-top:6px; }

/* ============ LEGALES Y 404 ============ */
.legal-page { max-width:820px; margin:0 auto; }
.legal-updated { font-family:var(--f-mono); font-size:12px; color:var(--muted); margin:0 0 18px; }
.legal-content { background:var(--panel); border:1px solid var(--line); padding:6px 22px 18px; font-size:17px; font-weight:500; }
.legal-content h2 { font-family:var(--f-display); font-size:17px; letter-spacing:.04em; text-transform:uppercase; color:var(--c1); margin:24px 0 8px; }
.legal-content p, .legal-content li { color:var(--txt); opacity:.9; }
.legal-content a { color:var(--c1); text-decoration:underline; }
.legal-table-wrap { overflow-x:auto; }
.legal-table { width:100%; border-collapse:collapse; font-size:15px; min-width:560px; }
.legal-table th, .legal-table td { border:1px solid var(--line); padding:8px; text-align:left; vertical-align:top; }
.legal-table th { font-family:var(--f-mono); font-size:12px; color:var(--muted); text-transform:uppercase; }
.e404 { text-align:center; padding:60px 0 20px; max-width:620px; margin:0 auto; }
.e404 .code { font-family:var(--f-display); font-weight:900; font-size:clamp(80px,18vw,150px); line-height:1; color:transparent; -webkit-text-stroke:2px var(--c2);
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--c2) 50%, transparent)); }

/* ============ PIE ============ */
.foot { position:relative; z-index:1; margin-top:48px; border-top:1px solid var(--line); padding:28px 0 90px; color:var(--muted); font-size:15px;
  background:color-mix(in srgb, var(--bg) 85%, transparent); }
.foot-grid { display:grid; gap:22px; }
@media (min-width:760px) { .foot-grid { grid-template-columns:1.4fr 1fr 1fr; } }
.foot-brand { font-family:var(--f-display); font-weight:900; color:var(--txt); font-size:18px; letter-spacing:.06em; margin-bottom:6px; }
.foot-brand span { color:var(--c1); }
.foot p { margin:0 0 12px; }
.foot h4 { font-family:var(--f-display); color:var(--txt); font-size:13px; letter-spacing:.12em; margin:0 0 10px; }
.foot-grid a:not(.btn) { display:block; padding:3px 0; }
/* Enlace dentro de un párrafo del pie (la web hermana): en línea con el texto,
   si no la regla de arriba lo saca a su propio renglón y deja el punto suelto. */
.foot-grid p a:not(.btn) { display:inline; padding:0; }
.foot-grid a:not(.btn):hover { color:var(--c1); }
.foot-legal { margin-top:20px !important; font-size:12px; font-family:var(--f-mono); }

/* ============ FLOTANTES ============ */
.to-top { position:fixed; right:14px; bottom:14px; z-index:60; width:44px; height:44px; background:var(--panel-solid); border:1px solid var(--c1); color:var(--c1);
  opacity:0; pointer-events:none; transition:opacity .25s; }
.to-top.show { opacity:1; pointer-events:auto; }
.share-backdrop { position:fixed; inset:0; z-index:70; }
.share-pop { position:absolute; z-index:71; width:240px; display:flex; flex-direction:column; background:var(--panel-solid); border:1px solid var(--c1); box-shadow:var(--glow); padding:6px; }
.share-pop button { background:transparent; border:0; text-align:left; padding:9px 10px; font-weight:600; }
.share-pop button:hover { background:#ffffff12; color:var(--c1); }
.share-title { font-family:var(--f-mono); font-size:11px; color:var(--muted); padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.share-msg { font-family:var(--f-mono); font-size:11px; color:var(--ok); padding:0 10px 4px; }
.share-msg:empty { display:none; }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(140px); z-index:99; background:#000e; border:1px solid var(--c1);
  padding:12px 16px; font-family:var(--f-mono); font-size:13px; transition:transform .3s; box-shadow:var(--glow); max-width:92vw; text-align:center; }
.toast.show { transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fx-grid::before, .dot { animation:none; }
  .card, .card .pic img, .boss { transition:none; }
}

/* ============ SEO (15/09) ============ */
/* Botón "Ficha" junto a "Ver oferta" en las tarjetas con ficha (opción B del
   usuario). Por encima del enlace que cubre la tarjeta, que sigue a la tienda. */
.go-split { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px; }
.go-split .go { margin:0; white-space:nowrap; }
.go-split .go-f { position:relative; z-index:2; color:var(--c1); background:transparent; border:1px solid var(--c1); padding-inline:12px; }
.go-split .go-f:hover, .go-split .go-f:focus-visible { background:color-mix(in srgb, var(--c1) 16%, transparent); }
@media (max-width:720px) { .go-split .go { font-size:10.5px; letter-spacing:.06em; padding-inline:8px; } }

/* Texto propio de cada página de plataforma, debajo de las ofertas. */
.seo-txt { margin:34px 0 10px; padding:22px 24px; background:var(--panel); border:1px solid var(--line); max-width:900px; }
.seo-txt h2 { margin:0 0 12px; font-size:clamp(18px,3.4vw,24px); }
.seo-txt p { margin:0 0 12px; color:#c9d4ee; font-size:17px; line-height:1.5; }
.seo-txt .seo-now { font-family:var(--f-mono); font-size:14px; color:var(--muted); border-left:2px solid var(--c1); padding-left:10px; }
.seo-txt .seo-now b { color:var(--c1); font-weight:400; }
.seo-txt .seo-tip { margin:0; color:var(--txt); }
@media (max-width:640px) { .seo-txt { padding:16px; } .seo-txt p { font-size:16px; } }

/* Índice completo de fichas al pie de cada plataforma (17/09). Resuelve las 133
   fichas sin ningún enlace interno: enlaces de texto, ~90 bytes cada uno, en vez
   de tarjetas de ~1,5 KB. Desplegable y cerrado porque a 390 px los 203 enlaces
   de PlayStation medían 7,5 pantallas; Google los sigue igual estando en el HTML. */
.ix { margin:22px 0 10px; padding:18px 24px; background:var(--panel); border:1px solid var(--line); }
.ix > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; }
.ix > summary::-webkit-details-marker { display:none; }
.ix > summary::after { content:"▾"; margin-left:auto; color:var(--c1); font-size:18px; transition:transform .18s; }
.ix[open] > summary::after { transform:rotate(180deg); }
.ix > summary:focus-visible { outline:2px solid var(--c1); outline-offset:3px; }
.ix-h { margin:0; font-size:clamp(16px,3vw,21px); font-weight:600; }
.ix .ix-n { font-family:var(--f-mono); font-size:13px; color:var(--c1); border:1px solid var(--line); padding:1px 8px; margin-left:8px; vertical-align:middle; }
.ix .ix-lead { margin:14px 0; color:var(--muted); font-size:15px; }
.ix-list { columns:3; column-gap:28px; margin:0; padding:0; list-style:none; }
.ix-list li { break-inside:avoid; margin:0 0 6px; font-size:14.5px; line-height:1.35; }
.ix-list a { color:#c9d4ee; text-decoration:none; border-bottom:1px solid transparent;
  /* Recorte SOLO visual: el texto completo sigue en el HTML, que es el que lee
     Google como texto del enlace. Sin esto, un titulo largo ocupaba 4 lineas. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ix-list a:hover, .ix-list a:focus { color:var(--c1); border-bottom-color:var(--c1); }
.ix-off { font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-left:6px; text-transform:uppercase; letter-spacing:.4px; }
@media (max-width:1100px) { .ix-list { columns:2; } }
@media (max-width:640px) { .ix { padding:14px 16px; } .ix-list { columns:2; column-gap:16px; } .ix-list li { font-size:13px; } }
/* En la tira de Top drops las tarjetas son estrechas: botones más compactos y sin emoji en FICHA. */
.drops .go-split { gap:4px; }
.drops .go-split .go { font-size:10px; letter-spacing:.03em; padding-inline:6px; gap:4px; }
.drops .go-split .go-ic { display:none; }

/* Ficha en preventa (16/09): franja con la fecha de salida junto al precio. */
.preventa-aviso { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:10px 0 14px; padding:10px 14px; color:#ffd23f;
  border:1px solid color-mix(in srgb,#ffd23f 60%, transparent); background:color-mix(in srgb,#ffd23f 9%, transparent);
  box-shadow:0 0 14px color-mix(in srgb,#ffd23f 18%, transparent); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.preventa-aviso b { font-family:var(--f-display); font-weight:900; letter-spacing:.06em; }
.preventa-aviso span { color:var(--txt); }
.preventa-aviso strong { color:#ffd23f; }
.preventa-aviso .pv-nota { flex-basis:100%; font-family:var(--f-mono); font-size:12px; color:var(--muted); }
/* Etiqueta de preventa en una línea (16/09: en el móvil ocupaba tres y tapaba
   media foto); más pequeña en pantallas estrechas para que quepa en la foto. */
.preventa { white-space:nowrap; }
/* Medido en 360 px (foto de 136 px): Orbitron a 9 px ocupaba 132 px y se salía;
   a 8 px sin espaciado, 116 px, que caben pegando las etiquetas a 4 px del borde. */
@media (max-width:480px) {
  .preventa { font-size:8px; letter-spacing:0; padding:3px 5px; }
  .grid .card .pic-tags { left:4px; right:4px; bottom:4px; }
}

/* ============ AVISO DE COOKIES (17/09) ============ */
/* Solo se pinta si cookie-consent.js tiene GA_ID (ver cholloconsolas/web.py):
   sin analítica no hay banner. Por encima de la barra fija de compra de la
   ficha en móvil (.buybar, z-index 45) y del botón de volver arriba (60): si
   no, el aviso quedaría debajo y no se podría cerrar. */
.cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:200; display:none; gap:14px 22px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--panel-solid) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--c1); box-shadow:0 -6px 30px rgba(0,229,255,.18); }
.cookie-banner.visible { display:flex; }
.cookie-banner p { margin:0; flex:1 1 380px; min-width:0; font-size:15px; color:#c9d4ee; line-height:1.45; }
.cookie-banner p a { color:var(--c1); text-decoration:underline; }
.cookie-banner-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.cc-btn-text, .cc-btn-ghost, .cc-btn-solid, .cc-btn-outline { font-family:var(--f-display); font-weight:800; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; padding:11px 16px; border:1px solid transparent; background:transparent; color:var(--txt); transition:.2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.cc-btn-text { color:var(--muted); padding-inline:10px; }
.cc-btn-text:hover { color:var(--c1); }
.cc-btn-ghost, .cc-btn-outline { border-color:var(--line); color:var(--txt); background:var(--panel); }
.cc-btn-ghost:hover, .cc-btn-outline:hover { border-color:var(--c1); color:var(--c1); }
.cc-btn-solid { background:linear-gradient(90deg,var(--c1),var(--c3)); color:#000; }
.cc-btn-solid:hover { filter:brightness(1.12); }

.cookie-modal-backdrop { position:fixed; inset:0; z-index:210; display:none; background:rgba(2,4,12,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cookie-modal-backdrop.visible { display:block; }
.cookie-modal { position:fixed; z-index:211; left:50%; top:50%; transform:translate(-50%,-50%); display:none; width:min(620px, calc(100vw - 32px));
  max-height:min(86vh, 720px); overflow-y:auto; padding:22px 24px 24px; background:var(--panel-solid); border:1px solid var(--c1); box-shadow:var(--glow); }
.cookie-modal.visible { display:block; }
.cookie-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cookie-modal-head h2 { margin:0; font-family:var(--f-display); font-weight:900; font-size:clamp(17px,3vw,21px); letter-spacing:.04em; }
.cc-modal-close { background:transparent; border:1px solid var(--line); color:var(--muted); width:32px; height:32px; flex:none; font-size:14px; }
.cc-modal-close:hover { border-color:var(--c2); color:var(--c2); }
.cookie-modal-intro { margin:0 0 18px; color:var(--muted); font-size:15px; }
.cookie-modal-intro a { color:var(--c1); text-decoration:underline; }
.cookie-category { padding:14px 16px; margin-bottom:12px; background:var(--panel); border:1px solid var(--line); }
.cookie-category-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cookie-category-name { font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt); }
.cookie-category-desc { margin:8px 0 0; color:var(--muted); font-size:14.5px; line-height:1.45; }
/* Interruptor: la casilla real se queda debajo (accesible al teclado y a los
   lectores de pantalla) y se pinta la pista encima. */
.cookie-toggle { position:relative; flex:none; display:inline-flex; cursor:pointer; }
.cookie-toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.cookie-toggle input:disabled { cursor:default; }
.cookie-toggle-track { display:block; width:46px; height:24px; background:#ffffff14; border:1px solid var(--line); transition:.2s; }
.cookie-toggle-knob { display:block; width:16px; height:16px; margin:3px; background:var(--muted); transition:.2s; }
.cookie-toggle input:checked + .cookie-toggle-track { background:color-mix(in srgb,var(--c1) 22%, transparent); border-color:var(--c1); box-shadow:var(--glow); }
.cookie-toggle input:checked + .cookie-toggle-track .cookie-toggle-knob { background:var(--c1); transform:translateX(22px); }
.cookie-toggle input:focus-visible + .cookie-toggle-track { outline:2px solid var(--c1); outline-offset:2px; }
.cookie-modal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-top:18px; }
/* Medido a 1440 px: con la sangría y el espaciado de los demás botones los tres
   suman 586 px y "Aceptar todas" se iba sola a una segunda fila (el modal deja
   572). Con esto miden ~537 y caben en una. */
.cookie-modal-actions button { padding-inline:11px; letter-spacing:.05em; }
body.cc-modal-open { overflow:hidden; }
/* Enlace del pie para volver a abrir el panel: se ve igual que los demás. */
.foot-cc { display:block; padding:3px 0; background:transparent; border:0; color:inherit; font-size:inherit; text-align:left; }
.foot-cc:hover { color:var(--c1); }

@media (max-width:640px) {
  .cookie-banner { padding:14px 16px calc(14px + env(safe-area-inset-bottom)); gap:10px; }
  .cookie-banner p { font-size:14px; flex-basis:100%; }
  .cookie-banner-actions { width:100%; }
  .cookie-banner-actions .cc-btn-ghost, .cookie-banner-actions .cc-btn-solid { flex:1 1 0; }
  .cookie-modal { padding:18px 16px 20px; }
  .cookie-modal-actions .cc-btn-outline, .cookie-modal-actions .cc-btn-solid { flex:1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-toggle-track, .cookie-toggle-knob { transition:none; }
}