/* ==============================
   PRODUTOS.CSS
   Estilos da página de Produtos e compartilhados com Como Aplicar.
   Product cards, CTA banner, application steps, video embed.
   ============================== */

/* ================================================================
   PRODUCT CATALOG: Heading da seção + grid de 4 cards
   ================================================================ */

.linhas-de-produtos-dupla-funcao-verniz-primer-e-primer-oxido_secao-com-grade-de-quatro-cards {
  padding: var(--spacing-3xl) 0;
}

.linhas-de-produtos_titulo-da-secao-de-catalogo-de-produtos {
  font-size: var(--font-size-2xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

/* ---- Grid 2x2 de product cards ---- */
.quatro-produtos-mp-tintas-epoxi_grade-de-cards-no-catalogo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}

.produto-mp-tintas-epoxi_card-com-foto-nome-e-descricao-no-catalogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.produto-mp-tintas-epoxi_card-com-foto-nome-e-descricao-no-catalogo:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.foto-da-embalagem-do-produto_imagem-no-card-do-catalogo {
  max-width: 180px;
  height: auto;
  margin-bottom: var(--spacing-lg);
}

.nome-do-produto_titulo-no-card-do-catalogo {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-md);
}

.descricao-do-produto_texto-no-card-do-catalogo {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

/* ================================================================
   CTA BANNER: Faixa de chamada para orçamento via WhatsApp
   ================================================================ */

.clique-e-faca-seu-orcamento-via-whatsapp_faixa-com-botao-verde {
  background: linear-gradient(135deg, var(--color-brand-navy), var(--color-brand-dark-navy));
  padding: var(--spacing-2xl) 0;
}

.chamada-e-botao-de-orcamento_area-interna-da-faixa-de-orcamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.clique-e-faca-seu-orcamento_texto-de-chamada-na-faixa-de-orcamento {
  font-size: var(--font-size-2xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
}

.orcamento-via-whatsapp_botao-verde-na-faixa-de-orcamento {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-2xl);
  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);
  white-space: nowrap;
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.orcamento-via-whatsapp_botao-verde-na-faixa-de-orcamento:hover {
  background-color: var(--color-whatsapp-green-hover);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

.orcamento-via-whatsapp_botao-verde-na-faixa-de-orcamento i {
  font-size: 1.3em;
}

/* ================================================================
   APPLICATION STEPS: 3 cards com instruções de aplicação
   Usado na página Produtos e na página Como Aplicar
   ================================================================ */

.como-aplicar-tinta-epoxi-em-tres-passos_secao-com-cards-de-instrucoes {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-light-gray);
}

.como-aplicar_titulo-da-secao-de-passos-de-aplicacao {
  font-size: var(--font-size-2xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.tres-passos-preparacao-mistura-e-aplicacao_grade-de-cards-de-instrucoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.passo-de-aplicacao-da-tinta-epoxi_card-com-icone-e-instrucao-na-secao-de-passos {
  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-large);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

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

.nome-do-passo-de-aplicacao_titulo-no-card-de-passo {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-md);
}

.instrucao-do-passo-de-aplicacao_texto-no-card-de-passo {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

/* ================================================================
   VIDEO EMBED: Vídeo YouTube responsivo
   ================================================================ */

.video-tutorial-de-como-aplicar-tinta-epoxi_secao-com-video-do-youtube {
  padding: var(--spacing-3xl) 0;
}

.player-do-video-tutorial_area-do-video-na-secao-de-video {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius-large);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.video-como-aplicar-tinta-epoxi-no-youtube_player-embutido-na-secao-de-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ================================================================
   CATÁLOGO DE CORES: Imagem centralizada
   ================================================================ */

.todas-as-cores-de-tinta-epoxi-disponiveis_secao-com-imagem-do-catalogo-centralizada {
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

.catalogo-completo-de-cores-mp-tintas-epoxi_imagem-grande-na-secao-de-catalogo {
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-large);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   RESPONSIVIDADE
   ================================================================ */

@media (max-width: 1024px) {
  .quatro-produtos-mp-tintas-epoxi_grade-de-cards-no-catalogo {
    gap: var(--spacing-lg);
  }

  .chamada-e-botao-de-orcamento_area-interna-da-faixa-de-orcamento {
    flex-direction: column;
    text-align: center;
  }

  .tres-passos-preparacao-mistura-e-aplicacao_grade-de-cards-de-instrucoes {
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .quatro-produtos-mp-tintas-epoxi_grade-de-cards-no-catalogo {
    grid-template-columns: 1fr;
  }

  .tres-passos-preparacao-mistura-e-aplicacao_grade-de-cards-de-instrucoes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .produto-mp-tintas-epoxi_card-com-foto-nome-e-descricao-no-catalogo {
    padding: var(--spacing-lg);
  }

  .foto-da-embalagem-do-produto_imagem-no-card-do-catalogo {
    max-width: 140px;
  }

  .clique-e-faca-seu-orcamento_texto-de-chamada-na-faixa-de-orcamento {
    font-size: var(--font-size-xlarge);
  }

  .passo-de-aplicacao-da-tinta-epoxi_card-com-icone-e-instrucao-na-secao-de-passos {
    padding: var(--spacing-lg);
  }

  .catalogo-completo-de-cores-mp-tintas-epoxi_imagem-grande-na-secao-de-catalogo {
    max-width: 100%;
  }
}