/*
Theme Name: Hello Elementor Filho (Vernox)
Template: hello-elementor
Description: Tema filho do Hello Elementor com o CSS e o JavaScript do site em arquivos. Gerado por ferramentas/gerar.js; nao editar no servidor.
Author: Agencia Vernox
Version: 2026.10.03
Text Domain: hello-elementor-filho
*/
/* Residencial Plenitude Sênior
   Gerado por ferramentas/css.js a partir de ferramentas/tokens.js.
   Editar os tokens, não este bloco: qualquer ajuste aqui some no próximo build.
   Só entra aqui o que o Elementor não expressa por controle. */

/* ---------- Acessibilidade ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #C89C47;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Widgets HTML que só carregam script. */
.ps-oculto { display: none !important; }

/* Texto claro sobre fundo escuro em peso 300: sem o antialiased o traço
   engrossa no WebKit e o texto parece mais pesado que no resto do site. */
.ps-hero, .ps-topo-interno, .ps-cta-final, .ps-rodape {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Cabeçalho: estado de rolagem ----------
   Posição fixa, z-index, tamanho dos logos e larguras vêm do Elementor.
   O script do cabeçalho põe .ps-cabecalho-solido depois de 40px de rolagem;
   este é o único estado que o Elementor não expressa. */
.ps-cabecalho {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease, transform .35s ease;
}
/* Véu discreto só sobre o hero: sem ele o texto branco do menu quase some em
   fotos claras. Estado sólido não usa background-image nenhum, então o
   shorthand abaixo (background: rgba(...)) já limpa o degradê sozinho. */
.ps-cabecalho:not(.ps-cabecalho-solido) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent);
}
/* Sobre o rodapé o cabeçalho sai da tela por cima (classe posta pelo script). */
.ps-cabecalho.ps-cabecalho-oculto {
  transform: translateY(-110%);
  pointer-events: none;
}
.ps-cabecalho.ps-cabecalho-solido {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 20px rgba(46, 17, 64, .12);
}
/* Depois da rolagem o cabeçalho encolhe: quem dá altura é o padding das
   colunas internas, em volta do logo. */
.ps-cabecalho.ps-cabecalho-solido .ps-logo-caixa,
.ps-cabecalho.ps-cabecalho-solido .ps-cabecalho-direita {
  --padding-top: 2px;
  --padding-bottom: 2px;
}
/* Duas versões do logo, sobrepostas e trocadas por opacidade. A largura e a
   encolhida no estado sólido são só daqui (12/09/2026): o controle de
   largura do widget de imagem escreve com uma especificidade que não dá
   para vencer de fora com segurança, e o resultado deixava os dois logos
   com larguras ligeiramente diferentes — um "flick" visível ao encolher.
   Os dois widgets são position:absolute (0,0) e preenchem esta caixa, que é
   quem manda no tamanho; aspect-ratio (a proporção é a mesma nos dois
   arquivos) mantém a altura certa sem precisar declará-la à parte. */
.ps-logo-caixa {
  position: relative;
  width: 280px;
  aspect-ratio: 691.35 / 261.34;
  transition: width .35s ease;
  /* Sem isso, item de um flex row encolhe pra caber no espaço disponível
     (abaixo de 1240px de tela) independente da largura declarada aqui —
     foi a causa real do "flick", não uma briga de especificidade com o
     Elementor como cheguei a supor. */
  flex-shrink: 0;
}
.ps-logo-branco, .ps-logo-cor {
  position: absolute !important;
  inset: 0;
}
/* Respiro só na variante branca (hero), a pedido do cliente em 12/09/2026. */
.ps-logo-branco {
  padding: 10px;
}
/* O link em volta da imagem (para a home) é inline-block por padrão, e um
   inline-block sem largura própria encolhe pro conteúdo — que, com o filho
   em width:100%, não tem base nenhuma pra calcular e também encolhe pra
   zero. Bloco do tamanho da caixa quebra esse círculo. Achado por Erick
   direto no inspector, 12/09/2026. */
.ps-logo-branco a, .ps-logo-cor a {
  display: block;
  width: 100%;
  height: 100%;
}
.ps-logo-branco img, .ps-logo-cor img {
  width: 100% !important;
  height: 100% !important;
  transition: opacity .35s ease;
}
.ps-cabecalho:not(.ps-cabecalho-solido) .ps-logo-cor { opacity: 0; pointer-events: none; }
.ps-cabecalho.ps-cabecalho-solido .ps-logo-branco { opacity: 0; pointer-events: none; }
.ps-cabecalho.ps-cabecalho-solido .ps-logo-caixa { width: 150px; }

