/* Mamma Donella: the shell. Base, type, grid, surfaces, the identity's shared components, header, phone menu,
   bottom bar, footer, 404 and legal page. Owner: shell (.orchestration/site-2026-10-09/contrato.md).
   Needs /assets/fonts/fonts.css and /assets/css/tokens.css (a copy of brand/tokens.css) loaded before it.
   Values come from the tokens; the components are the identity's (brand/padroes/padroes.css, componentes.css,
   brand/fotografia/molduras.css) with the asset paths of the site. Every page has its own CSS and never redefines
   a token; a new shared piece is asked from the lead. How to use each class: site/src/LEIA-ME.md.
   Terracota (the wall) carries no text and nothing black or dark grey, on it or touching it (Henrique, 9 Oct 2026). */

:root {
  --barra-h: 68px;            /* the phone bar: a 48 px button with 10 px above and below */
  --cabecalho-h: 64px;
  --wrap: calc(var(--md-s-container) + 2 * var(--md-s-gutter));
  --wrap-largo: calc(var(--md-s-container-wide) + 2 * var(--md-s-gutter));
  --wrap-estreito: calc(46rem + 2 * var(--md-s-gutter));
  --alvo: 44px;
  --alvo-lista: 44px;         /* footer links: 44 px on touch, 32 px with a mouse */
  --linha-creme: rgba(240, 233, 220, 0.3);
}
@media (min-width: 64em) { :root { --cabecalho-h: 76px; } }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--md-surface-main);       /* the overscroll below the castanho footer stays castanho */
  scrollbar-color: var(--md-brown) var(--md-cream);
  scroll-padding-top: var(--md-s-4);
}
/* below 64em the bar covers the bottom of the screen: anchors and focus stop above it */
@media (max-width: 63.99em) {
  html { scroll-padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px) + var(--md-s-3)); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  color: var(--md-text);
  font: 400 var(--md-t-body) / var(--md-lh-body) var(--md-font-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; display: block; overflow-x: clip; }

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
b, strong { font-weight: 600; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
h1, h2, h3 { font-family: var(--md-font-display); }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

a { color: var(--md-action); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.md-on-dark a:not(.md-btn), .md-on-main a:not(.md-btn) { color: inherit; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
button { font: inherit; color: inherit; }
button, .md-btn, .botao-ico { -webkit-user-select: none; user-select: none; }
input, select, textarea { font: inherit; font-size: max(16px, 1.0625rem); color: inherit; }

.num, .md-num, .md-price, time { font-variant-numeric: var(--md-numeric); }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* visually hidden, still read */
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* the skip link (brand/padroes/componentes.css): castanho fundo with cream letters (9,37:1); focus is a paper
   ring inside a castanho ring, visible on cream, castanho and terracota, nothing black */
.md-skip {
  position: absolute; left: var(--md-s-4); top: -100px; z-index: var(--md-z-skip-link);
  padding: 10px 16px; background: var(--md-brown-deep); color: var(--md-cream); font-weight: 600; text-decoration: none;
}
.md-skip:focus-visible { top: var(--md-s-4); outline: 3px solid var(--md-paper); outline-offset: 0; box-shadow: 0 0 0 5px var(--md-brown); }

/* Phosphor Bold, one weight (brand-brief.md, «Ícones") */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ---------- type ---------- */

.titulo { font: 400 var(--md-t-h1) / var(--md-lh-h1) var(--md-font-display); letter-spacing: var(--md-tr-h1); }
.titulo--display { font-size: var(--md-t-display); line-height: var(--md-lh-display); letter-spacing: var(--md-tr-display); }
.titulo .ln { display: block; }
.titulo .ln > span { display: inline-block; }
.h2 { font: 400 var(--md-t-h2) / var(--md-lh-h2) var(--md-font-display); letter-spacing: var(--md-tr-h2); }
.h3 { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.h4 { font: 600 var(--md-t-h4) / var(--md-lh-h4) var(--md-font-text); }
.lead { font-size: var(--md-t-lead); line-height: var(--md-lh-lead); max-width: 36em; }
.texto { max-width: var(--md-measure); }
/* the opening rhythm: more room above a title than under it, then the lead, then the actions */
.titulo + .lead, .titulo + p { margin-top: var(--md-s-5); }
.lead + .acoes, .texto + .acoes { margin-top: var(--md-s-6); }
.texto > * + * { margin-top: 1em; }
.nota { font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); }
.rotulo { font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; }
.credito { font: 400 var(--md-t-credit) / var(--md-lh-credit) var(--md-font-text); color: var(--md-text-muted); }
/* a value only the owner can give (copy.md, «[a preencher com o dono]»): visibly pending, never invented */
.pendente { font-style: italic; color: var(--md-text-muted); }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--md-s-gutter); }
.wrap--largo { max-width: var(--wrap-largo); }
.wrap--estreito { max-width: var(--wrap-estreito); }
.sec { padding-block: var(--md-s-section); }
.sec--curta { padding-block: var(--md-s-7); }
.pilha > * + * { margin-top: var(--pilha, var(--md-s-4)); }
.pilha--curta { --pilha: var(--md-s-2); }
.pilha--larga { --pilha: var(--md-s-5); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-s-4) var(--md-s-5); }
/* On a phone «Reservar mesa» lives in the bottom bar only: a reserve button in a page body carries .so-largo. */
@media (max-width: 63.99em) { .so-largo { display: none !important; } }
@media (min-width: 64em) { .so-estreito { display: none !important; } }

/* ---------- surfaces ----------
   cream is the page; paper a lighter sheet; castanho the main field (with .md-on-dark: cream text, focus, rules);
   terracota the wall (with .md-on-wall): no text, only castanho and cream pieces (the sign band, frames, the tile).
   Between a terracota field and anything black (#0a0303, #232121) there is always cream, paper or castanho. */
