/* food-premium-02 — Kronos Premium Engine v1 (alimentação).
   Um sistema, várias identidades: paleta (tokens), tipografia (data-type), forma (data-shape), hero
   (data-hero: photo | type | graphic) e bloco de contato (data-contact) vêm do config/client.js.
   :root = variante noir; [data-variant] traz as outras (o Studio extrai estes tokens como paleta padrão).
   Fontes OFL locais (assets/fonts/LICENSE-*); cada @font-face só é baixada se a família for usada. */

@font-face { font-family: "Anton"; src: url("./fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil"; src: url("./fonts/big-shoulders-stencil-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("./fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("./fonts/fraunces-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("./fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("./fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./fonts/manrope-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ------------------------------------------------------------------ tokens: cor */
:root {
  --bg: #141210;
  --surface: #1e1b18;
  --ink: #f3ede3;
  --muted: #a79f94;
  --accent: #d9c9a3;
  --accent-ink: #141210;
  --line: color-mix(in srgb, var(--ink) 15%, transparent);
  --gutter: clamp(18px, 5vw, 72px);
  --max: 1360px;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
}
[data-variant="fresh"] { --bg: #fff4ec; --surface: #ffe3d3; --ink: #2b1b3d; --muted: #6e5c7a; --accent: #e8466f; --accent-ink: #fff; }
[data-variant="artesanal"] { --bg: #f3e9da; --surface: #e8d8c0; --ink: #2e1f14; --muted: #6f5a47; --accent: #6b3e26; --accent-ink: #fff6ea; }

/* ------------------------------------------------------------------ tokens: tipografia (data-type) */
[data-type="letreiro"] { --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif; --d-weight: 400; --d-case: uppercase; --d-lead: .84; --d-track: -.005em; --voice: italic 400 1em/1.12 "Instrument Serif", Georgia, serif; }
[data-type="estencil"] { --display: "Big Shoulders Stencil", "Arial Narrow", Impact, sans-serif; --d-weight: 800; --d-case: uppercase; --d-lead: .9; --d-track: .01em; --voice: 600 .78em/1.3 var(--sans); }
[data-type="editorial"] { --display: "Fraunces", Georgia, serif; --d-weight: 600; --d-case: none; --d-lead: .9; --d-track: -.025em; --voice: italic 500 1em/1.15 "Fraunces", Georgia, serif; }
[data-type="grotesco"] { --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif; --d-weight: 800; --d-case: none; --d-lead: .86; --d-track: -.04em; --voice: italic 400 1.05em/1.12 "Instrument Serif", Georgia, serif; }

/* ------------------------------------------------------------------ tokens: forma (data-shape) */
[data-shape="reto"] { --r-sm: 0; --r-md: 0; --r-btn: 0; --r-frame: 0; }
[data-shape="suave"] { --r-sm: 4px; --r-md: 14px; --r-btn: 6px; --r-frame: 18px; }
[data-shape="redondo"] { --r-sm: 10px; --r-md: 26px; --r-btn: 999px; --r-frame: 999px 999px 28px 28px; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p, dl, dd, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent-fill, var(--accent)); color: var(--accent-ink); padding: 10px 14px; z-index: 50; font-weight: 800; }
.skip:focus { left: 8px; }
.display { font-family: var(--display); font-weight: var(--d-weight); text-transform: var(--d-case); letter-spacing: var(--d-track); }

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-btn); font: 800 1rem/1.15 var(--sans); text-decoration: none; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn-solid { background: var(--accent-fill, var(--accent)); color: var(--accent-ink); }
.btn-solid:hover { background: var(--ink); color: var(--bg); }
.btn-line { border: 2px solid color-mix(in srgb, var(--ink) 32%, transparent); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }

/* ------------------------------------------------------------------ topo */
.top { display: flex; align-items: center; gap: 28px; max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter); }
.wordmark { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; text-decoration: none; font: var(--d-weight) 1.45rem/1 var(--display); text-transform: var(--d-case); letter-spacing: var(--d-track); color: var(--ink); }
.wordmark img { height: 40px; width: auto; }
.wordmark.has-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wordmark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-nav { display: flex; gap: 26px; font-weight: 600; font-size: .95rem; }
.top-nav a { text-decoration: none; color: var(--muted); }
.top-nav a:hover { color: var(--ink); }
.top-cta { min-height: 42px; padding: 0 20px; flex: none; }

/* ------------------------------------------------------------------ hero: partes comuns */
.hero { --name-share: .5; max-width: var(--max); margin: 0 auto; padding: clamp(8px, 2.4vw, 32px) var(--gutter) clamp(56px, 7vw, 104px); }
.hero[data-hero="type"] { --name-share: .56; }
.hero[data-hero="graphic"] { --name-share: .36; }
/* Placa "Hoje" (situação real calculada dos horários): cada composição liga com --plate e, quando liga,
   esconde o "Hoje" do ledger com --led (nunca os dois). */
.hero-plate { display: var(--plate, none); position: relative; z-index: 2; min-width: 0; }
#led-status { display: var(--led, block); }
.plate-label { font-size: .82rem; font-weight: 800; color: var(--muted); }
.plate-head { margin-top: 6px; font: var(--d-weight) clamp(1.7rem, 2.6vw, 2.5rem)/1 var(--display); text-transform: var(--d-case); letter-spacing: var(--d-track); }
.hero-plate.is-open .plate-head { color: var(--accent-text, var(--accent)); }
.plate-detail { margin-top: 6px; font-weight: 600; }
.hero-kicker { color: var(--muted); font-weight: 600; font-size: 1.05rem; margin-bottom: clamp(10px, 1.6vw, 20px); }
.hero-text { min-width: 0; }
.hero-name { margin: 0; font-family: var(--display); font-weight: var(--d-weight); text-transform: var(--d-case); letter-spacing: var(--d-track); line-height: var(--d-lead); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.n-line { display: block; white-space: nowrap; }
.hero-name.is-wrapped .n-line { white-space: normal; }
.n-cat { display: block; margin-top: .55em; font: 600 clamp(.95rem, 1.5vw, 1.25rem)/1.2 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--muted); }
.hero-line { margin-top: clamp(16px, 2vw, 26px); font: var(--voice); font-size: clamp(1.35rem, 2.4vw, 2.2rem); max-width: 30ch; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-credit { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.hero-bar { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 22px 40px; margin-top: clamp(26px, 3.4vw, 44px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ledger { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end; }
.ledger > div { min-width: 0; }
.ledger dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.ledger dd { font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.ledger .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; align-self: center; }
#led-status.is-open .dot { background: var(--accent-fill, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.proof-score { font: var(--d-weight) 1.7rem/1 var(--display); letter-spacing: var(--d-track); color: var(--accent-text, var(--accent)); }
.proof-text { color: var(--muted); font-weight: 400; }
.hero-note { margin-top: 14px; color: var(--muted); font-size: .82rem; }

/* ---------- estratégia TIPOGRÁFICA MONUMENTAL: o nome é a imagem */
.hero[data-hero="type"] .hero-name { font-size: clamp(4.25rem, 15.5vw, 16.5rem); }
.hero[data-hero="type"] .hero-bar { padding-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--line); }

/* ---------- estratégia FOTOGRÁFICA EDITORIAL: nome + foto autorizada em moldura */
.hero[data-hero="photo"] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text photo" "bar photo" "note photo"; column-gap: clamp(32px, 5vw, 88px); align-items: end; }
.hero[data-hero="photo"] .hero-stage { display: contents; }
.hero[data-hero="photo"] .hero-text { grid-area: text; align-self: end; }
.hero[data-hero="photo"] .hero-name { font-size: clamp(3.6rem, 9vw, 10rem); }
.hero[data-hero="photo"] .hero-photo { grid-area: photo; align-self: stretch; }
.hero[data-hero="photo"] .hero-photo img { aspect-ratio: 4 / 5; height: auto; border-radius: var(--r-frame); background: var(--surface); }
.hero[data-hero="photo"] .hero-bar { grid-area: bar; flex-direction: column; align-items: flex-start; }
.hero[data-hero="photo"] .hero-note { grid-area: note; }

/* ---------- estratégia GRÁFICA CONCEITUAL: painel com motivo original (selo | toldo | azulejo) */
.hero[data-hero="graphic"] .hero-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-md); background: var(--surface); padding: clamp(36px, 6vw, 88px) clamp(24px, 5vw, 72px); min-height: clamp(380px, 46vw, 600px); display: flex; align-items: center; }
.hero[data-hero="graphic"] .hero-text { position: relative; z-index: 2; width: 62%; }
.hero[data-hero="graphic"] .hero-name { font-size: clamp(3.6rem, 9.4vw, 10.5rem); }
.hero-motif { position: absolute; z-index: 1; pointer-events: none; }

/* selo: carimbo circular com o nome e o lugar (texto real) */
.hero[data-motif="selo"] .hero-motif { right: clamp(16px, 4vw, 64px); top: 50%; translate: 0 -50%; width: min(36%, 460px); aspect-ratio: 1; }
.seal { width: 100%; height: 100%; overflow: visible; }
.seal-ring { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 2; }
.seal-core { fill: var(--accent-fill, var(--accent)); }
.seal-text { fill: var(--ink); font: var(--d-weight) 26px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.seal-initial { fill: var(--accent-ink); font: var(--d-weight) 150px var(--display); }
.is-ready .hero[data-motif="selo"] .seal-text { animation: seal-in 1.4s cubic-bezier(.2,.7,.2,1) both; transform-origin: 200px 200px; }
@keyframes seal-in { from { transform: rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* toldo: faixa listrada com borda em gomos (geométrica, não é a fachada) */
.hero[data-motif="toldo"] .hero-stage { padding-top: calc(clamp(70px, 9vw, 120px) + clamp(32px, 5vw, 72px)); align-items: flex-end; }
.hero[data-motif="toldo"] .hero-motif { left: 0; right: 0; top: 0; height: calc(clamp(70px, 9vw, 120px) + 18px);
  background: repeating-linear-gradient(90deg, var(--accent) 0 clamp(36px, 4vw, 56px), color-mix(in srgb, var(--accent) 12%, var(--bg)) clamp(36px, 4vw, 56px) clamp(72px, 8vw, 112px));
  -webkit-mask: radial-gradient(18px at 50% 100%, transparent 98%, #000) 0 0 / clamp(36px, 4vw, 56px) 100% repeat-x;
          mask: radial-gradient(18px at 50% 100%, transparent 98%, #000) 0 0 / clamp(36px, 4vw, 56px) 100% repeat-x; }
.hero[data-motif="toldo"] .hero-text { width: 100%; }

/* azulejo: campo de ladrilhos geométricos na lateral */
.hero[data-motif="azulejo"] .hero-motif { right: 0; top: 0; bottom: 0; width: 34%;
  --t: clamp(56px, 6vw, 88px);
  background:
    radial-gradient(circle at 0 0, var(--accent) 0 calc(var(--t) * .32), transparent calc(var(--t) * .32 + 1px)) 0 0 / var(--t) var(--t),
    radial-gradient(circle at 100% 100%, var(--accent) 0 calc(var(--t) * .32), transparent calc(var(--t) * .32 + 1px)) 0 0 / var(--t) var(--t),
    radial-gradient(circle at 50% 50%, transparent 0 calc(var(--t) * .18), color-mix(in srgb, var(--ink) 18%, transparent) calc(var(--t) * .18) calc(var(--t) * .18 + 2px), transparent calc(var(--t) * .18 + 3px)) 0 0 / var(--t) var(--t),
    color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }

/* ------------------------------------------------------------------ entrada: um único momento
   (a máscara tem folga vertical para não cortar acentos e descendentes) */
.is-ready .hero-name.is-intro .n-line { animation: reveal 1s cubic-bezier(.65,0,.35,1) both; }
.is-ready .hero-name.is-intro .n-line:nth-child(2) { animation-delay: .12s; }
.is-ready .hero-name.is-intro .n-line:nth-child(3) { animation-delay: .24s; }
@keyframes reveal { from { clip-path: inset(-.4em 100% -.4em -.1em); } to { clip-path: inset(-.4em -.1em -.4em -.1em); } }

/* ------------------------------------------------------------------ seções */
main > section:not(.hero) { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); border-top: 1px solid var(--line); }
.sec-title { margin: 0; font: var(--d-weight) clamp(2.9rem, 6.6vw, 5.8rem)/var(--d-lead) var(--display); text-transform: var(--d-case); letter-spacing: var(--d-track); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 5vw, 60px); }
.sec-lede { font-size: clamp(1.12rem, 1.7vw, 1.4rem); line-height: 1.45; max-width: 46ch; }
.sec-note { margin-top: 20px; color: var(--muted); font-size: .9rem; }
.sec-head .sec-note { margin-top: 0; }

/* texto institucional (só quando fornecido) */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 5vw, 80px); align-items: start; }
.intro-text { font: var(--voice); font-size: clamp(1.45rem, 2.5vw, 2.15rem); max-width: 34ch; white-space: pre-line; }

/* galeria (fotos autorizadas): composição pela quantidade */
.gallery-track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.g-item { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface); grid-column: span 4; aspect-ratio: 4 / 5; }
.g-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-track[data-count="1"] .g-item { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.gallery-track[data-count="2"] .g-item { grid-column: span 6; aspect-ratio: 4 / 3; }
.gallery-track[data-count="3"] .g-1 { grid-column: span 7; aspect-ratio: auto; grid-row: span 2; }
.gallery-track[data-count="3"] .g-2, .gallery-track[data-count="3"] .g-3 { grid-column: span 5; aspect-ratio: 5 / 3; }
.g-credit { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: var(--r-sm); font-size: .75rem; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--ink); }

/* cardápio (somente verificado) */
.menu-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(32px, 6vw, 96px); }
.m-item { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.m-name { font-weight: 800; font-size: 1.12rem; }
.m-price { font: var(--d-weight) 1.35rem/1 var(--display); letter-spacing: var(--d-track); color: var(--accent-text, var(--accent)); }
.m-desc { grid-column: 1 / -1; color: var(--muted); font-size: .98rem; }

/* horários: linha do tempo */
.timeline { --c1: 11rem; --c3: 11rem; }
.timeline.has-split { --c3: 15.5rem; }
.tl-scale { position: relative; height: 26px; margin: 0 var(--c3) 0 var(--c1); }
.tick { position: absolute; bottom: 0; translate: -50% 0; font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tick::after { content: ""; display: block; width: 1px; height: 6px; margin: 4px auto 0; background: var(--line); }
.tick:not(.is-label)::after { height: 4px; }
.tl-days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tl-day { display: grid; grid-template-columns: var(--c1) minmax(0, 1fr) var(--c3); align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); }
.tl-name { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.tl-tag { font-size: .78rem; font-weight: 800; background: var(--accent-fill, var(--accent)); color: var(--accent-ink); border-radius: var(--r-sm); padding: 3px 8px; }
.tl-track { position: relative; height: 12px; border-radius: var(--r-sm); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n, 8) - 1px), var(--line) calc(100% / var(--n, 8) - 1px) calc(100% / var(--n, 8))); }
.tl-bar { position: absolute; top: 0; bottom: 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--ink) 55%, var(--bg)); }
.tl-val { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.is-today .tl-name { color: var(--accent-text, var(--accent)); }
.is-today .tl-bar { background: var(--accent); height: 18px; top: -3px; bottom: auto; }
.is-closed .tl-name, .is-closed .tl-val { color: var(--muted); }

/* como chegar */
.where-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 72px); align-items: center; margin-top: clamp(28px, 4vw, 48px); }
.where-grid:has(.where-number[hidden]) { grid-template-columns: 1fr; }
.where-number { font: var(--d-weight) clamp(8rem, 22vw, 20rem)/.8 var(--display); letter-spacing: var(--d-track); color: transparent; -webkit-text-stroke: 2px var(--accent); }
.where-address { font: var(--d-weight) clamp(2.2rem, 4.6vw, 4.2rem)/.98 var(--display); font-style: normal; text-transform: var(--d-case); letter-spacing: var(--d-track); }
.where-sub { margin-top: 16px; color: var(--muted); font-size: 1.12rem; }
.where-body .btn { margin-top: 30px; }

/* contato: bloco de fechamento */
main > section.contact { border-top: 0; }
[data-contact="destaque"] .contact { background: var(--accent-fill, var(--accent)); color: var(--accent-ink); box-shadow: 0 0 0 100vmax var(--accent-fill, var(--accent)); clip-path: inset(0 -100vmax); }
[data-contact="superficie"] .contact { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
[data-contact="destaque"] .contact :focus-visible { outline-color: var(--accent-ink); }
[data-contact="destaque"] .contact .btn-solid { background: var(--accent-ink); color: var(--accent-fill, var(--accent)); }
.contact-number { display: inline-block; max-width: 100%; margin-top: 18px; font: var(--d-weight) clamp(3.2rem, 10.5vw, 10rem)/1.05 var(--display); letter-spacing: var(--d-track); text-decoration: none; white-space: nowrap; }
.contact-number:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.contact-hint { display: none; margin-top: 8px; font-weight: 600; opacity: .85; }
.contact-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.social { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; font-weight: 600; }
.social a { text-underline-offset: 5px; }

/* rodapé */
.foot { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 56px; display: grid; gap: 6px; color: var(--muted); font-size: .88rem; }
.foot-name { font: var(--d-weight) 1.5rem/1 var(--display); text-transform: var(--d-case); letter-spacing: var(--d-track); color: var(--ink); margin-bottom: 6px; }
.foot-notice { margin-top: 6px; }

.dock { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-ready .hero-name.is-intro .n-line, .is-ready .hero[data-motif="selo"] .seal-text { animation: none; }
  .btn { transition: none; }
}

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1100px) {
  .hero[data-hero="graphic"] .hero-text { width: 66%; }
  .hero[data-motif="azulejo"] .hero-motif { width: 28%; }
}
@media (max-width: 900px) {
  .top-nav { display: none; }
  .hero[data-hero="photo"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bar" "photo" "note"; }
  .hero[data-hero="photo"] .hero-photo { margin-top: 32px; max-width: 520px; }
  .hero[data-hero="photo"] .hero-name { font-size: clamp(3.4rem, 15vw, 7rem); }
  .hero[data-hero="graphic"] .hero-stage { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero[data-hero="graphic"] .hero-text { width: 100%; }
  .hero[data-motif="selo"] .hero-motif { position: relative; right: auto; top: auto; translate: none; width: min(62%, 260px); margin: 32px 0 0 auto; order: 2; }
  .hero[data-motif="azulejo"] .hero-stage { padding-top: calc(clamp(72px, 18vw, 110px) + 32px); }
  .hero[data-motif="azulejo"] .hero-motif { left: 0; right: 0; bottom: auto; width: auto; height: clamp(72px, 18vw, 110px); border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
  .sec-head, .intro, .where-grid { grid-template-columns: 1fr; }
  .where-number { font-size: clamp(6.5rem, 32vw, 12rem); }
  .menu-list { columns: 1; }
  .timeline { --c1: 7.5rem; --c3: 9rem; }
  .timeline.has-split { --c3: 13rem; }
  .gallery-track { grid-template-columns: 1fr 1fr; }
  .gallery-track .g-item, .gallery-track[data-count] .g-item { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 5; }
  .gallery-track[data-count="1"] .g-item, .gallery-track[data-count="3"] .g-1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .hero { --name-share: .4; }
  .hero[data-hero="type"] { --name-share: .46; }
  .hero[data-hero="graphic"] { --name-share: .26; }
  body { font-size: 1rem; }
  .top { padding-block: 12px; gap: 16px; }
  .wordmark { font-size: 1.25rem; }
  .hero-kicker { font-size: .98rem; }
  .hero[data-hero="type"] .hero-name { font-size: clamp(3.2rem, 19vw, 6.5rem); }
  .hero[data-hero="graphic"] .hero-name { font-size: clamp(3rem, 15vw, 5.5rem); }
  .hero[data-hero="graphic"] .hero-stage { padding: 36px 22px 32px; }
  .hero[data-motif="toldo"] .hero-stage { padding-top: calc(clamp(70px, 9vw, 120px) + 34px); }
  .hero[data-motif="azulejo"] .hero-stage { padding-top: calc(clamp(72px, 18vw, 110px) + 30px); }
  .hero[data-motif="selo"] .hero-motif { width: min(38vw, 170px); margin-top: 22px; }
  .hero-line { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .hero-bar { gap: 20px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .ledger { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec-title { font-size: clamp(2.6rem, 14vw, 4rem); }
  .timeline { --c1: 0; --c3: 0; }
  .tl-scale { margin: 0; }
  .tl-day { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 10px; padding: 14px 0; }
  .tl-name { grid-column: 1; grid-row: 1; }
  .tl-val { grid-column: 2; grid-row: 1; }
  .tl-track { grid-column: 1 / -1; grid-row: 2; }
  .contact-number { font-size: clamp(2.4rem, 12.6vw, 4rem); }
  .contact-hint { display: block; }
  .gallery-track { grid-template-columns: 1fr; }
  .gallery-track .g-item, .gallery-track[data-count] .g-item, .gallery-track[data-count="3"] .g-1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  body.has-dock { padding-bottom: 84px; }
  .dock {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; min-height: 56px;
    align-items: center; justify-content: center; border-radius: var(--r-btn); background: var(--accent-fill, var(--accent)); color: var(--accent-ink);
    font-weight: 800; text-decoration: none; box-shadow: 0 10px 30px rgb(0 0 0 / .45);
    transform: translateY(160%); transition: transform .25s ease;
  }
  .dock.is-on { transform: none; }
  .dock[hidden] { display: none !important; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .dock { transition: none; } }

/* ==================================================================================================
   COMPOSIÇÕES (direction.composition) — v2.1
   Uma composição é um pacote de direção de arte reutilizável: muda o hero E o tratamento das seções
   (títulos, divisórias, linha do tempo, endereço, contato, botões). Só usa os tokens de cor/tipografia/forma,
   então funciona com qualquer paleta. Escolha por evidência (README → "Escolher a direção").
   ================================================================================================== */

/* ---------------------------------------------------------------- motivo CHAPA (corrugado, galpão/contêiner)
   Painel de chapa ondulada com trilhos e cantoneiras: linguagem de galpão, contêiner, oficina, garagem,
   mercado. Genérico e geométrico — não representa a fachada de ninguém. */
.hero[data-motif="chapa"] .hero-stage {
  --rail: color-mix(in srgb, var(--surface) 52%, #000);
  border-block: clamp(10px, 1.1vw, 16px) solid var(--rail);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  padding-inline: clamp(36px, 5.5vw, 96px);
}
.hero[data-motif="chapa"] .hero-motif {
  inset: 0; --rib: clamp(22px, 2.3vw, 34px);
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--surface) 62%, #000) 0 1px,
    color-mix(in srgb, var(--surface) 90%, var(--ink)) 1px calc(var(--rib) * .2),
    var(--surface) calc(var(--rib) * .2) calc(var(--rib) * .5),
    color-mix(in srgb, var(--surface) 78%, #000) calc(var(--rib) * .5) calc(var(--rib) * .7),
    var(--surface) calc(var(--rib) * .7) var(--rib));
}
.hero[data-motif="chapa"] .hero-motif::before, .hero[data-motif="chapa"] .hero-motif::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(12px, 1.4vw, 20px);
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 70%, var(--ink)) 0 0) top / 100% clamp(20px, 2.2vw, 30px) no-repeat,
    linear-gradient(color-mix(in srgb, var(--surface) 70%, var(--ink)) 0 0) bottom / 100% clamp(20px, 2.2vw, 30px) no-repeat,
    var(--rail);
}
.hero[data-motif="chapa"] .hero-motif::before { left: 0; }
.hero[data-motif="chapa"] .hero-motif::after { right: 0; }
.hero[data-motif="chapa"] .hero-text { flex: 1 1 auto; width: auto; }
.hero[data-motif="chapa"] .hero-name { color: var(--accent-text, var(--accent)); }
.hero[data-motif="chapa"] .n-cat { color: var(--ink); letter-spacing: .32em; text-transform: uppercase; font-weight: 800; }

/* ================================================================ ASSINATURA (padrão neutro)
   Para qualquer comércio sem evidência de identidade: nome monumental + placa "Hoje" em coluna própria,
   régua de informação. Sóbria, editorial, nunca vazia. */
[data-comp="assinatura"] .hero[data-hero="type"] { --plate: block; --led: none; }
[data-comp="assinatura"] .hero[data-hero="type"] .hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text plate"; column-gap: clamp(32px, 4vw, 72px); align-items: end; }
[data-comp="assinatura"] .hero[data-hero="type"] .hero-text { grid-area: text; }
[data-comp="assinatura"] .hero[data-hero="type"] .hero-plate { grid-area: plate; width: clamp(190px, 17vw, 250px); padding-top: 18px; border-top: 4px solid var(--accent); margin-bottom: .4rem; }
[data-comp="assinatura"] .hero-plate .plate-head { font-size: clamp(1.9rem, 2.9vw, 2.8rem); }
[data-comp="assinatura"] .sec-title { position: relative; padding-top: 22px; }
[data-comp="assinatura"] .sec-title::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 4px; background: var(--accent); }

/* ================================================================ INDUSTRIAL
   Galpão, contêiner, food park, oficina, garagem, estação. Chapa corrugada no hero com placa de dados
   rebitada, estêncil, faixas de sinalização como divisórias, barras de horário em módulos. */
[data-comp="industrial"] .hero[data-hero="graphic"], [data-comp="industrial"] .hero[data-hero="type"] { --plate: block; --led: none; }
[data-comp="industrial"] .hero[data-hero="graphic"] { --name-share: .4; }
[data-comp="industrial"] .hero-plate {
  --rv: radial-gradient(circle, color-mix(in srgb, var(--ink) 45%, transparent) 0 2.5px, transparent 3px);
  order: 2; flex: none; width: clamp(220px, 21vw, 290px); padding: 22px 26px 24px;
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background:
    var(--rv) left 7px top 7px / 10px 10px no-repeat, var(--rv) right 7px top 7px / 10px 10px no-repeat,
    var(--rv) left 7px bottom 7px / 10px 10px no-repeat, var(--rv) right 7px bottom 7px / 10px 10px no-repeat,
    color-mix(in srgb, var(--bg) 88%, var(--ink));
  color: var(--ink);
}
[data-comp="industrial"] .plate-label { letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; }
[data-comp="industrial"] .plate-head { font-size: clamp(2rem, 3vw, 2.9rem); }
[data-comp="industrial"] .hero[data-hero="type"] .hero-stage { display: flex; align-items: flex-end; gap: clamp(28px, 4vw, 64px); }
[data-comp="industrial"] { --hazard: repeating-linear-gradient(-45deg, var(--accent) 0 12px, transparent 12px 24px); }
[data-comp="industrial"] main > section:not(.hero) { border-top: 0; position: relative; }
[data-comp="industrial"] main > section:not(.hero):not(.contact)::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 18px, transparent 18px 26px);
}
[data-comp="industrial"] .sec-title { display: flex; align-items: center; gap: .28em; }
[data-comp="industrial"] .contact .sec-title::before { display: none; }
[data-comp="industrial"] .sec-title::before { content: ""; flex: none; width: .5em; height: .5em; background: var(--hazard); border: 2px solid var(--accent); }
[data-comp="industrial"] .tl-track { height: 16px; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 0; }
[data-comp="industrial"] .tl-bar { border-radius: 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 55%, var(--bg)) 0 14px, transparent 14px 17px); }
[data-comp="industrial"] .is-today .tl-bar { height: 16px; top: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 17px); }
[data-comp="industrial"] .where-number { color: var(--accent-ink); -webkit-text-stroke: 0; background: var(--accent-fill, var(--accent)); padding: .08em .12em .02em; justify-self: start; line-height: .86; }
[data-comp="industrial"] .contact { padding-top: calc(clamp(64px, 9vw, 120px) + 18px); }
/* faixa de sinalização no topo do contato, de ponta a ponta (border-image-outset não gera rolagem) */
[data-comp="industrial"] .contact::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  border-image: repeating-linear-gradient(-45deg, var(--accent-ink) 0 14px, transparent 14px 28px) fill 0 / / 0 100vmax;
}
[data-comp="industrial"] .btn { letter-spacing: .02em; }

