/* ============================================================
   OASIS SNACK DELIGHTS & PURIFIED WATER
   Visual world: "Neon Palet-ería After Dark"
   Deep plum-black ink + warm bone paper + van-wrap neons.
   ============================================================ */

:root{
  /* --- ink (base) --- */
  --ink:      #130A1C;
  --ink-2:    #1B0F27;
  --ink-3:    #2A1A3C;
  --ink-4:    #3E2A54;

  /* --- warm paper --- */
  --bone:     #F8F0E3;
  --bone-2:   #EFE2CD;
  --bone-3:   #DFCDB2;

  /* --- neons, pulled from the van wrap + menu board --- */
  --magenta:  #FF2E88;
  --violet:   #8B45FF;
  --azul:     #2E86FF;
  --mango:    #FFB627;
  --lime:     #C9F24E;
  --chile:    #E8232B;
  /* darkened magenta, for SMALL text on the bone paper */
  --magenta-ink: #C0004E;

  --accent:   var(--magenta);

  /* --- type --- */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* --- rhythm --- */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(3.5rem, 6.5vw, 6.5rem);
  --max: 1280px;

  --bd: 3px;
  --r:  22px;

  --ease: cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--magenta); color:#fff; }

.sr,.skip:not(:focus){
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:fixed; top:1rem; left:1rem; z-index:999;
  background:var(--mango); color:var(--ink); padding:.75rem 1.25rem;
  border-radius:999px; font-weight:700; text-decoration:none;
}
:focus-visible{ outline:3px solid var(--mango); outline-offset:3px; border-radius:4px; }

