/* Reset e base */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
   
}

body {
    font-family: "Poppins", sans-serif;
    /* Degradê de preto (claro para escuro) */
    background: linear-gradient(to bottom, #333333, #111111, #000000); 
    /* Cor do texto geral adaptada para o fundo escuro */
    color: #f5f5f5; 
    min-height: 100vh;
    background-image: url('imagens/body.png');
}

/* Melhoria: Transições suaves para interações */
a, button, .menu-toggle span, .carousel-controls label {
    transition: all 0.3s ease; 
}

/* Cabeçalho */
.header {
    text-align: center;
    background-color: #0d0d0d; 
    padding: 20px;
}

/* Logo (Antiga .logo-img) */
/* Removi a classe .logo-img original para evitar conflito */

/* ===== LOGO ===== */
.logo-container .logo-img {
 width: 90px;
height: auto;
 display: block;
 /* ⚠️ REMOVEMOS O PADDING-TOP DE 60PX AQUI */
 /* padding-top: 60px; */ 
}


/* ===== HEADER NA CAPA ===== */
.header-principal {
 position: absolute;
 top: 30px;
 left: 0;
 width: 100%;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center; /* ESTÁ CORRETO! Garante o alinhamento vertical */

  /* 💡 Ajuste o padding vertical (ex: 30px topo/baixo) para criar o espaço que você queria */
 padding: 60px;
 background: transparent;
}

/* ===== LOGO ===== */
.logo-container .logo-img {
  width: 90px;
  height: auto;
}

/* ===== MENU HAMBÚRGUER ===== */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 12px;
  height: 20px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 3px;
  background-color: #d4af37; /* Dourado */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ===== MENU FECHADO ===== */
#menu-checkbox {
  display: none;
}

.menu ul,
#main-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: right 0.4s ease;
}

#main-menu-list li {
  margin: 15px 0;
}

#main-menu-list a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: color 0.3s ease;
}

#main-menu-list a:hover {
  color: #d4af37; /* Dourado ao passar o mouse */
}

/* ===== MENU ABERTO ===== */
#menu-checkbox:checked ~ #main-menu-list {
  right: 0;
}

/* ===== CAPA ===== */
.capa {
  width: 100vw;         /* largura total da tela */
  height: 95vh;         /* ocupa 95% da altura da tela */
  max-height: 100vh;    /* não ultrapassa a altura total da tela */
  position: relative;
  overflow: hidden;
  border-radius: 20px;  /* bordas arredondadas */
  border: 2px solid #d4af37; /* borda dourada */
}

.capa-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* cobre todo o container sem distorção */
  border-radius: 20px;   /* mantém o arredondamento igual ao container */
}



/* ===== RESPONSIVIDADE ===== */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  #main-menu-list {
    position: static;
    flex-direction: row;
    height: auto;
    background: transparent;
  }

  #main-menu-list a {
    color: #fff;
    margin-left: 20px;
  }

  #main-menu-list a:hover {
    color: #d4af37;
  }
}



/* -------------------- Menu -------------------- */
.menu {
    width: 100%;
    background-color: transparent; /* fundo invisível */
    position: absolute; /* sobre a capa */
    top: 0;
    left: 0;
    z-index: 1000;
    min-height: 50px;
    display: flex;
    justify-content: flex-end; /* hambúrguer à direita */
    align-items: center;
    padding: 15px 20px;
}

/* Esconde o checkbox do menu hambúrguer principal - ESSENCIAL */
#menu-checkbox {
    display: none;
}

/* Menu Toggle (Hamburguer) */
.menu-toggle {
    display: none; /* ESCONDIDO por padrão em Desktop */
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    width: 35px;
    height: 25px;
    z-index: 1021;
}

.menu-toggle span {
    height: 3px;
    width: 100%;
    background: #d4af37; /* dourado */
    margin: 4px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

/* Animação do ícone do hambúrguer (X) */
#menu-checkbox:checked + .menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#menu-checkbox:checked + .menu-toggle span:nth-child(2) {
    opacity: 0;
}
#menu-checkbox:checked + .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Lista principal do menu (Desktop) */
.menu ul#main-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* horizontal desktop */
    justify-content: center;
    background-color: transparent; /* sobre a capa */
}

