/* ==========================================================================
   COMPONENTES — botao, card, header, timeline, accordion, depoimentos
   ========================================================================== */

/* ---------- Botoes ----------
   Primario: fundo coral, texto indigo (6,1:1, passa AA).
   Branco sobre coral da 2,6:1 e reprova. Nao "corrigir" para branco. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 52px;
  padding: 1rem 2rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background var(--transicao), transform var(--transicao),
              border-color var(--transicao), color var(--transicao);
}

.btn-primario {
  background: var(--coral);
  color: var(--indigo-800);
}
.btn-primario:hover {
  background: var(--coral-forte);
  transform: translateY(-2px);
}
.btn-primario:active { transform: translateY(0) scale(.97); transition: transform var(--rapido); }

.btn-secundario {
  border: 1.5px solid var(--indigo-800);
  color: var(--indigo-800);
}
.btn-secundario:hover { background: var(--indigo-800); color: var(--creme); }
.btn-secundario:active { transform: scale(.97); transition: transform var(--rapido); }

/* ---------- Filete de luz na borda (CTAs) ----------
   /impeccable overdrive de 15/08/2026. Um segmento de luz dourada
   percorre o contorno do pill, 4s, sem parar, em todo botao primario e
   secundario do site. Ver design.md SS6 — inclusive a ressalva de que
   filete + glow ao mesmo tempo foi decisao tomada com o custo a vista.

   Como funciona: o conic-gradient girado por --angulo-filete pinta o
   ::before inteiro; as duas masks com mask-composite: exclude recortam
   so o anel da borda e jogam fora o miolo. Sem esse recorte o gradiente
   cobriria a face do botao e mataria o contraste de SS12.6.

   @property e obrigatorio: custom property nao registrada nao
   interpola, anima em degraus. Onde nao existir, o var() cai no
   fallback 0deg e o filete fica parado — arco fixo na borda, correto,
   so nao corre. */
@property --angulo-filete {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.btn-primario,
.btn-secundario { position: relative; }

.btn-primario::before,
.btn-secundario::before {
  content: '';
  position: absolute;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--angulo-filete, 0deg),
      transparent 0deg,
      transparent 230deg,
      var(--ouro) 292deg,
      var(--ouro-claro) 332deg,
      var(--branco-estrela) 352deg,
      var(--ouro-claro) 356deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .85;
  animation: filete-correr 4s linear infinite;
  transition: opacity var(--transicao);
  pointer-events: none;
}

/* O bloco de contencao de um absoluto e a PADDING BOX. No secundario,
   que tem borda de 1,5px, inset:0 deixaria o filete 1,5px para dentro e
   desenharia duas linhas paralelas; o -1.5px o traz de volta para cima
   da borda que ja existe. O primario nao tem borda, entao inset:0 ja
   cai na aresta certa. */
.btn-primario::before   { inset: 0; }
.btn-secundario::before { inset: -1.5px; }

@keyframes filete-correr { to { --angulo-filete: 360deg; } }

/* Hover: o filete engrossa e acende.

   A espessura muda SEM transicao de proposito. padding e propriedade de
   layout: transicionada, refaz layout a cada quadro. Aqui o custo seria
   pequeno (o ::before e absoluto com os quatro insets fixos, entao o
   reflow morre nele e nao sobe para o botao nem para o texto), mas o
   ganho tambem — 1px em 200ms. O salto instantaneo de 1px passa
   despercebido; quem carrega a suavidade do hover e a opacidade, que e
   composta na GPU e nao toca em layout.

   A velocidade nao muda no hover: trocar animation-duration mantem o
   tempo ja decorrido e o remapeia na duracao nova, e o arco pula de
   posicao. */
.btn-primario:hover::before,
.btn-secundario:hover::before { padding: 2.5px; opacity: 1; }

/* O filete e ornamento em movimento continuo: sai inteiro quando o
   sistema pede menos movimento. A regra global de base.css ja zeraria a
   duracao, mas isso pararia o gradiente num angulo qualquer e deixaria
   um arco torto na borda — melhor nao desenhar. */
@media (prefers-reduced-motion: reduce) {
  .btn-primario::before,
  .btn-secundario::before { display: none; }
}

