:root {
  --card: #FFFFFF;
  --ring: #565add;
  --input: #f0f1ff;
  --muted: #f1f0f3;
  --accent: #e8f5e3;
  --border: #d6d3dc;
  --radius: 2rem;
  --shadow: 0 0.125rem 0.375rem 0px rgba(0,0,0,.04),0px 0.3125rem 1.125rem 0 rgba(0,0,0,.06),0 1.5rem 5.1875rem 0 rgba(0,0,0,.1);
  --popover: #FFFFFF;
  --primary: #565add;
  --font-sans: "Circular", "Helvetica", sans-serif;
  --secondary: #f0f1ff;
  --background: #FFFFFF;
  --foreground: #111019;
  --spacing-lg: 1.5rem;
  --spacing-md: 1rem;
  --spacing-sm: 0.5rem;
  --spacing-xl: 2rem;
  --destructive: #cf3917;
  --card-foreground: #111019;
  --muted-foreground: #514f6d;
  --accent-foreground: #224229;
  --popover-foreground: #111019;
  --primary-foreground: #f0f1ff;
  --secondary-foreground: #4b42ae;
  --destructive-foreground: #ffeae5;
}

.dark {
  --card: #111019;
  --ring: #565add;
  --input: #252434;
  --muted: #252434;
  --accent: #142a19;
  --border: #3b394e;
  --popover: #111019;
  --primary: #565add;
  --secondary: #2b1c50;
  --background: #111019;
  --foreground: #FFFFFF;
  --destructive: #8e2710;
  --card-foreground: #FFFFFF;
  --muted-foreground: #bbb6c6;
  --accent-foreground: #c5e2c9;
  --popover-foreground: #FFFFFF;
  --primary-foreground: #f0f1ff;
  --secondary-foreground: #f0f1ff;
  --destructive-foreground: #ffeae5;
}