/* Itens de lista do menu */
.menu li {
    position: relative;
    margin: 0 5px;
}

/* Links (botões) do menu */
.menu ul li a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s, color 0.3s;
}

.menu ul li a:hover,
.menu ul li a:focus {
    background-color: rgba(212, 175, 55, 0.15); /* dourado suave */
    color: #d4af37; /* dourado */
}

/* Dropdown (Desktop) */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #222;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 0 0 5px 5px;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    z-index: 1010;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

.dropdown-content li a {
    padding: 10px 15px;
    text-align: left;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dropdown-content li a:hover,
.dropdown-content li a:focus {
    background-color: #d4af37;
    color: #000;
}

/* ============================================== */
/* 2. RESPONSIVIDADE (MOBILE) */
@media (max-width: 768px) {

    .header-principal {
        height: 60px;
        padding: 0 15px;
    }

    .logo-img {
        height: 40px;
        width: auto;
    }

    /* O ícone do hambúrguer aparece */
    .menu-toggle {
        display: flex;
    }

    /* Esconde a lista de links por padrão em mobile */
    .menu ul#main-menu-list {
        display: flex; 
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: rgba(0,0,0,0.85);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        z-index: 999;
    }

    /* Mostra o menu principal quando o checkbox estiver marcado */
    #menu-checkbox:checked ~ ul#main-menu-list {
        max-height: 1000px; /* altura grande suficiente para todos os itens */
    }

    .menu ul li {
        width: 100%;
        margin: 0;
    }

    .menu ul li a {
        width: 100%;
        padding: 15px;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        text-align: center;
    }

    .dropdown-content {
        position: static;
        max-height: 0;
        overflow: hidden;
        background-color: #333;
        transition: max-height 0.4s ease-in-out;
        flex-direction: column;
    }

    .menu li.open .dropdown-content {
        max-height: 500px;
    }

    .dropdown-content li a {
        padding-left: 30px;
    }
}


/* -------------------- Produtos -------------------- */
.produtos {
    padding: 40px 10%;
    text-align: center;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ESCONDENDO OS DIVS DE CONTROLE DO FILTRO */
.cards-container > div[id^="filtro-"] {
    display: none; 
}

/* ESTILOS DO CARD */
.card {
    background-color: #000000; 
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #d4af37; 
    box-shadow: 0 4px 15px rgba(10, 10, 10, 0.2); 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.3s ease;
    transform: scale(1);
    
}

.card h3 {
    margin: 10px 0;
    font-size: 1.5em;
    color: white; 
}

.card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}

.preco-disponibilidade {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    color: #f5f5f5; 
}

.preco {
    font-size: 1.8em;
    font-weight: bold;
    color: white;
}

.disponibilidade {
    font-size: 0.9em;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 5px;
}

.disponivel {
    background-color: #28a745;
    color: white;
}

.indisponivel {
    background-color: #dc3545;
    color: white;
}

.btn-comprar {
    background-color: white;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 1.1em;
    text-decoration: none; /* remove a linha do link */
    display: inline-block; /* garante que padding e width funcionem bem */
    text-align: center;    /* centraliza o texto */
}


.btn-comprar:hover {
    background-color: #ff4b5c;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* -------------------- CARROSSEL -------------------- */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden; 
    border-radius: 8px;
    min-height: 350px; 
    padding-bottom: 30px; 
}

.carousel-container input {
    display: none; 
}

.carousel {
    display: flex;
    height: 100%; 
    transition: transform 0.6s ease-in-out;
}

.carousel-slide {
    min-width: 100%; 
    flex-shrink: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000; 
    padding: 10px;
}

.carousel img,
.carousel video {
    max-width: 100%;
    max-height: 300px; 
    width: auto; 
    height: auto;
    object-fit: contain;
    display: block; 
    border-radius: 8px; 
}

/* CSS Puro Compactado (Ainda 275 linhas de regras, mas sem espaços e comentários) */

