@import url("/assets/fonts/fonts.css");

/* ══════════════════════════════════════════════════════════════
   GRUP MACAO — sistema de disseny
   Base comuna del grup + variació cromàtica per marca.
   Tot el que canvia entre marques són els tokens --b-*.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Reset ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg,video{max-width:100%;display:block}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
table{border-collapse:collapse;width:100%}

/* ── 2. Tokens del grup (neutres compartits) ─────────────── */
:root{
  --ink-900:#12100E; --ink-700:#3A3532; --ink-500:#6B6460;
  --ink-300:#A8A19B; --ink-100:#DDD7CF; --paper:#F7F4EF; --white:#fff;

  --b-ink:#12100E; --b-surface:#F7F4EF; --b-accent:#A98548;
  --b-accent2:#3A3532; --b-tint:#EFE9DE; --b-on-accent:#12100E;
  --b-on-ink:#F7F4EF; --b-muted:#6B6460; --b-muted-i:#A8A19B;
  --b-accent-txt:#7A5E2E; --b-accent-lt:#C9A468;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:96px; --s-8:128px; --s-9:192px;

  --step--2:clamp(.78rem,.76rem+.08vw,.83rem);
  --step--1:clamp(.89rem,.86rem+.13vw,.96rem);
  --step-0 :clamp(1.06rem,1.02rem+.20vw,1.19rem);
  --step-1 :clamp(1.33rem,1.24rem+.42vw,1.58rem);
  --step-2 :clamp(1.66rem,1.50rem+.79vw,2.11rem);
  --step-3 :clamp(2.07rem,1.80rem+1.36vw,2.81rem);
  --step-4 :clamp(2.59rem,2.13rem+2.25vw,3.75rem);
  --step-5 :clamp(3.24rem,2.51rem+3.62vw,5.00rem);
  --step-6 :clamp(3.80rem,2.60rem+6.00vw,7.50rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.52s;
  --header-h:64px;
  --radius:3px;
  --line:1px solid color-mix(in srgb, currentColor 16%, transparent);
}
@media (min-width:768px){:root{--header-h:76px}}

/* ── 3. Base ─────────────────────────────────────────────── */
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:var(--step-0); line-height:1.65;
  background:var(--b-surface); color:var(--b-ink);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}
body.is-dark{background:var(--b-ink);color:var(--b-on-ink)}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif; line-height:1.05;
  letter-spacing:-.015em; font-weight:400; text-wrap:balance;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);line-height:1.2}
h4{font-size:var(--step-0);font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0}
p{max-width:68ch}
strong{font-weight:600}

:focus-visible{outline:2px solid var(--b-accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--b-accent);color:var(--b-on-accent)}

/* ── 4. Contenidor (regla d'or: mai percentatges) ────────── */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.wrap{padding-inline:24px}}
@media (min-width:1200px){.wrap{padding-inline:40px}}
.wrap-n{max-width:760px}
.wrap-w{max-width:1480px}

.sec{padding-block:var(--s-7)}
@media (min-width:768px){.sec{padding-block:160px}}
.sec-s{padding-block:var(--s-6)}
@media (min-width:768px){.sec-s{padding-block:var(--s-7)}}

.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--b-accent-txt);margin-bottom:var(--s-3);
  display:block;font-family:'Inter',sans-serif;
}
.lead{font-size:var(--step-1);line-height:1.45;font-weight:300;max-width:34ch}
.sm{font-size:var(--step--1);line-height:1.6}
.mut{color:var(--b-muted)}
.tab{font-variant-numeric:tabular-nums}

