/* ============================================================
   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:'Baloo';src:url('fonts/Baloo2.ttf');font-weight:400 800;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:#EDE4D6; --pearl:#E3E1DC; --silver:#F5F3EE;
  --ink:#181613; --soft:#181613; --line:#E9E2D5;
  /* marca — MINT (logo y etiquetas) */
  --mint:#CDE5DA; --mint-deep:#7FB49A;
  /* acentos de producto — el slime pone el color */
  --kiwi:#60B81E; --papaya:#F55E00;
  --display:'Instr',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 (2 capas en parallax) ---- */
body::before{content:'';position:fixed;inset:-28%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(30% 42% at 20% 26%, rgba(255,255,255,1), transparent 58%),
    radial-gradient(32% 36% at 82% 16%, rgba(255,214,186,.95), transparent 58%),
    radial-gradient(36% 42% at 74% 84%, rgba(186,196,232,.95), transparent 58%),
    radial-gradient(34% 38% at 20% 86%, rgba(180,224,202,.9), transparent 56%),
    radial-gradient(24% 30% at 52% 46%, rgba(255,255,255,.85), transparent 62%),
    linear-gradient(125deg,#FDFBF8,#EDEAE2 55%,#F8F5EF);
  filter:blur(14px) saturate(1.35);animation:micaMove 9.5s ease-in-out infinite alternate;will-change:transform;}
@keyframes micaMove{0%{transform:translate3d(-5%,-4%,0) rotate(0) scale(1.16);}50%{transform:translate3d(4%,3%,0) rotate(7deg) scale(1.3);}100%{transform:translate3d(5%,5%,0) rotate(13deg) scale(1.2);}}
/* segunda capa: destellos que derivan en sentido contrario */
html::before{content:'';position:fixed;inset:-30%;z-index:-3;pointer-events:none;opacity:.85;
  background:
    radial-gradient(26% 32% at 68% 38%, rgba(255,222,196,.8), transparent 60%),
    radial-gradient(30% 34% at 28% 60%, rgba(196,206,238,.8), transparent 60%),
    radial-gradient(26% 30% at 56% 78%, rgba(188,230,208,.75), transparent 58%),
    #F5F3EE;
  filter:blur(22px) saturate(1.3);animation:micaMove2 12s ease-in-out infinite alternate-reverse;will-change:transform;}
@keyframes micaMove2{0%{transform:translate3d(5%,3%,0) rotate(9deg) scale(1.25);}100%{transform:translate3d(-5%,-4%,0) rotate(-4deg) scale(1.14);}}
html.still::before{animation:none!important;}
@media(prefers-reduced-motion:reduce){html::before,body::before,body::after{animation:none!important;}}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;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%;}

/* Logo oficial CHUBI (PNG transparente del render 3D, brand/logo/) */
.logo{display:inline-flex;align-items:center;padding:2px 0;}
.logo img{height:50px;display:block;}
@media(max-width:600px){.logo img{height:40px;}}
.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;}