/* ================================================================ EDITORIAL (gastronômico)
   Bistrô, café, cozinha autoral, restaurante. Capa de revista: régua dupla, linha de data com a situação
   de hoje, nome serifado, títulos em itálico, cardápio com pontilhado. Brilha com foto autorizada. */
[data-comp="editorial"] .hero[data-hero="type"], [data-comp="editorial"] .hero[data-hero="graphic"] { --plate: block; --led: none; }
[data-comp="editorial"] .hero-stage { position: relative; border-top: 6px double var(--ink); padding-top: clamp(18px, 2vw, 26px); }
[data-comp="editorial"] .hero[data-hero="photo"] .hero-text { border-top: 6px double var(--ink); padding-top: 18px; }
[data-comp="editorial"] .hero[data-hero="photo"] .hero-stage { border-top: 0; }
[data-comp="editorial"] .hero-kicker { padding-bottom: clamp(12px, 1.4vw, 18px); border-bottom: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 44px); }
[data-comp="editorial"] .hero-plate { position: absolute; top: clamp(18px, 2vw, 26px); right: 0; display: var(--plate, none); text-align: right; }
[data-comp="editorial"] .hero-plate p { display: inline; margin: 0; font-size: 1.02rem; }
[data-comp="editorial"] .plate-label { font-weight: 600; }
[data-comp="editorial"] .plate-label::after { content: " · "; }
[data-comp="editorial"] .plate-head { font: var(--voice); font-size: 1.15rem; }
[data-comp="editorial"] .plate-detail::before { content: ", "; }
[data-comp="editorial"] .hero[data-hero="type"] .hero-name { font-size: clamp(4rem, 13vw, 14rem); }
[data-comp="editorial"] .hero[data-hero="type"] .hero-line { margin-left: auto; text-align: right; }
[data-comp="editorial"] .hero[data-hero="type"] .hero-bar { border-top-style: double; border-top-width: 6px; border-color: var(--line); }
[data-comp="editorial"][data-type="editorial"] .sec-title { font-style: italic; font-weight: 500; letter-spacing: -.02em; }
[data-comp="editorial"] main > section:not(.hero) { border-top: 6px double var(--line); }
[data-comp="editorial"] .m-item { border-bottom: 0; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: baseline; }
[data-comp="editorial"] .m-name { grid-column: 1; }
[data-comp="editorial"] .m-item::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 35%, transparent); transform: translateY(-.3em); }
[data-comp="editorial"] .m-price { grid-column: 3; grid-row: 1; }
[data-comp="editorial"] .tl-track { height: 2px; background: var(--line); }
[data-comp="editorial"] .tl-bar { top: -3px; bottom: auto; height: 8px; border-radius: 99px; }
[data-comp="editorial"] .is-today .tl-bar { top: -5px; height: 12px; }
[data-comp="editorial"] .where-number { -webkit-text-stroke: 1px var(--ink); font-style: italic; }
[data-comp="editorial"] .hero[data-hero="photo"] .hero-photo img { outline: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: 12px; }

