/* ============================================================
   COMPONENTES.CSS — todos os componentes do site
   ------------------------------------------------------------
   REGRA DE TOKEN: nenhum valor literal de cor, familia, tamanho
   de fonte, peso, entrelinha, espacamento, raio, sombra ou
   largura de traco. Tudo consome variavel CSS.
   ============================================================ */

/* ---------- PULAR PARA O CONTEUDO ---------- */

.pular-para-conteudo {
  position: absolute;
  left: var(--esp-2);
  top: var(--esp-2);
  z-index: 50;
  transform: translateY(-200%);
  background-color: var(--cor-acao);
  color: var(--cor-texto-sobre-acao);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-p);
  text-decoration: none;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-p);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

/* ---------- CABECALHO ---------- */

/* Preso ao topo: a navegacao (e o caminho de volta) fica sempre
   ao alcance. Encolhe apos a primeira rolagem — ver js/movimento.js. */
.cabecalho {
  position: sticky;
  top: var(--esp-0);
  z-index: 20;
  background-color: var(--cor-cabecalho-fundo);
  -webkit-backdrop-filter: blur(var(--desfoque-cabecalho));
  backdrop-filter: blur(var(--desfoque-cabecalho));
  border-bottom: var(--borda-fina) solid var(--cor-borda);
  padding-block: var(--esp-4);
  transition: padding-block var(--mov-dur-media) var(--mov-curva),
              background-color var(--mov-dur-media) var(--mov-curva),
              box-shadow var(--mov-dur-media) var(--mov-curva);
}

.cabecalho--encolhido {
  padding-block: var(--esp-2);
  background-color: var(--cor-cabecalho-fundo-encolhido);
  box-shadow: var(--sombra-cabecalho);
}

.cabecalho__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-6);
}

.cabecalho__marca {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--ll-titulo);
  text-transform: var(--transformar-marca);
  color: var(--cor-texto);
  text-decoration: none;
  line-height: var(--el-titulo);
}

.cabecalho__marca {
  transition: color var(--mov-dur-rapida) var(--mov-curva);
}

.cabecalho__marca:hover {
  color: var(--cor-acao);
}

.cabecalho__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
}

.cabecalho__link {
  position: relative;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-texto-secundario);
  text-decoration: none;
  padding-block: var(--esp-1);
  transition: color var(--mov-dur-rapida) var(--mov-curva);
}

/* O filete cresce da esquerda em vez de piscar: e o mesmo traco
   do resto do site, so que animado. */
.cabecalho__link::after {
  content: "";
  position: absolute;
  left: var(--esp-0);
  right: var(--esp-0);
  bottom: var(--esp-0);
  height: var(--borda-grossa);
  background-color: var(--cor-acao);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mov-dur-media) var(--mov-curva);
}

.cabecalho__link:hover {
  color: var(--cor-texto);
}

.cabecalho__link:hover::after,
.cabecalho__link:focus-visible::after {
  transform: scaleX(1);
}

/* "page": a propria pagina do grupo. "true": uma subpagina dele
   (RESTAURA marca Cursos), com o mesmo filete. */
.cabecalho__link[aria-current] {
  color: var(--cor-texto);
}

.cabecalho__link[aria-current]::after {
  transform: scaleX(1);
}

/* ---------- SUBMENU DO CABECALHO ---------- */
/* Cursos, Atendimentos e Produtos abrem um painel com as subpaginas
   ao passar o mouse ou ao chegar pelo teclado (Tab). So onde existe
   "passar o mouse": no celular e no tablet o menu fica como antes, e
   tocar no grupo leva a pagina dele, que lista as mesmas subpaginas.
   Sem JS. */

/* Flex como a propria nav: o link dentro do item vira bloco e fica
   na mesma linha de base de "Inicio" e "Quem sou". */
.cabecalho__item {
  position: relative;
  display: flex;
}

.cabecalho__sub {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  /* Seta discreta a direita do item: avisa que ha mais. O item ganha
     o espaco dela, para o vao ate o proximo continuar o mesmo. */
  .cabecalho__item {
    padding-right: var(--esp-4);
  }

  .cabecalho__item::after {
    content: "";
    position: absolute;
    top: var(--esp-0);
    bottom: var(--esp-0);
    right: var(--esp-1);
    width: var(--esp-1);
    height: var(--esp-1);
    margin-block: auto;
    border-right: var(--borda-media) solid var(--cor-texto-secundario);
    border-bottom: var(--borda-media) solid var(--cor-texto-secundario);
    transform: translateY(calc(var(--esp-1) * -0.5)) rotate(45deg);
    transition: transform var(--mov-dur-rapida) var(--mov-curva);
    pointer-events: none;
  }

  .cabecalho__item:hover::after,
  .cabecalho__item:focus-within::after {
    transform: translateY(calc(var(--esp-1) * 0.5)) rotate(225deg);
  }

  .cabecalho__sub {
    position: absolute;
    top: calc(100% + var(--esp-3));
    left: calc(var(--esp-4) * -1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: var(--largura-submenu);
    padding: var(--esp-2);
    background-color: var(--cor-superficie);
    border: var(--borda-fina) solid var(--cor-borda);
    border-radius: var(--raio-m);
    box-shadow: var(--sombra-flutuante);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--mov-deslocamento-p) * -2));
    transition: opacity var(--mov-dur-rapida) var(--mov-curva),
                transform var(--mov-dur-rapida) var(--mov-curva),
                visibility 0s linear var(--mov-dur-rapida);
  }

  /* Ponte invisivel sobre o vao entre o item e o painel: o mouse
     atravessa sem o painel fechar. */
  .cabecalho__sub::before {
    content: "";
    position: absolute;
    top: calc(var(--esp-4) * -1);
    left: var(--esp-0);
    right: var(--esp-0);
    height: var(--esp-4);
  }

  .cabecalho__item:hover > .cabecalho__sub,
  .cabecalho__item:focus-within > .cabecalho__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}

.cabecalho__sublink {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-p);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-p);
  line-height: var(--el-titulo);
  color: var(--cor-texto);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--mov-dur-rapida) var(--mov-curva),
              color var(--mov-dur-rapida) var(--mov-curva);
}

.cabecalho__sublink:hover,
.cabecalho__sublink:focus-visible {
  background-color: var(--cor-superficie-alt);
  color: var(--cor-acao);
}

.cabecalho__sublink[aria-current="page"] {
  color: var(--cor-acao);
  font-weight: var(--peso-forte);
}

