/* Fontes carregadas via no (preconnect + stylesheet) —
@import criava uma cadeia de bloqueio de renderização no 3G. */
:root {
/* Paleta de Cores Premium — Crochê Artesanal
Contraste: --color-accent (3,58:1 no cream) é só para texto GRANDE (≥18px / bold ≥18.66px),
bordas e decoração. Texto em tamanho de corpo e fundos de botão usam --color-accent-ink. */
--bg-primary: #FCFAF7;
--bg-secondary: #F5EFE6;
--bg-card: #FFFFFF;
--text-primary: #261A13;
--text-secondary: #5C4F46;
--text-tertiary: #7A6B60; /* apoio discreto que ainda lê: 5,12:1 sobre branco */
--color-accent: #C66B53;
--color-accent-ink: #B05740; /* branco sobre ele = 4,90:1; sobre cream = 4,71:1 — passa AA */
--color-accent-hover: #9C4A35; /* branco sobre ele = 6,10:1 */
--color-accent-soft: rgba(198, 107, 83, 0.08);
--color-gold: #CCA778; /* decorativo: bordas, fades */
--color-gold-ink: #96703C; /* estrelas e ícones dourados sobre branco = 4,49:1 */
--color-gold-light: #F4EFE6;
--color-success: #5D7052;
--color-success-soft: rgba(93, 112, 82, 0.08);
--color-border: #E8E2D7;
--color-shadow: rgba(38, 26, 19, 0.05);
--color-shadow-hover: rgba(38, 26, 19, 0.12);
/* Fontes */
--font-title: 'Playfair Display', Georgia, serif;
--font-sans: 'Plus Jakarta Sans', sans-serif;
/* Layout */
--container-width: 1100px;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
/* Z-index scale */
--z-base: 1;
--z-sticky: 10;
--z-overlay: 50;
}
*, *::before, *::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* ====== TOP ANNOUNCEMENT BAR ====== */
.top-announcement-bar {
position: sticky;
top: 0;
z-index: 1000;
background: var(--bg-secondary);
border-bottom: 1px solid var(--color-border);
padding: 9px 16px;
text-align: center;
font-family: var(--font-sans);
font-size: 13.5px;
color: var(--text-primary);
letter-spacing: 0.02em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.top-announcement-content {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 1200px;
margin: 0 auto;
}
.top-announcement-bar strong {
color: var(--color-accent-ink);
font-weight: 700;
}
#announcement-day {
color: var(--color-accent);
text-transform: uppercase;
font-weight: 700;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--font-title);
color: var(--text-primary);
margin-top: 0;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
text-wrap: balance;
}
/* Escala única de headline para H2 de seção (DESIGN.md: headline) */
h2 { font-size: clamp(24px, 4vw, 36px); }
p {
color: var(--text-secondary);
margin-top: 0;
margin-bottom: 1.25rem;
max-width: 65ch;
text-wrap: pretty;
}
a {
color: var(--color-accent-ink);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover { color: var(--color-accent-hover); }
img {
max-width: 100%;
height: auto;
display: block;
}
/* ====== ACCESSIBILITY ====== */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Visually hidden for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ====== CONTAINER ====== */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.container { padding: 0 32px; }
}
/* ====== BUTTONS ====== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 40px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--border-radius-md);
border: none;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
text-decoration: none;
position: relative;
-webkit-tap-highlight-color: transparent;
min-height: 56px;
min-width: 44px;
}
.btn-primary {
background-color: var(--color-accent-ink); /* branco 4,90:1 — passa AA em 15px bold */
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(176, 87, 64, 0.3);
}
/* Hover só onde há mouse: no toque, :hover "gruda" após o tap e o botão fica levantado */
@media (hover: hover) {
.btn-primary:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(176, 87, 64, 0.4);
}
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(176, 87, 64, 0.2);
}
.btn-secondary {
background: transparent;
color: var(--color-accent-ink);
border: 2px solid var(--color-border);
box-shadow: none;
font-weight: 600;
font-size: 13px;
padding: 12px 24px;
min-height: 44px;
}
@media (hover: hover) {
.btn-secondary:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
color: var(--color-accent-hover);
}
}
/* Pulse animation — uses transform/opacity only for perf */
@keyframes pulse-cta {
0%, 100% { box-shadow: 0 0 0 0 rgba(176, 87, 64, 0.45); }
50% { box-shadow: 0 0 0 10px rgba(176, 87, 64, 0); }
}
.pulse-button { animation: pulse-cta 2.5s ease-in-out infinite; }
/* CTA verde com efeito sutil de recompensa (glow pulsante) */
@keyframes pulse-cta-green {
0%, 100% { box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35), 0 0 0 0 rgba(34, 197, 94, 0.45); }
50% { box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45), 0 0 0 10px rgba(34, 197, 94, 0); }
}
.btn-cta-green {
background-color: #22C55E;
animation: pulse-cta-green 2.2s ease-in-out infinite;
}
@media (hover: hover) {
.btn-cta-green:hover {
background-color: #16A34A;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(34, 197, 94, 0.5);
}
}
.btn-cta-green:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
/* ====== SECTIONS ====== */
.section {
padding: 72px 0;
position: relative;
}
@media (max-width: 768px) {
.section { padding: 48px 0; }
}
.section-bg-alt { background-color: var(--bg-secondary); }
.text-center { text-align: center; }
/* ====== BADGE ====== */
.badge {
display: inline-block;
padding: 5px 14px;
background-color: var(--color-gold-light);
color: var(--text-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 50px;
border: 1px solid var(--color-gold);
margin-bottom: 12px;
font-family: var(--font-sans);
}
/* Texto em destaque: -ink em tamanho de corpo (AA); headings grandes podem usar o tom claro */
.accent-text { color: var(--color-accent-ink); }
h1 .accent-text, h2 .accent-text { color: var(--color-accent); } /* texto grande: 3,58:1 ≥ 3:1 ✓ */
/* ====== FLOATING NAV BAR ====== */
.floating-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-sticky);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid var(--color-border);
/* Respeita a área segura do iPhone (home indicator / notch em paisagem) */
padding: 12px max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.floating-bar.visible { transform: translateY(0); }
.floating-bar .btn {
font-size: 13px;
padding: 14px 28px;
width: 100%;
max-width: 360px;
}
@media (min-width: 769px) {
.floating-bar { display: none; }
}
/* ====== TRUST BADGES ====== */
.trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-top: 20px;
}
.trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
}
.trust-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-success);
}
.trust-emoji { font-size: 14px; }
@media (max-width: 992px) {
.trust-row { justify-content: center; }
}
/* ====== HERO SECTION ====== */
.hero-grid {
display: grid;
grid-template-columns: 1fr 0.85fr;
gap: 56px;
align-items: center;
}
.hero-content { text-align: left; }
.hero-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-actions .btn { align-self: flex-start; }
.hero-title {
font-size: clamp(23px, 3.6vw, 38px);
line-height: 1.22;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.hero-subtitle {
font-size: clamp(14.5px, 1.8vw, 16px);
color: var(--text-secondary);
margin-bottom: 22px;
font-weight: 400;
line-height: 1.55;
}
/* A vitrine da hero é a única superfície com sombra em repouso (e sem borda:
sombra OU borda, nunca as duas como decoração) */
.hero-image-wrapper {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: 0 20px 50px var(--color-shadow-hover);
aspect-ratio: 4/5;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
@media (hover: hover) {
.hero-image-wrapper:hover .hero-image { transform: scale(1.03); }
}
/* Decorative line */
.hero-image-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
}
@media (max-width: 992px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 28px;
text-align: center;
}
.hero-content { text-align: center; }
.hero-title {
font-size: clamp(21px, 5.5vw, 28px);
line-height: 1.24;
margin-bottom: 14px;
}
.hero-subtitle {
font-size: 14.5px;
margin-bottom: 18px;
}
.hero-actions .btn { align-self: center; } /* texto centralizado pede botões centralizados */
.hero-image-wrapper {
max-width: 360px;
margin: 0 auto;
aspect-ratio: 3/4;
}
}
/* ====== OFFER SECTION ====== */
.app-features-section {
position: relative;
overflow: hidden;
padding: clamp(56px, 7vw, 80px) 0;
background: var(--bg-card);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.app-features-section::before,
.app-features-section::after {
content: '';
position: absolute;
width: 260px;
aspect-ratio: 1;
border-radius: 50%;
pointer-events: none;
filter: blur(2px);
opacity: 0.42;
}
.app-features-section::before {
top: -175px;
left: -110px;
background: radial-gradient(circle at 62% 62%, rgba(198, 107, 83, 0.2), rgba(198, 107, 83, 0) 68%);
}
.app-features-section::after {
right: -130px;
bottom: -190px;
background: radial-gradient(circle at 35% 35%, rgba(204, 167, 120, 0.2), rgba(204, 167, 120, 0) 70%);
}
.app-features-section .container {
position: relative;
z-index: var(--z-base);
}
.app-features-heading {
max-width: 760px;
margin: 0 auto 36px;
}
.app-features-badge {
margin-bottom: 14px;
border-color: rgba(176, 87, 64, 0.38);
color: var(--color-accent-ink);
background: rgba(198, 107, 83, 0.05);
}
.app-features-heading h2 {
margin-bottom: 12px;
font-size: clamp(26px, 4vw, 36px);
text-wrap: balance;
}
.app-features-heading p {
max-width: 66ch;
margin: 0 auto;
color: var(--text-secondary);
font-size: 16px;
line-height: 1.65;
text-wrap: pretty;
}
.app-features-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
max-width: 1080px;
margin: 0 auto;
}
.app-feature-card {
min-width: 0;
padding: 26px;
background: #FFFDF8;
border: 1px solid #EBDFCE;
border-radius: var(--border-radius-md);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.28s ease,
box-shadow 0.28s ease;
}
.app-feature-icon {
position: relative;
display: grid;
place-items: center;
width: 60px;
height: 60px;
margin-bottom: 17px;
color: var(--color-accent-ink);
border: 1px solid #ECCDBC;
border-radius: 50%;
background:
radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.92) 0 8%, transparent 27%),
radial-gradient(circle at 68% 72%, rgba(198, 107, 83, 0.13) 0 26%, transparent 61%),
linear-gradient(135deg, #FBEDE5, #F3D9C8);
box-shadow: inset 7px 5px 14px rgba(255, 255, 255, 0.52),
0 7px 16px rgba(176, 87, 64, 0.08);
}
.app-feature-icon::after {
content: '';
position: absolute;
inset: 5px 8px 8px 5px;
border-radius: 48% 52% 46% 54%;
border: 1px solid rgba(255, 255, 255, 0.44);
transform: rotate(-13deg);
}
.app-feature-icon svg {
position: relative;
z-index: 1;
width: 29px;
height: 29px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-feature-icon .app-feature-icon-dots {
stroke-width: 2.5;
}
.app-feature-card h3 {
margin: 0 0 8px;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
text-wrap: balance;
}
.app-feature-card p {
margin: 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.65;
text-wrap: pretty;
}
@media (hover: hover) {
.app-feature-card:hover {
transform: translateY(-4px);
border-color: #DFAF97;
box-shadow: 0 14px 28px rgba(122, 89, 60, 0.12);
}
.app-feature-card:hover .app-feature-icon {
color: var(--color-accent-night, #9C4A35);
}
}
@media (max-width: 840px) {
.app-features-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.app-features-section {
padding: 52px 0;
}
.app-features-heading {
margin-bottom: 28px;
}
.app-features-heading p {
font-size: 15px;
}
.app-features-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.app-feature-card {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
column-gap: 16px;
padding: 20px;
}
.app-feature-icon {
grid-row: 1 / span 2;
width: 54px;
height: 54px;
margin: 0;
}
.app-feature-icon svg {
width: 26px;
height: 26px;
}
.app-feature-card h3 {
align-self: end;
font-size: 16px;
}
.app-feature-card p {
align-self: start;
}
}
@media (prefers-reduced-motion: reduce) {
.app-feature-card {
transition: none;
}
}
.offer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.benefits-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 28px;
}
.benefit-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px;
border-radius: var(--border-radius-sm);
transition: background-color 0.2s ease;
cursor: default;
}
@media (hover: hover) {
.benefit-card:hover { background-color: var(--color-accent-soft); }
}
.benefit-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--color-success-soft);
color: var(--color-success);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
.benefit-title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 700;
margin-bottom: 2px;
color: var(--text-primary);
}
.benefit-desc {
font-size: 14px;
line-height: 1.5;
margin-bottom: 0;
color: var(--text-secondary);
max-width: 45ch;
}
/* ====== CHECKOUT BOX ====== */
.checkout-box {
background: var(--bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
padding: 36px;
text-align: center;
position: sticky;
top: 24px;
z-index: var(--z-base);
}
.price-box { margin: 20px 0; }
.price-old {
font-size: 21px;
font-weight: 700;
color: #705B50;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.price-old-strikethrough {
text-decoration: line-through 3px #D9381E;
text-decoration-color: #D9381E;
-webkit-text-decoration-color: #D9381E;
}
.discount-badge-tag {
background: #D9381E;
color: #FFFFFF;
font-size: 11.5px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
display: inline-flex;
align-items: center;
box-shadow: 0 3px 8px rgba(217, 56, 30, 0.3);
}
/* ====== TRIPLE SCARCITY & PROOF STYLES ====== */
@keyframes pulse-green {
0% { transform: scale(0.95); opacity: 0.8; }
50% { transform: scale(1.25); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.8; }
}
.live-visitors-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.25);
padding: 6px 14px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
color: #15803D;
margin-top: 14px;
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22C55E;
display: inline-block;
animation: pulse-green 1.5s infinite ease-in-out;
}
.price-new {
font-size: 44px;
font-weight: 700; /* peso 800 não é carregado; 700 é o peso real da família */
color: var(--color-accent);
font-family: var(--font-sans);
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
line-height: 1;
margin: 8px 0;
}
.price-new span {
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
}
.price-note {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}
/* Savings badge */
.savings-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: var(--color-success-soft);
color: var(--color-success);
font-size: 12px;
font-weight: 700;
border-radius: 50px;
margin-top: 8px;
}
/* Bonus Box */
.bonus-box {
margin-top: 24px;
padding: 16px;
background-color: var(--bg-secondary);
border-radius: var(--border-radius-sm);
border: 1px dashed var(--color-gold);
text-align: left;
}
.bonus-title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
color: var(--color-accent-ink);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.bonus-desc {
font-size: 13px;
margin-bottom: 0;
line-height: 1.5;
}
/* Trust row in checkout */
.checkout-trust {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 20px;
flex-wrap: wrap;
}
.checkout-trust-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text-secondary);
font-weight: 500;
}
@media (max-width: 992px) {
.offer-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.checkout-box {
position: relative;
top: 0;
padding: 28px 20px;
}
}
/* ====== WARRANTY SECTION ====== */
.warranty-card {
display: grid;
grid-template-columns: 150px 1fr;
gap: 32px;
align-items: center;
background: var(--bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
padding: 36px;
}
.warranty-seal-wrap {
display: grid;
place-items: center;
width: 150px;
}
.warranty-seal-image {
display: block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
clip-path: circle(48% at 50% 50%);
}
.warranty-content { text-align: left; }
.warranty-title { font-size: 22px; margin-bottom: 8px; }
.warranty-desc { font-size: 15px; margin-bottom: 0; }
@media (max-width: 768px) {
.warranty-card {
grid-template-columns: 1fr;
text-align: center;
gap: 20px;
padding: 28px 22px;
}
.warranty-seal-wrap {
width: 124px;
margin: 0 auto;
}
.warranty-seal-image {
width: 124px;
height: 124px;
}
.warranty-content { text-align: center; }
}
/* ====== FAQ SECTION ====== */
.faq-header { margin-bottom: 40px; }
.faq-list {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Acordeão nativo com /: abre e fecha sem JavaScript,
e a resposta nunca é cortada (sem max-height fixo). */
.faq-question {
width: 100%;
padding: 20px 24px;
background: none;
border: none;
text-align: left;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
min-height: 56px;
-webkit-tap-highlight-color: transparent;
list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-answer {
padding: 0 24px 20px;
text-align: left;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
}
.faq-answer p { margin: 0; padding-top: 4px; }
.faq-item[open] { border-color: var(--color-gold); box-shadow: 0 4px 12px var(--color-shadow); }
@media (prefers-reduced-motion: no-preference) {
.faq-item[open] .faq-answer { animation: fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
}
.faq-icon {
font-size: 20px;
color: var(--color-gold-ink);
transition: transform 0.25s ease;
flex-shrink: 0;
width: 24px;
text-align: center;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--color-accent-ink); }
.faq-cta-note {
font-size: 15px;
margin: 0 auto 16px;
max-width: 40ch;
color: var(--text-primary);
font-weight: 500;
}
/* ====== TESTIMONIALS ====== */
.testimonials-title { margin-bottom: 40px; }
.testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.testimonial-card {
background: var(--bg-card);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
padding: 28px;
text-align: left;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: box-shadow 0.2s ease;
}
@media (hover: hover) {
.testimonial-card:hover { box-shadow: 0 8px 24px var(--color-shadow-hover); }
}
.testimonial-stars { color: var(--color-gold-ink); margin-bottom: 12px; font-size: 16px; letter-spacing: 2px; }
.testimonial-text {
font-size: 14px;
line-height: 1.65;
font-style: italic;
margin-bottom: 20px;
flex-grow: 1;
color: var(--text-secondary);
}
.testimonial-user { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-secondary);
border: 1px solid var(--color-gold);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--text-primary);
font-size: 13px;
flex-shrink: 0;
}
.testimonial-name {
display: block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.testimonial-role { display: block; font-size: 11px; color: var(--text-secondary); }
@media (max-width: 768px) {
.testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ====== FOOTER ====== */
.footer {
background-color: #1F150F;
color: #F5EFE6;
padding: 48px 0 32px;
text-align: center;
}
.footer .container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* No mobile a barra flutuante (fixa, ~81px) fica sobre o fim da página.
Reserva espaço para que os links legais e o copyright nunca fiquem escondidos atrás dela. */
@media (max-width: 768px) {
.footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
.footer p { color: #9A8A7E; font-size: 13px; margin-bottom: 12px; text-align: center; }
.footer-brand {
margin-bottom: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.footer .footer-brand-name {
color: #FFFFFF;
font-size: 18px;
font-family: var(--font-title);
font-weight: 700;
margin: 0 0 4px;
text-align: center;
}
.footer .footer-brand-type {
color: #9A8A7E; /* 5,38:1 sobre madeira noturna */
font-size: 12px;
margin: 0;
text-align: center;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
width: 100%;
text-align: center;
}
.footer-links a {
color: #D4C4B4;
font-size: 13px;
transition: color 0.2s ease;
text-align: center;
}
.footer-links a:hover { color: var(--color-gold); }
.footer-disclaimer {
max-width: 700px;
margin: 0 auto 12px;
font-size: 11px !important;
color: #9A8A7E !important; /* 5,38:1 sobre #1F150F — passa AA */
text-align: center;
}
.footer-copyright {
text-align: center;
margin: 0 auto;
font-size: 11px;
color: #9A8A7E !important;
margin: 20px 0 0;
}
/* ====== MARQUEE SLIDER ====== */
.marquee-section {
padding: 48px 0;
overflow: hidden;
background-color: var(--bg-primary);
position: relative;
width: 100%;
}
/* Efeito degrade/fade nas laterais do slide para visualização premium */
.marquee-section::before,
.marquee-section::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 150px;
z-index: 2;
pointer-events: none;
}
.marquee-section::before {
left: 0;
background: linear-gradient(to right, var(--bg-primary) 15%, rgba(252, 250, 247, 0) 100%);
}
.marquee-section::after {
right: 0;
background: linear-gradient(to left, var(--bg-primary) 15%, rgba(252, 250, 247, 0) 100%);
}
.marquee-intro {
max-width: 600px;
margin: 0 auto;
font-size: 14px;
padding: 0 20px;
}
.marquee-container {
display: flex;
overflow: hidden;
width: 100%;
padding: 12px 0;
}
.marquee-track {
display: flex;
gap: 20px;
width: max-content;
animation: marquee-scroll 45s linear infinite;
}
/* Pausa no hover só faz sentido com mouse; no toque o dedo passa a rolar a página */
@media (hover: hover) {
.marquee-track:hover {
animation-play-state: paused;
}
}
.marquee-card {
flex-shrink: 0;
width: 230px;
aspect-ratio: 3/4;
border-radius: var(--border-radius-md);
overflow: hidden;
border: 1px solid var(--color-border);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
cursor: pointer;
background: var(--bg-card);
-webkit-tap-highlight-color: transparent;
}
.marquee-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
.marquee-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 16px 36px var(--color-shadow-hover);
border-color: var(--color-gold);
}
.marquee-card:hover img {
transform: scale(1.05);
}
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 10px));
}
}
@media (max-width: 768px) {
.marquee-section {
padding: 32px 0;
}
.marquee-card {
width: 165px;
border-radius: var(--border-radius-md);
}
.marquee-section::before,
.marquee-section::after {
width: 60px;
}
}
/* ====== UTILITY: Animated entrance ======
O conteúdo é visível por padrão (opacity 1 no estado base).
A animação apenas realça a entrada; se não rodar (aba oculta,
renderer sem repaint, animações desativadas), nada fica invisível. */
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in {
animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.animate-in.delay-1 { animation-delay: 0.1s; }
.animate-in.delay-2 { animation-delay: 0.2s; }
.animate-in.delay-3 { animation-delay: 0.3s; }
/* ================= CALCULATOR SECTION ================= */
/* ================= CALCULATOR SECTION (COMPACT & HIGH CONVERTING) ================= */
.calculator-section {
background-color: var(--bg-primary);
padding: 48px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.calculator-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.calculator-header {
margin-bottom: 24px;
max-width: 580px;
width: 100%;
}
.calculator-title {
font-family: var(--font-title);
font-size: clamp(22px, 3.8vw, 30px);
line-height: 1.25;
font-weight: 700;
margin: 0 0 10px;
text-align: center;
color: var(--text-primary);
}
.calculator-subtitle {
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.5;
text-align: center;
color: var(--text-secondary);
margin: 0 auto;
max-width: 480px;
}
.calculator-divider {
width: 48px;
height: 3.5px;
border-radius: 99px;
background-color: var(--color-accent);
margin: 12px auto 0;
}
/* Superfície de decisão compacta */
.calculator-card {
width: 100%;
max-width: 520px;
background-color: var(--bg-card);
border-radius: var(--border-radius-lg);
padding: 22px 20px;
box-shadow: 0 14px 40px var(--color-shadow);
border: 1px solid var(--color-border);
}
@media (max-width: 480px) {
.calculator-card {
padding: 18px 14px;
}
}
/* Faixa de exemplo enxuta por vestido */
.sim-strip {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-md);
padding: 10px 14px;
margin-bottom: 18px;
font-family: var(--font-sans);
}
.sim-strip-item {
display: flex;
flex-direction: column;
align-items: center;
}
.sim-strip-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: var(--text-secondary);
letter-spacing: 0.05em;
}
.sim-strip-val {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-top: 1px;
}
.sim-strip-sep {
font-size: 16px;
font-weight: 700;
color: var(--text-tertiary);
}
.sim-strip-item.highlight {
background: var(--color-success-soft);
padding: 4px 10px;
border-radius: var(--border-radius-sm);
border: 1px solid rgba(75, 114, 66, 0.2);
}
.sim-strip-item.highlight .sim-strip-label {
color: var(--color-success);
}
.sim-strip-item.highlight .sim-strip-val {
color: var(--color-success);
}
.calc-controls {
margin-top: 10px;
}
.slider-box {
margin-bottom: 16px;
}
.slider-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.slider-label {
font-weight: 600;
color: var(--text-primary);
font-size: 13.5px;
}
.slider-value {
font-weight: 700;
color: var(--color-accent-ink);
font-size: 19px;
background: var(--color-accent-soft);
padding: 2px 10px;
border-radius: 99px;
}
.calc-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 99px;
background-color: var(--color-border);
outline: none;
margin: 0;
}
.calc-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: var(--color-accent-ink);
cursor: pointer;
border: 3px solid #fff;
box-shadow: 0 3px 8px rgba(176, 87, 64, 0.4);
}
.calc-range::-moz-range-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
background-color: var(--color-accent-ink);
cursor: pointer;
border: 3px solid #fff;
box-shadow: 0 3px 8px rgba(176, 87, 64, 0.4);
}
.slider-ticks {
display: flex;
justify-content: space-between;
color: var(--text-tertiary);
font-size: 11px;
font-weight: 600;
margin-top: 4px;
}
.dpw-box {
margin-bottom: 16px;
}
.dpw-header {
font-weight: 600;
color: var(--text-primary);
font-size: 13.5px;
margin-bottom: 8px;
}
.dpw-buttons {
display: flex;
gap: 8px;
}
.btn-day {
flex: 1;
padding: 9px 0;
min-height: 44px;
border-radius: var(--border-radius-md);
font-size: 14px;
cursor: pointer;
transition: all .15s ease;
font-family: inherit;
border: 1.5px solid var(--color-border);
background: var(--bg-card);
color: var(--text-secondary);
font-weight: 600;
}
@media (hover: hover) {
.btn-day:hover {
border-color: var(--color-accent);
background-color: var(--color-accent-soft);
color: var(--color-accent-ink);
}
}
.btn-day.active {
border: 1.5px solid var(--color-accent-ink);
background-color: var(--color-accent-soft);
color: var(--color-accent-ink);
font-weight: 700;
}
.result-box {
border-radius: var(--border-radius-md);
background-color: var(--color-success-soft);
border: 1.5px solid rgba(93, 112, 82, 0.25);
padding: 16px 14px;
text-align: center;
}
.result-box-label {
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.result-box-value {
display: inline-block;
min-width: 7.5ch;
font-size: 34px;
font-weight: 700;
color: var(--color-success);
line-height: 1.1;
margin-top: 4px;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
transform-origin: center;
}
@keyframes casino-number-settle {
0% {
opacity: 0.76;
transform: translateY(3px);
filter: blur(0.55px);
}
55% {
opacity: 1;
transform: translateY(-1px);
filter: blur(0.18px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.result-box-value.is-casino-rolling {
animation: casino-number-settle 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity, filter;
}
.result-box-subtitle {
color: var(--text-primary);
font-size: 13px;
font-weight: 500;
margin-top: 4px;
}
.result-box-subtitle strong {
color: #4D5F42;
font-weight: 700;
}
.result-box-note {
margin-top: 10px;
display: inline-block;
background-color: var(--bg-card);
border-radius: 99px;
padding: 4px 12px;
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
border: 1px solid var(--color-border);
}
.result-box-source {
margin-top: 6px;
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
opacity: 0.75;
}
.scenarios-section {
margin-top: 18px;
}
.scenarios-divider {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.scenarios-divider::before,
.scenarios-divider::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--color-border);
}
.scenarios-divider-text {
color: var(--text-tertiary);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
}
.scenarios-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (max-width: 360px) {
.scenarios-chips {
grid-template-columns: 1fr;
}
}
.scenario-chip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
border-radius: var(--border-radius-sm);
border: 1px solid rgba(93, 112, 82, 0.24);
background-color: var(--color-success-soft);
font-family: var(--font-sans);
}
.scenario-chip-title {
font-size: 12.5px;
font-weight: 600;
color: #3D4F31;
}
.scenario-chip-val {
font-size: 13.5px;
font-weight: 700;
color: var(--color-success);
}
.scenario-chip.featured {
border: 1.5px solid var(--color-success);
background-color: rgba(93, 112, 82, 0.14);
}
.scenario-chip.featured .scenario-chip-title {
color: #28351F;
font-weight: 700;
}
.scenario-chip.featured .scenario-chip-val {
color: #4D5F42;
}
.scenario-chip-featured-mark {
color: #4D5F42;
}
.calculator-footer-text {
text-align: center;
color: var(--text-secondary);
font-size: 14.5px;
font-weight: 600;
margin: 24px 0 0;
line-height: 1.4;
}
.calculator-cta {
margin-top: 24px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.calculator-cta .btn {
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.calculator-cta-note {
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
margin: 10px auto 0;
text-align: center;
width: 100%;
}
/* Componente de Entrega Imediata no WhatsApp e Email */
.access-delivery-note {
margin-top: 12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
}
.access-delivery-title {
color: var(--text-primary);
font-size: 14px;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.access-delivery-badges {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.access-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.access-icon-svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* ====== SEÇÃO DA CRIADORA (Helena Castro) ====== */
.creator-card {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: center;
background: var(--bg-card);
border-radius: var(--border-radius-lg);
padding: 40px;
border: 1px solid var(--color-border);
box-shadow: 0 10px 30px var(--color-shadow);
}
.creator-image-wrap {
position: relative;
width: 100%;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: 0 12px 32px rgba(38, 26, 19, 0.12);
border: 4px solid #FFFFFF;
}
.creator-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.creator-card:hover .creator-image {
transform: scale(1.02);
}
.creator-badge-experience {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
background: rgba(38, 26, 19, 0.88);
backdrop-filter: blur(8px);
color: #FFFFFF;
padding: 12px 18px;
border-radius: var(--border-radius-sm);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.creator-badge-years {
font-family: var(--font-title);
font-size: 22px;
font-weight: 700;
color: var(--color-gold);
line-height: 1.1;
}
.creator-badge-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.9;
}
.creator-content {
display: flex;
flex-direction: column;
}
.creator-title {
font-size: clamp(24px, 3.5vw, 32px);
margin-bottom: 16px;
}
.creator-bio-intro {
font-size: 16.5px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.6;
margin-bottom: 14px;
}
.creator-bio-body {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.65;
margin-bottom: 24px;
}
.creator-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.creator-stat-item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.creator-stat-num {
font-family: var(--font-title);
font-size: 24px;
font-weight: 700;
color: var(--color-accent-ink);
line-height: 1.1;
}
.creator-stat-desc {
font-size: 12px;
color: var(--text-tertiary);
font-weight: 600;
line-height: 1.3;
margin-top: 4px;
}
@media (max-width: 868px) {
.creator-card {
grid-template-columns: 1fr;
gap: 28px;
padding: 24px;
}
.creator-stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.creator-stat-num {
font-size: 20px;
}
.creator-stat-desc {
font-size: 11px;
}
}
/* ====== SEÇÃO DE DEPOIMENTOS / WHATSAPP PRINTS ====== */
.whatsapp-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 24px;
}
.whatsapp-card {
background: #E5DDD5;
background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
background-size: 16px 16px;
border-radius: var(--border-radius-md);
border: 1px solid var(--color-border);
box-shadow: 0 8px 24px var(--color-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.whatsapp-header {
background: #075E54;
color: #FFFFFF;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.whatsapp-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #128C7E;
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.whatsapp-contact-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.whatsapp-name {
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.whatsapp-status {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
margin-top: 2px;
}
.whatsapp-body {
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.whatsapp-message {
position: relative;
max-width: 88%;
padding: 10px 12px 18px 12px;
border-radius: 8px;
font-size: 13.5px;
line-height: 1.45;
color: #111B21;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.whatsapp-message.incoming {
align-self: flex-start;
background-color: #FFFFFF;
border-top-left-radius: 2px;
}
.whatsapp-message.outgoing {
align-self: flex-end;
background-color: #DCF8C6;
border-top-right-radius: 2px;
}
.whatsapp-text {
margin-bottom: 6px;
}
.whatsapp-text:last-of-type {
margin-bottom: 0;
}
.whatsapp-attachment {
margin: 6px 0;
border-radius: 6px;
overflow: hidden;
max-height: 220px;
}
.whatsapp-attachment img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.whatsapp-audio-player {
display: flex;
align-items: center;
gap: 10px;
background: #F0F2F5;
padding: 8px 12px;
border-radius: 20px;
margin-bottom: 6px;
}
.whatsapp-audio-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: #075E54;
color: #FFF;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 2px;
}
.whatsapp-audio-wave {
display: flex;
align-items: center;
gap: 3px;
flex: 1;
}
.whatsapp-audio-wave span {
width: 3px;
background: #075E54;
border-radius: 2px;
display: inline-block;
}
.whatsapp-audio-dur {
font-size: 11px;
color: #667781;
font-weight: 600;
}
.whatsapp-time {
position: absolute;
bottom: 4px;
right: 8px;
font-size: 10px;
color: #667781;
display: flex;
align-items: center;
gap: 3px;
}
.whatsapp-check {
color: #53BDEB;
font-weight: 700;
font-size: 11px;
}
/* Restilização dos Cards Tradicionais de Depoimentos */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.testimonial-card {
background: var(--bg-card);
border-radius: var(--border-radius-md);
padding: 24px;
border: 1px solid var(--color-border);
box-shadow: 0 4px 16px var(--color-shadow);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px var(--color-shadow-hover);
}
.testimonial-stars {
color: var(--color-gold-ink);
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 12px;
}
.testimonial-text {
font-size: 14.5px;
color: var(--text-primary);
line-height: 1.6;
font-style: italic;
margin-bottom: 20px;
}
.testimonial-user {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid var(--color-border);
padding-top: 14px;
}
.testimonial-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background-color: var(--color-accent-ink);
color: #FFFFFF;
font-family: var(--font-title);
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.testimonial-name {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.testimonial-role {
display: block;
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
}