/* ==========================================================================
   Rokom — sistema visual
   Base: preto absoluto, texto em cinza-claro, titulos brancos gigantes e um
   unico sinal vermelho, reservado para a acao principal e para a marca.
   Hierarquia por escala e espaco, nunca por sombra ou preenchimento.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..800&display=swap");

:root {
  color-scheme: dark;

  --vazio: #000000;
  --cinza: #cccccc;
  --branco: #ffffff;
  --grafite: #4c4c4c;
  --vermelho: #fc1c46;

  --fonte: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  --margem: clamp(20px, 8.75vw, 126px);
  --largura: 1400px;
  --secao: clamp(86px, 12vw, 180px);

  --t-legenda: 10px;
  --t-pequeno: 14px;
  --t-botao: 15px;
  --t-sub: 18px;
  --t-titulo-p: clamp(22px, 2.2vw, 27px);
  --t-titulo: clamp(40px, 6vw, 91px);
  --t-display: clamp(46px, 13vw, 198px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--vazio); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--vazio); color: var(--cinza);
  font-family: var(--fonte); font-size: var(--t-sub); line-height: 1.25; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--branco); outline-offset: 4px; }
::selection { background: var(--vermelho); color: var(--branco); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ bola */
#bola { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.bola-reserva {
  position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0 2%, transparent 7%),
    radial-gradient(circle at 50% 50%, #050507 58%, transparent 72%),
    conic-gradient(from 200deg, #3d66ff, #8f4dfa, #ffa34d, #3d66ff);
  filter: saturate(.9);
}
main, .topo, .rodape { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ topo */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 72px;
  padding-inline: var(--margem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
  transition: background-color .3s ease;
}
.topo.rolou { background: rgba(0, 0, 0, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topo-esquerda { justify-self: start; display: flex; align-items: center; gap: 20px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--branco); }
.marca svg { width: 30px; height: 20px; flex: none; }
.marca b { font-weight: 700; font-size: 17px; letter-spacing: .02em; font-stretch: 105%; }
.topo-lema { font-size: var(--t-pequeno); color: var(--cinza); }
.topo-acoes { justify-self: end; display: flex; align-items: center; gap: 22px; }
.link-fantasma { font-size: var(--t-pequeno); text-decoration: none; color: var(--branco); }
.link-fantasma:hover, .link-fantasma[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.pilula {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px;
  padding: 0 30px; min-height: 34px; line-height: 1; font-size: var(--t-botao); text-transform: uppercase; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.pilula-vermelha { background: var(--vermelho); color: var(--branco); }
.pilula-vermelha:hover { background: #ff3a5f; }
.pilula-contorno { background: transparent; border-color: var(--branco); color: var(--branco); min-height: 48px; }
.pilula-contorno:hover { background: var(--branco); color: var(--vazio); }
.topo .pilula { min-height: 30px; padding: 0 22px; font-size: 13px; }
/* botao Inicio ao lado da logo: volta para a pagina inicial de qualquer pagina */
.topo .pilula-inicio { padding: 0 18px; background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .5); }
.topo .pilula-inicio:hover { background: var(--branco); color: var(--vazio); border-color: var(--branco); }
.whats-icone { display: none; width: 18px; height: 18px; }

.hamburguer { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.hamburguer i { position: absolute; left: 3px; right: 3px; height: 1.5px; background: var(--branco); transition: transform .35s ease, top .35s ease; }
.hamburguer i:first-child { top: 10px; }
.hamburguer i:last-child { top: 17px; }
.menu-aberto .hamburguer i:first-child { top: 13.5px; transform: rotate(45deg); }
.menu-aberto .hamburguer i:last-child { top: 13.5px; transform: rotate(-45deg); }

/* ---------------------------------------------------------- menu em tela */
.menu-tela {
  position: fixed; inset: 0; z-index: 15; background: var(--vazio);
  padding: 120px var(--margem) 40px; display: grid; align-content: space-between; gap: 36px; overflow-y: auto;
}
.menu-tela nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-tela a.grande {
  font-size: min(var(--t-titulo), 8.6svh); font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: -0.02em;
  font-stretch: 88%; text-decoration: none; color: var(--branco); display: inline-block;
  opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), color .2s ease;
}
.menu-tela a.grande:hover { color: var(--cinza); }
.menu-aberto .menu-tela a.grande { opacity: 1; transform: none; }
.menu-aberto .menu-tela li:nth-child(2) a { transition-delay: .04s; }
.menu-aberto .menu-tela li:nth-child(3) a { transition-delay: .08s; }
.menu-aberto .menu-tela li:nth-child(4) a { transition-delay: .12s; }
.menu-aberto .menu-tela li:nth-child(5) a { transition-delay: .16s; }
.menu-aberto .menu-tela li:nth-child(6) a { transition-delay: .2s; }
.menu-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 36px; font-size: var(--t-pequeno); }
.menu-rodape a { text-decoration: none; }
.menu-aberto { overflow: hidden; }

/* ------------------------------------------------------------ tipografia */
.display {
  font-size: var(--t-display); font-weight: 700; line-height: .92; letter-spacing: -0.009em; font-stretch: 86%;
  text-transform: uppercase; color: var(--branco); margin: 0;
}
.titulo-g {
  font-size: var(--t-titulo); font-weight: 700; line-height: .92; letter-spacing: -0.02em; font-stretch: 90%;
  text-transform: uppercase; color: var(--branco); margin: 0; text-wrap: balance;
}
.titulo-p { font-size: var(--t-titulo-p); font-weight: 400; line-height: 1.2; color: var(--branco); margin: 0; }
.sobrelinha { font-size: var(--t-botao); text-transform: uppercase; letter-spacing: .02em; color: var(--cinza); margin: 0; }
.lead { font-size: var(--t-sub); line-height: 1.25; color: var(--cinza); max-width: 44ch; margin: 0; }
.meta { font-size: var(--t-pequeno); color: var(--cinza); }
.link-seta { font-size: 17px; color: var(--branco); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.link-seta:hover { color: var(--cinza); }

.conteudo { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; height: 300vh; }
.hero-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-marcador { position: absolute; left: 0; right: 0; height: 100vh; pointer-events: none; }
.hero-marcador:nth-of-type(1) { top: 0; }
.hero-marcador:nth-of-type(2) { top: 100vh; }
.hero-marcador:nth-of-type(3) { top: 200vh; }

.frase {
  position: absolute; inset: 0; padding-inline: var(--margem); display: flex; flex-direction: column; justify-content: center;
}
.frase[data-lado="direita"] { align-items: flex-end; text-align: right; }
/* O tamanho sai da largura disponivel: "ENCONTRADO." ocupa cerca de 6,3 vezes a
   altura da letra. Assim a palavra mais longa cabe inteira, do celular ao monitor.
   O teto em svh guarda espaco para a etiqueta e o texto em telas baixas. */
.hero .display { font-size: min(198px, calc((100vw - 2 * var(--margem)) / 6.7), 21svh); }
.frase .linha { display: block; overflow: hidden; padding-bottom: .04em; }
.frase .linha > span { display: block; transform: translateY(105%); transition: transform .9s cubic-bezier(.19, 1, .22, 1); }
.frase[data-estado="depois"] .linha > span { transform: translateY(-105%); transition-duration: .6s; }
.frase[data-estado="ativa"] .linha > span { transform: none; }
.frase[data-estado="ativa"] .linha:nth-child(2) > span { transition-delay: .08s; }

/* etiqueta e texto de apoio: entram logo depois das palavras gigantes */
.frase-etiqueta, .frase-texto {
  margin: 0; opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .9s cubic-bezier(.19, 1, .22, 1);
}
.frase-etiqueta { font-size: var(--t-botao); text-transform: uppercase; letter-spacing: .02em; color: var(--cinza); margin-bottom: clamp(16px, 2.6svh, 29px); }
.frase-texto { font-size: clamp(17px, 1.55vw, 23px); line-height: 1.3; color: var(--cinza); max-width: 34ch; margin-top: clamp(18px, 3.2svh, 40px); text-wrap: pretty; }
.frase[data-estado="depois"] :is(.frase-etiqueta, .frase-texto) { transform: translateY(-16px); transition-duration: .3s; }
.frase[data-estado="ativa"] :is(.frase-etiqueta, .frase-texto) { opacity: 1; transform: none; }
.frase[data-estado="ativa"] .frase-etiqueta { transition-delay: .12s; }
.frase[data-estado="ativa"] .frase-texto { transition-delay: .26s; }

.hero-rodape {
  position: absolute; left: var(--margem); right: var(--margem); bottom: 36px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 22px;
}
.hero-rodape .meta p { margin: 0; }
.hero-rodape .meta a { color: var(--cinza); }
.hero-navegar { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.contador { display: grid; justify-items: end; gap: 3px; font-size: var(--t-legenda); color: var(--branco); }
/* cada ponto e um botao com area de toque maior que o desenho */
.contador ol { list-style: none; margin: 0 -4.5px 0 0; padding: 0; display: flex; }
.contador button { display: grid; place-items: center; height: 20px; padding: 0 4.5px; border: 0; background: transparent; cursor: pointer; }
.contador button::before { content: ""; width: 4px; height: 4px; border-radius: 9999px; background: var(--grafite); transition: background-color .3s ease, width .3s ease; }
.contador button:hover::before { background: var(--cinza); }
.contador button[aria-current="true"]::before { background: var(--branco); width: 16px; }

.botao-seta {
  width: 52px; height: 52px; flex: none; padding: 0; border-radius: 9999px; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--branco); border: 1px solid var(--branco);
  transition: background-color .2s ease, color .2s ease;
}
.botao-seta svg { width: 20px; height: 20px; animation: seta-convida 2.4s cubic-bezier(.45, 0, .2, 1) infinite; }
.botao-seta:hover { background: var(--branco); color: var(--vazio); }
.botao-seta:hover svg { animation-play-state: paused; }
@keyframes seta-convida { 0%, 55%, 100% { transform: none; } 70% { transform: translateY(4px); } 85% { transform: translateY(-1px); } }

/* ----------------------------------------------------------------- secoes */
.secao { padding-block: var(--secao); }
.secao-topo { display: grid; gap: 22px; margin-bottom: clamp(43px, 6vw, 86px); }

/* manifesto: a tela em que a bola para ao lado das informacoes */
.manifesto { min-height: 100vh; display: grid; align-items: center; }
.manifesto-grade { display: grid; gap: 36px; max-width: 760px; }
.pontos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px; }
.pontos li { display: grid; gap: 9px; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; }
.pontos b { font-size: var(--t-titulo-p); font-weight: 400; color: var(--branco); line-height: 1.2; }
.pontos span { font-size: var(--t-pequeno); line-height: 1.5; color: var(--cinza); }

/* lista de servicos: linhas grandes, sem cartao */
.lista-linhas { list-style: none; margin: 0; padding: 0; }
.lista-linhas li {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px 43px; align-items: baseline;
  padding-block: 29px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.lista-linhas li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.lista-linhas h3 { font-size: clamp(27px, 3.4vw, 48px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; font-stretch: 90%; line-height: 1; color: var(--branco); margin: 0; }
.lista-linhas p { margin: 0; font-size: var(--t-sub); line-height: 1.25; color: var(--cinza); max-width: 42ch; }

/* trabalhos: pronto para receber projetos, com um estado vazio digno */
.trabalhos-vazio { display: grid; gap: 29px; max-width: 640px; padding-block: 22px 0; }
.trabalhos-vazio p { margin: 0; }
.trabalhos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 86px; }
.trabalho { display: grid; gap: 22px; text-decoration: none; }
.trabalho img { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.trabalho-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 22px; align-items: baseline; }

/* processo: a ordem importa, entao os numeros sao informacao */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 29px; counter-reset: passo; }
.passos li { display: grid; gap: 14px; align-content: start; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; }
.passos .numero { font-size: var(--t-legenda); color: var(--cinza); letter-spacing: .08em; }
.passos b { font-size: clamp(27px, 2.6vw, 38px); font-weight: 700; text-transform: uppercase; font-stretch: 90%; letter-spacing: -0.01em; line-height: 1; color: var(--branco); }
.passos span { font-size: var(--t-pequeno); line-height: 1.5; }

/* contato */
.contato-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 65px; align-items: end; }
.formulario { display: grid; gap: 29px; }
.campo { display: grid; gap: 7px; }
.campo label { font-size: var(--t-legenda); text-transform: uppercase; letter-spacing: .12em; color: var(--cinza); }
.campo input, .campo textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--branco); border-radius: 0;
  padding: 7px 0 11px; color: var(--branco); font-size: var(--t-sub); width: 100%; resize: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--grafite); }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--vermelho); }
