/* Cotapix — one-pager estático (substitui o WordPress/Elementor do Lightsail cotapixV4) */
@font-face{font-family:"Sansation";src:url("/assets/fonts/Sansation-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sansation";src:url("/assets/fonts/Sansation-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --azul:#0080EE; --azul-escuro:#0062B8; --amarelo:#FFB81C; --navy:#000E16; --cinza:#F2F2F2;
  --texto:#0B1620; --texto-suave:#2E3A46; --branco:#FFFFFF;
  --fonte-titulo:"Sansation","Inter",system-ui,sans-serif; --fonte-corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --raio:6px; --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fonte-corpo);color:var(--texto);background:var(--branco);line-height:1.5;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:400;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
p{margin:0 0 1em}
strong,b{font-weight:700}
.destaque{color:var(--azul)}
.wrap{width:min(var(--wrap),100% - 2rem);margin-inline:auto}
.sec{padding:72px 0}
.centro{text-align:center}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--fonte-corpo);font-weight:700;font-size:1.05rem;text-decoration:none;border:0;border-radius:var(--raio);padding:14px 30px;cursor:pointer;transition:transform .15s,filter .15s;line-height:1.2}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-amarelo{background:var(--amarelo);color:var(--texto)}
.btn-azul{background:var(--azul);color:var(--branco)}
.btn svg{width:1.2em;height:1.2em;flex:none}

/* 1. Hero */
.hero{position:relative;background:var(--navy) url("/assets/img/hero.webp") no-repeat right center/cover;color:var(--branco);min-height:660px;display:flex;align-items:center}
.hero .wrap{position:relative;z-index:1;padding:56px 0 72px}
.hero-conteudo{max-width:560px}
.hero .logo{width:170px;margin-bottom:40px}
.hero h1{margin-bottom:18px}
.hero p{font-size:1.1rem;color:#D9E3EC;max-width:460px;margin-bottom:22px}
.prova{display:flex;align-items:center;gap:10px;margin-bottom:34px;font-size:.78rem;color:#C6D2DC}
.prova img{width:118px}

/* 2. Bullets (a faixa de topo é a imagem sec2-bg: entalhe escuro + seta) */
.sec-bullets{background:var(--branco) url("/assets/img/sec2-bg.webp") no-repeat top center/100% auto;padding-top:120px}
.sec-bullets h2{text-align:center;margin-bottom:40px}
.bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 48px;max-width:980px;margin:0 auto}
.bullet{display:flex;align-items:center;gap:18px;font-size:1.05rem}
.bullet img{width:52px;flex:none}

/* 3. Solução */
.sec-solucao{background:var(--cinza)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sec-solucao p{color:var(--texto-suave);margin-bottom:26px}

/* 4. Passo a passo */
.sec-passos{background:var(--navy) url("/assets/img/sec4-bg.webp") no-repeat center/cover;color:var(--branco)}
.sec-passos h2{text-align:center;margin-bottom:44px}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.passo img{width:62px;margin:0 auto 16px}
.passo p{margin:0;font-size:1rem}

/* 5. Form */
.sec-form{background:var(--branco)}
.sec-form .duas{align-items:start;gap:48px}
.sec-form .prova{color:#6B7A88;margin-bottom:22px}
.sec-form p{color:var(--texto-suave)}
.nota{font-size:.82rem;color:#6B7A88}
.form-card{background:var(--cinza);border:1px solid #D7DEE5;border-radius:4px;padding:18px 16px}
.form-card iframe{width:100%;min-height:780px;border:0;border-radius:3px;display:block;background:transparent}

/* 6. FAQ */
.sec-faq{background:var(--cinza)}
.sec-faq h2{text-align:center;margin-bottom:40px}
.faq-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
.faq details{background:var(--branco);border-bottom:2px solid #D7DEE5;margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-weight:500;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--texto);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .resposta{padding:0 20px 18px;color:var(--texto-suave);background:#F7F9FB}
.cartao{background:var(--branco);border:1px solid var(--texto);padding:36px 28px;text-align:center}
.cartao h3{font-size:1.8rem;margin-bottom:20px}

/* 7. CTA final */
.sec-cta{background:var(--navy) url("/assets/img/cta-bg.webp") no-repeat center/cover;color:var(--branco);padding:88px 0}
.sec-cta h2{max-width:520px;margin-bottom:28px}

/* 8. Rodapé */
.rodape{background:var(--navy);color:#C6D2DC;padding:26px 0;font-size:.85rem}
.rodape .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.rodape img{width:120px}
.rodape a{color:#C6D2DC;text-decoration:underline}

/* Páginas internas (obrigado / privacidade) */
.hero-simples{min-height:520px}
.hero-simples h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:1.35rem;margin-top:2em}
.legal ul{padding-left:1.2em}
.legal p,.legal li{color:var(--texto-suave)}

/* Responsivo */
@media (max-width:900px){
  .sec{padding:56px 0}
  .hero{background-image:url("/assets/img/hero-mobile.webp");background-position:bottom center;align-items:flex-start;min-height:0}
  .hero .wrap{padding:40px 0 128vw}
  .hero-conteudo{max-width:100%;text-align:center}
  .hero .logo{margin:0 auto 28px;width:150px}
  .hero p{margin-inline:auto}
  .prova{justify-content:center}
  .sec-bullets{padding-top:72px}
  .bullets{grid-template-columns:1fr}
  .duas{grid-template-columns:1fr;gap:32px}
  .sec-solucao .duas>div:first-child{order:-1}
  .passos{grid-template-columns:1fr 1fr;gap:28px 18px}
  .faq-grid{grid-template-columns:1fr}
  .sec-cta{background-image:url("/assets/img/cta-bg-mobile.webp");padding:72px 0 220px}
  .rodape .wrap{justify-content:center;text-align:center}
  .hero-simples .wrap{padding:48px 0 110vw}
}
@media (max-width:480px){
  body{font-size:16px}
  .passos{grid-template-columns:1fr}
  .form-card{padding:12px 10px}
}