/* ============================================================
   VITALFORGE — hoja de estilos
   ------------------------------------------------------------
   V019. Todo tamaño, espaciado, filete y curva sale de un token
   declarado abajo. Si necesitas un valor nuevo, agrégalo a la
   escala en vez de escribir un número suelto: la versión anterior
   llegó a 29 tamaños de letra y 11 espaciados sin relación entre
   sí, y eso es lo que hacía ver la página descuidada.
   ============================================================ */

:root{
  /* --- color --- */
  --black:#0a0908;
  --black-deep:#050504;
  --charcoal:#17140f;
  --charcoal-2:#1f1b14;
  --gold:#f2b53c;
  --gold-bright:#ffd36b;
  --gold-deep:#a9761c;
  --white:#f6f3ec;
  --gray:#948d7d;          /* SOLO datos secundarios. Nunca párrafos. */
  --green:#3ea36b;
  --red:#d9634a;

  /* Dos filetes con trabajos distintos. El estructural separa;
     el dorado marca lo que está activo. Antes había uno solo,
     dorado, usado 53 veces para las dos cosas. */
  --rule: rgba(246,243,236,0.10);
  --rule-gold: rgba(242,181,60,0.35);

  /* --- escala tipográfica, 6 pasos --- */
  --t-xs:13px;
  --t-sm:16px;
  --t-base:20px;
  --t-lg:32px;
  --t-xl:56px;
  --t-display:clamp(48px, 7.2vw, 88px);

  /* --- espaciado, base 8 --- */
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:40px;
  --s-5:64px;
  --s-6:96px;
  --s-7:144px;

  /* --- movimiento --- */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-fast:150ms;
  --dur:220ms;
  --dur-slow:350ms;

  /* --- contenedores --- */
  /* Alto de una celda de fotografía. Lo usan la franja del héroe y la
     rejilla de categorías, para que las dos midan siempre igual. */
  --cell-h:300px;
  --wrap:1180px;
  --wrap-wide:1420px;
  /* Ancho de la línea de texto del pie. Estaba suelto en un style="" del
     HTML; vive aquí para que la CSP pueda prohibir los estilos en línea. */
  --measure-foot:280px;
  --gutter:var(--s-3);
}

*{box-sizing:border-box; margin:0; padding:0;}

/* El desplazamiento suave lo controla JS (duración y curva propias).
   El nativo pelearía con esa animación. */
html{scroll-behavior:auto;}
#productos, #como-pedir, #preguntas, #contacto, #nosotros{scroll-margin-top:var(--s-6);}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Barlow', system-ui, sans-serif;
  font-size:var(--t-sm);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.015em;
  line-height:0.96;
}
h4,h5{font-family:'Oswald', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;}

.eyebrow{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-size:12px;
  font-weight:600;
  color:var(--gold-deep);
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}

/* ---------- superficies del navegador ---------- */
::selection{background:var(--gold); color:var(--black-deep);}
html{scrollbar-color:var(--gold-deep) var(--black-deep); scrollbar-width:thin;}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:var(--black-deep);}
::-webkit-scrollbar-thumb{background:var(--gold-deep); border:2px solid var(--black-deep);}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
input, textarea{caret-color:var(--gold);}
.kpi-num, .p-price, .ci-price, .pd-price, .cart-total-row span:last-child{font-variant-numeric:tabular-nums;}

.skip-link{
  position:absolute; left:var(--s-2); top:-100px; z-index:200;
  background:var(--gold); color:var(--black-deep);
  font-family:'Oswald', sans-serif; font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
  padding:14px 20px;
  transition:top var(--dur) var(--ease-out);
}
.skip-link:focus{top:var(--s-2);}

/* Visible para lectores de pantalla, invisible en pantalla. Se usa en
   títulos que la estructura del documento necesita pero el diseño no. */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

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

/* La esquina cortada es un rasgo de marca. Se usa solo en botones. */
.forge-corner{clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);}

/* ============================================================
   BOTONES
   Todos responden al cursor con COLOR, no solo con desplazamiento:
   con "reducir movimiento" el desplazamiento se quita y sin un
   cambio de color el botón principal quedaba sin ninguna respuesta.
   ============================================================ */
