*
Theme Name: Gotas de Orvalho Child
Description: Tema filho otimizado para Divi com design moderno e responsivo.
Author: Seu Nome
Template: Divi
Version: 3.7
*/

@import url('../Divi/style.css');

/* =====================================
   VARIÁVEIS CSS
   ===================================== */

:root {
  /* Cores principais */
  --roxo-primario: #8E44AD;
  --roxo-claro: #BB8FCE;
  --roxo-escuro: #5B2C91;
  --claro: #F8F9FA;
  --escuro: #2C3E50;
  --branco: #FFFFFF;
  --cinza-claro: #DEE2E6;
  --cinza: #6C757D;
  
  /* Espaçamentos */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 5rem;
  
  /* Tipografia */
  --font-primary: 'Lato', 'Lato Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* era Open Sans, que nao existe mais no site. Corrigido em 21/08/2026. */
  --font-heading: 'Lato', 'Lato Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* era Roboto Slab, que nao existe mais no site. Corrigido em 21/08/2026. */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  
  /* Sombras */
  --shadow-sm: 0 2px 0.25rem rgba(0,0,0,0.1);
  --shadow-md: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
  --shadow-lg: 0 0.5rem 1.5rem rgba(0,0,0,0.2);
  
  /* Transições suaves */
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s ease;
}

/* =====================================
   RESET E ESTILOS BASE (Mobile First)
   ===================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--escuro);
  background-color: var(--claro);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--roxo-primario);
  margin-bottom: var(--spacing-sm);
}

p {
  margin-bottom: var(--spacing-sm);
}

.container {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.section {
  padding: var(--spacing-lg) var(--spacing-sm);
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* =====================================
   BOTÕES COM HOVER E FOCUS (Acessibilidade)
   ===================================== */

.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--roxo-primario);
  color: var(--branco);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: var(--transition-normal);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  background: var(--roxo-claro);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:focus-visible {
  outline: 0.1875rem solid var(--roxo-claro);
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(0);
}

/* =====================================
   SEÇÃO HERO
   ===================================== */

.hero {
  background: linear-gradient(135deg, var(--roxo-primario) 0%, var(--roxo-escuro) 100%);
  color: var(--branco);
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-sm);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1.5" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"></rect></svg>');
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(var(--font-size-3xl), 8vw, var(--font-size-4xl));
  margin: 0 0 var(--spacing-lg) 0;
  position: relative;
  z-index: 1;
}

.hero p {
  font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-xl));
  margin: 0 0 var(--spacing-xl) 0;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

/* =====================================
   PROVA SOCIAL
   ===================================== */

.proof-social {
  background-color: var(--branco);
}

.proof-social .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.quote {
  background: var(--claro);
  padding: var(--spacing-lg);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: var(--transition-normal);
  border-left: 0.3125rem solid var(--roxo-primario);
}

.quote:hover {
  transform: translateY(-0.5rem);
  box-shadow: var(--shadow-lg);
}

.quote-author {
  font-weight: 600;
  color: var(--roxo-primario);
  margin-top: var(--spacing-sm);
}

/* =====================================
   PILARES
   ===================================== */

.pillars {
  background: linear-gradient(to bottom, var(--claro), var(--cinza-claro));
}

.pillars .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  text-align: center;
}

.pillar {
  padding: var(--spacing-lg);
  background: var(--branco);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.pillar:hover {
  transform: scale(1.02) translateY(-0.3125rem);
  box-shadow: var(--shadow-lg);
}

.pillar-icon {
  font-size: var(--font-size-3xl);
  color: var(--roxo-primario);
  margin-bottom: var(--spacing-md);
}

/* =====================================
   CTAS
   ===================================== */

.ctas {
  background: linear-gradient(135deg, var(--branco), var(--claro));
  text-align: center;
}

.ctas .btn {
  margin: 0 var(--spacing-sm);
  min-width: 12.5rem;
}

/* =====================================
   TESTEMONIAL
   ===================================== */

.testimonial {
  background-color: var(--branco);
}

.testimonial .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.testimonial-item {
  text-align: center;
  padding: var(--spacing-lg);
}

.testimonial-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin: 0 auto var(--spacing-md);
  box-shadow: var(--shadow-md);
}

/* =====================================
   EVENTOS
   ===================================== */

.eventos {
  background-color: var(--claro);
}

.eventos .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.event-card {
  background: var(--branco);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
}

.event-card:hover {
  transform: translateY(-0.625rem);
  box-shadow: var(--shadow-lg);
}