.contatos-diretos { display: grid; gap: 9px; margin-top: 36px; font-size: var(--t-sub); }
.contatos-diretos a { color: var(--branco); text-decoration: none; }
.contatos-diretos a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------ ferramentas */
.pagina-topo { padding-top: clamp(160px, 22vh, 240px); padding-bottom: 86px; min-height: 72vh; display: grid; align-content: end; gap: 29px; }
.pagina-topo .display { font-size: min(198px, calc((100vw - 2 * var(--margem)) / 7.6)); }
.titulo-contato { font-size: clamp(40px, 6vw, 96px); }
.ferramenta {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 29px 65px; align-items: end;
  padding-block: 43px; border-top: 1px solid rgba(255, 255, 255, .22);
}
.ferramenta:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.ferramenta-nome { display: grid; gap: 14px; }
.ferramenta-detalhe { display: grid; gap: 22px; }
.etiqueta { display: inline-flex; justify-self: start; border: 1px solid rgba(255, 255, 255, .4); border-radius: 9999px; padding: 4px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- entenda */
/* Ilustracoes em traco: branco para a estrutura, cinza para o que e secundario
   e o vermelho so no que e "o seu negocio" ou na acao. O traco nao engrossa
   com o tamanho do desenho, igual as linhas finas do resto do site. */
.ilustra { margin: 0; }
.ilustra svg { display: block; width: 100%; height: auto; overflow: visible; }
:is(.ilustra, .icone) :is(.l, .lf, .v, .balao) { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
:is(.ilustra, .icone) .l { stroke: var(--branco); }
:is(.ilustra, .icone) .lf { stroke: rgba(255, 255, 255, .3); }
:is(.ilustra, .icone) .v { stroke: var(--vermelho); }
:is(.ilustra, .icone) .c { fill: var(--branco); }
.ilustra .balao { fill: var(--vazio); stroke: var(--branco); }
.ilustra .tracejado { stroke-dasharray: 4 5; }
.ilustra .vc { fill: var(--vermelho); }
.ilustra .preto { fill: var(--vazio); }
.ilustra .b { fill: rgba(255, 255, 255, .2); }
.ilustra .bf { fill: rgba(255, 255, 255, .09); }
.ilustra text { font-family: var(--fonte); font-size: 10px; fill: var(--cinza); }
.ilustra .tx-forte { fill: var(--branco); font-weight: 600; }
.ilustra .tx-v { fill: var(--vermelho); font-weight: 600; }
.ilustra .mini { font-size: 8.5px; }
.ilustra .legenda { font-size: 11px; letter-spacing: .12em; }
.ilustra .chamada circle { fill: var(--vazio); stroke: var(--branco); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ilustra .chamada text { fill: var(--branco); font-size: 12px; font-weight: 600; }
.ilustra figcaption { margin-top: 14px; }

.capitulo { scroll-margin-top: 72px; border-top: 1px solid rgba(255, 255, 255, .12); }
.capitulo .lead { max-width: 52ch; }

.sumario { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.sumario a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 18px; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .4); color: var(--branco); text-decoration: none; font-size: var(--t-pequeno);
  transition: background-color .2s ease, color .2s ease;
}
.sumario span { font-size: var(--t-legenda); letter-spacing: .08em; color: var(--cinza); }
.sumario a:hover { background: var(--branco); color: var(--vazio); }
.sumario a:hover span { color: inherit; }

/* 01 jornada: quatro celulares, com uma seta pequena entre um passo e outro */
.jornada { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 29px; }
.jornada li { display: grid; gap: 14px; align-content: start; }
.jornada .ilustra { position: relative; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .22); margin-bottom: 8px; }
.jornada li:not(:last-child) .ilustra::after {
  content: ""; position: absolute; right: -19px; bottom: -4.5px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--branco); border-right: 1.5px solid var(--branco); transform: rotate(45deg);
}
.jornada .numero, .linha-tempo .numero { font-size: var(--t-legenda); color: var(--cinza); letter-spacing: .08em; }
.jornada b, .linha-tempo b { font-size: clamp(27px, 2.6vw, 38px); font-weight: 700; text-transform: uppercase; font-stretch: 90%; letter-spacing: -0.01em; line-height: 1; color: var(--branco); }
.jornada .texto { font-size: var(--t-sub); line-height: 1.3; }

