Boas Práticas WordPress e Elementor

❌ Container
❌ Coluna 1
❌ Section 2
❌ Botão

✅ container-hero
✅ btn-cta-whatsapp
✅ secao-depoimentos
✅ card-servico-01

/* H1 que escala automaticamente */
font-size: clamp(1.75rem, 5vw, 3.75rem);
/* Mobile: 1.75rem → Desktop: 3.75rem → Entre eles: 5% da largura da tela */

❌ padding: 13px 27px; (valores aleatórios)
❌ margin-bottom: 19px; (sem padrão)

✅ padding: 1rem 2rem; (16px 32px - múltiplos de 8)
✅ margin-bottom: 1.5rem; (24px - múltiplo de 8)

/* Desktop e Tablet */
width: auto;

/* Mobile */
width: 100%; /* Ocupa tela toda */

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

/* Botão CTA com efeito hover */
.btn-cta-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s ease;
}

.btn-cta-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* ============================================
   SEÇÃO: CARDS DE SERVIÇOS
   ============================================ */

.card-servico {
  border-radius: 1rem;
  transition: transform 0.3s ease;
}

.card-servico:hover {
  transform: scale(1.05);
}

/* ============================================
   SCROLL SUAVE PARA SEÇÕES
   ============================================ */

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

/* ============================================
   MODAL DE VÍDEO
   ============================================ */

function abrirModal(videoId) {
  const modal = document.getElementById('modal-video');
  const iframe = document.getElementById('video-frame');

  // Insere URL do YouTube
  iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;

  // Mostra modal
  modal.classList.add('ativo');
}

function fecharModal() {
  const modal = document.getElementById('modal-video');
  const iframe = document.getElementById('video-frame');

  // Para vídeo
  iframe.src = '';

  // Esconde modal
  modal.classList.remove('ativo');
}

📄 Página: "Easy Builder - Crie Sites Rápido"

H1 - "Crie Sites Profissionais em Horas" (Hero)

  H2 - "Sobre o Easy Builder" (Seção)
    H3 - "Nossa Missão" (Subseção)
    H3 - "Nossos Valores" (Subseção)

  H2 - "Funcionalidades" (Seção)
    H3 - "Templates Prontos" (Card 1)
    H3 - "IA Integrada" (Card 2)
    H3 - "Suporte 24/7" (Card 3)

  H2 - "Depoimentos" (Seção)
    H3 - "João Silva" (Depoimento 1)
    H3 - "Maria Santos" (Depoimento 2)

  H2 - "Preços" (Seção)

  H2 - "Fale Conosco" (Seção)

<label>Nome Completo</label>
<input type="text" placeholder="Digite seu nome">

/* ❌ Com rem (tamanho fixo) */
.icone-inline {
  font-size: 1.125rem; /* Sempre 18px */
}

/* ✅ Com em (escala com texto ao redor) */
.icone-inline {
  font-size: 1.2em; /* 120% do tamanho do texto pai */
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
}

@media (max-width: 1024px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  .grid-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 3vw, 1.875rem);
}
/* Colunas se ajustam automaticamente! */

/* Landscape 16:9 (vídeos, banners) */
.card-imagem {
  aspect-ratio: 16/9;
  object-fit: cover; /* Imagem preenche sem distorcer */
}

/* Quadrado 1:1 (produtos, perfis) */
.card-imagem {
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Retrato 4:5 (Instagram style) */
.card-imagem {
  aspect-ratio: 4/5;
  object-fit: cover;
}

/* ============================================
   BOTÃO COM HOVER SUAVE
   ============================================ */
.btn-cta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;

  /* Transição suave */
  transition: all 0.3s ease;

  /* Otimização de performance */
  will-change: transform;
}

.btn-cta:hover {
  /* Levanta botão */
  transform: translateY(-3px);

  /* Adiciona sombra */
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* ============================================
   CARD QUE CRESCE NO HOVER
   ============================================ */
.card-servico {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid #e5e5e5;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-servico:hover {
  transform: scale(1.05); /* Cresce 5% */
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ============================================
   GRADIENTE ANIMADO (FUNDO)
   ============================================ */
.hero-gradiente {
  background: linear-gradient(
    270deg,
    #667eea,
    #764ba2,
    #f093fb,
    #4facfe
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}