/* home-b-v3.css · Codec Studio · prévia da home 2027 (B v3, 20/10/2026, designer-ui). Só desenho, não é código de produção. Direção: clean e moderna, com contenção. Cores, letras e movimento vêm da identidade base 2027 (identidade/tokens.css). Escala de espaço única (4/8), margem larga, um raio só (16 px) e a pílula dos botões. Um acento por tela. A padronagem principal é a ONDAS (as escamas de anéis da capa da agenda 2027), sempre tom sobre tom, como textura. Tom a mais, da escala oficial (IDENTIDADE-BASE-2027, seção 3): Fêmea 800 #3F4517 (O Cariri). Letras: Nunito Sans nos títulos e rótulos; Museo Sans (kit ffq7ngy do Adobe Fonts) no texto e nos subtítulos, numa variável só; Fraunces só no destaque. */ :root { --fonte-texto: "museo-sans", sans-serif; /* Museo Sans, pelo kit do Adobe Fonts (pesos 300, 300 itálico, 500 e 700) */ --r: 16px; /* o raio único: foto, cartão, quadro, campo */ --r2: 24px; /* o 2º raio: os cartões grandes (serviços, pessoas, painel das perguntas) */ --margem: clamp(20px, 6.4vw, 112px); --largura: 1216px; --pad-y: clamp(56px, 6.1vw, 88px); /* o respiro de cada lado de uma emenda, o MESMO em todas as seções (operador, 20/10: "ficou um espaço grande dms"): do fim do conteúdo até a curva e da curva até o conteúdo seguinte (88 px em 1440, 56 px no celular) */ --topo-h: 72px; --escama: 32px; /* largura de 1 escama da Ondas (o módulo): bem pequena e discreta, igual no computador e no celular (operador, 20/10) */ --fundo: var(--cx-branco); --fundo-ante: var(--cx-branco); --v3-femea-800: #3F4517; /* "Coroa" (nome provisório; operador, 20/10: "precisa ter uma cor que contraste com o verde aqui. Pode ser essa que está na cabeça do pássaro"): o laranja-ferrugem da coroa do soldadinho, cor de apoio SÓ para o fundo verde-oliva escuro (O Cariri). Não é vermelho: a regra "nunca vermelho sobre verde" continua. #E98C34 só em letra grande (3,98:1 sobre o Fêmea 800); #EFAA69, o mesmo matiz mais claro, na letra pequena e no fio (5,12:1 no fundo; 4,62:1 sobre as linhas da Ondas verde). Nunca na Nossa missão nem fora do verde. */ --cx-coroa: #E98C34; --cx-coroa-medio: #C8702C; --cx-coroa-claro: #EFAA69; --cx-preto: #000000; /* preto de tela do site: #000000, decisão do operador de 20/10 ("bem vívido, pra não parecer preto fosco"). Vale para o momento preto inteiro: abertura, Trabalhos, cartões de O que fazemos, Quem somos, rodapé, sala, menu e 404. O token da identidade (identidade/tokens.css) continua #0F0F0F; o grafite #212121 fica só onde já estava. */ --cx-veu-foto: rgb(0 0 0 / 0.35); } @media (max-width: 767px) { :root { --topo-h: 64px; --pad-y: 56px; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--topo-h); background: var(--cx-preto); } /* o fundo da tela além da página (a sobra da rolagem, o puxão do celular) é o preto do rodapé, nunca uma faixa branca (lote 2) */ body { margin: 0; background: var(--cx-branco); color: var(--cx-texto); font: 300 var(--cx-tam-texto) / var(--cx-entrelinha-texto) var(--fonte-texto); -webkit-font-smoothing: antialiased; font-synthesis: none; overflow-x: clip; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, p, figure, ul, ol, blockquote, fieldset, legend, dl, dd { margin: 0; padding: 0; } /* texto longo alinhado à esquerda, medida curta, sem viúva (operador, 20/10): parágrafo em "pretty", título em "balance" */ p, li, dd, figcaption, legend, summary { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } fieldset { border: 0; min-width: 0; } strong, b { font-weight: 700; } :focus-visible { outline: var(--cx-foco-largura) solid var(--cx-foco); outline-offset: var(--cx-foco-distancia); } [hidden] { display: none !important; } .pular { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--cx-raio-pilula); background: var(--cx-branco); color: var(--cx-grafite); font: 700 16px / 1 var(--cx-fonte-titulo); } .pular:focus { left: 12px; } /* ---------- a escala de letra (14 · 16 · 18 · 22 · subtítulo · H3 · H2 · display; o título grande do celular é o mesmo na abertura e no Contratar) ---------- */ .rotulo { font: var(--cx-peso-rotulo) 14px / var(--cx-entrelinha-rotulo) var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-rotulo); text-transform: uppercase; color: var(--cx-rotulo); } .rotulo::before { content: ""; display: block; width: 24px; height: 2px; background: var(--cx-fio); margin-bottom: 14px; } .rotulo--rec::before { display: none; } .rec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-icone-cor); margin-right: 10px; vertical-align: 1px; } .h1 { font: var(--cx-peso-titulo) var(--cx-tam-display) / var(--cx-entrelinha-display) var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-display); color: var(--cx-titulo); text-wrap: balance; max-width: 15ch; } .h2 { font: var(--cx-peso-titulo) var(--cx-tam-h2) / var(--cx-entrelinha-h2) var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-h2); color: var(--cx-titulo); text-wrap: balance; max-width: 20ch; } .h3 { font: var(--cx-peso-titulo) var(--cx-tam-h3) / var(--cx-entrelinha-h3) var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-h3); color: var(--cx-titulo); text-wrap: balance; } .h4 { font: var(--cx-peso-titulo) 18px / 1.3 var(--cx-fonte-titulo); color: var(--cx-titulo); } .sub { font: 500 var(--cx-tam-subtitulo) / var(--cx-entrelinha-subtitulo) var(--fonte-texto); color: var(--cx-titulo); max-width: var(--cx-medida-subtitulo); text-wrap: pretty; } .texto { font: 300 var(--cx-tam-texto) / var(--cx-entrelinha-texto) var(--fonte-texto); color: var(--cx-texto); max-width: 52ch; text-wrap: pretty; } .pequeno { font: 500 16px / 1.5 var(--fonte-texto); color: var(--cx-texto-2); } .dados { font: 500 16px / 1.5 var(--fonte-texto); color: var(--cx-texto-2); } .destaque { font-family: var(--cx-fonte-destaque); font-style: italic; font-weight: var(--cx-peso-destaque); font-size: calc(var(--cx-destaque-escala) * 1em); line-height: var(--cx-destaque-entrelinha); letter-spacing: 0; color: var(--cx-destaque); padding-right: 0.04em; } .cabeca { display: grid; gap: 16px; justify-items: start; } .cabeca--linha { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; } .cabeca--linha > div { display: grid; gap: 16px; justify-items: start; } .selo-linha { display: inline-block; width: fit-content; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--cx-raio-pilula); font: var(--cx-peso-rotulo) 14px / 1.4 var(--cx-fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px; } /* ---------- ícones, botões, chips, links (chapados; sem sombra, sem brilho) ---------- */ .ico { width: var(--cx-icone-ui); height: var(--cx-icone-ui); flex: none; } .ico--volta { transform: scaleX(-1); } .bt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--cx-botao-altura); padding: 0 24px 0 20px; border-radius: var(--cx-raio-pilula); font: var(--cx-peso-botao) var(--cx-tam-botao) / var(--cx-entrelinha-botao) var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-botao); white-space: nowrap; border: var(--cx-botao-borda) solid transparent; background: none; cursor: pointer; transition: background-color var(--cx-dur-1), border-color var(--cx-dur-1), color var(--cx-dur-1); } .bt--wa { background: var(--cx-acento); color: var(--cx-sobre-acento); border-color: var(--cx-acento-borda); } .bt--wa:hover { background: var(--cx-acento-hover); } .bt--wa:active { background: var(--cx-acento-ativo); } .bt--wa-claro { background: var(--cx-branco); color: var(--cx-vermelho); } .bt--wa-claro:hover { background: var(--cx-cinza-50); color: var(--cx-vermelho-700); } .bt .seta { transition: transform var(--cx-dur-2) var(--cx-curva-saida); } .bt--wa:hover .seta, .bt--wa-claro:hover .seta { transform: translateX(var(--cx-desloca-seta)); } .bt--linha { border-color: currentColor; color: inherit; } .bt--linha:hover { background: rgb(127 127 127 / 0.12); } .bt--linha:hover .seta { transform: translateX(var(--cx-desloca-seta)); } .bt--claro { background: var(--cx-branco); color: var(--cx-grafite); } .bt--claro:hover { background: var(--cx-cinza-100); } .bt--preto { background: var(--cx-preto); color: var(--cx-branco); } .bt--preto:hover { background: var(--cx-grafite); } .bt--branco { background: var(--cx-branco); color: var(--cx-verde-700); } .bt--branco:hover { background: var(--cx-verde-100); } .bt--peq { min-height: var(--cx-botao-altura-pequeno); padding: 0 16px 0 14px; font-size: var(--cx-tam-botao-pequeno); gap: 8px; } .bt--peq .ico { width: 20px; height: 20px; } .bt--principal { width: var(--cx-botao-largura); justify-content: var(--cx-botao-justifica); white-space: var(--cx-botao-quebra); padding-block: 10px; } .bt--principal .seta { display: var(--cx-botao-seta); } .bt__texto { text-align: left; } @media (max-width: 479px) { .bt--principal .bt__texto { text-wrap: balance; } } .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cx-alvo-min); padding: 0 16px 0 12px; border-radius: var(--cx-raio-pilula); border: 1.5px solid currentColor; background: none; font: var(--cx-peso-menu) var(--cx-tam-botao-pequeno) / 1.1 var(--cx-fonte-titulo); color: var(--cx-texto); white-space: nowrap; transition: border-color var(--cx-dur-1); } .chip .ico { width: 20px; height: 20px; color: var(--cx-icone-cor); } .chip .chip__mais { width: 18px; height: 18px; margin-left: 2px; color: var(--cx-texto-2); } /* o atalho abre o pop-up do serviço (operador, 20/10): o "+" avisa */ .chip { cursor: pointer; } .chip:hover { background: rgb(127 127 127 / 0.12); } .link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cx-alvo-min); padding: 0; border: 0; background: none; cursor: pointer; color: var(--cx-link); text-decoration: underline; text-decoration-color: var(--cx-link-sublinhado); text-decoration-thickness: 2px; text-underline-offset: 6px; font: var(--cx-peso-botao) 18px / 1.3 var(--cx-fonte-titulo); } .link:hover { color: var(--cx-link-hover); } .link .ico { width: 18px; height: 18px; } .link--peq { font-size: 16px; } .ctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--cx-alvo-min); min-height: var(--cx-alvo-min); padding: 0 14px; border-radius: var(--cx-raio-pilula); border: 1.5px solid currentColor; background: none; color: var(--cx-branco); font: var(--cx-peso-botao) 16px / 1 var(--cx-fonte-titulo); cursor: pointer; } .ctl:hover { background: rgb(255 255 255 / 0.12); } .ctl .ico { width: 20px; height: 20px; } .ctl--peq { padding: 0 12px; } .credito { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 6px 12px; border-radius: var(--cx-raio-pilula); background: var(--cx-branco); color: var(--cx-grafite); font: var(--cx-peso-rotulo) 14px / 1.25 var(--cx-fonte-titulo); letter-spacing: 0.04em; } /* ---------- foto, quadro que falta, carimbo em traço ---------- */ .foto { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--cx-superficie); padding: 0; border: 0; } .foto img { width: 100%; height: 100%; object-fit: cover; } .foto picture { display: block; width: 100%; height: 100%; } /* as fotos do banco vêm em (AVIF com o WebP de reserva) */ .falta { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; border: 1px dashed var(--cx-borda-campo); border-radius: var(--r); color: var(--cx-texto-2); font: 500 16px / 1.35 var(--fonte-texto); background: var(--cx-superficie); } .falta .ico { width: 32px; height: 32px; color: var(--cx-texto-2); } .carimbo { position: absolute; width: var(--d, 300px); height: var(--d, 300px); color: var(--cx-branco); pointer-events: none; z-index: 3; } .carimbo__svg { width: 100%; height: 100%; overflow: visible; } .carimbo__aro { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; } .carimbo__aro--fino { stroke-width: 1.25; } .carimbo__texto { fill: currentColor; font: var(--cx-peso-rotulo) 14.5px / 1 var(--cx-fonte-titulo); letter-spacing: 0.16em; } .carimbo__anel { transform-box: view-box; transform-origin: 50% 50%; } .carimbo use { fill: currentColor; } /* ---------- a Ondas, a padronagem principal (tom sobre tom, como textura; nunca atrás de texto corrido nem sobre foto ou vídeo) ---------- */ .com-ondas { background-color: var(--cx-preto); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 50% 0; } .com-ondas-vermelho { background-color: var(--cx-vermelho); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23D20A2E%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23BB0929%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 50% 0; } .com-ondas-verde { background-color: var(--v3-femea-800); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%233F4517%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23454C1A%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 50% 0; } /* O Cariri: a Ondas leve, verde tom sobre tom (operador, 20/10, no lugar da Fitas) */ .com-ondas-cinza { background-color: var(--cx-cinza-50); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23F3F3F3%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%23EAEAEA%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 50% 0; } /* a seção do Monte seu projeto: a Ondas clara, pequena e discreta */ .com-ondas-grafite { background-color: var(--cx-grafite); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 0 100%; } /* a capa provisória dos trabalhos (o módulo oficial tom-escuro) */ /* ---------- seções: cada uma com 1 fundo e 1 acento; cada uma ocupa a sua tela ---------- */ .wrap { position: relative; width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; } /* o vão entre as seções, um padrão só: a curva fica no meio do vão. A borda da curva (a altura dela) entra pela metade de cada lado: em cima, o respiro menos meia curva (a curva desta seção fica acima do padding); embaixo, o respiro mais meia curva da seção seguinte (que sobe por cima deste padding). Nenhuma seção tem padding próprio nas pontas. No computador a seção tem a altura do conteúdo; no celular, a altura da tela (a rolagem assenta numa seção por vez) */ .secao, .secao-curta { --pad-cima: calc(var(--pad-y) - var(--curva-h) / 2 - var(--curva-sob)); --pad-baixo: calc(var(--pad-y) + var(--curva-h-prox) / 2 + var(--curva-sob-prox)); } .secao { position: relative; background-color: var(--fundo); color: var(--cx-texto); padding: var(--pad-cima) 0 var(--pad-baixo); display: flex; flex-direction: column; justify-content: center; } /* no celular a rolagem assenta numa seção por vez: a seção tem no mínimo a tela menos 48 px. Assim o vão fica igual (as seções já têm quase a altura da tela) e, parada no começo de uma seção, a tela mostra da próxima só a curva e o fundo, nunca o conteúdo */ @media (max-width: 767px) { .secao { min-height: calc(100vh - var(--topo-h) - 48px); min-height: calc(100svh - var(--topo-h) - 48px); } } .secao--branco { --fundo: var(--cx-branco); } .cx-momento-preto.secao { --fundo: var(--cx-preto); } .cx-cinza { --fundo: var(--cx-cinza-50); } .cx-cariri { --fundo: var(--v3-femea-800); --cx-fundo: var(--v3-femea-800); --cx-superficie: var(--cx-verde-700); --cx-texto: var(--cx-branco); --cx-texto-2: var(--cx-verde-100); --cx-titulo: var(--cx-branco); --cx-rotulo: var(--cx-coroa-claro); --cx-fio: var(--cx-coroa-claro); --cx-destaque: var(--cx-coroa); --cx-icone-cor: var(--cx-verde-200); /* o acento do verde é a Coroa (lote 2) */ --cx-link: var(--cx-branco); --cx-link-sublinhado: var(--cx-verde-200); --cx-link-hover: var(--cx-verde-100); --cx-foco: var(--cx-branco); --cx-borda-campo: var(--cx-verde-200); --cx-linha-forte: rgb(255 255 255 / 0.3); background-color: var(--fundo); color: var(--cx-texto); } .cx-vermelho { --fundo: var(--cx-vermelho); --cx-fundo: var(--cx-vermelho); --cx-texto: var(--cx-branco); --cx-texto-2: var(--cx-branco); --cx-titulo: var(--cx-branco); --cx-rotulo: var(--cx-branco); --cx-fio: var(--cx-branco); --cx-destaque: #000000; --cx-icone-cor: var(--cx-branco); /* destaque preto sobre o vermelho (3,82:1, letra grande) */ --cx-link: var(--cx-branco); --cx-link-sublinhado: var(--cx-branco); --cx-link-hover: var(--cx-cinza-50); --cx-foco: var(--cx-branco); color: var(--cx-texto); } /* ---------- as emendas (lote 2; operador, 20/10: "em cada sessão use uma delas diferente"): as 4 divisórias aprovadas na prancha ../divisorias-opcoes/, em rodízio: 2 Encaixe com anel, 4 Régua de edição, 8 Fio do símbolo e 10 Barra de play (qual fica em cada emenda: no LEIA-PRIMEIRO). Nenhuma reta e nenhuma cúpula: só arcos de círculo, com flecha de 2,1 a 2,2% da largura (2,8% no celular, no mínimo 10 px); 1 elemento por emenda. A seção de baixo sobe sobre a de cima e é recortada pela curva (máscara): o fundo e a padronagem de cada seção vão exatamente até a curva, sem faixa de outra cor. O desenho exato (na largura real), a máscara e o elemento vêm do código (codigo.js, "as emendas"); sem o código, fica a mesma curva, esticada, sem o elemento. Cada emenda tem um
logo antes da seção de baixo: o elemento é desenhado ali, numa camada por cima das 2 seções, sem pegar clique. 2 alturas: "meio" (o fundo no meio: a 2, a 8 e a da capa) e "lado" (o fundo ou o alto fora do meio: a 4 e a 10, que descem mais para ter a mesma flecha). A 2 abre o recorte do anel abaixo da curva: a seção de cima vai por baixo até lá (--curva-sob), e o recorte mostra o fundo dela. ---------- */ :root { --curva-h-meio: 2.2vw; --curva-h-lado: 3.024vw; --sob-encaixe: 48px; --curva-h: var(--curva-h-meio); --curva-h-prox: var(--curva-h-meio); --curva-sob: 0px; --curva-sob-prox: 0px; } @media (max-width: 639px) { :root { --curva-h-meio: max(10px, 2.8vw); --curva-h-lado: max(14.4px, 4.032vw); --sob-encaixe: 36px; } } .emenda-curva { --curva: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C100%20L0%2C0.00%20A2642.00%2C2642.00%200%200%200%201440%2C0.00%20L1440%2C100%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); position: relative; z-index: 3; margin-top: calc(-1 * (var(--curva-h) + var(--curva-sob))); border-top: calc(var(--curva-h) + var(--curva-sob)) solid transparent; -webkit-mask: var(--curva) 0 0 / 100% var(--curva-m, var(--curva-h)) no-repeat, linear-gradient(#000, #000) 0 calc(var(--curva-m, var(--curva-h)) - 1px) / 100% 100% no-repeat; mask: var(--curva) 0 0 / 100% var(--curva-m, var(--curva-h)) no-repeat, linear-gradient(#000, #000) 0 calc(var(--curva-m, var(--curva-h)) - 1px) / 100% 100% no-repeat; } .emenda-curva--regua { --curva-h: var(--curva-h-lado); --curva: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C100%20L0%2C55.89%20A3782.48%2C3782.48%200%200%200%201440%2C0.00%20L1440%2C100%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); } /* a bacia com o fundo em 40% da largura */ .emenda-curva--play { --curva-h: var(--curva-h-lado); --curva: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C100%20L0%2C100.00%20A3782.48%2C3782.48%200%200%201%201440%2C44.11%20L1440%2C100%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); } /* a crista com o alto em 60% da largura */ .emenda-curva--encaixe { --curva-sob: var(--sob-encaixe); } /* a seção de cima reserva meia curva da de baixo (e, na 2, o recorte do anel), para o vão entre os conteúdos ficar igual em toda a página */ :is(.secao, .secao-curta):has(+ .emenda--regua, + .emenda--play) { --curva-h-prox: var(--curva-h-lado); } :is(.secao, .secao-curta):has(+ .emenda--encaixe) { --curva-sob-prox: var(--sob-encaixe); } /* o elemento da emenda: uma camada sem altura entre as 2 seções, por cima delas (z 4; o selo da capa e os controles do vídeo ficam acima) */ .emenda { position: relative; z-index: 4; height: 0; pointer-events: none; } .emenda__arte { position: absolute; left: 0; width: 100%; height: 0; } .emenda__svg { position: absolute; left: 0; display: block; max-width: none; overflow: visible; } .emenda .anda { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; } .emenda .anda svg { position: absolute; top: 0; display: block; max-width: none; } .emenda .revela { position: absolute; left: 0; overflow: clip; will-change: transform; } /* clip, e não hidden (hidden vira área de rolagem) */ .emenda .revela__dentro { position: relative; width: 100%; height: 100%; will-change: transform; } .emenda .revela svg { position: absolute; left: 0; top: 0; display: block; max-width: none; } .emenda .bolinha { position: absolute; border-radius: 50%; } /* ---------- carrossel: arrasta com o dedo, setas no computador, "2 de 6", nunca anda sozinho ---------- */ .carrossel { position: relative; } .carrossel__trilho { position: relative; display: flex; gap: var(--vao, 24px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 2px; margin-block: -8px; } .carrossel__trilho::-webkit-scrollbar { display: none; } .carrossel__trilho.is-arrastando { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } .carrossel__item { flex: 0 0 var(--w, 80%); min-width: 0; scroll-snap-align: start; } .carrossel__controle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; } .carrossel__navega { display: flex; align-items: center; gap: 8px; margin-left: auto; } .carrossel__conta { min-width: 64px; text-align: right; font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-texto-2); font-variant-numeric: tabular-nums; } .carrossel__seta { width: var(--cx-alvo-min); height: var(--cx-alvo-min); display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: none; color: var(--cx-titulo); cursor: pointer; transition: background-color var(--cx-dur-1), opacity var(--cx-dur-1); } .carrossel__seta:hover { background: rgb(127 127 127 / 0.14); } .carrossel__seta[aria-disabled="true"] { opacity: 0.3; cursor: default; } .carrossel__seta .ico { width: 18px; height: 18px; } .carrossel.sem-rolagem .carrossel__navega { visibility: hidden; } @media (hover: hover) and (pointer: fine) { .carrossel__trilho { cursor: grab; } } .sem-rolagem .carrossel__trilho { cursor: auto; } /* sem rolagem (a grade do computador), nada para arrastar: sem a mãozinha (lote 3, o Também fazemos parado) */ @media (max-width: 1023px) { .carrossel__trilho { margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem); } } @media (max-width: 767px) { /* no celular a contagem e as setas ficam à esquerda: o disco do WhatsApp (à direita) não cobre a seta */ .carrossel__controle { justify-content: flex-start; } .carrossel__controle .carrossel__navega { margin-left: 0; } .carrossel__controle .carrossel__conta { order: 3; text-align: left; min-width: 0; margin-left: 4px; } } @media (min-width: 1024px) { /* o mesmo bloco vira grade no computador, quando cabe inteiro */ .carrossel--so-celular .carrossel__trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; cursor: auto; } .carrossel--so-celular .carrossel__controle { display: none; } } /* a SETINHA lateral, o controle único dos carrosséis (operador e CIA, 20/10): um círculo pequeno com a seta, na ponta da faixa à vista, por cima do cartão que aparece pela metade, na altura do meio da foto (o código põe --desliza-y). 36 px de visual e 44 px de toque. Pulsa de leve (só a "→"); com "reduzir movimento", parada. Os controles de baixo saem: as setas grandes somem e o contador fica só para o leitor de tela */ .desliza { position: absolute; top: var(--desliza-y, 50%); z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cx-branco); cursor: pointer; } .desliza::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgb(0 0 0 / 0.56); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.92), 0 2px 10px rgb(0 0 0 / 0.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color var(--cx-dur-1); } .desliza:hover::before { background: rgb(0 0 0 / 0.72); } .desliza .ico { position: relative; width: 18px; height: 18px; } .desliza--prox { right: var(--desliza-dir, 8px); } .desliza--ante { left: var(--desliza-esq, 8px); } .desliza--prox.pulsa .ico { animation: desliza-pulso 2.4s var(--cx-curva-suave, ease) 2; } /* pulsa 2 vezes (< 5 s, WCAG 2.2.2) quando a faixa entra na tela pela 1ª vez */ .desliza:focus-visible { outline: 2px solid var(--cx-branco); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cx-preto); } /* o anel duplo: aparece sobre qualquer foto */ .carrossel.sem-rolagem .desliza { display: none; } .carrossel:not(.sala__mais) .carrossel__seta { display: none; } .carrossel:not(.sala__mais) .carrossel__conta { position: absolute; left: 0; top: 0; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* min-width 0: o contador tinha 64 px de mínimo e, escondido, alargava a página em 768 */ .carrossel:not(.sala__mais) .carrossel__controle:not(:has(> .bt)) { height: 0; min-height: 0; margin: 0; } /* sem os controles, a linha some: nada de vão embaixo da faixa */ @keyframes desliza-pulso { 0%, 50%, 100% { transform: translateX(0); } 70% { transform: translateX(4px); } 85% { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .desliza .ico { animation: none !important; } } /* ---------- topo: preto, preso; logo à esquerda; o item da seção atual fica marcado ---------- */ .topo { position: fixed; top: 0; left: 0; right: 0; z-index: var(--cx-camada-barra); height: var(--topo-h); background: var(--cx-preto); color: var(--cx-branco); --cx-foco: var(--cx-branco); } .topo__in { height: 100%; width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .topo__logo { display: block; padding-block: 8px; flex: none; } /* o logo nunca encolhe: 28 px no celular, em qualquer largura */ .topo__logo img { height: var(--cx-logo-altura); width: auto; } .menu { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); font: var(--cx-peso-menu) var(--cx-tam-menu) / 1 var(--cx-fonte-titulo); } .menu a { display: inline-flex; align-items: center; min-height: var(--cx-alvo-min); border-bottom: 2px solid transparent; white-space: nowrap; color: var(--cx-cinza-300); transition: border-color var(--cx-dur-1), color var(--cx-dur-1); } .menu a:hover { color: var(--cx-branco); } .menu a[aria-current="true"] { color: var(--cx-branco); border-bottom-color: var(--cx-vermelho-400); } .topo__acoes { display: flex; align-items: center; gap: 8px; } .topo__menu { display: none; } @media (max-width: 1199px) { .menu { display: none; } .topo__menu { display: inline-flex; } .topo__monte { display: none; } /* no celular e no tablet, o "Monte seu projeto" fica em destaque dentro do menu */ } .home .topo { background: transparent; transition: background-color var(--cx-dur-2) var(--cx-curva-saida); } /* na capa, o topo fica sobre o vídeo (o véu de cima dá a leitura) */ .home .topo.is-compacto { background: var(--cx-preto); } /* ---------- menu do celular: painel preto de tela cheia, numerado como o funil ---------- */ .painel { position: fixed; inset: 0; z-index: 80; background: var(--cx-preto); color: var(--cx-branco); --cx-foco: var(--cx-branco); padding: 12px var(--margem) calc(24px + env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 32px; overflow: auto; } .painel__topo { display: flex; align-items: center; justify-content: space-between; min-height: 40px; } .painel__topo img { height: 28px; width: auto; } .painel__links { display: grid; } .painel__links a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; font: var(--cx-peso-titulo) clamp(24px, 6.6vw, 30px) / 1.2 var(--cx-fonte-titulo); } .painel__links .num { font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); letter-spacing: 0.1em; color: var(--cx-vermelho-400); } .painel__links a[aria-current="true"] .num::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--cx-vermelho-400); vertical-align: 2px; } /* ---------- 1 · abertura: o vídeo de ponta a ponta; o texto direto sobre ele, à esquerda, com o véu em degradê só do lado do texto ---------- EXCEÇÃO à regra "texto nunca sobre vídeo", só aqui (operador, 20/10). O véu garante a leitura em QUALQUER quadro: atrás do texto ele fica em 84% a 92% de preto (num quadro todo branco, o fundo do texto não passa de #292929, e o branco fica acima de 14:1); um logo branco do reel atrás do título vira #141414, quase invisível. ---------- */ .abertura { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: var(--cx-branco); background: var(--cx-preto); --cx-foco: var(--cx-branco); --cx-destaque: var(--cx-vermelho-400); --cx-rotulo: var(--cx-branco); --cx-fio: var(--cx-vermelho-400); /* sem z-index: o selo (5) e os controles (6) ficam por cima da curva do O que fazemos (3), que sobe sobre o vídeo */ } .abertura__quadro { position: absolute; inset: 0; overflow: hidden; background: var(--cx-grafite); } .abertura__quadro { --foco-x: 50%; } .abertura__capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco-x) 50%; } .abertura__video { position: absolute; inset: 0; overflow: hidden; } .abertura__video iframe { position: absolute; top: 50%; left: var(--foco-x, 50%); width: 100%; height: 100%; transform: translate(calc(-1 * var(--foco-x, 50%)), -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity var(--cx-dur-3) var(--cx-curva-saida); } .abertura__video.is-tocando iframe { opacity: 1; } /* até o Vimeo avisar que tocou, fica a capa; sem aviso em 6 s, o player sai */ .abertura__veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0.72) 0, rgb(0 0 0 / 0) 200px), linear-gradient(0deg, rgb(0 0 0 / 0.7) 0, rgb(0 0 0 / 0) 24%), linear-gradient(90deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.92) 50%, rgb(0 0 0 / 0.84) 60%, rgb(0 0 0 / 0.6) 70%, rgb(0 0 0 / 0) 90%); } /* mais denso atrás do texto (20/10): um logo ou um letreiro do reel some ali */ .abertura__texto { position: relative; z-index: 3; padding: calc(var(--topo-h) + 48px) 0 136px; display: grid; gap: 20px; justify-items: start; } .abertura__titulo { font: var(--cx-peso-titulo) clamp(44px, 7.4vw, 120px) / 0.98 var(--cx-fonte-titulo); letter-spacing: -0.02em; color: var(--cx-branco); max-width: 12ch; } .abertura__texto .sub { color: var(--cx-branco); max-width: 34ch; } .abertura__texto .acoes { margin-top: 12px; } .abertura__controles { position: absolute; right: max(var(--margem), calc(32px + var(--cx-flutuante))); bottom: 36px; z-index: 6; display: flex; gap: 4px; } /* nunca embaixo do disco do WhatsApp */ /* botão só de ícone: 38 px de desenho (traço branco fino, preto a 40%) dentro de 44 px de toque */ .ctl-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cx-branco); cursor: pointer; } .ctl-ico::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 0.7); background: rgb(0 0 0 / 0.4); transition: border-color var(--cx-dur-1), background-color var(--cx-dur-1); } .ctl-ico:hover::before { border-color: var(--cx-branco); background: rgb(0 0 0 / 0.6); } .ctl-ico .ico { position: relative; width: 18px; height: 18px; } .fechar .ico { width: 20px; height: 20px; } #ctl-pausa.is-parado .ctl__pausa, #ctl-pausa:not(.is-parado) .ctl__play { display: none; } #ctl-som.is-som .ctl__mudo, #ctl-som:not(.is-som) .ctl__ondas { display: none; } /* o selo: carimbo só em traço, sobre a curva da emenda com Como trabalhamos (lote 3) (o código põe o centro na curva: --selo-y); o anel gira só com a rolagem; abre o reel em modo cinema */ .selo { position: absolute; left: 50%; bottom: 0; margin-bottom: var(--selo-y, 0px); z-index: 5; width: var(--selo, 176px); height: var(--selo, 176px); transform: translate(-50%, 50%); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cx-branco); cursor: pointer; } .selo .carimbo__svg { width: 100%; height: 100%; overflow: visible; } .selo__play { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; transition: stroke var(--cx-dur-1), fill var(--cx-dur-1); } .selo__tracos { fill: none; stroke: currentColor; stroke-width: 7; stroke-dasharray: 2.5 13.2; opacity: 0.9; } /* sem texto no anel abaixo de 300 px: os traços mostram o giro */ .selo__metade--baixo { color: var(--cx-grafite); } /* a metade que fica sobre o cinza de Como trabalhamos (lote 3) */ .selo:hover .selo__metade--cima .selo__play, .selo:focus-visible .selo__metade--cima .selo__play { stroke: var(--cx-vermelho-400); } .selo:hover .selo__metade--baixo .selo__play, .selo:focus-visible .selo__metade--baixo .selo__play { stroke: var(--cx-vermelho); } .selo:focus-visible { outline-color: var(--cx-vermelho); } /* o anel de foco aparece no preto e no branco */ @media (max-width: 1023px) { .abertura { align-items: flex-end; } .abertura__veu { background: linear-gradient(180deg, rgb(0 0 0 / 0.72) 0, rgb(0 0 0 / 0) 160px), linear-gradient(0deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 40%); } /* no celular, o véu forte acompanha o bloco de texto (em qualquer altura de tela) e some 120 px acima dele */ .abertura__texto::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--margem)); right: calc(-1 * var(--margem)); top: -120px; bottom: 0; pointer-events: none; background: linear-gradient(0deg, rgb(0 0 0 / 0.92) 0, rgb(0 0 0 / 0.92) calc(100% - 120px), rgb(0 0 0 / 0) 100%); } .abertura__quadro { --foco-x: 58%; } /* no celular, em pé: o ponto de foco do vídeo e da capa (lote 5: a capa nova, os técnicos na subestação, foi conferida em 58, 68 e 74%; o 58% fica) */ .abertura__texto { padding: calc(var(--topo-h) + 24px) 0 104px; gap: 14px; } .abertura__titulo { font-size: clamp(42px, 12.4vw, 64px); } .abertura__texto .acoes { width: 100%; gap: 8px; margin-top: 6px; } .selo { --selo: 116px; left: 16px; right: auto; transform: translateY(50%); margin-bottom: var(--selo-y, calc(0.38 * var(--curva-h-meio))); } /* à esquerda: o canto direito é do disco do WhatsApp */ .abertura__controles { right: calc(32px + var(--cx-flutuante)); bottom: 8px; } /* entre o selo e o disco, na faixa escura abaixo do texto */ } /* ---------- 2 · trabalhos: as playlists, um painel alto por categoria, de ponta a ponta e sem vão; tocar abre a sala ---------- */ .trabalhos { justify-content: center; } .cabeca--centro { justify-items: center; text-align: center; } .cabeca--centro .rotulo::before { margin-inline: auto; } .trabalhos .cabeca { margin-bottom: 40px; } .carrossel--playlists { --vao: 0px; --w: clamp(260px, 22.5vw, 380px); } .carrossel--playlists .carrossel__trilho { gap: 0; padding: 0; margin: 0; scroll-padding-inline: 0; } /* a faixa que anda sozinha (operador, 20/10): a janela corta, o trilho anda só por transform; o dedo rola a página na vertical e arrasta a faixa */ .carrossel--playlists.is-esteira { overflow-x: hidden; overflow-x: clip; } .carrossel--playlists.is-esteira .carrossel__trilho { width: max-content; overflow: visible; scroll-snap-type: none; touch-action: pan-y; will-change: transform; backface-visibility: hidden; cursor: grab; } .carrossel--playlists.is-esteira .carrossel__item { scroll-snap-align: none; } .carrossel--playlists.is-arrastando .carrossel__trilho { cursor: grabbing; user-select: none; } .carrossel--playlists.is-arrastando .playlist { pointer-events: none; } /* arrastando, o hover dos painéis não pisca */ .trabalhos .carrossel__controle { justify-content: center; } /* só o pausar (ou, com "reduzir movimento", as setas), no centro como o título; sem o "Ver todos os trabalhos" (operador, 20/10) */ .trabalhos .carrossel__navega { margin-left: 0; } .playlist { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--cx-grafite); color: var(--cx-branco); text-align: left; cursor: pointer; } .playlist__foto picture, .tv__capa picture { display: contents; } /* as capas do YouTube vêm em (AVIF + WebP): a moldura vale para a de dentro */ .playlist__foto, .playlist__foto img, .playlist__foto .provisoria { position: absolute; inset: 0; width: 100%; height: 100%; } .playlist__foto img { object-fit: cover; -webkit-user-drag: none; user-select: none; transition: transform var(--cx-dur-3) var(--cx-curva-saida); } .playlist::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.8) 20%, rgb(0 0 0 / 0) 50%); pointer-events: none; } /* o véu do nome */ .playlist__texto { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; display: grid; gap: 6px; } .playlist__texto b { font: var(--cx-peso-titulo) clamp(22px, 1.8vw, 28px) / 1.15 var(--cx-fonte-titulo); } .playlist:focus-visible { outline-offset: -6px; } .playlist__icone { position: absolute; left: 50%; top: 42%; z-index: 1; width: 72px; height: 72px; transform: translate(-50%, -50%); color: var(--cx-vermelho-400); } /* o painel sem foto: o ícone oficial da categoria, sobre a Ondas grafite */ @media (hover: hover) and (pointer: fine) { .carrossel--playlists:not(.is-esteira) .playlist:hover .playlist__foto img { transform: scale(1.04); } } .carrossel--playlists .is-sob-mouse .playlist__foto img { transform: scale(1.04); } /* a faixa andando: o painel debaixo do mouse */ .trabalhos .carrossel__controle { margin-top: 28px; } /* a sala usa os cartões do catálogo escondido: "Mais de [categoria]" */ .fileira__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .fileira__titulo { font: var(--cx-peso-titulo) 22px / 1.2 var(--cx-fonte-titulo); color: var(--cx-titulo); } .sala__mais { --vao: 16px; --w: calc((100% - 3 * 16px) / 4); } .tv { display: grid; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--cx-branco); text-align: left; cursor: pointer; } .tv__capa { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--cx-grafite); transition: transform var(--cx-dur-2) var(--cx-curva-saida); } .tv__capa img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; } /* capa provisória: o módulo oficial da Ondas (tom-escuro) com o nome do trabalho, até chegarem as capas de verdade */ .provisoria { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px 18px; text-align: left; } .provisoria__nome { max-width: 16ch; font: var(--cx-peso-titulo) 18px / 1.2 var(--cx-fonte-titulo); letter-spacing: -0.005em; color: var(--cx-branco); text-wrap: balance; } .tv__texto { display: grid; gap: 4px; padding-inline: 2px; } .tv__texto b { font: var(--cx-peso-titulo) 16px / 1.3 var(--cx-fonte-titulo); } .tv__texto small { font: 500 14px / 1.3 var(--fonte-texto); color: var(--cx-cinza-300); } @media (hover: hover) and (pointer: fine) { .tv__texto small { opacity: 0; transition: opacity var(--cx-dur-2); } .tv:hover .tv__capa, .tv:focus-visible .tv__capa { transform: scale(1.04); } .tv:hover .tv__texto small, .tv:focus-visible .tv__texto small { opacity: 1; } } @media (min-width: 1024px) { /* folga no trilho para o cartão que cresce 4% no hover não sair cortado */ .sala__mais .carrossel__trilho { padding: 10px 8px; margin: -10px -8px; scroll-padding-inline: 8px; } } @media (max-width: 1023px) { .trabalhos .cabeca { margin-bottom: 24px; } .carrossel--playlists { --w: min(300px, 68vw); } .carrossel--playlists .carrossel__trilho { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .fileira__titulo { font-size: 20px; } .sala__mais { --w: min(260px, 66vw); --vao: 12px; } .fileira__cabeca .carrossel__conta { display: none; } /* como nos aplicativos de streaming: a beirada do próximo cartão já mostra que tem mais */ } /* ---------- 2 · o que fazemos (branco): 3 cartões com a foto de portfólio de ponta a ponta, dissolvendo no preto (operador, 20/10), o número, o recorte curvo no canto com o botão redondo; embaixo, a barra-pílula. As luzes: o set "liga" os cartões um a um quando a seção aparece ---------- */ .o-que .cabeca { margin-bottom: 48px; } .servicos { --vao: 24px; } .servico { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: clamp(520px, 40vw, 600px); padding: 32px 28px 28px; border-radius: var(--r2); color: var(--cx-branco); --cx-foco: var(--cx-grafite); --cx-titulo: var(--cx-branco); --cx-link: var(--cx-branco); --cx-link-sublinhado: var(--cx-vermelho-400); --cx-link-hover: var(--cx-vermelho-400); } .servico::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--servico-fundo, var(--cx-preto)); /* o fundo do cartão com o encaixe côncavo no canto (raio dos anéis) */ -webkit-mask: radial-gradient(circle at calc(100% - 34px) calc(100% - 34px), transparent 41px, #000 42px); mask: radial-gradient(circle at calc(100% - 34px) calc(100% - 34px), transparent 41px, #000 42px); } .servico__topo { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 4px; } .servico__icone { width: 60px; height: 60px; color: var(--cx-vermelho-400); } .servico__num { font: var(--cx-peso-titulo) 44px / 1 var(--cx-fonte-titulo); letter-spacing: -0.02em; color: var(--cx-branco); } .servico__num i { font-style: normal; color: var(--cx-vermelho); } .servico__frase { order: -1; max-width: 30ch; font: var(--cx-peso-rotulo) 14px / 1.35 var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-rotulo); text-transform: uppercase; color: var(--cx-branco); text-wrap: balance; } /* a frase, no rótulo pequeno em cima (operador, 20/10: "inverta com a categoria"); sem pílula: as frases são longas; no celular quebra em 2 linhas equilibradas */ /* a CATEGORIA em destaque (operador, 20/10: "quero o destaque grande na categoria"): Fraunces itálica 600, um pouco maior que o título de antes (1,3 do h3: palavras curtas), no vermelho --servico-titulo, medido no pior ponto das 3 fotos sobre o véu (LEIA-PRIMEIRO); no cartão 03, sobre a parte preta */ .servico__titulo { max-width: 15ch; font-family: var(--cx-fonte-destaque); font-style: italic; font-weight: var(--cx-peso-destaque); font-size: calc(var(--cx-tam-h3) * 1.3); line-height: 1.05; letter-spacing: 0; color: var(--servico-titulo, var(--cx-vermelho-400)); } .servico__texto { font: 300 var(--cx-tam-texto) / var(--cx-entrelinha-texto) var(--fonte-texto); color: var(--cx-cinza-100); max-width: 34ch; text-wrap: pretty; } .servico__foto { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: var(--cx-preto); -webkit-mask: radial-gradient(circle at calc(100% - 34px) calc(100% - 34px), transparent 41px, #000 42px); mask: radial-gradient(circle at calc(100% - 34px) calc(100% - 34px), transparent 41px, #000 42px); } .servico__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); -webkit-user-drag: none; user-select: none; transition: transform var(--cx-dur-3) var(--cx-curva-saida); } /* o véu (lote 2; operador, 20/10: "o gradiente está muito escuro até o meio da foto. Quero algo mais suave, que dê para enxergar a foto por completo, sem perder a legibilidade do texto"): só no terço de baixo, até ~42% da altura, do transparente a 78% de preto no pé, numa curva suave (sem faixa); no alto, nenhum véu desde o lote 3 (o ícone e o número têm sombra própria); atrás do bloco de texto, um véu localizado em degradê suave (.servico__corpo::before); e a sombra leve no texto. O meio e o topo da foto ficam limpos. O contraste do texto foi medido no pior ponto das 3 fotos (lote 2, no LEIA-PRIMEIRO) */ .servico__veu { position: absolute; inset: 0; transition: opacity 250ms var(--cx-curva-suave); /* o véu do alto (atrás do ícone e do número) saiu (operador, 20/10: "remova o gradiente de cima"): o topo da foto fica limpo, nas cores naturais; o ícone e o número se seguram com a sombra própria (abaixo) */ background: /* embaixo: um véu só, LONGO e contínuo (operador, 20/10: "deixe o gradiente preto mais longo, não quero essa ideia de que o gradiente está quebrando"): transparente a 32% do alto, sobe em curva (10 paradas, sem degrau) até o alto do bloco de texto (--corpo) e vai ao preto puro no pé */ linear-gradient(0deg, rgb(0 0 0) 0, rgb(0 0 0 / 0.9) calc(var(--corpo, 44%) * 0.5), rgb(0 0 0 / var(--veu-texto, 0.76)) var(--corpo, 44%), rgb(0 0 0 / 0.58) calc(var(--corpo, 44%) + (68% - var(--corpo, 44%)) * 0.15), rgb(0 0 0 / 0.42) calc(var(--corpo, 44%) + (68% - var(--corpo, 44%)) * 0.3), rgb(0 0 0 / 0.28) calc(var(--corpo, 44%) + (68% - var(--corpo, 44%)) * 0.45), rgb(0 0 0 / 0.17) calc(var(--corpo, 44%) + (68% - var(--corpo, 44%)) * 0.6), rgb(0 0 0 / 0.08) calc(var(--corpo, 44%) + (68% - var(--corpo, 44%)) * 0.75), rgb(0 0 0 / 0.025) calc(var(--corpo, 44%) + (68% - var(--corpo, 44%)) * 0.9), rgb(0 0 0 / 0) 68%); } /* --corpo: do pé do cartão ao alto do bloco de texto, mais 12 px (o código mede, ao carregar e ao mudar a largura): o preto forte fica só atrás do texto */ .servico__frase, .servico__titulo, .servico__texto, .servico__num { text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); } /* sem o véu do alto (operador, 20/10: "remova o gradiente de cima"), o número e o ícone se seguram com a sombra própria, sem faixa: um halo escuro e justo no traço e uma sombra macia em volta. A leve de antes não bastava no céu da 01 (ícone a 1,5:1). Medido no halo de 1 a 3 px em volta do traço, nas 3 fotos, em 1440 e 390: o número a 3,5:1 ou mais no pior ponto; o ícone a 4,2:1 ou mais na mediana (3:1 no pior ponto, o céu da 01) */ .servico__num { text-shadow: 0 0 2px #000, 0 0 6px rgb(0 0 0 / 0.8), 0 2px 18px rgb(0 0 0 / 0.6); } .servico__icone { filter: drop-shadow(0 0 0.8px #000) drop-shadow(0 0 0.8px #000) drop-shadow(0 0 2px #000) drop-shadow(0 0 6px rgb(0 0 0 / 0.85)) drop-shadow(0 2px 14px rgb(0 0 0 / 0.5)); } /* as luzes: um halo suave e circular, quente-neutro, vindo de cima (o refletor do set), e a camada preta que "apaga" o cartão */ .servico__foto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 50% -8%, rgb(255 244 230 / 0.26), rgb(255 244 230 / 0) 70%); opacity: 0; transition: opacity 250ms var(--cx-curva-suave); pointer-events: none; } .servico__luz { position: absolute; inset: 0; z-index: 3; background: var(--cx-preto); opacity: 0; pointer-events: none; } .servico__foto::after { z-index: 1; } /* o halo: entre a foto e o véu */ .servico__veu { z-index: 2; } .servico__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; } .carrossel--servicos .servico:nth-child(1) { --foco: 50% 50%; } /* o ponto de foco de cada foto no cartão alto: o assunto não fica atrás do texto */ .carrossel--servicos .servico:nth-child(2) { --foco: 42% 50%; } /* o público e o palco (lote 2): o cantor um pouco à esquerda do centro */ .carrossel--servicos .servico:nth-child(3) { --foco: 50% 26%; --veu-texto: 0.88; } /* o véu mais firme só atrás do texto: o título vermelho fica no preto, nunca sobre o verde das bananas (CIA, 20/10) */ .servico__link { display: block; flex: none; width: 100%; min-height: 40px; } /* sem texto (operador, 20/10): a faixa de baixo guarda o recorte; o alvo de toque é o cartão inteiro */ .servico__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* o cartão inteiro é este link (um só para o leitor de tela) */ .servico__link:focus-visible { outline: none; } .servico:has(.servico__link:focus-visible) { outline: 3px solid var(--cx-grafite); outline-offset: 4px; } .servico__botao { position: absolute; right: 4px; bottom: 4px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-vermelho); color: var(--cx-branco); transition: background-color var(--cx-dur-1), transform var(--cx-dur-2) var(--cx-curva-saida); pointer-events: none; } .servico__botao, .servico__botao .ico { transition: transform var(--cx-dur-2) var(--cx-curva-saida), background-color var(--cx-dur-1); } @media (hover: hover) and (pointer: fine) { .servico:hover .servico__botao { transform: scale(1.06); } .servico:hover .servico__botao .ico { transform: rotate(-45deg) translateX(3px); } } /* o círculo cresce um pouco e a seta desliza, sem pular */ .servico__botao .ico { width: 22px; height: 22px; transform: rotate(-45deg); } .servico:hover .servico__botao { background: var(--cx-vermelho-700); } @media (hover: hover) and (pointer: fine) { .servico:hover .servico__foto img { transform: scale(1.04); } } /* a barra-pílula de chamada: círculo vermelho com o ícone oficial, a frase e o link (no máximo 2 na página) */ .pilula { display: flex; align-items: center; gap: 12px 20px; margin-top: 40px; padding: 12px 28px 12px 12px; border-radius: var(--cx-raio-pilula); background: var(--cx-cinza-50); color: var(--cx-grafite); } .cx-cinza .pilula { background: var(--cx-branco); } .pilula__icone { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-vermelho); color: var(--cx-branco); } .pilula__icone .ico { width: 28px; height: 28px; } .pilula__frase { flex: 1; font: var(--cx-peso-titulo) 18px / 1.35 var(--cx-fonte-titulo); color: var(--cx-grafite); } .pilula__link { flex: none; } /* o link da pílula é o botão secundário (pílula de contorno), regra de botões de 20/10 */ /* a pílula preta (o convite para quem faz audiovisual, no fim da página): fundo preto, frase e botão em branco */ .pilula--preta { background: var(--cx-preto); color: var(--cx-branco); --cx-foco: var(--cx-branco); } .cx-cinza .pilula--preta { background: var(--cx-preto); } .pilula--preta .pilula__frase { color: var(--cx-branco); } .tambem { margin-top: 20px; } .tambem__lista { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 1023px) { .o-que .cabeca { margin-bottom: 28px; } .carrossel--servicos { --w: 86%; --vao: 12px; } .servico { padding: 28px 22px 24px; gap: 12px; } .servico__icone { width: 56px; height: 56px; } .servico__num { font-size: 38px; } .pilula { flex-wrap: wrap; border-radius: 28px; padding: 14px 18px 10px 14px; } .pilula__frase { flex: 1 1 calc(100% - 80px); } .pilula__link { margin-left: 68px; } .tambem__lista { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margem)); padding: 2px var(--margem) 4px; } .tambem__lista::-webkit-scrollbar { display: none; } } /* ---------- 4 · como trabalhamos (cinza): 3 etapas, foto 3:2, o fio vermelho liga os anéis ---------- */ .como { --fundo-ante: var(--cx-preto); } /* lote 3: vem logo depois da abertura */ .como__cabeca { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; } .etapas { --vao: 24px; } .etapa { position: relative; display: grid; align-content: start; } .etapa__foto { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; } .etapa__texto { position: relative; display: grid; gap: 8px; padding: 40px 8px 0 4px; } .etapa__texto .pequeno { max-width: 32ch; } .anel { position: absolute; top: -22px; left: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cx-vermelho); background: var(--cx-cinza-50); display: grid; place-items: center; } .anel .ico { width: 22px; height: 22px; color: var(--cx-vermelho); } .etapa:not(:last-child) .etapa__texto::before { content: ""; position: absolute; top: -0.75px; left: 60px; right: calc(-1 * var(--vao)); height: 1.5px; background: var(--cx-vermelho); } .etapa:not(:first-child) .etapa__texto::after { content: ""; position: absolute; top: -0.75px; left: 0; width: 16px; height: 1.5px; background: var(--cx-vermelho); } .compara { background: var(--cx-grafite); } .compara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .compara__antes { clip-path: inset(0 calc(100% - var(--p)) 0 0); } .compara__legenda { position: absolute; top: 10px; left: 72px; right: 4px; display: flex; justify-content: space-between; gap: 12px; font: var(--cx-peso-rotulo) 14px / 1.25 var(--cx-fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-texto-2); } /* embaixo da foto, nas pontas: nada de texto em cima da imagem */ .compara__faixa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; touch-action: pan-y; } .compara__barra { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: var(--cx-branco); transform: translateX(-50%); z-index: 3; pointer-events: none; } .compara__barra i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cx-branco); background: var(--cx-preto); transform: translate(-50%, -50%); } .compara__barra i::before, .compara__barra i::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--cx-branco); border-left: 2px solid var(--cx-branco); } .compara__barra i::before { left: 12px; transform: translateY(-50%) rotate(-45deg); } .compara__barra i::after { right: 12px; transform: translateY(-50%) rotate(135deg); } .compara__faixa:focus-visible ~ .compara__barra i { outline: 3px solid var(--cx-branco); outline-offset: 0; box-shadow: 0 0 0 6px var(--cx-preto); } /* anel duplo (branco e preto): aparece sobre qualquer foto */ @media (max-width: 1023px) { .como__cabeca { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 32px; } .carrossel--etapas { --w: 84%; --vao: 14px; } } /* ---------- 5 · o cariri (Fêmea 800): as fotos 3:2 num carrossel; o botão do banco vem depois delas ---------- */ .cariri { padding-bottom: 0; justify-content: flex-start; isolation: isolate; } /* o detalhe do fundo (operador, 20/10: "bem na opacidade, clarinho, apenas como detalhe" e, depois, "faltou a chapada de fundo"): a Chapada do Araripe em duotone no verde, a 30%, no ALTO da seção, com a névoa do céu atrás do título e o paredão à direita. Some só embaixo (onde entram as fotos). A sombra macia presa ao texto (.cabeca::before) segura o AA do rótulo e do título na Coroa sobre a névoa; o verde a 40% embaixo da foto deixa a Ondas mais fraca nessa área, para as duas não brigarem */ .cariri__fundo { position: absolute; top: 0; left: 50%; width: min(100%, 1500px); aspect-ratio: 2000 / 1026; transform: translateX(-50%); z-index: -1; overflow: hidden; pointer-events: none; background: rgb(63 69 23 / 0.4); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fotos-y, 420px) - 150px), transparent var(--fotos-y, 420px)), linear-gradient(90deg, transparent 0, #000 10%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fotos-y, 420px) - 150px), transparent var(--fotos-y, 420px)), linear-gradient(90deg, transparent 0, #000 10%, #000 88%, transparent 100%); mask-composite: intersect; } /* a foto na largura da seção, ancorada no topo e sumindo para o verde liso antes das fotos (o código mede --fotos-y, o alto da faixa das fotos). AMPLIADA (operador, 20/10: "quero que cresça a imagem da Chapada até o branco ficar por trás do nome Cariri"): 1,5x a partir da ponta direita, a 30% da altura; a névoa clara do céu fica atrás do título e o paredão continua à direita. Acima de 1500 px, a largura para em 1500 e as pontas somem em degradê; até 1500, a foto vai de ponta a ponta (o degradê das pontas escurecia a borda atrás do "O"). Espelhada no arquivo, em duotone, a 30% */ .cariri__fundo picture { display: contents; } .cariri__fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; transform: scale(1.5); transform-origin: 100% 30%; } @media (max-width: 1500px) { .cariri__fundo { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fotos-y, 420px) - 150px), transparent var(--fotos-y, 420px)); mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fotos-y, 420px) - 150px), transparent var(--fotos-y, 420px)); } } /* o AA sobre a névoa: uma sombra verde macia presa ao texto (não à foto; a caixa passa das bordas da seção, que a máscara da curva corta, para não fazer degrau), forte no rótulo pequeno (4,5:1), média no título (3:1 da letra grande) e leve no nome da ave; em volta e à direita do nome, a névoa aparece inteira. Medido no ponto mais claro (98º percentil, sem sombra no texto) */ .cariri .cabeca { position: relative; } .cariri .cabeca::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -300px; left: -100vw; right: 0; bottom: -40px; background: radial-gradient(ellipse 420px 180px at calc(100vw + 91px) 320px, rgb(63 69 23 / 0.92) 0, rgb(63 69 23 / 0.9) 28%, rgb(63 69 23 / 0.76) 42%, rgb(63 69 23 / 0.68) 55%, rgb(63 69 23 / 0.45) 68%, rgb(63 69 23 / 0.22) 82%, rgb(63 69 23 / 0.08) 92%, rgb(63 69 23 / 0) 100%), radial-gradient(ellipse 480px 120px at calc(100vw + 220px) 470px, rgb(63 69 23 / 0.3) 0, rgb(63 69 23 / 0.28) 45%, rgb(63 69 23 / 0.12) 75%, rgb(63 69 23 / 0) 100%); } @media (max-width: 767px) { /* no celular, a foto 2,7x a largura da tela, com a névoa atrás do título e o paredão na ponta direita; a seção leva a foto até o alto das fotos */ .cariri__fundo { left: 0; right: 0; width: 100%; height: var(--fotos-y, 420px); aspect-ratio: auto; transform: none; } .cariri__fundo img { inset: auto; top: -10px; left: -120%; width: 270%; height: auto; max-width: none; object-fit: fill; transform: none; } .cariri .cabeca::before { top: -300px; left: -100vw; right: calc(-1 * var(--margem)); bottom: -30px; background: radial-gradient(ellipse 300px 170px at calc(100vw + 91px) 317px, rgb(63 69 23 / 0.92) 0, rgb(63 69 23 / 0.9) 28%, rgb(63 69 23 / 0.76) 42%, rgb(63 69 23 / 0.68) 55%, rgb(63 69 23 / 0.45) 68%, rgb(63 69 23 / 0.22) 82%, rgb(63 69 23 / 0.08) 92%, rgb(63 69 23 / 0) 100%), radial-gradient(ellipse 320px 90px at calc(100vw + 125px) 465px, rgb(63 69 23 / 0.3) 0, rgb(63 69 23 / 0.28) 45%, rgb(63 69 23 / 0.12) 75%, rgb(63 69 23 / 0) 100%); } } .cariri .cabeca { margin-bottom: 0; } .cariri .sub { color: var(--cx-branco); max-width: 44ch; } .cariri .sub .destaque--ave { font-size: max(calc(var(--cx-destaque-escala) * 1em), 24px); color: var(--cx-coroa-claro); white-space: nowrap; } /* nunca abaixo de 24 px (letra grande, 3:1), como os destaques de Quem somos */ /* o nome da ave em destaque (operador, 20/10), na Coroa clara (o tom AA do rótulo), sem quebrar nos hífens */ .cariri__faixa { padding: 48px 0 var(--pad-baixo); } /* sem padronagem: a emenda inclinada é o acento desta tela */ .carrossel--cariri { --vao: 24px; --w: calc((100% - 2 * 24px) / 3); } .acervo { display: grid; gap: 12px; } .acervo .foto { aspect-ratio: 3 / 2; cursor: zoom-in; background: var(--cx-verde-700); } .acervo .foto img { transition: transform var(--cx-dur-3) var(--cx-curva-saida); -webkit-user-drag: none; user-select: none; } .carrossel--cariri:not(.is-esteira) .acervo .foto:hover img, .acervo .foto:focus-visible img, .carrossel--cariri .is-sob-mouse .acervo .foto img { transform: scale(var(--cx-zoom-foto)); } .acervo figcaption { font: var(--cx-peso-rotulo) 14px / 1.35 var(--cx-fonte-titulo); letter-spacing: 0.04em; color: var(--cx-branco); } .cx-cariri .carrossel__conta { color: var(--cx-verde-100); } .cx-cariri .carrossel__seta { color: var(--cx-branco); background: var(--v3-femea-800); } .cariri .carrossel__controle .bt { order: -1; } /* o banco de imagens vem depois das fotos (o botão saiu por enquanto, operador, 20/10; sem ele, a linha dos controles some e o vão até Quem somos fica o padrão) */ .cariri .carrossel__controle .bt .seta { color: var(--cx-coroa-claro); } /* a seta do botão do banco na Coroa: o mesmo acento do título, discreto */ @media (max-width: 1023px) { .cariri__faixa { padding: 28px 0 var(--pad-baixo); } .carrossel--cariri { --w: min(340px, 86vw); --vao: 12px; } } /* ---------- 6 · quem somos (preto com a Ondas): rótulo e título centralizados; cartões altos com a foto inteira e o nome sobre o véu ---------- */ .quem { justify-content: center; } /* sem o botão "Ver os bastidores" (operador, 20/10: "por enquanto, retire"), o rótulo e o título ficam no meio da altura do texto, à esquerda: sem o vão embaixo do título. Com o botão de volta (no 2c-quem.html), o :has() devolve a disposição de antes (o topo da frase alinhado com o do título) */ .quem__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); justify-content: space-between; gap: 24px 64px; align-items: center; margin-bottom: 56px; } .quem__titulos { display: grid; gap: 16px; justify-items: start; } .quem__titulos .bt { margin-top: 12px; } .quem__texto { display: grid; gap: 16px; justify-items: start; } .quem__cabeca:has(.quem__titulos .bt) { align-items: start; } .quem__cabeca:has(.quem__titulos .bt) .quem__texto { padding-top: 34px; } /* com o botão: o topo da frase de abertura alinha com o topo do título (abaixo do rótulo) */ .quem__texto .sub { color: var(--cx-branco); max-width: 30ch; } .quem__texto .sub .destaque { font-size: max(calc(var(--cx-destaque-escala) * 1em), 24px); } /* "criativas" e "comprometidas" (operador, 20/10), no vermelho dos títulos sobre o preto (3,82:1): nunca abaixo de 24 px, para valer o AA de letra grande (no celular a frase tem 20 px) */ .quem__texto .texto { color: var(--cx-cinza-100); max-width: 55ch; } .rotulo--simbolo { display: inline-flex; align-items: center; gap: 10px; } .rotulo--simbolo::before { display: none; } .rotulo__simbolo { width: 22px; height: 22px; color: var(--cx-vermelho); } .carrossel--pessoas { --vao: 20px; --w: clamp(240px, 23vw, 340px); } .carrossel--pessoas .carrossel__trilho { padding: 8px calc(50% - var(--w) / 2); margin: -8px 0; scroll-padding-inline: calc(50% - var(--w) / 2); } .carrossel--pessoas .carrossel__item { scroll-snap-align: center; } .pessoa { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--cx-branco); } .pessoa--grupo, .pessoa--falta { cursor: default; } .pessoa__foto { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r2); overflow: hidden; background: var(--cx-grafite); transition: box-shadow var(--cx-dur-2) var(--cx-curva-saida); } .pessoa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; transition: opacity var(--cx-dur-3) var(--cx-curva-saida); } .pessoa__acao { opacity: 0; } .pessoa:hover .pessoa__acao, .pessoa:focus-visible .pessoa__acao, .pessoa[aria-pressed="true"] .pessoa__acao { opacity: 1; } .pessoa__foto.falta { display: grid; border-radius: var(--r2); } .pessoa__veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.78) 18%, rgb(0 0 0 / 0) 46%); transition: background var(--cx-dur-2); } .pessoa__legenda { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; font: var(--cx-peso-titulo) 18px / 1.3 var(--cx-fonte-titulo); color: var(--cx-branco); } .pessoa .credito { z-index: 2; } /* os BASTIDORES (operador, lote 2: "o foco não é na pessoa individual, mas no bastidor, a equipe trabalhando, estrutura" e "Imagem fica com baixa saturação; ao passar o mouse em cima, ou no celular, ao entrar na tela, ele acende nas cores originais"). Só filter: pouca cor e um leve escurecido; acende em ~400 ms com o mouse ou o foco do teclado (no computador) e, no celular, no cartão do centro quando ele está na tela (o código marca .is-acesa, pelo IntersectionObserver). Com "reduzir movimento", a troca é instantânea. Sem nome e sem legenda: a foto é o cartão. */ .bastidor { cursor: default; } .bastidor .pessoa__foto img { filter: saturate(0.25) brightness(0.82); transition: filter 400ms var(--cx-curva-suave); } .bastidor.is-acesa .pessoa__foto img, .carrossel--pessoas .is-sob-mouse .bastidor .pessoa__foto img { filter: none; } @media (hover: hover) and (pointer: fine) { .carrossel--pessoas:not(.is-esteira) .bastidor:hover .pessoa__foto img { filter: none; } } @media (prefers-reduced-motion: reduce) { .bastidor .pessoa__foto img { transition: none; } } .quem .carrossel__controle { justify-content: center; } .quem .carrossel__navega { margin-left: 0; } @media (max-width: 1023px) { .quem__cabeca { grid-template-columns: 1fr; margin-bottom: 28px; gap: 16px; } .quem__texto { padding-top: 0; gap: 12px; } .carrossel--pessoas { --w: min(250px, 66vw); --vao: 12px; } .carrossel--pessoas .carrossel__trilho { margin-inline: 0; padding-inline: calc(50% - var(--w) / 2); scroll-padding-inline: calc(50% - var(--w) / 2); } } /* ---------- 7 · contratar (vermelho com a Ondas tom sobre tom): a frase do fechamento e, num painel branco, as perguntas frequentes ---------- */ .contratar { justify-content: flex-start; } .contratar__texto { display: grid; gap: 20px; justify-items: start; margin-bottom: 48px; } .faq-painel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--r2); background: var(--cx-branco); color: var(--cx-grafite); --cx-texto: var(--cx-grafite); --cx-texto-2: var(--cx-cinza-600); --cx-titulo: var(--cx-grafite); --cx-rotulo: var(--cx-vermelho); --cx-fio: var(--cx-vermelho); --cx-foco: var(--cx-grafite); --cx-link: var(--cx-grafite); --cx-link-sublinhado: var(--cx-vermelho); --cx-link-hover: var(--cx-vermelho-700); --cx-destaque: var(--cx-vermelho); } .faq { display: grid; gap: 24px; justify-items: start; min-width: 0; } .faq > * { width: 100%; } .faq > .acoes, .faq > .link { width: auto; } .faq__lista { display: grid; gap: 12px; } .faq__item { border: 1px solid var(--cx-cinza-100); border-radius: 20px; background: var(--cx-branco); } .faq__q { margin: 0; } .faq__pergunta { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 12px 20px 12px 12px; border: 0; border-radius: 20px; background: none; text-align: left; cursor: pointer; font: var(--cx-peso-titulo) 18px / 1.3 var(--cx-fonte-titulo); color: var(--cx-grafite); } .faq__sinal { flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--cx-preto); transition: background-color var(--cx-dur-1); } .faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--cx-branco); transform: translate(-50%, -50%); } .faq__sinal::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--cx-dur-2) var(--cx-curva-saida); } .faq__pergunta[aria-expanded="true"] { color: var(--cx-vermelho); } .faq__pergunta[aria-expanded="true"] .faq__sinal { background: var(--cx-vermelho); } .faq__pergunta[aria-expanded="true"] .faq__sinal::after { transform: translate(-50%, -50%) rotate(0deg); } /* o "+" vira "−" */ .faq__resposta { padding: 0 20px 18px 68px; } .faq__resposta p { font: 300 var(--cx-tam-texto) / 1.55 var(--fonte-texto); color: var(--cx-cinza-600); max-width: 52ch; } .faq .acoes { gap: 12px; } .faq .bt--linha { color: var(--cx-grafite); } .link--form { min-height: var(--cx-alvo-min); display: inline-flex; align-items: center; font: 300 18px / 1.3 var(--fonte-texto); color: var(--cx-grafite); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .contratar__abre { display: inline-flex; } .contratar__monte { position: relative; display: none; } .contratar.is-monte .contratar__monte { display: block; } /* a foto da pessoa, recortada num arco da geometria dos anéis, com o anel vermelho atrás e o cartão flutuante */ .faq__foto { position: relative; margin: 0; aspect-ratio: 5 / 6; } .faq__arco { position: absolute; top: 0; right: 0; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 14px solid var(--cx-vermelho); } .faq__recorte { position: absolute; left: 4%; bottom: 6%; width: 72%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px var(--r2) var(--r2); background: var(--cx-cinza-50); } .faq__recorte picture { display: contents; } .faq__recorte img { width: 100%; height: 100%; object-fit: cover; } .faq__cartao { position: absolute; right: 2%; bottom: 0; display: inline-flex; align-items: center; gap: 10px; max-width: 70%; padding: 14px 18px; border-radius: var(--r); background: var(--cx-preto); color: var(--cx-branco); font: var(--cx-peso-titulo) 16px / 1.3 var(--cx-fonte-titulo); } .faq__cartao .ico { width: 24px; height: 24px; color: var(--cx-vermelho-400); } .monte { position: relative; display: grid; gap: 20px; padding: 28px; margin-top: 8px; border-radius: var(--r); border: 1px solid var(--cx-cinza-100); background: var(--cx-branco); --cx-texto: var(--cx-grafite); --cx-texto-2: var(--cx-cinza-600); --cx-titulo: var(--cx-grafite); --cx-foco: var(--cx-grafite); color: var(--cx-grafite); } .monte__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .monte__conta { font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-cinza-600); font-variant-numeric: tabular-nums; white-space: nowrap; } .monte__barra { display: block; height: 2px; background: var(--cx-cinza-100); overflow: hidden; } .monte__barra i { display: block; height: 100%; width: var(--passo, 33.3%); background: var(--cx-grafite); transition: width var(--cx-dur-2) var(--cx-curva-suave); } .monte__passo { display: grid; gap: 16px; align-content: start; } .opcoes { display: flex; flex-wrap: wrap; gap: 8px; } .opcao { position: relative; } .opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; } .opcao span { display: inline-flex; align-items: center; min-height: var(--cx-alvo-min); padding: 0 16px; border-radius: var(--cx-raio-pilula); border: 1px solid var(--cx-cinza-400); color: var(--cx-grafite); font: var(--cx-peso-menu) var(--cx-tam-botao-pequeno) / 1 var(--cx-fonte-titulo); cursor: pointer; transition: background-color var(--cx-dur-1), color var(--cx-dur-1); } .opcao input:checked + span { background: var(--cx-grafite); color: var(--cx-branco); border-color: var(--cx-grafite); } .opcao input:focus-visible + span { outline: 3px solid var(--cx-grafite); outline-offset: 3px; } .campos { display: grid; gap: 12px; } .campo { display: grid; gap: 6px; font: var(--cx-peso-rotulo) 14px / 1.25 var(--cx-fonte-titulo); letter-spacing: 0.04em; color: var(--cx-cinza-600); } .campo input { min-height: 48px; padding: 0 14px; border-radius: var(--cx-raio-campo); border: 1.5px solid var(--cx-borda-campo); background: var(--cx-branco); color: var(--cx-grafite); font: 300 18px / 1.3 var(--fonte-texto); width: 100%; } .monte__pe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .monte__previa { white-space: pre-line; padding: 12px 14px; border-radius: var(--cx-raio-campo); background: var(--cx-cinza-50); color: var(--cx-cinza-600); } .monte .bt--wa { --cx-acento: var(--cx-vermelho); } @media (max-width: 1023px) { .contratar__texto { gap: 16px; margin-bottom: 28px; } .contratar__texto .h1 { font-size: clamp(34px, 9.6vw, 44px); } .faq-painel { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; } .faq__foto { display: none; } /* no celular a foto sai: o título, o acordeão e o botão cabem melhor */ .faq__pergunta { font-size: 17px; gap: 12px; padding: 10px 14px 10px 10px; } .faq__resposta { padding: 0 16px 16px 62px; } .faq .acoes { width: 100%; gap: 8px; } .monte { padding: 22px 18px; } } /* ---------- rodapé (preto com a Ondas pequena): a faixa de bastidores do Instagram e 4 colunas; no celular, as colunas viram acordeão ---------- */ .rodape { position: relative; --pad-cima: calc(var(--pad-y) - var(--curva-h) / 2 - var(--curva-sob)); padding: var(--pad-cima) 0 0; color: var(--cx-texto); } /* o filme começa no mesmo respiro das outras seções */ /* ---------- a faixa do Instagram em ROLO DE FILME (operador, 20/10: "uma pequena identidade dessas fotos tipo em um rolo de filme"): a película preta atrás das fotos (sem a Ondas), os furinhos em cima e embaixo, o fio preto entre os quadros e a marca de borda pequena. Cada quadro desenha os seus furos (6 por quadro, na largura exata da célula): a fileira é contínua e anda no mesmo laço das fotos, sem emenda na volta. A marca de borda ("CODEC 2027 › 12", sem lugar) é decorativa: texto gerado, fora da leitura de tela. Limpo: sem grão, sem arranhão, sem sépia. ---------- */ .insta { --w: clamp(150px, 13.4vw, 220px); --fio-quadro: 6px; --furo-faixa: 28px; --marca-faixa: 14px; --furos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cg fill='%23262626'%3E%3Crect y='30' width='56' height='40' rx='12' x='22'/%3E%3Crect y='30' width='56' height='40' rx='12' x='122'/%3E%3Crect y='30' width='56' height='40' rx='12' x='222'/%3E%3Crect y='30' width='56' height='40' rx='12' x='322'/%3E%3Crect y='30' width='56' height='40' rx='12' x='422'/%3E%3Crect y='30' width='56' height='40' rx='12' x='522'/%3E%3C/g%3E%3C/svg%3E"); position: relative; overflow: hidden; overflow: clip; background: var(--cx-preto); } .insta__trilho { display: block; overflow: hidden; overflow: clip; } .insta__fita { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; } .insta__foto { position: relative; flex: 0 0 auto; display: block; box-sizing: content-box; width: var(--w); padding: var(--furo-faixa) calc(var(--fio-quadro) / 2) calc(var(--furo-faixa) + var(--marca-faixa)); background: var(--furos) 0 0 / 100% var(--furo-faixa) no-repeat, var(--furos) 0 calc(100% - var(--marca-faixa)) / 100% var(--furo-faixa) no-repeat; } .insta__foto::after { content: "CODEC 2027 › " attr(data-quadro); content: "CODEC 2027 › " attr(data-quadro) / ""; /* "›" (lote 2): o "▸" não existe na Nunito Sans e caía na letra do sistema */ position: absolute; left: calc(var(--fio-quadro) / 2 + 2px); bottom: 3px; font: 700 9px / 1 var(--cx-fonte-titulo); letter-spacing: 0.18em; color: #5C5C5C; white-space: nowrap; pointer-events: none; } /* a marca de borda (decorativa, abaixo dos furos de baixo) */ .insta__quadro { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--cx-grafite); } .insta__quadro img, .insta__quadro .provisoria { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; transition: filter var(--cx-dur-2); } .insta__ico { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); color: var(--cx-branco); opacity: 0; transition: opacity var(--cx-dur-2); } .insta__ico--fixo { opacity: 0.5; } @media (hover: hover) and (pointer: fine) { .insta__trilho:hover .insta__quadro img { filter: brightness(1.12); } .insta:not(.is-esteira) .insta__foto:hover .insta__ico, .insta .is-sob-mouse .insta__ico { opacity: 1; } } .insta__trilho:focus-visible { outline-offset: -4px; } .rodape__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding: 72px 0 56px; } .rodape__marca { display: grid; gap: 16px; align-content: start; justify-items: start; max-width: 320px; } .rodape__logo { height: 32px; width: auto; } .rodape__bio { display: grid; gap: 2px; } .rodape__bio span { white-space: nowrap; font: 300 16px / 1.45 var(--fonte-texto); color: var(--cx-cinza-300); } .rodape__bio span:first-child { font-weight: 500; color: var(--cx-branco); } /* a bio aprovada em 2 linhas, sem quebra no meio */ /* a pílula grafite com o botão redondo vermelho (a referência do rodapé): saiu do rodapé (operador, 20/10), o componente fica guardado para outro lugar */ .rodape__wa { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 320px; min-height: 52px; padding: 4px 4px 4px 20px; border-radius: var(--cx-raio-pilula); border: 1px solid #2A2A2A; background: #1A1A1A; color: var(--cx-branco); font: var(--cx-peso-botao) 16px / 1.2 var(--cx-fonte-titulo); transition: border-color var(--cx-dur-1); } .rodape__wa:hover { border-color: #3A3A3A; } .rodape__wa-bt { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-vermelho); transition: background-color var(--cx-dur-1); } .rodape__wa:hover .rodape__wa-bt { background: var(--cx-vermelho-700); } .rodape__wa-bt .ico { width: 20px; height: 20px; } .rodape__col summary { list-style: none; cursor: default; } .rodape__col summary::-webkit-details-marker { display: none; } .rodape h2 { font: var(--cx-peso-rotulo) 14px / 1.3 var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-rotulo); text-transform: uppercase; color: var(--cx-cinza-300); margin-bottom: 12px; } /* os títulos das colunas na escala do rótulo, menores que os links */ .rodape ul a { display: inline-flex; align-items: center; gap: 12px; min-height: var(--cx-alvo-min); font: var(--cx-peso-menu) var(--cx-tam-menu) / 1.2 var(--cx-fonte-titulo); color: var(--cx-cinza-100); } .rodape ul a { transition: color var(--cx-dur-1); } .rodape ul a:hover, .rodape ul a:focus-visible { color: var(--cx-branco); } /* sem sublinhado, nem no hover (regra do site): o texto vai ao branco puro */ .rodape__circ { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.32); display: grid; place-items: center; } .rodape__circ .ico { width: 18px; height: 18px; } .rodape__legal { padding: 18px 0 22px; background: #0B0B0B; color: var(--cx-cinza-300); } /* a faixa fina do CNPJ: um degrau acima do preto puro do rodapé */ .rodape__politica { padding: 14px 0; font-weight: 700; color: var(--cx-cinza-100); transition: color var(--cx-dur-1); } /* o padding em cima e embaixo do link em linha: 44 px de toque sem mudar a linha */ /* a política (CIA, lote 2): sem sublinhado; mais clara e em negrito que o resto da linha (link no meio do texto: a exceção de tamanho de alvo da WCAG 2.5.8) */ .rodape__politica:hover, .rodape__politica:focus-visible { color: var(--cx-branco); } @media (max-width: 767px) { .rodape__legal .rodape__sep { display: none; } .rodape__politica { display: table; margin: -2px 0 -12px; padding: 10px 0; } } /* no celular, a política numa linha só dela (o "·" não sobra no fim da linha) */ .sem-quebra { white-space: nowrap; } @media (max-width: 1023px) { .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rodape__marca { grid-column: 1 / -1; } } @media (max-width: 767px) { /* no celular: a pílula do WhatsApp em cima e as colunas em acordeão; o rodapé cabe numa tela */ .insta { --w: 34vw; --fio-quadro: 4px; --furo-faixa: 20px; --marca-faixa: 12px; } .insta__foto::after { font-size: 8px; letter-spacing: 0.16em; bottom: 2px; } .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 0 24px; } .rodape__marca { margin-bottom: 20px; } .rodape__col { border-top: 1px solid rgb(255 255 255 / 0.14); } .rodape__col summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; } .rodape__col summary::after { content: "+"; font: 300 26px / 1 var(--fonte-texto); color: var(--cx-branco); } .rodape__col[open] summary::after { content: "−"; } .rodape h2 { margin: 0; } .rodape__col ul { padding-bottom: 12px; } .rodape__col:not([open]) > ul { display: none; } /* fechada, a lista não conta na altura da página (o conteúdo escondido do
passava 20 px do rodapé e sobrava uma faixa embaixo) */ } /* ---------- flutuante e aviso (os únicos fixos, além do topo) ---------- */ .flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: var(--cx-camada-flutuante); width: var(--cx-flutuante); height: var(--cx-flutuante); border-radius: 50%; display: grid; place-items: center; background: var(--cx-flutuante-fundo); color: var(--cx-flutuante-icone); box-shadow: 0 0 0 var(--cx-flutuante-anel) var(--cx-flutuante-anel-cor), var(--cx-sombra-flutuante); transition: background-color var(--cx-dur-1), color var(--cx-dur-1), box-shadow var(--cx-dur-1); } .flutuante .ico { width: 28px; height: 28px; } .flutuante { transition: background-color var(--cx-dur-1), color var(--cx-dur-1), box-shadow var(--cx-dur-1), opacity var(--cx-dur-2), visibility var(--cx-dur-2); } .flutuante.is-recolhido { opacity: 0; visibility: hidden; } /* um botão de WhatsApp da própria seção já está na tela */ .flutuante.sobre-vermelho { background: var(--cx-branco); color: var(--cx-vermelho); --cx-flutuante-anel-cor: var(--cx-vermelho-700); } .aviso { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--cx-raio-pilula); background: var(--cx-preto); color: var(--cx-branco); font: var(--cx-peso-botao) 16px / 1.2 var(--cx-fonte-titulo); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* ---------- a sala: o player em modo cinema, com "Mais de [categoria]" embaixo ---------- */ /* a SALA de cinema (operador, 20/10: "já que a ideia é apagar as luzes e depois acender, precisa o preto ter um pouquinho de transparência que mostre o site por trás, e ter um fade in, fade out no preto"): preto puro a 90%, com um desfoque leve do que fica atrás; ao abrir, o fundo escurece (520 ms) e o vídeo e a ficha aparecem logo depois (240 ms de atraso); ao fechar, o conteúdo sai (280 ms) e as luzes voltam. Só opacity */ .sala { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / 0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: var(--cx-branco); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity 520ms var(--cx-curva-suave) 180ms; --cx-titulo: var(--cx-branco); --cx-texto-2: var(--cx-cinza-300); --cx-foco: var(--cx-branco); --cx-link: var(--cx-branco); --cx-link-sublinhado: var(--cx-vermelho-400); } .sala.is-aberta { opacity: 1; transition-delay: 0ms; } .sala__in { opacity: 0; transition: opacity 280ms var(--cx-curva-suave); } .sala.is-aberta .sala__in { opacity: 1; transition: opacity 420ms var(--cx-curva-suave) 240ms; } @media (prefers-reduced-motion: reduce) { .sala, .sala__in, .sala.is-aberta .sala__in { transition: none; } } .sala__in { width: min(100% - 2 * var(--margem), 1100px); margin-inline: auto; padding: 16px 0 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } /* a coluna não cresce com a fileira "Mais de" */ .sala__topo { display: flex; justify-content: flex-end; } .sala__palco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--cx-grafite); } .sala__palco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sala__ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 40px; } .sala__nome { display: grid; gap: 10px; justify-items: start; min-width: 0; max-width: 62ch; } .sala__rotulo { color: var(--cx-vermelho-400); --cx-fio: var(--cx-vermelho-400); } .sala__rotulo::before { display: none; } .sala__titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sala__h { font: var(--cx-peso-titulo) clamp(24px, 2.2vw, 32px) / 1.15 var(--cx-fonte-titulo); color: var(--cx-branco); text-wrap: balance; } .sala__linha { font: 300 var(--cx-tam-texto) / 1.5 var(--fonte-texto); color: var(--cx-cinza-100); } .sala__desafio { font: 300 var(--cx-tam-texto) / 1.5 var(--fonte-texto); color: var(--cx-cinza-300); max-width: 55ch; } .sala__acoes { flex: none; flex-wrap: nowrap; padding-top: 28px; } /* o botão alinha com o topo do título (abaixo do rótulo) */ .sala__ficha.sem-rotulo .sala__acoes { padding-top: 0; } .sala__fio { width: 100%; height: 1px; margin: 32px 0 8px; border: 0; background: #1A1A1A; } .sala__nome { display: grid; gap: 10px; } .etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .etiquetas li { padding: 4px 12px; border: 1px solid rgb(255 255 255 / 0.32); border-radius: var(--cx-raio-pilula); font: 500 14px / 1.3 var(--fonte-texto); color: var(--cx-cinza-100); } .sala__mais { margin-top: 16px; } .sala .carrossel__seta { color: var(--cx-branco); } @media (min-width: 1024px) { .sala__palco, .sala__ficha, .sala__fio { width: 100%; max-width: calc((100svh - 380px) * 16 / 9); margin-inline: auto; } } /* a ficha fica na largura do vídeo */ /* o vídeo encolhe na janela baixa para o "Mais de" aparecer sem rolar */ @media (max-width: 767px) { .sala__in { width: 100%; padding: 8px 0 40px; } .sala__topo { padding-inline: 12px; } .sala__palco { border-radius: 0; } .sala__ficha, .sala__mais { padding-inline: var(--margem); } .sala__ficha { flex-direction: column; align-items: stretch; } .sala__acoes { padding-top: 4px; flex-wrap: wrap; } .sala__acoes #sala-wa { width: 100%; justify-content: flex-start; } .sala__fio { margin: 24px var(--margem) 4px; width: auto; } } /* ---------- visor em tela cheia (fotos do Cariri) ---------- */ .visor { position: fixed; inset: 0; z-index: 70; background: var(--cx-preto); color: var(--cx-branco); --cx-foco: var(--cx-branco); display: block; overflow-y: auto; overscroll-behavior: contain; } /* rola por dentro: embaixo vem a galeria */ .visor__tela { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: calc(100vh - 124px); min-height: calc(100dvh - 124px); } /* a 1ª tela deixa o rótulo "Todas as fotos" aparecer embaixo */ .visor__topo { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--cx-preto); } /* Fechar fica à mão em qualquer ponto da rolagem */ .visor__conta { font: var(--cx-peso-rotulo) 14px / 1.25 var(--cx-fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-cinza-300); } .visor__figura { position: relative; display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 0; padding: 0 76px; touch-action: pan-y; } .visor__figura img { max-width: 100%; max-height: calc(100vh - 400px); width: auto; height: auto; object-fit: contain; border-radius: var(--r); -webkit-user-drag: none; user-select: none; } /* arrastar troca a foto (sem o arrasto nativo da imagem) */ .visor__figura figcaption { font: var(--cx-peso-rotulo) 14px / 1.3 var(--cx-fonte-titulo); letter-spacing: 0.06em; color: var(--cx-cinza-300); text-align: center; } .visor__seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; padding: 0; border-radius: 50%; } .visor__seta--ante { left: 16px; } .visor__seta--prox { right: 16px; } .visor__pe { display: grid; gap: 12px; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); } .visor__pe .pequeno { color: var(--cx-cinza-300); } .visor__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .visor__credito { color: var(--cx-cinza-300); } @media (max-width: 767px) { .visor__figura { padding: 0 12px; } .visor__figura img { max-height: calc(100vh - 470px); max-height: calc(100svh - 470px); } /* no celular baixo, a foto não sobe até a linha das setas */ .visor__seta { top: 14px; transform: none; width: 44px; height: 44px; background: var(--cx-preto); } /* na linha de cima, ao lado do contador: a foto e a legenda ficam livres */ .visor__seta--ante { left: 92px; } .visor__seta--prox { left: 144px; right: auto; } } @media (max-width: 767px) and (max-height: 700px) { /* celular baixo: o visor rola por dentro, e a foto nunca sobe até a linha das setas */ .visor { grid-template-rows: auto auto auto; align-content: start; overflow-y: auto; overscroll-behavior: contain; } .visor__figura { padding-top: 4px; } } /* ---------- página 404 (preta lisa, com o carimbo em traço como único acento) ---------- */ .erro { position: relative; min-height: 100vh; background: var(--cx-preto); padding: calc(var(--topo-h) + 64px) 0 96px; overflow: hidden; display: flex; align-items: center; color: var(--cx-branco); --cx-titulo: var(--cx-branco); --cx-texto: var(--cx-branco); --cx-rotulo: var(--cx-vermelho-400); --cx-fio: var(--cx-vermelho-400); --cx-destaque: var(--cx-vermelho); --cx-foco: var(--cx-branco); } .erro__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; } .erro__texto { display: grid; gap: 24px; justify-items: start; } .erro__carimbo { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin-inline: auto; } .erro__carimbo .carimbo { position: static; --d: 100%; color: var(--cx-branco); } @media (max-width: 1023px) { .erro__grade { grid-template-columns: minmax(0, 1fr); } .erro__carimbo { width: min(100%, 240px); } } /* ---------- celular: cada seção na sua tela. A rolagem assenta na direção do dedo (no fim da seção alta e depois no começo da próxima), pelo script (codigo.js), e não pelo scroll-snap do CSS: o "mandatory" voltava no arrasto devagar e o "proximity" parava entre duas seções. ---------- */ /* ---------- menos movimento: nada se mexe e a rolagem não assenta ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none !important; } *, *::before, *::after { animation: none !important; transition: none !important; } .carimbo__anel { transform: none !important; } .carrossel__trilho { scroll-behavior: auto; } .tv:hover .tv__capa { transform: none; } } /* ---------- ajustes de tela: no computador cada seção tem a altura do conteúdo (o vão entre as seções é o mesmo em toda a página); no celular, a seção tem a altura da tela, com o mesmo respiro nas pontas ---------- */ .como { --pad-cima: var(--pad-y); } /* o selo da capa desce sobre o topo do Como trabalhamos (lote 3; antes, O que fazemos): aqui o respiro inteiro, sem tirar meia curva */ @media (max-width: 767px) { .o-que .cabeca { margin-bottom: 20px; } .como__cabeca { margin-bottom: 20px; gap: 12px; } .carrossel--etapas { --w: 76%; } .etapa__texto { padding-top: 32px; gap: 6px; } .carrossel--pessoas .carrossel__controle { margin-top: 14px; } } /* ---------- 7 · Monte seu projeto: a seção (clara, com a Ondas clara) e a janela (pop-up) ---------- */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .monte-secao__grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 72px; align-items: center; } .monte-secao__texto { display: grid; gap: 20px; justify-items: start; } .monte-secao__texto .sub { max-width: 34ch; } .passos-curtos { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 4px 0 8px; } .passos-curtos li { display: inline-flex; align-items: center; gap: 10px; font: var(--cx-peso-titulo) 17px / 1.3 var(--cx-fonte-titulo); color: var(--cx-grafite); } .passos-curtos .ico { width: 36px; height: 36px; flex: none; color: var(--cx-vermelho); } /* a prévia estilizada da 1ª tela da janela (decorativa, sem foto) */ .previa-janela { display: grid; gap: 14px; justify-self: end; width: 100%; max-width: 420px; padding: 28px; border-radius: var(--r2); background: var(--cx-branco); } .previa-janela__titulo { font: var(--cx-peso-titulo) 20px / 1.2 var(--cx-fonte-titulo); color: var(--cx-grafite); } .previa-janela__barra { display: block; height: 3px; border-radius: 2px; background: var(--cx-cinza-100); overflow: hidden; } .previa-janela__barra i { display: block; width: 33%; height: 100%; background: var(--cx-vermelho); } .previa-janela__opcao { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r); border: 1.5px solid var(--cx-cinza-200); } .previa-janela__opcao b { font: var(--cx-peso-titulo) 18px / 1.2 var(--cx-fonte-titulo); color: var(--cx-grafite); } .previa-janela__opcao small { font: 300 15px / 1.4 var(--fonte-texto); color: var(--cx-cinza-600); } .previa-janela__opcao.is-marcada { border-color: var(--cx-grafite); } .previa-janela__bt { justify-self: end; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-vermelho); color: var(--cx-branco); } .previa-janela__bt .ico { width: 22px; height: 22px; } @media (max-width: 1023px) { .monte-secao__grade { grid-template-columns: minmax(0, 1fr); } .monte-secao__previa { display: none; } } @media (max-width: 767px) { .monte-secao__texto { gap: 14px; } .passos-curtos { flex-direction: column; gap: 8px; } .passos-curtos .ico { width: 30px; height: 30px; } } /* a janela: no computador, centralizada (~760 px), cantos arredondados, véu escuro atrás e rolagem por dentro; no celular, tela cheia, como uma folha que sobe, com Voltar e Próximo fixos embaixo (acima do teclado, pelo visualViewport do código) */ .janela { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / 0.72); } .janela__caixa { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(88vh, 900px); border-radius: var(--r2); background: var(--cx-branco); color: var(--cx-grafite); overflow: hidden; --cx-texto: var(--cx-grafite); --cx-texto-2: var(--cx-cinza-600); --cx-titulo: var(--cx-grafite); --cx-foco: var(--cx-grafite); --cx-link: var(--cx-grafite); animation: janela-entra var(--cx-dur-3) var(--cx-curva-saida); } @keyframes janela-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } } @keyframes janela-sobe { from { transform: translateY(100%); } } .janela__topo { display: flex; align-items: center; gap: 16px; padding: 16px 16px 12px 28px; } .janela__titulo { flex: 1; font: var(--cx-peso-titulo) 18px / 1.2 var(--cx-fonte-titulo); color: var(--cx-grafite); } .janela__conta { font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-cinza-600); font-variant-numeric: tabular-nums; white-space: nowrap; } .janela__barra { display: block; height: 3px; margin: 0 28px; border-radius: 2px; background: var(--cx-cinza-100); overflow: hidden; } .janela__barra i { display: block; height: 100%; width: 0; background: var(--cx-vermelho); transition: width var(--cx-dur-2) var(--cx-curva-suave); } .janela__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 28px; } .tela { display: grid; gap: 18px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; } .tela > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; } /* a legenda do fieldset entra no fluxo da grade */ .tela > legend + * { clear: both; } .tela__ajuda { font: 300 16px / 1.5 var(--fonte-texto); color: var(--cx-cinza-600); max-width: 55ch; } .caminhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .caminho { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 22px 22px 18px; border-radius: var(--r); border: 1.5px solid var(--cx-cinza-200); background: none; color: var(--cx-grafite); cursor: pointer; transition: border-color var(--cx-dur-1); } .caminho b { font: var(--cx-peso-titulo) 22px / 1.2 var(--cx-fonte-titulo); } .caminho span { font: 300 16px / 1.45 var(--fonte-texto); color: var(--cx-cinza-600); } .caminho .seta { width: 20px; height: 20px; margin-top: 8px; transition: transform var(--cx-dur-2) var(--cx-curva-saida); } .caminho:hover { border-color: var(--cx-grafite); } .caminho:hover .seta { transform: translateX(var(--cx-desloca-seta)); } .janela__privacidade { color: var(--cx-cinza-600); } .janela__politica { padding: 14px 0; font-weight: 700; color: var(--cx-grafite); transition: color var(--cx-dur-1); } /* o link da política no fim da frase (CIA, lote 2): sem sublinhado; em negrito e mais escuro; no hover, vermelho */ .janela__politica:hover, .janela__politica:focus-visible { color: var(--cx-vermelho); } .campo textarea { width: 100%; min-height: 120px; padding: 12px 14px; border-radius: var(--cx-raio-campo); border: 1.5px solid var(--cx-borda-campo); background: var(--cx-branco); color: var(--cx-grafite); font: 300 18px / 1.5 var(--fonte-texto); resize: vertical; } .campo--longo { gap: 0; } .campo__conta { justify-self: end; margin-top: -8px; font: 500 14px / 1 var(--fonte-texto); color: var(--cx-cinza-600); font-variant-numeric: tabular-nums; } .janela__pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 18px 28px; border-top: 1px solid var(--cx-cinza-100); background: var(--cx-branco); } .janela__pe-dir { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; } .janela .bt--wa { --cx-acento: var(--cx-vermelho); } .bt.is-inativo { opacity: 0.4; cursor: not-allowed; } .resumo { display: grid; } .resumo__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cx-cinza-100); } .resumo__linha dt { font: var(--cx-peso-titulo) 16px / 1.3 var(--cx-fonte-titulo); color: var(--cx-grafite); } .resumo__linha dd { grid-column: 1; font: 300 17px / 1.5 var(--fonte-texto); color: var(--cx-grafite); white-space: pre-line; overflow-wrap: anywhere; } .resumo__editar { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .janela__sair { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: rgb(255 255 255 / 0.94); } .janela__sair-caixa { display: grid; gap: 18px; justify-items: center; max-width: 380px; text-align: center; } .janela__sair-caixa .acoes { justify-content: center; } .ctl-ico--claro { color: var(--cx-grafite); } .ctl-ico--claro::before { border-color: rgb(33 33 33 / 0.45); background: none; } .ctl-ico--claro:hover::before { border-color: var(--cx-grafite); background: rgb(33 33 33 / 0.06); } /* o pop-up de serviço: as fotos do serviço (3:2, num carrossel), o título, o texto e "Montar meu projeto" */ .tela--servico { gap: 14px; } .janela__fotos { --w: 100%; --vao: 12px; margin-bottom: 6px; } .janela__fotos .carrossel__trilho { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .janela__fotos img { width: 100%; aspect-ratio: 3 / 2; max-height: 40vh; max-height: 40dvh; object-fit: cover; object-position: var(--foco, 50% 50%); border-radius: var(--r); -webkit-user-drag: none; user-select: none; } /* menor: o pop-up inteiro cabe numa tela (operador, 20/10) */ #janela-titulo:focus { outline: none; } .janela__fotos .carrossel__controle { margin-top: 12px; } .janela__sem-fotos { aspect-ratio: 3 / 2; border-radius: var(--r); } @media (max-width: 767px) { .janela { padding: 0; place-items: stretch; background: none; } .janela__caixa { width: 100%; height: 100%; max-height: none; border-radius: 0; animation-name: janela-sobe; } .janela__topo { padding: 10px 10px 10px var(--margem); } .janela__barra { margin: 0 var(--margem); } .janela__corpo { padding: 20px var(--margem) 24px; } .janela__pe { padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom)); } .caminhos { grid-template-columns: minmax(0, 1fr); } .resumo__linha { grid-template-columns: minmax(0, 1fr); } .resumo__editar { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } .janela__fotos img { max-height: 35vh; max-height: 35dvh; } } @media (prefers-reduced-motion: reduce) { .janela__caixa { animation: none; } .janela__barra i { transition: none; } } /* ---------- OS LAÇOS, uma regra só (operador, 20/10): as playlists, os bastidores de Quem somos, as fotos de O Cariri e a faixa do Instagram são esteiras contínuas (o módulo único do codigo.js marca a faixa com .is-esteira). A janela corta e o trilho anda só por transform. O cartão debaixo do mouse ganha .is-sob-mouse (o :hover do navegador não acompanha o que anda sob o mouse parado). Com "reduzir movimento", não há .is-esteira: o carrossel comum, com as setas. ---------- */ .laco__janela { position: relative; } .is-esteira .laco__janela { overflow: hidden; overflow: clip; touch-action: pan-y; } .is-esteira .carrossel__trilho { overflow: visible; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; will-change: transform; backface-visibility: hidden; } .is-esteira .carrossel__item { scroll-snap-align: none; } .is-esteira.carrossel--pessoas .carrossel__trilho { padding: 8px 0; margin: 0; } .is-esteira .insta__fita { touch-action: pan-y; } @media (hover: hover) and (pointer: fine) { .is-esteira .carrossel__trilho, .is-esteira .insta__fita { cursor: grab; } } .is-esteira.is-arrastando .carrossel__trilho, .is-esteira.is-arrastando .insta__fita { cursor: grabbing; user-select: none; } .is-esteira.is-arrastando .carrossel__trilho :is(a, button), .is-esteira.is-arrastando .insta__trilho { pointer-events: none; } /* arrastando, o hover não pisca e nada abre */ @media (max-width: 1023px) { .is-esteira .laco__janela { margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); } .is-esteira .carrossel__trilho, .is-esteira.carrossel--pessoas .carrossel__trilho { margin-inline: 0; padding-inline: 0; } .is-esteira.carrossel--pessoas .laco__janela { margin-inline: 0; padding-inline: 0; } /* Quem somos já está fora da .wrap (de ponta a ponta): sem a margem negativa, que passava 25 px da tela */ } .laco__pausa.is-parado .ctl__pausa, .laco__pausa:not(.is-parado) .ctl__play { display: none; } /* o botão de pausar dos laços SAI DA TELA (operador, 20/10: "remova esse botão pause"; CIA: em todos os laços, pela consistência) e só aparece com o foco do teclado, como um "pular para o conteúdo": a pausa continua no código (WCAG 2.2.2), com o nome para o leitor de tela. Com o foco dentro, o laço já para. Sem o botão, a linha de baixo some (nada de vão); onde a linha tem outro botão (O Cariri), ele aparece no lugar dele */ .is-esteira .esteira__pausa:not(:focus-visible) { position: absolute; left: 0; top: 0; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .is-esteira .carrossel__controle:not(:has(> .bt)) { height: 0; min-height: 0; margin: 0; } .is-esteira .carrossel__controle:not(:has(> .bt)) .esteira__pausa:focus-visible { position: absolute; left: 50%; top: calc(100% + 10px); z-index: 5; transform: translateX(-50%); background: var(--cx-preto); } .insta.is-esteira .esteira__pausa:focus-visible { background: var(--cx-preto); } .cx-cariri .laco__pausa, .quem .laco__pausa { color: var(--cx-branco); } /* a fita do Instagram: o botão de pausa no canto do quadro da direita, acima dos furos de baixo */ .insta__pausa { position: absolute; right: 12px; bottom: calc(var(--furo-faixa) + var(--marca-faixa) + 8px); z-index: 2; } /* a galeria organizada do visor: 4 colunas no computador, 3 no tablet, 2 no celular; 3:2, o mesmo vão e o mesmo raio */ .visor__figura:focus { outline: none; } .visor__galeria { display: grid; gap: 16px; padding: 12px 20px calc(48px + env(safe-area-inset-bottom)); } .visor__galeria .rotulo { color: var(--cx-cinza-100); --cx-fio: var(--cx-vermelho-400); } .visor__albuns { display: grid; gap: 28px; } .visor__album-titulo { margin-bottom: 12px; font: var(--cx-peso-titulo) 18px / 1.3 var(--cx-fonte-titulo); color: var(--cx-branco); } .visor__album-titulo small { font: 500 16px / 1.3 var(--fonte-texto); color: var(--cx-cinza-300); } .visor__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* a mini galeria do álbum aberto, logo abaixo da legenda: miniaturas pequenas (72 px de altura), a atual marcada em vermelho */ .visor__album { display: grid; justify-items: center; gap: 8px; padding: 10px 20px 0; } .visor__album-nome { font: 500 14px / 1.3 var(--fonte-texto); color: var(--cx-cinza-300); } .visor__fita { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; } .visor__fita::-webkit-scrollbar { display: none; } .visor__mini--fita { flex: none; width: 108px; height: 72px; aspect-ratio: auto; } .visor__mini { display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--cx-grafite); cursor: pointer; } .visor__mini img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--cx-dur-2); } .visor__mini[aria-current="true"] { outline: 3px solid var(--cx-vermelho); outline-offset: 3px; } .visor__mini[aria-current="true"]:focus-visible { outline-color: var(--cx-branco); } @media (hover: hover) and (pointer: fine) { .visor__mini:hover img { opacity: 0.85; } } @media (max-width: 767px) { .visor__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .visor__galeria { padding-inline: 12px; } .visor__mini--fita { width: 96px; height: 64px; } .visor__fita { justify-content: flex-start; } } /* voltar ao topo: o botão redondo com a seta e o anel que se preenche com a rolagem (a mecânica do Sítio; o visual é da Codec) */ .topo-volta { position: fixed; right: calc(16px + (var(--cx-flutuante) - 48px) / 2); bottom: calc(28px + var(--cx-flutuante) + env(safe-area-inset-bottom)); z-index: var(--cx-camada-flutuante); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cx-preto); color: var(--cx-branco); --cx-foco: var(--cx-branco); opacity: 0; visibility: hidden; transition: opacity var(--cx-dur-2), visibility var(--cx-dur-2), background-color var(--cx-dur-1), color var(--cx-dur-1); } .topo-volta.is-visivel { opacity: 1; visibility: visible; } .topo-volta svg { width: 48px; height: 48px; overflow: visible; } .topo-volta__aneis { transform: rotate(-90deg); transform-origin: 24px 24px; } .topo-volta__trilha { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 1.5; } .topo-volta__anel { fill: none; stroke: var(--cx-vermelho); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke var(--cx-dur-2); } .topo-volta.sobre-verde .topo-volta__anel { stroke: var(--cx-verde-200); } /* sobre o verde de O Cariri o anel nunca é vermelho (Fêmea 200); volta ao vermelho fora dele */ .topo-volta__seta { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--cx-dur-2) var(--cx-curva-saida); } .topo-volta:hover .topo-volta__seta { transform: translateY(-2px); } .topo-volta.is-claro { background: var(--cx-branco); color: var(--cx-grafite); --cx-foco: var(--cx-grafite); } .topo-volta.is-claro .topo-volta__trilha { stroke: rgb(33 33 33 / 0.45); } .topo-volta:focus-visible { outline: 2px solid var(--cx-foco); outline-offset: 1px; box-shadow: 0 0 0 5px var(--topo-volta-anel-fundo, var(--cx-preto)); } /* o anel duplo (lote 2): o disco passa sobre o branco e o preto */ .topo-volta.is-claro { --topo-volta-anel-fundo: var(--cx-branco); } @media (max-width: 767px) { #topo-volta { display: none; } } /* no celular não fica fixo (não cobre texto): fica só no rodapé */ .topo-volta--rodape { position: static; display: none; opacity: 1; visibility: visible; margin: 0 0 0 var(--margem); } /* sem margem embaixo: ela atravessava o rodapé e sobrava uma faixa branca no fim da página (lote 2); o respiro é o padding do rodapé */ @media (max-width: 767px) { .topo-volta--rodape { display: grid; } .rodape { padding-bottom: 20px; } } /* ---------- as luzes de O que fazemos (operador, 20/10: "uma animação ao apagar e acender as luzes"): um set de gravação ligando os refletores. Uma vez por visita: a seção começa com as luzes apagadas (o fundo claro quase preto e os cartões quase invisíveis); os cartões acendem um a um (01, 02, 03, ~280 ms entre eles), cada um com no máximo 1 piscada leve de contraste baixo; no fim, o fundo volta ao claro (~1,4 s). Só opacity e um gradiente; nada de layout. Com "reduzir movimento", a seção já aparece acesa. ---------- */ .o-que[data-luzes] { position: relative; } .o-que[data-luzes]::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.85) 150px, rgb(0 0 0 / 0.85) 100%); } /* a faixa de cima fica clara: o selo da capa continua inteiro */ .o-que[data-luzes] .carrossel--servicos { position: relative; z-index: 3; } .o-que.luz-apagada::after { opacity: 1; } .o-que.luz-apagada .servico__luz { opacity: 0.94; } .o-que.luz-apagada .servico__topo, .o-que.luz-apagada .servico__botao { opacity: 0.25; } .o-que.luz-ligando::after { opacity: 0; transition: opacity 700ms var(--cx-curva-suave) 650ms; } .o-que .servico.is-acesa .servico__luz { animation: luz-acende 560ms var(--cx-curva-suave) var(--atraso, 0ms) both; } .o-que .servico.is-acesa .servico__foto::after { opacity: 1; transition: opacity 600ms var(--cx-curva-suave) var(--atraso, 0ms); } .o-que .servico.is-acesa .servico__topo, .o-que .servico.is-acesa .servico__botao { opacity: 1; transition: opacity 400ms var(--cx-curva-suave) var(--atraso, 0ms); } @keyframes luz-acende { 0% { opacity: 0.94; } 38% { opacity: 0.12; } 50% { opacity: 0.32; } 100% { opacity: 0; } } /* a lâmpada pegando: 1 piscada só, de contraste baixo */ /* o refletor no cartão em foco: os outros 2 baixam a luz */ @media (hover: hover) and (pointer: fine) { .servicos .servico__foto { transition: filter 250ms var(--cx-curva-suave); } .servicos:hover .servico:not(:hover) .servico__foto { filter: brightness(0.68) saturate(0.7); } /* mais leve (lote 2): a foto continua à vista; só a foto baixa a luz, o texto fica legível */ .servicos .servico:hover .servico__foto::after { opacity: 1; background: radial-gradient(ellipse 80% 60% at 50% -8%, rgb(255 244 230 / 0.16), rgb(255 244 230 / 0) 72%); } /* a luz do refletor (lote 2: mais fraca, o ícone segue com 3:1) */ } .servicos:has(.servico__link:focus-visible) .servico:not(:has(.servico__link:focus-visible)) .servico__foto { filter: brightness(0.68) saturate(0.7); } @media (prefers-reduced-motion: reduce) { .o-que[data-luzes]::after, .servico__luz { display: none; } .servicos .servico, .servicos .servico__foto, .servico__veu, .servico__foto::after { transition: none !important; } } /* ---------- os componentes dos passos: o calendário, a cidade, a reunião e as referências da Codec ---------- */ .cal { display: grid; gap: 10px; justify-items: stretch; max-width: 380px; } .cal__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cal__titulo { font: var(--cx-peso-titulo) 18px / 1.2 var(--cx-fonte-titulo); color: var(--cx-grafite); } .cal__mes { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--cx-cinza-200); background: none; color: var(--cx-grafite); cursor: pointer; } .cal__mes:disabled { opacity: 0.3; cursor: default; } .cal__mes .ico { width: 18px; height: 18px; } .cal__grade { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; } .cal__grade th { padding: 4px 0; font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cx-cinza-600); text-align: center; } .cal__grade td { padding: 0; text-align: center; } .cal__dia { width: 44px; height: 44px; max-width: 100%; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cx-grafite); font: var(--cx-peso-titulo) 16px / 1 var(--cx-fonte-titulo); font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; } .cal__dia:hover:not(:disabled) { background: var(--cx-cinza-50); } .cal__dia:disabled { color: var(--cx-cinza-200); cursor: default; } .cal__dia[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--cx-grafite); } /* hoje */ .cal__dia[aria-pressed="true"] { background: var(--cx-vermelho); color: var(--cx-branco); box-shadow: none; } .cal__rotulo { font: var(--cx-peso-rotulo) 14px / 1.3 var(--cx-fonte-titulo); color: var(--cx-cinza-600); } .cal__escolhidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cal__tira { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--cx-raio-pilula); border: 1px solid var(--cx-cinza-200); background: var(--cx-branco); color: var(--cx-grafite); font: 500 14px / 1 var(--fonte-texto); cursor: pointer; } .cal__tira::after { content: "×"; font-size: 18px; line-height: 1; color: var(--cx-cinza-600); } .opcao--sem-data { justify-self: start; } .combo { position: relative; } .combo label { font: var(--cx-peso-rotulo) 14px / 1.25 var(--cx-fonte-titulo); letter-spacing: 0.04em; color: var(--cx-cinza-600); } .combo input { min-height: 48px; padding: 0 14px; border-radius: var(--cx-raio-campo); border: 1.5px solid var(--cx-borda-campo); background: var(--cx-branco); color: var(--cx-grafite); font: 300 18px / 1.3 var(--fonte-texto); width: 100%; } .combo__lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 4px; padding: 6px; border-radius: var(--cx-raio-campo); background: var(--cx-branco); box-shadow: 0 0 0 1px var(--cx-cinza-200), 0 12px 28px rgb(0 0 0 / 0.12); max-height: 320px; overflow-y: auto; } .combo__op { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; font: 300 17px / 1.3 var(--fonte-texto); color: var(--cx-grafite); cursor: pointer; } .combo__op[aria-selected="true"], .combo__op:hover { background: var(--cx-cinza-50); } .combo__op--livre { color: var(--cx-cinza-600); font-style: italic; } .reuniao { display: grid; gap: 14px; } .refs { display: grid; gap: 12px; } .refs__titulo { font: var(--cx-peso-titulo) 16px / 1.35 var(--cx-fonte-titulo); color: var(--cx-grafite); } .refs__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ref label { display: grid; gap: 6px; cursor: pointer; } .ref input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ref__capa { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--cx-grafite); } .ref__capa img, .ref__capa picture img { width: 100%; height: 100%; object-fit: cover; } .ref__capa picture { display: contents; } .ref__capa .provisoria { padding: 8px 10px; } .ref__capa .provisoria__nome { font-size: 14px; } .ref__check { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 0.9); background: rgb(0 0 0 / 0.35); } .ref input:checked + .ref__capa { box-shadow: 0 0 0 3px var(--cx-vermelho); } .ref input:checked + .ref__capa .ref__check { border-color: var(--cx-vermelho); background: var(--cx-vermelho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; } .ref input:focus-visible + .ref__capa { outline: 3px solid var(--cx-grafite); outline-offset: 3px; } .ref__nome { font: 500 14px / 1.3 var(--fonte-texto); color: var(--cx-grafite); } .refs__todos { justify-self: start; } @media (max-width: 767px) { .refs__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal { max-width: none; } } /* o par de botões (operador, 20/10): a mesma altura e o mesmo raio; o principal primeiro; no computador lado a lado, cada um com a largura do texto; no celular empilhados, os 2 com largura total */ .faq .acoes .bt { min-height: 56px; } @media (max-width: 767px) { .faq .acoes .bt, .sala__acoes .bt { width: 100%; justify-content: flex-start; } } .painel__monte { margin: 4px 0 0; } /* ---------- a profundidade (operador, 20/10: "quero profundidade aqui.. use pattern"): o preto com a Ondas tom sobre tom (mais visível nas laterais, quase sumindo atrás do texto), um brilho vermelho muito suave saindo de um ponto, o fio interno fino e uma sombra levíssima sobre o claro ---------- */ .profundo { position: relative; isolation: isolate; box-shadow: inset 0 0 0 1px #1F1F1F, 0 18px 44px -22px rgb(0 0 0 / 0.45); } .profundo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.72) 26%, rgb(0 0 0 / 0.72) 74%, rgb(0 0 0 / 0) 100%); } /* a Ondas some atrás do texto */ .profundo::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--brilho-x, 0%) var(--brilho-y, 0%), rgb(210 10 46 / 0.1), rgb(210 10 46 / 0) var(--brilho-r, 340px)); transition: opacity var(--cx-dur-3), transform var(--cx-dur-3) var(--cx-curva-saida); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .profundo { transition: background-position 1.6s var(--cx-curva-suave); } .profundo:hover { background-position: 50% 6px; } /* a Ondas desliza devagar alguns px */ .profundo:hover::after { --brilho-r: 420px; } } /* a pílula do convite com profundidade; o círculo vermelho ganha um anel fino em traço */ .pilula--preta { --brilho-x: 40px; --brilho-y: 50%; --brilho-r: 260px; } .pilula--preta .pilula__icone { box-shadow: 0 0 0 4px var(--cx-preto), 0 0 0 5px rgb(210 10 46 / 0.55); } @media (max-width: 767px) { /* no celular, o convite vira cartão: o ícone em cima, o texto, o botão em largura total, tudo na mesma margem */ .pilula--preta { display: grid; justify-items: start; gap: 16px; padding: 24px; border-radius: var(--r2); --brilho-x: 48px; --brilho-y: 48px; } .pilula--preta .pilula__icone { width: 48px; height: 48px; } .pilula--preta .pilula__frase { flex: none; } .pilula--preta .pilula__link { width: 100%; margin-left: 0; justify-content: center; min-height: 48px; } } /* ---------- o painel do Monte seu projeto: o momento comercial (preto em destaque sobre o claro da seção) ---------- */ .monte-secao { background: var(--cx-cinza-50); } .monte-painel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; padding: clamp(32px, 4.6vw, 64px); border-radius: 32px; color: var(--cx-branco); --brilho-x: 0%; --brilho-y: 0%; --brilho-r: 520px; } .monte-painel.com-ondas { background-position: 50% 0; } /* o fundo de bastidor do painel (operador, 20/10): o set montado em P&B, a 14%, atrás do texto (à esquerda e no centro). Some em degradê para o preto puro nas bordas e, sobretudo, para a direita; o fim do degradê vem da prévia branca (o código mede --previa-x e --previa-y): nunca fica atrás dela. O preto a 60% embaixo da foto, com a mesma máscara, deixa a Ondas mais fraca nessa área. Estático: com "reduzir movimento", igual */ .monte-painel__fundo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; background: rgb(0 0 0 / 0.6); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--previa-x, 56%) * 0.5), transparent calc(var(--previa-x, 56%) - 24px)), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--previa-x, 56%) * 0.5), transparent calc(var(--previa-x, 56%) - 24px)), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; } .monte-painel__fundo picture { display: contents; } .monte-painel__fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; opacity: 0.14; } @media (max-width: 1023px) { /* empilhado: a foto fica atrás do texto e some para baixo antes da prévia */ .monte-painel__fundo { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--previa-y, 50%) * 0.55), transparent calc(var(--previa-y, 50%) - 16px)), linear-gradient(90deg, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--previa-y, 50%) * 0.55), transparent calc(var(--previa-y, 50%) - 16px)), linear-gradient(90deg, #000 0, #000 72%, transparent 100%); } .monte-painel__fundo img { height: calc(var(--previa-y, 50%) + 40px); } /* a foto na altura do texto, não do painel inteiro */ } .monte-painel__texto { display: grid; gap: 20px; justify-items: start; } .monte-painel__titulo { color: var(--cx-branco); max-width: 14ch; font-size: clamp(36px, 4.4vw, 64px); } .monte-painel .sub { color: var(--cx-cinza-100); max-width: 34ch; } .monte-painel__bt { min-height: 64px; padding: 8px 8px 8px 30px; gap: 16px; font-size: 20px; margin-top: 8px; } /* "Começar agora" (CIA, 20/10): o texto no centro e a seta num círculo branco na ponta, igual no computador e no celular */ .monte-painel__bt .bt__circulo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cx-branco); color: var(--cx-vermelho); } .monte-painel__bt .bt__circulo .seta { display: block; width: 22px; height: 22px; } @media (max-width: 479px) { /* no celular: a pílula na largura toda, o texto no centro exato, numa linha só, e o círculo na ponta direita */ .monte-painel__bt { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 0; align-items: center; padding: 8px; } .monte-painel__bt .bt__texto { grid-column: 2; text-align: center; white-space: nowrap; text-wrap: nowrap; } /* nunca "Começar / agora" */ .monte-painel__bt .bt__circulo { grid-column: 3; } } @media (max-width: 374px) { /* 320 a 374 px (os Android de 360): o círculo e as bordas um pouco menores, e o texto no centro do espaço à esquerda do círculo */ .monte-painel__bt { grid-template-columns: minmax(0, 1fr) 40px; padding: 6px 6px 6px 0; min-height: 56px; } .monte-painel__bt .bt__texto { grid-column: 1; } .monte-painel__bt .bt__circulo { grid-column: 2; width: 40px; height: 40px; } .monte-painel__bt .bt__circulo .seta { width: 20px; height: 20px; } } @media (max-width: 340px) { /* 320 px: o círculo de 34 px; o texto fica a ~27 px da borda e do círculo */ .monte-painel__bt { grid-template-columns: minmax(0, 1fr) 34px; } .monte-painel__bt .bt__circulo { width: 34px; height: 34px; } .monte-painel__bt .bt__circulo .seta { width: 18px; height: 18px; } } /* o como funciona em 3 passos curtos (copy aprovada pelo operador, 20/10): limpo, sem caixa. O número num anel fino e o fio que liga os passos, em branco translúcido (o vermelho fica só para o botão e o destaque). Em linha quando o texto do painel tem largura; empilhado no celular */ .monte-painel__texto { container-type: inline-size; } .passos-monte { display: grid; gap: 10px; width: 100%; margin: 4px 0 0; } .passos-monte li { position: relative; display: grid; grid-template-columns: 32px auto; justify-content: start; align-items: center; gap: 12px; font: var(--cx-peso-titulo) 16px / 1.3 var(--cx-fonte-titulo); color: var(--cx-cinza-100); } .passos-monte__n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 0.42); font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); color: var(--cx-branco); font-variant-numeric: tabular-nums; } .passos-monte__txt { white-space: nowrap; } .passos-monte li:not(:last-child)::after { content: ""; position: absolute; left: 15.25px; top: 34px; width: 1.5px; height: 6px; background: rgb(255 255 255 / 0.24); } /* empilhado: o fio desce de um anel ao outro */ @container (min-width: 500px) { /* em linha: o anel em cima e o texto embaixo; o fio sai do anel e vai até perto do anel seguinte */ .passos-monte { grid-template-columns: repeat(3, max-content); gap: 0 24px; margin-top: 8px; } .passos-monte li { grid-template-columns: max-content; justify-items: start; gap: 10px; } .passos-monte li:not(:last-child)::after { left: 44px; right: -14px; top: 15.25px; width: auto; height: 1.5px; } } .monte-painel__previa { cursor: pointer; } .monte-painel .previa-janela { position: relative; justify-self: end; width: 100%; max-width: 440px; min-height: 300px; padding: 26px; border-radius: var(--r2); background: var(--cx-branco); color: var(--cx-grafite); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6); } .previa-passo { position: absolute; inset: 26px; display: grid; align-content: start; gap: 14px; opacity: 0; transition: opacity 700ms var(--cx-curva-suave); } .previa-passo.is-ativo { position: relative; inset: auto; opacity: 1; } .previa-janela__topo { display: flex; justify-content: space-between; gap: 12px; font: var(--cx-peso-titulo) 16px / 1.2 var(--cx-fonte-titulo); color: var(--cx-grafite); } .previa-janela__topo span:last-child { font: 500 14px / 1.2 var(--fonte-texto); color: var(--cx-cinza-600); } .previa-janela__barra { display: block; height: 3px; border-radius: 2px; background: var(--cx-cinza-100); overflow: hidden; } .previa-janela__barra i { display: block; height: 100%; background: var(--cx-vermelho); } .previa-janela__pergunta { font: var(--cx-peso-titulo) 20px / 1.25 var(--cx-fonte-titulo); color: var(--cx-grafite); text-wrap: balance; } .previa-ops { display: flex; flex-wrap: wrap; gap: 8px; } .previa-op { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--cx-raio-pilula); border: 1px solid var(--cx-cinza-400); font: var(--cx-peso-menu) 14px / 1 var(--cx-fonte-titulo); color: var(--cx-grafite); } .previa-op.is-marcada { background: var(--cx-grafite); color: var(--cx-branco); border-color: var(--cx-grafite); } @media (prefers-reduced-motion: reduce) { .previa-passo { transition: none; } } @media (max-width: 1023px) { .monte-painel { grid-template-columns: minmax(0, 1fr); gap: 28px; } .monte-painel .previa-janela { justify-self: stretch; max-width: none; min-height: 0; } } @media (max-width: 767px) { .monte-secao .wrap { width: calc(100% - 32px); } /* o painel ocupa a largura toda, com 16 px de margem */ .monte-painel { padding: 28px 22px; border-radius: var(--r2); } .monte-painel__bt, .monte-painel .bt--principal { width: 100%; } .monte-painel .previa-janela { padding: 18px; } .previa-passo { inset: 18px; gap: 10px; } .previa-janela__pergunta { font-size: 17px; } } /* ---------- Também fazemos: 5 cartões pequenos de mesma largura (5 colunas no computador; no celular, a fileira que desliza) ---------- */ .tambem { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* minmax(0, 1fr): o carrossel não alarga a página no celular (a página chegava a 996 px de largura) */ .carrossel--atalhos { --vao: 12px; } .atalho { position: relative; display: grid; align-content: space-between; gap: 18px; width: 100%; min-height: 132px; padding: 18px 18px 16px; border-radius: var(--r); border: 1px solid #E3E3E3; background: var(--cx-branco); color: var(--cx-grafite); text-align: left; transition: border-color var(--cx-dur-1); } button.atalho { cursor: pointer; } /* o clique e o hover só existem quando o cartão abre o pop-up (SERVICOS_POPUP em monte-v3.py); desligado, o cartão é um
parado */ .atalho__ico { width: 36px; height: 36px; color: var(--cx-vermelho); transition: transform var(--cx-dur-2) var(--cx-curva-saida); } .atalho__nome { max-width: 16ch; font: var(--cx-peso-titulo) 16px / 1.3 var(--cx-fonte-titulo); text-wrap: balance; } .atalho__mais { position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; color: var(--cx-cinza-600); } button.atalho:hover { border-color: var(--cx-vermelho); } @media (hover: hover) and (pointer: fine) { button.atalho:hover .atalho__ico { transform: translateY(-3px); } } @media (min-width: 1024px) { .carrossel--atalhos .carrossel__trilho { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; overflow: visible; } /* a mesma grade dos 3 cartões grandes: o mesmo vão */ .carrossel--atalhos .carrossel__controle { display: none; } } @media (max-width: 1023px) { .carrossel--atalhos { --w: min(200px, 46vw); } } /* ---------- foco do teclado só com teclado (no toque e no clique, nada de anel) ---------- */ :focus:not(:focus-visible) { outline: none; } button, a { -webkit-tap-highlight-color: transparent; } /* ---------- os controles dos carrosséis, um padrão só: o contador à esquerda (caixa normal) e as 2 setas juntas à direita, 44 px ---------- */ .carrossel__conta { text-transform: none; letter-spacing: 0.02em; font: 500 15px / 1 var(--fonte-texto); } @media (max-width: 767px) { .carrossel__controle { justify-content: flex-start; } /* sem margem embaixo: no fim da seção, ela somava ao vão entre as seções */ .carrossel__controle .carrossel__navega { width: 100%; margin-left: 0; } .carrossel__controle .carrossel__conta { order: 0; text-align: left; margin: 0 auto 0 0; } .carrossel__controle > .bt, .carrossel__controle > a.bt { order: 2; } } /* ---------- 4b · Nossa missão (operador, 20/10): a seção curta branca entre os Trabalhos e O Cariri; a missão aprovada em letra grande. Limpa, com uma vida só (operador, 20/10: "está meio detalhadinho"): o fundo LISO, no mesmo branco da curva (uma borda só), as palavras que acendem com a rolagem e os 2 soldadinhos, pequenos e leves. Saíram a Ondas clara das bordas e o traço sob "essência" (que segue em Fraunces verde-oliva). As 2 emendas são a curva suave, no mesmo sentido (a faixa é lida como seção, não como fita). ---------- */ .missao { position: relative; display: flex; align-items: center; padding: var(--pad-cima) 0 var(--pad-baixo); background: var(--cx-branco); color: var(--cx-grafite); --cx-destaque: var(--cx-verde-700); --cx-rotulo: var(--cx-verde-700); --cx-fio: var(--cx-verde-700); text-align: center; isolation: isolate; } .missao .wrap { position: relative; display: grid; justify-items: center; gap: 22px; } .missao__rotulo { position: relative; padding-top: 22px; color: var(--cx-verde-700); } .missao__rotulo::before { content: ""; position: absolute; left: 50%; top: 0; width: 40px; height: 2px; border-radius: 2px; background: var(--cx-verde-700); transform: translateX(-50%); } /* o acento fino verde-oliva */ .missao__texto { max-width: 38ch; font: var(--cx-peso-titulo) clamp(28px, 3vw, 44px) / 1.25 var(--cx-fonte-titulo); letter-spacing: -0.01em; color: var(--cx-grafite); text-wrap: balance; } /* os 3 destaques do operador (lote 2) nunca se partem no meio. No computador, a medida de 38ch deixa 2 deles numa linha e o 3º na de baixo, deslocado (o menor encontro de verde entre as linhas, medido de 768 a 1440); no celular, cada um cai numa linha, com "que" e "e" no começo delas */ .missao__texto .destaque { white-space: nowrap; } @media (max-width: 359px) { .missao__texto .destaque { white-space: normal; } } /* em 320, "transmitem a essência" não cabe numa linha: parte depois de "transmitem" ("a essência" fica junto) */ /* com o código: as palavras começam em cinza claro e acendem uma a uma, na ordem da leitura (grafite); as dos 3 destaques, no verde-oliva */ .missao__texto.is-acende .missao__p { color: #C8C8C8; transition: color 420ms var(--cx-curva-suave); } .missao__texto.is-acende .missao__p.is-aceso { color: var(--cx-grafite); } .missao__texto.is-acende .destaque .missao__p.is-aceso { color: var(--cx-verde-700); } /* a TRAMA no fundo branco (operador, 20/10: "não tô gostando dessas bolinhas. Coloque só um pattern mesmo, algum que você não usou ainda, discreto"; a preferência da CIA): o módulo oficial `trama__modulo__verde-femea` do brandpack 2027 (o contorno pequeno do símbolo, 66 px), sem o fundo, no Verde Fêmea a 6%, de canto a canto e sumindo em degradê perto das emendas. A única padronagem do site além da Ondas. Estática */ .missao.com-trama { isolation: isolate; } .missao.com-trama::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%2266px%22%20height%3D%2266px%22%20viewBox%3D%220%200%2066%2066%22%3E%3Ctitle%3ECodec%20Studio%20-%20padronagem%20de%20linhas%20Trama%20-%20m%C3%B3dulo%20-%20Verde%20da%20f%C3%AAmea%20%28sem%20fundo%2C%20para%20a%20Nossa%20miss%C3%A3o%29%3C%2Ftitle%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2266%22%20height%3D%2266%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20id%3D%22linhas%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%20fill%3D%22none%22%20stroke%3D%22%23666F2D%22%20stroke-width%3D%221%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M-15.43%2C-24.48L-15.61%2C-24.64L-31.51%2C-38.58L-27.6%2C-43.04C-27.62%2C-39.56%20-26.35%2C-35.75%20-23.49%2C-33.24C-18.39%2C-28.77%20-10.63%2C-29.21%20-6.06%2C-34.42C-1.55%2C-39.56%20-2.1%2C-47.35%20-7.2%2C-51.82C-12.22%2C-56.22%20-19.98%2C-55.71%20-24.48%2C-50.57L-24.64%2C-50.39L-38.58%2C-34.49L-43.03%2C-38.4C-39.56%2C-38.38%20-35.75%2C-39.65%20-33.24%2C-42.51C-28.77%2C-47.61%20-29.21%2C-55.37%20-34.42%2C-59.94C-39.56%2C-64.45%20-47.35%2C-63.9%20-51.82%2C-58.8C-56.22%2C-53.78%20-55.71%2C-46.02%20-50.57%2C-41.52L-50.39%2C-41.36L-34.49%2C-27.42L-38.4%2C-22.97C-38.38%2C-26.44%20-39.65%2C-30.25%20-42.51%2C-32.76C-47.61%2C-37.23%20-55.37%2C-36.79%20-59.94%2C-31.58C-64.45%2C-26.44%20-63.9%2C-18.65%20-58.8%2C-14.18C-53.78%2C-9.78%20-46.02%2C-10.29%20-41.52%2C-15.43L-41.36%2C-15.61L-27.42%2C-31.51L-22.97%2C-27.6C-26.44%2C-27.62%20-30.25%2C-26.35%20-32.76%2C-23.49C-37.23%2C-18.39%20-36.79%2C-10.63%20-31.58%2C-6.06C-26.44%2C-1.55%20-18.65%2C-2.1%20-14.18%2C-7.2C-9.78%2C-12.22%20-10.29%2C-19.98%20-15.43%2C-24.48ZM-33.24%2C-36.61L-29.39%2C-33.24L-32.76%2C-29.4L-36.61%2C-32.76L-33.24%2C-36.61ZM-8.93%2C-49.84C-4.98%2C-46.39%20-4.57%2C-40.1%20-8.03%2C-36.15C-11.56%2C-32.13%20-17.68%2C-31.9%20-21.63%2C-35.36C-25.65%2C-38.88%20-26.03%2C-44.82%20-22.51%2C-48.84C-19.05%2C-52.79%20-12.95%2C-53.37%20-8.93%2C-49.84ZM-49.84%2C-57.07C-46.39%2C-61.02%20-40.1%2C-61.43%20-36.15%2C-57.97C-32.13%2C-54.44%20-31.9%2C-48.32%20-35.36%2C-44.37C-38.88%2C-40.36%20-44.82%2C-39.97%20-48.84%2C-43.49C-52.79%2C-46.95%20-53.37%2C-53.05%20-49.84%2C-57.07ZM-57.07%2C-16.16C-61.02%2C-19.61%20-61.43%2C-25.9%20-57.97%2C-29.85C-54.44%2C-33.87%20-48.32%2C-34.1%20-44.37%2C-30.64C-40.35%2C-27.12%20-39.97%2C-21.18%20-43.49%2C-17.16C-46.95%2C-13.21%20-53.05%2C-12.63%20-57.07%2C-16.16ZM-16.16%2C-8.93C-19.61%2C-4.98%20-25.9%2C-4.57%20-29.85%2C-8.03C-33.87%2C-11.56%20-34.1%2C-17.68%20-30.64%2C-21.63C-27.12%2C-25.64%20-21.18%2C-26.03%20-17.16%2C-22.51C-13.21%2C-19.05%20-12.63%2C-12.95%20-16.16%2C-8.93Z%22%2F%3E%3Cpath%20d%3D%22M-15.43%2C41.52L-15.61%2C41.36L-31.51%2C27.42L-27.6%2C22.96C-27.62%2C26.44%20-26.35%2C30.25%20-23.49%2C32.76C-18.39%2C37.23%20-10.63%2C36.79%20-6.06%2C31.58C-1.55%2C26.44%20-2.1%2C18.65%20-7.2%2C14.18C-12.22%2C9.78%20-19.98%2C10.29%20-24.48%2C15.43L-24.64%2C15.61L-38.58%2C31.51L-43.03%2C27.6C-39.56%2C27.62%20-35.75%2C26.35%20-33.24%2C23.49C-28.77%2C18.39%20-29.21%2C10.63%20-34.42%2C6.06C-39.56%2C1.55%20-47.35%2C2.1%20-51.82%2C7.2C-56.22%2C12.22%20-55.71%2C19.98%20-50.57%2C24.48L-50.39%2C24.64L-34.49%2C38.58L-38.4%2C43.03C-38.38%2C39.56%20-39.65%2C35.75%20-42.51%2C33.24C-47.61%2C28.77%20-55.37%2C29.21%20-59.94%2C34.42C-64.45%2C39.56%20-63.9%2C47.35%20-58.8%2C51.82C-53.78%2C56.22%20-46.02%2C55.71%20-41.52%2C50.57L-41.36%2C50.39L-27.42%2C34.49L-22.97%2C38.4C-26.44%2C38.38%20-30.25%2C39.65%20-32.76%2C42.51C-37.23%2C47.61%20-36.79%2C55.37%20-31.58%2C59.94C-26.44%2C64.45%20-18.65%2C63.9%20-14.18%2C58.8C-9.78%2C53.78%20-10.29%2C46.02%20-15.43%2C41.52ZM-33.24%2C29.39L-29.39%2C32.76L-32.76%2C36.6L-36.61%2C33.24L-33.24%2C29.39ZM-8.93%2C16.16C-4.98%2C19.61%20-4.57%2C25.9%20-8.03%2C29.85C-11.56%2C33.87%20-17.68%2C34.1%20-21.63%2C30.64C-25.65%2C27.12%20-26.03%2C21.18%20-22.51%2C17.16C-19.05%2C13.21%20-12.95%2C12.63%20-8.93%2C16.16ZM-49.84%2C8.93C-46.39%2C4.98%20-40.1%2C4.57%20-36.15%2C8.03C-32.13%2C11.56%20-31.9%2C17.68%20-35.36%2C21.63C-38.88%2C25.64%20-44.82%2C26.03%20-48.84%2C22.51C-52.79%2C19.05%20-53.37%2C12.95%20-49.84%2C8.93ZM-57.07%2C49.84C-61.02%2C46.39%20-61.43%2C40.1%20-57.97%2C36.15C-54.44%2C32.13%20-48.32%2C31.9%20-44.37%2C35.36C-40.35%2C38.88%20-39.97%2C44.82%20-43.49%2C48.84C-46.95%2C52.79%20-53.05%2C53.37%20-57.07%2C49.84ZM-16.16%2C57.07C-19.61%2C61.02%20-25.9%2C61.43%20-29.85%2C57.97C-33.87%2C54.44%20-34.1%2C48.32%20-30.64%2C44.37C-27.12%2C40.36%20-21.18%2C39.97%20-17.16%2C43.49C-13.21%2C46.95%20-12.63%2C53.05%20-16.16%2C57.07Z%22%2F%3E%3Cpath%20d%3D%22M-15.43%2C107.52L-15.61%2C107.36L-31.51%2C93.42L-27.6%2C88.96C-27.62%2C92.44%20-26.35%2C96.25%20-23.49%2C98.76C-18.39%2C103.23%20-10.63%2C102.79%20-6.06%2C97.58C-1.55%2C92.44%20-2.1%2C84.65%20-7.2%2C80.18C-12.22%2C75.78%20-19.98%2C76.29%20-24.48%2C81.43L-24.64%2C81.61L-38.58%2C97.51L-43.03%2C93.6C-39.56%2C93.62%20-35.75%2C92.35%20-33.24%2C89.49C-28.77%2C84.39%20-29.21%2C76.63%20-34.42%2C72.06C-39.56%2C67.55%20-47.35%2C68.1%20-51.82%2C73.2C-56.22%2C78.22%20-55.71%2C85.98%20-50.57%2C90.48L-50.39%2C90.64L-34.49%2C104.58L-38.4%2C109.03C-38.38%2C105.56%20-39.65%2C101.75%20-42.51%2C99.24C-47.61%2C94.77%20-55.37%2C95.21%20-59.94%2C100.42C-64.45%2C105.56%20-63.9%2C113.35%20-58.8%2C117.82C-53.78%2C122.22%20-46.02%2C121.71%20-41.52%2C116.57L-41.36%2C116.39L-27.42%2C100.49L-22.97%2C104.4C-26.44%2C104.38%20-30.25%2C105.65%20-32.76%2C108.51C-37.23%2C113.61%20-36.79%2C121.37%20-31.58%2C125.94C-26.44%2C130.45%20-18.65%2C129.9%20-14.18%2C124.8C-9.78%2C119.78%20-10.29%2C112.02%20-15.43%2C107.52ZM-33.24%2C95.39L-29.39%2C98.76L-32.76%2C102.6L-36.61%2C99.24L-33.24%2C95.39ZM-8.93%2C82.16C-4.98%2C85.61%20-4.57%2C91.9%20-8.03%2C95.85C-11.56%2C99.87%20-17.68%2C100.1%20-21.63%2C96.64C-25.65%2C93.12%20-26.03%2C87.18%20-22.51%2C83.16C-19.05%2C79.21%20-12.95%2C78.63%20-8.93%2C82.16ZM-49.84%2C74.93C-46.39%2C70.98%20-40.1%2C70.57%20-36.15%2C74.03C-32.13%2C77.56%20-31.9%2C83.68%20-35.36%2C87.63C-38.88%2C91.64%20-44.82%2C92.03%20-48.84%2C88.51C-52.79%2C85.05%20-53.37%2C78.95%20-49.84%2C74.93ZM-57.07%2C115.84C-61.02%2C112.39%20-61.43%2C106.1%20-57.97%2C102.15C-54.44%2C98.13%20-48.32%2C97.9%20-44.37%2C101.36C-40.35%2C104.88%20-39.97%2C110.82%20-43.49%2C114.84C-46.95%2C118.79%20-53.05%2C119.37%20-57.07%2C115.84ZM-16.16%2C123.07C-19.61%2C127.02%20-25.9%2C127.43%20-29.85%2C123.97C-33.87%2C120.44%20-34.1%2C114.32%20-30.64%2C110.37C-27.12%2C106.36%20-21.18%2C105.97%20-17.16%2C109.49C-13.21%2C112.95%20-12.63%2C119.05%20-16.16%2C123.07Z%22%2F%3E%3Cpath%20d%3D%22M50.57%2C-24.48L50.39%2C-24.64L34.49%2C-38.58L38.4%2C-43.04C38.38%2C-39.56%2039.65%2C-35.75%2042.51%2C-33.24C47.61%2C-28.77%2055.37%2C-29.21%2059.94%2C-34.42C64.45%2C-39.56%2063.9%2C-47.35%2058.8%2C-51.82C53.78%2C-56.22%2046.02%2C-55.71%2041.52%2C-50.57L41.36%2C-50.39L27.42%2C-34.49L22.97%2C-38.4C26.44%2C-38.38%2030.25%2C-39.65%2032.76%2C-42.51C37.23%2C-47.61%2036.79%2C-55.37%2031.58%2C-59.94C26.44%2C-64.45%2018.65%2C-63.9%2014.18%2C-58.8C9.78%2C-53.78%2010.29%2C-46.02%2015.43%2C-41.52L15.61%2C-41.36L31.51%2C-27.42L27.6%2C-22.97C27.62%2C-26.44%2026.35%2C-30.25%2023.49%2C-32.76C18.39%2C-37.23%2010.63%2C-36.79%206.06%2C-31.58C1.55%2C-26.44%202.1%2C-18.65%207.2%2C-14.18C12.22%2C-9.78%2019.98%2C-10.29%2024.48%2C-15.43L24.64%2C-15.61L38.58%2C-31.51L43.03%2C-27.6C39.56%2C-27.62%2035.75%2C-26.35%2033.24%2C-23.49C28.77%2C-18.39%2029.21%2C-10.63%2034.42%2C-6.06C39.56%2C-1.55%2047.35%2C-2.1%2051.82%2C-7.2C56.22%2C-12.22%2055.71%2C-19.98%2050.57%2C-24.48ZM32.76%2C-36.61L36.61%2C-33.24L33.24%2C-29.4L29.39%2C-32.76L32.76%2C-36.61ZM57.07%2C-49.84C61.02%2C-46.39%2061.43%2C-40.1%2057.97%2C-36.15C54.44%2C-32.13%2048.32%2C-31.9%2044.37%2C-35.36C40.35%2C-38.88%2039.97%2C-44.82%2043.49%2C-48.84C46.95%2C-52.79%2053.05%2C-53.37%2057.07%2C-49.84ZM16.16%2C-57.07C19.61%2C-61.02%2025.9%2C-61.43%2029.85%2C-57.97C33.87%2C-54.44%2034.1%2C-48.32%2030.64%2C-44.37C27.12%2C-40.36%2021.18%2C-39.97%2017.16%2C-43.49C13.21%2C-46.95%2012.63%2C-53.05%2016.16%2C-57.07ZM8.93%2C-16.16C4.98%2C-19.61%204.57%2C-25.9%208.03%2C-29.85C11.56%2C-33.87%2017.68%2C-34.1%2021.63%2C-30.64C25.65%2C-27.12%2026.03%2C-21.18%2022.51%2C-17.16C19.05%2C-13.21%2012.95%2C-12.63%208.93%2C-16.16ZM49.84%2C-8.93C46.39%2C-4.98%2040.1%2C-4.57%2036.15%2C-8.03C32.13%2C-11.56%2031.9%2C-17.68%2035.36%2C-21.63C38.88%2C-25.64%2044.82%2C-26.03%2048.84%2C-22.51C52.79%2C-19.05%2053.37%2C-12.95%2049.84%2C-8.93Z%22%2F%3E%3Cpath%20d%3D%22M50.57%2C41.52L50.39%2C41.36L34.49%2C27.42L38.4%2C22.96C38.38%2C26.44%2039.65%2C30.25%2042.51%2C32.76C47.61%2C37.23%2055.37%2C36.79%2059.94%2C31.58C64.45%2C26.44%2063.9%2C18.65%2058.8%2C14.18C53.78%2C9.78%2046.02%2C10.29%2041.52%2C15.43L41.36%2C15.61L27.42%2C31.51L22.97%2C27.6C26.44%2C27.62%2030.25%2C26.35%2032.76%2C23.49C37.23%2C18.39%2036.79%2C10.63%2031.58%2C6.06C26.44%2C1.55%2018.65%2C2.1%2014.18%2C7.2C9.78%2C12.22%2010.29%2C19.98%2015.43%2C24.48L15.61%2C24.64L31.51%2C38.58L27.6%2C43.03C27.62%2C39.56%2026.35%2C35.75%2023.49%2C33.24C18.39%2C28.77%2010.63%2C29.21%206.06%2C34.42C1.55%2C39.56%202.1%2C47.35%207.2%2C51.82C12.22%2C56.22%2019.98%2C55.71%2024.48%2C50.57L24.64%2C50.39L38.58%2C34.49L43.03%2C38.4C39.56%2C38.38%2035.75%2C39.65%2033.24%2C42.51C28.77%2C47.61%2029.21%2C55.37%2034.42%2C59.94C39.56%2C64.45%2047.35%2C63.9%2051.82%2C58.8C56.22%2C53.78%2055.71%2C46.02%2050.57%2C41.52ZM32.76%2C29.39L36.61%2C32.76L33.24%2C36.6L29.39%2C33.24L32.76%2C29.39ZM57.07%2C16.16C61.02%2C19.61%2061.43%2C25.9%2057.97%2C29.85C54.44%2C33.87%2048.32%2C34.1%2044.37%2C30.64C40.35%2C27.12%2039.97%2C21.18%2043.49%2C17.16C46.95%2C13.21%2053.05%2C12.63%2057.07%2C16.16ZM16.16%2C8.93C19.61%2C4.98%2025.9%2C4.57%2029.85%2C8.03C33.87%2C11.56%2034.1%2C17.68%2030.64%2C21.63C27.12%2C25.64%2021.18%2C26.03%2017.16%2C22.51C13.21%2C19.05%2012.63%2C12.95%2016.16%2C8.93ZM8.93%2C49.84C4.98%2C46.39%204.57%2C40.1%208.03%2C36.15C11.56%2C32.13%2017.68%2C31.9%2021.63%2C35.36C25.65%2C38.88%2026.03%2C44.82%2022.51%2C48.84C19.05%2C52.79%2012.95%2C53.37%208.93%2C49.84ZM49.84%2C57.07C46.39%2C61.02%2040.1%2C61.43%2036.15%2C57.97C32.13%2C54.44%2031.9%2C48.32%2035.36%2C44.37C38.88%2C40.36%2044.82%2C39.97%2048.84%2C43.49C52.79%2C46.95%2053.37%2C53.05%2049.84%2C57.07Z%22%2F%3E%3Cpath%20d%3D%22M50.57%2C107.52L50.39%2C107.36L34.49%2C93.42L38.4%2C88.96C38.38%2C92.44%2039.65%2C96.25%2042.51%2C98.76C47.61%2C103.23%2055.37%2C102.79%2059.94%2C97.58C64.45%2C92.44%2063.9%2C84.65%2058.8%2C80.18C53.78%2C75.78%2046.02%2C76.29%2041.52%2C81.43L41.36%2C81.61L27.42%2C97.51L22.97%2C93.6C26.44%2C93.62%2030.25%2C92.35%2032.76%2C89.49C37.23%2C84.39%2036.79%2C76.63%2031.58%2C72.06C26.44%2C67.55%2018.65%2C68.1%2014.18%2C73.2C9.78%2C78.22%2010.29%2C85.98%2015.43%2C90.48L15.61%2C90.64L31.51%2C104.58L27.6%2C109.03C27.62%2C105.56%2026.35%2C101.75%2023.49%2C99.24C18.39%2C94.77%2010.63%2C95.21%206.06%2C100.42C1.55%2C105.56%202.1%2C113.35%207.2%2C117.82C12.22%2C122.22%2019.98%2C121.71%2024.48%2C116.57L24.64%2C116.39L38.58%2C100.49L43.03%2C104.4C39.56%2C104.38%2035.75%2C105.65%2033.24%2C108.51C28.77%2C113.61%2029.21%2C121.37%2034.42%2C125.94C39.56%2C130.45%2047.35%2C129.9%2051.82%2C124.8C56.22%2C119.78%2055.71%2C112.02%2050.57%2C107.52ZM32.76%2C95.39L36.61%2C98.76L33.24%2C102.6L29.39%2C99.24L32.76%2C95.39ZM57.07%2C82.16C61.02%2C85.61%2061.43%2C91.9%2057.97%2C95.85C54.44%2C99.87%2048.32%2C100.1%2044.37%2C96.64C40.35%2C93.12%2039.97%2C87.18%2043.49%2C83.16C46.95%2C79.21%2053.05%2C78.63%2057.07%2C82.16ZM16.16%2C74.93C19.61%2C70.98%2025.9%2C70.57%2029.85%2C74.03C33.87%2C77.56%2034.1%2C83.68%2030.64%2C87.63C27.12%2C91.64%2021.18%2C92.03%2017.16%2C88.51C13.21%2C85.05%2012.63%2C78.95%2016.16%2C74.93ZM8.93%2C115.84C4.98%2C112.39%204.57%2C106.1%208.03%2C102.15C11.56%2C98.13%2017.68%2C97.9%2021.63%2C101.36C25.65%2C104.88%2026.03%2C110.82%2022.51%2C114.84C19.05%2C118.79%2012.95%2C119.37%208.93%2C115.84ZM49.84%2C123.07C46.39%2C127.02%2040.1%2C127.43%2036.15%2C123.97C32.13%2C120.44%2031.9%2C114.32%2035.36%2C110.37C38.88%2C106.36%2044.82%2C105.97%2048.84%2C109.49C52.79%2C112.95%2053.37%2C119.05%2049.84%2C123.07Z%22%2F%3E%3Cpath%20d%3D%22M116.57%2C-24.48L116.39%2C-24.64L100.49%2C-38.58L104.4%2C-43.04C104.38%2C-39.56%20105.65%2C-35.75%20108.51%2C-33.24C113.61%2C-28.77%20121.37%2C-29.21%20125.94%2C-34.42C130.45%2C-39.56%20129.9%2C-47.35%20124.8%2C-51.82C119.78%2C-56.22%20112.02%2C-55.71%20107.52%2C-50.57L107.36%2C-50.39L93.42%2C-34.49L88.97%2C-38.4C92.44%2C-38.38%2096.25%2C-39.65%2098.76%2C-42.51C103.23%2C-47.61%20102.79%2C-55.37%2097.58%2C-59.94C92.44%2C-64.45%2084.65%2C-63.9%2080.18%2C-58.8C75.78%2C-53.78%2076.29%2C-46.02%2081.43%2C-41.52L81.61%2C-41.36L97.51%2C-27.42L93.6%2C-22.97C93.62%2C-26.44%2092.35%2C-30.25%2089.49%2C-32.76C84.39%2C-37.23%2076.63%2C-36.79%2072.06%2C-31.58C67.55%2C-26.44%2068.1%2C-18.65%2073.2%2C-14.18C78.22%2C-9.78%2085.98%2C-10.29%2090.48%2C-15.43L90.64%2C-15.61L104.58%2C-31.51L109.03%2C-27.6C105.56%2C-27.62%20101.75%2C-26.35%2099.24%2C-23.49C94.77%2C-18.39%2095.21%2C-10.63%20100.42%2C-6.06C105.56%2C-1.55%20113.35%2C-2.1%20117.82%2C-7.2C122.22%2C-12.22%20121.71%2C-19.98%20116.57%2C-24.48ZM98.76%2C-36.61L102.61%2C-33.24L99.24%2C-29.4L95.39%2C-32.76L98.76%2C-36.61ZM123.07%2C-49.84C127.02%2C-46.39%20127.43%2C-40.1%20123.97%2C-36.15C120.44%2C-32.13%20114.32%2C-31.9%20110.37%2C-35.36C106.35%2C-38.88%20105.97%2C-44.82%20109.49%2C-48.84C112.95%2C-52.79%20119.05%2C-53.37%20123.07%2C-49.84ZM82.16%2C-57.07C85.61%2C-61.02%2091.9%2C-61.43%2095.85%2C-57.97C99.87%2C-54.44%20100.1%2C-48.32%2096.64%2C-44.37C93.12%2C-40.36%2087.18%2C-39.97%2083.16%2C-43.49C79.21%2C-46.95%2078.63%2C-53.05%2082.16%2C-57.07ZM74.93%2C-16.16C70.98%2C-19.61%2070.57%2C-25.9%2074.03%2C-29.85C77.56%2C-33.87%2083.68%2C-34.1%2087.63%2C-30.64C91.65%2C-27.12%2092.03%2C-21.18%2088.51%2C-17.16C85.05%2C-13.21%2078.95%2C-12.63%2074.93%2C-16.16ZM115.84%2C-8.93C112.39%2C-4.98%20106.1%2C-4.57%20102.15%2C-8.03C98.13%2C-11.56%2097.9%2C-17.68%20101.36%2C-21.63C104.88%2C-25.64%20110.82%2C-26.03%20114.84%2C-22.51C118.79%2C-19.05%20119.37%2C-12.95%20115.84%2C-8.93Z%22%2F%3E%3Cpath%20d%3D%22M116.57%2C41.52L116.39%2C41.36L100.49%2C27.42L104.4%2C22.96C104.38%2C26.44%20105.65%2C30.25%20108.51%2C32.76C113.61%2C37.23%20121.37%2C36.79%20125.94%2C31.58C130.45%2C26.44%20129.9%2C18.65%20124.8%2C14.18C119.78%2C9.78%20112.02%2C10.29%20107.52%2C15.43L107.36%2C15.61L93.42%2C31.51L88.97%2C27.6C92.44%2C27.62%2096.25%2C26.35%2098.76%2C23.49C103.23%2C18.39%20102.79%2C10.63%2097.58%2C6.06C92.44%2C1.55%2084.65%2C2.1%2080.18%2C7.2C75.78%2C12.22%2076.29%2C19.98%2081.43%2C24.48L81.61%2C24.64L97.51%2C38.58L93.6%2C43.03C93.62%2C39.56%2092.35%2C35.75%2089.49%2C33.24C84.39%2C28.77%2076.63%2C29.21%2072.06%2C34.42C67.55%2C39.56%2068.1%2C47.35%2073.2%2C51.82C78.22%2C56.22%2085.98%2C55.71%2090.48%2C50.57L90.64%2C50.39L104.58%2C34.49L109.03%2C38.4C105.56%2C38.38%20101.75%2C39.65%2099.24%2C42.51C94.77%2C47.61%2095.21%2C55.37%20100.42%2C59.94C105.56%2C64.45%20113.35%2C63.9%20117.82%2C58.8C122.22%2C53.78%20121.71%2C46.02%20116.57%2C41.52ZM98.76%2C29.39L102.61%2C32.76L99.24%2C36.6L95.39%2C33.24L98.76%2C29.39ZM123.07%2C16.16C127.02%2C19.61%20127.43%2C25.9%20123.97%2C29.85C120.44%2C33.87%20114.32%2C34.1%20110.37%2C30.64C106.35%2C27.12%20105.97%2C21.18%20109.49%2C17.16C112.95%2C13.21%20119.05%2C12.63%20123.07%2C16.16ZM82.16%2C8.93C85.61%2C4.98%2091.9%2C4.57%2095.85%2C8.03C99.87%2C11.56%20100.1%2C17.68%2096.64%2C21.63C93.12%2C25.64%2087.18%2C26.03%2083.16%2C22.51C79.21%2C19.05%2078.63%2C12.95%2082.16%2C8.93ZM74.93%2C49.84C70.98%2C46.39%2070.57%2C40.1%2074.03%2C36.15C77.56%2C32.13%2083.68%2C31.9%2087.63%2C35.36C91.65%2C38.88%2092.03%2C44.82%2088.51%2C48.84C85.05%2C52.79%2078.95%2C53.37%2074.93%2C49.84ZM115.84%2C57.07C112.39%2C61.02%20106.1%2C61.43%20102.15%2C57.97C98.13%2C54.44%2097.9%2C48.32%20101.36%2C44.37C104.88%2C40.36%20110.82%2C39.97%20114.84%2C43.49C118.79%2C46.95%20119.37%2C53.05%20115.84%2C57.07Z%22%2F%3E%3Cpath%20d%3D%22M116.57%2C107.52L116.39%2C107.36L100.49%2C93.42L104.4%2C88.96C104.38%2C92.44%20105.65%2C96.25%20108.51%2C98.76C113.61%2C103.23%20121.37%2C102.79%20125.94%2C97.58C130.45%2C92.44%20129.9%2C84.65%20124.8%2C80.18C119.78%2C75.78%20112.02%2C76.29%20107.52%2C81.43L107.36%2C81.61L93.42%2C97.51L88.97%2C93.6C92.44%2C93.62%2096.25%2C92.35%2098.76%2C89.49C103.23%2C84.39%20102.79%2C76.63%2097.58%2C72.06C92.44%2C67.55%2084.65%2C68.1%2080.18%2C73.2C75.78%2C78.22%2076.29%2C85.98%2081.43%2C90.48L81.61%2C90.64L97.51%2C104.58L93.6%2C109.03C93.62%2C105.56%2092.35%2C101.75%2089.49%2C99.24C84.39%2C94.77%2076.63%2C95.21%2072.06%2C100.42C67.55%2C105.56%2068.1%2C113.35%2073.2%2C117.82C78.22%2C122.22%2085.98%2C121.71%2090.48%2C116.57L90.64%2C116.39L104.58%2C100.49L109.03%2C104.4C105.56%2C104.38%20101.75%2C105.65%2099.24%2C108.51C94.77%2C113.61%2095.21%2C121.37%20100.42%2C125.94C105.56%2C130.45%20113.35%2C129.9%20117.82%2C124.8C122.22%2C119.78%20121.71%2C112.02%20116.57%2C107.52ZM98.76%2C95.39L102.61%2C98.76L99.24%2C102.6L95.39%2C99.24L98.76%2C95.39ZM123.07%2C82.16C127.02%2C85.61%20127.43%2C91.9%20123.97%2C95.85C120.44%2C99.87%20114.32%2C100.1%20110.37%2C96.64C106.35%2C93.12%20105.97%2C87.18%20109.49%2C83.16C112.95%2C79.21%20119.05%2C78.63%20123.07%2C82.16ZM82.16%2C74.93C85.61%2C70.98%2091.9%2C70.57%2095.85%2C74.03C99.87%2C77.56%20100.1%2C83.68%2096.64%2C87.63C93.12%2C91.64%2087.18%2C92.03%2083.16%2C88.51C79.21%2C85.05%2078.63%2C78.95%2082.16%2C74.93ZM74.93%2C115.84C70.98%2C112.39%2070.57%2C106.1%2074.03%2C102.15C77.56%2C98.13%2083.68%2C97.9%2087.63%2C101.36C91.65%2C104.88%2092.03%2C110.82%2088.51%2C114.84C85.05%2C118.79%2078.95%2C119.37%2074.93%2C115.84ZM115.84%2C123.07C112.39%2C127.02%20106.1%2C127.43%20102.15%2C123.97C98.13%2C120.44%2097.9%2C114.32%20101.36%2C110.37C104.88%2C106.36%20110.82%2C105.97%20114.84%2C109.49C118.79%2C112.95%20119.37%2C119.05%20115.84%2C123.07Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 66px 66px; background-position: 50% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); } @media (max-width: 767px) { .missao .wrap { gap: 18px; } .missao__texto { font-size: 28px; line-height: 1.26; } } /* ---------- a padronagem de ícones espalhados (do pack) nas seções claras: Como trabalhamos e em volta do painel do Monte ---------- */ .com-icones, .com-icones-simbolo { isolation: isolate; } .com-icones::before, .com-icones-simbolo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 360px 640px; background-repeat: repeat; } .com-icones::before { background-image: url("/identidade/padronagens/icones-espalhado-claro.svg?v=6d4fef32"); -webkit-mask: radial-gradient(ellipse 62% 58% at 50% 48%, rgb(0 0 0 / 0.12) 30%, #000 82%); mask: radial-gradient(ellipse 62% 58% at 50% 48%, rgb(0 0 0 / 0.12) 30%, #000 82%); } /* some atrás do conteúdo */ .com-icones-simbolo::before { background-image: url("/identidade/padronagens/icones-espalhado-simbolo-claro.svg?v=82b46d91"); background-size: 300px 533px; -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 40%, #000 80%); mask: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 40%, #000 80%); } /* só em volta do painel */ /* as capas dos álbuns no visor: 3:2, com uma leve "pilha" de 2 cartões atrás; o álbum aberto fica marcado */ .visor__capas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; padding-top: 8px; } .visor__capa { display: grid; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--cx-branco); text-align: left; cursor: pointer; } .visor__pilha { position: relative; display: block; aspect-ratio: 3 / 2; margin: 10px 10px 0 0; } .visor__pilha::before, .visor__pilha::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); background: #1C1C1C; box-shadow: 0 0 0 1px #2A2A2A; } .visor__pilha::before { transform: translate(10px, -10px); } .visor__pilha::after { transform: translate(5px, -5px); background: #262626; } .visor__pilha img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); } .visor__capa[aria-current="true"] .visor__pilha img { box-shadow: 0 0 0 3px var(--cx-vermelho); } .visor__capa-nome { display: grid; gap: 2px; font: var(--cx-peso-titulo) 17px / 1.3 var(--cx-fonte-titulo); } .visor__capa-nome small { font: 500 15px / 1.3 var(--fonte-texto); color: var(--cx-cinza-300); } .visor__volta { justify-self: start; margin-bottom: 12px; } .visor__albuns { display: grid; gap: 16px; } @media (max-width: 767px) { .visor__capas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .visor__capa-nome { font-size: 15px; } } /* ---------- o convite para quem faz audiovisual: no fim de Quem somos (operador, 20/10), depois das pessoas. No preto da seção, a pílula sobe um tom (grafite #212121 com a Ondas grafite), com o fio interno fino (#333) e o brilho vermelho sutil; o disco vermelho e o botão de contorno branco ficam. Sem movimento (nada de parallax). ---------- */ .convite { margin-top: clamp(40px, 4vw, 56px); } .convite .pilula { max-width: 920px; margin: 0 auto; } .pilula--grafite { background-color: var(--cx-grafite); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23212121%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%232E2E2E%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 50% 0; color: var(--cx-branco); /* o .pilula zera o fundo: aqui volta a Ondas grafite */ --cx-foco: var(--cx-branco); --brilho-x: 40px; --brilho-y: 50%; --brilho-r: 260px; } .pilula--grafite.profundo { box-shadow: inset 0 0 0 1px #333333, 0 18px 44px -24px rgb(0 0 0 / 0.9); } .pilula--grafite.profundo::before { background: linear-gradient(90deg, rgb(33 33 33 / 0) 0, rgb(33 33 33 / 0.72) 26%, rgb(33 33 33 / 0.72) 74%, rgb(33 33 33 / 0) 100%); } /* a Ondas some atrás do texto */ .pilula--grafite.profundo::after { background: radial-gradient(circle at var(--brilho-x) var(--brilho-y), rgb(210 10 46 / 0.16), rgb(210 10 46 / 0) var(--brilho-r)); } .pilula--grafite .pilula__frase { color: var(--cx-branco); } .pilula--grafite .pilula__icone { box-shadow: 0 0 0 4px var(--cx-grafite), 0 0 0 5px rgb(210 10 46 / 0.55); } .convite .pilula.profundo:hover { background-position: 50% 0; } /* sem movimento nesta pílula */ @media (max-width: 767px) { .pilula--grafite { display: grid; justify-items: start; gap: 16px; padding: 24px; border-radius: var(--r2); --brilho-x: 48px; --brilho-y: 48px; } .pilula--grafite .pilula__icone { width: 48px; height: 48px; } .pilula--grafite .pilula__frase { flex: none; } .pilula--grafite .pilula__link { width: 100%; margin-left: 0; justify-content: center; min-height: 48px; } } /* ---------- a escolha do caminho no pop-up do Monte (operador, 20/10: "é aqui onde eu prefiro que os clientes cliquem"): o caminho completo em 1º e em destaque (preto puro com a Ondas sutil, selo vermelho no canto, seta num círculo vermelho); o Rápido secundário, branco com fio fino ---------- */ .caminhos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; } .caminho { position: relative; } .caminho--destaque { gap: 8px; min-height: 196px; padding: 28px 28px 24px; border: 0; color: var(--cx-branco); align-content: start; background-color: var(--cx-preto); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22156%22%20height%3D%2278%22%20viewBox%3D%220%200%20156%2078%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22recorte_modulo%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Crect%20id%3D%22limite_modulo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22none%22%20stroke%3D%22none%22%2F%3E%3Crect%20id%3D%22fundo%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22156%22%20height%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Cg%20id%3D%22motivo%22%20clip-path%3D%22url%28%23recorte_modulo%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22-78%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22-39%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%220%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%2239%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%2278%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22-78%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22117%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2278%22%20fill%3D%22%23000000%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2275.74%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2257.81%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2239.88%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22156%22%20r%3D%2221.94%22%20fill%3D%22none%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%224.52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: var(--escama) calc(var(--escama) / 2); background-position: 100% 0; } /* o .caminho zera o fundo: aqui volta o preto com a Ondas */ .caminho--destaque.profundo::before { background: linear-gradient(100deg, rgb(0 0 0 / 0.86) 0, rgb(0 0 0 / 0.62) 52%, rgb(0 0 0 / 0.12) 100%); } /* a Ondas aparece só à direita, longe do texto */ .caminho--destaque b { font-size: 26px; padding-right: 132px; } .caminho--destaque .caminho__linha { max-width: 30ch; padding-right: 56px; color: var(--cx-cinza-100); font-size: 17px; } .caminho .caminho__selo { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: var(--cx-raio-pilula); background: var(--cx-vermelho); color: var(--cx-branco); font: var(--cx-peso-rotulo) 14px / 1.2 var(--cx-fonte-titulo); letter-spacing: 0.06em; text-transform: uppercase; } .caminho .caminho__seta { position: absolute; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-vermelho); color: var(--cx-branco); transition: background-color var(--cx-dur-1); } .caminho__seta .seta { margin: 0; width: 22px; height: 22px; } .caminho--destaque:hover { border-color: transparent; } .caminho--destaque:hover .caminho__seta { background: var(--cx-vermelho-700); } .caminho--destaque .caminho__linha { font-weight: 300; } .caminho--destaque:hover .seta { transform: translateX(3px); } .caminho--leve { gap: 4px; padding: 20px 20px 16px; border: 1px solid var(--cx-cinza-200); align-content: start; } .caminho--leve b { font-size: 19px; } .caminho--leve .caminho__linha { font-size: 15px; } .caminho--leve .seta { width: 18px; height: 18px; margin-top: 4px; color: var(--cx-cinza-600); } @media (max-width: 767px) { .caminhos { grid-template-columns: minmax(0, 1fr); } .caminho--destaque { min-height: 0; padding: 24px 22px 22px; } .caminho--destaque b { font-size: 24px; } .caminho .caminho__selo { top: 16px; right: 16px; } } /* ---------- o funil do portfólio: a linha de apoio em cima da 1ª pergunta e o aviso do link ---------- */ .tela__intro { color: var(--cx-cinza-600); max-width: 52ch; margin-bottom: 4px; } .campo__erro { margin-top: -6px; font: 500 15px / 1.4 var(--fonte-texto); color: var(--cx-vermelho); } .campo input[aria-invalid="true"] { border-color: var(--cx-vermelho); } /* ---------- o calendário: os números já são da Nunito Sans (a fonte de título); as etiquetas dos dias com 44 px de toque (operador, 20/10) ---------- */ .cal__tira { min-height: var(--cx-alvo-min); padding: 0 14px; } .campo--data { display: grid; gap: 10px; } .cal__dia[aria-pressed="true"]:hover:not(:disabled) { background: var(--cx-vermelho-700); } /* o dia escolhido continua vermelho com o mouse em cima */ /* ---------- o ditado por voz nos campos de texto longo (operador, 20/10): o botão redondo do microfone no canto do campo, 44 px; ouvindo, fica vermelho com o ponto pulsando e "Ouvindo…"; tocar de novo para. Com "reduzir movimento", o ponto não pulsa. Sem a API do navegador, não existe. ---------- */ .ditado-caixa { position: relative; display: grid; } .campo textarea.tem-ditado { padding-bottom: 60px; } .ditado { position: absolute; right: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0; border-radius: var(--cx-raio-pilula); border: 1.5px solid var(--cx-cinza-400); background: var(--cx-branco); color: var(--cx-grafite); cursor: pointer; transition: background-color var(--cx-dur-1), border-color var(--cx-dur-1), color var(--cx-dur-1); } .ditado:hover { border-color: var(--cx-grafite); } .ditado .ico { width: 22px; height: 22px; } .ditado__ponto, .ditado__ouvindo { display: none; } .ditado.is-ouvindo { padding: 0 16px 0 14px; background: var(--cx-vermelho); border-color: var(--cx-vermelho); color: var(--cx-branco); } .ditado.is-ouvindo .ico { display: none; } .ditado.is-ouvindo .ditado__ponto { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--cx-branco); animation: ditado-pulsa 1.2s ease-in-out infinite; } .ditado.is-ouvindo .ditado__ouvindo { display: inline; font: var(--cx-peso-botao) 15px / 1 var(--cx-fonte-titulo); letter-spacing: 0.02em; } @keyframes ditado-pulsa { 50% { transform: scale(0.55); opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .ditado.is-ouvindo .ditado__ponto { animation: none; } } .ditado__nota { margin-top: 6px; font: 300 14px / 1.45 var(--fonte-texto); color: var(--cx-cinza-600); max-width: 52ch; } /* ---------- o anel de foco só com teclado, também depois de foco por código (o código marca o com is-ponteiro no clique e no toque). Os campos de texto mostram o foco pela borda, que não incomoda no clique. ---------- */ .is-ponteiro :focus-visible { outline: none; } .is-ponteiro .opcao input:focus-visible + span, .is-ponteiro .ref input:focus-visible + .ref__capa, .is-ponteiro .servico:has(.servico__link:focus-visible) { outline: none; } .is-ponteiro .compara__faixa:focus-visible ~ .compara__barra i { outline: none; box-shadow: none; } .campo input:focus, .campo textarea:focus, .combo input:focus { border-color: var(--cx-grafite); } /* o e-mail do rodapé cabe na coluna em 768 e 1024 (passava 2 a 10 px da tela): quebra em qualquer ponto só quando não cabe */ /* a coluna Contato do rodapé (operador, 20/10: "só organize"): mais larga; o e-mail numa linha só (nunca quebra); o endereço em 2 linhas, na mesma cor e no mesmo peso dos outros itens; todos com o ícone alinhado à 1ª linha do texto e o mesmo espaço entre eles */ .rodape__grade { grid-template-columns: minmax(220px, 1fr) max-content max-content max-content; column-gap: clamp(32px, 4vw, 64px); } /* as colunas pelo tamanho do conteúdo: a do Contato cabe o endereço em 2 linhas */ .rodape__contato { display: grid; gap: 6px; } .rodape__contato li { display: flex; } .rodape__contato a, .rodape__contato .rodape__end { display: flex; align-items: center; gap: 12px; min-height: var(--cx-alvo-min); font: var(--cx-peso-menu) var(--cx-tam-menu) / 1.35 var(--cx-fonte-titulo); color: var(--cx-cinza-100); } .rodape__contato .rodape__end { align-items: flex-start; } .rodape__end-txt { display: grid; justify-items: start; padding-top: 9px; } /* a 1ª linha do endereço na altura do centro do círculo de 40 px, como nos itens de 1 linha */ /* TODA linha do Contato é um link inteiro, o ícone redondo e o texto (operador, 20/10: "quero todos os botões clicáveis, igual você fez no endereço"): sem sublinhado; no hover e no foco, o texto vai ao branco, o ícone ganha o vermelho de destaque e o círculo clareia; o cursor de mão; o anel de foco do teclado; a área de toque é a linha inteira (≥ 44 px). O endereço é o link do mapa (sem a pílula "Como chegar") */ .rodape__contato a { cursor: pointer; } .rodape__contato .rodape__end-link { align-items: flex-start; } .rodape__contato a .rodape__circ, .rodape__contato a .rodape__circ .ico { transition: border-color var(--cx-dur-1), color var(--cx-dur-1); } .rodape__contato a:hover .rodape__circ, .rodape__contato a:focus-visible .rodape__circ { border-color: rgb(255 255 255 / 0.7); } .rodape__contato a:hover .rodape__circ .ico, .rodape__contato a:focus-visible .rodape__circ .ico { color: var(--cx-vermelho-400); } .rodape__contato .email__txt { white-space: nowrap; font-size: clamp(15px, 1.2vw, 16px); } .rodape__end address { font-style: normal; max-width: none; } .rodape__end address span { display: block; white-space: nowrap; } @media (max-width: 1279px) { .rodape__grade { grid-template-columns: max-content max-content minmax(0, 1fr); } .rodape__marca { grid-column: 1 / -1; } } @media (max-width: 767px) { .rodape__end address span { white-space: normal; } } /* no celular não cabe em 2 linhas a 16 px: a rua quebra onde couber (3 linhas) */ @media (max-width: 767px) { .rodape__grade { grid-template-columns: minmax(0, 1fr); } } /* ---------- celular: a sobra da altura de tela (a seção tem no mínimo a tela menos 48 px) fica ENTRE os blocos da seção, nunca nas pontas: o vão entre as seções continua 112 px em qualquer celular. Os Trabalhos andando sozinhos ficavam 48 px mais baixos que a tela em 390 × 844 e o vão ia a 135 px (parecer do designer-revisor, lote 1). Vem por último para valer sobre o alinhamento de cada seção. ---------- */ @media (max-width: 767px) { .trabalhos, .cariri, .quem { justify-content: space-between; } .o-que > .wrap, .como > .wrap { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; } } /* ---------- o topo: a pílula vermelha "Monte seu projeto" vira contorno branco enquanto um botão vermelho principal da própria seção está na tela (CIA, 20/10: nunca 2 vermelhos cheios na mesma tela; vale para a página inteira, inclusive a capa). O topo é sempre escuro (transparente sobre o vídeo ou preto), por isso o contorno é branco. A troca é suave e volta ao vermelho quando o botão sai. O disco do WhatsApp segue como está. ---------- */ .topo__monte { transition: background-color var(--cx-dur-2) var(--cx-curva-suave), border-color var(--cx-dur-2) var(--cx-curva-suave), color var(--cx-dur-2) var(--cx-curva-suave); } .topo.tem-vermelho .topo__monte { background: transparent; border-color: var(--cx-branco); color: var(--cx-branco); } .topo.tem-vermelho .topo__monte:hover { background: rgb(255 255 255 / 0.12); } /* ---------- LOTE 5 (21/10): os bloqueios da revisão final. Vem por último para valer sobre as regras de cada seção ---------- */ /* a sala: a CAPA NOSSA no palco antes de tocar (operador pela CIA: "os vídeos FICAM, só a CAPA muda"). A foto do trabalho e o play em traço branco (o selo da capa, sem disco vermelho). O player carrega por baixo ao tocar; a capa fica sem clique (o 2º toque do iPhone passa direto para o player) e sai em fade quando o vídeo começa. Com "reduzir movimento", sem fade e sem pulso */ .sala__capa { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; overflow: hidden; background: var(--cx-grafite); cursor: pointer; transition: opacity 420ms var(--cx-curva-suave), visibility 0s linear 0s; } .sala__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; } .sala__capa::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0.38) 0, rgb(0 0 0 / 0.12) 34%, rgb(0 0 0 / 0) 60%); } /* só o miolo escurece, para o play ler sobre qualquer foto */ /* o play é um anel DUPLO: o traço branco entre o miolo escuro (preto a 50%) e uma faixa escura de 3 px por fora (preto a 42%). Assim o branco fica a 4,5:1 ou mais em qualquer capa, até numa toda branca (medido: o traço simples dava 2,2:1 sobre o céu claro de 7 capas) */ .sala__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 2px solid var(--cx-branco); display: grid; place-items: center; color: var(--cx-branco); background: rgb(0 0 0 / 0.5); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.42), 0 6px 24px rgb(0 0 0 / 0.35); transition: transform var(--cx-dur-2) var(--cx-curva-saida), background-color var(--cx-dur-1); } .sala__play svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .sala__capa:hover .sala__play { transform: scale(1.06); background: rgb(0 0 0 / 0.62); } } .sala__capa:focus-visible { outline: 3px solid var(--cx-branco); outline-offset: -8px; box-shadow: inset 0 0 0 11px rgb(0 0 0 / 0.6); } .sala__palco.is-carregando .sala__capa { pointer-events: none; cursor: default; } .sala__palco.is-carregando:not(.is-esperando) .sala__play { animation: sala-carrega 1.1s var(--cx-curva-suave) infinite; } @keyframes sala-carrega { 50% { opacity: 0.4; } } .sala__palco.is-tocando .sala__capa { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 420ms var(--cx-curva-suave), visibility 0s linear 420ms; } @media (max-width: 767px) { .sala__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } .sala__play svg { width: 28px; height: 28px; margin-left: 3px; } } @media (prefers-reduced-motion: reduce) { .sala__capa, .sala__palco.is-tocando .sala__capa, .sala__play { transition: none; } .sala__palco.is-carregando .sala__play { animation: none; } } /* O que fazemos: o ponto do número em BRANCO nos 3 cartões (o vermelho do "03." caía sobre a banana verde); o visor de O Cariri marca a miniatura da foto aberta com o anel BRANCO (o vermelho abraçava a foto verde). Vermelho nunca encosta no verde */ .servico__num i { color: var(--cx-branco); } .visor__mini[aria-current="true"] { outline-color: var(--cx-branco); } .visor__mini[aria-current="true"]:focus-visible { outline-width: 4px; outline-offset: 5px; } /* O Cariri: a faixa vai de ponta a ponta, como as outras 3 (em 1024 e 1440 ela era cortada numa linha reta a 58 e 112 px da borda). A janela sai da .wrap até a borda da tela e o trilho começa no mesmo lugar (o padding devolve a margem); a largura das fotos não muda */ .carrossel--cariri.is-esteira .laco__janela { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* os pop-ups: o "Próximo" desativado em cinza neutro (era o vermelho a 40%, um rosa-claro; o operador vetou o rosado em 19/10) */ .janela .bt.is-inativo, .janela .bt.is-inativo:hover, .janela .bt.is-inativo:active { opacity: 1; background: var(--cx-cinza-100); border-color: var(--cx-cinza-100); color: var(--cx-cinza-400); cursor: not-allowed; } .janela .bt.is-inativo .seta { transform: none; } /* a lista de cidades à vista: no computador e no tablet, o passo da cidade abre a janela na altura máxima (a lista não fica atrás do pé); o código rola a janela até o fim da lista */ @media (min-width: 768px) { .janela__caixa:has(.tela:not([hidden]) .combo) { height: min(88vh, 900px); } } /* o resumo no celular estreito: o "Enviar pelo WhatsApp" cabe inteiro (de 320 a 360 ele saía da tela). Com o Enviar à vista, o Voltar fica só com a seta, num círculo de 44 px (o nome "Voltar" continua para o leitor de tela), e o Enviar ocupa o resto da linha */ @media (max-width: 419px) { .janela__pe:has(#j-enviar:not([hidden])) #j-voltar { flex: none; width: 44px; min-width: 44px; padding: 0; gap: 0; } .janela__pe:has(#j-enviar:not([hidden])) #j-voltar span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .janela__pe:has(#j-enviar:not([hidden])) .janela__pe-dir { flex: 1 1 auto; min-width: 0; } .janela__pe:has(#j-enviar:not([hidden])) #j-enviar { width: 100%; padding-inline: 12px; } } /* texto, palavra sozinha na linha (1024 e 320): o texto de apoio dos 3 cartões em linhas equilibradas (é 1 frase curta), sem palavra de 1 letra no fim da linha (  no HTML); a missão no celular estreito escala com a tela (7vw), para "audiovisuais", "transmitem" e "impacto" não ficarem sozinhos (de 320 a 389 ela quebra igual a 390: 6 linhas, os 3 destaques inteiros). O respiro de cima e de baixo devolve a altura que a letra menor tirou (6 linhas × 1,26 × a diferença para 28 px, metade em cada lado: até 21 px em 320, 11 px em 360), e a seção fica com a mesma altura de 390. Mais baixa, um gesto grande do dedo passava direto por ela (conferência de rolagem, 360 × 740, subindo; medido antes e depois) */ .servico__texto { text-wrap: balance; } @media (max-width: 389px) { .missao__texto { font-size: clamp(22px, 7vw, 28px); } .missao__texto .destaque { white-space: nowrap; } .missao { padding-top: calc(var(--pad-cima) + (28px - max(22px, 7vw)) * 3.78); padding-bottom: calc(var(--pad-baixo) + (28px - max(22px, 7vw)) * 3.78); } } /* a sala no computador (≥ 1200 px): a ficha AO LADO do vídeo, numa coluna de 260 a 320 px, para a fileira "Mais de" aparecer sem rolar em 1280 × 720, 1366 × 768 e 1440 × 900 (a ficha embaixo do vídeo empurrava o título dela para 900 a 948 px). O vídeo fica do tamanho que a altura da janela deixa (o mesmo de antes em 1440 × 900) e o bloco vídeo + ficha fica centralizado; o fio e o "Mais de" vão na largura do bloco. Abaixo de 1200 px (tablet e celular), a ficha continua embaixo do vídeo */ @media (min-width: 1200px) { .sala__in { --sala-ficha: clamp(260px, 22vw, 320px); width: min(100% - 2 * var(--margem), 1440px); grid-template-columns: min(calc(100% - var(--sala-ficha) - 32px), calc((100svh - 330px) * 16 / 9)) var(--sala-ficha); justify-content: center; column-gap: 32px; } .sala__topo, .sala__fio, .sala__mais { grid-column: 1 / -1; } .sala__palco, .sala__ficha, .sala__fio { max-width: none; margin-inline: 0; } .sala__palco { grid-column: 1; width: 100%; } .sala__ficha { grid-column: 2; align-self: start; flex-direction: column; align-items: stretch; gap: 22px; } .sala__acoes, .sala__ficha.sem-rotulo .sala__acoes { padding-top: 0; flex-direction: column; align-items: stretch; } .sala__acoes .bt { width: 100%; justify-content: flex-start; } } .sala__nw { white-space: nowrap; } /* o "·" do título da sala preso à palavra de antes (lote 5) */ /* ---------- LOTE 6 (21/10): os bloqueios da revisão final, rodada 2 ---------- */ /* a sala PAUSADA: a capa nossa volta por cima do player, com o play (pausado, o YouTube mostra "Mais vídeos" com as capas do canal, uma delas com criança). Tocar nela manda o player tocar; enquanto espera, ela fica sem clique (o 2º toque do iPhone passa direto para o player) */ .sala__palco.is-tocando.is-pausado .sala__capa { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; transition: opacity 160ms var(--cx-curva-suave), visibility 0s linear 0s; } .sala__palco.is-tocando.is-pausado.is-carregando .sala__capa { pointer-events: none; cursor: default; } @media (prefers-reduced-motion: reduce) { .sala__palco.is-tocando.is-pausado .sala__capa { transition: none; } } /* a fileira "Mais de" da sala: a contagem ("1–4 de 5") fica só para o leitor de tela, em qualquer largura, como nos outros carrosséis (regra do operador: "nada de contagem de trabalhos"). Ficam as setas. Sem largura mínima e presa no canto (o contador escondido alargava a página em 768) */ .sala__mais .carrossel__conta, .fileira__cabeca .carrossel__conta { display: block; position: absolute; left: 0; top: 0; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sala__mais .carrossel__conta[hidden] { display: none; } /* o menu do celular: 1 vermelho cheio só (o "Monte seu projeto"); o WhatsApp em contorno branco. Até 390 o texto dele quebra em 2 linhas: com 8 px em cima e embaixo, a pílula fica com os mesmos 56 px do "Monte seu projeto" (com 10 px, ia a 59) */ .painel__wa { padding-block: 8px; } /* o vídeo da abertura (lote 6, operador): começa em 7 s e só aparece TOCANDO (o 1º timeupdate a partir de 7 s), num fade curto de 300 ms; até lá, a foto da capa fica por cima. O ponto de foco do corte em pé do vídeo (16:9 no celular em pé) é uma variável própria, --foco-video-x, em 50% (o centro; a CIA confere com o operador). A foto da capa segue com o --foco-x dela (58% no celular) */ .abertura__quadro { --foco-video-x: 50%; } .abertura__video iframe { left: var(--foco-video-x, 50%); transform: translate(calc(-1 * var(--foco-video-x, 50%)), -50%); transition: opacity 300ms var(--cx-curva-saida); } /* Como trabalhamos no celular (lote 6, operador: "quero que no celular tenha rolagem automática, loop"): as 3 etapas no laço das outras faixas. A janela é o próprio carrossel, de ponta a ponta da tela; o trilho anda por transform e o cartão tem a largura de antes (84% da faixa à vista). No tablet e no computador (e no celular deitado), as cópias somem e fica o carrossel e a grade de antes */ @media (max-width: 767px) { .carrossel--etapas.is-esteira { --w: calc((100vw - 2 * var(--margem)) * 0.84); overflow-x: hidden; overflow-x: clip; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); } .carrossel--etapas.is-esteira .carrossel__trilho { width: max-content; margin-inline: 0; padding-inline: 0; } } @media (min-width: 768px) { .carrossel--etapas.is-esteira [data-clone], .carrossel--etapas.is-esteira .desliza { display: none; } .carrossel--etapas.is-esteira .carrossel__trilho { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; touch-action: auto; } } @media (min-width: 1024px) { .carrossel--etapas.is-esteira .carrossel__trilho { overflow: visible; } }