/* PROJETO: Manacapuru.Com 2026
    ESTILO: Glassmorphism Ultra-Tech
    PADRÃO: Tabulação 4 espaços 
*/

/* --- 1. CONFIGURAÇÕES E VARIÁVEIS --- */
:root {
    --azul-neon: #00f2ff;
    --azul-deep: #00040a;
    --branco-puro: #ffffff;
    --cinza-claro: rgba(255, 255, 255, 0.8);
    --glass-bg: rgba(0, 8, 20, 0.85);
}

/* --- FUNDO E TIPOGRAFIA GLOBAIS --- */
body {
    background-color: var(--azul-deep);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--branco-puro);
}

/* Forçando contraste em títulos e textos principais */
.hero-section h1, 
.hero-section p,
.glass-card h3,
.glass-card .display-4,
.glass-card .display-5 {
    color: var(--branco-puro) !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8); /* Sombra reforçada para legibilidade */
}

/* --- HERO SECTION FULL SCREEN (100vh) --- */
.hero-section {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(rgba(0, 4, 10, 0.4), rgba(0, 4, 10, 0.8)), 
                url('imagens/Gemini_Generated_Image_466ym0466ym0466y.png') center/cover no-repeat fixed;
    padding-top: 80px;
}

/* --- 2. COMPONENTES: GLASS CARD --- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 30px;
    border: 2px solid var(--azul-neon); 
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2), 
                inset 0 0 15px rgba(255, 255, 255, 0.05);
    padding: 40px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    animation: fadeInUp 0.8s ease backwards;
}

.glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.4);
    background: rgba(0, 15, 30, 0.9);
}

/* Listagem Interna e Benefícios */
.glass-card ul {
    list-style: none;
    padding: 0;
}

.glass-card ul li {
    color: var(--cinza-claro) !important;
    padding: 8px 0;
    font-weight: 500;
    transition: all 0.3s ease;
}

.glass-card ul li:hover {
    padding-left: 10px;
    color: var(--azul-neon) !important;
}

/* Preços e Subtítulos */
.display-4, .display-5 {
    color: var(--branco-puro) !important;
    letter-spacing: -1px;
    font-weight: 800;
}

.text-secondary {
    color: var(--azul-neon) !important;
    opacity: 1;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* --- 3. BOTÕES E INTERAÇÕES --- */
.btn-neon {
    border: 2px solid var(--azul-neon);
    color: var(--azul-neon) !important;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-neon:hover {
    background: var(--azul-neon);
    color: #000000 !important;
    box-shadow: 0 0 25px var(--azul-neon);
}

.btn-outline-neon {
    border-radius: 50px;
    border: 1px solid var(--cinza-claro);
    color: var(--branco-puro);
    background: transparent;
    transition: 0.3s;
    padding: 12px 30px;
}

.btn-outline-neon:hover {
    border-color: var(--azul-neon);
    color: var(--azul-neon);
    background: rgba(0, 242, 255, 0.1);
}

/* --- 4. MODALS --- */
.glass-modal {
    background: rgba(10, 15, 30, 0.9) !important;
    backdrop-filter: blur(30px) !important;
    border-radius: 28px !important;
    border: 2px solid var(--azul-neon) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8) !important;
}

/* --- 5. ANIMAÇÕES E RESPONSIVIDADE --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ESTILO DOS INPUTS TECH --- */
.form-control, .form-select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 242, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 12px;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--azul-neon) !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3) !important;
    outline: none;
}