/* ---------- IDIOMA ---------- */
/* Bandeira e sigla no fim do menu (11/10/2026): levam a mesma pagina
   no outro idioma. As paginas em ingles ficam em en/, com os mesmos
   nomes de arquivo. A bandeira e enfeite (alt vazio): quem diz o que
   o link faz e a sigla, o title e o aria-label. */
.cabecalho__idioma {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding-left: var(--esp-5);
  border-left: var(--borda-fina) solid var(--cor-borda);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  color: var(--cor-texto-secundario);
  text-decoration: none;
  transition: color var(--mov-dur-rapida) var(--mov-curva);
}

.cabecalho__idioma:hover,
.cabecalho__idioma:focus-visible {
  color: var(--cor-texto);
}

.cabecalho__idioma img {
  display: block;
  border-radius: var(--raio-p);
  outline: var(--borda-fina) solid var(--cor-borda);
}

/* ---------- REGIAO ---------- */
/* Seletor ao lado da bandeira (11/10/2026): Brasil, EUA ou Europa.
   Muda a moeda dos precos e dos botoes de compra; ver js/regiao.js e
   "REGIAO E MOEDA", mais abaixo. Sem JS ele nao funciona, entao nao
   aparece. A seta e a do submenu, desenhada com bordas. */
.cabecalho__regiao {
  position: relative;
  display: inline-flex;
  align-items: center;
}

html:not([data-regiao]) .cabecalho__regiao {
  display: none;
}

.cabecalho__regiao::after {
  content: "";
  position: absolute;
  top: var(--esp-0);
  bottom: var(--esp-0);
  right: var(--esp-1);
  width: var(--esp-1);
  height: var(--esp-1);
  margin-block: auto;
  border-right: var(--borda-media) solid var(--cor-texto-secundario);
  border-bottom: var(--borda-media) solid var(--cor-texto-secundario);
  transform: translateY(calc(var(--esp-1) * -0.5)) rotate(45deg);
  pointer-events: none;
}

.cabecalho__regiao-campo {
  -webkit-appearance: none;
  appearance: none;
  margin: var(--esp-0);
  padding: var(--esp-1) var(--esp-4) var(--esp-1) var(--esp-0);
  border: none;
  border-radius: var(--raio-p);
  background-color: transparent;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  line-height: var(--el-titulo);
  color: var(--cor-texto-secundario);
  cursor: pointer;
  transition: color var(--mov-dur-rapida) var(--mov-curva);
}

.cabecalho__regiao-campo:hover,
.cabecalho__regiao-campo:focus-visible {
  color: var(--cor-texto);
}

/* A lista aberta e do sistema: fundo e letra legiveis, em caixa normal. */
.cabecalho__regiao-campo option {
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  text-transform: none;
}

/* ---------- SECAO ---------- */

.secao {
  padding-block: var(--esp-secao);
  background-color: var(--cor-fundo);
}

.secao--alt {
  background-color: var(--cor-superficie-alt);
}

/* Respiro maior: usado nas secoes da pagina de cursos, que e longa
   e precisa de intervalo maior entre um assunto e o proximo. */
.secao--ampla {
  padding-block: var(--esp-8);
}

/* Secao invertida: redefine os tokens de cor localmente.
   Todo componente interno acompanha sem markup extra. */
.secao--destaque {
  --cor-fundo: var(--cor-fundo-inverso);
  --cor-superficie: var(--cor-superficie-inversa);
  --cor-superficie-alt: var(--cor-superficie-inversa);
  --cor-texto: var(--cor-texto-inverso);
  --cor-texto-secundario: var(--cor-texto-secundario-inverso);
  --cor-borda: var(--cor-borda-inversa);
  --cor-borda-forte: var(--cor-borda-inversa);
  --cor-acao: var(--cor-acao-inversa);
  --cor-acao-hover: var(--cor-acao-inversa-hover);
  --cor-texto-sobre-acao: var(--cor-texto-sobre-acao-inversa);
  --cor-destaque: var(--cor-destaque-inversa);
  --cor-acao-secundaria: var(--cor-borda-inversa);
  --cor-acao-secundaria-texto: var(--cor-texto-inverso);
  --cor-placeholder: var(--cor-placeholder-inverso);
  --cor-placeholder-texto: var(--cor-placeholder-texto-inverso);
  /* A nota sob os botoes (.heroi__nota) tambem fecha chamadas finais,
     como a da Terapia: sem isto, sairia no verde do heroi, sobre o
     petroleo. */
  --cor-heroi-texto-secundario: var(--cor-texto-secundario-inverso);
  background-color: var(--cor-fundo-inverso);
  color: var(--cor-texto-inverso);
}

.secao__cabecalho {
  margin-bottom: var(--esp-6);
  max-width: var(--medida-texto);
}

.secao__rotulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-destaque);
  margin-bottom: var(--esp-3);
  line-height: var(--el-titulo);
}

/* Filete de latao apos o rotulo. Aqui entra o dourado cheio da
   paleta: como traco ele nao tem exigencia de contraste de texto. */
.secao__rotulo::after {
  content: "";
  flex: 1 1 var(--esp-9);
  max-width: var(--esp-10);
  height: var(--borda-fina);
  background-color: var(--marca-dourado);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mov-dur-lenta) var(--mov-curva) var(--mov-atraso-passo);
}

.esta-visivel .secao__rotulo::after,
.secao__rotulo.esta-visivel::after {
  transform: scaleX(1);
}

/* Sem JS de movimento o filete ja nasce desenhado. */
html:not([data-movimento="ativo"]) .secao__rotulo::after {
  transform: scaleX(1);
}

.secao__titulo {
  text-transform: var(--transformar-titulo);
}

/* Subtitulo dentro de um titulo (h1 ou h2): em bloco, no peso do
   texto e no dourado dos rotulos, com tamanho relativo ao titulo.
   Nasceu para o livro, cujo titulo tem subtitulo proprio. */
.subtitulo {
  display: block;
  margin-top: var(--esp-2);
  font-size: var(--fs-subtitulo);
  font-weight: var(--peso-corpo);
  color: var(--cor-destaque);
}

/* Titulo seguido de texto numa coluna de duas (Apresentacao, Livros,
   Palestras, Quem conduz): sem isto o texto cola no titulo, e o
   subtitulo do livro deixou isso visivel. */
.heroi__conteudo > .secao__titulo + .prosa {
  margin-top: var(--esp-4);
}

/* Link de saida no fim de uma secao: leva para a pagina que trata
   do assunto por inteiro. */
.secao__saida {
  margin-top: var(--esp-6);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-p);
  line-height: var(--el-corpo);
}

.secao__intro {
  margin-top: var(--esp-3);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-solta);
  color: var(--cor-texto-secundario);
  max-width: var(--medida-texto);
}