.campo--papel { background: var(--md-surface-alt); }
.campo--castanho { background: var(--md-surface-main); color: var(--md-text-inverse); }
.campo--parede { background: var(--md-surface-field); }

/* ---------- buttons and links (brand/padroes/componentes.css) ---------- */

/* Button: castanho, cream text, the house's hard shadow. Pressed, it meets the wall (the offset goes). */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 22px;
  border: 2px solid var(--md-ink); border-radius: var(--md-r-button);
  background: var(--md-action); color: var(--md-on-action);
  font: 600 1.0625rem / 1.2 var(--md-font-text); text-decoration: none; white-space: nowrap;
  box-shadow: var(--md-shadow-button);
  cursor: pointer;
  transition:
    transform var(--md-dur-press) var(--md-ease-out),
    box-shadow var(--md-dur-press) var(--md-ease-out),
    background-color var(--md-dur-hover) ease;
}
.md-btn .ico { width: 1.2em; height: 1.2em; }
@media (hover: hover) and (pointer: fine) {
  .md-btn:hover { background: var(--md-action-hover); transform: translate(-1px, -1px); box-shadow: var(--md-shadow-button-hover); }
  .md-btn--paper:hover { background: var(--md-surface); }
}
.md-btn:active { transform: translate(4px, 4px); box-shadow: var(--md-shadow-button-pressed); }
.md-btn:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 4px; }
.md-btn--paper { background: var(--md-paper); color: var(--md-ink); }
/* on the castanho field: a paper button with castanho text */
.md-on-dark .md-btn, .md-on-main .md-btn { background: var(--md-paper); color: var(--md-brown); border-color: var(--md-paper); }
/* terracota carries no buttons; if one ever sits there: paper, castanho text and border, castanho fundo shadow */
.md-on-field .md-btn, .md-on-wall .md-btn { background: var(--md-paper); color: var(--md-brown); border-color: var(--md-brown); }
@media (hover: hover) and (pointer: fine) {
  .md-on-dark .md-btn:hover, .md-on-main .md-btn:hover, .md-on-field .md-btn:hover, .md-on-wall .md-btn:hover { background: var(--md-cream); }
}
/* the second action on the castanho field: a cream outline, no shadow (identity page, «O site») */
.md-btn.md-btn--linha, .md-on-dark .md-btn.md-btn--linha { background: transparent; color: var(--md-cream); border-color: var(--md-cream); box-shadow: none; }
.md-btn.md-btn--linha:active { transform: none; background: var(--md-brown-deep); }
@media (hover: hover) and (pointer: fine) {
  .md-btn.md-btn--linha:hover, .md-on-dark .md-btn.md-btn--linha:hover { background: var(--md-brown-deep); transform: none; box-shadow: none; }
}
.md-btn[disabled], .md-btn[aria-disabled="true"] {
  background: var(--md-paper); color: var(--md-ink-muted); border-style: dashed; border-color: var(--md-ink-muted);
  box-shadow: none; transform: none; cursor: not-allowed;
}
.md-btn[aria-busy="true"] { cursor: progress; }
.md-btn[aria-busy="true"] .ico--roda { animation: md-spin 900ms linear infinite; }
@keyframes md-spin { to { transform: rotate(1turn); } }

/* A text link with an arrow: secondary actions inside a page («Ver a carta», «Ler as Regras da Casa»). */
.ligacao {
  display: inline-block; padding-block: 10px;   /* 44 px of target; a long label wraps with the arrow after its last word */
  font-weight: 600; color: var(--md-action);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.ligacao .ico { display: inline-block; width: 1.1em; height: 1.1em; margin-left: 0.35em; vertical-align: -0.2em; transition: transform var(--md-dur-hover) var(--md-ease-out); }
.ligacao:active { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) {
  .ligacao:hover { text-decoration-thickness: 2px; }
  .ligacao:hover .ico { transform: translateX(3px); }
}

/* An icon button: the full circle (forma: círculo só no selo, no símbolo, nos pinos e nos botões de ícone). */
.botao-ico {
  display: inline-grid; place-items: center; flex: none;
  width: var(--alvo); height: var(--alvo); padding: 0; border: 0; border-radius: var(--md-r-round);
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color var(--md-dur-hover) ease, transform var(--md-dur-press) var(--md-ease-out);
}
.botao-ico .ico { width: 26px; height: 26px; }
.botao-ico:active { transform: scale(0.94); background: var(--md-brown-deep); }
@media (hover: hover) and (pointer: fine) { .botao-ico:hover { background: var(--md-brown-deep); } }

/* ---------- ornaments (brand/padroes/padroes.css) ---------- */

/* Section rule: the short dashes of the seal's ring laid flat (brand/logo/md-anel.svg). mask-repeat: space keeps
   whole dashes at any width. Decorative: aria-hidden on the element. */
.md-rule-dots {
  display: block;
  height: var(--md-line-dash-thickness);
  margin-block: var(--md-s-7);
  border: 0;
  background: var(--md-rule-strong);
  -webkit-mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) space no-repeat;
          mask: url("/assets/img/padroes/filete-anel.svg?v=a06560a2") center / var(--md-line-dash-pitch) var(--md-line-dash-thickness) space no-repeat;
}
.md-on-field .md-rule-dots, .md-on-wall .md-rule-dots { --md-rule-strong: var(--md-brown); }
.md-on-dark .md-rule-dots { --md-rule-strong: var(--md-cream); }
.md-rule-dots.is-short { width: min(12rem, 60%); margin-inline: auto; }

