/* Camila Spadotto — v22 · "Papel de carta" · 29/09/2026.
 * O site como a papelaria dela: creme de base, o nome como assinatura
 * (Licorice), o retrato recortado de pé sobre uma folha de areia, os
 * pontinhos e o Ψ dourados da agenda, e o vermelho dela só na ação.
 * Spec: docs/superpowers/specs/2026-09-29-v22-papel-de-carta-design.md.
 * Conteúdo, ordem das sete seções e as quinze marcas .rever são travados.
 * tokens.css entra por <link> no HTML, antes desta folha, e não por @import:
 * o @import só começava a baixar depois desta chegar, uma ida e volta a mais
 * bloqueando a pintura no celular. */

@font-face {
  font-family: Licorice;
  src: url(../fonts/licorice.woff2) format("woff2");
  font-display: swap;
}
/* os pesos são os que scripts/midia.py deixa no arquivo: 400–500 no regular,
   400 no itálico (só a citação). Outro peso no CSS exige abrir o eixo lá. */
@font-face {
  font-family: "EB Garamond";
  src: url(../fonts/ebgaramond.woff2) format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url(../fonts/ebgaramond-italico.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Quicksand;
  src: url(../fonts/quicksand.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ═══ base ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + 1rem);
  /* o foco por Tab não para embaixo da barra do celular (WCAG 2.4.11) */
  scroll-padding-bottom: calc(var(--barra-folga, 0px) + .75rem);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--creme);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: var(--txt-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 400; color: var(--tinta); }
p, li { text-wrap: pretty; }
.leveza__rotulo, .faq__pergunta, .padroes li, .formacao li, .sobre__entrada { text-wrap: balance; }
b { font-weight: 500; }
/* trecho que não se parte na quebra de linha ("CRP 06/115706", "24 horas"):
   segura o texto dela sem trocar um caractere */
.junto { white-space: nowrap; }
/* ênfase de desenho sobre as palavras dela ("de forma online"): peso, não cor */
.enfase { font-weight: 500; color: var(--tinta); }
/* texto só para leitor de tela ("Fale comigo" + " pelo WhatsApp") */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
a { color: inherit; }
/* toque: sem o atraso residual de toque duplo, e o realce do toque na cor da
   ação em vez do cinza do sistema */
a, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(172 31 31 / .16);
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--areia); color: var(--tinta); }

.pular {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: var(--z-aviso);
  padding: .75rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  font: 600 .95rem/1 var(--fonte-ui);
}
.pular:focus { top: .5rem; left: .5rem; }
/* o <main> recebe o foco do "Pular para o conteúdo"; é alvo, não controle */
main:focus { outline: none; }

/* ═══ moldura, seção e texto ═════════════════════════════════════════════ */

.moldura {
  width: 100%;
  max-width: var(--moldura);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.secao { padding-block: var(--secao); }
.secao--papel { background: var(--papel); }

.titulo {
  font: 400 var(--txt-titulo)/1.1 var(--fonte-texto);
  color: var(--tinta);
  text-wrap: balance;
}
.entrada {
  max-width: var(--m-prosa);
  margin-top: 1.25rem;
  font-size: var(--txt-entrada);
  line-height: 1.5;
}
.prosa { max-width: var(--m-prosa); }
.prosa p + p { margin-top: 1.1em; }
.nota { font: 400 var(--txt-nota)/1.5 var(--fonte-ui); color: var(--grafite); }

/* ═══ botões e ações ═════════════════════════════════════════════════════
   Dois botões, e só dois papéis: "Fale comigo" é a ação (vermelho, cheio);
   "Sobre mim" é caminho (contorno em tinta). Sem seta no rótulo: a seta
   anexada ao texto do botão é padrão de molde, e não diz nada aqui. */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .85em 1.6em;
  border-radius: 999px;
  background: var(--vermelho);
  color: var(--papel);
  font: 600 1rem/1.1 var(--fonte-ui);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-saida);
}
.botao:active { background: var(--vermelho-escuro); }
.botao--pequeno { min-height: 44px; padding: .65em 1.15em; font-size: .9rem; }
/* o contorno é borda desenhada por dentro: não muda a altura do botão */
.botao--contorno {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}
/* ao passar e ao tocar, o contorno se enche de areia: cor opaca da paleta
   dela (tinta sobre areia, 11,16:1), e o estados.js mede sem adivinhar alfa */
.botao--contorno:active { background: var(--areia); }
/* hover só onde há ponteiro que paira: no toque ele "gruda" depois do toque,
   e quem volta do WhatsApp achava o botão ainda escuro */