/* Fecho: a frase que encerra a secao depois de uma grade e responde
   a ela ("Se voce ja sentiu isso, o Kit Entre Elas foi criado para
   voce", em entre-elas.html). No tom de titulo, um degrau abaixo da
   abertura da prosa. */
.secao__fecho {
  margin-top: var(--esp-6);
  max-width: var(--medida-texto);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  line-height: var(--el-corpo);
  letter-spacing: var(--ll-titulo);
  color: var(--cor-texto);
}

/* ---------- HEROI ---------- */

.heroi {
  background-color: var(--cor-heroi-fundo);
  color: var(--cor-heroi-texto);
  padding-block: var(--esp-heroi);
  border-bottom: var(--borda-fina) solid var(--cor-heroi-borda);
}

/* Heroi compacto, sem botoes: so titulo e frase, para a lista logo
   abaixo aparecer mais cedo (cursos.html, 10/10/2026). */
.heroi--compacto {
  padding-block: var(--esp-heroi-compacto);
}

.heroi__interno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-7);
  align-items: center;
}

.heroi__conteudo {
  flex: 1 1 var(--largura-min-coluna);
  min-width: var(--esp-0);
}

.heroi__figura {
  flex: 1 1 var(--largura-min-figura);
  min-width: var(--esp-0);
}

.heroi__rotulo {
  display: block;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-heroi-rotulo);
  margin-bottom: var(--esp-3);
  line-height: var(--el-titulo);
}

.heroi__titulo {
  font-size: var(--fs-display);
  text-transform: var(--transformar-display);
  color: var(--cor-heroi-texto);
}

.heroi__sub {
  margin-top: var(--esp-4);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-solta);
  color: var(--cor-heroi-texto-secundario);
  max-width: var(--medida-texto);
}

.heroi__acoes {
  margin-top: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* Linha de fato sob os botoes do heroi: preco, parcelas, garantia. */
.heroi__nota {
  margin-top: var(--esp-4);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-p);
  color: var(--cor-heroi-texto-secundario);
  line-height: var(--el-corpo);
  max-width: var(--medida-texto);
}

/* ---------- BOTOES ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-botao);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-botao);
  text-transform: var(--transformar-botao);
  line-height: var(--el-titulo);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-botao);
  border: var(--borda-media) solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--mov-dur-rapida) var(--mov-curva),
              border-color var(--mov-dur-rapida) var(--mov-curva),
              color var(--mov-dur-rapida) var(--mov-curva),
              transform var(--mov-dur-rapida) var(--mov-curva),
              box-shadow var(--mov-dur-media) var(--mov-curva);
}

.botao:hover {
  transform: translateY(calc(var(--mov-deslocamento-p) * -1));
}

.botao:active {
  transform: translateY(var(--esp-0));
}

.botao--primario {
  background-color: var(--cor-acao);
  color: var(--cor-texto-sobre-acao);
  border-color: var(--cor-acao);
  box-shadow: var(--sombra-botao);
}

.botao--primario:hover {
  background-color: var(--cor-acao-hover);
  border-color: var(--cor-acao-hover);
  color: var(--cor-texto-sobre-acao);
}

.botao--secundario {
  background-color: transparent;
  color: var(--cor-acao-secundaria-texto);
  border-color: var(--cor-acao-secundaria);
}

.botao--secundario:hover {
  background-color: var(--cor-acao-secundaria-fundo-hover);
  color: var(--cor-acao-secundaria-texto);
}

.botao--largo {
  width: 100%;
}

/* ---------- CAMINHOS (pessoa / instituicao) ---------- */
/* Assimetrico de proposito: o caminho pessoa vem primeiro no fluxo
   vertical do celular; o caminho instituicao e um bloco menor e
   mais seco, endereçado por nome. */

.caminhos {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-coluna), 100%), 1fr));
  align-items: start;
}

.caminho {
  padding: var(--esp-6);
  border-radius: var(--raio-m);
  border: var(--borda-fina) solid var(--cor-borda);
  background-color: var(--cor-superficie);
}

.caminho--pessoa {
  background-color: var(--cor-caminho-pessoa-fundo);
  border-color: var(--cor-caminho-pessoa-borda);
  border-width: var(--borda-media);
}

.caminho--instituicao {
  background-color: var(--cor-caminho-instituicao-fundo);
  border-color: var(--cor-caminho-instituicao-borda);
  padding: var(--esp-5);
}

.caminho__rotulo {
  display: block;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-destaque);
  margin-bottom: var(--esp-2);
}

.caminho--instituicao .caminho__rotulo {
  color: var(--cor-texto-secundario);
}

.caminho__titulo {
  font-size: var(--fs-h3);
}

.caminho--instituicao .caminho__titulo {
  font-size: var(--fs-h4);
}

.caminho__texto {
  margin-top: var(--esp-3);
  color: var(--cor-texto-secundario);
  line-height: var(--el-solta);
}

.caminho__acao {
  margin-top: var(--esp-5);
}

/* ---------- CARTAO ---------- */

.cartao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--respiro-caixa);
  background-color: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-cartao);
  height: 100%;
  transition: transform var(--mov-dur-media) var(--mov-curva),
              box-shadow var(--mov-dur-media) var(--mov-curva),
              border-color var(--mov-dur-media) var(--mov-curva);
}

.cartao:hover {
  transform: translateY(calc(var(--mov-deslocamento-p) * -2));
  box-shadow: var(--sombra-cartao-hover);
  border-color: var(--cor-acao);
}

.cartao__titulo a {
  transition: color var(--mov-dur-rapida) var(--mov-curva);
}

.cartao__rotulo {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-destaque);
  line-height: var(--el-titulo);
}

.cartao__titulo {
  font-size: var(--fs-h4);
}

.cartao__titulo a {
  color: inherit;
  text-decoration: none;
}

.cartao__titulo a:hover {
  color: var(--cor-acao);
  text-decoration: underline;
}

.cartao__texto {
  color: var(--cor-texto-secundario);
  font-size: var(--fs-corpo);
  line-height: var(--el-solta);
}

/* Chamada: a primeira frase do cartao, que diz o que e ou para quem
   e. Vem antes do texto, no tom de um subtitulo (home, Atendimentos,
   Produtos). */
.cartao__chamada {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-corpo);
  color: var(--cor-texto);
}

/* Fecho: a pergunta e o botao. Desce para a base do cartao, para os
   botoes de uma linha ficarem na mesma altura, e abre com um filete,
   como a ficha. */
.cartao__fecho {
  margin-top: auto;
  padding-top: var(--esp-4);
  border-top: var(--borda-fina) solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}

