/* =========================================================
   ALMA Wellness Center — Design tokens
   ========================================================= */
:root{
  --cream:       #FAF5EC;
  --cream-deep:  #F1E7D6;
  --white:       #FFFFFF;
  --sand:        #E4D3B4;
  --taupe:       #B4A084;
  --brown:       #6E5A44;
  --brown-soft:  #8A7660;
  --espresso:    #2A2016;
  --espresso-2:  #1B140D;
  --gold:        #B08A3E;
  --gold-light:  #D9BD7C;
  --gold-deep:   #8A6A28;
  --ink:         #332A1F;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --container: 1220px;
  --radius: 2px;
  --nav-h: 88px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: var(--nav-h);}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3{font-family:var(--font-display); font-weight:500; margin:0; color:var(--espresso);}
p{margin:0;}
em{font-style:italic; color:var(--gold-deep);}
::selection{background:var(--gold-light); color:var(--espresso);}

.kicker{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 18px;
  font-weight:500;
}
.h2{
  font-size:clamp(2.1rem, 4vw, 3.1rem);
  line-height:1.12;
  letter-spacing:.005em;
}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px;
  font-family:var(--font-body); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn--gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:var(--espresso-2);
  box-shadow: 0 10px 30px -12px rgba(138,106,40,.55);
}
.btn--gold:hover{transform:translateY(-2px); box-shadow: 0 16px 34px -12px rgba(138,106,40,.65);}
.btn--ghost{
  border-color: rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
}
.btn--ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px);}
.btn--line{
  margin-top:34px;
  border-color: var(--gold);
  color: var(--gold-deep);
  background:transparent;
}
.btn--line:hover{background:var(--gold); color:#fff; transform:translateY(-2px);}
.btn--lg{padding:19px 46px; font-size:.9rem;}
.icon-wa{width:18px; height:18px; fill:currentColor;}

.link-arrow{
  display:inline-block; margin-top:28px;
  font-size:.85rem; letter-spacing:.06em; color:var(--gold-deep);
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
  transition: opacity .3s;
}
.link-arrow:hover{opacity:.7;}

.badge{
  display:inline-block; margin-top:14px;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep);
  border:1px solid var(--gold);
  padding:8px 18px;
  border-radius:20px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(250,245,236,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(42,32,22,.35);
  height:76px;
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:0 32px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{display:flex; align-items:center; gap:12px;}
.nav__mark{width:34px; height:34px; object-fit:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.nav.is-scrolled .nav__mark{filter:none;}
.nav__word{
  font-family:var(--font-display); font-size:1.28rem; letter-spacing:.06em; font-weight:600;
  color:#fff; display:flex; flex-direction:column; line-height:1.05;
  transition:color .5s;
}
.nav.is-scrolled .nav__word{color:var(--espresso);}
.nav__word em{
  font-style:normal; font-family:var(--font-body); font-size:.56rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-light); font-weight:400;
}
.nav.is-scrolled .nav__word em{color:var(--gold-deep);}

.nav__links{display:flex; align-items:center; gap:38px; margin-left:auto;}
.nav__links a{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  position:relative; padding-bottom:4px; transition:color .5s;
}
.nav.is-scrolled .nav__links a{color:var(--ink);}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav__links a:hover::after{width:100%;}

.nav__cta{
  display:flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:20px;
  background:var(--gold); color:#fff;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav__cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(138,106,40,.6);}

.nav__burger{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav__burger span{height:1.5px; background:#fff; transition: all .35s var(--ease);}
.nav.is-scrolled .nav__burger span{background:var(--ink);}
.nav__burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__burger.is-open span:nth-child(2){opacity:0;}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__bg{position:absolute; inset:0; z-index:0;}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 30%; transform:scale(1.06);}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,15,9,.72) 0%, rgba(20,15,9,.42) 48%, rgba(20,15,9,.18) 100%),
    linear-gradient(0deg, rgba(20,15,9,.55) 0%, rgba(20,15,9,0) 34%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero__content{position:relative; z-index:2; max-width:700px; padding:0 32px; margin-left:5vw;}
.hero__content .kicker{color:var(--gold-light);}
.hero__title{
  font-size:clamp(2.3rem, 5vw, 3.8rem); color:#fff; line-height:1.15; margin-bottom:26px;
  text-wrap:balance;
}
.hero__sub{color:rgba(255,255,255,.86); font-size:1.05rem; font-weight:300; max-width:480px; margin-bottom:40px;}
.hero__actions{display:flex; gap:18px; flex-wrap:wrap;}

.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:1px solid rgba(255,255,255,.6); border-radius:14px;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#fff;
  animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot{
  0%{opacity:1; top:8px;}
  70%{opacity:0; top:24px;}
  100%{opacity:0; top:24px;}
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--espresso); overflow:hidden; padding:20px 0;
  border-top:1px solid rgba(217,189,124,.25); border-bottom:1px solid rgba(217,189,124,.25);
}
.marquee__track{
  display:inline-flex; white-space:nowrap; gap:28px; align-items:center;
  animation: scroll 38s linear infinite;
}
.marquee__track span{
  font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--gold-light); font-weight:500;
}
.marquee__track i{font-style:normal; color:var(--brown-soft); font-size:.8rem;}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  max-width:var(--container); margin:0 auto; padding:150px 32px;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center;
}
.about__media{position:relative;}
.about__media img{border-radius:2px; width:100%; height:560px; object-fit:cover;}
.about__media-frame{
  position:absolute; top:26px; left:-26px; right:26px; bottom:-26px;
  border:1px solid var(--gold); z-index:-1;
}
.about__copy p{color:var(--brown); margin-bottom:20px; font-size:1.02rem; max-width:520px;}
.about__copy strong{color:var(--espresso); font-weight:500;}

