:root{--bg2:#f5f6f8;--line:#dfe3e8;--line2:#bcc3cc;--tx:#16202e;--tx2:#3f4a5a;--tx3:#667180;--pri:#0b4ea2}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:var(--tx);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:34px;height:auto}
.logo-txt{font-size:20px;font-weight:700;letter-spacing:.01em;line-height:1}
.logo small{display:block;font-size:9px;letter-spacing:.12em;color:var(--tx3);font-weight:600;margin-top:3px}
.nav ul{display:flex;gap:22px;list-style:none;margin-left:auto;font-size:14px;font-weight:500;color:var(--tx2)}
.nav ul a:hover,.nav ul a.on{color:var(--pri)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:4px;padding:11px 18px;font-weight:600;font-size:14px;transition:.15s}
.btn-pri{background:var(--pri);color:#fff}.btn-pri:hover{background:#093f84}
.btn-gh{background:#fff;color:var(--tx);border-color:var(--line2)}.btn-gh:hover{background:var(--bg2)}
.btn-wa{background:#128c4a;color:#fff}.btn-wa:hover{background:#0e7a40}
main{padding:28px 0 56px}
.miga{font-size:13px;color:var(--tx3)}
.miga a:hover{color:var(--pri)}
h1{font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.2;margin-top:2px}
.bajada{color:var(--tx2);margin-top:4px;max-width:640px}

/* tienda */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:24px}
.prod{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#fff}
.prod .ph{display:block;aspect-ratio:1/1;background:var(--bg2);overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:contain}
.prod .bd{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.prod .tag{font-size:12.5px;color:var(--tx3);font-weight:500}
.prod h2{font-size:18px;font-weight:600;line-height:1.3}
.prod p{font-size:14px;color:var(--tx2)}
.prod .pz{margin-top:auto;padding-top:6px;font-size:18px;font-weight:600}
.prod .acc{display:grid;gap:8px}

/* ficha */
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:22px;align-items:start}
.foto-g{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg2);aspect-ratio:1/1}
.foto-g img{width:100%;height:100%;object-fit:contain}
.foto-c{font-size:13px;color:var(--tx3);margin-top:6px}
.tiras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.tiras button{border:1px solid var(--line2);border-radius:4px;background:var(--bg2);padding:0;overflow:hidden;aspect-ratio:1/1}
.tiras button.on{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.tiras img{width:100%;height:100%;object-fit:cover}
.bloque h2{font-size:17px;font-weight:600;margin-bottom:8px}
.bloque+.bloque{margin-top:22px}
.bloque p{color:var(--tx2)}
.pz-f{font-size:22px;font-weight:600}
.spec{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--line);}
.spec th,.spec td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{width:44%;background:var(--bg2);font-weight:500;color:var(--tx2)}
.lista{margin-left:18px;color:var(--tx2);font-size:14px}
.lista li+li{margin-top:3px}
.nota{margin-top:14px;font-size:13px;color:var(--tx3)}
.sin-fotos{grid-template-columns:minmax(0,760px)}
.titular{font-size:clamp(17px,1.8vw,20px);font-weight:500;color:var(--pri);margin-top:2px}
.titular-c{font-weight:600;color:var(--pri)!important}
.aclara{margin-top:16px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx3)}
.cotiz{margin-top:0;padding:14px 16px;border:2px solid var(--pri);border-radius:6px;background:#eaf1fb}
.cotiz small{display:block;font-size:14px;font-weight:600;color:var(--tx2)}
.cotiz b{display:block;font-size:28px;font-weight:700;line-height:1.25}
.cotiz span{font-size:14px;color:var(--tx2)}
.cotiz p{margin-top:6px;font-size:14px}
.venc{margin-top:12px;padding:10px 12px;border:1px solid #e0b252;border-radius:4px;background:#fdf6e3;font-size:14px}
.dlg{border:1px solid var(--line2);border-radius:6px;padding:20px;width:min(480px,calc(100vw - 32px));color:var(--tx);font:inherit;margin:auto}
.dlg::backdrop{background:rgba(10,20,35,.5)}
.dlg h2{font-size:19px;font-weight:600;margin-bottom:4px}
.dlg label{display:block;margin-top:12px;font-size:14px;font-weight:500;color:var(--tx2)}
.dlg input,.dlg select{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--line2);border-radius:4px;font:inherit;background:#fff;color:var(--tx)}
.dlg-f{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
@media (max-width:480px){.dlg-f{grid-template-columns:1fr 1fr}.dlg-f label:first-child{grid-column:1/-1}}
.dlg-err{margin-top:10px;color:#b42318;font-size:14px}
.dlg-b{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px}
.cab-print,.pie-print{display:none}

footer{border-top:1px solid var(--line);padding:40px 0 26px;background:var(--bg2)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.foot h5{font-size:13px;color:var(--tx3);margin-bottom:10px}
.foot p,.foot a{font-size:13px;color:var(--tx2);display:block;margin-bottom:6px}
.foot a:hover{color:var(--pri)}
.copy{margin-top:26px;font-size:12px;color:var(--tx3)}

@media (max-width:820px){
  .nav ul{display:none}
  .nav .btn{margin-left:auto}
  .ficha,.foot{grid-template-columns:minmax(0,1fr)}
  .acciones .btn{flex:1 1 100%}
}
@media (max-width:640px){.shop{grid-template-columns:minmax(0,1fr)}.wrap{padding:0 16px}}

/* el PDF del datasheet: una hoja A4 limpia */
@page{size:A4;margin:12mm}
@media print{
  header,footer,.miga,.acciones,.bajada,.dlg{display:none}
  body{font-size:11.5px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  main{padding:0}.wrap{max-width:none;padding:0}
  .cab-print{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--tx);padding-bottom:8px;margin-bottom:12px}
  .cab-print img{width:30px}
  .cab-print b{font-size:15px}.cab-print span{margin-left:auto;color:var(--tx3)}
  h1{font-size:22px}
  .ficha{grid-template-columns:42% minmax(0,1fr);gap:16px;margin-top:10px}
  .foto-g{aspect-ratio:3/4}.foto-c{display:none}
  .tiras{gap:4px}.tiras button.on{border-color:var(--line2);box-shadow:none}
  .spec{font-size:11px}.spec th,.spec td{padding:4px 7px}
  .bloque+.bloque{margin-top:10px}.bloque h2{font-size:13px;margin-bottom:4px}
  .lista{font-size:11px}.lista li+li{margin-top:1px}.nota{margin-top:8px;font-size:10.5px}
  .titular{font-size:14px}.aclara{margin-top:8px;font-size:10.5px}
  .pz-f{font-size:15px}
  .cotiz{margin-top:8px;padding:8px 12px}.cotiz small,.cotiz span,.cotiz p{font-size:11.5px}.cotiz b{font-size:20px}
  .pie-print{display:block;margin-top:14px;border-top:1px solid var(--line2);padding-top:8px;font-size:11px;color:var(--tx2)}
}