/* Tokens — papéis definidos em docs/04-identidade (paleta.md, decisoes.md) */
:root {
  --fundo: #F7F7F7;
  --texto: #3B3D54;
  --acento: #0A748E;        /* links, H2, botão (fundo) */
  --acento-hover: #3B3D54;
  --sobre-acento: #FFFFFF;  /* texto do botão */
  --faixa: #E8EFEF;         /* #7BB1B3 a 12% sobre o fundo (derivada) */
  --filete: #188F8F;        /* só decoração */
  --disco-foto: #7BB1B3;
  --foco: #0A748E;
  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #3B3D54;
    --texto: #F7F7F7;
    --acento: #9CC6C7;       /* derivada do #7BB1B3 (5,71:1 sobre o fundo) */
    --acento-hover: #F7F7F7;
    --sobre-acento: #3B3D54;
    --faixa: #2F3143;        /* slate escurecido 20% (derivada) */
    --filete: #7BB1B3;
    --foco: #9CC6C7;
  }
}

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fontes/poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fontes/poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fontes/poppins-SemiBold.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.7 var(--fonte);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--acento-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

.pular { position: absolute; left: -999px; top: 0; background: var(--fundo); color: var(--texto); padding: .75rem 1rem; z-index: 20; }
.pular:focus { left: 0; }

.miolo { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.estreito { max-width: 40rem; }

/* Cabeçalho */
.topo { position: relative; z-index: 10; background: var(--fundo); border-bottom: 1px solid color-mix(in srgb, var(--texto) 15%, transparent); }
.topo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-block: .6rem; }
.topo__logo { display: block; width: 14rem; flex: none; }
/* Celular: menu quebra em duas linhas (antes rolava de lado e escondia metade); cabeçalho não fica
   preso no topo para não ocupar a tela — o contato fixo é o botão .fixo. */
.topo__menu { display: flex; flex-wrap: wrap; gap: 0 1.1rem; font-weight: 500; font-size: .9375rem; order: 3; width: 100%; padding-bottom: .25rem; }
.topo__menu a { white-space: nowrap; }
.topo__menu a { color: var(--texto); text-decoration: none; padding-block: .4rem; border-bottom: 2px solid transparent; }
.topo__menu a:hover { color: var(--acento); border-bottom-color: var(--filete); }
.topo__linha .topo__botao { display: none; margin-left: auto; }

@media (min-width: 74rem) {
  html { scroll-padding-top: 6.5rem; }
  .topo { position: sticky; top: 0; }
  .topo__logo { width: 14rem; }
  .topo__menu { order: 0; width: auto; flex-wrap: nowrap; margin-inline: auto; padding: 0; }
  .topo__linha .topo__botao { display: inline-block; margin-left: 0; }
}

/* Botão */
.botao {
  display: inline-block; background: var(--acento); color: var(--sobre-acento);
  font-weight: 500; text-decoration: none; padding: .8rem 1.5rem; border-radius: 999px; line-height: 1.3;
}
.botao:hover { background: var(--acento-hover); color: var(--fundo); }
.fixo { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
@media (min-width: 74rem) { .fixo { display: none; } }

/* Seções */
section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.faixa { background: var(--faixa); }
.rodape { padding-block: 2.5rem 5.5rem; font-size: .9375rem; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 1rem; }
h1 { font-weight: 500; font-size: clamp(1.75rem, 5vw, 2.75rem); letter-spacing: -.01em; }
h2 { font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--acento); }
h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--filete); margin-top: .6rem; }
h3 { font-weight: 600; font-size: 1.125rem; margin-top: 2rem; }
p, ul, ol { margin: 0 0 1.1rem; }
li { margin-bottom: .6rem; }
ol, ul { padding-left: 1.4rem; }
address { font-style: normal; margin-bottom: 1.1rem; }

.abertura { padding-block: clamp(3.5rem, 11vw, 7rem); }
/* SEO: o h1 é nome + profissão (o que se busca); a frase de abertura mantém o visual de título. */
.abertura h1.assinatura { font-size: inherit; line-height: inherit; font-weight: 500; letter-spacing: .02em; margin-bottom: 1rem; }
.frase { font-weight: 500; font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 1rem; }
.destaque { font-size: 1.1875rem; margin-bottom: 1.75rem; }
.fecho { margin-top: 2rem; font-weight: 500; }

/* Quem sou eu */
.quem { display: grid; gap: 2rem; align-items: center; }
.quem__foto { width: min(70%, 18rem); aspect-ratio: 1; border-radius: 50%; background: var(--disco-foto); overflow: hidden; margin-inline: auto; }
.quem__texto { max-width: 40rem; }
@media (min-width: 52rem) {
  .quem { grid-template-columns: 18rem 1fr; gap: 4rem; }
  .quem__foto { width: 100%; }
}

/* Perguntas */
details { border-bottom: 1px solid color-mix(in srgb, var(--texto) 25%, transparent); padding-block: .25rem; }
summary { cursor: pointer; font-weight: 500; padding: .75rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--acento); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
details[open] > summary::after { content: "–"; }
details > p { margin-top: .25rem; }

/* Contato */
.contato { max-width: 56rem; }
.contato > p { max-width: 40rem; }
.contato__grade { display: grid; gap: .5rem 3rem; margin: 2rem 0; }
.contato__grade h3 { margin-top: 0; }
@media (min-width: 56rem) { .contato__grade { grid-template-columns: max-content max-content 1fr; } }

.privacidade { margin-top: 1.5rem; }
.privacidade summary { font-weight: 400; text-decoration: underline; text-underline-offset: .2em; color: var(--acento); }