.cartao__pergunta {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-corpo);
  line-height: var(--el-corpo);
  color: var(--cor-texto);
}

/* ---------- FIGURA E RETRATO ---------- */

.figura {
  position: relative;
  margin: var(--esp-0);
  border-radius: var(--raio-imagem);
  overflow: hidden;
  border: var(--borda-figura) solid var(--cor-borda-forte);
  background-color: var(--cor-placeholder);
}

/* Camada de tratamento fotografico controlada por token.
   Direcoes que nao tratam a foto zeram a opacidade. */
.figura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--imagem-sobreposicao-cor);
  mix-blend-mode: var(--imagem-sobreposicao-mistura);
  opacity: var(--imagem-sobreposicao-opacidade);
}

.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--imagem-filtro);
  transition: transform var(--mov-dur-lenta) var(--mov-curva-suave);
}

.figura:hover img {
  transform: scale(1.04);
}

.figura--retrato {
  aspect-ratio: var(--proporcao-retrato);
}

.figura--paisagem {
  aspect-ratio: var(--proporcao-paisagem);
}

/* Larga, 16:9, sem corte: a capa da Formacao e Maturidade Crista tem
   os icones na ponta esquerda e o titulo na direita. */
.figura--larga {
  aspect-ratio: var(--proporcao-larga);
}

.figura--quadrada {
  aspect-ratio: var(--proporcao-quadrada);
}

/* Capa de produto, na proporcao do arquivo enviado (4:5). */
.figura--capa {
  aspect-ratio: var(--proporcao-capa);
}

/* Capa de livro: 2:3 e largura contida, centralizada na coluna, para
   ler como livro e nao como cartaz. Entra sem corte. */
.figura--livro {
  aspect-ratio: var(--proporcao-livro);
  max-width: var(--largura-livro);
  margin-inline: auto;
}

/* Corte pelo alto: retrato em pe numa caixa mais baixa mantem a cabeca. */
.figura--alta img {
  object-position: var(--imagem-posicao-alta);
}

/* Corte pela esquerda: a capa da Escola de Proposito e 1176 x 1337, mais
   larga que a moldura 4:5, e o titulo chega perto da borda direita. A
   moldura come so a borda do ombro, a esquerda; o arquivo fica inteiro. */
.figura--direita img {
  object-position: var(--imagem-posicao-direita);
}

/* Faixa: foto larga que abre uma secao, antes do titulo (home,
   Produtos). No celular a altura minima segura a cena. */
.figura--faixa {
  aspect-ratio: var(--proporcao-faixa);
  min-height: var(--faixa-altura-min);
  margin-bottom: var(--esp-7);
}

.figura--faixa img {
  object-position: var(--imagem-posicao-faixa);
}

/* Retrato em preto e branco com calor minimo. Vem depois de .figura img
   de proposito: mesma especificidade, o ultimo vence. */
.figura--pb img {
  filter: var(--imagem-filtro-pb);
}

/* Bloco cinza solido no lugar da foto que ainda nao existe.
   A proporcao fica escrita dentro. */
.figura__vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--cor-placeholder);
  color: var(--cor-placeholder-texto);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  letter-spacing: var(--ll-rotulo);
  text-align: center;
  padding: var(--esp-3);
}

.figura__legenda {
  margin-top: var(--esp-2);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-p);
  color: var(--cor-texto-secundario);
  line-height: var(--el-corpo);
}

/* ---------- PROSA (texto longo) ---------- */

.prosa {
  max-width: var(--medida-texto);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-solta);
}

.prosa > * + * {
  margin-top: var(--esp-4);
}

.prosa h2 {
  margin-top: var(--esp-7);
  font-size: var(--fs-h3);
}

.prosa h3 {
  margin-top: var(--esp-6);
  font-size: var(--fs-h4);
}

.prosa ul {
  list-style: disc;
  padding-left: var(--esp-5);
}

.prosa li + li {
  margin-top: var(--esp-2);
}

.prosa__abertura {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-titulo);
  color: var(--cor-texto);
}

.prosa__assinatura {
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: var(--borda-fina) solid var(--cor-borda);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  line-height: var(--el-titulo);
  color: var(--cor-destaque);
}

/* ---------- FATOS (curiosidades) ---------- */
/* Dois pesos emocionais no mesmo componente. A direcao decide
   como diferenciar; o markup e identico. */

.fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: flex-start;
}

.fato {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-fato);
  background-color: var(--cor-fato-fundo);
  color: var(--cor-fato-texto);
  border: var(--borda-fina) solid var(--cor-fato-borda);
  font-family: var(--fonte-fato);
  font-size: var(--fs-fato);
  font-weight: var(--peso-medio);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-corpo);
}

.fato--grave {
  background-color: var(--cor-fato-grave-fundo);
  color: var(--cor-fato-grave-texto);
  border-color: var(--cor-fato-grave-borda);
  border-width: var(--borda-fato-grave);
  border-radius: var(--raio-fato-grave);
  font-family: var(--fonte-fato-grave);
  font-size: var(--fs-fato-grave);
  font-weight: var(--peso-fato-grave);
  padding: var(--esp-4) var(--esp-5);
}

/* ---------- MARCADOR DE PENDENCIA ---------- */
/* Visivel de proposito: e um buraco de conteudo, nao um estilo. */

.pendente {
  display: inline-block;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-p);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-erro);
  background-color: var(--cor-pendente-fundo);
  border: var(--borda-media) dashed var(--cor-erro);
  border-radius: var(--raio-p);
  padding: var(--esp-1) var(--esp-3);
  line-height: var(--el-titulo);
}

.pendente--bloco {
  display: block;
  margin-block: var(--esp-4);
}

/* ---------- PRODUTO ---------- */

.produto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-7);
  align-items: start;
}

.produto__corpo {
  flex: 1 1 var(--largura-min-coluna);
  min-width: var(--esp-0);
}

.produto__oferta {
  flex: 1 1 var(--largura-min-figura);
  min-width: var(--esp-0);
  padding: var(--esp-6);
  background-color: var(--cor-superficie);
  border: var(--borda-media) solid var(--cor-borda-oferta);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-oferta);
}

.produto__preco {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h2);
  font-weight: var(--peso-display);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-titulo);
  color: var(--cor-texto);
}

.produto__preco-nota {
  margin-top: var(--esp-2);
  font-size: var(--fs-p);
  color: var(--cor-texto-secundario);
  line-height: var(--el-corpo);
}

.produto__inclui {
  margin-top: var(--esp-5);
  padding-top: var(--esp-5);
  border-top: var(--borda-fina) solid var(--cor-borda);
}

