/* ===========================
   RESET E CONFIGURAÇÕES BASE
   =========================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  :root {
    /* Cores principais */
    --cor-laranja-principal: #FF6B35;
    --cor-laranja-escuro: #E85A28;
    --cor-laranja-claro: #FF8C61;
    --cor-branco-puro: #FFFFFF;
    --cor-cinza-claro: #F5F5F5;
    --cor-cinza-medio: #E0E0E0;
    --cor-cinza-escuro: #666666;
    --cor-preto-texto: #222222;
  
    /* Sombras */
    --sombra-leve: 0 2px 8px rgba(0,0,0,.1);
    --sombra-media: 0 4px 16px rgba(0,0,0,.15);
    --sombra-forte: 0 8px 24px rgba(0,0,0,.2);
  
    /* Transições */
    --transicao-rapida: .2s ease;
    --transicao-media: .3s ease;
    --transicao-lenta: .5s ease;
  
    /* Espaçamentos */
    --espacamento-pequeno: 1rem;
    --espacamento-medio: 2rem;
    --espacamento-grande: 4rem;
  }
  
  html { scroll-behavior: smooth; }
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--cor-preto-texto);
    background-color: var(--cor-branco-puro);
    overflow-x: hidden;
  }
  
  /* ===========================
     ANIMAÇÕES GLOBAIS
     =========================== */
  @keyframes animacao-deslizar-cima {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes animacao-deslizar-esquerda {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes animacao-deslizar-direita {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes animacao-fade-entrada {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes animacao-pulsar {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
  }
  @keyframes animacao-rotacao-suave {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  
  /* Classes de animação */
  .animacao-entrada-esquerda { animation: animacao-deslizar-esquerda .8s ease forwards; }
  .animacao-entrada-direita  { animation: animacao-deslizar-direita  .8s ease forwards; }
  .animacao-fade-in          { animation: animacao-fade-entrada     .6s ease forwards; }
  .animacao-scroll-ativa     { animation: animacao-deslizar-cima    .6s ease forwards; }
  
  /* ===========================
     CABEÇALHO
     =========================== */
  .cabecalho-principal-loja {
    background-color: var(--cor-branco-puro);
    box-shadow: var(--sombra-leve);
    position: sticky;
    top: 0;
    z-index: 1000;
    animation: animacao-deslizar-cima .6s ease;
  }
  
  .container-cabecalho-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo-principal-loja { flex-shrink: 0; }
  .titulo-logo-loja { font-size: 1.8rem; font-weight: 700; color: var(--cor-preto-texto); }
  .destaque-laranja-logo { color: var(--cor-laranja-principal); }
  
  .navegacao-principal-menu { display: flex; }
  .lista-menu-navegacao { list-style: none; display: flex; gap: 2rem; }
  
  .link-menu-navegacao {
    text-decoration: none;
    color: var(--cor-preto-texto);
    font-weight: 500;
    transition: color var(--transicao-rapida);
    position: relative;
  }
  .link-menu-navegacao::after{
    content:'';
    position:absolute;
    bottom:-5px; left:0; width:0; height:2px;
    background-color:var(--cor-laranja-principal);
    transition: width var(--transicao-media);
  }
  .link-menu-navegacao:hover{ color:var(--cor-laranja-principal); }
  .link-menu-navegacao:hover::after{ width:100%; }
  
  /* ===========================
     MENU HAMBÚRGUER (MOBILE)
     =========================== */
  .botao-menu-hamburguer{
    display:none; flex-direction:column; justify-content:space-around;
    width:32px; height:32px; background:transparent; border:none; cursor:pointer;
    padding:0; z-index:1001; position:relative;
  }
  .linha-hamburguer{
    width:100%; height:3px; background-color:var(--cor-preto-texto);
    border-radius:10px; transition:all .3s ease; transform-origin:center;
  }
  .botao-menu-hamburguer.ativo .linha-hamburguer-1{ transform:translateY(10px) rotate(45deg); background-color:var(--cor-laranja-principal); }
  .botao-menu-hamburguer.ativo .linha-hamburguer-2{ opacity:0; transform:translateX(-20px); }
  .botao-menu-hamburguer.ativo .linha-hamburguer-3{ transform:translateY(-10px) rotate(-45deg); background-color:var(--cor-laranja-principal); }
  
  /* Overlay do menu mobile */
  .overlay-menu-mobile{
    display:none; position:fixed; inset:0; background-color:rgba(0,0,0,.5);
    z-index:998; opacity:0; transition:opacity .3s ease; backdrop-filter:blur(5px);
  }
  .overlay-menu-mobile.ativo{ display:block; opacity:1; }
  
  /* ===========================
     SEÇÃO BANNER PRINCIPAL
     =========================== */
  .secao-banner-principal{
    background: linear-gradient(135deg, var(--cor-cinza-claro) 0%, var(--cor-branco-puro) 100%);
    padding: var(--espacamento-grande) 2rem;
    overflow: hidden;
  }
  .container-banner-conteudo{
    max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
    gap:3rem; align-items:center;
  }
  .conteudo-texto-banner{ z-index:2; }
  .titulo-principal-banner{
    font-size:3rem; font-weight:800; line-height:1.2; margin-bottom:1rem; color:var(--cor-preto-texto);
  }
  .subtitulo-descricao-banner{ font-size:1.2rem; color:var(--cor-cinza-escuro); margin-bottom:2rem; }
  
  .botao-principal-laranja{
    display:inline-block; background-color:var(--cor-laranja-principal); color:var(--cor-branco-puro);
    padding:1rem 2.5rem; border-radius:50px; text-decoration:none; font-weight:600; font-size:1.1rem;
    transition:all var(--transicao-media); box-shadow:var(--sombra-media);
  }
  .botao-principal-laranja:hover{ background-color:var(--cor-laranja-escuro); transform:translateY(-2px); box-shadow:var(--sombra-forte); }
  
  .conteudo-imagem-banner{ position:relative; height:400px; display:flex; align-items:center; justify-content:center; }
  .circulo-decorativo-banner{
    width:350px; height:350px; border-radius:50%;
    background:linear-gradient(135deg, var(--cor-laranja-principal), var(--cor-laranja-claro));
    animation:animacao-pulsar 3s ease-in-out infinite; box-shadow:0 0 60px rgba(255,107,53,.3);
  }
  
  /* ===========================
     SEÇÃO AVISO IMPORTANTE
     =========================== */
  .secao-aviso-importante{ background-color:#FFF3E0; padding:1.5rem 2rem; }
  .container-aviso-conteudo{ max-width:1200px; margin:0 auto; }
  .caixa-aviso-informativo{
    display:flex; align-items:center; gap:1rem; background-color:var(--cor-branco-puro);
    padding:1.5rem; border-radius:12px; border-left:4px solid var(--cor-laranja-principal); box-shadow:var(--sombra-leve);
  }
  .icone-aviso-info{ width:32px; height:32px; color:var(--cor-laranja-principal); flex-shrink:0; }
  .texto-aviso-importante{ color:var(--cor-preto-texto); font-size:.95rem; line-height:1.5; }
  
  /* ===========================
     SEÇÃO DE PRODUTOS
     =========================== */
  .secao-produtos-principais{
    padding: var(--espacamento-grande) 2rem;
    background-color: var(--cor-branco-puro);
  }
  .container-produtos-conteudo{ max-width:1400px; margin:0 auto; }
  .titulo-secao-produtos{ font-size:2.5rem; font-weight:700; text-align:center; margin-bottom:1rem; color:var(--cor-preto-texto); }
  .subtitulo-secao-produtos{ text-align:center; color:var(--cor-cinza-escuro); font-size:1.1rem; margin-bottom:3rem; }
  
  /* ===========================
     CARROSSEL DE PRODUTOS
     =========================== */
  .carrossel-produtos-container{ position:relative; padding:2rem 0; }
  .lista-produtos-scroll{
    display:flex; gap:2rem; overflow-x:auto; scroll-behavior:smooth; padding:1rem 0;
    scrollbar-width: thin; scrollbar-color: var(--cor-laranja-principal) var(--cor-cinza-claro);
    -webkit-overflow-scrolling: touch;
  }
  .lista-produtos-scroll::-webkit-scrollbar{ height:8px; }
  .lista-produtos-scroll::-webkit-scrollbar-track{ background:var(--cor-cinza-claro); border-radius:10px; }
  .lista-produtos-scroll::-webkit-scrollbar-thumb{ background:var(--cor-laranja-principal); border-radius:10px; }
  .lista-produtos-scroll::-webkit-scrollbar-thumb:hover{ background:var(--cor-laranja-escuro); }
  
  /* ===========================
     CARD DE PRODUTO
     =========================== */
  .card-produto-item{
    min-width:320px; max-width:320px; background-color:var(--cor-branco-puro);
    border-radius:16px; overflow:hidden; box-shadow:var(--sombra-media);
    transition:all var(--transicao-media); cursor:pointer; display:flex; flex-direction:column;
  }
  .card-produto-item:hover{ transform:translateY(-8px); box-shadow:var(--sombra-forte); }
  
  .container-imagem-produto{
    position:relative; width:100%; height:400px;
    background:linear-gradient(135deg, var(--cor-cinza-claro), var(--cor-cinza-medio));
    overflow:hidden;
  }
  .imagem-produto-principal{ width:100%; height:100%; object-fit:cover; transition: transform var(--transicao-lenta); }
  .card-produto-item:hover .imagem-produto-principal{ transform:scale(1.1); }
  
  .badge-estoque-produto{
    position:absolute; top:12px; right:12px; background-color:rgba(0,0,0,.75); color:var(--cor-branco-puro);
    padding:.4rem .8rem; border-radius:20px; font-size:.85rem; font-weight:600; backdrop-filter:blur(10px);
  }
  .badge-destaque-produto{
    position:absolute; top:12px; left:12px; background-color:var(--cor-laranja-principal); color:var(--cor-branco-puro);
    padding:.4rem .8rem; border-radius:20px; font-size:.85rem; font-weight:600;
  }
  
  .conteudo-informacao-produto{
    padding:1.5rem 1.5rem .75rem;
    display:flex; flex-direction:column; flex-grow:1;
  }
  .card-produto-item{ display:flex; flex-direction:column; justify-content:space-between; height:100%; }
  .container-imagem-produto{ margin-bottom:0; padding-bottom:0; }
  .botao-ver-detalhes-produto{ margin-top:auto; }
  
  .titulo-nome-produto{ font-size:1.3rem; font-weight:700; margin-bottom:.5rem; color:var(--cor-preto-texto); }
  .descricao-especificacao-produto{ font-size:.9rem; color:var(--cor-cinza-escuro); margin-bottom:1rem; line-height:1.5; }
  .lista-caracteristicas-produto{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:1rem; }
  .item-caracteristica{ font-size:.85rem; color:var(--cor-cinza-escuro); }
  .container-garantia-badge{ margin-bottom:1rem; }
  .badge-garantia-produto{
    display:inline-block; background-color:#E8F5E9; color:#2E7D32;
    padding:.4rem .8rem; border-radius:8px; font-size:.85rem; font-weight:600;
  }
  
  .container-preco-compra{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.5rem; }
  .info-preco-principal{ display:flex; align-items:baseline; gap:.5rem; }
  .preco-produto-valor{ font-size:2rem; font-weight:800; color:var(--cor-laranja-principal); }
  .texto-forma-pagamento{ font-size:.9rem; color:var(--cor-cinza-escuro); }
  .texto-parcelamento-produto{ font-size:.85rem; color:var(--cor-cinza-escuro); font-weight:500; }
  
  .botao-ver-detalhes-produto{
    width:100%; background-color:var(--cor-laranja-principal); color:var(--cor-branco-puro);
    border:none; padding:1rem; border-radius:10px; font-weight:600; font-size:1rem;
    cursor:pointer; transition:all var(--transicao-media); margin-top:20px;
  }
  .botao-ver-detalhes-produto:hover{ background-color:var(--cor-laranja-escuro); transform:scale(1.02); }
  
  .card-produto-destaque{ border:2px solid var(--cor-laranja-principal); }
  
  /* ===========================
     BOTÕES DE NAVEGAÇÃO DO CARROSSEL
     =========================== */
  .botao-navegacao-carrossel{
    position:absolute; top:50%; transform:translateY(-50%);
    background-color:var(--cor-branco-puro); border:none; width:50px; height:50px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--sombra-media);
    transition:all var(--transicao-rapida); z-index:10;
  }
  .botao-navegacao-carrossel svg{ width:24px; height:24px; stroke-width:3; color:var(--cor-laranja-principal); }
  .botao-navegacao-carrossel:hover{ background-color:var(--cor-laranja-principal); transform:translateY(-50%) scale(1.1); }
  .botao-navegacao-carrossel:hover svg{ color:var(--cor-branco-puro); }
  
  .botao-anterior-produto{ left:-25px; }
  .botao-proximo-produto{ right:-25px; }
  
  /* ===========================
     SEÇÃO SOBRE
     =========================== */
  .secao-sobre-loja{
    background:linear-gradient(135deg, var(--cor-laranja-principal), var(--cor-laranja-escuro));
    padding:var(--espacamento-grande) 2rem; color:var(--cor-branco-puro);
  }
  .container-sobre-conteudo{ max-width:1200px; margin:0 auto; }
  .titulo-secao-sobre{ font-size:2.5rem; font-weight:700; text-align:center; margin-bottom:3rem; }
  .lista-beneficios-loja{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
  .item-beneficio-loja{
    display:flex; align-items:flex-start; gap:1.5rem; background-color:rgba(255,255,255,.1);
    padding:2rem; border-radius:16px; backdrop-filter:blur(10px); transition:all var(--transicao-media);
  }
  .item-beneficio-loja:hover{ background-color:rgba(255,255,255,.2); transform:translateY(-5px); }
  .icone-beneficio-container{ flex-shrink:0; }
  .icone-beneficio-container svg{ width:48px; height:48px; stroke-width:2; }
  .titulo-beneficio{ font-size:1.5rem; font-weight:700; margin-bottom:.5rem; }
  .descricao-beneficio{ font-size:1rem; opacity:.9; }
  
  /* ===========================
     RODAPÉ
     =========================== */
  .rodape-principal-loja{ background-color:var(--cor-preto-texto); color:var(--cor-branco-puro); padding:3rem 2rem 1.5rem; }
  .container-rodape-conteudo{ max-width:1200px; margin:0 auto; }
  .secao-rodape-informacoes{
    display:grid; grid-template-columns:2fr 1fr; gap:3rem; margin-bottom:2rem; padding-bottom:2rem;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .titulo-rodape-logo{ font-size:1.8rem; font-weight:700; margin-bottom:1rem; }
  .texto-rodape-descricao{ color:rgba(255,255,255,.7); line-height:1.6; }
  .titulo-coluna-rodape{ font-size:1.2rem; font-weight:600; margin-bottom:1rem; }
  
  .link-whatsapp-rodape{
    display:inline-flex; align-items:center; gap:.5rem; color:var(--cor-branco-puro); text-decoration:none;
    background-color:#25D366; padding:.8rem 1.5rem; border-radius:30px; font-weight:600; transition:all var(--transicao-media);
  }
  .link-whatsapp-rodape svg{ width:24px; height:24px; }
  .link-whatsapp-rodape:hover{ background-color:#1EBE57; transform:translateY(-2px); }
  
  .secao-rodape-copyright{ text-align:center; }
  .texto-copyright-rodape{ color:rgba(255,255,255,.5); font-size:.9rem; }
  
  /* ===========================
     RESPONSIVIDADE - TABLETS
     =========================== */
  @media (max-width:1024px){
    .container-banner-conteudo{ grid-template-columns:1fr; text-align:center; }
    .conteudo-imagem-banner{ height:300px; }
    .circulo-decorativo-banner{ width:250px; height:250px; }
    .titulo-principal-banner{ font-size:2.5rem; }
    .botao-anterior-produto{ left:10px; }
    .botao-proximo-produto{ right:10px; }
    .lista-beneficios-loja{ grid-template-columns:1fr; }
    .secao-rodape-informacoes{ grid-template-columns:1fr; gap:2rem; }
  }
  
  /* ===========================
     RESPONSIVIDADE - MOBILE
     (COM A CORREÇÃO DO OVERFLOW)
     =========================== */
  @media (max-width:768px){
    /* mata qualquer 1px fantasma de scroll horizontal */
    html, body { overflow-x: clip; }
  
    .container-cabecalho-conteudo{ padding:1rem; }
    .titulo-logo-loja{ font-size:1.5rem; }
  
    /* Menu mobile */
    .botao-menu-hamburguer{ display:flex; }
    .navegacao-principal-menu{
      position:fixed; top:0; right:-100%; width:280px; height:100vh; background-color:var(--cor-branco-puro);
      box-shadow:-4px 0 20px rgba(0,0,0,.1); transition:right .4s cubic-bezier(.68,-.55,.265,1.55);
      z-index:999; padding:80px 0 2rem;
    }
    .navegacao-principal-menu.ativo{ right:0; }
    .lista-menu-navegacao{ flex-direction:column; gap:0; width:100%; }
    .item-menu-navegacao{ width:100%; opacity:0; transform:translateX(50px); transition:all .3s ease; }
    .navegacao-principal-menu.ativo .item-menu-navegacao{ opacity:1; transform:translateX(0); }
    .navegacao-principal-menu.ativo .item-menu-navegacao:nth-child(1){ transition-delay:.1s; }
    .navegacao-principal-menu.ativo .item-menu-navegacao:nth-child(2){ transition-delay:.2s; }
    .navegacao-principal-menu.ativo .item-menu-navegacao:nth-child(3){ transition-delay:.3s; }
    .link-menu-navegacao{
      display:block; padding:1.2rem 2rem; font-size:1.1rem; border-bottom:1px solid var(--cor-cinza-claro);
      transition:all .3s ease;
    }
    .link-menu-navegacao:hover{ background-color:var(--cor-cinza-claro); padding-left:2.5rem; }
    .link-menu-navegacao::after{ display:none; }
  
    .secao-banner-principal{ padding:2rem 1rem; }
    .titulo-principal-banner{ font-size:2rem; }
    .subtitulo-descricao-banner{ font-size:1rem; }
    .botao-principal-laranja{ padding:.8rem 2rem; font-size:1rem; }
    .conteudo-imagem-banner{ height:200px; }
    .circulo-decorativo-banner{ width:200px; height:200px; }
  
    /* >>> Correção do overflow na seção de produtos <<< */
    .secao-produtos-principais{
      /* tira padding lateral para não somar com padding interno e gap */
      padding-left: 0;
      padding-right: 0;
      max-width: 100vw; /* nunca ultrapassa a viewport */
    }
  
    .container-produtos-conteudo{
      /* recoloca respiro só no conteúdo */
      padding-left: 16px;
      padding-right: 16px;
      max-width: 100vw;
    }
  
    .carrossel-produtos-container{
      position:relative;
      overflow: clip; /* ou hidden se quiser mais compatibilidade */
    }
  
    .lista-produtos-scroll{
      padding-left: 8px;   /* reduzido no mobile */
      padding-right: 8px;  /* reduzido no mobile */
      margin-left: 0;
      margin-right: 0;
      overscroll-behavior-x: contain;
    }
  
    .card-produto-item{ min-width:280px; max-width:280px; }
    .container-imagem-produto{ height:350px; }
    .titulo-nome-produto{ font-size:1.1rem; }
    .preco-produto-valor{ font-size:1.7rem; }
  
    .botao-navegacao-carrossel{ width:40px; height:40px; }
    .botao-navegacao-carrossel svg{ width:20px; height:20px; }
  
    /* mantém os botões dentro do container (sem offsets negativos) */
    .botao-anterior-produto{ left: 6px; }
    .botao-proximo-produto{ right: 6px; }
  
    .secao-sobre-loja{ padding:2rem 1rem; }
    .titulo-secao-sobre{ font-size:2rem; }
    .lista-beneficios-loja{ gap:1.5rem; }
    .item-beneficio-loja{ padding:1.5rem; }
    .icone-beneficio-container svg{ width:40px; height:40px; }
    .titulo-beneficio{ font-size:1.2rem; }
    .caixa-aviso-informativo{ flex-direction:column; text-align:center; }
  }
  
  @media (max-width:480px){
    .titulo-principal-banner{ font-size:1.7rem; }
    .card-produto-item{ min-width:260px; max-width:260px; }
    .lista-produtos-scroll{ gap:1rem; }
  }
  
  /* ===========================
     UTILITÁRIOS
     =========================== */
  .ocultar-elemento{ display:none !important; }
  .visivel-elemento{ display:block !important; }
  .texto-centralizado{ text-align:center; }
  .espacamento-topo{ margin-top:2rem; }
  .espacamento-baixo{ margin-bottom:2rem; }