/* Crossed peels: a small ornament (end of a section, an empty state, a short list marker). Takes the text colour. */
.md-peels {
  display: inline-block; width: 2.25rem; aspect-ratio: 81.39 / 72.52;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/logo/md-pas.svg?v=b4804a07") center / contain no-repeat;
          mask: url("/assets/img/logo/md-pas.svg?v=b4804a07") center / contain no-repeat;
}
.md-peels.is-small { width: 1.25rem; }
.md-section-end { display: flex; justify-content: center; margin-block: var(--md-s-8); color: var(--md-text); }

/* Brand label with the mini flag: «OSTERIA ■ COZINHA ITALIANA». Only in brand labels, never in a status line. */
.md-brand-label {
  display: inline-flex; align-items: center; gap: 0.7em;
  font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text);
  letter-spacing: var(--md-tr-label); text-transform: uppercase;
}
.md-flag { display: inline-block; width: 1.15em; height: 0.7em; flex: none; background: url("/assets/img/padroes/bandeira.svg?v=4ba7062b") center / 100% 100% no-repeat; }

/* Hydraulic tile band: the floor of Paço de Arcos in terracota and cream. Footer top edge and 404 only. */
.md-tile-band { height: clamp(40px, 6vw, 64px); background: var(--md-cream) url("/assets/img/padroes/mosaico.svg?v=d62207fc") left center / auto 100% repeat-x; }

/* Unavailable (Fechado, Esgotado, Cheio): muted words plus a hatch, never colour alone. The words sit in a <span>
   with their own patch of ground, so the hatch never lowers their contrast (6,12:1). */
.md-unavailable { color: var(--md-unavailable); background-image: repeating-linear-gradient(135deg, var(--md-rule) 0 1px, transparent 1px 7px); }
.md-unavailable > span { background: var(--md-surface); padding: 2px 6px; }

/* The wall and the sign: the terracota of the Massamá façade with the castanho band and the cream name. */
.md-wall-field { background: var(--md-surface-field); padding: var(--md-s-section) var(--md-s-gutter); display: grid; justify-items: center; }
.md-sign {
  display: grid; justify-items: center; gap: var(--md-s-3);
  width: min(100%, 46rem); padding: clamp(18px, 4vw, 32px) clamp(20px, 5vw, 48px);
  background: var(--md-brown); color: var(--md-cream); box-shadow: var(--md-shadow-button-wall);
}
.md-sign__name { display: block; width: min(100%, 30rem); height: auto; }
.md-sign .md-brand-label { color: var(--md-cream); }

/* The chalkboard: black board, wooden frame, cream Gloock. A real phrase of the house, one per page at most.
   It hangs on cream or paper, never on terracota nor against it (the board is #232121). */
.md-board {
  position: relative; max-width: 34rem;
  padding: clamp(28px, 6vw, 48px) clamp(24px, 6vw, 56px);
  background-color: var(--md-board);
  background-image:
    radial-gradient(120% 60% at 30% 20%, rgba(240, 233, 220, 0.06), transparent 60%),
    radial-gradient(90% 50% at 75% 85%, rgba(240, 233, 220, 0.045), transparent 65%);
  border: var(--md-line-board-frame) solid var(--md-brown);
  box-shadow: inset 0 0 0 1px rgba(10, 3, 3, 0.55), var(--md-shadow-frame);
  color: var(--md-cream); text-align: center;
  transform: rotate(var(--md-tilt, -0.6deg));
  --md-focus: var(--md-cream);
}
.md-board__title { margin: 0 0 var(--md-s-4); font: 400 var(--md-t-label) / 1.3 var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; opacity: 0.88; }
.md-board__lines { margin: 0; padding: 0; list-style: none; }
.md-board__line { display: block; font: 400 var(--md-t-h3) / 1.2 var(--md-font-display); text-wrap: balance; }
.md-board__line + .md-board__line { margin-top: var(--md-s-2); }
.md-board__line.is-small { font: 400 var(--md-t-lead) / 1.35 var(--md-font-display); }
.md-board__foot { margin-top: var(--md-s-5); display: flex; align-items: center; gap: var(--md-s-3); }
.md-board__foot .md-rule-dots { flex: 1; margin: 0; --md-rule-strong: var(--md-cream); opacity: 0.6; }
.md-board__foot .md-peels { color: var(--md-cream); }
@media (max-width: 480px) { .md-board { transform: rotate(var(--md-tilt-phone, -0.4deg)); } }

/* ---------- the wall of frames (brand/fotografia/molduras.css; rules in brand/fotografia/README.md) ---------- */

.md-frame { --md-tilt: 0deg; margin: 0; display: grid; gap: var(--md-s-2); justify-items: stretch; align-content: start; }
/* the frame body is what hangs: it tilts from its nail (top centre); the credit below stays level */
.md-frame__body { position: relative; display: block; transform: rotate(var(--md-tilt)); transform-origin: 50% 0; box-shadow: var(--md-shadow-frame); }
.md-frame__body img { display: block; width: 100%; height: auto; object-fit: cover; }
.md-frame.has-ratio .md-frame__body img, .md-frame[style*="--md-ratio"] .md-frame__body img { aspect-ratio: var(--md-ratio); }
.md-frame__credit { justify-self: end; max-width: 100%; margin-top: var(--md-s-2); font: 400 var(--md-t-credit) / var(--md-lh-credit) var(--md-font-text); color: var(--md-text-muted); text-align: right; }
.md-on-dark .md-frame__credit { color: var(--md-cream); }
.md-on-field .md-frame__credit, .md-on-wall .md-frame__credit { color: var(--md-brown); background: var(--md-paper); padding: 2px 8px; }

