/* ============ FONTES (auto-hospedadas) ============ Antes vinham do fonts.googleapis.com com o truque media="print"+onload. Isso custava duas coisas: a fonte chegava DEPOIS da primeira pintura e empurrava o
para baixo (CLS medido de 0,32 na trace, contra o limite de 0,10 do Core Web Vitals), e o IP de cada visitante ia para o Google, o que destoa da politica de privacidade publicada. Sao os mesmos arquivos que o Google servia (subset latin, que cobre o portugues inteiro), agora no proprio dominio e com preload no . As duas familias sao fontes variaveis: um arquivo cobre toda a faixa de peso. */ @font-face{ font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:500 700; font-display:swap; src:url(assets/fonts/plus-jakarta-sans-latin-var.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:400 600; font-display:swap; src:url(assets/fonts/inter-latin-var.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; } /* ============================================================ Axin · styles.css Tokens do brandbook v2.1 (rebrand 2026-08-04): navy #02112E · verde #5FC98F · grafite #25282A · off-white #F8F8F6 Fontes: Plus Jakarta Sans (display 500/600/700) + Inter (corpo 400/500/600) Raios: 6 tags · 10 botões · 14 cards · 20 painéis · 28 lâminas · pill selos Ritmo: lâminas navy e claras alternadas; um acento verde por lâmina. ============================================================ */ :root{ /* núcleo */ --navy:#02112E; --navy-2:#15233E; --green:#5FC98F; --green-strong:#1FA567; /* verde legível sobre claro · hover */ --green-ink:#188150; /* verde AA p/ texto pequeno sobre claro */ --grafite:#25282A; --white:#fff; --offwhite:#F8F8F6; /* neutros */ --gray:#677078; --gray-on-bg:#5B636B; --border:#D5DBE3; --bg:#F4F6FA; /* funcionais */ --error:#E5484D; /* sobre navy */ --on-navy:#F8F8F6; --on-navy-dim:rgba(255,255,255,.72); --on-dark-border:rgba(255,255,255,.14); --glass:rgba(255,255,255,.06); /* tints (10-12%) */ --tint-navy:rgba(2,17,46,.06); --tint-accent:rgba(95,201,143,.12); --tint-success:rgba(31,165,103,.12); /* aliases legados (páginas secundárias + calculadora-fgc) */ --ink:var(--navy); --bg-soft:var(--bg); --navy-deep:var(--navy); --serif:"Plus Jakarta Sans",system-ui,sans-serif; /* raio */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* sombra tingida de navy */ --sh-sm:0 1px 2px rgba(2,17,46,.06), 0 1px 3px rgba(2,17,46,.08); --sh-md:0 4px 12px rgba(2,17,46,.10); --sh-lg:0 12px 32px rgba(2,17,46,.14); /* motion */ --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:120ms; --dur:170ms; --dur-slow:240ms; /* grid */ --maxw:1080px; --pad:clamp(20px,5vw,48px); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px} body{margin:0;background:var(--bg);color:var(--grafite); font-family:"Inter",system-ui,"Segoe UI",sans-serif;font-size:16.5px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--navy); line-height:1.12;letter-spacing:-.02em;text-wrap:balance;margin:0;font-weight:700} p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--green);color:var(--navy)} :focus-visible{outline:2px solid var(--green-ink);outline-offset:3px;border-radius:var(--r-xs)} .skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:var(--white);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;font-size:14px} .skip-link:focus{left:0} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)} .chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);background:var(--tint-accent);padding:5px 12px;border-radius:var(--r-pill)} .numtag{display:inline-flex;align-items:center;font-family:"Plus Jakarta Sans";font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--green-ink);background:var(--tint-accent);padding:5px 11px;border-radius:var(--r-pill)} .serif-em{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit} /* botões · raio 10px (sm), verde = acento herói */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:600;font-size:16px;border-radius:var(--r-sm); padding:14px 26px;transition:transform var(--dur) var(--ease),box-shadow var(--dur-slow) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);cursor:pointer;border:1px solid transparent} .btn:active{transform:scale(.98)} .btn-green{background:var(--green);color:var(--navy)} .btn-green:hover{background:var(--green-strong);transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,17,46,.18)} .btn-primary{background:var(--navy);color:var(--white)} .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md)} .btn-ghost{background:transparent;color:var(--navy);border-color:rgba(2,17,46,.25)} .btn-ghost:hover{border-color:var(--navy);background:var(--white)} .final .btn-ghost,.closing .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)} .final .btn-ghost:hover,.closing .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .link{color:var(--green-ink);font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:gap var(--dur) var(--ease)} .link:hover{gap:11px} .cta-row{display:flex;gap:14px;flex-wrap:wrap} /* tarja regulatória (acima do menu) */ .tarja{background:var(--navy);color:var(--on-navy-dim);text-align:center;font-size:12px;letter-spacing:.06em;padding:7px var(--pad)} .tarja b{color:var(--on-navy);font-weight:600} /* nav */ header.nav{position:sticky;top:0;z-index:50;background:rgba(244,246,250,.86);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),background var(--dur-slow) var(--ease)} header.nav.scrolled{border-color:var(--border);box-shadow:var(--sh-sm);background:rgba(244,246,250,.94)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px} .nav-in .logo{height:32px;width:auto} .nav-links{display:flex;gap:26px;align-items:center} .nav-links a{color:var(--grafite);font-size:15px;font-weight:500;opacity:.85;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)} .nav-links a:hover{opacity:1;color:var(--navy)} .nav-links a[aria-current="page"]{opacity:1;font-weight:600;color:var(--navy)} .nav-drop{position:relative} .nav-drop-btn{display:flex;align-items:center;gap:5px;font-family:inherit;color:var(--grafite);font-size:15px;font-weight:500;opacity:.85;background:none;border:none;padding:0;cursor:pointer;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)} .nav-drop-btn:hover{opacity:1;color:var(--navy)} .nav-drop-btn .chev{width:13px;height:13px;flex:none;transition:transform var(--dur-slow) var(--ease)} .nav-drop.open .nav-drop-btn{opacity:1;color:var(--navy)} .nav-drop.open .nav-drop-btn .chev{transform:rotate(180deg)} .nav-drop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-6px);width:300px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease);z-index:60} .nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .nav-drop-menu a{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:var(--r-sm);opacity:1} .nav-drop-menu a:hover{background:var(--bg);opacity:1} .nav-drop-menu .ico{flex:none;width:34px;height:34px;border-radius:var(--r-sm);background:var(--tint-accent);color:var(--green-ink);display:flex;align-items:center;justify-content:center} .nav-drop-menu .tx b{display:block;font-size:14px;color:var(--navy);font-weight:600} /* ferramenta própria: o lockup entra no lugar do título e a linha vira bloco de destaque */ .nav-drop-menu .tx b .marca{height:26px;width:auto;display:inline-block;vertical-align:middle} .nav-drop-menu a:has(.marca){background:var(--tint-navy);border:1px solid rgba(2,17,46,.07);margin-bottom:4px} .nav-drop-menu a:has(.marca):hover{background:rgba(2,17,46,.10)} .nav-drop-menu .tx b .selo{display:inline-block;margin-left:7px;vertical-align:middle;padding:1px 6px;border:1px solid rgba(95,201,143,.45);border-radius:var(--r-pill);background:var(--tint-accent);color:var(--green-ink);font-style:normal;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase} .nav-drop-menu .tx span{display:block;font-size:12.5px;color:var(--gray);margin-top:2px;line-height:1.4;font-weight:400} .nav-right{display:flex;align-items:center;gap:10px} .nav-cta{background:var(--green);color:var(--navy);font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:var(--r-sm);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)} .nav-cta:hover{transform:translateY(-1px);background:var(--green-strong)} .nav-toggle{display:none;flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--white);align-items:center;justify-content:center;cursor:pointer;padding:0} .nav-toggle span{position:relative;display:block;width:16px;height:2px;background:var(--navy);border-radius:2px;transition:background var(--dur) var(--ease)} .nav-toggle span:before,.nav-toggle span:after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--navy);border-radius:2px;transition:transform var(--dur) var(--ease)} .nav-toggle span:before{top:-6px} .nav-toggle span:after{top:6px} header.nav.open .nav-toggle span{background:transparent} header.nav.open .nav-toggle span:before{transform:translateY(6px) rotate(45deg)} header.nav.open .nav-toggle span:after{transform:translateY(-6px) rotate(-45deg)} @media(max-width:860px){ .nav-toggle{display:flex} .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;background:var(--white); border-bottom:1px solid var(--border);box-shadow:var(--sh-md);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s var(--ease),visibility .3s var(--ease)} header.nav.open .nav-links{max-height:640px;visibility:visible;overflow-y:auto} .nav-links a{padding:14px var(--pad);border-top:1px solid var(--border);opacity:1} .nav-drop-btn{width:100%;justify-content:space-between;padding:14px var(--pad);border-top:1px solid var(--border);opacity:1} .nav-drop-menu{position:static;transform:none;width:auto; max-height:0;overflow:hidden;box-shadow:none;border:none;border-radius:0;padding:0;background:var(--bg);transition:max-height .25s var(--ease)} .nav-drop.open .nav-drop-menu{max-height:440px;padding:4px var(--pad) 12px;transform:none} .nav-drop-menu a:hover{background:transparent} } /* base de seção */ section{padding:clamp(72px,9.5vw,118px) 0} .sec-head{max-width:62ch} .sec-head.center{margin-inline:auto;text-align:center} .sec-head h2{font-size:clamp(28px,4vw,44px);margin-top:14px} .sec-head p{color:var(--gray);margin-top:16px;font-size:clamp(16.5px,1.9vw,18.5px);max-width:58ch} .sec-head.center p{margin-inline:auto} /* variante sobre navy */ .on-navy .sec-head h2,.on-navy h2{color:var(--white)} .on-navy .sec-head p{color:var(--on-navy-dim)} .on-navy .eyebrow{color:var(--green)} /* ============ FAIXA 1 · HERO (lâmina navy) ============ */ .hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--on-navy)} .hero:after{content:"";position:absolute;z-index:-1;right:-7%;bottom:-24%;width:min(44vw,480px);aspect-ratio:1; background:var(--green);opacity:.08;border-radius:var(--r-xl);transform:rotate(18deg)} .hero:before{content:"";position:absolute;z-index:-1;left:-10%;top:-30%;width:min(38vw,420px);aspect-ratio:1; background:var(--green);opacity:.05;border-radius:var(--r-xl);transform:rotate(-14deg)} .hero-in{text-align:center;max-width:900px;margin-inline:auto;padding:clamp(78px,11vw,138px) 0 clamp(72px,10vw,124px)} .hero h1{color:var(--white);font-size:clamp(36px,5.6vw,62px);max-width:20ch;margin-inline:auto} .hero .lede{margin:24px auto 0;max-width:56ch;font-size:clamp(17px,2vw,19.5px);color:var(--on-navy-dim)} .hero .cta-row{justify-content:center;margin-top:38px} .hero .btn{font-size:17px;padding:16px 32px} .sec-more{text-align:center;margin-top:30px} /* ============ FAIXA 2 · A CONSULTORIA (lâmina clara) ============ */ .svc{background:var(--white)} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px} .svc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--sh-sm); display:flex;flex-direction:column;gap:12px;transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)} .svc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} .svc-card h3{font-size:18.5px;font-weight:600;line-height:1.3} .svc-card p{color:var(--gray);font-size:14.5px;line-height:1.55} .svc-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .svc-card li{display:flex;gap:8px;align-items:flex-start;color:var(--gray);font-size:14.5px;line-height:1.5} .svc-card li:before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--green-ink)} /* link do card para a página da especialidade: margin-top:auto alinha os três na mesma linha de base, independentemente de quantos itens tem cada lista */ .svc-more{margin-top:auto;padding-top:6px;align-self:flex-start;display:inline-flex; align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--green-ink); text-decoration:none;transition:gap var(--dur) var(--ease)} .svc-more:hover,.svc-more:focus-visible{gap:11px;text-decoration:underline} .svc-more svg{flex:none} /* com 3 cards, cair em 2 colunas deixaria um órfão na segunda linha */ @media(max-width:1020px){.svc-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}} /* ============ FAIXA 3 · INDEPENDÊNCIA (lâmina navy) ============ */ .vs{background:var(--navy);color:var(--on-navy)} .vs-panel{margin-top:52px;background:var(--white);border-radius:var(--r-xl);padding:clamp(20px,3vw,36px);box-shadow:var(--sh-lg)} .vs-head{display:grid;grid-template-columns:1.05fr 1.2fr 1.2fr;gap:12px;padding:0 4px 14px} .vs-head .h{font-family:"Plus Jakarta Sans";font-weight:700;font-size:15px;color:var(--navy)} .vs-head .h.axin{display:flex;align-items:center;gap:8px} .vs-head .h.trad{color:var(--gray);font-weight:600} .vs-row{display:grid;grid-template-columns:1.05fr 1.2fr 1.2fr;gap:12px;padding:14px 4px;border-top:1px solid var(--border);align-items:stretch} .vs-row .c-lbl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);align-self:center} .vs-row .c-axin{background:var(--tint-success);border:1px solid rgba(31,165,103,.28);border-radius:var(--r-sm);padding:12px 14px;font-size:14.5px;font-weight:600;color:var(--navy);display:flex;gap:10px;align-items:flex-start} .vs-row .c-axin svg{flex:none;color:var(--green-ink);margin-top:2px} .vs-row .c-trad{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-size:14.5px;color:var(--gray);display:flex;align-items:flex-start} .vs-tag{display:none} @media(max-width:760px){ .vs-head{display:none} .vs-row{grid-template-columns:1fr;gap:8px;padding:16px 0} .vs-row .c-lbl{align-self:start;margin-bottom:2px} .vs-row .c-axin{flex-direction:column;gap:6px} .vs-row .c-trad{flex-direction:column;gap:6px} .vs-tag{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase} .vs-tag.t-axin{color:var(--green-ink)} .vs-tag.t-trad{color:var(--gray);font-weight:600} } .vs-args{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px} .vs-arg{background:var(--glass);border:1px solid var(--on-dark-border);border-radius:var(--r-md);padding:20px 22px} .vs-arg b{display:block;font-family:"Plus Jakarta Sans";font-weight:600;font-size:15.5px;color:var(--white);margin-bottom:6px} .vs-arg p{color:var(--on-navy-dim);font-size:14px;line-height:1.55} @media(max-width:820px){.vs-args{grid-template-columns:1fr}} .vs .cta-row{justify-content:center;margin-top:36px} /* ============ FAIXA 4 · VALOR DO CONSULTOR (lâmina clara) ============ */ .value{background:var(--bg)} .val-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px} .val-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:26px 28px;box-shadow:var(--sh-sm)} .val-item .vico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--tint-navy);color:var(--navy);display:grid;place-items:center;margin-bottom:14px} .val-item h3{font-size:18px;font-weight:600} .val-item p{color:var(--gray);font-size:14.5px;margin-top:8px;line-height:1.6} /* cinco cards com o mesmo peso: o ultimo fecha a grade de duas colunas */ .val-grid .val-item:last-child{grid-column:1/-1} @media(max-width:760px){.val-grid .val-item:last-child{grid-column:auto}} @media(max-width:760px){.val-grid{grid-template-columns:1fr}} /* bloco de evidência · painel navy com barras */ .evidence{margin-top:22px;background:linear-gradient(160deg,var(--navy),var(--navy-2));border-radius:var(--r-xl);padding:clamp(26px,4vw,44px);color:var(--on-navy);box-shadow:var(--sh-lg)} .ev-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,52px);align-items:center} .evidence h3{color:var(--white);font-size:clamp(21px,2.6vw,26px);font-weight:700;line-height:1.25} .evidence .ev-sub{color:var(--on-navy-dim);font-size:15px;margin-top:14px;line-height:1.65} .ev-bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3vw,34px);min-height:230px;padding-top:8px} .ev-bar{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;max-width:110px} .ev-bar .v{font-family:"Plus Jakarta Sans";font-weight:700;font-size:clamp(18px,2.2vw,23px);color:var(--green);font-variant-numeric:tabular-nums} .ev-bar .bar{width:100%;background:var(--green);border-radius:var(--r-sm) var(--r-sm) 4px 4px} .ev-bar .k{font-size:12px;color:var(--on-navy-dim);text-align:center;line-height:1.35} .ev-src{margin-top:26px;padding-top:18px;border-top:1px solid var(--on-dark-border)} .ev-src summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--on-navy-dim)} .ev-src summary::-webkit-details-marker{display:none} .ev-src summary .ic{flex:none;width:16px;height:16px;position:relative} .ev-src summary .ic:before,.ev-src summary .ic:after{content:"";position:absolute;background:var(--green);border-radius:2px} .ev-src summary .ic:before{top:7px;left:1px;right:1px;height:1.5px} .ev-src summary .ic:after{left:7px;top:1px;bottom:1px;width:1.5px;transition:opacity var(--dur-slow) var(--ease)} .ev-src[open] summary .ic:after{opacity:0} .ev-note{margin-top:14px;font-size:11.5px;line-height:1.65;color:var(--on-navy-dim)} .ev-note cite{font-style:italic} .ev-note a{color:var(--green);text-decoration:underline;text-underline-offset:2px} .ev-note a:hover{color:var(--white)} .ev-disc{margin-top:24px;padding-left:14px;border-left:2px solid var(--green);font-size:13.5px;line-height:1.6;color:var(--on-navy)} @media(max-width:820px){.ev-grid{grid-template-columns:1fr}.ev-bars{min-height:190px}} .value .cta-row{justify-content:center;margin-top:36px} /* ============ FAIXA 5 · MÉTODO (lâmina clara) ============ */ .method{background:var(--white)} .msteps{--mgap:clamp(20px,3vw,34px);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;gap:var(--mgap);margin-top:56px;position:relative} .msteps:before{content:"";position:absolute;top:17px;left:18px;right:calc((100% - 2*var(--mgap))/3 - 18px);height:2px;background:var(--border);border-radius:2px} .mstep{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start} .mstep .mnum{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-pill); background:var(--navy);color:var(--white);font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px;box-shadow:0 0 0 6px var(--white)} .mstep h3{font-size:19.5px;font-weight:600;margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .mstep .mbadge{display:inline-flex;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--green-ink);background:var(--tint-accent);padding:5px 11px;border-radius:var(--r-pill)} .mstep p{color:var(--gray);font-size:15px;margin-top:10px;line-height:1.68;max-width:44ch} .mstep p b{color:var(--navy);font-weight:600} @media(max-width:760px){ .msteps{grid-template-columns:1fr;gap:34px;grid-template-rows:none} .mstep{display:block;grid-row:auto} .msteps:before{top:8px;bottom:8px;left:17px;right:auto;width:2px;height:auto} .mstep{padding-left:56px} .mstep .mnum{position:absolute;left:0;top:0} .mstep h3{margin-top:0} } .method .mfoot{text-align:center;margin-top:44px;color:var(--gray);font-size:15.5px} .method .cta-row{justify-content:center;margin-top:20px} /* ============ CARROSSEL (componente compartilhado: cases + mídia) ============ */ .carousel{margin-top:52px} .carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .carousel-track::-webkit-scrollbar{display:none} .carousel-track>*{scroll-snap-align:start;flex:0 0 100%;min-width:0} .carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px} .car-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--white);color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),opacity var(--dur) var(--ease)} .car-btn:hover:not(:disabled){border-color:var(--navy);transform:translateY(-1px)} .car-btn:disabled{opacity:.32;cursor:default;pointer-events:none} /* O ponto visivel tem 8px, mas WCAG 2.5.8 (AA) pede alvo de toque de 24x24 sem sobreposicao entre vizinhos. O botao carrega os 24px e o ::before desenha o ponto: a area clicavel cresce sem o ponto mudar de tamanho. gap:0 porque o proprio botao ja da o espacamento de 24px de passo entre um alvo e o seguinte. */ .car-dots{display:flex;align-items:center;gap:0} .car-dots .dot{width:24px;height:24px;display:grid;place-items:center;background:none;border:none;padding:0;cursor:pointer} .car-dots .dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)} .car-dots .dot.active:before{background:var(--green-strong);transform:scale(1.3)} /* ============ FAIXA 6 · CASES (lâmina clara) ============ */ .cases{background:var(--bg)} .case-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,44px);box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:14px} .case-card .cs-tag{align-self:flex-start} .case-card h3{font-size:19.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;padding-bottom:16px;border-bottom:1px solid var(--border)} /* cada bloco ganha rótulo com ícone e uma separação leve, para o olho achar o ritmo */ .cs-k{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:6px} .cs-k:before{content:"";flex:none;width:14px;height:14px;background:currentColor; -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .cs-b+.cs-b{padding-top:14px;border-top:1px solid var(--border)} .cs-b p{color:var(--gray);font-size:14px;line-height:1.6} .cs-b p b,.cs-res p b{color:var(--navy);font-weight:600} .case-card>div:nth-of-type(1) .cs-k{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")} .case-card>div:nth-of-type(2) .cs-k{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.5 18a1.7 1.7 0 001.5 2.6h16a1.7 1.7 0 001.5-2.6L13.7 4.2a1.7 1.7 0 00-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")} .case-card>div:nth-of-type(3) .cs-k{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h11M10 12h11M10 18h11'/%3E%3Cpath d='M3 6l1.4 1.4L7.2 4.6M3 12l1.4 1.4 2.8-2.8M3 18l1.4 1.4 2.8-2.8'/%3E%3C/svg%3E")} .cs-res{background:var(--tint-success);border:1px solid rgba(31,165,103,.25);border-radius:var(--r-md);padding:16px 18px;margin-top:auto; --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E")} .cs-res .cs-k{color:var(--green-ink)} .cs-res p{color:var(--navy);font-size:14.5px;font-weight:500;line-height:1.58} .cases .cta-row{justify-content:center;margin-top:36px} /* ============ FAIXA 7 · DEPOIMENTOS ============ */ .tms{background:var(--bg)} .tms.on-navy{background:var(--navy)} .tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px} .tm{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-sm); transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)} .tm:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .tms.on-navy .tm{border-color:transparent} .tm .stars{display:flex;gap:3px;margin-bottom:16px} .tm .stars svg{color:var(--green-strong)} /* frase de destaque no topo do card: dá o resumo antes do depoimento inteiro */ .tm-pull{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:600;font-size:clamp(17px,1.9vw,19.5px); line-height:1.36;letter-spacing:-.01em;color:var(--navy);margin:0 0 16px;padding-bottom:16px; border-bottom:1px solid var(--border);text-wrap:balance} .tm blockquote{margin:0;font-size:14.5px;color:var(--gray);line-height:1.62} .tm .who{margin-top:24px;display:flex;align-items:center;gap:12px} .tm .ava{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:"Plus Jakarta Sans";font-weight:700;font-size:16px;flex:none;overflow:hidden} .tm .ava img{width:100%;height:100%;object-fit:cover;border-radius:50%} .tm .who b{font-family:"Plus Jakarta Sans";font-size:15px;display:block;color:var(--navy)} .tm .who span{color:var(--gray);font-size:13px} @media(max-width:820px){.tm-grid{grid-template-columns:1fr}} .tm-grid.duo{max-width:880px;margin-inline:auto;grid-template-columns:repeat(2,1fr)} @media(max-width:820px){.tm-grid.duo{grid-template-columns:1fr}} /* três depoimentos: a assinatura ancora no rodapé mesmo com textos de tamanhos diferentes */ .tm-grid.trio .tm{display:flex;flex-direction:column} .tm-grid.trio .tm .who{margin-top:auto;padding-top:20px} @media(max-width:1080px){.tm-grid.trio{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.tm-grid.trio{grid-template-columns:1fr}} .tms-note{text-align:center;margin-top:30px;font-size:13px;color:var(--gray)} .tms.on-navy .tms-note{color:var(--on-navy-dim)} /* ============ FAIXA 8 · MÍDIA ============ */ .media{background:var(--white)} .press-card{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg); padding:28px;box-shadow:var(--sh-sm);transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)} .press-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--green)} .press-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} /* marca da publicação + editoria, com a barra separando os dois níveis */ .press-brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px; border-left:3px solid var(--green-strong);padding:2px 0 2px 10px} .press-brand .pb-logo{height:18px;width:auto;display:block} .press-brand span{font-family:"Inter";font-weight:500;font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--gray);display:block} .press-ext{color:var(--gray);flex:none;margin-top:2px;transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)} .press-card:hover .press-ext{color:var(--green-ink);transform:translate(2px,-2px)} .press-card h3{font-size:19.5px;font-weight:600;line-height:1.32} .press-card p{color:var(--gray);font-size:14.5px;line-height:1.6} .press-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:12.5px;color:var(--gray)} .press-meta b{color:var(--grafite);font-weight:600} /* ============ FAIXA 9 · INSTITUIÇÕES (integração operacional) ============ */ .instits{background:var(--bg)} .marquee{margin-top:48px;overflow:hidden} .marquee__vp{display:flex;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} /* a emenda A→B só fica uniforme se o espaçamento viver DENTRO da faixa: com gap + justify-content a última peça não carrega espaço, e o encontro Genial→BTG destoa. */ .marquee__track{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-start; animation:marq 32s linear infinite;will-change:transform} .marquee:hover .marquee__track,.marquee.paused .marquee__track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}} .marquee .wm{display:inline-flex;align-items:center;white-space:nowrap;margin-right:clamp(2.4rem,6vw,5rem)} .marquee .wm img{height:57px;width:auto;display:block} .mnote{margin:26px auto 0;padding-inline:var(--pad);text-align:center;font-size:12.5px;line-height:1.55;color:var(--gray);max-width:104ch} .wrap > .mnote{padding-inline:0} @media(prefers-reduced-motion:reduce){ .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;gap:clamp(2.4rem,6vw,5rem)} .marquee__track .wm{margin-right:0} .marquee__track[data-dup]{display:none} .marquee__vp{-webkit-mask-image:none;mask-image:none;overflow:visible} } /* ============ FAIXA 10 · EQUIPE ============ */ /* sócios · card de perfil (home #equipe + equipe.html) estrutura fixa: retrato + nome/cargo · texto curto · bullets de 3-6 palavras. os dois cards carregam o MESMO número de bullets — é o que mantém a dupla alinhada sem depender de stretch do grid. */ .team{background:var(--white)} .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px;max-width:900px;margin-inline:auto} .t-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,28px); box-shadow:var(--sh-sm);display:flex;flex-direction:column;text-align:left; transition:transform var(--dur) var(--ease),box-shadow var(--dur-slow) var(--ease)} .t-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} .t-head{display:flex;align-items:center;gap:16px} /* retrato redondo, não quadrado: o marcelo-abud-thumb.jpg já vem com recorte circular chapado (cantos brancos), então máscara circular é o que padroniza os dois — quadrado reabre o "uma foto redonda, outra quadrada". */ .t-photo{flex:none;width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--bg)} .t-photo img{width:100%;height:100%;object-fit:cover} .t-card h2,.t-card h3{font-size:20px} .t-role{color:var(--gray);font-size:14px;line-height:1.45;margin-top:5px} .t-bio{color:var(--gray);font-size:14.5px;line-height:1.65;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)} .t-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} /* quando os bullets fecham o card (home), eles encostam no rodapé: como os dois cards têm o mesmo número de bullets, alinhá-los embaixo alinha-os também em cima, em qualquer largura, mesmo se a bio quebrar em mais linhas de um lado. */ .t-list:last-child{margin-top:auto;padding-top:18px} .t-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45;color:var(--grafite)} .t-list li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green); box-shadow:0 0 0 3px var(--tint-accent);margin-top:6px} .t-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);color:var(--gray);font-size:12.5px;line-height:1.55} .t-mail{margin-top:auto;padding-top:20px;color:var(--green-ink);font-size:13.5px;font-weight:600; display:inline-flex;align-items:center;gap:8px;align-self:flex-start;transition:gap var(--dur) var(--ease)} .t-mail:hover{gap:11px} .pagehead+.tms .team-grid{margin-top:0} @media(max-width:700px){.team-grid{grid-template-columns:1fr}.t-photo{width:76px;height:76px}} /* ============ FAIXA 11 · FECHAMENTO + FAQ (lâmina navy) ============ */ .closing{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--on-navy)} .close-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,56px);margin-top:52px;align-items:start} .close-k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-dim);margin-bottom:14px} .close-wa p{color:var(--on-navy-dim);font-size:15px;line-height:1.65;margin-top:18px;max-width:40ch} .close-wa .btn{font-size:16.5px;padding:16px 28px;width:100%;max-width:380px} .contact-row{margin-top:26px;display:flex;flex-direction:column;gap:8px} .contact-row a{color:var(--on-navy);font-size:14.5px;display:inline-flex;align-items:center;gap:9px;opacity:.9;transition:opacity var(--dur) var(--ease)} .contact-row a:hover{opacity:1} .contact-row svg{color:var(--green);flex:none} @media(max-width:860px){.close-grid{grid-template-columns:1fr}} /* formulário */ .leadform{text-align:left;background:var(--glass);border:1px solid var(--on-dark-border);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px)} .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .lf-field label{display:block;font-size:12.5px;font-weight:600;color:var(--on-navy-dim);margin-bottom:6px;letter-spacing:.02em} .lf-field input,.lf-field select{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:var(--r-sm);padding:12px 14px;font-family:"Inter";font-size:16px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .lf-field input::placeholder{color:rgba(248,248,246,.62)} .lf-field input:focus,.lf-field select:focus{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green);background:rgba(255,255,255,.12)} .lf-field select{color-scheme:dark} .lf-field select:invalid{color:rgba(248,248,246,.65)} .lf-field select option{color:var(--navy);background:var(--white)} .leadform.submitted input:invalid,.leadform.submitted select:invalid{border-color:var(--error)} .lf-back{background:none;border:none;color:var(--on-navy-dim);font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .lf-back:hover{color:#fff} /* honeypot: invisível para gente, preenchível por bot. Fora da árvore de acessibilidade via aria-hidden + tabindex -1, então leitor de tela e teclado não esbarram nele. */ .lf-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* caminhos alternativos, caso o WhatsApp não abra */ .lf-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;margin-top:18px} .lf-alt a,.lf-alt button{background:none;border:none;padding:0;color:var(--on-navy-dim);font-family:inherit;font-size:13px; text-decoration:underline;text-underline-offset:3px;cursor:pointer} .lf-alt a:hover,.lf-alt button:hover{color:#fff} .lf-submit{width:100%;justify-content:center;margin-top:6px} .lf-consent{margin-top:14px;font-size:12px;color:var(--on-navy-dim);line-height:1.5;text-align:center} .lf-done{text-align:center;background:var(--glass);border:1px solid var(--on-dark-border);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px)} .lf-done p{color:var(--on-navy-dim);margin-bottom:18px;font-size:16px} .lf-done b{color:#fff} @media(max-width:640px){.lf-row{grid-template-columns:1fr}} /* FAQ sobre navy (fechamento) */ .faq-dark{margin-top:clamp(56px,7vw,84px);max-width:840px;margin-inline:auto} .faq-dark .faq-t{font-family:"Plus Jakarta Sans";font-weight:700;font-size:clamp(21px,2.6vw,26px);color:var(--white);text-align:center;margin-bottom:28px} .faq-dark details{border-bottom:1px solid var(--on-dark-border)} .faq-dark summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-family:"Plus Jakarta Sans";font-weight:600;font-size:clamp(15.5px,1.9vw,17.5px);color:var(--white)} .faq-dark summary::-webkit-details-marker{display:none} .faq-dark summary .ic{flex:none;width:22px;height:22px;position:relative} .faq-dark summary .ic:before,.faq-dark summary .ic:after{content:"";position:absolute;background:var(--green);border-radius:2px} .faq-dark summary .ic:before{top:10px;left:3px;right:3px;height:2px} .faq-dark summary .ic:after{left:10px;top:3px;bottom:3px;width:2px;transition:opacity var(--dur-slow) var(--ease)} .faq-dark details[open] summary .ic:after{opacity:0} .faq-dark .a{color:var(--on-navy-dim);font-size:15.5px;line-height:1.7;padding:0 0 22px;max-width:70ch} /* faq claro (páginas internas) */ .faq{background:var(--bg)} .faq .wrap{max-width:840px} .faq .list{margin-top:44px} .faq details{border-bottom:1px solid var(--border)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-family:"Plus Jakarta Sans";font-weight:600;font-size:clamp(16px,2vw,18px);color:var(--navy)} .faq summary::-webkit-details-marker{display:none} .faq summary .ic{flex:none;width:22px;height:22px;position:relative} .faq summary .ic:before,.faq summary .ic:after{content:"";position:absolute;background:var(--green-ink);border-radius:2px} .faq summary .ic:before{top:10px;left:3px;right:3px;height:2px} .faq summary .ic:after{left:10px;top:3px;bottom:3px;width:2px;transition:opacity var(--dur-slow) var(--ease)} .faq details[open] summary .ic:after{opacity:0} .faq .a{color:var(--gray);font-size:15.5px;line-height:1.65;padding:0 0 22px;max-width:70ch} /* ============ RODAPÉ ============ */ footer{background:var(--navy);color:var(--on-navy-dim);padding:60px 0 38px;border-top:1px solid var(--on-dark-border)} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px} .foot-top>div{min-width:0} footer h3{color:#fff;font-family:"Plus Jakarta Sans";font-size:14px;margin:0 0 14px;font-weight:600} footer a{display:block;color:var(--on-navy-dim);font-size:14.5px;padding:9px 0;transition:color var(--dur) var(--ease)} footer a:hover{color:var(--green)} .foot-brand img{height:30px;width:auto;margin-bottom:16px} .foot-brand p{font-size:14.5px;max-width:32ch;color:var(--on-navy-dim)} .socials{display:flex;gap:10px;margin-top:18px} .socials a{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--on-dark-border);display:grid;place-items:center;color:var(--on-navy);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);padding:0} .socials a:hover{border-color:var(--green);color:var(--green)} .disclaimer{margin-top:44px;padding-top:24px;border-top:1px solid var(--on-dark-border);font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.55);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} @media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} /* ============ COMPONENTES LEGADOS (páginas internas) ============ */ /* cabeçalho de página interna */ .pagehead{padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);text-align:center;background:var(--bg)} .pagehead .back{display:inline-flex;align-items:center;gap:7px;color:var(--gray);font-size:14px;font-weight:600;margin-bottom:22px;transition:color var(--dur) var(--ease)} .pagehead .back:hover{color:var(--green-ink)} .pagehead h1{font-size:clamp(32px,5vw,52px);max-width:20ch;margin-inline:auto} .pagehead p{color:var(--gray-on-bg);margin:18px auto 0;max-width:56ch;font-size:clamp(16px,1.8vw,18px)} .docgroup{margin-top:56px} .docgroup:first-child{margin-top:0} .docgroup .glbl{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);font-weight:600;margin-bottom:18px;text-align:left} /* documentos / cards de arquivo */ .partners{background:var(--bg)} .partners .wrap{text-align:center} .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:44px;text-align:left} .pcard{border:1px solid var(--border);border-radius:var(--r-md);padding:22px 26px;background:var(--white);display:flex;flex-direction:column;justify-content:center;min-height:96px; transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)} .pcard.doc:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--green)} .pcard .pl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);font-weight:600} .pcard .pn{font-family:"Plus Jakarta Sans";font-weight:700;font-size:16.5px;color:var(--navy);margin-top:8px;line-height:1.35} .pcard .pd{color:var(--gray);font-size:13.5px;margin-top:8px;line-height:1.5} /* features alternadas (servicos) */ .feat{border-top:1px solid var(--border);background:var(--white)} .feat .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center} .feat.alt .row{direction:rtl} .feat.alt .row>*{direction:ltr} .feat .txt{max-width:46ch} .feat h2{font-size:clamp(25px,3.2vw,36px);margin-top:14px} .feat .txt>p{color:var(--gray);margin-top:16px;font-size:17px} .feat ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px} .feat li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--grafite)} .feat li svg{color:var(--green-ink);flex:none;margin-top:3px} .feat .link{margin-top:26px} @media(max-width:820px){.feat .row{grid-template-columns:1fr;gap:32px}.feat.alt .row{direction:ltr}} /* card de entregável (servicos) */ .deliver{max-width:660px;margin:0 auto;background:var(--white);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:clamp(24px,3vw,34px);text-align:left;position:relative;overflow:hidden} .deliver .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px} .deliver .dhead b{font-family:"Plus Jakarta Sans";font-weight:700;font-size:15.5px;color:var(--navy)} .deliver .dchip{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);background:var(--tint-accent);padding:5px 11px;border-radius:var(--r-pill);flex:none} .deliver ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} .deliver li{display:flex;gap:13px;align-items:flex-start} .deliver li .ck{flex:none;width:26px;height:26px;border-radius:8px;background:var(--tint-accent);color:var(--green-ink);display:grid;place-items:center;margin-top:1px} .deliver li .t b{font-family:"Plus Jakarta Sans";font-weight:600;font-size:15.5px;color:var(--navy);display:block} .deliver li .t span{color:var(--gray);font-size:14px;line-height:1.5} .deliver .dfoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);color:var(--gray);font-size:13px} .feat .deliver{margin:0;max-width:none;box-shadow:var(--sh-lg)} .deliver.tiles ul{display:grid;grid-template-columns:1fr 1fr;gap:12px} .deliver.tiles li{flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:16px} .deliver.tiles li .ck{margin-top:0} @media(max-width:520px){.deliver.tiles ul{grid-template-columns:1fr}} .deliver.numbered li .num{flex:none;width:26px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:13px;color:var(--green-ink);letter-spacing:.06em;margin-top:4px} .deliver.timeline ul{position:relative;padding-left:4px} .deliver.timeline ul:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--border);border-radius:2px} .deliver.timeline li{position:relative} .deliver.timeline li .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--white);box-shadow:0 0 0 2px var(--green);margin:6px 8px 0 0;position:relative;z-index:1} /* .cmp — NÃO remover: a table.cmp da calculadora-fgc herda este display:flex no desktop (calc.css só redefine display no mobile via .stack); sem esta regra o layout da tabela muda. */ .cmp{margin-top:22px;display:flex;flex-direction:column;gap:10px} .cmp .r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--r-md);font-size:14.5px} .cmp .good{background:var(--tint-success);border:1px solid rgba(31,165,103,.30);color:var(--navy);font-weight:600} .cmp .bad{background:var(--bg);border:1px solid var(--border);color:var(--gray)} .cmp .r .tag{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.8} @media(max-width:640px){.cmp .r{padding:10px 12px;font-size:13.5px}} /* CTA final legado (páginas internas) */ .final{background:var(--bg)} .final .card{background:linear-gradient(160deg,var(--navy),var(--navy-2));border-radius:var(--r-xl);padding:clamp(44px,7vw,84px);text-align:center;color:var(--on-navy);position:relative;overflow:hidden} .final .card:after{content:"";position:absolute;right:-8%;bottom:-40%;width:min(40vw,420px);aspect-ratio:1;background:var(--green);opacity:.10;border-radius:var(--r-xl);transform:rotate(16deg)} .final h2{color:#fff;font-size:clamp(27px,4.2vw,46px);max-width:17ch;margin-inline:auto;position:relative;z-index:2} .final p{color:var(--on-navy-dim);margin:16px auto 0;max-width:48ch;position:relative;z-index:2} .final .cta-row{margin-top:32px;display:flex;justify-content:center;position:relative;z-index:2} .final .microcta{margin-top:16px;color:var(--on-navy-dim);font-size:13px;position:relative;z-index:2} .final .leadform,.final .lf-done{position:relative;z-index:2;margin-top:36px;background:transparent;border:none;padding:0} .microcta{color:var(--gray);font-size:13px} /* prosa legal (privacidade) */ .legal .wrap{max-width:840px} .legal h2{font-size:clamp(20px,2.6vw,25px);margin-top:44px} .legal h2:first-of-type{margin-top:0} .legal p,.legal li{color:var(--gray-on-bg);font-size:15.5px;line-height:1.7;margin-top:12px} .legal ul{margin:12px 0 0;padding-left:22px} .legal li{margin-top:8px} .legal b{color:var(--grafite)} .legal .upd{font-size:13px;color:var(--gray)} /* ============ UTILITÁRIOS ============ */ /* WhatsApp fixo no mobile */ .wa-fab{display:none} @media(max-width:820px){ .wa-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;right:16px;bottom:16px;z-index:60; background:var(--green);color:var(--navy);font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px; padding:13px 18px;border-radius:var(--r-pill);box-shadow:0 10px 26px rgba(2,17,46,.28)} .closing{padding-bottom:120px} .final{padding-bottom:104px} footer{padding-bottom:96px} } @media(max-width:640px){ section{padding:clamp(56px,10vw,96px) 0} .final .card{padding:40px 22px} .lf-submit{font-size:15px} } /* loader de abertura (uma vez por sessão) */ .loader{display:none} .anim.intro .loader{display:grid;place-items:center;position:fixed;inset:0;z-index:200;background:var(--navy)} .loader img{height:40px;width:auto;animation:loaderin .55s var(--ease) both} @keyframes loaderin{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}} .loader.done{opacity:0;transition:opacity .4s var(--ease)} /* reveal · estado oculto só enquanto html.anim presente */ .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)} .anim .reveal{opacity:0;transform:translateY(22px)} .reveal.in{opacity:1;transform:none} /* A dobra nunca nasce oculta. O Google exclui elementos com opacity:0 dos candidatos a LCP, e o h1 do hero/pagehead é o maior bloco de texto acima da dobra em todas as 10 páginas — com .anim .reveal ele só entrava na conta quando o IntersectionObserver do fim do body disparava. O resto da página continua animando normalmente. */ .anim .hero .reveal,.anim .pagehead .reveal{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} /* banner de consentimento (LGPD) — acima do wa-fab enquanto decide */ #axin-consent{position:fixed;left:0;right:0;bottom:0;z-index:250;padding:16px; display:flex;justify-content:center;animation:consentin .3s var(--ease) both} @keyframes consentin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .axin-consent-box{max-width:920px;width:100%;background:var(--navy);color:var(--on-navy); border-radius:16px;box-shadow:0 20px 48px rgba(2,17,46,.35);padding:20px 24px; display:flex;align-items:center;gap:20px;flex-wrap:wrap} .axin-consent-box p{margin:0;flex:1 1 320px;font-size:14px;line-height:1.55;color:var(--on-navy)} .axin-consent-box a{color:var(--green);text-decoration:underline} .axin-consent-actions{display:flex;gap:10px;flex:none} .axin-consent-actions button{font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px; border-radius:var(--r-pill);padding:11px 20px;cursor:pointer;border:1px solid transparent} .axin-consent-accept{background:var(--green);color:var(--navy);border-color:var(--green)} .axin-consent-reject{background:transparent;color:var(--on-navy);border-color:rgba(248,248,246,.4)} @media(max-width:640px){ .axin-consent-box{padding:18px} .axin-consent-actions{width:100%} .axin-consent-actions button{flex:1} } /* ============================================================ PALESTRAS (palestras.html) Bloco isolado e namespaced em .pl-* de propósito: a landing entrou depois do sistema já estar fechado, e nenhuma regra daqui pode alcançar as outras páginas. Reaproveita os componentes existentes onde eles servem (.leadform, .faq-dark, .final, .btn, .chip) e só define o que não existia: hero split, cards de tema, grade de eventos e a caixa de fato da NR-1. ============================================================ */ /* ---- hero split ---- */ /* ============ HERO CONVERGIDO COM A REFERENCIA ============ Vira CLARO por dois motivos, nesta ordem: (1) a referencia inteira e clara e o pedido foi convergir; (2) o terno da foto 14 e navy — sobre o navy do fundo antigo ele vira um borrao, sobre off-white ele salta. O navy nao sai da pagina: aqui ele e a tinta do texto, e segue dominando as faixas seguintes. */ /* padding:0 — a regra global de
injetava 118px em cima e embaixo, o que jogava a faixa para 1028px e a tirava da dobra. Quem da respiro aqui e o .pl-hero-in. */ .pl-hero{position:relative;overflow:hidden;isolation:isolate;padding:0; background: radial-gradient(58% 62% at 74% 46%, rgba(95,201,143,.13), transparent 68%), radial-gradient(80% 90% at 18% 8%, #fff, transparent 60%), linear-gradient(168deg,#FAFBFD 0%,var(--bg) 62%,#EDF1F7 100%)} /* above the fold: mesma excecao que .hero e .pagehead ja tem */ .anim .pl-hero .reveal{opacity:1;transform:none} /* --- arco decorativo: o equivalente ao laco dourado da referencia --- */ .pl-hero-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* o arco fica CONTIDO atras do sujeito: na primeira versao ele varria a faixa inteira e cruzava por cima do texto, o oposto do que a referencia faz */ .pl-arco{position:absolute;right:-2%;bottom:-8%;height:96%;width:auto;max-width:52%} /* --- recorte: sangra na base e encosta na borda direita --- */ .pl-hero-cut{position:absolute;right:2.5%;bottom:0;z-index:1; height:min(89%,782px);width:auto; filter:drop-shadow(0 26px 44px rgba(2,17,46,.18))} /* --- carimbo circular de escassez, sobreposto ao sujeito --- */ .pl-carimbo{position:absolute;z-index:3;right:31%;top:19%;width:clamp(80px,7vw,100px);aspect-ratio:1} .pl-carimbo svg{width:100%;height:100%;filter:drop-shadow(0 10px 22px rgba(2,17,46,.28))} .anim .pl-carimbo svg{animation:plGira 26s linear infinite} @keyframes plGira{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.anim .pl-carimbo svg{animation:none}} .pl-carimbo-tx{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:9.4px;font-weight:700;letter-spacing:.14em} .pl-carimbo-n{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:27px;font-weight:700} .pl-carimbo-l{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:8.5px;font-weight:600;letter-spacing:.18em} /* --- cracha flutuante, como o da referencia --- */ .pl-cracha{position:absolute;z-index:3;right:24%;bottom:21%;margin:0; display:flex;align-items:center;gap:11px; background:rgba(255,255,255,.93);backdrop-filter:blur(8px); border:1px solid rgba(2,17,46,.07);border-radius:var(--r-pill); padding:8px 18px 8px 8px;box-shadow:0 14px 30px rgba(2,17,46,.16)} .pl-cracha img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none} .pl-cracha figcaption{line-height:1.25} .pl-cracha b{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14px;color:var(--navy)} .pl-cracha span{display:block;font-size:11.5px;color:var(--gray);margin-top:1px} /* --- coluna de texto --- */ .pl-hero-in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto; padding:clamp(38px,4.6vw,64px) var(--pad) clamp(44px,5vw,74px); display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); align-items:center;min-height:min(88vh,880px)} .pl-hero-tx{grid-column:1} /* contraste de PESO na mesma frase, como a referencia: contexto em 500, ideia em 700 */ .pl-hero h1{color:var(--navy);font-weight:500;font-size:clamp(36px,5.2vw,58px); max-width:13ch;margin:20px 0 0;letter-spacing:-.03em;line-height:1.08} .pl-hero h1 em{font-style:normal;font-weight:700;color:var(--green-ink)} .pl-lede{margin:20px 0 0;max-width:44ch;font-size:clamp(16px,1.85vw,18.5px); color:var(--gray-on-bg);line-height:1.62} .pl-cta{margin-top:28px} .pl-hero .btn{font-size:16.5px;padding:15px 26px} /* botao-pilula com icone circular de seta na ponta — device direto da referencia */ .pl-btn-seta{padding-right:9px !important;gap:14px} .pl-btn-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:var(--navy);color:var(--green);flex:none; transition:transform var(--dur) var(--ease)} .pl-btn-ic svg{width:16px;height:16px} .pl-btn-seta:hover .pl-btn-ic{transform:rotate(45deg)} .pl-selo{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em; color:var(--green-ink);background:rgba(95,201,143,.14);border:1px solid rgba(31,165,103,.30); padding:7px 15px 7px 13px;border-radius:var(--r-pill)} .pl-selo-dot{width:7px;height:7px;border-radius:50%;background:var(--green-strong);flex:none; box-shadow:0 0 0 0 rgba(31,165,103,.55)} .anim .pl-selo-dot{animation:plPulse 2.4s var(--ease) infinite} @keyframes plPulse{0%{box-shadow:0 0 0 0 rgba(31,165,103,.5)}70%{box-shadow:0 0 0 9px rgba(31,165,103,0)}100%{box-shadow:0 0 0 0 rgba(31,165,103,0)}} @media(prefers-reduced-motion:reduce){.pl-selo-dot{animation:none}} .pl-cred{list-style:none;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px; font-size:13.5px;color:var(--gray);border-top:1px solid var(--border);padding:18px 0 0;max-width:42ch} .pl-cred b{color:var(--navy);font-weight:700} .pl-cred li{position:relative} .pl-cred li+li:before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%; background:var(--border);transform:translateY(-50%)} /* .btn-ghost volta ao padrao (navy sobre claro) no hero; a lamina do formulario continua escura e mantem o override branco */ .pl-form-sec .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45); background:rgba(2,17,46,.35);backdrop-filter:blur(3px)} .pl-form-sec .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)} /* ---- seções genéricas ---- */ .pl-sec{padding:clamp(56px,8vw,100px) 0} .pl-sec>.wrap>h2{font-size:clamp(26px,3.8vw,42px);max-width:22ch;margin-top:16px} .pl-sub{margin:18px 0 0;max-width:60ch;font-size:clamp(16px,1.8vw,18px);color:var(--on-navy-dim)} .pl-sub-claro{margin:18px 0 0;max-width:60ch;font-size:clamp(16px,1.8vw,18px);color:var(--gray-on-bg)} .pl-col2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:30px} .pl-col2 p{color:var(--gray-on-bg);font-size:16.5px;line-height:1.68} .pl-col2 p+p{margin-top:16px} /* ---- o custo (claro) ---- */ .pl-custo{background:var(--white)} /* caixa de fato: tudo que é afirmação verificável sobre a norma mora aqui, com a ressalva do que a NR-1 NÃO diz logo abaixo — a página não pode dar a entender que a palestra cumpre a obrigação legal do PGR. */ /* citação de destaque: tipografia grande, sem aspas decorativas e sem itálico no corpo — o registro do operador é sóbrio. O filete mint à esquerda amarra ao sistema sem transformar a frase num "card de inspiração". */ .pl-quote{margin:clamp(34px,4.5vw,54px) 0 0;padding:0 0 0 clamp(20px,3vw,32px); border-left:3px solid var(--green)} .pl-quote p{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700; color:var(--navy);font-size:clamp(21px,2.9vw,32px);line-height:1.24;letter-spacing:-.02em;max-width:24ch} .pl-quote em{font-style:normal;color:var(--green-ink)} .pl-nota{margin-top:clamp(32px,4vw,48px);background:var(--bg);border:1px solid var(--border); border-left:3px solid var(--green);border-radius:var(--r-md);padding:clamp(20px,3vw,30px)} .pl-nota h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink)} .pl-nota p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--grafite);max-width:78ch} .pl-nota-ressalva{color:var(--gray);font-size:14.5px} .pl-nota a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600} /* ---- a palestra (navy) ---- */ .pl-palestra{background:linear-gradient(170deg,var(--navy),var(--navy-2));color:var(--on-navy)} .pl-palestra h2,.pl-palestra h3,.pl-palestra h4{color:#fff} .chip-on-navy{color:var(--green);background:rgba(95,201,143,.14)} .pl-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(30px,4vw,46px)} .pl-tema{background:var(--glass);border:1px solid var(--on-dark-border);border-radius:var(--r-md); padding:clamp(20px,2.6vw,28px)} .pl-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%; background:var(--green);color:var(--navy);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:15px} .pl-tema h3{margin-top:16px;font-size:clamp(17px,2vw,20px);line-height:1.22} .pl-tema p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--on-navy-dim)} .pl-pontos-t{margin-top:clamp(38px,5vw,60px);font-size:12.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--green)} .pl-pontos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px);margin-top:20px} /* antes era só um filete no topo: os quatro liam como nota de rodapé, apesar de serem a ementa da palestra. Agora têm corpo, numeral e a mesma família de card dos temas — sem competir com eles, porque o numeral aqui é discreto e vazado. */ .pl-ponto{position:relative;background:rgba(255,255,255,.045);border:1px solid var(--on-dark-border); border-top:2px solid rgba(95,201,143,.55);border-radius:0 0 var(--r-md) var(--r-md); padding:18px 18px 20px} .pl-ponto-n{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700; font-size:13px;letter-spacing:.1em;color:var(--green);opacity:.75;margin-bottom:9px} .pl-ponto h4{font-size:16px;line-height:1.25} .pl-ponto p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--on-navy-dim)} .pl-cta-mid{margin-top:clamp(34px,4vw,48px)} /* ---- quem leva ---- */ .pl-quem{background:var(--bg)} .pl-quem-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,56px);margin-top:30px;align-items:start} .pl-quem-tx p{color:var(--gray-on-bg);font-size:16.5px;line-height:1.68} .pl-quem-tx p+p{margin-top:15px} .pl-quem-tx b{color:var(--navy);font-weight:600} .pl-tl{list-style:none;margin:28px 0 0;padding:0;border-left:2px solid var(--border)} .pl-tl li{position:relative;padding:0 0 16px 22px;font-size:15px;color:var(--gray-on-bg);line-height:1.5} .pl-tl li:last-child{padding-bottom:0} .pl-tl li:before{content:"";position:absolute;left:-5px;top:7px;width:8px;height:8px;border-radius:50%; background:var(--green);border:2px solid var(--bg)} .pl-tl span{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:13px;color:var(--navy); letter-spacing:.01em} .pl-cursos{margin-top:9px;background:var(--white);border:1px solid var(--border); border-radius:var(--r-sm);padding:16px 16px 18px} .pl-cursos h3{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--green-ink);margin-bottom:12px} .pl-cursos .pl-bul{gap:8px} .pl-cursos .pl-bul li{font-size:14px;line-height:1.45;padding-left:17px} .pl-cursos .pl-bul li:before{top:7px;width:5px;height:5px} /* sem sticky: com os cursos, a coluna ficou alta demais para grudar de forma útil */ .pl-quem-side{position:static} .pl-foto-frame{position:relative;padding:0 16px 16px 0} .pl-foto-frame:before{content:"";position:absolute;inset:16px 0 0 16px;border-radius:var(--r-md); background:var(--tint-accent);border:1.5px solid rgba(31,165,103,.30)} .pl-foto-frame img{position:relative} .pl-retrato{width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--sh-md)} .pl-selos{margin-top:16px;display:grid;gap:9px} .pl-selos div{background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px} .pl-selos b{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:15px;color:var(--navy)} .pl-selos span{display:block;font-size:13px;color:var(--gray);margin-top:2px} /* ---- prova ---- */ .pl-prova{background:var(--white)} .pl-eventos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);margin-top:32px} /* O texto entra SOBRE a foto, num degradê navy. Antes era foto + bloco branco embaixo: a grade virava um mosaico de quatro fotos com temperaturas de cor diferentes brigando entre si. O degradê comum unifica as quatro e devolve hierarquia — a foto vira contexto, o texto vira informação. */ .pl-ev{position:relative;border-radius:var(--r-md);overflow:hidden;isolation:isolate; background:var(--navy);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .pl-ev:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)} .pl-ev img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block; transition:transform var(--dur-slow) var(--ease)} .pl-ev:hover img{transform:scale(1.03)} .pl-ev:after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(2,17,46,.96) 0%,rgba(2,17,46,.82) 26%,rgba(2,17,46,.28) 54%,rgba(2,17,46,.10) 100%)} .pl-ev-tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px 22px} .pl-ev h3{font-size:18px;line-height:1.24;color:#fff} .pl-ev-loc{margin-top:7px;font-size:13.5px;color:var(--green);font-weight:600} .pl-ev-pub{margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.74)} .pl-artigos{margin-top:clamp(40px,5vw,60px)} .pl-artigos h3{font-size:clamp(19px,2.3vw,23px)} .pl-artigos ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--border)} .pl-artigos li{border-bottom:1px solid var(--border)} .pl-artigos a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:15px 2px; font-size:16px;color:var(--navy);transition:color var(--dur) var(--ease)} .pl-artigos a:hover{color:var(--green-ink)} .pl-artigos span{flex:none;width:74px;font-size:12.5px;font-weight:600;color:var(--gray);letter-spacing:.02em} /* logo do veículo no lugar do nome em cinza: a marca da Exame e do Investing.com carrega a credibilidade que a palavra não carregava. Levemente apagados em repouso para não transformarem a lista num mosaico de cores. */ .pl-art-logo{height:16px;width:auto;margin-left:auto;flex:none;opacity:.78; transition:opacity var(--dur) var(--ease)} .pl-artigos a:hover .pl-art-logo{opacity:1} /* a linha inteira é link e não parecia: a seta aparece na passagem do mouse */ .pl-artigos-seta a:after{content:"";flex:none;width:16px;height:16px;margin-left:2px; background:currentColor;opacity:0;transform:translateX(-4px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat} .pl-artigos-seta a:hover:after{opacity:.85;transform:none} /* ---- formulário (navy) ---- */ .pl-form-sec{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:var(--on-navy); padding:clamp(56px,8vw,100px) 0} .pl-form-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,56px);align-items:center} .pl-form-tx h2{color:#fff;font-size:clamp(26px,3.6vw,40px);max-width:16ch;margin-top:18px} .pl-form-tx>p{margin-top:16px;max-width:46ch;color:var(--on-navy-dim);font-size:16.5px;line-height:1.62} .pl-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px} .pl-checks li{position:relative;padding-left:28px;font-size:15px;color:var(--on-navy-dim);line-height:1.5} .pl-checks li:before{content:"";position:absolute;left:0;top:5px;width:16px;height:9px; border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)} .pl-form-quem{display:flex;align-items:center;gap:12px;margin-top:26px} .pl-form-quem img{width:52px;height:52px;border-radius:50%;border:2px solid var(--green);object-fit:cover;flex:none} .pl-form-quem p{margin:0;font-size:13.5px;line-height:1.35;color:var(--on-navy-dim)} .pl-form-quem b{display:block;color:#fff;font-size:15px;font-family:"Plus Jakarta Sans",system-ui,sans-serif} .pl-form-wa{margin-top:18px;padding-top:18px;border-top:1px solid var(--on-dark-border)} .pl-form-wa a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--green)} .pl-form-wa a:hover{text-decoration:underline;text-underline-offset:3px} /* textarea segue o mesmo tratamento dos inputs do .leadform */ .pl-msg{margin-bottom:14px} .pl-msg label{display:block;font-size:12.5px;font-weight:600;color:var(--on-navy-dim);margin-bottom:6px;letter-spacing:.02em} .pl-msg label span{font-weight:400;opacity:.72} .pl-msg textarea{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.28);color:#fff; border-radius:var(--r-sm);padding:12px 14px;font-family:"Inter",system-ui,sans-serif;font-size:16px;resize:vertical; transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .pl-msg textarea::placeholder{color:rgba(248,248,246,.62)} .pl-msg textarea:focus{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green);background:rgba(255,255,255,.12)} .pl-form-sec .faq-dark{margin-top:clamp(56px,7vw,84px)} /* ---- imprensa ---- */ /* rodapé legal: a landing não tem o rodapé do site, só o que é obrigação declarar */ /* fechamento: a foto da plateia entra como fundo do card, sob um véu navy forte — o texto continua com contraste de sobra e a página termina na prova. */ .pl-final .card{position:relative;isolation:isolate;overflow:hidden} .pl-final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.6;object-position:center 38%} .pl-final .card:before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(160deg,rgba(2,17,46,.90),rgba(2,17,46,.82))} .pl-legal{background:var(--navy);color:var(--on-navy-dim);padding:34px 0 40px} .pl-legal p{font-size:12px;line-height:1.6;max-width:96ch} .pl-legal b{color:var(--on-navy);font-weight:600} .pl-legal-b{margin-top:12px;font-size:12px} .pl-legal a{display:inline;color:var(--green);text-decoration:underline;text-underline-offset:3px} .pl-imprensa{background:var(--bg)} .pl-formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:32px} .pl-formato{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:24px} .pl-fmt-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;margin-bottom:14px; background:var(--tint-accent);color:var(--green-ink)} .pl-fmt-ic svg{width:20px;height:20px} .pl-formato h3{font-size:17px} .pl-formato p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--gray)} .pl-imp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,2.4vw,26px); margin-top:clamp(34px,4vw,50px);align-items:start} .pl-imp-grid h3{font-size:17.5px;margin-bottom:16px} .pl-imp-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md); padding:clamp(22px,3vw,28px)} /* marcas de conferido em vez de bolinhas: são argumentos, não itens de lista */ .pl-imp-checks{list-style:none;margin:0;padding:0;display:grid;gap:13px} .pl-imp-checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:var(--gray-on-bg)} .pl-imp-checks li:before{content:"";position:absolute;left:2px;top:4px;width:14px;height:8px; border-left:2.5px solid var(--green-ink);border-bottom:2.5px solid var(--green-ink);transform:rotate(-45deg)} /* etiquetas: um jornalista varre o cardápio de pautas com o olho, não lê linha a linha */ .pl-imp-temas{padding-top:4px} .pl-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px} .pl-tags li{background:var(--white);border:1px solid var(--border);border-radius:var(--r-pill); padding:9px 16px;font-size:14.5px;color:var(--navy);font-weight:500; transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)} .pl-tags li:hover{border-color:var(--green);color:var(--green-ink)} .pl-bul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pl-bul li{position:relative;padding-left:20px;font-size:15.5px;color:var(--gray-on-bg);line-height:1.55} .pl-bul li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green)} /* os números flutuavam entre dois filetes, sem peso nenhum. Viraram três cartões com o numeral em mint escuro — o mesmo verde que a página usa para "fato". */ .pl-audiencia{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px); margin-top:clamp(34px,4vw,50px)} .pl-audiencia div{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md); padding:clamp(20px,2.6vw,26px)} .pl-audiencia b{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700; font-size:clamp(30px,4vw,44px);color:var(--green-ink);line-height:1;letter-spacing:-.02em} .pl-audiencia span{display:block;margin-top:9px;font-size:13.5px;line-height:1.45;color:var(--gray)} /* ---- barra fixa de conversão ---- */ .pl-bar{position:fixed;left:0;right:0;bottom:0;z-index:900; display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,28px); padding:13px clamp(16px,4vw,28px); background:rgba(2,17,46,.94);backdrop-filter:blur(10px); border-top:1px solid rgba(95,201,143,.30);box-shadow:0 -8px 28px rgba(2,17,46,.28); transform:translateY(110%);visibility:hidden; transition:transform var(--dur-slow) var(--ease),visibility var(--dur-slow)} .pl-bar.on{transform:none;visibility:visible} .pl-bar p{margin:0;font-size:14.5px;color:var(--on-navy-dim);line-height:1.3} .pl-bar b{color:var(--green);font-weight:700} .pl-bar .btn{padding:11px 22px;font-size:15px;flex:none} @media(prefers-reduced-motion:reduce){.pl-bar{transition:none}} @media(max-width:640px){ .pl-bar{gap:12px;padding:11px 14px} .pl-bar p{font-size:13px} .pl-bar p span{display:none} .pl-bar .btn{padding:11px 18px;font-size:14.5px} } /* ---- responsivo ---- */ @media(max-width:980px){ /* Empilhado: o recorte vira uma figura no topo, ancorado na base da propria faixa, com o arco atras. Mantem o Marcelo "de cara" (pedido do operador) sem empurrar promessa e botao para fora da primeira tela. */ .pl-hero{display:flex;flex-direction:column;padding:0} .pl-hero-deco{position:absolute;inset:auto 0 auto 0;top:0;height:310px} .pl-arco{right:-16%;bottom:-14%;height:150%} .pl-hero-cut{position:relative;right:auto;bottom:auto;order:-1; height:288px;margin:4px auto -10px;display:block; filter:drop-shadow(0 16px 26px rgba(2,17,46,.18))} .pl-carimbo{right:5%;top:14px;width:74px} .pl-cracha{position:relative;right:auto;bottom:auto;margin:0 auto;width:max-content;max-width:100%} .pl-hero-in{grid-template-columns:1fr;min-height:0;padding-top:10px;padding-bottom:30px} .pl-hero h1{max-width:18ch} .pl-temas,.pl-formatos{grid-template-columns:1fr} .pl-imp-grid{grid-template-columns:1fr} .pl-pontos{grid-template-columns:1fr 1fr} .pl-quem-grid{grid-template-columns:1fr} .pl-quem-side{position:static;max-width:340px} .pl-form-grid{grid-template-columns:1fr} } @media(max-width:720px){ .pl-col2{grid-template-columns:1fr} .pl-eventos{grid-template-columns:1fr} .pl-audiencia{grid-template-columns:1fr;gap:16px} } @media(max-width:560px){ .pl-pontos{grid-template-columns:1fr} .pl-quote p{max-width:none} .pl-cta .btn{width:100%;justify-content:center} .pl-artigos em{margin-left:0;width:100%} } /* ============================================================ CONVERGENCIA COM A REFERENCIA — 2a leva (31/08/2026) Tudo escopado em body.lp-palestras: as outras 9 paginas do site nao podem sentir nada disto. As decisoes vieram de um painel que leu as 7 pranchas da referencia contra os nossos recortes. ============================================================ */ body.lp-palestras{ /* #F8F8F6 e o --offwhite que a marca JA tem, hoje usado so como tinta sobre navy. Vira o papel: a mesma cor que e a letra no escuro e o fundo no claro. */ --bg:#F8F8F6; --border-soft:rgba(2,17,46,.055); /* spread negativo mantem a sombra colada embaixo do card em vez de vazar em volta */ --sh-card:0 1px 2px rgba(2,17,46,.035), 0 8px 20px -10px rgba(2,17,46,.10); background:var(--bg); } /* --- canvas unico: acaba o zebrado branco/cinza; branco vira so cor de card --- */ body.lp-palestras .pl-custo, body.lp-palestras .pl-prova{background:var(--bg)} /* a lista de artigos, solta sobre o canvas, virava planilha: ganha corpo de card */ body.lp-palestras .pl-artigos{background:var(--white);border:1px solid var(--border-soft); border-radius:var(--r-md);box-shadow:var(--sh-card);padding:clamp(22px,3vw,30px)} body.lp-palestras .pl-artigos ul{border-top:0} body.lp-palestras .pl-artigos li:last-child{border-bottom:0} /* --- peso de card: contorno de 13% vira 5%, elevacao colada --- */ body.lp-palestras .pl-formato, body.lp-palestras .pl-imp-card, body.lp-palestras .pl-cursos, body.lp-palestras .pl-selos div, body.lp-palestras .pl-nota, body.lp-palestras .pl-audiencia div, body.lp-palestras .pl-ev{border-color:var(--border-soft);box-shadow:var(--sh-card)} body.lp-palestras .pl-ev:hover{box-shadow:0 2px 4px rgba(2,17,46,.05), 0 18px 34px -14px rgba(2,17,46,.20)} body.lp-palestras .pl-retrato{box-shadow:var(--sh-card)} /* rotulo que se varre nao precisa de corpo de card: tinta translucida, sem borda */ body.lp-palestras .pl-tags li{background:rgba(2,17,46,.045);border:0;color:var(--navy)} body.lp-palestras .pl-tags li:hover{background:rgba(24,129,80,.10);color:var(--green-ink)} /* linha que INFORMA continua linha: divisorias, FAQ e campos de formulario intactos */ /* --- kicker: cinco dialetos viram um. O rotulo sussurra e cede o contraste ao H2 --- */ body.lp-palestras .chip{background:var(--white);border:1px solid var(--border); color:var(--gray-on-bg);text-transform:none;letter-spacing:0;font-size:13px; font-weight:500;padding:7px 15px 7px 12px;gap:8px} body.lp-palestras .chip:before{content:"";width:6px;height:6px;border-radius:50%; background:var(--green-strong);flex:none} body.lp-palestras .chip-on-navy{background:rgba(255,255,255,.06); border-color:var(--on-dark-border);color:var(--on-navy-dim)} body.lp-palestras .chip-on-navy:before{background:var(--green)} /* o UNICO caixa-alta que sobra na pagina e o rotulo de sub-bloco */ body.lp-palestras .pl-pontos-t{font-size:12px;letter-spacing:.12em;font-weight:600} body.lp-palestras .pl-nota h3, body.lp-palestras .pl-cursos h3{text-transform:none;letter-spacing:0;font-size:15px; font-weight:700;color:var(--navy)} body.lp-palestras .pl-cursos .pl-bul li{font-size:13.5px} /* --- peso modulado no titulo: 500 no contexto, 700 no sintagma que importa --- */ body.lp-palestras .pl-sec>.wrap>h2, body.lp-palestras .pl-form-tx h2, body.lp-palestras .final h2{font-weight:500;letter-spacing:-.022em;line-height:1.16} body.lp-palestras h2 em{font-style:normal;font-weight:700} /* regra dos dois verdes: solido #188150 sobre claro, #5FC98F so sobre navy */ body.lp-palestras .pl-sec>.wrap>h2 em{color:var(--green-ink)} body.lp-palestras .pl-palestra h2 em, body.lp-palestras .pl-form-tx h2 em, body.lp-palestras .final h2 em{color:var(--green)} body.lp-palestras .pl-quote{border-left-color:var(--green-ink)} body.lp-palestras .pl-tl li:before{background:var(--green-ink)} body.lp-palestras .pl-bul li:before{background:var(--green-ink)} /* --- respiro: 15% mais ar no topo e na base das laminas claras --- */ body.lp-palestras .pl-custo, body.lp-palestras .pl-quem, body.lp-palestras .pl-prova, body.lp-palestras .pl-imprensa{padding:clamp(78px,10vw,132px) 0} /* --- o carimbo do hero para de girar: parado e selo, girando e adesivo --- */ body.lp-palestras .pl-carimbo svg{animation:none} body.lp-palestras .pl-carimbo-n{font-size:19px} body.lp-palestras .pl-carimbo-l{font-size:7.6px;letter-spacing:.14em} /* ============ PAGINAS DE SOLUCOES ============ */ /* Link dentro de texto corrido. Sem esta regra o `a{color:inherit; text-decoration:none}` global deixa o link identico ao paragrafo: era assim que as 3 paginas de solucoes estavam no ar. */ .feat .txt p a,.feat li a,.deliver .t a,.val-item p a,.mstep p a,.svc-card li a, .method .mfoot a,.faq .a a,.sec-head p a{color:var(--green-ink);font-weight:600; text-decoration:underline;text-underline-offset:3px} /* Sobre navy quem passa no contraste e o verde claro, nao o green-ink. */ .on-navy .mnote{color:var(--on-navy-dim)} .on-navy .mnote a,.on-navy .sec-head p a,.on-navy .deliver .t a, .faq-dark .a a,.vs-row a{color:var(--green);font-weight:600; text-decoration:underline;text-underline-offset:3px} /* ...menos dentro de um card branco sobre a lamina navy. */ .on-navy .deliver .t a{color:var(--green-ink)} /* Card branco sobre lamina navy: o h3 nao tem cor propria e herdaria o branco da secao, sumindo dentro do proprio card. */ .on-navy .svc-card h3{color:var(--navy)}