/* =========================================================================
   CINCARE — INSTITUCIONAL
   Design system das páginas PÚBLICAS no estilo do site da Upwage: creme
   domina, títulos grandes em Inter com o "_" piscando no fim,
   texto em Inter, eyebrow espaçado com traço, linha com ponto ligando
   título e texto, seções escuras em degradê, botões em pílula, rodapé
   escuro. O estilo é o da Upwage; a marca continua a da Cincare:
     teal #00654e  → papel do "azul ardósia" (destaque, links, CTA)
     tinta #0e1f33 → papel do "grafite" (texto, fundos escuros, rodapé)
     dourado       → destaque fino (caret, título em fundo escuro, detalhes)

   QUEM CARREGA: index.html (home) e as páginas públicas que adotarem o
   estilo — Termos, Privacidade, FAQ, 404 e a loja de voucher
   (src/pages/schedule/cad-new-schedule.html). Nada aqui é só da home: o
   que é da home vive em src/pages/home/home.css.

   ORDEM NO <head>:
     0. <meta name="color-scheme" content="only light"> (o "escurecer sites"
        do Chrome do Android inverte a página sem ela; ver :root abaixo)
     1. preconnect + Google Fonts (Inter)
     2. /src/shared/styles/base.css — SÓ se a página ainda depender dele
        (tokens --brand-*, .layout-header, .button-*, .hidden, ou o CSS da
        página escrito sobre ele). A home não carrega mais base.css.
     3. /src/shared/styles/institucional.css (este arquivo)
     4. o CSS da página
     5. <script src="/src/shared/layouts/institucional.js"></script> — no
        <head>, SEM defer: ele marca <html class="js"> antes da primeira
        pintura (senão os blocos com data-reveal piscam) e liga o resto
        sem esperar o DOMContentLoaded (que espera as CDNs do fim do body).
   Molde completo de página interna (header claro, topo, texto legal,
   formulário, modal, faixa de CTA e rodapé):
   src/pages/legal/terms.html (o molde de desenvolvimento ficou no histórico do git, em docs/redesenho/moldes/).

   REVELAR AO ROLAR (data-reveal): o movimento usa as propriedades
   `translate`/`scale`, NÃO `transform` — o `transform` fica livre para o
   hover dos componentes (.card--hover, .recurso, .btn). Pode pôr data-reveal
   direto num cartão. Nunca ponha data-reveal no primeiro bloco da página
   (hero/topo): ele tem de aparecer na primeira pintura, sem JS.

   CONVIVÊNCIA COM base.css: nenhum token nem classe daqui tem o mesmo nome
   de um de base.css (lá é inglês: --gutter, --ease, --r-lg, --grad-hero,
   .layout-*, .component-*, .button-*; aqui é português). A escala é em px
   de propósito: não depende do font-size fluido que base.css põe na raiz,
   então funciona igual com ou sem ele. Também NÃO há reset global de
   <ul>, <ol> nem <button>: Termos e Privacidade têm listas com marcador, e
   a loja tem botões que o CSS dela desenha.

   Ordem do arquivo: tokens → base → utilitários → tipografia → botões →
   marca → header e menu do celular → seções e componentes → formulários →
   modal → diálogos e toast do utils.js → rodapé → revelar ao rolar →
   responsivo → impressão.
   ========================================================================= */