.btn-primary, .btn-ghost{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-1);
  min-height:44px;
  padding:18px 32px;
  transition:background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn-primary{background:var(--gold); color:var(--black-deep);}
.btn-primary:hover{background:var(--gold-bright);}
.btn-primary:active{transform:scale(0.975);}
.btn-primary:disabled{opacity:0.4; cursor:not-allowed;}
.btn-ghost{color:var(--white); border:1px solid rgba(246,243,236,0.28); padding:17px 30px;}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-ghost:active{transform:scale(0.975);}

/* ============================================================
   ENCABEZADO
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,9,8,0.95);
  border-bottom:1px solid var(--rule);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2);
  padding:var(--s-2) var(--gutter);
  max-width:var(--wrap-wide); margin:0 auto;
}
.logo{display:flex; align-items:center; gap:10px; min-height:44px;}
.logo-mark-img{height:32px; width:auto; aspect-ratio:243/160;}
.logo-word{font-family:'Anton'; font-size:20px; letter-spacing:0.02em; text-transform:uppercase; color:var(--white);}
.logo-word span{color:var(--gold);}
nav.links{display:flex; gap:var(--s-4);}
nav.links a{
  font-family:'Oswald'; font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:0.14em; color:rgba(246,243,236,0.82);
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--dur) var(--ease-out);
}
nav.links a:hover{color:var(--gold);}
.nav-right{display:flex; align-items:center; gap:var(--s-1);}
.nav-cta{
  font-family:'Oswald'; font-weight:600; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:0.08em;
  border:1px solid rgba(246,243,236,0.3); color:var(--white);
  padding:12px 22px; min-height:44px;
  display:inline-flex; align-items:center;
  transition:border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-cta:hover{border-color:var(--gold); color:var(--gold);}
.cart-btn{
  position:relative; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  transition:color var(--dur) var(--ease-out);
}
.cart-btn:hover{color:var(--gold);}
/* Arranca oculto. Antes era un style="display:none" en el HTML, que
   obligaba a permitir 'unsafe-inline' en la CSP. app.js sigue mandando
   sobre este valor: pone display:flex al haber productos y display:none
   al vaciarse, y el estilo en línea que escribe el JS gana siempre.
   Por eso el estado inicial de aquí no pelea con él. */
.cart-badge{
  position:absolute; top:4px; right:2px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:50%;
  background:var(--gold); color:var(--black-deep);
  font-family:'Oswald'; font-size:11px; font-weight:700;
  display:none; align-items:center; justify-content:center;
}

/* ============================================================
   HÉROE — solo tipografía, sin imagen de fondo
   ============================================================ */
.hero{
  padding-top:calc(77px + var(--s-6));
  padding-bottom:var(--s-4);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
}
.hero h1{font-size:var(--t-display); line-height:0.94; margin:0;}
.hero p.sub{
  font-size:19px; line-height:1.65;
  color:var(--white);
  max-width:660px;
  text-wrap:pretty;
}
.hero-actions{display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; justify-content:center;}

/* ============================================================
   FRANJA DE FOTOGRAFÍA — las cuatro se leen como una sola pieza
   ============================================================ */
.shelf{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:2px;
  background:var(--charcoal);
  height:var(--cell-h);
}
.shelf-cell{position:relative; overflow:hidden; background:var(--charcoal); display:block; text-align:left;}
.shelf-cell img{
  width:100%; height:100%; object-fit:cover; opacity:0.72;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.shelf-cell:hover img{opacity:0.9; transform:scale(1.04);}
.shelf-cell:active{transform:scale(0.99);}
.shelf-lab{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px var(--s-3);
  background:linear-gradient(to top, rgba(5,5,4,0.96) 10%, rgba(5,5,4,0));
}
.shelf-nm{font-family:'Anton'; font-size:26px; line-height:1.05; text-transform:uppercase; color:var(--white);}
.shelf-tg{
  font-family:'Oswald'; font-size:12px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--gold); margin-top:6px; display:block;
  transition:color var(--dur) var(--ease-out);
}
.shelf-cell:hover .shelf-tg{color:var(--gold-bright);}

/* ============================================================
   FRANJA DE CONFIANZA
   ============================================================ */
