:root {
  --papel: #f3f0e5;
  --superficie: #fffcf4;
  --leitura: #042027;
  --texto-secundario: #4e615b;
  --marca: #1e480d;
  --marca-miniatura: #234812;
  --marca-hover: #2c5b19;
  --suave: #e4ebdc;
  --acento: #99502e;
  --acento-suave: #f1e4d6;
  --linha: #b4c0a8;
  --erro: #8b2623;
  --serif: "MestreD Serif", Georgia, serif;
  --sans: "MestreD Sans", Arial, sans-serif;
  --tipo-display: clamp(2.125rem, 3.9vw, 3.5rem);
  --tipo-secao: clamp(1.75rem, 2.8vw, 2.375rem);
  --tipo-topico: clamp(1.375rem, 2.05vw, 1.75rem);
  --tipo-marca: clamp(1.75rem, 3.5vw, 3rem);
  --tipo-convite: clamp(1.375rem, 2.2vw, 1.875rem);
  --tipo-corpo: 1.0625rem;
  --tipo-compacto: 1rem;
  --tipo-controle: .9375rem;
  --tipo-apoio: .875rem;
  --espaco-1: .25rem;
  --espaco-2: .5rem;
  --espaco-3: .75rem;
  --espaco-4: 1rem;
  --espaco-6: 1.5rem;
  --espaco-8: 2rem;
  --espaco-12: 3rem;
  --raio: .375rem;
  --sombra: 0 .6rem 1.75rem #04202716;
  --movimento: 160ms ease;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--papel); color: var(--leitura); font: 400 var(--tipo-corpo)/1.65 var(--sans); font-optical-sizing: auto; overflow-wrap: break-word; }