/* 02 anatomia: celular numerado + lista */
.anatomia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 43px 86px; align-items: center; }
.anatomia .ilustra { width: 100%; max-width: 420px; justify-self: center; }
.itens { list-style: none; margin: 0; padding: 0; }
.itens li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px 20px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .22); }
.itens li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.itens .n { grid-row: span 2; width: 30px; height: 30px; border-radius: 9999px; border: 1.5px solid var(--branco); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--branco); }
.itens b { font-size: var(--t-titulo-p); font-weight: 400; line-height: 1.2; color: var(--branco); }
.itens .d { font-size: var(--t-pequeno); line-height: 1.5; }

/* 03 comparacao: texto e tabela de um lado, desenho do outro */
.comparacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texto figura" "tabela figura"; gap: 43px 86px; align-items: start; }
.comparacao .lead { grid-area: texto; }
.comparacao .ilustra { grid-area: figura; align-self: center; }
.tabela-caixa { grid-area: tabela; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-pequeno); line-height: 1.4; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: 16px 14px 16px 0; border-top: 1px solid rgba(255, 255, 255, .22); font-weight: 400; color: var(--cinza); }
.tabela thead th { border-top: 0; padding-block: 0 12px; font-size: var(--t-legenda); text-transform: uppercase; letter-spacing: .12em; }
.tabela tbody th { width: 42%; }
.tabela tbody tr:last-child > * { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.tabela .melhor { color: var(--branco); }
.tabela thead .melhor::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: var(--vermelho); margin-right: 8px; vertical-align: 1px; }

