/* ==========================================================================
   HOJA DE ESTILO DE LAS PÁGINAS DE PRODUCTO — Boss IN

   La usan todas las páginas de la carpeta "p/" (una por producto).
   Los colores y las tipografías son los mismos del catálogo, para que el
   cliente que entra desde WhatsApp vea la misma tienda.

   Este archivo se edita a mano. "construir.js" NO lo toca ni lo borra:
   sólo escribe los .html de al lado.
   ========================================================================== */

:root{
  --dark:#0F1113;
  --dark-2:#191C20;
  --dark-line:#2A2E34;
  --ink:#15171A;
  --ink-2:#6A6E76;
  --paper:#FFFFFF;
  --paper-2:#FFFFFF;
  --paper-3:#F4F5F7;
  --line:#E3E5E9;
  --brand:#D8241C;
  --brand-strong:#A81813;
  --soft:#FDECEA;
  --sombra:0 1px 2px rgba(16,18,20,.04), 0 8px 24px rgba(16,18,20,.06);
}

/* modo oscuro: igual que en el catálogo */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDEFF2;
    --ink-2:#98A0A9;
    --paper:#0D0F12;
    --paper-2:#15181C;
    --paper-3:#1B1F24;
    --line:#282D33;
    --brand:#FF5A4F;
    --brand-strong:#FF877F;
    --soft:#2B1714;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.mono{font-family:'DM Mono',ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}

.shell{max-width:1060px;margin:0 auto;padding:0 20px;}

/* ---------- barra de arriba ---------- */
.barra{background:var(--dark);border-bottom:1px solid var(--dark-line);}
.barra .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px;
}
.wordmark{
  font-family:'Anton','Archivo Black',Impact,sans-serif;font-weight:400;
  letter-spacing:.01em;line-height:1;display:inline-flex;align-items:baseline;gap:.2em;
  font-size:23px;text-decoration:none;
}
.wordmark .b{color:#D8241C;}
.wordmark .i{color:#FFFFFF;}
.barra .volver{
  color:#C9CDD3;text-decoration:none;font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.barra .volver:hover{color:#FFFFFF;}
.barra .volver svg{width:15px;height:15px;flex:none;}

/* ---------- miga de pan ---------- */
.miga{
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);
  padding:20px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.miga a{color:var(--ink-2);text-decoration:none;}
.miga a:hover{color:var(--brand);}
.miga span{opacity:.45;}
.miga b{color:var(--ink);font-weight:500;}

/* ---------- ficha ---------- */
.ficha{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:36px;align-items:start;padding:22px 0 44px;
}
.foto{
  margin:0;background:#FFFFFF;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--sombra);
  /* la foto queda fija mientras se bajan las características y el video,
     así el cliente no pierde de vista el producto */
  position:sticky;top:18px;
}
/* Las fotos del catálogo no tienen todas la misma forma: van desde muy
   verticales (341x609) hasta bien apaisadas (760x379). Por eso la caja toma
   la proporción de cada foto en vez de forzar un cuadrado, que en el celular
   dejaba media pantalla en blanco. El alto y el ancho vienen escritos en el
   HTML, así que el navegador ya reserva el lugar y la página no "salta". */
.foto img{width:100%;height:auto;padding:14px;}

h1{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:106%;
  font-size:30px;line-height:1.18;letter-spacing:-.015em;
  margin:0 0 12px;
}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px;}
.meta .cod{
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);
}
.meta .caja{
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--paper-3);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;
}

