/* ============================================================ Palabra de Mamá — VSL Sales Page Fontes carregadas via no de cada página. ============================================================ */ /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --color-primary: #0F172A; --color-secondary: #334155; --color-accent: #1D4ED8; --color-accent-dark: #1E40AF; --color-cta: #DC2626; --color-cta-dark: #B91C1C; --color-cta-hover: #EF4444; --color-urgency: #F59E0B; --color-urgency-dark:#D97706; --color-bg: #FFFFFF; --color-surface: #F8FAFC; --color-muted: #E2E8F0; --color-footer-bg: #F1F3F5; --color-footer-text: #6B7280; --color-text: #0F172A; --color-text-muted: #475569; --color-border: #E2E8F0; --color-white: #FFFFFF; --font-heading: 'Rubik', sans-serif; --font-body: 'Nunito Sans', sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-card: 0 2px 12px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06); --shadow-cta: 0 6px 24px rgba(220,38,38,.35); } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ── Urgency Bar ── */ .urgency-bar { background: var(--color-cta-dark); color: #FFFFFF; text-align: center; padding: 10px 16px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; z-index: 100; } .urgency-bar strong { font-weight: 900; } /* ── Hero Section ── */ .hero { background: var(--color-bg); color: var(--color-primary); padding: 24px 24px 0; text-align: center; } .hero__eyebrow { display: inline-block; background: rgba(245, 158, 11, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #92600A; font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; border: 1px solid rgba(245, 158, 11, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(245, 158, 11, 0.15); margin-top: 16px; margin-bottom: 16px; } .hero__headline { font-family: var(--font-heading); font-size: clamp(22px, 3.8vw, 30px); font-weight: 700; line-height: 1.22; max-width: 720px; margin: 0 auto 0; } .hero__headline--light { font-weight: 400; color: var(--color-text); font-size: .88em; } .hero__headline span:not(.hero__headline--light) { color: var(--color-urgency); } .hero__subheadline { font-size: clamp(15px, 2vw, 18px); font-weight: 400; color: var(--color-text-muted); max-width: 580px; margin: 0 auto 24px; line-height: 1.65; } /* ── VSL Container ── */ .vsl-section { background: var(--color-bg); padding: 24px 24px 32px; } .vsl-wrapper { max-width: 760px; margin: 0 auto; } .vsl-player { width: 100%; max-width: 420px; margin: 0 auto; } /* ── Warning Notice (below video) ── */ .vsl-notice { margin-top: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px 20px; display: flex; align-items: flex-start; gap: 12px; } .vsl-notice__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-urgency); margin-top: 2px; } .vsl-notice__text { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; } .vsl-notice__text strong { color: var(--color-primary); font-weight: 700; } /* ── Order Box / Buy Button ── */ .order-section { background: var(--color-bg); padding: 0 24px 40px; text-align: center; } .order-box { max-width: 480px; margin: 0 auto; } .btn-buy { position: relative; display: block; width: 100%; max-width: 420px; margin: 0 auto; background: linear-gradient(180deg, #FFE84D 0%, #F5A000 100%); border: 2px solid #FFD24D; border-radius: 10px; color: #1B3A5C; font-family: var(--font-heading); font-style: italic; font-weight: 800; font-size: clamp(18px, 4.2vw, 20px); text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap; padding: 22px 16px; cursor: pointer; box-shadow: 0 0 0 4px rgba(255, 232, 77, 0.25), 0 8px 0 #C97D00, 0 12px 20px rgba(0,0,0,.25); transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.35); } .btn-buy:hover { filter: brightness(1.08); transform: scale(1.03); } .btn-buy:active { transform: scale(0.99); box-shadow: 0 0 0 4px rgba(255, 232, 77, 0.25), 0 4px 0 #C97D00, 0 6px 12px rgba(0,0,0,.25); } .btn-buy::after { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 0 rgba(245, 160, 0, .55); animation: btn-sonar 2.2s ease-out infinite; pointer-events: none; } @keyframes btn-sonar { 0% { box-shadow: 0 0 0 0 rgba(245, 160, 0, .55); } 70% { box-shadow: 0 0 0 18px rgba(245, 160, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 160, 0, 0); } } .order-box__currency { font-size: 12px; color: var(--color-text-muted); margin-top: 18px; margin-bottom: 8px; } .order-box__flags { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .order-box__emoji { font-size: 26px; line-height: 1; } .order-box__flags img.emoji { width: 28px; height: 28px; vertical-align: middle; } .order-box__payments { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .order-box__badge { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 10px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; filter: grayscale(100%); opacity: .75; transition: filter 180ms ease, opacity 180ms ease; } .order-box__badge:hover { filter: grayscale(0%); opacity: 1; } .order-box__badge svg { height: 18px; width: auto; display: block; } /* ── CTA Section ── */ .cta-section { background: var(--color-bg); padding: 56px 24px; text-align: center; } .cta-section__label { font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-cta); margin-bottom: 12px; } .cta-section__headline { font-family: var(--font-heading); font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--color-primary); line-height: 1.22; max-width: 560px; margin: 0 auto 12px; } .cta-section__sub { font-size: 15px; color: var(--color-text-muted); max-width: 440px; margin: 0 auto 32px; } .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-cta); color: #fff; font-family: var(--font-heading); font-size: clamp(15px, 2vw, 18px); font-weight: 800; padding: 18px 40px; border-radius: var(--radius-lg); border: none; cursor: pointer; box-shadow: var(--shadow-cta); transition: background 180ms ease, transform 150ms ease, box-shadow 180ms ease; text-align: center; line-height: 1.3; max-width: 520px; width: 100%; } .btn-cta:hover { background: var(--color-cta-hover); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(220,38,38,.45); } .btn-cta:active { transform: translateY(0); box-shadow: var(--shadow-cta); } .btn-cta svg { width: 22px; height: 22px; flex-shrink: 0; } .cta-section__guarantee { margin-top: 16px; font-size: 13px; color: #94A3B8; display: flex; align-items: center; justify-content: center; gap: 6px; } .cta-section__guarantee svg { width: 16px; height: 16px; color: #22C55E; flex-shrink: 0; } /* ── Benefits Strip ── */ .benefits { background: var(--color-surface); padding: 48px 24px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .benefits__grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .benefit-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px 20px; box-shadow: var(--shadow-card); text-align: center; } .benefit-card__icon { width: 48px; height: 48px; background: #EFF6FF; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--color-accent); } .benefit-card__icon svg { width: 24px; height: 24px; } .benefit-card__title { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; line-height: 1.3; } .benefit-card__desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; } /* ── Social Proof / Testimonials ── */ .testimonials { background: var(--color-bg); padding: 56px 24px; text-align: center; } .section-title { font-family: var(--font-heading); font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: var(--color-primary); margin-bottom: 8px; line-height: 1.25; } .section-subtitle { font-size: 15px; color: var(--color-text-muted); margin-bottom: 36px; } .testimonials__grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; text-align: left; } .testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px 20px; box-shadow: var(--shadow-card); } .testimonial-card__stars { display: flex; gap: 3px; margin-bottom: 12px; color: var(--color-urgency); } .testimonial-card__stars svg { width: 16px; height: 16px; fill: currentColor; } .testimonial-card__text { font-size: 14px; color: var(--color-secondary); line-height: 1.65; margin-bottom: 16px; font-style: italic; } .testimonial-card__author { display: flex; align-items: center; gap: 10px; } .testimonial-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-muted); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--color-secondary); flex-shrink: 0; } .testimonial-card__name { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--color-primary); } .testimonial-card__location { font-size: 12px; color: var(--color-text-muted); } /* ── Second CTA ── */ .cta-final { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); padding: 64px 24px; text-align: center; color: var(--color-white); } .cta-final__headline { font-family: var(--font-heading); font-size: clamp(22px, 3.5vw, 36px); font-weight: 800; line-height: 1.2; max-width: 600px; margin: 0 auto 14px; } .cta-final__headline span { color: var(--color-urgency); } .cta-final__sub { font-size: 15px; color: #94A3B8; max-width: 460px; margin: 0 auto 36px; } /* ── Footer ── */ .footer { background: var(--color-footer-bg); border-top: 1px solid #DDE1E7; padding: 32px 24px 28px; text-align: center; } .footer__disclaimer { position: relative; font-size: 10.5px; color: #9098A1; line-height: 1.65; max-width: 760px; margin: 28px auto 0; padding-top: 28px; } .footer__disclaimer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 88%; max-width: 670px; height: 1px; background: #E5E8EB; } .footer__disclaimer a { color: var(--color-footer-text); text-decoration: underline; } .footer__disclaimer a:hover { color: var(--color-primary); } .footer__links { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; } .footer__links a { font-size: 12px; color: var(--color-footer-text); transition: color 150ms; } .footer__links a:hover { color: var(--color-primary); } /* Em telas de toque, prioriza a leitura do contenido principal evitando activaciones accidentales en los enlaces del pie de página. */ @media (pointer: coarse) { .footer a { pointer-events: none; } } /* Itens de rodapé apenas visuais (sem link) — usado fora da index */ .footer__item { font-size: 12px; color: var(--color-footer-text); } .footer__sep { width: 3px; height: 3px; border-radius: 50%; background: #C1C7CE; } .footer__copyright { font-size: 11px; color: var(--color-footer-text); } /* ── Divider ── */ .divider { height: 1px; background: var(--color-border); max-width: 900px; margin: 0 auto; } /* ── Banner topo (páginas internas) ── */ .page-banner { background: var(--color-primary); padding: 18px 24px; text-align: center; } .page-banner a { font-family: var(--font-heading); font-size: clamp(16px, 2.5vw, 22px); font-weight: 700; color: var(--color-white); letter-spacing: .02em; } /* ── Páginas legais / conteúdo ── */ .legal { background: var(--color-surface); padding: 48px 24px; } .legal__container { max-width: 760px; margin: 0 auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 48px 44px; } .legal__back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--color-accent); text-decoration: none; margin-bottom: 22px; } .legal__back:hover { color: var(--color-accent-dark); text-decoration: underline; } .legal__back svg { width: 16px; height: 16px; } .legal__title { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 34px); font-weight: 800; color: var(--color-primary); line-height: 1.2; margin-bottom: 8px; } .legal__updated { font-size: 13px; color: var(--color-text-muted); margin-bottom: 28px; } .legal__intro { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 28px; } .legal h2 { font-family: var(--font-heading); font-size: clamp(17px, 2.5vw, 20px); font-weight: 700; color: var(--color-primary); line-height: 1.3; margin: 28px 0 10px; } .legal p { font-size: 14.5px; color: var(--color-secondary); line-height: 1.7; margin-bottom: 12px; } .legal ul { margin: 0 0 12px; padding-left: 22px; } .legal li { font-size: 14.5px; color: var(--color-secondary); line-height: 1.7; margin-bottom: 8px; } .legal a { color: var(--color-accent); text-decoration: underline; word-break: break-word; } .legal a:hover { color: var(--color-accent-dark); } .legal strong { color: var(--color-primary); font-weight: 700; } /* Bloco de contato destacado */ .legal__contact-box { margin-top: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; text-align: center; } .legal__contact-box a { font-family: var(--font-heading); font-weight: 700; font-size: 16px; } /* Referência científica */ .ref-item { border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 18px; margin-bottom: 16px; } .ref-item h2 { margin: 0 0 8px; font-size: 16px; } .ref-item p { margin-bottom: 8px; } .ref-item p:last-child { margin-bottom: 0; } .ref-item .ref-cite { font-size: 13.5px; color: var(--color-text-muted); } @media (max-width: 600px) { .legal { padding: 32px 16px; } .legal__container { padding: 32px 22px; } } /* ── Utilities ── */ .container { max-width: 900px; margin: 0 auto; } /* ── Responsive ── */ @media (max-width: 600px) { .urgency-bar { font-size: 12px; padding: 8px 12px; } .hero { padding: 36px 16px 32px; } .vsl-section { padding: 0 16px 40px; } .cta-section { padding: 40px 16px; } .btn-cta { padding: 16px 24px; font-size: 15px; } .benefits { padding: 36px 16px; } .testimonials { padding: 40px 16px; } .cta-final { padding: 48px 16px; } .footer { padding: 24px 16px 20px; } .footer__links { gap: 12px; } } @media (min-width: 768px) { .hero { padding: 56px 24px 0; } .vsl-section { padding: 32px 24px 48px; } .hero__eyebrow { margin-top: 8px; } } /* ── Vturb delayed elements ── */ .esconder { display: none; } /* ── Lembrete (modal) — estágio 1 da navegação assistida ── */ .exit-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.72); animation: exit-popup-fade 220ms ease-out; } .exit-popup[hidden] { display: none; } .exit-popup__box { position: relative; background: var(--color-white); border-radius: var(--radius-lg); max-width: 380px; width: 100%; padding: 46px 24px 24px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: exit-popup-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2); } .exit-popup__x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: #FEE2E2; border: none; color: var(--color-cta); cursor: pointer; border-radius: 8px; transition: background 150ms ease; } .exit-popup__x:hover { background: #FECACA; } .exit-popup__x svg { width: 18px; height: 18px; } .exit-popup__title { font-family: var(--font-heading); font-size: clamp(20px, 5vw, 24px); font-weight: 800; color: var(--color-primary); line-height: 1.25; margin-bottom: 12px; } .exit-popup__text { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 18px; } .exit-popup__text strong { color: var(--color-primary); font-weight: 800; } .exit-popup__img { width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: 20px; } .exit-popup__btn { display: block; width: 100%; background: var(--color-urgency); color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(16px, 4vw, 18px); font-weight: 800; border: none; border-radius: var(--radius-md); padding: 16px 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(245, 160, 0, 0.30); transition: background 160ms ease, transform 150ms ease; } .exit-popup__btn:hover { background: var(--color-urgency-dark); transform: translateY(-1px); } .exit-popup__btn:active { transform: translateY(0); } @keyframes exit-popup-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes exit-popup-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }