/* Site do advogado · modelo replicável
   Sistema visual: preto quente + dourado da marca + marfim.
   Referência de estrutura: acervo "ciridae" (fio, sem sombra, superfície por tom).
   Tipografia: uma serifada de display, uma sem serifa de corpo e uma monoespaçada
   para o painel e o cartão de embarque, a "voz do aeroporto".

   NENHUMA cor e NENHUMA família de letra moram aqui. Todas saem de
   css/identidade-site.css, que o gera-site.py escreve a partir do identidade.json
   do Escritório Digital. Se aparecer um hex neste arquivo, é bug. */
@import url('/css/identidade-site.css');

:root {
  --container: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --secao: clamp(88px, 10vw, 144px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.32, 0.72, 0, 1);
}

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

html { -webkit-text-size-adjust: 100%; }
html.sem-js { scroll-behavior: smooth; }
html.js { scroll-behavior: auto; }   /* o Lenis cuida da suavidade; CSS suave por cima dele trava a rolagem */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--marfim);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 4px;
  border-radius: 2px;
}

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ouro); color: var(--tinta);
  padding: 10px 16px; border-radius: 999px; font-weight: 600;
  transition: top 0.25s var(--ease);
}
.pular:focus { top: 16px; }

/* ---------- grade e linhas de contêiner ---------- */
.miolo {
  width: min(var(--container), 100% - var(--pad) * 2);
  margin-inline: auto;
}

.linhas { position: relative; isolation: isolate; }
.linhas::before, .linhas::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 1px; z-index: -1;
  background: var(--fio); pointer-events: none;
}
.linhas::before { left: max(var(--pad), calc((100% - var(--container)) / 2)); }
.linhas::after { right: max(var(--pad), calc((100% - var(--container)) / 2)); }

