/* Base — fiel ao design "Landing Page.dc.html" */

/* Fontes hospedadas no próprio site (Google Fonts, licença OFL) — variáveis, subconjunto latino */
@font-face{font-family:'Sora';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:#0B0814;color:#F5F3F7;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:#FF7A3D}
input,select,textarea,button{font-family:inherit}
img{max-width:none}
::selection{background:#E8368F;color:#fff}
:focus-visible{outline:2px solid #FF7A3D;outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:200;padding:12px 16px;border-radius:12px;background:#F5F3F7;color:#14101C;font:600 14px/1 'Plus Jakarta Sans',sans-serif;transition:top .2s}
.skip:focus{top:12px;color:#14101C}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes gradShift{to{background-position:200% 0}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.7}14%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Esconde os elementos animados até o script aplicar o estado inicial (evita "piscar") */
html.js-pending [data-reveal]{visibility:hidden}

/* Estados de hover (no design: atributo style-hover) */
.h-grad-sm:hover{transform:translateY(-2px)!important;box-shadow:0 16px 36px -10px rgba(255,122,61,.75)!important;color:#fff!important}
.h-grad:hover{transform:translateY(-2px)!important;box-shadow:0 20px 44px -12px rgba(255,122,61,.8)!important;color:#fff!important}
.h-ghost:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.45)!important;color:#F5F3F7!important}
.marquee:hover{animation-play-state:paused!important}
.logo-item:hover{color:#fff!important}
.h-seg:hover{border-color:rgba(232,54,143,.4)!important}
.h-chip:hover{background:rgba(232,54,143,.14)!important;border-color:rgba(232,54,143,.6)!important}
.h-filter:hover{border-color:rgba(255,255,255,.6)!important}
.port-card:hover .port-frame{border-color:rgba(232,54,143,.5)!important;transform:translateY(-4px)!important}
.h-price:hover{box-shadow:0 20px 44px -12px rgba(255,122,61,.85)!important;filter:brightness(1.06);color:#fff!important}
.h-pack:hover{background:rgba(232,54,143,.08)!important;border-color:rgba(232,54,143,.5)!important;color:#F5F3F7!important}
.h-testi:hover{border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.08)!important}
.h-cta:hover{transform:translateY(-2px)!important;box-shadow:0 26px 60px -16px rgba(255,122,61,.9)!important;color:#fff!important}
.h-submit:hover{background:#fff!important;transform:translateY(-2px)!important}
.h-focus:focus{border-color:#E8368F!important;box-shadow:0 0 0 3px rgba(232,54,143,.25)!important}
.h-scale:hover{transform:scale(1.06)!important}
.h-light:hover{color:#fff!important}

/* Desktop x celular (no design: isDesktop / isMobile, corte em 820px) */
@media (max-width:819.98px){.dsk{display:none!important}}
@media (min-width:820px){.mob{display:none!important}}

/* Agentes de IA: celular fixo + etapas */
.ag-phone{position:sticky;top:calc(50vh - 330px)}
.ag-steps{flex-direction:column;overflow-x:visible;padding:12vh 0 22vh}
.ag-step{flex:0 0 auto;min-height:64vh}
.ag-steps::-webkit-scrollbar,.port-track::-webkit-scrollbar{display:none}
@media (max-width:819.98px){
  .ag-phone{position:relative;top:auto}
  .ag-steps{flex-direction:row;overflow-x:auto;padding:4px 0 8px}
  .ag-step{flex:0 0 84%;min-height:auto}
}

/* Processo: título fixo no desktop */
.proc-title{position:sticky;top:120px}
@media (max-width:819.98px){.proc-title{position:relative;top:auto}}

/* Portfólio: rolagem horizontal fixa no desktop, carrossel no celular */
.port-inner{position:sticky;top:0}
/* Tela baixa demais para prender a seção: vira carrossel com barra de rolagem */
.port-nopin .port-inner{position:relative!important;top:auto!important}
.port-nopin .port-track{overflow-x:auto!important;scrollbar-width:thin!important;scrollbar-color:rgba(232,54,143,.6) transparent}
.port-nopin .port-track::-webkit-scrollbar{display:block!important;height:6px}
.port-nopin .port-track::-webkit-scrollbar-thumb{background:rgba(232,54,143,.6);border-radius:3px}
.port-track{overflow-x:visible}
.port-card{flex:0 0 440px}
@media (max-width:819.98px){
  .port-inner{position:relative;height:auto}
  .port-track{overflow-x:auto}
  .port-card{flex:0 0 85%}
}

/* Movimento reduzido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Alvos de toque com pelo menos 40px no celular */
@media (max-width:819.98px){
  .foot-links{gap:0!important}
  .foot-links a{display:block;padding:10px 0}
  .tap-m{display:inline-block;padding:11px 0}
}

/* Cabeçalho: menu completo a partir de 1000px; compacto até 1180px */
@media (max-width:999.98px){.hdr-d{display:none!important}}
@media (min-width:1000px){.hdr-m{display:none!important}}
.brand span{white-space:nowrap}
@media (min-width:1000px) and (max-width:1180px){
  header nav{gap:18px!important}
  header nav a{font-size:14px!important;white-space:nowrap}
  header .h-grad-sm{padding:0 16px!important;white-space:nowrap}
}

/* Hero em uma coluna (abaixo de ~1000px): sol e cards centralizados na foto */
@media (max-width:999.98px){
  .hero-sun{right:auto!important;left:50%!important;margin-left:calc(clamp(320px,34vw,500px) / -2)}
}
@media (min-width:560px) and (max-width:999.98px){
  .hero-code{left:calc(50% - 380px)!important}
  .hero-sites{right:calc(50% - 300px)!important}
}
/* Duas colunas com a coluna da foto estreita: card +300 no canto, fora do rosto */
@media (min-width:1000px) and (max-width:1279.98px){
  .hero-sites{right:-4%!important;bottom:5%!important}
}

/* Grades de 4 itens: 2 colunas no tablet */
@media (min-width:560px) and (max-width:999.98px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Card "Site dinâmico": espaço para as miniaturas não cobrirem o texto */
@media (max-width:999.98px){.card-din{min-height:350px!important}}
@media (max-width:559.98px){.card-din{min-height:420px!important}}

/* Títulos principais (H1 e títulos das seções): 26px no celular, 48px no computador */
.t-main{font-size:26px!important;line-height:1.15!important}
@media (min-width:820px){.t-main{font-size:48px!important;line-height:1.1!important}}

/* "O que está incluso" (10 cards): 5 colunas a partir de 1000px, sem sobrar card sozinho */
@media (min-width:1000px){.grid-inc{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media (min-width:1000px) and (max-width:1279.98px){.grid-inc>div>div{padding:20px!important}.grid-inc h3{font-size:16px!important}.grid-inc h3+div{font-size:14px!important}}

/* Celular: card +300 compacto no canto inferior direito da foto */
@media (max-width:559.98px){.hero-sites{right:0!important;bottom:3%!important}.hero-sites>div{transform-origin:100% 100%!important}.hero-sites>div>div{width:150px!important;padding:12px 14px!important}.hero-sites svg{width:120px!important;height:24px!important}}