/* ========================================================= STYLE.CSS Extraído e organizado a partir dos design tokens do Elementor Kit (kit-681) do site original. ========================================================= */ /* ----------------------------- 1. FONTE (Poppins) Carregada via Google Fonts no do HTML (pesos 400/500/600/700/800). Fallback do sistema já coberto por --font-family-base abaixo. ------------------------------ */ /* ----------------------------- 2. VARIÁVEIS GLOBAIS (Design Tokens) Extraídas do --e-global-color / --e-global-typography ------------------------------ */ :root { /* Cores principais */ --color-primary: #2F3E46; /* cor primária / texto escuro */ --color-secondary: #F0C002; /* amarelo destaque */ --color-text: #2F3E46; --color-accent: #61CE70; /* verde destaque */ /* Cores auxiliares */ --color-gray-light: #F2F2F2; --color-white: #FFFFFF; --color-success: #40B34F; --color-danger: #D90429; /* Cores de apoio (derivadas da marca) */ --color-primary-light: #435560; --color-primary-dark: #1E282D; --color-accent-dark: #3FAE50; --color-secondary-dark: #C79A00; --color-whatsapp: #25D366; --color-border: #E4E4E4; --color-ink-soft: rgba(47, 62, 70, 0.68); /* Tipografia */ --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-size-text: 17px; --font-size-accent: 17px; --font-size-small: 15px; --font-size-tiny: 14px; --font-size-micro: 12px; --font-size-h1: 40px; /* b7cac6b */ --font-size-h2: 35px; /* b7cac6b mobile */ --font-size-h3: 20px; /* afe313e */ --font-size-primary: 33px; --font-size-secondary: 33px; --font-weight-regular: 400; --font-weight-medium: 600; --font-weight-bold: 700; --line-height-tight: 1.1em; --line-height-heading: 1.2em; --line-height-text: 1.3em; /* Espaçamentos (escala) */ --space-xs: 0.44rem; /* 20 */ --space-sm: 0.67rem; /* 30 */ --space-md: 1rem; /* 40 */ --space-lg: 1.5rem; /* 50 */ --space-xl: 2.25rem; /* 60 */ --space-2xl: 3.38rem; /* 70 */ --space-3xl: 5.06rem; /* 80 */ /* Sombras */ --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2); --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4); --shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2); --shadow-crisp: 6px 6px 0px rgb(0, 0, 0); /* Layout */ --container-max-width: 1140px; --container-max-width-tablet: 1024px; --container-max-width-mobile: 767px; /* Raios e transições */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.2s; --dur-med: 0.45s; --dur-slow: 0.8s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } /* ----------------------------- 3. RESET BÁSICO ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-family-base); font-size: var(--font-size-text); font-weight: var(--font-weight-regular); line-height: var(--line-height-text); color: var(--color-text); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } /* ----------------------------- 4. TIPOGRAFIA ------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-base); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-primary); margin: 0 0 var(--space-md); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); } p { margin: 0 0 var(--space-md); } a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-secondary); } /* ----------------------------- 5. LAYOUT / CONTAINER ------------------------------ */ .container { margin-right: auto; margin-left: auto; position: relative; max-width: var(--container-max-width); padding: 0 var(--space-md); } .container--centered { align-items: center; } @media (max-width: 1024px) { .container { max-width: var(--container-max-width-tablet); } } @media (max-width: 767px) { .container { max-width: var(--container-max-width-mobile); } :root { --font-size-primary: 25px; --font-size-secondary: 23px; --font-size-h3: 20px; --font-size-h1: 35px; --line-height-tight: 1.1em; } } /* ----------------------------- 6. COMPONENTES BÁSICOS ------------------------------ */ /* Botão primário */ .btn { display: inline-block; font-family: var(--font-family-base); font-size: var(--font-size-accent); font-weight: var(--font-weight-medium); padding: 0.75em 1.75em; border-radius: 6px; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn--primary { background-color: var(--color-accent); color: var(--color-white); } .btn--primary:hover { background-color: var(--color-success); box-shadow: var(--shadow-natural); transform: translateY(-2px); } .btn--secondary { background-color: var(--color-secondary); color: var(--color-primary); } .btn--outline { background-color: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } /* Cartão / Card */ .card { background-color: var(--color-white); border-radius: 8px; padding: var(--space-lg); box-shadow: var(--shadow-sharp); } /* Seção */ .section { padding: var(--space-2xl) 0; min-height: 400px; } .section--gray { background-color: var(--color-gray-light); } /* Estados de feedback */ .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } /* ========================================================= 7. UTILITÁRIOS DE LAYOUT ========================================================= */ .section { padding: var(--space-3xl) 0; min-height: 0; } .section-head { max-width: 640px; margin: 0 0 var(--space-2xl); } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--font-size-micro); font-weight: var(--font-weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-dark); background: rgba(97, 206, 112, 0.12); padding: 0.4em 0.9em; border-radius: var(--radius-pill); margin-bottom: var(--space-md); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-dark); flex: none; } .eyebrow--light { color: var(--color-secondary); background: rgba(240, 192, 2, 0.14); } .eyebrow--light::before { background: var(--color-secondary); } .section-head p { color: var(--color-ink-soft); font-size: var(--font-size-accent); } mark.hl { background: none; color: inherit; position: relative; white-space: nowrap; } mark.hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.05em; height: 0.32em; background: var(--color-secondary); z-index: -1; border-radius: 2px; } .text-center { text-align: center; } /* Reveal-on-scroll */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); } /* ========================================================= 8. HEADER ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: 0 8px 24px rgba(47, 62, 70, 0.06); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .brand { display: flex; align-items: center; gap: 0.5em; font-weight: var(--font-weight-bold); font-size: 20px; line-height: 1.15; color: var(--color-primary); white-space: nowrap; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--color-primary); display: grid; place-items: center; flex: none; position: relative; } .brand-mark svg { width: 18px; height: 18px; } .brand-mark::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; top: -2px; right: -2px; border: 2px solid var(--color-white); } .brand small { display: block; font-size: 10px; font-weight: var(--font-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-soft); } .main-nav { display: flex; align-items: center; gap: var(--space-xl); } .main-nav a:not(.btn) { color: var(--color-primary); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); } .main-nav a:not(.btn):hover { color: var(--color-accent-dark); } .nav-links { display: flex; gap: var(--space-lg); } .nav-toggle { display: none; } @media (max-width: 1080px) { .nav-links { display: none; } } @media (max-width: 480px) { .header-cta-desktop { display: none; } .brand small { display: none; } .brand { font-size: 18px; } } /* ========================================================= 9. BOTÕES (extensões) ========================================================= */ .btn { text-align: center; letter-spacing: 0.01em; position: relative; } .btn--lg { padding: 0.95em 2.1em; font-size: 17px; } .btn--secondary { box-shadow: 0 10px 24px rgba(240, 192, 2, 0.35); } .btn--secondary:hover { background-color: var(--color-secondary-dark); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(240, 192, 2, 0.4); } .btn--ghost { background: transparent; color: var(--color-primary); padding-left: 0.5em; padding-right: 0.5em; display: inline-flex; align-items: center; gap: 0.5em; } .btn--ghost:hover { color: var(--color-accent-dark); transform: none; } .btn--ghost .play-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--color-white); border: 1.5px solid var(--color-border); display: grid; place-items: center; transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease; } .btn--ghost:hover .play-dot { border-color: var(--color-accent); transform: scale(1.06); } .btn--block { width: 100%; } .btn-row { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .microtrust { display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; font-size: var(--font-size-tiny); color: var(--color-ink-soft); margin-top: var(--space-lg); } .microtrust span { display: inline-flex; align-items: center; gap: 0.5em; } .microtrust svg { width: 14px; height: 14px; color: var(--color-accent-dark); flex: none; } /* ========================================================= 10. HERO ========================================================= */ .hero { padding: calc(var(--space-3xl) + 1rem) 0 var(--space-3xl); overflow: hidden; position: relative; background: radial-gradient(680px 420px at 88% -10%, rgba(97,206,112,0.14), transparent 60%), radial-gradient(520px 360px at -10% 105%, rgba(240,192,2,0.14), transparent 60%), var(--color-white); } .hero .container { display: flex; align-items: center; gap: var(--space-2xl); } .hero-copy { flex: 1 1 52%; min-width: 0; } .hero-visual { flex: 1 1 48%; min-width: 0; display: flex; justify-content: center; } .hero h1 { font-size: clamp(32px, 4vw, var(--font-size-h1)); letter-spacing: -0.01em; margin-bottom: var(--space-lg); } .hero .lead { font-size: 18px; color: var(--color-ink-soft); max-width: 46ch; } /* --- Mockup de chat do WhatsApp (elemento de assinatura) --- */ .phone { width: min(340px, 80vw); background: var(--color-primary-dark); border-radius: 38px; padding: 12px; box-shadow: var(--shadow-deep); animation: float-phone 6s ease-in-out infinite; } @keyframes float-phone { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-14px) rotate(0.6deg); } } .phone-screen { background: #E9DFCF; background-image: radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px); background-size: 14px 14px; border-radius: 28px; overflow: hidden; height: 560px; display: flex; flex-direction: column; } .phone-bar { background: var(--color-whatsapp); color: #fff; padding: 14px 16px 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: var(--font-weight-medium); flex: none; } .phone-bar .avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.25); display: grid; place-items: center; font-size: 13px; } .phone-bar .status { font-size: 11px; opacity: 0.85; font-weight: var(--font-weight-regular); } .phone-thread { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .bubble { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,0.08); opacity: 0; transform: translateY(8px) scale(0.98); animation: bubble-in 0.45s var(--ease-soft) forwards; } .bubble.in { align-self: flex-start; background: #fff; color: var(--color-text); border-top-left-radius: 2px; } .bubble.out { align-self: flex-end; background: #D9FDD3; color: var(--color-text); border-top-right-radius: 2px; } .bubble .tick { font-size: 10px; color: var(--color-ink-soft); display: block; text-align: right; margin-top: 2px; } @keyframes bubble-in { to { opacity: 1; transform: translateY(0) scale(1); } } .typing { align-self: flex-start; background: #fff; border-radius: 12px; border-top-left-radius: 2px; padding: 10px 14px; display: inline-flex; gap: 4px; opacity: 0; animation: bubble-in 0.3s var(--ease-soft) forwards; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa5a0; animation: typing-bounce 1s infinite ease-in-out; } .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .phone-badge { position: absolute; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-natural); padding: 0.7em 1em; font-size: 12px; font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: 0.5em; animation: badge-pop 6s ease-in-out infinite; } .phone-badge svg { width: 16px; height: 16px; color: var(--color-accent-dark); flex: none; } .phone-badge--top { top: 6%; left: -6%; animation-delay: 0.3s; } .phone-badge--bottom { bottom: 10%; right: -8%; animation-delay: 1s; } @keyframes badge-pop { 0%, 15%, 100% { opacity: 0; transform: translateY(10px) scale(0.9); } 25%, 85% { opacity: 1; transform: translateY(0) scale(1); } } .hero-visual-wrap { position: relative; } @media (max-width: 1024px) { .hero .container { flex-wrap: wrap; } .hero-copy, .hero-visual { flex: 1 1 100%; } .hero-visual { order: -1; margin-bottom: var(--space-lg); } .phone { width: min(300px, 70vw); } .phone-screen { height: 480px; } } @media (max-width: 480px) { .phone-badge { display: none; } } /* ========================================================= 11. SEÇÃO DE DOR (PAIN POINTS) ========================================================= */ .pain-intro { max-width: 760px; margin: 0 auto var(--space-2xl); text-align: center; } .pain-grid { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .pain-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); flex: 1 1 220px; max-width: 300px; transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) ease; } @media (max-width: 600px) { .pain-card { flex-basis: 100%; max-width: none; } } .pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-natural); border-color: transparent; } .pain-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(217, 4, 41, 0.09); color: var(--color-danger); display: grid; place-items: center; margin-bottom: var(--space-md); } .pain-icon svg { width: 22px; height: 22px; } .pain-card h3 { font-size: 16px; margin-bottom: 0.4em; } .pain-card p { font-size: var(--font-size-small); color: var(--color-ink-soft); margin: 0; } .pain-result { margin-top: var(--space-2xl); text-align: center; font-size: 18px; font-weight: var(--font-weight-medium); color: var(--color-primary); max-width: 700px; margin-left: auto; margin-right: auto; } /* ========================================================= 12. SOLUÇÃO / PILARES ========================================================= */ .section--solution { background: var(--color-gray-light); } .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-top: var(--space-2xl); } .pillar { background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-lg); text-align: left; box-shadow: var(--shadow-sharp); } .pillar .num { font-size: 12px; font-weight: var(--font-weight-bold); color: var(--color-accent-dark); letter-spacing: 0.1em; } .pillar h3 { font-size: 17px; margin: 0.4em 0 0.3em; } .pillar p { font-size: var(--font-size-small); color: var(--color-ink-soft); margin: 0; } @media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } } /* ========================================================= 13. SEGMENTOS (TABS) ========================================================= */ .segments-tabs { display: flex; gap: 0.5em; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-md); } .tab-btn { font-family: var(--font-family-base); background: transparent; border: none; cursor: pointer; padding: 0.7em 1.2em; border-radius: var(--radius-pill); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--color-ink-soft); display: flex; align-items: center; gap: 0.55em; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .tab-btn svg { width: 16px; height: 16px; } .tab-btn:hover { background: rgba(47,62,70,0.06); color: var(--color-primary); } .tab-btn.is-active { background: var(--color-primary); color: var(--color-white); } .segment-panel { display: none; align-items: center; gap: var(--space-2xl); } .segment-panel.is-active { display: flex; animation: fade-in var(--dur-med) var(--ease-soft); } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .segment-copy { flex: 1 1 52%; } .segment-visual { flex: 1 1 48%; } .segment-copy .kicker { font-size: var(--font-size-small); color: var(--color-accent-dark); font-weight: var(--font-weight-bold); margin-bottom: 0.4em; display: block; } .segment-copy h3 { font-size: 26px; font-weight: var(--font-weight-bold); margin-bottom: 0.5em; } .segment-copy > p { color: var(--color-ink-soft); } .feature-list { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: 0.7em; } .feature-list li { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--font-size-small); } .feature-list .tick { width: 20px; height: 20px; border-radius: 50%; background: rgba(97,206,112,0.16); color: var(--color-accent-dark); display: grid; place-items: center; flex: none; margin-top: 1px; } .feature-list .tick svg { width: 11px; height: 11px; } .segment-result { background: rgba(240,192,2,0.12); border-left: 3px solid var(--color-secondary); padding: 0.9em 1.1em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--color-primary); } .segment-visual .card { background: var(--color-primary); color: var(--color-white); aspect-ratio: 4/3.4; display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); box-shadow: var(--shadow-deep); } .segment-visual .card .glyph { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.1); display: grid; place-items: center; margin-bottom: var(--space-sm); } .segment-visual .card .glyph svg { width: 28px; height: 28px; color: var(--color-secondary); } .segment-visual .card h4 { color: var(--color-white); font-size: 20px; margin: 0 0 0.2em; } .segment-visual .card p { color: rgba(255,255,255,0.72); font-size: var(--font-size-small); margin: 0; } @media (max-width: 900px) { .segment-panel { flex-wrap: wrap; } .segment-copy, .segment-visual { flex: 1 1 100%; } .segment-visual { order: -1; max-width: 360px; margin: 0 auto var(--space-md); } } /* ========================================================= 14. COMO FUNCIONA (TIMELINE) ========================================================= */ .section--dark { background: var(--color-primary); color: var(--color-white); } .section--dark h2, .section--dark .section-head p { color: var(--color-white); } .section--dark .section-head p { color: rgba(255,255,255,0.7); } .timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-lg); counter-reset: step; margin-top: var(--space-2xl); } .step { position: relative; padding-top: var(--space-lg); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: 13px; font-weight: var(--font-weight-bold); color: var(--color-primary); background: var(--color-secondary); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--space-md); } .step h3 { color: var(--color-white); font-size: 16px; margin-bottom: 0.3em; } .step p { color: rgba(255,255,255,0.68); font-size: var(--font-size-small); margin: 0; } .step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 40px); width: calc(100% - 40px); height: 1px; background: rgba(255,255,255,0.16); display: none; } @media (min-width: 901px) { .timeline { grid-template-columns: repeat(6, 1fr); } .step:not(:last-child)::after { display: block; } } /* ========================================================= 15. STATS ========================================================= */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-lg); margin-top: var(--space-2xl); text-align: center; } .stat { display: flex; flex-direction: column; justify-content: center; height: 100%; } .stat .num { font-size: clamp(30px, 4vw, 44px); font-weight: var(--font-weight-bold); color: var(--color-secondary); line-height: 1; display: block; margin-bottom: 0.3em; } .stat p { color: rgba(255,255,255,0.72); font-size: var(--font-size-small); margin: 0; } /* ========================================================= 16. CONFIANÇA ========================================================= */ .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-top: var(--space-2xl); } .trust-item { display: flex; gap: var(--space-md); align-items: flex-start; } .trust-item .ic { width: 42px; height: 42px; border-radius: 10px; background: rgba(97,206,112,0.14); color: var(--color-accent-dark); display: grid; place-items: center; flex: none; } .trust-item .ic svg { width: 20px; height: 20px; } .trust-item h3 { font-size: 15px; margin-bottom: 0.2em; } .trust-item p { font-size: var(--font-size-small); color: var(--color-ink-soft); margin: 0; } /* ========================================================= 17. DEPOIMENTOS ========================================================= */ .section--testimonials { background: var(--color-primary-dark); color: var(--color-white); } .section--testimonials .section-head p { color: rgba(255,255,255,0.68); } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .testimonial { background: var(--color-primary-light); border-radius: var(--radius-md); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } .testimonial .stars { color: var(--color-secondary); font-size: 14px; letter-spacing: 2px; } .testimonial blockquote { margin: 0; font-size: var(--font-size-small); line-height: 1.55; color: rgba(255,255,255,0.92); } .testimonial-who { display: flex; align-items: center; gap: 0.7em; margin-top: auto; } .testimonial-who .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-secondary); color: var(--color-primary-dark); display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: 14px; flex: none; } .testimonial-who strong { display: block; font-size: 13px; } .testimonial-who span { display: block; font-size: 12px; color: rgba(255,255,255,0.6); } /* ========================================================= 18. FAQ ========================================================= */ .faq-list { max-width: 780px; margin: var(--space-2xl) auto 0; } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-q { width: 100%; background: none; border: none; font-family: var(--font-family-base); text-align: left; padding: 1.3em 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); cursor: pointer; font-size: var(--font-size-accent); font-weight: var(--font-weight-medium); color: var(--color-primary); } .faq-q .plus { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-border); display: grid; place-items: center; position: relative; transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease; } .faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--color-primary); transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; } .faq-q .plus::before { width: 10px; height: 1.5px; } .faq-q .plus::after { width: 1.5px; height: 10px; } .faq-item.is-open .faq-q .plus { border-color: var(--color-accent); transform: rotate(180deg); } .faq-item.is-open .faq-q .plus::after { opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-soft); } .faq-a p { padding-bottom: 1.3em; color: var(--color-ink-soft); font-size: var(--font-size-small); max-width: 62ch; margin: 0; } /* ========================================================= 19. CTA FINAL ========================================================= */ .section--final-cta { background: var(--color-primary); background-image: radial-gradient(600px 300px at 20% 0%, rgba(240,192,2,0.16), transparent 60%), radial-gradient(600px 300px at 80% 100%, rgba(97,206,112,0.16), transparent 60%); color: var(--color-white); text-align: center; } .section--final-cta h2 { color: var(--color-white); } .section--final-cta p { color: rgba(255,255,255,0.75); max-width: 620px; margin-left: auto; margin-right: auto; } .section--final-cta .btn-row { justify-content: center; } .section--final-cta .microtrust { justify-content: center; color: rgba(255,255,255,0.6); } .section--final-cta .microtrust svg { color: var(--color-secondary); } /* ========================================================= 20. FOOTER ========================================================= */ .site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.65); padding: var(--space-2xl) 0 var(--space-lg); font-size: var(--font-size-small); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-brand .brand { color: var(--color-white); } .footer-brand p { max-width: 32ch; margin-top: var(--space-sm); } .footer-col h4 { color: var(--color-white); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-md); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; } .footer-col a { color: rgba(255,255,255,0.65); font-size: var(--font-size-small); } .footer-col a:hover { color: var(--color-secondary); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-lg); font-size: var(--font-size-tiny); } .footer-bottom .socials { display: flex; gap: 0.8em; } .footer-bottom .socials a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); display: grid; place-items: center; color: rgba(255,255,255,0.7); } .footer-bottom .socials a:hover { background: var(--color-accent); color: var(--color-primary-dark); } .footer-bottom .socials svg { width: 15px; height: 15px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================= 21. FOCO DE ACESSIBILIDADE ========================================================= */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; } @media (max-width: 767px) { .section { padding: var(--space-2xl) 0; } }