/* ================================================================== KRONOS ENERGY — tema institucional 2.0 Aplica o Manual da Marca (set/2026). Mesmas classes do tema 1.9, então a marcação do WordPress não muda. Escuro = modo Fluxo (institucional). Claro = modo Mostrador (técnico). Fontes: Albra Grotesk (licenciada) + IBM Plex Mono (Google Fonts). Imagens em ./img: kronos-simbolo.svg, kronos-simbolo-linha.svg, dial-petroleo.svg, dial-branco.svg. **O site nasce no Mostrador (claro).** Decisão do Gustavo em 22/09/2026: o modo primário é o claro, porque o site é a face técnica e consultiva da casa. O `` já sai com `data-tema="claro"`, então não pisca; o Fluxo continua a um clique no ☾ e a escolha fica guardada no navegador. Os tokens do :root abaixo são os do Fluxo por herança do pacote; quem manda no padrão é o atributo servido no HTML. ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ /* Fluxo: preto grafite + petróleo profundo, degradê como luz */ --fundo:#0E1A1F; --faixa-alt:#111F25; --painel-fundo:#00303F; --card:#14252B; --sup2:#1A2E35; --borda:#2A3F46; --borda-suave:#1E323A; --texto:#F3F6F7; --sec:#B4C2C7; --fraco:#8599A0; --verde:#488350; /* Verde Kronos: traço, gráfico, marcador */ --verde-claro:#9FD0BA; /* Menta: texto de destaque sobre escuro */ --verde-profundo:#1B695A; /* Pinho */ --petroleo:#00475D; --degrade:linear-gradient(90deg,#488350 0%,#1B695A 58%,#0D575C 75%,#00475D 100%); --degrade-diag:linear-gradient(150deg,#488350 0%,#1B695A 55%,#00475D 100%); --verde-veu:rgba(72,131,80,.10); --verde-veu-forte:rgba(72,131,80,.18); --alta:#9FD0BA; --baixa:#F2A69E; --neutro:#8599A0; --ambar:#E0B062; --vermelho:#E5695D; --btn-texto:#FFFFFF; --topo-veu:rgba(14,26,31,.88); --brilho:transparent; --r:4px; --r-controle:999px; --sombra:none; --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:40px; --e6:64px; --e7:112px; --f-texto:'Albra Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace; --t-display:clamp(40px,6vw,84px); --t-heading:clamp(30px,3.6vw,52px); --t-sub:clamp(18px,1.6vw,22px); --t-body:17px; --t-label:12.5px; --t-data:clamp(40px,4.6vw,64px); --t-mono:13px; --simbolo:url('img/kronos-simbolo.svg'); --simbolo-linha:url('img/kronos-simbolo-linha.svg'); --mostrador:url('img/dial-branco.svg'); color-scheme:dark; } /* Mostrador: gelo, petróleo como tinta, dados em evidência */ html[data-tema="claro"]{ --fundo:#EEF2F3; --faixa-alt:#FBFCFC; --painel-fundo:#FBFCFC; --card:#FBFCFC; --sup2:#E3E8EA; --borda:#C9D3D6; --borda-suave:#DDE3E5; --texto:#0E1A1F; --sec:#3A4F58; --fraco:#5E7F8C; --verde:#1B695A; --verde-claro:#1B695A; --verde-profundo:#488350; --verde-veu:rgba(27,105,90,.06); --verde-veu-forte:rgba(27,105,90,.12); --alta:#1B695A; --baixa:#A33A2A; --neutro:#5E7F8C; --btn-texto:#FFFFFF; --topo-veu:rgba(238,242,243,.9); --mostrador:url('img/dial-petroleo.svg'); color-scheme:light; } /* ------------------------------------------------------------ base */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--fundo);scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important;animation-duration:.01ms !important} } body{ margin:0;background:var(--fundo);color:var(--texto); font-family:var(--f-texto);font-weight:400;font-size:var(--t-body);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.03em;text-wrap:balance;line-height:1.08} p{margin:0;text-wrap:pretty} a{color:var(--verde-claro);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--texto)} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} img{max-width:100%;height:auto} svg{display:block} :focus-visible{outline:2px solid var(--verde-claro);outline-offset:3px;border-radius:2px} .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} .serif{font-family:var(--f-texto);font-weight:500;letter-spacing:-.03em} .pula-para{position:absolute;left:-9999px;top:0;z-index:100;background:var(--verde);color:#fff;padding:12px 20px} .pula-para:focus{left:0} .limite{max-width:1240px;margin:0 auto;padding:0 40px} /* Rótulo de seção: mono, como no manual ("02 QUEM SOMOS") */ .olho{ display:flex;align-items:center;gap:14px; font-family:var(--f-mono);font-size:var(--t-label);font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:var(--fraco);margin-bottom:22px; } .olho::before{content:"";width:28px;height:6px;border-radius:3px;background:var(--degrade);flex:none} .olho--neutro::before{background:var(--borda)} .rodape-fonte{font-size:13px;color:var(--fraco);border-top:1px solid var(--borda-suave);padding-top:16px;margin-top:40px} /* Frase-tese: o traço em degradê com ponta arredondada, do grafismo */ .tese{ display:flex;gap:22px;align-items:baseline; font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--texto); } .tese::before{content:"";width:56px;height:8px;border-radius:4px;background:var(--degrade);flex:none;transform:translateY(-4px)} .tese--espaco{margin-top:56px} /* ------------------------------------------------------------ topo */ .topo{ position:fixed;top:0;left:0;right:0;z-index:50;padding-block:20px; background:var(--topo-veu);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--borda-suave); } .topo__interno{display:flex;align-items:center;gap:48px;width:100%} .logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;color:var(--texto)} .logo img,.logo svg{width:34px;height:34px} .logo__nome{font-size:24px;font-weight:500;letter-spacing:-.04em;line-height:.85;white-space:nowrap} .logo__sub{display:block;font-size:6.5px;font-weight:300;letter-spacing:.52em;color:inherit;margin-top:4px} html[data-tema="claro"] .logo svg g{stroke:url(#kg)} .menu{display:flex;gap:32px;list-style:none;margin:0;padding:0;flex-wrap:nowrap} .menu li{position:relative;flex:none} .menu a{ display:block;white-space:nowrap;text-decoration:none; font-size:15px;color:var(--sec);transition:color .18s;padding:6px 0;position:relative; } .menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;background:var(--degrade);transform:scaleX(0);transform-origin:left;transition:transform .25s} .menu a:hover{color:var(--texto)} .menu a:hover::after, .menu .current-menu-item > a::after, .menu .current_page_item > a::after{transform:scaleX(1)} .menu .current-menu-item > a,.menu .current_page_item > a{color:var(--texto)} .topo__acoes{margin-left:auto;display:flex;align-items:center;gap:18px;flex:none} .topo__acoes .btn--primario{padding:11px 20px;font-size:14.5px} .topo__acoes .btn--primario::after{display:none} .tema-btn{ width:38px;height:38px;border-radius:50%;flex:none;border:1px solid var(--borda); display:grid;place-items:center;color:var(--sec);transition:.18s; } .tema-btn:hover{color:var(--texto);border-color:var(--verde-claro)} .tema-btn .tema-btn__lua{display:none} html[data-tema="claro"] .tema-btn__sol{display:none} html[data-tema="claro"] .tema-btn__lua{display:block} .menu-abrir{display:none;width:40px;height:40px;flex:none;place-items:center;color:var(--texto)} /* ------------------------------------------------------------ ações */ /* Botão com ponta arredondada, como os traços do símbolo */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:0;border-radius:var(--r-controle); font-family:var(--f-texto);font-size:16px;font-weight:500;letter-spacing:0; color:var(--texto);text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s; } .btn--primario{background:var(--degrade);background-size:140% 100%;background-position:0 0;color:var(--btn-texto);padding:16px 28px} .btn--primario::after{content:"→";font-size:18px;line-height:1;transition:transform .2s} .btn--primario:hover{background-position:100% 0;color:#fff} .btn--primario:hover::after{transform:translateX(4px)} .btn--fantasma{border:1px solid var(--borda);color:var(--texto);padding:15px 26px} .btn--fantasma:hover{border-color:var(--verde-claro);color:var(--verde-claro)} .btn--largo{width:100%;padding:18px 24px;background:var(--degrade);color:#fff} .btn--largo::after{content:"→"} /* Botão do WhatsApp: o ícone fica do tamanho da letra e o verde da marca entra só no hover, como no resto do sistema. */ .btn--zap{gap:10px} .btn--zap .btn__zap{flex:none;width:20px;height:20px} /* Atalho flutuante do WhatsApp. Fica abaixo do topo na pilha (z-index 40 contra 50) e sobe acima da área segura do iPhone. O círculo usa o degradê da marca, não o verde do WhatsApp: a cor é da Kronos, o ícone é que identifica o canal. */ .zap-flutua{ position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40; width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:var(--degrade);color:#fff; box-shadow:0 6px 20px rgba(14,26,31,.28); transition:transform .2s,box-shadow .2s; } .zap-flutua:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,26,31,.34);color:#fff} .zap-flutua:focus-visible{outline:2px solid var(--verde-claro);outline-offset:3px} @media (max-width:620px){ .zap-flutua{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px} .zap-flutua svg{width:25px;height:25px} } @media print{.zap-flutua{display:none}} /* ------------------------------------------------------------ hero */ .hero{position:relative;padding:190px 0 120px;overflow:hidden} .hero--interna{padding:170px 0 64px} .hero--interna.hero--foto{padding:160px 0 64px} .hero--foto:not(.hero--interna){padding:170px 0 88px} /* O símbolo ampliado e recortado, do grafismo Fluxo */ .hero::before{ content:"";position:absolute;right:-18vw;top:-14vw;width:72vw;max-width:1100px;aspect-ratio:1; background:var(--simbolo) center/contain no-repeat;pointer-events:none;opacity:.9; /* O símbolo entra pela direita e some antes da coluna de texto. Sem isto, o ponto final do título caía em cima de um traço e virava borrão. O recorte continua com folga mais de 40% visível, como o manual pede. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 72%); mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 72%); } .hero--interna::before{width:46vw;right:-14vw;top:-12vw;opacity:.5} html[data-tema="claro"] .hero::before{background-image:var(--mostrador);opacity:.9} html[data-tema="claro"] .hero--interna::before{opacity:.5} .hero__brilho{display:none} .hero__interno{position:relative;z-index:1} .hero h1{font-size:var(--t-display);max-width:13ch;margin-bottom:32px;letter-spacing:-.045em;line-height:.98} .hero--interna h1{font-size:clamp(36px,4.6vw,64px);max-width:18ch;margin-bottom:24px} .hero__linha{ background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent; } html:not([data-tema="claro"]) .hero__linha{background:linear-gradient(90deg,#9FD0BA,#6FB39C 60%,#4F9C9A);-webkit-background-clip:text;background-clip:text} .hero__sub{font-size:var(--t-sub);color:var(--sec);max-width:52ch;margin-bottom:44px;line-height:1.5} .hero--interna .hero__sub{font-size:clamp(16px,1.3vw,19px);margin-bottom:0} .hero__acoes{display:flex;gap:14px;flex-wrap:wrap} .hero__acoes--espaco{margin-top:36px} /* ----------------------------------------------------------- faixa */ .faixa{padding:var(--e7) 0;border-top:0;position:relative} .hero + .faixa{padding-top:64px} .faixa:nth-of-type(even){background:var(--faixa-alt)} .faixa--sem-linha{border-top:0} section[id]{scroll-margin-top:110px} /* Em pagina propria a seção vira o titulo da pagina e o h2 sobe para h1. Mesmo tamanho nos dois casos: quem manda no visual e a faixa, nao a etiqueta. Ver a promocao em montar.py. */ .faixa :is(h1,h2){font-size:var(--t-heading);margin-bottom:18px;max-width:22ch} .faixa__intro{color:var(--sec);max-width:60ch;margin-bottom:56px;font-size:clamp(16px,1.3vw,19px);line-height:1.55} /* ---------------------------------------------------- painel de mercado */ .painel{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; background:var(--painel-fundo);position:relative;overflow:hidden; padding-inline:calc(max(0px,(100% - 1240px) / 2) + 40px); } .painel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--degrade)} html[data-tema="claro"] .painel{border-block:1px solid var(--borda-suave)} .painel > *{min-width:0} .metrica{padding:56px 28px;border-right:1px solid var(--borda-suave);display:flex;flex-direction:column;gap:12px} .metrica:first-child{padding-left:0} .metrica:last-child{padding-right:0;border-right:0} .metrica__rotulo{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fraco);margin:0;line-height:1.4} .metrica__valor{display:flex;align-items:baseline;gap:8px;margin:0} .metrica__num{font-family:var(--f-mono);font-size:var(--t-data);font-weight:500;line-height:1;letter-spacing:-.05em;color:var(--verde-claro);font-variant-numeric:tabular-nums} html[data-tema="claro"] .metrica__num{color:var(--petroleo)} .metrica__un{font-size:15px;color:var(--sec);white-space:nowrap} .faisca{width:110px;height:26px;display:block;overflow:visible} .faisca polyline{fill:none;stroke:var(--verde);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke} .metrica__periodo{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--verde-claro);margin:0} .metrica__fonte{font-size:13px;color:var(--fraco);margin:0;line-height:1.45} /* -------------------------------------------------------- registro */ .registro{border-top:1px solid var(--borda)} .registro__linha{ display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,300px); gap:14px 48px;align-items:start;padding:44px 0;border-bottom:1px solid var(--borda-suave); transition:background .25s,padding .25s; } .registro__linha:hover{background:var(--verde-veu)} .registro__rotulo{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--verde-claro);padding-top:8px} .registro__rotulo--num{font-size:28px;letter-spacing:-.02em;font-weight:500;color:var(--verde);padding-top:0} html:not([data-tema="claro"]) .registro__rotulo--num{color:var(--verde-claro)} .registro__corpo{min-width:0} .registro__titulo{font-size:clamp(22px,2.3vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin:0 0 12px} .registro__texto{color:var(--sec);font-size:16.5px;margin:0;max-width:60ch} .registro__marca{align-self:center;font-size:15px;line-height:1.5;color:var(--texto);padding-left:24px;border-left:3px solid var(--verde)} /* --------------------------------------------------------- camadas */ .camadas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:none;border:0} .camadas > *{min-width:0} .camada{ background:var(--card);padding:32px 28px;border-radius:var(--r); border-top:6px solid var(--verde);transition:transform .25s,background .25s; } .camada:nth-child(3){border-top-color:#1B695A} .camada:nth-child(4){border-top-color:#0D575C} .camada:nth-child(5){border-top-color:var(--petroleo)} .camada:hover{transform:translateY(-4px);background:var(--sup2)} .camada__cod{font-family:var(--f-mono);font-size:14px;color:var(--verde-claro);margin-bottom:22px} .camada__cod--porta{font-size:12px;letter-spacing:.1em;text-transform:uppercase} .camada h3{font-size:24px;margin-bottom:10px} .camada p{font-size:15.5px;color:var(--sec);line-height:1.55} .camada--porta{ grid-column:1/-1;border-top:0;color:#fff; background:var(--degrade-diag); display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr) minmax(0,300px); gap:4px 40px;align-items:center;padding:40px; } .camada--porta .camada__cod{grid-column:1;grid-row:1;margin-bottom:0;align-self:end;color:#fff} .camada--porta h3{grid-column:1;grid-row:2;margin-bottom:0;align-self:start;font-size:30px} .camada--porta p{grid-column:2;grid-row:1/3;color:rgba(255,255,255,.88)} .camada--porta .camada__porta{grid-column:3;grid-row:1/3;margin:0;padding:0 0 0 28px;border-top:0;border-left:1px solid rgba(255,255,255,.35);color:#fff} .camada--porta:hover{transform:none} .camada__porta{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--borda-suave);font-size:13.5px;color:var(--verde-claro);line-height:1.45} .grupos{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} .grupo{font-family:var(--f-mono);font-size:12.5px;color:var(--sec);border:1px solid var(--borda);border-radius:999px;padding:7px 16px} /* ----------------------------------------------------------- método */ .metodo{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;background:var(--card);border-radius:var(--r);overflow:hidden} .metodo__radio{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .metodo__indice{display:flex;flex-direction:column;border-right:1px solid var(--borda-suave);padding:12px 0} .metodo__aba{ display:flex;align-items:baseline;gap:18px;cursor:pointer;padding:16px 28px; border-left:4px solid transparent;color:var(--sec);transition:color .16s,border-color .16s,background .16s; } .metodo__aba:hover{color:var(--texto);background:var(--verde-veu)} .metodo__n{font-family:var(--f-mono);font-size:14px;color:var(--fraco);flex:none;transition:color .16s} .metodo__nome{font-size:18px;line-height:1.3} .metodo__painel{padding:56px 64px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden} /* O mostrador é textura de canto, nunca fundo do texto: entra só quando a coluna é larga o bastante e fica bem recuado, com opacidade baixa. */ .metodo__painel::before{content:"";position:absolute;right:-300px;top:50%;width:520px;height:520px;transform:translateY(-50%);background:var(--mostrador) center/contain no-repeat;opacity:.3;pointer-events:none;display:none} @media (min-width:1240px){.metodo__painel::before{display:block}} .metodo__eixo{position:relative;z-index:1} .metodo__eixo{display:none;position:relative} .metodo__etiqueta{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--verde-claro);margin:0 0 20px} .metodo__eixo h4{font-size:17px;margin:0 0 20px;font-weight:500;color:var(--sec);letter-spacing:0} .metodo__pergunta{font-size:clamp(24px,2.8vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.03em;color:var(--texto);margin:0;max-width:22ch} .metodo__radio:nth-of-type(1):checked ~ .metodo__indice .metodo__aba:nth-child(1), .metodo__radio:nth-of-type(2):checked ~ .metodo__indice .metodo__aba:nth-child(2), .metodo__radio:nth-of-type(3):checked ~ .metodo__indice .metodo__aba:nth-child(3), .metodo__radio:nth-of-type(4):checked ~ .metodo__indice .metodo__aba:nth-child(4), .metodo__radio:nth-of-type(5):checked ~ .metodo__indice .metodo__aba:nth-child(5), .metodo__radio:nth-of-type(6):checked ~ .metodo__indice .metodo__aba:nth-child(6), .metodo__radio:nth-of-type(7):checked ~ .metodo__indice .metodo__aba:nth-child(7){ color:var(--texto);border-left-color:var(--verde);background:var(--verde-veu-forte); } .metodo__radio:nth-of-type(1):checked ~ .metodo__indice .metodo__aba:nth-child(1) .metodo__n, .metodo__radio:nth-of-type(2):checked ~ .metodo__indice .metodo__aba:nth-child(2) .metodo__n, .metodo__radio:nth-of-type(3):checked ~ .metodo__indice .metodo__aba:nth-child(3) .metodo__n, .metodo__radio:nth-of-type(4):checked ~ .metodo__indice .metodo__aba:nth-child(4) .metodo__n, .metodo__radio:nth-of-type(5):checked ~ .metodo__indice .metodo__aba:nth-child(5) .metodo__n, .metodo__radio:nth-of-type(6):checked ~ .metodo__indice .metodo__aba:nth-child(6) .metodo__n, .metodo__radio:nth-of-type(7):checked ~ .metodo__indice .metodo__aba:nth-child(7) .metodo__n{color:var(--verde-claro)} .metodo__radio:nth-of-type(1):checked ~ .metodo__painel .metodo__eixo--1, .metodo__radio:nth-of-type(2):checked ~ .metodo__painel .metodo__eixo--2, .metodo__radio:nth-of-type(3):checked ~ .metodo__painel .metodo__eixo--3, .metodo__radio:nth-of-type(4):checked ~ .metodo__painel .metodo__eixo--4, .metodo__radio:nth-of-type(5):checked ~ .metodo__painel .metodo__eixo--5, .metodo__radio:nth-of-type(6):checked ~ .metodo__painel .metodo__eixo--6, .metodo__radio:nth-of-type(7):checked ~ .metodo__painel .metodo__eixo--7{display:block;animation:kronos-troca .25s ease-out} @keyframes kronos-troca{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .metodo__radio:nth-of-type(1):focus-visible ~ .metodo__indice .metodo__aba:nth-child(1), .metodo__radio:nth-of-type(2):focus-visible ~ .metodo__indice .metodo__aba:nth-child(2), .metodo__radio:nth-of-type(3):focus-visible ~ .metodo__indice .metodo__aba:nth-child(3), .metodo__radio:nth-of-type(4):focus-visible ~ .metodo__indice .metodo__aba:nth-child(4), .metodo__radio:nth-of-type(5):focus-visible ~ .metodo__indice .metodo__aba:nth-child(5), .metodo__radio:nth-of-type(6):focus-visible ~ .metodo__indice .metodo__aba:nth-child(6), .metodo__radio:nth-of-type(7):focus-visible ~ .metodo__indice .metodo__aba:nth-child(7){outline:2px solid var(--verde-claro);outline-offset:-2px} .eixo-saida{ display:flex;gap:24px;align-items:center;margin-top:16px;padding:32px 36px;border-radius:var(--r); background:#0E1A1F;color:#fff;position:relative;overflow:hidden; } .eixo-saida::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--degrade)} .eixo-saida__seta{font-size:24px;color:#9FD0BA;line-height:1;flex:none} .eixo-saida h4{font-size:20px;margin:0 0 6px;color:#fff} .eixo-saida p{font-size:15.5px;color:#C9D3D6;line-height:1.55;margin:0} /* --------------------------------------------- baseline × realizado */ .conta{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch} .conta > *{min-width:0} .conta__lado{background:var(--card);border-radius:var(--r);padding:36px} .conta__op{display:grid;place-items:center;font-family:var(--f-mono);font-size:40px;color:var(--fraco)} .conta__titulo{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--verde-claro);margin-bottom:16px} .conta__lado h3{font-size:28px;margin-bottom:14px} .conta__lado p{font-size:16px;color:var(--sec)} .conta__resultado{margin-top:16px;background:#0E1A1F;color:#fff;border-radius:var(--r);padding:32px 36px;position:relative;overflow:hidden} .conta__resultado::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--degrade)} .conta__formula{font-family:var(--f-mono);font-size:clamp(18px,2.2vw,26px);color:#9FD0BA} .conta__nota{color:#C9D3D6;font-size:16px;margin-top:10px} /* ---------------------------------------------- trilha (régua de tempo) */ .trilha{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--e2)} .trilha > *{min-width:0} .marco{position:relative} .marco__d,.marco h4,.marco p{padding-right:32px} .marco__ponto{display:flex;align-items:center;margin-bottom:24px} .marco__bola{width:18px;height:18px;border-radius:50%;background:var(--verde);flex:none;box-shadow:0 0 0 6px var(--verde-veu-forte)} .marco:nth-child(2) .marco__bola{background:#1B695A} .marco:nth-child(3) .marco__bola{background:#0D575C} .marco:nth-child(4) .marco__bola{background:var(--petroleo)} .marco__fio{height:4px;border-radius:2px;background:var(--borda);flex:1;margin-left:8px} .marco:last-child .marco__fio{background:linear-gradient(90deg,var(--borda),transparent)} .marco__d{font-family:var(--f-mono);font-size:14px;color:var(--verde-claro);margin-bottom:8px} .marco h4{font-size:21px;margin-bottom:10px} .marco p{font-size:15.5px;color:var(--sec)} /* ------------------------------------------------ entregável (deck) */ .entrega{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .entrega > *{min-width:0} .pagina{background:var(--card);border-radius:var(--r);overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;transition:.25s;width:100%} .pagina:hover{transform:translateY(-4px)} .pagina img{width:100%;height:auto;display:block} .pagina__txt{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .pagina__n{font-family:var(--f-mono);font-size:12.5px;color:var(--verde-claro);margin-bottom:10px} .pagina__txt h3{font-size:20px;margin-bottom:8px} .pagina__txt p{font-size:15px;color:var(--sec);line-height:1.5} .pagina__lupa{margin-top:auto;padding-top:16px;font-size:13.5px;color:var(--fraco);display:flex;align-items:center;gap:6px} .entrega__nota{margin-top:24px;padding:20px 24px;border-radius:var(--r);background:var(--sup2);font-size:15px;color:var(--sec);line-height:1.6} .entrega__nota strong{color:var(--texto);font-weight:500} .envio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;background:none;border:0} .envio > *{min-width:0} .envio div{background:var(--card);padding:26px 28px;border-radius:var(--r)} .envio h4{font-size:18px;margin-bottom:8px} .envio p{font-size:15px;color:var(--sec)} .lupa{position:fixed;inset:0;z-index:90;display:none;background:rgba(14,26,31,.94);padding:32px;align-items:center;justify-content:center} .lupa.on{display:flex} .lupa img{max-width:min(1400px,100%);max-height:100%;border-radius:var(--r)} .lupa__x{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-size:20px} .lupa__x:hover{background:rgba(255,255,255,.18)} /* O painel do formulário vinha colado na trilha: a faixa em degradê do topo dele encostava na última linha de texto dos marcos. */ .trilha + .form{margin-top:var(--e6)} @media (max-width:620px){.trilha + .form{margin-top:var(--e5)}} /* ------------------------------------------------------ formulário */ .form{background:var(--card);border-radius:var(--r);padding:44px;max-width:820px;position:relative;overflow:hidden} .form::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--degrade)} .form__grade{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form__grade > *{min-width:0} .campo{margin-bottom:18px} .campo--largo{grid-column:1 / -1} .campo label{display:block;font-size:14.5px;color:var(--sec);margin-bottom:8px} .campo label .req{color:var(--verde-claro)} .campo input[type="text"],.campo input[type="email"],.campo input[type="tel"],.campo textarea,.campo select{ width:100%;padding:14px 16px;border-radius:var(--r);background:var(--fundo);border:1px solid var(--borda);color:var(--texto);font-size:16px; } .campo textarea{min-height:120px;resize:vertical;font-family:inherit} .campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--verde-claro);outline:none;box-shadow:0 0 0 3px var(--verde-veu-forte)} .campo input::placeholder,.campo textarea::placeholder{color:var(--fraco)} .campo__dica{display:block;font-size:13px;color:var(--fraco);margin-top:6px;line-height:1.5} .arquivo{border:1px dashed var(--borda);border-radius:var(--r);padding:24px;background:var(--fundo);text-align:center;transition:.15s} .arquivo:hover,.arquivo.sobre{border-color:var(--verde-claro)} .arquivo input[type="file"]{width:100%;font-size:14px;color:var(--sec);cursor:pointer} .arquivo input[type="file"]::file-selector-button{ font:inherit;font-size:14px;font-weight:500;cursor:pointer;margin-right:14px;padding:10px 18px;border-radius:999px; background:var(--verde);color:#fff;border:0;transition:.15s; } .arquivo input[type="file"]::file-selector-button:hover{background:#1B695A} .arquivo__lista{list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:var(--verde-claro);text-align:left} .arquivo__lista li{margin-top:4px} .consenti{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--sec);line-height:1.55} .consenti input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--verde)} .consenti a{color:var(--verde-claro)} .form__ferrolho{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .recado{border-radius:var(--r);padding:18px 20px;margin-bottom:26px;font-size:15px;line-height:1.55;border:1px solid transparent} .recado--ok{background:var(--verde-veu-forte);border-color:var(--verde);color:var(--texto)} .recado--erro{background:rgba(229,105,93,.12);border-color:rgba(229,105,93,.4);color:var(--baixa)} .recado strong{font-weight:500;display:block;margin-bottom:4px} .aviso{margin-top:24px;padding:16px 18px;border-radius:var(--r);background:var(--sup2);font-size:14px;color:var(--sec);line-height:1.55} .aviso strong{color:var(--texto);font-weight:500} /* --------------------------------------------------------- contato */ .contato{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start} .contato > *{min-width:0} .contato__bloco{margin-bottom:30px} .contato__bloco h3{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--verde-claro);margin-bottom:8px;font-weight:500} .contato__bloco p,.contato__bloco a{font-size:18px;color:var(--texto);text-decoration:none} .contato__bloco a:hover{color:var(--verde-claro)} /* ------------------------------------------------------------ blog */ .artigos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .artigos > *{min-width:0} .artigo-cartao{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.25s} .artigo-cartao:hover{transform:translateY(-4px)} .artigo-cartao__capa{aspect-ratio:16/9;overflow:hidden;background:var(--sup2)} .artigo-cartao__capa img{width:100%;height:100%;object-fit:cover} .artigo-cartao__txt{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1} .artigo-cartao__data{font-family:var(--f-mono);font-size:12.5px;color:var(--verde-claro);margin-bottom:12px} .artigo-cartao__txt h3{font-size:22px;margin-bottom:10px} .artigo-cartao__txt h3 a{text-decoration:none;color:var(--texto)} .artigo-cartao__txt p{font-size:15px;color:var(--sec);line-height:1.55} .artigo-cartao__ler{margin-top:auto;padding-top:18px;font-size:14.5px;color:var(--verde-claro)} .artigo{max-width:760px;margin:0 auto} .artigo__cabeca{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--borda-suave)} .artigo__cabeca h1{font-size:clamp(34px,4.4vw,56px);margin-bottom:18px} .artigo__meta{font-family:var(--f-mono);font-size:13px;color:var(--fraco);display:flex;gap:16px;flex-wrap:wrap} .artigo__capa{margin-bottom:36px;border-radius:var(--r);overflow:hidden} .artigo__corpo{font-size:18px;color:var(--sec);line-height:1.75} .artigo__corpo > * + *{margin-top:24px} .artigo__corpo h2{font-size:30px;color:var(--texto);margin-top:48px} .artigo__corpo h3{font-size:22px;color:var(--texto);margin-top:36px} .artigo__corpo a{color:var(--verde-claro)} .artigo__corpo ul,.artigo__corpo ol{padding-left:22px} .artigo__corpo li + li{margin-top:8px} .artigo__corpo blockquote{border-left:4px solid var(--verde);padding-left:22px;margin-left:0;color:var(--texto);font-size:22px;font-weight:500} .artigo__corpo img{border-radius:var(--r)} .artigo__corpo code{font-family:var(--f-mono);font-size:15px;background:var(--sup2);padding:2px 6px;border-radius:3px} .artigo__corpo table{width:100%;border-collapse:collapse;font-size:16px} .artigo__corpo th{text-align:left;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fraco);padding:0 14px 12px 0;border-bottom:1px solid var(--borda)} .artigo__corpo td{padding:14px 14px 14px 0;border-bottom:1px solid var(--borda-suave);font-variant-numeric:tabular-nums} .paginacao{display:flex;gap:8px;flex-wrap:wrap;margin-top:56px;justify-content:center} .paginacao .page-numbers{min-width:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--borda);text-decoration:none;font-family:var(--f-mono);font-size:14px;color:var(--sec);text-align:center} .paginacao .page-numbers:hover{color:var(--texto);border-color:var(--verde-claro)} .paginacao .page-numbers.current{background:var(--verde);border-color:var(--verde);color:#fff} .busca{display:flex;gap:10px;max-width:560px} .busca input{flex:1;padding:14px 18px;border-radius:999px;background:var(--card);border:1px solid var(--borda)} .busca input:focus{border-color:var(--verde-claro);outline:none} .vazio{color:var(--sec);font-size:17px;max-width:60ch} /* ------------------------------------------------------ fechamento */ .fechamento{padding:128px 0;background:#0E1A1F;color:#fff;position:relative;overflow:hidden} .fechamento::before{ content:"";position:absolute;right:-24vw;top:50%;width:min(56vw,820px);aspect-ratio:1;transform:translateY(-50%); background:url('img/dial-branco.svg') center/contain no-repeat;opacity:.45;pointer-events:none; } .fechamento::after{ content:"";position:absolute;right:calc(-24vw + min(56vw,820px) * .33);top:50%;width:min(19vw,280px);aspect-ratio:1;transform:translateY(-50%); background:var(--simbolo) center/contain no-repeat;pointer-events:none; } /* Abaixo de 1240px a arte encosta na coluna de texto; ela recua até sair. */ @media (max-width:1240px){ .fechamento::before{right:-42vw;opacity:.28} .fechamento::after{right:calc(-42vw + min(56vw,820px) * .33);opacity:.5} } .fechamento .limite{position:relative;z-index:1} .fechamento .hero__acoes{position:relative;z-index:2} .fechamento .btn--fantasma{background:rgba(14,26,31,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .fechamento h2{font-size:clamp(36px,4.8vw,68px);max-width:14ch;margin-bottom:24px;color:#fff} .fechamento p{color:#C9D3D6;font-size:clamp(17px,1.4vw,20px);max-width:48ch;margin-bottom:40px} .fechamento .btn--fantasma{color:#fff;border-color:rgba(255,255,255,.35)} /* ------------------------------------------------------------- pé */ .pe{padding:72px 0 40px;background:#0A1418;color:#8599A0;font-size:14.5px;position:relative} .pe::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--degrade)} .pe__grade{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:48px} .pe__grade > *{min-width:0} .pe h4{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#C9D3D6;margin-bottom:18px;font-weight:500} .pe__marca .logo{color:#fff} .pe__marca p{margin-top:18px;max-width:40ch;line-height:1.6;color:#B4C2C7} .pe ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .pe a{color:#B4C2C7;text-decoration:none;transition:color .15s} .pe a:hover{color:#9FD0BA} .pe__linha{display:flex;gap:24px;flex-wrap:wrap;align-items:center;padding-top:28px;border-top:1px solid #1E323A;font-family:var(--f-mono);font-size:12.5px} .pe__linha > span:last-child{margin-left:auto} .pe .pe__legal{flex-direction:row;flex-wrap:wrap;gap:20px} /* ----------------------------------------- abertura com foto / curva */ .hero--foto .hero__interno{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .hero--foto::before{display:none} .hero--foto .hero__texto{min-width:0} .hero--foto h1{max-width:16ch} .hero--foto .hero__sub{max-width:44ch} .hero__foto{margin:0;min-width:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--sup2)} .hero__foto img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover} .hero__foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--degrade)} .hero--curva{min-height:clamp(560px,86vh,860px);display:flex;flex-direction:column;justify-content:center;padding:170px 0 88px} .curva{position:absolute;inset:auto 0 0 0;height:46%;z-index:0;overflow:hidden;opacity:.9} .curva__svg{display:block;width:100%;height:100%} .curva::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--fundo) 0%,transparent 45%)} .curva__grade line{stroke:var(--borda-suave);stroke-width:1} .curva__media{stroke:var(--fraco);stroke-width:1.4;stroke-dasharray:6 6;opacity:.7} .curva__area{fill:var(--verde-veu)} .curva__linha{fill:none;stroke:var(--verde);stroke-width:3;stroke-linejoin:round;stroke-linecap:round} .curva__extremo circle{fill:var(--verde-claro)} .curva__pulso{ transform-box:view-box; offset-path:path("M0,101.8 L61.8,81.7 L123.6,58.2 L185.5,111.9 L247.3,168.9 L309.1,199.1 L370.9,209.2 L432.7,182.3 L494.5,132 L556.4,75 L618.2,51.5 L680,158.8"); offset-rotate:0deg;animation:kronos-percorre 18s ease-in-out infinite alternate; } .curva__pulso-halo{fill:var(--verde-claro);opacity:.25;filter:blur(7px)} .curva__pulso-aro{fill:var(--verde-claro);opacity:.35;filter:blur(2px)} .curva__pulso-nucleo{fill:#fff} @keyframes kronos-percorre{from{offset-distance:0%}to{offset-distance:100%}} @media (prefers-reduced-motion:reduce){.curva__pulso{animation-name:none;offset-distance:85.4%}} /* ------------------------------------------------------ gráficos */ .grafico__alvo{cursor:default} .grafico__alvo:focus-visible{outline:2px solid var(--verde-claro);outline-offset:2px} .grafico__alvo:hover .grafico__seg{opacity:.85} .grafico__seg{transition:opacity .15s;stroke:var(--fundo);stroke-width:1} .grafico__pe{margin-top:var(--e3)} .grafico__unidade{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--fraco);margin:0 0 12px} .chaves{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin:0;padding:0} .chave{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--sec)} .chave::before{content:"";width:12px;height:12px;border-radius:3px;flex:none} .chave b{color:var(--texto);font-weight:500;font-family:var(--f-mono)} .chave--energia::before{background:#488350} .chave--tusd::before{background:#1B695A} .chave--ccee::before{background:#5E7F8C} .chave--kronos::before{background:#00475D} .grafico--economia{margin:48px 0 8px} .grafico__barra--base{fill:var(--sup2);stroke:var(--borda);stroke-width:1} .grafico__barra-rotulo{fill:var(--texto);font-size:15px;font-weight:500} .grafico__barra-sub{fill:var(--fraco);font-size:12px} .grafico__seg--energia{fill:#488350} .grafico__seg--tusd{fill:#1B695A} .grafico__seg--ccee{fill:#5E7F8C} .grafico__seg--kronos{fill:#00475D} html:not([data-tema="claro"]) .grafico__seg--kronos{fill:#9FD0BA} html:not([data-tema="claro"]) .chave--kronos::before{background:#9FD0BA} .grafico__vao rect{fill:var(--verde-veu-forte);stroke:var(--verde);stroke-width:1;stroke-dasharray:3 4} .grafico__vao line{stroke:var(--borda)} .grafico__vao-valor{fill:var(--verde-claro);font-size:18px;font-weight:500;font-family:var(--f-mono)} .grafico__vao-txt{fill:var(--texto);font-size:13.5px} .grafico__vao-txt--fraco{fill:var(--fraco);font-size:12px} .grafico__seta{stroke:var(--verde);stroke-width:1} .grafico__seta-txt{fill:var(--verde-claro);font-size:13px} .grafico__seta-txt--fraco{fill:var(--fraco);font-size:12px} /* ------------------------------------------------------ responsivo */ @media (max-width:1180px){ .painel{grid-template-columns:repeat(2,1fr)} .metrica:nth-child(odd){padding-left:0} .metrica:nth-child(even){padding-right:0;border-right:0} .metrica{border-bottom:1px solid var(--borda-suave)} .metrica:nth-child(n+3){border-bottom:0} .camadas,.trilha{grid-template-columns:repeat(2,1fr)} .trilha{gap:40px 0} .artigos,.entrega,.envio{grid-template-columns:1fr 1fr} .conta{grid-template-columns:1fr} .conta__op{display:none} .contato{grid-template-columns:1fr} .camada--porta{grid-template-columns:1fr;gap:10px} .camada--porta .camada__cod,.camada--porta h3,.camada--porta p,.camada--porta .camada__porta{grid-column:1;grid-row:auto} .camada--porta .camada__porta{border-left:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.35)} .menu{gap:22px} } @media (max-width:900px){ .metodo{grid-template-columns:1fr;background:none} .metodo__indice{display:none} .metodo__painel{padding:0;background:none} .metodo__eixo{display:block;padding:24px;margin-bottom:10px;background:var(--card);border-radius:var(--r);border-left:4px solid var(--verde)} .metodo__etiqueta{margin-bottom:8px} .metodo__eixo h4{font-size:19px;margin-bottom:8px;color:var(--texto)} .metodo__pergunta{font-size:17px;font-weight:400;max-width:none;line-height:1.5;color:var(--sec);letter-spacing:0} .marco__fio{display:none} .registro__linha{grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:12px 32px} .registro__marca{grid-column:2} .hero--foto .hero__interno{grid-template-columns:1fr;gap:40px} .hero__foto img{max-height:340px} .limite{padding:0 28px} .painel{padding-inline:28px} .hero::before{width:110vw;right:-50vw;top:-30vw;opacity:.35} .fechamento::before{opacity:.16;right:-56vw} .fechamento::after{opacity:.3;right:-34vw} } @media (max-width:1024px){ .menu-abrir{display:grid} .menu{ display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; padding:8px 28px 24px;background:var(--fundo);border-bottom:1px solid var(--borda); } .menu.aberto{display:flex} .menu a{padding:16px 0;border-bottom:1px solid var(--borda-suave);font-size:18px} .menu a::after{display:none} .topo__interno{gap:16px} } @media (max-width:620px){ .trilha,.painel,.camadas,.artigos,.entrega,.envio,.form__grade,.pe__grade{grid-template-columns:1fr} .metrica{border-right:0;padding:28px 0} .metrica:nth-child(n+3){border-bottom:1px solid var(--borda-suave)} .metrica:last-child{border-bottom:0} .registro__linha{grid-template-columns:1fr;gap:10px;padding:30px 0} .registro__rotulo{padding-top:0} .registro__marca{grid-column:1} .limite,.limite--texto{padding:0 20px} .painel{padding-inline:20px} .form{padding:28px 22px} .hero{padding:120px 0 72px} .hero--interna{padding:112px 0 44px} .hero--curva{min-height:0;padding:120px 0 200px} .faixa{padding:72px 0} .fechamento{padding:88px 0} .tese{flex-direction:column;gap:14px} .tese::before{transform:none} .pe__linha span:last-child{margin-left:0} .grafico text{font-size:15px} } @media (max-width:460px){ .topo__acoes .btn--primario{display:none} .grafico__eixo-x text:nth-child(2),.grafico__eixo-x text:nth-child(4),.grafico__eixo-x text:nth-child(6){display:none} } @media print{ .topo,.fechamento,.pe,.tema-btn,.hero__acoes,.form,.hero__foto,.hero::before{display:none} body{background:#fff;color:#000} } /* Campo isca do formulário: o robô preenche, a pessoa nunca vê. Fora da tela em vez de display:none, que alguns robôs já detectam. */ .isca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}