/* Stellar Capital — landing de captacao.
   Paleta oficial (sponsor_rules S2): #273C52 #4C6E8B #7EAEC2 #CAA255 #E5D5A8 */

:root{
  --azul-escuro:#273C52; --azul-medio:#4C6E8B; --azul-claro:#7EAEC2;
  --dourado:#CAA255; --areia:#E5D5A8;
  --tinta:#1c2a38; --cinza:#5b6b7a; --linha:#e3e8ee; --fundo:#f3f4f8; --branco:#fff;
  --erro:#c0392b; --ok:#2e7d32;
}
*{box-sizing:border-box}
/* `hidden` tem de vencer qualquer display de classe. Sem isto o form.card
   (display:flex) continuava na tela depois do envio, junto com o sucesso. */
[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:clip}
img,input,select,textarea,button{max-width:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);
     font-family:Montserrat,'Trebuchet MS',Tahoma,sans-serif;line-height:1.6;
     overflow-wrap:break-word;word-break:break-word}
a{color:var(--azul-medio)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

header.top{background:#fff;padding:16px 0;border-bottom:1px solid var(--linha)}
header.top img{height:42px;width:auto;display:block}

.hero{background:
    linear-gradient(180deg, rgba(39,60,82,.92), rgba(39,60,82,.86)),
    radial-gradient(1200px 400px at 80% -10%, rgba(202,162,85,.25), transparent 60%),
    var(--azul-escuro);
    color:#fff;padding:56px 0 40px}
.hero h1{font-size:clamp(26px,4vw,40px);font-weight:900;line-height:1.15;margin:0 0 14px;max-width:16ch}
.hero h1 .ouro{color:var(--dourado)}
.hero p.sub{font-size:clamp(15px,2vw,19px);color:#dbe6ef;max-width:46ch;margin:0}

/* auto-fit + minmax(min(100%,..)) colapsa sozinho no mobile, sem media query.
   align-items:stretch: os dois cards brancos ficam da MESMA altura (marketing,
   11/09). div.valor e form.card sao os DOIS filhos diretos do grid, com a
   mesma classe .card e o MESMO padding — caixas identicas. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
      gap:32px;align-items:stretch;margin-top:-28px;padding-bottom:56px}
.grid>*{min-width:0}
@media (max-width:760px){.grid{margin-top:24px}}

.card{background:var(--branco);border:1px solid var(--linha);border-radius:16px;
      box-shadow:0 12px 40px rgba(39,60,82,.10);padding:28px 28px 26px}
.valor{display:flex;flex-direction:column}
.valor h2{font-size:20px;font-weight:700;color:var(--azul-escuro);margin:0 0 6px}
.destaque{font-size:17px;font-weight:700;color:var(--azul-escuro);
          border-left:4px solid var(--dourado);padding:2px 0 2px 14px;margin:0 0 16px}
.lead-valor{font-weight:600;color:var(--tinta);margin:0 0 12px}
.item{margin:0 0 13px;font-size:14.5px;color:var(--cinza);line-height:1.55}
.item b{color:var(--azul-escuro)}
.fecho{font-weight:600;color:var(--tinta);font-size:14.5px;margin:16px 0 0}
/* Card de valor que PREENCHE a altura (consorcio, sponsor 09/10): os 3 grupos — chamada,
   modalidades, fechamento — se distribuem pela altura do card esticado ao lado do form,
   com letra maior; no celular (cards empilhados) volta ao fluxo normal. */
.valor.preenche{justify-content:space-between;gap:22px}
.valor.preenche .destaque{font-size:20px;line-height:1.5;margin:0}
.valor.preenche .lead-valor{font-size:17px;margin:0 0 16px}
.valor.preenche .item{font-size:16px;margin:0 0 16px;padding:18px 18px;background:var(--fundo);
      border-radius:10px;line-height:1.55}
.valor.preenche .item:last-child{margin-bottom:0}
.valor.preenche .fecho{font-size:16px;margin:0;padding-top:18px;border-top:1px solid var(--linha)}
/* "Como funciona" da pagina de empresas: preso ao rodape do card de valor. */
.passos{list-style:none;counter-reset:passo;margin:auto 0 0;padding:22px 0 0;display:grid;gap:12px}
.passos li{counter-increment:passo;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;
      font-size:14px;color:var(--cinza);line-height:1.5}
.passos li::before{content:counter(passo);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
      background:var(--azul-escuro);color:var(--dourado);font-weight:700;font-size:14px}
.passos li b{color:var(--azul-escuro)}

/* O formulario ocupa a coluna inteira (mesma altura do card ao lado). O card de
   sucesso substitui o formulario no mesmo lugar. */
.form-col{display:flex;flex-direction:column}
.form-col>.card{flex:1 1 auto}

form.card{display:flex;flex-direction:column}
form h2{margin:0 0 4px;font-size:19px;color:var(--azul-escuro);font-weight:700}
form .lead{margin:0 0 18px;color:var(--cinza);font-size:14px}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--tinta)}
.campo label .req{color:var(--dourado)}
.campo label .opc{color:var(--cinza);font-weight:500}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--tinta);
      background:#fbfcfe;border:1.5px solid var(--linha);border-radius:10px;outline:none;
      transition:border-color .15s, box-shadow .15s}
