/* ==============================
   HOME.CSS
   Estilos específicos da homepage.
   ============================== */

/* ================================================================
   HERO SLIDER: Slider principal com 4 slides (Swiper.js)
   Cada slide: imagem de fundo + overlay escuro + título + descrição + CTA
   ================================================================ */

.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper {
  width: 100%;
  height: 600px;
}

.destaque-individual-da-empresa_slide-com-foto-e-texto-no-carrossel {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay escuro sobre a imagem de fundo para legibilidade do texto */
.destaque-individual-da-empresa_slide-com-foto-e-texto-no-carrossel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 56, 99, 0.45);
  z-index: 1;
}

/* Conteúdo textual do slide (sobre o overlay) */
.textos-do-destaque_area-de-texto-sobre-a-foto-do-slide {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  width: 42%;
  max-width: 520px;
  padding: var(--spacing-xl);
  color: var(--color-text-white);
}

/* Slide "Entrega em todo o Brasil" — texto à esquerda */
.destaque-individual-da-empresa_slide-com-foto-e-texto-no-carrossel[data-slide-topic="entrega-todo-brasil"] .textos-do-destaque_area-de-texto-sobre-a-foto-do-slide,
.destaque-individual-da-empresa_slide-com-foto-e-texto-no-carrossel[data-slide-topic="estacionamento-entrega-mesmo-dia"] .textos-do-destaque_area-de-texto-sobre-a-foto-do-slide {
  right: auto;
  left: 8%;
}

