/* ============================================================
   HOME — as seis cenas da BuilderTech sobre o mapa noturno
   (a câmera do mapa e as camadas de canvas ficam no home.js)
   ============================================================ */

/* Entrada do que não é título: sobe um pouco, na ordem */
.entra{ animation:entra 1.1s var(--ease) both; animation-delay:var(--d, .2s) }
@keyframes entra{ from{ opacity:0; transform:translateY(18px) } }
.so-js{ display:none }
.js .so-js{ display:flex }

/* ============================================================
   CENA 1 — NO ESCURO
   Texto embaixo, à esquerda; o mapa vive à direita. A sombra da
   esquerda é local (só atrás do texto), não uma manta na tela.
   ============================================================ */
.abre{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:128px 0 clamp(36px, 6vh, 68px) }
.abre::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--fundo) 0, rgba(7, 17, 31, .88) 30%, rgba(7, 17, 31, 0) 60%);
}
.abre__miolo{ width:100% }
.abre .rotulo{ margin-bottom:clamp(18px, 3vh, 30px) }
.abre .titulo{ max-width:9.7em }

/* A vaga do título: "sua empresa" vira o nome que a pessoa digita */
.vaga{ color:var(--suave); transition:color .5s ease }
.vaga.tem-nome{ color:var(--ciano) }
.vaga .fx-palavra.troca{ animation:nome-entra .7s var(--ease) both }
@keyframes nome-entra{ from{ transform:translateY(70%); clip-path:inset(0 0 100% 0) } }

.feito{ margin-top:clamp(20px, 3.2vh, 34px); align-items:center; flex-wrap:wrap; gap:8px 14px; max-width:600px }
.feito label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--suave) }
.feito input{
  flex:1 1 240px; min-width:0; height:48px; padding:0 20px; border-radius:999px;
  border:1px solid var(--traco); background:color-mix(in srgb, var(--painel) 82%, transparent);
  color:var(--tinta); font-family:var(--sans); font-size:15.5px; font-weight:500;
  transition:border-color .25s ease, background-color .25s ease;
}
.feito input::placeholder{ color:var(--apagado) }
.feito input:focus{ outline:none; border-color:var(--ciano); background:var(--painel) }
.feito__nota{ flex-basis:100%; margin:0; font-size:12px; color:var(--apagado); opacity:0; transition:opacity .3s ease }
.feito:focus-within .feito__nota{ opacity:1 }

.abre__base{ margin-top:clamp(18px, 3vh, 36px); display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px 56px }
.abre__base .lead{ margin:0; max-width:30em }
.abre__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px }

/* Celular: o mapa fica com o alto da tela (42% dela) e o texto começa embaixo; a
   abertura passa de uma tela, e o título já aparece na primeira. */
@media (max-width:760px){
  .abre{ min-height:0; padding:42svh 0 44px }
  .abre::before{ background:linear-gradient(0deg, var(--fundo) 0, var(--fundo) calc(100% - 58svh), rgba(7, 17, 31, 0) calc(100% - 38svh)) }
  .abre .titulo{ font-size:clamp(32px, 9.6vw, 54px) }
  .feito label{ flex-basis:100% }
}

/* ============================================================
   CENA 2 — ONDE ESTÁ O DINHEIRO (vitrine do BuilderTrack)
   A câmera do mapa segue um caminhão no vão de cima, à direita;
   o quadro do filme fica embaixo, em profundidade.
   ============================================================ */
.vitrine{ position:relative; padding:clamp(140px, 19vw, 300px) 0 clamp(110px, 12vw, 190px) }
.vitrine__miolo{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:end; row-gap:56px }
.vitrine__texto{ grid-column:1 / span 7 }
.vitrine__filme{ grid-column:8 / span 5; margin:0 }
.vitrine__filme a{ position:relative; display:block; border-radius:18px; overflow:hidden; border:1px solid var(--traco); background:var(--painel) }
.vitrine__filme img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; filter:saturate(.7) brightness(.78); transition:transform 1.4s var(--ease), filter .6s ease }
.vitrine__filme a:hover img{ transform:scale(1.05); filter:saturate(1) brightness(1) }
.vitrine__play{
  position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px 10px 14px; border-radius:999px; background:rgba(7, 17, 31, .86);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta);
}
.vitrine__play i{ width:0; height:0; border-left:8px solid var(--ciano); border-top:5px solid transparent; border-bottom:5px solid transparent }
@media (max-width:960px){
  .vitrine__texto, .vitrine__filme{ grid-column:1 / -1 }
  .vitrine__filme{ max-width:520px }
}

