/* =========================================================
   L'Inici Restaurant — styles
   Palette sampled from brand: teal · kraft · charcoal · red · gold
   ========================================================= */

:root{
  --ink:#14110f;          /* warm near-black */
  --ink-2:#1c1815;
  --charcoal:#211d19;
  --kraft:#efe3c9;        /* cream paper */
  --kraft-2:#e6d6b4;
  --teal:#25b3ba;         /* brand cyan-teal */
  --teal-deep:#0f6c72;
  --teal-ink:#0a3d41;
  --red:#c6382c;          /* bandana */
  --gold:#e0a62e;         /* fried gold / disc */
  --gold-soft:#f0c766;
  --cream:#f6ecd8;        /* text on dark */
  --cream-dim:#c9bda6;

  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);

  --f-display:'Anton',system-ui,sans-serif;
  --f-script:'Caveat',cursive;
  --f-body:'Manrope',system-ui,-apple-system,sans-serif;

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

/* grain overlay reused across dark sections */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.02}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--head{text-align:center;max-width:820px}

/* ---------- typography helpers ---------- */
.h-display{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:clamp(2rem,6vw,4.4rem);
  line-height:.98;
}
.eyebrow{
  font-family:var(--f-script);
  font-size:clamp(1.5rem,3.5vw,2.1rem);
  color:var(--teal);
  margin:0 0 .3em;
  transform:rotate(-2deg);
}
.eyebrow--gold{color:var(--gold)}
.lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  max-width:60ch;
  color:var(--cream);
}
.lead--dim{color:var(--cream-dim);margin-inline:auto}
.note{
  font-family:var(--f-script);
  font-size:1.5rem;
  text-align:center;
  color:var(--gold-soft);
  margin-top:3rem;
}

