@import url("/assets/css/tokens.css");

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--corpo);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* O atributo "hidden" não vale para SVG sem esta regra (é assim nos navegadores). */
svg[hidden] { display: none; }
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 var(--respiro-s);
  color: var(--texto);
}
h1 { font-size: var(--escala-1); }
h2 { font-size: var(--escala-2); }
h3 { font-size: var(--escala-3); }
h4 { font-size: var(--escala-4); font-family: var(--fonte-corpo); font-weight: 600; }
p  { margin: 0 0 var(--respiro-s); }
a  { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--terracota); }
hr { border: 0; height: 1px; background: var(--linha); margin: var(--respiro-m) 0; }
blockquote {
  margin: var(--respiro-m) 0;
  padding-left: var(--respiro-s);
  border-left: 2px solid var(--dourado);
  font-family: var(--fonte-titulo);
  font-size: var(--escala-3);
  font-style: italic;
  color: var(--grafite-suave);
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--papel-quente);
  padding: .15em .4em;
  border-radius: var(--raio-s);
}
:focus-visible {
  outline: 2px solid var(--dourado-texto);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Utilidades ---------- */
.pagina { max-width: var(--largura-pagina); margin: 0 auto; padding: 0 var(--respiro-s); }
.prosa  { max-width: var(--largura-texto); }
.prosa img { border-radius: var(--raio-m); margin: var(--respiro-m) 0; }
.centro { margin-left: auto; margin-right: auto; }
.rotulo {
  font-size: var(--rotulo);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--grafite-suave);
  font-weight: 500;
  margin: 0 0 var(--respiro-xs);
}
.so-leitor-tela {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--grafite); color: var(--papel);
  padding: .75rem 1rem; border-radius: 0 0 var(--raio-s) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--botao-fundo); color: var(--botao-texto);
  font-family: var(--fonte-corpo); font-size: var(--corpo); font-weight: 500;
  padding: .85rem 1.6rem; border: 1px solid var(--botao-fundo); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:hover { background: #46423a; border-color: #46423a; color: var(--papel); transform: translateY(-1px); }
.botao--contorno { background: transparent; color: var(--dourado-texto); border-color: var(--dourado); }
.botao--contorno:hover { background: var(--papel-quente); color: var(--dourado-texto); }
.botao[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  position: sticky; top: 0; z-index: 20;
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between; gap: var(--respiro-s);
  max-width: var(--largura-pagina); margin: 0 auto; padding: .8rem var(--respiro-s);
  position: relative;
}
.marca {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--fonte-titulo); font-size: 1.2rem; letter-spacing: .04em;
  color: var(--texto); text-decoration: none; line-height: 1.1;
}
.marca svg { flex: none; }
.menu-alternar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid var(--linha);
  border-radius: 999px; cursor: pointer; color: var(--texto);
}
.navegacao ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; }
.navegacao a {
  display: block; padding: .6rem .2rem; color: var(--texto); text-decoration: none;
  font-size: var(--miudo); letter-spacing: .12em; text-transform: uppercase;
}
.navegacao a:hover, .navegacao a[aria-current="page"] { color: var(--dourado-texto); }
.navegacao a[aria-current="page"] { font-weight: 600; }
.navegacao {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papel-fundo); border-bottom: 1px solid var(--linha);
  padding: var(--respiro-s); box-shadow: var(--sombra-suave);
}
.navegacao[hidden] { display: none; }
@media (min-width: 860px) {
  .menu-alternar { display: none; }
  .navegacao {
    position: static; background: none; border: 0; padding: 0; box-shadow: none;
  }
  .navegacao[hidden] { display: block; }
  .navegacao ul { flex-direction: row; gap: var(--respiro-m); align-items: center; }
}

/* ---------- Seções ---------- */
.secao { padding: var(--respiro-g) 0; }
.secao--quente { background: var(--papel-quente); }
.secao__cabeca { max-width: var(--largura-texto); margin-bottom: var(--respiro-m); }

/* ---------- Herói / capa ---------- */
.heroi { display: grid; gap: var(--respiro-m); padding: var(--respiro-g) 0; align-items: center; }
.heroi__frase {
  font-family: var(--fonte-titulo); font-style: italic;
  font-size: var(--escala-3); color: var(--grafite-suave);
  margin: 0 0 var(--respiro-m);
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--respiro-s); margin-top: var(--respiro-m); }
.heroi__capa {
  border-radius: var(--raio-m);
  box-shadow: 0 2px 4px rgba(51,48,43,.08), 0 24px 60px rgba(51,48,43,.16);
  max-width: 340px; width: 100%; justify-self: center;
}
.heroi__capa--vazia {
  aspect-ratio: 2 / 3; display: grid; place-items: center; text-align: center;
  background: var(--papel-quente); border: 1px dashed var(--dourado);
  color: var(--grafite-suave); font-size: var(--miudo); padding: var(--respiro-m);
  box-shadow: none;
}
@media (min-width: 860px) {
  .heroi { grid-template-columns: 1.1fr .9fr; gap: var(--respiro-g); padding: var(--respiro-xg) 0; }
  .heroi__capa { max-width: 400px; }
}

