/* ---- tokens de MARCA (assets/BRANDBOOK.md del repo palespana: bandera roja y
   gualda sobre carbon; Anton display, Archivo UI, IBM Plex Mono para datos) ---- */
:root{--bg:#0E0E10;--surface:#141417;--card:#161619;--card2:#1c1c21;--line:#26262B;
--line2:#3A3A42;--txt:#ECECED;--muted:#A9A9B0;--faint:#77777E;
--rojo:#E63946;--rojo2:#D81E2F;--acc:#F5C518;--acc2:#D4A017;--acc-ink:#191204;
--glow:rgba(230,57,70,.38);--ok:#7ED0AA;--res:#c495f2;--imp:#E8C65A;--r:16px;
--disp:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--body:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
--sh:0 1px 2px rgba(0,0,0,.5),0 22px 50px -28px rgba(0,0,0,.8)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);background:var(--bg);color:var(--txt);
line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit}
.ico{display:none}/* sin emojis de seccion: la tipografia manda */
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
/* ---- cabecera ---- */
.top{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(13,13,15,.85);
border-bottom:1px solid rgba(39,39,46,.8)}
.top-in{position:relative;max-width:1060px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:100px;width:auto;display:block;transition:transform .2s}
.brand:hover img{transform:scale(1.04)}
.topnav{margin-left:auto;display:flex;gap:4px}
.topnav a{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
text-decoration:none;padding:10px 16px;border-radius:99px;white-space:nowrap;transition:color .15s,background .15s}
.topnav a:hover{color:var(--txt);background:var(--card2)}
/* hamburguesa (CSS puro, patron checkbox): visible en movil, rayitas -> X */
.navchk{position:absolute;left:-9999px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:12px;border:1px solid var(--line2);
cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .15s}
.burger:hover{border-color:var(--acc)}
.burger span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px;
transition:transform .22s,opacity .18s}
.navchk:checked~.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navchk:checked~.burger span:nth-child(2){opacity:0}
.navchk:checked~.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
.brand img{height:74px}
.burger{display:flex}
.topnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
background:rgba(13,13,15,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2);
padding:8px 14px 14px}
.navchk:checked~.topnav{display:flex}
.topnav a{padding:15px 12px;font-size:14px;border-radius:12px;border-bottom:1px solid var(--line)}
.topnav a:last-child{border-bottom:0}}
main{max-width:1060px;margin:0 auto;padding:0 22px 60px}
/* ---- migas ---- */
.bc{font-size:12px;color:var(--faint);padding:18px 0 0}
.bc a{color:var(--faint);text-decoration:none;transition:color .15s}.bc a:hover{color:var(--acc)}
.bc span{color:var(--muted)}
/* ---- hero cinematografico: la propia caratula, desenfocada, como telon ---- */
.hero{position:relative;display:grid;grid-template-columns:330px 1fr;gap:38px;align-items:center;
margin:14px 0 30px;padding:34px 30px;border-radius:24px;overflow:hidden;isolation:isolate;
background:var(--surface);border:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:-40%;z-index:-1;background-image:var(--cv);
background-size:cover;background-position:center;filter:blur(70px) saturate(1.25) brightness(.55);opacity:.5}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,rgba(13,13,15,.88) 20%,rgba(13,13,15,.55) 60%,rgba(13,13,15,.75))}
.cover{aspect-ratio:3/4;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -18px rgba(0,0,0,.9);
background:var(--card);transition:box-shadow .3s,translate .3s}
.cover:hover{box-shadow:0 30px 70px -16px rgba(0,0,0,.95);translate:0 -3px}
/* SIN transform/transition en el IMG: con ellos Chrome lo pasa a capa de GPU y lo
   reduce con el filtrado rapido sin mipmaps -> caratula empastada aunque el fichero
   sea nitido. El hover se anima en el contenedor, no en la imagen. */
