/* ============================================================================
   DEPAULO Design: a folha de estilo única do site.
   Paleta e medidas vêm do site que estava no ar em 16/09/2026 (site/home3.php e irmãos):
   as mesmas cores, tamanhos, espaçamentos, sombras e efeitos, agora em classes de nome legível.
   ============================================================================ */
/* ----------------------------------------------------------------------------
   A régua da DEPAULO (onda A, item A.3, 23/09/2026)

   Valores de fábrica com peso mínimo. O seletor "html" pesa (0,0,1), menos que o ":root" (0,1,0)
   que o painel do Elementor imprime nas Variáveis do V4 (":root { --azul: ... }"): a variável de
   mesmo nome escrita pelo painel sempre vence, em qualquer ordem de carregamento. Se o painel não
   carregar, se o Elementor Pro sair ou se alguém apagar a variável, o valor daqui continua valendo
   e o site não quebra.
   Por que "html" e não ":where(:root)": o navegador que não conhece :where() (Safari e iPhone antes
   do iOS 14, Chrome antes do 88, Samsung Internet antes do 15) joga fora o bloco inteiro, e nele o
   site ficaria sem cor, sem fonte e sem a distância da rolagem. O "html" funciona em todo navegador
   que entende variável.

   Todo valor abaixo já está em uso no site hoje. As 21 variáveis que já existiam continuam com os
   mesmos nomes e valores (só o seletor mudou, de :root para html). As novas ainda não são lidas por
   nenhuma regra: a troca das cores e medidas escritas à mão por estas variáveis acontece na onda B,
   uma família de seção por vez, com print antes e depois. A tabela completa, com o que cada nome
   vai absorver, está em ondaA-2026-09-23/tokens/tokens.md.

   Regra da casa: cor, tamanho, espaço ou canto novo não entra escrito direto numa regra. Ou ele já
   existe aqui, ou entra aqui primeiro, com nome e uso.
   ---------------------------------------------------------------------------- */
html {
	/* cores que já existiam */
	--azul: #035FDD; --azul-hov: #024BB5; --azul-prof: #07007A; --preto-azul: #000A1A; --quase-preto: #0B0F19;
	--cartao-esc: #1F2937; --chumbo: #111827; --branco: #FFFFFF; --cinza-1: #F9FAFB; --cinza-2: #F3F4F6;
	--cinza-tx: #656C7A; --cinza-tx2: #374151; --cinza-bor: #E5E7EB; --verde: #00E676; --verde-tx: #06301C;
	/* cores novas: cada uma é o tom mais usado do seu grupo e vai absorver os tons quase iguais na onda B */
	--azul-claro: #EAF2FF;         /* fundo azul-clarinho: opção escolhida no montador, selo de número, aviso.
	                                  Não é o #EDF4FF do bloco de mensalidades de Preços: até a onda B, quem
	                                  precisar daquele tom escreve o valor, sem var(--azul-claro) */
	--linha-azulada: #D7E0EB;      /* borda cinza-azulada dos cartões claros (montador e orçamento) */
	--texto-sobre-escuro: #D1D5DB; /* texto corrido em seção escura: 13 para 1 de contraste no quase-preto */
	--texto-apoio-escuro: #9CA3AF; /* rótulo e texto secundário em seção escura: 7,5 para 1 no quase-preto */
	--erro: #B91C1C;               /* só mensagem de erro e "remover item"; o Livro da Marca não tem vermelho */
	--azul-destaque: #73A9FF;      /* trecho em destaque de título sobre fundo escuro (topo de Quem somos).
	                                  Decisão 16 do dono, 25/09/2026: o tom ganhou nome e continua o mesmo */
	/* fontes (iguais a antes) */
	/* A.5: a primeira família de cada pilha vem da Variável de fonte do painel do Elementor
	   (fonte-titulo, fonte-texto); o valor de fábrica está na regra html logo depois deste bloco.
	   Na tela o resultado é o mesmo de antes do A.5: Sora e Inter. */
	--sora: var(--fonte-titulo, 'Sora'), 'Sora Fallback', Arial, sans-serif; --inter: var(--fonte-texto, 'Inter'), 'Inter Fallback', Arial, sans-serif;
	/* texto em caixa alta: a fonte de espera precisa de outra medida, porque as maiúsculas da Arial são mais largas que as da Inter */
	--inter-caixa: var(--fonte-texto, 'Inter'), 'Inter Fallback Caixa', Arial, sans-serif;
	--sora-caixa: var(--fonte-titulo, 'Sora'), 'Sora Fallback Caixa', Arial, sans-serif;
	--sora-num: var(--fonte-titulo, 'Sora'), 'Sora Fallback Numero', Arial, sans-serif;
	/* tamanhos de letra: seis degraus de texto, o título de seção e o título principal.
	   O número no nome é o tamanho do degrau: um degrau não muda de valor; o que muda, quando for
	   preciso, é qual degrau uma regra usa. Os papéis (titulo-secao, titulo-principal) podem mudar. */
	--texto-12: 12px; --texto-14: 14px; --texto-16: 16px; --texto-18: 18px; --texto-22: 22px; --texto-28: 28px;
	--titulo-secao: 38px; --titulo-secao-celular: 30px;
	--titulo-principal: clamp(36px, 5vw, 58px);
	/* espaços: a escala do DESIGN.md com o degrau de 20 px, mais o respiro das seções, a margem
	   lateral e a largura do conteúdo */
	--esp-4: 4px; --esp-8: 8px; --esp-12: 12px; --esp-16: 16px; --esp-20: 20px; --esp-24: 24px; --esp-32: 32px;
	--esp-48: 48px; --esp-64: 64px; --esp-100: 100px;
	--secao-respiro: 100px; --secao-respiro-celular: 60px;
	--margem-lateral: 24px; --margem-lateral-celular: 18px;
	--largura-conteudo: 1300px;
	/* cantos: campo e botão pequeno, imagem, cartão, bloco grande (topo, segmentos, bio), pílula */
	--raio-campo: 8px; --raio-imagem: 12px; --raio-cartao: 20px; --raio-bloco: 30px; --raio-pilula: 999px;
	/* quanto a rolagem deixa acima da seção, por causa do cabeçalho fixo (já existia) */
	--rolagem: 110px;
}
/* Onda A, item A.5 (23/09/2026): valor de fábrica das duas Variáveis de fonte do painel do Elementor.
   As cinco pilhas de fonte do bloco acima leem fonte-titulo (Sora, também nos rótulos e nos números)
   e fonte-texto (Inter). A Variável do painel sai no CSS do kit como ":root { --fonte-titulo:Sora; }",
   que pesa mais que o seletor html daqui e vence em qualquer ordem; sem o painel, vale o valor daqui,
   que é o nome de hoje. Fica numa regra própria, e não dentro do bloco da régua do A.3, para este
   passo casar com o dp.css com ou sem o A.3; o seletor é o mesmo da régua, de peso mínimo. As pilhas
   têm ainda a reserva escrita nelas mesmas, igual a esta. No painel os nomes vão sem aspas (Sora,
   Inter): com aspas, o seletor de fontes do editor não reconhece a família. */
html { --fonte-titulo: 'Sora'; --fonte-texto: 'Inter'; }
.dp, .dp * { box-sizing: border-box; }
.dp { font-family: var(--inter); color: var(--cinza-tx2); line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* regras genéricas com especificidade zero (:where), para as classes de cada seção vencerem sempre */
.dp :where(h1, h2, h3, h4) { font-family: var(--sora); margin: 0; color: var(--chumbo); letter-spacing: 0; }
.dp :where(p) { margin: 0; }
.dp :where(ul) { list-style: none; margin: 0; padding: 0; }
.dp :where(a) { color: inherit; text-decoration: none; }
.dp :where(img, svg) { max-width: 100%; height: auto; display: block; }
/* a largura lê a escolha "Largura do conteúdo" da aba Aparência (onda A, 23/09/2026); sem escolha,
   os 1.300 px de sempre */
.dp-wrap { width: 100%; max-width: var(--sec-largura, 1300px); margin: 0 auto; }
.dp-centro { display: flex; justify-content: center; }
.dp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* o link "Ir para o conteúdo" do tema fica fora da tela até receber foco pelo teclado (a folha
   do tema que fazia isso não entra na página v2) */
body.dp-v2 .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--branco); color: var(--azul); padding: 12px 18px; border-radius: 8px; }
body.dp-v2 .skip-link:focus { left: 16px; top: 16px; }
.dp :focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.dp-ico { flex: 0 0 auto; }
.dp-il { width: 100%; height: auto; }
/* Onda B (B.6), 23/09/2026: cada widget com ilustração ganhou no painel um campo de imagem que, preenchido,
   entra no lugar do desenho. A imagem recebe a mesma classe .dp-il e ocupa a mesma caixa do desenho,
   inteira, sem cortar (object-fit). Os ícones dos segmentos têm 32 px, como o desenho. */
img.dp-il { object-fit: contain; }
.dp-seg__ico img { width: 32px; height: 32px; }

/* ---------- cabeçalho de seção (rótulo, título, texto de abertura) ---------- */
.dp-cab { display: flex; flex-direction: column; width: 100%; }
.dp-cab--centro { align-items: center; text-align: center; }
.dp-cab--esq { align-items: flex-start; text-align: left; }
/* Onda B (B.3, item 6 da especificação): quando o título do cabeçalho de seção é o título principal da
   página (h1, com a classe .dp-titulo-principal; hoje, só no montador), os vãos são os do título
   principal: 16 px do rótulo até ele e 24 px dele até o texto de abertura. */
.dp-cab .dp-titulo-principal { margin: var(--esp-16, 16px) 0 var(--esp-24, 24px); }
/* onda B (B.3): o rótulo sai no azul da marca em todo fundo claro, como já estava em Preços, Quem
   somos e Contato e como a aba Aparência já faz; nas seções escuras continua o cinza da regra abaixo */
.dp-rotulo { font-family: var(--sora-caixa); font-size: var(--texto-12, 12px); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--azul); }
.dp-h2 { font-size: var(--titulo-secao, 38px); font-weight: 700; line-height: 1.2; margin: var(--esp-12, 12px) 0; color: var(--chumbo); text-wrap: balance; }
/* onda B (B.3): o texto de abertura sai na cor do texto corrido (#374151), a mesma que a aba Aparência
   usa nos fundos claros; 18 px no computador e no celular */