.event-date {
  background: var(--roxo-primario);
  color: var(--branco);
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: 600;
}

/* =====================================
   FOOTER
   ===================================== */

.footer {
  background: var(--escuro);
  color: var(--cinza-claro);
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-sm);
}

.footer a {
  color: var(--roxo-claro);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer a:hover,
.footer a:focus {
  color: var(--branco);
}

/* =====================================
   ANIMAÇÕES SUAVES
   ===================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.625rem); }
}

/* =====================================
   MEDIA QUERIES - DESKTOP E TABLET
   ===================================== */

@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .section {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  
  .proof-social .grid,
  .testimonial .grid,
  .eventos .grid {
    grid-template-columns: repeat(auto-fit, minmax(21.875rem, 1fr));
  }
  
  .pillars .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .ctas .btn {
    min-width: 15.625rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-lg);
  }
  
  .section {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
  
  .hero {
    padding: var(--spacing-2xl) var(--spacing-xl);
  }
}

/* Correções de acessibilidade e contraste */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   LATO HOSPEDADA NO PROPRIO SITE
   Acrescentado em 21/08/2026.

   Por que: o Divi embutia 608 KB de CSS de Google Fonts em toda pagina,
   com 1.176 declaracoes para 4 familias, das quais o site usava so a Lato.
   Servindo a fonte do proprio dominio, esse bloco deixa de existir, a
   tipografia continua igual, e o site para de depender do servidor do Google
   para renderizar texto.

   Os arquivos ficam em: wp-content/themes/gotas-child/fonts/
   Alfabeto latino apenas, que cobre o portugues por inteiro.
   O font-display:swap faz o texto aparecer na hora, com a fonte do sistema,
   e trocar pela Lato assim que ela chega. Evita tela sem texto.
   ============================================================ */

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/lato-300-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/lato-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/lato-400-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/lato-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/lato-700-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('fonts/lato-900-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Garante a Lato onde o Divi ainda pede outra fonte:
   o corpo do site (que estava em Open Sans) e o botao flutuante do WhatsApp
   (que vem do plugin Click to Chat e pede Roboto). */
body,
body .et_pb_module,
.ht-ctc .ht-ctc-chat span {
	font-family: 'Lato', 'Lato Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}


/* ============================================================
   FONTE DE RESERVA COM AS METRICAS DA LATO
   Acrescentado em 21/08/2026.

   POR QUE: a Lato usa font-display:swap, entao o texto aparece na hora com a
   fonte do sistema e troca para a Lato quando ela chega. Em rede lenta essa
   troca EMPURRA o layout, porque Arial e Lato ocupam larguras diferentes.
   Esse empurrao e o deslocamento de layout que o PageSpeed reprova, e conta
   duas vezes: derruba o desempenho e trava a navegacao agentica em 2/3.

   COMO FUNCIONA: declara uma reserva que e a Arial ajustada para ocupar
   exatamente o mesmo espaco da Lato. Quando a Lato entra, nada se move.

   NUMEROS medidos nos arquivos reais: Lato tem 2000 unidades por em,
   ascendente 1974, descendente -426, entrelinha 0. Largura media das
   minusculas: 0,49523 do em na Lato e 0,48954 na Arial.
   ============================================================ */

@font-face {
	font-family: 'Lato Reserva';
	src: local('Arial'), local('Helvetica'), local('Liberation Sans');
	size-adjust: 101.16%;
	ascent-override: 97.57%;
	descent-override: 21.06%;
	line-gap-override: 0%;
}


/* ============================================================
   TAMANHO DOS TITULOS DO RODAPE
   Acrescentado em 21/08/2026.

   POR QUE: os titulos 'GOTAS DE ORVALHO' e 'SIGA-NOS' estavam em H5 logo
   depois de um H2, o que pula dois niveis de hierarquia e o PageSpeed reprova.
   Foram trocados para H3 no layout 'rodape 2' da Biblioteca do Divi.
   Acontece que o Divi dimensiona titulo pelo nome da etiqueta, entao o tamanho
   saltou de 0.875rem para 1.375rem no computador. Esta regra devolve o tamanho
   original, que e o mesmo declarado dentro do proprio modulo.
   ============================================================ */

#et-main-area .et_pb_heading_0 .et_pb_heading_container h3.et_pb_module_header,
#et-main-area .et_pb_heading_1 .et_pb_heading_container h3.et_pb_module_header {
	font-size: 0.875rem !important;
	line-height: 1.225rem !important;
}


/* ============================================================
   FONTE DE RESERVA NOS TITULOS E PARAGRAFOS
   Acrescentado em 21/08/2026.

   POR QUE: a regra anterior cobria o corpo e os modulos, mas o Divi define a
   fonte direto nos titulos, com pilha propria. O H1 do banner tem 5rem e e ele
   que define a altura da secao. Quando a Lato entrava, esse texto refluia e
   empurrava tudo. Isso respondia por 0,182 dos 0,183 de deslocamento medido.

   DE QUEBRA: quatro textos visiveis declaravam fontes que nao existem mais no
   site (Roboto no chamado final, Open Sans no paragrafo do banner, Montserrat
   nos dois titulos do rodape). Caiam numa fonte do sistema. Esta regra tambem
   os normaliza para Lato, terminando a padronizacao.
   ============================================================ */

#et-main-area h1, #et-main-area h2, #et-main-area h3,
#et-main-area h4, #et-main-area h5, #et-main-area h6,
#et-main-area p, #et-main-area li,
#main-header h1, #main-header h2, #main-header p {
	font-family: 'Lato', 'Lato Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}


/* ============================================================
   ICONES SEM SERVIDOR EXTERNO
   Acrescentado em 21/08/2026.

   O site usa seis icones: WhatsApp, Instagram, LinkedIn, Facebook,
   envelope e casa. Vinham do Font Awesome, que carregava de DOIS
   servidores externos. Cada dominio novo custa busca de DNS e
   negociacao de seguranca antes de qualquer byte util.

   Quatro passam a usar a fonte que o Divi JA carrega (ETmodules),
   sem custo nenhum. Os dois que o Divi nao tem vem de um arquivo de
   812 bytes, recortado da fonte oficial do Font Awesome Free
   (SIL OFL 1.1, que permite hospedar no proprio servidor).

   Os codigos foram conferidos desenho por desenho no proprio site.
   ============================================================ */

.fa-brands, .fa-solid, .fa-regular {
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	line-height: 1;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
}

/* Os quatro de marca e o envelope.
   ATENCAO: nao usar a fonte do Divi aqui. O Divi carrega a fonte de
   icones em subconjuntos e, com "Icones Dinamicos" ligado, a maioria
   das paginas recebe so o subconjunto "base", que NAO tem o glifo do
   LinkedIn. Resultado: o icone sumia em parte do site, sem erro nenhum.
   Recorte proprio de 848 bytes, embutido no CSS para nao depender de
   arquivo enviado nem do comportamento do Divi. */
@font-face {
	font-family: 'Gotas Marcas';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(data:font/woff2;base64,d09GMgABAAAAAANQAAsAAAAABfwAAAMDAAJmZgAAAAAAAAAAAAAAAAAAAAAAAAAABmAATBEICoZUhRcBNgIkAwwLDAAEIAWBBAcgG3QEAAYe+pzm+5JCUghsLxM4W0b9mZ7kEIO3iIYyHMsnz/+5dNH2cRhFPMRRAX2cFch4rXsj2Zvd0Z01RXPbCafJAcDpNnUEHZpo2ehrCVT1b5FBECiFyrtAenQTf7BChBFG0Qzd+u0T35aq7oCbrSp4QJCgUwEoqBrFoyIANNZ+QycUBeXbJ77N/rbo29JAAM49p7imPDjlzhTnm1AgmG4UxgUBoAMGCHt1tyECDRwqCP0HqmEk7Ns3MTxcs4U/G22NwLUbQo49pZijRoxrXKhXrxlBxhldyHbDELrlgZMY2rOu11b19ibUNibkNtpzSyeVVmJWTCwpiS9oiM9pmJnTs7LnVd16fXVfX2JdU2JekyOvbHJZlZDVU8rLk4qbk/Kb5+T3r+l/wxCWh777zJqBuQ0ttoKKiSUeTO+k0kp7Yeu8xsFZta+t6vUaLr88/Jz64QXN7ROKq6eU+4X0TS6rchS1zW8aml33+uo+n461dsCzsAVzUat33aDh2jDsX9Iu5OI23/qhs5ZPSL/h8mJ6nOaIbo0JOW64Rq8Ymv6k9e5coWuGSoJ3UQ6x5V2+1X0PmB/Z6E+E/Fi3PtyobjUdpxz3Bt7N1r3wNlXGt7TMNtLyA0ZucdMW23H37PQVy57pbH/x6LP3OU06JExVbzq/lduGPImVX77nuHaoOd4W6XRG2uKbD11zvPdlZaJnaJv81sk76mLyNqRsfrpweOfO4cL8IZuNbcnJbLPZhvJN93SzlNsogjvw/9V//blnz5Yjq1cf2bJn/vwrode6qnPPjRt7qh8ybF/hGJzdcSLk+Jh7bMf4qrqja8fd48PEnjm61D1n+K3e8z/+eHJ1f/+l8rlPzhUA3E8Ayu3bsU+u/vNK1Ma/Q8M0AH54YUM+wM9tL6VDwK2huoFQFAAEfKI+0ADQJkpdaB0EKYjXCWpQSPOCOYyK0MIQxIIrCpHEVtW7qqZKEIlMdYN10V2c5H4e5CaPcx+3eJTj3MK5hGs8wmn7EX/6OzzIA0xlOYtZiUoCAAA=) format('woff2');
}
.fa-instagram, .fa-facebook, .fa-linkedin-in, .fa-envelope {
	font-family: 'Gotas Marcas' !important;
}
.fa-instagram::before   { content: "\e09a"; }
.fa-facebook::before    { content: "\e093"; }
.fa-linkedin-in::before { content: "\e09d"; }
.fa-envelope::before    { content: "\e076"; }

/* Os dois que faltam no Divi */
@font-face {
	font-family: 'Gotas Icones';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('fonts/gotas-icones-extra.woff2') format('woff2');
}
.fa-whatsapp, .fa-house {
	font-family: 'Gotas Icones' !important;
}
.fa-whatsapp::before { content: "\f232"; }
.fa-house::before    { content: "\f015"; }

/* ============================================================
   TEXTO DE APOIO DO BANNER
   Acrescentado em 21/08/2026.

   Dois ajustes pedidos pela Priscila:

   1. ALINHAMENTO. No computador o paragrafo comecava 2.8125rem a direita do
      titulo e do botao, por uma margem que vinha de fora do modulo.
      No celular ja estava alinhado, entao a regra so tira a margem.

   2. PESO. O texto vinha em 300, fino demais para ler sobre imagem.
      Passa para 600, que da corpo sem virar titulo.
   ============================================================ */

.home #et-main-area .et_pb_section_1 .et_pb_text_1 p {
	margin-left: 0 !important;
	font-weight: 600 !important;
}


/* ============================================================
   CONTRASTE DOS LINKS DE TEXTO
   Acrescentado em 21/08/2026, com aval da Priscila.

   ATENCAO, NAO 'CORRIGIR' DE VOLTA SEM LER ISTO.

   A cor oficial da marca e #a281c1. Sobre fundo branco ela da 3,26 de
   contraste, e o minimo para leitura confortavel e 4,5. Reprova.

   #865bae e a MESMA cor, com a mesma matiz e a mesma saturacao, so com a
   luminosidade mais baixa. Contraste 5,10, passa com folga. A diferenca a
   olho e minima; para quem tem baixa visao, nao e.

   A decisao foi consciente: a cor de link fica levemente diferente da cor
   oficial, em nome da leitura.

   NAO mexer na variavel --gcid-link-color do Divi: ela comanda tambem a cor
   PRIMARIA do site (botoes, destaques). Por isso a regra e so para links.

   A segunda regra devolve a cor herdada nos blocos de fundo escuro, onde o
   link precisa continuar claro. Conferido: 8 links nessa situacao, todos ok.
   ============================================================ */

#et-main-area a {
	color: #865bae;
}

#et-main-area .et_pb_bg_layout_dark a {
	color: inherit;
}


