/* A.R.L.S. Brasil 4.587 · tokens da direção visual (_plano/direcao-visual.md, seção 2) */
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1A120D;
  --ink-soft: #6B625C;
  --surface: #FFFFFF;
  --surface-soft: #F4F2EF;
  --line: #8C8684;
  --brand: #772534;
  --brand-press: #6A212F;
  --accent: #009440;
  --gold: #FFCB00;
  --blue: #302681;
  --white: #FFFFFF;
  --focus: #302681;
  --focus-on-dark: #FFCB00;
  --font-title: "Source Serif 4", Georgia, serif;
  --font-text: "Source Sans 3", system-ui, sans-serif;
  --dur-in: 420ms; --dur-ui: 180ms; --dur-press: 100ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --stagger: 70ms; --rise: 16px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --measure: 65ch;
  --max: 1200px;
  /* home v2 */
  --field-sky: var(--blue);
  --on-sky: var(--white);
  --on-sky-accent: var(--gold);
  --focus-on-sky: var(--white);
  --plate: var(--white);
  --plate-current: var(--brand);
  --plate-ratio: 4 / 5;
  --plate-lg: 384px;  --plate-sm: 120px;
  --plate-lg-m: 240px; --plate-sm-m: 88px;
  --ease-star: cubic-bezier(.23, 1, .32, 1);
  --dur-star: 360ms; --stagger-star: 90ms;
  /* home v3 e v4 */
  --night: #1B1550;
  --lavender: #D9D5F5;
  /* v5 (direcao-v5.md, 4). --accent (#009440) só como fundo ou texto grande; texto verde pequeno usa --green-ink */
  --green-deep: #005A27;
  --green-ink: #00652C;
  --on-green: #FFFFFF;
  --on-green-soft: #D9F0E1;
  --on-green-accent: #FFCB00;
  --on-gold: #1A120D;
  --on-brand-soft: #F3D9DE;
  --rule: #E6E2DE;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-text); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.55;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-title); margin: 0; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-weight: 700; color: var(--brand); font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 1.5rem; }
h3 { font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 30; background: var(--brand); color: var(--white); padding: .75rem 1rem; font-weight: 600; }
.skip:focus { top: .5rem; outline-color: var(--focus); }

/* marcador de prévia para valores pendentes */
.tbc {
  display: inline-block; font-family: var(--font-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
  color: var(--ink-soft); border: 1px dashed var(--ink-soft); padding: 0 .4em; vertical-align: .1em; white-space: nowrap;
}

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.soft { background: var(--surface-soft); }
.lead { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.4; }
.note { color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }

/* botões: cantos retos no site inteiro */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font: 600 1rem/1.3 var(--font-text); border: 2px solid var(--brand); border-radius: 0; cursor: pointer;
  text-decoration: none; transition: background-color var(--dur-press), transform var(--dur-press);
}
.btn-primary { background: var(--brand); color: var(--white); }
.btn-primary:hover { background: var(--brand-press); border-color: var(--brand-press); }
.btn-secondary { background: var(--white); color: var(--brand); }
.btn-secondary:hover { background: var(--surface-soft); }
.btn:active { transform: scale(.98); }
.btn[aria-disabled="true"] { cursor: not-allowed; }

/* 7.1 cabeçalho: ver bloco v8 no fim */