/* ============================================================
   CENA 3 — COMO PENSAMOS
   Pausa. O mapa baixa a luz; a frase ocupa a direita e os quatro
   princípios viram linhas que acendem no hover.
   ============================================================ */
.pensar{ padding:clamp(110px, 13vw, 210px) 0 }
.pensar__cab{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); row-gap:24px }
.pensar__cab .rotulo{ grid-column:1 / span 3; align-self:start; margin:.9em 0 0 }
.pensar__cab .titulo{ grid-column:4 / span 9 }
.pensar__cab .lead{ grid-column:7 / span 6; margin-top:8px }
.principios{ margin:clamp(64px, 8vw, 120px) 0 0; padding:0; list-style:none; border-bottom:1px solid var(--traco) }
.principio{
  position:relative; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px);
  align-items:baseline; padding:clamp(26px, 3.2vw, 46px) 0; border-top:1px solid var(--traco);
}
.principio h3{ grid-column:1 / span 5; transition:transform .7s var(--ease) }
.principio p{ grid-column:7 / span 6; margin:0; max-width:32em; font-size:17px; line-height:1.6; color:var(--suave); transition:color .4s ease }
.principio::before{ content:""; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--ciano); transform:scale(0); transition:transform .5s var(--ease) }
@media (hover:hover) and (pointer:fine){
  .principio:hover h3{ transform:translateX(26px) }
  .principio:hover p{ color:var(--tinta-2) }
  .principio:hover::before{ transform:none }
}
@media (max-width:960px){
  .pensar__cab .rotulo, .pensar__cab .titulo, .pensar__cab .lead{ grid-column:1 / -1 }
  .pensar__cab .rotulo{ margin-top:0 }
  .principio{ display:block }
  .principio p{ margin-top:12px }
}

/* ============================================================
   CENA 4 — O SISTEMA SEGUE A ESTRADA (o pico)
   Cena presa. O desenho é do canvas (home.js); aqui ficam os
   três textos, cada um na sua faixa do progresso do motor.
   ============================================================ */
.cede{ --p:var(--progresso, 1) }
.cede .fx-palco{ display:block }
.cede .fx-palco::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(0deg, rgba(7, 17, 31, .9) 0, rgba(7, 17, 31, .55) 42%, rgba(7, 17, 31, 0) 100%);
}
.cede__miolo{
  position:absolute; z-index:1; left:0; right:0; bottom:clamp(36px, 8vh, 92px);
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:end;
}
.cede__miolo > *{ grid-row:1; opacity:var(--k); transform:translateY(calc((1 - var(--k)) * var(--sobe, 24px))) }
.cede__antes{
  --k:clamp(0, min(calc((var(--p) - .02) / .06), calc((.42 - var(--p)) / .05)), 1);
  grid-column:1 / span 7; margin:0; max-width:17em;
  font-stretch:125%; font-size:clamp(22px, 2.5vw, 40px); font-weight:500; letter-spacing:-.03em; line-height:1.1; color:var(--tinta-2);
}
.cede__virada{ --k:clamp(0, calc((var(--p) - .44) / .08), 1); --sobe:44px; grid-column:1 / span 8 }
.cede__depois{ --k:clamp(0, calc((var(--p) - .84) / .08), 1); grid-column:9 / span 4 }
.cede__depois .lead{ margin:0 0 28px }
.cede:not([data-ato="3"]) .cede__depois{ pointer-events:none }
/* Rótulo do desenho: quando o ciano cobre as estradas, o mapa leva o nome da empresa */
.cede__carimbo{
  position:absolute; z-index:1; top:clamp(92px, 13vh, 132px); margin:0;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
}
.cede__carimbo{
  left:var(--lateral); display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--ciano); color:var(--ciano); background:rgba(7, 17, 31, .8);
  opacity:clamp(0, calc((var(--p) - .8) / .06), 1);
}
.cede__carimbo b{ font-weight:500; color:var(--tinta) }
@media (max-width:960px){
  .cede__antes, .cede__virada, .cede__depois{ grid-column:1 / -1 }
  .cede__depois{ grid-row:2; margin-top:22px }
  .cede__depois .lead{ margin-bottom:22px }
  .cede__virada .titulo{ font-size:clamp(32px, 9.6vw, 56px) }
  .cede__carimbo{ top:84px }
}
/* Sem movimento (ou sem JS): os três textos, um embaixo do outro */
.fx-reduzido .cede .fx-palco::after{ display:none }
.fx-reduzido .cede__miolo{ position:static; display:block; padding-top:clamp(100px, 12vw, 170px); padding-bottom:clamp(100px, 12vw, 170px) }
.fx-reduzido .cede__miolo > *{ opacity:1; transform:none; margin-bottom:36px }
.fx-reduzido .cede__carimbo{ display:none }