/* Carrossel 1-55 */
#slide1:checked~.carousel,#slide6:checked~.carousel,#slide11:checked~.carousel,#slide16:checked~.carousel,#slide21:checked~.carousel,#slide26:checked~.carousel,#slide31:checked~.carousel,#slide36:checked~.carousel,#slide41:checked~.carousel,#slide46:checked~.carousel,#slide51:checked~.carousel,#slide56:checked~.carousel,#slide61:checked~.carousel,#slide66:checked~.carousel,#slide71:checked~.carousel,#slide76:checked~.carousel,#slide81:checked~.carousel,#slide86:checked~.carousel,#slide91:checked~.carousel,#slide96:checked~.carousel,#slide101:checked~.carousel,#slide106:checked~.carousel,#slide111:checked~.carousel,#slide116:checked~.carousel,#slide121:checked~.carousel,#slide126:checked~.carousel,#slide131:checked~.carousel,#slide136:checked~.carousel,#slide141:checked~.carousel,#slide146:checked~.carousel,#slide151:checked~.carousel,#slide156:checked~.carousel,#slide161:checked~.carousel,#slide166:checked~.carousel,#slide171:checked~.carousel,#slide176:checked~.carousel,#slide181:checked~.carousel,#slide186:checked~.carousel,#slide191:checked~.carousel,#slide196:checked~.carousel,#slide201:checked~.carousel,#slide206:checked~.carousel,#slide211:checked~.carousel,#slide216:checked~.carousel,#slide221:checked~.carousel,#slide226:checked~.carousel,#slide231:checked~.carousel,#slide236:checked~.carousel,#slide241:checked~.carousel,#slide246:checked~.carousel,#slide251:checked~.carousel,#slide256:checked~.carousel,#slide261:checked~.carousel,#slide266:checked~.carousel,#slide271:checked~.carousel{transform:translateX(0%);}
#slide2:checked~.carousel,#slide7:checked~.carousel,#slide12:checked~.carousel,#slide17:checked~.carousel,#slide22:checked~.carousel,#slide27:checked~.carousel,#slide32:checked~.carousel,#slide37:checked~.carousel,#slide42:checked~.carousel,#slide47:checked~.carousel,#slide52:checked~.carousel,#slide57:checked~.carousel,#slide62:checked~.carousel,#slide67:checked~.carousel,#slide72:checked~.carousel,#slide77:checked~.carousel,#slide82:checked~.carousel,#slide87:checked~.carousel,#slide92:checked~.carousel,#slide97:checked~.carousel,#slide102:checked~.carousel,#slide107:checked~.carousel,#slide112:checked~.carousel,#slide117:checked~.carousel,#slide122:checked~.carousel,#slide127:checked~.carousel,#slide132:checked~.carousel,#slide137:checked~.carousel,#slide142:checked~.carousel,#slide147:checked~.carousel,#slide152:checked~.carousel,#slide157:checked~.carousel,#slide162:checked~.carousel,#slide167:checked~.carousel,#slide172:checked~.carousel,#slide177:checked~.carousel,#slide182:checked~.carousel,#slide187:checked~.carousel,#slide192:checked~.carousel,#slide197:checked~.carousel,#slide202:checked~.carousel,#slide207:checked~.carousel,#slide212:checked~.carousel,#slide217:checked~.carousel,#slide222:checked~.carousel,#slide227:checked~.carousel,#slide232:checked~.carousel,#slide237:checked~.carousel,#slide242:checked~.carousel,#slide247:checked~.carousel,#slide252:checked~.carousel,#slide257:checked~.carousel,#slide262:checked~.carousel,#slide267:checked~.carousel,#slide272:checked~.carousel{transform:translateX(-100%);}
#slide3:checked~.carousel,#slide8:checked~.carousel,#slide13:checked~.carousel,#slide18:checked~.carousel,#slide23:checked~.carousel,#slide28:checked~.carousel,#slide33:checked~.carousel,#slide38:checked~.carousel,#slide43:checked~.carousel,#slide48:checked~.carousel,#slide53:checked~.carousel,#slide58:checked~.carousel,#slide63:checked~.carousel,#slide68:checked~.carousel,#slide73:checked~.carousel,#slide78:checked~.carousel,#slide83:checked~.carousel,#slide88:checked~.carousel,#slide93:checked~.carousel,#slide98:checked~.carousel,#slide103:checked~.carousel,#slide108:checked~.carousel,#slide113:checked~.carousel,#slide118:checked~.carousel,#slide123:checked~.carousel,#slide128:checked~.carousel,#slide133:checked~.carousel,#slide138:checked~.carousel,#slide143:checked~.carousel,#slide148:checked~.carousel,#slide153:checked~.carousel,#slide158:checked~.carousel,#slide163:checked~.carousel,#slide168:checked~.carousel,#slide173:checked~.carousel,#slide178:checked~.carousel,#slide183:checked~.carousel,#slide188:checked~.carousel,#slide193:checked~.carousel,#slide198:checked~.carousel,#slide203:checked~.carousel,#slide208:checked~.carousel,#slide213:checked~.carousel,#slide218:checked~.carousel,#slide223:checked~.carousel,#slide228:checked~.carousel,#slide233:checked~.carousel,#slide238:checked~.carousel,#slide243:checked~.carousel,#slide248:checked~.carousel,#slide253:checked~.carousel,#slide258:checked~.carousel,#slide263:checked~.carousel,#slide268:checked~.carousel,#slide273:checked~.carousel{transform:translateX(-200%);}
#slide4:checked~.carousel,#slide9:checked~.carousel,#slide14:checked~.carousel,#slide19:checked~.carousel,#slide24:checked~.carousel,#slide29:checked~.carousel,#slide34:checked~.carousel,#slide39:checked~.carousel,#slide44:checked~.carousel,#slide49:checked~.carousel,#slide54:checked~.carousel,#slide59:checked~.carousel,#slide64:checked~.carousel,#slide69:checked~.carousel,#slide74:checked~.carousel,#slide79:checked~.carousel,#slide84:checked~.carousel,#slide89:checked~.carousel,#slide94:checked~.carousel,#slide99:checked~.carousel,#slide104:checked~.carousel,#slide109:checked~.carousel,#slide114:checked~.carousel,#slide119:checked~.carousel,#slide124:checked~.carousel,#slide129:checked~.carousel,#slide134:checked~.carousel,#slide139:checked~.carousel,#slide144:checked~.carousel,#slide149:checked~.carousel,#slide154:checked~.carousel,#slide159:checked~.carousel,#slide164:checked~.carousel,#slide169:checked~.carousel,#slide174:checked~.carousel,#slide179:checked~.carousel,#slide184:checked~.carousel,#slide189:checked~.carousel,#slide194:checked~.carousel,#slide199:checked~.carousel,#slide204:checked~.carousel,#slide209:checked~.carousel,#slide214:checked~.carousel,#slide219:checked~.carousel,#slide224:checked~.carousel,#slide229:checked~.carousel,#slide234:checked~.carousel,#slide239:checked~.carousel,#slide244:checked~.carousel,#slide249:checked~.carousel,#slide254:checked~.carousel,#slide259:checked~.carousel,#slide264:checked~.carousel,#slide269:checked~.carousel,#slide274:checked~.carousel{transform:translateX(-300%);}
#slide5:checked~.carousel,#slide10:checked~.carousel,#slide15:checked~.carousel,#slide20:checked~.carousel,#slide25:checked~.carousel,#slide30:checked~.carousel,#slide35:checked~.carousel,#slide40:checked~.carousel,#slide45:checked~.carousel,#slide50:checked~.carousel,#slide55:checked~.carousel,#slide60:checked~.carousel,#slide65:checked~.carousel,#slide70:checked~.carousel,#slide75:checked~.carousel,#slide80:checked~.carousel,#slide85:checked~.carousel,#slide90:checked~.carousel,#slide95:checked~.carousel,#slide100:checked~.carousel,#slide105:checked~.carousel,#slide110:checked~.carousel,#slide115:checked~.carousel,#slide120:checked~.carousel,#slide125:checked~.carousel,#slide130:checked~.carousel,#slide135:checked~.carousel,#slide140:checked~.carousel,#slide145:checked~.carousel,#slide150:checked~.carousel,#slide155:checked~.carousel,#slide160:checked~.carousel,#slide165:checked~.carousel,#slide170:checked~.carousel,#slide175:checked~.carousel,#slide180:checked~.carousel,#slide185:checked~.carousel,#slide190:checked~.carousel,#slide195:checked~.carousel,#slide200:checked~.carousel,#slide205:checked~.carousel,#slide210:checked~.carousel,#slide215:checked~.carousel,#slide220:checked~.carousel,#slide225:checked~.carousel,#slide230:checked~.carousel,#slide235:checked~.carousel,#slide240:checked~.carousel,#slide245:checked~.carousel,#slide250:checked~.carousel,#slide255:checked~.carousel,#slide260:checked~.carousel,#slide265:checked~.carousel,#slide270:checked~.carousel,#slide275:checked~.carousel{transform:translateX(-400%);}