@media (hover: hover) {
  .botao:hover { background: var(--vermelho-escuro); }
  .botao--contorno:hover { background: var(--areia); }
  .menu__link:hover,
  .menu__ig:hover,
  .rodape__contato a:hover { color: var(--vermelho); }
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* ═══ cabeçalho ══════════════════════════════════════════════════════════ */

.topo { position: relative; z-index: var(--z-fixo); background: var(--creme); }
.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 90rem;
  min-height: var(--topo-altura);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 44px;   /* no celular o link é só o Ψ: o alvo não encolhe com ele */
  min-height: 44px;
  color: var(--tinta);
  text-decoration: none;
}
.marca__psi {
  flex: none;
  width: 1.55rem;
  aspect-ratio: 744 / 658;
  background: var(--ouro);
  -webkit-mask: url(../media/psi.svg) center / contain no-repeat;
          mask: url(../media/psi.svg) center / contain no-repeat;
}
/* No celular o nome sai do cabeçalho (está logo abaixo, na capa), mas segue
   lido pelo leitor de tela: é o nome do link. */
.marca__nome {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.75rem);
  font: 500 .95rem/1 var(--fonte-ui);
}
.menu__link {
  display: none;
  padding-block: .9rem;
  color: var(--grafite);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-saida);
}
.menu__ig {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--grafite);
  transition: color var(--dur-micro) var(--ease-saida);
}
.menu__ig svg { width: 22px; height: 22px; }

/* O cabeçalho fica preso desde o tablet: a barra do celular some a partir de
   48rem, e sem isto de 768 a 1023px não sobrava nenhum "Fale comigo" na tela. */
@media (min-width: 48rem) {
  .marca__nome {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font: 400 1.85rem/1 var(--fonte-nome);
    translate: 0 .1em;
  }
  .topo {
    position: sticky;
    top: 0;
    transition: box-shadow var(--dur-curta) var(--ease-saida);
  }
  .topo[data-rolou] { box-shadow: 0 1px 0 var(--fio); }
  /* o nome pequeno só aparece quando o grande, da capa, sai da tela: os dois
     juntos na primeira tela disputavam o olhar (site.js marca data-nome-visivel) */
  .marca__nome { transition: opacity var(--dur-curta) var(--ease-saida); }
  .topo[data-nome-visivel] .marca__nome { opacity: 0; }
}
@media (min-width: 64rem) {
  .menu__link { display: inline-block; }
  /* o ícone tem caixa de 44px e desenho de 22px: sem isto ele ficava com o
     dobro do respiro dos links de texto (o alvo de toque continua 44px) */
  .menu__ig { margin-inline: -.75rem; }
}

/* ═══ 1 · início ═════════════════════════════════════════════════════════ */

.capa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* no celular, a frase logo embaixo do nome, como ela pediu (R8) */
  grid-template-areas: "nome" "oficio" "frase" "retrato" "texto" "acoes" "nota";
  max-width: 90rem;
  margin-inline: auto;
  padding: 1rem var(--margem) 4rem;
}
.capa__nome {
  grid-area: nome;
  font: 400 var(--txt-nome)/.92 var(--fonte-nome);
  color: var(--tinta);
}
/* Cada palavra do nome é uma caixa para a máscara do movimento (ele se
   escreve palavra a palavra). A folga cobre as laçadas da Licorice, que a
   máscara cortaria; a margem negativa devolve o espaço ao layout. */
.capa__palavra {
  display: inline-block;
  margin: -.12em -.12em -.32em;
  padding: .12em .12em .32em;
}
/* A credencial, como no papel timbrado: "Psicóloga clínica" em cima, o CRP
   embaixo, em caixa normal e entreletra leve — o "Psicóloga" da agenda dela é
   assim. Caixa-alta espaçada e "A · B" unidos por ponto eram padrão de molde. */
.capa__oficio {
  grid-area: oficio;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1rem;
  font: 500 var(--txt-rotulo)/1.45 var(--fonte-ui);
  letter-spacing: .04em;
  color: var(--grafite);
}
.capa__oficio::before {
  content: "";
  flex: none;
  /* o fio fica na primeira linha */
  align-self: flex-start;
  margin-top: calc(.5lh - .5px);
  width: 2.75rem;
  height: 1px;
  background: var(--ouro);
}
.oficio__sep { display: none; }
.oficio__crp { display: block; white-space: nowrap; }
.capa__frase {
  grid-area: frase;
  max-width: 24ch;
  margin-top: 1.75rem;
  font: 400 var(--txt-frase)/1.2 var(--fonte-texto);
  color: var(--tinta);
  text-wrap: balance;
}
.realce {
  background-image: linear-gradient(var(--areia), var(--areia));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .38em;
  /* sem box-decoration-break: clone, de propósito: com slice o marca-texto
     corre a 1ª linha e depois a 2ª, em vez de pintar as duas juntas */
}
.capa__texto { grid-area: texto; max-width: 50ch; margin-top: 1.25rem; }
.capa__acoes { grid-area: acoes; margin-top: 2rem; }
.capa__nota {
  grid-area: nota;
  max-width: 38ch;
  margin-top: .6rem;
  font: 400 var(--txt-nota)/1.45 var(--fonte-ui);
  color: var(--grafite);
}

