:root{
  --brand-yellow:#f6c000;
  --brand-dark:#0b0f17;
  --brand-dark-2:#111827;
  --text:#e5e7eb;
}

html{scroll-behavior:smooth;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--brand-dark);
  color: var(--text);
}

a{color:inherit}
.navbar{
  backdrop-filter: blur(10px);
  background: rgba(11,15,23,.65);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar .nav-link{opacity:.85}
.navbar .nav-link:hover{opacity:1}
.btn-brand{
  background: var(--brand-yellow);
  color:#0b0f17;
  border: none;
  font-weight: 700;
}
.btn-brand:hover{filter:brightness(.95); color:#0b0f17;}
.btn-outline-light{border-color: rgba(255,255,255,.35);}
.badge-soft{
  background: rgba(246,192,0,.18);
  color: var(--brand-yellow);
  border:1px solid rgba(246,192,0,.25);
}

.hero{
  position:relative;
  min-height: 78vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 10% 20%, rgba(246,192,0,.25), transparent 55%),
    radial-gradient(900px 600px at 70% 30%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(11,15,23,.55), rgba(11,15,23,.92));
  z-index:1;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  object-fit:cover;
  width:100%;
  height:100%;
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.05) brightness(.85);
}
.hero-content{position:relative; z-index:2;}

.section{
  padding: 4.5rem 0;
}
.section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}
.kicker{
  color: rgba(229,231,235,.85);
}
.card-glass{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
  border-radius: 1.25rem;
}
.icon-pill{
  width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(246,192,0,.14);
  border:1px solid rgba(246,192,0,.22);
  color: var(--brand-yellow);
}
.product-img{
  width:100%;
  height: 210px;
  object-fit: contain;
  padding: 18px;
  background: rgba(255,255,255,.03);
  border-radius: 1rem;
}
.brand-strip img{
  max-height: 52px;
  filter: drop-shadow(0 12px 25px rgba(0,0,0,.4));
}
.divider{
  height:1px;background: rgba(255,255,255,.08);
}
.footer{
  background: rgba(17,24,39,.55);
  border-top: 1px solid rgba(255,255,255,.08);
}
.small-muted{color: rgba(229,231,235,.78);}

.floating-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1050;
  display:flex;
  gap:.6rem;
  align-items:center;
  text-decoration:none;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, .15);
  border: 1px solid rgba(37, 211, 102, .35);
  color: #eafff3;
  backdrop-filter: blur(8px);
}
.floating-whatsapp:hover{filter: brightness(1.03);}
.floating-whatsapp img{width:22px;height:22px}