/* ----- Tokens ----- */
:root {
  /* só tema claro (o mesmo que a <meta name="color-scheme" content="only light">):
     o Chrome do Android não escurece à força uma página que declara isto */
  color-scheme: only light;

  /* creme como na Upwage; a fonte é a Inter em tudo (pedido do dono, 14/10/2026) */
  --creme: #F0EEE6;           /* base: fundos e respiro */
  --creme-claro: #F7F5EE;     /* superfícies e cartões */
  --branco: #FFFFFF;

  /* marca Cincare nos papéis da paleta da Upwage */
  --tinta: #0E1F33;           /* "grafite": texto, seções escuras, rodapé */
  --marinho: #13294B;         /* marinho do logo ("CIN") */
  --tinta-2: #1A3556;         /* hover do botão escuro */
  --teal: #00654E;            /* "azul ardósia": destaque, links, CTA */
  --teal-profundo: #054E3D;   /* hover e profundidade */
  --teal-medio: #1A9078;
  --teal-claro: #7CC4AE;      /* teal legível sobre fundo escuro */
  --dourado: #D9A321;         /* destaque fino: caret, detalhes */
  --dourado-claro: #E6B93F;   /* dourado sobre fundo escuro */
  --dourado-texto: #7D5C0B;   /* dourado legível como TEXTO sobre creme (5,4:1) */
  --pedra: #77736A;           /* apoio: legendas */
  --erro: #A3392B;            /* campo inválido, diálogo de perigo (6,4:1 no branco) */

  --texto: var(--tinta);
  --texto-2: #4E5866;         /* corpo secundário sobre claro (6,3:1 no creme) */
  --texto-3: #6B6962;         /* legendas e rótulos pequenos (4,6:1 no creme) */
  --cor-eyebrow: var(--teal);
  --linha: rgba(14, 31, 51, .12);
  --linha-forte: rgba(14, 31, 51, .22);
  --linha-clara: rgba(255, 255, 255, .14);

  --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* títulos também na Inter */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --largura: 1180px;
  --respiro: clamp(16px, 4vw, 40px);  /* margem lateral (16px no celular) */
  --altura-header: 76px;

  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio: 16px;
  --raio-lg: 24px;
  --raio-xl: 36px;

  --sombra-sm: 0 6px 18px rgba(14, 31, 51, .08);
  --sombra: 0 22px 60px rgba(14, 31, 51, .14);
  --sombra-forte: 0 40px 90px rgba(14, 31, 51, .28);

  /* degradês das seções (equivalentes ao --grad-azul / --grad-noite da Upwage) */
  --degrade-teal: radial-gradient(120% 120% at 50% 0%, #1A9078 0%, #00654E 42%, #054E3D 100%);
  --degrade-noite: radial-gradient(90% 80% at 72% 78%, #00654E 0%, #0B4448 34%, #112B45 70%, #0E1F33 100%);
  /* véu sobre foto: marinho-tinta à esquerda, teal à direita */
  --degrade-veu: linear-gradient(100deg, rgba(14, 31, 51, .94) 0%, rgba(14, 31, 51, .80) 34%, rgba(8, 62, 64, .78) 68%, rgba(0, 101, 78, .86) 100%);

  --curva: cubic-bezier(.22, .61, .36, 1);
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--creme);
  /* A Playfair (fonte anterior) desenhava algarismos "old-style": "01" vira "o1" e
     "100%" vira "1oo%". Algarismos de linha em tudo (herdado; na Inter não
     muda nada, ela já é assim). */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip; /* corta sem criar contêiner de rolagem (não quebra o sticky) */
}
/* Os controles de formulário NÃO herdam o font-variant-numeric do body: a
   folha do navegador reescreve o `font` inteiro deles. Sem isto, a pergunta
   do acordeão (.faq__q é um <button>) volta aos algarismos
   old-style. Só esta propriedade, e com peso zero (:where): não é um reset
   de <button> (a loja desenha os botões dela) e qualquer classe passa por cima. */
:where(button, input, select, textarea) { font-variant-numeric: inherit; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--teal); color: var(--branco); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.bg-noite :focus-visible, .bg-tinta :focus-visible, .bg-teal :focus-visible,
.site-footer :focus-visible, .site-header.is-sobre-intro :focus-visible { outline-color: var(--teal-claro); }

/* utilitário que base.css também tem (mesmo efeito): páginas que deixarem
   de carregar base.css continuam com o .hidden que o JS delas usa */
.hidden { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: var(--raio-xs);
  background: var(--tinta); color: var(--branco); font-size: 14px; font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ----- Animações ----- */
@keyframes inst-piscar { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes inst-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes inst-seta { 0% { transform: translateX(0); } 50% { transform: translateX(8px); } 100% { transform: translateX(0); } }

/* =========================================================================
   Utilitários de layout
   ========================================================================= */
.wrap { width: min(var(--largura), 100% - 2 * var(--respiro)); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 2 * var(--respiro)); margin-inline: auto; }
.wrap--wide { width: min(1320px, 100% - 2 * var(--respiro)); margin-inline: auto; }

.section { position: relative; padding-block: clamp(72px, 9vw, 136px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--flush-top { padding-top: 0; }

/* Compensa o header fixo em páginas internas que não começam com .topo-pagina */
.recuo-header { padding-top: var(--altura-header); }

/* Fundos de seção. Os escuros invertem a cor do texto e das linhas. */
.bg-creme { background: var(--creme); }
.bg-claro { background: var(--creme-claro); }
.bg-branco { background: var(--branco); }
.bg-tinta { background: var(--tinta); color: var(--creme); }
.bg-noite { background: var(--degrade-noite); color: var(--creme); }
.bg-teal { background: var(--degrade-teal); color: var(--branco); }
.bg-tinta, .bg-noite, .bg-teal {
  --texto-2: rgba(240, 238, 230, .78);
  --texto-3: rgba(240, 238, 230, .6);
  --linha: var(--linha-clara);
  --linha-forte: rgba(255, 255, 255, .24);
  --cor-eyebrow: var(--teal-claro);
}
.bg-teal { --cor-eyebrow: rgba(255, 255, 255, .8); --texto-2: rgba(255, 255, 255, .86); }

/* Grades */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.center { text-align: center; }
.muted { color: var(--texto-2); }
.small { font-size: 14px; }
.stack > * + * { margin-top: var(--stack, 18px); }
.mt-0 { margin-top: 0 !important; }

/* =========================================================================
   Tipografia
   ========================================================================= */

/* Eyebrow: rótulo pequeno espaçado, com traço antes */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cor-eyebrow);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--plain::before { display: none; }
.center .eyebrow { justify-content: center; }
.eyebrow + .display { margin-top: 14px; }

/* Títulos: Inter, grandes, com o "_" piscando no fim */
.display {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.06; letter-spacing: -.025em;
  text-wrap: balance;
}
.display--xl { font-size: clamp(42px, 6vw, 86px); line-height: 1.04; font-weight: 700; }
.display--md { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; }
.display--sm { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.display em, .display i { font-style: italic; font-weight: 500; }
.display .tint { color: var(--teal); }
.bg-tinta .display .tint, .bg-noite .display .tint, .bg-teal .display .tint { color: var(--dourado-claro); }

/* O "_" piscando. Dourado em qualquer fundo (é o destaque fino da marca). */
.caret {
  display: inline-block; width: .5em; height: .075em; margin-left: .06em;
  background: var(--dourado); vertical-align: baseline;
  animation: inst-piscar 1.1s steps(1) infinite;
}
.bg-tinta .caret, .bg-noite .caret, .bg-teal .caret { background: var(--dourado-claro); }

.lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--texto-2); text-wrap: pretty; }

/* Cabeçalho de seção padrão (eyebrow + título + texto) */
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; }
.section-head .display { margin-top: 14px; }
.section-head .lead { margin-top: 18px; }
.section-head + * { margin-top: clamp(40px, 5vw, 64px); }

/* Citação grande (manifesto) */
.quote-block { text-align: center; }
.quote-block__text {
  font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.16;
  max-width: 22ch; margin-inline: auto; text-wrap: balance;
}
/* itálico de verdade: a Inter é carregada com itálico (sem ele, o navegador
   só inclinaria a letra: itálico falso) */
.quote-block__cite { display: block; margin-top: 18px; font-family: var(--serif); font-size: 18px; font-style: italic; font-weight: 500; color: var(--texto-2); }

/* Texto corrido longo (Termos, Privacidade): títulos em serifa, listas COM marcador */
.prosa { color: var(--texto-2); font-size: 16px; line-height: 1.8; }
/* O ritmo vale também DENTRO de <article>/<section>: Termos e Privacidade
   embrulham cada cláusula num <article>, e o reset global zera a margem dos <p>. */
.prosa > * + *,
.prosa :is(article, section) > * + * { margin-top: 16px; }
/* o começo do texto não tem margem, nem quando o 1º título está dentro de
   <section class="terms-content"> > <article> (até 3 níveis) */
.prosa > :first-child,
.prosa > :first-child > :first-child,
.prosa > :first-child > :first-child > :first-child { margin-top: 0; }
.prosa h2 {
  margin-top: clamp(40px, 5vw, 56px); font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600; line-height: 1.2; color: var(--texto); text-wrap: balance;
}
.prosa h3 { margin-top: 32px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.prosa h2 + *, .prosa h3 + * { margin-top: 12px; }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li + li { margin-top: 8px; }
.prosa li::marker { color: var(--teal); }
.prosa a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--teal-profundo); }
.prosa strong { color: var(--texto); font-weight: 600; }

