/* Nolina Sitio Web v2 */

:root{
--gutter:clamp(16px,3vw,40px);
--grid-gap:clamp(12px,1.5vw,20px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--nolina-cream);color:var(--nolina-espresso);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--nolina-espresso);text-decoration:none;transition:color var(--dur-fast) var(--ease-calm)}
a:hover{color:var(--nolina-sage)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
h1,h2,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Type helpers ---------- */
.caps{font:500 10px/1 var(--font-caps);letter-spacing:0.2em}
.caps-in{font:500 0.8em/1 var(--font-caps);letter-spacing:0.04em}
.muted{color:var(--nolina-sage)}
.section-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.section-head h2{font:400 clamp(26px,2.8vw,38px)/1.2 var(--font-serif);text-wrap:balance}
.section-head p{font:400 14px/1.5 var(--font-sans);letter-spacing:0.05em;color:var(--nolina-sage)}

/* ---------- Button (DS: Button) ---------- */
.btn{display:inline-block;font-family:var(--font-caps);font-weight:500;letter-spacing:0.18em;text-transform:uppercase;line-height:1.2;border-radius:var(--radius-pill);cursor:pointer;text-align:center;transition:opacity var(--dur-fast) var(--ease-calm)}
.btn:hover{opacity:.82}
.btn--primary,.btn--primary:hover{background:var(--nolina-espresso);color:var(--nolina-cream);border:1px solid var(--nolina-espresso)}
.btn--secondary,.btn--secondary:hover{background:var(--nolina-taupe);color:var(--nolina-cream);border:1px solid var(--nolina-taupe)}
.btn--outline,.btn--outline:hover{background:transparent;color:var(--nolina-espresso);border:1px solid var(--nolina-taupe)}
.btn--sm{padding:8px 16px;font-size:12px}
.btn--md{padding:12px 24px;font-size:13px}

/* ---------- Image placeholders ---------- */
.media{position:relative;background:var(--nolina-stone);overflow:hidden}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--ph{display:grid;place-items:center}
.media--ph::after{content:attr(data-ph);font:500 10px/1.4 var(--font-caps);letter-spacing:0.2em;text-transform:uppercase;color:var(--nolina-taupe);padding:0 16px;text-align:center}

/* ---------- Curtain intro ---------- */
@keyframes nl-curtain{0%,55%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes nl-curtain-logo{0%{opacity:0;transform:translateY(10px)}25%,50%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(-16px)}}
.curtain{position:fixed;inset:0;z-index:100;background:var(--nolina-stone);display:flex;align-items:center;justify-content:center;animation:nl-curtain 2.2s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none;overflow:hidden}
.curtain__script{position:absolute;left:50%;top:50%;width:max(150vh,110vw);max-width:none;height:auto;transform:translate(-50%,-50%) rotate(-62deg);opacity:.9}
.curtain__logo{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;animation:nl-curtain-logo 2.2s cubic-bezier(.33,0,.2,1) forwards}
.curtain__logo img{height:72px;width:auto}
.curtain__logo span{font:500 12px/1 var(--font-caps);letter-spacing:0.32em;color:var(--nolina-espresso)}

/* ---------- Promo bar ---------- */
.promo-bar{background:var(--nolina-taupe);color:var(--nolina-cream);padding:9px 20px;text-align:center;font:500 10px/1.3 var(--font-caps);letter-spacing:0.2em}
.promo-bar a,.promo-bar a:hover{color:var(--nolina-cream);border-bottom:1px solid var(--nolina-cream)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:20;background:var(--nolina-cream);border-bottom:1px solid var(--nolina-sand)}
.header__in{padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.header__l{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.header__logo img{height:30px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:24px}
.header__r{display:flex;align-items:center;gap:18px}
.header__loc{font:italic 400 17px/1 var(--font-serif);letter-spacing:0.04em}
.burger{display:none;align-items:center;height:44px;padding:0;background:none;border:none;cursor:pointer;color:var(--nolina-espresso);font:500 10px/1 var(--font-caps);letter-spacing:0.2em}
.mnav{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100svh - 100%);overflow-y:auto;background:var(--nolina-cream);border-top:1px solid var(--nolina-sand);padding:12px 20px 32px;flex-direction:column}
.mnav>a{padding:16px 0;border-bottom:1px solid var(--nolina-sand);font:400 26px/1.1 var(--font-serif)}
.mnav__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px}
.mnav__foot span{font:400 26px/1 var(--font-signature);color:var(--nolina-taupe)}

/* ---------- Hero ---------- */
.hero{position:relative;height:clamp(560px,86vh,900px);background:var(--nolina-stone);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__rays{position:absolute;inset:0;pointer-events:none}
.hero__rays canvas{width:100%;height:100%;display:block}
.hero__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,22px);padding:0 24px;text-align:center;pointer-events:none}
.hero__welcome{font:400 clamp(36px,4.6vw,72px)/1 var(--font-script)}
.hero__logo{width:min(550px,34vw);height:auto}
.hero__spa{font:500 clamp(11px,1vw,14px)/1.2 var(--font-caps);letter-spacing:var(--tracking-wide);white-space:nowrap;padding-left:var(--tracking-wide)}
.hero__p{max-width:min(36vw,420px);min-width:240px;font:400 clamp(14px,1.1vw,16px)/1.55 var(--font-sans);letter-spacing:0.05em;text-wrap:balance}
.hero__content .btn{pointer-events:auto}