/* ---------- Ornamentos ---------- */
.divisor {
  display: flex; align-items: center; justify-content: center; gap: var(--respiro-s);
  color: var(--dourado); margin: var(--respiro-g) 0;
}
.divisor::before, .divisor::after {
  content: ""; height: 1px; background: var(--linha); flex: 1; max-width: 8rem;
}

/* ---------- Cartões ---------- */
.grade { display: grid; gap: var(--respiro-m); }
@media (min-width: 700px) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } }
.cartao {
  background: var(--papel-fundo); border: 1px solid var(--linha);
  border-radius: var(--raio-m); padding: var(--respiro-m);
  box-shadow: var(--sombra-suave);
}
.cartao h3 { margin-bottom: .35rem; }
.cartao__meta { font-size: var(--miudo); color: var(--grafite-suave); }
.cartao--link {
  text-decoration: none; color: inherit; display: block;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao--link:hover {
  transform: translateY(-2px); color: inherit;
  box-shadow: 0 2px 4px rgba(51,48,43,.06), 0 16px 36px rgba(51,48,43,.1);
}

/* ---------- Formulários ---------- */
.campo { display: block; margin-bottom: var(--respiro-s); }
.campo > span { display: block; font-size: var(--miudo); font-weight: 500; margin-bottom: .35rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="file"], select, textarea {
  width: 100%; font-family: var(--fonte-corpo); font-size: var(--corpo);
  color: var(--texto); background: var(--papel-fundo);
  border: 1px solid var(--linha); border-radius: var(--raio-s);
  padding: .75rem .9rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--dourado); }
.consentimento {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: var(--miudo); color: var(--grafite-suave); margin: var(--respiro-s) 0;
}
.consentimento input {
  margin-top: .28rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--dourado-texto);
}
.recado { border-radius: var(--raio-s); padding: .8rem 1rem; font-size: var(--miudo); margin: var(--respiro-s) 0; }
.recado--erro { background: #F6E2D8; color: #7A2E12; border: 1px solid #E0B8A4; }
.recado--ok   { background: #E4EADA; color: #3B4A2B; border: 1px solid #BFCBA8; }
.recado[hidden] { display: none; }

/* ---------- Rodapé ---------- */
.rodape {
  border-top: 1px solid var(--linha); background: var(--papel-quente);
  padding: var(--respiro-g) 0 var(--respiro-m); margin-top: var(--respiro-g);
  font-size: var(--miudo); color: var(--grafite-suave);
}
.rodape a { color: var(--dourado-texto); }
.rodape__grade { display: grid; gap: var(--respiro-m); }
@media (min-width: 760px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .4rem; }
.rodape__fim { margin-top: var(--respiro-m); padding-top: var(--respiro-s); border-top: 1px solid var(--linha); }

/* ---------- Dobras da página inicial ---------- */
.dobra { display: grid; gap: var(--respiro-m); align-items: center; }
@media (min-width: 860px) {
  .dobra { grid-template-columns: .9fr 1.1fr; gap: var(--respiro-g); }
  .dobra--invertida { grid-template-columns: .8fr 1.2fr; }
}
.dobra__imagem {
  border-radius: var(--raio-m);
  box-shadow: 0 2px 4px rgba(51,48,43,.08), 0 24px 60px rgba(51,48,43,.16);
  max-width: 300px; width: 100%; justify-self: center;
}

/* ---------- Retrato da autora ---------- */
.retrato {
  border-radius: var(--raio-g);
  box-shadow: 0 2px 4px rgba(51,48,43,.06), 0 20px 48px rgba(51,48,43,.14);
  max-width: 340px; width: 100%; justify-self: center;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.retrato--vazio {
  display: grid; place-items: center; text-align: center;
  background: var(--papel-quente); border: 1px dashed var(--dourado);
  color: var(--grafite-suave); font-size: var(--miudo); padding: var(--respiro-m);
  box-shadow: none;
}
@media (min-width: 860px) { .retrato { max-width: 400px; } }