/* site.css — missaofesta.com.br
   Herda a linguagem visual do produto (templates/convite/info.css e index.html)
   em vez de inventar uma rival: cartão "marshmallow", botão "gummy 3D", easing
   de mola, medalhão flutuante. A diferença é que aqui os 17 tokens de tema
   trocam em runtime (site.js) — por isso toda cor de tema usa a variável CSS
   correspondente, nunca hex literal. Um hex hardcoded aqui é um elemento que
   não muda de mundo. */

:root {
  /* ═══ FAMÍLIA 1 — MARCA (fixa) ═══════════════════════════════════════════
     Nunca sobrescrita por site.js. Um mundo não repinta o ateliê — é o
     espaço vazio que docs/marca.md identificou no mercado brasileiro, onde
     todo concorrente herda a cara do personagem licenciado do mês.
     Regra para escolher a família de uma superfície nova:
       "continuaria fazendo sentido se o visitante nunca clicasse num mundo?"
       sim -> --marca-*   |   ela É a demonstração do mundo -> token de tema */

  /* pigmentos canônicos — docs/marca.md. NUNCA como cor de texto sobre papel:
     dourado dá 2.34 e laranja 3.18 de contraste. São material, não tinta. */
  --marca-dourado: #C99A2E;
  --marca-laranja: #E0632F;
  --marca-creme: #FFF3D6;
  --marca-tinta: #3B2A17;

  /* derivados de TINTA — existem porque os pigmentos reprovam em contraste */
  --marca-brasa: #A8481F;        /* 5.62 sobre papel — kickers, numerais */
  --marca-ouro-fundo: #8A5A20;   /* 5.70 — quando o texto precisa ler dourado */
  --marca-tinta-suave: #6A563E;  /* 6.74 — texto secundário */

  /* papel — três níveis de superfície, sem cor fora da paleta.
     --marca-papel NÃO é o creme: o creme é o preenchimento do SELO; se virasse
     o fundo de 100% da página o selo perderia recorte e o lockup flutuaria sem
     chão. Guardar o creme para faixas o mantém como evento visual. */
  --marca-papel: #FFFBF0;
  --marca-papel-cartao: #FFFFFF;
  --marca-papel-fundo: #FFF3D6;
  --marca-borda: #E7D6AE;
  --marca-borda-forte: #C99A2E;
  --marca-texto: #3B2A17;        /* 13.28 sobre papel */
  --marca-texto-suave: #6A563E;
  --marca-sombra: rgba(59, 42, 23, 0.14);

  /* confete — decorativo apenas; todos reprovam para texto (âmbar é 1.74) */
  --marca-confete-verde: #3E9E86;
  --marca-confete-rosa: #D94F6E;
  --marca-confete-azul: #4A7FD4;
  --marca-confete-ambar: #E8B33C;

  /* tipografia do ateliê. NÃO usar --fonte-display no chrome: aquela é de
     tema e site.js a sobrescreve, então os títulos do site trocavam de fonte
     ao clicar num mundo — mesma classe de vazamento que a cor. */
  --marca-fonte-titulo: 'Quicksand', system-ui, sans-serif;

  /* ═══ FAMÍLIA 2 — TEMA (volátil) ═════════════════════════════════════════
     Os 17 nomes que theme.json declara, sobrescritos por site.js -> vestir()
     quando o visitante escolhe um mundo. Contrato com theme.json: os 17 ficam
     declarados mesmo sem uso em site.css — é o que torna um tema novo plugável
     sem tocar neste arquivo, e sem declaração o primeiro paint resolve para
     nada (o defeito que tokens_nao_declarados existe para pegar).

     Os VALORES abaixo são fallback de emergência, não de design: depois da
     separação marca/tema eles só pintam 4 superfícies, todas vestidas no mesmo
     tick do DOMContentLoaded. Só aparecem se o JS falhar. Por isso continuam
     ESCUROS e dessaturados: moldura escura vazia sobre papel creme é
     obviamente um erro; uma clara passaria despercebida. E dessaturados
     porque os valores antigos (#C8A063, #E0765F) eram QUASE a marca — perto o
     bastante para alguém achar, num screenshot, que aquilo era a identidade. */
  --acento-magico: #8C7A5E;
  --acento-magico-claro: #A89477;
  --acento-magico-escuro: #6B5C44;
  --protagonista: #8A7566;
  --protagonista-claro: #B3A497;
  --protagonista-escuro: #6B5949;
  --aliado: #6F8A7E;
  --aliado-escuro: #4C6459;
  --antagonista: #7D7288;
  --brilho: #A69BAE;
  --claro: #FDF6E8;
  --tinta: #2E1B12;
  --fundo-profundo: #1B120C;
  --fundo-medio: #2A1C12;
  --fundo-medio-alt: #241a10;
  --fundo-nebulosa: #332315;
  --fundo-nucleo: #3E2A18;

  --fonte-display: 'Fredoka One', system-ui, sans-serif;
  --fonte-script: 'Pacifico', cursive;
  --fonte-subtitulo: 'Nunito', sans-serif;  /* site.js escreve; faltava aqui */
  --fonte-corpo: 'Nunito', sans-serif;
  --fonte-interface: 'Outfit', sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  /* sem background-attachment: fixed — um circle ancorado ao viewport some
     (vira transparente) depois de ~1 altura de tela numa página comprida.
     ellipse cobrindo 100% do documento resolve sem perder o efeito de brilho
     no topo. */
  background: var(--marca-papel);
  color: var(--marca-texto);
  font-family: var(--fonte-corpo), sans-serif;
  font-weight: 600;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* elementos que carregam a identidade do tema fazem a transição suave que já
   existe no produto — a "vestição" da página inteira ao trocar de mundo */
[data-tema] body,
[data-tema] .moldura-celular,
[data-tema] .veste-tema {
  transition: background-color .45s cubic-bezier(.175,.885,.32,1.275),
              color .45s cubic-bezier(.175,.885,.32,1.275),
              border-color .45s cubic-bezier(.175,.885,.32,1.275),
              box-shadow .45s cubic-bezier(.175,.885,.32,1.275);
}

.envelope {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── cabeçalho ────────────────────────────────────────────────────────── */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(255, 251, 240, 0.82);
  border-bottom: 1px solid var(--marca-borda);
}
.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
/* A marca é a ÚNICA coisa no site que não troca de cor com o tema: os SVGs
   trazem hex literal de propósito (ver docs/marca.md). Um mundo não repinta o
   ateliê — é o que dá à marca uma identidade que sobrevive aos 8 temas. */
.topo-marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.topo-marca-img {
  width: 168px;
  height: auto;
  display: block;
}
@media (max-width: 560px) {
  .topo-marca-img { width: 132px; }
}

.topo-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.topo-nav a {
  text-decoration: none;
  color: var(--marca-texto-suave);
  font-family: var(--fonte-interface), sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border-radius: 12px;
  transition: color .2s ease, background .2s ease;
}
.topo-nav a:hover { color: var(--marca-texto); background: var(--marca-papel-fundo); }
/* Abaixo de 720px o menu de 5 itens quebrava em 3 linhas e empurrava a marca
   para cima. Vira uma faixa rolavel horizontal: mantem os 5 destinos
   alcancaveis sem menu sanfona (que exigiria JS) e sem esconder nada.

   Achado de revisão, 29/08/2026: a barra de rolagem some (scrollbar-width:
   none) e "Papelaria" corta na borda sem nenhum indício de que existe mais
   coisa depois — em telas de celular normais (~390px) só "Os mundos" e
   "Como funciona" cabem inteiros, "Perguntas" e "Pedir orçamento" ficam
   invisíveis com zero sinalização. Um degradê no bit-map da própria cor de
   fundo (`--marca-papel`, o creme do body) na borda direita resolve sem JS:
   ele SEMPRE aparece — não há como detectar overflow só em CSS — mas span
   curto o bastante (28px) que nunca esconde texto de um item real, só avisa
   que a faixa continua. Ganha `mask-image` como reforço: junto com o
   degradê, esmaece de verdade o último item antes do corte. */
@media (max-width: 720px) {
  .topo-linha { gap: 10px; }
  .topo-nav-wrap {
    position: relative;
    min-width: 0;
  }
  .topo-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topo-nav::-webkit-scrollbar { display: none; }
  .topo-nav a { white-space: nowrap; padding: 8px 10px; font-size: 12.5px; }
  .topo-nav-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--marca-papel));
    pointer-events: none;
  }
  /* faixa já rolada até o fim: sem mais nada escondido à direita, o degradê
     vira ruído (parece que o último item também vai ser cortado). JS troca
     esta classe conforme o scroll (site.js -> iniciarFadeNav). */
  .topo-nav-wrap.fim-do-menu::after { opacity: 0; }
}


