/* =============================================================================
   INOVA SOLAR: folha de estilo unica
   Empresa ficticia, site modelo de portfolio. Dados de contato centralizados
   em DADOS.md; tokens visuais no :root logo abaixo.

   Ordem: 1 tokens · 2 reset · 3 tipografia · 4 utilitarios · 5 botoes
          6 cabecalho · 7 heroi · 8 autoridade · 9 simulador · 10 jornada
          11 projetos · 12 vozes · 13 confianca · 14 parceiros · 15 duvidas
          16 fecho · 17 rodape · 18 flutuante e mini-chat · 19 paginas internas
          20 barra de progresso · 21 microinteracoes · 22 transicao de pagina
          23 animacoes de entrada · 24 movimento reduzido

   Mobile-first: o padrao e 390px. Media queries so ampliam.
============================================================================= */

/* -- 1. TOKENS ------------------------------------------------------------ */
:root {
  /* --- paleta da marca --- */
  --branco:    #FFFFFF;
  --nevoa:     #F2F4F3;
  --areia:     #FAF7F2;   /* claro morno: alterna com a nevoa e tira o ar de template */
  --noite:     #0C2739;
  --noite-2:   #10344B;   /* um degrau acima do noite, para superficies empilhadas */
  --noite-fundo:#08202F;
  --sol:       #FF6B00;
  --amanhecer: #FFB020;
  --folha:     #1E7A5B;

  /* derivados: existem so por contraste AA, nao ampliam a paleta:
     --sol-texto  = laranja legivel como TEXTO sobre fundo claro (4,8:1)
     --folha-luz  = verde legivel sobre o azul-noite (8,0:1)
     texto branco sobre --sol da 2,9:1 e reprova, por isso o botao
     laranja usa texto --noite (5,4:1). */
  --sol-forte:  #FF8226;
  --sol-texto:  #C24E00;
  --folha-luz:  #4FD1A0;
  --folha-texto:#16624A;

  /* --- tintas --- */
  --tinta:        var(--noite);
  --tinta-media:  #4A6172;
  --tinta-clara:  #A8BECC;
  --tinta-noite:  #C6D6E1;   /* corpo de texto sobre fundo escuro */
  --linha:        #E2E7EA;
  --linha-forte:  #CFD8DE;
  --linha-noite:  rgba(255, 255, 255, .13);
  --linha-noite-forte: rgba(255, 255, 255, .26);

  /* --- tipografia --- */
  --fonte-base: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* hierarquia (item 6): o salto entre niveis e grande de proposito.
     Titulo -> olho -> apoio -> corpo -> mini, cada um com peso e cor propria. */
  /* o titulo do heroi mede a COLUNA de texto (cqi), nao a janela: entre
     62em e 75em a coluna encolhe e a janela nao, e so a medida da coluna
     evita que a frase que se digita quebre em duas linhas */
  --t-d1:     clamp(2.4rem, 11.5cqi, 3.9rem);
  --t-h2:     clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
  --t-h3:     clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --t-h4:     1.0625rem;
  --t-apoio:  clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  --t-corpo:  1.0625rem;
  --t-mini:   .875rem;
  --t-micro:  .75rem;
  --t-numero: clamp(3.1rem, 1.55rem + 7vw, 6rem);

  /* --- espaco --- */
  --largura:  1200px;
  --largura-estreita: 720px;
  --altura-cabecalho: 4.5rem;
  --calha:    clamp(1.25rem, 5vw, 3rem);
  /* mais ar entre secoes: a home ficava densa demais (item 5) */
  --secao:    clamp(4.5rem, 2.5rem + 8vw, 9rem);

  /* --- raio: uma escala so, usada em todo o site (item 13) --- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* --- sombra: tres degraus e um destaque de marca (item 13) --- */
  --sombra-1: 0 1px 2px rgba(12, 39, 57, .05), 0 2px 8px rgba(12, 39, 57, .04);
  --sombra-2: 0 4px 12px rgba(12, 39, 57, .06), 0 14px 34px rgba(12, 39, 57, .08);
  --sombra-3: 0 8px 24px rgba(12, 39, 57, .10), 0 28px 68px rgba(12, 39, 57, .14);
  --sombra-sol: 0 6px 22px rgba(255, 107, 0, .30);
  --sombra-noite: 0 24px 60px rgba(4, 14, 22, .30);

  /* --- movimento --- */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-saida: cubic-bezier(.4, 0, .2, 1);
  --rapido: .18s;
  --medio: .32s;
  --lento: .6s;
}

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

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte-base);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 3px solid var(--amanhecer);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -- 3. TIPOGRAFIA -------------------------------------------------------- */
/* Hierarquia (item 6): so h1/h2 usam 900. h3 cai para 700, e todo texto de
   apoio perde peso e ganha cor secundaria. Assim o olho tem um caminho
   unico em vez de cinco pesos brigando. */
h1, h2 {
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.032em;
  text-wrap: balance;
}
h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
  text-wrap: balance;
}

p { max-width: 62ch; }

:where(h1, h2, h3, section)[id] {
  scroll-margin-top: calc(var(--altura-cabecalho) + clamp(1rem, 3vw, 2rem));
}

/* olho: a etiqueta pequena que abre uma secao. Substitui os subtitulos que
   tinham o mesmo peso do corpo e competiam com o titulo. */
.olho {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: none;
  margin-bottom: 1rem;
  color: var(--sol-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.olho::before {
  content: "";
  width: 1.5rem; height: 2px;
  border-radius: 2px;
  background: var(--sol);
}
.olho--noite { color: var(--amanhecer); }
.olho--noite::before { background: var(--amanhecer); }

/* apoio: a linha logo abaixo do titulo. Mais discreta que o titulo de
   proposito: cor secundaria, peso normal (item 6). */
.apoio {
  margin-top: 1.1rem;
  max-width: 56ch;
  color: var(--tinta-media);
  font-size: var(--t-apoio);
  font-weight: 400;
  line-height: 1.55;
}
.apoio--noite { color: var(--tinta-noite); }

/* cabeca de secao: agrupa olho + titulo + apoio com o mesmo respiro */
.cabeca { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabeca__titulo { font-size: var(--t-h2); }
.cabeca--centro { text-align: center; }
.cabeca--centro .apoio { margin-inline: auto; }
.cabeca--centro .olho { justify-content: center; }

/* -- 4. UTILITARIOS ------------------------------------------------------- */
.envoltorio {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--calha);
}
.envoltorio--estreito { max-width: var(--largura-estreita); }

.secao { padding-block: var(--secao); }
.secao--nevoa { background: var(--nevoa); }
.secao--areia { background: var(--areia); }
.secao--noite { background: var(--noite); color: var(--branco); }
.secao--noite .apoio { color: var(--tinta-noite); }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: -999px;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: var(--r-xs);
  background: var(--amanhecer);
  color: var(--noite);
  font-weight: 700;
}
.pular:focus { left: 1rem; top: 1rem; }

.ponto {
  display: inline-block;
  width: 4px; height: 4px;
  margin: 0 .6em;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  vertical-align: middle;
}

/* detalhe grafico da marca: a "malha" de modulos fotovoltaicos, usada como
   textura discreta em fundos escuros. Da identidade propria sem virar
   ilustracao de banco de imagem (item 20). */
.malha {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(var(--linha-noite) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha-noite) 1px, transparent 1px);
  background-size: 68px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
}

/* -- 5. BOTOES ------------------------------------------------------------ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 3px;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--curva), transform .18s var(--curva),
              border-color .18s var(--curva), color .18s var(--curva);
}

/* botao de WhatsApp: o texto sai de cena e um painel com o icone cresce
   pela direita ate tomar o botao inteiro. So se aplica a quem tem data-zap
   (ou seja, todo CTA que abre o WhatsApp). O botao--fantasma fica de fora
   de proposito, ele usa o efeito "flow" mais abaixo. */
.botao[data-zap] {
  position: relative;
  overflow: hidden;
}
.botao__texto {
  display: inline-block;
  margin-right: 2.15rem;
  transition: opacity .45s var(--curva);
}
.botao--grande[data-zap] .botao__texto { margin-right: 2.4rem; }
.botao--pequeno[data-zap] .botao__texto { margin-right: 1.55rem; }

.botao__zap {
  position: absolute;
  top: 4px; right: 4px; bottom: 4px;
  width: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 2px;
  /* transparencia so no fundo, nunca em "opacity" do container, isso
     tambem apagaria o icone (a opacity de um pai vale para os filhos) */
  background: rgba(12, 39, 57, .14);
  z-index: 1;
  pointer-events: none;
  transition: width .45s var(--curva), background-color .3s var(--curva),
              color .3s var(--curva);
}
.botao--grande .botao__zap { top: 5px; right: 5px; bottom: 5px; width: 2.4rem; }
.botao--pequeno .botao__zap { top: 3px; right: 3px; bottom: 3px; width: 1.7rem; }

.botao[data-zap]:hover .botao__texto,
.botao[data-zap]:focus-visible .botao__texto { opacity: 0; }