.produto__inclui li {
  display: flex;
  gap: var(--esp-3);
  align-items: baseline;
  line-height: var(--el-solta);
}

.produto__inclui li + li {
  margin-top: var(--esp-3);
}

.produto__inclui li::before {
  content: "\2014";
  color: var(--cor-destaque);
  font-weight: var(--peso-forte);
}

.produto__saida {
  margin-top: var(--esp-4);
  font-size: var(--fs-p);
  color: var(--cor-texto-secundario);
  line-height: var(--el-corpo);
}

/* ---------- RODAPE ---------- */

.rodape {
  background-color: var(--cor-rodape-fundo);
  color: var(--cor-rodape-texto);
  padding-block: var(--esp-secao);
  border-top: var(--borda-fina) solid var(--cor-rodape-borda);
}

.rodape a {
  color: var(--cor-rodape-acao);
}

.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-titulo);
  color: var(--cor-rodape-texto);
  text-transform: var(--transformar-titulo);
}

.rodape__grade {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-coluna), 100%), 1fr));
  margin-top: var(--esp-6);
}

.rodape__rotulo {
  display: block;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-rodape-texto-secundario);
  margin-bottom: var(--esp-2);
}

.rodape__item + .rodape__item {
  margin-top: var(--esp-2);
}

.rodape__fim {
  margin-top: var(--esp-7);
  padding-top: var(--esp-5);
  border-top: var(--borda-fina) solid var(--cor-rodape-borda);
  font-size: var(--fs-p);
  color: var(--cor-rodape-texto-secundario);
  line-height: var(--el-corpo);
}

/* ============================================================
   ACRESCIMOS DA REVISAO — movimento, retorno, fundo educacional
   e as pecas da pagina de cursos.
   Mesma regra de token: nenhum valor literal aqui dentro.
   ============================================================ */

/* ---------- EMPILHAMENTO DA PAGINA ---------- */
/* O fundo educacional e um plano fixo atras de tudo. As tres
   regioes da pagina sobem um nivel para ficar sobre ele. */

main,
.rodape {
  position: relative;
  z-index: 1;
}

/* ---------- FUNDO EDUCACIONAL ---------- */
/* Um unico elemento, duas camadas:
     ::before  a foto (vazia ate as imagens chegarem)
     ::after   a malha de caderno desenhada em CSS, por cima
   Fixo na viewport: o conteudo desliza sobre ele, e isso ja
   produz profundidade sem nenhum calculo de parallax no scroll. */

.fundo-edu {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--cor-fundo);
}

.fundo-edu::before,
.fundo-edu::after {
  content: "";
  position: absolute;
  inset: 0;
}

.fundo-edu::before {
  background-image: var(--fundo-edu-foto);
  background-size: cover;
  background-position: var(--fundo-edu-foto-posicao);
  background-repeat: no-repeat;
  filter: var(--fundo-edu-foto-filtro);
  opacity: var(--fundo-edu-foto-opacidade);
}

.fundo-edu::after {
  background-image: var(--fundo-edu-camadas);
  animation: fundo-edu-entrada var(--mov-dur-lenta) var(--mov-curva) both;
}

@keyframes fundo-edu-entrada {
  from {
    opacity: 0;
    transform: translateY(calc(var(--fundo-edu-deriva) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(var(--esp-0));
  }
}

/* Nas paginas com fundo educacional as secoes neutras ficam
   transparentes para a malha aparecer. As faixas solidas
   (--alt e --destaque) continuam solidas: e a alternancia entre
   textura e bloco cheio que da ritmo a pagina. */

body[data-fundo="educacional"] .heroi,
body[data-fundo="educacional"] .secao:not(.secao--alt):not(.secao--destaque) {
  background-color: transparent;
}

/* ---------- MIGALHAS / VOLTAR AO INICIO ---------- */
/* Toda pagina que nao e a inicial abre com esta faixa. O alvo de
   retorno e um link de verdade, com seta, nao so a marca no topo. */

.migalhas {
  position: relative;
  z-index: 1;
  background-color: var(--cor-superficie-alt);
  border-bottom: var(--borda-fina) solid var(--cor-borda);
  padding-block: var(--esp-3);
}

.migalhas__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-migalha);
  line-height: var(--el-titulo);
}

.migalhas__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  margin-left: calc(var(--esp-3) * -1);
  border-radius: var(--raio-p);
  color: var(--cor-migalha-texto);
  font-weight: var(--peso-forte);
  text-decoration: none;
  transition: color var(--mov-dur-rapida) var(--mov-curva),
              background-color var(--mov-dur-rapida) var(--mov-curva);
}

.migalhas__voltar:hover {
  color: var(--cor-acao);
  background-color: var(--cor-superficie);
}

.migalhas__seta {
  display: inline-block;
  transition: transform var(--mov-dur-media) var(--mov-curva);
}

.migalhas__voltar:hover .migalhas__seta,
.migalhas__voltar:focus-visible .migalhas__seta {
  transform: translateX(calc(var(--mov-deslocamento-p) * -1));
}

.migalhas__separador {
  color: var(--cor-migalha-separador);
}

/* Nivel intermediario da trilha (ex.: Inicio / Cursos / RESTAURA):
   link como o de voltar, sem a seta. */
.migalhas__nivel {
  color: var(--cor-migalha-texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
  padding: var(--esp-2) var(--esp-1);
  transition: color var(--mov-dur-rapida) var(--mov-curva);
}

.migalhas__nivel:hover {
  color: var(--cor-acao);
}

.migalhas__atual {
  color: var(--cor-migalha-atual);
  font-weight: var(--peso-medio);
}

/* ---------- VOLTAR AO TOPO ---------- */
/* Aparece depois da primeira dobra. Ver js/movimento.js. */

.voltar-topo {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tamanho-topo);
  height: var(--tamanho-topo);
  background-color: var(--cor-topo-fundo);
  color: var(--cor-topo-texto);
  border: var(--borda-media) solid var(--cor-topo-fundo);
  border-radius: var(--raio-redondo);
  box-shadow: var(--sombra-flutuante);
  font-family: var(--fonte-rotulo);
  line-height: var(--el-nenhuma);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--mov-deslocamento));
  transition: opacity var(--mov-dur-media) var(--mov-curva),
              transform var(--mov-dur-media) var(--mov-curva),
              background-color var(--mov-dur-rapida) var(--mov-curva),
              visibility var(--mov-dur-media) var(--mov-curva);
}

.voltar-topo.esta-visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(var(--esp-0));
}

.voltar-topo:hover {
  background-color: var(--cor-topo-fundo-hover);
  border-color: var(--cor-topo-fundo-hover);
  color: var(--cor-topo-texto);
}