.frase-principal-do-destaque_titulo-sobre-a-foto-do-slide {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xlarge);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.frase-complementar-do-destaque_texto-menor-sob-o-titulo-do-slide {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-xl);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Botão CTA do slider (orçamento via WhatsApp) */
.orcamento-via-whatsapp_botao-no-slide-do-carrossel {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-xl);
  background-color: var(--color-whatsapp-green);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.orcamento-via-whatsapp_botao-no-slide-do-carrossel:hover {
  background-color: var(--color-whatsapp-green-hover);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

.orcamento-via-whatsapp_botao-no-slide-do-carrossel i {
  font-size: 1.2em;
}

/* ---- Imagem oculta para acessibilidade (LLMs e leitores de tela) ---- */
/* A imagem de fundo é aplicada via CSS no slide,
   mas existe também como <img> com conteudo-para-acessibilidade-e-leitores-de-tela_elemento-oculto-visualmente para que LLMs
   acessem o alt text descritivo da imagem */
.foto-de-fundo-do-destaque-para-acessibilidade_imagem-oculta-com-texto-alternativo-no-slide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ---- Ícone decorativo dentro de alguns slides ---- */
.icone-ilustrativo-do-destaque_imagem-pequena-no-slide {
  width: 60px;
  height: auto;
  margin: 0 auto var(--spacing-sm);
}

/* ---- Navegação do Swiper (setas e paginação) ---- */
.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-button-next,
.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-button-prev {
  color: var(--color-text-white);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-button-next:hover,
.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-button-prev:hover {
  opacity: 1;
}

.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-pagination-bullet {
  background-color: var(--color-text-white);
  opacity: 0.5;
}

.destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-pagination-bullet-active {
  background-color: var(--color-brand-gold);
  opacity: 1;
}

/* ================================================================
   RESPONSIVIDADE DO SLIDER
   ================================================================ */

@media (max-width: 1024px) {
  .destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper {
    height: 500px;
  }

  .frase-principal-do-destaque_titulo-sobre-a-foto-do-slide {
    font-size: var(--font-size-2xlarge);
  }

  .frase-complementar-do-destaque_texto-menor-sob-o-titulo-do-slide {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 768px) {
  .destaque-individual-da-empresa_slide-com-foto-e-texto-no-carrossel {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .textos-do-destaque_area-de-texto-sobre-a-foto-do-slide {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 800px;
    padding: var(--spacing-xl);
  }
}

@media (max-width: 480px) {
  .destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper {
    height: 420px;
  }

  .textos-do-destaque_area-de-texto-sobre-a-foto-do-slide {
    padding: var(--spacing-lg);
  }

  .frase-principal-do-destaque_titulo-sobre-a-foto-do-slide {
    font-size: var(--font-size-xlarge);
  }

  .frase-complementar-do-destaque_texto-menor-sob-o-titulo-do-slide {
    font-size: var(--font-size-small);
  }

  .icone-ilustrativo-do-destaque_imagem-pequena-no-slide {
    width: 40px;
  }

  .destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-button-next,
  .destaques-da-empresa-primeira-loja-entrega-qualidade-e-estacionamento_carrossel-de-fotos-em-tela-cheia .swiper-button-prev {
    display: none;
  }
}

/* ================================================================
   CONTATO RÁPIDO: Barra de ação com WhatsApp e telefone
   Aparece logo abaixo do slider como chamada direta para contato.
   ================================================================ */

.orcamento-rapido-por-whatsapp-e-telefone_faixa-escura-com-dois-botoes {
  background-color: var(--color-brand-dark-navy);
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.precisa-de-um-orcamento-rapido_titulo-da-faixa-de-contato-rapido {
  color: var(--color-text-white);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-normal);
}

.whatsapp-e-telefone-para-orcamento_area-com-dois-botoes-na-faixa-de-contato {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.orcamento-rapido-por-whatsapp-e-telefone_faixa-escura-com-dois-botoes__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.orcamento-rapido-por-whatsapp-e-telefone_faixa-escura-com-dois-botoes__button i {
  font-size: 1.3em;
}

/* Botão WhatsApp */
.orcamento-via-whatsapp-11-93232-4219_botao-verde-na-faixa-de-contato-rapido {
  background-color: var(--color-whatsapp-green);
  color: var(--color-text-white);
}

.orcamento-via-whatsapp-11-93232-4219_botao-verde-na-faixa-de-contato-rapido:hover {
  background-color: var(--color-whatsapp-green-hover);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

/* Botão telefone */
.ligar-para-11-2438-6416_botao-de-telefone-na-faixa-de-contato-rapido {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
}

.ligar-para-11-2438-6416_botao-de-telefone-na-faixa-de-contato-rapido:hover {
  background-color: var(--color-brand-gold-hover);
  color: var(--color-brand-dark-navy);
  transform: translateY(-2px);
}

/* ---- Responsividade do contato rápido ---- */

@media (max-width: 480px) {
  .orcamento-rapido-por-whatsapp-e-telefone_faixa-escura-com-dois-botoes {
    padding: var(--spacing-xl) 0;
  }

  .precisa-de-um-orcamento-rapido_titulo-da-faixa-de-contato-rapido {
    font-size: var(--font-size-base);
    padding: 0 var(--spacing-md);
  }

  .whatsapp-e-telefone-para-orcamento_area-com-dois-botoes-na-faixa-de-contato {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .orcamento-rapido-por-whatsapp-e-telefone_faixa-escura-com-dois-botoes__button {
    width: 80%;
    justify-content: center;
  }
}

/* ================================================================
   PRINCIPAIS APLICAÇÕES: Grid de 3 cards com ícone + texto
   Cada card: ícone 64×64, título, descrição curta e link "Saiba mais"
   ================================================================ */

.pisos-industriais-residenciais-e-estacionamentos_secao-com-tres-cards-de-aplicacoes {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-white);
}

.principais-aplicacoes-da-tinta-epoxi_titulo-da-secao-de-aplicacoes {
  text-align: center;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-xs);
}

.confira-algumas-aplicacoes-da-tinta-epoxi_subtitulo-da-secao-de-aplicacoes {
  text-align: center;
  color: #666666;
  font-size: var(--font-size-medium);
  margin-bottom: var(--spacing-2xl);
}

.tres-tipos-de-aplicacao-de-tinta-epoxi_grade-de-cards-na-secao-de-aplicacoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

/* ---- Card de aplicação individual ---- */
.tipo-de-aplicacao-da-tinta-epoxi_card-com-icone-titulo-descricao-e-link-na-secao-de-aplicacoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.tipo-de-aplicacao-da-tinta-epoxi_card-com-icone-titulo-descricao-e-link-na-secao-de-aplicacoes:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

.ilustracao-do-tipo-de-aplicacao_icone-no-card-de-aplicacao {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-lg);
}

.nome-do-tipo-de-aplicacao_titulo-no-card-de-aplicacao {
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-sm);
}

.descricao-do-tipo-de-aplicacao_texto-no-card-de-aplicacao {
  color: #555555;
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
  flex-grow: 1;
}

.saiba-mais-sobre-esta-aplicacao_link-com-seta-no-card-de-aplicacao {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-brand-gold);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.saiba-mais-sobre-esta-aplicacao_link-com-seta-no-card-de-aplicacao:hover {
  color: var(--color-brand-gold-hover);
  gap: var(--spacing-sm);
}

.indicador-de-link-saiba-mais_seta-animada-no-card-de-aplicacao {
  font-size: 0.75em;
  transition: transform var(--transition-fast);
}

.saiba-mais-sobre-esta-aplicacao_link-com-seta-no-card-de-aplicacao:hover .indicador-de-link-saiba-mais_seta-animada-no-card-de-aplicacao {
  transform: translateX(3px);
}

/* ---- Responsividade das aplicações ---- */

@media (max-width: 1024px) {
  .tres-tipos-de-aplicacao-de-tinta-epoxi_grade-de-cards-na-secao-de-aplicacoes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pisos-industriais-residenciais-e-estacionamentos_secao-com-tres-cards-de-aplicacoes {
    padding: var(--spacing-2xl) 0;
  }

  .tres-tipos-de-aplicacao-de-tinta-epoxi_grade-de-cards-na-secao-de-aplicacoes {
    grid-template-columns: 1fr;
  }

  .tipo-de-aplicacao-da-tinta-epoxi_card-com-icone-titulo-descricao-e-link-na-secao-de-aplicacoes {
    padding: var(--spacing-lg);
  }
}

/* ================================================================
   INFORMAÇÕES DO PRODUTO: 4 cards técnicos (diluição, secagem, rendimento, indicação)
   Layout em grid 4 colunas com ícone 64×64, título e texto descritivo
   ================================================================ */

.diluicao-secagem-rendimento-e-indicacao_secao-com-quatro-cards-de-informacoes-tecnicas {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-light-gray);
}

.informacoes-sobre-a-tinta-epoxi_titulo-da-secao-de-dados-tecnicos {
  text-align: center;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xl);
}

.quatro-dados-tecnicos-da-tinta-epoxi_grade-de-cards-na-secao-de-informacoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

/* ---- Card de informação técnica individual ---- */
.dado-tecnico-da-tinta-epoxi_card-com-icone-titulo-e-texto-na-secao-de-informacoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  background-color: var(--color-background-white);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.dado-tecnico-da-tinta-epoxi_card-com-icone-titulo-e-texto-na-secao-de-informacoes:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

.ilustracao-do-dado-tecnico_icone-no-card-de-informacao-tecnica {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-lg);
}