/* Peças de documento legal (Termos, Privacidade).
   .documento-versao — a linha "Versão X · vigente desde…" embaixo do título
     (TEM de ficar visível: é a versão que o consentimento grava);
   .documento-quadro — bloco de identificação dentro do texto (fornecedor nos
     Termos, controlador na Privacidade). O p.rodape-fornecedor dos Termos já
     sai com esta pele sem precisar da classe;
   .documento-rodape — "Última atualização: …" no fim do texto. */
.documento-versao {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 20px;
  /* raio de "pílula" que ainda fica bonito quando o texto quebra em 2 linhas no celular */
  padding: 6px 14px; border-radius: 18px; border: 1px solid var(--linha-forte); background: var(--creme-claro);
  font-size: 13.5px; line-height: 1.5; color: var(--texto-2);
}
.documento-versao strong { color: var(--texto); font-weight: 600; }
.documento-quadro, .prosa .rodape-fornecedor {
  padding: 20px 24px; border-radius: var(--raio);
  background: var(--creme-claro); border: 1px solid var(--linha); border-left: 3px solid var(--teal);
  font-size: 15px; line-height: 1.75; color: var(--texto-2);
}
.documento-rodape {
  margin-top: clamp(40px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--linha);
  font-size: 14px; color: var(--texto-3);
}

/* Topo de página interna (Termos, FAQ, 404, loja): clareia o header fixo */
.topo-pagina { position: relative; padding: calc(var(--altura-header) + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); }
.topo-pagina .display { margin-top: 14px; }
.topo-pagina .lead { margin-top: 18px; max-width: 680px; }
.topo-pagina.center .lead { margin-inline: auto; }

/* "← Voltar ao início" acima do título de página interna (é bloco: o eyebrow vem embaixo) */
.voltar {
  display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 28px;
  font-size: 14px; font-weight: 600; color: var(--texto-2); transition: color .2s;
}
.voltar:hover { color: var(--teal); }
.voltar svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--curva); }
.voltar:hover svg { transform: translateX(-3px); }
.center .voltar { margin-inline: auto; }

/* =========================================================================
   Botões (pílula de 48px)
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 26px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  border: 1.5px solid transparent; background: none; color: inherit; cursor: pointer;
  text-decoration: none;
  transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva), transform .25s var(--curva), box-shadow .25s var(--curva);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--curva); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg.seta { transform: translateX(4px); }
.btn--teal { background: var(--teal); color: var(--branco); box-shadow: 0 10px 26px rgba(0, 101, 78, .30); }
.btn--teal:hover { background: var(--teal-profundo); }
.btn--tinta { background: var(--tinta); color: var(--branco); }
.btn--tinta:hover { background: var(--tinta-2); }
.btn--claro { background: var(--creme-claro); color: var(--tinta); }
.btn--claro:hover { background: var(--branco); }
.btn--dourado { background: var(--dourado); color: var(--tinta); box-shadow: 0 10px 26px rgba(217, 163, 33, .28); }
.btn--dourado:hover { background: var(--dourado-claro); }
.btn--contorno { border-color: currentColor; color: inherit; }
.btn--contorno:hover { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.bg-tinta .btn--contorno:hover, .bg-noite .btn--contorno:hover, .bg-teal .btn--contorno:hover {
  background: var(--creme-claro); border-color: var(--creme-claro); color: var(--tinta);
}
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 16px; }
.btn--block { width: 100%; }
/* Botão só de ícone: círculo de 48px (40 com --sm). O nome vai num
   <span class="sr-only"> (o leitor de tela lê) ou no aria-label.
   .btn--icone-celular: mostra ícone + texto e vira círculo só de ícone,
   com o texto escondido de forma acessível, onde o header aperta — até
   760px e na faixa de 1081 a 1240px (ver Responsivo). É o "Voltar" do
   header da loja. */
.btn--icone { width: 48px; padding: 0; gap: 0; flex: none; }
.btn--icone.btn--sm { width: 40px; }
.btn--icone svg { width: 20px; height: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* Link com seta (texto) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--teal);
  border-bottom: 1px solid transparent; transition: gap .2s, border-color .2s;
}
.link-arrow:hover { gap: 12px; border-color: currentColor; }
.link-arrow svg { width: 16px; height: 16px; flex: none; }
.bg-tinta .link-arrow, .bg-noite .link-arrow { color: var(--teal-claro); }
.bg-teal .link-arrow { color: var(--creme); }

/* Chip/selo */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.2;
  background: var(--creme-claro); border: 1px solid var(--linha); color: var(--texto);
}
.bg-tinta .chip, .bg-noite .chip, .bg-teal .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--creme); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================================
   Marca (logo)
   O símbolo redondo sai colorido do próprio PNG (recortado pela largura do
   elemento); o nome "CINCARE" entra como MÁSCARA do mesmo PNG e a cor vem do
   CSS — "CIN" marinho e "CARE" teal, como no logo, ou creme + teal-claro no
   fundo escuro (.marca--clara). Um arquivo só, nenhuma imagem nova.
   Proporções medidas no PNG (1824×596): símbolo até x≈600, "CIN|CARE" em x≈1115.
   ========================================================================= */
.marca { --marca-h: 38px; display: inline-flex; align-items: center; flex: none; height: var(--marca-h); }
.marca__simbolo {
  display: block; flex: none; width: calc(var(--marca-h) * 1.007); height: 100%;
  background: url("/public/assets/logo/logo-cincare.png") left center / auto 100% no-repeat;
}
.marca__nome {
  display: block; flex: none; width: calc(var(--marca-h) * 2.054); height: 100%;
  background: linear-gradient(90deg, var(--marinho) 0 42%, var(--teal) 42% 100%);
  -webkit-mask: url("/public/assets/logo/logo-cincare.png") right center / auto 100% no-repeat;
          mask: url("/public/assets/logo/logo-cincare.png") right center / auto 100% no-repeat;
  transition: background .35s var(--curva);
}
.marca--clara .marca__nome { background: linear-gradient(90deg, var(--creme-claro) 0 42%, var(--teal-claro) 42% 100%); }
.marca--sm { --marca-h: 30px; }
.marca--lg { --marca-h: 46px; }

/* =========================================================================
   Header fixo, claro e translúcido
   Nas páginas internas ele já nasce claro. Na home ele nasce transparente
   sobre o hero escuro (.is-sobre-intro, posto no HTML) e o institucional.js
   tira a classe quando a rolagem passa do hero: o fundo creme com desfoque
   "aparece ao rolar".
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--altura-header);
  color: var(--texto);
  background: rgba(247, 245, 238, .95); /* .95 e não .92: sobre as seções escuras o creme não acinzenta */
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--linha);
  transition: background-color .35s var(--curva), border-color .35s, box-shadow .3s, color .35s;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(14, 31, 51, .08); }
