:root{
  /* Paleta principal (urgência + conversão) */
  --color-urgent-red: #ff4d4d;    /* Uso: botões "Comprar agora", CTA principal, alertas */
  --color-attention-yellow: #FFD60A; /* Uso: selos de promoção, destaques de preço */
  --color-action-orange: #F77F00; /* Uso: CTA secundários, "Saiba mais", banners */
  
  /* Neutros e espaçamento visual */
  --color-neutral-dark: #2B2D42; /* Uso: textos, títulos, fundos de blocos */
  --color-neutral-medium: #CDC0B4; /* Uso: bordas, labels secundárias */
  --color-white: #FFFFFF;         /* Uso: fundos, espaços de respiro */
  --color-muted: #EBEBEB;         /* Uso: cards, áreas secundárias */
  
  /* Feedback positivo */
  --color-success: #06D6A0;      /* Uso: confirmações, mensagens pós-compra */
  
  /* Acessibilidade / contraste */
  --color-on-primary: #FFFFFF;   /* cor do texto em botões fortes */
  --color-on-light: #2B2D42;     /* cor do texto em fundos claros */
  
  /* Sombras / elevação */
  --shadow-sm: 0 1px 3px rgba(43,45,66,0.08);
  --shadow-md: 0 6px 18px rgba(43,45,66,0.12);
  --radius-base: 8px;
  --radius-pill: 999px;
  
  /* Transições padrão */
  --ease-fast: 150ms cubic-bezier(.4,0,.2,1);
  --ease-medium: 250ms cubic-bezier(.4,0,.2,1);
}

/* -------------------------
   Tipografia base e layout
   ------------------------- */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--color-neutral-dark);
  background-color:var(--color-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* -------------------------
   Botões CTA
   ------------------------- */
/* CTA primário — uso: ação imediata (comprar, finalizar) */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.75rem 1.25rem;
  border-radius:var(--radius-base);
  font-weight:600;
  cursor:pointer;
  transition:transform var(--ease-fast), box-shadow var(--ease-fast), opacity var(--ease-fast);
  user-select:none;
  border: none;
  box-shadow: var(--shadow-sm);
}

/* Primário — vermelho de urgência */
.btn--primary{
  background:var(--color-urgent-red);
  color:var(--color-on-primary);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--primary:active{ transform:translateY(0); opacity:0.95; }

/* Secundário — laranja (ação menos agressiva) */
.btn--secondary{
  background:var(--color-action-orange);
  color:var(--color-on-primary);
}

/* Ghost / outline — para ações menos prioritárias */
.btn--ghost{
  background:transparent;
  color:var(--color-neutral-dark);
  border:1px solid rgba(43,45,66,0.08);
}

/* CTA pequena/pill — para banners compactos */
.btn--pill{
  padding:0.5rem 0.85rem;
  border-radius:var(--radius-pill);
  font-size:0.95rem;
}

/* -------------------------
   Selos / badges / etiquetas
   ------------------------- */
/* Badge de promoção (amarelo) */
.badge {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.28rem 0.5rem;
  border-radius:999px;
  font-weight:700;
  font-size:0.82rem;
  line-height:1;
}
.badge--promo{
  background:linear-gradient(90deg, var(--color-attention-yellow), var(--color-action-orange));
  color:var(--color-neutral-dark);
  box-shadow: 0 2px 8px rgba(247,127,0,0.12);
}
.badge--stock-low{
  background:var(--color-urgent-red);
  color:var(--color-on-primary);
}

/* -------------------------
   Cartões / Blocos de produto
   ------------------------- */
.card {
  background:var(--color-white);
  border-radius:var(--radius-base);
  box-shadow:var(--shadow-sm);
  padding:1rem;
  border:1px solid rgba(43,45,66,0.04);
}

/* Card alternativo para destaque (fundo suave) */
.card--muted{
  background:var(--color-muted);
  border:1px solid rgba(43,45,66,0.03);
}

/* -------------------------
   Tipografia utilitária
   ------------------------- */
.h1{ font-size:1.6rem; font-weight:700; color:var(--color-neutral-dark); margin:0 0 .5rem 0; }
.h2{ font-size:1.15rem; font-weight:700; margin:0 0 .4rem 0; }
.lead{ font-size:1rem; color:rgba(43,45,66,0.9); }
.small{ font-size:0.85rem; color:var(--color-neutral-medium); }

/* -------------------------
   Feedback pós-ação (sucesso)
   ------------------------- */
.toast {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 0.85rem;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(6,214,160,0.12), rgba(255,255,255,0));
  border:1px solid rgba(6,214,160,0.18);
  color:var(--color-neutral-dark);
  box-shadow:var(--shadow-sm);
}
.toast--success{ color:var(--color-neutral-dark); }

