/* ==========================================================================
   Castro Sociedade de Advogados · estilos do site v3.0
   Depende de css/tokens.css (cópia de brand/tokens.css, a fonte de verdade).
   Regras de cor (manual, seção 9):
   - fundo claro: texto só em Marinho, Tinta, Azul Castro ou Ardósia;
   - fundo Marinho: texto só em branco, Névoa ou Horizonte;
   - Horizonte nunca é texto sobre claro nem fundo de texto branco.
   ========================================================================== */

/* ---------------------------------------------------------------- fontes */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fontes/manrope-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fontes/public-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/public-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fontes/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

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

body {
  margin: 0;
  background: var(--castro-branco);
  color: var(--castro-tinta);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--castro-marinho);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}
h2 {
  font-size: var(--text-2xl);
  line-height: 1.2;
}
h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

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

img,
svg,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

a {
  color: var(--castro-azul);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--castro-marinho);
}

:where(ul, ol)[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--castro-azul);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.escuro :focus-visible {
  outline-color: var(--castro-horizonte);
}

::selection {
  background: var(--castro-bruma);
  color: var(--castro-marinho);
}

/* ---------------------------------------------------------------- utilidades */
.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;
}

.pular {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--castro-marinho);
  color: var(--castro-branco);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.pular:focus {
  top: var(--space-4);
  color: var(--castro-branco);
  outline-color: var(--castro-horizonte);
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--estreito {
  width: min(100% - 2 * var(--gutter), 52rem);
  margin-inline: auto;
}

.mono,
.rotulo {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.rotulo {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--castro-azul);
}
.escuro .rotulo {
  color: var(--castro-horizonte);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 60ch;
}

.medida {
  max-width: var(--measure);
}

/* Ardósia sobre Gelo fica em 4,00:1 (só título, manual seção 9).
   Em fundo Gelo o texto secundário passa para Tinta; cards brancos voltam à Ardósia. */
.secundario {
  color: var(--cor-secundaria, var(--castro-ardosia));
}
.secao--gelo {
  --cor-secundaria: var(--castro-tinta);
}
.etapa,
.card,
.formulario,
.fundo-logo,
.painel-amostra,
.amostra {
  --cor-secundaria: var(--castro-ardosia);
}
.escuro .secundario {
  color: var(--castro-nevoa);
}

.destaque {
  color: var(--castro-horizonte);
}

.pilha > * + * {
  margin-top: var(--pilha, var(--space-4));
}

.icone {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--castro-marinho);
}
.escuro .icone {
  color: var(--castro-horizonte);
}

.mt-2 {
  margin-top: var(--space-2);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}