/* ---------- Marquee ---------- */
@keyframes nl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{border-top:1px solid var(--nolina-sand);border-bottom:1px solid var(--nolina-sand);overflow:hidden;height:46px;display:flex;align-items:center}
.marquee__track{display:flex;width:max-content;animation:nl-marquee 42s linear infinite;font:italic 500 15px/1 var(--font-sans);letter-spacing:0.06em}
.marquee__track span{padding:0 34px;white-space:nowrap}

/* ---------- Card grids ---------- */
.grid{padding:clamp(28px,3vw,40px) var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--grid-gap)}
.card{background:var(--nolina-porcelain);display:flex;flex-direction:column;align-items:center;text-align:center}
.card--pad{padding:clamp(20px,2vw,28px);gap:18px}
.card__name{font:400 22px/1.2 var(--font-serif)}
.card__price{font:400 15px/1 var(--font-sans);letter-spacing:var(--tracking-body);color:var(--nolina-sage)}

/* Services */
.services{padding-top:clamp(16px,2vw,24px);padding-bottom:clamp(16px,2vw,24px)}
.services .media{width:100%;aspect-ratio:4/3}
.services__body{padding:32px 28px 36px;display:flex;flex-direction:column;align-items:center;gap:16px;flex:1}
.services__body .caps{color:var(--nolina-sage)}
.services__body p{max-width:320px;font:400 22px/1.3 var(--font-serif);text-wrap:balance}
.services__body p .caps-in{font-size:17px;letter-spacing:0.06em}
.services__cta{margin-top:auto;padding-top:8px}

/* Favourites */
.favs-head{padding:clamp(48px,6vw,80px) var(--gutter) 0}
.favs .media{width:100%;aspect-ratio:1/1.15}

/* Promos */
.promos-head{padding:clamp(56px,7vw,96px) var(--gutter) 0}
.promos-head h2{font:400 clamp(56px,6vw,84px)/1 var(--font-script);color:var(--nolina-ink)}
.promos-head p{max-width:480px;font:400 15px/1.55 var(--font-sans);letter-spacing:0.05em;color:var(--nolina-espresso);text-wrap:pretty}
/* Horizontal rail: cards bleed past the right edge to signal scroll */
.promos-rail{padding:clamp(32px,3.5vw,48px) 0 0}
.promos{display:flex;gap:var(--grid-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) 4px;scrollbar-width:none;cursor:grab}
.promos::-webkit-scrollbar{display:none}
.promos.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.promos:focus-visible{outline-offset:-2px}
.promo{flex:0 0 clamp(280px,28vw,420px);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--nolina-porcelain);transition:background var(--dur-calm) var(--ease-calm),color var(--dur-calm) var(--ease-calm)}
.promo .media{aspect-ratio:4/5}
.promo .media img{pointer-events:none}
.promo__body{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.2vw,32px)}
.promo__day{display:flex;align-items:baseline;gap:12px;font:500 11px/1 var(--font-caps);letter-spacing:0.2em;color:var(--nolina-sage)}
.promo__num{font:400 26px/1 var(--font-script);letter-spacing:0;color:var(--nolina-taupe)}
.promo__name{font:400 clamp(26px,2.4vw,34px)/1.15 var(--font-serif);color:var(--nolina-ink)}
.promo__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding-top:18px;border-top:1px solid var(--nolina-sand)}
.promo__price{font:400 clamp(24px,2vw,30px)/1 var(--font-serif);font-variant-numeric:tabular-nums}
/* Today's promo: inverted card */
.promo.is-today{background:var(--nolina-espresso);color:var(--nolina-cream)}
.promo.is-today .promo__name{color:var(--nolina-cream)}
.promo.is-today .promo__day{color:var(--nolina-sand)}
.promo.is-today .promo__num{color:var(--nolina-taupe)}
.promo.is-today .promo__foot{border-top-color:rgba(248,245,239,.18)}
.promo.is-today .btn--outline{background:var(--nolina-cream);color:var(--nolina-espresso);border-color:var(--nolina-cream)}
.badge-today{position:absolute;top:16px;left:16px;z-index:1;background:var(--nolina-espresso);color:var(--nolina-cream);padding:7px 12px;border-radius:var(--radius-pill);font:500 10px/1 var(--font-caps);letter-spacing:0.2em}
.promo.is-today .badge-today{background:var(--nolina-cream);color:var(--nolina-espresso)}
/* Controls */
.promos-ctrl{display:flex;align-items:center;gap:10px;padding:24px var(--gutter) 0}
.promos-progress{flex:1;height:1px;background:var(--nolina-sand);margin-right:clamp(12px,2vw,28px);position:relative;overflow:hidden}
.promos-progress span{position:absolute;inset:0 auto 0 0;width:0;background:var(--nolina-espresso);transition:width 120ms linear}
.promos-arrow{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--nolina-taupe);background:transparent;color:var(--nolina-espresso);cursor:pointer;transition:background var(--dur-fast) var(--ease-calm),color var(--dur-fast) var(--ease-calm),opacity var(--dur-fast) var(--ease-calm)}
.promos-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.promos-arrow:hover:not(:disabled){background:var(--nolina-espresso);color:var(--nolina-cream);border-color:var(--nolina-espresso)}
.promos-arrow:disabled{opacity:.3;cursor:default}
.promos-month{display:flex;justify-content:center;padding:32px 16px 0}