/* ---------- section frames ---------- */
section{position:relative}
.section--ink{background:var(--ink);color:var(--cream);padding:clamp(80px,12vh,150px) 0}
.section--ink::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.06;pointer-events:none;mix-blend-mode:overlay}
.section--kraft{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.5), transparent 60%),
    var(--kraft);
  color:#2a231b;
  padding:clamp(80px,12vh,150px) 0;
}
.section--kraft::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.section--kraft .eyebrow{color:var(--teal-deep)}
.section--kraft .lead{color:#4a3f31}
.section--teal{
  background:linear-gradient(160deg,var(--teal-deep),var(--teal-ink));
  color:var(--cream);
  padding:clamp(80px,12vh,150px) 0;
}
.section--teal::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.08;mix-blend-mode:overlay;pointer-events:none}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--teal);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:800;font-size:.95rem;
  letter-spacing:.02em;text-transform:uppercase;
  padding:.85em 1.6em;border-radius:999px;white-space:nowrap;
  border:2px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;
  will-change:transform;
}
.btn--primary{background:var(--teal);color:#06282b;box-shadow:0 10px 30px -12px var(--teal)}
.btn--primary:hover{transform:translateY(-3px) rotate(-1deg);background:var(--gold);color:#3a2a08;box-shadow:0 16px 34px -14px var(--gold)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:.6em 1.1em;font-size:.78rem;background:var(--gold);color:#3a2a08}
.btn--sm:hover{transform:translateY(-2px);background:var(--teal);color:#06282b}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem clamp(16px,4vw,40px);
  background:linear-gradient(to bottom,rgba(15,12,10,.85),transparent);
  transition:background .3s,box-shadow .3s,padding .3s;
}
.nav.is-stuck{background:rgba(15,12,10,.94);backdrop-filter:blur(10px);box-shadow:0 6px 24px -12px #000}
.nav__brand{display:flex;align-items:center;gap:.55rem}
.nav__mark{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.nav__word{font-family:var(--f-display);text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em;color:var(--cream)}
.nav__links{display:flex;gap:1.6rem}
.nav__links a{font-weight:600;font-size:.95rem;color:var(--cream);opacity:.85;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--gold);transition:width .3s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.lang{display:flex;align-items:center;gap:.35rem}
.lang__btn{background:none;border:none;color:var(--cream);opacity:.55;font-family:var(--f-body);font-weight:700;font-size:.85rem;cursor:pointer;letter-spacing:.05em}
.lang__btn.is-active{opacity:1;color:var(--teal)}
.lang__sep{opacity:.4}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(90px,14vh,140px) var(--pad) 8vh;
  background:
    radial-gradient(90% 60% at 78% 40%, rgba(37,179,186,.14), transparent 55%),
    radial-gradient(60% 50% at 12% 80%, rgba(198,56,44,.12), transparent 60%),
    var(--ink);
  overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.hero__glow{position:absolute;right:-8%;top:50%;width:min(60vw,620px);aspect-ratio:1;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(224,166,46,.22),transparent 62%);filter:blur(20px);pointer-events:none}
.hero__inner{position:relative;z-index:2;max-width:640px}
.hero__kicker{font-family:var(--f-script);font-size:clamp(1.4rem,3vw,2rem);color:var(--teal);transform:rotate(-2deg);margin:0 0 .2em}
.hero__title{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(4.5rem,17vw,12rem);line-height:.82;letter-spacing:-.01em;
  color:var(--cream);
  text-shadow:0 14px 40px rgba(0,0,0,.55);
}
.hero__title .apos{color:var(--red)}
.hero__tagline{font-family:var(--f-display);text-transform:uppercase;color:var(--gold);font-size:clamp(1rem,2.4vw,1.7rem);letter-spacing:.06em;margin:.5rem 0 0}
.hero__sub{color:var(--cream-dim);font-size:clamp(1rem,1.5vw,1.2rem);max-width:44ch;margin:1.4rem 0 2rem}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero__mascot{
  position:absolute;z-index:1;right:clamp(-60px,-4vw,0px);bottom:-2%;
  width:min(58vw,720px);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  pointer-events:none;
}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--f-script);font-size:1.2rem;color:var(--cream-dim)}
.hero__scroll-line{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:scrolldrop 1.8s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   MANIFESTO
   ========================================================= */
.codigo{text-align:center}
.codigo__title{max-width:16ch;margin:.2em auto .5em;color:#241d15}
.codigo .lead{margin:0 auto;color:#4a3f31}
.values{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:2.6rem 0 0;padding:0}
.values li{
  border:2px solid rgba(15,108,114,.4);border-radius:999px;
  padding:.5rem 1.4rem;background:rgba(255,255,255,.35);
}
.values__k{font-family:var(--f-display);text-transform:uppercase;color:var(--teal-deep);letter-spacing:.05em;font-size:1.05rem}

/* =========================================================
   EL BOTÍN — marquee + plates
   ========================================================= */
.botin__title{margin:.1em 0 .4em}
.marquee{margin:clamp(40px,7vh,80px) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  border-top:1px solid rgba(224,166,46,.25);border-bottom:1px solid rgba(224,166,46,.25);
  padding:.6rem 0;
}
.marquee__row{display:flex;gap:1.4rem;white-space:nowrap;width:max-content;
  font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,3rem);color:var(--cream)}
.marquee__row span{opacity:.92}
.marquee__row .dot{color:var(--gold)}
.marquee__row--1{animation:marq 38s linear infinite}
.marquee__row--2{animation:marq 46s linear infinite reverse;color:var(--gold-soft)}
.marquee__row--2 span{opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}

.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.plate{margin:0;border-radius:16px;overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 50px -30px #000;transition:transform .4s var(--ease),box-shadow .4s}
.plate:hover{transform:translateY(-6px);box-shadow:0 34px 60px -28px #000}
.plate--tall{grid-row:span 2}
.plate__img{aspect-ratio:4/3;position:relative;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(224,166,46,.16), transparent 55%),
    repeating-linear-gradient(135deg,#26211c 0 12px,#221d18 12px 24px);
}
.plate--tall .plate__img{aspect-ratio:3/4.6}
.plate__img::after{content:"✦ L'Inici";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-script);font-size:1.6rem;color:rgba(224,166,46,.35)}
.plate figcaption{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1.1rem}
.plate__name{font-family:var(--f-display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em}
.plate__tag{font-family:var(--f-script);font-size:1.15rem;color:var(--teal)}

/* =========================================================
   AMBIENTE
   ========================================================= */
.ambiente__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.ambiente__stamp{display:inline-block;margin-top:1.6rem;font-family:var(--f-display);text-transform:uppercase;
  letter-spacing:.08em;color:var(--gold-soft);border:2px dashed rgba(240,199,102,.5);
  padding:.5rem 1.2rem;border-radius:8px;transform:rotate(-1.5deg)}
.ambiente__media{position:relative}
.ambiente__frame{aspect-ratio:4/5;border-radius:18px;
  background:
    radial-gradient(80% 70% at 70% 20%, rgba(37,179,186,.28), transparent 60%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.22) 0 14px,rgba(0,0,0,.12) 14px 28px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px #000}
.ambiente__frame::after{content:"♪";position:absolute;inset:0;display:grid;place-items:center;font-size:5rem;color:rgba(246,236,216,.28)}
.ambiente__badge{position:absolute;right:-14px;bottom:-14px;background:var(--red);color:#fff;
  font-family:var(--f-display);text-transform:uppercase;padding:.6rem 1.1rem;border-radius:10px;
  transform:rotate(-4deg);box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}

/* =========================================================
   MERCH
   ========================================================= */
.products{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(30px,5vh,60px)}
.product{background:linear-gradient(180deg,var(--ink-2),var(--ink));border-radius:20px;
  border:1px solid rgba(255,255,255,.07);overflow:hidden;box-shadow:0 30px 60px -34px #000}
.product__stage{position:relative;aspect-ratio:1;background:radial-gradient(70% 70% at 50% 40%,rgba(37,179,186,.12),transparent 65%)}
.product__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6% ;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.product__img--back{opacity:0;transform:scale(1.04)}
.product:hover .product__img--front,.product:focus-within .product__img--front{opacity:0;transform:scale(.98)}
.product:hover .product__img--back,.product:focus-within .product__img--back{opacity:1;transform:scale(1)}
.product__info{padding:1.4rem 1.6rem 1.7rem}
.product__name{font-family:var(--f-display);text-transform:uppercase;font-size:1.5rem}
.product__slogan{font-family:var(--f-script);font-size:1.4rem;color:var(--teal);margin:.2rem 0 1rem}
.product__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.product__price{font-family:var(--f-display);font-size:2rem;color:var(--gold)}

/* =========================================================
   VISITA
   ========================================================= */
.visita__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.visita__title,.visita .h-display{color:#241d15}
.info-block{margin-top:2rem}
.info-block__h{font-family:var(--f-display);text-transform:uppercase;color:var(--teal-deep);font-size:1.15rem;letter-spacing:.05em;margin-bottom:.5rem}
.info-block p{margin:.2rem 0;color:#3d342a}
.link-arrow{display:inline-block;margin-top:.6rem;font-weight:800;color:var(--red);text-transform:uppercase;font-size:.9rem;letter-spacing:.03em}
.link-arrow:hover{color:var(--teal-deep)}
.hours{width:100%;border-collapse:collapse;margin:.3rem 0 .6rem}
.hours td{padding:.45rem 0;border-bottom:1px dashed rgba(42,35,27,.25);color:#3d342a;font-weight:500}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.hours__closed{color:var(--red)!important}
.hours__note{font-size:.9rem;color:#6a5c48!important;font-style:italic}
.contacts{display:flex;flex-direction:column;gap:.5rem}
.contacts a{font-weight:600;color:#2f2820;width:fit-content;transition:color .2s}
.contacts a:hover{color:var(--teal-deep)}
.visita__map{border-radius:18px;overflow:hidden;min-height:340px;box-shadow:0 30px 60px -34px rgba(0,0,0,.5);border:3px solid rgba(15,108,114,.35)}
.visita__map iframe{width:100%;height:100%;min-height:340px;border:0;filter:saturate(.9)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink);padding:clamp(50px,8vh,90px) 0 40px;text-align:center;position:relative}
.footer::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.05;pointer-events:none}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.footer__mark{width:80px}
.footer__tag{font-family:var(--f-display);text-transform:uppercase;color:var(--gold);letter-spacing:.06em}
.footer__socials{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.footer__socials a{font-weight:700;color:var(--cream);opacity:.8}
.footer__socials a:hover{opacity:1;color:var(--teal)}
.footer__legal{color:var(--cream-dim);font-size:.85rem;opacity:.6}

/* =========================================================
   REVEAL animation (JS toggles .is-in)
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .nav__links{display:none}
  .ambiente__grid,.visita__grid,.products{grid-template-columns:1fr}
  /* hero: text/buttons up top, mascot a faint backdrop at the bottom so it
     never sits over the CTAs */
  .hero{min-height:100svh}
  .hero__content{align-items:flex-start;padding-top:clamp(84px,13vh,116px)}
  .hero__stage{opacity:.42}
  .hero__mascot{width:min(74vw,400px);right:-4%;bottom:0}
  .hero__cta .btn--ghost{background:rgba(16,13,11,.55);backdrop-filter:blur(2px)}
  .plates{grid-template-columns:repeat(2,1fr)}
  .plate--tall{grid-row:span 1}
  .plate--tall .plate__img{aspect-ratio:4/3}
}
@media (max-width:560px){
  .plates{grid-template-columns:1fr}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1}
  .lang{margin-left:auto}
}

/* =========================================================
   EPIC-DESIGN · 2.5D DEPTH SYSTEM
   depth 0 far → depth 5 foreground
   ========================================================= */
.scene{position:relative}
.layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.depth-0{z-index:0}
.depth-1{z-index:1}
.depth-2{z-index:2}
.depth-3{z-index:3}
.depth-4{z-index:4;pointer-events:none}
.depth-4 a,.depth-4 button,.depth-4 .hero__inner{pointer-events:auto}
.depth-5{z-index:5}

/* section decoration wrapper (non-hero) */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.section--ink .wrap,.section--kraft .wrap,.section--teal .wrap{position:relative;z-index:2}
.section--ink::before,.section--kraft::before,.section--teal::before{z-index:1}

/* ---- atmospheric glow blobs (depth-1) ---- */
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.55;will-change:transform}
.glow--teal{width:46vw;height:46vw;max-width:640px;max-height:640px;right:2%;top:12%;
  background:radial-gradient(circle,rgba(37,179,186,.55),transparent 68%)}
.glow--gold{width:38vw;height:38vw;max-width:520px;max-height:520px;left:8%;bottom:-6%;
  background:radial-gradient(circle,rgba(224,166,46,.42),transparent 66%)}
.glow--red{width:30vw;height:30vw;max-width:420px;max-height:420px;left:38%;top:44%;
  background:radial-gradient(circle,rgba(198,56,44,.30),transparent 68%)}
.glow--soft{opacity:.3;filter:blur(90px)}
.section--ink .glow--gold{left:auto;right:-6%;top:6%;bottom:auto}
.section--ink .glow--teal{left:-8%;right:auto;top:30%}

/* ---- floating gold coins (depth-2) ---- */
.coin{position:absolute;width:clamp(24px,3vw,52px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,var(--gold-soft),var(--gold) 52%,#9c6a17 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,255,255,.14),inset 0 -6px 10px rgba(0,0,0,.25);
  opacity:.9;will-change:transform}
.coin::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:rgba(60,40,8,.5);font-size:.7em}
.coin--1{right:16%;top:24%}
.coin--2{right:40%;top:66%;width:clamp(18px,2.2vw,38px)}
.coin--3{right:8%;top:70%;width:clamp(28px,3.6vw,64px)}

/* ---- sparks (depth-2 / depth-5) ---- */
.spark{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold-soft);
  box-shadow:0 0 14px 4px rgba(240,199,102,.7);opacity:.85;will-change:transform;animation:twinkle 3.4s ease-in-out infinite}
.spark--1{right:28%;top:40%}
.spark--2{right:54%;top:30%;animation-delay:1.3s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}}

/* ---- hero bg + mascot stage ---- */
.hero__bg{background:
  radial-gradient(70% 50% at 78% 38%, rgba(37,179,186,.10), transparent 60%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px);
  transform:scale(1.06)}
.hero__stage{pointer-events:none}
.hero__content{display:flex;align-items:center;padding:clamp(96px,14vh,150px) var(--pad) 9vh}
.hero__content .hero__inner{margin:0}

/* ---- particles (depth-5) ---- */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;bottom:-14px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),rgba(240,199,102,0) 70%);
  opacity:0;will-change:transform,opacity;animation:rise linear infinite}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}
  12%{opacity:.85}
  85%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--drift,20px),-92vh,0) scale(1)}
}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(0,0,0,.5) 100%)}