/* ================================================================ ARTESANAL
   Padaria, confeitaria, café de bairro, doceria, massa caseira. Papel com textura de pontos, moldura
   pespontada, selo carimbado, sublinhado ondulado, formas arredondadas. */
[data-comp="artesanal"] .hero[data-hero="graphic"] .hero-stage {
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 0 1px, transparent 1.6px) 0 0 / 16px 16px, var(--surface);
}
[data-comp="artesanal"] .hero[data-hero="graphic"] .hero-stage::after {
  content: ""; position: absolute; inset: clamp(10px, 1.2vw, 16px); border: 2px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: calc(var(--r-md) - 8px); pointer-events: none; z-index: 1;
}
[data-comp="artesanal"] .hero[data-motif="selo"] .seal { rotate: -9deg; }
[data-comp="artesanal"] .hero[data-motif="selo"] .hero-motif { width: min(40%, 480px); }
[data-comp="artesanal"] .sec-title { text-decoration: underline wavy var(--accent); text-decoration-thickness: .045em; text-underline-offset: .2em; text-decoration-skip-ink: none; }
[data-comp="artesanal"] main > section:not(.hero) { border-top: 2px dashed var(--line); }
[data-comp="artesanal"] .tl-track { height: 18px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
[data-comp="artesanal"] .tl-bar, [data-comp="artesanal"] .is-today .tl-bar { border-radius: 99px; height: 18px; top: 0; }
[data-comp="artesanal"] .where-number { -webkit-text-stroke: 0; color: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
[data-comp="artesanal"] .contact { outline: 2px dashed color-mix(in srgb, var(--ink) 24%, transparent); outline-offset: -14px; }
[data-comp="artesanal"][data-contact="destaque"] .contact { outline-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }

/* ================================================================ VIBRANTE
   Sorveteria, açaí, pastelaria de feira, lanchonete jovem, doceria colorida. Bloco de cor cheia,
   adesivo "Hoje" girado, botões com sombra dura, títulos com marca-texto, faixas alternadas. */
[data-comp="vibrante"] .hero[data-hero="graphic"] { --plate: flex; --led: none; }
[data-comp="vibrante"] .hero[data-hero="graphic"] .hero-stage {
  background: var(--accent-fill, var(--accent)); color: var(--accent-ink);
  --paper: var(--bg);
  --ink: var(--accent-ink); --muted: var(--accent-ink); --line: color-mix(in srgb, var(--accent-ink) 30%, transparent);
}
[data-comp="vibrante"] .hero[data-hero="graphic"] .hero-motif { --accent: var(--paper); --surface: color-mix(in srgb, var(--accent-fill, var(--accent)) 86%, var(--accent-ink)); --bg: var(--accent-fill, var(--accent)); }
[data-comp="vibrante"] .hero[data-hero="graphic"] .hero-kicker { font-weight: 800; }
[data-comp="vibrante"] .hero-plate {
  position: absolute; z-index: 3; width: clamp(150px, 13vw, 184px); aspect-ratio: 1; border-radius: 50%;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px;
  background: var(--bg); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  rotate: -9deg; right: calc(34% - clamp(75px, 6.5vw, 92px)); bottom: clamp(26px, 4vw, 56px);
}
[data-comp="vibrante"] .hero[data-motif="toldo"] .hero-plate { right: clamp(28px, 4vw, 64px); }
[data-comp="vibrante"] .plate-label { font-size: .74rem; color: var(--ink); }
[data-comp="vibrante"] .plate-head { font-size: clamp(1.25rem, 1.7vw, 1.6rem); margin-top: 4px; line-height: .95; }
[data-comp="vibrante"] .hero-plate.is-open .plate-head { color: var(--ink); }
[data-comp="vibrante"] .plate-detail { font-size: .86rem; margin-top: 4px; line-height: 1.2; }
[data-comp="vibrante"] .btn { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
[data-comp="vibrante"] .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
[data-comp="vibrante"] .btn-line { border-color: var(--ink); }
[data-comp="vibrante"] .sec-title { display: inline; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 38%, transparent) 58% 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-comp="vibrante"] .sec-head .sec-title, [data-comp="vibrante"] .where .sec-title, [data-comp="vibrante"] .contact .sec-title { justify-self: start; }
[data-comp="vibrante"] main > section:not(.hero) { border-top: 0; }
[data-comp="vibrante"] .hours { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
[data-comp="vibrante"] .tl-track { height: 20px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
[data-comp="vibrante"] .tl-bar, [data-comp="vibrante"] .is-today .tl-bar { top: 0; height: 20px; border-radius: 99px; }
[data-comp="vibrante"] .is-today .tl-bar { background: var(--accent); box-shadow: 3px 3px 0 var(--ink); }
[data-comp="vibrante"] .where-number { -webkit-text-stroke: 0; color: var(--accent-text, var(--accent)); }
[data-comp="vibrante"] .contact .sec-title { background: none; }
[data-comp="vibrante"][data-contact="destaque"] .contact .btn { border-color: var(--accent-ink); box-shadow: 4px 4px 0 var(--accent-ink); }

/* ---------------------------------------------------------------- composições: responsivo */
@media (max-width: 1100px) {
  [data-comp="vibrante"] .hero[data-motif="azulejo"] .hero-plate { right: calc(28% - 70px); }
}
@media (max-width: 900px) {
  [data-comp="assinatura"] .hero[data-hero="type"] { --plate: none; --led: block; }
  [data-comp="assinatura"] .hero[data-hero="type"] .hero-stage { display: block; }
  .hero[data-motif="chapa"] .hero-stage { padding: 40px clamp(30px, 6vw, 48px) 34px; gap: 26px; }
  [data-comp="industrial"] .hero-plate { width: 100%; padding: 16px 20px 18px; display: var(--plate, none); }
  [data-comp="industrial"] .hero[data-hero="type"] .hero-stage { flex-direction: column; align-items: stretch; }
  [data-comp="editorial"] .hero-plate { position: static; text-align: left; margin-bottom: 14px; }
  [data-comp="editorial"] .hero[data-hero="type"] .hero-line { margin-left: 0; text-align: left; }
  [data-comp="vibrante"] .hero-plate, [data-comp="vibrante"] .hero[data-motif] .hero-plate {
    position: relative; right: auto; bottom: auto; order: 3; align-self: flex-start; width: auto; aspect-ratio: auto;
    border-radius: 999px; flex-direction: row; flex-wrap: wrap; gap: 2px 8px; padding: 10px 18px; margin-top: 22px; rotate: -3deg; box-shadow: 4px 4px 0 var(--ink);
  }
  [data-comp="vibrante"] .hero-plate .plate-head { font-size: 1.15rem; margin: 0; }
  [data-comp="vibrante"] .hero-plate .plate-label, [data-comp="vibrante"] .hero-plate .plate-detail { margin: 0; align-self: center; }
}
@media (max-width: 640px) {
  [data-comp="industrial"] .hero[data-hero="graphic"] { --name-share: .25; }
  .hero[data-motif="chapa"] .hero-stage { padding: 30px 26px 24px; gap: 18px; }
  .hero[data-motif="chapa"] .n-cat { letter-spacing: .2em; }
  [data-comp="industrial"] .plate-head { font-size: 1.7rem; }
  [data-comp="industrial"] .hero-plate { display: var(--plate, none); flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 18px 14px; }
  [data-comp="industrial"] .hero[data-hero="graphic"], [data-comp="industrial"] .hero[data-hero="type"] { --plate: flex; }
  [data-comp="industrial"] .hero-plate .plate-label { flex-basis: 100%; }
  [data-comp="industrial"] .hero-plate .plate-head, [data-comp="industrial"] .hero-plate .plate-detail { margin-top: 2px; }
  [data-comp="vibrante"] .hero[data-hero="graphic"] { --name-share: .22; }
  [data-comp="artesanal"] .hero[data-hero="graphic"] .hero-stage::after { inset: 8px; }
}
@media (prefers-reduced-motion: reduce) { [data-comp="vibrante"] .btn { transition: none; } }
/* horários sobre a superfície: o dia de hoje usa a tinta (a etiqueta "hoje" já leva o destaque) */
[data-comp="vibrante"] .is-today .tl-name { color: var(--ink); font-weight: 800; }
.hero[data-motif="chapa"] .hero-stage { min-height: clamp(340px, 34vw, 500px); }
/* toldo sobre bloco de cor: varão escuro no topo para a faixa clara não se perder no fundo da página */
[data-comp="vibrante"] .hero[data-motif="toldo"] .hero-motif { border-top: clamp(6px, .7vw, 10px) solid color-mix(in srgb, var(--accent-fill, var(--accent)) 62%, #000); }