@theme inline {
  --color-card: var(--card);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-radius: var(--radius);
  --color-shadow: var(--shadow);
  --color-popover: var(--popover);
  --color-primary: var(--primary);
  --color-font-sans: var(--font-sans);
  --color-secondary: var(--secondary);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-spacing-lg: var(--spacing-lg);
  --color-spacing-md: var(--spacing-md);
  --color-spacing-sm: var(--spacing-sm);
  --color-spacing-xl: var(--spacing-xl);
  --color-destructive: var(--destructive);
  --color-card-foreground: var(--card-foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive-foreground: var(--destructive-foreground);
}

/* ============================================
   ESTILOS PARA HEADER E NAVEGAÇÃO
   ============================================ */

/* Garantir que o header fique acima de tudo */
header {
  position: relative;
  z-index: 10000 !important;
}

header nav {
  position: relative;
  z-index: 10000 !important;
}

/* Garantir que elementos do header tenham contexto de empilhamento */
header > *,
header nav > * {
  position: relative;
  z-index: 10000 !important;
}

/* ============================================
   ESTILOS PARA DROPDOWNS E MENUS
   ============================================ */

/* Estilos principais para dropdowns Radix UI */
[data-radix-popper-content-wrapper],
[data-radix-popover-content],
[role="menu"],
[role="menubar"],
nav [role="menu"],
nav [role="menubar"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  z-index: 10001 !important;
  position: relative;
  /* Desabilitar animações e transições */
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  /* Garantir que o dropdown permaneça visível */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Containers principais dos dropdowns */
[data-radix-popper-content-wrapper] > div,
[data-radix-popover-content] > div,
nav [data-radix-popper-content-wrapper] > div,
nav [data-radix-popover-content] > div,
nav [role="menu"] > div,
nav [role="menubar"] > div {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  /* Desabilitar animações e transições */
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Elementos filhos diretos de dropdowns */
[data-radix-popper-content-wrapper] > div:first-child,
[data-radix-popover-content] > div:first-child {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  padding: 0.5rem;
  border-radius: var(--radius);
}

/* Garantir que elementos dentro do dropdown tenham fundo transparente (exceto containers) */
[data-radix-popper-content-wrapper] *,
[data-radix-popover-content] *,
[role="menu"] *,
[role="menubar"] * {
  background-color: transparent;
}

/* Mas os containers principais devem ter fundo */
[data-radix-popper-content-wrapper] > *,
[data-radix-popover-content] > *,
[role="menu"] > *,
[role="menubar"] > * {
  background-color: var(--popover) !important;
}

/* ============================================
   ESTILOS PARA ITENS DO MENU
   ============================================ */

/* Itens do menu dropdown */
[role="menuitem"],
[role="menuitemcheckbox"],
[role="menuitemradio"] {
  background-color: transparent;
}

[role="menuitem"]:hover,
[role="menuitemcheckbox"]:hover,
[role="menuitemradio"]:hover {
  background-color: var(--muted) !important;
}

/* ============================================
   ESTILOS PARA CLASSES DE DROPDOWN
   ============================================ */

/* Containers de dropdown por classe */
div[class*="popover"],
div[class*="dropdown"],
div[class*="menu-content"],
div[class*="PopoverContent"],
div[class*="DropdownMenuContent"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  z-index: 10001 !important;
  position: relative;
}

/* Classes relacionadas a popover/dropdown */
.bg-popover,
[class*="bg-popover"],
[class*="popover"],
[class*="dropdown"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
}

/* ============================================
   ESTILOS PARA HOVER E ESTADOS
   ============================================ */

/* Elementos que aparecem ao hover no menu */
nav div[class*="group"]:hover > div[class*="absolute"],
nav div[class*="group"]:focus > div[class*="absolute"],
nav div[class*="group"]:focus-within > div[class*="absolute"],
nav div[class*="group"]:hover > div[class*="fixed"],
nav div[class*="group"]:focus > div[class*="fixed"],
nav div[class*="group"]:focus-within > div[class*="fixed"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
  z-index: 10001 !important;
}

/* Conteúdo de dropdown que aparece ao passar o mouse */
nav > div > div[class*="absolute"],
nav > div > div[class*="fixed"],
header nav > div > div[class*="absolute"],
header nav > div > div[class*="fixed"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  z-index: 10001 !important;
}

/* Elementos com data-state="open" */
header [data-state="open"],
nav [data-state="open"],
header div[data-state="open"],
nav div[data-state="open"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  z-index: 10001 !important;
}

/* Elementos que aparecem quando data-state="open" */
nav button[data-state="open"] ~ *,
nav a[data-state="open"] ~ *,
nav [data-state="open"] ~ *,
nav [data-state="open"] + *,
nav button[data-state="open"] + *,
nav a[data-state="open"] + * {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
}

/* ============================================
   ESTILOS PARA ELEMENTOS COM POSITION
   ============================================ */

/* Elementos com position absolute/fixed dentro do header */
header [style*="position: absolute"],
header [style*="position: fixed"],
header div[style*="position: absolute"],
header div[style*="position: fixed"] {
  z-index: 10001 !important;
}

/* Elementos com position absolute/fixed no nav (exceto particles) */
nav div[class*="absolute"]:not([class*="particles"]),
nav div[class*="fixed"]:not([class*="particles"]) {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10001 !important;
}

/* Elementos com z-index alto (dropdowns) */
div[style*="z-index"][style*="999"],
div[style*="z-index"][style*="50"],
div[style*="z-index"][style*="100"] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
}

/* ============================================
   ESTILOS PARA PORTALS (ELEMENTOS NO BODY)
   ============================================ */

/* Dropdowns renderizados em portais (fora do header) */
body > [data-radix-popper-content-wrapper],
body > [data-radix-popover-content],
body > div[data-radix-popper-content-wrapper],
body > div[data-radix-popover-content] {
  background-color: var(--popover) !important;
  background: var(--popover) !important;
  z-index: 10001 !important;
}

/* Elementos com classes de dropdown no body */
body > div[class*="popover"],
body > div[class*="dropdown"],
body > div[class*="PopoverContent"],
body > div[class*="DropdownMenuContent"] {
  z-index: 10001 !important;
  background-color: var(--popover) !important;
  background: var(--popover) !important;
}

/* Elementos filhos de dropdowns em portais */
[data-radix-popper-content-wrapper] > *,
[data-radix-popover-content] > * {
  position: relative;
  z-index: 10001 !important;
}/* ============================================
   ESTILOS PARA SEÇÕES DA PÁGINA
   ============================================ */

/* Garantir que seções da página (hero, etc) não fiquem acima do header */
section:first-of-type,
main:first-of-type,
[class*="hero"] {
  position: relative;
  z-index: 1 !important;
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA HEADER
   ============================================ */

/* Garantir que todos os elementos de dropdown no header tenham z-index alto */
header [data-radix-popper-content-wrapper],
header [data-radix-popover-content],
header [role="menu"],
header [role="menubar"] {
  z-index: 10001 !important;
}

/* ============================================
   DESABILITAR ANIMAÇÕES NOS DROPDOWNS
   ============================================ */

/* Desabilitar todas as animações e transições em dropdowns */
[data-radix-popper-content-wrapper],
[data-radix-popover-content],
[data-radix-popper-content-wrapper] *,
[data-radix-popover-content] *,
[role="menu"],
[role="menubar"],
[role="menu"] *,
[role="menubar"] *,
nav [data-radix-popper-content-wrapper],
nav [data-radix-popover-content],
nav [role="menu"],
nav [role="menubar"] {
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
}

/* Garantir que dropdowns abertos permaneçam visíveis */
[data-state="open"] ~ [data-radix-popper-content-wrapper],
[data-state="open"] ~ [data-radix-popover-content],
nav button[data-state="open"] ~ *,
nav a[data-state="open"] ~ * {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: none !important;
  animation: none !important;
}

/* Garantir que elementos com data-state="open" não tenham animações */
[data-state="open"],
button[data-state="open"],
a[data-state="open"] {
  transition: none !important;
  animation: none !important;
}

/* Garantir que dropdowns não fechem ao passar o mouse */
nav button:hover ~ [data-radix-popper-content-wrapper],
nav button:hover ~ [data-radix-popover-content],
nav a:hover ~ [data-radix-popper-content-wrapper],
nav a:hover ~ [data-radix-popover-content],
nav [data-state="open"]:hover ~ [data-radix-popper-content-wrapper],
nav [data-state="open"]:hover ~ [data-radix-popover-content] {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: auto !important;
}

/* ============================================
   SCROLL SUAVE E ÂNCORAS
   ============================================ */

/* Scroll suave para toda a página */
html {
  scroll-behavior: smooth;
}

/* Ajustar scroll para compensar header fixo */
html {
  scroll-padding-top: 100px;
}

section[id],
div[id],
#recursos,
#solucoes,
#planos {
  scroll-margin-top: 100px;
}

/* ============================================
   HERO - Reduzir fade inferior do GIF no mobile
   ============================================ */
@media (max-width: 1023px) {
  #hero > div > div[class*="bg-gradient-to-t"][class*="from-background"] {
    height: 15% !important;
  }
}