/* Cor do placeholder (texto de exemplo dentro do campo) */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Ajuste para o fundo do Select (dropdown) */
.form-select option {
    background: #000814;
    color: white;
}

        .bloco-dia { 
            background: #fdfaf5; padding: 20px; border-radius: 12px; 
            margin-bottom: 30px; border: 1px solid #e9e0d2;
        }
        .bloco-dia.active { 
            background: #fdfaf5; border-color: #d4a373;
        }
        .bloco-dia.inactive { 
            background: #f9f9f9; border-color: #e0e0e0;
        }
        .bloco-dia.inactive .titulo-dia,
        .bloco-dia.inactive .instrucao,
        .bloco-dia.inactive label { color: #aaa; }
        .bloco-dia.inactive textarea { background: #f9f9f9; color: #777; cursor: not-allowed; }
        .bloco-dia.inactive .btn-enviar { background: #ccc; cursor: not-allowed; }
        .bloco-dia.inactive .btn-enviar:hover { background: #ccc; transform: none; }
        .titulo-dia { color: #d4a373; font-weight: bold; font-size: 1.1rem; margin-bottom: 5px; display: block; }
        .instrucao { font-size: 0.85rem; color: #85741d; margin-bottom: 15px; font-style: italic; display: block; }
        label { display: block; margin-bottom: 8px; color: #444; font-size: 0.95rem; font-weight: 500; }
        textarea { 
            width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; 
            padding: 12px; font-family: inherit; margin-bottom: 15px; 
            resize: vertical; box-sizing: border-box; 
        }
        textarea:disabled { background: #f9f9f9; color: #777; cursor: not-allowed; }
        .btn-enviar { 
            background: #7b8f80; color: white; border: none; padding: 15px; 
            border-radius: 10px; font-weight: bold; cursor: pointer; 
            width: 100%; font-size: 1rem; transition: 0.3s; 
        }   
        .btn-enviar:hover:not(:disabled) { background: #6a7c6e; transform: translateY(-2px); }
        .btn-enviar:disabled { background: #ccc; cursor: not-allowed; }
        /* Efeito de hover nos botões de ação rápida */
.hover-action {
    cursor: pointer;
    border-color: rgba(0, 242, 255, 0.2) !important;
}

.hover-action:hover {
    background: rgba(0, 242, 255, 0.1) !important;
    border-color: var(--azul-neon) !important;
    transform: translateY(-5px);
}

.hover-action i {
    transition: transform 0.3s ease;
}

.hover-action:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--azul-neon));
}

/* Animação das barras do gráfico */
.bar {
    transition: height 1s ease-in-out;
    cursor: pointer;
}

.bar:hover {
    opacity: 1 !important;
    transform: scaleX(1.1);
}

/* Badge de Status pulsante */
.bg-success {
    background-color: #28a745 !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* Ajuste para o Accordion Tech */
.accordion-button:not(.collapsed) {
    background-color: rgba(0, 242, 255, 0.1);
    color: var(--azul-neon);
    box-shadow: none;
}

.accordion-button::after {
    filter: invert(1); /* Deixa a setinha branca */
}

.accordion-item {
    border: none;
}

.accordion-button:focus {
    border-color: var(--azul-neon);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}
/* --- SEÇÃO DE BENEFÍCIOS (HOLOFOTES) --- */

/* O Container do Holofote: um card sutil que fica em evidência no hover */
.activity-spotlight {
    border-radius: 20px;
    background: transparent;
    transition: var(--transicao); /* Usando a transição suave que definimos antes */
    border: 1px solid transparent;
}

.activity-spotlight:hover {
    background: rgba(255, 255, 255, 0.03); /* Vidro sutil */
    border-color: rgba(0, 242, 255, 0.1);
    transform: translateY(-5px);
}

/* O Holofote do Ícone: A versão tech do círculo azul da imagem */
.neon-icon-holder {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.1); /* Borda sutil off-white */
    background: rgba(0, 242, 255, 0.02); /* Fundo ciano quase invisível */
    transition: var(--transicao);
    position: relative;
    overflow: hidden;
}

/* Efeito de Brilho no Hover */
.activity-spotlight:hover .neon-icon-holder {
    border-color: var(--azul-neon);
    background: rgba(0, 242, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4); /* Glow Neon */
}

/* Ajuste nos textos */
.activity-spotlight h6 {
    transition: var(--transicao);
}

.activity-spotlight:hover h6 {
    color: var(--azul-neon) !important; /* Título brilha em neon */
}

        .radar-circle { 
            position: absolute; border: 2px solid rgba(67, 38, 232, 0.5); border-radius: 50%; 
            animation: pulse 3s infinite; opacity: 3; 
        }
        /* .circle-1 { width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .circle-2 { width: 150px; height: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1s; }
        .circle-3 { width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 2s; } */
        .radar-scanner { 
            position: absolute; width: 2px; height: 100%; background: rgba(255, 193, 7, 0.8); 
            top: 0; left: 50%; transform-origin: bottom center; animation: rotateScanner 3s linear infinite;
        }

        @keyframes pulse {
            to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
        }
        @keyframes rotateScanner {
            to { transform: rotate(360deg) translateX(-50%); }
        }  
    
        /* --- EFEITO RADAR DE COBERTURA --- */
.radar-circle {
    position: absolute;
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 50%;
}

.circle-1 { width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1s;}
.circle-2 { width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 2s;}
.circle-3 { width: 300px; height: 300px;top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 3s; } 

   .radar-scanner {
    position: absolute;
    /* O tamanho deve ser grande o suficiente para cobrir o card */
    width: 600px; 
    height: 600px;
    
    /* Posiciona a ponta do scanner exatamente no pino */
    bottom: 25px; /* Ajuste conforme a posição do seu pino */
    right: 35px;  /* Ajuste conforme a posição do seu pino */
    
    /* Cria o efeito de leque: a ponta nasce no centro (100% 100%) */
    background: conic-gradient(
        from 210deg at 100% 100%, 
        transparent 0deg, 
        rgba(0, 242, 255, 0.3) 30deg, 
        transparent 60deg
    );
    
    /* DEFINE O EIXO NA PONTA DO SINAL (Canto inferior direito do elemento) */
    transform-origin: bottom right; 
    
    animation: radar-scan-perfect 4s infinite linear;
    pointer-events: none;
    z-index: 5;
}

@keyframes radar-scan-perfect {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Badge de expansão */
.border-warning {
    border-color: rgba(255, 193, 7, 0.4) !important;
}

/* Pulsar verde para bairros ativos */
.text-success {
    text-shadow: 0 0 10px rgba(40, 167, 69, 0.8);
}


@media (max-width: 768px) {
    .glass-card { padding: 25px; }
    .display-3 { font-size: 2.2rem; }
}