/* ===================================================================== 2BTECK · base.css Design system do site, extraído da LP v1 aprovada (clients/2bteck/lp/lp.src.html). Fundo claro #F4F5F7, vidro, CTA em pílula, rótulo Geist Mono. Referência visual de todos os componentes: site/_kit.html ===================================================================== */ /* ---------- fontes (locais) ---------- */ @font-face{ font-family:"Archivo"; src:url("../fonts/Archivo-Variable-Latin.ttf") format("truetype"); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; } @font-face{ font-family:"Geist Mono"; src:url("../fonts/GeistMono-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Geist Mono"; src:url("../fonts/GeistMono-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; } /* ---------- tokens ---------- */ :root{ color-scheme:light; /* cor */ --paper:#F4F5F7; /* fundo das páginas */ --white:#FFFFFF; --mist:#F3F5FF; --ink:#13274F; /* texto principal = navy */ --ink2:#4A5068; /* texto de apoio */ --ink3:#5F6680; /* legenda, meta (AA 4.5:1 no paper e no branco) */ --blue:#3B7CFF; /* 2B Blue */ --deep:#1D429E; --navy:#13274F; --void:#07080C; --graphite:#0E1017; --line:#E3E5EA; --line-strong:#DADDE4; --ok:#3B7CFF; --amber:#FFB547; --critical:#FF4D5E; --live:#2BC48A; --blue-soft:rgba(59,124,255,.10); --grad-cta:linear-gradient(180deg,#4A87FF 0%,#3B7CFF 45%,#2F68F0 100%); /* tipo */ --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Archivo",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace; /* medidas */ --wrap:1200px; --gutter:clamp(16px,4vw,40px); --r-sm:14px; --r-md:20px; --r-lg:24px; --r-xl:28px; --r-2xl:32px; --r-pill:999px; --sec-y:clamp(64px,10vw,128px); --nav-h:84px; /* sombra e vidro */ --sh-1:0 1px 2px rgba(19,39,79,.06); --sh-2:0 10px 24px -12px rgba(19,39,79,.25); --sh-glass:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(19,39,79,.04), 0 1px 2px rgba(19,39,79,.05), 0 14px 28px -10px rgba(19,39,79,.14), 0 44px 80px -30px rgba(19,39,79,.28); /* textura */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --mesh-dark:radial-gradient(60% 70% at 0% 0%, rgba(29,66,158,.85), transparent 70%), radial-gradient(60% 70% at 100% 100%, rgba(59,124,255,.55), transparent 72%); --mesh-light:radial-gradient(55% 60% at 100% 0%, rgba(59,124,255,.22), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(29,66,158,.12), transparent 70%); --ease:cubic-bezier(.16,1,.3,1); } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden} a{color:inherit; text-decoration:none} img,svg,video{display:block; max-width:100%} h1,h2,h3,h4,p,figure,blockquote{margin:0} h1,h2,h3{text-wrap:balance} p{text-wrap:pretty} ul,ol{margin:0; padding:0; list-style:none} button{font:inherit; color:inherit} :focus-visible{outline:3px solid rgba(59,124,255,.5); outline-offset:3px; border-radius:6px} .sr-only{position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:var(--r-pill); font-size:14px} .skip:focus{top:12px} /* ---------- tipografia ---------- */ .disp{font-family:var(--display); font-weight:800; font-stretch:112%; font-variation-settings:"wdth" 112; letter-spacing:-.025em; line-height:.98; color:var(--ink)} .d-xl{font-size:clamp(44px,7.4vw,96px)} /* h1 de hero */ .d-lg{font-size:clamp(30px,3.6vw,50px)} /* h2 de seção: cabe em 2 linhas no desktop */ .sec-hd .d-lg,.sec-hd h2{max-width:20ch} .d-md{font-size:clamp(26px,2.8vw,36px)} /* h3 de card grande */ .d-sm{font-size:clamp(22px,2vw,26px); line-height:1.05} .h3{font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.25} .eyebrow{display:inline-block; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2)} .eyebrow.blue{color:var(--deep)} .lede{font-size:clamp(17px,1.5vw,19px); color:var(--ink2); max-width:44ch} .muted{color:var(--ink2)} .small{font-size:15px} .mono{font-family:var(--mono); font-size:13px; letter-spacing:.04em} .accent{color:var(--blue)} .center{text-align:center} .center .lede{margin-inline:auto} /* ---------- logo (sempre SVG de assets/img/logos) ---------- */ .logo{display:block; height:auto} .logo.lock{width:150px; aspect-ratio:690.41/129.74} /* horizontal */ .logo.lock-edu{width:min(100%,300px); aspect-ratio:1035.51/129.74} .logo.lock-corp{width:min(100%,305px); aspect-ratio:1052.93/129.74} .logo.sym{width:40px; aspect-ratio:1} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)} .wrap.narrow{max-width:880px} .section{position:relative; padding-block:var(--sec-y)} .section.tight{padding-block:clamp(40px,6vw,72px)} .section.flush-top{padding-top:0} .sec-hd{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px 48px; align-items:end; margin-bottom:clamp(28px,4vw,48px)} .sec-hd p{color:var(--ink2); max-width:52ch} .sec-hd.stack{grid-template-columns:minmax(0,1fr); max-width:760px} .sec-hd.stack.center{margin-inline:auto; justify-items:center; text-align:center} @media (max-width:860px){ .sec-hd{grid-template-columns:minmax(0,1fr)} } .grid{display:grid; gap:16px} .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center} @media (max-width:960px){ .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} } @media (max-width:620px){ .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)} } .stack{display:grid; gap:var(--gap,16px); align-content:start} .cluster{display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap,12px)} /* superfícies alternadas. Aplicar numa
(largura total) ou num bloco com .inset (painel arredondado) */ .surface-white{background:var(--white)} .surface-mist{position:relative; isolation:isolate; background:var(--mist)} .surface-mist::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--mesh-light); border-radius:inherit} .dark{position:relative; isolation:isolate; overflow:hidden; background:var(--void); color:#fff} .dark::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--mesh-dark)} .dark::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.5; mix-blend-mode:overlay; background-image:var(--grain); background-size:240px; pointer-events:none} .inset{border-radius:var(--r-2xl); margin-inline:clamp(8px,2vw,24px); overflow:hidden} .dark .disp{color:#fff} .dark .eyebrow{color:rgba(255,255,255,.78)} .dark .lede,.dark .muted,.dark .sec-hd p{color:rgba(255,255,255,.78)} .dark .accent{color:#7FA8FF} .orb-bg{position:absolute; z-index:-1; pointer-events:none; opacity:.09} /* símbolo em traço gigante como textura no escuro */ /* ---------- vidro ---------- */ .glass{background:linear-gradient(135deg,rgba(255,255,255,.76) 0%,rgba(255,255,255,.36) 100%); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border:1px solid rgba(255,255,255,.8); box-shadow:var(--sh-glass)} .glass-dark{background:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 24px 60px -30px rgba(0,0,0,.6)} .card{border-radius:var(--r-lg); padding:clamp(22px,2.6vw,28px); display:grid; gap:14px; align-content:start; position:relative} .card.lg{border-radius:var(--r-xl); padding:clamp(24px,3.4vw,40px); gap:20px} .card.solid{background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-1)} .card p{color:var(--ink2); font-size:15px} .dark .card p{color:rgba(255,255,255,.72)} /* palco: símbolo grande atrás do vidro (é ele que dá cor ao desfoque) */ .stage{position:relative; isolation:isolate} .stage > .orb{position:absolute; z-index:-1; width:var(--orb,60%); aspect-ratio:1; pointer-events:none; top:var(--orb-top,50%); left:var(--orb-left,50%); transform:translate(-50%,-50%) rotate(var(--orb-rot,-6deg))} /* ---------- botões ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:18px; height:58px; padding:0 8px 0 28px; border-radius:var(--r-pill); font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:-.005em; line-height:1; white-space:nowrap; border:0; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s} .btn .ar{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; transition:transform .35s var(--ease)} .btn .ar svg{width:18px; height:18px} .btn.pri{color:#fff; background:var(--grad-cta); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(19,39,79,.18), 0 14px 30px -12px rgba(59,124,255,.65), 0 4px 10px -4px rgba(19,39,79,.25)} .btn.pri .ar{background:#fff; color:var(--navy); box-shadow:0 4px 10px rgba(19,39,79,.28)} .btn.pri:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(19,39,79,.18), 0 20px 36px -12px rgba(59,124,255,.75), 0 6px 14px -4px rgba(19,39,79,.25)} .btn:hover .ar{transform:translateX(3px)} .btn.sec{background:#fff; color:var(--navy); border:1px solid var(--line-strong); padding:0 28px; box-shadow:var(--sh-1)} .btn.sec:has(.ar){padding-right:8px} .btn.sec .ar{background:var(--paper); color:var(--navy)} .btn.sec:hover{transform:translateY(-2px); box-shadow:var(--sh-2)} .btn.ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.28); padding:0 28px} .btn.ghost:hover{background:rgba(255,255,255,.14); transform:translateY(-2px)} .btn.sm{height:46px; font-size:14px; padding:0 5px 0 20px; gap:14px} .btn.sm .ar{width:36px; height:36px} .btn.sm .ar svg{width:15px; height:15px} .btn.sec.sm,.btn.ghost.sm{padding:0 20px} .btn.block{display:flex; width:100%; justify-content:space-between} .link{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--deep); border-bottom:1px solid transparent; transition:border-color .3s} .link:hover{border-color:currentColor} .dark .link{color:#9BBBFF} /* ---------- nav ---------- */ .nav{position:sticky; top:0; z-index:50; padding-block:14px; transition:padding .4s var(--ease)} .nav-bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 10px 10px 22px; border-radius:var(--r-pill); border:1px solid transparent; transition:background .4s, box-shadow .4s, border-color .4s, backdrop-filter .4s} .nav.scrolled{padding-block:10px} .nav.scrolled .nav-bar,.nav .nav-bar.glass{background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5)); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border-color:rgba(255,255,255,.8); box-shadow:var(--sh-glass)} .nav-links{display:flex; gap:28px; font-size:15px; color:var(--ink2)} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)} .nav-end{display:flex; align-items:center; gap:8px} .nav-toggle{display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; cursor:pointer; place-items:center} .nav-toggle span{display:block; width:16px; height:1.6px; background:var(--navy); border-radius:2px; position:relative; transition:transform .35s var(--ease), background .2s} .nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:16px; height:1.6px; background:var(--navy); border-radius:2px; transition:transform .35s var(--ease)} .nav-toggle span::before{top:-5px} .nav-toggle span::after{top:5px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)} .nav-menu{display:none} @media (max-width:900px){ .nav-links{display:none} .nav-toggle{display:grid} .nav > .wrap{position:relative} /* menu flutua sobre a página (em fluxo ele empurrava o hero pra baixo mesmo fechado) */ .nav-menu{position:absolute; top:100%; left:var(--gutter); right:var(--gutter); display:grid; gap:4px; margin-top:8px; padding:12px; border-radius:var(--r-lg); font-size:17px; opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden; transition:opacity .3s, transform .35s var(--ease), visibility 0s .35s} .nav-menu a{padding:12px 14px; border-radius:var(--r-sm)} .nav-menu a:hover{background:rgba(255,255,255,.7)} .nav.open .nav-menu{opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .3s, transform .35s var(--ease)} } /* CTA da nav no mobile: texto longoFree check mostra o curto; sem .t-m cai no círculo com seta */ .nav .btn.sm .t-m{display:none} @media (max-width:720px){ .nav .btn.sm:has(.t-m) .t{display:none} .nav .btn.sm .t-m{display:inline} .nav .btn.sm:has(.t-m){padding:0 18px; gap:0} .nav .btn.sm:has(.t-m) .ar{display:none} } @media (max-width:420px){ .nav .btn.sm .t{display:none} .nav .btn.sm:not(:has(.t-m)){padding:0 5px} .nav .btn.sm:has(.t-m){padding:0 14px; height:42px; font-size:13.5px} .nav-bar{padding-left:16px; gap:10px} .nav .logo.lock{width:132px} .nav-end{gap:6px} } /* ---------- hero ---------- */ .hero{padding-block:clamp(28px,6vw,72px) clamp(40px,6vw,80px); overflow-x:clip} .hero h1{margin-top:14px} .hero .lede{margin-top:22px; max-width:40ch} .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px} /* ---------- badge, tag, chip ---------- */ .tag{display:inline-flex; align-items:center; gap:8px; justify-self:start; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--deep); background:var(--blue-soft); padding:5px 11px; border-radius:var(--r-pill); line-height:1.3} .tag.navy{background:var(--navy); color:#fff} .tag.line{background:transparent; border:1px solid var(--line-strong); color:var(--ink2)} .dark .tag{background:rgba(59,124,255,.2); color:#BFD3FF} .sq{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--blue); flex:none} /* bullet de status da marca */ .sq.amber{background:var(--amber)} .sq.crit{background:var(--critical)} .sq.navy{background:var(--navy)} .live{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)} .live i{width:7px; height:7px; border-radius:50%; background:var(--live); animation:ping 2s infinite} .chip{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px; font-size:14px; color:var(--ink); white-space:nowrap} .chip b{display:block; font-weight:600; line-height:1.2} .chip small{display:block; font-family:var(--mono); font-size:12px; color:var(--ink3)} .chip.float{position:absolute; z-index:2; animation:float 6s ease-in-out infinite} .chip.back{opacity:.74; scale:.94; animation-duration:7s; animation-delay:-2s} /* ---------- status card ---------- */ .status{border-radius:22px; padding:22px; display:grid; gap:10px} .status-hd{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--ink2); margin-bottom:4px} .status-hd b{color:var(--ink); font-size:16px} .st{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.5); font-size:15px; transition:background .5s, transform .5s var(--ease)} .st .l{display:flex; align-items:center; gap:11px; min-width:0} .st .v{font-family:var(--mono); font-size:12px; color:var(--ink2); white-space:nowrap} .st.flash{background:rgba(255,255,255,.92); transform:translateX(4px)} /* ---------- features (cards com ícone) ---------- */ .features{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} .feature{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:26px; display:grid; gap:14px; align-content:start; transition:transform .5s var(--ease)} .feature:hover{transform:translateY(-6px)} .feature h3{font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.25} .feature p{color:var(--ink2); font-size:15px} .feature::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%); transform:translateX(-120%); transition:transform .9s var(--ease); pointer-events:none} .feature:hover::after{transform:translateX(120%)} .ico{width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; background:var(--grad-cta); color:#fff; box-shadow:0 10px 20px -8px rgba(59,124,255,.7), inset 0 1px 0 rgba(255,255,255,.3)} .ico svg{width:22px; height:22px} .ico.soft{background:var(--blue-soft); color:var(--deep); box-shadow:none} @media (max-width:960px){ .features{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .features{grid-template-columns:minmax(0,1fr)} } /* ---------- stats ---------- */ .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px} .stat{border-radius:var(--r-md); padding:22px; display:grid; gap:6px} .stat b{font-family:var(--display); font-weight:800; font-stretch:112%; font-variation-settings:"wdth" 112; letter-spacing:-.03em; font-size:clamp(34px,4vw,48px); line-height:1; color:var(--ink)} .stat span{color:var(--ink2); font-size:15px} .dark .stat b{color:#fff} .dark .stat span{color:rgba(255,255,255,.72)} /* ---------- steps ---------- */ .steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} .step{border-radius:var(--r-lg); padding:28px; display:grid; gap:12px; align-content:start; position:relative} .step .n{font-family:var(--mono); font-size:13px; color:var(--blue); letter-spacing:.1em} .step h3{font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.2} .step p{color:var(--ink2); font-size:15px} .step .bar{height:4px; border-radius:4px; background:rgba(19,39,79,.08); overflow:hidden; margin-top:8px} .step .bar i{display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,#4A87FF,#2F68F0); transition:width 1.4s var(--ease)} .step.on .bar i{width:100%} @media (max-width:860px){ .steps{grid-template-columns:minmax(0,1fr)} } /* ---------- checklist ---------- */ .checklist{display:grid; gap:12px; color:var(--ink2)} .checklist li{display:flex; gap:12px; align-items:flex-start} .checklist li::before{content:""; flex:none; width:20px; height:20px; margin-top:2px; border-radius:6px; background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%231D429E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat} .checklist.dots li::before{width:8px; height:8px; border-radius:2px; margin-top:9px; background:var(--blue)} .checklist b{color:var(--ink); font-weight:600} .dark .checklist{color:rgba(255,255,255,.78)} .dark .checklist b{color:#fff} .dark .checklist li::before{background-color:rgba(59,124,255,.25); filter:brightness(1.8)} /* ---------- comparison table ---------- */ .compare-wrap{border-radius:var(--r-lg); overflow-x:auto; -webkit-overflow-scrolling:touch} .compare{width:100%; min-width:560px; border-collapse:collapse; font-size:15px} .compare th,.compare td{padding:16px 20px; text-align:left; border-bottom:1px solid rgba(19,39,79,.08); vertical-align:middle} .compare thead th{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)} .compare tbody th{font-weight:600; color:var(--ink)} .compare td{color:var(--ink2)} .compare tr:last-child th,.compare tr:last-child td{border-bottom:0} .compare .us{background:rgba(59,124,255,.07); color:var(--ink)} .compare thead .us{color:var(--deep); border-radius:14px 14px 0 0} .yes,.no{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; font-size:13px; font-weight:700; vertical-align:middle} .yes{background:var(--blue); color:#fff} .no{background:rgba(19,39,79,.07); color:var(--ink3)} /* ---------- FAQ ---------- */ .faq{display:grid; gap:12px; max-width:860px} .faq details{border-radius:var(--r-md); padding:4px 22px} .faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; font-weight:600; font-size:17px; border-radius:10px} .faq summary::-webkit-details-marker{display:none} .faq .pm{width:30px; height:30px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; box-shadow:0 3px 8px rgba(19,39,79,.15); transition:transform .4s var(--ease); font-weight:500} .faq details[open] .pm{transform:rotate(45deg)} .faq .ans{overflow:hidden} .faq .ans p,.faq details > p{color:var(--ink2); padding-bottom:20px; max-width:64ch} /* ---------- CTA band ---------- */ .cta-band{padding:clamp(40px,7vw,88px) clamp(20px,5vw,72px); display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:28px 48px; align-items:end} .cta-band .ctas{margin-top:0} .cta-band.center{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center} .cta-band.center .lede{margin-inline:auto} @media (max-width:860px){ .cta-band{grid-template-columns:minmax(0,1fr); align-items:start} } /* ---------- form ---------- */ .form{border-radius:var(--r-xl); padding:clamp(22px,3vw,34px); display:grid; gap:14px} .form .fields{display:grid; gap:14px} .form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media (max-width:560px){ .form .row{grid-template-columns:1fr} } .field,.form label{display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--ink2)} .input,.form input,.form select,.form textarea{font:inherit; font-size:16px; font-weight:400; color:var(--ink); background:rgba(255,255,255,.72); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:13px 15px; width:100%; transition:border-color .25s, box-shadow .25s, background .25s} .form input:focus,.form select:focus,.form textarea:focus,.input:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(59,124,255,.16)} .form select{appearance:none; -webkit-appearance:none; padding-right:40px; background:rgba(255,255,255,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2313274F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/16px no-repeat} .form textarea{min-height:110px; resize:vertical} .form .pill,.input.pill{border-radius:var(--r-pill); padding-inline:20px} .form [aria-invalid="true"]{border-color:var(--critical); box-shadow:0 0 0 4px rgba(255,77,94,.12)} .form .note{font-family:var(--mono); font-size:12px; color:var(--ink3); font-weight:400} .form .ok{display:none; border-radius:16px; padding:16px 18px; background:rgba(43,196,138,.12); color:#11644A; font-weight:600} .form.sent .ok{display:block} .form.sent .fields{opacity:.45; pointer-events:none} .check{display:flex!important; grid-template-columns:none; gap:10px!important; align-items:flex-start; font-weight:400!important; font-size:14px!important} .check input{width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--blue)} /* ---------- contacto (lista de dados) ---------- */ .contact-list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px} .contact-item{border-radius:var(--r-md); padding:20px 22px; display:grid; gap:8px; align-content:start; min-width:0} .contact-item .eyebrow{font-size:12px} .contact-item a,.contact-item p{font-size:17px; font-weight:600; overflow-wrap:anywhere} .contact-item small{color:var(--ink3); font-size:14px} .dark .contact-item small{color:rgba(255,255,255,.74)} a.contact-item{transition:transform .4s var(--ease), background .4s} a.contact-item:hover{transform:translateY(-3px)} @media (max-width:960px){ .contact-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .contact-list{grid-template-columns:minmax(0,1fr)} } /* ---------- card clicável inteiro (escolha / rota) ---------- */ .card-link{position:relative; display:grid; border-radius:var(--r-xl); padding:clamp(24px,3.2vw,40px); gap:20px; align-content:space-between; min-height:100%; transition:transform .5s var(--ease), box-shadow .5s var(--ease)} .card-link:hover{transform:translateY(-6px)} .card-link:hover .btn .ar{transform:translateX(3px)} .card-link .go{justify-self:start; pointer-events:none} /* ---------- placeholder de imagem ----------
site.js troca pelo arquivo assets/img/.jpg assim que ele existir. */ .ph{position:relative; overflow:hidden; border-radius:var(--r-lg); background:#E9EBF0; aspect-ratio:4/3; background-image:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,0) 60%), repeating-linear-gradient(135deg,rgba(19,39,79,.035) 0 1px,transparent 1px 14px)} .ph::before{content:""; position:absolute; inset:10px; border:1px dashed rgba(19,39,79,.22); border-radius:calc(var(--r-lg) - 8px); pointer-events:none} .ph::after{content:"IMAGE · " attr(data-img) " · " attr(data-ratio); position:absolute; left:50%; top:50%; translate:-50% -50%; max-width:calc(100% - 40px); font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); text-align:center; background:rgba(255,255,255,.75); padding:7px 12px; border-radius:var(--r-pill); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ph.loaded{background:#E9EBF0} .ph.loaded::before,.ph.loaded::after{display:none} .ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0} .ph.loaded > img{opacity:1; animation:fadein .6s var(--ease) both} .dark .ph{background-color:rgba(255,255,255,.06); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px)} .dark .ph::before{border-color:rgba(255,255,255,.22)} .dark .ph::after{background:rgba(7,8,12,.6); color:rgba(255,255,255,.7)} /* ---------- footer ---------- */ .footer{padding-block:48px 64px} .footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px 32px; flex-wrap:wrap} .footer .meta{display:flex; gap:22px; flex-wrap:wrap; font-size:14px; color:var(--ink2)} .footer .meta a:hover{color:var(--ink)} .footer small{font-family:var(--mono); font-size:12px; color:var(--ink3)} /* ---------- floating CTA (aparece depois do hero, some perto do contato) ---------- */ .fab{position:fixed; z-index:60; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); opacity:0; transform:translateY(16px) scale(.96); pointer-events:none; visibility:hidden; transition:opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .5s} .fab.show{opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .4s var(--ease), transform .5s var(--ease)} .fab .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px -12px rgba(19,39,79,.55), 0 4px 10px -4px rgba(19,39,79,.3)} /* no mobile esconde ao rolar pra baixo e volta ao rolar pra cima (site.js põe .tuck) */ .fab.show.tuck{opacity:0; transform:translateY(140%); pointer-events:none} @media (max-width:620px){ .fab{left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom))} .fab .btn{display:flex; width:100%; justify-content:space-between} } /* desktop: a nav fixa já tem o CTA, o FAB só duplicava e cobria conteúdo */ @media (min-width:900px){ .fab{display:none!important} } /* ---------- movimento ---------- */ @keyframes rise{from{opacity:.35; transform:translateY(22px)} to{opacity:1; transform:none}} @keyframes fadein{from{opacity:0} to{opacity:1}} @keyframes float{0%,100%{translate:0 0} 50%{translate:0 -8px}} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(43,196,138,.5)} 80%,100%{box-shadow:0 0 0 8px rgba(43,196,138,0)}} .intro > *{animation:rise .9s var(--ease) both} .intro > *:nth-child(2){animation-delay:.08s} .intro > *:nth-child(3){animation-delay:.16s} .intro > *:nth-child(4){animation-delay:.24s} .intro > *:nth-child(5){animation-delay:.32s} .rv.go{animation:rise .9s var(--ease) both; animation-delay:var(--d,0s)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} html{scroll-behavior:auto} } /* ── Ilustrações (quebra visual entre seções) ─────────────────────────────
...
Support
... Todas exportadas na mesma escala e no mesmo chão: a altura fixa mantém os personagens do mesmo tamanho. */ .illo-strip{display:flex; justify-content:space-around; align-items:flex-end; gap:clamp(16px,4vw,56px); flex-wrap:wrap} .illo{margin:0; display:flex; flex-direction:column; align-items:center; gap:18px} .illo img{display:block; height:clamp(170px,19vw,270px); width:auto; max-width:100%} .illo figcaption{color:var(--ink3)} @media (max-width:640px){ .illo-strip{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px; justify-items:center} .illo img{height:150px} } .illo-break{padding-block:clamp(28px,4vw,48px) clamp(56px,7vw,96px)} /* mesma superfície da seção anterior: não somar os dois respiros */ .illo-break.join{margin-top:calc(clamp(56px,7vw,96px) * -1)} /* ── Autoteste de segurança (.quiz) ───────────────────────────────────────── 6 perguntas sim/não (checkbox real), placar em anel + status da marca. Markup:
… …