/* ---------------------------------------------------------------- seções */
.secao {
  position: relative;
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.secao--compacta {
  padding-block: clamp(3rem, 2.4rem + 3vw, 5rem);
}
.secao--gelo {
  background: var(--castro-gelo);
}

.escuro {
  background: var(--castro-marinho);
  color: var(--castro-nevoa);
}
.escuro h1,
.escuro h2,
.escuro h3,
.escuro h4 {
  color: var(--castro-branco);
}
.escuro a {
  color: var(--castro-horizonte);
}
.escuro a:hover {
  color: var(--castro-branco);
}

.cabeca-secao {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  max-width: 44rem;
}
.cabeca-secao--linha {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 768px) {
  .cabeca-secao--linha {
    grid-template-columns: minmax(0, 44rem) auto;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------- elemento gráfico */
/* Canto diagonal: triângulo em Horizonte no canto inferior direito, até 1/4 da largura. */
.canto-diagonal {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(25%, var(--canto, 220px));
  aspect-ratio: 1;
  background: var(--castro-horizonte);
  clip-path: var(--diagonal);
  pointer-events: none;
}
.canto-diagonal--sm {
  --canto: 120px;
}
.canto-diagonal--md {
  --canto: 170px;
}

/* A faixa inferior de seções com canto diagonal fica livre de texto:
   o padding inferior é sempre maior que a altura do triângulo. */
.hero:has(> .canto-diagonal) {
  padding-bottom: max(clamp(5rem, 3.5rem + 7vw, 9.5rem), calc(min(25vw, 220px) + 2rem));
}
.hero-interno:has(> .canto-diagonal),
.secao:has(> .canto-diagonal--md) {
  padding-bottom: max(clamp(3.5rem, 2.5rem + 5vw, 6.5rem), calc(min(25vw, 170px) + 2rem));
}
.secao:has(> .canto-diagonal--sm) {
  padding-bottom: max(clamp(4rem, 3rem + 5vw, 7rem), calc(min(25vw, 120px) + 2rem));
}

/* Pauta a 45° subindo para a direita, linhas finas a cada 18 px. Nunca atrás de texto corrido. */
.pauta {
  background-image: repeating-linear-gradient(-45deg, transparent 0 17px, var(--castro-linha) 17px 18px);
}
.secao--gelo .pauta {
  background-image: repeating-linear-gradient(-45deg, transparent 0 17px, var(--castro-nevoa) 17px 18px);
}

/* Faixa de pauta limitada a 1/4 da largura, no lado direito da seção. */
.faixa-pauta {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 25%;
  pointer-events: none;
}

/* Símbolo grande e sutil, cortado pela borda direita. Fica sempre acima do
   canto diagonal: o Horizonte nunca passa por trás da marca. */
.simbolo-fundo {
  position: absolute;
  right: -12%;
  bottom: calc(min(25vw, var(--canto, 220px)) + 1.5rem);
  width: clamp(280px, 46vw, 660px);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}
.simbolo-fundo--8 {
  opacity: 0.08;
}

/* Conteúdo sempre acima dos elementos gráficos da seção. */
.hero > .container,
.hero-interno > .container,
.secao > .container,
.rodape > .container,
.dados > .container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.botao .icone {
  color: currentColor;
  width: 20px;
  height: 20px;
}

/* No claro: Azul Castro com texto branco (5,20:1). */
.botao--primario {
  background: var(--castro-azul);
  color: var(--castro-branco);
}
.botao--primario:hover {
  background: var(--castro-marinho);
  color: var(--castro-branco);
}

/* No escuro: Horizonte com texto Marinho (7,01:1). */
.botao--horizonte,
.escuro .botao--horizonte {
  background: var(--castro-horizonte);
  color: var(--castro-marinho);
}
.botao--horizonte:hover,
.escuro .botao--horizonte:hover {
  background: var(--castro-branco);
  color: var(--castro-marinho);
}

.botao--contorno {
  border-color: var(--castro-marinho);
  color: var(--castro-marinho);
  background: transparent;
}
.botao--contorno:hover {
  background: var(--castro-marinho);
  color: var(--castro-branco);
}

.escuro .botao--contorno,
.botao--contorno-nevoa,
.escuro .botao--contorno-nevoa {
  border-color: var(--castro-nevoa);
  color: var(--castro-branco);
  background: transparent;
}
.escuro .botao--contorno:hover,
.botao--contorno-nevoa:hover,
.escuro .botao--contorno-nevoa:hover {
  border-color: var(--castro-branco);
  background: rgb(255 255 255 / 0.06);
  color: var(--castro-branco);
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.link-seta .icone {
  width: 18px;
  height: 18px;
  color: currentColor;
  transition: translate var(--duration) var(--ease);
}
.link-seta:hover .icone {
  translate: 3px 0;
}

/* ---------------------------------------------------------------- cabeçalho */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--castro-branco);
  border-bottom: 1px solid var(--castro-linha);
}
.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 72px;
}
.logo {
  display: block;
  flex: none;
}
.logo img {
  width: 172px;
  height: auto;
}
/* No cabeçalho e no menu móvel, só o símbolo C. */
.logo img.logo__simbolo {
  width: 38px;
}
@media (min-width: 1024px) {
  .cabecalho__barra {
    min-height: 84px;
  }
  .logo img {
    width: 196px;
  }
  .logo img.logo__simbolo {
    width: 42px;
  }
}

.nav {
  display: none;
}
@media (min-width: 1200px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}
.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav__item {
  position: relative;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  color: var(--castro-marinho);
  font-family: var(--font-display);
  font-size: 0.96875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--castro-azul);
}
.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}
.nav__link .icone {
  width: 16px;
  height: 16px;
  color: currentColor;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  padding: var(--space-2);
  background: var(--castro-branco);
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  translate: 0 4px;
  transition:
    opacity var(--duration) var(--ease),
    translate var(--duration) var(--ease),
    visibility var(--duration);
}
.nav__item:hover > .submenu,
.nav__item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.submenu a {
  display: block;
  padding: 0.625rem 0.875rem;
  color: var(--castro-marinho);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.submenu a:hover {
  background: var(--castro-gelo);
  color: var(--castro-azul);
}
.submenu small {
  display: block;
  color: var(--castro-ardosia);
  font-size: var(--text-sm);
  font-weight: 400;
}

.menu-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-sm);
  background: var(--castro-branco);
  color: var(--castro-marinho);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .menu-botao {
    display: none;
  }
}