.campo select{appearance:auto;padding:11px 12px}
.campo textarea{resize:vertical;min-height:72px}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
      border-color:var(--azul-medio);box-shadow:0 0 0 3px rgba(76,110,139,.15)}
.campo input.invalido,.campo select.invalido{border-color:var(--erro);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.nota-publico{font-size:13px;color:var(--cinza);margin:14px 0 0}
.msg{font-size:12px;color:var(--erro);margin-top:5px;min-height:14px}
.msg.geral{text-align:center;margin-top:10px}
.linha2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.linha2>*{min-width:0}

.captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha .exp{font-weight:700;color:var(--azul-escuro);background:#fbfcfe;border:1.5px solid var(--linha);
      border-radius:10px;padding:11px 14px;white-space:nowrap}
.captcha input{max-width:120px}

/* Landing de evento (D-MM-25): pergunta Sim/Nao e o quadro do convite. */
fieldset.opcoes{border:0;padding:0;margin:0 0 14px;min-width:0}
fieldset.opcoes legend{font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:8px;padding:0}
fieldset.opcoes legend .req{color:var(--dourado)}
.opcao{display:inline-flex;align-items:center;gap:8px;margin-right:22px;font-size:15px;cursor:pointer}
.opcao input{width:18px;height:18px;accent-color:var(--azul-medio);margin:0}
.hero h1.largo{max-width:24ch}
.valor.evento{gap:16px}
.valor.evento .destaque,.valor.evento .lead-valor,.valor.evento .item{margin:0}
.temas{margin:0;padding:0;list-style:none}
.temas li{position:relative;padding:10px 12px 10px 30px;margin-bottom:8px;background:var(--fundo);
      border-radius:10px;font-size:14.5px;color:var(--tinta);line-height:1.5}
.temas li::before{content:"";position:absolute;left:13px;top:18px;width:7px;height:7px;
      border-radius:50%;background:var(--dourado)}
.agenda{margin:0;display:grid;gap:8px;padding:14px 16px;border-left:3px solid var(--dourado);
      background:#fbf8f1;border-radius:0 10px 10px 0}
.agenda div{display:grid;grid-template-columns:56px 1fr;gap:8px}
.agenda dt{font-weight:700;color:var(--azul-escuro);font-size:13.5px}
.agenda dd{margin:0;font-size:14.5px}

.consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px}
.consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--azul-medio);flex:0 0 auto}
.consent label{font-size:12.5px;color:var(--cinza);line-height:1.5}

/* Quando a coluna do formulario e esticada, a folga vai ANTES do botao. */
.msg.antes-botao{margin-bottom:auto}
button.enviar{width:100%;border:0;border-radius:10px;cursor:pointer;margin-top:14px;
      background:var(--dourado);color:#3a2c07;font-weight:700;font-size:16px;padding:14px;
      transition:filter .15s, transform .05s}
button.enviar:hover{filter:brightness(1.05)}
button.enviar:active{transform:translateY(1px)}
button.enviar[disabled]{opacity:.6;cursor:not-allowed}
button.enviar:focus-visible{outline:3px solid var(--azul-medio);outline-offset:2px}
.selo-seguro{display:flex;align-items:center;gap:7px;justify-content:center;
      margin-top:12px;color:var(--cinza);font-size:12px}

.sucesso{padding:40px 30px;text-align:center}
.sucesso .check{width:56px;height:56px;line-height:56px;border-radius:50%;margin:0 auto 16px;
      background:rgba(46,125,50,.12);color:var(--ok);font-size:28px;font-weight:700}
.sucesso h2{margin:0 0 8px;font-size:20px;color:var(--azul-escuro)}
.sucesso p{margin:0;color:var(--cinza);font-size:15px}

footer.rod{background:var(--azul-escuro);color:#c7d3de;font-size:12.5px;padding:22px 0}

/* honeypot: invisivel para humanos, tentador para bots */
.hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;
    width:0!important;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}