.lz-experience {
--lz-ink: #f4f6ff;
--lz-muted: #c2c9e8;
--lz-soft: #929bc8;
--lz-night: #070a1d;
--lz-night-2: #0d1434;
--lz-panel: rgba(16, 25, 63, 0.92);
--lz-panel-strong: #121d49;
--lz-line: rgba(126, 190, 255, 0.28);
--lz-gold: #ffd45e;
--lz-orange: #ff8b24;
--lz-blue: #67baff;
--lz-cyan: #79efff;
--lz-green: #83eda2;
--lz-red: #ff7373;
--lz-radius: 18px;
--lz-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
--lz-glow: 0 0 36px rgba(86, 169, 255, 0.22);
--lz-max: 1180px;
position: relative;
isolation: isolate;
width: 100%;
max-width: 100%;
overflow: clip;
color: var(--lz-ink);
background: radial-gradient(circle at 12% 8%, rgba(69, 118, 255, 0.22), transparent 28rem),
radial-gradient(circle at 88% 24%, rgba(255, 139, 36, 0.13), transparent 30rem),
var(--lz-night) url('../img/stars.png') repeat; background: radial-gradient(circle at 12% 8%, rgba(69, 118, 255, 0.22), transparent 28rem),
radial-gradient(circle at 88% 24%, rgba(255, 139, 36, 0.13), transparent 30rem),
var(--lz-night) image-set(url('../img/stars.webp') type('image/webp'), url('../img/stars.png') type('image/png')) repeat;
color-scheme: dark;
}

