/* =========================================================
   Tsoah — landing page
   Recriação do Figma VCOraW8uVi9GGHIPK0Z2FB (node 1:434)
   Grade base: 1920px de página, container de 1200px centralizado.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* cores */
  --cream:        #efebe5;  /* fundo das seções */
  --line:         #e6dfd7;  /* divisórias */
  --line-soft:    #d8d1c6;  /* borda das tags do hero */
  --ink:          #333333;  /* títulos */
  --ink-soft:     #434343;  /* corpo de texto */
  --navy:         #06307c;  /* botão primário */
  --navy-deep:    #0f3975;  /* marco 2002 / linha do tempo */
  /* os mesmos canais do --navy, soltos: é o que permite montar um rgb()
     com alfa a partir do token, sem repetir o hex em cada degradê */
  --navy-rgb:     6 48 124;
  --wine:         #621a1d;
  --roxo:         #6f3b7b;  /* pílula do Blog no menu */
  --roxo-escuro:  #5c3066;  /* a mesma, sob o mouse */
  --footer-ink:   #272727;
  --footer-muted: #585858;
  --white:        #ffffff;

  /* tipografia */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --container: 1200px;
  --gutter: 24px;

  /* diagrama do Eixo Integrador
     A caixa é quadrada e maior que o desenho porque os nomes giram: cada
     um passa pelos lados, onde o que ocupa espaço é a largura do texto.
     --dia-escala devolve o conjunto ao tamanho que cabe na seção. */
  --dia-lado: 782px;
  --dia-escala: .87;
  --dia-giro: 54s;    /* uma volta completa da órbita */
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  /* Explícito porque o desenho foi feito sobre o padrão do navegador, e
     tema de WordPress costuma impor outro: o reset do Hello Elementor
     define body { line-height: 1.5 }, que herdava para tudo que não
     declara o seu e engordava os links do menu e os botões em 4px.
     Cada componente continua definindo o seu onde importa. */
  line-height: normal;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, p, ul, ol, figure { margin: 0; }

/* O atributo hidden vem do navegador como display:none, mas qualquer
   regra de autor com display o derruba — e aí o elemento continua
   invisível e clicável. Esta linha garante que hidden signifique hidden. */
