/* ========================================================================= Mudahr — Workshop Farmácia 2027 Landing Page · HTML + CSS + JS estático ------------------------------------------------------------------------- Sumário 01. Tokens / variáveis 02. Reset & base 03. Layout (grid 1240px · seções 100px · colunas 80px) 04. Tipografia & utilitários 05. Botões 06. Header 07. Hero 08. Contador regressivo 09. Seção: Reforma Tributária 10. Seção: O que você vai aprender 11. Seção: Para quem é 12. Seção: Quem é a Mudahr 13. FAQ 14. CTA final 15. Rodapé 16. Modal de inscrição + formulário 17. Páginas obrigado / 404 18. Animações (reveal, orbs, marquee...) 19. Responsivo 20. Acessibilidade / motion reduzido / impressão ========================================================================= */ /* ============================ 01. TOKENS ============================== */ :root{ /* Cores da marca (extraídas do site atual mudahr.com.br) */ --roxo: #430753; --roxo-escuro: #2C0437; --roxo-profundo: #1B0223; --roxo-medio: #5F2C6D; --roxo-claro: #7C4A8C; --verde: #04D896; --verde-claro: #34DFAA; --verde-escuro: #02B87F; --lilas: #F2F0FE; --lilas-2: #E9E5FB; --branco: #FFFFFF; --cinza-100: #F6F6F6; --cinza-200: #E7E4EE; /* Texto */ --texto: #2A1633; --texto-suave: #5E4C68; --texto-claro: rgba(255,255,255,.78); /* Estrutura */ --grid: 1240px; --gutter: 24px; --sec-y: 100px; /* padding vertical das seções */ --col-gap: 80px; /* separação entre colunas lado a lado */ /* Raios e sombras */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --sombra-sm: 0 2px 10px rgba(67,7,83,.06); --sombra: 0 12px 34px -12px rgba(67,7,83,.18); --sombra-lg: 0 30px 70px -24px rgba(67,7,83,.35); --sombra-verde: 0 14px 34px -12px rgba(4,216,150,.55); /* Movimento */ --ease: cubic-bezier(.22,.68,.24,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-rapido: .22s var(--ease); --t-medio: .42s var(--ease); --t-lento: .8s var(--ease-out); /* Tipografia */ --fonte: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --header-h: 88px; } /* ========================= 02. RESET & BASE =========================== */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* corta o transbordo lateral das animações sem criar rolagem horizontal. Precisa estar no : no o valor é propagado para a viewport e vira "hidden", que devolve a barra de rolagem. */ overflow-x:clip; } body{ margin:0; font-family:var(--fonte); font-size:17px; line-height:1.65; color:var(--texto); background:var(--branco); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* As animações .reveal--esq / .reveal--dir começam deslocadas em ±38px. Sem isto, elas criam barra de rolagem horizontal antes de entrar em cena. "clip" corta sem criar um contêiner de rolagem; "hidden" é o plano B. */ overflow-x:hidden; overflow-x:clip; } body.no-scroll{ overflow:hidden; } img,svg,video{ max-width:100%; display:block; height:auto; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } ul,ol{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p{ margin:0; } :focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:4px; } ::selection{ background:var(--verde); color:var(--roxo-escuro); } /* Barra de progresso de leitura */ .progresso-leitura{ position:fixed; inset:0 auto auto 0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--verde),var(--verde-claro)); z-index:1200; pointer-events:none; will-change:transform; } /* Link "pular para o conteúdo" */ .skip-link{ position:absolute; left:16px; top:-100px; background:var(--roxo); color:#fff; padding:12px 20px; border-radius:var(--r-sm); z-index:1300; transition:top var(--t-rapido); font-weight:600; } .skip-link:focus{ top:16px; } /* =========================== 03. LAYOUT ============================== */ .container{ width:min(var(--grid), 100% - (var(--gutter) * 2)); margin-inline:auto; } .secao{ padding-block:var(--sec-y); position:relative; } .secao--lilas{ background:var(--lilas); } .secao--roxa{ background:var(--roxo); color:#fff; } .secao--roxa .secao__titulo, .secao--roxa h2,.secao--roxa h3{ color:#fff; } /* Duas colunas lado a lado — 80px de separação */ .colunas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--col-gap); align-items:center; } .colunas--7-5{ grid-template-columns:1.16fr 1fr; } .colunas--5-7{ grid-template-columns:1fr 1.16fr; } .colunas--topo{ align-items:start; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } /* ==================== 04. TIPOGRAFIA & UTILITÁRIOS ==================== */ .secao__cabecalho{ max-width:760px; margin-bottom:64px; } .secao__cabecalho--centro{ margin-inline:auto; text-align:center; } .tag{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--roxo); background:rgba(4,216,150,.14); border:1px solid rgba(4,216,150,.4); padding:9px 18px; border-radius:var(--r-pill); margin-bottom:22px; } .tag--escura{ color:var(--verde-claro); background:rgba(4,216,150,.12); border-color:rgba(4,216,150,.35); } .tag__ponto{ width:8px; height:8px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 0 rgba(4,216,150,.7); animation:pulso 2.4s infinite; } .secao__titulo{ font-size:clamp(30px, 3.4vw, 46px); line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--roxo); } .secao__texto{ margin-top:20px; font-size:clamp(16px,1.15vw,18px); color:var(--texto-suave); } .secao--roxa .secao__texto{ color:var(--texto-claro); } .destaque{ color:var(--verde-escuro); } .secao--roxa .destaque,.hero .destaque{ color:var(--verde-claro); } .sublinha{ position:relative; display:inline-block; z-index:0; } .sublinha::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.03em; height:.26em; background:rgba(4,216,150,.30); border-radius:4px; z-index:-1; transform:scaleX(0); transform-origin:0 50%; transition:transform .9s var(--ease-out) .25s; } .is-visible .sublinha::after,.sublinha.is-visible::after{ transform:scaleX(1); } .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================ 05. BOTÕES ============================= */ .btn{ --btn-bg: var(--verde); --btn-cor: var(--roxo-escuro); position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:18px 34px; background:var(--btn-bg); color:var(--btn-cor); font-weight:700; font-size:15.5px; letter-spacing:.02em; border-radius:var(--r-pill); box-shadow:var(--sombra-verde); transition:transform var(--t-rapido), box-shadow var(--t-rapido), background var(--t-rapido); text-align:center; isolation:isolate; } .btn::after{ /* brilho que atravessa no hover */ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%); transform:translateX(-120%); transition:transform .7s var(--ease-out); } .btn:hover{ transform:translateY(-3px); box-shadow:0 20px 42px -14px rgba(4,216,150,.7); } .btn:hover::after{ transform:translateX(120%); } .btn:active{ transform:translateY(-1px); } .btn__seta{ transition:transform var(--t-rapido); flex:none; } .btn:hover .btn__seta{ transform:translateX(4px); } .btn--roxo{ --btn-bg:var(--roxo); --btn-cor:#fff; box-shadow:0 14px 34px -14px rgba(67,7,83,.65); } .btn--roxo:hover{ box-shadow:0 20px 42px -14px rgba(67,7,83,.75); } .btn--contorno{ --btn-bg:transparent; --btn-cor:#fff; box-shadow:none; border:2px solid rgba(255,255,255,.35); } .btn--contorno:hover{ background:rgba(255,255,255,.1); box-shadow:none; } .btn--grande{ padding:22px 44px; font-size:17px; } .btn--bloco{ width:100%; } .btn--pequeno{ padding:13px 24px; font-size:14px; } /* pulso discreto no CTA principal */ .btn--pulsante{ animation:pulsoBtn 3.4s var(--ease) infinite; } .btn--pulsante:hover{ animation-play-state:paused; } .cta-apoio{ margin-top:16px; font-size:14px; color:var(--texto-suave); display:flex; align-items:center; gap:8px; } .secao--roxa .cta-apoio,.hero .cta-apoio{ color:var(--texto-claro); } /* ============================ 06. HEADER ============================= */ /* O menu não acompanha a rolagem: fica só no topo, sobre o hero. Depois que ele sai de cena, quem assume é a barra fixa inferior. */ .header{ position:absolute; inset:0 0 auto 0; z-index:1000; background:transparent; } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:var(--header-h); } /* z-index mantém a logo visível por cima do menu mobile aberto */ .header__logo{ position:relative; z-index:2; } .header__logo img{ width:158px; } .nav{ display:flex; align-items:center; gap:36px; } .nav__link{ position:relative; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.85); transition:color var(--t-rapido); } .nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--verde); border-radius:2px; transform:scaleX(0); transform-origin:100% 50%; transition:transform .35s var(--ease-out); } .nav__link:hover{ color:#fff; } .nav__link:hover::after{ transform:scaleX(1); transform-origin:0 50%; } /* o CTA dentro do menu só existe no mobile — no desktop vale o .header__acoes */ .nav .btn{ display:none; } /* Botão hambúrguer */ .menu-btn{ display:none; width:46px; height:46px; border-radius:var(--r-sm); flex-direction:column; gap:5px; align-items:center; justify-content:center; } .menu-btn span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform var(--t-medio), opacity var(--t-rapido); } .menu-btn.is-aberto span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .menu-btn.is-aberto span:nth-child(2){ opacity:0; } .menu-btn.is-aberto span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ============================= 07. HERO ============================== */ .hero{ position:relative; overflow:hidden; padding-top:calc(var(--header-h) + 72px); padding-bottom:var(--sec-y); background: radial-gradient(120% 90% at 85% 0%, #5B0E70 0%, transparent 55%), linear-gradient(165deg, var(--roxo) 0%, var(--roxo-escuro) 55%, var(--roxo-profundo) 100%); color:#fff; } .hero__orbes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .orbe{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; } .orbe--1{ width:520px; height:520px; top:-140px; right:-120px; background:rgba(4,216,150,.42); animation:flutuarOrbe 17s ease-in-out infinite; } .orbe--2{ width:420px; height:420px; bottom:-180px; left:-100px; background:rgba(124,74,140,.6); animation:flutuarOrbe 21s ease-in-out infinite reverse; } .orbe--3{ width:280px; height:280px; top:45%; left:42%; background:rgba(4,216,150,.2); animation:flutuarOrbe 25s ease-in-out infinite; } .hero__malha{ /* grade sutil por cima do gradiente */ position:absolute; inset:0; pointer-events:none; opacity:.35; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(75% 65% at 50% 40%, #000 20%, transparent 85%); -webkit-mask-image:radial-gradient(75% 65% at 50% 40%, #000 20%, transparent 85%); } .hero .container{ position:relative; z-index:2; } .hero__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--col-gap); align-items:center; } .hero__titulo{ font-size:clamp(34px, 4.4vw, 62px); line-height:1.08; font-weight:800; letter-spacing:-.028em; margin-bottom:24px; } .hero__texto{ font-size:clamp(16.5px,1.3vw,19.5px); color:var(--texto-claro); max-width:56ch; } .hero__data{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; margin:32px 0 34px; padding:14px 24px 14px 18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:15px; font-weight:600; } .hero__data svg{ color:var(--verde-claro); flex:none; } .hero__data-sep{ width:1px; height:18px; background:rgba(255,255,255,.22); } .hero__data-tag{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--verde-claro); } .hero__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; } /* Composição visual do hero */ .hero__visual{ position:relative; } .painel{ position:relative; background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-xl); padding:34px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); } .painel__topo{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14); } .painel__rotulo{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-claro); } .painel__vivo{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:rgba(255,255,255,.75); } .painel__vivo i{ width:8px; height:8px; border-radius:50%; background:#FF5A5A; animation:pulsoVivo 1.8s infinite; } .painel__lista{ display:grid; gap:14px; } .painel__item{ display:flex; align-items:center; gap:14px; padding:15px 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); font-size:14.5px; font-weight:500; transition:transform var(--t-rapido), background var(--t-rapido), border-color var(--t-rapido); } .painel__item:hover{ transform:translateX(6px); background:rgba(4,216,150,.12); border-color:rgba(4,216,150,.4); } .painel__check{ flex:none; width:26px; height:26px; border-radius:50%; background:rgba(4,216,150,.2); color:var(--verde-claro); display:grid; place-items:center; } .painel__rodape{ margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:14px; } .painel__avatares{ display:flex; } .painel__avatares span{ width:34px; height:34px; border-radius:50%; border:2px solid var(--roxo-escuro); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--roxo-escuro); background:var(--verde-claro); } .painel__avatares span+span{ margin-left:-12px; } .painel__avatares span:nth-child(2){ background:#C9B6D6; } .painel__avatares span:nth-child(3){ background:#8FE9C8; } .painel__rodape p{ font-size:13.5px; color:var(--texto-claro); } /* Cartões flutuantes */ .flutuante{ position:absolute; z-index:3; background:#fff; color:var(--roxo); border-radius:var(--r-md); padding:16px 20px; box-shadow:0 24px 50px -20px rgba(0,0,0,.55); display:flex; align-items:center; gap:12px; will-change:transform; } .flutuante strong{ display:block; font-size:20px; font-weight:800; line-height:1.1; } .flutuante span{ font-size:11.5px; color:var(--texto-suave); font-weight:500; } .flutuante__icone{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:rgba(4,216,150,.16); color:var(--verde-escuro); } /* posicionados para transbordar o painel sem cobrir o texto interno */ .flutuante--1{ top:-52px; left:-40px; animation:flutuar 6s ease-in-out infinite; } .flutuante--2{ bottom:-48px; right:-28px; animation:flutuar 7.5s ease-in-out infinite .8s; } /* Faixa rolante */ .faixa{ position:relative; z-index:2; margin-top:76px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding:20px 0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .faixa__trilha{ display:flex; width:max-content; animation:correr 34s linear infinite; } .faixa:hover .faixa__trilha{ animation-play-state:paused; } .faixa__grupo{ display:flex; align-items:center; gap:44px; padding-right:44px; } .faixa__item{ display:flex; align-items:center; gap:14px; font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap; } .faixa__item::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--verde); opacity:.7; } /* ======================= 08. CONTADOR REGRESSIVO ====================== */ .contador-faixa{ background:var(--roxo-escuro); padding-block:56px; position:relative; overflow:hidden; } .contador-faixa::before{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,rgba(4,216,150,.6),transparent); } .contador-faixa__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--col-gap); flex-wrap:wrap; } .contador-faixa__texto h2{ font-size:clamp(21px,2vw,27px); font-weight:800; color:#fff; letter-spacing:-.01em; } .contador-faixa__texto p{ color:var(--texto-claro); font-size:15px; margin-top:6px; } .contador{ display:flex; gap:14px; } .contador__bloco{ min-width:92px; padding:16px 10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); text-align:center; } .contador__num{ display:block; font-size:36px; font-weight:800; line-height:1; color:var(--verde-claro); font-variant-numeric:tabular-nums; transition:transform .3s var(--ease-out); } .contador__num.is-tick{ transform:translateY(-4px) scale(1.06); } .contador__rot{ display:block; margin-top:8px; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); } .contador--encerrado{ color:var(--verde-claro); font-weight:700; } /* ==================== 09. SEÇÃO REFORMA TRIBUTÁRIA ==================== */ .figura-bloco{ margin:0; } .figura{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(150deg,var(--roxo) 0%,var(--roxo-escuro) 100%); aspect-ratio:4/5; display:grid; place-items:center; box-shadow:var(--sombra-lg); } .figura img{ width:100%; height:100%; object-fit:cover; } .figura__grafico{ width:100%; height:100%; } /* Legenda abaixo da arte (não por cima): a altura dela muda conforme a largura da tela e cobriria os rótulos do gráfico em telas menores. */ .figura__legenda{ margin-top:16px; padding:16px 20px; background:var(--lilas); border:1px solid var(--cinza-200); border-radius:var(--r-md); font-size:13.5px; color:var(--texto-suave); font-weight:500; line-height:1.5; } .figura__legenda strong{ display:block; color:var(--roxo); font-size:15px; margin-bottom:2px; } .figura__selo{ position:absolute; top:22px; right:22px; z-index:2; padding:9px 16px; border-radius:var(--r-pill); background:var(--verde); color:var(--roxo-escuro); font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .pergunta-destaque{ margin-top:28px; padding:26px 30px; border-left:3px solid var(--verde); background:linear-gradient(90deg, rgba(4,216,150,.08), transparent); border-radius:0 var(--r-md) var(--r-md) 0; font-size:17px; color:var(--texto); } .pergunta-destaque strong{ color:var(--roxo); } .comparativo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; } .comparativo__card{ padding:28px; border-radius:var(--r-lg); border:1px solid var(--cinza-200); background:#fff; transition:transform var(--t-medio), box-shadow var(--t-medio), border-color var(--t-medio); } .comparativo__card:hover{ transform:translateY(-6px); box-shadow:var(--sombra); } .comparativo__card h3{ font-size:17.5px; font-weight:700; color:var(--roxo); margin-bottom:10px; display:flex; align-items:center; gap:10px; } .comparativo__card p{ font-size:14.5px; color:var(--texto-suave); } .comparativo__icone{ width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; } .comparativo__card--ruim .comparativo__icone{ background:rgba(150,120,165,.16); color:var(--roxo-claro); } .comparativo__card--bom{ border-color:rgba(4,216,150,.5); background:linear-gradient(170deg,rgba(4,216,150,.07),#fff 60%); } .comparativo__card--bom .comparativo__icone{ background:rgba(4,216,150,.18); color:var(--verde-escuro); } .comparativo__card--bom:hover{ box-shadow:0 20px 44px -20px rgba(4,216,150,.5); } /* ================= 10. O QUE VOCÊ VAI APRENDER (cards) ================ */ .aprender__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .card-num{ position:relative; overflow:hidden; padding:38px 32px 34px; background:#fff; border:1px solid var(--cinza-200); border-radius:var(--r-lg); transition:transform var(--t-medio), box-shadow var(--t-medio), border-color var(--t-medio); } .card-num::before{ /* faixa verde que cresce no topo */ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--verde),var(--verde-claro)); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease-out); } .card-num:hover{ transform:translateY(-8px); box-shadow:var(--sombra); border-color:rgba(4,216,150,.45); } .card-num:hover::before{ transform:scaleX(1); } .card-num__num{ display:block; font-size:44px; font-weight:800; line-height:1; color:transparent; background:linear-gradient(140deg,var(--verde) 0%, var(--roxo-claro) 120%); -webkit-background-clip:text; background-clip:text; margin-bottom:18px; transition:transform var(--t-medio); } .card-num:hover .card-num__num{ transform:scale(1.08); } .card-num h3{ font-size:19px; font-weight:700; color:var(--roxo); margin-bottom:10px; letter-spacing:-.01em; } .card-num p{ font-size:15px; color:var(--texto-suave); } .card-num__marca{ position:absolute; right:-10px; bottom:-24px; font-size:110px; font-weight:800; line-height:1; color:rgba(67,7,83,.035); pointer-events:none; transition:transform var(--t-lento), color var(--t-medio); } .card-num:hover .card-num__marca{ transform:translate(-6px,-6px); color:rgba(4,216,150,.09); } .aprender__rodape{ margin-top:56px; text-align:center; } /* ===================== 11. PARA QUEM É O WORKSHOP ===================== */ .publico__card{ padding:34px 28px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); transition:transform var(--t-medio), background var(--t-medio), border-color var(--t-medio); } .publico__card:hover{ transform:translateY(-8px); background:rgba(4,216,150,.1); border-color:rgba(4,216,150,.45); } .publico__icone{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px; background:rgba(4,216,150,.16); color:var(--verde-claro); transition:transform var(--t-medio); } .publico__card:hover .publico__icone{ transform:rotate(-6deg) scale(1.06); } .publico__card h3{ font-size:17.5px; font-weight:700; color:#fff; margin-bottom:8px; } .publico__card p{ font-size:14.5px; color:var(--texto-claro); } /* ===================== 12. QUEM É A MUDAHR =========================== */ .marca__logo{ width:230px; margin-bottom:26px; } .lista-check{ display:grid; gap:14px; margin-top:30px; } .lista-check li{ display:flex; align-items:flex-start; gap:14px; font-size:16px; font-weight:500; color:var(--texto); } .lista-check__icone{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--verde); color:var(--roxo-escuro); display:grid; place-items:center; margin-top:1px; transition:transform var(--t-rapido); } .lista-check li:hover .lista-check__icone{ transform:scale(1.12) rotate(8deg); } .numeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; } .numero{ padding:24px; border-radius:var(--r-md); background:var(--lilas); text-align:center; } .numero strong{ display:block; font-size:34px; font-weight:800; color:var(--roxo); line-height:1; font-variant-numeric:tabular-nums; } .numero span{ display:block; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--texto-suave); } /* ============================== 13. FAQ ============================== */ .faq{ max-width:900px; margin-inline:auto; display:grid; gap:16px; } .faq__item{ background:#fff; border:1px solid var(--cinza-200); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--t-medio), box-shadow var(--t-medio); } .faq__item.is-aberto{ border-color:rgba(4,216,150,.55); box-shadow:var(--sombra-sm); } .faq__pergunta{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 28px; text-align:left; font-size:16.5px; font-weight:600; color:var(--roxo); transition:background var(--t-rapido); } .faq__pergunta:hover{ background:rgba(242,240,254,.7); } .faq__mais{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--lilas); color:var(--roxo); display:grid; place-items:center; transition:transform var(--t-medio), background var(--t-medio), color var(--t-medio); } .faq__item.is-aberto .faq__mais{ transform:rotate(135deg); background:var(--verde); color:var(--roxo-escuro); } .faq__resposta{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out); } .faq__item.is-aberto .faq__resposta{ grid-template-rows:1fr; } .faq__resposta > div{ overflow:hidden; } .faq__resposta p{ padding:0 28px 26px; font-size:15.5px; color:var(--texto-suave); } /* =========================== 14. CTA FINAL =========================== */ .cta-final{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--roxo) 0%, var(--roxo-escuro) 70%, var(--roxo-profundo) 100%); color:#fff; text-align:center; } .cta-final::before{ content:""; position:absolute; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle, rgba(4,216,150,.28) 0%, transparent 65%); top:50%; left:50%; transform:translate(-50%,-50%); animation:respirar 9s ease-in-out infinite; pointer-events:none; } .cta-final .container{ position:relative; z-index:2; } .cta-final__logo{ width:190px; margin:0 auto 34px; } .cta-final__titulo{ font-size:clamp(30px,3.8vw,50px); font-weight:800; line-height:1.14; letter-spacing:-.025em; max-width:20ch; margin-inline:auto; } .cta-final__texto{ margin:22px auto 40px; max-width:60ch; font-size:clamp(16px,1.2vw,18.5px); color:var(--texto-claro); } .cta-final__selos{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; margin-top:38px; } .cta-final__selo{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--texto-claro); } .cta-final__selo svg{ color:var(--verde-claro); flex:none; } /* ============================ 15. RODAPÉ ============================= */ /* Rodapé enxuto: logo à esquerda; política e créditos à direita. */ .rodape{ background:var(--roxo-profundo); color:rgba(255,255,255,.6); } .rodape__base{ padding-block:34px; display:flex; align-items:center; justify-content:space-between; gap:28px 40px; flex-wrap:wrap; font-size:13px; } .rodape__logo{ width:160px; flex:none; } .rodape__logo img{ width:100%; } .rodape__direita{ display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap; justify-content:flex-end; } .rodape__politica{ transition:color var(--t-rapido); } .rodape__politica:hover{ color:var(--verde-claro); } .rodape__sep{ width:1px; height:14px; background:rgba(255,255,255,.18); } .rodape__copy{ color:rgba(255,255,255,.5); } .rodape__dev{ display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.5); } .rodape__dev-link{ display:inline-flex; transition:opacity var(--t-rapido), transform var(--t-rapido); } .rodape__dev-link:hover{ opacity:.75; transform:translateY(-2px); } .rodape__dev-link img{ height:24px; width:auto; filter:brightness(0) invert(1); /* logo escura vira branca sobre o roxo */ } /* ================= 15b. BARRA FIXA INFERIOR (vidro) ================== */ /* Entra quando o hero sai de cena e some ao chegar no CTA final, para não duplicar o botão com o que já está na tela. */ .barra-fixa{ position:fixed; inset:auto 0 0 0; z-index:950; padding:14px 0; background:linear-gradient(180deg, rgba(43,4,55,.62), rgba(27,2,35,.82)); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-top:1px solid rgba(255,255,255,.14); box-shadow:0 -20px 50px -28px rgba(0,0,0,.9); color:#fff; transform:translateY(110%); opacity:0; visibility:hidden; transition:transform .55s var(--ease-out), opacity .35s var(--ease), visibility .55s; will-change:transform; } .barra-fixa.is-visivel{ transform:none; opacity:1; visibility:visible; } /* fio de luz verde no topo da barra */ .barra-fixa::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, rgba(4,216,150,.75), transparent); } .barra-fixa__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; } .barra-fixa__info{ display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.35; min-width:0; } .barra-fixa__info strong{ display:block; font-weight:700; font-size:14.5px; color:#fff; } .barra-fixa__info span span{ color:var(--texto-claro); font-size:13px; } .barra-fixa__ponto{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 0 rgba(4,216,150,.7); animation:pulso 2.4s infinite; } .barra-fixa .contador{ gap:10px; margin-inline:auto; } .barra-fixa .contador__bloco{ min-width:60px; padding:8px 6px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); border-radius:12px; } .barra-fixa .contador__num{ font-size:21px; } .barra-fixa .contador__rot{ margin-top:3px; font-size:8.5px; letter-spacing:.12em; } .barra-fixa .btn{ flex:none; } .barra-fixa .contador--encerrado{ font-size:14px; margin:0; } /* Botão flutuante "voltar ao topo" */ .ao-topo{ position:fixed; right:24px; bottom:24px; z-index:960; width:54px; height:54px; border-radius:50%; background:var(--verde); color:var(--roxo-escuro); display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(4,216,150,.65); transition:transform var(--t-rapido), box-shadow var(--t-rapido), opacity var(--t-medio), visibility var(--t-medio); opacity:0; visibility:hidden; transform:translateY(16px) scale(.9); } .ao-topo.is-visivel{ opacity:1; visibility:visible; transform:none; } /* sobe para não ficar por baixo da barra fixa */ .ao-topo.is-acima-da-barra{ bottom:calc(var(--barra-h, 86px) + 18px); } .ao-topo:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 20px 38px -12px rgba(4,216,150,.8); } .ao-topo svg{ transition:transform var(--t-rapido); } .ao-topo:hover svg{ transform:translateY(-2px); } /* ================= 16. MODAL DE INSCRIÇÃO + FORMULÁRIO ================ */ .modal{ position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity var(--t-medio), visibility var(--t-medio); } .modal.is-aberto{ opacity:1; visibility:visible; } .modal__fundo{ position:absolute; inset:0; background:rgba(27,2,35,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .modal__caixa{ position:relative; z-index:2; width:min(1000px,100%); max-height:min(92vh, 900px); overflow-y:auto; overscroll-behavior:contain; background:#fff; border-radius:var(--r-xl); box-shadow:0 50px 100px -30px rgba(0,0,0,.6); transform:translateY(28px) scale(.97); opacity:0; transition:transform .5s var(--ease-out), opacity .4s var(--ease-out); } .modal.is-aberto .modal__caixa{ transform:none; opacity:1; } .modal__grid{ display:grid; grid-template-columns:.85fr 1fr; } .modal__lado{ padding:48px 42px; background:linear-gradient(165deg,var(--roxo) 0%,var(--roxo-escuro) 100%); color:#fff; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .modal__lado::before{ content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(4,216,150,.3), transparent 65%); top:-100px; right:-120px; } .modal__lado > *{ position:relative; z-index:2; } .modal__lado h2{ font-size:26px; font-weight:800; line-height:1.2; letter-spacing:-.02em; margin-bottom:16px; } .modal__lado p{ font-size:14.5px; color:var(--texto-claro); } .modal__beneficios{ display:grid; gap:14px; margin-top:30px; } .modal__beneficios li{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; } .modal__form{ padding:44px 42px; } .modal__form h3{ font-size:22px; font-weight:800; color:var(--roxo); margin-bottom:6px; } .modal__form > p{ font-size:14.5px; color:var(--texto-suave); margin-bottom:26px; } .modal__fechar{ position:absolute; top:16px; right:16px; z-index:5; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--roxo); display:grid; place-items:center; transition:transform var(--t-rapido), background var(--t-rapido); box-shadow:var(--sombra-sm); } .modal__fechar:hover{ transform:rotate(90deg); background:var(--verde); } .campo{ margin-bottom:18px; position:relative; } .campo label{ display:block; font-size:13px; font-weight:600; color:var(--roxo); margin-bottom:7px; } .campo label span{ color:#D7263D; } .campo input,.campo select{ width:100%; padding:15px 17px; background:var(--lilas); border:1.5px solid transparent; border-radius:var(--r-sm); font-size:15px; transition:border-color var(--t-rapido), background var(--t-rapido), box-shadow var(--t-rapido); appearance:none; -webkit-appearance:none; } .campo select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23430753' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; cursor:pointer; } .campo input::placeholder{ color:#9C8FA8; } /* usar background-color (e não o atalho background) preserva a seta do select */ .campo input:focus,.campo select:focus{ outline:none; background-color:#fff; border-color:var(--verde); box-shadow:0 0 0 4px rgba(4,216,150,.16); } .campo.tem-erro input,.campo.tem-erro select{ border-color:#D7263D; background-color:#FEF2F3; } .campo.tem-erro input:focus,.campo.tem-erro select:focus{ border-color:#D7263D; box-shadow:0 0 0 4px rgba(215,38,61,.15); } .campo__erro{ display:block; font-size:12.5px; color:#D7263D; margin-top:6px; opacity:0; transform:translateY(-4px); transition:opacity var(--t-rapido), transform var(--t-rapido); } .campo.tem-erro .campo__erro{ opacity:1; transform:none; } .campo--duplo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } /* ------------------------------------------------------------------- Select estilizado O navegador não deixa estilizar a lista nativa do real escondido — ele continua sendo a fonte do valor. Sem JS, o campo nativo aparece normalmente e o formulário continua funcionando. ------------------------------------------------------------------- */ .select-mudahr{ position:relative; } .select-mudahr select{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; padding:0; border:0; } .select-mudahr__gatilho{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; background-color:var(--lilas); border:1.5px solid transparent; border-radius:var(--r-sm); font-size:15px; text-align:left; color:#9C8FA8; transition:border-color var(--t-rapido), background-color var(--t-rapido), box-shadow var(--t-rapido); } .select-mudahr__gatilho.tem-valor{ color:var(--texto); } .select-mudahr__gatilho:hover{ background-color:var(--lilas-2); } .select-mudahr__gatilho:focus-visible{ outline:none; } .select-mudahr__gatilho:focus-visible, .select-mudahr.is-aberto .select-mudahr__gatilho{ background-color:#fff; border-color:var(--verde); box-shadow:0 0 0 4px rgba(4,216,150,.16); } .campo.tem-erro .select-mudahr__gatilho{ border-color:#D7263D; background-color:#FEF2F3; box-shadow:0 0 0 4px rgba(215,38,61,.15); } .select-mudahr__seta{ flex:none; color:var(--roxo); transition:transform var(--t-medio); } .select-mudahr.is-aberto .select-mudahr__seta{ transform:rotate(180deg); } .select-mudahr__painel{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; max-height:262px; overflow-y:auto; overscroll-behavior:contain; padding:6px; background:#fff; border:1px solid var(--cinza-200); border-radius:var(--r-sm); box-shadow:0 24px 48px -20px rgba(67,7,83,.45); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985); transform-origin:50% 0; transition:opacity .2s var(--ease), transform .26s var(--ease-out), visibility .26s; } .select-mudahr.is-aberto .select-mudahr__painel{ opacity:1; visibility:visible; transform:none; } /* abre para cima quando não há espaço abaixo (campo no fim do modal) */ .select-mudahr.is-para-cima .select-mudahr__painel{ top:auto; bottom:calc(100% + 8px); transform-origin:50% 100%; transform:translateY(8px) scale(.985); } .select-mudahr.is-para-cima.is-aberto .select-mudahr__painel{ transform:none; } .select-mudahr__painel::-webkit-scrollbar{ width:9px; } .select-mudahr__painel::-webkit-scrollbar-track{ background:transparent; } .select-mudahr__painel::-webkit-scrollbar-thumb{ background:var(--lilas-2); border-radius:9px; } .select-mudahr__painel::-webkit-scrollbar-thumb:hover{ background:#D6CEF3; } .select-mudahr__opcao{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:8px; font-size:14.5px; line-height:1.35; color:var(--texto); cursor:pointer; transition:background-color var(--t-rapido), color var(--t-rapido); } .select-mudahr__opcao + .select-mudahr__opcao{ margin-top:2px; } .select-mudahr__opcao.is-ativa{ background-color:var(--lilas); } .select-mudahr__opcao[aria-selected="true"]{ color:var(--roxo); font-weight:600; background-color:rgba(4,216,150,.13); } .select-mudahr__opcao[aria-selected="true"].is-ativa{ background-color:rgba(4,216,150,.22); } /* a opção "Selecione uma opção" nunca se comporta como escolha válida */ .select-mudahr__opcao--vazia, .select-mudahr__opcao--vazia[aria-selected="true"]{ color:#9C8FA8; font-weight:400; background-color:transparent; } .select-mudahr__opcao--vazia.is-ativa{ background-color:var(--lilas); } .select-mudahr__opcao--vazia svg{ display:none; } .select-mudahr__opcao svg{ opacity:0; color:var(--verde-escuro); flex:none; transform:scale(.6); transition:opacity var(--t-rapido), transform var(--t-rapido); } .select-mudahr__opcao[aria-selected="true"] svg{ opacity:1; transform:none; } .form__consentimento{ display:flex; align-items:flex-start; gap:11px; font-size:12.8px; color:var(--texto-suave); line-height:1.5; margin:6px 0 22px; } .form__consentimento input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--verde); cursor:pointer; } .form__consentimento a{ color:var(--roxo); font-weight:600; text-decoration:underline; } .form__nota{ margin-top:16px; font-size:12.5px; color:var(--texto-suave); display:flex; align-items:flex-start; gap:8px; } .form__nota svg{ flex:none; margin-top:2px; color:var(--verde-escuro); } .form__aviso{ padding:14px 16px; border-radius:var(--r-sm); font-size:13.5px; background:#FEF2F3; color:#A31226; border:1px solid rgba(215,38,61,.3); margin-bottom:18px; } .form__aviso[hidden]{ display:none; } /* estado de carregamento no botão */ .btn.is-carregando{ pointer-events:none; opacity:.85; } .btn.is-carregando .btn__rotulo{ visibility:hidden; } .btn.is-carregando .btn__seta{ visibility:hidden; } .btn__spinner{ position:absolute; inset:0; display:none; place-items:center; } .btn.is-carregando .btn__spinner{ display:grid; } .btn__spinner i{ width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(43,4,55,.25); border-top-color:var(--roxo-escuro); animation:girar .7s linear infinite; } /* honeypot anti-spam */ .hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; } /* =================== 17. PÁGINAS OBRIGADO / 404 ====================== */ .pagina-central{ min-height:100vh; display:grid; place-items:center; padding:120px 24px 80px; position:relative; overflow:hidden; background: radial-gradient(120% 80% at 80% 0%, #5B0E70 0%, transparent 55%), linear-gradient(165deg,var(--roxo) 0%,var(--roxo-escuro) 60%,var(--roxo-profundo) 100%); color:#fff; text-align:center; } .pagina-central .container{ position:relative; z-index:2; } .pagina-central__logo{ width:200px; margin:0 auto 44px; } .pagina-central h1{ font-size:clamp(30px,4vw,50px); font-weight:800; line-height:1.15; letter-spacing:-.025em; max-width:22ch; margin-inline:auto; } /* classe explícita — um seletor genérico de

aqui atropelaria .tag, .erro-num e .cta-apoio, que também são parágrafos desta página */ .pagina-central__texto{ margin:22px auto 0; max-width:58ch; font-size:clamp(16px,1.2vw,18.5px); color:var(--texto-claro); } .pagina-central__acoes{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:40px; } /* Selo de confirmação animado */ .selo-ok{ width:96px; height:96px; margin:0 auto 32px; border-radius:50%; display:grid; place-items:center; background:rgba(4,216,150,.14); border:2px solid rgba(4,216,150,.4); animation:respirarSelo 3s ease-in-out infinite; } .selo-ok svg{ color:var(--verde-claro); } .selo-ok__risco{ stroke-dasharray:48; stroke-dashoffset:48; animation:desenhar .8s var(--ease-out) .35s forwards; } /* Anel de redirecionamento */ .redirect{ margin-top:52px; display:inline-flex; align-items:center; gap:18px; padding:16px 26px 16px 18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .redirect__anel{ position:relative; width:46px; height:46px; flex:none; } .redirect__anel svg{ transform:rotate(-90deg); } .redirect__anel circle{ fill:none; stroke-width:4; } .redirect__trilho{ stroke:rgba(255,255,255,.16); } .redirect__barra{ stroke:var(--verde); stroke-linecap:round; stroke-dasharray:126; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear; } .redirect__num{ position:absolute; inset:0; display:grid; place-items:center; font-size:15px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; } .redirect__texto{ font-size:14px; color:var(--texto-claro); text-align:left; } .redirect__texto strong{ display:block; color:#fff; font-size:14.5px; font-weight:600; } /* Próximos passos (obrigado) */ .passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:64px; text-align:left; } .passo{ padding:28px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); transition:transform var(--t-medio), background var(--t-medio), border-color var(--t-medio); } .passo:hover{ transform:translateY(-6px); background:rgba(4,216,150,.1); border-color:rgba(4,216,150,.4); } .passo strong{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--verde); color:var(--roxo-escuro); font-size:14px; font-weight:800; margin-bottom:16px; } .passo h2{ font-size:16.5px; font-weight:700; color:#fff; margin-bottom:7px; } .passo p{ font-size:14px; color:var(--texto-claro); margin:0; max-width:none; } /* 404 */ .erro-num{ font-size:clamp(110px,20vw,220px); font-weight:800; line-height:.9; letter-spacing:-.04em; color:transparent; background:linear-gradient(150deg,var(--verde) 0%, rgba(255,255,255,.9) 60%, var(--roxo-claro) 110%); -webkit-background-clip:text; background-clip:text; margin-bottom:8px; animation:brilho 6s ease-in-out infinite; } .erro-links{ margin-top:56px; padding-top:34px; border-top:1px solid rgba(255,255,255,.14); } .erro-links h2{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--verde-claro); margin-bottom:18px; } .erro-links ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .erro-links a{ display:inline-block; padding:10px 20px; border:1px solid rgba(255,255,255,.2); border-radius:var(--r-pill); font-size:14px; color:rgba(255,255,255,.8); transition:background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido); } .erro-links a:hover{ background:var(--verde); color:var(--roxo-escuro); border-color:var(--verde); transform:translateY(-3px); } /* ========================== 18. ANIMAÇÕES ============================ */ .reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay:var(--d,0ms); will-change:opacity, transform; } .reveal--esq{ transform:translateX(-38px); } .reveal--dir{ transform:translateX(38px); } .reveal--zoom{ transform:scale(.94); } .reveal.is-visible{ opacity:1; transform:none; } @keyframes flutuar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } } @keyframes flutuarOrbe{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(38px,-28px) scale(1.08); } 66%{ transform:translate(-26px,22px) scale(.95); } } @keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes pulso{ 0%{ box-shadow:0 0 0 0 rgba(4,216,150,.65); } 70%{ box-shadow:0 0 0 10px rgba(4,216,150,0); } 100%{ box-shadow:0 0 0 0 rgba(4,216,150,0); } } @keyframes pulsoVivo{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.82); } } @keyframes pulsoBtn{ 0%,100%{ box-shadow:var(--sombra-verde); } 50%{ box-shadow:0 14px 34px -12px rgba(4,216,150,.55), 0 0 0 12px rgba(4,216,150,.08); } } @keyframes girar{ to{ transform:rotate(360deg); } } @keyframes respirar{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.85; } 50%{ transform:translate(-50%,-50%) scale(1.14); opacity:1; } } @keyframes respirarSelo{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(4,216,150,.28); } 50%{ transform:scale(1.04); box-shadow:0 0 0 18px rgba(4,216,150,0); } } @keyframes desenhar{ to{ stroke-dashoffset:0; } } @keyframes brilho{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.18); } } /* traço dos gráficos SVG */ .traco{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); transition:stroke-dashoffset 1.8s var(--ease-out) .3s; } .is-visible .traco{ stroke-dashoffset:0; } .barra-svg{ transform:scaleY(0); transform-origin:50% 100%; transition:transform .9s var(--ease-out) var(--d,0ms); } .is-visible .barra-svg{ transform:scaleY(1); } /* ========================== 19. RESPONSIVO =========================== */ @media (max-width:1100px){ :root{ --col-gap:56px; --sec-y:88px; } .aprender__grid{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } /* espaço extra embaixo: o botão flutuante fica sobre o canto do rodapé */ .rodape__base{ justify-content:center; text-align:center; padding-bottom:96px; } .flutuante--1{ left:-14px; } .flutuante--2{ right:-8px; } } @media (max-width:900px){ .nav{ position:fixed; inset:0 0 auto 0; flex-direction:column; align-items:stretch; gap:0; padding:calc(var(--header-h) + 12px) 24px 32px; background:rgba(27,2,35,.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transform:translateY(-110%); transition:transform .5s var(--ease-out); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); } .nav.is-aberta{ transform:none; } .nav__link{ padding:16px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,.08); } .nav__link::after{ display:none; } .nav .btn{ margin-top:22px; } .menu-btn{ display:flex; } .header__acoes{ display:none; } .hero{ padding-top:calc(var(--header-h) + 48px); } .hero__grid,.colunas,.colunas--7-5,.colunas--5-7{ grid-template-columns:1fr; gap:56px; } .colunas--inverte-mob > *:first-child{ order:2; } /* mantém a proporção alta: as composições SVG ficariam achatadas em 16/11. width:100% é obrigatório — só margin:auto faria o item do grid encolher para a largura padrão do SVG (300px). */ .figura-bloco{ width:100%; max-width:460px; margin-inline:auto; } .nav .btn{ display:inline-flex; } .contador-faixa__inner{ flex-direction:column; align-items:flex-start; gap:32px; } /* na barra fixa o texto sai primeiro: contador e botão têm prioridade */ .barra-fixa__info{ display:none; } .barra-fixa__inner{ gap:20px; } .modal__grid{ grid-template-columns:1fr; } .modal__lado{ padding:40px 32px 36px; } .passos{ grid-template-columns:1fr; } .numeros{ gap:16px; } } @media (max-width:680px){ :root{ --sec-y:72px; --gutter:20px; } body{ font-size:16px; } .secao__cabecalho{ margin-bottom:44px; } .aprender__grid,.grid-3,.grid-4,.comparativo,.numeros{ grid-template-columns:1fr; } .comparativo{ gap:16px; } .campo--duplo{ grid-template-columns:1fr; } .contador{ width:100%; gap:10px; } .contador__bloco{ flex:1; min-width:0; padding:14px 4px; } .contador__num{ font-size:27px; } .contador__rot{ font-size:9px; letter-spacing:.1em; } .hero__visual{ margin-block:44px 48px; } .flutuante--1{ top:-42px; left:-6px; padding:12px 15px; } .flutuante--2{ bottom:-42px; right:-4px; padding:12px 15px; } .flutuante strong{ font-size:17px; } .painel{ padding:26px 22px; } /* a pílula de data fica em uma única linha: tudo encolhe junto com a tela */ .hero__data{ width:100%; justify-content:center; flex-wrap:nowrap; white-space:nowrap; gap:9px; padding:12px 15px 12px 13px; font-size:clamp(11px, 3.5vw, 15px); } .hero__data svg{ width:clamp(13px, 4vw, 19px); height:clamp(13px, 4vw, 19px); } .hero__data-sep{ height:14px; } .hero__data-tag{ font-size:clamp(7.5px, 2.4vw, 11.5px); letter-spacing:.05em; } /* Os rótulos são longos ("Participar do workshop gratuito") e quebravam em duas linhas. Corpo e respiro passam a acompanhar a largura da tela, e o rótulo nunca quebra. */ .btn{ width:100%; gap:10px; padding:16px clamp(16px, 5vw, 34px); font-size:clamp(12.5px, 3.5vw, 15.5px); } .btn--grande{ padding:clamp(17px, 4.6vw, 22px) clamp(16px, 5vw, 44px); font-size:clamp(12.5px, 3.6vw, 17px); } .btn--pequeno{ width:auto; padding:13px 24px; font-size:14px; } .btn__rotulo{ white-space:nowrap; } .hero__acoes,.pagina-central__acoes{ width:100%; } .rodape__base{ flex-direction:column; text-align:center; gap:24px; } .rodape__direita{ flex-direction:column; justify-content:center; gap:14px; } .rodape__sep{ display:none; } .modal{ padding:0; } .modal__caixa{ max-height:100vh; border-radius:0; width:100%; } .modal__form{ padding:34px 24px 40px; } .pergunta-destaque{ padding:20px 22px; font-size:16px; } .ao-topo{ right:16px; bottom:16px; width:48px; height:48px; } /* barra fixa compacta: os rótulos viram as letras d/h/m/s */ .barra-fixa{ padding:10px 0; } .barra-fixa__inner{ gap:12px; } /* width:auto anula o .contador{width:100%} da faixa da seção, que também alcança este contador e engoliria a largura do botão */ .barra-fixa .contador{ gap:9px; margin-inline:0; width:auto; flex:none; } .barra-fixa .contador__bloco{ min-width:0; padding:0; background:none; border:0; border-radius:0; display:flex; align-items:baseline; gap:1px; flex:none; } .barra-fixa .contador__num{ font-size:17px; } .barra-fixa .contador__rot{ display:none; } .barra-fixa .contador__bloco::after{ content:attr(data-unidade); font-size:11px; font-weight:700; color:rgba(255,255,255,.55); } .barra-fixa .btn{ flex:1; padding:12px 14px; font-size:13.5px; } .barra-fixa .btn__seta{ display:none; } .ao-topo.is-acima-da-barra{ bottom:calc(var(--barra-h, 66px) + 14px); } } /* ============= 20. ACESSIBILIDADE / MOTION / IMPRESSÃO =============== */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } .reveal{ opacity:1!important; transform:none!important; } .traco{ stroke-dashoffset:0!important; } .barra-svg{ transform:none!important; } .sublinha::after{ transform:scaleX(1)!important; } } @media print{ .header,.ao-topo,.barra-fixa,.modal,.progresso-leitura,.faixa,.orbe{ display:none!important; } body{ color:#000; background:#fff; } .secao--roxa,.hero,.cta-final,.rodape{ background:#fff!important; color:#000!important; } }