:root{
      --bg-0: #060913;
      --bg-1: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);

      --elec-1: #FFD34D;
      --elec-2: #FFB000;
      --elec-3: #FFE08A;

      --wa-1: #25D366;
      --wa-2: #10B981;

      --txt: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.78);

      --radius: 16px;
      --radius-lg: 20px;

      --shadow-1: 0 10px 26px rgba(0,0,0,.35);
      --shadow-2: 0 18px 48px rgba(0,0,0,.45);

      --glow-elec: 0 0 0 1px rgba(255, 208, 77, .20), 0 14px 36px rgba(255, 176, 0, .18);
      --glow-wa:   0 0 0 1px rgba(37, 211, 102, .20), 0 14px 36px rgba(16, 185, 129, .18);
      --glow-soft: 0 0 0 1px rgba(255,255,255,.14), 0 14px 36px rgba(255,255,255,.08);
    }

    h1,h2,h3,h4,h5,h6,
    .section-title, .fw-bold, .navbar, .hero-content .display-5 { color:#fff !important; }
    .kicker, .lead, .small-muted { color: var(--muted) !important; }

    .hero-logo{
      display:inline-block;
      max-width: 320px;
      width: min(320px, 70vw);
      height: auto;
      margin: 4px 0 14px;
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
    }

    /* =========================
       BOTÕES: BRILHO + PULSO (GLOBAL)
       -> aplica em TODOS os .btn e botões flutuantes
    ========================== */
    .btn, .floating-whatsapp, .floating-top{
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: .2px;
      position: relative;
      overflow: hidden;
      transition: transform .16s ease, filter .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      will-change: transform;
      isolation: isolate; /* garante camadas do brilho/pulso */
    }

    /* shimmer constante */
    .btn::before, .floating-whatsapp::before, .floating-top::before{
      content:"";
      position:absolute;
      top:-60%;
      left:-70%;
      width: 55%;
      height: 240%;
      transform: rotate(18deg);
      background: linear-gradient(90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.34),
        rgba(255,255,255,0));
      opacity: .55;
      pointer-events:none;
      animation: btn-shimmer 2.7s ease-in-out infinite;
    }

    @keyframes btn-shimmer{
      0%   { transform: translateX(-55%) rotate(18deg); opacity: 0; }
      12%  { opacity: .55; }
      52%  { transform: translateX(275%) rotate(18deg); opacity: .12; }
      100% { transform: translateX(275%) rotate(18deg); opacity: 0; }
    }

    /* glow/pulso constante */
    .btn::after, .floating-whatsapp::after, .floating-top::after{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius: inherit;
      z-index:-1;
      pointer-events:none;
      filter: blur(10px);
      opacity: .8;
      animation: glowPulse 1.65s ease-in-out infinite;
      background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
    }
    @keyframes glowPulse{
      0%   { transform: scale(.94); opacity: .70; }
      55%  { transform: scale(1.08); opacity: .18; }
      100% { transform: scale(1.08); opacity: .12; }
    }

    .btn:focus-visible, .floating-whatsapp:focus-visible, .floating-top:focus-visible{
      outline: 3px solid rgba(255,255,255,.35);
      outline-offset: 3px;
    }

    .btn:hover, .floating-whatsapp:hover, .floating-top:hover{
      transform: translateY(-1px);
      filter: brightness(1.05);
    }
    .btn:active, .floating-whatsapp:active, .floating-top:active{
      transform: translateY(0);
      filter: brightness(.99);
    }

    /* =========================
       VARIAÇÕES DE BOTÃO
    ========================== */
    .btn-electric{
      color: #1a1400 !important;
      background: linear-gradient(135deg, var(--elec-1), var(--elec-2));
      border: 1px solid rgba(255, 235, 170, .35);
      box-shadow: var(--glow-elec), var(--shadow-1);
    }
    .btn-electric::after{
      background: radial-gradient(circle at 35% 30%, rgba(255,211,77,.35), rgba(255,176,0,0) 60%);
    }
    .btn-electric:hover{ box-shadow: var(--glow-elec), var(--shadow-2); }

    .btn-whatsapp{
      color: #07140e !important;
      background: linear-gradient(135deg, var(--wa-1), var(--wa-2));
      border: 1px solid rgba(200,255,225,.28);
      box-shadow: var(--glow-wa), var(--shadow-1);
    }
    .btn-whatsapp::after{
      background: radial-gradient(circle at 35% 30%, rgba(37,211,102,.30), rgba(16,185,129,0) 62%);
    }
    .btn-whatsapp:hover{ box-shadow: var(--glow-wa), var(--shadow-2); }

    .btn-outline-soft{
      color: #fff !important;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: var(--glow-soft), 0 10px 26px rgba(0,0,0,.25);
    }
    .btn-outline-soft::after{
      background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.20), rgba(255,255,255,0) 62%);
    }
    .btn-outline-soft:hover{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.30);
      box-shadow: var(--glow-soft), 0 18px 48px rgba(0,0,0,.35);
    }

    /* =========================
       CARDS (movimento)
    ========================== */
    .card-glass{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: 0 16px 48px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .card-motion{
      position: relative;
      overflow: hidden;
      transform-style: preserve-3d;
      transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
      will-change: transform;
    }
    .card-motion::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%),
        rgba(255,211,77,.18),
        rgba(255,255,255,0) 55%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events:none;
    }
    .card-motion::after{
      content:"";
      position:absolute;
      top:-40%;
      left:-60%;
      width: 60%;
      height: 180%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events:none;
    }
    .card-motion:hover{
      border-color: rgba(255,211,77,.28);
      box-shadow: 0 22px 70px rgba(0,0,0,.55);
    }
    .card-motion:hover::before,
    .card-motion:hover::after{ opacity: 1; }
    .card-motion:hover::after{ animation: shimmer 1.25s ease forwards; }

    @keyframes shimmer{
      from{ transform: translateX(0) rotate(18deg); }
      to  { transform: translateX(260%) rotate(18deg); }
    }

    /* WhatsApp flutuante */
    .floating-whatsapp{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 9999;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      color: #07140e;
      font-weight: 900;
      text-decoration: none;
      background: linear-gradient(135deg, var(--wa-1), var(--wa-2));
      border: 1px solid rgba(200,255,225,.28);
      box-shadow: var(--glow-wa), var(--shadow-2);
    }
    .floating-whatsapp::after{
      background: radial-gradient(circle at 35% 30%, rgba(37,211,102,.30), rgba(16,185,129,0) 62%);
    }

    /* NOVO: Botão flutuante "Voltar ao topo" (lado esquerdo) */
    .floating-top{
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 9999;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 14px;
      color: #1a1400;
      font-weight: 900;
      text-decoration: none;
      background: linear-gradient(135deg, var(--elec-1), var(--elec-2));
      border: 1px solid rgba(255, 235, 170, .35);
      box-shadow: var(--glow-elec), var(--shadow-2);
      cursor: pointer;

      /* aparece só quando rolar */
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity .22s ease, transform .22s ease, filter .16s ease;
    }
    .floating-top::after{
      background: radial-gradient(circle at 35% 30%, rgba(255,211,77,.32), rgba(255,176,0,0) 60%);
    }
    .floating-top.show{
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .floating-top i{
      font-size: 22px;
      line-height: 1;
    }

    /* Detalhes e preços */
    .product-title{ font-size: 1.05rem; line-height: 1.2; }
    .product-specs{
      margin: .6rem 0 .7rem;
      padding: .65rem .75rem;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
    }
    .product-specs .line{
      display:flex;
      gap:.5rem;
      align-items:flex-start;
      margin:.2rem 0;
      color: rgba(255,255,255,.86);
      font-size: .93rem;
    }
    .product-specs .line i{ margin-top: .05rem; opacity: .95; }
    .price-box{
      margin-top: .6rem;
      padding-top: .6rem;
      border-top: 1px dashed rgba(255,255,255,.16);
    }
    .price-old{
      color: rgba(255,255,255,.70);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(255, 176, 0, .85);
      font-weight: 700;
    }
    .price-new{
      font-size: 1.35rem;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
    .price-new .value{
      display:inline-block;
      padding: .1rem .55rem;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,211,77,.20), rgba(255,176,0,.12));
      border: 1px solid rgba(255,211,77,.22);
    }
    .payline{
      margin-top: .25rem;
      color: rgba(255,255,255,.82);
      font-weight: 700;
      font-size: .92rem;
    }

    @media (prefers-reduced-motion: reduce){
      .btn::before, .btn::after,
      .floating-whatsapp::before, .floating-whatsapp::after,
      .floating-top::before, .floating-top::after,
      .card-motion::after { animation: none !important; }
      .btn, .floating-whatsapp, .floating-top, .card-motion{ transition: none !important; }
    }