/* Hallmark · shape: index-first portfolio (the work is the page) · genre: editorial · theme: brand · redesign: full
 * paper: oklch(97.6% 0.006 85) · accent: oklch(64% 0.13 240) · display: Barlow Condensed (brand) · body: Barlow (brand) · hero: poster, the apartamento terra photograph full-bleed · nav: edge-aligned, logo and three links and one quiet action · footer: a plain base, logo, npdd seal, address · signature: the index of 33 obras with a fixed frame that shows each obra as the name is touched
 * axes: light/display-condensed/cool · posture: restrained, navy carries the contact band · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V5 · weakest: S, the obras carry no year or place; led with the real photographs and the real counts per obra instead of inventing either */
/* Hallmark · waive 59 · gap 0 between hero and manifesto, a full-bleed photograph meets a paper band on purpose · the obra photo ends the first screen and the brand statement starts the second */
/* Hallmark · dismissed 77 · the orçamento page is a form page, photo and two ways in, a strip of three obras and the film; the portfolio carries the rest */
/* Hallmark · answered F15 · two gaps on purpose, 96px between text and picture columns and 40px inside the photo and card grids */
/* Hallmark · dismissed 49 · the obra rows are list rows of name, type and photo count, wrapping a long name is the right fallback on a phone */
/* bp v3 (30/10/2026): tokens e base do hallmark + o estilo da página, num arquivo só (csp do site: só arquivos próprios) */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(97.6% 0.006 85); --color-paper-2: oklch(94.8% 0.011 85); --color-paper-3: oklch(91.5% 0.013 85);
  --color-ink: oklch(25.5% 0.05 266); --color-ink-2: oklch(20% 0.04 262); --color-muted: oklch(46% 0.03 262);
  --color-rule: oklch(86% 0.012 85);
  --color-accent: oklch(64% 0.13 240); --color-accent-ink: oklch(20% 0.04 262); --color-focus: oklch(60% 0.19 240);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --radius-card: 4px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.02em;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


:root {
  --color-paper: oklch(97.6% 0.006 85);
  --color-paper-2: oklch(94.8% 0.011 85);
  --color-paper-3: oklch(91.5% 0.013 85);
  --color-ink: oklch(25.5% 0.05 266);
  --color-ink-2: oklch(20% 0.04 262);
  --color-muted: oklch(46% 0.03 262);
  --color-rule: oklch(86% 0.012 85);
  --color-accent: oklch(64% 0.13 240);
  --color-accent-ink: oklch(20% 0.04 262);
  --color-focus: oklch(60% 0.19 240);
  --color-field: oklch(25.5% 0.05 266);
  --color-on-field: oklch(97.6% 0.006 85);
  --color-on-field-muted: oklch(82% 0.02 262);
  --color-on-field-rule: oklch(40% 0.04 264);
  --color-scrim: oklch(16% 0.035 262 / 0.62);
  --color-scrim-0: oklch(16% 0.035 262 / 0);
  --color-night: oklch(14% 0.03 262);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 500;
  --tracking-display: -0.005em;
  --radius-card: 6px;
  --radius-ctl: 12px;
  --text-poster: clamp(3rem, 13vw, 8.5rem);
  --nav-h: 72px;
  --container: 1360px;
}

body { font-size: 1.0625rem; }
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
a:hover { text-decoration-color: var(--color-accent); }

/* controls: one primary, squared like the joinery */
.bt { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-ctl); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; border: 1px solid var(--color-ink); background: transparent; color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.bt:hover { background: var(--color-paper-2); }
.bt:active { transform: translateY(1px); }
.bt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.bt:disabled { opacity: 0.55; cursor: not-allowed; }
.bt--p { background: var(--color-ink); color: var(--color-paper); }
.bt--p:hover { background: var(--color-ink-2); }
.on-dark .bt { border-color: var(--color-on-field); color: var(--color-on-field); }
.on-dark .bt:hover { background: var(--color-ink-2); }
.on-dark .bt--p { background: var(--color-on-field); color: var(--color-ink); }
.on-dark .bt--p:hover { background: var(--color-paper-2); }
.on-dark { --color-focus: var(--color-on-field); }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); }
.nav .container { display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.nav-logo img { height: 52px; width: auto; }
.nav-links { display: flex; gap: var(--space-lg); margin-left: auto; font-size: var(--text-sm); }
.nav-links a { text-decoration: none; color: var(--color-muted); padding-block: var(--space-xs); }
.nav-links a:hover { color: var(--color-ink); }
.nav-acao { font-size: var(--text-sm); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); }
@media (max-width: 48rem) { .nav-links .longe { display: none; } .nav .container { gap: var(--space-md); } }