/* Painel móvel: Marinho em tela cheia. Sem JS, abre por :target. */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movel:target,
.menu-movel.aberto {
  display: flex;
}
.menu-movel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.menu-movel__topo .logo img {
  width: 38px;
}
.menu-movel .menu-botao {
  background: transparent;
  color: var(--castro-branco);
  border-color: rgb(181 190 201 / 0.4);
}
.menu-movel__lista {
  padding-block: var(--space-8);
  display: grid;
  gap: var(--space-1);
}
.menu-movel__lista a {
  display: block;
  padding: 0.625rem 0;
  color: var(--castro-branco);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}
.menu-movel__lista a[aria-current="page"] {
  color: var(--castro-horizonte);
}
.menu-movel__sub {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid rgb(181 190 201 / 0.3);
}
.menu-movel__sub a {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--castro-nevoa);
}
.menu-movel__rodape {
  margin-top: auto;
  padding-block: var(--space-8);
  border-top: 1px solid rgb(181 190 201 / 0.25);
  display: grid;
  gap: var(--space-4);
}
body.menu-aberto {
  overflow: hidden;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 7vw, 9rem) clamp(5rem, 3.5rem + 7vw, 9.5rem);
}
.hero__conteudo {
  position: relative;
  display: grid;
  gap: var(--space-6);
}
.hero__conteudo > * {
  max-width: 50rem;
}
.hero h1 {
  max-width: 18ch;
}
.hero .lead {
  color: var(--castro-nevoa);
}
.hero .botoes {
  margin-top: var(--space-2);
}

.hero-interno {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}
.hero-interno__conteudo {
  position: relative;
  display: grid;
  gap: var(--space-4);
}
.hero-interno__conteudo > * {
  max-width: 48rem;
}
.hero-interno .lead {
  color: var(--castro-nevoa);
}

/* Trilha de navegação (breadcrumb) */
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trilha li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--castro-nevoa);
}
.trilha a {
  text-decoration: none;
}
.trilha a:hover {
  text-decoration: underline;
}
.trilha [aria-current="page"] {
  color: var(--castro-nevoa);
}

/* ---------------------------------------------------------------- faixa de dados */
.dados {
  border-top: 1px solid rgb(181 190 201 / 0.25);
  padding-block: var(--space-8);
}
.dados__lista {
  display: grid;
  gap: var(--space-6);
  margin-block: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .dados__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}