/* Cor e tamanho base do item de menu vêm do controle do widget, porque ele
   escreve com {{WRAPPER}}. Aqui fica só o estado sólido e o hover, que o
   widget não consegue expressar, e por isso levam !important de propósito.
   Sem combinador de filho em nenhum seletor deste arquivo: o WordPress
   escapa esse caractere no CSS do Personalizador e invalida a regra. */
.ps-cabecalho .elementskit-navbar-nav .ekit-menu-nav-link { transition: color .35s ease; }
.ps-cabecalho.ps-cabecalho-solido .elementskit-navbar-nav .ekit-menu-nav-link {
  color: #3D1A57 !important;
}
.ps-cabecalho .elementskit-navbar-nav .ekit-menu-nav-link:hover,
.ps-cabecalho.ps-cabecalho-solido .elementskit-navbar-nav .ekit-menu-nav-link:hover {
  color: #C89C47 !important;
}
/* Item da página atual: o ElementsKit já marca com a classe "active" (e o
   <li> com current-menu-item) e pinta de cinza por conta própria; aqui vira
   dourado, com uma linha flutuando abaixo, nos dois estados do cabeçalho. */
.ps-cabecalho .elementskit-navbar-nav .ekit-menu-nav-link.active,
.ps-cabecalho.ps-cabecalho-solido .elementskit-navbar-nav .ekit-menu-nav-link.active {
  color: #C89C47 !important;
  position: relative;
}
.ps-cabecalho .elementskit-navbar-nav .ekit-menu-nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #C89C47;
}

/* ---------- Convivência com a barra do admin ----------
   Com usuário logado, o WordPress fixa a própria barra no topo e o cabeçalho
   fixo ficaria embaixo dela. A altura vem de --wp-admin--admin-bar--height,
   que o core publica (32px, 46px abaixo de 782px). Abaixo de 600px a barra
   rola com a página, então o cabeçalho volta ao topo no estado sólido. */
/* .elementor-element no seletor de propósito: a posição fixa e o top: 0 do
   cabeçalho vêm do controle do Elementor, escrito com três classes. Com uma
   classe a menos esta regra perdia e a barra voltava a comer o cabeçalho. */
body.admin-bar .elementor-element.ps-cabecalho {
  top: var(--wp-admin--admin-bar--height, 0px);
}
@media screen and (max-width: 600px) {
  body.admin-bar .elementor-element.ps-cabecalho.ps-cabecalho-solido { top: 0; }
}
/* O painel do menu no celular fica atrás da barra do admin (z-index 99999) e
   o botão de fechar some. O cabeçalho é quem cria o contexto de empilhamento,
   então é ele que sobe, e só enquanto o menu está aberto. */
body.admin-bar .ps-cabecalho:has(.elementskit-navbar-nav-default.active) {
  z-index: 100001;
}

/* ---------- Botões: tamanho do ícone ----------
   Fonte, peso, raio, padding e cores vêm do kit e do widget. O widget de
   botão não tem controle de tamanho de ícone: por padrão ele acompanha o
   corpo da fonte, e aqui ele é maior que o texto de propósito. */
.ps-btn .elementor-button-icon i { font-size: 32px; }
.ps-btn .elementor-button-icon svg { width: 32px; height: 32px; }
.ps-cabecalho-cta .elementor-button-icon i { font-size: 22px; }
.ps-cabecalho-cta .elementor-button-icon svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.ps-hero .elementor-background-video-container video { object-fit: cover; }

/* ---------- Números ----------
   Dígitos de largura fixa: durante a contagem o número troca a cada quadro,
   e sem isso a linha inteira treme. */
.ps-numeros .elementor-counter-number-wrapper { font-variant-numeric: tabular-nums; }
/* O widget de contador só alinha o número; o título dele é um flex com
   justify-content, e o texto em duas linhas ficava à esquerda. */
.ps-numeros .elementor-counter-title { text-align: center; }

/* ---------- Entrada com a rolagem ----------
   Títulos e textos das seções entram guiados pelo scroll por um script curto
   no tema filho (tema/js/revela.js), que escreve só o deslocamento a cada
   quadro (sem opacidade, a pedido do cliente em 12/09/2026), linear e sem
   atraso, e desfaz quando a rolagem volta. Aqui só a garantia de que nenhuma
   transição do Elementor amacie o movimento. */