/* ---------- tipografia ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.022em;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}
.titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.lede {
  color: var(--areia);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  max-width: 56ch;
}

/* ---------- navegação ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.topo.colado {
  background: var(--preto-82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--fio);
}
.topo-miolo {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.marca { display: flex; align-items: center; gap: 14px; }
.marca img { width: 40px; height: 40px; border-radius: 4px; }
.marca-nome {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1; letter-spacing: 0.01em; font-weight: 500;
}
.marca-nome small {
  display: block; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--areia); margin-top: 5px;
}
.menu { display: flex; align-items: center; gap: 32px; }
.menu a {
  font-size: 0.9rem; color: var(--marfim-2); position: relative; padding: 6px 0;
}
.menu a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--ouro); transition: right 0.5s var(--ease);
}
.menu a:hover::after, .menu a[aria-current="true"]::after { right: 0; }
.menu .escritorio { display: inline-flex; align-items: center; gap: 7px; color: var(--areia); font-size: 0.82rem; padding: 6px 10px; border: 1px solid var(--fio); border-radius: 999px; margin-left: 4px; }
.menu .escritorio svg { width: 14px; height: 14px; }
.menu .escritorio::after { display: none; }
.menu .escritorio:hover { color: var(--marfim); border-color: var(--fio-forte); }
.menu-movel .item-escritorio { font-family: var(--sans); font-size: 1rem; color: var(--areia); padding: 18px 0 6px; border-bottom: 0; }

.pilula {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--fio-forte); color: var(--ouro);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.3s var(--ease);
}
.pilula svg { width: 18px; height: 18px; }
.pilula:hover { background: var(--ouro); color: var(--tinta); border-color: var(--ouro); }
.pilula:active { transform: scale(0.98); }

.hamburguer {
  display: none; width: 44px; height: 44px; position: relative; border-radius: 999px;
  border: 1px solid var(--fio-forte);
}
.hamburguer span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; background: var(--marfim);
  transition: transform 0.5s var(--ease), top 0.5s var(--ease), opacity 0.3s;
}
.hamburguer span:nth-child(1) { top: 16px; }
.hamburguer span:nth-child(2) { top: 21px; }
.hamburguer span:nth-child(3) { top: 26px; }
.hamburguer[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.menu-movel {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: var(--preto-94);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  padding: 120px var(--pad) 40px;
  flex-direction: column; justify-content: space-between;
}
.menu-movel.aberto { display: flex; }
.menu-movel a.item {
  display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1.2;
  padding: 10px 0; border-bottom: 1px solid var(--fio);
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.menu-movel.aberto a.item { opacity: 1; transform: none; }
.menu-movel.aberto a.item:nth-child(1) { transition-delay: 0.08s; }
.menu-movel.aberto a.item:nth-child(2) { transition-delay: 0.14s; }
.menu-movel.aberto a.item:nth-child(3) { transition-delay: 0.2s; }
.menu-movel.aberto a.item:nth-child(4) { transition-delay: 0.26s; }
.menu-movel .pilula { justify-content: center; padding: 16px; font-size: 1rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding-top: clamp(96px, 13svh, 120px); overflow: hidden;
}
.hero-miolo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px; align-items: end; position: relative;
}
.hero-texto { padding-bottom: clamp(28px, 5svh, 72px); position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.6rem, 0.9rem + 4.2vw, 4.75rem);
  max-width: 17ch;
  margin-inline-start: -0.05em;
}
.hero h1 .linha { display: block; }
.hero h1 .linha + .linha { margin-top: 0.02em; }
.hero h1 .ouro { color: var(--ouro-claro); font-style: italic; font-weight: 500; letter-spacing: -0.012em; }
.hero .lede { margin-top: 18px; max-width: 53ch; }
.hero-acoes { margin-top: clamp(44px, 4.5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-nota { flex-basis: 100%; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--areia); }
.etiqueta { display: flex; flex-wrap: wrap; gap: 10px 0; margin-bottom: 22px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--areia-2); }
.etiqueta span { display: inline-flex; align-items: center; }
.etiqueta span + span::before { content: ''; width: 1px; height: 0.9em; background: var(--ouro); margin: 0 14px; opacity: 0.8; }
.hero-conhecer {
  font-size: 0.82rem; color: var(--areia-2); display: inline-flex; align-items: center; gap: 10px;
}
.hero-conhecer svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.hero-conhecer:hover svg { transform: translateY(3px); }
.hero-conhecer:hover { color: var(--marfim); }

.hero-foto {
  position: relative; align-self: end; justify-self: end;
  width: min(100%, 560px); z-index: 1;
}
.hero-foto::before {
  content: ''; position: absolute; inset: auto -18% 8% -18%; height: 76%;
  background: radial-gradient(58% 58% at 42% 30%, var(--ouro-30), transparent 72%);
  filter: blur(26px); z-index: -1;
}
.hero-foto img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, var(--mascara) 58%, var(--mascara-60) 78%, transparent 96%);
  mask-image: linear-gradient(to bottom, var(--mascara) 58%, var(--mascara-60) 78%, transparent 96%);
}
.hero-foto .brilho {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: url('/img/hero-recorte.webp'), linear-gradient(to bottom, var(--mascara) 74%, var(--mascara-70) 88%, transparent 99%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: url('/img/hero-recorte.webp'), linear-gradient(to bottom, var(--mascara) 74%, var(--mascara-70) 88%, transparent 99%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  mix-blend-mode: screen;
}
.hero-foto .brilho::before {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 28%;
  background: linear-gradient(100deg, var(--luz-zero) 0%, var(--luz-meia) 50%, var(--luz-zero) 100%);
  transform: translateX(-260%) skewX(-14deg);
  will-change: transform;
  animation: luz-passa 9s linear 3.6s infinite;
}
@keyframes luz-passa {
  0% { transform: translateX(-260%) skewX(-14deg); opacity: 0; }
  3% { opacity: 1; }
  15% { transform: translateX(560%) skewX(-14deg); opacity: 1; }
  17% { opacity: 0; }
  100% { transform: translateX(560%) skewX(-14deg); opacity: 0; }
}
.hero h1 .linha { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
html.reduz .hero-foto .brilho::before, html.sem-js .hero-foto .brilho::before { animation: none; }

/* ---------- fundo do hero (foto gerada pela agência, luzes da pista) ---------- */
.hero-fundo {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: url('/img/fundo-hero.webp') 62% 46% / cover no-repeat var(--preto);
}
.hero-fundo::before {   /* a luz cruza o vidro um quarto de segundo antes de chegar nela */
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 18%; z-index: 1;
  background: linear-gradient(100deg, var(--luz-zero) 0%, var(--luz-fraca) 50%, var(--luz-zero) 100%);
  transform: translateX(-200%) skewX(-14deg);
  animation: luz-passa 9s linear 3.35s infinite;
}
html.reduz .hero-fundo::before, html.sem-js .hero-fundo::before { animation: none; }
.hero-fundo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--preto) 0%, var(--preto-86) 45%, var(--preto-55) 100%),
              linear-gradient(to top, var(--preto) 0%, transparent 40%);
}
.hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%;
  opacity: 0.55; filter: saturate(0.9);
}
.hero-miolo { z-index: 1; }

