/* TOPBAR */
  /* Cores do topbar */
  :root{
	--topbar:#014195;     /* azul marinho #1f2a44-> valor anterior #0000CD->outro valor usado*/
	--navbg: #00BFFF;     /* fundo da navbar */
	--accent:#f59e0b;     /* laranja da marca (ajuste se preferir outro tom) */
  }

  #topbar{
	background: var(--topbar);
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,.08);
	width: 100%;
	box-sizing: border-box;     /* evita overflow se tiver padding/borda */
  }

  #topbar .top-link{
	color:#fff; text-decoration:none;
	display:inline-flex; align-items:center; gap:.35rem;
	opacity:.95; transition: color .2s ease, opacity .2s ease;
	line-height:1;
  }
  #topbar .top-link:hover{ color: var(--accent); opacity:1; }

  #topbar .bi{ font-size:1rem; }       /* tamanho dos ícones */
  #topbar .sep{ color:rgba(255,255,255,.5); }

  /* Responsivo */
  @media (max-width: 575.98px){
	#topbar{ font-size:.85rem; }
	#topbar .bi{ font-size:.95rem; }
  }

  /* TOPBAR — MOBILE (≤575.98px) */
  @media (max-width: 575.98px){
	/* Fundo continua o mesmo azul */
	#topbar, .topbar-mobile { background: #0000CD; color: #fff; }

	.topbar-mobile .tb-row{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 12px;                 /* espaço entre ícones/itens */
	}

	/* respiro extra no topo como você pediu */
	.topbar-mobile .tb-row1{
	  padding: 8px 10px 6px;     /* top maior */
	}

	/* Ícones maiores (24px) com target acessível (44x44) */
	.topbar-mobile .tb-icon{
	  width: 44px; height: 44px;
	  display: grid; place-items: center;
	  border-radius: 999px;
	  color: #fff; text-decoration: none;
	  outline-offset: 2px;
	}
	.topbar-mobile .tb-icon i{ font-size: 24px; line-height: 1; }

	/* Hover/focus no laranja da marca */
	.topbar-mobile .tb-icon:hover,
	.topbar-mobile .tb-icon:focus-visible{
	  color: #F4A300;
	}

	/* Linha 2 — CTA do telefone */
	.topbar-mobile .tb-row2.tb-phone{
	  padding: 6px 12px 10px;
	  gap: 10px;
	  text-decoration: none;
	  color: #fff;
	  justify-content: center;
	  font-size: 1.125rem;       /* ~18px, maior que o corpo */
	  font-weight: 600;
	}
	.topbar-mobile .tb-row2.tb-phone i{ font-size: 22px; }

	.topbar-mobile .tb-row2.tb-phone:hover,
	.topbar-mobile .tb-row2.tb-phone:focus-visible{
	  color: #F4A300;
	}
  }

  /*<-- NAVBAR CARROSSEL -->*/
  :root{
	--brand:#4F46E5; /* Indigo 600 */
	--brand-2:#22C55E; /* Green 500 */
	--ink:#0f172a;     /* Slate 900 */
	--ink-2:#334155;   /* Slate 700 */
	--bg:#ffffff;
	--muted:#64748b;   /* Slate 500 */
	--line:#e2e8f0;    /* Slate 200 */
	--card:#ffffff;
	--shadow:0 10px 30px rgba(2,6,23,.08);
  }

  @media (prefers-color-scheme: dark){
	:root{
	  --bg:#0b1020;
	  --card:#12172a;
	  --ink:#e2e8f0;
	  --ink-2:#94a3b8;
	  --muted:#8b9bb3;
	  --line:#1f2937;
	  --shadow:0 10px 30px rgba(0,0,0,.35);
	}
	body{background: radial-gradient(1200px 600px at 10% -20%, rgba(79,70,229,.15), transparent),
				  radial-gradient(800px 400px at 110% 10%, rgba(34,197,94,.12), transparent), var(--bg);}
  }

  body{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); background:var(--bg);}  
  .section{padding: min(9cqw, 96px) 0;} /* clamp com container query width */
  .btn-gradient{ background: linear-gradient(135deg, var(--brand), #7c3aed); border:0; color:#fff; box-shadow: var(--shadow);}
  .btn-outline-brand{ border-color: var(--brand); color: var(--brand);} 
  .btn-outline-brand:hover{ background: var(--brand); color:#fff; }
  .lead{ color: var(--ink-2); }
  .chip{ display:inline-flex; gap:.5rem; align-items:center; padding:.375rem .75rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-weight:600; font-size:.875rem; }
  .hero-blob{ position: absolute; inset: auto 0 -10% auto; width: 520px; max-width: 42vw; height: 520px; filter: blur(48px); opacity:.25; background: radial-gradient(closest-side, var(--brand), transparent 70%); z-index:0; }
  .glass{ background: rgba(255,255,255,.6); backdrop-filter: blur(10px); border:1px solid var(--line); }
  @media (prefers-color-scheme: dark){ .glass{ background: rgba(18,23,42,.6);} }
  .card-ui{ background: var(--card); border:1px solid var(--line); box-shadow: var(--shadow); }
  .feature-icon{ width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background: rgba(79,70,229,.12); }
  .feature-icon i{ font-size:1.25rem; color: var(--brand); }
  .rounded-2xl{ border-radius: 1.25rem; }
  .shadow-soft{ box-shadow: var(--shadow); }
  .footer{ border-top:1px solid var(--line); }

  /* Navbar maior */
  .navbar .nav-link{ padding:.75rem 1rem; font-weight:600; font-size:1rem; }
  .navbar-brand{ font-size:1.25rem; letter-spacing:.2px; }
  /* Tamanho responsivo da logo na navbar */
  .navbar-brand .brand-logo{
	display:block;
	/* height: clamp(55px, 9.4vw, 81px); maior que antes */
	height: clamp(44px, 7.5vw, 65px);        
	width: auto;
  }

  /* .navbar .navbar-brand:hover{ color: var(--accent); } */
  .navbar{
	padding-top: 1px;
	padding-bottom: 3px;
	background: var(--navbg) !important;
	/* Ajusta variáveis do Bootstrap p/ contraste e toggler */
	--bs-navbar-color: rgba(255,255,255,.9);
	--bs-navbar-hover-color: var(--accent);
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: var(--accent);
	--bs-navbar-toggler-border-color: rgba(255,255,255,.35);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .navbar .nav-link,
  .navbar .navbar-brand{ color:#fff; }

  .navbar .nav-link:hover,
  .navbar .navbar-brand:hover{ color:var(--accent); }

  /* toggler visível no mobile */
  .navbar .navbar-toggler{ border-color: rgba(255,255,255,.25); }
  .navbar .navbar-toggler-icon{
	background-image: var(--bs-navbar-toggler-icon-bg); /* mantém ícone do Bootstrap */
  }
  .navbar .navbar-toggler:focus{ box-shadow: 0 0 0 .15rem rgba(255,255,255,.35); }

  /* Opcional: cresce um pouco mais em telas grandes */
  @media (min-width: 992px){
	.navbar-brand .brand-logo{ height: 70px; } /* 20% menor (de 88px) */        
  }    
  .carousel-caption{ background: rgba(0,0,0,.35); padding:1rem 1.25rem; border-radius:1rem; backdrop-filter: blur(6px); }
  .carousel-item img{ object-fit: cover; height: clamp(420px, 62vh, 860px); }
  .carousel-item{ position:relative; }
  .carousel-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 70%); pointer-events:none; }
  @media (prefers-color-scheme: dark){
	.carousel-item::after{ background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 70%); }
  }
  .category-card{ position:relative; overflow:hidden; border-radius:1.25rem; border:1px solid var(--line); box-shadow: var(--shadow); }
  .category-card img{ width:100%; height:200px; object-fit:cover; transition: transform .35s ease; }
  .category-card:hover img{ transform: scale(1.04); }
  .category-badge{ position:absolute; inset:auto 1rem 1rem 1rem; background:rgba(255,255,255,.9); color:var(--ink); border-radius:.75rem; padding:.5rem .75rem; font-weight:700; }
  @media (prefers-color-scheme: dark){ .category-badge{ background:rgba(18,23,42,.8); color:var(--ink); }}


  /* Helper to visualize focus clearly */
  :focus-visible{ outline: 3px solid color-mix(in oklab, var(--brand), white 30%); outline-offset: 2px; border-radius:.5rem;}
	/* Hero full-bleed colado na navbar */
  .hero-fullbleed{ padding-top:0; padding-bottom:0; }
  .navbar + .hero-fullbleed{ margin-top:0; }
  header.hero-fullbleed .carousel{ border-radius:0; }
  header.hero-fullbleed .carousel .carousel-caption{ margin-left: clamp(16px, 4vw, 48px); margin-right: clamp(16px, 4vw, 48px); }

	  
  /* Pulso suave no CTA (sem reflow) */
  .btn-pulse{
	animation: cta-pulse 1.6s ease-in-out infinite;
	transform-origin: center;
	will-change: transform, box-shadow;
  }
  @keyframes cta-pulse{
	0%, 100%{
	  transform: scale(1);
	  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); /* roxo do gradiente */
	}
	50%{
	  transform: scale(1.06);                /* “aumenta” 6% */
	  box-shadow: 0 0 0 10px rgba(124, 58, 237, .15);
	}
  }

  /* Acessibilidade / interação */
  .btn-pulse:hover,
  .btn-pulse:focus{ animation-play-state: paused; transform: scale(1.03); }
  @media (prefers-reduced-motion: reduce){
	.btn-pulse{ animation: none; }
  }

  /* Pulse laranja apenas para o CTA - Coloca a Sombra Laranja*/
  .btn-cta.btn-pulse{ animation-name: cta-pulse-cta; }

  @keyframes cta-pulse-cta{
	0%,100%{
	  transform: scale(1);
	  box-shadow: 0 0 0 0 var(--cta-ring);            /* usa o ring laranja */
	}
	50%{
	  transform: scale(1.10);
	  box-shadow: 0 0 0 15px var(--cta-ring);         /* laranja */
	}
  }
 
 /* ============================================================================================================= */
  
	/* === CTA Laranja (não afeta .btn-gradient existente) === */
	:root{
		--cta-1: #F4A300; /* base pedida */
		--cta-2: #FF8A00; /* meio mais vibrante */
		--cta-3: #FF6A00; /* final um pouco mais quente */
		--cta-ring: rgba(244,163,0,.35); /* cor laranja  */
		--cta-ring-2: rgba(244,163,0,.35);  /* cor azulada  */
	}

	.btn-cta{
		background: linear-gradient(135deg, var(--cta-1) 0%, var(--cta-2) 55%, var(--cta-3) 100%);
		color:#fff;            /* excelente contraste nesse range de laranja */
		border:0;
		box-shadow: 0 8px 20px var(--cta-ring);
		transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
	}

	.btn-cta:hover{
		transform: translateY(-1px);
		box-shadow: 0 12px 28px rgba(244,163,0,.45);
		filter: brightness(1.03);
	}

	.btn-cta:active{
		transform: translateY(0);
		filter: brightness(.98);
	}

	.btn-cta:focus-visible{
		outline: 3px solid color-mix(in oklab, var(--cta-1), white 25%);
		outline-offset: 2px;
		border-radius: 999px;
	}

	/* Modo escuro (seu site já suporta) — reforça a sombra */
	@media (prefers-color-scheme: dark){
		.btn-cta{ box-shadow: 0 10px 24px rgba(244,163,0,.40); }
	}

	/* Aumenta a fonte em 20% apenas no #btn-contato-1 */
	#btn-contato-1{
		font-size: 120%;
		/* Opcional: se preferir via variável do Bootstrap
			--bs-btn-font-size: calc(var(--bs-btn-font-size, 1rem) * 1.2);
		*/
	}      
 
   /* ============================================================================================================= */

	/* Barra inferior de categorias (logo abaixo da navbar) */
	:root{
		--catbar-bg: var(--navbg, #0000CD); /* usa a mesma cor da navbar */
		--catbar-hover: var(--accent, #f59e0b);
	}

	#catbar{
		background: var(--catbar-bg);
		border-top: 1px solid rgba(255,255,255,.08);
	}
	#catbar .catbar-wrap{
		gap: .25rem;
		white-space: nowrap;
		padding: .35rem 0;               /* altura compacta */
		scrollbar-width: none;           /* Firefox */
	}
	#catbar .catbar-wrap::-webkit-scrollbar{ display:none; } /* WebKit */

	#catbar .catbar-link{
		color: rgba(255,255,255,.92);
		text-decoration: none;
		border-radius: 999px;
		transition: background .2s ease, color .2s ease, transform .2s ease;
	}
	#catbar .catbar-link:hover{
		color:#fff;
		background: rgba(255,255,255,.14);
	}
	#catbar .catbar-link.active{
		background:#fff;
		color: var(--catbar-bg);
		font-weight: 700;
	}
	#catbar .catbar-wrap{ gap:.15rem; }
	#catbar .catbar-link{ padding:.5rem .75rem; font-size:.95rem; }

	/* Catbar usando exatamente a cor da topbar */
	#catbar{
		--catbar-bg: var(--topbar);  /* override da variável usada nos links ativos */
		background: var(--topbar);   /* cor de fundo */
	}

	/* Espaçamento lateral em telas pequenas para não grudar nas bordas */
	@media (max-width: 575.98px){
		#catbar .container-xl{ padding-left:.5rem; padding-right:.5rem; }
	}

	/* Distribuir os links igualmente em telas ≥992px */
	@media (min-width: 992px){
		#catbar .catbar-wrap{
			overflow: visible;
			justify-content: space-evenly;  /* ou space-between se preferir encostar nas bordas */
			gap: .25rem;                     /* opcional, ajuste fino */
		}
	}

   /* ============================================================================================================= */
        /* Cartões com imagem + overlay e efeito hover */
        #categorias .cat-card{
            position:relative; overflow:hidden; border-radius:1.25rem;
            /* height:clamp(180px, 28vw, 260px); responsivo, semelhante ao seu mock */
            height: clamp(216px, 33.6vw, 312px); /* +20% */            
            background:#f2f4f7;
            transition:transform .25s ease, box-shadow .25s ease;
        }
        #categorias .cat-img-wrap{position:absolute; inset:0;}
        #categorias .cat-img{
            position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
            transition:transform .6s ease;
        }
        #categorias .cat-gradient{
            position:absolute; inset:0;
            background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
            transition:opacity .4s ease;
        }
        #categorias .cat-content{position:absolute; left:0; right:0; bottom:0; padding:1rem;}
        #categorias .cat-info{
            background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(2px);
            border-radius:1rem; padding:.75rem 1rem;
            box-shadow:0 4px 20px rgba(17,24,39,.08);
            transform:translateY(0);
            transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
        }
        #categorias .cat-title{font-weight:700; color:#101828;}
        #categorias .cat-desc{font-size:.9rem; color:#4b5563; margin-top:.25rem; line-height:1.35;}
        #categorias .cat-card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(17,24,39,.16);}
        #categorias .cat-card:hover .cat-img{transform:scale(1.08);}
        #categorias .cat-card:hover .cat-gradient{opacity:.35;}
        #categorias .cat-card:hover .cat-info{transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,24,39,.20);}
        #categorias .cat-card:focus-visible{outline:3px solid #0d6efd; outline-offset:3px;}

        /* Clamp: título em 1 linha, descrição em 2 linhas (aplicar após suas regras atuais) */
        #categorias .cat-title, #categorias .cat-desc{
          display:-webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          word-break: break-word;  /* evita estouro por palavras longas */
          hyphens: auto;           /* permite hifenização quando possível */
        }

        #categorias .cat-title{
          -webkit-line-clamp: 1;
          text-overflow: ellipsis; /* reticências quando cortar */
        }

        #categorias .cat-desc{
          -webkit-line-clamp: 2;
        }
	/* ============================================================================================================= */
 
	  /* .fw-bold {
          font-weight: 700 !important;
      }       */
      section[id]{ scroll-margin-top: clamp(64px, 10vw, 96px); }
      
      /* Badge + legibilidade + responsividade */
      .prod-card .prod-badge{
        position:absolute; top:.75rem; left:.75rem;
        padding:.35rem .6rem; border-radius:999px;
        font-weight:700;
        font-size: clamp(.70rem, .9vw, .85rem);
        max-width:72%;                 /* evita invadir muito a imagem */
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        z-index:2;                      /* garante ficar acima de tudo */
        background:rgba(255,255,255,.92);
        color:#0f172a;
        border:1px solid rgba(255,255,255,.55);
        backdrop-filter: blur(4px);
        box-shadow:0 6px 16px rgba(17,24,39,.18);
        letter-spacing:.2px;
      }

      /* Variantes (mantém as que já tem) */
      .prod-card .prod-badge.brand{
        background: linear-gradient(135deg, var(--brand), #7c3aed);
        color:#fff; border-color: transparent;
      }
      .prod-card .prod-badge.success{ background:#22C55E; color:#fff; border-color:transparent; }
      .prod-card .prod-badge.warning{ background:#f59e0b; color:#111827; border-color:transparent; }
      .prod-card .prod-badge.offer{   background:#ef4444; color:#fff; border-color:transparent; }

      /* Ajuste fino no mobile */
      @media (max-width: 576px){
        .prod-card .prod-badge{ top:.5rem; left:.5rem; padding:.3rem .5rem; }
      }
      /* Ícone dentro do badge */
      .prod-card .prod-badge i{
        font-size: 1em; 
        line-height: 0; 
        vertical-align: -0.12em; 
      }

      .btn-whatsapp{ border:1px solid #25D366; color:#25D366; }
      .btn-whatsapp:hover{ background:#25D366; color:#fff; }

	/* ============================================================================================================= */

        /* Faixa de diferenciais (apenas esta área) */
        /* Faixa full-bleed e cards mais baixos */
        #faixa-diferenciais{ background: var(--bg); } /* mantém fundo do site */
        #faixa-diferenciais .strip-item{
        background: var(--card);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        color: inherit;
        min-height: 64px;              /* menor altura */
        }
        #faixa-diferenciais .strip-item:hover{
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(17,24,39,.12);
        border-color: color-mix(in oklab, var(--brand), white 40%);
        }

        /* Ícone menor para reduzir altura */
        #faixa-diferenciais .strip-ico{
        width: 40px; height: 40px;     /* antes 48px */
        border-radius: 10px;
        display:grid; place-items:center;
        background: rgba(79,70,229,.10);
        color: var(--brand);
        flex: 0 0 auto;
        font-size: 1.05rem;            /* antes 1.25rem */
        }

        /* Tipografia mais compacta */
        #faixa-diferenciais .strip-txt strong{
        line-height:1.05; font-weight:700; font-size: .98rem;
        }
        #faixa-diferenciais .strip-txt small{
        line-height:1.15; font-size: .84rem;
        }

        /* Toca o grid para bordas (full-bleed de verdade) */
        #faixa-diferenciais .row{ padding-left: .75rem; padding-right: .75rem; }
        @media (min-width: 1200px){
        #faixa-diferenciais .row{ padding-left: 1rem; padding-right: 1rem; }
        }

        /* Mobile: ainda mais compacto */
        @media (max-width: 575.98px){
            #faixa-diferenciais .strip-item{ padding: .5rem .6rem !important; min-height: 58px; }
            #faixa-diferenciais .strip-ico{ width: 36px; height: 36px; font-size: .95rem; }
            #faixa-diferenciais .strip-txt strong{ font-size: .95rem; }
            #faixa-diferenciais .strip-txt small{ font-size: .8rem; }
        }

        /* Deixar Mais Raso */
        #faixa-diferenciais .strip-item{ padding:.55rem .9rem; min-height:60px; }
        #faixa-diferenciais .strip-ico{ width:36px; height:36px; font-size:2.28rem; }
        #faixa-diferenciais .strip-ico i { line-height: 1; }        
        /* manter todas as tiras na mesma altura (sem quebra de linhas) */
        #faixa-diferenciais .strip-txt strong,
        #faixa-diferenciais .strip-txt small{
            display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
            -webkit-line-clamp:1; text-overflow:ellipsis; white-space:normal;
        }
        /* separador bem sutil do carrossel (quando o fundo da foto é claro) */
        #faixa-diferenciais{ border-top:1px solid var(--line); }

        /* opcional: um pouco mais de caixa pro ícone 2x */
        #faixa-diferenciais .strip-ico { width: 52px; height: 52px; font-size: 2.28rem;   /* era .95rem */} /* mantém raso */
        @media (max-width:575.98px){
            #faixa-diferenciais .strip-ico { width: 44px; height: 44px; font-size: 1.6rem;}
        }


	/* ============================================================================================================= */

      /* Projeto Social */
      #projeto-social .progress{ background: color-mix(in oklab, var(--line), white 10%); }
      #projeto-social .progress-bar.bg-warning{
        background: linear-gradient(90deg, #F4A300, #FF8A00);
      }
      #projeto-social blockquote p{ color: var(--ink-2); }

	/* ============================================================================================================= */
      /* ===== Popup WhatsApp ===== */
      .wpp-popup{position:fixed; inset:0; z-index:1060; display:none;}
      .wpp-popup.is-open{display:block;}
      .wpp-popup__overlay{position:absolute; inset:0; background:rgba(2,6,23,.55);}
      .wpp-popup__card{
        position:relative; z-index:1; 
        width:min(860px, 94vw);
        /* width: min(520px, 92vw); ~metade do 860px */
        margin:clamp(16px, 7vh, 48px) auto;
        background:#fff; border-radius:20px;
        box-shadow:0 24px 60px rgba(2,6,23,.35);
        overflow:hidden; animation:pop-in .26s ease;
      }
      @keyframes pop-in{from{transform:translateY(8px) scale(.98); opacity:.0} to{transform:none; opacity:1}}

      .wpp-popup__close{
        position:absolute; top:10px; right:12px; 
        width:36px; height:36px; border-radius:999px;
        border:none; background:#fff; color:#111; font-size:24px; line-height:1;
        box-shadow:0 6px 16px rgba(2,6,23,.15); cursor:pointer;
      }
      .wpp-popup__close:hover{transform:scale(1.06)}

      .wpp-popup__body{padding:10px 10px 20px; display:grid; gap:14px;}
      .wpp-popup__img{display:block; width:100%; height:auto; border-radius:14px}

      .wpp-popup__cta{
        display:flex; align-items:center; justify-content:center; gap:.6rem;
        /* font-weight:800; letter-spacing:.2px; text-transform:uppercase; */
        text-decoration:none;
        padding:14px 18px; border-radius:999px;
        color:#1a1f2e; background:linear-gradient(135deg,#3DFF7A,#00D95F);
        box-shadow:0 12px 30px rgba(0,217,95,.25);
        transition:transform .15s ease, box-shadow .15s ease;
        animation:ctaPulse 1.8s ease-in-out infinite;
      }
      .wpp-popup__cta:hover{transform:translateY(-1px); box-shadow:0 16px 40px rgba(0,217,95,.28)}
      .wpp-popup__cta-ico{filter:saturate(1.2); font-size:1.1em}

      @keyframes ctaPulse{
        0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(0,217,95,0)}
        50%{transform:scale(1.06); box-shadow:0 0 0 14px rgba(0,217,95,.12)}
      }

      /* Mobile: card mais justo nas bordas */
      @media (max-width: 575.98px){
        .wpp-popup__card{width:94vw; margin:14px auto}
        .wpp-popup__close{top:8px; right:8px}
      }

      /* Evita scroll do body quando aberto (JS adiciona esta classe) */
      .body-no-scroll{overflow:hidden}

      @media (min-width:576px){
        .wpp-popup__card{ width: min(602px, 94vw); }
      }

      /* Centraliza o card no centro da tela (horizontal + vertical) */
      .wpp-popup.is-open{
        display: flex;                 /* antes era block */
        align-items: center;           /* centro vertical */
        justify-content: center;       /* centro horizontal */
        padding: clamp(12px, 4vh, 32px); /* respiro nas bordas em telas pequenas */
      }

      /* Deixe o card sem margens para o flex funcionar 100% */
      .wpp-popup__card{ margin: 0; }

      /* No mobile, removemos a margem também (seu CSS antigo colocava 14px auto) */
      @media (max-width: 575.98px){
        .wpp-popup__card{ margin: 0; }
      }      

      /* CTA de rodapé do popup: Ajuste da Largura */
      #wppPopup .wpp-popup__cta{
        width: 90%;   /* tira 20px de cada lado */
        margin: 0 auto;
        font-weight:800; letter-spacing:.2px; text-transform:uppercase;
      }
      @media (max-width: 575.98px){
        #wppPopup .wpp-popup__cta{ 
          width: 90%; 
          margin: 0 auto;
          font-weight:600; font-size:14px; letter-spacing:.2px; text-transform:uppercase;
        }
      }      

      /* ============================
      Faixa (ribbon) do popup - Mensagem Superior
      ============================ */
      #wppPopup .wpp-ribbon{
      display:flex; align-items:center; gap:.6rem;
      /* Degradê laranja – base #F4A300 */
      --orange-1: #F4A300;
      --orange-2: #FFB53A;
      background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
      color:#1a1f2e;                 /* texto escuro para bom contraste no laranja */
      padding: 12px 16px;
      padding-right: 56px;           /* espaço para não colidir com o botão fechar */
      border-top-left-radius: 20px;  /* acompanha raio do card */
      border-top-right-radius: 20px; /* acompanha raio do card */
      border-bottom: 1px solid rgba(0,0,0,.06);
      /* margin-bottom: 10px; */
      /* z-index: -1; desta forma o botão de fechar aparece - jogamos a mensagem para tras do botão */
    }

    #wppPopup .wpp-ribbon-ico{
      font-size: 1.15em;
      transform: translateY(1px);
    }

    #wppPopup .wpp-ribbon-title{
      font-weight: 800;
      line-height: 1.2;
      font-size: clamp(14px, 1.05rem + .2vw, 20px);
      letter-spacing:.2px;
    }

    /* Em telas pequenas, deixe a faixa mais “compacta” */
    @media (max-width:575.98px){
      #wppPopup .wpp-ribbon{
        padding: 10px 14px;
        padding-right: 48px;
        /* margin-bottom: 8px; */
      }
      #wppPopup .wpp-ribbon-title{
        font-size: clamp(13px, 3.8vw, 17px);
      }
    }

    /* ===== Sheen (brilho varrendo) — RIBBON + CTA ===== */
    /* alvos corretos: .wpp-ribbon e .wpp-popup__cta */
    #wppPopup .wpp-ribbon,
    #wppPopup .wpp-popup__cta{
      position: relative;
      overflow: hidden;
      isolation: isolate; /* garante camadas */
    }

    /* feixe de brilho */
    #wppPopup .wpp-ribbon::after,
    #wppPopup .wpp-popup__cta::after{
      content:"";
      position:absolute;
      top:-60%; bottom:-60%; left:-60%;
      width:140%;
      transform: translateX(-120%) skewX(20deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      opacity:0;
      pointer-events:none;
      z-index:1;
      animation: sheen-cycle 7s linear infinite; /* varredura periódica suave */
    }

    /* varredura imediata no hover */
    #wppPopup .wpp-ribbon:hover::after,
    #wppPopup .wpp-popup__cta:hover::after{
      animation: sheen-sweep .9s ease forwards;
    }

    /* ciclagem: quieto → passa brilho no fim do período */
    @keyframes sheen-cycle{
      0%,75%{ transform:translateX(-120%) skewX(20deg); opacity:0; }
      82%   { opacity:.15; }
      90%   { opacity:.35; }
      100%  { transform:translateX(120%) skewX(20deg); opacity:0; }
    }

    /* sweep único (hover) */
    @keyframes sheen-sweep{
      0%   { transform:translateX(-120%) skewX(20deg); opacity:0; }
      15%  { opacity:.15; }
      50%  { opacity:.35; }
      100% { transform:translateX(120%)  skewX(20deg); opacity:0; }
    }

    /* respeita redução de movimento */
    @media (prefers-reduced-motion: reduce){
      #wppPopup .wpp-ribbon::after,
      #wppPopup .wpp-popup__cta::after{ animation:none !important; }
    }

    /* Sheen: ciclo contínuo + sweep único 1s após abrir */
    #wppPopup .wpp-ribbon::after{
      /* antes: animation: sheen-cycle 7s linear infinite; */
      animation:
        sheen-cycle 7s linear infinite,
        sheen-sweep .9s ease 1s 1 both; /* kickoff: 1s depois, 1x */
    }

    /* O codigo abaixo serve para evitar que o titulo superior do banner sobreponha o botão de fechar */
    /* garanta um contexto de empilhamento no card */
    #wppPopup .wpp-popup__card{ position: relative; }

    /* ribbon acima do card, mas abaixo do botão */
    #wppPopup .wpp-ribbon{
      position: relative;
      z-index: 1;            /* >= 0 para evitar sumir atrás do card/overlay */
      padding-right: 56px;   /* seu espaçamento pro botão */
    }

    /* botão fica por cima da ribbon */
    #wppPopup .wpp-popup__close{
      position: absolute;
      top: 10px; right: 12px;
      z-index: 2;            /* maior que o da ribbon */
    }


	/* ============================================================================================================= */

	/*<-- Footer desegign by -->*/
	  /* Assinatura do desenvolvedor */
	  #designed-by-ch{
		border-top: 1px solid var(--line);
		padding: .6rem 0;
		background: var(--bg);
	  }
	  #designed-by-ch .container-xl{
		display: flex; align-items: center; justify-content: center;
	  }
	  #designed-by-ch p{
		margin: 0; 
		font-size: .8125rem; /* ~13px */
		color: var(--muted);
	  }
	  #designed-by-ch a{
		color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor;
	  }
	  #designed-by-ch a:hover{
		color: var(--brand); border-bottom-color: transparent; text-decoration: underline;
	  }
  
	  /* Dark mode mantém legibilidade */
	  @media (prefers-color-scheme: dark){
		#designed-by-ch a:hover{ color: var(--brand-2); }
	  }
  
	  /* Opcional: esconder em impressão */
	  @media print{
		#designed-by-ch{ display: none; }
	  }    
  
	/* ============================================================================================================= */

    /* dobra o tamanho do ícone do carrinho na navbar */
    .nav-link .cart-icon {
      font-size: 2rem; /* dobro do valor base */
      line-height: 1;
      margin-left: 0.25rem;
    }

    /* ajuste em telas pequenas, se quiser um pouco menor */
    @media (max-width: 576px) {
      .nav-link .cart-icon { font-size: 1.6rem; }
    }

	/* ============================================================================================================= */
    .sucesso-img {
      max-width: 220px; /* ajuste conforme necessário */
      height: auto; /* mantém a proporção */
    }
    .erro-img {
      max-width: 220px; /* ajuste conforme necessário */
      height: auto; /* mantém a proporção */
    }
  

	/* ============================================================================================================= */