.trust{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  background:var(--black-deep);
  border-top:1px solid var(--rule-gold);
}
.trust-item{padding:var(--s-3) var(--s-4); display:flex; flex-direction:column; gap:6px;}
.trust-item + .trust-item{border-left:1px solid var(--rule);}
.trust-item h4{font-size:14px; letter-spacing:0.1em; color:var(--gold);}
.trust-item p{font-size:15px; line-height:1.5; color:var(--white);}

/* ============================================================
   SECCIONES
   ============================================================ */
section{padding:var(--s-6) 0;}
.section-head{
  display:grid; grid-template-columns:minmax(0, 1fr) 380px;
  gap:var(--s-5); align-items:end;
  border-bottom:1px solid var(--rule);
  padding-bottom:var(--s-4);
  margin-bottom:var(--s-4);
}
.section-head h2{font-size:var(--t-xl); line-height:0.98; margin:0;}
.section-head p{font-size:var(--t-sm); line-height:1.65; color:var(--white);}

/* ---------- rejilla de categorías: 12 celdas iguales ----------
   Mismo tratamiento que la franja del héroe: fotografía a sangre,
   2px de separación y el rótulo sobre un degradado, para que las
   doce se lean como una sola pieza. Carlos la pidió pareja tras ver
   la versión desigual. */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:var(--cell-h);
  gap:2px;
  background:var(--charcoal);
}
.cat-card{
  position:relative; overflow:hidden; background:var(--charcoal);
  display:block; text-align:left; width:100%; padding:0;
  transition:transform var(--dur-fast) var(--ease-out);
}
.cat-img{
  width:100%; height:100%; object-fit:cover; opacity:0.72;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.cat-card:hover .cat-img{opacity:0.9; transform:scale(1.04);}
.cat-card:active{transform:scale(0.99);}
.cat-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px var(--s-3);
  background:linear-gradient(to top, rgba(5,5,4,0.96) 10%, rgba(5,5,4,0));
}
.cat-card h3{font-size:26px; line-height:1.05; color:var(--white);}
.cat-card .tag{
  font-family:'Oswald'; font-size:12px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--gold); margin-top:6px; display:block;
  transition:color var(--dur) var(--ease-out);
}
.cat-card:hover .tag{color:var(--gold-bright);}

/* ============================================================
   MARQUESINA DE MARCAS
   ============================================================ */
.brands{padding:var(--s-4) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden;}
.brands-label{
  display:block; text-align:center;
  font-family:'Oswald'; font-size:12px; text-transform:uppercase;
  letter-spacing:0.22em; color:var(--gold-deep); margin-bottom:var(--s-3);
}
/* La lista de marcas está repetida 4 veces en el HTML para fingir un
   bucle infinito, y el keyframe recorre exactamente un cuarto.

   Dos cosas tienen que cumplirse o el bucle salta a la vista:
   1) width:max-content, para que el 25% se calcule sobre el ancho del
      CONTENIDO y no sobre el de la caja. Sin esto la pista medía 1192px
      (lo que le daba el contenedor), trasladaba 298px y una repetición
      mide 1585px: pegaba un tirón en cada vuelta.
   2) el espacio entre marcas va como padding-right de cada una, no como
      gap del flex. Con gap, cuatro repeticiones miden 4 periodos menos
      un hueco, y ese hueco sobrante descuadra el 25%. Con padding la
      división es exacta.

   Un periodo son ~1649px, así que 18s dan ~92 px/s. */
.marquee-track{display:flex; width:max-content; white-space:nowrap; animation:marquee 18s linear infinite;}
.marquee-track span{
  font-family:'Anton'; font-size:22px; text-transform:uppercase;
  letter-spacing:0.02em; color:rgba(246,243,236,0.42);
  padding-right:var(--s-5);
}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-25%);}}

/* ============================================================
   CÓMO PEDIR
   ============================================================ */
.steps{background:var(--charcoal); padding:var(--s-6) 0;}
.step-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-4);}
.step .num{
  font-family:'Anton'; font-size:var(--t-xl); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--gold-deep);
  margin-bottom:var(--s-2);
}
.step h4{font-size:var(--t-sm); color:var(--white); margin-bottom:var(--s-1);}
.step p{font-size:15px; line-height:1.6; color:var(--white);}

