/*
 * Área Restrita — camada base do Contrato de Site v1.
 * NÃO EDITE. Copie este arquivo, sem nenhuma alteração, para css/base.css do site.
 * O renderizador usa exatamente este arquivo; os valores vêm todos de css/theme.css.
 */

/* 1. Escala de espaçamento (fixa, igual em todos os sites) */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  /* Pilhas de fontes do sistema (mesma lista de SYSTEM_FONT_STACKS). Para enfeites como aspas grandes;
     os textos usam os estilos do tema (--type-*). */
  --font-stack-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-stack-arial: Arial, Helvetica, sans-serif;
  --font-stack-system-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-stack-verdana: Verdana, Geneva, sans-serif;
  --font-stack-georgia: Georgia, "Times New Roman", serif;
  --font-stack-times: "Times New Roman", Times, serif;
  --font-stack-monospace: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* 2. Reset mínimo */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-dark);
  font-family: var(--type-text-md-family);
  font-size: var(--type-text-md-size);
  font-weight: var(--type-text-md-weight);
  line-height: var(--type-text-md-line-height);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}
img, svg, video, iframe {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
/* "Destaque" em trechos de texto. O CSS da seção define a aparência final (ex.: sublinhado colorido). */
mark {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: inherit;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* Link "Pular para o conteúdo", gerado pelo renderizador (não escreva no site). */
.ar-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text-dark);
  color: var(--color-text-light);
}
.ar-skip:focus {
  top: var(--space-4);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Container */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-padding));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
[data-block] {
  position: relative;
}

/* 4. Estilos de texto (Título 1–6, Texto grande/médio/pequeno). --zoom = "Zoom do texto". */
.t-h1 { font-family: var(--type-h1-family); font-size: calc(var(--type-h1-size) * var(--zoom, 1)); font-weight: var(--type-h1-weight); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-letter-spacing); font-style: var(--type-h1-style); }
.t-h2 { font-family: var(--type-h2-family); font-size: calc(var(--type-h2-size) * var(--zoom, 1)); font-weight: var(--type-h2-weight); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); font-style: var(--type-h2-style); }
.t-h3 { font-family: var(--type-h3-family); font-size: calc(var(--type-h3-size) * var(--zoom, 1)); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); font-style: var(--type-h3-style); }
.t-h4 { font-family: var(--type-h4-family); font-size: calc(var(--type-h4-size) * var(--zoom, 1)); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); font-style: var(--type-h4-style); }
.t-h5 { font-family: var(--type-h5-family); font-size: calc(var(--type-h5-size) * var(--zoom, 1)); font-weight: var(--type-h5-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); font-style: var(--type-h5-style); }
.t-h6 { font-family: var(--type-h6-family); font-size: calc(var(--type-h6-size) * var(--zoom, 1)); font-weight: var(--type-h6-weight); line-height: var(--type-h6-line-height); letter-spacing: var(--type-h6-letter-spacing); font-style: var(--type-h6-style); }
.t-text-lg { font-family: var(--type-text-lg-family); font-size: calc(var(--type-text-lg-size) * var(--zoom, 1)); font-weight: var(--type-text-lg-weight); line-height: var(--type-text-lg-line-height); letter-spacing: var(--type-text-lg-letter-spacing); font-style: var(--type-text-lg-style); }
.t-text-md { font-family: var(--type-text-md-family); font-size: calc(var(--type-text-md-size) * var(--zoom, 1)); font-weight: var(--type-text-md-weight); line-height: var(--type-text-md-line-height); letter-spacing: var(--type-text-md-letter-spacing); font-style: var(--type-text-md-style); }
.t-text-sm { font-family: var(--type-text-sm-family); font-size: calc(var(--type-text-sm-size) * var(--zoom, 1)); font-weight: var(--type-text-sm-weight); line-height: var(--type-text-sm-line-height); letter-spacing: var(--type-text-sm-letter-spacing); font-style: var(--type-text-sm-style); }
[data-edit="richtext"] > * + * {
  margin-top: 0.75em;
}
[data-edit="richtext"] ul,
[data-edit="richtext"] ol {
  margin-block: 0;
  padding-left: 1.25em;
}

/* 5. Botões (Botão grande/médio/pequeno). A cor vem do CSS do bloco ou do painel. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-text-light);
  border: 0 solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}
.btn:hover {
  filter: brightness(1.08);
}
.btn-lg { font-family: var(--button-lg-family); font-size: calc(var(--button-lg-size) * var(--zoom, 1)); font-weight: var(--button-lg-weight); letter-spacing: var(--button-lg-letter-spacing); text-transform: var(--button-lg-transform); padding: var(--button-lg-padding-y) var(--button-lg-padding-x); }
.btn-md { font-family: var(--button-md-family); font-size: calc(var(--button-md-size) * var(--zoom, 1)); font-weight: var(--button-md-weight); letter-spacing: var(--button-md-letter-spacing); text-transform: var(--button-md-transform); padding: var(--button-md-padding-y) var(--button-md-padding-x); }
.btn-sm { font-family: var(--button-sm-family); font-size: calc(var(--button-sm-size) * var(--zoom, 1)); font-weight: var(--button-sm-weight); letter-spacing: var(--button-sm-letter-spacing); text-transform: var(--button-sm-transform); padding: var(--button-sm-padding-y) var(--button-sm-padding-x); }

/* 6. Estilos definidos: bordas e sombras */
.border-lg { border: var(--border-lg-width) var(--border-lg-style) var(--border-lg-color); border-radius: var(--border-lg-radius); }
.border-md { border: var(--border-md-width) var(--border-md-style) var(--border-md-color); border-radius: var(--border-md-radius); }
.border-sm { border: var(--border-sm-width) var(--border-sm-style) var(--border-sm-color); border-radius: var(--border-sm-radius); }
[data-edit="image"].border-lg, [data-edit="image"].border-md, [data-edit="image"].border-sm,
[data-edit="video"].border-lg, [data-edit="video"].border-md, [data-edit="video"].border-sm {
  overflow: hidden;
}
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
[data-edit="text"].shadow-sm, [data-edit="richtext"].shadow-sm { box-shadow: none; text-shadow: var(--text-shadow-sm); }
[data-edit="text"].shadow-md, [data-edit="richtext"].shadow-md { box-shadow: none; text-shadow: var(--text-shadow-md); }
[data-edit="text"].shadow-lg, [data-edit="richtext"].shadow-lg { box-shadow: none; text-shadow: var(--text-shadow-lg); }

/* 7. Imagens: quadro de formato fixo (data-aspect / data-aspect-mobile) e imagem de fundo (data-bg) */
[data-edit="image"][data-aspect],
[data-edit="image"][data-aspect-mobile] {
  width: 100%;
  object-fit: cover;
}
[data-aspect="1/1"] { aspect-ratio: 1 / 1; }
[data-aspect="4/5"] { aspect-ratio: 4 / 5; }
[data-aspect="5/4"] { aspect-ratio: 5 / 4; }
[data-aspect="3/4"] { aspect-ratio: 3 / 4; }
[data-aspect="4/3"] { aspect-ratio: 4 / 3; }
[data-aspect="2/3"] { aspect-ratio: 2 / 3; }
[data-aspect="3/2"] { aspect-ratio: 3 / 2; }
[data-aspect="9/16"] { aspect-ratio: 9 / 16; }
[data-aspect="16/9"] { aspect-ratio: 16 / 9; }
[data-aspect="21/9"] { aspect-ratio: 21 / 9; }
@media (max-width: 767px) {
  [data-aspect-mobile="1/1"] { aspect-ratio: 1 / 1; }
  [data-aspect-mobile="4/5"] { aspect-ratio: 4 / 5; }
  [data-aspect-mobile="5/4"] { aspect-ratio: 5 / 4; }
  [data-aspect-mobile="3/4"] { aspect-ratio: 3 / 4; }
  [data-aspect-mobile="4/3"] { aspect-ratio: 4 / 3; }
  [data-aspect-mobile="2/3"] { aspect-ratio: 2 / 3; }
  [data-aspect-mobile="3/2"] { aspect-ratio: 3 / 2; }
  [data-aspect-mobile="9/16"] { aspect-ratio: 9 / 16; }
  [data-aspect-mobile="16/9"] { aspect-ratio: 16 / 9; }
  [data-aspect-mobile="21/9"] { aspect-ratio: 21 / 9; }
}
[data-edit="image"][data-bg] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: 0;
}
[data-bg] ~ * {
  position: relative;
  z-index: 1;
}

/* 8. Onde aparece: data-hide="mobile" (só no computador) / data-hide="desktop" (só no celular) */
@media (max-width: 767px) {
  [data-hide="mobile"] { display: none !important; }
}
@media (min-width: 768px) {
  [data-hide="desktop"] { display: none !important; }
}

/* 9. Vídeo (YouTube/Vimeo): proporção 16:9 e conteúdo preenchendo a caixa */
[data-edit="video"] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
[data-edit="video"] > iframe,
[data-edit="video"] > img,
[data-edit="video"] > button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* 10. Animações por atributo (data-anim*). Só rodam com o script do renderizador (classe ar-js no <html>).
      Sem o script, ou com "reduzir movimento" ligado, o conteúdo aparece parado e visível. */
@media (prefers-reduced-motion: no-preference) {
  .ar-js [data-anim] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--anim-duration, 1000ms);
    transition-delay: var(--anim-delay, 0ms);
    transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .ar-js [data-anim="slide"][data-anim-dir="up"] { transform: translateY(40px); }
  .ar-js [data-anim="slide"][data-anim-dir="down"] { transform: translateY(-40px); }
  .ar-js [data-anim="slide"][data-anim-dir="left"] { transform: translateX(40px); }
  .ar-js [data-anim="slide"][data-anim-dir="right"] { transform: translateX(-40px); }
  .ar-js [data-anim="zoom-in"] { transform: scale(0.85); }
  .ar-js [data-anim="zoom-out"] { transform: scale(1.15); }
  .ar-js [data-anim^="zoom"][data-anim-dir="up"] { transform-origin: top center; }
  .ar-js [data-anim^="zoom"][data-anim-dir="down"] { transform-origin: bottom center; }
  .ar-js [data-anim^="zoom"][data-anim-dir="left"] { transform-origin: center left; }
  .ar-js [data-anim^="zoom"][data-anim-dir="right"] { transform-origin: center right; }
  .ar-js [data-anim].ar-in {
    opacity: 1;
    transform: none;
  }
}