@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');        

/* ========================================
   SISTEMA DE TEMAS - CLARO E ESCURO
   ======================================== */

/* Variáveis CSS para tema claro (padrão) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fd;
    --bg-tertiary: #f0f0f8;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
    --navbar-bg: #ffffff;
    --sidebar-bg: #f8f9fd;
    --sidebar-text: #4a5568;
    --sidebar-active: #667eea;
    --button-primary: #667eea;
    --button-secondary: #718096;
    --shadow: rgba(102, 126, 234, 0.1);
    --accent-color: #48bb78;
    --danger-color: #f56565;
    --warning-color: #ed8936;
    --info-color: #4299e1;
    --green-text: #2aa674;
    --purple-text: #6b1bd5;
    --gradient-start: rgba(107, 27, 213, 0.9);
    --gradient-end: rgba(107, 27, 213, 0.4);
    --card-hover: rgba(102, 126, 234, 0.05);
    --text-button: #ffffff;
    --button-hover: #5a67d8;
    --table-bg: #ffffff;
    --section-text: #ffffff;
}

/* Tema escuro */
[data-theme="dark"] {
    --bg-primary: #0f0a1a;
    --bg-secondary: #1a1625;
    --bg-tertiary: #252133;
    --text-primary: #ffffff;
    --text-secondary: #c1b2b2;
    --text-muted: #8a8a8a;
    --border-color: #3a3a3a;
    --card-bg: #1e1e2e;
    --navbar-bg: #1a1625;
    --sidebar-bg: #252133;
    --sidebar-text: #c1b2b2;
    --sidebar-active: #6a11cb;
    --button-primary: #6a11cb;
    --button-secondary: #8a8a8a;
    --shadow: rgba(0, 0, 0, 0.3);
    --accent-color: #2aa674;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    --green-text: #2aa674;
    --purple-text: #6b1bd5;
    --gradient-start: #6a11cb;
    --gradient-end: #2575fc;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--bg-primary, #0f0a1a);
    color: var(--text-primary, white);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}
html {
  scroll-behavior: smooth;
}

.coin-animation {
    animation: bounce 3s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.greenText{
    color: var(--green-text, #2aa674);
}

.purpleText{
    color: var(--purple-text, #6b1bd5);
}

.gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start, #6a11cb) 0%, var(--gradient-end, #2575fc) 100%);
}

/*Flags*/
.flags-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999; /* bem acima de tudo */
}

.flags-floating button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.flag-icon {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}

.flag-icon:hover {
  transform: scale(1.1);
}

.roadmap-line {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, #2aa674, #6b1bd5);
}

.roadmap-line::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #2aa674, #6b1bd5);
    animation: progress 2s ease-in-out forwards;
}

@keyframes progress {
    0% { width: 0; }
    100% { width: 100%; }
}

.roadmap-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2aa674, #6b1bd5);
    border: 3px solid #0f0a1a;
    position: relative;
    z-index: 2;
}

.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateX(5px);
}