/* ============================================================
   NOSOTROS — rejilla editorial separada por filetes, no tarjetas
   ============================================================ */
.about{background:var(--black);}
.about-head{margin-bottom:var(--s-4);}
.about-head h2{font-size:var(--t-xl); margin-bottom:var(--s-3);}
.about-lead{font-size:var(--t-base); line-height:1.6; color:var(--white); max-width:820px;}
.about-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  border-top:1px solid var(--rule);
}
.about-block{padding:var(--s-4) var(--s-4) var(--s-4) 0; border-bottom:1px solid var(--rule);}
.about-block:nth-child(even){padding-left:var(--s-4); padding-right:0; border-left:1px solid var(--rule);}
.about-block h3{font-size:22px; color:var(--gold); margin-bottom:var(--s-2);}
.about-block p{font-size:16.5px; line-height:1.75; color:var(--white);}
.about-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap; padding-top:var(--s-4);
}
.about-cta p{font-size:var(--t-base); color:var(--white); max-width:620px;}

/* ============================================================
   CIERRE
   ============================================================ */
.cta-banner{
  text-align:center;
  background:linear-gradient(180deg, var(--black) 0%, var(--charcoal) 100%);
  padding:var(--s-7) 0;
}
.cta-banner h2{font-size:var(--t-xl); margin-bottom:var(--s-3);}
.cta-banner h2 span{color:var(--gold);}
.cta-banner p{font-size:var(--t-base); line-height:1.6; color:var(--white); max-width:640px; margin:0 auto var(--s-4);}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq{background:var(--charcoal);}
.faq-list{border-top:1px solid var(--rule);}
.faq-item{border-bottom:1px solid var(--rule);}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-3) 0; min-height:44px; cursor:pointer; list-style:none;
  transition:color var(--dur) var(--ease-out);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{font-size:18px; line-height:1.3; color:var(--white); transition:color var(--dur) var(--ease-out);}
.faq-item summary:hover h3{color:var(--gold);}
.faq-item[open] summary h3{color:var(--gold);}
.faq-icon{width:20px; height:20px; flex:none; color:var(--gold-deep); transition:transform var(--dur-slow) var(--ease-out);}
.faq-item[open] .faq-icon{transform:rotate(180deg);}
.faq-answer{padding:0 0 var(--s-3) 0; max-width:860px;}
.faq-answer p{font-size:var(--t-sm); line-height:1.7; color:var(--white);}
.faq-foot{margin-top:var(--s-4); font-size:var(--t-sm); color:var(--white);}
.faq-foot a{color:var(--gold); display:inline-flex; align-items:center; min-height:44px; transition:color var(--dur) var(--ease-out);}
.faq-foot a:hover{color:var(--gold-bright);}

/* ============================================================
   PIE
   ============================================================ */
footer{padding:var(--s-5) 0 var(--s-7); border-top:1px solid var(--rule);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-4); margin-bottom:var(--s-4);}
/* Bloque del pie: la misma marca transparente del encabezado más el
   nombre como texto vivo. El PNG anterior traía el fondo negro
   incrustado, que se recortaba contra el fondo de la página, y un
   eslogan que no está en los datos aprobados. */
.foot-logo{display:flex; align-items:center; gap:12px; margin-bottom:var(--s-2);}
.foot-logo img{height:44px; width:auto; aspect-ratio:243/160;}
.foot-logo .logo-word{font-size:26px;}
.foot-grid h5{font-size:var(--t-xs); letter-spacing:0.14em; color:var(--gold); margin-bottom:var(--s-2);}
.foot-grid p{font-size:15px; line-height:1.7; color:var(--white);}
.foot-tagline{max-width:var(--measure-foot);}
.foot-grid a{display:inline-flex; align-items:center; min-height:44px; transition:color var(--dur) var(--ease-out);}
.foot-grid a:hover{color:var(--gold);}
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  padding-top:var(--s-3); border-top:1px solid var(--rule);
  font-size:var(--t-xs); color:var(--gray);
}
.admin-link{
  display:inline-flex; align-items:center; gap:6px; min-height:36px;
  font-family:'Oswald'; font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--gray);
  transition:color var(--dur) var(--ease-out);
}
.admin-link:hover{color:var(--gold);}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------
   En V018 medía 120px y era el objeto más ruidoso de la página,
   más que el titular. 64px basta y deja de competir.
   ============================================================ */
