/* =========================================================================
   Ana Claudia Medeiros — Psicóloga Clínica
   Rampas geradas em OKLCH (neutro quente H75, verde da marca H155.6 e a
   argila H50 das ilustrações) e escritas em hex: o hex tem suporte universal,
   e a rampa continua perceptualmente uniforme porque a matemática foi feita
   em OKLCH. Todo par de contraste com texto foi medido em APCA e WCAG 2 AA.
   ========================================================================= */

/* ---------- 1. Fontes (auto-hospedadas: nenhuma requisição a terceiros) ---- */

@font-face {
  font-family: 'Inter var';
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter var';
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair var';
  src: url('assets/fonts/playfair-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair var';
  src: url('assets/fonts/playfair-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ------------------------------------------------------ */

:root {
  /* Rampa neutra — quente (OKLCH H 75). Carrega fundo, bordas e texto. */
  --n-1: #fdfdfb;   /* fundo da página          */
  --n-2: #faf9f7;   /* fundo sutil              */
  --n-3: #f3f1ef;   /* fundo de componente/card */
  --n-4: #edebe7;   /* hover de componente      */
  --n-5: #e6e3e0;   /* ativo / selecionado      */
  --n-6: #dedbd7;   /* borda sutil              */
  --n-7: #d4d0cb;   /* borda, separador         */
  --n-8: #c3bfb9;   /* borda forte              */
  --n-9: #8a8580;   /* preenchimento sólido     */
  --n-10: #7e7a74;  /* preenchimento hover      */
  --n-11: #5c5955;  /* texto secundário         */
  --n-12: #2e2c29;  /* texto principal          */

  /* Rampa de acento — verde da marca (OKLCH H 155.6). O passo 9 é o
     #105733 original, preservado exatamente. */
  --a-1: #f8fcf9;
  --a-2: #f0f8f3;
  --a-3: #e3f1e7;
  --a-4: #d5eadc;
  --a-5: #c7e2d0;
  --a-6: #b7d8c2;
  --a-7: #a3cbb0;
  --a-8: #83b695;
  --a-9: #105733;   /* preenchimento sólido — cor da marca */
  --a-10: #054b2a;  /* hover                                */
  --a-11: #296140;  /* texto de acento                      */
  --a-12: #0e2e1c;  /* texto de acento alto contraste       */

  /* Argila (OKLCH H 50) — a terceira cor das referências que a Ana mandou.
     Só as ilustrações consomem estes passos; nenhum texto, nenhum controle.
     Os dois claros repetem a luminosidade de --a-3 e --a-5, então as formas
     verdes e as de argila pesam igual na composição. */
  --c-3: #fae9e0;   /* forma clara      — L 0.944, igual a --a-3 */
  --c-5: #f4d2c0;   /* forma            — L 0.888, igual a --a-5 */
  --c-9: #9c6e54;   /* traço            — L 0.580                */

  /* Semânticos — a única camada que os componentes leem. */
  --color-bg: var(--n-1);
  --color-bg-subtle: var(--n-2);
  --color-surface: var(--n-3);
  --color-surface-raised: #ffffff;
  --color-border: var(--n-7);
  --color-border-subtle: var(--n-6);
  --color-text: var(--n-12);
  --color-text-secondary: var(--n-11);
  --color-text-on-accent: #ffffff;
  --color-accent-solid: var(--a-9);
  --color-accent-solid-hover: var(--a-10);
  --color-accent-text: var(--a-11);
  --color-accent-heading: var(--a-12);
  --color-focus: var(--a-9);

  /* Ilustração: papéis decorativos, sem obrigação de contraste porque nada
     aqui carrega texto nem estado. */
  --color-illustration-bg: var(--a-2);
  --color-illustration-sage: var(--a-4);
  --color-illustration-clay: var(--c-5);
  --color-illustration-clay-soft: var(--c-3);
  --color-illustration-line: var(--c-9);

  /* Escala tipográfica por papel: cada papel é uma decisão, não três. */
  --text-display: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  --text-title: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --text-heading: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-caption: 0.8125rem;
  --text-overline: 0.75rem;

  --leading-display: 1.04;
  --leading-title: 1.15;
  --leading-heading: 1.35;
  --leading-body: 1.65;

  --font-display: 'Playfair var', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Escala de espaçamento, base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Raios — concêntricos: raio externo = raio interno + padding */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 62.4375rem;

  /* Sombras em preto puro com alfa: um neutro tingido pega a cor da
     superfície embaixo e lê como sujeira na borda. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);

  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* Margem de layout: o conteúdo nunca encosta na borda da viewport. */
  --layout-margin: var(--space-5);
  --measure: 38rem; /* ~65 caracteres em Inter no tamanho de corpo */
  --header-height: 4.5rem;
}

/* ---------- 3. Base -------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent-heading);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Contorno de 1px em preto puro: dá profundidade sem tingir a borda. */
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

a {
  color: var(--color-accent-text);
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
}

::selection {
  background-color: var(--a-4);
  color: var(--a-12);
}

/* Um único anel de foco para tudo. Verificado contra o fundo da página
   (Lc 88) e contra o fundo dos cards (Lc 81). */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Alvos de âncora não ficam escondidos atrás do cabeçalho fixo. */
[id] {
  scroll-margin-top: calc(var(--header-height, 4.5rem) + var(--space-5));
}

/* ---------- 4. Utilitários ------------------------------------------------- */

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}

/* Some da tela e continua na árvore de acessibilidade: para títulos que
   estruturam a página mas que o desenho dispensa. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent-solid);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--color-text);
}

.overline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-overline);
  font-weight: 500;
  letter-spacing: 0.12em; /* maiúsculas pequenas precisam de folga */
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.overline::before {
  content: '';
  inline-size: var(--space-6);
  block-size: 1px;
  background-color: var(--color-border);
  flex: none;
}

.section {
  padding-block: clamp(var(--space-8), 5vw, var(--space-10));
}

.section--tinted {
  background-color: var(--color-bg-subtle);
}

/* ---------- 5. Botões ------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Altura mínima de 44px: alvo confortável em toque. */
  min-block-size: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition-property: background-color, border-color, color, box-shadow, scale;
  transition-duration: 150ms;
  transition-timing-function: var(--easing);
}

.button--primary {
  background-color: var(--color-accent-solid);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-sm);
}

