/* Entre focs · esborrany web · colors i lletres de la marca */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url(fonts/bigshoulders.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--brasa:#C4432A;--safra:#EBA035;--carbo:#1E1916;--crema:#F4EBDC;--paper:#FAF5EC;--ink:#2b2420;--muted:#6f625a;
--serif:"Fraunces",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;--lab:"Big Shoulders","Arial Narrow",sans-serif;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.65 var(--sans);color:var(--ink);background:var(--crema)}
img{display:block;max-width:100%;height:auto}picture{display:contents}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--safra);color:var(--carbo);padding:.6em 1em;border-radius:8px}
:focus-visible{outline:3px solid var(--safra);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto}
/* type */
.label{font:800 .95rem/1 var(--lab);letter-spacing:.16em;text-transform:uppercase;color:var(--brasa);margin:0 0 1.1rem}
.label--saffron{color:var(--safra)}.label--cream{color:var(--crema)}
.h1,.h2,.h3{font-family:var(--serif);font-weight:560;letter-spacing:-.02em;margin:0;line-height:1.02}
.h1 em,.h2 em,.h3 em{font-style:italic;font-weight:430;color:var(--brasa)}
.h1{font-size:clamp(3rem,8.4vw,6.6rem);color:var(--crema)}.h1 em{color:var(--safra)}
.h2{font-size:clamp(2.4rem,5.4vw,4.4rem);margin-bottom:1.6rem}
.h3{font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.1}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;max-width:34ch}
.note{font-size:.95rem;color:var(--muted);border-top:1px solid rgba(30,25,22,.14);padding-top:1rem;margin-top:1.6rem}
.note--light{color:rgba(244,235,220,.7);border-color:rgba(244,235,220,.18)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:800 1.05rem/1 var(--lab);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
background:var(--brasa);color:var(--crema);padding:1.05em 1.6em;border-radius:999px;transition:transform .25s,background .25s,box-shadow .25s;box-shadow:0 10px 30px -12px rgba(196,67,42,.7)}
.btn:hover{transform:translateY(-2px);background:#d14f35}
.btn--sm{padding:.75em 1.2em;font-size:.9rem;box-shadow:none}
.btn--wa{background:var(--safra);color:var(--carbo);box-shadow:0 10px 30px -12px rgba(235,160,53,.7)}.btn--wa:hover{background:#f2ad48}
.btn--ghost{background:transparent;color:var(--crema);border:1.5px solid rgba(244,235,220,.35);box-shadow:none;text-transform:none;letter-spacing:.02em;font:600 1rem/1 var(--sans)}
.btn--ghost:hover{border-color:var(--safra);background:rgba(235,160,53,.08)}
.link-arrow{font:800 1rem/1 var(--lab);letter-spacing:.14em;text-transform:uppercase;color:var(--crema);text-decoration:none}
.link-arrow span{display:inline-block;transition:transform .25s}.link-arrow:hover span{transform:translateX(5px)}
/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(20px,4vw,56px);transition:background .3s,padding .3s}
.top--solid{background:rgba(30,25,22,.92);backdrop-filter:blur(10px);padding-top:10px;padding-bottom:10px}
.top__logo{transition:opacity .3s}.top:not(.top--solid) .top__logo{opacity:0;pointer-events:none}
.top__logo img{height:44px;width:auto}
.top__nav{display:flex;align-items:center;gap:1.8rem}
.top__nav a:not(.btn){font:800 .95rem/1 var(--lab);letter-spacing:.14em;text-transform:uppercase;color:var(--crema);text-decoration:none;opacity:.85}
.top__nav a:not(.btn):hover{opacity:1;color:var(--safra)}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--carbo);color:var(--crema);overflow:hidden}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:kb 18s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,25,22,.9) 0%,rgba(30,25,22,.55) 45%,rgba(30,25,22,.05) 75%),linear-gradient(0deg,rgba(30,25,22,.75),transparent 40%),linear-gradient(180deg,rgba(30,25,22,.55),transparent 18%)}
.hero__inner{position:relative;z-index:2;padding:0 clamp(20px,6vw,96px) clamp(56px,10vh,110px);max-width:820px}
.hero__logo{width:clamp(130px,13vw,190px);margin-bottom:2rem;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.hero .lead{color:rgba(244,235,220,.9);margin:1.4rem 0 2.2rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem}
.hero__zone{position:absolute;z-index:2;right:clamp(20px,4vw,56px);bottom:clamp(24px,5vh,48px);color:rgba(244,235,220,.75);margin:0;font-size:.85rem}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.words span{display:inline-block;animation:w .7s cubic-bezier(.2,.7,.2,1) both}
.words>span:nth-child(1){animation-delay:.15s}.words>span:nth-child(2){animation-delay:.27s}.words em span:nth-child(1){animation-delay:.39s}.words em span:nth-child(2){animation-delay:.51s}
@keyframes w{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
/* sections */
.sec{padding:clamp(72px,11vw,150px) clamp(20px,6vw,96px)}
.sec--cream{background:var(--crema)}.sec--paper{background:var(--paper)}
.sec--dark{background:var(--carbo);color:var(--crema)}.sec--dark .h2 em,.sec--dark .h3 em{color:var(--safra)}
.sec--brasa{background:var(--brasa);color:var(--crema)}.sec--brasa .h2 em{color:var(--carbo)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;max-width:1280px;margin:0 auto}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:0 40px 80px -40px rgba(30,25,22,.55)}
.split__text p{max-width:44ch}
.intro{max-width:46ch;font-size:1.15rem;margin:-.4rem 0 2.6rem}
/* steps */
.steps{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(244,235,220,.14);border-radius:var(--r);overflow:hidden}
.step{background:var(--carbo);padding:2.2rem 1.8rem 2.4rem}
.step__n{display:block;font:800 3.2rem/1 var(--lab);color:var(--brasa);margin-bottom:1.8rem}
.step p{color:rgba(244,235,220,.75);margin:.9rem 0 0}
/* dishes */
.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dish{background:var(--paper);border:1.5px dashed rgba(196,67,42,.45);border-radius:var(--r);padding:2rem 1.8rem 2.2rem;position:relative}
.dish__n{font:800 1rem/1 var(--lab);letter-spacing:.14em;color:var(--safra);display:block;margin-bottom:1.4rem}
.dish p{color:var(--muted);margin:.8rem 0 0}
.fine{font-size:.9rem;color:var(--muted);margin-top:2rem}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,20vw,280px);gap:14px;grid-auto-flow:dense;margin-top:3rem}
.g{margin:0;overflow:hidden;border-radius:14px;background:#ddd}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.g:hover img{transform:scale(1.04)}
.g--wide{grid-column:span 2;grid-row:span 2}.g--tall{grid-row:span 2}.g--span2{grid-column:span 2}
/* occasions */
.occasions{list-style:none;padding:0;margin:2.4rem 0 0;display:flex;flex-wrap:wrap;gap:12px}
.occasions li{font:500 clamp(1.3rem,2.4vw,1.9rem)/1 var(--serif);font-style:italic;padding:.7em 1.1em;border:1.5px solid rgba(244,235,220,.45);border-radius:999px}
/* contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center}
.contact__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.contact .lead{color:rgba(244,235,220,.85);margin:0 0 2rem}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px}
/* footer */
.foot{background:var(--carbo);color:rgba(244,235,220,.6);text-align:center;padding:48px 20px 56px;border-top:1px solid rgba(244,235,220,.1);font-size:.9rem}
.foot img{margin:0 auto 1rem;width:56px}.foot p{margin:.3rem 0}.foot a{color:var(--crema)}
/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* mobile */
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr}.dishes{grid-template-columns:1fr}}
@media (max-width:760px){
  .top__nav a:not(.btn){display:none}.top__logo img{height:38px}
  .hero{align-items:flex-end}
  .hero::after{background:linear-gradient(0deg,rgba(30,25,22,.95) 0%,rgba(30,25,22,.6) 50%,rgba(30,25,22,.15) 100%)}
  .hero__logo{width:110px;margin-bottom:1.4rem}
  .hero__inner{padding-bottom:84px}
  .hero__zone{left:20px;right:auto;bottom:28px}
  .split,.contact{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:160px;gap:10px}
  .g--wide{grid-column:span 2;grid-row:span 2}.g--span2{grid-column:span 1}
  .contact__btns .btn{width:100%;justify-content:center}
}