/* 04 linha do tempo: trilho com quatro pontos, o ultimo em vermelho */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 29px; }
.linha-tempo li { position: relative; display: grid; gap: 14px; align-content: start; padding-top: 43px; }
.linha-tempo li::before { content: ""; position: absolute; top: 5px; left: 0; right: -29px; height: 1px; background: rgba(255, 255, 255, .22); }
.linha-tempo li:last-child::before { right: 0; }
.linha-tempo li::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 9999px; background: var(--vazio); border: 1.5px solid var(--branco); box-sizing: border-box; }
.linha-tempo li:last-child::after { background: var(--vermelho); border-color: var(--vermelho); }
.icone { display: block; width: 40px; height: 40px; overflow: visible; }
.linha-tempo .faz { font-size: var(--t-pequeno); line-height: 1.5; }
.linha-tempo .voce { font-size: var(--t-pequeno); line-height: 1.5; color: var(--branco); padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .22); }
.linha-tempo .voce i { display: block; font-style: normal; font-size: var(--t-legenda); text-transform: uppercase; letter-spacing: .12em; color: var(--cinza); margin-bottom: 4px; }

/* 05 perguntas */
.perguntas { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pergunta { border-top: 1px solid rgba(255, 255, 255, .22); }
.pergunta summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 22px;
  padding-block: 24px; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.2; color: var(--branco);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .45);
  background: linear-gradient(var(--branco), var(--branco)) center / 13px 1.5px no-repeat, linear-gradient(var(--branco), var(--branco)) center / 1.5px 13px no-repeat;
  transition: transform .3s ease, border-color .2s ease;
}
.pergunta summary:hover::after { border-color: var(--branco); }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { margin: 0; padding: 0 62px 29px 0; max-width: 62ch; font-size: var(--t-sub); line-height: 1.4; }
.pergunta[open] p { animation: resposta .5s ease; }
@keyframes resposta { from { opacity: 0; transform: translateY(-6px); } }