.float-wa{
  position:fixed; right:var(--s-3); bottom:var(--s-3); z-index:90;
  width:64px; height:64px; border-radius:50%;
  background:var(--gold); color:var(--black-deep);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  transition:background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.float-wa:hover{background:var(--gold-bright); transform:scale(1.06);}
.float-wa:active{transform:scale(0.96);}

/* ============================================================
   AVISO FLOTANTE
   ============================================================ */
#toast{
  position:fixed; left:50%; bottom:var(--s-4); transform:translateX(-50%) translateY(10px);
  background:var(--charcoal-2); color:var(--white);
  border:1px solid var(--rule-gold);
  font-family:'Oswald'; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.06em;
  padding:14px 24px; z-index:300;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================================================
   SUPERPOSICIONES (categorías, detalle, carrito, checkout)
   ============================================================ */
.overlay{
  display:none;
  position:fixed; inset:0; z-index:200;
  background:rgba(5,5,4,0.82);
  padding:var(--s-3);
  align-items:center; justify-content:center;
}
.overlay.open{display:flex;}
@keyframes boxIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeOnly{from{opacity:0;} to{opacity:1;}}
.pmodal-box, .pd-box, .co-box{
  background:var(--charcoal);
  border:1px solid var(--rule-gold);
  width:100%; max-height:88vh; overflow-y:auto;
  animation:boxIn 220ms var(--ease-out);
}
.pmodal-box{max-width:1120px;}
.pd-box{max-width:880px; position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.co-box{max-width:620px;}

.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);
  padding:26px var(--s-4) 22px;
  border-bottom:1px solid var(--rule);
  position:sticky; top:0; background:var(--charcoal); z-index:2;
}
.modal-head h3{font-size:var(--t-lg); margin-top:6px;}
.modal-close{
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); color:var(--white); font-size:18px;
  transition:border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.modal-close:hover{border-color:var(--gold); color:var(--gold);}
.modal-close:active{transform:scale(0.94);}

.pgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:var(--s-2); padding:var(--s-3) var(--s-4);
}
.p-card{background:var(--black); border:1px solid var(--rule); display:flex; flex-direction:column;}
.p-card-img-wrap{position:relative; aspect-ratio:1; background:#f2f0ea; cursor:pointer;}
.p-card-img-wrap img{width:100%; height:100%; object-fit:contain;}
.p-size-badge{
  position:absolute; top:8px; left:8px;
  background:var(--gold); color:var(--black-deep);
  font-family:'Oswald'; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; padding:4px 8px;
}
.p-card-body{padding:var(--s-2); display:flex; flex-direction:column; gap:6px; flex-grow:1;}
.p-name{font-family:'Oswald'; font-size:14px; font-weight:600; line-height:1.35; color:var(--white); cursor:pointer;}
.p-name:hover{color:var(--gold);}
.p-meta{font-size:13px; color:var(--gray);}
.p-bottom{display:flex; align-items:center; justify-content:space-between; gap:var(--s-1); margin-top:auto; padding-top:var(--s-1);}
.p-price{font-family:'Oswald'; font-size:var(--t-sm); font-weight:700; color:var(--gold);}
.add-btn{
  font-family:'Oswald'; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em;
  background:var(--gold); color:var(--black-deep);
  min-height:44px; padding:0 14px;
  transition:background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.add-btn:hover{background:var(--gold-bright);}
.add-btn:active{transform:scale(0.95);}
.add-btn.added{background:var(--green); color:var(--white);}
.modal-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border-top:1px solid var(--rule);
}
.modal-foot p{font-size:15px; color:var(--white);}

/* ---------- detalle de producto ---------- */
.pd-box .modal-close{position:absolute; top:var(--s-2); right:var(--s-2); z-index:3; background:var(--charcoal);}
.pd-img-wrap{background:#f2f0ea; aspect-ratio:1;}
.pd-img-wrap img{width:100%; height:100%; object-fit:contain;}
.pd-body{padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2);}
.pd-body h3{font-size:26px;}
.pd-meta{font-family:'Oswald'; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.1em; color:var(--gray);}
.pd-price{font-family:'Oswald'; font-size:var(--t-lg); font-weight:700; color:var(--gold);}
.pd-desc{font-size:15px; line-height:1.7; color:var(--white);}
.pd-actions{margin-top:var(--s-1);}

/* ---------- carrito ---------- */
#cartDrawer{justify-content:flex-end; padding:0;}
@keyframes slideIn{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);}}
.cart-box{
  background:var(--charcoal); border-left:1px solid var(--rule-gold);
  width:100%; max-width:440px; height:100%;
  display:flex; flex-direction:column;
  animation:slideIn 250ms var(--ease-out);
}
.cart-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  padding:var(--s-3) var(--s-3); border-bottom:1px solid var(--rule);
}
.cart-head h3{font-size:26px;}
.cart-items{flex-grow:1; overflow-y:auto; padding:var(--s-2) var(--s-3);}
.cart-empty{padding:var(--s-5) 0; text-align:center; font-size:15px; line-height:1.7; color:var(--white);}
.cart-item{display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--s-2); padding:var(--s-2) 0; border-bottom:1px solid var(--rule);}
.cart-item img{width:64px; height:64px; object-fit:contain; background:#f2f0ea;}
.ci-info{display:flex; flex-direction:column; gap:5px; min-width:0;}
.ci-name{font-family:'Oswald'; font-size:14px; font-weight:600; color:var(--white); line-height:1.35;}
.ci-meta{font-size:12px; color:var(--gray);}
.ci-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s-1); margin-top:2px;}
.qty-ctrl{display:flex; align-items:center; border:1px solid var(--rule);}
.qty-ctrl button{
  width:44px; height:44px; color:var(--white); font-size:var(--t-sm);
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.qty-ctrl button:hover{background:var(--charcoal-2); color:var(--gold);}
.qty-ctrl span{min-width:32px; text-align:center; font-family:'Oswald'; font-size:14px;}
.ci-price{font-family:'Oswald'; font-size:15px; font-weight:700; color:var(--gold);}
.ci-remove{
  align-self:flex-start;
  font-family:'Oswald'; font-size:12px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--gray); min-height:44px; display:inline-flex; align-items:center;
  transition:color var(--dur) var(--ease-out);
}
.ci-remove:hover{color:var(--red);}
.cart-foot{padding:var(--s-3); border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:var(--s-2);}
.cart-total-row{display:flex; align-items:center; justify-content:space-between; font-family:'Oswald'; font-size:var(--t-base); font-weight:600;}
.cart-total-row span:last-child{color:var(--gold);}
.cart-foot .btn-primary{width:100%;}
.cart-note{font-size:13px; line-height:1.5; color:var(--gray);}

/* ---------- checkout ---------- */
.co-body{padding:var(--s-3) var(--s-4) var(--s-4);}
.co-section{margin-bottom:var(--s-3);}
.co-section h4{font-size:var(--t-xs); letter-spacing:0.14em; color:var(--gold); margin-bottom:var(--s-2);}
.co-field{margin-bottom:var(--s-2);}
.co-field label{display:block; font-family:'Oswald'; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--white); margin-bottom:6px;}
.co-optional{color:var(--gray); letter-spacing:0.04em;}
.co-field input, .co-field textarea, .co-select{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--black); border:1px solid var(--rule); color:var(--white);
  /* 16px evita que iOS haga zoom al enfocar el campo. */
  font-family:'Barlow'; font-size:16px;
  transition:border-color var(--dur) var(--ease-out);
}
.co-field textarea{min-height:88px; resize:vertical; line-height:1.5;}
.co-field input:focus, .co-field textarea:focus, .co-select:focus{border-color:var(--gold); outline:2px solid transparent;}

/* Autorizacion de datos (Ley 1581). El renglon entero mide 44px de alto
   y la etiqueta es clicable: si no, la casilla es un blanco de 24px en
   el movil, que es justo el defecto que arrastraba V018 dentro de los
   modales. El estado activo se marca solo con color, sin desplazamiento,
   porque el movimiento no llega a todas las maquinas. */
