:root{
  --petroleo:#0B1F2A; --linea-osc:#28495A; --texto-osc:#EAF2F4; --texto-osc-2:#9DB5C0;
  --papel:#F3F6F7; --papel-2:#E5ECEE; --tinta:#10222B; --tinta-2:#485D67; --linea:#C5D1D6;
  --ambar:#FFB703; --ambar-claro:#FFD666; --ambar-texto:#8A5600;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --cuerpo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --ancho:72rem; --lectura:42rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--papel);color:var(--tinta);font:1rem/1.6 var(--cuerpo)}
img,svg{max-width:100%}
a{color:var(--ambar-texto);text-underline-offset:.2em}
a:hover{color:var(--tinta)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}
::selection{background:var(--ambar);color:#231600}
[hidden]{display:none!important}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:0;background:var(--ambar);color:#231600;padding:.6rem 1rem;z-index:100}
.saltar:focus{left:0}

h1,h2,h3{font-family:var(--display);line-height:1;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:900}
h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800;margin-top:1.5em}
h3{font-size:1.5rem;font-weight:800}

/* Cabecera (oscura en todas las páginas) */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(11,31,42,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea-osc);color:var(--texto-osc)}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.marca{display:flex;align-items:center;gap:.6rem;font:900 1.7rem/1 var(--display);color:var(--texto-osc);text-decoration:none}
.nav{display:flex;gap:1.6rem;font:500 .95rem var(--cuerpo)}
.nav a{color:var(--texto-osc-2);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--texto-osc);border-bottom-color:var(--ambar)}