/* ---------- faixa de capítulo ---------- */
.faixa { position: relative; height: clamp(360px, 52vw, 640px); overflow: hidden; border-top: 1px solid var(--fio); }
.faixa-img { position: absolute; inset: -12% 0; }
.faixa-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.faixa::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--preto) 0%, transparent 30%, transparent 60%, var(--preto) 100%);
}
.faixa-legenda {
  position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vw, 72px); z-index: 1;
  font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); line-height: 1.2;
  max-width: 30ch; color: var(--marfim);
}

/* ---------- fundo da chamada final ---------- */
.final { overflow: hidden; }
.final-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.final-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0.5; }
.final-fundo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--preto) 0%, var(--preto-55) 45%, var(--preto-70) 100%);
}
.final .miolo { position: relative; z-index: 1; }

/* ---------- cartão de embarque (a chamada principal) ---------- */
.cartao {
  --raio: 12px;
  position: relative; display: flex; width: min(100%, 600px);
  color: var(--tinta); border-radius: var(--raio);
  transition: transform 0.6s var(--ease);
  isolation: isolate;
}
.cartao:hover { transform: translateY(-4px); }
.cartao:active { transform: translateY(-1px) scale(0.995); }
.cartao-corpo {
  flex: 1 1 auto; background: var(--marfim);
  border-radius: var(--raio) 0 0 var(--raio);
  padding: 18px 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1.5px dashed var(--tinta-32);
}
.cartao-topo {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rotulo-marfim);
}
.cartao-topo b { font-weight: 500; color: var(--ouro-escuro); }
.cartao-rota { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.rota-ponto small {
  display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rotulo-marfim); margin-bottom: 5px;
}
.rota-ponto b { font-family: var(--serif); font-size: 1.3rem; line-height: 1.05; font-weight: 500; display: block; white-space: nowrap; }
.rota-ponto:last-child { text-align: right; }
.rota-aviao { position: relative; height: 22px; display: flex; align-items: center; }
.rota-aviao::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1.5px dashed var(--tinta-35);
}
.rota-aviao svg {
  position: relative; width: 22px; height: 22px; margin-inline: auto;
  background: var(--marfim); padding: 0 3px; box-sizing: content-box;
  color: var(--ouro-escuro);
  transition: transform 0.8s var(--ease);
}
.cartao:hover .rota-aviao svg { transform: translateX(6px); }
.cartao-dados { display: flex; gap: 28px; flex-wrap: wrap; }
.cartao-dados small {
  display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rotulo-marfim); margin-bottom: 3px;
}
.cartao-dados b { font-weight: 600; font-size: 0.9rem; }
.cartao-canhoto {
  flex: 0 0 176px; background: var(--ouro);
  border-radius: 0 var(--raio) var(--raio) 0;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  padding: 18px 18px 16px; gap: 12px;
  transition: background-color 0.4s var(--ease);
}
.cartao:hover .cartao-canhoto { background: var(--ouro-claro); }
.canhoto-texto {
  font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--tinta);
  display: flex; align-items: center; gap: 8px;
}
.canhoto-rotulo { text-wrap: balance; }
.so-celular { display: none; }
.canhoto-texto svg { width: 20px; height: 20px; flex: none; }
.canhoto-codigo { width: 100%; height: 34px; color: var(--tinta); opacity: 0.8; }
.cartao::before, .cartao::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--preto); right: 176px; transform: translateX(50%); z-index: 2;
}
.cartao::before { top: -9px; }
.cartao::after { bottom: -9px; }
.cartao.no-carvao::before, .cartao.no-carvao::after { background: var(--carvao); }