/* ---------- film grain ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:min(100% - var(--gut)*2, var(--max)); margin-inline:auto; }

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; margin:0; line-height:.94; letter-spacing:-.025em; }

.eyebrow{
  font-family:var(--body); font-size:.75rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:.85rem;
  color:var(--ink-4); margin:0 0 1.5rem;
}
.eyebrow--light{ color:var(--mango); }
.eyebrow__rule{ width:2.5rem; height:2px; background:currentColor; flex:none; }

.sech{
  font-size:clamp(2.4rem, 1.3rem + 4.6vw, 5rem);
  color:var(--ink);
}
.sech--light{ color:var(--bone); }
.sech--sm{ font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); }
.sech em{ font-style:normal; color:var(--magenta); }
.sech--light em{ color:var(--mango); }

.sedeck{
  font-size:clamp(1.02rem,.98rem + .35vw,1.24rem);
  color:#54406B; max-width:56ch; margin:1.75rem 0 0;
}
.sedeck--light{ color:#C3AFD6; }

.sechead{ margin-bottom:clamp(2rem,3.5vw,3.25rem); }
.sechead--center{ text-align:center; }
.sechead--center .eyebrow{ justify-content:center; }
.sechead--center .sedeck{ margin-inline:auto; }

.body{ margin:1.25rem 0 0; color:#54406B; max-width:54ch; }

.sec{ padding-block:var(--sec); position:relative; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--magenta); --fg:#fff; --sh:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:800; font-size:.95rem;
  letter-spacing:-.01em;
  padding:.95rem 1.7rem; border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:var(--bd) solid var(--ink);
  box-shadow:5px 5px 0 var(--sh);
  text-decoration:none; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .2s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--sh); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--sh); }
.btn--lg{ padding:1.15rem 2.1rem; font-size:1.06rem; }
.btn--sm{ padding:.6rem 1.05rem; font-size:.85rem; box-shadow:3px 3px 0 var(--sh); }
.btn--sm:hover{ box-shadow:5px 5px 0 var(--sh); }
.btn--block{ display:flex; width:100%; }
.btn--mango{ --bg:var(--mango); --fg:var(--ink); }
.btn--magenta{ --bg:var(--magenta); --fg:#fff; }
.btn--ink{ --bg:var(--ink); --fg:var(--bone); --sh:var(--magenta); }
.btn--ghost{
  --bg:transparent; --fg:var(--bone); --sh:var(--mango);
  border-color:var(--bone);
}
.btn--ghost:hover{ --bg:var(--bone); --fg:var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; z-index:900;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.nav.is-stuck{
  background:rgba(19,10,28,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(248,240,227,.12);
}
.nav__in{
  width:min(100% - var(--gut)*2, 1420px); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
  padding-block:1.1rem;
}

.brand{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--bone); flex:none;
}
.brand__palm{ width:1.35rem; height:1.6rem; color:var(--lime); flex:none; }
.brand__word{
  font-family:var(--display); font-weight:800; font-size:1.7rem;
  letter-spacing:-.04em; line-height:1;
}
.brand__sub{
  font-size:.58rem; line-height:1.25; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--magenta); padding-left:.5rem; margin-left:.15rem;
  border-left:2px solid rgba(248,240,227,.22);
}

.nav__links{ display:flex; gap:1.9rem; margin-left:auto; }
.nav__links a{
  text-decoration:none; font-size:.86rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(248,240,227,.78); position:relative; padding-block:.3rem;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--mango); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__end{ display:flex; align-items:center; gap:1rem; }

.status{
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(248,240,227,.8);
}
.status__dot{
  width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none;
  box-shadow:0 0 0 0 rgba(201,242,78,.6); animation:pulse 2.4s infinite;
}
.status.is-closed .status__dot{ background:var(--chile); animation:none; }
.status__hrs{ font-style:normal; color:rgba(248,240,227,.45); }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(201,242,78,0); } 100%{ box-shadow:0 0 0 0 rgba(201,242,78,0); } }

.burger{
  display:none; width:44px; height:44px; padding:11px 9px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{ height:2.5px; background:var(--bone); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

.mobnav{
  display:none; flex-direction:column; gap:.35rem;
  padding:1rem var(--gut) 2rem;
  background:var(--ink-2); border-top:1px solid rgba(248,240,227,.1);
}
.mobnav a:not(.btn){
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  text-decoration:none; padding:.55rem 0; color:var(--bone);
  border-bottom:1px solid rgba(248,240,227,.08);
}
.mobnav .btn{ margin-top:1.1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:9rem 0 clamp(3.5rem,7vw,6rem);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 42%;
  animation:kb 26s var(--ease) infinite alternate;
}
@keyframes kb{ from{ transform:scale(1.02); } to{ transform:scale(1.11); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(19,10,28,.86) 0%, rgba(19,10,28,.35) 34%, rgba(19,10,28,.75) 66%, var(--ink) 99%),
    linear-gradient(94deg, rgba(19,10,28,.9) 0%, rgba(19,10,28,.42) 46%, rgba(139,69,255,.2) 100%);
}

.hero__body{ position:relative; z-index:2; width:min(100% - var(--gut)*2, var(--max)); margin-inline:auto; }

.hero__h{
  font-size:clamp(3.4rem, 1.1rem + 11.2vw, 10.5rem);
  line-height:.8; letter-spacing:-.045em; margin:0 0 1.75rem;
  text-shadow:0 4px 40px rgba(19,10,28,.55);
}
.hero__l1{
  display:block; font-size:.29em; font-weight:600; letter-spacing:-.01em;
  color:var(--mango); margin-bottom:.5em; text-transform:uppercase;
}
.hero__l2{ display:flex; align-items:flex-start; gap:.06em; color:var(--bone); }
.hero__palm{
  width:.42em; height:.5em; color:var(--lime); flex:none; margin-top:.06em;
  filter:drop-shadow(0 0 26px rgba(201,242,78,.45));
}

.hero__p{
  max-width:44ch; font-size:clamp(1.05rem,1rem + .4vw,1.32rem);
  color:#D9CBEA; margin:0 0 2.4rem;
}
.hero__p strong{ color:var(--bone); font-weight:700; box-shadow:inset 0 -.5em 0 rgba(46,134,255,.35); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.5rem; }

.hero__facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; list-style:none; padding:0; margin:0;
  background:rgba(248,240,227,.16);
  border:1px solid rgba(248,240,227,.16); border-radius:16px; overflow:hidden;
  max-width:640px;
}
.hero__facts li{
  background:rgba(19,10,28,.62); backdrop-filter:blur(8px);
  padding:1.05rem .9rem; text-align:center;
}
.hero__facts b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem); color:var(--mango);
  line-height:1; letter-spacing:-.03em;
}
.hero__facts span{
  display:block; margin-top:.35rem; font-size:.65rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:rgba(248,240,227,.62);
}

.hero__scroll{
  position:absolute; z-index:3; bottom:1.5rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(248,240,227,.4); border-radius:999px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--mango); transform:translateX(-50%);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,16px)} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--magenta); color:var(--ink);
  border-block:var(--bd) solid var(--ink);
  padding:.85rem 0; overflow:hidden; position:relative; z-index:5;
}
.marquee__t{ display:flex; width:max-content; animation:slide 44s linear infinite; }
.marquee__t span{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.1rem,1rem + .7vw,1.65rem);
  letter-spacing:-.02em; white-space:nowrap; padding-right:1rem;
}
.marquee__t i{ color:var(--bone); font-style:normal; padding-inline:.35rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   MENU
   ============================================================ */
