/* Regras locais do site (não editar app.css, que é espelho do tema WP). */

/* Mobile: contadores e títulos dos cards de Resultados menores. */
@media (max-width: 767px) {
  .text-6xl {
    font-size: 2.5rem;
  }
  .counter-label {
    font-size: 1rem;
  }
  #resultados h3 {
    font-size: 1.5rem;
  }
  #rodape .font-bold {
    font-size: 1rem;
    font-weight: 700;
  }
  #rodape figure img {
    display: block;
    max-width: 4rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Títulos dos cards de Resultados com entrelinha menor (vence o
   line-height 2.25rem do text-3xl do tema). */
#resultados h3 {
  line-height: 1.25;
}

/* Títulos de seção fora do .content (ex.: 'Comunicação com método')
   alinhados ao mesmo respiro lateral do conteúdo: usavam px-[1em]
   (40px no desktop) e ficavam à esquerda dos demais (80px). */
section > h2.evag-title {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  section > h2.evag-title {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Textos do cabeçalho em #F1F5F9 em todas as páginas (vence o amarelo do
   item Serviços & Planos; os botões mantêm as cores próprias). */
.fixed-header .menu-item a:not(.call-to-action):not(.btn-contato) {
  color: #F1F5F9;
}

/* Hover do cabeçalho em #CEE43C em todas as páginas: vence o roxo do tema
   (classe hover:text-roxo-claro e a regra com ID do <style> da inicial).
   O botão CTA mantém o hover próprio. Vale também para o ícone do
   hambúrguer nas páginas sem a regra inline. */
.fixed-header a:hover:not(.call-to-action):not(.btn-contato) {
  color: #CEE43C !important;
}
[data-collapse-toggle]:hover svg path {
  fill: #CEE43C;
}

/* Botão 'entre em contato' no cabeçalho: texto verde sem sublinhado;
   no hover ganha o sublinhado. */
.fixed-header a.btn-contato {
  background-color: transparent;
  color: #CEE43C;
  border: none;
  border-radius: 0;
  padding: 4px 2px;
  /* Herda o mesmo tamanho dos demais itens do menu (1.25rem no desktop e
     1.5rem a partir de 1536px), sem ficar menor em telas grandes. */
  font-size: inherit;
  text-decoration: none;
}
.fixed-header a.btn-contato:hover {
  background-color: transparent;
  color: #CEE43C;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* O cabeçalho fixo encolhe para 48px quando a página rola. As âncoras usam
   essa altura para a seção começar logo abaixo dele, sem faixa branca. */
.scroll-mt-header {
  scroll-margin-top: 3rem;
}

/* Botões com ícone: 4px a mais entre texto e ícone em todas as páginas.
   A base (hero, serviços, radar, clientes) não tinha gap; a do formulário
   (#projeto) tinha 10px e vai a 14px. */
.wp-block-buttons .wp-element-button {
  gap: 4px;
}
#projeto .wp-block-button__link {
  gap: 14px;
}

/* Botão no padrão do enviar do formulário: estado normal com fundo branco,
   contorno, texto e ícone em roxo; no hover fica o contrário (preenchido
   de roxo com texto e ícone brancos). */
.btn-enviar-outline {
  background-color: var(--wp--preset--color--white, #FFF);
  border: 2px solid var(--wp--preset--color--roxo-claro, #5B23FF);
  color: var(--wp--preset--color--roxo-claro, #5B23FF);
}
.btn-enviar-outline path {
  fill: var(--wp--preset--color--roxo-claro, #5B23FF);
}
.btn-enviar-outline:hover {
  background-color: var(--wp--preset--color--roxo-claro, #5B23FF);
  border-color: transparent;
  color: #FFF;
}
.btn-enviar-outline:hover path {
  fill: #FFF;
}

/* Tópicos dos cards 'Ideal para' (Planos): linhas mais justas, porém com
   mais espaço entre um tópico e outro. */
#planos div[class*="EEF3C7"] ul {
  gap: 0.75rem;
}
#planos div[class*="EEF3C7"] li {
  line-height: 1.15;
}

/* Serviços dos planos: lista com marcadores e destaque do que cada plano
   acrescenta em relação ao anterior. */
#planos .plan-features-block {
  margin-top: 0.25rem;
}
#planos .plan-inherits {
  display: block;
  margin: 1rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  background: #0B1F3A;
  color: #F1F5F9;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}
#planos .plan-inherits strong {
  color: #CEE43C;
  font-weight: 700;
  white-space: nowrap;
}
#planos .plan-features-title {
  margin: 0.9rem 0 0.6rem;
  color: #6B6873;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#planos .plan-features {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#planos .plan-features li {
  border-left: 6px solid #CEE43C;
  padding-left: 0.75rem;
  color: #0B1F3A;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Títulos das seções com mais respiro entre as letras (mesma medida do
   tracking-wider usado nos botões). */
.evag-title {
  letter-spacing: 0.05em;
}

/* Sistema de fontes: só Clash Display (títulos e botões) e Space Grotesk
   (todo o resto). O preset 'menu' não existe e caía em Public Sans; a
   classe .font-default-sans-serif também usava Public Sans. */
body {
  --wp--preset--font-family--menu: 'Space Grotesk', sans-serif;
  --wp--preset--font-family--default-sans-serif: 'Space Grotesk', sans-serif;
  --wp--preset--font-family--sans: 'Space Grotesk', sans-serif;
  --wp--preset--font-family--mono: 'Space Grotesk', sans-serif;
  /* Base: qualquer texto sem classe própria de fonte (tags das seções,
   * spans, botões avulsos) usa Space Grotesk em vez do stack do sistema.
   * Títulos e botões mantêm Clash pelas regras próprias do tema. */
  font-family: 'Space Grotesk', sans-serif;
}
.font-default-sans-serif,
.\!font-default-sans-serif {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Cabeçalho todo em Space Grotesk. O .menu-principal tem fonte própria no
   tema, então a regra mira nele (herança do header não bastaria); o
   seletor com ID vence '#navbar-dropdown a' do <style> da inicial; a
   ordem vence o empate com '.wp-block-button > .wp-block-button__link'
   do tema (botão). */
.fixed-header .menu-principal,
.fixed-header #navbar-dropdown a,
.fixed-header .wp-element-button {
  font-family: 'Space Grotesk', sans-serif;
}

/* Respiro entre os cards de Serviços na inicial (metade do ampliado). */
#servicos ul {
  gap: 1rem;
}
@media (min-width: 768px) {
  #servicos ul {
    gap: 2rem;
  }
}

