/* Glaiss — sistema visual v2. Catálogo de óptica: papel claro, tinta negra,
   un solo acento de acción, esquinas rectas y rejilla de 1px en vez de tarjetas flotantes. */
:root{
  color-scheme:light;
  --paper:#F4F5F6;
  --surface:#FFFFFF;
  --surface-2:#EDEFF1;
  --ink:#101214;
  --ink-2:#3A4148;
  --muted:#6A727A;
  --line:#E0E4E7;
  --line-2:#C9CFD4;
  --accent:#1741C4;
  --accent-ink:#12379F;
  --accent-wash:#E8EDFB;
  --good:#0F6B45;
  --good-wash:#E3F1EA;
  --warn:#8F5406;
  --warn-wash:#F8EEDD;
  --bad:#A3241C;
  --bad-wash:#F8E7E5;
  --tint:#EAECEF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
h1,h2,h3,.display{font-family:"Archivo",system-ui,sans-serif; font-weight:600; letter-spacing:-.022em; margin:0; text-wrap:balance}
h1{font-size:clamp(28px,4vw,42px); line-height:1.05}
h2{font-size:clamp(20px,2.4vw,26px); line-height:1.15}
h3{font-size:17px; letter-spacing:-.015em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---------- cabecera ---------- */
.site-head{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line)}
.site-head .row{display:flex; align-items:center; gap:26px; height:58px}
.brand{font-family:"Archivo",sans-serif; font-weight:700; font-size:21px; letter-spacing:-.04em; text-decoration:none}
.brand i{font-style:normal; color:var(--accent)}
.site-head nav{display:flex; gap:20px; align-items:center; margin-left:auto; font-size:14px}
.site-head nav a{color:var(--ink-2); text-decoration:none}
.site-head nav a:hover{color:var(--ink)}
.lang{display:flex; border:1px solid var(--line-2); }
.lang a{padding:2px 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--muted)}
.lang a[aria-current]{background:var(--ink); color:var(--surface)}

main{padding:0 0 70px}
.disclosure{font-size:13px; color:var(--muted); padding:9px 0; border-bottom:1px solid var(--line)}

/* ---------- portada ---------- */
.hero{padding:46px 0 30px; border-bottom:1px solid var(--line)}
.hero p{margin:12px 0 0; max-width:56ch; color:var(--ink-2); font-size:17px}

/* franja de marcas */
.brands{display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin-bottom:30px}
.brands a{
  flex:1 1 auto; min-width:126px; padding:16px 12px; text-align:center; text-decoration:none;
  border-right:1px solid var(--line); color:var(--muted);
  font-family:"Archivo",sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.07em; text-transform:uppercase; transition:color .12s, background .12s;
}
.brands a:last-child{border-right:none}
.brands a:hover,.brands a.on{color:var(--ink); background:var(--surface)}
.brands a small{display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.06em; color:var(--muted); margin-top:3px; text-transform:none}

/* ---------- catálogo ---------- */
.cat{display:grid; grid-template-columns:212px minmax(0,1fr); gap:32px; align-items:start; padding-top:26px}
@media (max-width:880px){.cat{grid-template-columns:1fr}}
.rail{position:sticky; top:76px; font-size:14px}
.rail h3{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-weight:500; margin:22px 0 9px}
.rail h3:first-child{margin-top:0}
.rail label{display:flex; gap:9px; align-items:flex-start; padding:4px 0; cursor:pointer; color:var(--ink-2)}
.rail label:hover{color:var(--ink)}
.rail input{margin:3px 0 0; accent-color:var(--accent); flex:none}
.rail .n{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted)}
.rail .reset{margin-top:20px; background:none; border:none; padding:0; font-size:13px; color:var(--accent-ink); text-decoration:underline; cursor:pointer}

.bar{display:flex; align-items:baseline; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:-1px}
.bar .count{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted)}
.bar select{margin-left:auto; font:inherit; font-size:13.5px; padding:5px 8px; background:var(--surface); border:1px solid var(--line-2); color:var(--ink)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.tile{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; position:relative; transition:background .12s;
}
.tile:hover{background:var(--surface-2)}
.tile .shot{aspect-ratio:4/3; background:var(--surface-2); display:grid; place-items:center; padding:14px; overflow:hidden}
.tile .shot img{width:100%; height:100%; object-fit:contain}
.ph{display:grid; place-items:center; gap:6px; text-align:center; color:var(--muted)}
.ph .pn{font-family:"Archivo",sans-serif; font-size:14px; font-weight:600; color:var(--line-2); letter-spacing:-.01em}
.ph .pt{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--line-2)}
.tile .body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:5px; flex:1}
.tile .bn{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.tile h3{font-size:17.5px}
.tile .sum{font-size:13.5px; color:var(--muted); line-height:1.45; margin:2px 0 0}
.tile .foot{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px}
.score-chip{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500; padding:2px 7px; background:var(--ink); color:var(--surface)}
.tile .qv{
  margin-left:auto; font-size:12.5px; color:var(--accent-ink); background:none; border:none;
  cursor:pointer; text-decoration:underline; padding:0;
}
.flag{position:absolute; top:0; left:0; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px}
.flag.good{background:var(--good-wash); color:var(--good)}
.flag.bad{background:var(--bad-wash); color:var(--bad)}

.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line-2); padding:1px 6px}
.tag.good{color:var(--good); border-color:var(--good); background:var(--good-wash)}
.tag.warn{color:var(--warn); border-color:var(--warn); background:var(--warn-wash)}
.tag.bad{color:var(--bad); border-color:var(--bad); background:var(--bad-wash)}
.tag.acc{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-wash)}

