/* ============================================================
   SHAALAM · Soul Holistic Center — Base / Design System
   Brand: deep green #2F3324 · creams #F2EFEB / #E5DACA
   Type: Channe (display) · Armin Soft (text)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Channe";
  src:url("../fonts/Channe.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{ font-family:"Armin Soft"; src:url("../fonts/arminsoft-ultralight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Armin Soft"; src:url("../fonts/arminsoft-thin.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Armin Soft"; src:url("../fonts/arminsoft-regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Armin Soft"; src:url("../fonts/arminsoft-semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Armin Soft"; src:url("../fonts/arminsoft-ultrabold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --green-950:#15170F;
  --green-900:#1C1F15;
  --green-850:#23271B;
  --green-800:#2A2E20;
  --green-700:#2F3324;   /* brand primary */
  --green-600:#3C402E;
  --green-500:#4C5139;
  --moss:#6B6F4E;
  --sage:#8E9A7C;
  --sage-soft:#A9B295;

  --cream:#F4F1EB;
  --cream-2:#F2EFEB;
  --sand:#E7DCC8;
  --sand-2:#E5DACA;
  --sand-deep:#D8C9AE;
  --paper:#FBFAF6;

  --terracotta:#B06A43;
  --clay:#C7906B;
  --lagoon:#7FA79D;

  --ink:var(--green-700);
  --bg:var(--cream);

  --maxw:1560px;
  --pad:clamp(20px,5vw,84px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);

  --t-fast:.4s;
  --t:.7s;
  --t-slow:1.1s;

  --fs-mega:clamp(64px,14vw,260px);
  --fs-h1:clamp(44px,8.5vw,150px);
  --fs-h2:clamp(34px,5.4vw,92px);
  --fs-h3:clamp(24px,3vw,46px);
  --fs-lead:clamp(19px,2.05vw,30px);
  --fs-body:clamp(15px,1.15vw,18px);
  --fs-label:clamp(11px,.82vw,13px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Armin Soft",system-ui,sans-serif;
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:none}
::selection{background:var(--green-700);color:var(--cream)}

h1,h2,h3,h4{margin:0;font-weight:400;line-height:.98;letter-spacing:-.01em}
.display{font-family:"Channe",serif;font-weight:400;line-height:.92}
p{margin:0}

/* ---------- Type utilities ---------- */
.kicker{
  font-family:"Armin Soft",sans-serif;
  font-weight:400;
  font-size:var(--fs-label);
  letter-spacing:.42em;
  text-transform:uppercase;
}
.lead{font-size:var(--fs-lead);font-weight:200;line-height:1.42;letter-spacing:.004em}
.dim{opacity:.62}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(96px,13vh,200px)}
.col-divider{height:1px;background:currentColor;opacity:.16}