/* ============================================================
   TEXTO DOS BOTOES SEMPRE BRANCO
   Acrescentado em 21/08/2026.

   ERRO QUE ISTO CORRIGE: a regra de contraste dos links (bloco acima)
   escureceu tambem os botoes, porque no Divi botao e um elemento de link.
   O resultado foi texto roxo escuro sobre fundo roxo no botao principal da
   home, praticamente ilegivel.

   Regra da casa, dita pela Priscila: dentro de botao, texto branco, em todo
   o site.
   ============================================================ */

#et-main-area .et_pb_button,
#et-main-area a.et_pb_button,
#et-main-area .et_pb_promo_button,
#et-main-area .et_pb_more_button,
#et-main-area .et_pb_contact_submit,
#et-main-area button,
#et-main-area input[type="submit"] {
	color: #ffffff !important;
}


/* (17/09/2026) Bloco "MAPA EM LARGURA TOTAL" removido: o mapa agora e modulo Imagem do Divi, na largura do conteudo. */


/* ============================================================
   CARTOES LADO A LADO COM A MESMA ALTURA  (21/08/2026)
   Sem isto, a caixa branca de cada cartao para onde o texto
   termina, entao o cartao de texto mais curto fica menor que
   os vizinhos e a chamada final fica em altura diferente.
   Escopo em #page-container, e nao #et-main-area, porque a
   pagina Doe Agora usa gabarito em branco e nao tem essa
   camada.  Vale para o cartao com icone no topo. Cartao com
   icone ao lado nao e afetado.
   ============================================================ */

