:root{
  --blanco:#FFFFFF;
  --suave:#F6F4F0;
  --linea:#E4E0D8;
  --linea-fuerte:#CFC8BC;
  --tinta:#1A1815;
  --gris:#6B6459;
  --naranja:#FF914D;
  --naranja-ink:#9E4A0C;
  --naranja-suave:#FFF1E6;
  --sombra:0 1px 2px rgba(26,24,21,.05),0 8px 24px rgba(26,24,21,.06);
  --sombra-alta:0 2px 4px rgba(26,24,21,.06),0 18px 44px rgba(26,24,21,.11);
  --ease:cubic-bezier(.22,.61,.36,1);
  --caja:1240px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{margin:0;background:var(--blanco);color:var(--tinta);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0}
p{margin:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--naranja-ink);outline-offset:2px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:12px 18px;z-index:200}
.saltar:focus{left:12px;top:12px}
.caja{width:min(100% - 40px,var(--caja));margin-inline:auto}
.caja.angosta{width:min(100% - 40px,780px)}

/* ---------------- barra superior ---------------- */
.tope{position:sticky;top:0;z-index:60;background:var(--blanco);border-bottom:1px solid var(--linea)}
.tope-fila{display:flex;align-items:center;gap:20px;padding:14px 0}
.marca img{height:38px;width:auto}
.buscar{flex:1;max-width:520px;display:flex;border:1px solid var(--linea-fuerte);border-radius:3px;
  overflow:hidden;transition:border-color .2s var(--ease)}
.buscar:focus-within{border-color:var(--tinta)}
.buscar input{flex:1;border:0;padding:11px 14px;font:inherit;font-size:15px;color:var(--tinta);background:var(--blanco);min-width:0}
.buscar input:focus{outline:none}
.buscar button{border:0;background:var(--tinta);color:#fff;padding:0 16px;cursor:pointer;display:grid;place-items:center}
.buscar button:hover{background:var(--naranja-ink)}
.buscar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mi-cot{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--linea-fuerte);
  border-radius:3px;font-size:14px;font-weight:600;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.mi-cot:hover{border-color:var(--tinta);background:var(--suave)}
.mi-cot svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cuenta{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--naranja);color:var(--tinta);font-size:12px;font-weight:600;line-height:1}
.cuenta[hidden]{display:none}
.menu-btn{display:none;border:1px solid var(--linea-fuerte);background:var(--blanco);border-radius:3px;
  padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer}