/* no hover o painel fica branco e o icone escuro: sai o cinza sujo */
.botao[data-zap]:hover .botao__zap,
.botao[data-zap]:focus-visible .botao__zap {
  width: calc(100% - 8px);
  background: var(--branco);
  color: var(--noite);
}
.botao--grande[data-zap]:hover .botao__zap,
.botao--grande[data-zap]:focus-visible .botao__zap { width: calc(100% - 10px); }
.botao--pequeno[data-zap]:hover .botao__zap,
.botao--pequeno[data-zap]:focus-visible .botao__zap { width: calc(100% - 6px); }

.botao--sol { background: var(--sol); color: var(--noite); }
.botao--sol:hover { background: var(--sol-forte); transform: translateY(-2px); }
.botao--sol:active { transform: translateY(0); }

.botao--contorno {
  background: transparent;
  color: var(--noite);
  box-shadow: inset 0 0 0 1.5px var(--noite);
}
.botao--contorno:hover { background: var(--noite); color: var(--branco); }

.botao--fantasma {
  background: transparent;
  color: var(--branco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38);
}
.botao--fantasma:hover {
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75);
}

/* botao--fluxo: o unico CTA do site que nao vai para o WhatsApp (rola ate
   o simulador). A seta atravessa o botao da direita para a esquerda e uma
   bolha de fundo cresce por baixo do texto, sem framer-motion, so
   transicao de CSS. Continua com a mesma altura do botao--sol ao lado,
   herdada de .botao--grande; so a geometria de canto muda. */
.botao--fluxo {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  transition: border-radius .5s var(--curva), color .4s var(--curva),
              transform .18s var(--curva);
}
.botao--fluxo:hover,
.botao--fluxo:focus-visible { border-radius: 10px; color: var(--noite); }
.botao--fantasma.botao--fluxo:hover,
.botao--fantasma.botao--fluxo:focus-visible {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px transparent;
}

.botao--fluxo .botao__texto {
  position: relative;
  z-index: 2;
  transform: translateX(-.7rem);
  transition: transform .5s var(--curva);
}
.botao--fluxo:hover .botao__texto,
.botao--fluxo:focus-visible .botao__texto { transform: translateX(.7rem); }

.botao__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  transition: left .5s var(--curva), right .5s var(--curva), opacity .3s var(--curva);
}
.botao__seta--entra { left: -25%; opacity: 0; }
.botao--fluxo:hover .botao__seta--entra,
.botao--fluxo:focus-visible .botao__seta--entra { left: 1.1rem; opacity: 1; }

.botao__seta--sai { right: 1.1rem; opacity: 1; }
.botao--fluxo:hover .botao__seta--sai,
.botao--fluxo:focus-visible .botao__seta--sai { right: -25%; opacity: 0; }

.botao__bolha {
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem; height: 1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--amanhecer);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: width .55s var(--curva), height .55s var(--curva), opacity .3s var(--curva);
}
.botao--fluxo:hover .botao__bolha,
.botao--fluxo:focus-visible .botao__bolha { width: 24rem; height: 24rem; opacity: 1; }

.botao--grande { padding: 1.15rem 1.9rem; font-size: 1.125rem; }
.botao--pequeno { padding: .6rem 1rem; font-size: .9375rem; }
.botao--bloco { display: flex; width: 100%; }


/* no celular o CTA do cabecalho volta ao tamanho cheio: 38px de altura e
   pequeno demais para o dedo (alvo minimo de 44px) */
@media (max-width: 61.99em) {
  .botao--pequeno { padding: .9rem 1.25rem; font-size: 1rem; }
}

/* link-acao: o terceiro nivel de CTA, quando um botao seria demais.
   Nao compete com o primario porque nao tem caixa. */
.link-acao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--sol-texto);
  font-weight: 700;
  font-size: var(--t-mini);
  text-decoration: none;
  transition: gap var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.link-acao svg { transition: transform var(--rapido) var(--curva); }
.link-acao:hover { gap: .7rem; color: var(--noite); }
.link-acao:hover svg { transform: translateX(2px); }
.link-acao--noite { color: var(--amanhecer); }
.link-acao--noite:hover { color: var(--branco); }

/* o icone do WhatsApp entra como mascara, nao como imagem: assim ele é
   pintado com currentColor e acompanha a cor do texto de cada botao
   (navy no laranja, branco quando o botao inverte no hover). Como PNG
   ele ficava preto fixo e destoava da paleta. */
.icone-zap {
  flex: none;
  display: block;
  width: var(--tam, 18px);
  height: var(--tam, 18px);
  background-color: currentColor;
  -webkit-mask: url("../assets/icon-whatsapp.png") center / contain no-repeat;
  mask: url("../assets/icon-whatsapp.png") center / contain no-repeat;
}

/* -- 6. CABECALHO --------------------------------------------------------- */
.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  color: var(--branco);
  /* no topo da pagina fica invisivel, deixando a foto do heroi respirar;
     a cor entra quando o JS marca .cabecalho--solido ao rolar */
  background: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0);
  transition: background-color .3s var(--curva), box-shadow .3s var(--curva),
              backdrop-filter .3s var(--curva);
}
.cabecalho--solido {
  background: rgba(12, 39, 57, .88);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(4, 14, 22, .25);
}
/* com o menu do celular aberto o painel precisa de fundo solido de qualquer jeito */
.js .cabecalho:has(.menu--aberto) {
  background: var(--noite);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cabecalho__linha {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--altura-cabecalho);
}

.marca {
  display: inline-flex;
  align-items: center;
  color: var(--branco);
  text-decoration: none;
}
.marca__logo { height: 30px; width: auto; }

/* alavanca do menu: so aparece no celular e so quando ha JS */
.menu-alavanca { display: none; }
.js .menu-alavanca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem .55rem .65rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--branco);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.01em;
  cursor: pointer;
}
.menu-alavanca__caixa {
  position: relative;
  width: 20px; height: 14px;
  flex: none;
}
.menu-alavanca__caixa::before,
.menu-alavanca__caixa::after,
.menu-alavanca__risco {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--amanhecer);
  transition: transform .2s var(--curva), opacity .2s var(--curva);
}
.menu-alavanca__caixa::before { top: 0; }
.menu-alavanca__risco { top: 6px; }
.menu-alavanca__caixa::after { top: 12px; }
.menu-alavanca[aria-expanded="true"] .menu-alavanca__caixa::before { transform: translateY(6px) rotate(45deg); }
.menu-alavanca[aria-expanded="true"] .menu-alavanca__risco { opacity: 0; }
.menu-alavanca[aria-expanded="true"] .menu-alavanca__caixa::after { transform: translateY(-6px) rotate(-45deg); }

/* menu: sem JS fica sempre visivel, empurrando o cabecalho (que tambem so
   fica fixo quando ha JS, ver abaixo); com JS vira um painel que flutua
   por cima do conteudo, porque o cabecalho fixo nao pode variar de altura */
.menu {
  width: 100%;
  padding-bottom: 1.25rem;
}
.js .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--altura-cabecalho));
  overflow-y: auto;
  padding-inline: var(--calha);
  background: var(--noite);
  box-shadow: 0 16px 32px rgba(4, 14, 22, .35);
}
.js .menu--aberto { display: block; }
/* sem JS o cabecalho nao pode ser fixo: nao ha como abrir/fechar o menu,
   entao ele fica sempre visivel e empurraria um cabecalho fixo para fora
   da tela em telas baixas */
html:not(.js) .cabecalho { position: static; background: var(--noite); }

.menu__lista {
  display: grid;
  gap: .15rem;
  border-top: 1px solid var(--linha-noite);
  padding-top: .75rem;
}
.menu__link {
  display: block;
  padding: .7rem 0;
  color: #C6D6E1;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -.01em;
}
.menu__link:hover { color: var(--branco); }
.menu__link[aria-current="page"] {
  color: var(--branco);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--sol);
  padding-left: .85rem;
}
.menu__zap { margin-top: 1rem; width: 100%; }

/* cursor deslizante: so existe no menu horizontal do desktop (ver breakpoint 62em) */
.menu__cursor { display: none; }

/* -- 7. HEROI ------------------------------------------------------------- */
/* Layout dividido (item 1): o texto ocupa uma coluna com medida legivel e a
   foto ocupa a outra, em vez de o texto boiar centralizado sobre a imagem
   inteira. No celular a foto vira uma faixa no topo e o texto vem abaixo,
   sobre o azul, legivel sem veu pesado (item 14). */
.heroi {
  position: relative;
  isolation: isolate;
  background: var(--noite);
  color: var(--branco);
  overflow: hidden;
}
/* veu: escurece a foto o suficiente para o texto passar em AA e nada alem
   disso. Os valores foram medidos compondo a foto com o gradiente e
   calculando o contraste no pior ponto de cada bloco de texto. O fundo e uma
   cena diurna e clara, entao o veu precisa ser forte: titulo 11,8:1, linha de
   apoio 8,2:1 e texto pequeno 5,8:1. Com um veu mais leve o texto pequeno caia
   para 2,7:1 e reprovava em AA. */
.heroi__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 12% 20%, rgba(255, 176, 32, .12) 0%, rgba(255, 176, 32, 0) 60%),
    linear-gradient(180deg, rgba(8, 32, 47, .94) 0%, rgba(8, 32, 47, .84) 45%,
                            rgba(8, 32, 47, .94) 100%);
}

.heroi__conteudo {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--altura-cabecalho) + clamp(2.5rem, 8vw, 5rem))
                 clamp(3rem, 8vw, 5rem);
}

