/* ============================================
   EMPÓRIO JÁ — LANDING PAGE
   responsive.css — Media queries
   ============================================ */

/* ============================================
   TABLET (até 1024px)
   ============================================ */
@media (max-width: 1024px) {

  :root {
    --section-pad: 80px;
    --container-pad: 28px;
  }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero__visual {
    display: none;
  }

  .hero__content {
    max-width: 100%;
  }

  /* Categorias: 3 colunas */
  .categorias__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Vitrine */
  .vitrine__faixa { height: 170px; }
  .vitrine__pista img { height: 126px; width: 188px; }
  .vitrine__rotulo { width: 130px; padding: 0 24px; }

  /* Posicionamento */
  .posicionamento__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Perfis */
  .perfil-card {
    padding: 40px 32px;
  }

  /* Passos */
  .passo {
    padding: 0 24px;
  }

}

/* ============================================
   MOBILE (até 768px)
   ============================================ */
@media (max-width: 768px) {

  :root {
    --section-pad: 64px;
    --container-pad: 20px;
  }

  /* ---- Hero ---- */
  .hero {
    padding: 60px 0 56px;
    min-height: auto;
  }

  .hero__headline {
    font-size: 1.95rem;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    text-align: center;
  }

  /* ---- Section titles ---- */
  .section-title {
    font-size: 1.7rem;
    margin-bottom: 32px;
  }

  /* ---- Valor ---- */
  .valor__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .valor__card {
    padding: 32px 28px;
  }

  /* ---- Posicionamento ---- */
  .posicionamento__headline {
    font-size: 1.8rem;
  }

  .posicionamento__resultado {
    padding: 22px 24px;
    font-size: 0.92rem;
  }

  /* ---- Categorias: 2 colunas ---- */
  .categorias__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .categoria-card {
    padding: 28px 20px 24px;
  }

  /* Último card centralizado se ímpar */
  .categoria-card:nth-child(5) {
    grid-column: span 2;
    max-width: 260px;
    margin: 0 auto;
  }

  /* ---- Vitrine ---- */
  .vitrine__faixa { height: 148px; }
  .vitrine__pista img { height: 108px; width: 162px; }
  .vitrine__rotulo { width: 100px; padding: 0 16px; }
  .vitrine__rotulo-num { font-size: 1.5rem; }

  /* ---- Perfis: 1 coluna ---- */
  .perfis__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .perfil-card {
    padding: 36px 28px;
  }

  /* ---- Passos: vertical ---- */
  .passos {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 48px;
  }

  .passo {
    padding: 0;
  }

  .passo__divider {
    display: none;
  }

  /* ---- FAQ ---- */
  .faq__pergunta {
    font-size: 0.92rem;
    padding: 22px 0;
  }

  /* ---- Fechamento ---- */
  .fechamento {
    padding: 72px 0 52px;
  }

  .fechamento__headline {
    font-size: 2.1rem;
  }

  /* ---- WhatsApp flutuante ---- */
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }

}

/* ============================================
   MOBILE PEQUENO (até 380px)
   ============================================ */
@media (max-width: 380px) {

  .hero__headline {
    font-size: 1.65rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .posicionamento__headline {
    font-size: 1.55rem;
  }

  .fechamento__headline {
    font-size: 1.75rem;
  }

  .categorias__grid {
    grid-template-columns: 1fr 1fr;
  }

  .categoria-card:nth-child(5) {
    grid-column: auto;
    max-width: unset;
    margin: 0;
  }

  /* ---- Vitrine ---- */
  .vitrine__faixa { height: 132px; }
  .vitrine__pista img { height: 94px; width: 140px; }
  .vitrine__rotulo { width: 80px; padding: 0 12px; }
  .vitrine__rotulo-num { font-size: 1.2rem; }
  .vitrine__rotulo-nome { font-size: 0.58rem; }

  .btn--large {
    padding: 16px 28px;
    font-size: 0.92rem;
  }

}