/* ── 5. Variació per marca ───────────────────────────────── */
[data-brand="macao"]{--b-ink:#0C1416;--b-surface:#111D20;--b-accent:#A3372B;--b-accent2:#7E9A8C;--b-tint:#18272A;--b-on-accent:#F7F4EF;--b-on-ink:#EEEAE3;--b-muted:#9DAAA8;--b-muted-i:#9DAAA8;--b-accent-txt:#D9705E;--b-accent-lt:#D9705E}
[data-brand="rita-coko"]{--b-ink:#241318;--b-surface:#FBF6F1;--b-accent:#7B2338;--b-accent2:#E2664B;--b-tint:#F4E6E2;--b-on-accent:#FBF6F1;--b-on-ink:#FBF6F1;--b-muted:#6E4A50;--b-muted-i:#C9AFB2;--b-accent-txt:#7B2338;--b-accent-lt:#F0907A}
[data-brand="amoca"]{--b-ink:#2A211A;--b-surface:#F6F0E4;--b-accent:#9C4A2B;--b-accent2:#4F5D3A;--b-tint:#EDE3D0;--b-on-accent:#F6F0E4;--b-on-ink:#F6F0E4;--b-muted:#6B5B49;--b-muted-i:#CBBBA4;--b-accent-txt:#8A3F23;--b-accent-lt:#E0A06B}
[data-brand="xiribiri"]{--b-ink:#23211E;--b-surface:#FAF8F4;--b-accent:#5F7355;--b-accent2:#B07C3F;--b-tint:#EFEDE6;--b-on-accent:#FAF8F4;--b-on-ink:#FAF8F4;--b-muted:#5E5A53;--b-muted-i:#B9B5AC;--b-accent-txt:#4C5D44;--b-accent-lt:#9DB48F}
[data-brand="rita-burger"]{--b-ink:#0F0F0E;--b-surface:#161513;--b-accent:#F04E23;--b-accent2:#FFC72C;--b-tint:#221F1B;--b-on-accent:#0F0F0E;--b-on-ink:#F2EFE9;--b-muted:#A39D93;--b-muted-i:#A39D93;--b-accent-txt:#F04E23;--b-accent-lt:#F04E23}
[data-brand="mos-a-mos"]{--b-ink:#1B2733;--b-surface:#F5F3EF;--b-accent:#B08D4F;--b-accent2:#3E5A6E;--b-tint:#E6E9EA;--b-on-accent:#1B2733;--b-on-ink:#EDEFF1;--b-muted:#5A6672;--b-muted-i:#A8B4BE;--b-accent-txt:#7E6231;--b-accent-lt:#D3B078}

/* Context fosc: el gris i l'accent de text canvien a la seva variant clara.
   Així el mateix component passa AA sobre clar i sobre fosc sense duplicar CSS. */
.hero,.crida,.bg-ink,.peu,.mnav,.hdr,body.is-dark{--b-muted:var(--b-muted-i);--b-accent-txt:var(--b-accent-lt)}
body.is-dark .bg-tint{--b-muted:var(--b-muted-i)}

/* Accent tipogràfic per marca */
[data-brand="macao"] h1,[data-brand="macao"] h2,[data-brand="macao"] h3{font-weight:250;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;letter-spacing:-.02em}
[data-brand="amoca"] h1,[data-brand="amoca"] h2,[data-brand="amoca"] h3{font-weight:600;font-variation-settings:'opsz' 72,'SOFT' 0,'WONK' 1;letter-spacing:-.01em}
[data-brand="rita-coko"] h1,[data-brand="rita-coko"] h2,[data-brand="rita-coko"] h3{font-weight:700;font-variation-settings:'opsz' 24,'SOFT' 100,'WONK' 0;letter-spacing:-.02em}
[data-brand="xiribiri"] h1,[data-brand="xiribiri"] h2,[data-brand="xiribiri"] h3{font-weight:400;font-variation-settings:'opsz' 48,'SOFT' 30,'WONK' 0;letter-spacing:-.005em}
[data-brand="mos-a-mos"] h1,[data-brand="mos-a-mos"] h2,[data-brand="mos-a-mos"] h3{font-weight:500;font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0}
[data-brand="rita-burger"] h1,[data-brand="rita-burger"] h2,[data-brand="rita-burger"] .hero-name{
  font-family:'Archivo',Impact,sans-serif;font-weight:800;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.92;
}

/* ── 6. Capçalera ────────────────────────────────────────── */
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--b-accent);color:var(--b-on-accent);padding:12px 18px;border-radius:var(--radius);font-weight:600;font-size:14px;transition:top .18s}
.skip:focus{top:8px}

.hdr{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  color:var(--b-on-ink);
  transition:background-color .32s var(--ease),color .32s var(--ease),box-shadow .32s var(--ease);
}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);pointer-events:none;transition:opacity .32s}
.hdr.solid{background:var(--b-ink);color:var(--b-on-ink);box-shadow:0 1px 0 color-mix(in srgb,var(--b-on-ink) 14%,transparent)}
.hdr.solid::before{opacity:0}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);position:relative;z-index:1}

