/* ============================================================
   NICTÉ — Atelier de polvos botánicos
   Faithful homage to the More Nutrition × Future Three showcase
   ============================================================ */

:root{
  /* Neutros de sistema */
  --bg:           #F1EADE;   /* fondo cálido principal (un punto más cálido que el brief para que la foto integre) */
  --bg-deep:      #E7DCCB;   /* fondo cálido alterno */
  --paper:        #FAF8F4;   /* blanco hueso */
  --ink:          #1A1410;   /* negro suave */
  --ink-soft:     #4A4038;
  --arena:        #D4C4A8;
  --kraft:        #B89B72;

  /* Paleta muted (SKU) */
  --rosa:         #D4A5A0;
  --rosa-deep:    #C08C86;
  --sage:         #6B7C5E;
  --lavanda:      #9B8DB0;
  --durazno:      #C47B5A;
  --amarillo:     #C9B96B;
  --manzana:      #C9A877;

  /* Acentos de sitio */
  --accent:       var(--rosa);
  --accent-2:     var(--sage);

  --line: rgba(26,20,16,.16);

  --ff-display: "Poppins", system-ui, sans-serif;
  --ff-body:    "DM Sans", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--rosa); color:var(--paper); }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- type ---------- */
.wordmark{
  font-family:var(--ff-display);
  font-weight:300;
  letter-spacing:.01em;
  text-transform:lowercase;
}
.eyebrow{
  font-family:var(--ff-body);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
h1,h2,h3{ font-family:var(--ff-display); font-weight:300; line-height:1.02; letter-spacing:-.01em; }

.display{
  font-family:var(--ff-display);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.02em;
  font-size:clamp(2.6rem, 8.4vw, 7rem);
}
.hero__headline .display{ display:block; padding:0 4vw; font-size:clamp(2.2rem, 7vw, 5.4rem); line-height:1.06; }
.hero__headline .reveal-word{ overflow:visible; padding-bottom:.14em; }

/* word/char reveal */
.reveal-line{ overflow:hidden; display:block; }
.reveal-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.reveal-word > span{ display:inline-block; will-change:transform; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.preloader__inner{ text-align:center; }
.preloader__mark{ width:64px; margin:0 auto 26px; color:var(--rosa); opacity:0; }
.preloader__word{
  font-family:var(--ff-display); font-weight:300; text-transform:lowercase;
  font-size:clamp(2.4rem,7vw,4.2rem); letter-spacing:.02em;
  display:flex; justify-content:center; gap:.01em;
  overflow:hidden; padding-bottom:.08em;
}
.preloader__word span{ display:inline-block; transform:translateY(110%); }
.preloader__count{
  position:fixed; right:5vw; bottom:5vh;
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(3.5rem,12vw,9rem); line-height:1;
  color:var(--paper); opacity:.9;
}
.preloader__bar{
  position:fixed; left:0; bottom:0; height:2px; width:0%;
  background:var(--rosa);
}
.preloader__tag{
  margin-top:18px; font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(250,248,244,.5); opacity:0;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,56px);
  mix-blend-mode:difference;          /* legible over any section */
  color:#fff;
}
.nav__logo{ font-size:1.6rem; line-height:1; }
.nav__menu{ display:flex; gap:clamp(18px,3vw,40px); align-items:center; }
.nav__menu a{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  position:relative; padding:4px 0;
}
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor;
  transition:width .4s var(--ease);
}
.nav__menu a:hover::after{ width:100%; }
.nav__pill{
  border:1px solid currentColor; border-radius:100px;
  padding:8px 18px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
}
.nav__burger{ display:none; }
@media (max-width:760px){
  .nav__menu a:not(.nav__pill){ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(8px,2.5vh,34px);
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-deep) 100%);
  overflow:hidden;
}
.hero__bgword{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  font-family:var(--ff-display); font-weight:300; text-transform:lowercase;
  font-size:min(38vw,640px); color:var(--rosa); opacity:.16; line-height:1;
  white-space:nowrap; pointer-events:none; z-index:0; will-change:transform;
}
.hero__stage{
  position:relative; z-index:3;
  perspective:1400px;
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.hero__float{ position:relative; transform-origin:50% 72%; animation:tubeSway 7.5s ease-in-out infinite; }
@keyframes tubeSway{
  0%   { transform:translateY(0) rotate(-2.6deg); }
  50%  { transform:translateY(-12px) rotate(2.6deg); }
  100% { transform:translateY(0) rotate(-2.6deg); }
}
.hero__tilt{
  transform-style:preserve-3d; will-change:transform;
  transition:transform .35s var(--ease);
}
.hero__tube{
  width:clamp(140px,15.5vw,224px); height:auto;
  filter:drop-shadow(0 38px 42px rgba(54,46,26,.42));
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.hero__ground{
  position:absolute; left:50%; bottom:-26px; transform:translateX(-50%);
  width:62%; height:34px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(54,46,26,.32), rgba(54,46,26,0) 70%);
  filter:blur(3px); z-index:-1;
}
.hero__headline{
  position:relative; z-index:4; order:-1;
  text-align:center; pointer-events:none; mix-blend-mode:normal;
}
.hero__headline .display{ color:var(--ink); }
.hero__headline .line-2{ color:var(--rosa-deep); }
.hero__sub{
  position:absolute; z-index:4; left:clamp(20px,5vw,56px); bottom:clamp(28px,8vh,80px);
  max-width:280px; font-size:1rem; color:var(--ink-soft); line-height:1.45;
}
.hero__tag{
  position:absolute; z-index:4; right:clamp(20px,5vw,56px); bottom:clamp(28px,8vh,80px);
  text-align:right;
}
.hero__tag .t{ font-family:var(--ff-display); font-weight:300; font-size:1.5rem; }
.hero__scroll{
  position:absolute; z-index:4; left:50%; bottom:24px; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll .dot{ width:1px; height:34px; background:var(--ink-soft); opacity:.5; transform-origin:top; animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ transform:scaleY(0); } 40%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* floating leaves */
.leaf{ position:absolute; color:var(--sage); opacity:.5; z-index:1; will-change:transform; }
.leaf--1{ width:90px; top:18%; left:12%; }
.leaf--2{ width:60px; bottom:20%; left:20%; color:var(--rosa-deep); }
.leaf--3{ width:110px; top:22%; right:10%; }
.leaf--4{ width:54px; bottom:24%; right:18%; color:var(--durazno); }
@media (max-width:760px){ .leaf--1,.leaf--3{ width:60px; } .leaf--2,.leaf--4{ display:none; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--ink); color:var(--paper);
  padding:26px 0; overflow:hidden; white-space:nowrap;
}
.marquee__track{ display:inline-flex; align-items:center; gap:48px; will-change:transform; }
.marquee__track span{
  font-family:var(--ff-display); font-weight:300; text-transform:lowercase;
  font-size:clamp(1.6rem,4vw,3rem); letter-spacing:.02em;
}
.marquee__track .dot{ color:var(--rosa); width:18px; }
.marquee--alt{ background:var(--rosa); color:var(--ink); }
.marquee--alt .dot{ color:var(--paper); }

/* ============================================================
   MANIFIESTO (pinned text reveal)
   ============================================================ */
.manifesto{
  background:var(--bg); padding:clamp(80px,16vh,200px) clamp(20px,6vw,120px);
  min-height:100svh; display:flex; align-items:center;
}
.manifesto__text{
  max-width:1100px; margin:0 auto;
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,4rem); line-height:1.18; letter-spacing:-.01em;
}
.manifesto__text .w{ color:rgba(26,20,16,.16); transition:color .25s var(--ease); }
.manifesto__text .w.is-on{ color:var(--ink); }
.manifesto__text em{ font-style:normal; color:var(--rosa-deep); }
.manifesto__text .w{ display:inline-block; }
.manifesto__text .w.em-word.is-on{ color:var(--rosa-deep); }
.manifesto__eyebrow{ display:block; margin-bottom:36px; }

/* ============================================================
   STATS (pinned counters)
   ============================================================ */
.stats{ position:relative; background:var(--ink); color:var(--paper); }
.stats__pin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,10vh,120px) clamp(20px,5vw,56px); }
.stats__eyebrow{ color:rgba(250,248,244,.55); margin-bottom:clamp(30px,6vh,70px); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat{ padding:0 clamp(10px,2vw,30px); border-left:1px solid rgba(250,248,244,.16); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat__num{
  font-family:var(--ff-display); font-weight:300; line-height:.9;
  font-size:clamp(3.5rem,9vw,9rem); color:var(--rosa);
  display:flex; align-items:baseline;
}
.stat__num .suffix{ font-size:.3em; margin-left:.1em; color:var(--paper); letter-spacing:.02em; }
.stat__label{ margin-top:18px; font-size:.86rem; letter-spacing:.04em; color:rgba(250,248,244,.7); max-width:18ch; }
@media (max-width:760px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:48px 0; }
  .stat:nth-child(3){ border-left:none; padding-left:0; }
}

/* ============================================================
   RITUAL — Mezcla. Sirve. Comparte.
   ============================================================ */
.ritual{ background:var(--bg-deep); padding:clamp(80px,14vh,180px) clamp(20px,5vw,56px); }
.ritual__head{ max-width:1300px; margin:0 auto clamp(50px,8vh,90px); display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.ritual__title{ font-size:clamp(2.6rem,7vw,6rem); }
.ritual__title b{ font-weight:300; color:var(--rosa-deep); }
.ritual__lead{ max-width:340px; color:var(--ink-soft); font-size:1.05rem; }
.ritual__grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.ritual__steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:26px; padding:30px 0; border-top:1px solid var(--line); align-items:start; }
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{ font-family:var(--ff-display); font-weight:300; font-size:1.1rem; color:var(--rosa-deep); padding-top:6px; }
.step__t{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:8px; }
.step__d{ color:var(--ink-soft); max-width:42ch; }
.ritual__photo{ border-radius:14px; overflow:hidden; aspect-ratio:1086/1448; box-shadow:0 40px 80px -32px rgba(60,40,30,.45); }
.ritual__photo img{ width:100%; height:100%; object-fit:cover; will-change:transform; transform:scale(1.12); }
@media (max-width:860px){ .ritual__grid{ grid-template-columns:1fr; } .ritual__photo{ order:-1; max-width:480px; margin:0 auto; } }

/* ============================================================
   GALLERY — horizontal scroll
   ============================================================ */
.gallery{ background:var(--ink); color:var(--paper); overflow:hidden; }
.gallery__pin{ height:100svh; display:flex; align-items:center; }
.gallery__track{ display:flex; gap:clamp(20px,3vw,48px); padding:0 clamp(20px,5vw,56px); will-change:transform; align-items:center; }
.g-intro{ flex:0 0 auto; width:min(40vw,420px); }
.g-intro .eyebrow{ color:rgba(250,248,244,.55); }
.g-intro h2{ font-size:clamp(2.2rem,4.4vw,4rem); margin-top:18px; }
.g-card{ flex:0 0 auto; position:relative; border-radius:12px; overflow:hidden; }
.g-card img{ height:62vh; width:auto; object-fit:cover; }
.g-card--tall img{ height:72vh; }
.g-card__cap{ position:absolute; left:18px; bottom:16px; right:18px; font-size:.82rem; letter-spacing:.04em; color:var(--paper); text-shadow:0 2px 14px rgba(0,0,0,.5); display:flex; justify-content:space-between; }
.g-card__cap .num{ color:var(--rosa); }
.g-end{ flex:0 0 auto; width:min(30vw,320px); display:flex; align-items:center; }
.g-end .t{ font-family:var(--ff-display); font-weight:300; font-size:clamp(1.6rem,3vw,2.6rem); }

/* ============================================================
   LINEUP — SKUs por color
   ============================================================ */
.lineup{ background:var(--bg); padding:clamp(80px,14vh,180px) clamp(20px,5vw,56px); }
.lineup__head{ max-width:1300px; margin:0 auto clamp(40px,7vh,80px); }
.lineup__head .eyebrow{ display:block; margin-bottom:20px; }
.lineup__title{ font-size:clamp(2.4rem,6vw,5.5rem); max-width:18ch; }
.lineup__photo{ max-width:1300px; margin:0 auto clamp(50px,8vh,90px); border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -36px rgba(60,40,30,.4); }
.lineup__photo img{ width:100%; }
.lineup__grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.sku{ background:var(--bg); padding:clamp(26px,3vw,42px); display:flex; flex-direction:column; gap:18px; min-height:300px; transition:background .5s var(--ease); position:relative; overflow:hidden; }
.sku__swatch{ width:54px; height:54px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.sku__name{ font-family:var(--ff-display); font-weight:300; font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.05; }
.sku__moment{ color:var(--ink-soft); font-size:.98rem; margin-top:auto; }
.sku__tag{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.sku:hover{ background:var(--paper); }
@media (max-width:860px){ .lineup__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .lineup__grid{ grid-template-columns:1fr; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{ background:var(--rosa); color:var(--ink); padding:clamp(80px,14vh,180px) clamp(20px,5vw,56px); overflow:hidden; }
.reviews__head{ max-width:1300px; margin:0 auto clamp(40px,7vh,70px); display:flex; justify-content:space-between; align-items:baseline; gap:30px; flex-wrap:wrap; }
.reviews__head h2{ font-size:clamp(2.2rem,5vw,4.2rem); }
.reviews__head .eyebrow{ color:rgba(26,20,16,.6); }
.reviews__row{ display:flex; gap:clamp(20px,2.4vw,36px); }
.review{ flex:1 1 0; background:var(--paper); border-radius:14px; padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; gap:24px; }
.review__quote{ font-family:var(--ff-display); font-weight:300; font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.28; }
.review__by{ margin-top:auto; font-size:.86rem; letter-spacing:.04em; color:var(--ink-soft); display:flex; justify-content:space-between; align-items:center; }
.review__stars{ color:var(--rosa-deep); letter-spacing:.1em; }
@media (max-width:860px){ .reviews__row{ flex-direction:column; } }

/* ============================================================
   PRÓXIMAMENTE
   ============================================================ */
.soon{
  position:relative; background:var(--ink); color:var(--paper);
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(60px,10vh,120px) clamp(20px,5vw,56px); overflow:hidden;
}
.soon__word{ font-family:var(--ff-display); font-weight:300; text-transform:lowercase; font-size:clamp(3rem,15vw,14rem); line-height:.9; letter-spacing:-.02em; }
.soon__big{ font-family:var(--ff-display); font-weight:300; font-size:clamp(2.4rem,9vw,8rem); line-height:.96; margin-top:10px; }
.soon__big em{ font-style:normal; color:var(--rosa); }
.soon__lead{ max-width:46ch; margin:36px auto 0; color:rgba(250,248,244,.66); font-size:1.05rem; }
.soon__badge{ margin-top:44px; border:1px solid rgba(250,248,244,.3); border-radius:100px; padding:14px 30px; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; }
.soon__mark{ width:60px; color:var(--rosa); margin-bottom:34px; }
.soon__eyebrow{ display:block; color:rgba(250,248,244,.5); margin-bottom:26px; }
.soon__sign{ margin-top:42px; font-weight:300; font-size:1.2rem; color:rgba(250,248,244,.55); }
.soon__bgword{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:300; font-size:min(60vw,900px); color:rgba(212,165,160,.05); pointer-events:none; white-space:nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--paper); padding:clamp(50px,8vh,90px) clamp(20px,5vw,56px) 36px; border-top:1px solid rgba(250,248,244,.12); }
.footer__top{ max-width:1300px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; padding-bottom:clamp(40px,7vh,70px); }
.footer__logo{ font-size:clamp(3rem,9vw,7rem); line-height:.9; }
.footer__tag{ text-align:right; }
.footer__tag .t{ font-family:var(--ff-display); font-weight:300; font-size:1.4rem; }
.footer__tag .s{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(250,248,244,.5); margin-top:8px; }
.footer__bottom{ max-width:1300px; margin:0 auto; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,248,244,.5); }

/* generic reveal-up util applied by JS */
[data-anim]{ opacity:0; }