.heroi__texto {
  max-width: 37rem;
  container-type: inline-size;
}

/* selo de novidade: um so, no topo */
.selo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: none;
  padding: .35rem .95rem .35rem .35rem;
  border: 1px solid var(--linha-noite-forte);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .8125rem;
  line-height: 1.3;
}
.selo__marca {
  flex: none;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  background: var(--sol);
  color: var(--noite);
  font-weight: 700;
  font-size: var(--t-micro);
}
.selo__texto { color: var(--tinta-noite); text-wrap: balance; }

/* titulo curto e forte (item 1), sem animacao de digitacao, que atrasava
   a leitura da promessa principal */
.heroi__titulo {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  font-size: var(--t-d1);
  text-shadow: 0 2px 34px rgba(4, 14, 22, .5);
}
/* fundo do heroi: a foto ocupa a secao inteira e o veu garante o contraste
   do texto por cima dela (o veu do desktop e mais escuro a esquerda, onde
   fica a coluna de texto) */
.heroi__fundo { position: absolute; inset: 0; z-index: -2; }
.heroi__fundo picture { position: absolute; inset: 0; }
.heroi__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }

/* Vídeo de fundo no desktop e mobile: aparece sobre a foto ao reproduzir. */
.heroi__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  opacity: 0;
  transition: opacity .9s var(--curva);
}
.heroi--video .heroi__video { opacity: 1; }

/* Enquadramento vertical: centraliza o telhado e prioriza o topo da cena. */
@media (max-width: 61.99em) {
  .heroi__video { object-position: 50% 0%; }
}

/* palavra do titulo: o JS apaga letra por letra e digita a proxima.
   Fica em italico, com gradiente laranja->ambar e brilho. O padding
   generoso existe para o brilho (drop-shadow) nao ser cortado. */
.heroi__rotativa {
  display: block;
  width: 100%;
  margin-top: .05em;
  padding-block: .12em;
  overflow: visible;
  /* reserva a altura de uma linha: a palavra troca de tamanho e, sem isso,
     o bloco de texto abaixo subiria e desceria a cada digitacao */
  min-height: 1.25em;
}
/* fluxo de texto normal, nao flex: "E um dia" e a palavra que se digita
   precisam quebrar juntos, como uma frase so. Como itens flex, cada um
   quebrava dentro da propria coluna e a linha aparecia partida em duas. */
.heroi__digita { display: inline; }
.heroi__digita-texto {
  display: inline-block;
  /* O gradiente e recortado pelo texto (background-clip: text), entao ele so
     existe dentro da CAIXA do elemento: qualquer parte do glifo que fique
     fora da caixa nao tem fundo para pintar e some.
     - na horizontal, o italico se inclina para fora: dai o padding-right;
     - na vertical, o h1 usa line-height 1.02, que da uma caixa MENOR que a
       altura real dos glifos. Sem o padding-block, os descendentes ("p" e
       "g" de "se paga") ficavam sem fundo e apareciam cortados.
     Os margins negativos devolvem o espaco, para o padding nao afastar o
     cursor nem abrir a entrelinha do titulo. */
  line-height: 1;
  padding-block: .22em;
  margin-block: -.22em;
  padding-right: .16em;
  margin-right: -.08em;
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(100deg,
    var(--sol) 0%, var(--amanhecer) 38%, #FFF1C2 52%, var(--amanhecer) 68%, var(--sol) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 176, 32, .5));
  animation: heroi-brilho 3s linear infinite;
}
.heroi__cursor {
  display: inline-block;
  vertical-align: baseline;
  width: .06em;
  height: .82em;
  margin-left: .06em;
  border-radius: 2px;
  background: var(--amanhecer);
  box-shadow: 0 0 14px rgba(255, 176, 32, .8);
  animation: heroi-cursor 1s steps(2, start) infinite;
}
@keyframes heroi-cursor {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes heroi-brilho {
  0%   { background-position: 0% 0%; }
  100% { background-position: 240% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .heroi__cursor { animation: none; opacity: 1; }
}

.heroi__linha {
  margin-top: 1.35rem;
  max-width: 46ch;
  color: var(--tinta-noite);
  font-size: var(--t-apoio);
  line-height: 1.55;
  text-shadow: 0 1px 16px rgba(4, 14, 22, .45);
}

/* acao: um botao primario visualmente dominante e um secundario menor */
.heroi__acao {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(2rem, 5vw, 2.5rem);
}
.heroi__acao .botao { flex: 1 1 15rem; }

.heroi__abaixo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  max-width: none;
  margin-top: 1.5rem;
  color: var(--tinta-clara);
  font-size: var(--t-mini);
}
.heroi__abaixo strong { color: var(--branco); font-weight: 700; }
.heroi__abaixo-item { display: inline-flex; align-items: center; gap: .45rem; }
.heroi__tique { flex: none; color: var(--folha-luz); }

/* cartao de prova sobre a foto: um numero real, nao um bloco de tres */
.heroi__figura { position: relative; margin-top: clamp(2.5rem, 7vw, 0rem); }
.heroi__moldura {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-noite), inset 0 0 0 1px var(--linha-noite-forte);
}
.heroi__moldura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.heroi__cartao {
  position: absolute;
  left: clamp(-1rem, -2vw, -2rem);
  bottom: clamp(-1rem, -2vw, -1.75rem);
  display: grid;
  gap: .15rem;
  padding: 1rem 1.35rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--sombra-3);
  color: var(--noite);
}
.heroi__cartao-r { max-width: none; color: var(--tinta-media); font-size: var(--t-micro); font-weight: 700; }
.heroi__cartao-v {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  max-width: none;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--folha-texto);
}
.heroi__cartao-de { max-width: none; color: var(--tinta-media); font-size: var(--t-micro); }
.heroi__cartao-de s { text-decoration-thickness: 1.5px; }

/* faixa de equipamentos, encerrando o heroi */
.faixa {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--linha-noite);
  background: rgba(6, 24, 36, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding-block: 1.35rem;
}
.faixa__envoltorio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
}
.faixa__titulo {
  max-width: none;
  color: var(--tinta-clara);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.faixa__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
/* cartao claro por baixo de cada logo: os arquivos das marcas chegam em
   formatos inconsistentes (alguns com branco opaco colado no desenho) */
.faixa__lista li {
  display: grid;
  place-items: center;
  height: 42px;
  padding-inline: 1rem;
  border-radius: var(--r-xs);
  background: var(--branco);
  transition: transform var(--medio) var(--curva);
}
.faixa__lista li:hover { transform: translateY(-2px); }
/* as logos chegam com proporcoes muito diferentes (a Huawei e quase quadrada,
   a Sungrow e 6x mais larga que alta). Altura unica deixaria uma minuscula ao
   lado da outra, entao cada arquivo recebe a sua altura optica via --logo. */
.faixa__lista img { height: var(--logo, 20px); width: auto; max-width: 108px; object-fit: contain; }

/* -- 8. AUTORIDADE (os numeros) ------------------------------------------ */
/* Item 9: os numeros saem do texto corrido e viram um painel proprio, com
   contador animado. Cada um tem uma barra de marca e uma nota curta. */
.autoridade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noite);
  color: var(--branco);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.autoridade__grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.25rem;
}
.numero { position: relative; padding-left: 1.25rem; }
.numero::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem; bottom: .35rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sol), var(--amanhecer));
}
.numero__v {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  max-width: none;
  font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.numero__u {
  font-size: .38em;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--amanhecer);
}
.numero__t {
  margin-top: .55rem;
  max-width: 26ch;
  color: var(--tinta-noite);
  font-size: var(--t-mini);
  line-height: 1.5;
}

/* -- 9. SIMULADOR --------------------------------------------------------- */
.sim { background: var(--nevoa); padding-block: var(--secao); }

.sim__painel {
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--noite);
  color: var(--branco);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-3);
}

.sim__passo {
  padding: clamp(1.5rem, 5vw, 2.5rem);
  container-type: inline-size;
}
.sim__passo + .sim__passo { border-top: 1px solid var(--linha-noite); }

.sim__etapa {
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: none;
  margin-bottom: 1.4rem;
  color: var(--branco);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: -.02em;
}
.sim__etapa-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--sol);
  color: var(--noite);
  font-size: .875rem;
  font-weight: 900;
}

/* --- entrada --- */
.sim__tipos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin-bottom: 1.5rem;
  padding: .3rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
}
.sim__tipo {
  padding: .6rem .4rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tinta-clara);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.sim__tipo:hover { color: var(--branco); }
.sim__tipo[aria-pressed="true"] { background: var(--branco); color: var(--noite); }

.sim__campo {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--linha-noite);
  transition: border-color var(--medio) var(--curva);
}
.sim__campo:focus-within { border-bottom-color: var(--amanhecer); }
.sim__moeda { color: var(--tinta-clara); font-size: 1.5rem; font-weight: 500; }
.sim__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--branco);
  font-size: clamp(2.25rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.sim__input:focus { outline: 0; }
.sim__por-mes { flex: none; color: var(--tinta-clara); font-size: 1rem; }

.sim__faixa {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-top: 1.5rem;
  background: transparent;
  cursor: pointer;
}
.sim__faixa::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill); background: var(--linha-noite);
}
.sim__faixa::-moz-range-track {
  height: 6px; border-radius: var(--r-pill); background: var(--linha-noite);
}
.sim__faixa::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -11px;
  border: 3px solid var(--noite);
  border-radius: 50%;
  background: var(--sol);
  box-shadow: var(--sombra-sol);
  transition: transform var(--rapido) var(--curva);
}
.sim__faixa:active::-webkit-slider-thumb { transform: scale(1.12); }
.sim__faixa::-moz-range-thumb {
  width: 28px; height: 28px;
  border: 3px solid var(--noite);
  border-radius: 50%;
  background: var(--sol);
  box-shadow: var(--sombra-sol);
}

