/* GERADO por ferramentas/build_ativos.py -- edite fonte/css/style.css */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-altura) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.45;
color: var(--tinta);
background: var(--sup-1);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
overflow-x: clip;
transition: background-color .3s ease, color .3s ease;
}
::selection { background: var(--dourado); color: var(--navy); }
.pular-conteudo {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 14px 22px;
background: var(--navy);
color: #fff;
font-size: var(--fs-ui);
font-weight: 500;
}
.pular-conteudo:focus { left: var(--s-3); top: var(--s-3); }
h1 {
font-size: var(--fs-display);
font-weight: 300;
line-height: .98;
letter-spacing: -.02em;
}
h2 {
font-size: var(--fs-h2);
font-weight: 300;
line-height: 1.05;
letter-spacing: -.01em;
color: var(--tinta-titulo);
}
h3 {
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--tinta-titulo);
}
h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
p { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
h1, h2, h3, h4 { hyphens: none; text-wrap: balance; }
.eyebrow {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .01em;
color: var(--tinta-2);
margin-bottom: var(--s-3);
}
.lead {
font-size: var(--fs-lead);
line-height: 1.36;
max-width: 46ch;
}
.corpo { max-width: 62ch; }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mono {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .02em;
}
.citacao {
font-size: var(--fs-h2);
font-weight: 300;
line-height: 1.12;
letter-spacing: -.01em;
color: var(--tinta-titulo);
max-width: 20ch;
}
.secao--escura .citacao { color: var(--sobre-3); }
strong, b { font-weight: 500; }
p a, li a.link, .corpo a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--t-cor);
}
p a:hover, .corpo a:hover { color: var(--navy-hover); }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-lateral);
}
.secao { padding-block: var(--sec-y); background: var(--sup-1); }
.secao--offwhite { background: var(--sup-2); }
.secao--compacta { padding-block: var(--s-8); }
.secao--escura {
background: var(--sup-3);
color: var(--sobre-3);
--tinta-titulo: var(--sobre-3);
--tinta-2: var(--navy-luz);
--tinta-suave: var(--sobre-3-2);
--filete: var(--filete-esc);
--filete-forte: rgba(255, 255, 255, .3);
--borda-ui: var(--borda-ui-esc);
--accent-txt: var(--dourado);
--navy-chip: rgba(255, 255, 255, .12);
--foco: var(--dourado);
--traco: var(--dourado);
--traco-papel: #001427;
}
.secao--escura p { color: var(--sobre-3-2); }
.secao--erro {
min-height: 62vh;
display: grid;
align-items: center;
}
.secao--escura .lead, .secao--escura .corpo { color: var(--sobre-3-2); }
.secao--escura p a:hover, .secao--escura .corpo a:hover { color: var(--accent-txt); }
.bloco {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0;
}
.bloco--centro {
display: block;
text-align: center;
max-width: 48ch;
margin-inline: auto;
}
.bloco--centro .lead { max-width: none; margin-inline: auto; }
.bloco--centro .pilha { max-width: none !important; }
.bloco--centro .cta { justify-content: center; }
.bloco__esq { grid-column: span 4; padding-right: var(--s-5); }
.bloco__dir { grid-column: 5 / -1; }
@media (max-width: 1023px) {
.bloco { row-gap: var(--s-4); }
.bloco__esq, .bloco__dir { grid-column: 1 / -1; padding-right: 0; }
}
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--nav-altura);
border-bottom: 1px solid transparent;
transition: background-color .25s ease, box-shadow .25s ease,
border-color .25s ease, color .25s ease;
}
.nav__interno {
width: 100%;
max-width: var(--container);
height: 100%;
margin-inline: auto;
padding-inline: var(--pad-lateral);
display: flex;
align-items: center;
gap: var(--s-5);
}
.nav__marca { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__icone { width: 38px; height: auto; flex-shrink: 0; }
.nav__icone .moldura { fill: currentColor; }
.nav__icone .tela { fill: var(--dourado); }
.nav__icone .glifo { fill: var(--sup-1); }
.nav__nome {
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.06;
letter-spacing: -.01em;
}
.nav__nome span { display: block; font-size: .8125rem; font-weight: 400; opacity: .72; }
.nav__links { display: flex; gap: var(--s-5); align-items: center; }
.nav__links a {
position: relative;
font-size: var(--fs-ui);
font-weight: 500;
padding-block: 6px;
transition: color var(--t-cor);
}
.nav__links a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--dourado);
transform: scaleX(0);
transform-origin: left;
transition: transform .22s ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__acoes { display: flex; align-items: center; gap: var(--s-3); }
.nav__cta {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 20px;
border: 1px solid currentColor;
transition: background-color var(--t-cor), color var(--t-cor),
border-color var(--t-cor);
}
.nav--sobre-heroi { color: #fff; --dourado: #FDC500; }
.nav--sobre-heroi .nav__icone .glifo { fill: var(--navy); }
.nav--sobre-heroi .nav__cta { border-color: rgba(255, 255, 255, .6); }
.nav.is-rolado, .nav--solido {
background: var(--sup-1);
color: var(--tinta);
border-bottom-color: var(--filete);
box-shadow: 0 1px 20px rgba(0, 53, 102, .06);
}
.nav.is-rolado .nav__icone .glifo, .nav--solido .nav__icone .glifo { fill: var(--sup-1); }
.nav.is-rolado .nav__cta, .nav--solido .nav__cta { border-color: var(--borda-ui); }
.tema {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid transparent;
transition: border-color var(--t-cor), color var(--t-cor);
}
.tema:hover { border-color: currentColor; }
.tema svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tema__lua { display: none; }
:root[data-tema="escuro"] .tema__sol { display: none; }
:root[data-tema="escuro"] .tema__lua { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .tema__sol { display: none; }
:root:not([data-tema="claro"]) .tema__lua { display: block; }
}
.nav__hamburguer { display: none; width: 44px; height: 44px; place-items: center; }
.nav__hamburguer span, .nav__hamburguer span::before, .nav__hamburguer span::after {
display: block;
width: 22px;
height: 1px;
background: currentColor;
transition: transform .25s ease, opacity .25s ease;
}
.nav__hamburguer span::before, .nav__hamburguer span::after { content: ""; position: absolute; }
.nav__hamburguer span::before { transform: translateY(-7px); }
.nav__hamburguer span::after { transform: translateY(7px); }
.nav__hamburguer[aria-expanded="true"] span { background: transparent; }
.nav__hamburguer[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__hamburguer[aria-expanded="true"] span::after { transform: rotate(-45deg); }
.nav__painel {
position: fixed;
inset: var(--nav-altura) 0 auto 0;
display: none;
flex-direction: column;
padding: var(--s-5) var(--pad-lateral) var(--s-7);
background: var(--sup-1);
color: var(--tinta);
border-bottom: 1px solid var(--filete);
}
.nav__painel a {
padding-block: var(--s-3);
font-size: 1.125rem;
font-weight: 500;
border-bottom: 1px solid var(--filete);
}
.nav__painel .botao {
margin-top: var(--s-5);
justify-content: center;
border-bottom: 0;
font-size: var(--fs-ui);
}
.nav__painel {
max-height: calc(100svh - var(--nav-altura));
overflow-y: auto;
overscroll-behavior: contain;
}
.nav__painel.is-aberto { display: flex; }
@media (max-width: 1100px) {
.nav__links, .nav__cta { display: none; }
.nav__hamburguer { display: grid; position: relative; }
}
.intro { display: none; }
html.intro-ativa .intro {
position: fixed;
inset: 0;
z-index: 999;
display: grid;
place-items: center;
background: var(--sup-3);
animation: intro-seguranca 0s linear 8s forwards;
}
@keyframes intro-seguranca {
to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.intro__cena { display: grid; justify-items: center; gap: clamp(22px, 3.4vh, 46px); }
.intro__peca {
position: relative;
width: min(46vw, 380px);
aspect-ratio: 410 / 258;
will-change: transform;
}
.intro__marca { display: block; width: 100%; height: auto; }
.intro__marca .moldura { fill: #fff; }
.intro__marca .tela { fill: var(--dourado); }
.intro__marca .glifo { fill: var(--navy); }
.marca__contorno {
stroke-width: 3;
stroke-linejoin: miter;
vector-effect: non-scaling-stroke;
}
.intro__marca .marca__contorno { color: var(--navy-luz); }
html.intro-ativa .intro__peca { animation: intro-surge .9s var(--curva) backwards; }
@keyframes intro-surge {
from { opacity: 0; filter: blur(14px); }
to   { opacity: 1; filter: blur(0); }
}
html.intro-ativa .intro__marca .moldura,
html.intro-ativa .intro__marca .tela,
html.intro-ativa .intro__marca .glifo {
animation: intro-marca-entra .9s var(--curva) 1.6s backwards;
}
@keyframes intro-marca-entra { from { opacity: 0; } to { opacity: 1; } }
html.intro-ativa .intro__marca .marca__contorno path {
stroke-dasharray: 100;
animation: intro-marca-traco .9s var(--curva) .9s backwards,
intro-marca-some .7s var(--curva) 2.5s forwards;
}
@keyframes intro-marca-traco {
from { stroke-dashoffset: 100; }
to   { stroke-dashoffset: 0; }
}
@keyframes intro-marca-some { to { opacity: 0; } }
.intro__frase {
position: relative;
display: inline-flex;
align-items: center;
font-size: clamp(1rem, 1.9vw, 1.625rem);
font-weight: 300;
letter-spacing: .005em;
line-height: 1.3;
color: rgba(255, 255, 255, .94);
white-space: nowrap;
max-width: 92vw;
}
html.intro-ativa .intro__texto {
display: inline-block;
clip-path: inset(0 100% 0 0);
animation: intro-escrita 4s steps(46) forwards;
}
html.intro-ativa .intro__cursor {
position: absolute;
left: 0;
top: 50%;
width: 2px;
height: 1.15em;
margin-top: -.575em;
background: var(--dourado);
animation: intro-cursor 4s steps(46) forwards;
}
@keyframes intro-escrita {
0%   { clip-path: inset(0 100% 0 0); }
25%  { clip-path: inset(0 0 0 0); }
75%  { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 100% 0 0); }
}
@keyframes intro-cursor {
0%   { transform: translateX(0); opacity: 1; }
25%  { transform: translateX(var(--largura-frase, 0px)); opacity: 1; }
75%  { transform: translateX(var(--largura-frase, 0px)); opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
@media (max-width: 440px) {
.intro__frase { white-space: normal; max-width: 92vw; }
.intro__linha { display: block; width: max-content; white-space: nowrap; }
html.intro-ativa .intro__texto {
display: block;
clip-path: none;
animation: none;
}
html.intro-ativa .intro__linha { clip-path: inset(0 100% 0 0); }
html.intro-ativa .intro__linha:first-child {
animation: intro-escrita-l1 4s steps(26) forwards;
}
html.intro-ativa .intro__linha:last-child {
animation: intro-escrita-l2 4s steps(26) forwards;
}
html.intro-ativa .intro__cursor {
top: 0;
margin-top: .075em;
--dl: 1.3em;
animation: intro-cursor-2l 4s steps(26) forwards;
}
}
@keyframes intro-escrita-l1 {
0%     { clip-path: inset(0 100% 0 0); }
12.5%  { clip-path: inset(0 0 0 0); }
87.5%  { clip-path: inset(0 0 0 0); }
100%   { clip-path: inset(0 100% 0 0); }
}
@keyframes intro-escrita-l2 {
0%     { clip-path: inset(0 100% 0 0); }
12.5%  { clip-path: inset(0 100% 0 0); }
25%    { clip-path: inset(0 0 0 0); }
75%    { clip-path: inset(0 0 0 0); }
87.5%  { clip-path: inset(0 100% 0 0); }
100%   { clip-path: inset(0 100% 0 0); }
}
@keyframes intro-cursor-2l {
0%       { transform: translate(0, 0); opacity: 1; }
12.5%    { transform: translate(var(--l1, 0px), 0); opacity: 1; }
12.501%  { transform: translate(0, var(--dl)); opacity: 1; }
25%      { transform: translate(var(--l2, 0px), var(--dl)); opacity: 1; }
75%      { transform: translate(var(--l2, 0px), var(--dl)); opacity: 1; }
87.5%    { transform: translate(0, var(--dl)); opacity: 1; }
87.501%  { transform: translate(var(--l1, 0px), 0); opacity: 1; }
100%     { transform: translate(0, 0); opacity: 0; }
}
html.intro-ativa .heroi__peca {
opacity: 0;
animation: heroi-peca-volta 0s linear 8s forwards;
}
@keyframes heroi-peca-volta { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
html.intro-ativa .intro__peca { animation: none; }
html.intro-ativa .intro__texto { animation: none; clip-path: none; }
html.intro-ativa .intro__linha { animation: none; clip-path: none; }
html.intro-ativa .intro__cursor { display: none; }
html.intro-ativa .intro__marca .moldura,
html.intro-ativa .intro__marca .tela,
html.intro-ativa .intro__marca .glifo { animation: none; }
html.intro-ativa .intro__marca .marca__contorno path {
animation: none;
opacity: 0;
}
html.intro-ativa .intro { animation: intro-seguranca 0s linear .8s forwards; }
}
.heroi {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
padding-top: var(--nav-altura);
padding-bottom: var(--s-8);
background: var(--sup-3);
color: #fff;
overflow: hidden;
overflow-x: clip;
overflow-y: visible;
isolation: isolate;
}
.heroi {
--traco-papel: #F2F5F8;
--traco: #003566;
--braco-traco: #9FBEE0;
--braco-aceso: #FDC500;
--braco-traco-baixo: #003566;
--braco-aceso-baixo: #6B5000;
--braco-ganho-baixo: 1.15;
--braco-linha-fina: 0.9px;
--braco-linha-grossa: 1.8px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .heroi {
--braco-traco-baixo: #9FBEE0;
--braco-aceso-baixo: #FDC500;
--braco-ganho-baixo: .92;
}
}
:root[data-tema="escuro"] .heroi {
--braco-traco-baixo: #9FBEE0;
--braco-aceso-baixo: #FDC500;
--braco-ganho-baixo: .92;
}
.reticula { position: relative; }
.reticula::before {
content: "";
position: absolute;
inset: 0;
z-index: var(--reticula-z, 0);
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
-webkit-mask-image: radial-gradient(120% 90% at var(--reticula-x, 62%) var(--reticula-y, 45%),
#000 20%, transparent 78%);
mask-image: radial-gradient(120% 90% at var(--reticula-x, 62%) var(--reticula-y, 45%),
#000 20%, transparent 78%);
}
.heroi { --reticula-z: -2; }
.heroi__container {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-lateral);
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: end;
gap: 0;
}
.heroi__texto { grid-column: 1 / 7; grid-row: 1; }
.heroi__titulo {
margin-bottom: var(--s-5);
font-size: clamp(2.25rem, 5.2vw, 4.75rem);
font-weight: 300;
line-height: 1.02;
letter-spacing: -.02em;
max-width: 15ch;
}
.heroi__titulo em { font-style: normal; color: var(--dourado); }
.realce { color: var(--accent-txt); }
.heroi__titulo .realce { color: var(--dourado); }
@supports ((box-decoration-break: clone) or (-webkit-box-decoration-break: clone)) {
.realce,
.heroi__titulo .realce {
color: #003566;
padding: 0 .16em .08em .03em;
margin-left: -.03em;
background-image: linear-gradient(var(--dourado), var(--dourado));
background-repeat: no-repeat;
background-size: 100% 1.22em;
background-position: 0 .10em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
}
.heroi__apoio {
position: relative;
padding-left: var(--s-4);
font-size: var(--fs-lead);
line-height: 1.36;
color: rgba(255, 255, 255, .78);
max-width: 34ch;
}
.heroi__apoio::before {
content: "";
position: absolute;
left: 0;
top: .18em;
bottom: .18em;
width: 2px;
background: var(--dourado);
transform-origin: top;
}
.heroi__rodape {
grid-column: 1 / -1;
grid-row: 2;
margin-top: var(--s-8);
padding-top: var(--s-4);
border-top: 1px solid rgba(255, 255, 255, .18);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-3) var(--s-6);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .01em;
color: rgba(255, 255, 255, .7);
}
.heroi__dica {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .72);
}
.heroi__dica svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.heroi__marca {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: var(--s-5);
}
.heroi__icone {
width: clamp(64px, 6.2vw, 96px);
height: auto;
flex: none;
}
.heroi__icone .moldura { fill: #fff; }
.heroi__icone .tela    { fill: var(--dourado); }
.heroi__icone .glifo   { fill: var(--navy); }
.heroi__marca span {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.35;
color: rgba(255, 255, 255, .72);
}
html.intro-ativa .heroi__marca { opacity: 0; }
@media (min-width: 901px) and (max-height: 820px) {
.heroi__icone { width: clamp(48px, 4.4vw, 68px); }
.heroi__marca { gap: 12px; margin-bottom: var(--s-4); }
}
.heroi__peca {
grid-column: 7 / -1;
grid-row: 1;
align-self: stretch;
position: relative;
z-index: -1;
transition: opacity .55s var(--curva);
}
@media (min-width: 901px) {
.heroi__peca .braco {
position: absolute;
top: -14%;
bottom: -46%;
right: calc(-1 * var(--pad-lateral) - 6vw);
width: min(62vw, 900px);
height: auto;
}
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
@media (hover: hover) {
[data-lente-texto] {
--lente-x: -9999px;
--lente-y: -9999px;
--lente-r: 252px;
--lente-base: #fff;
background-image: radial-gradient(
circle var(--lente-r) at var(--lente-x) var(--lente-y),
var(--dourado) 0%, var(--dourado) 77%, var(--lente-base) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.heroi__apoio[data-lente-texto] { --lente-base: rgba(255, 255, 255, .78); }
}
}
.heroi__container { pointer-events: none; }
.heroi__marca,
.heroi__titulo,
.heroi__apoio,
.heroi__rodape { pointer-events: auto; }
@media (max-width: 1200px) {
.heroi__peca .braco { width: min(52vw, 520px); }
.heroi__texto { grid-column: 1 / 9; grid-row: 1; }
}
@media (max-width: 900px) {
.heroi {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding-top: calc(var(--nav-altura) + var(--s-6));
}
.heroi__peca {
grid-column: auto;
grid-row: auto;
justify-self: stretch;
width: min(100%, 460px);
height: auto;
aspect-ratio: 5 / 4;
margin: 0 auto calc(-1 * var(--s-5));
opacity: 1;
}
.heroi__peca .braco { width: 100%; }
.heroi__container { grid-template-columns: 1fr; }
.heroi__texto { grid-column: auto; }
.heroi__rodape { margin-top: var(--s-6); }
.heroi__dica { margin-left: 0; width: 100%; }
}
.braco {
position: relative;
width: 100%;
height: 100%;
cursor: grab;
pointer-events: auto;
touch-action: pan-y;
}
.braco:active { cursor: grabbing; }
.braco__tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.braco:focus-visible {
outline: 2px solid var(--dourado);
outline-offset: 8px;
}
.braco__estatico { display: none; }
.braco.is-indisponivel { cursor: default; }
.braco.is-indisponivel .braco__tela { display: none; }
.braco.is-indisponivel .braco__estatico {
display: block;
position: absolute;
inset: 0;
background: var(--braco-traco);
-webkit-mask-image: url("../img/heroi/epson-traco-920.png");
mask-image: url("../img/heroi/epson-traco-920.png");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.lente {
position: relative;
width: 100%;
height: 100%;
isolation: isolate;
--mx: 50%;
--my: 50%;
--r: 0px;
}
.lente__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.lente__gl {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: none;
}
.lente.is-gl .lente__gl { display: block; }
.lente.is-gl .lente__foto, .lente.is-gl .lente__revelo { opacity: 0; }
.lente__revelo {
position: absolute;
inset: 0;
-webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
#000 0 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
#000 0 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
transition: opacity .3s ease;
}
.lente__papel, .lente__tinta {
position: absolute;
inset: 0;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.lente__papel { background: var(--traco-papel); }
.lente__tinta { background: var(--traco); }
.lente__anel {
position: absolute;
left: var(--mx);
top: var(--my);
width: calc(var(--r) * 2);
height: calc(var(--r) * 2);
margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
border: 1px solid var(--dourado);
opacity: calc(var(--r) / 160px * .55);
pointer-events: none;
}
.lente__anel::before, .lente__anel::after {
content: "";
position: absolute;
background: var(--dourado);
}
.lente__anel::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.lente__anel::after { top: 50%; left: -8px; right: -8px; height: 1px; }
@media (prefers-reduced-motion: reduce) {
.lente { --r: 46%; --mx: 50%; --my: 50%; }
.lente__anel { display: none; }
}
@media (hover: none) {
.lente__anel { display: none; }
.lente.is-aberta .lente__revelo {
-webkit-mask-image: none;
mask-image: none;
}
.lente__revelo { opacity: 0; }
.lente.is-aberta .lente__revelo { opacity: 1; }
}
.lente--retangulo .lente__papel {
-webkit-mask-image: none;
mask-image: none;
}
.lente--retangulo .lente__foto { object-fit: cover; }
.nav__cta, .cta, .botao {
font-family: var(--font);
font-size: var(--fs-ui);
font-weight: 500;
letter-spacing: normal;
}
.cta {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
transition: color var(--t-cor);
}
.cta__chip {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--navy-chip);
color: var(--chip-tinta);
transition: background-color .2s ease, transform .2s ease, color .2s ease;
}
.cta__chip svg { width: 13px; height: 13px; }
p + .cta, .corpo + .cta, .lead + .cta { margin-top: var(--s-6); }
.secao--escura .cta__chip, .heroi .cta__chip { color: #fff; }
.cta:hover .cta__chip,
.secao--escura .cta:hover .cta__chip,
.heroi .cta:hover .cta__chip {
background: var(--dourado);
color: var(--navy);
transform: translateX(3px);
}
.cta:hover { color: var(--accent-txt); }
.heroi, .cabecalho, .faixa, .rodape { --accent-txt: var(--dourado); }
.botao:hover,
.botao--principal:hover,
.nav__cta:hover,
.nav--sobre-heroi .nav__cta:hover,
.nav.is-rolado .nav__cta:hover,
.nav--solido .nav__cta:hover {
background: var(--dourado);
color: var(--navy);
border-color: var(--dourado);
}
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding-inline: 24px;
border: 1px solid var(--borda-ui);
background: var(--sup-1);
color: var(--tinta);
transition: background-color var(--t-cor), color var(--t-cor), border-color var(--t-cor);
}
.botao svg { width: 18px; height: 18px; flex-shrink: 0; }
.botao--principal { background: var(--navy); color: #fff; border-color: var(--navy); }
.dados { border-top: 1px solid var(--filete); }
.dados__linha {
display: grid;
grid-template-columns: minmax(140px, 22%) 1fr;
gap: var(--s-4);
padding-block: var(--s-4);
border-bottom: 1px solid var(--filete);
align-items: baseline;
}
.dados__rotulo {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .01em;
color: var(--tinta-2);
}
.dados__valor { font-size: var(--fs-small); }
@media (max-width: 640px) {
.dados__linha { grid-template-columns: 1fr; gap: var(--s-1); }
}
.marcas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.marca {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding-inline: 14px;
border: 1px solid var(--filete-forte);
font-size: var(--fs-eyebrow);
font-weight: 500;
}
.marca--certificada { border-color: var(--dourado); }
.marca--certificada::before {
content: "";
width: 7px;
height: 7px;
background: var(--dourado);
flex-shrink: 0;
}
.numeros {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-5) var(--s-5);
margin-top: var(--gap-bloco);
padding-top: var(--s-6);
border-top: 1px solid var(--filete);
}
.numeros dt {
font-size: var(--fs-numero);
font-weight: 300;
line-height: 1;
letter-spacing: -.02em;
color: var(--tinta-titulo);
}
.numeros dd {
margin-top: var(--s-2);
font-size: var(--fs-small);
color: var(--tinta-suave);
max-width: 22ch;
}
.secao--escura .numeros dt { color: var(--dourado); }
@media (max-width: 1023px) { .numeros { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
.capacidades { margin-top: var(--s-7); border-top: 1px solid var(--filete); }
.capacidade {
position: relative;
display: grid;
grid-template-columns: 72px minmax(0, 4fr) minmax(0, 6fr);
gap: var(--s-4);
align-items: baseline;
--cap-y: var(--s-5);
padding-block: var(--cap-y);
border-bottom: 1px solid var(--filete);
transition: padding-block .38s var(--curva),
background-color .38s var(--curva),
border-color .38s var(--curva);
}
.capacidade:hover,
.capacidade:focus-within {
padding-block: calc(var(--cap-y) + var(--s-2));
background-color: var(--sup-2);
border-color: var(--filete-forte);
}
.capacidade:hover .capacidade__num,
.capacidade:focus-within .capacidade__num { color: var(--accent-txt); }
.capacidade:hover .capacidade__nome,
.capacidade:focus-within .capacidade__nome { color: var(--traco); }
.capacidade__num,
.capacidade__nome { transition: color .3s var(--curva); }
.capacidade::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--dourado);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--curva);
}
.capacidade:hover::after { transform: scaleX(1); }
.capacidade__num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
color: var(--tinta-2);
}
.capacidade__nome { font-size: var(--fs-h3); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.capacidade__txt { font-size: var(--fs-small); color: var(--tinta-suave); max-width: 56ch; }
@media (max-width: 860px) {
.capacidade { grid-template-columns: 44px 1fr; row-gap: var(--s-2); }
.capacidade__txt { grid-column: 2; }
}
.escada {
position: relative;
margin-top: var(--gap-bloco);
padding-inline: var(--s-5);
}
.escada::before,
.escada::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--filete-forte);
}
.escada::before { left: 0; }
.escada::after  { right: 0; }
.escada__degrau {
display: grid;
grid-template-columns: var(--s-5) 26px minmax(0, 1fr) minmax(0, 1.15fr) var(--s-5);
align-items: center;
gap: 0 var(--s-4);
padding-block: var(--s-4);
border-bottom: 1px solid var(--filete);
}
.escada__degrau:last-child { border-bottom: 0; }
.escada__fio {
height: 1px;
background: var(--filete-forte);
align-self: center;
}
.escada__contato {
width: 26px;
height: 24px;
border-left: 2px solid var(--traco);
border-right: 2px solid var(--traco);
background-clip: padding-box;
transition: background-color .4s var(--curva);
}
.escada__degrau--certificada .escada__contato {
background-color: var(--accent-txt);
}
.escada__nome {
font-size: 1.375rem;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.15;
}
.escada__degrau--certificada .escada__nome { color: var(--accent-txt); }
.escada__papel {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: .01em;
color: var(--tinta-2);
display: flex;
align-items: baseline;
gap: var(--s-3);
}
.escada__selo {
margin-left: auto;
font-size: 11px;
letter-spacing: .14em;
color: var(--accent-txt);
white-space: nowrap;
}
.escada__degrau { transition: background-color .4s var(--curva); }
.escada__degrau:hover { background-color: var(--sup-2); }
.escada__degrau:hover .escada__fio { background: var(--traco); }
.escada__degrau:hover .escada__contato { border-color: var(--traco); }
@media (max-width: 720px) {
.escada { padding-inline: var(--s-4); }
.escada__degrau {
grid-template-columns: var(--s-4) 26px minmax(0, 1fr);
gap: 0 var(--s-3);
padding-block: var(--s-4);
}
.escada__papel {
grid-column: 3;
margin-top: var(--s-2);
flex-wrap: wrap;
}
.escada__fio--fim { display: none; }
.escada__selo { margin-left: 0; }
}
.setores {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--gap-card);
margin-top: var(--s-7);
}
.setor { display: flex; flex-direction: column; }
.setor__midia {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sup-2);
}
.setor__nome { margin-top: var(--s-4); font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.setor__txt { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--tinta-suave); }
.setor__local {
margin-top: var(--s-2);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
color: var(--tinta-2);
}
.faixa {
position: relative;
min-height: clamp(380px, 52vh, 560px);
display: flex;
align-items: flex-end;
padding-block: var(--s-7);
overflow: hidden;
color: #fff;
--tinta-titulo: #fff;
--tinta-2: rgba(255, 255, 255, .8);
--foco: var(--dourado);
}
.faixa__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.faixa::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(0, 29, 61, .55) 0%, rgba(0, 29, 61, .88) 100%);
}
.faixa h2 { max-width: 18ch; }
.faixa .eyebrow { color: rgba(255, 255, 255, .8); }
.prancha {
margin-top: var(--s-6);
position: relative;
}
.prancha::before {
content: "";
position: absolute;
inset: calc(-1 * var(--s-5)) calc(-1 * var(--s-4));
z-index: -1;
background-image:
linear-gradient(var(--traco-grade) 1px, transparent 1px),
linear-gradient(90deg, var(--traco-grade) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(120% 80% at 50% 45%, #000 30%, transparent 82%);
mask-image: radial-gradient(120% 80% at 50% 45%, #000 30%, transparent 82%);
}
.prancha__datum {
position: relative;
height: 1px;
background: var(--filete-forte);
transform: scaleX(var(--datum, 1));
transform-origin: left center;
}
.prancha__datum::before {
content: "";
position: absolute;
left: 0;
top: -5px;
width: 2px;
height: 11px;
background: var(--dourado);
}
.prancha__linha {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
align-items: start;
}
.prancha__item { margin: 0; }
.prancha__vista {
display: flex;
align-items: flex-start;
gap: var(--s-2);
height: var(--s-5);
}
.prancha__tique {
width: 1px;
height: 11px;
flex-shrink: 0;
background: var(--filete-forte);
transform: scaleY(var(--avanco, 1));
transform-origin: top;
}
.prancha__idx {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
line-height: 1;
margin-top: 1px;
letter-spacing: .14em;
color: var(--tinta-2);
font-variant-numeric: tabular-nums;
}
.prancha__moldura {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--sup-2);
border: 1px solid var(--filete);
}
.prancha__moldura picture {
position: absolute;
inset: 0;
display: block;
}
.prancha__moldura img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.prancha__moldura::before,
.prancha__moldura::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
background: var(--filete-forte);
z-index: 2;
}
.prancha__moldura::before { width: 22px; height: 2px; }
.prancha__moldura::after  { width: 2px; height: 22px; }
.prancha__legenda {
margin-top: var(--s-3);
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.45;
letter-spacing: .01em;
color: var(--tinta-2);
}
.prancha__ref {
display: block;
font-weight: 500;
color: var(--tinta-titulo);
}
.prancha__cota {
margin-top: var(--s-6);
display: flex;
align-items: center;
gap: var(--s-4);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .14em;
color: var(--tinta-2);
}
.prancha__cota::before,
.prancha__cota::after {
content: "";
flex: 1;
height: 9px;
border-left: 1px solid var(--filete-forte);
border-right: 1px solid var(--filete-forte);
background: linear-gradient(var(--filete-forte), var(--filete-forte))
center / 100% 1px no-repeat;
}
@media (max-width: 1023px) {
.prancha__linha { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
}
@media (max-width: 560px) {
.prancha__linha { grid-template-columns: 1fr; }
.prancha__cota { letter-spacing: .08em; }
}
.secao--foto {
position: relative;
isolation: isolate;
--veu: 0, 29, 61;
--veu-meio: .55;
--veu-lado: .35;
--tinta-2: #B9D2EA;
--navy-luz: #B9D2EA;
}
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .secao--foto {
--veu: 0, 53, 102;
--veu-meio: .68;
--veu-lado: .50;
}
}
:root[data-tema="escuro"] .secao--foto {
--veu: 0, 53, 102;
--veu-meio: .68;
--veu-lado: .50;
}
.dupla {
position: relative;
isolation: isolate;
background: var(--sup-3);
--veu-d: 0, 29, 61;
--veu-d-meio: .78;
--veu-d-aberto: .50;
--d-abre: 34%;
--d-fecha: 42%;
--tinta-2: #B9D2EA;
--navy-luz: #B9D2EA;
}
.dupla__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.dupla::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,
var(--sup-3) 0%,
rgba(var(--veu-d), var(--veu-d-meio)) 9%,
rgba(var(--veu-d), var(--veu-d-meio)) calc(var(--d-abre) - 4%),
rgba(var(--veu-d), var(--veu-d-aberto)) var(--d-abre),
rgba(var(--veu-d), var(--veu-d-aberto)) var(--d-fecha),
rgba(var(--veu-d), var(--veu-d-meio)) calc(var(--d-fecha) + 6%),
rgba(var(--veu-d), var(--veu-d-meio)) 94%,
var(--sup-3) 100%);
}
.dupla > .secao--escura { background: transparent; }
.dupla .secao--escura .numeros dt { color: var(--tinta-titulo); }
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .dupla {
--veu-d: 0, 53, 102;
--veu-d-meio: .88;
--veu-d-aberto: .62;
}
}
:root[data-tema="escuro"] .dupla {
--veu-d: 0, 53, 102;
--veu-d-meio: .88;
--veu-d-aberto: .62;
}
.bloco--centro .citacao { max-width: 22ch; margin-inline: auto; }
.secao__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.secao--foto::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, var(--sup-3) 0%,
rgba(var(--veu), var(--veu-meio)) 22%,
rgba(var(--veu), var(--veu-meio)) 78%, var(--sup-3) 100%),
linear-gradient(90deg, var(--sup-3) 0%,
rgba(var(--veu), var(--veu-lado)) 62%);
}
.secao + .secao--escura,
.secao--escura + .secao,
.faixa + .secao { margin-top: -1px; }
.planta {
position: relative;
margin-top: var(--gap-bloco);
aspect-ratio: 16 / 9;
background: var(--traco-papel);
border: 1px solid var(--filete);
overflow: hidden;
cursor: grab;
touch-action: pan-y;
}
.planta:active { cursor: grabbing; }
.planta__tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.planta__grade {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(var(--traco-grade) 1px, transparent 1px),
linear-gradient(90deg, var(--traco-grade) 1px, transparent 1px);
background-size: 32px 32px;
}
.planta__legenda {
position: absolute;
left: var(--s-4);
bottom: var(--s-4);
right: var(--s-4);
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-4);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .02em;
color: var(--tinta-2);
pointer-events: none;
}
.planta__dica {
position: absolute;
right: var(--s-4);
top: var(--s-4);
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: .12em;
color: var(--tinta-2);
pointer-events: none;
transition: opacity .4s ease;
}
.planta.is-tocada .planta__dica { opacity: 0; }
.planta__semwebgl {
position: absolute;
inset: 0;
display: none;
place-items: center;
padding: var(--s-5);
text-align: center;
font-size: var(--fs-small);
color: var(--tinta-suave);
}
.planta.is-indisponivel { cursor: default; }
.planta.is-indisponivel .planta__semwebgl { display: grid; }
.planta.is-indisponivel .planta__tela,
.planta.is-indisponivel .planta__dica,
.planta.is-indisponivel .planta__legenda { display: none; }
@media (max-width: 700px) { .planta { aspect-ratio: 4 / 3; } }
.credencial {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0;
margin-top: var(--s-7);
border-top: 1px solid var(--filete);
border-left: 1px solid var(--filete);
}
.credencial__item {
padding: var(--s-4) var(--s-5);
border-right: 1px solid var(--filete);
border-bottom: 1px solid var(--filete);
}
.credencial__rotulo {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .01em;
color: var(--tinta-2);
}
.credencial__valor {
margin-top: var(--s-2);
font-family: var(--font-mono);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: .06em;
color: var(--dourado);
}
.credencial__valor--multi { font-size: .9375rem; letter-spacing: .04em; line-height: 1.5; }
.cabecalho {
position: relative;
min-height: clamp(400px, 56vh, 620px);
display: flex;
align-items: flex-end;
padding-top: calc(var(--nav-altura) + var(--s-7));
padding-bottom: var(--s-8);
overflow: hidden;
color: #fff;
background: var(--navy-fundo);
--foco: var(--dourado);
isolation: isolate;
}
.cabecalho__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.cabecalho::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(0, 29, 61, .72) 0%, rgba(0, 29, 61, .92) 100%);
}
.cabecalho--liso::after { content: none; }
.cabecalho--foto::after {
background:
linear-gradient(180deg, rgba(0, 29, 61, .52) 0%, rgba(0, 29, 61, .86) 100%),
linear-gradient(90deg, rgba(0, 29, 61, .70) 0%, rgba(0, 29, 61, .26) 72%);
}
.cabecalho { --reticula-x: 34%; --reticula-y: 78%; }
.cabecalho h1 {
font-size: clamp(2.5rem, 6.4vw, 5.5rem);
max-width: 18ch;
}
.cabecalho .eyebrow { color: var(--dourado); }
.secao--escura .eyebrow { color: var(--dourado); }
.cabecalho__lead {
margin-top: var(--s-4);
font-size: var(--fs-lead);
line-height: 1.36;
max-width: 46ch;
color: rgba(255, 255, 255, .78);
}
.cabecalho--marca {
--marca-traco: #9FBEE0;
--marca-ouro:  #FDC500;
--marca-aceso: #FDC500;
--marca-ganho: .92;
--marca-linha-fina: 1.4px;
--marca-linha-grossa: 2.8px;
--marca3d-larg: clamp(220px, 26vw, 380px);
}
.cabecalho--marca .container {
padding-right: calc(var(--pad-lateral) + var(--marca3d-larg) + var(--s-6));
}
.marca3d {
position: absolute;
z-index: 1;
top: calc(var(--nav-altura) + var(--s-7));
bottom: var(--s-8);
width: var(--marca3d-larg);
right: max(var(--pad-lateral),
50% - var(--container) / 2 + var(--pad-lateral));
touch-action: none;
}
.marca3d.is-gl { cursor: grab; }
.marca3d.is-gl:active { cursor: grabbing; }
.marca3d:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.marca3d__tela {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.marca3d__plano {
position: absolute;
inset: 0;
margin: auto;
width: 78%;
height: auto;
}
.marca3d__plano .glifo { fill: var(--navy); }
.marca3d.is-gl .marca3d__plano { display: none; }
@media (max-width: 1023px) {
.marca3d { display: none; }
.cabecalho--marca .container { padding-right: var(--pad-lateral); }
}
.trilha {
margin-top: var(--s-5);
font-size: var(--fs-eyebrow);
color: rgba(255, 255, 255, .62);
}
.trilha a { transition: color var(--t-cor); }
.trilha a:hover { color: #fff; }
.trilha span { margin-inline: 8px; }
.junta { position: relative; }
.junta::after {
content: "SHEET " attr(data-folha);
content: "SHEET " attr(data-folha) / "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
pointer-events: none;
background-image: repeating-linear-gradient(90deg,
var(--filete-forte) 0 26px,
transparent        26px 34px,
var(--filete-forte) 34px 37px,
transparent        37px 45px);
background-repeat: repeat-x;
background-size: 45px 1px;
background-position: 0 0;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: .14em;
color: var(--tinta-2);
padding-top: 14px;
text-align: right;
padding-right: max(var(--pad-lateral),
calc(50% - var(--container) / 2 + var(--pad-lateral)));
clip-path: inset(0 100% 0 0);
transition: clip-path 1.15s var(--curva);
}
.junta.is-visivel::after { clip-path: inset(0 -3px 0 0); }
.junta--inversa::after {
text-align: left;
padding-right: 0;
padding-left: max(var(--pad-lateral),
calc(50% - var(--container) / 2 + var(--pad-lateral)));
clip-path: inset(0 0 0 100%);
}
.junta--inversa.is-visivel::after { clip-path: inset(0 0 0 -3px); }
@media (prefers-reduced-motion: reduce) {
.junta::after {
clip-path: none;
opacity: 0;
transition: opacity .4s ease;
}
.junta.is-visivel::after { opacity: 1; }
}
.diagrama {
margin-top: var(--gap-bloco);
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
gap: 0 var(--s-5);
}
.diagrama__passo {
position: relative;
padding: var(--s-5);
border: 1px solid var(--filete-forte);
background: var(--sup-1);
transition: border-color .3s var(--curva);
}
.diagrama__passo > span.diagrama__topo {
position: absolute;
left: -1px;
right: -1px;
top: -1px;
height: 2px;
background: var(--accent-txt);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--curva);
}
.diagrama__passo:hover { border-color: var(--traco); }
.diagrama__passo:hover > span.diagrama__topo { transform: scaleX(1); }
.diagrama__passo:hover .diagrama__nome { color: var(--traco); }
.diagrama__nome { transition: color .3s var(--curva); }
.diagrama__num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .16em;
color: var(--accent-txt);
}
.diagrama__nome {
margin-top: var(--s-3);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.2;
}
.diagrama__txt {
margin-top: var(--s-3);
font-size: var(--fs-small);
color: var(--tinta-suave);
}
.diagrama__passo::before,
.diagrama__passo::after {
content: "";
position: absolute;
left: 100%;
top: 50%;
pointer-events: none;
}
.diagrama__passo::before {
width: var(--s-5);
height: 2px;
margin-top: -1px;
background: var(--filete-forte);
}
.diagrama__passo::after {
width: 7px;
height: 9px;
margin: -4px 0 0 calc(var(--s-5) - 7px);
background: var(--filete-forte);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.diagrama__passo:last-child::before,
.diagrama__passo:last-child::after { display: none; }
.diagrama__sinal {
position: absolute;
left: 100%;
top: 50%;
width: var(--s-5);
height: 2px;
margin-top: -1px;
overflow: hidden;
pointer-events: none;
}
.diagrama__sinal::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--accent-txt), transparent);
background-size: 70% 100%;
background-repeat: no-repeat;
animation: diagrama-sinal 3.4s linear infinite;
animation-delay: calc(var(--s, 0) * .85s);
}
.diagrama__passo:last-child .diagrama__sinal { display: none; }
@keyframes diagrama-sinal {
from { background-position: -70% 0; }
to   { background-position: 170% 0; }
}
@media (prefers-reduced-motion: reduce) {
.diagrama__sinal { display: none; }
}
@media (max-width: 1023px) {
.diagrama { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
.diagrama__passo:nth-child(2)::before,
.diagrama__passo:nth-child(2)::after,
.diagrama__passo:nth-child(2) .diagrama__sinal { display: none; }
}
@media (max-width: 620px) {
.diagrama { grid-template-columns: 1fr; gap: var(--s-5); }
.diagrama__passo::before,
.diagrama__passo::after,
.diagrama__sinal { display: none; }
}
.tem-feixe { position: relative; }
.tem-feixe > .container { position: relative; z-index: 1; }
.feixe {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
--feixe-tinta: #6E8093;
--feixe-brilho: var(--accent-txt);
}
.secao--escura .feixe,
.cabecalho .feixe { --feixe-tinta: rgba(255, 255, 255, .38); }
@media (max-width: 1439px) {
.feixe { display: none; }
}
.feixe__svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.feixe__pista {
fill: none;
stroke: var(--feixe-tinta);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.feixe__pulso {
fill: none;
stroke: var(--feixe-brilho);
stroke-width: 2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 4 96;
animation: feixe-corre 5.5s linear infinite;
animation-delay: calc(var(--f, 0) * -1.35s);
opacity: .9;
}
.secao--escura .feixe__pulso,
.cabecalho .feixe__pulso {
filter: drop-shadow(0 0 3px var(--dourado));
}
@keyframes feixe-corre {
from { stroke-dashoffset: 100; }
to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.feixe__pulso { animation: none; opacity: 0; }
}
.contato {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0;
margin-top: var(--s-7);
border-top: 1px solid var(--filete);
border-left: 1px solid var(--filete);
}
.contato__bloco {
padding: var(--s-5);
border-right: 1px solid var(--filete);
border-bottom: 1px solid var(--filete);
}
.contato__rotulo {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .01em;
color: var(--tinta-2);
margin-bottom: var(--s-3);
}
.contato__valor { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.contato__valor a { transition: color var(--t-cor); }
.contato__valor a:hover { color: var(--accent-txt); }
.contato__nota { margin-top: var(--s-2); font-size: var(--fs-eyebrow); color: var(--tinta-suave); }
main {
position: relative;
z-index: 1;
background: var(--sup-1);
}
@media (min-width: 900px) and (min-height: 780px) {
main {
border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.rodape {
position: sticky;
bottom: 0;
z-index: 0;
}
}
.rodape {
padding-block: var(--s-8) var(--s-6);
background: var(--sup-3-fundo);
color: #fff;
--foco: var(--dourado);
}
.rodape__headline {
font-size: var(--fs-h3);
font-weight: 300;
line-height: 1.08;
letter-spacing: -.01em;
max-width: 20ch;
margin-bottom: var(--s-8);
}
.rodape__headline > span {
display: inline-block;
clip-path: inset(0 100% 0 -.08em);
transform: translate3d(0, .16em, 0);
transition: clip-path .72s var(--curva), transform .72s var(--curva);
transition-delay: calc(var(--i, 0) * 55ms);
}
.rodape__headline.is-visivel > span {
clip-path: inset(0 -.08em 0 -.08em);
transform: none;
}
.rodape__headline::after {
content: "";
display: block;
width: min(190px, 44%);
height: 2px;
margin-top: var(--s-5);
background: var(--dourado);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.05s var(--curva);
transition-delay: calc(var(--n, 6) * 55ms + 140ms);
}
.rodape__headline.is-visivel::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.rodape__headline > span {
clip-path: none;
transform: none;
transition: none;
}
.rodape__headline::after { transform: scaleX(1); transition: none; }
}
.rodape__colunas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-6) var(--s-4);
}
.rodape__titulo {
font-size: var(--fs-legal);
font-weight: 500;
letter-spacing: .01em;
color: var(--dourado);
margin-bottom: var(--s-3);
}
.rodape__lista { display: grid; gap: 10px; }
.rodape__lista a {
font-size: var(--fs-small);
color: rgba(255, 255, 255, .78);
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .4s var(--curva), color .2s ease;
}
.rodape__lista a:hover { color: #fff; background-size: 100% 1px; }
.rodape__base {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: 1px solid rgba(255, 255, 255, .16);
font-size: var(--fs-legal);
font-weight: 500;
letter-spacing: .01em;
color: rgba(255, 255, 255, .62);
}
.rodape__marca { display: flex; align-items: center; gap: 10px; color: #fff; }
.rodape__icone { width: 30px; height: auto; }
.rodape__icone .moldura { fill: #fff; }
.rodape__icone .tela { fill: var(--dourado); }
.rodape__icone .glifo { fill: var(--navy-tinta); }
.rodape__legais { margin-left: auto; display: flex; gap: var(--s-4); }
.reveal {
opacity: 0;
transform: translate3d(0, 22px, 0);
filter: blur(6px);
transition: opacity .85s var(--curva), transform .85s var(--curva), filter .85s var(--curva);
transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.is-visivel { opacity: 1; transform: none; filter: blur(0); }
.reveal--limpo {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
.faixa .faixa__foto {
clip-path: inset(100% 0 0 0);
transform: scale(1.06);
transition: clip-path 1.15s var(--curva), transform 1.5s var(--curva);
}
.faixa.is-visivel .faixa__foto {
clip-path: inset(0 0 0 0);
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.faixa .faixa__foto { clip-path: none; transform: none; transition: none; }
}
.entra-linha {
display: inline-block;
opacity: 0;
transform: translate3d(0, .34em, 0);
animation: entra-linha .95s var(--curva) forwards;
animation-delay: calc(var(--i, 0) * 90ms + var(--atraso, 0ms));
}
@keyframes entra-linha { to { opacity: 1; transform: none; } }
.heroi__apoio::before { animation: regua 1.1s var(--curva) .9s backwards; }
@keyframes regua { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; filter: none; transition: none; }
.entra-linha { opacity: 1; transform: none; animation: none; }
.heroi__apoio::before { animation: none; }
.capacidade::after { transition: none; }
}
.sr-so {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pilha > * + * { margin-top: var(--s-4); }
.texto-legal { max-width: 68ch; }
.texto-legal h2 { margin-top: var(--s-7); margin-bottom: var(--s-3); font-size: var(--fs-h3); }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p, .texto-legal li { margin-bottom: var(--s-3); color: var(--tinta-suave); }
.texto-legal ul { padding-left: 1.2em; }
.texto-legal ul li { list-style: square; }
.texto-legal ul li::marker { color: var(--dourado); }
.prancha__moldura picture { transition: transform .85s var(--curva); }
.prancha__item:hover .prancha__moldura picture,
.prancha__item:focus-within .prancha__moldura picture { transform: scale(1.045); }
.prancha__moldura::before,
.prancha__moldura::after { transition: background-color .25s ease; }
.prancha__item:hover .prancha__moldura::before,
.prancha__item:hover .prancha__moldura::after,
.prancha__item:focus-within .prancha__moldura::before,
.prancha__item:focus-within .prancha__moldura::after { background: var(--dourado); }
.prancha__idx, .prancha__tique { transition: color .25s ease, background-color .25s ease; }
.prancha__item:hover .prancha__idx,
.prancha__item:focus-within .prancha__idx { color: var(--accent-txt); }
.prancha__item:hover .prancha__tique,
.prancha__item:focus-within .prancha__tique { background: var(--dourado); }
.setor__midia .lente { transition: transform .85s var(--curva); }
.setor:hover .setor__midia .lente,
.setor:focus-within .setor__midia .lente { transform: scale(1.04); }
.setor__midia::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--dourado);
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--curva);
z-index: 3;
}
.setor:hover .setor__midia::after,
.setor:focus-within .setor__midia::after { transform: scaleX(1); }
.setor__nome, .setor__local { transition: color .25s ease; }
.setor:hover .setor__nome,
.setor:focus-within .setor__nome { color: var(--traco); }
.setor:hover .setor__local,
.setor:focus-within .setor__local { color: var(--accent-txt); }
@media (prefers-reduced-motion: reduce) {
.prancha__moldura picture,
.setor__midia .lente { transition: none; }
.prancha__item:hover .prancha__moldura picture,
.setor:hover .setor__midia .lente { transform: none; }
.setor__midia::after { transition: none; }
}
.peca {
position: relative;
margin-top: var(--gap-bloco);
border: 1px solid var(--filete);
background: var(--traco-papel);
overflow: hidden;
}
.peca__tela {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.peca__reserva {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: var(--s-5);
text-align: center;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .14em;
color: var(--tinta-2);
}
.peca.is-viva .peca__reserva,
.peca.is-gl .peca__reserva { display: none; }
.peca__cota {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-4);
margin-top: var(--s-3);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .14em;
color: var(--tinta-2);
}
.peca__cota strong { font-weight: 500; color: var(--tinta-titulo); }
.malha {
aspect-ratio: 16 / 7;
background: var(--sup-3);
--malha-traco: var(--navy-luz);
--malha-pv: var(--dourado);
--malha-sp: #fff;
cursor: ns-resize;
touch-action: pan-y;
}
.malha .peca__tela:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; }
.mimico {
aspect-ratio: 2 / 1;
background: var(--sup-3);
--mimico-traco: var(--navy-luz);
--mimico-vivo: var(--dourado);
--mimico-tinta: #fff;
}
.carta {
aspect-ratio: 5 / 3;
background: var(--sup-3);
--carta-traco: var(--navy-luz);
--carta-vivo: var(--dourado);
--carta-tinta: #fff;
}
.clp {
aspect-ratio: 16 / 9;
background-color: var(--sup-3);
background-image:
linear-gradient(var(--traco-grade) 1px, transparent 1px),
linear-gradient(90deg, var(--traco-grade) 1px, transparent 1px);
background-size: 32px 32px;
--clp-traco: #9FBEE0;
--clp-aceso: var(--dourado);
--clp-ganho: .95;
cursor: grab;
touch-action: pan-y;
}
.clp:active { cursor: grabbing; }
.clp .peca__tela:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; }
@media (max-width: 700px) {
.malha { aspect-ratio: 4 / 3; }
.mimico { aspect-ratio: 4 / 3; }
.carta { aspect-ratio: 4 / 3; }
.clp { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
.prancha[data-progresso] .prancha__item {
--janela: .16;
--passo: .055;
--avanco: clamp(0, calc((var(--p, 1) - .06 - var(--i, 0) * var(--passo)) /
var(--janela)), 1);
opacity: var(--avanco);
transform: translate3d(0, calc((1 - var(--avanco)) * 40px), 0);
filter: none;
transition: none;
}
}
@media (max-width: 1023px) {
.prancha .prancha__item { --avanco: 1; }
.prancha { --datum: 1; }
}
.prancha { --datum: clamp(0, calc(var(--p, 1) / .06), 1); }
.prancha__moldura img {
transform: scale(calc(1 + (1 - var(--avanco)) * .06));
transform-origin: 50% 60%;
}
.prancha__moldura::before { transform: scaleX(var(--avanco)); transform-origin: left; }
.prancha__moldura::after  { transform: scaleY(var(--avanco)); transform-origin: top; }
.prancha__legenda { opacity: clamp(0, calc((var(--avanco) - .55) / .45), 1); }
.prancha.is-estatico,
.prancha:not([data-progresso]) { --datum: 1; }
.prancha.is-estatico .prancha__item,
.prancha:not([data-progresso]) .prancha__item { --avanco: 1; }
.capacidades[data-domino] .capacidade {
--d: 99;
--onda: clamp(0, calc((3 - var(--d)) / 3), 1);
--atraso: calc(min(var(--d), 4) * 42ms);
transition: padding-block .38s var(--curva),
background-color .38s var(--curva),
border-color .38s var(--curva);
transition-delay: var(--atraso);
}
.capacidades[data-domino] .capacidade__num,
.capacidades[data-domino] .capacidade__nome {
transition: color .42s var(--curva), transform .42s var(--curva);
transition-delay: var(--atraso);
}
.capacidades[data-domino] .capacidade__num {
transform: translateX(calc(var(--onda) * 10px));
}
.capacidades[data-domino] .capacidade__nome {
transform: translateX(calc(var(--onda) * 6px));
}
.capacidades[data-domino] .capacidade__num {
color: color-mix(in srgb, var(--accent-txt) calc(var(--onda) * 100%),
var(--tinta-2));
}
@media (prefers-reduced-motion: reduce) {
.capacidades[data-domino] .capacidade__num,
.capacidades[data-domino] .capacidade__nome { transform: none; }
.capacidades[data-domino] .capacidade,
.capacidades[data-domino] .capacidade__num,
.capacidades[data-domino] .capacidade__nome { transition-delay: 0s; }
}
.canais {
margin-top: var(--s-5);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0;
border-top: 1px solid var(--filete);
}
.canais li { border-bottom: 1px solid var(--filete); }
.canais a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
min-height: 56px;
padding-inline: var(--s-3) var(--s-2);
font-size: var(--fs-ui);
font-weight: 500;
background-image: none;
transition: color var(--t-cor), padding-left .3s var(--curva);
}
.canais a::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
order: 2;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: .5;
transition: opacity var(--t-cor), transform .3s var(--curva);
}
.canais a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--dourado);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--curva);
}
.canais a:hover { color: #fff; padding-left: calc(var(--s-3) + 6px); }
.canais a:hover::before { opacity: 1; transform: translate(2px, -2px); }
.canais a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.canais a, .canais a::before, .canais a::after { transition: none; }
.canais a:hover { padding-left: var(--s-3); }
}
.galeria__mosaico {
margin-top: var(--s-7);
padding-inline: var(--pad-lateral);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-4);
align-items: start;
padding-bottom: 96px;
}
.galeria__coluna {
display: grid;
gap: var(--s-4);
align-content: start;
--amp: 0px;
transform: translate3d(0, calc(var(--p, 0) * var(--amp)), 0);
}
.galeria__coluna:nth-child(2) { --amp: -44px; will-change: transform; }
.galeria__coluna:nth-child(3) { --amp: -88px; will-change: transform; }
.galeria__figura {
margin: 0;
--avanco: clamp(0, calc((var(--p, 1) - .10) / .42), 1);
opacity: var(--avanco);
transform: translate3d(0, calc((1 - var(--avanco)) * 32px), 0);
}
.galeria__item {
position: relative;
overflow: hidden;
background: var(--sup-2);
aspect-ratio: var(--ar, 1);
clip-path: inset(calc((1 - var(--avanco)) * 100%) 0 0 0);
}
.galeria__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(calc(1 + (1 - var(--avanco)) * .06));
transform-origin: 50% 55%;
transition: transform 1.1s var(--curva), filter .8s var(--curva);
}
.galeria__marca {
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
z-index: 2;
border-left: 2px solid rgba(255, 255, 255, .55);
border-top: 2px solid rgba(255, 255, 255, .55);
transform: scale(var(--avanco));
transform-origin: top left;
transition: border-color .4s var(--curva);
}
.galeria__legenda {
position: relative;
margin-top: var(--s-3);
padding-bottom: var(--s-3);
display: flex;
gap: var(--s-3);
font-size: var(--fs-eyebrow);
color: var(--tinta-suave);
opacity: clamp(0, calc((var(--avanco) - .5) / .5), 1);
}
.galeria__conta {
margin-top: var(--s-4);
max-width: 46ch;
color: var(--tinta-2);
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.6;
}
.galeria__txt { flex: 1; }
.galeria__num {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
font-variant-numeric: tabular-nums;
color: var(--tinta-2);
transition: color .38s var(--curva);
}
.galeria__legenda::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--filete);
}
.galeria__legenda::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
z-index: 1;
background: var(--dourado);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--curva);
}
.galeria__figura:hover .galeria__item img,
.galeria__figura:focus-within .galeria__item img { transform: scale(1.05); }
.galeria__figura:hover .galeria__marca,
.galeria__figura:focus-within .galeria__marca { border-color: var(--dourado); }
.galeria__figura:hover .galeria__num,
.galeria__figura:focus-within .galeria__num { color: var(--accent-txt); }
.galeria__figura:hover .galeria__legenda::before,
.galeria__figura:focus-within .galeria__legenda::before { transform: scaleX(1); }
.galeria__figura.is-estatico,
.galeria__mosaico:not([data-progresso]) .galeria__figura:not([data-progresso]) {
--avanco: 1;
}
.galeria__mosaico.is-estatico .galeria__coluna { transform: none; }
@media (max-width: 1100px) {
.galeria__mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria__coluna:nth-child(2) { --amp: -56px; }
.galeria__coluna:nth-child(3) { --amp: -56px; }
}
@media (max-width: 700px) {
.galeria__mosaico { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s-7); }
.galeria__coluna { --amp: 0px; will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
.galeria__figura { transform: none; }
.galeria__item { clip-path: none; }
.galeria__item img { transform: none; transition: none; }
.galeria__coluna { transform: none; }
.galeria__legenda::before, .galeria__num, .galeria__marca { transition: none; }
.galeria__figura:hover .galeria__item img { transform: none; }
}
.oferta-rolo {
margin-top: var(--gap-bloco);
overflow-x: auto;
overscroll-behavior-x: contain;
}
.oferta {
width: 100%;
min-width: 720px;
border-collapse: collapse;
text-align: left;
}
.oferta thead th {
vertical-align: bottom;
padding: 0 var(--s-4) var(--s-4);
border-bottom: 1px solid var(--filete-forte);
}
.oferta__nome {
display: block;
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--tinta-titulo);
text-wrap: balance;
}
.oferta__resumo {
display: block;
margin-top: var(--s-2);
font-size: var(--fs-eyebrow);
font-weight: 400;
color: var(--tinta-2);
}
.oferta tbody th {
width: 15%;
padding: var(--s-4) var(--s-4) var(--s-4) 0;
vertical-align: top;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
color: var(--tinta-2);
text-transform: uppercase;
border-bottom: 1px solid var(--filete);
}
.oferta td {
width: 28.33%;
padding: var(--s-4);
vertical-align: top;
font-size: var(--fs-small);
color: var(--tinta-suave);
border-bottom: 1px solid var(--filete);
border-left: 1px solid var(--filete);
}
.oferta tbody tr:hover td { color: var(--tinta); }
.oferta thead th:hover .oferta__nome { color: var(--accent-txt); }
.oferta__rotulo { display: none; }
@media (max-width: 860px) {
.oferta-rolo { overflow-x: visible; }
.oferta, .oferta thead, .oferta tbody, .oferta tr, .oferta th, .oferta td {
display: block;
width: auto;
}
.oferta { min-width: 0; }
.oferta thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.oferta tbody tr { padding-block: var(--s-5); border-bottom: 1px solid var(--filete-forte); }
.oferta tbody tr:last-child { border-bottom: 0; }
.oferta tbody th { width: auto; padding: 0 0 var(--s-3); border-bottom: 0; }
.oferta td {
width: auto;
padding: var(--s-2) 0 var(--s-2) var(--s-3);
border-left: 2px solid var(--filete);
border-bottom: 0;
}
.oferta__rotulo {
display: block;
font-size: var(--fs-eyebrow);
font-weight: 500;
color: var(--tinta-titulo);
margin-bottom: 2px;
}
}
.obras {
padding-top: 0;
}
.obra {
position: relative;
padding-block: var(--s-7);
border-top: 1px solid var(--filete);
}
.obra:first-child { border-top: 0; padding-top: var(--s-5); }
.obra:last-child { padding-bottom: 0; }
.obra__trilho {
display: flex;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.obra__idx {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
font-variant-numeric: tabular-nums;
color: var(--tinta-2);
transition: color .38s var(--curva);
}
.obra__setor {
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: .01em;
color: var(--tinta-titulo);
white-space: nowrap;
}
.obra__cota {
flex: 1;
height: 9px;
border-right: 1px solid var(--filete-forte);
background: linear-gradient(var(--filete-forte), var(--filete-forte))
center / 100% 1px no-repeat;
}
.obra__regua {
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 2px;
background: var(--dourado);
transform: scaleX(0);
transform-origin: left;
transition: transform .55s var(--curva);
}
.obra:hover .obra__regua { transform: scaleX(1); }
.obra:hover .obra__idx { color: var(--accent-txt); }
.obra__corpo {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--s-8);
align-items: start;
}
.obra:nth-child(even) .obra__corpo {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.obra:nth-child(even) .obra__placa { order: 2; }
.obra:nth-child(even) .obra__texto { order: 1; }
.obra__placa {
position: relative;
aspect-ratio: 1 / 1;
max-width: 420px;
width: 100%;
overflow: hidden;
border: 1px solid var(--filete);
background: var(--sup-2);
}
.obra:nth-child(even) .obra__placa { margin-left: auto; }
.obra__placa picture { display: block; }
.obra__placa img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(.2) contrast(1.05);
transition: filter .8s var(--curva), transform 1s var(--curva);
}
.obra:hover .obra__placa img { filter: none; transform: scale(1.03); }
.obra__placa::after {
content: "";
position: absolute;
left: -1px;
top: -1px;
width: 24px;
height: 24px;
border-left: 2px solid var(--filete-forte);
border-top: 2px solid var(--filete-forte);
z-index: 2;
}
.obra__titulo { max-width: 16ch; margin-top: -.19em; }
.obra__lead {
margin-top: var(--s-4);
font-size: var(--fs-lead);
line-height: 1.36;
max-width: 52ch;
color: var(--tinta-suave);
}
.obra__dados {
margin-top: var(--s-6);
border-top: 1px solid var(--filete);
}
.obra__linha {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--s-4);
padding-block: var(--s-3);
border-bottom: 1px solid var(--filete);
}
.obra__rotulo {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tinta-2);
}
.obra__valor { margin: 0; font-size: var(--fs-small); color: var(--tinta-suave); }
@media (max-width: 1023px) {
.obra { padding-block: var(--s-7); }
.obra__corpo,
.obra:nth-child(even) .obra__corpo { grid-template-columns: 1fr; gap: var(--s-5); }
.obra__placa,
.obra:nth-child(even) .obra__placa { order: -1; max-width: 300px; margin-left: 0; }
.obra__titulo { max-width: none; }
.obra__dados { margin-top: var(--s-5); }
}
@media (max-width: 640px) {
.obra__placa,
.obra:nth-child(even) .obra__placa { max-width: none; }
}
@media (max-width: 620px) {
.obra__trilho { margin-bottom: var(--s-5); }
.obra__linha { grid-template-columns: 1fr; gap: var(--s-1); }
}
@media (prefers-reduced-motion: reduce) {
.obra__regua, .obra__idx, .obra__placa img { transition: none; }
.obra:hover .obra__placa img { transform: none; }
}
@media (max-width: 900px) {
.rodape__lista { gap: 4px; }
.rodape__lista a {
display: block;
padding-block: 10px;
}
.rodape__legais a {
display: inline-block;
padding-block: 12px;
margin-block: -12px;
}
.contato__valor a {
display: inline-block;
padding-block: 10px;
padding-inline: 2px;
margin-block: -10px;
margin-inline: -2px;
}
.trilha a {
display: inline-block;
padding-block: 13px;
margin-block: -13px;
}
.nav__marca {
padding-block: 6px;
margin-block: -6px;
}
.rodape__lista a:active,
.rodape__legais a:active,
.contato__valor a:active,
.trilha a:active,
.nav__painel a:active { opacity: .55; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
}
.aviso {
position: fixed;
inset: auto 0 0 0;
z-index: 90;
background: var(--sup-3);
color: var(--sobre-3);
border-top: 1px solid rgba(255, 255, 255, .55);
--tinta-2: var(--navy-luz);
--borda-ui: var(--borda-ui-esc);
--foco: var(--dourado);
}
.aviso[hidden] { display: none; }
.aviso__interno {
max-width: var(--container);
margin-inline: auto;
padding: var(--s-4) var(--pad-lateral);
display: flex;
align-items: center;
gap: var(--s-5);
}
.aviso__texto {
margin: 0;
max-width: 78ch;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--sobre-3-2);
}
.aviso__rotulo {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sobre-3);
margin-right: var(--s-2);
}
.aviso__acoes {
display: flex;
align-items: center;
gap: var(--s-4);
flex-shrink: 0;
margin-left: auto;
}
.aviso__link {
color: var(--sobre-3-2);
font-size: var(--fs-small);
text-decoration: underline;
text-underline-offset: 4px;
padding-block: 12px;
margin-block: -12px;
transition: color var(--t-cor);
}
.aviso__link:hover { color: var(--sobre-3); }
.aviso__botao {
min-height: 44px;
padding-inline: var(--s-4);
border: 1px solid var(--borda-ui-esc);
background: transparent;
color: var(--sobre-3);
font-family: inherit;
font-size: var(--fs-ui);
font-weight: 500;
letter-spacing: normal;
cursor: pointer;
transition: background-color var(--t-cor), color var(--t-cor), border-color var(--t-cor);
}
.aviso__botao:hover {
background: var(--dourado);
border-color: var(--dourado);
color: var(--navy);
}
@media (prefers-reduced-motion: no-preference) {
.aviso { transform: translateY(12px); opacity: 0; }
.aviso.is-visivel {
transform: none;
opacity: 1;
transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
}
@media (max-width: 900px) {
.aviso__interno {
flex-direction: column;
align-items: stretch;
gap: var(--s-3);
padding: var(--s-4) var(--pad-lateral);
}
.aviso__acoes { margin-left: 0; justify-content: space-between; }
.aviso__botao { flex: 1; max-width: 60%; }
}
.contratos-rolo {
margin-top: var(--gap-bloco);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
grid-template-areas:
"programa nota"
"quadro   nota";
column-gap: var(--s-8);
row-gap: var(--s-4);
align-items: start;
}
.contratos__programa {
grid-area: programa;
margin: 0;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tinta-2);
}
.contratos__quadro {
grid-area: quadro;
overflow-x: auto;
overscroll-behavior-x: contain;
}
.contratos {
width: 100%;
min-width: 380px;
border-collapse: collapse;
text-align: left;
}
.contratos th:nth-child(1), .contratos td:nth-child(1) { width: 34%; }
.contratos th:nth-child(2), .contratos td:nth-child(2) { width: 30%; }
.contratos th:nth-child(3), .contratos td:nth-child(3) { width: 36%; }
.contratos thead th {
padding: 0 var(--s-4) var(--s-3) 0;
border-bottom: 1px solid var(--filete-forte);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tinta-2);
white-space: nowrap;
}
.contratos tbody th,
.contratos tbody td {
padding: var(--s-4) var(--s-4) var(--s-4) 0;
vertical-align: baseline;
border-bottom: 1px solid var(--filete);
font-size: var(--fs-small);
font-weight: 400;
color: var(--tinta-suave);
}
.contratos .contratos__num {
text-align: right;
padding-right: 0;
}
.contratos__data,
.contratos__valor {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.contratos__valor {
font-size: var(--fs-body);
color: var(--tinta-titulo);
}
.contratos tfoot th,
.contratos tfoot td {
padding: var(--s-4) var(--s-4) 0 0;
border-top: 1px solid var(--filete-forte);
font-size: var(--fs-small);
font-weight: 500;
color: var(--tinta-titulo);
}
.contratos tfoot th { text-align: left; }
.contratos tfoot .contratos__valor { font-weight: 500; }
.contratos__nota {
grid-area: nota;
margin: 0;
align-self: start;
padding-left: var(--s-4);
border-left: 1px solid var(--filete);
font-size: var(--fs-legal);
line-height: 1.55;
color: var(--tinta-2);
}
.contratos__nota b { font-weight: 500; color: var(--tinta-titulo); }
.contratos__rotulo { display: none; }
@media (max-width: 1023px) {
.contratos-rolo {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "programa" "quadro" "nota";
row-gap: var(--s-5);
}
.contratos__nota { max-width: 62ch; align-self: start; }
}
@media (max-width: 700px) {
.contratos__quadro { overflow-x: visible; }
.contratos { min-width: 0; display: block; }
.contratos thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.contratos tbody, .contratos tfoot { display: block; }
.contratos tbody tr {
display: block;
padding-block: var(--s-4);
border-bottom: 1px solid var(--filete);
}
.contratos tbody tr:first-child { padding-top: 0; }
.contratos tbody th,
.contratos tbody td,
.contratos th:nth-child(1), .contratos td:nth-child(1),
.contratos th:nth-child(2), .contratos td:nth-child(2),
.contratos th:nth-child(3), .contratos td:nth-child(3) {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
width: auto;
padding: 4px 0;
border-bottom: none;
text-align: left;
}
.contratos__rotulo {
display: block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tinta-2);
}
.contratos tfoot tr {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--filete-forte);
}
.contratos tfoot th,
.contratos tfoot td { padding: 0; border-top: none; }
}