.final { min-height: 80vh; display: grid; align-content: center; gap: 29px; }
.final-acoes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; }
.final-acoes .pilula { min-height: 48px; padding: 0 34px; }

/* pagina inicial: convite para a pagina Entenda, no fim de "Como funciona" */
.saiba-mais { margin: clamp(43px, 5vw, 65px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; font-size: var(--t-sub); color: var(--cinza); }
.saiba-mais .pilula { min-height: 44px; }

/* ----------------------------------------------------------------- rodape */
.rodape { padding-block: 43px; }
.rodape-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 29px; font-size: var(--t-pequeno); color: var(--grafite); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 29px; }
.rodape-linha a { color: var(--grafite); text-decoration: none; }
.rodape-linha a:hover { color: var(--cinza); }

/* -------------------------------------------------------------- aparecer */
.surge { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.19, 1, .22, 1); }
.surge.visto { opacity: 1; transform: none; }
.sem-js .surge { opacity: 1; transform: none; }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 1120px) {
  .topo-lema { display: none; }
  .topo { grid-template-columns: 1fr auto; }
  .jornada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px 29px; }
  .jornada li:nth-child(2n) .ilustra::after { display: none; }
}
@media (max-width: 900px) {
  .topo-lema, .topo .link-fantasma { display: none; }
  .topo { grid-template-columns: 1fr auto; }
  .pontos, .passos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contato-grade, .ferramenta, .lista-linhas li { grid-template-columns: minmax(0, 1fr); }
  .contato-grade { gap: 43px; }
  .anatomia { grid-template-columns: minmax(0, 1fr); }
  .anatomia .ilustra { max-width: 340px; }
  .comparacao { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "figura" "tabela"; }
  /* linha do tempo em pe: trilho vertical a esquerda */
  .linha-tempo { grid-template-columns: minmax(0, 1fr); }
  .linha-tempo li { padding: 0 0 43px 36px; }
  .linha-tempo li:last-child { padding-bottom: 0; }
  .linha-tempo li::before { top: 11px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .linha-tempo li:last-child::before { display: none; }
}
@media (max-width: 560px) {
  .pontos, .passos { grid-template-columns: minmax(0, 1fr); }
  .jornada { grid-template-columns: minmax(0, 1fr); gap: 58px; }
  .jornada .ilustra svg { max-width: 250px; }
  .jornada li .ilustra::after { display: none; }
  .pergunta p { padding-right: 0; }
  /* tabela vira blocos: o ponto em cima, as duas respostas lado a lado */
  .tabela thead { display: none; }
  .tabela tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .tabela tbody tr:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .tabela tbody :is(th, td), .tabela tbody tr:last-child > * { border: 0; padding: 0; width: auto; }
  .tabela tbody th { grid-column: 1 / -1; color: var(--branco); }
  .tabela td::before { content: attr(data-coluna); display: block; font-size: var(--t-legenda); text-transform: uppercase; letter-spacing: .12em; color: #8c8c8c; margin-bottom: 4px; }
  .tabela td.melhor::before { color: var(--vermelho); }
  .topo .pilula { padding: 0 16px; }
  .topo { gap: 12px; }
  .topo-esquerda, .topo-acoes { gap: 14px; }
  .topo .pilula-inicio { padding: 0 12px; }
  .hero-rodape .meta { display: none; }
  .frase[data-lado="direita"] { align-items: flex-start; text-align: left; }
  .botao-seta { width: 48px; height: 48px; }
}
/* celular estreito: com o botao Inicio no topo, o WhatsApp vira um circulo com icone */
@media (max-width: 420px) {
  .topo, .topo-esquerda, .topo-acoes { gap: 10px; }
  .topo .pilula-vermelha { width: 34px; min-height: 34px; padding: 0; }
  .topo .pilula-vermelha .whats-icone { display: block; }
  .topo .pilula-vermelha .whats-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* celular deitado: pouca altura, a etiqueta sai para as frases caberem */
@media (max-height: 500px) {
  .frase-etiqueta { display: none; }
  .frase-texto { font-size: 15px; max-width: 46ch; }
  .hero-rodape { bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frase .linha > span, .frase-etiqueta, .frase-texto, .surge, .menu-tela a.grande { transition: none !important; }
  .botao-seta svg, .pergunta[open] p { animation: none; }
}