.site-header.is-sobre-intro {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--creme-claro);
}
/* sem JS ninguém tira a transparência: o header rola junto com o hero */
html:not(.js) .site-header.is-sobre-intro { position: absolute; }

.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.is-sobre-intro .marca__nome { background: linear-gradient(90deg, var(--creme-claro) 0 42%, var(--teal-claro) 42% 100%); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.nav__link {
  position: relative; font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  color: var(--texto-2); padding-block: 8px; transition: color .2s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--texto); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-header.is-sobre-intro .nav__link { color: rgba(247, 245, 238, .84); }
.site-header.is-sobre-intro .nav__link:hover { color: var(--branco); }
.site-header.is-sobre-intro .nav__link::after { background: var(--dourado-claro); }

.site-header__acoes { display: flex; align-items: center; gap: 14px; flex: none; }

/* Link do Clube Cincoin: texto dourado com a "moeda" antes */
.site-header__clube {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--dourado-texto);
  padding: 8px 2px; transition: color .2s;
}
.site-header__clube::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--dourado); box-shadow: 0 0 0 3px rgba(217, 163, 33, .22);
}
.site-header__clube:hover { color: var(--tinta); }
.site-header.is-sobre-intro .site-header__clube { color: var(--dourado-claro); }
.site-header.is-sobre-intro .site-header__clube:hover { color: var(--branco); }

/* Botão de login: escuro no header claro, contorno claro sobre o hero */
.site-header.is-sobre-intro .site-header__login { background: transparent; border-color: rgba(247, 245, 238, .55); color: var(--creme-claro); }
.site-header.is-sobre-intro .site-header__login:hover { background: var(--creme-claro); border-color: var(--creme-claro); color: var(--tinta); }

/* Conta logada (o JS da página controla o display e preenche nome e papel) */
.site-header__conta {
  display: inline-flex; align-items: center; gap: 10px; max-width: 250px;
  padding: 4px 16px 4px 4px; border-radius: 999px;
  background: var(--creme-claro); border: 1px solid var(--linha-forte); color: var(--texto);
  transition: background-color .2s, border-color .2s, transform .25s var(--curva);
}
.site-header__conta:hover { background: var(--branco); border-color: var(--teal); transform: translateY(-1px); }
.site-header__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--teal); color: var(--branco);
}
.site-header__avatar svg { width: 18px; height: 18px; }
.site-header__conta-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.site-header__conta-texto strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header__conta-texto small { font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header.is-sobre-intro .site-header__conta { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: var(--creme-claro); }
.site-header.is-sobre-intro .site-header__conta-texto small { color: rgba(247, 245, 238, .7); }

/* Hambúrguer (só no celular/tablet) */
.menu-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--linha-forte); background: transparent; color: inherit; cursor: pointer;
  font: inherit;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle__fechar { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__abrir { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__fechar { display: block; }
.site-header.is-sobre-intro .menu-toggle { border-color: rgba(247, 245, 238, .4); }

/* Menu do celular: painel creme abaixo do header */
.mobile-menu {
  position: fixed; inset: var(--altura-header) 0 0 0; z-index: 119;
  background: var(--creme-claro); color: var(--texto); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px var(--respiro) 40px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .25s var(--curva), visibility .25s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu__grupo + .mobile-menu__grupo { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.mobile-menu__rotulo { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 6px; }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--texto);
}
.mobile-menu__link small { display: block; margin-top: 2px; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--texto-2); }
.mobile-menu__link svg { width: 20px; height: 20px; flex: none; color: var(--teal); }
.mobile-menu__link[aria-current="page"] { color: var(--teal); }
.mobile-menu .btn { margin-top: 28px; }

/* =========================================================================
   Linha com ponto na ponta (motivo gráfico recorrente)
   ========================================================================= */
.dot-line { position: relative; display: inline-block; width: 64px; height: 1px; background: currentColor; opacity: .85; flex: none; }
.dot-line::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.arrow-line { position: relative; display: inline-block; width: 64px; height: 1px; background: currentColor; flex: none; }
.arrow-line::after {
  content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}

/* SPLIT — título ← linha com ponto → texto */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(80px, 14vw, 220px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); align-items: center;
}
.split__title { margin: 0; }
.split__title .btn { margin-top: 26px; }
.split__line { position: relative; height: 1px; background: currentColor; opacity: .6; transform-origin: left; }
.split__line::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.split__body > * + * { margin-top: 16px; }
.split__body p { color: var(--texto-2); text-wrap: pretty; }
.split__body strong { color: inherit; font-weight: 600; }
.split--reverse .split__title { order: 3; text-align: right; }
.split--reverse .split__line { order: 2; transform-origin: right; }
.split--reverse .split__line::after { right: auto; left: -4px; }
.split--reverse .split__body { order: 1; }
.js .split[data-reveal] .split__line { transform: scaleX(0); transition: transform 1s var(--curva) .25s; }
.js .split[data-reveal].is-visible .split__line { transform: scaleX(1); }
.split + .split { margin-top: clamp(72px, 9vw, 130px); }

/* Anéis concêntricos (fundo decorativo das seções escuras) */
.rings {
  position: absolute; pointer-events: none; z-index: 0;
  width: min(1100px, 140vw); aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 78px, rgba(255, 255, 255, .08) 79px 80px);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
}

/* Curva de fundo (elipse clara atrás de uma ilustração) */
.curve-bg { position: relative; isolation: isolate; }
.curve-bg::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 180%; height: 62%; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--creme-claro);
}

/* =========================================================================
   Cartões
   ========================================================================= */
.card {
  position: relative; padding: clamp(24px, 2.6vw, 34px);
  background: var(--creme-claro); border: 1px solid var(--linha); border-radius: var(--raio-lg);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: rgba(0, 101, 78, .35); }
