/* Laboratório Adelar · tokens em DESIGN.md */

@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley-normal.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley-italic.woff2") format("woff2");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --areia: oklch(0.882 0.040 78);
  --areia-funda: oklch(0.845 0.048 76);
  --papel: oklch(0.935 0.024 80);
  --linha: oklch(0.78 0.035 75);
  --tinta: oklch(0.285 0.008 60);
  --tinta-suave: oklch(0.42 0.012 60);
  --grafite: oklch(0.455 0.004 265);
  --cinza: oklch(0.648 0.003 265);
  --cobre: oklch(0.624 0.092 48);
  --cobre-texto: oklch(0.47 0.095 45);
  --cobre-claro: oklch(0.74 0.085 55);
  --noite: oklch(0.255 0.006 60);
  --noite-linha: oklch(0.36 0.008 60);
  --areia-sobre-noite: oklch(0.90 0.030 78);

  --serifa: "Besley", "Georgia", "Times New Roman", serif;
  --sans: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --t-0: 0.875rem;
  --t-1: 1.0625rem;
  --t-2: 1.3125rem;
  --t-3: 1.75rem;
  --t-4: clamp(2.1rem, 1.35rem + 3vw, 3.25rem);
  --t-5: clamp(2.45rem, 1.3rem + 4.2vw, 4.35rem);

  --margem: clamp(20px, 4vw, 48px);
  --largura: 1200px;
  --secao: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

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

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

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-1);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serifa);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--cobre-texto); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { display: block; max-width: 100%; }
dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
strong { font-weight: 700; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular {
  position: absolute;
  left: var(--margem);
  top: -100px;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--noite);
  color: var(--areia-sobre-noite);
  font-weight: 600;
}
.pular:focus { top: 0.75rem; }

/* ---------- botões ---------- */

.ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.8rem 1.4rem 0.8rem 1.15rem;
  background: var(--noite);
  color: var(--areia-sobre-noite);
  font-family: var(--sans);
  font-weight: 650;
  font-size: var(--t-1);
  line-height: 1.2;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.botao .ico { color: var(--cobre-claro); }
.botao:hover { background: oklch(0.33 0.012 55); }
.botao:active { transform: translateY(1px); }

.botao-claro { background: var(--areia); color: var(--tinta); }
.botao-claro .ico { color: var(--cobre-texto); }
.botao-claro:hover { background: var(--papel); }

.link-seta {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--cobre);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  padding: 0.6rem 0.2rem;
}
.link-seta::after { content: " \2193"; color: var(--cobre-texto); }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.acoes-nota { color: var(--tinta-suave); font-size: var(--t-0); }

/* ---------- topo ---------- */

.topo-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1.1rem var(--margem);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.topo-marca img { height: 46px; width: auto; }
.topo-nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.topo-nav a {
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}
.topo-nav a:hover { border-bottom-color: var(--cobre); }
.topo-whats {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--tinta);
  border-radius: 3px;
  color: var(--tinta);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
}
.topo-whats .ico { color: var(--cobre-texto); }
.topo-whats:hover { background: var(--papel); }

@media (max-width: 900px) {
  .topo-nav { display: none; }
  .topo-whats { margin-left: auto; }
  .topo-marca img { height: 38px; }
}
@media (max-width: 400px) {
  .topo-dentro { gap: 0.75rem; }
  .topo-marca img { height: 34px; }
  .topo-whats { padding: 0.5rem 0.75rem; }
}

/* ---------- abertura ---------- */

.abertura {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) var(--margem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.assinatura {
  font-size: var(--t-0);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1.25rem;
}
.abertura h1 {
  font-size: var(--t-5);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 15ch;
}
.abertura h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--cobre-texto);
}
.abertura-lead {
  font-size: var(--t-2);
  line-height: 1.5;
  max-width: 34ch;
  margin: 1.5rem 0 2rem;
}
.abertura-mapa { margin: 0 calc(var(--margem) * -1); }
.abertura-mapa figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  padding: 0.75rem var(--margem) 0;
  font-size: var(--t-0);
  color: var(--tinta-suave);
}
.legenda-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 1rem; }
.legenda-ponto, .legenda-sede {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cobre);
}
.legenda-sede {
  background: var(--tinta);
  box-shadow: inset 0 0 0 3px var(--areia), 0 0 0 2px var(--tinta);
  width: 12px; height: 12px;
}