/* herói v7/v8: o quadro é o fundo do herói inteiro; selo ao centro direto sobre o quadro (sem disco nem elipse);
   a leitura vem dos degradês verticais do .quadro::after (bloco v8 no fim). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero { --veu: 48 38 129; --selo: 200px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; background: var(--blue); color: var(--on-sky); }
/* celular: o quadro começa abaixo do topo do selo; a faixa de cima é azul liso e se funde ao céu */
.hero .quadro { position: absolute; margin: 0; z-index: -2; overflow: hidden; }
.hero .quadro picture, .hero .quadro img { display: block; width: 100%; height: 100%; }
.hero .quadro img { object-fit: cover; object-position: 20% 50%; }
/* crédito: no celular vai no pé da caixa do quadro, sobre o azul do véu, longe do selo e de D. Pedro */
.hero .quadro figcaption { position: absolute; left: 16px; right: 16px; bottom: 12px; padding: 4px 8px; font-size: .75rem; line-height: 1.3; color: var(--white); text-align: center; background: rgb(26 18 13 / .62); }
.quadro cite { font-style: italic; }
/* quadro não carregou: some com o crédito; fica o azul liso */
.hero.sem-quadro .quadro { display: none; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px 0; }
/* selo oficial: nunca abaixo de 160 px; direto sobre o quadro, sem fundo, sombra nem filtro (v8) */
.selo { display: block; flex: none; width: var(--selo); height: var(--selo); margin: 0; }
.hero-txt { position: relative; margin-top: auto; padding: 0 0 64px; width: 100%; }
.hero h1 { margin-top: 0; font-size: clamp(2.5rem, 1.6rem + 1.6vw, 3rem); line-height: 1.04; }
.hero .lead { margin: 12px auto 0; max-width: 30ch; font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem); line-height: 1.4; }
.hero-actions { margin-top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.hero-actions .btn { width: 100%; }
.hero .btn-primary { background: var(--on-sky-accent); border-color: var(--on-sky-accent); color: var(--ink); transition: background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-press); }
.hero-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; color: var(--on-sky); font-weight: 600; text-underline-offset: 6px; transition: color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .hero .btn-primary:hover { background: var(--white); border-color: var(--white); }
  .hero-link:hover, .facts a:hover { color: var(--on-sky-accent); }
}
.hero :focus-visible { outline-color: var(--focus-on-sky); outline-offset: 3px; }
.hero .facts { position: relative; margin: 0 16px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-actions { flex-direction: row; justify-content: center; gap: 28px; }
  .hero-actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero { --selo: clamp(240px, 36svh, 280px); min-height: max(640px, 100svh - 72px); }
  .hero .quadro { inset: 0; height: auto; }
  /* D. Pedro fica a 41% da largura do quadro: ampliar 1,2x a partir da borda direita o leva para a esquerda do selo e do texto */
  .hero .quadro img { object-position: 100% 50%; transform: scale(1.2); transform-origin: 100% 45%; }
  .hero .facts { margin: 0; background: rgb(var(--veu) / .94); }
  .hero-in { position: relative; z-index: 2; } /* QA 13, B2: o degradê da faixa de fatos não pode cobrir botão e link */
  .hero-in { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(32px + var(--selo) / 8) var(--gutter) 40px; min-height: 0; justify-content: center; }
  .hero-txt { max-width: 40rem; margin-top: calc(var(--selo) / 8 + 20px); padding: 0; }
  .hero .lead { max-width: 36ch; }
  .hero h1 { white-space: nowrap; } /* QA 12, I9: uma linha de 1024 a 1920 */
  .hero-actions { margin-top: 28px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; }
  .hero-actions .btn { width: auto; }
  .hero .quadro figcaption { left: auto; right: max(var(--gutter), (100% - var(--max)) / 2); top: 16px; bottom: auto; max-width: 26ch; text-align: right; } /* no céu, à direita, estreito para não chegar à proteção do selo */
}
/* faixa de fatos (v4, sem mudança) */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 16px; border-top: 2px solid var(--gold); padding: 24px 0 32px; }
.facts dt { font-weight: 600; font-size: 1rem; }
.facts dd { margin: .25rem 0 0; font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.facts .facts-vm { grid-column: 1 / -1; }
.facts a { color: var(--on-sky); text-underline-offset: 4px; display: inline; padding-block: 10px; margin-block: -10px; }
@media (min-width: 1024px) {
  .facts { height: 96px; margin: 0; padding: 0 max(var(--gutter), (100% - var(--max)) / 2); border-top: 0; box-shadow: inset 0 2px 0 var(--gold); grid-template-columns: repeat(5, auto); justify-content: space-between; align-items: center; gap: 24px; }
  .facts .facts-vm { grid-column: auto; }
}

/* banner B, rotativo (direcao-v7.md, 2, 3 e 6): crossfade só de opacity; controles numa pílula de vidro sobre a foto; sem JS, só a 1ª foto e sem pílula */
.rot { position: relative; background: var(--ink); }
.rot-palco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rule); }
.rot-palco figure { position: absolute; inset: 0; margin: 0; }
.rot-palco img { width: 100%; height: 100%; object-fit: cover; } /* as fotos já chegam na proporção; cobre só o subpixel */
.rot:not(.is-js) .rot-palco figure:not(:first-child), .rot:not(.is-js) .rot-ctl { display: none; }
/* todas as fotos ficam no fluxo (opacity + visibility), então o lazy nativo baixa as 5 quando o banner se aproxima */
.rot.is-js .rot-palco figure { opacity: 0; visibility: hidden; transition: opacity 900ms cubic-bezier(.4, 0, .2, 1); }
.rot.is-js .rot-palco figure.on { opacity: 1; }
.rot.is-js .rot-palco figure.on, .rot.is-js .rot-palco figure.sai { visibility: visible; }
.rot-titulo, .rot-ctl { -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); background: rgb(26 18 13 / .62); color: var(--white); border-radius: 999px; z-index: 2; position: absolute; }
.rot-titulo { left: 16px; bottom: 16px; margin: 0; padding: 0 12px; height: 32px; display: flex; align-items: center; font: 600 .75rem/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; }
.rot-ctl { right: 16px; bottom: 16px; display: flex; align-items: center; height: 44px; padding: 0 4px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14) inset, 0 6px 20px rgb(26 18 13 / .25); }
.rot-ctl button { width: 44px; height: 44px; min-width: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 160ms ease; }
.rot-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rot-ctl .i-play, .rot.is-parado .rot-ctl .i-pausa { display: none; }
.rot.is-parado .rot-ctl .i-play { display: inline; }
.rot-ctl :focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .rot-ctl button:hover { background: rgb(255 255 255 / .14); } }
.rot-cont { margin: 0 6px 0 2px; font: 500 .8125rem/1 var(--font-text); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rot-de { margin: 0 3px; opacity: .7; }
.rot-prog { display: flex; gap: 4px; margin: 0 6px; padding: 0; list-style: none; }
.rot-prog li { position: relative; width: 14px; height: 2px; border-radius: 1px; background: rgb(255 255 255 / .38); overflow: hidden; }
.rot-prog li::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.rot-prog li.feito::after { transform: scaleX(1); }
.rot-prog li.atual::after { animation: rot-enche 6000ms linear forwards; }
.rot.is-parado .rot-prog li.atual::after, .rot.is-segura .rot-prog li.atual::after { animation-play-state: paused !important; }
@keyframes rot-enche { to { transform: scaleX(1); } }
/* movimento reduzido: troca sem crossfade; a barra continua, porque é o relógio (só enche depois do play) */
@media (prefers-reduced-motion: reduce) {
  .rot.is-js .rot-palco figure { transition: none; }
  .rot-prog li.atual::after { animation-name: rot-enche !important; animation-duration: 6000ms !important; animation-timing-function: linear !important; animation-fill-mode: forwards !important; }
}
@media (max-width: 767px) { .rot-titulo { display: none; } .rot-ctl { right: 8px; bottom: 8px; } .rot-prog li { width: 10px; } }
@media (min-width: 1024px) {
  .rot-palco { aspect-ratio: 16 / 7; }
  .rot-titulo { left: max(var(--gutter), (100% - var(--max)) / 2); bottom: 26px; }
  .rot-ctl { right: max(var(--gutter), (100% - var(--max)) / 2); bottom: 20px; }
  .rot-prog li { width: 20px; }
}

/* galeria de Veneráveis (direcao-home-v2.md, 4) */
.vm-intro { margin-bottom: 48px; }
.vm-grid { display: grid; gap: 40px; }
.placa { position: relative; aspect-ratio: var(--plate-ratio); background: var(--plate); flex: none; }
.placa-atual { width: min(100%, var(--plate-lg-m)); background: var(--plate-current); color: var(--white); }
/* sem retrato: passe-partout (filete interno) e monograma; somem quando data-retrato="sim" */
.placa::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--brand); pointer-events: none; }
.placa-atual::before { inset: 16px; border-color: var(--gold); }
.placa[data-retrato="sim"]::before { display: none; }
.placa-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-title); font-weight: 600; line-height: 1; letter-spacing: .04em; font-variant-numeric: lining-nums; font-size: 2rem; color: var(--brand); }
.placa-atual .placa-mono { font-size: clamp(6rem, 4rem + 6vw, 9rem); font-weight: 700; color: var(--gold); }
.placa-cruzeiro { position: absolute; top: 32px; left: 50%; translate: -50% 0; width: 48px; height: 55px; color: var(--gold); }
.placa img { display: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.placa[data-retrato="sim"] img { display: block; }
.placa[data-retrato="sim"] > :not(img, .placa-credito) { display: none; }
.placa-atual[data-retrato="sim"] { padding: 12px; }
.vm-item .placa[data-retrato="sim"] { padding: 9px; } /* parecer 4, item 2 */
.vm-item .placa[data-retrato="sim"]::before { display: block; inset: 8px; z-index: 1; }
.js .placa img { opacity: 0; transition: opacity 240ms ease; }
.js .placa img.is-loaded { opacity: 1; }
.vm-texto { min-width: 0; }
/* crédito do retrato: dentro da placa, logo abaixo dela (reserva a altura de 2 linhas) */
.placa-credito { position: absolute; top: 100%; left: 0; right: 0; font-size: .8125rem; line-height: 1.3; color: var(--ink-soft); margin: .375rem 0 0; max-width: none; }
.placa[data-retrato="sim"]:has(.placa-credito) { margin-bottom: calc(2.6em + .375rem); }
.placa:not([data-retrato="sim"]) .placa-credito { display: none; }
.vm-atual .vm-texto { margin-top: 24px; }
.vm-cargo { font-weight: 600; font-size: 1rem; color: var(--brand); margin: 0 0 .25rem; }
.vm-atual h3 { font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.vm-anteriores h3 { font-weight: 600; font-size: 1.25rem; }
.vm-periodo { font-size: 1.125rem; margin: .25rem 0 0; font-variant-numeric: tabular-nums; }
.vm-nota { font-size: 1rem; color: var(--ink-soft); margin: .25rem 0 0; }
.vm-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: .25rem 0 0; }
.vm-texto a { display: inline-flex; align-items: center; width: auto; max-width: 100%; min-height: 48px; transition: color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) { .vm-texto a:hover { color: var(--brand-press); text-decoration-thickness: 2px; } }
.vm-anteriores { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.vm-item { display: flex; gap: 16px; align-items: flex-start; }
.vm-item .placa { width: var(--plate-sm-m); }
@media (min-width: 768px) {
  .placa-atual { width: var(--plate-lg); }
  .placa-mono { font-size: 2.75rem; }
  .vm-item { gap: 24px; }
  .vm-item .placa { width: var(--plate-sm); }
  .vm-anteriores h3 { font-size: 1.5rem; }
  .vm-anteriores { gap: 32px; }
}
@media (min-width: 1024px) {
  .vm-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .vm-atual { grid-column: 1 / 6; }
  .vm-anteriores { grid-column: 7 / 13; row-gap: 40px; }
}

/* 7.2 estandarte */
.estandarte-grid { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.estandarte-fig { margin: 0; }
.estandarte-fig svg { width: min(100%, 300px); margin: 0 auto; }
.estandarte-fig svg [id] { transition: opacity var(--dur-ui) var(--ease-out); }
.estandarte-fig svg.is-dim .dim { opacity: .28; }
.js .estandarte-fig svg g[id] { cursor: pointer; }
.simbolos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.simbolo { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: start; padding-left: 1rem; }
.simbolo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform var(--dur-ui) var(--ease-out);
}
.simbolo.is-active::before { transform: scaleY(1); }
.simbolo p { margin: .35rem 0 0; }
.simbolo h3 button {
  all: unset; cursor: pointer; display: inline-block; min-height: 40px; padding: .25rem 0;
  font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px;
}
.simbolo h3 button:hover { text-decoration-color: var(--brand); }
.simbolo h3 button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.thumb { width: 72px; height: 72px; background: var(--brand); }
.fonte { margin-top: 3rem; }
.fonte a { display: inline-block; padding-block: .65rem; }
@media (max-width: 767px) { .simbolo { padding-left: .75rem; } }
@media (min-width: 768px) {
  .estandarte-grid { grid-template-columns: repeat(12, 1fr); }
  .estandarte-fig { grid-column: 1 / 6; align-self: stretch; } /* a figura ocupa a linha toda: o svg sticky acompanha o índice */
  .estandarte-fig svg { width: auto; max-height: 88svh; position: sticky; top: 24px; }
  .simbolos { grid-column: 7 / 13; }
  .simbolo { grid-template-columns: 1fr; }
  .thumb { display: none; }
}
@media (min-width: 768px) and (max-height: 499px) { .estandarte-fig svg { position: static; } }

/* 7.2.4 tabela de cores; vira lista empilhada no celular */
.cores { width: 100%; border-collapse: collapse; margin-top: 4rem; }
.cores caption { text-align: left; font-family: var(--font-title); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: 1rem; }
.cores th, .cores td { text-align: left; vertical-align: top; padding: .75rem 1rem .75rem 0; }
.cores thead th { font-size: 1rem; color: var(--ink-soft); }
.cores tbody th { font-weight: 600; }
.amostra { display: block; width: 40px; height: 40px; }
.amostra.bordo { background: var(--brand); } .amostra.amarelo { background: var(--gold); } .amostra.azul { background: var(--blue); }
.amostra.verde { background: var(--accent); } .amostra.branco { background: var(--white); border: 1px solid var(--line); }
@media (min-width: 768px) { .cores th[scope=row] { width: 8rem; } .cores td:nth-child(3) { width: 18rem; } }
@media (max-width: 767px) {
  .cores thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cores, .cores tbody, .cores tr, .cores td, .cores th { display: block; }
  .cores caption { display: block; }
  .cores tr { display: grid; grid-template-columns: 40px 1fr; column-gap: 1rem; padding: 1rem 0; }
  .cores td, .cores th { padding: 0; }
  .cores td:first-child { grid-row: 1 / 4; }
  .cores td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-soft); }
}

