@import url("styles.css");

/* Estilos específicos para a página "Ver todos os produtos" */
/* Início: carrossel de cards (modo horizontal) */
.carousel-wrapper{display:flex; flex-direction:column; gap:12px; position:relative; padding-bottom:70px;}
.carousel-controls{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; justify-content:center; gap:12px;}
.carousel-btn{width:38px; height:38px; border:none; border-radius:999px; background:rgba(255,255,255,.9); color:#0d1014; font-size:1.2rem; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center;}
.carousel-btn:hover{background:rgba(255,255,255,1);}
#vermaisCarousel{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 18px 8px; scroll-behavior:smooth; touch-action:pan-x; overscroll-behavior-inline:contain;}
#vermaisCarousel::-webkit-scrollbar{display:none}
#vermaisCarousel .card{min-width:280px; max-width:280px; flex:0 0 auto; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; border-radius:12px;}
#vermaisCarousel .card-media{aspect-ratio:16/9; display:grid; place-items:center; background:radial-gradient(800px 200px at -10% 0%, rgba(25, 31, 105, 0.575), transparent 50%), linear-gradient(135deg, rgba(155, 189, 2, 0.3), rgba(56, 83, 151, 0.699)); overflow:hidden;}
#vermaisCarousel .card-media img{width:100% !important; height:100% !important; object-fit:cover; border-radius:0;}

/* ZOOM DAS IAMEGNS */
@media (min-width: 1200px) {
  #vermaisCarousel .card {
    min-width: calc((70% - 42px) / 4);
    max-width: calc((70% - 42px) / 4);
    flex: 0 0 calc((70% - 42px) / 4);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  #vermaisCarousel .card {
    min-width: calc((70% - 28px) / 3);
    max-width: calc((70% - 28px) / 3);
    flex: 0 0 calc((70% - 28px) / 3);
  }
}

@media (max-width: 899px) {
  #vermaisCarousel .card {
    min-width: calc((70% - 21px) / 2);
    max-width: calc((70% - 21px) / 2);
    flex: 0 0 calc((70% - 21px) / 2);
  }
}

@media (max-width: 720px) {
  #vermaisCarousel {
    gap: 12px;
    padding: 0 14px 12px;
  }
  #vermaisCarousel .card {
    min-width: calc(70% - 28px);
    max-width: calc(70% - 28px);
    flex: 0 0 calc(70% - 28px);
  }
  .button-group {
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* Responsividade */
@media (max-width: 1020px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .menu-desktop,
  header nav[aria-label="menu-desktop"]{display:none}
  .hamburger{display:inline-flex}
  .grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr}
  .carousel { gap: 12px; padding: 0 14px 12px; }
  .carousel .card { min-width: calc(100% - 28px); max-width: calc(100% - 28px); }
}
@media (max-width: 460px){
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}


/* Mobile - Menu hamburger ativo */
@media (max-width: 720px){
  .menu-desktop{display:none} /* Esconde navegação desktop no mobile */
  .menu-móvel{display:block} /* Mostra menu móvel quando drawer estiver aberto */
  .menu-móvel ul{display:grid; gap:10px;}
  .menu-móvel a{display:block; color:#fff; padding:10px 0;}
  .menu-móvel li{border-bottom:1px solid rgba(255,255,255,.08);}
  .hamburger{display:inline-flex} /* Mostra botão hamburger */
  .grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
  /* ADICIONADO: Container de produtos em mobile */
  .product-container{
    display:flex; /* ADICIONADO: Layout flexível */
    width:100%; /* ADICIONADO: Largura 100% */
    justify-content:space-around; /* ADICIONADO: Espaçamento uniforme */
    flex-direction:column; /* ADICIONADO: Empilha verticalmente */
  }
}