/* ==========================================================================
   PCM Advogados, protótipo de Home
   Tokens, componentes e movimento. Um easing só, três durações.

   Revisão pós-reunião de 20/08: a cliente pediu mais contraste, dois tons de
   azul, nada de creme, nada de preto e letra maior. Os tokens abaixo carregam
   essa decisão, agora com o marinho mais saturado, a pedido dela.
   ========================================================================== */

:root {
  /* Azul marinho da mesma família, mais saturado. O 282 C original lia
     quase como carvão; este tom mostra o azul e aumenta o intervalo entre
     os degraus, o gelo e o fendi. */
  --azul-950: #011428;
  --azul-900: #021c40;
  --azul: #042c68;
  --azul-800: #0a3d86;

  /* Segundo azul, mais cromático. Continua carregando texto pequeno. */
  --azul-vivo: #1256c2;    /* 6.7:1 no branco */
  --azul-realce: #1a6ad8;  /* 5.1:1 no branco, hover e estado ativo */
  --azul-claro: #8bbaf8;   /* sobre o marinho, versalete e nota */
  --azul-medio: #2f7ad4;   /* sigla e marca d'água sobre gelo */

  /* Claros frios, puxados para o mesmo azul. */
  --gelo: #e6f0fc;
  --gelo-fundo: #d2e2f7;

  /* Fendi Pantone 7530 C. Só fio e versalete. Sobre branco rende 2.5:1,
     então nunca vira corpo de texto e nunca preenche botão. O versalete
     sobre claro usa o fendi escurecido, que chega a 4.9:1. */
  --fendi: #a39382;
  --fendi-claro: #cfc4b7;
  --fendi-texto: #7e6e5d;

  --branco: #ffffff;
  /* Tinta com marinho dentro. Preto puro estava na lista de rejeições. */
  --tinta: #122848;
  --tinta-media: #3a5474;

  --raio: 2px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 200ms;
  --dur-2: 360ms;
  --dur-3: 700ms;

  --largura: 1260px;
  --gutter: clamp(20px, 5vw, 64px);
  --altura-cabecalho: 76px;

  --serif: "EB Garamond", "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* Segunda versão de paleta, o marinho Pantone 282 C da papelaria.
   O azul vivo permanece o padrão. A Patrícia escolhe entre as duas. */
html[data-tema="identidade"] {
  --azul-950: #010c18;
  --azul-900: #02101f;
  --azul: #041e42;
  --azul-800: #0a2b57;
  --azul-vivo: #1b4f96;
  --azul-realce: #2563b0;
  --azul-claro: #8ba3c4;
  --azul-medio: #3d6aa3;
  --gelo: #eef2f7;
  --gelo-fundo: #dfe6ef;
}

@media (min-width: 1024px) {
  :root { --altura-cabecalho: 96px; }
}

/* --------------------------------------------------------------- base --- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--azul-realce);
  outline-offset: 3px;
  border-radius: var(--raio);
}
.secao--azul :focus-visible,
.hero :focus-visible,
.rodape :focus-visible,
.destaque :focus-visible { outline-color: var(--fendi-claro); }

.pular {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 320;
  transform: translateY(-140%);
  background: var(--branco);
  color: var(--azul);
  padding: 12px 18px;
  border-radius: var(--raio);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: transform var(--dur-1) var(--ease-standard);
}
.pular:focus { transform: translateY(12px); }

/* ------------------------------------------------------------ tipografia */

.titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.4rem + 2.9vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--azul);
  text-wrap: balance;
}
.titulo--claro { color: var(--branco); }

.rotulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--azul-vivo);
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
/* Sobre azul o fendi rende 5.6:1 e pode carregar versalete. Sobre claro
   fica restrito a fio, por isso o rótulo em fundo claro usa o azul alto. */
.rotulo--claro { color: var(--fendi-claro); }

.rotulo__numero {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--fendi-texto);
  padding-right: 12px;
  border-right: 1px solid var(--fendi);
}
.rotulo--claro .rotulo__numero { color: var(--fendi); border-right-color: var(--fendi); }

.paragrafo {
  font-size: 1.1875rem;
  line-height: 1.68;
  color: var(--tinta-media);
  max-width: 56ch;
}
.paragrafo + .paragrafo { margin-top: 1.1em; }
.paragrafo--destaque {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.56;
  color: var(--tinta);
}
.paragrafo--claro { color: rgba(255, 255, 255, 0.8); }

.elo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--azul-vivo);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--azul-claro);
  transition: gap var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard);
}
/* Estende a área de toque sem mexer no desenho do sublinhado. */
.elo::after { content: ""; position: absolute; inset: -9px -8px; }
.elo svg { flex: none; transition: transform var(--dur-2) var(--ease-standard); }
.elo:hover { gap: 18px; color: var(--azul-realce); border-color: var(--azul-realce); }
.elo:hover svg { transform: translateX(3px); }

.elo--claro { color: var(--branco); border-bottom-color: var(--fendi); }
.elo--claro:hover { color: var(--branco); border-bottom-color: var(--branco); }

/* ---------------------------------------------------------------- botão --- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--azul);
  color: var(--branco);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard);
}
/* O hover sobe para o azul alto, não desce para o escuro. Foi o comentário
   dela ao ver a referência: o tom claro é que chama. */
.botao:hover { background: var(--azul-vivo); }

.botao--claro { background: var(--branco); color: var(--azul); }
.botao--claro:hover { background: var(--gelo-fundo); color: var(--azul-vivo); }

.botao--vazado-claro {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.42);
}
.botao--vazado-claro:hover {
  background: rgba(139, 186, 248, 0.18);
  border-color: var(--branco);
}

.botao--compacto { min-height: 46px; padding: 11px 22px; font-size: 0.9375rem; }
.botao--largo { width: 100%; }

/* ------------------------------------------------------------- estrutura */

.secao { position: relative; padding: clamp(66px, 9vw, 136px) 0; }
.secao--branca { background: var(--branco); }
.secao--gelo { background: var(--gelo); }
.secao--azul { background: var(--azul); color: var(--branco); overflow: hidden; }

