:root { --cream:#e5e4d4; --ink:#17110f; --coral:#f46362; --shell:1440px; --pad:clamp(1.25rem,4vw,4.5rem); --gap:clamp(1rem,2vw,2rem); --nav-h:68px; --font-display:'Space Grotesk',Arial,sans-serif; --font-body:'Space Grotesk',Arial,sans-serif; --font-mono:'Space Mono',monospace; --ease:cubic-bezier(.22,1,.36,1); --z-nav:50; --z-panel:45; }
html[data-theme='light'] { --bg:var(--cream); --bg-2:#d8d7c7; --fg:var(--ink); --fg-mute:#69655d; --line:rgba(23,17,15,.16); --accent:#e85554; --on-accent:var(--ink); }
html[data-theme='dark'] { --bg:#17120f; --bg-2:#241c18; --fg:#f0eedc; --fg-mute:#aaa397; --line:rgba(240,238,220,.16); --accent:#ff6665; --on-accent:var(--ink); }
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg);color:var(--fg)} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.55;overflow-x:hidden} img{display:block;max-width:100%;height:auto} button,a{font:inherit} a{color:inherit} .link{color:var(--fg);text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .25s var(--ease)} .link:hover,.link:focus-visible{color:var(--accent)} h1,h2,h3,p,figure{margin:0} h1,h2,h3{font-family:var(--font-display);line-height:.98;letter-spacing:-.035em} ::selection{background:var(--accent);color:var(--ink)}
.skip{position:fixed;left:1rem;top:1rem;z-index:1000;padding:.8rem 1rem;background:var(--accent);color:var(--ink);transform:translateY(-160%);transition:transform .2s}.skip:focus{transform:none}
.wordmark,.lockup{display:block;background-repeat:no-repeat;background-position:center;background-size:contain}.wordmark{width:clamp(5.4rem,8vw,7.3rem);height:2rem;background-image:url('../img/wordmark.png')}.lockup{width:clamp(8rem,14vw,12rem);height:3.5rem;background-image:url('../img/lockup.png')} html[data-theme='light'] .wordmark,html[data-theme='light'] .lockup{filter:invert(1)}
.btn,.ghost,.tema{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--fg);text-decoration:none;cursor:pointer}.btn{min-height:46px;padding:.9rem 1.35rem;font:700 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s,color .25s}.btn--solid{background:var(--accent);border-color:var(--accent);color:var(--ink)}.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--cream)}.btn--onCoral{border-color:rgba(23,17,15,.35);color:var(--ink)}.btn--line{background:transparent;border-color:var(--line);color:var(--fg)}.btn:hover{transform:translateY(-2px)}.ghost{min-height:42px;padding:.7rem 1rem}.tema{width:42px;height:42px}.tema svg{width:18px;height:18px}.tema__moon{display:none}html[data-theme='dark'] .tema__sun{display:none}html[data-theme='dark'] .tema__moon{display:block}
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--bg);border-bottom:1px solid transparent;transition:border-color .35s var(--ease),background-color .45s var(--ease)}.nav.is-stuck{border-bottom-color:var(--line)}.nav__in{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);height:var(--nav-h);display:flex;align-items:center;gap:var(--gap)}.nav__brand{color:var(--fg);flex:none;display:flex;align-items:center;gap:clamp(.65rem,1.2vw,1rem)}.marca--nav{width:3.35rem;height:3.65rem;color:var(--accent);padding-left:clamp(.65rem,1.2vw,1rem);border-left:1px solid var(--line);overflow:visible}.nav__brand .wordmark{transition:opacity .3s var(--ease)}.nav__brand:hover .wordmark{opacity:.6}.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);margin-inline:auto}.nav__links a{position:relative;color:var(--fg-mute);text-decoration:none;font:700 .72rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.14em;transition:color .28s var(--ease)}.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}.nav__links a:hover{color:var(--fg)}.nav__links a:hover::after{transform:scaleX(1)}.nav__end{display:flex;align-items:center;gap:.75rem;flex:none}.nav__burger,.nav__links-cta{display:none}
.hero{position:relative;max-width:var(--shell);margin-inline:auto;padding-bottom:clamp(8rem,16vw,14rem)}.hero__media{height:clamp(31rem,58vw,46rem);overflow:hidden;background:var(--bg-2)}.hero__media img{width:100%;height:calc(100% + 88px);object-fit:cover;object-position:center 48%;scale:1.04}.hero__panel{position:absolute;right:var(--pad);bottom:clamp(2rem,5vw,4.5rem);width:min(48rem,58vw);padding:clamp(2rem,4vw,4rem);background:var(--coral);color:var(--ink)}.hero__h1{font-size:clamp(2.6rem,5.2vw,5rem);max-width:13ch}.hero__p{max-width:53ch;margin-top:1.5rem}.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.8rem}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg)}.marquee__track{display:flex;width:max-content}.marquee__set{display:flex;align-items:center;gap:1.3rem;padding:1rem .65rem;font:700 .72rem/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}.marquee__mark{width:.35rem;height:.35rem;border-radius:50%;background:var(--accent)}
.sec{max-width:var(--shell);margin-inline:auto;padding:clamp(3.25rem,6.5vw,5.5rem) var(--pad)}.sec__h2{font-size:clamp(2rem,4.6vw,3.5rem);max-width:18ch}.lede{color:var(--fg-mute);max-width:52ch;margin-top:1.25rem;font-size:clamp(1rem,1.1vw,1.1rem)}
@media(max-width:900px){.nav__links{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:var(--z-panel);flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:0 var(--pad) 2rem;background:var(--bg);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--ease),visibility 0s linear .5s}.nav__links.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .5s var(--ease),visibility 0s}.nav__links a{width:100%;padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--fg);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}.nav__links.is-open a{opacity:1;transform:none}.nav__links-cta{display:block!important}.nav__cta{display:none}.nav__burger{display:inline-flex}.hero__panel{width:min(38rem,72vw)}}
@media(max-width:620px){:root{--nav-h:62px}.marca--nav{width:2.55rem;height:2.85rem;padding-left:.55rem}.tema{display:none}.hero{padding-bottom:0}.hero__media{height:60vh;min-height:28rem}.hero__panel{position:relative;right:auto;bottom:auto;width:calc(100% - 2*var(--pad));margin:-4.5rem auto 0;padding:1.7rem;z-index:2}.hero__h1{font-size:clamp(2.4rem,11vw,3.7rem)}.hero__cta{display:grid}.hero__cta .btn{width:100%}.marquee{margin-top:4rem}}
/* Pillars: one editorial gallery, three distinct chapters. */
.pilares { padding-top:clamp(4.5rem,9vw,8rem); padding-bottom:clamp(5rem,10vw,9rem); }
.pilares__head { display:grid; grid-template-columns:minmax(0,1fr) minmax(15rem,.62fr); align-items:end; gap:2rem; margin-bottom:clamp(3rem,6vw,5rem); }
.pilares__head .eyebrow { grid-column:1/-1; margin-bottom:-.75rem; }
.pilares__head .sec__h2 { max-width:11ch; }
.pilares__head > p:last-child { color:var(--fg-mute); max-width:30ch; justify-self:end; }
.pillarGallery { display:grid; grid-template-columns:clamp(11rem,17vw,15rem) minmax(0,1fr); gap:clamp(1.5rem,3.5vw,3.5rem); border-top:1px solid var(--line); padding-top:clamp(1.25rem,2.5vw,2rem); }
.pillarGallery__tabs { display:flex; flex-direction:column; align-self:start; border-top:1px solid var(--line); }
.pillarGallery__tab { position:relative; display:grid; grid-template-columns:2rem 1fr; align-items:baseline; gap:.35rem; width:100%; padding:clamp(1.15rem,2vw,1.6rem) .25rem; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--fg-mute); font:500 clamp(1.45rem,2.3vw,2rem)/1 var(--font-display); text-align:left; cursor:pointer; transition:color .35s var(--ease),padding-left .35s var(--ease); }
.pillarGallery__tab::before { content:''; position:absolute; left:0; top:50%; width:0; height:2px; background:var(--accent); transform:translateY(-50%); transition:width .35s var(--ease); }
.pillarGallery__tab span { color:var(--fg-mute); font:700 .61rem/1 var(--font-mono); letter-spacing:.12em; transition:color .35s var(--ease); }
.pillarGallery__tab:hover,.pillarGallery__tab:focus-visible { color:var(--fg); padding-left:.55rem; }
.pillarGallery__tab.is-active { color:var(--fg); padding-left:1.35rem; }
.pillarGallery__tab.is-active::before { width:.85rem; }
.pillarGallery__tab.is-active span { color:var(--accent); }.pillarGallery__panel { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-rows:1fr 1fr auto; gap:clamp(.55rem,1vw,.9rem); padding-top:clamp(.75rem,1.4vw,1.25rem); animation:gallery-in .65s var(--ease) both; }
.pillarGallery__panel[hidden] { display:none; }
.pillarGallery__panel figure { margin:0; overflow:hidden; background:var(--bg-2); }
.pillarGallery__panel img { width:100%; height:100%; object-fit:cover; }
.pillarGallery__main { grid-row:1/3; aspect-ratio:16/10; }
.pillarGallery__small { min-height:0; }
.pillarGallery__small img { aspect-ratio:16/5; }
.pillarGallery__caption { grid-column:1/-1; display:flex; justify-content:flex-end; padding-top:clamp(.75rem,1.5vw,1.25rem); color:var(--fg-mute); max-width:42ch; justify-self:end; }
@keyframes gallery-in { from { opacity:0; clip-path:inset(0 0 0 12%); } to { opacity:1; clip-path:inset(0); } }
@media (max-width:600px) { .pilares__head{grid-template-columns:1fr;margin-bottom:3rem}.pilares__head .eyebrow{grid-column:auto;margin-bottom:-.75rem}.pilares__head>p:last-child{justify-self:start}.pillarGallery{display:block;padding-top:0;border-top:0}.pillarGallery__tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-bottom:.75rem}.pillarGallery__tab{display:flex;justify-content:center;gap:.45rem;padding:1rem .25rem;font-size:.92rem;border-bottom:1px solid var(--line)}.pillarGallery__tab::before{left:0;right:0;top:auto;bottom:-1px;width:0;height:2px;margin:auto;transform:none}.pillarGallery__tab:hover,.pillarGallery__tab:focus-visible,.pillarGallery__tab.is-active{padding-left:.25rem}.pillarGallery__tab.is-active::before{width:100%}.pillarGallery__panel{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.pillarGallery__main{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}.pillarGallery__small{aspect-ratio:1/1}.pillarGallery__small img{aspect-ratio:auto}.pillarGallery__caption{grid-column:1/-1;justify-self:start;padding-bottom:.5rem} }
/* Drinks: one strong still life, with two smaller observations stepping around it. */
.bebidas { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto; gap:clamp(1rem,2.4vw,2rem); align-items:start; padding-top:clamp(5rem,10vw,9rem); padding-bottom:clamp(5rem,10vw,9rem); }
.bebidas__copy { grid-column:1 / 6; grid-row:1; padding-top:clamp(1rem,5vw,4rem); }
.eyebrow { margin-bottom:1.15rem; color:var(--accent); font:700 .72rem/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; }
.bebidas__link { display:flex; justify-content:space-between; align-items:center; width:min(100%,27rem); margin-top:clamp(1.75rem,3vw,2.5rem); padding:1rem 0; border-block:1px solid var(--line); color:var(--fg); text-decoration:none; font:700 .78rem/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; transition:color .3s var(--ease),padding-inline .3s var(--ease); }
.bebidas__link:hover,.bebidas__link:focus-visible { color:var(--accent); padding-inline:.4rem; }
.bebidas figure { margin:0; overflow:hidden; background:var(--bg-2); }
.bebidas img { width:100%; height:100%; object-fit:cover; }
.bebidas__hero { grid-column:7 / 13; grid-row:1 / 3; aspect-ratio:4 / 5; }
.bebidas__hero img { scale:1.1; object-position:50% 52%; }
.bebidas__detail { aspect-ratio:4 / 5; margin-top:clamp(1.5rem,5vw,4rem)!important; }
.bebidas__detail--cocktail { grid-column:1 / 4; grid-row:2; }
.bebidas__detail--wine { grid-column:4 / 7; grid-row:2; transform:translateY(clamp(2rem,6vw,5rem)); }
.bebidas__detail--cocktail img { object-position:50% 58%; }
.bebidas__detail--wine img { object-position:50% 50%; }
@media (max-width:760px) { .bebidas{grid-template-columns:1fr 1fr;grid-template-rows:auto}.bebidas__copy{grid-column:1/-1;grid-row:auto;padding:0 0 1rem}.bebidas__hero{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}.bebidas__detail{grid-row:auto;margin-top:0!important;aspect-ratio:3/4}.bebidas__detail--cocktail{grid-column:1}.bebidas__detail--wine{grid-column:2;transform:translateY(1.5rem)} }
/* ── Cozinha: split, tall fire frame against copy ────────────────────────── */
.cozinha {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.cozinha__hero { margin: 0; overflow: hidden; background: var(--bg-2); }
.cozinha__hero img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  scale: 1.13;
}
.cozinha__side {
  display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(0rem, 4vw, 3.5rem);
}
/* Links to the house's own printed cards. A cropped thumbnail of a menu is
   neither readable nor a picture, so these carry what is inside them instead. */