/* 7.4 visitantes */
#visitantes.section { padding-block: clamp(4rem, 2.5rem + 4vw, 6rem); }
.sky { background: var(--field-sky); color: var(--on-sky); }
.sky h2, .sky h3, .sky a { color: var(--on-sky); }
@media (hover: hover) and (pointer: fine) { .sky a:hover { color: var(--on-sky-accent); } }
.sky :focus-visible { outline-color: var(--focus-on-sky); }
.sky .tbc { color: var(--on-sky); border-color: currentColor; }
/* 7.5 formulário (escopado em .contact-form) */
.contact-grid { display: grid; }
.contact-aside { margin-bottom: 2rem; }
.contact-aside .aside-text { font-size: 1.125rem; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(12, 1fr); column-gap: 2.5rem; }
  .contact-title { grid-column: 1 / 7; grid-row: 1; }
  .contact-form { grid-column: 1 / 7; grid-row: 2; }
  .contact-aside { grid-column: 8 / 13; grid-row: 1 / span 2; align-self: start; position: sticky; top: 2rem; margin: 0; padding-top: .75rem; }
}
.preview-note { border-left: 4px solid var(--brand); background: var(--surface); padding: 1rem 1.25rem; margin-bottom: 2rem; max-width: 100%; }
html:not(.js) .contact-form .actions { display: none; }
.contact-form .field { margin-bottom: 1.25rem; }
.contact-form label, .contact-form legend { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; margin-bottom: .5rem; padding: 0; }
.contact-form fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.contact-form .help, .contact-form .counter { color: var(--ink-soft); font-size: 1rem; margin: .4rem 0 0; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
  width: 100%; min-height: 48px; padding: .6rem .75rem; font: 400 1rem/1.4 var(--font-text); color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 0;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.contact-form input[type="text"]:hover, .contact-form input[type="email"]:hover, .contact-form input[type="tel"]:hover, .contact-form textarea:hover { border-color: var(--ink-soft); }
.contact-form textarea { resize: vertical; }
@media (max-width: 767px) { .contact-form textarea { min-height: 7.5rem; } }
.contact-form [aria-invalid="true"] { border: 2px solid var(--brand); }
.contact-form .error { font-weight: 600; color: var(--ink); font-size: 1rem; margin: .4rem 0 0; }
.contact-form .error:empty { display: none; }
.contact-form .sub { display: grid; gap: 1rem; }
.contact-form .sub label { font-weight: 400; }
.contact-form fieldset > .help { margin: 0 0 .75rem; }
.contact-form fieldset .sub label { color: var(--ink-soft); }
@media (min-width: 600px) { .contact-form .sub, .contact-form .choices { grid-template-columns: 1fr 1fr; } .contact-form .choices { display: grid; gap: 0 1.5rem; } }
.contact-form .choice { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 400; margin: 0; cursor: pointer; }
.contact-form .choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); flex: none; }
.contact-form .consent { display: flex; align-items: flex-start; gap: .75rem; font-weight: 400; cursor: pointer; }
.contact-form .consent a { padding-block: 10px; margin-block: -10px; } /* R4: alvo de ~44 px sem mexer na linha */
.contact-form .consent input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--brand); flex: none; }
.contact-form .actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.contact-form .action-row { display: flex; flex-direction: column; gap: .4rem; }
.contact-form .channel { color: var(--ink-soft); font-size: 1rem; }
.contact-form .summary { font-weight: 600; margin: 1rem 0 0; }
.contact-form .summary:empty, .contact-form .status:empty { display: none; }
.contact-form .status { margin: 1rem 0 0; }
.contact-form .after, .contact-aside .after { margin-top: 1.5rem; }
@media (min-width: 768px) {
  .contact-form .actions { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}
@media (max-width: 767px) { .contact-form .btn { width: 100%; } }

/* páginas simples */
.page { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 var(--section); }
.page h1 { margin-bottom: 2rem; font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); }
.page h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); margin: 3rem 0 1rem; }
.page ul { padding-left: 1.25rem; max-width: var(--measure); }
.page a.solo { display: inline-flex; align-items: center; min-height: 44px; }

/* 8 movimento: só com JS e sem pedido de movimento reduzido */
/* Conteúdo visível por padrão (captura, impressão, sem JS). A animação é só realce:
   o herói entra no carregamento; as outras seções quando cruzam a viewport (js/site.js põe .is-in). */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.js .reveal.is-in { animation: rise var(--dur-in) var(--ease-out) backwards; /* R39: sem fill-forwards, o hover volta a mover */ animation-delay: var(--d, 0ms); }
/* Cruzeiro do Sul: só na placa do Venerável atual (o <symbol> fica no .sprite) */
#cruzeiro path { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}
@media print {
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .site-nav, .menu-toggle, .skip { display: none !important; }
}