.nome-do-dado-tecnico_titulo-no-card-de-informacao-tecnica {
  color: var(--color-brand-navy);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.detalhe-tecnico-da-tinta-epoxi_texto-no-card-de-informacao-tecnica {
  color: #555555;
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
}

/* ---- Responsividade das informações do produto ---- */

@media (max-width: 1024px) {
  .quatro-dados-tecnicos-da-tinta-epoxi_grade-de-cards-na-secao-de-informacoes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .diluicao-secagem-rendimento-e-indicacao_secao-com-quatro-cards-de-informacoes-tecnicas {
    padding: var(--spacing-2xl) 0;
  }

  .quatro-dados-tecnicos-da-tinta-epoxi_grade-de-cards-na-secao-de-informacoes {
    grid-template-columns: 1fr;
  }

  .dado-tecnico-da-tinta-epoxi_card-com-icone-titulo-e-texto-na-secao-de-informacoes {
    padding: var(--spacing-lg);
  }
}

/* ================================================================
   DEPOIMENTOS DE CLIENTES: Reviews do Google via Trustindex
   Versão estática (fallback para LLMs) + widget dinâmico (Trustindex JS)
   ================================================================ */

.depoimentos-de-clientes-satisfeitos-com-nota-5-estrelas-no-google_secao-de-avaliacoes {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-white);
}