.loading-screen { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: var(--espaco-6); padding: var(--espaco-8); background: var(--papel); color: var(--leitura); text-align: center; }
.loading-brand { width: min(9rem, 42vw); height: auto; }
.loading-progress { display: block; width: 3.5rem; height: 3.5rem; overflow: visible; }
.loading-progress circle { fill: none; stroke-width: 3.5; }
.loading-progress-track { stroke: var(--linha); }
.loading-progress-indicator { stroke: var(--marca); stroke-linecap: round; stroke-dasharray: 58 131; transform-origin: 50% 50%; animation: loading-rotate 1.15s linear infinite; }
.loading-progress-text { margin: 0; color: var(--texto-secundario); font: 600 var(--tipo-apoio)/1.4 var(--sans); }
@keyframes loading-rotate { to { transform: rotate(1turn); } }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; transition: color var(--movimento), background-color var(--movimento), border-color var(--movimento); }
a:hover { color: var(--marca); text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--marca); outline-offset: 4px; }
:where([tabindex="-1"]):focus { outline: none; }
:where(h1, h2, h3)[id]:target { background: var(--suave); box-shadow: 0 0 0 .25rem var(--suave); border-radius: .15rem; }
[id] { scroll-margin-top: var(--espaco-6); }
h1, h2, h3, h4, .type-display, .type-section, .type-topic { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1, .type-display { font-size: var(--tipo-display); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 var(--espaco-6); max-width: 24ch; }
h2, .type-section { font-size: var(--tipo-secao); line-height: 1.15; margin: 0 0 var(--espaco-4); }
h3, .type-topic { font-size: var(--tipo-topico); line-height: 1.2; margin: 0 0 var(--espaco-3); }
h4 { font-size: 1.375rem; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.4rem; }
li + li { margin-top: var(--espaco-3); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
button, input, textarea, select { font: inherit; }
button, summary, select { cursor: pointer; }
[hidden] { display: none !important; }
.wrap { width: min(72rem, calc(100% - 4rem)); margin-inline: auto; }
.lead { font: 400 1.125rem/1.5 var(--sans); max-width: 64ch; }
.body-copy { font: 400 var(--tipo-corpo)/1.65 var(--sans); }
.compact-copy { font: 400 var(--tipo-compacto)/1.6 var(--sans); }
.control-copy { font: 600 var(--tipo-controle)/1.4 var(--sans); }
.support-copy { font: 400 var(--tipo-apoio)/1.5 var(--sans); color: var(--texto-secundario); }
.eyebrow { color: var(--marca); font-size: var(--tipo-apoio); font-weight: 600; line-height: 1.5; margin-bottom: var(--espaco-3); }
.introduction, .brand-signature { font: 400 var(--tipo-marca)/1.2 var(--serif); color: var(--marca); margin-bottom: .35em; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 100; padding: .8rem 1rem; background: var(--superficie); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Cabeçalho, escala e navegação comuns. */
.identity { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .5rem; border-bottom: 2px solid var(--marca); position: relative; z-index: 20; }
.brand { display: inline-block; flex-shrink: 0; }
.brand picture { display: block; }
.brand img { width: 10.5rem; }
.main-nav { font: 400 .875rem/1.4 var(--sans); }
.nav-list, .nav-submenu { list-style: none; padding: 0; margin: 0; }
.nav-list { display: flex; align-items: center; gap: .75rem; }
.nav-list > li, .nav-submenu > li { margin: 0; }
.nav-item { position: relative; }
.nav-entry { display: flex; align-items: center; border-radius: var(--raio); transition: background-color var(--movimento); }
.nav-entry:hover, .nav-item.is-open > .nav-entry { background: var(--suave); }
.nav-link { position: relative; display: flex; align-items: center; min-height: 44px; padding: .5rem .35rem; text-decoration: none; white-space: nowrap; }
.nav-link[aria-current]::after { content: ""; position: absolute; height: 2px; background: var(--marca); bottom: .2rem; left: .35rem; right: .35rem; }
.nav-link:hover { color: var(--marca); text-decoration: none; }
.nav-toggle { display: inline-grid; place-items: center; width: 28px; min-height: 44px; border: 0; background: transparent; color: var(--marca); border-radius: var(--raio); }
.nav-toggle:hover { background: #1e480d12; }
.nav-chevron { width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.12rem) rotate(45deg); transition: transform var(--movimento); }
[aria-expanded="true"] > .nav-chevron { transform: translateY(.12rem) rotate(225deg); }
.nav-submenu { position: absolute; top: 100%; left: 0; z-index: 25; width: 19rem; max-width: calc(100vw - 2rem); padding: .5rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(.3rem); transition: opacity var(--movimento), transform var(--movimento); }
.nav-item:nth-last-child(-n+3) > .nav-submenu { left: auto; right: 0; }
.nav-item.is-open > .nav-submenu { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.nav-submenu a { display: block; min-height: 44px; padding: .65rem .75rem; border-radius: .2rem; font-size: var(--tipo-controle); line-height: 1.45; text-decoration: none; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { color: var(--marca); background: var(--suave); }
.nav-submenu a[aria-current] { color: var(--marca); box-shadow: inset 3px 0 var(--marca); background: var(--suave); }
.nav-mobile-toggle { display: none; }
@media (scripting: none) {
  .identity[data-nav-ready] nav.main-nav { display: block; }
  .identity[data-nav-ready] button.nav-mobile-toggle, .nav-toggle { display: none; }
  .identity .nav-item:focus-within > .nav-submenu, .identity .nav-item:hover > .nav-submenu { display: block; visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
}
.breadcrumb { margin-top: var(--espaco-4); font-size: var(--tipo-apoio); color: var(--texto-secundario); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.breadcrumb li + li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--acento); }

/* A grade da abertura muda; os papéis tipográficos permanecem comuns. */
.opening { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: var(--espaco-8); padding-block: var(--espaco-4); }
.opening-copy { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.opening h1 { max-width: none; margin-bottom: var(--espaco-4); }
.opening .lead { max-width: none; margin: 0; }
.scene { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.chapter { padding-block: var(--espaco-8); border-top: 1px solid var(--marca); }
.company-process { padding-top: var(--espaco-6); }
.moments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaco-8); }
.moment { min-width: 0; }
.moment-number { display: flex; align-items: center; gap: .85rem; margin-bottom: var(--espaco-3); font-size: var(--tipo-apoio); color: var(--marca); }
.moment-number::after { content: ""; flex: 1; border-top: 1px solid var(--marca); }
.moments p { font-size: var(--tipo-compacto); line-height: 1.6; }
.invitation { margin: var(--espaco-4) 0 0; padding: 0; border: 0; font: 400 var(--tipo-convite)/1.3 var(--serif); max-width: none; }
.invitation strong { color: var(--marca); font-weight: 400; }
.invitation a { color: var(--marca); text-decoration: none; }
.invitation a:hover, .invitation a:focus-visible { text-decoration: underline; }
.learn-more { margin-top: var(--espaco-3); font-size: var(--tipo-controle); }
.learn-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marca); text-decoration-thickness: 1px; }
.learn-more a::after { content: "\2192"; margin-left: .5rem; transition: transform var(--movimento); }
.learn-more a:hover::after { transform: translateX(.2rem); }
.opening .learn-more { margin: auto 0 0; padding-top: .75rem; }
.context-links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: var(--espaco-6); font-size: var(--tipo-controle); }
.context-links a { display: inline-block; min-height: 40px; padding-block: .4rem; color: var(--marca); }
.page-heading { padding-block: 1.75rem 2rem; }
.page-heading .intro { font-size: 1.125rem; }
.editorial-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 1rem 2.5rem; padding-block: var(--espaco-6); border-top: 1px solid var(--linha); }
.editorial-row h2, .editorial-row h3 { max-width: 23ch; }
.copy, .reading-body { min-width: 0; }
.reference-list { font-size: var(--tipo-controle); line-height: 1.7; }
.reading-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; padding-bottom: var(--espaco-8); align-items: start; }
.contents { font-size: var(--tipo-apoio); border-top: 1px solid var(--marca); padding-top: .6rem; }
.contents summary { font-weight: 600; padding: .4rem 0; }
.contents ol { padding-left: 0; list-style: none; margin-top: .5rem; }
.contents li + li { margin-top: .25rem; }
.contents a { display: block; min-height: 40px; padding-block: .4rem; }
.chapter > .contents ol, main > .contents ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 2rem; }
.reading-page { max-width: 76ch; }
.reading-single { grid-template-columns: minmax(0, 1fr); }
.reading-body > section { padding-block: var(--espaco-6) var(--espaco-8); border-top: 1px solid var(--linha); }
.reading-body > section:first-child { border-top-color: var(--marca); }
.reading-body .subsection { margin-top: var(--espaco-8); }
.reading-body .subsection h3, .reading-body > section > h3 { color: var(--marca); }
.reading-body > section > h3 { margin-top: var(--espaco-8); }
.principles-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-8); }
.principles-intro section { border-top: 2px solid var(--marca); background: var(--suave); padding: var(--espaco-6); border-radius: 0 0 var(--raio) var(--raio); }
.values { padding-block: var(--espaco-8); }
.values .editorial-row h3 { color: var(--marca); }
.value-number { display: block; font: 400 .8125rem/1.5 var(--sans); margin-bottom: var(--espaco-3); color: var(--texto-secundario); }
.catalog-item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 1rem 2.5rem; border-top: 1px solid var(--marca); padding-block: var(--espaco-8); }
.catalog-item h2 { color: var(--marca); }
.product-stage, .cf-stage { display: table; width: fit-content; color: var(--marca); background: var(--suave); border: 1px solid var(--linha); border-radius: .25rem; padding: .3rem .65rem; font-size: var(--tipo-apoio); font-weight: 600; margin-top: var(--espaco-4); }
.creation-reading { width: min(100%, 68ch); margin-inline: auto; padding-block: 1.75rem 2.5rem; }
.creation-intro { padding-bottom: var(--espaco-6); }
.creation-intro .eyebrow { margin-bottom: .5rem; }
.creation-chapter { padding-block: var(--espaco-6); border-top: 1px solid var(--linha); }
.creation-reading > .context-links { padding-top: var(--espaco-4); border-top: 1px solid var(--marca); }