/* 1. Cartao sozinho na coluna */
#page-container .et_pb_column > .et_pb_blurb.et_pb_blurb_position_top:only-child {
	height: 100%;
}
#page-container .et_pb_column > .et_pb_blurb.et_pb_blurb_position_top:only-child > .et_pb_blurb_content {
	height: 100%;
}
#page-container .et_pb_column > .et_pb_blurb.et_pb_blurb_position_top:only-child .et_pb_blurb_container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
#page-container .et_pb_column > .et_pb_blurb.et_pb_blurb_position_top:only-child .et_pb_blurb_description {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 2. Quando o ultimo paragrafo do cartao e a chamada centralizada,
      ela desce para a base, alinhada com a dos cartoes vizinhos. */
#page-container .et_pb_blurb.et_pb_blurb_position_top .et_pb_blurb_description > p[style*="text-align: center"]:last-child {
	margin-top: auto;
	margin-bottom: 0;
}

/* 3. Coluna com cartao mais botao (planos de assinatura).
      A linha passa a esticar as colunas, o cartao cresce ate a
      altura comum e o botao fica ancorado embaixo, com o mesmo
      respiro de 1.875rem nas tres colunas. */
@media (min-width: 981px) {
	#page-container .et_pb_row:has(> .et_pb_column > .et_pb_blurb.et_pb_blurb_position_top + .et_pb_button_module_wrapper) {
		align-items: stretch;
	}
}
#page-container .et_pb_column:has(> .et_pb_blurb.et_pb_blurb_position_top + .et_pb_button_module_wrapper) {
	display: flex;
	flex-direction: column;
	row-gap: 1.875rem;
}
#page-container .et_pb_column:has(> .et_pb_blurb.et_pb_blurb_position_top + .et_pb_button_module_wrapper) > .et_pb_blurb.et_pb_blurb_position_top {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}
#page-container .et_pb_column > .et_pb_blurb.et_pb_blurb_position_top + .et_pb_button_module_wrapper {
	margin-top: auto;
}