.clientes-satisfeitos_titulo-da-secao-de-depoimentos {
  text-align: center;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-xs);
}

.veja-o-que-clientes-dizem-no-google-meu-negocio_subtitulo-da-secao-de-depoimentos {
  text-align: center;
  color: #666666;
  font-size: var(--font-size-medium);
  margin-bottom: var(--spacing-2xl);
}

/* ---- Grid estático de depoimentos (fallback LLM / noscript) ---- */
.seis-avaliacoes-de-clientes-do-google_grade-de-cards-de-depoimentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.avaliacao-individual-de-cliente-no-google_card-com-foto-nome-estrelas-e-texto {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-default);
}

.avaliacao-individual-de-cliente-no-google_card-com-foto-nome-estrelas-e-texto:hover {
  box-shadow: var(--shadow-medium);
}

.foto-e-nome-do-avaliador_topo-do-card-de-depoimento {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.foto-de-perfil-do-avaliador_imagem-circular-no-card-de-depoimento {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.nome-e-data-da-avaliacao_textos-ao-lado-da-foto-no-card-de-depoimento {
  display: flex;
  flex-direction: column;
}

.nome-do-avaliador_texto-em-negrito-no-card-de-depoimento {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.data-da-avaliacao-no-google_texto-de-data-no-card-de-depoimento {
  font-size: var(--font-size-xsmall);
  color: #999999;
}

.nota-5-estrelas-da-avaliacao_icones-de-estrelas-no-card-de-depoimento {
  color: #fbbc04;
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 2px;
}

.texto-escrito-pelo-cliente_paragrafo-da-avaliacao-no-card-de-depoimento {
  color: #555555;
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
}

.origem-google-da-avaliacao_selo-com-icone-do-google-no-card-de-depoimento {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-xsmall);
  color: #999999;
}

.origem-google-da-avaliacao_selo-com-icone-do-google-no-card-de-depoimento i {
  color: #4285f4;
}

/* ---- Widget Trustindex (renderizado via JS) ---- */
.avaliacoes-do-google-via-trustindex_area-carregada-por-javascript-na-secao-de-depoimentos {
  margin-top: var(--spacing-xl);
}

/* Esconde o grid estático quando o Trustindex carregar com sucesso */
.avaliacoes-do-google-via-trustindex_area-carregada-por-javascript-na-secao-de-depoimentos .ti-widget {
  display: block;
}

/* ---- Responsividade dos depoimentos ---- */

@media (max-width: 1024px) {
  .seis-avaliacoes-de-clientes-do-google_grade-de-cards-de-depoimentos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .depoimentos-de-clientes-satisfeitos-com-nota-5-estrelas-no-google_secao-de-avaliacoes {
    padding: var(--spacing-2xl) 0;
  }

  .seis-avaliacoes-de-clientes-do-google_grade-de-cards-de-depoimentos {
    grid-template-columns: 1fr;
  }

  .avaliacao-individual-de-cliente-no-google_card-com-foto-nome-estrelas-e-texto {
    padding: var(--spacing-lg);
  }
}

/* ================================================================
   PRODUTO DESTAQUE: Tinta Epóxi – Dupla Função
   Layout split: texto descritivo à esquerda + imagem do produto à direita
   Fundo azul marinho com texto branco
   ================================================================ */

.tinta-epoxi-dupla-funcao-primer-e-acabamento_secao-com-fundo-azul-marinho {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-brand-navy);
  color: var(--color-text-white);
}

.texto-e-foto-da-tinta-dupla-funcao_duas-colunas-na-secao-de-produto-destaque {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
}

/* ---- Coluna de texto (esquerda) ---- */
.descricao-da-tinta-dupla-funcao_coluna-de-texto-na-secao-de-produto-destaque {
  flex: 1;
}

.produto-destaque_etiqueta-dourada-acima-do-titulo-na-secao-de-produto-destaque {
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-brand-gold);
  margin-bottom: var(--spacing-sm);
}