.entradilla{font-size:1.2rem;color:var(--tinta-2);max-width:38rem}
.boton{display:inline-block;font:600 .95rem var(--cuerpo);background:var(--ambar);color:#231600;text-decoration:none;padding:.7rem 1.2rem;border:2px solid var(--ambar);border-radius:999px;transition:transform .2s,background .2s}
.boton:hover{background:var(--ambar-claro);border-color:var(--ambar-claro);color:#231600;transform:translateY(-1px)}
.boton.secundario{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.boton.secundario:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.buscador input,.campos input,.campos select,.filtros input,.filtros select{width:100%;font:1rem var(--cuerpo);padding:.6rem .75rem;border:2px solid var(--tinta);background:#fff;color:var(--tinta);border-radius:8px}
.panel-ancho{background:#fff;border:2px solid var(--tinta);border-radius:14px;padding:1.25rem;margin:1.5rem 0 2rem}
.panel-ancho h2{margin-top:0;font-size:1.6rem}

/* Matriz estática (/materiales/) */
.tabla-scroll{overflow-x:auto;margin:1rem 0}
.matriz,.comparador,.prosa table{border-collapse:collapse;width:100%;font:.95rem/1.4 var(--cuerpo)}
.matriz th,.matriz td,.comparador th,.comparador td,.prosa th,.prosa td{border-bottom:1px solid var(--linea);padding:.6rem;text-align:left;vertical-align:top}
.matriz thead th,.comparador thead th,.prosa thead th{border-bottom:2px solid var(--tinta);font-weight:600}
.matriz tbody th,.comparador tbody th{font-weight:600}
small{display:block;font:400 .82rem/1.35 var(--cuerpo);color:var(--tinta-2);margin-top:.15rem}
.estado{display:inline-block;padding:.15rem .5rem;border-radius:6px;font:600 .85rem var(--cuerpo);white-space:nowrap}
.e-corta{background:#D3EBDF;color:#0A4D36}
.e-graba{background:#DCE7F7;color:#173F75}
.e-marca{background:#E8E0F4;color:#44266F}
.e-no{color:var(--tinta-2)}
.e-peligro{background:#F6D5D5;color:#7A1212}
.e-cnc-bien{background:#D3EBDF;color:#0A4D36}
.e-cnc-limitado{background:#FCEBC4;color:#6B4400}
.e-cnc-no{color:var(--tinta-2)}
.e-cnc-peligro{background:#F6D5D5;color:#7A1212}
.matriz tbody th a{color:inherit}
.leyenda{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.nota-pequena{font:.85rem/1.45 var(--cuerpo);color:var(--tinta-2);margin:.5rem 0 0}

/* Listados */
.bloque{padding-top:2.5rem;padding-bottom:1rem}
.lista-articulos{list-style:none;margin:0;padding:0;max-width:var(--lectura)}
.lista-articulos li{border-top:1px solid var(--linea);padding:1rem 0}
.lista-articulos a{font:800 1.5rem/1.1 var(--display);color:var(--tinta);text-decoration:none}
.lista-articulos a:hover{color:var(--ambar-texto);text-decoration:underline}
.lista-articulos p{margin:.3rem 0 0;color:var(--tinta-2)}

.subsecciones{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 .5rem}

/* Artículo */
.articulo{padding-top:2.5rem;padding-bottom:3rem}
.articulo-cab{max-width:var(--lectura);margin-bottom:1.5rem}
.migas{font:600 .9rem var(--cuerpo);margin:0 0 .8rem}
.meta{font:.9rem var(--cuerpo);color:var(--tinta-2)}
.articulo-cuerpo{display:grid;grid-template-columns:14rem minmax(0,var(--lectura));gap:3rem}
.articulo-cuerpo:not(:has(.toc)){grid-template-columns:minmax(0,var(--lectura))}
.lateral{position:sticky;top:5rem;align-self:start;display:grid;gap:1.5rem}
.toc{font:.9rem/1.4 var(--cuerpo);border-left:3px solid var(--ambar);padding-left:1rem}
.toc p{font-weight:600;margin:0 0 .5rem}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:.4rem 0}
.toc a{color:var(--tinta);text-decoration:none}
.toc a:hover{text-decoration:underline}
.prosa{max-width:var(--lectura);font:1.0625rem/1.7 var(--serif)}
.prosa ul,.prosa ol{padding-left:1.3rem}
.prosa li{margin:.4rem 0}
.prosa h2{margin-top:1.6em}
.prosa table{margin:1.2rem 0;display:block;overflow-x:auto;font-family:var(--cuerpo)}
.herramienta-aviso{border:2px solid var(--tinta);border-radius:12px;padding:1rem 1.2rem;margin:2rem 0;font:1rem var(--cuerpo);display:flex;gap:.25rem 1rem;flex-wrap:wrap;align-items:baseline}
.afiliados{background:var(--papel-2);border:1px solid var(--linea);border-radius:12px;padding:1rem 1.25rem;margin:2rem 0;font-family:var(--cuerpo)}
.afiliados h2{margin-top:0;font-size:1.5rem}
.afiliados ul{list-style:none;padding:0;margin:.8rem 0 0}
.afiliados li{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-top:1px solid var(--linea);padding:.7rem 0}
.afiliados li div{display:flex;flex-direction:column}
.afiliados li span{font-size:.85rem;color:var(--tinta-2)}
.relacionados{margin-top:2.5rem;border-top:2px solid var(--tinta);font-family:var(--cuerpo)}
.relacionados h2{margin-top:1rem;font-size:1.5rem}
.relacionados ul{list-style:none;padding:0}
.relacionados a{font-weight:600}

/* Herramientas y comparador */
.herramienta{padding-top:2.5rem;padding-bottom:3rem}
.herramienta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;margin:1.5rem 0 2.5rem}
.campos{display:grid;gap:.9rem;align-content:start}
.campos label,.filtros label{font:600 .9rem var(--cuerpo);display:grid;gap:.3rem}
.campos fieldset{border:2px solid var(--tinta);border-radius:12px;padding:1rem;display:grid;gap:.9rem;margin:0}
.campos legend{font:800 1.3rem var(--display);padding:0 .4rem}
.resultado{border:2px solid var(--tinta);border-radius:14px;background:var(--papel-2);padding:1.25rem;align-self:start;position:sticky;top:5rem}
.resultado h2{margin:0 0 .3rem;font-size:1.4rem}
.total{font:900 clamp(2.6rem,6vw,3.8rem)/1 var(--display);margin:.2rem 0 1rem;color:var(--ambar-texto)}
.resultado dl{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;margin:0;font:.95rem var(--cuerpo)}
.resultado dd{margin:0;font-weight:600;text-align:right}
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;max-width:60rem;margin:1.2rem 0;align-items:end}
.filtros [hidden]{display:none}
.comparador small.nota-ficha{display:block;font-weight:400;color:var(--tinta-2);margin-top:.2rem;max-width:28rem}
.comparador [hidden]{display:none}

/* Pie (oscuro) */
.pie{background:var(--petroleo);color:var(--texto-osc-2);border-top:1px solid var(--linea-osc);margin-top:3rem;padding:2rem 0 2.5rem;font:.9rem/1.5 var(--cuerpo)}
.aviso-afiliados{max-width:48rem;margin:0 0 1rem}
.pie-fila{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pie-fila p{margin:0}
.pie nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.pie a{color:var(--texto-osc-2)}
.pie a:hover{color:var(--ambar-claro)}
body.home .pie{margin-top:0}

@media (max-width:52rem){
  .cabecera-fila{height:auto;flex-wrap:wrap;padding-top:.6rem;padding-bottom:.4rem}
  .nav{width:100%;overflow-x:auto;gap:1.2rem;padding-bottom:.3rem}
  .cabecera{}
  html{scroll-padding-top:6.5rem}
  .herramienta-grid,.articulo-cuerpo{grid-template-columns:minmax(0,1fr)}
  .toc,.resultado,.lateral{position:static}
  .anuncio-lateral{display:none}
  .filtros{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Anuncios (AdSense). Solo se pintan si config.json > adsense lo activa */
.anuncio{margin:2rem 0;text-align:center;min-height:90px}
.anuncio-etq{display:block;font:500 .7rem var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:.3rem}
.anuncio-lateral{margin:0;min-height:250px}
.hueco-anuncio{display:grid;place-items:center;border:2px dashed var(--tinta-2);border-radius:8px;font:600 .85rem var(--cuerpo);color:var(--tinta-2)}

/* Figuras y diagramas en artículos */
.figura{margin:1.6rem 0}
.figura img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--linea)}
.figura figcaption{font:.88rem/1.45 var(--cuerpo);color:var(--tinta-2);margin-top:.5rem}
.figura figcaption span{opacity:.75}

/* Fichas de máquina */
.ficha .etiqueta-ficha{font:600 .9rem var(--cuerpo);color:var(--ambar-texto);text-transform:uppercase;letter-spacing:.04em;margin:.5rem 0 0}
.ficha-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1.2rem 0 2rem}
.ficha-rejilla{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.ficha .panel{background:#fff;border:2px solid var(--tinta);border-radius:14px;padding:1.1rem 1.25rem;margin:0 0 1.5rem}
.ficha .panel h2{margin-top:0;font-size:1.35rem}
.tabla-ficha{width:100%;border-collapse:collapse;font:.95rem/1.4 var(--cuerpo)}
.tabla-ficha th,.tabla-ficha td{border-bottom:1px solid var(--linea);padding:.5rem .4rem;text-align:left;vertical-align:top}
.tabla-ficha th{font-weight:600;width:42%;color:var(--tinta-2)}
.ficha .pros li::marker{content:"+  ";color:#0A4D36;font-weight:700}
.ficha .contras li::marker{content:"!  ";color:#8A5600;font-weight:700}
.ficha .curiosidades{background:var(--papel-2)}
.ficha .curiosidades li{margin:.4rem 0}
.ficha .veredicto{background:var(--papel-2);border-left:8px solid var(--ambar)}
.ficha .veredicto p{margin:0;font-size:1.05rem}
.indice-ficha{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.5rem}
.indice-ficha a{font:600 .9rem var(--cuerpo);padding:.35rem .75rem;border:1.5px solid var(--tinta);border-radius:999px;text-decoration:none;color:var(--tinta);background:#fff}
.indice-ficha a:hover{background:var(--ambar)}
.en-detalle{max-width:var(--lectura)}
.en-detalle h3{font-size:1.45rem;margin:1.4rem 0 .4rem}
.en-detalle p{font:1.05rem/1.65 var(--serif);margin:0 0 .8rem}
.tabla-materiales-ficha th{width:30%}
.faq-ficha{max-width:var(--lectura)}
.faq-ficha details{border-bottom:1px solid var(--linea);padding:.7rem 0}
.faq-ficha summary{cursor:pointer;font-weight:600}
.faq-ficha details p{margin:.5rem 0 0}
.ficha tr.actual{background:var(--papel-2)}
.fuentes-ficha{font-size:.92rem}
.acciones-fila{display:flex;gap:.4rem;flex-wrap:wrap}
@media (max-width:760px){.ficha-rejilla{grid-template-columns:1fr}}

/* Filtros por familia en tablas de materiales */
.filtro-familias{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.chip-fam{font:600 .88rem var(--cuerpo);padding:.35rem .8rem;border:1.5px solid var(--tinta);border-radius:999px;background:#fff;color:var(--tinta);cursor:pointer}
.chip-fam:hover{background:var(--papel-2)}
.chip-fam.activo{background:var(--tinta);color:#fff}
.insignia{display:inline-block;font:700 .75rem var(--cuerpo);padding:.05rem .45rem;border-radius:6px;background:var(--ambar-claro);color:#231600;vertical-align:middle}
.tabla-materiales td{font-size:.9rem;min-width:6.5rem}
.fuentes-tabla{font-size:.88rem;margin-top:.6rem}
.fuentes-tabla summary{cursor:pointer;font-weight:600}
/* Foto en ficha */
.foto-ficha{margin:0 0 1.5rem}
.foto-ficha img{display:block;width:100%;max-height:440px;object-fit:contain;background:#fff;border:2px solid var(--tinta);border-radius:14px}
.foto-ficha figcaption{font:.82rem/1.4 var(--cuerpo);color:var(--tinta-2);margin-top:.4rem}
.sin-foto{font:.85rem var(--cuerpo);color:var(--tinta-2);border:2px dashed var(--linea);border-radius:14px;padding:1rem;margin:0 0 1.5rem;text-align:center}
.tabla-materiales tbody th{min-width:13rem}
