/* Fontes do site: Creato Display (títulos) e Manrope (texto) */
@font-face{font-family:'Creato Display';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/CreatoDisplay-Light.otf) format('opentype')}
@font-face{font-family:'Manrope';font-weight:200 800;font-style:normal;font-display:swap;src:url(fonts/Manrope.woff2) format('woff2')}

/* Tokens do Design system da Ascen (valores medidos em programaascensao.com.br) */
:root{
  --noite:#000117; --azul-ascen:#0063EB; --azul-profundo:#003C83; --azul-ceu:#6BA9F6;
  --ardosia:#566177; --nuvem:#F6F7FA; --bruma:#E6ECF2; --branco:#FFFFFF;
  --noite-12:#0001171F; --erro:#D9534F;
  --font-display:"Creato Display",sans-serif; --font-sans:Manrope,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-sans); color:var(--noite); -webkit-font-smoothing:antialiased;
  /* Brilho das seções claras do site */
  background:radial-gradient(at 100% 50%,rgba(107,169,246,.24) 0,rgba(107,169,246,0) 60%),var(--branco);
  display:flex; flex-direction:column; min-height:100%;
}
main{flex:1; display:flex; align-items:center; justify-content:center; padding:40px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.wrap{width:100%; max-width:460px; display:flex; flex-direction:column; gap:30px}
.logo{width:180px; height:auto; display:block}

/* Card do formulário do hero: branco, borda 1px bruma, raio 15px, padding 35px, gap 20px */
.card{background:var(--branco); border:1px solid var(--bruma); border-radius:15px; padding:35px; display:flex; flex-direction:column; gap:20px}
.eyebrow{margin:0; font-size:10px; line-height:18px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ardosia)}
.title{margin:0; font-family:var(--font-display); font-size:30px; line-height:35px; font-weight:300; color:var(--noite)}
.hl{background:linear-gradient(90deg,#003C83 0,#0063EB 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:0; font-size:14px; line-height:18px; color:var(--ardosia)}

.field{display:flex; flex-direction:column}
.field label{font-size:14px; line-height:14px; color:var(--ardosia); padding-bottom:10px}
.input{font-family:var(--font-sans); font-size:14px; line-height:19.6px; color:var(--ardosia); background:var(--nuvem); border:1px solid var(--bruma); border-radius:5px; padding:6px 16px; min-height:40px; width:100%}
.input::placeholder{color:var(--ardosia); opacity:.7}
.input:focus{outline:none; border-color:var(--azul-ascen)}
.input[aria-invalid="true"]{border-color:var(--erro)}
.msg{margin:0; font-size:12px; line-height:18px; font-weight:500; color:var(--erro); min-height:18px}

/* Botão primário do formulário: 12px, 700, caixa alta, espaçamento 1px, padding 22px, raio 5px */
.btn{font-family:var(--font-sans); font-size:12px; line-height:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:22px; border:0; border-radius:5px; background:var(--azul-ascen); color:#fff; cursor:pointer; width:100%}
.btn:hover{box-shadow:0 5px 20px 0 rgba(0,99,235,.06)}
.btn:focus-visible{outline:2px solid var(--azul-profundo); outline-offset:3px}
.btn[disabled]{opacity:.7; cursor:default}


footer{border-top:1px solid var(--bruma); background:var(--nuvem); padding:20px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
footer .in{max-width:1140px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between; font-size:12px; line-height:18px; color:var(--ardosia)}

@media (max-width:480px){ .card{padding:25px} }

/* Tela inicial: topo, seções e cards dos aplicativos */
.topo{border-bottom:1px solid var(--bruma); background:var(--branco); padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.topo .in{max-width:1140px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px}
.topo .logo{width:120px}
.sair{text-decoration:none; font-family:var(--font-sans); font-size:12px; line-height:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:12px 16px; border:1px solid var(--bruma); border-radius:5px; background:var(--branco); color:var(--azul-profundo); cursor:pointer}
.sair:hover{border-color:var(--azul-ascen)}

main.inicio{display:block; padding-top:50px; padding-bottom:60px}
.inicio .in{max-width:1140px; margin:0 auto; display:flex; flex-direction:column; gap:50px}
.abertura{display:flex; flex-direction:column; gap:10px}
.abertura .title{font-size:45px; line-height:50px}
.secao{display:flex; flex-direction:column; gap:20px}
.secao h2{margin:0; font-family:var(--font-display); font-size:30px; line-height:35px; font-weight:300; color:var(--noite)}
.grade{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}

.app{background:var(--branco); border:1px solid var(--bruma); border-radius:15px; padding:30px; display:flex; flex-direction:column; gap:15px; min-height:200px}
.app h3{margin:0; font-size:18px; line-height:24px; font-weight:600; color:var(--noite)}
.app p{margin:0; font-size:14px; line-height:22px; color:var(--ardosia)}
.app .btn{margin-top:auto; width:auto; align-self:flex-start; padding:16px 22px; text-decoration:none}
.app.off{background:var(--nuvem)}
.app.off h3{color:var(--ardosia)}
.selo{align-self:flex-start; margin-top:auto; font-size:10px; line-height:18px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ardosia); background:var(--branco); border:1px solid var(--bruma); border-radius:35px; padding:4px 12px}

@media (max-width:900px){ .grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){
  .grade{grid-template-columns:1fr}
  main.inicio{padding-top:35px}
  .abertura .title{font-size:32px; line-height:38px}
  .app{padding:25px; min-height:0}
}

/* Card centrado no ícone: o ícone é o que chama atenção; título e texto vêm menores, embaixo.
   Três tons no desenho: preenchimento suave (.f), detalhe em destaque (.a) e traço.
   Todos os ícones usam a mesma paleta clara do site; o destaque vem só no hover. */
.app{position:relative; align-items:center; text-align:center; padding:40px 30px 35px; gap:12px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease}
.app .btn, .selo{align-self:center}
.app .btn{margin-top:10px}
.app .selo{margin-top:auto}
.app p{max-width:280px}
/* O card inteiro do app ativo abre o app, não só o botão */
.app .btn::after{content:""; position:absolute; inset:0; border-radius:15px}

.icone{position:relative; display:inline-flex; align-items:center; justify-content:center; width:136px; height:136px; flex:none; border-radius:24px; overflow:hidden; margin-bottom:14px;
  background:radial-gradient(at 100% 0%,rgba(107,169,246,.35) 0,rgba(107,169,246,0) 60%),linear-gradient(135deg,#F6F7FA 0,#DCE9FA 100%);
  border:1px solid var(--bruma); color:var(--azul-profundo); --acento:#6BA9F6;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease, border-color .3s ease}
/* Camada do destaque: o degradê do site (#003C83 → #0063EB) com o brilho azul-céu, que aparece no hover */
.icone::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(at 100% 0%,rgba(107,169,246,.6) 0,rgba(107,169,246,0) 55%),linear-gradient(135deg,#003C83 0,#0063EB 100%)}
.icone svg{position:relative; width:76px; height:76px; overflow:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.icone .f{fill:var(--azul-ceu); stroke:none; opacity:.28; transition:fill .3s ease, opacity .3s ease}
.icone .a{fill:var(--acento); transition:fill .3s ease}

/* Hover no app ativo: o card sobe, ganha a borda azul, e o ícone acende no degradê do site */
.app:not(.off):hover, .app:not(.off):focus-within{transform:translateY(-4px); border-color:var(--azul-ascen)}
.app:not(.off):hover .icone, .app:not(.off):focus-within .icone{transform:scale(1.05); color:#fff; border-color:transparent; --acento:#BED8FF}
.app:not(.off):hover .icone::before, .app:not(.off):focus-within .icone::before{opacity:1}
.app:not(.off):hover .icone svg, .app:not(.off):focus-within .icone svg{transform:scale(1.1) rotate(-4deg)}
.app:not(.off):hover .icone .f, .app:not(.off):focus-within .icone .f{fill:#fff; opacity:.2}

/* Em construção: não abre nada, então o hover só levanta de leve, sem acender */
.app.off:hover{border-color:var(--azul-ceu)}
.app.off:hover .icone{transform:translateY(-2px)}

@media (max-width:600px){ .icone{width:112px; height:112px; border-radius:20px} .icone svg{width:62px; height:62px} }
@media (prefers-reduced-motion:reduce){ .app, .icone, .icone svg{transition:none} .app:hover, .app:focus-within, .app:hover .icone, .app:focus-within .icone, .app:hover .icone svg, .app:focus-within .icone svg{transform:none} }