/* link externo: seta visual + texto para leitor de tela no HTML */
.ext {
  display: inline-block; width: .75em; height: .75em; margin-left: .3em; vertical-align: -.05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7h-1.6V3.7L2.1 11 1 9.9l7.3-7.3H4z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7h-1.6V3.7L2.1 11 1 9.9l7.3-7.3H4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* sessões históricas: cards (home e blog) */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.card { position: relative; display: grid; gap: .5rem; align-content: start; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--brand); transition: border-color var(--dur-ui) var(--ease-out); }
.soft .card { background: var(--white); }
.card time { color: var(--ink-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover { border-color: var(--brand); }
.card:hover h3 a { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card h3 a:focus-visible { outline: none; }
.card p { margin: 0; }
.ver-todas { margin: 1.5rem 0 0; }
.ver-todas a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
@media (min-width: 768px) { .blog .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog .cards { grid-template-columns: repeat(3, 1fr); } }

/* blog: trilha, índice e post */
.breadcrumb ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 1rem; color: var(--ink-soft); }
.breadcrumb li + li::before { content: "/"; margin: 0 .5rem; color: var(--line); }
.breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.blog .lead { margin-bottom: 1rem; }
.page .cards { padding: 0; max-width: none; }
.blog .ano { padding-top: 2.5rem; }
.blog .ano h2 { margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.post h1 { margin-bottom: 1rem; font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.post-date { color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 2rem; }
.post-grid { display: grid; gap: 2.5rem; }
.post-fig { margin: 0; background: var(--surface-soft); padding: 1.5rem; justify-self: start; }
.post-fig img { width: 160px; }
.post-credit { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 1rem; }
.post-credit p { margin: 0 0 .5rem; }
.post-credit a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.post-nav { display: grid; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.post-nav a { display: grid; gap: .25rem; min-height: 48px; align-content: center; text-decoration: none; color: var(--ink); }
.post-nav .dir { color: var(--ink-soft); font-size: .875rem; }
.post-nav-titulo { font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .post-nav { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
  .post-nav-proxima { grid-column: 2; text-align: right; }
}
@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(12, 1fr); }
  .post-main { grid-column: 1 / 9; }
  .post-fig { grid-column: 10 / 13; justify-self: stretch; position: sticky; top: 2rem; align-self: start; }
  .post-fig img { width: 100%; max-width: 240px; margin: 0 auto; }
}

/* rodada 6: fotos das sessões (cards, capa do post, galeria e ampliação) */
.card .card-img { width: calc(100% + 3rem); max-width: none; margin: -1.5rem -1.5rem .75rem; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-soft); }
.card .sem-foto { background: var(--brand); } .card .sem-foto img { width: 96px; }
.post-cover { margin: 0 0 2rem; }
.post-cover img, .post-gal img { width: 100%; background: var(--surface-soft); }
.post-cover figcaption, .post-gal figcaption { color: var(--ink-soft); font-size: 1rem; }
.post-cover figcaption a, .post-gal figcaption a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.page .post-gal { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: none; display: grid; gap: 1.5rem; align-items: start; }
.post-gal figure { margin: 0; }
.post-gal .gal-link { display: block; }
@media (min-width: 768px) { .page .post-gal { grid-template-columns: 1fr 1fr; } }
.foto-dlg { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow: visible; }
.foto-dlg::backdrop { background: rgb(26 18 13 / .88); }
.foto-dlg img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 6rem); margin: 0 auto; }
.dlg-close { display: block; margin: 0 0 .5rem auto; min-height: 44px; padding: 0 1rem; border: 0; background: var(--white); color: var(--ink); font: 600 1rem var(--font-text); cursor: pointer; }
.foto-dlg :focus-visible { outline-color: var(--focus-on-dark); }

/* ===== home v5 (direcao-v5.md): campos de cor por seção, sem degradê ===== */
/* 3.1 prova de vida (amarelo) */
.prova { background: var(--gold); color: var(--on-gold); }
.prova :focus-visible { outline-color: var(--on-gold); }
.prova-in { display: flex; flex-direction: column; gap: 8px; padding-block: 24px; }
.prova dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0; }
.prova dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.prova dd { margin: 2px 0 0; font-family: var(--font-title); font-weight: 600; font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.prova a { color: var(--on-gold); text-underline-offset: 4px; }
.prova dd a { display: inline-block; padding-block: 8px; margin-block: -8px; }
@media (min-width: 1024px) {
  .prova-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; padding-block: 0; }
  .prova dl { grid-template-columns: repeat(4, auto); gap: 48px; }
}