/* Controles e estados usados pela referência e pelo site. */
.button { display: inline-flex; justify-content: center; align-items: center; width: fit-content; min-height: 3rem; padding: .75rem 1.2rem; border: 1px solid var(--marca); border-radius: var(--raio); background: var(--marca); color: var(--superficie); font: 600 var(--tipo-controle)/1.4 var(--sans); text-decoration: none; transition: background-color var(--movimento), box-shadow var(--movimento), transform var(--movimento); }
.button:hover { background: var(--marca-hover); color: var(--superficie); text-decoration: none; box-shadow: 0 .25rem .6rem #04202715; transform: translateY(-1px); }
.button.secondary { background: transparent; color: var(--marca); }
.button.secondary:hover { background: var(--suave); }
.button:disabled { cursor: default; border-style: dashed; border-color: var(--linha); background: var(--papel); color: var(--texto-secundario); box-shadow: none; transform: none; }
.contact, .surface-panel { background: var(--suave); padding: var(--espaco-8); border-radius: var(--raio); }
.contact { margin-top: var(--espaco-8); }
.contact form { display: grid; gap: 1.25rem; }
.field label { display: block; font-size: var(--tipo-controle); font-weight: 600; margin-bottom: .4rem; }
input, textarea, select { width: 100%; min-width: 0; padding: .8rem; border: 1px solid #71816b; border-radius: var(--raio); background: var(--superficie); color: var(--leitura); font: 400 var(--tipo-compacto)/1.5 var(--sans); transition: border-color var(--movimento), box-shadow var(--movimento); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--marca); }
textarea { min-height: 10rem; resize: vertical; }
.field-hint { font-size: .8125rem; margin-top: .4rem; color: var(--texto-secundario); }
.field-error { color: var(--erro); font-size: .875rem; margin-top: .4rem; }
[aria-invalid="true"] { border: 2px solid var(--erro); }
.demo-note, .warm-note { padding: .8rem 1rem; background: var(--acento-suave); border-left: 3px solid var(--acento); font-size: var(--tipo-apoio); border-radius: 0 var(--raio) var(--raio) 0; }
.error-summary, .contact-feedback { padding: 1rem 1.25rem; border-left: 3px solid var(--marca); margin-bottom: var(--espaco-6); background: var(--superficie); }
.error-summary { color: var(--erro); border-color: var(--erro); }
.contact-feedback { margin-top: var(--espaco-6); }
.unavailable { margin-top: var(--espaco-6); }
.unavailable p { margin-top: .75rem; font-size: var(--tipo-apoio); color: var(--texto-secundario); }

.cf-hero { padding-block: 1.75rem var(--espaco-8); }
.cf-hero .lead { max-width: 72ch; }
.cf-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cf-scenes figure { min-width: 0; }
.cf-scenes img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.cf-scenes figcaption { padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--marca); }
.cf-scene-heading { display: flex; align-items: baseline; gap: .75rem; }
.cf-scene-number { font: 400 .8125rem/1.5 var(--sans); color: var(--marca); }
.cf-scenes h3 { margin: 0; min-height: 2.4em; }
.cf-scene-copy { margin-top: var(--espaco-4); font-size: var(--tipo-compacto); }
.cf-scene-note { font-size: var(--tipo-apoio); margin-top: var(--espaco-6); color: var(--texto-secundario); max-width: none; }
.cf-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-8); }
.cf-models section { min-width: 0; padding: var(--espaco-6); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.cf-models h3 { color: var(--marca); }
.cf-school-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-8); }
.cf-school-intro > p { max-width: none; margin: 0; }
.cf-school-intro > p:first-child { grid-column: 1 / -1; }
.cf-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-8); padding-top: var(--espaco-8); }
.cf-roles section { border-top: 1px solid var(--linha); padding-top: var(--espaco-6); min-width: 0; }
.cf-roles p { font-size: var(--tipo-compacto); }
.cf-limit-note { background: var(--acento-suave); border-left: 3px solid var(--acento); padding: 1rem 1.25rem; margin-bottom: var(--espaco-8); max-width: 90ch; font-size: var(--tipo-controle); }
.cf-foundations .editorial-row h3 { color: var(--marca); }
.cf-games { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 1rem 2.5rem; padding-top: var(--espaco-6); }