/* ---------- precios ---------- */
.precios{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.pr{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;
}
.pr.may{border-color:var(--brand);background:var(--soft);}
.pr .et{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;
}
.pr.may .et{color:var(--brand-strong);}
.pr .mt{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:106%;
  font-size:22px;line-height:1.1;letter-spacing:-.01em;
}
.pr .antes{
  display:block;font-family:'DM Mono',monospace;font-size:12px;font-weight:400;
  color:var(--ink-2);text-decoration:line-through;letter-spacing:0;
}
.aviso{font-size:13px;color:var(--ink-2);margin-bottom:24px;}
.sinprecio{
  background:var(--paper-3);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;margin-bottom:24px;font-size:14px;
}

/* ---------- agotado ---------- */
.ago{
  border:1px solid var(--line);border-left:3px solid var(--brand);
  background:var(--paper-3);border-radius:12px;padding:14px 16px;margin-bottom:24px;
}
.ago b{display:block;margin-bottom:4px;}
.ago span{font-size:13.5px;color:var(--ink-2);}

/* ---------- bloques de datos ---------- */
.bloque{margin-bottom:26px;}
.bt{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;
}
.bloque ul{margin:0;padding:0;list-style:none;}
.bloque li{
  position:relative;padding-left:16px;margin-bottom:5px;font-size:14.5px;
}
.bloque li::before{
  content:"";position:absolute;left:0;top:.65em;
  width:7px;height:1.5px;background:var(--brand);
}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chips span{
  font-size:12.5px;border:1px solid var(--line);background:var(--paper-2);
  border-radius:999px;padding:4px 12px;color:var(--ink-2);
}

/* ---------- video ---------- */
.video{
  border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:#000;
}
.video video,.video iframe{
  width:100%;display:block;border:0;aspect-ratio:1/1;background:#000;
}
.video iframe{aspect-ratio:16/9;}
.vref{
  font-size:12px;line-height:1.45;color:var(--ink-2);
  background:var(--paper-3);padding:9px 12px;border-top:1px solid var(--line);
}
.vcred{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:var(--ink-2);background:var(--paper-3);padding:0 12px 9px;
}
.vcred a{color:var(--ink-2);}

/* ---------- botones ---------- */
.acc{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:9px;border:1.5px solid transparent;
  font-family:'Public Sans',sans-serif;font-weight:650;font-size:14.5px;
  text-decoration:none;cursor:pointer;line-height:1;
}
.btn svg{width:17px;height:17px;flex:none;}
.btn-rojo{background:var(--brand);color:#FFFFFF;}
.btn-rojo:hover{background:var(--brand-strong);}
.btn-linea{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-linea:hover{border-color:var(--ink-2);}

/* ---------- condiciones ---------- */
.cond{
  border-top:1px solid var(--line);padding:30px 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.cond div .lbl{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;
}
.cond div .val{font-size:14px;font-weight:600;}
.cond div .sub{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);}

/* ---------- otros productos ---------- */
.otros{border-top:1px solid var(--line);padding:30px 0 50px;}
.otros h2{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:106%;
  font-size:19px;margin:0 0 18px;letter-spacing:-.01em;
}
.rejilla{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.rejilla a{
  text-decoration:none;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--paper-2);
}
.rejilla a:hover{border-color:var(--ink-2);}
.rejilla img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#FFFFFF;padding:8px;}
.rejilla .n{
  font-size:12.5px;line-height:1.35;padding:8px 10px 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rejilla .v{
  font-family:'DM Mono',monospace;font-size:11.5px;color:var(--ink-2);
  padding:0 10px 10px;
}

/* ---------- pie ---------- */
footer{background:var(--dark);color:#9AA1A9;padding:34px 0;font-size:13.5px;}
footer .shell{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;}
footer .wordmark{font-size:20px;}
footer .dir{margin-top:9px;line-height:1.6;}
footer a{color:#C9CDD3;}
footer .nota{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:#6E757D;align-self:flex-end;
}

/* ---------- celular ---------- */
@media (max-width:900px){
  .rejilla{grid-template-columns:repeat(3,1fr);}
  .cond{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .ficha{grid-template-columns:1fr;gap:22px;padding-bottom:30px;}
  .foto{position:static;}                 /* en el celular va una cosa abajo de la otra */
  h1{font-size:24px;}
  .pr .mt{font-size:19px;}
  .acc .btn{flex:1 1 100%;}
}
@media (max-width:420px){
  .rejilla{grid-template-columns:repeat(2,1fr);}
  .precios{grid-template-columns:1fr;}
}

/* ---------- páginas de categoría (carpeta c/) ----------
   Sólo para las páginas nuevas de categoría: todo va dentro de .pag-cat,
   así las páginas de producto quedan exactamente igual. */
.pag-cat .cat-cab{padding:6px 0 26px;max-width:760px;}
.pag-cat .cat-cab h1{margin-bottom:12px;}
.pag-cat .cat-cab p{margin:0 0 10px;color:var(--ink-2);font-size:15.5px;line-height:1.6;}
.pag-cat .cat-cab .acc{margin-top:18px;}
.pag-cat .cat-lista{padding-top:26px;}
.pag-cat .cat-faq{border-top:1px solid var(--line);padding:30px 0 10px;max-width:760px;}
.pag-cat .cat-faq h2,.pag-cat .cat-otras h2{font-family:'Archivo',sans-serif;font-size:20px;font-weight:800;margin:0 0 14px;}
.pag-cat .cat-faq details{border:1px solid var(--line);border-radius:12px;padding:0 16px;margin-bottom:10px;background:var(--paper-2);}
.pag-cat .cat-faq summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;}
.pag-cat .cat-faq summary::-webkit-details-marker{display:none;}
.pag-cat .cat-faq summary::after{content:"+";float:right;color:var(--brand);font-weight:800;}
.pag-cat .cat-faq details[open] summary::after{content:"−";}
.pag-cat .cat-faq details p{margin:0 0 14px;color:var(--ink-2);}
.pag-cat .cat-otras{padding:26px 0 40px;}
.pag-cat .cat-otras div{display:flex;flex-wrap:wrap;gap:8px;}
.pag-cat .cat-otras a{padding:8px 14px;border:1px solid var(--line);border-radius:99px;text-decoration:none;font-size:13.5px;font-weight:600;}
.pag-cat .cat-otras a:hover{border-color:var(--brand);color:var(--brand);}