/* ---------- Glow que respira (CTAs) ----------
   Adaptado de um componente React/Tailwind que o Bruno trouxe em
   15/08/2026. Portadas so as duas ideias que dao a identidade dele — o
   glow que respira e a seta que desliza — em CSS puro e na paleta daqui.
   O glow original ciclava vermelho/laranja/roxo/azul, fora da paleta;
   aqui cicla coral -> ouro -> lavanda. Ver design.md SS6.

   box-shadow em vez de pseudo-elemento borrado de proposito: sombra
   espalha para fora e nunca cobre o botao, entao o contraste do texto
   sobre o coral (6,1:1, decisao travada SS12.6) fica intacto. Um ::before
   com blur cairia por cima do fundo e lavaria justamente esse contraste. */
.btn-primario,
.btn-secundario {
  animation: btn-glow-respirar 7s ease-in-out infinite;
}
@keyframes btn-glow-respirar {
  0%, 100% { box-shadow: 0 0 20px 2px var(--glow-coral); }
  33%      { box-shadow: 0 0 30px 5px var(--glow-ouro); }
  66%      { box-shadow: 0 0 24px 3px var(--glow-lavanda); }
}

/* Seta em mask, nao em content: '->'. Conteudo gerado por CSS e lido em
   voz alta por parte dos leitores de tela, e a seta e decorativa — a
   mask nunca e anunciada. currentColor a mantem legivel nas duas
   variantes de botao sem regra extra. */
.btn-primario::after,
.btn-secundario::after {
  content: '';
  flex: none;
  width: .9em;
  height: .9em;
  background: currentColor;
  -webkit-mask: var(--seta-svg) center / contain no-repeat;
  mask: var(--seta-svg) center / contain no-repeat;
  transition: transform var(--transicao), filter var(--transicao);
}
/* No hover a seta desliza e acende junto com o filete: o drop-shadow
   segue o recorte da mask, entao o halo sai do contorno da seta, nao de
   um retangulo. box-shadow aqui desenharia a caixa e nao a forma. */
.btn-primario:hover::after,
.btn-secundario:hover::after {
  transform: translateX(4px);
  filter: drop-shadow(0 0 6px var(--glow-ouro));
}

.escuro .btn-secundario,
.estrelado .btn-secundario { border-color: var(--creme); color: var(--creme); }
.escuro .btn-secundario:hover,
.estrelado .btn-secundario:hover { background: var(--creme); color: var(--indigo-800); }

.apoio-btn {
  margin-top: var(--e-4);
  font-size: var(--t-peq);
  color: var(--texto-suave);
}
.escuro .apoio-btn, .estrelado .apoio-btn { color: rgba(239, 233, 242, .72); }

/* Link com seta. min-height de 44px porque e alvo de toque autonomo,
   nao um link no meio de uma frase. */
.link-seta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--e-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-thickness var(--transicao);
}
.link-seta span { transition: transform var(--transicao); }
.link-seta:hover { text-decoration-thickness: 3px; }
.link-seta:hover span { transform: translateX(4px); }
.link-seta:active span { transform: translateX(2px); transition: transform var(--rapido); }

/* ---------- Cards ---------- */

.card {
  background: var(--branco);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--sombra-card);
}
.card h3 { margin-bottom: var(--e-3); font-size: var(--t-card); line-height: var(--lh-card); }
.card p { max-width: none; }

.card-escuro {
  background: var(--indigo-700);
  border: 1px solid rgba(201, 162, 39, .15);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  color: var(--texto-claro);
}
.card-escuro h3 { color: var(--creme); margin-bottom: var(--e-3); font-size: var(--t-card); line-height: var(--lh-card); }
.card-escuro p { max-width: none; }

.card-icone { width: 32px; height: 32px; margin-bottom: var(--e-4); color: var(--ouro); }
.card-escuro .card-icone { color: var(--ouro-claro); }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--creme);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.header.rolado {
  background: rgba(252, 247, 241, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(33, 30, 68, .08);
}
.header-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--altura-header);
}

.marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  font-family: var(--fonte-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.marca span { display: block; font-family: var(--fonte-corpo); font-size: .625rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); margin-top: 4px; }

.nav-lista { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicao);
}
.nav-lista a:hover,
.nav-lista a[aria-current="page"] { border-bottom-color: var(--coral); }

.header-acoes { display: flex; align-items: center; gap: var(--e-4); }
.header-acoes .btn { min-height: 44px; padding: .75rem 1.5rem; font-size: .9375rem; }

.nav-desktop, .header-acoes .btn { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .header-acoes .btn { display: inline-flex; }
}

/* CTA compacto do header mobile. Abaixo de 1024px o botao de texto some
   e a nav vira hamburguer — sem isso a acao primaria fica invisivel
   justamente no canal mobile, que e onde a maior parte de quem chega
   pelo Instagram esta. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--indigo-800);
  transition: background var(--transicao), transform var(--transicao);
}
.btn-icone:hover { background: var(--coral-forte); }
.btn-icone:active { transform: scale(.9); transition: transform var(--rapido); }
.btn-icone svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .btn-icone { display: none; } }

/* Botao hamburguer */
.hamburguer {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  transition: background var(--transicao), transform var(--transicao);
}
.hamburguer:hover { background: rgba(33, 30, 68, .06); }
.hamburguer:active { transform: scale(.9); transition: transform var(--rapido); }
@media (min-width: 1024px) { .hamburguer { display: none; } }
.hamburguer svg { width: 24px; height: 24px; }

/* Painel mobile. Antes era um corte seco (display:none <-> flex) — como
   "display" nao anima, a entrada usa @keyframes (que tocam mesmo saindo
   de display:none) e a saida espera a classe .fechando (site.js troca
   display so depois que a animacao termina, via animationend). */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  padding: var(--e-5) var(--gutter) var(--e-8);
  background: var(--creme);
  overflow-y: auto;
}
.nav-mobile[data-aberto="true"] {
  display: flex;
  animation: nav-mobile-entrar var(--revelar);
}
.nav-mobile.fechando {
  display: flex;
  animation: nav-mobile-sair 150ms ease-in forwards;
}
@keyframes nav-mobile-entrar {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nav-mobile-sair {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px); }
}
.nav-mobile-topo { display: flex; align-items: center; justify-content: space-between; min-height: var(--altura-header); }
.nav-mobile ul { margin-top: var(--e-7); display: grid; gap: var(--e-2); }
.nav-mobile a {
  display: block;
  padding: var(--e-3) 0;
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 30, 68, .10);
}
.nav-mobile .btn { margin-top: var(--e-7); }

/* ---------- Costura do painel de instrumentos ---------- */

/* Marca a passagem da camara clara (credibilidade+diferenciais) para a
   camara indigo (tratamentos) dentro do painel. Reaproveita o vocabulario
   de ornamento ja sancionado (estrela de quatro pontas + linha fina em
   ouro) em vez de inventar forma nova — um lugar so, nao espalhado. */
.painel-costura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  padding-bottom: var(--e-6);
  color: var(--ouro-claro);
}
.painel-costura::before,
.painel-costura::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .5;
}
.painel-costura svg { flex: none; width: 14px; height: 14px; }

/* ---------- Faixa de credibilidade ---------- */

/* max-width: none anula a medida de linha que base.css aplica em todo <p>.
   Sem isso a faixa herda 36rem e quebra no meio, independente da tela. */
.credibilidade {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-3);
  padding-block: var(--e-6);
  font-size: var(--t-peq);
  color: var(--texto-suave);
}
.credibilidade span { white-space: nowrap; }
.credibilidade .sep { color: var(--ouro); }
/* Se quebrar em telas estreitas, nenhum separador sobra pendurado na ponta */
@media (max-width: 767px) {
  .credibilidade .sep { display: none; }
  .credibilidade { gap: var(--e-1) var(--e-5); }
}

/* ---------- Linha do tempo ---------- */