.page-loja.lz-experience .page-head.loja-abertura {
width: min(calc(100% - 32px), 1180px);
max-width: 1180px;
min-height: 0;
margin: 18px auto 0;
padding: clamp(22px, 3vw, 40px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
align-content: center;
justify-items: stretch;
overflow: visible;
background: radial-gradient(circle at 78% 30%, #214879 0, #101f3d 45%, #080f25 100%);
border: 1px solid #856d48;
border-radius: var(--raio);
}
.page-loja.lz-experience .page-head.loja-abertura::before { display: none; }
.page-loja.lz-experience .loja-abertura .titulo { max-width: 630px; margin: 0 0 14px; font-size: clamp(2.45rem, 4.5vw, 4.3rem); line-height: 1.05; }
.page-loja.lz-experience .loja-abertura .subtitulo { max-width: 570px; margin: 0; }
@media (max-width: 960px) {
.page-loja.lz-experience .page-head.loja-abertura { grid-template-columns: 1fr minmax(0, .75fr); }
}
@media (max-width: 700px) {
.page-loja.lz-experience .page-head.loja-abertura { grid-template-columns: minmax(0, 1fr) 116px; gap: 12px; padding: 20px 16px; }
.page-loja.lz-experience .loja-abertura .titulo { font-size: clamp(2.1rem, 8vw, 2.8rem); }
}
.lz-experience,
.lz-experience * ,
.lz-experience *::before,
.lz-experience *::after {
box-sizing: border-box;
}
.lz-experience .lz-shell {
width: min(100% - 40px, var(--lz-max));
margin-inline: auto;
}
.lz-experience .lz-flow > * {
margin-block: 0;
}
.lz-experience .lz-flow > * + * {
margin-block-start: var(--lz-flow-space, 18px);
}
.lz-experience .lz-kicker {
display: inline-flex;
align-items: center;
min-height: 36px;
gap: 9px;
margin: 0;
color: var(--lz-gold);
font: 900 0.82rem/1.2 var(--fonte-texto, system-ui, sans-serif);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.lz-experience .lz-kicker::before {
content: '';
width: 28px;
height: 3px;
flex: none;
border-radius: 999px;
background: linear-gradient(90deg, var(--lz-orange), var(--lz-gold));
box-shadow: 0 0 14px rgba(255, 181, 58, 0.64);
}
.lz-experience .lz-title,
.lz-experience .lz-section-title,
.lz-experience .lz-card-title,
.lz-experience .lz-timeline-title {
margin: 0;
overflow-wrap: anywhere;
text-wrap: balance;
color: var(--lz-ink);
font-family: var(--fonte-titulo, Impact, sans-serif);
font-weight: 400;
letter-spacing: 0.035em;
}
.lz-experience .lz-title {
max-width: 13ch;
font-size: clamp(2.7rem, 7vw, 5.8rem);
line-height: 0.94;
text-transform: uppercase;
text-shadow:
0 4px 0 rgba(65, 26, 0, 0.84),
0 0 34px rgba(255, 168, 51, 0.32);
}
.lz-experience .lz-title-accent {
display: block;
color: var(--lz-gold);
background: linear-gradient(180deg, #fff4b0 0%, var(--lz-gold) 46%, var(--lz-orange) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lz-experience .lz-lead,
.lz-experience .lz-copy {
margin: 0;
max-width: 68ch;
color: var(--lz-muted);
font-family: var(--fonte-texto, system-ui, sans-serif);
line-height: 1.7;
overflow-wrap: anywhere;
white-space: normal;
}
.lz-experience .lz-lead {
font-size: clamp(1.05rem, 2.1vw, 1.28rem);
}
.lz-experience .lz-hero {
position: relative;
min-height: min(820px, calc(100svh - var(--topo-h, 64px)));
display: grid;
align-items: center;
padding-block: clamp(72px, 10vw, 132px);
overflow: hidden;
background: linear-gradient(90deg, rgba(4, 8, 27, 0.98) 0%, rgba(4, 8, 27, 0.83) 44%, rgba(4, 8, 27, 0.26) 76%, rgba(4, 8, 27, 0.7) 100%),
linear-gradient(0deg, var(--lz-night) 0%, transparent 28%),
var(--lz-hero-image, url('../img/banners/inicio.png')) center / cover no-repeat; background: linear-gradient(90deg, rgba(4, 8, 27, 0.98) 0%, rgba(4, 8, 27, 0.83) 44%, rgba(4, 8, 27, 0.26) 76%, rgba(4, 8, 27, 0.7) 100%),
linear-gradient(0deg, var(--lz-night) 0%, transparent 28%),
var(--lz-hero-image, image-set(url('../img/banners/inicio.webp') type('image/webp'), url('../img/banners/inicio.png') type('image/png'))) center / cover no-repeat;
}
.lz-experience .lz-hero::before,
.lz-experience .lz-hero::after {
content: '';
position: absolute;
pointer-events: none;
}
.lz-experience .lz-hero::before {
inset: -30%;
opacity: 0.68;
background:
conic-gradient(from 205deg at 68% 50%, transparent 0 24%, rgba(99, 188, 255, 0.12) 28%, transparent 33% 67%, rgba(255, 187, 72, 0.12) 72%, transparent 76%);
animation: lz-aura-turn 34s linear infinite;
}
.lz-experience .lz-hero::after {
inset: auto 0 0;
height: 42%;
background: linear-gradient(0deg, var(--lz-night), transparent);
}
.lz-experience .lz-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.72fr);
align-items: center;
gap: clamp(36px, 7vw, 92px);
}
.lz-experience .lz-hero-copy,
.lz-experience .lz-hero-visual {
min-width: 0;
}
.lz-experience .lz-hero-actions,
.lz-experience .lz-action-row,
.lz-experience .lz-chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.lz-experience .lz-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 52px;
padding: 0 20px;
border: 0;
border-radius: 10px;
color: #0a1730;
background: linear-gradient(180deg, #ffe997, var(--lz-gold) 48%, #f59825);
box-shadow: 0 6px 0 #9d4714, 0 13px 26px rgba(0, 0, 0, 0.34), 0 0 24px rgba(255, 185, 66, 0.22);
font: 900 1rem/1.2 var(--fonte-texto, system-ui, sans-serif);
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
white-space: normal;
cursor: pointer;
transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.lz-experience .lz-button:hover {
color: #061126;
filter: brightness(1.08) saturate(1.08);
transform: translateY(-2px);
}
.lz-experience .lz-button:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #9d4714, 0 7px 16px rgba(0, 0, 0, 0.3);
}
.lz-experience .lz-button-secondary {
color: #f7fbff;
background: linear-gradient(180deg, #19346d, #102653);
border: 1px solid rgba(121, 239, 255, 0.58);
box-shadow: 0 6px 0 #07132e, 0 13px 26px rgba(0, 0, 0, 0.34), inset 0 0 22px rgba(103, 186, 255, 0.1);
}
.lz-experience .lz-button-secondary:hover {
color: #fff;
}
.lz-experience .lz-button:focus-visible,
.lz-experience .lz-chip:focus-visible,
.lz-experience .lz-card-link:focus-visible,
.lz-experience .lz-timeline-link:focus-visible {
outline: 3px solid #fff6be;
outline-offset: 4px;
}
.lz-experience .lz-chip {
display: inline-flex;
align-items: center;
min-width: 48px;
min-height: 48px;
padding: 9px 14px;
gap: 8px;
border: 1px solid var(--lz-line);
border-radius: 999px;
color: var(--lz-muted);
background: rgba(7, 13, 38, 0.74);
font: 800 0.92rem/1.2 var(--fonte-texto, system-ui, sans-serif);
text-decoration: none;
overflow-wrap: anywhere;
white-space: normal;
backdrop-filter: blur(10px);
}
.lz-experience .lz-chip strong {
color: var(--lz-gold);
}
.lz-experience .lz-hero-visual {
position: relative;
display: grid;
place-items: center;
min-height: 380px;
}
.lz-experience .lz-hero-visual::before,
.lz-experience .lz-hero-visual::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.lz-experience .lz-hero-visual::before {
width: min(86%, 390px);
aspect-ratio: 1;
background: radial-gradient(circle, rgba(103, 186, 255, 0.32), rgba(54, 92, 225, 0.12) 42%, transparent 70%);
filter: blur(8px);
animation: lz-aura-breathe 3.2s ease-in-out infinite;
}
.lz-experience .lz-hero-visual::after {
width: min(98%, 450px);
aspect-ratio: 1;
border: 1px solid rgba(121, 239, 255, 0.24);
box-shadow: inset 0 0 40px rgba(103, 186, 255, 0.09), 0 0 42px rgba(103, 186, 255, 0.08);
}
.lz-experience .lz-hero-art {
position: relative;
z-index: 1;
display: block;
width: min(100%, 430px);
height: auto;
max-height: 590px;
object-fit: contain;
filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.58));
}
.lz-experience .lz-stat-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: min(100%, 620px);
}
.lz-experience .lz-stat {
min-width: 0;
padding: 13px 14px;
border: 1px solid rgba(121, 239, 255, 0.22);
border-radius: 12px;
background: rgba(7, 13, 38, 0.78);
box-shadow: inset 0 0 24px rgba(83, 157, 255, 0.07);
backdrop-filter: blur(9px);
}
.lz-experience .lz-stat-value,
.lz-experience .lz-stat-label {
display: block;
overflow-wrap: anywhere;
}
.lz-experience .lz-stat-value {
color: var(--lz-gold);
font: 400 clamp(1.45rem, 3vw, 2.1rem)/1 var(--fonte-titulo, Impact, sans-serif);
letter-spacing: 0.03em;
}
.lz-experience .lz-stat-label {
margin-top: 5px;
color: var(--lz-muted);
font: 700 0.8rem/1.3 var(--fonte-texto, system-ui, sans-serif);
}
.lz-experience .lz-section {
position: relative;
padding-block: clamp(64px, 8vw, 112px);
}
.lz-experience .lz-section-alt {
background:
linear-gradient(180deg, rgba(13, 20, 52, 0.2), rgba(13, 20, 52, 0.82) 18%, rgba(13, 20, 52, 0.82) 82%, rgba(13, 20, 52, 0.2));
}
.lz-experience .lz-section-heading {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(280px, 1fr);
align-items: end;
gap: 28px;
margin-bottom: clamp(28px, 5vw, 54px);
}
.lz-experience .lz-section-title {
font-size: clamp(2.15rem, 5vw, 3.8rem);
line-height: 1;
color: var(--lz-gold);
text-transform: uppercase;
text-shadow: 0 3px 0 rgba(75, 30, 0, 0.78), 0 0 24px rgba(255, 183, 65, 0.2);
}
.lz-experience .lz-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2.3vw, 26px);
}
.lz-experience .lz-card {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--lz-line);
border-radius: var(--lz-radius);
background:
linear-gradient(150deg, rgba(38, 60, 126, 0.34), transparent 40%),
var(--lz-panel);
box-shadow: var(--lz-shadow), inset 0 0 34px rgba(84, 153, 255, 0.05);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.lz-experience .lz-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--lz-cyan), var(--lz-blue), transparent 82%);
}
.lz-experience .lz-card:hover,
.lz-experience .lz-card:focus-within {
transform: translateY(-5px);
border-color: rgba(121, 239, 255, 0.54);
box-shadow: 0 28px 68px rgba(0, 0, 0, 0.5), 0 0 34px rgba(76, 160, 255, 0.14);
}
.lz-experience .lz-card-media {
position: relative;
min-height: 190px;
overflow: hidden;
background: #080d27;
}
.lz-experience .lz-card-media::after {
content: '';
position: absolute;
inset: 42% 0 0;
background: linear-gradient(transparent, var(--lz-panel));
pointer-events: none;
}
.lz-experience .lz-card-media img {
display: block;
width: 100%;
height: 100%;
min-height: 190px;
max-height: 260px;
object-fit: cover;
}
.lz-experience .lz-card-body {
position: relative;
min-width: 0;
padding: 22px;
}
.lz-experience .lz-card-icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: 16px;
border: 1px solid rgba(255, 212, 94, 0.5);
border-radius: 14px;
color: var(--lz-gold);
background: rgba(255, 139, 36, 0.1);
box-shadow: inset 0 0 20px rgba(255, 183, 65, 0.08);
font-size: 1.55rem;
}
.lz-experience .lz-card-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.lz-experience .lz-card-title {
font-size: clamp(1.45rem, 2.6vw, 1.9rem);
line-height: 1.08;
color: var(--lz-gold);
}
.lz-experience .lz-card-copy {
margin: 10px 0 0;
color: var(--lz-muted);
line-height: 1.62;
overflow-wrap: anywhere;
white-space: normal;
}
.lz-experience .lz-card-link,
.lz-experience .lz-timeline-link {
display: inline-flex;
align-items: center;
min-width: 48px;
min-height: 48px;
margin-top: 14px;
padding: 8px 2px;
color: var(--lz-cyan);
font-weight: 900;
line-height: 1.25;
text-decoration: none;
overflow-wrap: anywhere;
}
.lz-experience .lz-card-link::after,
.lz-experience .lz-timeline-link::after {
content: '›';
margin-left: 9px;
font-size: 1.45em;
line-height: 1;
}
.lz-experience .lz-feature {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
align-items: center;
gap: clamp(28px, 6vw, 72px);
}
.lz-experience .lz-feature-reverse .lz-feature-visual {
order: 2;
}
.lz-experience .lz-feature-copy,
.lz-experience .lz-feature-visual {
min-width: 0;
}
.lz-experience .lz-feature-visual {
position: relative;
}
.lz-experience .lz-feature-frame {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 184, 63, 0.42);
border-radius: var(--lz-radius);
background: #080d27;
box-shadow: var(--lz-shadow), 0 0 42px rgba(255, 142, 36, 0.1);
}
.lz-experience .lz-feature-frame::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 52px rgba(0, 0, 0, 0.55);
}
.lz-experience .lz-feature-frame img {
display: block;
width: 100%;
height: auto;
max-height: 620px;
object-fit: cover;
}
.lz-experience .lz-feature-badge {
position: absolute;
right: 18px;
bottom: 18px;
max-width: calc(100% - 36px);
padding: 11px 14px;
border: 1px solid rgba(121, 239, 255, 0.36);
border-radius: 10px;
color: var(--lz-ink);
background: rgba(7, 13, 38, 0.88);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
font-weight: 850;
line-height: 1.35;
overflow-wrap: anywhere;
backdrop-filter: blur(10px);
}
.lz-experience .lz-timeline {
position: relative;
display: grid;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.lz-experience .lz-timeline::before {
content: '';
position: absolute;
top: 12px;
bottom: 12px;
left: 30px;
width: 2px;
background: linear-gradient(var(--lz-gold), var(--lz-blue), rgba(103, 186, 255, 0.08));
box-shadow: 0 0 16px rgba(103, 186, 255, 0.35);
}
.lz-experience .lz-timeline-item {
position: relative;
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 18px;
min-width: 0;
}
.lz-experience .lz-timeline-marker {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 62px;
height: 62px;
border: 2px solid var(--lz-gold);
border-radius: 50%;
color: #321200;
background: radial-gradient(circle at 36% 28%, #fff3aa, var(--lz-gold) 48%, var(--lz-orange) 76%);
box-shadow: 0 0 20px rgba(255, 190, 70, 0.4);
font: 400 1.42rem/1 var(--fonte-titulo, Impact, sans-serif);
}
.lz-experience .lz-timeline-content {
min-width: 0;
padding: 18px 20px;
border: 1px solid var(--lz-line);
border-radius: 14px;
background: var(--lz-panel);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.27);
}
.lz-experience .lz-timeline-title {
font-size: 1.45rem;
line-height: 1.1;
color: var(--lz-gold);
}
.lz-experience .lz-timeline-meta {
margin: 6px 0 0;
color: var(--lz-blue);
font-weight: 850;
line-height: 1.35;
overflow-wrap: anywhere;
}
.lz-experience .lz-timeline-copy {
margin: 9px 0 0;
color: var(--lz-muted);
line-height: 1.62;
overflow-wrap: anywhere;
}
.lz-experience .lz-banner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
min-width: 0;
padding: clamp(24px, 5vw, 44px);
overflow: hidden;
border: 1px solid rgba(255, 212, 94, 0.42);
border-radius: var(--lz-radius);
background:
radial-gradient(circle at 90% 0, rgba(255, 171, 48, 0.2), transparent 36%),
linear-gradient(125deg, rgba(28, 48, 106, 0.94), rgba(13, 20, 52, 0.96));
box-shadow: var(--lz-shadow);
}
.lz-experience .lz-banner::before {
content: '';
position: absolute;
inset: -80% auto -80% 58%;
width: 34%;
transform: rotate(16deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
pointer-events: none;
}
.lz-experience .lz-banner-copy {
position: relative;
z-index: 1;
min-width: 0;
}
.lz-experience .lz-banner-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
}
.lz-experience .lz-note {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-width: 0;
padding: 16px 18px;
border: 1px solid var(--lz-line);
border-radius: 13px;
color: var(--lz-muted);
background: rgba(15, 24, 61, 0.78);
line-height: 1.55;
}
.lz-experience .lz-note-icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 13px;
color: var(--lz-gold);
background: rgba(255, 151, 40, 0.11);
font-size: 1.45rem;
}
.lz-experience .lz-note p {
margin: 0;
overflow-wrap: anywhere;
}
.lz-experience .lz-media {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.lz-experience .lz-pixel {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.lz-experience .lz-anchor {
scroll-margin-top: calc(var(--topo-h, 64px) + var(--secao-h, 0px) + 18px);
}
@keyframes lz-aura-turn {
to { transform: rotate(360deg); }
}
@keyframes lz-aura-breathe {
0%, 100% { opacity: 0.62; transform: scale(0.96); }
50% { opacity: 1; transform: scale(1.05); }
}
@media (max-width: 1100px) {
.lz-experience .lz-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
gap: 38px;
}
.lz-experience .lz-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.lz-experience .lz-shell {
width: min(100% - 32px, var(--lz-max));
}
.lz-experience .lz-hero {
min-height: auto;
padding-block: 76px 64px;
background-position: 62% center;
}
.lz-experience .lz-hero-grid,
.lz-experience .lz-section-heading,
.lz-experience .lz-feature,
.lz-experience .lz-banner {
grid-template-columns: minmax(0, 1fr);
}
.lz-experience .lz-hero-visual {
min-height: 310px;
}
.lz-experience .lz-hero-art {
max-height: 430px;
}
.lz-experience .lz-feature-reverse .lz-feature-visual {
order: initial;
}
.lz-experience .lz-banner-actions {
justify-content: flex-start;
}
}
@media (max-width: 560px) {
.lz-experience .lz-shell {
width: min(100% - 24px, var(--lz-max));
}
.lz-experience .lz-hero {
padding-block: 58px 50px;
text-align: left;
background: linear-gradient(180deg, rgba(4, 8, 27, 0.74), rgba(4, 8, 27, 0.98) 62%, var(--lz-night)),
var(--lz-hero-image, url('../img/banners/inicio.png')) 66% top / auto 58% no-repeat; background: linear-gradient(180deg, rgba(4, 8, 27, 0.74), rgba(4, 8, 27, 0.98) 62%, var(--lz-night)),
var(--lz-hero-image, image-set(url('../img/banners/inicio.webp') type('image/webp'), url('../img/banners/inicio.png') type('image/png'))) 66% top / auto 58% no-repeat;
}
.lz-experience .lz-title {
max-width: 100%;
font-size: clamp(2.55rem, 14vw, 4rem);
}
.lz-experience .lz-hero-actions,
.lz-experience .lz-action-row,
.lz-experience .lz-banner-actions {
align-items: stretch;
flex-direction: column;
}
.lz-experience .lz-button {
width: 100%;
}
.lz-experience .lz-hero-visual {
min-height: 260px;
}
.lz-experience .lz-stat-grid,
.lz-experience .lz-card-grid {
grid-template-columns: minmax(0, 1fr);
}
.lz-experience .lz-card-body {
padding: 19px;
}
.lz-experience .lz-card-media,
.lz-experience .lz-card-media img {
min-height: 170px;
}
.lz-experience .lz-timeline::before {
left: 23px;
}
.lz-experience .lz-timeline-item {
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
}
.lz-experience .lz-timeline-marker {
width: 48px;
height: 48px;
font-size: 1.15rem;
}
.lz-experience .lz-timeline-content {
padding: 16px;
}
.lz-experience .lz-feature-badge {
position: relative;
right: auto;
bottom: auto;
max-width: 100%;
margin-top: 10px;
}
.lz-experience .lz-note {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 390px) {
.lz-experience .lz-shell {
width: min(100% - 20px, var(--lz-max));
}
.lz-experience .lz-section {
padding-block: 54px;
}
.lz-experience .lz-chip-row {
align-items: stretch;
flex-direction: column;
}
.lz-experience .lz-chip {
width: 100%;
justify-content: flex-start;
border-radius: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.lz-experience *,
.lz-experience *::before,
.lz-experience *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.lz-experience .lz-button:hover,
.lz-experience .lz-card:hover,
.lz-experience .lz-card:focus-within {
transform: none;
}
}

.lz-experience main {
position: relative;
z-index: 1;
}
.lz-experience .page-head {
--lz-page-image: image-set(url('../img/banners/inicio.webp') type('image/webp'), url('../img/banners/inicio.png') type('image/png'));
position: relative;
width: min(100%, 1920px);
max-width: none;
min-height: clamp(280px, 27vw, 400px);
margin: 0 auto 26px;
padding: clamp(150px, 18vw, 245px) max(20px, calc((100% - 1180px) / 2)) 34px;
display: grid;
align-content: end;
justify-items: center;
overflow: hidden;
border-bottom: 1px solid rgba(121, 239, 255, 0.24);
background:
linear-gradient(180deg, rgba(5, 9, 29, 0.05) 5%, rgba(5, 9, 29, 0.52) 55%, #070a1d 100%),
var(--lz-page-image) center top / min(1920px, 100vw) auto no-repeat;
box-shadow: inset 0 -30px 60px rgba(4, 7, 23, 0.62);
}
.lz-experience .page-head::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 24%, transparent 8%, rgba(6, 10, 31, 0.18) 72%);
}
.lz-experience .page-head > * {
position: relative;
z-index: 1;
}
.lz-experience .page-head .titulo {
margin: 0;
color: #fff7c6;
font-size: clamp(2.6rem, 6vw, 5.3rem);
line-height: 0.95;
text-shadow: 0 4px 0 #542a10, 0 0 28px rgba(255, 184, 63, 0.45);
}
.lz-experience .page-head .subtitulo {
max-width: 760px;
color: #eef2ff;
text-shadow: 0 2px 8px #020514;
}
.page-manual .page-head { --lz-page-image: image-set(url('../img/banners/manual.webp') type('image/webp'), url('../img/banners/manual.png') type('image/png')); }
.page-sistemas .page-head { --lz-page-image: image-set(url('../img/banners/jogar.webp') type('image/webp'), url('../img/banners/jogar.png') type('image/png')); }
.page-cronograma .page-head { --lz-page-image: image-set(url('../img/banners/cronograma.webp') type('image/webp'), url('../img/banners/cronograma.png') type('image/png')); }
.page-loja .page-head { --lz-page-image: image-set(url('../img/banners/loja.webp') type('image/webp'), url('../img/banners/loja.png') type('image/png')); }
.page-ranking .page-head { --lz-page-image: image-set(url('../img/banners/ranking.webp') type('image/webp'), url('../img/banners/ranking.png') type('image/png')); }
.page-forum .page-head { --lz-page-image: image-set(url('../img/banners/forum.webp') type('image/webp'), url('../img/banners/forum.png') type('image/png')); }
.page-conta .page-head { --lz-page-image: image-set(url('../img/banners/inicio.webp') type('image/webp'), url('../img/banners/inicio.png') type('image/png')); }
.page-pedidos .page-head { --lz-page-image: image-set(url('../img/banners/loja.webp') type('image/webp'), url('../img/banners/loja.png') type('image/png')); }
.page-admin .page-head { --lz-page-image: image-set(url('../img/banners/forum.webp') type('image/webp'), url('../img/banners/forum.png') type('image/png')); }
.lz-experience .card,
.lz-experience .sistema-card,
.lz-experience .manual-card,
.lz-experience .cron-card {
border-color: rgba(103, 186, 255, 0.23);
background: linear-gradient(145deg, rgba(19, 30, 74, 0.95), rgba(8, 13, 38, 0.96));
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.04);
}
.lz-experience .btn,
.lz-experience button,
.lz-experience input,
.lz-experience select,
.lz-experience textarea {
min-height: 48px;
}
.page-home .lz-home-hero {
position: relative;
min-height: 0;
padding: clamp(46px, 6vw, 82px) 0 0;
display: grid;
align-items: center;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 50% 34%, rgba(64, 153, 255, 0.18), transparent 43%),
linear-gradient(180deg, rgba(4, 7, 24, 0.12), rgba(4, 7, 24, 0.72) 70%, #070a1d);
}
.page-home .lz-home-hero::before {
content: '';
position: absolute;
inset: -20%;
z-index: -1;
pointer-events: none;
background: conic-gradient(from 220deg at 50% 44%, transparent 0 30%, rgba(98, 210, 255, 0.13) 34%, transparent 39% 72%, rgba(255, 176, 45, 0.12) 76%, transparent 81%);
animation: lz-aura-turn 34s linear infinite;
}
.page-home .lz-hero-world {
position: absolute;
inset: 0;
z-index: -2;
display: grid;
place-items: start center;
pointer-events: none;
}
.page-home .lz-hero-world::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7,10,29,.42), rgba(7,10,29,.76) 58%, rgba(7,10,29,.2)), linear-gradient(90deg, #070a1d 0, transparent 20%, transparent 80%, #070a1d 100%);
}
.page-home .lz-hero-world img {
width: min(1280px, 100%);
height: auto;
opacity: 0.6;
object-fit: contain;
filter: saturate(1.08) contrast(1.04);
}
.page-home .lz-home-hero .container {
z-index: 2;
width: min(100% - 40px, 980px);
}
.page-home .lz-home-hero h1 {
max-width: 18ch;
margin-inline: auto;
font-size: clamp(2rem, 5vw, 4.6rem);
line-height: 1;
text-wrap: balance;
}
.page-home .lz-home-hero .sub {
max-width: 820px;
font-size: clamp(1rem, 1.45vw, 1.18rem);
text-shadow: 0 2px 10px #020414;
}
.page-home .lz-hero-fighters {
position: relative;
left: auto;
bottom: auto;
width: min(100%, 1120px);
height: clamp(180px, 22vw, 260px);
margin: clamp(22px, 4vw, 42px) auto 0;
transform: none;
display: flex;
align-items: end;
justify-content: center;
gap: clamp(0px, 2vw, 22px);
pointer-events: none;
filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.65));
}
.page-home .lz-hero-fighters img {
width: min(17vw, 190px);
max-width: 256px;
height: auto;
max-height: 245px;
object-fit: contain;
object-position: bottom;
}
.page-home .lz-hero-fighters .lz-fighter-main {
width: min(19vw, 226px);
max-height: 278px;
}
.page-home .lz-stat-strip {
position: relative;
z-index: 2;
padding: 0 20px;
background: linear-gradient(180deg, #070a1d, #0c1536);
}
.page-home .lz-stat-grid {
width: min(100%, 1100px);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid rgba(103, 186, 255, 0.25);
border-radius: 18px;
overflow: hidden;
background: rgba(17, 28, 70, 0.82);
box-shadow: var(--lz-shadow);
}
.page-home .lz-stat {
min-width: 0;
padding: 24px 14px;
display: grid;
justify-items: center;
gap: 5px;
text-align: center;
}
.page-home .lz-stat + .lz-stat { border-left: 1px solid rgba(103, 186, 255, 0.18); }
.page-home .lz-stat strong { color: var(--lz-gold); font: 400 clamp(2.1rem, 4vw, 3.5rem)/1 var(--fonte-titulo, Impact, sans-serif); }
.page-home .lz-stat span { color: var(--lz-muted); font-weight: 800; overflow-wrap: anywhere; }
.page-home .lz-roster,
.page-home .lz-saga-run,
.page-home .lz-live-world {
padding: clamp(64px, 8vw, 104px) 20px;
}
.page-home .lz-roster > .container,
.page-home .lz-saga-run > .container,
.page-home .lz-live-grid {
width: min(100%, 1180px);
margin-inline: auto;
}
.page-home .lz-roster-grid {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.page-home .lz-roster-grid a {
min-width: 0;
min-height: 280px;
padding: 16px 10px 14px;
display: grid;
grid-template-rows: 1fr auto auto;
justify-items: center;
align-items: end;
border: 1px solid rgba(103, 186, 255, 0.2);
border-radius: 16px;
color: var(--lz-ink);
background: linear-gradient(180deg, rgba(30, 53, 116, 0.35), rgba(9, 15, 43, 0.96));
text-decoration: none;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.page-home .lz-roster-grid a:hover,
.page-home .lz-roster-grid a:focus-visible {
transform: translateY(-6px);
border-color: var(--lz-gold);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42), 0 0 24px rgba(255, 192, 64, 0.15);
}
.page-home .lz-roster-grid img { width: min(100%, 170px); max-width: 256px; height: auto; max-height: 208px; object-fit: contain; object-position: bottom; }
.page-home .lz-roster-grid span { font: 400 1.4rem/1 var(--fonte-titulo, Impact, sans-serif); }
.page-home .lz-roster-grid small { margin-top: 7px; color: var(--lz-gold); font-weight: 900; text-transform: uppercase; }
.page-home .lz-saga-run {
background: linear-gradient(110deg, rgba(7, 10, 29, 0.97), rgba(13, 29, 72, 0.9)),
url('../img/stars.png') repeat; background: linear-gradient(110deg, rgba(7, 10, 29, 0.97), rgba(13, 29, 72, 0.9)),
image-set(url('../img/stars.webp') type('image/webp'), url('../img/stars.png') type('image/png')) repeat;
}
.page-home .lz-saga-run > .container {
display: grid;
grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
align-items: center;
gap: clamp(28px, 6vw, 80px);
}
.page-home .lz-saga-copy p { color: var(--lz-muted); line-height: 1.7; }
.page-home .lz-saga-line { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; }
.page-home .lz-saga-line li { min-width: 0; min-height: 104px; padding: 14px 8px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid rgba(103, 186, 255, 0.22); border-radius: 14px; text-align: center; background: rgba(18, 31, 76, 0.84); }
.page-home .lz-saga-line b { color: var(--lz-cyan); font-size: 1.25rem; }
.page-home .lz-saga-line span { color: var(--lz-ink); font-size: 0.84rem; font-weight: 800; overflow-wrap: anywhere; }
.page-home .lz-saga-line .lz-saga-reset { grid-column: 3 / span 2; border-color: rgba(255, 212, 94, 0.55); background: linear-gradient(135deg, rgba(117, 61, 17, 0.8), rgba(37, 25, 67, 0.95)); }
.page-home .lz-saga-line .lz-saga-reset b { color: var(--lz-gold); }
.page-home .lz-live-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.page-home .lz-live-art { min-width: 0; border: 1px solid rgba(103, 186, 255, 0.26); border-radius: 20px; overflow: hidden; box-shadow: var(--lz-shadow); }
.page-home .lz-live-art img { display: block; width: min(100%, 1280px); height: auto; }
.page-home .lz-event-icons { margin: 24px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.page-home .lz-event-icons a { min-width: 0; min-height: 96px; padding: 10px 6px; display: grid; place-items: center; gap: 6px; border: 1px solid rgba(103, 186, 255, 0.2); border-radius: 12px; color: var(--lz-ink); text-align: center; text-decoration: none; background: rgba(16, 27, 66, 0.82); }
.page-home .lz-event-icons img { width: 48px; height: 48px; image-rendering: pixelated; }
.page-home .lz-event-icons span { overflow-wrap: anywhere; font-size: 0.82rem; font-weight: 800; }
.page-home .a07-disclosure > summary { display: none; }
.page-home .a07-disclosure { border: 0; background: transparent; }
.page-home .a07-disclosure > .section { padding-top: clamp(54px, 7vw, 86px); padding-bottom: clamp(54px, 7vw, 86px); }
.page-home .hero-saiba { width: min(100%, 680px); margin: 0 auto 20px; color: var(--lz-ink); }
.page-home .hero-saiba > summary { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 10px 16px; cursor: pointer; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.page-home .hero-saiba p { margin: 8px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.page-home .hero-saiba a { color: var(--lz-cyan); }
.page-home .hero-saiba > summary:focus-visible { outline: 3px solid var(--lz-gold); }
.page-home .home-regras-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
.page-admin .forum-side { align-items: start; }
@media (max-width: 900px) {
.page-home .lz-roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-home .lz-saga-run > .container,
.page-home .lz-live-grid { grid-template-columns: minmax(0, 1fr); }
.page-home .lz-saga-copy { text-align: center; }
.page-home .lz-saga-line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-home .lz-saga-line .lz-saga-reset { grid-column: 2 / span 2; }
}
@media (max-width: 600px) {
.page-home .a07-disclosure > summary { display: flex; }
.page-home .a07-disclosure > .section { padding-top: 12px; padding-bottom: 28px; }
.page-manual .page-head { --lz-page-image: url('../img/jogo/zenkai_800.webp'); }
.page-sistemas .page-head { --lz-page-image: url('../img/jogo/personagens_800.webp'); }
.page-cronograma .page-head { --lz-page-image: url('../img/destaque_sagas.webp'); }
.page-loja .page-head { --lz-page-image: url('../img/destaque_loja.webp'); }
.page-ranking .page-head { --lz-page-image: url('../img/destaque_sagas.webp'); }
.page-forum .page-head { --lz-page-image: url('../img/mapas/vila_kame.jpg'); }
.page-conta .page-head { --lz-page-image: url('../img/destaque_jogo.webp'); }
.page-pedidos .page-head { --lz-page-image: url('../img/destaque_loja.webp'); }
.page-admin .page-head { --lz-page-image: url('../img/mapas/vila_kame.jpg'); }
.lz-experience .page-head {
min-height: 300px;
padding: 178px 20px 28px;
background-size: auto 230px;
}
.page-conta .page-head[style] { padding-top: 178px !important; }
.lz-experience .page-head .titulo {
max-width: 100%;
font-size: clamp(2rem, 9.2vw, 3.2rem);
overflow-wrap: normal;
word-break: normal;
white-space: normal;
text-wrap: balance;
}
.page-home .lz-home-hero { min-height: 0; padding: 38px 0 0; }
.page-home .lz-home-hero .container { width: min(100% - 24px, 980px); }
.page-home .lz-home-hero .hero-logo { width: min(100%, 540px); }
.page-home .lz-home-hero h1 { font-size: clamp(2rem, 10vw, 3.2rem); }
.page-home .lz-home-hero .hero-acoes { display: grid; grid-template-columns: 1fr; }
.page-home .lz-home-hero .btn { width: 100%; max-width: none; }
.page-home .lz-hero-fighters { width: 100%; height: 150px; margin-top: 22px; gap: 0; }
.page-home .lz-hero-fighters img { width: min(18vw, 120px); max-height: 142px; }
.page-home .lz-hero-fighters .lz-fighter-main { width: min(22vw, 145px); max-height: 150px; }
.page-home .lz-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-home .lz-stat + .lz-stat { border-left: 0; }
.page-home .lz-stat:nth-child(even) { border-left: 1px solid rgba(103, 186, 255, 0.18); }
.page-home .lz-stat:nth-child(n + 3) { border-top: 1px solid rgba(103, 186, 255, 0.18); }
.page-home .lz-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-home .lz-roster-grid a { min-height: 260px; }
.page-home .lz-saga-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-home .lz-saga-line .lz-saga-reset { grid-column: 1 / -1; }
.page-home .lz-event-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-loja .loja-vitrine .lv-grade .prod .prod-preview,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-item,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-kit,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-personagem,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-pet,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-folha { height: 204px; min-height: 204px; width: 100%; overflow: hidden; }
.page-loja .loja-vitrine .lv-grade .prod .prod-preview .vit-canvas { display: block; max-width: calc(100% - 16px); max-height: calc(100% - 12px); image-rendering: pixelated; }
.page-loja .loja-vitrine .lv-grade .prod .prod-corpo { flex: 1 1 auto; display: flex; flex-direction: column; }
.page-loja .loja-vitrine .lv-grade .prod .prod-ver { margin-top: auto; }
.page-loja .loja-vitrine .lv-grade .prod .prod-preco { flex: 0 0 auto; }
.page-loja .loja-vitrine .lv-grade .prod .prod-ver { flex: 0 0 auto; }
.page-loja .loja-vitrine .lv-grade .prod .prod-gratis { margin-bottom: 4px; }
@media (max-width: 700px) {
.page-loja .loja-vitrine .lv-grade .prod .prod-preview,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-item,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-kit,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-personagem,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-pet,
.page-loja .loja-vitrine .lv-grade .prod .prod-preview-folha { height: 176px; min-height: 176px; }
}