.end-nav { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1.25rem 2rem; border-top: 2px solid var(--marca); padding-block: 1.5rem 2rem; }
.end-nav .brand-name { font: 400 1.75rem/1.2 var(--serif); color: var(--marca); margin: 0; }
.end-nav nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--tipo-controle); }
.end-nav a { padding-block: .4rem; }
.end-nav .return-top { font-size: .8125rem; }
.study-tools { border-top: 1px solid var(--linha); font-size: .8125rem; }
.study-tools summary { padding-block: .55rem; }
.study-panel { padding: .5rem 0 1.25rem; }
.study-panel p { max-width: 90ch; }
.study-panel nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .75rem; }
.review-references { border-top: 1px solid var(--linha); padding-block: 1.5rem; font-size: var(--tipo-apoio); }
.review-references summary { font-weight: 600; padding-block: .5rem; }
.review-references nav { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; padding-block: var(--espaco-4); }
.email-wrap { width: min(42rem, calc(100% - 2rem)); margin: 2rem auto 3rem; }
.email-preview { background: var(--superficie); border: 1px solid var(--linha); padding: 2rem; border-radius: var(--raio); }
.email-preview .brand img { width: 12rem; }
.email-preview h2 { margin-top: var(--espaco-8); }
.email-preview dl { margin: 1.5rem 0 2rem; border-top: 1px solid var(--linha); }
.email-preview dt { font-size: .8125rem; color: var(--texto-secundario); padding-top: var(--espaco-4); }
.email-preview dd { margin: .2rem 0 0; }
.email-message { border-top: 1px solid var(--linha); padding-top: var(--espaco-6); }
.email-message p { white-space: pre-wrap; }

