/* ============================================================================= Soma Tecnologia : style.css Swiss/International style · navy autoritário + laranja cirúrgico · Söhne Sem framework. Custom properties + grid/flex. Mobile-first. ========================================================================== */ /* ---------- Fontes --------------------------------------------------------- Geist + Geist Mono via Google Fonts (carregadas no com ). Fallback com métricas casadas à Geist (anti-CLS): enquanto a Geist (web font) não chega, o texto usa Arial REDIMENSIONADO para ocupar exatamente o mesmo espaço da Geist — então a troca (font swap) não empurra o layout (CLS ~0). size-adjust/overrides calculados a partir das métricas reais da Geist 400 (upm 1000, asc 1005, desc -295, xAvgCharWidth 546) com a fórmula do next/font. No Linux do PageSpeed, local("Arial") resolve via alias p/ Liberation Sans (métricas compatíveis). NÃO é auto-hospedagem — só um descritor de fallback. */ @font-face{ font-family:"Geist Fallback"; src:local("Arial"); size-adjust:123.70%; ascent-override:81.25%; descent-override:23.85%; line-gap-override:0%; } /* ---------- Tokens -------------------------------------------------------- */ :root{ /* Marca */ --navy:#002259; --navy-700:#00306F; --navy-900:#001A44; --orange:#F26522; --orange-600:#FF7A38; --orange-tint:#FDEDE6; /* Neutros */ --white:#fff; --offwhite:#F5F5F5; --paper:#FAFAFA; --ink:#0E1726; --gray-600:#5B6472; --gray-300:#D9DEE5; --line-dark:rgba(255,255,255,.12); --on-navy:#fff; --on-navy-dim:#C3D0E2; /* ~5:1 sobre navy (AA) */ /* Tipografia */ --f-sans:"Geist","Geist Fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --f-cond:"Geist","Geist Fallback",system-ui,sans-serif; /* números/métricas (peso 800 + tabular) */ --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --fs-display:clamp(2.75rem,6vw,4.75rem); --fs-h1:clamp(2.25rem,4vw,3.25rem); --fs-h2:clamp(1.6rem,2.4vw,2.1rem); --fs-h3:1.3rem; --fs-lead:1.1875rem; --fs-body:1.0625rem; --fs-small:.9375rem; --fs-eyebrow:.8125rem; --fs-metric:clamp(3rem,7vw,5.5rem); /* Espaçamento (8pt) */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --container:1200px; --gutter:clamp(20px,5vw,64px); /* Radius / sombras (tingidas de navy) */ --r-sm:8px; --r:10px; --r-lg:14px; --sh-1:0 1px 2px rgba(0,34,89,.06); --sh-2:0 8px 24px rgba(0,34,89,.10); --sh-3:0 20px 48px rgba(0,34,89,.16); } /* ---------- Reset / base -------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} *{margin:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light;} section[id],:target{scroll-margin-top:88px;} /* header sticky não cobre âncoras */ body{ font-family:var(--f-sans); font-weight:400; font-size:var(--fs-body); line-height:1.6; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; overflow-wrap:break-word; /* clip (não hidden): corta overflow horizontal sem virar container de scroll — preserva o position:sticky do header */ } img,svg{display:block; max-width:100%;} a{color:inherit; text-decoration:none;} button{font:inherit; color:inherit; cursor:pointer;} h1,h2,h3{line-height:1.1; letter-spacing:-.015em; font-weight:600; text-wrap:balance;} :focus-visible{outline:3px solid var(--orange-600); outline-offset:3px; border-radius:4px;} ::selection{background:var(--orange); color:#fff;} /* Skip-link (acessibilidade de teclado) */ .skip-link{position:absolute; left:8px; top:-56px; z-index:100; background:var(--orange); color:#fff; padding:10px 16px; border-radius:var(--r); font-weight:600; transition:top .15s;} .skip-link:focus{top:8px;} .h2--lg{font-size:var(--fs-h1);} /* Números grandes (Geist 800): tracking apertado p/ impacto, sem condensada */ .stat__num,.plan__price .val,.metric__num{letter-spacing:-.03em;} /* ---------- Layout utils -------------------------------------------------- */ .container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);} .section{padding-block:clamp(64px,9vw,128px);} .section--light{background:var(--offwhite);} .section--navy{background:var(--navy); color:var(--on-navy);} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff;} .measure{max-width:62ch;} .center{text-align:center; margin-inline:auto;} .eyebrow{ font-family:var(--f-mono); font-size:var(--fs-eyebrow); font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); display:inline-block; margin-bottom:var(--s2); } .section--navy .eyebrow{color:var(--orange-600);} .section-head{margin-bottom:var(--s6);} .section-head h2{font-size:var(--fs-h1);} .section-head .lead{font-size:var(--fs-lead); color:var(--gray-600); margin-top:var(--s3); max-width:60ch;} .section-head .lead--wide{max-width:none;} /* uma linha no desktop, quebra natural no mobile */ .section--navy .section-head .lead{color:var(--on-navy-dim);} /* ---------- Botões -------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:var(--fs-body); line-height:1; min-height:48px; padding:15px 28px; border-radius:var(--r); border:1.5px solid transparent; transition:background .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .btn:disabled{opacity:.7; cursor:progress;} .btn .ic{width:20px;height:20px;} .btn-primary{background:var(--orange); color:#fff;} .btn-primary:hover{background:var(--orange-600); transform:translateY(-2px); box-shadow:0 10px 24px rgba(242,101,34,.32);} .btn-primary:active{transform:translateY(0);} .btn-secondary{background:transparent; color:var(--navy); border-color:var(--navy);} .btn-secondary:hover{background:var(--navy); color:#fff;} .on-dark .btn-secondary, .section--navy .btn-secondary{color:#fff; border-color:var(--line-dark);} .on-dark .btn-secondary:hover, .section--navy .btn-secondary:hover{background:#fff; color:var(--navy); border-color:#fff;} .btn-block{width:100%;} /* ---------- Header / nav (full-width estilo Notion) ----------------------- */ .site-header{ position:sticky; top:0; z-index:50; background:transparent; /* topo: sobrepõe o hero (vê navy + glow atrás) */ border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease; } /* puxa o conteúdo para baixo do header transparente */ #conteudo{margin-top:-69px;} /* ao rolar: liquid glass escuro (estilo iOS) — lê sobre fundo claro e escuro */ .site-header.is-stuck{ background:rgb(97 97 97 / 52%); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 34px rgba(0,0,0,.22); } .site-header > .container{max-width:none; padding-inline:clamp(20px,3.5vw,48px);} /* grid 1fr | auto | 1fr => menu central perfeitamente no eixo da tela */ .nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4); min-height:68px;} .nav__logo{justify-self:start; display:inline-flex;} .nav__logo img{height:37px; width:auto;} .nav__logo .logo--dark{display:none;} /* logo branca sempre (header transparente ou glass escuro) */ .nav__links{display:none; justify-self:center; align-items:center; gap:clamp(18px,2vw,36px); list-style:none;} .nav__links a{font-size:var(--fs-small); font-weight:500; color:#ffffff; position:relative; padding-block:6px; transition:color .2s;} .nav__links a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .2s ease-out;} .nav__links a:hover{color:#fff;} .nav__links a:hover::after{transform:scaleX(1);} .nav__right{grid-column:3; justify-self:end; display:inline-flex; align-items:center; gap:var(--s2);} .nav__cta{display:none; min-height:38px; padding:8px 16px; font-size:var(--fs-small);} .nav__cta .ic{width:16px; height:16px;} .nav__toggle{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:8px;} .nav__toggle span{width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s;} .nav.open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav.open .nav__toggle span:nth-child(2){opacity:0;} .nav.open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* === Drawer mobile · slide-in da direita, backdrop + stagger nos links === */ .nav__backdrop{ position:fixed; inset:0; z-index:60; background:rgba(0,12,32,.55); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s cubic-bezier(.22,1,.36,1), visibility 0s linear .26s; } .nav__backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .26s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; } .nav__drawer{ position:fixed; top:0; right:0; bottom:0; z-index:70; width:min(82vw,340px); display:flex; flex-direction:column; gap:var(--s3); padding:var(--s3) var(--s3) var(--s4); background:var(--navy-900); color:#fff; box-shadow:-24px 0 60px -16px rgba(0,12,32,.45); transform:translateX(100%); visibility:hidden; pointer-events:none; will-change:transform; overflow-y:auto; overscroll-behavior:contain; transition:transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s; } .nav__drawer.open{ transform:translateX(0); visibility:visible; pointer-events:auto; transition:transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; } /* rim laranja sutil no edge esquerdo do drawer */ .nav__drawer::before{ content:""; position:absolute; inset:0 auto 0 0; width:2px; pointer-events:none; background:linear-gradient(180deg,transparent,var(--orange) 50%,transparent); } .nav__drawer-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);} .nav__drawer-eyebrow{font-family:var(--f-mono); font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--orange);} .nav__drawer-close{ width:38px; height:38px; display:grid; place-content:center; flex:none; background:rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:50%; color:#fff; cursor:pointer; transition:background-color .2s, transform .2s; } .nav__drawer-close:hover{background:rgba(255,255,255,.12); transform:rotate(90deg);} .nav__drawer-close:focus-visible{outline:2px solid var(--orange); outline-offset:2px;} .nav__drawer-list{list-style:none; display:flex; flex-direction:column; flex:1; margin:0; padding:0;} .nav__drawer-list li{ opacity:0; transform:translateX(28px); transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .46s cubic-bezier(.22,1,.36,1); } .nav__drawer.open .nav__drawer-list li{opacity:1; transform:translateX(0);} .nav__drawer.open .nav__drawer-list li:nth-child(1){transition-delay:.12s;} .nav__drawer.open .nav__drawer-list li:nth-child(2){transition-delay:.18s;} .nav__drawer.open .nav__drawer-list li:nth-child(3){transition-delay:.24s;} .nav__drawer.open .nav__drawer-list li:nth-child(4){transition-delay:.30s;} .nav__drawer.open .nav__drawer-list li:nth-child(5){transition-delay:.36s;} .nav__drawer-list a{ position:relative; display:block; padding:16px 28px 16px 4px; font-size:1.25rem; font-weight:600; letter-spacing:-.01em; color:#fff; border-bottom:1px solid var(--line-dark); transition:color .2s; } .nav__drawer-list a::after{ content:""; position:absolute; right:6px; top:50%; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:translateY(-50%) rotate(45deg); opacity:.4; transition:opacity .2s, transform .2s; } .nav__drawer-list a:hover, .nav__drawer-list a:focus-visible{color:var(--orange); outline:none;} .nav__drawer-list a:hover::after, .nav__drawer-list a:focus-visible::after{opacity:1; transform:translateY(-50%) translateX(3px) rotate(45deg);} .nav__drawer-cta{ opacity:0; transform:translateY(10px); transition:opacity .36s cubic-bezier(.22,1,.36,1) .42s, transform .46s cubic-bezier(.22,1,.36,1) .42s; } .nav__drawer.open .nav__drawer-cta{opacity:1; transform:translateY(0);} .nav__drawer-foot{opacity:0; transform:translateY(8px); transition:opacity .36s ease .5s, transform .46s ease .5s;} .nav__drawer-foot img{height:30px; width:auto;} /* trava a proporção (~3.74:1), nunca achata */ .nav__drawer.open .nav__drawer-foot{opacity:1; transform:translateY(0);} @media(prefers-reduced-motion:reduce){ .nav__drawer, .nav__backdrop, .nav__drawer-list li, .nav__drawer-cta, .nav__drawer-foot{ transition:opacity .12s linear, visibility 0s !important; transform:none !important; } .nav__drawer.open{transform:none;} } @media(min-width:920px){ .nav__links{display:flex;} .nav__cta{display:inline-flex;} .nav__toggle{display:none;} } /* ---------- Hero (estilo Notion: centralizado + spotlight) ---------------- */ .hero{position:relative; overflow:hidden; background:var(--navy); color:#fff; isolation:isolate;} /* grid Swiss sutil */ .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; z-index:-2; background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px); background-size:84px 84px; mask-image:radial-gradient(ellipse 90% 560px at 50% 230px,#000,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 560px at 50% 230px,#000,transparent 78%); } /* spotlight (ancorado no topo, logo abaixo da headline) */ .hero__glow{ position:absolute; top:clamp(40px,6vw,90px); left:50%; transform:translateX(-50%); width:min(1100px,120vw); aspect-ratio:1.6/1; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(255,122,56,.16), rgba(0,48,111,.18) 38%, transparent 68%); filter:blur(8px); } .hero__inner{position:relative; padding-block:clamp(96px,11vw,150px) clamp(28px,4vw,44px); text-align:center;} .hero__eyebrow{justify-content:center;} .hero__title{font-weight:800; font-size:clamp(2.1rem,4.6vw,3.6rem); letter-spacing:-.025em; line-height:1.05; max-width:none; margin-inline:auto;} .hero__title .hl{color:var(--orange-600);} .hero__lead{font-size:var(--fs-body); color:var(--on-navy-dim); max-width:52ch; margin:var(--s3) auto 0;} .hero__actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); justify-content:center;} /* bubbles flutuantes das competências (só em telas largas, nas laterais) */ .hero__bubbles{position:absolute; inset:0; z-index:0; pointer-events:none; display:none;} .hero__bubbles .bubble{position:absolute; width:68px; height:68px; animation:floaty 6s ease-in-out infinite;} .bubble.b1{top:180px; left:5%; animation-duration:6.0s; animation-delay:-0.2s;} .bubble.b2{top:330px; left:9.5%; animation-duration:7.4s; animation-delay:-2.1s; width:58px; height:58px;} .bubble.b3{top:486px; left:4%; animation-duration:6.8s; animation-delay:-3.4s;} .bubble.b4{top:180px; right:5%; animation-duration:7.0s; animation-delay:-1.1s;} .bubble.b5{top:330px; right:9.5%;animation-duration:6.4s; animation-delay:-3.0s; width:58px; height:58px;} .bubble.b6{top:486px; right:4%; animation-duration:7.8s; animation-delay:-0.7s;} @keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)}} @media(min-width:1240px){ .hero__bubbles{display:block;} } .hero__actions .btn{min-height:44px; padding:12px 22px; font-size:var(--fs-small);} .hero__actions .btn .ic{width:18px; height:18px;} /* Palco da animação (janela que contém o kanban "Soma") */ .hero__stage{ position:relative; margin:clamp(48px,7vw,80px) auto 0; width:100%; max-width:1040px; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:var(--white); border:1px solid var(--line-dark); box-shadow:0 40px 120px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); } @media(max-width:600px){ .hero__stage{aspect-ratio:4/5;} } /* ---------- Hero anim / kanban -------------------------------------------- */ .kb{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--white); color:var(--ink); text-align:left;} .kb__bar{display:flex; align-items:center; gap:12px; height:40px; flex:none; padding:0 14px; border-bottom:1px solid var(--gray-300); background:var(--offwhite);} .kb__dots{display:flex; gap:6px;} .kb__dots i{width:10px; height:10px; border-radius:50%; background:var(--gray-300);} .kb__title{font-size:.78rem; color:var(--gray-600); font-weight:500;} .kb__live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; color:var(--gray-600); text-transform:uppercase; letter-spacing:.08em;} .kb__live i{width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:kbpulse 2s infinite;} @keyframes kbpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}} .kb__board{flex:1; display:flex; gap:clamp(8px,1.4vw,16px); padding:clamp(10px,1.6vw,18px); overflow:hidden; min-height:0;} .kb__col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; background:var(--offwhite); border:1px solid var(--gray-300); border-radius:12px; padding:10px; min-height:0;} .kb__colhead{display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600; color:var(--gray-600); padding:2px 2px 6px;} .kb__colhead b{margin-left:auto; font-weight:600; color:var(--gray-600); background:var(--white); border:1px solid var(--gray-300); border-radius:999px; min-width:20px; text-align:center; font-size:.66rem; padding:1px 6px;} .kb__coldot{width:8px; height:8px; border-radius:50%;} .kb__coldot--todo{background:#94A3B8;} .kb__coldot--doing{background:var(--orange);} .kb__coldot--done{background:#22C55E;} .kb__list{display:flex; flex-direction:column; gap:8px; overflow:hidden; min-height:0;} .kb-card{position:relative; background:var(--white); border:1px solid var(--gray-300); border-radius:10px; padding:9px 11px; box-shadow:0 1px 2px rgba(0,34,89,.05); cursor:default; will-change:transform;} .kb-card__tag{display:inline-flex; align-items:center; gap:6px; font-size:.64rem; font-weight:600; color:var(--gray-600); text-transform:uppercase; letter-spacing:.05em;} .kb-dot{width:7px; height:7px; border-radius:50%; background:var(--gray-300);} .kb-card[data-skill="design"] .kb-dot{background:#F26522;} .kb-card[data-skill="dev"] .kb-dot{background:#3B82F6;} .kb-card[data-skill="ia"] .kb-dot{background:#8B5CF6;} .kb-card[data-skill="integra"] .kb-dot{background:#22C55E;} .kb-card[data-skill="infra"] .kb-dot{background:#0EA5E9;} .kb-card[data-skill="analytics"].kb-dot{background:#F59E0B;} .kb-card__title{font-size:.82rem; font-weight:500; line-height:1.3; margin-top:5px; color:var(--ink);} .kb-card__bar{display:block; height:3px; border-radius:3px; background:var(--gray-300); margin-top:9px; overflow:hidden; opacity:0; transition:opacity .2s;} /* card no topo de "Em andamento" mostra barra de progresso preenchendo */ .kb-card.is-active .kb-card__bar{opacity:1;} .kb-card.is-active .kb-card__bar::after{content:""; display:block; height:100%; width:0; background:var(--orange); border-radius:3px; animation:kbfill var(--kb-cycle,2800ms) linear forwards;} @keyframes kbfill{from{width:6%;} to{width:100%;}} /* flash ao chegar em "Pronto" */ .kb-card.just-done{animation:kbdone .6s ease-out;} @keyframes kbdone{0%{border-color:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18);}100%{border-color:var(--gray-300); box-shadow:0 1px 2px rgba(0,34,89,.05);}} /* terceira coluna some em telas muito estreitas para não espremer */ @media(max-width:520px){ .kb__col[data-col="done"]{display:none;} } @media(prefers-reduced-motion:reduce){ .kb__live i{animation:none;} .kb-card.is-active .kb-card__bar::after{animation:none; width:60%;} } /* ---------- Logos / clientes ---------------------------------------------- */ .clients{background:transparent; color:#fff; padding-bottom:clamp(48px,7vw,80px);} .clients__title{text-align:center; font-size:var(--fs-small); color:var(--on-navy-dim); letter-spacing:.02em; margin-bottom:var(--s5);} /* faixa estilo Notion: logos brancos monocromáticos, centralizados, com separadores · */ .logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; row-gap:clamp(18px,2.6vw,30px); max-width:1000px; margin-inline:auto; --logo-base:clamp(20px,2.5vw,30px);} /* base responsiva única: encolhe no mobile e leva todas as logos junto */ .logo-item{display:inline-flex; align-items:center;} /* altura = base responsiva × ajuste óptico por logo (--logo-k inline; 1 quando ausente) */ .logo-item img{height:calc(var(--logo-base) * var(--logo-k,1)); width:auto; filter:brightness(0) invert(1); opacity:.72; transition:opacity .2s;} .logo-item:hover img{opacity:1;} .logo-item::after{content:"·"; margin:0 clamp(16px,2.4vw,34px); color:rgba(255,255,255,.3); font-size:1.1rem; line-height:1;} .logo-item:last-child::after{content:none;} .logo-ph{font-family:var(--f-sans); font-weight:700; font-size:1.05rem; letter-spacing:.02em; color:#fff; opacity:.7;} /* ---------- Problema ------------------------------------------------------ */ .problem .section-head h2{max-width:20ch;} .problem__grid{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s6);} @media(min-width:760px){.problem__grid{grid-template-columns:repeat(2,1fr); gap:var(--s4);}} /* card de dor: título + descrição + palco de animação */ .pcard{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--gray-300); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--sh-1); overflow:hidden; transition:transform .18s ease-out, box-shadow .18s ease-out;} .pcard:hover{transform:translateY(-3px); box-shadow:var(--sh-2);} .pcard__head{margin-bottom:var(--s4);} .pcard__title{font-size:1.15rem; font-weight:700; color:var(--navy);} .pcard__desc{font-size:var(--fs-small); color:var(--gray-600); margin-top:8px; max-width:46ch;} /* palco onde a animação roda (reservado; preenchido uma de cada vez) */ .pcard__stage{position:relative; flex:1; min-height:252px; border-radius:var(--r); background:var(--offwhite); border:1px solid var(--gray-300); overflow:hidden;} /* anim: chat freela (ghosting estilo WhatsApp) */ .cf{position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; text-align:left;} .cf__head{display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid var(--gray-300); flex:none;} .cf__avatar{width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:.7rem; font-weight:700; flex:none;} .cf__who{display:flex; flex-direction:column; line-height:1.25;} .cf__name{font-size:.85rem; font-weight:600; color:var(--ink);} .cf__status{font-size:.68rem; color:#1FA45A; transition:color .3s;} .cf__status.off{color:var(--gray-600);} .cf__body{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:11px 13px; overflow:hidden; background:#ece5dd;} .cf__msg{align-self:flex-end; max-width:82%; background:#d9fdd3; border-radius:10px 10px 2px 10px; padding:5px 8px 4px; font-size:.78rem; color:#0c1f17; box-shadow:0 1px 1px rgba(0,0,0,.08); opacity:0; transform:translateY(8px); transition:opacity .3s ease-out, transform .3s ease-out;} .cf__msg.show{opacity:1; transform:none;} .cf__txt{display:block;} .cf__meta{display:block; text-align:right; font-size:.58rem; color:#667781; margin-top:1px;} .cf__ticks{margin-left:3px; color:#9bb0bd; transition:color .3s;} .cf__ticks.read{color:#34b7f1;} .cf__typing{align-self:flex-start; background:#fff; border-radius:10px 10px 10px 2px; padding:8px 11px; display:inline-flex; gap:4px; box-shadow:0 1px 1px rgba(0,0,0,.08); opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s;} .cf__typing.show{opacity:1; transform:none;} .cf__typing span{width:6px; height:6px; border-radius:50%; background:#9aa6ad; animation:cfblink 1.2s infinite;} .cf__typing span:nth-child(2){animation-delay:.2s;} .cf__typing span:nth-child(3){animation-delay:.4s;} @keyframes cfblink{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-2px);}} /* anim: agência demora (contador de dias x barra parada) */ .ag{position:absolute; inset:0; display:flex; flex-direction:column; padding:15px 16px; background:#fff; text-align:left;} .ag__top{display:flex; align-items:center; justify-content:space-between; gap:8px;} .ag__label{font-size:.82rem; font-weight:600; color:var(--ink);} .ag__badge{font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#9a6a13; background:#fdf0d8; border:1px solid #f4dca6; padding:3px 8px; border-radius:999px; white-space:nowrap;} .ag__main{flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px;} .ag__day{display:flex; align-items:baseline; gap:8px;} .ag__day b{font-family:var(--f-cond); font-weight:800; font-size:clamp(2.6rem,7vw,3.4rem); line-height:1; color:var(--navy); letter-spacing:-.03em; font-variant-numeric:tabular-nums;} .ag__day span{font-size:.78rem; color:var(--gray-600);} .ag__barwrap{display:flex; align-items:center; gap:10px;} .ag__bartrack{flex:1; height:8px; border-radius:6px; background:#e7e2db; overflow:hidden;} .ag__fill{display:block; height:100%; border-radius:6px; background:var(--orange);} .ag__pct{font-size:.72rem; font-weight:600; color:var(--gray-600); font-variant-numeric:tabular-nums; min-width:32px; text-align:right;} .ag__note{font-size:.72rem; color:var(--gray-600);} /* anim: previsibilidade (orçamento roleta) */ .pv{position:absolute; inset:0; display:flex; flex-direction:column; padding:15px 16px; background:#fff; text-align:left;} .pv__top{display:flex; align-items:center; justify-content:space-between; gap:8px;} .pv__label{font-size:.82rem; font-weight:600; color:var(--ink);} .pv__badge{font-size:.62rem; font-weight:600; color:var(--gray-600); background:var(--offwhite); border:1px solid var(--gray-300); padding:3px 8px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums;} .pv__main{flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; position:relative;} .pv__price{display:flex; align-items:baseline; gap:6px; color:var(--navy);} .pv__cur{font-size:1.1rem; font-weight:700;} .pv__price b{font-family:var(--f-cond); font-weight:800; font-size:clamp(2.4rem,6.5vw,3.3rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;} .pv__meta{font-size:.76rem; color:var(--gray-600);} .pv__meta b{color:var(--ink); font-weight:600;} .pv__stamp{position:absolute; right:4px; top:0; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#c0392b; border:2px solid #c0392b; border-radius:6px; padding:3px 8px; transform:rotate(-8deg) scale(.6); opacity:0; transition:opacity .25s ease-out, transform .25s ease-out;} .pv__stamp.show{opacity:.92; transform:rotate(-8deg) scale(1);} /* anim: ninguém olhando (alertas ignorados empilhando) */ .nw{position:absolute; inset:0; display:flex; flex-direction:column; padding:14px 15px; background:#fff; text-align:left;} .nw__top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;} .nw__label{font-size:.82rem; font-weight:600; color:var(--ink);} .nw__count{font-size:.66rem; color:var(--gray-600);} .nw__count b{color:#c0392b; font-weight:700; font-variant-numeric:tabular-nums;} .nw__list{flex:1; display:flex; flex-direction:column; gap:7px;} .nw__item{display:flex; align-items:center; gap:9px; padding:8px 10px; background:var(--offwhite); border:1px solid var(--gray-300); border-radius:9px; opacity:0; transform:translateY(-7px); transition:opacity .3s ease-out, transform .3s ease-out;} .nw__item.show{opacity:1; transform:none;} .nw__dot{flex:none; width:8px; height:8px; border-radius:50%;} .nw__dot--red{background:#e0463a; box-shadow:0 0 0 3px rgba(224,70,58,.15);} .nw__dot--amber{background:#e8902a; box-shadow:0 0 0 3px rgba(232,144,42,.15);} .nw__txt{flex:1; font-size:.76rem; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .nw__time{font-size:.64rem; color:var(--gray-600); flex:none;} /* anim: base ok (saúde do site tudo-no-verde) */ .sg{position:absolute; inset:0; display:flex; flex-direction:column; padding:16px 18px; background:#fff;} .sg__top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px;} .sg__label{font-size:.85rem; font-weight:600; color:var(--ink);} .sg__badge{display:inline-flex; align-items:center; gap:6px; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#1FA45A; background:#eaf7f0; border:1px solid #bfe6cf; padding:3px 9px; border-radius:999px;} .sg__badge i{width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:kbpulse 2s infinite;} .sg__list{flex:1; display:flex; flex-direction:column; justify-content:center; gap:9px;} .sg__item{display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--gray-300); border-radius:10px; background:#fff; transition:background .35s ease, border-color .35s ease;} .sg__item.ok{background:#f0faf4; border-color:#cdebd8;} .sg__check{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--gray-300); display:grid; place-items:center; color:#fff; transition:background .3s ease, border-color .3s ease;} .sg__item.ok .sg__check{background:#1FA45A; border-color:#1FA45A;} .sg__check svg{width:13px; height:13px; opacity:0; transform:scale(.4); transition:opacity .25s ease, transform .25s cubic-bezier(.2,1.2,.4,1);} .sg__item.ok .sg__check svg{opacity:1; transform:scale(1);} .sg__txt{flex:1; font-size:.82rem; font-weight:500; color:var(--ink);} .sg__val{font-size:.68rem; font-weight:600; color:var(--gray-600); transition:color .3s ease;} .sg__item.ok .sg__val{color:#1FA45A;} /* anim: evolução (feed de entregas publicando) */ .ev{position:absolute; inset:0; display:flex; flex-direction:column; padding:15px 16px; background:#fff;} .ev__top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;} .ev__label{font-size:.85rem; font-weight:600; color:var(--ink);} .ev__live{display:inline-flex; align-items:center; gap:6px; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#1FA45A;} .ev__live i{width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:kbpulse 2s infinite;} .ev__list{flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px;} .ev__item{display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--gray-300); border-radius:10px; background:#fff; transition:background .3s ease, border-color .3s ease;} .ev__item.done{background:#f0faf4; border-color:#cdebd8;} .ev__dot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--gray-300);} .ev__item[data-skill="design"] .ev__dot{background:#F26522;} .ev__item[data-skill="integra"] .ev__dot{background:#22C55E;} .ev__item[data-skill="ia"] .ev__dot{background:#8B5CF6;} .ev__item[data-skill="dev"] .ev__dot{background:#3B82F6;} .ev__txt{flex:1; font-size:.82rem; font-weight:500; color:var(--ink);} .ev__status{font-size:.68rem; font-weight:600; flex:none;} .ev__prog{display:inline-flex; align-items:center; gap:6px; color:var(--gray-600);} .ev__prog::before{content:""; width:10px; height:10px; border:2px solid var(--gray-300); border-top-color:var(--gray-600); border-radius:50%; animation:evspin .8s linear infinite;} .ev__pub{display:none; align-items:center; gap:4px; color:#1FA45A;} .ev__pub svg{width:12px; height:12px;} .ev__item.done .ev__prog{display:none;} .ev__item.done .ev__pub{display:inline-flex;} @keyframes evspin{to{transform:rotate(360deg);}} /* anim: decide (chat que responde rápido) */ .ct{position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; text-align:left;} .ct__head{display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid var(--gray-300); flex:none;} .ct__avatar{width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:700; flex:none;} .ct__who{display:flex; flex-direction:column; line-height:1.25;} .ct__name{font-size:.85rem; font-weight:600; color:var(--ink);} .ct__status{font-size:.66rem; color:#1FA45A;} .ct__body{flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:11px 13px; background:#ece5dd; overflow:hidden;} .ct__item{opacity:0; max-height:0; transform:translateY(6px); overflow:hidden; margin-top:0; transition:opacity .28s ease, max-height .32s ease, transform .28s ease, margin-top .28s ease; font-size:.78rem;} .ct__item.show{opacity:1; max-height:72px; transform:none; margin-top:7px;} .ct__out,.ct__in{max-width:82%; padding:6px 9px 5px; border-radius:10px; box-shadow:0 1px 1px rgba(0,0,0,.08); color:#0c1f17; line-height:1.3;} .ct__out{align-self:flex-end; background:#d9fdd3; border-bottom-right-radius:2px;} .ct__in{align-self:flex-start; background:#fff; border-bottom-left-radius:2px;} .ct__in svg{width:12px; height:12px; display:inline; vertical-align:-2px; color:#1FA45A;} .ct__meta{display:block; text-align:right; font-size:.58rem; color:#667781; margin-top:1px;} .ct__typing{align-self:flex-start; background:#fff; border-radius:10px; border-bottom-left-radius:2px; padding:8px 11px; gap:4px; box-shadow:0 1px 1px rgba(0,0,0,.08);} .ct__typing.show{display:inline-flex;} .ct__typing span{width:6px; height:6px; border-radius:50%; background:#9aa6ad; animation:cfblink 1.2s infinite;} .ct__typing span:nth-child(2){animation-delay:.2s;} .ct__typing span:nth-child(3){animation-delay:.4s;} .ct__note{align-self:center; background:rgba(31,164,90,.12); color:#1FA45A; font-weight:700; font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; padding:4px 11px; border-radius:999px;} /* ---------- Solução / Como funciona (passos) ------------------------------ */ /* cards de passo empilhados (info + visual), claros sobre o navy */ .steps{display:flex; flex-direction:column; gap:var(--s4); margin-top:var(--s6);} .scard{display:grid; grid-template-columns:1fr; gap:var(--s4); background:#fff; border-radius:var(--r-lg); padding:clamp(20px,3vw,36px); box-shadow:var(--sh-3); overflow:hidden;} .scard__info{display:flex; flex-direction:column; align-items:flex-start;} .scard__num{font-family:var(--f-cond); font-weight:800; font-size:clamp(2.6rem,6vw,4rem); line-height:.9; color:#e0e5ee; letter-spacing:-.03em;} .scard__badge{display:inline-block; margin:14px 0 12px; font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--orange); padding:5px 12px; border-radius:999px;} .scard .scard__title{font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:700; color:var(--navy);} .scard__desc{font-size:var(--fs-body); color:var(--gray-600); margin-top:10px; max-width:46ch;} .scard__visual{position:relative; min-height:250px; border-radius:var(--r); background:var(--offwhite); border:1px solid var(--gray-300); overflow:hidden;} @media(min-width:820px){ .scard{grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,56px); align-items:center;} .scard__visual{min-height:284px;} } /* ---------- Competências -------------------------------------------------- */ .skills{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s6);} /* card de competência: visual animado no topo + título/descrição embaixo */ .ccard{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--gray-300); border-radius:var(--r-lg); overflow:hidden; transition:transform .18s ease-out, box-shadow .18s ease-out;} .ccard:hover{transform:translateY(-4px); box-shadow:var(--sh-2);} .ccard__stage{position:relative; height:172px; background:var(--paper); border-bottom:1px solid var(--gray-300); overflow:hidden;} .ccard__body{padding:var(--s4);} .ccard__title{font-size:1.15rem; font-weight:700; color:var(--navy);} .ccard__desc{font-size:var(--fs-small); color:var(--gray-600); margin-top:8px;} /* anim: dev/código (editor claro digitando) */ .cd{position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; text-align:left;} .cd__bar{display:flex; align-items:center; gap:8px; padding:7px 11px; border-bottom:1px solid var(--gray-300); background:var(--offwhite); flex:none;} .cd__dots{display:flex; gap:5px;} .cd__dots i{width:8px; height:8px; border-radius:50%; background:var(--gray-300);} .cd__file{font-size:.66rem; color:var(--gray-600); font-family:var(--f-sans);} .cd__code{flex:1; padding:9px 12px; font-family:var(--f-mono); font-size:.66rem; line-height:1.5; color:#475569; overflow:hidden;} .cd__line{white-space:pre; opacity:0; transform:translateY(3px); transition:opacity .18s ease, transform .18s ease;} .cd__line.show{opacity:1; transform:none;} .cd__line.cur::after{content:"▋"; color:var(--orange); margin-left:1px; animation:cdblink 1s steps(1) infinite;} @keyframes cdblink{50%{opacity:0;}} .tk-key{color:#8b5cf6;} .tk-fn{color:#2563eb;} .tk-tag{color:#e0463a;} .tk-str{color:#1f9d6e;} .tk-pun{color:#94a3b8;} .cd__build{flex:none; display:flex; align-items:center; gap:6px; padding:7px 12px; border-top:1px solid var(--gray-300); background:var(--offwhite); font-family:var(--f-sans); font-size:.66rem; font-weight:700; color:#1FA45A; opacity:0; transition:opacity .3s ease;} .cd__build.show{opacity:1;} /* anim: design (wireframe vira interface) */ .dz{position:absolute; inset:0; padding:14px; background:var(--paper); display:flex; align-items:center; justify-content:center;} .dz__win{width:100%; max-width:236px; background:#fff; border:1px solid var(--gray-300); border-radius:10px; overflow:hidden; box-shadow:0 6px 16px rgba(0,34,89,.08);} .dz__bar{display:flex; align-items:center; gap:6px; padding:8px 10px; background:#e9edf2; transition:background .4s ease;} .dz.styled .dz__bar{background:var(--navy);} .dz__logo{width:14px; height:14px; border-radius:4px; background:#cfd6e0; transition:background .4s ease .04s;} .dz.styled .dz__logo{background:var(--orange);} .dz__navline{width:18px; height:5px; border-radius:3px; background:#cfd6e0; transition:background .4s ease;} .dz.styled .dz__navline{background:rgba(255,255,255,.5);} .dz__body{display:flex; gap:10px; padding:12px;} .dz__col{flex:1; display:flex; flex-direction:column; gap:7px;} .dz__h{height:11px; width:80%; border-radius:4px; background:#dfe3ea; transition:background .4s ease .08s;} .dz.styled .dz__h{background:var(--navy);} .dz__t{height:6px; width:100%; border-radius:3px; background:#e6e9ef; transition:background .4s ease .12s;} .dz__t--sm{width:64%;} .dz.styled .dz__t{background:#c6cdd8;} .dz__btn{height:16px; width:58px; border-radius:5px; background:#dfe3ea; margin-top:5px; transition:background .4s ease .18s;} .dz.styled .dz__btn{background:var(--orange);} .dz__img{width:62px; border-radius:6px; background:#dfe3ea; transition:background .4s ease .24s;} .dz.styled .dz__img{background:linear-gradient(135deg,#00306f,#F26522);} .dz__tag{position:absolute; bottom:9px; right:12px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-600); transition:color .3s ease;} .dz.styled .dz__tag{color:var(--orange);} /* anim: IA (prompt -> gerando) */ .ai{position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:14px; background:#fff; text-align:left;} .ai__prompt{display:flex; align-items:center; padding:8px 12px; border:1px solid var(--gray-300); border-radius:999px; background:var(--offwhite); min-height:34px;} .ai__q{font-size:.74rem; color:var(--ink); white-space:nowrap; overflow:hidden;} .ai__cur{display:inline-block; width:2px; height:.9em; background:#8B5CF6; vertical-align:-1px; margin-left:1px; animation:cdblink 1s steps(1) infinite;} .ai__prompt.done .ai__cur{display:none;} .ai__answer{flex:1; display:flex; gap:10px; align-items:flex-start;} .ai__spark{flex:none; width:28px; height:28px; border-radius:8px; background:#f3edff; color:#8B5CF6; display:grid; place-items:center;} .ai__spark svg{width:16px; height:16px;} .ai__spark.gen{animation:aipulse 1.1s ease-in-out infinite;} .ai__gen{flex:1; display:flex; flex-direction:column; gap:7px; padding-top:3px;} .ai__line{font-size:.78rem; color:#334155; opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease;} .ai__line.show{opacity:1; transform:none;} @keyframes aipulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(139,92,246,.3);} 50%{transform:scale(1.06); box-shadow:0 0 0 6px rgba(139,92,246,0);}} /* anim: integra (lista de integrações conectando) */ .il{position:absolute; inset:0; display:flex; flex-direction:column; padding:9px 13px; background:#fff;} .il__top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px;} .il__label{font-size:.8rem; font-weight:600; color:var(--ink);} .il__count{font-size:.6rem; color:var(--gray-600); font-variant-numeric:tabular-nums;} .il__count b{color:#1FA45A; font-weight:700;} .il__list{flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px;} .il__row{display:flex; align-items:center; gap:9px; padding:4px 9px; border:1px solid var(--gray-300); border-radius:9px; background:#fff; transition:background .3s ease, border-color .3s ease;} .il__row.on{background:#f0faf4; border-color:#cdebd8;} .il__ico{flex:none; width:20px; height:20px; border-radius:5px; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:.6rem; font-weight:700;} .il__name{flex:1; font-size:.75rem; font-weight:500; color:var(--ink);} .il__sw{flex:none; width:27px; height:15px; border-radius:999px; background:#cfd6e0; position:relative; transition:background .3s ease;} .il__sw::after{content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .3s ease;} .il__row.on .il__sw{background:#22c55e;} .il__row.on .il__sw::after{transform:translateX(12px);} /* anim: infra (auto-scaling) */ .inf{position:absolute; inset:0; display:flex; flex-direction:column; padding:14px 16px; background:#fff;} .inf__top{display:flex; align-items:center; justify-content:space-between; gap:8px;} .inf__label{font-size:.82rem; font-weight:600; color:var(--ink);} .inf__badge{font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-600); background:var(--offwhite); border:1px solid var(--gray-300); padding:3px 9px; border-radius:999px; transition:color .3s, background .3s, border-color .3s;} .inf__badge.hot{color:#9a6a13; background:#fdf0d8; border-color:#f4dca6;} .inf__bars{flex:1; display:flex; align-items:flex-end; gap:5px; margin:12px 0;} .inf__bars i{flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#b9d2f7,#5680c8); transition:height .5s cubic-bezier(.3,.9,.3,1);} .inf__bars i:nth-child(1){height:30%;} .inf__bars i:nth-child(2){height:25%;} .inf__bars i:nth-child(3){height:34%;} .inf__bars i:nth-child(4){height:27%;} .inf__bars i:nth-child(5){height:32%;} .inf__bars i:nth-child(6){height:28%;} .inf__bars i:nth-child(7){height:33%;} .inf__bars i:nth-child(8){height:29%;} .inf.spike .inf__bars i:nth-child(1){height:22%;} .inf.spike .inf__bars i:nth-child(2){height:30%;} .inf.spike .inf__bars i:nth-child(3){height:38%;} .inf.spike .inf__bars i:nth-child(4){height:50%;} .inf.spike .inf__bars i:nth-child(5){height:66%;} .inf.spike .inf__bars i:nth-child(6){height:82%;} .inf.spike .inf__bars i:nth-child(7){height:95%;} .inf.spike .inf__bars i:nth-child(8){height:88%;} .inf__foot{display:flex; align-items:center; justify-content:space-between; gap:10px;} .inf__servers{display:flex; gap:7px;} .inf__srv{width:24px; height:28px; border-radius:6px; border:1.5px solid var(--gray-300); background:#fff; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(0,34,89,.06); transition:background .3s, border-color .3s, transform .3s;} /* vents/slots do servidor */ .inf__srv::before{content:""; position:absolute; left:5px; right:9px; top:10px; height:1.5px; border-radius:2px; background:var(--gray-300); box-shadow:0 5px 0 var(--gray-300), 0 10px 0 var(--gray-300); transition:background .3s, box-shadow .3s;} /* LED de status */ .inf__srv::after{content:""; position:absolute; top:5px; right:5px; width:4px; height:4px; border-radius:50%; background:var(--gray-300); transition:background .3s, box-shadow .3s;} .inf__srv.on{background:var(--navy); border-color:var(--navy);} .inf__srv.on::before{background:rgba(255,255,255,.38); box-shadow:0 5px 0 rgba(255,255,255,.38), 0 10px 0 rgba(255,255,255,.38);} .inf__srv.on::after{background:#22c55e; box-shadow:0 0 5px #22c55e;} .inf__srv.pop{animation:infpop .4s ease-out;} @keyframes infpop{0%{transform:scale(.5); opacity:.3;} 60%{transform:scale(1.12);} 100%{transform:scale(1);}} .inf__note{font-size:.68rem; font-weight:600; color:var(--gray-600); font-variant-numeric:tabular-nums;} /* anim: analytics (mini dashboard com KPIs) */ .an{position:absolute; inset:0; display:flex; flex-direction:column; padding:13px 14px; background:#fff;} .an__top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;} .an__label{font-size:.82rem; font-weight:600; color:var(--ink);} .an__live{display:inline-flex; align-items:center; gap:6px; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#1FA45A;} .an__live i{width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:kbpulse 2s infinite;} .an__kpis{display:flex; gap:7px;} .an__kpi{flex:1; display:flex; flex-direction:column; gap:1px; padding:7px 8px; border:1px solid var(--gray-300); border-radius:9px; background:var(--offwhite); min-width:0;} .an__k{font-size:.56rem; color:var(--gray-600); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;} .an__kpi b{font-family:var(--f-cond); font-weight:800; font-size:1.05rem; color:var(--navy); line-height:1.15; font-variant-numeric:tabular-nums;} .an__up{font-size:.56rem; font-weight:700; color:#1FA45A;} .an__spark{flex:1; width:100%; margin-top:9px; min-height:0;} .an__line{fill:none; stroke:#1FA45A; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 1.2s ease;} .an.draw .an__line{stroke-dashoffset:0;} .an__area{fill:rgba(31,164,90,.12); opacity:0; transition:opacity .6s ease .55s;} .an.draw .an__area{opacity:1;} @media(min-width:620px){.skills{grid-template-columns:repeat(2,1fr);}} @media(min-width:980px){.skills{grid-template-columns:repeat(3,1fr); gap:var(--s4);}} /* ---------- IA (seção destaque) ------------------------------------------- */ .ia{position:relative; overflow:hidden; isolation:isolate;} /* brilho laranja sutil no canto — dá o "destaque" sem poluir */ .ia__glow{position:absolute; top:-30%; right:-10%; width:min(680px,90vw); aspect-ratio:1; z-index:-1; pointer-events:none; background:radial-gradient(circle, rgba(242,101,34,.20), transparent 62%); filter:blur(20px);} .ia__grid{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s6);} .ia-card{display:flex; flex-direction:column; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:var(--r-lg); transition:transform .18s ease-out, border-color .18s ease-out, background-color .18s ease-out;} .ia-card:hover{transform:translateY(-4px); border-color:rgba(242,101,34,.45); background:rgba(255,255,255,.06);} .ia-card__stage{position:relative; height:180px; overflow:hidden; border-bottom:1px solid var(--line-dark);} .ia-card__body{padding:var(--s4);} .ia-card__title{font-size:1.15rem; font-weight:700; color:#fff;} .ia-card__desc{font-size:var(--fs-small); color:var(--on-navy-dim); margin-top:8px; line-height:1.55;} .ia__cta{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6);} .ia__cta .btn{min-height:46px;} @media(min-width:760px){.ia__grid{grid-template-columns:repeat(3,1fr); gap:var(--s4);}} /* anim: ia-auto (lista que se resolve sozinha) -------------------------- */ .ia-auto__list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; flex:1;} .ia-auto__row{display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--gray-600);} .ia-auto__dot{flex:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--gray-300); position:relative; box-sizing:border-box;} .ia-auto__dot::before{content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color:var(--orange); animation:iaspin .8s linear infinite;} .ia-auto__row.done .ia-auto__dot{border-color:#1FA45A; background:#1FA45A;} .ia-auto__row.done .ia-auto__dot::before{display:none;} .ia-auto__row.done .ia-auto__dot::after{content:""; position:absolute; top:2px; left:5px; width:4px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);} .ia-auto__t{transition:color .2s;} .ia-auto__row.done .ia-auto__t{color:var(--ink); text-decoration:line-through; text-decoration-color:rgba(14,23,38,.25);} @keyframes iaspin{to{transform:rotate(360deg);}} .ia-auto__foot{display:flex; align-items:center; gap:7px; margin-top:9px; padding-top:9px; border-top:1px solid var(--gray-300);} .ia-auto__k{font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-600);} .ia-auto__num{font-family:var(--f-cond); font-weight:800; font-size:1.15rem; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums;} /* anim: ia-sec (permissões + cadeado) ----------------------------------- */ .ia-sec__lock{display:inline-flex; color:var(--gray-600); transition:color .3s ease;} .ia-sec__shackle{transform:translateY(-2px) scaleY(1.18); opacity:.5; transform-origin:center bottom; transition:transform .35s ease, opacity .35s ease;} .ia-sec.locked .ia-sec__lock{color:#1FA45A;} .ia-sec.locked .ia-sec__shackle{transform:none; opacity:1;} .ia-sec__list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; flex:1;} .ia-sec__row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 8px; border:1px solid var(--gray-300); border-radius:8px; background:var(--offwhite); opacity:.35; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease, border-color .3s ease;} .ia-sec__row.on{opacity:1; transform:none; border-color:rgba(31,164,90,.5);} .ia-sec__name{font-size:.74rem; color:var(--ink); font-weight:500;} .ia-sec__tag{flex:none; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#1FA45A; background:rgba(31,164,90,.12); padding:2px 7px; border-radius:999px; white-space:nowrap;} .ia-sec__badge{display:inline-flex; align-items:center; gap:6px; margin-top:7px; font-size:.68rem; font-weight:700; color:var(--navy); opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease;} .ia-sec.locked .ia-sec__badge{opacity:1; transform:none;} .ia-sec__check{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#1FA45A; color:#fff;} /* anim: ia-hub (integrações -> IA -> insight) --------------------------- */ .ia-hub__flow{display:flex; align-items:center; gap:6px; margin-top:12px; flex:1;} .ia-hub__src{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;} .ia-hub__node{font-size:.62rem; font-weight:600; color:var(--ink); background:var(--offwhite); border:1px solid var(--gray-300); border-radius:7px; padding:4px 8px; opacity:.4; transform:translateX(-5px); transition:opacity .3s ease, transform .3s ease, border-color .3s ease;} .an.run .ia-hub__node{opacity:1; transform:none; border-color:rgba(242,101,34,.4); transition-delay:calc(var(--d) * .25s);} .ia-hub__link{position:relative; flex:1; height:2px; min-width:16px; background:var(--gray-300); border-radius:2px;} .ia-hub__link--out{flex:none; width:18px;} .ia-hub__pulse{position:absolute; top:50%; left:0; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--orange); opacity:0;} .an.run .ia-hub__link .ia-hub__pulse{animation:iaflow 1.4s linear infinite;} .an.run .ia-hub__link--out .ia-hub__pulse{animation-delay:.5s;} @keyframes iaflow{0%{left:0; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{left:100%; opacity:0;}} .ia-hub__core{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:.62rem; font-weight:800; color:#fff; background:var(--navy);} .an.run .ia-hub__core{animation:iacore 1.4s ease-in-out infinite;} @keyframes iacore{0%,100%{box-shadow:0 0 0 0 rgba(242,101,34,.45);} 50%{box-shadow:0 0 0 7px rgba(242,101,34,0);}} .ia-hub__out{flex:none; font-size:.62rem; font-weight:700; color:#1FA45A; background:rgba(31,164,90,.12); border:1px solid rgba(31,164,90,.4); border-radius:7px; padding:4px 8px; opacity:0; transform:scale(.85); transition:opacity .3s ease, transform .3s ease;} .an.run .ia-hub__out{opacity:1; transform:none; transition-delay:1s;} @media(prefers-reduced-motion:reduce){ .ia-auto__dot::before, .an.run .ia-hub__link .ia-hub__pulse, .an.run .ia-hub__core{animation:none;} } /* ---------- Planos -------------------------------------------------------- */ .plans{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s6); align-items:stretch;} .plan{display:flex; flex-direction:column; min-width:0; background:var(--white); border:1px solid var(--gray-300); border-radius:var(--r-lg); padding:var(--s5) var(--s4); box-shadow:var(--sh-1); position:relative;} .plan--featured{border:2px solid var(--orange); box-shadow:var(--sh-3);} .plan__selo{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--orange); color:#fff; font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:999px;} .plan__name{font-size:var(--fs-h3); font-weight:700; color:var(--navy);} .plan__for{font-size:var(--fs-small); color:var(--gray-600); margin-top:6px; min-height:3em;} .plan__price{margin:var(--s4) 0 var(--s2);} .plan__price .from{display:block; font-size:var(--fs-small); color:var(--gray-600); margin-bottom:3px;} .plan__price .val{display:block; font-family:var(--f-cond); font-weight:800; font-size:clamp(2.1rem,3.6vw,2.9rem); color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;} .plan__price .cents{font-size:var(--fs-small); color:var(--gray-600);} .plan__rgx{font-size:.8125rem; color:var(--gray-600); margin-bottom:var(--s4);} .plan__list{list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; margin-bottom:var(--s5);} .plan__list li{display:flex; gap:10px; font-size:var(--fs-small); line-height:1.45;} .plan__list .ic{flex:none; width:20px; height:20px; padding:4px; color:#fff; background:var(--orange); border-radius:50%; margin-top:1px;} .plan .btn{margin-top:auto;} @media(min-width:880px){ .plans{grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:start;} .plan--featured{transform:translateY(-12px);} } /* ---------- Prova / autoridade -------------------------------------------- */ .proof__grid{display:grid; gap:var(--s5); grid-template-columns:1fr; margin-top:var(--s6); text-align:center;} .metric .metric__num{font-family:var(--f-cond); font-weight:800; font-size:var(--fs-metric); color:var(--orange-600); line-height:1; font-variant-numeric:tabular-nums;} .metric .metric__label{color:var(--on-navy-dim); margin-top:var(--s2);} @media(min-width:720px){.proof__grid{grid-template-columns:repeat(3,1fr);}} /* ---------- CTA final + formulário ---------------------------------------- */ .cta__wrap{display:grid; gap:var(--s6); grid-template-columns:1fr;} .form-card{background:var(--white); border:1px solid var(--gray-300); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:clamp(24px,4vw,40px);} .form-grid{display:grid; gap:var(--s3); grid-template-columns:1fr;} .field{display:flex; flex-direction:column; gap:6px;} .field label{font-size:var(--fs-small); font-weight:500; color:var(--ink);} .field label .req{color:var(--orange);} .field input,.field textarea{ font:inherit; font-size:var(--fs-body); color:var(--ink); background:var(--white); border:1.5px solid var(--gray-300); border-radius:var(--r); padding:13px 14px; min-height:48px; width:100%; transition:border-color .15s, box-shadow .15s; } .field textarea{min-height:104px; resize:vertical;} .field input:focus,.field textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,101,34,.18);} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#D92D20;} .field .err{font-size:var(--fs-small); color:#D92D20; display:none;} .field input[aria-invalid="true"]~.err,.field textarea[aria-invalid="true"]~.err{display:block;} .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden;} .form-actions{display:flex; flex-direction:column; margin-top:var(--s3);} .form-note{font-size:var(--fs-small); color:var(--gray-600); text-align:center; margin:10px 0 14px;} .form-alert{padding:14px 16px; border-radius:var(--r); margin-bottom:var(--s3); font-size:var(--fs-small);} .form-alert--error{background:#FEF3F2; color:#B42318; border:1px solid #FECDCA;} @media(min-width:560px){.form-grid{grid-template-columns:1fr 1fr;} .field--full{grid-column:1/-1;}} @media(min-width:960px){.cta__wrap{grid-template-columns:1fr 1.15fr; align-items:center;}} /* ---------- Footer -------------------------------------------------------- */ .site-footer{background:var(--navy-900); color:var(--on-navy-dim); padding-block:var(--s6) var(--s5);} .footer__top{display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start;} .footer__logo img{height:32px; width:auto;} .footer__top p{font-size:var(--fs-small); margin-top:var(--s3); max-width:42ch;} .footer__links{display:flex; flex-direction:column; gap:12px;} .footer__links a{font-size:var(--fs-small);} .footer__links a:hover{color:#fff;} .footer__bottom{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-dark); font-size:var(--fs-small); display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:space-between;} @media(min-width:760px){.footer__top{grid-template-columns:2fr 1fr 1fr;}} /* ---------- Confirmação (obrigado) ---------------------------------------- */ .thanks{min-height:70vh; display:grid; place-items:center; text-align:center; background:var(--navy); color:#fff; /* topo: limpa o header transparente (que puxa o conteúdo -69px) + respiro; base: ar antes do footer */ padding:clamp(116px,16vh,168px) var(--gutter) clamp(56px,9vh,96px);} .thanks__ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;margin:0 auto var(--s4);} .thanks__ic .ic{width:36px;height:36px;stroke-width:2.5;} .thanks h1{font-size:var(--fs-h1);} .thanks p{color:var(--on-navy-dim); margin-top:var(--s3); max-width:46ch; margin-inline:auto;} .thanks .btn{margin-top:var(--s5);} /* ---------- Animação de entrada ------------------------------------------- */ @keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}} .reveal{opacity:0; animation:rise .45s ease-out forwards;} .reveal.d1{animation-delay:.08s;} .reveal.d2{animation-delay:.16s;} .reveal.d3{animation-delay:.24s;} .reveal.d4{animation-delay:.32s;} @media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important;} .reveal{opacity:1; transform:none;} } /* Visually-hidden (acessibilidade) */ .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;}