/* =========================================================
   Tema Azul (extraído de index.html)
   ========================================================= */
:root{
  --primary-50:#eef5ff;
  --primary-100:#edeff3;
  --primary-200:#b7d5ff;
  --primary-300:#000103;
  --primary-400:#33b0f8;
  --primary-500:#06ece1; /* cor do Botão principal*/
  --primary-600:#1557d9;
  --primary-700:#ffffff;
  --primary-800:#e1ecee;
  --primary-900:#f1f2f3;

  --bg:#0d1014;
  --bg-contrast:#0f172a;
  --card:#0b1220;
  --muted:#ebeef1;
  --text:#f2f4f8;
  --white:#ffffff;
  --success:#ebf0ef;
  --warning:#f4c152;
  --danger:#d66161; /* só para estados; não usado como marca */
  --shadow: 0 10px 30px rgb(12, 229, 245);/*cor das sombras*/
  color:var(--text);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;
  --container: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background: linear-gradient(180deg, #022164 0%, hsla(207, 19%, 73%, 0.767) 100%);/*cor de fundo principal*/
  color:var(--text rgb(200, 19, 224));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/*Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(10, 14, 19, 0.514);/*cor de fundo do cabeçalho*/
  color:var(--text);
  border-bottom:1px solid rgba(247, 242, 242, 0.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px;
}
.brand-badge{
  width:36px; height:36px; border-radius:12px;
  background:linear-gradient(200deg, rgba(190, 238, 241, 0.76), #7b03aa); /* cor do quadrado do logo */
  display:grid; place-items:center; color:var(--white); font-weight:900;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.brand-badge.logo{
  background: #0b1220 url("img/Logo/Diamante_etiquetas.jpg") center center / contain no-repeat;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
.brand-logo{display:none;}
nav ul{display:flex; gap:10px; list-style:none; margin:0; padding:0} /* ALTERADO: reduzido o espaçamento entre itens do menu */
nav a{
  display:inline-block; padding:8px 8px; font-weight:600; color:#f8f3f3;/*cor das palavras do cabeçalho*/
  color:var(--text);
}
nav a:hover{color:var(--white)}
/* gap é o espaçamento entre os botões do canto direito superior */
.actions{display:flex; align-items:center; gap:20px}
.btn{
  --bg:var(--primary-500);
  --bg-hover:var(--primary-600);
  --border:transparent;
  padding:3px 13px; border-radius:100px; margin-top: 3px; border:3px solid var(--border);
  /* padding é o verticalmente o tamanho dos botões */
  /* px altera a largura dos botões */
  /* border:3px solid var(--border) adiciona uma borda ao botão */
   /* margin-top: 10px cria uma margem de topo acima dos botões */
  background:var(--bg); color:var(--white); font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(190, 238, 241, 0.76);
  /* box shadow é a sombra do botão e a cor da sombra */
  transition:.2s ease;
}
.btn:hover{background:var(--bg-hover); transform:translateY(-1px)}
.btn-outline{
  --bg:rgb(119, 141, 141) ; --bg-hover:rgb(238, 245, 227);/*cor do quadrado das palavra Selecionar*/
  --border:rgb(229, 236, 243);/*cor das bordas do Selecionar da sessão de Destaques*/
  color:#e5e5ec; box-shadow:none;/*cor das palavras do botão outline*/
  color:var(--text);
}
.hamburger{display:none; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px; background:transparent; color:#cbd5e1}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(97, 158, 219, 0.25), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, rgba(17,71,173,.25), transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; padding:72px 0}
.kicker{color:#a5b4fc; font-weight:700; font-size:.85rem; letter-spacing:.25px; text-transform:uppercase}
.hero h1{margin:.25rem 0 1rem; font-weight:800; font-size:clamp(2rem,4vw,3rem); line-height:1.1}
.hero p{color:#c8d3ea; font-size:1.05rem}
.hero-cta{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.stat{
  /* margin do topo da sessão de destaques */
  /* gap é o espaço entre os botões da aba inicial */
  display:flex; align-items:center; gap:5px; margin-top:80px; color:#eaedf1; font-weight:600
   /* color é a cor do texto de entrega rapida */
}
.hero-card{
  background:linear-gradient(180deg, rgba(16,26,54,.9), rgba(12,21,44,.9));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow)
}
.hero-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:5px;
  /* margin do topo da sessão de destaques */
  /* gap é o espaçamento entre os itens */
}
.mini{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:16px
}
.mini h4{margin:0 0 6px; font-size:1rem}
.mini p{margin:0; color:#b4c3df; font-size:.95rem}

/* Section */
section{padding:35px 0}
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px}
.section-title h2{margin:0; font-size:1.8rem}
.section-sub{margin:0 0 28px; color:#f7fafd}
/* cor do texto abaixo do título da sessão */

/* Produtos (categorias) */
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
}
.card{
  background:linear-gradient(180deg,#020c64,#37460159);
   /*background é a cor do quadrado da sessão de produtos*/
  border:1px solid rgba(238, 243, 247, 0.966); border-radius:var(--radius);
   /* border é a cor da borda do quadrado da sessão de produtos*/
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column
}
.card-media{
  aspect-ratio: 16/9;
  background:
    radial-gradient(800px 200px at -10% 0%, rgba(25, 31, 105, 0.575), transparent 50%),
     /* radial-gradient é a cor do quadrado da imagem do produto */
    linear-gradient(135deg, rgba(155, 189, 2, 0.3), rgba(56, 83, 151, 0.699));
    /* linear-gradient é a cor do quadrado da imagem do produto */
  display:grid; place-items:center; color:#d8d1c5; font-weight:800; letter-spacing:.5px; font-size:1.1rem;
}
.card-body{padding:16px}
.pill{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem;
  color:#09bcdb; background:rgba(64, 64, 117, 0.973); border:1px solid rgb(141, 156, 185);
  /*  color é a cor do texto dentro do quadrado da sessão de produtos */
  /* background é a cor do quadrado da sessão de produtos */
  /* border é a cor da borda do quadrado da sessão de produtos */
  padding:6px 10px; border-radius:999px; font-weight:700;
}
.card h3{margin:10px 0 6px; font-size:1.1rem}
.card p{margin:0 0 14px; color:#b7c6e5}
.card .actions{margin-top:auto}

/* Como Funciona */
.steps{
  display:grid; gap:18px; grid-template-columns:repeat(4,1fr);
}
.step{
  background:linear-gradient(180deg,#0f1b36,#0c162d);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:18px;
}
.step h4{margin:12px 0 6px}
.icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary-600),var(--primary-400)); color:white;

}
/* Depoimentos */
.testimonials{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.quote{
  background:linear-gradient(180deg,#0f1b36,#0c162d);
  position:relative;
}
.quote p{margin:0 0 12px; color:#c5d3ee}
.quote .author{font-weight:700}
.stars{color:#ffd479}

/* Rodapé */
.footer{
  background:#0a1224; border-top:1px solid rgba(255,255,255,.06);
  margin-top:40px; padding-top:48px; padding-bottom:40px
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
.footer h5{margin:0 0 10px; font-size:1rem}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.small{color:#9fb0d3; font-size:.92rem}

/* =========================================================
   RESPONSIVIDADE - Adaptação para diferentes dispositivos
   ========================================================= */

/* Desktop grande - Sem alterações (layout padrão) */
@media (max-width: 1024px){
  .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}
}

/* =========================================================
   TABLET (853px-1280px) 
   Zoom: 67% - Mantém dimensões padrão do tablet
   ========================================================= */
@media (min-width: 853px) and (max-width: 1280px){
  /* Aplica zoom de 67% em todo o HTML e BODY para visualização tablet */
  html, body {
    zoom: 67%; /* ZOOM 67% - Reduz 33% do tamanho para melhor visualização */
    transform-origin: top left; /* Origem da transformação no canto superior esquerdo */
    width: 100%; /* Mantém largura 100% do viewport */
  }
  /* Grid com 3 colunas para tablets - mostra mais produtos por linha */
  .grid{grid-template-columns:repeat(3,1fr); gap:16px}
  /* Steps (Como funciona) com 2 colunas em tablets */
  .steps{grid-template-columns:repeat(2,1fr)}
  /* Depoimentos em 1 coluna */
  .testimonials{grid-template-columns:repeat(2,1fr)}
  /* Hero section em 1 coluna (título + imagem empilhados) */
  .hero-inner{grid-template-columns:1fr}
  /* Footer com 2 colunas em tablets */
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   MOBILE GRANDE (481px-852px) 
   Zoom: 67% - Simula dimensões de tablet em celulares grandes
   ========================================================= */
@media (min-width: 481px) and (max-width: 852px){
  /* ALTERADO: Força largura de 1280px para simular visualização tablet */
  html, body {
    width: 1280px; /* MODIFICADO: Define largura fixa em 1280px (dimensão tablet) */
    zoom: 67%; /* ADICIONADO: Zoom 67% para caber na tela do celular grande */
    transform-origin: top left; /* ADICIONADO: Origem da transformação no canto superior esquerdo */
  }
  /* ADICIONADO: Grid com 3 colunas como tablet - melhor aproveitamento de espaço */
  .grid{grid-template-columns:repeat(3,1fr); gap:16px}
  /* ADICIONADO: Steps com 2 colunas (como funciona) */
  .steps{grid-template-columns:repeat(2,1fr)}
  /* ADICIONADO: Mantém visual tablet */
  .testimonials{grid-template-columns:repeat(2,1fr)}
  /* ADICIONADO: Hero em 1 coluna */
  .hero-inner{grid-template-columns:1fr}
  /* ADICIONADO: Footer com 2 colunas */
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   MOBILE PEQUENO (até 480px) 
   Zoom: 67% - Simula dimensões de tablet em celulares pequenos
   ========================================================= */
@media (max-width: 480px){
  /* ALTERADO: Força largura de 1280px como tablet em celulares pequenos */
  html, body {
    width: 1280px; /* MODIFICADO: Define largura fixa em 1280px (dimensão tablet) */
    zoom: 67%; /* ADICIONADO: Zoom 67% para caber em telas pequenas */
    transform-origin: top left; /* ADICIONADO: Origem da transformação no canto superior esquerdo */
  }
  /* ADICIONADO: Grid com 3 colunas - mesma experiência tablet */
  .grid{grid-template-columns:repeat(3,1fr); gap:16px}
  /* ADICIONADO: Steps em 1 coluna em telas muito pequenas */
  .steps{grid-template-columns:1fr}
  /* ADICIONADO: Container de produtos com flex-direction column */
  .product-container{
    display:flex; /* ADICIONADO: Usa flexbox para layout */
    width:100%; /* ADICIONADO: Largura 100% */
    justify-content:space-around; /* ADICIONADO: Distribui espaço uniformemente */
    flex-direction:column; /* ADICIONADO: Empilha itens verticalmente */
  }
  /* ADICIONADO: Ajusta bordas dos cards */
  .card{
    border-radius:12px; /* ADICIONADO: Borda arredondada 12px */
  }
  /* ADICIONADO: Reduz padding interno dos cards */
  .card-body{padding:12px} /* ADICIONADO: Padding reduzido para 12px */
  /* ADICIONADO: Tamanho de fonte responsivo para título */
  /* ADICIONADO: Tamanho de fonte para descrição */
  .hero p{font-size:1rem} /* ADICIONADO: Font-size 1rem */
  /* ADICIONADO: Espaçamento reduzido para seções */
  section{padding:18px 0} /* ADICIONADO: Padding vertical 18px */
  /* ADICIONADO: Footer com 2 colunas */
  .footer-grid{grid-template-columns:repeat(2,1fr)} /* ADICIONADO: 2 colunas no footer */
}

/* Tablet e Mobile médio - Layout intermediário */
@media (max-width: 768px){
  .grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .steps{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .hero-inner{padding:48px 0}
  .hero-cta{gap:8px}
  .container{padding:0 16px}
  section{padding:24px 0}
}

/* Mobile - Menu hamburger ativo */
@media (max-width: 720px){
  nav{display:none} /* Esconde navegação desktop */
  .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 */
  }
}

/* =========================================================
   Modal de Zoom para Imagens
   ========================================================= */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  cursor: pointer;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
}

/* =========================================================
   Estilos para o Sistema de Carrinho
   ========================================================= */
.product-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #33b0f8;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.product-checkbox:hover {
  border-color: #06ece1;
}

.product-checkbox:checked {
  background: linear-gradient(135deg, #06ece1, #33b0f8);
  border-color: #06ece1;
}

.product-checkbox:checked::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

#cartBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cartCount {
  animation: pulse 0.3s ease-out;
}

@keyframes pulse {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* --- CONFIGURAÇÃO PARA MOBILE --- */
@media (max-width: 768px){ /* ALTERADO (marcação) */
  .grid{grid-template-columns:repeat(2,1fr); gap:14px} /* ALTERADO */
  .steps{grid-template-columns:1fr} /* ALTERADO */
  .testimonials{grid-template-columns:1fr} /* ALTERADO */
  .hero-inner{padding:48px 0} /* ALTERADO */
  .hero-cta{gap:8px} /* ALTERADO */
  .container{padding:0 16px} /* ALTERADO */
  section{padding:24px 0} /* ALTERADO */
}

/* --- CONFIGURAÇÃO PARA DESKTOP --- */
@media (min-width: 769px) {
    .hamburger {
        display: none ; /* Esconde o botão ☰ no computador */
    }
    nav[aria-label="Principal"] {
        display: block ; /* Garante que o menu apareça no computador */
    }
}

/* --- CONFIGURAÇÃO PARA MOBILE (menu toggle) --- */
@media (max-width: 768px) { /* ALTERADO */
    /* Esconde a navegação padrão no mobile */
    nav[aria-label="Principal"] { /* ALTERADO */
        display: none; /* ALTERADO */
        position: absolute; /* ALTERADO */
        top: 80px; /* Ajuste conforme a altura do seu header */ /* ALTERADO */
        left: 0; /* ALTERADO */
        width: 100%; /* ALTERADO */
        background-color: #0b1326; /* Cor escura do seu tema */ /* ALTERADO */
        padding: 20px 0; /* ALTERADO */
        z-index: 1000; /* ALTERADO */
        border-bottom: 2px solid; /* ALTERADO */
    }

    /* Quando o menu estiver ativo (via JS), ele aparece */
    nav[aria-label="Principal"] ul { /* ALTERADO */
        display: block; /* ALTERADO */
    }

    /* Ajusta a lista de links para ficar vertical no celular */
    nav[aria-label="Principal"] ul { /* ALTERADO */
        flex-direction: column; /* ALTERADO */
        align-items: center; /* ALTERADO */
        gap: 20px; /* ALTERADO */
        padding: 0; /* ALTERADO */
    }

    nav[aria-label="Principal"] ul li a { /* ALTERADO */
        font-size: 1.2rem; /* ALTERADO */
        display: block; /* ALTERADO */
        width: 100%; /* ALTERADO */
        text-align: center; /* ALTERADO */
    }

    /* Garante que o botão hambúrguer apareça apenas no mobile */
    .hamburger { /* ALTERADO */
        display: block ; /* ALTERADO */
        font-size: 2rem; /* ALTERADO */
        background: none; /* ALTERADO */
        border: none; /* ALTERADO */
        color: white; /* ALTERADO */
        cursor: pointer; /* ALTERADO */
    }

    /* Esconde o menu de texto no mobile para não bagunçar o topo */
    .header-inner nav { /* ALTERADO */
        order: 3; /* ALTERADO */
    }
}

/* --- CONFIGURAÇÃO PARA DESKTOP (garante menu visível) --- */
@media (min-width: 769px) {
    .hamburger {
        display: none ; /* Esconde o botão ☰ no computador */
    }
    nav[aria-label="Principal"] {
        display: block ; /* Garante que o menu apareça no computador */
    }
}