/* ---------- relato (a ficha do passageiro) ---------- */
.relato-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.relato-lista { margin-top: 28px; display: grid; gap: 12px; }
.relato-lista li { display: flex; gap: 14px; align-items: baseline; color: var(--marfim-2); font-size: 0.98rem; }
.relato-lista li::before { content: ''; width: 10px; height: 1px; background: var(--ouro); flex: none; transform: translateY(-4px); }
.ficha {
  background: var(--marfim); color: var(--tinta); border-radius: 12px;
  padding: 22px 26px 26px; display: grid; gap: 18px; position: relative;
}
.ficha-topo {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rotulo-marfim);
  padding-bottom: 14px; border-bottom: 1.5px dashed var(--tinta-32);
}
.ficha-topo b { font-weight: 500; color: var(--ouro-escuro); }
.ficha-campo { display: grid; gap: 8px; }
.ficha-campo > span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rotulo-marfim); }
.ficha-campo textarea, .ficha-campo input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--vidro); border: 1px solid var(--tinta-18); border-radius: 8px;
  padding: 12px 14px; resize: vertical; min-height: 48px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ficha-campo textarea { line-height: 1.5; }
.ficha-campo textarea::placeholder, .ficha-campo input::placeholder { color: var(--placeholder); }
.ficha-campo textarea:focus, .ficha-campo input:focus { outline: none; border-color: var(--ouro-escuro); box-shadow: 0 0 0 3px var(--ouro-25); }
.ficha-campo.invalido textarea, .ficha-campo.invalido input { border-color: var(--erro-fio); }
.ficha-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ficha-erro { color: var(--erro-texto); font-size: 0.92rem; }
.ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.botao-ouro {
  background: var(--ouro); color: var(--tinta); border-radius: 999px;
  padding: 14px 26px; font-weight: 700; font-size: 1rem; min-height: 48px;
  transition: background-color 0.35s var(--ease), transform 0.3s var(--ease), opacity 0.3s;
}
.botao-ouro:hover { background: var(--ouro-claro); }
.botao-ouro:active { transform: scale(0.98); }
.botao-ouro[disabled] { opacity: 0.7; cursor: progress; }
.ficha-nota { color: var(--rotulo-marfim); font-size: 0.86rem; max-width: 30ch; line-height: 1.45; }
.ficha[hidden] { display: none; }
.ficha-ok { text-align: left; }
.relato-texto .lede { margin-top: 22px; }
.relato-texto .titulo { max-width: 13ch; }
.ficha-check { width: 48px; height: 48px; color: var(--ouro-escuro); }
.ficha-ok h3 { font-family: var(--serif); font-size: 1.9rem; line-height: 1.05; font-weight: 500; }
.ficha-ok p { color: var(--ficha-corpo); max-width: 42ch; }
.botao-link { display: inline-flex; align-items: center; justify-self: start; text-align: center; }

/* ---------- seções ---------- */
.secao { padding-block: var(--secao); position: relative; }
.secao + .secao { border-top: 1px solid var(--fio); }
.cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: 56px; }
.cabeca .lede { align-self: end; }