/* ============================================================
   CUSTOM CURSOR (símbolo outline)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,[data-cursor]{cursor:none}
}
.cursor{
  position:fixed;top:0;left:0;z-index:9999;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  will-change:transform;
}
.cursor.is-ready{opacity:.92}
.cursor svg{width:100%;height:100%;display:block;overflow:visible;transition:transform .5s var(--ease-out)}
.cursor .c-stroke{
  fill:none;stroke:#F4F1EB;stroke-width:1.5;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1px rgba(21,23,15,.55));
  transition:stroke .45s var(--ease);
}
.cursor.is-hover svg{transform:rotate(90deg) scale(1.12)}
.cursor.is-hover .c-stroke{stroke:var(--sand-2)}
.cursor.is-down svg{transform:scale(.82)}
.cursor-dot{display:none}
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{display:none} }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:clamp(18px,2.4vw,30px) var(--pad);
  color:var(--cream);
  transition:transform .6s var(--ease-out),background .6s var(--ease),color .6s var(--ease),padding .6s var(--ease);
  mix-blend-mode:normal;
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,23,15,.42),rgba(21,23,15,0));
  opacity:1;transition:opacity .6s var(--ease);
}
.nav.is-solid{
  background:var(--cream);color:var(--green-700);
  padding-block:clamp(12px,1.5vw,18px);
  box-shadow:0 1px 0 rgba(47,51,36,.1);
}
.nav.is-solid::before{opacity:0}
.nav.is-hidden{transform:translateY(-104%)}
.nav__brand{display:flex;align-items:center;gap:14px;letter-spacing:.02em}
.nav__brand .sym{width:34px;height:34px;flex:none}
.nav__brand .sym .c-stroke{stroke:currentColor;stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}
.nav__word{font-family:"Channe",serif;font-size:24px;line-height:1;transform:translateY(1px)}
.nav__links{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.nav__link{
  position:relative;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  padding:6px 0;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__right{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px)}

.lang{display:flex;align-items:center;gap:2px;font-size:var(--fs-label);letter-spacing:.18em;font-weight:600}
.lang button{padding:5px 7px;opacity:.5;transition:opacity .4s var(--ease);letter-spacing:.18em}
.lang button.is-on{opacity:1}
.lang .sep{opacity:.4}

.btn{
  --bc:currentColor;
  display:inline-flex;align-items:center;gap:12px;
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:13px 22px;border-radius:999px;
  border:1px solid var(--bc);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out);
}
.btn:hover{color:var(--green-700)}
.btn:hover::before{transform:scaleY(1);transform-origin:top}
.btn--solid{background:var(--green-700);color:var(--cream);border-color:var(--green-700)}
.btn--solid::before{background:var(--sand)}
.btn--solid:hover{color:var(--green-800)}
.btn .arrow{transition:transform .5s var(--ease-out)}
.btn:hover .arrow{transform:translateX(5px)}

/* ---------- reveal primitives ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);will-change:transform,opacity}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="clip"]{opacity:1;clip-path:inset(100% 0 0 0);transform:none;transition:clip-path 1.2s var(--ease-inout)}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}
[data-reveal="scale"]{opacity:0;transform:scale(1.08)}
[data-reveal="scale"].in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
[data-stagger].in>*{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* lang visibility */
[data-en]{display:none}
html[lang="en"] [data-es]{display:none}
html[lang="en"] [data-en]{display:revert}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.nav__toggle{display:none}
.navmenu{
  position:fixed;inset:0;z-index:190;
  background:var(--green-800);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease-inout);
  pointer-events:none;
}
body.menu-open .navmenu{clip-path:inset(0 0 0 0);pointer-events:auto}
.navmenu__inner{display:flex;flex-direction:column;gap:clamp(14px,2.6vh,26px);padding:var(--pad);width:100%;max-width:560px}
.navmenu__inner a{font-family:"Channe",serif;font-size:clamp(34px,9vw,60px);line-height:1;opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
body.menu-open .navmenu__inner a{opacity:1;transform:none}
.navmenu__inner a:nth-child(1){transition-delay:.12s}
.navmenu__inner a:nth-child(2){transition-delay:.18s}
.navmenu__inner a:nth-child(3){transition-delay:.24s}
.navmenu__inner a:nth-child(4){transition-delay:.3s}
.navmenu__inner a:nth-child(5){transition-delay:.36s}
.navmenu__mail{font-family:"Armin Soft",sans-serif!important;font-size:var(--fs-lead)!important;opacity:.7!important;margin-top:14px;letter-spacing:.02em}
body.menu-open .navmenu__mail{opacity:.85!important}
.navmenu__lang{display:flex;gap:10px;align-items:center;font-size:14px;letter-spacing:.18em;font-weight:600;margin-top:10px;opacity:.7}
.navmenu__lang button{padding:6px 4px}

@media(max-width:860px){
  .nav__links{display:none}
  .nav__right .btn{display:none}
  .nav__toggle{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:42px;height:42px;border-radius:50%;border:1px solid currentColor;align-items:center;
    transition:background .4s var(--ease),border-color .4s var(--ease);
  }
  .nav__toggle span{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease)}
  .nav__toggle.is-x{background:var(--cream);border-color:var(--cream)}
  .nav__toggle.is-x span{background:var(--green-800)}
  .nav__toggle.is-x span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .nav__toggle.is-x span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
  body.menu-open .nav{color:var(--cream)!important}
}
@media (hover:none),(pointer:coarse){ .nav__toggle{cursor:pointer} }