.cartas { display: grid; gap: 0; }
.carta {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding: clamp(1.15rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  margin-bottom: -1px;               /* collapse the shared hairline */
  text-decoration: none; color: var(--fg);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.carta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.carta:hover, .carta:focus-visible { color: var(--on-accent); border-color: var(--accent); }
.carta:hover::before, .carta:focus-visible::before { transform: scaleX(1); }
.carta:hover + .carta, .carta:focus-visible + .carta { border-top-color: var(--accent); }

.carta__name {
  grid-column: 1;
  font: 700 clamp(1.05rem, 1.5vw, 1.3rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
}
.carta__meta {
  grid-column: 1; grid-row: 2;
  font-size: 0.92rem;
  color: var(--fg-mute);
  transition: color 0.3s var(--ease);
}
.carta:hover .carta__meta, .carta:focus-visible .carta__meta { color: inherit; }
.carta__go {
  grid-column: 2; grid-row: 1 / 3;
  align-self: center;
  font-size: 1.25rem; line-height: 1;
  transition: transform 0.35s var(--ease);
}
.carta:hover .carta__go, .carta:focus-visible .carta__go { transform: translateX(4px); }

@media (max-width: 860px) {
  .cozinha { grid-template-columns: 1fr; }
  .cozinha__hero img { aspect-ratio: 4 / 5; }
  .cozinha__side { padding-top: 0; }
}

/* ── Regras: flat coral poster carrying the house's own rule ─────────────── */
.regras {
  position: relative;
  background: var(--coral);
  color: var(--ink);
  padding: clamp(5rem, 12vw, 9rem) var(--pad);
  overflow: hidden;
}
.regras__in {
  max-width: var(--shell); margin-inline: auto; position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.regras__foto { margin: 0; overflow: hidden; background: rgba(23, 17, 14, 0.12); aspect-ratio: 4 / 5; }
.regras__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%;
}

@media (max-width: 860px) {
  .regras__in { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); }
  .regras__foto { aspect-ratio: 3 / 2; max-height: min(48vh, 24rem); }
  .regras__foto img { height: 100%; }
}
.regras__over {
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 500; letter-spacing: -0.02em; opacity: 0.72;
}
.regras__h2 { font-size: clamp(2.75rem, 9vw, 7rem); letter-spacing: -0.05em; margin-top: 0.15em; }
.regras__p {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 40ch; font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: rgba(23, 17, 14, 0.88);
}

/* ── A casa: asymmetric mosaic. Nine tiles laid on a 12 column grid over 20
      row units, tiled exactly so no cell is ever left empty. ─────────────── */
.casa__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Column masonry rather than a span grid: every photograph keeps the aspect it
   was shot at, so nothing is cropped to fit a cell and no cell is left empty.
   Tiles land near 430px, well inside what a 1440px source can serve at 2x. */
.mosaic {
  columns: 3;
  column-gap: clamp(0.5rem, 1vw, 0.9rem);
}

.tile {
  display: block; width: 100%;
  break-inside: avoid;
  margin: 0 0 clamp(0.5rem, 1vw, 0.9rem);
  position: relative; overflow: hidden;
  padding: 0; border: 0; border-radius: 0;
  background: var(--bg-2); color: inherit;
  cursor: zoom-in;
}
.tile img {
  display: block; width: 100%; height: auto;
  transition: scale 0.8s var(--ease);
}
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  opacity: 0; transition: opacity 0.4s var(--ease);
  mix-blend-mode: multiply; pointer-events: none;
}
.tile:hover img, .tile:focus-visible img { scale: 1.04; }
.tile:hover::after, .tile:focus-visible::after { opacity: 0.14; }

@media (max-width: 1100px) { .mosaic { columns: 2; } }

/* Position readout for the phone carousel. Desktop shows the whole mosaic at
   once and does not need it. Declared before the media query that turns it on,
   or this display:none would win on source order. */
.mosaic__bar {
  display: none;
  height: 2px; margin-top: 1.1rem;
  background: var(--line); overflow: hidden;
}
.mosaic__fill {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0.12)); transform-origin: left;
}