/* ═══ retrato: recortado, de pé sobre uma folha de areia ═════════════════ */

.retrato { position: relative; margin: 0; }
/* A folha ocupa a largura toda do retrato: as retas onde a foto original
   acabava (o braço, a cintura) caem sobre a areia, e não contra o creme. */
.retrato__folha {
  position: absolute;
  inset: 38% 0 0;
  background: var(--areia);
  transform-origin: 50% 100%;
  /* A borda de papel feito à mão, desenhada no Figma. Cada retrato tem a sua
     folha, na proporção dele, para a borda não esticar mais num lado que no
     outro; embaixo ela é reta, porque ali assenta o corte da foto. */
  -webkit-mask: url(../media/folha-papel-capa.svg) center / 100% 100% no-repeat;
          mask: url(../media/folha-papel-capa.svg) center / 100% 100% no-repeat;
}
.retrato--sobre .retrato__folha {
  inset: 34% 0 0;
  -webkit-mask-image: url(../media/folha-papel-sobre.svg);
          mask-image: url(../media/folha-papel-sobre.svg);
}
.retrato__foto { position: relative; z-index: 1; width: 100%; }
/* Os 19 pontinhos da capa da agenda dela, em volta do retrato. Ficam atrás da
   folha e da foto: só aparecem no creme em volta, como na agenda. */
.capa, .sobre { isolation: isolate; }
.retrato::before {
  content: "";
  position: absolute;
  inset: -6% -6% 6% 18%;   /* embaixo não passa da borda: nenhum ponto vaza para a seção seguinte */
  z-index: -1;
  background: url(../media/pontinhos-agenda.svg) center / cover no-repeat;
  pointer-events: none;
}
.retrato--capa {
  grid-area: retrato;
  justify-self: center;
  width: min(100%, 26rem);
  margin-top: 1.5rem;
}

@media (min-width: 64rem) {
  .capa {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr repeat(6, auto) 1.3fr;
    grid-template-areas:
      ".       retrato"
      "nome    retrato"
      "oficio  retrato"
      "frase   retrato"
      "texto   retrato"
      "acoes   retrato"
      "nota    retrato"
      ".       retrato";
    column-gap: var(--intervalo);
    min-height: min(calc(100svh - var(--topo-altura)), 58rem);
    /* respiro sob o cabeçalho nos notebooks de 720-800px de altura, onde o
       nome encostava nele; embaixo continua 0: o retrato fica de pé na borda */
    padding-block: clamp(1.5rem, 6vh, 3.5rem) 0;
  }
  .capa__nome { font-size: var(--txt-nome-largo); }
  /* O retrato fica de pé na borda de baixo e avança um pouco sobre o vão
     entre as colunas, nunca sobre o texto. Tem teto: com 145% da coluna
     (756px a 1440) ele engolia a capa — o operador pediu menor em 29/09. A
     altura da tela continua limitando, para caber nos notebooks baixos. */
  .retrato--capa {
    align-self: end;
    justify-self: end;
    width: min(112%, 36rem, calc((100svh - var(--topo-altura) - 2.5rem) * 920 / 1243));
    margin: 0;
  }
}
@media (min-width: 80rem) {
  .retrato--capa { width: min(118%, 40rem, calc((100svh - var(--topo-altura) - 2.5rem) * 920 / 1243)); }
}

/* Tablet: o nome e o retrato lado a lado (ela pediu "o nome do lado, a
   foto"), e o texto e os botões embaixo, na largura toda — e não o layout do
   celular esticado, com o retrato no meio e metade da tela vazia. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .capa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "nome   retrato"
      "oficio retrato"
      "frase  retrato"
      "texto  texto"
      "acoes  acoes"
      "nota   nota";
    column-gap: var(--intervalo);
    align-items: start;
  }
  .retrato--capa { width: 100%; margin-top: 0; align-self: end; }
}

/* ═══ 2 · limite ═════════════════════════════════════════════════════════ */

