/* public/assets/css/index.css */

/* ... (Mantenha o .cabecalho-index como na ÚLTIMA RESPOSTA COMPLETA - user_query_10, Passo 3) ... */
.cabecalho-index {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 25px 0;
  z-index: 100;
}

/* ==========================================================================
   Seção Hero (Principal da Index) - Verifique o caminho da imagem de fundo!
   ========================================================================== */
.secao-hero {
  /* CAMINHO DA IMAGEM DE FUNDO: Verifique se está correto!
     Ex: se index.css está em 'public/assets/css/', a imagem deve estar em 'public/assets/img/background-lanches.jpg' */
  background-image: linear-gradient(
      to bottom,
      rgba(30, 25, 45, 0.92) 0%,
      rgba(35, 25, 45, 0.85) 20%,
      rgba(50, 30, 55, 0.6) 55%,
      rgba(80, 50, 90, 0.2) 75%
    ),
    linear-gradient(
      to top,
      var(--cor-fundo-secundaria) 0%,
      rgba(var(--rgb-cor-fundo-secundaria), 0.8) 10%,
      rgba(var(--rgb-cor-fundo-secundaria), 0) 25%
    ),
    url("../img/background-lanches.jpg"); /* <-- VERIFIQUE ESTE CAMINHO!! */

  background-color: #3a2f4b; /* Fallback */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 160px 20px 120px 20px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.logo-hero-main {
  /* LOGO DA LANCHONETE NA HERO - TAMANHO AUMENTADO */
  max-width: 500px; /* Aumentei de 320px para 380px. Ajuste fino conforme seu gosto. */
  height: auto;
  margin: 0 auto;
  margin-bottom: 40px; /* Mais espaço abaixo da logo */
  filter: drop-shadow(
    0px 5px 10px rgba(10, 1, 1, 0.35)
  ); /* Sombra um pouco mais definida */
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.logo-hero-main:hover {
  transform: scale(1.06);
}

/* ... (Restante do .hero-conteudo, .slogan-lanchonete-hero, .btn-ver-cardapio, seção de destaques, cards com efeito hover, e Media Queries COMO NA ÚLTIMA RESPOSTA COMPLETA - user_query_10, Passo 3) ... */
/* Certifique-se de que as Media Queries para .logo-hero-main também sejam ajustadas proporcionalmente se necessário. */
.hero-conteudo .slogan-lanchonete-hero {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.hero-conteudo .hero-descricao {
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  margin-bottom: 40px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.97);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.btn-ver-cardapio {
  padding: 18px 40px;
  font-size: 1.15rem;
}
.secao-destaques {
  padding: 60px 0;
  background-color: var(--cor-fundo-secundaria);
  position: relative;
  z-index: 5;
}
.secao-destaques .titulo-secao {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 45px;
  color: var(--cor-texto-primaria);
  font-weight: bold;
}
.grade-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 25px;
}
.card-destaque {
  background-color: #ffffff;
  padding: 30px 25px;
  border-radius: var(--raio-borda-padrao);
  text-align: center;
  box-shadow: var(--sombra-padrao);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--cor-borda);
  position: relative;
  overflow: hidden;
}
.card-destaque:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-padrao-hover);
}
.card-destaque::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--cor-primaria-acao);
  transition: width 0.3s ease-out;
  z-index: 1;
}
.card-destaque:hover::after {
  width: 100%;
}
.card-destaque > iconify-icon,
.card-destaque > h4,
.card-destaque > p {
  position: relative;
  z-index: 2;
}
.card-destaque iconify-icon {
  font-size: 2.6rem;
  margin-bottom: 15px;
  color: var(--cor-primaria-acao);
}
.card-destaque h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--cor-texto-primaria);
  font-weight: 600;
}
.card-destaque p {
  font-size: 0.9rem;
  color: var(--cor-texto-secundaria);
  line-height: 1.55;
}

@media (max-width: 992px) {
  .logo-hero-main {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 40px;
  } /* Ajustado */
  .hero-conteudo .slogan-lanchonete-hero {
    font-size: clamp(1.8rem, 4.8vw, 2.8rem);
  }
  .hero-conteudo .hero-descricao {
    font-size: clamp(1rem, 2.6vw, 1.2rem);
  }
  .secao-destaques .titulo-secao {
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .cabecalho-index {
    padding: 15px 0;
  }
  .secao-hero {
    padding: 140px 15px 100px 15px;
    min-height: auto; /* Ajustado para não forçar 100vh no mobile se o conteúdo for menor */
  }
  .logo-hero-main {
    max-width: 420px;
    margin-bottom: 25px;
    margin: 0 auto;
    margin-bottom: 40px;
  } /* Ajustado */
  .btn-ver-cardapio {
    padding: 14px 28px;
    font-size: 1rem;
  }
  .secao-destaques {
    padding: 50px 0;
  }
  .secao-destaques .titulo-secao {
    font-size: 1.7rem;
    margin-bottom: 35px;
  }
  .card-destaque h4 {
    font-size: 1.2rem;
  }
}
@media (max-width: 480px) {
  .logo-hero-main {
    width: auto;
    max-width: 320px;
    margin: 0 auto;
    margin-bottom: 40px;
  } /* Ajustado */
  .hero-conteudo .slogan-lanchonete-hero {
    font-size: clamp(1.6rem, 5vw, 2rem);
  }
  .hero-conteudo .hero-descricao {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
}
@media (max-width: 380px) {
  .logo-hero-main {
    width: auto;
    margin: 0 auto;
    margin-bottom: 40px;
  } /* Ajustado */
  .hero-conteudo .slogan-lanchonete-hero {
    font-size: clamp(1.6rem, 5vw, 2rem);
  }
  .hero-conteudo .hero-descricao {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
}