.ps-revela, .ps-revela-esq, .ps-revela-dir, .ps-galeria .gallery-item {
  transition: none;
  /* O Elementor amacia transform de container em 0,4s; zerado aqui, senão o
     bloco chega atrasado em relação à rolagem. */
  --e-con-transform-transition-duration: 0s;
  will-change: transform;
}

/* ---------- Galeria ----------
   O widget de galeria imprime o shortcode [gallery] do WordPress, que vem com
   float e largura em porcentagem. Aqui vira grade, com a primeira foto
   ocupando a linha inteira, que era o desenho aprovado da seção. O raio das
   fotos vem do controle do widget.

   As quatro propriedades com !important são as que o CSS de galeria de duas
   colunas define e que quebrariam a grade: float, width, margin e max-width. */
.ps-galeria .gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0;
}
.ps-galeria .gallery-item {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  max-width: none !important;
}
.ps-galeria .gallery-item:first-child { grid-column: 1 / -1; }
.ps-galeria .gallery-icon { margin: 0; line-height: 0; }
.ps-galeria .gallery-icon a { display: block; }
.ps-galeria .gallery-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  box-shadow: 0 6px 28px rgba(46, 17, 64, .12);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ps-galeria .gallery-item:first-child img { aspect-ratio: 16 / 7; }
/* Sinal de que a foto é clicável. */
.ps-galeria .gallery-icon a:hover img,
.ps-galeria .gallery-icon a:focus-visible img {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(46, 17, 64, .22);
}
.ps-galeria .gallery-caption { display: none; }
@media (max-width: 767px) {
  .ps-galeria .gallery { grid-template-columns: 1fr; }
  .ps-galeria .gallery-item:first-child { grid-column: auto; }
  .ps-galeria .gallery-item:first-child img { aspect-ratio: 4 / 3; }
}

/* ---------- Valores ----------
   A lista de doze fica em HTML comum (leitor de tela e busca leem uma vez).
   Visualmente é uma faixa em looping infinito, sem JavaScript: o Elementor
   não tem controle de marquee, nem de faixa que escapa do miolo boxed. */