.wallet-input:focus, .amount-input:focus {
    box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.5);
}
.logoUP{
    width: 50% !important;
    height: 50% !important;
}
@media (max-width: 768px) {
    .hero-content {
        background: var(--card-bg, rgba(255, 255, 255, 0.95));
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 20px;
        z-index: 2;
        border: 1px solid var(--border-color, rgba(107, 27, 213, 0.2));
        box-shadow: 0 4px 6px var(--shadow, rgba(0, 0, 0, 0.1));
    }
    
    /* Tema escuro para hero-content */
    [data-theme="dark"] .hero-content {
        background: rgba(15, 10, 26, 0.9);
        border-color: rgba(107, 27, 213, 0.4);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    /* Texto dentro da hero-content no tema claro */
    .hero-content h1 {
        color: var(--text-primary, #2d3748);
    }
    
    .hero-content p {
        color: var(--text-secondary, #4a5568);
    }
    
    /* Tema escuro para texto da hero-content */
    [data-theme="dark"] .hero-content h1 {
        color: #ffffff;
    }
    
    [data-theme="dark"] .hero-content p {
        color: #c1b2b2;
    }
    
    /* Card de compra dentro da hero-content */
    .hero-content #Comprar-Perkup {
        background: var(--card-bg, rgba(255, 255, 255, 0.9));
        border-color: var(--border-color, rgba(107, 27, 213, 0.3));
    }
    
    .hero-content #Comprar-Perkup * {
        color: var(--text-primary, #2d3748);
    }
    
    .hero-content #Comprar-Perkup input {
        background: var(--bg-secondary, #f8f9fd);
        color: var(--text-primary, #2d3748);
        border-color: var(--border-color, rgba(107, 27, 213, 0.3));
    }
    
    /* Tema escuro para card de compra */
    [data-theme="dark"] .hero-content #Comprar-Perkup {
        background: rgba(17, 24, 39, 0.9);
        border-color: rgba(107, 27, 213, 0.5);
    }
    
    [data-theme="dark"] .hero-content #Comprar-Perkup * {
        color: #ffffff;
    }
    
    [data-theme="dark"] .hero-content #Comprar-Perkup input {
        background: rgba(31, 41, 55, 0.8);
        color: #ffffff;
        border-color: rgba(107, 27, 213, 0.5);
    }
    
    .coin-mobile {
        position: absolute;
        bottom: -50px;
        right: -50px;
        opacity: 0.3;
        z-index: 1;
    }
}
#walletList::-webkit-scrollbar {
  width: 8px;
}
#walletList::-webkit-scrollbar-thumb {
  background-color: #6a11cb;
  border-radius: 8px;
}
#walletList::-webkit-scrollbar-track {
  background: transparent;
}
#walletQR img {
    border: 4px solid #6a11cb;
    border-radius: 16px;
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(106, 17, 203, 0.5);
    max-width: 100%;
}
#walletQR {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.wallet-img {
  border: 2px solid #2575fc; /* azul vibrante */
  border-radius: 12px;
  background-color: transparent;
  padding: 4px;
  box-shadow: 0 0 10px rgba(37, 117, 252, 0.4); /* brilho azul suave */
}

.error-message {
  display: block;
}

/* ========================================
   ESTILOS PARA SISTEMA DE TEMAS
   ======================================== */