.secao__interior {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

.secao__cabecalho { margin-bottom: clamp(40px, 5vw, 72px); }
.secao__cabecalho--estreito .titulo { max-width: 22ch; }
.secao__cabecalho--estreito .paragrafo { margin-top: 24px; }

.secao__nota {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--tinta-media);
  max-width: 62ch;
}
.secao__nota--clara { color: rgba(255, 255, 255, 0.66); }

.secao__interior--duas { display: grid; gap: clamp(36px, 5vw, 84px); }

@media (min-width: 900px) {
  .secao__interior--duas {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .secao__coluna-titulo { position: sticky; top: calc(var(--altura-cabecalho) + 48px); }
}

/* Motivo da casa: o ritmo de uma colunata, em fio fendi. */
.colunata {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    rgba(163, 147, 130, 0.26) 0 1px,
    transparent 1px var(--passo, 104px)
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
}
.colunata--miniatura { --passo: 26px; }

/* ---------------------------------------------- cortina de abertura ----- */
/* A logo já está no centro. A tarja branca chega pela esquerda, para para
   a pessoa absorver a marca, e o pano abre do centro para as bordas.
   Roda em toda visita. CSS com fill-mode forwards, para sair mesmo se o
   JS falhar. */

.cortina { display: none; }

html[data-cortina="sim"] .cortina {
  display: grid;
  grid-template-rows: 1fr 1fr;
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: var(--azul);
  animation: cortina-fundo 3200ms var(--ease-standard) forwards;
}
html[data-cortina="feita"] .cortina { display: none; }

.cortina__painel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cortina__painel--cima {
  justify-content: flex-end;
  animation: cortina-painel-cima 3200ms var(--ease-standard) forwards;
}
.cortina__painel--baixo {
  justify-content: flex-start;
  animation: cortina-painel-baixo 3200ms var(--ease-standard) forwards;
}
.cortina__folha {
  flex: 1 1 auto;
  background: var(--azul);
  min-height: 0;
}
.cortina__meia-tarja {
  position: relative;
  flex: none;
  overflow: hidden;
  height: clamp(52px, 8vh, 84px);
  background: var(--azul);
}
.cortina__meia-tarja::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--branco);
  transform: translateX(-102%);
  animation: cortina-tarja 3200ms var(--ease-standard) forwards;
}
.cortina__painel--cima .cortina__meia-tarja::after {
  border-top: 1px solid var(--fendi);
}
.cortina__painel--baixo .cortina__meia-tarja::after {
  border-bottom: 1px solid var(--fendi);
}
.cortina__marca {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(230px, 42vw, 460px);
  height: auto;
  transform: translate(-50%, -50%);
  animation: cortina-marca 3200ms var(--ease-standard) forwards;
}

@keyframes cortina-tarja {
  0% { transform: translateX(-102%); }
  18%, 100% { transform: translateX(0); }
}
@keyframes cortina-fundo {
  0%, 54% { background-color: var(--azul); }
  55%, 100% { background-color: transparent; }
}
@keyframes cortina-painel-cima {
  0%, 54% { transform: translateY(0); }
  88%, 100% { transform: translateY(-100%); }
}
@keyframes cortina-painel-baixo {
  0%, 54% { transform: translateY(0); }
  88%, 100% { transform: translateY(100%); }
}
@keyframes cortina-marca {
  0%, 54% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  60%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

html[data-marca="espera"] .cabecalho__marca .marca {
  transform: translateY(-120%);
  transition: none;
}
html[data-marca="sim"] .cabecalho__marca .marca {
  transform: translateY(0);
  transition: transform var(--dur-3) var(--ease-standard);
}

@media (max-width: 899px) {
  .cortina__marca { width: clamp(280px, 84vw, 400px); }
  .cortina__meia-tarja { height: clamp(64px, 10vh, 96px); }
  /* No celular a caixa da marca é mais alta que o desenho; -120% deixa
     um filete visível. Empurra além da altura da caixa. */
  html[data-marca="espera"] .cabecalho__marca .marca {
    transform: translateY(calc(-100% - 48px));
  }
}

/* ------------------------------------------------------------- cabeçalho */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.cabecalho__interior {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cabecalho__fio {
  display: block;
  height: 1px;
  background: var(--azul-claro);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--dur-2) var(--ease-standard),
              transform var(--dur-3) var(--ease-standard);
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 46px;
  line-height: 0;
}
/* Ela leu a logo três vezes como "apagada" e "pequena". Cresceu de 150 a
   196px para 190 a 268px, e o branco entrou no lugar do meio-tom. */
.marca { display: block; width: clamp(190px, 22vw, 268px); height: auto; }
.marca--escura { display: none; }

.cabecalho[data-estado="rolado"] { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); }
.cabecalho[data-estado="rolado"] .cabecalho__fio { opacity: 1; transform: scaleX(1); }
.cabecalho[data-estado="rolado"] .marca--clara { display: none; }
.cabecalho[data-estado="rolado"] .marca--escura { display: block; }

/* ------------------------------------------------------------ navegação */

.navegacao { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.navegacao__lista { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }

.navegacao__lista a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--dur-1) var(--ease-standard);
}
.navegacao__lista a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--fendi-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-standard);
}
.navegacao__lista a:hover,
.navegacao__lista a[aria-current="true"] { color: var(--branco); }
.navegacao__lista a:hover::after,
.navegacao__lista a[aria-current="true"]::after { transform: scaleX(1); }

.cabecalho[data-estado="rolado"] .navegacao__lista a { color: var(--tinta-media); }
.cabecalho[data-estado="rolado"] .navegacao__lista a::after { background: var(--azul-realce); }
.cabecalho[data-estado="rolado"] .navegacao__lista a:hover,
.cabecalho[data-estado="rolado"] .navegacao__lista a[aria-current="true"] { color: var(--azul-vivo); }

.cabecalho[data-estado="topo"] .navegacao__acao {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.44);
  color: var(--branco);
}
.cabecalho[data-estado="topo"] .navegacao__acao:hover {
  background: rgba(139, 186, 248, 0.2);
  border-color: var(--branco);
}

