/* ==========================================================================
   Primeira dobra da Home com formulário (30/09/2026).
   Só a index.html carrega este arquivo — as outras páginas não mudam.

   Desktop: título e formulário à esquerda, vídeo do Fred à direita; o cartão
   estica até a base do celular, então os dois terminam na mesma linha.
   Celular: título, vídeo, formulário (um embaixo do outro).
   Uma coisa por tela: contato primeiro, depois 4 perguntas de toque.
   ========================================================================== */
.hero-lead{
  display:grid;gap:26px;align-items:start;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"texto" "video" "form";
}
.hero-lead-texto{grid-area:texto}
.hero-lead .video-hero{grid-area:video}
.hero-lead .lf{grid-area:form}
@media (min-width:960px){
  /* O bloco ocupa a primeira tela inteira e fica CENTRADO na altura dela:
     antes ele grudava no topo e sobrava espaço vazio embaixo. */
  .hero.aurora:has(.hero-lead){
    min-height:100vh;min-height:100svh;display:flex;align-items:center;
    padding:calc(var(--topo) + 32px) 0 48px;
  }
  .hero-lead{
    grid-template-columns:minmax(0,1fr) auto;column-gap:64px;row-gap:34px;
    grid-template-areas:"texto video" "form video";
    /* a 1a linha fica do tamanho do título; o resto da altura do vídeo é do cartão */
    grid-template-rows:auto 1fr;
  }
  .hero-lead .lf{align-self:stretch}
  /* celular um pouco menor (era 720px) e que acompanha a altura da tela */
  .hero-lead .video-hero.vertical .telefone{height:clamp(600px, calc(100svh - var(--topo) - 140px), 680px)}
}
.hero-lead .t-hero{font-size:clamp(32px,3.7vw,52px);line-height:1.04;max-width:15em;margin:0}
.hero-lead .texto-g{margin-top:16px;font-size:clamp(16px,1.5vw,19px)}

/* ------------------------------------------------------------ cartão */
.lf{
  position:relative;display:flex;flex-direction:column;
  padding:24px 26px 24px;border-radius:24px;
  background:linear-gradient(180deg,rgba(14,22,44,.8),rgba(6,10,24,.9));
  border:1px solid rgba(237,243,255,.13);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(237,243,255,.07);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
}
/* luz verde bem fraca no canto, a mesma do resto do hero */
.lf::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 55% at 0% 0%,rgba(132,188,37,.11),transparent 70%)}
.lf > *{position:relative}
.lf [hidden]{display:none!important}
@media (max-width:560px){.lf{padding:22px 18px 22px;border-radius:24px}}

.lf-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.lf-passo{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}
.lf-trilha{display:flex;gap:5px;flex:none}
.lf-trilha i{width:22px;height:3px;border-radius:99px;background:rgba(237,243,255,.14);transition:background-color .35s ease}
.lf-trilha i.feito{background:var(--verde)}
@media (max-width:560px){.lf-trilha i{width:16px}.lf-passo{font-size:10.5px;letter-spacing:.14em}}

/* cada tela ocupa a altura toda do cartão; o rodapé (botões) fica embaixo */
.lf-tela{display:flex;flex-direction:column;flex:1}
.lf-tela.entra{animation:lf-entra .34s cubic-bezier(.2,.7,.2,1)}
.lf-tela.volta{animation:lf-volta .34s cubic-bezier(.2,.7,.2,1)}
@keyframes lf-entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes lf-volta{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lf-tela.entra,.lf-tela.volta{animation:none}}

.lf-titulo{font-size:clamp(21px,1.9vw,26px);line-height:1.15;margin:0;outline:0}
.lf-titulo em{font-size:1.1em;line-height:.9}
.lf-apoio{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--texto-2)}
.lf-apoio-g{font-size:clamp(16px,1.5vw,18px);color:var(--texto)}

/* contato */
.lf-campos{display:grid;gap:16px 14px;grid-template-columns:1fr;margin-top:22px}
@media (min-width:560px){.lf-campos{grid-template-columns:1fr 1fr}.lf-campos .larga{grid-column:span 2}}
.lf-campo{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--texto-2)}
.lf-campo small{font-size:inherit;font-weight:500;color:var(--texto-3);margin-left:4px}
.lf .campo{padding:11px 14px;font-size:14.5px;border-radius:11px;background:rgba(237,243,255,.05);border-color:rgba(237,243,255,.16)}
.lf .campo:hover{border-color:rgba(237,243,255,.3)}
.lf .campo:focus{border-color:var(--verde);background:rgba(237,243,255,.07)}
.lf .campo.lf-invalido{border-color:#ff7a7a;box-shadow:0 0 0 4px rgba(255,122,122,.12)}
/* sem o fundo amarelo/branco do preenchimento automático do navegador */
.lf .campo:-webkit-autofill,.lf .campo:-webkit-autofill:hover,.lf .campo:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--texto);caret-color:var(--texto);
  box-shadow:0 0 0 1000px #111a2f inset;transition:background-color 9999s}

