/* Los Santos Hermanos — Rua Silva Jardim, 1058, Santa Maria/RS
   ==================================================================
   DIRECTION. Their room is a party: a red wall, cut-paper banners on
   the ceiling, warm bulbs, green neon out front. So the page is built
   as a strung sequence of flat, full-bleed colour panels — cream, red,
   slate, green — with a papel picado banner cut across the seams. Every
   hex here was sampled off their own pixels (assets/IDENTITY.md, and
   tools/sample-colors.py run over the storefront photograph).

   The cream is the ground, not the near-black: #f3e6c7 is 60% of their
   own RODÍZIOS card and it is the brand's dominant colour. The dark
   only appears where the photographs are dark — the night storefront
   and the drinks.

   Corner radius is 0 everywhere. Papel picado is cut paper, and cut
   paper has no rounded corners. The only curves on the page are in the
   punched holes and in the photographs.
   ================================================================== */

/* ── type ──────────────────────────────────────────────────────────
   Chango (Sudtipos) is drawn out of Mexican vernacular street
   lettering. IDENTITY.md reads their own house lettering as "bold,
   rounded, condensed all-caps"; Chango is the closest self-hostable
   face in that spirit, and it is used only for headings — never for a
   line of running text. Archivo carries body and the tracked-caps
   utility role (eyebrows, captions, the fact lists). */
@font-face{font-family:Chango;src:url(assets/fonts/chango-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Chango;src:url(assets/fonts/chango-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-500-latin-ext.woff2) format("woff2");font-weight:500;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── tokens ───────────────────────────────────────────────────────── */
:root{
  /* the six, all sampled */
  --bone:#f3e6c7;        /* their cream, 60% of the RODÍZIOS card. The ground. */
  --bone-2:#e6cfa8;      /* cream, one step down, for secondary text on colour */
  --bone-3:#f0dfba;      /* the same step, lifted, for the green panel only */
  --tinta:#17140f;       /* the night in the storefront photograph */
  --tinta-2:#4a4136;     /* secondary text on cream */
  --rojo:#a01211;        /* their dining-room wall */
  --rojo-ink:#8a0f0e;    /* the same red, dark enough to set type on cream */
  --verde:#3c6017;       /* the other dining-room wall */
  --verde-ink:#2f5211;   /* the same green, dark enough to set type on cream */
  --neon:#70d544;        /* their sign, measured off the lit letters */
  --naranja:#cf8c48;     /* the angel's robe. Decoration only — never type on cream */

  --wrap:1180px;
  --pad:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.33,0,.2,1);
}

/* ── base ─────────────────────────────────────────────────────────── */
*,*::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{
  margin:0;
  background:var(--bone);
  color:var(--tinta);
  font:400 17px/1.62 Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
ul{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--neon);color:var(--tinta);padding:12px 18px;font-weight:700}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* Type roles. Chango only ever appears at these three sizes. */
h1,h2{font-family:Chango,Impact,"Arial Black",sans-serif;letter-spacing:.005em;line-height:.98;text-transform:uppercase}
h1{font-size:clamp(2.4rem,6vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-family:Archivo,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.01em}

.olho{
  font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1.1em;color:var(--rojo-ink);
}
.sec-lede{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.45;font-weight:500;max-width:34ch}

/* ── the signature: papel picado ──────────────────────────────────── */
/* Cut once by tools/papel-picado.py, hung at three seams: the top of the
   page, the top of the rodízio, the top of the footer. Every flag rocks
   on its own clock, slowly, forever — which is what paper does under a
   ceiling fan in a full room. It never resolves and it never restarts. */
.papel-defs{position:absolute;width:0;height:0;overflow:hidden}
.banner{line-height:0}
.papel{display:block;width:100%;height:auto}
.papel-n{display:none}
.papel-cord{color:var(--tinta);opacity:.55}
.papel-flag{
  transform-box:fill-box;
  transform-origin:50% 0;
  animation:sway calc(19s + var(--i) * 1.1s) var(--ease) calc(var(--i) * -1.9s) infinite alternate;
  will-change:transform;
}
@keyframes sway{
  from{transform:rotate(-2.4deg)}
  to  {transform:rotate(2.4deg)}
}
@media (prefers-reduced-motion:reduce){
  .papel-flag{animation:none;transform:none}
}

/* Flag tones per panel. Three tones, cycling out of step with the four
   cut shapes, so no motif ever owns a colour. */
.sec-rojo .papel-flag.t0,.rodape .papel-flag.t0,.hero .papel-flag.t0{color:var(--bone)}
.sec-rojo .papel-flag.t1,.rodape .papel-flag.t1,.hero .papel-flag.t1{color:var(--naranja)}
.sec-rojo .papel-flag.t2,.rodape .papel-flag.t2,.hero .papel-flag.t2{color:var(--neon)}
.hero .papel-cord,.sec-rojo .papel-cord,.rodape .papel-cord{color:var(--bone);opacity:.4}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-weight:700;font-size:.98rem;letter-spacing:.02em;
  padding:14px 22px;text-decoration:none;border:2px solid transparent;
  transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn-verde{background:var(--neon);color:var(--tinta);border-color:var(--neon)}
.btn-verde:hover{background:var(--bone);border-color:var(--bone)}
.btn-bone{background:var(--bone);color:var(--tinta);border-color:var(--bone)}
.btn-bone:hover{background:var(--neon);border-color:var(--neon)}
.btn-vazio{background:transparent;color:var(--bone);border-color:currentColor}
.btn-vazio:hover{background:var(--bone);color:var(--tinta)}
.btn-grande{font-size:1.1rem;padding:18px 30px}

/* ── header ───────────────────────────────────────────────────────── */
.topo{
  position:sticky;top:0;z-index:20;
  background:var(--tinta);color:var(--bone);
  border-bottom:3px solid var(--rojo);
}
.topo-in{display:flex;align-items:center;gap:24px;min-height:76px}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 auto}
.lockup-nome{
  font-family:Chango,Impact,sans-serif;font-size:.92rem;line-height:1.02;
  text-transform:uppercase;letter-spacing:.01em;
}
.nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav a{
  color:var(--bone);text-decoration:none;font-weight:600;font-size:.86rem;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--neon);color:var(--neon)}
