@font-face{
  font-family:'Instrument';
  src:url('/instrument.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --papel:#FBFAF7;
  --blanco:#FFFFFF;
  --tinta:#10243B;
  --gris:#6A6459;
  --gris-claro:#A29C92;
  --linea:#DCD7CE;
  --azul:#1465B6;
  --azul-hondo:#0B3A6B;
  --azul-noche:#072742;
  --azul-tenue:#E7EFF8;
  --naranja:#EE7E16;
  --verde:#1B7A55;
  --r:3px;
  --ancho:1180px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:'Instrument',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input{font:inherit;}
.num{font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;border-radius:2px;}
.saltar{position:absolute;left:-9999px;}
.saltar:focus{left:8px;top:8px;z-index:100;background:var(--tinta);color:var(--papel);padding:10px 16px;border-radius:var(--r);}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px;}

/* ---------- barra superior ---------- */
.util{background:var(--tinta);color:#B9C6D6;font-size:11.5px;}
.util .contenedor{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;}
.util b{color:#F0EDE7;font-weight:500;}
.util .pto{color:var(--naranja);}

/* ---------- cabecera ---------- */
.cab{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:40;}
.cab .contenedor{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px;}
.logo img{height:36px;width:auto;}
.buscador{flex:1;min-width:0;display:flex;border:1.5px solid var(--tinta);border-radius:var(--r);overflow:hidden;background:var(--blanco);}
.buscador input{flex:1;min-width:0;border:0;outline:none;background:none;padding:9px 13px;font-size:14px;color:var(--tinta);}
.buscador input::placeholder{color:#9A958C;}
.buscador button{background:var(--tinta);color:var(--papel);padding:9px 18px;font-size:12.5px;font-weight:600;}
.buscador button:hover{background:var(--azul-hondo);}
.acciones{display:flex;align-items:center;gap:12px;flex:none;font-size:13px;font-weight:500;}
.btn-lista{border:1.5px solid var(--linea);border-radius:var(--r);padding:8px 14px;display:flex;gap:8px;align-items:center;}
.btn-lista:hover{border-color:var(--tinta);}
.btn-lista .n{color:var(--gris-claro);}
.btn-lista.lleno{border-color:var(--naranja);background:#FEF6EE;}
.btn-lista.lleno .n{color:var(--naranja);font-weight:700;}
.abrir-menu{display:none;}

/* ---------- navegación ---------- */
.nav{background:var(--blanco);border-bottom:1px solid var(--linea);}
.nav .contenedor{display:flex;overflow-x:auto;scrollbar-width:none;}
.nav .contenedor::-webkit-scrollbar{display:none;}
.nav a{padding:11px 15px 10px;font-size:12.8px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;}
.nav a:first-child{padding-left:0;}
.nav a:hover{color:var(--azul);}
.nav a.on{border-bottom-color:var(--naranja);font-weight:600;}

/* ---------- portada ---------- */
.portada{display:grid;grid-template-columns:1.02fr 1fr;gap:72px;padding:74px 0 70px;align-items:start;}
.portada h1{font-size:clamp(1.95rem,4.2vw,3.05rem);font-weight:700;letter-spacing:-.045em;line-height:1.03;margin:0 0 18px;}
.portada .lema{margin:0 0 26px;font-size:15px;color:var(--gris);max-width:34ch;}
.busca-grande{display:flex;border:2px solid var(--tinta);border-radius:var(--r);background:var(--blanco);overflow:hidden;}
.busca-grande input{flex:1;min-width:0;border:0;outline:none;background:none;padding:14px 16px;font-size:15px;color:var(--tinta);}
.busca-grande button{background:var(--naranja);color:var(--tinta);padding:14px 24px;font-size:14px;font-weight:700;}
.busca-grande button:hover{background:#DA7010;}
.sugerencias{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:15px;font-size:12.5px;color:var(--gris);}
.sugerencias button{border-bottom:1px solid var(--linea);white-space:nowrap;}
.sugerencias button:hover{color:var(--azul);border-color:var(--azul);}

.indice{border-top:1px solid var(--linea);}
.indice .enc{display:flex;justify-content:space-between;padding:10px 0 14px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris-claro);font-weight:600;}
.indice a{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--linea);}
.indice a .t{font-size:16px;font-weight:500;letter-spacing:-.02em;flex:1;}
.indice a .c{font-size:13px;color:var(--gris-claro);flex:none;}
.indice a:hover .t{color:var(--azul);}

/* ---------- franjas ---------- */
.franja{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:56px 0 20px;}
.franja h2{font-size:1.3rem;font-weight:700;letter-spacing:-.03em;margin:0;}
.franja a{font-size:12.5px;font-weight:600;color:var(--azul);}
.franja a:hover{text-decoration:underline;}

/* ---------- rejilla de producto ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:20px;padding-bottom:56px;}
.ficha{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);display:flex;flex-direction:column;
  transition:border-color .15s ease;}
.ficha:hover{border-color:var(--azul);}
.ficha .foto{aspect-ratio:1/1.414;display:flex;align-items:center;justify-content:center;padding:22px;
  border-bottom:1px solid var(--linea);position:relative;min-height:0;overflow:hidden;flex:none;}
.ficha .foto img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;}
.ficha .foto .sin{color:var(--gris-claro);font-size:11.5px;text-align:center;}
.ficha .marca-tag{position:absolute;top:0;left:0;background:var(--naranja);color:var(--tinta);font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;}
.ficha .cuerpo{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1;}
.ficha .marca{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azul);}
.ficha .nombre{font-size:13px;font-weight:500;line-height:1.38;letter-spacing:-.01em;flex:1;}
.ficha .ref{font-size:11px;color:var(--gris-claro);letter-spacing:.03em;}
.ficha .anadir{margin-top:6px;border:1.5px solid var(--tinta);border-radius:var(--r);padding:8px;text-align:center;
  font-size:12px;font-weight:600;transition:background .15s ease,color .15s ease;}
.ficha .anadir:hover{background:var(--tinta);color:var(--papel);}
.ficha .anadir.puesto{background:var(--naranja);border-color:var(--naranja);color:var(--tinta);}

/* ---------- listado con filtros ---------- */
.listado{display:grid;grid-template-columns:222px 1fr;gap:0;align-items:start;}
.filtros{border-right:1px solid var(--linea);padding:30px 24px 40px 0;}
.filtros h4{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}
.filtros .grupo{margin-bottom:26px;}
.filtros label{display:flex;align-items:center;gap:9px;font-size:12.8px;margin-bottom:8px;cursor:pointer;}
.filtros label:hover{color:var(--azul);}
.filtros input{position:absolute;opacity:0;width:0;height:0;}
.filtros .caja{width:14px;height:14px;border:1.5px solid #B4AEA4;border-radius:2px;background:var(--blanco);flex:none;
  display:flex;align-items:center;justify-content:center;}
.filtros input:checked + .caja{background:var(--tinta);border-color:var(--tinta);}
.filtros input:checked + .caja:after{content:"";width:7px;height:3.5px;border-left:2px solid var(--papel);
  border-bottom:2px solid var(--papel);transform:rotate(-45deg) translateY(-1px);}
.filtros input:focus-visible + .caja{outline:2px solid var(--naranja);outline-offset:2px;}
.filtros .cuenta{margin-left:auto;font-size:11px;color:var(--gris-claro);}
.filtros .limpiar{font-size:12px;color:var(--azul);font-weight:600;}
.filtros .limpiar:hover{text-decoration:underline;}

.pagina{padding:30px 0 56px 26px;min-width:0;}
.migas{font-size:11.5px;color:var(--gris);margin-bottom:14px;}
.migas a:hover{color:var(--azul);text-decoration:underline;}
.migas b{color:var(--tinta);font-weight:600;}
.pagina h1{font-size:1.9rem;font-weight:700;letter-spacing:-.04em;margin:0 0 4px;}
.total{font-size:12.5px;color:var(--gris);margin-bottom:20px;}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px;}
.chip{font-size:12px;padding:5px 12px;border-radius:var(--r);border:1px solid var(--linea);background:var(--blanco);color:var(--gris);}
.chip:hover{border-color:var(--tinta);color:var(--tinta);}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:var(--papel);font-weight:500;}

.aviso-sin{background:var(--azul-tenue);border:1px solid #BFD8F1;border-radius:var(--r);padding:11px 14px;
  font-size:12.5px;margin-bottom:18px;}
.aviso-sin b{font-weight:700;}

/* ---------- detalle ---------- */
.detalle{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:26px 0 60px;align-items:start;}
.detalle .grande{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);aspect-ratio:1/1.414;
  display:flex;align-items:center;justify-content:center;padding:38px;min-height:0;overflow:hidden;}
.detalle .grande img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;}
.detalle .marca{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul);}
.detalle h1{font-size:1.85rem;font-weight:700;letter-spacing:-.04em;line-height:1.1;margin:10px 0 14px;}
.disponible{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gris);margin-bottom:22px;}
.disponible i{width:6px;height:6px;border-radius:50%;background:var(--verde);}
.tabla{border-top:1px solid var(--tinta);margin-bottom:24px;}
.tabla div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--linea);font-size:13px;}
.tabla span{color:var(--gris);}
.tabla b{font-weight:600;text-align:right;}
.acciones-det{display:flex;gap:10px;margin-bottom:10px;}
.contador{display:flex;align-items:center;border:1.5px solid var(--linea);border-radius:var(--r);background:var(--blanco);}
.contador button{width:34px;height:40px;font-size:16px;color:var(--gris);}
.contador button:hover{color:var(--tinta);}
.contador .v{min-width:34px;text-align:center;font-weight:600;font-size:14px;}
.principal{flex:1;background:var(--naranja);color:var(--tinta);border-radius:var(--r);padding:12px;
  text-align:center;font-size:14px;font-weight:700;letter-spacing:-.01em;}