/* ============================================================
   CENA 5 — COMO UM PROJETO COMEÇA
   Uma estrada, quatro paradas: o fio se enche de ciano conforme
   a rolagem passa por cada etapa (--f por etapa, do home.js).
   ============================================================ */
.etapas{ padding:clamp(110px, 13vw, 210px) 0 }
.etapas__miolo{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:start; row-gap:64px }
.etapas__lado{ grid-column:1 / span 5; position:sticky; top:clamp(96px, 18vh, 160px) }
.etapas__lado .botao{ margin-top:32px }
.etapas__lista{ grid-column:7 / span 6; margin:0; padding:0; list-style:none }
.etapa{ position:relative; padding:0 0 clamp(60px, 7.5vw, 118px) clamp(40px, 4.4vw, 68px) }
.etapa:last-child{ padding-bottom:0 }
.etapa > *{ opacity:.4; transition:opacity .7s ease }
.etapa.chegou > *{ opacity:1 }
.etapa::before{
  content:""; position:absolute; left:0; top:3px; width:13px; height:13px; border-radius:50%;
  border:1.5px solid var(--traco); background:var(--fundo); transition:background-color .5s ease, border-color .5s ease;
}
.etapa.chegou::before{ background:var(--ciano); border-color:var(--ciano) }
.etapa:not(:last-child)::after{
  content:""; position:absolute; left:6px; top:22px; bottom:-1px; width:1.5px;
  background:linear-gradient(var(--ciano), var(--ciano)) top / 100% calc(var(--f, 0) * 100%) no-repeat, var(--traco);
}
.etapa__num{ display:block; margin-bottom:16px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--suave) }
.etapa p{ margin:14px 0 0; max-width:30em; font-size:17px; color:var(--suave) }
.fx-reduzido .etapa > *{ opacity:1 }
@media (max-width:960px){
  .etapas__lado, .etapas__lista{ grid-column:1 / -1 }
  .etapas__lado{ position:static }
}

/* ============================================================
   CENA 6 — CONTATO
   Calma e resolvida. A divisão em duas colunas está no site.css.
   ============================================================ */
.contato__miolo{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px); align-items:start; row-gap:48px }
.contato__extra{ margin-top:40px; display:flex; flex-direction:column; align-items:flex-start; gap:22px }
.contato__email{ font-family:var(--mono); font-size:13px; color:var(--tinta-2); border-bottom:1px solid var(--traco); padding-bottom:5px; transition:color .25s ease, border-color .25s ease }
.contato__email:hover{ color:var(--tinta); border-color:var(--suave) }

@media (prefers-reduced-motion:reduce){
  .entra{ animation:none }
  .vaga .fx-palavra.troca{ animation:none }
}