/* A referência utiliza as classes anteriores, sem uma segunda folha de estilo. */
.reference-heading { padding-block: 1.5rem; border-bottom: 1px solid var(--marca); }
.reference-heading h1, .reference-heading .support-copy { max-width: none; }
.reference-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: var(--espaco-4); }
.reference-index { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-block: .75rem; border-bottom: 1px solid var(--linha); font-size: var(--tipo-controle); }
.reference-index a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marca); }
.reference-section { padding-block: var(--espaco-8); border-bottom: 1px solid var(--linha); }
.reference-intro { max-width: 76ch; margin-bottom: var(--espaco-6); }
.reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaco-4); }
.color-swatch { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--superficie); }
.color-chip { min-height: 4.5rem; border-bottom: 1px solid var(--linha); }
.color-description { padding: .85rem; }
.color-description strong { display: block; font-size: var(--tipo-controle); margin-bottom: .25rem; }
code { font-family: Consolas, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.color-description p { margin-top: .5rem; font-size: .875rem; line-height: 1.5; color: var(--texto-secundario); }
.type-example { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem 2rem; align-items: start; padding-block: 1.5rem; border-top: 1px solid var(--linha); }
.type-meta { color: var(--texto-secundario); font-size: .875rem; }
.type-meta strong, .type-meta code, .type-meta output { display: block; margin-bottom: .35rem; }
.type-example .type-display, .type-example .type-section, .type-example .type-topic, .type-example .brand-signature { margin: 0; }
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-6); }
.component-sample { border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--espaco-6); background: var(--superficie); min-width: 0; }
.component-sample h3 { margin-bottom: var(--espaco-4); }
.component-sample .button { margin: 0 .5rem .75rem 0; }
.component-sample > code { display: block; margin-top: var(--espaco-4); color: var(--texto-secundario); }
.identity-sample { grid-column: 1 / -1; }
.identity-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.identity-variants img { width: 10.5rem; }
.identity-variants .mark-sample { width: 4rem; }
.identity-variants figcaption { margin-top: .75rem; font-size: var(--tipo-apoio); color: var(--texto-secundario); }
.reference-table-wrap { overflow-x: auto; margin-top: var(--espaco-6); }
.reference-table { width: 100%; border-collapse: collapse; font-size: var(--tipo-controle); }
.reference-table th { background: var(--suave); color: var(--marca); text-align: left; font-weight: 600; }
.reference-table th, .reference-table td { padding: .75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.spacing-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); }
.spacing-list li { display: flex; align-items: center; gap: var(--espaco-4); margin: 0; font-size: .875rem; }
.spacing-list code { min-width: 9rem; }
.spacing-bar { height: 1rem; width: var(--sample-space); background: var(--marca); border-radius: .15rem; }
.artifact-links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.artifact-links a { color: var(--marca); min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 68rem) {
  .nav-list { gap: .25rem; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
  .reading-layout { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; }
  .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .wrap { width: calc(100% - 2.5rem); }
  .identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
  .main-nav { grid-column: 1 / -1; }
  .nav-list { display: block; border-top: 1px solid var(--linha); padding-top: .5rem; }
  .nav-entry { justify-content: space-between; }
  .nav-link { flex: 1; padding-inline: .5rem; }
  .nav-toggle { width: 44px; }
  .nav-submenu { display: none; position: static; width: auto; max-width: none; margin: 0 0 .5rem .75rem; padding: .25rem .5rem; border: 0; border-left: 2px solid var(--linha); border-radius: 0; background: var(--superficie); box-shadow: none; transition: none; }
  .nav-item.is-open > .nav-submenu { display: block; visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .identity[data-nav-ready] .main-nav { display: none; }
  .identity[data-nav-ready][data-nav-open] .main-nav { display: block; }
  .identity[data-nav-ready] .nav-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--linha); border-radius: var(--raio); background: transparent; color: var(--marca); font-size: .875rem; }
  .opening { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: var(--espaco-6); }
  .scene { aspect-ratio: 3 / 2; object-fit: contain; }
  .introduction { font-size: 1.75rem; }
  .opening .lead { font-size: var(--tipo-compacto); }
  .chapter { padding-block: 1.75rem; }
  .reading-layout { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-8); }
  .contents { border-bottom: 1px solid var(--linha); padding-bottom: .5rem; }
  .contents a, .context-links a, .end-nav nav a, .breadcrumb a { min-height: 44px; padding-block: .6rem; }
  .chapter > .contents ol, main > .contents ol { grid-template-columns: minmax(0, 1fr); }
  .principles-intro, .editorial-row, .catalog-item, .cf-scenes, .cf-models, .cf-school-intro, .cf-roles, .cf-games { grid-template-columns: minmax(0, 1fr); }
  .editorial-row, .catalog-item, .cf-games { gap: .75rem; }
  .editorial-row h2, .editorial-row h3 { max-width: 28ch; }
  .cf-scenes { gap: var(--espaco-8); }
  .cf-scenes h3 { min-height: 0; }
  .cf-models, .cf-roles { gap: var(--espaco-6); }
  .contact, .surface-panel { padding: var(--espaco-6); }
  .creation-reading { padding-top: var(--espaco-6); }
  .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-example { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .type-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
  .type-meta strong, .type-meta code, .type-meta output { margin: 0; }
  .component-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .wrap { width: calc(100% - 2rem); }
  .moments { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-8); }
  .invitation { font-size: 1.375rem; }
  .contact { padding: 1.25rem; }
  .email-preview { padding: 1.5rem; }
  .reference-grid { grid-template-columns: minmax(0, 1fr); }
  .spacing-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 24rem) {
  .identity .brand img { width: 3.75rem; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:hover, .learn-more a:hover::after { transform: none; }
}


/* Abertura de Serviços: título e apresentação ocupam a mesma faixa. */
.services-opening { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-8); align-items: start; }
.services-opening h1 { max-width: none; margin-bottom: 0; }
.services-opening .intro p { max-width: none; }
@media (max-width: 52rem) { .services-opening { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); } }

