/* base.css — regras fixas da agência. NÃO EDITAR por projeto.
   Tokens de cor, fonte, raio e sombra do cliente ficam em style.css.
   Escala e regras descritas em specs/design.md §0. */

:root {
  /* Espaçamento: escala fechada. Nenhum margin/padding/gap fora daqui. */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 3rem;     /*  48px */
  --space-8: 4rem;     /*  64px */
  --space-9: 6rem;     /*  96px */
  --space-10: 8rem;    /* 128px */

  --section-y: var(--space-8);          /* celular e tablet: 64px */
  --gutter: var(--space-5);             /* 24px */
  --container: 1200px;
  --container-narrow: 760px;

  /* Ícones: só estes dois tamanhos (+ círculo de card) */
  --icone-linha: 20px;
  --icone-card: 24px;
  --icone-circulo: 48px;

  --toque-min: 44px;
  --header-h: 72px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.14s;
  --dur-base: 0.24s;
  --dur-slow: 0.42s;
}
@media (min-width: 900px) {
  :root { --section-y: var(--space-9); --gutter: var(--space-6); }  /* 96px / 32px */
}
@media (max-width: 399px) {
  :root { --gutter: 1.25rem; }  /* 20px: única exceção à escala, só na borda da tela */
}

/* Reset enxuto */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:target, [id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* Estrutura */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--estreito { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.secao { padding-block: var(--section-y); }

/* Imagens: sempre cobrem o espaço reservado, sem distorcer */
.midia { position: relative; overflow: hidden; }
.midia > img, .midia > picture, .midia > picture > img { width: 100%; height: 100%; object-fit: cover; }
.proporcao-heroi   { aspect-ratio: 4 / 5; }
.proporcao-card    { aspect-ratio: 4 / 3; }
.proporcao-retrato { aspect-ratio: 4 / 5; }
.proporcao-avatar  { aspect-ratio: 1 / 1; border-radius: 50%; }
@media (min-width: 900px) { .proporcao-heroi { aspect-ratio: 3 / 2; } }

/* Ícones (gerados por ~/agencia/scripts/icone.mjs) */
.icone { width: var(--icone-card); height: var(--icone-card); flex-shrink: 0; }
.icone--linha, .botao .icone, p .icone, li .icone { width: var(--icone-linha); height: var(--icone-linha); }
.icone-circulo {
  display: inline-grid; place-items: center;
  width: var(--icone-circulo); height: var(--icone-circulo); border-radius: 50%;
}

/* Acessibilidade */
.pular-conteudo {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-9)); z-index: 1000;
  padding: var(--space-3) var(--space-4); background: #fff; color: #000; border-radius: var(--space-2);
}
.pular-conteudo:focus { top: var(--space-3); }
:focus-visible { outline: 3px solid var(--focus-ring, currentColor); outline-offset: 2px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a, button, [role="button"], input, select, textarea, summary { min-height: var(--toque-min); }
p a, li a { min-height: 0; }

/* Menu de celular: fechado = fora da tela E fora do teclado (lição: menu fechado recebia foco) */
.menu-celular { visibility: hidden; pointer-events: none; }
.menu-celular[data-aberto="true"] { visibility: visible; pointer-events: auto; }
body[data-menu="true"] { overflow: hidden; }

/* Entrada de seção (main.js adiciona .visivel). Sem JS, tudo aparece. */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* Botão fixo de WhatsApp no celular: aparece em TODAS as páginas depois de rolar (lição: só funcionava na home) */
.whatsapp-fixo {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--space-4); z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 56px; border-radius: 999px; text-decoration: none;
  transform: translateY(calc(100% + var(--space-6))); transition: transform var(--dur-base) var(--ease-out);
}
.whatsapp-fixo[data-visivel="true"] { transform: none; }
@media (min-width: 900px) { .whatsapp-fixo { display: none; } }
/* Reserva o espaço do botão fixo no fim da página, senão ele cobre o último conteúdo (lição: Loredana) */
@media (max-width: 899px) { body:has(.whatsapp-fixo) { padding-bottom: calc(56px + var(--space-6)); } }

/* Caixa de foto real que falta (specs/design.md §0). Nunca pode sobrar sem registro em revisao/pendencias.md. */
.foto-pendente {
  display: grid; place-content: center; gap: var(--space-3);
  width: 100%; max-width: 100%; height: 100%; padding: var(--space-6); text-align: center;
  background: #f4f2f0; border: 2px dashed #b9b2aa; border-radius: inherit; color: #625c55;
}
.foto-pendente .icone { margin-inline: auto; opacity: .55; }
.foto-pendente__titulo { font-weight: 600; line-height: 1.45; color: #231f20; max-width: 34ch; margin-inline: auto; overflow-wrap: anywhere; }
.foto-pendente__meta { font-size: 0.875rem; }

/* Movimento reduzido: desliga tudo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
}