/* ============================================================
   OBSIDIAN & LIME — Design System Override
   ============================================================ */

/* Nota: @import removido — fonts carregadas via <link> no HTML (elimina roundtrip extra) */

/* ---- CSS Variables ---- */
:root {
  --ol-bg: #000000;
  --ol-surface: #0c0c0c;
  --ol-lime: #bf00ff;
  --ol-emerald: #7c3aed;
  --ol-text: #ebebeb;
  --ol-text-secondary: rgba(235,235,235, 0.6);
  --ol-text-muted: rgba(235,235,235, 0.3);
  --ol-border: rgba(255,255,255, 0.1);
  --ol-lime-10: rgba(191,0,255, 0.1);
  --ol-lime-30: rgba(191,0,255, 0.3);
  --ol-lime-40: rgba(191,0,255, 0.4);
  --ol-glass-bg: rgba(255, 255, 255, 0.03);
  --ol-glass-border: rgba(255, 255, 255, 0.1);
  --ol-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ---- Base / Body ---- */
html, :host {
  font-family: 'Space Grotesk', sans-serif !important;
}

body {
  font-family: 'Space Grotesk', sans-serif !important;
  background-color: var(--ol-bg) !important;
  color: var(--ol-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Container Shell ---- */
#root > div:first-child {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 2.5rem;
  border: 1px solid var(--ol-border);
  background-color: var(--ol-surface) !important;
  overflow: hidden;
  position: relative;
}

/* ---- Grid Background Overlay ---- */
#root > div:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* ---- Typography: Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
}

/* ---- Typography: Body ---- */
p, span, div, li, a, button, input, textarea, select, label {
  font-family: 'Space Grotesk', sans-serif !important;
}

/* ---- Color Overrides: Green #00ff41 → Purple #bf00ff ---- */

/* Text */
.text-\[\#00ff41\] {
  color: var(--ol-lime) !important;
}

/* Background */
.bg-\[\#00ff41\] {
  background-color: var(--ol-lime) !important;
}

.bg-\[\#00ff41\]\/10 {
  background-color: var(--ol-lime-10) !important;
}

/* Border */
.border-\[\#00ff41\] {
  border-color: var(--ol-lime) !important;
}

.border-\[\#00ff41\]\/50 {
  border-color: var(--ol-lime-30) !important;
}

/* Hover */
.hover\:bg-\[\#00dd35\]:hover {
  background-color: #9900cc !important;
}

/* Group hover */
.group:hover .group-hover\:bg-\[\#00ff41\] {
  background-color: var(--ol-lime) !important;
}

.group:hover .group-hover\:text-\[\#00ff41\] {
  color: var(--ol-lime) !important;
}

/* ---- Color Overrides: Gold #FFD700 → Lime ---- */
.text-\[\#FFD700\] {
  color: var(--ol-lime) !important;
}

.bg-\[\#FFD700\] {
  background-color: var(--ol-lime) !important;
}

.border-\[\#FFD700\] {
  border-color: var(--ol-lime) !important;
}

.fill-\[\#FFD700\] {
  fill: var(--ol-lime) !important;
}

/* Stars/ratings → lime */
.text-yellow-400 {
  color: var(--ol-lime) !important;
}

/* ---- Color Overrides: Dark forest green → Black ---- */
.bg-\[\#3d5a40\] {
  background-color: var(--ol-surface) !important;
}

/* ---- Background Overrides ---- */
.bg-black {
  background-color: var(--ol-bg) !important;
}

.bg-gray-900 {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ol-glass-border) !important;
  border-radius: 2rem !important;
  transition: border-color 0.2s ease !important;
}

.bg-gray-900:hover {
  border-color: var(--ol-lime-40) !important;
}

.bg-gray-800 {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ol-glass-border) !important;
  border-radius: 2rem !important;
  transition: border-color 0.2s ease !important;
}

.bg-gray-800:hover {
  border-color: var(--ol-lime-40) !important;
}

.bg-gray-600 {
  background-color: rgba(255,255,255, 0.08) !important;
}

.bg-gray-500 {
  background-color: rgba(255,255,255, 0.1) !important;
}

/* White backgrounds → dark */
.bg-white {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ol-lime-30) !important;
  border-radius: 2rem !important;
}

.bg-gray-50 {
  background-color: #0f0f0f !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* Black with opacity */
.bg-black\/50 {
  background-color: rgba(0,0,0,0.5) !important;
}

.bg-black\/60 {
  background-color: rgba(0,0,0,0.6) !important;
}

.hover\:bg-black\/70:hover {
  background-color: rgba(0,0,0,0.7) !important;
}

.hover\:bg-black\/80:hover {
  background-color: rgba(0,0,0,0.8) !important;
}

.hover\:bg-gray-800:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

.bg-red-900\/20 {
  background-color: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--ol-glass-border) !important;
  border-radius: 2rem !important;
}