.limite__grade { display: grid; gap: 2.5rem; }
.padroes li {
  position: relative;
  padding: 1rem 0 1rem 1.9rem;
  border-top: 1px solid var(--fio);
  font: 400 var(--txt-item)/1.35 var(--fonte-texto);
  color: var(--tinta);
}
.padroes li:last-child { border-bottom: 1px solid var(--fio); }
.padroes li::before {
  content: "";
  position: absolute;
  top: calc(1rem + .5lh - 4px);
  left: .25rem;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ouro);
}
.limite__nota { max-width: 46ch; margin-top: 1.5rem; }

@media (min-width: 64rem) {
  .limite__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--intervalo);
    align-items: start;
  }
  .limite__cabeca { position: sticky; top: calc(var(--topo-altura) + 2rem); }
}

/* ═══ 3 · citação ════════════════════════════════════════════════════════ */

/* Uma foto aconchegante (manta, xícara, luz de janela), desfocada, sob um véu
   creme (#F5F0E8) que é forte atrás da frase e leve nas bordas: a frase ganha
   destaque e a foto aparece em volta. O contraste foi medido nos pixels reais
   atrás de cada letra (ver decisions.md). A areia é o fundo enquanto a foto
   não chega, e o que fica se ela falhar. Foto de banco, nunca a Camila:
   procedência no CREDITOS.md. */
.citacao {
  padding-block: calc(var(--secao) * 1.1);
  background:
    radial-gradient(ellipse 42% 62% at 50% 50%, rgb(245 240 232 / .8) 55%, rgb(245 240 232 / .3)),
    var(--areia) url(../media/citacao-1600.webp) 50% 55% / cover no-repeat;
  text-align: center;
}
@media (max-width: 47.999rem) {
  .citacao {
    background:
      radial-gradient(ellipse 75% 55% at 50% 50%, rgb(245 240 232 / .82) 60%, rgb(245 240 232 / .4)),
      var(--areia) url(../media/citacao-800.webp) 50% 40% / cover no-repeat;
  }
}
.citacao__miolo { display: grid; justify-items: center; }
.citacao__aspas {
  display: block;
  height: .5em;
  font: italic 400 clamp(5rem, 9vw, 8rem)/1 var(--fonte-texto);
  color: var(--ouro);
}
.citacao__texto p {
  max-width: 30ch;
  margin-inline: auto;
  font: italic 400 var(--txt-citacao)/1.25 var(--fonte-texto);
  color: var(--tinta);
  text-wrap: balance;
}
.citacao__frase { display: block; }
.citacao__frase + .citacao__frase { margin-top: .45em; }
.citacao__autoria {
  margin-top: 2rem;
  font: 500 var(--txt-rotulo)/1.45 var(--fonte-ui);
  letter-spacing: .04em;
  color: var(--grafite);
}

/* ═══ 4 · leveza ═════════════════════════════════════════════════════════ */

.leveza__titulo { max-width: 18ch; }
.leveza__itens { display: grid; gap: 2.25rem; margin-top: 2.5rem; }
.leveza__item {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ouro);
}
.leveza__rotulo {
  display: block;
  margin-bottom: .4rem;
  font: 500 var(--txt-subtitulo)/1.25 var(--fonte-texto);
  color: var(--tinta);
}
@media (min-width: 48rem) {
  .leveza__itens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--intervalo);
    row-gap: 3rem;
    margin-top: 3rem;
  }
}
/* No desktop largo, uma fileira editorial de quatro colunas com os filetes de
   ouro, alinhada à esquerda como o resto da página. Não é grade de "features":
   sem ícone, sem centralizar, sem cartão — e acaba o terço vazio do 2×2. */
@media (min-width: 80rem) {
  .leveza__itens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══ 5 · terapia ════════════════════════════════════════════════════════ */

.terapia__grade { display: grid; gap: 2.5rem; }  /* no celular, o mesmo passo título → conteúdo das outras seções */
/* a ilustração fica sob o título, rente à margem dele: no celular, entre o
   título e a prosa; no desktop, desce até a última linha da prosa, para as
   duas colunas fecharem juntas */
/* as três camadas empilham na mesma célula e somam a imagem inteira */
.perfis { display: grid; width: min(100%, 20rem); margin-top: 2rem; }
.perfis__camada { grid-area: 1 / 1; width: 100%; height: auto; }
/* a organizada fica atrás da embolada (é dela que sai) e o encontro por cima;
   a ordem é explícita porque o transform da animação a levaria para a frente */
.perfis__camada { position: relative; }
.perfis__organizada { z-index: 0; }
.perfis__embolada { z-index: 1; }
.perfis__encontro { z-index: 2; }
@media (min-width: 64rem) {
  /* a imagem não entra na conta da altura da linha (base 0): quem manda é a
     prosa, e a imagem ocupa o que sobra sob o título, encostada embaixo */
  .terapia__abertura { display: flex; flex-direction: column; }
  .perfis { flex: 1 1 0; min-height: 0; width: 100%; max-width: 30rem; margin-top: 1.75rem; }
  .perfis__camada { height: 100%; min-height: 0; object-fit: contain; object-position: left bottom; }
}
@media (min-width: 64rem) {
  .terapia__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--intervalo);
  }
}