@media (min-width: 1000px) {
  .abertura {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 3rem;
  }
  .abertura-mapa { margin: 0; }
  .abertura-mapa figcaption { padding-left: 0; }
}

/* mapa */
.mapa { width: 100%; height: auto; overflow: hidden; }
.mapa-outros { fill: none; stroke: var(--linha); stroke-width: 1; stroke-linejoin: round; }
.mapa-ativos { fill: var(--areia-funda); stroke: var(--cinza); stroke-width: 1; stroke-linejoin: round; }
.mapa-uf text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  fill: var(--tinta-suave);
}
.mapa-pontos circle {
  fill: var(--cobre);
  stroke: var(--areia);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: pousar 0.55s var(--ease) both;
  animation-delay: calc(var(--d) + 250ms);
}
.mapa-sede circle { fill: var(--areia); stroke: var(--tinta); stroke-width: 2.4; }
.mapa-sede circle + circle { fill: var(--tinta); stroke: none; }
.mapa-sede text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  fill: var(--tinta);
  paint-order: stroke;
  stroke: var(--areia-funda);
  stroke-width: 5px;
  stroke-linejoin: round;
}
@media (max-width: 640px) {
  .mapa-pontos circle { r: 7.5; stroke-width: 2; }
  .mapa-uf text { font-size: 20px; }
  .mapa-sede text { font-size: 24px; stroke-width: 7px; }
  .mapa-sede circle { r: 13; stroke-width: 3.5; }
  .mapa-sede circle + circle { r: 5; }
}
@keyframes pousar {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-pontos circle { animation: none; }
}

/* ---------- ficha ---------- */

.ficha {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}
.ficha-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.75rem;
}
.ficha-cabeca h2 {
  font-size: var(--t-2);
  font-style: italic;
  font-weight: 600;
}
.ficha-cabeca p { font-size: var(--t-0); color: var(--tinta-suave); }
.ficha-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--papel);
  border: 1.5px solid var(--tinta);
}
.ficha-grade > div {
  padding: 0.9rem 1rem 1.05rem;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.ficha-grade > div:nth-child(2n) { border-right: 0; }
.ficha-grade > div:nth-last-child(-n + 2) { border-bottom: 0; }
.ficha-grade dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 0.3rem;
}
.ficha-grade dd {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.25;
  font-variant-numeric: lining-nums tabular-nums;
}
@media (max-width: 599px) {
  .ficha-grade { grid-template-columns: minmax(0, 1fr); }
  .ficha-grade > div {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.75rem 0.9rem;
    border-right: 0;
  }
  .ficha-grade > div:nth-last-child(2) { border-bottom: 1px solid var(--linha); }
  .ficha-grade dt { margin: 0; }
  .ficha-grade dd { font-size: 1.05rem; }
}
@media (min-width: 900px) {
  .ficha-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ficha-grade > div { padding: 1.1rem 1.35rem 1.3rem; }
  .ficha-grade > div:nth-child(2n) { border-right: 1px solid var(--linha); }
  .ficha-grade > div:nth-child(4n) { border-right: 0; }
  .ficha-grade > div:nth-last-child(-n + 4) { border-bottom: 0; }
}

/* ---------- seções ---------- */

.secao-cabeca h2,
.onde-cabeca h2,
.historia-texto h2,
.dentistas-texto h2,
.faq h2 {
  font-size: var(--t-4);
  letter-spacing: -0.01em;
}
.secao-cabeca p { margin-top: 1rem; font-size: var(--t-2); color: var(--tinta-suave); max-width: 26ch; }

