html { scroll-behavior: smooth; scroll-padding-top: 76px }
body { margin: 0; font-family: 'Montserrat', sans-serif; color: #B4BBD0; background: #000; -webkit-font-smoothing: antialiased }
*, *::before, *::after { box-sizing: border-box }
a { color: #8FA3F0; text-decoration: none }
a:hover { color: #fff; text-decoration: underline }
input, select, textarea, button { font-family: inherit }
/* Navbar */
.nav-desktop { display: none }
@media (min-width: 900px) {
.nav-desktop { display: flex; align-items: center; gap: 24px; white-space: nowrap }
.nav-mobile-btn { display: none }
}
.nav-mobile-menu { display: none }
.nav-mobile-menu.is-open { display: flex; flex-direction: column }
/* Projects grid */
.projects-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.projects-grid > * { flex: 0 0 100% }
@media (min-width: 600px) { .projects-grid > * { flex: 0 0 calc(50% - 8px) } }
@media (min-width: 880px) { .projects-grid { gap: 24px } .projects-grid > * { flex: 0 0 calc(33.333% - 16px) } }
@media (min-width: 1180px) { .projects-grid > * { flex: 0 0 calc(25% - 18px) } }
/* Stats / FenicePay grid */
.cols-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: rgba(255,255,255,0.08);
}
@media (min-width: 600px) { .cols-grid { grid-template-columns: repeat(3, 1fr) } }
.fenice-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: rgba(232,181,71,0.25);
border: 1px solid rgba(232,181,71,0.25);
}
@media (min-width: 600px) { .fenice-grid { grid-template-columns: repeat(3, 1fr) } }
/* Partners carousel */
.partner-logo { opacity: .85; transition: opacity .25s }
.partner-logo:hover { opacity: 1 }
/* WhatsApp label — desktop only */
.wa-label { display: none }
@media (min-width: 900px) { .wa-label { display: inline } }
/* ── Projeto pages — paleta compartilhada ──
--proj-warm : #F6F5F0 fundo bege quente (seções claras alternadas)
--proj-dark : #0E1020 fundo escuro (hero, vídeo)
--proj-title : #0E1020 cor de heading
--proj-body : #3C3844 cor de texto corrido
--proj-muted : #787488 cor de texto secundário/label
--proj-border: rgba(14,16,32,0.1)
*/
.proj-s-warm { background: #F6F5F0 }
.proj-s-white { background: #FFFFFF }
.proj-s-dark { background: #0E1020 }
.proj-label { font-size:11px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase }
.proj-lightbox-overlay {
display: none; position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.88); align-items: center;
justify-content: center; padding: 24px;
}
/* Projeto page */
.projeto-nav-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 600px) { .projeto-nav-grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 900px) { .projeto-nav-grid { grid-template-columns: repeat(3, 1fr) } }
/* ── Shared project page components ──
Use these classes across ALL project pages to guarantee
visual consistency for the common structural elements.
*/
/* Back link */
.proj-back {
font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
color: #999; text-decoration: none;
}
.proj-back:hover { color: #fff; text-decoration: none }
/* Segment badge — always gold on dark */
.proj-badge {
display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
background: #C49A14; color: #0E1020; padding: 4px 12px;
}
/* Hero tagline */
.proj-tagline {
font-size: clamp(18px, 2vw, 22px); font-style: italic;
color: #C49A14; font-weight: 600; letter-spacing: 0.04em; margin: 0;
}
/* Hero body copy */
.proj-hero-text {
font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7;
color: #C0C0C0; max-width: 580px; margin: 0;
}
/* Primary CTA button — always gold */
.proj-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: #C49A14; color: #0E1020;
font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
padding: 14px 28px; text-decoration: none;
}
.proj-btn-primary:hover { background: #a8840f; color: #0E1020; text-decoration: none }
/* Section label (overline) —
dark navy on light backgrounds, gold on dark backgrounds */
.proj-overline {
font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
text-transform: uppercase; color: #0E1020;
}
.proj-s-dark-section .proj-overline,
.proj-video-section .proj-overline { color: #C49A14 }
/* Section heading — light bg */
.proj-h2 {
margin: 0; font-size: clamp(28px, 3.5vw, 40px); font-weight: 700;
line-height: 1.15; color: #0E1020; letter-spacing: -0.02em;
}
/* Section heading — dark bg */
.proj-h2-light {
margin: 0; font-size: clamp(28px, 3.5vw, 40px); font-weight: 700;
line-height: 1.15; color: #fff; letter-spacing: -0.02em;
}
/* Body text — light bg */
.proj-body {
margin: 0; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.8; color: #444;
}
/* Body text — dark bg */
.proj-body-dark {
margin: 0; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.8; color: #AAA;
}
/* Blockquote */
.proj-quote {
margin: 0; padding: 12px 20px;
font-style: italic; font-size: 16px; line-height: 1.6;
}
/* CTA section — always gold background */
.proj-cta-section {
background: #C49A14; padding: clamp(64px, 10vw, 96px) 20px; text-align: center;
}
.proj-cta-title {
margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 700;
color: #0E1020; letter-spacing: -0.02em; line-height: 1.15;
}
.proj-cta-sub {
margin: 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; color: #2A2000;
}
.proj-btn-dark {
display: inline-flex; align-items: center; gap: 10px;
background: #0E1020; color: #fff;
font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
padding: 16px 32px; text-decoration: none;
}
.proj-btn-dark:hover { background: #1e2240; color: #fff; text-decoration: none }
/* Section standard padding */
.proj-section { padding: clamp(64px,10vw,112px) 20px }
/* Inner content container */
.proj-inner { max-width: 1200px; margin: 0 auto }
/* 2-column responsive content grid */
.proj-2col {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: clamp(48px,7vw,80px);
align-items: center;
}
.proj-2col-top { align-items: start }
/* Column flex container inside 2-col */
.proj-col { display: flex; flex-direction: column; gap: 24px }
/* Centered section header (used in "Como Funciona" type sections) */
.proj-section-head { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center }
/* Steps section wrapper and card grid */
.proj-steps { display: flex; flex-direction: column; gap: 48px }
.proj-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px }
/* Dark bg full section (background + padding + color) */
.proj-s-dark-section { background: #0E1020; padding: clamp(64px,10vw,112px) 20px; color: #fff }
/* Dark table (prize table, conditions table) */
.proj-table { display: flex; flex-direction: column; background: #131228; border: 1px solid rgba(196,154,20,0.3) }
.proj-table-head { background: #C49A14; padding: 12px 20px }
.proj-table-head-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: #0E1020 }
.proj-table-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid rgba(196,154,20,0.12) }
.proj-table-row:last-child { border-bottom: none }
.proj-table-row-name { font-size: 15px; font-weight: 600; color: #fff }
.proj-table-row-val { font-size: clamp(16px, 2.5vw, 22px); font-weight: 700; color: #C49A14; white-space: nowrap }
@media (max-width: 600px) { .proj-table-row { flex-direction: column; align-items: flex-start; gap: 4px } }
/* Distribution/partner card */
.proj-partner { background: #fff; border: 1px solid rgba(0,0,0,0.1); padding: 16px 20px; font-size: 14px; font-weight: 600; color: #0E1020; display: flex; align-items: center; gap: 10px }
.proj-partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px }
/* Video section */
.proj-video-section { background: #0E1020; padding: clamp(64px,10vw,112px) 20px }
.proj-video-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center }
.proj-video-head { text-align: center; display: flex; flex-direction: column; gap: 8px }
.proj-video { width: 100%; max-width: 800px; display: block; border: 1px solid rgba(196,154,20,0.25) }
/* Blockquote — gold accent, warm background */
.proj-blockquote { margin: 0; border-left: 3px solid #C49A14; padding: 12px 20px; background: #FFF8E0; font-style: italic; color: #3A2A00; font-size: 16px; line-height: 1.6 }
/* Marketing/lightbox image grid */
.proj-img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px }
.proj-img-thumb { width: 100%; height: auto; display: block; cursor: zoom-in }
/* Lightbox overlay */
.proj-lightbox {
display: none; position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.9); align-items: center;
justify-content: center; padding: 24px;
}
.proj-lightbox-close {
position: absolute; top: 20px; right: 24px;
background: none; border: none; color: #fff;
font-size: 32px; cursor: pointer; line-height: 1;
}
.proj-lightbox-img { max-width: 90vw; max-height: 90vh; height: auto; display: block; box-shadow: 0 8px 64px rgba(0,0,0,0.6) }