.co-consent{
  display:flex;
  align-items:center;
  gap:var(--s-1);
  min-height:44px;
  margin-bottom:var(--s-2);
}
/* La casilla nativa se pinta blanca sobre el fondo oscuro y grita mas
   que el boton principal. Se rehace con el mismo fondo y filete que los
   demas campos del formulario, y el dorado aparece solo al marcarla,
   que es cuando marca algo activo. */
.co-consent input{
  flex:0 0 auto;
  width:var(--s-3);
  height:var(--s-3);
  appearance:none;
  -webkit-appearance:none;
  background:var(--charcoal);
  border:1px solid var(--rule);
  display:grid;
  place-content:center;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.co-consent input:hover{border-color:var(--rule-gold);}
.co-consent input:checked{background:var(--gold); border-color:var(--gold);}
.co-consent input:checked::before{
  content:"✓";
  color:var(--black);
  font-size:var(--t-sm);
  line-height:1;
}
.co-consent label{
  font-size:var(--t-xs);
  line-height:1.5;
  color:var(--white);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.co-consent:hover label{color:var(--gold-bright);}
.co-consent input:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.co-field input:focus-visible, .co-field textarea:focus-visible, .co-select:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
.co-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-2);}
.co-select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b53c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  padding-right:40px;
}
.pay-options{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-1);}
.pay-opt{
  border:1px solid var(--rule); background:var(--black);
  padding:var(--s-2) var(--s-1); min-height:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--white);
  transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.pay-opt:hover{border-color:var(--gold-deep);}
.pay-opt[aria-checked="true"]{border-color:var(--gold); background:var(--charcoal-2); color:var(--gold);}
.pay-opt .pi{width:22px; height:22px;}
.pay-opt .pl{font-family:'Oswald'; font-size:12px; text-transform:uppercase; letter-spacing:0.08em;}
.gateway-note{margin-top:var(--s-2); font-size:14px; line-height:1.6; color:var(--white);}
.co-summary{border-top:1px solid var(--rule); padding-top:var(--s-2); margin-bottom:var(--s-3);}
.co-summary-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); font-size:14px; padding:5px 0; color:var(--white);}
.co-summary-row.total{
  border-top:1px solid var(--rule); margin-top:var(--s-1); padding-top:var(--s-2);
  font-family:'Oswald'; font-size:var(--t-sm); font-weight:700;
}
.co-summary-row.total span:last-child{color:var(--gold);}
.co-submit{width:100%;}

/* ============================================================
   PÁGINA DE GRACIAS
   ============================================================ */
.thanks{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:var(--s-3); padding:var(--s-6) var(--gutter);
}
.thanks h1{font-size:var(--t-display); line-height:0.94;}
.thanks p{font-size:19px; line-height:1.65; color:var(--white); max-width:560px;}
.thanks-actions{display:flex; gap:var(--s-2); flex-wrap:wrap; justify-content:center; margin-top:var(--s-1);}

/* ============================================================
   REVELADO AL DESPLAZAR
   ============================================================ */