/* ---- Text Color Overrides ---- */
.text-white {
  color: var(--ol-text) !important;
}

.text-black {
  color: #000000 !important;
}

.text-gray-200 {
  color: var(--ol-text) !important;
}

.text-gray-300 {
  color: var(--ol-text-secondary) !important;
}

.text-gray-400 {
  color: var(--ol-text-secondary) !important;
}

.text-gray-500 {
  color: var(--ol-text-muted) !important;
}

.text-gray-600 {
  color: var(--ol-text-secondary) !important;
}

.text-gray-700 {
  color: var(--ol-text-secondary) !important;
}

.text-red-500 {
  color: #ef4444 !important;
}

.text-red-600 {
  color: #dc2626 !important;
}

/* ---- Border Overrides ---- */
.border-gray-700 {
  border-color: var(--ol-border) !important;
}

.border-gray-800 {
  border-color: var(--ol-border) !important;
}

.border-red-500\/50 {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ---- Gradient Overrides ---- */
.bg-gradient-to-b,
.bg-gradient-to-br {
  background-image: none !important;
  background-color: var(--ol-bg) !important;
}

.from-black,
.from-gray-800,
.via-\[\#00140a\],
.via-\[\#001a0d\],
.via-\[\#001f0f\],
.via-\[\#00260f\],
.via-\[\#002612\],
.via-\[\#003319\],
.via-\[\#00331a\],
.via-gray-900,
.to-black {
  --tw-gradient-from: #000000 !important;
  --tw-gradient-to: #000000 !important;
}

/* ---- Border Radius Upgrades ---- */
.rounded-2xl {
  border-radius: 2rem !important;
}

.rounded-xl {
  border-radius: 1.5rem !important;
}

.rounded-lg {
  border-radius: 1rem !important;
}

.rounded-\[35px\] {
  border-radius: 2rem !important;
}

.rounded-\[45px\] {
  border-radius: 2.5rem !important;
}

/* ---- CTA Buttons ---- */
/* Main CTA buttons (lime background) */
.bg-\[\#00ff41\],
a[class*="bg-[#00ff41]"],
button[class*="bg-[#00ff41]"] {
  background-color: var(--ol-lime) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 24px rgba(191, 0, 255, 0.28) !important;
  transition: box-shadow 0.2s ease !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -0.02em;
}

.bg-\[\#00ff41\]:hover,
a[class*="bg-[#00ff41]"]:hover,
button[class*="bg-[#00ff41]"]:hover {
  box-shadow: 0 0 40px rgba(191, 0, 255, 0.45) !important;
}

/* Gold buttons → lime */
.bg-\[\#FFD700\],
a[class*="bg-[#FFD700]"],
button[class*="bg-[#FFD700]"] {
  background-color: var(--ol-lime) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 24px rgba(191, 0, 255, 0.28) !important;
  transition: box-shadow 0.2s ease !important;
}

/* ---- Badges / Tags / Labels ---- */
.uppercase.tracking-widest {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.2em !important;
  background-color: var(--ol-lime-10) !important;
  border: 1px solid var(--ol-lime-30) !important;
  color: var(--ol-lime) !important;
  border-radius: 9999px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 10px !important;
}

/* ---- Pulse Animation (apenas botão CTA) ---- */
@keyframes pulse-button {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ---- Obsidian Pulse (dot badge) — movido do JS para reduzir trabalho inline ---- */
@keyframes obsidian-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191,0,255,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(191,0,255,0); }
}
.obsidian-pulse-dot {
  animation: obsidian-pulse 2s ease-in-out infinite;
}

.pulse-glow {
  animation: none !important;
  text-shadow: none !important;
}

/* ---- Cards inside grids ---- */
.grid > div[class*="bg-gray-900"],
.grid > div[class*="bg-gray-800"],
.grid > div[class*="rounded"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ol-glass-border) !important;
  border-radius: 2rem !important;
  transition: border-color 0.2s ease !important;
}

.grid > div[class*="bg-gray-900"]:hover,
.grid > div[class*="bg-gray-800"]:hover,
.grid > div[class*="rounded"]:hover {
  border-color: var(--ol-lime-40) !important;
}

/* ---- Icon containers ---- */
div[class*="bg-[#00ff41]/10"] {
  background-color: var(--ol-lime-10) !important;
  border-radius: 0.75rem !important;
}

/* ---- Pricing section special styling ---- */
.bg-white[class*="rounded"],
div.bg-white[class*="p-"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ol-lime-30) !important;
  border-radius: 2rem !important;
}

/* Price text - make it lime colored */
.bg-white .text-4xl,
.bg-white .text-5xl,
.bg-white .font-black {
  color: var(--ol-lime) !important;
}

/* Strikethrough price */
.line-through {
  color: var(--ol-text-muted) !important;
}

/* ---- Header/Nav ---- */
nav, header, [class*="fixed"][class*="top-0"] {
  background: rgba(0,0,0,0.92) !important;
}

/* ---- Footer ---- */
footer, [class*="border-t"][class*="py-"] {
  background-color: var(--ol-bg) !important;
}

footer *, [class*="border-t"][class*="py-"] * {
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
}

footer a:hover, [class*="border-t"] a:hover {
  color: var(--ol-lime) !important;
}

/* ---- Transition for all interactive elements ---- */
a, button, [role="button"], .cursor-pointer {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

/* ---- Shadow overrides ---- */
.shadow-2xl {
  box-shadow: 0 25px 60px -12px rgba(0,0,0,0.5) !important;
}

.shadow {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ---- Blur decorative elements ---- */
.blur-3xl, .blur-\[120px\], .blur-xl {
  opacity: 0.12 !important;
  filter: blur(30px) !important; /* reduz 120px → 30px: ~75% menos GPU/compositing */
}



/* ---- Scrollbar styling ---- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ol-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(191, 0, 255, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(191, 0, 255, 0.4);
}

/* ---- Noise Texture Overlay (applied via JS) ---- */
.obsidian-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.15;
}

/* ---- Glow Spheres ---- */
.obsidian-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(120px);
  z-index: 0;
}

.obsidian-glow--lime {
  background: radial-gradient(circle, rgba(191,0,255,0.15) 0%, transparent 70%);
}

.obsidian-glow--emerald {
  background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
}

/* ---- Min height fix ---- */
.min-h-screen {
  min-height: 100vh;
  background-color: var(--ol-bg) !important;
}

/* ---- Image styling ---- */
img {
  border-radius: 1.5rem;
}

/* ---- Selection color ---- */
::selection {
  background-color: rgba(191, 0, 255, 0.3);
  color: var(--ol-text);
}

/* ---- EXTRA FIXES: Readability & Color Corrections ---- */

/* Price R$67 strikethrough MUST be red */
.line-through {
  color: #dc2626 !important;
}

/* But preserve lime for non-price strikethroughs if any */
.text-red-600.line-through,
.text-red-500.line-through {
  color: #dc2626 !important;
}

.text-gray-500.line-through {
  color: #dc2626 !important;
}

/* Fix text-gray-700 - too dark on dark backgrounds */
.text-gray-700 {
  color: rgba(235,235,235, 0.6) !important;
}

/* bg-gray-50 section (pricing) - fix all child text */
.bg-gray-50 .text-black,
.bg-gray-50 .font-black {
  color: #ebebeb !important;
}

.bg-gray-50 .text-\[\#00ff41\] {
  color: var(--ol-lime) !important;
}

.bg-gray-50 .text-red-600 {
  color: #dc2626 !important;
}

.bg-gray-50 .line-through {
  color: #dc2626 !important;
}

/* bg-white section (also pricing) - fix text */
.bg-white .text-black,
.bg-white .font-black {
  color: #ebebeb !important;
}

/* ── Image dimensions — previne CLS quando CSS async carrega após React renderizar ──
   Complementa o CSS inline em index.html e os atributos HTML setados pelo JS.  */
img[alt="Camila Freitas"],
img[alt="Lucas Andrade"],
img[alt="Mariana L."] { width: 40px !important; height: 40px !important; aspect-ratio: 1; object-fit: cover; }
img[alt="Biblioteca Mistica Digital"] { aspect-ratio: 1; max-width: 192px; max-height: 192px; }

.bg-white .text-\[\#00ff41\] {
  color: var(--ol-lime) !important;
}

/* Social proof container override */
.bg-\[\#3d5a40\].text-black {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(191,0,255,0.3) !important;
  border-radius: 9999px !important;
  color: #ebebeb !important;
}

/* Hide the frequency-ring badge container and its parent wrapper */
.frequency-ring,
.frequency-ring ~ *,
div:has(> .frequency-ring) {
  display: none !important;
}

/* Ensure font-black (900 weight) text is readable on dark — but NOT when it has accent color */
.font-black:not(.text-\[\#00ff41\]):not(.text-\[\#FFD700\]) {
  color: var(--ol-text) !important;
}

/* CTA buttons - dark text on lime bg */
.bg-\[\#00ff41\] .text-black,
.bg-\[\#00ff41\].text-black,
a[class*="bg-[#00ff41]"],
.rounded-lg[class*="text-black"][class*="font-black"]:not(.text-black.bg-white) {
  color: #000000 !important;
}

/* Fix Bebas Neue styled elements to Space Grotesk */
[style*="Bebas Neue"] {
  font-family: 'Space Grotesk', sans-serif !important;
}