.timeline { display: grid; gap: 0; margin-top: var(--e-8); }
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--e-5);
  padding-bottom: var(--e-8);
}
.etapa:last-child { padding-bottom: 0; }
/* Linha vertical ligando as etapas */
.etapa:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19.5px;
  top: 44px;
  bottom: 4px;
  width: 1px;
  background: rgba(201, 162, 39, .35);
}
.etapa-num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ouro);
  border-radius: var(--r-pill);
  font-family: var(--fonte-display);
  font-size: var(--t-numeral);
  color: var(--ouro-texto);
  background: var(--creme);
}
.etapa h3 { margin-bottom: var(--e-2); }
.etapa p { max-width: var(--medida-corpo); }

/* No mobile a numeracao vai acima do titulo */
@media (max-width: 639px) {
  .etapa { grid-template-columns: 1fr; gap: var(--e-3); }
  .etapa:not(:last-child)::before { display: none; }
}

/* ---------- Lista com filetes ---------- */

.lista-filete { display: grid; max-width: 40rem; }
.lista-filete li {
  padding-block: var(--e-4);
  border-bottom: 1px solid rgba(33, 30, 68, .12);
}
.lista-filete li:first-child { border-top: 1px solid rgba(33, 30, 68, .12); }

/* ---------- FAQ ---------- */

.faq { max-width: 44rem; margin-inline: auto; }
.faq details { border-bottom: 1px solid rgba(33, 30, 68, .14); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-5);
  min-height: 44px;
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  flex: none;
  width: 20px; height: 20px;
  color: var(--coral);
  transition: transform var(--transicao);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details > p { padding-bottom: var(--e-5); max-width: var(--medida-corpo); }

/* ---------- Depoimentos ---------- */

.depoimentos { background: var(--lavanda-2); }
.depoimento-palco { position: relative; max-width: 44rem; margin-inline: auto; text-align: center; }
.aspas {
  font-family: var(--fonte-display);
  font-size: 6rem;
  line-height: .8;
  color: var(--lavanda);
  display: block;
  margin-bottom: calc(var(--e-5) * -1);
}
.depoimento { display: none; }
.depoimento[data-ativo="true"] { display: block; }
.depoimento blockquote {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: 1.5;
  margin-inline: auto;
  max-width: 34rem;
}
.depoimento figcaption { margin-top: var(--e-5); font-size: var(--t-peq); color: var(--texto-suave); }
.depoimento-controles { display: flex; justify-content: center; gap: var(--e-4); margin-top: var(--e-7); }
.depoimento-controles button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--indigo-800);
  border-radius: var(--r-pill);
  transition: background var(--transicao), color var(--transicao);
}
.depoimento-controles button:hover { background: var(--indigo-800); color: var(--creme); }
.depoimento-controles button:active { transform: scale(.9); transition: transform var(--rapido); }
.depoimento-controles svg { width: 18px; height: 18px; }

/* ---------- Placeholder de dado pendente ---------- */

.pendente {
  display: block;
  padding: var(--e-5);
  border: 1px dashed var(--coral);
  border-radius: var(--r-card);
  background: var(--coral-fundo);
  color: var(--indigo-800);
  font-size: var(--t-peq);
  max-width: var(--medida-corpo);
}
.pendente strong { font-weight: 600; }

/* ---------- Capa do livro ---------- */

/* Mockup 3D. Volume, lombada e sombra ja vem assados na imagem, e o fundo
   dela e a cor solida da secao. Filete ou box-shadow aqui desenhariam um
   retangulo em volta de um objeto que nao e retangular.
   ATENCAO: o arquivo -creme- so serve sobre --creme-2 e o -indigo- so sobre
   --indigo-900. Mudou a cor da secao, tem que gerar a imagem de novo. */
.capa-mockup {
  display: block;
  width: 100%;
  max-width: 400px;
  border: 0;
  box-shadow: none;
}

/* Capa plana, com filete ouro e sombra em CSS */
.capa-livro {
  display: block;
  width: 100%;
  max-width: 400px;
  border: 1px solid rgba(201, 162, 39, .6);
  border-radius: 2px;
  box-shadow: var(--sombra-suave);
}
.estrelado .capa-livro,
.escuro .capa-livro {
  border-color: rgba(230, 200, 106, .8);
  box-shadow: 0 0 80px -20px rgba(230, 200, 106, .35);
}