/* 3.2 sessões em dia (vitrine gerada pelo build.py) */
.vit-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.vit-head h2 { margin: 0; }
.vit-head a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; }
.vitrine { display: grid; gap: 32px; }
.vit-destaque, .vit-mini { position: relative; }
.vit-destaque .vit-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 16px; }
.vit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; }
.vit-rotulo { background: var(--gold); color: var(--on-gold); font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; }
.vitrine time { color: var(--ink-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.vit-destaque h3 { font-size: 1.5rem; margin: 0 0 8px; }
.vit-destaque h3 a, .vit-mini h3 a { color: var(--ink); text-decoration: none; }
.vit-destaque h3 a::after, .vit-mini h3 a::after, .hist h3 a::after { content: ""; position: absolute; inset: 0; }
.vit-destaque p:last-child { margin: 0; }
.vit-minis { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }
.vit-mini { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.vit-mini .vit-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vit-mini h3 { font-size: 1.1875rem; margin: 4px 0 0; line-height: 1.25; }
.sem-foto { display: grid; place-items: center; background: var(--brand); }
.sem-foto img { width: 50%; height: auto; }
@media (min-width: 1024px) {
  .vit-head { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .vitrine { grid-template-columns: 7fr 5fr; }
  .vit-destaque h3 { font-size: 1.75rem; }
  .vit-minis { gap: 24px; }
  .vit-mini { grid-template-columns: 168px 1fr; padding-bottom: 24px; }
}

/* 5.2 cartões: hover e foco (vitrine, histórias, blog) */
.vit-destaque, .vit-mini, .hist, .card { transition: transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.vit-destaque:focus-within, .vit-mini:focus-within, .hist:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; transform: translateY(-2px); }
.hist:focus-within { outline-color: var(--on-green-accent); }
.vit-destaque h3 a:focus-visible, .vit-mini h3 a:focus-visible, .hist h3 a:focus-visible { outline: none; }
.card:focus-within { transform: translateY(-2px); }
@media (hover: hover) and (pointer: fine) {
  .vit-destaque:hover, .vit-mini:hover, .hist:hover, .card:hover { transform: translateY(-2px); }
  .vit-destaque:hover h3 a, .vit-mini:hover h3 a { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .hist:hover h3 a { text-decoration: underline; text-decoration-color: var(--on-green-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* 3.3 A Loja · Por que Brasil, com a Bandeira */
.loja { display: grid; gap: 32px; }
.loja-a p:last-child { margin-bottom: 0; }
.citacao { margin: 0 0 40px; padding-left: 20px; border-left: 4px solid var(--brand); }
.citacao p { margin: 0 0 8px; font-family: var(--font-title); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; line-height: 1.25; color: var(--brand); }
.citacao footer { font-size: 1rem; color: var(--ink-soft); }
.loja-b h3 { margin-bottom: 16px; }
.treze { list-style: none; padding: 0; margin: 24px 0 16px; display: grid; gap: 8px; max-width: none; }
.treze li { display: flex; gap: 12px; align-items: baseline; border-top: 2px solid var(--green-ink); padding-top: 8px; font-size: 1rem; }
.treze b { font-family: var(--font-title); font-weight: 600; font-size: 1.5rem; color: var(--green-ink); font-variant-numeric: tabular-nums; min-width: 64px; }
.treze-nota { font-size: .9375rem; color: var(--ink-soft); }
.treze-nota a { display: inline-block; padding-block: 10px; margin-block: -10px; }
/* Bandeira: proporção do arquivo oficial (1524:1080), sem raio, filtro, sombra, máscara, recorte nem nada por cima.
   Sempre sobre fundo neutro, 24 px livres em volta. Entrada só por opacity. */
.bandeira { margin: 24px 0; padding: 0; }
.bandeira img { display: block; width: 100%; height: auto; aspect-ratio: 1040 / 737; border-radius: 0; object-fit: fill; filter: none; box-shadow: none; }
.bandeira figcaption { margin-top: 12px; font-size: .9375rem; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .loja { grid-template-columns: 6fr 5fr; column-gap: 64px; row-gap: 0; align-items: start; }
  .loja-a { grid-column: 1; grid-row: 1; }
  .loja-b { grid-column: 1; grid-row: 2; padding-top: 24px; }
  .bandeira { grid-column: 2; grid-row: 1 / span 2; margin: 8px 0 24px; position: sticky; top: 104px; }
  .treze { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .treze li { display: block; }
  .treze b { display: block; }
}

/* 3.4 histórias (verde profundo) */
.verde { background: var(--green-deep); color: var(--on-green); }
.verde h2, .verde h3 a { color: var(--on-green); }
.verde :focus-visible { outline-color: var(--on-green-accent); }
.hist-intro { color: var(--on-green-soft); max-width: 60ch; }
.hists { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 40px; }
.hist { position: relative; }
.hist-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hist-img.pos-60 { object-position: 60% 50%; } /* imagens-v5, 4: rosto do Irmão da esquerda */
.hist-img.pos-esq { object-position: 0% 50%; } /* foto 2,2:1: o corte cai entre os Irmãos, sem rosto pela metade */
.hist-ano { color: var(--on-green-accent); font-weight: 600; letter-spacing: .06em; margin: 16px 0 4px; }
.hist h3 { font-size: 1.375rem; margin: 0 0 8px; line-height: 1.25; }
.hist h3 a { text-decoration: none; }
.hist p:last-child { color: var(--on-green-soft); margin: 0; }
@media (min-width: 1024px) { .hists { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* 3.6 rito (bordô) */
.bordo { background: var(--brand); color: var(--white); padding: 48px 0; }
.bordo :focus-visible { outline-color: var(--focus-on-dark); }
.rito { display: grid; gap: 24px; }
.rito h2 { color: var(--white); margin: 0; font-size: 2rem; }
.rito p { margin: 0; }
.rito ul { margin: 0; padding: 0; list-style: none; }
.rito a { color: var(--gold); font-weight: 600; display: inline-block; padding-block: 10px; }
@media (min-width: 1024px) { .bordo { padding: 64px 0; } .rito { grid-template-columns: 4fr 5fr 3fr; gap: 48px; align-items: start; } }

/* 3.7 visitantes (azul) */
.vis { display: grid; gap: 40px; }
.vis h3 { margin: 32px 0 8px; }
.vis-fonte { font-size: .9375rem; color: var(--lavender); }
.servico { margin: 16px 0 24px; }
.servico div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .35); }
.servico dt { color: var(--gold); font-weight: 600; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.servico dd { margin: 0; font-size: 1.125rem; }
.servico dd a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.zap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 8px 0 16px; max-width: none; }
.sky .btn-ouro { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .sky .btn-ouro:hover { background: var(--white); border-color: var(--white); color: var(--on-gold); } }
.zap-num { font-family: var(--font-title); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vis a.action, .ch-est a.action { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.vis-foto { margin: 0; }
/* parecer-visual-5, 2: "Interessados" é bloco próprio; abaixo de 1024 segue o texto como antes */
.vis { row-gap: 0; } .vis > div > :last-child { margin-bottom: 0; } .vis-foto { margin-top: 40px; }
@media (max-width: 767px) { #visitantes .btn { width: 100%; justify-content: center; } } /* parecer-visual-5, 4 */
.vis-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* imagens-v5, 4: 4:5 cortaria os rostos das pontas */
@media (min-width: 1024px) {
  .vis { grid-template-columns: 7fr 5fr; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .vis > div:first-child { grid-row: 1 / span 2; }
  .vis-foto { grid-column: 2; grid-row: 1; align-self: start; }
  .vis-int { grid-column: 2; grid-row: 2; margin-top: 40px; }
  .vis-int h3 { margin-top: 0; }
  .servico div { grid-template-columns: 160px 1fr; gap: 16px; }
  .servico dt { padding-top: 3px; }
  .vis-foto { margin-top: 88px; }
}

/* 3.8 contato: coluna da direita com dia, hora e endereço */
.contato-local { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.contato-local p { margin: 0 0 .25rem; }
.contato-rotulo { font-weight: 600; margin-top: 1rem !important; }
.contato-local .contato-rotulo:first-child { margin-top: 0 !important; }

/* 3.8 rodapé (bordô, 3 colunas, nas 25 páginas) */
.site-footer { background: var(--brand); color: var(--white); border-top: 6px solid var(--gold); padding: 48px 0 32px; }
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }
.footer-grid { display: grid; gap: 32px; align-items: start; }
.footer-selo { padding: 20px 0; width: max-content; } /* proteção = selo / 8 (o fundo bordô é liso) */
.footer-selo img { width: 160px; height: 160px; }
.footer-name { font-family: var(--font-title); font-weight: 700; font-size: 1.5rem; line-height: 1.15; margin: 8px 0 .5rem !important; }
.site-footer p { margin: 0 0 .35rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--white); display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--gold); } }
.footer-rotulo { font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px !important; }
.footer-legal { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .3); font-size: .9375rem; display: flex; flex-direction: column; gap: 8px; }
.footer-legal p { margin: 0; color: var(--on-brand-soft); max-width: 70ch; }
.site-footer .tbc { color: var(--white); border-color: currentColor; }
@media (min-width: 1024px) {
  .site-footer { padding: 64px 0 32px; }
  .footer-grid { grid-template-columns: 5fr 3fr 4fr; gap: 48px; }
  .footer-legal { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 32px; }
}

/* 5.5 404 */
.pagina-404 { background: var(--surface-soft); }
.selo-404 { width: 160px; height: 160px; margin: 0 0 40px; }
.atalhos { list-style: none; margin: 32px 0 0; padding: 0 !important; display: grid; gap: 12px; }
.atalhos .btn { width: 100%; }
@media (min-width: 600px) { .atalhos { display: flex; flex-wrap: wrap; gap: 16px; } .atalhos .btn { width: auto; } }

/* entradas: a Bandeira só por opacity */
.js .reveal.is-in.so-opacidade { animation-name: fade; }
@media (prefers-reduced-motion: reduce) {
  .vit-destaque, .vit-mini, .hist, .card { transform: none !important; }
}
.contact-form .action-row[hidden] { display: none; }

/* Assinatura da agência no rodapé (pedido do Fabricio, 07/11/2026) */
.footer-credito { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--on-brand-soft); text-decoration: none; font-size: .875rem; }
.footer-credito img { display: block; width: 69px; height: auto; opacity: .9; }
.footer-credito:hover img, .footer-credito:focus-visible img { opacity: 1; }
.footer-credito:hover span:first-child { text-decoration: underline; }
@media (min-width: 768px) { .footer-credito { margin-left: auto; } }

/* ===== confirmação de presença (direcao-confirmacao.md). Tudo escopado em .cf / .cf-header (lição Avenue: CSS global quebrou o formulário real) ===== */
:root { --cf-err-bg: #FBF1F3; --cf-notch: 14px; }
.cf-header { background: var(--surface); border-bottom: 1px solid var(--rule); }
.cf-header .cf-bar { display: flex; justify-content: space-between; align-items: center; min-height: 56px; gap: 16px; }
.cf-header .brand-name { font-size: 1rem; }
.cf-header .cf-volta { font-weight: 600; color: var(--brand); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.cf { padding: 0 0 64px; background: var(--surface); overflow-x: clip; } /* o picote passa 14 px da borda no celular */
.cf:focus { outline: none; }
.cf-grid { display: grid; }
@media (min-width: 1024px) {
  .cf { padding: 56px 0 96px; background: var(--surface-soft); }
  .cf-grid { grid-template-columns: 440px minmax(0, 560px); gap: 64px; justify-content: center; align-items: start; }
  .cf .cf-grid > .ticket { position: sticky; top: 24px; margin-top: 0; } /* parecer 6: canhoto e painel no mesmo topo; ".cf" vence o "position: relative" de ".cf .ticket", que somado ao top deslocava o canhoto 24 px */
  .cf-main { background: var(--surface); padding: 40px 48px 48px; }
}
/* canhoto */
.cf .ticket { background: var(--blue); color: var(--white); position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 24px var(--gutter) 28px; }
@media (min-width: 1024px) { .cf .ticket { margin: 0; padding: 32px 32px 36px; } }
.cf .ticket .eyebrow { font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.cf .ticket .eyebrow .tbc { color: var(--white); border-color: currentColor; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.cf .ticket .dia { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.cf .ticket .hora { font-family: var(--font-title); font-weight: 600; font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cf .ticket .tipo { font-weight: 600; font-size: 1.0625rem; }
.cf .ticket dl { margin: 0; display: grid; gap: 14px; }
.cf .ticket dt { font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.cf .ticket dd { margin: 2px 0 0; font-size: 1rem; line-height: 1.45; }
.cf .ticket #cf-tema { color: var(--lavender); }
.cf .ticket .cf-l-titulo { padding-bottom: 20px; border-bottom: 1px dashed rgba(255, 255, 255, .45); }
.cf .ticket a { color: var(--white); font-weight: 600; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.cf .ticket :focus-visible { outline-color: var(--gold); }
.cf .ticket::before, .cf .ticket::after { content: ""; position: absolute; bottom: calc(-1 * var(--cf-notch)); width: calc(2 * var(--cf-notch)); height: calc(2 * var(--cf-notch)); border-radius: 50%; background: var(--surface); }
.cf .ticket::before { left: calc(-1 * var(--cf-notch)); }
.cf .ticket::after { right: calc(-1 * var(--cf-notch)); }
@media (min-width: 1024px) { .cf .ticket::before, .cf .ticket::after { background: var(--surface-soft); } }
.cf .carimbo { position: absolute; top: 20px; right: var(--gutter); border: 2px solid currentColor; color: var(--gold); font: 700 .8125rem/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; transform: rotate(-4deg); }
@media (min-width: 1024px) { .cf .carimbo { right: 28px; top: 28px; } }
.cf .ticket.encerrado { background: var(--surface-soft); color: var(--ink); border: 1px solid #D8D2CC; }
.cf .ticket.encerrado .eyebrow, .cf .ticket.encerrado dt { color: var(--ink-soft); }
.cf .ticket.encerrado #cf-tema { color: var(--ink-soft); }
.cf .ticket.encerrado .cf-l-titulo { border-bottom-color: #B7AFA8; }
.cf .ticket.encerrado a { color: var(--brand); }
.cf .ticket.encerrado :focus-visible { outline-color: var(--focus); }
.cf .ticket.encerrado .carimbo { color: var(--brand); }
.cf .ticket.encerrado .eyebrow .tbc { color: var(--ink-soft); }
.cf .ticket.encerrado::before, .cf .ticket.encerrado::after { background: var(--surface); border: 1px solid #D8D2CC; }
@media (min-width: 1024px) { .cf .ticket.encerrado::before, .cf .ticket.encerrado::after { background: var(--surface-soft); } }
/* carregando: esqueleto com a altura do canhoto real, sem pular layout */
.cf-skel[hidden] { display: none; }
.cf-skel { display: grid; gap: 14px; min-height: 260px; align-content: start; }
.cf-skel span { display: block; height: 36px; background: #4A40A0; width: 80%; }
.cf-skel span:nth-child(2) { height: 24px; width: 30%; }
.cf-skel span:nth-child(3) { height: 96px; width: 100%; margin-top: 14px; }
/* painel */
.cf-main { padding-top: 40px; }
.cf-main h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1.1; color: var(--ink); letter-spacing: -.01em; margin: 0 0 8px; }
.cf-main h1:focus { outline: none; }
.cf-main h1:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.cf-lead { color: var(--ink-soft); margin: 0 0 28px; font-size: 1rem; }
.cf-h2 { font-family: var(--font-text); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: 0; }
.cf-f { margin: 0 0 22px; }
.cf-f > label, .cf-f > legend, .cf-row .cf-f > label { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; margin: 0 0 8px; padding: 0; }
.cf-opc { font-weight: 400; color: var(--ink-soft); }
.cf input[type=text], .cf input[type=tel] { width: 100%; min-height: 48px; padding: .6rem .75rem; font: 400 1rem/1.4 var(--font-text); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 0; }
.cf input[type=text]:hover, .cf input[type=tel]:hover { border-color: var(--ink-soft); }
.cf input[aria-invalid="true"]:not([type=radio]):not([type=checkbox]) { border: 2px solid var(--brand); }
.cf-help { color: var(--ink-soft); font-size: .9375rem; margin: 6px 0 0; }
.cf fieldset { border: 0; padding: 0; min-width: 0; }
.cf-vinc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-vinc label { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 12px 10px 44px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-weight: 600; transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.cf-vinc small { font-weight: 400; font-size: .875rem; color: var(--ink-soft); line-height: 1.3; }
.cf-vinc input { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
.cf-vinc label:has(input:checked) { border: 2px solid var(--brand); background: var(--cf-err-bg); padding-left: 43px; }
.cf-vinc label:has(input[aria-invalid="true"]) { border: 2px solid var(--brand); }
.cf-visit { border-left: 3px solid var(--gold); padding: 4px 0 4px 16px; margin: 0 0 22px; }
.cf-visit[hidden], .cf-f[hidden], .cf-view[hidden] { display: none; }
.cf-row { display: grid; grid-template-columns: 1fr 104px; gap: 12px; }
.cf-choices { display: grid; }
.cf-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.cf-choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); flex: none; }
.cf-outra { margin: 4px 0 0 34px; }
.cf-aviso { background: var(--surface-soft); padding: 16px; margin: 6px 0 16px; font-size: .9375rem; line-height: 1.5; }
.cf-aviso p { margin: 0 0 6px; }
.cf-aviso p:last-child { margin: 0; }
.cf-aviso a { color: var(--brand); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.cf-consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; min-height: 44px; }
.cf-consent input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--brand); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-main .btn { width: 100%; }
.cf-enviar { margin-top: 8px; }
@media (min-width: 1024px) { .cf-main .cf-enviar { width: auto; min-width: 260px; } }
.cf-duvida { margin: 20px 0 0; font-size: .9375rem; color: var(--ink-soft); }
.cf-duvida a { color: var(--brand); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
/* erro: nunca só cor (borda 2 px + "!" + texto + resumo) */
.cf-resumo-erro { border-left: 4px solid var(--brand); background: var(--cf-err-bg); padding: 14px 16px; margin: 0 0 24px; max-width: none; }
.cf-resumo-erro:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.cf-resumo-erro p { margin: 0 0 6px; font-weight: 700; }
.cf-resumo-erro ul { margin: 0; padding-left: 1.1rem; }
.cf-resumo-erro a { color: var(--brand); font-weight: 600; display: inline-block; padding-block: 6px; }
.cf-erro { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; color: var(--ink); font-size: .9375rem; margin: 6px 0 0; }
.cf-erro[hidden] { display: none; }
.cf-erro::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--white); font: 700 12px/18px var(--font-text); text-align: center; margin-top: 2px; }
/* sucesso */
/* selo ✓ (decorativo) antes do h1 no sucesso */
.cf[data-estado="sucesso"] #cf-h1::before { content: "✓" / ""; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-ink); color: var(--white); margin: 0 0 16px; font: 700 1.5rem/1 var(--font-text); }
.cf .cf-previa[hidden] { display: none; }
.cf-sumario { margin: 0 0 24px; border-top: 1px solid var(--rule); }
.cf-sumario div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.cf-sumario dt { color: var(--ink-soft); font-size: .9375rem; }
.cf-sumario dd { margin: 0; font-weight: 600; }
.cf-acoes { display: grid; gap: 12px; margin-top: 8px; }
.cf-acoes .btn { gap: 10px; }
.cf-acoes [hidden] { display: none; }
@media (min-width: 600px) { .cf-acoes { grid-template-columns: 1fr 1fr; } }
.cf-nota { font-size: .9375rem; color: var(--ink-soft); margin: 20px 0 0; }
.cf-nota a { color: var(--brand); font-weight: 600; }
/* troca de estado: painel sobe, carimbo entra depois */
@media (prefers-reduced-motion: no-preference) {
  .cf-entra > :not([hidden]) { animation: cf-sobe var(--dur-in) var(--ease-out) both; }
  .cf-entra > :nth-child(2) { animation-delay: var(--stagger); }
  .cf-entra > :nth-child(n+3) { animation-delay: calc(2 * var(--stagger)); }
  .cf .carimbo:not([hidden]) { animation: cf-carimbo 240ms var(--ease-out) 200ms both; }
}
@keyframes cf-sobe { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes cf-carimbo { from { opacity: 0; transform: rotate(-4deg) scale(1.12); } }

/* rodapé · faixa Potências (direcao-confirmacao.md, 6) */
.site-footer .potencias { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .3); }
.site-footer .potencias ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.site-footer .potencias a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--on-brand-soft); text-decoration: none; font-size: .875rem; line-height: 1.3; padding: 8px 4px; min-height: 44px; }
.site-footer .potencias .slot { flex: none; width: 72px; height: 72px; display: grid; place-items: center; } /* QA 12, B1: a caixa não encolhe na linha */
.site-footer .potencias img { flex: none; width: 64px; height: 64px; max-width: none; }
.site-footer .potencias .tbc { font-size: .8125rem; margin-top: 2px; } /* R48 */
@media (hover: hover) and (pointer: fine) { .site-footer .potencias a:hover .pot-nome { text-decoration: underline; text-underline-offset: 4px; color: var(--white); } }
.site-footer .potencias .pot-nome { min-width: 0; }
/* rótulo ao lado só a partir de 1200: de 768 a 1199 a lista usa a largura toda (com o logo fixo em 64 px, o nome não cabia) */
@media (min-width: 1200px) { .site-footer .potencias { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } }
@media (min-width: 768px) {
  .site-footer .potencias ul { gap: 32px; }
  .site-footer .potencias a { flex-direction: row; text-align: left; gap: 14px; }
}

/* ===================== v8 (direcao-v8.md) ===================== */
/* --- 1. cabeçalho: nome em tipografia, indicador de seção, botão de destaque; transparente sobre o herói da home --- */
:root { --night: #1B1550; --hdr: 64px; }
@media (min-width: 1024px) { :root { --hdr: 72px; } }
[id] { scroll-margin-top: calc(var(--hdr) + 8px); }
.site-header { position: sticky; top: 0; z-index: 40; color: var(--ink); background: rgb(255 255 255 / .95); box-shadow: 0 1px 0 var(--rule);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), color 240ms var(--ease-out); }
.header-bar { min-height: var(--hdr); display: flex; align-items: center; gap: 24px; }
.site-header.is-compact .header-bar { min-height: var(--hdr); }
.brand { display: inline-flex; align-items: baseline; gap: .5em; min-height: 44px; align-items: center; color: inherit; text-decoration: none; white-space: nowrap; margin-right: auto; }
.brand-sigla { font: 700 .8125rem/1 var(--font-text); letter-spacing: .14em; color: var(--brand); transition: color 240ms var(--ease-out); }
.brand-nome { font: 700 1.25rem/1 var(--font-title); letter-spacing: -.01em; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-itens { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.nav-itens a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: inherit; font: 600 .9375rem/1 var(--font-text); text-decoration: none; }
.nav-itens a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out), opacity 240ms; }
.nav-itens a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-itens a:hover::after { transform: scaleX(1); opacity: .45; } .nav-itens a[aria-current]:hover::after { opacity: 1; } }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; margin-left: 8px; font: 600 .9375rem/1 var(--font-text); text-decoration: none;
  color: var(--white); background: var(--brand); transition: background-color 180ms ease, color 180ms ease; }
.nav-cta:hover { background: var(--brand-press); }
.nav-extra { display: none; }
.menu-toggle { display: none; }
/* home: o cabeçalho flutua sobre o herói, transparente, e fica sólido depois de 8 px de rolagem (classe is-compact, já existente) */
.home .site-header { position: fixed; left: 0; right: 0; }
.home .site-header:not(.is-compact) { color: var(--white); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .site-header:not(.is-compact) .brand-sigla { color: var(--gold); }
.home .site-header:not(.is-compact) .nav-itens a::after { background: var(--gold); }
.home .site-header:not(.is-compact) .nav-cta { color: var(--ink); background: var(--gold); }
.home .site-header:not(.is-compact) .nav-cta:hover { background: var(--white); }
.home .site-header:not(.is-compact) :focus-visible { outline-color: var(--white); }

/* celular e tablet: menu em tela cheia */
@media (max-width: 1023px) {
  .js .menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px 0 8px; margin-right: -4px; border: 0; background: none; color: inherit; font: 600 1rem/1 var(--font-text); cursor: pointer; position: relative; z-index: 2; }
  .mt-ico { position: relative; width: 22px; height: 12px; }
  .mt-ico::before, .mt-ico::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 280ms var(--ease-out), top 280ms var(--ease-out); }
  .mt-ico::before { top: 0; } .mt-ico::after { top: 10px; }
  .is-menu .mt-ico::before { top: 5px; transform: rotate(45deg); } .is-menu .mt-ico::after { top: 5px; transform: rotate(-45deg); }
  .brand { position: relative; z-index: 2; }
  html:not(.js) .site-nav { display: none; } /* I13: sem JS o botão não abre nada; os links ficam na navegação do rodapé */
  .js .site-nav { position: fixed; inset: var(--hdr) 0 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px var(--gutter) max(24px, env(safe-area-inset-bottom)); background: var(--night); color: var(--white);
    visibility: hidden; opacity: 0; transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms; }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity 280ms var(--ease-out), visibility 0s; }
  .nav-itens { flex-direction: column; }
  .nav-itens li { border-bottom: 1px solid rgb(255 255 255 / .14); }
  .nav-itens a { width: 100%; min-height: 64px; padding: 0; font: 600 clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem)/1.1 var(--font-title); color: var(--white); }
  .nav-itens a::after { left: 0; right: auto; width: 32px; bottom: 12px; background: var(--gold); }
  .nav-cta { justify-content: center; min-height: 52px; margin: 32px 0 0; color: var(--ink); background: var(--gold); font-size: 1.0625rem; }
  .nav-extra { display: block; margin-top: auto; padding-top: 32px; font-size: 1rem; line-height: 1.5; color: var(--lavender); }
  .nav-extra p { margin: 0 0 4px; }
  .nav-extra-rot { font: 700 .75rem/1 var(--font-text) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px !important; }
  .nav-extra a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 600; }
  .site-nav :focus-visible { outline-color: var(--gold); }
  /* entrada dos itens: sobem 12 px em sequência */
  .js .site-nav .nav-itens li, .js .site-nav .nav-cta, .js .site-nav .nav-extra { transform: translateY(12px); opacity: 0; transition: transform 360ms var(--ease-out), opacity 360ms var(--ease-out); }
  .js .site-nav.is-open .nav-itens li, .js .site-nav.is-open .nav-cta, .js .site-nav.is-open .nav-extra { transform: none; opacity: 1; transition-delay: calc(60ms + var(--i, 0) * 40ms); }
  .site-header.is-menu { color: var(--white); background: var(--night); /* R67: o painel começa abaixo da barra, que fica sólida */ box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home .site-header.is-menu { background: var(--night); } /* R67: vence o cabeçalho transparente da home */
  .site-header.is-menu .brand-sigla { color: var(--gold); }
  .home .site-header:not(.is-compact) .nav-cta, .site-header.is-menu .nav-cta { color: var(--ink); background: var(--gold); }
}
@media (min-width: 1024px) { .nav-itens li { --i: 0 !important; } }
@media (prefers-reduced-motion: reduce) {
  .js .site-nav, .js .site-nav .nav-itens li, .js .site-nav .nav-cta, .js .site-nav .nav-extra, .mt-ico::before, .mt-ico::after, .nav-itens a::after, .site-header { transition: none !important; }
}
html.menu-aberto { overflow: hidden; }

/* --- 2. herói sem disco: o selo direto sobre o quadro; degradês verticais largos no quadro, sem forma --- */
.hero { --selo: 200px; min-height: max(680px, 100svh); }
/* celular: o quadro começa logo abaixo do cabeçalho; acima dele, o mesmo azul em que o degradê começa (sem emenda) */
/* rodada 14 (medido): com 96 px a ponta da espada tocava a proteção do selo de 360 a 430 px; com 145 px a folga é ≥ 6 px */
.hero .quadro { inset: calc(var(--hdr) + 145px) 0 auto; height: calc(max(680px, 100svh) - var(--hdr) - 145px); }
.hero .quadro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--veu)) 0, rgb(var(--veu) / .5) 9%, rgb(var(--veu) / .12) 22%, rgb(var(--veu) / 0) 32%,
    rgb(var(--veu) / 0) min(38%, 100% - 400px), rgb(var(--veu) / .8) min(52%, 100% - 330px), rgb(var(--veu) / .9) min(66%, 100% - 230px), rgb(var(--veu)) 100%); }
/* rodada 14: o pé escurece no máximo 330 px acima do fim da caixa (onde o texto fica preso), para o h1 nunca cair na parte clara quando o quadro desce */
@media (max-width: 1023px) { .hero .quadro img { object-position: 38% 0; } } /* no desktop vale o enquadramento ancorado à direita (rodada 13) */
/* rodada 14: em tela mais quadrada (4:3, 5:4) o 1,2 empurrava D. Pedro para fora da borda esquerda; 1,1 o mantém inteiro e longe da proteção do selo */
@media (min-width: 1024px) and (max-aspect-ratio: 3/2) { .hero .quadro img { transform: scale(1.1); } }
.hero-in { padding-top: calc(var(--hdr) + 20px); min-height: max(680px, 100svh); }
.hero-txt { padding-bottom: 72px; } /* o crédito fica no pé, abaixo de "Como visitar" */
.hero .quadro figcaption { z-index: 1; }
@media (max-width: 374px) { .hero { --selo: 176px; } } /* 360: a espada de D. Pedro fica fora da proteção */
@media (min-width: 768px) and (max-width: 1023px) { .hero { --selo: 220px; } }
@media (min-width: 1024px) {
  .hero { --selo: clamp(220px, 32svh, 280px); min-height: max(680px, 100svh); }
  .hero .quadro { inset: 0; height: auto; }
  .hero-txt { padding-bottom: 0; }
  .hero .quadro::after { background: linear-gradient(to bottom, rgb(var(--veu) / .88) 0, rgb(var(--veu) / .5) 12%, rgb(var(--veu) / .10) 26%, rgb(var(--veu) / 0) 36%,
    rgb(var(--veu) / 0) 40%, rgb(var(--veu) / .72) 54%, rgb(var(--veu) / .86) 66%, rgb(var(--veu) / .92) 82%, rgb(var(--veu) / .94) 100%); }
  .hero-in { padding: calc(var(--hdr) + 24px) var(--gutter) 40px; min-height: 0; }
  .hero-txt { margin-top: calc(var(--selo) / 8 + 16px); padding: 0; }
  .hero .quadro figcaption { top: auto; bottom: 112px; }
}

/* --- 3. chamada do estandarte na home --- */
.chamada-est { padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0; background: var(--surface); border-top: 1px solid var(--rule); }
.ch-est { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; }
.ch-est-img { width: 88px; height: auto; }
.ch-est h2 { margin-bottom: .5rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.ch-est p { margin-bottom: .75rem; }
@media (min-width: 768px) { .ch-est { grid-template-columns: 128px minmax(0, 40rem); gap: 40px; justify-content: start; } .ch-est-img { width: 128px; } }

/* --- 4. página do estandarte --- */
.page-head { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--surface-soft); }
.page-head h1 { color: var(--brand); font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); margin: 12px 0 16px; }
.page-head .lead { max-width: 40ch; margin-bottom: 12px; }
.page-head-nota { color: var(--ink-soft); font-size: 1rem; max-width: 60ch; margin: 0; }
.est-pag { padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0 var(--section); }
.est-pag .estandarte-grid { margin-top: 0; }
.estandarte-fig svg { width: min(100%, 340px); }
@media (min-width: 768px) { .est-pag .estandarte-fig svg { max-height: calc(100svh - var(--hdr) - 48px); top: calc(var(--hdr) + 24px); } }

/* ---------- rodada 16: próxima sessão, confirmar presença e WhatsApp flutuante (plano-painel-sessoes.md) ---------- */
.zap-alt { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--on-sky); text-underline-offset: 5px; }
.prox { display: grid; gap: 4px 32px; margin: 0 0 56px; padding: 24px 0; border-block: 1px solid var(--rule); }
.prox p { margin: 0; }
.prox-rot { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.prox-data { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; }
.prox-tema { color: var(--ink-soft); }
.prox-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px !important; }
.prox-zap { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
@media (max-width: 767px) { .prox-acoes .btn { width: 100%; } }
@media (min-width: 1024px) {
  .prox { grid-template-columns: 1fr auto; align-items: center; }
  .prox-acoes { grid-column: 2; grid-row: 1 / span 3; margin-top: 0 !important; }
}
.zap-flut {
  position: fixed; z-index: 25; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--green-deep); color: var(--white); box-shadow: 0 6px 20px rgb(26 18 13 / .28);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-ui) ease, transform var(--dur-ui) ease, visibility 0s linear var(--dur-ui);
}
.zap-flut.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.zap-flut svg { width: 28px; height: 28px; fill: currentColor; }
.zap-flut:focus-visible { outline: 3px solid var(--white); outline-offset: 0; box-shadow: 0 0 0 6px var(--focus); }
@media (hover: hover) and (pointer: fine) { .zap-flut:hover { background: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .zap-flut { transform: none; transition: none; } }
.zap-flut[hidden], .prox-zap[hidden] { display: none; }