.dados__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.dados__valor {
  font-family: var(--font-data);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 500;
  color: var(--castro-horizonte);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dados__texto {
  color: var(--castro-nevoa);
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- grades e cards */
.grade {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}
@media (min-width: 768px) {
  .grade--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grade--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grade--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .grade--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .grade--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--castro-branco);
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
}
.card__corpo {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  flex: 1;
  align-content: start;
}
.card__rodape {
  padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.card h3 a {
  color: inherit;
  text-decoration: none;
}
/* Área de clique do card inteiro sem aninhar links. */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}
.card:has(h3 a:hover) {
  border-color: var(--castro-azul);
}
.card:has(h3 a:focus-visible) {
  outline: 2px solid var(--castro-azul);
  outline-offset: 3px;
}
.card h3 a:focus-visible {
  outline: none;
}
.card .link-seta {
  color: var(--castro-azul);
}

.card__ilustracao {
  border-bottom: 1px solid var(--castro-linha);
  background: var(--castro-gelo);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.card__ilustracao svg {
  width: 100%;
  height: auto;
}

/* Cards de artigo: únicos com sombra. */
.card--artigo {
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--castro-ardosia);
}

/* Cards no escuro (404) */
.escuro .card {
  background: rgb(255 255 255 / 0.03);
  border-color: rgb(181 190 201 / 0.28);
}
.escuro .card h3 a {
  color: var(--castro-branco);
}
.escuro .card:has(h3 a:hover) {
  border-color: var(--castro-horizonte);
}
.escuro .card:has(h3 a:focus-visible) {
  outline-color: var(--castro-horizonte);
}
.escuro .card .link-seta {
  color: var(--castro-horizonte);
}

/* ---------------------------------------------------------------- etapas */
.etapas {
  counter-reset: etapa;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .etapas--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .etapas--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.etapa {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--castro-branco);
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
}
.etapa__numero {
  font-family: var(--font-data);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--castro-azul);
}
.etapa__numero::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-top: var(--space-3);
  background: var(--castro-azul);
}

/* Etapas em linha do tempo (página Como atendemos) */
.linha-tempo {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.linha-tempo__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-12);
  position: relative;
}
.linha-tempo__item:last-child {
  padding-bottom: 0;
}
.linha-tempo__item::before {
  content: "";
  position: absolute;
  left: calc(1.75rem - 0.5px);
  top: 3.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--castro-linha);
}
.linha-tempo__item:last-child::before {
  display: none;
}
.linha-tempo__numero {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--castro-marinho);
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-weight: 500;
  color: var(--castro-marinho);
  background: var(--castro-branco);
}
.linha-tempo__corpo {
  display: grid;
  gap: var(--space-3);
  padding-top: 0.75rem;
}

/* ---------------------------------------------------------------- blocos de conteúdo */
.dividido {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .dividido {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .dividido--inverso {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .dividido--inverso > :first-child {
    order: 2;
  }
  .dividido--topo {
    align-items: start;
  }
}

.foto {
  position: relative;
  max-width: 480px;
}
.foto img {
  width: 100%;
  border-radius: var(--radius-md);
}
/* Canto diagonal junto à foto, fora do rosto e do corpo. */
.foto__canto {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 22%;
  aspect-ratio: 1;
  background: var(--castro-horizonte);
  clip-path: var(--diagonal);
}

.lista-check {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-check li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.lista-check .icone {
  margin-top: 0.2em;
  color: var(--castro-azul);
}
.escuro .lista-check .icone {
  color: var(--castro-horizonte);
}

.ficha {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--castro-linha);
}
.ficha > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--castro-linha);
}
@media (min-width: 640px) {
  .ficha > div {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-6);
  }
}
.ficha dt {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cor-secundaria, var(--castro-ardosia));
  padding-top: 0.2em;
}
.ficha dd {
  margin: 0;
  color: var(--castro-marinho);
}