/* Alinha o logo do cabeçalho com o conteúdo do hero e das seções:
   mesma largura máxima (1300px) e mesmo respiro lateral
   (1rem no mobile, 3rem a partir de 768px). */
.menu-principal > div {
  max-width: 1300px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .menu-principal > div {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Respiro lateral do conteúdo das seções e do rodapé: 80px no desktop
   (vence os 3rem do tema; mesma medida do cabeçalho). */
@media (min-width: 768px) {
  footer > .content,
  section:not(.full-width) > .content {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Altura fixa do logo do cabeçalho (vence h-5/md:h-8/2xl:h-10 do tema). */
.menu-principal .brand img {
  height: 24px;
  width: auto;
}

/* Logo do rodapé menor (vence max-w-36 do tema). */
#rodape img {
  max-width: 6rem;
}

/* Hero ~80px mais baixo, cortando só embaixo do botão (vence h-screen do tema).
   O padding-top compensa a centralização para o topo ficar como antes.
   Escopo restrito à inicial (typewriter): outras páginas também têm
   section:first-of-type e não podem herdar essa altura. */
main > section:first-of-type:has([data-evag="typewriter-list"]) > .content {
  height: calc(100vh - 136px);
  padding-top: 80px;
}

/* Textos do hero da inicial 56px mais para baixo (só na seção com a lista
   typewriter; o padding na seção empurra o bloco todo sem colapso). */
main > section:first-of-type:has([data-evag="typewriter-list"]) {
  padding-top: 112px;
}

/* Botão do hero: bloco com mt-6 (24px) e margin-top -96px; distância do
   texto 16px maior que o ajuste anterior (vence o mt-6 do tema). */
main > section:first-of-type:has([data-evag="typewriter-list"]) .wp-block-buttons {
  margin-top: -80px;
}

/* No mobile a lista animada ocupa menos altura que no desktop; com os
   -80px do desktop o botão cobria as frases. Aqui o -16px deixa ~20px
   de respiro entre o texto e o botão. */
@media (max-width: 767px) {
  main > section:first-of-type:has([data-evag="typewriter-list"]) .wp-block-buttons {
    margin-top: -16px;
    transform: translateY(96px);
  }
}

/* Frase do hero (chamada + lista animada) 56px mais para cima; o botão
   não acompanha (tem margem própria). */
main > section:first-of-type:has([data-evag="typewriter-list"]) .content > div:first-child {
  margin-top: -56px;
}

/* Hero da página Conheça (transparente sem typewriter): título em 3rem e
   chamada em 1.25rem no desktop (1rem no mobile), como o hero da inicial
   — sem isso, o encolhimento de .md:text-3xl da inicial o deixava em 20px. */
main > section[data-background="transparent"]:not(:has([data-evag="typewriter-list"])) p {
  font-size: 1rem;
}
@media (min-width: 768px) {
  main > section[data-background="transparent"]:not(:has([data-evag="typewriter-list"])) h2 {
    font-size: 3rem;
  }
  main > section[data-background="transparent"]:not(:has([data-evag="typewriter-list"])) p {
    font-size: 1.25rem;
  }
}

/* Seção Clientes sem efeitos de entrada no desktop: logos sempre visíveis
   e sem animação de entrada. O botão Ver mais/Ver menos segue funcionando.
   No mobile vale o original (carrossel). */
@media (min-width: 768px) {
  #clientes img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Escala tipográfica do desktop (mobile mantém o original).
   Antes → depois (px): hero 60→48, kicker 30→20, títulos 48→40,
   corpo 24→20, contadores 60→48, botões 24→20, menu 24→20. */
@media (min-width: 768px) {
  .typewriter-list {
    font-size: 3rem;
  }
  .md\:text-3xl {
    font-size: 1.25rem;
  }
  .evag-title {
    font-size: 2.5rem;
  }
  .evag-text {
    font-size: 1.25rem;
  }
  .text-6xl {
    font-size: 3rem;
  }
  .counter-label {
    font-size: 1.125rem;
  }
  #resultados h3 {
    font-size: 1.5rem;
  }
  #tecnologia h3,
  #servicos h3 {
    font-size: 1.25rem;
  }
  #tecnologia li p,
  #servicos li p {
    font-size: 1rem;
  }
  .wp-block-buttons {
    font-size: 1.25rem !important;
  }
  .menu-principal ul {
    font-size: 1.25rem;
  }
  #radar ul h2 {
    font-size: 1.25rem;
  }
  #rodape .font-bold {
    font-size: 1.25rem;
  }
}
@media (min-width: 1536px) {
  .typewriter-list {
    font-size: 3.5rem;
  }
  .evag-title {
    font-size: 3rem;
  }
  .menu-principal ul {
    font-size: 1.5rem;
  }
}