.menu-botao {
  display: none;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 46px;
  cursor: pointer;
  color: var(--branco);
}
.cabecalho[data-estado="rolado"] .menu-botao { color: var(--azul); }
.menu-botao__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.menu-botao__traco { transition: transform var(--dur-2) var(--ease-standard), opacity var(--dur-1) linear; transform-origin: center; }

@media (max-width: 1079px) {
  .menu-botao { display: inline-flex; }

  /* O painel é filho do cabeçalho, então a marca e o botão precisam de
     camada própria para continuarem clicáveis por cima dele. */
  .cabecalho__marca,
  .menu-botao { position: relative; z-index: 2; }

  .navegacao {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: calc(var(--altura-cabecalho) + 24px) var(--gutter) 40px;
    background: var(--azul);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur-2) var(--ease-standard),
                transform var(--dur-2) var(--ease-standard),
                visibility 0s linear var(--dur-2);
    overflow-y: auto;
  }
  .navegacao[data-aberto="sim"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .navegacao__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacao__lista li { border-bottom: 1px solid rgba(163, 147, 130, 0.3); }
  .navegacao__lista a {
    display: block;
    padding: 16px 0;
    font-family: var(--serif);
    font-size: 1.4375rem;
    color: var(--branco);
  }
  .navegacao__lista a::after { display: none; }
  .cabecalho[data-estado="rolado"] .navegacao__lista a { color: var(--branco); }
  .navegacao__acao { margin-top: 28px; align-self: flex-start; }
  .cabecalho[data-estado="topo"] .navegacao__acao,
  .cabecalho[data-estado="rolado"] .navegacao__acao {
    background: var(--branco);
    color: var(--azul);
    border-color: transparent;
  }

  .cabecalho[data-menu="aberto"] { background: transparent; backdrop-filter: none; }
  .cabecalho[data-menu="aberto"] .cabecalho__fio { opacity: 0; }
  .cabecalho[data-menu="aberto"] .marca--clara { display: block; }
  .cabecalho[data-menu="aberto"] .marca--escura { display: none; }
  .cabecalho[data-menu="aberto"] .menu-botao { color: var(--branco); }
  .cabecalho[data-menu="aberto"] .menu-botao__traco--um { transform: translateY(5px) rotate(45deg); }
  .cabecalho[data-menu="aberto"] .menu-botao__traco--dois { opacity: 0; }
  .cabecalho[data-menu="aberto"] .menu-botao__traco--tres { transform: translateY(-5px) rotate(-45deg); }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  background: var(--azul);
  color: var(--branco);
  padding: calc(var(--altura-cabecalho) + clamp(40px, 6vw, 76px)) 0 clamp(44px, 6vw, 76px);
  overflow: hidden;
}
/* O azul preenche o bloco inteiro. Por cima entra só uma sombra de canto,
   para o texto não flutuar num chapado perfeito. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(112% 88% at 6% 100%, rgba(1, 20, 40, 0.6), transparent 58%);
  pointer-events: none;
}

.hero__interior {
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(40px, 6vw, 64px);
}

.hero__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.2rem + 4.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--branco);
}
.hero__titulo span { display: block; }
.hero__titulo em {
  font-style: normal;
  color: var(--fendi-claro);
}

.hero__chamada {
  margin-top: clamp(22px, 2.6vw, 32px);
  max-width: 62ch;
  font-size: clamp(1.125rem, 1.02rem + 0.55vw, 1.375rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.82);
}

.hero__acoes {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Empilhados no celular, os dois botões ficam do mesmo tamanho. Larguras
   diferentes num par de ações lidas em sequência parecem descuido. */
@media (max-width: 560px) {
  .hero__acoes { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-inline: auto; }
  .hero__acoes .botao { justify-content: center; }
}

.hero__legenda {
  margin-top: 14px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fendi-claro);
}

/* Traço do STF: o SVG só conduz o pincel; a máscara é a PNG aprovada,
   então o que aparece durante o desenho é o mesmo traço do final. */
.arcada {
  overflow: hidden;
  min-height: 0;
}
.arcada__interior {
  position: relative;
  display: block;
  width: 100%;
}
.arcada__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1536 / 490;
  -webkit-mask-image: url("../img/stf-traco.png?v=2");
          mask-image: url("../img/stf-traco.png?v=2");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.arcada__tinta path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms var(--ease-standard);
}
.arcada[data-pronta="sim"] .arcada__tinta path {
  stroke-dashoffset: 0;
}
.arcada[data-pronta="sim"] .arcada__tinta path:nth-child(1) { transition-delay: 0ms; }
.arcada[data-pronta="sim"] .arcada__tinta path:nth-child(n + 6) { transition-delay: 180ms; }
.arcada[data-pronta="sim"] .arcada__tinta path:nth-child(n + 16) { transition-delay: 360ms; }
.arcada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
}
.arcada[data-desenhada="sim"] .arcada__foto {
  opacity: 1;
  transition: opacity 500ms var(--ease-standard);
}
.arcada[data-desenhada="sim"] .arcada__tinta {
  opacity: 0;
  transition: opacity 500ms var(--ease-standard);
}

@media (min-width: 900px) {
  .hero { padding-bottom: clamp(48px, 5vw, 72px); }
  .hero__interior {
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 1fr);
    align-items: center;
    column-gap: clamp(28px, 3vw, 44px);
  }
  .hero__texto { grid-column: 1; grid-row: 1; }
  .arcada {
    grid-column: 2;
    grid-row: 1;
    width: min(44vw, 640px);
    max-width: calc(100vw - var(--gutter) * 2);
    justify-self: start;
  }
  .hero__legenda {
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
    width: min(44vw, 640px);
    justify-self: start;
    text-align: right;
  }
}

@media (max-width: 899px) {
  .hero__interior { justify-items: center; text-align: center; }
  .hero__texto, .hero__chamada, .arcada { min-width: 0; max-width: 100%; }
  .hero__titulo { font-size: clamp(1.875rem, 1.2rem + 5vw, 2.5rem); }
  .hero__titulo span { overflow-wrap: break-word; }
  .hero__chamada { margin-inline: auto; padding-inline: 4px; }
  .hero__legenda {
    text-align: center;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
  }
  .arcada { width: min(92vw, 520px); }
}

