:root{
  --hormigon:#E3E5E1; --papel:#FBFBF9; --pizarra:#1E2B35; --acero:#5A6B78;
  --cinta:#FFC20E; --cinta-osc:#E0A800; --senal:#C63A1F; --linea:#C9CDC7;
  --head:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hormigon);color:var(--pizarra);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--pizarra)}
:focus-visible{outline:3px solid var(--cinta-osc);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:var(--head);line-height:1.05;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;margin-top:1.6em}
h3{font-size:1.45rem;font-weight:600}

/* ---------- Cabecera ---------- */
header.site{background:var(--pizarra);color:#fff;position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;gap:24px;min-height:64px;flex-wrap:wrap}
.logo{font:700 1.6rem/1 var(--head);color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;margin:0}
.logo-mark{width:26px;height:26px;background:var(--cinta);border-radius:3px;position:relative}
.logo-mark::after{content:"";position:absolute;inset:7px 11px 7px 4px;background:var(--pizarra);border-radius:1px}
nav#nav{display:none;flex-basis:100%;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 24px;padding:6px 0 18px}
nav#nav.open{display:grid}
nav#nav a{color:#D5DBE0;text-decoration:none;font-weight:500;font-size:.95rem;padding:4px 0;border-bottom:2px solid transparent}
nav#nav a:hover,nav#nav a[aria-current]{color:#fff;border-color:var(--cinta)}
.menu-btn{background:var(--cinta);color:var(--pizarra);border:0;font:600 1rem var(--body);padding:8px 14px;border-radius:3px;cursor:pointer}

/* La cinta métrica: el elemento de firma del sitio */
.ruler{height:22px;border-bottom:1px solid var(--cinta-osc);background:
  linear-gradient(90deg,var(--pizarra) 2px,transparent 2px) 0 0/50px 13px repeat-x,
  linear-gradient(90deg,var(--pizarra) 1px,transparent 1px) 0 0/10px 6px repeat-x,
  var(--cinta)}

/* ---------- Portada ---------- */
.hero{background:var(--papel);border-bottom:1px solid var(--linea)}
.hero-in{padding:64px 20px 56px}
.hero h1{max-width:13ch}
.lead{font-size:1.25rem;max-width:60ch;color:#34434F}
.quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.quick a{text-decoration:none;font-weight:600;padding:10px 16px;border:2px solid var(--pizarra);border-radius:3px;background:#fff}
.quick a:hover{background:var(--cinta);border-color:var(--cinta)}
.block{padding:24px 20px 8px}
.sub{color:var(--acero);margin-top:-.4em;max-width:60ch}

/* Tablero perforado de categorías */
.pegboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;padding:18px;border-radius:6px;
  background:radial-gradient(circle,#B9BEB6 2.5px,transparent 3px) 0 0/22px 22px,#D4D7D1}
.peg{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto 1fr;column-gap:14px;background:var(--papel);
  padding:16px;border-radius:4px;text-decoration:none;border:1px solid var(--linea)}
.peg img{grid-row:1/3}
.peg-name{font:700 1.3rem/1.1 var(--head)}
.peg-desc{font-size:.93rem;color:var(--acero);line-height:1.4}
.peg:hover{border-color:var(--pizarra)}

/* Tarjetas de producto */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:18px;position:relative;display:flex;flex-direction:column}
.card-img{background:#fff;border-radius:3px;margin-bottom:14px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.card-img img{width:78%}
.card .spec{flex:1}
.brand{margin:0;color:var(--acero);font-size:.9rem;font-weight:500}
.card h3{margin:.1em 0 .3em}
.spec{font-size:.95rem;color:#3B4A55;margin:0 0 14px}

/* Etiqueta colgante tipo ferretería */
.tag{display:inline-block;background:var(--cinta);color:var(--pizarra);font:600 .82rem/1 var(--body);padding:6px 10px 6px 20px;
  border-radius:2px 3px 3px 2px;position:relative;margin-bottom:8px}
.tag::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--papel)}
.card .tag{position:absolute;top:28px;left:28px;z-index:1}
.tag.small{font-size:.72rem;padding:4px 8px 4px 16px;margin:6px 0 0;display:table}
.tag.small::before{left:5px;width:5px;height:5px;margin-top:-2.5px}

.btn{display:inline-block;text-align:center;background:var(--pizarra);color:#fff;text-decoration:none;font-weight:600;
  padding:12px 18px;border-radius:3px;border-bottom:3px solid var(--cinta)}
.btn:hover{background:#0F1A22}
.btn.small{padding:8px 12px;font-size:.9rem;white-space:nowrap}
.price{font-weight:600;margin:0 0 10px}.price small{display:block;font-weight:400;color:var(--acero);font-size:.78rem}
.disclosure{font-size:.85rem;color:var(--acero);margin:14px 0}
.how{max-width:760px;padding-bottom:48px}
.link{font-weight:600}

/* ---------- Comparativa ---------- */
.article{max-width:880px;padding-top:28px;padding-bottom:56px}
.article p,.article li{max-width:70ch}
.crumbs{font-size:.9rem;color:var(--acero);margin-bottom:12px}.crumbs a{color:var(--acero)}
.byline{color:var(--acero);font-size:.95rem}
.table-wrap{overflow-x:auto;background:var(--papel);border:1px solid var(--linea);border-radius:4px}
.compare{border-collapse:collapse;width:100%;min-width:640px;font-size:.97rem}
.compare th,.compare td{text-align:left;padding:14px;border-bottom:1px solid var(--linea);vertical-align:top}
.compare thead th{font:600 .95rem var(--body);background:var(--pizarra);color:#fff}
.compare tbody th a{font-weight:600}
.compare tr:last-child>*{border-bottom:0}
.review{display:grid;grid-template-columns:240px 1fr;gap:28px;background:var(--papel);border:1px solid var(--linea);
  border-radius:4px;padding:24px;margin:18px 0;scroll-margin-top:110px}
.review-img{background:#fff;border-radius:3px;aspect-ratio:1;display:grid;place-items:center}
.review-img img{width:80%}
.review h3{margin-top:0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:10px 0 18px}
.pc-h{font-weight:600;margin:0 0 4px}
.proscons ul{margin:0;padding-left:1.1em}
.pros li::marker{content:"+  ";color:#2E7D4F;font-weight:700}
.cons li::marker{content:"–  ";color:var(--senal);font-weight:700}
.faq details{background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:14px 18px;margin-bottom:8px}
.faq summary{font-weight:600;cursor:pointer}
.faq details[open] summary{margin-bottom:8px}
.verdict{background:var(--pizarra);color:#fff;border-radius:4px;padding:26px;margin:36px 0;border-left:10px solid var(--cinta)}
.verdict-h{font:700 1.6rem/1.1 var(--head);margin:0 0 8px}
.verdict .btn{background:var(--cinta);color:var(--pizarra);border-bottom-color:var(--cinta-osc)}
.related{display:flex;flex-wrap:wrap;gap:10px}
.related a{background:var(--papel);border:1px solid var(--linea);padding:8px 14px;border-radius:3px;text-decoration:none;font-weight:500}

/* ---------- Pie ---------- */
footer.site{background:var(--pizarra);color:#C7D0D6;margin-top:40px;border-top:8px solid var(--cinta)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-top:40px;padding-bottom:24px}
.foot a{display:block;color:#C7D0D6;text-decoration:none;padding:3px 0;font-size:.95rem}.foot a:hover{color:#fff}
.foot-h{color:#fff;font-weight:600;margin:0 0 8px}
footer .disclosure{color:#9FACB6}
.copy{font-size:.85rem;padding-bottom:28px;color:#8C99A3}

@media (max-width:760px){
  .hero-in{padding:40px 20px}
  .review{grid-template-columns:1fr}
  .review-img{max-width:220px}
  .proscons,.foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

/* Ajustes tras revisión visual */
.compare tbody th a{display:block}
.compare .tag.small{display:inline-block;margin-top:8px}
.peg{grid-template-columns:60px 1fr}
.peg img{width:60px;height:60px}
.peg-name{font-size:1.2rem}
nav#nav a{font-size:.9rem}
.cmp{font-size:.9rem;margin-top:10px;color:var(--acero)}
@media (max-width:760px){.bar{gap:12px}.logo{font-size:1.35rem}}

/* Navegación superior */
.topnav{display:flex;align-items:center;gap:20px;margin-left:auto}
.topnav a{color:#D5DBE0;text-decoration:none;font-weight:500;border-bottom:2px solid transparent;padding:4px 0}
.topnav a:hover,.topnav a[aria-current]{color:#fff;border-color:var(--cinta)}
@media (max-width:520px){.topnav{gap:12px;margin-left:0;flex-basis:100%;padding-bottom:10px}.topnav a{font-size:.92rem}}

/* Opinión */
.hero-review{margin-top:8px}
.answer{font-size:1.12rem}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 10px}
.fit>div{background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:16px 18px}
.fit>div:first-child{border-top:4px solid #2E7D4F}.fit>div:last-child{border-top:4px solid var(--senal)}
.fit p{margin:0}.fit .pc-h{margin-bottom:6px}
.review h3 a{text-decoration:none}.review h3 a:hover{text-decoration:underline}
.review .cmp{display:block}

/* Comparativa vs */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:22px 0;border:2px solid var(--pizarra);border-radius:4px;overflow:hidden}
.choose>div{padding:18px 20px;background:var(--papel)}
.choose>div+div{border-left:2px solid var(--pizarra);background:#fff}
.choose-h{font:700 1.5rem/1 var(--head);margin:0 0 8px}
.choose p:last-child{margin:0}

/* Portada: dudas */
.doubts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.doubts a{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;background:var(--papel);border:1px solid var(--linea);border-left:6px solid var(--cinta);
  border-radius:3px;padding:14px 16px;text-decoration:none;font:700 1.25rem/1.15 var(--head)}
.doubts a:hover{border-color:var(--pizarra);border-left-color:var(--cinta)}
.d-vs{font:500 .95rem var(--body);color:var(--acero)}

/* Listados */
.hub{list-style:none;padding:0;margin:0;border-top:1px solid var(--linea)}
.hub li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--linea)}
.hub a{font-weight:600}.hub span{color:var(--acero);font-size:.92rem}
@media (max-width:760px){.fit,.choose{grid-template-columns:1fr}.choose>div+div{border-left:0;border-top:2px solid var(--pizarra)}}
.how{max-width:1180px}.how p{max-width:65ch}
@media (max-width:760px){.hero-review .review-img{max-width:150px}}

/* Guías */
.toc{background:var(--papel);border:1px solid var(--linea);border-left:6px solid var(--cinta);border-radius:3px;padding:16px 20px;margin:20px 0 8px}
.toc-h{font-weight:600;margin:0 0 6px}.toc ul{margin:0;padding-left:1.1em}.toc li{margin:3px 0}
.prose h2{scroll-margin-top:110px}
.prose ul{padding-left:1.2em}.prose li{margin:4px 0}
.inline-pick{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:18px;background:var(--papel);border:2px solid var(--pizarra);
  border-radius:4px;padding:14px 18px;margin:24px 0}
.inline-img{background:#fff;border-radius:3px}
.inline-h{font:700 1.2rem/1 var(--head);margin:0 0 4px}.inline-pick p{margin:0}
.author{background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:18px 20px;margin:32px 0 0}
.author-h{font-weight:600;margin:0 0 4px}.author p:last-child{margin:0}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.post-card{display:flex;flex-direction:column;gap:6px;background:var(--papel);border:1px solid var(--linea);border-top:5px solid var(--pizarra);
  border-radius:3px;padding:18px;text-decoration:none}
.post-card:hover{border-top-color:var(--cinta)}
.post-h{font:700 1.35rem/1.1 var(--head)}.post-d{font-size:.93rem;color:var(--acero);line-height:1.45}
@media (max-width:620px){.inline-pick{grid-template-columns:72px 1fr}.inline-pick .btn{grid-column:1/-1}}
@media (max-width:520px){.topnav{gap:10px}.topnav a{font-size:.85rem}.menu-btn{padding:6px 10px;font-size:.9rem}}