.empty{padding:44px 0; color:var(--muted)}

/* ---------- vista rápida ---------- */
dialog.qvw{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  padding:0; max-width:660px; width:calc(100% - 32px); box-shadow:0 24px 70px rgba(0,0,0,.22);
}
dialog.qvw::backdrop{background:rgba(10,12,14,.55)}
.qv-head{display:flex; align-items:flex-start; gap:16px; padding:20px 22px 0}
.qv-head .shot{width:150px; flex:none; background:var(--tint); padding:12px}
.qv-close{margin-left:auto; background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:0 2px}
.qv-body{padding:16px 22px 22px}
.qv-body table{width:100%; border-collapse:collapse; font-size:13.5px; margin:12px 0 0}
.qv-body td{padding:7px 0; border-top:1px solid var(--line); vertical-align:top}
.qv-body td:first-child{color:var(--muted); width:42%}
.qv-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}

/* ---------- ficha ---------- */
.prod{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:38px; padding-top:28px; align-items:start}
@media (max-width:900px){.prod{grid-template-columns:1fr; gap:26px}}
.gallery{background:var(--tint); padding:34px; display:grid; place-items:center; border:1px solid var(--line)}
.gallery img{width:100%; max-width:430px}
.gal-note{font-size:11.5px; color:var(--muted); margin-top:8px; font-family:"IBM Plex Mono",monospace}
.pinfo h1{margin-top:6px}
.pinfo .lede{margin:12px 0 0; color:var(--ink-2); font-size:16.5px; max-width:52ch}
.buy{border:1px solid var(--line-2); background:var(--surface); margin-top:22px}
.buy .rowl{display:flex; justify-content:space-between; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-size:13.5px}
.buy .rowl:first-of-type{border-top:none}
.buy .rowl span:last-child{text-align:right; color:var(--muted); max-width:60%}
.buy h3{padding:14px 16px 4px; font-size:15px}
.btn{ color:#fff;
  display:inline-block; padding:11px 18px; background:var(--accent); color:#fff;
  text-decoration:none; font-weight:600; font-size:14.5px; border:1px solid var(--accent);
}
.btn.ghost{background:transparent; color:var(--accent-ink)}
.btns{display:flex; flex-wrap:wrap; gap:9px; padding:14px 16px 16px}
.notice{font-size:13px; padding:9px 16px; margin:0}
.notice.warn{background:var(--warn-wash); color:var(--warn)}
.notice.info{background:var(--surface-2); color:var(--muted)}

.scores{margin-top:30px; border-top:1px solid var(--line-2); padding-top:16px}
.srow{display:grid; grid-template-columns:1fr 108px 30px; gap:12px; align-items:center; font-size:14px; padding:6px 0}
.srow .t{height:2px; background:var(--line-2)}
.srow .t i{display:block; height:100%; background:var(--ink)}
.srow .n{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:13px}
.big-score{display:flex; align-items:baseline; gap:9px}
.big-score b{font-family:"Archivo",sans-serif; font-size:44px; font-weight:600; line-height:1; letter-spacing:-.03em}
.big-score span{font-size:13px; color:var(--muted)}

.sect{padding-top:40px}
.sect h2{padding-bottom:12px; border-bottom:1px solid var(--line-2); margin-bottom:16px}
table.spec{width:100%; border-collapse:collapse; font-size:14px}
table.spec td{padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top}
table.spec td:first-child{color:var(--muted); width:34%; padding-right:16px}
.tablewrap{overflow-x:auto}

table.cmp{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
table.cmp th,table.cmp td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-2); font-family:"IBM Plex Mono",monospace; font-weight:500}
table.cmp td:first-child{color:var(--muted); width:180px; font-size:13px}
table.cmp .win{background:var(--good-wash); font-weight:600}

.list{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.list a{display:flex; gap:12px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; font-size:15px}
.list a:hover{color:var(--accent-ink)}
.list a small{color:var(--muted); font-size:13px; margin-left:auto; text-align:right; max-width:52%}

/* ---------- artículos ---------- */
.prose{max-width:68ch; font-size:16.5px; line-height:1.68}
.prose h2{margin-top:2em; font-size:24px}
.prose h3{margin-top:1.7em; font-size:18.5px}
.prose p,.prose ul,.prose ol{margin:1.05em 0}
.prose blockquote{margin:1.5em 0; padding:2px 0 2px 18px; border-left:2px solid var(--accent); color:var(--ink-2)}
.prose blockquote p{margin:.3em 0}
.prose table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:520px}
.prose th{text-align:left; padding:9px 10px 9px 0; border-bottom:1px solid var(--line-2); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.prose td{padding:9px 10px 9px 0; border-bottom:1px solid var(--line)}
.prose hr{border:none; border-top:1px solid var(--line); margin:2.4em 0}
.prose a{color:var(--accent-ink)}
.meta{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted)}

.site-foot{border-top:1px solid var(--line); background:var(--surface); padding:24px 0; font-size:13px; color:var(--muted)}
.site-foot .row{display:flex; flex-wrap:wrap; gap:8px 20px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--ink)}