/* black fine frame with a paper passe-partout: rooms and people */
.md-frame--black .md-frame__body { border: var(--md-line-frame-black) solid var(--md-ink); background: var(--md-paper); padding: var(--md-mat); }
.md-frame--black .md-frame__body img { box-shadow: -1px -1px 0 rgba(10, 3, 3, 0.18); }
/* dark wood frame, no mat: the dishes */
.md-frame--wood .md-frame__body { border: var(--md-line-frame-wood) solid var(--md-brown); outline: 1px solid var(--md-ink); outline-offset: 0; background: var(--md-ink); padding: 2px; }
/* the single gilded frame, flat profile: the main photograph of a page, one per page */
.md-frame--gold .md-frame__body { border: var(--md-line-frame-gold) solid var(--md-gold); outline: 1px solid var(--md-brown); outline-offset: -5px; background: var(--md-brown); padding: 3px; box-shadow: var(--md-shadow-frame-main); }

/* default tilts by position, so a wall never has two frames at the same angle in a row; an inline --md-tilt wins */
.md-frame:nth-of-type(6n + 1) { --md-tilt: -1.2deg; }
.md-frame:nth-of-type(6n + 2) { --md-tilt: 0.8deg; }
.md-frame:nth-of-type(6n + 3) { --md-tilt: -0.4deg; }
.md-frame:nth-of-type(6n + 4) { --md-tilt: 1.4deg; }
.md-frame:nth-of-type(6n + 5) { --md-tilt: -0.9deg; }
.md-frame:nth-of-type(6n + 6) { --md-tilt: 0.5deg; }

/* the wall: two columns that stack their frames each on its own, mixed sizes and sides, never three equal in a row */
.md-wall { display: grid; gap: var(--md-s-7); padding-block: var(--md-s-4); }
.md-wall__col { display: flex; flex-direction: column; gap: var(--md-s-7); min-width: 0; }
.md-wall__pair { display: grid; grid-template-columns: 5fr 6fr; gap: var(--md-s-5); align-items: end; }
.md-wall__pair > .md-frame:first-child { margin-bottom: var(--md-s-6); }
.md-wall .md-frame { min-width: 0; }
.md-wall .is-w92 { width: 92%; }
.md-wall .is-w86 { width: 86%; }
.md-wall .is-w78 { width: 78%; }
.md-wall .is-w64 { width: 64%; }
.md-wall .to-end { align-self: flex-end; }
.md-wall .to-center { align-self: center; }
@media (min-width: 900px) {
  .md-wall { grid-template-columns: 7fr 5fr; gap: var(--md-s-8); align-items: start; }
  .md-wall__col { gap: var(--md-s-8); }
  .md-wall__col + .md-wall__col { padding-top: var(--md-s-6); }
  .md-wall .is-w92 { width: 100%; }
}

/* an isolated photograph hangs on a field, never on plain paper */
.md-hang-field { background: var(--md-surface-field); padding: var(--md-s-section) var(--md-s-gutter); display: grid; justify-items: center; }
.md-hang-field.is-dark { background: var(--md-surface-inverse); }
.md-hang-field > .md-frame { width: min(100%, 44rem); }
/* frames on the terracota wall: castanho frame, no black line anywhere */
.md-on-field .md-frame--black .md-frame__body, .md-on-wall .md-frame--black .md-frame__body { border-color: var(--md-brown); }
.md-on-field .md-frame--wood .md-frame__body, .md-on-wall .md-frame--wood .md-frame__body { outline: 0; background: var(--md-brown-deep); }
.md-hang-field .md-hang-pair { display: grid; grid-template-columns: 3fr 2fr; gap: var(--md-s-6); align-items: end; width: min(100%, 60rem); }
@media (max-width: 600px) {
  .md-hang-field .md-hang-pair { grid-template-columns: 1fr; }
  .md-hang-field .md-hang-pair > .md-frame:last-child { width: 72%; justify-self: end; }
}

/* ---------- components (brand/padroes/componentes.css) ---------- */

