/**
 * Madruga Mix — paleta inspirada na logo (amarelo, preto, âmbar, vermelho, branco, azul claro).
 * Vitrine clara; hero legível; sem “modo cave”.
 * Escopo: html.madruga-mix.lab3d-vitrine
 */

html.madruga-mix.lab3d-vitrine {
  /* Título em gradiente (usa lab3d-premium) — preto → amarelo → âmbar → vermelho suave */
  --lab3d-blue-deep: #0c0a09;
  --lab3d-blue-light: #eab308;
  --lab3d-yellow: #fde047;
  --lab3d-orange: #ea580c;
  --lab3d-lime: #16a34a;
  --lab3d-magenta: #dc2626;
  --lab3d-red: #b91c1c;
  /* extras logo */
  --mm-sky: #38bdf8;
  --mm-cream: #fffbeb;
  --mm-paper: #fafaf9;
}

html.madruga-mix.lab3d-vitrine body {
  font-family: 'Outfit', 'Poppins', system-ui, sans-serif;
  /* Página majoritariamente clara: creme no hero + papel na lista */
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(250, 204, 21, 0.35), transparent 58%),
    radial-gradient(700px 400px at 8% 25%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(600px 360px at 95% 20%, rgba(248, 113, 113, 0.08), transparent 48%),
    linear-gradient(
      180deg,
      #fffbeb 0%,
      #fef3c7 min(38vh, 320px),
      #fafaf9 min(38vh, 320px),
      #f5f5f4 100%
    ) !important;
  color: #0c0a09 !important;
  --surface-body: transparent;
  --surface-card: rgba(255, 255, 255, 0.97);
  --surface-soft: rgba(255, 251, 235, 0.92);
  --border-color: rgba(28, 25, 23, 0.08);
  --border-strong: rgba(234, 88, 12, 0.22);
  --text-primary: #0c0a09;
  --text-secondary: #3f3f3a;
  --text-muted: #52514c;
  --card-shadow: 0 12px 32px rgba(28, 25, 23, 0.08);
  --card-shadow-hover: 0 18px 44px rgba(234, 179, 8, 0.22);
}

/* Grade decorativa: bolhas quentes bem suaves */
html.madruga-mix.lab3d-vitrine .lab3d-wire-grid {
  opacity: 0.22;
  background-size: 140px 140px, 200px 200px, 48px 48px, 48px 48px;
  background-image:
    radial-gradient(circle at 30% 45%, rgba(250, 204, 21, 0.2) 0, transparent 38%),
    radial-gradient(circle at 78% 62%, rgba(253, 224, 71, 0.14) 0, transparent 42%),
    linear-gradient(rgba(251, 191, 36, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.05) 1px, transparent 1px);
  animation: madruga-mix-bubbles-rise 48s linear infinite;
}

@keyframes madruga-mix-bubbles-rise {
  0% {
    background-position: 0 0, 24px 40px, 0 0, 0 0;
  }
  100% {
    background-position: 0 -160px, 24px -120px, 0 0, 0 0;
  }
}

/* Hero: claro, com toques amarelo / céu / âmbar (não azul noturno) */
html.madruga-mix.lab3d-vitrine .lab3d-hero-grad {
  background:
    radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.45), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.14), transparent 48%),
    radial-gradient(circle at 50% 88%, rgba(254, 243, 199, 0.9), transparent 55%),
    linear-gradient(180deg, #fffef7 0%, #fffbeb 45%, rgba(255, 255, 255, 0.97) 100%);
}

html.madruga-mix.lab3d-vitrine .lab3d-hero-cap {
  opacity: 0.07;
  filter: saturate(1.05) brightness(1.08);
}

html.madruga-mix.lab3d-vitrine .lab3d-hero-scan {
  opacity: 0.18;
  mix-blend-mode: multiply;
}

html.madruga-mix.lab3d-vitrine .lab3d-float-cube {
  border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
  background: linear-gradient(145deg, rgba(250, 204, 21, 0.35), rgba(254, 243, 199, 0.5), rgba(56, 189, 248, 0.12));
  border-color: rgba(250, 204, 21, 0.35);
  animation-duration: 14s !important;
}

@keyframes madruga-mix-bubble-drift {
  0%,
  100% {
    transform: translate3d(0, 6px, 0) scale(1);
    opacity: 0.42;
  }
  50% {
    transform: translate3d(0, -20px, 0) scale(1.1);
    opacity: 0.65;
  }
}