/* ═══ 6 · sobre mim ══════════════════════════════════════════════════════ */

.sobre__grade { display: grid; gap: 3rem; }
.retrato--sobre { justify-self: center; width: min(100%, 24rem); }
.sobre__texto .prosa { margin-top: 1.5rem; }
.sobre__entrada { font: 400 var(--txt-frase)/1.2 var(--fonte-texto); color: var(--tinta); }
/* depois da assinatura, a formação é o post-scriptum da carta */
.formacao { display: grid; gap: .55rem; max-width: var(--m-prosa); margin-top: 2rem; }
.formacao li {
  position: relative;
  padding-left: 1.5rem;
  font: 500 var(--txt-nota)/1.45 var(--fonte-ui);
  color: var(--grafite);
}
.formacao li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: .2rem;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ouro);
}
/* A assinatura fecha a carta, logo depois da prosa. Caixa do tamanho da
   palavra, com folga para as laçadas: é a caixa da máscara que a escreve. */
.assinatura {
  width: fit-content;
  margin: 1.75rem -.15em 0;
  padding: .1em .15em .3em;
  font: 400 clamp(2.8rem, 5vw, 3.6rem)/1 var(--fonte-nome);
  color: var(--tinta);
}
@media (min-width: 64rem) {
  .sobre__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--intervalo);
    align-items: start;
  }
  /* o retrato acompanha a leitura de uma prosa de ~1.100px, em vez de ficar
     solto no meio dela */
  .retrato--sobre {
    position: sticky;
    top: calc(var(--topo-altura) + 3rem);
    width: 100%;
    max-width: 28rem;
  }
}

/* ═══ 7 · perguntas ══════════════════════════════════════════════════════ */

.perguntas__grade { display: grid; gap: 2.5rem; }
/* A foto entra inteira, sem recorte de fundo: a borda de papel feito à mão da
   folha da capa vira a borda da própria foto, como um retrato impresso. */
.perguntas__foto {
  display: block;
  width: min(100%, 34rem);
  height: auto;
  margin-top: 2rem;
  -webkit-mask: url(../media/folha-papel-capa.svg) center / 100% 100% no-repeat;
          mask: url(../media/folha-papel-capa.svg) center / 100% 100% no-repeat;
}
.faq { border-top: 1px solid var(--fio); }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__pergunta { font: 500 var(--txt-pergunta)/1.3 var(--fonte-texto); color: var(--tinta); }
/* no celular os itens do limite e as perguntas quebram em três linhas: a
   entrelinha apertada do desktop embola */
@media (max-width: 47.999rem) {
  .padroes li, .faq__pergunta { line-height: 1.4; }
}
/* hastes de 2px numa caixa de 18px: o "+" sai nítido em tela 1x (com 1,5px a
   haste vertical borrava em meia coluna) */
.faq__sinal { position: relative; flex: none; width: 1.125rem; height: 1.125rem; margin-top: .4rem; }
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  margin-top: -1px;
  background: var(--tinta);
  transition: transform 200ms var(--ease-saida);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq details[open] .faq__sinal::after { transform: rotate(0deg); }
.faq__resposta { max-width: calc(var(--m-prosa) + 2.4rem); padding: 0 2.4rem 1.6rem 0; }
/* números de texto corrido ("50 minutos", "24 horas", "09/2024") em estilo
   antigo, que assentam na linha em vez de saltar dela */
.prosa, .faq__resposta { font-variant-numeric: oldstyle-nums proportional-nums; }
.faq__resposta p + p { margin-top: .9em; }
.faq__acao { margin-top: 1.25rem; }

@media (min-width: 64rem) {
  .perguntas__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--intervalo);
    align-items: start;
  }
  .perguntas__abertura { position: sticky; top: calc(var(--topo-altura) + 2rem); }
}

/* ═══ 404 ════════════════════════════════════════════════════════════════ */

/* A 404 é a capa da agenda: o Ψ em escala de emblema, os pontinhos em volta,
   tudo centrado. A página curta ocupa a tela, sem faixa creme sob o rodapé. */