/* perguntas: cartões de toque (rádio escondido) */
.lf-opcoes{display:grid;gap:9px;margin-top:18px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.lf-opcoes{grid-template-columns:1fr;gap:8px;margin-top:18px}}
.lf-op{position:relative;display:block}
.lf-op input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.lf-op span{
  display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 15px;border-radius:12px;
  border:1px solid rgba(237,243,255,.14);background:rgba(237,243,255,.035);color:var(--texto);
  font-size:14.5px;font-weight:600;line-height:1.25;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.lf-op span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(237,243,255,.35);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.lf-op:hover span{border-color:rgba(237,243,255,.32);background:rgba(237,243,255,.065)}
.lf-op:active span{transform:scale(.985)}
.lf-op input:checked + span{border-color:var(--verde);background:rgba(132,188,37,.13);box-shadow:inset 0 0 0 1px var(--verde)}
.lf-op input:checked + span::before{border-color:var(--verde);background:var(--verde);box-shadow:inset 0 0 0 4px #0c1529}
.lf-op input:focus-visible + span{outline:2px solid var(--verde);outline-offset:2px}

/* rodapé de cada tela */
.lf-rodape{margin-top:auto;padding-top:26px;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.lf-voltar{margin-right:auto;background:none;border:0;padding:6px 0;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--texto-3);cursor:pointer;text-decoration:none;transition:color .18s ease}
.lf-voltar:hover{color:var(--texto)}

/* botão principal: verde com leve degradê e brilho no topo, seta numa bolinha
   escura que anda no hover */
.lf .lf-principal{
  min-width:196px;justify-content:space-between;gap:16px;
  padding:7px 7px 7px 22px;border-radius:999px;border:0;
  font-size:14.5px;font-weight:700;letter-spacing:-.005em;color:var(--navy);
  background:linear-gradient(180deg,#a3d93c 0%,var(--verde) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.25),0 12px 28px -12px rgba(132,188,37,.75);
}
.lf .lf-principal .seta{
  flex:none;width:34px;height:34px;padding:9px;border-radius:50%;
  background:var(--navy);color:var(--verde);
  transition:transform .2s ease,background-color .2s ease;
}
.lf .lf-principal:hover{
  background:linear-gradient(180deg,#aee24a 0%,var(--verde-claro) 100%);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.25),0 18px 36px -14px rgba(132,188,37,.9);
}
.lf .lf-principal:hover .seta{transform:translateX(3px)}
.lf .lf-principal:active{transform:translateY(0) scale(.985)}
.lf .lf-principal:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.lf .lf-principal:disabled:hover{background:linear-gradient(180deg,#a3d93c 0%,var(--verde) 100%);transform:none;box-shadow:none}
.lf .lf-principal:disabled .seta{transform:none}
.lf-legal{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--texto-3);text-align:right}
.lf-legal a{color:var(--texto-2);text-decoration:underline;text-underline-offset:2px}
.lf-legal a:hover{color:var(--texto)}
@media (max-width:560px){
  .lf-rodape{flex-direction:column-reverse;align-items:stretch;gap:12px}
  .lf-voltar{margin:0;align-self:center}
  .lf-principal{width:100%;min-width:0;white-space:normal;text-align:center}
  .lf-legal{text-align:center}
}

/* aviso de erro: mora no rodapé, ao lado do botão, para o cartão não crescer */
.lf-rodape .estado{flex:1;min-width:0;margin:0;padding:0;border:0;background:none;
  font-size:13.5px;font-weight:600;line-height:1.4;color:#ff9d9d;text-align:right}
.lf-rodape .estado.erro{display:block;background:none;border:0;color:#ff9d9d}
@media (max-width:560px){.lf-rodape .estado{text-align:center}}

/* depois do envio */
.lf-ok{width:52px;height:52px;border-radius:50%;background:var(--verde);color:var(--navy);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--verde-tint);margin:6px 0 22px}
.lf-fim.entra .lf-ok{animation:lf-ok .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes lf-ok{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.lf-fim .lf-titulo{font-size:clamp(32px,3.4vw,44px)}
.lf-fim .lf-apoio-g{margin-top:10px;max-width:30ch}
.lf-adiantar{margin-top:28px;padding:22px 22px 20px;border-radius:18px;
  background:rgba(237,243,255,.04);border:1px solid rgba(237,243,255,.12)}
@media (min-width:960px){.lf-adiantar{margin-top:auto}}
.lf-adiantar p{font-size:15px;line-height:1.55;color:var(--texto-2)}
.lf-adiantar p strong{display:block;margin-bottom:4px;font-size:17px;color:var(--texto)}
.lf-adiantar .lf-rodape{padding-top:18px}
.lf-adiantar .lf-voltar{color:var(--verde)}
.lf-adiantar .lf-voltar:hover{color:var(--verde-claro)}
/* notebook estreito (960-1279px) ou de tela baixa (até 860px de altura): título
   um pouco menor e cartão mais justo, para ele ainda terminar junto com o celular */
@media (min-width:960px) and (max-width:1279px), (min-width:960px) and (max-height:860px){
  .hero-lead .t-hero{font-size:clamp(30px,3.4vw,46px)}
  .hero-lead{column-gap:48px;row-gap:22px}
  .lf-campos{gap:12px 12px;margin-top:18px}
  .lf-rodape{padding-top:20px}
  .lf-topo{margin-bottom:16px}
  .lf .campo{padding:10px 13px}
  .lf-op span{min-height:46px;padding:9px 14px}
}