.card--branco { background: var(--branco); }
.card--escuro { background: var(--tinta); border-color: var(--linha-clara); color: var(--creme); --texto-2: rgba(240, 238, 230, .74); }
.card--teal { background: var(--degrade-teal); border-color: transparent; color: var(--branco); --texto-2: rgba(255, 255, 255, .84); }
.bg-claro .card { background: var(--creme); }
.bg-tinta .card, .bg-noite .card { background: rgba(255, 255, 255, .04); border-color: var(--linha-clara); }
.card__ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(0, 101, 78, .1); color: var(--teal); margin-bottom: 20px;
}
.card__ico svg { width: 26px; height: 26px; }
.card--escuro .card__ico, .bg-tinta .card__ico, .bg-noite .card__ico { background: rgba(124, 196, 174, .14); color: var(--teal-claro); }
.card--teal .card__ico { background: rgba(255, 255, 255, .14); color: var(--branco); }
.card__num { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; color: var(--teal); }
.card__title { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.card__text { margin-top: 10px; font-size: 15px; color: var(--texto-2); line-height: 1.65; text-wrap: pretty; }

/* Lista com check */
.check-list { list-style: none; }
.check-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--texto-2); }
.check-list li + li { margin-top: 10px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.bg-tinta .check-list li::before, .bg-noite .check-list li::before { background-color: var(--teal-medio); }

/* Passos numerados (01, 02, 03): número em serifa e fio no topo */
.steps { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--linha-forte); }
.step__num { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--teal); letter-spacing: .04em; }
.bg-tinta .step__num, .bg-noite .step__num { color: var(--teal-claro); }
.bg-teal .step__num { color: var(--dourado-claro); }
.step__title { margin-top: 10px; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.step__text { margin-top: 10px; font-size: 15px; color: var(--texto-2); text-wrap: pretty; }

/* =========================================================================
   Acordeão (FAQ) — o comportamento vem de institucional.js:
   [data-accordion] no contêiner (="multi" deixa abrir vários),
   [data-acc-btn] no botão, .faq__item.is-open no item aberto.
   ========================================================================= */
.faq { border-top: 1px solid var(--linha-forte); }
.faq__item { border-bottom: 1px solid var(--linha-forte); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.35;
}
.faq__icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha-forte); transition: background .25s, border-color .25s, color .25s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--curva); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q:hover .faq__icon { border-color: var(--teal); }
.faq__item.is-open .faq__icon { background: var(--teal); border-color: var(--teal); color: var(--branco); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--curva); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
/* Fechada, a resposta sai também do leitor de tela e do Tab (um link dentro
   dela não recebe foco). visibility anima junto com a altura: ao abrir fica
   visível na hora; ao fechar, só some quando a altura chega a 0. */
.faq__a-inner { overflow: hidden; visibility: hidden; transition: visibility .4s var(--curva); }
.faq__item.is-open .faq__a-inner { visibility: visible; }
/* sem JS ninguém abre o acordeão: as respostas ficam abertas */
html:not(.js) .faq__a { grid-template-rows: 1fr; }
html:not(.js) .faq__a-inner { visibility: visible; }
html:not(.js) .faq__icon { display: none; }
.faq__a-body { padding: 0 64px 26px 0; color: var(--texto-2); }
.faq__a-body > * + * { margin-top: 10px; }
.faq__a-body strong { color: var(--texto); font-weight: 600; }
.faq__a-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.bg-tinta .faq, .bg-tinta .faq__item, .bg-noite .faq, .bg-noite .faq__item { border-color: var(--linha-clara); }
.bg-tinta .faq__a-body strong, .bg-noite .faq__a-body strong { color: var(--creme); }

/* =========================================================================
   Faixa cheia de CTA
   ========================================================================= */
.cta-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  min-height: 68px; padding: 14px var(--respiro);
  background: var(--teal); color: var(--branco);
  font-size: 16px; font-weight: 600; letter-spacing: .01em; text-align: center;
  transition: background .25s;
}
.cta-bar svg { width: 22px; height: 22px; flex: none; }
.cta-bar:hover { background: var(--teal-profundo); }
.cta-bar .arrow-line { width: 40px; transition: width .3s var(--curva); }
.cta-bar:hover .arrow-line { width: 64px; }

/* =========================================================================
   Canais de contato (cartões de linha fina, em fundo escuro ou claro)
   ========================================================================= */