/* ---------- painel de situações (split-flap) ---------- */
.painel {
  background: var(--carvao); border: 1px solid var(--fio); border-radius: 6px; overflow: hidden;
}
.painel-cabeca {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--fio);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--areia);
}
.painel-cabeca b { font-weight: 500; color: var(--ouro-claro); }
.painel-cabeca .relogio { display: inline-flex; align-items: center; gap: 10px; }
.painel-cabeca .relogio i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); display: inline-block;
  animation: pulsa 2.4s ease-in-out infinite;
}
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.painel-colunas {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: 24px; padding: 10px 22px; border-bottom: 1px solid var(--fio);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--areia-2);
}
.painel-linha { border-bottom: 1px solid var(--fio); }
.painel-linha:last-child { border-bottom: 0; }
.painel-linha summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: 24px; align-items: center; padding: 22px 22px;
  transition: background-color 0.4s var(--ease);
}
.painel-linha summary::-webkit-details-marker { display: none; }
.painel-linha summary:hover, .painel-linha[open] summary { background: var(--carvao-2); }
.flap { display: inline-flex; gap: 3px; flex-wrap: wrap; font-family: var(--mono); font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem); font-weight: 500; letter-spacing: 0.02em; }
.flap-char {
  position: relative; display: inline-grid; place-items: center;
  min-width: 1.1em; height: 1.55em; padding: 0 0.1em;
  background: var(--flap-fundo); color: var(--ouro-claro); border-radius: 3px;
  border: 1px solid var(--ouro-claro-10);
  line-height: 1;
}
.flap-char.espaco { background: transparent; border-color: transparent; min-width: 0.6em; }
.flap-char::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--preto-90);
}
.flap-char.virando { animation: vira 0.09s linear; }
@keyframes vira { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } }
.painel-desc { color: var(--areia); font-size: 0.95rem; line-height: 1.55; }
.painel-mais-ind {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--fio-forte);
  display: grid; place-items: center; color: var(--ouro-claro); position: relative;
}
.painel-mais-ind::before, .painel-mais-ind::after {
  content: ''; position: absolute; background: currentColor; transition: transform 0.4s var(--ease);
}
.painel-mais-ind::before { width: 12px; height: 1px; }
.painel-mais-ind::after { width: 1px; height: 12px; }
.painel-linha[open] .painel-mais-ind::after { transform: rotate(90deg); }
.painel-corpo {
  padding: 4px 22px 28px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px;
  background: var(--carvao-2);
}
.painel-corpo .guardar-mini { grid-column: 2; }
.painel-corpo h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 8px; }
.painel-corpo ul { display: grid; gap: 6px; color: var(--areia); font-size: 0.92rem; }
.painel-corpo ul li { padding-left: 18px; position: relative; }
.painel-corpo ul li::before {
  content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 1px; background: var(--ouro);
}
.painel-corpo .pilula { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
.nota { color: var(--areia-2); font-size: 0.85rem; margin-top: 18px; }

/* ---------- frase (revelação palavra a palavra) ---------- */
.frase-secao { padding-block: calc(var(--secao) * 1.1); }
.frase {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1rem + 3.2vw, 4rem);
  line-height: 1.12; letter-spacing: -0.01em; max-width: 24ch;
}
.frase .palavra { display: inline-block; opacity: 0.28; transition: opacity 0.7s var(--ease-suave); }
.frase .palavra.acesa { opacity: 1; }
html.sem-js .frase .palavra, html.reduz .frase .palavra { opacity: 1; }

/* ---------- como funciona (rota) ---------- */
.rota { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.rota::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; border-top: 1.5px dashed var(--fio-forte);
  transform-origin: left; transform: scaleX(var(--traco, 1));
}
.rota li { position: relative; padding-top: 32px; }
.rota li::before {
  content: ''; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--preto); border: 1.5px solid var(--ouro);
  transform: scale(var(--no, 1)); transition: transform 0.5s var(--ease);
}
.rota li:last-child::before { background: var(--ouro); }
.rota .num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ouro); }
.rota h3 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; margin: 10px 0 10px; }
.rota p { color: var(--areia); font-size: 0.95rem; max-width: 28ch; }