/* On a phone the mosaic becomes a swipe carousel: nine stacked photographs is
   a long scroll for something you browse, and a peek of the next frame is a
   better affordance than a scrollbar. Runs full bleed off the right edge. */
@media (max-width: 860px) {
  .mosaic {
    display: flex;          /* overrides `columns`, which flex ignores */
    columns: auto;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    scroll-padding-left: var(--pad);
  }
  .mosaic::-webkit-scrollbar { display: none; }

  /* One shared frame here, so the strip reads as an even row of cards. */
  .tile {
    flex: 0 0 84%;
    margin: 0;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
  }
  .tile img { height: 100%; object-fit: cover; }

  .mosaic__bar { display: block; }
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lb {
  width: 100%; max-width: 100%;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--bg) 94%, black);
  color: var(--fg);
  overflow: hidden;
}
.lb::backdrop { background: rgba(10, 7, 6, 0.85); }
.lb:not([open]) { display: none; }

/* Scroll lock tied straight to the dialog's state, so it cannot be left on. */
html:has(dialog[open]) { overflow: hidden; }

.lb__frame {
  margin: 0; height: 100%;
  /* minmax(0,1fr) so the photo row is allowed to shrink below its own
     intrinsic height; a bare 1fr lets a tall image push past the viewport. */
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: clamp(3.25rem, 6vw, 4.5rem) clamp(1rem, 8vw, 6rem) clamp(1.25rem, 3vw, 2rem);
}
.lb__img {
  width: 100%; height: 100%; min-height: 0;
  object-fit: contain;
  justify-self: center;
}
.lb__cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem;
  font: 700 0.72rem/1.5 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.lb__cap span:first-child { max-width: 62ch; text-transform: none; letter-spacing: 0.02em; font-weight: 400; }