body:has(.erro) { display: flex; flex-direction: column; min-height: 100svh; }
body:has(.erro) main { flex: 1; display: grid; }
.erro {
  display: grid;
  align-content: center;
  text-align: center;
  background: var(--creme) url(../media/pontinhos-agenda.svg) center / min(60rem, 240%) auto no-repeat;
}
.erro .moldura { display: grid; justify-items: center; }
.erro__psi {
  width: clamp(5.5rem, 11vw, 8.5rem);
  aspect-ratio: 744 / 658;
  margin-bottom: 2.5rem;
  background: var(--ouro);
  -webkit-mask: url(../media/psi.svg) center / contain no-repeat;
          mask: url(../media/psi.svg) center / contain no-repeat;
}
.erro .entrada { margin-inline: auto; }
.erro__acoes { justify-content: center; margin-top: 2rem; }

/* ═══ rodapé ═════════════════════════════════════════════════════════════ */

/* A folga da barra do celular fica DENTRO do rodapé, em areia: no body ela
   sobrava como uma faixa de creme depois dele, porque a barra some no fim. */
/* O rodapé fecha a carta como a contracapa da agenda: centrado, o Ψ e o nome
   em escala de marca, a credencial, os contatos e a nota. */
.rodape {
  padding: clamp(2.5rem, 5vw, 3.25rem) 0 calc(2.25rem + var(--barra-folga, 0px));
  /* a sala aconchegante, pouco desfocada, sob um véu de areia que segura a leitura */
  background:
    linear-gradient(rgb(221 208 179 / .8), rgb(221 208 179 / .8)),
    var(--areia) url(../media/rodape-800.webp) 50% 50% / cover no-repeat;
  color: var(--tinta);
  text-align: center;
}
.rodape__grade { display: grid; justify-items: center; gap: 1.25rem; }
.rodape__marca { display: grid; justify-items: center; gap: .4rem; }
.rodape__nome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font: 400 clamp(2rem, 3.6vw, 2.5rem)/1 var(--fonte-nome);
}
/* sobre a areia o ouro some (1,51:1): no rodapé o Ψ vai em tinta */
.rodape .marca__psi { width: clamp(1.6rem, 2.6vw, 2rem); background: var(--tinta); }
@media (min-width: 48rem) {
  .rodape {
    background:
      linear-gradient(rgb(221 208 179 / .8), rgb(221 208 179 / .8)),
      var(--areia) url(../media/rodape-1600.webp) 50% 50% / cover no-repeat;
  }
}
.rodape__oficio {
  font: 500 var(--txt-rotulo)/1.45 var(--fonte-ui);
  letter-spacing: .04em;
  color: var(--grafite);
}
.rodape__contato {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2.5rem;
  font: 500 1rem/1.4 var(--fonte-ui);
}
.rodape__contato li { position: relative; }
.rodape__contato a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-block: .7rem;   /* alvo de 44px */
  white-space: nowrap;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-saida);
}
/* o sublinhado fica só no texto; o ícone não ganha traço embaixo */
.contato__texto {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.contato__icone { width: 1.3em; height: 1.3em; flex: none; }
/* clicar no e-mail copia o endereço: por 2,5 s o aviso ocupa o lugar do
   texto, sem mudar a largura da linha nem cobrir o contato vizinho */
.copiar__aviso {
  position: absolute;
  inset: 0 0 0 calc(1.3em + .55rem);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.copiar.copiado .contato__texto { color: transparent; }
.rodape__nota { max-width: 60ch; margin-inline: auto; font: 400 var(--txt-nota)/1.5 var(--fonte-ui); color: var(--grafite); }
/* sobre a areia, a seleção de texto em areia sumia */
.rodape ::selection { background: var(--papel); }

/* ═══ barra de contato do celular ════════════════════════════════════════ */

.barra {
  position: fixed;
  z-index: var(--z-fixo);
  inset: auto 0 0;
  visibility: hidden;
  padding: .5rem var(--margem) calc(.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fio);
  background: var(--papel);
  transform: translateY(100%);
  transition: transform var(--dur-curta) var(--ease-saida), visibility var(--dur-curta);
}
.barra .botao { width: 100%; }
@media (min-width: 48rem) { .barra { display: none; } }
/* tela baixa (zoom alto, celular deitado): a barra comeria um terço dela e
   cobriria o foco; o "Fale comigo" continua no topo, na capa e no FAQ */
@media (max-height: 30rem) { .barra { display: none; } }
@media (max-width: 47.999rem) {
  .barra[data-visivel] { visibility: visible; transform: none; }
}

/* ═══ modo ?revisar ══════════════════════════════════════════════════════ */

.rever, .confirmar { background: none; }
body[data-revisar] .rever,
body[data-revisar] .confirmar {
  outline: 2px dashed var(--vermelho);
  outline-offset: 2px;
}
body[data-revisar] .rever::after {
  display: inline-block;
  margin-left: .25em;
  padding: 0 .25em;
  border-radius: 2px;
  background: var(--vermelho);
  color: var(--papel);
  content: attr(data-rever);
  font: 700 .6875rem/1.5 var(--fonte-ui);
  letter-spacing: .04em;
  vertical-align: super;
}
body[data-revisar] section.rever::after {
  display: block;
  width: fit-content;
  margin: .75rem auto 0;
  vertical-align: baseline;
}
body[data-revisar] section.rever { outline-offset: -4px; }
.aviso-revisao {
  position: fixed;
  z-index: var(--z-aviso);
  inset: 0 0 auto;
  margin: 0;
  padding: .5rem 1rem;
  background: var(--vermelho);
  color: var(--papel);
  font: 700 .8125rem/1.4 var(--fonte-ui);
  text-align: center;
}
body[data-revisar] { padding-top: 2.4rem; }
/* o aviso fixo não cobre o cabeçalho preso, nem os títulos no salto de âncora */
@media (min-width: 48rem) {
  body[data-revisar] .topo { top: 2.4rem; }
  html:has(body[data-revisar]) { scroll-padding-top: calc(var(--topo-altura) + 3.4rem); }
}

/* ═══ movimento ══════════════════════════════════════════════════════════
   Só existe sob .com-movimento, que o cedo.js põe antes da primeira pintura,
   e só na TELA de quem não pediu menos movimento. Sem JavaScript, com
   "reduzir movimento" (mesmo ligado com a página aberta) ou na impressão,
   nenhuma regra daqui vale e o conteúdo fica no estado final: visível,
   parado, em ordem.
   A CICATRIZ de 29/09: uma cerca de Markdown (três crases) colada do plano
   fechava esta seção; o navegador engoliu o @media de "reduzir movimento"
   seguinte em silêncio e os testes passaram. Apagar só a cerca não bastava:
   quem ligasse "reduzir" com a página aberta perdia o nome, que é revelado
   por uma animação com forwards. Por isso a seção inteira fica dentro deste
   @media. */

@media screen and (prefers-reduced-motion: no-preference) {

@keyframes escrever { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(12px); } }
@keyframes folha { from { transform: scaleY(.92); } }
@keyframes realcar { from { background-size: 0 .38em; } }

/* A escrita: uma máscara em degradê corre da esquerda para a direita, na
   velocidade de uma caneta. A faixa vai de 44,4% a 55,6% de uma máscara de
   225%: começa e termina exatamente na borda da palavra, sem tempo parado. O
   texto é vivo o tempo todo. Serve ao nome (abre a carta) e à assinatura
   (fecha a carta). */
.com-movimento .capa__palavra,
.com-movimento .assinatura {
  -webkit-mask-image: linear-gradient(90deg, #000 44.4%, transparent 55.6%);
          mask-image: linear-gradient(90deg, #000 44.4%, transparent 55.6%);
  -webkit-mask-size: 225% 100%;
          mask-size: 225% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}
.com-movimento.nome-parado .capa__palavra,
.com-movimento.nome-parado .assinatura { -webkit-mask: none; mask: none; }

/* 1 · o nome se escreve palavra a palavra, com a pausa da caneta entre elas
       (no celular, uma linha depois da outra): "Camila" em .7s, pausa,
       "Spadotto" em .8s — os mesmos 1,6s de antes, agora ocupados. */
.com-movimento.nome-pronto .capa__palavra { animation: escrever .7s var(--ease-caneta) forwards; }
.com-movimento.nome-pronto .capa__palavra + .capa__palavra { animation-duration: .8s; animation-delay: .8s; }

/* o resto da capa aparece em paralelo, sem esperar o nome: em 0,9s está lido.
   O .capa repetido nos atrasos iguala a especificidade do atalho animation
   da regra acima, que senão zera o animation-delay e tudo sobe junto. */
.com-movimento .capa [data-cascata] { animation: surgir .5s var(--ease-saida) both; }
.com-movimento .capa .capa__frase { animation-delay: .12s; }
.com-movimento .capa .capa__texto { animation-delay: .24s; }
.com-movimento .capa .capa__acoes,
.com-movimento .capa .capa__nota { animation-delay: .36s; }
.com-movimento .capa .realce { animation: realcar .7s var(--ease-saida) 1.1s both; }
/* o retrato aparece inteiro — folha, foto, pontinhos e Ψ juntos, sem a folha
   vazar pela foto meio transparente —; dentro dele a foto sobe e a folha cresce */
.com-movimento .retrato--capa { animation: aparecer .9s var(--ease-saida) .1s both; }
.com-movimento .retrato--capa .retrato__foto { animation: subir .9s var(--ease-saida) .2s both; }
.com-movimento .retrato--capa .retrato__folha { animation: folha .9s var(--ease-saida) .1s both; }

/* 2 · do turbilhão à clareza: cada padrão chega com o seu desvio e assenta
       em fila quando a lista entra na tela. Só transform, filter e opacity. */
.com-movimento .padroes li {
  opacity: .35;
  filter: blur(3px);
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--giro, 0deg));
  transition:
    opacity .8s var(--ease-saida),
    filter .8s var(--ease-saida),
    transform .8s var(--ease-saida);
  transition-delay: calc(var(--ordem, 0) * 90ms);
}
.padroes li:nth-child(1) { --dx: -14px; --dy: 10px;  --giro: -2.2deg; --ordem: 0; }
.padroes li:nth-child(2) { --dx: 22px;  --dy: -6px;  --giro: 1.6deg;  --ordem: 1; }
.padroes li:nth-child(3) { --dx: -24px; --dy: 4px;   --giro: 2.8deg;  --ordem: 2; }
.padroes li:nth-child(4) { --dx: 12px;  --dy: 12px;  --giro: -1.4deg; --ordem: 3; }
.padroes li:nth-child(5) { --dx: -8px;  --dy: -10px; --giro: 3deg;    --ordem: 4; }
.padroes li:nth-child(6) { --dx: 20px;  --dy: 6px;   --giro: -2.6deg; --ordem: 5; }
.padroes li:nth-child(7) { --dx: -18px; --dy: -4px;  --giro: 1.2deg;  --ordem: 6; }
.com-movimento .padroes.assentou li { opacity: 1; filter: none; transform: none; }

/* 3 · a citação entra devagar, uma frase depois da outra */
.com-movimento .citacao__aspas,
.com-movimento .citacao__frase {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-saida), transform .9s var(--ease-saida);
}
.com-movimento .citacao__aspas { transform: scale(.9); }
.com-movimento .citacao__frase + .citacao__frase { transition-delay: .35s; }
.com-movimento .citacao.dentro .citacao__aspas,
.com-movimento .citacao.dentro .citacao__frase { opacity: 1; transform: none; }

/* 4 · a carta fecha como abriu: a assinatura "Camila" se escreve quando o fim
       da prosa entra na tela, uma vez. (Os títulos das seções NÃO entram
       esmaecendo e subindo: esse é o movimento genérico de qualquer página, e
       aqui só se move o que significa algo.) */
.com-movimento .assinatura.dentro { animation: escrever 1.2s var(--ease-caneta) .15s forwards; }

/* 5 · a terapia: quando a seção entra na tela, a cabeça embolada está
       sozinha; a organizada sai de trás dela, devagar, e o encontro das duas
       escurece por último. Uma vez só. */
.com-movimento .perfis__organizada {
  opacity: 0;
  transform: translateX(-36%);
  transition: opacity 1s var(--ease-saida) .4s, transform 2.2s var(--ease-saida) .4s;
}
.com-movimento .perfis__encontro { opacity: 0; transition: opacity 1s var(--ease-saida) 2.1s; }
.com-movimento .perfis.dentro .perfis__organizada,
.com-movimento .perfis.dentro .perfis__encontro { opacity: 1; transform: none; }

/* A resposta do FAQ aparece em 200ms ao abrir: é movimento que responde a um
   gesto da pessoa. Fechar continua instantâneo; onde ::details-content não
   existe, a regra cai e a resposta abre como antes. */
.com-movimento .faq details::details-content { opacity: 0; }
.com-movimento .faq details[open]::details-content { opacity: 1; transition: opacity .2s var(--ease-saida); }

}

/* ═══ cores forçadas (Alto Contraste do Windows) ═════════════════════════
   O Ψ e o "+" são pintados por background, que o modo forçado troca pela cor
   do fundo: sumiam. E o botão perdia a borda que o distingue do texto. */
@media (forced-colors: active) {
  .marca__psi,
  .erro__psi,
  .faq__sinal::before,
  .faq__sinal::after { forced-color-adjust: none; background: CanvasText; }
  .botao { border: 1px solid ButtonText; }
}

/* ═══ sem movimento para quem pediu ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}