html.madruga-mix.lab3d-vitrine .lab3d-cube {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75), transparent 42%),
    radial-gradient(circle at 72% 70%, rgba(250, 204, 21, 0.55), rgba(251, 146, 60, 0.25));
  box-shadow:
    0 0 14px rgba(250, 204, 21, 0.35),
    inset 0 -3px 8px rgba(28, 25, 23, 0.12);
  animation-name: madruga-mix-bubble-drift !important;
  animation-duration: 11s !important;
  animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  html.madruga-mix.lab3d-vitrine .lab3d-wire-grid,
  html.madruga-mix.lab3d-vitrine .lab3d-float-cube,
  html.madruga-mix.lab3d-vitrine .lab3d-cube {
    animation: none !important;
  }
}

/* Tipografia do hero: mais contraste sobre fundo claro */
html.madruga-mix.lab3d-vitrine .lab3d-eyebrow {
  color: #292524 !important;
  font-weight: 700;
  text-shadow: none;
}

/* Título: gradiente mais “tinta” (menos pastel no fim da frase) */
html.madruga-mix.lab3d-vitrine .lab3d-hero-inner h2 {
  background: linear-gradient(125deg, #0c0a09 0%, #5c4813 28%, #b45309 58%, #9f1239 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

html.madruga-mix.lab3d-vitrine .lab3d-hero-sub {
  color: #1a1814 !important;
  font-weight: 600;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  letter-spacing: 0.02em;
}

/* Um único CTA principal no hero */
html.madruga-mix.lab3d-vitrine .lab3d-hero-buttons--solo {
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

/* Moldura do logo: amarelo + vermelho como a borda da arte */
html.madruga-mix.lab3d-vitrine .lab3d-logo-shell {
  background: linear-gradient(135deg, #facc15, #fde047 45%, #f87171 100%);
  box-shadow: 0 14px 36px rgba(250, 204, 21, 0.35), 0 0 0 1px rgba(185, 28, 28, 0.12);
}

html.madruga-mix.lab3d-vitrine .lab3d-btn-primary {
  background: linear-gradient(135deg, #facc15, #eab308) !important;
  color: #0c0a09 !important;
  border: none;
  box-shadow: 0 10px 28px rgba(234, 179, 8, 0.45);
}

html.madruga-mix.lab3d-vitrine .lab3d-btn-primary:hover {
  box-shadow: 0 14px 34px rgba(234, 88, 12, 0.25);
}

html.madruga-mix.lab3d-vitrine .lab3d-btn-ghost {
  border-color: rgba(28, 25, 23, 0.14) !important;
  color: #0c0a09 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px);
}

html.madruga-mix.lab3d-vitrine .lab3d-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(234, 179, 8, 0.55) !important;
}

/* Faixa WhatsApp: verde claro legível (não bloco preto) */
html.madruga-mix.lab3d-vitrine .lab3d-pers-spotlight {
  border: 1px solid rgba(22, 163, 74, 0.35);
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #052e16;
  box-shadow: 0 12px 32px rgba(22, 163, 74, 0.12);
}

html.madruga-mix.lab3d-vitrine .lab3d-pers-spotlight-body strong {
  color: #14532d;
}

html.madruga-mix.lab3d-vitrine .lab3d-pers-spotlight-sub {
  color: #166534;
}

html.madruga-mix.lab3d-vitrine .lab3d-pers-spotlight-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

html.madruga-mix.lab3d-vitrine .lab3d-pers-spotlight-arrow {
  color: #14532d;
}

@supports not (background-clip: text) {
  html.madruga-mix.lab3d-vitrine .lab3d-hero-inner h2 {
    color: #0c0a09;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Chips de destaque: fundo claro + texto escuro (evita texto amarelo em pill branco) */
html.madruga-mix.lab3d-vitrine .lab3d-glass-strip {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(28, 25, 23, 0.1);
  box-shadow: 0 8px 28px rgba(28, 25, 23, 0.06);
}

html.madruga-mix.lab3d-vitrine .lab3d-glass-strip .lab3d-hero-chip-prod {
  background: #ffffff !important;
  border: 1px solid rgba(28, 25, 23, 0.1) !important;
  color: #0c0a09 !important;
}

html.madruga-mix.lab3d-vitrine .lab3d-glass-strip .lab3d-hero-chip-prod:hover {
  border-color: rgba(234, 179, 8, 0.65) !important;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.25);
}