/* ---------- MOVIMENTO: ENTRADA POR ROLAGEM ---------- */
/* O estado escondido so existe quando o JS confirma que vai
   revelar (data-movimento="ativo" no <html>). Sem JS, ou com JS
   quebrado, nada fica invisivel. */

html[data-movimento="ativo"] [data-animar] {
  opacity: 0;
  transform: translateY(var(--mov-deslocamento));
  transition: opacity var(--mov-dur-lenta) var(--mov-curva) var(--atraso, 0ms),
              transform var(--mov-dur-lenta) var(--mov-curva) var(--atraso, 0ms);
  will-change: opacity, transform;
}

html[data-movimento="ativo"] [data-animar="esquerda"] {
  transform: translateX(calc(var(--mov-deslocamento-g) * -1));
}

html[data-movimento="ativo"] [data-animar="direita"] {
  transform: translateX(var(--mov-deslocamento-g));
}

html[data-movimento="ativo"] [data-animar="escala"] {
  transform: scale(0.97);
}

html[data-movimento="ativo"] [data-animar].esta-visivel {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html[data-movimento="ativo"] [data-animar] {
    opacity: 1;
    transform: none;
  }
  .fundo-edu::after {
    animation: none;
  }
}

/* ---------- PASSOS NUMERADOS ---------- */
/* A lista "o que voce recebe" da pagina de cursos: numero de
   latao, filete no topo, sem caixa. */

.passos {
  display: grid;
  gap: var(--esp-6) var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-passo), 100%), 1fr));
}

.passo {
  padding-top: var(--esp-4);
  border-top: var(--borda-filete) solid var(--cor-passo-borda);
  transition: border-color var(--mov-dur-media) var(--mov-curva);
}

.passo:hover {
  border-top-color: var(--marca-dourado);
}

.passo__numero {
  display: block;
  font-family: var(--fonte-numero);
  font-size: var(--fs-numero);
  font-weight: var(--peso-numero);
  line-height: var(--el-nenhuma);
  letter-spacing: var(--ll-titulo);
  color: var(--cor-passo-numero);
  margin-bottom: var(--esp-3);
}

.passo__titulo {
  font-size: var(--fs-h4);
}

.passo__texto {
  margin-top: var(--esp-2);
  color: var(--cor-texto-secundario);
  line-height: var(--el-solta);
}

/* ---------- BLOCOS DE TEXTO (para quem e) ---------- */

.blocos {
  display: grid;
  gap: var(--esp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-coluna), 100%), 1fr));
}

.bloco {
  padding-left: var(--esp-5);
  border-left: var(--borda-filete) solid var(--cor-borda-forte);
  transition: border-left-color var(--mov-dur-media) var(--mov-curva);
}

.bloco:hover {
  border-left-color: var(--cor-acao);
}

.bloco__titulo {
  font-size: var(--fs-h4);
}

.bloco__texto {
  margin-top: var(--esp-2);
  color: var(--cor-texto-secundario);
  line-height: var(--el-solta);
}

/* ---------- TEMAS ---------- */
/* Assuntos curtos e sem ordem entre si: "O que podemos trabalhar?",
   na Terapia. Filete no topo, como os passos, mas sem numero, porque
   tema nao e etapa. Com a coluna minima de 20rem, nove temas fecham
   em tres por tres numa tela larga. */

.temas {
  display: grid;
  gap: var(--esp-5) var(--respiro-grade);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-coluna), 100%), 1fr));
}

.tema {
  padding-top: var(--esp-3);
  border-top: var(--borda-filete) solid var(--cor-borda-forte);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-titulo);
  text-wrap: balance;
  transition: border-top-color var(--mov-dur-media) var(--mov-curva);
}

.tema:hover {
  border-top-color: var(--marca-dourado);
}

/* ---------- TOPICOS ---------- */
/* Listas curtas em cartoes (entre-elas.html): "Voce ja se sentiu
   assim?", o que cada encontro contem e para quem e ideal. Caixa
   baixa, sem titulo nem botao, com o travessao dourado da lista do
   produto (.produto__inclui). Nao e link: no hover so a borda
   esquenta, como nos temas, sem levantar como o .cartao.
   Feita para a coluna de leitura (.container--estreito): duas
   colunas no computador, uma no celular, e listas de 6 e 10 itens
   fecham sem sobra. A coluna minima e a dos passos. Na secao
   invertida, os tokens redefinidos ja escurecem a caixa. */

.topicos {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-passo), 100%), 1fr));
}

.topico {
  display: flex;
  gap: var(--esp-3);
  align-items: baseline;
  padding: var(--esp-4) var(--esp-5);
  background-color: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-m);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-corpo);
  color: var(--cor-texto);
  text-wrap: balance;
  transition: border-color var(--mov-dur-media) var(--mov-curva);
}

.topico::before {
  content: "\2014";
  color: var(--cor-destaque);
  font-weight: var(--peso-forte);
}

.topico:hover {
  border-color: var(--marca-dourado);
}

/* ---------- FAQ ---------- */
/* <details> nativo: funciona sem JS e ja e acessivel. O JS de
   movimento so segura o fechamento para a altura poder animar. */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  max-width: var(--medida-texto);
}

.faq__item {
  background-color: var(--cor-faq-fundo);
  border: var(--borda-fina) solid var(--cor-faq-borda);
  border-radius: var(--raio-m);
  transition: border-color var(--mov-dur-media) var(--mov-curva);
}

.faq__item:hover,
.faq__item[open] {
  border-color: var(--cor-acao);
}

.faq__pergunta {
  display: flex;
  align-items: baseline;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  line-height: var(--el-titulo);
  letter-spacing: var(--ll-titulo);
  color: var(--cor-texto);
}

.faq__pergunta::-webkit-details-marker {
  display: none;
}

.faq__pergunta::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--fonte-rotulo);
  font-weight: var(--peso-forte);
  color: var(--cor-faq-marcador);
  transition: transform var(--mov-dur-media) var(--mov-curva);
}

.faq__item[open] .faq__pergunta::after {
  transform: rotate(45deg);
}

.faq__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mov-dur-media) var(--mov-curva);
}

.faq__item[open] .faq__corpo {
  grid-template-rows: 1fr;
}

/* Fechamento segurado por js/movimento.js. Precisa vir DEPOIS da
   regra de [open]: as duas tem a mesma especificidade, entao quem
   esta por ultimo vence. */
.faq__item[data-fechando] .faq__corpo {
  grid-template-rows: 0fr;
}

.faq__interno {
  overflow: hidden;
  min-height: var(--esp-0);
}