[hidden] { display: none !important; }
ul, ol { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

::selection { background: var(--navy); color: #fff; }

/* ---------- 3. Utilitários ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Elemento posicionado por coordenada do Figma.
   Cada instância traz --x / --y / --w / --h no HTML. */
.fig {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  max-width: none;
}

/* ---------- 4. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;
  border-radius: 2px;
  font-size: 12px;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.btn--solid {
  width: 218px;
  background: var(--navy);
  color: var(--white);
}
.btn--solid:hover { opacity: .9; }

/* O botão de apoio dos pares do topo — na home e nas páginas internas: em
   repouso é só contorno sobre o fundo da seção, para não disputar com o azul
   sólido ao lado. Ao ser tocado ele assume o vinho da marca — era preto, que
   não pertence à paleta e endurecia a página inteira.

   O par do hero da home chegou a ter uma variante cheia em vinho; ela saiu
   para os dois pares ficarem iguais, que é o que o botão secundário pede:
   ler como apoio, não como um segundo convite do mesmo peso. */
.btn--outline {
  width: 154px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--outline:hover,
.btn--outline:focus-visible,
.btn--outline:active {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--white);
}

.btn--arq { width: 190px; height: 48px; }

/* =========================================================
   5. HEADER (Figma 1:459)
   ========================================================= */
/* O header vive fora do <section class="hero"> — se ficasse dentro, o
   overflow:hidden da seção impediria o sticky do mobile de funcionar.
   No desktop ele volta a flutuar sobre a foto. */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A goteira mora no .header-inner, não aqui, para o header repetir
     exatamente a conta dos containers de conteúdo (max-width 1200 +
     margem auto + padding interno). Com os 100px fixos de antes, a logo
     caía 39px à direita do texto das seções entre 1280 e 1400px. */
  padding: 20px 0;
  /* O desfoque do Figma só acende ao passar o mouse. Em repouso o header
     é transparente e a foto do hero aparece inteira por baixo. */
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color .4s ease, backdrop-filter .4s ease,
              -webkit-backdrop-filter .4s ease;
}

/* focus-within mantém o desfoque para quem navega pelo teclado */
.header:hover,
.header:focus-within {
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(13.25px);
  -webkit-backdrop-filter: blur(13.25px);
}

.header-inner {
  width: 100%;
  max-width: var(--container);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { width: 112.458px; height: 37.111px; }

/* A logo encosta na mesma vertical do texto da página.
   Nas páginas internas isso já acontece sozinho: o `.header-inner` e os
   `.secao-inner` têm a mesma largura máxima e a mesma goteira. A home é a
   exceção, porque o texto do hero avança sobre a goteira pelos -13.14px
   do Figma — então a logo desce o mesmo tanto, lendo a variável que o
   próprio hero usa. Em `relative`, para não mexer na largura do header. */
@media (min-width: 1024px) {
  body:not(.pagina) .logo {
    position: relative;
    left: calc(var(--hero-recuo) - var(--gutter));
  }
}

.nav ul { display: flex; align-items: center; gap: 8px; }

.nav a {
  display: block;
  padding: 8px;
  border-radius: 100px;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  transition: color .2s ease;
}
.nav a:hover { color: var(--navy); }

/* O Blog é o único item do menu que leva para fora do site. A cor sozinha
   já dá esse aviso — o preenchimento roxo pesava como um segundo botão ao
   lado do "Agendar consulta", que é a ação que a página quer. Sem fundo,
   ele volta a ser um item de menu, só que em roxo.

   Fora a cor, ele é igual aos vizinhos: mesmo padding, mesmo gap. O que o
   põe sobre a cabeça não é um respiro extra só dele — é o deslocamento do
   menu inteiro, logo abaixo. */
.nav .nav-blog { color: var(--roxo); }
.nav .nav-blog:hover { color: var(--roxo-escuro); }

/* O menu inteiro desliza para a direita até o Blog cair sobre a cabeça da
   pessoa na foto da home.

   A conta: a foto é `object-fit: cover` centrada e, até 1829px de largura,
   é cortada pelos lados — o que mantém a cabeça sempre à mesma distância
   do centro da tela. O menu também é centrado, então a diferença entre as
   duas é constante, e um deslocamento fixo resolve em todas as larguras
   dessa faixa.

   Deslocar o menu, e não alargar o Blog, é o que mantém os sete itens
   igualmente espaçados: em `relative` o menu muda de lugar sem mudar de
   tamanho, e os vãos entre os links continuam os mesmos.

   Só a partir de 1150px: abaixo disso o menu já encosta na logo e no botão
   de agendar, e empurrá-lo faria os três se tocarem.

   Acima de 1829px a foto deixa de ser cortada e a cabeça passa a correr
   mais rápido que o menu: em 1920 sobram alguns pixels. Dá para acompanhar
   com um deslocamento em vw, mas aí, de 2200px em diante, o menu encosta
   na logo e no botão — a tela acaba antes. Fica o desalinhamento, que é
   invisível em 1920 e só cresce em monitor muito largo. */
@media (min-width: 1150px) {
  .nav { position: relative; left: 45px; }
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--white);
  color: #000;
  font-size: 12px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

/* Branco em repouso, preto ao passar o mouse. Era opacidade: sobre a foto
   do hero o botão ficava translúcido em vez de reagir, e o texto perdia
   contraste justo no momento em que alguém está prestes a clicar. */
.header-cta:hover,
.header-cta:focus-visible {
  background: var(--ink);
  color: var(--white);
}

/* ---------- botão do menu (só mobile) ---------- */
.menu-btn {
  display: none;
  position: relative;
  width: 48px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--white);
  cursor: pointer;
}

/* as três linhas do Figma: 25px de largura, em y=15, 20 e 25 */
.menu-btn span {
  position: absolute;
  left: 11.5px;
  width: 25px;
  height: 1px;
  background: #000;
  transition: transform .3s cubic-bezier(.33, .1, .25, 1), opacity .2s ease;
}
.menu-btn span:nth-child(1) { top: 14.5px; }
.menu-btn span:nth-child(2) { top: 19.5px; }
.menu-btn span:nth-child(3) { top: 24.5px; }

/* aberto: vira um X */
.menu-btn[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- painel do menu ---------- */
.menu-painel {
  position: fixed;
  inset: 0;
  z-index: 60;   /* o header fica acima, em 70, para o X seguir à mão */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--gutter) 40px;
  background: var(--cream);
  opacity: 0;
  transition: opacity .32s ease;
}
.menu-painel.aberto { opacity: 1; }

.menu-nav {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.menu-nav ul { display: flex; flex-direction: column; gap: 4px; }

.menu-nav li,
.menu-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 45ms + 80ms);
}
.menu-painel.aberto li,
.menu-painel.aberto .menu-cta { opacity: 1; transform: none; }

.menu-nav a {
  display: block;
  padding: 12px 0;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.6px;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.menu-nav a:hover { color: var(--navy); }

/* No menu do celular o Blog também é só cor: sem preenchimento, ele volta
   ao ritmo da lista e o único bloco cheio do painel continua sendo o botão
   de agendar. */
.menu-nav .nav-blog { color: var(--roxo); }
.menu-nav .nav-blog:hover { color: var(--roxo-escuro); }

.menu-nav .menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 8px;
  padding: 20px 28px;
  border-radius: 2px;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
}

/* com o menu aberto a página atrás não rola */
body.menu-travado { overflow: hidden; }