.canais { display: grid; gap: 12px; }
.canal {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--raio); border: 1px solid var(--linha); background: rgba(255, 255, 255, .03);
  transition: border-color .2s, background .2s;
}
a.canal:hover { border-color: var(--teal); }
.bg-tinta a.canal:hover, .bg-noite a.canal:hover { border-color: var(--teal-claro); }
.canal svg { width: 22px; height: 22px; color: var(--teal); flex: none; }
.bg-tinta .canal svg, .bg-noite .canal svg { color: var(--teal-claro); }
.canal > span { display: block; min-width: 0; }
.canal__rotulo { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.canal strong { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

/* =========================================================================
   Formulários — a linguagem do formulário de contato da Upwage: rótulo
   pequeno em negrito, campo branco de raio 10 com borda fina, foco com anel
   teal. Os controles herdam a fonte (sem isso, input/select/textarea caem
   na fonte do sistema).
     .campos          grade de 2 colunas (1 no celular); .campo--cheio ocupa a linha
     .campo           <label> (ou .campo__rotulo) + controle + ajuda/erro, empilhados
     .controle        input/select/textarea solto, fora de um .campo
     .campo__ajuda / .campo__erro   texto pequeno embaixo do controle
     .campo-check     caixa de seleção com o texto ao lado
     .cartao-form     cartão claro em volta do formulário (fio teal no topo)
     .form-acoes      linha dos botões no fim
     .aviso (--ok / --erro)   mensagem de resultado
   Campo inválido: aria-invalid="true" no controle (ou a classe .is-invalido).
   ========================================================================= */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.campo--cheio { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo > label, .campo__rotulo { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.campo__obrigatorio { color: var(--teal); }
/* :where() deixa esta regra com o peso de uma classe só, para o select e o
   textarea logo abaixo (e o CSS da página) poderem ajustar por cima */
.campo :where(input:not([type="checkbox"], [type="radio"]), select, textarea), .controle {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: var(--raio-sm);
  background-color: var(--branco); border: 1px solid var(--linha-forte); color: var(--texto);
  font-family: inherit; font-size: 15px; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea, textarea.controle { min-height: 110px; resize: vertical; }
.campo select, select.controle {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
.campo :is(input, select, textarea)::placeholder, .controle::placeholder { color: var(--texto-3); opacity: 1; }
.campo :is(input, select, textarea):focus, .controle:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 101, 78, .16);
}
.campo :is(input, select, textarea):disabled, .controle:disabled { background-color: var(--creme); color: var(--texto-3); cursor: not-allowed; }
.campo [aria-invalid="true"], .campo .is-invalido, .controle[aria-invalid="true"] { border-color: var(--erro); }
.campo [aria-invalid="true"]:focus, .campo .is-invalido:focus { box-shadow: 0 0 0 4px rgba(163, 57, 43, .14); }
.campo__ajuda { font-size: 13px; line-height: 1.5; color: var(--texto-3); }
.campo__erro { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--erro); }
.campo-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--texto-2); cursor: pointer; }
.campo-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--teal); flex: none; }
.campo-check a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.cartao-form {
  padding: clamp(24px, 3.4vw, 44px); border-radius: var(--raio-lg);
  background: var(--creme-claro); color: var(--texto); box-shadow: var(--sombra);
  border: 1px solid var(--linha); border-top: 6px solid var(--teal);
  /* claro também dentro de uma seção escura: volta aos tons do fundo claro */
  --texto-2: #4E5866; --texto-3: #6B6962; --linha: rgba(14, 31, 51, .12); --linha-forte: rgba(14, 31, 51, .22);
}
/* o que vem depois da grade de campos (caixa de seleção, aviso) ganha respiro */
.cartao-form > * + * { margin-top: 18px; }
.form-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.aviso { padding: 12px 16px; border-radius: var(--raio-sm); font-size: 14px; line-height: 1.55; background: rgba(14, 31, 51, .06); color: var(--texto); }
.aviso--ok { background: rgba(0, 101, 78, .1); color: var(--teal-profundo); }
.aviso--erro { background: rgba(163, 57, 43, .1); color: #8A3A2E; }

/* =========================================================================
   Modal (base dos diálogos escritos no HTML, ex.: filtros da loja)
     <div class="modal" id="…">                                 ← fundo escuro
       <div class="modal__caixa" role="dialog" aria-modal="true" aria-labelledby="…">
         <button class="modal__fechar" type="button" aria-label="Fechar">svg</button>
         <h2 class="modal__titulo">…</h2>
         <div class="modal__corpo">…</div>
         <div class="modal__acoes">.btn …</div>
       </div>
     </div>
   Fechado por padrão (display: none, o que já o tira do leitor de tela).
   Abre de dois jeitos:
     - com .is-open no .modal, posto pelo JS da página. Se o HTML traz
       aria-hidden="true" no .modal, o mesmo JS troca para "false" ao abrir
       (o cad-new-schedule.js faz as duas coisas no #scheduleModal);
     - sem JS, quando o .modal é o alvo do endereço (#id). Neste caso o
       .modal NÃO pode ter aria-hidden: ninguém o tiraria, e o diálogo aberto
       ficaria invisível para o leitor de tela.
   ========================================================================= */
@keyframes inst-modal-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes inst-modal-caixa { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(14, 31, 51, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal.is-open, .modal:target { display: flex; animation: inst-modal-fundo .2s ease both; }
.modal__caixa {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 3.2vw, 36px); border-radius: var(--raio-lg);
  background: var(--creme-claro); color: var(--texto);
  border: 1px solid var(--linha); box-shadow: var(--sombra-forte);
  --texto-2: #4E5866; --texto-3: #6B6962; --linha: rgba(14, 31, 51, .12); --linha-forte: rgba(14, 31, 51, .22);
}
.modal.is-open .modal__caixa, .modal:target .modal__caixa { animation: inst-modal-caixa .3s var(--curva) both; }
.modal__fechar {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--texto); cursor: pointer;
  font: inherit; font-size: 22px; line-height: 1;
  transition: background-color .2s, border-color .2s, color .2s;
}
.modal__fechar:hover { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.modal__fechar svg { width: 18px; height: 18px; }
.modal__titulo { padding-right: 48px; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.modal__titulo + * { margin-top: 12px; }
.modal__corpo { font-size: 15px; line-height: 1.65; color: var(--texto-2); }
.modal__corpo > * + * { margin-top: 16px; }
.modal__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }

/* =========================================================================
   Diálogos (ShowAlert / ShowConfirm / ShowPrompt) e toast de src/shared/utils.js
   O utils.js injeta o PRÓPRIO <style> no fim do <head> quando roda — depois
   desta folha —, então cada seletor aqui leva "body" na frente para ganhar
   na especificidade (o painel-asaas.css faz o mesmo com [data-painel]).
   Vale só nas páginas que carregam esta folha. Sem isto, os diálogos saem
   na fonte do sistema e
   nos cinzas-azulados do visual antigo.
   ========================================================================= */
body .cincare-modal-overlay {
  background: rgba(14, 31, 51, .55); font-family: var(--sans);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body .cincare-modal-box {
  max-width: 480px; padding: 32px 28px 26px; text-align: left;
  background: var(--creme-claro); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-forte);
}
body .cincare-modal-icon { width: 48px; height: 48px; margin: 0 0 18px; border: 0; }
body .cincare-modal-icon i, body .cincare-modal-icon svg { width: 22px; height: 22px; stroke-width: 2; }
body .cincare-modal-icon.is-info,
body .cincare-modal-icon.is-success { background: rgba(0, 101, 78, .1); color: var(--teal); }
body .cincare-modal-icon.is-warning { background: rgba(217, 163, 33, .18); color: var(--dourado-texto); }
body .cincare-modal-icon.is-danger { background: rgba(163, 57, 43, .1); color: var(--erro); }
body .cincare-modal-title { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--texto); text-wrap: balance; }
body .cincare-modal-text { margin: 0 0 26px; font-size: 15px; line-height: 1.65; color: var(--texto-2); }
body .cincare-modal-text strong { color: var(--texto); font-weight: 600; }
body .cincare-modal-actions { justify-content: flex-end; gap: 12px; }
body .cincare-modal-btn {
  min-width: 0; min-height: 48px; padding: 0 24px; border-radius: 999px; border-width: 1.5px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  transition: background-color .25s var(--curva), border-color .25s var(--curva), color .25s var(--curva);
}
body .cincare-modal-btn:active { transform: none; }
body .cincare-modal-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
body .cincare-modal-btn.is-secondary { background: transparent; border-color: var(--tinta); color: var(--tinta); }
body .cincare-modal-btn.is-secondary:hover { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
body .cincare-modal-btn.is-primary { background: var(--teal); border-color: var(--teal); color: var(--branco); }
body .cincare-modal-btn.is-primary:hover { background: var(--teal-profundo); border-color: var(--teal-profundo); }
body .cincare-modal-btn.is-danger { background: var(--erro); border-color: var(--erro); color: var(--branco); }
body .cincare-modal-btn.is-danger:hover { background: #842E22; border-color: #842E22; }
body .cincare-modal-input {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font-size: 15px;
}
body .cincare-modal-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 101, 78, .16); }
body .cincare-modal-input.is-invalid { border-color: var(--erro); box-shadow: 0 0 0 4px rgba(163, 57, 43, .14); }
body .cincare-modal-hint { font-size: 13px; color: var(--texto-3); }
body .cincare-modal-error { font-size: 13px; font-weight: 500; color: var(--erro); }

/* toast: cartão escuro (tinta) com o ícone num círculo da cor do tipo */
body #cincare-toast-container { bottom: 24px; right: 24px; gap: 10px; }
body .cincare-toast {
  min-width: 260px; max-width: 380px; padding: 12px 18px 12px 12px; border-radius: var(--raio);
  align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--creme-claro); box-shadow: var(--sombra);
}
body .cincare-toast.toast-success, body .cincare-toast.toast-error,
body .cincare-toast.toast-info, body .cincare-toast.toast-warning { background: var(--tinta); }
body .cincare-toast-icon { width: 28px; height: 28px; margin-top: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
body .cincare-toast-icon svg { width: 16px; height: 16px; stroke-width: 2.4; }
body .toast-success .cincare-toast-icon { background: var(--teal-medio); color: var(--branco); }
body .toast-error .cincare-toast-icon { background: #C4513F; color: var(--branco); }
body .toast-warning .cincare-toast-icon { background: var(--dourado); color: var(--tinta); }
body .toast-info .cincare-toast-icon { background: rgba(247, 245, 238, .16); color: var(--creme-claro); }

/* =========================================================================
   Rodapé escuro (tinta)
   O bloco de identificação do fornecedor (Decreto 7.962/2013, art. 2º, I:
   nome empresarial, CNPJ e endereço) tem estilo próprio aqui porque vale
   para toda página onde há venda — home e loja de voucher.
   ========================================================================= */
.site-footer {
  position: relative; background: var(--tinta); color: rgba(240, 238, 230, .78);
  padding-top: clamp(56px, 7vw, 88px);
  --texto-2: rgba(240, 238, 230, .78); --linha: var(--linha-clara);
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
.site-footer__brand p { margin-top: 18px; max-width: 320px; font-size: 14px; }
.site-footer__title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--creme); margin-bottom: 16px; }
.site-footer__links { display: grid; gap: 10px; font-size: 14px; list-style: none; }
.site-footer__links a { transition: color .2s; }
.site-footer__links a:hover { color: var(--branco); }
.site-footer__links a[aria-current="page"] { color: var(--creme); }
.site-footer__contato a, .site-footer__contato span { display: flex; align-items: center; gap: 10px; }
.site-footer__contato svg { width: 18px; height: 18px; color: var(--teal-claro); flex: none; }
.site-footer__fornecedor {
  margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--linha-clara);
  font-size: 13px; line-height: 1.75; color: rgba(240, 238, 230, .66);
}
.site-footer__fornecedor strong { color: var(--creme); font-weight: 600; }
.site-footer__fornecedor a { color: rgba(240, 238, 230, .86); text-decoration: underline; text-decoration-color: rgba(240, 238, 230, .3); text-underline-offset: 3px; }
.site-footer__fornecedor a:hover { color: var(--branco); }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap;
  margin-top: 22px; padding: 18px 0 30px; border-top: 1px solid var(--linha-clara);
  font-size: 13px; color: rgba(240, 238, 230, .56);
}
.site-footer__acessos { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__acessos a { color: rgba(240, 238, 230, .66); transition: color .2s; }
.site-footer__acessos a:hover { color: var(--branco); }
/* fio de baixo: teal com a ponta dourada */
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal) 0 82%, var(--dourado) 82% 100%);
}

