/* Reset e base */
* {
    margin: 0;
    padding: 0;
    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;
}

/* 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 img {
    max-width: 200px; 
    height: auto;
    margin-bottom: 15px;
}

/* -------------------- Capa - Corrigida para Mobile e Desktop -------------------- */
/* ======== CAPA RESPONSIVA ======== */
/* ======== CAPA AJUSTADA ======== */
.capa {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

/* Faz o <picture> preencher corretamente */
.capa picture {
  width: 100%;
  display: block;
}

/* Garante que a imagem apareça em todas as telas */
.capa-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  min-height: 250px; /* evita altura zero */
}

/* Alturas adaptadas */
@media (min-width: 1025px) {
  .capa-img {
    max-height: 450px;
  }
}

@media (max-width: 1024px) {
  .capa-img {
    max-height: 380px;
  }
}

@media (max-width: 480px) {
  .capa-img {
    max-height: 320px;
    object-position: center top;
  }
}


/* -------------------- Menu -------------------- */
/* ============================================== */
/* ============================================== */
/* -------------------- Menu -------------------- */
/* ============================================== */
.menu {
    width: 100%; 
    background-color: #222;
    position: relative;
    z-index: 1000;
    min-height: 50px;
}

/* 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;
    padding: 10px;
    position: relative; 
    z-index: 1021;
    width: 40px; 
    height: 40px; 
}

.menu-toggle span {
    height: 3px;
    width: 100%; 
    background: white; 
    margin: 3px 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(6px) rotate(45deg);
}
#menu-checkbox:checked + .menu-toggle span:nth-child(2) {
    opacity: 0;
}
#menu-checkbox:checked + .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Lista principal do menu (Desktop) */
.menu ul#main-menu-list {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: flex; /* Menu horizontal em desktop */
    justify-content: center;
    background-color: #222;
}

/* 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; 
    border: 1px solid #ffffff; 
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center; 
}

.menu ul li a:hover,
.menu ul li a:focus {
    background-color: rgba(255, 255, 255, 0.15); 
    color: #e63946; 
    border-color: #e63946; 
}

/* Dropdown (Desktop) */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; 
    background-color: #333;
    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;
}

/* Ativação do Dropdown no Desktop (Hover e Focus) */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* Links dentro do dropdown */
.dropdown-content li a {
    padding: 10px 15px;
    border: none; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 0; 
    margin: 0;
    text-align: left; 
    border: none; 
}

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


/* ============================================== */
/* 2. RESPONSIVIDADE (MOBILE)                     */
/* ============================================== */
@media (max-width: 768px) {
    /* Configuração da barra do menu em mobile (Hambúrguer) */
    .menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 60px;
        padding: 0 20px;
    }

    /* 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: none; 
        flex-direction: column;
        width: 100%;
        text-align: center; 
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #1a1a1a; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.7);
        z-index: 999; 
        padding: 0;
    }
    
    /* Mostra o menu principal quando o checkbox estiver marcado */
    #menu-checkbox:checked ~ ul#main-menu-list {
        display: flex; 
    }

    /* Links do menu em mobile - Ocupam a largura total */
    .menu ul li {
        width: 100%;
        margin: 0;
    }

    .menu ul li a {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
        margin: 0; 
        padding: 12px 15px; 
        width: 100%; 
    }

    .menu ul li:last-child a {
        border-bottom: none;
    }
    
    /* 💥 CONTROLE DO DROPDOWN PELO JAVASCRIPT 💥 */
    .dropdown-content {
        /* Configuração base para o dropdown no mobile */
        display: flex; 
        flex-direction: column;
        position: static; 
        min-width: 100%;
        border-radius: 0;
        background-color: #3a3a3a;
        box-shadow: none;
        
        /* Oculto por padrão, preparado para a animação do JS */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }
    
    /* 💥 CORREÇÃO CRÍTICA ADICIONADA: Permite que o JS use o max-height 💥 */
    /* Esta regra é essencial para o JavaScript funcionar corretamente no mobile */
    .menu li.open .dropdown-content {
        /* O JavaScript define o max-height. Deixamos o bloco aqui para garantir a especificidade. */
    }
    
    /* Regra de segurança: Desativa o hover que trava o mobile */
    .dropdown:hover .dropdown-content {
        display: none; 
    }
    
    .dropdown-content li a {
        padding-left: 40px; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
    }
}



/* -------------------- 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 white; 
    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;
}

.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 */
    .capa {
        height: 250px; /* Altura menor para a capa no mobile */
        border-radius: 0; /* Remove border-radius para ocupar toda a largura */
    }

    .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 */
    }
}
/* -------------------- RESPONSIVIDADE -------------------- */

/* Telas menores que 768px (mobile e tablets pequenos) */
@media (max-width: 768px) {

  /* Cabeçalho e logo */
  .header {
    padding: 15px;
  }

  .logo img {
    max-width: 150px;
  }

  /* Capa ajustada para mobile */
  .capa {
    height: auto; /* Deixa a altura se ajustar automaticamente */
    max-height: 280px;
    border-radius: 0;
  }

  .capa picture,
  .capa picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Mostra bem a imagem em celular */
    border-radius: 0;
  }

  

  

  /* 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;
}