/* House selector: two radios drawn as paper tabs; the chosen one is castanho. */
.md-houses { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--md-s-3); min-width: 0; }
.md-houses legend { font: 600 var(--md-t-h4) / var(--md-lh-h4) var(--md-font-text); margin-bottom: var(--md-s-3); padding: 0; }
.md-house { position: relative; display: block; }
.md-house input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.md-house__face {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--md-s-3);
  min-height: 64px; padding: var(--md-s-3) var(--md-s-4);
  border: 2px solid var(--md-ink); border-radius: var(--md-r-button); background: var(--md-paper);
  box-shadow: var(--md-shadow-button);
  transition: transform var(--md-dur-press) var(--md-ease-out), box-shadow var(--md-dur-press) var(--md-ease-out), background-color var(--md-dur-hover) ease;
}
.md-house__seal { width: 40px; height: 40px; border-radius: var(--md-r-round); border: 1.5px solid currentColor; display: grid; place-items: center; }
.md-house__seal .md-peels { width: 22px; }
.md-house__name { font: 600 1.0625rem / 1.2 var(--md-font-text); }
.md-house__note { display: block; font: 400 var(--md-t-small) / 1.35 var(--md-font-text); color: var(--md-text-muted); }
.md-house input:checked + .md-house__face { background: var(--md-action); color: var(--md-on-action); }
.md-house input:checked + .md-house__face .md-house__note { color: var(--md-on-action); }
.md-house input:active + .md-house__face { transform: translate(4px, 4px); box-shadow: var(--md-shadow-button-pressed); }
.md-house input:focus-visible + .md-house__face { outline: 2px solid var(--md-focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .md-house input:not(:checked):hover + .md-house__face { background: var(--md-surface); } }
@media (max-width: 520px) { .md-houses { grid-template-columns: 1fr; } }

/* Hours (encaixes horario, horario-duas): a table per house. Today is the row with aria-current="date":
   castanho ground, cream text, weight 600, no word «hoje» on screen and no status line. Intervals never break;
   below 420 px the table tightens to 15 px and 4 px of padding and fits at 320 px. */
.horario { min-width: 0; max-width: 40rem; --horario-fundo: var(--md-surface); }
.md-hours-pair .horario { max-width: none; }
.campo--papel .horario { --horario-fundo: var(--md-surface-alt); }
.md-hours-pair { display: grid; gap: var(--md-s-6) var(--md-s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.md-hours { width: 100%; border-collapse: collapse; font-variant-numeric: var(--md-numeric); }
.md-hours caption { text-align: left; font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); padding-bottom: var(--md-s-3); }
.md-hours caption small { display: block; font: 400 var(--md-t-small) / 1.4 var(--md-font-text); color: var(--md-text-muted); margin-top: 2px; }
.md-hours caption small a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.md-hours th, .md-hours td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--md-rule); font-size: 1rem; }
.md-hours .horas, .md-hours td.is-closed > span { white-space: nowrap; }
.md-hours thead th { font: 500 var(--md-t-label) / 1.3 var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; border-top: 0; color: var(--md-text-muted); padding-bottom: 6px; }
.md-hours tbody th { font-weight: 400; white-space: nowrap; }
@media (max-width: 420px) {
  .md-hours th, .md-hours td { padding: 9px 4px; font-size: 0.9375rem; }
  .md-hours td.is-closed > span { padding: 2px 4px; margin-left: -4px; }
}
.md-hours tr[aria-current="date"] th, .md-hours tr[aria-current="date"] td { background-color: var(--md-action); color: var(--md-on-action); font-weight: 600; border-top-color: var(--md-action); }
.md-hours tr[aria-current="date"] + tr th, .md-hours tr[aria-current="date"] + tr td { border-top-color: var(--md-action); }
.md-hours td.is-closed { color: var(--md-unavailable); background-image: repeating-linear-gradient(135deg, var(--md-rule) 0 1px, transparent 1px 7px); }
.md-hours tr[aria-current="date"] td.is-closed { color: var(--md-on-action); background-image: repeating-linear-gradient(135deg, rgba(240, 233, 220, 0.35) 0 1px, transparent 1px 7px); }
.md-hours td.is-closed > span { background: var(--horario-fundo); padding: 2px 6px; margin-left: -6px; }
.md-hours tr[aria-current="date"] td.is-closed > span { background: var(--md-action); }
/* on the castanho field today turns paper, so it never disappears into the ground */
.md-on-dark .horario { --horario-fundo: var(--md-surface-main); }
.md-on-dark .md-hours td.is-closed { color: var(--md-cream); }
.md-on-dark .md-hours tr[aria-current="date"] th, .md-on-dark .md-hours tr[aria-current="date"] td { background-color: var(--md-paper); color: var(--md-brown); border-top-color: var(--md-paper); }
.md-on-dark .md-hours tr[aria-current="date"] td.is-closed > span { background: var(--md-paper); }
.md-on-dark .md-hours tr[aria-current="date"] td.is-closed { color: var(--md-brown); background-image: repeating-linear-gradient(135deg, rgba(114, 55, 32, 0.3) 0 1px, transparent 1px 7px); }
.horario__nota { margin-top: var(--md-s-4); font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); max-width: var(--md-measure); }
.horario__fechos { list-style: none; margin: var(--md-s-4) 0 0; padding: 0; display: grid; gap: var(--md-s-2); font-size: var(--md-t-small); line-height: var(--md-lh-small); }
.horario__fechos li { display: flex; gap: var(--md-s-2); align-items: flex-start; }
.horario__fechos .ico { margin-top: 0.1em; color: var(--md-action); }
.md-on-dark .horario__fechos .ico { color: inherit; }
.horario__vazio { font-size: var(--md-t-small); color: var(--md-text-muted); }
/* the short form (encaixe horario-curto): label and value, never a line joined with «·» */
.horario-curto { display: grid; gap: var(--md-s-3); }
.horario-curto__lista { margin: 0; display: grid; gap: var(--md-s-2); }
.horario-curto__lista dt { font-weight: 600; }
.horario-curto__lista dd { margin: 0; }
.horario-curto__nome { font-weight: 600; }
.horario-curto__fechos { margin-top: 0; }

/* Ratings (encaixe avaliacoes): the platform's number, with its source and month; never a claim of the house. */
.avaliacoes { display: grid; gap: var(--md-s-5); }
.avaliacao { display: grid; gap: var(--md-s-1); justify-items: start; }
.avaliacao__casa { font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text); letter-spacing: var(--md-tr-label); text-transform: uppercase; }
.avaliacao__linha { display: grid; justify-items: start; row-gap: 2px; }   /* the score above, the source and date under it, the same in every house */
.avaliacao__nota { font: 400 var(--md-t-h3) / 1 var(--md-font-display); font-variant-numeric: var(--md-numeric); }
.avaliacao__texto { font-size: var(--md-t-small); line-height: var(--md-lh-small); color: var(--md-text-muted); }
.avaliacao__ligacao { font-size: var(--md-t-small); }

/* Form field: label above, paper ground, ink border; error in the wine of the hanging sign with icon and words. */
.md-field { display: grid; gap: 6px; max-width: 28rem; }
.md-field label { font: 500 0.9375rem / 1.3 var(--md-font-text); }
.md-field .md-hint { font: 400 var(--md-t-small) / 1.4 var(--md-font-text); color: var(--md-text-muted); margin: 0; }
.md-field input, .md-field select, .md-field textarea {
  min-height: 52px; padding: 12px 14px;
  border: 1px solid var(--md-rule-strong); border-radius: var(--md-r-block);
  background: var(--md-paper); color: var(--md-ink);
  font: 400 1.0625rem / 1.3 var(--md-font-text);
  transition: box-shadow var(--md-dur-ui) var(--md-ease-out);
}
.md-field textarea { min-height: 7.5rem; resize: vertical; }
.md-field input:focus-visible, .md-field select:focus-visible, .md-field textarea:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 2px; }
.md-field [aria-invalid="true"] { border: 2px solid var(--md-error); padding: 11px 13px; }
.md-field .md-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--md-error); font: 500 var(--md-t-small) / 1.4 var(--md-font-text); }
.md-field .md-error .ico { width: 1.2em; height: 1.2em; flex: none; margin-top: 1px; }