/* Formulário de contato no padrão visual do site: mesmos tipos do
   corpo (Space Grotesk), foco roxo visível e texto de privacidade legível. */
#projeto .wp-block-evag-form .wp-block-evag-inputtext input {
  font-family: var(--font-family--text);
  font-size: 1rem;
  line-height: 1.5;
  padding: .625rem 1.5rem;
  border: 2px solid var(--wp--preset--color--roxo-claro);
  border-radius: 32px;
}
#projeto .wp-block-evag-form input:focus-visible {
  outline: 2px solid var(--wp--preset--color--roxo-claro);
  outline-offset: 1px;
}
/* Checkbox na identidade dos botões: borda 2px roxa, cantos arredondados. */
#projeto .wp-block-evag-checkbox label {
  font-family: var(--font-family--text);
  gap: .6rem;
}
#projeto .wp-block-evag-checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: #fff;
  border: 2px solid var(--wp--preset--color--roxo-claro);
  border-radius: 8px;
}
#projeto .wp-block-evag-checkbox input[type=checkbox]:checked {
  background-color: var(--wp--preset--color--roxo-claro);
  border-color: var(--wp--preset--color--roxo-claro);
}
/* O tema usa uma imagem de check em /wp-content, que não existe no site
   estático. Desenhamos o check com borda para o estado marcado funcionar. */