.faq__texto {
  padding: var(--esp-0) var(--esp-5) var(--esp-5);
  color: var(--cor-texto-secundario);
  line-height: var(--el-solta);
  max-width: var(--medida-texto);
}

.faq__texto > * + * {
  margin-top: var(--esp-3);
}

/* ---------- DEPOIMENTOS ---------- */

.depoimentos {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--largura-min-coluna), 100%), 1fr));
}

.depoimento {
  position: relative;
  margin: var(--esp-0);
  padding: var(--esp-7) var(--esp-5) var(--esp-5);
  background-color: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-m);
  transition: transform var(--mov-dur-media) var(--mov-curva),
              box-shadow var(--mov-dur-media) var(--mov-curva);
}

.depoimento:hover {
  transform: translateY(calc(var(--mov-deslocamento-p) * -2));
  box-shadow: var(--sombra-cartao-hover);
}

.depoimento::before {
  content: "\201C";
  position: absolute;
  top: var(--esp-4);
  left: var(--esp-5);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-numero);
  font-weight: var(--peso-display);
  line-height: var(--el-nenhuma);
  color: var(--cor-depoimento-aspas);
}

.depoimento__texto {
  margin: var(--esp-0);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-solta);
  color: var(--cor-texto);
}

.depoimento__autoria {
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: var(--borda-fina) solid var(--cor-borda);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-p);
  color: var(--cor-texto-secundario);
  line-height: var(--el-corpo);
}

/* ---------- KIT ---------- */
/* Cartao de kit a venda (entre-elas.html): capa, nome, texto e, na
   base, a compra: os tres botoes de moeda (.moedas, abaixo) ou, sem
   link, o selo "Link em breve". Ate 11/10/2026 era um botao so,
   "Comprar aqui". Sem preco: ele fica na Hotmart (Gabriel, 11/10), e
   a caixa de preco (.kit__preco) saiu. A compra desce para o fim do
   cartao, para os botoes de uma linha ficarem alinhados, qualquer que
   seja o texto acima. */

/* Capa: inteira, centralizada e com largura contida. Na largura toda
   do cartao, numa tela larga, ela tomava metade da altura dele. Onde o
   cartao e mais estreito que o limite (tablet, celular), ocupa a
   largura toda. O width e preciso porque o cartao e flex: com margem
   automatica, o item nao estica sozinho. */
.kit__capa {
  width: 100%;
  max-width: var(--largura-capa-kit);
  margin-inline: auto;
}

.kit__compra {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

/* Enquanto o link da Hotmart nao chega, o selo "Link em breve" fica no
   lugar do botao (Gabriel, 11/10/2026), como o "Em breve" do INTEGRA.
   Ate essa data era um botao sem acao, com tarja vermelha em cima. Como
   item da coluna, o selo estica na largura do botao; o texto vai ao
   centro, como no botao. */
.kit__breve {
  justify-content: center;
}

/* ---------- MOEDAS ---------- */
/* Escolha da moeda do pagamento (11/10/2026). A Hotmart Brasil nao
   deixa desligar a conversao automatica, entao cada produto tem uma
   oferta por moeda, cada uma com o seu link. Tres botoes lado a lado,
   com o simbolo em cima e o nome embaixo, em qualquer largura: no
   celular, o nome curto cabe na terca parte da linha. Usado nos kits
   do Entre Elas e na inscricao do RESTAURA. */

.moedas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

/* Na inscricao do RESTAURA, o bloco vem depois do texto, com o mesmo
   espaco dos botoes de heroi. */
.produto__corpo > .moedas {
  margin-top: var(--esp-6);
}

.moedas__rotulo {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-texto-secundario);
  line-height: var(--el-titulo);
}

.moedas__opcoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-2);
}

/* Vai junto com .botao: o botao em duas linhas, com menos respiro dos
   lados, para o nome caber no celular. */
.moeda {
  flex-direction: column;
  gap: var(--esp-0);
  padding-inline: var(--esp-2);
}

.moeda__simbolo {
  font-size: var(--fs-h4);
  line-height: var(--el-titulo);
}

.moeda__nome {
  font-size: var(--fs-rotulo);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
}

/* Moeda cujo link ainda nao chegou: a mesma caixa, sem acao, nas cores
   do selo, como o "Link em breve" dos kits. */
.moeda--breve {
  background-color: var(--cor-selo-fundo);
  color: var(--cor-selo-texto);
  border-color: var(--cor-selo-borda);
  cursor: default;
}

.moeda--breve:hover {
  transform: none;
}

/* ---------- REGIAO E MOEDA ---------- */
/* js/regiao.js escreve no <html> a regiao escolhida no cabecalho
   (data-regiao="br", "us" ou "eu"), e o que for de outra moeda some:
   botoes de compra, precos e selos marcados com data-moeda="brl",
   "usd" ou "eur". Sem JS nao ha data-regiao, e as tres aparecem. */
html[data-regiao="br"] [data-moeda]:not([data-moeda="brl"]),
html[data-regiao="us"] [data-moeda]:not([data-moeda="usd"]),
html[data-regiao="eu"] [data-moeda]:not([data-moeda="eur"]) {
  display: none;
}

/* Com uma moeda so, o botao dela ocupa a linha, com simbolo e nome
   lado a lado e o respiro de um botao comum. */
html[data-regiao] .moedas__opcoes {
  grid-template-columns: 1fr;
}

html[data-regiao] .moeda {
  flex-direction: row;
  gap: var(--esp-1);
  padding-inline: var(--esp-5);
}

/* E com a letra de um botao comum, e nao o simbolo grande sobre o
   nome miudo, que so faz sentido com tres lado a lado. Vale para o
   "€ Em breve", que continua dizendo a moeda. */
html[data-regiao] .moeda__simbolo,
html[data-regiao] .moeda__nome {
  font-size: var(--fs-botao);
  letter-spacing: var(--ll-botao);
  text-transform: var(--transformar-botao);
}

/* Com uma moeda so, o botao diz "Adquirir" (Gabriel, 12/10/2026): a
   moeda ja esta no seletor do cabecalho. Simbolo, nome e o rotulo
   ("Comprar em", "Pagar em") saem; o leitor de tela ouve "Adquirir em
   real". Sem regiao, os tres botoes continuam com simbolo e nome. */
.moeda__acao {
  display: none;
}

html[data-regiao] .moeda__acao {
  display: inline;
}

html[data-regiao] .moeda:not(.moeda--breve) .moeda__simbolo,
html[data-regiao] .moeda:not(.moeda--breve) .moeda__nome,
html[data-regiao] .moedas__rotulo {
  display: none;
}