.dp-lead { font-size: var(--texto-18, 18px); line-height: 1.6; color: var(--cinza-tx2); max-width: var(--largura-leitura, 760px); }
.dp-lead--curto { max-width: 700px; font-size: 16px; }
.dp-cab--claro .dp-h2 { color: var(--branco); }
.dp-cab--claro .dp-lead { color: var(--texto-apoio-escuro, #9CA3AF); }
/* o rótulo do FAQ saiu desta lista (onda A, 23/09/2026): a cor dele passou para a seção do FAQ, com
   variável. O valor sem escolha continua #9CA3AF, porque o cabeçalho do FAQ também é dp-cab--claro */
.dp-cab--claro .dp-rotulo, .dp-planos .dp-rotulo, .dp-port .dp-rotulo, .dp-ars .dp-rotulo { color: var(--texto-apoio-escuro, #9CA3AF); }
@media (max-width: 767px) { .dp-h2 { font-size: var(--titulo-secao-celular, 30px); } }

/* ---------- botões ---------- */
/* onda B (B.3): o botão principal. Espaço interno na escala (16 e 32 px, antes 15 e 30), altura mínima
   de 44 px para o dedo, canto e texto pela régua, e a transição só nas propriedades que mudam no mouse
   (antes "all") */
.dp-bt { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-8, 8px); font-family: var(--bt-fonte, var(--inter-caixa)); font-weight: 600; font-size: var(--texto-14, 14px); letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; padding: var(--esp-16, 16px) var(--esp-32, 32px); min-height: var(--alvo-toque, 44px); border-radius: var(--raio-campo, 8px); background: var(--azul); color: var(--branco); border: 2px solid var(--azul); cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease; text-align: center; }
.dp-bt:hover { background: var(--azul-hov); border-color: var(--azul-hov); color: var(--branco); }
.dp-bt--branco { background: var(--branco); color: var(--azul); border-color: var(--branco); }
.dp-bt--branco:hover { background: var(--azul-claro, #EAF2FF); border-color: var(--azul-claro, #EAF2FF); color: var(--azul); }
.dp-bt--vazado { background: transparent; color: var(--branco); border-color: transparent; }
.dp-bt--vazado:hover { background: rgba(255,255,255,.12); border-color: var(--branco); color: var(--branco); }
.dp-bt--contorno { background: transparent; color: var(--azul); border-color: var(--azul); }
.dp-bt--contorno:hover { background: var(--azul); color: var(--branco); }
/* o antigo botão mini é o botão compacto (a classe continua, para não mexer no HTML de hoje) */
.dp-bt--mini { font-size: var(--texto-12, 12px); padding: var(--esp-12, 12px) var(--esp-20, 20px); }
/* o botão de largura inteira tem o tamanho do botão principal; para o pequeno, some .dp-bt--compacto */
.dp-bt--bloco { width: 100%; }
.dp-bt--pilula { border-radius: 50px; text-transform: none; letter-spacing: 0; font-size: 16px; padding: 16px 32px; background: var(--branco); color: var(--azul); border-color: var(--branco); box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.dp-bt--pilula:hover { background: transparent; color: var(--branco); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,.2); }
.dp-bt--inverte:hover { background: var(--branco); border-color: var(--branco); color: var(--azul); animation: dpFlutuarBotao 1.5s ease-in-out infinite; }
.dp-bt--brilho { position: relative; overflow: hidden; }
.dp-bt--brilho::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,.5), transparent); animation: dpShine 6s infinite; }
.dp-bt--brilho:hover, .dp-bt--flutua:hover { animation: dpFlutuarBotao 1.5s ease-in-out infinite; }
/* .dp-bt--flutua: o espaço interno próprio (16 e 36 px) saiu na onda B e o botão usa o do .dp-bt.
   A classe continua valendo para a flutuação com o mouse em cima (regra logo acima). */

/* ----------------------------------------------------------------------------
   Componentes da especificação única (onda B, item B.3, 23/09/2026)

   O que é: as peças que a especificação (ESPEC.md) define e que ainda não existiam como classe.
   Cada família da onda B passa a usar estas peças no lugar das medidas escritas à mão na sua seção.
   Sozinho, este bloco não muda nada na tela: nenhuma página tem hoje as classes novas, e as
   variáveis novas só são lidas por elas (provado nas três rodadas de medicoes/simulacao/so-bloco-r1 a r3:
   zero diferença contra o site de hoje).

   Onde entra: no dp.css, logo depois do bloco "botões" e antes de "listas com marcador", para as
   classes novas de botão virem depois das variantes que já existem (o empate de peso se resolve
   pela ordem).

   Regras que valem para o bloco inteiro:
   - toda medida vem da régua do topo do arquivo (onda A) ou de uma variável declarada aqui, com
     nome e uso. Nenhum número novo: cada valor abaixo já estava em uso no site ou no Livro da Marca;
   - peso baixo: uma classe só, sem !important, sem :is(), :where() ou :has() (um navegador antigo
     que não conhece esses seletores jogaria fora a regra inteira);
   - quando uma declaração usa min() ou max(), a linha anterior repete a mesma propriedade num
     formato que todo navegador entende. Quem não conhece a segunda fica com a primeira.
   ---------------------------------------------------------------------------- */
html {
	/* alvo de toque: 44 px nos botões (DESIGN.md, seção 6) e 24 px no link que fica sozinho numa
	   linha (critério 2.5.8 da WCAG; link dentro de uma frase não precisa) */
	--alvo-toque: 44px; --alvo-link: 24px;
	/* largura máxima do texto de abertura: a do .dp-lead, a mais usada hoje (12 seções) */
	--largura-leitura: 760px;
	/* as duas sombras da casa, com os valores do Livro da Marca: "suave, para cartão comum" em
	   repouso e "média" para o que flutua ou recebe o mouse. As Variáveis do Elementor não têm tipo
	   para sombra, então estas duas moram só aqui (não vão para o painel) */
	--sombra-repouso: 0 4px 20px rgba(0,0,0,.05);
	--sombra-destaque: 0 25px 50px -10px rgba(0,0,0,.15);
	/* fonte dos botões: Sora Semibold, como pede o Livro da Marca (decisão 18 do dono, 25/09/2026; antes,
	   Inter). O peso 600 está na regra .dp-bt. Os botões da loja leem esta mesma variável */
	--bt-fonte: var(--sora-caixa);
}

/* ---------- título principal (o h1 de cada página) ----------
   Sora 700 (decisão do dono), tamanho da Variável --titulo-principal, a fórmula de hoje:
   clamp(36px, 5vw, 58px). A segunda linha de tamanho só age abaixo de 360 px de largura, onde o
   título passa a ser 10% da tela (32 px em 320) e nunca menos que o degrau de 28 px; de 360 px para
   cima o resultado é exatamente a fórmula de hoje. Assim o título deixa de quebrar em sete linhas
   num celular pequeno sem criar mais uma largura de quebra. A cor não vem daqui: cada seção decide
   pelo fundo (chumbo no claro, branco no escuro e no azul). */
.dp-titulo-principal {
	font-family: var(--sora); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance;
	font-size: var(--titulo-principal, clamp(36px, 5vw, 58px));
	font-size: max(var(--texto-28, 28px), min(var(--titulo-principal, clamp(36px, 5vw, 58px)), 10vw));
}

/* ---------- rótulo em selo ----------
   A única variação do rótulo: a pílula branca do topo azul da home. Mesmo tamanho e peso do
   .dp-rotulo; o texto sai no azul da marca (hoje é #073C91, que não está na régua). */
.dp-rotulo--selo { display: inline-block; background: var(--branco); color: var(--azul); border-radius: var(--raio-pilula, 999px); padding: var(--esp-4, 4px) var(--esp-16, 16px); line-height: 1.6; }

/* ---------- botão compacto ----------
   O segundo tamanho do botão: texto de 12 px e menos espaço dentro, para linhas de tabela, cartões
   estreitos e o cabeçalho no celular. A altura mínima de 44 px vem do .dp-bt; aqui ela é repetida
   para o caso de o botão compacto ser usado numa seção que ainda não herdou o .dp-bt novo. */
.dp-bt--compacto { font-size: var(--texto-12, 12px); padding: var(--esp-12, 12px) var(--esp-20, 20px); min-height: var(--alvo-toque, 44px); }

/* ---------- link solto ----------
   Link que fica sozinho numa linha ("Ver preços", "Ou ligue", "Montar o meu"): Sora 700 de 14 px,
   sublinhado, com no mínimo 24 px de altura para o dedo. Link dentro de uma frase continua como
   texto e não usa esta classe. Numa seção escura, a seção troca só a cor. */
.dp-link-solto {
	display: inline-flex; align-items: center; gap: var(--esp-8, 8px); min-height: var(--alvo-link, 24px);
	font-family: var(--sora); font-weight: 700; font-size: var(--texto-14, 14px); line-height: 1.4;
	color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
	transition: color .25s ease, text-decoration-thickness .25s ease;
}
.dp-link-solto:hover { color: var(--azul-hov); text-decoration-thickness: 2px; }
.dp-link-solto:focus-visible { color: var(--azul-hov); text-decoration-thickness: 2px; }

/* ---------- a seta da casa ----------
   Uma seta só no site inteiro: o ícone "seta" do dp_ico() (SVG de linha, 16 px, na cor do texto).
   Os caracteres que existem hoje (a seta de texto e a seta na diagonal) saem das seções para ela.
   Dentro de um link solto, a seta anda 3 px ao passar o mouse, como já anda hoje no link dos
   cartões de tipos de site. */
.dp-link-solto .dp-ico--seta { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .25s ease; }
.dp-link-solto:hover .dp-ico--seta { transform: translateX(3px); }

/* ---------- numeração ----------
   Só onde a ordem existe de verdade (passos do montador, etapas de como trabalhamos). Dois
   algarismos ("01"), Sora 700 de 16 px, azul, sem fundo: o desenho que o montador e Quem somos já
   usam. A fonte de espera dos números (--sora-num) evita o pulo quando a Sora chega. */
.dp-numero { font-family: var(--sora-num); font-weight: 700; font-size: var(--texto-16, 16px); line-height: 1.3; letter-spacing: 0; color: var(--azul); }

/* ---------- cartão ----------
   Para widget novo ou seção que for remontada: fundo branco, borda cinza, canto de 20 px e a sombra
   de repouso; com o mouse, borda azul e a sombra de destaque. A subida de cada seção (quando existe)
   continua na regra da seção, porque cada uma tem a sua. */
.dp-cartao { background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-repouso); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.dp-cartao:hover { border-color: var(--azul); box-shadow: var(--sombra-destaque); }

/* ---------- aviso ----------
   A nota com traço azul à esquerda, no fundo azul-claro dos cartões. É o destino da caixa laranja
   de Preços (decisão do dono: o laranja sai da paleta). Texto de 14 px no cinza de texto corrido. */
.dp-aviso { background: var(--azul-claro, #EAF2FF); border-left: 3px solid var(--azul); border-radius: 0 var(--raio-campo, 8px) var(--raio-campo, 8px) 0; color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.55; padding: var(--esp-12, 12px) var(--esp-16, 16px); }
.dp-aviso a { color: var(--azul); font-weight: 600; text-decoration: underline; }

/* ---------- faixa e seção: a margem lateral única e o respiro ----------
   .dp-faixa: o fundo vai de ponta a ponta e o conteúdo começa na margem lateral da régua
   (24 px no computador, 18 no celular). Com um .dp-wrap dentro (1.300 px no centro), o conteúdo
   começa a max(24, (largura da tela - 1.300) / 2) px da borda: 33 px numa tela de 1.366. É a mesma
   conta das seções de hoje, e é o que o cabeçalho e o rodapé passam a usar.
   .dp-secao: a faixa com o respiro da régua em cima e embaixo (100 px no computador, 60 no celular). */
.dp-faixa { padding-left: var(--margem-lateral, 24px); padding-right: var(--margem-lateral, 24px); }
.dp-secao { padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
@media (max-width: 767px) {
	.dp-faixa { padding-left: var(--margem-lateral-celular, 18px); padding-right: var(--margem-lateral-celular, 18px); }
	.dp-secao { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
}

/* ---------- listas com marcador ---------- */
.dp-lista { display: flex; flex-direction: column; gap: 8px; }
/* onda B, família home: a lista só aparece na home (como funciona e o que você recebe); texto em 16 px
   (era 15) e, no fundo escuro, o texto corrido do escuro (--texto-sobre-escuro, era #E5E7EB) */
.dp-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--texto-16, 16px); line-height: 1.5; color: var(--cinza-tx2); }
.dp-lista li .dp-ico { margin-top: 3px; }
.dp-lista--azul li .dp-ico { color: var(--azul); }
.dp-lista--verde li .dp-ico { color: var(--verde); }
.dp-lista--claro li { color: var(--texto-sobre-escuro, #D1D5DB); }

/* ---------- animações de entrada (onda A, item A.7, 23/09/2026) ----------
   Entrou no lugar do bloco "animações de entrada: sem JavaScript tudo fica visível" (as regras
   .dp-js .dp-anim, .dp-anim.dp-vis, os dois data-dp-anim e .dp-seco). As @keyframes antigas
   (dpFadeInUp, dpFadeIn, dpSlideInLeft) ficam sem uso e saem na limpeza da onda B.

   O que mudou, e por quê (auditoria de 22/09/2026, achado VS1):
   - antes, os blocos animados da home nasciam com opacidade zero e escondidos (visibility: hidden)
     até a rolagem chegar neles. Na abertura, o leitor de tela alcançava 28 dos 81 títulos, e quem
     pulava para uma seção (menu, tecla End, link com #) via blocos vazios;
   - agora o texto nasce legível. Nenhuma regra deixa texto transparente ou escondido em momento
     nenhum: a animação mexe só na posição (a propriedade translate), nunca na opacidade;
   - só cartões e ilustrações se mexem: sobem 16 px ao entrar na tela, em 0,4 s, com atraso de no
     máximo 150 ms. O que já aparece na abertura da página nunca se mexe;
   - quem prepara é o dp.js (classe dp-espera), e só o que ainda está abaixo da tela. Sem JavaScript,
     sem IntersectionObserver ou com "reduzir movimento", nada é preparado.

   Dois cuidados técnicos, cada um com o seu motivo:
   - translate, e não transform: a subida soma com o transform que o cartão já tem (a escala do painel
     da diferença, a elevação no hover) em vez de apagá-lo. A animação antiga, com "fill-mode both",
     prendia transform: none no último quadro e desligava a elevação dos cartões do Arsenal, dos Tipos
     e das Etapas ao passar o mouse. Com a nova, a elevação que o CSS sempre pediu passa a aparecer
     (mudança aceita pelo dono em 23/09/2026);
   - a espera é a própria animação, parada no primeiro quadro (paused), e não um translate escrito
     numa classe. Assim o valor de repouso nunca muda, e o "transition: all" dos cartões não entra em
     disputa com a animação (a transição venceria e o atraso seria ignorado). */
.dp-js .dp-espera { animation: dpSobe .4s cubic-bezier(.22,.61,.36,1) var(--dp-atraso, var(--dp-atraso-el, 0ms)) backwards paused; }
.dp-js .dp-espera.dp-entrou { animation-play-state: running; }
@keyframes dpSobe { from { translate: 0 16px; } to { translate: none; } }
/* "Animação: Nenhuma" no widget: o dp.js não prepara nada ali, e esta regra garante que nada se mexa
   se a escolha mudar depois que os cartões já foram preparados (no editor do Elementor, trocar a
   escolha só troca a classe, sem desenhar o widget de novo) */
.dp-anima--nenhuma .dp-espera { animation: none; }
/* impressão e "reduzir movimento": tudo no lugar */
@media print { .dp-js .dp-espera { animation: none; } }
@media (prefers-reduced-motion: reduce) { .dp-js .dp-espera { animation: none; } }
/* Cada seção abaixo da primeira tela só é calculada e pintada quando se aproxima da tela. É o que tira o
   custo de layout de 19 seções do caminho da primeira pintura. A altura reservada é a medida real de cada
   seção (1366 e 375 de largura); depois da primeira pintura o navegador passa a usar a altura verdadeira. */
.dp-v2 div.dp:not(.dp-topo) { content-visibility: auto; contain-intrinsic-size: auto var(--dp-alt, 900px); }
/* a medida reservada é a do conteúdo, sem o padding da seção (o navegador soma o padding por conta própria) */
/* medidas refeitas em 23/09/2026 (onda B, família home), com o passo de componentes e a família home aplicados:
   conteúdo de cada seção sem o padding, em 1366 e 375 px, três rodadas iguais (medicoes/fotos/home-sem-h18);
   depoimentos medidos com o widget de avaliações carregado (capturas/rascunho-1) */
.dp-v2 .dp-seg { --dp-alt: 823px; } .dp-v2 .dp-jeito { --dp-alt: 444px; } .dp-v2 .dp-dif { --dp-alt: 976px; } .dp-v2 .dp-bio { --dp-alt: 647px; }
.dp-v2 .dp-ars { --dp-alt: 1199px; } .dp-v2 .dp-tipos { --dp-alt: 1418px; } .dp-v2 .dp-port { --dp-alt: 731px; } .dp-v2 .dp-logos { --dp-alt: 102px; }
.dp-v2 .dp-num { --dp-alt: 116px; } .dp-v2 .dp-etapas { --dp-alt: 787px; } .dp-v2 .dp-planos { --dp-alt: 830px; } .dp-v2 .dp-dep { --dp-alt: 433px; }
.dp-v2 .dp-gar { --dp-alt: 448px; } .dp-v2 .dp-precos { --dp-alt: 838px; } .dp-v2 .dp-analise { --dp-alt: 338px; } .dp-v2 .dp-faq { --dp-alt: 924px; }
.dp-v2 .dp-contato { --dp-alt: 606px; } .dp-v2 .dp-blog { --dp-alt: 732px; }
@media (max-width: 767px) {
	.dp-v2 .dp-seg { --dp-alt: 2145px; } .dp-v2 .dp-jeito { --dp-alt: 907px; } .dp-v2 .dp-dif { --dp-alt: 1816px; } .dp-v2 .dp-bio { --dp-alt: 1164px; }
	.dp-v2 .dp-ars { --dp-alt: 3173px; } .dp-v2 .dp-tipos { --dp-alt: 3833px; } .dp-v2 .dp-port { --dp-alt: 735px; } .dp-v2 .dp-num { --dp-alt: 396px; }
	.dp-v2 .dp-etapas { --dp-alt: 2040px; } .dp-v2 .dp-planos { --dp-alt: 1696px; } .dp-v2 .dp-dep { --dp-alt: 573px; } .dp-v2 .dp-gar { --dp-alt: 1317px; }
	.dp-v2 .dp-precos { --dp-alt: 1936px; } .dp-v2 .dp-analise { --dp-alt: 662px; } .dp-v2 .dp-faq { --dp-alt: 1862px; } .dp-v2 .dp-contato { --dp-alt: 1235px; }
	.dp-v2 .dp-blog { --dp-alt: 1918px; }
}
/* Ao seguir um link para uma seção (menu, botão ou endereço com #), o dp.js liga esta classe: a página
   inteira passa a ser calculada de uma vez, para a rolagem parar no lugar exato. */
.dp-cv-off .dp-v2 div.dp { content-visibility: visible; }
/* O widget de avaliações (Trustindex) chega depois e tem altura própria; a caixa reserva a altura final
   medida (16/09/2026) para o conteúdo abaixo não pular quando ele carrega. */
.dp-dep__caixa { min-height: 212px; }
@media (max-width: 767px) { .dp-dep__caixa { min-height: 263px; } }
@keyframes dpFadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes dpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpSlideInLeft { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes dpShine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
@keyframes dpFloat { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(0,-8px) rotate(4deg); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes dpDesliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dpBrilhoPainel { 100% { left: 150%; } }
@keyframes dpFlutuarBotao { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes dpFlutuar { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dp *, .dp *::before, .dp *::after { animation: none !important; transition: none !important; } }

/* ============================================================================
   1. TOPO AZUL
   ============================================================================ */
/* as duas manchas de luz do original eram blocos com blur e mix-blend-mode; a ferramenta de
   acessibilidade não consegue medir o contraste do texto por cima delas e reprova a página.
   Agora são gradientes do próprio fundo: mesmo efeito, contraste medível */
/* onda B, família home (23/09/2026): o topo lê a régua.
   O bloco azul tem a borda na coluna do conteúdo (33 px da borda numa tela de 1.366, 18 no celular) e o
   conteúdo recuado pela margem lateral (57 e 36 px); respiro de 100 px (60 no celular); canto de bloco
   e a sombra de destaque da casa. O título principal vem da classe .dp-titulo-principal, posta no HTML
   (Sora 700 e a fórmula da Variável); a fonte de espera de maiúsculas continua aqui enquanto o texto do
   título for todo em maiúsculas. A etiqueta é o rótulo em selo (.dp-rotulo .dp-rotulo--selo, no HTML).
   Ficam como estavam: as manchas de luz em gradiente, a flutuação do cartão e o ícone que cresce. */
.dp-topo { position: relative; overflow: hidden; width: calc(100% - 2 * var(--margem-lateral, 24px)); max-width: var(--largura-conteudo, 1300px); margin: 0 auto; min-height: 80vh; padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); border-radius: var(--raio-bloco, 30px); background: radial-gradient(circle at 100% 100%, rgba(0,10,26,.38) 0, rgba(0,10,26,0) 42%), radial-gradient(circle at 0 0, rgba(7,0,122,.42) 0, rgba(7,0,122,0) 42%), var(--azul); box-shadow: var(--sombra-destaque); display: flex; flex-direction: column; justify-content: center; z-index: 1; }
.dp-topo__fundo { position: absolute; z-index: 1; width: 520px; height: 420px; pointer-events: none; }
.dp-topo__fundo--esq { left: 0; bottom: 0; }
.dp-topo__fundo--dir { right: 20px; top: 20px; }
.dp-topo__grade { position: relative; z-index: 2; width: 100%; max-width: var(--largura-conteudo, 1300px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; }
.dp-topo__msg { width: 60%; display: flex; flex-direction: column; align-items: flex-start; }
.dp-topo__etiqueta { margin: 0 0 var(--esp-16, 16px); white-space: nowrap; }
.dp-topo__h1 { font-family: var(--sora-caixa); color: var(--branco); margin: 0 0 var(--esp-24, 24px); }
.dp-topo__h1 .dp-verde { color: var(--verde); }
.dp-topo__p { font-size: var(--texto-18, 18px); line-height: 1.6; color: var(--azul-claro, #EAF2FF); margin: 0 0 var(--esp-32, 32px); width: 89%; }
.dp-topo__numero-linha { display: none; align-items: center; gap: var(--esp-12, 12px); margin: 0 0 var(--esp-24, 24px); color: var(--azul-claro, #EAF2FF); font-size: var(--texto-14, 14px); line-height: 1.4; }
.dp-topo__numero-linha b { font-family: var(--sora-num); font-size: var(--titulo-secao, 38px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--branco); white-space: nowrap; }
.dp-topo__numero-linha a { color: inherit; text-decoration: underline; }
.dp-topo__botoes { display: flex; flex-wrap: wrap; gap: var(--esp-20, 20px); }
.dp-topo__lado { width: 40%; padding: 0 50px 0 0; display: flex; justify-content: center; align-items: flex-end; }
.dp-topo__cartao { width: 300px; padding: 35px; border-radius: var(--raio-cartao, 20px); background: rgba(255,255,255,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.4); box-shadow: var(--sombra-destaque); text-align: center; display: flex; flex-direction: column; align-items: center; animation: dpFloat 8s infinite ease-in-out 1.2s; }
/* o ícone do cartão é desenhado na cor do texto (currentColor, no HTML): o azul da marca, no lugar do
   #0047FF que estava escrito dentro do desenho */
.dp-topo__cartao-ico { width: 65px; height: 65px; border-radius: var(--raio-pilula, 999px); background: rgba(0,71,255,.08); color: var(--azul); display: flex; align-items: center; justify-content: center; margin: 0 0 20px; transition: transform .3s ease; }
.dp-topo__cartao-ico svg { width: 36px; height: 36px; }
.dp-topo__cartao:hover .dp-topo__cartao-ico { transform: scale(1.1); }
/* rótulo e legenda do cartão no cinza de texto corrido: o --cinza-tx fica em 4,2 para 1 sobre o vidro
   do cartão, abaixo do mínimo de 4,5 para texto de 12 px */
.dp-topo__cartao-rotulo { font-family: var(--sora-caixa); font-size: var(--texto-12, 12px); font-weight: 600; text-transform: uppercase; color: var(--cinza-tx2); margin: 0 0 20px; }
.dp-topo__cartao-num { font-family: var(--sora-num); font-size: var(--titulo-secao, 38px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--azul); margin: 0 0 12px; }
.dp-topo__cartao-txt { font-size: var(--texto-12, 12px); line-height: 1.6; color: var(--cinza-tx2); }
.dp-topo__cartao-txt a { color: inherit; }
@media (max-width: 1024px) {
	.dp-topo__lado, .dp-topo__fundo { display: none; }
	.dp-topo__msg { width: 100%; }
	.dp-topo__numero-linha { display: flex; }
}
@media (max-width: 767px) {
	.dp-topo { width: calc(100% - 2 * var(--margem-lateral-celular, 18px)); padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); min-height: 0; }
	.dp-topo__etiqueta { white-space: normal; }
	.dp-topo__numero-linha b { font-size: var(--titulo-secao-celular, 30px); }
	.dp-topo__p { width: 100%; }
	.dp-topo__botoes { flex-direction: column; gap: var(--esp-12, 12px); width: 100%; }
	.dp-topo__botoes .dp-bt { width: 100%; }
}

/* ============================================================================
   2. SEGMENTOS
   ============================================================================ */
/* onda B, família home: respiro e margem pela régua; cartões no canto de bloco, a caixa do ícone no
   canto de imagem; sombra de destaque no mouse; a chamada leva a seta da casa, que anda 3 px com o
   mouse no cartão. Ficam como o dono desenhou: o cartão que abre no mouse (flex 4), o brilho azul em
   volta dele, o texto que aparece e o nome que cresce de 22 para 32 px (o 32 fica fora da régua de
   propósito: é a interação dele, e interação desenhada por ele não muda em silêncio). Quebra do celular
   em 767 px, a da régua. */
.dp-seg { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-seg__lista { display: flex; width: 100%; max-width: 1400px; height: 600px; gap: 15px; margin: var(--esp-48, 48px) auto 0; }
.dp-seg__cartao { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--raio-bloco, 30px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 35px; color: var(--branco); background: var(--cartao-esc); transition: flex .7s cubic-bezier(.23,1,.32,1), box-shadow .7s cubic-bezier(.23,1,.32,1); }
/* especificidade maior que a regra ".elementor img { height: auto }" do construtor */
.dp-seg__cartao .dp-seg__foto, .elementor .dp-seg__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border-radius: var(--raio-bloco, 30px); }
.dp-seg__cartao::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(17,24,39,.9) 0%, rgba(17,24,39,.2) 50%, transparent 100%); transition: opacity .5s ease; }
.dp-seg__cartao:hover, .dp-seg__cartao:focus-visible { flex: 4; box-shadow: 0 25px 50px -12px rgba(3,95,221,.4); }
/* o mesmo brilho azul, lido do azul do painel (40% de --azul dá exatamente rgba(3,95,221,.4)); dentro do
   @supports porque, sem color-mix(), uma declaração com var() não volta para a linha de cima */
@supports (color: color-mix(in srgb, red 40%, transparent)) {
	.dp-seg__cartao:hover, .dp-seg__cartao:focus-visible { box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--azul) 40%, transparent); }
}
.dp-seg__cartao:hover::before, .dp-seg__cartao:focus-visible::before { background: linear-gradient(to top, var(--azul) 0%, rgba(17,24,39,.4) 100%); opacity: .85; }
.dp-seg__conteudo { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; }
.dp-seg__ico { width: 55px; height: 55px; border-radius: var(--raio-imagem, 12px); background: rgba(255,255,255,.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; margin: 0 0 20px; }
.dp-seg__ico svg { width: 32px; height: 32px; }
.dp-seg__nome { font-family: var(--sora-caixa); font-size: var(--texto-22, 22px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: font-size .5s ease; }
.dp-seg__cartao:hover .dp-seg__nome { font-size: 32px; }
.dp-seg__txt { font-size: var(--texto-16, 16px); line-height: 1.5; color: var(--texto-sobre-escuro, #D1D5DB); max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height .5s ease, opacity .5s ease, margin-top .5s ease; }
.dp-seg__cartao:hover .dp-seg__txt, .dp-seg__cartao:focus-visible .dp-seg__txt { max-height: 260px; opacity: 1; margin-top: 15px; }
.dp-seg__chamada { font-family: var(--sora); font-size: var(--texto-14, 14px); font-weight: 700; letter-spacing: .5px; margin-top: 16px; }
/* a seta segue a última palavra da chamada, na mesma linha, como a seta de texto fazia */
.dp-seg__chamada .dp-ico { display: inline-block; width: 16px; height: 16px; margin-left: var(--esp-8, 8px); vertical-align: middle; transition: transform .25s ease; }
.dp-seg__cartao:hover .dp-seg__chamada .dp-ico, .dp-seg__cartao:focus-visible .dp-seg__chamada .dp-ico { transform: translateX(3px); }
@media (max-width: 767px) {
	.dp-seg { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-seg__lista { margin-top: var(--esp-32, 32px); }
}
/* decisão 19 do dono (25/09/2026): no tablet os cinco cartões lado a lado ficavam estreitos e cortavam o
   nome ("JURÍDIC"); até 1.024 px a lista fica em coluna, um cartão embaixo do outro, com o texto aberto,
   como no celular. Antes da onda B a coluna ia até 768 px */
@media (max-width: 1024px) {
	.dp-seg__lista { flex-direction: column; height: auto; }
	.dp-seg__cartao { flex: 0 0 340px; height: 340px; }
	.dp-seg__txt { max-height: 260px; opacity: 1; margin-top: 15px; }
}

/* ============================================================================
   3. O JEITO
   ============================================================================ */
/* onda B, família home: respiro 100 / 60 (no celular faltava o de baixo); o título é o título de seção
   da casa (.dp-h2, no HTML), sem a margem própria do .dp-h2, porque o traço azul acima já faz o vão */
.dp-jeito { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-jeito__grade { display: flex; flex-wrap: wrap; justify-content: space-between; }
.dp-jeito__esq { width: 40%; display: flex; flex-direction: column; }
.dp-jeito__dir { width: 52%; display: flex; flex-direction: column; align-items: flex-start; }
.dp-divisor { display: block; width: 60px; height: 4px; background: var(--azul); margin: 0 0 20px; }
.dp-jeito__h2 { margin: 0; }
.dp-jeito__il { margin: 28px 0 0; width: 100%; max-width: 340px; }
.dp-jeito__p { font-size: var(--texto-16, 16px); line-height: 1.6; color: var(--cinza-tx2); margin: 0 0 16px; }
.dp-jeito__p:last-child { margin-bottom: 24px; }
.dp-jeito__selos { display: flex; flex-direction: column; gap: 30px; }
.dp-jeito__selos li { display: flex; align-items: center; gap: 12px; font-family: var(--sora); font-weight: 600; font-size: var(--texto-16, 16px); color: var(--chumbo); }
.dp-jeito__selos .dp-ico { width: 16px; height: 16px; }
.dp-jeito__selos .dp-ico { color: var(--verde); }
@media (max-width: 767px) {
	.dp-jeito { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-jeito__grade { flex-direction: column; gap: 30px; }
	.dp-jeito__esq, .dp-jeito__dir { width: 100%; }
	.dp-jeito__selos { flex-direction: column; gap: 12px; }
}

/* ============================================================================
   4. A DIFERENÇA
   ============================================================================ */
/* onda B, família home: painéis no canto de cartão (20 px) e com a sombra de destaque da casa; títulos
   dos painéis como título de cartão (22 px); os cinzas soltos viram nomes da régua (--chumbo no da
   DEPAULO, --texto-apoio-escuro no X); cabeçalho a 48 / 32 px do conteúdo. O título "O Padrão do Mercado"
   fica no #858C98 de hoje, escolhido de propósito em 16/09/2026 (mais claro que o texto do painel, 3,2
   para 1): exceção registrada, fora das Variáveis.
   Ficam: o painel branco em escala 1,05 e o brilho que atravessa no mouse. */
.dp-dif { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-dif .dp-lead { margin-bottom: var(--esp-48, 48px); }
.dp-dif__il { max-width: 360px; width: 100%; margin: 0 auto 40px; }
.dp-dif__paineis { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; }
.dp-dif__painel { display: flex; flex-direction: column; gap: 20px; }
.dp-dif__painel--cinza { width: 48%; background: var(--cinza-1); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px) 0 0 var(--raio-cartao, 20px); margin-right: -20px; padding: 50px; }
.dp-dif__painel--branco { position: relative; overflow: hidden; width: 52%; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-destaque); padding: 60px; z-index: 10; transform: scale(1.05); }
.dp-dif__painel--branco::before { content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); transform: skewX(-25deg); pointer-events: none; z-index: 2; }
.dp-dif__painel--branco:hover { z-index: 20; }
.dp-dif__painel--branco:hover::before { animation: dpBrilhoPainel .8s ease; }
.dp-dif__h3 { font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.3; color: #858C98; padding: 0 0 24px; border-bottom: 1px solid rgba(156,163,175,.15); }
.dp-dif__painel--branco .dp-dif__h3 { font-size: var(--texto-22, 22px); color: var(--chumbo); padding: 0; border: 0; }
.dp-dif__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 24px; border-bottom: 1px solid rgba(156,163,175,.15); }
.dp-dif__item { display: flex; gap: 19px; align-items: flex-start; margin: 12px 0 0; }
.dp-dif__item .dp-ico { color: var(--texto-apoio-escuro, #9CA3AF); margin-top: 2px; }
.dp-dif__item h4 { font-size: var(--texto-16, 16px); font-weight: 500; line-height: 1.4; color: var(--cinza-tx); margin: 0 0 12px; }
.dp-dif__item p { font-size: var(--texto-14, 14px); line-height: 1.6; color: var(--cinza-tx); }
.dp-dif__item--ok .dp-ico { color: var(--azul); }
.dp-dif__item--ok h4 { font-weight: 700; color: var(--chumbo); }
.dp-dif__item--ok p { font-weight: 500; color: var(--chumbo); }
@media (max-width: 767px) {
	.dp-dif { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-dif .dp-lead { margin-bottom: var(--esp-32, 32px); }
	.dp-dif__paineis { flex-direction: column; gap: 18px; }
	.dp-dif__painel--cinza, .dp-dif__painel--branco { width: 100%; padding: 32px 26px; margin: 0; border-radius: var(--raio-cartao, 20px); transform: none; }
	.dp-dif__topo { flex-wrap: wrap; }
}

/* ============================================================================
   5. A BIO
   ============================================================================ */
/* onda B, família home: o título é o título de seção da casa (.dp-h2, no HTML); a etiqueta do cartão
   é o rótulo da casa (.dp-rotulo, no HTML), no cinza de apoio do fundo escuro; cartão no canto de bloco
   (era 40); ilustração com a sombra de destaque; cores pelos nomes da régua. A bio em terceira pessoa é
   da onda C. Ficam: a ilustração que ganha cor e cresce no mouse. */
.dp-bio { background: var(--cinza-1); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-bio .dp-rotulo { text-align: center; }
.dp-bio__cartao { display: flex; flex-wrap: wrap; align-items: center; gap: 50px; background: linear-gradient(145deg, var(--cartao-esc), var(--chumbo)); border-radius: var(--raio-bloco, 30px); padding: 60px; border: 1px solid rgba(255,255,255,.05); margin: 40px 0; }
.dp-bio__foto { flex: 1 1 300px; min-width: 300px; }
.dp-bio__foto img, .dp-bio__il { border-radius: var(--raio-bloco, 30px); box-shadow: var(--sombra-destaque); filter: grayscale(20%); transition: filter .5s ease, transform .5s ease; }
.dp-bio__il { background: rgba(255,255,255,.04); padding: 14px; }
.dp-bio__cartao:hover .dp-bio__foto img, .dp-bio__cartao:hover .dp-bio__il { filter: grayscale(0); transform: scale(1.02); }
.dp-bio__txt { flex: 15 10 0; display: flex; flex-direction: column; }
/* a etiqueta dentro do cartão: peso (0,2,0) para passar do alinhamento ao centro do rótulo de cima */
.dp-bio__txt .dp-bio__etiqueta { text-align: left; color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 0 var(--esp-12, 12px); }
.dp-bio__h2 { color: var(--branco); margin: 0 0 25px; }
.dp-bio__p { font-size: var(--texto-16, 16px); line-height: 1.6; color: var(--texto-sobre-escuro, #D1D5DB); margin: 0 0 16px; }
.dp-bio__assina { border-top: 1px solid rgba(255,255,255,.1); padding: 25px 0 0; margin-top: 14px; }
.dp-bio__nome { font-family: var(--sora); font-size: var(--texto-18, 18px); font-weight: 700; color: var(--branco); margin: 0 0 2px; }
.dp-bio__cargo { font-size: var(--texto-14, 14px); color: var(--texto-apoio-escuro, #9CA3AF); }
@media (max-width: 767px) {
	.dp-bio { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-bio__cartao { flex-direction: column; padding: 30px; gap: 30px; }
	.dp-bio__foto { min-width: 100%; width: 100%; }
}

/* ============================================================================
   6. O ARSENAL
   ============================================================================ */
.dp-ars { background: var(--quase-preto); padding: 120px 24px; }
.dp-ars__grade { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.dp-ars__fixa { width: 30%; margin-top: 100px; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 768px) { .dp-ars__fixa { position: sticky; top: 150px; align-self: flex-start; } }
.dp-ars__fixa .dp-h2 { line-height: 1.1; margin: 12px 0 0; }
.dp-ars__fixa .dp-lead { padding: 20px 0 30px; }
.dp-ars__cartoes { width: 62%; display: flex; flex-direction: column; gap: 20px; }
.dp-ars__cartao { background: var(--cartao-esc); border: 1px solid #374151; border-radius: 24px; padding: 32px 34px 28px; display: flex; flex-direction: column; gap: 12px; transition: all .4s ease; }
.dp-ars__cartao:hover { border-color: var(--azul); box-shadow: 0 0 30px 0 rgba(0,71,255,.2); transform: translateY(-10px); }
.dp-ars__cab { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.dp-ars__il { width: 64px; height: 64px; flex: 0 0 64px; }
.dp-ars__cab h3 { font-size: 28px; font-weight: 700; color: var(--branco); }
.dp-ars__frase { font-size: 17px; line-height: 1.6; color: #E5E7EB; margin: 0 0 12px; }
.dp-ars__colunas { display: flex; flex-wrap: wrap; gap: 20px; }
.dp-ars__colunas ul { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; }
.dp-ars__colunas ul { gap: 18px; }
.dp-ars__colunas li { font-size: 16px; line-height: 1.5; color: #D1D5DB; }
@media (max-width: 767px) {
	.dp-ars { padding: 60px 18px; }
	.dp-ars__grade { flex-direction: column; }
	.dp-ars__fixa, .dp-ars__cartoes { width: 100%; margin: 0 0 30px; }
	.dp-ars__cartao { padding: 32px 26px; }
	.dp-ars__cab h3 { font-size: 22px; }
	.dp-ars__colunas { flex-direction: column; }
}

/* ============================================================================
   7. TIPOS DE SITE
   ============================================================================ */
/* onda B, família home: cartão com canto, sombra de repouso e sombra de destaque da casa; título do
   cartão e preço em 22 px (título de cartão); texto em 16 e nota em 14; caixa do ícone no canto de
   imagem; cabeçalho a 48 / 32 px da grade; transição só no que muda no mouse. */
.dp-tipos { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-tipos .dp-lead { max-width: 720px; margin-bottom: var(--esp-48, 48px); }
.dp-tipos__grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1200px; margin: 0 auto; }
.dp-tipos__cartao { flex: 1 1 300px; max-width: 380px; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-repouso); padding: 30px 28px 28px; display: flex; flex-direction: column; transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.dp-tipos__cartao:hover { border-color: var(--azul); transform: translateY(-6px); box-shadow: var(--sombra-destaque); }
.dp-tipos__mini { height: 150px; overflow: hidden; border-radius: var(--raio-imagem, 12px); margin: 0 0 18px; background: var(--cinza-2); }
.dp-tipos__mini img { width: 100%; height: 100%; object-fit: cover; }
.dp-ic { width: 52px; height: 52px; border-radius: var(--raio-imagem, 12px); background: rgba(3,95,221,.1); color: var(--azul); display: flex; align-items: center; justify-content: center; margin: 0 0 18px; transition: background-color .3s ease, color .3s ease; }
.dp-tipos__cartao:hover .dp-ic { background: var(--azul); color: var(--branco); }
.dp-tipos__cartao h3 { font-size: var(--texto-22, 22px); font-weight: 700; margin: 0 0 6px; }
.dp-tipos__para { font-size: var(--texto-14, 14px); font-weight: 600; color: var(--azul); margin: 0 0 12px; }
.dp-tipos__txt { font-size: var(--texto-16, 16px); line-height: 1.6; color: var(--cinza-tx2); flex: 1 1 auto; }
.dp-tipos__preco { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cinza-bor); display: flex; flex-direction: column; }
.dp-tipos__rot { font-size: var(--texto-12, 12px); text-transform: uppercase; letter-spacing: 1px; color: var(--cinza-tx); margin: 0 0 2px; }
.dp-tipos__preco b { font-family: var(--sora); font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.1; letter-spacing: -.5px; color: var(--chumbo); }
.dp-tipos__avulso { font-size: var(--texto-14, 14px); color: var(--cinza-tx); margin: 4px 0 0; }
.dp-tipos .dp-centro { margin: 44px 0 0; }
/* 22/09/2026: o título do cartão virou o caso do cliente, em frase; e cada cartão leva a um caminho.
   Onda B: o link do cartão é o link solto da casa (.dp-link-solto, no HTML: Sora 700 de 14 px,
   sublinhado, 24 px de altura no mínimo, com a seta da casa); aqui fica só o vão, e a seta continua
   andando 3 px também com o mouse em qualquer ponto do cartão. */
.dp-tipos__cartao h3 { font-size: var(--texto-22, 22px); line-height: 1.3; }
.dp-v2 .dp-tipos__link, .dp-tipos__link { margin: var(--esp-16, 16px) 0 0; }
.dp-tipos__cartao:hover .dp-tipos__link .dp-ico { transform: translateX(3px); }
@media (max-width: 767px) { .dp-tipos { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } .dp-tipos .dp-lead { margin-bottom: var(--esp-32, 32px); } .dp-tipos__cartao { max-width: 100%; } }

/* ============================================================================
   8. PORTFÓLIO (carrossel)
   ============================================================================ */
/* onda B, família home: respiro e margem pela régua; título a 48 / 32 px do carrossel; nome de cada
   caso como título de bloco (28 / 22 px); "Ver o site" é o link solto da casa (.dp-link-solto, no
   HTML) em branco, com a seta de 16 px que continua azul e fica branca no mouse, como antes; etiquetas,
   setas e pontos na forma de pílula; no celular as setas do carrossel ficam com 45 x 45 px, sem encolher.
   Ficam: a luz azul do fundo, a imagem que flutua e o deslizar do carrossel. */
.dp-port { position: relative; overflow: hidden; background: var(--quase-preto); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-port::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(0,71,255,.4) 0%, rgba(0,0,0,0) 55%); opacity: .8; pointer-events: none; z-index: 0; }
.dp-port .dp-wrap { position: relative; z-index: 2; }
.dp-port .dp-h2 { margin-bottom: var(--esp-48, 48px); }
.dp-carrossel { width: 100%; overflow: hidden; }
.dp-trilho { display: flex; width: 100%; transition: transform .6s cubic-bezier(.25,.46,.45,.94); }
.dp-slide { flex: 0 0 100%; width: 100%; padding: 0 5px; }
.dp-slide[inert] { pointer-events: none; }
.dp-slide__caixa { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; background: rgba(31,41,55,.3); border-radius: var(--raio-bloco, 30px); }
.dp-slide__txt { width: 40%; padding: 40px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dp-slide__txt h3 { font-size: var(--texto-28, 28px); font-weight: 700; line-height: 1.25; color: var(--branco); margin: 0 0 16px; }
.dp-slide__txt p { font-size: var(--texto-16, 16px); line-height: 1.7; color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 0 22px; }
.dp-slide__cats { display: flex; flex-wrap: wrap; margin: 0 0 22px; }
.dp-slide__cats a { font-size: var(--texto-12, 12px); font-weight: 600; color: var(--texto-sobre-escuro, #D1D5DB); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 6px 16px; border-radius: var(--raio-pilula, 999px); margin: 0 8px 8px 0; transition: background-color .3s, border-color .3s, color .3s; }
.dp-slide__cats a:hover { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.dp-slide__ver { color: var(--branco); align-self: flex-start; }
.dp-slide__ver:hover, .dp-slide__ver:focus-visible { color: var(--branco); }
.dp-slide__ver .dp-ico { color: var(--azul); transition: color .3s ease, transform .25s ease; }
.dp-slide__ver:hover .dp-ico { color: var(--branco); }
.dp-slide__img { width: 60%; padding: 30px; display: flex; align-items: center; justify-content: center; }
.dp-slide__img img { width: 100%; border-radius: var(--raio-imagem, 12px); animation: dpFlutuar 6s ease-in-out infinite; }
.dp-slide__vazio { color: var(--texto-apoio-escuro, #9CA3AF); text-align: center; padding: 60px 40px; }
.dp-carrossel__nav { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 40px 0 0; }
.dp-seta { width: 60px; height: 60px; border-radius: var(--raio-pilula, 999px); border: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--branco); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .3s ease, background-color .3s ease; padding: 0; }
.dp .dp-seta:hover { border-color: var(--azul); background: var(--azul); }
.dp-pontos { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 12px; }
.dp-ponto { width: 24px; height: 24px; border: 0; padding: 0; background: transparent; cursor: pointer; position: relative; transition: width .3s; }
.dp-ponto::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--raio-pilula, 999px); background: rgba(255,255,255,.2); transition: width .3s, margin .3s, background-color .3s; }
.dp-ponto--ativo { width: 40px; }
.dp-ponto--ativo::before { width: 26px; margin-left: -13px; border-radius: var(--raio-pilula, 999px); background: var(--azul); }
@media (max-width: 767px) {
	.dp-port { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-port .dp-h2 { margin-bottom: var(--esp-32, 32px); }
	.dp-slide__caixa { flex-direction: column; }
	.dp-slide__txt { width: 100%; padding: 28px 24px; }
	.dp-slide__txt h3 { font-size: var(--texto-22, 22px); }
	.dp-slide__img { width: 100%; padding: 0 16px 24px; }
	/* as setas com 45 x 45 px, sem encolher; para caberem com os pontos (um por caso do portfólio, que
	   cresce), os pontos passam para uma segunda linha quando faltar espaço, em vez de espremer as setas */
	.dp-carrossel__nav { gap: var(--esp-12, 12px); }
	.dp-seta { width: 45px; height: 45px; flex: 0 0 45px; }
	.dp-pontos { flex-wrap: wrap; min-width: 0; }
}

/* ============================================================================
   9. LOGOS
   ============================================================================ */
/* onda B, família home: exceção de respiro registrada na especificação (a faixa sem título, que a onda C
   junta ao "na prática"): 40 vai para o degrau mais perto, 48 px. Transição só no que muda no mouse. */
.dp-logos { background: var(--cinza-1); padding: var(--esp-48, 48px) 0; overflow: hidden; border-top: 1px solid var(--cinza-bor); border-bottom: 1px solid var(--cinza-bor); }
.dp-logos__faixa { display: flex; align-items: center; width: max-content; animation: dpDesliza 32s linear infinite; }
.dp-logos__faixa:hover { animation-play-state: paused; }
.dp-logos__item { width: 166px; height: 100px; flex: 0 0 166px; padding: 15px; display: flex; align-items: center; justify-content: center; }
.dp-logos__item img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); opacity: .5; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.dp-logos__item:hover img { filter: none; opacity: 1; transform: scale(1.15); }

/* ============================================================================
   10. NÚMEROS
   ============================================================================ */
/* onda B, família home: número de vitrine da régua (38 px, 30 no celular), legenda em 16 px no cinza de
   apoio do fundo escuro; exceção de respiro registrada (faixa sem título): 70 vai para o degrau mais
   perto, 64 px, com a margem lateral da régua. */
.dp-num { background: var(--preto-azul); padding: var(--esp-64, 64px) var(--margem-lateral, 24px); }
.dp-num__linha { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; max-width: 1100px; }
.dp-num__item { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; padding: 10px 16px; text-align: center; }
.dp-num__valor { font-family: var(--sora-num); font-size: var(--titulo-secao, 38px); font-weight: 700; line-height: 1; letter-spacing: -2px; color: var(--branco); margin: 0 0 10px; }
.dp-num__legenda { font-size: var(--texto-16, 16px); line-height: 1.5; color: var(--texto-apoio-escuro, #9CA3AF); }
@media (max-width: 767px) { .dp-num { padding: var(--esp-64, 64px) var(--margem-lateral-celular, 18px); } .dp-num__valor { font-size: var(--titulo-secao-celular, 30px); } }

/* ============================================================================
   11. COMO FUNCIONA
   ============================================================================ */
/* onda B, família home: cartão com canto 20, sombra de repouso e, no mouse, a sombra de destaque da casa
   (era azulada); título do cartão em 22 px; cabeçalho a 48 / 32 px dos cartões. Fica a subida com
   escala no mouse. */
.dp-etapas { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-etapas .dp-lead { margin-bottom: var(--esp-48, 48px); }
.dp-etapas__linha { display: flex; flex-wrap: wrap; gap: 40px; }
.dp-etapas__cartao { flex: 1 1 280px; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-repouso); padding: 50px; display: flex; flex-direction: column; gap: 20px; transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease; }
.dp-etapas__cartao:hover { border-color: var(--azul); box-shadow: var(--sombra-destaque); transform: translateY(-10px) scale(1.02); }
.dp-etapas__il { width: 72px; height: 72px; margin: 0 0 -2px; }
.dp-etapas__prazo { font-family: var(--sora-caixa); font-size: var(--texto-12, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--azul); margin: 0 0 8px; }
.dp-etapas__cartao h3 { font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.dp-etapas__txt { font-size: var(--texto-16, 16px); line-height: 1.6; color: var(--cinza-tx2); }
.dp-etapas__cartao .dp-lista { padding: 14px 0 0; border-top: 1px solid var(--cinza-bor); }
@media (max-width: 767px) { .dp-etapas { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } .dp-etapas .dp-lead { margin-bottom: var(--esp-32, 32px); } .dp-etapas__cartao { padding: 32px 26px; } }

/* ============================================================================
   12. O QUE VOCÊ RECEBE (abas)
   ============================================================================ */
/* onda B, família home: respiro 100 / 60; abas no canto de campo (8 px) e com 44 px de altura no mínimo
   (no celular tinham 42); cartões no canto de cartão; bordas e cinzas pelos nomes da régua; cabeçalho a
   48 / 32 px do conteúdo. */
.dp-planos { background: var(--quase-preto); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-planos .dp-lead { max-width: 680px; margin-bottom: var(--esp-48, 48px); }
.dp-planos__linha { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; max-width: 1200px; margin: 0 auto; }
.dp-planos__abas { flex: 1 1 520px; background: rgba(255,255,255,.03); border: 1px solid var(--cinza-tx2); border-radius: var(--raio-cartao, 20px); padding: 32px; }
.dp-abas { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-aba { flex: 1 1 168px; min-width: 0; min-height: var(--alvo-toque, 44px); white-space: normal; line-height: 1.35; font-family: var(--sora); font-size: var(--texto-12, 12px); font-weight: 700; color: var(--branco); background: var(--cartao-esc); border: 1px solid var(--cinza-tx2); border-radius: var(--raio-campo, 8px); padding: 12px 8px; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; text-align: center; }
.dp .dp-aba:hover { background: var(--cartao-esc); border-color: var(--azul); color: var(--branco); }
.dp-aba--ativa { background: var(--azul); border-color: var(--azul); }
.dp-painel { padding: 26px 4px 0; }
.dp-painel__para { font-size: var(--texto-16, 16px); color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 0 16px; }
.dp-painel .dp-lista { gap: 10px; }
.dp-planos__todo { flex: 1 1 320px; background: var(--cartao-esc); border-radius: var(--raio-cartao, 20px); padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.dp-planos__il { max-width: 280px; margin: 0 auto 18px; }
.dp-planos__todo h3 { font-size: var(--texto-22, 22px); font-weight: 700; color: var(--branco); margin: 0 0 -4px; }
.dp-planos__todo > p { font-size: var(--texto-16, 16px); color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 0 8px; }
@media (max-width: 767px) { .dp-planos { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } .dp-planos .dp-lead { margin-bottom: var(--esp-32, 32px); } .dp-planos__abas, .dp-planos__todo { padding: 22px 18px; } }

/* ============================================================================
   13. DEPOIMENTOS
   ============================================================================ */
.dp-dep { background: var(--cinza-2); padding: 100px 24px; }
.dp-dep .dp-lead { margin-bottom: 60px; }
.dp-dep__caixa { width: 100%; min-height: 200px; }
@media (max-width: 767px) { .dp-dep { padding: 60px 18px; } }

/* ============================================================================
   14. GARANTIAS
   ============================================================================ */
/* onda B, família home: sombra de repouso e, no mouse, a de destaque da casa (a do ícone, a de repouso);
   título do cartão em 22 px, texto em 16; cabeçalho a 48 / 32 px dos cartões. Ficam a subida do
   cartão, o ícone que cresce e gira e o título que fica azul no mouse. */
.dp-gar { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-gar .dp-lead { max-width: 680px; margin-bottom: var(--esp-48, 48px); }
.dp-gar__linha { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; max-width: 1200px; margin: 0 auto; }
.dp-gar__cartao { flex: 1 1 230px; display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-repouso); padding: 32px 28px; transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease; cursor: default; }
.dp-gar__cartao:hover { border-color: var(--azul); transform: translateY(-5px); box-shadow: var(--sombra-destaque); }
.dp-ic--g { width: 56px; height: 56px; margin: 0 0 20px; transition: background-color .3s cubic-bezier(.175,.885,.32,1.275), color .3s cubic-bezier(.175,.885,.32,1.275), transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s cubic-bezier(.175,.885,.32,1.275); }
.dp-gar__cartao:hover .dp-ic--g { background: var(--azul); color: var(--branco); transform: scale(1.15) rotate(-3deg); box-shadow: var(--sombra-repouso); }
.dp-gar__cartao h3 { font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.3; margin: 0 0 10px; transition: color .3s; }
.dp-gar__cartao:hover h3 { color: var(--azul); }
.dp-gar__cartao p { font-size: var(--texto-16, 16px); line-height: 1.6; color: var(--cinza-tx2); }
@media (max-width: 767px) { .dp-gar { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } .dp-gar .dp-lead { margin-bottom: var(--esp-32, 32px); } }

/* ============================================================================
   15. QUANTO CUSTA
   ============================================================================ */
/* onda B, família home: cartões no canto de cartão, com as duas sombras da casa; nome do caminho como
   título de cartão (22 px); o valor em destaque como preço em linha (28 px; o menor, 22); textos de
   13 e 15 px para 14 e 16; no cartão azul, os textos de apoio no azul-claro da régua; cabeçalho a
   48 / 32 px dos cartões. O cartão azul deixa a escala até 1.024 px (era 900), a quebra da régua.
   O selo "Mais escolhido" não está em nenhum cartão desde a etapa 3 (conferido no HTML de 23/09/2026). */
.dp-precos { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-precos .dp-lead { max-width: 680px; margin-bottom: var(--esp-48, 48px); }
.dp-precos__linha { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; max-width: 1100px; margin: 0 auto; }
.dp-precos__cartao { flex: 1 1 300px; display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-repouso); padding: 36px 32px 32px; transition: transform .3s ease, box-shadow .3s ease; }
.dp-precos__cartao:hover { transform: translateY(-6px); box-shadow: var(--sombra-destaque); }
.dp-precos__cartao--azul { background: var(--azul); border-color: var(--azul); color: var(--branco); box-shadow: var(--sombra-destaque); transform: scale(1.04); }
.dp-precos__cartao--azul:hover { transform: scale(1.04) translateY(-6px); box-shadow: var(--sombra-destaque); }
.dp-precos__selo { font-family: var(--sora); font-size: var(--texto-12, 12px); font-weight: 700; letter-spacing: 1px; background: rgba(255,255,255,.2); border-radius: var(--raio-pilula, 999px); padding: 6px 18px; align-self: flex-start; margin: 0 0 16px; }
.dp-precos__cartao h3 { font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -.3px; margin: 0 0 8px; }
.dp-precos__cartao--azul h3 { color: var(--branco); }
.dp-precos__para { font-size: var(--texto-16, 16px); line-height: 1.55; color: var(--cinza-tx2); margin: 0 0 22px; min-height: 48px; }
.dp-precos__cartao--azul .dp-precos__para { color: var(--azul-claro, #EAF2FF); }
.dp-precos__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cinza-bor); }
.dp-precos__l span { font-size: var(--texto-14, 14px); color: var(--cinza-tx); flex: 1 1 0; }
.dp-precos__l b { font-family: var(--sora); font-size: var(--texto-16, 16px); font-weight: 700; letter-spacing: -.2px; color: var(--chumbo); white-space: nowrap; text-align: right; }
.dp-precos__cartao--azul .dp-precos__l { border-color: rgba(255,255,255,.15); }
.dp-precos__cartao--azul .dp-precos__l span { color: var(--azul-claro, #EAF2FF); }
.dp-precos__cartao--azul .dp-precos__l b { color: var(--branco); }
.dp-precos__destaque { display: flex; flex-direction: column; padding: 18px 0 22px; flex: 1 1 auto; }
.dp-precos__destaque span { font-size: var(--texto-14, 14px); color: var(--cinza-tx); margin: 0 0 4px; }
.dp-precos__destaque b { font-family: var(--sora); font-size: var(--texto-28, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -.5px; color: var(--azul); }
.dp-precos__destaque b.dp-precos__menor { font-size: var(--texto-22, 22px); }
.dp-precos__cartao--azul .dp-precos__destaque span { color: var(--azul-claro, #EAF2FF); }
.dp-precos__cartao--azul .dp-precos__destaque b { color: var(--branco); }
.dp-precos__regra { max-width: 760px; margin: 44px auto 0; text-align: center; }
.dp-precos__regra p { font-size: var(--texto-16, 16px); line-height: 1.65; color: var(--cinza-tx2); margin: 0 0 10px; }
.dp-precos__regra2 { font-size: var(--texto-14, 14px) !important; color: var(--cinza-tx) !important; }
@media (max-width: 1024px) { .dp-precos__cartao--azul { transform: none; } .dp-precos__cartao--azul:hover { transform: translateY(-6px); } }
@media (max-width: 767px) { .dp-precos { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } .dp-precos .dp-lead { margin-bottom: var(--esp-32, 32px); } .dp-precos__cartao { flex-basis: 100%; } }

/* ============================================================================
   16. ANÁLISE GRATUITA
   ============================================================================ */
/* onda B, família home: respiro 100 / 60 e margem da régua; o título é o título de seção da casa
   (.dp-h2, no HTML); o texto é o texto de abertura sobre azul (18 px, azul-claro); o botão é o botão
   principal branco (.dp-bt .dp-bt--branco, no HTML: a pílula deixa de ser forma de botão, a única
   pílula da casa é o botão do WhatsApp); o fim do degradê é o --azul-hov (era #024BC0, quase igual). */
.dp-analise { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--azul), var(--azul-hov)); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-analise::before { content: ""; position: absolute; top: -50%; left: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.dp-analise__caixa { position: relative; z-index: 10; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.dp-analise__il { flex: 0 0 220px; width: 220px; height: 165px; }
.dp-analise__txt { flex: 1 1 0; display: flex; flex-direction: column; }
.dp-analise__txt h2 { color: var(--branco); margin: 0 0 var(--esp-12, 12px); }
.dp-analise__txt p { font-size: var(--texto-18, 18px); line-height: 1.6; color: var(--azul-claro, #EAF2FF); }
@media (max-width: 767px) {
	.dp-analise { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-analise__caixa { flex-direction: column; text-align: center; }
}

/* ============================================================================
   17. DÚVIDAS FREQUENTES
   ============================================================================ */
/* 23/09/2026 (onda A, piloto da aba Aparência): cada cor, espaço e largura do FAQ lê uma variável
   --sec-* das escolhas do painel, com o valor de sempre como reserva. Sem escolha, nada muda.
   Reservas com nome da régua do A.3 (--texto-apoio-escuro, --texto-sobre-escuro) trazem o mesmo
   valor escrito depois da vírgula, então valem igual com ou sem o A.3. */
.dp-faq { background: var(--sec-fundo, var(--chumbo)); padding: var(--sec-padding, var(--secao-respiro, 100px) var(--margem-lateral, 24px)); }
.dp-faq .dp-wrap { max-width: var(--sec-largura, 1100px); }
.dp-faq .dp-rotulo { color: var(--sec-rotulo, var(--texto-apoio-escuro, #9CA3AF)); }
.dp-faq .dp-h2 { color: var(--sec-titulo, var(--branco)); }
.dp-faq .dp-lead { margin-bottom: var(--esp-48, 48px); color: var(--sec-apoio, var(--texto-apoio-escuro, #9CA3AF)); }
.dp-faq__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.dp-faq__item { background: var(--sec-cartao, var(--cartao-esc)); border: 1px solid var(--sec-cartao-borda, rgba(255,255,255,.05)); border-radius: 12px; overflow: hidden; transition: all .3s ease; }
.dp-faq__item:hover { border-color: var(--sec-cartao-borda-hover, #374151); }
.dp-faq__item--aberto { border-color: var(--azul); }
.dp-faq__item h3 { margin: 0; font-size: inherit; }
.dp-faq__perg { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 25px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--inter); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--sec-cartao-titulo, var(--branco)); }
.dp-faq__perg span { min-width: 0; white-space: normal; }
.dp .dp-faq__perg:hover, .dp .dp-faq__perg:focus-visible { background: var(--sec-realce, rgba(3,95,221,.07)); color: var(--sec-cartao-titulo, var(--branco)); outline: 0; }
.dp-faq__perg .dp-ico { flex-shrink: 0; color: var(--azul); stroke-width: 3; transition: transform .3s ease; }
.dp-faq__item--aberto .dp-faq__perg .dp-ico { transform: rotate(45deg); }
/* #1a2330 é tom próprio da resposta aberta no FAQ escuro, um pouco mais escuro que o cartão
   (--cartao-esc): é essa diferença que separa a resposta da pergunta. Não juntar ao --cartao-esc. */
.dp-faq__resp { background: var(--sec-cartao-2, #1a2330); }
.dp-faq__resp p { font-size: 16px; line-height: 1.6; color: var(--sec-cartao-texto, var(--texto-sobre-escuro, #D1D5DB)); padding: 0 25px 25px; }
.dp-faq__resp a { color: var(--sec-link, var(--verde)); text-decoration: underline; }
@media (max-width: 767px) { .dp-faq { padding: var(--sec-padding, var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px)); } .dp-faq__grade { grid-template-columns: 1fr; } .dp-faq__perg { font-size: 16px; } }
/* Os dois ajustes de celular que só Preços tinha (onda A, A.8) passam a valer para todo FAQ. Não mexem
   no desenho: o item já tem overflow hidden, e item assim já pode encolher até zero na grade. Na home,
   até 700 px, o min-width calculado dos itens passa de auto para 0 sem mover nenhum pixel (medido nas
   três larguras); mantido por decisão registrada em 23/09/2026. */
@media (max-width: 700px) { .dp-faq__grade { grid-template-columns: minmax(0, 1fr); } .dp-faq__item { min-width: 0; } }

/* ============================================================================
   18. CONTATO
   ============================================================================ */
/* onda B, família home: formulário no canto de cartão e com a sombra de repouso; campos no canto de
   campo (8 px) e com letra de 16 px (era 15; 16 também evita o zoom automático do iPhone); o título
   segue o .dp-h2 (entrelinha 1,2 e 12 px até o texto). As cores das mensagens de sucesso e de erro
   ficam como estão: a decisão é do montador, para o site todo. */
.dp-contato { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-contato__grade { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; max-width: 1100px; }
.dp-contato__txt { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: center; }
.dp-contato__zap { display: flex; flex-direction: column; align-items: flex-start; margin: 32px 0 0; }
.dp-contato__ou { font-size: var(--texto-16, 16px); font-weight: 600; color: var(--chumbo); margin: 0 0 14px; }
.dp-contato__tel { font-size: var(--texto-14, 14px); color: var(--cinza-tx); margin: 14px 0 0; }
.dp-contato__il { max-width: 300px; width: 100%; margin: 28px 0 0; }
.dp-form { flex: 1 1 420px; display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); box-shadow: var(--sombra-repouso); padding: 40px; }
.dp-form label { font-family: var(--inter); font-size: var(--texto-14, 14px); font-weight: 600; color: var(--chumbo); margin: 0 0 6px; }
.dp-form input, .dp-form textarea { font-family: var(--inter); font-size: var(--texto-16, 16px); color: var(--chumbo); background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-campo, 8px); padding: 13px 14px; margin: 0 0 16px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.dp-form input:focus, .dp-form textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(3,95,221,.12); }
.dp-form textarea { resize: vertical; min-height: 110px; }
.dp-form .dp-bt { margin: 12px 0 0; border: 0; }
.dp-form__pote { position: absolute; left: -9999px; }
.dp-form__ok, .dp-form__erro { margin: 16px 0 0; font-size: var(--texto-16, 16px); font-weight: 600; }
/* Onda B, 23/09/2026: as mensagens do formulário seguem a régua. Erro no vermelho da casa, que é só de
   erro (era um âmbar, #B45309, fora da régua); sucesso no azul da marca (era um verde, #067647: o verde
   da casa é só do WhatsApp, como manda o Livro da Marca). */
.dp-form__ok { color: var(--azul); }
.dp-form__erro { color: var(--erro, #B91C1C); }
@media (max-width: 767px) { .dp-contato { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } .dp-form { padding: 28px 22px; } }

/* ============================================================================
   19. BLOG
   ============================================================================ */
.dp-blog { background: var(--cinza-1); padding: 180px 20px; }
.dp-blog .dp-cab { max-width: 700px; margin: 0 auto 60px; }
.dp-blog__etiqueta { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--azul); margin: 12px 0 10px; }
.dp-blog .dp-h2 { font-size: 36px; margin: 0 0 15px; }
.dp-blog__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.dp-blog__cartao { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: 20px; overflow: hidden; transition: all .3s ease; }
.dp-blog__cartao:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -5px rgba(0,0,0,.1); border-color: var(--azul); }
.dp-blog__img { display: block; height: 220px; overflow: hidden; }
.dp-blog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dp-blog__cartao:hover .dp-blog__img img { transform: scale(1.1); }
.dp-blog__corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 25px; }
.dp-blog__cat { font-size: 12px; font-weight: 600; color: var(--azul); background: rgba(3,95,221,.1); padding: 4px 10px; border-radius: 4px; align-self: flex-start; margin: 0 0 15px; }
.dp-blog__cartao h3 { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; transition: color .3s; }
.dp-blog__cartao:hover h3 { color: var(--azul); }
.dp-blog__corpo p { font-size: 15px; line-height: 1.6; color: var(--cinza-tx); margin: 0 0 20px; flex: 1 1 auto; }
.dp-blog__ler { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--azul); }
@media (max-width: 1024px) { .dp-blog__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .dp-blog { padding: 80px 18px; } .dp-blog__grade { grid-template-columns: 1fr; max-width: 400px; } .dp-blog .dp-h2 { font-size: 28px; } }

/* ============================================================================
   CABEÇALHO (template atômico) e botão flutuante: as regras que viviam no mu-plugin
   ============================================================================ */
.dp-logo { flex: 0 0 auto; }
.dp-direita { flex: 0 0 auto; width: auto; }
.dp-nav { flex: 1 1 0; min-width: 0; }
.dp-item { flex: 0 0 auto; width: auto; }
.dp-cabecalho.dp-fixo { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; }
.dp-espacador { width: 100%; }
.dp-cabecalho a:focus-visible, .dp-cabecalho button:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* na página nova o cabeçalho já nasce fixo pelo CSS e o espaço dele fica reservado no body:
   nada se move quando o JavaScript chega (deslocamento de layout zero) */
body.dp-v2 .dp-cabecalho { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; }
body.dp-v2 { padding-top: 100px; }
@media (max-width: 767px) { body.dp-v2 { padding-top: 60px; } }
body.dp-v2 .dp-espacador { display: none; }
.dp-cabecalho { transition: background-color .5s ease, box-shadow .5s ease; }
.dp-cabecalho.dp-rolou { background-color: rgba(255,255,255,.8) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: var(--sombra-repouso); }
.dp-link { position: relative; transition: transform .6s ease, color .6s ease; }
.dp-link::after { content: ''; position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; background-color: var(--azul); transition: width .6s ease-in-out; }
.dp-item:hover > .dp-link { color: var(--azul) !important; transform: scale(1.02); }
.dp-item:hover > .dp-link::after { width: 100%; }
.dp-tem-sub::before { content: ''; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.dp-sub { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease; }
.dp-item:hover .dp-sub, .dp-item:focus-within .dp-sub { opacity: 1; visibility: visible; transform: none; }
.dp-sublink { position: relative; transition: background-color .4s ease-in-out, color .4s ease-in-out, padding-left .4s ease-in-out; }
.dp-sublink::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: var(--azul); transform: scaleY(0); transition: transform .3s ease; }
.dp-sublink:hover { background-color: var(--cinza-1) !important; color: var(--azul) !important; padding-left: 35px !important; }
.dp-sublink:hover::before { transform: scaleY(1); }
.dp-sub .dp-sublink:last-child { border-bottom-width: 0 !important; }
.dp-hamb { display: none !important; font-size: 0 !important; line-height: 1; width: 44px; height: 44px; position: relative; }
.dp-hamb:hover, .dp-hamb:focus-visible { background: rgba(3,95,221,.1) !important; outline: 0; }
.dp-hamb::before, .dp-hamb::after { content: ''; position: absolute; left: 10px; right: 10px; height: 3px; background: var(--azul); border-radius: 2px; transition: top .3s ease, transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
.dp-hamb::before { top: 14px; box-shadow: 0 8px 0 var(--azul); }
.dp-hamb::after { top: 30px; }
.dp-cabecalho.dp-aberto .dp-hamb::before { top: 22px; transform: rotate(45deg); box-shadow: none; background: var(--chumbo); }
.dp-cabecalho.dp-aberto .dp-hamb::after { top: 22px; transform: rotate(-45deg); background: var(--chumbo); }
@media (max-width: 1180px) {
	.dp-cabecalho .dp-cta { display: none !important; }
	.dp-cabecalho .dp-hamb { display: inline-flex !important; }
	.dp-cabecalho .dp-nav { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; background: #fff !important; padding: 10px 0 20px !important; box-shadow: 0 10px 30px rgba(0,0,0,.08) !important; border-radius: 0 0 12px 12px; max-height: calc(100vh - var(--dp-header-height, 80px)); max-height: calc(100dvh - var(--dp-header-height, 80px)); overflow-y: auto; }
.dp-cabecalho.dp-aberto .dp-nav { display: flex !important; }
	.dp-cabecalho .dp-item { width: 100% !important; flex: 0 0 auto !important; }
	.dp-cabecalho .dp-link { margin: 0 !important; padding: 15px 20px !important; width: 100% !important; text-align: left !important; }
	.dp-cabecalho .dp-link::after, .dp-cabecalho .dp-tem-sub::before { display: none !important; }
	.dp-cabecalho .dp-sub { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; padding: 0 0 6px 12px !important; min-width: 0 !important; border-radius: 0 !important; }
	.dp-cabecalho .dp-sublink { padding: 12px 20px !important; font-size: 12px !important; }
}

/* ============================================================================
   CABEÇALHO E RODAPÉ DO SITE: os widgets dp-cabecalho e dp-rodape (onda B, item B.1, 23/09/2026)

   Os modelos 1003 e 1001 (blocos atômicos) viram um widget cada, e o cabeçalho passa a ler o menu do
   WordPress. O desenho é o dos modelos de hoje, com o que a especificação da onda B pede: a margem
   lateral única (.dp-faixa com um .dp-wrap dentro, 33 px numa tela de 1.366 e 18 no celular, a mesma
   borda do conteúdo das páginas), o botão da casa (.dp-bt) no lugar do botão escrito à mão, o texto do
   menu no chumbo da régua, as duas sombras e os degraus de letra da régua.

   O que continua vindo do bloco anterior, para o widget e para o modelo 1003: a raiz tem a classe
   dp-cabecalho (fixo no topo, vidro depois de rolar, altura medida pelo dp.js) e o botão de três
   traços tem a classe dp-hamb (desenho, abrir e fechar). Nenhuma regra daqui pega o cabeçalho
   atômico, porque as classes são novas: voltar para o modelo 1003 é só trocar a condição de exibição.

   Peso: duas classes nas regras de link, botão e título. Nas telas da loja o reset do tema pai não
   está na camada "tema", e o "a:hover" e o "button:hover" dele (0,1,1) venceriam uma classe só.
   ============================================================================ */
/* O bloco do Elementor que envolve cada widget não tem espaço próprio. Sem isto, o padding de 10 px com
   que todo bloco atômico nasce aparece nas cargas em que a folha base do Elementor chega depois da
   folha do modelo (a ordem de chegada decide; medido no montador, 4 de 9 cargas). */
.elementor .e-div-block-base.dp-envolve { padding: 0; min-width: 0; }

/* ---------- cabeçalho: a barra ---------- */
.dp-cab-site { position: relative; z-index: 999; background-color: var(--branco); font-family: var(--inter); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.dp-cab-site *, .dp-cab-site *::before, .dp-cab-site *::after { box-sizing: border-box; }
.dp-cab-site ul { list-style: none; margin: 0; padding: 0; }
/* Nas telas da loja e no montador, o mu-plugin antigo depaulo-design.php ainda escreve ".dp-wrap" com 20 px
   de cada lado e 1.120 px de largura (medido no carrinho: o logo ia a 53 px da borda em vez de 33, e em
   320 px os três traços saíam da tela). No cabeçalho e no rodapé a margem é só a da faixa. */
.dp-cab-site .dp-wrap, .dp-rodape .dp-wrap { max-width: var(--largura-conteudo, 1300px); padding-left: 0; padding-right: 0; }
.dp-cab-site__barra { display: flex; align-items: center; justify-content: space-between; min-height: 100px; }
.dp-cab-site .dp-cab-site__logo { flex: 0 0 auto; display: block; font-family: var(--sora); font-weight: 900; font-size: var(--texto-22, 22px); line-height: 1.5; letter-spacing: 0; text-transform: uppercase; color: var(--azul); text-decoration: none; transition: transform .3s ease-in-out, filter .3s ease-in-out; }
.dp-cab-site .dp-cab-site__logo:hover { color: var(--azul); transform: scale(1.05); filter: brightness(1.1); }

/* ---------- cabeçalho: o menu no computador ---------- */
.dp-cab-site__nav { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.dp-cab-site__lista { display: flex; align-items: center; }
/* 12 px de cada lado do texto, como a margem do link de hoje. No item com submenu, a setinha ocupa um
   botão de 24 px e sobram 4: o item tem a mesma largura de hoje (16 de setinha e 12 de margem) */
.dp-cab-site__item { position: relative; flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px; }
.dp-cab-site__item--grupo { padding-right: 4px; }
.dp-cab-site .dp-cab-site__link { position: relative; display: block; padding: 10px 0; font-family: var(--sora); font-weight: 600; font-size: var(--texto-14, 14px); line-height: 1.5; letter-spacing: 0; text-transform: uppercase; color: var(--chumbo); text-decoration: none; transition: transform .6s ease, color .6s ease; }
.dp-cab-site .dp-cab-site__link::after { content: ''; position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; background-color: var(--azul); transition: width .6s ease-in-out; }
.dp-cab-site .dp-cab-site__item:hover > .dp-cab-site__link { color: var(--azul); transform: scale(1.02); }
.dp-cab-site .dp-cab-site__item:hover > .dp-cab-site__link::after { width: 100%; }
/* a setinha: o mesmo desenho de hoje (canto de 7 px com traço de 2), agora dentro de um botão que abre
   o submenu pelo teclado e pelo toque; gira quando o submenu está aberto */
.dp-cab-site .dp-cab-site__abre { position: relative; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--raio-campo, 8px); background: transparent; color: var(--chumbo); font-size: 0; line-height: 1; cursor: pointer; transition: color .6s ease; }
.dp-cab-site .dp-cab-site__abre::before { content: ''; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s ease; }
.dp-cab-site .dp-cab-site__abre:hover, .dp-cab-site .dp-cab-site__abre:focus, .dp-cab-site .dp-cab-site__item:hover > .dp-cab-site__abre { background: transparent; color: var(--azul); }
.dp-cab-site .dp-cab-site__item.dp-sub-aberto > .dp-cab-site__abre::before { transform: translateY(2px) rotate(225deg); }
/* o submenu: fechado, fica invisível e fora da ordem do Tab (visibility hidden). Abre com o mouse no
   item (só no computador) ou pelo botão da setinha (classe dp-sub-aberto, posta pelo dp.js) */
.dp-cab-site__sub { position: absolute; top: 100%; left: 0; z-index: 50; display: flex; flex-direction: column; min-width: 250px; padding: 10px 0; background-color: var(--branco); border-radius: var(--raio-campo, 8px); box-shadow: var(--sombra-destaque); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease; }
.dp-cab-site__item.dp-sub-aberto > .dp-cab-site__sub { opacity: 1; visibility: visible; transform: none; }
/* cada subitem numa linha só: todos com a mesma altura (hoje iam de 51 a 70 px). O texto fica 10 px
   mais longe da borda direita, e com o mouse os 10 px passam para a esquerda: a largura do submenu
   não muda enquanto o texto anda */
.dp-cab-site .dp-cab-site__sublink { position: relative; display: block; width: 100%; padding: 15px 35px 15px 25px; font-family: var(--sora); font-weight: 500; font-size: var(--texto-14, 14px); line-height: 1.5; letter-spacing: .5px; text-transform: uppercase; text-align: left; white-space: nowrap; color: var(--chumbo); text-decoration: none; border-bottom: 1px solid var(--cinza-2); transition: background-color .4s ease-in-out, color .4s ease-in-out, padding-left .4s ease-in-out, padding-right .4s ease-in-out; --foco-afastamento: -3px; }
.dp-cab-site .dp-cab-site__sub li:last-child .dp-cab-site__sublink { border-bottom-width: 0; }
.dp-cab-site .dp-cab-site__sublink::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: var(--azul); transform: scaleY(0); transition: transform .3s ease; }
.dp-cab-site .dp-cab-site__sublink:hover { background-color: var(--cinza-1); color: var(--azul); padding-left: 35px; padding-right: 25px; }
.dp-cab-site .dp-cab-site__sublink:hover::before { transform: scaleY(1); }
@media (min-width: 1181px) {
	.dp-cab-site__item:hover > .dp-cab-site__sub { opacity: 1; visibility: visible; transform: none; }
	.dp-cab-site__sub { width: max-content; }
	/* a setinha tem 24 px de desenho e 46 de toque (a medida mínima para o dedo é 44): a área a mais é um
	   pseudoelemento sem cor, que não muda nada na tela nem o anel de foco. Cresce 11 px para cima e para
	   baixo, 16 px para a direita (o vão exato até o texto do próximo item) e 6 px para a esquerda, sobre o
	   fim do próprio link. O z-index põe a área por cima do espaço do item vizinho, que vem depois no HTML.
	   Abaixo de 1.181 px o botão já tem 44 x 44 */
	.dp-cab-site .dp-cab-site__abre { z-index: 1; }
	.dp-cab-site .dp-cab-site__abre::after { content: ''; position: absolute; top: -11px; bottom: -11px; left: -6px; right: -16px; }
}

/* ---------- cabeçalho: o botão e os três traços ---------- */
.dp-cab-site__acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.dp-cab-site .dp-cab-site__bt { flex: 0 0 auto; white-space: nowrap; }
/* a subida de 2 px com o mouse, que o botão do cabeçalho já tinha; a sombra azulada dele sai (não é
   uma das duas sombras da casa) */
.dp-cab-site .dp-cab-site__bt:hover { transform: translateY(-2px); }
.dp-cab-site__bt-curto { display: none; }
/* o desenho dos três traços e o "X" vêm das regras .dp-hamb acima; aqui só o que o botão do tema pai
   e o da loja poriam por cima (borda, espaço, transição de tudo) */
.dp-cab-site .dp-cab-site__hamb { flex: 0 0 44px; margin: 0; padding: 0; border: 0; border-radius: var(--raio-campo, 8px); background-color: transparent; color: var(--azul); cursor: pointer; transition: background-color .3s ease; }

/* ---------- cabeçalho: tablet e celular (a quebra de sempre, 1.180 px) ---------- */
@media (max-width: 1180px) {
	/* o painel do menu: abre sob a barra, de ponta a ponta, com os textos na margem da régua */
	.dp-cab-site .dp-cab-site__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--dp-header-height, 100px)); max-height: calc(100dvh - var(--dp-header-height, 100px)); overflow-y: auto; padding: 10px 0 20px; background-color: var(--branco); border-radius: 0 0 var(--raio-imagem, 12px) var(--raio-imagem, 12px); box-shadow: var(--sombra-destaque); }
	.dp-cab-site.dp-aberto .dp-cab-site__nav { display: block; }
	.dp-cab-site__lista { display: block; }
	/* cada item numa linha; o que tem submenu é um grupo, que abre e fecha pela setinha */
	.dp-cab-site__item, .dp-cab-site__item--grupo { flex-wrap: wrap; padding: 0 var(--margem-lateral, 24px); }
	.dp-cab-site .dp-cab-site__link { flex: 1 1 0; min-width: 0; padding: 15px 0; --foco-afastamento: -3px; }
	.dp-cab-site .dp-cab-site__link::after { display: none; }
	.dp-cab-site .dp-cab-site__abre { flex: 0 0 44px; width: 44px; height: 44px; }
	.dp-cab-site__sub, .dp-cab-site__item.dp-sub-aberto > .dp-cab-site__sub { position: static; flex: 0 0 100%; display: none; min-width: 0; width: 100%; padding: 0 0 6px; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
	.dp-cab-site__item.dp-sub-aberto > .dp-cab-site__sub { display: flex; }
	/* subitens com a largura toda do grupo (as divisórias ficam iguais), no mesmo tamanho de letra do
	   computador, recuados 12 px como hoje e sem o texto andar com o dedo em cima */
	.dp-cab-site .dp-cab-site__sublink, .dp-cab-site .dp-cab-site__sublink:hover { padding: 12px; white-space: normal; }
	/* o botão fica ao lado dos três traços, no tamanho compacto */
	.dp-cab-site .dp-cab-site__bt { font-size: var(--texto-12, 12px); padding: var(--esp-12, 12px) var(--esp-20, 20px); min-height: var(--alvo-toque, 44px); }
}
@media (max-width: 767px) {
	.dp-cab-site__barra { min-height: 60px; }
	.dp-cab-site__item, .dp-cab-site__item--grupo { padding: 0 var(--margem-lateral-celular, 18px); }
	.dp-cab-site__acoes { gap: var(--esp-8, 8px); }
	/* no celular só cabe o texto curto do botão. Numa tela de 320 px nem ele cabe com 20 px de cada lado:
	   o espaço dos lados desce de 20 para 12 px entre 340 e 320 px de largura, sem outra largura de quebra
	   (a primeira linha vale para o navegador que não conhece clamp) */
	.dp-cab-site .dp-cab-site__bt { padding-left: var(--esp-20, 20px); padding-right: var(--esp-20, 20px); padding-left: clamp(var(--esp-12, 12px), calc(12px + (100vw - 320px) * .4), var(--esp-20, 20px)); padding-right: clamp(var(--esp-12, 12px), calc(12px + (100vw - 320px) * .4), var(--esp-20, 20px)); }
	.dp-cab-site__bt-longo { display: none; }
	.dp-cab-site__bt-curto { display: inline; }
}
/* com o painel do celular aberto, o botão flutuante do WhatsApp sai da frente dele (o dp.js põe a
   classe dp-menu-aberto no <html> enquanto o painel está aberto) */
.dp-menu-aberto .dp-zap { visibility: hidden; }

/* ---------- rodapé ---------- */
.dp-rodape { background-color: var(--quase-preto); padding-top: var(--esp-64, 64px); padding-bottom: var(--esp-32, 32px); font-family: var(--inter); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.dp-rodape *, .dp-rodape *::before, .dp-rodape *::after { box-sizing: border-box; }
.dp-rodape ul { list-style: none; margin: 0; padding: 0; }
.dp-rodape__topo { display: flex; flex-wrap: wrap; gap: var(--esp-48, 48px); padding-bottom: var(--esp-48, 48px); }
.dp-rodape__marca { flex: 1 1 280px; min-width: 0; }
.dp-rodape__coluna { flex: 1 1 200px; min-width: 0; }
.dp-rodape .dp-rodape__logo { margin: 0 0 var(--esp-16, 16px); font-family: var(--sora); font-weight: 900; font-size: var(--texto-28, 28px); line-height: 1.1; letter-spacing: -1px; color: var(--branco); }
.dp-rodape .dp-rodape__slogan { margin: 0 0 var(--esp-24, 24px); max-width: 300px; font-size: var(--texto-16, 16px); line-height: 1.6; color: var(--texto-sobre-escuro, #D1D5DB); }
.dp-rodape .dp-rodape__texto { margin: 0; max-width: 320px; font-size: var(--texto-14, 14px); line-height: 1.6; color: var(--texto-apoio-escuro, #9CA3AF); }
.dp-rodape .dp-rodape__titulo { margin: 0 0 var(--esp-24, 24px); font-family: var(--sora-caixa); font-weight: 700; font-size: var(--texto-14, 14px); line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; color: var(--branco); }
.dp-rodape__lista { display: flex; flex-direction: column; align-items: flex-start; }
.dp-rodape .dp-rodape__link { display: flex; align-items: center; min-height: var(--alvo-link, 24px); margin: 0 0 var(--esp-12, 12px); font-size: var(--texto-16, 16px); font-weight: 400; line-height: 1.5; color: var(--texto-apoio-escuro, #9CA3AF); text-decoration: none; transition: color .25s ease; }
.dp-rodape .dp-rodape__link:hover { color: var(--branco); }
.dp-rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-12, 12px); padding-top: var(--esp-24, 24px); border-top: 1px solid var(--cartao-esc); }
.dp-rodape .dp-rodape__base p { margin: 0; font-size: var(--texto-14, 14px); line-height: 1.6; color: var(--texto-apoio-escuro, #9CA3AF); }
@media (max-width: 767px) {
	.dp-rodape { padding-top: var(--esp-48, 48px); padding-bottom: var(--esp-32, 32px); }
	.dp-rodape__topo { flex-direction: column; gap: var(--esp-32, 32px); }
	/* numa coluna, a base de 280 e de 200 px virava altura e deixava um buraco de até 149 px embaixo
	   da marca e das colunas curtas: cada parte passa a ter a altura do próprio conteúdo */
	.dp-rodape__marca, .dp-rodape__coluna { flex: 0 0 auto; }
	.dp-rodape__base { flex-direction: column; text-align: center; }
}

/* Páginas internas: mesma tipografia, paleta e escala de cartões da home. */
.dp-interna-hero { width: 95%; margin: 0 auto; padding: 94px 36px; border-radius: 30px; overflow: hidden; position: relative; background: radial-gradient(circle at 95% 0, rgba(0,230,118,.13), transparent 35%), radial-gradient(circle at 0 100%, rgba(7,0,122,.38), transparent 42%), var(--azul); box-shadow: 0 30px 60px -10px rgba(0,0,0,.15); }
.dp-interna-hero__grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 64px; align-items: center; }
.dp-interna-hero__rotulo { display: inline-block; font-family: var(--sora-caixa); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #073C91; background: var(--branco); border-radius: 99px; padding: 7px 16px; margin: 0 0 25px; }
.dp-interna-hero h1 { color: var(--branco); font-size: clamp(36px, 4.3vw, 61px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; max-width: 830px; text-wrap: balance; }
.dp-interna-hero__lead { max-width: 690px; font-size: 18px; line-height: 1.65; color: #EDF3FF; margin: 24px 0 30px; }
.dp-interna-hero__botoes, .dp-interna-cta__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.dp-interna-hero__cartao { background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.5); border-radius: 26px; padding: 30px; box-shadow: 0 24px 55px rgba(0,18,68,.18); }
.dp-interna-hero__cartao-rotulo { font-family: var(--sora-caixa); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--azul); margin: 0 0 10px; }
.dp-interna-hero__item { display: flex; align-items: flex-start; gap: 15px; padding: 17px 0; border-top: 1px solid var(--cinza-bor); }
.dp-interna-hero__item .dp-ico { margin-top: 3px; color: var(--azul); }
.dp-interna-hero__item strong { display: block; font-family: var(--sora); font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--chumbo); margin: 0 0 3px; }
.dp-interna-hero__item p { font-size: 14px; line-height: 1.5; color: var(--cinza-tx2); }

.dp-interna-cards { padding: 100px 24px; }
.dp-interna-cards--branco { background: var(--branco); }
.dp-interna-cards--cinza { background: var(--cinza-1); }
.dp-interna-cards .dp-cab { max-width: 800px; margin: 0 auto 44px; }
.dp-interna-cards__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 22px; }
.dp-interna-cards__cartao { background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: 22px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,.04); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.dp-interna-cards__cartao:hover { border-color: rgba(3,95,221,.35); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(3,95,221,.08); }
.dp-interna-cards__numero { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 12px; font-family: var(--sora); font-size: 14px; font-weight: 700; color: var(--azul); background: #EAF2FF; margin: 0 0 22px; }
.dp-interna-cards__cartao h3 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0 0 12px; }
.dp-interna-cards__cartao p { font-size: 15px; color: var(--cinza-tx2); line-height: 1.65; }

.dp-interna-grupo { padding: 105px 24px; background: var(--quase-preto); }
.dp-interna-grupo__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .95fr); gap: 75px; align-items: center; }
.dp-interna-grupo .dp-rotulo { color: #A9B9D4; margin: 0 0 16px; }
.dp-interna-grupo__texto h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.2; font-weight: 700; color: var(--branco); margin: 0 0 22px; text-wrap: balance; }
.dp-interna-grupo__texto > p:not(.dp-rotulo) { color: #D1D5DB; font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.dp-interna-grupo__pessoa { display: flex; align-items: center; gap: 15px; margin: 30px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.13); }
.dp-interna-grupo__pessoa img { width: 66px; height: 66px; object-fit: cover; border-radius: 16px; flex: 0 0 auto; }
.dp-interna-grupo__pessoa strong, .dp-interna-grupo__pessoa span { display: block; }
.dp-interna-grupo__pessoa strong { font-family: var(--sora); font-size: 15px; color: var(--branco); }
.dp-interna-grupo__pessoa span { font-size: 13px; color: #BAC4D5; }
.dp-interna-grupo__marcas { background: #1F2937; border: 1px solid rgba(255,255,255,.09); border-radius: 26px; padding: 34px; }
.dp-interna-grupo__marca-rotulo { font-family: var(--sora-caixa); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #A9B9D4; margin: 0 0 12px; }
.dp-interna-grupo__marca { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); }
.dp-interna-grupo__marca strong { font-family: var(--sora); font-size: 17px; font-weight: 700; color: var(--branco); }
.dp-interna-grupo__marca span { font-size: 13px; color: #BAC4D5; text-align: right; }

.dp-interna-cta { width: 95%; margin: 70px auto; padding: 80px 24px; border-radius: 30px; text-align: center; background: linear-gradient(135deg, var(--azul), #07007A); }
.dp-interna-cta .dp-wrap { max-width: 840px; }
.dp-interna-cta .dp-rotulo { color: #D7E8FF; margin: 0 0 15px; }
.dp-interna-cta h2 { color: var(--branco); font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.2; text-wrap: balance; margin: 0 0 20px; }
.dp-interna-cta p:not(.dp-rotulo) { color: #EDF3FF; font-size: 17px; line-height: 1.7; margin: 0 auto 28px; max-width: 700px; }
.dp-interna-cta__botoes { justify-content: center; }
@media (max-width: 900px) {
	.dp-interna-hero__grade, .dp-interna-grupo__grade { grid-template-columns: 1fr; gap: 36px; }
	.dp-interna-hero__cartao { max-width: 620px; }
}
@media (max-width: 767px) {
	.dp-interna-hero { width: calc(100% - 20px); padding: 62px 20px; border-radius: 22px; }
	.dp-interna-hero h1 { font-size: clamp(32px, 9vw, 44px); }
	.dp-interna-hero__lead { font-size: 16px; }
	.dp-interna-hero__cartao { padding: 23px; }
	.dp-interna-hero__botoes .dp-bt, .dp-interna-cta__botoes .dp-bt { width: 100%; }
	.dp-interna-cards, .dp-interna-grupo { padding: 70px 18px; }
	.dp-interna-cards__grade { grid-template-columns: 1fr; gap: 14px; }
	.dp-interna-cards__cartao { padding: 25px; }
	.dp-interna-grupo__marcas { padding: 25px; }
	.dp-interna-grupo__marca { display: block; }
	.dp-interna-grupo__marca span { display: block; text-align: left; margin-top: 4px; }
	.dp-interna-cta { width: calc(100% - 20px); margin: 45px auto; padding: 65px 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .dp-interna-cards__cartao { transition: none; } .dp-interna-cards__cartao:hover { transform: none; } }
/* 23/09/2026 (onda A, A.7): saíram daqui duas regras presas à página Quem somos (967), que mostravam
   sem esperar a rolagem os títulos dos widgets de cartões internos e de FAQ. Nenhum dos dois existe
   nessa página (conferido no _elementor_data), e com a animação nova o texto já nasce visível. */

/* Preços: página de leitura e comparação, sem repetir o hero azul da home e de Quem somos. */
/* Onda B (família precos, 23/09/2026): o topo passa à régua. Respiro de 100 px (60 no celular) e margem
   lateral pelas Variáveis; o fundo #F8FAFE, que não estava na régua, vira o cinza-1 (#F9FAFB, a diferença
   não se vê). O título principal recebe a classe dp-titulo-principal no PHP (Sora 700, a fórmula da
   Variável --titulo-principal), e por isso a regra do h1 daqui guarda só a largura. O texto de abertura
   recebe a classe dp-lead (18 px nas duas larguras); daqui saem só os vãos: 16 px do rótulo ao título,
   24 px do título ao texto e 32 px do texto ao botão. */
.dp-pgprecos-hero { background: var(--cinza-1); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); border-bottom: 1px solid var(--cinza-bor); }
.dp-pgprecos-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .65fr); gap: clamp(35px, 6vw, 100px); align-items: center; }
.dp-pgprecos-hero .dp-rotulo { margin: 0 0 var(--esp-16, 16px); }
.dp-pgprecos-hero h1 { max-width: 850px; }
.dp-pgprecos-hero__lead { margin: var(--esp-24, 24px) 0 var(--esp-32, 32px); }
.dp-pgprecos-hero__nota { font-size: var(--texto-14, 14px); color: var(--cinza-tx); margin: var(--esp-16, 16px) 0 0; }

/* ---------- a conta aberta: o elemento marca registrada da DEPAULO ----------
   Decisão do dono (23/09/2026): o cartão "Um exemplo, sem letras miúdas" é o que faz o site ser
   reconhecido, e na onda D vira o componente do dinheiro também na loja. Por isso ele deixou de ser
   regra presa ao topo de Preços e virou classe própria (.dp-conta), que qualquer widget pode usar.
   O que o torna ele mesmo, e não pode ser "padronizado" junto com os outros cartões: canto zero, giro de
   1 grau no computador, borda de cima de 5 px no azul, conta em linhas separadas por fio cinza e o
   número de vitrine em azul. Especificação completa: ondaB-2026-09-23/precos/DESIGN-conta-aberta.md. */
.dp-conta { background: var(--branco); border: 1px solid var(--linha-azulada, #D7E0EB); border-top: 5px solid var(--azul); border-radius: 0; box-shadow: var(--sombra-destaque); padding: 30px 34px 24px; transform: rotate(1deg); }
.dp-conta__topo { font-family: var(--sora); font-size: var(--texto-14, 14px); color: var(--chumbo); font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid var(--cinza-bor); }
.dp-conta__linha { display: grid; grid-template-columns: 1fr auto; column-gap: 15px; padding: 24px 0; border-bottom: 1px solid var(--cinza-bor); }
.dp-conta__linha:last-child { border-bottom: 0; padding-bottom: 5px; }
.dp-conta__linha span { font-size: var(--texto-14, 14px); color: var(--cinza-tx2); }
/* número de vitrine (ESPEC, item 16): o mesmo tamanho do título de seção, 38 px no computador e 30 no celular */
.dp-conta__linha strong { font-family: var(--sora-num); font-weight: 700; color: var(--azul); font-size: var(--titulo-secao, 38px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.dp-conta__linha small { grid-column: 1 / -1; color: var(--cinza-tx); margin-top: 8px; font-size: var(--texto-14, 14px); line-height: 1.5; }
/* sem giro abaixo de 1.024 px, onde o cartão ocupa a largura da coluna e o giro cortaria a borda */
@media (max-width: 1024px) { .dp-conta { transform: none; } }
@media (max-width: 767px) {
	.dp-conta { padding: 25px 22px; }
	.dp-conta__linha strong { font-size: var(--titulo-secao-celular, 30px); }
}

/* Onda B (família precos): respiro e margem pela régua; 48 px do cabeçalho da seção até o conteúdo
   (32 no celular). A cor azul do rótulo saiu daqui: desde o passo de componentes ela é a do .dp-rotulo.
   A numeração "01" a "03" saiu do HTML (ESPEC, item 14: os três sites são opções lado a lado, não uma
   sequência), e com ela a regra do número. As linhas entre os caminhos passam de #CBD5E1, que não estava
   na régua, para a --linha-azulada. */
.dp-pgprecos-caminhos { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-pgprecos-caminhos .dp-cab, .dp-pgprecos-planos .dp-cab { max-width: 840px; margin: 0 0 var(--esp-48, 48px); }
.dp-pgprecos-caminho { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .8fr) 260px; gap: 35px; align-items: center; padding: 33px 6px; border-top: 1px solid var(--linha-azulada, #D7E0EB); }
.dp-pgprecos-caminho:last-child { border-bottom: 1px solid var(--linha-azulada, #D7E0EB); }
/* nome de cada site: título de bloco (ESPEC, item 3), 28 px no computador e 22 no celular */
.dp-pgprecos-caminho h3 { font-size: var(--texto-28, 28px); font-weight: 700; line-height: 1.25; margin: 0 0 7px; }
.dp-pgprecos-caminho__nome p { font-size: var(--texto-16, 16px); line-height: 1.6; max-width: 420px; }
/* formato antigo (projeto e acompanhamento em duas linhas), que só aparece se o campo da parcela ficar vazio */
.dp-pgprecos-caminho__valores p:not(.dp-pgprecos-caminho__alternativa) { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; }
.dp-pgprecos-caminho__valores span { color: var(--cinza-tx); font-size: var(--texto-14, 14px); }
.dp-pgprecos-caminho__valores strong { color: var(--chumbo); font-family: var(--sora); font-size: var(--texto-16, 16px); font-weight: 700; text-align: right; white-space: nowrap; }
.dp-pgprecos-caminho__alternativa { font-size: var(--texto-14, 14px); color: var(--azul); font-weight: 600; margin: 8px 0 0; }
/* Parcela única como oferta principal: um número só, grande, com o que ele inclui embaixo.
   Preço em linha (ESPEC, item 16): 28 px nas duas larguras, sempre numa linha só. */
.dp-pgprecos-caminho__parcela { margin: 0; }
.dp-pgprecos-caminho__parcela strong { display: block; color: var(--azul); font: 700 var(--texto-28, 28px)/1.1 var(--sora-num); letter-spacing: -.04em; text-align: left; white-space: nowrap; }
.dp-pgprecos-caminho__parcela-nota { color: var(--chumbo); font-size: var(--texto-14, 14px); line-height: 1.5; font-weight: 600; margin: 7px 0 0; }
.dp-pgprecos-caminho__separado { color: var(--cinza-tx); font-size: var(--texto-14, 14px); line-height: 1.5; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--cinza-bor); }
/* Aviso do que o cuidado mensal não inclui, no cartão de cada mensalidade. Desde a onda B o desenho é o
   do componente .dp-aviso (fundo azul-claro, traço azul, texto de 14 px): a caixa laranja saiu da paleta
   por decisão do dono. Daqui sai só a distância até a lista. */
.dp-pgprecos-plano__aviso { margin: 0 0 18px; }
/* Coluna do que continua depois dos doze meses: presente, mas secundária ao valor da parcela. */
.dp-pgprecos-projetos__depois { color: var(--cinza-tx) !important; font-weight: 500 !important; font-size: var(--texto-16, 16px) !important; }
.dp-pgprecos-projetos tbody th a { color: var(--chumbo); text-decoration: none; border-bottom: 1px solid var(--cinza-bor); }
.dp-pgprecos-projetos tbody th a:hover { color: var(--azul); border-bottom-color: var(--azul); }
/* Os botões dos caminhos são o botão compacto (classe dp-bt--compacto no PHP: 12 px e 44 px de altura);
   daqui sai só o texto numa linha. */
.dp-pgprecos-caminho__acao .dp-bt { white-space: nowrap; }
/* 22/09/2026: coluna do botão com largura fixa, para os preços dos três sites ficarem na mesma coluna */
@media (min-width: 1025px) { .dp-pgprecos-caminho__acao .dp-bt { width: 100%; justify-content: center; text-align: center; } }
.dp-pgprecos-caminhos__nota { font-size: var(--texto-14, 14px); color: var(--cinza-tx); margin: 24px 0 0; }

/* Onda B (família precos): respiro, canto (20 px, o do cartão) e sombra (a de repouso) pela régua; 48 px
   do cabeçalho até a tabela (32 no celular); títulos das colunas de 13 para 14 px; linha com o mouse em
   cima no cinza-2 (era #F4F8FF, fora da régua); texto das células de comparação de 15 para 16 px e os
   dois valores de cima de 17 para 18 px (degraus da régua). */
.dp-pgprecos-projetos { background: var(--cinza-1); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-pgprecos-projetos__intro { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: var(--esp-48, 48px); }
.dp-pgprecos-projetos__intro .dp-cab { max-width: 670px; }
.dp-pgprecos-projetos__intro .dp-bt { flex: 0 0 auto; }
.dp-pgprecos-projetos__tabela { background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); overflow: hidden; box-shadow: var(--sombra-repouso); }
.dp-pgprecos-projetos table { border-collapse: collapse; width: 100%; margin: 0; }
.dp-pgprecos-projetos caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-pgprecos-projetos thead { background: var(--chumbo); color: var(--branco); }
.dp-pgprecos-projetos th, .dp-pgprecos-projetos td { padding: 20px 25px; text-align: left; border: 0; }
.dp-pgprecos-projetos thead th { color: var(--branco); font: 700 var(--texto-14, 14px) var(--sora); }
.dp-pgprecos-projetos tbody tr { border-top: 1px solid var(--cinza-bor); }
.dp-pgprecos-projetos tbody tr:hover { background: var(--cinza-2); }
.dp-pgprecos-projetos tbody th { font: 600 var(--texto-16, 16px) var(--inter); color: var(--chumbo); }
.dp-pgprecos-projetos tbody td { font: 700 var(--texto-18, 18px) var(--sora-num); color: var(--azul); white-space: nowrap; }
.dp-pgprecos-projetos tbody td:last-child { color: var(--cinza-tx2); }
/* modo comparação: as células são texto, não preço */
.dp-pgprecos-projetos__tabela--comparar tbody td { font: 500 var(--texto-16, 16px) var(--inter); color: var(--chumbo); white-space: normal; }
.dp-pgprecos-projetos__tabela--comparar tbody td:last-child { color: var(--chumbo); }
.dp-pgprecos-projetos__tabela--comparar tbody tr:first-child td, .dp-pgprecos-projetos__tabela--comparar tbody tr:nth-child(2) td { font: 700 var(--texto-18, 18px) var(--sora-num); color: var(--azul); white-space: nowrap; }
.dp-pgprecos-projetos__tabela--comparar tbody tr:nth-child(2) td { color: var(--cinza-tx2); }
.dp-pgprecos-projetos__nota { font-size: var(--texto-14, 14px); color: var(--cinza-tx); line-height: 1.6; margin: 20px 0 0; max-width: 850px; }

/* B.4 (onda B): no celular a comparação vira três cartões, um por site, em vez de nove (um por linha da
   tabela). O PHP escreve os cartões logo depois da tabela, só no modo comparação, com os mesmos dados do
   painel (nada a preencher de novo). No computador e no tablet os cartões ficam escondidos e vale a
   tabela; até 767 px é o contrário. Quem lê com leitor de tela encontra um só dos dois, porque o outro
   está com display: none. */
.dp-pgprecos-projetos__cartoes { display: none; }
.dp-pgprecos-projetos__cartao { background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); padding: var(--esp-20, 20px); }
/* o nome do site no cartão do celular é título: Sora 700, como todo título (DESIGN.md, seção 3); sem o peso, o reset do tema punha 500 */
.dp-pgprecos-projetos__cartao h3 { font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.3; margin: 0 0 var(--esp-8, 8px); }
.dp-pgprecos-projetos__cartao dl { margin: 0; }
.dp-pgprecos-projetos__cartao dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-12, 12px); padding: var(--esp-8, 8px) 0; border-top: 1px solid var(--cinza-bor); }
.dp-pgprecos-projetos__cartao dt { flex: 0 1 auto; min-width: 0; font: 500 var(--texto-14, 14px)/1.5 var(--inter); color: var(--cinza-tx); }
.dp-pgprecos-projetos__cartao dd { flex: 0 1 auto; min-width: 0; margin: 0; font: 500 var(--texto-16, 16px)/1.5 var(--inter); color: var(--chumbo); text-align: right; }
.dp-pgprecos-projetos__cartao dt a { color: var(--chumbo); text-decoration: none; border-bottom: 1px solid var(--cinza-bor); }
/* as duas primeiras linhas são preço (o mensal do primeiro ano e o de depois), como na tabela */
.dp-pgprecos-projetos__cartao dl > div:first-child dd, .dp-pgprecos-projetos__cartao dl > div:nth-child(2) dd { font: 700 var(--texto-18, 18px)/1.4 var(--sora-num); color: var(--azul); white-space: nowrap; }
.dp-pgprecos-projetos__cartao dl > div:nth-child(2) dd { color: var(--cinza-tx2); }

/* Onda B (família precos): o fundo #EDF4FF vira o --azul-claro (#EAF2FF, a diferença não se vê) e a
   borda #DCE7F7 dos cartões vira a --linha-azulada; canto de 15 para 20 px (o do cartão); nome de cada
   mensalidade de 20 para 22 px (título de cartão) e o valor de 19 para 22 px (preço menor).
   B.4, preço inteiro numa linha: o valor não quebra mais no meio ("R$ 78 a R$" numa linha e "148/mês"
   na outra). A proposta preparada na onda A (adiados-onda-B/B4-preco-do-cartao-de-precos.css) descia o
   valor para baixo do nome só quando não cabia, até 1.180 px. Com o nome e o valor em 22 px, dois dos
   três cartões já não cabem lado a lado em 1.366 px e o terceiro caberia, e os cartões ficariam
   diferentes entre si; por isso o valor fica sempre embaixo do nome, em todas as larguras, e a exceção do
   celular saiu. */
.dp-pgprecos-planos { background: var(--azul-claro, #EAF2FF); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-pgprecos-planos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.dp-pgprecos-plano { min-width: 0; background: var(--branco); border: 1px solid var(--linha-azulada, #D7E0EB); padding: 29px 28px; border-radius: var(--raio-cartao, 20px); }
.dp-pgprecos-plano__topo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4, 4px); padding-bottom: 18px; border-bottom: 1px solid var(--cinza-bor); }
.dp-pgprecos-plano h3 { font-size: var(--texto-22, 22px); font-weight: 700; line-height: 1.3; }
.dp-pgprecos-plano__topo strong { color: var(--azul); font: 700 var(--texto-22, 22px)/1.3 var(--sora-num); white-space: nowrap; text-align: left; }
.dp-pgprecos-plano li { position: relative; font-size: var(--texto-14, 14px); line-height: 1.55; padding: 0 0 0 20px; margin: 16px 0 0; }
.dp-pgprecos-plano li::before { content: '✓'; color: var(--azul); font-weight: 700; position: absolute; left: 0; }
.dp-pgprecos-plano__acao { margin-top: 22px; } .dp-pgprecos-plano__acao .dp-bt { width: 100%; text-align: center; justify-content: center; }
.dp-pgprecos-plano:nth-last-child(-n+2) { background: transparent; border-style: dashed; }
/* nos dois cartões vazados o fundo é o azul-claro da seção, igual ao do aviso: ali o aviso fica branco,
   para continuar sendo uma caixa (nos cartões brancos ele é azul-claro, como no componente) */
.dp-pgprecos-plano:nth-last-child(-n+2) .dp-pgprecos-plano__aviso { background: var(--branco); }
.dp-pgprecos-planos__nota { background: var(--branco); border-left: 3px solid var(--azul); padding: 16px 22px; color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.6; margin: 27px 0 0; }

/* Onda B (família precos): o título recebe a classe dp-h2 no PHP (38 px no computador, 30 no celular,
   peso 700; era 46 px com peso 500) e o texto recebe dp-lead (18 px). Rótulo e textos de apoio nesta
   seção escura passam ao --texto-apoio-escuro (eram #AFC6ED e #D0D9E8, fora da régua); 12 px do rótulo ao
   título e do título ao texto; a pergunta do lado vai de 19 para 18 px e a resposta de 15 para 16 px.
   Saiu a regra que prendia o fundo do botão branco: ela repetia o fundo de sempre e só impedia o azul-claro
   do botão branco com o mouse em cima, que agora aparece aqui como no resto do site. */
.dp-pgprecos-final { background: var(--chumbo); color: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-pgprecos-final__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); gap: clamp(35px, 7vw, 110px); align-items: center; }
.dp-pgprecos-final .dp-rotulo { color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 0 var(--esp-12, 12px); }
.dp-pgprecos-final h2 { color: var(--branco); max-width: 690px; }
.dp-pgprecos-final__grid > div:first-child > p:last-child { color: var(--texto-apoio-escuro, #9CA3AF); margin: var(--esp-12, 12px) 0 0; }
.dp-pgprecos-final__lado { border-left: 3px solid var(--azul); padding-left: 32px; }
.dp-pgprecos-final__lado strong { color: var(--branco); font: 700 var(--texto-18, 18px)/1.45 var(--sora); }
.dp-pgprecos-final__lado p { color: var(--texto-apoio-escuro, #9CA3AF); font-size: var(--texto-16, 16px); line-height: 1.65; margin: 13px 0 22px; }

/* 23/09/2026 (onda A, A.8): o FAQ claro desta página deixou de ser regras presas a ela (onze aqui,
   mais o hover e dois ajustes de celular). Agora é escolha no widget do FAQ de Preços, aba Aparência:
   Fundo Branco, Respiro Compacto, Largura Larga e título À esquerda. */
/* 23/09/2026 (onda A, A.7): saiu daqui a regra presa a Preços que mostrava os títulos das seções sem
   esperar a rolagem. Com a animação nova o texto já nasce visível em todo o site. */

/* Larguras de quebra da régua (ESPEC, item 21): 1.024 px (tablet, era 1.000) e 767 px (celular, era 700).
   O giro e o espaço interno do cartão da conta foram para o próprio componente (.dp-conta); o tamanho do
   título principal e do texto de abertura no celular vêm das classes da régua, e saíram daqui. */
@media (max-width: 1024px) {
	.dp-pgprecos-hero__grid, .dp-pgprecos-final__grid { grid-template-columns: 1fr; }
	.dp-pgprecos-hero__resumo { max-width: 600px; }
	.dp-pgprecos-caminho { grid-template-columns: minmax(0, 1fr) minmax(200px, .8fr); gap: 22px; }
	.dp-pgprecos-caminho__acao { grid-column: 1 / -1; }
	.dp-pgprecos-planos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.dp-pgprecos-hero, .dp-pgprecos-caminhos, .dp-pgprecos-projetos, .dp-pgprecos-planos, .dp-pgprecos-final { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-pgprecos-hero__grid, .dp-pgprecos-final__grid { gap: 35px; }
	.dp-pgprecos-caminhos .dp-cab, .dp-pgprecos-planos .dp-cab { margin-bottom: var(--esp-32, 32px); }
	.dp-pgprecos-caminho { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
	.dp-pgprecos-caminho h3 { font-size: var(--texto-22, 22px); }
	.dp-pgprecos-caminho__acao { grid-column: auto; }
	.dp-pgprecos-caminho__acao .dp-bt { width: 100%; }
	.dp-pgprecos-projetos__intro { display: block; margin-bottom: var(--esp-32, 32px); }
	.dp-pgprecos-projetos__intro .dp-bt { margin-top: 20px; width: 100%; }
	/* B.4: no modo comparação a tabela dá lugar aos três cartões, um por site */
	.dp-pgprecos-projetos__tabela--comparar { display: none; }
	.dp-pgprecos-projetos__cartoes { display: grid; gap: var(--esp-12, 12px); }
	/* no modo preços (uma linha por site) a própria linha já é o cartão do site */
	.dp-pgprecos-projetos__tabela { background: transparent; border: 0; box-shadow: none; overflow: visible; }
	.dp-pgprecos-projetos table, .dp-pgprecos-projetos tbody, .dp-pgprecos-projetos tr, .dp-pgprecos-projetos th, .dp-pgprecos-projetos td { display: block; width: 100%; }
	.dp-pgprecos-projetos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.dp-pgprecos-projetos tbody tr { background: var(--branco); border: 1px solid var(--cinza-bor); border-radius: var(--raio-cartao, 20px); margin-bottom: 12px; padding: 13px 18px; }
	.dp-pgprecos-projetos th, .dp-pgprecos-projetos td { padding: 6px 0; }
	.dp-pgprecos-projetos tbody td { display: flex; justify-content: space-between; gap: 12px; font-size: var(--texto-16, 16px); }
	.dp-pgprecos-projetos tbody td::before { content: attr(data-label); font: 500 var(--texto-14, 14px) var(--inter); color: var(--cinza-tx); }
	.dp-pgprecos-projetos__tabela--comparar tbody td { text-align: right; }
	/* o fundo alternado das linhas (vem da folha base de tabelas) virava um retângulo cinza dentro do cartão */
	.dp-pgprecos-projetos tbody tr:nth-child(n) > th, .dp-pgprecos-projetos tbody tr:nth-child(n) > td { background: transparent; }
	.dp-pgprecos-projetos__tabela--comparar tbody td::before { flex: 0 0 auto; text-align: left; }
	.dp-pgprecos-planos__grid { grid-template-columns: minmax(0, 1fr); }
	.dp-pgprecos-plano { padding: 25px 23px; }
	.dp-pgprecos-caminho__valores p:not(.dp-pgprecos-caminho__alternativa) { flex-direction: column; gap: 0; }
	.dp-pgprecos-caminho__valores strong { text-align: left; }
	.dp-pgprecos-final__lado { padding-left: 23px; }
}

/* Quem somos: composição editorial, distinta da home e da página de preços.
   Onda B (itens B.2, B.3 e B.7, 23/09/2026): cores, tamanhos e espaços pela régua do topo do arquivo, e
   as peças da especificação única (ondaB-2026-09-23/especificacao/ESPEC.md) postas no HTML dos widgets:
   .dp-titulo-principal no h1, .dp-h2 nos títulos das seções, .dp-lead nos textos de abertura, .dp-rotulo
   nos rótulos, .dp-link-solto nos links sozinhos, .dp-numero nas etapas e a seta da casa (dp_ico "seta").
   As regras abaixo guardam só o que é desta composição: fundos, grades, linhas e a cor pelo fundo. O
   tamanho, o peso, a entrelinha e a margem dos títulos e dos textos de abertura saíram daqui de propósito,
   porque uma regra de seção pesa mais que a classe da peça e venceria a especificação. */
.dp-qs-hero { background: var(--chumbo); color: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
/* no fundo escuro o rótulo e os textos de apoio usam o cinza de apoio da régua */
.dp-qs-hero .dp-rotulo { color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 0 var(--esp-16, 16px); }
.dp-qs-hero h1 { color: var(--branco); max-width: 1100px; margin: 0 0 var(--esp-24, 24px); }
/* o trecho em destaque do título: o mesmo azul claro que a aba Aparência usa como destaque no fundo
   escuro. É uma das cores fora da régua, registrada no LEIA-ME da família */
.dp-qs-hero h1 strong { color: var(--azul-destaque, #73A9FF); font-weight: inherit; }
.dp-qs-hero__base { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--esp-48, 48px); padding-top: var(--esp-24, 24px); border-top: 1px solid var(--cinza-tx); }
.dp-qs-hero__base > p { color: var(--texto-apoio-escuro, #9CA3AF); margin: 0; }
.dp-qs-hero__base > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-12, 12px); }
.dp-qs-hero__base small { color: var(--texto-apoio-escuro, #9CA3AF); font-size: var(--texto-12, 12px); line-height: 1.5; max-width: 245px; }
.dp-qs-grupo { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-qs-grupo__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(60px, 9vw, 145px); }
/* o rótulo das quatro seções claras fica no azul da marca mesmo que o padrão do .dp-rotulo mude */
.dp-qs-grupo .dp-rotulo, .dp-qs-processo .dp-rotulo, .dp-qs-clareza .dp-rotulo, .dp-qs-final .dp-rotulo { color: var(--azul); }
.dp-qs-grupo__pessoa { display: flex; align-items: center; gap: var(--esp-16, 16px); margin-top: var(--esp-32, 32px); padding-top: var(--esp-24, 24px); border-top: 1px solid var(--cinza-bor); }
.dp-qs-grupo__pessoa img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; flex: 0 0 54px; }
.dp-qs-grupo__pessoa span { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.5; max-width: 260px; }
.dp-qs-grupo__sobre { color: var(--cinza-tx); font: 700 var(--texto-12, 12px) var(--sora-caixa); letter-spacing: .09em; text-transform: uppercase; margin: 0 0 var(--esp-16, 16px); }
.dp-qs-grupo__marca { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-20, 20px); border-top: 1px solid var(--linha-azulada); padding: var(--esp-24, 24px) 0; }
.dp-qs-grupo__marca:last-child { border-bottom: 1px solid var(--linha-azulada); }
/* o nome de cada marca é um título de bloco: 28 px no computador e 22 no celular */
.dp-qs-grupo__marca h3 { font: 700 var(--texto-28, 28px)/1.25 var(--sora); margin: 0 0 var(--esp-8, 8px); }
.dp-qs-grupo__marca h3 a { color: var(--chumbo); text-decoration: none; }
.dp-qs-grupo__marca h3 a:hover { color: var(--azul); }
.dp-qs-grupo__marca h3 a:focus-visible { color: var(--azul); }
.dp-qs-grupo__marca p { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); margin: 0; }
/* a seta da casa, no lugar da seta diagonal de texto; anda 3 px com o mouse sobre a marca */
.dp-qs-grupo__marca > span { display: flex; color: var(--azul); }
.dp-qs-grupo__marca .dp-ico--seta { width: 16px; height: 16px; transition: transform .25s ease; }
.dp-qs-grupo__marca:hover .dp-ico--seta { transform: translateX(3px); }
.dp-qs-processo { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-qs-processo__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr); gap: clamp(60px, 8vw, 125px); }
.dp-qs-processo__lista { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha-azulada); }
.dp-qs-processo__lista li { display: grid; grid-template-columns: 68px 1fr; gap: var(--esp-16, 16px); padding: var(--esp-24, 24px) 0; border-bottom: 1px solid var(--linha-azulada); }
/* o número vem do .dp-numero; aqui só o ajuste ótico para alinhar com a primeira linha do título */
.dp-qs-processo__num { padding-top: 3px; }
.dp-qs-processo h3 { font: 700 var(--texto-22, 22px)/1.3 var(--sora); color: var(--chumbo); margin: 0 0 var(--esp-8, 8px); }
.dp-qs-processo__lista p { color: var(--cinza-tx2); font-size: var(--texto-16, 16px); line-height: 1.65; margin: 0; }
.dp-qs-clareza { background: var(--branco); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-qs-clareza__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.1fr); gap: clamp(55px, 9vw, 145px); }
.dp-qs-clareza__intro > .dp-link-solto { margin-top: var(--esp-20, 20px); }
.dp-qs-clareza__lista { border-top: 1px solid var(--linha-azulada); }
.dp-qs-clareza__linha { display: grid; grid-template-columns: minmax(160px, .75fr) minmax(0, 1fr); gap: var(--esp-24, 24px); padding: var(--esp-24, 24px) 0; border-bottom: 1px solid var(--linha-azulada); }
.dp-qs-clareza h3 { color: var(--chumbo); font: 700 var(--texto-18, 18px)/1.4 var(--sora); margin: 0; }
.dp-qs-clareza__linha p { color: var(--cinza-tx2); font-size: var(--texto-16, 16px); line-height: 1.6; margin: 0; }
.dp-qs-final { background: var(--azul-claro); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); border-top: 1px solid var(--linha-azulada); }
.dp-qs-final__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-48, 48px); align-items: center; }
.dp-qs-final h2 { max-width: 700px; }
.dp-qs-final__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-16, 16px); }
@media (max-width: 1024px) {
	.dp-qs-hero__base, .dp-qs-grupo__grid, .dp-qs-processo__grid, .dp-qs-clareza__grid, .dp-qs-final__grid { grid-template-columns: 1fr; gap: var(--esp-48, 48px); }
	/* do texto de abertura até os botões: 32 px, como em toda seção */
	.dp-qs-hero__base, .dp-qs-final__grid { gap: var(--esp-32, 32px); }
}
@media (max-width: 767px) {
	.dp-qs-hero, .dp-qs-grupo, .dp-qs-processo, .dp-qs-clareza, .dp-qs-final { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-qs-grupo__grid, .dp-qs-processo__grid, .dp-qs-clareza__grid { gap: var(--esp-32, 32px); }
	.dp-qs-grupo__marca h3 { font-size: var(--texto-22, 22px); }
	.dp-qs-clareza__linha { grid-template-columns: 1fr; gap: var(--esp-8, 8px); }
	.dp-qs-final__acoes .dp-bt { width: 100%; }
}

/* Orçamento: bancada de escolhas e recibo, sem repetir os cartões da home. */
.dp-orc-hero { background: #fff; padding: 100px 24px 105px; border-bottom: 1px solid #DCE5F2; }
.dp-orc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 225px; gap: clamp(45px, 8vw, 130px); align-items: end; }
.dp-orc-hero .dp-rotulo, .dp-orc-montador .dp-rotulo { color: var(--azul); }
.dp-orc-hero h1 { color: var(--chumbo); font: 700 clamp(44px, 5.5vw, 76px)/1.08 var(--sora); letter-spacing: -.045em; max-width: 960px; margin: 16px 0 24px; text-wrap: balance; }
.dp-orc-hero__texto { color: var(--cinza-tx2); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; max-width: 780px; margin: 0 0 30px; }
.dp-orc-hero__nota { border-left: 3px solid var(--azul); color: var(--cinza-tx2); font-size: 15px; line-height: 1.6; padding-left: 21px; margin: 0 0 5px; }
.dp-orc-montador { background: #F4F7FB; padding: 100px 24px 115px; }
.dp-orc-montador__intro { max-width: 775px; margin: 0 0 50px; }
.dp-orc-montador__intro h2 { color: var(--chumbo); font: 700 clamp(32px, 3.7vw, 49px)/1.17 var(--sora); margin: 15px 0 17px; text-wrap: balance; }
.dp-orc-montador__intro > p:last-child { color: var(--cinza-tx2); font-size: 17px; line-height: 1.7; }
.dp-orc-montador__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .63fr); gap: clamp(40px, 7vw, 105px); align-items: start; }
.dp-orc-etapa { min-width: 0; border: 0; border-top: 1px solid #CBD5E1; margin: 0; padding: 32px 0 45px; }
.dp-orc-etapa[hidden] { display: none; }
.dp-orc-etapa legend { display: flex; align-items: center; gap: 18px; float: left; width: 100%; padding: 0 0 25px; color: var(--chumbo); font: 700 clamp(21px, 2vw, 27px)/1.25 var(--sora); }
.dp-orc-etapa legend span { color: var(--azul); font: 700 16px var(--sora-num); }
.dp-orc-etapa__opcoes { clear: both; display: grid; gap: 10px; }
.dp-orc-opcao { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #D7E0EB; border-radius: 9px; padding: 18px 20px; color: var(--chumbo); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.dp-orc-opcao:hover, .dp-orc-opcao:focus-visible { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(3,95,221,.13); outline: 0; }
.dp-orc-opcao--ativa { border-color: var(--azul); background: #EAF2FF; box-shadow: inset 3px 0 0 var(--azul); }
.dp-orc-opcao__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.dp-orc-opcao strong { font: 700 16px/1.35 var(--sora); }
.dp-orc-opcao__preco { color: var(--azul); font: 700 13px/1.4 var(--sora-num); text-align: right; }
.dp-orc-opcao__texto { display: block; color: var(--cinza-tx2); font-size: 14px; line-height: 1.55; margin-top: 7px; white-space: normal; }
.dp-orc-resumo { position: sticky; top: 120px; background: #fff; border: 1px solid #CDD8E8; border-top: 4px solid var(--azul); padding: 28px 30px 31px; box-shadow: 0 18px 45px rgba(17,24,39,.07); }
.dp-orc-resumo__rotulo { color: var(--azul); font: 700 12px var(--sora); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 26px; }
.dp-orc-resumo__aguarde, .dp-orc-resumo__explica { color: var(--cinza-tx2); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.dp-orc-resumo__valores { min-height: 90px; }
.dp-orc-resumo__linha { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; margin: 0; border-bottom: 1px dashed #D8E0EB; color: var(--cinza-tx2); font-size: 14px; line-height: 1.4; }
.dp-orc-resumo__linha strong { color: var(--chumbo); font: 700 14px var(--sora-num); text-align: right; }
.dp-orc-resumo__total { padding-top: 22px; margin-top: 7px; border-top: 1px solid #AABBD3; border-bottom: 0; }
.dp-orc-resumo__total span { color: var(--chumbo); font-weight: 700; }
.dp-orc-resumo__total strong { color: var(--azul); font-size: 23px; }
.dp-orc-resumo__mensal { border-bottom: 0; }
.dp-orc-resumo__sob { display: block; color: var(--chumbo); font: 700 19px/1.35 var(--sora); margin: 15px 0 9px; }
.dp-orc-resumo__aviso { color: var(--cinza-tx2); font-size: 13px; line-height: 1.58; border-top: 1px solid #D8E0EB; padding-top: 18px; margin: 23px 0 18px; }
.dp-orc-resumo__botao { width: 100%; text-align: center; }
.dp-orc-final { background: var(--chumbo); color: #fff; padding: 105px 24px; }
.dp-orc-final__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: clamp(55px, 9vw, 145px); align-items: center; }
.dp-orc-final .dp-rotulo { color: #AFC6ED; }
.dp-orc-final h2 { color: #fff; font: 700 clamp(32px, 3.4vw, 48px)/1.17 var(--sora); margin: 15px 0 0; text-wrap: balance; }
.dp-orc-final__grid > div:last-child p { color: #D0D9E8; font-size: 17px; line-height: 1.65; margin: 0 0 23px; }
.dp-orc-final .dp-bt--branco { color: var(--azul); background: #fff; }
@media (max-width: 900px) {
	.dp-orc-hero__grid, .dp-orc-montador__grid, .dp-orc-final__grid { grid-template-columns: 1fr; }
	.dp-orc-hero__nota { max-width: 540px; }
	.dp-orc-resumo { position: static; }
}
@media (max-width: 700px) {
	.dp-orc-hero__grid, .dp-orc-montador__grid, .dp-orc-final__grid { grid-template-columns: minmax(0, 1fr); }
	.dp-orc-montador__perguntas, .dp-orc-etapa__opcoes, .dp-orc-opcao, .dp-orc-resumo { min-width: 0; }
	.dp-orc-hero, .dp-orc-montador, .dp-orc-final { padding: 70px 18px; }
	.dp-orc-hero__grid, .dp-orc-montador__grid, .dp-orc-final__grid { gap: 35px; }
	.dp-orc-hero h1 { font-size: clamp(38px, 10vw, 52px); }
	.dp-orc-opcao__topo { display: block; }
	.dp-orc-opcao__preco { display: block; text-align: left; margin-top: 5px; }
	.dp-orc-resumo { padding: 25px 22px; }
	.dp-orc-hero .dp-bt, .dp-orc-final .dp-bt { width: 100%; }
}
/* ---------- montador (/montar-pacote/, widget dp-vitrine-pacote) ----------
   Onda B, família montador-ilustracoes (23/09/2026): cores, letras, cantos e sombra pelos nomes da
   régua; respiro de 100 px no computador e 60 no celular; o conteúdo começa na mesma distância da
   borda que as outras páginas (33 px numa tela de 1.366, 18 no celular). Os tons que não estavam na
   régua foram para o nome mais perto (tabela no LEIA-ME da família, com a diferença percebida). */
.dp-vitrine { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
/* O mu-plugin antigo depaulo-design.php, que só as páginas de compra carregam, dá 20 px de padding a
   todo .dp-wrap: aqui ele sai, e o conteúdo começa na margem da régua. */
.dp-vitrine .dp-wrap { padding-left: 0; padding-right: 0; }
/* O bloco do Elementor em volta da vitrine nasce com 10 px de padding, que a folha da própria página
   zera. Quando essa folha ainda não existe (logo depois de limpar o cache, até a primeira visita
   regravar o arquivo), a vitrine inteira andava 10 px para dentro. Regra própria, com :has() sozinha
   nela: o navegador que não conhece :has() descarta só esta regra e fica como hoje. */
.elementor .e-div-block-base:has(> .elementor-widget-dp-vitrine-pacote) { padding: 0; }
.dp-vitrine__intro { max-width: 775px; margin: 0 0 var(--esp-48, 48px); }
/* O mesmo mu-plugin antigo dá margem de 1em a todo parágrafo; no cabeçalho valem os vãos da régua,
   que vêm da margem do título principal (16 px acima, 24 px abaixo). */
.dp-vitrine__intro .dp-rotulo, .dp-vitrine__intro .dp-lead { margin: 0; }
.dp-vitrine__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .63fr); gap: clamp(40px, 7vw, 105px); align-items: start; }
.dp-vitrine__passo { min-width: 0; border: 0; border-top: 1px solid var(--linha-azulada); margin: 0; padding: 32px 0 45px; }
/* título de cada passo: o degrau de 22 px (era 21 a 27 px, conforme a largura da tela). O número
   ("01") usa a classe .dp-numero da especificação, posta no HTML pelo widget. */
.dp-vitrine__passo legend { display: flex; align-items: center; gap: 18px; float: left; width: 100%; padding: 0 0 25px; color: var(--chumbo); font: 700 var(--texto-22, 22px)/1.25 var(--sora); }
/* A classe .dp-numero também existe no mu-plugin antigo depaulo-design.php (um cartão de número, com fundo
   branco e 24 px de espaço dentro), que só as páginas de compra carregam. Aqui o número volta ao desenho
   da régua. Esta regra perde a razão de ser quando o mu-plugin sair, na onda D (D.11). */
.dp-vitrine__passo legend .dp-numero { background: transparent; padding: 0; }
.dp-vitrine__opcoes { clear: both; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dp-vitrine-opcao { display: block; width: 100%; text-align: left; background: var(--branco); border: 1px solid var(--linha-azulada); border-radius: var(--raio-campo, 8px); padding: 18px 20px; color: var(--chumbo); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
/* O fundo precisa ser declarado aqui no hover, e não só no estado normal: o reset do tema
   pinta todo button:hover (0-1-1) e ganharia da classe sozinha (0-1-0).
   O anel azul-clarinho é marca da opção, não sombra. A primeira linha dele fica para o navegador que
   não conhece color-mix(); a segunda lê o azul do painel, com a mesma transparência de hoje. */
.dp .dp-vitrine-opcao:hover, .dp .dp-vitrine-opcao:focus-visible { background: var(--cinza-1); border-color: var(--azul); box-shadow: 0 0 0 2px rgba(3,95,221,.13); box-shadow: 0 0 0 2px color-mix(in srgb, var(--azul) 13%, transparent); outline: 0; color: var(--chumbo); }
.dp .dp-vitrine-opcao--ativa:hover, .dp .dp-vitrine-opcao--ativa:focus-visible { background: var(--azul-claro); }
.dp-vitrine-opcao--ativa { border-color: var(--azul); background: var(--azul-claro); box-shadow: inset 3px 0 0 var(--azul); }
.dp-vitrine-opcao__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; }
.dp-vitrine-opcao strong { font: 700 var(--texto-16, 16px)/1.35 var(--sora); }
.dp-vitrine-opcao__preco { color: var(--azul); font: 700 var(--texto-16, 16px)/1.4 var(--sora-num); text-align: right; white-space: nowrap; }
.dp-vitrine-opcao__texto { display: block; color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.55; margin-top: 7px; white-space: normal; }
.dp-vitrine-plano { background: var(--branco); border: 1px solid var(--linha-azulada); border-radius: var(--raio-campo, 8px); padding: 18px 20px; }
.dp-vitrine-plano--ativo { border-color: var(--azul); box-shadow: inset 3px 0 0 var(--azul); }
.dp-vitrine-plano__nome { display: block; font: 700 var(--texto-16, 16px)/1.35 var(--sora); color: var(--chumbo); margin-bottom: 12px; }
.dp-vitrine-plano__opcoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.dp-vitrine-periodo { background: var(--cinza-2); border: 1px solid var(--linha-azulada); border-radius: var(--raio-campo, 8px); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s; }
.dp .dp-vitrine-periodo:hover, .dp .dp-vitrine-periodo:focus-visible { background: var(--azul-claro); border-color: var(--azul); outline: 0; }
.dp-vitrine-periodo span { color: var(--cinza-tx2); font-size: var(--texto-12, 12px); }
.dp-vitrine-periodo b { color: var(--chumbo); font: 700 var(--texto-14, 14px) var(--sora-num); }
.dp-vitrine-periodo--ativo { background: var(--azul); border-color: var(--azul); }
.dp-vitrine-periodo--ativo span { color: var(--azul-claro); }
.dp-vitrine-periodo--ativo b { color: var(--branco); }
/* O resumo é a conta do pacote: canto reto e a borda de cima azul ficam (é o desenho do cartão da
   conta, o elemento marca registrada); a sombra passa à de destaque da casa. */
.dp-vitrine__resumo { position: sticky; top: 120px; background: var(--branco); border: 1px solid var(--linha-azulada); border-top: 4px solid var(--azul); padding: 28px 30px 31px; box-shadow: var(--sombra-destaque, 0 25px 50px -10px rgba(0,0,0,.15)); }
.dp-vitrine__resumo-rotulo { color: var(--azul); font: 700 var(--texto-12, 12px) var(--sora); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 26px; }
.dp-vitrine__aguarde { color: var(--cinza-tx2); font-size: var(--texto-16, 16px); line-height: 1.6; margin: 0 0 12px; }
.dp-vitrine__valores { min-height: 90px; }
.dp-vitrine-linha { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; margin: 0; border-bottom: 1px dashed var(--linha-azulada); color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.4; }
.dp-vitrine-linha strong { color: var(--chumbo); font: 700 var(--texto-14, 14px) var(--sora-num); text-align: right; }
.dp-vitrine-linha--total { padding-top: 22px; margin-top: 7px; border-top: 1px solid var(--linha-azulada); border-bottom: 0; }
.dp-vitrine-linha--total span { color: var(--chumbo); font-weight: 700; }
/* o total é "preço em linha": o degrau de 22 px (era 23) */
.dp-vitrine-linha--total strong { color: var(--azul); font-size: var(--texto-22, 22px); }
.dp-vitrine__recorrencia { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.5; margin: 10px 0 0; }
/* o botão é um <button>: o texto quebra linha se não couber (DESIGN.md, seção 6) */
.dp-vitrine__botao { width: 100%; text-align: center; margin-top: 24px; white-space: normal; }
.dp-vitrine__botao:disabled { opacity: .45; cursor: not-allowed; }
.dp-vitrine__erro { color: var(--erro, #B91C1C); font-size: var(--texto-14, 14px); line-height: 1.5; margin: 12px 0 0; }
@media (max-width: 1024px) {
	.dp-vitrine__grid { grid-template-columns: minmax(0, 1fr); }
	.dp-vitrine__resumo { position: static; }
	.dp-vitrine-plano__opcoes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.dp-vitrine { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-vitrine__intro { margin-bottom: var(--esp-32, 32px); }
}
/* onda B, família home: a capa em breve lê a régua. O título é o título principal da casa
   (.dp-titulo-principal, no HTML: entrelinha 1,1); o texto é o texto de abertura (.dp-lead, no HTML) no
   cinza de apoio do fundo escuro; rótulo no mesmo cinza; vãos 16 e 24; margem lateral da régua e quebra
   do celular em 767 px. O respiro de 160 / 110 px é exceção registrada: a capa ocupa a tela inteira e
   centraliza o conteúdo na altura. */
.dp-embreve { background: var(--chumbo); padding: 160px var(--margem-lateral, 24px); min-height: 100vh; display: flex; align-items: center; }
.dp-embreve__box { max-width: 720px; margin: 0 auto; text-align: center; }
.dp-embreve .dp-rotulo { color: var(--texto-apoio-escuro, #9CA3AF); justify-content: center; }
.dp-embreve h1 { color: var(--branco); margin: var(--esp-16, 16px) 0 var(--esp-24, 24px); }
.dp-embreve__texto { color: var(--texto-apoio-escuro, #9CA3AF); margin: 0 auto var(--esp-32, 32px); max-width: 560px; }
.dp-embreve__acoes { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
@media (max-width: 767px) { .dp-embreve { padding: 110px var(--margem-lateral-celular, 18px); } .dp-embreve__acoes { flex-direction: column; align-items: stretch; } }
body.dp-v2:has(.dp-embreve) { padding-top: 0; }

/* Contato: abertura bipartida e escolhas em linhas, sem formulário sem entrega.
   Onda B (itens B.2, B.3 e B.7, 23/09/2026): cores, tamanhos e espaços pela régua do topo do arquivo, e as
   peças da especificação única postas no HTML dos widgets (.dp-titulo-principal, .dp-h2, .dp-lead,
   .dp-rotulo, .dp-link-solto e a seta da casa). A numeração "01" a "03" saiu da lista de começos de
   conversa: são três jeitos de começar, não uma sequência. As regras abaixo guardam só o que é desta
   composição: a faixa lateral escura, as colunas, o cartão do canal e as linhas. */
.dp-pcontato-hero { display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); background: var(--branco); }
.dp-pcontato-hero__lateral { background: var(--chumbo); color: var(--branco); padding: var(--secao-respiro, 100px) clamp(28px, 4.3vw, 72px); }
.dp-pcontato-hero__lateral-miolo { min-height: 615px; display: flex; flex-direction: column; justify-content: space-between; }
/* na faixa escura o rótulo e a assinatura usam o cinza de apoio da régua */
.dp-pcontato-hero__lateral .dp-rotulo { color: var(--texto-apoio-escuro, #9CA3AF); margin: 0; }
/* a frase da faixa é um título de bloco: 28 px no computador e 22 no celular */
.dp-pcontato-hero__lateral-texto { color: var(--branco); font: 700 var(--texto-28, 28px)/1.25 var(--sora); max-width: 365px; margin: var(--esp-48, 48px) 0; }
.dp-pcontato-hero__assinatura { color: var(--texto-apoio-escuro, #9CA3AF); font-size: var(--texto-14, 14px); line-height: 1.5; margin: 0; }
.dp-pcontato-hero__principal { display: flex; align-items: center; padding: var(--secao-respiro, 100px) clamp(30px, 7vw, 125px); min-width: 0; }
.dp-pcontato-hero__miolo { width: 100%; max-width: 830px; }
.dp-pcontato-hero__principal .dp-rotulo, .dp-pcontato-caminhos .dp-rotulo { color: var(--azul); }
.dp-pcontato-hero h1 { color: var(--chumbo); margin: var(--esp-16, 16px) 0 var(--esp-24, 24px); }
/* o texto de abertura acompanha a largura do cartão do canal logo abaixo (680 px) */
.dp-pcontato-hero__intro { max-width: 680px; margin: 0 0 var(--esp-32, 32px); }
.dp-pcontato-hero__canal { background: var(--cinza-2); border: 1px solid var(--linha-azulada); border-top: 3px solid var(--azul); padding: var(--esp-24, 24px) var(--esp-32, 32px) var(--esp-32, 32px); max-width: 680px; }
.dp-pcontato-hero__canal-topo { display: flex; gap: var(--esp-16, 16px); align-items: flex-start; }
/* o ícone do WhatsApp no verde da régua (o verde é só do WhatsApp, como pede o Livro da Marca) */
.dp-pcontato-hero__icone { display: flex; flex: 0 0 45px; width: 45px; height: 45px; align-items: center; justify-content: center; border: 1px solid var(--verde-tx); background: var(--verde-tx); border-radius: var(--raio-imagem, 12px); color: var(--verde); }
/* o nome do canal é um título de cartão: 22 px */
.dp-pcontato-hero__canal h2 { color: var(--chumbo); font: 700 var(--texto-22, 22px)/1.3 var(--sora); margin: 0 0 var(--esp-8, 8px); }
.dp-pcontato-hero__canal p { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.6; margin: 0; }
.dp-pcontato-hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-16, 16px) var(--esp-24, 24px); margin-top: var(--esp-24, 24px); }
.dp-pcontato-caminhos { background: var(--cinza-2); padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
.dp-pcontato-caminhos__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr); gap: clamp(45px, 8vw, 125px); }
.dp-pcontato-caminhos__alcance { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.6; border-left: 3px solid var(--azul); padding-left: var(--esp-16, 16px); margin: var(--esp-32, 32px) 0 0; }
.dp-pcontato-caminhos__lista { border-top: 1px solid var(--linha-azulada); }
.dp-pcontato-caminhos__item { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: var(--esp-16, 16px); align-items: start; padding: var(--esp-24, 24px) var(--esp-4, 4px); border-bottom: 1px solid var(--linha-azulada); color: var(--chumbo); text-decoration: none; transition: background-color .15s, padding .15s; }
.dp-pcontato-caminhos__item:hover { background: var(--azul-claro); padding-left: var(--esp-16, 16px); }
.dp-pcontato-caminhos__item:focus-visible { background: var(--azul-claro); padding-left: var(--esp-16, 16px); outline: 2px solid transparent; }
.dp-pcontato-caminhos__conteudo { display: flex; flex-direction: column; gap: var(--esp-8, 8px); min-width: 0; }
.dp-pcontato-caminhos__conteudo strong { color: var(--chumbo); font: 700 var(--texto-18, 18px)/1.35 var(--sora); }
.dp-pcontato-caminhos__conteudo > span { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.55; }
/* a seta da casa, no lugar da seta diagonal de texto; anda 3 px com o mouse ou o foco na linha */
.dp-pcontato-caminhos__seta { display: flex; color: var(--azul); padding-top: var(--esp-4, 4px); }
.dp-pcontato-caminhos__seta .dp-ico--seta { width: 16px; height: 16px; transition: transform .25s ease; }
.dp-pcontato-caminhos__item:hover .dp-ico--seta { transform: translateX(3px); }
.dp-pcontato-caminhos__item:focus-visible .dp-ico--seta { transform: translateX(3px); }
@media (max-width: 1024px) {
	.dp-pcontato-hero { grid-template-columns: minmax(245px, 31%) minmax(0, 1fr); }
	.dp-pcontato-hero__principal { padding: var(--secao-respiro, 100px) var(--esp-32, 32px); }
	.dp-pcontato-caminhos__grid { grid-template-columns: 1fr; gap: var(--esp-48, 48px); }
}
@media (max-width: 767px) {
	.dp-pcontato-hero { grid-template-columns: minmax(0, 1fr); }
	.dp-pcontato-hero__lateral { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-pcontato-hero__lateral-miolo { min-height: 0; gap: var(--esp-12, 12px); }
	.dp-pcontato-hero__lateral-texto { font-size: var(--texto-22, 22px); margin: var(--esp-8, 8px) 0; }
	.dp-pcontato-hero__principal { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-pcontato-hero__canal { padding: var(--esp-24, 24px) var(--esp-20, 20px); }
	.dp-pcontato-hero__acoes .dp-bt { width: 100%; text-align: center; justify-content: center; }
	.dp-pcontato-caminhos { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); }
	.dp-pcontato-caminhos__grid { gap: var(--esp-32, 32px); }
	.dp-pcontato-caminhos__item { gap: var(--esp-12, 12px); }
}
.dp-vitrine__zap { width: 100%; text-align: center; margin-top: 10px; }
/* Modelo de 18/09/2026: o cartão do site diz o que continua depois das doze parcelas. */
.dp-vitrine-opcao__depois { display: block; color: var(--azul); font-size: var(--texto-14, 14px); font-weight: 600; line-height: 1.5; margin-top: 8px; white-space: normal; }
.dp-vitrine-opcao--ativa .dp-vitrine-opcao__depois { color: var(--azul-hov); }
.dp-vitrine__passo-texto { color: var(--cinza-tx); font-size: var(--texto-14, 14px); line-height: 1.6; margin: 0 0 16px; }
/* O que vem junto, aberto dentro do cartão escolhido: responde "o que vem nele?" ali mesmo.
   A linha fina de cima é o azul da marca com 22% de cor: a primeira declaração fica para o navegador
   que não conhece color-mix(); a segunda lê o azul do painel. */
.dp-vitrine-opcao__inclui { display: block; margin: 15px 0 0; padding: 15px 0 3px; border-top: 1px solid rgba(3,95,221,.22); border-top-color: color-mix(in srgb, var(--azul) 22%, transparent); }
.dp-vitrine-opcao__inclui-titulo { display: block; color: var(--chumbo); font: 700 var(--texto-14, 14px) var(--sora); margin-bottom: 11px; }
.dp-vitrine-opcao__lista { display: block; }
.dp-vitrine-opcao__item { display: block; position: relative; padding-left: 26px; color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.55; margin-bottom: 8px; white-space: normal; }
.dp-vitrine-opcao__item::before { content: ""; position: absolute; left: 3px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(-45deg); }
.dp-vitrine__nota { color: var(--cinza-tx); font-size: var(--texto-14, 14px); line-height: 1.6; margin: 16px 0 0; }

/* Passo 2 organizado: grupos com título, quantidade onde faz sentido, e a explicação de
   cada item abrindo dentro dele. A lista solta anterior misturava faixa de produto com
   recurso de loja e mostrava item de loja para quem não tinha loja. */
.dp-vitrine-grupo { margin: 0 0 26px; }
.dp-vitrine-grupo__titulo { color: var(--chumbo); font: 700 var(--texto-14, 14px) var(--sora); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 4px; }
.dp-vitrine-grupo__ajuda { color: var(--cinza-tx); font-size: var(--texto-14, 14px); line-height: 1.55; margin: 0 0 12px; }

.dp-vitrine-item { background: var(--branco); border: 1px solid var(--linha-azulada); border-radius: var(--raio-campo, 8px); margin-bottom: 8px; overflow: hidden; }
.dp-vitrine-item--ativo { border-color: var(--azul); box-shadow: inset 3px 0 0 var(--azul); background: var(--cinza-1); }
.dp-vitrine-item__toque { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; background: transparent; border: 0; padding: 15px 17px; cursor: pointer; }
/* o fundo azul bem clarinho do mouse: a primeira linha fica para o navegador que não conhece
   color-mix(); a segunda lê o azul do painel, com a mesma transparência de hoje */
.dp .dp-vitrine-item__toque:hover, .dp .dp-vitrine-item__toque:focus-visible { background: rgba(3,95,221,.05); background: color-mix(in srgb, var(--azul) 5%, transparent); outline: 0; }
/* A marca de escolher: a borda passa ao cinza de apoio da régua (5,3 para 1 de contraste no branco;
   o tom de antes, #C3D0E0, dava 1,6 para 1, abaixo dos 3 para 1 que um controle pede). O canto de
   4 px fica como detalhe fino, a mesma exceção dos traços do menu: com o canto de 8 px da régua, o
   quadrado de 19 px viraria quase um círculo, que se lê como escolha única. */
.dp-vitrine-item__marca { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 2px; border: 2px solid var(--cinza-tx); border-radius: 4px; position: relative; }
.dp-vitrine-item--ativo .dp-vitrine-item__marca { background: var(--azul); border-color: var(--azul); }
.dp-vitrine-item--ativo .dp-vitrine-item__marca::after { content: ''; position: absolute; left: 4px; top: 3px; width: 6px; height: 10px; border-right: 2px solid var(--branco); border-bottom: 2px solid var(--branco); transform: rotate(40deg); }
.dp-vitrine-item__meio { flex: 1 1 auto; min-width: 0; }
.dp-vitrine-item__nome { display: block; font: 700 var(--texto-16, 16px)/1.35 var(--sora); color: var(--chumbo); }
.dp-vitrine-item__texto { display: block; color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.5; margin-top: 3px; white-space: normal; }
.dp-vitrine-item__preco { flex: 0 0 auto; color: var(--azul); font: 700 var(--texto-16, 16px) var(--sora-num); white-space: nowrap; margin-top: 1px; }
.dp-vitrine-item__saber { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--cinza-bor); color: var(--azul); font: 600 var(--texto-14, 14px) var(--inter); padding: 9px 17px; cursor: pointer; }
.dp .dp-vitrine-item__saber:hover, .dp .dp-vitrine-item__saber:focus-visible { background: rgba(3,95,221,.06); background: color-mix(in srgb, var(--azul) 6%, transparent); outline: 0; }
/* "O que é isso?" tem uns 36 px de altura e precisa de 44 de toque, a medida mínima para o dedo. A área a
   mais é um pseudoelemento sem cor, que cresce só para cima, sobre o respiro vazio de 15 px embaixo do
   texto do item (para baixo não dá: o cartão corta o que passa da borda). Nada muda na tela, nem o anel
   de foco; se a letra crescer e o botão passar de 44 px, a área fica do tamanho dele */
.dp-vitrine-item__saber { position: relative; }
.dp-vitrine-item__saber::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: max(100%, var(--alvo-toque, 44px)); }

.dp-vitrine-detalhe { padding: 2px 17px 16px; }
.dp-vitrine-detalhe__titulo { color: var(--chumbo); font: 700 var(--texto-12, 12px) var(--sora); margin: 10px 0 7px; }
.dp-vitrine-detalhe__lista { margin: 0; padding: 0; list-style: none; }
.dp-vitrine-detalhe__lista li { position: relative; padding-left: 18px; color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.55; margin-bottom: 6px; }
.dp-vitrine-detalhe__lista li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--azul); }
.dp-vitrine-detalhe__texto { color: var(--cinza-tx2); font-size: var(--texto-14, 14px); line-height: 1.55; margin: 0; }

.dp-vitrine-conta { display: flex; align-items: center; gap: 12px; background: var(--branco); border: 1px solid var(--linha-azulada); border-radius: var(--raio-campo, 8px); padding: 12px 15px; }
/* os botões de menos e mais têm o alvo de toque da régua: 44 px (eram 36) */
.dp-vitrine-conta__bt { width: var(--alvo-toque, 44px); height: var(--alvo-toque, 44px); flex: 0 0 var(--alvo-toque, 44px); border: 1px solid var(--linha-azulada); border-radius: var(--raio-campo, 8px); background: var(--branco); color: var(--chumbo); font: 700 var(--texto-18, 18px)/1 var(--inter); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dp .dp-vitrine-conta__bt:hover, .dp .dp-vitrine-conta__bt:focus-visible { background: var(--azul-claro); border-color: var(--azul); color: var(--azul); outline: 0; }
.dp-vitrine-conta__bt:disabled { opacity: .35; cursor: not-allowed; }
.dp-vitrine-conta__n { min-width: 26px; text-align: center; font: 700 var(--texto-18, 18px) var(--sora-num); color: var(--chumbo); }
.dp-vitrine-conta__valor { margin-left: auto; color: var(--azul); font: 700 var(--texto-16, 16px) var(--sora-num); }
@media (max-width: 767px) {
	.dp-vitrine-item__toque { flex-wrap: wrap; }
	.dp-vitrine-item__preco { width: 100%; margin: 6px 0 0 32px; }
}

/* Páginas legais: texto corrido, editável pelo painel, na tipografia da marca.
   Onda B (itens B.3, B.5 e B.7, 23/09/2026): desde o B.5 o texto mora no widget dp-texto-legal do
   Elementor (título, data, índice opcional e o corpo), copiado sem mudar uma palavra. O título é o
   .dp-titulo-principal, igual ao das outras páginas; o tamanho, o peso e a entrelinha dele saíram da regra
   do h1 abaixo de propósito, para a classe valer. O resto pela régua: respiro de 100 e 60 px, margem de 24
   e 18 px, os títulos dos trechos como título de bloco (28 e 22 px) e o texto corrido em 18 px no
   computador (a coluna de 820 px deixava 17 px com linhas longas demais) e 16 no celular. */
.dp-legal { max-width: 820px; margin: 0 auto; padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); color: var(--cinza-tx2); font-family: var(--inter); font-size: var(--texto-18, 18px); line-height: 1.75; }
.dp-legal__atualizado { color: var(--cinza-tx); font-size: var(--texto-14, 14px); margin: 0 0 var(--esp-32, 32px); padding-bottom: var(--esp-24, 24px); border-bottom: 1px solid var(--cinza-bor); }
/* 22/09/2026: as páginas legais ganharam o título principal (h1), que o tema não imprime */
.dp-legal h1 { color: var(--chumbo); margin: 0 0 var(--esp-16, 16px); }
.dp-legal h2 { color: var(--chumbo); font: 700 var(--texto-28, 28px)/1.25 var(--sora); margin: var(--esp-48, 48px) 0 var(--esp-16, 16px); }
.dp-legal h3 { color: var(--chumbo); font: 700 var(--texto-18, 18px)/1.35 var(--sora); margin: var(--esp-32, 32px) 0 var(--esp-12, 12px); }
.dp-legal p { margin: 0 0 var(--esp-16, 16px); }
.dp-legal ul { margin: 0 0 var(--esp-24, 24px); padding-left: var(--esp-24, 24px); }
.dp-legal li { margin-bottom: var(--esp-12, 12px); }
.dp-legal strong { color: var(--chumbo); font-weight: 600; }
.dp-legal a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.dp-legal a:hover { text-decoration-thickness: 2px; }
/* o último parágrafo não soma a margem dele ao respiro de baixo */
.dp-legal > :last-child { margin-bottom: 0; }
/* o índice opcional do widget (campo "Mostrar índice", desligado nas três páginas): a lista dos títulos
   do texto, com o traço azul à esquerda que a página Contato já usa na nota de atendimento. Cada link
   tem no mínimo 24 px de altura para o dedo, e o título de destino para abaixo do cabeçalho fixo */
.dp-legal__indice { border-left: 3px solid var(--azul); padding-left: var(--esp-16, 16px); margin: 0 0 var(--esp-32, 32px); }
.dp-legal__indice-titulo { color: var(--chumbo); font: 700 var(--texto-14, 14px)/1.4 var(--sora); margin: 0 0 var(--esp-8, 8px); }
.dp-legal__indice ol { margin: 0; padding-left: var(--esp-20, 20px); }
.dp-legal__indice li { margin-bottom: var(--esp-4, 4px); font-size: var(--texto-16, 16px); }
.dp-legal__indice a { display: inline-block; min-height: var(--alvo-link, 24px); }
.dp-legal h2[id] { scroll-margin-top: var(--rolagem, 110px); }
@media (max-width: 767px) { .dp-legal { padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); font-size: var(--texto-16, 16px); } .dp-legal h2 { font-size: var(--texto-22, 22px); } }

/* ==========================================================================
   As telas de venda do WooCommerce na paleta da DEPAULO.

   O WooCommerce traz roxo #7F54B3 nos botões, rosa #CC3366 nos links e um
   verde-oliva #958E09 nos preços, que não têm nada a ver com a marca. Isto é
   escrito aqui, no CSS do plugin, e não no arquivo do tema: o hello-elementor
   é atualizado de tempos em tempos e levaria a personalização junto.
   ========================================================================== */

.woocommerce, .woocommerce-page { --dp-woo-azul: #035FDD; --dp-woo-azul-hov: #024BB5; }

/* ---------- botões ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button, .woocommerce .checkout-button,
.wc-block-components-button, .wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background-color: var(--azul) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: var(--bt-fonte, var(--sora-caixa)) !important;
	font-weight: 600 !important;
	letter-spacing: .02em !important;
	padding: 14px 26px !important;
	transition: background-color .15s ease !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover,
.wc-block-components-button:hover, .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
	background-color: var(--azul-hov) !important;
	color: #fff !important;
}
/* foco pelo teclado nos botões da loja: as mesmas variáveis da regra geral de foco (A.9, no fim
   deste arquivo), com 3 px azul de reserva se elas faltarem; !important porque disputa com o CSS
   do WooCommerce */
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible,
.wc-block-components-button:focus-visible {
	outline: var(--foco-largura, 3px) solid var(--foco-cor, var(--azul)) !important;
	outline-offset: var(--foco-afastamento, 3px) !important;
}
.woocommerce a.button:disabled, .woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled, .woocommerce button.button.alt.disabled {
	background-color: #9CB6DD !important; color: #fff !important; cursor: not-allowed !important;
}

/* ---------- preços ---------- */
.woocommerce .price, .woocommerce span.price, .woocommerce div.product p.price,
.woocommerce div.product span.price, .woocommerce ul.products li.product .price,
.woocommerce-Price-amount, .wc-block-components-product-price {
	color: var(--azul) !important;
	font-family: var(--sora-num) !important;
	font-weight: 700 !important;
}
.woocommerce div.product p.price del, .woocommerce .price del, .wc-block-components-product-price del {
	color: var(--cinza-tx) !important; font-weight: 500 !important; opacity: .8;
}

/* ---------- links ---------- */
.woocommerce-page main a:not(.button):not(.dp-bt):not(.wc-block-components-button),
.woocommerce main a:not(.button):not(.dp-bt):not(.wc-block-components-button) {
	color: var(--azul);
}
.woocommerce main a:not(.button):not(.dp-bt):hover { color: var(--azul-hov); }
.woocommerce a.remove, .wc-block-cart-item__remove-link { color: var(--erro, #B91C1C) !important; }
.woocommerce a.remove:hover { background: var(--erro, #B91C1C) !important; color: var(--branco) !important; }

/* ---------- avisos ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
	border-top: 0 !important; border-left: 4px solid var(--azul) !important;
	border-radius: 0 8px 8px 0 !important; background: #EFF5FE !important;
	color: var(--chumbo) !important; font-family: var(--inter) !important;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--azul) !important; }
.woocommerce-error, .wc-block-components-notice-banner.is-error {
	border-left-color: var(--erro, #B91C1C) !important; background: #FEF2F2 !important;
}
.woocommerce-error::before { color: var(--erro, #B91C1C) !important; }

/* ---------- formulários do checkout e da conta ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text,
.wc-block-components-text-input input {
	border: 1px solid var(--cinza-bor) !important; border-radius: 8px !important;
	padding: 12px 14px !important; font-family: var(--inter) !important; font-size: 15px !important;
	color: var(--chumbo) !important; background: #fff !important;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--azul) !important; outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(3,95,221,.14) !important;
}
.woocommerce form .form-row label, .woocommerce-billing-fields label {
	color: var(--chumbo) !important; font-family: var(--inter) !important;
	font-weight: 600 !important; font-size: 14px !important;
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register,
.woocommerce-checkout #payment, .woocommerce .cart_totals, .woocommerce-order,
.woocommerce-MyAccount-content {
	border: 1px solid var(--cinza-bor) !important; border-radius: 12px !important;
	background: #fff !important;
}
.woocommerce-checkout #payment { background: var(--cinza-1) !important; }
.woocommerce-checkout #payment div.payment_box { background: #EFF5FE !important; color: var(--chumbo) !important; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #EFF5FE !important; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none !important; }

/* ---------- títulos e tabelas ---------- */
/* 23/09/2026: limitado ao conteúdo (.site-main). Sem isso a regra pegava os títulos do rodapé,
   que viraram h2, e os deixava chumbo sobre o fundo escuro (contraste 1,08 para 1) */
.woocommerce div.product .product_title, .woocommerce-page .site-main :is(h1, h2, h3),
.woocommerce div.product h2 {
	font-family: var(--sora) !important; color: var(--chumbo) !important; letter-spacing: -.02em;
}
.woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce table.shop_table th {
	border-color: var(--cinza-bor) !important; font-family: var(--inter) !important;
}
.woocommerce table.shop_table thead th { color: var(--chumbo) !important; font-weight: 700 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: #fff !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--azul) !important; }

/* ---------- navegação da área do cliente ---------- */
.woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--cinza-bor); }
.woocommerce-MyAccount-navigation li a {
	display: block; padding: 13px 16px; color: var(--cinza-tx2) !important;
	font-family: var(--inter) !important; font-weight: 500; text-decoration: none !important;
}
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover {
	background: #EFF5FE; color: var(--azul) !important; font-weight: 600;
}

/* ---------- respiro das páginas da loja, que nasciam coladas na borda ---------- */
.woocommerce-page .site-main, .woocommerce .site-main,
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content,
.woocommerce-account .entry-content, .single-product .entry-content, .post-type-archive-product .site-main {
	max-width: 1180px; margin-inline: auto; padding: 48px 20px 80px;
}
@media (max-width: 700px) {
	.woocommerce-page .site-main, .woocommerce .site-main,
	.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content,
	.woocommerce-account .entry-content, .single-product .entry-content { padding: 32px 18px 60px; }
	.woocommerce a.button, .woocommerce button.button, .woocommerce .checkout-button { width: 100%; text-align: center; }
}

/* 22/09/2026: os links do rodapé tinham 23 px de altura; o mínimo para o dedo acertar no celular é 24 px */
[data-elementor-type="footer"] a.e-button-base { min-height: 24px; }

/* ============================================================================
   ABA "APARÊNCIA" DOS WIDGETS (onda A, item A.6, 23/09/2026)
   Cada escolha do painel vira uma classe no invólucro do widget (a div elementor-widget-dp-*).
   As classes só definem variáveis --sec-*; quem pinta é a regra de cada widget, que lê a variável
   com o valor de hoje como reserva. As variáveis --sec-* nunca são declaradas no :root: fora de
   um widget com escolha feita elas não existem, a reserva vale e nada muda.
   Nenhum tom novo entrou aqui: cada valor já estava em uso no dp.css ou é um nome da régua do A.3,
   com o mesmo valor escrito depois da vírgula (vale igual com ou sem o A.3).
   Este bloco fica depois das regras dos widgets de propósito; as regras gerais do A.9 vêm depois dele.
   ============================================================================ */

/* ---------- fundo: tons claros (texto escuro) ---------- */
/* Lista simples, e não :is(), de propósito: o navegador que não conhece :is() (Safari e iPhone antes
   do iOS 14, Chrome antes do 88, Firefox antes do 78) descarta a regra inteira, e o FAQ claro de
   Preços ficaria com o texto branco sobre o fundo branco. Mesmo peso (uma classe) e mesmo resultado
   nos navegadores de hoje. Nota do integrador da onda A, 23/09/2026. */
.dp-fundo--branco, .dp-fundo--cinza, .dp-fundo--azul-claro {
	--sec-titulo: var(--chumbo); --sec-apoio: var(--cinza-tx2); --sec-rotulo: var(--azul); --sec-destaque: var(--azul);
	--sec-cartao-borda: var(--cinza-bor); --sec-cartao-borda-hover: var(--cinza-bor);
	--sec-cartao-titulo: var(--chumbo); --sec-cartao-texto: var(--cinza-tx2);
	--sec-realce: rgba(3,95,221,.06); --sec-link: var(--azul);
}
/* branco: exatamente o FAQ claro que Preços tinha (fundo branco, cartão cinza, resposta branca) */
.dp-fundo--branco { --sec-fundo: var(--branco); --sec-cartao: var(--cinza-1); --sec-cartao-2: var(--branco); }
.dp-fundo--cinza { --sec-fundo: var(--cinza-1); --sec-cartao: var(--branco); --sec-cartao-2: var(--branco); }
/* azul-claro: o fundo e a linha azulada da régua do A.3 (--azul-claro e --linha-azulada). O bloco de
   mensalidades de Preços usa hoje #EDF4FF e #DCE7F7, que a régua junta a esses dois na onda B (no
   fundo a diferença é imperceptível). Nenhuma página usa esta escolha hoje. */
.dp-fundo--azul-claro { --sec-fundo: var(--azul-claro, #EAF2FF); --sec-cartao: var(--branco); --sec-cartao-2: var(--branco); --sec-cartao-borda: var(--linha-azulada, #D7E0EB); --sec-cartao-borda-hover: var(--linha-azulada, #D7E0EB); }

/* ---------- fundo: tons escuros (texto claro) ---------- */
/* escuro: os tons do FAQ da home, para "Escuro" no FAQ ficar igual ao padrão dele. O #1a2330 é o tom
   próprio da resposta aberta do FAQ, um pouco mais escuro que o cartão: não juntar ao --cartao-esc. */
.dp-fundo--escuro {
	--sec-fundo: var(--chumbo); --sec-titulo: var(--branco); --sec-apoio: var(--texto-apoio-escuro, #9CA3AF); --sec-rotulo: var(--texto-apoio-escuro, #9CA3AF); --sec-destaque: var(--azul-destaque, #73A9FF);
	--sec-cartao: var(--cartao-esc); --sec-cartao-2: #1a2330; --sec-cartao-borda: rgba(255,255,255,.05); --sec-cartao-borda-hover: #374151;
	--sec-cartao-titulo: var(--branco); --sec-cartao-texto: var(--texto-sobre-escuro, #D1D5DB); --sec-realce: rgba(3,95,221,.07); --sec-link: var(--verde);
}
/* azul: os textos claros das chamadas azuis das páginas internas (#EDF3FF e #D7E8FF, contraste de
   5,1 e 4,6 para 1 sobre o azul) e cartões brancos, como o cartão de resultado do topo */
.dp-fundo--azul {
	--sec-fundo: var(--azul); --sec-titulo: var(--branco); --sec-apoio: #EDF3FF; --sec-rotulo: #D7E8FF; --sec-destaque: var(--verde);
	--sec-cartao: var(--branco); --sec-cartao-2: var(--branco); --sec-cartao-borda: rgba(255,255,255,.4); --sec-cartao-borda-hover: var(--branco);
	--sec-cartao-titulo: var(--chumbo); --sec-cartao-texto: var(--cinza-tx2); --sec-realce: rgba(3,95,221,.06); --sec-link: var(--azul);
}

/* ---------- respiro: o padding da seção, em cima e embaixo, com a margem lateral que anda junto ---------- */
/* --sec-padding guarda o atalho inteiro do padding (vertical e lateral). Onda B (B.3, 23/09/2026): as
   duas escolhas passaram a valer a régua, 100 px em cima e embaixo no computador e 60 no celular, com a
   margem lateral da régua (24 e 18). Antes: compacto 105 e 24 (68 e 18 até 700 px), o das seções de
   Preços; amplo 180 e 20 (80 e 18 até 767 px), o do FAQ e do blog da home. As classes continuam, para
   a escolha já gravada no FAQ de Preços seguir valendo sem mexer no banco. */
.dp-respiro--compacto, .dp-respiro--amplo { --sec-padding: var(--secao-respiro, 100px) var(--margem-lateral, 24px); }
@media (max-width: 767px) { .dp-respiro--compacto, .dp-respiro--amplo { --sec-padding: var(--secao-respiro-celular, 60px) var(--margem-lateral-celular, 18px); } }

/* ---------- largura do conteúdo ---------- */
/* estreita: a da chamada final das páginas internas (840). larga: a régua do site (.dp-wrap, 1.300 px,
   o mesmo valor que a régua do A.3 chama de --largura-conteudo) */
.dp-largura--estreita { --sec-largura: 840px; }
.dp-largura--larga { --sec-largura: 1300px; }

/* ---------- alinhamento do título da seção (rótulo, título e texto de abertura) ---------- */
.dp-alinha--centro .dp-cab { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.dp-alinha--esq .dp-cab { align-items: flex-start; text-align: left; margin-left: 0; margin-right: 0; }

/* ---------- animação ---------- */
/* Nenhuma: nada se prepara nem se mexe (a regra fica no bloco "animações de entrada", no topo do
   arquivo). Com a animação nova (A.7) o texto nasce visível em todo o site, então a regra que mostrava
   os textos do widget sem esperar a rolagem saiu daqui. Suave: cartões e ilustrações sobem 16 px ao
   entrar na tela; o atraso escolhido abaixo tem prioridade sobre o de cada bloco. */
.dp-atraso--0ms { --dp-atraso: 0ms; }
.dp-atraso--75ms { --dp-atraso: 75ms; }
.dp-atraso--150ms { --dp-atraso: 150ms; }

/* ---------- trecho do título em destaque (campo próprio, no lugar de digitar <span>) ---------- */
/* nome próprio de propósito: "dp-destaque" já existe na tabela de projetos do mu-plugin depaulo-design.php */
.dp-titulo-destaque { color: var(--sec-destaque, var(--azul)); }
.dp-cab--claro .dp-titulo-destaque { color: var(--sec-destaque, #73A9FF); }

/* ---------- foco do teclado (encaixe com o A.9) ---------- */
/* O A.9 desenha o contorno de foco com a variável --foco-cor e a declara nas seções escuras da casa.
   Com fundo escolhido na aba, a cor acompanha o fundo: azul nos claros, branco no escuro e no azul.
   Ela é declarada no bloco da seção (.dp), e não no invólucro, porque o A.9 declara a dele nesse
   mesmo bloco e a declaração do próprio elemento vence a que vem de fora. Sem o A.9, nenhuma regra lê
   a variável e estas linhas não fazem nada. */
:is(.dp-fundo--branco, .dp-fundo--cinza, .dp-fundo--azul-claro) :where(.dp) { --foco-cor: var(--azul); }
:is(.dp-fundo--escuro, .dp-fundo--azul) :where(.dp) { --foco-cor: var(--branco); }
/* No FAQ o contorno usa a cor do próprio texto, como o A.9 já faz no FAQ sem escolha: pergunta, resposta
   e link têm contraste com o cartão em que estão nos cinco fundos. No Azul os cartões são brancos, e um
   contorno branco sumiria neles. */
:is(.dp-fundo--branco, .dp-fundo--cinza, .dp-fundo--azul-claro, .dp-fundo--escuro, .dp-fundo--azul) :where(.dp-faq) { --foco-cor: currentColor; }

/* ---------- como o FAQ responde às escolhas ---------- */
/* Com fundo escolhido, a cor da pergunta vai também numa regra com o peso de duas classes e uma
   etiqueta, o mesmo da regra presa ao número da página de Preços que o passo 12 (A.8) tira. Nos
   navegadores de hoje o valor é o mesmo que a regra da pergunta já dá, e o mouse e o foco continuam
   com a regra própria deles, que pesa mais. No aparelho que não conhece :focus-visible (Safari e
   iPhone antes do 15.4, Firefox antes do 85), a regra da casa para o mouse e o foco da pergunta cai
   inteira, e o reset do tema pai ([type=button]:hover e :focus, peso de duas classes) trocaria o texto
   da pergunta para branco no mouse, no foco e no toque; esta regra mantém o texto escuro, como é hoje
   nesses aparelhos. Nota do integrador da onda A, 23/09/2026 (texto do comentário revisto na terceira
   rodada, sem o seletor da regra antiga escrito por extenso). */
.dp-fundo--branco button.dp-faq__perg, .dp-fundo--cinza button.dp-faq__perg, .dp-fundo--azul-claro button.dp-faq__perg,
.dp-fundo--escuro button.dp-faq__perg, .dp-fundo--azul button.dp-faq__perg { color: var(--sec-cartao-titulo); }
/* Com o título à esquerda, o cabeçalho do FAQ fica na largura do texto de abertura, como em Preços. */
.dp-alinha--esq .dp-faq .dp-cab { max-width: 760px; margin: 0 0 38px; align-items: start; }
/* Com fundo escolhido, a pergunta aberta mantém a borda azul mesmo com o mouse em cima (em Preços
   já era assim; no FAQ sem escolha o mouse ainda troca a borda, como sempre foi). Lista simples, e
   não :is(), pelo mesmo motivo do fundo claro, lá em cima: mesmo peso (duas classes). Nota do
   integrador da onda A, 23/09/2026. */
.dp-fundo--branco .dp-faq__item--aberto, .dp-fundo--cinza .dp-faq__item--aberto, .dp-fundo--azul-claro .dp-faq__item--aberto,
.dp-fundo--escuro .dp-faq__item--aberto, .dp-fundo--azul .dp-faq__item--aberto { border-color: var(--azul); }

/* ============================================================================
   Regras gerais (onda A, item A.9, 23/09/2026)

   Este bloco vai no FIM do dp.css e precisa continuar depois de qualquer regra que mexa no contorno
   de foco: a regra de foco empata no peso com as que ela corrige e vence pela ordem. Cinco coisas
   que valem para o site inteiro: foco visível, palavra sozinha na última linha, "ocultar por tamanho
   de tela" do Elementor, cores do modo de alto contraste e do escurecimento automático. E um ajuste
   pontual: o retorno visual do link "Preços" no bloco de preços da home completa.
   Quase tudo tem peso zero (:where) ou mínimo (html), para as regras de cada seção continuarem
   mandando. A exceção, explicada no item 1, é a regra de foco. Nenhum !important.
   Preço e telefone numa linha só (white-space: nowrap) saíram deste bloco: mudam a quebra de linha
   para quem usa mouse e ficaram para a onda B, com print antes e depois (LEIA-ME da parte tokens).
   ============================================================================ */

/* ---------- 1. foco visível: contorno de 3 px em tudo que é clicável ---------- */
/* Só aparece quando o foco chega pelo teclado (:focus-visible). Quem usa mouse não vê nada novo:
   o navegador não liga o :focus-visible no clique de um link ou de um botão.
   Cor, largura e afastamento vêm de variáveis de peso mínimo. Cada componente ajusta o seu caso
   trocando a variável, sem outra regra de foco e sem !important. */
html { --foco-cor: var(--azul); --foco-largura: 3px; --foco-afastamento: 3px; }

/* Peso (0,3,0) de propósito: é a única regra alta deste bloco. Ela precisa vencer três coisas que
   hoje apagam ou enfraquecem o foco:
   1. a regra do tema pai (hello-elementor) "[tabindex]:not([tabindex="-1"]):focus-visible", também
      (0,3,0), que desenha contorno preto de 2 px (1,1 para 1 de contraste no rodapé escuro);
   2. as regras da casa que zeram o contorno no foco (".dp .dp-faq__perg:focus-visible",
      ".dp .dp-vitrine-opcao:focus-visible" e mais sete), todas com peso até (0,3,0);
   3. ".dp-cabecalho a:focus-visible", com 2 px.
   O dp.css carrega depois do tema e esta regra fica no fim dele: o empate em (0,3,0) se resolve pela
   ordem. Campos de digitação ficam de fora de propósito: já mostram a borda azul ao receber o foco,
   e o navegador liga o :focus-visible neles também no clique do mouse. */
:is(a[href], area[href], button, summary, [role="button"], [role="tab"], [role="link"],
    [tabindex]:not([tabindex="-1"]),
    input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])):focus-visible {
	outline: var(--foco-largura) solid var(--foco-cor);
	outline-offset: var(--foco-afastamento);
}
/* O reset do tema pai também põe um halo branco de 4 px (box-shadow: 0 0 0 4px #fff) em todo foco
   pelo teclado. Somado ao contorno branco das seções escuras, virava um anel branco de uns 6 px, o
   dobro do desenho. Esta regra tira só esse halo: tem peso zero, então o componente que desenha a
   própria sombra no foco ou em repouso (cartões dos segmentos, opções do montador e do orçamento,
   botão em pílula) continua com ela. Ela só vence o reset onde ele está na camada "tema", ou seja,
   nas páginas de venda depois do A.2. Fora da camada o reset pesa mais e o halo continua como hoje,
   sem nenhum outro efeito. */
:where(:is(a[href], area[href], button, summary, [role="button"], [role="tab"], [role="link"],
           [tabindex]:not([tabindex="-1"]),
           input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])):focus-visible) {
	box-shadow: none;
}
/* Fundo escuro ou azul: o contorno fica branco (19 para 1 no quase-preto, 5,7 para 1 no azul; o
   azul sobre o cartão escuro daria só 2,6 para 1). Os cartões claros dentro dessas seções voltam
   ao azul. */
:where(.dp-topo, .dp-bio__cartao, .dp-ars, .dp-port, .dp-num, .dp-planos, .dp-precos__cartao--azul, .dp-analise,
       .dp-interna-hero, .dp-interna-grupo, .dp-interna-cta, .dp-pgprecos-final, .dp-qs-hero, .dp-orc-final,
       .dp-embreve, .dp-pcontato-hero__lateral, [data-elementor-type="footer"]) { --foco-cor: var(--branco); }
:where(.dp-topo__cartao, .dp-interna-hero__cartao) { --foco-cor: var(--azul); }
/* O FAQ é escuro na home e claro em Preços. O contorno usa a cor do próprio texto, que já passa no
   contraste nos dois fundos. Esta linha fica mesmo com a escolha "Fundo" da aba Aparência (A.6 e
   A.8): as classes de fundo só decidem a cor quando há escolha marcada, e o FAQ sem escolha (o da
   home completa) depende desta reserva. Nota do integrador da onda A, 23/09/2026. */
:where(.dp-faq) { --foco-cor: currentColor; }
/* Dentro de uma caixa com overflow hidden, o contorno de fora seria cortado: nesses casos ele entra
   3 px para dentro do próprio botão. Vale para as perguntas do FAQ, os itens do montador, as setas
   do carrossel (que ficam na borda da caixa que esconde os slides) e as abas da página de produto da
   loja (a lista de abas do WooCommerce esconde o que passa da borda). No menu do celular os itens
   ocupam a largura toda do painel, que rola, e o mesmo corte aconteceria dos lados. */
:where(.dp-faq__perg, .dp-vitrine-item__toque, .dp-vitrine-item__saber, .dp-seta, .dp-cabecalho .dp-sublink,
       .woocommerce-tabs .tabs a) { --foco-afastamento: -3px; }
@media (max-width: 1180px) { :where(.dp-cabecalho .dp-link) { --foco-afastamento: -3px; } }

/* ---------- 2. sem palavra sozinha na última linha ---------- */
/* "pretty" faz o navegador rever as últimas linhas para não deixar uma palavra sozinha no fim.
   Usa a propriedade longa (text-wrap-style), e não o atalho text-wrap: o atalho também decide se a
   linha quebra (text-wrap-mode) e desfaria um white-space: nowrap declarado em outro lugar.
   Peso zero: os títulos que já pedem "balance" (.dp-h2 e os títulos principais das páginas internas)
   continuam como estão. Navegador que não conhece a propriedade simplesmente a ignora. */
:where(.dp, .dp-legal) :where(h1, h2, h3, h4, h5, h6, p, li, legend, figcaption, blockquote) { text-wrap-style: pretty; }

/* ---------- 3. "Ocultar em computador, tablet ou celular" do Elementor ---------- */
/* O controle do painel (Avançado, Responsivo) põe a classe elementor-hidden-* no widget, mas a regra
   que esconde mora na folha do Elementor, que as páginas v2 não carregam. Hoje o controle não esconde
   nada nelas. Estas regras repetem as do Elementor 4.3 para as larguras de quebra ativas no kit
   (lidas no kit 8 em 23/09/2026: viewport_md 768 e viewport_lg 1025, sem quebra extra), ou seja,
   celular até 767 px, tablet de 768 a 1024 e computador a partir de 1025, com peso menor que o dele.
   Dentro do editor continua valendo a regra do próprio Elementor, que carrega lá.
   Se o kit ganhar uma quebra nova (a de 1.180 px ficou para a onda B), não basta acrescentar uma
   linha: com a quebra nova o computador passa a começar em outra largura (1.181 px, no caso da de
   1.180) e a faixa vizinha muda junto. Aí as três regras precisam ser reescritas para espelhar as do
   frontend.min.css do Elementor para as quebras ativas, senão um widget marcado "ocultar no
   computador" some numa faixa em que o editor o mostra visível. */
@media (max-width: 767px) { :where(.elementor) :is(.elementor-hidden-mobile, .elementor-hidden-phone) { display: none; } }
@media (min-width: 768px) and (max-width: 1024px) { :where(.elementor) .elementor-hidden-tablet { display: none; } }
@media (min-width: 1025px) { :where(.elementor) .elementor-hidden-desktop { display: none; } }

/* ---------- 4. cores forçadas e escurecimento automático ---------- */
/* Modo de alto contraste do Windows: o sistema troca todas as cores pelas do tema dele e apaga fundo e
   sombra. O que era desenhado só com fundo some. Aqui, só o necessário para nenhum controle sumir. */
@media (forced-colors: active) {
	/* botões sem borda viram texto solto: ganham um contorno na cor de botão do sistema (por dentro,
	   para não mexer no tamanho) */
	:where(.dp-form .dp-bt, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
	       .woocommerce .checkout-button, .wc-block-components-button) { outline: 2px solid ButtonText; outline-offset: -2px; }
	/* o ícone do menu e os pontos do carrossel são riscos desenhados com fundo: sem isto somem por
	   inteiro. forced-color-adjust: none devolve o controle só a esses riscos, que passam a usar a cor
	   de texto de botão do sistema. Mesmo peso das regras que desenham os riscos, vencendo pela ordem. */
	.dp-hamb::before, .dp-hamb::after, .dp-ponto::before { forced-color-adjust: none; background: ButtonText; }
	.dp-hamb::before { box-shadow: 0 8px 0 ButtonText; }
	.dp-cabecalho.dp-aberto .dp-hamb::before, .dp-cabecalho.dp-aberto .dp-hamb::after { background: ButtonText; box-shadow: none; }
	.dp-ponto--ativo::before { background: Highlight; }
	/* a opção escolhida no montador, a aba ativa e a pergunta aberta só se diferenciavam pelo fundo e
	   pela sombra: ganham um contorno na cor de destaque do sistema */
	:where(.dp-vitrine-opcao--ativa, .dp-vitrine-plano--ativo, .dp-vitrine-periodo--ativo, .dp-vitrine-item--ativo,
	       .dp-orc-opcao--ativa, .dp-aba--ativa, .dp-faq__item--aberto) { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* Escurecimento automático (Chrome com "tema escuro automático", Samsung Internet): o navegador
   escurece por conta própria a página que não declara esquema de cor, e a marca muda (o botão branco
   fica preto, o azul clareia). "only light" diz que o site só tem a versão clara. Para quem não usa
   esse recurso nada muda: sem declaração o navegador já desenhava tudo claro. Vale junto com a meta
   color-scheme que o dp-design.php imprime no cabeçalho do HTML. */
html { color-scheme: only light; }

/* ---------- 5. o link "Preços" do bloco de preços da home completa ---------- */
/* O link fica na cor do parágrafo e sem sublinhado. O único retorno ao passar o mouse era o roxo
   (#333366) do reset do tema pai, que sai das páginas de venda no A.2. Aqui ele ganha o retorno da
   casa: azul e sublinhado. */
.dp-precos__regra2 a:hover { color: var(--azul); text-decoration: underline; }

/* ---------- preço e telefone numa linha só (onda B, item B.4; preparado na onda A, A.9) ----------
   "R$" numa linha e "297/mês" na outra parece erro de digitação. Estas classes mostram um preço curto ou
   um telefone: conferidas no HTML das 9 páginas em 23/09/2026, têm no máximo 25 letras e cabem numa linha
   em 320 px. .dp-preco e .dp-tel ficam prontas para quando o preço dentro de uma frase ganhar o próprio
   elemento (o que CSS sozinho não resolve). Peso zero: onde uma regra da seção já decide, ela continua
   valendo. Vale para o site inteiro, e por isso entra como passo separado, depois dos de Preços.
   Onda B: o cartão da conta de Preços passou a ser .dp-conta, e o nome dele foi trocado nesta lista. */
:where(.dp-preco, .dp-tel,
       .dp-tipos__preco b, .dp-precos__destaque b, .dp-precos__l b,
       .dp-conta__linha strong, .dp-pgprecos-caminho__parcela strong, .dp-pgprecos-caminho__valores strong,
       .dp-pgprecos-plano__topo strong, .dp-pgprecos-projetos tbody td,
       .dp-orc-opcao__preco, .dp-orc-resumo__linha strong,
       .dp-vitrine-opcao__preco, .dp-vitrine-periodo b, .dp-vitrine-linha strong, .dp-vitrine-item__preco, .dp-vitrine-conta__valor,
       .woocommerce-Price-amount,
       .dp-contato__tel, .dp-pcontato-hero__ligar, a[href^="tel:"], .dp-legal a[href*="wa.me/"]) { white-space: nowrap; }