.button--secondary {
  background-color: var(--color-surface-raised);
  color: var(--color-accent-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Hover só onde hover existe de verdade: em toque, o estado gruda. */
@media (hover: hover) {
  .button--primary:hover {
    background-color: var(--color-accent-solid-hover);
    box-shadow: var(--shadow-md);
  }

  .button--secondary:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border-subtle);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button:active {
    scale: 0.96;
  }
}

.button__icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  /* O ícone herda a cor do texto: um SVG, recolorido por estado. */
  fill: currentColor;
}

/* ---------- 6. Cabeçalho --------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: rgba(253, 253, 251, 0.85);
  border-block-end: 1px solid var(--color-border-subtle);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    backdrop-filter: blur(12px);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 4.5rem;
}

/* O logo é marca + nome, os dois vetoriais: a marca é um <use> do símbolo
   e o nome é texto de verdade, na mesma serifada dos títulos. Nítido em
   qualquer tamanho, e o nome fica selecionável e traduzível. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* A marca é desenhada a 36px, mas o alvo de toque tem os 44px mínimos —
     em tela estreita o nome some e sobra só ela. */
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  color: var(--color-accent-heading);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.logo__mark {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  /* O nome ao lado é 600, e ícone ao lado de semibold pede traço de 2px:
     2.4 no viewBox de 44, desenhado a 36px, sai em ~1.96px na tela. */
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.logo__name {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: -0.01em;
}

/* Abaixo de ~26rem o nome e o botão brigam pela linha, então só a marca
   fica visível. O nome continua no acessível: sem ele, o link do logo
   seria um <a> sem nome nenhum, já que a marca é decorativa. */
@media (max-width: 26rem) {
  .logo__name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------- 7. Hero -------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
  background-image: linear-gradient(
    to bottom,
    var(--a-2),
    var(--color-bg) 70%
  );
}

.hero__inner {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
}

/* Quebra onde o conteúdo para de caber: o texto precisa de ~34rem para
   manter a medida e a foto de ~22rem para não virar selo. Não é preset. */
@media (min-width: 58rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }
}

.hero__role {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
}

/* O CRP estava em 13px na cor secundária: Lc 78,7. Na tabela do APCA, 13px
   em peso 400 não é servido por cor nenhuma — nem preto puro chega ao Lc que
   esse tamanho pede. Então o tamanho tinha que subir junto com a cor: 16px
   em --color-text dá Lc 95,2, contra os Lc 90 que 16px/400 exige. É um
   número que gente de verdade confere antes de marcar consulta. */
.hero__crp {
  margin-block-start: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* A linha que a Ana pediu maior. É o que a pessoa precisa ler para saber
   se o atendimento é para ela, então ganha corpo e a cor de texto cheia. */
.hero__lede {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-subtle);
  max-width: var(--measure);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

.hero__note {
  margin-block-start: var(--space-3);
  max-width: var(--measure);
  color: var(--color-text-secondary);
}

/* Ilustração, não foto: sem sombra e sem contorno, porque não é uma janela
   para outro lugar — é uma superfície da própria página. Em tela estreita
   ela deita para não empurrar o texto para fora do primeiro quadro, e tem
   teto de altura: sem ele, a 200% de zoom ela renderiza 592x395 e fica
   maior que todo o texto que acompanha. O SVG corta (`slice`) em vez de
   deixar faixa vazia, então o corte é o comportamento certo aqui. */
.hero__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-illustration-bg);
  aspect-ratio: 3 / 2;
  max-block-size: 18rem;
}

@media (min-width: 58rem) {
  .hero__figure {
    aspect-ratio: 4 / 5;
    max-block-size: none;
  }
}

.hero__figure svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ---------- 8. Sobre ------------------------------------------------------- */

.about__inner {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: start;
}