/* ── cartão marshmallow ───────────────────────────────────────────────── */
.cartao {
  background: var(--marca-papel-cartao);
  border: 1px solid var(--marca-borda);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 10px 28px var(--marca-sombra);
  color: var(--marca-texto);
}
.cartao--tema {
  box-shadow: 0 15px 35px color-mix(in srgb, var(--protagonista) 22%, transparent),
              inset 0 0 15px rgba(255,255,255,1);
}

/* ── botão gummy 3D ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  border: 3px solid var(--marca-papel-cartao);
  border-radius: 25px;
  padding: 14px 26px;
  font-family: var(--marca-fonte-titulo);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 0px rgba(0,0,0,0.15);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn::after {
  content: "";
  position: absolute;
  top: 3px; left: 10%;
  width: 80%; height: 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
}
/* O CTA e o "ponto quente" da pagina, e docs/marca.md chama o laranja
   exatamente assim. Dourado esta fora de questao aqui: 2.34 sobre o papel — o
   botao nao se destacaria do proprio fundo, mesmo com o texto legivel dentro.
   O topo do gradiente e #C24F22 e nao o laranja canonico da marca porque
   branco sobre o canonico da 3.50 — reprova. Assim da 4.73 e passa AA (4.5)
   sem depender do argumento de "texto grande", que um revisor pode contestar.
   O dourado volta como filete — que e o papel dele no logo: moldura. */