.feature-list{margin:36px 0 30px; display:flex; flex-direction:column; gap:26px; max-width:480px;}
.feature-list li{display:flex; gap:20px; align-items:flex-start;}
.feature-list__num{
  font-family:var(--font-display); font-size:1.1rem; color:var(--gold);
  border:1px solid var(--gold); border-radius:50%;
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.feature-list strong{display:block; color:var(--espresso); font-size:1.02rem; font-weight:500; margin-bottom:4px;}
.feature-list p{margin:0; color:var(--brown-soft); font-size:.92rem; max-width:none;}

/* =========================================================
   SERVICES
   ========================================================= */
.services{max-width:var(--container); margin:0 auto; padding:60px 32px 150px;}
.services__head{text-align:center; max-width:640px; margin:0 auto 56px;}
.services__head .h2{margin-top:0;}

.tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:56px;
}
.tab{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 24px; border-radius:22px; border:1px solid var(--sand);
  background:transparent; color:var(--brown); cursor:pointer;
  transition: all .35s var(--ease);
}
.tab:hover{border-color:var(--gold);}
.tab.is-active{background:var(--espresso); color:var(--gold-light); border-color:var(--espresso);}

.panel{display:none; max-width:820px; margin:0 auto; animation: fadeUp .5s var(--ease);}
.panel.is-active{display:block;}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

.menu{border-top:1px solid var(--sand);}
.menu li{
  display:flex; align-items:baseline; gap:14px;
  padding:22px 4px;
  border-bottom:1px solid var(--sand);
}
.menu li span{
  font-family:var(--font-display); font-size:1.28rem; color:var(--espresso); font-weight:500;
}
.menu li span em{font-style:normal; font-family:var(--font-body); font-size:.82rem; color:var(--taupe);}
.menu li i{flex:1; border-bottom:1px dotted var(--sand); margin-bottom:6px;}
.menu li b{font-family:var(--font-body); font-size:1rem; color:var(--gold-deep); font-weight:500; white-space:nowrap;}
.menu li b.ask{color:var(--taupe); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; font-weight:400;}

.panel__intro{
  text-align:center; font-family:var(--font-display); font-style:italic; font-size:1.4rem;
  color:var(--brown); margin-bottom:36px;
}
.chips{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:8px;}
.chips span{
  padding:14px 26px; border:1px solid var(--sand); border-radius:24px;
  font-size:.92rem; color:var(--espresso); background:var(--white);
}

.services__note{text-align:center; margin-top:56px; font-size:.82rem; color:var(--taupe); max-width:560px; margin-left:auto; margin-right:auto;}

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  position:relative; text-align:center; padding:130px 32px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217,189,124,.16), transparent 60%),
    linear-gradient(160deg, var(--espresso-2), var(--espresso) 60%, #241b12);
  overflow:hidden;
}
.cta-banner__mark{width:64px; margin:0 auto 26px; opacity:.9;}
.cta-banner h2{color:#fff; font-size:clamp(2rem, 4vw, 2.9rem); margin-bottom:16px;}
.cta-banner p{color:rgba(255,255,255,.7); margin-bottom:40px; font-size:1.05rem;}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{max-width:var(--container); margin:0 auto; padding:150px 32px;}
.gallery__head{text-align:center; max-width:600px; margin:0 auto 60px;}
.gallery__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:220px 220px;
  gap:18px;
}
.gallery__grid figure{position:relative; margin:0; overflow:hidden; border-radius:2px;}
.gallery__grid img{width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease);}
.gallery__grid figure:hover img{transform:scale(1.08);}
.gallery__grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:20px;
  background:linear-gradient(0deg, rgba(20,15,9,.75), transparent);
  color:#fff; font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  opacity:0; transform:translateY(8px); transition:all .45s var(--ease);
}
.gallery__grid figure:hover figcaption{opacity:1; transform:translateY(0);}
.g1{grid-column:1/3; grid-row:1/3;}
.g2{grid-column:3/5; grid-row:1/2;}
.g3{grid-column:3/4; grid-row:2/3;}
.g4{grid-column:4/5; grid-row:2/3;}