.principal:hover{background:#DA7010;}
.secundario{flex:1;background:var(--blanco);border:1.5px solid var(--tinta);border-radius:var(--r);padding:11px;
  text-align:center;font-size:13px;font-weight:600;}
.secundario:hover{background:var(--tinta);color:var(--papel);}
.nota{font-size:12.5px;color:var(--gris);border-top:1px solid var(--linea);padding-top:14px;margin-top:8px;line-height:1.6;}
.nota b{color:var(--tinta);font-weight:600;}
.descripcion{border-top:1px solid var(--linea);padding:22px 0 0;margin-top:6px;}
.descripcion h3{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:0 0 8px;}
.descripcion p{margin:0;font-size:13.5px;color:var(--tinta);max-width:62ch;}
.descripcion .erp{margin-top:9px;font-size:11.5px;color:var(--gris-claro);}

/* ---------- vacío ---------- */
.vacio{padding:76px 0 84px;max-width:440px;}
.vacio h2{font-size:1.55rem;font-weight:700;letter-spacing:-.035em;margin:0 0 10px;}
.vacio p{color:var(--gris);font-size:14px;margin:0 0 24px;}
.vacio .wa{display:inline-block;background:var(--naranja);color:var(--tinta);border-radius:var(--r);padding:12px 22px;
  font-size:13.5px;font-weight:700;}
.vacio .wa:hover{background:#DA7010;}
.vacio .otras{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--gris);}
.vacio .otras a{color:var(--azul);font-weight:600;margin-right:14px;}
.vacio .otras a:hover{text-decoration:underline;}

/* ---------- mi lista ---------- */
.lista-fila{display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--linea);}
.lista-fila .mini{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);height:64px;
  display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;}