/* ... Continue para os demais slides, ajustando o nth-of-type no carousel-controls abaixo */

/* -------------------- CONTROLES (BOLINHAS) POSICIONAMENTO CORRIGIDO -------------------- */
.carousel-controls {
    display: flex;
    justify-content: center;
    position: absolute; 
    bottom: 5px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 100; 
    width: 100%;
    padding: 5px 0; 
}

.carousel-controls label {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid transparent; 
    position: relative; 
    z-index: 101; 
}

.carousel-controls label:hover {
    background: #a6a6a6;
}

/* Estilo do indicador ativo */
/* A numeração de nth-of-type deve corresponder à ordem real das labels no HTML */
#slide1:checked ~ .carousel-controls label:nth-of-type(1), 
#slide2:checked ~ .carousel-controls label:nth-of-type(2), 
#slide3:checked ~ .carousel-controls label:nth-of-type(3), 
#slide4:checked ~ .carousel-controls label:nth-of-type(4), 
#slide5:checked ~ .carousel-controls label:nth-of-type(5),
#slide6:checked ~ .carousel-controls label:nth-of-type(6), 
#slide7:checked ~ .carousel-controls label:nth-of-type(7), 
#slide8:checked ~ .carousel-controls label:nth-of-type(8), 
#slide9:checked ~ .carousel-controls label:nth-of-type(9), 
#slide10:checked ~ .carousel-controls label:nth-of-type(10),
#slide11:checked ~ .carousel-controls label:nth-of-type(11), 
#slide12:checked ~ .carousel-controls label:nth-of-type(12), 
#slide13:checked ~ .carousel-controls label:nth-of-type(13), 
#slide14:checked ~ .carousel-controls label:nth-of-type(14), 
#slide15:checked ~ .carousel-controls label:nth-of-type(15) {
    background: #e63946; border-color: #e63946; transform: scale(1.2);
}
/* ... Continue para os demais slides */