#projeto .wp-block-evag-checkbox input[type=checkbox]:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  right: auto;
  bottom: auto;
  width: 5px;
  height: 10px;
  margin: 0;
  background: none;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#projeto .wp-block-evag-feedback[style*="display: block"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#projeto .wp-block-evag-feedback[style*="display: block"] p {
  margin: 0;
}
#projeto .wp-block-evag-form .privacy {
  line-height: 1.6 !important;
}
/* Botão enviar: mesmas métricas medidas no botão padrão (48px de altura:
   texto 20px, line-height 2rem, padding 8x24 sem borda). A borda de 2px é
   descontada no padding e o gap replica o espaço do botão padrão. */
#projeto .btn-submit .wp-block-button__link {
  font-size: 1.25rem;
  line-height: 2rem;
  padding: 6px 22px;
  gap: calc(.25em + 4px);
  margin-bottom: 0;
  background-color: transparent;
  border: 2px solid var(--wp--preset--color--roxo-claro);
  color: var(--wp--preset--color--roxo-claro);
}
#projeto .btn-submit .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--roxo-claro);
  border-color: var(--wp--preset--color--roxo-claro);
  color: #fff;
}
@media (min-width: 768px) {
  #projeto div.rounded-3xl {
    padding: 1.5rem;
  }
}

/* Títulos das seções Serviços, Resultados, Tecnologia, Ferramentas,
   Radar, Clientes e Comunicação com método em 2rem em todas as páginas. */
#servicos .evag-title,
#resultados .evag-title,
#tecnologia .evag-title,
#ferramentas .evag-title,
#radar .evag-title,
#clientes .evag-title,
#projeto .evag-title {
  font-size: 2rem;
}

/* Margem inferior dos títulos das seções Serviços e Resultados em 1rem. */
#servicos .evag-title,
#resultados .evag-title {
  margin-bottom: 1rem;
}

/* Cards de Resultados no desktop: imagem e texto dividem a largura em
   partes iguais e o texto pode encolher. O HTML usa 'md:grow-1', classe
   inexistente no tema; sem isso a imagem mantém a largura natural, espreme
   o texto (uma letra por linha) e gera um vão enorme abaixo do conteúdo
   em telas md. */
@media (min-width: 768px) {
  #resultados .rounded-3xl > img,
  #resultados .rounded-3xl > div {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Título do formulário de contato acima das colunas. No desktop ele ocupa
   a primeira linha inteira, em uma linha única, e o texto e o formulário
   ficam na segunda linha. */
#projeto .evag-title {
  margin-bottom: 0;
}
/* O título de contato fica dentro da coluna com px-6; o recuo negativo
   alinha sua margem esquerda à dos demais títulos de seção. */
#projeto .content > div > .evag-title {
  margin-left: -1.5rem;
}
@media (min-width: 768px) {
  #projeto .content > div {
    row-gap: 0.25rem;
  }
  #projeto .evag-title {
    grid-column: 1 / -1;
    grid-row: 1;
    white-space: nowrap;
    margin-bottom: 1rem;
  }
  #projeto .content > div > div:first-of-type {
    grid-column: 1;
    grid-row: 2;
  }
  #projeto .content > div > div:last-of-type {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Realce atrás do trecho destacado no texto do formulário. */