.nota {
  padding: var(--space-4) var(--space-6);
  background: var(--castro-bruma);
  border-radius: var(--radius-md);
  color: var(--castro-marinho);
  font-size: var(--text-sm);
}
.nota--rascunho {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.nota--rascunho .icone {
  color: var(--castro-azul);
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
}

/* Perguntas frequentes (details/summary, sem JS) */
.perguntas {
  border-top: 1px solid var(--castro-linha);
}
.perguntas details {
  border-bottom: 1px solid var(--castro-linha);
}
.perguntas summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--castro-marinho);
  letter-spacing: -0.01em;
}
.perguntas summary::-webkit-details-marker {
  display: none;
}
.perguntas summary .icone {
  transition: rotate var(--duration) var(--ease);
}
.perguntas details[open] summary .icone {
  rotate: 180deg;
}
.perguntas details > div {
  padding-bottom: var(--space-6);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- texto longo */
.texto {
  max-width: var(--measure);
  color: var(--castro-tinta);
}
.texto > * + * {
  margin-top: 1.25em;
}
.texto h2 {
  margin-top: 2.25em;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}
.texto h3 {
  margin-top: 1.75em;
  font-size: var(--text-lg);
}
.texto h2 + *,
.texto h3 + * {
  margin-top: 0.75em;
}
.texto ul,
.texto ol {
  padding-left: 1.25em;
}
.texto li + li {
  margin-top: 0.5em;
}
.texto li::marker {
  color: var(--castro-azul);
}
.texto strong {
  font-weight: 500;
  color: var(--castro-marinho);
}
.texto blockquote {
  margin-inline: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--castro-gelo);
  border-radius: var(--radius-md);
  color: var(--castro-marinho);
}
.texto .lei {
  font-family: var(--font-data);
  font-size: 0.9em;
  color: var(--castro-marinho);
}
.texto table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.texto th,
.texto td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--castro-linha);
  text-align: left;
  vertical-align: top;
}
.texto th {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--castro-ardosia);
}

/* ---------------------------------------------------------------- artigo */
.artigo-layout {
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .artigo-layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--space-16);
    align-items: start;
  }
  .artigo-layout .indice {
    position: sticky;
    top: 7rem;
    order: 2;
  }
}
.indice {
  padding: var(--space-6);
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.indice ol {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.indice a {
  color: var(--castro-marinho);
  text-decoration: none;
}
.indice a:hover {
  color: var(--castro-azul);
  text-decoration: underline;
}
.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--castro-nevoa);
}
.fontes {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--castro-linha);
}
.fontes ol {
  margin: var(--space-4) 0 0;
  padding-left: 1.25em;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.autor {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--castro-marinho);
  color: var(--castro-nevoa);
  border-radius: var(--radius-md);
}
.autor img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-sm);
}
.autor strong {
  color: var(--castro-branco);
  font-weight: 500;
}
.autor p {
  font-size: var(--text-sm);
}

/* Filtro de artigos sem JS: rádios + :has() */
.filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  padding: 0;
  border: 0;
}
.filtro legend {
  margin-bottom: var(--space-3);
  padding: 0;
}
.filtro input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filtro label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-sm);
  color: var(--castro-marinho);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  background: var(--castro-branco);
}
.filtro input:checked + label {
  background: var(--castro-marinho);
  border-color: var(--castro-marinho);
  color: var(--castro-branco);
}
.filtro input:focus-visible + label {
  outline: 2px solid var(--castro-azul);
  outline-offset: 3px;
}
.lista-artigos:has(#f-bancario:checked) .card--artigo:not([data-area="direito-bancario-empresarial"]),
.lista-artigos:has(#f-tributario:checked) .card--artigo:not([data-area="direito-tributario"]),
.lista-artigos:has(#f-empresarial:checked) .card--artigo:not([data-area="direito-empresarial"]) {
  display: none;
}

/* ---------------------------------------------------------------- formulário */
.contato-grade {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
@media (min-width: 960px) {
  .contato-grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}
.canais {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.canais li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.canais .icone {
  margin-top: 0.15em;
}
.canais a {
  text-decoration: none;
}
.canais a:hover {
  text-decoration: underline;
}

.formulario {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  background: var(--castro-branco);
  border-radius: var(--radius-md);
  color: var(--castro-tinta);
}
.secao:not(.escuro) .formulario {
  border: 1px solid var(--castro-linha);
}
.formulario h2,
.formulario h3 {
  color: var(--castro-marinho);
}
.formulario a {
  color: var(--castro-azul);
}
.formulario :focus-visible {
  outline-color: var(--castro-azul);
}
.campos {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .campos--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.campo {
  display: grid;
  gap: 0.375rem;
  align-content: start;
}
.campo label,
.campo legend {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--castro-marinho);
}
.campo .opcional {
  font-weight: 400;
  color: var(--castro-ardosia);
}
.campo input:not([type="checkbox"]),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--castro-ardosia);
  border-radius: var(--radius-sm);
  background: var(--castro-branco);
  color: var(--castro-marinho);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.campo select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041434' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 20px;
}
.campo textarea {
  min-height: 132px;
  resize: vertical;
}
.campo input:not([type="checkbox"]):focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--castro-azul);
  outline-offset: 1px;
  border-color: var(--castro-azul);
}
.campo [aria-invalid="true"] {
  border-color: var(--castro-erro);
}
.campo__erro {
  display: none;
  gap: 0.375rem;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--castro-erro);
}
.campo__erro:not(:empty) {
  display: flex;
}
.campo__ajuda {
  font-size: var(--text-sm);
  color: var(--castro-ardosia);
}