/* ---------- sobre ---------- */
.sobre-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.retrato {
  position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto;
  border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 70% at 50% 35%, var(--nucleo) 0%, var(--carvao) 60%, var(--preto) 100%);
}
.retrato img {
  position: absolute; left: 50%; top: 6%; width: 118%; height: auto; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, var(--mascara) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--mascara) 70%, transparent 100%);
}
.retrato-anel {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  border: 1.5px solid var(--ouro);
  box-shadow: inset 0 0 0 10px var(--preto), inset 0 0 0 11px var(--ouro-claro-35);
}
.sobre-texto h2 { margin-bottom: 8px; }
.sobre-texto .cargo { color: var(--ouro-claro); font-family: var(--serif); font-size: 1.25rem; margin-bottom: 28px; }
.sobre-texto p + p { margin-top: 18px; }
.sobre-texto .lede { max-width: 52ch; }
.sobre-lista { margin-top: 32px; display: grid; gap: 12px; border-top: 1px solid var(--fio); padding-top: 24px; }
.sobre-lista li { display: flex; gap: 14px; align-items: baseline; color: var(--marfim-2); font-size: 0.98rem; }
.sobre-lista li::before { content: ''; width: 10px; height: 1px; background: var(--ouro); flex: none; transform: translateY(-4px); }
.sobre-texto .pilula { margin-top: 36px; }

/* ---------- o que guardar ---------- */
.guardar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--fio); border-left: 1px solid var(--fio); }
.guardar-item { padding: 32px 28px 36px; border-right: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.guardar-item svg { width: 28px; height: 28px; color: var(--ouro); stroke-width: 1.4; }
.guardar-item h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin: 22px 0 10px; }
.guardar-item p { color: var(--areia); font-size: 0.93rem; }

/* ---------- dúvidas ---------- */
.duvidas-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.duvidas-grade .titulo { position: sticky; top: 110px; }
.faq { border-top: 1px solid var(--fio); }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.2;
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ouro-claro); }
.faq summary .painel-mais-ind { flex: none; }
.faq details[open] .painel-mais-ind::after { transform: rotate(90deg); }
.faq .resposta { color: var(--areia); max-width: 62ch; padding: 0 0 26px; font-size: 0.98rem; }

/* ---------- chamada final ---------- */
.final { text-align: center; }
.final .miolo { display: grid; justify-items: center; gap: 28px; }
.final h2 { font-size: clamp(2.4rem, 1.2rem + 4vw, 5rem); max-width: 14ch; }
.final .lede { text-align: center; max-width: 44ch; }
.final .cartao { text-align: left; margin-top: 12px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--fio); padding: 64px 0 32px; color: var(--areia); font-size: 0.92rem; }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; align-items: start; }
.rodape-logo { width: min(100%, 300px); }
.rodape-logo img { width: 100%; }
.rodape h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--marfim); margin-bottom: 14px; font-weight: 400; }
.rodape ul { display: grid; gap: 10px; }
.rodape a:hover { color: var(--ouro-claro); }
.rodape-base {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--fio);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--areia-2);
}
.rodape-base a { color: var(--areia-2); }
.rodape-base a:hover { color: var(--ouro-claro); }

/* ---------- botão flutuante (celular) ---------- */
.flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--ouro); color: var(--tinta);
  display: none; place-items: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 8px 24px var(--mascara-45);
}
.flutuante svg { width: 26px; height: 26px; }
.flutuante.visivel { opacity: 1; transform: none; }