#projeto .realce {
  background-color: var(--wp--preset--color--amarelo, #cee43c);
  padding: 0 0.15em;
  border-radius: 0.15em;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Títulos dos cards do blog com entrelinha levemente maior. */
#radar ul h2,
body.blog ul h2 {
  line-height: 1.2;
}

/* Página Radar: todos os posts em cards de tamanho uniforme, com a mesma
   formatação dos cards da seção Radar da página inicial. */
.radar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.radar-grid > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.radar-grid > li[data-animation] {
  transform: none !important;
}
.radar-grid + .page-numbers {
  margin-top: 1.5rem;
}
ul.blog-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
  list-style: none;
}
ul.blog-list > li {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
ul.blog-list > li[data-animation] {
  transform: none !important;
}
ul.blog-list > li > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
ul.blog-list > li > div > a:first-child {
  flex: none;
}
ul.blog-list > li > div > a:first-child img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
ul.blog-list > li > div > a:last-child {
  flex: 1;
}
ul.blog-list + .page-numbers {
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  ul.blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.radar-grid > li > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.radar-grid > li > div > a:first-child {
  flex: none;
}
.radar-grid > li > div > a:first-child img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.radar-grid > li > div > a:last-child {
  flex: 1;
}
.radar-grid h2 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em;
}
@media (min-width: 768px) {
  .radar-grid h2 {
    font-size: 1.25rem;
  }
}

/* Páginas internas: mesmo respiro entre o título da seção e o conteúdo
   usado na página inicial (margem do título + 4px de gap = 16px/28px). */
body:not(.home) .content:has(> :is(h1, h2).evag-title:first-child) {
  gap: 0.25rem;
}

/* Cabeçalho de listagens e posts com o mesmo respiro da página inicial. */
body:not(.home) .page-header {
  padding-bottom: 0.25rem;
}
body:not(.home) .page-header > :is(h1, h2) {
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
  body:not(.home) .page-header > :is(h1, h2) {
    margin-bottom: 1.5rem;
  }
}

/* Título dos posts abertos com a mesma largura das seções do site
   (.content): 1300px com 5rem de respiro lateral no desktop. O corpo,
   a imagem e os metadados continuam na largura de leitura. */
.single-post .page-header {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .single-post .page-header {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media (min-width: 1024px) {
  .single-post article.h-entry {
    max-width: 1300px;
  }
  .single-post article.h-entry > header > figure,
  .single-post article.h-entry > .flex,
  .single-post .post-meta {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile: conteúdo na mesma margem esquerda do título da seção e respiro
   vertical dos títulos na mesma proporção do desktop (metade). */
@media (max-width: 767px) {
  /* Remove o respiro lateral de 24px (px-6) do bloco logo após o título. */
  .content > .evag-title + [class~='px-6'] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Seção de contato: título, texto e formulário alinhados à esquerda. */
  #projeto .content > div[class~='px-6'] {
    padding-left: 0;
    padding-right: 0;
    gap: 1rem;
  }
  #projeto .content > div > .evag-title {
    margin-left: 0;
  }

  /* Respiro abaixo dos títulos: 28px no desktop, 14px no mobile. */
  .evag-title {
    margin-bottom: 0.625rem;
  }
  /* Serviços e Resultados: 20px no desktop, 10px no mobile. */
  #servicos .evag-title,
  #resultados .evag-title {
    margin-bottom: 0.375rem;
  }
  /* Ferramentas: 44px no desktop, 22px no mobile. */
  #ferramentas .ferramentas-box {
    margin-top: 0.5rem;
  }

  /* Botão do formulário com as mesmas métricas dos demais botões no mobile. */
  #projeto .btn-submit .wp-block-button__link {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 8px 22px;
  }

  /* Resultados: cards e contadores com menos respiro interno no mobile. */
  #resultados .p-8 {
    padding: 1.25rem;
  }
  #resultados .counter-label {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  #resultados .grid.grid-cols-2 {
    padding-left: 0;
    column-gap: 0.5rem;
    row-gap: 1rem;
  }

  /* Seção de contato: 56px no desktop, 28px no mobile. */
  #projeto {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  /* Cabeçalhos de listagens e posts (títulos centralizados). */
  body:not(.home) .page-header {
    padding-top: 0.5rem;
  }
  body:not(.home) .page-header > :is(h1, h2) {
    margin-bottom: 0.625rem;
  }
}