/* ----------------------------------------------------------------- fatos */

.fatos {
  background: var(--gelo-fundo);
  padding: clamp(30px, 3.6vw, 46px) 0;
}
.fatos__lista {
  display: grid;
  gap: 24px 32px;
  grid-template-columns: minmax(0, 1fr);
}
.fatos__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid var(--azul-vivo);
}
.fatos__valor {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  line-height: 1.18;
  color: var(--azul);
}
.fatos__nota {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta-media);
}
@media (min-width: 720px) {
  .fatos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ declaração */

.declaracao {
  position: relative;
  overflow: hidden;
  background: var(--gelo);
  padding: clamp(96px, 14vw, 176px) 0;
}
/* Dois traços laterais. A linha do meio da grade replica a altura dos
   desenhos e as faixas 1fr acima e abaixo os deixam no eixo da frase. */
.declaracao__marcas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24ch) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) min(32vw, 260px) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  font-family: var(--serif);
  font-size: clamp(1.875rem, 1.05rem + 3.4vw, 3.5rem);
  pointer-events: none;
}
.declaracao__marca {
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  background-color: var(--azul);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  opacity: 0.22;
}
.declaracao__marca--planalto {
  grid-column: 1;
  transform: translateY(18px);
  -webkit-mask-image: url("../img/planalto-traco.png");
          mask-image: url("../img/planalto-traco.png");
  -webkit-mask-position: center;
          mask-position: center;
}
.declaracao__marca--congresso {
  grid-column: 3;
  -webkit-mask-image: url("../img/congresso-largo-traco.png");
          mask-image: url("../img/congresso-largo-traco.png");
  -webkit-mask-position: center;
          mask-position: center;
}
@media (max-width: 899px) {
  .declaracao__marcas { display: none; }
}
.declaracao__texto {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(1.875rem, 1.05rem + 3.4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--azul);
  text-wrap: balance;
}
@media (min-width: 900px) { .declaracao__texto { max-width: 26ch; } }

.declaracao__texto span { transition: opacity var(--dur-1) linear; }

/* ----------------------------------------------------------------- áreas */

.areas { display: grid; gap: clamp(36px, 5vw, 72px); }

.areas__universo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--azul-vivo);
}
.areas__universo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--azul-claro);
}
.areas__lista + .areas__universo { margin-top: clamp(38px, 4vw, 56px); }

.area { border-bottom: 1px solid var(--gelo-fundo); }

.area__gatilho {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 64px;
  padding: 19px 4px 19px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: padding-left var(--dur-2) var(--ease-standard);
}
.area__gatilho::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--azul-realce);
  transform: translateY(-50%);
  transition: width var(--dur-2) var(--ease-standard);
}

.area__numero {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--azul-realce);
}
.area__titulo {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.02rem + 0.85vw, 1.75rem);
  line-height: 1.22;
  color: var(--azul);
  transition: color var(--dur-1) var(--ease-standard);
}
.area__sinal {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}
.area__sinal::before,
.area__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--azul-vivo);
  transition: transform var(--dur-2) var(--ease-standard);
}
.area__sinal::after { transform: rotate(90deg); }
.area__gatilho[aria-expanded="true"] .area__sinal::after { transform: rotate(0deg); }

/* Abertura por linhas de grid: nada de animar altura no braço. */
.area__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-standard);
}
.area__corpo[hidden] { display: none; }
.area[data-aberta="sim"] .area__corpo { grid-template-rows: 1fr; }
.area__corpo p {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 24px;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--tinta-media);
}

@media (hover: hover) {
  .area__gatilho:hover { padding-left: 32px; }
  .area__gatilho:hover::before { width: 20px; }
  .area__gatilho:hover .area__titulo { color: var(--azul-realce); }
}
.area__gatilho:focus-visible { padding-left: 32px; }
.area__gatilho:focus-visible::before { width: 20px; }

.areas__painel { display: none; }

@media (min-width: 1024px) {
  .areas { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr); align-items: start; }
  .areas__painel {
    display: block;
    position: sticky;
    top: calc(var(--altura-cabecalho) + 56px);
  }
  .areas__moldura {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--azul);
  }
  .areas__figura {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-standard);
  }
  .areas__figura.esta-ativa { opacity: 1; }
  .areas__preview {
    margin: 20px 0 0;
    max-width: 40ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tinta-media);
    transition: opacity var(--dur-1) var(--ease-standard);
  }
  .areas__preview[data-trocando="sim"] { opacity: 0; }
}

/* --------------------------------------------------------------- formas */
/* Ela separou matéria de tipo de serviço na reunião. Este strip carrega o
   segundo eixo sem virar mais um bloco de texto. */

.formas {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--gelo-fundo);
}
.formas__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--azul-vivo);
  margin-bottom: 18px;
}
.formas__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.formas__item {
  padding: 10px 18px;
  border: 1px solid var(--azul-claro);
  border-radius: var(--raio);
  font-size: 1rem;
  color: var(--azul);
  background: var(--branco);
}

/* ------------------------------------------------------------- destaque */
/* Tribunais superiores em bloco próprio, fora da lista de áreas. Pedido
   direto: "tem que ser um destaque a mais no site". */

.destaque {
  position: relative;
  background: var(--azul);
  color: var(--branco);
  padding: clamp(66px, 9vw, 132px) 0;
  overflow: hidden;
}
.destaque__grade { display: grid; gap: clamp(36px, 5vw, 72px); }

/* Título e parágrafo irmãos dentro da mesma coluna precisam do respiro que,
   nas outras seções, vem da grade. */
.titulo + .paragrafo { margin-top: clamp(18px, 2vw, 26px); }