.sim__atalhos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.sim__atalho {
  min-height: 2.75rem;
  padding: .45rem .95rem;
  border: 1px solid var(--linha-noite);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tinta-clara);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.sim__atalho:hover { color: var(--branco); border-color: var(--linha-noite-forte); transform: translateY(-1px); }
.sim__atalho--ativo { background: var(--branco); border-color: var(--branco); color: var(--noite); }

.sim__calcular { margin-top: 1.75rem; }

/* --- painel de resultado: tres estados (item 2) ---
   .sim__resultado troca de estado via data-estado no .sim__painel:
   inicial (convite) -> carregando (esqueleto) -> pronto (numeros). */
.sim__resultado { position: relative; min-height: 26rem; }
.sim__vista { display: none; }
.sim__painel[data-estado="inicial"]    .sim__vista--inicial,
.sim__painel[data-estado="carregando"] .sim__vista--carregando,
.sim__painel[data-estado="pronto"]     .sim__vista--pronto { display: block; }

/* estado inicial: nada de numeros zerados, so o convite */
.sim__convite { display: grid; gap: 1rem; padding-block: clamp(2rem, 6vw, 3.5rem); text-align: center; }
.sim__convite-marca {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 176, 32, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .3);
  color: var(--amanhecer);
}
.sim__convite-titulo { font-size: var(--t-h3); color: var(--branco); }
.sim__convite-texto {
  margin-inline: auto;
  max-width: 34ch;
  color: var(--tinta-noite);
  font-size: .9375rem;
}
.sim__convite-lista {
  display: grid;
  gap: .6rem;
  margin-top: .5rem;
  text-align: left;
  max-width: 20rem;
  margin-inline: auto;
}
.sim__convite-lista li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinta-clara);
  font-size: var(--t-mini);
}
.sim__convite-lista li::before {
  content: "";
  flex: none;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--linha-noite);
}

/* estado carregando: esqueleto com brilho, mesma geometria do resultado */
.esqueleto { display: grid; gap: 1rem; }
.esqueleto__barra {
  height: var(--alt, 1rem);
  border-radius: var(--r-xs);
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .06) 70%);
  background-size: 220% 100%;
  animation: brilho 1.3s var(--curva-saida) infinite;
}
@keyframes brilho {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
.sim__carregando-nota {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: none;
  color: var(--tinta-clara);
  font-size: var(--t-mini);
}
.girador {
  flex: none;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 2px solid var(--linha-noite-forte);
  border-top-color: var(--amanhecer);
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* estado pronto: os tres numeros que decidem a compra (item 2) */
.sim__destaques { display: grid; gap: .75rem; }
.res {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--linha-noite);
}
.res--principal {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(79, 209, 160, .22) 0%, rgba(79, 209, 160, 0) 60%),
    rgba(79, 209, 160, .08);
  box-shadow: inset 0 0 0 1px rgba(79, 209, 160, .32);
}
.res__r {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: none;
  color: var(--tinta-clara);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.res__v {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  max-width: none;
  margin-top: .35rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* o total de 25 anos pode ter 8 digitos: o corpo encolhe conforme cresce,
     medindo a COLUNA (cqi), nao a janela. --sim-digitos vem do JS. */
  font-size: min(clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem),
                 calc(100cqi / (var(--sim-digitos, 9) * .58 + 1.4)));
}
.res--principal .res__v { color: var(--folha-luz); }
.res__cifra { font-size: .38em; font-weight: 700; opacity: .8; }
.res__n { margin-top: .4rem; max-width: 34ch; color: var(--tinta-clara); font-size: var(--t-micro); line-height: 1.45; }

.sim__duo { display: grid; gap: .75rem; }
.sim__duo .res__v { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); }

/* a troca: conta de hoje -> parcela + conta nova */
.troca { display: grid; gap: .75rem; align-items: stretch; margin-top: 1.5rem; }
.troca__lado { padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); }
.troca__lado--depois {
  background: rgba(255, 176, 32, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .28);
}
.troca__rotulo { max-width: none; color: var(--tinta-clara); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.troca__valor {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  max-width: none;
  margin-top: .35rem;
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.troca__valor--novo { color: var(--amanhecer); }
.troca__cifra { font-size: .55em; font-weight: 700; opacity: .75; }
.troca__nota { margin-top: .35rem; max-width: none; color: var(--tinta-clara); font-size: var(--t-micro); line-height: 1.45; }
.troca__seta { display: grid; place-items: center; color: var(--tinta-clara); transform: rotate(90deg); }

.troca__saldo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  max-width: none;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: rgba(79, 209, 160, .1);
  box-shadow: inset 0 0 0 1px rgba(79, 209, 160, .28);
  transition: background-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.troca__saldo--negativo {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--linha-noite);
}
.troca__saldo-rotulo { color: var(--tinta-noite); font-size: .9375rem; }
.troca__saldo-valor {
  color: var(--folha-luz);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.troca__saldo--negativo .troca__saldo-valor { color: var(--tinta-clara); }

/* linha do tempo dos 25 anos */
.trilha { margin-top: 1.75rem; }
.trilha__titulo { max-width: none; color: var(--tinta-clara); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .7rem; }
.trilha__barra { height: 12px; border-radius: var(--r-pill); background: var(--folha-luz); overflow: hidden; }
.trilha__pago {
  width: 6%;
  height: 100%;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: linear-gradient(90deg, var(--sol) 0%, var(--amanhecer) 100%);
  transition: width .7s var(--curva);
}
.trilha__marcas { display: flex; justify-content: space-between; margin-top: .5rem; color: var(--tinta-clara); font-size: var(--t-micro); }
.trilha__chaves { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: 1rem; font-size: var(--t-mini); color: var(--tinta-noite); }
.trilha__chave { display: flex; align-items: center; gap: .5rem; }
.trilha__chave::before { content: ""; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.trilha__chave--pago::before { background: linear-gradient(135deg, var(--sol), var(--amanhecer)); }
.trilha__chave--livre::before { background: var(--folha-luz); }

.sim__bancos { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha-noite); }
.sim__bancos-titulo { max-width: none; color: var(--tinta-clara); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sim__bancos-lista { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; }
.sim__bancos-lista li {
  display: grid; place-items: center;
  height: 42px;
  padding-inline: .9rem;
  border-radius: var(--r-xs);
  background: var(--branco);
}
.sim__bancos-lista img { height: var(--logo, 22px); width: auto; max-width: 88px; object-fit: contain; }

.sim__zap { margin-top: 1.5rem; }
.sim__aviso {
  margin-top: 1.5rem;
  color: var(--tinta-media);
  font-size: .8125rem;
  line-height: 1.6;
  max-width: 76ch;
}

/* -- 10. JORNADA ---------------------------------------------------------- */
/* Item 11: cinco etapas com trilho continuo, icone proprio e prazo.
   Analise -> projeto -> homologacao -> instalacao -> monitoramento. */
.jornada { display: grid; gap: 0; }
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-bottom: 2.5rem;
}
.etapa:last-child { padding-bottom: 0; }
/* trilho vertical no celular */
.etapa::before {
  content: "";
  position: absolute;
  left: 1.4rem; top: 3.2rem; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--sol) 0%, var(--linha) 85%);
}
.etapa:last-child::before { display: none; }

.etapa__marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--r-md);
  background: var(--branco);
  box-shadow: inset 0 0 0 1.5px var(--linha), var(--sombra-1);
  color: var(--sol-texto);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva),
              background-color var(--medio) var(--curva), color var(--medio) var(--curva);
}
.etapa:hover .etapa__marca {
  transform: translateY(-3px);
  background: var(--noite);
  color: var(--amanhecer);
  box-shadow: inset 0 0 0 1.5px var(--noite), var(--sombra-2);
}
.etapa__n {
  position: absolute;
  top: -.4rem; right: -.4rem;
  display: grid;
  place-items: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--sol);
  color: var(--noite);
  font-size: var(--t-micro);
  font-weight: 900;
}
.etapa__corpo { padding-top: .25rem; }
.etapa__quem {
  max-width: none;
  color: var(--tinta-media);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.etapa__quem--voce { color: var(--sol-texto); }
.etapa__titulo { margin-top: .3rem; font-size: var(--t-h3); }
.etapa__texto { margin-top: .5rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; max-width: 40ch; }
.etapa__prazo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: none;
  margin-top: .7rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--nevoa);
  color: var(--tinta-media);
  font-size: var(--t-micro);
  font-weight: 700;
}
.secao--areia .etapa__prazo { background: var(--branco); }
.etapa__ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--sol); flex: none; }

.jornada__fecho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  max-width: none;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--linha);
}
.jornada__resumo { max-width: none; display: flex; align-items: baseline; gap: .6rem; }
.jornada__resumo-n { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; color: var(--noite); }
.jornada__resumo-t { color: var(--tinta-media); font-size: var(--t-mini); max-width: 22ch; }