.brandmark{font-family:'Fraunces',serif;font-weight:400;font-variation-settings:'opsz' 144;font-size:19px;letter-spacing:.01em;text-decoration:none;line-height:1;display:flex;align-items:center;gap:9px;padding:10px 0;min-height:44px}
.brandmark b{font-weight:400}
.brandmark i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.62;font-family:'Inter',sans-serif;font-weight:600}
@media (max-width:479px){.brandmark i{display:none}}

.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:var(--s-1)}
  .nav a{text-decoration:none;font-size:14px;font-weight:500;padding:11px 13px;border-radius:var(--radius);position:relative;transition:opacity .2s}
  .nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
  .nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
}
.hdr-act{display:flex;align-items:center;gap:var(--s-1)}
.lang{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;opacity:.78}
.lang:hover{opacity:1}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .28s var(--ease)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* Menú mòbil */
.mnav{
  position:fixed;inset:0;z-index:99;background:var(--b-ink);color:var(--b-on-ink);
  padding:calc(var(--header-h) + 24px) 0 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.mnav.open{opacity:1;visibility:visible;transform:none}
@media (min-width:1024px){.mnav{display:none}}
.mnav-grp{border-top:1px solid color-mix(in srgb,var(--b-on-ink) 16%,transparent);padding:18px 0}
.mnav-grp:first-child{border-top:0}
.mnav a{text-decoration:none;display:block}
.mnav-marca{font-family:'Fraunces',serif;font-size:var(--step-2);line-height:1.15;padding:6px 0;font-weight:400}
.mnav-rol{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--b-accent-lt);font-weight:600;margin-bottom:4px}
.mnav-ciutats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mnav-ciutats a{font-size:14px;padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--b-on-ink) 24%,transparent);border-radius:100px}
.mnav-links{display:flex;flex-direction:column;gap:2px}
.mnav-links a{font-size:16px;padding:12px 0;min-height:44px;display:flex;align-items:center}

/* ── 7. Botons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:100px;
  font-size:15px;font-weight:600;text-decoration:none;letter-spacing:.005em;
  background:var(--b-accent);color:var(--b-on-accent);border:1px solid var(--b-accent);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s,opacity .22s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.btn:active{transform:translateY(0)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}
.btn-g{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 34%,transparent)}
.btn-g:hover{border-color:currentColor}
.btn-sm{min-height:44px;padding:11px 18px;font-size:14px}
.btn svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
.btns{display:flex;flex-wrap:wrap;gap:10px}

.txtlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;color:var(--b-accent-txt);padding:8px 0;min-height:44px}
.txtlink span{border-bottom:1px solid color-mix(in srgb,var(--b-accent) 45%,transparent);transition:border-color .22s}
.txtlink:hover span{border-color:var(--b-accent)}
.txtlink svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .26s var(--ease)}
.txtlink:hover svg{transform:translateX(4px)}

/* ── 8. Imatge i marc fotogràfic ─────────────────────────── */
.fig{position:relative;overflow:hidden;background:var(--b-tint);border-radius:var(--radius)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig-16x9{aspect-ratio:16/9}
.fig-3x2{aspect-ratio:3/2}
.fig-4x5{aspect-ratio:4/5}
.fig-1x1{aspect-ratio:1/1}

/* Marc tipogràfic: substitueix la foto mentre no n'hi hagi.
   No és un buit: és una composició de color i lletra de la marca. */
.plate{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    radial-gradient(120% 100% at 12% 0%, color-mix(in srgb,var(--b-accent) 22%,transparent), transparent 62%),
    linear-gradient(155deg, var(--b-tint), color-mix(in srgb,var(--b-ink) 8%, var(--b-tint)));
  color:var(--b-ink);
  display:grid;place-items:center;isolation:isolate;
}
body.is-dark .plate,.plate.on-dark{
  background:
    radial-gradient(120% 100% at 12% 0%, color-mix(in srgb,var(--b-accent) 30%,transparent), transparent 62%),
    linear-gradient(155deg, var(--b-tint), var(--b-ink));
  color:var(--b-on-ink);
}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.plate-mark{
  position:relative;z-index:1;font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(1.5rem,1rem+3vw,3.4rem);letter-spacing:-.02em;line-height:1;
  text-align:center;padding:24px;opacity:.34;
}
[data-brand="rita-burger"] .plate-mark{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase}
.plate-sub{display:block;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-top:12px;opacity:.7}

/* ── 9. Portades (una composició diferent per marca) ─────── */
.hero{position:relative;padding-top:calc(var(--header-h) + 56px);padding-bottom:56px;background:var(--b-ink);color:var(--b-on-ink);overflow:hidden}
@media (min-width:768px){.hero{padding-top:calc(var(--header-h) + 96px);padding-bottom:96px}}
.hero-in{position:relative;z-index:2}
.hero-name{font-size:var(--step-5);margin-bottom:14px}
.hero-sub{font-size:var(--step-1);font-weight:300;color:var(--b-muted);max-width:26ch;margin-bottom:var(--s-4)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;letter-spacing:.05em;color:var(--b-muted);margin-bottom:var(--s-4)}
.hero-meta b{font-weight:600;color:var(--b-on-ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--b-ink) 0%,color-mix(in srgb,var(--b-ink) 82%,transparent) 42%,color-mix(in srgb,var(--b-ink) 35%,transparent) 100%)}
@media (max-width:767px){.hero-bg::after{background:linear-gradient(to top,var(--b-ink) 12%,color-mix(in srgb,var(--b-ink) 55%,transparent) 100%)}}

