/* ============================================================ YOKOTEN · Site institucional Tokens: brandbook-yokoten-institucional.html Layout: gramática somostera.com traduzida para a marca ============================================================ */ :root{ /* DARK PREMIUM */ --midnight:#0A0E1A; --midnight-2:#070B14; --navy-deep:#0D1B2A; --navy:#112240; --navy-soft:#1A2A44; /* BRAND BLUE */ --blue-brand:#0B6FD8; --blue-light:#1A9EFF; --blue-glow:#3ABFFF; --blue-deep:#0852A3; --blue-soft:rgba(11,111,216,.12); /* GOLD SYSTEM */ --gold:#C9A84C; --gold-light:#F0C84A; --gold-warm:#E8A020; --gold-dark:#8E7328; --gold-soft:rgba(201,168,76,.12); /* NEUTRAL */ --white:#FFFFFF; --ivory:#F8F5EC; --gray-100:#F2F4F8; --gray-300:#B0BAC8; --gray-400:#9AA6B8; /* texto secundário legível sobre midnight (AA) */ --gray-500:#6B7A92; --gray-700:#2E3A4E; --gray-900:#141C28; /* ACCENT */ --red-alert:#E8372A; --green-ok:#1EBF7A; /* RADII */ --radius-sm:6px; --radius:12px; --radius-lg:20px; --radius-pill:100px; /* SISTEMA */ --wrap:1180px; --gutter:24px; --nav-h:64px; --ease:cubic-bezier(.2,.7,.2,1); --easing:cubic-bezier(.2,.7,.2,1); /* alias usado nos blocos vindos da LP Black Belt */ /* VERDE SIGMA · cor do Green Belt (registry, ratificada 31/07/2026). Usada nos CTAs que levam ao Green Belt. Nao confundir com o verde #0e2318, que e visual legado e esta banido. */ --green-sigma:#22B14C; --green-vivid:#5CC23A; --green-deep:#159E3E; --grad-green:linear-gradient(135deg,var(--green-vivid) 0%,var(--green-deep) 100%); /* um unico gradiente de ouro no sistema (CTA e selo premium) */ --grad-gold:linear-gradient(135deg,var(--gold-light),var(--gold)); --grad-card:linear-gradient(180deg,#112240,#080C18); /* aliases dos blocos vindos da LP: apontam para os raios do sistema, para nao existirem dois sistemas de canto na mesma pagina */ --r-card:var(--radius-lg); --r-pill:var(--radius-pill); --r-btn:var(--radius-pill); --font-display:"Plus Jakarta Sans",system-ui,sans-serif; --font-serif:"Cormorant Garamond",Georgia,serif; --font-label:"Rajdhani",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; } /* ============================================================ FONTES · self-hosted (subset latin), servidas do proprio dominio. Elimina o round-trip ao Google e o reflow do titulo que jogava o CLS mobile para 0,20. A Plus Jakarta e a Inter sao precarregadas no de cada pagina. ============================================================ */ @font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/cormorant-garamond-italic-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-normal-300_700.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/assets/fonts/jetbrains-mono-normal-400_500.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700 800; font-display:swap; src:url('/assets/fonts/plus-jakarta-sans-normal-700_800.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/rajdhani-normal-600.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Rajdhani'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/rajdhani-normal-700.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ───── RESET ───── */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--midnight); color:var(--gray-300); font-family:var(--font-body); font-size:17px; font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} /* text-wrap:balance equilibra as linhas do titulo. Sem ele, a headline centralizada quebra com uma linha longa e uma curta e o bloco parece torto. Navegador antigo ignora a propriedade e cai no comportamento de hoje. */ h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--white);font-weight:800;letter-spacing:-.02em;line-height:.98;text-wrap:balance} p{margin:0 0 1em} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--blue-glow);outline-offset:3px;border-radius:var(--radius-sm)} .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} /* ───── LAYOUT ───── */ .wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto} .section{padding:88px 0;position:relative} .section--tight{padding:72px 0} .section--midnight{background:var(--midnight)} .section--navy{background:var(--navy-deep)} .section--dense{background:var(--midnight-2)} .section--ivory{background:var(--ivory);color:var(--gray-700)} .section--ivory h1,.section--ivory h2,.section--ivory h3{color:var(--gray-900)} /* ───── TIPOGRAFIA ───── */ .eyebrow{ font-family:var(--font-label); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:2.5px; color:var(--blue-glow); margin:0 0 16px; display:block; } .section--ivory .eyebrow{color:var(--blue-deep)} /* Aperto medido no somostera.com: h1 72px/ls -.053em/lh .90 e h2 56px/ls -.018em/lh .90. A Plus Jakarta nao aguenta o mesmo tracking da Public Sans, entao o h1 para em -.042em. O leading .90 vem igual. */ .h-display{font-size:clamp(38px,5.6vw,64px);letter-spacing:-.042em;line-height:.9} /* headline e corpo nao podem encostar: 16px fixos abaixo de todo H2 de secao */ .h-section{font-size:clamp(29px,3.6vw,44px);letter-spacing:-.03em;line-height:.92;margin-bottom:16px} .h-card{font-size:clamp(20px,2vw,24px);letter-spacing:-.015em;line-height:1.12} .accent{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.005em;color:var(--blue-glow)} .accent--gold{color:var(--gold-light)} .section--ivory .accent{color:var(--blue-brand)} /* destaque do site atual: trecho grifado dentro do parágrafo */ mark{ background:rgba(11,111,216,.34); box-shadow:inset 0 0 0 1px rgba(58,191,255,.28); color:var(--white); border-radius:var(--radius-sm); padding:.06em .3em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--gray-300);max-width:62ch;text-wrap:pretty} .section--ivory .lead{color:var(--gray-700)} .section-head{max-width:800px;margin-bottom:56px} /* gramatica da Tera: eyebrow, headline e sub centralizados sobre o grid */ .section-head--center{margin-inline:auto;text-align:center} .section-head--center .lead{margin-inline:auto} /* ───── ORNAMENTOS ───── */ .strip{ height:3px; background:linear-gradient(90deg,transparent,var(--blue-brand) 18%,var(--blue-glow) 38%,var(--gold) 52%,var(--blue-glow) 66%,var(--blue-brand) 84%,transparent); } .rule{ height:1px;border:0;margin:0; background:linear-gradient(90deg,transparent,var(--navy-soft) 25%,var(--navy-soft) 75%,transparent); } /* ───── NAV ───── */ .nav{ position:sticky;top:0;z-index:60; background:rgba(7,11,20,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06); } .nav-inner{ height:var(--nav-h); display:flex;align-items:center;justify-content:space-between;gap:24px; } .nav-logo img{height:26px;width:auto} .nav-links{display:flex;align-items:center;gap:32px} .nav-links a{ font-family:var(--font-body); font-size:15px;font-weight:500;color:var(--gray-300); transition:color .2s var(--ease); } .nav-links a:hover{color:var(--white)} .nav-cta{ display:inline-flex;align-items:center;gap:8px; background:var(--blue-brand);color:var(--white)!important; font-family:var(--font-display);font-weight:700;font-size:14px; padding:11px 20px;border-radius:var(--radius); transition:background .2s var(--ease),transform .2s var(--ease); } .nav-cta:hover{background:var(--blue-light);transform:translateY(-1px)} .nav-toggle{ display:none;background:none;border:0;cursor:pointer;padding:8px; width:42px;height:42px; } .nav-toggle span{display:block;height:2px;background:var(--white);border-radius:2px;margin:5px 0;transition:.25s var(--ease)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ───── HERO ───── */ .hero{ position:relative; padding:clamp(76px,11vw,132px) 0 clamp(72px,9vw,108px); background: radial-gradient(ellipse 80% 60% at 50% -10%,rgba(11,111,216,.22),transparent 65%), radial-gradient(ellipse 50% 40% at 88% 88%,rgba(201,168,76,.10),transparent 62%), linear-gradient(180deg,#0A0E1A 0%,#0D1B2A 60%,#0A1628 100%); overflow:hidden; } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000,transparent 78%); mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000,transparent 78%); } /* hero centralizado, como no somostera.com: o eixo vertical do glow, do grid blueprint e do texto passa a ser o mesmo. */ .hero-inner{position:relative;z-index:1;max-width:940px;margin-inline:auto;text-align:center} .hero h1{margin-bottom:24px} .hero .lead{font-size:clamp(18px,1.9vw,22px);max-width:56ch;margin:0 auto 36px} .hero-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} /* ───── BOTÕES ───── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1; padding:15px 26px;border-radius:var(--radius);border:1px solid transparent; cursor:pointer;transition:.22s var(--ease); } .btn-gold{ background:var(--grad-gold); color:#1B1405; box-shadow:0 6px 22px rgba(201,168,76,.22); } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,.32)} /* CTA que leva ao Green Belt: Verde Sigma do produto */ .btn-green{ background:var(--grad-green); color:#04240F; box-shadow:0 6px 22px rgba(34,177,76,.24); } .btn-green:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(34,177,76,.36)} .btn-blue{background:var(--blue-brand);color:var(--white)} .btn-blue:hover{background:var(--blue-light);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.22)} .btn-ghost:hover{border-color:var(--blue-glow);background:var(--blue-soft)} .section--ivory .btn-ghost{color:var(--gray-900);border-color:rgba(20,28,40,.25)} .section--ivory .btn-ghost:hover{border-color:var(--blue-brand);background:rgba(11,111,216,.08)} .link-arrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-weight:700;font-size:15px; color:var(--blue-glow);transition:gap .2s var(--ease),color .2s var(--ease); } .link-arrow:hover{gap:14px;color:var(--white)} .section--ivory .link-arrow{color:var(--blue-brand)} .section--ivory .link-arrow:hover{color:var(--gray-900)} /* ───── PONTE ───── */ .bridge{text-align:center;max-width:900px;margin-inline:auto} .bridge .h-section{margin-bottom:16px} .bridge .lead{margin-inline:auto;margin-bottom:28px} /* ───── BANNER (Shark App) ───── */ .banner{ display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; border:1px solid rgba(201,168,76,.22); border-radius:var(--radius-lg); background:linear-gradient(120deg,rgba(11,111,216,.10),rgba(201,168,76,.06)); padding:32px 36px; } .banner .eyebrow{margin-bottom:8px} .banner-title{ font-family:var(--font-display);font-weight:700; font-size:clamp(19px,2.1vw,25px);letter-spacing:-.015em;line-height:1.2; color:var(--white);margin:0;max-width:34ch; } /* ───── MÉTRICAS ───── */ .metrics{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg);overflow:hidden; } .metric{background:var(--midnight);padding:40px 32px} .metric-num{ font-family:var(--font-mono);font-weight:500; font-size:clamp(40px,5vw,58px);line-height:1; color:var(--white);letter-spacing:-.03em;margin-bottom:10px; } .metric-num em{font-style:normal;color:var(--gold-light)} .metric-label{ font-family:var(--font-label);font-weight:600;font-size:14px; text-transform:uppercase;letter-spacing:2.5px;color:var(--blue-glow); margin-bottom:12px; } .metric-desc{font-size:15px;line-height:1.55;color:var(--gray-400);margin:0} /* Bloco de metricas em fundo claro, como o "Não é promessa. É métrica." do somostera.com. E a unica faixa clara do site: quebra o breu no meio da pagina sem tocar na marquee de logos, que e negativa. O destaque do numero vira azul-marca porque ouro sobre ivory nao passa contraste. */ .section--ivory .metrics{background:rgba(20,28,40,.12);border-color:rgba(20,28,40,.12)} .section--ivory .metric{background:var(--ivory)} .section--ivory .metric-num{color:var(--gray-900)} .section--ivory .metric-num em{color:var(--blue-brand)} .section--ivory .metric-label{color:var(--blue-deep)} .section--ivory .metric-desc{color:var(--gray-700)} /* ───── CLIENTES ───── */ .clients-label{ text-align:center;font-family:var(--font-label);font-weight:600; font-size:13px;text-transform:uppercase;letter-spacing:3px; color:var(--gray-400);margin-bottom:36px; } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:flex;width:max-content;animation:slide 44s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-group{display:flex;align-items:center;gap:64px;padding-right:64px} .marquee img{ height:38px;width:auto;opacity:.62; filter:grayscale(100%);transition:opacity .25s var(--ease); } .marquee img:hover{opacity:1} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Sem animacao, a faixa vira grade estatica. Precisa de mais do que parar o keyframe: o track e o dobro da largura util (dois grupos identicos) e o container corta. Some com o grupo duplicado, libera o overflow e tira a mascara lateral, que so faz sentido em rolagem. */ @media (prefers-reduced-motion:reduce){ .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none} .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center} .marquee-group[aria-hidden="true"]{display:none} .marquee-group{flex-wrap:wrap;justify-content:center;gap:30px 52px;padding-right:0} } /* ───── GRID DE CARDS ───── */ .grid{display:grid;gap:24px} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{ display:flex;flex-direction:column; background:linear-gradient(180deg,var(--navy),#0B1424); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg);overflow:hidden; transition:.28s var(--ease); } .card:hover{ transform:translateY(-4px); border-color:rgba(58,191,255,.32); box-shadow:0 18px 44px rgba(0,0,0,.44); } /* Marca do curso no topo do card. Substitui a foto de faixa: sem imagem de banco, mais respiro, no espirito do somostera.com. */ .card-brand{ display:flex;align-items:center; min-height:92px;padding:24px 24px 0; } .card-brand img{height:26px;width:auto;opacity:.94} /* MFV nao tem logo propria. Lockup tipografico nas fontes oficiais, na mesma altura das logos dos belts. Trocar quando a marca existir. */ .wordmark{display:block;line-height:1} .wordmark{ font-family:var(--font-display);font-weight:800;font-size:19px; letter-spacing:-.02em;color:var(--white); } .wordmark em{ display:block;margin-top:4px; font-family:var(--font-label);font-style:normal;font-weight:600; font-size:8.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--gray-400); } .card-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1;gap:12px} .card-meta{ font-family:var(--font-mono);font-size:12.5px;font-weight:500; letter-spacing:.04em;color:var(--gold-light); } /* card mais enxuto, na densidade do somostera.com (titulo 16px, corpo 14px). O Inter 300 nao aguenta o leading 1.2 da Public Sans, entao o corpo para em 1.5. */ .card h3{font-size:18px;letter-spacing:-.018em;line-height:1.18} .card p{font-size:14.5px;line-height:1.5;color:var(--gray-400);margin:0;flex:1} .card .link-arrow{font-size:14px;margin-top:4px} /* card de solução B2B (sem imagem) */ .card--solution{background:linear-gradient(180deg,#101C31,#0A1120)} .card--solution .card-body{padding:32px 28px;gap:16px} .card-badges{display:flex;flex-wrap:wrap;gap:7px} .card-badges .card-tag{align-self:auto} .card-tag--gold{color:var(--gold-light);border-color:rgba(201,168,76,.4);background:var(--gold-soft)} .card-tag{ display:inline-flex;align-self:flex-start; font-family:var(--font-label);font-weight:600;font-size:11px; text-transform:uppercase;letter-spacing:1.4px;color:var(--gray-300); border:1px solid var(--navy-soft);border-radius:var(--radius-pill); padding:4px 11px; } /* Kamon: brasao geometrico, azul-glow, canto 4px. A cor vem do token, o SVG usa currentColor (nao hardcodar hex fora do :root). */ .kamon{width:38px;height:38px;flex:none;color:var(--blue-glow)} /* ───── TRILHA · passos numerados (gramatica do somostera.com) ───── O filete no topo existe para a secao ler como sequencia e nao como quatro cards soltos: e o unico elemento que diz "nesta ordem". */ .path{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;margin:0;padding:0} .path-step{position:relative;padding-top:30px} .path-step::before{ content:"";position:absolute;top:0;left:0;right:-28px;height:1px; background:linear-gradient(90deg,var(--blue-brand),rgba(11,111,216,.18)); } .path-step:last-child::before{right:0;background:linear-gradient(90deg,var(--blue-brand),transparent)} .path-step::after{ content:"";position:absolute;top:-4px;left:0; width:9px;height:9px;border-radius:2px; background:var(--blue-glow);transform:rotate(45deg); } .path-num{ display:block;margin-bottom:14px; font-family:var(--font-mono);font-weight:500;font-size:14px; letter-spacing:.06em;color:var(--gold-light); } .path-step h3{font-size:19px;letter-spacing:-.018em;line-height:1.2;margin-bottom:10px} .path-sep{color:var(--gray-500);font-weight:400;margin:0 2px} .path-step p{font-size:14.5px;line-height:1.6;color:var(--gray-400);margin:0} /* ───── CHIPS ───── */ .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px} .chip{ font-family:var(--font-label);font-weight:600;font-size:13.5px; text-transform:uppercase;letter-spacing:1.6px;color:var(--gray-300); border:1px solid var(--navy-soft);border-radius:var(--radius-pill); padding:8px 16px;transition:.2s var(--ease); } .chip:hover{border-color:var(--blue-glow);color:var(--white);background:var(--blue-soft)} /* ───── AGENTES ELCI ───── */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:64px} .compare-col{ background:linear-gradient(180deg,#0E1626,#090D18); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg);padding:30px 28px; } .compare-col--now{ background:linear-gradient(180deg,#101C31,#0A1120); border-color:rgba(58,191,255,.28); } .compare-tag{ display:inline-flex;font-family:var(--font-label);font-weight:600;font-size:12px; text-transform:uppercase;letter-spacing:2px;color:var(--gray-400); border:1px solid var(--navy-soft);border-radius:var(--radius-pill); padding:5px 13px;margin-bottom:16px; } .compare-tag--gold{color:var(--gold-light);border-color:rgba(201,168,76,.4);background:var(--gold-soft)} .compare-col h3{font-size:clamp(19px,2vw,23px);line-height:1.18;margin-bottom:12px} .compare-col p{font-size:15px;line-height:1.6;color:var(--gray-400);margin:0} .phases{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .phases span{ font-family:var(--font-mono);font-size:12px;color:var(--gray-500); border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:6px 11px; } .agents-intro{ text-align:center;max-width:60ch;margin:0 auto 36px; font-size:16px;color:var(--gray-400); } .agents{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .agent{ background:linear-gradient(180deg,var(--navy),#0B1424); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg);padding:26px 24px; transition:.28s var(--ease); } .agent:hover{transform:translateY(-4px);border-color:rgba(58,191,255,.32);box-shadow:0 18px 44px rgba(0,0,0,.44)} .agent-num{ font-family:var(--font-mono);font-weight:500;font-size:26px; color:var(--gold-light);display:block;line-height:1;margin-bottom:12px; } .agent-phase{ font-family:var(--font-label);font-weight:600;font-size:12px; text-transform:uppercase;letter-spacing:2px;color:var(--blue-glow); display:block;margin-bottom:8px; } .agent h3{font-size:18px;letter-spacing:-.01em;line-height:1.2;margin-bottom:4px} .agent-role{ font-family:var(--font-serif);font-style:italic;font-size:17px; color:var(--gold-light);margin:0 0 10px; } .agent p:last-child{font-size:14.5px;line-height:1.55;color:var(--gray-400);margin:0} .closer{text-align:center;margin-top:56px} .closer-line{ font-family:var(--font-display);font-weight:800; font-size:clamp(22px,2.8vw,32px);letter-spacing:-.02em;line-height:1.15; color:var(--white);margin:0 0 8px; } .closer-sub{font-size:16px;color:var(--gray-400);margin:0 0 28px} /* ───── LISTA DE RECURSOS (Shark App) ───── */ .feats{display:grid;gap:11px;margin:26px 0 0} .feats li{ position:relative;padding-left:28px; font-size:15.5px;line-height:1.55;color:var(--gray-300); } .feats li::before{ content:"";position:absolute;left:2px;top:.55em; width:9px;height:9px;border-radius:2px; background:var(--blue-glow);transform:rotate(45deg); } .feats li strong{color:var(--white);font-weight:600} .feats-note{ margin:22px 0 0;font-size:14.5px;line-height:1.55;color:var(--gold-light); border-left:2px solid var(--gold);padding-left:14px; } .feats-note .star{margin-right:4px} /* ───── SPLIT (Shark App / Professor) ───── */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .split--top{align-items:start} .split--top .split-media{position:sticky;top:calc(var(--nav-h) + 32px)} .split-media img{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08)} .split-media .dmaic{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 46px rgba(0,0,0,.5))} .split-media--framed{position:relative} .split-media--framed img{position:relative;z-index:1} .split-media--framed::after{ content:"";position:absolute;inset:18px -18px -18px 18px; border:1px solid rgba(201,168,76,.45);border-radius:var(--radius-lg); pointer-events:none; } .roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .awards{display:grid;gap:16px;margin:24px 0 0;padding:0} .award{ display:flex;gap:14px;align-items:flex-start; border-left:2px solid var(--gold);padding-left:16px; } .award strong{color:var(--white);font-family:var(--font-display);font-weight:700;font-size:15.5px;display:block;margin-bottom:3px} .award span{font-size:15.5px;color:var(--gray-300);line-height:1.55} /* ───── CTA FINAL ───── */ .cta-band{ background: radial-gradient(ellipse 60% 100% at 50% 0%,rgba(11,111,216,.20),transparent 70%), var(--midnight-2); text-align:center; } .cta-band .h-section{margin-bottom:18px} .cta-band .lead{margin-inline:auto;margin-bottom:32px} /* ───── FOOTER ───── */ .footer{background:var(--midnight-2);padding:64px 0 32px;border-top:1px solid rgba(255,255,255,.06)} .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:56px;margin-bottom:40px} .footer-logo{height:36px;width:auto;margin-bottom:20px} .footer-tag{font-size:14.5px;color:var(--gray-400);line-height:1.65;max-width:42ch;margin-bottom:24px} .footer h3{ font-family:var(--font-label);font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:.28em;color:var(--gold-light); margin:0 0 16px;line-height:1.2; } .footer-links li{padding:6px 0} .footer-links a{font-size:14px;color:var(--gray-300);transition:color .2s var(--ease)} .footer-links a:hover{color:var(--gold-light)} .footer-cssc img{height:76px;width:auto;opacity:.85} /* ícones sociais */ .footer-social{display:flex;gap:12px;flex-wrap:wrap} .fs-icon{ width:44px;height:44px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.22); color:var(--gold-light); transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease); } .fs-icon svg{width:20px;height:20px} .fs-icon:hover{ transform:translateY(-3px); background:linear-gradient(135deg,rgba(232,160,32,.18),rgba(240,200,74,.12)); border-color:var(--gold); box-shadow:0 12px 28px -10px rgba(201,168,76,.5); } /* dados legais */ .footer-legal{ display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center; padding-top:26px;border-top:1px solid rgba(255,255,255,.06); font-size:13.5px;color:var(--gray-400); } .footer-legal .sep{color:var(--gray-700)} .footer-legal .cnpj{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em} .footer-top-link{display:flex;justify-content:center;margin:32px 0 4px} .footer-top-link a{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:var(--radius-pill); border:1px solid rgba(201,168,76,.22); font-family:var(--font-label);font-weight:700;font-size:11px; letter-spacing:.24em;text-transform:uppercase;color:var(--gray-400); transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease); } .footer-top-link a:hover{color:var(--gold-light);border-color:rgba(201,168,76,.55);transform:translateY(-2px)} .footer-top-link svg{width:13px;height:13px} .footer-bottom{ display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.05); font-family:var(--font-label);font-weight:600;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400); } .footer-bottom a:hover{color:var(--gold-light)} /* ───── PÁGINA LEGAL ───── */ .legal{padding:64px 0 96px;max-width:780px} .legal h2{font-size:clamp(22px,2.4vw,28px);margin:44px 0 14px} .legal h3{font-size:19px;margin:28px 0 10px;color:var(--gray-300);font-weight:700} .legal p,.legal li{font-size:16px;line-height:1.75;color:var(--gray-300)} .legal ul{list-style:disc;padding-left:22px;margin:0 0 1em} .legal li{margin-bottom:8px} .legal a{color:var(--blue-glow);text-decoration:underline;text-underline-offset:3px} .legal-updated{font-family:var(--font-mono);font-size:13px;color:var(--gray-500)} /* ============================================================ BLOCOS VINDOS DA LP BLACK BELT (lp-black-belt-PUBLICADA.html) Copiados como estao. So os tokens foram trocados pelos do brandbook institucional. Nao reescrever: se a LP mudar, refazer o copy daqui. ============================================================ */ /* ── auxiliares que os blocos usam ── */ .section-num{ position:absolute;top:24px;right:24px; font-family:var(--font-serif);font-style:italic;font-weight:300; font-size:clamp(120px,18vw,260px);line-height:1; color:transparent;-webkit-text-stroke:1px rgba(201,168,76,.18); pointer-events:none;user-select:none;z-index:0; } /* mesma escala do .h-section: as secoes coladas nao podem gritar mais alto que as secoes do proprio site */ .section-title{ font-family:var(--font-display);font-weight:800; font-size:clamp(29px,3.6vw,44px);line-height:.92;letter-spacing:-.03em; color:var(--white);margin:0 auto 16px;max-width:820px;text-align:center; } /* mesmo corpo do .lead */ .section-sub{ font-size:clamp(17px,1.6vw,20px);line-height:1.6; color:var(--gray-300);max-width:62ch; margin-inline:auto;text-align:center; } /* palavra-destaque em Cormorant italico = azul-glow, igual ao .accent. Ouro so quando o destaque for credencial/premium (brandbook, secao 3). */ .serif{ font-family:var(--font-serif);font-style:italic;font-weight:500; color:var(--blue-glow);letter-spacing:0;margin:0 4px; display:inline-block;font-size:1.08em; } /* divisor ornamental: filete AZUL com diamantes dourados nas pontas (brandbook, "Divisores Ornamentais") */ .ornament{ display:flex;align-items:center;justify-content:center;gap:16px; margin:0 auto;padding:40px 24px;width:100%;max-width:100%; } .ornament .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(58,191,255,.45),transparent)} .ornament .diamond{ width:10px;height:10px;background:var(--gold);transform:rotate(45deg); box-shadow:0 0 0 1px rgba(201,168,76,.35),0 0 24px rgba(201,168,76,.5); } .ornament .diamond.small{width:6px;height:6px;opacity:.6;box-shadow:0 0 0 1px rgba(201,168,76,.2),0 0 12px rgba(201,168,76,.3)} /* O conteudo e visivel por padrao. So esconde para animar quando o JS confirma que esta rodando (classe .js no ). Sem isso, uma falha no observer deixaria a secao inteira invisivel. */ .fade{opacity:1;transform:none} html.js .fade{opacity:0;transform:translateY(20px);transition:opacity .8s var(--easing),transform .8s var(--easing)} html.js .fade.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){html.js .fade{opacity:1;transform:none;transition:none}} /* ── MECANISMO / ELCI ── */ .mech{position:relative;background:linear-gradient(180deg,var(--midnight),var(--navy-deep));overflow:hidden} .mech-flow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px} .flow-card{ background:var(--grad-card);border:1px solid rgba(255,255,255,.06); border-left:1px solid var(--gold); padding:32px;border-radius:var(--r-card); } .flow-card .flow-kicker{ max-width:none;line-height:1; font-family:var(--font-label);font-weight:700;font-size:12px; letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 16px; } .flow-card h3{ font-family:var(--font-display);font-weight:700;font-size:24px; letter-spacing:-.02em;line-height:1.65;color:var(--white);margin:0 0 16px; } .flow-card p{color:var(--gray-300);font-size:15px;line-height:1.6;margin-bottom:16px;max-width:62ch} .flow-steps{display:flex;flex-wrap:wrap;gap:8px} .flow-steps span{ font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.22em; text-transform:uppercase;padding:6px 12px; background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.25); border-radius:var(--r-pill);color:var(--gold-light); } .elci-art{ display:block;margin:48px auto 8px;max-width:1080px; border-radius:var(--r-card);overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.18); background:radial-gradient(ellipse at center,rgba(201,168,76,.06),transparent 70%); } .elci-art img{display:block;width:100%;height:auto} .elci-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:24px} .elci-card{ background:linear-gradient(180deg,var(--navy),var(--navy-deep)); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-card);padding:24px; position:relative;overflow:hidden; transition:transform .3s var(--easing),border-color .3s var(--easing); } .elci-card:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.35)} .elci-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5; } /* label de fase = Rajdhani caixa alta espacada (o mono e reservado a numero/dado) */ .elci-card .phase{ display:inline-block;font-family:var(--font-label);font-size:12px;font-weight:600; color:var(--blue-glow);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px; } .elci-card h4{ font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em; line-height:1.65;color:var(--white);margin:0 0 6px; } .elci-card .role{ font-family:var(--font-serif);font-style:italic;font-weight:500; color:var(--blue-glow);font-size:21px;margin-bottom:16px;line-height:1.3; } .elci-card p{color:var(--gray-300);font-size:14.5px;line-height:1.6;margin:0} .elci-card .num{ position:absolute;top:14px;right:18px; font-family:var(--font-serif);font-style:italic;font-weight:300; font-size:42px;color:transparent;-webkit-text-stroke:1px rgba(201,168,76,.25);line-height:1; } .mech-highlight{ margin-top:56px;padding:40px;border-radius:var(--radius-lg); background:radial-gradient(circle at 20% 0%,rgba(232,160,32,.18),transparent 60%),var(--grad-card); border:1px solid rgba(201,168,76,.3);text-align:center; } .mech-highlight p{ font-family:var(--font-serif);font-style:italic; font-size:clamp(20px,2.3vw,28px);line-height:1.4;color:var(--ivory);margin:0; } .mech-highlight p b{color:var(--gold-light);font-weight:500} /* ── BÔNUS · SHARK APP ── */ .shark{ background: radial-gradient(ellipse 90% 60% at 30% 30%,rgba(11,111,216,.10),transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%,rgba(232,160,32,.10),transparent 60%), var(--midnight); position:relative;overflow:hidden; } .shark::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(rgba(140,150,170,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,150,170,.06) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 80%); } .shark-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;margin-top:32px;position:relative;z-index:1} .shark-img{position:relative;text-align:center} .shark-img img{ width:100%;max-width:560px;height:auto;display:block;margin:0 auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(0 0 80px rgba(11,111,216,.18)); } .shark-img::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:80%;height:80%;border-radius:50%; background:radial-gradient(circle,rgba(11,111,216,.18),transparent 70%); z-index:-1;pointer-events:none; } .shark-bonus-flag{ display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:var(--radius-pill); background:var(--grad-gold);color:var(--midnight); font-family:var(--font-label);font-weight:800;font-size:11px;letter-spacing:.28em; text-transform:uppercase;margin-bottom:18px;box-shadow:0 12px 28px -8px rgba(232,160,32,.5); } .shark-bonus-flag .star{font-size:14px} .shark-info h2{ font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.6vw,44px); line-height:1.12;letter-spacing:-.025em;color:var(--white);margin-bottom:14px; } .shark-info .lead{font-size:16px;color:var(--gray-300);line-height:1.65;margin-bottom:24px;max-width:560px} .shark-kicker{ font-family:var(--font-serif);font-style:italic;font-weight:400; font-size:clamp(19px,2vw,23px)!important;line-height:1.35; color:var(--blue-glow)!important;margin-bottom:16px!important; } .shark-info .lead b{color:var(--white);font-weight:600} .shark-features{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:24px} .shark-feat{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--gray-300);line-height:1.5} /* marcador = diamante azul, o mesmo vocabulario das listas do site */ .shark-feat::before{ content:"";flex:none;margin-top:.42em;width:9px;height:9px;border-radius:2px; background:var(--blue-glow);transform:rotate(45deg); } .shark-feat b{color:var(--white);font-weight:600} .shark-included{ display:inline-flex;align-items:center;gap:10px;padding:14px 20px; background:rgba(201,168,76,.06);border:1px dashed rgba(201,168,76,.4);border-radius:var(--radius); font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold-light); } .shark-included svg{width:20px;height:20px;color:var(--gold-light)} /* ── CTA duplo das duas secoes ── */ .dual-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px} .mech-highlight .dual-cta{justify-content:center} /* botao e um so no site inteiro: mesma forma e mesmo raio do .btn do hero. (a pilula da LP criava duas formas de CTA na mesma pagina) */ .btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.22)} .btn-outline:hover{border-color:var(--blue-glow);background:var(--blue-soft);color:var(--white);transform:translateY(-2px)} .btn-arrow::after{content:"\2192";font-weight:400;transition:transform .2s var(--easing)} .btn-arrow:hover::after{transform:translateX(4px)} /* ── responsivo dos blocos da LP ── */ @media (max-width:1000px){ .shark-grid{grid-template-columns:1fr;gap:36px} } @media (max-width:900px){ .mech-flow{grid-template-columns:1fr} } @media (max-width:880px){ .section-num{font-size:clamp(80px,14vw,140px)} } @media (max-width:760px){ .elci-art{max-width:420px;margin:32px auto 8px} } @media (max-width:640px){ .section-num{-webkit-text-stroke:1px rgba(201,168,76,.32);text-shadow:0 0 24px rgba(201,168,76,.10);font-size:clamp(60px,16vw,96px)} .flow-card{padding:24px} .mech-highlight{padding:28px 22px} } @media (max-width:560px){ .shark-features{grid-template-columns:1fr} } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr)} .agents{grid-template-columns:repeat(2,1fr)} .path{grid-template-columns:repeat(2,1fr)} .path-step:nth-child(2)::before{right:0;background:linear-gradient(90deg,var(--blue-brand),transparent)} .compare{grid-template-columns:1fr} .split{grid-template-columns:1fr;gap:40px} .split--top .split-media{position:static} .split-media{order:-1} /* moldura do retrato: recuo menor para nao encostar na borda da tela */ .split-media--framed::after{inset:12px -12px -12px 12px} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .footer-grid > :first-child{grid-column:1 / -1} } @media (max-width:800px){ .section{padding:76px 0} .section--tight{padding:56px 0} .nav-toggle{display:block} .nav-links{ position:absolute;top:var(--nav-h);left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--midnight-2); border-bottom:1px solid rgba(255,255,255,.08); padding:8px 24px 20px; display:none; } .nav-links.is-open{display:flex} .nav-links a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.05)} .nav-cta{margin-top:14px;justify-content:center;border-bottom:0!important} .metrics{grid-template-columns:1fr} .section-head{margin-bottom:40px} } @media (max-width:600px){ body{font-size:16px} .section{padding:60px 0} .grid-4,.grid-2{grid-template-columns:1fr} .agents{grid-template-columns:1fr} .path{grid-template-columns:1fr;gap:32px} .path-step::before,.path-step:nth-child(2)::before{right:0;background:linear-gradient(90deg,var(--blue-brand),transparent)} .banner{padding:26px 22px} .hero-actions .btn{width:100%} .metric{padding:30px 24px} .card-body{padding:22px} .footer-grid{grid-template-columns:1fr;gap:32px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px} .marquee img{height:30px} .marquee-group{gap:44px;padding-right:44px} } @media (max-width:380px){ .h-display{font-size:32px} .chips{gap:8px} .chip{font-size:12px;padding:7px 13px} }