/* ==========================================================================
   BM PLÁSTICOS — Landing Page
   Estilos customizados (complementam o Tailwind via CDN)
   Paleta (extraída da identidade da BM):
     - Laranja (marca/CTA): #F86000
     - Grafite (industrial): #16191D
   ========================================================================== */

:root {
  --orange: #F86000;
  --orange-600: #E15400;   /* hover dos CTAs */
  --orange-400: #FF7A2A;
  --graphite-900: #121417;
  --graphite-800: #16191D;
  --graphite-700: #1E232A;
  --graphite-600: #2A2F37;
  --ink: #14171A;
  --mist: #F3F4F6;
}

html { scroll-behavior: smooth; }
body { background-color: #ffffff; overflow-x: hidden; }
.font-heading { font-family: "Archivo", system-ui, sans-serif; }

/* ==========================================================================
   Header
   ========================================================================== */
#site-header { transition: background-color .3s ease, box-shadow .3s ease; }
#site-header.scrolled {
  background-color: rgba(18,20,23,.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px -10px rgba(0,0,0,.7);
}
/* Links do menu */
.nav-link { position: relative; color: #D7DBE0; font-weight: 500; transition: color .2s ease; }
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--orange); transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* Menu mobile */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mobile-menu.open { max-height: 420px; }

/* ==========================================================================
   Botões / CTA
   ========================================================================== */
.btn-cta {
  background-color: var(--orange); color: #fff; font-weight: 700;
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
  box-shadow: 0 10px 24px -8px rgba(248,96,0,.55);
}
.btn-cta:hover { background-color: var(--orange-600); transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(248,96,0,.65); }
.btn-cta:active { transform: translateY(0); }

.btn-outline {
  border: 1.5px solid rgba(248,96,0,.6); color: var(--orange); font-weight: 700;
  transition: background-color .2s ease, border-color .2s, color .2s;
}
.btn-outline:hover { background-color: rgba(248,96,0,.1); border-color: var(--orange); }

/* Selo de pedido mínimo */
.min-order { font-size: .8rem; font-weight: 600; opacity: .85; }

/* Selo de pedido mínimo em destaque (chamativo) */
.min-order-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(248,96,0,.12);
  border: 1px solid rgba(248,96,0,.45);
  color: var(--orange); font-weight: 700; font-size: .85rem;
  padding: .5rem 1rem; border-radius: 9999px; line-height: 1;
}
.min-order-badge svg { flex-shrink: 0; }
.min-order-badge .mo-strong { font-weight: 800; }
.min-order-badge .mo-soft { font-weight: 600; opacity: .85; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background:
    radial-gradient(900px 520px at 78% 38%, rgba(248,96,0,.16), transparent 60%),
    linear-gradient(180deg, #16191D 0%, #121417 100%);
}
/* Textura industrial sutil (grade fina) */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
}
/* glow atrás do balde do hero */
.hero-glow::after {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
  width: 70%; height: 70%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(248,96,0,.30), transparent 65%);
  filter: blur(10px);
}

/* ==========================================================================
   Cards de produto / genéricos
   ========================================================================== */
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(20,23,26,.45); }

.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(248,96,0,.12); color: var(--orange);
}
.icon-chip-dark { background: rgba(248,96,0,.16); }

/* régua decorativa */
.title-rule::after { content:""; display:block; width:60px; height:4px; border-radius:4px; background:var(--orange); margin-top:1rem; }
.title-rule.center::after { margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Animações de entrada ao rolar
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee__track, .wa-float { animation: none !important; }
}

/* ==========================================================================
   Marquee de logos de clientes
   ========================================================================== */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 3rem; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ==========================================================================
   Carrossel de depoimentos
   ========================================================================== */
.testi-track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.testi-slide { flex: 0 0 100%; }
.testi-dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(255,255,255,.25); transition: background .25s, width .25s; }
.testi-dot.active { background: var(--orange); width: 26px; }

/* ==========================================================================
   Modal (pop-up do formulário)
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 80; display: none; }
.modal.open { display: flex; }
.modal__overlay { position: absolute; inset: 0; background: rgba(10,12,14,.72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.modal__card { position: relative; margin: auto; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .28s ease, transform .28s ease; }
.modal.open .modal__overlay { opacity: 1; }
.modal.open .modal__card { opacity: 1; transform: none; }
body.modal-open { overflow: hidden; }

.field { background:#fff; border:1px solid #D5D9DE; color:var(--ink); border-radius:.6rem; padding:.8rem 1rem; width:100%; transition:border-color .2s, box-shadow .2s; }
.field::placeholder { color:#9aa3ad; }
.field:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(248,96,0,.15); }

/* ==========================================================================
   WhatsApp flutuante (abre o WhatsApp DIRETO)
   ========================================================================== */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 58px; height: 58px; border-radius: 9999px; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px -4px rgba(37,211,102,.6); animation: wa-pulse 2.6s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.07); }
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 8px 24px -4px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.45); }
  50% { box-shadow: 0 8px 24px -4px rgba(37,211,102,.55), 0 0 0 12px rgba(37,211,102,0); }
}