/* =========================================================================
   Revelar ao rolar (só com JS ativo; sem JS tudo aparece)
   O movimento é feito com `translate`/`scale` (propriedades próprias), e não
   com `transform`: assim o `transform` do hover dos componentes (.card--hover,
   .recurso, .btn) não briga com o do revelar. E como este seletor (0,2,0)
   vence o `transition` dos componentes (0,1,0), o estado revelado REDECLARA
   a transição completa: o revelar continua com 0,8s e o atraso escalonado
   (que só valem para opacity/translate/scale e não voltam a disparar), e o
   hover anima transform, sombra, borda, fundo e cor em 0,3s, sem atraso.
   ========================================================================= */
.js [data-reveal] {
  opacity: 0; translate: 0 26px;
  transition: opacity .8s var(--curva) var(--delay, 0s), translate .8s var(--curva) var(--delay, 0s), scale .8s var(--curva) var(--delay, 0s);
}
.js [data-reveal="fade"] { translate: none; }
.js [data-reveal="left"] { translate: -30px 0; }
.js [data-reveal="right"] { translate: 30px 0; }
.js [data-reveal="zoom"] { translate: none; scale: .94; }
.js [data-reveal].is-visible {
  opacity: 1; translate: none; scale: none;
  transition: opacity .8s var(--curva) var(--delay, 0s), translate .8s var(--curva) var(--delay, 0s), scale .8s var(--curva) var(--delay, 0s),
    transform .3s var(--curva), box-shadow .3s var(--curva), border-color .3s var(--curva),
    background-color .3s var(--curva), color .2s, gap .2s;
}

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 1080px) {
  /* o menu do topo vira hambúrguer; o login fica (o JS da página controla o display dele) */
  .nav, .site-header__clube { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (min-width: 1081px) {
  .mobile-menu { display: none; }
}
/* Logo + 5 links + Clube + chip da conta logada (nome longo, até 250px) não
   cabiam entre 1081 e ~1200px: o chip saía cortado na borda. Nessa faixa o
   chip fica menor (o nome ganha "…") e os vãos do menu apertam um pouco. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .site-header__inner { gap: 18px; }
  .nav { gap: 18px; }
  .site-header__conta { max-width: 180px; }
}

@media (max-width: 1024px) {
  :root { --altura-header: 68px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* os passos ficam com as colunas que a página pediu (3 por padrão) até
     761px e passam direto para 1 coluna: em 2 colunas o 03 sobrava sozinho */
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .split--reverse .split__title { order: 0; text-align: left; }
  .split--reverse .split__line { order: 1; transform-origin: left; }
  .split--reverse .split__line::after { left: auto; right: -4px; }
  .split--reverse .split__body { order: 2; }
  .split__line { width: 72px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .steps { --cols: 1 !important; }
  /* rodapé no celular: marca e contato em linha cheia, as duas listas de links lado a lado */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .site-footer__brand, .site-footer__grid > :last-child { grid-column: 1 / -1; }
  .faq__a-body { padding-right: 0; }
  .btn-row .btn { flex: 1 1 auto; }
  .marca { --marca-h: 34px; }
  .site-header__acoes { gap: 10px; }
  .site-header__conta { max-width: 168px; padding-right: 12px; }
  .site-header__conta-texto small { display: none; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: 12px; }
  .modal__acoes { flex-direction: column-reverse; }
  .modal__acoes .btn { width: 100%; }
}

/* "Voltar" do header (.btn--icone-celular) só com o ícone onde o header aperta:
   - até 760px, para caber logo + Login + Voltar + hambúrguer em 360px;
   - de 1081 a 1240px, onde o menu completo volta: logo + 5 links + Clube +
     "Voltar" com texto + Login somam ~1037px e a faixa útil em 1081px é
     1001px (medido no molde: o Login saía 38px da margem e encostava na
     borda). Só com o ícone o "Voltar" cai de ~110 para 40px e cabe com
     folga até com a barra de rolagem do Windows (17px). Acima de 1240px os
     vãos voltam a crescer e o texto cabe.
   O texto continua no HTML, escondido como o .sr-only (o leitor de tela lê "Voltar"). */
@media (max-width: 760px), (min-width: 1081px) and (max-width: 1240px) {
  .btn--icone-celular { width: 48px; padding: 0; gap: 0; flex: none; }
  .btn--icone-celular.btn--sm { width: 40px; }
  .btn--icone-celular svg { width: 20px; height: 20px; }
  .btn--icone-celular > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

@media (max-width: 480px) {
  /* o utils.js tem a própria regra de celular; esta só refaz o que a pele mudou */
  body .cincare-modal-box { padding: 26px 20px 20px; border-radius: 20px; }
  body #cincare-toast-container { left: 16px; right: 16px; bottom: 16px; }
  body .cincare-toast { max-width: 100%; min-width: 0; }
}

@media (max-width: 380px) {
  .marca { --marca-h: 30px; }
  .site-header .btn--sm { padding-inline: 14px; }
  .site-header .btn--icone-celular { padding-inline: 0; }
  /* 360px com usuário logado: logo + chip + hambúrguer invadiam 10px da margem */
  .site-header__inner { gap: 16px; }
  .site-header__conta { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; translate: none; scale: none; }
  .caret { animation: none; }
}

/* =========================================================================
   Impressão (Termos e Privacidade são impressos e salvos em PDF)
   Tudo visível (revelar, respostas do acordeão), header que não flutua por
   cima do texto, sem fundos escuros nem degradês (o navegador nem imprime
   fundo por padrão, e o texto creme sumiria no papel branco).
   Quase tudo aqui vence pela ORDEM (mesma especificidade das regras de
   tela e vem depois delas). !important só em duas regras, de propósito:
     1. animation: none no seletor universal (peso zero): é o único jeito de
        parar de uma vez as animações declaradas por classe aqui e no CSS da
        página. O Chrome imprime a animação no ponto em que ela está (testado
        com printToPDF: um "acender" de opacity 0→1 saiu quase apagado no
        papel). Transição não precisa: ao imprimir ela não roda, o papel já
        sai com o valor final;
     2. fundo, cor e sombra das seções e cartões: têm de vencer as
        combinações com mais peso (.bg-claro .card, .bg-noite .card) e o
        CSS da página, que é carregado DEPOIS desta folha (ex.: .compromisso,
        em home.css).
   ========================================================================= */
@media print {
  :root { --texto-2: #333; --texto-3: #555; --linha: #ccc; --linha-forte: #999; }
  html { scroll-padding-top: 0; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.55; }
  *, *::before, *::after { animation: none !important; }
  /* o revelar: tudo no lugar, inclusive o que ainda não passou na janela */
  .js [data-reveal] { opacity: 1; translate: none; scale: none; }
  .js .split[data-reveal] .split__line { transform: none; }

  .site-header, .site-header.is-sobre-intro {
    position: static; height: auto; padding: 0 0 12px; margin-bottom: 16px;
    background: none; color: #000; box-shadow: none; border-bottom: 1px solid #ccc;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .site-header.is-sobre-intro .marca__nome { background: linear-gradient(90deg, var(--marinho) 0 42%, var(--teal) 42% 100%); }
  .marca__simbolo, .marca__nome { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* peças só de tela; o modal aberto (.is-open, :target) também some */
  .nav, .site-header__acoes, .mobile-menu, .skip-link, .voltar, .cta-bar, .caret, .rings,
  .modal, .modal.is-open, .modal:target { display: none; }

  .bg-creme, .bg-claro, .bg-branco, .bg-tinta, .bg-noite, .bg-teal, .card, .compromisso, .cartao-form {
    background: none !important; color: #000 !important; box-shadow: none !important;
    --texto-2: #333; --texto-3: #555; --linha: #ccc; --linha-forte: #999; --cor-eyebrow: #000;
  }
  /* botões cheios: sem o fundo (o navegador não imprime), o texto branco sumiria */
  .btn { background: none; color: #000; border-color: #999; box-shadow: none; }
  /* o traço do eyebrow é um fundo: não sai no papel e deixava só o recuo */
  .eyebrow::before { display: none; }
  .section, .topo-pagina { padding-block: 16px; }
  .display, .prosa h2, .prosa h3 { color: #000; break-after: avoid; }
  .prosa p, .prosa li { orphans: 3; widows: 3; }
  .prosa a { color: #000; }
  .documento-quadro, .prosa .rodape-fornecedor, .documento-versao { background: none; border-color: #999; }

  .faq__a { grid-template-rows: 1fr; }
  .faq__a-inner { visibility: visible; }
  .faq__icon { display: none; }

  .site-footer { background: none; color: #333; padding-top: 16px; border-top: 1px solid #ccc; --texto-2: #333; }
  .site-footer::after { display: none; }
  .site-footer__grid, .site-footer__acessos { display: none; }
  .site-footer__fornecedor { margin-top: 0; border-top: 0; color: #333; }
  .site-footer__fornecedor strong, .site-footer__fornecedor a { color: #000; }
  .site-footer__bottom { color: #555; border-top-color: #ccc; }
}