/* ---------- Video ---------- */

.video-faixa {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  background: var(--branco);
  border-radius: var(--r-painel);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--sombra-suave);
}
@media (min-width: 768px) {
  .video-faixa { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-7); }
}
.video-thumb { position: relative; border-radius: var(--r-card); overflow: hidden; }
.video-thumb img { width: 100%; }
.video-play {
  position: absolute;
  right: var(--e-4); bottom: var(--e-4);
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--indigo-800);
  transition: transform var(--transicao), background var(--transicao);
}
.video-play:hover { background: var(--coral-forte); transform: scale(1.06); }
.video-play svg { width: 22px; height: 22px; margin-left: 3px; }

/* Selo neutro para quando o video ainda nao existe. Sem triangulo de play,
   sem parecer clicavel — o .pendente ao lado ja avisa em texto. */
.video-selo {
  position: absolute;
  right: var(--e-4);
  bottom: var(--e-4);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-pill);
  background: var(--indigo-800);
  color: var(--creme);
  font-size: var(--t-peq);
  font-weight: 600;
}

/* ---------- Rodape ---------- */

/* Brilho radial no lugar do indigo chapado: levanta as bordas do bloco
   sem introduzir cor nova. Adaptado do componente React que o Bruno
   trouxe em 15/08/2026, cujo gradiente era azul (#3ca2fa33). */
.rodape {
  background: radial-gradient(125% 125% at 50% 10%,
              var(--indigo-900) 40%, var(--indigo-700) 100%);
  color: var(--texto-claro);
}
.rodape-grid { display: grid; gap: var(--e-8); padding-block: var(--e-9) var(--e-7); }
@media (min-width: 640px) { .rodape-grid { grid-template-columns: repeat(2, 1fr); } }
/* Era 2fr 1fr 1fr. A coluna de contato carrega os itens mais longos do
   rodape ("WhatsApp (42) 98890-1997", "@marcia_rosa_terapeuta") e a 1fr
   quebrava linha sem precisar, enquanto sobrava vazio na primeira. */
@media (min-width: 1024px) {
  .rodape-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: var(--e-7); }
}

/* Hierarquia do rodape em tres niveis, nao um. Era tudo h2 do mesmo
   tamanho — o nome dela saia com o mesmo peso de "Navegacao", virando
   rotulo de coluna. Ver design.md SS6.

   1. Nome — Playfair, o unico display do rodape. Nao e mais heading:
      alem de nivelar a hierarquia, tres h2 no rodape competiam com os
      h2 de conteudo no sumario de leitor de tela. Sobraram dois. */
.rodape-nome {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: -.01em;
  color: var(--creme);
  margin-bottom: var(--e-4);
}

/* 2. Rotulos — o eyebrow que o site ja usa, em ouro sobre indigo. O
      margin-right negativo compensa o espaco fantasma que o
      letter-spacing de .18em deixa depois do ultimo caractere (SS4). */
.rodape h2 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin-right: -.18em;
  margin-bottom: var(--e-4);
}

.rodape p { color: rgba(239, 233, 242, .78); font-size: var(--t-peq); }
.rodape-nome + p { max-width: 30rem; }
/* gap menor porque cada link agora carrega 44px de altura propria */
.rodape ul { display: grid; gap: 0; }
.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: .9375rem;
  color: rgba(239, 233, 242, .88);
}
.rodape a:hover { color: var(--creme); text-decoration: underline;
  text-decoration-color: var(--ouro-claro); text-underline-offset: 4px; }
/* ---------- Barra inferior: redes + copyright ---------- */

.rodape-barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  padding-block: var(--e-5);
  border-top: 1px solid rgba(239, 233, 242, .12);
}
@media (min-width: 768px) {
  .rodape-barra { flex-direction: row; justify-content: space-between; }
}

/* Selector com .rodape na frente por necessidade, nao por habito: a
   regra .rodape ul { display: grid } acima tem especificidade (0,1,1) e
   venceria um .rodape-redes solto (0,1,0) — a lista de redes nasceria
   grade vertical em vez de linha. */