/* -- 11. PROJETOS --------------------------------------------------------- */
/* Item 3: cada instalacao vira um projeto completo: foto, cidade, potencia,
   conta antes/depois, economia anual, desafio tecnico e resultado. */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.filtro {
  padding: .55rem 1.05rem;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-pill);
  background: var(--branco);
  color: var(--tinta-media);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.filtro:hover { border-color: var(--noite); color: var(--tinta); transform: translateY(-1px); }
.filtro[aria-pressed="true"] { background: var(--noite); border-color: var(--noite); color: var(--branco); }

.projetos { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.projeto[hidden] { display: none; }

.projeto__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.projeto__card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 0, .28), var(--sombra-3);
}

.projeto__capa { position: relative; overflow: hidden; }
.projeto__capa img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* tratamento consistente entre fotos de origens diferentes (item 12) */
  filter: saturate(1.04) contrast(1.03);
  transition: transform .8s var(--curva);
}
.projeto__card:hover .projeto__capa img { transform: scale(1.045); }
.projeto__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 39, 57, .18) 0%, rgba(12, 39, 57, 0) 35%,
                                      rgba(12, 39, 57, .42) 100%);
}
.projeto__etiqueta {
  position: absolute;
  top: .85rem; left: .85rem;
  z-index: 1;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--noite);
  font-size: var(--t-micro);
  font-weight: 700;
}
/* potencia sobre a foto: e o dado tecnico que qualifica a obra */
.projeto__potencia {
  position: absolute;
  right: .85rem; bottom: .85rem;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: .2rem;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: var(--sol);
  color: var(--noite);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.projeto__potencia span { font-size: .72em; font-weight: 700; }

.projeto__corpo { flex-grow: 1; padding: 1.35rem 1.35rem .5rem; }
.projeto__local {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: none;
  color: var(--tinta-media);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.projeto__cidade { color: var(--sol-texto); }
.projeto__titulo { margin-top: .45rem; font-size: var(--t-h3); }

/* desafio e resultado: dois blocos rotulados, o coracao do projeto */
.projeto__bloco { margin-top: 1rem; }
.projeto__bloco-r {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: none;
  color: var(--tinta-media);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.projeto__bloco-r::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 2px;
  flex: none;
  background: var(--linha-forte);
}
.projeto__bloco--desafio .projeto__bloco-r::before { background: var(--sol); }
.projeto__bloco--resultado .projeto__bloco-r::before { background: var(--folha); }
.projeto__bloco p { margin-top: .35rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; }

/* rodape do projeto: os tres numeros do resultado financeiro */
.projeto__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem;
  margin-top: 1.35rem;
  padding: 1.1rem 1.35rem;
  border-top: 1px solid var(--linha);
  background: var(--nevoa);
}
.projeto__campo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.projeto__campo-r { color: var(--tinta-media); font-size: var(--t-micro); }
.projeto__campo-v {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.projeto__campo-v--antes { color: var(--tinta-media); text-decoration: line-through; text-decoration-thickness: 2px; }
.projeto__campo-v--depois { color: var(--folha-texto); }
.projeto__campo-v--ano { color: var(--noite); }

.projeto__quando {
  max-width: none;
  padding: .75rem 1.35rem;
  border-top: 1px solid var(--linha);
  color: var(--tinta-media);
  font-size: var(--t-micro);
}

.projetos__nota {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  color: var(--tinta-media);
  font-size: var(--t-mini);
}

/* -- 12. VOZES (prova social) --------------------------------------------- */
/* Item 4: tres depoimentos especificos, com nome completo, cidade, tipo de
   instalacao e o antes/depois da fatura desenhado como dado, nao como
   imagem de documento. */
.vozes__lista { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }

.voz {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.voz:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-2); }

.voz__aspas { color: var(--sol); opacity: .35; margin-bottom: .5rem; }
.voz__fala {
  flex-grow: 1;
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -.01em;
}

/* fatura: representacao do antes/depois. E um grafico de dado, deixado
   explicito como tal, nao um recorte de documento. */
.fatura {
  margin-top: 1.35rem;
  padding: .9rem 1rem;
  border-radius: var(--r-md);
  background: var(--nevoa);
}
.fatura__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  max-width: none;
  color: var(--tinta-media);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fatura__linhas { display: grid; gap: .5rem; margin-top: .7rem; }
.fatura__linha { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.fatura__quando { color: var(--tinta-media); font-size: var(--t-micro); font-weight: 700; }
.fatura__barra { height: 10px; border-radius: var(--r-pill); background: var(--linha); overflow: hidden; }
.fatura__preenche {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--tinta-clara);
  width: var(--pct, 100%);
  /* a barra cresce quando o cartao entra na tela (item 7) */
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--curva);
}
[data-revela].revelado .fatura__preenche { transform: scaleX(1); }
.fatura__linha--depois .fatura__preenche { background: linear-gradient(90deg, var(--folha), var(--folha-luz)); }
.fatura__valor { font-weight: 800; font-size: .9375rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fatura__linha--antes .fatura__valor { color: var(--tinta-media); }
.fatura__linha--depois .fatura__valor { color: var(--folha-texto); }
.fatura__nota { margin-top: .7rem; max-width: none; color: var(--tinta-media); font-size: var(--t-micro); }
.fatura__nota strong { color: var(--folha-texto); }

.voz__quem { display: flex; align-items: center; gap: .8rem; margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.voz__foto {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--fundo, var(--noite));
  color: var(--tinta, var(--amanhecer));
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.voz__id { display: grid; gap: .1rem; min-width: 0; }
.voz__nome { font-size: .9375rem; font-weight: 800; letter-spacing: -.02em; }
.voz__onde { color: var(--tinta-media); font-size: var(--t-micro); }

.vozes__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  color: var(--tinta-media);
  font-size: var(--t-mini);
}

/* -- 13. CONFIANCA -------------------------------------------------------- */
/* Item 17: CREA/ART, garantias, equipe propria, INMETRO, financiadoras. */
.confianca__grade { display: grid; gap: clamp(2rem, 5vw, 3rem); }

.ficha { display: grid; gap: 1.25rem; }
.ficha__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 .9rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linha-noite);
}
.ficha__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha__marca {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-sm);
  background: rgba(255, 176, 32, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .26);
  color: var(--amanhecer);
}
.ficha__titulo { font-size: var(--t-h4); color: var(--branco); }
.ficha__texto { margin-top: .3rem; grid-column: 2; color: var(--tinta-noite); font-size: .9375rem; line-height: 1.55; max-width: 44ch; }
.ficha__selo {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: none;
  margin-top: .6rem;
  padding: .25rem .65rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--linha-noite);
  color: var(--tinta-clara);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* garantias: tres selos com o prazo em destaque */
.selos { display: grid; gap: 1rem; }
.selo-g {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.selo-g:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-2); }
.selo-g__anos { display: flex; align-items: baseline; gap: .3rem; max-width: none; color: var(--sol-texto); }
.selo-g__n { font-size: clamp(2.75rem, 2rem + 2.6vw, 3.5rem); font-weight: 900; line-height: .9; letter-spacing: -.05em; }
.selo-g__u { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.selo-g__nome { margin-top: .8rem; font-size: var(--t-h4); }
.selo-g__nota { margin-top: .5rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; max-width: 38ch; }
.selo-g__quem {
  display: inline-block;
  max-width: none;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linha);
  color: var(--folha-texto);
  font-size: var(--t-micro);
  font-weight: 700;
}

/* -- 14. PARCEIROS -------------------------------------------------------- */
/* Item 10: logo tratada em cartao proprio + o motivo da escolha em quatro
   criterios fixos (garantia, suporte, eficiencia, confiabilidade). */
.marcas { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }
.marca-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.marca-item:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-2); }
/* cada logo ganha o proprio cartao claro e a mesma caixa optica, para as
   marcas nao chegarem em escalas diferentes (item 10) */
.marca-item__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 76px;
  padding: .9rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--nevoa);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.marca-item__logo img { height: var(--logo, 34px); width: auto; max-width: 150px; object-fit: contain; }
.marca-item__nome { margin-top: 1.2rem; font-size: var(--t-h3); font-weight: 900; letter-spacing: -.03em; }
.marca-item__papel { margin-top: .2rem; color: var(--sol-texto); font-weight: 700; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; }
.marca-item__texto { flex-grow: 1; margin-top: .8rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; max-width: 42ch; }

/* criterios: por que essa marca foi escolhida */
.criterios { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.criterio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; }
.criterio__marca { flex: none; color: var(--folha); margin-top: .15rem; }
.criterio__t { max-width: none; font-size: var(--t-micro); line-height: 1.5; color: var(--tinta-media); }
.criterio__t strong { color: var(--noite); font-weight: 800; }

/* logos das financiadoras (parceiros.html). Sem isto elas entrariam no tamanho
   natural do arquivo, com 450px de largura cada. Mesma logica de --logo da faixa. */
.bancos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}
.bancos li {
  display: grid;
  place-items: center;
  height: 46px;
  padding-inline: 1rem;
  border-radius: var(--r-xs);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: transform var(--medio) var(--curva);
}
.bancos li:hover { transform: translateY(-2px); }
.bancos img { height: var(--logo, 24px); width: auto; max-width: 96px; object-fit: contain; }