.lista-fila .mini img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;}
.lista-fila .nom{font-size:13.5px;font-weight:500;line-height:1.35;}
.lista-fila .rf{font-size:11.5px;color:var(--gris-claro);margin-top:3px;}
.lista-fila .quitar{font-size:12px;color:var(--gris);}
.lista-fila .quitar:hover{color:#A3201A;text-decoration:underline;}
.resumen-lista{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:20px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);}
.resumen-lista .txt{font-size:13px;color:var(--gris);max-width:46ch;}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:#93A2B5;margin-top:40px;}
.pie .contenedor{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:32px;padding-bottom:32px;font-size:12.5px;line-height:1.65;}
.pie img{height:30px;margin-bottom:11px;}
.pie b{color:#EDEAE4;font-weight:500;}

.aviso-demo{background:#FEF6EE;border-top:1px solid var(--naranja);font-size:11.5px;color:var(--gris);}
.aviso-demo .contenedor{padding-top:10px;padding-bottom:10px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .portada{grid-template-columns:1fr;gap:44px;padding:48px 0 40px;}
  .detalle{grid-template-columns:1fr;gap:28px;}
  .listado{grid-template-columns:1fr;}
  .filtros{border-right:0;border-bottom:1px solid var(--linea);padding:20px 0 24px;display:none;}
  .filtros.abierto{display:block;}
  .pagina{padding-left:0;padding-top:22px;}
  .abrir-menu{display:inline-block;border:1.5px solid var(--linea);border-radius:var(--r);padding:8px 14px;
    font-size:12.5px;font-weight:600;margin-bottom:18px;}
}
@media (max-width:680px){
  .contenedor{padding:0 16px;}
  .cab .contenedor{flex-wrap:wrap;gap:12px;}
  .buscador{order:3;width:100%;flex-basis:100%;}
  .acciones{margin-left:auto;}
  .logo img{height:30px;}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
  .util .contenedor{font-size:11px;}
  .lista-fila{grid-template-columns:52px 1fr;row-gap:8px;}
  .lista-fila .mini{height:52px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}