/* Dish line of the menu: name, description, price in tabular figures aligned right. */
.md-dish { display: grid; grid-template-columns: 1fr auto; column-gap: var(--md-s-4); row-gap: 2px; padding-block: var(--md-s-3); border-top: 1px solid var(--md-rule); }
.md-dish__name { font: 600 1.0625rem / 1.3 var(--md-font-text); }
.md-dish__price { font: 500 1.0625rem / 1.3 var(--md-font-text); font-variant-numeric: var(--md-numeric); white-space: nowrap; }
.md-dish__desc { grid-column: 1 / -1; margin: 0; color: var(--md-text-muted); font-size: var(--md-t-small); line-height: 1.45; max-width: var(--md-measure); }
/* «Esgotado hoje» on a dish, set per house in the team's panel (ementa.mjs prints <p class="prato__esgotado
   md-unavailable"><span>…</span></p> and .is-esgotado on the dish): the hatch with the words on their own ground,
   name and price muted, never colour alone. Shared by /carta and the home page. */
.prato__esgotado { grid-column: 1 / -1; justify-self: start; margin-top: var(--md-s-2); padding: 4px 6px; font: 600 var(--md-t-small) / 1.3 var(--md-font-text); }
.prato__esgotado > span { display: inline-flex; align-items: center; gap: 6px; }
.prato__esgotado .ico { width: 1.1em; height: 1.1em; }
.md-dish.is-esgotado :is(.md-dish__name, .md-dish__name a, .md-dish__price) { color: var(--md-text-muted); }

/* ---------- header: the castanho field of the sign, the name in cream ---------- */

.cabecalho {
  position: relative; z-index: var(--md-z-header);
  background: var(--md-surface-main); color: var(--md-cream);
  view-transition-name: cabecalho;
}
/* the demo strip: on top of the header, inside it, so it never touches a terracota section below */
.faixa-demo { background: var(--md-ink); color: var(--md-cream); font-size: var(--md-t-credit); line-height: var(--md-lh-credit); }
.faixa-demo .wrap { padding-block: 8px; display: grid; gap: 2px; }
.faixa-demo a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--md-cream); text-decoration: underline; text-decoration-color: rgba(240, 233, 220, 0.6); }
.faixa-demo a:active { opacity: 0.72; }

.cabecalho__barra { display: flex; align-items: center; gap: var(--md-s-4); min-height: var(--cabecalho-h); }
.cabecalho__marca { display: block; flex: none; margin-right: auto; padding-block: 10px; text-decoration: none; }
.cabecalho__marca img { height: 36px; width: auto; }
.cabecalho__marca:active { opacity: 0.8; }
.cabecalho__nav, .cabecalho__reservar { display: none; }
.cabecalho__menu { margin-right: -8px; }
.cabecalho__lista { list-style: none; display: flex; }
.cabecalho__lista a {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 12px;
  color: var(--md-cream); font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.5em;
  transition: text-decoration-color var(--md-dur-hover) ease;
}
.cabecalho__lista a[aria-current="page"] { text-decoration-color: currentColor; }
.cabecalho__lista a:active { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) { .cabecalho__lista a:hover { text-decoration-color: rgba(240, 233, 220, 0.6); } }
.cabecalho .md-btn { min-height: var(--alvo); padding: 0 18px; font-size: 1rem; }
@media (min-width: 64em) {
  .cabecalho__marca img { height: 40px; }
  .cabecalho__nav { display: block; }
  .cabecalho__lista { margin-right: var(--md-s-2); }
  .cabecalho__reservar { display: inline-flex; }
  .cabecalho > .cabecalho__barra .cabecalho__menu { display: none; }
}

/* ---------- the phone menu: a modal dialog that unrolls from the header ---------- */

.menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0;
  background: var(--md-surface-main); color: var(--md-cream);
  overflow-y: auto; overscroll-behavior: contain;
  flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--md-dur-drawer-out) var(--md-ease-drawer),
    display var(--md-dur-drawer-out) allow-discrete,
    overlay var(--md-dur-drawer-out) allow-discrete;
}
.menu[open] { display: flex; clip-path: inset(0); transition-duration: var(--md-dur-drawer-in); }
@starting-style { .menu[open] { clip-path: inset(0 0 100% 0); } }
.menu::backdrop { background: transparent; }
.menu > .faixa-demo, .menu__topo { flex: none; }
.menu__nav { flex: 1 0 auto; padding-block: var(--md-s-6) var(--md-s-5); }
.menu__lista { list-style: none; display: grid; gap: var(--md-s-1); }
.menu__lista a {
  display: block; padding-block: 6px;
  font: 400 var(--md-t-h2) / 1.15 var(--md-font-display); color: var(--md-cream);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.menu__lista a[aria-current="page"] { text-decoration-color: currentColor; }
.menu__lista a:active { opacity: 0.72; }
.menu__fim { flex: none; display: grid; gap: var(--md-s-5); padding-block: var(--md-s-2) var(--md-s-7); }
.menu__fim .md-rule-dots { margin: 0; }
.menu__fim .md-btn { width: min(100%, 24rem); }
.menu__tel { list-style: none; display: grid; gap: var(--md-s-1); }
.menu__tel a { display: flex; align-items: center; gap: var(--md-s-3); min-height: var(--alvo); color: var(--md-cream); text-decoration: none; }
.menu__tel a span:first-of-type { font-weight: 600; min-width: 7.5em; }
.menu__tel a:active { opacity: 0.72; }
@media (min-width: 64em) { .menu { display: none !important; } }

/* ---------- the phone bar: «Reservar mesa» and «Ligar», fixed, below 64em only ---------- */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--md-z-header);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--md-surface-main); color: var(--md-cream);
  border-top: 1px solid var(--linha-creme);
  view-transition-name: barra;
}
.barra__acoes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--md-s-2); max-width: calc(34rem + 2 * var(--md-s-gutter)); }
.barra .md-btn { width: 100%; padding-inline: 12px; }
/* below 400 px «Reservar mesa» needs its whole button: its icon goes, «Ligar» keeps the phone */
@media (max-width: 24.99em) { .barra .md-btn:first-child .ico { display: none; } }
@media (min-width: 64em) { .barra, .ligar { display: none !important; } }
/* a page that needs the bottom of the screen for itself (a booking step) sets <body data-sem-barra> */
[data-sem-barra] .barra { display: none; }