.cover img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:high-quality}
/* clic para ampliar (CSS puro, patron checkbox como el menu movil) */
.cover label{cursor:zoom-in;display:block;height:100%;position:relative}
.cover label::after{content:"🔍";position:absolute;right:10px;bottom:10px;width:34px;height:34px;
display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:99px;
background:rgba(14,14,16,.72);border:1px solid rgba(255,255,255,.18)}
.zoomchk{position:absolute;left:-9999px}
.zoombox{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
padding:26px;background:rgba(8,8,10,.93);cursor:zoom-out}
.zoomchk:checked~.zoombox{display:flex}
.zoombox img{max-width:94vw;max-height:94vh;width:auto;height:auto;border-radius:12px;
box-shadow:0 30px 90px rgba(0,0,0,.9);image-rendering:high-quality}
h1{margin:0 0 10px;font-family:var(--disp);font-size:clamp(26px,3.8vw,38px);line-height:1.1;
font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.plat{display:inline-block;font-family:var(--mono);background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.35);
color:var(--acc);font-size:11.5px;font-weight:600;letter-spacing:.1em;padding:4px 12px;border-radius:8px;
vertical-align:10px;margin-left:12px}
.meta{font-family:var(--mono);color:var(--muted);font-size:12.5px;margin-bottom:22px}
/* ---- CTA: pildora ROJA solida (brandbook: CTA principal rojo, alto 48-52) ---- */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--rojo);
border:0;color:#fff;border-radius:999px;text-decoration:none;min-height:52px;
padding:10px 30px;box-shadow:0 0 34px var(--glow);
transition:box-shadow .18s,background .15s,transform .12s}
.cta:hover{background:var(--rojo2);box-shadow:0 0 46px var(--glow)}
.cta:active{transform:scale(.96)}
.cta .cta-t{font-size:15px;font-weight:700;color:#fff}
.cta .cta-p{font-family:var(--disp);font-weight:800;font-size:20px;color:#fff;font-variant-numeric:tabular-nums}
/* logo de color dentro del boton rojo: pastilla blanca para que respire y se lea */
.cta .slogo{min-width:0;background:#fff;border-radius:8px;padding:4px 9px}
.cta .slogo img{height:15px;max-width:84px}
.cta .slogo img.gr{height:20px}
.minfire{display:inline-flex;align-items:center;gap:6px;margin-left:14px;color:var(--ok);font-weight:800;font-size:13px;
letter-spacing:.02em}
/* ---- tiles ---- */
.tiles{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.tile{background:rgba(23,23,27,.72);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;
padding:12px 18px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);min-width:128px;
transition:border-color .15s}
.tile:hover{border-color:#3a3a44}
.tile b{display:block;font-family:var(--disp);font-size:19px;letter-spacing:0;text-transform:none;
color:var(--txt);margin:4px 0 1px;font-variant-numeric:tabular-nums}
/* ---- resumen (el parrafo citable) ---- */
.resumen{margin:0 0 36px;background:var(--card);border:1px solid var(--line);
border-left:3px solid var(--acc);border-radius:6px var(--r) var(--r) 6px;padding:16px 20px;font-size:14.5px;color:#dcdce2}
.resumen p{margin:0 0 13px}.resumen p:last-child{margin:0}
/* ---- secciones ---- */
section{margin-bottom:44px}
h2{font-family:var(--disp);font-size:clamp(19px,2.3vw,24px);font-weight:800;letter-spacing:-.01em;
margin:0 0 16px;display:flex;align-items:center;gap:9px}
/* ---- tabla de tiendas ---- */
.tblwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
table{width:100%;border-collapse:collapse}
caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
th{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);text-align:left;
padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
td{padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
tbody tr{transition:background .15s}
tbody tr td:first-child{box-shadow:inset 0 0 0 0 var(--rojo);transition:box-shadow .18s}
tbody tr:hover{background:rgba(255,255,255,.03)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--rojo)}
tbody tr:hover .ir{border-color:var(--rojo);background:var(--rojo);color:#fff;transform:translateY(-1px)}
tr:last-child td{border-bottom:0}
tr.best{background:rgba(245,197,24,.055)}tr.best:hover{background:rgba(245,197,24,.085)}
.tienda{display:flex;align-items:center;gap:14px;min-width:0}
/* logos EN COLOR, sin caja, a lo ancho (decision de Oriol) */
.slogo{flex:0 0 auto;display:flex;align-items:center;min-width:96px}
.slogo img{height:22px;width:auto;max-width:112px;object-fit:contain;display:block;
transition:transform .18s cubic-bezier(.2,.7,.3,1.4)}
.slogo img.gr{height:32px}
tbody tr:hover .slogo img{transform:scale(1.1)}
/* el nombre de tienda vive en el alt del logo (sin texto oculto) */
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.badge{font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 8px;letter-spacing:.3px}
.b-best{background:rgba(255,197,61,.16);color:var(--acc)}.b-res{background:rgba(168,85,247,.16);color:var(--res)}
.b-of{background:rgba(63,217,104,.13);color:var(--ok)}.b-imp{background:rgba(255,159,10,.13);color:var(--imp)}
.old{display:block;color:var(--faint);text-decoration:line-through;font-size:12px;line-height:1.2}
.pr{font-family:var(--disp);font-weight:800;font-size:17px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ir{display:inline-block;background:var(--card2);border:1px solid var(--line);border-radius:10px;
padding:8px 14px;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;
transition:border-color .15s,color .15s,background .15s,transform .15s}
.ir:hover{border-color:var(--rojo);background:var(--rojo);color:#fff;transform:translateY(-1px)}
.ir:active{transform:scale(.95)}
/* ---- grafico ---- */
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.chart svg{width:100%;height:auto;display:block}
.serie{transition:opacity .15s}
.chart svg:hover .serie:not(:hover){opacity:.22}
.serie:hover .lnp{stroke-width:2.8}
.lnh{fill:none;stroke-width:6;stroke-opacity:.14;stroke-linejoin:round}
.lnp{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .15s}
.minl{stroke:var(--ok);stroke-width:1.4;stroke-dasharray:5 4}
.mint{fill:var(--ok);font-size:10.5px;font-weight:700}.ax{fill:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.capt{color:var(--faint);font-size:12.5px;margin-top:10px}
/* ---- fotos ---- */
.fotos{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory}
.fotos img{height:132px;border-radius:12px;display:block;scroll-snap-align:start;
box-shadow:var(--sh);image-rendering:high-quality}
/* ---- twin / relacionados ---- */
.twin{display:flex;align-items:center;justify-content:space-between;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:15px 19px;
text-decoration:none;transition:border-color .15s,transform .15s}
.twin:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 12px 30px -14px rgba(245,197,24,.25)}
.twin b{color:var(--acc)}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.rcard{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
border-radius:14px;padding:10px 13px;text-decoration:none;transition:border-color .15s,transform .15s}
.rcard:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 12px 30px -14px rgba(245,197,24,.25)}
.rcard img{width:46px;height:60px;object-fit:cover;border-radius:8px;background:var(--card2);flex:0 0 46px}
.rcard .t{font-size:13.5px;font-weight:600;line-height:1.3}
.rcard .p{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:14px;white-space:nowrap;color:var(--acc);font-variant-numeric:tabular-nums}
/* ---- FAQ ---- */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;transition:border-color .15s}
details:hover{border-color:#333845}details[open]{border-color:#3a3020}
summary{font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
summary::after{content:"+";color:var(--acc);font-size:18px;font-weight:600;transition:transform .18s}
details[open] summary::after{transform:rotate(45deg)}
summary::-webkit-details-marker{display:none}
details p{color:#cfd2da;font-size:13.5px;margin:10px 0 2px;line-height:1.65}
summary h3{display:inline;font-family:var(--body);font-size:14.5px;font-weight:700;margin:0;letter-spacing:0}
.prosa{color:#d3d5db;font-size:14.5px;line-height:1.75;margin:0 0 12px;max-width:72ch}
/* ---- paginas de navegacion (inicio / hubs / ofertas) ---- */
.homehero{padding:34px 0 10px}
.homehero h1{font-size:clamp(28px,4vw,42px);margin:0 0 12px}
.homehero p{color:var(--muted);max-width:62ch;font-size:15.5px;line-height:1.7}
.botones{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 10px}
.btn2{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line2);
border-radius:999px;padding:12px 24px;font-weight:700;font-size:14px;text-decoration:none;
transition:border-color .15s,transform .15s}
.btn2:hover{border-color:var(--acc);transform:translateY(-2px)}
.btn2.rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn2.rojo:hover{background:var(--rojo2)}
.oldp{color:var(--faint);text-decoration:line-through;font-size:12px;margin-right:6px}
.pct{background:rgba(63,217,104,.13);color:var(--ok);font-weight:800;font-size:12px;border-radius:8px;padding:2px 7px;margin-left:6px;white-space:nowrap}
.oshopb{font-size:10.5px;font-weight:800;color:#fff;border-radius:7px;padding:2px 7px;letter-spacing:.03em}
/* tres columnas de la portada (verticales, titulo con barra de color propia) */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:6px 0 44px}
.colt{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
margin:0 0 14px;padding-left:12px;border-left:3px solid var(--ct,var(--acc))}
.vlist{display:flex;flex-direction:column;gap:12px}
.vcard{position:relative;display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
border-radius:14px;padding:12px;text-decoration:none;transition:border-color .15s,transform .15s}
.vcard:hover{border-color:var(--acc);transform:translateY(-2px)}
/* medallas de podio: SVG elaborado (estrias + laurel + relieve), ver _pg_medallas_svg */
.medal{position:absolute;top:5px;left:5px;z-index:1;width:32px;height:32px;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.65));transition:transform .18s cubic-bezier(.2,.7,.3,1.4)}
.vcard:hover .medal{transform:scale(1.12) rotate(-6deg)}
.vcard img{width:76px;height:98px;object-fit:cover;border-radius:9px;background:var(--card2);flex:0 0 76px}
.vinfo{display:flex;flex-direction:column;gap:3px;min-width:0;justify-content:center}
.vplat{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.06em}
.vtit{font-weight:700;font-size:14px;line-height:1.3}
.vsub{font-size:11.5px;color:var(--ok);font-weight:700}
.vprice{font-family:var(--disp);font-weight:800;font-size:15.5px;color:var(--acc);margin-top:2px}
@media(max-width:900px){.tres{grid-template-columns:1fr}}
/* tarjetas de bajadas: misma caratula 76x98 que las columnas + 3 precios de referencia */
.bajas{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.ocard2 .vinfo{gap:4px;flex:1}
.obaja{display:flex;align-items:center;gap:7px;font-size:12.5px;flex-wrap:wrap}
.onow{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--acc)}
.ptres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:5px;
border-top:1px solid var(--line);padding-top:7px}
.p3{display:flex;flex-direction:column;gap:1px;min-width:0}
.p3l{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.04em;white-space:nowrap}
.p3 b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.azlist{columns:3;column-gap:30px;font-size:13.5px}
.azlist a{display:block;color:var(--muted);text-decoration:none;padding:3px 0;break-inside:avoid}
.azlist a:hover{color:var(--acc)}
.azlist h3{font-size:15px;color:var(--acc);margin:12px 0 5px;break-inside:avoid}
@media(max-width:700px){.azlist{columns:1}}
/* ---- pie ---- */
footer{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{max-width:1000px;margin:0 auto;padding:22px 20px 44px;color:var(--muted);font-size:12.5px;line-height:1.8}
footer a{color:var(--acc);text-decoration:none}footer a:hover{text-decoration:underline}
/* ---- movil ---- */
@media(max-width:700px){
.hero{grid-template-columns:1fr;gap:18px;padding:22px 18px}.cover{max-width:200px}
main{padding:20px 14px 44px}
.cta{width:100%;justify-content:center}
.minfire{margin:10px 0 0;display:flex}
td,th{padding:11px 10px}.slogo{min-width:76px}
.slogo img{height:18px;max-width:86px}.ir{padding:7px 10px;font-size:12px}
.sname{font-size:13.5px}.pr{font-size:15px}}