.sec--menu{ background:var(--bone); color:var(--ink); }
.sec--menu::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--bone-3) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000,transparent 40%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 40%);
}
.sec--menu > .wrap{ position:relative; z-index:1; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin:2.75rem 0 3rem; }
.chip{
  font-family:var(--display); font-weight:800; font-size:.88rem;
  padding:.62rem 1.25rem; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); letter-spacing:-.01em;
  transition:background .2s, color .2s, transform .2s var(--ease);
}
.chip:hover{ transform:translateY(-2px); background:var(--bone-2); }
.chip.is-on{ background:var(--ink); color:var(--bone); }

/* Horizontal rail — bleeds to the right edge so the row reads as scrollable */
.mrail{ position:relative; margin-right:calc(50% - 50vw); }
.mrail__track{
  display:flex; gap:clamp(1rem,1.6vw,1.4rem);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* padding gives the hover lift room; the negative margins pull the row
     back into alignment WITHOUT a right margin (that overflowed the page).
     scroll-padding keeps snap points landing at scrollLeft 0. */
  padding:.5rem .5rem 1.75rem;
  margin-block:-.5rem; margin-left:-.5rem;
  scroll-padding-left:.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.mrail__track::-webkit-scrollbar{ display:none; }
.mrail--bleed .mrail__track::after{ content:""; flex:0 0 calc(50vw - 50% + var(--gut)); }

.railwrap{ position:relative; }
.mrail__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-top:1.25rem;
}
.mrail__note{ margin:0; font-size:.8rem; color:#6B5482; max-width:46ch; }
.mrail__note strong{ color:var(--ink); font-weight:800; }

.mrail__ctrls{ display:flex; gap:.55rem; }
.mrail__ctrls[hidden]{ display:none; }
.mrail__foot--end{ justify-content:flex-end; }
/* dark sections need the inverse button */
.mrail__foot--dark .rbtn{
  background:transparent; color:var(--bone);
  border-color:rgba(248,240,227,.35);
}
.mrail__foot--dark .rbtn:hover:not(:disabled){ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.rbtn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--bone); color:var(--ink);
  border:2px solid var(--ink);
  transition:background .2s, color .2s, transform .2s var(--ease), opacity .2s;
}
.rbtn svg{ width:19px; height:19px; }
.rbtn:hover:not(:disabled){ background:var(--ink); color:var(--bone); transform:translateY(-2px); }
.rbtn:disabled{ opacity:.28; cursor:default; }

/* Card chrome follows the reference component: rounded-xl + border +
   shadow-sm, with a scale(1.03) lift on hover instead of a hard offset. */
/* entrance and hover-lift compose through --lift instead of fighting
   over specificity on `transform` */