/* prefeituras */
.prefeituras {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: 2.5rem;
}
.prefeituras-corpo { display: grid; gap: 2.75rem; }
.formatos { display: grid; gap: 1rem; }
.formato {
  border: 1.5px solid var(--tinta);
  padding: 1.4rem 1.4rem 1.6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
  align-items: baseline;
}
.formato-n {
  grid-row: span 2;
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.8;
  color: var(--cobre-texto);
}
.formato h3 { font-size: var(--t-3); margin-bottom: 0.5rem; }
.formato p:not(.formato-n) { color: var(--tinta); max-width: 46ch; }
.formato + .formato { background: var(--papel); }

.detalhes > div {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linha);
}
.detalhes > div:last-child { border-bottom: 1px solid var(--linha); }
.detalhes dt { font-family: var(--serifa); font-weight: 700; font-size: 1.15rem; }
.detalhes dd { max-width: 60ch; }

@media (min-width: 760px) {
  .formatos { grid-template-columns: 1fr 1fr; }
  .detalhes > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; }
}
@media (min-width: 1000px) {
  .prefeituras { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
  .secao-cabeca { position: sticky; top: 2rem; align-self: start; }
}

/* onde estamos */
.onde {
  background: var(--noite);
  color: var(--areia-sobre-noite);
}
.onde-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: 3rem;
}
.onde-cabeca { display: grid; gap: 1.1rem; }
.onde-cabeca p { font-size: var(--t-2); line-height: 1.5; max-width: 38ch; color: var(--areia-sobre-noite); }
.onde-cabeca strong { color: var(--cobre-claro); font-weight: 700; }
.onde :focus-visible { outline-color: var(--cobre-claro); }

.ufs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem 2rem;
}
.uf-bloco h3 {
  font-size: var(--t-3);
  font-weight: 600;
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--noite-linha);
}
.uf-conta {
  font-family: var(--sans);
  font-size: var(--t-0);
  font-weight: 700;
  color: var(--noite);
  background: var(--cobre-claro);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.35rem;
  line-height: 1.4;
  display: inline-block;
  vertical-align: 0.2em;
  font-variant-numeric: tabular-nums;
}
.uf-bloco ul { columns: 8.4rem auto; column-gap: 1.25rem; }
.uf-bloco li {
  break-inside: avoid;
  padding: 0.28rem 0 0.28rem 1rem;
  position: relative;
  line-height: 1.35;
}
.uf-bloco li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cobre-claro);
}
@media (min-width: 760px) {
  .ufs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uf-bloco:nth-child(-n + 2) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .onde-dentro { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
  .onde-cabeca { align-self: start; position: sticky; top: 2rem; }
  .ufs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uf-bloco ul { columns: 11rem auto; }
  .uf-bloco:nth-child(n + 3) ul { columns: 1; }
  .uf-bloco:nth-child(n + 3) h3 { font-size: 1.35rem; }
}

/* história */
.historia {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  gap: 2rem 3rem;
}
.historia-ano {
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(5.5rem, 3rem + 10vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--cobre-texto);
}
.historia-texto { display: grid; gap: 1.4rem; align-content: start; }
.historia-texto > p { max-width: 58ch; }
.linha-tempo {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}
.linha-tempo li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-top: 0.9rem;
  border-top: 1.5px solid var(--tinta);
}
.lt-ano {
  font-family: var(--serifa);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--cobre-texto);
  font-variant-numeric: lining-nums;
}
.valores {
  border-top: 1.5px solid var(--tinta);
  padding-top: 1.25rem;
}
.valores h3 {
  font-family: var(--sans);
  font-size: var(--t-1);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.valores ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.3;
}
@media (max-width: 759px) {
  .valores ul { flex-direction: column; }
}
@media (min-width: 760px) {
.valores li:not(:last-child)::after {
  content: "·";
  font-style: normal;
  color: var(--cobre);
  margin: 0 0.45em;
}
}
@media (min-width: 1000px) {
  .historia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .historia-ano { grid-row: span 1; align-self: start; padding-top: 0.5rem; }
  .linha-tempo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .linha-tempo li { grid-template-columns: 1fr; gap: 0.35rem; }
  .valores { grid-column: 1 / -1; padding-top: 1.75rem; }
}