.btn-primario {
  color: var(--marca-papel-cartao);
  background: linear-gradient(to bottom, #C24F22, var(--marca-brasa));
  border-color: var(--marca-dourado);
  box-shadow: 0 5px 0 #8F3E1B, 0 8px 15px var(--marca-sombra);
}
.btn-primario:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #8F3E1B, 0 10px 18px var(--marca-sombra); }
.btn-primario:active { transform: translateY(3px); box-shadow: 0 2px 0 #8F3E1B; }

.btn-whatsapp {
  color: #fff;
  background: linear-gradient(to bottom, #6FE0A0, #25D366);
  box-shadow: 0 5px 0 #148a3f, 0 8px 15px var(--marca-sombra);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #148a3f, 0 10px 18px var(--marca-sombra); }
.btn-whatsapp:active { transform: translateY(3px); box-shadow: 0 2px 0 #148a3f; }

.btn-fantasma {
  color: var(--marca-texto);
  background: transparent;
  border-color: var(--marca-borda-forte);
  box-shadow: 0 4px 0 var(--marca-sombra);
}
.btn-fantasma:hover { transform: translateY(-2px); background: var(--marca-papel-fundo); }
.btn-fantasma:active { transform: translateY(2px); }

/* ── alternador jogar/detalhes — o que o palco de celular mostra ───────── */
/* Duas páginas do mesmo demo: o minijogo (t.jogar) e a página que ele libera
   ao vencer (t.detalhes — endereço, RSVP, presentes). Sem isto o visitante só
   via a segunda depois de terminar o jogo inteiro; aqui ele compara as duas
   de um clique, sem sair do mundo escolhido. Pill de 2 opções no mesmo
   vocabulário do .chip-historia (rótulo curto, cor de tema), não do .btn
   gummy — são um seletor de estado, não uma ação. */
.alternador-palco {
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 380px;
  margin: 0 auto 14px;
  padding: 5px;
  background: var(--marca-papel-fundo);
  border: 1px solid var(--marca-borda);
  border-radius: 16px;
}
.alternador-item {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--marca-texto-suave);
  font-family: var(--fonte-interface), sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.alternador-item:hover { color: var(--marca-texto); }
.alternador-item.ativo {
  background: var(--marca-papel-cartao);
  color: var(--protagonista-escuro);
  box-shadow: 0 3px 10px var(--marca-sombra);
}

/* ── moldura de celular — onde cada demo joga ────────────────────────── */
.moldura-celular {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border: 8px solid var(--marca-papel-cartao);
  border-radius: 40px;
  /* o halo e de TEMA de proposito: com o chrome fixo na marca, a moldura passa
     a ser o unico lugar da pagina que pisca de cor ao trocar de mundo — e por
     isso concentra a atencao em vez de espalha-la por 17 tokens */
  box-shadow: 0 20px 60px var(--marca-sombra),
              0 0 0 3px color-mix(in srgb, var(--acento-magico) 45%, transparent);
  background: #000;
  overflow: hidden;
  transition: aspect-ratio .3s ease, height .3s ease;
}
/* modo "detalhes" (site.js -> carregarDemoNoPalco): a página de RSVP/
   endereço/presentes é documento longo, não canvas de jogo — presa em 9:16
   ela cabia menos de 1 card de altura e o texto saía minúsculo (achado de
   revisão, 29/08/2026). Troca o formato por uma tela de celular alta de
   verdade, com scroll interno visível em vez de crop. */
.moldura-celular[data-modo="detalhes"] {
  aspect-ratio: auto;
  height: min(76vh, 720px);
}
.moldura-celular iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.moldura-celular .moldura-carregar {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--fundo-nucleo), var(--fundo-profundo));
  cursor: pointer;
}
.moldura-carregar .btn { pointer-events: none; }

/* giradinho de carregamento — as duas páginas do demo embutem fonte e
   ilustração em base64 (a de detalhes passa de 1 MB), então em rede de
   celular fraca a moldura ficava preta e muda por 1-3s sem nenhum sinal de
   que algo estava acontecendo (achado de revisão, 29/08/2026). site.js
   remove data-carregando no "load" do iframe; sem JS (não deveria
   acontecer, mas por via das dúvidas) o giradinho fica parado sobre o
   preto — pior que hoje não fica, só não some sozinho. */
.spinner-palco {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: #000;
  z-index: 1;
}
.moldura-celular[data-carregando] .spinner-palco { display: grid; }
.spinner-palco::after {
  content: "";
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: girarSpinner .8s linear infinite;
}
@keyframes girarSpinner { to { transform: rotate(360deg); } }

/* dica de rolagem — só faz sentido no modo "detalhes" (documento comprido);
   o jogo é canvas de toque sem scroll de página, então nunca a mostra.
   ::after em vez de elemento novo porque é decoração pura, sem texto para
   leitor de tela, e assim não compete com o iframe por foco/clique
   (pointer-events: none deixa o toque atravessar direto pro conteúdo). */
.moldura-celular[data-modo="detalhes"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
  pointer-events: none;
}

/* ── medalhão flutuante ─────────────────────────────────────────────── */
@keyframes floatCandy {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
.medalhao-flutuante {
  animation: floatCandy 4s ease-in-out infinite;
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--acento-magico) 45%, transparent));
}

/* ── motivo tracejado ("ticket") ─────────────────────────────────────── */
.tracejado {
  border-top: 2px dashed var(--marca-borda);
  padding-top: 16px;
  margin-top: 16px;
}

/* ── grade de mundos ──────────────────────────────────────────────────── */
.grade-mundos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.cartao-mundo {
  background: var(--marca-papel-cartao);
  border: 1px solid var(--marca-borda);
  border-radius: 28px;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  color: var(--marca-texto);
  box-shadow: 0 8px 20px var(--marca-sombra);
  transition: transform .25s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow .25s ease;
}
.cartao-mundo:hover { transform: translateY(-4px); }
.cartao-mundo.ativo {
  box-shadow: 0 15px 35px color-mix(in srgb, var(--protagonista) 35%, transparent), 0 0 0 4px var(--acento-magico);
}
.cartao-mundo img { width: 56px; height: 56px; margin-bottom: 8px; }
/* excecao de fronteira deliberada: a COR demonstra o mundo, a FONTE e do atelie */
.cartao-mundo h3 {
  font-family: var(--marca-fonte-titulo);
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--protagonista-escuro);
}
.cartao-mundo p {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--marca-texto-suave);
}
/* Era .chip-mecanica e mostrava o id cru do motor ("memoria", "escavacao").
   Agora carrega o NOME DA HISTORIA daquele mundo, entao perde o tratamento de
   rotulo (caixa alta espacada, 10px) e ganha o de titulo: e para ser lido, nao
   escaneado. Continua sendo superficie de VITRINE — a cor vem do tema. */