.mcard.reveal{ transform:translateY(20px) scale(var(--lift,1)); }
.mcard.reveal.is-in{
  transform:translateY(0) scale(var(--lift,1));
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  transition-delay:calc(var(--d,0) * 70ms);
}
.mcard.reveal.is-in:hover{ transition-delay:0s; transition-duration:.2s; }
.mcard{
  position:relative;
  flex:0 0 clamp(244px,74vw,296px);
  scroll-snap-align:start;
  background:var(--bone);
  border:1.5px solid rgba(19,10,28,.14);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(19,10,28,.05), 0 10px 26px -16px rgba(19,10,28,.35);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  transform-origin:center;
}
.mcard:hover{
  --lift:1.03;
  border-color:var(--accent);
  box-shadow:0 2px 4px rgba(19,10,28,.06), 0 18px 40px -18px rgba(19,10,28,.45);
  z-index:2;
}
.mcard.is-hidden{ display:none; }
.mcard__body{ display:flex; flex-direction:column; flex:1; padding:1.15rem 1.25rem 1.1rem; }

/* photo block — h-48 + from-black/60 scrim + group-hover:scale-105 */
.mcard__ph{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-3); }
.mcard__ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease-in-out;
}
.mcard:hover .mcard__ph img{ transform:scale(1.05); }
.mcard__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent 62%);
}

.mcard__top{ margin-bottom:.55rem; }
.mcard h3{
  font-size:1.28rem; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap;
}
.mcard h3 .alt{
  font-family:var(--body); font-style:normal; font-weight:800; font-size:.52em;
  letter-spacing:.08em; text-transform:uppercase; color:#6B5482;
}

/* category marker — the reference component's veg dot, re-purposed to
   echo the filter the card belongs to (spring entrance, delay .3s) */
.mcard__mark{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:20px; height:20px;
  background:var(--bone);
  border:1.5px solid var(--accent); border-radius:6px;
  display:grid; place-items:center;
  transform:scale(0);
  transition:transform .45s cubic-bezier(.2,1.7,.4,1) .3s;
}
.mcard__mark::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--accent);
}
.reveal.is-in .mcard__mark,.mcard.is-in .mcard__mark{ transform:scale(1); }

.prices{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.7rem; }
.price{
  font-family:var(--display); font-weight:800; font-size:.92rem;
  background:var(--accent); color:var(--afg,var(--ink));
  border:1.5px solid transparent; border-radius:999px;
  padding:.22rem .68rem; line-height:1.3; white-space:nowrap;
}
.price em{ font-style:normal; font-weight:600; font-size:.74em; opacity:.8; }
.price--alt{ background:transparent; border-color:rgba(19,10,28,.22); color:var(--ink); }

.mcard__note{
  margin:0 0 .6rem; font-size:.86rem; color:#6B5482;
  font-style:italic; line-height:1.45;
}

.mcard__gl{
  margin:.55rem 0 .2rem; font-size:.66rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:#6B5482;
}
.mcard__gl:first-of-type{ margin-top:0; }

/* flavours read as a line of text, not 61 separate boxes */
.flav{
  list-style:none; padding:0; margin:0;
  font-size:.9rem; line-height:1.65; color:#4B3862;
}
.flav li{ display:inline; white-space:nowrap; } /* never split "Cookies & Cream" */
.flav li:not(:last-child)::after{
  content:"\00B7"; margin-left:.4em; color:var(--accent); font-weight:800;
}

.mcard__meta{
  display:flex; align-items:center; gap:.4rem;
  margin:auto 0 0; padding-top:.9rem;
  font-size:.76rem; line-height:1.4; color:#6B5482;
}
.mcard__meta .mcard__mi{ flex:none; color:var(--accent); margin-top:.05rem; }
.mcard + .mcard .mcard__meta{ }

.menu__foot{
  margin:3rem 0 0; text-align:center; font-size:.95rem; color:#6B5482;
}
.menu__foot a{ color:var(--magenta-ink); font-weight:700; text-underline-offset:3px; }

/* ============================================================
   PALETAS
   ============================================================ */
.sec--paletas{
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(139,69,255,.34), transparent 62%),
    radial-gradient(900px 480px at 92% 88%, rgba(255,46,136,.28), transparent 60%),
    var(--ink-2);
  border-block:var(--bd) solid var(--ink);
}
.paletas{ display:grid; grid-template-columns:1fr .82fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }

.tiers{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; }
.tier{
  background:rgba(248,240,227,.06); border:2px solid rgba(248,240,227,.22);
  border-radius:14px; padding:.9rem 1.25rem; min-width:104px;
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.tier:hover{ transform:translateY(-4px); border-color:var(--mango); background:rgba(255,182,39,.1); }
.tier b{
  display:block; font-family:var(--display); font-weight:800; font-size:1.9rem;
  line-height:1; color:var(--mango); letter-spacing:-.03em;
}
.tier span{ display:block; margin-top:.25rem; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(248,240,227,.6); }
.tier--hi{ background:var(--magenta); border-color:var(--magenta); }
.tier--hi b{ color:#fff; }
.tier--hi span{ color:rgba(255,255,255,.85); }
.tier--hi:hover{ background:var(--magenta); border-color:#fff; }

.paletas__list{
  background:var(--bone); color:var(--ink);
  border:var(--bd) solid var(--ink); border-radius:var(--r);
  padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:12px 12px 0 var(--lime);
}
.paletas__list h3{
  font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--body); font-weight:700; color:var(--magenta-ink);
  margin-bottom:1.25rem;
}
.paletas__list ul{
  list-style:none; padding:0; margin:0;
  columns:2; column-gap:1.5rem;
}
.paletas__list li{
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  padding:.42rem 0; border-bottom:1px solid rgba(19,10,28,.1);
  break-inside:avoid; letter-spacing:-.015em;
}

/* ============================================================
   WATER
   ============================================================ */
.sec--water{ background:var(--bone); color:var(--ink); }
.water{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center; }

.water__card{
  background:var(--bone);
  border:var(--bd) solid var(--ink); border-radius:var(--r);
  padding:clamp(1.85rem,3.4vw,3rem);
  box-shadow:12px 12px 0 var(--azul);
}
.water__card .sedeck{ margin-top:1.5rem; }

.water__row{
  display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap;
  margin:2.25rem 0; padding:1.5rem 0;
  border-block:2px dashed rgba(19,10,28,.2);
}
.bigprice{ flex:none; }
.bigprice span{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#6B5482;
}
.bigprice b{
  font-family:var(--display); font-weight:800; font-size:clamp(3rem,2rem + 3.4vw,4.4rem);
  line-height:.9; letter-spacing:-.045em; color:var(--azul);
}
.water__pts{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.92rem; color:#54406B; }
.water__pts li{ padding-left:1.5rem; position:relative; }
.water__pts li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:50%; background:var(--azul);
}

.water__side{ min-width:0; }
.water__fig{ margin:0; }
.water__fig img{
  width:100%; height:auto; border-radius:var(--r);
  border:var(--bd) solid var(--ink);
  box-shadow:12px 12px 0 var(--ink); aspect-ratio:4/3; object-fit:cover;
}
.water__fig figcaption{
  margin-top:1rem; font-size:.82rem; color:#6B5482; font-style:italic;
}

/* ============================================================
   CATERING
   ============================================================ */
.cdeco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cdeco__swirl{ position:absolute; color:rgba(255,46,136,.20); }
.cdeco__swirl--a{ top:0; left:0; transform:translate(-33%,-33%); }
.cdeco__swirl--b{ bottom:0; right:0; transform:translate(25%,25%); }

/* floating food — object-cover thumbnails rather than cut-outs,
   since the placeholder shots have backgrounds. Same float loop
   and 300ms per-item delay as the reference. */
.cdeco__float{
  position:absolute; object-fit:cover; border-radius:14px;
  border:2px solid rgba(248,240,227,.18);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  opacity:.5; animation:float 6s ease-in-out infinite;
}
/* floats live in a band over the header only, so they can never
   collide with the cards below regardless of section height */
.cdeco__band{ position:absolute; top:0; left:0; right:0; height:430px; }
.cdeco__float--1{ width:8rem;   top:26%; left:2%; }
.cdeco__float--2{ width:6.5rem; top:56%; left:6%; }
.cdeco__float--3{ width:7.5rem; top:38%; right:3%; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } }
@media (max-width:1180px){ .cdeco__float{ display:none; } }
@media (prefers-reduced-motion:reduce){ .cdeco__float{ animation:none; } }

.sec--catering{
  background:
    radial-gradient(900px 500px at 82% 8%, rgba(46,134,255,.24), transparent 60%),
    var(--ink);
  border-top:var(--bd) solid var(--ink);
  overflow:hidden;
}
.sec--catering > .wrap{ position:relative; z-index:1; }

/* ============================================================
   PRICING CARDS  (ported from the React/Tailwind component)
   Geometry kept 1:1 — max-w-sm, h-600/max-h-500/min-h-300,
   rounded-2xl, p-4, gap-7 / sm:gap-10, h-12 full-width button,
   waves at -top-[106px], crosses spinning on a 5s linear loop.
   Palette re-skinned from purple/indigo to the Oasis accents.
   ============================================================ */
.pw__sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.pkgs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.75rem);
  align-items:stretch;
  margin-bottom:clamp(2.25rem,4vw,3.5rem);
}
@media (max-width:860px){ .pkgs{ grid-template-columns:1fr; } }