/* ---------- Loyalty ---------- */
.loyalty{margin:clamp(16px,2vw,24px) var(--gutter);background:var(--nolina-stone);overflow:hidden;color:var(--nolina-cream);position:relative;padding:clamp(56px,8vw,112px) 24px;display:flex;flex-direction:column;align-items:center}
.loyalty__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.loyalty__veil{position:absolute;inset:0;z-index:1;background:rgba(52,66,46,0.62)}
.loyalty__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.loyalty__in .caps{color:var(--nolina-sand)}
.loyalty h2{font:400 clamp(40px,5.5vw,76px)/1.05 var(--font-serif);text-wrap:balance}
.loyalty h2 .caps-in{font-size:0.78em}
.loyalty p{max-width:520px;font:400 16px/1.6 var(--font-sans);letter-spacing:0.04em;color:var(--nolina-linen);text-wrap:pretty}
.loyalty__badge{position:absolute;z-index:2;left:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,40px);width:56px;height:56px;border-radius:50%;background:var(--nolina-taupe);display:grid;place-items:center}
.loyalty__badge img{width:37px;height:auto}
.loyalty__script{position:absolute;z-index:2;right:clamp(20px,4vw,64px);top:clamp(20px,3vw,40px);height:44px;width:auto;transform:rotate(-12deg)}

/* ---------- Visit ---------- */
.visit{padding:0 var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.visit__info{background:var(--nolina-stone);padding:clamp(40px,6vw,88px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:28px}
.visit__title{display:flex;flex-direction:column;gap:8px}
.visit__title .caps{color:var(--nolina-sage)}
.visit__title span:last-child{font:400 clamp(26px,2.6vw,34px)/1.2 var(--font-serif)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:14px 28px;align-items:baseline;margin:0}
.hours dt{font:600 14px/1 var(--font-sans);letter-spacing:var(--tracking-body)}
.hours dd{margin:0;font:400 clamp(32px,4vw,56px)/1 var(--font-serif)}
.visit__ctas{display:flex;flex-wrap:wrap;gap:10px}
.visit .media{min-height:440px}

/* ---------- Menu & prices ---------- */
.menu{padding:clamp(72px,9vw,120px) var(--gutter)}
.menu .section-head{margin-bottom:clamp(32px,4vw,56px)}
.menu__layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,4vw,64px);align-items:start;max-width:1320px;margin:0 auto}
.menu__cats{display:flex;flex-direction:column}
.cat{display:flex;align-items:baseline;gap:18px;padding:11px 0;background:none;border:none;cursor:pointer;text-align:left;color:var(--nolina-sage);transition:color var(--dur-calm) var(--ease-calm)}
.cat:hover,.cat[aria-selected="true"]{color:var(--nolina-espresso)}
.cat__num{font:500 11px/1 var(--font-caps);letter-spacing:0.12em;width:22px;flex:none}
.cat__label{font:400 24px/1.2 var(--font-serif)}
.cat__line{flex:1;align-self:center;height:1px;background:var(--nolina-taupe);opacity:0;transition:opacity var(--dur-calm) var(--ease-calm)}
.cat[aria-selected="true"] .cat__line{opacity:1}
.menu__detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,3vw,48px);align-items:start;min-width:0}
.menu__imgs{position:relative;height:460px;overflow:hidden;background:var(--nolina-stone)}
.menu__imgs .media{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-calm) var(--ease-calm)}
.menu__imgs .media.is-active{opacity:1}