/* Home: graella editorial */
.hero-home{padding-bottom:0}
.hero-claim{font-size:var(--step-6);line-height:.98;max-width:14ch;margin-bottom:var(--s-4)}
.hero-home-foot{display:grid;gap:var(--s-3);padding-block:var(--s-5) var(--s-6);border-top:1px solid color-mix(in srgb,var(--b-on-ink) 16%,transparent);margin-top:var(--s-6)}
@media (min-width:900px){.hero-home-foot{grid-template-columns:1fr auto;align-items:end;gap:var(--s-6)}}
.xifres{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5)}
.xifra b{display:block;font-family:'Fraunces',serif;font-size:var(--step-3);line-height:1;font-weight:300;font-variation-settings:'opsz' 144}
.xifra span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--b-muted);margin-top:8px;font-weight:600}

/* Macao: asimètrica, molt buit */
[data-brand="macao"] .hero-in{display:grid;gap:var(--s-4)}
@media (min-width:900px){
  [data-brand="macao"] .hero-in{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-7);align-items:center}
  [data-brand="macao"] .hero{padding-bottom:140px}
}
/* Amoca: l'any com a element gràfic */
.any-gran{font-family:'Fraunces',serif;font-variation-settings:'opsz' 144,'WONK' 1;font-weight:600;font-size:clamp(4.5rem,3rem+9vw,11rem);line-height:.86;letter-spacing:-.04em;color:var(--b-accent-txt);display:block}
.any-peu{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--b-muted);margin-top:10px}
/* Rita Burger: tipografia sagnant */
[data-brand="rita-burger"] .hero-name{font-size:clamp(3.2rem,1.6rem+9vw,9rem);margin-left:-.04em}
/* Xiribiri: una columna, silenci */
[data-brand="xiribiri"] .hero{background:var(--b-surface);color:var(--b-ink)}
[data-brand="xiribiri"] .hero-sub{color:var(--b-muted)}
[data-brand="xiribiri"] .hero-meta b{color:var(--b-ink)}

/* ── 10. Barra d'acció del local ─────────────────────────── */
.act{border-block:1px solid color-mix(in srgb,currentColor 14%,transparent);background:var(--b-surface);color:var(--b-ink)}
.act .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-block:16px}
.act-estat{margin-left:auto;font-size:13px;color:var(--b-muted)}
@media (max-width:639px){.act{display:none}}