.pw{
  position:relative; overflow:hidden;
  width:100%; min-width:0;                   /* three across, no scroll */
  min-height:440px;
  border-radius:1rem;                        /* rounded-2xl */
  color:#fff;
  background:var(--pw-bg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pw--violet{  --pw-bg:#7B2FEA; --pw-tint:123,47,234; }
.pw--magenta{ --pw-bg:#D6165F; --pw-tint:214,22,95; }
.pw--azul{    --pw-bg:#1C6FE0; --pw-tint:28,111,224; }

/* the real (placeholder) food sits behind each tier, tinted to its
   brand colour and scrimmed so white type stays legible */
.pw__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.pw__bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.pw:hover .pw__bg img{ transform:scale(1.06); }
.pw__tint{
  position:absolute; inset:0; z-index:1;
  /* dark + brand where the type sits, a clear window mid-card so the
     food actually reads, dark again behind the button */
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.46) 40%, rgba(0,0,0,.10) 66%, rgba(0,0,0,.52) 100%),
    linear-gradient(180deg, rgba(var(--pw-tint),.66) 0%, rgba(var(--pw-tint),.40) 44%, rgba(var(--pw-tint),.14) 68%, rgba(var(--pw-tint),.52) 100%);
}
.pw:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -22px rgba(0,0,0,.75); }
.pw--hi{ box-shadow:0 0 0 3px var(--mango); }
.pw--hi:hover{ box-shadow:0 0 0 3px var(--mango), 0 26px 50px -22px rgba(0,0,0,.75); }

.pw__in{
  position:absolute; inset:0; z-index:3;
  padding:clamp(.9rem,1.3vw,1.25rem);        /* p-4 */
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start;
  gap:1.75rem;                               /* gap-7 */
}
@media (min-width:640px){ .pw__in{ gap:clamp(1.25rem,2.2vw,2.5rem); } }   /* sm:gap-10 */

.pw__h{
  font-size:var(--pw-fs); line-height:1; font-weight:800;
  letter-spacing:-.03em; margin:0; text-wrap:balance;
}
.pw__price{
  font-size:var(--pw-fs); line-height:1; font-weight:800;
  font-family:var(--display); letter-spacing:-.04em;
}
.pw__u{ font-size:.42em; font-weight:700; opacity:.75; letter-spacing:-.01em; }
.pw__p{
  font-size:var(--pw-fp); font-weight:700; margin:0;
  line-height:1.35; text-wrap:balance;
}
/* one column: the component's full sm: sizes */
:root{ --pw-fs:clamp(1.7rem,9vw,3rem); --pw-fp:clamp(1rem,4vw,1.5rem); }
/* three across: scale to the column so nothing clips */
@media (min-width:861px){
  :root{ --pw-fs:clamp(1.5rem,2.9vw,3rem); --pw-fp:clamp(.95rem,1.15vw,1.5rem); }
}

.pw__foot{ width:100%; flex:1; display:flex; align-items:flex-end; justify-content:flex-end; }
.pw__btn{
  height:3rem; width:100%; min-width:0;      /* h-12 w-full */
  background:#fff; color:#171717;            /* text-neutral-900 */
  border-radius:.5rem;                       /* rounded-lg */
  font-family:var(--display); font-weight:800; font-size:1rem;
  display:grid; place-items:center; text-decoration:none;
  transition:transform .18s var(--ease), background .18s;
}
.pw__btn:hover{ background:var(--mango); transform:translateY(-2px); }

/* --- decorations --- */
.pw__deco{ position:absolute; top:-106px; z-index:2; color:rgba(255,255,255,.14); pointer-events:none; }
.pw__deco--l{ left:0; }
.pw__deco--r{ right:0; }
@media (min-width:640px){ .pw__deco--l{ left:1rem; } .pw__deco--r{ right:1rem; } }
.pw__deco svg{ display:block; animation:waves 3.5s linear infinite; }
@keyframes waves{ from{ transform:translateY(-170px); } to{ transform:translateY(0); } }

.pw__cross{ position:absolute; z-index:2; color:rgba(255,255,255,.14); pointer-events:none; }
.pw__cross svg{ display:block; transform:scale(1.25); animation:pwspin 5s linear infinite; }
.pw__cross--1{ top:0; left:-2.5rem; }
.pw__cross--2{ top:50%; right:-3rem; }
.pw__cross--3{ top:85%; left:-1.25rem; }
@keyframes pwspin{ to{ transform:scale(1.25) rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .pw__deco svg,.pw__cross svg{ animation:none; }
}

.cater2{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.cater2__pick h3{
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem); color:var(--bone); margin-bottom:1.25rem;
}
.cater2__pick h3.mt{ margin-top:3rem; }

.picklist{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.picklist li{
  font-family:var(--display); font-weight:800; font-size:1rem;
  border:2px solid rgba(248,240,227,.3); border-radius:999px;
  padding:.5rem 1.1rem; color:var(--bone); letter-spacing:-.015em;
  transition:border-color .2s, background .2s, color .2s;
}
.picklist li:hover{ border-color:var(--lime); background:var(--lime); color:var(--ink); }

.fineprint{ margin:1.5rem 0 0; font-size:.83rem; color:rgba(248,240,227,.5); max-width:48ch; }

.bulk{ width:100%; border-collapse:collapse; margin-top:.5rem; }
.bulk th,.bulk td{
  text-align:left; padding:.85rem .5rem;
  border-bottom:1px solid rgba(248,240,227,.14);
  font-size:.95rem; vertical-align:middle;
}
.bulk th{
  font-family:var(--display); font-weight:800; font-size:1.06rem;
  color:var(--bone); width:38%; letter-spacing:-.02em;
}
.bulk td{ color:rgba(248,240,227,.62); }
.bulk__p{
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  color:var(--mango); text-align:right !important; letter-spacing:-.02em;
}
.cater2__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }

.cater2__fig{ margin:0; }
.cater2__fig img{
  width:100%; height:auto; border-radius:var(--r);
  border:var(--bd) solid var(--bone);
  box-shadow:14px 14px 0 var(--magenta);
  aspect-ratio:3/4; object-fit:cover; object-position:center 42%;
}

/* ============================================================
   STORY
   ============================================================ */
.sec--story{ background:var(--bone-2); color:var(--ink); }
.story{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.story__fig{ margin:0; }
.story__fig img{
  width:100%; height:auto; border-radius:var(--r);
  border:var(--bd) solid var(--ink);
  box-shadow:14px 14px 0 var(--magenta);
  aspect-ratio:3/4; object-fit:cover;
}
.story__fig figcaption{ margin-top:1.1rem; font-size:.82rem; color:#6B5482; font-style:italic; }

.pull{
  margin:2rem 0 0; padding:0 0 0 1.5rem;
  border-left:5px solid var(--magenta);
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);
  line-height:1.28; letter-spacing:-.02em; color:var(--ink);
}
.story__socials{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.25rem; }
.story__socials a{
  font-family:var(--display); font-weight:800; font-size:1rem;
  text-decoration:none; color:var(--ink);
  border-bottom:3px solid var(--magenta); padding-bottom:.15rem;
  transition:color .2s, border-color .2s;
}
.story__socials a:hover{ color:var(--magenta-ink); border-color:var(--ink); }

/* ============================================================
   VISIT
   ============================================================ */
.sec--visit{
  background:
    radial-gradient(800px 460px at 50% 0%, rgba(255,46,136,.2), transparent 62%),
    var(--ink);
}
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.15rem,2vw,1.75rem); }
.vcard{
  background:rgba(248,240,227,.05);
  border:2px solid rgba(248,240,227,.2); border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.vcard:hover{ border-color:var(--mango); background:rgba(255,182,39,.07); transform:translateY(-4px); }
.vcard h3{
  font-family:var(--body); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mango);
  margin-bottom:1.1rem;
}
.vcard__big{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem);
  line-height:1.24; letter-spacing:-.025em; margin:0; color:var(--bone);
}
.vcard__big a{ text-decoration:none; }
.vcard__big a:hover{ color:var(--mango); }
.vcard__note{ margin:.85rem 0 0; font-size:.85rem; color:rgba(248,240,227,.55); }
.vlink{
  display:inline-block; margin-top:1.1rem; font-size:.88rem; font-weight:700;
  color:var(--mango); text-decoration:none; border-bottom:2px solid transparent;
  transition:border-color .2s; word-break:break-word;
}
.vlink:hover{ border-color:var(--mango); }

.review{
  margin-top:clamp(2rem,3.5vw,3rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
}
.review p{ margin:0; color:rgba(248,240,227,.65); font-size:1.02rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink-2); border-top:var(--bd) solid var(--magenta); padding-top:clamp(3.5rem,7vw,5.5rem); }
.foot__in{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2.5rem,5vw,5rem); padding-bottom:3.5rem; }
.foot__brand .brand{ margin-bottom:1.25rem; }
.foot__brand p{ margin:0; font-size:.92rem; color:rgba(248,240,227,.55); line-height:1.7; }
.brand--foot .brand__word{ font-size:2.2rem; }
.brand--foot .brand__palm{ width:1.7rem; height:2rem; }

