/* ==========================================================================
Mestre Piso — fundo hexagonal que se ENCAIXA (mp-bg)
Gera uma malha SVG de hexágonos que entram deslizando e se encaixam.
CSS puro para a animação (transform/opacity); o JS só desenha a malha.
========================================================================== */
:root {
--mp-cyan: #22d3ee;
--mp-blue: #2563eb;
--mp-ink: #0b1020;
}
/* ---------- 1. Camada global (clara) ------------------------------------- */
/* Nas páginas que já são escuras, marque e estas regras
claras são ignoradas. */
html[data-mp-light] { background-color: #eef3fa !important; }
html[data-mp-light] body {
position: relative;
background-color: transparent !important;
background-image:
radial-gradient(40vmax 40vmax at 12% 18%, rgba(34, 211, 238, .20), transparent 60%),
radial-gradient(46vmax 46vmax at 88% 72%, rgba(37, 99, 235, .18), transparent 62%) !important;
background-attachment: fixed, fixed !important;
background-repeat: no-repeat, no-repeat !important;
animation: mpBgDrift 90s ease-in-out infinite alternate;
}
html[data-mp-dark] body { position: relative; }
/* brilhos por baixo das peças, para o neon aparecer como na referência */
html[data-mp-dark] > body > .mp-grid {
background:
radial-gradient(40vmax 40vmax at 14% 18%, rgba(34, 211, 238, .16), transparent 60%),
radial-gradient(46vmax 46vmax at 86% 76%, rgba(37, 99, 235, .20), transparent 62%);
animation: mpGlow 24s ease-in-out infinite alternate;
}
@keyframes mpBgDrift {
from { background-position: 0% 0%, 100% 100%; }
to { background-position: 8% 6%, 92% 94%; }
}
/* a malha fica numa camada fixa criada pelo mp-bg.js */
.mp-grid {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
body > .mp-grid { z-index: 0; }
body > header,
body > main,
body > footer,
body > section { position: relative; z-index: 1; }
.modal-overlay { z-index: 60 !important; }
.mp-grid svg { width: 100%; height: 100%; display: block; }
/* ---------- 2. O encaixe --------------------------------------------------- */
.mp-cell {
opacity: 0;
transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(.86);
transform-origin: var(--ox, 50%) var(--oy, 50%);
transform-box: fill-box;
transition:
opacity .5s ease var(--d, 0s),
transform .62s cubic-bezier(.16, 1.02, .3, 1) var(--d, 0s);
}
.mp-grid.mp-set .mp-cell {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
/* peça que se reencaixa de tempos em tempos */
.mp-cell.mp-snap {
animation: mpSnap 1.5s cubic-bezier(.16, 1.02, .3, 1);
}
@keyframes mpSnap {
0% { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0) scale(.9); }
55% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.03); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* ---------- 3. Blocos escuros neon ---------------------------------------- */
.mp-hex {
position: relative;
isolation: isolate;
background-color: var(--mp-ink) !important;
overflow: hidden;
}
.mp-hex > *:not(.mp-grid) { position: relative; z-index: 2; }
.mp-hex > .mp-grid { position: absolute; z-index: 1; opacity: .78; }
/* véu escuro para o texto continuar legível sobre a composição */
.mp-hex > .mp-grid::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(11, 16, 32, .86) 0%, rgba(11, 16, 32, .5) 44%, rgba(11, 16, 32, .08) 74%);
}
.mp-hex::after {
content: "";
position: absolute;
inset: -20%;
z-index: 1;
pointer-events: none;
background:
radial-gradient(30vmax 30vmax at 18% 22%, rgba(34, 211, 238, .28), transparent 58%),
radial-gradient(34vmax 34vmax at 82% 78%, rgba(37, 99, 235, .32), transparent 60%);
animation: mpGlow 20s ease-in-out infinite alternate;
}
@keyframes mpGlow {
from { transform: translate3d(-2%, -1%, 0) scale(1); }
to { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}
/* texto legível sobre o bloco escuro */
.mp-hex,
.mp-hex h1, .mp-hex h2, .mp-hex h3,
.mp-hex p, .mp-hex li, .mp-hex strong, .mp-hex span,
.mp-hex a:not(.btn) { color: #eaf2ff !important; }
.mp-hex .sub, .mp-hex .muted, .mp-hex small { color: rgba(234, 242, 255, .78) !important; }
.mp-hex .badge {
background: rgba(34, 211, 238, .12) !important;
border: 1px solid rgba(34, 211, 238, .35) !important;
color: #b9f1fb !important;
}
.mp-hex .check { color: var(--mp-cyan) !important; background: rgba(34, 211, 238, .14) !important; }
.mp-hex .hero-card,
.mp-hex .img-card {
background: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(34, 211, 238, .22) !important;
box-shadow: 0 24px 60px rgba(4, 10, 26, .55) !important;
}
.mp-hex .btn-outline {
background: transparent !important;
border-color: rgba(34, 211, 238, .6) !important;
color: #b9f1fb !important;
}
.mp-hex .btn-outline:hover { background: rgba(34, 211, 238, .12) !important; }
.sp-strip.mp-hex .sp-num { color: #fff !important; }
.sp-strip.mp-hex .sp-stars { color: var(--mp-cyan) !important; }
.sp-strip.mp-hex .sp-divider { background: rgba(255, 255, 255, .18) !important; }
/* --- exceções: blocos claros que vivem dentro de um .mp-hex ------------- */
/* mockup do celular na calculadora: volta a ter texto escuro */
.mp-hex .screen,
.mp-hex .screen h1, .mp-hex .screen h2, .mp-hex .screen h3,
.mp-hex .screen p, .mp-hex .screen li, .mp-hex .screen span,
.mp-hex .screen strong, .mp-hex .screen label,
.mp-hex .screen a:not(.btn) { color: #0f2a44 !important; }
.mp-hex .screen .micro,
.mp-hex .screen small { color: #5b6b80 !important; }
/* pills e caixas claras do hero da calculadora */
.mp-hex .eyebrow,
.mp-hex .trust-pill {
background: rgba(34, 211, 238, .10) !important;
border: 1px solid rgba(34, 211, 238, .32) !important;
color: #b9f1fb !important;
}
.mp-hex .hero-highlight {
background: rgba(255, 255, 255, .05) !important;
border: 1px solid rgba(34, 211, 238, .20) !important;
}
/* ---------- 4. Conteúdo em vidro para a malha aparecer -------------------- */
html[data-mp-light] main,
html[data-mp-light] .section,
html[data-mp-light] .seo-content { background: transparent !important; }
html[data-mp-light] .section.alt { background: rgba(255, 255, 255, .45) !important; }
html[data-mp-light] .card,
html[data-mp-light] .plan,
html[data-mp-light] .tcard,
html[data-mp-light] .faq-item,
html[data-mp-light] .img-card,
html[data-mp-light] .hero-card {
background-color: rgba(255, 255, 255, .93) !important;
}
html[data-mp-light] .header {
background: rgba(255, 255, 255, .88) !important;
backdrop-filter: blur(10px);
}
/* ---------- 5. Desempenho e acessibilidade -------------------------------- */
@media (prefers-reduced-motion: reduce) {
body { animation: none !important; }
.mp-hex::after { animation: none !important; }
.mp-cell { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}