/* ============================================================
   CHUBBY SLIME WORLD — sistema base compartido
   Tokens, fondo mica, nav, botones, cesta y footer.
   Lo cargan index.html y producto.html.
   PALETA (2026-08-18): marca MINT · web PLATA · acentos KIWI y PAPAYA.
   ============================================================ */

@font-face{font-family:'Bagel';src:url('fonts/BagelFatOne.ttf');font-display:swap;}
@font-face{font-family:'Outfit';src:url('fonts/Outfit-Regular.ttf');font-weight:400;font-display:swap;}
@font-face{font-family:'Outfit';src:url('fonts/Outfit-Bold.ttf');font-weight:700;font-display:swap;}
@font-face{font-family:'Instr';src:url('fonts/InstrumentSans-Regular.ttf');font-weight:400;font-display:swap;}
@font-face{font-family:'Instr';src:url('fonts/InstrumentSans-Bold.ttf');font-weight:700;font-display:swap;}
@font-face{font-family:'Mono';src:url('fonts/DMMono-Regular.ttf');font-display:swap;}

:root{
  /* neutros — la web es PLATA */
  --paper:#F4F1EC; --sand:#E7DDCF; --pearl:#DAD9D4; --silver:#E5E3DE;
  --ink:#181613; --soft:#181613; --line:#E2DACB;
  /* marca — MINT (logo y etiquetas) */
  --mint:#CDE5DA; --mint-deep:#7FB49A;
  /* acentos de producto — el slime pone el color */
  --kiwi:#60B81E; --papaya:#F55E00;
  --display:'Outfit',system-ui,sans-serif;
  --body:'Instr',system-ui,sans-serif;
  --data:'Mono',ui-monospace,monospace;
  --nav-h:84px; --pad:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--ink);font-size:16.5px;line-height:1.6;background:var(--silver);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;}
::selection{background:var(--mint);color:var(--ink);}
a{color:inherit;text-decoration:none;}

/* ---- fondo mica / polvo perlado en movimiento ---- */
body::before{content:'';position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 52% at 22% 28%, rgba(255,255,255,1), transparent 60%),
    radial-gradient(44% 48% at 80% 18%, rgba(178,214,196,.75), transparent 62%),
    radial-gradient(50% 55% at 72% 82%, rgba(190,199,224,.8), transparent 62%),
    radial-gradient(46% 50% at 24% 84%, rgba(191,219,203,.7), transparent 60%),
    radial-gradient(30% 36% at 52% 48%, rgba(255,255,255,.55), transparent 65%),
    linear-gradient(125deg,#ECEAE5,#D6D4CE 55%,#E4E2DC);
  filter:blur(16px) saturate(1.25);animation:micaMove 14s ease-in-out infinite alternate;will-change:transform;}
@keyframes micaMove{0%{transform:translate3d(-4%,-3%,0) rotate(0) scale(1.14);}50%{transform:translate3d(3%,2%,0) rotate(6deg) scale(1.26);}100%{transform:translate3d(4%,4%,0) rotate(11deg) scale(1.18);}}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainDrift 9s steps(5) infinite;}
@keyframes grainDrift{0%{transform:translate(0,0);}25%{transform:translate(-6px,4px);}50%{transform:translate(4px,-6px);}75%{transform:translate(-4px,-4px);}100%{transform:translate(0,0);}}

/* ---------- utilidades ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad);}
.label{font-family:var(--data);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);}
.eyebrow{font-family:var(--data);font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);}
.lower{text-transform:lowercase;}

/* ---------- announcement ---------- */
.announce{background:var(--ink);color:var(--paper);text-align:center;font-family:var(--data);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px;overflow:hidden;height:36px;}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--silver) 78%,transparent);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s;}
nav.scrolled{border-bottom-color:var(--line);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}

/* Lockup del logo por CSS: mayúsculas, relleno blanco, contorno negro (efecto pegatina).
   PROVISIONAL — sustituir por el PNG/SVG oficial con transparencia cuando esté. */
.logo{display:inline-flex;flex-direction:column;line-height:.86;padding:2px 0;}
.logo .mark{font-family:'Bagel';font-size:26px;letter-spacing:.01em;text-transform:uppercase;
  color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;}