/* Barra fixa a mòbil */
.act-fix{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--b-ink) 94%,transparent);
  border-top:1px solid color-mix(in srgb,var(--b-on-ink) 16%,transparent);
  backdrop-filter:saturate(140%) blur(6px);
}
.act-fix .btn{flex:1;min-height:50px;padding-inline:12px;font-size:14px}
@media (min-width:640px){.act-fix{display:none}}
body.has-actfix{padding-bottom:82px}
@media (min-width:640px){body.has-actfix{padding-bottom:0}}

/* ── 11. Blocs editorials ────────────────────────────────── */
.duo{display:grid;gap:var(--s-4)}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:start}
  .duo-inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .duo-c{align-items:center}}

.rich p+p{margin-top:1.1em}
.rich p{font-size:var(--step-0);line-height:1.7}

.llista{border-top:var(--line)}
.llista li{display:grid;gap:4px;padding-block:18px;border-bottom:var(--line)}
@media (min-width:600px){.llista li{grid-template-columns:210px 1fr;gap:var(--s-3);align-items:baseline}}
.llista dt,.llista b{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--b-muted)}
.llista span,.llista dd{font-size:var(--step--1);line-height:1.6;margin:0}

.punts{display:grid;gap:var(--s-3);counter-reset:p}
@media (min-width:700px){.punts{grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-5)}}
.punt{counter-increment:p;border-top:2px solid var(--b-accent);padding-top:16px}
.punt h3{font-size:var(--step-0);font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0;margin-bottom:6px}
.punt p{font-size:var(--step--1);color:var(--b-muted);line-height:1.6}

/* Índex de marques (home i /restaurants/) — files editorials, no targetes */
.marques{border-top:var(--line)}
.marca-row{display:block;text-decoration:none;border-bottom:var(--line);position:relative;overflow:hidden}
.marca-row-in{display:grid;gap:14px;padding-block:var(--s-4);transition:transform .38s var(--ease)}
@media (min-width:900px){
  .marca-row-in{grid-template-columns:minmax(0,26px) minmax(0,3.2fr) minmax(0,4fr) minmax(0,2fr);
    gap:var(--s-4);align-items:center;padding-block:var(--s-5)}
}
.marca-row:hover .marca-row-in{transform:translateX(6px)}
.marca-num{font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--b-muted);font-variant-numeric:tabular-nums}
.marca-nom{font-family:'Fraunces',serif;font-size:var(--step-3);line-height:1;font-weight:400;letter-spacing:-.02em}
.marca-rol{font-size:var(--step--1);color:var(--b-muted);max-width:44ch}
.marca-ciutats{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--b-accent-txt)}
.marca-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--b-accent);transition:width .5s var(--ease)}
.marca-row:hover::before{width:100%}

/* Selector de local */
.locals{display:grid;gap:2px}
.local-row{display:grid;gap:6px;text-decoration:none;padding:20px 0;border-top:var(--line);position:relative}
@media (min-width:700px){.local-row{grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:var(--s-4);align-items:center}}
.local-row:last-child{border-bottom:var(--line)}
.local-ciutat{font-family:'Fraunces',serif;font-size:var(--step-2);line-height:1;font-weight:400}
.local-dada{font-size:var(--step--1);color:var(--b-muted)}
.local-fletxa{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--b-accent-txt)}
.local-fletxa svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .26s var(--ease)}
.local-row:hover .local-fletxa svg{transform:translateX(4px)}

/* Galeria */
.galeria{display:grid;gap:12px}
@media (min-width:700px){.galeria{grid-template-columns:repeat(6,1fr);gap:16px}
  .galeria>*:nth-child(1){grid-column:span 4}
  .galeria>*:nth-child(2){grid-column:span 2}
  .galeria>*:nth-child(3){grid-column:span 2}
  .galeria>*:nth-child(4){grid-column:span 4}}
[data-brand="rita-coko"] .galeria>*:nth-child(2){transform:rotate(-1.5deg)}

/* Galeria editorial: la composició s'adapta al material disponible */
.galeria-ed{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.galeria-ed{grid-template-columns:repeat(12,1fr);gap:20px}}
.galeria-ed .fig{margin:0}
.galeria-ed .g-a{grid-column:span 2;aspect-ratio:3/2}
.galeria-ed .g-b{grid-column:span 2;aspect-ratio:3/2}
.galeria-ed .g-v{grid-column:span 1;aspect-ratio:4/5}
@media (min-width:900px){
  .galeria-ed .g-a{grid-column:span 7;aspect-ratio:3/2}
  .galeria-ed .g-b{grid-column:span 5;aspect-ratio:4/3}
  .galeria-ed .g-v{grid-column:span 3;aspect-ratio:4/5}
}
[data-brand="rita-coko"] .galeria-ed .g-v:nth-of-type(3n+2){transform:rotate(-1.2deg)}