/* ============================================================
   TABELA DE PLANOS DA DOE AGORA  (21/08/2026)
   O cartao e a propria coluna, com o botao dentro dele.
   As classes cartao-plano e cartao-destaque estao no campo de
   classe do proprio Divi, nas colunas.
   Ordem dentro do cartao: nome do plano, preco, "por mes",
   beneficios, botao. Como o preco e o titulo do modulo e o
   resto vem da descricao, a descricao vira display:contents
   para que tudo caia no mesmo flex e possa ser reordenado.
   ============================================================ */

#page-container .cartao-plano .et_pb_blurb_container {
	display: flex;
	flex-direction: column;
}
#page-container .cartao-plano .et_pb_blurb_description {
	display: contents;
}

/* 2. preco */
#page-container .cartao-plano .et_pb_blurb h3.et_pb_module_header {
	order: 2;
	font-size: 2.75rem !important;
	line-height: 1.05 !important;
	margin: 0 0 2px !important;
}

/* 3. "por mes" */
#page-container .cartao-plano .et_pb_blurb_description > p:nth-child(1) {
	order: 3;
	font-size: 0.75rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #55556b;
	margin-bottom: 1.375rem;
}

/* 1. nome do plano, acima do preco */
#page-container .cartao-plano .et_pb_blurb_description > p:nth-child(2) {
	order: 1;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #55556b;
	margin-bottom: 0.75rem;
}

/* 4. beneficios, um por linha */
#page-container .cartao-plano .et_pb_blurb_description > p:nth-child(n+3) {
	order: 4;
	border-top: 1px solid rgba(22, 23, 70, 0.10);
	padding-top: 0.875rem;
	font-size: 0.9375rem;
}