.chip-historia {
  display: inline-block;
  font-family: var(--fonte-interface), sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 12px;
  background: var(--acento-magico-claro);
  color: var(--acento-magico-escuro);
}

/* ── seções ───────────────────────────────────────────────────────────── */
.secao { padding: 64px 0; }
.secao h2 {
  font-family: var(--marca-fonte-titulo);
  font-size: clamp(24px, 4vw, 34px);
  color: var(--marca-texto);
  margin: 0 0 12px;
}
.secao .kicker {
  font-family: var(--fonte-interface), sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca-texto-suave);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.secao .kicker::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--marca-dourado);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.secao .lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--marca-texto-suave);
  max-width: 62ch;
  margin: 0 0 28px;
}

.hero {
  padding: 56px 0 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
}
.hero h1 {
  font-family: var(--marca-fonte-titulo);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.15;
  color: var(--marca-texto);
  margin: 0 0 16px;
}
.hero .lede { font-size: 17px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.passo {
  background: var(--marca-papel-cartao);
  border: 1px solid var(--marca-borda);
  border-radius: 28px;
  padding: 22px;
  color: var(--marca-texto);
  box-shadow: 0 8px 20px var(--marca-sombra);
}
.passo .num {
  font-family: var(--marca-fonte-titulo);
  font-size: 26px;
  color: var(--marca-brasa);
  margin-bottom: 6px;
}
.passo h3 { font-size: 16px; margin: 0 0 6px; }
.passo p { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--marca-texto-suave); }