.service-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--espaco-6); }
.service-offer { padding:var(--espaco-6); border:1px solid var(--linha); background:var(--superficie); border-radius:var(--raio); }
.service-offer h3 { margin-top:0 !important; color:var(--marca); }
.service-offer p,.service-offer li { font-size:var(--tipo-compacto); }
.service-offer li + li { margin-top:.4rem; }
@media(max-width:52rem) { .service-offers { grid-template-columns:minmax(0,1fr); } }

/* Formulário integrado à API, com os campos reais do componente Blazor. */
.contact form { display: grid; gap: 1.25rem; }
.contact .field label { display: block; font-size: var(--tipo-controle); font-weight: 600; margin-bottom: .4rem; }
.contact .field input, .contact .field select, .contact .field textarea {
  display: block; width: 100%; min-height: 2.75rem; padding: .65rem .75rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--leitura);
}
.contact .field textarea { min-height: 9rem; resize: vertical; }
.contact .field input:focus, .contact .field select:focus, .contact .field textarea:focus { border-color: var(--marca); }
.contact .button { cursor: pointer; }
.contact-trap { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contact-status { padding: 1rem 1.25rem; border-left: 3px solid var(--marca); background: var(--superficie); margin-top: var(--espaco-6); }
.recaptcha-disclaimer { max-width: 38rem; }
.contact-validation-summary:has(> ul:empty) { display: none; }
.contact-validation-summary:focus { outline: 2px solid var(--marca); outline-offset: 3px; }
.contact-validation-summary ul { margin: 0; }
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0; z-index: 1000; padding: 1rem; background: var(--acento-suave); color: var(--leitura); }
#blazor-error-ui.show { display: block; }
#blazor-error-ui .dismiss { margin-left: 1rem; cursor: pointer; }