.reveal{opacity:0; transform:translateY(20px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.reveal.in{opacity:1; transform:none;}

/* ============================================================
   REDUCIR MOVIMIENTO
   ------------------------------------------------------------
   "Menos y más suave, nunca cero." Se quitan los desplazamientos
   y las escalas, y se dejan los fundidos y los cambios de color:
   una interfaz que no responde al cursor se siente rota. Todos los
   botones cambian de color en :hover, así que aquí siguen vivos.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .cat-card:hover .cat-img,
  .shelf-cell:hover img{transform:none;}
  .btn-primary:active, .btn-ghost:active, .add-btn:active,
  .modal-close:active, .cat-card:active, .shelf-cell:active{transform:none;}
  .float-wa:hover{transform:none;}
  .float-wa:active{transform:none;}
  .pmodal-box, .pd-box, .co-box, .cart-box{animation:fadeOnly 180ms var(--ease-out);}
  .reveal{transform:none; transition:opacity var(--dur-slow) var(--ease-out);}
  /* La marquesina se frena un poco, no se detiene ni se arrastra.
     Antes estaba en 110s, casi cuatro veces más lenta que la normal,
     y como Carlos siempre ve esta rama, la marquesina le parecía
     congelada. 24s son ~68 px/s: algo más suave que los 91 px/s de
     la normal, pero se lee como una marquesina y no como un error. */
  .marquee-track{animation-duration:24s;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .section-head{grid-template-columns:1fr; gap:var(--s-3); align-items:start;}
  :root{--cell-h:240px;}
  .cat-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .step-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-3);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  nav.links{display:none;}
}

@media (max-width: 760px){
  :root{--gutter:20px;}
  .hero{padding-top:calc(69px + var(--s-4)); padding-bottom:var(--s-3);}
  .hero-actions{flex-direction:column; align-items:stretch; width:100%; max-width:420px;}
  .hero-actions .btn-primary, .hero-actions .btn-ghost{width:100%;}
  :root{--cell-h:210px;}
  .shelf{grid-template-columns:repeat(2, minmax(0,1fr)); height:calc(var(--cell-h) * 2 + 2px);}
  .shelf-nm{font-size:21px;}
  .trust{grid-template-columns:1fr;}
  .trust-item + .trust-item{border-left:none; border-top:1px solid var(--rule);}
  .cat-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .about-block, .about-block:nth-child(even){padding:var(--s-3) 0; border-left:none; padding-left:0;}
  .about-cta{flex-direction:column; align-items:flex-start;}
  .step-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:var(--s-3);}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:var(--s-2);}
  .pd-box{grid-template-columns:1fr;}
  .co-grid{grid-template-columns:1fr;}
  .modal-head, .pgrid, .modal-foot, .co-body{padding-left:20px; padding-right:20px;}
  .float-wa{width:56px; height:56px;}
  section{padding:var(--s-5) 0;}
  .cta-banner{padding:var(--s-5) 0;}
}

/* ============================================================
   PÁGINAS DE CATEGORÍA · categorias/*.html
   ------------------------------------------------------------
   Las genera tools/build-category-pages.mjs. Los productos son
   HTML real, escrito en el archivo: eso es todo el motivo de que
   estas páginas existan, así que NO pueden pasar a pintarse desde
   JS ni usar .reveal (arranca en opacity:0, y la máquina de Carlos
   pide siempre "reducir movimiento").
   Cargan catalog.js y app.js al final del body, así que sí tienen
   carrito, detalle de producto y checkout, los mismos de la tienda.
   Reutilizan .pgrid, .p-card, .p-name, .p-meta y .p-price tal
   como están. Lo de abajo es solo lo que faltaba.
   ============================================================ */

:root{
  /* Alto del encabezado fijo. 77px es el mismo valor que .hero ya
     traia suelto en su padding-top; medido en el navegador el
     encabezado da 79.8px, asi que el margen real queda 3px mas
     corto que lo que dice el token. Se deja igual a proposito para
     que las dos paginas empiecen a la misma altura. */
  --header-h:77px;
}

.cat-page{
  padding-top:calc(var(--header-h) + var(--s-5));
  padding-bottom:var(--s-6);
}

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1);
  font-family:'Oswald', sans-serif; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:0.14em;
  color:var(--gray);
  margin-bottom:var(--s-2);
}
.crumbs a{
  color:var(--white);
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--dur) var(--ease-out);
}
.crumbs a:hover{color:var(--gold);}

/* El título de estas páginas es un h1, no un h2 como en la tienda. */
.cat-head h1{font-size:var(--t-xl); line-height:0.98; margin:0;}

/* .pgrid nace dentro de un modal y trae su propio relleno lateral.
   Aquí ya vive dentro de .wrap, así que sobra. */
.pgrid-page{padding:0;}

/* El nombre es un h2 aquí y un div en la tienda, así que hay que
   devolverle la caja baja y el interletrado normal que la regla de
   encabezados le quita. El cursor y el dorado al pasar SÍ van: el
   nombre abre el detalle del producto, igual que en la tienda. */
.pgrid-page h2.p-name{
  text-transform:none;
  letter-spacing:normal;
}

.cat-note{
  font-size:var(--t-sm); line-height:1.65; color:var(--white);
  max-width:660px;
  margin-top:var(--s-4);
}

.cat-actions{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--rule);
}

@media (max-width:768px){
  .cat-page{padding-top:calc(var(--header-h) + var(--s-4));}
  .cat-actions .btn-primary, .cat-actions .btn-ghost{width:100%;}
}