/* =========================================================
   6. HERO (Figma 1:435)
   ========================================================= */
.hero {
  position: relative;
  height: 865px;
  overflow: hidden;
}

.hero-bg,
.hero-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* No Figma este bloco está em x=346,86 — 13,14px à esquerda da grade de 1200. */
/* O recuo lateral do texto do hero, num lugar só: a logo do header se
   posiciona a partir dele (ver `.logo` na seção do header) e as duas não
   têm como sair de alinhamento. Os -13.14px vêm do Figma — o texto do hero
   é o único do site que avança sobre a goteira. */
:root { --hero-recuo: -13.14px; }

.hero-main {
  position: absolute;
  top: 192px;
  left: var(--hero-recuo);
  width: 571px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-size: 10px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
}
.tag--fixed { width: 144px; }

.hero-head { display: flex; flex-direction: column; gap: 40px; width: 100%; }

.hero-head h1 {
  font-family: var(--display);
  font-size: 129px;
  font-weight: 400;
  line-height: .81;
  color: var(--ink);
}

.hero-head p {
  max-width: 350px;
  font-size: 18px;
  line-height: 1.29;
  color: var(--ink-soft);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }

/* =========================================================
   7. FRASE (Figma 1:493)
   ========================================================= */
.frase {
  height: 438px;
  border: 1px solid var(--line);
  background: var(--cream);
}

