@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500;
font-display: swap; src: url("../fontes/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600;
font-display: swap; src: url("../fontes/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700;
font-display: swap; src: url("../fontes/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
font-display: swap; src: url("../fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
font-display: swap; src: url("../fontes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400;
font-display: swap; src: url("../fontes/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400;
font-display: swap; src: url("../fontes/newsreader-latin-400-italic.woff2") format("woff2"); }
:root {
--fundo:     #070D0C;
--obs:       #0B1613;
--verde:     #0F2E28;
--papel:     #EBEDEA;
--mag:       #CE1B62;
--mag-luz:   #FF3D7F;
--graf:      #7E8682;
--ink:       #EBEDEA;
--ink-soft:  #B8C0BC;
--ink-faint: #7E8682;
--fio:       rgba(235, 237, 234, .11);
--painel-ink: #1B2320;
--painel-ink-soft: #59615D;
--painel-fio: rgba(27, 35, 32, .16);
--vidro: linear-gradient(160deg, rgba(235, 237, 234, .055), rgba(235, 237, 234, .012));
--vidro-fio: rgba(235, 237, 234, .08);
--vidro-fio-hover: rgba(255, 61, 127, .45);
--vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .06);
--vidro-glow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 40px rgba(206, 27, 98, .14), 0 0 34px rgba(206, 27, 98, .18);
--progresso: 0;
--f-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
--f-texto:  "Newsreader", Georgia, "Times New Roman", serif;
--f-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--ang: 142.13deg;
--rot: -37.87deg;
--corte: clamp(56px, 8vw, 110px);
--corte-y: clamp(64px, 8vw, 112px);
--gutter: clamp(20px, 5vw, 72px);
--max: 1280px;
--medida: 65ch;
--margem: calc(max((100% - var(--max)) / 2, 0px) + var(--gutter));
--t: 220ms;
--curva: cubic-bezier(.22, .61, .36, 1);
--curva-entrada: cubic-bezier(.2, .8, .2, 1);
--mola: linear(0, 0.1718, 0.5129, 0.8336, 1.0454, 1.1375, 1.1412, 1.0996,
1.0481, 1.0075, 0.9849, 0.9782, 0.9816, 0.9889, 0.996, 1.0008, 1.0029,
1.0031, 1.0022, 1.0011, 1.0002, 0.9997, 0.9995, 0.9996, 0.9997, 0.9999,
1, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1);
--topo-h: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--fundo);
color: var(--ink);
color-scheme: dark;
font: 400 18px/1.62 var(--f-texto);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
html { overflow-x: visible; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--fundo);
padding-top: var(--topo-h);
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
main {
flex: 1 0 auto;
position: relative;
isolation: isolate;
}
.rodape { overflow-x: clip; }
main::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: min(120vh, 980px);
z-index: -2;
pointer-events: none;
background:
radial-gradient(120% 90% at 88% 6%, rgba(15, 46, 40, .95) 0%, transparent 62%),
radial-gradient(90% 70% at 4% 96%, rgba(206, 27, 98, .30) 0%, transparent 60%),
radial-gradient(60% 50% at 50% 50%, rgba(15, 46, 40, .40) 0%, transparent 70%),
#070D0C;
-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.pag-home main::before {
background:
radial-gradient(120% 90% at 88% 6%, rgba(15, 46, 40, .95) 0%, transparent 62%),
radial-gradient(90% 70% at 4% 96%, rgba(206, 27, 98, .30) 0%, transparent 60%),
radial-gradient(60% 50% at 50% 50%, rgba(15, 46, 40, .40) 0%, transparent 70%),
linear-gradient(to bottom, transparent 45%, #070D0C 88%),
repeating-linear-gradient(0deg, rgba(235, 237, 234, .03) 0 1px, transparent 1px 32px),
repeating-linear-gradient(90deg, rgba(235, 237, 234, .03) 0 1px, transparent 1px 32px),
#070D0C;
}
main::after {
content: "";
position: absolute;
left: 40%; right: 0; top: 0;
height: min(52vh, 400px);
z-index: -1;
pointer-events: none;
background: linear-gradient(var(--ang), transparent 0 49.8%, rgba(255, 61, 127, .9) 49.8% 50.05%, transparent 50.05%);
filter: blur(.4px) drop-shadow(0 0 16px rgba(255, 61, 127, .6));
}
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--mag-luz);
outline-offset: 3px;
}
::selection { background: var(--mag); color: #fff; }
.pular {
position: absolute;
left: var(--gutter);
top: -200px;
z-index: 200;
padding: 10px 14px;
background: var(--mag);
color: #fff;
font: 600 14px/1 var(--f-titulo);
text-decoration: none;
}
.pular:focus { top: 8px; }
h1, h2, h3, h4 {
font-family: var(--f-titulo);
font-weight: 600;
margin: 0;
line-height: 1.08;
letter-spacing: -.03em;
overflow-wrap: anywhere;
color: var(--ink);
}
.t-display, .t-1, .t-2, .t-3 { font-family: var(--f-titulo); font-weight: 600; text-wrap: balance; }
.t-display {
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.06;
letter-spacing: -.04em;
}
.t-1 {
font-size: clamp(1.55rem, 3vw, 2.25rem);
line-height: 1.1;
letter-spacing: -.04em;
}
.t-2 {
font-size: clamp(1.25rem, 1.9vw, 1.6rem);
line-height: 1.16;
letter-spacing: -.03em;
}
.t-3 {
font-size: 1.08rem;
line-height: 1.28;
letter-spacing: -.02em;
}
.rotulo {
font: 500 11px/1.4 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
margin: 0;
color: var(--mag-luz);
}
.rotulo--apoio   { color: var(--ink-soft); font-weight: 400; }
.rotulo--magenta { color: var(--mag-luz); }
.cab-pagina > .rotulo--apoio,
.cab-pagina__texto > .rotulo--apoio:first-child,
.como__cab .rotulo--apoio,
.prova__cab .rotulo--apoio,
.quem__texto > .rotulo--apoio,
main .in > .rotulo--apoio:first-child { color: var(--mag-luz); font-weight: 500; }
.campo-verde .rotulo, .como .rotulo,
.campo-verde .in > .rotulo--apoio:first-child,
.como .como__cab .rotulo--apoio { color: var(--ink); }
.prosa {
font-family: var(--f-texto);
font-weight: 400;
font-size: 18px;
line-height: 1.66;
max-width: var(--medida);
}
.prosa p { margin: 0 0 1.3em; }
.prosa p:last-child { margin-bottom: 0; }
.prosa a { text-decoration-color: var(--mag-luz); text-underline-offset: .18em; transition: color var(--t); }
.prosa a:hover { color: var(--mag-luz); }
.prosa em { font-style: italic; }
.prosa strong { font-family: var(--f-titulo); font-weight: 600; font-size: .92em; letter-spacing: -.01em; }
.prosa ul { padding-left: 1.2em; margin: 0 0 1.3em; }
.prosa li { margin-bottom: .4em; }
.lede {
font: 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.55 var(--f-texto);
max-width: 32em;
margin: 0;
color: var(--ink-soft);
}
.link {
font: 600 15px/1.3 var(--f-titulo);
letter-spacing: -.01em;
text-decoration: none;
border-bottom: 1px solid var(--mag-luz);
padding-bottom: 2px;
transition: color var(--t), border-color var(--t);
}
.link:hover { color: var(--mag-luz); }
.link-discreto {
appearance: none;
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: var(--ink-soft);
font: 400 12px/1.4 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid rgba(235, 237, 234, .25);
padding-bottom: 3px;
transition: border-color var(--t), color var(--t);
}
.link-discreto:hover { color: var(--ink); border-color: var(--mag-luz); }
.btn {
display: inline-flex;
align-items: center;
gap: .6em;
padding: 14px 24px;
border: 0;
font: 600 15px/1 var(--f-titulo);
letter-spacing: -.01em;
text-decoration: none;
cursor: pointer;
transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease, box-shadow var(--t) ease;
}
.btn--p { padding: 10px 16px; font-size: 14px; }
.btn--magenta {
background: var(--mag);
color: #fff;
box-shadow: 0 0 0 0 rgba(255, 61, 127, .45);
}
.btn--magenta:hover { background: var(--mag-luz); box-shadow: 0 0 28px 0 rgba(255, 61, 127, .35); }
.btn--papel { background: var(--papel); color: var(--fundo); }
.btn--papel:hover { background: var(--mag-luz); color: #fff; box-shadow: 0 0 28px 0 rgba(255, 61, 127, .35); }
.btn--contorno {
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(235, 237, 234, .35);
}
.btn--contorno:hover {
color: var(--mag-luz);
box-shadow: inset 0 0 0 1px var(--mag-luz), 0 0 24px 0 rgba(255, 61, 127, .25);
}
.in {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.secao { padding-block: clamp(72px, 9.6vw, 144px); }
.secao--fio { border-top: 1px solid var(--fio); }
.campo-escuro {
color: var(--ink);
background:
radial-gradient(90% 80% at 96% 0%, rgba(15, 46, 40, .85) 0%, transparent 60%),
radial-gradient(70% 60% at 0% 100%, rgba(206, 27, 98, .22) 0%, transparent 60%),
var(--obs);
}
.campo-verde {
color: var(--ink);
background:
radial-gradient(80% 90% at 92% 0%, rgba(206, 27, 98, .16) 0%, transparent 60%),
radial-gradient(60% 70% at 6% 100%, rgba(7, 13, 12, .55) 0%, transparent 70%),
var(--verde);
}
.campo-cortado {
--x-topo: calc(var(--margem) + var(--corte-y) * 1.2857);
--c: calc(var(--corte-y) * .7893);
position: relative;
clip-path: polygon(0 var(--corte-y), var(--margem) var(--corte-y), var(--x-topo) 0, 100% 0, 100% 100%, 0 100%);
padding-top: calc(var(--corte-y) + 36px);
}
.campo-cortado::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
linear-gradient(var(--ang), transparent 0 var(--c), rgba(255, 61, 127, .6) var(--c) calc(var(--c) + 1px), rgba(255, 61, 127, .14) calc(var(--c) + 1px) calc(var(--c) + 5px), transparent calc(var(--c) + 5px)) 100% 0 / calc(100% - var(--margem)) var(--corte-y) no-repeat,
linear-gradient(rgba(255, 61, 127, .6), rgba(255, 61, 127, .6)) 0 var(--corte-y) / var(--margem) 1px no-repeat,
linear-gradient(rgba(255, 61, 127, .14), rgba(255, 61, 127, .14)) 0 calc(var(--corte-y) + 1px) / var(--margem) 4px no-repeat;
}
.campo-cortado > * { position: relative; z-index: 1; }
.corte {
-webkit-mask-image: linear-gradient(var(--ang), #000 0 calc(100% - var(--corte)), transparent calc(100% - var(--corte)));
mask-image: linear-gradient(var(--ang), #000 0 calc(100% - var(--corte)), transparent calc(100% - var(--corte)));
}
.vidro {
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.vidro:hover { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.marco {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(235, 237, 234, .035) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(235, 237, 234, .035) 0 1px, transparent 1px 24px),
linear-gradient(var(--ang), transparent 0 calc(50% - .5px), rgba(255, 61, 127, .35) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
linear-gradient(var(--ang), transparent 0 21px, rgba(235, 237, 234, .22) 21px 22px, transparent 22px),
linear-gradient(160deg, rgba(15, 46, 40, .55), rgba(11, 22, 19, .92));
border: 1px solid rgba(235, 237, 234, .09);
clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.marco--4x5  { aspect-ratio: 4 / 5; }
.marco--16x9 { aspect-ratio: 16 / 9; }
.marco--21x9 { aspect-ratio: 21 / 9; }
.marco::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
transform: translate(-50%, -50%);
pointer-events: none;
background:
linear-gradient(rgba(235, 237, 234, .25), rgba(235, 237, 234, .25)) 50% 50% / 14px 1px no-repeat,
linear-gradient(rgba(235, 237, 234, .25), rgba(235, 237, 234, .25)) 50% 50% / 1px 14px no-repeat;
}
.marco__rotulo {
position: absolute;
left: 14px; bottom: 12px;
margin: 0;
font: 400 10px/1.4 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-faint);
white-space: nowrap;
}
.marco--claro {
background:
repeating-linear-gradient(0deg, rgba(11, 22, 19, .05) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(11, 22, 19, .05) 0 1px, transparent 1px 24px),
linear-gradient(var(--ang), transparent 0 calc(50% - .5px), rgba(206, 27, 98, .35) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
linear-gradient(var(--ang), transparent 0 21px, rgba(11, 22, 19, .18) 21px 22px, transparent 22px),
rgba(11, 22, 19, .06);
border-color: rgba(11, 22, 19, .12);
}
.marco--claro::after {
background:
linear-gradient(rgba(11, 22, 19, .3), rgba(11, 22, 19, .3)) 50% 50% / 14px 1px no-repeat,
linear-gradient(rgba(11, 22, 19, .3), rgba(11, 22, 19, .3)) 50% 50% / 1px 14px no-repeat;
}
.marco--claro .marco__rotulo { color: var(--graf); }
.cab-pagina { padding-block: clamp(58px, 8.4vw, 125px) clamp(38px, 4.8vw, 67px); }
.cab-pagina .rotulo { margin-bottom: 22px; }
.cab-pagina .t-display { max-width: 20ch; }
.cab-pagina .lede { margin-top: 30px; }
main.com-obra::after { content: none; }
.cab-pagina--obra {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
column-gap: clamp(40px, 6vw, 104px);
align-items: center;
}
.cab-pagina__texto { min-width: 0; }
.cab-obra { margin: 0; min-width: 0; position: relative; }
@media (max-width: 899px) {
.cab-pagina--obra { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
}
.pecas {
aspect-ratio: 1 / .88;
max-width: 580px;
width: 100%;
justify-self: end;
}
.pecas__fios {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.pecas__fios line {
stroke: rgba(235, 237, 234, .2);
stroke-width: 1;
stroke-dasharray: 3 6;
vector-effect: non-scaling-stroke;
transition: stroke var(--t) ease, stroke-width var(--t) ease;
}
.pecas__fios line.acesa {
stroke: var(--mag-luz);
stroke-width: 1.5;
stroke-dasharray: none;
}
.peca {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
width: clamp(104px, 30%, 172px);
padding: 12px 14px 14px;
display: grid;
gap: 12px;
background: var(--obs);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
color: var(--ink);
text-decoration: none;
transition: border-color var(--t) ease, box-shadow var(--t) ease, opacity var(--t) ease;
}
.peca__topo { display: flex; align-items: center; justify-content: space-between; }
.peca__topo .ico { color: var(--mag-luz); opacity: .8; }
.peca__n {
font: 500 10px/1 var(--f-mono);
letter-spacing: .14em;
color: var(--graf);
}
.peca__nome {
font: 600 clamp(.92rem, 1.25vw, 1.06rem)/1.1 var(--f-titulo);
letter-spacing: -.02em;
}
.pecas.foco .peca { opacity: .4; }
.pecas.foco .peca--ativa,
.pecas.foco .peca--vizinha { opacity: 1; }
.peca--ativa { border-color: var(--mag-luz); box-shadow: var(--vidro-glow); }
.peca--vizinha { border-color: var(--vidro-fio-hover); }
.peca:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 3px; }
.pecas__dica {
position: absolute;
left: 0;
bottom: -38px;
font: 400 10.5px/1.5 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--graf);
}
.pecas__dica--toque { display: none; }
@media (hover: none) {
.pecas__dica--mouse { display: none; }
.pecas__dica--toque { display: inline; }
}
@media (max-width: 899px) {
.pecas { justify-self: stretch; max-width: 520px; margin-bottom: 30px; }
}
.pilha {
width: 100%;
max-width: 580px;
justify-self: end;
display: grid;
gap: 22px;
}
.pilha__placas {
--abre: 1;
position: relative;
aspect-ratio: 1 / .74;
}
.placa {
position: absolute;
left: 0;
bottom: 0;
width: 64%;
z-index: calc(10 - var(--i));
transform-origin: 0 100%;
transform:
translate(calc(var(--i) * 10% * var(--abre)), calc(var(--i) * -12.9% * var(--abre)))
scale(calc(1 - var(--i) * .03));
filter: brightness(calc(1 - var(--i) * .08));
border: 1px solid var(--vidro-fio);
background: var(--obs);
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .85);
transition: transform 520ms cubic-bezier(.2, .8, .2, 1), filter var(--t) ease, border-color var(--t) ease;
}
.placa img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 470; object-fit: cover; object-position: top; }
.placa__nome {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 26px 14px 11px;
background: linear-gradient(to top, rgba(7, 13, 12, .92), rgba(7, 13, 12, 0));
font: 500 10.5px/1.3 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
opacity: 0;
transition: opacity var(--t) ease;
}
.placa__nome b { color: var(--mag-luz); font-weight: 500; margin-right: 6px; }
.placa:first-child .placa__nome { opacity: 1; }
@media (hover: hover) {
.pilha__placas:hover { --abre: 1.35; }
.pilha__placas:hover .placa__nome { opacity: 0; }
.placa:hover { filter: none; border-color: var(--vidro-fio-hover); }
.placa:hover .placa__nome,
.pilha__placas:hover .placa:hover .placa__nome { opacity: 1; }
}
.pilha__placas:focus-within { --abre: 1.35; }
.placa:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 3px; filter: none; }
.placa:focus-visible .placa__nome { opacity: 1; }
.pilha__legenda {
font: 400 10.5px/1.5 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--graf);
}
@media (prefers-reduced-motion: reduce) { .placa { transition: none; } }
@media (max-width: 899px) {
.pilha { justify-self: stretch; max-width: 520px; }
}
.cab-pagina--obra.rx-cab { align-items: start; }
.rx-cab__teste {
width: 100%;
max-width: 600px;
justify-self: end;
padding: clamp(24px, 3vw, 38px);
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
scroll-margin-top: calc(var(--topo-h, 76px) + 20px);
}
.rx-cab__teste .rx-trilha { margin-bottom: clamp(22px, 3vw, 32px); }
.rx-cab__teste .rx-q__texto { font-size: clamp(1.35rem, 2.3vw, 1.9rem); max-width: 26ch; }
.rx-cab__teste .rx-nav { margin-top: 24px; }
.rx-cab .rx-vivo { margin-top: 38px; max-width: 340px; }
html:not(.rx-comecou) .rx-cab .rx-vivo { display: none; }
@media (prefers-reduced-motion: no-preference) {
.rx-comecou .rx-cab .rx-vivo { animation: rx-vivo-entra 520ms ease both; }
}
@keyframes rx-vivo-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: .82; transform: none; } }
.cab-pagina--obra:has(> .rx-cab__teste[hidden]) { grid-template-columns: minmax(0, 1fr); }
.cab-pagina--obra:has(> .rx-cab__teste[hidden]) .rx-vivo { display: none; }
@media (max-width: 899px) {
.rx-cab__teste { justify-self: stretch; max-width: none; }
}
.sobre__retrato {
width: 100%;
max-width: 400px;
justify-self: end;
}
.sobre__retrato .retrato { max-width: 100%; }
.sobre__retrato figcaption { margin-top: 14px; }
.ficha {
margin: 34px 0 0;
display: grid;
gap: 0;
border-top: 1px solid var(--fio);
max-width: 34em;
}
.ficha > div {
display: grid;
grid-template-columns: 7.5em minmax(0, 1fr);
gap: 16px;
padding: 13px 0;
border-bottom: 1px solid var(--fio);
}
.ficha dt {
font: 500 10.5px/1.6 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mag-luz);
}
.ficha dd { margin: 0; font: 400 .98rem/1.5 var(--f-texto); color: var(--ink-soft); }
@media (max-width: 899px) {
.sobre__retrato { justify-self: start; max-width: 360px; }
}
@media (max-width: 479px) {
.ficha > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.arq-destaque {
width: 100%;
max-width: 540px;
justify-self: end;
position: relative;
padding-top: clamp(40px, 5vw, 72px);
}
.arq-destaque__404 {
position: absolute;
right: -.04em;
top: -.08em;
z-index: 0;
font: 600 clamp(7rem, 15vw, 13rem)/.8 var(--f-titulo);
letter-spacing: -.06em;
color: rgba(235, 237, 234, .06);
pointer-events: none;
user-select: none;
}
@supports (-webkit-text-stroke: 1px #000) {
.arq-destaque__404 { color: transparent; -webkit-text-stroke: 1px rgba(235, 237, 234, .2); }
}
.arq-destaque__cartao {
position: relative;
z-index: 1;
display: block;
background: var(--obs);
border: 1px solid var(--vidro-fio);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
color: var(--ink);
text-decoration: none;
transition: border-color var(--t) ease;
}
.arq-destaque__cartao:hover { border-color: var(--vidro-fio-hover); }
.arq-destaque__cartao:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 3px; }
.arq-destaque__capa { display: block; overflow: hidden; }
.arq-destaque__capa img {
display: block;
width: 100%;
aspect-ratio: 16 / 8;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}
.arq-destaque__cartao:hover .arq-destaque__capa img { transform: scale(1.03); }
.arq-destaque__corpo { display: grid; gap: 12px; padding: 20px 22px 22px; }
.arq-destaque__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.arq-destaque__meta .rotulo { margin: 0; }
.arq-destaque__titulo {
font: 600 clamp(1.2rem, 1.9vw, 1.5rem)/1.15 var(--f-titulo);
letter-spacing: -.03em;
}
.arq-destaque__resumo { font: 400 .98rem/1.55 var(--f-texto); color: var(--ink-soft); }
.arq-destaque__ler {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: start;
margin-top: 4px;
font: 600 .9rem/1 var(--f-titulo);
letter-spacing: -.01em;
border-bottom: 1px solid var(--mag-luz);
padding-bottom: 5px;
}
.arq-destaque__ler .ico { color: var(--mag-luz); }
@media (prefers-reduced-motion: reduce) { .arq-destaque__capa img { transition: none; } }
@media (max-width: 899px) {
.arq-destaque { justify-self: stretch; max-width: 560px; }
}
.capitulos { padding-block: clamp(24px, 3vw, 40px) clamp(80px, 9vw, 130px); }
.cap {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: 20px clamp(32px, 6vw, 96px);
padding-block: clamp(36px, 4.4vw, 60px);
border-top: 1px solid var(--fio);
}
.cap__cab { display: grid; gap: 12px; align-content: start; }
.cap__n {
font: 500 11px/1 var(--f-mono);
letter-spacing: .16em;
color: var(--mag-luz);
}
.cap__t {
margin: 0;
font: 600 clamp(1.2rem, 1.9vw, 1.55rem)/1.15 var(--f-titulo);
letter-spacing: -.03em;
color: var(--ink);
max-width: 16ch;
}
.cap__corpo { min-width: 0; }
.cap__corpo.prosa, .cap__corpo .prosa { color: var(--ink-soft); max-width: 40em; }
.cap__frase {
font: 600 clamp(1.15rem, 1.7vw, 1.4rem)/1.3 var(--f-titulo) !important;
letter-spacing: -.02em;
color: var(--ink);
max-width: 30ch;
}
.cap__numeros {
list-style: none;
margin: 30px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
max-width: 44em;
}
.cap__numeros li {
display: grid;
gap: 6px;
align-content: start;
padding: 20px 18px 18px;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
}
.cap__numeros b {
font: 600 clamp(1.9rem, 3vw, 2.5rem)/1 var(--f-titulo);
letter-spacing: -.05em;
color: var(--ink);
}
.cap__numeros span { font: 400 .95rem/1.35 var(--f-texto); color: var(--ink-soft); }
.cap__numeros i {
margin-top: 8px;
font: 500 9.5px/1.4 var(--f-mono);
font-style: normal;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mag-luz);
}
.cap__nota {
margin: 20px 0 0;
max-width: 44em;
font: 400 .92rem/1.6 var(--f-texto);
color: var(--graf);
}
.cap__citacao { margin: 0 0 26px; padding: 0; }
.cap__citacao p {
margin: 0;
font: 600 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--f-titulo);
letter-spacing: -.04em;
color: var(--ink);
max-width: 22ch;
}
.cap__acao { margin-top: 30px !important; }
@media (max-width: 799px) {
.cap { grid-template-columns: minmax(0, 1fr); }
.cap__t { max-width: none; }
}
.contato__fecho {
margin-top: clamp(44px, 5vw, 64px);
padding-top: clamp(28px, 3.4vw, 40px);
border-top: 1px solid rgba(235, 237, 234, .14);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
}
.contato__fecho-t {
margin: 0;
font: 600 clamp(1.2rem, 2vw, 1.55rem)/1.2 var(--f-titulo);
letter-spacing: -.03em;
color: var(--ink);
max-width: 26ch;
}
.contato__fecho-acoes { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) {
.contato__fecho-acoes, .contato__fecho-acoes .btn { width: 100%; justify-content: center; }
}
.conversa {
width: 100%;
max-width: 470px;
justify-self: end;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
}
.conversa__cab {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--vidro-fio);
}
.conversa__avatar {
flex: none;
width: 38px; height: 38px;
display: grid;
place-items: center;
background: var(--fundo);
border: 1px solid var(--vidro-fio);
}
.conversa__avatar svg { width: 20px; height: auto; fill: var(--ink); }
.conversa__avatar .ponta { fill: var(--mag-luz); }
.conversa__quem { display: grid; gap: 4px; }
.conversa__quem b { font: 600 .95rem/1.1 var(--f-titulo); letter-spacing: -.02em; }
.conversa__quem i {
font: 400 10px/1.2 var(--f-mono);
font-style: normal;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--graf);
display: flex; align-items: center; gap: 7px;
}
.conversa__quem i::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--mag-luz);
box-shadow: 0 0 8px rgba(255, 61, 127, .55);
}
.conversa__fio {
display: flex;
flex-direction: column;
gap: 12px;
padding: 26px 20px 22px;
min-height: 250px;
justify-content: flex-end;
}
.conversa__msg {
margin: 0;
max-width: 84%;
padding: 13px 16px 15px;
font: 400 .98rem/1.5 var(--f-texto);
color: var(--ink);
}
.conversa__msg--voce {
align-self: flex-end;
background: rgba(206, 27, 98, .16);
border: 1px solid rgba(255, 61, 127, .32);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 14px) 100%, 0 100%);
}
.conversa__msg--eu {
align-self: flex-start;
background: rgba(235, 237, 234, .06);
border: 1px solid var(--vidro-fio);
clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 11px));
}
.conversa__digitando {
align-self: flex-start;
overflow: hidden;
margin: 0;
padding: 12px 14px;
display: none;
gap: 5px;
background: rgba(235, 237, 234, .06);
border: 1px solid var(--vidro-fio);
}
.conversa__digitando span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ink-soft);
}
.conversa__escrever {
display: flex;
gap: 10px;
padding: 14px 16px 16px;
border-top: 1px solid var(--vidro-fio);
}
.conversa__escrever input {
flex: 1 1 auto;
min-width: 0;
padding: 12px 14px;
background: rgba(7, 13, 12, .6);
border: 1px solid var(--vidro-fio);
color: var(--ink);
font: 400 .95rem/1.2 var(--f-texto);
}
.conversa__escrever input::placeholder { color: var(--ink-faint); }
.conversa__escrever input:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 2px; border-color: transparent; }
.conversa__enviar {
flex: none;
width: 46px;
display: grid;
place-items: center;
background: var(--mag);
border: 0;
color: #fff;
cursor: pointer;
transition: background var(--t) ease, box-shadow var(--t) ease;
}
.conversa__enviar:hover { background: var(--mag-luz); box-shadow: 0 0 22px rgba(255, 61, 127, .35); }
.conversa__enviar:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 3px; }
.conversa__enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.conversa__legenda {
padding: 0 16px 16px;
font: 400 10px/1.5 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--graf);
}
@media (prefers-reduced-motion: no-preference) {
.js .conversa__msg--voce { opacity: 0; animation: conversa-chega 420ms cubic-bezier(.2, .8, .2, 1) 350ms forwards; }
.js .conversa__digitando {
display: flex;
opacity: 0;
animation: conversa-digita 1500ms ease 900ms forwards;
}
.js .conversa__digitando span { animation: conversa-ponto 900ms ease-in-out infinite; }
.js .conversa__digitando span:nth-child(2) { animation-delay: 150ms; }
.js .conversa__digitando span:nth-child(3) { animation-delay: 300ms; }
.js .conversa__msg--eu { opacity: 0; animation: conversa-chega 420ms cubic-bezier(.2, .8, .2, 1) 2350ms forwards; }
}
@keyframes conversa-chega { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes conversa-digita {
0%   { opacity: 0; max-height: 40px; padding-block: 12px; margin-top: 0; border-width: 1px; }
12%  { opacity: 1; }
88%  { opacity: 1; max-height: 40px; padding-block: 12px; margin-top: 0; border-width: 1px; }
100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -12px; border-width: 0; }
}
@keyframes conversa-ponto { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-width: 899px) {
.conversa { justify-self: stretch; max-width: none; }
.conversa__fio { min-height: 0; }
}
.painel {
--c: clamp(72px, 11vw, 160px);
position: relative;
color: var(--painel-ink);
background:
linear-gradient(var(--ang), var(--fundo) 0 var(--c), transparent var(--c)),
linear-gradient(var(--ang), transparent 0 var(--c), var(--mag) var(--c) calc(var(--c) + 2px), transparent calc(var(--c) + 2px)),
linear-gradient(var(--ang), transparent 0 calc(100% - var(--c)), var(--fundo) calc(100% - var(--c))),
linear-gradient(var(--ang), transparent 0 calc(100% - var(--c) - 2px), var(--mag) calc(100% - var(--c) - 2px) calc(100% - var(--c)), transparent calc(100% - var(--c))),
var(--papel);
padding-block: calc(var(--c) * 1.15 + 28px);
}
.painel h1, .painel h2, .painel h3, .painel h4 { color: var(--painel-ink); }
.painel .prosa {
font-size: clamp(18px, 1.35vw, 19px);
line-height: 1.68;
color: var(--painel-ink);
}
.painel .prosa a { color: var(--mag); text-decoration-color: var(--mag); }
.painel .prosa a:hover { color: var(--painel-ink); }
.painel .rotulo { color: var(--mag); }
.painel .rotulo--apoio { color: var(--painel-ink-soft); }
.painel .link { color: var(--painel-ink); border-bottom-color: var(--mag); }
.painel .link:hover { color: var(--mag); }
.painel :focus-visible { outline-color: var(--mag); }
.painel ::selection { background: var(--mag); color: #fff; }
.painel .btn--magenta { box-shadow: none; }
.painel .btn--magenta:hover { box-shadow: 0 0 24px 0 rgba(206, 27, 98, .3); }
.topo {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 14px 14px 0;
pointer-events: none;
}
.topo__in {
pointer-events: auto;
position: relative;
max-width: 1100px;
margin-inline: auto;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 8px 8px 20px;
transition: padding 260ms var(--curva-entrada), min-height 260ms var(--curva-entrada);
}
.topo__in::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 999px;
background: rgba(11, 22, 19, .52);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(235, 237, 234, .10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 40px rgba(0, 0, 0, .35);
transition: background-color 260ms var(--curva-entrada);
}
html.compacto .topo__in { min-height: 48px; padding-block: 6px; }
html.compacto .topo__in::before { background: rgba(11, 22, 19, .70); }
html.sobre-claro .topo__in::before { background: rgba(11, 22, 19, .93); }
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ink);
}
.logo .simbolo { height: 22px; width: auto; }
.logo__nome {
display: block;
font: 600 18px/1 var(--f-titulo);
letter-spacing: -.05em;
}
.logo__desc {
display: block;
margin-top: 4px;
font: 400 8px/1 var(--f-mono);
letter-spacing: .32em;
text-transform: uppercase;
color: var(--ink-soft);
}
.simbolo { fill: currentColor; }
.simbolo .ponta { fill: var(--mag-luz); }
.topo__acoes { display: flex; align-items: center; gap: 8px; }
.topo__acoes .btn--magenta {
border-radius: 999px;
padding: 11px 18px;
font-size: 13px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.topo__acoes .btn--magenta:hover {
background: var(--mag-luz);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 28px 0 rgba(255, 61, 127, .45);
}
.topo__menu {
display: none;
appearance: none;
position: relative;
width: 40px; height: 40px;
padding: 0;
background: rgba(235, 237, 234, .06);
border: 1px solid rgba(235, 237, 234, .12);
border-radius: 999px;
box-shadow: var(--vidro-brilho);
cursor: pointer;
transition: background-color var(--t), border-color var(--t);
}
.topo__menu:hover, .topo.aberto .topo__menu { background: rgba(235, 237, 234, .12); border-color: rgba(235, 237, 234, .3); }
.topo__menu-linha {
position: absolute;
left: 12px; right: 12px;
height: 1.5px;
background: var(--ink);
transition: transform 260ms var(--curva-entrada), top 260ms var(--curva-entrada);
}
.topo__menu-linha:first-child { top: 15px; }
.topo__menu-linha:nth-child(2) { top: 23px; }
.topo.aberto .topo__menu-linha:first-child { top: 19px; transform: rotate(var(--rot)); }
.topo.aberto .topo__menu-linha:nth-child(2) { top: 19px; transform: rotate(calc(-1 * var(--rot))); }
.nav { position: relative; }
.lente {
position: absolute;
left: 0; top: 0;
width: 0; height: 0;
border-radius: 999px;
background: rgba(235, 237, 234, .07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
opacity: 0;
pointer-events: none;
transition: left 220ms var(--curva-entrada), width 220ms var(--curva-entrada), opacity 220ms var(--curva-entrada);
}
.lente.visivel { opacity: 1; }
.nav__lista {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__lista a {
position: relative;
display: inline-block;
padding: 10px 14px;
border-radius: 999px;
font: 500 13px/1 var(--f-titulo);
letter-spacing: -.01em;
text-decoration: none;
color: var(--ink-soft);
transition: color var(--t);
}
.nav__lista a:hover { color: var(--ink); }
.nav__lista a[aria-current="page"] { color: var(--ink); }
@media (max-width: 860px) {
.topo__menu { display: inline-block; }
.logo__desc { display: none; }
.topo__in { padding-left: 16px; }
.topo__acoes .btn--magenta { padding: 10px 14px; }
.lente { display: none; }
.js .nav {
position: fixed;
left: 0; right: 0; top: 0;
z-index: -2;
padding: calc(var(--topo-h) + 22px) calc(var(--gutter) + 6px) 40px;
background: rgba(11, 22, 19, .82);
border-bottom: 1px solid rgba(235, 237, 234, .10);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05), 0 20px 60px rgba(0, 0, 0, .45);
visibility: hidden;
opacity: 0;
transform: translate3d(0, -14px, 0);
transition: opacity 260ms var(--curva-entrada), transform 260ms var(--curva-entrada), visibility 0s linear 260ms;
}
html.js.sobre-claro .nav { background: rgba(11, 22, 19, .94); }
.js .topo.aberto .nav {
visibility: visible;
opacity: 1;
transform: none;
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
transition: opacity 260ms var(--curva-entrada), transform 260ms var(--curva-entrada), visibility 0s;
}
.nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
.nav__lista li {
opacity: 0;
transform: translate3d(-18px, 14px, 0);
transition: opacity 320ms var(--curva-entrada), transform 320ms var(--curva-entrada);
}
.topo.aberto .nav__lista li { opacity: 1; transform: none; }
.topo.aberto .nav__lista li:nth-child(2) { transition-delay: 60ms; }
.topo.aberto .nav__lista li:nth-child(3) { transition-delay: 120ms; }
.topo.aberto .nav__lista li:nth-child(4) { transition-delay: 180ms; }
.nav__lista a {
display: block;
padding: 14px 0;
border-radius: 0;
font: 600 clamp(24px, 7vw, 28px)/1.1 var(--f-titulo);
letter-spacing: -.035em;
color: var(--ink);
border-top: 1px solid var(--fio);
}
.nav__lista li:first-child a { border-top: 0; }
.nav__lista a[aria-current="page"] { color: var(--mag-luz); }
html:not(.js) .topo { position: absolute; }
html:not(.js) .topo__in { flex-wrap: wrap; }
html:not(.js) .nav { width: 100%; padding: 8px 12px 12px; }
html:not(.js) .nav__lista li { opacity: 1; transform: none; }
html:not(.js) .topo__menu { display: none; }
}
.rodape {
position: relative;
padding-block: 64px 48px;
font-family: var(--f-titulo);
font-size: 14px;
background: var(--fundo);
}
.rodape::before {
content: "";
position: absolute;
left: var(--margem); top: 0;
width: 54px; height: 42px;
pointer-events: none;
--c: 33.15px;
background: linear-gradient(var(--ang), transparent 0 var(--c), rgba(255, 61, 127, .55) var(--c) calc(var(--c) + 1px), transparent calc(var(--c) + 1px));
}
.rodape::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 42px;
pointer-events: none;
background:
linear-gradient(rgba(255, 61, 127, .55), rgba(255, 61, 127, .55)) 0 41px / var(--margem) 1px no-repeat,
linear-gradient(var(--fio), var(--fio)) 100% 0 / calc(100% - var(--margem) - 54px) 1px no-repeat;
}
.rodape ul a {
font: 400 12px/1.4 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.rodape__in {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 32px;
}
.rodape .logo .simbolo { height: 28px; }
.rodape__tese {
margin: 20px 0 0;
font: 400 16px/1.55 var(--f-texto);
max-width: 28em;
color: var(--ink-soft);
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li + li { margin-top: 12px; }
.rodape a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--t), color var(--t); }
.rodape a:hover { border-bottom-color: var(--mag-luz); color: var(--mag-luz); }
.rodape .rotulo { margin-bottom: 18px; }
.rodape__base {
margin-top: 48px;
padding-top: 22px;
border-top: 1px solid var(--fio);
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
justify-content: space-between;
}
@media (max-width: 719px) {
.rodape__in { grid-template-columns: 1fr; gap: 30px; }
}
.pergunta { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 86px); }
.pergunta h1 { max-width: 24ch; }
.hud {
display: block;
margin: 0 0 22px;
font: 400 10px/1.4 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.hud--linha { margin-bottom: clamp(28px, 4vw, 48px); }
.hud--linha::before {
content: "";
display: inline-block;
width: 24px; height: 1px;
margin-right: 12px;
vertical-align: middle;
background: var(--mag-luz);
box-shadow: 0 0 8px rgba(255, 61, 127, .6);
}
.pergunta__sub {
margin: 34px 0 44px;
font: 600 clamp(1.1rem, 1.8vw, 1.4rem)/1.25 var(--f-titulo);
letter-spacing: -.03em;
color: var(--ink-soft);
}
.diag { display: grid; gap: 10px; }
.diag__item {
appearance: none;
margin: 0;
width: 100%;
cursor: pointer;
text-align: left;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 12px 16px;
padding: 18px 20px 19px;
background: linear-gradient(160deg, rgba(235, 237, 234, .06), rgba(235, 237, 234, .012));
border: 1px solid rgba(235, 237, 234, .10);
color: var(--ink);
box-shadow: var(--vidro-brilho);
transition: border-color var(--t) ease, background var(--t) ease, box-shadow var(--t) ease;
}
.diag__topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.diag__topo .ico { color: var(--mag-luz); opacity: .7; transition: opacity var(--t); }
.diag__topo .rotulo { color: var(--mag-luz); }
.diag__frase {
font: 600 clamp(1.02rem, 1.3vw, 1.18rem)/1.25 var(--f-titulo);
letter-spacing: -.03em;
max-width: 24em;
}
.diag__seta { color: var(--ink-faint); transition: transform var(--t) ease, color var(--t) ease; }
.diag__item:hover { border-color: var(--vidro-fio-hover); }
.diag__item:hover .diag__topo .ico,
.diag__item--ativo .diag__topo .ico { opacity: 1; }
.diag__item:hover .diag__seta { color: var(--ink-soft); }
.diag__item:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 2px; }
.diag__item--ativo,
.diag__item--ativo:hover {
border-color: var(--mag-luz);
background: linear-gradient(160deg, rgba(206, 27, 98, .17), rgba(206, 27, 98, .04));
box-shadow: var(--vidro-glow);
}
.diag__item--ativo .diag__seta,
.diag__item--ativo:hover .diag__seta { color: var(--mag-luz); }
.diag__painel {
padding: clamp(24px, 3.4vw, 44px);
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
scroll-margin-top: calc(var(--topo-h) + 16px);
}
.diag--vivo .diag__painel:not(.diag__painel--aberto) { display: none; }
.diag--vivo .diag__painel--aberto { animation: diag-entra 420ms var(--curva-entrada) both; }
@keyframes diag-entra { from { opacity: 0; transform: translate3d(-18px, 14px, 0); } }
.diag__detalhe { display: grid; gap: 26px 40px; }
.diag__painel h4 { margin: 0 0 12px; }
.diag__parte p {
margin: 0;
font: 400 16.5px/1.62 var(--f-texto);
color: var(--ink-soft);
max-width: 34em;
}
.diag__resolve { margin-top: 34px; }
.diag__entregas {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.diag__entregas li {
padding: 6px 12px;
border: 1px solid rgba(255, 61, 127, .38);
border-radius: 999px;
background: rgba(206, 27, 98, .10);
font: 500 10.5px/1.4 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mag-luz);
}
.diag__pe {
margin-top: 30px;
padding-top: 22px;
border-top: 1px solid var(--fio);
display: grid;
gap: 22px 40px;
}
.diag__prova p {
margin: 0;
font: 400 15px/1.5 var(--f-texto);
color: var(--ink-soft);
max-width: 46ch;
}
.diag__prova b {
font: 600 clamp(1.5rem, 2.2vw, 1.9rem)/1 var(--f-titulo);
letter-spacing: -.05em;
color: var(--ink);
margin-right: 8px;
vertical-align: -.04em;
font-variant-numeric: tabular-nums;
}
.diag__vizinhas { display: flex; flex-wrap: wrap; gap: 8px; }
.diag__vizinha {
appearance: none;
cursor: pointer;
padding: 7px 14px;
background: none;
border: 1px solid var(--fio);
color: var(--ink-soft);
font: 400 11px/1.4 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
transition: border-color var(--t) ease, color var(--t) ease;
}
.diag__vizinha:hover { border-color: var(--mag-luz); color: var(--ink); }
.diag__vizinha:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 2px; }
.diag__acao {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 14px 26px;
align-items: center;
}
@media (min-width: 720px) {
.diag__detalhe { grid-template-columns: 1fr 1fr; }
.diag__pe { grid-template-columns: 1.4fr 1fr; }
}
@media (min-width: 960px) {
.diag--vivo {
grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
grid-template-rows: repeat(6, auto) 1fr;
gap: 10px 20px;
align-items: start;
}
.diag--vivo .diag__item { grid-column: 1; grid-row: var(--r); }
.diag--vivo .diag__painel { grid-column: 2; grid-row: 1 / -1; align-self: stretch; }
.diag__item--ativo .diag__seta { transform: rotate(45deg); }
}
@media (max-width: 959px) {
.diag__item--ativo .diag__seta { transform: rotate(135deg); }
.diag--vivo .diag__painel--aberto { margin-top: -10px; border-top: 0; }
.diag--vivo .diag__painel--aberto { border-color: rgba(255, 61, 127, .38); }
}
@media (max-width: 639px) {
.diag__item { padding: 16px 18px 17px; }
.diag__painel { padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.diag--vivo .diag__painel--aberto { animation: none; }
.diag__seta { transition: none; }
}
.como {
color: var(--ink);
background:
radial-gradient(80% 90% at 92% 0%, rgba(206, 27, 98, .16) 0%, transparent 60%),
radial-gradient(50% 60% at 6% 0%, rgba(7, 13, 12, .45) 0%, transparent 70%),
var(--verde);
padding-top: clamp(80px, 8.5vw, 120px);
padding-bottom: calc(clamp(80px, 8.5vw, 120px) + var(--corte-y));
}
.como__cab {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 16px 32px;
margin-bottom: 48px;
}
.como__cab .t-1 { margin-top: 14px; }
.passos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px 24px;
}
.passo { border-top: 1px solid rgba(235, 237, 234, .18); padding-top: 18px; position: relative; }
.passo__n { color: var(--ink); }
.passo__nome {
margin: 12px 0 10px;
font-size: clamp(1.2rem, 1.7vw, 1.5rem);
letter-spacing: -.035em;
}
.passo p:not(.rotulo) { margin: 0; font: 400 16px/1.55 var(--f-texto); max-width: 24em; color: var(--ink-soft); }
@media (min-width: 900px) {
.passo:not(:last-child)::after {
content: "→";
position: absolute;
right: -20px;
top: 18px;
font: 400 12px/1.4 var(--f-mono);
color: var(--ink-soft);
}
}
@media (max-width: 899px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 539px) { .passos { grid-template-columns: 1fr; } }
.ambiente {
position: relative;
margin-top: calc(-1 * var(--corte-y));
padding-top: 0;
z-index: 1;
}
.ambiente .marco__rotulo { left: var(--margem); }
.ambiente .marco {
aspect-ratio: 21 / 9;
min-height: 320px;
border-left: 0; border-right: 0; border-top: 0;
clip-path: none;
}
.ambiente__frase {
position: absolute;
left: 0; right: 0;
top: calc(var(--corte-y) + 36px);
z-index: 2;
margin-block: 0;
pointer-events: none;
}
.ambiente__frase span {
display: block;
max-width: 14ch;
font: 600 clamp(1.2rem, 1.8vw, 1.4rem)/1.2 var(--f-titulo);
letter-spacing: -.03em;
color: var(--ink);
text-shadow: 0 2px 24px rgba(7, 13, 12, .8);
}
@media (max-width: 720px) {
.ambiente .marco { min-height: 220px; }
}
.prova__cab { max-width: 46em; margin-bottom: 52px; }
.prova__cab .t-1 { margin: 18px 0 26px; max-width: 18ch; }
.prova__cab .prosa { color: var(--ink-soft); }
.cartoes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 38px 24px;
}
@media (max-width: 899px) { .cartoes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cartoes { grid-template-columns: 1fr; } }
.cartao {
display: block;
text-decoration: none;
color: inherit;
}
.cartao__capa {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--verde);
border: 1px solid var(--vidro-fio);
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.cartao:hover .cartao__capa { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.cartao__capa img { width: 100%; height: 100%; object-fit: cover; }
.cartao__capa--marco { aspect-ratio: auto; background: none; border: 0; }
.cartao:hover .cartao__capa--marco { box-shadow: none; }
.cartao:hover .cartao__capa--marco .marco { border-color: var(--vidro-fio-hover); box-shadow: inset 0 0 40px rgba(206, 27, 98, .14); }
.cartao__meta {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 18px 0 10px;
}
.cartao__titulo {
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.22;
letter-spacing: -.03em;
transition: color var(--t);
}
.cartao:hover .cartao__titulo { color: var(--mag-luz); }
.cartao__resumo { margin: 10px 0 0; font: 400 16px/1.55 var(--f-texto); color: var(--ink-soft); }
.js .revelar .cartao__capa::after {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(var(--ang), transparent 0 50%, var(--fundo) 50%) 100% 100% / 200% 200% no-repeat;
transition: background-position 720ms cubic-bezier(.4, 0, .2, 1);
transition-delay: calc(var(--i, 0) * 120ms);
pointer-events: none;
}
.js .revelar.revelado .cartao__capa::after { background-position: 0 0; }
.quem {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 48px clamp(32px, 6vw, 96px);
align-items: center;
}
.quem__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.quem__foto .marco { aspect-ratio: 4 / 5; }
.quem__texto .t-1 { margin: 18px 0 32px; max-width: 16ch; }
.quem__texto .prosa { color: var(--ink-soft); }
.quem__texto .link { display: inline-block; margin-top: 32px; }
@media (max-width: 799px) {
.quem { grid-template-columns: 1fr; }
.quem__foto { max-width: 420px; }
}
.fecho { padding-bottom: clamp(76px, 9.6vw, 144px); }
.fecho .hud { margin-bottom: 18px; }
.fecho .t-1 { max-width: 20ch; }
.fecho .prosa { margin-top: 32px; color: var(--ink-soft); }
.fecho .in > .btn { margin-top: 42px; }
.assinar { margin-top: 76px; padding-top: 38px; border-top: 1px solid var(--fio); max-width: 40em; }
.assinar__texto {
display: block;
margin: 0 0 20px;
font: 400 17px/1.55 var(--f-texto);
color: var(--ink-soft);
}
.assinar__linha { display: flex; gap: 10px; }
.assinar input {
flex: 1 1 auto;
min-width: 0;
padding: 13px 16px;
background: rgba(235, 237, 234, .04);
border: 1px solid rgba(235, 237, 234, .22);
color: var(--ink);
font: 400 15px/1 var(--f-mono);
border-radius: 0;
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.assinar input:focus { outline: none; border-color: var(--mag-luz); box-shadow: 0 0 18px 0 rgba(255, 61, 127, .22); }
.assinar input::placeholder { color: var(--ink-soft); opacity: .7; }
.assinar__retorno { margin-top: 14px; min-height: 1.4em; }
@media (max-width: 479px) {
.assinar__linha { flex-direction: column; }
.assinar .btn { justify-content: center; }
}
.indice {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin-top: 46px;
padding-top: 22px;
border-top: 1px solid var(--fio);
}
.indice a {
font: 500 11px/1.4 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
color: var(--ink-soft);
border-bottom: 1px solid transparent;
transition: border-color var(--t), color var(--t);
}
.indice a:hover { color: var(--mag-luz); border-bottom-color: var(--mag-luz); }
.grupo {
padding-block: clamp(58px, 7.2vw, 106px);
border-top: 1px solid var(--fio);
scroll-margin-top: var(--topo-h);
}
.grupo__in {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 40px clamp(32px, 5vw, 72px);
align-items: start;
}
.grupo__marco { position: sticky; top: calc(var(--topo-h) + 16px); }
.grupo--inverso .grupo__marco { order: 2; }
.grupo__cab { display: grid; grid-template-columns: 1fr; gap: 12px 32px; }
.grupo__cab .t-1 { max-width: 22ch; }
.grupo__corpo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
margin-top: 40px;
}
.grupo__parte h3 { margin-bottom: 14px; }
.grupo__parte p { margin: 0; font: 400 18px/1.66 var(--f-texto); max-width: 30em; }
.sintomas { list-style: none; margin: 0; padding: 0; }
.sintomas li { font: 400 17px/1.6 var(--f-texto); padding: 10px 0; border-top: 1px solid var(--fio); color: var(--ink-soft); }
.entregas--lista { list-style: none; margin: 0; padding: 0; }
.entregas--lista li {
padding: 12px 0;
border-top: 1px solid var(--fio);
font: 600 16px/1.3 var(--f-titulo);
letter-spacing: -.02em;
}
.nao-prioridade {
grid-column: 1 / -1;
padding: 24px 28px;
max-width: 44em;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: inset 3px 0 0 0 var(--mag-luz), var(--vidro-brilho);
}
.nao-prioridade h3 { margin-bottom: 12px; }
.nao-prioridade p { margin: 0; font: 400 17px/1.62 var(--f-texto); color: var(--ink-soft); }
.grupo__acao { grid-column: 1 / -1; }
@media (max-width: 899px) {
.grupo__in { grid-template-columns: 1fr; gap: 28px; }
.grupo__marco { position: static; }
.grupo--inverso .grupo__marco { order: 0; }
.grupo__corpo { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
}
.metodo { list-style: none; margin: 0; padding: 0; }
.metodo__passo {
display: grid;
grid-template-columns: 150px 1fr;
gap: 12px 32px;
padding: 44px 0 48px;
border-top: 1px solid var(--fio);
}
.metodo__passo .t-2 { margin-bottom: 16px; }
.metodo__passo p:not(.rotulo) { margin: 0; font: 400 18px/1.66 var(--f-texto); max-width: 30em; color: var(--ink-soft); }
@media (max-width: 719px) { .metodo__passo { grid-template-columns: 1fr; gap: 8px; } }
.garantias {
list-style: none;
margin: 44px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.garantias li {
padding: 20px 22px 24px;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
font: 600 clamp(1rem, 1.25vw, 1.15rem)/1.3 var(--f-titulo);
letter-spacing: -.025em;
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.garantias li:hover { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.garantias .rotulo { margin-bottom: 14px; }
@media (max-width: 899px) { .garantias { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .garantias { grid-template-columns: 1fr; } }
.filtros {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 38px;
padding: 0;
list-style: none;
}
.filtro {
appearance: none;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
padding: 9px 14px;
color: var(--ink-soft);
font: 500 11px/1.4 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease, box-shadow var(--t) ease;
}
.filtro:hover { color: var(--ink); border-color: var(--vidro-fio-hover); }
.filtro[aria-pressed="true"] { background: var(--mag); color: #fff; border-color: var(--mag); }
.filtro[aria-pressed="true"]:hover { background: var(--mag-luz); border-color: var(--mag-luz); box-shadow: 0 0 22px 0 rgba(255, 61, 127, .3); }
.lista-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
.lista-posts .assinar { grid-column: 1 / -1; margin: 8px 0; padding: 32px 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); max-width: none; }
.lista-posts .assinar__linha { max-width: 40em; }
.lista-posts .assinar__texto { max-width: 40em; }
.lista-vazia { grid-column: 1 / -1; margin: 0; font: 400 18px/1.6 var(--f-texto); color: var(--ink-soft); }
@media (max-width: 899px) { .lista-posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .lista-posts { grid-template-columns: 1fr; } }
.post { padding-bottom: clamp(76px, 9.6vw, 144px); }
.post__cab { padding-block: clamp(58px, 8.4vw, 115px) clamp(34px, 4.8vw, 58px); }
.post__cab h1 { max-width: 24ch; margin: 18px 0 28px; }
.post__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
}
.post__capa { margin-bottom: clamp(48px, 6vw, 76px); }
.post__capa .corte { background: var(--verde); }
.post__capa img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.post__capa .marco { aspect-ratio: 21 / 9; min-height: 180px; }
.post__capa figcaption { margin-top: 12px; }
.post .prosa { margin-inline: auto; }
.post__corpo { max-width: var(--medida); }
.post__corpo .prosa h2 {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
margin: 1.9em 0 .65em;
}
.post .painel { margin-top: 0; }
.post__fim { max-width: var(--medida); margin-top: clamp(48px, 6vw, 76px); }
.post__fim .assinar { margin-top: 0; max-width: none; }
.post__trabalhar {
margin-top: 46px;
padding-top: 22px;
border-top: 1px solid var(--fio);
font: 400 16px/1.55 var(--f-texto);
color: var(--ink-soft);
}
@media (min-width: 1000px) {
.post__corpo, .post__fim, .compartilhar { margin-left: calc(150px + 32px); }
}
.compartilhar {
max-width: var(--medida);
margin-top: clamp(40px, 5vw, 60px);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 24px;
}
.compartilhar__rot { margin: 0; }
.compartilhar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.compartilhar__bt {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 14px;
background: none;
border: 1px solid var(--vidro-fio-hover);
color: var(--ink);
font: 600 13px/1 var(--f-titulo);
letter-spacing: -.01em;
text-decoration: none;
cursor: pointer;
transition: border-color var(--t) ease, background var(--t) ease;
}
.compartilhar__bt .ico { color: var(--mag-luz); }
.compartilhar__bt:hover { border-color: var(--mag-luz); background: rgba(206, 27, 98, .10); }
.compartilhar__bt:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: 2px; }
.compartilhar__bt.copiado { border-color: var(--mag-luz); }
.post__fim { margin-top: clamp(36px, 4.4vw, 52px); }
.leia {
margin-top: clamp(64px, 7vw, 100px);
padding-top: clamp(32px, 4vw, 48px);
padding-bottom: clamp(24px, 3vw, 40px);
border-top: 1px solid var(--fio);
}
.leia__t { margin: 0 0 28px; color: var(--mag-luz); }
.leia__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; max-width: 900px; }
@media (max-width: 599px) { .leia__grade { grid-template-columns: minmax(0, 1fr); } }
.sobre__cab .t-display { max-width: 24ch; }
.sobre {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 48px clamp(32px, 6vw, 96px);
align-items: start;
}
.sobre__foto { position: sticky; top: calc(var(--topo-h) + 16px); }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sobre__foto .marco { aspect-ratio: 4 / 5; }
.sobre__foto figcaption { margin-top: 14px; }
.sobre__texto .btn { margin-top: 8px; }
@media (max-width: 799px) {
.sobre { grid-template-columns: 1fr; }
.sobre__foto { position: static; max-width: 440px; }
}
.contato__passos {
list-style: none;
margin: 46px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.contato__passos li {
padding: 22px 24px 26px;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.contato__passos li:hover { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.contato__passos .t-3 { margin: 14px 0 10px; }
.contato__passos p:not(.rotulo) { margin: 0; font: 400 16px/1.58 var(--f-texto); color: var(--ink-soft); }
.contato__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 52px; }
.contato__nota { margin-top: 30px; }
@media (max-width: 719px) { .contato__passos { grid-template-columns: 1fr; } }
.pag-404 main::after { display: none; }
.erro { position: relative; overflow: hidden; padding-block: clamp(66px, 10.8vw, 168px) clamp(76px, 9.6vw, 144px); }
.erro__num {
display: block;
font: 600 clamp(4.5rem, 16vw, 11rem)/.86 var(--f-titulo);
letter-spacing: -.06em;
margin-left: -.04em;
color: rgba(235, 237, 234, .22);
}
@supports (-webkit-text-stroke: 1px #000) {
.erro__num { color: transparent; -webkit-text-stroke: 1.5px rgba(235, 237, 234, .55); }
}
.erro__frase { display: block; margin-top: 24px; }
.erro .prosa { margin-top: 36px; color: var(--ink-soft); }
.erro > * { position: relative; z-index: 1; }
.erro__traco {
position: absolute;
left: 70%;
top: 45%;
z-index: 0;
width: 0;
height: 0;
transform: rotate(var(--rot));
pointer-events: none;
}
.erro__traco::before {
content: "";
position: absolute;
left: -120vmax;
top: 0;
width: 240vmax;
height: 1px;
background: rgba(255, 61, 127, .9);
box-shadow: 0 0 16px 1px rgba(255, 61, 127, .6);
}
.erro__lista { list-style: none; margin: 56px 0 0; padding: 0; max-width: 56em; }
.erro__lista li { border-top: 1px solid var(--fio); }
.erro__lista a {
display: grid;
grid-template-columns: 40px 170px 1fr;
gap: 8px 24px;
align-items: baseline;
padding: 22px 0;
text-decoration: none;
transition: color var(--t);
}
.erro__lista a:hover .t-2 { color: var(--mag-luz); }
.erro__lista .t-2 { transition: color var(--t); }
.erro__voltar { margin-top: 56px; }
@media (max-width: 719px) {
.erro__lista a { grid-template-columns: 40px 1fr; }
.erro__lista .rotulo--pilar { grid-column: 2; }
}
@media (max-width: 720px) {
main::before {
height: min(100vh, 720px);
background:
radial-gradient(120% 80% at 88% 0%, rgba(15, 46, 40, .9) 0%, transparent 62%),
radial-gradient(90% 60% at 0% 100%, rgba(206, 27, 98, .26) 0%, transparent 60%),
#070D0C;
}
.pag-home main::before {
background:
radial-gradient(120% 80% at 88% 0%, rgba(15, 46, 40, .9) 0%, transparent 62%),
radial-gradient(90% 60% at 0% 100%, rgba(206, 27, 98, .26) 0%, transparent 60%),
linear-gradient(to bottom, transparent 45%, #070D0C 88%),
repeating-linear-gradient(0deg, rgba(235, 237, 234, .03) 0 1px, transparent 1px 32px),
repeating-linear-gradient(90deg, rgba(235, 237, 234, .03) 0 1px, transparent 1px 32px),
#070D0C;
}
main::after {
left: 50%;
top: -6px;
height: 72px;
filter: blur(.4px);
}
.pergunta { padding-top: 84px; }
.cab-pagina, .post__cab { padding-top: 48px; }
.campo-escuro {
background:
radial-gradient(90% 80% at 96% 0%, rgba(15, 46, 40, .85) 0%, transparent 60%),
var(--obs);
}
.campo-verde, .como {
background:
radial-gradient(80% 90% at 92% 0%, rgba(206, 27, 98, .16) 0%, transparent 60%),
var(--verde);
}
.vidro,
.garantias li,
.contato__passos li,
.cartao__capa { box-shadow: var(--vidro-brilho); }
.nao-prioridade { box-shadow: inset 3px 0 0 0 var(--mag-luz), var(--vidro-brilho); }
.garantias li:hover,
.contato__passos li:hover,
.cartao:hover .cartao__capa { box-shadow: var(--vidro-brilho); }
}
.trilha {
position: fixed;
z-index: 40;
pointer-events: none;
left: 14px; right: 14px;
top: 73px;
height: 2px;
background: rgba(235, 237, 234, .08);
transition: top 260ms var(--curva-entrada);
}
html.compacto .trilha { top: 65px; }
.trilha__fio {
position: absolute;
left: 0; top: 0;
height: 100%;
width: calc(var(--progresso) * 100%);
background: var(--mag-luz);
box-shadow: 0 0 8px rgba(255, 61, 127, .5);
}
.trilha__cabeca, .trilha__nos { display: none; }
@media (min-width: 1024px) {
.trilha {
left: 28px; right: auto;
top: 110px; bottom: 90px;
width: 2px;
height: auto;
}
html.compacto .trilha { top: 110px; }
.trilha__fio {
width: 100%;
height: calc(var(--progresso) * 100%);
box-shadow: 0 0 6px rgba(255, 61, 127, .35);
}
.trilha__cabeca {
display: block;
position: absolute;
left: 50%;
top: calc(var(--progresso) * 100%);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--mag-luz);
box-shadow: 0 0 12px 2px rgba(255, 61, 127, .7);
transform: translate(-50%, -50%);
}
.trilha__nos {
display: block;
position: absolute;
inset: 0;
margin: 0; padding: 0;
list-style: none;
}
.trilha__no {
position: absolute;
left: 50%;
top: calc(var(--pos, 0) * 100%);
transform: translate(-50%, -50%);
width: 22px; height: 22px;
margin: 0; padding: 0;
border: 0;
background: transparent;
cursor: pointer;
pointer-events: auto;
border-radius: 50%;
}
.trilha__no::before {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 5px; height: 5px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: rgba(235, 237, 234, .25);
transition: background-color var(--t), box-shadow var(--t);
}
.trilha__no.ativo::before { background: var(--mag-luz); box-shadow: 0 0 10px 2px rgba(255, 61, 127, .55); }
.trilha__nome {
position: absolute;
left: 24px; top: 50%;
transform: translate(-6px, -50%);
padding: 3px 8px;
font: 400 10px/1.4 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink-soft);
background: rgba(11, 22, 19, .92);
border: 1px solid var(--fio);
opacity: 0;
pointer-events: none;
transition: opacity var(--t), transform 220ms var(--curva-entrada);
}
.trilha__no:hover .trilha__nome,
.trilha__no:focus-visible .trilha__nome { opacity: 1; transform: translate(0, -50%); }
}
.entra {
opacity: 0;
transform: translate3d(-18px, 14px, 0);
}
.entra.entrou {
opacity: 1;
transform: none;
transition: opacity 480ms var(--curva-entrada), transform 480ms var(--curva-entrada);
transition-delay: calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: 0ms !important;
transition-delay: 0ms !important;
animation: none !important;
}
.js .revelar .cartao__capa::after { display: none; }
.entra { opacity: 1; transform: none; }
.nav__lista li { opacity: 1; transform: none; }
}
.zh-sprite { display: none; }
.ico {
width: var(--ico, 24px);
height: var(--ico, 24px);
flex: none;
color: inherit;
stroke-width: 1.75;
}
.ico--16 { --ico: 16px; stroke-width: 2;    }
.ico--20 { --ico: 20px; stroke-width: 1.9;  }
.ico--24 { --ico: 24px; stroke-width: 1.75; }
.ico--32 { --ico: 32px; stroke-width: 1.5;  }
.ico--48 { --ico: 48px; stroke-width: 1.25; }
.passo__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.passo__topo .ico { color: var(--ink-soft); opacity: .5; }
.passos .passo__topo { justify-content: flex-start; gap: 10px; }
.grupo__cab .ico-tit--g { display: flex; gap: 10px; }
.grupo__cab .ico-tit--g > .ico { color: var(--mag-luz); opacity: .85; }
.indice a { display: inline-flex; align-items: center; gap: 8px; }
.indice a .ico { opacity: .45; transition: opacity var(--t) ease; }
.indice a:hover .ico { opacity: 1; }
.nao-prioridade h3.ico-tit { display: flex; }
.nao-prioridade h3.ico-tit > .ico { color: var(--mag-luz); opacity: 1; }
.metodo__marca {
display: flex;
align-items: center;
gap: 14px;
align-self: start;
}
.metodo__marca .ico { color: var(--mag-luz); opacity: .8; }
.link { display: inline-flex; align-items: center; gap: 8px; }
.quem__texto .link { display: inline-flex; }
.link .ico--seta { transition: transform var(--t) var(--curva-entrada); }
.link:hover .ico--seta { transform: translate3d(3px, -2.33px, 0); }
.rodape__fala a { display: inline-flex; align-items: center; gap: 8px; }
.rodape__fala .ico { opacity: .55; transition: opacity var(--t) ease; }
.rodape__fala a:hover .ico { opacity: 1; }
.contato__nota.ico-tit { display: flex; }
@media (prefers-reduced-motion: reduce) {
.link:hover .ico--seta { transform: none; }
}
.ambiente__img {
display: block;
width: 100%;
aspect-ratio: 21 / 9;
min-height: 320px;
object-fit: cover;
background: var(--verde);
}
@media (max-width: 720px) { .ambiente__img { min-height: 220px; } }
.grupo__img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--verde);
border: 1px solid var(--vidro-fio);
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.grupo:hover .grupo__img { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.post__capa .post__foto {
display: block;
width: 100%;
aspect-ratio: 21 / 9;
min-height: 180px;
object-fit: cover;
background: var(--verde);
}
.ambiente__aresta {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(var(--ang),
transparent 0 var(--c),
rgba(255, 61, 127, .85) var(--c) calc(var(--c) + 1.5px),
rgba(255, 61, 127, .20) calc(var(--c) + 1.5px) calc(var(--c) + 7px),
transparent calc(var(--c) + 7px)) 100% 0 / calc(100% - var(--margem)) 100% no-repeat,
linear-gradient(rgba(255, 61, 127, .85), rgba(255, 61, 127, .85)) 0 var(--corte-y) / var(--margem) 1.5px no-repeat,
linear-gradient(rgba(255, 61, 127, .20), rgba(255, 61, 127, .20)) 0 calc(var(--corte-y) + 1.5px) / var(--margem) 5px no-repeat;
}
@media (max-width: 720px) {
.ambiente::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(100deg,
rgba(7, 13, 12, .88) 0 30%,
rgba(7, 13, 12, .55) 55%,
rgba(7, 13, 12, 0) 78%);
}
}
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--fundo);
min-height: min(88vh, 840px);
display: flex;
align-items: center;
padding-block: clamp(64px, 9vw, 128px) clamp(72px, 9vw, 132px);
}
.hero__fundo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 50%;
}
.hero__z {
position: absolute;
z-index: 1;
top: 50%;
right: 3%;
translate: 0 -50%;
height: 90%;
aspect-ratio: 80 / 68;
width: auto;
pointer-events: none;
}
.hero__z--luz path {
fill: none;
stroke: rgba(255, 61, 127, .78);
stroke-width: .5;
stroke-linejoin: miter;
}
.hero__z--luz .hero__z-aresta {
fill: rgba(255, 61, 127, .50);
stroke: rgba(255, 233, 242, .85);
}
.hero__z--luz {
filter: drop-shadow(0 0 26px rgba(255, 61, 127, .38))
drop-shadow(0 0 70px rgba(255, 61, 127, .18));
}
.hero__z--fio { z-index: 3; }
.hero__z--fio path {
fill: none;
stroke: rgba(235, 237, 234, .15);
stroke-width: .42;
stroke-linejoin: miter;
}
.hero__z--fio .hero__z-aresta {
fill: rgba(206, 27, 98, .16);
stroke: rgba(255, 61, 127, .38);
}
.hero__cortina {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle var(--lr, 1px) at var(--lx, 72%) var(--ly, 40%),
rgba(7, 13, 12, 0) 0%,
rgba(7, 13, 12, .04) 30%,
rgba(7, 13, 12, .30) 58%,
rgba(7, 13, 12, .80) 82%,
var(--fundo) 100%);
}
.hero__veu {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(7, 13, 12, .80) 0 22%,
rgba(7, 13, 12, .58) 44%,
rgba(7, 13, 12, .18) 72%,
rgba(7, 13, 12, 0) 100%),
linear-gradient(to top, var(--fundo) 0, rgba(7, 13, 12, 0) 22%);
}
.hero__in { position: relative; z-index: 5; }
.hero__titulo {
text-wrap: balance;
margin: 0;
max-width: 19ch;
font-size: clamp(2.05rem, 4.6vw, 3.6rem);
line-height: 1.04;
letter-spacing: -.042em;
}
.hero__sub {
margin: clamp(22px, 2.6vw, 32px) 0 0;
font: 400 clamp(.98rem, 1.3vw, 1.08rem)/1.6 var(--f-texto);
color: var(--ink-soft);
max-width: 42ch;
}
.hero__acoes {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: clamp(30px, 3.4vw, 44px);
}
.js .hero .hud,
.js .hero .hero__titulo,
.js .hero .hero__sub,
.js .hero .hero__acoes { opacity: 0; transform: translate3d(-18px, 14px, 0); }
.js .hero--pronto .hud,
.js .hero--pronto .hero__titulo,
.js .hero--pronto .hero__sub,
.js .hero--pronto .hero__acoes {
opacity: 1;
transform: none;
transition: opacity 640ms var(--curva-entrada), transform 640ms var(--curva-entrada);
}
.js .hero--pronto .hud          { transition-delay: 120ms; }
.js .hero--pronto .hero__titulo { transition-delay: 220ms; }
.js .hero--pronto .hero__sub    { transition-delay: 380ms; }
.js .hero--pronto .hero__acoes  { transition-delay: 470ms; }
.hero__dica {
margin: clamp(26px, 3vw, 38px) 0 0;
display: flex;
align-items: center;
gap: 10px;
font: 500 10.5px/1 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--graf);
opacity: 0;
transition: opacity 700ms var(--curva-entrada) 1600ms;
}
.js .hero--pronto .hero__dica { opacity: 1; }
.js .hero--tocado .hero__dica { opacity: 0; transition-delay: 0ms; }
.hero__dica-ponto {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--mag-luz);
box-shadow: 0 0 10px rgba(255, 61, 127, .8);
animation: zh-pulso 2.4s ease-in-out infinite;
}
@keyframes zh-pulso {
0%, 100% { opacity: .35; transform: scale(.8); }
50%      { opacity: 1;   transform: scale(1.15); }
}
@media (max-width: 719px) {
.hero { min-height: min(92vh, 720px); }
.hero__fundo { object-position: 72% 50%; }
.hero__z { height: 46%; right: 4%; top: 76%; }
.hero__veu {
background:
linear-gradient(100deg, rgba(7, 13, 12, .88) 0 42%, rgba(7, 13, 12, .62) 70%, rgba(7, 13, 12, .18) 100%),
linear-gradient(to top, var(--fundo) 0, rgba(7, 13, 12, 0) 20%);
}
.hero__dica { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.js .hero .hud, .js .hero .hero__titulo,
.js .hero .hero__sub, .js .hero .hero__acoes { opacity: 1; transform: none; }
.hero__dica-ponto { animation: none; }
}
.resultados__cab { max-width: 46ch; margin-bottom: clamp(38px, 4.4vw, 60px); }
.resultados__lede { margin: 18px 0 0; font: 400 15px/1.62 var(--f-texto); color: var(--ink-soft); max-width: 44ch; }
.resultados__cab .t-1 { margin-top: 12px; }
.numeros {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--fio);
border: 1px solid var(--fio);
}
.numero {
background: var(--fundo);
padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px) clamp(26px, 2.8vw, 34px);
display: flex;
flex-direction: column;
gap: 10px;
transition: background var(--t) ease;
}
.numero:hover { background: rgba(235, 237, 234, .028); }
.numero__valor {
margin: 0;
font: 600 clamp(2.4rem, 4.6vw, 3.6rem)/.92 var(--f-titulo);
letter-spacing: -.055em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.numero__valor i { font-style: normal; color: var(--mag-luz); }
.numero { position: relative; }
.numero::before {
content: "";
position: absolute;
left: 0; top: -1px;
width: 38px; height: 2px;
background: var(--mag-luz);
transition: width 420ms var(--curva-entrada);
}
.numero:hover::before { width: 100%; }
.numero__oque {
margin: 0;
font: 400 clamp(.95rem, 1.2vw, 1.05rem)/1.45 var(--f-texto);
color: var(--ink);
max-width: 22ch;
}
.numero__onde { margin: auto 0 0; padding-top: 12px; }
.resultados__nota {
margin: clamp(26px, 3vw, 34px) 0 0;
font: 400 14px/1.62 var(--f-texto);
color: var(--ink-faint);
max-width: 68ch;
}
@media (max-width: 899px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 539px) { .numeros { grid-template-columns: 1fr; } }
.construido {
position: relative;
color: var(--ink);
background:
radial-gradient(80% 90% at 92% 0%, rgba(206, 27, 98, .16) 0%, transparent 60%),
radial-gradient(50% 60% at 6% 0%, rgba(7, 13, 12, .45) 0%, transparent 70%),
var(--verde);
padding-bottom: calc(clamp(72px, 9vw, 116px) + var(--corte-y));
}
.construido .rotulo--apoio { color: var(--ink); }
.construido .obra__tela { background: var(--obsidiana); }
.construido .obra__texto { color: #c7cecb; }
.construido__cab {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-bottom: clamp(36px, 4vw, 54px);
}
.construido__cab .t-1 { margin-top: 12px; max-width: 18ch; }
.construido__lede {
margin: 0;
font: 400 clamp(1rem, 1.3vw, 1.1rem)/1.6 var(--f-texto);
color: var(--ink-soft);
max-width: 40ch;
}
@media (min-width: 900px) {
.construido__cab { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 42px; }
}
.obras {
display: grid;
align-items: start;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 1099px) { .obras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .obras { grid-template-columns: 1fr; } }
.obra { display: flex; flex-direction: column; gap: 12px; }
.obra__tela {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid var(--vidro-fio);
margin-bottom: 6px;
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.obra:hover .obra__tela { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.obra__tela img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.obra__tela .marco { height: 100%; aspect-ratio: auto; }
.obra__titulo {
margin: 0;
font: 600 clamp(1.05rem, 1.4vw, 1.2rem)/1.2 var(--f-titulo);
letter-spacing: -.035em;
}
.obra__texto {
margin: 0;
font: 400 14.5px/1.55 var(--f-texto);
color: var(--ink-soft);
}
.construido__mais { margin: clamp(32px, 3.6vw, 44px) 0 0; }
.pergunta--meio { padding-block: clamp(72px, 9.6vw, 144px) clamp(48px, 6vw, 86px); }
.pergunta--meio .pergunta__sub { margin-top: 20px; }
.fecho__passos { margin: 22px 0 0; }
.retrato-caixa {
position: relative;
background: var(--verde);
--corte: clamp(40px, 5.5vw, 72px);
}
.retrato-caixa::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(var(--ang),
transparent 0 calc(100% - var(--corte) - 1px),
var(--mag-luz) calc(100% - var(--corte) - 1px) calc(100% - var(--corte)),
rgba(255, 61, 127, .16) calc(100% - var(--corte)) calc(100% - var(--corte) + 5px),
transparent calc(100% - var(--corte) + 5px));
}
.retrato {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
}
.quem__foto .retrato, .sobre__foto .retrato { max-width: 100%; }
.pergunta__nota {
margin: -20px 0 40px;
max-width: 62ch;
font: 400 15px/1.62 var(--f-texto);
color: var(--ink-faint);
}
.pergunta__nota b { color: var(--ink-soft); font-weight: 400; }
.rx-cab .lede { max-width: 54ch; }
.rx-meta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: clamp(26px, 3vw, 36px);
}
.rx-meta .ico { color: var(--mag-luz); }
.rx-teste { padding-bottom: clamp(72px, 9vw, 130px); }
.rx-trilha {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: clamp(30px, 4vw, 48px);
}
.rx-trilha__conta { margin: 0; white-space: nowrap; color: var(--ink); }
.rx-trilha__conta i { font-style: normal; color: var(--graf); }
.rx-trilha__rail {
flex: 1;
height: 3px;
background: var(--fio);
position: relative;
overflow: hidden;
}
.rx-trilha__luz {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(90deg, var(--mag) 0%, var(--mag-luz) 100%);
box-shadow: 0 0 14px rgba(255, 61, 127, .55);
transition: width 460ms var(--curva-entrada);
clip-path: polygon(0 0, 100% 0, calc(100% - 3.86px) 100%, 0 100%);
}
.rx-q {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
.rx-q__texto {
padding: 0;
max-width: 24ch;
font-family: var(--f-titulo);
font-weight: 600;
font-size: clamp(1.5rem, 3.4vw, 2.5rem);
line-height: 1.08;
letter-spacing: -.04em;
color: var(--ink);
}
.js .rx-q[data-q] .rx-q__texto,
.js .rx-q[data-q] .rx-op { animation: rx-entra 520ms var(--curva-entrada) both; }
.js .rx-q .rx-op:nth-child(1) { animation-delay: 60ms; }
.js .rx-q .rx-op:nth-child(2) { animation-delay: 110ms; }
.js .rx-q .rx-op:nth-child(3) { animation-delay: 160ms; }
.js .rx-q .rx-op:nth-child(4) { animation-delay: 210ms; }
@keyframes rx-entra {
from { opacity: 0; transform: translate3d(-14px, 11px, 0); }
to   { opacity: 1; transform: none; }
}
.rx-ops {
display: grid;
gap: 10px;
margin-top: clamp(30px, 3.6vw, 46px);
max-width: 62ch;
}
.rx-op {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 16px;
padding: 16px 20px;
border: 1px solid var(--vidro-fio);
background: var(--vidro);
cursor: pointer;
transition: border-color var(--t) ease, background var(--t) ease, transform var(--t) ease;
}
.rx-op:hover { border-color: var(--vidro-fio-hover); transform: translateX(3px); }
.rx-op input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.rx-op__letra {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 1px solid var(--fio);
font: 500 11px/1 var(--f-mono);
color: var(--graf);
transition: all var(--t) ease;
}
.rx-op__txt {
font: 400 clamp(.95rem, 1.2vw, 1.04rem)/1.45 var(--f-texto);
color: var(--ink-soft);
}
.rx-op:has(input:checked) .rx-op__txt,
.rx-op--marcada .rx-op__txt { color: var(--ink); }
.rx-op:has(input:checked),
.rx-op--marcada {
border-color: rgba(255, 61, 127, .55);
background: rgba(206, 27, 98, .10);
box-shadow: inset 3px 0 0 0 var(--mag-luz);
}
.rx-op:has(input:checked) .rx-op__letra,
.rx-op--marcada .rx-op__letra {
border-color: var(--mag-luz);
color: var(--mag-luz);
}
.rx-op:has(input:focus-visible),
.rx-op--focada {
outline: 2px solid var(--mag-luz);
outline-offset: 3px;
}
.rx-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: clamp(28px, 3.2vw, 40px);
}
.rx-dica { margin: 0; }
.rx-resultado {
border-top: 1px solid var(--fio);
padding-block: clamp(58px, 7vw, 104px) clamp(72px, 9vw, 130px);
background:
radial-gradient(70% 60% at 88% 0%, rgba(206, 27, 98, .10) 0%, transparent 62%),
var(--fundo);
}
.rx-veredito { margin: 14px 0 0; max-width: 20ch; }
.rx-resumo {
margin: 18px 0 0;
max-width: 52ch;
font: 400 clamp(1rem, 1.3vw, 1.1rem)/1.6 var(--f-texto);
color: var(--ink-soft);
}
.rx-mapa-bloco {
display: grid;
grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
gap: clamp(32px, 4.6vw, 72px);
align-items: start;
margin-top: clamp(40px, 5vw, 72px);
}
.rx-mapa { margin: 0; position: sticky; top: calc(var(--topo-h, 76px) + 28px); }
.rx-hex { width: 100%; height: auto; display: block; overflow: visible; }
.rx-hex__anel { fill: none; stroke: rgba(235, 237, 234, .10); stroke-width: 1; }
.rx-hex__raio { stroke: rgba(235, 237, 234, .09); stroke-width: 1; }
.rx-hex__area {
fill: rgba(206, 27, 98, .26);
stroke: var(--mag-luz);
stroke-width: 2;
stroke-linejoin: miter;
filter: drop-shadow(0 0 16px rgba(255, 61, 127, .35));
}
.rx-hex__ponto { fill: var(--mag-luz); }
.rx-hex__rot {
font: 500 10.5px var(--f-mono);
letter-spacing: .12em;
fill: var(--graf);
}
.rx-hex__val {
font: 600 17px var(--f-titulo);
letter-spacing: -.02em;
fill: var(--ink);
}
.rx-mapa__pe {
margin: 20px 0 0;
padding-top: 16px;
border-top: 1px solid var(--fio);
color: var(--ink-soft);
}
.rx-eixos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.rx-eixo { border-top: 1px solid var(--fio); padding-top: 16px; }
.rx-eixo__topo { display: flex; align-items: center; gap: 12px; }
.rx-eixo__ico { color: var(--graf); flex: none; }
.rx-eixo__nome {
margin: 0;
flex: 1;
font: 600 1.02rem/1.2 var(--f-titulo);
letter-spacing: -.03em;
color: var(--ink);
}
.rx-eixo__nota { margin: 0; font-family: var(--f-titulo); letter-spacing: -.03em; }
.rx-eixo__nota b { font-weight: 600; font-size: 1.32rem; color: var(--ink); }
.rx-eixo__nota i { font-style: normal; font-size: .8rem; color: var(--graf); }
.rx-eixo__barra {
height: 3px;
margin-top: 12px;
background: var(--fio);
overflow: hidden;
}
.rx-eixo__barra span {
display: block;
height: 100%;
width: 0;
background: var(--mag-luz);
transition: width 900ms var(--curva-entrada);
}
.rx-eixo[data-faixa="0"] .rx-eixo__ico { color: var(--mag-luz); }
.rx-eixo[data-faixa="2"] .rx-eixo__barra span { background: var(--ink-soft); }
.rx-eixo__leitura {
margin: 12px 0 0;
font: 400 .96rem/1.55 var(--f-texto);
color: var(--ink-soft);
max-width: 54ch;
}
.rx-faria {
margin-top: clamp(52px, 6vw, 88px);
border-top: 1px solid var(--fio);
padding-top: clamp(28px, 3.2vw, 40px);
}
.rx-faria h3 { margin: 12px 0 0; }
.rx-faria__par {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3.4vw, 52px);
margin-top: clamp(26px, 3vw, 38px);
}
.rx-faria__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rx-faria__lista li {
position: relative;
padding-left: 22px;
font: 400 .96rem/1.5 var(--f-texto);
color: var(--ink-soft);
}
.rx-faria__lista li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 11px;
height: 1px;
background: var(--mag-luz);
}
.rx-acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
margin-top: clamp(40px, 4.6vw, 64px);
}
.rx-aviso {
margin: 22px 0 0;
max-width: 58ch;
font: 400 .88rem/1.6 var(--f-texto);
color: var(--graf);
}
.rx-teste__in {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.rx-vivo { margin: 0; opacity: .82; }
.rx-hex--vivo .rx-hex__area {
fill: rgba(206, 27, 98, .18);
stroke-width: 1.6;
filter: none;
transition: none;
}
.rx-hex--vivo .rx-hex__rot { font-size: 9.5px; }
.rx-vivo__pe {
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid var(--fio);
}
@media (max-width: 999px) {
.rx-teste__in { grid-template-columns: minmax(0, 1fr); }
.rx-vivo { display: none; }
}
@media (max-width: 899px) {
.rx-mapa-bloco { grid-template-columns: minmax(0, 1fr); }
.rx-mapa { max-width: 440px; }
}
@media (max-width: 599px) {
.rx-faria__par { grid-template-columns: minmax(0, 1fr); }
.rx-op { padding: 14px 16px; gap: 13px; }
.rx-acoes .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.js .rx-q[data-q] .rx-q__texto,
.js .rx-q[data-q] .rx-op { animation: none; }
.rx-trilha__luz, .rx-eixo__barra span { transition: none; }
.rx-op:hover { transform: none; }
}
.pergunta__raiox { margin: 18px 0 0; }
.rx-leitura {
margin-top: clamp(44px, 5vw, 72px);
padding: clamp(26px, 3.2vw, 40px);
border: 1px solid var(--vidro-fio);
background: var(--vidro);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
gap: clamp(26px, 3.6vw, 56px);
align-items: center;
position: relative;
isolation: isolate;
overflow: hidden;
}
.rx-leitura::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(var(--ang),
transparent 0 72%,
rgba(206, 27, 98, .10) 72% 100%);
}
.rx-leitura h3 { margin: 12px 0 0; max-width: 24ch; }
.rx-leitura__lede {
margin: 14px 0 0;
font: 400 .96rem/1.6 var(--f-texto);
color: var(--ink-soft);
max-width: 52ch;
}
.rx-form-email__rot {
display: block;
font: 500 10.5px/1 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--graf);
margin-bottom: 10px;
}
.rx-form-email__linha { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-form-email__linha input {
flex: 1 1 220px;
min-width: 0;
padding: 13px 15px;
border: 1px solid var(--vidro-fio);
background: rgba(7, 13, 12, .55);
color: var(--ink);
font: 400 .96rem/1.2 var(--f-texto);
}
.rx-form-email__linha input::placeholder { color: var(--ink-faint); }
.rx-form-email__linha input:focus-visible {
outline: 2px solid var(--mag-luz);
outline-offset: 2px;
border-color: transparent;
}
.rx-form-email__pe {
margin: 12px 0 0;
font: 400 .82rem/1.5 var(--f-texto);
color: var(--graf);
}
.rx-form-email__retorno:empty { display: none; }
.rx-form-email__retorno { margin: 10px 0 0; color: var(--mag-luz); }
.rx-porta {
flex: 1 0 100%;
margin: 22px 0 0;
padding: clamp(20px, 3vw, 30px);
max-width: 54em;
background: var(--vidro);
border: 1px solid var(--vidro-fio);
box-shadow: var(--vidro-brilho);
}
.rx-porta[hidden] { display: none; }
.rx-porta__t {
margin: 10px 0 0;
font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.15 var(--f-titulo);
letter-spacing: -.03em;
color: var(--ink);
max-width: 24ch;
}
.rx-porta__lede {
margin: 12px 0 0;
font: 400 .94rem/1.6 var(--f-texto);
color: var(--ink-soft);
max-width: 52ch;
}
.rx-porta__campos {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px 18px;
}
.rx-porta__campo input {
width: 100%;
padding: 13px 15px;
border: 1px solid var(--vidro-fio);
background: rgba(7, 13, 12, .55);
color: var(--ink);
font: 400 .96rem/1.2 var(--f-texto);
}
.rx-porta__campo input::placeholder { color: var(--ink-faint); }
.rx-porta__campo input:focus-visible {
outline: 2px solid var(--mag-luz);
outline-offset: 2px;
border-color: transparent;
}
.rx-porta__acoes {
margin: 20px 0 0;
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
align-items: center;
}
.rx-porta__retorno:empty { display: none; }
.rx-porta__retorno { margin: 12px 0 0; color: var(--mag-luz); }
.rx-porta__pe {
margin: 14px 0 0;
font: 400 .82rem/1.5 var(--f-texto);
color: var(--graf);
}
.rx-porta__silo {
position: absolute;
width: 0; height: 0;
border: 0;
visibility: hidden;
}
@media (max-width: 599px) {
.rx-porta__acoes .btn { width: 100%; justify-content: center; }
}
@media (max-width: 899px) {
.rx-leitura { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 599px) {
.rx-form-email__linha .btn { width: 100%; justify-content: center; }
}
.obra__vidro {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(235, 237, 234, .035) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(235, 237, 234, .035) 0 1px, transparent 1px 24px),
linear-gradient(var(--ang), transparent 0 21px, rgba(235, 237, 234, .16) 21px 22px, transparent 22px),
linear-gradient(160deg, rgba(15, 46, 40, .55), rgba(11, 22, 19, .92));
border: 1px solid rgba(235, 237, 234, .09);
clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}
.obra__vidro img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.obra__vidro::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(var(--ang),
transparent 0 calc(50% - .5px),
rgba(255, 61, 127, .30) calc(50% - .5px) calc(50% + .5px),
transparent calc(50% + .5px));
}
.pf { padding-block: 0 clamp(64px, 8vw, 120px); }
.pf-barra {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: clamp(26px, 3vw, 38px);
padding-bottom: 18px;
border-bottom: 1px solid var(--fio);
}
.pf-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-filtro {
appearance: none;
border: 1px solid var(--fio);
background: transparent;
color: var(--ink-soft);
font: 400 11px/1 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
padding: 10px 15px;
cursor: pointer;
transition: border-color var(--t) ease, color var(--t) ease, background-color var(--t) ease;
}
.pf-filtro:hover { border-color: var(--vidro-fio-hover); color: var(--ink); }
.pf-filtro--on {
color: var(--fundo);
background: var(--papel);
border-color: var(--papel);
}
.pf-vazio { margin: 0; font: 400 14px/1.5 var(--f-texto); color: var(--ink-faint); }
.pf-grade {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 30px);
align-items: start;
}
@media (max-width: 1023px) { .pf-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .pf-grade { grid-template-columns: 1fr; } }
.pf-cartao { display: block; }
.pf-cartao[hidden] { display: none; }
.pf-botao {
appearance: none;
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
gap: 0 14px;
text-align: left;
background: transparent;
border: 0;
padding: 0;
color: inherit;
cursor: pointer;
font: inherit;
}
.pf-tela {
grid-column: 1 / -1;
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid var(--vidro-fio);
margin-bottom: 14px;
transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.pf-tela img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pf-tela--vazia { border: 0; background: none; }
.pf-tela--vazia .marco { display: block; height: 100%; aspect-ratio: auto; }
.pf-botao:hover .pf-tela,
.pf-botao:focus-visible .pf-tela { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.pf-botao:hover .pf-tela--vazia .marco { border-color: var(--vidro-fio-hover); }
.pf-meta { display: block; }
.pf-cartao__titulo {
display: block;
margin: 8px 0 0;
font: 600 clamp(1.1rem, 1.5vw, 1.32rem)/1.18 var(--f-titulo);
letter-spacing: -.035em;
}
.pf-cartao__resumo {
display: block;
margin-top: 7px;
font: 400 14.5px/1.55 var(--f-texto);
color: var(--ink-soft);
}
.pf-sinal {
position: relative;
align-self: start;
width: 30px; height: 30px;
margin-top: 6px;
border: 1px solid var(--fio);
transition: border-color var(--t) ease, background-color var(--t) ease, rotate var(--t) var(--curva);
}
.pf-sinal::before, .pf-sinal::after {
content: "";
position: absolute;
left: 50%; top: 50%;
translate: -50% -50%;
background: var(--ink-soft);
transition: opacity var(--t) ease, background-color var(--t) ease;
}
.pf-sinal::before { width: 11px; height: 1px; }
.pf-sinal::after  { width: 1px; height: 11px; }
.pf-botao:hover .pf-sinal { border-color: var(--vidro-fio-hover); }
.pf-botao[aria-expanded="true"] .pf-sinal {
background: var(--mag);
border-color: var(--mag);
rotate: 180deg;
}
.pf-botao[aria-expanded="true"] .pf-sinal::before,
.pf-botao[aria-expanded="true"] .pf-sinal::after { background: var(--papel); }
.pf-botao[aria-expanded="true"] .pf-sinal::after { opacity: 0; }
.pf-botao[aria-expanded="true"] .pf-tela { border-color: var(--vidro-fio-hover); box-shadow: var(--vidro-glow); }
.pf-caso {
grid-column: 1 / -1;
overflow: hidden;
border-top: 1px solid rgba(255, 61, 127, .38);
background:
linear-gradient(var(--ang), transparent 0 21px, rgba(235, 237, 234, .1) 21px 22px, transparent 22px),
linear-gradient(160deg, rgba(15, 46, 40, .5), rgba(11, 22, 19, .9));
transition: height .52s var(--curva-entrada);
}
.pf-caso[hidden] { display: none; }
.pf-caso__in {
display: grid;
grid-template-columns: 1fr;
gap: clamp(26px, 3vw, 44px);
padding: clamp(26px, 3.4vw, 46px) clamp(20px, 3vw, 44px) 0;
}
@media (min-width: 900px) {
.pf-caso__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.pf-caso__titulo {
margin: 10px 0 0;
font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--f-titulo);
letter-spacing: -.04em;
}
.pf-marca { margin: 26px 0 8px; }
.pf-caso__p { margin: 0; font: 400 clamp(1rem, 1.2vw, 1.06rem)/1.65 var(--f-texto); color: var(--ink-soft); }
.pf-lista { margin: 0; padding: 0; list-style: none; }
.pf-lista li {
position: relative;
padding-left: 22px;
margin-bottom: 11px;
font: 400 15px/1.6 var(--f-texto);
color: var(--ink-soft);
}
.pf-lista li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 11px; height: 9px;
background: linear-gradient(var(--ang), transparent 0 calc(50% - .6px), var(--mag-luz) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px));
}
.pf-ficha {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 22px 0 0;
}
.pf-ficha span {
border: 1px solid var(--fio);
padding: 7px 12px;
font: 400 10.5px/1 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint);
}
.pf-nota {
margin: 20px 0 0;
padding-left: 14px;
border-left: 1px solid rgba(255, 61, 127, .4);
font: 400 14px/1.6 var(--f-texto);
color: var(--ink-faint);
max-width: 46ch;
}
.pf-galeria { min-width: 0; }
.pf-tira {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: rgba(235, 237, 234, .2) transparent;
padding-bottom: 12px;
}
.pf-tira:focus-visible { outline: 1px solid var(--mag-luz); outline-offset: 4px; }
.pf-quadro {
flex: 0 0 min(100%, 520px);
margin: 0;
scroll-snap-align: start;
}
.pf-quadro img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--vidro-fio);
background: var(--obs);
cursor: zoom-in;
transition: border-color var(--t) ease;
}
.pf-quadro img:hover { border-color: var(--vidro-fio-hover); }
.pf-quadro figcaption {
margin-top: 9px;
font: 400 10.5px/1.5 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
}
.pf-tira__nav { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.pf-seta {
appearance: none;
width: 34px; height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--fio);
background: transparent;
color: var(--ink-soft);
cursor: pointer;
transition: border-color var(--t) ease, color var(--t) ease;
}
.pf-seta:hover:not(:disabled) { border-color: var(--vidro-fio-hover); color: var(--ink); }
.pf-seta:disabled { opacity: .3; cursor: default; }
.pf-conta { margin: 0; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-faint); }
.pf-conta b { color: var(--ink); font-weight: 400; }
.pf-fechar {
appearance: none;
display: block;
width: 100%;
margin-top: clamp(22px, 3vw, 36px);
padding: 15px;
border: 0;
border-top: 1px solid var(--fio);
background: transparent;
color: var(--ink-faint);
font: 400 10.5px/1 var(--f-mono);
letter-spacing: .16em;
text-transform: uppercase;
cursor: pointer;
transition: color var(--t) ease, background-color var(--t) ease;
}
.pf-fechar:hover { color: var(--ink); background: rgba(235, 237, 234, .04); }
.pf-caso__pe {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
margin-top: clamp(22px, 3vw, 36px);
border-top: 1px solid var(--fio);
}
.pf-caso__pe .pf-fechar { width: auto; margin-top: 0; border-top: 0; padding: 15px 16px; }
.pf-proximo {
appearance: none;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: none;
border: 0;
color: var(--ink);
cursor: pointer;
text-align: left;
transition: background-color var(--t) ease;
}
.pf-proximo:hover { background: rgba(206, 27, 98, .08); }
.pf-proximo:focus-visible { outline: 2px solid var(--mag-luz); outline-offset: -2px; }
.pf-proximo__rot {
font: 400 10.5px/1 var(--f-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--graf);
}
.pf-proximo__nome { font: 600 .98rem/1.2 var(--f-titulo); letter-spacing: -.02em; }
.pf-proximo .ico { color: var(--mag-luz); }
html:not(.js) .pf-proximo { display: none; }
@media (max-width: 599px) {
.pf-caso__pe { flex-direction: column-reverse; }
.pf-proximo { justify-content: space-between; flex-wrap: wrap; }
}
.pf-recado {
margin: clamp(34px, 4vw, 52px) 0 0;
padding-top: 20px;
border-top: 1px solid var(--fio);
max-width: 62ch;
font: 400 14px/1.65 var(--f-texto);
color: var(--ink-faint);
}
.pf-lupa {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: clamp(16px, 4vw, 54px) clamp(16px, 4vw, 54px) clamp(46px, 6vw, 70px);
background: rgba(7, 13, 12, .985);
opacity: 0;
transition: opacity .25s ease;
}
.pf-lupa[hidden] { display: none; }
.pf-lupa.aberta { opacity: 1; }
.pf-lupa img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: 1px solid var(--vidro-fio);
}
.pf-lupa__fechar {
position: absolute;
top: clamp(14px, 3vw, 28px);
right: clamp(14px, 3vw, 28px);
width: 42px; height: 42px;
display: grid;
place-items: center;
border: 1px solid var(--fio);
background: var(--obs);
color: var(--ink);
cursor: pointer;
}
.pf-lupa__fechar:hover { border-color: var(--vidro-fio-hover); }
.pf-lupa__legenda {
position: absolute;
left: 0; right: 0; bottom: clamp(12px, 2.4vw, 22px);
margin: 0;
text-align: center;
font: 400 11px/1.5 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint);
}
html:not(.js) .pf-caso[hidden] { display: block; }
html:not(.js) .pf-sinal,
html:not(.js) .pf-fechar,
html:not(.js) .pf-filtros,
html:not(.js) .pf-tira__nav { display: none; }
@media (prefers-reduced-motion: reduce) {
.pf-caso, .pf-lupa { transition: none; }
}
.construido__mais--duplo {
display: flex;
align-items: center;
gap: clamp(18px, 2.4vw, 32px);
flex-wrap: wrap;
}
.doc { display: none; }
@media print {
body > * { display: none !important; }
body > .doc { display: block !important; }
@page { size: A4; margin: 0; }
html, body {
background: #FFF;
color: #1B2320;
}
}
.doc {
--tinta: #1B2320;
--tinta-fraca: #59615D;
--tinta-fio: rgba(27, 35, 32, .18);
--tinta-fio-fraco: rgba(27, 35, 32, .09);
--doc-mag: #CE1B62;
background: #FFF;
color: var(--tinta);
font: 400 10.5pt/1.5 var(--f-texto);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.doc h1, .doc h2, .doc h3 { color: var(--tinta); }
.doc__folha {
box-sizing: border-box;
width: 210mm;
min-height: 297mm;
padding: 18mm 18mm 16mm;
break-after: page;
page-break-after: always;
}
.doc__folha:last-child { break-after: auto; page-break-after: auto; }
.doc__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10mm;
padding-bottom: 5mm;
margin-bottom: 10mm;
border-bottom: 1.5px solid var(--tinta);
}
.doc__marca { display: flex; align-items: center; gap: 3.5mm; }
.doc__z { width: 12mm; height: auto; }
.doc__z path { fill: var(--tinta); }
.doc__z .ponta { fill: var(--doc-mag); }
.doc__marca-txt { display: block; }
.doc__marca-txt b {
display: block;
font: 600 13pt/1 var(--f-titulo);
letter-spacing: -.03em;
}
.doc__marca-txt i {
display: block;
margin-top: 1mm;
font: 400 6pt/1 var(--f-mono);
font-style: normal;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--tinta-fraca);
}
.doc__selo {
font: 400 7.5pt/1 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tinta-fraca);
text-align: right;
}
.doc__rot {
margin: 0 0 4mm;
font: 400 7.5pt/1.4 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--doc-mag);
}
.doc__t1 {
margin: 0;
font: 600 27pt/1.05 var(--f-titulo);
letter-spacing: -.04em;
max-width: 18ch;
}
.doc__t2 {
margin: 0 0 6mm;
padding-bottom: 3mm;
border-bottom: 1.5px solid var(--tinta);
font: 600 18pt/1.1 var(--f-titulo);
letter-spacing: -.035em;
}
.doc__lede {
margin: 5mm 0 0;
max-width: 62ch;
font-size: 11pt;
line-height: 1.55;
color: var(--tinta-fraca);
}
.doc__lede--curta { margin-top: 0; margin-bottom: 8mm; font-size: 10pt; }
.doc__capa {
display: grid;
grid-template-columns: 95mm 1fr;
gap: 8mm;
align-items: center;
margin-top: 10mm;
}
.doc__mapa { margin: 0; }
.doc .rx-hex__anel { stroke: rgba(27, 35, 32, .16); }
.doc .rx-hex__raio { stroke: rgba(27, 35, 32, .13); }
.doc .rx-hex__area {
fill: rgba(206, 27, 98, .16);
stroke: var(--doc-mag);
stroke-width: 1.8;
filter: none;
}
.doc .rx-hex__ponto { fill: var(--doc-mag); }
.doc .rx-hex__rot { fill: var(--tinta-fraca); font-size: 10px; }
.doc .rx-hex__val { fill: var(--tinta); }
.doc__media {
margin: 0 0 5mm;
padding-bottom: 3mm;
border-bottom: 1px solid var(--tinta-fio);
font: 400 7.5pt/1.4 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tinta-fraca);
}
.doc__notas { margin: 0; padding: 0; list-style: none; }
.doc__notas li {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 3mm;
padding: 2.2mm 0;
border-bottom: 1px solid var(--tinta-fio-fraco);
font: 400 9.5pt/1.2 var(--f-texto);
}
.doc__notas b {
font: 600 12pt/1 var(--f-titulo);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.doc__notas li[data-faixa="0"] b { color: var(--doc-mag); }
.doc__aviso {
margin: 10mm 0 0;
padding: 4mm 5mm;
border: 1px solid var(--tinta-fio);
border-left: 2.5px solid var(--doc-mag);
max-width: 68ch;
font-size: 9pt;
line-height: 1.5;
color: var(--tinta-fraca);
}
.doc__eixos { display: grid; gap: 6mm; }
.doc__eixo {
break-inside: avoid;
page-break-inside: avoid;
padding-bottom: 5mm;
border-bottom: 1px solid var(--tinta-fio);
}
.doc__eixo:last-child { border-bottom: 0; }
.doc__eixo-topo {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 3mm;
margin-bottom: 2mm;
}
.doc__eixo-ico { width: 6mm; height: 6mm; color: var(--tinta); stroke-width: 1.6; }
.doc__eixo-nome {
margin: 0;
font: 600 13.5pt/1 var(--f-titulo);
letter-spacing: -.03em;
}
.doc__eixo-nota {
margin: 0;
font: 600 15pt/1 var(--f-titulo);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.doc__eixo-nota i {
font: 400 8pt/1 var(--f-mono);
font-style: normal;
color: var(--tinta-fraca);
}
.doc__barra { display: block; width: 100%; height: 3px; margin-bottom: 3mm; }
.doc__define {
margin: 0 0 2mm;
font: 400 7.5pt/1.4 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tinta-fraca);
}
.doc__leitura { margin: 0; font-size: 10pt; line-height: 1.5; max-width: 72ch; }
.doc__faria { margin: 3mm 0 0; padding: 0; list-style: none; display: grid; gap: 1.6mm; }
.doc__faria li {
position: relative;
padding-left: 6mm;
font-size: 9pt;
line-height: 1.45;
color: var(--tinta-fraca);
}
.doc__faria li::before {
content: "";
position: absolute;
left: 0; top: 1.4mm;
width: 3.6mm; height: 0;
border-bottom: 1px solid var(--doc-mag);
transform: rotate(-37.87deg);
transform-origin: left center;
}
.doc__ordem { margin: 0; padding: 0; list-style: none; display: grid; gap: 7mm; counter-reset: passo; }
.doc__passo {
break-inside: avoid;
page-break-inside: avoid;
display: grid;
grid-template-columns: 14mm 1fr;
gap: 4mm;
padding-bottom: 6mm;
border-bottom: 1px solid var(--tinta-fio);
}
.doc__ordem li:last-child { border-bottom: 0; }
.doc__passo-n {
font: 600 22pt/.9 var(--f-titulo);
letter-spacing: -.05em;
color: var(--doc-mag);
font-variant-numeric: tabular-nums;
}
.doc__passo h3 {
margin: 0 0 1mm;
font: 600 14pt/1.1 var(--f-titulo);
letter-spacing: -.03em;
}
.doc__passo-tipo {
margin: 0 0 3mm;
font: 400 7pt/1.4 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tinta-fraca);
}
.doc__passo p { margin: 0 0 2.5mm; font-size: 10pt; line-height: 1.5; max-width: 66ch; }
.doc__passo p:last-child { margin-bottom: 0; }
.doc__passo b {
display: block;
font: 400 7pt/1.4 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tinta-fraca);
margin-bottom: .8mm;
}
.doc__perguntas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4mm; }
.doc__perguntas li {
break-inside: avoid;
page-break-inside: avoid;
display: grid;
grid-template-columns: 9mm 1fr;
gap: 3mm;
padding-bottom: 3.5mm;
border-bottom: 1px solid var(--tinta-fio-fraco);
}
.doc__pergunta-n {
font: 400 8pt/1.4 var(--f-mono);
letter-spacing: .08em;
color: var(--tinta-fraca);
font-variant-numeric: tabular-nums;
}
.doc__pergunta-t { margin: 0 0 1.5mm; font-size: 9.5pt; line-height: 1.4; }
.doc__pergunta-r {
margin: 0;
padding-left: 4mm;
border-left: 2px solid var(--doc-mag);
font-size: 9.5pt;
line-height: 1.4;
color: var(--tinta-fraca);
}
.doc__pergunta-r b {
font: 500 8pt/1 var(--f-mono);
color: var(--doc-mag);
margin-right: 1.5mm;
}
.doc__fecho {
break-inside: avoid;
page-break-inside: avoid;
margin-top: 10mm;
padding-top: 6mm;
border-top: 1.5px solid var(--tinta);
}
.doc__fecho-txt { margin: 0 0 5mm; max-width: 66ch; font-size: 10pt; line-height: 1.55; }
.doc__contato { margin: 0 0 2mm; font: 600 10pt/1.4 var(--f-titulo); letter-spacing: -.02em; }
.doc__contato b { font-weight: 600; }
.doc__voltar {
margin: 0;
font: 400 7.5pt/1.5 var(--f-mono);
color: var(--tinta-fraca);
word-break: break-all;
}
.rx-acoes__dica {
flex-basis: 100%;
margin: 4px 0 0;
font: 400 12.5px/1.55 var(--f-texto);
color: var(--ink-faint);
max-width: 56ch;
}
@property --varre     { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --varre-fio { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.veu {
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(235, 237, 234, .032) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(235, 237, 234, .032) 0 1px, transparent 1px 24px),
linear-gradient(160deg, rgba(15, 46, 40, .5), rgba(11, 22, 19, .92));
}
.veu > img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.veu__manta {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
--varre: 0%;
background:
repeating-linear-gradient(0deg, rgba(235, 237, 234, .05) 0 1px, transparent 1px 26px),
repeating-linear-gradient(90deg, rgba(235, 237, 234, .05) 0 1px, transparent 1px 26px),
linear-gradient(var(--ang), rgba(6, 11, 10, .66), rgba(10, 20, 17, .5));
mask-image: linear-gradient(var(--ang), #000 0 var(--varre), transparent var(--varre));
transition: --varre .55s var(--curva);
}
.veu__fio {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
--varre-fio: 0%;
background: linear-gradient(var(--ang),
transparent 0 calc(var(--varre-fio) - 1.6px),
var(--mag-luz) calc(var(--varre-fio) - 1.6px) var(--varre-fio),
rgba(255, 61, 127, .2) var(--varre-fio) calc(var(--varre-fio) + 7px),
transparent calc(var(--varre-fio) + 7px));
transition: --varre-fio .55s var(--curva);
}
.veu__sinal {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-content: center;
justify-items: center;
gap: 16px;
pointer-events: none;
}
.veu__marca {
position: relative;
display: grid;
place-items: center;
width: clamp(76px, 34%, 132px);
aspect-ratio: 1;
}
.veu__ico {
position: relative;
z-index: 1;
width: 50%;
height: 50%;
color: var(--papel);
stroke-width: 1.1;
opacity: 0;
scale: .7;
transition: opacity .3s ease, scale .7s var(--curva);
}
.veu__anel {
position: absolute;
inset: 0;
fill: none;
opacity: 0;
transition: opacity .35s ease;
}
.veu__anel circle {
fill: none;
stroke: var(--mag-luz);
stroke-width: 1.4;
stroke-dasharray: 24 16;
transform-origin: 50% 50%;
}
.veu__chamada {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
white-space: nowrap;
font: 400 10px/1 var(--f-mono);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--papel);
opacity: 0;
translate: 0 8px;
transition: opacity .3s ease, translate .5s var(--curva);
}
.veu__chamada svg { transition: translate .4s var(--curva); }
@media (hover: hover) {
.veu-alvo:is(:hover, :focus-within) .veu__manta { --varre: 150%; }
.veu-alvo:is(:hover, :focus-within) .veu__fio { --varre-fio: 156%; }
.veu-alvo:is(:hover, :focus-within) .veu__ico { opacity: 1; scale: 1; transition-delay: .2s; }
.veu-alvo:is(:hover, :focus-within) .veu__anel { opacity: .85; transition-delay: .24s; }
.veu-alvo:is(:hover, :focus-within) .veu__anel circle { animation: veu-gira 7s linear infinite; }
.veu-alvo:is(:hover, :focus-within) .veu__chamada { opacity: 1; translate: 0 0; transition-delay: .3s; }
.veu-alvo:is(:hover, :focus-within) .veu__chamada svg { translate: 3px -3px; }
.veu-alvo:is(:hover, :focus-within) .veu__marca { animation: veu-flutua 3.4s ease-in-out .5s infinite; }
}
@keyframes veu-gira { to { rotate: 360deg; } }
@keyframes veu-flutua {
0%, 100% { translate: 0 0; }
50%      { translate: 0 -5px; }
}
@media (hover: none) {
.veu__manta, .veu__fio, .veu__sinal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.veu__manta, .veu__fio, .veu__ico, .veu__anel, .veu__chamada { transition: none; }
.veu-alvo:is(:hover, :focus-within) .veu__anel circle,
.veu-alvo:is(:hover, :focus-within) .veu__marca { animation: none; }
}
.obra { position: relative; }
.obra__link { color: inherit; text-decoration: none; }
.obra__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.obra__link:hover { color: var(--mag-luz); }
.obra:has(.obra__link:focus-visible) { outline: 2px solid var(--mag-luz); outline-offset: 6px; }
.obra__link:focus-visible { outline: none; }
.pf-caso__texto > *,
.pf-caso .pf-galeria,
.pf-caso .pf-fechar {
opacity: 0;
translate: 0 18px;
}
.pf-caso.vivo .pf-caso__texto > *,
.pf-caso.vivo .pf-galeria,
.pf-caso.vivo .pf-fechar {
opacity: 1;
translate: 0 0;
transition: opacity .38s ease var(--atraso, 0s), translate .8s var(--mola) var(--atraso, 0s);
}
.pf-caso__texto > *:nth-child(1) { --atraso: .06s; }
.pf-caso__texto > *:nth-child(2) { --atraso: .10s; }
.pf-caso__texto > *:nth-child(3) { --atraso: .14s; }
.pf-caso__texto > *:nth-child(4) { --atraso: .17s; }
.pf-caso__texto > *:nth-child(5) { --atraso: .20s; }
.pf-caso__texto > *:nth-child(6) { --atraso: .23s; }
.pf-caso__texto > *:nth-child(n+7) { --atraso: .26s; }
.pf-caso .pf-galeria { --atraso: .12s; }
.pf-caso .pf-fechar { --atraso: .30s; }
html:not(.js) .pf-caso__texto > *,
html:not(.js) .pf-caso .pf-galeria,
html:not(.js) .pf-caso .pf-fechar { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
.pf-caso__texto > *,
.pf-caso .pf-galeria,
.pf-caso .pf-fechar { opacity: 1; translate: 0 0; transition: none; }
}
.veu--vazio { border-style: dashed; }
.veu__selo {
position: absolute;
z-index: 1;
left: 14px; bottom: 12px;
font: 400 10px/1.4 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-faint);
transition: opacity .3s ease;
}
.veu--vazio::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
translate: -50% -50%;
pointer-events: none;
transition: opacity .3s ease;
background:
linear-gradient(rgba(235, 237, 234, .25), rgba(235, 237, 234, .25)) 50% 50% / 14px 1px no-repeat,
linear-gradient(rgba(235, 237, 234, .25), rgba(235, 237, 234, .25)) 50% 50% / 1px 14px no-repeat;
}
.veu--vazio .veu__manta {
background: linear-gradient(var(--ang),
transparent 0 calc(50% - .5px),
rgba(255, 61, 127, .3) calc(50% - .5px) calc(50% + .5px),
transparent calc(50% + .5px));
mask-image: none;
opacity: 1;
}
@media (hover: hover) {
.veu-alvo:is(:hover, :focus-within) .veu--vazio::after,
.veu-alvo:is(:hover, :focus-within) .veu__selo { opacity: 0; }
.veu-alvo:is(:hover, :focus-within) .veu--vazio .veu__manta { opacity: .25; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition-old(root) { animation: 160ms ease-in both vt-sai; }
::view-transition-new(root) { animation: 260ms cubic-bezier(.2, .8, .2, 1) 60ms both vt-entra; }
}
@keyframes vt-sai   { to   { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(6px); } }