/* Estilo base dos sites públicos. Também é carregado no editor (iframe), para a edição
   ficar igual ao que é publicado. Temas por site entram depois. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1c2230; background: #fff; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Grid de 12 colunas, como o .row/.col-md-* do Bootstrap: cada conteúdo é uma coluna.
   O espaço entre colunas (24px) vem do padding de cada uma; o container desconta 12px
   para o texto continuar alinhado a 20px da borda. Abaixo de 768px tudo ocupa 100%. */
.container { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 0 8px; }
/* Largura da coluna (--col, das classes col-N) menos as margens laterais (--ml e --mr,
   das classes ml- e mr-): com margem, a coluna continua cabendo na linha. */
.container > * {
  /* Cada coluna começa com os valores padrão: custom properties são herdadas, e sem isto
     os filhos de um container col-N (ou com margem) herdariam a largura do pai. As
     classes col-N, ml-* e mr-* vêm depois e valem sobre estes padrões. */
  --col: 100%; --ml: 0px; --mr: 0px;
  --w: calc(var(--col) - var(--ml) - var(--mr));
  flex: 0 0 var(--w); max-width: var(--w); min-width: 0; padding-left: 12px; padding-right: 12px;
}
/* Container dentro de container: é uma coluna do pai e uma linha para os próprios filhos
   (como uma .row dentro de uma .col no Bootstrap). Sem padding: os filhos já trazem o
   espaçamento, e o texto deles fica alinhado ao dos vizinhos. */
.container .container { max-width: none; margin: 0; padding: 0; }

/* Layout: o container mais externo é o site; header e footer são containers; a página
   entra no <main class="cms-outlet">, que é uma coluna como um container aninhado. */
.container:not(.container .container) { padding-top: 24px; padding-bottom: 48px; }
.container > .cms-outlet { padding-left: 0; padding-right: 0; margin: 24px 0; }
.container > header.container, .container > footer.container { padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 768px) {
  .container > .col-1 { --col: 8.3333%; }
  .container > .col-2 { --col: 16.6667%; }
  .container > .col-3 { --col: 25.0000%; }
  .container > .col-4 { --col: 33.3333%; }
  .container > .col-5 { --col: 41.6667%; }
  .container > .col-6 { --col: 50.0000%; }
  .container > .col-7 { --col: 58.3333%; }
  .container > .col-8 { --col: 66.6667%; }
  .container > .col-9 { --col: 75.0000%; }
  .container > .col-10 { --col: 83.3333%; }
  .container > .col-11 { --col: 91.6667%; }
  .container > .col-12 { --col: 100.0000%; }
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; margin-top: 1.4em; }
h3 { font-size: 1.3rem; margin-top: 1.2em; }
p { margin: 0 0 1em; }

/* Imagem: ocupa a largura do bloco (a coluna), sem distorcer; a legenda segue o
   alinhamento de texto do container. width/height do <img> reservam o espaço. */