.lb__count { flex: none; color: var(--accent); }

.lb__close, .lb__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 0;
  color: var(--fg); cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.lb__close svg, .lb__nav svg { width: 20px; height: 20px; }
.lb__close:hover, .lb__nav:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.lb__close { top: clamp(0.75rem, 2vw, 1.25rem); right: clamp(0.75rem, 2vw, 1.25rem); }
.lb__nav { top: 50%; margin-top: -22px; }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

@media (max-width: 640px) {
  .lb__nav { top: auto; bottom: clamp(0.75rem, 3vw, 1.25rem); margin-top: 0; }
  .lb__cap { flex-direction: column; gap: 0.35rem; }
}

/* Word box for split headlines. Padding reserves room for descenders so the
   clip that hides the word on entry never shaves a g, j, p or q. */
.w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}

/* ── Brand marks: each variant belongs to its own moment ────────────────── */
.marca {
  display: block;
  height: auto;
  color: var(--accent);
}
.marca--mug {
  width: clamp(9rem, 16vw, 13rem);
  margin: 0 0 clamp(1.25rem, 2vw, 2rem) clamp(-1rem, -2vw, 0rem);
}
.marca--footer {
  width: clamp(3.5rem, 5vw, 4.75rem);
  flex: 0 0 auto;
}
.marca__fills {
  opacity: 0;
  transition: opacity 0.55s var(--ease) 1.55s;
}
.marca.is-in .marca__fills { opacity: 1; }