.tinta-epoxi-dupla-funcao_titulo-na-secao-de-produto-destaque {
  color: var(--color-text-white);
  font-size: var(--font-size-2xlarge);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
}

.primer-e-acabamento-no-mesmo-produto_texto-descritivo-na-secao-de-produto-destaque {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-on-dark);
  margin-bottom: var(--spacing-xl);
}

.ver-pagina-de-produtos_botao-com-seta-na-secao-de-produto-destaque {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-xl);
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.ver-pagina-de-produtos_botao-com-seta-na-secao-de-produto-destaque:hover {
  background-color: var(--color-brand-gold-hover);
  color: var(--color-brand-dark-navy);
  transform: translateY(-2px);
}

.ver-pagina-de-produtos_botao-com-seta-na-secao-de-produto-destaque i {
  font-size: 0.9em;
}

/* ---- Coluna de imagem (direita) ---- */
.foto-dos-baldes-de-tinta_coluna-da-imagem-na-secao-de-produto-destaque {
  flex: 0 0 auto;
  text-align: center;
}

.baldes-de-18-litros-e-3-6-litros-tinta-dupla-funcao_foto-do-produto-na-secao-de-produto-destaque {
  max-width: 420px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

/* ---- Responsividade do produto destaque ---- */

@media (max-width: 1024px) {
  .texto-e-foto-da-tinta-dupla-funcao_duas-colunas-na-secao-de-produto-destaque {
    flex-direction: column-reverse;
    text-align: center;
  }

  .baldes-de-18-litros-e-3-6-litros-tinta-dupla-funcao_foto-do-produto-na-secao-de-produto-destaque {
    max-width: 360px;
  }
}

@media (max-width: 480px) {
  .tinta-epoxi-dupla-funcao-primer-e-acabamento_secao-com-fundo-azul-marinho {
    padding: var(--spacing-2xl) 0;
  }

  .tinta-epoxi-dupla-funcao_titulo-na-secao-de-produto-destaque {
    font-size: var(--font-size-xlarge);
  }

  .primer-e-acabamento-no-mesmo-produto_texto-descritivo-na-secao-de-produto-destaque {
    font-size: var(--font-size-base);
  }

  .baldes-de-18-litros-e-3-6-litros-tinta-dupla-funcao_foto-do-produto-na-secao-de-produto-destaque {
    max-width: 280px;
  }
}

/* ================================================================
   BLOG: Grid de 3 cards com os últimos posts
   Cada card: thumbnail + data + título + link "Leia mais"
   ================================================================ */

.tres-artigos-mais-recentes-do-blog_secao-com-fundo-cinza-claro {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-light-gray);
}

.confira-nossos-posts_titulo-da-secao-de-blog-na-homepage {
  text-align: center;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xl);
}

.tres-artigos-do-blog_grade-de-cards-na-secao-de-blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

/* ---- Card de post individual ---- */
.artigo-do-blog_card-com-imagem-data-titulo-e-link-leia-mais {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-white);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.artigo-do-blog_card-com-imagem-data-titulo-e-link-leia-mais:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

.imagem-de-capa-do-artigo_moldura-da-foto-no-card-de-blog {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.foto-de-capa-do-artigo_imagem-no-card-de-blog {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-default);
}

.artigo-do-blog_card-com-imagem-data-titulo-e-link-leia-mais:hover .foto-de-capa-do-artigo_imagem-no-card-de-blog {
  transform: scale(1.05);
}

.data-titulo-e-link-do-artigo_area-de-texto-no-card-de-blog {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  flex-grow: 1;
}

.data-de-publicacao-do-artigo_texto-de-data-no-card-de-blog {
  font-size: var(--font-size-xsmall);
  color: #999999;
  margin-bottom: var(--spacing-sm);
}

.titulo-do-artigo_texto-em-destaque-no-card-de-blog {
  color: var(--color-brand-navy);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
  flex-grow: 1;
}