.consentimento {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--castro-tinta);
}
.consentimento input {
  width: 20px;
  height: 20px;
  margin: 0.15em 0 0;
  accent-color: var(--castro-azul);
}

/* Honeypot: fora da tela, fora da ordem de tabulação. */
.campo-mel {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__status {
  display: none;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.formulario__status:not(:empty) {
  display: flex;
}
.formulario__status[data-tipo="sucesso"] {
  background: #e7f3ec;
  color: var(--castro-sucesso);
}
.formulario__status[data-tipo="erro"] {
  background: #fcebea;
  color: var(--castro-erro);
}
.formulario__status .icone {
  color: currentColor;
  width: 20px;
  height: 20px;
}
.formulario__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.formulario__rodape p {
  font-size: var(--text-xs);
  color: var(--castro-ardosia);
  max-width: 34ch;
}
.formulario[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  cursor: progress;
}

/* ---------------------------------------------------------------- rodapé */
.rodape {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  font-size: var(--text-sm);
}
.rodape__grade {
  position: relative;
  display: grid;
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 640px) {
  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .rodape__grade {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  }
}
.rodape__marca {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.rodape__marca .logo img {
  width: 196px;
}
.rodape h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--castro-horizonte);
}
.rodape ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rodape a {
  color: var(--castro-branco);
  text-decoration: none;
}
.rodape a:hover {
  color: var(--castro-horizonte);
  text-decoration: underline;
}
.rodape .rodape__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.rodape__legal {
  position: relative;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid rgb(181 190 201 / 0.25);
  display: grid;
  gap: var(--space-3);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--castro-nevoa);
  padding-right: clamp(0px, 12vw, 160px);
}
.rodape__legal nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

/* ---------------------------------------------------------------- ilustrações */
.ilustracao {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- página /atuacao */
.secao--divisa {
  border-top: 1px solid var(--castro-linha);
}
.atuacao {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 960px) {
  .atuacao {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-12);
  }
}
.mapa-brasil {
  display: block;
  width: 100%;
  height: auto;
}
.mapa-brasil .uf[tabindex] {
  cursor: pointer;
  transition: fill var(--duration) var(--ease);
}
.mapa-brasil .uf.atua:hover,
.mapa-brasil .uf.atua.ativo {
  fill: var(--castro-marinho);
}
.mapa-brasil .uf.sede:hover,
.mapa-brasil .uf.sede.ativo {
  fill: var(--castro-azul);
}
.mapa-brasil .uf[tabindex]:focus {
  outline: none;
}
.mapa-brasil .uf[tabindex]:focus-visible {
  stroke: var(--castro-horizonte);
  stroke-width: 3;
}
.mapa-brasil__rotulos {
  pointer-events: none;
}
/* No celular o mapa fica com cerca de metade do tamanho e as siglas de 10 px ficariam
   ilegíveis: ficam só as cores e o marcador da sede. Legenda e lista vêm logo abaixo. */