.destaque__figura {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  aspect-ratio: 3 / 4;
  background: var(--azul-900);
}
.destaque__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}
/* Cortina que abre sobre a foto: mesma família da arcada, um pano só. */
.destaque__cortina {
  position: absolute;
  inset: 0;
  background: var(--azul);
  transform-origin: bottom;
  transition: transform var(--dur-3) var(--ease-standard);
}
.destaque__figura[data-aberta="sim"] .destaque__cortina { transform: scaleY(0); }

.destaque__legenda {
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fendi-claro);
}

.destaque__formas {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 12px;
}
.destaque__forma {
  background: color-mix(in srgb, var(--branco) 12%, var(--azul-800));
  padding: 22px 22px 20px;
  border-radius: var(--raio);
}
.destaque__forma h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.24;
  color: var(--branco);
  margin-bottom: 6px;
}
.destaque__forma p { font-size: 1rem; line-height: 1.56; color: rgba(255, 255, 255, 0.72); }

@media (min-width: 900px) {
  .destaque__grade {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    align-items: stretch;
    column-gap: clamp(44px, 5vw, 84px);
  }
  /* A foto vai para a esquerda no desktop, mas o título vem antes no HTML,
     para a leitura em coluna única começar pelo texto. */
  .destaque__coluna-figura {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }
  .destaque__coluna-texto { grid-column: 2; grid-row: 1; }
  .destaque__figura {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }
  .destaque__formas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- cidades */
/* As três praças em diagonal. Sem endereço, porque a estrutura física
   não é o assunto. Em repouso um véu azul leve une as três. No hover o
   véu recua e sobra só o fundo atrás do nome e da nota. No toque, o
   cartão ativo faz o mesmo papel. */

.cidades {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}
.cidade {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  aspect-ratio: 3 / 4;
  background: var(--azul);
}
.cidade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.03);
  transition: filter var(--dur-3) var(--ease-standard),
              transform var(--dur-3) var(--ease-standard);
}
/* Véu de repouso: um pouco de azul sobre a foto inteira. No hover a
   opacidade cai; a leitura do título fica a cargo do degradê embaixo. */
.cidade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(4, 44, 104, 0.24);
  transition: opacity var(--dur-3) var(--ease-standard);
}
.cidade__veu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  height: 28%;
  background: linear-gradient(to top, rgba(4, 44, 104, 0.7) 0%, rgba(4, 44, 104, 0.3) 55%, transparent 100%);
  transition: height var(--dur-3) var(--ease-standard),
              background var(--dur-3) var(--ease-standard);
}
.cidade__corpo {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.4vw, 30px);
}
.cidade__fio {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--fendi);
  margin-bottom: 14px;
  transition: width var(--dur-3) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}