.tarja {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--noite);
  color: var(--branco);
  box-shadow: var(--sombra-2);
}
.tarja__rotulo { max-width: none; color: var(--amanhecer); font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tarja__texto { margin-top: .75rem; color: var(--tinta-noite); font-size: 1rem; line-height: 1.6; max-width: 68ch; }

/* -- 15. DUVIDAS ---------------------------------------------------------- */
.acordeao { display: grid; gap: .6rem; }
.item {
  border-radius: var(--r-md);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: box-shadow var(--medio) var(--curva);
}
.item[open] { box-shadow: inset 0 0 0 1px var(--linha-forte), var(--sombra-1); }
.item__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.018em;
  cursor: pointer;
  list-style: none;
}
.item__pergunta::after {
  content: "";
  flex: none;
  width: .65rem; height: .65rem;
  border-right: 2px solid var(--sol);
  border-bottom: 2px solid var(--sol);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--medio) var(--curva);
}
.item[open] .item__pergunta::after { transform: rotate(-135deg) translate(-2px, -2px); }
.item__resposta { padding: 0 1.35rem 1.35rem; }
.item__resposta p { color: var(--tinta-media); font-size: .9875rem; line-height: 1.6; }

/* -- 16. FECHO ------------------------------------------------------------ */
.fecho {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--secao);
  background: var(--noite);
  color: var(--branco);
}
.fecho__caixa { position: relative; z-index: 1; text-align: center; }
.fecho__titulo { font-size: var(--t-h2); margin-inline: auto; max-width: 18ch; }
.fecho__texto { margin: 1.25rem auto 0; max-width: 52ch; color: var(--tinta-noite); font-size: var(--t-apoio); }
.fecho__acao { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: clamp(2rem, 4vw, 2.5rem); }
.fecho__horario { margin: 1.5rem auto 0; max-width: none; color: var(--tinta-clara); font-size: var(--t-mini); }
.fecho__horario a { font-weight: 700; color: var(--branco); text-decoration: none; }
.fecho__horario a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -- 17. RODAPE ----------------------------------------------------------- */
/* Item 15: navegacao, dados da empresa, atendimento, redes, politicas e
   regioes atendidas, em vez de quatro blocos soltos. */
.rodape { background: var(--noite-fundo); color: var(--tinta-noite); }
.rodape__topo { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.rodape__grade { display: grid; gap: clamp(2rem, 4vw, 2.5rem); }

.rodape__marca { display: grid; gap: 1rem; }
.rodape__logo { height: 2.1rem; width: auto; }
.rodape__sobre { color: var(--tinta-clara); font-size: .9375rem; line-height: 1.6; max-width: 34ch; }

.rodape__redes { display: flex; gap: .5rem; }
.rodape__rede {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--linha-noite);
  color: var(--branco);
  transition: background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.rodape__rede:hover { background: var(--sol); color: var(--noite); transform: translateY(-2px); }

.rodape__rotulo {
  max-width: none;
  margin-bottom: .9rem;
  color: var(--branco);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rodape__links { display: grid; gap: .55rem; }
.rodape__links a {
  color: var(--tinta-clara);
  font-size: .9375rem;
  text-decoration: none;
  transition: color var(--rapido) var(--curva);
}
.rodape__links a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }

.rodape__dados { display: grid; gap: .8rem; }
.rodape__dado { display: grid; gap: .1rem; }
.rodape__dado dt { color: var(--tinta-clara); font-size: var(--t-micro); }
.rodape__dado dd { margin: 0; color: var(--branco); font-size: .9375rem; font-weight: 500; }
.rodape__dado dd a { text-decoration: none; }
.rodape__dado dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* regioes atendidas: faixa propria, larga */
.rodape__regioes { padding-block: 1.75rem; border-top: 1px solid var(--linha-noite); }
.rodape__cidades { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.rodape__cidades li {
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--linha-noite);
  color: var(--tinta-clara);
  font-size: var(--t-micro);
  font-weight: 500;
}

.rodape__base {
  display: grid;
  gap: 1rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--linha-noite);
  color: var(--tinta-clara);
  font-size: var(--t-micro);
}
.rodape__base p { max-width: 72ch; }
.rodape__politicas { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.rodape__politicas a { text-decoration: none; }
.rodape__politicas a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }

/* -- 18. FLUTUANTE E MINI-CHAT -------------------------------------------- */
.flutuante {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.2rem;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #06331A;
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(6, 51, 26, .34);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.flutuante:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(6, 51, 26, .42); }

.chat {
  position: fixed;
  right: 1rem; bottom: 5rem;
  z-index: 41;
  width: min(21rem, calc(100vw - 2rem));
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: var(--sombra-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva),
              visibility var(--medio);
}
.chat--aberto { opacity: 1; visibility: visible; transform: none; }
.chat__fechar {
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--nevoa);
  color: var(--tinta-media);
  cursor: pointer;
  transition: background-color var(--rapido) var(--curva);
}
.chat__fechar:hover { background: var(--linha); }
.chat__acao { display: block; padding: 1.25rem; text-decoration: none; }
.chat__topo { display: flex; align-items: center; gap: .7rem; }
.chat__foto { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.chat__quem { display: grid; gap: .05rem; }
.chat__nome { font-weight: 800; font-size: .9375rem; letter-spacing: -.02em; }
.chat__papel { color: var(--tinta-media); font-size: var(--t-micro); }
.chat__online {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .2);
}
.chat__balao {
  display: block;
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  background: var(--nevoa);
  color: var(--tinta);
  font-size: .9375rem;
  line-height: 1.5;
}
.chat__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .9rem;
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  background: #25D366;
  color: #06331A;
  font-weight: 700;
  font-size: .9375rem;
}

/* -- 19. PAGINAS INTERNAS ------------------------------------------------- */
.capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--branco);
  padding-block: calc(var(--altura-cabecalho) + clamp(3rem, 7vw, 5.5rem))
                 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(100% 90% at 12% 0%, rgba(255, 176, 32, .16) 0%, rgba(255, 176, 32, 0) 58%),
    linear-gradient(160deg, rgba(8, 32, 47, .93) 0%, rgba(8, 32, 47, .86) 45%,
                            rgba(8, 32, 47, .96) 100%),
    var(--noite) url("../assets/capa-1440.webp") center 62% / cover no-repeat;
}
.capa__conteudo { position: relative; z-index: 1; }
.capa__titulo { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); max-width: 18ch; }
.capa__linha { margin-top: 1.35rem; max-width: 54ch; color: var(--tinta-noite); font-size: var(--t-apoio); line-height: 1.55; }
.capa__marcas { margin-top: 1.75rem; max-width: none; color: var(--tinta-clara); font-size: var(--t-mini); }

/* trilha de navegacao */
.migalhas { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1.5rem; color: var(--tinta-clara); font-size: var(--t-micro); }
.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.migalhas__sep { opacity: .5; }

/* linha do tempo (quem somos) */
.linha-tempo { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 0; }
.marco { position: relative; padding: 0 0 2.25rem 3.5rem; }
.marco::before {
  content: "";
  position: absolute;
  left: .34rem; top: 1.6rem; bottom: 0;
  width: 2px;
  background: var(--linha);
}
.marco::after {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--sol);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, .16);
}
.marco:last-child { padding-bottom: 0; }
.marco:last-child::before { display: none; }
.marco__ano { font-weight: 800; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--sol-texto); }
.marco__titulo { margin-top: .25rem; font-size: var(--t-h3); }
.marco__texto { margin-top: .6rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; max-width: 52ch; }

/* pessoas: equipe e tipos de parceiro */
.pessoas { margin-top: clamp(2rem, 5vw, 2.75rem); display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }
.pessoa {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.35rem, 3vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-1);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.pessoa:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-2); }
.pessoa__foto {
  width: 88px; height: 88px;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  object-fit: cover;
  object-position: center top;
  background: var(--linha);
  box-shadow: 0 0 0 3px var(--branco), 0 0 0 5px rgba(255, 107, 0, .22);
}
.pessoa__nome { font-size: var(--t-h4); }
.pessoa__papel { margin-top: .25rem; color: var(--sol-texto); font-weight: 700; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; }
.pessoa__texto { margin-top: .7rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; max-width: 36ch; }
.pessoa__selo { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linha); color: var(--folha-texto); font-size: var(--t-micro); font-weight: 700; max-width: none; }

/* blocos de "jeito de trabalhar" (quem somos) e de servico (parceiros):
   um rotulo curto a esquerda e o texto a direita */
.praticas { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 0; }
.perfil { padding-block: clamp(1.75rem, 4vw, 2.25rem); border-top: 1px solid var(--linha); }
.perfil:first-child { border-top: 0; padding-top: 0; }
.perfil__nome { font-size: var(--t-h3); }
.perfil__faixa {
  margin-top: .3rem;
  max-width: none;
  color: var(--sol-texto);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.perfil__texto { margin-top: 1rem; display: grid; gap: .9rem; }
.perfil__texto p { color: var(--tinta-media); font-size: .9375rem; line-height: 1.6; max-width: 60ch; }

/* cidades atendidas */
.cidades { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cidades li {
  padding: .45rem .9rem;
  border-radius: var(--r-pill);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha);
  font-size: .9375rem;
  font-weight: 500;
}
.cidades__nota { margin-top: 1.25rem; color: var(--tinta-media); font-size: var(--t-mini); }

/* premissas do calculo */
.premissas { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 2rem; }
.premissa { padding-top: 1.25rem; border-top: 2px solid var(--noite); }
.premissa__valor {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  max-width: none;
  font-weight: 900;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.25rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--folha-texto);
  font-variant-numeric: tabular-nums;
}
.premissa__unidade { font-size: .28em; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); }
.premissa__titulo { margin-top: .7rem; font-size: var(--t-h4); }
.premissa__texto { margin-top: .5rem; color: var(--tinta-media); font-size: .9375rem; line-height: 1.55; max-width: 38ch; }

