/* ========================================================================== CEAPE-BA — folha de estilo única Tokens conforme specs/design.md · organização conforme plano.md § 11 ========================================================================== */ @layer reset, tokens, base, layout, components, sections, utils; /* ═══════════════════════════ RESET ═══════════════════════════ */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; text-wrap: balance; } p { text-wrap: pretty; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } summary::-webkit-details-marker { display: none; } } /* ═══════════════════════════ TOKENS ═══════════════════════════ */ @layer tokens { :root { /* cores-base do símbolo (cores de FORMA, nunca de texto) */ --brand-azul: #47BCF4; --brand-verde: #8DD102; --brand-amarelo: #FEC502; --brand-azul-forte: #0B90E6; --brand-verde-forte: #249A02; /* funcionais */ --institucional: #1B4F9C; /* 7.9:1 sobre branco */ --acao: #1F7A33; /* 5.4:1 sobre branco */ --acao-hover: #186128; --tinta: #101A2E; --tinta-media: #4A5568; /* 7.5:1 */ --tinta-fraca: #667085; /* 4.97:1 — corrigido (era #7A8598, 3.73:1) */ --base: #FFFFFF; --superficie: #F4F5F7; --superficie-2: #EAECF0; --escuro: #0D1626; --linha: #E2E5EA; --linha-forte: #CBD1DA; /* tipografia */ --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-display: clamp(2.25rem, 1.30rem + 4.20vw, 4.25rem); --fs-h2: clamp(1.75rem, 1.28rem + 2.10vw, 3.00rem); --fs-h3: clamp(1.375rem, 1.19rem + 0.83vw, 1.875rem); --fs-h4: clamp(1.125rem, 1.08rem + 0.21vw, 1.25rem); --fs-lead: clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; --fs-stat: clamp(2.5rem, 1.79rem + 3.13vw, 4rem); /* espaçamento */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 120px; --sp-13: 160px; --secao-y: 72px; --cab-gap: 40px; --gap-card: 12px; --pad-card: 24px; --container: 1280px; --pad-lateral: 20px; /* raios e sombras */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --sh-nav: 0 8px 32px rgb(16 26 46 / .12); --sh-card: 0 2px 12px rgb(16 26 46 / .06); /* movimento */ --ease: cubic-bezier(.16, 1, .3, 1); --progresso-pagina: 0; /* 0→1, atualizado por main.js */ } @media (min-width: 768px) { :root { --secao-y: 100px; --pad-lateral: 40px; --gap-card: 16px; } } @media (min-width: 1024px) { :root { --secao-y: 140px; --cab-gap: 64px; --gap-card: 20px; --pad-card: 32px; } } } /* ═══════════════════════════ BASE ═══════════════════════════ */ @layer base { /* ------------------------------------------------------------------------ TIPOGRAFIA — Inter self-hosted (specs/design.md § 3), pesos 400 e 600. O arquivo ainda NÃO está no projeto. Para ativar: 1. baixe a Inter variável (rsms.me/inter) e gere um subset latin+latin-ext 2. salve como assets/fonts/inter-var-subset.woff2 3. descomente o @font-face abaixo e o no Enquanto isso a página usa system-ui — Segoe UI no Windows, Roboto no Android, SF Pro no iOS. Todas grotescas, todas com boa legibilidade em tela pequena. O layout não muda; só o desenho da letra. O @font-face fica comentado de propósito: apontar para um arquivo inexistente geraria 404 em produção. @font-face { font-family: 'Inter'; src: url('../fonts/inter-var-subset.woff2') format('woff2-variations'); font-weight: 400 600; font-style: normal; font-display: swap; } ------------------------------------------------------------------------ */ html { scroll-behavior: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--fonte); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--tinta); background: var(--base); overflow-x: hidden; } h1 { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; } h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; } h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } strong { font-weight: 600; } :focus-visible { outline: 2px solid var(--institucional); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--brand-amarelo); color: var(--tinta); } /* âncoras não ficam sob a nav fixa */ :target, section[id] { scroll-margin-top: 96px; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 999; background: var(--escuro); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: var(--sp-4); } } /* ═══════════════════════════ LAYOUT ═══════════════════════════ */ @layer layout { .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-lateral); } .secao { padding-block: var(--secao-y); } .secao--superficie { background: var(--superficie); } .secao--topo-zero { padding-block-start: 0; } .cabecalho { display: flex; flex-direction: column; gap: var(--sp-6); margin-block-end: var(--cab-gap); } .cabecalho > div { max-width: 46rem; } .cabecalho h2 { margin-block-start: var(--sp-4); } .cabecalho .lead { margin-block-start: var(--sp-4); } @media (min-width: 1024px) { .cabecalho { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--sp-9); } .cabecalho__cta { flex-shrink: 0; } } .centro { display: flex; justify-content: center; margin-block-start: var(--sp-9); } .centro .btn { width: 100%; } @media (min-width: 768px) { .centro .btn { width: auto; } } .prosa { max-width: 34em; } .prosa p { margin-block-start: var(--sp-5); color: var(--tinta-media); font-size: var(--fs-lead); } .prosa h2 { margin-block-start: var(--sp-4); } } /* ═══════════════════════════ COMPONENTES ═══════════════════════════ */ @layer components { /* ---------- eyebrow ---------- */ .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1; color: var(--tinta-fraca); } .lead { font-size: var(--fs-lead); color: var(--tinta-media); line-height: 1.55; max-width: 34em; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); border: 1px solid transparent; font-weight: 600; font-size: var(--fs-body); line-height: 1.2; cursor: pointer; text-align: center; transition: background-color .18s ease-out, border-color .18s ease-out, transform .18s ease-out, color .18s ease-out; } .btn__ico { width: 20px; height: 20px; flex-shrink: 0; } .btn__seta { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; } .btn--primario { background: var(--acao); color: #fff; } .btn--secundario { background: transparent; color: var(--tinta); border-color: var(--linha-forte); } .btn--grande { padding: var(--sp-4) var(--sp-6); min-height: 56px; } .btn--bloco { width: 100%; } /* mobile: botão primário ocupa a largura toda */ .btn--primario, .btn--secundario { width: 100%; } @media (min-width: 768px) { .btn--primario, .btn--secundario { width: auto; } } @media (hover: hover) { .btn--primario:hover { background: var(--acao-hover); transform: translateY(-1px); } .btn--secundario:hover { background: var(--superficie); border-color: var(--tinta-fraca); } } .btn:active { transform: translateY(0); } /* ---------- navegação ---------- */ .nav { position: fixed; inset-block-start: var(--sp-3); inset-inline: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: min(100% - var(--sp-5) * 2, var(--container)); margin-inline: auto; transition: inset-block-start .24s ease-out; } .nav.is-rolada { inset-block-start: var(--sp-2); } .nav__pill { display: flex; align-items: center; gap: var(--sp-6); background: var(--escuro); color: #fff; border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-5); box-shadow: 0 4px 16px rgb(16 26 46 / .10); min-height: 48px; transition: box-shadow .24s ease-out; } .nav.is-rolada .nav__pill { box-shadow: var(--sh-nav); } .nav__marca { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; } .nav__simbolo { width: 26px; height: 26px; } .nav__nome { font-weight: 600; letter-spacing: -.02em; font-size: 1.0625rem; } .nav__sub { font-weight: 400; opacity: .6; margin-inline-start: .35em; font-size: .875rem; } .nav__links { display: none; gap: var(--sp-5); font-size: .9375rem; } .nav__links a { display: flex; align-items: center; min-height: 48px; color: rgb(255 255 255 / .72); } .nav__cta { display: none; box-shadow: var(--sh-nav); } @media (hover: hover) { .nav__links a:hover { color: #fff; } } .nav__burger { display: grid; place-content: center; gap: 5px; width: 48px; height: 48px; flex-shrink: 0; background: var(--escuro); border: 0; border-radius: var(--r-pill); box-shadow: var(--sh-nav); cursor: pointer; } .nav__burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .24s var(--ease), opacity .24s var(--ease); } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } @media (min-width: 1024px) { .nav { justify-content: center; gap: var(--sp-3); } .nav__links { display: flex; } .nav__cta { display: inline-flex; } .nav__burger { display: none; } } /* drawer mobile */ .drawer { position: fixed; inset: 0; z-index: 99; background: var(--base); padding: 104px var(--pad-lateral) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-8); overflow-y: auto; } .drawer[hidden] { display: none; } .drawer__links { display: flex; flex-direction: column; } .drawer__links a { padding-block: var(--sp-5); border-block-end: 1px solid var(--linha); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; } /* ---------- cards ---------- */ .cards { display: grid; gap: var(--gap-card); } @media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8); min-height: 260px; padding: var(--pad-card); background: var(--superficie); border-radius: var(--r-md); border: 1px solid transparent; transition: background-color .3s ease-out; } .card--destaque { background: var(--escuro); color: #fff; } .card--destaque p { color: rgb(255 255 255 / .62); } .card--contorno { background: var(--base); border-color: var(--linha); } .card__pe h3 { margin-block-end: var(--sp-3); } .card__pe p { color: var(--tinta-media); font-size: var(--fs-body); } /* precisa vir DEPOIS de .card__pe p — mesma especificidade, ordem decide. Sem isto o texto fica cinza-escuro sobre fundo quase-preto (2.41:1). */ .card--destaque .card__pe p { color: rgb(255 255 255 / .72); } .card__ico { width: 40px; height: 40px; color: var(--institucional); } .card--destaque .card__ico { color: #fff; } .card__valor { display: inline-block; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .card--destaque .card__valor { color: var(--brand-amarelo); } .cards--perfis .card { min-height: 200px; gap: var(--sp-7); } /* condições só são tratadas no WhatsApp — decisão do cliente (17/08/2026) */ .nota-condicoes { margin-block-start: var(--sp-6); max-width: 46em; font-size: var(--fs-small); color: var(--tinta-fraca); padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--linha-forte); } /* ---------- estatísticas ---------- */ .stats { display: grid; gap: var(--sp-8); } @media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } } .stat { display: flex; flex-direction: column; gap: var(--sp-3); } .stat__num { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--institucional); font-variant-numeric: tabular-nums; } .stat__rot { font-size: var(--fs-small); color: var(--tinta-media); max-width: 22em; } /* ---------- parceiros ---------- */ /* flex em vez de grid: a última linha se estica para preencher, então acrescentar ou remover um parceiro nunca deixa buraco no layout */ /* flex com base calculada: N por linha, e a última linha fica centralizada. Acrescentar ou remover um parceiro nunca deixa buraco nem card esticado. */ .parceiros { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-card); --por-linha: 2; } .parceiros li { flex: 0 1 calc((100% - (var(--por-linha) - 1) * var(--gap-card)) / var(--por-linha)); display: grid; place-content: center; min-height: 104px; padding: var(--sp-5) var(--sp-4); background: var(--superficie); border-radius: var(--r-md); font-weight: 600; letter-spacing: -.01em; color: var(--tinta-media); text-align: center; font-size: var(--fs-body); } @media (min-width: 640px) { .parceiros { --por-linha: 3; } } @media (min-width: 1024px) { .parceiros { --por-linha: 4; } .parceiros li { min-height: 124px; } } /* ---------- passos ---------- */ .passos { display: grid; gap: var(--sp-8); counter-reset: p; } @media (min-width: 768px) { .passos { grid-template-columns: repeat(2, 1fr); gap: var(--sp-9); } } @media (min-width: 1024px) { .passos { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } } .passo { position: relative; padding-block-start: var(--sp-6); } .passo::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--linha-forte); } .passo__n { display: grid; place-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--institucional); color: #fff; font-weight: 600; font-size: 1.0625rem; margin-block-end: var(--sp-5); font-variant-numeric: tabular-nums; } .passo h3 { margin-block-end: var(--sp-3); } .passo p { color: var(--tinta-media); } .passo p + p { margin-block-start: var(--sp-3); } /* ---------- FAQ ---------- */ .faq { border-block-start: 1px solid var(--linha); max-width: 52rem; } .faq details { border-block-end: 1px solid var(--linha); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-5); min-height: 48px; cursor: pointer; list-style: none; } .faq summary h3 { font-size: var(--fs-h4); } .faq__ico { display: grid; place-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--linha-forte); color: var(--institucional); transition: transform .28s ease-in-out, background-color .28s ease-in-out; } .faq__ico svg { width: 16px; height: 16px; } .faq details[open] .faq__ico { transform: rotate(135deg); background: var(--superficie); } @media (hover: hover) { .faq summary:hover .faq__ico { background: var(--superficie); } } .faq__corpo { padding-block-end: var(--sp-6); max-width: 46em; } .faq__corpo p { color: var(--tinta-media); } .faq__corpo p + p { margin-block-start: var(--sp-3); } /* animação de abertura sem medir altura */ .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .28s ease-in-out, content-visibility .28s allow-discrete; } .faq details[open]::details-content { block-size: auto; } @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } } /* ---------- botão flutuante ---------- */ .fab { position: fixed; z-index: 90; inset-block-end: calc(var(--sp-5) + env(safe-area-inset-bottom)); inset-inline-end: var(--sp-5); display: grid; place-content: center; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--acao); color: #fff; box-shadow: var(--sh-nav); opacity: 0; visibility: hidden; transform: scale(.8); transition: opacity .24s ease-out, transform .24s var(--ease), visibility .24s; } .fab svg { width: 28px; height: 28px; } .fab.is-visivel { opacity: 1; visibility: visible; transform: scale(1); } @media (min-width: 1024px) { .fab { display: none; } } /* ---------- peça da Bahia ---------- */ /* Movimento único da página: cinza → cor conforme a rolagem (design.md § 9) */ .bahia { filter: grayscale(calc(0.75 * (1 - var(--progresso-pagina)))); transition: filter .12s linear; } } /* ═══════════════════════════ SEÇÕES ═══════════════════════════ */ @layer sections { /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: 128px var(--secao-y); } .hero__grid { position: relative; } .hero__texto { position: relative; z-index: 2; max-width: 40rem; } .hero h1 { margin-block: var(--sp-4) var(--sp-5); } .hero .lead { margin-block-end: var(--sp-8); } .hero__acoes { display: flex; flex-direction: column; gap: var(--sp-3); } .hero__nota { margin-block-start: var(--sp-6); font-size: var(--fs-small); color: var(--tinta-fraca); } /* mobile: peça atrás do texto, discreta */ .hero__peca { position: absolute; inset-block-start: -8%; inset-inline-end: -28%; width: 118%; z-index: 1; opacity: .22; pointer-events: none; } @media (min-width: 768px) { .hero__acoes { flex-direction: row; align-items: center; } } @media (min-width: 1024px) { .hero { padding-block: 168px var(--secao-y); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: var(--sp-9); } .hero__peca { position: relative; inset: auto; width: 100%; opacity: 1; justify-self: end; max-width: 540px; } } /* ---------- respiros full-bleed ---------- */ /* Detalhe macro das esferas: textura de fundo, nunca um bloco de cor. A máscara faz a faixa nascer e morrer no branco das seções vizinhas. */ .respiro { position: relative; overflow: hidden; height: 200px; background: var(--base); } .respiro::before { content: ''; position: absolute; inset: -30%; background-image: url('../marca/bahia.svg'); background-repeat: no-repeat; background-size: 150%; filter: blur(56px) grayscale(calc(0.75 * (1 - var(--progresso-pagina)))); opacity: .34; mask-image: linear-gradient(to bottom, transparent 22%, #000 46%, #000 62%, transparent 84%); } .respiro--a::before { background-position: 12% 40%; } .respiro--b::before { background-position: 78% 58%; background-size: 172%; } .respiro--c::before { background-position: 46% 26%; background-size: 194%; } @media (min-width: 768px) { .respiro { height: 260px; } } @media (min-width: 1024px) { .respiro { height: 320px; } } /* ---------- instituição ---------- */ .inst { display: grid; gap: var(--sp-8); } .inst__prosa p { margin-block-end: var(--sp-5); color: var(--tinta-media); font-size: var(--fs-lead); } .inst__cards { display: grid; gap: var(--gap-card); } @media (min-width: 768px) { .inst__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .inst { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; } .inst__cards { grid-template-columns: 1fr; } } .valores { margin-block-start: var(--sp-10); padding-block-start: var(--sp-8); border-block-start: 1px solid var(--linha); } .valores__t { color: var(--tinta-fraca); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-block-end: var(--sp-5); } .valores__lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .valores__lista li { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--linha); border-radius: var(--r-pill); font-size: var(--fs-small); color: var(--tinta-media); } /* ---------- CTA final ---------- */ .final { position: relative; overflow: hidden; background: var(--escuro); color: #fff; padding-block: var(--secao-y); text-align: center; } .final__peca { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; width: min(760px, 130%); opacity: .16; pointer-events: none; } .final__conteudo { position: relative; z-index: 2; } .final h2 { max-width: 20em; margin-inline: auto; } .final .lead { color: rgb(255 255 255 / .62); margin: var(--sp-5) auto var(--sp-8); } .final .btn--primario { display: inline-flex; } /* ---------- rodapé ---------- */ .rodape { background: var(--escuro); color: rgb(255 255 255 / .62); padding-block: var(--sp-10) var(--sp-6); } .rodape__grid { display: grid; gap: var(--sp-8); } @media (min-width: 640px) { .rodape__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rodape__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-9); } } .rodape h2 { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .45); margin-block-end: var(--sp-4); line-height: 1; } .rodape ul { display: flex; flex-direction: column; } /* alvo de toque de 44px: público majoritariamente mobile (site.md § 11) */ .rodape li a { display: flex; align-items: center; min-height: 44px; } .rodape a { color: rgb(255 255 255 / .78); } @media (hover: hover) { .rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } } .rodape address { font-style: normal; line-height: 1.7; } .rodape__marca img { margin-block-end: var(--sp-4); } /* lockup "CEAPE Microfinanças" em versão clara — o wordmark azul-marinho não lê sobre o fundo escuro (plano.md § 12, R7) */ .rodape__lockup { color: #fff; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1; margin-block-end: var(--sp-4); } .rodape__lockup span { display: block; font-size: var(--fs-body); font-weight: 400; letter-spacing: .04em; color: rgb(255 255 255 / .62); margin-block-start: var(--sp-1); } .rodape__razao { color: rgb(255 255 255 / .78); font-size: var(--fs-small); line-height: 1.5; } .rodape__oscip { font-size: var(--fs-small); margin-block-start: var(--sp-3); } .rodape__cnpj { font-size: var(--fs-small); margin-block-start: var(--sp-1); font-variant-numeric: tabular-nums; } .rodape__fim { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; margin-block-start: var(--sp-10); padding-block-start: var(--sp-5); border-block-start: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-small); } .rodape__fim a { display: flex; align-items: center; min-height: 44px; } } /* ═══════════════════════════ UTILITÁRIOS ═══════════════════════════ */ @layer utils { /* revelação de entrada — só some se o JS estiver ativo */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-reveal].is-visivel { opacity: 1; transform: none; } .u-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* marcador de pendência — deliberadamente feio para impedir publicação */ .pendente { display: block; margin-block-start: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 2px dashed #B54708; border-radius: var(--r-sm); background: #FFFAEB; color: #B54708 !important; font-size: var(--fs-small); font-weight: 600; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; } .pendente-bloco { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-6); } /* movimento reduzido — obrigatório (design.md § 10) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .bahia { filter: none; } .respiro::before { filter: blur(38px); } } }