.cidade__nome {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  color: var(--branco);
}
.cidade__nota {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.cidade[data-ativa="sim"] img,
.cidade:hover img,
.cidade:focus-visible img {
  filter: saturate(1.18) contrast(1.05);
  transform: scale(1);
}
.cidade[data-ativa="sim"]::after,
.cidade:hover::after,
.cidade:focus-visible::after { opacity: 0; }
.cidade[data-ativa="sim"] .cidade__veu,
.cidade:hover .cidade__veu,
.cidade:focus-visible .cidade__veu {
  height: 36%;
  background: linear-gradient(to top, rgba(4, 44, 104, 0.9) 0%, rgba(4, 44, 104, 0.62) 48%, transparent 90%);
}
.cidade[data-ativa="sim"] .cidade__fio,
.cidade:hover .cidade__fio,
.cidade:focus-visible .cidade__fio { width: 64px; background: var(--branco); }

/* A caixa da faixa. No celular ela é só o gutter da seção, porque a coluna
   de três cartões continua como estava. No desktop ela solta a largura e vai
   de ponta a ponta. */
.faixa-cidades {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* A caixa que abre a nota. Grid de 0fr para 1fr é o jeito de animar altura
   automática sem medir nada em JS. */
.cidade__abre { display: grid; grid-template-rows: 1fr; }
.cidade__abre > div { overflow: hidden; }

/* Tablet: as três lado a lado, na diagonal que ela desenhou na conversa. */
@media (min-width: 780px) and (max-width: 1023px) {
  .cidades { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .cidades .cidade:nth-child(2) { margin-top: clamp(28px, 6vw, 76px); }
  .cidades .cidade:nth-child(3) { margin-top: clamp(56px, 12vw, 152px); }
}

/* ------------------------------------------------- faixa de localizações */
/* Desktop: uma faixa só, de ponta a ponta, dividida por cortes diagonais.
   Ao passar o mouse, a localização abre e toma parte da largura das outras,
   como sanfona.

   Geometria: cada painel é um paralelogramo recortado em clip-path, com o
   deslocamento em px, não em %, para o ângulo do corte não mudar quando a
   largura muda. Os painéis 2 e 3 sobem sobre o vizinho com margem negativa
   do mesmo valor, então as duas diagonais coincidem e não sobra fresta. A
   soma das larguras é sempre a da caixa mais dois cortes, qualquer que seja
   o flex-grow, então a faixa continua fechando nas pontas durante a
   animação. O clip-path também recorta o alvo do ponteiro, então o hover
   respeita a diagonal e não o retângulo. */

@media (min-width: 1024px) {
  /* No desktop esta seção é a faixa e mais nada: o cabeçalho mora dentro
     dela e não sobrou texto embaixo, então os dois vãos viravam só gelo
     vazio. Ela encosta na seção anterior e na seguinte. No celular o
     cabeçalho volta para o fluxo e os cartões precisam de respiro, por isso
     o corte vale só aqui. */
  .secao--faixa { padding-top: 0; padding-bottom: 0; }

  .faixa-cidades {
    --corte: clamp(38px, 4.4vw, 86px);
    --altura-faixa: clamp(360px, 38vw, 560px);
    --respiro: clamp(26px, 2.2vw, 40px);
    position: relative;
    max-width: none;
    padding: 0;
    overflow: hidden;
  }

  /* Sombra só no canto do cabeçalho. Radial curto, para Brasília, o Rio
     e São Paulo continuarem com a cor da foto, não com um véu azul na
     faixa inteira. Fora do alcance do ponteiro, senão comeria o hover
     do primeiro painel. */
  .faixa-cidades::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(42% 78% at 0% 0%,
      rgba(1, 18, 40, 0.82) 0%,
      rgba(1, 18, 40, 0.34) 42%,
      rgba(1, 18, 40, 0) 72%);
  }

  /* O cabeçalho sai do fluxo e ocupa o canto superior esquerdo da faixa.
     Sem pointer-events para não bloquear a sanfona por baixo dele. */
  .faixa-cidades__cabecalho {
    position: absolute;
    z-index: 5;
    top: clamp(32px, 3.4vw, 58px);
    left: 0;
    margin: 0;
    padding: 0 var(--gutter);
    max-width: min(52ch, 46vw);
    pointer-events: none;
  }
  .faixa-cidades__cabecalho .rotulo { color: var(--azul-claro); }
  .faixa-cidades__cabecalho .rotulo__numero {
    color: var(--fendi-claro);
    border-right-color: var(--fendi);
  }
  .faixa-cidades__cabecalho .titulo { color: var(--branco); }
  .faixa-cidades__cabecalho .paragrafo {
    color: rgba(255, 255, 255, 0.82);
    max-width: 42ch;
  }

  .cidades {
    display: flex;
    gap: 0;
    height: var(--altura-faixa);
  }

  .cidade {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* Dois níveis de classe de propósito. A regra genérica [data-revelar] mora
     no fim da folha e tem a mesma especificidade de .cidade sozinha, então
     ganharia por ordem e apagaria a transição do flex-grow: a sanfona abria
     de um salto, sem animação. Com .cidades .cidade a transição fica.

     Sem atraso em cascata aqui: as três entram juntas, senão a diagonal de
     uma aparece antes da vizinha e a costura fica à mostra. */
  .cidades .cidade {
    transition: flex-grow var(--dur-3) var(--ease-standard),
                opacity var(--dur-3) var(--ease-standard),
                transform var(--dur-3) var(--ease-standard);
  }

  .cidade:nth-child(1) { clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%); }
  .cidade:nth-child(2) { clip-path: polygon(var(--corte) 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%); }
  .cidade:nth-child(3) { clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%); }
  .cidade:nth-child(n + 2) { margin-left: calc(var(--corte) * -1); margin-top: 0; }

  /* Fio azul rente ao corte, para a diagonal se ler entre duas fotos. É o
     azul claro da paleta, o único que sobrevive sobre foto escura. */
  .cidade:nth-child(n + 2)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--azul-claro);
    opacity: 0.85;
    pointer-events: none;
    clip-path: polygon(var(--corte) 0, calc(var(--corte) + 2px) 0, 2px 100%, 0 100%);
  }

  /* O recuo acompanha o corte, senão o texto atravessa a diagonal. À
     esquerda o painel abre conforme desce, e o corpo está ancorado embaixo,
     então uma fração do corte basta. À direita ele fecha conforme desce, e
     aí precisa do corte inteiro para o nome não passar da quina.

     Quem limita a linha é a nota, não o corpo. Limite em ch no corpo dava
     certo em 1440 e quebrava "Rio de Janeiro" em duas linhas em 1920, onde
     o corte cresce e come o espaço que sobrava. */
  .cidade__corpo {
    padding: var(--respiro);
    padding-left: calc(var(--respiro) + var(--corte) * 0.3);
    padding-right: calc(var(--respiro) + var(--corte));
  }
  .cidade:nth-child(1) .cidade__corpo { padding-left: var(--gutter); }
  .cidade:nth-child(3) .cidade__corpo { padding-right: var(--gutter); }

  .cidade__nome { font-size: clamp(1.375rem, 0.65rem + 1.2vw, 2rem); }
  .cidade__nota { color: rgba(255, 255, 255, 0.86); max-width: 30ch; }

  /* A faixa é baixa e larga, então o texto cai sobre o meio da foto.
     Em repouso o ::after cobre a foto; o véu fica só no pé, para o nome
     e a nota lerem sem um bloco azul na faixa inteira. */
  .cidade::after { background: rgba(4, 44, 104, 0.26); }
  .cidade__veu {
    height: 28%;
    background: linear-gradient(to top,
      rgba(2, 22, 56, 0.72) 0%,
      rgba(4, 44, 104, 0.32) 52%,
      transparent 100%);
  }
  /* No desktop a faixa corta o meio da foto. O Rio sobe o enquadramento
     para o Pão de Açúcar. São Paulo mostra o X visto de cima. */
  .cidade:nth-child(2) img { object-position: 50% 10%; }
  .cidade:nth-child(3) img { object-position: 38% 42%; }
  .cidades .cidade:hover::after,
  .cidades .cidade:focus-within::after { opacity: 0; }
  .cidades .cidade:hover .cidade__veu,
  .cidades .cidade:focus-within .cidade__veu {
    height: 38%;
    background: linear-gradient(to top,
      rgba(2, 22, 56, 0.92) 0%,
      rgba(4, 44, 104, 0.7) 44%,
      transparent 90%);
  }

  /* Em repouso mostra só o nome. A nota abre junto com a largura. */
  .cidade__abre {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dur-3) var(--ease-standard),
                opacity var(--dur-2) var(--ease-standard);
  }
  .cidade:hover .cidade__abre,
  .cidade:focus-within .cidade__abre { grid-template-rows: 1fr; opacity: 1; }

  /* A sanfona. Com flex-basis zero o que conta é a proporção entre os
     grow, não o número: 1.4 contra 0.8 leva o painel aberto de um terço
     para perto da metade da faixa. */
  .cidades:hover .cidade { flex-grow: 0.8; }
  .cidades .cidade:hover,
  .cidades .cidade:focus-within { flex-grow: 1.4; }

  /* Quem não está aberto volta ao véu cheio. */
  .cidades:hover .cidade:not(:hover)::after { opacity: 1; }
}

/* -------------------------------------------------------------- cartões */

