/** * Componentes — Fenachamp 2027 * * Autoria: [Fosfo virtual] (https://fosfo.com.br) * * ============================================================ * D24 — RITMO VERTICAL DE SEÇÃO (26/08/2026, pedido do Diego) * ============================================================ * Sistema de espaçamento entre seções, pra toda página usar igual. * A base bate com o que foi medido em DOIS lugares reais — o * container "Header" (hero) e "SEÇÃO APOIO", ambos da Garibaldi — os * dois usam padding 5%. O "dobro" (10%) é o que o hero já usa no * rodapé dele (D19) pra separar da próxima seção. * * clamp() garante um mínimo confortável em telas pequenas — 5% de uma * tela de 375px de largura vira só 19px, apertado demais; o clamp * segura um piso mesmo no mobile (Diego pediu: "já prevê" mobile). * * Uso: toda `
` de página usa --ritmo-secao no padding-block * normal, e --ritmo-secao-dobro onde precisa de mais respiro (fim de * seção antes de CTA, ou antes de trocar de bloco de cor de fundo). * Exceções pontuais (uma seção que mede diferente no validado) são * esperadas — documentar a exceção ali mesmo, não aqui. * ============================================================ */ :root { --ritmo-secao: clamp(32px, 5vw, 72px); --ritmo-secao-dobro: clamp(56px, 10vw, 144px); /* ------------------------------------------------------------------ * D72 — RESPIRO LATERAL DO CONTAINER * ------------------------------------------------------------------ * Todo wrapper de conteúdo do site (cabeçalho, rodapé, seções de * página) usava `padding-inline: 5%`. O problema: porcentagem de * padding resolve contra a largura do PAI, que é a tela inteira — * mas o wrapper já está limitado a 1440px. Passando de 1440 de * viewport, o padding continua crescendo e COME o conteúdo: numa * tela de 2560px virava 128px de cada lado, o container interno caía * de 1296 pra 1184px e o H1 do hero quebrava em 5 linhas. * * É a mesma raiz do D34 (menu colidindo): unidade relativa ao * viewport dentro de um elemento que já tem teto fixo. * * O clamp trava no teto de 72px — que é exatamente 5% de 1440, o * valor medido. Abaixo de 1440 nada muda (5vw = os mesmos 5%); * acima, o respiro para de crescer e a largura útil fica estável. * ------------------------------------------------------------------ */ --respiro-container: clamp(16px, 5vw, 72px); } /** * ============================================================ * AS REGRAS DESTE ARQUIVO * ============================================================ * * 1. UM COMPONENTE, UM LUGAR. Botão, card, título de seção, campo de * formulário — cada um existe aqui uma única vez. Página nenhuma * redefine tamanho, hover, raio, cor ou espaçamento. Se duas páginas * mostram o botão diferente, é bug, não decisão. * * 2. NADA ENTRA SEM ORIGEM. Todo valor vem do site validado * (fenachamp-veio). Cada bloco cita o post de onde saiu. * * 3. VARIANTE NOVA PRECISA DO DIEGO. Se uma página pede algo que não * existe aqui, o trabalho PARA e a pergunta vai pra ele. * * 4. SÓ TOKEN, NUNCA LITERAL. Valor literal aqui é erro — * `verifica-css.php` acusa. * * 5. CRESCE POR DEMANDA. Componente especulativo não existe. * * ============================================================ * REGISTRO * ============================================================ * | Componente | Origem | Usado em | * |------------------|----------------------------------------|----------| * | .btn | post 495 "Bt-Normal-Primario" | CTA principal (fundo claro) | * | .btn--secundario | D15 — extraído (Garibaldi + 6 páginas) | ação secundária, mesmo fundo claro | * | .btn--invertido | D12 — variante aprovada (26/08/2026) | fundo vinho/escuro | * | .btn--contorno | D12 — variante aprovada (26/08/2026) | sobre foto (com scrim) | * | .letra-decorativa| post 163 (Garibaldi), widgets "G"/"M" | fundo de qualquer seção | * | .pagina-hero | template-parts/page-header.php | topo de página interna | * | .eyebrow | post 163, heading "SOBRE" (12px) | rótulo pequeno acima de título | * | .titulo-prata | post 163, H1 e "Sobre a cidade" (idênticos) | qualquer título de seção | * | .destaque-titulo | D17 — palavra em destaque dentro de título | dentro de .titulo-prata | * | --ritmo-secao(-dobro) | D24 — medido no Header + SEÇÃO APOIO | padding-block de toda `
` | * ============================================================ */ /* ------------------------------------------------------------------ * BOTÃO PRIMÁRIO * Origem: post 495 "Bt - Normal - Primario" (_elementor_data) * * D12 (26/08/2026) — hover redesenhado. O "grow" original do Elementor * (transform: scale no hover) nunca aparecia de verdade: o JS magnético * já escreve `transform` inline via GSAP, e inline sempre vence sobre * a regra de :hover — as duas brigavam pela mesma propriedade e o CSS * perdia. Correção: GSAP passa a ser o ÚNICO dono de `transform` * (arrasto magnético no hover). O CSS cuida só do que não conflita: * cor e a seta. * * D13 (26/08/2026) — o brilho que seguia o ponteiro foi REMOVIDO a * pedido do Diego: "muito brilho, muita sombra, o rastreio do mouse * não dá pra ver". * * D14 (26/08/2026) — o arrasto magnético saiu de vez ("tira isso de * ficar perseguindo o mouse"). Sem JS nenhum no botão agora — só CSS. * Como ninguém mais escreve `transform` neste elemento, o CSS pode * ser dono dele sem risco de conflito. * * O hover trocou de cor: vinho-escuro (#993542) é visualmente quase * idêntico ao vinho-principal (#9D3D49) — a troca de cor era * imperceptível, e é provavelmente por isso que o hover "não dava pra * ver" nas tentativas anteriores. Foi pra vinho-profundo (#4B1E28, * já aprovado — é a cor #3 do kit), que é um salto de tom real. * Junto: leve elevação (2px) + sombra curta, na mesma cor da sombra * já aprovada em D5 (vinho, via color-mix — nenhuma cor nova), só que * com blur bem menor — a sombra de D5 (20/50) foi medida em cards * grandes; nessa escala de botão ela vira uma mancha borrada. Aqui é * geometria proporcional ao elemento, a cor é a mesma de sempre. * ------------------------------------------------------------------ */ .btn { /* tipografia — typography_font_family/weight/letter_spacing. * text-transform: uppercase é do widget do Garibaldi (D15), não do * header — mas cobre os dois: "INGRESSOS" já vem digitado em caixa * alta, então o transform não muda nada ali; nos botões que citam * texto em caixa mista no admin, garante o mesmo resultado visual. */ font-family: var(--fonte-text); font-weight: var(--peso-medio); /* 500 */ letter-spacing: 1.2px; /* letter_spacing: 1.2px */ text-transform: uppercase; line-height: 1; /* caixa — text_padding 16/24, border_radius 999, border_width 0 */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* icon_indent: 8px */ flex-direction: row-reverse; /* icon_align: row-reverse (ícone à direita) */ padding: var(--esp-16) var(--esp-24); border: 2px solid transparent; border-radius: var(--raio-pilula); /* 999px */ margin: 0; /* cor — background_color: 2152a3c · button_text_color: ce14df2 */ background-color: var(--cor-vinho-principal); /* #9D3D49 */ color: var(--cor-fundo-creme); /* #FFFCF8 */ text-decoration: none; cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .btn:hover, .btn:focus-visible { background-color: var(--cor-vinho-profundo); /* #4B1E28 — salto de tom real, ver D14 */ color: var(--cor-fundo-creme); box-shadow: 0 6px 16px color-mix(in srgb, var(--cor-vinho-principal) 28%, transparent); transform: translateY(-2px); } .btn:focus-visible { outline: 2px solid var(--cor-dourado); outline-offset: 3px; } /* o ícone seta que acompanha o botão — selected_icon: fas fa-arrow-right */ .btn__icone { width: 1em; height: 1em; flex: none; transition: transform .3s ease; } .btn:hover .btn__icone, .btn:focus-visible .btn__icone { transform: translateX(3px); } /* ------------------------------------------------------------------ * VARIANTE — secundário (contorno vinho sobre fundo claro) * D15: achado real, não especulativo — o botão "Turismo garibaldi" do * post 163 (Garibaldi) usa fundo creme + borda 2px vinho-principal + * texto vinho-principal. O mesmo padrão aparece em pelo menos 6 outras * páginas (Post individual, Regulamento, Início ×2, Comunicação, Cec). * É a ação secundária ao lado do CTA principal, no mesmo fundo claro. * * O validado não muda nenhuma cor no hover desse botão (só a animação * "grow", que sabemos por D12 que nunca funcionava de verdade). Apliquei * o mesmo princípio de D14: hover inverte pra vinho sólido + texto * creme — nenhuma cor nova, só tokens já aprovados. Elevação e sombra * vêm de graça da regra base .btn:hover (não precisam repetir aqui). * ------------------------------------------------------------------ */ .btn--secundario { background-color: var(--cor-fundo-creme); color: var(--cor-vinho-principal); border-color: var(--cor-vinho-principal); } .btn--secundario:hover, .btn--secundario:focus-visible { background-color: var(--cor-vinho-principal); color: var(--cor-fundo-creme); border-color: var(--cor-vinho-principal); } /* ------------------------------------------------------------------ * VARIANTE — sobre fundo vinho/escuro * D12: o .btn padrão (vinho sobre creme) some quando a seção já é * vinho. Inverte: creme por fora, vinho por dentro; no hover vira * dourado sólido — o único ponto de contraste que sobra num bloco * onde tudo já é tom de vinho. * ------------------------------------------------------------------ */ .btn--invertido { background-color: var(--cor-fundo-creme); color: var(--cor-vinho-principal); } .btn--invertido:hover, .btn--invertido:focus-visible { background-color: var(--cor-dourado); color: var(--cor-vinho-profundo); } /* ------------------------------------------------------------------ * VARIANTE — sobre foto * D12: contorno em vez de preenchido, para não competir com a * imagem por baixo. PRÉ-REQUISITO: a seção que usa esta variante * precisa de scrim/overlay escurecendo a foto por trás do botão — * sem isso o contraste do texto não é garantido (regra de a11y do * projeto). O scrim é decisão de cada seção, não deste componente. * ------------------------------------------------------------------ */ .btn--contorno { background-color: transparent; color: var(--cor-fundo-creme); border-color: var(--cor-fundo-creme); } .btn--contorno:hover, .btn--contorno:focus-visible { background-color: var(--cor-fundo-creme); color: var(--cor-vinho-profundo); border-color: var(--cor-fundo-creme); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn__icone { transition: none; } } /* ------------------------------------------------------------------ * LETRA DECORATIVA DE FUNDO * Origem: widgets "G" e "M" do post 163 (Garibaldi) — únicos heading * com typography_typography:"custom", fonte MonteCarlo (D2, corrigido) * e tamanho isolado por página/seção (D9 — varia 200–900px, nunca é * o mesmo valor duas vezes). Por isso o tamanho e a cor entram por * variável inline (--letra-tam / --letra-tam-mobile / --letra-cor), * não por modificador de classe — cada instância é uma medição própria. * * D22 (26/08/2026) — regras dadas pelo Diego, valem em toda página: * 1. O CARACTERE é sempre a inicial do assunto daquela seção — não * necessariamente o que estava no dado bruto do validado. Na * Garibaldi a seção 2 tinha "M" no Elementor original (resquício * sem sentido — a metadata interna chama as duas de "Letra A"); * o Diego corrigiu pra "S" (de "Sobre a cidade"), porque o * critério agora é semântico, não o valor bruto. * 2. ALTERNA de lado a cada seção, sempre começando à DIREITA no * topo da página. Ver .letra-decorativa--esquerda. * 3. O tracinho dourado (.eyebrow__linha) só existe no eyebrow do * TOPO da página — não em eyebrows de seções internas. * * Posição: o validado usa o sistema de offset do Elementor (percentual * + vw/vh, ancorado a uma borda). Não existe tradução 1:1 pra CSS * comum — a posição aqui é uma aproximação visual, ajustada ao vivo. * ------------------------------------------------------------------ */ .letra-decorativa { position: absolute; z-index: 0; /* D29: estava muito no topo (-2%) e "muito destacada". * D33: o mask-image de D29 cortava a letra de um jeito estranho * ("cortou a fonte") — combinado com overflow:hidden do pai e um * glifo de até 500px, o degradê criava um recorte esquisito no * meio do caractere. Removido. Ficou só a opacidade, e a posição * recuou de 42% pra 22% — ainda mais pra baixo que o original, * sem sumir quase inteira atrás do overflow:hidden. */ top: 22%; right: 4%; /* padrão: direita. Primeira seção da página SEMPRE fica aqui */ font-family: var(--fonte-decorativa); font-weight: 400; line-height: 1; font-size: var(--letra-tam-mobile, 200px); /* D80 — COR PADRÃO DA LETRA, por decisão do Diego: "quando for essa * cor de BG, utilize sempre a mesma cor de letra, aí não fico te * pedindo toda vez... olha os padrões que você já fez e faz a mesma * coisa". * * O padrão que ele já tinha aprovado ao vivo na Início é este: sobre * fundo claro (creme, creme-suave ou pêssego-claro) a letra é NUDE * (#EDDED9) — é o que "Contada em números" e "Viva a Magia" usam * desde o D51–D68. As páginas seguintes tinham ficado em * creme-suave, claro demais; ele pediu "um pouco mais escura". * * Agora é DEFAULT, não valor por instância: seção de fundo claro * não passa mais `--letra-cor` nenhum. Só passa quem foge da regra, * e hoje são dois casos, os dois já decididos por ele: * - .inicio-programacao, fundo vinho escuro → D65 (#67303D) * - .inicio-sobre, sobre a faixa de ondas → blush * O hero também passa o seu (pêssego-claro, D75) porque o fundo lá * é o gradiente do topo, não um fundo chapado. */ /* D81 — o Diego achou a letra "forte demais" e escolheu o valor no * DevTools: #EDDED9A1, ou seja, o MESMO nude, a 63% de alpha (a1 = * 161/255). Escrito como color-mix pra continuar amarrado ao token * em vez de virar um literal solto. Vale em todo fundo claro, "em * todos os locais com o mesmo fundo" — por isso está no default do * componente, não em cada página. */ color: var(--letra-cor, color-mix(in srgb, var(--cor-fundo-nude) 63%, transparent)); opacity: .55; /* D29: era opaca demais, "muito destacada" */ pointer-events: none; user-select: none; white-space: nowrap; will-change: transform; /* recebe parallax no scroll — ver main.js */ } /* segunda seção, quarta, sexta... — alterna pro lado esquerdo */ .letra-decorativa--esquerda { right: auto; left: 4%; } /* ------------------------------------------------------------------ * ÁREA DE RECORTE DA LETRA * D62 (Início) → PROMOVIDO a componente em D74, quando a página * Ingressos passou a precisar do mesmo recurso. * * A letra (500–900px) é bem maior que a seção e precisa ser cortada * nas bordas. `overflow:hidden` na própria seção nem sempre serve — em * "Contada em números" isso cortaria a faixa de ondas, que usa margem * negativa justamente pra escapar por cima. Esta área resolve os dois * casos com uma regra só: envolve apenas a letra e recorta ela. * * z-index 1: acima de texturas de fundo (::before, z 0) e abaixo do * conteúdo (z 2) — a letra fica atrás dos cards. * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * ESTRELINHAS (ico-stars.svg) * Origem: widget `e-svg` do validado, 25px de altura — aparece embaixo * do título de praticamente toda seção (7x só na Início, mais Garibaldi * e Ingressos). PROMOVIDO a componente em D74, quando virou a terceira * página a usar. * * O `height` explícito é obrigatório: o reset global `img{height:auto}` * (base.css) vence o atributo HTML `height="25"`, e sem isto o SVG * renderiza no tamanho intrínseco dele — bem maior que os 25px medidos. * ------------------------------------------------------------------ */ .estrelas { display: block; height: 25px; width: auto; margin: var(--esp-12) 0 var(--esp-20); } .letra-area { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } @media (min-width: 1025px) { .letra-decorativa { font-size: var(--letra-tam, 500px); } } /* ------------------------------------------------------------------ * EYEBROW — rótulo pequeno acima de um título * Origem: post 163, heading "SOBRE" e "· CAPITAL NACIONAL DO * ESPUMANTE" — configurações IDÊNTICAS nos dois: Montserrat 12px/500, * letter-spacing 2px, cor Neutra Cacau. Reusa em qualquer seção; * a cor do texto pode variar por contexto (ver .eyebrow--pedra), o * resto não. * ------------------------------------------------------------------ */ .eyebrow { display: flex; align-items: center; gap: var(--esp-8); margin-bottom: var(--esp-16); font-family: var(--fonte-text); font-weight: var(--peso-medio); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--cor-neutra-cacau); flex-wrap: wrap; } .eyebrow__linha { width: 30px; height: 2px; background-color: var(--cor-dourado); flex: none; } .eyebrow__extra { font-weight: var(--peso-texto); } /* D86 — linha de meta do hero (hoje: a data do post individual). * Medida no template 1418: 12px, caixa alta, Neutra Título (#887972, * literal aprovado no D6 — é a cor de título de post, e é justamente * aqui que ela tem uso real). */ .pagina-hero__meta { margin: calc(var(--esp-8) * -1) 0 0; font-family: var(--fonte-text); font-weight: var(--peso-medio); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--cor-neutra-titulo); } /* "O que te espera" (seção 2 da Garibaldi) mede Neutra Pedra, não * Neutra Cacau — as duas seções usam tons próximos mas diferentes, * confirmado widget a widget. */ .eyebrow--pedra { color: var(--cor-neutra-pedra); } /* ------------------------------------------------------------------ * TÍTULO PRATA — H1 de hero OU título de seção interna * Origem: H1 "Descubra Garibaldi" e o título "Sobre a cidade" — as * DUAS têm a especificação EXATAMENTE igual (Prata 500 46px), incluindo * o mesmo recurso: uma palavra em destaque na cor #D4AF37 (D17 — * "dourado-titulo", 23 usos reais em 11 páginas, não é o mesmo dourado * dos botões/acentos). * * D21→D23 (26/08/2026) — a cor BASE do título não é a medida no H1. * O dado mede vinho-principal (#9D3D49) — e é uniforme: 30+ títulos * no site inteiro usam essa cor, sem exceção. Mas o Diego, vendo * renderizado, achou que ficava "roxo" perto do dourado de destaque * e do fundo em gradiente. Pediu vinho-profundo (D21) — aí achou * ESCURO demais. Pediu um meio-termo entre os dois (D23): * --cor-vinho-titulo-hero (#742E38), a média exata entre * vinho-profundo e vinho-principal. É a ÚNICA cor deste tema que não * vem de medição — é decisão de design dele, ao vivo, e diverge do * que as outras 30+ páginas vão medir quando forem construídas. Se * for pra virar padrão do site (ele pediu isso), fica registrado * aqui pra não "corrigir de volta" pro valor medido por engano. * ------------------------------------------------------------------ */ .titulo-prata { font-family: var(--fonte-display); font-weight: var(--peso-medio); font-size: clamp(32px, 6vw, 46px); line-height: 1.15; color: var(--cor-vinho-titulo-hero); margin: 0; } .destaque-titulo { color: var(--cor-dourado-titulo); } /* ------------------------------------------------------------------ * HERO DE PÁGINA INTERNA * Origem: container "Header" do post 163 — padding real medido * 5% / 5% / 8% / 5% (top/right/bottom/left), full_width (sem cap de * 1440px — é intencional, o Header usa layout full_width no * validado). Coluna de texto ("Tit"): width 50% real, não estimado. * Template-part em template-parts/page-header.php. * ------------------------------------------------------------------ */ /* D31 (26/08/2026) — BUG: o hero usava padding-inline:5% do VIEWPORT * inteiro, sem o teto de 1280 (D28). Em tela larga isso desalinha o * H1 do logo do cabeçalho — o cabeçalho centraliza dentro de 1280, * o hero não, os dois começam em pontos diferentes. Corrigido: a * mesma receita em todo lugar — max-width:1280 + margin:auto + * padding-inline:5% — agora em .pagina-hero__conteudo, não na seção. */ .pagina-hero { position: relative; overflow: hidden; padding-top: var(--ritmo-secao); padding-bottom: var(--ritmo-secao-dobro); /* D19/D24: dobro — mais respiro antes da próxima seção */ } .pagina-hero__conteudo { position: relative; z-index: 1; max-width: var(--container-largura); /* D28/D31: mesma receita do cabeçalho e do rodapé */ margin-inline: auto; padding-inline: var(--respiro-container); } /* a coluna de TEXTO (50% medido) fica num nível interno — o wrapper * de fora só alinha, quem estreita pro tamanho do texto é este aqui */ .pagina-hero__coluna { max-width: 50%; /* medido: container "Tit" = width 50% */ } .pagina-hero__titulo { margin: 0 0 var(--esp-20); } .pagina-hero__desc { max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--cor-neutra-pedra); margin: 0; } @media (max-width: 767px) { .pagina-hero__coluna { max-width: 100%; } } /* ------------------------------------------------------------------ * D25 (26/08/2026) — PROPOSTA: bolhas de champanhe * ------------------------------------------------------------------ * NÃO vem do site validado. O Diego pediu "alguma coisa que dê vida, * bem sutil" — pediu explicitamente uma sugestão minha pra ver e * decidir se aprova. Isto é a proposta, pendente de aprovação — se * ele topar, "torna padrão" (usar em outras seções/páginas, não só * no hero); se não, remove os dois blocos (aqui e no page-header.php) * sem deixar resíduo. * * REVISÃO (mesmo dia): o Diego não viu nada — "meu monitor é bom", ou * seja, não era o monitor, era pouco contraste mesmo. 3–7px a opacidade * .20–.32 sobre um gradiente creme→blush (os dois muito claros) se * perdia. Aumentado: 6–13px, opacidade até .6, com uma borda mais * definida (vinho-principal via color-mix) pra não depender só do * dourado pálido pra aparecer. Ainda só `transform`/`opacity` — GPU. * Fica ATRÁS do conteúdo (z-index 0, mesma camada da letra decorativa). * ------------------------------------------------------------------ */ .bolhas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* D30 → D32 → D35: a v3 (55% dourado) sumiu de novo — MEDI a * luminância: 0.808 contra 0.813 do fim do degradê (pessego), uma * diferença de 0.005 — praticamente idêntico, por isso "invisível" * de novo, agora por contraste baixo demais, não por opacidade baixa. * 25% dourado / 75% branco dá 0.077 de diferença contra o início do * degradê (creme) e 0.100 contra o fim (pessego) — mais claro ainda * que a v3, mas com separação real dos dois lados do gradiente. */ .bolha { position: absolute; bottom: -30px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--cor-dourado) 25%, white) 0%, transparent 78%); opacity: 0; animation-name: subir-bolha; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes subir-bolha { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: var(--bolha-opacidade, .5); } 85% { opacity: var(--bolha-opacidade, .5); } 100% { transform: translate(var(--bolha-deriva, 12px), -340px); opacity: 0; } } /* 10 variações — posição, tamanho, tempo e deriva lateral distintos, * pra subida parecer orgânica, não um padrão repetindo. */ /* D35: opacidade subiu ~.15 em cada uma — a cor ficou mais clara * (25% dourado), precisa de mais opacidade pra manter a mesma * presença visual de antes. */ .bolha--1 { left: 6%; width: 9px; height: 9px; animation-duration: 14s; animation-delay: 0s; --bolha-deriva: 14px; --bolha-opacidade: .70; } .bolha--2 { left: 16%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 2.4s; --bolha-deriva: -12px; --bolha-opacidade: .58; } .bolha--3 { left: 27%; width: 11px; height: 11px; animation-duration: 17s; animation-delay: 5s; --bolha-deriva: 18px; --bolha-opacidade: .64; } .bolha--4 { left: 38%; width: 7px; height: 7px; animation-duration: 13s; animation-delay: 1.2s; --bolha-deriva: -15px; --bolha-opacidade: .72; } .bolha--5 { left: 49%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: 7.5s; --bolha-deriva: 11px; --bolha-opacidade: .54; } .bolha--6 { left: 59%; width: 13px; height: 13px; animation-duration: 15s; animation-delay: 3.8s; --bolha-deriva: -19px; --bolha-opacidade: .60; } .bolha--7 { left: 69%; width: 7px; height: 7px; animation-duration: 12s; animation-delay: 6.2s; --bolha-deriva: 13px; --bolha-opacidade: .70; } .bolha--8 { left: 79%; width: 9px; height: 9px; animation-duration: 16s; animation-delay: 0.6s; --bolha-deriva: -9px; --bolha-opacidade: .56; } .bolha--9 { left: 88%; width: 6px; height: 6px; animation-duration: 18s; animation-delay: 4.6s; --bolha-deriva: 15px; --bolha-opacidade: .66; } .bolha--10 { left: 94%; width: 10px; height: 10px; animation-duration: 13s; animation-delay: 8.4s; --bolha-deriva: -13px; --bolha-opacidade: .62; } @media (prefers-reduced-motion: reduce) { .bolhas { display: none; } } /* ------------------------------------------------------------------ * LIGHTBOX — amplia imagem de galeria ao clicar * D37 (27/08/2026), pedido do Diego: "faça as fotos da galeria * ampliarem". Não vem do validado — é comportamento novo. Feito * reutilizável: qualquer dentro de um