/* ===========================================================
   MAKACOM — hoja de estilos
   Amarillo señalético + tinta casi negra. Verde solo WhatsApp.
   =========================================================== */

:root{
  --tinta:#16181B;
  --tinta-2:#565C63;
  --linea:#DCDAD4;
  --papel:#F2F0EB;
  --blanco:#FFFFFF;
  --senal:#E83424;
  --senal-osc:#C4271A;
  --sobre-senal:#FFFFFF;
  --wa:#1FA855;
  --wa-osc:#178A44;
  --rojo:#C4331D;

  --r:10px;
  --max:1180px;
  --hdr:112px;
}

*{box-sizing:border-box}

/* Cualquier elemento con el atributo hidden debe quedar oculto.
   Sin esta regla, .sheet{display:flex} vence al atributo y la ficha
   de producto queda cubriendo la pantalla y bloqueando los clics. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Barlow",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  padding-bottom:80px;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--tinta);color:#fff;padding:8px 14px;border-radius:6px}

:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}

/* ---------- CABECERA ---------- */
.hdr{
  position:sticky;top:0;z-index:40;
  background:var(--tinta);
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.hdr__bar{
  max-width:var(--max);margin:0 auto;
  padding:10px 16px;
  display:flex;align-items:center;gap:12px;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.brand__img{height:30px;width:auto}

.find{position:relative;flex:1 1 auto;min-width:0}
.find__in{
  width:100%;
  padding:10px 34px 10px 36px;
  background:#24272B;
  border:1px solid #383C41;
  border-radius:var(--r);
  color:#fff;
  -webkit-appearance:none;appearance:none;
}
.find__in::placeholder{color:#8B9198}
.find__in:focus{border-color:var(--senal);background:#2B2F33;outline:none}
.find__ico{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:#8B9198;stroke-width:2;stroke-linecap:round;
  pointer-events:none;
}
.find__x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;
  background:#3A3E43;color:#fff;font-size:18px;line-height:1;
  cursor:pointer;
}

.nav{
  max-width:var(--max);margin:0 auto;
  padding:0 16px 8px;
  display:flex;gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  flex:0 0 auto;
  padding:6px 12px;
  border-radius:100px;
  color:#B7BCC2;
  text-decoration:none;
  font-size:15px;font-weight:500;
  white-space:nowrap;
}
.nav a[aria-current="page"]{background:var(--senal);color:var(--sobre-senal);font-weight:600}

/* ---------- HERO ---------- */
.hero{
  background:var(--tinta);
  padding:34px 16px 32px;
  text-align:center;
  border-bottom:4px solid var(--senal);
}
.hero__logo{margin:0 auto;max-width:min(560px,90vw)}
.hero__logo img{width:100%;height:auto}
.hero__sub{
  margin:16px auto 20px;
  max-width:30ch;
  font-size:1.02rem;
  font-weight:500;
  color:#C3C8CE;
}
.hero__cta{
  border:0;
  background:var(--senal);color:var(--sobre-senal);
  padding:12px 28px;border-radius:100px;
  font-weight:600;cursor:pointer;
}
.hero__cta:hover{background:var(--senal-osc)}

/* ---------- TÍTULOS ---------- */
.h-view{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;font-size:2.5rem;
  margin:26px 0 4px;line-height:1;
}
.h-sec{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;font-size:1.7rem;
  margin:30px 0 12px;line-height:1;
}
.lead{margin:0 0 18px;color:var(--tinta-2);max-width:62ch}

/* ---------- CATEGORÍAS ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cats button{
  padding:16px 12px;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-left:4px solid var(--senal);
  border-radius:var(--r);
  text-align:left;font-weight:600;cursor:pointer;
}
.cats span{display:block;font-size:.82rem;font-weight:400;color:var(--tinta-2)}

/* ---------- FILTROS ---------- */
.filters{display:flex;flex-direction:column;gap:10px;margin:16px 0 6px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{
  flex:0 0 auto;padding:6px 13px;border-radius:100px;
  border:1px solid var(--linea);background:var(--blanco);
  cursor:pointer;font-size:.92rem;white-space:nowrap;
}
.chips button[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.sort{
  padding:9px 11px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--blanco);
}
.count{margin:6px 0 14px;font-size:.9rem;color:var(--tinta-2)}

/* ---------- GRILLA ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:8px;
}
.card{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
  text-align:left;
  cursor:pointer;
  padding:0;
  display:flex;flex-direction:column;
}
.card:hover{border-color:var(--tinta)}
.card__ph{position:relative;aspect-ratio:1/1;background:#F7F6F3}
.card__ph img{width:100%;height:100%;object-fit:contain;padding:8px}
.card__off{
  position:absolute;top:7px;left:7px;
  background:var(--rojo);color:#fff;
  padding:2px 7px;border-radius:4px;
  font-size:.74rem;font-weight:700;
}
.card__body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
.card__brand{font-size:.72rem;color:var(--tinta-2);letter-spacing:.04em}
.card__name{font-size:.93rem;font-weight:500;line-height:1.3;margin:0}
.card__name mark{background:#FFEEA8;color:inherit;padding:0 1px;border-radius:2px}
.card__foot{margin-top:auto;padding-top:7px}
.card__price{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.42rem;line-height:1}
.card__was{font-size:.8rem;color:var(--tinta-2);text-decoration:line-through;margin-left:5px}
.card__stock{font-size:.75rem;color:var(--tinta-2);margin-top:2px}
.card__stock.out{color:var(--rojo)}

.empty{
  padding:34px 18px;text-align:center;
  background:var(--blanco);border:1px dashed var(--linea);
  border-radius:var(--r);color:var(--tinta-2);
}
.empty b{display:block;color:var(--tinta);font-size:1.05rem;margin-bottom:5px}

/* ---------- BANDA TÉCNICOS ---------- */
.strip{
  margin:32px 0 8px;padding:20px;
  background:var(--tinta);color:#fff;border-radius:var(--r);
  display:flex;gap:16px;align-items:flex-start;
}
.strip__n{
  font-family:"Barlow Condensed",sans-serif;
  font-size:4.2rem;line-height:.8;font-weight:700;color:var(--senal);
}
.strip__t{margin:0;font-weight:600;font-size:1.05rem}
.strip__d{margin:4px 0 12px;color:#B7BCC2;font-size:.93rem}

/* ---------- SERVICIO ---------- */
.svc{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.svc li{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:14px 16px;
}
.svc h3{margin:0 0 3px;font-size:1.02rem}
.svc p{margin:0;color:var(--tinta-2);font-size:.93rem}

/* ---------- CONTACTO ---------- */
.info{
  margin:0 0 8px;padding:0;
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;
}
.info dt{padding:12px 16px 0;font-size:.78rem;color:var(--tinta-2)}
.info dd{margin:0;padding:0 16px 12px;font-weight:500;border-bottom:1px solid var(--linea)}
.info dd:last-child{border-bottom:0}

.form{display:flex;flex-direction:column;gap:6px}
.form label{font-size:.86rem;font-weight:600;margin-top:8px}
.form input,.form textarea{
  padding:11px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--blanco);
}
.form textarea{resize:vertical}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r);
  border:0;cursor:pointer;font-weight:600;text-decoration:none;
}
.btn--wide{width:100%;margin-top:14px}
.btn--wa{background:var(--wa);color:#fff;font-size:1.03rem}
.btn--wa:hover{background:var(--wa-osc)}
.btn--wa:disabled{background:#B9BDC1;cursor:not-allowed}
.btn--ghost{border:2px solid var(--senal);color:var(--senal);background:transparent;padding:8px 16px}

.wa-ico{
  width:19px;height:19px;flex:0 0 19px;background:currentColor;
  -webkit-mask:var(--wa-mask) center/contain no-repeat;
  mask:var(--wa-mask) center/contain no-repeat;
}
:root{
  --wa-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.08c-.24.68-1.42 1.31-1.96 1.36-.5.05-1.14.07-1.83-.11-.42-.13-.97-.31-1.66-.61-2.93-1.26-4.84-4.2-4.99-4.4-.15-.2-1.19-1.58-1.19-3.02s.76-2.14 1.03-2.44c.27-.3.58-.37.78-.37.19 0 .39 0 .56.01.18.01.42-.7.8.61.39.93 1.32 3.21 1.44 3.44.12.23.2.5.04.8-.16.3-.24.49-.47.75-.23.26-.49.58-.7.78-.23.23-.47.48-.2.94.27.46 1.2 1.98 2.57 3.21 1.77 1.58 3.26 2.07 3.72 2.3.46.23.73.19 1-.12.27-.3 1.15-1.34 1.46-1.8.3-.46.61-.38 1.03-.23.42.15 2.66 1.25 3.12 1.48.46.23.77.34.88.53.12.19.12 1.1-.12 1.78z'/%3E%3C/svg%3E");
}

.float{
  position:fixed;right:14px;bottom:14px;z-index:45;
  width:54px;height:54px;border-radius:50%;
  background:var(--wa);color:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.float .wa-ico{width:27px;height:27px;flex:0 0 27px}

/* ---------- FICHA DE PRODUCTO ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet__bg{position:absolute;inset:0;background:rgba(20,22,25,.62)}
.sheet__box{
  position:relative;
  width:100%;max-width:640px;max-height:93vh;
  background:var(--blanco);
  border-radius:16px 16px 0 0;
  display:flex;flex-direction:column;
  animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(28px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.sheet__box{animation:none}}
.sheet__x{
  position:absolute;right:10px;top:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(255,255,255,.94);
  box-shadow:0 1px 5px rgba(0,0,0,.2);
  font-size:23px;line-height:1;cursor:pointer;
}
.sheet__scroll{overflow-y:auto;padding:0 0 22px}

.gal__big{aspect-ratio:1/1;background:#F7F6F3;border-radius:16px 16px 0 0;overflow:hidden}
.gal__big img{width:100%;height:100%;object-fit:contain;padding:14px}
.gal__thumbs{display:flex;gap:6px;padding:8px 16px 0}
.gal__thumbs button{
  width:52px;height:52px;flex:0 0 52px;padding:3px;
  border:1px solid var(--linea);border-radius:7px;background:var(--blanco);cursor:pointer;
}
.gal__thumbs button[aria-current="true"]{border:2px solid var(--tinta)}
.gal__thumbs img{width:100%;height:100%;object-fit:contain}

.p{padding:14px 16px 0}
.p__brand{font-size:.8rem;color:var(--tinta-2);letter-spacing:.05em}
.p__name{font-size:1.32rem;line-height:1.25;margin:2px 0 6px}
.p__code{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;background:var(--papel);
  border:1px solid var(--linea);border-radius:5px;
  padding:2px 7px;color:var(--tinta-2);
}
.p__txt{white-space:pre-line;color:#2E3238;margin:14px 0 0}
.p__specs{width:100%;border-collapse:collapse;margin-top:12px;font-size:.92rem}
.p__specs th{
  text-align:left;font-weight:500;color:var(--tinta-2);
  padding:7px 10px 7px 0;border-bottom:1px solid var(--linea);
  width:42%;vertical-align:top;
}
.p__specs td{padding:7px 0;border-bottom:1px solid var(--linea);font-weight:500}

.p__tip{
  margin:16px 0 0;padding:13px 15px;
  background:#FDF3F1;
  border:1px solid #F1D2CC;border-left:4px solid var(--senal);
  border-radius:var(--r);
}
.p__tip h3{margin:0 0 4px;font-size:.97rem}
.p__tip p{margin:0;font-size:.93rem;color:#4A3B38;white-space:pre-line}

.p__buy{
  margin-top:18px;padding:16px;
  border-top:1px solid var(--linea);
  background:var(--papel);
}
.p__price{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:2.6rem;line-height:1}
.p__was{font-size:1rem;color:var(--tinta-2);text-decoration:line-through;margin-left:8px}
.p__stock{font-size:.88rem;color:var(--tinta-2);margin:2px 0 0}
.p__stock.out{color:var(--rojo);font-weight:600}
.p__note{margin:9px 0 0;font-size:.8rem;color:var(--tinta-2);text-align:center}

/* ---------- PIE ---------- */
.foot{
  margin-top:44px;padding:28px 16px 34px;
  background:var(--tinta);color:#9CA2A9;text-align:center;font-size:.88rem;
}
.foot p{margin:3px 0}
.foot__logo{height:34px;width:auto;margin:0 auto 12px}
.foot__mini{font-size:.78rem;color:#6E747B}

/* ---------- AVISO ---------- */
.toast{
  position:fixed;left:50%;bottom:86px;transform:translateX(-50%);
  z-index:70;max-width:88vw;
  background:var(--tinta);color:#fff;
  padding:11px 17px;border-radius:100px;font-size:.9rem;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

/* ---------- ESCRITORIO ---------- */
@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .cats{grid-template-columns:repeat(4,1fr)}
  .filters{flex-direction:row;align-items:center;justify-content:space-between}
  .svc{grid-template-columns:repeat(2,1fr)}
  .sheet{align-items:center}
  .sheet__box{border-radius:16px;max-height:88vh}
  .gal__big{border-radius:16px 16px 0 0}
  .btn--wide{width:auto;min-width:280px}
}
@media (min-width:1000px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .hdr__bar{padding:12px 16px}
  .find{max-width:520px;margin-left:auto}
  .brand__img{height:34px}
}