/* ============================================================ FERREIRA PERSONAL — folha de estilo única Tudo que é cor, fonte e espaçamento está nos "tokens" abaixo. Mudou o token, mudou o site inteiro. ============================================================ */ /* ---------- 1. TOKENS (edite aqui) ---------- */ :root { /* cores — tema claro (padrão) */ --ink: #0E1116; /* texto de títulos */ --ink-soft: #3D444D; /* texto de corpo */ --muted: #767E88; /* texto secundário */ --line: #E6E6E1; /* bordas */ --line-strong:#DADAD3; /* borda em hover/destaque */ --bg: #FFFFFF; /* fundo da página */ --bg-soft: #F6F6F3; /* seções alternadas */ --card: #FFFFFF; /* fundo de cards */ --deep: #0E1116; /* painel sempre escuro: rodapé, CTA final, botão principal */ --header-bg: rgba(255,255,255,.88); --nav-bg: #FFFFFF; --accent: #FF4A17; /* laranja da marca */ --accent-ink: #D93B0D; /* laranja p/ texto sobre branco */ --accent-bg: #FFF1EC; /* fundo suave do laranja */ --danger-bg: #FDECEC; --danger-ink: #D33; --neg-ink: #B4453A; --green: #16A34A; --wa: #25D366; /* verde WhatsApp */ /* tipografia */ --font-display: "Big Shoulders", "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* medidas */ --max: 1160px; --gutter: 20px; --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(14,17,22,.04), 0 12px 32px -12px rgba(14,17,22,.14); --shadow-lg: 0 2px 4px rgba(14,17,22,.05), 0 28px 60px -20px rgba(14,17,22,.22); --header-h: 72px; } /* ---------- 1b. TEMA ESCURO ---------- Liga sozinho se o sistema do visitante estiver no escuro (prefers-color-scheme), e pode ser forçado pelo botão do site, que grava a escolha em localStorage como atributo data-theme="dark" / "light" no . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F3F4F1; --ink-soft: #C6CBD2; --muted: #8B929C; --line: #262B32; --line-strong:#333A44; --bg: #0B0D10; --bg-soft: #12151A; --card: #181C22; --deep: #06070A; --header-bg: rgba(11,13,16,.86); --nav-bg: #0E1116; --accent: #FF5A2A; --accent-ink: #FF9466; --accent-bg: rgba(255,90,42,.16); --danger-bg: rgba(217,68,68,.18); --danger-ink: #FF6B6B; --neg-ink: #FF8577; --shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 30px -14px rgba(0,0,0,.6); --shadow-lg: 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -20px rgba(0,0,0,.7); } } :root[data-theme="dark"] { --ink: #F3F4F1; --ink-soft: #C6CBD2; --muted: #8B929C; --line: #262B32; --line-strong:#333A44; --bg: #0B0D10; --bg-soft: #12151A; --card: #181C22; --deep: #06070A; --header-bg: rgba(11,13,16,.86); --nav-bg: #0E1116; --accent: #FF5A2A; --accent-ink: #FF9466; --accent-bg: rgba(255,90,42,.16); --danger-bg: rgba(217,68,68,.18); --danger-ink: #FF6B6B; --neg-ink: #FF8577; --shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 30px -14px rgba(0,0,0,.6); --shadow-lg: 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -20px rgba(0,0,0,.7); } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink-soft); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .25s ease, color .25s ease; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; line-height: 1.1; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- 3. UTILITÁRIOS ---------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding: 88px 0; } .section--soft { background: var(--bg-soft); } .section--dark { background: var(--deep); color: #C9CED6; } .section--dark h2, .section--dark h3 { color: #fff; } .center { text-align: center; } .narrow { max-width: 720px; margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-bg); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; } .section--dark .eyebrow { background: rgba(255,74,23,.15); color: #FF8A5E; } .h-display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: .95; } h1.h-display { font-size: clamp(2.9rem, 7.2vw, 5.1rem); } h2.h-display { font-size: clamp(2.2rem, 5.2vw, 3.6rem); } .lead { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--muted); } /* ---------- 4. BOTÕES ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--deep); color: #fff; box-shadow: var(--shadow); } .btn--primary:hover { background: #000; } .btn--accent { background: var(--accent); color: #fff; box-shadow: 0 10px 26px -10px rgba(255,74,23,.7); } .btn--accent:hover { background: #F04010; } .btn--wa { background: var(--wa); color: #06331A; } .btn--wa:hover { background: #1FC15C; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); } .section--dark .btn--ghost, .final .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); } .section--dark .btn--ghost:hover, .final .btn--ghost:hover { border-color: #fff; } .btn--lg { padding: 18px 34px; font-size: 17px; } .btn--block { width: 100%; } .btn svg { flex: none; } /* ---------- 5. HEADER ---------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(0,0,0,.5); } .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand img.brand__mark { width: 34px; height: 34px; border-radius: 9px; } .brand img.brand__word { height: 26px; width: auto; } .brand img.brand__word--dark { display: none; } :root[data-theme="dark"] .brand img.brand__word--light { display: none; } :root[data-theme="dark"] .brand img.brand__word--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img.brand__word--light { display: none; } :root:not([data-theme="light"]) .brand img.brand__word--dark { display: block; } } .nav { display: flex; align-items: center; gap: 28px; } .nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-soft); position: relative; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } .header__cta { display: flex; align-items: center; gap: 10px; } .header .btn { padding: 11px 20px; font-size: 15px; } .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); align-items: center; justify-content: center; } .burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: .2s; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: .2s; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } .mobile-nav { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; background: var(--nav-bg); border-bottom: 1px solid var(--line); padding: 18px var(--gutter) 28px; display: none; flex-direction: column; gap: 4px; box-shadow: var(--shadow-lg); } .mobile-nav.is-open { display: flex; } .mobile-nav a { text-decoration: none; font-size: 18px; font-weight: 600; color: var(--ink); padding: 13px 0; border-bottom: 1px solid var(--line); } .mobile-nav .btn { margin-top: 18px; } /* ---------- 6. HERO ---------- */ .hero { padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 5vw, 76px); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -220px; right: -180px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,74,23,.14), transparent 62%); pointer-events: none; } .hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 68px); align-items: center; } .hero h1 { margin-bottom: 20px; } .hero h1 .hl { color: var(--accent); } .hero__lead { font-size: clamp(1.04rem, 2vw, 1.2rem); color: var(--ink-soft); max-width: 52ch; margin-bottom: 30px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--muted); } .hero__trust li { display: flex; align-items: center; gap: 8px; } .hero__trust svg { flex: none; color: var(--green); } .hero__media { position: relative; max-width: 480px; margin-left: auto; width: 100%; } .hero__media img { width: 100%; border-radius: 24px; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-lg); } .hero__badge { position: absolute; left: -18px; bottom: 32px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; } .hero__badge strong { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); } .hero__badge span { font-size: 13px; line-height: 1.25; color: var(--muted); max-width: 12ch; } /* ---------- 7. BARRA DE NÚMEROS ---------- */ .stats { border-block: 1px solid var(--line); background: var(--bg-soft); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: 30px 18px; text-align: center; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--ink); line-height: 1; } .stat span { font-size: 13.5px; color: var(--muted); } /* ---------- 8. GRIDS E CARDS ---------- */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { font-size: 15.5px; color: var(--muted); margin: 0; } .card__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-ink); margin-bottom: 16px; } .section--soft .card { background: var(--card); } /* dores */ .pain { display: flex; gap: 14px; align-items: flex-start; } .pain__x { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--danger-bg); color: var(--danger-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; } /* ---------- 9. COMPARAÇÃO ---------- */ .compare { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); } .compare table { width: 100%; border-collapse: collapse; font-size: 15.5px; } .compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .compare thead th { background: var(--bg-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .compare thead th:last-child { background: var(--deep); color: #fff; } .compare tbody tr:last-child td { border-bottom: 0; } .compare td:first-child { font-weight: 600; color: var(--ink); width: 26%; } .compare td:last-child { background: var(--accent-bg); color: var(--ink); font-weight: 500; } .compare .no { color: var(--neg-ink); } /* ---------- 10. MÉTODO (passos) ---------- */ .steps { counter-reset: step; } .step { position: relative; padding-top: 26px; border-top: 3px solid var(--line); } .step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: -3px; left: 0; padding-top: 26px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--accent); } .step h3 { margin-top: 30px; font-size: 21px; } .step p { font-size: 15.5px; color: var(--muted); } .step.is-on { border-top-color: var(--accent); } /* ---------- 11. MODALIDADES ---------- */ .mode { overflow: hidden; padding: 0; display: flex; flex-direction: column; } .mode img { aspect-ratio: 3/2; object-fit: cover; width: 100%; flex: none; } .mode__body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; } .mode__tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; } .mode ul { margin: 14px 0 22px; display: grid; gap: 9px; font-size: 15.5px; } .mode li { display: flex; gap: 10px; align-items: flex-start; } .mode li svg { flex: none; margin-top: 4px; color: var(--green); } .mode .btn { margin-top: auto; } /* ---------- 12. RESULTADOS ---------- */ .result { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); } .result__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); position: relative; } .result__pair figure { margin: 0; position: relative; background: var(--card); } .result__pair img { aspect-ratio: 4/5; object-fit: cover; width: 100%; } .result__pair figcaption { position: absolute; left: 10px; top: 10px; background: rgba(14,17,22,.82); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; } .result__pair figure:last-child figcaption { background: var(--accent); } .result__meta { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .result__meta strong { color: var(--ink); font-size: 15.5px; } .result__meta span { font-size: 13.5px; color: var(--muted); } .disclaimer { font-size: 13px; color: var(--muted); margin-top: 22px; text-align: center; } /* ---------- 13. DEPOIMENTOS ---------- */ .quote { display: flex; flex-direction: column; gap: 16px; } .quote__stars { color: #F5A524; letter-spacing: 2px; font-size: 15px; } .quote p { font-size: 16px; color: var(--ink-soft); margin: 0; } .quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; } .quote__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .quote__who b { display: block; color: var(--ink); font-size: 15px; } .quote__who span { font-size: 13px; color: var(--muted); } /* ---------- 14. PLANOS ---------- */ .toggle { display: inline-flex; padding: 5px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; margin: 0 auto 38px; gap: 4px; } .toggle button { border: 0; background: transparent; padding: 11px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); transition: .2s; } .toggle button[aria-selected="true"] { background: var(--deep); color: #fff; } .plans[hidden] { display: none; } .plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 32px; display: flex; flex-direction: column; position: relative; transition: background-color .2s ease, border-color .2s ease; } .plan--featured { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); } .plan__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 15px; border-radius: 999px; white-space: nowrap; } .plan__name { font-family: var(--font-display); font-size: 27px; font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: 1; } .plan__desc { font-size: 14.5px; color: var(--muted); margin: 8px 0 20px; min-height: 42px; } .plan__price { display: flex; align-items: baseline; gap: 4px; color: var(--ink); } .plan__price .cur { font-size: 18px; font-weight: 600; } .plan__price .val { font-family: var(--font-display); font-size: 58px; font-weight: 800; line-height: .9; } .plan__price .per { font-size: 15px; color: var(--muted); margin-left: 2px; } .plan__note { font-size: 13.5px; color: var(--muted); margin: 10px 0 22px; } .plan__note s { color: var(--muted); } .plan ul { display: grid; gap: 11px; margin-bottom: 26px; font-size: 15px; } .plan li { display: flex; gap: 10px; align-items: flex-start; } .plan li svg { flex: none; margin-top: 4px; color: var(--green); } .plan li.off { color: var(--muted); } .plan li.off svg { color: var(--muted); } .plan .btn { margin-top: auto; } .plan--consult { max-width: 460px; margin: 0 auto; } .guarantee { margin-top: 40px; display: flex; gap: 18px; align-items: center; justify-content: center; background: var(--accent-bg); border: 1px dashed rgba(255,74,23,.35); border-radius: var(--radius); padding: 22px 26px; max-width: 700px; margin-inline: auto; } .guarantee svg { flex: none; color: var(--accent-ink); } .guarantee p { margin: 0; font-size: 15px; } .guarantee strong { color: var(--ink); } /* ---------- 15. SOBRE ---------- */ .about__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .about__grid img { border-radius: 22px; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow); } .about__creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .about__creds li { font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: var(--card); padding: 7px 14px; border-radius: 999px; } /* ---------- 16. FAQ ---------- */ .faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-weight: 600; font-size: 17.5px; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq details[open] summary { color: var(--accent-ink); } .faq .faq__a { padding: 0 20px 24px 0; font-size: 16px; color: var(--muted); } .faq .faq__a p:last-child { margin-bottom: 0; } /* ---------- 17. CTA FINAL ---------- */ .final { background: var(--deep); color: #C9CED6; text-align: center; padding: 96px 0; position: relative; overflow: hidden; } .final::before { content: ""; position: absolute; inset: auto 50% -320px auto; transform: translateX(50%); width: 900px; height: 600px; background: radial-gradient(ellipse, rgba(255,74,23,.28), transparent 65%); } .final > * { position: relative; } .final h2 { color: #fff; } .final p { max-width: 58ch; margin-inline: auto; color: #A8B0BA; } .final .hero__actions { justify-content: center; margin-top: 30px; margin-bottom: 0; } /* ---------- 18. RODAPÉ ---------- */ .footer { background: var(--deep); color: #8C95A0; padding: 56px 0 34px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14.5px; } .footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer img.footer__logo { height: 44px; width: auto; margin-bottom: 16px; } .footer h4 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } .footer a { text-decoration: none; } .footer a:hover { color: #fff; } .footer li { margin-bottom: 9px; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 13px; } .social { display: flex; gap: 10px; margin-top: 18px; } .social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; transition: .2s; } .social a:hover { background: #fff; color: var(--deep); border-color: #fff; } /* ---------- 19. BOTÃO FLUTUANTE WHATSAPP ---------- */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: var(--wa); color: #06331A; text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px 20px 14px 16px; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(37,211,102,.65); transform: translateY(120%); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .wa-float.is-visible { transform: translateY(0); } .wa-float:hover { background: #1FC15C; } /* ---------- 19b. ALTERNADOR DE TEMA ---------- */ .theme-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); align-items: center; justify-content: center; color: var(--ink); flex: none; padding: 0; transition: border-color .2s ease, transform .15s ease, background-color .2s ease; } .js .theme-toggle { display: inline-flex; } .theme-toggle:hover { border-color: var(--line-strong); transform: translateY(-1px); } .mobile-nav__theme { display: none; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 13px 0; font-size: 16px; font-weight: 600; color: var(--ink); } .js .mobile-nav__theme { display: flex; } .theme-toggle__icon { width: 32px; height: 32px; border-radius: 999px; background: var(--bg-soft); display: grid; place-items: center; color: var(--ink); flex: none; } [data-theme-toggle] .i-moon { display: none; } :root[data-theme="dark"] [data-theme-toggle] .i-sun { display: none; } :root[data-theme="dark"] [data-theme-toggle] .i-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-theme-toggle] .i-sun { display: none; } :root:not([data-theme="light"]) [data-theme-toggle] .i-moon { display: block; } } /* ---------- 20. ANIMAÇÃO DE ENTRADA ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .btn:hover, .card:hover { transform: none; } } /* ---------- 21. RESPONSIVO ---------- */ @media (max-width: 1000px) { .nav, .header__cta .btn--ghost { display: none; } .js .theme-toggle { display: none; } .burger { display: flex; } .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; max-width: 460px; } .hero__badge { left: auto; right: 12px; bottom: 14px; } .about__grid { grid-template-columns: 1fr; } .about__grid img { width: 100%; max-width: 420px; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body { font-size: 16px; } .section { padding: 64px 0; } .grid--3, .grid--2 { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .compare { overflow-x: auto; } .compare table { min-width: 560px; } .plan--featured { order: -1; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .guarantee { flex-direction: column; text-align: center; } .wa-float span { display: none; } .wa-float { padding: 15px; } .hero__actions .btn { flex: 1 1 100%; } } @media (max-width: 420px) { .grid--4 { grid-template-columns: 1fr; } .brand img.brand__word { height: 22px; } } /* ---------- 22. IMPRESSÃO ---------- */ @media print { .header, .wa-float, .mobile-nav, .final { display: none !important; } .reveal { opacity: 1; transform: none; } }