.tabela-comparativa {
  width: 100%;
  border-collapse: collapse;
  background: var(--marca-papel-cartao);
  border-radius: 22px;
  overflow: hidden;
  color: var(--marca-texto);
  font-size: 13.5px;
  box-shadow: 0 8px 20px var(--marca-sombra);
}
.tabela-comparativa th, .tabela-comparativa td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--marca-borda);
  vertical-align: top;
}
.tabela-comparativa th {
  font-family: var(--fonte-interface), sans-serif;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marca-tinta);
  background: var(--marca-papel-fundo);
}
.tabela-comparativa tr:last-child td { border-bottom: none; }

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--marca-papel-cartao);
  border: 1px solid var(--marca-borda);
  border-radius: 20px;
  padding: 16px 20px;
  color: var(--marca-texto);
}
.faq summary {
  font-family: var(--fonte-interface), sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "＋ "; color: var(--marca-brasa); }
.faq details[open] summary::before { content: "－ "; }
.faq p { font-size: 13.5px; line-height: 1.6; margin: 10px 0 0; color: var(--marca-texto-suave); }

.rodape {
  padding: 40px 0 60px;
  border-top: 1px solid var(--marca-borda);
  color: var(--marca-texto-suave);
  font-size: 12.5px;
  text-align: center;
}
.rodape a { text-decoration: underline; }
.rodape-selo {
  width: 44px;
  height: auto;
  margin: 0 auto 14px;
  opacity: 0.9;
}

/* ── faixa demo dentro dos cartões de mundo (link para orçamento) ───────── */
.aviso-orcamento {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--marca-papel-fundo);
  color: var(--marca-tinta);
  border-left: 4px solid var(--marca-laranja);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Titulo de bloco dentro de cartao. Existe como CLASSE porque os 7 h3 das
   paginas eram identicos e inline — e nenhuma regra de portao pega style="" em
   HTML, entao o proximo h3 nasceria copiando o vizinho e reintroduzindo token
   de tema no chrome. */
.titulo-cartao {
  font-family: var(--marca-fonte-titulo);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--marca-tinta);
}

/* wrapper que troca de cor com o tema selecionado — usado nas páginas com galeria */
.veste-tema {
  border: 1px solid rgba(255,255,255,0.08);
}