.rodape .rodape-redes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* min-height/width de 44px: alvo de toque, nao icone decorativo. O
   proprio <a> do rodape ja carrega 44px de altura; aqui a largura
   tambem precisa, porque o conteudo e so um icone de 20px. */
.rodape-redes a,
.rodape-redes .rede-pendente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-pill);
  color: rgba(239, 233, 242, .88);
  transition: color var(--transicao), background var(--transicao);
}
/* text-decoration: none anula o sublinhado de .rodape a:hover, que num
   link so-icone sublinharia o vazio ao lado do desenho. */
.rodape-redes a:hover {
  color: var(--indigo-900);
  background: var(--ouro-claro);
  text-decoration: none;
}
.rodape-redes svg { width: 20px; height: 20px; }

/* Rede sem URL real. NAO vira link para "#" nem para perfil adivinhado:
   o CLAUDE.md manda renderizar pendencia como placeholder visivel. O
   tracejado e o mesmo vocabulario do .pendente das paginas. */
.rodape-redes .rede-pendente {
  border: 1px dashed rgba(229, 137, 122, .55);
  color: rgba(239, 233, 242, .45);
  cursor: default;
}
.rodape-pendente {
  font-size: var(--t-eyebrow);
  color: rgba(229, 137, 122, .9);
}

/* ---------- Assinatura ---------- */

/* Assinatura fechando o rodape. Decorativa: o nome ja esta em texto na
   primeira coluna, entao o SVG nao precisa ser anunciado de novo.

   Pintada por mask, nao por tag de imagem. O arquivo desenha com
   stroke="currentColor", e dentro de uma tag de imagem o currentColor resolve
   contra o documento do proprio SVG — preto — nunca contra o CSS da
   pagina. Como mask, a cor vem do background e obedece a paleta. (E o
   mesmo motivo pelo qual a .assinatura da secao Sobre renderiza em
   preto hoje apesar do color: var(--indigo-800) — bug registrado no
   design.md SS6, fora do escopo desta mudanca.)

   aspect-ratio vem do viewBox 380x112 do arquivo: sem ele um elemento
   so com mask nasce com altura zero. */
.rodape-assinatura {
  position: relative;
  width: clamp(15rem, 42vw, 34rem);
  aspect-ratio: 380 / 112;
  margin: var(--e-7) auto var(--e-8);
  background: rgba(239, 233, 242, .30);
  -webkit-mask: url("../svg/assinatura-marcia.svg") center / contain no-repeat;
          mask: url("../svg/assinatura-marcia.svg") center / contain no-repeat;
  /* Traca-se da esquerda para a direita ao entrar na tela, como escrita
     acontecendo. O componente React fazia isso com strokeDashoffset, que
     exige a SVG inline e a lib motion; o clip-path da a mesma leitura sem
     nenhuma das duas. Sobrescreve o translateY do .revelar: aqui quem
     carrega a entrada e o tracado, nao o deslocamento. */
  clip-path: inset(0 100% 0 0);
  transform: none;
  transition: opacity var(--revelar), clip-path 1600ms var(--facilita-chegada);
}
.rodape-assinatura.visivel { clip-path: inset(0 0 0 0); transform: none; }

/* Acende no hover seguindo o cursor. O mask do elemento pai recorta este
   ::before junto, entao o foco radial so aparece dentro do traco da
   assinatura. As duas unicas variaveis que o JS escreve sao --mx e --my;
   sem JS o foco fica no centro e o hover ainda funciona. */
.rodape-assinatura::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 10rem at var(--mx, 50%) var(--my, 50%),
              var(--coral) 0%,
              var(--ouro-claro) 38%,
              var(--lavanda) 66%,
              transparent 78%);
  opacity: 0;
  transition: opacity var(--transicao);
}
.rodape-assinatura:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rodape-assinatura { clip-path: none; }
}

/* .rodape na frente pelo mesmo motivo das redes, e este e um bug que ja
   existia: .rodape p (0,1,1) vencia .rodape-base (0,1,0), entao o
   copyright vinha em .78 de opacidade e nunca nos .6 que a regra pedia. */
.rodape .rodape-base {
  font-size: var(--t-peq);
  color: rgba(239, 233, 242, .6);
  margin: 0;
}