.ps-valores-pista {
  /* Só no eixo horizontal: cortar os dois eixos comia o topo dos acentos e
     o rabo do "g" nas palavras maiores. Overflow-x e overflow-y diferentes
     na mesma caixa: o navegador troca o "visible" por "auto", que não corta. */
  overflow-x: hidden;
  overflow-y: visible;
  /* Respiro para a caixa de linha do texto maior não ficar coincidindo com
     a borda da máscara/da pista. */
  padding: 10px 0;
  /* Degradê nas duas pontas em vez de corte seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ps-valores-trilho {
  display: flex;
  width: max-content;
  /* As duas cópias da lista são o que faz a volta em -50% ficar sem costura.
     Bem devagar de propósito: a faixa é pano de fundo, não é para ler correndo. */
  animation: ps-valores-rodar 130s linear infinite;
}
.ps-valores {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-valores li {
  white-space: nowrap;
  color: #FFFFFF;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
/* Separador: bolinha entre um valor e o próximo, inclusive na costura das
   duas cópias da lista. */
.ps-valores li::after {
  content: "•";
  display: inline-block;
  margin: 0 28px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
@keyframes ps-valores-rodar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-valores-trilho { animation: none; }
}
/* background-attachment: fixed é ignorado no Safari do iPhone e amplia demais
   a foto em tela pequena; e é paralaxe, então sai para quem pediu menos
   movimento. O !important é porque o Elementor escreve a mesma propriedade
   com seletor de especificidade maior. */
@media (max-width: 1024px) {
  .ps-valores-secao { background-attachment: scroll !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-valores-secao { background-attachment: scroll !important; }
}

/* ---------- FAQ ----------
   Cor, tipografia, borda e padding vêm do widget. O acordeão do Elementor não
   tem controle de raio nem de espaço entre itens. */
.ps-faq .elementor-accordion-item {
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* ---------- Depoimentos (widget do ElementsKit) ----------
   Cartões da mesma altura na linha: o Swiper dá altura própria a cada slide,
   e o widget não tem controle pra isso. Antes o texto do depoimento esticava
   (flex-grow) pra ocupar a sobra e empurrava o bloco de quem disse pro fundo
   do cartão — com um depoimento bem mais longo que os outros (a Simone,
   30/09/2026), isso deixava os cartões mais curtos com um vão vazio enorme.
   Trocado por altura fixa com rolagem própria no texto: os três cartões saem
   com a mesma altura naturalmente, sem precisar esticar nada. */
.ps-depoimentos-lista .swiper-slide { height: auto; }
.ps-depoimentos-lista .swiper-slide-inner,
.ps-depoimentos-lista .elementskit-testimonial-inner,
.ps-depoimentos-lista .elementskit-single-testimonial-slider { height: 100%; }
.ps-depoimentos-lista .elementskit-single-testimonial-slider { display: flex; flex-direction: column; }
.ps-depoimentos-lista .elementskit-commentor-content {
  flex: 0 0 auto;
  height: 280px;
  overflow-y: auto;
}
.ps-depoimentos-lista .elementskit-commentor-bio { padding-top: 10px; }

/* ---------- Textos longos sem espaço ----------
   O e-mail contato@residencialplenitudesenior.com.br não cabe em 350px e, sem
   ponto de quebra, empurrava a página para o lado no celular. */
.ps-canais .elementor-icon-list-text,
.ps-rodape-lista .elementor-icon-list-text,
.ps-rodape-copy { overflow-wrap: anywhere; }

/* ---------- Plugins de terceiros ----------
   O Forminator escreve o botão com seletor de id, que vence o kit do Elementor. */
.ps-formulario .forminator-button-submit {
  background: #5B2A80 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.ps-formulario .forminator-button-submit:hover { background: #3D1A57 !important; }
/* O shortcode da Vernox não tem controle de cor no widget. */
.ps-rodape-vernox .vernox-copyright {
  font-size: 15px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.ps-rodape-vernox .vernox-copyright:hover { color: #FFFFFF; }

/* ---------- Textos da cliente: Nossa história, O cuidado, A casa ----------
   Cartões, cores, raios e sombras vão pelos controles do Elementor. Aqui fica
   só o que não tem controle: a coluna que gruda na rolagem, o destaque das
   frases de virada dentro do texto corrido e o primeiro parágrafo de cada
   cartão da equipe (a definição do papel, antes dos detalhes). */
.ps-anc { scroll-margin-top: 130px; }
@media (min-width: 1025px) {
  .ps-sticky { position: sticky; top: 130px; }
}
.ps-historia-texto p:first-child {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.5;
  font-weight: 300;
  color: #3D1A57;
}
.ps-historia-texto p.ps-linha-destaque {
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.4;
  font-weight: 600;
  color: #5B2A80;
  margin: 34px 0;
  padding-left: 22px;
  border-left: 4px solid #C89C47;
}
.ps-historia-texto p:last-child, .ps-equipe-texto p:last-child { margin-bottom: 0; }
.ps-equipe-texto p:first-child { font-weight: 400; color: #3D1A57; }

/* Faixa "cuidar é…" (Nossa história): as três declarações em lista, com filete
   e ponto dourado; a expressão-chave de cada uma em destaque. */
.ps-manifesto-lista p {
  position: relative;
  margin: 0;
  padding: 26px 0 26px 32px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 300;
  line-height: 1.35;
  color: #FFFFFF;
}
.ps-manifesto-lista p:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.ps-manifesto-lista p::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(26px + .675em - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C89C47;
}
.ps-manifesto-lista strong { font-weight: 800; color: #E8D5A9; }

/* A casa: faixa (marquee) do espaço interno, tela cheia, looping infinito sem
   JavaScript — mesma técnica de "Nossos valores" (faixa duplicada, transform:
   translateX de 0 a -50%). O espaçamento entre fotos é margin-right em cada
   item (inclusive o último de cada cópia da lista), não gap no container: só
   assim as duas cópias saem com a mesma largura exata e a volta em -50% fica
   sem costura (gap no flex do trilho quebraria essa conta pela metade).
   A segunda cópia (sem link, aria-hidden, no shortcode do PHP) é só visual:
   lightbox e leitor de tela veem as 10 fotos uma vez só. */
.ps-interno-marquee { width: 100%; }
.ps-interno-pista {
  overflow-x: hidden;
  overflow-y: visible;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ps-interno-trilho {
  display: flex;
  width: max-content;
  animation: ps-interno-rodar 80s linear infinite;
  cursor: grab;
  /* Deixa o navegador tratar a rolagem vertical da página normalmente; o
     arraste horizontal é o JS (tema/js/marquee-interno.js) que assume. */
  touch-action: pan-y;
}
.ps-interno-trilho:hover, .ps-interno-trilho:focus-within {
  /* Sem isso, clicar bem na foto certa (ou ler a legenda) fica difícil com a
     faixa correndo por baixo do cursor. */
  animation-play-state: paused;
}
.ps-interno-trilho.ps-interno-arrastando { cursor: grabbing; }
.ps-interno-lista { display: flex; flex-wrap: nowrap; }
.ps-interno-item {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 340px;
  height: 320px;
  margin-right: 24px;
  border-radius: 18px;
  overflow: hidden;
  -webkit-user-drag: none;
  user-select: none;
}
.ps-interno-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sem isso, o navegador tenta iniciar o próprio arraste-de-imagem nativo
     (o "fantasma" da foto seguindo o cursor) por cima do nosso. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.ps-interno-legenda {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 8px);
  max-width: 85%;
  z-index: 2;
  background: #FFFFFF;
  color: #5B2A80;
  border-radius: 999px;
  padding: 5px 22px;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(46,17,64,.20);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.ps-interno-item:hover .ps-interno-legenda,
.ps-interno-item:focus-visible .ps-interno-legenda {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes ps-interno-rodar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-interno-trilho { animation: none; }
}

/* ---------- Postagens recentes (Home) ----------
   O corpo do cartão (fundo branco) é um retângulo reto; sem isso o canto
   dele aparece quadrado por baixo do raio arredondado do cartão inteiro. */
.ps-blog-lista .elementskit-post-image-card {
  overflow: hidden;
  /* O card não estica sozinho pra acompanhar a altura dos vizinhos (só o
     post-item, seu pai na grade, estica); herdando 100% dele, os 3 cards
     da linha ficam com a mesma altura, mesmo com textos de tamanhos
     diferentes. */
  height: 100%;
  /* Ancora o botão "Leia mais" (abaixo) no canto do card, não do corpo. */
  position: relative;
}
/* A foto vem com 20px de padding de fábrica (moldura), deixando um respiro
   branco ao redor dela; zerado para a foto ocupar a extremidade do cartão.
   O CSS do tema é impresso antes do CSS do próprio ElementsKit (blog-posts.css)
   no <head>, então em empate de especificidade o dele vence; a regra de
   fábrica é ".elementskit-post-image-card .elementskit-entry-header
   .elementskit-entry-thumb" (4 classes) — repetimos a mesma cadeia com
   ".ps-blog-lista" pra empatar em especificidade e, com !important, garantir
   a vitória independente da ordem de carregamento. */
.ps-blog-lista .elementskit-post-image-card .elementskit-entry-header .elementskit-entry-thumb {
  padding: 0 !important;
}
/* Botão "Leia mais" fixado no canto inferior direito do CARD (não do corpo
   de texto): testado com display:flex + flex-grow no corpo pra empurrar o
   botão pra baixo (o padrão usual de "rodapé grudado"), mas o corpo não
   cresce de verdade para preencher a altura do card sobrando — mesmo com
   "!important" direto no elemento via JS o "margin-top:auto" computava 0,
   então não é questão de especificidade, é o cálculo de flex-grow que não
   fecha nessa cadeia de porcentagem+stretch aninhada. Solução mais simples e
   confiável: o próprio card vira position:relative (já é a fonte confiável
   da altura igual, ver acima) e o botão sai do fluxo, plantado a 40px da
   direita e de baixo — os mesmos 40px do padding do corpo, pra ficar
   visualmente alinhado com o texto. O corpo ganha padding-bottom maior pra
   reservar esse espaço (o fundo dos dois é branco, então a sobra abaixo do
   texto e acima do botão fica invisível). */
.ps-blog-lista .elementskit-post-body {
  /* De fábrica o corpo já vem com position:relative (provavelmente para
     algum selo de autor/data de outras variantes, que não usamos aqui);
     sem neutralizar isso, o botão abaixo ancora nele em vez do card. */
  position: static !important;
  padding-bottom: 110px !important;
}
.ps-blog-lista .elementskit-post-image-card .elementskit-post-body .btn-wraper {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  margin-top: 0;
}
/* O zoom da foto no hover é de fábrica do widget (ElementsKit), mas vem com
   rotate(2deg) de inclinação (tilt): removido aqui para o zoom acontecer
   reto. Fica contido porque tanto a foto (.elementskit-entry-thumb, acima)
   quanto o cartão inteiro têm overflow:hidden — a foto amplia sem estourar
   a borda arredondada. Mesmo empate de especificidade do que acima, mesma
   solução (!important). */
.ps-blog-lista .elementskit-post-image-card:hover .elementskit-entry-thumb > img {
  transform: scale(1.08) !important;
}

/* ---------- Post individual (single) ----------
   Sem Elementor Pro não existe Construtor de Tema: o post usa o template
   simples do Hello Elementor (template-parts/single.php), só com a
   estrutura HTML do WordPress, sem controle nenhum do Elementor. Cabeçalho
   e rodapé continuam vindo do template do ElementsKit normalmente; aqui é
   só a fonte, a cor e a largura de leitura do miolo, pelos mesmos tokens do
   resto do site. Espaço no topo (200px/150px) é o mesmo dos topos internos,
   pra não ficar embaixo do cabeçalho fixo. A listagem (arquivo) tem seu
   próprio layout, na seção "Blog — página de listagem", abaixo. */
.site-main {
  max-width: 868px;
  margin: 0 auto;
  padding: 200px 24px 110px;
  font-family: Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #4A4652;
}
.site-main .page-header { margin-bottom: 48px; text-align: center; }
.site-main .entry-title {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #5B2A80;
  margin: 0 0 12px;
}
.site-main .page-content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  margin: 16px 0;
  box-shadow: 0 6px 28px rgba(46,17,64,.08);
}
.site-main .page-content p,
.site-main .page-content ul,
.site-main .page-content ol {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.7;
  margin: 0 0 20px;
}
.site-main .page-content ul, .site-main .page-content ol { padding-left: 22px; }
.site-main .page-content li { margin-bottom: 8px; }
.site-main .page-content strong { font-weight: 600; }
.site-main .post-tags { margin-top: 24px; font-size: 15px; color: rgba(74,70,82,.7); }
@media (max-width: 767px) {
  .site-main { padding-top: 150px; }
}

/* ---------- Blog — página de listagem ----------
   template-parts/archive.php (tema filho): banner com foto, destaque (post
   maior + 2 ao lado), grade dos demais, barra lateral (busca, categorias,
   arquivo mensal) e newsletter. Tudo HTML/PHP puro — sem Elementor aqui,
   então cor/tipografia/raio/sombra vêm direto pelos tokens, à mão, em vez
   dos helpers de elementor.js. */

.ps-blog-header {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 170px 24px 56px;
  background-color: #2E1140;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}
.ps-blog-header::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.ps-blog-header-inner { position: relative; z-index: 1; max-width: 760px; }
.ps-blog-eyebrow {
  color: #D3993B;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
/* h1/h2/h3 aqui embaixo (título do banner, dos widgets da lateral e dos
   cartões) vêm com a tag na frente da classe: o kit do Elementor aplica a
   tipografia global de título (clamp 40-80px, peso 800) em QUALQUER h1-h6 da
   página via ".elementor-kit-5 h1" etc. — não só em widgets do Elementor —,
   e essa regra (uma classe + uma tag) tem mais especificidade que uma classe
   sozinha. Repetir a tag aqui empata a especificidade; o CSS do tema, por
   carregar depois do kit, ganha o empate. */
h1.ps-blog-titulo {
  color: #FFFFFF;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.ps-blog-subtitulo { color: rgba(255,255,255,.85); font-size: 18px; font-weight: 300; line-height: 1.6; margin: 0; }
@media (max-width: 767px) {
  .ps-blog-header { min-height: 300px; padding: 140px 20px 40px; }
}

.ps-blog-corpo {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 24px 0;
  display: grid;
  grid-template-columns: 1fr 340px;
  /* Mesmo valor do gap vertical entre os widgets da lateral (.ps-blog-lateral,
     abaixo): 56px deixava a lateral longe demais do conteúdo. */
  gap: 28px;
  align-items: start;
  font-family: Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (max-width: 960px) {
  .ps-blog-corpo { grid-template-columns: 1fr; gap: 28px; }
}

/* Cartão de post: base comum às 3 variantes (principal, secundario, grade). */
.ps-blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(46,17,64,.08);
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ps-blog-card:hover { box-shadow: 0 10px 34px rgba(46,17,64,.14); transform: translateY(-2px); }
.ps-blog-card-thumb { position: relative; display: block; overflow: hidden; background: #F3EDF7; height: 220px; }
.ps-blog-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ps-blog-card:hover .ps-blog-card-thumb img { transform: scale(1.06); }
.ps-blog-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #4A2168;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}
.ps-blog-card-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; gap: 8px; }
h3.ps-blog-card-titulo {
  margin: 0;
  color: #4A2168;
  font-weight: 600;
  line-height: 1.3;
  transition: color .2s ease;
}
.ps-blog-card:hover .ps-blog-card-titulo { color: #5B2A80; }
.ps-blog-card-resumo {
  color: #4A4652;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-blog-card-meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3em;
  color: rgba(74,70,82,.65);
}

/* Destaque: post principal maior à esquerda, 2 secundários empilhados. */
.ps-blog-destaque { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-bottom: 40px; }
.ps-blog-destaque-secundarios { display: flex; flex-direction: column; gap: 24px; }
.ps-blog-card--principal .ps-blog-card-titulo { font-size: clamp(22px, 2.2vw, 28px); }
/* Sem flex-grow no card (a mesma conta de porcentagem+flex que não fechou
   nos cartões do blog da Home, mais cedo nesta sessão — aqui dava altura
   zero no card, no mobile): min-height em % resolve direito porque o pai
   (acima) já tem altura definida, esticado pela grade do destaque pra bater
   com o principal — cada secundário ocupa ao menos metade dele, sem vão
   vazio depois dos dois, e cresce além disso se o conteúdo pedir mais. */
.ps-blog-card--secundario { flex-direction: row; min-height: calc(50% - 12px); }
/* Miniatura compacta ao lado do texto (não em cima): fica de fora dos 220px
   do resto do card (base, acima) — height:auto devolve pro esticamento do
   flex-row (align-items:stretch), que já ajusta ela à altura da linha. */
.ps-blog-card--secundario .ps-blog-card-thumb { width: 42%; flex: none; height: auto; }
.ps-blog-card--secundario .ps-blog-card-corpo { padding: 16px 18px; justify-content: center; }
.ps-blog-card--secundario .ps-blog-card-titulo { font-size: 16px; }
.ps-blog-card--secundario .ps-blog-badge { top: 10px; left: 10px; padding: 4px 10px; font-size: 10px; }
@media (max-width: 700px) {
  .ps-blog-destaque { grid-template-columns: 1fr; }
}

/* Grade dos demais posts. */
.ps-blog-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ps-blog-card--grade .ps-blog-card-titulo { font-size: 18px; }
@media (max-width: 960px) { .ps-blog-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ps-blog-grade { grid-template-columns: 1fr; } }

.ps-blog-vazio { color: rgba(74,70,82,.7); font-size: 18px; padding: 40px 0; text-align: center; }

.ps-blog-paginacao { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 48px 0 40px; }
.ps-blog-paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4A2168;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(46,17,64,.08);
}
.ps-blog-paginacao a.page-numbers:hover { background: #F3EDF7; }
.ps-blog-paginacao .page-numbers.current { background: #5B2A80; color: #FFFFFF; }
.ps-blog-paginacao .page-numbers.dots { box-shadow: none; background: transparent; }

/* Barra lateral: busca, categorias, arquivo mensal. */
.ps-blog-lateral { display: flex; flex-direction: column; gap: 28px; }
.ps-blog-widget {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 6px 28px rgba(46,17,64,.08);
  padding: 26px 26px 28px;
}
h2.ps-blog-widget-titulo {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 600;
  color: #4A2168;
}
.ps-blog-form-busca {
  display: flex;
  border: 1px solid rgba(46,17,64,.15);
  border-radius: 999px;
  overflow: hidden;
}
.ps-blog-form-busca input[type="search"] {
  flex: 1 1 auto;
  border: none;
  padding: 12px 18px;
  font-size: 15px;
  font-family: inherit;
  color: #4A4652;
  min-width: 0;
}
.ps-blog-form-busca input[type="search"]:focus { outline: none; }
.ps-blog-form-busca button {
  border: none;
  background: #5B2A80;
  color: #FFFFFF;
  padding: 0 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .2s ease;
}
.ps-blog-form-busca button:hover { background: #3D1A57; }
.ps-blog-categorias ul, .ps-blog-arquivo ul { list-style: none; margin: 0; padding: 0; }
.ps-blog-categorias li, .ps-blog-arquivo li { border-bottom: 1px solid rgba(46,17,64,.08); }
.ps-blog-categorias li:last-child, .ps-blog-arquivo li:last-child { border-bottom: none; }
.ps-blog-categorias a, .ps-blog-arquivo a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  color: #4A4652;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
}
.ps-blog-categorias a:hover, .ps-blog-arquivo a:hover { color: #5B2A80; }
.ps-blog-contagem {
  background: #F3EDF7;
  color: #4A2168;
  font-size: 12px;
  font-weight: 600;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex: none;
}

/* Newsletter: faixa em degradê roxo, texto + formulário do Forminator lado
   a lado. Fica de fora de sumir sozinha se o formulário ainda não existir
   (ferramentas/newsletter.js cria; sem ele a seção não é impressa). */
.ps-blog-newsletter { padding: 64px 24px 96px; }
.ps-blog-newsletter-inner {
  max-width: 1240px;
  margin: 0 auto;
  background: linear-gradient(135deg, #4A2168, #2E1140);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  font-family: Figtree, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ps-blog-newsletter-texto { flex: 1 1 380px; }
.ps-blog-newsletter-texto h2 {
  color: #FFFFFF;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  margin: 0 0 10px;
}
.ps-blog-newsletter-texto p { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.6; margin: 0; }
.ps-blog-eyebrow--roxo { color: #C89C47; }
.ps-blog-newsletter-form { flex: 1 1 360px; }
.ps-blog-newsletter-form .forminator-row { margin: 0; }
.ps-blog-newsletter-form form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.ps-blog-newsletter-form .forminator-field { flex: 1 1 220px; margin: 0; }
.ps-blog-newsletter-form input[type="email"] {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: none;
  padding: 0 22px;
  font-size: 16px;
  font-family: inherit;
}
.ps-blog-newsletter-form .forminator-button-submit {
  background: #C89C47 !important;
  color: #2E1140 !important;
  border-radius: 999px !important;
  height: 52px;
  padding: 0 32px !important;
  font-weight: 600 !important;
  border: none !important;
  white-space: nowrap;
}
.ps-blog-newsletter-form .forminator-button-submit:hover { background: #B4862F !important; }
.ps-blog-newsletter-form .forminator-response-message { color: #FFFFFF; margin-top: 12px; }
@media (max-width: 860px) {
  .ps-blog-newsletter-inner { flex-direction: column; align-items: stretch; text-align: center; padding: 40px 28px; }
  .ps-blog-newsletter-form form { justify-content: center; }
}

/* ---------- Responsivo do cabeçalho ----------
   O botão do cabeçalho sai antes do menu virar hamburger: com os itens em
   22px e caixa alta, a partir de 1279px ele e o menu não cabem na mesma
   linha. O Elementor só esconde por breakpoint (1024px), por isso é CSS. */
@media (max-width: 1279px) {
  .ps-cabecalho-cta { display: none; }
}
@media (max-width: 1024px) {
  .ps-menu .elementor-widget-container { display: flex; justify-content: flex-end; }
  /* As barras do hamburger vêm pretas com meia opacidade e somem sobre a
     foto escura do Hero. Brancas no transparente, escuras no sólido. */
  .ps-cabecalho .elementskit-menu-hamburger { border-color: rgba(255,255,255,.55); }
  .ps-cabecalho.ps-cabecalho-solido .elementskit-menu-hamburger { border-color: rgba(46,17,64,.28); }
  .ps-cabecalho.ps-cabecalho-solido .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
    background-color: #3D1A57 !important;
  }
}
@media (max-width: 767px) {
  .ps-logo-caixa { width: 190px; }
  .ps-cabecalho.ps-cabecalho-solido .ps-logo-caixa { width: 130px; }
}

/* ---------- Menos movimento ----------
   A animação de entrada do Hero é a nativa do Elementor, que não consulta a
   preferência do sistema. Aqui ela é desligada para quem pediu. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { visibility: visible !important; }
  .animated { animation: none !important; }
  .ps-cabecalho, .ps-logo-caixa, .ps-logo-branco img, .ps-logo-cor img { transition: none !important; }
}

/* ---------- Modo captura (#print no endereço) ----------
   Entradas nativas do Elementor (Hero, colunas do rodapé) deixam o elemento
   invisível até ele entrar na tela; aqui aparecem direto, no estado final.
   O deslocamento das entradas com a rolagem é zerado pelo revela.js. */
html.ps-print .elementor-invisible { visibility: visible !important; }
html.ps-print .animated { animation: none !important; }
html.ps-print .ps-revela,
html.ps-print .ps-revela-esq,
html.ps-print .ps-revela-dir,
html.ps-print .ps-galeria .gallery-item { transform: none !important; }
/* Banner de consentimento (Complianz) e o botão flutuante de reabrir. */
html.ps-print .cmplz-cookiebanner,
html.ps-print #cmplz-cookiebanner-container,
html.ps-print #cmplz-manage-consent,
html.ps-print .cmplz-manage-consent-container { display: none !important; }