.container { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* hero: the obra fills the first screen, the words sit on its calm corner */
.hero { position: relative; height: calc(100svh - var(--nav-h)); min-height: 560px; max-height: 1000px; color: var(--color-on-field); background: var(--color-night); }
.hero-foto { position: absolute; inset: 0; z-index: 1; }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(20deg, var(--color-scrim) 0%, var(--color-scrim) 22%, var(--color-scrim-0) 62%); pointer-events: none; }
.hero .container { position: relative; z-index: 3; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xl); padding-block: var(--space-2xl); }
.hero h1 { font-size: var(--text-poster); line-height: 0.9; max-width: 14ch; overflow-wrap: normal; hyphens: none; }
.hero-texto { display: grid; gap: var(--space-lg); }
.hero .lead { color: var(--color-on-field); max-width: 34ch; }
.hero-acoes { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero-leg { font-size: var(--text-sm); color: var(--color-on-field-muted); text-align: right; }
@media (max-width: 40rem) { .hero::after { background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-scrim) 55%, var(--color-scrim-0) 85%); } .hero { height: auto; min-height: calc(100svh - var(--nav-h) - var(--space-lg)); } .hero .container { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - var(--nav-h)); align-content: end; } .hero-leg { text-align: left; } }

/* manifesto + the three figures the bp states */
.manif { padding-block: var(--section-gap); }
.manif .container { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: start; }
.manif blockquote { margin: 0; font: var(--display-weight) var(--text-display-s)/1.04 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; max-width: 26ch; }
.manif-pe { margin-top: var(--space-xl); color: var(--color-muted); max-width: 52ch; }
.figuras { display: grid; gap: 0; margin: 0; }
.figuras div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.figuras dt { order: 2; color: var(--color-muted); font-size: var(--text-sm); }
.figuras dd { margin: 0; font: var(--display-weight) var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; min-width: 3ch; }
@media (max-width: 60rem) { .manif .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }

/* the index */
.indice { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.indice-cab { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.indice-cab h2 { font-size: var(--text-display); line-height: 0.95; }
.filtro { display: flex; gap: var(--space-lg); font-size: var(--text-sm); }
.filtro button { background: none; border: 0; padding: var(--space-xs) 0; color: var(--color-muted); cursor: pointer; border-bottom: var(--rule-hair) solid transparent; min-height: 44px; }
.filtro button:hover { color: var(--color-ink); }
.filtro button[aria-pressed="true"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.filtro button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.indice-corpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.lista { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.lista li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.lista button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 7rem 4.5rem; gap: var(--space-md); align-items: baseline; padding: var(--space-xs) 0; background: none; border: 0; color: var(--color-muted); text-align: left; cursor: pointer; min-height: 48px; transition: color var(--dur-short) var(--ease-out); }
.lista .nm { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); }
.lista .tp, .lista .ft { font-size: var(--text-sm); }
.lista .mini { display: none; }
.lista .ft { text-align: right; font-variant-numeric: tabular-nums; }
.lista button:hover, .lista button[aria-current="true"] { color: var(--color-ink); }
.lista button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.quadro { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); margin: 0; display: grid; gap: var(--space-sm); }
.quadro-foto { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--nav-h) - 9rem); width: 100%; border-radius: var(--radius-card); background: var(--color-paper-2); position: relative; overflow: hidden; }
.quadro-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.quadro-foto img.on { opacity: 1; }
.quadro figcaption { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.quadro figcaption b { font-weight: 500; color: var(--color-ink); }
@media (max-width: 60rem) {
  .indice-corpo { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .quadro { top: var(--nav-h); z-index: var(--z-raised); background: var(--color-paper); padding-block: var(--space-sm); }
  .quadro-foto { aspect-ratio: 16 / 10; max-height: none; }
  .lista button { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .lista .tp { display: none; }
}
/* até 60rem (celular e tablet) a lista leva a capa por linha e o quadro some: no tablet o quadro caía depois da lista inteira (codex 30/10) */
@media (max-width: 60rem) {
  .quadro { display: none; }
  .lista button { grid-template-columns: 4rem minmax(0, 1fr) 4.5rem; align-items: center; padding-block: var(--space-xs); }
  .lista .mini { display: block; width: 4rem; height: 5rem; object-fit: cover; border-radius: var(--radius-card); }
}

/* how the bp works: a tinted well, four terms */
.como { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.como h2 { margin-bottom: var(--space-2xl); max-width: 16ch; }
.como dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.como dl div { border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.como dt { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); }
.como dd { margin: 0; color: var(--color-muted); }
@media (max-width: 60rem) { .como dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } }
@media (max-width: 40rem) { .como dl { grid-template-columns: minmax(0, 1fr); } }

/* one obra, opened */
.caso { padding-block: var(--section-gap); }
.caso-grade { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); }
.caso-grade figure { margin: 0; }
.caso-a { aspect-ratio: 3 / 2; }
.caso-b { aspect-ratio: 3 / 4; }
.caso-a, .caso-b { border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.caso-texto { margin-top: var(--space-lg); }
.caso-texto h2 { font-size: var(--text-section); }
.caso-texto p { color: var(--color-muted); margin-top: var(--space-xs); }
.caso-texto .bt { margin-top: var(--space-lg); }
@media (max-width: 48rem) { .caso-grade, .caso-texto { grid-template-columns: minmax(0, 1fr); } .caso-b { aspect-ratio: 4 / 3; } }

/* the film */
.filme { padding-block: 0 var(--section-gap); }
.filme-cab { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xl); }
.filme-cab p { color: var(--color-muted); }
.janela { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-card); background: var(--color-night); }
.janela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.janela iframe.foco, .janela iframe:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* contact: the navy band */
.contato { background: var(--color-field); color: var(--color-on-field); padding-block: var(--section-gap-s); }
.contato .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.contato h2 { font-size: var(--text-display); line-height: 0.95; max-width: 14ch; }
.contato .lead { color: var(--color-on-field-muted); margin-top: var(--space-lg); }
.contato .hero-acoes { margin-top: var(--space-xl); }
.contato dl { margin: 0; display: grid; gap: 0; }
.contato dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-on-field-rule); }
.contato dt { color: var(--color-on-field-muted); font-size: var(--text-sm); }
.contato dd { margin: 0; overflow-wrap: anywhere; }
.contato dd a { text-decoration-color: var(--color-on-field-rule); white-space: nowrap; }
@media (max-width: 40rem) { .contato dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }
@media (max-width: 60rem) { .contato .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }

/* footer */
.rodape { padding-block: var(--space-2xl) var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.rodape .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; }
.rodape-logo img { height: 48px; width: auto; }
.selo { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; max-width: 22rem; }
.selo img { width: 56px; height: auto; flex-shrink: 0; }
.rodape-base { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
@media (max-width: 48rem) { .rodape .container { grid-template-columns: minmax(0, 1fr); } }

/* gallery */
.galeria { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-night); color: var(--color-on-field); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-md); padding: calc(var(--space-md) + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--space-md) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.galeria-topo, .galeria-base { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.galeria { height: 100dvh; }
.galeria-topo h2 { font-size: var(--text-xl); line-height: 1.1; }
.galeria-foto { position: relative; min-height: 0; }
/* a foto ocupa a caixa e se ajusta dentro dela (o safari ignorava o max-height dentro da linha da grade e a foto vazava) */
.galeria-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
@media (max-width: 40rem) { .galeria .bt { min-height: 44px; padding: 0 var(--space-md); } .galeria-base { flex-wrap: wrap; } }
.galeria-base span { color: var(--color-on-field-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.galeria .hero-acoes { gap: var(--space-xs); }

/* orçamento: the photograph holds one side, the two ways in hold the other */
.orc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: calc(100svh - var(--nav-h) - var(--space-lg)); }
.orc-foto { position: relative; min-height: 420px; margin: 0; }
.orc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orc-foto figcaption { position: absolute; z-index: 2; left: var(--space-lg); bottom: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-field); background: var(--color-ink); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-card); }
.orc-lado { display: grid; align-content: center; gap: var(--space-xl); padding: var(--space-2xl) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--space-2xl) var(--space-2xl); }
.orc-lado h1 { font-size: var(--text-display); line-height: 0.95; max-width: 12ch; }
.orc-lado .lead { color: var(--color-muted); margin-top: var(--space-md); }
.orc-portas { display: grid; gap: var(--space-sm); }
.orc-portas .bt { width: 100%; min-height: 52px; }
.form { display: grid; gap: var(--space-md); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.form legend { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); padding: 0; margin-bottom: var(--space-md); }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-md); min-width: 0; }
.campo { display: grid; gap: var(--space-2xs); }
.campo label { font-size: var(--text-sm); color: var(--color-muted); }
.campo input { min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-ctl); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.campo input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo-erro { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.honey { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-alt { font-size: var(--text-sm); color: var(--color-muted); }
.erro-geral { font-size: var(--text-sm); color: var(--color-error); min-height: 1lh; }
.sucesso { display: grid; gap: var(--space-lg); }
.sucesso p { color: var(--color-muted); }
.trio { padding-block: var(--section-gap-s) var(--section-gap); }
.trio-cab { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.trio-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.trio-grade a { display: grid; gap: var(--space-sm); text-decoration: none; }
.trio-grade a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.trio-grade [data-slot] { aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.trio-grade [data-slot] > img { object-position: center; }
.trio-grade span { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); }
.trio-grade small { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) {
  .orc { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .orc-foto { aspect-ratio: 4 / 3; min-height: 0; }
  .orc-lado { padding: var(--space-xl) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--space-xl) max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .trio-grade { grid-template-columns: minmax(0, 1fr); }
  .trio-grade [data-slot] { aspect-ratio: 16 / 10; }
}

/* the brand's own mascots, back by request (sergio 30/10: senti falta de logo e mascote) */
.manif-lado { display: grid; gap: var(--space-xl); justify-items: start; }
.mascote { width: 18rem; max-width: 100%; height: auto; margin-block: -2rem; }
.contato-logo { height: 64px; width: auto; margin-bottom: var(--space-xl); }
.contato .container { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-3xl); }
.mascote--contato { width: 100%; max-width: 16rem; justify-self: end; align-self: end; margin-block: 0 -3rem; }
.mais { margin-top: var(--space-lg); }
@media (max-width: 60rem) { .contato .container { grid-template-columns: minmax(0, 1fr); } .mascote--contato { justify-self: start; max-width: 9rem; } }

/* the núcleo: why the bp is the only builder in it (sergio 30/10) */
.nucleo { padding-block: var(--section-gap); }
.nucleo .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.nucleo-texto { display: grid; gap: var(--space-xl); }
.nucleo-selo { width: 6rem; height: auto; }
.nucleo h2 { font-size: var(--text-display-s); line-height: 1; max-width: 18ch; }
.razoes { margin: 0; display: grid; gap: 0; }
.razoes div { border-top: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-md) var(--space-lg); display: grid; gap: var(--space-xs); }
.razoes dt { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); }
.razoes dd { margin: 0; color: var(--color-muted); max-width: 48ch; }
.nucleo-tela { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; background: var(--color-paper-2); padding: var(--space-2xl) var(--space-xl) var(--space-lg); border-radius: var(--radius-card); }
.tela { width: min(100%, 22rem); aspect-ratio: 3 / 4; border-radius: 14px; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.tela > img { object-position: top; }
.nucleo-tela figcaption { font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
#som[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
[data-credits] { font-size: var(--text-xs); }
@media (max-width: 60rem) { .nucleo .container { grid-template-columns: minmax(0, 1fr); } }

/* orçamento: o mascote ao lado do título (sergio 30/10: "senti falta do mascote na página de orçamentos") */
.orc-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; }
.orc-cab .mascote { width: 8.5rem; margin-block: 0; }
@media (max-width: 40rem) { .orc-cab .mascote { width: 6rem; } }

/* alvos de toque de 44px (celular e computador) */
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.nav-acao { display: inline-flex; align-items: center; min-height: 44px; }
.contato dd a, .rodape-base a, .form-alt a { display: inline-flex; align-items: center; min-height: 44px; }

/* o portal de exemplo (sergio 30/10: "só aqui no sistema deixe algo mais interativo"): arrastar as semanas e ver a obra andar */
.portal { background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-xl); display: grid; gap: var(--space-lg); }
.portal-rot { font-size: var(--text-sm); color: var(--color-muted); }
.portal-pct { font: var(--display-weight) clamp(4rem, 8vw, 6rem)/0.9 var(--font-display); font-variant-numeric: tabular-nums; margin-top: var(--space-xs); }
.portal-sub { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.portal-barra { height: 6px; border-radius: 3px; background: var(--color-paper-3); margin-top: var(--space-md); overflow: hidden; }
.portal-barra i { display: block; height: 100%; width: 100%; background: var(--color-ink); transform-origin: left; transform: scaleX(calc(var(--p) / 100%)); transition: transform var(--dur-long) var(--ease-out); }
.portal-fotos { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xs); }
.portal-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius-card) - 2px); transition: opacity var(--dur-short) var(--ease-out); }
.portal-fotos img.troca { opacity: 0.2; }
.portal-fotos img + img { align-self: end; }
.portal-fotos figcaption { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-ink); }
.portal-disc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.portal-disc li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; gap: var(--space-sm); align-items: center; font-size: var(--text-sm); }
.portal-disc li span { color: var(--color-muted); }
.portal-disc li i { height: 4px; border-radius: 2px; background: linear-gradient(var(--color-ink), var(--color-ink)) left / var(--p) 100% no-repeat, var(--color-paper-3); }
.portal-disc li b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.portal-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.portal-ctl label { font-size: var(--text-sm); color: var(--color-muted); }
.portal-ctl input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--color-ink); cursor: pointer; }
.portal-ctl input[type="range"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#pt-play[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
@media (max-width: 40rem) {
  .portal { padding: var(--space-lg) var(--space-md); }
  .portal-ctl { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .portal-disc li { grid-template-columns: 6.5rem minmax(0, 1fr) 2.75rem; }
}