.cats{border-top:1px solid var(--linea);background:var(--blanco)}
.cats-fila{display:flex;gap:26px;padding:11px 0;overflow-x:auto;scrollbar-width:none}
.cats-fila::-webkit-scrollbar{display:none}
.cats-fila a{font-size:14px;color:var(--gris);white-space:nowrap;padding:3px 0;border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.cats-fila a:hover{color:var(--tinta)}
.cats-fila a.on{color:var(--tinta);font-weight:600;border-color:var(--naranja)}

/* ---------------- botones ---------------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--naranja);
  color:var(--tinta);border:1px solid var(--naranja);border-radius:3px;padding:13px 22px;
  font-size:15px;font-weight:600;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.boton:hover{background:#FFA469;transform:translateY(-1px)}
.boton.claro{background:transparent;border-color:var(--linea-fuerte);color:var(--tinta)}
.boton.claro:hover{background:var(--suave);border-color:var(--tinta)}
@media (pointer:coarse){.boton,.mi-cot,.menu-btn{min-height:44px}}

/* ---------------- aviso superior ---------------- */
.aviso{margin:0;background:var(--tinta);color:#F4F1EC;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;padding:9px 20px}

/* ---------------- portada ---------------- */
.portada{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(360px,38vw,520px);
  background:#14120F url("hero-taller.jpg") center/cover no-repeat;
  border-bottom:1px solid var(--linea)}
.portada::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.78) 34%,rgba(12,12,14,.28) 62%,rgba(12,12,14,.05) 100%)}
.portada-texto{padding:52px 0;color:#fff}
.linea{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:16px}
.portada h1{font-size:clamp(30px,4.4vw,52px);max-width:15ch;color:#fff}
.bajada{margin-top:18px;font-size:clamp(16px,1.3vw,18px);color:#DCD6CD;max-width:44ch}
.portada-botones{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.boton.oscuro{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.boton.oscuro:hover{background:#fff;border-color:#fff;color:var(--tinta)}

/* ---------------- franja de confianza ---------------- */
.franja{background:var(--suave);border-bottom:1px solid var(--linea)}
.franja-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:20px 0}
.franja-fila p{font-size:14.5px;color:var(--gris);padding-left:20px;position:relative}
.franja-fila p::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--naranja)}
.franja-fila strong{color:var(--tinta);font-weight:600}
@media (max-width:760px){
  .franja-fila{grid-template-columns:1fr;gap:10px}
  .portada{min-height:420px}
  .portada::before{background:linear-gradient(180deg,rgba(12,12,14,.5) 0%,rgba(12,12,14,.82) 48%,rgba(12,12,14,.9) 100%)}
  .portada-texto{padding:120px 0 40px}
}

/* ---------------- bloques ---------------- */
.bloque{padding:clamp(44px,5.5vw,76px) 0}
.bloque.suave{background:var(--suave);border-block:1px solid var(--linea)}
.titulo-fila{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.titulo-fila h1,.titulo-fila h2{font-size:clamp(24px,2.6vw,34px)}
.mas{font-size:14px;font-weight:600;color:var(--naranja-ink);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.mas:hover{border-color:var(--naranja-ink)}
.lede{color:var(--gris);max-width:60ch;margin-bottom:26px;margin-top:12px}
.titulo-fila + .lede{margin-top:-14px}   /* bajo el bloque de titulo ya hay separacion propia */

/* ---------------- familias ---------------- */
.cats-grilla{display:grid;gap:16px;grid-template-columns:repeat(5,1fr)}
.cat-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.cat-caja:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--linea-fuerte)}
.cat-caja img{height:130px;object-fit:contain;padding:16px;background:var(--blanco);width:100%}
.cat-caja div{padding:0 18px 20px;flex:1}
.cat-caja h3{font-size:17px;margin-bottom:6px}
.cat-caja p{font-size:13.5px;color:var(--gris);line-height:1.5}
.cat-caja .cuantos{margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-ink)}
.flecha{position:absolute;right:16px;top:14px;color:var(--naranja-ink);opacity:0;transform:translateX(-4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cat-caja:hover .flecha{opacity:1;transform:none}

/* ---------------- grilla de productos ---------------- */
.grilla{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.grilla.tres{grid-template-columns:repeat(3,1fr)}
.ficha{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.ficha:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--linea-fuerte)}
.ficha[hidden]{display:none}
.ficha-foto{display:flex;align-items:center;justify-content:center;height:210px;flex:0 0 auto;
  padding:18px;background:var(--blanco);overflow:hidden;border-bottom:1px solid var(--linea)}
.ficha-foto img{max-height:100%;max-width:100%;width:auto;object-fit:contain;transition:transform .35s var(--ease)}
.ficha:hover .ficha-foto img{transform:scale(1.04)}
.ficha-cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.etiqueta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--naranja-ink)}
.ficha h3{font-size:15.5px;line-height:1.3;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ficha h3 a:hover{color:var(--naranja-ink)}
.datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;flex:1}
.datos li{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--gris);padding-left:13px;position:relative;line-height:1.5}
.datos li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--linea-fuerte)}
.datos.grande li{font-size:13px;padding-left:16px}
.datos.grande li::before{top:11px;width:9px}
.ficha-pie{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.agregar{border:1px solid var(--linea-fuerte);background:var(--blanco);color:var(--tinta);border-radius:3px;
  padding:10px 12px;font-size:13px;font-weight:600;cursor:pointer;width:100%;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.agregar:hover{border-color:var(--tinta)}
.agregar[aria-pressed="true"]{background:var(--naranja);border-color:var(--naranja)}
.ver{text-align:center;font-size:13px;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.ver:hover{color:var(--tinta)}
@media (pointer:coarse){.agregar{min-height:44px}}

/* ---------------- guia y porque ---------------- */
.guia{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.guia article{border:1px solid var(--linea);border-radius:4px;padding:26px 24px;background:var(--blanco)}
.num{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--naranja-ink);margin-bottom:12px}
.guia h3{font-size:19px;margin-bottom:8px}
.guia p{color:var(--gris);font-size:15px}
.porque{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.porque h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:22px}
.porque ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:16px}
.porque li{color:var(--gris);padding-left:22px;position:relative}
.porque li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;background:var(--naranja)}
.porque strong{color:var(--tinta);font-weight:600}
.porque img{border-radius:4px;border:1px solid var(--linea)}

/* ---------------- preguntas ---------------- */
.preguntas{border-top:1px solid var(--linea);max-width:900px}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:17px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after,.preguntas summary::before{content:"";position:absolute;right:6px;top:50%;width:12px;height:2px;
  background:var(--tinta);transition:transform .25s var(--ease)}
.preguntas summary::before{transform:translateY(-50%) rotate(90deg)}
.preguntas summary::after{transform:translateY(-50%)}
.preguntas details[open] summary::before{transform:translateY(-50%) rotate(0)}
.preguntas div{padding:0 40px 22px 0;color:var(--gris);max-width:70ch}
@media (pointer:coarse){.preguntas summary{min-height:44px}}

/* ---------------- miga y catalogo ---------------- */
.miga{font-size:13px;color:var(--gris);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.miga a:hover{color:var(--tinta);text-decoration:underline}
.cat-barra{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--linea);margin-bottom:22px}
.fil{display:flex;gap:9px;flex-wrap:wrap}
.pastilla{border:1px solid var(--linea-fuerte);background:var(--blanco);color:var(--gris);border-radius:999px;
  padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.pastilla:hover{border-color:var(--tinta);color:var(--tinta)}
.pastilla[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pastilla .n{opacity:.55;font-weight:400;margin-left:3px}
@media (pointer:coarse){.pastilla{min-height:44px}}
.buscar-local input{border:1px solid var(--linea-fuerte);border-radius:3px;padding:11px 14px;font:inherit;
  font-size:15px;min-width:min(280px,100%);background:var(--blanco);color:var(--tinta)}
.buscar-local input:focus{outline:none;border-color:var(--tinta)}
.conteo{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--gris);margin-bottom:16px}
.vacio{margin-top:28px;color:var(--gris)}
.vacio[hidden]{display:none}

/* ---------------- ficha de producto ---------------- */
.producto{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.producto-foto{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:32px;
  display:flex;align-items:center;justify-content:center;min-height:380px}
.producto-foto img{max-height:440px;width:auto;object-fit:contain}
.producto-datos h1{font-size:clamp(22px,2.6vw,32px);margin:8px 0 18px;line-height:1.15}
.desc{color:var(--gris);font-size:16px;max-width:56ch;margin-bottom:14px}
.tecnica{margin-top:48px;border-top:1px solid var(--linea);padding-top:32px}
.tecnica h2{font-size:20px;margin-bottom:18px}
.tecnica ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.tecnica li{font-size:15px;color:var(--gris);padding:11px 0 11px 18px;position:relative;border-bottom:1px solid var(--linea)}
.tecnica li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--naranja)}
@media (max-width:760px){.tecnica ul{grid-template-columns:1fr}}
.chico{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);font-weight:500;margin:28px 0 12px}
.usos{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.usos li{background:var(--suave);border:1px solid var(--linea);border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--gris)}
.producto-acciones{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.producto-acciones .boton[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* ---------------- cotizacion ---------------- */
.lista-cot{border:1px solid var(--linea);border-radius:4px;padding:24px;margin-bottom:28px;background:var(--suave)}
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lista li{display:flex;align-items:center;gap:14px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:3px;padding:10px 12px}
.lista img{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.lista .nom{flex:1;font-size:15px;font-weight:600}
.lista .cat{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.lista .quitar{border:0;background:none;color:var(--naranja-ink);cursor:pointer;font-size:13px;text-decoration:underline;padding:8px}
.vacio-lista{color:var(--gris);font-size:15px}
.vacio-lista a{color:var(--naranja-ink);text-decoration:underline}
.formulario{border:1px solid var(--linea);border-radius:4px;padding:26px}
.campos{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
input,textarea,select{font:inherit;font-size:15.5px;color:var(--tinta);background:var(--blanco);
  border:1px solid var(--linea-fuerte);border-radius:3px;padding:12px 13px;transition:border-color .2s var(--ease)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--tinta)}
textarea{min-height:120px;resize:vertical}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario-pie{margin-top:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.formulario-pie p:empty{display:none}
.boton:disabled{opacity:.6;cursor:default;transform:none}
.formulario-pie p{font-size:14px;color:var(--gris)}
.enviado{border:1px solid var(--linea);border-radius:4px;padding:36px 26px;text-align:center;background:var(--suave)}
.enviado[hidden]{display:none}
.enviado h2{font-size:26px;margin-bottom:10px}
.enviado p{color:var(--gris);margin-bottom:22px}

/* ---------------- pie ---------------- */
.pie{border-top:1px solid var(--linea);background:var(--blanco);padding:48px 0 32px;margin-top:0}
.pie-grilla{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr 1fr}
.pie img{height:36px;width:auto;margin-bottom:14px}
.pie h3{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);font-weight:500;margin-bottom:12px}
.pie p,.pie li{font-size:14.5px;color:var(--gris)}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pie a:hover{color:var(--tinta);text-decoration:underline}
.pie-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--gris)}

/* ---------------- entradas suaves ---------------- */
.rev{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rev.visto{opacity:1;transform:none}

/* ---------------- adaptable ---------------- */
@media (max-width:1080px){
  .cats-grilla{grid-template-columns:repeat(3,1fr)}
  .grilla{grid-template-columns:repeat(3,1fr)}
  .pie-grilla{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .portada-fila{grid-template-columns:1fr;gap:32px;padding:40px 0}
  .porque{grid-template-columns:1fr;gap:28px}
  .producto{grid-template-columns:1fr;gap:26px}
  .producto-foto{min-height:0}
  .guia{grid-template-columns:1fr}
  .grilla.tres{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  html{scroll-padding-top:96px}
  .tope-fila{flex-wrap:wrap;gap:12px;padding:12px 0}
  .marca{order:1}
  .mi-cot{order:2;margin-left:auto}
  .buscar{order:3;flex:1 1 60%;max-width:none}
  .menu-btn{display:inline-block;order:4;flex:0 0 auto}
  .cats{display:none}
  .cats.abierto{display:block}
  .cats-fila{flex-direction:column;gap:0;padding:6px 0 12px}
  .cats-fila a{padding:11px 0;border-bottom:1px solid var(--linea);border-left:0}
  .cats-fila a.on{border-bottom-color:var(--naranja)}
}
@media (max-width:720px){
  .cats-grilla{grid-template-columns:repeat(2,1fr)}
  .grilla,.grilla.tres{grid-template-columns:repeat(2,1fr)}
  .campos{grid-template-columns:1fr}
  .pie-grilla{grid-template-columns:1fr}
  .ficha-foto{height:160px}
}
@media (max-width:480px){
  .cats-grilla{grid-template-columns:1fr}
  .grilla,.grilla.tres{grid-template-columns:repeat(2,1fr);gap:12px}
  .ficha-foto{height:132px;padding:12px}
  .ficha-cuerpo{padding:12px 12px 14px;gap:8px}
  .ficha h3{font-size:14.5px}
  .datos li{font-size:10.5px;padding-left:11px}
  .datos li::before{width:6px}
  .agregar{font-size:12px;padding:9px 6px}
  .ver{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}