/* «Ligar»: a small sheet with the two houses, rising from the bar. Modal: focus stays inside, Escape and a tap
   outside close it, focus returns to «Ligar». The veil is castanho fundo, never black over a terracota wall. */
.ligar {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 100dvh;
  margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0; border-top: 1px solid var(--linha-creme);
  background: var(--md-surface-main); color: var(--md-cream);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%);
  transition:
    transform var(--md-dur-drawer-out) var(--md-ease-drawer),
    display var(--md-dur-drawer-out) allow-discrete,
    overlay var(--md-dur-drawer-out) allow-discrete;
}
.ligar[open] { transform: none; transition-duration: var(--md-dur-drawer-in); }
@starting-style { .ligar[open] { transform: translateY(100%); } }
.ligar::backdrop { background: rgba(93, 45, 26, 0.6); }
.ligar__corpo { display: grid; gap: var(--md-s-4); max-width: calc(34rem + 2 * var(--md-s-gutter)); padding-block: var(--md-s-5) var(--md-s-4); }
.ligar__titulo { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); }
.ligar__lista { list-style: none; display: grid; gap: var(--md-s-3); }
.ligar__casa {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--md-s-3); align-items: center;
  min-height: 64px; padding: 10px 16px;
  background: var(--md-paper); color: var(--md-brown); border: 2px solid var(--md-paper); border-radius: var(--md-r-button);
  box-shadow: var(--md-shadow-button); text-decoration: none;
  transition: transform var(--md-dur-press) var(--md-ease-out), box-shadow var(--md-dur-press) var(--md-ease-out);
}
.ligar__casa:active { transform: translate(4px, 4px); box-shadow: var(--md-shadow-button-pressed); }
.ligar__casa:focus-visible { outline: 2px solid var(--md-cream); outline-offset: 4px; }
.md-on-dark a.ligar__casa { color: var(--md-brown); }
.ligar__ico { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--md-r-round); border: 1.5px solid currentColor; display: grid; place-items: center; }
.ligar__ico .ico { width: 20px; height: 20px; }
.ligar__nome { font: 600 1.0625rem / 1.2 var(--md-font-text); }
.ligar__num { font-size: var(--md-t-small); line-height: 1.3; }
.ligar__fechar { width: 100%; }

/* ---------- footer: the castanho field under the tile band, one grid for the columns and the legal row ---------- */

.rodape { background: var(--md-surface-main); color: var(--md-cream); }
.rodape__in { padding-block: var(--md-s-8) var(--md-s-6); }
@media (max-width: 63.99em) {
  .rodape__in { padding-bottom: calc(var(--md-s-6) + var(--barra-h) + env(safe-area-inset-bottom, 0px)); }
  [data-sem-barra] .rodape__in { padding-bottom: var(--md-s-6); }
}
.rodape__marca { display: inline-block; padding-block: 4px; margin: -4px 0 calc(var(--md-s-7) - 4px); text-decoration: none; }   /* 44 px of target around the 36 px name on a phone */
.rodape__marca img { width: 236px; height: auto; }
.rodape__marca:active { opacity: 0.8; }
.rodape__grelha {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md-s-7) var(--md-s-5); align-items: start;
  font-size: var(--md-t-small); line-height: var(--md-lh-small);
}
.rodape__col { min-width: 0; }
.rodape__col--horario { grid-column: 1 / -1; }
/* The two houses share their rows, so the phones and «Como chegar» of both start on the same line whatever the
   length of the address. On a phone each house takes the full width: name, the two address lines, then the phone
   and «Como chegar» side by side on the two columns of the grid. From 48em the houses sit side by side and the rows
   (name, address, links) are shared through subgrid. */
