/* ========================================================================== Método Exclusivo MVC — landing page estática Tokens replicados dos mockups em docs/mockups/. Tema claro é o padrão; o tema escuro é aplicado por [data-tema="escuro"] no elemento . ========================================================================== */ :root { --bg: #faf8f3; --bg-alt: #f1ede4; --bg-footer: #efebe0; --card: #ffffff; --border: #d8d2c2; --border-subtle: #e7e1d3; --heading: #1f2a44; --text: #3e4763; --muted: #616a82; --faint: #616a82; --faintest: #616a82; --accent: #a87900; --accent-texto: #896300; --accent-border: rgba(168, 121, 0, 0.5); --header-bg: rgba(250, 248, 243, 0.92); --sombra-midia: 0 12px 32px rgba(31, 42, 68, 0.14); --sombra-flutuante: 0 6px 20px rgba(31, 42, 68, 0.12); /* --accent é o dourado da marca, usado em títulos grandes, preço e ícones. --accent-texto é a versão legível para texto pequeno: no tema claro o dourado original rende 3,66:1, abaixo do mínimo AA de 4,5:1. Os cinzas também foram escurecidos pelo mesmo motivo; a hierarquia do rodapé passou a vir de tamanho e peso, não de cinzas ilegíveis. */ /* Botão de compra: cores fixas da marca nos dois temas. */ --cta-bg: #f5b31e; --cta-bg-hover: #ffc94a; --cta-text: #10182b; --fonte-titulo: "Bebas Neue", "Barlow", Impact, sans-serif; --fonte-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --largura-ampla: 1040px; --medida-texto: 62ch; --medida-lista: 760px; --raio: 16px; --raio-botao: 12px; --transicao: 0.2s ease; /* Curva de saída da página: rápida no começo, assentando devagar. Usada na revelação por scroll, no acordeão do FAQ e na troca do ícone de tema. */ --ease-saida: cubic-bezier(0.22, 1, 0.36, 1); /* Permite transicionar `height: auto` — habilita o acordeão do FAQ. Ignorado por navegadores sem suporte, que voltam ao salto de hoje. */ interpolate-size: allow-keywords; color-scheme: light; } :root[data-tema="escuro"] { --bg: #10182b; --bg-alt: #131c33; --bg-footer: #0c1322; --card: #1a2440; --border: #2a3760; --border-subtle: #232f52; --heading: #ffffff; --text: #c4ccde; --muted: #8e99b5; --faint: #868fa8; --faintest: #868fa8; --accent: #f5b31e; --accent-texto: #f5b31e; --accent-border: rgba(245, 179, 30, 0.5); --header-bg: rgba(16, 24, 43, 0.92); --sombra-midia: 0 20px 50px rgba(0, 0, 0, 0.3); --sombra-flutuante: 0 6px 20px rgba(0, 0, 0, 0.38); color-scheme: dark; } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--fonte-texto); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* height: auto é obrigatório junto dos atributos width/height do HTML. Sem ele, a largura fluida combina com a altura fixa do atributo e a imagem estica. Os atributos ficam para reservar espaço e evitar CLS. */ img { max-width: 100%; height: auto; } picture { display: block; } a { color: var(--accent-texto); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .pular-para-conteudo { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cta-bg); color: var(--cta-text); font: 700 15px var(--fonte-texto); padding: 12px 20px; border-radius: 0 0 var(--raio-botao) 0; text-decoration: none; } .pular-para-conteudo:focus { left: 0; } main:focus { outline: none; } .container { max-width: var(--largura-ampla); margin: 0 auto; padding-left: 24px; padding-right: 24px; } .container--media > .kicker, .container--media > .titulo, .container--media > .texto, .container--media > .nota, .container--estreita > .titulo { max-width: var(--medida-texto); } .container--estreita > .faq__lista { max-width: 720px; } .secao { padding-top: 96px; padding-bottom: 104px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .secao--sem-topo { padding-top: 0; } /* A seção de inscrição é o destino da página: recebe mais ar que as demais. */ .secao--ar { padding-top: 112px; padding-bottom: 120px; } .secao--compacta { padding-top: 88px; padding-bottom: 96px; } .secao--borda { border-top: 1px solid var(--border-subtle); } .secao--destaque { background: var(--bg-alt); } /* ---------------------------------------------------------- tipografia --- */ /* Títulos distribuem as linhas de forma equilibrada; textos corridos evitam deixar uma palavra sozinha na última linha. Progressivo: navegadores sem suporte simplesmente quebram como antes. */ .titulo, .titulo-hero, .instrutor__nome, .cartao-turma__data, .turmas__cabecalho .texto { text-wrap: balance; } .texto, .nota, .hero__subtitulo, .hero__datas, .instrutor__bio, .faq__resposta, .turmas__rodape, .rodape__texto { text-wrap: pretty; } .kicker { margin: 0 0 10px; font: 600 13px var(--fonte-texto); letter-spacing: 2.5px; color: var(--muted); text-transform: uppercase; } .titulo { margin: 0 0 20px; font: 400 clamp(38px, 5vw, 48px) / 1 var(--fonte-titulo); color: var(--heading); letter-spacing: 0.5px; } .titulo--grande { font-size: clamp(40px, 5vw, 52px); } .destaque { color: var(--accent); } .texto { margin: 0 0 40px; font: 400 17px / 1.7 var(--fonte-texto); color: var(--text); } .nota { margin: 40px 0 0; font: 400 14px / 1.6 var(--fonte-texto); color: var(--muted); } /* ------------------------------------------------------------- botões --- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 16px var(--fonte-texto); text-decoration: none; border-radius: var(--raio-botao); padding: 16px 30px; min-height: 52px; transition: background var(--transicao), color var(--transicao), transform var(--transicao); } .botao--primario { background: var(--cta-bg); color: var(--cta-text); } .botao--primario:hover { background: var(--cta-bg-hover); color: var(--cta-text); transform: translateY(-2px); } .botao--primario:active { transform: scale(0.98); } .botao--contorno { background: transparent; border: 1.5px solid var(--accent); color: var(--accent-texto); font-size: 15px; padding: 13px 22px; min-height: 48px; } .botao--contorno:hover { background: var(--accent); color: var(--bg); } /* Mesma escala do .botao--primario: o toque precisa ser reconhecido antes de o navegador sair para o Maps, o que pode demorar no 4G. */ .botao--contorno:active { transform: scale(0.98); } .botao--bloco { display: flex; width: 100%; } .link-suporte { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px var(--fonte-texto); color: var(--muted); text-decoration: underline; padding: 12px 0; transition: color var(--transicao); } .link-suporte:hover { color: var(--heading); } /* ---------------------------------------------------------- cabeçalho --- */ .cabecalho { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); } .cabecalho__interno { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; } /* O logo troca com o tema. Arte clara (…-tema-escuro) sobre fundo escuro, arte escura (…-tema-claro) sobre fundo claro. Só a versão em uso é baixada. */ /* 40px é o limite antes de o logo passar a definir a altura do cabeçalho — hoje quem a define é o botão de tema, de 44px. Passar disso empurra o header inteiro. Os derivados têm 102px de altura, então 40px ainda é 2,5x. */ .logo { display: block; height: 40px; aspect-ratio: 166 / 102; background-repeat: no-repeat; background-position: left center; background-size: contain; background-image: url("../img/logo-tema-claro-102.png"); background-image: -webkit-image-set(url("../img/logo-tema-claro-102.webp") type("image/webp"), url("../img/logo-tema-claro-102.png") type("image/png")); background-image: image-set(url("../img/logo-tema-claro-102.webp") type("image/webp"), url("../img/logo-tema-claro-102.png") type("image/png")); } :root[data-tema="escuro"] .logo { aspect-ratio: 164 / 102; background-image: url("../img/logo-tema-escuro-102.png"); background-image: -webkit-image-set(url("../img/logo-tema-escuro-102.webp") type("image/webp"), url("../img/logo-tema-escuro-102.png") type("image/png")); background-image: image-set(url("../img/logo-tema-escuro-102.webp") type("image/webp"), url("../img/logo-tema-escuro-102.png") type("image/png")); } .cabecalho__acoes { display: flex; align-items: center; gap: 10px; } .botao-tema { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--heading); cursor: pointer; padding: 0; /* Grade de uma célula: os dois ícones ocupam o mesmo lugar e trocam por opacidade, em vez de aparecer e sumir por display. */ display: grid; place-items: center; transition: border-color var(--transicao), transform 160ms ease-out; } .botao-tema:hover { border-color: var(--accent-border); } .botao-tema:active { transform: scale(0.96); } .botao-tema .icone-sol, .botao-tema .icone-lua { grid-area: 1 / 1; display: block; transition: opacity 0.2s ease, transform 0.2s var(--ease-saida); } /* Tema claro mostra a lua (o que a troca vai trazer); o sol espera girado. */ .botao-tema .icone-sol { opacity: 0; transform: rotate(-60deg) scale(0.6); } :root[data-tema="escuro"] .botao-tema .icone-sol { opacity: 1; transform: none; } :root[data-tema="escuro"] .botao-tema .icone-lua { opacity: 0; transform: rotate(60deg) scale(0.6); } .botao--cabecalho { font-size: 14px; padding: 10px 18px; min-height: 40px; border-radius: 8px; white-space: nowrap; } /* --------------------------------------------------------------- hero --- */ .hero { background: radial-gradient(ellipse 900px 500px at 70% -10%, rgba(245, 179, 30, 0.08), transparent); } .hero__grade { padding-top: 96px; padding-bottom: 104px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); column-gap: 64px; align-items: center; } .hero__intro { grid-column: 1; grid-row: 1; align-self: end; } .hero__oferta { grid-column: 1; grid-row: 2; align-self: start; } .hero__midia { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; } .hero__midia img { width: 100%; border-radius: var(--raio); display: block; box-shadow: var(--sombra-midia); } .hero .kicker { margin-bottom: 20px; } .titulo-hero { margin: 0 0 18px; font: 400 clamp(56px, 8vw, 84px) / 0.95 var(--fonte-titulo); color: var(--heading); letter-spacing: 0.5px; } .hero__subtitulo { margin: 0 0 14px; font: 500 clamp(16px, 2.5vw, 19px) / 1.55 var(--fonte-texto); color: var(--text); max-width: 520px; } .hero__autor { margin: 0 0 36px; font: 600 16px var(--fonte-texto); color: var(--accent-texto); } .hero__datas { margin: 0 0 36px; font: 500 15px / 1.7 var(--fonte-texto); color: var(--muted); } .hero__acoes { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } /* ------------------------------------------ caminho (método, 01 → 06) --- */ /* O método é uma sequência, não um inventário: a forma precisa dizer isso. Trilho vertical com marco de início e de fim, medida estreita de propósito. É o contraponto do .programa logo abaixo, que é um conjunto e por isso se espalha na horizontal. Não unifique os dois. */ /* O trilho é dourado, não cinza: --border rende 1,42:1 sobre o fundo claro e some justamente o elemento que sustenta o desenho. --accent-border é a mesma régua usada nas bordas de hover dos cartões e do FAQ. */ .caminho { max-width: 620px; padding-left: 26px; border-left: 1px solid var(--accent-border); } .caminho__marco { position: relative; margin: 0; font: 600 12px var(--fonte-texto); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } /* -30px = -26 do padding, -1 da borda, -3 de metade do ponto: centraliza o ponto exatamente sobre o trilho. */ .caminho__marco::before { content: ""; position: absolute; left: -30px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .caminho__passos { display: grid; gap: 18px; margin: 22px 0; padding: 0; list-style: none; } .caminho__passos li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: baseline; } .caminho__numero { font: 400 20px var(--fonte-titulo); color: var(--accent); letter-spacing: 1px; } .caminho__rotulo { font: 500 16px / 1.5 var(--fonte-texto); color: var(--text); } /* Os seis passos entram em sequência: a numeração 01→06 é a informação, e o escalonamento a expressa. A cauda de 300ms cabe dentro dos 750ms da revelação da seção. Os atrasos vêm de :nth-child porque a CSP proíbe style inline — não há como marcar o índice no HTML. */ .caminho__passos li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease-saida), transform 0.4s var(--ease-saida); } [data-reveal].revelado .caminho__passos li { opacity: 1; transform: none; } .caminho__passos li:nth-child(2) { transition-delay: 60ms; } .caminho__passos li:nth-child(3) { transition-delay: 120ms; } .caminho__passos li:nth-child(4) { transition-delay: 180ms; } .caminho__passos li:nth-child(5) { transition-delay: 240ms; } .caminho__passos li:nth-child(6) { transition-delay: 300ms; } /* Sem JS a seção nunca ganha .revelado: os passos não podem sumir. */ .sem-js .caminho__passos li { opacity: 1; transform: none; } /* ------------------------------------------------------------- modal --- */ /* nativo: foco preso, Esc para fechar e ::backdrop saem de graça. NÃO declare `display` em .modal — o UA usa `display: none` para manter o diálogo fechado, e uma regra de autor aqui o deixaria visível sempre. */ .modal { width: min(560px, calc(100vw - 40px)); max-height: min(78vh, 700px); padding: 0; border: 1px solid var(--border); border-radius: var(--raio); background: var(--card); color: var(--text); box-shadow: var(--sombra-midia); /* A transição só roda onde há `allow-discrete`; nos demais navegadores o diálogo simplesmente aparece, que é a degradação certa. */ opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s var(--ease-saida), overlay 0.2s allow-discrete, display 0.2s allow-discrete; } .modal[open] { display: flex; flex-direction: column; opacity: 1; transform: none; } @starting-style { .modal[open] { opacity: 0; transform: translateY(8px) scale(0.98); } } /* ::backdrop não herda as variáveis do documento de forma confiável, então as cores aqui são literais. */ .modal::backdrop { background: rgba(16, 24, 43, 0.55); } /* Trava a rolagem da página atrás do diálogo, sem JS. */ body:has(.modal[open]) { overflow: hidden; } /* Sem JS o nunca abre — mas o link ainda muda o :target, então o conteúdo aparece no fim da página em vez de ficar inalcançável. A política é exigida antes do checkout; não pode depender de JavaScript. */ .sem-js .modal:target { display: block; position: static; max-height: none; margin: 0 auto 56px; opacity: 1; transform: none; } .modal__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 26px 0; } .modal__titulo { margin: 0; font: 400 30px / 1.1 var(--fonte-titulo); color: var(--heading); letter-spacing: 0.5px; } .modal__fechar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px 0 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: background var(--transicao), color var(--transicao); } .modal__fechar:hover { background: var(--bg-alt); color: var(--heading); } /* A rolagem é do corpo, não do diálogo: o cabeçalho fica sempre visível. */ .modal__corpo { overflow-y: auto; padding: 20px 26px 26px; } .modal__intro { margin: 0 0 22px; font: 400 14px / 1.6 var(--fonte-texto); color: var(--muted); } /* --------------------------------- política de cancelamento (dl) --- */ /* Pares termo/definição:
é o elemento certo e dá ao leitor de tela a relação entre a regra e o texto dela. */ .politica { display: grid; gap: 22px; margin: 0; } .politica__termo { margin: 0 0 6px; font: 600 15px var(--fonte-texto); color: var(--heading); } .politica__texto { margin: 0; font: 400 15px / 1.7 var(--fonte-texto); color: var(--text); text-wrap: pretty; } /* --------------------------------------- programa (conteúdo do dia) --- */ /* Um conjunto, não uma sequência — e um conjunto com dois grupos: quatro serviços de cadeira e duas competências de atendimento. O ícone marca o grupo; repeti-lo em cada item, como era antes, não carregava informação nenhuma e só fazia ruído. */ .programa { display: grid; gap: 34px; max-width: var(--medida-lista); } .programa__titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 12px var(--fonte-texto); letter-spacing: 2px; text-transform: uppercase; color: var(--heading); } /* A régua fecha a linha do rótulo e delimita o grupo sem precisar de caixa. */ .programa__titulo::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); } .programa__icone { flex: none; color: var(--accent); } .programa__itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 40px; margin: 0; padding: 0; list-style: none; } .programa__itens li { position: relative; padding-left: 20px; font: 500 16px / 1.5 var(--fonte-texto); color: var(--text); } .programa__itens li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--accent); } /* ---------------------------------------------------------- instrutor --- */ .instrutor { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 520px); column-gap: 64px; align-items: center; } .instrutor__foto { grid-column: 1; grid-row: 1 / span 2; margin: 0; } .instrutor__foto img { width: 100%; border-radius: var(--raio); display: block; } .instrutor__cabecalho { grid-column: 2; grid-row: 1; align-self: end; } .instrutor__bio { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font: 400 17px / 1.7 var(--fonte-texto); color: var(--text); } .instrutor__nome { margin: 0 0 6px; font: 400 clamp(40px, 5vw, 52px) / 1 var(--fonte-titulo); color: var(--heading); letter-spacing: 0.5px; } .instrutor__marca { margin: 0 0 22px; font: 700 17px var(--fonte-texto); color: var(--accent-texto); } /* ------------------------------------------------------------- turmas --- */ .turmas__cabecalho { text-align: center; margin-bottom: 48px; } .turmas__cabecalho .texto { margin: 0 auto; font-size: 16px; line-height: 1.6; max-width: 480px; } .turmas__cartoes { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 32px; } .cartao-turma { flex: 1 1 300px; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: var(--raio); padding: 36px 30px; text-align: center; transition: transform 0.25s ease, border-color 0.25s ease; } .cartao-turma:hover { transform: translateY(-4px); border-color: var(--accent-border); } .cartao-turma__rotulo { margin: 0 0 6px; font: 600 12px var(--fonte-texto); letter-spacing: 2px; color: var(--muted); } .cartao-turma__data { margin: 0 0 4px; font: 400 38px var(--fonte-titulo); color: var(--heading); letter-spacing: 0.5px; } .cartao-turma__horario { margin: 0 0 26px; font: 500 15px var(--fonte-texto); color: var(--muted); } .cartao-turma__preco { margin: 0 0 4px; font: 400 42px var(--fonte-titulo); color: var(--accent); letter-spacing: 0.5px; } .cartao-turma__condicoes { margin: 0 0 26px; font: 500 14px var(--fonte-texto); color: var(--text); } .turmas__rodape { margin: 0 auto; text-align: center; font: 400 14px / 1.6 var(--fonte-texto); color: var(--muted); max-width: 560px; } /* ---------------------------------------------------------- localização --- */ .local { display: grid; grid-template-columns: minmax(0, 460px) minmax(280px, 400px); column-gap: 64px; justify-content: space-between; align-items: center; } .local__cabecalho { grid-column: 1; grid-row: 1; align-self: end; } .local__detalhes { grid-column: 1; grid-row: 2; align-self: start; } .local__foto { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .local__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--raio); display: block; } .local__endereco { margin: 0 0 4px; font: 500 17px / 1.6 var(--fonte-texto); color: var(--text); } .local__endereco--ultimo { margin-bottom: 28px; } /* ----------------------------------------------------------------- faq --- */ .faq__lista { display: flex; flex-direction: column; gap: 10px; } .faq__item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0 20px; transition: border-color var(--transicao); } .faq__item:hover { border-color: var(--accent-border); } .faq__pergunta { cursor: pointer; font: 600 16px var(--fonte-texto); color: var(--heading); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; } .faq__pergunta::-webkit-details-marker { display: none; } .faq__seta { flex-shrink: 0; stroke: var(--muted); transition: transform 0.24s var(--ease-saida); } .faq__item[open] .faq__seta { transform: rotate(180deg); } /* A resposta abre em altura em vez de teleportar e empurrar a lista, que fazia o leitor reencontrar onde estava. Progressive enhancement: onde ::details-content não existe, a regra inteira é ignorada e o comportamento volta a ser o salto de hoje. */ .faq__item::details-content { height: 0; overflow: hidden; opacity: 0; transition: height 0.24s var(--ease-saida), opacity 0.18s ease-out 0.06s, content-visibility 0.24s allow-discrete; } .faq__item[open]::details-content { height: auto; opacity: 1; } .faq__resposta { margin: 0; padding: 0 0 16px; font: 400 15px / 1.6 var(--fonte-texto); color: var(--text); } .faq__link { color: var(--accent-texto); text-underline-offset: 3px; transition: color var(--transicao); } .faq__link:hover { color: var(--heading); } /* -------------------------------------------------------------- rodapé --- */ .rodape { border-top: 1px solid var(--border-subtle); background: var(--bg-footer); } /* Marca à esquerda, ações à direita. O aviso legal desce para .rodape__base, abaixo de uma régua — dividir a mesma linha com os links fazia os dois competirem e nenhum ler bem. */ .rodape__interno { padding-top: 44px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; align-items: flex-start; } .rodape__marca { display: grid; gap: 14px; justify-items: start; } .rodape__texto { margin: 0; font: 400 13px / 1.5 var(--fonte-texto); color: var(--faint); max-width: 340px; } /* Identificação legal de quem vende. Fica menor que a linha da marca, mas com a mesma cor: é dado obrigatório, não letra miúda escondida. */ .rodape__cnpj { margin: -6px 0 0; font: 400 12px / 1.5 var(--fonte-texto); color: var(--faint); } .rodape__email { margin: -8px 0 0; font: 400 12px / 1.5 var(--fonte-texto); color: var(--faint); text-underline-offset: 3px; transition: color var(--transicao); } .rodape__email:hover { color: var(--accent); } .rodape__acoes { display: grid; gap: 18px; justify-items: end; } .rodape__navegacao { display: flex; flex-wrap: wrap; gap: 8px 28px; } .rodape__link { font: 500 14px var(--fonte-texto); color: var(--text); text-decoration: none; padding: 8px 0; transition: color var(--transicao); } .rodape__link:hover { color: var(--accent); } /* A margem negativa alinha o *desenho* do ícone à borda do rodapé, não a caixa de toque de 44px — senão o bloco pareceria recuado. */ .rodape__sociais { display: flex; gap: 4px; margin-right: -12px; } /* 44px de alvo (PDR §19) com ícone de 20px: a área de toque é maior que o desenho, e é isso que importa no polegar. */ .rodape__social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--faint); transition: color var(--transicao); } .rodape__social:hover { color: var(--accent); } /* Régua separando o aviso legal do resto. */ .rodape__base { padding-top: 20px; padding-bottom: max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); } .rodape__copy { margin: 0; font: 400 12px var(--fonte-texto); color: var(--faintest); } /* ------------------------------------------------ suporte flutuante --- */ /* Canal de dúvida sempre disponível: o botão é permanente, sem estado e sem JS. A subordinação ao CTA de compra (PDR §10.5) vem da forma, não da ausência — 52px em cores neutras do sistema contra um botão dourado de largura total. Nada de --cta-bg, nada de verde saturado. */ .wa-flutuante { position: fixed; z-index: 40; /* abaixo do cabeçalho sticky (50) e do skip-link (100) */ right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; min-width: 52px; height: 52px; padding: 0 13px; border: 1px solid var(--border); border-radius: 26px; background: var(--card); box-shadow: var(--sombra-flutuante); color: var(--muted); text-decoration: none; transition: border-color var(--transicao), color var(--transicao), transform 0.12s ease-out; } .wa-flutuante:active { transform: scale(0.96); } .wa-flutuante__icone { flex: none; } .wa-flutuante__rotulo { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 500 14px var(--fonte-texto); transition: max-width 0.28s ease, opacity 0.18s ease, margin-right 0.28s ease; } /* A pill só existe onde há ponteiro. No mobile o botão é sempre círculo. */ @media (min-width: 768px) { /* Mesmo tratamento do .link-suporte da hero: mantém a leitura de suporte, não de CTA. */ .wa-flutuante:hover, .wa-flutuante:focus-visible { border-color: var(--accent-border); color: var(--heading); } .wa-flutuante:hover .wa-flutuante__rotulo, .wa-flutuante:focus-visible .wa-flutuante__rotulo { max-width: 160px; /* "Tirar uma dúvida" mede ~118px em Barlow 500/14 */ opacity: 1; margin-right: 9px; } } /* ------------------------------------------------------------ revelação --- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.75s var(--ease-saida), transform 0.75s var(--ease-saida); } [data-reveal].revelado { opacity: 1; transform: none; } /* Sem JS: nada pode ficar invisível. */ .sem-js [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } .botao, .cartao-turma { transition: none; } .botao--primario:hover, .cartao-turma:hover { transform: none; } /* A pill continua expandindo, apenas sem animação: desligá-la puniria quem pediu menos movimento com menos informação. */ .wa-flutuante__rotulo { transition: none; } /* Política daqui para baixo: transições de opacidade ficam (não disparam resposta vestibular), transições de transform e de tamanho saem. O scale de :active sobrevive de propósito — é confirmação de toque, não enfeite, e some junto com a percepção de que o clique registrou. */ .caminho__passos li { transform: none; transition: opacity 0.2s ease; } /* Mesma especificidade das regras de atraso, e depois delas no arquivo. */ .caminho__passos li:nth-child(n) { transition-delay: 0s; } .faq__item::details-content { height: auto; transition: opacity 0.12s ease; } .faq__seta { transition: none; } .botao-tema .icone-sol, .botao-tema .icone-lua { transform: none; transition: opacity 0.2s ease; } .modal { transform: none; transition: opacity 0.15s ease, overlay 0.15s allow-discrete, display 0.15s allow-discrete; } @starting-style { .modal[open] { transform: none; } } } /* ------------------------------------------------------------- mobile --- */ @media (max-width: 767px) { .container { max-width: 480px; padding-left: 20px; padding-right: 20px; } .secao { padding-top: 64px; padding-bottom: 72px; } .secao--ar { padding-top: 76px; padding-bottom: 84px; } .secao--compacta { padding-top: 56px; padding-bottom: 64px; } .kicker { margin-bottom: 8px; font-size: clamp(11px, 3vw, 13px); letter-spacing: 2px; } .titulo { margin-bottom: 14px; } .texto { margin-bottom: 28px; font-size: 16px; } .nota { margin-top: 28px; font-size: 13px; } .botao--cabecalho { display: none; } .hero__grade { padding-top: 56px; padding-bottom: 64px; grid-template-columns: minmax(0, 1fr); row-gap: 18px; } .hero__intro, .hero__oferta, .hero__midia { grid-column: 1; grid-row: auto; align-self: auto; } .hero .kicker { margin-bottom: 18px; } .titulo-hero { margin-bottom: 18px; } .hero__midia img { border-radius: 14px; } .hero__autor { margin-bottom: 0; font-size: 15px; } .hero__datas { margin: 0 0 18px; font-size: 14px; } .hero__acoes { flex-direction: column; align-items: stretch; gap: 8px; } .hero__acoes .botao, .hero__acoes .link-suporte { width: 100%; justify-content: center; text-align: center; } .caminho { padding-left: 20px; } /* Acompanha o padding acima: -20 -1 da borda -3 de metade do ponto. */ .caminho__marco::before { left: -24px; } .caminho__passos { gap: 16px; margin: 20px 0; } .caminho__passos li { grid-template-columns: 34px minmax(0, 1fr); } .programa { gap: 28px; } .programa__itens { grid-template-columns: minmax(0, 1fr); gap: 10px; } .caminho__rotulo, .programa__itens li { font-size: 15px; } .modal { width: calc(100vw - 24px); max-height: 86vh; } .modal__cabecalho { padding: 22px 20px 0; } .modal__titulo { font-size: 26px; } .modal__corpo { padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); } .instrutor, .local { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .instrutor__foto, .instrutor__cabecalho, .instrutor__bio, .local__cabecalho, .local__detalhes, .local__foto { grid-column: 1; grid-row: auto; align-self: auto; } .instrutor__foto img, .local__foto img { border-radius: 14px; } .instrutor__marca { margin-bottom: 0; } .instrutor__bio { font-size: 16px; } .turmas__cabecalho { margin-bottom: 32px; } .turmas__cartoes { flex-direction: column; gap: 16px; margin-bottom: 20px; } .cartao-turma { max-width: none; padding: 30px 24px; } .cartao-turma:hover { transform: none; } .cartao-turma__data { font-size: 34px; } .cartao-turma__horario { margin-bottom: 18px; font-size: 14px; } .cartao-turma__preco { font-size: 40px; } .cartao-turma__condicoes { margin-bottom: 20px; font-size: 13px; } .turmas__rodape { font-size: 13px; } .local__endereco { font-size: 16px; } .local__endereco--ultimo { margin-bottom: 22px; } .local .botao--contorno { width: 100%; } .faq__item { padding: 0 16px; } .faq__pergunta { font-size: 15px; padding: 15px 0; } .faq__resposta { padding-bottom: 15px; font-size: 14px; } .rodape__interno { flex-direction: column; align-items: flex-start; gap: 26px; padding-top: 36px; padding-bottom: 26px; } /* Tudo encosta no eixo esquerdo; a compensação do ícone troca de lado. */ .rodape__acoes { justify-items: start; } .rodape__sociais { margin-right: 0; margin-left: -12px; } .rodape__base { padding-top: 18px; padding-bottom: max(26px, env(safe-area-inset-bottom)); } .logo { height: 38px; } }