.cartoes {
  display: grid;
  gap: 1px;
  background: rgba(163, 147, 130, 0.34);
  border-top: 1px solid rgba(163, 147, 130, 0.34);
  border-bottom: 1px solid rgba(163, 147, 130, 0.34);
}
.cartao {
  position: relative;
  background: var(--azul);
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 34px);
  transition: background-color var(--dur-2) var(--ease-standard);
}
.cartao:hover { background: var(--azul-800); }
.cartao__fio {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--fendi);
  margin-bottom: 22px;
  transition: width var(--dur-3) var(--ease-standard);
}
.cartao:hover .cartao__fio { width: 56px; }
.cartao__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.22;
  color: var(--branco);
  margin-bottom: 12px;
}
.cartao__texto {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}
@media (min-width: 700px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------- capas --- */
/* Publicações viraram capa clicável, em grade. A crítica foi direta: a lista
   anterior parecia pesquisa acadêmica e ninguém iria clicar. A capa é um
   gabarito repetível de propósito, porque ela vai refazer no Canva. */

.capas {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.capa {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.capa__arte {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--raio);
  background: var(--azul);
  overflow: hidden;
  transition: background-color var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard);
}
/* Variação de fundo dentro da mesma família, para a grade não virar um
   paredão de azul igual. */
.capas > li:nth-child(3n + 2) .capa__arte { background: var(--azul-800); }
.capas > li:nth-child(3n + 3) .capa__arte { background: var(--azul-900); }
.capa__arte::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--azul-realce);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-standard);
}
.capa:hover .capa__arte { transform: translateY(-4px); }
.capa:hover .capa__arte::after,
.capa:focus-visible .capa__arte::after { transform: scaleX(1); }

.capa__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.capa__titulo, .capa__sub { display: block; }
.capa__tipo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fendi-claro);
}
.capa__ano {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--azul-claro);
}
.capa__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9375rem);
  line-height: 1.14;
  color: var(--branco);
}
.capa__sub {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.72);
}
.capa__acao {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--azul-vivo);
  transition: gap var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.capa:hover .capa__acao { gap: 16px; color: var(--azul-realce); }

/* Precisa vencer a variação por nth-child acima, que também alcança o quinto
   item. Mesma contagem de classes, e vem depois. */
.capas > li.capas__faixa .capa__arte {
  background: var(--gelo);
  border: 1px solid var(--azul-claro);
  justify-content: flex-end;
}
.capa--mais .capa__tipo { color: var(--azul-vivo); }
.capa--mais .capa__ano { color: var(--azul-realce); }
.capa--mais .capa__titulo { color: var(--azul); }
.capa--mais .capa__sub { color: var(--tinta-media); }

/* Cinco itens numa grade de quatro deixariam o quinto órfão. O caminho para a
   lista inteira vira faixa na largura toda, que é o peso certo para ele. */
@media (min-width: 760px) {
  .capas__faixa { grid-column: 1 / -1; }
  .capas > li.capas__faixa .capa__arte {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(24px, 3.4vw, 56px);
    min-height: 124px;
  }
  .capas__faixa .capa__topo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .capas__faixa .capa__titulo { max-width: 20ch; }
  .capas__faixa .capa__sub { margin-top: 0; max-width: 46ch; }
}

.aviso-linha {
  margin-top: clamp(24px, 3vw, 34px);
  min-height: 1.5em;
  font-size: 1rem;
  color: var(--azul-vivo);
}
.aviso-linha:empty { min-height: 0; }

/* -------------------------------------------------------------- equipe --- */
/* Ficha grande, do mesmo tamanho para todo mundo. O retrato ocupa a maior
   parte do cartão, que é o pedido, e o gabarito é idêntico nas cinco: foto e
   monograma dividem a mesma moldura 4:5, então ninguém fica maior que ninguém
   quando as fotos da sessão nova entrarem. */

.fichas {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 400px) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ficha__gatilho {
  /* Grid, e nao block: <button> centraliza o proprio conteudo quando sobra
     altura, e isso descolava o retrato do topo nas fichas de texto mais curto.
     A segunda faixa absorve a sobra, entao o corpo cresce e o retrato fica
     encostado em cima nas cinco. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  /* <button> carrega largura minima intrinseca propria; sem zerar, o cartao
     estoura a coluna em vez de quebrar o texto. */
  min-width: 0;
  height: 100%;
  padding: 0;
  background: var(--branco);
  border: 1px solid var(--gelo-fundo);
  border-radius: var(--raio);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard);
}

.ficha__retrato {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  aspect-ratio: 4 / 5;
  background: var(--azul);
  overflow: hidden;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.ficha__retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 22%;
  transition: transform var(--dur-3) var(--ease-standard);
}

/* Enquanto o retrato nao existe, a moldura vira monograma. Fendi sobre
   marinho e o uso permitido do apoio: detalhe sobre azul, nunca texto sobre
   branco. O rotulo diz o que e, para o bloco azul nao parecer defeito. */
.ficha__sigla {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.7rem + 2.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--fendi-claro);
}
.ficha__aguardando {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fendi);
}

.ficha__corpo {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
}
.ficha__cargo {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--azul-vivo);
}
.ficha__nome {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.08rem + 0.6vw, 1.5rem);
  line-height: 1.18;
  color: var(--azul);
  transition: color var(--dur-1) var(--ease-standard);
}
.ficha__materias {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--tinta-media);
}
.ficha__acao {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Empurrado para a base, para a chamada ficar na mesma linha nas fichas
     lado a lado mesmo com textos de tamanhos diferentes. */
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.9375rem;
  color: var(--azul-vivo);
}
.ficha__acao svg { transition: transform var(--dur-2) var(--ease-standard); }

/* O realce sobe para o azul mais alto, nunca desce para o escuro. */
@media (hover: hover) {
  .ficha__gatilho:hover { border-color: var(--azul-vivo); transform: translateY(-4px); }
  .ficha__gatilho:hover .ficha__nome { color: var(--azul-realce); }
  .ficha__gatilho:hover .ficha__acao svg { transform: translateX(5px); }
  .ficha__gatilho:hover .ficha__retrato img { transform: scale(1.04); }
  .ficha__gatilho:hover .ficha__retrato--espera { background: var(--azul-800); }
}
.ficha__gatilho:focus-visible { border-color: var(--azul-vivo); }
.ficha__gatilho:focus-visible .ficha__acao svg { transform: translateX(5px); }