/* Mosaic de marques a la portada: moltes peces mitjanes en comptes d'una
   de gran. Amb material de baixa resolució es veu molt millor. */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:var(--s-5)}
@media (min-width:760px){.mosaic{grid-template-columns:repeat(5,1fr);gap:14px}}
.mosaic a{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:var(--radius);aspect-ratio:3/4;background:var(--b-tint)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mosaic a:hover img{transform:scale(1.04)}
.mosaic a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 46%,transparent 72%)}
.mosaic b{position:absolute;left:12px;right:12px;bottom:34px;z-index:1;font-family:'Fraunces',serif;font-weight:400;font-size:var(--step-0);line-height:1.1;color:#F7F4EF}
.mosaic span{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:rgba(247,244,239,.74)}
.mosaic .plate{aspect-ratio:3/4;height:100%}

/* Miniatura a la fila de marca */
.marca-thumb{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--b-tint)}
.marca-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.marca-row:hover .marca-thumb img{transform:scale(1.05)}
@media (min-width:900px){
  .marca-row-in{grid-template-columns:minmax(0,26px) minmax(0,120px) minmax(0,2.6fr) minmax(0,3.4fr) minmax(0,1.7fr)}
}

/* Dades i horari */
.nap{display:grid;gap:var(--s-4)}
@media (min-width:900px){.nap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-6)}}
.hores{border-top:var(--line)}
.hores div{display:flex;justify-content:space-between;gap:var(--s-3);padding-block:12px;border-bottom:var(--line);font-size:var(--step--1)}
.hores dt{color:var(--b-muted)}
.hores dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.tancat{color:var(--b-accent-txt);font-weight:600}

.mapa{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--b-tint)}
@media (min-width:900px){.mapa{aspect-ratio:1/1}}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-btn{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:24px;background:var(--b-tint);color:var(--b-ink);width:100%}
.mapa-btn b{font-family:'Fraunces',serif;font-size:var(--step-1);font-weight:400}
.mapa-btn span{font-size:13px;color:var(--b-muted);max-width:30ch}

/* Valoració */
.rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px var(--s-3)}
.rating-n{font-family:'Fraunces',serif;font-size:var(--step-4);line-height:1;font-weight:300;font-variation-settings:'opsz' 144}
.rating-of{font-size:var(--step--1);color:var(--b-muted)}
.estrelles{display:inline-flex;gap:3px}
.estrelles svg{width:19px;height:19px;fill:var(--b-accent-txt)}
.estrelles svg.buida{fill:color-mix(in srgb,var(--b-accent) 26%,transparent)}

/* Avisos i notes */
.nota{border-left:2px solid var(--b-accent);padding:2px 0 2px 18px;font-size:var(--step--1);color:var(--b-muted);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 14px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:100px;font-size:13px;font-weight:500}

/* Bloc de crida (grups / càtering) */
.crida{background:var(--b-ink);color:var(--b-on-ink)}
.crida .wrap{display:grid;gap:var(--s-3)}
@media (min-width:900px){.crida .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-6)}}

