/* Evonnis · páginas internas no visual "A estrada".
   Carrega depois de estrada.css, que traz fontes, cores, .btn, .plate, .km,
   .mock, .foot, .zap e .cookies. Aqui fica só o que a home não tem: a estrada
   curta do funil, o formulário e os layouts de cada página. */

.nav img{display:block}
.nav .home{display:flex;border-radius:6px}

.pg{padding:130px 0 110px;position:relative}
.pg .plate{color:var(--p200)}
h1.t{font-weight:750;font-stretch:88%;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.025em;color:var(--branco);margin:22px 0;text-wrap:balance}
h1.t em{font-style:normal;color:var(--rust300)}
.lede + .lede{margin-top:14px}
.cols2{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
.btn{border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--p100);border:1px solid rgba(164,201,204,.35)}
.btn.ghost:hover{background:rgba(164,201,204,.1)}
.btn[disabled]{opacity:.6;cursor:progress}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- a estrada curta: km 290 (respostas), 295 (horário), 300 (conversa) ---- */
.rota{position:relative;height:120px;margin:0 0 70px}
.rota ol{list-style:none}
.rota .asf{position:absolute;left:0;top:38px;height:16px;border-radius:8px;background:var(--p900);box-shadow:0 0 0 3px var(--p700)}
.rota .asf::after{content:"";position:absolute;left:8px;right:8px;top:7px;height:2px;background:repeating-linear-gradient(90deg,var(--rust) 0 16px,transparent 16px 28px)}
.rota .fant{position:absolute;top:44px;right:0;height:4px;background:repeating-linear-gradient(90deg,rgba(129,176,180,.5) 0 3px,transparent 3px 12px)}
.rota .m{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.rota .m:nth-child(1){left:0;transform:none;align-items:flex-start}
.rota .m:nth-child(2){left:50%}
.rota .m:nth-child(3){left:100%;transform:translateX(-100%);align-items:flex-end}
.rota .km{width:66px;padding:7px 0 8px;margin:0;border-color:var(--p100)}
.rota .km span{display:block}
.rota .km .n{font-size:24px}
.rota .m b{margin-top:34px;font:700 12px/1.2 var(--narrow);letter-spacing:.14em;text-transform:uppercase;color:var(--p300);white-space:nowrap}
.rota .m[aria-current] b{color:var(--rust300)}
.rota .bus{position:absolute;top:32px;width:40px;height:28px}
.rota[data-etapa="0"] .asf{width:16%}
.rota[data-etapa="0"] .fant{left:16%}
.rota[data-etapa="0"] .bus{left:calc(16% - 20px)}
.rota[data-etapa="1"] .asf{width:62%}
.rota[data-etapa="1"] .fant{left:62%}
.rota[data-etapa="1"] .bus{left:calc(62% - 20px)}
.rota[data-etapa="2"] .asf{width:100%}
.rota[data-etapa="2"] .fant{display:none}
.rota[data-etapa="2"] .bus{left:calc(100% - 108px)}

/* ---- formulário ---- */
.forma{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:34px}
.campo{display:grid;gap:8px;align-content:start}
.chips,.consent,.forma .btn{grid-column:1 / -1}
.campo label,.chips legend{font:600 12px/1 var(--narrow);letter-spacing:.16em;text-transform:uppercase;color:var(--p300)}
.campo input{width:100%;height:54px;border-radius:10px;border:1px solid rgba(164,201,204,.28);background:rgba(255,255,255,.04);color:var(--branco);font:500 17px/1 var(--sans);padding:0 16px;transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.campo input::placeholder{color:var(--p500)}
.campo input:focus{outline:0;border-color:var(--rust);box-shadow:0 0 0 3px rgba(226,112,58,.25)}
.chips{border:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{margin-bottom:10px;float:left;width:100%}
.chip{position:relative;cursor:pointer;font:600 14px/1 var(--sans);font-stretch:90%;padding:12px 14px;border-radius:999px;border:1px solid rgba(164,201,204,.3);color:var(--p100);transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chip:hover{border-color:rgba(164,201,204,.6)}
.chip:has(input:checked){background:var(--rust);border-color:var(--rust);color:var(--p950)}
.chip:has(input:focus-visible){outline:3px solid var(--rust);outline-offset:3px}
.consent{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
.consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--rust)}
.consent label{font:500 13.5px/1.55 var(--narrow);color:var(--p300)}
.consent a{color:var(--rust300)}
.forma .btn{justify-self:start;margin-top:6px}
/* Aviso do formulário: aparece só quando o envio não pode acontecer. */
.forma-aviso{margin:28px 0 0;padding:16px 18px;border-radius:10px;background:rgba(226,112,58,.12);border-left:3px solid var(--rust);font:500 14px/1.6 var(--narrow);color:var(--rust300)}
.forma-aviso[hidden]{display:none}
/* Honeypot: fora da tela, nunca escondido com display:none, senão robô percebe. */
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.plano-b{margin-top:28px;padding:24px 22px;border-radius:14px;background:var(--p900);border:1px solid rgba(164,201,204,.2)}
.plano-b p{color:var(--p200);font-size:15px;margin-bottom:18px}

/* ---- painel lateral (mesmo cartão branco da home) ---- */
.cols2 > .mock{position:sticky;top:30px}

/* ---- agenda ---- */
/* O container precisa de altura fixa em px: o widget do Calendly mede o
   container para montar o próprio layout. Ver o comentário em agendar.html. */
.agenda{width:100%;height:700px;border-radius:16px;overflow:hidden;background:var(--p900);border:1px solid rgba(164,201,204,.2)}
.agenda-link{margin-top:14px;font:500 13px/1.5 var(--narrow)}
.agenda-link a{color:var(--p300)}
.calendly-spinner{display:none!important}

/* ---- chegada (obrigado, recebido, 404) ---- */
.cheg{text-align:center}
.cheg .terminal{margin-bottom:26px}
.cheg h1.t{margin-inline:auto;max-width:14ch}
.cheg .lede{margin-inline:auto;max-width:44ch}
.cheg .ctas{align-items:center}
.cheg .ctas.lado{flex-direction:row;justify-content:center;flex-wrap:wrap}
.cheg-mock{max-width:640px;margin:70px auto 0}
.pg .proof{margin-top:80px}

/* ---- privacidade ---- */
.topo-legal{padding:150px 0 70px}
.topo-legal .micro{margin-top:4px}
.legal-corpo{padding:80px 0 110px}
.legal{max-width:74ch}
.legal h2{font-weight:750;font-stretch:88%;font-size:26px;line-height:1.15;letter-spacing:-.01em;color:var(--p900);margin:48px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16.5px;line-height:1.75;color:var(--suave)}
.legal p + p{margin-top:12px}
.legal strong{color:var(--tinta);font-weight:650}
.legal ul{padding-left:22px;margin:12px 0}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--rust)}
.legal a{color:var(--rust700)}

@media (max-width:1060px){
  .cols2{grid-template-columns:1fr;gap:56px}
  .cols2 > .mock{position:static}
}
@media (max-width:760px){
  .pg{padding:100px 0 70px}
  .rota{margin-bottom:44px}
  .rota .km{width:54px}
  .rota .km .n{font-size:20px}
  .rota .m b{font-size:10px;letter-spacing:.1em}
  .forma{grid-template-columns:1fr}
  .agenda{height:760px}
  .topo-legal{padding:110px 0 50px}
  .legal-corpo{padding:56px 0 80px}
  .pg .proof{margin-top:56px}
  /* Na home a placa de chegada vira vertical na faixa da estrada; aqui não há faixa. */
  .cheg .terminal{position:relative;left:auto;top:auto;transform:none;margin-bottom:22px}
  .cheg .terminal .plateT{font-size:18px;padding:9px 14px;border-width:3px;writing-mode:horizontal-tb;transform:none}
}