/* dentistas */
.dentistas {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem) var(--secao);
  display: grid;
  gap: 2.5rem 3rem;
}
.dentistas-texto { display: grid; gap: 1.1rem; align-content: start; }
.dentistas-texto > p { max-width: 46ch; }
.dentistas-texto .acoes { margin-top: 0.75rem; }
.servicos {
  align-self: start;
  background: var(--papel);
  border: 1.5px solid var(--tinta);
}
.servicos > div {
  display: grid;
  gap: 0.2rem;
  padding: 1.15rem 1.4rem;
}
.servicos > div + div { border-top: 1px solid var(--linha); }
.servicos dt { font-family: var(--serifa); font-weight: 700; font-size: var(--t-2); }
.servicos dd { color: var(--tinta-suave); }
@media (min-width: 760px) {
  .servicos > div { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: baseline; }
}
@media (min-width: 1000px) {
  .dentistas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* dúvidas */
.faq {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem) var(--secao);
  display: grid;
  gap: 2rem 3rem;
}
.faq-lista { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--serifa);
  font-weight: 600;
  font-size: var(--t-2);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cobre-texto);
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--cobre-texto); }
.faq details p { padding: 0 2.5rem 1.4rem 0; max-width: 62ch; }
@media (min-width: 1000px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* rodapé */
.rodape {
  background: var(--noite);
  color: var(--areia-sobre-noite);
}
.rodape a { color: var(--cobre-claro); }
.rodape .botao-claro { color: var(--tinta); }
.rodape :focus-visible { outline-color: var(--cobre-claro); }
.rodape-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--margem) 2.5rem;
  display: grid;
  gap: 2.75rem;
}
.rodape-marca { display: flex; align-items: center; gap: 1.1rem; }
.rodape-marca img { width: 84px; height: auto; }
.rodape-marca p { display: grid; line-height: 1.35; color: oklch(0.80 0.025 78); }
.rodape-marca strong {
  font-family: var(--serifa);
  font-size: var(--t-2);
  font-weight: 700;
  color: var(--areia-sobre-noite);
}
.rodape-contato { display: grid; gap: 1.5rem; justify-items: start; }
.rodape-contato h2 { font-size: var(--t-3); }
.rodape-lista { display: grid; gap: 1rem; }
.rodape-lista li { display: grid; gap: 0.1rem; }
.rodape-lista span { font-size: var(--t-0); color: oklch(0.78 0.02 78); font-weight: 600; }
.rodape-legal {
  display: grid;
  gap: 0.35rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--noite-linha);
  font-size: var(--t-0);
  color: oklch(0.80 0.02 78);
}
@media (min-width: 900px) {
  .rodape-dentro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; }
  .rodape-marca { align-self: start; }
  .rodape-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
}

/* páginas de texto (privacidade, 404) */
.pagina {
  max-width: calc(68ch + 2 * var(--margem));
  margin: 0 auto;
  padding: clamp(2rem, 1rem + 4vw, 4rem) var(--margem) var(--secao);
}
.pagina h1 { font-size: var(--t-4); margin-bottom: 0.75rem; }
.pagina h2 { font-size: var(--t-2); margin: 2.25rem 0 0.6rem; }
.pagina p + p { margin-top: 0.9rem; }
.pagina-data { color: var(--tinta-suave); font-size: var(--t-0); }
.pagina-voltar { margin-top: 3rem; }
.link-voltar { font-weight: 600; }
.pagina-codigo {
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  line-height: 0.9;
  color: var(--cobre-texto);
  margin-bottom: 1rem;
}
.pagina-404 .acoes { margin-top: 2rem; }
.link-whats::after { content: none; }
.rodape-curto .rodape-dentro { padding-top: 2rem; }
.rodape-curto .rodape-legal { border-top: 0; padding-top: 0; }

/* lugares de foto (fotos reais chegam depois; ver DESIGN.md) */
.foto { margin: 0; }
.foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--papel);
}
.foto--larga img { aspect-ratio: 3 / 2; }
.foto figcaption { font-size: var(--t-0); color: var(--tinta-suave); padding-top: 0.5rem; }