/* ==========================================================================
   Personalização IML — vitrine colorida com sparkles
   ========================================================================== */
/* seção IML inteira colorida (painel escuro + brilhos) */
.iml-section {
  background:
    radial-gradient(90% 80% at 12% 8%, rgba(248,96,0,.26), transparent 55%),
    radial-gradient(80% 80% at 92% 100%, rgba(56,189,248,.20), transparent 55%),
    radial-gradient(70% 70% at 70% 0%, rgba(236,72,153,.16), transparent 60%),
    linear-gradient(160deg, var(--graphite-800), var(--graphite-900));
}
.iml-showcase {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(248,96,0,.28), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(56,189,248,.20), transparent 55%),
    linear-gradient(160deg, var(--graphite-800), var(--graphite-900));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
/* brilho radial atrás dos baldes (esquerda) */
.iml-glow {
  background: radial-gradient(46% 55% at 26% 52%, rgba(255,122,42,.22), transparent 70%);
  pointer-events: none;
}
.iml-buckets { animation: iml-float 6s ease-in-out infinite; }
@keyframes iml-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.iml-video-wrap { position: relative; }
/* foto dos baldes sobre um "palco" iluminado (preenche o espaço, evita o vão) */
.iml-photo { display: flex; justify-content: center; }
.iml-photo::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 92%;
  background: radial-gradient(60% 62% at 50% 48%, rgba(255,150,70,.42), rgba(236,72,153,.18) 46%, transparent 72%);
  filter: blur(4px);
}
/* sombra/base sob os baldes para "aterrar" */
.iml-photo::after {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: 6%;
  transform: translateX(-50%);
  width: 62%; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 78%);
  filter: blur(3px);
}
/* moldura premium do vídeo (borda gradiente) */
.iml-video-frame {
  padding: 6px; border-radius: 1.7rem;
  background: linear-gradient(150deg, rgba(248,96,0,.95), rgba(236,72,153,.75) 55%, rgba(56,189,248,.8));
  box-shadow: 0 34px 66px -26px rgba(0,0,0,.85);
}
.iml-video-inner { border-radius: 1.35rem; overflow: hidden; background: #000; line-height: 0; }
/* palco da foto + vídeo pequeno de apoio */
.iml-stage { position: relative; display: flex; justify-content: center; }
/* vídeo pequeno sempre sobreposto no canto inferior-direito da foto */
.iml-video-mini { position: absolute; right: 0; bottom: -6px; width: 118px; z-index: 20; }
.iml-video-mini .iml-video-frame { padding: 5px; border-radius: 1.3rem; }
.iml-video-mini .iml-video-inner { border-radius: 1rem; }
@media (min-width: 1024px) {
  .iml-photo { transform: translateX(-26px); }           /* baldes um pouco à esquerda */
  .iml-video-mini { right: -26px; bottom: -18px; width: 150px; }
}
.iml-live-dot {
  width: 8px; height: 8px; border-radius: 9999px; background: #22C55E; display: inline-block;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.iml-badge {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
  padding: .45rem .9rem; border-radius: 9999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, var(--orange), #EC4899);
  box-shadow: 0 10px 24px -10px rgba(236,72,153,.7);
}
.iml-gradient-text {
  background: linear-gradient(90deg, var(--orange), #EC4899 55%, #38BDF8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   Tampas — foto
   ========================================================================== */
.tampa-photo { background: linear-gradient(160deg, #fff, #EEF1F4); }
.tampa-tag {
  padding: .4rem .8rem; border-radius: 9999px; font-size: .72rem; font-weight: 700;
  color: #fff; background: rgba(20,23,26,.72); backdrop-filter: blur(4px);
}

/* ==========================================================================
   Sustentabilidade — símbolo de reciclagem
   ========================================================================== */
.sustenta-symbol::after {
  content: ""; position: absolute; inset: -18%; z-index: 0;
  background: radial-gradient(circle, rgba(34,197,94,.35), transparent 65%);
  filter: blur(6px);
}
.sustenta-symbol img { animation: iml-float 7s ease-in-out infinite; }

/* ==========================================================================
   Por que escolher — foto
   ========================================================================== */
.porque-photo { max-height: 520px; }
.porque-photo img { min-height: 320px; }

@media (prefers-reduced-motion: reduce) {
  .iml-buckets, .sustenta-symbol img, .iml-live-dot { animation: none !important; }
}