/* =========================================================
AGORA MENTORA — Landing Page
Paleta:
- Vinho #5B0E16 (principal)
- Dourado #D4AF37 (luxo/destaque)
- Bege #F6EFE6 (base)
- Nude #DDBFA6 (apoio)
- Branco #FFFFFF
========================================================= */
/* Fonts: movido para no head (paralelo, não bloqueia este CSS) */
:root {
--wine: #5B0E16;
--wine-deep: #3d0810;
--wine-soft: #6e1820;
--gold: #D4AF37;
--gold-light: #e8cc73;
--gold-deep: #a8862a;
--cream: #F6EFE6;
--cream-warm: #efe6d8;
--nude: #DDBFA6;
--nude-soft: #e9d5c2;
--white: #FFFFFF;
--ink: #1a0608;
--font-display: 'Instrument Sans', system-ui, sans-serif;
--font-headline: 'Instrument Serif', Georgia, serif;
--font-serif: 'Instrument Serif', Georgia, serif;
--font-script: 'Instrument Serif', Georgia, serif;
--font-sans: 'Instrument Sans', system-ui, sans-serif;
--max-w: 1240px;
--gold-grad: linear-gradient(135deg, #b8902c 0%, #e8cc73 35%, #f5e29a 50%, #c99a2e 70%, #a8862a 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-feature-settings: "ss01", "ss02";
background: var(--cream);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
line-height: 1.5;
}
img { max-width: 100%; display: block; }
/* =========================================================
HANDWRITTEN REVEAL — DISABLED (removed per request)
========================================================= */
.section-title em,
.display-line em,
.lots-tier-title em,
.mentor-name em,
.event-date em,
.lesson-title em {
display: inline-block;
clip-path: none;
}
.handwrite-go {
clip-path: inset(0 0 0 0) !important;
}
/* =========================================================
TIPOGRAFIA
========================================================= */
.display {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.05;
}
.serif {
font-family: var(--font-serif);
font-weight: 400;
}
.script {
font-family: var(--font-serif);
font-weight: 400;
font-style: italic;
}
.eyebrow {
font-family: var(--font-display);
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.gold-text {
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.gold-text-dark {
background: linear-gradient(135deg, #997422 0%, #b8902c 35%, #d4af37 50%, #a8862a 70%, #7d5b17 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* =========================================================
COMPONENTES UTILITÁRIOS
========================================================= */
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 32px;
}
.gold-line {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
border: none;
width: 100%;
}
.gold-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border: 1px solid var(--gold);
border-radius: 999px;
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
background: transparent;
}
.gold-pill .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 8px var(--gold);
}
.ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--gold);
}
.ornament::before, .ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
max-width: 80px;
}
.ornament .diamond {
width: 8px; height: 8px;
background: var(--gold);
transform: rotate(45deg);
}
/* =========================================================
BOTÕES
========================================================= */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 22px 44px;
font-family: var(--font-display);
font-size: 0.82rem;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
color: var(--wine);
background: var(--gold-grad);
border: none;
border-radius: 4px;
cursor: pointer;
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
box-shadow: 0 12px 40px -12px rgba(212, 175, 55, 0.5), 0 2px 0 rgba(0,0,0,0.08) inset;
overflow: hidden;
text-decoration: none;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before { transform: translateX(100%); }
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 18px 50px -12px rgba(212, 175, 55, 0.7);
}
.btn .arrow {
display: inline-block;
transition: transform .35s;
}
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost {
background: transparent;
border: 1px solid var(--gold);
color: var(--gold);
box-shadow: none;
}
.btn-ghost:hover {
background: rgba(212, 175, 55, 0.08);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}
/* =========================================================
FAIXA DE AVISO (TOPO)
========================================================= */
.warning-bar {
background: linear-gradient(90deg, #f3e6c8 0%, #f6efe6 50%, #f3e6c8 100%);
color: #0a0307;
font-family: var(--font-display);
font-size: 0.82rem;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 16px 24px;
text-align: center;
border-bottom: 1px solid var(--gold);
position: relative;
overflow: hidden;
z-index: 50;
font-weight: 600;
}
.warning-bar::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.35) 50%, transparent 100%);
animation: sweep 6s linear infinite;
}
@keyframes sweep {
0% { left: -100%; }
100% { left: 100%; }
}
.warning-bar .warning-inner {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.warning-bar strong {
color: var(--wine);
font-weight: 700;
letter-spacing: 0.04em;
}
.warning-bar .alert-icon {
display: inline-flex;
width: 18px; height: 18px;
align-items: center;
justify-content: center;
color: var(--gold);
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* =========================================================
SEÇÃO VSL (VERTICAL VIDEO)
========================================================= */
.vsl-section {
background: var(--wine);
color: var(--cream);
padding: 10px 0 60px;
position: relative;
overflow: hidden;
}
.vsl-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212,175,55,0.12), transparent 70%),
radial-gradient(ellipse 80% 40% at 50% 100%, rgba(212,175,55,0.06), transparent 60%);
pointer-events: none;
}
.vsl-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.vsl-eyebrow {
color: var(--gold);
margin-bottom: 14px;
}
.vsl-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.5rem, 3vw, 2.3rem);
letter-spacing: 0.05em;
line-height: 1.2;
color: var(--cream);
max-width: 720px;
margin: 0 auto;
}
.vsl-title em {
font-family: var(--font-script);
font-style: normal;
letter-spacing: 0;
color: var(--gold-light);
font-size: 1.4em;
}
.vsl-sub {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: 1.08rem;
color: var(--nude);
margin-top: 18px;
max-width: 540px;
line-height: 1.5;
}
.vsl-frame {
position: relative;
margin-top: 10px;
width: 100%;
max-width: 320px;
aspect-ratio: 1080 / 1920;
background: #0a0307;
border: 1px solid var(--gold);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 30px 80px -20px rgba(0,0,0,0.6),
0 0 0 1px rgba(212,175,55,0.2),
0 0 80px -10px rgba(212,175,55,0.35);
cursor: pointer;
transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
max-height: calc(100vh - 130px);
}
.vsl-frame:hover {
transform: translateY(-4px);
box-shadow:
0 40px 90px -20px rgba(0,0,0,0.7),
0 0 0 1px rgba(212,175,55,0.4),
0 0 100px -5px rgba(212,175,55,0.5);
}
.vsl-frame::before, .vsl-frame::after {
content: '';
position: absolute;
width: 32px; height: 32px;
border: 1px solid var(--gold);
z-index: 4;
pointer-events: none;
}
.vsl-frame::before { top: 12px; left: 12px; border-right: none; border-bottom: none; border-radius: 12px 0 0 0; }
.vsl-frame::after { bottom: 12px; right: 12px; border-left: none; border-top: none; border-radius: 0 0 12px 0; }
.vsl-poster {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(91,14,22,0.6), transparent 70%),
repeating-linear-gradient(135deg, transparent 0, transparent 16px, rgba(212,175,55,0.05) 16px, rgba(212,175,55,0.05) 17px),
#1a0608;
z-index: 2;
}
.vsl-play {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--gold-grad);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 0 rgba(212,175,55,0.6);
animation: ringPulse 2.4s ease-out infinite;
transition: transform .4s;
}
.vsl-frame:hover .vsl-play { transform: scale(1.08); }
.vsl-play svg {
width: 32px; height: 32px;
color: var(--wine);
margin-left: 4px;
}
@keyframes ringPulse {
0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.6), 0 0 0 0 rgba(212,175,55,0.4); }
100% { box-shadow: 0 0 0 30px rgba(212,175,55,0), 0 0 0 60px rgba(212,175,55,0); }
}
.vsl-poster-label {
margin-top: 22px;
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--gold);
text-transform: uppercase;
}
.vsl-poster-line {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
color: var(--nude);
font-size: 0.95rem;
margin-top: 8px;
max-width: 240px;
text-align: center;
line-height: 1.4;
}
.vsl-frame video,
.vsl-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
z-index: 1;
}
.vsl-meta {
margin-top: 22px;
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold);
}
.vsl-meta .sep {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--gold);
opacity: 0.5;
}
.vsl-meta .vagas {
color: var(--gold-light);
}
@media (max-width: 640px) {
.warning-bar {
padding: 11px 12px;
letter-spacing: 0.06em;
font-size: clamp(0.5rem, 2.6vw, 0.72rem);
white-space: nowrap;
overflow: hidden;
}
.warning-bar .warning-inner {
flex-wrap: nowrap;
gap: 6px;
white-space: nowrap;
}
.warning-bar strong {
letter-spacing: 0.08em;
}
.vsl-section { padding: 60px 0 80px; }
.vsl-frame { max-width: 280px; border-radius: 16px; }
.vsl-play { width: 72px; height: 72px; }
}
/* =========================================================
HERO BANNER (imagem)
========================================================= */
.hero-banner {
position: relative;
width: 100%;
max-width: 1280px;
margin: 0 auto 50px;
perspective: 1400px;
}
.hero-banner-frame {
position: relative;
width: 100%;
aspect-ratio: 1920 / 1080;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(212,175,55,0.45);
transform: translateZ(0);
transition: transform .8s cubic-bezier(.2,.8,.2,1);
animation: borderGlow 5s ease-in-out infinite alternate;
}
.hero-banner-frame::before,
.hero-banner-frame::after {
content: '';
position: absolute;
width: 44px; height: 44px;
border: 1px solid var(--gold);
z-index: 4;
pointer-events: none;
opacity: 0.9;
}
.hero-banner-frame::before {
top: 14px; left: 14px;
border-right: none; border-bottom: none;
border-radius: 6px 0 0 0;
}
.hero-banner-frame::after {
bottom: 14px; right: 14px;
border-left: none; border-top: none;
border-radius: 0 0 6px 0;
}
.hero-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.03);
animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
0% { transform: scale(1.03) translate3d(0, 0, 0); }
100% { transform: scale(1.08) translate3d(-12px, -8px, 0); }
}
.hero-banner-shine {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(115deg,
transparent 0%,
transparent 38%,
rgba(255,255,255,0.18) 48%,
rgba(255,250,230,0.35) 50%,
rgba(255,255,255,0.18) 52%,
transparent 62%,
transparent 100%);
background-size: 250% 100%;
background-position: -100% 0;
mix-blend-mode: overlay;
animation: shineMove 7s ease-in-out infinite;
}
@keyframes shineMove {
0% { background-position: -100% 0; opacity: 0; }
15% { opacity: 0.9; }
50% { background-position: 200% 0; opacity: 0.9; }
60% { opacity: 0; }
100% { background-position: 200% 0; opacity: 0; }
}
.hero-banner-vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(ellipse 100% 60% at 50% 50%, transparent 50%, rgba(91,14,22,0.35) 100%),
linear-gradient(180deg, transparent 70%, rgba(91,14,22,0.4) 100%);
}
@keyframes borderGlow {
0% {
box-shadow:
0 40px 120px -30px rgba(0,0,0,0.7),
0 0 0 1px rgba(212,175,55,0.15),
0 0 100px -20px rgba(212,175,55,0.25);
}
100% {
box-shadow:
0 50px 140px -30px rgba(0,0,0,0.75),
0 0 0 1px rgba(212,175,55,0.4),
0 0 180px -10px rgba(212,175,55,0.55);
}
}
@media (max-width: 1024px) {
.hero-banner { margin-bottom: 40px; }
.hero-banner-frame::before,
.hero-banner-frame::after { width: 28px; height: 28px; }
}
@media (max-width: 640px) {
.hero-banner { margin-bottom: 30px; }
.hero-banner-frame { border-radius: 8px; }
}
.hero {
position: relative;
min-height: 100vh;
background: var(--wine);
color: var(--cream);
overflow: hidden;
padding: 60px 0 80px;
display: flex;
flex-direction: column;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,0.18), transparent 70%),
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(212,175,55,0.08), transparent 60%),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(221,191,166,0.06), transparent 60%);
pointer-events: none;
}
.hero-grain {
position: absolute; inset: 0;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
mix-blend-mode: overlay;
}
.hero-top {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32px 48px;
z-index: 5;
}
.brand-stamp {
display: flex;
align-items: center;
gap: 12px;
color: var(--gold);
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.brand-stamp .a-mark {
width: 32px; height: 38px;
border: 1.5px solid var(--gold);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.brand-stamp .a-mark::after {
content: '';
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 14px solid var(--gold);
filter: drop-shadow(0 0 4px rgba(212,175,55,0.6));
}
.urgency-bar {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold);
}
.urgency-bar .pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 0 rgba(212,175,55,0.7);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.7); }
70% { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
.hero-content {
position: relative;
z-index: 5;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 32px;
max-width: 1100px;
margin: 0 auto;
}
.hero-eyebrow {
margin-bottom: 36px;
}
.hero-logo {
margin: 0 auto 80px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.hero-logo .workshop-tag {
display: inline-block;
padding: 8px 24px;
border: 1px solid var(--gold);
border-radius: 100px;
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 22px;
}
.hero-logo .agora {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(4rem, 12vw, 9rem);
letter-spacing: 0.01em;
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 80px rgba(212,175,55,0.3);
line-height: 1;
position: relative;
margin-bottom: 0;
}
.hero-logo .agora::before,
.hero-logo .agora::after {
content: '';
position: absolute;
top: 50%;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-logo .agora::before { left: -80px; }
.hero-logo .agora::after { right: -80px; }
.hero-logo .mentora {
font-family: var(--font-script);
font-size: clamp(3rem, 8vw, 5.5rem);
color: var(--gold-light);
margin-top: 14px;
display: block;
font-weight: 400;
line-height: 1;
padding-bottom: 20px;
}
.hero-headline {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(1.4rem, 2.6vw, 2.1rem);
line-height: 1.35;
max-width: 820px;
margin: 30px auto 0;
color: var(--cream);
}
.hero-headline em {
font-style: italic;
color: var(--gold-light);
}
.hero-quote {
margin: 40px auto 0;
max-width: 720px;
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: 1.05rem;
color: var(--nude);
font-weight: 300;
line-height: 1.6;
}
.hero-quote strong {
color: var(--gold-light);
font-weight: 500;
font-style: normal;
font-family: var(--font-display);
letter-spacing: 0.05em;
}
.hero-cta-block {
margin-top: 44px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
max-width: 580px;
}
.progress-block {
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
gap: 10px;
}
.progress-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nude);
}
.progress-meta .pct { color: var(--gold); font-size: 0.85rem; }
.progress-bar {
height: 4px;
background: rgba(221,191,166,0.18);
border-radius: 100px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
width: 0;
background: var(--gold-grad);
border-radius: 100px;
position: relative;
box-shadow: 0 0 20px rgba(212,175,55,0.5);
transition: width 2.4s cubic-bezier(.2,.8,.2,1);
}
/* COUNTDOWN */
.countdown {
display: flex;
gap: 18px;
justify-content: center;
margin: 30px auto 0;
}
.countdown .unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 76px;
padding: 16px 14px 12px;
border: 1px solid rgba(212,175,55,0.4);
border-radius: 6px;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(4px);
}
.countdown .num {
font-family: var(--font-display);
font-size: 2.1rem;
font-weight: 500;
color: var(--gold);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.countdown .label {
font-family: var(--font-display);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nude);
margin-top: 6px;
}
.event-meta {
display: flex;
gap: 32px;
justify-content: center;
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--gold);
margin-top: 18px;
flex-wrap: wrap;
}
.event-meta span {
display: inline-flex;
align-items: center;
gap: 10px;
}
.event-meta .sep {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--gold);
opacity: 0.6;
}
/* =========================================================
SEÇÕES BASE
========================================================= */
section.cream-bg {
background: var(--cream);
color: var(--ink);
padding: 130px 0;
position: relative;
}
section.wine-bg {
background: var(--wine);
color: var(--cream);
padding: 130px 0;
position: relative;
overflow: hidden;
}
section.white-bg {
background: var(--white);
color: var(--ink);
padding: 130px 0;
position: relative;
}
section.white-bg.has-waves,
section.wine-bg.has-waves,
section.cream-bg.has-waves,
section.final-cta.has-waves,
.vsl-section.has-waves {
padding-bottom: 240px;
}
/* =========================================================
TRANSIÇÕES SUAVES ENTRE SEÇÕES (gradiente fade)
========================================================= */
section.cream-bg::before,
section.wine-bg::before,
section.white-bg::before,
.vsl-section::after,
.hero::after,
.final-cta::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 120px;
pointer-events: none;
z-index: 3;
}
section.cream-bg::before {
top: 0;
background: linear-gradient(180deg, var(--wine) 0%, rgba(91,14,22,0.0) 100%);
opacity: 0;
}
section.wine-bg::before {
top: 0;
height: 140px;
background: linear-gradient(180deg, var(--cream) 0%, rgba(246,239,230,0) 100%);
opacity: 0;
}
section.white-bg::before {
top: 0;
height: 140px;
background: linear-gradient(180deg, var(--cream) 0%, rgba(246,239,230,0) 100%);
opacity: 0;
}
/* Gradiente que faz a SAÍDA de cada seção dissolver na próxima */
section.wine-bg::after,
.hero::after,
.final-cta::after,
.vsl-section::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: 0;
height: 140px;
background: linear-gradient(180deg, transparent 0%, rgba(91,14,22,0) 50%, var(--cream) 100%);
pointer-events: none;
z-index: 1;
opacity: 0;
}
/* Aplica fades específicos baseado na próxima seção */
.hero {
position: relative;
}
.hero::after {
background: linear-gradient(180deg, transparent 0%, rgba(91,14,22,0.4) 60%, var(--cream) 100%);
opacity: 1;
height: 160px;
}
.vsl-section::after {
background: linear-gradient(180deg, transparent 0%, rgba(91,14,22,0.5) 50%, var(--wine) 100%);
opacity: 1;
height: 80px;
}
/* Wine -> cream (transition out) */
section.wine-bg::after {
background: linear-gradient(180deg, transparent 0%, rgba(91,14,22,0.5) 50%, var(--cream) 100%);
opacity: 1;
height: 160px;
}
/* Cream -> next: smoother edge */
section.cream-bg::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 140px;
pointer-events: none;
z-index: 1;
background: linear-gradient(180deg, transparent 0%, rgba(246,239,230,0.5) 50%, var(--white) 100%);
}
/* Quando uma cream-bg é seguida por wine-bg, sobrescreve */
section.cream-bg + section.wine-bg::before {
opacity: 1;
background: linear-gradient(180deg, var(--cream) 0%, rgba(246,239,230,0) 100%);
}
/* White -> next */
section.white-bg::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 140px;
pointer-events: none;
z-index: 1;
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.5) 50%, var(--cream) 100%);
}
/* =========================================================
DIVISORIAS DE ONDA ANIMADAS (GSAP)
========================================================= */
.shape-container {
position: absolute;
bottom: -1px; /* Para evitar linha branca */
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
height: 120px;
z-index: 10;
pointer-events: none;
}
.elementor-shape {
position: absolute;
bottom: 0;
height: 120px;
display: block;
width: 200% !important;
will-change: transform, left;
left: -50%;
}
.shape-light {
z-index: 2;
opacity: 0.35;
bottom: 12px;
animation: wave-move-bg 12s ease-in-out infinite alternate;
}
.shape-solid {
z-index: 3;
animation: wave-move-fg 8s ease-in-out infinite alternate;
}
@keyframes wave-move-bg {
0% { transform: translateX(0); }
100% { transform: translateX(15%); }
}
@keyframes wave-move-fg {
0% { transform: translateX(0); }
100% { transform: translateX(-15%); }
}
.has-waves::before,
.has-waves::after,
.has-waves + section::before {
display: none !important;
opacity: 0 !important;
}
/* Final CTA fade in */
.final-cta {
position: relative;
}
.final-cta::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 140px;
pointer-events: none;
z-index: 3;
background: linear-gradient(180deg, var(--cream) 0%, rgba(246,239,230,0) 100%);
opacity: 0.4;
}
/* Garantir que conteúdo fica acima dos gradientes */
section > .container,
.hero-content,
.hero-top,
.vsl-inner,
.final-cta-inner {
position: relative;
z-index: 4;
}
.section-eyebrow {
text-align: center;
color: var(--gold-deep);
margin-bottom: 18px;
font-weight: 700;
letter-spacing: 0.05em;
}
section.wine-bg .section-eyebrow,
.final-cta .section-eyebrow {
color: var(--gold);
font-weight: 600;
}
.section-title {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
font-weight: 700;
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
letter-spacing: -0.015em;
line-height: 1.15;
text-align: center;
max-width: 920px;
margin: 0 auto;
}
.section-title em {
font-family: var(--font-script);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
font-size: 1.35em;
color: var(--wine);
display: inline-block;
margin: 0 6px;
line-height: 0.9;
}
section.wine-bg .section-title em { color: var(--gold-light); }
section.wine-bg .section-title { color: var(--cream); }
.section-sub {
font-family: var(--font-serif);
font-weight: 300;
font-size: 1.2rem;
text-align: center;
max-width: 720px;
margin: 28px auto 0;
line-height: 1.55;
color: var(--wine);
}
section.wine-bg .section-sub { color: var(--nude); }
/* =========================================================
CARROSEL DE RESULTADOS (infinite marquee)
========================================================= */
.results-carousel {
margin-top: 80px;
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 30px 0 40px;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.results-track {
display: flex;
gap: 28px;
width: max-content;
animation: marqueeScroll 48s linear infinite;
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.r-card {
flex: 0 0 auto;
width: 320px;
border-radius: 8px;
overflow: hidden;
line-height: 0;
transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;
}
.r-card:hover {
transform: translateY(-8px);
border-color: var(--gold);
box-shadow: 0 30px 60px -20px rgba(91,14,22,0.25), 0 0 60px -20px rgba(212,175,55,0.4);
}
.r-frame {
aspect-ratio: 4 / 3;
background: var(--cream-warm);
position: relative;
overflow: hidden;
}
.r-frame::before,
.r-frame::after {
content: none;
display: none;
}
.r-meta {
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(212,175,55,0.25);
}
.r-amount {
font-family: var(--font-display);
font-size: 0.92rem;
font-weight: 500;
color: var(--wine);
letter-spacing: 0.05em;
}
.r-when {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold-deep);
}
@media (max-width: 640px) {
.r-card { width: 240px; }
.results-track { gap: 18px; }
.results-carousel { padding: 20px 0 30px; }
}
.results {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.result-card {
background: var(--white);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 6px;
overflow: hidden;
position: relative;
transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
cursor: default;
}
.result-card:hover {
transform: translateY(-6px);
box-shadow: 0 30px 60px -20px rgba(91,14,22,0.25);
}
.result-card .frame {
aspect-ratio: 9 / 11;
background: var(--cream-warm);
position: relative;
overflow: hidden;
}
.result-card .frame::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg,
transparent 0,
transparent 12px,
rgba(91,14,22,0.06) 12px,
rgba(91,14,22,0.06) 13px);
}
.result-card .frame::after {
content: 'PRINT DE VENTAS';
position: absolute;
bottom: 14px; left: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.04em;
color: rgba(91,14,22,0.45);
}
.result-card .meta {
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(212,175,55,0.25);
}
.result-card .amount {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 500;
color: var(--wine);
letter-spacing: 0.05em;
}
.result-card .when {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold-deep);
}
.result-card.large { grid-column: span 6; }
.result-card.large .frame { aspect-ratio: 16 / 11; }
.result-card.medium { grid-column: span 3; }
.result-card.medium .frame { aspect-ratio: 9 / 12; }
.result-card.small { grid-column: span 4; }
.result-card.small .frame { aspect-ratio: 4 / 3; }
.results-stats {
margin-top: 90px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(212,175,55,0.4);
border-bottom: 1px solid rgba(212,175,55,0.4);
position: relative;
}
.stat {
padding: 76px 24px 44px;
text-align: center;
border-right: 1px solid rgba(212,175,55,0.25);
position: relative;
cursor: default;
overflow: hidden;
transition: background .5s ease;
}
.stat:last-child { border-right: none; }
.stat::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212,175,55,0.12), transparent 70%);
opacity: 0;
transition: opacity .6s ease;
pointer-events: none;
}
.stat:hover {
background: rgba(212,175,55,0.04);
}
.stat:hover::before { opacity: 1; }
/* PULSE indicator (top-left of each stat) */
.stat-pulse {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 7px; height: 7px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 0 rgba(212,175,55,0.7);
animation: statPulse 2.4s ease-out infinite;
opacity: 0.7;
}
@keyframes statPulse {
0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.7); opacity: 0.9; }
70% { box-shadow: 0 0 0 12px rgba(212,175,55,0); opacity: 0.5; }
100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); opacity: 0.7; }
}
/* THEMATIC ICONS */
.stat-icon {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-deep);
opacity: 0.75;
transition: transform .5s cubic-bezier(.2,.8,.2,1), color .4s, opacity .4s;
z-index: 3;
}
.stat-icon::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 70%);
opacity: 0;
transition: opacity .5s ease;
z-index: -1;
}
.stat:hover .stat-icon {
color: var(--gold);
opacity: 1;
transform: translateX(-50%) translateY(-2px);
}
.stat:hover .stat-icon::before { opacity: 1; }
.stat-icon svg {
width: 100%; height: 100%;
}
/* Per-icon animations */
.stat-icon-ventas svg {
animation: coinFlip 7s ease-in-out infinite;
transform-origin: center;
}
@keyframes coinFlip {
0%, 80%, 100% { transform: rotateY(0deg); }
88%, 92% { transform: rotateY(180deg); }
}
.stat-icon-alumnas svg {
animation: tasselSway 4s ease-in-out infinite;
transform-origin: center 50%;
}
@keyframes tasselSway {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
75% { transform: rotate(3deg); }
}
.stat-icon-rocket svg {
animation: rocketLaunch 3.5s ease-in-out infinite;
}
@keyframes rocketLaunch {
0%, 65%, 100% { transform: translateY(0); }
75% { transform: translateY(-4px); }
85% { transform: translateY(-2px); }
}
.stat-icon-views svg {
animation: eyeBlink 5s ease-in-out infinite;
transform-origin: center;
}
@keyframes eyeBlink {
0%, 90%, 100% { transform: scaleY(1); }
94%, 97% { transform: scaleY(0.15); }
}
/* On hover the icons get a more energetic pulse */
.stat:hover .stat-icon-ventas svg { animation: coinFlipFast 1.8s ease-in-out infinite; }
@keyframes coinFlipFast {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(360deg); }
}
.stat:hover .stat-icon-alumnas svg { animation: tasselSway 1.2s ease-in-out infinite; }
.stat:hover .stat-icon-rocket svg { animation: rocketHover 1.2s ease-in-out infinite; }
@keyframes rocketHover {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.stat:hover .stat-icon-views svg { animation: eyeWatch 2s ease-in-out infinite; }
@keyframes eyeWatch {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.stat-num-wrap {
font-family: var(--font-display);
font-size: clamp(2.6rem, 4.2vw, 3.6rem);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 3px;
background: linear-gradient(135deg, #8a6a1f 0%, #b8902c 35%, #d4af37 50%, #a8862a 70%, #7a5d1a 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position .8s ease, transform .5s cubic-bezier(.2,.8,.2,1);
font-variant-numeric: tabular-nums;
}
.stat:hover .stat-num-wrap {
background-position: 100% center;
transform: scale(1.05);
}
.stat-prefix, .stat-suffix {
font-size: 0.78em;
opacity: 1;
letter-spacing: 0;
font-weight: 600;
}
.stat-suffix { margin-left: 1px; }
.stat-num {
font-variant-numeric: tabular-nums;
display: inline-block;
min-width: 0.6em;
}
/* Animated underline */
.stat-underline {
position: relative;
width: 40px;
height: 1px;
margin: 16px auto 14px;
background: rgba(212,175,55,0.3);
overflow: hidden;
}
.stat-underline::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
transition: left .8s cubic-bezier(.2,.8,.2,1);
}
.stat:hover .stat-underline {
width: 80px;
background: var(--gold);
transition: width .5s ease;
}
.stat:hover .stat-underline::after { left: 100%; }
.stat-label {
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wine);
opacity: 0.78;
font-weight: 500;
transition: opacity .3s, transform .4s;
position: relative;
z-index: 2;
}
.stat:hover .stat-label {
opacity: 1;
transform: translateY(-2px);
}
/* Detail text — hidden, slides in on hover */
.stat-detail {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: 0.95rem;
color: var(--gold-deep);
margin-top: 14px;
max-width: 240px;
margin-left: auto;
margin-right: auto;
line-height: 1.4;
opacity: 0;
transform: translateY(8px);
transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
position: relative;
z-index: 2;
}
.stat:hover .stat-detail {
opacity: 1;
transform: translateY(0);
}
/* When counter is animating, the prefix/suffix can have subtle wobble */
.stat.counting .stat-num-wrap {
animation: subtleBounce .4s ease;
}
@keyframes subtleBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@media (max-width: 640px) {
.stat { padding: 70px 14px 36px; }
.stat-icon { top: 18px; width: 32px; height: 32px; }
.stat-num-wrap { font-size: 2.4rem; }
.stat-label {
font-size: 0.64rem;
letter-spacing: 0.04em;
word-spacing: 0.05em;
}
.stat-detail { font-size: 0.82rem; max-width: 180px; }
.stat-underline { margin: 12px auto 10px; width: 32px; }
}
/* =========================================================
BLOCO 03 — CONTRASTE 99% vs 1%
========================================================= */
@media (max-width: 1024px) {
.contrast { grid-template-columns: 1fr; }
.contrast-col.left { border-right: none; border-bottom: 1px solid rgba(212,175,55,0.3); }
/* On mobile/tablet: hide central progress bar — it doesn't make sense
when columns are stacked vertically */
.contrast-progress { display: none; }
/* Items slide vertically (less translation) on mobile so they don't hit overflow */
.contrast-col.left .c-item {
transform: translateY(20px);
}
.contrast-col.right .c-item {
transform: translateY(20px);
}
.contrast-col .c-item.shown {
transform: translateY(0);
}
/* Tighter padding on mobile */
.contrast-col { padding: 44px 32px; }
.contrast-tag { font-size: 3rem; }
.contrast-headline { font-size: 1.15rem; margin: 10px 0 24px; }
.contrast li { font-size: 1.05rem; padding: 12px 0; gap: 14px; }
}
@media (max-width: 640px) {
.contrast-col { padding: 36px 24px; }
.contrast-tag { font-size: 2.6rem; }
}
.contrast {
margin-top: 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid rgba(212,175,55,0.3);
border-radius: 6px;
overflow: hidden;
position: relative;
}
/* SCROLL-LINKED PROGRESS BAR — vertical line growing in the center divider */
.contrast-progress {
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: rgba(212,175,55,0.15);
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
}
.contrast-progress span {
position: absolute;
top: 0; left: 0;
width: 100%;
height: var(--p, 0%);
background: linear-gradient(180deg, var(--gold), var(--gold-light), var(--gold));
box-shadow: 0 0 20px rgba(212,175,55,0.6);
transition: height .15s linear;
display: block;
}
.contrast-progress::after {
content: '';
position: absolute;
top: var(--p, 0%);
left: 50%;
transform: translate(-50%, -50%);
width: 10px; height: 10px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 16px var(--gold), 0 0 0 4px rgba(212,175,55,0.15);
opacity: var(--dot-op, 0);
transition: top .15s linear, opacity .3s;
}
/* C-NUM counter */
.c-num {
font-variant-numeric: tabular-nums;
display: inline-block;
min-width: 2.4ch;
text-align: right;
}
/* List items hidden initially, slide in based on scroll */
.contrast-col.left .c-item {
opacity: 0;
transform: translateX(-40px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.contrast-col.right .c-item {
opacity: 0;
transform: translateX(40px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.contrast-col .c-item.shown {
opacity: 1;
transform: translateX(0);
}
/* The MARK icons pop when item appears */
.contrast-col .c-item .mark {
transform: scale(0);
transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.contrast-col .c-item.shown .mark {
transform: scale(1);
}
/* Big % numbers — start small, scale up when section in view */
.contrast-tag {
transform: scale(0.6);
opacity: 0;
transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1), opacity .9s ease;
}
.contrast.in-view .contrast-tag {
transform: scale(1);
opacity: 1;
}
.contrast-headline {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease .25s, transform 1s cubic-bezier(.2,.8,.2,1) .25s;
}
.contrast.in-view .contrast-headline {
opacity: 1;
transform: translateY(0);
}
.contrast-col {
padding: 60px 50px;
position: relative;
}
.contrast-col.left {
background: rgba(91,14,22,0.04);
border-right: 1px solid rgba(212,175,55,0.25);
}
.contrast-col.right {
background: var(--wine);
color: var(--cream);
}
.contrast-tag {
font-family: var(--font-display);
font-size: 4rem;
font-weight: 500;
letter-spacing: 0.04em;
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}
.contrast-col.left .contrast-tag {
background: linear-gradient(135deg, #6e1820, #5B0E16);
-webkit-background-clip: text;
background-clip: text;
}
.contrast-headline {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-weight: 300;
font-size: 1.3rem;
margin: 14px 0 38px;
line-height: 1.35;
}
.contrast ul { list-style: none; }
.contrast li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 0;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 400;
line-height: 1.4;
border-bottom: 1px solid rgba(212,175,55,0.15);
}
.contrast li:last-child { border-bottom: none; }
.contrast .mark {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
}
.contrast-col.left .mark {
background: rgba(91,14,22,0.08);
color: var(--wine);
}
.contrast-col.right .mark {
background: rgba(212,175,55,0.18);
color: var(--gold);
}
.contrast .mark svg { width: 11px; height: 11px; }
.contrast-quote {
margin-top: 100px;
text-align: center;
max-width: 880px;
margin-left: auto;
margin-right: auto;
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-weight: 300;
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
line-height: 1.5;
color: var(--wine);
position: relative;
padding: 40px 0;
}
.contrast-quote::before {
content: '';
display: block;
width: 50px; height: 1px;
background: var(--gold);
margin: 0 auto 30px;
}
.contrast-quote::after {
content: '';
display: block;
width: 50px; height: 1px;
background: var(--gold);
margin: 30px auto 0;
}
.contrast-quote strong {
font-style: normal;
font-family: var(--font-display);
font-weight: 500;
font-size: 0.85em;
letter-spacing: 0.04em;
color: var(--gold-deep);
display: block;
margin-top: 16px;
}
/* =========================================================
BLOCO 04 — PARA QUEM É
========================================================= */
.for-you-grid {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
background: var(--gold);
border: 1px solid var(--gold);
border-radius: 4px;
overflow: hidden;
}
.for-you-card {
background: var(--white);
padding: 44px 38px;
display: flex;
gap: 22px;
align-items: flex-start;
transition: background .4s;
}
.for-you-card:hover { background: var(--cream); }
.for-you-card .index {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--gold-deep);
flex-shrink: 0;
margin-top: 5px;
min-width: 32px;
}
.for-you-card p {
font-family: var(--font-serif);
font-size: 1.18rem;
font-weight: 400;
line-height: 1.45;
color: var(--ink);
}
.for-you-card p strong {
color: var(--wine);
font-weight: 600;
}
/* =========================================================
BLOCO 05 — CONTEÚDO DO WORKSHOP
========================================================= */
.curriculum {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: rgba(212,175,55,0.4);
border: 1px solid rgba(212,175,55,0.4);
}
.lesson {
background: var(--wine);
padding: 44px 40px;
position: relative;
overflow: hidden;
transition: background .5s;
cursor: default;
}
.lesson:hover {
background: var(--wine-soft);
}
.lesson::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0%; height: 1px;
background: var(--gold);
transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.lesson:hover::before { width: 100%; }
.lesson-num {
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--gold);
margin-bottom: 18px;
}
.lesson-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.3rem;
letter-spacing: 0.04em;
line-height: 1.25;
color: var(--cream);
margin-bottom: 14px;
}
.lesson-desc {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 300;
line-height: 1.5;
color: var(--nude);
}
.lesson-desc ul {
list-style: none;
margin-top: 10px;
}
.lesson-desc li {
padding: 4px 0 4px 16px;
position: relative;
}
.lesson-desc li::before {
content: '';
position: absolute;
left: 0; top: 14px;
width: 6px; height: 1px;
background: var(--gold);
}
/* =========================================================
BLOCO 06 — DATAS / EVENTO
========================================================= */
.event-card {
margin-top: 60px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 70px 60px;
background: var(--cream);
border: 1px solid rgba(212,175,55,0.4);
text-align: center;
position: relative;
}
.event-card::before, .event-card::after {
content: '';
position: absolute;
width: 24px; height: 24px;
border: 1px solid var(--gold);
}
.event-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.event-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.event-date {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 500;
letter-spacing: 0.08em;
color: var(--wine);
margin-bottom: 16px;
}
.event-date em {
font-family: var(--font-script);
font-style: normal;
font-size: 1.4em;
color: var(--gold-deep);
margin: 0 8px;
}
.event-times {
display: flex;
justify-content: center;
gap: 60px;
margin: 40px 0;
flex-wrap: wrap;
}
.event-times .time-block {
text-align: center;
}
.event-times .label {
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--gold-deep);
text-transform: uppercase;
}
.event-times .value {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 500;
color: var(--wine);
margin-top: 8px;
letter-spacing: 0.04em;
}
.event-note {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
color: var(--gold-deep);
font-size: 1rem;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(212,175,55,0.3);
}
/* =========================================================
BLOCO 07 — PRICING / LOTES
========================================================= */
.pricing-hero-line {
text-align: center;
margin-bottom: 30px;
}
.pricing-card {
background: rgba(247, 241, 230, 0.45);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(181, 158, 107, 0.3);
border-right: 1px solid rgba(181, 158, 107, 0.3);
border-radius: 6px;
padding: 60px 50px 50px;
width: 100%;
max-width: 520px;
margin: 70px auto 0;
position: relative;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.1), inset 0 0 80px rgba(255, 255, 255, 0.2);
}
.pricing-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background-color: var(--wine, #4a1b1b);
color: var(--gold-deep, #d4c29d);
padding: 8px 24px;
font-family: var(--font-display, 'Montserrat', sans-serif);
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
border: 1px solid rgba(212, 194, 157, 0.3);
}
.pricing-subtitle {
color: var(--gold-deep, #b59e6b);
font-family: var(--font-display, 'Montserrat', sans-serif);
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
}
.pricing-price {
font-family: var(--font-display, 'Montserrat', sans-serif);
color: var(--wine, #4a1b1b);
font-size: 5.5rem;
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 5px;
}
.pricing-price span {
font-size: 2.5rem;
margin-top: 10px;
color: var(--gold-deep, #b59e6b);
font-weight: 600;
}
.pricing-desc {
font-family: var(--font-serif, 'Playfair Display', serif);
font-style: italic;
color: rgba(74, 27, 27, 0.8);
font-size: 1.1rem;
margin-bottom: 40px;
border-bottom: 1px solid rgba(181, 158, 107, 0.3);
padding-bottom: 40px;
}
.progress-wrapper {
text-align: left;
margin-bottom: 30px;
}
.progress-header {
display: flex;
justify-content: space-between;
font-family: var(--font-display, 'Montserrat', sans-serif);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.progress-title { color: var(--wine, #4a1b1b); font-weight: 600; }
.progress-percent { color: var(--gold-deep, #b59e6b); font-weight: 600; }
.progress-bar-bg {
height: 6px;
background-color: rgba(230, 218, 198, 0.6);
border-radius: 3px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #b48c41, #dfbd73, #b48c41);
border-radius: 3px;
}
.pricing-btn {
position: relative;
background: linear-gradient(to right, #b48c41 0%, #dfbd73 50%, #b48c41 100%);
color: var(--wine, #4a1b1b);
font-family: var(--font-display, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
padding: 18px 30px;
width: 100%;
border: none;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 20px rgba(180, 140, 65, 0.3), inset 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.pricing-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 25px rgba(180, 140, 65, 0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.pricing-btn .arrow {
transition: transform 0.3s ease;
}
.pricing-btn:hover .arrow {
transform: translateX(6px);
}
.reflexo {
overflow: hidden;
}
.reflexo:before {
content: "";
position: absolute;
left: 0%;
width: 150px;
height: 300%;
top: -100%;
filter: blur(20px);
background: linear-gradient(to right, transparent 1%, #fff 40%,#fff 60% , transparent 100%);
pointer-events: none;
mix-blend-mode: screen;
transform: rotate(20deg);
animation: reflexo 2s linear infinite;
}
@keyframes reflexo {
from { transform: rotate(20deg) translateX(-300%); }
to { transform: rotate(20deg) translateX(300%); }
}
@media (max-width: 600px) {
.pricing-card { padding: 40px 20px 30px; }
.pricing-price { font-size: 4.5rem; }
}
.lots-grid {
margin-top: 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.lots-tier {
border: 1px solid rgba(212,175,55,0.3);
padding: 40px;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
overflow: hidden;
}
.lots-tier.vip {
background: var(--wine);
color: var(--cream);
border-color: var(--gold);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 15px 40px rgba(91, 14, 22, 0.2);
}
.lots-tier.vip::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 100% 50% at 50% 0%, rgba(212,175,55,0.15), transparent 70%);
pointer-events: none;
}
.lots-tier-name {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 8px;
}
.lots-tier.vip .lots-tier-name { color: var(--gold); }
.lots-tier-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.04em;
color: var(--wine);
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.lots-tier.vip .lots-tier-title { color: var(--cream); }
.lots-tier-title em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold-deep);
font-size: 1.4em;
}
.lots-tier.vip .lots-tier-title em { color: var(--gold); }
.lots-tier ul {
list-style: none;
position: relative;
z-index: 1;
}
.lots-tier li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 18px 0;
border-bottom: 1px solid rgba(212,175,55,0.2);
font-family: var(--font-display);
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lots-tier li:last-child { border-bottom: none; }
.lots-tier li .name { color: var(--wine); opacity: 0.6; }
.lots-tier.vip li .name { color: var(--nude); opacity: 0.7; }
.lots-tier li .val {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
color: var(--wine);
letter-spacing: 0.04em;
}
.lots-tier.vip li .val { color: var(--gold); }
.lots-tier li.current {
background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent);
margin: 0 -12px;
padding: 12px 16px;
border-radius: 12px;
}
.lots-tier li.current .name { opacity: 1; color: var(--gold-deep); }
.lots-tier.vip li.current .name { color: var(--gold); }
/* =========================================================
BLOCO 08 — APRENDERÁS A
========================================================= */
.recap {
margin-top: 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.recap-list {
list-style: none;
}
.recap-list li {
padding: 16px 0;
border-bottom: 1px solid rgba(212,175,55,0.2);
display: flex;
align-items: center;
gap: 16px;
font-family: var(--font-serif);
font-size: 1.18rem;
font-weight: 400;
color: var(--cream);
}
.recap-list li::before {
content: '';
width: 24px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
.recap-image {
aspect-ratio: 4 / 5;
background: var(--wine-deep);
border: 1px solid var(--gold);
position: relative;
overflow: hidden;
}
.recap-image::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg,
transparent 0,
transparent 14px,
rgba(212,175,55,0.07) 14px,
rgba(212,175,55,0.07) 15px);
}
.recap-image::after {
content: 'IMAGEM REFERÊNCIA';
position: absolute;
bottom: 24px; left: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.05em;
color: var(--gold);
opacity: 0.7;
}
.recap-image .corners::before,
.recap-image .corners::after,
.recap-image::before {
pointer-events: none;
}
.recap-image .corner {
position: absolute;
width: 30px; height: 30px;
border: 1px solid var(--gold);
}
.recap-image .corner.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.recap-image .corner.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.recap-image .corner.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.recap-image .corner.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
/* =========================================================
BLOCO 09 — MENTORES
========================================================= */
.mentors {
margin-top: 90px;
display: flex;
flex-direction: column;
gap: 0;
}
.mentor {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 70px;
align-items: center;
padding: 80px 0;
border-bottom: 1px solid rgba(212,175,55,0.2);
}
.mentor:last-child { border-bottom: none; }
.mentor.flip { grid-template-columns: 7fr 5fr; }
.mentor.flip .mentor-portrait { order: 2; }
.mentor.flip .mentor-text { order: 1; }
.mentor-portrait {
aspect-ratio: 4 / 5;
background: var(--cream-warm);
border: 1px solid rgba(212,175,55,0.4);
border-radius: 240px 240px 12px 12px;
position: relative;
overflow: hidden;
}
.mentor-portrait .mentor-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.mentor-portrait.has-photo::before { display: none; }
.mentor-portrait.has-photo .seal,
.mentor-portrait.has-photo .label { z-index: 2; }
.mentor-portrait::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg,
transparent 0,
transparent 14px,
rgba(91,14,22,0.05) 14px,
rgba(91,14,22,0.05) 15px);
}
.mentor-portrait .label {
position: absolute;
bottom: 18px; left: 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(91,14,22,0.5);
}
.mentor-portrait .seal {
position: absolute;
top: 18px; right: 18px;
width: 50px; height: 50px;
border-radius: 50%;
border: 1px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.6rem;
letter-spacing: 0.04em;
color: var(--gold-deep);
background: rgba(255,255,255,0.7);
}
.mentor-tag {
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--gold-deep);
text-transform: uppercase;
margin-bottom: 12px;
}
.mentor-name {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 3.5vw, 2.8rem);
letter-spacing: 0.04em;
color: var(--wine);
line-height: 1.05;
}
.mentor-name em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold-deep);
font-size: 1.2em;
margin-left: 4px;
}
.mentor-role {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: 1.15rem;
color: var(--gold-deep);
margin: 14px 0 24px;
font-weight: 400;
}
.mentor-bio {
font-family: var(--font-serif);
font-size: 1.08rem;
font-weight: 400;
line-height: 1.6;
color: var(--ink);
}
.mentor-bio p + p { margin-top: 14px; }
.mentor-stats {
margin-top: 30px;
display: flex;
gap: 0;
border-top: 1px solid rgba(212,175,55,0.3);
border-bottom: 1px solid rgba(212,175,55,0.3);
}
.mentor-stats .s {
flex: 1;
padding: 18px 0;
border-right: 1px solid rgba(212,175,55,0.2);
text-align: left;
}
.mentor-stats .s:last-child { border-right: none; padding-left: 24px; }
.mentor-stats .s:first-child { padding-right: 24px; }
.mentor-stats .s + .s { padding-left: 24px; padding-right: 24px; }
.mentor-stats .s:last-child { padding-right: 0; }
.mentor-stats .num {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 500;
color: var(--wine);
letter-spacing: 0.04em;
}
.mentor-stats .lab {
font-family: var(--font-display);
font-size: 0.62rem;
letter-spacing: 0.05em;
color: var(--gold-deep);
text-transform: uppercase;
margin-top: 4px;
}
/* =========================================================
FAQ
========================================================= */
.faq {
margin-top: 70px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.faq-item {
border-bottom: 1px solid rgba(212,175,55,0.3);
padding: 4px 0;
}
.faq-q {
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 28px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--wine);
transition: color .3s;
}
.faq-q:hover { color: var(--gold-deep); }
.faq-q .icon {
width: 28px; height: 28px;
border: 1px solid var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .4s, background .4s;
color: var(--gold-deep);
}
.faq-item.open .faq-q .icon {
transform: rotate(45deg);
background: var(--gold);
color: var(--wine);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .5s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-a {
max-height: 240px;
}
.faq-a-inner {
padding: 0 0 28px;
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 400;
line-height: 1.55;
color: var(--wine);
opacity: 0.85;
max-width: 720px;
}
/* =========================================================
FINAL CTA
========================================================= */
.final-cta {
text-align: center;
padding: 160px 0;
background: var(--wine);
color: var(--cream);
position: relative;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,175,55,0.18), transparent 70%);
}
.final-cta-inner { position: relative; z-index: 2; }
.final-cta .display-line {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.4rem, 5vw, 4rem);
letter-spacing: 0.06em;
line-height: 1.1;
color: var(--cream);
max-width: 900px;
margin: 0 auto;
}
.final-cta .display-line em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold-light);
font-size: 1.3em;
font-weight: 400;
}
/* =========================================================
FOOTER
========================================================= */
footer {
background: var(--wine-deep);
color: var(--nude);
padding: 60px 0 40px;
text-align: center;
border-top: 1px solid rgba(212,175,55,0.25);
}
footer .brand-stamp {
justify-content: center;
margin-bottom: 24px;
}
footer .legal {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.04em;
opacity: 0.6;
max-width: 700px;
margin: 16px auto 0;
line-height: 1.6;
}
/* =========================================================
ANIMAÇÕES DE REVEAL
========================================================= */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.shimmer {
background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold-light) 25%, var(--white) 50%, var(--gold-light) 75%, var(--gold-deep) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 6s linear infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Stars decorativas no logo */
.spark {
position: absolute;
pointer-events: none;
color: var(--gold);
}
.spark svg { width: 100%; height: 100%; }
.spark.s1 { top: 10%; left: -8%; width: 28px; animation: float 4s ease-in-out infinite; }
.spark.s2 { top: 60%; right: -8%; width: 22px; animation: float 5s ease-in-out infinite reverse; }
.spark.s3 { top: 30%; right: 10%; width: 16px; animation: float 6s ease-in-out infinite; }
/* =========================================================
RESPONSIVO
========================================================= */
@media (max-width: 1024px) {
.results { grid-template-columns: repeat(6, 1fr); }
.result-card.large { grid-column: span 6; }
.result-card.medium { grid-column: span 3; }
.result-card.small { grid-column: span 3; }
.contrast { grid-template-columns: 1fr; }
.contrast-col.left { border-right: none; border-bottom: 1px solid rgba(212,175,55,0.3); }
.for-you-grid { grid-template-columns: 1fr; }
.curriculum { grid-template-columns: 1fr; }
.lots-grid { grid-template-columns: 1fr; }
.recap { grid-template-columns: 1fr; gap: 40px; }
.mentor, .mentor.flip {
grid-template-columns: 1fr;
gap: 40px;
}
.mentor.flip .mentor-portrait { order: 0; }
.mentor.flip .mentor-text { order: 1; }
.mentor-portrait { max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
section.cream-bg, section.wine-bg, section.white-bg { padding: 80px 0; }
section.white-bg.has-waves,
section.wine-bg.has-waves,
.vsl-section.has-waves {
padding-bottom: 160px;
}
.hero { padding: 30px 0 60px; }
.hero-top { padding: 0 20px 32px; flex-direction: column; gap: 20px; }
.hero-content { padding: 10px 20px; }
.hero-logo .agora::before, .hero-logo .agora::after { display: none; }
.countdown { gap: 8px; }
.countdown .unit { min-width: 60px; padding: 12px 8px 10px; }
.countdown .num { font-size: 1.5rem; }
.event-meta { gap: 18px; font-size: 0.7rem; }
.results-stats { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2n) { border-right: none; }
.stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(212,175,55,0.25); }
.contrast-col { padding: 40px 28px; }
.for-you-card { padding: 32px 24px; }
.lesson { padding: 32px 26px; }
.event-card { padding: 50px 26px; }
.event-times { gap: 30px; }
.first-lot { padding: 50px 26px; }
.lots-tier { padding: 30px 24px; }
.btn { padding: 18px 28px; font-size: 0.74rem; }
.mentor { padding: 50px 0; }
.mentor-stats { flex-wrap: wrap; }
.mentor-stats .s { flex: 1 1 40%; padding: 14px !important; border-right: none !important; border-bottom: 1px solid rgba(212,175,55,0.2); }
}
/* =========================================================
FAIXA MARQUEE — Agora Mentora
Dois rolos contínuos: creme (vinho/dourado) + vinho (creme/dourado)
========================================================= */
.am-marquee {
position: relative;
width: 100%;
overflow: hidden;
z-index: 4;
/* Sai da seção cream-bg anterior e entra na white-bg seguinte */
margin-top: -1px;
margin-bottom: -1px;
}
.am-marquee-row {
position: relative;
overflow: hidden;
border-top: 1px solid rgba(91,14,22,0.08);
border-bottom: 1px solid rgba(91,14,22,0.08);
}
.am-marquee-row--cream {
background: linear-gradient(180deg, #faf4ec 0%, #f1e7d6 100%);
color: var(--wine);
padding: 22px 0;
}
.am-marquee-row--wine {
background: linear-gradient(180deg, #4a0b12 0%, #5B0E16 55%, #3d0810 100%);
color: var(--cream);
padding: 26px 0;
border-top: 1px solid rgba(212,175,55,0.18);
border-bottom: 1px solid rgba(212,175,55,0.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
inset 0 -10px 24px rgba(0,0,0,0.25);
}
.am-marquee-track {
display: inline-flex;
align-items: center;
gap: 56px;
white-space: nowrap;
will-change: transform;
animation: am-marquee-scroll 30s linear infinite;
padding-left: 56px;
}
.am-marquee-track--reverse {
animation: am-marquee-scroll-rev 36s linear infinite;
}
@keyframes am-marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes am-marquee-scroll-rev {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
.am-mq-item {
font-family: var(--font-display);
font-weight: 500;
font-size: 0.92rem;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
flex-shrink: 0;
}
.am-mq-item em {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
font-size: 1.18em;
margin: 0 0.06em;
position: relative;
top: 0.04em;
}
/* Linha creme — acentos em dourado escuro */
.am-marquee-row--cream .am-mq-item.am-mq-accent {
color: var(--gold-deep);
}
.am-marquee-row--cream .am-mq-item em {
color: var(--gold-deep);
}
.am-marquee-row--cream .am-mq-item.am-mq-accent em {
color: var(--wine);
}
/* Linha vinho — acentos em dourado claro */
.am-marquee-row--wine .am-mq-item {
color: var(--cream);
}
.am-marquee-row--wine .am-mq-item.am-mq-accent-gold {
color: var(--gold-light);
text-shadow: 0 0 18px rgba(212,175,55,0.18);
}
.am-marquee-row--wine .am-mq-item em {
color: var(--gold-light);
}
.am-marquee-row--wine .am-mq-item.am-mq-accent-gold em {
color: var(--cream);
}
/* Separador diamante */
.am-mq-dot {
flex-shrink: 0;
width: 7px;
height: 7px;
background: var(--wine);
transform: rotate(45deg);
opacity: 0.55;
border-radius: 1px;
}
.am-mq-dot--gold {
background: var(--gold);
opacity: 0.75;
box-shadow: 0 0 8px rgba(212,175,55,0.35);
}
/* Responsive */
@media (max-width: 900px) {
.am-marquee-track { gap: 40px; padding-left: 40px; animation-duration: 24s; }
.am-marquee-track--reverse { animation-duration: 28s; }
.am-mq-item { font-size: 0.78rem; letter-spacing: 0.05em; }
.am-marquee-row--cream { padding: 16px 0; }
.am-marquee-row--wine { padding: 18px 0; }
}
@media (max-width: 560px) {
.am-marquee-track { gap: 30px; padding-left: 30px; animation-duration: 22s; }
.am-marquee-track--reverse { animation-duration: 24s; }
.am-mq-item { font-size: 0.7rem; letter-spacing: 0.04em; }
.am-mq-dot { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
.am-marquee-track,
.am-marquee-track--reverse { animation: none; transform: translate3d(0, 0, 0); }
}
/* =========================================================
VSL CTA — Botón directo bajo el video
========================================================= */
.vsl-cta {
margin-top: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.vsl-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 20px 38px;
background: linear-gradient(180deg, #e0b94a 0%, #c99a2e 60%, #a8862a 100%);
color: var(--wine-deep);
font-family: var(--font-sans);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
text-decoration: none;
border-radius: 999px;
box-shadow:
0 14px 30px -10px rgba(212,175,55,0.55),
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(0,0,0,0.15);
overflow: hidden;
z-index: 1;
}
.vsl-cta-btn::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
transform: skewX(-18deg);
transition: left .9s cubic-bezier(.2,.8,.2,1);
}
.vsl-cta-btn:hover::after { left: 130%; }
.vsl-cta-btn:hover {
box-shadow:
0 22px 50px -10px rgba(212,175,55,0.7),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.vsl-cta-btn .arrow {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2em;
transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.vsl-cta-btn:hover .arrow { transform: translateX(6px); }
.vsl-cta-note {
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--nude);
display: inline-flex;
align-items: center;
gap: 10px;
opacity: 0.85;
}
.vsl-cta-note strong {
color: var(--gold-light);
font-weight: 600;
}
.vsl-cta-note .pulse-dot {
width: 7px; height: 7px;
background: #d23a3a;
border-radius: 50%;
position: relative;
box-shadow: 0 0 0 0 rgba(210, 58, 58, 0.6);
animation: vsl-cta-pulse 1.8s infinite;
}
@keyframes vsl-cta-pulse {
0% { box-shadow: 0 0 0 0 rgba(210,58,58,0.6); }
70% { box-shadow: 0 0 0 10px rgba(210,58,58,0); }
100% { box-shadow: 0 0 0 0 rgba(210,58,58,0); }
}
@media (max-width: 640px) {
.vsl-cta-btn {
padding: 16px 28px;
font-size: 0.92rem;
gap: 10px;
}
.vsl-cta-note {
font-size: 0.68rem;
letter-spacing: 0.03em;
}
}
/* =========================================================
HERO LOGO — image version
========================================================= */
.hero-logo--image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 30px auto 18px;
padding: 0 20px;
position: relative;
z-index: 2;
}
.hero-logo-img {
display: block;
width: 100%;
max-width: 620px;
height: auto;
filter: drop-shadow(0 6px 30px rgba(212,175,55,0.18));
transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
will-change: transform;
}
.hero-logo--image:hover .hero-logo-img {
transform: scale(1.02);
filter: drop-shadow(0 10px 40px rgba(212,175,55,0.32));
}
@media (max-width: 768px) {
.hero-logo-img { max-width: 460px; }
}
@media (max-width: 480px) {
.hero-logo-img { max-width: 320px; }
}
/* =========================================================
VSL BRAND MARK — logo top-left
========================================================= */
.vsl-section { position: relative; }
.vsl-brand-mark {
position: absolute;
top: 28px;
left: 40px;
display: inline-block;
z-index: 5;
transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
text-decoration: none;
}
.vsl-brand-mark img {
display: block;
width: 140px;
height: auto;
filter: drop-shadow(0 4px 12px rgba(91,14,22,0.08));
}
.vsl-brand-mark:hover {
transform: scale(1.04);
}
.vsl-brand-mark:hover img {
filter: drop-shadow(0 6px 20px rgba(212,175,55,0.25));
}
@media (max-width: 768px) {
.vsl-brand-mark { top: 18px; left: 20px; }
.vsl-brand-mark img { width: 100px; }
}
@media (max-width: 480px) {
.vsl-brand-mark img { width: 78px; }
}
/* =========================================================
SCROLL ANIMATION BLOCK (sa-)
Foto fade-in + texto typewriter scroll-locked
========================================================= */
.sa-container {
height: 300vh;
position: relative;
background: var(--cream);
}
@media (max-width: 768px) {
.sa-container { height: 250vh; }
}
.sa-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 40px;
background:
radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.10) 0%, transparent 50%),
var(--cream);
}
.sa-photo-wrap {
position: relative;
z-index: 10;
width: 100%;
max-width: 820px;
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 40px;
transform: translateY(30px);
transition: transform .8s ease;
}
.sa-photo-wrap.revealed {
transform: translateY(0);
}
.sa-photo-wrap .sa-photo {
opacity: 0;
transition: opacity 2.5s ease;
}
.sa-photo-wrap.revealed .sa-photo {
opacity: 1;
}
.sa-photo-wrap .sa-cards {
opacity: 0;
transition: opacity 2s ease 2s;
}
.sa-photo-wrap.revealed .sa-cards {
opacity: 1;
}
.sa-horario {
position: absolute;
top: 12%;
right: 3%;
z-index: 20;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1.5px solid rgba(212,175,55,0.4);
border-radius: 14px;
padding: 10px 18px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-shadow: 0 8px 32px rgba(91,14,22,0.12), 0 0 0 1px rgba(212,175,55,0.1);
pointer-events: none;
opacity: 0;
transition: opacity 2s ease 2s;
}
.sa-horario.revealed {
opacity: 1;
}
.sa-horario-badge {
background: linear-gradient(135deg, var(--wine) 0%, #8b1a2b 100%);
color: #fff;
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
}
.sa-horario-info {
display: flex;
align-items: center;
gap: 10px;
}
.sa-horario-item {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
color: var(--wine);
white-space: nowrap;
}
.sa-horario-item svg {
color: var(--gold);
flex-shrink: 0;
}
.sa-horario-divider {
width: 1.5px;
height: 18px;
background: rgba(212,175,55,0.5);
}
@media (max-width: 768px) {
.sa-horario { right: 2%; top: 2%; padding: 6px 10px 8px; transform: scale(0.75); transform-origin: top right; }
.sa-horario-badge { font-size: 0.5rem; padding: 3px 8px; }
.sa-horario-item { font-size: 0.6rem; }
.sa-horario-item svg { width: 14px; height: 14px; }
}
.sa-photo {
position: relative;
z-index: 10;
max-height: 60vh;
width: auto;
object-fit: contain;
display: block;
filter: drop-shadow(0 30px 60px rgba(91,14,22,0.25));
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.sa-cards {
position: absolute;
display: flex;
flex-direction: column;
gap: 24px;
z-index: 20;
}
.sa-cards-left { left: 2%; top: 12%; }
.sa-cards-right { right: 2%; top: 28%; }
.sa-card-img {
width: 260px;
max-width: 38vw;
height: auto;
display: block;
filter: drop-shadow(0 12px 28px rgba(0,0,0,0.14));
border-radius: 12px;
}
.sa-cards-left .sa-card-img:nth-child(2) { margin-left: -20px; }
.sa-cards-right .sa-card-img:nth-child(1) { margin-left: 20px; }
@media (min-width: 1024px) {
.sa-cards-left { left: 4%; }
.sa-cards-right { right: 4%; }
.sa-card-img { width: 320px; }
}
@media (max-width: 560px) {
.sa-card-img { width: 180px; max-width: 38vw; }
.sa-cards { gap: 10px; }
.sa-cards-left { left: -2%; top: 8%; }
.sa-cards-right { right: -2%; top: 38%; }
.sa-cards-left .sa-card-img:nth-child(2) { margin-left: 0; }
.sa-cards-right .sa-card-img:nth-child(1) { margin-left: 0; }
}
.sa-text-wrap {
width: 100%;
padding: 0 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 30;
}
.sa-headline {
font-family: var(--font-serif);
font-style: normal;
font-weight: 400;
font-size: clamp(1.8rem, 4vw, 3.4rem);
color: var(--wine);
line-height: 1.1;
letter-spacing: -0.005em;
max-width: 920px;
margin: 0;
}
.sa-char {
opacity: 0;
display: inline;
transition: opacity .15s ease, color .3s ease;
}
.sa-char.sa-highlight {
color: var(--gold-deep);
font-weight: 600;
}
.sa-char.sa-active { opacity: 1; }
.sa-sub {
margin-top: 24px;
font-family: var(--font-sans);
font-size: clamp(0.85rem, 1.1vw, 1.05rem);
color: rgba(26,6,8,0.65);
max-width: 680px;
opacity: 0;
transform: translateY(16px);
transition: opacity .7s ease, transform .7s ease;
line-height: 1.5;
}
.sa-sub strong {
color: var(--gold-deep);
font-weight: 600;
}
@media (min-width: 1024px) {
.sa-photo-wrap { max-width: 640px; margin-bottom: 60px; }
.sa-photo { max-height: 65vh; }
.sa-headline { font-size: clamp(1.8rem, 2.6vw, 2.6rem); max-width: 760px; }
.sa-sub { margin-top: 18px; max-width: 600px; }
}
@media (max-width: 768px) {
.sa-photo-wrap {
max-width: 85vw;
margin-bottom: 16px;
}
.sa-photo {
max-height: 55vh;
filter: drop-shadow(0 18px 36px rgba(91,14,22,0.20));
}
.sa-text-wrap {
padding: 0 20px;
margin-top: 8px;
}
.sa-headline {
font-size: clamp(1.35rem, 5.2vw, 1.9rem);
line-height: 1.25;
max-width: 100%;
}
.sa-sub {
font-size: 0.95rem;
margin-top: 16px;
line-height: 1.55;
max-width: 92%;
}
}
@media (max-width: 480px) {
.sa-photo-wrap { max-width: 80vw; }
.sa-photo { max-height: 50vh; }
.sa-headline { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
}
/* --- BLOCO 03: CONTRASTE 99% vs 1% (NOVO DESIGN) --- */
:root {
--primary-red: #580a11;
--cream-bg: #fffcf8;
--gold-accent: #d4af37;
--text-dark: #2a2a2a;
--text-light: #fdfdfd;
--border-light: rgba(0, 0, 0, 0.06);
--border-dark: rgba(255, 255, 255, 0.08);
--skin-color: #f4cda5;
--skin-shadow: #e3b88e;
--blush: rgba(255, 105, 132, 0.4);
--hair-sad: #4a3831;
--sweater-sad: #9ca3af;
--pants-sad: #4b5563;
--blazer-sad: #94a3b8;
--hair-happy: #2d1c11;
--blazer-happy: #ffffff;
--pants-happy: #111827;
}
.card-container {
display: flex;
gap: 28px;
max-width: 1100px;
width: 100%;
background: transparent;
border-radius: 0;
overflow: visible;
box-shadow: none;
position: relative;
margin: 40px auto;
}
.side {
width: calc(50% - 14px);
padding: 70px 60px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 24px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
position: relative;
overflow: hidden;
}
.side-99 {
background-color: var(--cream-bg);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.side-1 {
background-color: var(--primary-red);
border: 1px solid rgba(212, 175, 55, 0.22);
}
.divider-container {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--gold-accent);
transform: translateX(-50%);
z-index: 10;
}
.divider-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background-color: var(--gold-accent);
border-radius: 50%;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
animation: pulse-dot 3s infinite ease-in-out;
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.4); }
50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 25px rgba(212, 175, 55, 0.3); }
}
.percentage-title {
font-family: var(--font-headline);
font-size: 5rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
letter-spacing: -0.03em;
}
.side-99 .percentage-title { color: var(--primary-red); }
.side-1 .percentage-title { color: var(--gold-accent); }
.subtitle {
font-family: 'Playfair Display', var(--font-serif), serif;
font-style: italic;
font-size: 1.15rem;
text-align: center;
margin-bottom: 3rem;
line-height: 1.4;
}
.side-99 .subtitle { color: #4a4a4a; }
.side-1 .subtitle { color: #f3f4f6; opacity: 0.95; }
.features-list { width: 100%; max-width: 380px; z-index: 10; }
.feature-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
}
.side-99 .feature-item { border-bottom: 1px solid var(--border-light); }
.side-1 .feature-item { border-bottom: 1px solid var(--border-dark); }
.feature-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.icon-circle {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 11px;
margin-top: 2px;
}
.side-99 .icon-circle { background-color: #e5e7eb; color: #6b7280; font-weight: bold; }
.side-1 .icon-circle { background-color: rgba(212, 175, 55, 0.15); color: var(--gold-accent); }
.feature-text { font-size: 0.95rem; line-height: 1.5; font-weight: 400; }
.side-99 .feature-text { color: #4b5563; }
.side-1 .feature-text { color: #e5e7eb; }
/* Animações da Menina Triste */
.sad-chest { animation: sadBreathe 5s infinite ease-in-out; transform-origin: 50px 75px; }
@keyframes sadBreathe {
0%, 100% { transform: scaleY(1) translateY(0); }
50% { transform: scaleY(0.97) translateY(2px); }
}
.sad-head-group { animation: sadHeadNod 6s infinite ease-in-out; transform-origin: 50px 38px; }
@keyframes sadHeadNod {
0%, 100% { transform: rotate(1deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(3px); }
}
.sad-arm-r-upper { animation: wipeUpper 6s infinite ease-in-out; }
.sad-arm-r-lower { animation: wipeLower 6s infinite ease-in-out; }
@keyframes wipeUpper {
0%, 15%, 85%, 100% { transform: rotate(0deg); }
35%, 65% { transform: rotate(-130deg); }
}
@keyframes wipeLower {
0%, 15%, 85%, 100% { transform: rotate(0deg); }
35%, 65% { transform: rotate(-25deg); }
45% { transform: rotate(-15deg); }
55% { transform: rotate(-35deg); }
}
.tear { animation: tearFall 2s infinite linear; opacity: 0; }
.tear-1 { animation-delay: 0.5s; }
.tear-2 { animation-delay: 1.2s; }
@keyframes tearFall {
0% { transform: translateY(0); opacity: 1; }
50% { opacity: 1; }
100% { transform: translateY(15px); opacity: 0; }
}
/* Container das ilustrações (substitui utilitárias Tailwind w-64 h-64) */
.side .relative.w-64.h-64 {
position: relative;
width: 16rem;
height: 16rem;
margin-top: 0.5rem;
margin-bottom: 2rem;
}
.side-1 .relative.w-64.h-64 { z-index: 10; overflow: visible; }
.side .relative.w-64.h-64 > svg { width: 100%; height: 100%; overflow: visible; }
/* Animações da Menina Feliz */
.happy-body { animation: happyJump 6s infinite ease-in-out; transform-origin: 50px 75px; }
@keyframes happyJump {
0%, 30% { transform: translateY(0); }
35% { transform: translateY(2px); }
40% { transform: translateY(-6px); }
45% { transform: translateY(-2px); }
50% { transform: translateY(-6px); }
55% { transform: translateY(-2px); }
60% { transform: translateY(-6px); }
65% { transform: translateY(-2px); }
70% { transform: translateY(-5px); }
75% { transform: translateY(2px); }
80%, 100% { transform: translateY(0); }
}
.happy-arm-l-upper { transform: rotate(5deg); }
.happy-arm-r-upper { animation: cheerUpper 6s infinite ease-in-out; }
.happy-arm-r-lower { animation: cheerLower 6s infinite ease-in-out; }
@keyframes cheerUpper {
0%, 30% { transform: rotate(0deg); }
40%, 70% { transform: rotate(-165deg); }
80%, 100% { transform: rotate(0deg); }
}
@keyframes cheerLower {
0%, 30% { transform: rotate(0deg); }
5%, 15%, 25% { transform: rotate(-5deg); }
10%, 20% { transform: rotate(5deg); }
40%, 70% { transform: rotate(60deg); }
80%, 100% { transform: rotate(0deg); }
}
.phone-glow { animation: pulseGlow 2s infinite alternate; }
@keyframes pulseGlow {
0% { opacity: 0.6; } 100% { opacity: 1; }
}
.sales-notification-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 15;
overflow: visible;
}
.sale-toast {
position: absolute;
background: rgba(255, 255, 255, 0.98);
color: #166534;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
opacity: 0;
transform: scale(0.5) translateY(20px);
}
.sale-toast::before {
content: '💳';
display: inline-flex;
font-size: 14px;
}
@keyframes popUpToast {
0%, 5% { opacity: 0; transform: scale(0.5) translateY(30px); }
10% { opacity: 1; transform: scale(1.1) translateY(-5px); }
15%, 50% { opacity: 1; transform: scale(1) translateY(0); }
55%, 100% { opacity: 0; transform: scale(0.8) translateY(-40px); }
}
.sale-toast { white-space: nowrap; }
.toast-1 { right: 105%; top: -10%; animation: popUpToast 6s infinite 2.4s; }
.toast-4 { left: 105%; top: -10%; animation: popUpToast 6s infinite 3.0s; }
.toast-3 { right: 105%; bottom: -5%; top: auto; animation: popUpToast 6s infinite 2.8s; color: #4338ca; }
.toast-3::before { content: '🎓'; }
.toast-2 { left: 60%; bottom: -5%; top: auto; animation: popUpToast 6s infinite 2.6s; }
@media (max-width: 850px) {
.card-container { flex-direction: column; gap: 16px; margin: 20px auto; overflow: hidden; }
.side { width: 100%; padding: 20px 18px; border-radius: 20px; overflow: hidden; }
.divider-container { display: none; }
.side-99 { border-bottom: none; }
.percentage-title { font-size: 2.5rem; margin-bottom: 0.15rem; }
.subtitle { font-size: 0.88rem; margin-bottom: 0.75rem; }
.side .relative.w-64.h-64 { width: 8rem; height: 8rem; margin-top: 1.75rem; margin-bottom: 2rem; }
.sale-toast { font-size: 8px; padding: 3px 5px; }
.toast-1 { right: auto; left: -60%; top: -15%; }
.toast-4 { left: auto; right: -60%; top: -15%; }
.toast-3 { right: auto; left: -60%; bottom: -10%; }
.toast-2 { left: auto; right: -60%; bottom: -10%; }
.feature-item { padding: 6px 0; }
.feature-text { font-size: 0.82rem; line-height: 1.3; }
.icon-circle { width: 24px; height: 24px; font-size: 0.75rem; }
}
/* ===== QUOTE SECTION (Filosofía Agora Mentora) ===== */
.qs-section {
position: relative;
width: 100%;
padding: 2rem 1rem 0rem 1rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: var(--font-sans, sans-serif);
/* border-bottom removido para não quebrar o layout dentro do container, ou colocar uma div separada se precisar de linha total */
}
@media (min-width: 768px) {
.qs-section { padding: 3rem 2rem 0rem 2rem; }
}
/* Barra lateral escura — removida */
.qs-sidebar { display: none; }
/* Conteúdo centrado */
.qs-content {
max-width: 48rem;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 10;
}
@media (min-width: 640px) { .qs-content { padding: 0 3rem; } }
@media (min-width: 768px) { .qs-content { padding: 0 4rem; } }
/* Linhas douradas */
.qs-line {
height: 1px;
background-color: #bd9a55;
width: 0;
opacity: 0;
transition: width 1s ease-out, opacity 1s ease-out;
}
.qs-line--top { margin-bottom: 2rem; }
.qs-line--bottom { margin-top: 2rem; }
@media (min-width: 768px) {
.qs-line--top { margin-bottom: 3rem; }
.qs-line--bottom { margin-top: 3rem; }
}
/* Estado visível da linha */
.qs-section.is-visible .qs-line--top {
width: 4rem;
opacity: 1;
}
.qs-section.is-visible .qs-line--bottom {
width: 4rem;
opacity: 1;
transition-delay: 1s;
}
@media (min-width: 768px) {
.qs-section.is-visible .qs-line--top,
.qs-section.is-visible .qs-line--bottom { width: 6rem; }
}
/* Citação */
.qs-quote {
font-family: var(--font-serif, Georgia, serif);
font-style: italic;
font-size: 1.25rem;
color: #521c22;
line-height: 1.75;
opacity: 0;
transform: translateY(2rem);
transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}
@media (min-width: 640px) { .qs-quote { font-size: 1.5rem; } }
@media (min-width: 768px) { .qs-quote { font-size: 1.875rem; } }
.qs-section.is-visible .qs-quote {
opacity: 1;
transform: translateY(0);
}
/* Autor */
.qs-author {
margin-top: 2rem;
color: #a68a56;
font-weight: 500;
letter-spacing: 0.15em;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-transform: uppercase;
opacity: 0;
transform: translateY(1rem);
transition: opacity 1s ease-out 0.7s, transform 1s ease-out 0.7s;
}
@media (min-width: 640px) { .qs-author { font-size: 0.875rem; gap: 1rem; } }
@media (min-width: 768px) { .qs-author { font-size: 1rem; margin-top: 2.5rem; } }
.qs-section.is-visible .qs-author {
opacity: 1;
transform: translateY(0);
}
/* Traço lateral do autor */
.qs-author-dash {
display: none;
width: 1rem;
height: 1px;
background-color: #a68a56;
}
@media (min-width: 640px) { .qs-author-dash { display: block; } }
@media (min-width: 768px) { .qs-author-dash { width: 1.5rem; } }
/* ============================================================
Carrossel 3D dos Módulos
============================================================ */
.module-carousel-wrap {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 3rem;
margin-bottom: 7rem;
position: relative;
z-index: 2;
}
.module-carousel {
position: relative;
width: 100%;
max-width: 1000px;
height: 460px;
perspective: 1200px;
overflow: visible;
background: radial-gradient(circle at center, rgba(200, 160, 100, 0.06) 0%, transparent 60%);
}
.mc-card {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 380px;
margin-left: -160px;
margin-top: -190px;
background-color: #5A1217;
border: 1px solid rgba(200, 160, 100, 0.3);
border-radius: 14px;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.55s ease, filter 0.55s ease, border-color 0.55s ease;
transform-style: preserve-3d;
backface-visibility: hidden;
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
cursor: pointer;
opacity: 0;
pointer-events: none;
}
.mc-card.mc-active {
transform: translateX(0) translateZ(0) scale(1);
opacity: 1;
z-index: 10;
filter: blur(0);
border-color: rgba(200, 160, 100, 0.85);
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 160, 100, 0.25);
pointer-events: auto;
}
.mc-card.mc-prev {
transform: translateX(-58%) translateZ(-150px) rotateY(18deg) scale(0.85);
opacity: 0.55;
z-index: 5;
filter: blur(3px);
pointer-events: auto;
}
.mc-card.mc-next {
transform: translateX(58%) translateZ(-150px) rotateY(-18deg) scale(0.85);
opacity: 0.55;
z-index: 5;
filter: blur(3px);
pointer-events: auto;
}
.mc-card.mc-hidden-left {
transform: translateX(-100%) translateZ(-300px) rotateY(30deg) scale(0.7);
opacity: 0;
z-index: 1;
}
.mc-card.mc-hidden-right {
transform: translateX(100%) translateZ(-300px) rotateY(-30deg) scale(0.7);
opacity: 0;
z-index: 1;
}
.mc-label {
color: #C8A064;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
font-family: var(--font-sans), system-ui, sans-serif;
}
.mc-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
margin: 0 0 1rem 0;
color: #F8ECE0;
}
.mc-title em { font-style: italic; color: #E6C887; }
.mc-desc {
font-size: 0.95rem;
color: rgba(248, 236, 224, 0.78);
line-height: 1.55;
margin: 0;
}
.mc-list {
margin: 0.5rem 0 0 0;
list-style: disc;
padding-left: 1.25rem;
font-size: 0.95rem;
color: rgba(248, 236, 224, 0.85);
}
.mc-list li { margin-bottom: 0.4rem; }
.mc-instruction {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.25rem;
color: rgba(248, 236, 224, 0.6);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mc-instruction-icon {
width: 18px;
height: 18px;
color: #C8A064;
animation: mc-pulse 2s infinite ease-in-out;
}
@keyframes mc-pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.15); opacity: 1; }
}
.mc-controls {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
z-index: 20;
}
.mc-nav-btn {
background: transparent;
border: 1px solid rgba(200, 160, 100, 0.5);
color: #C8A064;
padding: 0.55rem 1.5rem;
border-radius: 9999px;
cursor: pointer;
transition: background 0.3s, border-color 0.3s, color 0.3s;
font-family: var(--font-sans), system-ui, sans-serif;
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.08em;
font-weight: 600;
}
.mc-nav-btn:hover {
background: rgba(200, 160, 100, 0.12);
border-color: #C8A064;
color: #E6C887;
}
@media (max-width: 720px) {
.module-carousel { height: 420px; }
.mc-card { width: 260px; height: 340px; margin-left: -130px; margin-top: -170px; padding: 1.5rem; }
.mc-card.mc-prev { transform: translateX(-50%) translateZ(-120px) rotateY(18deg) scale(0.78); }
.mc-card.mc-next { transform: translateX(50%) translateZ(-120px) rotateY(-18deg) scale(0.78); }
.mc-title { font-size: 1.25rem; }
.mc-desc, .mc-list { font-size: 0.88rem; }
}
/* ============================================================
Agenda animada (scroll-driven)
============================================================ */
.agenda-scroll-container {
position: relative;
height: 600vh;
}
@media (max-width: 768px) {
.agenda-scroll-container { height: 350vh; }
}
.agenda-sticky-scene {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 3000px;
overflow: hidden;
}
.agenda-scroll-hint {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
color: var(--wine, #4a1b1b);
font-size: 0.72rem;
letter-spacing: 0.25em;
text-transform: uppercase;
z-index: 200;
opacity: 0.55;
font-family: var(--font-sans), system-ui, sans-serif;
}
.agenda-wrapper {
position: relative;
width: 460px;
height: 76vh;
max-height: 680px;
transform-style: preserve-3d;
}
.agenda-page {
position: absolute;
inset: 0;
transform-origin: left center;
transform-style: preserve-3d;
}
.agenda-page-side {
position: absolute;
inset: 0;
backface-visibility: hidden;
display: flex;
flex-direction: column;
padding: 38px;
box-sizing: border-box;
border-radius: 0 12px 12px 0;
box-shadow: inset 15px 0 30px rgba(0, 0, 0, 0.15);
background-color: #f7f1e6;
}
.agenda-page-side.back {
transform: rotateY(180deg);
border-radius: 12px 0 0 12px;
box-shadow: inset -15px 0 30px rgba(0, 0, 0, 0.15);
background-color: #f0e8db;
}
.agenda-page-side::before {
content: "";
position: absolute;
inset: 0;
background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
opacity: 0.3;
pointer-events: none;
}
.agenda-page-cover .front {
background-color: #6b1e28;
background-image: url('https://www.transparenttextures.com/patterns/leather.png');
background-blend-mode: overlay;
box-shadow: inset 0 0 60px rgba(0,0,0,0.3), inset 15px 0 30px rgba(0,0,0,0.15);
color: var(--gold-light, #C8A064);
padding: 0;
border-radius: 0 15px 15px 0;
}
.agenda-cover-design {
height: 100%; width: 100%;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
border-left: 20px solid rgba(0, 0, 0, 0.35);
position: relative;
}
.agenda-cover-design::before,
.agenda-cover-design::after {
content: "";
position: absolute; top: 0; width: 2px; height: 100%;
background-color: var(--gold-light, #C8A064);
opacity: 0.5;
}
.agenda-cover-design::before { left: 12%; }
.agenda-cover-design::after { right: 12%; }
.agenda-cover-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.4rem;
letter-spacing: 0.3em;
margin: 0;
}
.agenda-cover-line { width: 50px; height: 1px; background: var(--gold-light, #C8A064); margin: 25px 0; }
.agenda-cover-year { letter-spacing: 0.6em; font-weight: 300; margin: 0; }
.agenda-cover-back-inner {
width: 85%; height: 90%;
border: 1px solid var(--gold-light, #C8A064);
opacity: 0.3;
margin: auto;
}
.agenda-page-cover .back {
background-color: #551520;
display: flex;
align-items: center;
justify-content: center;
}
.agenda-content {
text-align: center;
color: var(--wine, #4a1b1b);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-bottom: 20px;
}
.agenda-eyebrow {
color: var(--gold-deep, #b59e6b);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.78rem;
position: relative;
z-index: 10;
font-family: var(--font-sans), system-ui, sans-serif;
}
.agenda-date-section {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.1rem;
position: relative;
display: inline-block;
align-self: center;
padding: 18px 36px;
}
.agenda-date-section > span,
.agenda-time-value,
.agenda-time-label { position: relative; z-index: 10; }
.agenda-date-section em { font-style: italic; color: var(--gold-deep, #b59e6b); }
.agenda-divider { width: 30%; height: 1px; background: var(--gold-deep, #b59e6b); margin: 0 auto; opacity: 0.5; }
.agenda-times { display: flex; justify-content: space-around; width: 100%; }
.agenda-time-box { position: relative; padding: 18px 26px; }
.agenda-time-label {
font-size: 0.72rem;
color: var(--gold-deep, #b59e6b);
margin-bottom: 8px;
letter-spacing: 0.2em;
font-family: var(--font-sans), system-ui, sans-serif;
}
.agenda-time-value {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.1rem;
font-weight: 700;
}
.agenda-note {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 1rem;
line-height: 1.55;
color: #5a3a3a;
padding: 0 32px;
margin: 4px 0 0;
position: relative;
z-index: 10;
}
.agenda-circle-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140%;
height: 150%;
pointer-events: none;
overflow: visible;
z-index: 1;
mix-blend-mode: multiply;
}
.agenda-circle-path {
fill: none;
stroke: #d63031;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 2500;
stroke-dashoffset: 2500;
opacity: 0.85;
filter: blur(0.2px);
}
@media (max-width: 640px) {
.agenda-sticky-scene { perspective: 1800px; }
.agenda-wrapper { width: 62vw; max-width: 280px; height: 58vh; max-height: 460px; }
.agenda-scroll-hint { bottom: 16px; font-size: 0.62rem; }
.agenda-page-side { padding: 16px 12px; }
.agenda-date-section { font-size: 1.3rem; padding: 8px 14px; }
.agenda-time-value { font-size: 1.3rem; }
.agenda-time-box { padding: 10px 12px; }
.agenda-note { font-size: 0.78rem; padding: 0 6px; line-height: 1.4; }
.agenda-cover-title { font-size: 1.4rem; letter-spacing: 0.15em; }
.agenda-cover-design { border-left-width: 12px; }
.agenda-eyebrow { font-size: 0.62rem; letter-spacing: 0.18em; }
.agenda-divider { width: 40%; }
.agenda-time-label { font-size: 0.6rem; }
}