/* ============================================================ Bruno Tiburcio — sistema visual Carvão #242424 · acento #0ABAB5 · Manrope ============================================================ */ :root{ --ink:#242424; --ink-2:#5C5C60; --ink-3:#8E8E93; --paper:#FFFFFF; --paper-2:#FAFAFA; --line:#E8E8EA; --acc:#0ABAB5; --acc-dim:#089B97; --dk:#242424; --dk-2:#2E2E2E; --dk-line:#3C3C3C; --dk-text:#F5F5F5; --dk-mut:#9A9A9E; --wrap:1280px; /* = max-w-7xl, mesma medida da referência */ --pad:32px; --r:100px; --font:"Manrope",-apple-system,BlinkMacSystemFont,"Avenir Next",system-ui,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .eyebrow{ font-size:12px;letter-spacing:.3em;text-transform:uppercase; font-weight:600;color:var(--ink-3);margin:0 0 20px; } .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- MODO RASCUNHO ---------- Tudo abaixo existe só para testar o design com texto de comprimento real. Para desligar: remover a classe "draft" do e apagar este bloco. O conteúdo marcado é FICTÍCIO e não pode ir ao ar. */ .draft-banner{ background:#3A2A00;color:#FFD98A;border-bottom:1px solid #5A4200; font-size:12.5px;font-weight:700;letter-spacing:.04em;text-align:center; padding:9px 20px;position:relative;z-index:60; } .draft-banner span{opacity:.75;font-weight:600;letter-spacing:.01em} body:not(.draft) .draft-banner{display:none} /* ---------- marcador de lacuna (some no site final) ---------- */ .gap{ display:inline-block;font-size:.8em;font-weight:700;letter-spacing:.04em; color:var(--acc-dim);background:rgba(10,186,181,.09); border:1px dashed var(--acc);border-radius:5px;padding:1px 8px; vertical-align:middle; } .gap-block{ display:block;border:1px dashed var(--acc);border-radius:10px; background:rgba(10,186,181,.05);color:var(--acc-dim); padding:20px 22px;font-size:13.5px;font-weight:600;line-height:1.55; } /* ---------- logo ---------- */ .logo{display:flex;align-items:center;gap:13px} .logo svg{display:block;width:40px;height:40px;flex:none} .logo b{ font-size:18.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;white-space:nowrap; } /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line); } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:88px} .nav{display:flex;align-items:center;gap:30px} .nav a{font-size:16px;font-weight:500;color:var(--ink-2);transition:color .15s} .nav a:hover{color:var(--ink)} .nav a.ext::after{content:"↗";font-size:13px;margin-left:5px;color:var(--ink-3)} .nav a[aria-current="page"]{color:var(--ink);font-weight:700} .nav .nav-cta{display:none} .btn{ display:inline-flex;align-items:center;gap:8px; font-size:15px;font-weight:600;letter-spacing:.01em; padding:14px 26px;border-radius:var(--r);transition:.18s; border:1px solid transparent;cursor:pointer;white-space:nowrap; } .btn-p{background:var(--dk-2);color:#fff} .btn-p:hover{background:var(--ink)} .btn-s{border-color:#D9D9DC;color:var(--ink);background:transparent} .btn-s:hover{border-color:var(--ink)} .btn-sm{padding:13px 24px;font-size:15px} .btn-acc{background:var(--acc);color:#0B2523} .btn-acc:hover{background:var(--acc-dim);color:#fff} /* ---------- hero ---------- Texto à esquerda; arte da marca sangrando até a borda direita, colada no header e na faixa de prova (full-bleed, não painel boxed). */ .hero{padding:86px 0 72px;background:var(--paper)} .hero .wrap{display:block} h1{ font-size:clamp(36px,5.3vw,76px);line-height:1.04;letter-spacing:-.032em; font-weight:400;margin:0;text-wrap:balance; } h1 b{font-weight:800;color:var(--acc-dim)} .hero-sub{ display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end; margin-top:52px;padding-top:34px;border-top:1px solid var(--line); } .hero .lede{font-size:20px;line-height:1.5;color:var(--ink-2);margin:0;max-width:640px} .ctas{display:flex;gap:12px;flex-wrap:wrap} /* ---------- prova — faixa compacta ---------- */ .cred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)} .cred .wrap{ display:flex;align-items:center;gap:56px;flex-wrap:wrap; padding-top:30px;padding-bottom:30px; } .cred-label{ font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-3);font-weight:700;margin:0;flex:none; } .cred-nums{display:flex;gap:52px;flex-wrap:wrap;flex:1} .cred-nums .n{display:flex;align-items:baseline;gap:10px} .cred-nums .n b{font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1} .cred-nums .n span{font-size:14.5px;color:var(--ink-3)} .cred-link{ font-size:14.5px;font-weight:600;color:var(--ink-2);flex:none; border-bottom:1px solid var(--line);padding-bottom:2px;transition:.15s; } .cred-link:hover{color:var(--ink);border-color:var(--ink)} /* ---------- bloco escuro ---------- */ .dark{background:var(--dk);color:var(--dk-text)} .dark .wrap{ padding-top:88px;padding-bottom:88px; display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; } .dark-fig{margin:0} .dark-fig img{ width:100%;height:auto;display:block; /* a arte foi regerada com fundo #252525 contra o #242424 do bloco: funde sozinha, sem máscara. Se trocar a imagem, conferir o fundo antes. */ } .dark .eyebrow{color:var(--acc)} .dark h2{ font-size:clamp(26px,3.2vw,40px);line-height:1.18;letter-spacing:-.024em; font-weight:400;margin:0 0 22px; } .dark h2 b{font-weight:800} .dark p{font-size:17px;line-height:1.72;color:var(--dk-mut);margin:0 0 18px} /* ---------- marca-texto ---------- */ mark{ background:linear-gradient(180deg,transparent 56%,rgba(10,186,181,.30) 56%); color:inherit;padding:0 2px;margin:0 -2px;border-radius:2px; -webkit-box-decoration-break:clone;box-decoration-break:clone; } /* ---------- testemunho ---------- */ .creed{padding:88px 0 0;border-bottom:1px solid var(--line)} .creed .wrap{display:grid;grid-template-columns:1fr 400px;gap:80px;align-items:center} /* recorte sem fundo, ancorado na linha de base da seção */ .creed-foto{margin:0;align-self:end} .creed-foto img{width:100%;height:auto;display:block} .creed p{max-width:820px} .creed .eyebrow{color:var(--acc-dim)} .creed p{font-size:17.5px;line-height:1.7;color:#3A3A3E;margin:0 0 22px} .creed .creed-lead{font-size:22px;line-height:1.5;color:var(--ink);font-weight:600;letter-spacing:-.012em;margin-bottom:26px} .creed-quote{ display:block;font-family:var(--serif,var(--font));font-weight:800; font-size:80px;line-height:.6;color:var(--ink);margin-bottom:2px; } .creed .creed-close{font-weight:800;color:var(--ink)} .creed .creed-kicker{ font-size:21px;line-height:1.45;color:var(--ink);font-weight:800; letter-spacing:-.015em;border-left:3px solid var(--acc); padding:2px 0 2px 22px;margin:30px 0; } /* ---------- seções ---------- */ .sec{padding:84px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px} .sec-head .eyebrow{margin:0} .sec-head a{font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px} .sec-head a:hover{color:var(--ink);border-color:var(--ink)} /* ---------- cards de análise ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.18s;background:var(--paper)} .card:hover{border-color:#CFCFD3;transform:translateY(-2px)} .card .thumb{height:120px;background:#F2F2F4;position:relative;border-bottom:1px solid var(--line)} .card .thumb i{position:absolute;left:0;bottom:0;width:42%;height:5px;background:var(--acc)} .card .body{padding:20px 21px 24px} .card .dt{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin:0 0 11px;font-weight:700} .card h3{font-size:18px;line-height:1.34;letter-spacing:-.015em;margin:0;font-weight:700} /* ---------- ANA ---------- */ .ana .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .ana h2{font-size:clamp(24px,2.9vw,36px);line-height:1.22;letter-spacing:-.022em;font-weight:400;margin:0 0 18px} .ana h2 b{font-weight:800} .ana p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0 0 26px} .ana-art{ aspect-ratio:16/11;background:#050B11;position:relative;overflow:hidden;border-radius:3px; display:flex;align-items:center;justify-content:center; } .ana-art .glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 40%,rgba(0,240,255,.16),transparent 70%),radial-gradient(50% 50% at 75% 65%,rgba(99,102,241,.18),transparent 70%)} .ana-art span{position:relative;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#7FE9F2;font-weight:700} /* ---------- captura ---------- */ .capture{background:var(--paper-2);border-top:1px solid var(--line)} .capture .wrap{padding-top:80px;padding-bottom:80px;max-width:760px;text-align:center} .capture h2{font-size:clamp(24px,3vw,37px);line-height:1.2;letter-spacing:-.022em;font-weight:400;margin:0 0 16px} .capture h2 b{font-weight:800} .capture p{font-size:17px;color:var(--ink-2);margin:0 0 32px;line-height:1.68} .form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap} .form input{ flex:1;min-width:240px;height:54px;padding:0 20px;font-family:inherit;font-size:16px; border:1px solid #D9D9DC;border-radius:var(--r);background:#fff;color:var(--ink); } .form input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(10,186,181,.16)} .capture .cap-note{font-size:14.5px;color:var(--ink-3);margin:16px 0 0} .capture small{display:block;margin-top:12px;font-size:14px;color:var(--ink-3)} /* ---------- rodapé ---------- */ .site-footer{background:var(--dk-2);color:var(--dk-text)} .site-footer .wrap{padding-top:56px;padding-bottom:40px} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--dk-line)} .site-footer .logo b{color:var(--dk-text)} .foot-top p{font-size:15.5px;color:var(--dk-mut);line-height:1.7;margin:18px 0 0;max-width:290px} .foot-col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin:0 0 16px;font-weight:700} .foot-col a{display:block;font-size:15.5px;color:var(--dk-mut);margin-bottom:11px;transition:color .15s} .foot-col a:hover{color:var(--dk-text)} .foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:12px} .foot-bot small{font-size:13.5px;color:#78787E} /* ---------- páginas internas ---------- */ .page-head{padding:72px 0 44px;border-bottom:1px solid var(--line)} .page-head h1{font-size:clamp(28px,3.5vw,42px);margin-bottom:16px} .page-head p{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:620px;margin:0} .prose{max-width:680px;margin:0 auto;padding:72px 0} .prose h2{font-size:24px;letter-spacing:-.02em;font-weight:800;margin:52px 0 16px} .prose h2:first-child{margin-top:0} .prose p{font-size:17.5px;line-height:1.75;color:#3A3A3E;margin:0 0 22px} .prose .ato{ font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc); font-weight:800;margin:0 0 10px; } /* ---------- artigo ---------- */ .art-head{padding:64px 0 40px;border-bottom:1px solid var(--line)} .art-head .inner{max-width:680px;margin:0 auto} .art-head h1{font-size:clamp(26px,3.3vw,40px);line-height:1.11;margin:0 0 20px;font-weight:800;letter-spacing:-.028em} .art-meta{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--ink-3);flex-wrap:wrap} .art-meta .sep{width:3px;height:3px;border-radius:50%;background:#CFCFD3} .art-lead{font-size:20px;line-height:1.62;color:var(--ink-2);margin:0 0 4px;font-weight:600} .prose blockquote{ margin:36px 0;padding:4px 0 4px 26px;border-left:3px solid var(--acc); font-size:19px;line-height:1.58;color:var(--ink);font-weight:600; } .prose blockquote p{font-size:inherit;line-height:inherit;color:inherit;margin:0} .prose h3{font-size:19px;margin:38px 0 12px;font-weight:800;letter-spacing:-.015em} .prose ul{margin:0 0 22px;padding-left:22px} .prose li{font-size:17.5px;line-height:1.75;color:#3A3A3E;margin-bottom:9px} .prose strong{font-weight:800;color:var(--ink)} .prose .destaque{ font-size:21px;line-height:1.5;font-weight:700;color:var(--ink); letter-spacing:-.012em;margin:32px 0; } .art-foot{ max-width:680px;margin:0 auto;padding:34px 0 0;border-top:1px solid var(--line); display:flex;align-items:center;gap:16px; } .art-foot .av{width:52px;height:52px;border-radius:50%;background:var(--ink);flex:none;overflow:hidden} .art-foot .av svg{width:100%;height:100%;display:block} .art-foot b{display:block;font-size:16px;margin-bottom:3px} .art-foot p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6} .back{display:inline-block;font-size:14.5px;color:var(--ink-2);margin-bottom:26px} .back:hover{color:var(--ink)} .list{padding:64px 0} .list-item h3 a:hover{color:var(--acc-dim)} .list-item{ display:grid;grid-template-columns:150px 1fr;gap:32px;padding:30px 0; border-bottom:1px solid var(--line);align-items:baseline; } .list-item .dt{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700} .list-item h3{font-size:21px;line-height:1.32;letter-spacing:-.02em;margin:0 0 10px;font-weight:700;max-width:660px} .list-item p{font-size:16px;color:var(--ink-2);margin:0;line-height:1.65;max-width:620px} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:72px 0} .contact-block h3{font-size:21px;margin:0 0 10px;letter-spacing:-.015em;font-weight:800} .contact-block p{font-size:16.5px;color:var(--ink-2);line-height:1.68;margin:0 0 20px} /* ---------- menu mobile ---------- */ .menu-btn{ display:none;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%;border:0; color:var(--ink);background:transparent;cursor:pointer;flex:none; } .menu-btn svg{width:24px;height:24px;display:block} /* ---------- busca ---------- */ .busca-btn{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%;border:1px solid transparent; color:var(--ink-2);background:transparent;cursor:pointer;transition:.15s;flex:none; } .busca-btn:hover{background:#F1F1F3;color:var(--ink)} .busca-btn svg{width:21px;height:21px;display:block} .busca-overlay{ position:fixed;inset:0;z-index:120;background:rgba(20,20,22,.42); backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center; padding:12vh 24px 24px; } .busca-overlay[hidden]{display:none} .busca-caixa{ width:100%;max-width:640px;background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.26); } .busca-input{ width:100%;height:64px;border:0;border-bottom:1px solid var(--line); padding:0 24px;font-family:inherit;font-size:19px;color:var(--ink);background:#fff; } .busca-input:focus{outline:none} .busca-res{max-height:min(52vh,440px);overflow-y:auto} .busca-item{display:block;padding:16px 24px;border-bottom:1px solid var(--line);transition:background .12s} .busca-item:hover{background:#F7F7F8} .busca-item b{display:block;font-size:16.5px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em} .busca-item span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.5} .busca-vazio{margin:0;padding:22px 24px;font-size:15px;color:var(--ink-3)} .busca-dica{margin:0;padding:13px 24px;font-size:13px;color:var(--ink-3);background:#FAFAFA;border-top:1px solid var(--line)} @media (max-width:1000px){ .busca-overlay{padding:8vh 16px 16px} } /* ---------- responsivo ---------- */ @media (max-width:480px){ .logo b{font-size:13.5px} .busca-btn{width:34px;height:34px} .site-header .wrap > .btn-sm{display:none} } @media (max-width:1000px){ .hero .wrap,.ana .wrap,.contact-grid,.dark .wrap{grid-template-columns:1fr;gap:38px} .hero-art{aspect-ratio:16/10} .cred .wrap{gap:18px 36px;padding-top:26px;padding-bottom:26px} .cred-nums{gap:14px 28px;flex-direction:column} .cred-label{width:100%} .cred-link{width:100%;border-bottom:0;text-decoration:underline;text-underline-offset:3px} .cards{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr;gap:32px} .list-item{grid-template-columns:1fr;gap:10px} .menu-btn{display:inline-flex} .nav{display:none} .site-header.menu-open .nav{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;top:100%;left:0;right:0;z-index:49; background:#fff;border-bottom:1px solid var(--line); padding:8px 20px 16px;box-shadow:0 14px 30px rgba(0,0,0,.08); text-align:left; } .site-header.menu-open .nav a{ font-size:17px;padding:14px 4px;border-bottom:1px solid var(--line); } .site-header.menu-open .nav a:last-child{border-bottom:0} .site-header.menu-open .nav .nav-cta{display:block;font-weight:700;color:var(--ink)} .wrap{padding:0 20px} .site-header .wrap{height:72px} .logo{gap:9px} .logo svg{width:34px;height:34px} .logo b{font-size:14.5px;letter-spacing:.1em} .busca-btn{width:38px;height:38px} .btn-sm{padding:10px 16px;font-size:13.5px} .hero{padding:52px 0 48px} .hero-sub{grid-template-columns:1fr;gap:26px;margin-top:34px;padding-top:26px} .creed .wrap{grid-template-columns:1fr;gap:44px} .creed-foto{max-width:440px} .sec,.dark .wrap{padding-top:56px;padding-bottom:56px} }