/* ------------------------------------------------------------- contato --- */

.secao--contato { background: var(--azul-900); }
.contato__intro .paragrafo { margin-top: clamp(20px, 2.4vw, 28px); }
.contato__dados {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: grid;
  gap: 20px;
}
.contato__dados dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fendi-claro);
  margin-bottom: 6px;
}
.contato__dados dd { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, 0.86); }

.formulario {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 38px);
  background: rgba(139, 186, 248, 0.08);
  border: 1px solid rgba(163, 147, 130, 0.34);
  border-radius: var(--raio);
}
.campo { display: grid; gap: 8px; }
.campo label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}
.campo__nota { font-weight: 400; color: rgba(255, 255, 255, 0.56); }
.campo input,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--branco);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--raio);
  transition: border-color var(--dur-1) var(--ease-standard),
              background-color var(--dur-1) var(--ease-standard);
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:hover,
.campo textarea:hover { border-color: rgba(255, 255, 255, 0.42); }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-claro);
  background: rgba(139, 186, 248, 0.14);
}
.campo[data-invalido="sim"] input,
.campo[data-invalido="sim"] textarea { border-color: #f4b0a6; }
.campo__erro { font-size: 0.875rem; color: #f4b0a6; }

.formulario__aviso { font-size: 0.9375rem; color: var(--azul-claro); min-height: 1.2em; }
.formulario__aviso:empty { min-height: 0; }
.formulario__nota { font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.56); }

/* -------------------------------------------------------------- rodapé --- */

.rodape {
  background: var(--azul-950);
  color: var(--branco);
  padding: clamp(52px, 6vw, 84px) 0 32px;
  border-top: 1px solid rgba(163, 147, 130, 0.3);
}
.rodape__topo { display: grid; gap: clamp(36px, 4vw, 64px); }
.rodape__marca img { width: clamp(200px, 24vw, 250px); }
.rodape__texto {
  margin-top: 20px;
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.68);
}
.rodape__navegacao { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rodape__titulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fendi-claro);
  margin-bottom: 16px;
}
.rodape__navegacao a,
.rodape__navegacao span {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}
.rodape__navegacao a { color: rgba(255, 255, 255, 0.74); }
.rodape__navegacao a:hover { color: var(--branco); }
.rodape__navegacao span { color: var(--fendi); }

.rodape__base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(163, 147, 130, 0.24);
  display: grid;
  gap: 10px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.56);
}
.rodape__creditos { max-width: 66ch; }

@media (min-width: 860px) {
  .rodape__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .rodape__base { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 32px; }
  /* Encostado à direita, mas com o texto alinhado à esquerda: três linhas em
     bandeira invertida ficam difíceis de ler. */
  .rodape__creditos { justify-self: end; text-align: left; }
}

/* Botão flutuante de WhatsApp. Marinho com fio fendi: o fendi não preenche
   botão, por contraste e pela regra de marca. */
.whatsapp__botao {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  border: 1px solid var(--fendi);
  box-shadow: 0 10px 30px rgba(4, 30, 66, 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  transition: background-color var(--dur-1) var(--ease-standard),
              opacity var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard);
}
.whatsapp__botao[data-visivel="sim"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.whatsapp__botao:hover { background: var(--azul-800); }

html[data-cortina="sim"] .whatsapp__botao,
html[data-cortina="sim"] .revisao-tema {
  visibility: hidden;
}

/* Só no protótipo: as duas paletas para a Patrícia comparar.
   O gatilho é um ícone; o painel abre para cima. */
.revisao-tema {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
}
.revisao-tema__gatilho {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--branco);
  color: var(--azul);
  border: 1px solid var(--gelo-fundo);
  border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(4, 30, 66, 0.12);
  cursor: pointer;
}
.revisao-tema__gatilho:hover { border-color: var(--azul-claro); }
.revisao-tema__gatilho[aria-expanded="true"] { border-color: var(--azul); }
.revisao-tema__painel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 220px;
  padding: 12px 14px;
  background: var(--branco);
  border: 1px solid var(--gelo-fundo);
  border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(4, 30, 66, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard),
              visibility 0s linear var(--dur-2);
}
.revisao-tema[data-aberto="sim"] .revisao-tema__painel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.revisao-tema__rotulo {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fendi-texto);
}
.revisao-tema__acoes { display: grid; gap: 8px; }
.revisao-tema__acoes button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--gelo-fundo);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.revisao-tema__acoes button[aria-pressed="true"] {
  background: var(--azul);
  color: var(--branco);
  border-color: var(--azul);
}

/* ---------------------------------------------------------- movimento --- */

[data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-standard) var(--atraso, 0ms),
              transform var(--dur-3) var(--ease-standard) var(--atraso, 0ms);
}
[data-revelar][data-visivel="sim"] { opacity: 1; transform: none; }

/* Rede de segurança global. Se a pessoa pediu menos movimento, o site
   entrega o estado final sem transição. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .arcada__interior { clip-path: inset(0 0 0 0); transform: none; }
  .arcada__tinta path { stroke-dashoffset: 0; }
  .arcada__tinta { opacity: 0; }
  .arcada__foto { opacity: 1; }
  .destaque__cortina { transform: scaleY(0); }
  .declaracao__texto span { opacity: 1 !important; }
  .cortina { display: none !important; }
  html[data-marca="espera"] .cabecalho__marca .marca,
  html[data-marca="sim"] .cabecalho__marca .marca { transform: none; }
  /* Sem hover para revelar a cor, as três entram coloridas de saída. E a
     sanfona sai de cena: largura que salta sem transição é pior do que
     largura parada. */
  .cidade img { filter: none; transform: none; }
  .cidades:hover .cidade,
  .cidades .cidade:hover,
  .cidades .cidade:focus-within { flex-grow: 1; }
  .cidade__abre { grid-template-rows: 1fr; opacity: 1; }
}