.topo-cta{flex:0 0 auto;padding:11px 18px;font-size:.88rem}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{
  background:var(--tinta) url(assets/img/chalk-grain.png) repeat;
  background-blend-mode:overlay;
  color:var(--bone);
  padding-bottom:clamp(48px,6vw,80px);
}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) 700px;
  gap:clamp(28px,4vw,56px);
  align-items:center;
  max-width:none;
  padding-right:0;
  padding-left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));
  padding-top:clamp(28px,4vw,52px);
}
.hero-texto{max-width:38rem}
.hero .olho{color:var(--neon)}
.h1-a{display:block;color:var(--bone)}
.h1-b{
  display:block;margin-top:.5rem;
  font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(1rem,1.55vw,1.32rem);letter-spacing:.12em;line-height:1.3;
  text-transform:uppercase;color:var(--neon);
}
.hero-sub{
  margin:1.4rem 0 0;font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:500;color:var(--bone-2);max-width:26ch;
}
.cta-linha{display:flex;flex-wrap:wrap;gap:14px;margin:1.9rem 0 0}
.hero-fatos{
  display:flex;flex-wrap:wrap;gap:36px;
  margin:2.4rem 0 0;padding-top:1.5rem;border-top:2px solid rgba(243,230,199,.22);
}
.hero-fatos dt{
  font-weight:600;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--neon);margin-bottom:.4rem;
}
.hero-fatos dd{font-size:1rem;line-height:1.4;color:var(--bone)}
.hero-foto{margin:0}
.hero-foto img{width:100%;max-width:700px;border-top:6px solid var(--neon)}
.hero-foto figcaption{
  margin-top:.7rem;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--bone-2);
}

/* ── sections ─────────────────────────────────────────────────────── */
/* Anchor targets clear the sticky header. */
.sec,.hero{scroll-margin-top:88px}
.sec{padding-block:clamp(52px,6vw,84px)}
.sec > .banner{margin-top:calc(clamp(52px,6vw,84px) * -1);margin-bottom:clamp(24px,3vw,40px)}
.sec-bone{background:var(--bone);color:var(--tinta)}
.sec-tinta{background:var(--tinta) url(assets/img/chalk-grain.png) repeat;background-blend-mode:overlay;color:var(--bone)}
.sec-rojo{background:var(--rojo);color:var(--bone)}
.sec-verde{background:var(--verde);color:var(--bone)}
.sec-rojo .olho,.sec-verde .olho{color:var(--bone-2)}
.sec-tinta .olho{color:var(--neon)}
.sec-tinta a:not(.btn){color:var(--neon)}
.sec-rojo a:not(.btn),.sec-verde a:not(.btn){color:var(--bone)}
.sec-bone a:not(.btn){color:var(--rojo-ink)}
.sec-topo{max-width:52rem;margin-bottom:clamp(32px,4vw,48px)}
.sec-topo h2{margin-bottom:1rem}
.sec-rojo .sec-lede,.sec-verde .sec-lede{color:var(--bone-2)}

/* photographs. The masters are 1080px phone snaps, so no tile is ever
   blown past what its own pixels carry. What makes them read as generous
   is the flat colour they sit on and the weight of the caption rules —
   not scale. */