/* tabela de perfis */
.tabela-envoltorio { overflow-x: auto; margin-top: clamp(2rem, 5vw, 3rem); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--linha); background: var(--branco); }
.tabela { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .9375rem; }
.tabela th, .tabela td { padding: 1rem 1.15rem; text-align: left; vertical-align: top; }
.tabela thead th { border-bottom: 2px solid var(--noite); }
.tabela tbody th { color: var(--tinta-media); font-weight: 700; font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase; width: 12rem; }
.tabela tbody tr + tr th, .tabela tbody tr + tr td { border-top: 1px solid var(--linha); }
.tabela td { color: var(--tinta-media); line-height: 1.5; }
.tabela__perfil { display: block; font-size: var(--t-h4); font-weight: 800; letter-spacing: -.02em; color: var(--noite); }
.tabela__faixa { display: block; margin-top: .2rem; color: var(--sol-texto); font-size: var(--t-micro); font-weight: 700; }
.tabela__col--destaque { background: rgba(255, 107, 0, .045); }
.tabela td strong { color: var(--noite); }

/* contato */
.contato { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.contato__titulo { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }
.contato__intro { margin-top: .8rem; color: var(--tinta-media); font-size: .9875rem; }

.formulario { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-weight: 700; font-size: .875rem; letter-spacing: -.01em; }
.campo__opcional { font-weight: 400; color: var(--tinta-media); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .85rem .95rem;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--branco);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-clara); }
.campo textarea { resize: vertical; min-height: 6rem; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--sol-texto); }
.formulario__erro { color: var(--sol-texto); font-weight: 700; font-size: .875rem; min-height: 1.2em; }

.dados { margin-top: 1.75rem; display: grid; gap: 1.35rem; }
.dados__item { padding-top: .9rem; border-top: 1px solid var(--linha); }
.dados__item dt { color: var(--tinta-media); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dados__item dd { margin: .3rem 0 0; font-size: 1.0625rem; font-weight: 500; }
.dados__mapa { display: inline-block; margin-top: .5rem; color: var(--sol-texto); font-weight: 700; font-size: .875rem; text-underline-offset: 3px; }
.contato__nota { margin-top: 1.5rem; color: var(--tinta-media); font-size: var(--t-mini); }

/* -- MEDIA QUERIES -------------------------------------------------------- */
/* Item 14: as secoes importantes sao redesenhadas em cada faixa, nao apenas
   empilhadas. O simulador, o heroi e a jornada mudam de arranjo, nao so de
   largura. */

@media (min-width: 40em) {
  .autoridade__grade { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.75rem; }
  .sim__duo { grid-template-columns: 1fr 1fr; }
  .troca { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .troca__seta { transform: none; }
  .projetos { grid-template-columns: repeat(2, 1fr); }
  .vozes__lista { grid-template-columns: repeat(2, 1fr); }
  .selos { grid-template-columns: repeat(3, 1fr); }
  .marcas { grid-template-columns: repeat(2, 1fr); }
  .pessoas { grid-template-columns: repeat(3, 1fr); }
  .pessoas--quatro { grid-template-columns: repeat(2, 1fr); }
  .premissas { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .formulario { grid-template-columns: 1fr 1fr; }
  .campo--largo, .formulario .botao, .formulario__erro { grid-column: 1 / -1; }
  .rodape__base { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rodape__politicas { justify-content: flex-end; }
  .heroi__acao .botao { flex: 0 1 auto; }
  .projeto__campo-v { font-size: 1.125rem; }
}

@media (min-width: 62em) {
  /* --- cabecalho horizontal --- */
  .js .menu-alavanca { display: none; }
  .cabecalho__linha { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.25rem, 2.2vw, 2rem); }
  .marca { justify-self: start; }
  /* o <nav> vira display:contents: some como caixa e deixa a lista de links
     e o botao de WhatsApp entrarem direto no grid do cabecalho */
  .menu, .js .menu {
    display: contents;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .menu__lista {
    grid-column: 2;
    justify-self: center;
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.9vw, 1.75rem);
    border-top: 0;
    padding-top: 0;
  }
  .menu__link {
    padding: .35rem 0;
    font-size: .9375rem;
    border-bottom: 2px solid transparent;
  }
  .menu__link[aria-current="page"] {
    box-shadow: none;
    padding-left: 0;
    border-bottom-color: var(--sol);
  }
  .menu__zap { grid-column: 3; justify-self: end; margin-top: 0; width: auto; }

  /* barra que desliza ate o item sob o mouse (item 7) */
  .menu__cursor {
    display: block;
    position: absolute;
    bottom: -2px; left: 0;
    height: 2px; width: 0;
    border-radius: 2px;
    background: var(--sol);
    opacity: 0;
    transition: transform var(--medio) var(--curva), width var(--medio) var(--curva),
                opacity var(--rapido) var(--curva);
    pointer-events: none;
    will-change: transform, width;
  }
  .menu__cursor--ativo { opacity: 1; }

  /* --- heroi dividido: texto de um lado, foto do outro (item 1) --- */
  .heroi__conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: calc(var(--altura-cabecalho) + clamp(3.5rem, 7vw, 6rem))
                   clamp(3.5rem, 6vw, 5.5rem);
  }
  .heroi__figura { margin-top: 0; }
  /* no desktop o texto ocupa so a coluna da esquerda: o veu fecha ali e abre
     do lado da figura, deixando o fundo aparecer. O mesmo gradiente serve para
     o quadro parado e para o video, que sao a mesma cena. Medido no pior ponto
     de cada bloco, em 8 quadros: titulo 7,8:1, apoio 5,4:1, texto pequeno
     4,8:1. */
  .heroi__veu {
    background:
      radial-gradient(70% 90% at 8% 30%, rgba(255, 176, 32, .10) 0%, rgba(255, 176, 32, 0) 62%),
      linear-gradient(100deg, rgba(8, 32, 47, .93) 0%, rgba(8, 32, 47, .78) 45%,
                              rgba(8, 32, 47, .38) 100%);
  }
  
  /* --- simulador: entrada a esquerda, resultado a direita (item 2) --- */
  .sim__painel {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: stretch;
  }
  .sim__passo--entrada { border-top: 0; }
  .sim__passo--resultado {
    border-top: 0;
    border-left: 1px solid var(--linha-noite);
    background: rgba(255, 255, 255, .025);
  }
  .sim__destaques { grid-template-columns: 1fr; }

  /* --- jornada horizontal em cinco etapas (item 11) --- */
  .jornada { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
  .etapa { grid-template-columns: 1fr; gap: 1.1rem; padding-bottom: 0; }
  .etapa::before {
    left: 3.3rem; right: -1.5rem;
    top: 1.45rem; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--sol) 0%, var(--linha) 85%);
  }
  .etapa__corpo { padding-top: 0; }
  .etapa__texto { max-width: none; }

  /* --- restante --- */
  .autoridade__grade { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .confianca__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .marcas { grid-template-columns: repeat(3, 1fr); }
  .vozes__lista { grid-template-columns: repeat(3, 1fr); }
  .pessoas--quatro { grid-template-columns: repeat(4, 1fr); }
  .premissas { grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2rem; }
  .perfil { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .perfil__texto { margin-top: 0; }
  .contato { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; }
  .linha-tempo { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .marco { padding: 2.5rem 0 0; }
  .marco::before { left: 1.9rem; right: -2rem; top: .55rem; bottom: auto; width: auto; height: 2px; }
  .marco:last-child::before { display: none; }
  .marco::after { top: 0; }

  .cabeca--duas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: 2.5rem 3.5rem;
    align-items: end;
  }
  .cabeca--duas .olho, .cabeca--duas .cabeca__titulo { grid-column: 1; }
  .cabeca--duas .apoio { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: end; }

  .flutuante { right: 1.75rem; bottom: 1.75rem; padding: 1rem 1.4rem; font-size: 1rem; }
  .chat { right: 1.75rem; bottom: 5.75rem; }
}

/* telas muito estreitas: o flutuante vira so o icone e o mini-chat sobe */
@media (max-width: 26em) {
  .flutuante__texto { display: none; }
  .flutuante { padding: .95rem; }
  .projeto__numeros { grid-template-columns: 1fr 1fr; gap: .75rem .5rem; }
}

/* -- 20. BARRA DE PROGRESSO ----------------------------------------------- */
.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.progresso__trilho {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--sol), var(--amanhecer));
}

/* -- 21. MICROINTERACOES E ENTRADA ---------------------------------------- */
/* [data-revela] comeca deslocado e transparente; o JS poe .revelado quando o
   elemento entra na tela. [data-revela-atraso] escalona os filhos. */
/* o estado escondido so existe com JS ligado: sem a classe .js (JS desativado
   ou bloqueado) o conteudo aparece normalmente, nunca em branco */
.js [data-revela] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.js [data-revela].revelado { opacity: 1; transform: none; }
.js [data-revela="lado"] { transform: translateX(-22px); }
.js [data-revela="zoom"] { transform: scale(.97); }
.js [data-revela].revelado[data-revela="lado"],
.js [data-revela].revelado[data-revela="zoom"] { transform: none; }

/* desliga a entrada por completo, sem depender de transicao. O JS liga esta
   classe quando o IntersectionObserver nao responde, assim o conteudo
   aparece mesmo em ambientes onde as transicoes nao avancam. */
.sem-revelar [data-revela] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.sem-revelar .fatura__preenche { transform: scaleX(1) !important; }
/* Mesma logica para o que foi criado depois. A transicao tambem precisa ser
   desligada: mudar so o valor de destino faz o elemento depender de a
   transicao rodar, e o motivo de a trava existir e justamente o caso em que
   nada esta rodando. Sem isto o conteudo ficaria preso no estado inicial. */
.sem-revelar .palavra__i {
  transform: none !important;
  transition: none !important;
}
.sem-revelar .olho::before,
.sem-revelar .numero::before,
.sem-revelar .etapa::before,
.sem-revelar .marco::before {
  transform: none !important;
  transition: none !important;
}
.sem-revelar .projeto__capa img {
  clip-path: none !important;
  transition: none !important;
}

[data-revela-atraso="1"] { transition-delay: .07s; }
[data-revela-atraso="2"] { transition-delay: .14s; }
[data-revela-atraso="3"] { transition-delay: .21s; }
[data-revela-atraso="4"] { transition-delay: .28s; }
[data-revela-atraso="5"] { transition-delay: .35s; }
[data-revela-atraso="6"] { transition-delay: .42s; }

/* -- 22. TRANSICAO DE PAGINA ---------------------------------------------- */
/* Duas folhas que fecham no centro ao sair e abrem para as bordas ao chegar,
   com um risco de luz na juncao. A tecnica de recorte vem do padrao de
   "line reveal" do 21st.dev (motion.dev), adaptada para CSS puro: aqui sao
   dois scaleX com origens opostas, que a GPU resolve sem repintar nada.

   Estados:
     .transicao--fechando   saindo da pagina (fecha)
     html.chegando          a pagina abriu vinda de outra: ja nasce coberta
     .transicao--abrindo    o JS liberou a abertura
   Sem JS, a folha fica em scaleX(0) e o elemento nunca aparece. */
.transicao {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.transicao__folha {
  background: var(--noite-fundo);
  transform: scaleX(0);
  will-change: transform;
  transition: transform .52s cubic-bezier(.76, 0, .24, 1);
}
.transicao__folha--esq { transform-origin: left center; }
.transicao__folha--dir { transform-origin: right center; }

/* risco de luz na juncao das folhas: e ele que da o ar de transicao feita a
   mao, em vez de um simples fade preto */
.transicao__risco {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg,
    rgba(255, 107, 0, 0) 0%, var(--sol) 22%, var(--amanhecer) 50%,
    var(--sol) 78%, rgba(255, 107, 0, 0) 100%);
  box-shadow: 0 0 22px rgba(255, 176, 32, .55);
  transform: scaleY(0);
  opacity: 0;
  transition: transform .42s var(--curva), opacity .25s var(--curva);
}

/* saindo: as folhas fecham e o risco desce */
.transicao--fechando { pointer-events: auto; }
.transicao--fechando .transicao__folha { transform: scaleX(1); }
.transicao--fechando .transicao__risco { transform: scaleY(1); opacity: 1; transition-delay: .1s; }

/* chegando: coberta desde o primeiro quadro, sem transicao (senao piscaria) */
.chegando .transicao { pointer-events: auto; }
.chegando .transicao__folha { transform: scaleX(1); transition: none; }
.chegando .transicao__risco { transform: scaleY(1); opacity: 1; transition: none; }

/* o JS libera a abertura no quadro seguinte */
.chegando .transicao--abrindo .transicao__folha {
  transform: scaleX(0);
  transition: transform .62s cubic-bezier(.76, 0, .24, 1);
}
.chegando .transicao--abrindo .transicao__risco {
  opacity: 0;
  transition: opacity .3s var(--curva) .22s;
}

/* -- 23. ANIMACOES DE ENTRADA E MICROINTERACOES --------------------------- */

/* --- titulo revelado palavra por palavra ---
   O JS quebra o titulo em palavras e cada uma sobe de dentro de uma janela.
   O padding-bottom entra na caixa de recorte, senao os descendentes ("g",
   "p", "q") seriam cortados pelo overflow. */
.palavra {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
  vertical-align: top;
}
.palavra__i {
  display: inline-block;
  transform: translateY(112%);
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
[data-revela].revelado .palavra__i,
.revelado > .palavra .palavra__i { transform: none; }

/* --- riscos que se desenham ---
   Todo tracinho da marca (o da etiqueta de secao, a barra dos numeros, o
   trilho da jornada e o da linha do tempo) entra sendo desenhado, em vez de
   simplesmente aparecer junto com o bloco. */
.js [data-revela] .olho::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--curva) .18s;
}
.js [data-revela].revelado .olho::before { transform: scaleX(1); }