/* ── 12. Formulari ───────────────────────────────────────── */
.form{display:grid;gap:18px}
@media (min-width:700px){.form{grid-template-columns:repeat(2,1fr)}.f-full{grid-column:1/-1}}
.camp{display:grid;gap:7px}
.camp label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--b-muted)}
.camp input,.camp select,.camp textarea{
  width:100%;font-size:16px;line-height:1.5;padding:13px 14px;min-height:50px;
  background:var(--b-surface);color:var(--b-ink);
  border:1px solid color-mix(in srgb,var(--b-ink) 22%,transparent);border-radius:var(--radius);
  transition:border-color .2s,box-shadow .2s;
}
body.is-dark .camp input,body.is-dark .camp select,body.is-dark .camp textarea{background:color-mix(in srgb,var(--b-on-ink) 7%,transparent);color:var(--b-on-ink);border-color:color-mix(in srgb,var(--b-on-ink) 26%,transparent)}
.camp textarea{min-height:130px;resize:vertical}
.camp input:focus,.camp select:focus,.camp textarea:focus{border-color:var(--b-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--b-accent) 22%,transparent);outline:none}
.camp input[aria-invalid="true"],.camp textarea[aria-invalid="true"]{border-color:#C0392B}
.err{font-size:13px;color:#C0392B;min-height:0}
body.is-dark .err{color:#FF9B8E}
.check{display:flex;gap:12px;align-items:flex-start}
.check input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px;accent-color:var(--b-accent)}
.check label{font-size:14px;letter-spacing:0;text-transform:none;color:inherit;font-weight:400;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-estat{display:none;padding:20px 22px;border-radius:var(--radius);border:1px solid;font-size:var(--step--1)}
.form-estat.on{display:block}
.form-estat.ok{border-color:var(--b-accent);background:color-mix(in srgb,var(--b-accent) 10%,transparent)}
.form-estat.ko{border-color:#C0392B;background:color-mix(in srgb,#C0392B 8%,transparent)}
.form-estat b{display:block;font-family:'Fraunces',serif;font-size:var(--step-1);font-weight:400;margin-bottom:6px}

/* ── 13. Engrunes i peu ──────────────────────────────────── */
.engrunes{font-size:12px;color:var(--b-muted);padding-block:18px}
.engrunes ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.engrunes a{text-decoration:none}
.engrunes a:hover{text-decoration:underline}
.engrunes li+li::before{content:"›";margin-right:6px;opacity:.5}

.peu{background:var(--ink-900);color:var(--paper);padding-block:var(--s-6) var(--s-4);margin-top:0}
.peu a{text-decoration:none}
.peu a:hover{text-decoration:underline}
.peu-grid{display:grid;gap:var(--s-5)}
@media (min-width:800px){.peu-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s-5)}}
.peu h2,.peu h3{font-size:12px;font-family:'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#A98548;margin-bottom:16px}
.peu ul{display:grid;gap:2px}
.peu li a{display:block;padding:7px 0;font-size:14px;min-height:36px;color:#DDD7CF}
.peu li a:hover{color:#fff}
.peu-marca{font-family:'Fraunces',serif;font-size:var(--step-2);font-weight:300;font-variation-settings:'opsz' 144;line-height:1.1;margin-bottom:14px;display:block}
.peu-bot{border-top:1px solid rgba(247,244,239,.14);margin-top:var(--s-5);padding-top:var(--s-3);display:flex;flex-wrap:wrap;gap:10px var(--s-3);font-size:12.5px;color:#A8A19B;align-items:center}
.peu-bot a{color:#A8A19B;padding:6px 0}
.peu-bot nav{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(247,244,239,.24);border-radius:50%;transition:border-color .2s,transform .2s}
.socials a:hover{border-color:#A98548;transform:translateY(-2px)}
.socials svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}

.amunt{position:fixed;right:14px;bottom:14px;z-index:80;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink-900);color:var(--paper);border:1px solid rgba(247,244,239,.22);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s}
.amunt.on{opacity:1;visibility:visible;transform:none}
.amunt svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
body.has-actfix .amunt{bottom:86px}
@media (min-width:640px){body.has-actfix .amunt{bottom:14px}}

/* ── 14. Avís de demo ────────────────────────────────────── */
.demo{background:var(--ink-900);color:#A98548;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-align:center;padding:7px 16px}

/* ── 15. Moviment ────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(0 0 100% 0);transition:clip-path .74s var(--ease)}
.rv-img.in{clip-path:inset(0 0 0 0)}
.par{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .par{transform:none!important}
}

/* ── 16. Utilitats ───────────────────────────────────────── */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-1{margin-top:var(--s-2)}.mt-2{margin-top:var(--s-3)}.mt-3{margin-top:var(--s-4)}
.mt-4{margin-top:var(--s-5)}.mt-5{margin-top:var(--s-6)}
.bg-tint{background:var(--b-tint)}
.bg-ink{background:var(--b-ink);color:var(--b-on-ink)}
.center{text-align:center}