@layer kng-projeto {
.env { width: 100%; max-inline-size: var(--larg-conteudo); margin-inline: auto;
padding-inline: var(--margem); }
.env.estreito { max-inline-size: var(--larg-leitura); }
.secao { padding-block: var(--esp-xxl); }
.secao.alt { background: var(--fundo-superficie); }
.secao.inverso { background: var(--fundo-inverso); color: var(--texto-sobre-inverso); }
h1, h2, h3 { margin: 0; }
h2 { font-size: var(--texto-display-m); font-weight: 700; line-height: 1.1;
letter-spacing: -.01em; margin-block-end: var(--esp-lg);
max-inline-size: 20ch; }
.secao.estreito h2, .env.estreito h2 { max-inline-size: none; }
p { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center;
gap: var(--esp-xs); min-block-size: var(--alvo-toque);
padding-inline: var(--esp-lg); border: 0; cursor: pointer;
font: inherit; font-size: var(--texto-body-m); font-weight: 600;
text-decoration: none; border-radius: var(--raio-pill);
background: var(--acento); color: var(--texto-forte);
transition: transform var(--tempo-micro) var(--curva-entrada),
box-shadow var(--tempo-curta) var(--curva-entrada),
filter var(--tempo-curta) var(--curva-entrada); }
.btn.linha { background: transparent; color: currentColor;
box-shadow: inset 0 0 0 1px currentColor; }
.btn.peq { padding: var(--esp-xs) var(--esp-md);
font-size: var(--texto-label); text-transform: none; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) {
.btn:hover { filter: brightness(var(--sobre-brilho)); box-shadow: var(--sobre-elevacao); }
.btn.linha:hover { filter: none; box-shadow: inset 0 0 0 2px currentColor; }
}
.btn:active { transform: scale(var(--ativo-escala)); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: var(--desligado-opacidade);
cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
.acoes { display: flex; gap: var(--esp-md); flex-wrap: wrap; align-items: center;
margin-block-start: var(--esp-lg); }
.acoes.centro { justify-content: center; margin-block-start: var(--esp-xl); }
.topo { position: sticky; inset-block-start: 0; z-index: var(--camada-cabecalho);
background: var(--fundo-inverso); color: var(--texto-sobre-inverso); }
.topo .env { display: flex; align-items: center; justify-content: space-between;
gap: var(--esp-lg); padding-block: var(--esp-sm); }
.topo-mk { display: block; inline-size: 132px; color: inherit; }
.topo-mk svg, .rd-mk svg { inline-size: 100%; block-size: auto; display: block; }
.topo nav { display: flex; align-items: center; gap: var(--esp-md); }
.topo nav a { color: inherit; text-decoration: none; font-size: var(--texto-label);
text-transform: none; letter-spacing: 0; opacity: .78;
min-block-size: var(--alvo-toque); display: inline-flex; align-items: center; }
.topo nav a:hover { opacity: 1; }
.topo nav .btn { opacity: 1; color: var(--texto-forte); }
@media (max-width: 860px) { .topo nav a:not(.btn) { display: none; } }
.hero { position: relative; overflow: hidden; background: var(--fundo-inverso);
color: var(--texto-sobre-inverso); display: grid; align-items: center;
min-block-size: min(88svh, 760px); }
.hero-foto { position: absolute; inset: 0 0 0 auto; inline-size: 58%; }
.hero-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-veu { position: absolute; inset: 0;
background: linear-gradient(90deg,
var(--fundo-inverso) 0%,
color-mix(in srgb, var(--fundo-inverso) 82%, transparent) 30%,
color-mix(in srgb, var(--fundo-inverso) 24%, transparent) 64%,
transparent 100%); }
.hero-txt { position: relative; z-index: var(--camada-elevado);
padding-block: var(--esp-xxl); }
.etq { display: inline-block; background: var(--acento); color: var(--texto-forte);
border-radius: var(--raio-pill); padding: var(--esp-xs) var(--esp-md);
font-size: var(--texto-label); font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; margin-block-end: var(--esp-md); }
.hero h1 { font-size: var(--texto-display-xl); font-weight: 700; line-height: 1.04;
letter-spacing: -.02em; max-inline-size: 16ch; }
.hero h1 em { font-style: normal; background: var(--acento); color: var(--texto-forte);
padding-inline: var(--esp-xs); border-radius: var(--raio-campo);
box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .sub { font-size: var(--texto-heading-m); font-weight: 400;
margin-block-start: var(--esp-md); max-inline-size: 34ch; opacity: .82; }
.hero .prova { margin-block-start: var(--esp-lg); font-size: var(--texto-label);
letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
@media (max-width: 860px) {
.hero-foto { inline-size: 100%; }
.hero-veu { background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 92%, transparent) 0%,
color-mix(in srgb, var(--fundo-inverso) 76%, transparent) 60%,
var(--fundo-inverso) 100%); }
.hero h1, .hero .sub { max-inline-size: none; }
}
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--esp-lg); }
.num b { display: block; font-size: var(--texto-numero); font-weight: 700;
line-height: 1; letter-spacing: -.02em; }
.num span { display: block; margin-block-start: var(--esp-xs);
font-size: var(--texto-label); letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-medio); }
.nota { margin-block-start: var(--esp-lg); font-size: var(--texto-label);
text-transform: none; letter-spacing: 0; color: var(--texto-medio);
max-inline-size: var(--larg-leitura); }
h2.curto { max-inline-size: 24ch; }
.passos { list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--esp-lg); counter-reset: p; }
.passos li { counter-increment: p; position: relative;
padding-block-start: var(--esp-md);
border-block-start: 2px solid var(--acento); }
.passos .ic { display: block; color: var(--acento-sobre-claro);
margin-block-end: var(--esp-sm); }
.passos b { display: block; font-size: var(--texto-heading-m); font-weight: 600; }
.passos .prazo { display: inline-block; margin-block: var(--esp-xs);
font-size: var(--texto-label); letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-medio); }
.passos .txt { display: block; margin-block-start: var(--esp-xs);
font-size: var(--texto-body-m); color: var(--texto-medio); }
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--esp-md); }
.galeria figure { margin: 0; }
.galeria img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3;
object-fit: cover; border-radius: var(--raio-card); display: block; }
.galeria figcaption { margin-block-start: var(--esp-xs);
font-size: var(--texto-label); letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-medio); }
blockquote { margin: var(--esp-xl) 0 0; padding-inline-start: var(--esp-lg);
border-inline-start: 3px solid var(--acento); max-inline-size: var(--larg-leitura); }
blockquote p { font-size: var(--texto-heading-m); }
blockquote cite { display: block; margin-block-start: var(--esp-sm);
font-style: normal; font-size: var(--texto-label); letter-spacing: .1em;
text-transform: uppercase; color: var(--texto-medio); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--esp-md); }
.card { background: var(--fundo-base); border-radius: var(--raio-card);
padding: var(--esp-lg); }
.secao.alt .card { background: var(--fundo-base); }
.card .ic { display: block; color: var(--acento-sobre-claro);
margin-block-end: var(--esp-md); }
.card h3 { font-size: var(--texto-heading-m); font-weight: 600; }
.card p { margin-block-start: var(--esp-xs); font-size: var(--texto-body-m);
color: var(--texto-medio); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-xxl);
align-items: center; }
.par-txt p { margin-block-start: var(--esp-md); font-size: var(--texto-body-m);
color: var(--texto-medio); max-inline-size: 46ch; }
.par-img img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3;
object-fit: cover; border-radius: var(--raio-card); display: block; }
@media (max-width: 860px) { .par { grid-template-columns: 1fr; gap: var(--esp-lg); } }
.faq details { border-block-end: 1px solid var(--borda); }
.faq summary { display: flex; align-items: center; justify-content: space-between;
gap: var(--esp-md); cursor: pointer; list-style: none;
min-block-size: var(--alvo-toque); padding-block: var(--esp-md);
font-size: var(--texto-heading-m); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq .ch { color: var(--acento-sobre-claro); flex: none;
transition: transform var(--tempo-curta) var(--curva-entrada); }
.faq details[open] .ch { transform: rotate(90deg); }
.faq .resp { padding-block-end: var(--esp-md); }
.faq .resp p { font-size: var(--texto-body-m); color: var(--texto-medio);
max-inline-size: var(--larg-leitura); }
.secao.inverso .sub { margin-block-start: var(--esp-sm);
font-size: var(--texto-body-m); opacity: .74; }
.form { display: grid; gap: var(--esp-md); margin-block-start: var(--esp-xl); }
.campo-l { display: grid; gap: var(--esp-xs); }
.campo-l > span { font-size: var(--texto-label); letter-spacing: .1em;
text-transform: uppercase; opacity: .74; }
.campo { font: inherit; font-size: var(--texto-body-m);
min-block-size: var(--alvo-toque); padding: var(--esp-sm) var(--esp-md);
background: var(--fundo-superficie); color: var(--texto-forte);
border: 1px solid var(--borda); border-radius: var(--raio-campo);
transition: border-color var(--tempo-curta) var(--curva-entrada); }
.campo:focus { border-color: var(--acento); }
.campo[aria-invalid="true"] { border-color: var(--erro-cor); border-width: 2px; }
.msg-erro { font-style: normal; font-size: var(--texto-label);
text-transform: none; letter-spacing: 0; color: var(--erro-cor); }
.form .btn { justify-self: start; }
.form .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.form-msg { margin-block-start: var(--esp-sm); font-size: var(--texto-body-m); }
.ou { margin-block-start: var(--esp-lg); font-size: var(--texto-body-m); opacity: .74; }
.ou a { color: var(--acento); padding-block: calc((var(--alvo-toque) - 1.5em) / 2); }
.form-msg a { color: var(--acento);
padding-block: calc((var(--alvo-toque) - 1.5em) / 2); }
.rodape { background: var(--fundo-inverso); color: var(--texto-sobre-inverso);
padding-block: var(--esp-xl); }
.rodape .env { display: flex; flex-wrap: wrap; gap: var(--esp-xl);
align-items: flex-start; justify-content: space-between; }
.rd-mk { inline-size: 148px; }
.rd-col { display: grid; gap: var(--esp-xs); font-size: var(--texto-label);
text-transform: none; letter-spacing: 0; opacity: .7; }
.rd-col a { color: inherit; min-block-size: var(--alvo-toque);
display: inline-flex; align-items: center; }
.zap { position: fixed; inset-block-end: var(--esp-md);
inset-inline-end: var(--esp-md); z-index: var(--camada-grudado);
display: inline-flex; align-items: center; gap: var(--esp-xs);
min-block-size: var(--alvo-toque); padding-inline: var(--esp-md);
background: var(--acento); color: var(--texto-forte);
border-radius: var(--raio-pill); box-shadow: var(--sombra-elevada);
text-decoration: none; font-size: var(--texto-body-m); font-weight: 600;
transition: transform var(--tempo-micro) var(--curva-entrada); }
.zap:active { transform: scale(var(--ativo-escala)); }
@media (max-width: 640px) { .zap span { display: none; } .zap { padding-inline: var(--esp-sm); } }
.galeria:empty { display: none; }
.galeria:empty ~ * { margin-block-start: 0; }
}
@layer kng-projeto {
.hero-simb, .placa-simb { position: absolute; pointer-events: none;
color: var(--acento); }
.hero-simb { inset-block-start: -12%; inset-inline-start: -8%;
inline-size: min(62vw, 720px); opacity: .07; }
.placa-simb { inset-block-start: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); inline-size: min(78vw, 900px); opacity: .06; }
.hero-simb svg, .placa-simb svg { inline-size: 100%; block-size: auto; display: block; }
.hero-simb svg path, .placa-simb svg path { fill: none; stroke: currentColor;
stroke-width: 6; vector-effect: non-scaling-stroke; }
.circ-pe { position: absolute; inset-block-end: 0; inset-inline: 0;
block-size: 3.4rem; overflow: hidden; opacity: .5; pointer-events: none; }
.circ-pe svg { inline-size: 100%; block-size: 100%; display: block; }
.hero, .secao.inverso, .placa { position: relative; }
.secao.inverso { padding-block-end: calc(var(--esp-xxl) + 3.4rem); }
.grad { background-image: linear-gradient(96deg,
var(--apoio-acento-calor) 0%, var(--apoio-acento-quente) 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent; }
.placa { background: var(--fundo-inverso); overflow: hidden;
padding-block: var(--esp-xxl); display: grid; place-items: center; }
.placa-palco { perspective: 1400px; inline-size: min(72vw, 460px); }
.placa-caixa { transform: rotateX(var(--tombo, 62deg)) rotateZ(var(--giro, -8deg));
transform-origin: 50% 60%; will-change: transform; }
.placa-svg { inline-size: 100%; block-size: auto; display: block;
filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.placa-svg > g > rect:first-child { fill: color-mix(in srgb, var(--fundo-inverso) 70%, #000);
stroke: color-mix(in srgb, var(--texto-sobre-inverso) 26%, transparent); }
.placa-svg > g > rect:nth-child(2) { fill: color-mix(in srgb, var(--fundo-inverso) 88%, #000);
stroke: none; }
.placa-svg .celula path { fill: color-mix(in srgb, var(--fundo-inverso) 62%, #000);
stroke: color-mix(in srgb, var(--texto-sobre-inverso) 12%, transparent);
transition: fill var(--tempo-media) var(--curva-entrada); }
.placa-svg .celula line { stroke: color-mix(in srgb, var(--texto-sobre-inverso) 10%, transparent); }
[data-entra] { opacity: 0; transform: translateY(14px) scale(.98);
transition: opacity var(--tempo-curta) var(--curva-entrada),
transform var(--tempo-curta) var(--curva-entrada);
transition-delay: calc(var(--i, 0) * 70ms); }
[data-entra].entrou { opacity: 1; transform: none; }
.h1-termo { display: block; font-size: var(--texto-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; opacity: 1;
color: var(--acento); margin-block-end: var(--esp-sm); }
.faq { position: relative; }
.faq::before { content: ""; position: absolute; inset-block-start: -2.2rem;
inset-inline-end: 0; inline-size: 142px; block-size: 34px; opacity: .5;
background: var(--hachura) center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) {
.placa-caixa { transform: rotateX(14deg) rotateZ(-6deg) !important; }
.placa-svg .celula path { transition: none; }
[data-entra] { transform: none; transition-delay: 0ms; }
}
}
@layer kng-projeto {
.placa-svg .celula.on path { fill: var(--acento); }
.placa-svg .celula.on[id*="-0"] path,
.placa-svg .celula.on[id*="-1"] path { fill: var(--apoio-acento-frio); }
.placa-svg .celula.on[id*="-4"] path,
.placa-svg .celula.on[id*="-5"] path { fill: var(--apoio-acento-calor); }
.placa-caixa::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(114deg,
color-mix(in srgb, #fff 16%, transparent) 0%,
transparent 38%, transparent 62%,
color-mix(in srgb, #fff 7%, transparent) 100%);
mix-blend-mode: screen; }
.placa-caixa { position: relative; }
.placa { display: grid; grid-template-rows: 1fr auto; align-content: center;
padding-block: var(--esp-xl) calc(var(--esp-xxl) + 3.4rem);
color: var(--texto-sobre-inverso); }
.placa-palco { inline-size: min(64vw, 380px); justify-self: center; }
.placa-txt { text-align: center; margin-block-start: var(--esp-lg);
position: relative; z-index: var(--camada-elevado); }
.placa-txt .rot { color: var(--acento); opacity: .9; }
.placa-txt p { font-size: var(--texto-heading-m); margin-block-start: var(--esp-xs);
max-inline-size: 34ch; margin-inline: auto; opacity: .84; }
}
@layer kng-projeto {
.corte { position: absolute; inset-inline: 0; inset-block-end: -1px;
block-size: clamp(38px, 5.4vw, 76px); pointer-events: none; line-height: 0;
color: var(--fundo-base); }
.corte svg { inline-size: 100%; block-size: 100%; display: block; }
.corte-massa { fill: currentColor; }
.corte-linha { fill: none; stroke: var(--acento); stroke-width: 2;
vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.corte-cima { inset-block: -1px auto; transform: scaleY(-1); }
.corte-pinta-superficie { color: var(--fundo-superficie); }
.corte-pinta-base { color: var(--fundo-base); }
.corte-pinta-inverso { color: var(--fundo-inverso); }
.corte-pinta-inverso-superficie { color: var(--fundo-inverso-superficie); }
.secao.placa { padding-block: calc(var(--esp-xxl) + 4vw); }
.num b { display: block;
color: transparent; -webkit-text-stroke: 2px var(--acento-sobre-claro);
paint-order: stroke fill; }
.num b u { text-decoration: none; font-variant-numeric: tabular-nums; }
.num b i { font-style: normal; font-size: .42em; letter-spacing: -.01em;
-webkit-text-stroke-width: 1.2px; }
.num span { margin-block-start: var(--esp-sm); }
.nums { gap: var(--esp-xl) var(--esp-lg); align-items: end; }
.num.forte b { -webkit-text-stroke-width: 0;
background-image: linear-gradient(96deg, var(--apoio-acento-calor), var(--apoio-acento-quente));
-webkit-background-clip: text; background-clip: text; }
@media (prefers-reduced-motion: reduce) { .num b u { transition: none; } }
}
@layer kng-projeto {
.num b { display: grid; grid-template-columns: auto 1fr; align-items: baseline;
column-gap: .12em; }
.num b .pre { grid-column: 1; }
.num b u { grid-column: 2; justify-self: start; }
.num b .pos { grid-column: 2; font-size: .26em; letter-spacing: .04em;
line-height: 1.2; margin-block-start: .3em; -webkit-text-stroke-width: 1px;
max-inline-size: 9em; }
.num b:not(:has(.pre)) u { grid-column: 1 / -1; }
.nums { align-items: start; }
.placa { grid-template-rows: auto auto; justify-items: center; }
.placa-txt { text-align: center; max-inline-size: 46ch; margin-inline: auto;
margin-block-end: var(--esp-xl); }
.placa-txt h2 { margin-block: var(--esp-sm) 0; max-inline-size: none; }
.placa-txt .sub { font-size: var(--texto-body-m); opacity: .74;
margin-block-start: var(--esp-md); }
}
@layer kng-projeto {
.placa-txt { max-inline-size: min(100%, 62ch); }
.placa-txt h2 { max-inline-size: 19ch; margin-inline: auto; }
.placa-txt .sub { max-inline-size: 52ch; margin-inline: auto; }
.galeria figure { position: relative; }
.galeria figure::after { content: ""; position: absolute; inset-block-start: 0;
inset-inline-end: 0; inline-size: 44px; block-size: 44px;
background: linear-gradient(135deg, transparent 46%, var(--acento) 46%,
var(--acento) 54%, transparent 54%),
linear-gradient(135deg, transparent 62%, var(--acento) 62%,
var(--acento) 70%, transparent 70%);
opacity: .9; pointer-events: none;
border-start-end-radius: var(--raio-card); }
.galeria img { transition: transform var(--tempo-media) var(--curva-entrada); }
@media (hover: hover) and (pointer: fine) {
.galeria figure { overflow: hidden; border-radius: var(--raio-card); }
.galeria figure:hover img { transform: scale(1.04); }
}
.faq::before { content: none; }
.faq details { transition: border-color var(--tempo-curta) var(--curva-entrada); }
.faq details[open] { border-inline-start: 3px solid var(--acento);
padding-inline-start: var(--esp-md); margin-inline-start: calc(var(--esp-md) * -1); }
.faq summary { transition: color var(--tempo-micro) var(--curva-entrada); }
@media (hover: hover) and (pointer: fine) {
.faq summary:hover { color: var(--acento-sobre-claro); }
}
.faq summary:focus-visible { outline: var(--foco-contorno) solid var(--foco-cor);
outline-offset: var(--foco-afastamento); }
}
@layer kng-projeto {
:root { --corte-alt: clamp(72px, 9.5vw, 132px); }
.corte { block-size: var(--corte-alt); }
.via-escuro, .via-claro { fill: none; stroke-width: 1.4;
vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.via-escuro { stroke: color-mix(in srgb, var(--acento) 46%, transparent); }
.via-claro { stroke: color-mix(in srgb, var(--acento-sobre-claro) 40%, transparent); }
.corte-linha { stroke-width: 2.4; }
}
@layer kng-projeto {
.placa { grid-template-columns: 1fr; grid-template-rows: auto;
justify-items: stretch; align-content: center; }
.placa-miolo { display: grid; grid-template-columns: 1fr 1fr;
gap: var(--esp-xxl); align-items: center;
inline-size: 100%; max-inline-size: var(--larg-conteudo);
margin-inline: auto; padding-inline: var(--margem);
position: relative; z-index: var(--camada-elevado); }
.placa-txt { text-align: start; max-inline-size: none; margin: 0; }
.placa-txt h2 { max-inline-size: 15ch; margin-inline: 0; }
.placa-txt .sub { max-inline-size: 42ch; margin-inline: 0; }
.placa-palco { inline-size: min(100%, 400px); justify-self: center; }
.placa-simb { inset-inline: auto -6%; inset-block-start: 46%;
transform: translateY(-50%); inline-size: min(52vw, 620px); }
@media (max-width: 860px) {
.placa-miolo { grid-template-columns: 1fr; gap: var(--esp-xl); }
.placa-palco { inline-size: min(72vw, 320px); }
.placa-simb { inset-inline: -20% auto; }
}
}
@layer kng-projeto {
.hero-quadro { position: absolute; inset: 0; opacity: 0;
transition: opacity var(--tempo-longa) var(--curva-entrada); }
.hero-quadro.ativo { opacity: 1; }
.hero-quadro img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-foto:not([data-pronto]) .hero-quadro:first-child { opacity: 1; }
.rodape { position: relative; overflow: hidden; isolation: isolate;
padding-block: calc(var(--esp-xxl) * 1.6) var(--esp-xl); }
.rd-foto { position: absolute; inset: 0; z-index: -2; }
.rd-foto img { inline-size: 100%; block-size: 100%; object-fit: cover;
object-position: 50% 0; }
.rd-veu { position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 60%, transparent) 0%,
color-mix(in srgb, var(--fundo-inverso) 82%, transparent) 46%,
var(--fundo-inverso) 100%); }
.rodape .env { position: relative; align-items: flex-end; }
.rd-mk { inline-size: 168px; }
.rd-col a { text-decoration: none; }
.rd-col a:hover { opacity: 1; color: var(--acento); }
}
@layer kng-projeto {
.rodape { padding-block: calc(var(--esp-xxl) * 1.4) var(--esp-lg); }
.rd-topo { display: grid; grid-template-columns: auto 1fr auto;
gap: var(--esp-xl); align-items: center; }
.rd-topo .rd-mk { inline-size: 168px; }
.rd-frase { font-size: var(--texto-heading-m); max-inline-size: 34ch;
opacity: .84; }
.rd-fio { block-size: 1px; background: color-mix(in srgb,
var(--texto-sobre-inverso) 16%, transparent); margin-block: var(--esp-xl); }
.rd-baixo { display: flex; flex-wrap: wrap; gap: var(--esp-lg) var(--esp-xxl);
justify-content: space-between; align-items: flex-start; }
.rd-col { display: grid; gap: var(--esp-xs); font-size: var(--texto-label);
text-transform: none; letter-spacing: 0; color: color-mix(in srgb,
var(--texto-sobre-inverso) 62%, transparent); }
.rd-links a { display: inline-flex; align-items: center; gap: var(--esp-xs);
color: inherit; text-decoration: none; min-block-size: var(--alvo-toque);
transition: color var(--tempo-micro) var(--curva-entrada); }
@media (hover: hover) and (pointer: fine) { .rd-links a:hover { color: var(--acento); } }
.rd-fim { text-align: end; justify-items: end; }
.rd-kng { opacity: .6; }
@media (max-width: 860px) {
.rd-topo { grid-template-columns: 1fr; gap: var(--esp-lg); }
.rd-fim { text-align: start; justify-items: start; }
}
}
@layer kng-projeto {
.secao.inverso { isolation: isolate; overflow: hidden;
padding-block: calc(var(--esp-xxl) * 1.3) calc(var(--esp-xxl) + 4vw); }
.cta-foto { position: absolute; inset: 0; z-index: -2; }
.cta-foto img { inline-size: 100%; block-size: 100%; object-fit: cover;
object-position: 50% 0; }
.cta-veu { position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 60%, transparent) 0%,
color-mix(in srgb, var(--fundo-inverso) 84%, transparent) 48%,
var(--fundo-inverso) 100%); }
.secao.inverso .env { position: relative; }
.rodape { padding-block: var(--esp-xl) var(--esp-lg); }
}
@layer kng-projeto {
.topo { background: color-mix(in srgb, var(--fundo-inverso) 72%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
border-block-end: 0; }
@media (prefers-reduced-transparency: reduce) {
.topo { background: var(--fundo-inverso); backdrop-filter: none;
-webkit-backdrop-filter: none; }
}
.topo .env { min-block-size: 72px; padding-block: var(--esp-xs); }
.topo-mk { inline-size: 156px; }
.topo nav { gap: var(--esp-lg); }
.topo nav a:not(.btn) { gap: var(--esp-xs); opacity: .72;
font-size: var(--texto-label); letter-spacing: .02em;
transition: opacity var(--tempo-micro) var(--curva-entrada),
color var(--tempo-micro) var(--curva-entrada); }
.topo nav .ic { display: inline-flex; color: var(--acento); opacity: .8;
transition: opacity var(--tempo-micro) var(--curva-entrada); }
@media (hover: hover) and (pointer: fine) {
.topo nav a:not(.btn):hover { opacity: 1; }
.topo nav a:not(.btn):hover .ic { opacity: 1; }
}
.topo nav a:focus-visible { outline: var(--foco-contorno) solid var(--foco-cor);
outline-offset: var(--foco-afastamento); border-radius: var(--raio-campo); }
.topo-fio { display: flex; justify-content: center; }
.topo-fio span { display: block; inline-size: 100%;
max-inline-size: calc(var(--larg-conteudo) - var(--margem) * 2);
block-size: 1.5px; border-radius: 2px;
background: linear-gradient(90deg, transparent 0%,
var(--apoio-acento-calor) 18%, var(--apoio-acento-quente) 62%,
transparent 100%); }
@media (max-width: 860px) {
.topo .env { min-block-size: 62px; }
.topo-mk { inline-size: 132px; }
}
}
@layer kng-projeto {
.cf { --cf-cartao: clamp(200px, 26vw, 340px);
--cf-perspectiva: 3;
inline-size: 100%; margin-block-start: var(--esp-lg); }
.cf-palco { overflow: hidden; padding-block: var(--esp-xl);
cursor: grab; outline: none;
perspective: calc(var(--cf-cartao) * var(--cf-perspectiva));
touch-action: pan-y; }
.cf-palco:active { cursor: grabbing; }
.cf-palco:focus-visible { outline: var(--foco-contorno) solid var(--foco-cor);
outline-offset: calc(var(--foco-afastamento) * -1); }
.cf-pista { position: relative; block-size: calc(var(--cf-cartao) * 0.75);
transform-style: preserve-3d; user-select: none; }
.cf-cartao { position: absolute; inset-block-start: 0; inset-inline-start: 50%;
inline-size: var(--cf-cartao); aspect-ratio: 4 / 3; margin: 0;
overflow: hidden; border-radius: var(--raio-card);
background: var(--fundo-inverso); box-shadow: var(--sombra-elevada);
will-change: transform, opacity; }
.cf-cartao img { inline-size: 100%; block-size: 100%; object-fit: cover;
display: block; user-select: none; -webkit-user-drag: none; }
.cf-cartao::after { content: ""; position: absolute; inset: 0;
border-radius: inherit; box-shadow: inset 0 0 0 0 var(--acento);
transition: box-shadow var(--tempo-curta) var(--curva-entrada);
pointer-events: none; }
.cf-cartao.centro::after { box-shadow: inset 0 0 0 2px var(--acento); }
.cf-baixo { display: flex; align-items: center; justify-content: center;
gap: var(--esp-md); margin-block-start: var(--esp-md); }
.cf-seta { display: inline-flex; align-items: center; justify-content: center;
inline-size: var(--alvo-toque); min-block-size: var(--alvo-toque);
border: 1px solid var(--borda); border-radius: var(--raio-pill);
background: var(--fundo-superficie); color: var(--texto-forte);
cursor: pointer; font: inherit;
transition: transform var(--tempo-micro) var(--curva-entrada),
border-color var(--tempo-curta) var(--curva-entrada); }
@media (hover: hover) and (pointer: fine) {
.cf-seta:hover { border-color: var(--texto-forte); }
}
.cf-seta:active { transform: scale(var(--ativo-escala)); }
.cf-legendas { position: relative; min-inline-size: min(52vw, 320px);
min-block-size: 1.6em; text-align: center; }
.cf-leg { position: absolute; inset: 0; opacity: 0;
font-size: var(--texto-label); letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-medio);
transition: opacity var(--tempo-curta) var(--curva-entrada); }
.cf-leg.ativa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.cf-cartao { transition: none; }
}
}
@layer kng-projeto {
.topo { position: fixed; inset-block-start: 0; inset-inline: 0;
background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
transition: background var(--tempo-curta) var(--curva-entrada),
backdrop-filter var(--tempo-curta) var(--curva-entrada); }
.topo .topo-fio { opacity: 0;
transition: opacity var(--tempo-curta) var(--curva-entrada); }
.topo.solido { background: color-mix(in srgb, var(--fundo-inverso) 72%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3); }
.topo.solido .topo-fio { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
.topo.solido { background: var(--fundo-inverso); backdrop-filter: none;
-webkit-backdrop-filter: none; }
}
.hero { min-block-size: min(94svh, 880px);
padding-block-start: 72px; }
.hero-foto { inset: 0; inline-size: 100%; }
.hero-veu { background:
linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 46%, transparent) 0%,
transparent 34%, transparent 62%,
color-mix(in srgb, var(--fundo-inverso) 52%, transparent) 100%),
linear-gradient(96deg,
var(--fundo-inverso) 0%,
var(--fundo-inverso) 38%,
color-mix(in srgb, var(--fundo-inverso) 94%, transparent) 54%,
color-mix(in srgb, var(--fundo-inverso) 78%, transparent) 70%,
color-mix(in srgb, var(--fundo-inverso) 58%, transparent) 86%,
color-mix(in srgb, var(--fundo-inverso) 44%, transparent) 100%); }
.hero::before { content: ""; position: absolute; inset-block-start: 0;
inset-inline: 0; block-size: 180px; z-index: 1; pointer-events: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 72%, transparent) 0%,
transparent 100%); }
@media (max-width: 860px) {
.hero { min-block-size: min(88svh, 720px); padding-block-start: 62px; }
.hero-veu { background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 92%, transparent) 0%,
color-mix(in srgb, var(--fundo-inverso) 84%, transparent) 44%,
color-mix(in srgb, var(--fundo-inverso) 94%, transparent) 78%,
var(--fundo-inverso) 100%); }
}
.dp { position: relative; overflow: hidden; background: var(--fundo-superficie); }
.dp-numero { position: absolute; inset-inline-start: -.08em;
inset-block-start: 50%; transform: translateY(-50%);
font-weight: 700; line-height: .8; letter-spacing: -.06em; color: var(--texto-forte); opacity: .04;
pointer-events: none; user-select: none; }
.dp-numero span { position: absolute; inset-block-start: 0;
inset-inline-start: 0; opacity: 0; filter: blur(10px);
transform: scale(.86);
transition: opacity var(--tempo-media) var(--curva-entrada),
filter var(--tempo-media) var(--curva-entrada),
transform var(--tempo-media) var(--curva-entrada); }
.dp-numero span.ativo { opacity: 1; filter: blur(0); transform: none; }
.dp-miolo { display: grid; grid-template-columns: auto 1fr auto;
gap: var(--esp-xl); align-items: center; position: relative; }
.dp-lado { display: grid; justify-items: center; gap: var(--esp-lg);
padding-inline-end: var(--esp-lg);
border-inline-end: 1px solid var(--borda); }
.dp-rot { writing-mode: vertical-rl; text-orientation: mixed;
font-size: var(--texto-label); font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--texto-medio); }
.dp-trilho { position: relative; inline-size: 2px; block-size: 128px;
background: var(--borda); border-radius: 2px; }
.dp-trilho i { position: absolute; inset-block-start: 0; inset-inline: 0;
border-radius: 2px; background: var(--acento-sobre-claro);
block-size: calc(100% / var(--n));
transition: transform var(--tempo-media) var(--curva-entrada); }
.dp-palco { position: relative; min-block-size: 15rem; }
.dp-item { position: absolute; inset: 0; margin: 0;
opacity: 0; pointer-events: none;
transition: opacity var(--tempo-curta) var(--curva-entrada); }
.dp-item.ativo { opacity: 1; pointer-events: auto; }
.dp-item blockquote { margin: 0; font-size: var(--texto-display-m);
font-weight: 400; line-height: 1.16; letter-spacing: -.01em;
max-inline-size: 20ch; }
.dp-item blockquote span { display: inline-block; opacity: 0;
transform: translateY(16px);
transition: opacity var(--tempo-curta) var(--curva-entrada),
transform var(--tempo-curta) var(--curva-entrada); }
.dp-item.ativo blockquote span { opacity: 1; transform: none;
transition-delay: calc(var(--p) * 45ms); }
.dp-item figcaption { display: flex; align-items: center; gap: var(--esp-md);
margin-block-start: var(--esp-xl); }
.dp-regua { display: block; inline-size: 34px; block-size: 2px;
background: var(--acento-sobre-claro); transform: scaleX(0);
transform-origin: 0 50%;
transition: transform var(--tempo-media) var(--curva-entrada) 180ms; }
.dp-item.ativo .dp-regua { transform: none; }
.dp-item figcaption b { display: block; font-size: var(--texto-body-m);
font-weight: 600; }
.dp-item figcaption em { display: block; font-style: normal;
font-size: var(--texto-label); letter-spacing: .06em; text-transform: uppercase;
color: var(--texto-medio); margin-block-start: 2px; }
.dp-setas { display: flex; gap: var(--esp-sm); }
@media (prefers-reduced-motion: reduce) {
.dp-item blockquote span, .dp-regua, .dp-numero span { transition: none; }
.dp-item.ativo blockquote span { transition-delay: 0ms; }
}
@media (max-width: 860px) {
.dp-miolo { grid-template-columns: 1fr; gap: var(--esp-lg); }
.dp-lado { flex-direction: row; justify-items: start;
border-inline-end: 0; padding-inline-end: 0; }
.dp-rot { writing-mode: horizontal-tb; }
.dp-trilho { inline-size: 100%; block-size: 2px; }
.dp-trilho i { block-size: 100%; inline-size: calc(100% / var(--n));
inset-block: 0; inset-inline-start: 0; }
.dp-setas { justify-content: flex-end; }
}
}
@layer kng-projeto {
.num b { font-size: var(--texto-display-xxl); line-height: .92;
letter-spacing: -.04em; }
.nums { grid-template-columns: none; grid-auto-flow: column;
grid-auto-columns: max-content; justify-content: space-between; }
.num[data-sinais="6"] b { font-size: calc(var(--texto-display-xxl) * .74); }
.num[data-sinais="7"] b { font-size: calc(var(--texto-display-xxl) * .62); }
@media (max-width: 900px) {
.nums { grid-auto-flow: row; grid-auto-columns: auto;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
justify-content: start; }
}
.num, .num b u, .nums { min-inline-size: 0; }
.dp-numero { font-size: calc(var(--texto-display-xxl) * 3.6); }
}
@layer kng-projeto {
.cta-miolo { display: grid; grid-template-columns: 1fr minmax(0, 440px);
gap: var(--esp-xxl); align-items: center; position: relative;
z-index: var(--camada-elevado); }
.cta-txt h2 { max-inline-size: 15ch; margin-block: var(--esp-sm) 0; }
.cta-txt .rot { color: var(--acento); }
.cta-txt .sub { margin-block-start: var(--esp-md); max-inline-size: 34ch; }
.cta-gar { list-style: none; margin: var(--esp-xl) 0 0; padding: 0;
display: grid; gap: var(--esp-sm); }
.cta-gar li { display: flex; align-items: center; gap: var(--esp-sm);
font-size: var(--texto-body-m);
color: color-mix(in srgb, var(--texto-sobre-inverso) 78%, transparent); }
.cta-gar svg { color: var(--acento); flex: none; }
.cta-cartao { background: color-mix(in srgb, var(--fundo-inverso-superficie) 92%, transparent);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 12%, transparent);
border-radius: var(--raio-card); padding: var(--esp-xl);
box-shadow: var(--sombra-elevada); }
@media (prefers-reduced-transparency: reduce) {
.cta-cartao { background: var(--fundo-inverso-superficie);
backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cta-cartao .form { grid-template-columns: 1fr 1fr; margin-block-start: 0; }
.campo-l.largo, .cta-cartao .form .btn, .cta-cartao .form-msg { grid-column: 1 / -1; }
.cta-cartao .form .btn { justify-self: stretch; margin-block-start: var(--esp-xs); }
.cta-cartao .ou { margin-block-start: var(--esp-md); text-align: center;
font-size: var(--texto-label); text-transform: none; letter-spacing: 0; }
.cta-cartao .ou a { display: inline-flex; align-items: center; gap: 6px; }
.cta-simb { position: absolute; inset-inline-start: -8%; inset-block-start: 50%;
transform: translateY(-50%); inline-size: min(46vw, 520px); opacity: .06;
color: var(--acento); pointer-events: none; }
.cta-simb svg { inline-size: 100%; block-size: auto; display: block; }
.cta-simb svg path { fill: none; stroke: currentColor; stroke-width: 6;
vector-effect: non-scaling-stroke; }
@media (max-width: 860px) {
.cta-miolo { grid-template-columns: 1fr; gap: var(--esp-xl); }
.cta-cartao { padding: var(--esp-lg); }
.cta-cartao .form { grid-template-columns: 1fr; }
.cta-simb { inline-size: 90vw; opacity: .05; }
}
.dp-cara { display: block; inline-size: 64px; block-size: 64px; flex: none;
border-radius: var(--raio-pill); overflow: hidden;
box-shadow: 0 0 0 2px var(--acento-sobre-claro); }
.dp-cara img { inline-size: 100%; block-size: 100%; object-fit: cover;
object-position: 50% 22%; display: block; }
}
@layer kng-projeto {
.cta-cartao .campo { min-inline-size: 0; inline-size: 100%; }
.cta-cartao .campo-l { min-inline-size: 0; }
.cta-cartao .form { gap: var(--esp-md) var(--esp-sm); }
.cta-cartao .ou { font-size: var(--texto-body-m); }
.cta-cartao .ou a { color: var(--acento); text-decoration: none;
padding-block: calc((var(--alvo-toque) - 1.5em) / 2); }
@media (hover: hover) and (pointer: fine) {
.cta-cartao .ou a:hover { text-decoration: underline; }
}
}
@layer kng-projeto {
.rot { display: block; font-size: var(--texto-label); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--texto-medio);
margin-block-end: var(--esp-sm); }
.secao.inverso .rot, .placa .rot { color: color-mix(in srgb,
var(--texto-sobre-inverso) 64%, transparent); }
.placa-txt .rot, .cta-txt .rot { color: var(--acento); }
}
@layer kng-projeto {
.topo-mk, .rd-mk { display: flex; align-items: center; }
.topo-mk svg, .rd-mk svg { inline-size: 100%; block-size: auto; display: block; }
}
@layer kng-projeto {
.rodape { background: var(--fundo-inverso-superficie);
color: var(--texto-sobre-inverso); }
.rd-col { opacity: 1; }
.rd-kng { opacity: 1; color: color-mix(in srgb,
var(--texto-sobre-inverso) 58%, transparent); }
.rodape .rd-baixo { display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--esp-xl) var(--esp-lg); align-items: start; justify-items: center; }
.rd-baixo .rd-col { justify-items: center; text-align: center; }
.rd-fim { text-align: center; justify-items: center; }
.rd-tit { font-size: var(--texto-label); font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: color-mix(in srgb,
var(--texto-sobre-inverso) 46%, transparent); margin-block-end: var(--esp-xs); }
.rd-contato { gap: var(--esp-xs); }
.rd-contato a { display: inline-grid; grid-template-columns: 1.15rem auto;
align-items: center; gap: var(--esp-sm); min-block-size: var(--alvo-toque);
justify-self: center; padding-inline: var(--esp-md);
border-radius: 99px;
background: color-mix(in srgb, var(--texto-sobre-inverso) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 12%, transparent);
color: color-mix(in srgb, var(--texto-sobre-inverso) 88%, transparent);
text-decoration: none;
transition: background-color var(--tempo-curta) var(--curva-entrada),
border-color var(--tempo-curta) var(--curva-entrada),
color var(--tempo-curta) var(--curva-entrada); }
.rd-contato svg { justify-self: center; color: var(--acento); opacity: .85;
transition: opacity var(--tempo-micro) var(--curva-entrada); }
.rd-contato span { overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
.rd-contato a:hover { color: var(--texto-sobre-inverso);
background: color-mix(in srgb, var(--texto-sobre-inverso) 13%, transparent);
border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.rd-contato a:hover svg { opacity: 1; }
}
.rd-contato a:active { transform: scale(var(--ativo-escala)); }
.rd-contato a:focus-visible, .rd-pe a:focus-visible {
outline: var(--foco-contorno) solid var(--foco-cor);
outline-offset: var(--foco-afastamento); }
.rd-fim a { color: inherit; }
.rodape .rd-pe { display: grid; grid-template-columns: 1fr auto 1fr;
gap: var(--esp-lg); align-items: center; justify-content: stretch;
margin-block-start: var(--esp-md); padding-block-start: var(--esp-md);
border-block-start: 1px solid color-mix(in srgb,
var(--texto-sobre-inverso) 12%, transparent);
font-size: var(--texto-label); color: color-mix(in srgb,
var(--texto-sobre-inverso) 52%, transparent); }
.rodape .rd-pe::after { content: ""; }
.rd-selo { display: grid; justify-items: center; gap: var(--esp-xs); }
.rd-simb { display: block; inline-size: 38px;
color: color-mix(in srgb, var(--texto-sobre-inverso) 34%, transparent); }
.rd-simb svg { inline-size: 100%; block-size: auto; display: block; }
.rd-simb svg path { fill: currentColor; }
.rd-copy { letter-spacing: .06em; }
.rd-kng { display: inline-grid; justify-items: start; gap: 3px;
color: color-mix(in srgb, var(--texto-sobre-inverso) 62%, transparent);
text-decoration: none; padding-block: 2px;
transition: color var(--tempo-curta) var(--curva-entrada); }
.rd-kng-rot { font-size: 6.5px; line-height: 1; letter-spacing: .40em;
text-transform: uppercase; font-weight: 400; padding-inline-start: .2em; }
.kng-mk { inline-size: 88px; block-size: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
.rd-kng:hover { color: var(--texto-sobre-inverso); }
}
.rd-topo { grid-template-columns: auto 1fr; align-items: center; }
.rd-frase { max-inline-size: none; }
@media (max-width: 760px) {
.rd-pe { grid-template-columns: 1fr; justify-items: center;
text-align: center; gap: var(--esp-lg); }
.rd-pe::after { display: none; }
.rd-selo { order: -1; }
.rd-kng { justify-items: center; }
.rd-topo { grid-template-columns: 1fr; }
}
}
@layer kng-projeto {
.secao.inverso { padding-block: calc(var(--esp-xxl) * 2.4)
calc(var(--corte-alt) + var(--esp-xl)); }
.cta-veu { background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 34%, transparent) 0%,
color-mix(in srgb, var(--fundo-inverso) 64%, transparent) 38%,
color-mix(in srgb, var(--fundo-inverso) 88%, transparent) 100%); }
.cta-miolo { align-items: end; }
.cta-cartao { background: color-mix(in srgb,
var(--fundo-inverso-superficie) 68%, transparent);
backdrop-filter: blur(22px) saturate(1.25);
-webkit-backdrop-filter: blur(22px) saturate(1.25);
border-color: color-mix(in srgb, var(--texto-sobre-inverso) 18%, transparent);
box-shadow: 0 24px 60px color-mix(in srgb, #000 34%, transparent); }
.cta-cartao .campo { background: color-mix(in srgb,
var(--texto-sobre-inverso) 92%, transparent); }
.secao.inverso .sub { opacity: .82; }
@media (prefers-reduced-transparency: reduce) {
.cta-cartao { background: var(--fundo-inverso-superficie);
backdrop-filter: none; -webkit-backdrop-filter: none; }
.cta-veu { background: linear-gradient(180deg,
color-mix(in srgb, var(--fundo-inverso) 60%, transparent) 0%,
var(--fundo-inverso) 100%); }
}
@media (max-width: 860px) {
.secao.inverso { padding-block: calc(var(--esp-xxl) * 1.6)
calc(var(--corte-alt) + var(--esp-lg)); }
.cta-miolo { align-items: stretch; }
}
}
@layer kng-projeto {
.hx { position: relative; }
.hx::before, .hx::after { content: ""; position: absolute; pointer-events: none;
inline-size: var(--hx-tam, 92px); block-size: var(--hx-tam, 92px);
background: repeating-linear-gradient(45deg,
var(--acento-sobre-claro) 0 2px, transparent 2px 10px);
opacity: 0; transition: opacity var(--tempo-longa) var(--curva-entrada); }
.hx::before { inset-block-start: 0; inset-inline-end: 0;
-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 64%);
mask-image: linear-gradient(225deg, #000 0%, transparent 64%); }
.hx::after { inset-block-end: 0; inset-inline-start: 0;
-webkit-mask-image: linear-gradient(45deg, #000 0%, transparent 64%);
mask-image: linear-gradient(45deg, #000 0%, transparent 64%); }
.hx.entrou::before, .hx.entrou::after { opacity: var(--hx-op, .5); }
.hx:not([data-entra])::before, .hx:not([data-entra])::after { opacity: var(--hx-op, .5); }
.sub-secao { margin-block: var(--esp-md) var(--esp-xl);
font-size: var(--texto-body-m); color: var(--texto-medio);
max-inline-size: var(--larg-leitura); }
.fichas { list-style: none; margin: var(--esp-lg) 0 0; padding: var(--esp-lg) 0 0;
border-block-start: 1px solid var(--borda);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--esp-lg) var(--esp-md); }
.fichas li { display: grid; gap: 2px; align-content: start; }
.fichas b { font-size: calc(var(--texto-numero) * .52); font-weight: 700;
line-height: 1; color: var(--acento-sobre-claro);
font-variant-numeric: tabular-nums; }
.fichas span { font-size: var(--texto-label); font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--texto-medio);
text-wrap: balance; }
@media (max-width: 520px) { .fichas { grid-template-columns: 1fr; } }
.quadro { position: absolute; inset: 0; opacity: 0;
transition: opacity var(--tempo-longa) var(--curva-entrada); }
.quadro.ativo { opacity: 1; }
[data-troca]:not([data-pronto]) .quadro:first-child { opacity: 1; }
.par-troca { position: relative; aspect-ratio: 4 / 3;
border-radius: var(--raio-card); overflow: hidden; }
.par-troca .quadro img { inline-size: 100%; block-size: 100%;
object-fit: cover; border-radius: 0; display: block; }
.selo-num { display: flex; align-items: baseline; gap: var(--esp-sm);
margin-block-start: var(--esp-lg); padding-block-start: var(--esp-lg);
border-block-start: 1px solid var(--borda); }
.selo-num b { font-size: calc(var(--texto-numero) * .58); font-weight: 700;
line-height: 1; color: var(--acento-sobre-claro);
font-variant-numeric: tabular-nums; }
.selo-num span { font-size: var(--texto-label); font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--texto-medio); }
.obras-tit { text-align: center; }
.obras-tit h2 { max-inline-size: 20ch; margin-inline: auto; }
#obras { --hx-tam: clamp(120px, 15vw, 208px); --hx-op: .46; }
#obras::before { inset-block-start: 0; inset-inline-end: 0; }
#obras::after { inset-block-end: 0; inset-inline-start: 0; }
@media (max-width: 860px) {
#obras { --hx-tam: 96px; --hx-op: .34; }
}
.tit-centro { text-align: center; max-inline-size: 22ch;
margin-inline: auto; }
.cards { --hx-tam: 58px; --hx-op: .5; }
.card { overflow: hidden;
transition: transform var(--tempo-curta) var(--curva-entrada),
box-shadow var(--tempo-curta) var(--curva-entrada); }
.card.hx::before { inset-block-start: 0; inset-inline-end: 0;
transform: translate(7px, -7px); }
.card.hx::after { content: none; }
.card .ic { display: inline-block;
transition: transform var(--tempo-media) var(--curva-enfase); }
@media (hover: hover) and (pointer: fine) {
.card:hover { transform: translateY(-4px);
box-shadow: 0 3px 12px color-mix(in srgb, var(--texto-forte) 8%, transparent); }
.card:hover.hx::before { opacity: var(--hx-op); transform: none; }
.card:hover .ic { transform: rotate(6deg) scale(1.04); }
}
.card.hx::before { transition: opacity var(--tempo-curta) var(--curva-entrada),
transform var(--tempo-media) var(--curva-entrada); }
.card.hx::before { opacity: calc(var(--hx-op) * .45); }
@media (prefers-reduced-motion: reduce) {
.card, .card .ic, .card.hx::before { transition: none; }
.card:hover { transform: none; }
.card:hover .ic { transform: none; }
}
.dp-numero { inset-inline: auto clamp(var(--esp-md), 3vw, var(--esp-xxl));
inset-block-start: 50%;
transform: translateY(-50%); opacity: .46;
background-image: linear-gradient(160deg,
var(--acento) 0%, var(--apoio-acento-calor) 52%, var(--acento-sobre-claro) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
-webkit-text-stroke: 2px var(--acento-sobre-claro); }
.dp-numero span { inset-inline: auto 0; }
.dp-numero span { filter: none; }
.dp-numero span.ativo { filter: none; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.dp-numero { background-image: none; color: transparent;
-webkit-text-fill-color: transparent; }
}
@media (max-width: 860px) {
.dp-numero { inset-inline: auto -.06em; opacity: .3; -webkit-text-stroke-width: 1.5px; }
}
}
@layer kng-projeto {
@property --risco-op {
syntax: '<number>'; inherits: false; initial-value: 0;
}
.risco { --risco-alt: clamp(4px, .085em, 9px); --risco-op: 0;
font-style: normal;
box-decoration-break: clone; -webkit-box-decoration-break: clone;
background-image: linear-gradient(90deg,
color-mix(in srgb, var(--acento) calc(var(--risco-op) * 100%), transparent) 0%,
color-mix(in srgb, var(--apoio-acento-calor) calc(var(--risco-op) * 100%), transparent) 25%,
color-mix(in srgb, var(--acento-sobre-claro) calc(var(--risco-op) * 100%), transparent) 50%,
color-mix(in srgb, var(--apoio-acento-calor) calc(var(--risco-op) * 100%), transparent) 75%,
color-mix(in srgb, var(--acento) calc(var(--risco-op) * 100%), transparent) 100%);
background-repeat: no-repeat;
background-size: 0% var(--risco-alt);
background-position-x: 0%;
background-position-y: calc(100% - .05em);
transition: background-size var(--tempo-longa) var(--curva-entrada),
--risco-op var(--tempo-longa) var(--curva-entrada); }
.risco.entrou { --risco-op: 1; background-size: 200% var(--risco-alt);
animation: risco-corre 8s var(--curva-entrada) var(--tempo-longa) infinite alternate; }
@keyframes risco-corre {
from { background-position-x: 0%; }
to   { background-position-x: 100%; }
}
.secao.inverso .risco { background-image: linear-gradient(90deg,
color-mix(in srgb, var(--acento) calc(var(--risco-op) * 100%), transparent) 0%,
color-mix(in srgb, var(--apoio-acento-calor) calc(var(--risco-op) * 100%), transparent) 50%,
color-mix(in srgb, var(--acento) calc(var(--risco-op) * 100%), transparent) 100%); }
@media (prefers-reduced-motion: reduce) {
.risco { --risco-op: 1; background-size: 200% var(--risco-alt); transition: none; }
.risco.entrou { animation: none; }
}
}
@layer kng-projeto {
.hero-quadro img { transform: scale(1.02); transform-origin: 50% 50%; }
.hero-quadro.ativo img { animation: hero-respira 18s linear forwards; }
@keyframes hero-respira {
from { transform: scale(1.02); }
to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
.hero-quadro img { transform: none; }
.hero-quadro.ativo img { animation: none; }
}
.dp-numero { inset-block: 0; inset-inline: auto 0; transform: none;
inline-size: min(48%, 32rem); }
.dp-numero span { inset: 0; display: grid; place-items: center;
text-align: center; }
@media (max-width: 1180px) {
.dp-numero { inline-size: 100%; opacity: .3; }
}
@media (max-width: 860px) {
.dp-numero { -webkit-text-stroke-width: 1.5px; opacity: .26; }
}
}
@layer kng-projeto {
[data-entra] { opacity: 0; transform: translateY(22px) scale(.985);
transition: opacity var(--tempo-media) var(--curva-entrada),
transform var(--tempo-longa) var(--curva-entrada);
transition-delay: min(calc(var(--i, 0) * 90ms), 540ms); }
[data-entra].entrou { opacity: 1; transform: none; }
[data-entra].par-img, [data-entra] > img { transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
[data-entra] { transform: none; transition-delay: 0ms;
transition: opacity var(--tempo-curta) var(--curva-entrada); }
}
.rodape { padding-block-end: calc(var(--esp-sm) + var(--alvo-toque) + var(--esp-md)); }
#contato > .corte:not(.corte-cima) { color: var(--fundo-inverso-superficie); }
#contato > .corte.corte-cima { color: var(--fundo-base); }
#contato > .corte:not(.corte-cima) .via-claro {
stroke: color-mix(in srgb, var(--acento) 34%, transparent); }
.secao.inverso { padding-block-start: calc(var(--esp-xxl) + 5vw); }
}
@layer kng-projeto {
.faq-env { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
gap: var(--esp-xl) var(--esp-xxl); align-items: start; }
.faq-lado { position: sticky; inset-block-start: calc(4.5rem + var(--esp-lg)); }
.faq-lado h2 { max-inline-size: 14ch; }
.faq-lead { margin-block-start: var(--esp-md); font-size: var(--texto-body-m);
color: var(--texto-medio); max-inline-size: 34ch; }
.faq-acoes { display: flex; flex-direction: column; align-items: stretch;
gap: var(--esp-sm); margin-block-start: var(--esp-xl); max-inline-size: 20rem; }
.faq { display: grid; gap: var(--esp-sm); }
.faq-i { position: relative; background: var(--fundo-superficie);
border: 1px solid var(--borda); border-radius: var(--raio-card);
overflow: hidden;
transition: border-color var(--tempo-curta) var(--curva-entrada),
box-shadow var(--tempo-curta) var(--curva-entrada); }
.faq-i[open] { border-color: color-mix(in srgb, var(--texto-forte) 18%, var(--borda));
box-shadow: 0 2px 10px color-mix(in srgb, var(--texto-forte) 7%, transparent); }
.faq-i::before { content: ""; position: absolute;
inset-block-start: 0; inset-inline-end: 0;
inline-size: 46px; block-size: 46px; pointer-events: none;
background: repeating-linear-gradient(45deg,
var(--acento-sobre-claro) 0 2px, transparent 2px 9px);
-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 62%);
mask-image: linear-gradient(225deg, #000 0%, transparent 62%);
opacity: 0; transform: translate(6px, -6px);
transition: opacity var(--tempo-curta) var(--curva-entrada),
transform var(--tempo-media) var(--curva-entrada); }
.faq-i[open]::before { opacity: .58; transform: none; }
@media (prefers-reduced-motion: reduce) {
.faq-i::before { transition: none; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
.faq summary:hover { color: inherit; }
.faq-i:not([open]):hover { border-color: color-mix(in srgb,
var(--texto-forte) 22%, var(--borda)); }
.faq-i:not([open]):hover .ch { color: var(--texto-forte); }
.faq-i:not([open]):hover::before { opacity: .22; transform: none; }
}
.faq details { border-block-end: none; }
.faq details[open] { border-inline-start-width: 1px;
border-inline-start-style: solid; padding-inline-start: 0; margin-inline-start: 0; }
.faq summary { display: grid; grid-template-columns: auto 1fr auto;
align-items: start; gap: var(--esp-md);
padding: var(--esp-md) var(--esp-lg); }
.faq-n { font-size: var(--texto-label); font-weight: 600; letter-spacing: .06em;
color: var(--texto-sutil); font-variant-numeric: tabular-nums;
min-inline-size: 2.4em; padding: .35em .5em; border-radius: calc(var(--raio-card) / 3);
text-align: center; line-height: 1.15;
transition: background-color var(--tempo-curta) var(--curva-entrada),
color var(--tempo-curta) var(--curva-entrada); }
.faq-i[open] .faq-n { background: var(--acento); color: var(--texto-forte); }
.faq-q { font-size: var(--texto-heading-m); font-weight: 600; line-height: 1.35;
margin: 0; color: inherit; }
.faq .ch { margin-block-start: .25em; color: var(--texto-medio); }
.faq details[open] .ch { transform: rotate(90deg); }
.faq .resp { display: grid; grid-template-rows: 0fr; padding: 0;
transition: grid-template-rows var(--tempo-curta) var(--curva-entrada); }
.faq-i[open] .resp { grid-template-rows: 1fr; }
.faq .resp-i { overflow: hidden; min-block-size: 0; }
.faq { --faq-recuo: calc(var(--esp-lg) + var(--texto-label) * 2.4 + var(--esp-md)); }
.faq .resp p { padding: 0 var(--esp-lg) var(--esp-lg) var(--faq-recuo);
max-inline-size: var(--larg-leitura); }
@media (prefers-reduced-motion: reduce) { .faq .resp { transition: none; } }
@media (max-width: 1024px) {
.faq-env { grid-template-columns: 1fr; gap: var(--esp-xl); }
.faq-lado { position: static; }
.faq-lado h2 { max-inline-size: none; }
.faq-lead { max-inline-size: var(--larg-leitura); }
.faq-acoes { flex-direction: row; max-inline-size: none; }
}
@media (max-width: 560px) {
.faq-acoes { flex-direction: column; }
.faq summary { padding: var(--esp-md); gap: var(--esp-sm); }
.faq { --faq-recuo: var(--esp-md); }
.faq .resp p { padding: 0 var(--esp-md) var(--esp-md) var(--faq-recuo); }
}
}