/* Every stroke carries pathLength="1", so one normalized dash can draw every
   curve regardless of its measured SVG length. */
[data-motion='on'] .marca path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-motion='on'] .marca.is-in path {
  animation: traco 0.9s var(--ease) forwards;
  animation-delay: calc(var(--fig, 0) * 0.34s + var(--i, 0) * 0.13s);
}
@keyframes traco { to { stroke-dashoffset: 0; } }
/* ── Brunch: offset editorial overlap ────────────────────────────────────── */
.brunch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.brunch__stack { position: relative; padding: 0 0 clamp(2rem, 6vw, 5rem) clamp(2rem, 7vw, 6rem); }
.brunch__back {
  width: 78%; aspect-ratio: 3 / 4; object-fit: cover; margin-left: auto;
}
.brunch__front {
  position: absolute; left: 0; bottom: 0;
  width: 52%; aspect-ratio: 3 / 4; object-fit: cover;
  box-shadow: 0 24px 60px rgba(23, 17, 14, 0.32);
}
.brunch__txt { display: flex; flex-direction: column; align-items: flex-start; }
.brunch__txt .btn { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 860px) {
  .brunch { grid-template-columns: 1fr; }
  .brunch__stack { padding-left: clamp(1.5rem, 8vw, 3rem); }
}