/* -------------------- LÓGICA DE FILTRO DE CATEGORIA VIA CSS (TARGET) -------------------- */

/* 1. Esconder todos os cards por padrão (exceto se a categoria for a única a ser exibida) */
.cards-container .card { 
    display: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.3s ease; 
}

/* 2. Mostrar TUDO quando o link "Ver Todos" for clicado (que tem id="filtro-todos") */
#filtro-todos:target ~ .cards-container .card { /* Target no elemento certo */
    display: flex;
    opacity: 1;
    transform: scale(1);
}

/* 3. Mostrar a categoria específica quando o link correspondente for clicado */
/* Certifique-se de que os divs de filtro (com id="filtro-...") são irmãos do cards-container */
/* Ou que os links de filtro apontam para o cards-container e você usa data-attributes */
/* Se a estrutura HTML for:
<div id="filtro-dragonball"></div>
<div class="cards-container">
    <div class="card" data-category="dragonball">...</div>
</div>
Então o seletor `~ .cards-container .card[data-category="dragonball"]` é o correto.
*/
#filtro-dragonball:target ~ .cards-container .card[data-category="dragonball"],
#filtro-onepiece:target ~ .cards-container .card[data-category="onepiece"],
#filtro-demonslayer:target ~ .cards-container .card[data-category="demonslayer"],
#filtro-pokemon:target ~ .cards-container .card[data-category="pokemon"],
#filtro-hunterxhunter:target ~ .cards-container .card[data-category="hunterxhunter"],
#filtro-yuyuhakusho:target ~ .cards-container .card[data-category="yuyuhakusho"],
#filtro-naruto:target ~ .cards-container .card[data-category="naruto"],
#filtro-digimon:target ~ .cards-container .card[data-category="digimon"],
#filtro-cdz:target ~ .cards-container .card[data-category="cdz"],
#filtro-dandadan:target ~ .cards-container .card[data-category="dandadan"],
#filtro-kaiju:target ~ .cards-container .card[data-category="kaiju"],
#filtro-carta:target ~ .cards-container .card[data-category="carta"],
#filtro-chaveiro:target ~ .cards-container .card[data-category="chaveiro"] {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