/* -------------------------
   Fundo e seções
   ------------------------- */
/* Fundo principal do site: branco para clareza e contraste */
.bg--page{ background-color:var(--color-white); color:var(--color-neutral-dark); }

/* Fundo de bloco escuro para contraste (usar com texto claro) */
.section--dark{
  background:var(--color-neutral-dark);
  color:var(--color-on-primary);
  padding:2rem;
}

/* -------------------------
   Acessórios visuais — animações de urgência (sutileza)
   ------------------------- */
/* Pulsar leve para CTA que precisa chamar atenção */
@keyframes pulse-subtle {
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.02); opacity:0.98; }
  100%{ transform:scale(1); opacity:1; }
}
.pulse--cta{
  animation: pulse-subtle 1200ms infinite;
}

/* Piscar sutil para selo de tempo limitado (não abusar) */
@keyframes blink-slow {
  0%,100%{ opacity:1 }
  50%{ opacity:0.6 }
}
.blink--limited{ animation: blink-slow 1000ms infinite; }

/* -------------------------
   Acessibilidade / foco
   ------------------------- */
:focus{
  outline:3px solid rgba(99,102,241,0.12);
  outline-offset:2px;
  border-radius:6px;
}

/* -------------------------
   Exemplos rápidos de combinação (classes compostas)
   ------------------------- */
/* Botão principal de ação com selo de urgência ao lado */
.cta-row{ display:flex; gap:0.75rem; align-items:center; }
.cta-row .badge{ transform:translateY(-2px); }

/* -------------------------
   Dicas de implementação
   ------------------------- */
/* 
  Onde usar cada cor (resumo):
  - --color-urgent-red: CTA principal, estoque baixo, alertas.
  - --color-attention-yellow: tags de desconto, destaque de preço.
  - --color-action-orange: CTA secundário, banners promocionais.
  - --color-neutral-dark / --color-white: textos e fundos para legibilidade.
  - --color-success: confirmações / feedback positivo.
  
  Recomendações UX:
  - Use animações sutis (.pulse--cta, .blink--limited) apenas em um elemento por viewport para evitar distração.
  - Teste contraste (WCAG) especialmente nos botões: mantenha contraste mínimo de 4.5:1 para textos normais.
  - Em mobile, prefira botões mais altos (>=44px) e badges legíveis.
*/

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #fafafa; color: #333; height: auto;}

    header { background: #ff4d4d; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; position: relative; }
    header span { margin: 0; font-size: 1.5rem; }
    header a {text-decoration: none; color: inherit;}
    header p { margin: 5px 0 0; font-size: 0.9rem; }

    .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; background: none; border: none; color: white; }

    nav { margin-top: 10px; z-index: 99999;}
    nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
    nav ul li a { color: white; text-decoration: none; font-weight: bold; transition: color 0.3s; }
    nav ul li a:hover { color: #ffcccb; }

    
    @media (max-width: 768px) {
      nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #ff4d4d; padding: 15px 0; }
      nav ul { flex-direction: column; align-items: center; gap: 12px; }
      .menu-toggle { display: block; }
      nav.active { display: block; }
    }
footer { background: #333; color: white; text-align: center; padding: 20px; font-size: 0.9rem; }
footer a { color: #ff9900; text-decoration: none; }
footer a:hover { text-decoration: underline; }



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* Botão de compra urgente */
.btn-buy {
  position: relative;
  overflow: hidden; /* Necessário para o efeito de brilho */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;

  background: linear-gradient(90deg, var(--color-white), var(--color-muted));
  color: var(--color-urgent-red);
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.35);
  transition: transform 180ms ease, box-shadow 180ms ease;
  animation: pulse-buy 1.4s infinite;
}

/* Efeito de brilho no hover */
.btn-buy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 60%
  );
  transform: skewX(-25deg);
}

/* Hover — crescimento, brilho e animação do "shine" */
.btn-buy:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 8px 25px rgba(230, 57, 70, 0.55);
}

.btn-buy:hover::after {
  animation: shine 0.9s forwards;
}

/* Efeito ao clicar */
.btn-buy:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(230, 57, 70, 0.25);
}

/* Animação de pulsar para urgência */
@keyframes pulse-buy {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 22px rgba(230, 57, 70, 0.55);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.35);
  }
}

/* Animação do brilho correndo */
@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* Versão compacta para mobile */
.btn-buy--small {
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
}