.foto{margin:0}
/* Every tile carries the widest CSS width its own master can still cover at
   2x — half the master, to the pixel. This is a property of the photograph,
   not of a breakpoint, so it lives here and not in a media query: no layout
   change anywhere can quietly blow a 1080px phone snap past its pixels. */
.foto img{width:100%;border-bottom:5px solid var(--naranja)}
.hero-foto img{max-width:700px}
.sala-fotos .foto img{max-width:540px}
.foto-tacos img{max-width:540px}
.mosaico .foto:nth-child(1) img{max-width:540px}
.mosaico .foto:nth-child(2) img{max-width:335px}
.mosaico .foto:nth-child(3) img{max-width:315px}
.foto-drinks img{max-width:400px}
.foto-copa img{max-width:250px}
.foto-sacola img{max-width:440px}
.foto-fachada img{max-width:500px}
.foto figcaption{
  margin-top:.6rem;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;line-height:1.35;
}
.sec-bone .foto figcaption{color:var(--tinta-2)}
.sec-rojo .foto figcaption,.sec-verde .foto figcaption,.sec-tinta .foto figcaption{color:var(--bone-2)}

/* ── rodízio ──────────────────────────────────────────────────────── */
.rod-grade{
  display:grid;grid-template-columns:minmax(0,1fr) 460px;
  gap:clamp(24px,3vw,40px);align-items:start;
}
.gostos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gostos li{
  background:var(--bone);color:var(--tinta);
  padding:20px 20px 22px;
  display:flex;flex-direction:column;gap:.6rem;
  border-bottom:6px solid var(--verde);
}
.gostos li:nth-child(2n){border-bottom-color:var(--naranja)}
.gosto-n{
  font-family:Chango,Impact,sans-serif;font-size:1.16rem;line-height:1.04;
  text-transform:uppercase;color:var(--rojo-ink);
}
.gosto-t{font-size:.95rem;line-height:1.45;color:var(--tinta-2)}