/* ---- section deco pieces ---- */
.deco__mascot{position:absolute;width:min(42vw,440px);aspect-ratio:1;left:-8%;top:14%;
  background:url("assets/img/mascot.png") center/contain no-repeat;opacity:.055;will-change:transform}
.deco__mascot--right{left:auto;right:-8%;top:auto;bottom:6%}
.deco__coin{position:absolute;right:10%;top:16%;width:clamp(40px,6vw,90px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(224,166,46,.5),rgba(156,106,23,.4) 60%,transparent 72%);opacity:.5}
.deco__ring{position:absolute;left:6%;bottom:8%;width:min(30vw,320px);aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(15,108,114,.18)}

/* ---- float loop is driven by GSAP; keep CSS still for reduced-motion ---- */

/* =========================================================
   CINEMATIC TEXT — hero intro (CSS-driven, compositor-safe) +
   masked title + word lighting
   Base state = final/visible, so content shows even if JS is
   throttled or reduced-motion is on. Keyframes animate FROM hidden.
   ========================================================= */
@keyframes introUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes titleUp{from{transform:translateY(108%)}to{transform:translateY(0)}}
@keyframes mascotIn{from{opacity:0;transform:translateY(-54px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

.hero__kicker{animation:introUp .85s var(--ease) both .15s}
.hero__title{overflow:hidden}
.hero__title-in{display:inline-block;animation:titleUp 1s cubic-bezier(.16,1,.3,1) both .3s}
.hero__tagline{animation:introUp .85s var(--ease) both .48s}
.hero__sub{animation:introUp .85s var(--ease) both .62s}
.hero__cta{animation:introUp .85s var(--ease) both .74s}
.hero__mascot[data-hero-mascot]{will-change:transform,opacity;animation:mascotIn 1.15s cubic-bezier(.16,1,.3,1) both .1s}

/* word-by-word lighting */
.lightup-word{display:inline-block;color:rgba(246,236,216,.22);transition:color .1s linear,text-shadow .1s linear}
.lightup-word.is-lit{color:var(--cream);text-shadow:0 0 22px rgba(37,179,186,.45)}

/* If GSAP is absent, don't leave content hidden */
.no-gsap [data-intro],.no-gsap .hero__title-in{opacity:1!important;transform:none!important}
.no-gsap .lightup-word{color:var(--cream)!important}

/* =========================================================
   MERGE ADDITIONS — real food feature, editorial carta, collage
   ========================================================= */
:root{--magenta:#a4276f;--magenta-2:#7c1c53}

/* real-photo dish card (uses my card style, drops in a real image) */
.plate__img--photo{background:none}
.plate__img--photo::after{content:none}
.plate__img--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.plate:hover .plate__img--photo img{transform:scale(1.06)}

/* El Botín: real food photo + editorial menu */
.botin__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:center;margin-top:clamp(30px,5vh,56px)}
.food-feature{margin:0;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 34px 70px -34px #000}
.food-feature img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block;transition:transform .8s var(--ease)}
.food-feature:hover img{transform:scale(1.05)}
.food-feature::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,7,.6),transparent 46%)}
.food-feature figcaption{position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--f-script);font-size:1.35rem;color:var(--cream);
  background:rgba(10,8,7,.35);backdrop-filter:blur(4px);padding:.1em .7em;border-radius:8px}