.logo .mark.two{font-size:17px;letter-spacing:.055em;-webkit-text-stroke:2px var(--ink);}
.logo .sub{font-family:var(--data);font-size:8px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--soft);margin-top:5px;-webkit-text-stroke:0;}
.navlinks{display:flex;gap:34px;}
.navlinks a{font-family:var(--display);font-size:16px;opacity:.82;padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;}
.navlinks a:hover,.navlinks a.on{opacity:1;border-bottom-color:var(--ink);}
.navtools{display:flex;gap:16px;align-items:center;}
.lang{font-family:var(--data);font-size:13px;border:1px solid var(--line);border-radius:30px;padding:7px 13px;cursor:pointer;background:transparent;color:var(--ink);transition:.2s;}
.lang:hover{border-color:var(--ink);} .lang b{color:var(--ink);text-decoration:underline;}
.cartbtn{font-family:var(--display);font-size:15px;cursor:pointer;border:1px solid var(--ink);border-radius:30px;padding:9px 18px;transition:.25s;background:transparent;color:var(--ink);}
.cartbtn:hover{background:var(--ink);color:var(--paper);}
@media(max-width:860px){.navlinks{display:none;}}

/* ---------- botones ---------- */
.btn{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.01em;padding:15px 30px;border-radius:40px;cursor:pointer;border:1px solid var(--ink);transition:transform .18s cubic-bezier(.34,1.4,.64,1),background .2s,color .2s;}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}

/* ---------- cesta lateral ---------- */
.overlay{position:fixed;inset:0;background:rgba(24,22,19,.34);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:80;}
.overlay.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--paper);z-index:90;
  transform:translateX(102%);transition:transform .45s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:-30px 0 60px -40px rgba(60,45,30,.6);}
.drawer.open{transform:none;}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--line);}
.drawer .dhead h3{font-family:var(--display);font-weight:700;font-size:22px;text-transform:lowercase;letter-spacing:-.02em;}
.drawer .close{background:none;border:none;font-size:26px;cursor:pointer;color:var(--ink);line-height:1;}
.ship{padding:16px 24px;border-bottom:1px solid var(--line);font-family:var(--data);font-size:12px;color:var(--soft);letter-spacing:.02em;}
.ship .bar{height:4px;background:var(--line);border-radius:4px;margin-top:9px;overflow:hidden;}
.ship .bar i{display:block;height:100%;width:0;background:var(--mint-deep);transition:width .4s;}
.ditems{flex:1;overflow-y:auto;padding:8px 24px;}
.dempty{font-family:var(--data);font-size:13px;color:var(--soft);padding:40px 0;text-align:center;}
.ditem{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.ditem img{width:64px;height:64px;object-fit:contain;}
.ditem .in{flex:1;} .ditem .in h4{font-family:var(--display);font-weight:700;font-size:16px;text-transform:lowercase;}
.ditem .in .m{font-family:var(--data);font-size:12px;color:var(--soft);margin-top:2px;}
.ditem .qty{display:flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--data);font-size:13px;}
.ditem .qty button{width:24px;height:24px;border:1px solid var(--line);background:none;border-radius:50%;cursor:pointer;color:var(--ink);}
.ditem .pr{font-family:var(--data);font-size:14px;}
.dfoot{padding:22px 24px;border-top:1px solid var(--line);}
.dfoot .sub{display:flex;justify-content:space-between;font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:16px;}
.dfoot .co{width:100%;background:var(--ink);color:var(--paper);border:none;border-radius:40px;padding:16px;font-family:var(--display);font-weight:700;font-size:16px;cursor:pointer;transition:transform .18s;}
.dfoot .co:hover{transform:translateY(-2px);}
.dfoot .co:disabled{opacity:.55;cursor:wait;transform:none;}
.coerr{font-family:var(--data);font-size:12px;color:#B3261E;margin-top:10px;text-align:center;min-height:16px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px);overflow:hidden;}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px;}
.fcol h5{font-family:var(--data);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:8px;}
.fcol a{display:block;font-size:15px;opacity:.82;padding:3px 0;transition:.2s;}
.fcol a:hover{opacity:1;}
.footmark{font-family:'Bagel';font-size:clamp(64px,15vw,220px);line-height:.8;letter-spacing:.01em;opacity:.08;padding:10px 0 0;white-space:nowrap;text-transform:uppercase;}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 40px;font-family:var(--data);font-size:12.5px;color:var(--soft);}

/* ---------- reveal / modo captura ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important;}.rv{opacity:1;transform:none;}html{scroll-behavior:auto;}}
html.still *{animation:none!important;transition:none!important;}
html.still .rv{opacity:1;transform:none;}
html.still body::before,html.still body::after{animation:none!important;}