.rodape__casas { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--md-s-7); }
.rodape__casa { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-content: start; }
.rodape__casa > .rodape__titulo, .rodape__casa > .rodape__morada, .rodape__casa > .rodape__lista { grid-column: 1 / -1; }
.rodape__casa > .rodape__lista { grid-template-columns: subgrid; }
/* every column title on one line of the grid, the same size and the same margin: one baseline */
.rodape__titulo {
  margin: 0 0 var(--md-s-3);
  font: 500 var(--md-t-label) / var(--md-lh-label) var(--md-font-text);
  letter-spacing: var(--md-tr-label); text-transform: uppercase;
}
.rodape__morada { margin-bottom: var(--md-s-1); }
.rodape__lista { list-style: none; display: grid; }
.rodape__lista li { min-width: 0; }
.rodape a {
  color: var(--md-cream);
  text-decoration: underline; text-decoration-color: rgba(240, 233, 220, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: text-decoration-color var(--md-dur-hover) ease;
}
.rodape__lista a {
  display: inline-flex; align-items: flex-start; gap: var(--md-s-2);
  /* 44 px of target on touch (32 px with a mouse) from padding, so a label that wraps («Instagram de Paço de Arcos»
     at 320 px) keeps the same air above and below as a label on one line */
  padding-block: calc((var(--alvo-lista) - 1.5em) / 2);
}
.rodape__lista a .ico { margin-top: 0.15em; }
/* a list right under a column title starts on the same line as the address under the title next to it: the touch
   area grows above and below the first link instead of pushing its text down */
.rodape__titulo + .rodape__lista { margin-top: calc((var(--alvo-lista) - 1.5em) / -2); }
.rodape__lista a .ico { width: 1.15em; height: 1.15em; }
.rodape a[aria-current="page"] { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.rodape a:active { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) {
  .rodape a:hover { text-decoration-color: currentColor; }
  .rodape { --alvo-lista: 32px; }
}
.rodape .horario-curto__lista { gap: var(--md-s-3); }

/* the legal row sits on the same columns as the rest (subgrid), one line of tops, never loose lines */
.rodape__legal {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--md-s-4);
  list-style: none; margin-top: calc(-1 * var(--md-s-3)); padding-top: var(--md-s-5);
  border-top: 1px solid var(--linha-creme);
  font-size: var(--md-t-credit); line-height: var(--md-lh-credit);
}
.rodape__legal li:last-child { grid-column: 1 / -1; }
/* the legal links keep their 13 px letter and their place on the line; padding with an equal negative margin gives
   them 44 px of target without moving anything */
.rodape__legal a { display: inline-block; padding-block: 13px; margin-block: -13px; }

@media (min-width: 48em) {
  .rodape__marca img { width: auto; height: 96px; }
  .rodape__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__col--horario { grid-column: auto; }
  .rodape__casas { grid-column: span 2; grid-template-rows: repeat(3, auto); row-gap: 0; }
  .rodape__casa { grid-column: auto; grid-row: span 3; grid-template-columns: none; grid-template-rows: subgrid; }
  .rodape__casa > .rodape__titulo, .rodape__casa > .rodape__morada, .rodape__casa > .rodape__lista { grid-column: auto; }
  .rodape__casa > .rodape__lista { grid-template-columns: none; align-content: start; }
  .rodape__legal li:last-child { grid-column: span 2; }
}
@media (min-width: 64em) {
  .rodape__grelha { grid-template-columns: 1fr 1fr 1.3fr 0.9fr 1.1fr; column-gap: var(--md-s-6); }
  .rodape__legal li:last-child { grid-column: auto; }
}

/* ---------- 404: the chalkboard as ground, a way back ---------- */

.p404 { padding-block: var(--md-s-section); }
.p404__grelha { display: grid; gap: var(--md-s-8); align-items: center; }
.p404__texto .lead { margin-top: var(--md-s-5); }
.p404__texto .acoes { margin-top: var(--md-s-6); }
.p404__giz { display: grid; justify-items: center; padding: var(--md-s-4) var(--md-s-2); }
.p404__giz .md-board { width: min(100%, 26rem); --md-tilt: -0.9deg; }
@media (min-width: 60em) {
  .p404__grelha { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(48svh, 480px); }
}

/* ---------- legal page (privacy) ---------- */

.legal-topo { padding-block: var(--md-s-section) var(--md-s-7); }
.legal-topo .lead { margin-top: var(--md-s-5); }
.legal { padding-bottom: var(--md-s-section); }
.legal__aviso {
  display: grid; grid-template-columns: auto 1fr; gap: var(--md-s-3); align-items: start;
  padding: var(--md-s-5); background: var(--md-paper); border: 2px solid var(--md-ink); box-shadow: var(--md-shadow-frame);
}
.legal__aviso .ico { margin-top: 0.15em; color: var(--md-action); }
.legal__sec { margin-top: var(--md-s-7); }
.legal__sec h2 { font: 400 var(--md-t-h3) / var(--md-lh-h3) var(--md-font-display); margin-bottom: var(--md-s-3); }
.legal__sec > * + * { margin-top: var(--md-s-3); }
.legal__sec p, .legal__lista li { max-width: var(--md-measure); }
.legal__lista { list-style: none; display: grid; gap: var(--md-s-2); }
.legal__lista li { position: relative; padding-left: var(--md-s-5); }
/* the marker is one dash of the seal's ring */
.legal__lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: var(--md-line-dash-length); height: var(--md-line-dash-thickness); border-radius: 2px; background: var(--md-action);
}
.legal__data { color: var(--md-text-muted); font-size: var(--md-t-small); }

/* ---------- reduced motion: softer, not none ---------- */

@media (prefers-reduced-motion: reduce) {
  .md-btn, .md-house__face, .ligar__casa { transition: background-color var(--md-dur-hover) ease; }
  .md-btn:active, .md-house input:active + .md-house__face, .ligar__casa:active, .botao-ico:active { transform: none; }
  .md-btn[aria-busy="true"] .ico--roda { animation: none; }
  .ligacao .ico { transition: none; }
  .menu, .ligar {
    clip-path: none; transform: none; opacity: 0;
    transition: opacity var(--md-dur-reduced-out) ease, display var(--md-dur-reduced-out) allow-discrete, overlay var(--md-dur-reduced-out) allow-discrete;
  }
  .menu[open], .ligar[open] { opacity: 1; transition-duration: var(--md-dur-reduced-in); }
  @starting-style { .menu[open], .ligar[open] { opacity: 0; } }
}

@media print {
  .cabecalho__nav, .cabecalho__reservar, .cabecalho__menu, .barra, .menu, .ligar, .faixa-demo, .rodape__mosaico { display: none !important; }
  .cabecalho, .rodape { background: none; color: var(--md-ink); }
  .cabecalho__marca img, .rodape__marca img { filter: invert(1); }
}