.carta{list-style:none;margin:0;padding:0}
.carta__item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.1);transition:transform .35s var(--ease)}
.carta__item:hover{transform:translateX(8px)}
.carta__num{font-family:var(--f-display);color:var(--teal);font-size:1rem;letter-spacing:.05em}
.carta__name{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.2rem,2.2vw,1.7rem);transition:color .3s}
.carta__item:hover .carta__name{color:var(--gold)}
.carta__desc{color:var(--cream-dim);margin:.25rem 0 0;font-size:.98rem}
.botin__foot{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:clamp(24px,4vh,42px)}
.link-arrow--gold{color:var(--gold)}
.link-arrow--gold:hover{color:var(--cream)}

/* Ambiente: tilted photo collage + magenta quote card */
.ambiente__media{position:relative;min-height:clamp(380px,46vw,520px)}
.collage__layer{position:absolute;will-change:transform}
.collage__layer--photo{left:0;top:2%;width:76%;z-index:1}
.collage__layer--quote{right:0;bottom:2%;width:58%;z-index:2}
.collage__photo{margin:0;border-radius:6px;overflow:hidden;
  transform:rotate(-4deg);border:8px solid #f5ead6;box-shadow:0 30px 60px -26px rgba(0,0,0,.7)}
.collage__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.collage__quote{background:linear-gradient(150deg,var(--magenta),var(--magenta-2));color:var(--cream);
  border-radius:12px;padding:1.4rem 1.4rem 1.6rem;transform:rotate(3deg);box-shadow:0 24px 46px -22px rgba(0,0,0,.65)}
.collage__mark{font-family:var(--f-display);font-size:2.6rem;line-height:.5;color:var(--gold-soft);display:block}
.collage__quote p{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.3rem,2.8vw,2rem);line-height:1;margin:.35rem 0 0}
.ambiente__media .ambiente__badge{top:-3%;right:3%;bottom:auto;left:auto;z-index:3}

@media (max-width:900px){
  .botin__grid{grid-template-columns:1fr}
  .food-feature img{aspect-ratio:16/10}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal],[data-intro],.hero__title-in{opacity:1!important;transform:none!important}
  .hero__scroll-line,.particles,.spark{display:none}
  .lightup-word{color:var(--cream)!important}
  .glow{opacity:.4}
}