@media (max-width: 599px) {
  .mapa-brasil__rotulos > :not(.marcador-sede) {
    display: none;
  }
}
.atuacao__painel {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.atuacao__contagem {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--castro-azul);
}
.atuacao__painel > .secundario {
  margin-top: calc(-1 * var(--space-3));
}
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--castro-tinta);
}
.legenda li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.legenda__cor {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--castro-linha);
}
.legenda__cor--sede {
  background: var(--castro-marinho);
}
.legenda__cor--atua {
  background: var(--castro-azul);
}
.legenda__cor--vazio {
  background: var(--castro-gelo);
}
.atuacao__detalhe {
  padding: var(--space-4);
  background: var(--castro-bruma);
  border-radius: var(--radius-md);
  color: var(--castro-marinho);
}
.atuacao__detalhe-nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}
.atuacao-lista {
  display: grid;
  border-top: 1px solid var(--castro-linha);
  font-size: var(--text-sm);
}
.atuacao-lista li {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--castro-linha);
  color: var(--castro-marinho);
}
.atuacao-lista li.ativo {
  background: var(--castro-bruma);
}
.sede-etiqueta {
  margin-left: var(--space-2);
  padding: 0 0.375rem;
  border: 1px solid var(--castro-marinho);
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.atuacao-tabela th[scope="rowgroup"] {
  padding-top: var(--space-6);
  color: var(--castro-azul);
}
.atuacao-tabela th[scope="row"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--castro-marinho);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chips li {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-sm);
  color: var(--castro-marinho);
  font-size: var(--text-sm);
}
.nota-rodape {
  font-size: 0.8125rem;
  color: var(--castro-ardosia);
  max-width: var(--measure);
}

/* Faixa da home com o mapa em miniatura */
.faixa-atuacao {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.faixa-atuacao__mapa {
  max-width: 280px;
}
@media (min-width: 768px) {
  .faixa-atuacao {
    grid-template-columns: 280px 1fr;
    gap: var(--space-16);
  }
}

/* ---------------------------------------------------------------- página /bio */
/* Página de links do Instagram: coluna de 400 px, uma única ação principal.
   Névoa translúcida sobre Marinho: 70% = 5,27:1 e 66% = 4,82:1 (AA para texto pequeno). */
body.bio {
  --nevoa-70: rgb(181 190 201 / 0.7);
  --nevoa-66: rgb(181 190 201 / 0.66);
  --nevoa-20: rgb(181 190 201 / 0.2);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 56px var(--space-4) calc(min(25vw, 140px) + 1.5rem);
}
.bio__coluna {
  display: grid;
  gap: 32px;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
.bio__topo {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
}
/* Anel fino em Horizonte a 4 px da foto. */
.bio__foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  outline: 2px solid var(--castro-horizonte);
  outline-offset: 4px;
}
.bio__identidade {
  display: grid;
  gap: 6px;
}
.bio__nome {
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
}
.bio__cargo {
  font-size: 0.9375rem;
  color: var(--castro-nevoa);
}
.bio__areas {
  margin-top: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--nevoa-70);
  text-wrap: balance;
}
.bio__acoes {
  display: grid;
  gap: 20px;
}
/* Única ação principal: Horizonte com texto Marinho (7,01:1). */
.bio .bio__principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--castro-horizonte);
  color: var(--castro-marinho);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease);
}
.bio .bio__principal .icone {
  color: var(--castro-marinho);
}
.bio .bio__principal:hover {
  background: var(--castro-branco);
  color: var(--castro-marinho);
}
.bio .bio__principal:focus-visible {
  outline-color: var(--castro-branco);
}
.bio__lista li + li {
  border-top: 1px solid var(--nevoa-20);
}
.bio .bio__lista a {
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  color: var(--castro-branco);
  font-size: 0.9375rem;
  text-decoration: none;
}
.bio__lista .icone {
  width: 20px;
  height: 20px;
  color: var(--castro-nevoa);
}
.bio__lista .bio__seta {
  width: 18px;
  height: 18px;
  transition: translate var(--duration) var(--ease);
}
.bio .bio__lista a:hover,
.bio .bio__lista a:hover .icone {
  color: var(--castro-horizonte);
}
.bio .bio__lista a:hover .bio__seta {
  translate: 3px 0;
}
.bio__redes-bloco {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.bio__registro {
  font-size: 0.6875rem;
  color: var(--nevoa-66);
}
.bio__redes {
  display: flex;
  gap: 28px;
}
.bio .bio__redes a {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  color: var(--castro-nevoa);
}
.bio__redes .icone {
  width: 22px;
  height: 22px;
  color: currentColor;
}
.bio .bio__redes a:hover,
.bio .bio__redes a:focus-visible {
  color: var(--castro-horizonte);
}
.bio .bio__legal {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 0;
  border-top: 0;
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--nevoa-66);
  text-align: center;
  text-wrap: balance;
}
.bio .bio__legal nav {
  margin-top: 6px;
}
.bio .bio__legal nav ul {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}
.bio .bio__legal a {
  font-size: 0.5625rem;
  color: var(--nevoa-66);
}
.bio .bio__legal a:hover {
  color: var(--castro-nevoa);
}
/* Canto diagonal único, discreto (12%), fora da coluna de texto. */
.bio__canto {
  --canto: 140px;
  opacity: 0.12;
}