.ler-artigo-completo_link-leia-mais-com-seta-no-card-de-blog {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-brand-gold);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.ler-artigo-completo_link-leia-mais-com-seta-no-card-de-blog:hover {
  color: var(--color-brand-gold-hover);
  gap: var(--spacing-sm);
}

.indicador-de-link-leia-mais_seta-animada-no-card-de-blog {
  font-size: 0.75em;
  transition: transform var(--transition-fast);
}

.ler-artigo-completo_link-leia-mais-com-seta-no-card-de-blog:hover .indicador-de-link-leia-mais_seta-animada-no-card-de-blog {
  transform: translateX(3px);
}

/* ---- Responsividade do blog ---- */

@media (max-width: 1024px) {
  .tres-artigos-do-blog_grade-de-cards-na-secao-de-blog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tres-artigos-mais-recentes-do-blog_secao-com-fundo-cinza-claro {
    padding: var(--spacing-2xl) 0;
  }

  .tres-artigos-do-blog_grade-de-cards-na-secao-de-blog {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   WHATSAPP FLUTUANTE: Botão fixo no canto inferior direito
   Tooltip com mensagem de convite aparece após 3 segundos
   ================================================================ */

.atendimento-via-whatsapp-mp-tintas-epoxi_botao-verde-flutuante-no-canto-inferior-direito {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-index-whatsapp-button);
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

/* ---- Botão circular principal ---- */
.abrir-conversa-no-whatsapp_botao-verde-redondo-flutuante {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-whatsapp-green);
  color: var(--color-text-white);
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background-color var(--transition-default), transform var(--transition-default), box-shadow var(--transition-default);
}

.abrir-conversa-no-whatsapp_botao-verde-redondo-flutuante:hover {
  background-color: var(--color-whatsapp-green-hover);
  color: var(--color-text-white);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Animação de pulso sutil para chamar atenção */
@keyframes atendimento-via-whatsapp-mp-tintas-epoxi_botao-verde-flutuante-no-canto-inferior-direito-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 8px rgba(34, 193, 94, 0.2); }
}

.abrir-conversa-no-whatsapp_botao-verde-redondo-flutuante {
  animation: atendimento-via-whatsapp-mp-tintas-epoxi_botao-verde-flutuante-no-canto-inferior-direito-pulse 3s ease-in-out infinite;
}

.abrir-conversa-no-whatsapp_botao-verde-redondo-flutuante:hover {
  animation: none;
}

/* ---- Tooltip / balão de mensagem ---- */
.mensagem-precisa-de-ajuda_balao-ao-lado-do-botao-whatsapp-flutuante {
  position: absolute;
  right: 68px;
  bottom: 8px;
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.mensagem-precisa-de-ajuda_balao-ao-lado-do-botao-whatsapp-flutuante--visivel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Seta do tooltip apontando para o botão */
.mensagem-precisa-de-ajuda_balao-ao-lado-do-botao-whatsapp-flutuante::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--color-background-white);
}

.fechar-mensagem-precisa-de-ajuda_botao-x-no-balao-do-whatsapp-flutuante {
  background: none;
  border: none;
  cursor: pointer;
  color: #999999;
  font-size: var(--font-size-xsmall);
  margin-left: var(--spacing-sm);
  padding: 0;
  line-height: 1;
  transition: color var(--transition-fast);
}

.fechar-mensagem-precisa-de-ajuda_botao-x-no-balao-do-whatsapp-flutuante:hover {
  color: var(--color-text-primary);
}

/* ---- Responsividade ---- */

@media (max-width: 480px) {
  .atendimento-via-whatsapp-mp-tintas-epoxi_botao-verde-flutuante-no-canto-inferior-direito {
    bottom: 16px;
    right: 16px;
  }

  .abrir-conversa-no-whatsapp_botao-verde-redondo-flutuante {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .mensagem-precisa-de-ajuda_balao-ao-lado-do-botao-whatsapp-flutuante {
    right: 60px;
    font-size: var(--font-size-xsmall);
  }
}

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .abrir-conversa-no-whatsapp_botao-verde-redondo-flutuante {
    animation: none;
  }
}