/* Na inscricao do RESTAURA, o botao fica do tamanho dele, como os
   outros botoes da pagina. Nos kits, ocupa a largura do cartao. */
html[data-regiao] .produto__corpo .moedas__opcoes {
  justify-items: start;
}

/* Sem regiao (sem JS), a caixa de investimento do RESTAURA mostra os
   tres precos, um embaixo do outro. */
html:not([data-regiao]) .produto__preco-nota + .produto__preco,
html:not([data-regiao]) .produto__preco + .produto__preco {
  margin-top: var(--esp-3);
}

/* ---------- SELOS ---------- */
/* Etiquetas curtas de fato: formato, duracao, turma. */

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* Selos logo abaixo do texto do heroi (restaura.html): sem isto,
   encostam no paragrafo, que nao tem margem embaixo. */
.heroi__sub + .selos {
  margin-top: var(--esp-5);
}

/* Selos no fim do cartao descem para a base: numa linha de cartoes,
   os valores ficam alinhados, qualquer que seja o tamanho do texto
   acima. Sem uso desde 06/10/2026, quando os cartoes de servico sairam
   da Terapia (servicos.html); fica para quando voltarem. */
.cartao > .selos:last-child {
  margin-top: auto;
}

/* Cartoes de cursos.html: o que vem depois do texto (selos e botao,
   ou so o selo "Em breve" do INTEGRA) desce para a base, e os botoes
   da linha ficam alinhados, com capa ou sem (Gabriel, 11/10/2026). */
.cartao > .cartao__texto + :is(.selos, .caminho__acao) {
  margin-top: auto;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--cor-selo-fundo);
  color: var(--cor-selo-texto);
  border: var(--borda-fina) solid var(--cor-selo-borda);
  border-radius: var(--raio-p);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  line-height: var(--el-titulo);
}

/* ---------- TRECHO DE LIVRO ---------- */
/* As primeiras paginas em texto corrido, cortadas por um veu que
   dissolve no fundo. E o convite: le-se ate onde da, e o botao
   embaixo leva ao livro inteiro. */

.trecho {
  position: relative;
  max-height: var(--trecho-altura);
  overflow: hidden;
}

.trecho::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--trecho-veu-altura);
  background-image: linear-gradient(to bottom, transparent, var(--cor-fundo));
  pointer-events: none;
}

.secao--alt .trecho::after {
  background-image: linear-gradient(to bottom, transparent, var(--cor-superficie-alt));
}

.trecho__texto {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-corpo-g);
  line-height: var(--el-solta);
  max-width: var(--medida-texto);
}

.trecho__texto > * + * {
  margin-top: var(--esp-4);
}

.trecho__acoes {
  margin-top: var(--esp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}

/* ---------- FICHA ---------- */
/* Pares de rotulo e valor, como numa ficha catalografica: formacao e
   atuacao em Quem sou, os dados do livro em Livros. Duas colunas; a do
   rotulo ocupa so o que precisa. */

.ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-5);
  padding-block: var(--esp-4);
  border-block: var(--borda-fina) solid var(--cor-borda);
  max-width: var(--medida-texto);
}

.ficha dt {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-destaque);
  line-height: var(--el-titulo);
}

.ficha dd {
  color: var(--cor-texto);
  line-height: var(--el-corpo);
}

/* Ficha depois de um paragrafo (livros.html e, desde 06/10, o fim do
   texto de quem-sou.html): mais ar antes do filete, para ler como nota
   de catalogo, e nao como mais um paragrafo. Depois de um titulo (o
   valor da sessao, na Terapia), fica no espaco normal, colada ao titulo
   que a apresenta. */
.prosa > p + .ficha {
  margin-top: var(--esp-6);
}

/* Ficha solta na coluna, fora do texto (onde comprar, livros.html):
   ocupa a coluna inteira, para o filete bater com o do fecho logo
   abaixo. Dentro de .prosa ela continua na medida do texto. */
.container > .ficha {
  max-width: none;
}

/* ---------- CHAMADA DE RETORNO NO FIM DA PAGINA ---------- */
/* Fecho padrao das paginas internas: a ultima coisa antes do
   rodape e sempre um caminho de volta ao inicio. */

.retorno {
  margin-top: var(--esp-7);
  padding-top: var(--esp-5);
  border-top: var(--borda-fina) solid var(--cor-borda);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
}

.retorno__texto {
  color: var(--cor-texto-secundario);
  font-size: var(--fs-p);
  line-height: var(--el-corpo);
}

/* ---------- FORMULARIO ---------- */
/* Contato. Funciona sem servidor (abre o e-mail com a mensagem
   montada) e vira envio nativo quando houver servico — ver
   js/formulario.js. Os campos herdam fonte e cor do reset. */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  max-width: var(--largura-estreita);
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.formulario__rotulo {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-texto-secundario);
  line-height: var(--el-titulo);
}

.formulario__entrada {
  width: 100%;
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-p);
  line-height: var(--el-corpo);
  transition: border-color var(--mov-dur-rapida) var(--mov-curva);
}

.formulario__entrada:hover {
  border-color: var(--cor-borda-forte);
}

.formulario__entrada:focus-visible {
  border-color: var(--cor-acao);
}

.formulario__entrada--area {
  min-height: var(--esp-10);
  resize: vertical;
}

.formulario__nota {
  font-size: var(--fs-p);
  color: var(--cor-texto-secundario);
  line-height: var(--el-corpo);
  max-width: var(--medida-texto);
}

.formulario__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.formulario__aviso {
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--cor-superficie-alt);
  border-left: var(--borda-filete) solid var(--cor-acao);
  color: var(--cor-texto);
  line-height: var(--el-corpo);
}

/* ---------- CONTATO: formulario + canais ---------- */

.contato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-7);
  align-items: flex-start;
}

/* O formulario tem largura maxima; a coluna dele para ali, e a dos
   canais fica com o resto. Sem isso, na largura nova (01/10/2026) a
   coluna crescia vazia e empurrava os canais para longe. */
.contato__principal {
  flex: 2 1 var(--largura-min-coluna);
  max-width: var(--largura-estreita);
  min-width: var(--esp-0);
}

.contato__lateral {
  flex: 1 1 var(--largura-min-figura);
  min-width: var(--esp-0);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.canal {
  padding: var(--respiro-caixa);
  background-color: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-m);
}

.canal__rotulo {
  display: block;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ll-rotulo);
  text-transform: var(--transformar-rotulo);
  color: var(--cor-destaque);
  line-height: var(--el-titulo);
}

.canal__valor {
  margin-top: var(--esp-2);
  line-height: var(--el-corpo);
  overflow-wrap: anywhere;
}