/* ---------------------------------------------------------------- página /marca */
.amostras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}
.amostra {
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-sm);
}
.amostra__cor {
  height: 88px;
}
.amostra__info {
  padding: var(--space-3);
  display: grid;
  gap: 0.125rem;
}

.amostra--marinho {
  background: var(--castro-marinho);
}
.amostra--azul {
  background: var(--castro-azul);
}
.amostra--horizonte {
  background: var(--castro-horizonte);
}
.amostra--ardosia {
  background: var(--castro-ardosia);
}
.amostra--nevoa {
  background: var(--castro-nevoa);
}
.amostra--gelo {
  background: var(--castro-gelo);
}
.amostra--bruma {
  background: var(--castro-bruma);
}
.amostra--linha {
  background: var(--castro-linha);
}
.amostra--tinta {
  background: var(--castro-tinta);
}
.amostra__info strong {
  color: var(--castro-marinho);
  font-weight: 500;
}
.fundo-logo {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: var(--space-8);
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
}
.fundo-logo img {
  width: 220px;
}
.fundo-logo--branco {
  background: var(--castro-branco);
}
.fundo-logo--gelo {
  background: var(--castro-gelo);
}
.fundo-logo--marinho {
  background: var(--castro-marinho);
  border-color: var(--castro-marinho);
}
.fundo-logo--azul {
  background: var(--castro-azul);
  border-color: var(--castro-azul);
}
.amostra-tipo--h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.amostra-tipo--h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
}
.painel-amostra {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: var(--space-6);
  border: 1px solid var(--castro-linha);
  border-radius: var(--radius-md);
  background: var(--castro-branco);
}
.painel-amostra.escuro {
  background: var(--castro-marinho);
  border-color: var(--castro-marinho);
}
.painel-amostra__etiqueta {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--castro-branco);
  color: var(--castro-marinho);
}

/* ---------------------------------------------------------------- movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- impressão */
@media print {
  .cabecalho,
  .menu-movel,
  .canto-diagonal,
  .simbolo-fundo,
  .formulario,
  .pular {
    display: none !important;
  }
  .escuro {
    background: none;
    color: #000;
  }
  .escuro h1,
  .escuro h2 {
    color: #000;
  }
}

/* ---------------------------------------------------------------- 404 e 500 */
.hero .atalhos {
  max-width: none;
}
.hero .atalhos .card h3 {
  font-size: var(--text-lg);
}