@media (min-width: 52rem) {
  .about__inner {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}

/* Teto de altura enquanto empilhado: sem ele, a 768px o retrato renderiza
   720x900 e a pessoa rola uma tela inteira de foto antes de chegar no texto.
   O mesmo teto que o hero e as ilustrações já tinham. */
.about__portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  max-block-size: 24rem;
}

@media (min-width: 52rem) {
  .about__portrait {
    max-block-size: none;
  }
}

.about__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.about__body > * + * {
  margin-block-start: var(--space-5);
}

.about__body p {
  color: var(--color-text-secondary);
  max-width: var(--measure);
}

/* O subtítulo abre um assunto novo dentro da seção, então o vão acima dele
   é maior que o vão entre parágrafos — é isso que marca o corte. */
.about__body h3 {
  margin-block-start: var(--space-7);
}

/* ---------- 9. Seções de assunto (texto + ilustração) ---------------------- */

.topic {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
}

/* Quebra onde o texto para de caber na medida: abaixo disso a ilustração
   ao lado espremeria a coluna de leitura. */
@media (min-width: 56rem) {
  .topic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }

  /* Alterna o lado da ilustração entre uma seção e a seguinte. Trocar por
     `order` moveria o texto para a coluna estreita junto: quem manda aqui
     é a célula, então a troca é por coluna, e as colunas do grid seguem a
     direção da escrita. */
  .topic--reverse {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }

  .topic--reverse .topic__figure {
    grid-column: 1;
    grid-row: 1;
  }

  .topic--reverse .topic__body {
    grid-column: 2;
    grid-row: 1;
  }
}

.topic__body > * + * {
  margin-block-start: var(--space-5);
}

.topic__body p {
  color: var(--color-text-secondary);
  max-width: var(--measure);
}

/* Empilhada, a ilustração para de crescer na largura em vez da altura: o
   SVG desta seção enquadra por inteiro (`meet`), então cortar a caixa
   deixaria faixa vazia — limitar a largura mantém a composição. */
.topic__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-illustration-bg);
  aspect-ratio: 4 / 3;
  max-inline-size: 26rem;
}

@media (min-width: 56rem) {
  .topic__figure {
    max-inline-size: none;
  }
}

.topic__figure svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ---------- 9b. Ilustrações ------------------------------------------------ */

.shape-sage {
  fill: var(--color-illustration-sage);
}

.shape-clay {
  fill: var(--color-illustration-clay);
}

.shape-clay-soft {
  fill: var(--color-illustration-clay-soft);
}

.stroke-line {
  fill: none;
  stroke: var(--color-illustration-line);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.fill-line {
  fill: var(--color-illustration-line);
}

/* ---------- 10. Modalidades de atendimento --------------------------------- */

.modes {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.mode {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.mode__media {
  aspect-ratio: 4 / 3;
}

/* A foto do consultório mantém o contorno de 1px do seletor global: é a
   mesma profundidade que o retrato do "Sobre" tem, e sem ele as duas
   fotografias da página ficariam com tratamentos diferentes. */
.mode__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* O card do online não tem foto: mostra a ilustração irmã da seção de
   psicoterapia, sobre a mesma superfície clara das outras ilustrações. */
.mode__media--illustration {
  background-color: var(--color-illustration-bg);
}

/* O `block-size` é o que alinha os dois cards: sem ele o SVG se mede pelo
   próprio conteúdo, a caixa da mídia fica 7px mais alta que a da foto ao
   lado e a borda de baixo das duas desencontra. */
.mode__media svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.mode__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}

.mode__body p {
  color: var(--color-text-secondary);
  flex: 1;
}

.mode__body .button {
  align-self: flex-start;
  margin-block-start: var(--space-2);
}

/* ---------- 11. Endereço --------------------------------------------------- */

/* Uma coluna só: a Ana pediu endereço escrito e link, sem mapa. Um print
   do Google Maps não é um mapa — não dá para arrastar, não traça rota, e
   fica desatualizado sem ninguém perceber. O link faz as três coisas. */
.location {
  max-width: var(--measure);
}

.location__address {
  font-style: normal;
  font-size: var(--text-body-lg);
  margin-block: var(--space-5) var(--space-6);
}

.location__address span {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

/* ---------- 12. Rodapé ----------------------------------------------------- */

.site-footer {
  padding-block: var(--space-7);
  border-block-start: 1px solid var(--color-border-subtle);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  align-items: center;
}

.site-footer p {
  margin: 0;
}

/* ---------- 13. Entrada suave (opcional, respeita reduced-motion) ---------- */

/* O conteúdo é visível por padrão. A classe .js — que só existe se o script
   rodou — é o que autoriza escondê-lo para animar. É o sentido oposto ao do
   site antigo, onde uma animação que não disparava deixava a seção em branco. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 var(--space-4);
    transition: opacity 600ms var(--easing), translate 600ms var(--easing);
  }

  .js .reveal.is-visible {
    opacity: 1;
    translate: none;
  }
}

/* Na impressão não há rolagem, então o observador nunca revela as seções
   de baixo. Sem isto, imprimir a página sairia com metade em branco. */
@media print {
  .js .reveal {
    opacity: 1 !important;
    translate: none !important;
  }

  .site-header {
    position: static;
  }
}