/* Selo do plano em destaque */
#page-container .cartao-destaque .et_pb_blurb_description > p:nth-child(2) {
	align-self: center;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 0.3125rem 1rem;
	color: #ffffff;
}
#page-container .cartao-destaque .et_pb_blurb_description > p:nth-child(1) {
	color: #ffffff;
}
#page-container .cartao-destaque .et_pb_blurb_description > p:nth-child(n+3) {
	border-top-color: rgba(255, 255, 255, 0.30);
}

/* Tabela de plano nao usa icone: o preco e que manda */
#page-container .cartao-plano .et_pb_main_blurb_image {
	display: none;
}

/* Elevacao e resposta ao mouse */
#page-container .cartao-plano {
	box-shadow: 0 0.625rem 1.875rem rgba(22, 23, 70, 0.14) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#page-container .cartao-plano:hover {
	transform: translateY(-0.375rem);
	box-shadow: 0 1.25rem 2.75rem rgba(22, 23, 70, 0.24) !important;
}
@media (min-width: 981px) {
	#page-container .cartao-destaque {
		transform: scale(1.06);
		z-index: 2;
		box-shadow: 0 1.375rem 3.25rem rgba(22, 23, 70, 0.34) !important;
	}
	#page-container .cartao-destaque:hover {
		transform: scale(1.06) translateY(-0.375rem);
	}
}

/* Botao ocupando a largura do cartao */
#page-container .cartao-plano .et_pb_button_module_wrapper {
	width: 100%;
}
#page-container .cartao-plano .et_pb_button {
	display: block;
	width: 100%;
	text-align: center;
	border-radius: 999px;
	transition: filter 0.2s ease;
}
#page-container .cartao-plano .et_pb_button:hover {
	filter: brightness(1.08);
}
#page-container .cartao-destaque .et_pb_button,
#page-container .cartao-destaque .et_pb_button:hover {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #8562a0 !important;
}

@media (max-width: 980px) {
	#page-container .cartao-plano .et_pb_blurb h3.et_pb_module_header {
		font-size: 2.375rem !important;
	}
}

/* ============================================================
   DOE AGORA no celular: as linhas internas nao empilhavam
   (21/08/2026)
   As tres faixas de cartoes usam linha aninhada com
   flex-wrap: nowrap fixo no desktop e sem valor para celular.
   Resultado: as colunas ficavam lado a lado, cortadas, e a
   pagina inteira ganhava rolagem horizontal. Problema antigo
   da pagina, nao das mudancas de hoje.
   ============================================================ */
@media (max-width: 980px) {
	.page-id-66 #page-container .et_pb_row_nested {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}
	.page-id-66 #page-container .et_pb_row_nested > .et_pb_column {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ============================================================
   CONTRASTE DA FAIXA DE CREDITOS DO RODAPE  (21/08/2026)
   O roxo #865bae que vale para link no corpo do site fica
   ilegivel sobre a faixa preta do rodape. O Lighthouse
   apontava esse unico item de contraste no site inteiro.
   Seletor pelo proprio endereco do link: nao depende de
   indice de modulo e vale em todas as paginas.
   ============================================================ */
#page-container a[href*="modernizza.com"] {
	color: #c9b3e0;
}


/* ============================================================
   CONTRASTE: FORMULARIO, CHAMADA DO BLOG E CATEGORIAS
   (21/08/2026)
   Tres itens que o Lighthouse apontou depois que o resto do
   site ja estava em 100.
   ============================================================ */

/* 1. Campos do formulario de contato vinham em #999 sobre branco,
      contraste 2,8. Vale para o texto digitado e para o rotulo
      que o Divi mostra dentro do campo. */
#page-container .et_pb_contact_form .input,
#page-container .et_pb_contact_form textarea.input {
	color: #555555;
}
#page-container .et_pb_contact_form .input::placeholder,
#page-container .et_pb_contact_form textarea.input::placeholder {
	color: #6b6b6b;
	opacity: 1;
}

/* 2. Chamada "Seja um voluntario" no blog: branco sobre o roxo
      claro dava 3,1. O roxo da marca resolve sem mudar o desenho. */
.page-id-70 #page-container .et_pb_cta_1 {
	background-color: #8562a0 !important;
}

/* 3. Categorias do post so se distinguiam do texto ao redor pela
      cor. Sublinhado resolve para quem nao enxerga a diferenca. */
#page-container .entry-categories a {
	text-decoration: underline;
	text-underline-offset: 2px;
}