/* DS: PriceList */
.pricelist{color:var(--nolina-ink);letter-spacing:var(--tracking-body);min-width:0}
.pricelist[hidden]{display:none}
.favs .card[hidden]{display:none}
.pricelist h3{margin:0 0 6px;font:600 22px/1.2 var(--font-sans);letter-spacing:var(--tracking-body)}
.pricelist dl{display:grid;grid-template-columns:minmax(0,260px) auto;column-gap:16px;row-gap:4px;margin:0}
.pricelist dt,.pricelist dd{margin:0;font:400 17px/1.45 var(--font-sans)}
.pricelist dd{font-variant-numeric:tabular-nums}

/* ---------- Footer ---------- */
.footer{background:var(--nolina-linen);color:var(--nolina-espresso)}
.footer__in{padding:clamp(48px,6vw,80px) var(--gutter) 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:40px;align-items:start}
.footer__brand{display:flex;flex-direction:column;gap:28px}
.footer__brand img{width:min(100%,240px);height:auto}
.footer__addr{display:flex;flex-direction:column;gap:6px}
.footer__addr .caps{font-size:11px}
.footer__addr span:last-child{font:400 13px/1.5 var(--font-sans);letter-spacing:0.05em}
.footer__links{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.footer__links>div{display:flex;flex-direction:column;gap:10px;font:400 14px/1.3 var(--font-sans);letter-spacing:0.04em}
.footer__links .caps{color:var(--nolina-sage);margin-bottom:4px}
.newsletter{display:flex;flex-direction:column;gap:16px}
.newsletter__title{font:400 24px/1.25 var(--font-serif)}
.newsletter form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.newsletter input{flex:1;min-width:200px;font:400 16px/1.4 var(--font-sans);letter-spacing:0.04em;color:var(--nolina-espresso);background:var(--nolina-porcelain);border:1px solid var(--nolina-sand);border-radius:var(--radius-card);padding:12px 14px;outline:none;transition:border-color var(--dur-fast) var(--ease-calm)}
.newsletter input:focus{border-color:var(--nolina-sage)}
.newsletter input::placeholder{color:var(--nolina-taupe)}
.newsletter .btn{padding-top:15px;padding-bottom:15px}
.footer__bar{padding:20px var(--gutter);border-top:1px solid var(--nolina-sand);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--nolina-sage)}

/* ---------- WhatsApp float ---------- */
.wa{position:fixed;right:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);z-index:50;display:flex;align-items:center;width:45px;height:45px;border-radius:50%;overflow:hidden;background:#00d757;box-shadow:2px 2px 10px rgba(0,0,0,.2);transition:width .3s,border-radius .3s}
.wa__sign{width:100%;flex:none;display:flex;align-items:center;justify-content:center;transition:width .3s,padding .3s}
.wa__sign svg{width:25px;display:block}
.wa__text{position:absolute;right:0;width:0;opacity:0;overflow:hidden;white-space:nowrap;color:#fff;font:600 1.2em/1 var(--font-sans);transition:width .3s,opacity .3s,padding .3s}
.wa:hover,.wa:focus-visible{width:150px;border-radius:40px}
.wa:hover .wa__sign,.wa:focus-visible .wa__sign{width:30%;padding-left:10px}
.wa:hover .wa__text,.wa:focus-visible .wa__text{width:70%;opacity:1;padding-right:10px}
.wa:active{transform:translate(2px,2px)}

/* ---------- Mobile ---------- */
@media (max-width:760px){
.nav,.header__loc{display:none}
.burger{display:flex}
.header.is-open .mnav{display:flex}
.header__in{flex-wrap:nowrap;gap:12px}
.header__r{gap:14px}
.hero{height:min(640px,84svh)}
.hero__logo{width:min(550px,66vw)}
.hero__p{max-width:84vw}
.scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{flex:0 0 76%;scroll-snap-align:center}
.promo{flex-basis:84%}
.promos-arrow{display:none}
.promos-progress{margin-right:0}
.loyalty{padding-top:104px;padding-bottom:112px}
.loyalty__script{height:32px}
.hours dd{font-size:28px}
.visit .media{min-height:300px}
.menu__imgs{height:260px}
.cat{padding:9px 0}
.cat__label{font-size:21px}
.footer__bar{flex-direction:column;align-items:center;text-align:center;padding-bottom:84px;line-height:1.6}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.curtain{display:none}
.marquee__track{animation:none}
}