/* 4. Estado padrão (sem filtro ativo): Mostrar todos */
/* Esta regra garante que os cards apareçam na carga inicial se não houver #hash na URL */
.cards-container:not(:target) .card {
    display: flex;
    opacity: 1;
    transform: scale(1);
}
/* Se você tiver um <div id="filtros"> que engloba tudo, esta regra pode ser mais específica: */
/* #filtros:not(:target) ~ .cards-container .card {
    display: flex;
    opacity: 1;
    transform: scale(1);
} */


/* -------------------- RESPONSIVIDADE (Menu Hambúrguer e Geral) -------------------- */
@media (max-width: 768px) {
    /* Capa - Ajustes para Mobile */
    

    .produtos {
        padding: 20px 5%; 
    }

    .cards-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    /* Menu Mobile - Layout da barra superior */
    .menu {
        display: flex;
        justify-content: flex-end; /* Hambúrguer à direita, se não tiver logo */
        align-items: center;
        height: 60px;
        padding: 0 20px;
    }
}
    
/* Regras para Desktop (telas maiores que 769px) */
@media (min-width: 769px) {
    .menu-toggle {
        display: none; /* Esconde o ícone do hambúrguer em desktop */
    }
    .menu ul#main-menu-list {
        display: flex; /* Garante que o menu principal seja flex (horizontal) */
        justify-content: center;
        align-items: center;
    }
    .menu ul li a {
        margin: 0 5px; /* Espaçamento horizontal entre os botões */
    }
    .menu ul li:last-child a {
        margin-right: 0;
    }
    /* Dropdown em desktop */
    .dropdown-content {
        position: absolute; /* Volta a ser absoluto para desktop */
    }
    .dropdown-content li a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador */
        margin: 0;
        padding-left: 15px; /* Volta ao padding padrão */
    }
}

  

  /* Produtos centralizados */
  .produtos {
    padding: 20px;
  }

  .cards-container {
    display: grid;
    grid-template-columns: 1fr; /* Um card por linha */
    gap: 20px;
    justify-items: center;
  }

  .card {
    width: 90%;
    max-width: 340px;
    margin: 0 auto;
  }

  .card h3 {
    font-size: 1.3em;
  }

  .preco {
    font-size: 1.6em;
  }

  /* Corrige o carrossel para ocupar a tela */
  .carousel-container {
    min-height: 250px;
  }

  .carousel img,
  .carousel video {
    max-height: 220px;
    object-fit: contain;
  }

  /* Corrige os pontos do carrossel (bolinhas) */
  .carousel-controls {
    bottom: 0;
    gap: 5px;
  }



/*--------------------imagem unitaria
/* Novo contêiner para a imagem única, replicando as propriedades do .carousel-container */
.card-image-single {
    /* Propriedades IGUAIS ao .carousel-container */
    position: relative;
    width: 100%;
    overflow: hidden; 
    border-radius: 8px; /* MANTÉM OS CANTOS ARREDONDADOS */
    min-height: 350px; /* 👈 ESSENCIAL: IGUALA A ALTURA DOS CARROSSEIS */
    padding-bottom: 30px; 
}

/* Garante que a imagem preencha todo o espaço do contêiner */
.card-image-single img {
    width: 100%;
    height: 100%;
    /* Garante que a imagem cubra o contêiner sem distorção, mas pode cortar bordas */
    object-fit: cover; 
    display: block;
}