.frase-inner {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.frase-text {
  width: 600px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
}

.frase-text h2 {
  max-width: 482.958px;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: -2.24px;
  color: var(--ink-soft);
}

.wine { color: var(--wine); }

.frase-art {
  position: absolute;
  left: 596.86px;
  top: 0;
  width: 600px;
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* A ilustração é um SVG inline: cada traço precisa ser um elemento
   próprio para poder ser desenhado (ver animations.css). */
.orb { display: block; width: 532.59px; height: 382.506px; overflow: visible; }

/* =========================================================
   8. CARDS (Figma 1:507)
   ========================================================= */
.cards {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cards-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

.card {
  flex: 0 0 300px;
  width: 300px;
  height: 394.055px;
  padding: 46px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid var(--line);
}
.card:last-child { border-right: 1px solid var(--line); }

.card-figure {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Os desenhos são SVG inline para que cada forma possa se mover sozinha.
   O viewBox é o original do Figma; só width/height foram reduzidos. */
.card-art { display: block; overflow: visible; }

/* Uma forma do desenho.
   --cx/--cy  centro da forma (do bbox do próprio filtro no Figma)
   --tx/--ty  deslocamento até o centro do desenho, no hover
   --s        leve recolhimento
   --d        atraso em ms, para as formas não chegarem todas juntas

   As quatro funções de transform existem nos dois estados, então o
   navegador interpola componente a componente em vez de virar matriz. */
.sh {
  transform-box: view-box;
  transform-origin: 0 0;
  transform:
    translate(0px, 0px)
    translate(var(--cx), var(--cy))
    scale(1)
    translate(calc(var(--cx) * -1), calc(var(--cy) * -1));
  transition: transform .3s cubic-bezier(.33, .1, .25, 1);
  transition-delay: 0ms;
}

.card:hover .sh,
.card:focus-visible .sh {
  transform:
    translate(var(--tx), var(--ty))
    translate(var(--cx), var(--cy))
    scale(var(--s))
    translate(calc(var(--cx) * -1), calc(var(--cy) * -1));
  transition-delay: calc(var(--d, 0) * 1ms);
}

.card-label {
  width: 259.966px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  overflow: hidden;
}

.card-label-text {
  flex: none;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.11;
  letter-spacing: -.96px;
  white-space: nowrap;
  color: var(--ink);
}

/* --arrow-travel é medido por JS: o espaço livre exato de cada rótulo.
   Sem JS, a seta ainda dá os 4px de sempre. */
.arrow {
  flex: none;
  width: 16.373px;
  height: 16.373px;
  max-width: none;
  transition: transform .3s cubic-bezier(.33, .1, .25, 1);
}
/* O max() garante um curso mínimo onde o rótulo é do tamanho do texto e
   não sobra folga medida — caso das telas entre 1024 e 1279. */
.card:hover .arrow,
.card:focus-visible .arrow { transform: translateX(max(4px, var(--arrow-travel, 4px))); }

/* =========================================================
   9. MARCOS (Figma 1:576)
   ========================================================= */
.marcos {
  height: 185px;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.marcos-inner {
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
}

/* São cinco marcos: cada um leva um quinto da grade, não 300px fixos. */
.marco {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 31px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.marco + .marco { border-left: 1px solid var(--line); }

.marco-num {
  width: 100%;
  font-size: 56px;
  line-height: 1.11;
  letter-spacing: -2.24px;
  white-space: nowrap;
}

/* "mil" acompanha o número em corpo menor, na mesma linha de base */
.marco-unid {
  font-size: .44em;
  letter-spacing: -.02em;
  margin-left: 2px;
}

.marco-label {
  width: 100%;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.11;
  letter-spacing: -.72px;
  white-space: pre-wrap;
}

/* =========================================================
   10. ARQUITETURA (Figma 1:543)
   ========================================================= */
.arq { background: var(--cream); }

.arq-inner {
  height: 800px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 58px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.arq-head {
  flex: 0 0 389px;
  width: 389px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 31px;
}

.arq-head-text { display: flex; flex-direction: column; gap: 24px; color: var(--ink-soft); }

.arq-head-text h2 {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -2.24px;
}

.arq-head-text p { font-size: 16px; line-height: 1.29; }

.arq-art {
  flex: 0 0 auto;
  width: calc(var(--dia-lado) * var(--dia-escala));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* O desenho tem sempre 752px de lado. Quem encolhe é o .dia, pelo
   transform; o .dia-wrap guarda o tamanho já reduzido para que o layout
   reserve o espaço certo — transform não mexe em layout. */
.dia-wrap {
  width: calc(var(--dia-lado) * var(--dia-escala));
  height: calc(var(--dia-lado) * var(--dia-escala));
  /* A órbita é um ponto 0x0 com filhos posicionados em volta. Enquanto
     ela gira, o Chromium soma a caixa NÃO rotacionada desses filhos ao
     overflow do documento: aos 45° isso rende ~60px de rolagem lateral
     que ninguém vê, porque nada do desenho passa da borda do .dia.
     O clip corta esse excesso fantasma; a margem de 8px garante que
     nem a borda do traçado seja tocada. */
  overflow: clip;
  overflow-clip-margin: 8px;
}

.dia {
  position: relative;
  width: var(--dia-lado);
  height: var(--dia-lado);
  transform: scale(var(--dia-escala));
  transform-origin: top left;
}

/* ---------- o grupo que orbita ----------
   Anel colorido, nós e nomes giram juntos em torno do centro do diagrama.
   A grade — anéis pontilhados, raios e núcleo — fica parada por baixo. */
/* É um ponto no centro, não uma caixa: uma caixa de 754px girando 45°
   teria 1066px de área de rolagem e inventaria barra de rolagem. As peças
   penduram nele por coordenadas relativas ao centro. */
.dia-orbita {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: dia-girar var(--dia-giro) linear infinite;
  animation-play-state: paused;
}

/* ---------- o núcleo respirando ---------- */
.dia-pulso {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: block;
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: dia-pulsar var(--dia-pulso, 5s) ease-in-out infinite;
  animation-play-state: paused;
}

/* A onda que sai do núcleo é um círculo próprio que cresce e some.
   Antes era box-shadow, que repinta a cada quadro e custava 20fps;
   transform e opacity o navegador resolve na composição, de graça. */
.dia-halo {
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  /* degradê em vez de preenchimento chapado: assim a onda não tem borda */
  background: radial-gradient(closest-side,
    rgb(var(--navy-rgb) / .26) 62%,
    rgb(var(--navy-rgb) / .10) 80%,
    rgb(var(--navy-rgb) / 0) 100%);
  opacity: 0;
  transform-origin: 50% 50%;
  animation: dia-halo var(--dia-pulso, 5s) ease-out infinite;
  animation-play-state: paused;
}

/* raio: linha vertical girada em torno do centro da caixa */
.spoke {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spoke-rot { flex: none; transform: var(--rot); }
.spoke-line { display: block; position: relative; width: 0; height: var(--len); }
.spoke-line img {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: var(--len);
  max-width: none;
}

/* Anel cromático (Figma "Ellipse 67").
   O export SVG do Figma usa foreignObject + conic-gradient, que navegador
   nenhum renderiza dentro de <img>. Reconstruído aqui com o mesmo gradiente
   angular e o mesmo stroke interno de 4px. */
.dia-ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    rgba(135, 18, 88, 1) 0deg,
    rgba(234, 9, 12, 1) 38.0902deg,
    rgba(234, 234, 24, 1) 80.2367deg,
    rgba(255, 216, 0, 1) 114.653deg,
    rgba(94, 37, 109, 1) 150.375deg,
    rgba(95, 38, 109, 1) 214.527deg,
    rgba(78, 150, 39, 1) 245.759deg,
    rgba(71, 199, 221, 1) 276deg,
    rgba(32, 28, 166, 1) 320.51deg,
    rgba(135, 18, 88, 1) 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask-image: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}

/* O nome viaja na órbita, mas recebe a rotação contrária — mesma duração,
   sentido oposto — então o texto nunca sai da horizontal. Por isso a caixa
   e o texto são elementos separados: a caixa gira, o texto desgira. */
.dia-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  animation: dia-contragirar var(--dia-giro) linear infinite;
  animation-play-state: paused;
}

.d-label {
  display: block;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.11;
  letter-spacing: -.92px;
  white-space: nowrap;
  text-align: center;
  color: var(--ink-soft);
}

.dia-core {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -1.28px;
  text-align: center;
  color: var(--white);
}

/* =========================================================
   11. SOBRE (Figma 1:590)
   ========================================================= */
.sobre { display: flex; align-items: stretch; background: var(--cream); }

.sobre-img { flex: 0 0 50%; position: relative; overflow: hidden; }

.sobre-img img {
  position: absolute;
  top: .04%;
  left: -46.51%;
  width: 200.74%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.sobre-body {
  flex: 0 0 600px;
  width: 600px;
  height: 892.07px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.sobre-body h2 {
  width: 520px;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: -2.24px;
  color: var(--ink-soft);
}

/* --- linha do tempo (Figma 1:593) --- */
.tl {
  position: relative;
  width: 556px;
  height: 726.07px;

  /* Bolinha, traço, recuo e gap num lugar só: a posição horizontal da linha
     é calculada a partir do diâmetro da bolinha, então as duas não têm como
     sair de centro. */
  --tl-bola: 13.42px;
  --tl-traco: 2px;
  --tl-recuo: 26px;
  --tl-gap: 16px;
  --tl-cor: rgba(15, 57, 117, .36);
}

.tl-lead {
  position: absolute;
  left: 1px;
  top: 0;
  width: 469px;
  font-size: 24px;
  line-height: 1.29;
  color: var(--ink-soft);
}
.tl-lead strong { font-weight: 700; }

.tl-items {
  position: absolute;
  left: var(--tl-recuo);
  top: 111px;
  width: 530px;
  display: flex;
  flex-direction: column;
  gap: var(--tl-gap);
}

.tl-item { position: relative; display: flex; flex-direction: column; gap: 8px; }

/* --dy carrega o deslocamento exato de cada bolinha no Figma */
.tl-dot {
  position: absolute;
  left: calc(var(--tl-recuo) * -1);
  top: var(--dy);
  width: var(--tl-bola);
  height: var(--tl-bola);
  max-width: none;
}

/* A linha vertical é desenhada por marco, não como uma barra única de altura
   fixa: a altura fixa era calibrada para uma ordem e uma quebra de texto
   específicas e, assim que os marcos foram invertidos, parou de alcançar a
   última bolinha. Agora cada marco desenha o trecho acima da sua bolinha
   (::before) e o trecho abaixo dela até o marco seguinte (::after), então a
   linha reencontra as bolinhas sozinha, qualquer que seja a ordem ou o
   tamanho dos textos.

   Os dois trechos param na borda da bolinha em vez de passar por baixo dela:
   o marcador de "Hoje" é um círculo vazado e a linha apareceria atravessando
   o meio dele. Nas bolinhas cheias, o próprio preenchimento emenda os dois
   trechos. */
.tl-item::before,
.tl-item::after {
  content: "";
  position: absolute;
  left: calc((var(--tl-bola) - var(--tl-traco)) / 2 - var(--tl-recuo));
  width: var(--tl-traco);
  background: var(--tl-cor);
}
.tl-item::before { top: 0; height: var(--dy); }
.tl-item::after {
  top: calc(var(--dy) + var(--tl-bola));
  bottom: calc(var(--tl-gap) * -1);  /* atravessa o vão até o próximo marco */
}

/* as pontas: a linha nasce na primeira bolinha e morre na última */
.tl-item:first-child::before,
.tl-item:last-child::after { content: none; }

.tl-year {
  height: 30.014px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.351;
  color: var(--c);
}

.tl-text { font-size: 16px; line-height: 1.2; color: var(--ink-soft); }

/* =========================================================
   12. FOOTER (Figma 1:610)
   ========================================================= */
.footer { background: var(--white); padding: 90px 0 22px; }

.footer-inner { width: 100%; max-width: var(--container); margin-inline: auto; }

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.footer-brand { flex: 0 0 318px; width: 318px; display: flex; flex-direction: column; gap: 34px; }

.footer-brand-block { display: flex; flex-direction: column; gap: 50px; }

.footer-name {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--footer-ink);
}

.footer-slogan { font-size: 16px; line-height: 1.38; color: var(--footer-muted); }

.footer-social { display: flex; align-items: center; gap: 15px; }
.footer-social a { transition: opacity .2s ease; }
.footer-social a:hover { opacity: .7; }
.footer-social img { width: 32px; height: 32px; }

.footer-links { display: flex; align-items: flex-start; gap: 34px; }

.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col--nav { flex: 0 0 242px; width: 242px; }
/* a coluna acompanha o conteúdo: o e-mail novo tem 218px e não cabia
   nos 207 fixos herdados do Figma */
.footer-col--contact { flex: 0 0 auto; width: auto; min-width: 207px; }

.footer-col h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--footer-ink);
}

.footer-col ul { display: flex; flex-direction: column; gap: 8px; }

.footer-col li { font-size: 16px; line-height: 1.38; color: var(--footer-muted); }

/* "assessoria": quem atende naquele número. Vai numa linha própria —
   ao lado do telefone somava 218px numa coluna de 207 e vazava. */
.footer-nota {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--footer-muted);
  opacity: .72;
}
.footer-col a { transition: color .2s ease; }
.footer-col a:hover { color: var(--ink); }

/* Voltar ao topo. Fica no pé da coluna de Contato, o fim natural da
   leitura do rodapé. Âncora de verdade, não JavaScript: funciona com a
   página ainda carregando e o scroll-behavior: smooth da folha cuida do
   deslize.

   O destino é #top, e não um id nosso. Antes apontava para o #topo que
   ficava no <header>, e isso funcionava no desktop e falhava no celular:
   abaixo de 1024px o header é `position: fixed`, e não se rola até um
   elemento que já está sempre na tela — o navegador não tinha para onde
   ir. #top é um fragmento que o HTML define como "o começo do documento",
   independente de existir elemento com esse id, então vale em qualquer
   largura e em qualquer página.

   align-self: flex-start para o botão medir o próprio texto: a coluna é
   flex e, sem isso, ele esticaria de ponta a ponta. */
.footer-topo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 16px;
  border-radius: 2px;
  background: #383838;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease;
}

/* dois seletores: .footer-col a já pinta os links desta coluna, e uma
   classe sozinha empataria com ele */
.footer-col .footer-topo,
.footer-col .footer-topo:hover { color: var(--white); }
.footer-topo:hover,
.footer-topo:focus-visible { background: var(--footer-ink); }

.footer-copy {
  margin-top: 13px;
  max-width: 524px;
  font-size: 14px;
  line-height: 1.38;
  color: var(--ink-soft);
}

/* =========================================================
   13. Mobile e tablet
   Abaixo de 1024px a página segue o frame Mobile do Figma
   (node 45:40, 390px de largura), não uma redução do desktop.
   ========================================================= */

/* --- até 1279px: o container ganha respiro lateral --- */
@media (max-width: 1279.98px) {
  .frase-inner { padding: 0 var(--gutter); }
  .arq-inner { padding: 58px var(--gutter); }
  .footer-inner { padding: 0 var(--gutter); }
}

/* =========================================================
   1024px a 1279px — notebook pequeno e iPad na horizontal
   O Figma não tem frame para esta faixa. A composição de duas colunas
   do desktop é mantida, mas as larguras fixas de 1200px viram proporção
   e as ilustrações passam a escalar. Sem isso o layout de desktop
   entrava em 1024 precisando de ~1250.
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279.98px) {

  /* ---------- HERO ----------
     O recuo de -13,14px do Figma só existe porque a grade de 1200 tem
     folga dos dois lados. Sem folga ele joga o texto para fora da tela,
     então aqui ele ganha a goteira de volta. A logo lê esta mesma
     variável e acompanha. */
  :root { --hero-recuo: calc(var(--gutter) - 13.14px); }

  /* ---------- FRASE ----------
     A arte sai do posicionamento absoluto e vira a segunda coluna do
     flex. O SVG tem viewBox, então basta largura 100% para escalar
     inteiro — inclusive as máscaras das órbitas. */
  .frase-text {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: 24px;
  }
  .frase-text h2 { max-width: none; }

  .frase-art {
    position: static;
    flex: 0 0 44%;
    width: auto;
    height: auto;
  }
  .orb { width: 100%; height: auto; }

  /* ---------- CARDS e MARCOS ----------
     Quatro colunas de 300px dão 1200. Viram quatro frações iguais. */
  .card,
  .marco {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .card-label { width: auto; max-width: 100%; }

  /* ---------- ARQUITETURA ----------
     A coluna do texto fica nos 389px e o diagrama leva o que sobra. */
  .arq { --dia-escala: .66; }

  /* ---------- SOBRE ----------
     A foto a 50% mais a coluna de 600px somavam 1112 numa tela de 1024.
     A foto cede a diferença e o texto passa a ocupar o resto. */
  .sobre-img { flex: 0 0 42%; }

  .sobre-body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 40px;
  }
  .sobre-body h2 { width: 100%; max-width: 520px; }

  .tl { width: 100%; }
  .tl-lead { width: 100%; max-width: 469px; }
  .tl-items { width: calc(100% - 26px); }
}

/* =========================================================
   Abaixo de 1024px — o desenho mobile do Figma
   ========================================================= */
@media (max-width: 1023.98px) {

  /* ---------- HEADER (Figma 45:106) ----------
     No mobile o header é uma faixa de 60px, não um overlay sobre a foto:
     no Figma o HERO começa em y=60. */
  body { padding-top: 60px; }

  .nav,
  .header-cta { display: none; }
  .menu-btn { display: block; }

  /* fixo, não sticky: o overflow-x:hidden do body transforma o body num
     contêiner de rolagem e sticky para de funcionar ali dentro. O recuo
     equivalente entra no próprio body, logo abaixo. */
  /* a faixa já é branca e sólida: aqui não há desfoque, nem no hover */
  .header,
  .header:hover,
  .header:focus-within {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 70;
    height: 60px;
    padding: 10px 0;
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header-inner { max-width: none; padding-inline: 20px; }
  .logo img { width: 96px; height: auto; }

  /* o painel começa abaixo da faixa do header */
  .menu-painel { padding-top: 80px; align-items: flex-start; }

  /* ---------- FRASE (Figma 45:141) ----------
     No mobile o título fica centralizado e a ilustração continua
     presente, reduzida a 65% — é a mesma arte do desktop. */
  .frase { height: auto; }

  .frase-inner {
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    min-height: 498px;
    padding: 40px 20px;
  }

  .frase-text {
    width: 100%;
    max-width: 348px;
    height: auto;
    border-right: 0;
    padding: 0;
  }
  .frase-text h2 {
    max-width: none;
    font-size: 40px;
    line-height: 1.11;
    letter-spacing: -1.6px;
    text-align: center;
  }

  .frase-art {
    position: static;
    width: 347px;
    max-width: 100%;
    height: auto;
    display: flex;
  }
  /* O SVG tem viewBox: largura 100% escala o desenho inteiro, máscaras
     inclusive, e a altura sai da proporção (347 x 249,2 é o tamanho do
     Figma mobile). Escalar por transform deixaria a caixa com os 532,59px
     originais e estouraria a tela em 320px. */
  .orb { width: 100%; height: auto; }

  /* ---------- CARDS (Figma 45:160) ----------
     Um card por linha, ocupando a largura toda, separados por um fio. */
  .cards-inner { flex-direction: column; }

  .card {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 61px;
    padding: 46px 20px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .card:last-child { border-right: 0; border-bottom: 0; }

  .card-figure { width: 100%; height: 200px; }
  .card-label { max-width: 100%; }

  /* ---------- ARQUITETURA (Figma 45:205) ---------- */
  .arq-inner {
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 72px 20px;
    border-left: 0;
    border-right: 0;
  }

  .arq-head {
    flex: 0 0 auto;
    width: 100%;
    max-width: 350px;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .arq-head-text { align-items: center; gap: 24px; }

  .arq { --dia-escala: .49; }
  .arq-art { flex: 0 0 auto; width: 100%; align-items: center; }
  .dia-wrap { margin-inline: auto; }

  /* ---------- MARCOS (Figma 45:239) ---------- */
  .marcos { height: auto; }
  .marcos-inner { flex-wrap: wrap; border-left: 0; border-right: 0; }
  .marco {
    flex: 0 0 100%;
    width: 100%;
    height: 185px;
    border-left: 0;
  }
  .marco + .marco { border-left: 0; }

  /* ---------- SOBRE (Figma 45:255) ---------- */
  .sobre { flex-direction: column; }
  .sobre-img { flex: 0 0 auto; width: 100%; height: 361px; }
  .sobre-img img { position: static; width: 100%; height: 100%; }

  .sobre-body {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 40px;
    gap: 24px;
  }
  .tl-lead { max-width: 281px; }
  .sobre-body h2 { width: 100%; }

  /* a linha do tempo volta ao fluxo normal */
  .tl { width: 100%; height: auto; }
  .tl-lead { position: static; width: 100%; margin-bottom: 32px; }
  /* A linha era a borda esquerda do <ol>, que fica na borda da caixa —
     7px à esquerda do centro das bolinhas, que vivem dentro do padding.
     Agora o celular usa os mesmos trechos por marco do desktop: eles
     saem do mesmo cálculo que posiciona a bolinha, então as duas não têm
     como sair de centro, e a linha ainda nasce na primeira bolinha e
     morre na última.

     O --tl-gap precisa acompanhar o gap daqui (24px, não os 16px do
     desktop): é ele que diz ao ::after quanto vão atravessar até o
     próximo marco. */
  .tl-items {
    position: static;
    width: 100%;
    --tl-gap: 24px;
    gap: var(--tl-gap);
    padding-left: var(--tl-recuo);
  }
  .tl-year { height: auto; }

  /* ---------- FOOTER (Figma 45:284) ---------- */
  .footer { padding: 22px 0; }
  .footer-inner { padding: 0 20px; }
  .footer-top { flex-direction: column; gap: 42px; }
  .footer-brand { flex: 0 0 auto; width: 100%; }
  .footer-links { flex-direction: column; gap: 34px; }
  .footer-col--nav,
  .footer-col--contact { flex: 0 0 auto; width: 100%; }
  .footer-copy { margin-top: 24px; }
}

/* =========================================================
   Hero de celular — só até 600px
   A foto fica presa pela proporção e ocupa a largura toda, o que é certo
   no celular e exagerado no tablet. De 600px para cima o hero volta ao
   arranjo do desktop: foto de fundo com o texto por cima.
   ========================================================= */
@media (max-width: 1023.98px) {
  /* ---------- HERO (Figma 45:91) ----------
     A foto mobile é outra imagem: o retrato fica no alto e o degradê
     entrega o creme onde entra o texto. */
  /* A foto é presa pela proporção da própria imagem (390x365), então ela
     escala inteira em qualquer largura e nunca corta a cabeça. O degradê
     até o transparente já vem na imagem; o creme por baixo é do .hero. */
  .hero {
    height: auto;
    background: var(--cream);
  }

  .hero-bg {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 390 / 365;
  }
  .hero-bg img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .hero-inner { max-width: none; }

  /* O Figma pedia 338/390 (86.7%), que punha o texto quase no pé da foto e
     empurrava os botões para fora da primeira tela. Em 72% o bloco sobe
     uns 60px e encosta na parte do degradê onde a foto já virou creme —
     ganha a dobra sem passar por cima do rosto. */
  .hero-main {
    position: static;
    width: 100%;
    max-width: 330px;
    padding: 72% 20px 40px;
    gap: 22px;
  }

  /* as duas tags empilham, cada uma do tamanho do seu texto */
  .tags { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tag--fixed { width: auto; }

  .hero-head { gap: 26px; }
  .hero-head h1 { font-size: 64px; line-height: .97; }
  .hero-head p { font-size: 18px; max-width: 291px; }

  /* botões um abaixo do outro, cada um na sua largura */
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --- tablet: a foto presa pela proporção ficaria alta demais (719px em
   768). Aqui ela ganha altura fixa e corta pelo pé, onde não há nada
   importante; o degradê que a imagem perde é refeito em CSS. --- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .hero-bg {
    aspect-ratio: auto;
    height: 460px;
  }
  .hero-bg img { object-position: center top; }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(239, 235, 229, 0), var(--cream) 82%);
  }

  .hero-main { padding-top: 400px; }
}

/* --- notebook: a partir de 1152 já sobra largura para o diagrama crescer --- */
@media (min-width: 1152px) and (max-width: 1279.98px) {
  .arq { --dia-escala: .75; }
}

/* --- celular grande: já cabe um diagrama maior --- */
@media (min-width: 480px) and (max-width: 599.98px) {
  .arq { --dia-escala: .55; }
}

/* --- tablet em pé: a coluna é larga, o diagrama acompanha --- */
@media (min-width: 600px) and (max-width: 767.98px) {
  .arq { --dia-escala: .68; }
}

/* --- tablet: sobra largura, então a arte pode crescer --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .arq { --dia-escala: .82; }
  .frase-art { width: 532.59px; height: auto; }
  .card-label { width: 259.966px; }
}

/* --- celular --- */
@media (max-width: 767.98px) {
  .hero-head h1 { font-size: 64px; }
  .arq-head-text h2 { font-size: 40px; line-height: 1.24; letter-spacing: -1.6px; }
  .sobre-body h2 { font-size: 40px; letter-spacing: -1.6px; }
  .tl-lead { font-size: 20px; }
  .menu-nav a { font-size: 26px; }
}

/* --- telas estreitas: a caixa do diagrama tem 782px de lado e precisa
   caber entre as margens de 20px. Daí os degraus curtos: cada um pega a
   maior escala que ainda cabe na menor tela da sua faixa. --- */
@media (max-width: 359.98px) { .arq { --dia-escala: .35; } }
@media (min-width: 360px) and (max-width: 389.98px) { .arq { --dia-escala: .40; } }
@media (min-width: 390px) and (max-width: 429.98px) { .arq { --dia-escala: .44; } }
@media (min-width: 430px) and (max-width: 479.98px) { .arq { --dia-escala: .49; } }

/* --- telas bem estreitas --- */
@media (max-width: 400px) {
  .hero-head h1 { font-size: 56px; }
  .frase-text h2 { font-size: 34px; letter-spacing: -1.2px; }
  .marco-num { font-size: 56px; }
}

/* --- acessibilidade --- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* A linha final do rodapé: direitos à esquerda, termos e privacidade à
   direita. No celular empilha, porque lado a lado os dois links
   quebravam em duas linhas cada. */
.footer-rodape {
  margin-top: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
}
.footer-rodape .footer-copy { margin-top: 0; }

.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a {
  font-size: 14px;
  line-height: 1.38;
  color: var(--footer-muted);
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--ink); }

@media (max-width: 599.98px) {
  .footer-rodape { flex-direction: column; gap: 14px; }
}