.foot__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.foot__nav h4{
  font-family:var(--body); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mango);
  margin-bottom:1.1rem;
}
.foot__nav a{
  display:block; text-decoration:none; font-size:.92rem;
  color:rgba(248,240,227,.62); padding:.35rem 0; transition:color .2s, padding-left .2s;
}
.foot__nav a:hover{ color:var(--bone); padding-left:.35rem; }

.foot__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-block:1.75rem; border-top:1px solid rgba(248,240,227,.12);
}
.foot__bar p{ margin:0; font-size:.82rem; color:rgba(248,240,227,.42); }
.foot__tag{ color:var(--magenta) !important; font-weight:700; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__t,.hero__media img,.status__dot,.hero__scroll span{ animation:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .status__hrs{ display:none; }
  .cater2,.story,.water,.paletas{ grid-template-columns:1fr; }
  .story__fig,.cater2__fig{ max-width:460px; }
  .foot__in{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .vgrid{ grid-template-columns:1fr; }
  .hero__facts{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:700px){
  :root{ --bd:2.5px; --r:18px; }
  .brand__sub{ display:none; }
  .status{ display:none; }
  .paletas__list ul{ columns:1; }
  .hero{ min-height:auto; padding-top:7.5rem; }
  .hero__cta .btn{ width:100%; }
  .hero__scroll{ display:none; }
  .mcard:hover{ --lift:1; }
  .pkg,.paletas__list,.water__card,.story__fig img,.cater2__fig img,.water__fig img{ box-shadow-color:currentColor; }
  .pkg{ box-shadow:7px 7px 0 var(--violet); }
  .paletas__list{ box-shadow:7px 7px 0 var(--lime); }
  .water__card{ box-shadow:7px 7px 0 var(--azul); }
  .story__fig img,.cater2__fig img{ box-shadow:8px 8px 0 var(--magenta); }
  .water__fig img{ box-shadow:8px 8px 0 var(--ink); }
  .foot__nav{ grid-template-columns:1fr 1fr; }
  .foot__bar{ flex-direction:column; }
}

@media (max-width:420px){
  .hero__facts{ grid-template-columns:1fr 1fr; }
  .filters{ gap:.45rem; }
  .chip{ font-size:.8rem; padding:.55rem 1rem; }
}