/* Fonts loaded via in HTML head */
/* ═══════════════════════════════════════════════════════════════
DJ TRIEF — DESIGN SYSTEM v9
Ultra Dark & Luxury | 100% Responsive | WOW Factor
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
PRIORITY OVERRIDE: LABEL GOLD — FORCES VISIBILITY EVERYWHERE
═══════════════════════════════════════════════════════════════ */
.label-gold { background: linear-gradient(135deg, #EDD06E 0%, #C9A84C 100%) !important; color: #1a1a1a !important; font-weight: 900 !important; font-size: .9rem !important; padding: .7em 1.6em !important; border: 2px solid #D4AF37 !important; border-radius: 999px !important; display: inline-block !important; text-transform: uppercase !important; letter-spacing: .3em !important; box-shadow: 0 8px 24px rgba(201,168,76,.45) !important; line-height: 1.2 !important; min-height: 36px !important; }
span.label-gold { background: linear-gradient(135deg, #EDD06E 0%, #C9A84C 100%) !important; color: #1a1a1a !important; font-weight: 900 !important; font-size: .9rem !important; padding: .7em 1.6em !important; border: 2px solid #D4AF37 !important; border-radius: 999px !important; display: inline-block !important; text-transform: uppercase !important; letter-spacing: .3em !important; box-shadow: 0 8px 24px rgba(201,168,76,.45) !important; line-height: 1.2 !important; min-height: 36px !important; }
div.label-gold { background: linear-gradient(135deg, #EDD06E 0%, #C9A84C 100%) !important; color: #1a1a1a !important; font-weight: 900 !important; font-size: .9rem !important; padding: .7em 1.6em !important; border: 2px solid #D4AF37 !important; border-radius: 999px !important; display: inline-block !important; text-transform: uppercase !important; letter-spacing: .3em !important; box-shadow: 0 8px 24px rgba(201,168,76,.45) !important; line-height: 1.2 !important; min-height: 36px !important; }
/* ── 1. Design Tokens ───────────────────────────────────────────── */
:root {
/* Core colors */
--black: #020202;
--bg: #080808;
--surface: #0d0d0d;
--surface-2: #131313;
--surface-3: #1a1a1a;
/* Gold palette */
--gold: #C9A84C;
--gold-light: #EDD06E;
--gold-dark: #8A6B2A;
--gold-dim: rgba(201,168,76,.1);
--gold-glow: rgba(201,168,76,.4);
--gold-gradient: linear-gradient(135deg,#7A5C1E 0%,#EDD06E 48%,#C9A84C 100%);
/* Text */
--text-primary: #F5F0E8;
--text-secondary: rgba(245,240,232,.68);
--text-muted: rgba(245,240,232,.42);
--text-dim: rgba(245,240,232,.18);
--text: var(--text-primary);
/* Borders */
--border: rgba(201,168,76,.1);
--border-hover: rgba(201,168,76,.38);
/* Glass */
--glass: rgba(255,255,255,.024);
--glass-2: rgba(255,255,255,.042);
/* Fonts */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Montserrat', system-ui, sans-serif;
/* Sizes */
--size-xs: .7rem;
--size-sm: .875rem;
--size-base: 1rem;
--size-lg: 1.125rem;
--size-xl: 1.5rem;
/* Spacing */
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
--space-2xl: 9rem;
/* Radius */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
/* Motion */
--ease: cubic-bezier(.22,1,.36,1);
--dur: .35s;
--dur-slow: .75s;
/* Layout */
--container: 1280px;
--header-h: 80px;
}
/* ── 2. Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-size: var(--size-base);
font-weight: 400;
line-height: 1.75;
color: var(--text-primary);
background: var(--bg);
overflow-x: hidden;
min-height: 100vh;
}
body.locked { overflow: hidden; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
/* ── GLOBAL OVERRIDE: Label Gold ────────────────────────────────── */
*[class*="label-gold"],
.label-gold,
span.label-gold,
div.label-gold {
display: inline-block !important;
font-size: .85rem !important;
font-weight: 800 !important;
letter-spacing: .25em !important;
text-transform: uppercase !important;
color: #000000 !important;
padding: .6em 1.5em !important;
border: 2px solid #C9A84C !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #EDD06E 0%, #C9A84C 100%) !important;
margin-bottom: 1.2rem !important;
box-shadow: 0 6px 20px rgba(201,168,76,.35) !important;
line-height: 1 !important;
}
/* ── 3. Typography ──────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-body);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.025em;
color: var(--text-primary);
}
h1 { font-size: clamp(2.5rem,7vw,6rem); }
h2 { font-size: clamp(2rem,5vw,3.5rem); }
h3 { font-size: clamp(1.4rem,3vw,2rem); }
h4 { font-size: 1.1rem; font-weight:600; letter-spacing:0; }
p { color: var(--text-secondary); line-height: 1.8; }
strong { color: var(--text-primary); }
/* ── 4. Layout Utilities ────────────────────────────────────────── */
.container {
width: min(var(--container), 100% - 3rem);
margin-inline: auto;
}
.section-header { text-align:center; margin-bottom:var(--space-lg); }
.section-title {
font-size: clamp(2rem,5vw,3.5rem);
letter-spacing: -.03em;
margin-top: .5rem;
}
.divider-gold {
border: none;
height: 1px;
background: linear-gradient(90deg,transparent,var(--gold),transparent);
max-width: 800px;
margin: var(--space-xl) auto;
opacity: .35;
}
/* ── 5. Label Gold ──────────────────────────────────────────────── */
.label-gold {
display: inline-block !important;
font-size: .85rem !important;
font-weight: 800 !important;
letter-spacing: .25em !important;
text-transform: uppercase !important;
color: #000000 !important;
padding: .6em 1.5em !important;
border: 2px solid #C9A84C !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #EDD06E 0%, #C9A84C 100%) !important;
margin-bottom: 1.2rem !important;
box-shadow: 0 6px 20px rgba(201,168,76,.35) !important;
}
/* ── 6. Buttons ─────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .9em 2.4em;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: .75rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
transition:
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
filter var(--dur) var(--ease);
white-space: nowrap;
cursor: pointer;
}
.btn-gold {
background: var(--gold-gradient);
color: #000;
box-shadow: 0 4px 24px rgba(201,168,76,.22);
}
.btn-gold:hover {
transform: translateY(-3px);
box-shadow: 0 10px 44px rgba(201,168,76,.5);
filter: brightness(1.08);
}
.btn-outline {
border: 1.5px solid var(--border-hover);
color: var(--gold);
background: transparent;
}
.btn-outline:hover {
border-color: var(--gold);
background: var(--gold-dim);
transform: translateY(-3px);
box-shadow: 0 0 28px var(--gold-glow);
}
/* ── 7. Lock Screen ─────────────────────────────────────────────── */
#lock-screen {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--black);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.2rem;
transition: opacity .8s var(--ease), visibility .8s;
}
#lock-screen::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 50%,
rgba(201,168,76,.08) 0%, transparent 70%);
pointer-events: none;
}
#lock-screen.unlocked { opacity:0; visibility:hidden; pointer-events:none; }
.lock-logo {
width: min(200px,52vw);
filter: drop-shadow(0 0 40px rgba(201,168,76,.5));
animation: lockPulse 3s ease-in-out infinite;
position: relative; z-index:1;
}
@keyframes lockPulse {
0%,100% { filter:drop-shadow(0 0 28px rgba(201,168,76,.35)); }
50% { filter:drop-shadow(0 0 65px rgba(201,168,76,.75)); }
}
.lock-label {
font-size: .62rem;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--text-muted);
position: relative; z-index:1;
}
.lock-timer {
display: flex;
align-items: center;
gap: .6rem;
position: relative; z-index:1;
}
.lock-unit {
text-align: center;
min-width: 82px;
padding: 1.2rem .8rem;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-md);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.lock-unit span {
display: block;
font-size: clamp(2rem,6vw,3.5rem);
font-weight: 900;
line-height: 1;
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lock-unit p {
font-size: .55rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: .35rem;
}
.lock-sep {
font-size: clamp(1.5rem,4vw,2.2rem);
font-weight: 900;
color: var(--gold);
align-self: flex-start;
padding-top: 1.1rem;
}
/* ── 8. Header ──────────────────────────────────────────────────── */
.main-header {
position: fixed;
top:0; left:0; right:0;
z-index: 900;
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2.5rem;
transition:
background var(--dur) var(--ease),
backdrop-filter var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.main-header.scrolled {
background: rgba(2,2,2,.94);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
box-shadow: 0 1px 0 var(--border), 0 8px 40px rgba(0,0,0,.6);
}
.header-left { flex:0 0 auto; }
.logo-topo {
height: 40px; width:auto;
transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.logo-topo:hover {
filter: drop-shadow(0 0 14px var(--gold-glow));
transform: scale(1.04);
}
.main-nav { flex:1; display:flex; justify-content:center; }
.main-nav ul { display:flex; align-items:center; gap:.15rem; }
.main-nav a {
display: block;
padding: .5em 1em;
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.main-nav a:hover,
.main-nav a.active { color:var(--gold); background:var(--gold-dim); }
.header-right { flex:0 0 auto; }
.btn-budget {
display: inline-flex;
align-items: center;
padding: .6em 1.7em;
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #000;
background: var(--gold-gradient);
border-radius: var(--radius-full);
box-shadow: 0 2px 18px rgba(201,168,76,.22);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-budget:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(201,168,76,.5);
filter: brightness(1.08);
}
/* ── 9. Hamburger ───────────────────────────────────────────────── */
.btn-hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 9px;
border-radius: var(--radius-sm);
background: var(--glass);
border: 1px solid var(--border);
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-hamburger span {
display: block;
width: 22px; height: 2px;
background: var(--gold);
border-radius: 2px;
transition: transform .3s var(--ease), opacity .3s;
}
.btn-hamburger:hover { background:var(--gold-dim); border-color:var(--border-hover); }
/* ── 10. Mobile Nav ─────────────────────────────────────────────── */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2,2,2,.97);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
opacity: 0;
visibility: hidden;
transition: opacity .4s var(--ease), visibility .4s;
}
.nav-overlay::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 70% 70% at 50% 50%,
rgba(201,168,76,.06) 0%, transparent 70%);
pointer-events: none;
}
.nav-overlay.active { opacity:1; visibility:visible; }
.nav-overlay a {
font-size: clamp(1.6rem,5vw,2.8rem);
font-weight: 800;
letter-spacing: -.02em;
color: var(--text-muted);
padding: .35rem 2rem;
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-overlay a:hover { color:var(--gold); transform:translateX(10px); }
.closebtn {
position: absolute !important;
top:1.5rem; right:1.5rem;
font-size: 2.4rem !important;
color: var(--text-muted) !important;
padding: 0 !important;
transition: color var(--dur) var(--ease), transform .3s var(--ease) !important;
}
.closebtn:hover { color:var(--gold) !important; transform:rotate(90deg) !important; }
.btn-menu-orcamento {
margin-top: 1.5rem !important;
font-size: .72rem !important;
font-weight: 700 !important;
letter-spacing: .15em !important;
text-transform: uppercase !important;
color: #000 !important;
background: var(--gold-gradient) !important;
padding: .85em 2.8em !important;
border-radius: var(--radius-full) !important;
}
.btn-menu-orcamento:hover {
box-shadow: 0 8px 36px rgba(201,168,76,.55) !important;
transform: translateY(-2px) !important;
}
/* ── 11. Hero ───────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--black);
padding: var(--header-h) 1.5rem 0;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 100% 80% at 50% 0%,rgba(201,168,76,.1) 0%,transparent 55%),
radial-gradient(ellipse 60% 40% at 85% 85%,rgba(201,168,76,.05) 0%,transparent 50%),
radial-gradient(ellipse 40% 30% at 10% 70%,rgba(201,168,76,.04) 0%,transparent 50%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.hero-container {
position: relative; z-index:1;
text-align: center;
max-width: 960px; width:100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.click-alert {
display: none;
font-size: .58rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--text-dim);
}
.logo-principal {
width: min(260px,60vw);
filter: drop-shadow(0 0 60px rgba(201,168,76,.35));
display: none;
}
.hero-text h1 {
font-size: clamp(3rem,10vw,8.5rem);
font-weight: 900;
letter-spacing: -.045em;
line-height: .9;
background: linear-gradient(180deg,#fff 0%,rgba(245,240,232,.62) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: .65rem;
}
.hero-text h2 {
font-family: var(--font-display);
font-size: clamp(1.1rem,2.5vw,1.8rem);
font-weight: 300;
font-style: italic;
letter-spacing: .04em;
color: var(--gold);
margin-bottom: 1.4rem;
line-height: 1.3;
}
.hero-text p {
font-size: clamp(.875rem,1.5vw,1rem);
color: var(--text-muted);
max-width: 520px;
margin: 0 auto;
font-style: italic;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.scroll-indicator {
position: absolute;
bottom: 2rem; left: 50%;
transform: translateX(-50%);
font-size: .58rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--text-dim);
animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator::after {
content: '';
display: block;
width: 1px; height: 36px;
background: linear-gradient(to bottom, rgba(201,168,76,.3), transparent);
margin: .5rem auto 0;
}
@keyframes scrollBounce {
0%,100% { transform:translateX(-50%) translateY(0); }
50% { transform:translateX(-50%) translateY(7px); }
}
/* ── 12. Stats Bar ──────────────────────────────────────────────── */
.stats-bar {
display: grid;
grid-template-columns: repeat(4,1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface);
position: relative;
}
.stats-bar::before {
content: '';
position: absolute;
top:0; left:0; right:0; height:1px;
background: linear-gradient(90deg,transparent,var(--gold-glow),transparent);
}
.stat-item {
padding: 2.2rem 1.5rem;
text-align: center;
border-right: 1px solid var(--border);
transition: background var(--dur) var(--ease);
}
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--gold-dim); }
.stat-item h3 {
font-size: clamp(1.8rem,4vw,3rem);
font-weight: 900;
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1; margin-bottom:.4rem;
}
.stat-item p {
font-size: .65rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ── 13. Section defaults ───────────────────────────────────────── */
section { padding: var(--space-xl) 1.5rem; }
/* ── 14. Universos ──────────────────────────────────────────────── */
.universos-section {
max-width: var(--container);
margin-inline: auto;
padding: var(--space-xl) 1.5rem;
}
.mosaic-grid {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 1.5px;
background: var(--border);
border: 1.5px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.concept-card {
display: flex;
flex-direction: column;
padding: 2.8rem 2.2rem;
background: var(--surface);
text-decoration: none;
position: relative;
overflow: hidden;
transition: background var(--dur) var(--ease);
}
.concept-card::after {
content: '';
position: absolute;
bottom:0; left:0; right:0; height:2px;
background: var(--gold-gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease);
}
.concept-card:hover::after { transform:scaleX(1); }
.concept-card:hover { background:var(--surface-2); }
.card-wedding { grid-column: 1 / 8; }
.card-corp { grid-column: 8 / 13; }
.card-small { grid-column: span 4; }
.card-icon {
font-size: 2.8rem; margin-bottom:1.4rem;
line-height:1; display:inline-block;
transition: transform .4s var(--ease);
}
.concept-card:hover .card-icon { transform:scale(1.15); }
.card-tag {
display: inline-block;
font-size: .58rem; font-weight:700;
letter-spacing: .22em; text-transform:uppercase;
color: var(--gold); margin-bottom:.5rem;
}
.concept-card h3 { font-size:clamp(1.3rem,2.5vw,1.9rem); margin-bottom:.7rem; }
.concept-card p { font-size:var(--size-sm); color:var(--text-muted); line-height:1.65; }
/* ── 15. Equipa ─────────────────────────────────────────────────── */
.equipa-section {
max-width: var(--container);
margin-inline: auto;
padding: var(--space-xl) 1.5rem;
}
.equipa-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem; align-items:center;
max-width: 1100px; margin:0 auto;
}
.equipa-text h2 { font-size:clamp(2rem,4vw,3.2rem); margin:1rem 0 1.2rem; }
.equipa-text p { margin-bottom:1rem; }
.equipa-membro {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.2rem 1.4rem;
margin-top: 1rem;
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.equipa-membro:hover { border-color:var(--border-hover); background:var(--glass-2); }
.membro-icon { font-size:1.5rem; flex-shrink:0; line-height:1; }
.membro-info { display:flex; flex-direction:column; gap:.2rem; }
.membro-info strong { font-size:.84rem; font-weight:700; color:var(--text-primary); }
.membro-info span { font-size:.78rem; color:var(--text-muted); }
.equipa-visual { position:relative; }
.equipa-visual img {
width:100%; border-radius:var(--radius-xl);
border:1px solid var(--border);
aspect-ratio:4/5; object-fit:cover;
transition: border-color var(--dur) var(--ease);
}
.equipa-visual:hover img { border-color:var(--border-hover); }
.exclusivity-badge {
position: absolute;
bottom:-1rem; right:-1rem;
width:92px; height:92px;
border-radius:50%;
background: var(--gold-gradient);
color:#000;
font-size:.52rem; font-weight:900;
letter-spacing:.1em; text-transform:uppercase;
text-align:center; line-height:1.5;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 8px 32px rgba(201,168,76,.45);
}
/* ── 16. Hub ────────────────────────────────────────────────────── */
.hub-section {
max-width: var(--container);
margin-inline: auto;
padding: 0 1.5rem var(--space-xl);
}
.hub-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 3.5rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center; gap:3rem;
max-width: 1100px; margin:0 auto;
position: relative; overflow:hidden;
transition: border-color var(--dur) var(--ease);
}
.hub-card::before {
content: '';
position:absolute; top:0; left:0; right:0; height:2px;
background: var(--gold-gradient);
}
.hub-card:hover { border-color:var(--border-hover); }
.hub-content h3 { font-size:clamp(1.6rem,3vw,2.2rem); margin:.5rem 0 1rem; }
.hub-features { margin-top:1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.hub-feature {
font-size: var(--size-sm); color:var(--text-muted);
padding-left:1.3rem; position:relative; line-height:1.5;
}
.hub-feature::before {
content:'✦'; position:absolute; left:0;
color:var(--gold); font-size:.65rem; top:.15rem;
}
/* ── 17. Locais ─────────────────────────────────────────────────── */
.locais-section {
max-width: var(--container);
margin-inline: auto;
text-align: center;
padding: var(--space-lg) 1.5rem;
}
.locais-section h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:.8rem; }
.locais-section .sub {
color:var(--text-muted); max-width:500px;
margin:0 auto 2.2rem; font-size:var(--size-sm);
}
.locais-list { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.local-chip {
padding: .5rem 1.6rem;
border: 1px solid var(--border-hover);
border-radius: var(--radius-full);
font-size: .72rem; font-weight:600; letter-spacing:.1em;
color: var(--gold); background:var(--gold-dim);
transition: all var(--dur) var(--ease); cursor:default;
}
.local-chip:hover { background:var(--gold); color:#000; border-color:var(--gold); }
/* ── 18. CTA ────────────────────────────────────────────────────── */
.cta-section { padding:var(--space-xl) 1.5rem; }
.cta-banner {
max-width: 880px; margin:0 auto;
text-align:center; padding:5rem 3rem;
border-radius: var(--radius-xl);
position:relative; overflow:hidden;
border: 1px solid var(--border);
background: var(--surface);
}
.cta-banner::before {
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse 80% 80% at 50% 50%,rgba(201,168,76,.09) 0%,transparent 70%);
pointer-events:none;
}
.cta-banner::after {
content:''; position:absolute;
top:0; left:0; right:0; height:2px;
background: var(--gold-gradient);
}
.cta-banner h2 { font-size:clamp(2rem,5vw,3.5rem); margin:1rem 0; position:relative; }
.cta-banner p { margin:0 auto 2.5rem; max-width:500px; font-size:var(--size-sm); color:var(--text-muted); position:relative; }
/* ── 19. Footer ─────────────────────────────────────────────────── */
.main-footer {
background: var(--surface);
border-top: 1px solid var(--border);
}
.footer-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 4rem; max-width:var(--container);
margin:0 auto; padding:5rem 1.5rem 3rem;
}
.footer-logo { height:34px; margin-bottom:1.2rem; opacity:.9; }
.footer-desc { font-size:var(--size-sm); color:var(--text-muted); line-height:1.8; }
.footer-column h4 {
font-size:.62rem; font-weight:700;
letter-spacing:.22em; text-transform:uppercase;
color:var(--gold); margin-bottom:1.5rem;
}
.footer-column ul { display:flex; flex-direction:column; gap:.65rem; }
.footer-column li a {
font-size:var(--size-sm); color:var(--text-muted);
transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.footer-column li a:hover { color:var(--gold); padding-left:.3rem; }
.footer-bottom {
max-width:var(--container); margin:0 auto;
padding:1.6rem 1.5rem;
border-top:1px solid var(--border);
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.7rem; color:var(--text-dim); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:.7rem; color:var(--text-dim); transition:color var(--dur) var(--ease); }
.footer-links a:hover { color:var(--gold); }
/* Back to top button */
#btnTop {
display: none;
position: fixed;
bottom: 96px; right: 28px;
z-index: 799;
width: 44px; height:44px;
border-radius: 50%;
border: 1.5px solid var(--border-hover);
background: rgba(2,2,2,.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--gold);
font-size: 1rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
box-shadow: 0 4px 20px rgba(0,0,0,.4);
align-items: center;
justify-content: center;
}
#btnTop:hover {
background: var(--gold-dim);
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(201,168,76,.3);
}
/* ── 20. WhatsApp ───────────────────────────────────────────────── */
.whatsapp-float {
position: fixed;
bottom: 2rem; right: 2rem;
z-index: 800; width:58px; height:58px;
background: #25D366; border-radius:50%;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 22px rgba(37,211,102,.4);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.whatsapp-float:hover { transform:scale(1.12) translateY(-2px); box-shadow:0 8px 36px rgba(37,211,102,.65); }
.whatsapp-float svg { width:30px; height:30px; fill:#fff; }
/* ── 21. Inner Page Heroes ──────────────────────────────────────── */
.page-hero,
.services-hero,
.gallery-hero,
.reviews-hero {
padding: calc(var(--header-h) + 4.5rem) 1.5rem 5rem;
min-height: 58vh;
display: flex; flex-direction:column;
align-items:center; justify-content:center;
text-align:center;
position:relative; overflow:hidden;
background: var(--black);
}
.page-hero::before,
.services-hero::before,
.gallery-hero::before,
.reviews-hero::before {
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse 70% 60% at 50% 100%,rgba(201,168,76,.09) 0%,transparent 60%);
pointer-events:none;
}
.page-hero h1,
.services-hero h1,
.gallery-hero h1,
.reviews-hero h1 {
font-size: clamp(2.5rem,7vw,6rem);
margin: 1rem 0 .5rem; letter-spacing:-.04em;
}
.page-hero h1 span,
.services-hero h1 span,
.gallery-hero h1 span,
.reviews-hero h1 span {
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-hero p,
.services-hero p,
.gallery-hero p,
.reviews-hero p { color:var(--text-muted); }
/* ── 22. Pricing ────────────────────────────────────────────────── */
.pricing-intro {
text-align:center; padding:var(--space-lg) 1.5rem;
max-width:700px; margin-inline:auto;
}
.price-headline {
font-size: clamp(3rem,8vw,6.5rem);
font-weight:900; letter-spacing:-.05em;
background: var(--gold-gradient);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
line-height:1; margin:1rem 0;
}
.price-divider {
width:60px; height:2px;
background:var(--gold-gradient);
margin:1.5rem auto;
border-radius:var(--radius-full);
}
/* ── 23. Packs ──────────────────────────────────────────────────── */
.packs-section {
max-width:var(--container); margin-inline:auto;
padding:0 1.5rem var(--space-xl);
}
.packs-grid {
display:grid; grid-template-columns:repeat(3,1fr);
gap:1.5rem; max-width:1100px; margin:0 auto;
}
.pack-card {
padding:2.8rem 2.2rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-xl);
display:flex; flex-direction:column; gap:1rem;
position:relative; overflow:hidden;
transition:
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.pack-card::before {
content:'';
position:absolute; top:0; left:0; right:0; height:1px;
background:var(--gold-gradient); opacity:.25;
transition: opacity var(--dur) var(--ease);
}
.pack-card:hover { border-color:var(--border-hover); transform:translateY(-8px); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.pack-card:hover::before { opacity:1; }
.pack-card.featured {
border-color:rgba(201,168,76,.45);
background:linear-gradient(160deg,#131313 0%,#0c0b09 100%);
box-shadow:0 8px 48px rgba(201,168,76,.12);
}
.pack-card.featured::before { opacity:1; }
.pack-card.featured:hover { border-color:var(--gold); box-shadow:0 24px 90px rgba(201,168,76,.28); }
.pack-badge {
display:inline-block; font-size:.58rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color:#000; background:var(--gold-gradient);
padding:.38em 1.3em; border-radius:var(--radius-full); align-self:flex-start;
}
.pack-name { font-size:1.5rem; font-weight:800; letter-spacing:-.01em; color:var(--text-primary); }
.pack-tagline { font-family:var(--font-display); font-size:1rem; font-style:italic; color:var(--gold); margin-top:-.3rem; }
.pack-features { flex:1; display:flex; flex-direction:column; gap:.72rem; margin:.6rem 0; }
.pack-features li {
font-size:.82rem; color:var(--text-muted);
padding-left:1.4rem; position:relative; line-height:1.5;
}
.pack-features li::before { content:'—'; position:absolute; left:0; color:var(--gold-dark); font-weight:700; }
.pack-features li.highlight { color:var(--text-primary); font-weight:600; }
.pack-features li.highlight::before { color:var(--gold); }
/* ── 24. Mini Reviews ───────────────────────────────────────────── */
.mini-reviews { max-width:var(--container); margin-inline:auto; padding:var(--space-xl) 1.5rem; }
.mini-reviews-grid {
display:grid; grid-template-columns:repeat(3,1fr);
gap:1.5rem; margin-top:3rem;
max-width:1100px; margin-left:auto; margin-right:auto;
}
.mini-review-card {
padding:2.2rem; background:var(--glass);
border:1px solid var(--border); border-radius:var(--radius-lg);
font-size:var(--size-sm); color:var(--text-secondary);
line-height:1.85; font-style:italic; position:relative;
transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mini-review-card::before {
content:'\201C'; position:absolute;
top:1rem; left:1.4rem;
font-size:3.5rem; color:var(--gold); opacity:.22;
line-height:1; font-family:Georgia,serif;
}
.mini-review-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.mini-review-cite {
display:block; margin-top:1.2rem;
font-size:.7rem; font-weight:700; font-style:normal;
letter-spacing:.1em; color:var(--gold);
}
/* ── 25. FAQ ────────────────────────────────────────────────────── */
.faq-section {
max-width:800px; margin:0 auto;
display:flex; flex-direction:column; gap:.8rem;
padding-bottom:var(--space-xl);
}
.faq-item {
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius-md); overflow:hidden;
transition:border-color var(--dur) var(--ease);
}
.faq-item[open] { border-color:var(--border-hover); }
.faq-item summary {
padding:1.4rem 1.8rem; font-size:.88rem; font-weight:600;
color:var(--text-primary); cursor:pointer; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:1rem;
transition:color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
content:'+'; font-size:1.5rem; font-weight:300;
color:var(--gold); flex-shrink:0; transition:transform .3s var(--ease);
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:var(--gold); }
.faq-item p { padding:0 1.8rem 1.5rem; font-size:var(--size-sm); color:var(--text-muted); line-height:1.85; }
/* ── 26. Portfolio ──────────────────────────────────────────────── */
.portfolio-section { max-width:var(--container); margin-inline:auto; padding:var(--space-md) 1.5rem var(--space-xl); }
.filter-bar { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.filter-btn {
padding:.5rem 1.6rem; font-size:.7rem; font-weight:700;
letter-spacing:.12em; text-transform:uppercase;
color:var(--text-muted); background:var(--glass);
border:1px solid var(--border); border-radius:var(--radius-full);
cursor:pointer; transition:all var(--dur) var(--ease);
font-family:var(--font-body);
}
.filter-btn:hover,
.filter-btn.active { color:#000; background:var(--gold-gradient); border-color:transparent; box-shadow:0 4px 24px rgba(201,168,76,.35); }
.portfolio-grid { columns:3; column-gap:1.2rem; margin-top:3rem; }
.portfolio-item {
break-inside:avoid; margin-bottom:1.2rem;
position:relative; overflow:hidden; border-radius:var(--radius-md);
cursor:pointer; border:1px solid var(--border);
transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity .4s ease, transform .4s ease;
}
.portfolio-item:hover { border-color:var(--border-hover); box-shadow:0 10px 50px rgba(0,0,0,.55); }
.portfolio-item img { width:100%; display:block; transition:transform .65s var(--ease), filter .65s var(--ease); }
.portfolio-item:hover img { transform:scale(1.07); filter:brightness(.65); }
.portfolio-overlay {
position:absolute; inset:0;
background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
display:flex; flex-direction:column; justify-content:flex-end; padding:1.6rem;
opacity:0; transition:opacity .4s var(--ease);
}
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.item-category {
font-size:.58rem; font-weight:700; letter-spacing:.22em;
text-transform:uppercase; color:var(--gold); margin-bottom:.3rem;
}
.item-title { font-size:1rem; font-weight:700; color:var(--text-primary); letter-spacing:-.01em; }
/* ── 27. Reviews ────────────────────────────────────────────────── */
.reviews-grid {
display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:1.5rem; max-width:1100px; margin:3rem auto 0;
}
.review-card {
padding:2.5rem; background:var(--surface);
border:1px solid var(--border); border-radius:var(--radius-xl); position:relative;
transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.review-card::before {
content:'\201C'; position:absolute; top:1rem; left:1.8rem;
font-size:4rem; color:var(--gold); opacity:.18;
line-height:1; font-family:Georgia,serif;
}
.review-card:hover { border-color:var(--border-hover); transform:translateY(-5px); }
.review-stars { font-size:.85rem; color:var(--gold); margin-bottom:1rem; letter-spacing:.1em; }
.review-text { font-size:var(--size-sm); color:var(--text-secondary); line-height:1.85; font-style:italic; margin-bottom:1.5rem; }
.review-author { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
/* ── 28. Bio (sobre.php) ────────────────────────────────────────── */
.bio-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; padding-bottom:var(--space-xl); }
.bio-text h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:1.5rem; }
.bio-text p { margin-bottom:1rem; }
.bio-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-box {
padding:2rem 1.5rem; background:var(--surface);
border:1px solid var(--border); border-radius:var(--radius-lg);
display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem;
transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stat-box:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.stat-box strong {
font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900;
background:var(--gold-gradient); -webkit-background-clip:text;
-webkit-text-fill-color:transparent; background-clip:text; line-height:1;
}
.stat-box span { font-size:.7rem; color:var(--text-muted); letter-spacing:.05em; }
/* ── 29. Utility classes ────────────────────────────────────────── */
.text-gold { color:var(--gold) !important; }
.text-muted-p { color:var(--text-muted); }
.text-center { text-align:center; }
.mt-sm { margin-top:var(--space-sm); }
.mt-md { margin-top:var(--space-md); }
.max-readable { max-width:700px; margin-inline:auto; }
/* ── 30. Scroll Reveal ──────────────────────────────────────────── */
@keyframes fadeInUp {
from { opacity:0; transform:translateY(36px); }
to { opacity:1; transform:translateY(0); }
}
.reveal {
opacity:0; transform:translateY(36px);
transition:opacity .85s var(--ease), transform .85s var(--ease);
animation:fadeInUp .85s var(--ease) 1.5s both;
}
.reveal.visible { opacity:1; transform:translateY(0); animation:none; }
.reveal-delay-1 { transition-delay:.13s; animation-delay:1.63s; }
.reveal-delay-2 { transition-delay:.26s; animation-delay:1.76s; }
.reveal-delay-3 { transition-delay:.39s; animation-delay:1.89s; }
/* ── 31. Media — 1024px ─────────────────────────────────────────── */
@media (max-width:1024px) {
.main-nav, .header-right { display:none; }
.btn-hamburger { display:flex; }
.stats-bar { grid-template-columns:repeat(2,1fr); }
.stat-item:nth-child(2) { border-right:none; }
.stat-item:nth-child(3) { border-top:1px solid var(--border); }
.mosaic-grid { grid-template-columns:1fr 1fr; }
.card-wedding, .card-corp { grid-column:span 2; }
.card-small { grid-column:span 1; }
.equipa-container { grid-template-columns:1fr; gap:3rem; }
.equipa-visual { max-width:480px; margin:0 auto; }
.packs-grid { grid-template-columns:1fr; max-width:480px; }
.mini-reviews-grid { grid-template-columns:1fr; }
.portfolio-grid { columns:2; }
.footer-container { grid-template-columns:1fr 1fr; gap:2.5rem; }
.hub-card { grid-template-columns:1fr; }
.bio-grid { grid-template-columns:1fr; gap:3rem; }
.click-alert, .logo-principal { display:block; }
}
/* ── 32. Media — 768px ──────────────────────────────────────────── */
@media (max-width:768px) {
:root {
--header-h: 65px;
--space-xl: 4rem;
--space-lg: 2.5rem;
}
.main-header { padding:0 1.2rem; }
.logo-topo { height:33px; }
.hero { padding:var(--header-h) 1rem 3rem; }
.hero-actions { flex-direction:column; align-items:center; }
.hero-actions .btn { width:100%; max-width:300px; }
.mosaic-grid { grid-template-columns:1fr; }
.card-wedding, .card-corp, .card-small { grid-column:span 1; }
.footer-container { grid-template-columns:1fr; gap:2rem; padding:3rem 1.2rem 2rem; }
.cta-banner { padding:3rem 1.5rem; }
.lock-timer { gap:.35rem; }
.lock-unit { min-width:62px; padding:.8rem .5rem; }
.packs-grid { max-width:100%; }
.pack-card.featured { order:-1; }
.equipa-visual { max-width:360px; }
.exclusivity-badge { width:76px; height:76px; font-size:.48rem; }
}
/* ── 33. Media — 480px ──────────────────────────────────────────── */
@media (max-width:480px) {
:root { --space-xl:3rem; }
.portfolio-grid { columns:1; }
.stats-bar { grid-template-columns:1fr; }
.stat-item { border-right:none; border-bottom:1px solid var(--border); }
.stat-item:last-child { border-bottom:none; }
.stat-item:nth-child(3) { border-top:none; }
.bio-stats { grid-template-columns:1fr 1fr; }
.lock-sep { display:none; }
.lock-unit { min-width:54px; padding:.7rem .4rem; }
.footer-bottom { flex-direction:column; text-align:center; }
.hub-card, .pack-card, .cta-banner { padding:2rem 1.2rem; }
}
/* ── Extras ─────────────────────────────────────────────────────── */
.footer-location { font-size:.7rem; color:var(--text-dim); }
/* ═══════════════════════════════════════════════════════════════
PÁGINAS DE SERVIÇO — componentes partilhados
═══════════════════════════════════════════════════════════════ */
/* ── Content Section ────────────────────────────────────────────── */
.content-section {
padding: var(--space-xl) var(--space-md);
}
.section-inner {
max-width: 1200px;
margin: 0 auto;
}
/* ── Two Column ─────────────────────────────────────────────────── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
.two-col-text h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem,3.5vw,2.6rem);
font-weight: 600;
color: var(--text-primary);
line-height: 1.25;
margin: 1rem 0 1.5rem;
}
.two-col-text p {
color: var(--text-secondary);
font-size: var(--size-sm);
line-height: 1.8;
margin-bottom: 1rem;
}
.two-col-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
}
/* ── Features Grid ──────────────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.feature-card {
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem 1.6rem;
transition: border-color .3s, transform .3s;
}
.feature-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: var(--size-base);
font-weight: 700;
color: var(--text-primary);
margin-bottom: .6rem;
letter-spacing: .03em;
}
.feature-card p {
font-size: var(--size-sm);
color: var(--text-secondary);
line-height: 1.7;
}
/* ── Timeline ───────────────────────────────────────────────────── */
.timeline-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 3rem;
position: relative;
}
.timeline-list::before {
content: '';
position: absolute;
left: 24px;
top: 24px;
bottom: 24px;
width: 1px;
background: linear-gradient(to bottom, var(--gold), transparent);
}
.timeline-item {
display: flex;
gap: 2rem;
padding: 1.8rem 0;
border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-marker {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
background: var(--gold-gradient);
color: var(--black);
font-size: var(--size-sm);
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.timeline-content h3 {
font-size: var(--size-base);
font-weight: 700;
color: var(--text-primary);
margin-bottom: .4rem;
}
.timeline-content p {
font-size: var(--size-sm);
color: var(--text-secondary);
line-height: 1.7;
}
/* ── CTA inner / actions ────────────────────────────────────────── */
.cta-inner {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
/* ── Pack Highlight (serviços) ──────────────────────────────────── */
.service-packs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.service-pack {
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2.2rem 1.8rem;
transition: border-color .3s, transform .3s;
}
.service-pack.highlight {
border-color: var(--gold);
background: rgba(201,168,76,.06);
position: relative;
}
.service-pack.highlight::before {
content: 'Mais Popular';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--gold-gradient);
color: var(--black);
font-size: .65rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: .3rem 1rem;
border-radius: var(--radius-full);
white-space: nowrap;
}
.service-pack h3 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: .4rem;
}
.service-pack .pack-price {
font-size: 2rem;
font-weight: 800;
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 1rem 0;
}
.service-pack ul {
list-style: none;
padding: 0;
margin: 1.2rem 0 1.8rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.service-pack ul li {
font-size: var(--size-sm);
color: var(--text-secondary);
padding-left: 1.4rem;
position: relative;
}
.service-pack ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--gold);
font-weight: 700;
}
/* ── Responsive — serviço pages ─────────────────────────────────── */
@media (max-width:1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.service-packs { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: 1fr; gap: 3rem; }
.two-col-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:768px) {
.features-grid { grid-template-columns: 1fr; }
.service-packs { grid-template-columns: 1fr; }
.two-col-stats { grid-template-columns: 1fr 1fr; }
.timeline-list::before { display: none; }
}
@media (max-width:480px) {
.two-col-stats { grid-template-columns: 1fr; }
.cta-actions { flex-direction: column; align-items: center; }
}
/* ═══════════════════════════════════════════════════
DROPDOWN NAVIGATION
═══════════════════════════════════════════════════ */
.nav-dropdown {
position: relative;
/* Criar ponte invisível para conectar botão ao menu */
}
.nav-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 12px;
pointer-events: auto;
z-index: 9998;
}
.nav-arrow { font-size: .6rem; opacity: .6; margin-left: .2rem; transition: transform .3s; display: inline-block; }
.nav-dropdown:hover .nav-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 560px;
background: rgba(12,12,12,.97);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(237,208,110,.06);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-8px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
pointer-events: none;
z-index: 9999;
padding-top: 8px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.dropdown-active .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Arrow pointer */
.nav-dropdown-menu::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
width: 12px;
height: 12px;
background: rgba(12,12,12,.97);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
transform: translateX(-50%) rotate(45deg);
}
.nav-dropdown-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
padding: .6rem;
}
.nav-dropdown-inner a {
display: flex;
align-items: center;
gap: .7rem;
padding: .75rem .9rem;
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text-secondary);
transition: background .2s, color .2s;
font-size: .82rem;
}
.nav-dropdown-inner a:hover {
background: rgba(237,208,110,.07);
color: var(--text-primary);
}
.nd-icon { font-size: 1.1rem; flex-shrink: 0; }
.nd-text { display: flex; flex-direction: column; }
.nd-text strong { font-size: .82rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.nd-text small { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
/* Mobile overlay group */
.nav-overlay-group { display: flex; flex-direction: column; }
.nav-overlay-label {
font-size: .65rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--gold);
padding: 1rem 2rem .3rem;
opacity: .7;
}
.nav-overlay-group a {
padding: .5rem 2rem .5rem 2.8rem !important;
font-size: .9rem !important;
color: var(--text-muted) !important;
}
.nav-overlay-group a:hover { color: var(--text-primary) !important; }
@media (max-width: 900px) {
.nav-dropdown-menu { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
PROTEÇÃO GLOBAL
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
}
img, video { pointer-events: none !important; -webkit-user-drag: none !important; }
@media print { body { display: none !important; } }
/* ═══════════════════════════════════════════════════════════════
LUXURY LOCK SCREEN — v3
═══════════════════════════════════════════════════════════════ */
@keyframes lkFadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes lkFadeOut { to{opacity:0;transform:scale(1.04);filter:blur(10px);visibility:hidden} }
@keyframes lkLogoGlow { 0%,100%{filter:drop-shadow(0 0 24px rgba(197,160,89,.25))} 50%{filter:drop-shadow(0 0 56px rgba(237,208,110,.7))} }
@keyframes lkGoldText { 0%,100%{color:#c5a059;text-shadow:0 0 12px rgba(197,160,89,.4)} 50%{color:#f0d890;text-shadow:0 0 32px rgba(237,208,110,.9),0 0 60px rgba(197,160,89,.4)} }
@keyframes lkShine { 0%{transform:translateX(-220%) rotate(20deg)} 100%{transform:translateX(220%) rotate(20deg)} }
@keyframes lkBarShine { 0%{left:-80%} 100%{left:120%} }
@keyframes lkScan { 0%{top:0;opacity:.5} 100%{top:100%;opacity:0} }
@keyframes lkPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes lkUnitHalo { 0%,100%{box-shadow:0 0 0 0 rgba(197,160,89,0),0 24px 48px rgba(0,0,0,.8)} 50%{box-shadow:0 0 28px 2px rgba(197,160,89,.08),0 24px 48px rgba(0,0,0,.8)} }
#lock-screen {
position:fixed;inset:0;z-index:999999;overflow:hidden;
background:radial-gradient(ellipse 120% 80% at 50% 30%,#0d0a04 0%,#020202 55%,#000 100%);
display:grid;grid-template-rows:1fr auto;align-items:center;
}
#lock-canvas { position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen; }
#lock-screen::before {
content:'';position:absolute;top:0;inset-inline:0;height:1px;z-index:5;
background:linear-gradient(90deg,transparent 5%,rgba(197,160,89,.4) 30%,#edd06e 50%,rgba(197,160,89,.4) 70%,transparent 95%);
}
#lock-screen::after {
content:'';position:absolute;bottom:0;inset-inline:0;height:1px;z-index:5;
background:linear-gradient(90deg,transparent 10%,rgba(197,160,89,.25) 40%,rgba(237,208,110,.5) 50%,rgba(197,160,89,.25) 60%,transparent 90%);
}
.lk-scan {
position:absolute;inset-inline:0;height:2px;z-index:6;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(197,160,89,.09),transparent);
animation:lkScan 14s linear infinite;
}
.lk-body {
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:5rem 2rem 2rem;z-index:3;
animation:lkFadeUp .8s cubic-bezier(.16,1,.3,1) both;
}
.lk-logo-wrap {
position:relative;overflow:hidden;margin-bottom:2.5rem;
animation:lkLogoGlow 5s ease-in-out infinite;
}
.lk-logo { width:min(280px,55vw);height:auto;display:block; }
.lk-logo-wrap::after {
content:'';position:absolute;inset:0;
background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
animation:lkShine 6s ease-in-out infinite;
}
.lk-logo-halo {
width:160px;height:16px;margin:-8px auto 2.8rem;
background:radial-gradient(ellipse,rgba(197,160,89,.28) 0%,transparent 70%);
filter:blur(6px);
}
.lk-ornament {
display:flex;align-items:center;gap:.8rem;
width:min(360px,80vw);margin:0 auto 1.8rem;
animation:lkPulse 4s ease-in-out infinite;
}
.lk-ornament-line { flex:1;height:1px; }
.lk-ornament-line:first-child { background:linear-gradient(90deg,transparent,rgba(197,160,89,.65)); }
.lk-ornament-line:last-child { background:linear-gradient(270deg,transparent,rgba(197,160,89,.65)); }
.lk-ornament-dot {
width:5px;height:5px;border-radius:50%;
background:#c5a059;box-shadow:0 0 8px rgba(197,160,89,.7);flex-shrink:0;
}
.lk-ornament-dot.sm { width:3px;height:3px;opacity:.5;box-shadow:none; }
.lk-eyebrow {
font-size:.7rem;font-weight:300;letter-spacing:14px;text-transform:uppercase;
color:rgba(255,255,255,.7);margin-bottom:.5rem;
}
.lk-eyebrow em { font-style:normal;font-weight:700;animation:lkGoldText 3s ease-in-out infinite; }
.lk-subtitle {
font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;font-weight:400;
color:rgba(197,160,89,.6);margin-bottom:2.4rem;
}
.lk-coming {
display:inline-flex;align-items:center;gap:.5rem;
padding:.5rem 1.8rem;margin-bottom:2rem;border-radius:100px;
border:1px solid rgba(197,160,89,.45);
background:linear-gradient(135deg,rgba(197,160,89,.1),rgba(197,160,89,.04));
font-size:.58rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
color:#d4aa60;box-shadow:0 0 24px rgba(197,160,89,.12),inset 0 1px 0 rgba(255,255,255,.06);
}
.lk-coming::before,.lk-coming::after {
content:'';width:4px;height:4px;border-radius:50%;
background:#c5a059;box-shadow:0 0 6px rgba(197,160,89,.8);flex-shrink:0;
}
.lk-timer {
display:flex;align-items:flex-start;justify-content:center;
gap:.8rem;margin-bottom:3rem;
}
.lk-unit {
display:flex;flex-direction:column;align-items:center;
min-width:min(114px,22vw);padding:1.8rem 1.2rem 1.4rem;
background:linear-gradient(175deg,rgba(18,13,4,.9) 0%,rgba(6,5,2,.95) 100%);
border:1px solid rgba(197,160,89,.3);
border-radius:18px;position:relative;overflow:hidden;
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
animation:lkUnitHalo 5s ease-in-out infinite;
transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s;
}
.lk-unit::before {
content:'';position:absolute;top:0;inset-inline:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.lk-unit::after {
content:'';position:absolute;top:0;left:0;width:20px;height:20px;
border-top:1px solid rgba(197,160,89,.6);border-left:1px solid rgba(197,160,89,.6);
border-radius:18px 0 0 0;
}
.lk-unit-br {
position:absolute;bottom:0;right:0;width:20px;height:20px;
border-bottom:1px solid rgba(197,160,89,.6);border-right:1px solid rgba(197,160,89,.6);
border-radius:0 0 18px 0;pointer-events:none;
}
.lk-unit:hover { transform:translateY(-6px);border-color:rgba(197,160,89,.6); }
.lk-unit span {
display:block;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:200;
color:#fff;line-height:1;letter-spacing:-2px;
text-shadow:0 2px 24px rgba(255,255,255,.2);
}
.lk-unit p {
margin-top:.7rem;font-size:.46rem;font-weight:800;
letter-spacing:.35em;text-transform:uppercase;color:#c5a059;
}
.lk-sep {
font-size:3rem;font-weight:100;line-height:1;color:#c5a059;
padding-top:1.6rem;align-self:flex-start;
text-shadow:0 0 16px rgba(197,160,89,.6);
}
.lk-progress-wrap { display:flex;flex-direction:column;align-items:center;gap:.7rem; }
.lk-progress-label {
font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;
color:rgba(197,160,89,.65);font-weight:700;
}
.lk-progress {
width:min(340px,70vw);height:2px;
background:rgba(255,255,255,.06);border-radius:2px;
position:relative;overflow:hidden;
}
.lk-bar {
height:100%;width:0%;border-radius:2px;
background:linear-gradient(90deg,#3d2c0c,#a07830,#edd06e,#fff8e0,#edd06e);
box-shadow:0 0 14px rgba(237,208,110,.8),0 0 28px rgba(197,160,89,.4);
transition:width 1.4s cubic-bezier(.16,1,.3,1);position:relative;
}
.lk-bar::after {
content:'';position:absolute;inset-block:0;left:-80%;width:60%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
animation:lkBarShine 2s ease-in-out infinite;
}
.lk-foot {
z-index:3;text-align:center;padding:2rem 2rem 2.5rem;
animation:lkFadeUp 1.2s .3s cubic-bezier(.16,1,.3,1) both;
}
.lk-icons {
display:flex;justify-content:center;align-items:center;
gap:1.4rem;margin-bottom:1.6rem;flex-wrap:wrap;
}
.lk-icon {
display:inline-flex;flex-direction:column;align-items:center;gap:.45rem;
text-decoration:none;transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.lk-icon-circle {
width:46px;height:46px;border-radius:50%;
background:rgba(197,160,89,.06);border:1px solid rgba(197,160,89,.22);
display:flex;align-items:center;justify-content:center;
transition:background .4s,border-color .4s,box-shadow .4s;
}
.lk-icon svg { width:18px;height:18px;fill:rgba(255,255,255,.55);transition:fill .35s; }
.lk-icon-lbl {
font-size:.42rem;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.35);font-weight:700;transition:color .35s;
}
.lk-icon:hover { transform:translateY(-6px); }
.lk-icon:hover .lk-icon-circle {
background:rgba(197,160,89,.14);border-color:rgba(197,160,89,.6);
box-shadow:0 0 20px rgba(197,160,89,.25);
}
.lk-icon:hover svg { fill:#edd06e; }
.lk-icon:hover .lk-icon-lbl { color:rgba(197,160,89,.8); }
.lk-divider-foot {
width:120px;height:1px;margin:0 auto 1.2rem;
background:linear-gradient(90deg,transparent,rgba(197,160,89,.3),transparent);
}
.lk-copy {
font-size:.5rem;letter-spacing:.2em;color:rgba(255,255,255,.18);
text-transform:uppercase;line-height:2;
}
.lk-copy a { color:rgba(197,160,89,.5);text-decoration:none;transition:.3s; }
.lk-copy a:hover { color:#c5a059; }
body.unlocked #lock-screen { animation:lkFadeOut 1s cubic-bezier(.77,0,.175,1) forwards;pointer-events:none; }
/* ═══════════════════════════════════════════════════════════════
HOMEPAGE — HERO
═══════════════════════════════════════════════════════════════ */
.hp-hero {
min-height:100vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;
position:relative;overflow:hidden;
padding:10rem 1.5rem 6rem;text-align:center;
}
.hp-hero::before {
content:'';position:absolute;top:50%;left:50%;
transform:translate(-50%,-55%);
width:min(900px,120vw);height:min(900px,120vw);
background:radial-gradient(ellipse,rgba(197,160,89,.055) 0%,transparent 65%);
pointer-events:none;z-index:0;
}
.hp-hero > * { position:relative;z-index:1; }
.hp-hero-eyebrow {
display:inline-flex;align-items:center;gap:.7rem;
font-size:.68rem;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold);margin-bottom:2rem;
}
.hp-hero-eyebrow::before,.hp-hero-eyebrow::after {
content:'';display:block;width:36px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold));
}
.hp-hero-eyebrow::after { transform:scaleX(-1); }
.hp-hero h1 {
font-family:var(--font-display);
font-size:clamp(3.2rem,9vw,7.5rem);
font-weight:300;line-height:1.08;
color:var(--text-primary);
margin-bottom:1.6rem;letter-spacing:-.02em;
}
.hp-hero h1 em {
font-style:italic;
background:linear-gradient(135deg,#7A5C1E 0%,#EDD06E 48%,#C9A84C 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hp-hero-sub {
font-family:var(--font-display);font-style:italic;
font-size:clamp(1.1rem,2.2vw,1.5rem);
color:rgba(255,255,255,.55);max-width:600px;margin:0 auto 3rem;
line-height:1.6;font-weight:300;
}
.hp-hero-actions {
display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:5rem;
}
.hp-scroll-hint {
position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:.5rem;
color:rgba(255,255,255,.2);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
animation:fadeInUp 2s 1.5s both;
}
.hp-scroll-hint::after {
content:'';display:block;width:1px;height:40px;
background:linear-gradient(to bottom,rgba(197,160,89,.5),transparent);
animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0%,100%{opacity:.4;transform:scaleY(1)}
50% {opacity:1; transform:scaleY(.5)}
}
/* ═══════════════════════════════════════════════════════════════
MANIFESTO
═══════════════════════════════════════════════════════════════ */
.manifesto-section { padding:8rem 1.5rem;position:relative;overflow:hidden; }
.manifesto-inner { max-width:980px;margin:0 auto;text-align:center; }
.manifesto-quote {
font-family:var(--font-display);font-style:italic;
font-size:clamp(1.8rem,4vw,3rem);font-weight:300;
color:var(--text-primary);line-height:1.4;margin-bottom:2rem;position:relative;
}
.manifesto-quote::before {
content:'"';position:absolute;top:-.5em;left:-.1em;
font-size:6em;color:rgba(197,160,89,.06);
font-family:Georgia,serif;line-height:1;pointer-events:none;
}
.manifesto-body {
color:var(--text-secondary);max-width:640px;margin:0 auto 3rem;
font-size:1rem;line-height:1.9;
}
.manifesto-line {
display:block;width:60px;height:1px;margin:0 auto;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
/* ═══════════════════════════════════════════════════════════════
SERVICES MOSAIC
═══════════════════════════════════════════════════════════════ */
.services-mosaic { padding:6rem 1.5rem; }
.mosaic-wrap { max-width:1200px;margin:0 auto; }
.mosaic-grid-2 {
display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:var(--border);border:1px solid var(--border);
border-radius:var(--radius-xl);overflow:hidden;
}
.sc-card {
display:flex;flex-direction:column;justify-content:flex-end;
padding:2.5rem;min-height:280px;position:relative;overflow:hidden;
background:var(--glass);cursor:pointer;
transition:background .4s ease;text-decoration:none;color:var(--text-primary);
}
.sc-card::before {
content:'';position:absolute;inset:0;
background:linear-gradient(160deg,transparent 40%,rgba(0,0,0,.75));
z-index:0;transition:opacity .4s;
}
.sc-card:hover { background:rgba(197,160,89,.06); }
.sc-card:hover::after {
content:'';position:absolute;inset:0;
border:1px solid rgba(197,160,89,.3);pointer-events:none;
}
.sc-card > * { position:relative;z-index:1; }
.sc-card-icon {
font-size:2.2rem;margin-bottom:auto;padding-top:.5rem;
filter:drop-shadow(0 0 8px rgba(197,160,89,.3));
}
.sc-card-tag {
font-size:.6rem;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;display:block;
}
.sc-card h3 {
font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,1.9rem);
font-weight:600;margin-bottom:.5rem;line-height:1.2;
}
.sc-card p { font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.7;max-width:320px; }
.sc-card-arrow {
display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--gold);opacity:0;transform:translateX(-6px);
transition:opacity .3s,transform .3s;
}
.sc-card:hover .sc-card-arrow { opacity:1;transform:translateX(0); }
.sc-card-hero { grid-column:span 1;min-height:340px; }
.sc-card-sm { min-height:220px; }
.sc-small-row {
grid-column:1/-1;display:grid;
grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
}
.sc-card-sm .sc-card-icon { font-size:1.8rem; }
.sc-card-sm h3 { font-size:clamp(1rem,1.8vw,1.2rem); }
@media(max-width:900px){
.mosaic-grid-2 { grid-template-columns:1fr; }
.sc-small-row { grid-template-columns:repeat(2,1fr); }
.sc-card-hero { min-height:260px; }
}
@media(max-width:500px){
.sc-small-row { grid-template-columns:1fr 1fr; }
.sc-card-sm { min-height:180px; }
}
/* ═══════════════════════════════════════════════════════════════
DIFFERENTIATORS
═══════════════════════════════════════════════════════════════ */
.diff-section { padding:7rem 1.5rem;background:rgba(255,255,255,.018); }
.diff-inner { max-width:1100px;margin:0 auto; }
.diff-grid {
display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:1px;background:var(--border);
border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;
max-width:1100px;margin:3rem auto 0;
}
.diff-item { padding:2.5rem 2rem;background:rgba(10,10,10,.95);transition:background .3s; }
.diff-item:hover { background:rgba(197,160,89,.04); }
.diff-icon { font-size:1.8rem;margin-bottom:1.2rem;display:block;filter:drop-shadow(0 0 6px rgba(197,160,89,.2)); }
.diff-item h4 { font-size:.9rem;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem; }
.diff-item p { font-size:.82rem;color:var(--text-secondary);line-height:1.8; }
/* ═══════════════════════════════════════════════════════════════
TEAM SECTION
═══════════════════════════════════════════════════════════════ */
.team-section {
padding:8rem 1.5rem;max-width:1100px;margin:0 auto;
display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
}
.team-text .label-gold { display:block;margin-bottom:1.2rem; }
.team-text h2 {
font-family:var(--font-display);font-size:clamp(2rem,4vw,3.2rem);
font-weight:300;line-height:1.2;margin-bottom:1.5rem;color:var(--text-primary);
}
.team-text p { color:var(--text-secondary);line-height:1.9;margin-bottom:2rem; }
.team-members { display:flex;flex-direction:column;gap:1.2rem; }
.team-member {
display:flex;align-items:flex-start;gap:1rem;
padding:1.2rem;border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--glass);transition:border-color .3s;
}
.team-member:hover { border-color:rgba(197,160,89,.3); }
.team-member-icon {
font-size:1.5rem;flex-shrink:0;
width:46px;height:46px;display:flex;align-items:center;justify-content:center;
background:rgba(197,160,89,.08);border-radius:var(--radius-md);
}
.team-member strong { display:block;font-size:.88rem;color:var(--text-primary);margin-bottom:.25rem; }
.team-member span { font-size:.8rem;color:var(--text-secondary);line-height:1.6; }
.team-visual {
position:relative;border-radius:var(--radius-xl);overflow:hidden;
border:1px solid var(--border);aspect-ratio:4/5;
}
.team-visual img {
width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(20%) contrast(1.05);transition:filter .5s,transform .5s;
}
.team-visual:hover img { filter:grayscale(0%);transform:scale(1.03); }
.team-badge {
position:absolute;bottom:1.5rem;right:1.5rem;
background:rgba(4,4,4,.88);border:1px solid rgba(197,160,89,.4);
backdrop-filter:blur(12px);padding:.8rem 1.2rem;
border-radius:var(--radius-lg);text-align:center;
}
.team-badge strong {
display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);
}
.team-badge span {
display:block;font-size:.58rem;color:rgba(255,255,255,.45);
letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem;
}
@media(max-width:860px){
.team-section { grid-template-columns:1fr;gap:3rem; }
.team-visual { aspect-ratio:16/9; }
}
/* ═══════════════════════════════════════════════════════════════
COVERAGE
═══════════════════════════════════════════════════════════════ */
.coverage-section { padding:6rem 1.5rem;max-width:900px;margin:0 auto;text-align:center; }
.coverage-chips { display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2.5rem; }
.c-chip {
padding:.55rem 1.4rem;border:1px solid var(--border);border-radius:100px;
font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--text-secondary);background:var(--glass);transition:all .3s;
}
.c-chip:hover { border-color:rgba(197,160,89,.4);color:var(--gold);background:rgba(197,160,89,.06); }
.c-chip-main { border-color:rgba(197,160,89,.4);color:var(--gold);background:rgba(197,160,89,.07); }
/* ═══════════════════════════════════════════════════════════════
HUB DIGITAL
═══════════════════════════════════════════════════════════════ */
.hub-wrap { max-width:1100px;margin:0 auto;padding:6rem 1.5rem; }
.hub-card-luxury {
display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center;
padding:4rem;border:1px solid var(--border);border-radius:var(--radius-xl);
background:linear-gradient(135deg,rgba(197,160,89,.04) 0%,rgba(10,10,10,.98) 60%);
position:relative;overflow:hidden;
}
.hub-card-luxury::before {
content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
background:linear-gradient(to bottom,transparent,var(--gold),transparent);
}
.hub-card-luxury h3 {
font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);
font-weight:600;margin:.8rem 0 1.2rem;color:var(--text-primary);
}
.hub-card-luxury p { color:var(--text-secondary);line-height:1.8;max-width:520px; }
.hub-feats { display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem; }
.hub-feat { display:flex;align-items:center;gap:.8rem;font-size:.82rem;color:var(--text-secondary); }
.hub-feat::before {
content:'';flex-shrink:0;width:5px;height:5px;border-radius:50%;
background:var(--gold);box-shadow:0 0 6px rgba(197,160,89,.5);
}
.hub-cta-area { flex-shrink:0;text-align:center; }
.hub-badge-tech { margin-top:1rem;font-size:.58rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(197,160,89,.5); }
@media(max-width:740px){ .hub-card-luxury { grid-template-columns:1fr;gap:2rem;padding:2.5rem; } }
/* ═══════════════════════════════════════════════════════════════
INSTAGRAM SECTION — classes (substitui inline styles)
═══════════════════════════════════════════════════════════════ */
.instagram-section { padding:5rem 1.5rem;max-width:1000px;margin:0 auto;text-align:center; }
.instagram-grid {
display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
margin-bottom:2.5rem;max-width:600px;margin-inline:auto;
}
.insta-cell {
aspect-ratio:1;background:var(--glass);border:1px solid var(--border);
border-radius:var(--radius-lg);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:.6rem;
text-decoration:none;transition:border-color .3s,transform .3s;
}
.insta-cell:hover { border-color:rgba(237,208,110,.4);transform:scale(1.03); }
.insta-cell-icon { font-size:2rem;pointer-events:none; }
.insta-cell-label { font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted); }
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE HOMEPAGE — 1024px (tablet landscape)
═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
.hp-hero { padding:8rem 2rem 5rem; }
.diff-grid { grid-template-columns:repeat(2,1fr); }
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE HOMEPAGE — 768px (tablet / large mobile)
═══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
/* Lock screen */
.lk-body { padding:3.5rem 1.5rem 1.5rem; }
.lk-timer { gap:.5rem; }
.lk-unit { min-width:min(80px,20vw);padding:1.4rem .9rem 1.1rem; }
.lk-sep { font-size:2.2rem;padding-top:1.3rem; }
.lk-eyebrow { font-size:.62rem;letter-spacing:8px; }
.lk-subtitle { font-size:.52rem;letter-spacing:.15em; }
.lk-coming { font-size:.54rem;letter-spacing:.2em;padding:.45rem 1.4rem; }
.lk-foot { padding:1.5rem 1.5rem 2rem; }
.lk-icons { gap:1.1rem; }
/* Hero */
.hp-hero { padding:7rem 1.5rem 4rem; }
.hp-hero-actions { flex-direction:column;align-items:center; }
.hp-hero-actions .btn { width:100%;max-width:320px;justify-content:center; }
.hp-hero-sub { font-size:clamp(1rem,3.5vw,1.3rem); }
/* Sections padding */
.manifesto-section { padding:5rem 1.5rem; }
.services-mosaic { padding:4rem 1.5rem; }
.diff-section { padding:5rem 1.5rem; }
.team-section { padding:5rem 1.5rem; }
.coverage-section { padding:4rem 1.5rem; }
.hub-wrap { padding:4rem 1.5rem; }
.instagram-section { padding:4rem 1.5rem; }
/* CTA */
.cta-actions { flex-direction:column;align-items:center; }
.cta-actions .btn { width:100%;max-width:320px;justify-content:center; }
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE HOMEPAGE — 480px (mobile)
═══════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
/* Lock screen */
.lk-body { padding:2.5rem 1rem 1rem; }
.lk-timer { gap:.3rem; }
.lk-unit {
min-width:min(66px,17vw);padding:.9rem .5rem .7rem;
border-radius:14px;
}
.lk-unit span { font-size:clamp(1.7rem,7.5vw,2.4rem); }
.lk-unit p { font-size:.4rem;letter-spacing:.25em; }
.lk-sep { font-size:1.6rem;padding-top:.9rem; }
.lk-eyebrow { font-size:.54rem;letter-spacing:5px; }
.lk-ornament { width:min(260px,82vw); }
.lk-logo { width:min(190px,52vw); }
.lk-coming { font-size:.48rem;letter-spacing:.14em;padding:.4rem 1.1rem; }
.lk-progress { width:86vw; }
.lk-icon-circle { width:40px;height:40px; }
.lk-icon svg { width:15px;height:15px; }
.lk-icon-lbl { font-size:.38rem; }
.lk-icons { gap:.75rem; }
.lk-foot { padding:1rem 1rem 1.8rem; }
.lk-copy { font-size:.42rem;letter-spacing:.12em; }
/* Hero */
.hp-hero { padding:6rem 1rem 3rem; }
.hp-hero-eyebrow { font-size:.58rem;letter-spacing:.1em; }
.hp-hero-eyebrow::before,.hp-hero-eyebrow::after { width:18px; }
.hp-scroll-hint { bottom:1.5rem; }
/* Sections padding */
.manifesto-section { padding:3.5rem 1rem; }
.services-mosaic { padding:3rem 1rem; }
.diff-section { padding:3.5rem 1rem; }
.team-section { padding:3.5rem 1rem; }
.coverage-section { padding:3rem 1rem; }
.hub-wrap { padding:3rem 1rem; }
.instagram-section { padding:3rem 1rem; }
/* Manifesto */
.manifesto-quote { font-size:clamp(1.4rem,5.5vw,2rem); }
.manifesto-quote::before { font-size:3em; }
.manifesto-body { font-size:.88rem; }
/* Services cards */
.sc-card { padding:1.8rem 1.5rem; }
/* Differentiators → single column */
.diff-grid { grid-template-columns:1fr; }
.diff-item { padding:1.8rem 1.5rem; }
/* Team */
.team-member { padding:1rem; gap:.8rem; }
.team-member-icon { width:40px;height:40px;font-size:1.2rem; }
/* Hub */
.hub-card-luxury { padding:2rem 1.5rem; }
.hub-card-luxury h3 { font-size:clamp(1.4rem,5vw,1.9rem); }
/* Instagram → 2 colunas */
.instagram-grid { grid-template-columns:1fr 1fr;max-width:100%; }
/* CTA */
.cta-inner h2 { font-size:clamp(1.5rem,6.5vw,2.2rem); }
.cta-inner p { font-size:.85rem; }
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE HOMEPAGE — 360px (telemóveis muito pequenos)
/* ═══════════════════════════════════════════════════════════════
DJ TRIEF — v10 | 2026 Motion & Depth
@property · Shimmer · Glow · Scroll-driven · 3D hover
═══════════════════════════════════════════════════════════════ */
/* ── Animatable CSS custom properties ── */
@property --shimmer-pos {
syntax: '';
initial-value: -120%;
inherits: false;
}
@property --border-angle {
syntax: '';
initial-value: 135deg;
inherits: false;
}
/* ── Global keyframes ── */
@keyframes borderRotate2026 {
to { --border-angle: 495deg; }
}
@keyframes glowBreath {
0%,100% { box-shadow: 0 0 18px rgba(201,168,76,.1), 0 4px 28px rgba(0,0,0,.5); }
50% { box-shadow: 0 0 40px rgba(201,168,76,.3), 0 8px 48px rgba(0,0,0,.6); }
}
@keyframes goldTextPulse {
0%,100% { text-shadow: 0 0 12px rgba(201,168,76,.2); }
50% { text-shadow: 0 0 32px rgba(201,168,76,.6), 0 0 60px rgba(201,168,76,.18); }
}
@keyframes floatGently {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes gradientDrift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes fadeBodyIn {
from { opacity:0; }
to { opacity:1; }
}
/* ── Body entrance ── */
body { animation: fadeBodyIn .55s ease both; }
body.locked { animation: none; }
/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #020202; }
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgba(201,168,76,.2), rgba(201,168,76,.55));
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.7); }
/* ── Text selection ── */
::selection { background: rgba(201,168,76,.28); color: #F5F0E8; }
/* ── Better .reveal ── */
.reveal {
opacity: 0 !important;
transform: translateY(28px) !important;
filter: blur(6px) !important;
transition:
opacity .82s cubic-bezier(.16,1,.3,1),
transform .82s cubic-bezier(.16,1,.3,1),
filter .82s ease !important;
animation: none !important;
}
.reveal.visible {
opacity: 1 !important;
transform: translateY(0) !important;
filter: blur(0) !important;
}
/* ── Label gold animated border ── */
.label-gold {
border: 2px solid #C9A84C !important;
position: relative !important;
animation: glowBreath 4s ease-in-out infinite !important;
transition: transform .35s ease, box-shadow .35s ease !important;
}
.label-gold::before {
display: none !important;
}
.label-gold:hover {
transform: translateY(-2px) scale(1.04) !important;
box-shadow: 0 8px 28px rgba(201,168,76,.4) !important;
}
/* ── Buttons shimmer + glow ── */
.btn {
position: relative;
isolation: isolate;
overflow: hidden;
transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, filter .3s ease !important;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent calc(var(--shimmer-pos) - 30%),
rgba(255,255,255,.26) var(--shimmer-pos),
transparent calc(var(--shimmer-pos) + 30%)
);
pointer-events: none;
transition: --shimmer-pos 0s;
}
.btn:hover::after {
--shimmer-pos: 140%;
transition: --shimmer-pos .55s ease;
}
.btn-gold {
background-size: 200% 200% !important;
background-image: linear-gradient(135deg, #7A5C1E 0%, #EDD06E 40%, #C9A84C 60%, #7A5C1E 100%) !important;
animation: gradientDrift 5s ease infinite;
box-shadow: 0 4px 28px rgba(201,168,76,.3), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-gold:hover {
transform: translateY(-4px) scale(1.02) !important;
box-shadow: 0 16px 56px rgba(201,168,76,.55), 0 0 0 1px rgba(201,168,76,.35) !important;
filter: brightness(1.07) !important;
}
.btn-gold:active { transform: translateY(-1px) scale(.99) !important; }
.btn-outline {
background: rgba(201,168,76,.03) !important;
border: 1px solid rgba(201,168,76,.4) !important;
transition: all .4s cubic-bezier(.16,1,.3,1) !important;
}
.btn-outline:hover {
background: rgba(201,168,76,.1) !important;
border-color: rgba(201,168,76,.75) !important;
transform: translateY(-4px) !important;
box-shadow: 0 12px 44px rgba(201,168,76,.25), 0 0 0 1px rgba(201,168,76,.12) !important;
color: #EDD06E !important;
}
/* ── Nav sliding underline ── */
.main-nav a {
position: relative;
background: none !important;
color: rgba(245,240,232,.5) !important;
transition: color .3s ease !important;
}
.main-nav a::after {
content: '';
position: absolute;
bottom: 4px; left: 50%; right: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
transition: left .35s cubic-bezier(.16,1,.3,1), right .35s cubic-bezier(.16,1,.3,1);
}
.main-nav a:hover,
.main-nav a.active { color: var(--gold) !important; }
.main-nav a:hover::after,
.main-nav a.active::after { left: 10%; right: 10%; }
/* ── Section header animated underline ── */
.section-header > h2 {
position: relative;
display: inline-block;
}
.section-header > h2::after {
content: '';
position: absolute;
bottom: -.35em; left: 50%; right: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,168,76,.7), transparent);
transition: left .75s cubic-bezier(.16,1,.3,1), right .75s cubic-bezier(.16,1,.3,1);
}
.section-header.visible > h2::after,
.section-header:hover > h2::after { left: 5%; right: 5%; }
/* ── Stats modernised ── */
.stat-item {
position: relative;
overflow: hidden;
transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s ease !important;
}
.stat-item::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(201,168,76,.1) 0%, transparent 70%);
opacity: 0;
transition: opacity .45s ease;
pointer-events: none;
}
.stat-item:hover { transform: translateY(-3px); background: transparent !important; }
.stat-item:hover::before { opacity: 1; }
.stat-item h3 { animation: goldTextPulse 5s ease-in-out infinite; }
/* ── Concept cards ── */
.concept-card {
transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, background .3s ease !important;
}
.concept-card:hover {
transform: translateY(-8px) scale(1.008) !important;
box-shadow: 0 32px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* ── Hub cards ── */
.hub-card {
transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .45s ease !important;
}
.hub-card:hover {
transform: translateY(-7px) !important;
box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.14) !important;
}
.hub-card-num { transition: transform .4s cubic-bezier(.16,1,.3,1), filter .4s ease; }
.hub-card:hover .hub-card-num {
transform: scale(1.08) translateY(-3px);
filter: drop-shadow(0 0 16px rgba(201,168,76,.5));
}
/* ── Diff items ── */
.diff-item {
transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .4s ease !important;
}
.diff-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(201,168,76,.1) !important;
}
.diff-icon { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.diff-item:hover .diff-icon { transform: scale(1.22) translateY(-3px); }
/* ── Price cards ── */
.price-card {
transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .45s ease !important;
}
.price-card:hover {
transform: translateY(-10px) !important;
box-shadow: 0 36px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.2) !important;
}
.price-card-featured {
animation: glowBreath 4s ease-in-out infinite !important;
border: 1px solid rgba(201,168,76,.2) !important;
}
/* ── Partner cards ── */
.partner-card {
transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .4s ease !important;
}
.partner-card:hover {
transform: translateY(-5px) scale(1.02) !important;
box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.15) !important;
}
.partner-icon { transition: transform .4s cubic-bezier(.16,1,.3,1); display:block; }
.partner-card:hover .partner-icon { transform: scale(1.25) rotate(-5deg); }
/* ── Coverage tags ── */
.cov-tag {
transition: all .35s cubic-bezier(.16,1,.3,1) !important;
}
.cov-tag:hover,
.cov-tag.highlight {
transform: translateY(-3px) scale(1.05) !important;
box-shadow: 0 8px 24px rgba(201,168,76,.18) !important;
}
/* ── FAQ vertical gold bar ── */
.faq-q {
position: relative;
overflow: hidden;
}
.faq-q::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #7A5C1E, #EDD06E, #C9A84C);
transform: scaleY(0);
transform-origin: bottom;
transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-q::before { transform: scaleY(1); }
.faq-item.open { background: rgba(201,168,76,.03) !important; }
.faq-item.open .faq-q { color: var(--gold-light) !important; }
/* ── Team visual ── */
.team-visual {
transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease !important;
}
.team-visual:hover {
transform: translateY(-10px) scale(1.012) !important;
box-shadow: 0 50px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(201,168,76,.22) !important;
}
/* ── Gallery items ── */
.gallery-item {
transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease !important;
}
.gallery-item:hover {
transform: scale(.97) !important;
box-shadow: 0 0 0 2px rgba(201,168,76,.45) !important;
z-index: 2;
}
/* ── Music embed ── */
.music-embed {
transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.music-embed:hover {
transform: translateY(-5px);
box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.15);
}
/* ── Instagram photos ── */
.insta-photo {
transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .4s ease !important;
}
.insta-photo:hover {
transform: scale(.94) !important;
box-shadow: 0 0 0 2px rgba(201,168,76,.45), 0 12px 36px rgba(0,0,0,.4) !important;
}
/* ── WhatsApp float ── */
.whatsapp-float {
animation: floatGently 3.5s ease-in-out infinite !important;
transition: transform .3s ease, box-shadow .3s ease !important;
}
.whatsapp-float:hover {
animation-play-state: paused !important;
transform: scale(1.12) !important;
box-shadow: 0 16px 44px rgba(37,211,102,.5) !important;
}
/* ── How steps ── */
.how-num { transition: all .4s cubic-bezier(.16,1,.3,1); }
.how-step:hover .how-num {
background: rgba(201,168,76,.18) !important;
border-color: rgba(201,168,76,.8) !important;
box-shadow: 0 0 28px rgba(201,168,76,.35), 0 0 0 4px rgba(201,168,76,.08) !important;
transform: scale(1.1);
}
/* ── sc-card mosaic ── */
.sc-card {
transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s ease !important;
}
.sc-card-hero:hover { transform: scale(1.012) !important; }
.sc-card-sm:hover { transform: scale(1.02) !important; }
/* ── Dividers animate ── */
.divider-gold { animation: glowBreath 5s ease-in-out infinite; opacity: .4; }
/* ── Scroll-driven animations ── */
@supports (animation-timeline: scroll()) {
.hp-hero-bg {
animation: parallaxDown linear both;
animation-timeline: scroll(nearest block);
animation-range: 0 60vh;
}
@keyframes parallaxDown {
to { transform: translateY(22%) scale(1.06); }
}
}
/* ── Touch devices — no lift effects ── */
@media (hover: none) {
.btn-gold:hover,
.btn-outline:hover,
.concept-card:hover,
.hub-card:hover,
.diff-item:hover,
.price-card:hover,
.partner-card:hover,
.team-visual:hover,
.gallery-item:hover,
.insta-photo:hover { transform: none !important; }
.label-gold::before { animation: none; }
.btn::after { display: none; }
}
/* ── Responsive ── */
@media (max-width: 768px) {
.btn { padding: .88em 2.1em; }
.section-header > h2::after { display: none; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.reveal, .reveal.visible {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
body { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
GRID COM SETAS — Momentos & Combinações (Tudo Numa Linha)
═══════════════════════════════════════════════════════════════ */
/* Grid horizontal com 4 colunas fixas + setas */
.timeline-moments-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
align-items: stretch;
position: relative;
margin-top: 3rem;
}
/* Setas entre cards */
.timeline-moments-grid > div:not(:last-child)::after {
content: '→';
position: absolute;
right: -32px;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
color: rgba(201,168,76,.5);
font-weight: 300;
z-index: 2;
transition: color .3s ease;
}
.timeline-moments-grid > div:not(:last-child):hover::after {
color: #EDD06E;
}
/* Responsivo: em telas menores, quebramos o grid */
@media (max-width: 1400px) {
.timeline-moments-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.timeline-moments-grid > div:not(:last-child)::after {
right: -24px;
font-size: 2rem;
}
}
@media (max-width: 1024px) {
.timeline-moments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.timeline-moments-grid > div:not(:last-child)::after {
display: none;
}
}
@media (max-width: 768px) {
.timeline-moments-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}