.js [data-revela].numero::before {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .8s var(--curva) .1s;
}
.js [data-revela].numero.revelado::before { transform: scaleY(1); }

.js [data-revela].etapa::before,
.js [data-revela].marco::before {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .9s var(--curva) .25s;
}
.js [data-revela].etapa.revelado::before,
.js [data-revela].marco.revelado::before { transform: scaleY(1); }

/* --- foto do projeto: cortina que sobe ---
   So o clip-path anima na entrada. O transform fica reservado ao hover, que
   tem duracao propria e nao pode herdar a lenta da entrada. */
.js [data-revela] .projeto__capa img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .95s var(--curva) .1s, transform .8s var(--curva);
}
.js [data-revela].revelado .projeto__capa img { clip-path: inset(0 0 0 0); }

/* --- brilho que segue o cursor nos cartoes ---
   O JS escreve --mx e --my; sem ele o gradiente fica em opacidade zero e
   nada muda. Fica atras do conteudo (z-index 0 com o corpo em position
   relative) para nao interceptar clique. */
.projeto__card, .voz, .marca-item, .pessoa, .selo-g, .premissa { position: relative; }
.js .projeto__card::after,
.js .voz::after,
.js .marca-item::after,
.js .pessoa::after,
.js .selo-g::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
              rgba(255, 176, 32, .14), rgba(255, 176, 32, 0) 68%);
  opacity: 0;
  transition: opacity .45s var(--curva);
}
.js .projeto__card:hover::after,
.js .voz:hover::after,
.js .marca-item:hover::after,
.js .pessoa:hover::after,
.js .selo-g:hover::after { opacity: 1; }
/* o conteudo precisa ficar acima do brilho */
.voz > *, .marca-item > *, .pessoa > *, .selo-g > * { position: relative; z-index: 1; }

/* --- sublinhado que corre nos links do rodape --- */
.rodape__links a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--rapido) var(--curva), background-size .4s var(--curva);
}
.rodape__links a:hover { background-size: 100% 1px; }

/* --- numero do simulador pulsa ao trocar de valor --- */
@keyframes bate {
  0%   { transform: none; }
  35%  { transform: scale(1.035); }
  100% { transform: none; }
}
.res__v--bate { animation: bate .5s var(--curva); }

/* -- 24. MOVIMENTO REDUZIDO ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* as animacoes que partem de um estado escondido nao podem so ficar sem
     duracao: elas precisam nascer no estado final, senao o conteudo some */
  .fatura__preenche { transform: scaleX(1) !important; }
  .palavra__i { transform: none !important; }
  .palavra { overflow: visible; }
  .js [data-revela] .olho::before,
  .js [data-revela].numero::before,
  .js [data-revela].etapa::before,
  .js [data-revela].marco::before { transform: none !important; }
  .js [data-revela] .projeto__capa img { clip-path: none !important; }
  /* a transicao de pagina nao roda: o JS nem intercepta o clique */
  .transicao { display: none !important; }
}

/* No mobile, o cabeçalho só volta quando a página retorna ao topo. */
@media (max-width: 61.99em) {
  .js .cabecalho {
    transition: transform .25s ease, visibility .25s;
  }
  .js .cabecalho--solido {
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
  }
}

/* Dimensionamento do simulador e alvos de toque */
.sim__tecnico { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.5rem; }
.sim__tecnico strong { display:block; color:var(--branco); font-size:1.2rem; overflow-wrap:anywhere; }
.sim__tecnico span, .sim__nota-tecnica { font-size:.85rem; }
.sim__nota-tecnica { margin-top:1rem; line-height:1.6; }
.sim__passo--resultado { scroll-margin-top:7rem; }
.sim__tipo, .sim__atalho { min-height:44px; }
@media(max-width:40em) {
  .sim__tecnico { grid-template-columns:1fr; gap:.75rem; }
  .sim__tecnico > div { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  .sim__passo { min-width:0; }
  .sim__input { min-width:0; max-width:100%; }
  body:has(#sim-painel) .chat { display:none; }
}