/* ============================================================================
   tienda.css — el sistema visual de la TIENDA, para las páginas que no son la home.

   POR QUÉ EXISTE (2026-08-07): las fichas de producto se generaron reusando la
   plantilla de las guías, que a su vez salió de las páginas legales. Resultado: la
   página donde alguien gasta $35.000 estaba vestida de Términos y Condiciones —
   columna de 780px, títulos con barra verde, nav sin menú ni carrito, footer legal.
   La identidad real de la marca vivía atrapada en el <style> de index.html, sin
   forma de reusarla.

   Esto NO inventa una estética nueva: es la de index.html, extraída tal cual
   (mismos tokens, misma tipografía, mismo nav, mismo footer) para que la ficha y
   la landing se vean de la misma tienda.

   QUIÉN LO USA: las fichas de /productos/. legal.css sigue siendo el de las
   páginas legales y NO se toca.

   ⚠ Si cambia la identidad en index.html, cambia acá también. Son dos copias y esa
   es la deuda conocida de este archivo: la alternativa era refactorizar la home
   entera, que es mucho más riesgo del que justifica el problema de hoy.
   ========================================================================== */

:root{
  --bg:#000000;
  --s1:#0a0a0b;        /* superficie elevada (paneles, tarjetas) */
  --s2:#0f0f11;        /* superficie 2do nivel (inputs, chips) */
  --bd:rgba(255,255,255,.08);
  --bd2:rgba(255,255,255,.15);
  --bdg:#1d3a16;
  --green:#5bb136; --green-lite:#6fce45; --green-dim:rgba(91,177,54,.16);
  --red:#e51f23;
  --txt:#ffffff; --muted:#9a9aa2; --muted2:#8a8a92;
  --r:4px; --r-lg:6px;
  --maxw:1140px;       /* la home usa 1440; la ficha es más angosta a propósito:
                          una columna de texto de 1440 no se lee */
  --pad:clamp(20px,4vw,32px);
  --sec:clamp(56px,7vw,96px);
  --hdr:72px;
  --splash:var(--green);   /* lo pisa cada producto con SU color (ver el generador) */
}

*{box-sizing:border-box}

/* ⚠ height:auto NO es decorativo: es el freno de una imagen estirada.
   Una <img width="1000" height="1000"> con width:100% en CSS y SIN height:auto
   conserva los 1000px de alto del atributo mientras el ancho se achica -> el
   producto sale deformado. Pasó el 2026-08-07 en las 5 fichas. Las reglas que
   necesitan alto fijo (nav, miniaturas con object-fit) ganan por especificidad. */
img{max-width:100%;height:auto}

body{margin:0;background:var(--bg);color:var(--txt);
     font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.anton{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.5px;
                text-transform:uppercase;line-height:1;margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.arrow{display:inline-block;transition:transform .18s ease}

/* ---------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
     font-family:Oswald,sans-serif;font-weight:600;letter-spacing:1.2px;
     text-transform:uppercase;font-size:14px;padding:16px 30px;border-radius:var(--r);
     cursor:pointer;border:0;
     transition:background .15s,border-color .15s,color .15s,transform .12s;min-height:48px}
.btn-green{background:var(--green);color:#080a06}
.btn-green:hover{background:var(--green-lite)}
.btn-green:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:#fff;border:1px solid var(--bd2)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-lg{font-size:15px;padding:19px 36px;min-height:56px}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);
     border-bottom:1px solid var(--bd)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:var(--hdr)}
.nav .logo{flex:none;display:flex;align-items:center;min-height:44px}
.nav .logo img{height:44px;width:auto}
.nav nav.links{flex:1;display:flex;justify-content:center;gap:clamp(14px,2vw,30px)}
.nav nav.links a{font-family:Oswald,sans-serif;font-weight:500;font-size:13px;
                 letter-spacing:1.4px;text-transform:uppercase;color:#cfcfd6;
                 position:relative;padding:8px;white-space:nowrap}
.nav nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
                        background:var(--green);
                        transition:width .22s cubic-bezier(.22,.61,.36,1)}
.nav nav.links a:hover{color:#fff}
.nav nav.links a:hover::after{width:100%}
.nav .right{flex:none;display:flex;align-items:center;gap:10px}
.nav .icnbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;
             height:44px;color:#cfcfd6;background:transparent;border:0;cursor:pointer;
             position:relative;transition:color .16s}
.nav .icnbtn:hover{color:var(--green)}
.nav .icnbtn .navbadge{position:absolute;top:3px;right:3px;background:var(--red);color:#fff;
                       font-family:Inter,sans-serif;font-size:11px;font-weight:700;
                       line-height:1;min-width:17px;height:17px;border-radius:9px;
                       display:inline-flex;align-items:center;justify-content:center;
                       padding:0 4px}
.nav .icnbtn .navbadge[hidden]{display:none}
.nav .navcta{padding:13px 26px;min-height:44px;font-size:13px;letter-spacing:1.3px}

/* Sin burger a propósito: la ficha no tiene menú desplegable ni el JS que lo abre.
   En pantalla chica los links pasan a una fila que se desliza — mismo contenido,
   sin depender de JavaScript. */
@media(max-width:1000px){
  .nav .wrap{gap:12px}
  .nav nav.links{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
                 -webkit-overflow-scrolling:touch}
  .nav nav.links::-webkit-scrollbar{display:none}
  .nav .navcta{display:none}
}
@media(max-width:640px){
  .nav .logo img{height:34px}
  .nav nav.links a{font-size:12px;padding:8px 4px}
}

/* ---------------------------------------------------------------- secciones */
.sec{padding:var(--sec) 0 0}
.kicker{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:3.4px;
        text-transform:uppercase;color:var(--splash);font-size:12px}
.ssub{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:2px;
      text-transform:uppercase;color:var(--green);font-size:13px}

/* ---------------------------------------------------------------- footer */
footer{background:#050506;border-top:1px solid var(--bd);padding:clamp(56px,6vw,80px) 0 28px;
       margin-top:var(--sec)}
footer .fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:clamp(28px,4vw,56px)}
footer .logo img{height:64px;width:auto;margin-bottom:20px}
footer .about{color:var(--muted);font-size:14px;max-width:290px;line-height:1.65}
footer .socials{display:flex;gap:12px;margin-top:24px}
footer .socials a{width:44px;height:44px;display:inline-flex;align-items:center;
                  justify-content:center;border:1px solid var(--bd);border-radius:var(--r);
                  color:#cfcfd6;transition:border-color .18s,color .18s}
footer .socials a.ig{border-color:var(--bdg);color:var(--green)}
footer .socials a:hover{border-color:var(--green);color:var(--green)}
footer h3{font-family:Oswald,sans-serif;font-weight:600;font-size:13px;letter-spacing:2px;
          text-transform:uppercase;color:#fff;margin:0 0 20px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
footer ul li{display:flex;align-items:center;min-height:44px;color:var(--muted);
             font-size:14px;line-height:1.45}
footer ul li a{display:flex;align-items:center;width:100%;min-height:44px;
               transition:color .16s}
footer ul li a:hover{color:var(--green)}
footer .copy{border-top:1px solid var(--bd);margin-top:clamp(38px,4vw,56px);padding-top:24px;
             text-align:center;color:var(--muted2);font-size:13px}
@media(max-width:900px){footer .fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .fcols{grid-template-columns:1fr}}