/* ── Visite: hairline info columns beside the storefront ─────────────────── */
.visite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.visite .sec__h2 { grid-column: 1 / -1; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.visite__foto { margin: 0; overflow: hidden; background: var(--bg-2); }
.visite__foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  scale: 1.06;
  transition: scale 0.9s var(--ease);
}
.visite__foto:hover img { scale: 1.11; }

@media (max-width: 860px) {
  .visite { grid-template-columns: 1fr; }
  .visite__foto { margin-top: clamp(2rem, 6vw, 3rem); }
  .visite__foto img { aspect-ratio: 4 / 3; }
}

.info { margin: 0; border-top: 1px solid var(--line); }
.info__row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr);
  gap: var(--gap);
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.info dt {
  font: 700 0.72rem/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fg-mute); padding-top: 0.35rem;
}
.info dd { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; }

@media (max-width: 640px) {
  .info__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .info dt { padding-top: 0; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.rodape {
  border-top: 1px solid var(--line);
  max-width: var(--shell); margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  color: var(--fg);
}
.rodape__brand { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.rodape p {
  font: 700 0.72rem/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fg-mute);
}

/* ==========================================================================
   MOTION
   Every effect below is an entrance, a depth cue, or direct feedback. Nothing
   loops except the marquee.

   Gated on [data-motion="on"], which main.js intentionally keeps enabled for
   this brand experience.
   ========================================================================== */

/* Block-level entrances ---------------------------------------------------- */
[data-motion='on'] .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-motion='on'] .reveal.is-in { opacity: 1; transform: none; }

/* Headline entrances: each word rises out of its own clipped box ----------- */
[data-motion='on'] [data-split] .w__i {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.95s var(--ease);
  transition-delay: calc(var(--i, 0) * 42ms);
}
[data-motion='on'] [data-split].is-in .w__i { transform: none; }

/* Hero load-in ------------------------------------------------------------- */
[data-motion='on'] .hero__media { animation: fade-in 1.4s var(--ease) both; }
[data-motion='on'] .hero__in {
  opacity: 0; transform: translateY(18px);
  animation: rise 0.9s var(--ease) forwards;
}
[data-motion='on'] .hero__p.hero__in   { animation-delay: 0.42s; }
[data-motion='on'] .hero__cta.hero__in { animation-delay: 0.56s; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Marquee ------------------------------------------------------------------ */
[data-motion='on'] .marquee__track { animation: slide 30s linear infinite; }
[data-motion='on'] .marquee:hover .marquee__track { animation-play-state: paused; }
[data-motion='off'] .marquee__track { transform: translateX(-6%); }
@keyframes slide { to { transform: translateX(-25%); } }

/* Scroll-linked depth. Held to a few elements so the compositor stays ahead of
   the scroll. Browsers without view timelines simply render them still. ----- */
@supports (animation-timeline: view()) {
  [data-motion='on'] .hero__media img {
    animation: par-lg linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  [data-motion='on'] .cozinha__hero img,
  [data-motion='on'] .bebidas__hero img,
  [data-motion='on'] .brunch__back {
    animation: par-md linear both;
    animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
}

@keyframes par-lg { from { translate: 0 -44px; } to { translate: 0 44px; } }
@keyframes par-md { from { translate: 0 -28px; } to { translate: 0 28px; } }

@media (max-width: 520px) { .marca--nav { width: 2.55rem; height: 2.85rem; padding-left: .55rem; } }

/* Compact contact sheet: the room should read as a sequence, not a wall. */
.mosaic { columns:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.45rem,.8vw,.75rem); }
.tile { width:100%; margin:0; aspect-ratio:4/3; }
.tile img { width:100%; height:100%; object-fit:cover; }
.tile:nth-child(3n+1) img { object-position:50% 42%; }
.tile:nth-child(3n+2) img { object-position:50% 55%; }
.mosaic__bar { display:none!important; }
@media (max-width:1100px) { .mosaic { columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px) {
  .mosaic { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; overflow:visible; margin-inline:0; padding-inline:0; }
  .tile { flex:none; width:100%; margin:0; aspect-ratio:1/1; }
}
section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

@media (max-width: 860px) and (max-height: 680px) { .regras__foto { aspect-ratio: 2 / 1; max-height: 17rem; } }