/* =========================================================
   LOCATION
   ========================================================= */
.location{
  max-width:var(--container); margin:0 auto 150px; padding:0 32px;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center;
}
.info-list{margin:34px 0 40px; display:flex; flex-direction:column; gap:20px;}
.info-list li{display:flex; align-items:center; gap:14px; font-size:1.02rem; color:var(--brown);}
.info-list .icon{width:20px; height:20px; fill:var(--gold-deep); flex-shrink:0;}
.info-list a:hover{color:var(--gold-deep);}
.location__map{height:520px; border-radius:2px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,32,22,.35);}
.location__map iframe{width:100%; height:100%; border:0; filter:sepia(8%) saturate(85%);}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--espresso-2); color:rgba(255,255,255,.65);
  padding:90px 32px 40px; text-align:center;
}
.footer__mark{width:48px; margin:0 auto 18px; opacity:.9;}
.footer__word{font-family:var(--font-display); font-size:1.7rem; color:#fff; letter-spacing:.04em;}
.footer__word em{font-style:normal; color:var(--gold-light); font-size:.95rem; letter-spacing:.2em; text-transform:uppercase; display:block; margin-top:6px;}
.footer__tag{font-family:var(--font-display); font-style:italic; color:var(--gold-light); margin-top:14px; font-size:1.1rem;}

.footer__links{display:flex; justify-content:center; gap:34px; margin:50px 0 34px; flex-wrap:wrap;}
.footer__links a{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; transition:color .3s;}
.footer__links a:hover{color:var(--gold-light);}

.footer__contact{
  display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
  font-size:.86rem; margin-bottom:50px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__contact a:hover{color:var(--gold-light);}

.footer__disclaimer{max-width:640px; margin:0 auto 26px; font-size:.76rem; line-height:1.7; color:rgba(255,255,255,.35);}
.footer__legal{font-size:.74rem; color:rgba(255,255,255,.3); letter-spacing:.04em;}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .35s var(--ease);
}
.wa-float svg{width:28px; height:28px; fill:#fff; position:relative; z-index:1;}
.wa-float:hover{transform:scale(1.08);}
.wa-float__ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation: pulse 2.2s infinite;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:.7;}
  100%{transform:scale(1.7); opacity:0;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .about, .location{grid-template-columns:1fr; gap:50px;}
  .about__media img{height:420px;}
  .about__media-frame{display:none;}
  .location__map{height:400px;}
  .gallery__grid{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4, 200px);}
  .g1{grid-column:1/3; grid-row:1/2;}
  .g2{grid-column:1/3; grid-row:2/3;}
  .g3{grid-column:1/2; grid-row:3/4;}
  .g4{grid-column:2/3; grid-row:3/4;}
}

@media (max-width: 760px){
  :root{--nav-h:74px;}
  .nav__links{
    position:fixed; top:74px; left:0; right:0; bottom:0;
    background:var(--cream); flex-direction:column; justify-content:flex-start; gap:0;
    padding:20px 32px; transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .nav__links.is-open{transform:translateX(0);}
  .nav__links a{color:var(--ink); width:100%; padding:20px 0; border-bottom:1px solid var(--sand); font-size:1rem;}
  .nav__cta{display:none;}
  .nav__burger{display:flex;}

  .hero__content{margin-left:0; padding:0 24px;}
  .hero__scrim{background:linear-gradient(0deg, rgba(20,15,9,.85) 10%, rgba(20,15,9,.45) 55%, rgba(20,15,9,.25) 100%);}

  .about, .services, .gallery, .location{padding-left:24px; padding-right:24px;}
  .about{padding-top:100px; padding-bottom:100px;}
  .gallery{padding-top:100px; padding-bottom:100px;}
  .location{margin-bottom:100px;}
  .cta-banner{padding:90px 24px;}

  .menu li{flex-wrap:wrap;}
  .menu li i{display:none;}
  .menu li span{flex:1 1 100%;}

  .gallery__grid{grid-template-columns:1fr; grid-template-rows:none;}
  .g1,.g2,.g3,.g4{grid-column:1/2; grid-row:auto; height:280px;}
}