/* Estilo de texto com borda de fogo arco-íris */
.fire-text {
font-weight: bold;
font-size: 2em;
color: transparent;
background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
background-size: 400%;
-webkit-background-clip: text;
background-clip: text;
animation: fireRainbow 3s infinite;
}
/* Animação arco-íris */
@keyframes fireRainbow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Estilo de fundo com efeito arco-íris e animações */
.fire-background {
font-weight: bold;
font-size: 1em;
color: white;
padding: 3px 8px;
background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
background-size: 300%;
animation: fireRainbowBackground 3s infinite, pulse 1.5s infinite alternate, sway 1.5s infinite ease-in-out;
display: inline-block;
border-radius: 3px;
}

/* Animação de gradiente arco-íris */
@keyframes fireRainbowBackground {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Animação de pulsação para aumentar e diminuir levemente */
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

/* Animação de balanço leve */
@keyframes sway {
0% { transform: translateX(0); }
50% { transform: translateX(3px); }
100% { transform: translateX(0); }
}

/* Estilos apenas para o menu de Downloads Zero Two */
.zero-two-menu {
font-family: Arial, sans-serif; /* Fonte padrão */
padding: 20px; /* Espaçamento interno */
}

.zero-two-menu .nav {
list-style: none; /* Remove a marcação padrão da lista */
padding: 0;
}

.zero-two-menu .nav-item {
margin: 10px 0; /* Margem entre os itens do menu */
}

.zero-two-menu .nav-link {
display: block; /* Faz com que o link ocupe toda a largura */
padding: 10px 15px; /* Espaçamento interno */
border-radius: 5px; /* Bordas arredondadas */
color: transparent; /* Texto transparente para o efeito */
background: linear-gradient(90deg, #ff4081, #ffed00, #00bfff, #ff4081); /* Gradiente colorido */
background-size: 300%; /* Tamanho do fundo do gradiente */
animation: gradient 5s ease infinite; /* Animação do gradiente */
transition: transform 0.2s ease; /* Animação de transição */
cursor: pointer; /* Indica que é clicável */
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra para efeito de profundidade */
}

.zero-two-menu .nav-link:hover {
transform: scale(1.05); /* Leve aumento ao passar o mouse */
}

.zero-two-menu .nav-link:after {
content: " ▶"; /* Adiciona uma seta após o texto */
font-weight: bold; /* Torna a seta em negrito */
opacity: 0.7; /* Transparência na seta */
}

.zero-two-menu .submenu {
display: none; /* Esconder o submenu inicialmente */
margin-left: 20px; /* Indentação para o submenu */
padding: 10px; /* Espaçamento interno */
}

.zero-two-menu .nav-item.menu-items {
position: relative; /* Para o efeito de hover no submenu */
}

.zero-two-menu .nav-item.menu-items:hover {
background-color: rgba(255, 255, 255, 0.1); /* Leve fundo no hover */
}

.zero-two-menu .nav-item.nav-category {
font-weight: bold; /* Título em negrito */
font-size: 18px; /* Tamanho do texto */
color: #ff4081; /* Cor do título */
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra do título */
}

/* Animação de gradiente */
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.nav-item.menu-items .nav-link {
position: relative;
color: #8F9099;
overflow: hidden;
transition: color 0.3s;
display: block;
padding: 12px;
text-decoration: none;
border-bottom: 0px solid #ddd;
cursor: pointer;
}

.nav-item.menu-items .nav-link:hover {
background-color: #8F9099;
color: #8F9099;
}

.nav-item.menu-items .nav-link .menu-icon {
margin-right: 12px;
transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.nav-item.menu-items .nav-link:hover .menu-icon {
transform: rotate(360deg);
filter: drop-shadow(0 0 10px rgba(30, 77, 232, 0.8));
}

.nav-item.menu-items .nav-link .menu-title {
font-size: 18px;
font-weight: bold;
transition: transform 0.3s ease-in-out;
}

.nav-item.menu-items .nav-link:hover .menu-title {
transform: translateX(10px);
}

/* Espaçamento entre os avisos */
.preview-item-content p {
margin-bottom: 15px;
}

/* Estilo de texto com borda de fogo arco-íris */
.fire-text {
font-weight: bold;
font-size: 1.2em;
color: transparent;
background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
background-size: 400%;
-webkit-background-clip: text;
background-clip: text;
animation: fireRainbow 3s infinite;
}

/* Animação arco-íris */
@keyframes fireRainbow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.custom-popup {
border-radius: 15px; /* Arredondar as bordas */
border: 2px solid white; /* Borda branca */
background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
color: white;
}

.custom-title {
font-weight: bold;
color: #ff4081; /* Cor do título */
}

.custom-footer {
color: #bbb;/* Cor do rodapé */
}

.custom-image {
border-radius: 50%; /* Tornar a imagem redonda */
}

.small-title {
font-size: 16px;
}

/* MODAL */
.ia-modal-overlay {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100vw; height: 100vh;
background: rgba(0,0,0,0.45);
align-items: center;
justify-content: center;
}
.ia-modal-overlay.active {
display: flex;
}
.ia-modal-content {
background: #181c24;
color: #fff;
max-width: 420px;
width: 92vw;
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
padding: 32px 28px 24px 28px;
position: relative;
font-family: 'Segoe UI', Arial, sans-serif;
animation: iaModalIn 0.25s;
}
@keyframes iaModalIn {
from { transform: translateY(40px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.ia-modal-close {
position: absolute;
top: 18px; right: 18px;
background: none;
border: none;
color: #fff;
font-size: 1.3rem;
cursor: pointer;
transition: color 0.2s;
}
.ia-modal-close:hover {
color: #ffc107;
}
.ia-modal-content h2 {
margin-top: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.5px;
color: #ffc107;
margin-bottom: 18px;
}
.ia-modal-section {
margin-bottom: 14px;
font-size: 1.05rem;
}
.ia-modal-code {
display: inline-block;
background: #23283a;
color: #ffc107;
padding: 2px 7px;
border-radius: 6px;
font-size: 0.98rem;
margin-top: 2px;
margin-bottom: 2px;
word-break: break-all;
}
.ia-modal-list {
margin-top: 3px;
color: #ffc107;
font-size: 0.97rem;
word-break: break-word;
}
.ia-modal-btn {
margin-top: 22px;
width: 100%;
background: #ffc107;
color: #181c24;
border: none;
border-radius: 8px;
padding: 10px 0;
font-size: 1.08rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.ia-modal-btn:hover {
background: #e0a800;
color: #fff;
}
@media (max-width: 500px) {
.ia-modal-content {
padding: 18px 7vw 18px 7vw;
max-width: 98vw;
}
}

/* MODAL 2 */
.ia-modal-overlay {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100vw; height: 100vh;
background: rgba(0,0,0,0.45);
align-items: center;
justify-content: center;
}
.ia-modal-overlay.active {
display: flex;
}
.ia-modal-content {
background: #181c24;
color: #fff;
max-width: 420px;
width: 92vw;
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
padding: 32px 28px 24px 28px;
position: relative;
font-family: 'Segoe UI', Arial, sans-serif;
animation: iaModalIn 0.25s;
}
@keyframes iaModalIn {
from { transform: translateY(40px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.ia-modal-close {
position: absolute;
top: 18px; right: 18px;
background: none;
border: none;
color: #fff;
font-size: 1.3rem;
cursor: pointer;
transition: color 0.2s;
}
.ia-modal-close:hover {
color: #ffc107;
}
.ia-modal-content h2 {
margin-top: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0.5px;
color: #ffc107;
margin-bottom: 18px;
}
.ia-modal-section {
margin-bottom: 14px;
font-size: 1.05rem;
}
.ia-modal-code {
display: inline-block;
background: #23283a;
color: #ffc107;
padding: 2px 7px;
border-radius: 6px;
font-size: 0.98rem;
margin-top: 2px;
margin-bottom: 2px;
word-break: break-all;
}
.ia-modal-list {
margin-top: 3px;
color: #ffc107;
font-size: 0.97rem;
word-break: break-word;
}
.ia-modal-btn {
margin-top: 22px;
width: 100%;
background: #ffc107;
color: #181c24;
border: none;
border-radius: 8px;
padding: 10px 0;
font-size: 1.08rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.ia-modal-btn:hover {
background: #e0a800;
color: #fff;
}
@media (max-width: 500px) {
.ia-modal-content {
padding: 18px 7vw 18px 7vw;
max-width: 98vw;
}
}