/* Estilos de las páginas estáticas de producto y categoría.
   Son la puerta de entrada desde Google: página propia, ligera y con la misma
   identidad. Van en un archivo aparte para que el navegador lo guarde una vez
   y las demás páginas carguen casi sin peso. */
@font-face{font-family:"Barlow Condensed";src:url(/fuentes/barlow-cond-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fuentes/barlow-cond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(/fuentes/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/fuentes/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--volt:#C6F135; --grafito:#1C1F23; --hondo:#15181B; --hueso:#F4F2EE;
  --acero:#8A9097; --acero-osc:#5A5D63; --panel:#24282C; --linea:#2E3338; --blanco:#FFF;
  --r:14px; --r-pill:999px}
*{margin:0; padding:0; box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--hondo); color:var(--hueso); font-family:Barlow,system-ui,sans-serif;
  font-size:17px; line-height:1.47; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--volt)}
.barra{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:var(--grafito); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:10}
.barra__logo img{height:32px; width:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px;
  padding:11px 22px; border-radius:var(--r-pill); text-decoration:none; border:1px solid transparent;
  font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap}
.btn--volt{background:var(--volt); color:var(--grafito)}
.btn--linea{border-color:var(--acero); color:var(--hueso)}
.btn--grande{width:100%; margin-top:12px; font-size:16px; min-height:52px}
.hoja{max-width:1100px; margin:0 auto; padding:28px 20px 64px}
.miga{color:var(--acero); font-size:14px; margin-bottom:22px}
.miga a{color:var(--acero); text-decoration:none}
.miga a:hover{color:var(--volt)}
h1{font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:800;
  font-size:clamp(2rem,5vw,3.1rem); line-height:1.03; letter-spacing:-.02em;
  text-transform:uppercase; margin:6px 0 10px}
.sku{font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--acero)}
.precio{font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:800; font-size:30px;
  letter-spacing:.01em; margin-bottom:16px}
.desc{color:var(--acero); max-width:62ch; margin-bottom:8px}
.ficha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:38px; align-items:start}
@media (max-width:760px){.ficha{grid-template-columns:1fr; gap:24px}}
.ficha__foto{background:var(--hueso); border-radius:var(--r); overflow:hidden; aspect-ratio:1}
.ficha__foto .foto{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.ficha__foto .foto--llena{mix-blend-mode:normal; object-fit:cover}
.foto--vacia{width:100%; height:100%; background:
  repeating-linear-gradient(45deg,#E7E4DE 0 9px,#EFEDE8 9px 18px)}
.aviso{margin-top:20px; padding:15px 17px; border-radius:var(--r);
  border:1px solid rgba(198,241,53,.4); background:rgba(198,241,53,.07); font-size:16px}
.datos{margin-top:24px; border-top:1px solid var(--linea);
  display:grid; grid-template-columns:auto 1fr; gap:0}
.datos dt,.datos dd{padding:13px 0; border-bottom:1px solid var(--linea)}
.datos dt{color:var(--acero); font-size:15px; padding-right:26px}
.datos dd{text-align:right}
/* El mínimo es 150 px, no 210: con 210 en un teléfono de 390 px solo cabía UNA
   columna y cada ficha ocupaba la pantalla entera. Con 150 entran dos, que es
   como se ve cualquier tienda en el celular. */
.rejilla{list-style:none; display:grid; gap:14px; margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (max-width:460px){
  .rejilla{gap:10px}
  .rejilla a{padding:10px}
  .mini__n{font-size:16px}
  .mini__p{font-size:17px; margin-top:8px}
  .mini__sku{font-size:11px}
}
.rejilla a{display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--hueso);
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); padding:13px;
  height:100%}
.rejilla a:hover{border-color:rgba(198,241,53,.5)}
/* Sin multiply: aquí la tarjeta es oscura, así que el recorte va sobre una
   plancha hueso. Con multiply se fundiría con el panel y la pieza saldría sucia. */
.rejilla img,.mini--vacia{width:100%; aspect-ratio:1; object-fit:contain; background:var(--hueso);
  border-radius:9px; margin-bottom:9px; padding:6px}
.mini--vacia{display:block; background:
  repeating-linear-gradient(45deg,#E7E4DE 0 9px,#EFEDE8 9px 18px)}
.mini__sku{font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.17em; color:var(--acero)}
.mini__n{font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:800; font-size:18px;
  line-height:1.1; text-transform:uppercase; margin-bottom:auto}
.mini__p{font-family:"Barlow Condensed",Barlow,sans-serif; font-weight:800; font-size:19px;
  margin-top:10px}
.pedir{margin-top:34px; max-width:420px}
.pie{background:var(--grafito); border-top:1px solid var(--linea); padding:30px 20px 40px;
  font-size:14px; color:var(--acero)}
.pie p{max-width:1060px; margin:0 auto 10px}
.pie a{color:var(--acero); text-decoration:none}
.pie a:hover{color:var(--volt)}
.tenue{font-size:13px; line-height:1.6}
:focus-visible{outline:3px solid var(--volt); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}