/* Cards e elementos de interface */
.bg-gray-900 {
    background-color: var(--card-bg, rgba(17, 24, 39, 0.5)) !important;
    border-color: var(--border-color, #6b1bd5) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px var(--shadow, rgba(0, 0, 0, 0.1)) !important;
}

.bg-gray-900:hover {
    background-color: var(--card-hover, rgba(102, 126, 234, 0.05)) !important;
    box-shadow: 0 4px 12px var(--shadow, rgba(102, 126, 234, 0.15)) !important;
}

.text-purple-300 {
    color: var(--text-secondary, #4a5568) !important;
}

.text-purple-200 {
    color: var(--text-muted, #718096) !important;
}

.text-white {
    color: var(--text-primary, #2d3748) !important;
}

.bg-black {
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #2d3748) !important;
}

.border-purple-900 {
    border-color: var(--border-color, #e2e8f0) !important;
}

/* Botões melhorados */
.bg-gradient-to-r {
    background: linear-gradient(135deg, var(--gradient-start, #667eea) 0%, var(--gradient-end, #764ba2) 100%) !important;
    color: var(--text-button, #ffffff) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.bg-gradient-to-r:hover {
    background: linear-gradient(135deg, var(--button-hover, #5a67d8) 0%, var(--gradient-end, #6b5b95) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--shadow, rgba(102, 126, 234, 0.3)) !important;
}

/* Header e navegação */
header {
    background-color: var(--navbar-bg, rgba(248, 249, 253, 0.95)) !important;
    border-color: var(--border-color, #e2e8f0) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px var(--shadow, rgba(102, 126, 234, 0.1)) !important;
}

/* Footer */
footer {
    background-color: var(--bg-secondary, #f8f9fd) !important;
    border-color: var(--border-color, #e2e8f0) !important;
    color: var(--text-primary, #2d3748) !important;
}

/* Estilo do seletor de tema */
.theme-selector {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1000;
    background-color: var(--card-bg, rgba(248, 249, 253, 0.95));
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 25px;
    padding: 8px 16px;
    box-shadow: 0 4px 16px var(--shadow, rgba(102, 126, 234, 0.15));
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.theme-selector:hover {
    box-shadow: 0 6px 24px var(--shadow, rgba(102, 126, 234, 0.25));
    transform: translateY(-2px);
    border-color: var(--gradient-start, #667eea);
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-primary, #2d3748);
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.theme-toggle:hover {
    background-color: var(--card-hover, rgba(102, 126, 234, 0.1));
    transform: scale(1.1);
}

.theme-label {
    font-size: 12px;
    color: var(--text-secondary, #4a5568);
    margin: 0;
    user-select: none;
    font-weight: 500;
}

/* Animação de transição para mudança de tema */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Melhorias específicas para o tema claro */
.bg-opacity-50 {
    background-color: var(--card-bg, rgba(248, 249, 253, 0.95)) !important;
    backdrop-filter: blur(10px) !important;
}

/* Botões com melhor contraste */
button, .btn {
    transition: all 0.3s ease !important;
}

button:hover, .btn:hover {
    transform: translateY(-1px) !important;
}

/* Links e elementos clicáveis */
a {
    color: var(--gradient-start, #667eea) !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--button-hover, #5a67d8) !important;
    text-decoration: none !important;
}

/* Melhorar contraste dos textos secundários */
.text-purple-100 {
    color: var(--text-secondary, #4a5568) !important;
}

/* Seções com gradientes suaves */
.gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start, #667eea) 0%, var(--gradient-end, #764ba2) 100%) !important;
    color: var(--text-button, #ffffff) !important;
}

/* Inputs e formulários */
input, textarea, select {
    background-color: var(--card-bg, #ffffff) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-primary, #2d3748) !important;
    transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--gradient-start, #667eea) !important;
    box-shadow: 0 0 0 3px var(--shadow, rgba(102, 126, 234, 0.1)) !important;
}

/* Modais e overlays */
.fixed.inset-0 {
    background-color: var(--bg-primary, rgba(248, 249, 253, 0.9)) !important;
}

/* Melhorar legibilidade dos textos pequenos */
small, .text-sm {
    color: var(--text-secondary, #4a5568) !important;
}

/* Responsividade do seletor de tema */
@media (max-width: 768px) {
    .theme-selector {
        bottom: 80px;
        right: 15px;
        padding: 6px 12px;
    }
    
    .theme-toggle {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .theme-label {
        font-size: 11px;
    }
}

/* Sobrescrever classes específicas do Tailwind para melhor UX no tema claro */
[data-theme="light"] .bg-gray-900 {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
}

[data-theme="light"] .text-purple-300 {
    color: #4a5568 !important;
}

[data-theme="light"] .text-purple-200 {
    color: #718096 !important;
}

[data-theme="light"] .bg-black {
    background-color: #ffffff !important;
    color: #2d3748 !important;
}

[data-theme="light"] .border-purple-900 {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .bg-opacity-50 {
    background-color: rgba(248, 249, 253, 0.95) !important;
}

[data-theme="light"] .bg-opacity-80 {
    background-color: rgba(248, 249, 253, 0.98) !important;
}

/* Tema claro: melhorar readabilidade de textos */
:root .text-white {
    color: #2d3748 !important;
}

:root .text-purple-100 {
    color: #4a5568 !important;
}

/* Melhorar botões no tema claro */
:root .bg-gradient-to-r {
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
}

/* Otimizações finais para UX no tema claro */
:root {
    /* Ajustar contraste para melhor legibilidade */
    --optimized-text: #2d3748;
    --optimized-bg: #ffffff;
    --optimized-border: #e2e8f0;
    --optimized-shadow: rgba(102, 126, 234, 0.15);
}

/* Garantir que botões tenham bom contraste no tema claro */
:root button {
    font-weight: 500;
}

:root .cursor-pointer:hover {
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Melhorar cards hover no tema claro */
:root .hover\\:border-purple-600:hover {
    border-color: var(--gradient-start, #667eea) !important;
    box-shadow: 0 4px 12px var(--optimized-shadow) !important;
}

/* FAQ e elementos interativos */
:root .faq-item:hover {
    background-color: var(--card-hover, rgba(102, 126, 234, 0.05)) !important;
}

/* Textos pequenos mais legíveis */
:root small {
    color: var(--text-secondary, #4a5568) !important;
    line-height: 1.5;
}

/* ========================================
   MELHORIAS ESPECÍFICAS PARA SEÇÕES
   ======================================== */

/* Botões - garantir texto branco em botões cinzas */
button, .btn {
    color: var(--text-button, #ffffff) !important;
}

button[class*="gray"], .btn[class*="gray"] {
    color: #ffffff !important;
}

/* Seção "Por que escolher a Perkup?" */
#porque-Perkup {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.6)) 0%, var(--gradient-end, rgba(255, 255, 255, 1)) 100%) !important;
}

#porque-Perkup * {
    color: var(--section-text, #ffffff) !important;
}

#porque-Perkup .bg-gray-900 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Seção "Conteúdos em Vídeo" */
#videos {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

#videos * {
    color: var(--section-text, #ffffff) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Seção "Distribuição de Tokens" */
#distribuicao-tokens {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

#distribuicao-tokens h2,
#distribuicao-tokens p,
#distribuicao-tokens span,
#distribuicao-tokens div:not(table):not(td):not(th) {
    color: var(--section-text, #ffffff) !important;
}

/* Tabela na distribuição de tokens - melhorias visuais */
#distribuicao-tokens table {
    background-color: var(--table-bg, #ffffff) !important;
    border-color: var(--border-color, #8b5cf6) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

#distribuicao-tokens table thead tr {
    background-color: rgba(107, 33, 168, 0.8) !important;
    border-color: #8b5cf6 !important;
}

#distribuicao-tokens table thead th {
    color: #ffffff !important;
    background-color: transparent !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

#distribuicao-tokens tbody {
    background-color: var(--table-bg, #ffffff) !important;
}

#distribuicao-tokens table tbody tr {
    border-color: rgba(107, 70, 193, 0.3) !important;
    transition: background-color 0.2s ease !important;
}

#distribuicao-tokens table tbody tr:hover {
    background-color: rgba(107, 33, 168, 0.05) !important;
}

#distribuicao-tokens td, #distribuicao-tokens th {
    background-color: transparent !important;
    color: var(--text-primary, #2d3748) !important;
    border-color: rgba(107, 70, 193, 0.2) !important;
}

#distribuicao-tokens table tbody tr:last-child {
    background-color: rgba(107, 33, 168, 0.15) !important;
    border-color: #8b5cf6 !important;
}

#distribuicao-tokens table tbody tr:last-child td {
    color: #4c1d95 !important;
    font-weight: bold !important;
}

/* Tema escuro para tabelas */
[data-theme="dark"] #distribuicao-tokens table {
    background-color: rgba(17, 24, 39, 0.8) !important;
    border-color: #8b5cf6 !important;
}

[data-theme="dark"] #distribuicao-tokens table thead tr {
    background-color: rgba(107, 33, 168, 0.9) !important;
}

[data-theme="dark"] #distribuicao-tokens tbody {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #distribuicao-tokens td {
    color: #e2e8f0 !important;
}

[data-theme="dark"] #distribuicao-tokens table tbody tr:hover {
    background-color: rgba(107, 33, 168, 0.2) !important;
}

[data-theme="dark"] #distribuicao-tokens table tbody tr:last-child {
    background-color: rgba(107, 33, 168, 0.4) !important;
}

[data-theme="dark"] #distribuicao-tokens table tbody tr:last-child td {
    color: #ffffff !important;
}

/* Seção "Perguntas Frequentes" */
.py-20.px-4.bg-gradient-to-b:has(h2:contains("Perguntas")) {
    background: linear-gradient(135deg, var(--gradient-start, #6a11cb) 0%, var(--gradient-end, #2575fc) 100%) !important;
}

/* CTA Section - "Pronto para fazer parte da revolução?" */
.py-20.px-4.gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start, #6a11cb) 0%, var(--gradient-end, #2575fc) 100%) !important;
}

/* Texto "Junte-se" em branco na seção CTA */
.py-20.px-4.gradient-bg .text-purple-100 {
    color: #ffffff !important;
}

.py-20.px-4.gradient-bg p {
    color: #ffffff !important;
}

/* Seletores mais específicos para as seções */
section[id="porque-Perkup"] {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

section[id="porque-Perkup"] h2,
section[id="porque-Perkup"] h3,
section[id="porque-Perkup"] p,
section[id="porque-Perkup"] span {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

section[id="videos"] {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

section[id="videos"] h2,
section[id="videos"] h3,
section[id="videos"] p,
section[id="videos"] span {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

section[id="distribuicao-tokens"] {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

section[id="distribuicao-tokens"] h2,
section[id="distribuicao-tokens"] p:not(table p),
section[id="distribuicao-tokens"] span:not(table span) {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Perguntas Frequentes - seletor mais específico */
section:has(h2:contains("Perguntas")) {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

section:has(h2:contains("Perguntas")) *:not(.faq-item):not(.faq-item *) {
    color: var(--section-text, #ffffff) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Alternativa para FAQ se o seletor :has não funcionar */
.py-20:nth-of-type(6), .py-20:nth-last-of-type(2) {
    background: linear-gradient(135deg, var(--gradient-start, rgba(107, 27, 213, 0.9)) 0%, var(--gradient-end, rgba(107, 27, 213, 0.4)) 100%) !important;
}

.py-20:nth-of-type(6) *:not(.faq-item):not(.faq-item *),
.py-20:nth-last-of-type(2) *:not(.faq-item):not(.faq-item *) {
    color: var(--section-text, #ffffff) !important;
}

/* Buttons in gradient sections - different colors for light/dark themes */
:root .gradient-bg button,
:root .gradient-bg button *,
:root section[class*="gradient"] button,
:root section[class*="gradient"] button *,
:root section[style*="gradient"] button,
:root section[style*="gradient"] button *,
:root .bg-black.text-white,
:root .bg-black.text-white *,
:root button.bg-black.text-white,
:root button.bg-black.text-white * {
    color: #2d3748 !important;
    text-shadow: none !important;
}

/* Dark theme - keep white text */
[data-theme="dark"] .gradient-bg button,
[data-theme="dark"] .gradient-bg button *,
[data-theme="dark"] section[class*="gradient"] button,
[data-theme="dark"] section[class*="gradient"] button *,
[data-theme="dark"] section[style*="gradient"] button,
[data-theme="dark"] section[style*="gradient"] button *,
[data-theme="dark"] .bg-black.text-white,
[data-theme="dark"] .bg-black.text-white *,
[data-theme="dark"] button.bg-black.text-white,
[data-theme="dark"] button.bg-black.text-white * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Ensure gradient section icons follow the same rule */
:root .gradient-bg .fas,
:root .gradient-bg .fa,
:root .gradient-bg i,
:root section[class*="gradient"] .fas,
:root section[class*="gradient"] .fa,
:root section[class*="gradient"] i,
:root section[style*="gradient"] .fas,
:root section[style*="gradient"] .fa,
:root section[style*="gradient"] i {
    color: #2d3748 !important;
}

[data-theme="dark"] .gradient-bg .fas,
[data-theme="dark"] .gradient-bg .fa,
[data-theme="dark"] .gradient-bg i,
[data-theme="dark"] section[class*="gradient"] .fas,
[data-theme="dark"] section[class*="gradient"] .fa,
[data-theme="dark"] section[class*="gradient"] i,
[data-theme="dark"] section[style*="gradient"] .fas,
[data-theme="dark"] section[style*="gradient"] .fa,
[data-theme="dark"] section[style*="gradient"] i {
    color: #ffffff !important;
}

/* FORÇA ABSOLUTA - H3s da seção porque-Perkup SEMPRE BRANCOS */
.force-white-text,
.perkup-white-text,
#porque-Perkup h3.force-white-text,
#porque-Perkup h3.perkup-white-text,
section[id="porque-Perkup"] h3.force-white-text,
section[id="porque-Perkup"] h3.perkup-white-text,
#porque-Perkup h3[data-forced-white="true"],
section[id="porque-Perkup"] h3[data-forced-white="true"],
#tn23, #tn25, #tn27,
#porque-Perkup #tn23,
#porque-Perkup #tn25,
#porque-Perkup #tn27,
section[id="porque-Perkup"] #tn23,
section[id="porque-Perkup"] #tn25,
section[id="porque-Perkup"] #tn27,
#porque-Perkup h3,
#porque-Perkup h3.text-xl,
#porque-Perkup h3.font-bold,
section[id="porque-Perkup"] h3,
section[id="porque-Perkup"] h3.text-xl,
section[id="porque-Perkup"] h3.font-bold {
    color: #ffffff !important;
    color: white !important;
    color: rgb(255, 255, 255) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Roadmap H3 titles - black in light mode, white in dark mode */
:root .bg-gray-900 h3:not(.force-white-text):not(.perkup-white-text):not([data-forced-white="true"]),
:root .bg-gray-900 h3.text-xl:not(.force-white-text):not(.perkup-white-text):not([data-forced-white="true"]),
:root .bg-gray-900 h3.font-bold:not(.force-white-text):not(.perkup-white-text):not([data-forced-white="true"]) {
    color: #2d3748 !important;
}

[data-theme="dark"] .bg-gray-900 h3:not(.force-white-text):not(.perkup-white-text):not([data-forced-white="true"]),
[data-theme="dark"] .bg-gray-900 h3.text-xl:not(.force-white-text):not(.perkup-white-text):not([data-forced-white="true"]),
[data-theme="dark"] .bg-gray-900 h3.font-bold:not(.force-white-text):not(.perkup-white-text):not([data-forced-white="true"]) {
    color: #ffffff !important;
}

/* Header force white colors */
header * {
    color: #ffffff !important;
}

/* Override theme colors specifically for header */
:root header *,
[data-theme="light"] header *,
[data-theme="dark"] header * {
    color: #ffffff !important;
}

/* Ensure header buttons maintain white text */
header button,
header button *,
header a,
header a * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Header elements always white */
header .text-white,
header .text-white *,
header button.text-white,
header button.text-white *,
header a.text-white,
header a.text-white *,
header .bg-gradient-to-r,
header .bg-gradient-to-r *,
header .fas,
header .fa,
header i {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Specific header button styling */
header button.bg-gradient-to-r {
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

header button.bg-gradient-to-r span,
header button.bg-gradient-to-r i {
    color: #ffffff !important;
}

header a[style*="background-color: #00b471"] {
    background-color: #00b471 !important;
    color: #ffffff !important;
}

header a[style*="background-color: #00b471"] i {
    color: #ffffff !important;
}

/* FAQ Cards - Background and text fixes */

/* 1. Reset completo para cards FAQ com seletor específico */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Hover state para cards FAQ */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900:hover {
    background-color: #f7fafc !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Override de TODOS os elementos dentro dos cards */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 * {
    color: #4a5568 !important;
    text-shadow: none !important;
}

/* 4. Títulos das perguntas - cor escura EM AMBOS OS TEMAS */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 h3,
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 .text-xl.font-bold {
    color: #1a202c !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* Garante que FAQ H3s permaneçam escuros MESMO no tema escuro */
[data-theme="dark"] .faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 h3,
[data-theme="dark"] .faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 .text-xl.font-bold,
[data-theme="dark"] .faq-item h3,
[data-theme="dark"] .faq-item .text-xl.font-bold {
    color: #1a202c !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* 5. Ícones chevron - cor roxa */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 .fas.fa-chevron-down {
    color: #667eea !important;
}

/* 6. Override para classes text-purple dentro dos cards */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 .text-purple-300 {
    color: #4a5568 !important;
}

.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 .text-purple-400 {
    color: #667eea !important;
}

/* 7. Links dentro dos cards */
.faq-item.bg-gray-900.bg-opacity-50.rounded-xl.p-6.border.border-purple-900 a {
    color: #3182ce !important;
}

/* FAQ Cards - Seletores diretos baseados nas classes Tailwind */
.bg-gray-900.bg-opacity-50.faq-item {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(107, 27, 213, 0.3) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.bg-gray-900.bg-opacity-50.faq-item * {
    color: #2d3748 !important;
    text-shadow: none !important;
}

.bg-gray-900.bg-opacity-50.faq-item h3 {
    color: #1a202c !important;
    font-weight: 700 !important;
}

.bg-gray-900.bg-opacity-50.faq-item p,
.bg-gray-900.bg-opacity-50.faq-item div {
    color: #4a5568 !important;
}

.bg-gray-900.bg-opacity-50.faq-item i {
    color: #667eea !important;
}

/* FAQ Cards - Força override de todas as classes Tailwind */
.faq-item[class*="bg-gray"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(107, 27, 213, 0.3) !important;
}

.faq-item[class*="bg-gray"] * {
    color: #2d3748 !important;
}

.faq-item[class*="bg-gray"] h3 {
    color: #1a202c !important;
    font-weight: 700 !important;
}

/* FAQ - Override específico para section com gradiente */
section[class*="gradient"] .faq-item,
[class*="py-20"] .faq-item {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(107, 27, 213, 0.3) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

section[class*="gradient"] .faq-item *,
[class*="py-20"] .faq-item * {
    color: #2d3748 !important;
    text-shadow: none !important;
}

section[class*="gradient"] .faq-item h3,
[class*="py-20"] .faq-item h3 {
    color: #1a202c !important;
    font-weight: 700 !important;
}

/* FAQ - Título principal da seção sempre visível */
section:has(h2:contains("Perguntas")) > h2,
section:has(h2:contains("Perguntas")) > div > h2,
.py-20:nth-of-type(6) > h2,
.py-20:nth-last-of-type(2) > h2,
.py-20:nth-of-type(6) > div > h2,
.py-20:nth-last-of-type(2) > div > h2 {
    color: #ffffff !important;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
    font-weight: 700 !important;
}

/* FAQ - Subtítulo da seção */
section:has(h2:contains("Perguntas")) > p,
section:has(h2:contains("Perguntas")) > div > p:first-of-type,
.py-20:nth-of-type(6) > p,
.py-20:nth-last-of-type(2) > p,
.py-20:nth-of-type(6) > div > p:first-of-type,
.py-20:nth-last-of-type(2) > div > p:first-of-type {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Garantir que botões em seções com gradiente tenham texto branco */
section[style*="gradient"] button,
section[class*="gradient"] button,
.gradient-bg button {
    color: #ffffff !important;
}

/* Botões com classes que contenham gray/grey */
[class*="gray"]:not(input):not(textarea) {
    color: #ffffff !important;
}

[class*="grey"]:not(input):not(textarea) {
    color: #ffffff !important;
}

.blink {
    animation: blink 1s steps(1, end) 3 forwards;
  }
  
  @keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
  }