.cms-image { margin: 0 0 1em; }
.cms-image img { display: block; width: 100%; height: auto; }
.cms-image figcaption { margin-top: 0.5em; font-size: 0.875em; color: #5a6270; }

/* Botão/link. Sem largura, ocupa o tamanho do texto: botões seguidos ficam lado a lado;
   com largura (col-N), é uma coluna como os outros blocos. As cores vêm de variáveis
   (--button-*, --link-*), para o tema do site trocar sem reescrever as regras. */
.container > .cms-cta:not([class*="col-"]) { flex: 0 0 auto; max-width: 100%; }
.cms-cta { margin: 0 0 1em; }

/* Formulário (montado pelo PHP ao servir; no editor, a prévia). Visual por variáveis
   (--form-*) para o tema trocar. */
.cms-form { display: flex; flex-direction: column; gap: var(--form-gap, 14px); margin: 0 0 1em; }
.cms-field { display: flex; flex-direction: column; gap: 6px; }
.cms-field label { font-weight: 600; font-size: 0.95em; }
.cms-required { color: var(--form-required, #c0392b); }
.cms-field input, .cms-field textarea {
  width: 100%; padding: var(--form-input-pad, 10px 12px); font: inherit; color: var(--form-input-text, inherit);
  background: var(--form-input-bg, #fff); border: 1px solid var(--form-input-border, #c9ced6);
  border-radius: var(--form-input-radius, 8px);
}
.cms-field textarea { resize: vertical; min-height: 7em; }
.cms-field input:focus, .cms-field textarea:focus {
  outline: 2px solid var(--form-focus, #4b8afe); outline-offset: 1px; border-color: var(--form-focus, #4b8afe);
}
.cms-field [aria-invalid="true"] { border-color: var(--form-error, #c0392b); }
.cms-field-error, .cms-form-error { margin: 0; color: var(--form-error, #c0392b); font-size: 0.9em; }
.cms-form-status { margin: 0; }
/* Privacidade: aviso curto ou caixa de aceite (o texto do label quebra ao lado da caixa). */
.cms-form-privacy { margin: 0; font-size: 0.9em; opacity: 0.85; }
.cms-field-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.cms-field-check input { width: auto; margin: 0.25em 0 0; flex: 0 0 auto; accent-color: var(--form-focus, #4b8afe); }
.cms-field-check label { font-weight: 400; }
.cms-field-check .cms-field-error { flex-basis: 100%; }
.cms-field-check { flex-wrap: wrap; }
.cms-form-success {
  margin: 0; padding: 16px; border-radius: var(--form-input-radius, 8px);
  background: var(--form-success-bg, #e6f6ec); color: var(--form-success-text, #1d6b3a);
}
.cms-form .cms-cta { margin: 0; }
.cms-form button:disabled { opacity: 0.6; cursor: wait; }
/* Isca para robôs: fora da tela (display:none alguns robôs percebem). */
.cms-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cms-button {
  display: inline-block; padding: var(--button-pad, 0.7em 1.4em);
  border: 2px solid var(--button-bg, #1c2230); border-radius: var(--button-radius, 8px);
  background: var(--button-bg, #1c2230); color: var(--button-text, #fff);
  font: inherit; font-weight: var(--button-weight, 600); line-height: 1.3; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.cms-button:hover { background: var(--button-hover-bg, #000); border-color: var(--button-hover-bg, #000); }
.cms-button-secondary { background: transparent; color: var(--button-secondary-text, var(--button-bg, #1c2230)); border-color: currentColor; }
.cms-button-secondary:hover { background: var(--button-secondary-hover-bg, rgb(0 0 0 / 6%)); border-color: currentColor; }
.cms-button-link {
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--link-color, inherit);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Sem estilo: bloco clicável sem cara de botão (cards); o visual vem do container de dentro. */
.cms-button-plain, .cms-button-plain:hover {
  display: block; padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
  font-weight: inherit; text-align: inherit; text-decoration: none;
}
/* Conteúdo do botão: o container de dentro é uma linha sem as medidas de coluna (o
   espaçamento é o do botão, ou o configurado no container); textos e imagens sem margem. */
.cms-button > .container { margin: 0; padding: 0; max-width: none; row-gap: 0.4em; }
.cms-button > .container > * { padding-left: 0; padding-right: 0; }
.cms-button :is(p, h1, h2, h3, .cms-image) { margin: 0; }
.cms-button-link:hover { background: none; color: var(--link-hover-color, inherit); }

/* Menu: links das páginas publicadas (preenchido pelo servidor). */
.cms-menu ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.cms-menu a { color: inherit; text-decoration: none; }
.cms-menu a:hover { text-decoration: underline; }
.cms-menu a[aria-current="page"] { font-weight: 600; }

/* Formatação de trechos de texto (listas em App\Domain\TextStyles). O tamanho é relativo
   ao bloco, então vale igual em parágrafos e títulos. As fontes vêm do Google Fonts: o
   servidor só carrega as que a página usa. */
strong { font-weight: 700; }
.fs-xs  { font-size: 0.75em; }
.fs-sm  { font-size: 0.875em; }
.fs-lg  { font-size: 1.25em; }
.fs-xl  { font-size: 1.5em; }
.fs-2xl { font-size: 2em; }
.fs-3xl { font-size: 3em; }
.ff-inter          { font-family: 'Inter', system-ui, sans-serif; }
.ff-montserrat     { font-family: 'Montserrat', system-ui, sans-serif; }
.ff-nunito         { font-family: 'Nunito', system-ui, sans-serif; }
.ff-oswald         { font-family: 'Oswald', 'Arial Narrow', sans-serif; }
.ff-merriweather   { font-family: 'Merriweather', Georgia, serif; }
.ff-playfair       { font-family: 'Playfair Display', Georgia, serif; }
.ff-jetbrains-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ff-caveat         { font-family: 'Caveat', cursive; }

/* Opções do container (PageContent::CONTAINER_OPTIONS). Padrão: texto à esquerda,
   itens no topo, distribuídos a partir do início. */
.container { align-content: flex-start; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }
.ai-center  { align-items: center; }
.ai-end     { align-items: flex-end; }
.ai-stretch { align-items: stretch; }
.jc-center  { justify-content: center; }
.jc-end     { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.jc-around  { justify-content: space-around; }
.jc-evenly  { justify-content: space-evenly; }
.ac-center  { align-content: center; }
.ac-end     { align-content: flex-end; }
.ac-between { align-content: space-between; }
.ac-around  { align-content: space-around; }
.ac-stretch { align-content: stretch; }

/* Fundo do container (variáveis do atributo style, validado no servidor).
   Imagem: has-bg + --cms-bg. Cor sólida ou gradiente: has-fill + --cms-bg-fill; escolhida no
   editor, vale mais que o fundo que o tema dá às faixas (!important). Com os dois, a imagem
   fica por cima da cor. */
.container.has-bg { background: var(--cms-bg) center / cover no-repeat; padding-top: 32px; padding-bottom: 32px; }
.container.has-bg.bg-parallax { background-attachment: fixed; }
.container.has-fill { background: var(--cms-bg-fill) !important; }
.container.has-fill.has-bg { background: var(--cms-bg) center / cover no-repeat, var(--cms-bg-fill) !important; }
.container.has-fill.has-bg.bg-parallax { background-attachment: fixed, scroll !important; }
/* Fundo na largura da tela: o conteúdo fica no container; um pseudo-elemento leva o
   fundo de borda a borda da janela. */
.container.has-bg.bg-full, .container.has-fill.bg-full { background: none !important; position: relative; isolation: isolate; }
.container.has-bg.bg-full::before, .container.has-fill.bg-full::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -1; background: var(--cms-bg) center / cover no-repeat;
}
.container.has-bg.bg-full.bg-parallax::before { background-attachment: fixed; }
.container.has-fill.bg-full::before { background: var(--cms-bg-fill); }
.container.has-fill.has-bg.bg-full::before { background: var(--cms-bg) center / cover no-repeat, var(--cms-bg-fill); }
.container.has-fill.has-bg.bg-full.bg-parallax::before { background-attachment: fixed, scroll; }
/* 100vw inclui a barra de rolagem: corta o excesso em vez de criar rolagem lateral. */
html, body { overflow-x: clip; }

/* Tela inteira (full-bleed): o container sai das bordas do pai (centralizado) até as
   bordas da janela. Só containers direto na página ou no layout. O conteúdo ganha o
   mesmo recuo da página (8px); com w-full-site, fica na largura do site (944px de
   conteúdo, como o container principal). */
.container > .w-full {
  --w: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.container > .container.w-full { padding-left: 8px; padding-right: 8px; }
.container > .container.w-full-site {
  padding-left: max(8px, calc(50vw - 472px)); padding-right: max(8px, calc(50vw - 472px));
}

/* Espaçamento (PageContent::SPACING), por lado: m = margin, p = padding; t/r/b/l = lados.
   !important, como os utilitários do Bootstrap: valem sobre os espaçamentos automáticos
   (página, header/footer, fundo com imagem). As margens laterais também alimentam a
   largura da coluna (--ml/--mr). */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; --ml: 0px; } .mr-0 { margin-right: 0 !important; --mr: 0px; }
.mt-xs { margin-top: 8px !important; } .mb-xs { margin-bottom: 8px !important; } .ml-xs { margin-left: 8px !important; --ml: 8px; } .mr-xs { margin-right: 8px !important; --mr: 8px; }
.mt-sm { margin-top: 16px !important; } .mb-sm { margin-bottom: 16px !important; } .ml-sm { margin-left: 16px !important; --ml: 16px; } .mr-sm { margin-right: 16px !important; --mr: 16px; }
.mt-md { margin-top: 24px !important; } .mb-md { margin-bottom: 24px !important; } .ml-md { margin-left: 24px !important; --ml: 24px; } .mr-md { margin-right: 24px !important; --mr: 24px; }
.mt-lg { margin-top: 40px !important; } .mb-lg { margin-bottom: 40px !important; } .ml-lg { margin-left: 40px !important; --ml: 40px; } .mr-lg { margin-right: 40px !important; --mr: 40px; }
.mt-xl { margin-top: 64px !important; } .mb-xl { margin-bottom: 64px !important; } .ml-xl { margin-left: 64px !important; --ml: 64px; } .mr-xl { margin-right: 64px !important; --mr: 64px; }
.mt-2xl { margin-top: 96px !important; } .mb-2xl { margin-bottom: 96px !important; } .ml-2xl { margin-left: 96px !important; --ml: 96px; } .mr-2xl { margin-right: 96px !important; --mr: 96px; }
.pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .pr-0 { padding-right: 0 !important; }
.pt-xs { padding-top: 8px !important; } .pb-xs { padding-bottom: 8px !important; } .pl-xs { padding-left: 8px !important; } .pr-xs { padding-right: 8px !important; }
.pt-sm { padding-top: 16px !important; } .pb-sm { padding-bottom: 16px !important; } .pl-sm { padding-left: 16px !important; } .pr-sm { padding-right: 16px !important; }
.pt-md { padding-top: 24px !important; } .pb-md { padding-bottom: 24px !important; } .pl-md { padding-left: 24px !important; } .pr-md { padding-right: 24px !important; }
.pt-lg { padding-top: 40px !important; } .pb-lg { padding-bottom: 40px !important; } .pl-lg { padding-left: 40px !important; } .pr-lg { padding-right: 40px !important; }
.pt-xl { padding-top: 64px !important; } .pb-xl { padding-bottom: 64px !important; } .pl-xl { padding-left: 64px !important; } .pr-xl { padding-right: 64px !important; }
.pt-2xl { padding-top: 96px !important; } .pb-2xl { padding-bottom: 96px !important; } .pl-2xl { padding-left: 96px !important; } .pr-2xl { padding-right: 96px !important; }

/* Aviso de cookies (public/_site/consent.js; só existe quando o site tem plugins). As cores
   vêm de variáveis, para o tema do site trocar (--consent-*); o padrão segue os botões. */
.cms-consent {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; max-width: 560px;
  padding: 20px; border-radius: var(--consent-radius, 12px);
  background: var(--consent-bg, #ffffff); color: var(--consent-text, #1c2230);
  box-shadow: 0 16px 48px rgb(0 0 0 / 22%); font-size: 15px; line-height: 1.5;
}
.cms-consent-title { margin: 0 0 6px; font-weight: 700; font-size: 1.05em; }
.cms-consent-text { margin: 0 0 14px; }
.cms-consent-text a { color: inherit; text-decoration: underline; }
.cms-consent-options { display: grid; gap: 10px; margin: 0 0 14px; }
.cms-consent-options[hidden] { display: none; }
.cms-consent-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cms-consent-option input { margin-top: 4px; }
.cms-consent-option span { display: flex; flex-direction: column; }
.cms-consent-option span span { font-size: 0.9em; opacity: 0.8; }
.cms-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cms-consent-btn {
  padding: 0.6em 1.1em; border: 2px solid var(--consent-button-bg, var(--button-bg, #1c2230));
  border-radius: var(--button-radius, 8px); font: inherit; font-weight: 600; cursor: pointer;
  background: transparent; color: inherit;
}
.cms-consent-btn[hidden] { display: none; }
.cms-consent-primary { background: var(--consent-button-bg, var(--button-bg, #1c2230)); color: var(--consent-button-text, var(--button-text, #fff)); }
.cms-consent-reopen {
  position: fixed; z-index: 999; left: 16px; bottom: 16px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: var(--consent-bg, #ffffff); color: var(--consent-text, #1c2230); font: 600 13px/1.4 system-ui, sans-serif;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%); cursor: pointer; opacity: 0.85;
}
.cms-consent-reopen:hover { opacity: 1; }
.cms-consent-reopen[hidden] { display: none; }
@media (max-width: 560px) {
  .cms-consent { left: 8px; right: 8px; bottom: 8px; padding: 16px; }
  .cms-consent-btn { flex: 1 1 auto; }
}