.mosaico{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vw,40px);align-items:start;
}
.mosaico .foto img{aspect-ratio:5/3;object-fit:cover}
.nota{background:var(--tinta);color:var(--bone);padding:22px 22px 24px;height:100%}
.nota h3{color:var(--neon);margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.nota p{margin:0;font-size:.94rem;line-height:1.5;color:var(--bone-2)}

.rod-fecho{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;
  margin:clamp(28px,3.5vw,44px) 0 0;padding-top:26px;
  border-top:2px solid rgba(243,230,199,.3);
  font-size:1.05rem;font-weight:500;color:var(--bone);
}
.rod-fecho .btn{flex:0 0 auto}

/* ── a sala ───────────────────────────────────────────────────────── */
.sala-grade{
  display:grid;grid-template-columns:520px minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.sala-fotos{display:grid;gap:14px}
.sala-fotos .foto:first-child img{border-bottom-color:var(--rojo)}
.sala-texto h2{color:var(--rojo-ink);margin-bottom:1.2rem}
.sala-texto blockquote{
  margin:0 0 1.4rem;padding-left:20px;border-left:5px solid var(--verde);
  font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.42;font-weight:500;
}
.sala-texto blockquote p{margin:0}
.assinatura{
  margin:1.6rem 0 0;font-family:Chango,Impact,sans-serif;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.15;
  text-transform:uppercase;color:var(--verde-ink);
}

/* ── bebidas ──────────────────────────────────────────────────────── */
.beb-grade{
  display:grid;grid-template-columns:minmax(0,1fr) 400px 250px;
  gap:clamp(24px,3vw,40px);align-items:end;
}
.beb-texto h2{color:var(--bone);margin-bottom:1rem}
.beb-texto .sec-lede{color:var(--neon);margin-bottom:1rem}
.beb-texto p{color:var(--bone-2);max-width:32ch}
.beb-texto .btn{margin-top:.6rem}
.foto-copa img{border-bottom-color:var(--neon)}

/* ── pedidos ──────────────────────────────────────────────────────── */
.ped-grade{
  display:grid;grid-template-columns:minmax(0,1fr) 280px;
  gap:clamp(28px,4vw,56px);align-items:start;
}
@media (min-width:901px){.foto-sacola{margin-top:2.6rem}}
.ped-texto h2{margin-bottom:1rem}
.ped-texto p{color:var(--bone-2);max-width:40ch}
.ped-lista{display:grid;gap:0;margin:1.4rem 0 1.8rem;max-width:44ch;border-top:2px solid rgba(243,230,199,.28)}
.ped-lista li{padding:12px 0;border-bottom:2px solid rgba(243,230,199,.28);font-size:.95rem;line-height:1.4;color:var(--bone-2)}
.ped-lista span{
  display:block;font-weight:600;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bone);margin-bottom:.25rem;
}
.ped-texto .btn{margin:0 0 1.4rem}
.ped-nota{font-size:.95rem}
.foto-sacola img{border-bottom-color:var(--bone)}
/* The green panel is the lightest ground of the three colour panels, so its
   secondary text needs a cream one stop brighter to clear AA with margin. */
.sec-verde .olho,.sec-verde p,.sec-verde .foto figcaption,.sec-verde .ped-lista li{color:var(--bone-3)}

/* ── onde ─────────────────────────────────────────────────────────── */
.onde-grade{
  display:grid;grid-template-columns:460px minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.onde-texto h2{color:var(--rojo-ink);margin-bottom:1.4rem}
.foto-fachada img{border-bottom-color:var(--verde)}
.fatos{display:grid;gap:18px}
.fatos dt{
  font-weight:600;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:.35rem;color:var(--verde-ink);
}
.fatos dd{font-size:1.06rem;line-height:1.4;font-weight:500}

/* ── footer ───────────────────────────────────────────────────────── */
.rodape{
  background:var(--tinta) url(assets/img/chalk-grain.png) repeat;
  background-blend-mode:overlay;color:var(--bone);
}
.rodape-in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(28px,4vw,56px);align-items:start;
  padding-top:clamp(28px,3.5vw,44px);padding-bottom:clamp(40px,5vw,64px);
}
.rodape-marca img{width:120px;height:auto}
.rodape-nome{
  margin:.9rem 0 .2rem;font-family:Chango,Impact,sans-serif;font-size:1.1rem;
  line-height:1.05;text-transform:uppercase;max-width:8ch;
}
.rodape-cat{margin:0;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bone-2)}
.fatos-rodape dt{color:var(--neon)}
.fatos-rodape dd,.fatos-rodape a{color:var(--bone)}
.rodape-links{display:grid;gap:12px;justify-items:start}
.rodape-links a{
  color:var(--neon);font-weight:600;font-size:.86rem;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;border-bottom:2px solid transparent;
}
.rodape-links a:hover{border-bottom-color:currentColor}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1120px){
  .hero-in{grid-template-columns:minmax(0,1fr) 520px}
  .rod-grade{grid-template-columns:minmax(0,1fr) 360px}
  .sala-grade{grid-template-columns:400px minmax(0,1fr)}
  .beb-grade{grid-template-columns:minmax(0,1fr) 320px 200px}
  .onde-grade{grid-template-columns:380px minmax(0,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .topo-cta{margin-left:auto}
  .hero-in{
    grid-template-columns:minmax(0,1fr);
    padding-inline:var(--pad);
    max-width:var(--wrap);
  }
  .hero-texto{max-width:none}
  .rod-grade{grid-template-columns:minmax(0,1fr)}
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sala-grade,.onde-grade,.ped-grade{grid-template-columns:minmax(0,1fr)}
  /* Photo tiles never widen past what their own 1080px masters can cover at
     2x, so the columns change instead of the pictures getting soft. */
  .mosaico{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nota{grid-column:1 / -1}
  .beb-grade{grid-template-columns:320px 250px;justify-content:start;align-items:start}
  .beb-texto{grid-column:1 / -1}
  .rodape-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rodape-marca{grid-column:1 / -1}
  .papel-w{display:none}
  .papel-n{display:block}
}
@media (max-width:560px){
  body{font-size:16px}
  .topo-in{min-height:66px;gap:12px}
  .lockup-nome{font-size:.8rem}
  .topo-cta{padding:10px 14px;font-size:.8rem}
  .gostos{grid-template-columns:minmax(0,1fr)}
  .mosaico{grid-template-columns:minmax(0,1fr)}
  .beb-grade{grid-template-columns:minmax(0,1fr)}
  .rodape-in{grid-template-columns:minmax(0,1fr)}
  .cta-linha .btn{width:100%;text-align:center}
  .rod-fecho{display:block}
  /* the button gets its own line so the sentence can't leave a word beside it */
  .rod-fecho .btn{display:block;width:max-content;max-width:100%;margin-top:18px}
}

/* JS enhancement hooks — the page is complete without them. */
.topo.is-rolado{box-shadow:0 8px 0 rgba(23,20,15,.18)}
.nav a.is-atual{color:var(--neon);border-bottom-color:var(--neon)}

@media (max-width:400px){
  /* The header lockup and the persistent CTA are both fixed-width; below 400
     they need to give ground or the row pushes the document 3px wide. */
  .topo-in{gap:10px}
  .lockup{min-width:0}
  .lockup img{width:42px;height:33px}
  .lockup-nome{font-size:.72rem}
  .topo-cta{padding:9px 12px;font-size:.75rem}
}