/* ---------- palavras dos títulos ---------- */
.pal { display: inline-block; }
html.js:not(.reduz) .titulo[data-entra], html.js:not(.reduz) .final h2[data-entra] { opacity: 1; transform: none; }
html.js:not(.reduz) .titulo[data-entra] .pal, html.js:not(.reduz) .final h2[data-entra] .pal {
  opacity: 0; transform: translateY(0.45em);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
html.js:not(.reduz) .titulo[data-entra].entrou .pal, html.js:not(.reduz) .final h2[data-entra].entrou .pal { opacity: 1; transform: none; }

/* ---------- estados iniciais só com JS ---------- */
html.js:not(.reduz) [data-entra] { opacity: 0; transform: translateY(22px); }
html.js:not(.reduz) [data-entra].entrou { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.js:not(.reduz) .hero [data-hero] { opacity: 0; }

/* ---------- páginas simples (privacidade, 404) ---------- */
.pagina-simples { min-height: 100svh; display: grid; align-items: center; padding: 140px 0 80px; }
.pagina-simples .miolo { display: grid; gap: 24px; max-width: 720px; }
.pagina-simples .display { font-size: clamp(2.6rem, 1.2rem + 4vw, 5rem); }
.pagina-simples .lede + .lede { margin-top: -8px; }
.pagina-simples a.volta { color: var(--ouro-claro); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- movimento reduzido ---------- */
@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; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .hero-miolo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

@media (max-width: 900px) {
  .menu, .topo .pilula { display: none; }
  .hamburguer { display: block; }
  .hero { padding-top: 104px; }
  .hero-miolo { grid-template-columns: 1fr; gap: 0; }
  .hero-texto { padding-bottom: 12px; }
  .hero-foto { width: min(100%, 420px); justify-self: end; margin-top: 8px; }
  .hero-conhecer { display: none; }
  .so-celular { display: inline; }
  .hero-foto img {
    -webkit-mask-image: linear-gradient(to bottom, var(--mascara) 72%, var(--mascara-70) 88%, transparent 99%);
    mask-image: linear-gradient(to bottom, var(--mascara) 72%, var(--mascara-70) 88%, transparent 99%);
  }
  .cabeca { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .painel-colunas { display: none; }
  .painel-linha summary { grid-template-columns: 1fr auto; row-gap: 10px; padding: 20px 18px; }
  .painel-linha summary .painel-desc { grid-column: 1 / -1; }
  .painel-corpo { grid-template-columns: 1fr; padding: 4px 18px 24px; gap: 18px; }
  .painel-corpo .guardar-mini { grid-column: 1; }
  .painel-corpo .pilula { grid-row: auto; }
  .rota { grid-template-columns: 1fr; gap: 28px; padding-left: 32px; }
  .rota::before { left: 7px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--fio-forte); transform-origin: top; transform: scaleY(var(--traco, 1)); }
  .rota li { padding-top: 0; }
  .rota li::before { left: -32px; top: 6px; }
  .sobre-grade { grid-template-columns: 1fr; }
  .relato-grade { grid-template-columns: 1fr; gap: 32px; }
  .ficha { padding: 18px 18px 22px; }
  .retrato { width: min(100%, 320px); }
  .guardar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duvidas-grade { grid-template-columns: 1fr; gap: 32px; }
  .duvidas-grade .titulo { position: static; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .flutuante { display: grid; }
}

@media (max-width: 600px) {
  .marca-nome { font-size: 1.15rem; }
  .hero { padding-top: 92px; }
  .hero h1 { font-size: clamp(2.3rem, 1rem + 6vw, 2.6rem); }
  .etiqueta { margin-bottom: 14px; font-size: 0.66rem; }
  .etiqueta span + span::before { margin: 0 10px; }
  .hero .lede { font-size: 1rem; margin-top: 14px; }
  .hero-acoes { margin-top: 28px; gap: 12px; }
  .hero-nota { font-size: 0.72rem; }
  .rota-ponto b { white-space: normal; }
  .cartao { flex-direction: column; width: 100%; }
  .cartao-corpo { border-radius: var(--raio) var(--raio) 0 0; border-right: 0; border-bottom: 1.5px dashed var(--tinta-32); padding: 16px 18px 18px; }
  .cartao-canhoto { flex-basis: auto; border-radius: 0 0 var(--raio) var(--raio); flex-direction: row; align-items: center; padding: 14px 18px; }
  .canhoto-codigo { width: 84px; height: 30px; }
  .cartao::before, .cartao::after { right: auto; bottom: auto; top: auto; transform: translateY(-50%); }
  .cartao::before { left: -9px; top: calc(100% - 62px); }
  .cartao::after { right: -9px; top: calc(100% - 62px); }
  .rota-ponto b { font-size: 1rem; line-height: 1.15; }
  .cartao-rota { grid-template-columns: 1fr auto 1fr; gap: 10px; }
  .guardar { grid-template-columns: 1fr; }
  .guardar-item { padding: 26px 22px 30px; }
  .rodape-grade { grid-template-columns: 1fr; gap: 32px; }
  .frase { max-width: 18ch; }
}