/* ============================================================
   ÍNDICE RÁPIDO - PRINCIPAIS SEÇÕES DESTE ARQUIVO
   ============================================================
   
   Para localizar rapidamente seções importantes, use Ctrl+F e busque:
   
   - "IDENTIFICAÇÃO COMO ASSOCIADO AMAZON" (linha ~3236)
     → Estilos do bloco de disclaimer do Amazon Associates
   
   - "AVISO DE TRANSPARÊNCIA AMAZON" (linha ~3236)
     → Mesma seção acima
   
   - "footer-disclaimer" (linha ~3237)
     → Container principal do disclaimer
   
   - "disclaimer-content" (linha ~3315)
     → Área de conteúdo com o texto do disclaimer
   
   - "CONTEÚDO DO DISCLAIMER - COR E FONTE" (linha ~3412)
     → Para alterar cor e fonte do texto do conteúdo
     → Exemplo: "Ao clicar em um link de produto Amazon..."
   
   - "TÍTULOS DO DISCLAIMER - COR E FONTE" (linha ~3452)
     → Para alterar cor e fonte dos títulos
     → Exemplo: "IDENTIFICAÇÃO COMO ASSOCIADO AMAZON:"
   
   ============================================================ */

/* ========== RESET BÁSICO E MELHORIAS GLOBAIS ========== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========== BLOCO CSS 1 - ESTILOS PRINCIPAIS ========== */

:root {
            --primary-color: #1a237e;
            --secondary-color: #0d47a1;
            --accent-color: #64b5f6;
            --background-color: #f8f9fa;
            --text-color: #2c3e50;
            --border-radius: 10px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --radius-xl: 16px;
            /* Cores alegres adicionadas */
            --happy-green: #4ecdc4;
            --happy-blue: #45b7d1;
            --happy-yellow: #f7b731;
            --happy-pink: #f093fb;
            --happy-orange: #ff9a56;
        }

        html { 
            font-size: 16px; 
        }

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  COR DE FUNDO DA ÁREA DE PRODUTOS                            ║
           ║  ===========================================================  ║
           ║                                                              ║
           ║  ⚠️ COR DE FUNDO: linear-gradient(135deg, #7dd3b0...)        ║
           ║                                                              ║
           ║  Esta é a cor de fundo principal onde ficam os produtos.    ║
           ║  Pode ser alterada através do painel administrativo:        ║
           ║  → Botão "CONFIG CSS" → Área de Produtos                    ║
           ║                                                              ║
           ║  Para alterar manualmente, modifique o valor abaixo:         ║
           ║  → background: linear-gradient(...); (linha ~61)            ║
           ╚══════════════════════════════════════════════════════════════╝ */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 'Roboto', sans-serif;
            background: linear-gradient(135deg, #7dd3b0 0%, #5fb89a 25%, #4a9d7a 50%, #3d8b6f 75%, #2d8659 100%); /* ⚠️ COR CONFIGURÁVEL - Alterar via CONFIG CSS */
            background-size: 400% 400%;
            animation: gradientShift 20s ease infinite;
            margin: 0;
            padding: 0;
            color: var(--text-color);
            line-height: 1.6;
            font-synthesis-weight: none;
            text-rendering: optimizeLegibility;
            position: relative;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Partículas decorativas alegres no background */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(168, 230, 207, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(100, 181, 246, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(183, 229, 252, 0.1) 0%, transparent 50%);
            animation: float 20s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .form-container {
            background-color: white;
            padding: 2rem;
            border-radius: var(--radius-xl);
            box-shadow: 0 10px 30px rgba(2,6,23,.06);
            max-width: 800px;
            margin: 2rem auto;
        }

        h1, h2 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 1.5rem;
            font-weight: 600;
            line-height: 1.2;
            font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
        }

        h2 {
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
            margin-top: 2rem;
        }

        .input-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
        }

        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        select:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
        }

        .radio-group,
        .checkbox-group {
            display: flex;
            gap: 1.5rem;
            margin: 0.5rem 0;
            flex-wrap: wrap;
        }

        .radio-option,
        .checkbox-option {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s ease;
            margin-top: 2rem;
        }

        button:hover {
            background-color: var(--secondary-color);
        }

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  MENU DE CATEGORIAS - ABAIXO DA LOGO E BUSCA                 ║
           ║  ===========================================================  ║
           ║                                                              ║
           ║  ESTA SEÇÃO CONTROLA O MENU DE CATEGORIAS QUE APARECE        ║
           ║  ABAIXO DA LOGO E DO CAMPO DE BUSCA NO HEADER.              ║
           ║                                                              ║
           ║  LOCALIZAÇÃO NO HTML (index.php):                            ║
           ║  - Linha ~1465: <div class="header-aquitemo-categories">        ║
           ║  - Linha ~1467: <nav class="sidebar">                        ║
           ║  - Linha ~1468: <h3 class="sidebar-title">Categorias</h3>   ║
           ║  - Linha ~1469: <ul> (lista de categorias)                  ║
           ║                                                              ║
           ║  O QUE ESTA SEÇÃO FAZ:                                       ║
           ║  - Posiciona o menu abaixo da logo e busca                  ║
           ║  - Controla largura, altura e posicionamento                 ║
           ║  - Define cores de fundo (gradiente escuro)                 ║
           ║  - Controla transições e animações                           ║
           ║                                                              ║
           ║  PARA ALTERAR:                                               ║
           ║  - width: Largura do menu (atualmente 280px)                ║
           ║  - background: Cor de fundo do menu                          ║
           ║  - position: absolute = relativo ao header                   ║
           ║                                                              ║
           ║  NOTA: As categorias individuais são estilizadas mais       ║
           ║  abaixo com .sidebar a (linha ~331)                          ║
           ╚══════════════════════════════════════════════════════════════╝ */
        
        /* Container do menu de categorias */
        .header-aquitemo-categories {
            position: relative;
            width: 100%;
            margin-top: 0.4rem;
        }

        .sidebar {
            position: absolute;
            top: 100%;
            left: 0;
            width: 280px;
            max-height: 0;
            overflow: hidden;
            background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
            transition: max-height 0.3s ease, opacity 0.3s ease;
            z-index: 999;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            border-radius: 0 0 8px 8px;
            opacity: 0;
        }
        
        .sidebar.active {
            max-height: 500px;
            opacity: 1;
            overflow-y: auto;
        }
        
        /* Ajuste do título das categorias dentro do dropdown */
        .header-aquitemo-categories .sidebar-title {
            margin: 0;
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(37, 99, 235, 0.15);
        }

        /* Decoração alegre na sidebar - removida para dropdown */
        .header-aquitemo-categories .sidebar::before {
            display: none; /* Remove decoração no dropdown */
        }
        
        /* Decoração alegre na sidebar (mantida para compatibilidade) */
        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            animation: pulse 4s ease-in-out infinite;
            pointer-events: none;
        }

        /* .sidebar.active já definido acima */

        /* Sidebar recolhida (collapsed) - apenas ícones */
        .sidebar.collapsed {
            width: 70px;
        }

        .sidebar.collapsed .sidebar-title,
        .sidebar.collapsed .top-header,
        .sidebar.collapsed a span {
            opacity: 0;
            width: 0;
            overflow: hidden;
            transition: opacity 0.2s ease, width 0.3s ease;
        }

        .sidebar.collapsed a {
            justify-content: center;
            padding: 15px 0;
        }

        .sidebar.collapsed a i {
            margin-right: 0;
            width: 100%;
        }

        /* Tooltip para links quando collapsed */
        .sidebar.collapsed a {
            position: relative;
        }

        .sidebar.collapsed a:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            left: 75px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            white-space: nowrap;
            z-index: 1000;
            font-size: 14px;
            pointer-events: none;
            animation: fadeInTooltip 0.2s ease;
        }

        .sidebar.collapsed a:hover::before {
            content: '';
            position: absolute;
            left: 70px;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid transparent;
            border-right-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            pointer-events: none;
        }

        @keyframes fadeInTooltip {
            from {
                opacity: 0;
                transform: translateX(-5px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .top-header {
            width: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 1rem 0;
            margin-bottom: 1rem;
        }

        .logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
        }

        .logo-container img {
            max-width: 180px;
            height: auto;
            opacity: 1 !important; /* Sempre visível */
            transition: opacity 0.3s ease;
        }

        .sidebar.active .logo-container img {
            opacity: 1;
        }

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  TÍTULO "CATEGORIAS" NO MENU LATERAL                         ║
           ║  ===========================================================  ║
           ║                                                              ║
           ║  ESTA SEÇÃO CONTROLA O ESTILO DO TÍTULO "CATEGORIAS"        ║
           ║  QUE APARECE NO TOPO DO MENU LATERAL.                        ║
           ║                                                              ║
           ║  LOCALIZAÇÃO NO HTML (index.php):                            ║
           ║  - Linha ~1466: <h3>Categorias</h3>                         ║
           ║                                                              ║
           ║  O QUE ESTA SEÇÃO FAZ:                                       ║
           ║  - Define cor, tamanho e peso da fonte do título            ║
           ║  - Controla fundo e borda do título                          ║
           ║  - Define espaçamento e alinhamento                          ║
           ║                                                              ║
           ║  PARA ALTERAR:                                               ║
           ║  - color: Cor do texto "Categorias"                        ║
           ║  - font-size: Tamanho do texto                               ║
           ║  - background: Cor de fundo do título                      ║
           ║  - text-transform: uppercase = MAIÚSCULAS                    ║
           ╚══════════════════════════════════════════════════════════════╝ */
        .sidebar-title {
            color: #f9fafb;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            padding: 20px 15px;
            margin: 0;
            opacity: 1 !important; /* Sempre visível */
            transition: opacity 0.3s;
            background: rgba(37, 99, 235, 0.15);
            border-bottom: 2px solid rgba(37, 99, 235, 0.3);
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .sidebar.active .sidebar-title {
            opacity: 1;
        }

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  LINKS DAS CATEGORIAS NO MENU LATERAL                        ║
           ║  ===========================================================  ║
           ║                                                              ║
           ║  ESTA SEÇÃO CONTROLA O ESTILO DOS LINKS INDIVIDUAIS         ║
           ║  DE CADA CATEGORIA DENTRO DO MENU LATERAL.                  ║
           ║                                                              ║
           ║  LOCALIZAÇÃO NO HTML (index.php):                            ║
           ║  - Linha ~1468-1485: Loop PHP que gera os links             ║
           ║  - Exemplo: <a href="?categoria=3">Informática</a>          ║
           ║                                                              ║
           ║  O QUE ESTA SEÇÃO FAZ:                                       ║
           ║  - Define padding, espaçamento e cores dos links             ║
           ║  - Controla efeitos hover (quando passa o mouse)            ║
           ║  - Define tamanho da fonte e ícones                         ║
           ║                                                              ║
           ║  PARA ALTERAR:                                               ║
           ║  - color: Cor do texto das categorias                        ║
           ║  - font-size: Tamanho do texto                               ║
           ║  - padding: Espaçamento interno dos links                    ║
           ║  - .sidebar a:hover: Efeitos ao passar o mouse              ║
           ╚══════════════════════════════════════════════════════════════╝ */
        .sidebar a {
            padding: 14px 20px;
            text-decoration: none;
            font-size: 15px;
            color: #e5e7eb;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s ease;
            white-space: nowrap;
            opacity: 1 !important;
            border-left: 3px solid transparent;
            position: relative;
            font-weight: 500;
            border-radius: 0 8px 8px 0;
            margin: 2px 8px;
        }

        .sidebar.active a {
            opacity: 1;
        }

        .sidebar a:hover {
            background: rgba(37, 99, 235, 0.2);
            transform: translateX(4px);
            border-left: 3px solid #2563eb;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
            color: #f9fafb;
        }
        
        .sidebar a:active {
            background: rgba(37, 99, 235, 0.3);
        }

        .sidebar.collapsed a:hover {
            transform: translateX(0);
            background: rgba(255, 255, 255, 0.15);
        }

        .sidebar a i {
            width: 24px;
            text-align: center;
            flex-shrink: 0;
            font-size: 1.1rem;
            color: #9ca3af;
            transition: color 0.2s ease, transform 0.2s ease;
        }
        
        .sidebar a:hover i {
            color: #60a5fa;
            transform: scale(1.1);
        }

        .sidebar a span {
            transition: opacity 0.2s ease, width 0.3s ease;
            display: inline-block;
        }

        /* Ícones de radiologia na sidebar */
        .sidebar-radiology-icons {
            text-align: center;
            padding: 15px;
            opacity: 0.6;
        }

        .sidebar-radiology-icon {
            font-size: 1.5rem;
            margin: 0 8px;
            animation: rotate 4s linear infinite;
            display: inline-block;
        }

        .sidebar-radiology-icon::before {
            content: attr(data-icon);
        }

        /**
         * ============================================================
         * WHATSAPP FLUTUANTE - BOTÃO "FALE CONOSCO" - CSS
         * ============================================================
         * 
         * 📍 LOCALIZAÇÃO: css/styles_aqui.css (linha ~502)
         * 
         * 🎯 PROPÓSITO:
         * Estilos CSS para o botão flutuante do WhatsApp que aparece
         * fixo no canto inferior direito da página, permitindo que
         * os usuários entrem em contato rapidamente via WhatsApp.
         * 
         * 🔄 COMPONENTES ESTILIZADOS:
         * 1. Botão flutuante (.whatsapp-float)
         * 2. Efeito hover do botão (.whatsapp-float:hover)
         * 3. Ícone do WhatsApp (.whatsapp-float i)
         * 4. Indicador de status (.status-indicator)
         * 5. Classes de status (.status-online, .status-offline)
         * 6. Animação de pulso (@keyframes pulse)
         * 7. Texto de status (.status-text)
         * 
         * 📋 CARACTERÍSTICAS DO BOTÃO:
         * - Posição fixa no canto inferior direito
         * - Gradiente verde (cor característica do WhatsApp)
         * - Indicador visual de status (bolinha verde/vermelha)
         * - Animação de pulso no indicador
         * - Efeito hover com elevação e escala
         * - Z-index alto (3000) para ficar acima de outros elementos
         * 
         * ⚙️ COMO FUNCIONA:
         * 1. O botão é posicionado fixo (position: fixed) no canto inferior direito
         * 2. O indicador de status muda de cor baseado no horário (via JavaScript)
         * 3. O texto mostra o status atual (ONLINE/OFFLINE)
         * 4. A função JavaScript updateWhatsAppStatus() atualiza o status automaticamente
         * 
         * 🔧 PERSONALIZAÇÃO:
         * Para alterar a posição do botão, modifique:
         * - bottom: 30px;  (distância do fundo)
         * - right: 30px;   (distância da direita)
         * 
         * Para alterar as cores, modifique:
         * - background: linear-gradient(135deg, #32CD32, #00FF7F);  (gradiente verde)
         * - .status-online: background-color: #00FF00;  (verde para online)
         * - .status-offline: background-color: #FF4444;  (vermelho para offline)
         * 
         * 📚 DOCUMENTAÇÃO RELACIONADA:
         * - HTML do botão: index.php linha ~1992
         * - Função JavaScript: index.php linha ~2557
         * 
         * ============================================================
         */
        
        /* Botão Flutuante do WhatsApp - Estilo Principal */
        .whatsapp-float {
            position: fixed;              /* Posição fixa na tela (não rola com a página) */
            bottom: 30px;                 /* 30px do fundo da tela */
            right: 30px;                  /* 30px da direita da tela */
            background: linear-gradient(135deg, #32CD32, #00FF7F);  /* Gradiente verde (cor do WhatsApp) */
            color: white;                 /* Texto branco para contraste */
            padding: 15px 20px;          /* Espaçamento interno (vertical horizontal) */
            border-radius: 25px;          /* Bordas arredondadas (formato "pill") */
            display: flex;                /* Layout flexível para organizar conteúdo */
            align-items: center;          /* Alinha itens verticalmente ao centro */
            justify-content: center;      /* Centraliza conteúdo horizontalmente */
            font-size: 16px;              /* Tamanho da fonte do texto */
            font-weight: bold;            /* Texto em negrito */
            box-shadow: 0 4px 15px rgba(50, 205, 50, 0.4);  /* Sombra verde suave */
            transition: all 0.3s ease;   /* Transição suave para efeitos hover */
            z-index: 3000;                /* Camada acima de outros elementos (sempre visível) */
            text-decoration: none;        /* Remove sublinhado do link */
            white-space: nowrap;          /* Texto em uma linha (não quebra) */
            border: 2px solid rgba(255, 255, 255, 0.2);  /* Borda branca semi-transparente */
            min-width: 200px;             /* Largura mínima para manter formato */
        }

        /* Efeito ao passar o mouse sobre o botão (Hover) */
        .whatsapp-float:hover {
            transform: translateY(-3px) scale(1.05);  /* Eleva 3px e aumenta 5% */
            box-shadow: 0 8px 25px rgba(50, 205, 50, 0.6);  /* Sombra mais intensa */
            background: linear-gradient(135deg, #00FF7F, #32CD32);  /* Inverte gradiente */
        }

        /* Ícone do WhatsApp dentro do botão */
        .whatsapp-float i {
            margin-right: 8px;            /* Espaço à direita do ícone */
            font-size: 18px;              /* Tamanho do ícone (Font Awesome) */
        }

        /**
         * ============================================================
         * INDICADOR DE STATUS ONLINE/OFFLINE - CSS
         * ============================================================
         * 
         * 🎯 PROPÓSITO:
         * Bolinha colorida que indica se a equipe está online ou offline
         * baseado no horário de atendimento.
         * 
         * 🔴 VERMELHO: Equipe offline (fora do horário de atendimento)
         * 🟢 VERDE: Equipe online (dentro do horário de atendimento)
         * 
         * ⚙️ COMO FUNCIONA:
         * - A classe .status-online aplica cor verde quando equipe está online
         * - A classe .status-offline aplica cor vermelha quando equipe está offline
         * - A animação pulse faz a bolinha "pulsar" (piscar) para chamar atenção
         * - A função JavaScript atualiza a classe baseado no horário atual
         * 
         * ============================================================
         */
        .status-indicator {
            display: inline-block;        /* Exibe como bloco inline (fica na mesma linha) */
            width: 8px;                   /* Largura da bolinha */
            height: 8px;                  /* Altura da bolinha */
            border-radius: 50%;           /* Formato circular (50% = círculo perfeito) */
            margin-right: 6px;            /* Espaço à direita da bolinha */
            animation: pulse 2s infinite; /* Animação de pulso contínua (2 segundos por ciclo) */
        }

        /* Status ONLINE - Cor verde brilhante */
        .status-online {
            background-color: #00FF00;    /* Verde brilhante */
            box-shadow: 0 0 6px rgba(0, 255, 0, 0.6);  /* Brilho verde ao redor */
        }

        /* Status OFFLINE - Cor vermelha */
        .status-offline {
            background-color: #FF4444;    /* Vermelho */
            box-shadow: 0 0 6px rgba(255, 68, 68, 0.6);  /* Brilho vermelho ao redor */
        }

        /**
         * ============================================================
         * ANIMAÇÃO DE PULSO - CSS
         * ============================================================
         * 
         * 🎯 PROPÓSITO:
         * Faz o indicador de status "pulsar" (piscar) para chamar atenção
         * do usuário e indicar que o status está sendo atualizado.
         * 
         * ⚙️ COMO FUNCIONA:
         * - Opacidade varia de 1 (totalmente visível) para 0.5 (semi-transparente)
         * - Ciclo completo em 2 segundos
         * - Repete infinitamente (infinite)
         * 
         * ============================================================
         */
        @keyframes pulse {
            0% { opacity: 1; }            /* Início: totalmente visível (100% opaco) */
            50% { opacity: 0.5; }         /* Meio: semi-transparente (50% opaco) */
            100% { opacity: 1; }          /* Fim: totalmente visível novamente (100% opaco) */
        }

        /**
         * ============================================================
         * TEXTO DE STATUS (HORÁRIO DE ATENDIMENTO) - CSS
         * ============================================================
         * 
         * 🎯 PROPÓSITO:
         * Estiliza o texto que exibe o status atual (ONLINE/OFFLINE).
         * 
         * 📋 EXEMPLOS DE TEXTO EXIBIDO:
         * - "ONLINE" (quando equipe está disponível)
         * - "OFFLINE" (quando equipe não está disponível)
         * 
         * ⚙️ COMO FUNCIONA:
         * - A função JavaScript updateWhatsAppStatus() atualiza este texto
         * - O texto muda baseado no dia da semana e horário atual
         * - Fonte pequena e levemente transparente para não competir com o texto principal
         * 
         * ============================================================
         */
        .status-text {
            font-size: 11px;              /* Fonte pequena (menor que o texto principal) */
            font-weight: normal;          /* Peso normal (não negrito) */
            opacity: 0.9;                  /* Levemente transparente (90% opaco) */
            margin-top: 2px;              /* Pequeno espaço acima */
        }


        /* Animações */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

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

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* Ícones de Radiologia Flutuantes */
        .radiology-icons-floating {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            overflow: hidden;
        }

        .floating-icon {
            position: absolute;
            font-size: clamp(3rem, 5vw, 5rem);
            color: rgba(255, 255, 255, 0.85);
            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
            animation: floatRadiology var(--duration, 25s) ease-in-out infinite;
            animation-delay: var(--delay, 0s);
            opacity: 0;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
            font-weight: bold;
            will-change: transform;
        }

        .floating-icon::before {
            content: attr(data-icon);
        }

        @keyframes floatRadiology {
            0% {
                transform: translateX(120vw) translateY(100vh) rotate(0deg) scale(0.8);
                opacity: 0;
            }
            10% {
                opacity: 0.7;
            }
            50% {
                transform: translateX(-20vw) translateY(-20vh) rotate(180deg) scale(1.1);
                opacity: 0.85;
            }
            90% {
                opacity: 0.7;
            }
            100% {
                transform: translateX(-120vw) translateY(-100vh) rotate(360deg) scale(0.8);
                opacity: 0;
            }
        }

        /* Animação adicional de pulso para os ícones */
        @keyframes iconPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        /* Responsividade - reduzir quantidade e tamanho em mobile */


        .form-container {
            animation: fadeIn 0.5s ease-out;
        }

        /* Card style para seções */
        .section-card {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: var(--radius-xl);
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 30px rgba(2,6,23,.06);
        }

        /* Estilo para campos obrigatórios */
        .required::after {
            content: "*";
            color: #e74c3c;
            margin-left: 4px;
        }

        /* Loading spinner para o botão */
        .loading {
            position: relative;
            pointer-events: none;
        }

        .loading::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            margin: -10px 0 0 -10px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Estilo para a barra superior fixa */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  BARRA SUPERIOR (TOP-BAR) - FUNDO LARANJA                    ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ ATENÇÃO: PARA ALTERAR A COR DO FUNDO LARANJA DO TOPO     ║
   ║                                                              ║
   ║  Esta é a barra superior fixa que contém:                    ║
   ║  - Texto "SEG-SEX: 07:00-11:00 - 15:00-17:00"               ║
   ║  - Ícones de redes sociais (WhatsApp, Instagram)             ║
   ║                                                              ║
   ║  → Linha ~832: background: linear-gradient(...)             ║
   ║     ← ALTERE AQUI a cor do fundo laranja                    ║
   ║                                                              ║
   ║  CORES SUGERIDAS PARA O FUNDO:                               ║
   ║  - Laranja: #ff8c00 (atual)                                 ║
   ║  - Laranja claro: #ffa500                                   ║
   ║  - Laranja escuro: #ff6b00                                  ║
   ║  - Vermelho-laranja: #ff4500                                ║
   ╚══════════════════════════════════════════════════════════════╝ */
        /* Top-bar antiga - OCULTA (substituída pelo header-ibyte) */
        .top-bar {
            display: none !important;      /* Ocultada pois está integrada no header-ibyte */
        }

        /* Ajuste do botão do menu */
        .menu-toggle {
            display: flex; /* Visível no desktop para collapse */
            align-items: center;
            justify-content: center;
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 10px 12px;
            z-index: 1001;
            transition: all 0.3s ease;
            border-radius: 6px;
            margin-right: 10px;
        }

        .menu-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }

        /* Botão de collapse na sidebar (desktop) */
        .sidebar-toggle-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.3s ease;
            z-index: 999;
        }

        .sidebar-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(180deg);
        }

        .sidebar.collapsed .sidebar-toggle-btn {
            right: 50%;
            transform: translateX(50%);
        }

        .sidebar.collapsed .sidebar-toggle-btn:hover {
            transform: translateX(50%) rotate(180deg);
        }

        .sidebar.collapsed .sidebar-toggle-btn i {
            transform: rotate(180deg);
        }

        .sidebar.collapsed .sidebar-toggle-btn:hover i {
            transform: rotate(360deg);
        }

        /* Mostrar botão no mobile */

        /* Layout Principal */
        .layout {
            position: relative;
            width: 100%;
        }

        /* Topbar Moderno (Sidebar no Topo) */
        .topbar-modern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: transparent;
            box-shadow: none;
            z-index: 1000;
            backdrop-filter: blur(5px);
            min-height: 95px;
        }

        .topbar-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0.5rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            flex-wrap: wrap;
            min-height: 95px;
        }

        .topbar-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-shrink: 0;
            min-width: 250px;
        }

        .topbar-logo {
            width: 180px;
            height: 95px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .topbar-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.95);
            padding: 0.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .topbar-contact {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            flex: 1;
            min-width: 300px;
            max-width: 400px;
            padding: 0 1rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: rgba(255, 255, 255, 1);
            font-size: 0.85rem;
            line-height: 1.3;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .contact-item i {
            font-size: 0.9rem;
            width: 16px;
            text-align: center;
            color: rgba(255, 255, 255, 1);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .contact-label {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .topbar-title {
            font-size: clamp(1rem, 2vw, 1.3rem);
            color: white;
            margin: 0;
            font-weight: 600;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .topbar-radiology-icons {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            opacity: 0.7;
            margin-left: 0.5rem;
        }

        .topbar-radiology-icon {
            font-size: 1.2rem;
            animation: rotate 4s linear infinite;
            display: inline-block;
        }

        .topbar-radiology-icon::before {
            content: attr(data-icon);
        }

        .topbar-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            flex: 1;
            justify-content: flex-end;
            max-width: calc(100% - 750px);
            row-gap: 0.4rem;
            align-self: flex-start;
            padding-top: 0.3rem;
        }

        .topbar-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.6rem 1rem;
            color: white;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            white-space: nowrap;
            position: relative;
            font-weight: 500;
            line-height: 1.4;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            height: 38px;
        }

        .topbar-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
            border-radius: 10px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .topbar-link:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .topbar-link:hover::before {
            opacity: 1;
        }

        .topbar-link:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        .topbar-link i {
            font-size: 0.95rem;
            width: 18px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .topbar-link span {
            position: relative;
            z-index: 1;
        }

        .topbar-toggle {
            display: none;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 0.6rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .topbar-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Ajuste do conteúdo principal - sem margin-left, centralizado */
        .main-content {
            margin-top: 110px; /* Ajustado para o novo header IByte */
            margin-left: 0;
            padding: 20px;
            transition: margin-top 0.3s ease;
            min-height: calc(100vh - 110px);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        
        .main-content > .container {
            width: 100%;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
        
        /* Alinhar o primeiro container com o topo da sidebar */
        .main-content > .container:first-child {
            margin-top: 0;
            padding-top: 0;
        }
        
        .main-content #popup-container {
            margin-top: 1rem;
        }

        /* Removido - não aplicável mais com topbar */

        /* ╔══════════════════════════════════════════════════════════════╗
           ║  COR DE FUNDO DO RODAPÉ (LARANJA)                            ║
           ║  ===========================================================  ║
           ║                                                              ║
           ║  ⚠️ COR DE FUNDO:                                           ║
           ║     linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%) ║
           ║     (Gradiente verde - pode ser alterado para laranja)      ║
           ║                                                              ║
           ║  Esta é a cor de fundo do rodapé do site.                   ║
           ║  Pode ser alterada através do painel administrativo:        ║
           ║  → Botão "CONFIG CSS" → Rodapé (Laranja)                   ║
           ║                                                              ║
           ║  Para alterar manualmente, modifique o valor abaixo:         ║
           ║  → background: linear-gradient(...) (linha ~1353)          ║
           ║                                                              ║
           ║  CORES SUGERIDAS:                                           ║
           ║  - Verde atual: #2d8659, #4a9d7a, #5fb89a                   ║
           ║  - Laranja: #ff8c00, #ffa500, #ffb84d                      ║
           ║  - Azul: #1e40af, #2563eb, #3b82f6                          ║
           ║  - Vermelho: #c91015, #dc2626, #ef4444                      ║
           ╚══════════════════════════════════════════════════════════════╝ */
        /* Estilo atualizado do rodapé */
        .main-content footer {
            background: linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%); /* ⚠️ COR CONFIGURÁVEL - Alterar via CONFIG CSS - Primeira cor do gradiente */
            color: white;
            padding: 2rem 0 1.5rem;
            position: relative;
            width: 100%;
            margin-top: auto;
            box-shadow: 0 -2px 10px rgba(45, 134, 89, 0.3);
            align-self: stretch;
        }

        .footer-content {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            box-sizing: border-box;
        }

        .footer-section {
            padding: 1rem;
        }

        .footer-section h3 {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-section h3 i {
            font-size: 1.3rem;
            animation: pulseIcon 2s ease-in-out infinite;
            color: rgba(255, 255, 255, 0.95);
        }

        @keyframes pulseIcon {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.9;
            }
        }

        .footer-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-section ul li {
            margin-bottom: 0.5rem;
        }

        .footer-section ul li a {
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.3rem 0;
            position: relative;
        }

        .footer-section ul li a i {
            font-size: 0.9rem;
            width: 18px;
            text-align: center;
            transition: all 0.3s ease;
            opacity: 0.9;
        }

        .footer-section ul li a:hover {
            opacity: 1;
            transform: translateX(5px);
            padding-left: 5px;
        }

        .footer-section ul li a:hover i {
            transform: scale(1.2);
            color: rgba(255, 255, 255, 1);
            animation: bounceIcon 0.6s ease;
        }

        @keyframes bounceIcon {
            0%, 100% {
                transform: scale(1.2) translateY(0);
            }
            50% {
                transform: scale(1.2) translateY(-3px);
            }
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-icons a {
            background: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        .social-icons i {
            font-size: 18px;
        }

        .social-icons .fa-facebook { color: #1877f2; }
        .social-icons .fa-instagram { color: #e4405f; }
        .social-icons .fa-tiktok { color: #000000; }
        .social-icons .fa-twitter { color: #1da1f2; }
        .social-icons .fa-linkedin { color: #0077b5; }
        .social-icons .fa-youtube { color: #ff0000; }

        .footer-description {
            color: white;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-description i {
            font-size: 1.1rem;
            animation: rotateIcon 3s ease-in-out infinite;
            color: rgba(255, 255, 255, 0.95);
        }

        @keyframes rotateIcon {
            0%, 100% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(-5deg);
            }
            75% {
                transform: rotate(5deg);
            }
        }

        .footer-address {
            color: white;
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .footer-address strong {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.3rem;
        }

        .footer-address strong i {
            font-size: 1rem;
            animation: locationPulse 2s ease-in-out infinite;
            color: rgba(255, 255, 255, 0.95);
        }

        @keyframes locationPulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.15);
                opacity: 0.8;
            }
        }

        .footer-phone {
            color: white;
            margin-top: 0.5rem;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .footer-phone strong {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.3rem;
        }

        .footer-phone strong i {
            font-size: 1rem;
            animation: phoneRing 2s ease-in-out infinite;
            color: rgba(255, 255, 255, 0.95);
        }

        @keyframes phoneRing {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            10% {
                transform: rotate(-10deg) scale(1.1);
            }
            20% {
                transform: rotate(10deg) scale(1.1);
            }
            30% {
                transform: rotate(-10deg) scale(1.1);
            }
            40% {
                transform: rotate(10deg) scale(1.1);
            }
            50% {
                transform: rotate(0deg) scale(1);
            }
        }

        /* Acessibilidade: Reduzir animações para usuários sensíveis */


        .title-container {
            text-align: center;
            margin: 0 auto;
            background: linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%);
            padding: 1.5rem 2rem;
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(45, 134, 89, 0.3);
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* Ícones decorativos no title-container */
        .title-container::after {
            content: '☢ ⚛ 🔬';
            position: absolute;
            bottom: 10px;
            right: 20px;
            font-size: 1.5rem;
            opacity: 0.3;
            animation: float 3s ease-in-out infinite;
            letter-spacing: 10px;
        }

        .title-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
            pointer-events: none;
        }

        .main-title {
            color: white;
            font-size: clamp(1.8rem, 3.5vw, 2.2rem);
            text-transform: uppercase;
            font-weight: 700;
            margin: 0 0 0.8rem 0;
            letter-spacing: 1px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
            line-height: 1.4;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            width: 100%;
            text-align: center;
        }

        .main-title::before {
            content: '🏥';
            font-size: 2rem;
            animation: bounce 2s ease-in-out infinite;
        }

        .main-title::after {
            content: '💚';
            font-size: 2rem;
            animation: bounce 2s ease-in-out infinite;
            animation-delay: 0.5s;
        }

        .subtitle {
            color: rgba(255, 255, 255, 0.95);
            font-size: clamp(0.95rem, 2vw, 1.15rem);
            text-transform: none;
            font-weight: 400;
            margin: 0.5rem 0 0 0;
            letter-spacing: 0.5px;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            text-align: center;
            line-height: 1.6;
            flex-wrap: wrap;
        }

        .subtitle::before {
            content: '✨';
            font-size: 1.2rem;
            animation: rotate 4s linear infinite;
        }

        .subtitle::after {
            content: '✨';
            font-size: 1.2rem;
            animation: rotate 4s linear infinite;
            animation-delay: 1s;
        }

        /* Media queries para responsividade do título */

        /* Media query consolidada acima */


        /* Ajuste quando sidebar está collapsed */
        .main-content.expanded > .container {
            max-width: calc(100% - 40px);
        }

        .subtitle .underline {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: #a8e6cf;
            border-radius: 2px;
        }

        /* Container do Mural Centralizado */
        .mural-container {
            width: 100%;
            max-width: 100%;
            margin: 1.5rem auto 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            background: rgba(255, 255, 255, 0.95);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(45, 134, 89, 0.2);
            overflow: hidden;
            min-height: 500px;
            max-height: calc(100vh - 300px);
            position: relative;
        }

        .mural-iframe {
            width: 100%;
            min-height: 500px;
            height: calc(100vh - 300px);
            max-height: 600px;
            border: none;
            display: block;
            background: white;
            border-radius: var(--border-radius);
        }

        /* Ajuste responsivo do mural */

        /* Media Query para 1024x768 e tablets */

        /* Media Query para mobile */

        .header-nav {
            display: flex;
            justify-content: space-between;
            background: #1a237e;
            padding: 1.5rem;
            border-radius: var(--border-radius);
            margin: 2rem 0;
            box-shadow: var(--box-shadow);
            color: white;
            font-weight: 500;
        }

        .header-nav span {
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            text-align: center;
            flex: 1;
            margin: 0 0.5rem;
        }

        .header-nav span:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 15px;
            margin: 2rem 0;
        }

        tr {
            background: white;
            box-shadow: var(--box-shadow);
            border-radius: var(--border-radius);
            transition: transform 0.3s ease;
        }

        td {
            padding: 1.5rem;
            border: none;
            vertical-align: middle;
        }

        td:first-child {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
            font-weight: bold;
            width: 25%;
        }

        td:last-child {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            width: 20%;
        }

        td a {
            color: #1565C0;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        td a:hover {
            color: #0D47A1;
            text-decoration: underline;
        }

        .setor-1, .setor-2, .setor-3, .setor-4 {
            position: relative;
        }

        .setor-1 { border-left: 5px solid #22c55e; }
        .setor-2 { border-left: 5px solid #eab308; }
        .setor-3 { border-left: 5px solid #ef4444; }
        .setor-4 { border-left: 5px solid #06b6d4; }

        tr:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }

        .footer {
            margin-top: 2rem;
            font-size: 0.95rem;
            color: white;
            text-align: left;
            padding: 2rem;
            background: linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(45, 134, 89, 0.3);
            border: 2px solid rgba(168, 230, 207, 0.3);
    width: 100%;
    box-sizing: border-box;
}

        .footer h4 {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: white;
            text-transform: uppercase;
        }

        .footer h4::before {
            content: "⚠️";
            font-size: 1.2rem;
        }

        .footer p {
            margin: 0;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.95); /* Melhorado contraste de 0.9 para 0.95 */
            font-size: 1rem;
            text-transform: none; /* Removido uppercase para melhor legibilidade */
            text-align: left;
        }

        .footer ul {
            margin: 1.5rem 0;
            padding-left: 0;
            list-style: none;
        }

        .footer li {
            margin: 0.8rem 0;
            color: rgba(255, 255, 255, 0.95); /* Melhorado contraste de 0.9 para 0.95 */
            text-transform: none; /* Removido uppercase para melhor legibilidade */
            font-size: 1rem;
            display: flex;
            align-items: center;
        }

        .footer li::before {
            content: "•";
            color: rgba(255, 255, 255, 0.9);
            margin-right: 10px;
        }

        .footer .agradecimento {
            margin-top: 2rem;
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.95); /* Melhorado contraste de 0.9 para 0.95 */
            text-transform: none; /* Removido uppercase para melhor legibilidade */
        }

        .footer .agradecimento::after {
            content: "✅";
            font-size: 1.2rem;
        }

        .assinatura {
            margin-top: 2rem;
            padding: 1.2rem;
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            text-align: center;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid var(--primary-color);
            position: relative;
            overflow: hidden;
        }

        .assinatura::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 200px;
            height: 200px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" font-family="Arial" font-size="40" text-anchor="middle" dy=".35em" fill="rgba(26,35,126,0.05)">CLINICA RADIUS</text></svg>');
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.1;
            pointer-events: none;
        }

        .assinatura .atenciosamente {
            color: #1a237e;
            font-size: 0.9rem;
            font-style: italic;
            margin-bottom: 0.8rem;
            font-weight: 500;
        }

        .assinatura h3 {
            color: #1a237e;
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .assinatura p {
            margin: 0.1rem 0;
            font-size: 0.7rem;
            line-height: 1.2;
            color: var(--text-color);
            text-align: center;
        }

        .assinatura p:nth-child(3) {
            color: #1a237e;
            font-weight: 600;
            font-size: 0.8rem;
            margin-bottom: 0.3rem;
        }

        .assinatura a {
            color: #1565C0;
            text-decoration: none;
            font-size: 0.7rem;
        }

        .assinatura a:hover {
            color: #0D47A1;
            text-decoration: underline;
        }

        .assinatura {
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .assinatura:hover {
            transform: scale(1);
        }
		
   /* Estilos do Banner Flutuante - DESATIVADO */
.floating-banner {
    display: none !important; /* Banner desativado */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 800px;
    height: 400px;
    max-width: 90vw; /* Para telas menores */
    max-height: 90vh;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.floating-banner.active {
    opacity: 1;
    display: none !important; /* Mantém desativado mesmo com active */
    transform: translate(-50%, -50%) scale(1);
}

/* Fundo escuro para sobreposição - DESATIVADO */
.banner-overlay {
    display: none !important; /* Overlay desativado */
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.banner-overlay.active {
    opacity: 1;
    display: none !important; /* Mantém desativado mesmo com active */
}

/* Imagem dentro do banner */
.floating-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

/* Botão de fechar */
.close-banner {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background-color: #1E3A8A;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
    z-index: 10000;
}

.close-banner:hover {
    background-color: #0F172A;
    transform: scale(1.1);
}

/* Responsividade aprimorada */

        /* Ajustes responsivos para header-nav e setores */

        /* Ajustes para tablets */

        /* Estilos para a tela de autenticação */
        .auth-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #a8e6cf 0%, #7dd3b0 25%, #90caf9 50%, #b3e5fc 75%, #c8e6c9 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
            overflow: hidden;
        }

        /* Símbolos de radiologia flutuantes na tela de autenticação */
        .auth-overlay::before {
            content: '☢';
            position: absolute;
            top: 10%;
            left: 10%;
            font-size: 4rem;
            opacity: 0.1; /* Reduzido de 0.2 para 0.1 - mais sutil */
            animation: floatAuth 40s ease-in-out infinite; /* Aumentado de 20s para 40s */
            color: #2d8659;
        }

        .auth-overlay::after {
            content: '⚛';
            position: absolute;
            top: 60%;
            right: 15%;
            font-size: 3.5rem;
            opacity: 0.1; /* Reduzido de 0.2 para 0.1 - mais sutil */
            animation: floatAuth 45s ease-in-out infinite reverse; /* Aumentado de 25s para 45s */
            color: #2d8659;
        }

        /* Adicionar mais símbolos usando pseudo-elementos do container */
        .auth-container::before {
            content: '🔬';
            position: absolute;
            top: -50px;
            right: -50px;
            font-size: 3rem;
            opacity: 0.08; /* Reduzido de 0.15 para 0.08 - mais sutil */
            animation: floatAuth 38s ease-in-out infinite; /* Aumentado de 18s para 38s */
            color: #2d8659;
            z-index: -1;
        }

        .auth-container::after {
            content: '☢';
            position: absolute;
            bottom: -60px;
            left: -60px;
            font-size: 2.5rem;
            opacity: 0.08; /* Reduzido de 0.15 para 0.08 - mais sutil */
            animation: floatAuth 42s ease-in-out infinite reverse; /* Aumentado de 22s para 42s */
            color: #2d8659;
            z-index: -1;
        }

        @keyframes floatAuth {
            0%, 100% {
                transform: translate(0, 0) rotate(0deg);
            }
            25% {
                transform: translate(30px, -30px) rotate(90deg);
            }
            50% {
                transform: translate(-20px, 20px) rotate(180deg);
            }
            75% {
                transform: translate(20px, 30px) rotate(270deg);
            }
        }

        /* Ícones flutuantes adicionais na tela de autenticação */
        .auth-floating-icon {
            position: absolute;
            font-size: 3rem;
            opacity: 0.08; /* Reduzido de 0.15 para 0.08 - mais sutil */
            color: #2d8659;
            pointer-events: none;
            animation: floatAuthAcross var(--duration, 40s) linear infinite; /* Aumentado de 20s para 40s */
            animation-delay: var(--delay, 0s);
            filter: drop-shadow(0 0 10px rgba(45, 134, 89, 0.2));
            will-change: transform;
        }

        @keyframes floatAuthAcross {
            0% {
                transform: translate(calc(var(--start-x, 0vw) - 0px), calc(var(--start-y, 0vh) - 0px)) rotate(0deg) scale(0.8);
                opacity: 0;
            }
            10% {
                opacity: 0.15;
            }
            50% {
                transform: translate(calc(var(--start-x, 0vw) - 50vw), calc(var(--start-y, 0vh) + 30vh)) rotate(180deg) scale(1.2);
                opacity: 0.2;
            }
            90% {
                opacity: 0.15;
            }
            100% {
                transform: translate(calc(var(--start-x, 0vw) - 100vw - 100px), calc(var(--start-y, 0vh) + 60vh)) rotate(360deg) scale(0.8);
                opacity: 0;
            }
        }

        .auth-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .auth-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 3rem;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(45, 134, 89, 0.3);
            text-align: center;
            max-width: 400px;
            width: 90%;
            animation: slideIn 0.6s ease-out;
            position: relative;
            border: 2px solid rgba(45, 134, 89, 0.2);
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .auth-logo {
            width: 120px;
            height: auto;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .auth-title {
            color: #2d8659;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .auth-subtitle {
            color: #666;
            font-size: 1rem;
            margin-bottom: 2rem;
            font-weight: 400;
        }

        .auth-input {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1.1rem;
            text-align: center;
            letter-spacing: 2px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }

        .auth-input:focus {
            outline: none;
            border-color: #2d8659;
            box-shadow: 0 0 0 3px rgba(45, 134, 89, 0.1);
        }

        .auth-button {
            background: linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .auth-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(45, 134, 89, 0.4);
            background: linear-gradient(135deg, #4a9d7a 0%, #5fb89a 50%, #2d8659 100%);
        }

        .auth-button:active {
            transform: translateY(0);
        }

        .auth-error {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 1rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .auth-error.show {
            opacity: 1;
        }

        .auth-hint {
            color: #999;
            font-size: 0.8rem;
            margin-top: 1rem;
            font-style: italic;
        }

        /* Responsividade para a tela de autenticação */

        /* 3.3 – Estados de foco acessíveis (teclado) */
        :focus-visible {
            outline: 3px solid #2d8659;
            outline-offset: 2px;
            border-radius: 8px;
        }
        
        /* Melhorar foco em links e botões */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline: 3px solid #2d8659;
            outline-offset: 2px;
        }
        
        .sidebar a:focus-visible {
            outline: 3px solid #a8e6cf;
            outline-offset: 2px;
            background: rgba(255, 255, 255, 0.2);
        }

        /* 3.4 – Suporte a "prefers-reduced-motion" */

        /* 3.2 – Layout respirando melhor em desktop e mobile */
        /* Container consolidado - usar .main-content > .container para conteúdo principal */
        .container { 
            max-width: min(1200px, 92vw);
            padding-inline: clamp(12px, 2vw, 24px);
            margin: 0 auto;
        }

        /* 3.5 – Melhorias no footer em telas pequenas */


/* =========== BLOCO CSS 2 - ESTILOS ADICIONAIS ========== */

.assinatura {            margin-top: 2rem;
            padding: 1.5rem;
            background-color: #fff;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            text-align: center;
}
/* Container duplicado removido - usar definição consolidada acima */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO RODAPÉ (DEFINIÇÃO ALTERNATIVA)              ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO:                                           ║
   ║     linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%) ║
   ║     (Gradiente verde)                                        ║
   ║                                                              ║
   ║  Esta é uma definição alternativa do rodapé.                ║
   ║  Veja comentário acima para mais detalhes sobre as cores.    ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO RODAPÉ                                      ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO: linear-gradient(135deg, #2d8659...)        ║
   ║                                                              ║
   ║  Esta é a cor de fundo do rodapé do site.                    ║
   ║  Pode ser alterada através do painel administrativo:         ║
   ║  → Botão "CONFIG CSS" → Rodapé                               ║
   ║                                                              ║
   ║  Para alterar manualmente, modifique o valor abaixo:         ║
   ║  → background: linear-gradient(135deg, #2d8659...);          ║
   ║    (linha ~2704)                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.footer {            margin-top: 2rem;
            font-size: 0.875rem;
            color: white;
            text-align: center;
            padding: 1.5rem;
            background: linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%); /* ⚠️ COR CONFIGURÁVEL - Alterar via CONFIG CSS */
            border-radius: 0.5rem;
            box-shadow: 0 4px 15px rgba(45, 134, 89, 0.3);
            border: 2px solid rgba(168, 230, 207, 0.3);
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}
.header-nav {            display: flex;
            justify-content: space-between;
            background-color: var(--primary-color);
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 2rem;
}
.setor-1 {border-left: 5px solid #22c55e; }
.setor-2 {border-left: 5px solid #eab308; }
.setor-3 {border-left: 5px solid #ef4444; }
.setor-4 {border-left: 5px solid #06b6d4; }
    .logo-container {            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
}
.top-header {            width: 100%;
            background-color: white;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
            box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
/* Centraliza e ajusta o quadro */

.quadro-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 350px; /* Mantém a altura fixa */
    overflow: hidden; /* Garante que não haja rolagem */
    cursor: pointer; /* Mantém o clique para popup */
}

/* Ajusta o iframe e remove a barra de rolagem */
.quadro-frame {
    width: 580px; /* Define a largura */
    height: 350px; /* Define a altura */
    border: none;
    pointer-events: none; /* Evita interação antes do clique */
}

/* Remove scrollbar para navegadores modernos */
.quadro-wrapper::-webkit-scrollbar {
    display: none;
}

.quadro-wrapper {
    scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none; /* Para Internet Explorer e Edge */
}



/* Ajuste responsivo para telas menores */


/* ========== BLOCO CSS 3 - MODAL DE AVISOS ========== */

.modal-avisos {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
        padding: 20px;
        box-sizing: border-box;
    }

    .modal-avisos.active {
        display: flex;
        opacity: 1;
        animation: modalFadeIn 0.4s ease-out;
    }

    .modal-avisos-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
    }

    .modal-avisos-container {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 28px;
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(45, 134, 89, 0.1);
        width: 100%;
        max-width: 950px;
        max-height: 85vh;
        overflow: hidden;
        position: relative;
        z-index: 2;
        animation: modalSlideUp 0.5s ease-out;
        border: 2px solid rgba(45, 134, 89, 0.15);
    }

    @keyframes modalFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes modalSlideUp {
        from { 
            opacity: 0;
            transform: translateY(50px) scale(0.95);
        }
        to { 
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Header do Modal */
    .modal-avisos-header {
        background: linear-gradient(135deg, #2d8659 0%, #4a9d7a 50%, #5fb89a 100%);
        color: white;
        padding: 35px 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(45, 134, 89, 0.3);
    }

    .modal-avisos-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: rotate 20s linear infinite;
    }

    .modal-header-content h2 {
        margin: 0 0 10px 0;
        font-size: 2rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 12px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
    }

    .modal-header-content p {
        margin: 0;
        opacity: 0.9;
        font-size: 1rem;
    }

    .modal-close-btn {
        background: rgba(255, 255, 255, 0.25);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        transition: all 0.3s ease;
        flex-shrink: 0;
        margin-left: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .modal-close-btn:hover {
        background: rgba(255, 255, 255, 0.4);
        border-color: rgba(255, 255, 255, 0.5);
        transform: rotate(90deg) scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Body do Modal */
    .modal-avisos-body {
        padding: 30px;
        max-height: 400px;
        overflow-y: auto;
    }

    /* Grid de Avisos Moderno */
    .avisos-grid {
        display: grid;
        gap: 20px;
    }

    .aviso-card-modern {
        background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(45, 134, 89, 0.08);
        border: 1px solid rgba(45, 134, 89, 0.1);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .aviso-card-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #2d8659, #4a9d7a, #5fb89a);
        transition: width 0.4s ease;
        box-shadow: 2px 0 8px rgba(45, 134, 89, 0.3);
    }

    .aviso-card-modern::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(45, 134, 89, 0.05) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .aviso-card-modern:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 40px rgba(45, 134, 89, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: rgba(45, 134, 89, 0.2);
    }

    .aviso-card-modern:hover::before {
        width: 10px;
    }

    .aviso-card-modern:hover::after {
        opacity: 1;
    }

    .aviso-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        gap: 15px;
    }

    .aviso-autor-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .aviso-avatar {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #2d8659, #4a9d7a);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1rem;
        box-shadow: 0 4px 12px rgba(45, 134, 89, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

    .aviso-card-modern:hover .aviso-avatar {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(45, 134, 89, 0.4);
    }

    .aviso-meta {
        display: flex;
        flex-direction: column;
    }

    .aviso-autor-name {
        font-weight: 700;
        color: #2d8659;
        margin-bottom: 6px;
        font-size: 1.05rem;
        letter-spacing: 0.3px;
    }

    .aviso-date {
        font-size: 0.85rem;
        color: #666;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .aviso-badge {
        background: linear-gradient(135deg, #ff6b6b, #ee5a52);
        color: white;
        padding: 8px 14px;
        border-radius: 22px;
        font-size: 0.8rem;
        font-weight: 700;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .aviso-badge i {
        font-size: 0.75rem;
    }

    .aviso-content {
        color: #333;
        line-height: 1.8;
        margin-bottom: 18px;
        font-size: 1rem;
        padding: 12px 0;
    }

    .aviso-content br {
        margin-bottom: 8px;
        display: block;
        content: "";
    }

    .aviso-anexo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: #2d8659;
        padding: 10px 18px;
        border-radius: 14px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        border: 1px solid rgba(45, 134, 89, 0.2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .aviso-anexo:hover {
        background: linear-gradient(135deg, #2d8659, #4a9d7a);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(45, 134, 89, 0.3);
        border-color: transparent;
    }

    .aviso-anexo i {
        font-size: 0.9rem;
    }

    /* Loading Moderno */
    .avisos-loading {
        text-align: center;
        padding: 60px 20px;
        color: #4a9d7a;
    }

    .loading-pulse {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
    }

    .pulse-dot {
        width: 12px;
        height: 12px;
        background: #4a9d7a;
        border-radius: 50%;
        animation: pulse 1.4s ease-in-out infinite both;
    }

    .pulse-dot:nth-child(1) { animation-delay: -0.32s; }
    .pulse-dot:nth-child(2) { animation-delay: -0.16s; }

    @keyframes pulse {
        0%, 80%, 100% { 
            transform: scale(0.8);
            opacity: 0.5;
        }
        40% { 
            transform: scale(1.2);
            opacity: 1;
        }
    }

    /* Empty State Moderno */
    .avisos-empty {
        text-align: center;
        padding: 60px 20px;
    }

    .empty-state .empty-icon {
        font-size: 4rem;
        margin-bottom: 20px;
        animation: bounce 2s ease-in-out infinite;
    }

    .empty-state h3 {
        color: #333;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .empty-state p {
        color: #666;
        margin: 0;
    }

    /* Footer do Modal */
    .modal-avisos-footer {
        padding: 28px 30px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        border-top: 2px solid rgba(45, 134, 89, 0.1);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

    .btn-primary, .btn-secondary {
        padding: 14px 32px;
        border: none;
        border-radius: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        min-width: 140px;
        justify-content: center;
    }

    .btn-primary {
        background: linear-gradient(135deg, #2d8659, #4a9d7a);
        color: white;
        box-shadow: 0 4px 15px rgba(45, 134, 89, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    .btn-primary:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 25px rgba(45, 134, 89, 0.5);
        background: linear-gradient(135deg, #256a4a, #3d8a6a);
    }

    .btn-primary:active {
        transform: translateY(-1px) scale(0.98);
    }

    .btn-primary i {
        font-size: 1.1rem;
    }

    .btn-secondary {
        background: white;
        color: #666;
        border: 2px solid #e9ecef;
    }

    .btn-secondary:hover {
        background: #f8f9fa;
        border-color: #dee2e6;
    }

    /* Responsividade */

/* ========== MELHORIAS DE LAYOUT E PERFORMANCE ========== */

/* Container base melhorado */
.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Melhorias em cards e containers */
.card,
.produto-card,
.section-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

.card:hover,
.produto-card:hover {
    transform: translateY(-2px);
}

/* Melhorias de tipografia e legibilidade */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
}

p {
    margin-bottom: 0.75rem;
}

p:last-child {
    margin-bottom: 0;
}

/* Melhorias em links */
a {
    transition: color 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
}

a:hover {
    opacity: 0.85;
}

/* Melhorias em botões */
button,
.btn-comprar,
.btn {
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 500;
}

button:active,
.btn-comprar:active,
.btn:active {
    transform: scale(0.98);
}

/* Melhorias em imagens */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Melhorias em formulários */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Melhorias em listas */
ul, ol {
    list-style-position: inside;
}

/* Melhorias de performance - otimização de renderização */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO CATÁLOGO DE PRODUTOS (CENTRO DO SITE)        ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO:                                             ║
   ║     Os produtos individuais (.produto-card) têm fundo branco  ║
   ║     ou gradiente claro. O grid em si usa o fundo do body.     ║
   ║                                                              ║
   ║  Esta seção controla o layout do catálogo de produtos.        ║
   ║  Os cards de produtos individuais têm:                       ║
   ║  - Fundo: linear-gradient(145deg, #ffffff, #f8f9fa)          ║
   ║    (definido em styles_aqui.css)                             ║
   ║                                                              ║
   ║  Para alterar a cor de fundo dos cards de produtos,           ║
   ║  procure por .produto-card neste arquivo                     ║
   ║  ou adicione estilos específicos aqui.                       ║
   ║                                                              ║
   ║  CORES SUGERIDAS PARA CARDS:                                 ║
   ║  - Branco atual: #ffffff, #f8f9fa                            ║
   ║  - Cinza muito claro: #f9fafb, #f3f4f6                       ║
   ║  - Branco suave: #fefefe, #fafafa                            ║
   ╚══════════════════════════════════════════════════════════════╝ */
.produtos-grid,
.grid {
    contain: layout style;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  ESTILOS PARA IMAGENS DE PRODUTOS CLICÁVEIS                   ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  Estilos para as imagens dos produtos que podem ser          ║
   ║  clicadas para abrir em nova aba                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.produto-card .produto-imagem {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: visible;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Badge Amazon - Ícone de verificação sobreposto na imagem */
.amazon-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #232f3e, #ff9900);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 3px solid #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.amazon-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 153, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.amazon-badge .fab.fa-amazon {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.amazon-checkmark {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: #00a651;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid #ffffff;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.produto-card .produto-imagem a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.produto-card .produto-imagem a:hover {
    opacity: 0.9;
}

.produto-card .produto-imagem img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center;
    transition: all 0.4s ease;
    display: block !important;
    max-width: 200px;
    max-height: 200px;
    visibility: visible !important;
    opacity: 1 !important;
}

.produto-card:hover .produto-imagem img {
    transform: scale(1.1);
}

/* Estilos responsivos para imagens de produtos */



/* Melhorias responsivas adicionais */


/* Melhorias de acessibilidade */
[role="button"],
button,
a[href] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  TEXTO "SEG-SEX: 07:00-11:00 - 15:00-17:00"                  ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ ATENÇÃO: PARA ALTERAR A COR E FONTE DO TEXTO DE HORÁRIO  ║
   ║                                                              ║
   ║  Este é o texto que aparece no topo:                         ║
   ║  "SEG-SEX: 07:00-11:00 - 15:00-17:00"                        ║
   ║                                                              ║
   ║  → Linha ~3208: color: #d1d5db;  (COR DO TEXTO)              ║
   ║  → Linha ~3209: font-weight: 500;  (PESO DA FONTE)          ║
   ║  → Linha ~3201: font-size: 0.9rem;  (TAMANHO DA FONTE)       ║
   ║  → Linha ~3213: color: #60a5fa;  (COR DO ÍCONE DE RELÓGIO)   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ========== MELHORIAS ESPECÍFICAS TOP-BAR ========== */
.top-bar-info,
.top-bar-social {
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;          /* Texto um pouco maior e mais legível */
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35); /* Dá contraste no fundo verde */
}

.top-bar-info span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.96);   /* Mais branco, mais visível */
    font-weight: 500;
}

/* Ícone de relógio */
.top-bar-info i {
    color: #ffffff;                     /* Branco para combinar com fundo laranja */
    font-size: 1.05rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  ÍCONES DE REDES SOCIAIS (WhatsApp, Instagram)               ║
   ╚══════════════════════════════════════════════════════════════╝ */
.top-bar-social a {
    color: #ffffff;
    font-size: 1.15rem;
    transition: all 0.22s ease;
    padding: 6px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;

    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.top-bar-social a:hover {
    background: #ffffff;
    color: #2d8659;                      /* Verde do rodapé no hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(45, 134, 89, 0.55);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  TOPO ESTILO IBYTE - ADAPTADO PARA AQUITEMOSTUDO             ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  Header moderno estilo IByte com cores laranja                ║
   ║  Mantendo padrão visual profissional                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO HEADER (BARRA SUPERIOR VERMELHA)            ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO: #c91015 (Vermelho)                         ║
   ║                                                              ║
   ║  Esta é a cor de fundo vermelha da barra superior do site.  ║
   ║  Pode ser alterada através do painel administrativo:         ║
   ║  → Botão "CONFIG CSS" → Header (Vermelho)                   ║
   ║                                                              ║
   ║  Para alterar manualmente, modifique o valor abaixo:         ║
   ║  → background: #c91015; (linha ~3758)                        ║
   ║                                                              ║
   ║  CORES SUGERIDAS:                                            ║
   ║  - Vermelho atual: #c91015                                    ║
   ║  - Laranja: #ff8c00                                         ║
   ║  - Azul: #2563eb                                            ║
   ║  - Verde: #2d8659                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.header-ibyte {
    background: #c91015; /* ⚠️ COR CONFIGURÁVEL - Alterar via CONFIG CSS - Vermelho do header */
    color: #ffffff;
    padding: 0.6rem 1.5rem 0.4rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
}

/* Linha superior */
.header-aquitemo-top {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 60px;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  LOGO DO SITE NO HEADER                                      ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ESTA SEÇÃO CONTROLA O ESTILO DA LOGO QUE APARECE          ║
   ║  NO CABEÇALHO (HEADER) DO SITE, NO CANTO SUPERIOR ESQUERDO. ║
   ║                                                              ║
   ║  LOCALIZAÇÃO NO HTML (index.php):                            ║
   ║  - Linha ~1432: <div class="header-aquitemo-logo">              ║
   ║  - Linha ~1434: <img src="img/logo.png" alt="...">          ║
   ║                                                              ║
   ║  O QUE ESTA SEÇÃO FAZ:                                       ║
   ║  - Define tamanho máximo da logo (max-height: 50px)         ║
   ║  - Controla alinhamento e espaçamento                        ║
   ║  - Garante que a logo não encolha (flex-shrink: 0)           ║
   ║                                                              ║
   ║  PARA ALTERAR:                                               ║
   ║  - max-height: Tamanho máximo da logo (atualmente 50px)      ║
   ║  - width/height: Dimensões da logo                            ║
   ║  - object-fit: Como a imagem se ajusta (contain = mantém     ║
   ║    proporção sem cortar)                                      ║
   ║                                                              ║
   ║  NOTA: A imagem da logo está em: img/logo.png                ║
   ║  Para trocar a logo, altere o src no index.php               ║
   ╚══════════════════════════════════════════════════════════════╝ */
.header-aquitemo-logo {
    flex-shrink: 0;
}

.header-aquitemo-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.header-aquitemo-logo img {
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.header-aquitemo-logo .logo-text {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO CAMPO DE BUSCA                              ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO: #ffffff (Branco)                           ║
   ║                                                              ║
   ║  Esta é a cor de fundo do campo de busca no header.          ║
   ║  Para alterar a cor, modifique o valor em:                   ║
   ║  → background: #ffffff; (linha abaixo)                      ║
   ║                                                              ║
   ║  CORES SUGERIDAS:                                            ║
   ║  - Branco atual: #ffffff                                     ║
   ║  - Cinza claro: #f8f9fa                                      ║
   ║  - Branco suave: #fefefe                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* Barra de busca grande e arredondada */
.header-aquitemo-search {
    flex: 1;
    position: relative;
    max-width: 900px;
}

.header-aquitemo-search form {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.header-aquitemo-search i {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #9ca3af;
    z-index: 2;
    pointer-events: none;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO CAMPO DE BUSCA                              ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO: #ffffff (Branco)                           ║
   ║                                                              ║
   ║  Esta é a cor de fundo do campo de pesquisa no header.      ║
   ║  Pode ser alterada através do painel administrativo:         ║
   ║  → Botão "CONFIG CSS" → Campo de Busca                      ║
   ║                                                              ║
   ║  Para alterar manualmente, modifique o valor abaixo:         ║
   ║  → background: #ffffff; (linha ~3853)                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.header-aquitemo-search input {
    width: 100%;
    border: none;
    outline: none;
    height: 46px;
    border-radius: 999px;
    padding: 0 1.5rem 0 2.8rem;
    font-size: 0.95rem;
    color: #111827;
    background: #ffffff; /* ⚠️ COR CONFIGURÁVEL - Alterar via CONFIG CSS */
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
}

.header-aquitemo-search input:focus {
    box-shadow: 0 0 0 4px rgba(201, 16, 21, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Bloco de informações e ações à direita */
.header-aquitemo-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.header-aquitemo-login {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
}

.header-aquitemo-login:hover {
    background: rgba(0,0,0,0.1);
}

.header-aquitemo-login i {
    font-size: 1.4rem;
}

.header-aquitemo-login span {
    display: block;
    line-height: 1.2;
    font-size: 0.8rem;
}

.header-aquitemo-login .login-primary {
    font-weight: 600;
}


/* Informações de contato no header */
.header-contact-info {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.header-contact-info span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #ffffff;
    white-space: nowrap;
}

.header-contact-info i {
    font-size: 0.9rem;
    opacity: 0.9;
}



.header-aquitemo-login .login-secondary {
    opacity: 0.9;
}

/* Botões de ícones (redes sociais) */
.header-aquitemo-icon-btn,
.header-aquitemo-cart {
    border: none;
    background: rgba(0,0,0,0.08);
    color: #ffffff;
    border-radius: 0.4rem;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    text-decoration: none;
}

.header-aquitemo-icon-btn i,
.header-aquitemo-cart i {
    font-size: 1.2rem;
}

.header-aquitemo-icon-btn:hover,
.header-aquitemo-cart:hover {
    background: rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

/* Badge do carrinho */
.header-aquitemo-cart .cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ffffff;
    color: #c91015; /* Vermelho como na imagem */
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 0 0.3rem;
    min-width: 16px;
    text-align: center;
    font-weight: 700;
}

/* Linha inferior – navegação */
.header-aquitemo-bottom {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    padding: 10px 0;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Botão "Compre por Departamento" - Dentro do header-aquitemo-categories */
.header-aquitemo-categories .header-aquitemo-menu-btn {
    border: none;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    transition: all 0.2s ease;
    width: auto;
}

.header-aquitemo-categories .header-aquitemo-categories .header-aquitemo-menu-btn:hover {
    background: rgba(0,0,0,0.1);
    border-radius: 0.4rem;
}

.header-aquitemo-categories .header-aquitemo-menu-btn i {
    font-size: 1.1rem;
}

.header-aquitemo-categories .header-aquitemo-menu-btn .chevron {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.header-aquitemo-categories .header-aquitemo-menu-btn.active .chevron {
    transform: rotate(180deg);
}

/* Navegação de links */
.header-aquitemo-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    box-sizing: border-box;
}

.header-aquitemo-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
}

.header-aquitemo-nav a:hover {
    background: rgba(0,0,0,0.1);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO MENU DE OFERTAS (NAV-PILL)                  ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO NORMAL:                                     ║
   ║     linear-gradient(135deg, #f8f9fa, #e9ecef) - Cinza claro  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO DESTAQUE (OFERTAS):                         ║
   ║     linear-gradient(135deg, #2ecc71, #27ae60) - Verde        ║
   ║                                                              ║
   ║  Esta é a cor de fundo dos botões do menu de categorias.    ║
   ║  Para alterar as cores, modifique os valores em:            ║
   ║  → background: linear-gradient(...) (linhas abaixo)        ║
   ║                                                              ║
   ║  CORES SUGERIDAS PARA NORMAL:                               ║
   ║  - Cinza claro atual: #f8f9fa, #e9ecef                       ║
   ║  - Branco: #ffffff, #f5f5f5                                 ║
   ║                                                              ║
   ║  CORES SUGERIDAS PARA DESTAQUE:                              ║
   ║  - Verde atual: #2ecc71, #27ae60                            ║
   ║  - Laranja: #ff8c00, #ff6b00                                 ║
   ║  - Azul: #2563eb, #1e40af                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* "OFERTAS AQUITEMOSTUDO" com pill branco */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DAS CATEGORIAS                                 ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO: linear-gradient(135deg, #f8f9fa, #e9ecef) ║
   ║                                                              ║
   ║  Esta é a cor de fundo dos botões de categorias no menu.    ║
   ║  Pode ser alterada através do painel administrativo:         ║
   ║  → Botão "CONFIG CSS" → Categorias                         ║
   ║                                                              ║
   ║  Para alterar manualmente, modifique o valor abaixo:         ║
   ║  → background: linear-gradient(135deg, #f8f9fa, #e9ecef);   ║
   ║    (linha ~4091)                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */
.header-aquitemo-nav .nav-pill {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* ⚠️ COR CONFIGURÁVEL - Alterar via CONFIG CSS */
    color: #495057;
    padding: 8px 14px;
    border: 2px solid #dee2e6;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.header-aquitemo-nav .nav-pill.destaque {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-color: #27ae60;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.header-aquitemo-nav .nav-pill:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.header-aquitemo-nav .nav-pill:hover i {
    transform: scale(1.2);
}

.header-aquitemo-nav .nav-pill i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.header-aquitemo-nav .nav-pill.destaque i {
    transform: scale(1.1);
}

.header-aquitemo-nav .nav-pill span {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 12px;
}

/* Ajuste do main-content para o novo header */
.main-content {
    margin-top: 110px !important; /* Ajuste para altura do novo header (2 linhas) */
    margin-left: 0 !important; /* Sem margem esquerda pois sidebar não é mais fixa */
    width: 100% !important;
}

/* Responsivo básico */

    
    .header-aquitemo-nav .nav-pill.destaque span {
        display: inline; /* Mostra texto quando está destacado */
    }
    
    .main-content {
        margin-top: 150px !important;
    }
}


/* ========== MELHORIAS MAIN-HEADER (mantido para compatibilidade) ========== */
.main-header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); /* Sombra mais elegante */
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CAMPO DE BUSCA MODERNO - PADRÃO PROFISSIONAL               ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  Design moderno com ícone de lupa dentro do campo            ║
   ║  Seguindo padrão de sites profissionais                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

.search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Campo de busca com ícone de lupa dentro */
.search-box input {
    width: 100%;
    border: 2px solid #e5e7eb;
    background: #ffffff !important;
    border-radius: 50px !important;       /* ← Arredondado moderno (padrão profissional) */
    padding: 12px 60px 12px 50px;         /* Padding: top/bottom 12px, right 60px (botão), left 50px (ícone) */
    font-size: 1rem;
    font-weight: 400;
    color: #1f2937;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  /* Sombra suave */
    height: 48px;                          /* Altura fixa para evitar formato oval */
    line-height: 1.5;
}

/* Placeholder mais suave */
.search-box input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Focus com borda laranja */
.search-box input:focus {
    border-color: #ff8c00;
    box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #ffffff !important;
}

/* Ícone de lupa posicionado dentro do campo (à esquerda) usando pseudo-elemento no form */
.search-box::before {
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 10;
}



/* ╔══════════════════════════════════════════════════════════════╗
   ║  BOTÃO "BUSCAR" - DESIGN MODERNO E DISCRETO                  ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  Botão discreto posicionado dentro do campo ou como         ║
   ║  botão flutuante à direita (padrão profissional)             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Botão de busca posicionado à direita dentro do campo */
.search-box button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: #ff8c00 !important;       /* Laranja combinando com top-bar */
    border: none;
    border-radius: 50px !important;       /* Arredondado */
    color: #ffffff;
    padding: 0;
    font-weight: 600;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(255, 140, 0, 0.3);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
}

/* Ícone dentro do botão */
.search-box button i,
.search-box button .fas,
.search-box button .fa-search {
    font-size: 1.1rem !important;
    color: #ffffff !important;
    margin: 0;
    padding: 0;
}

/* Esconder texto "Buscar" se houver */
.search-box button:not(:only-child) {
    font-size: 0;
}

.search-box button:hover {
    background: #ff9500 !important;       /* Laranja mais claro no hover */
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
}

.search-box button:active {
    transform: translateY(-50%) scale(0.98);
}

/* Responsividade para campo de busca */

/* ============================================================
   IDENTIFICAÇÃO COMO ASSOCIADO AMAZON - ESTILOS DO DISCLAIMER
   ============================================================
   
   ESTA SEÇÃO CONTÉM TODOS OS ESTILOS DO BLOCO "IDENTIFICAÇÃO COMO ASSOCIADO AMAZON"
   QUE APARECE NO FOOTER DO SITE.
   
   LOCALIZAÇÃO NO HTML (index.php):
   - Linha ~1688: <div class="footer-disclaimer">
   - Linha ~1692: <div class="disclaimer-content">
   
   O QUE ESTA SEÇÃO FAZ:
   - Estiliza o bloco branco com borda laranja que contém o aviso de transparência
   - Controla cores, tamanhos de fonte, espaçamentos e animações
   - Garante máxima legibilidade do texto (preto sobre branco)
   
   CLASSES PRINCIPAIS:
   - .footer-disclaimer = Container principal do bloco
   - .disclaimer-icon = Ícone circular laranja com "i"
   - .disclaimer-content = Área de conteúdo com o texto
   
   ============================================================ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  COR DE FUNDO DO AVISO "IDENTIFICAÇÃO COMO ASSOCIADO AMAZON"  ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ COR DE FUNDO: #ffffff (Branco)                           ║
   ║                                                              ║
   ║  Esta é a cor de fundo do bloco de aviso sobre               ║
   ║  "Identificação como Associado Amazon" no rodapé.            ║
   ║  Para alterar a cor, modifique o valor em:                   ║
   ║  → background: #ffffff !important; (linha abaixo)            ║
   ║                                                              ║
   ║  CORES SUGERIDAS:                                            ║
   ║  - Branco atual: #ffffff                                     ║
   ║  - Cinza muito claro: #f9fafb                               ║
   ║  - Amarelo suave: #fffbeb                                    ║
   ║  - Laranja suave: #fff7ed                                    ║
   ║                                                              ║
   ║  NOTA: A borda é laranja (#ff8c00) - veja border abaixo      ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* ===== CONTAINER PRINCIPAL DO DISCLAIMER =====
   AQUI VOCÊ PODE ALTERAR:
   - background: Cor de fundo do bloco (atualmente branco #ffffff)
   - border: Cor e espessura da borda (atualmente laranja #ff8c00)
   - padding: Espaçamento interno do bloco
   - max-width: Largura máxima do bloco
   - box-shadow: Sombra ao redor do bloco
   ============================================= */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  ABA LATERAL ESQUERDA - ASSOCIETE AMAZON                    ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  Aba vertical moderna na lateral esquerda que exibe         ║
   ║  informações sobre o programa Amazon Associates.            ║
   ║                                                              ║
   ║  Funcionalidades:                                           ║
   ║  - Botão fixo na lateral esquerda                          ║
   ║  - Modal deslizante da direita para esquerda               ║
   ║  - Overlay de fundo escuro                                  ║
   ║  - Animação suave de slide                                  ║
   ║                                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Overlay de fundo (aparece quando modal está aberto) */
.amazon-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
    pointer-events: none;
}

.amazon-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Container principal da aba (botão fixo) */
.amazon-associate-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Botão da aba (visível quando fechada) */
.amazon-tab-button {
    background: linear-gradient(135deg, #ff8c00 0%, #ff9900 50%, #ffa500 100%);
    color: #ffffff;
    border: none;
    padding: 20px 12px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 140, 0, 0.4);
    border-radius: 0 12px 12px 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 70px;
    position: relative;
    overflow: hidden;
    transform: translateX(0);
    z-index: 10001 !important;
    pointer-events: auto !important;
}

.amazon-tab-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.amazon-tab-button:hover::before {
    left: 100%;
}

.amazon-tab-button:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 25px rgba(255, 140, 0, 0.5);
}

.amazon-tab-button i {
    font-size: 2rem;
    margin-bottom: 4px;
    animation: pulse 2s ease-in-out infinite;
}

.amazon-tab-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.amazon-tab-subtext {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 4px;
}

/* Modal deslizante da direita (aparece quando aberto) */
.amazon-modal-content {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 420px;
    max-width: 90vw;
    background: #ffffff !important;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3);
    z-index: 10002 !important;
    display: flex !important;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    visibility: hidden;
    pointer-events: auto !important;
}

.amazon-modal-content.active {
    transform: translateX(0) !important;
    visibility: visible !important;
}

/* Header do conteúdo */
.amazon-tab-header {
    background: linear-gradient(135deg, #ff8c00 0%, #ff9900 50%, #ffa500 100%);
    color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    min-height: 70px;
}

.amazon-tab-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.amazon-tab-header h3 i {
    font-size: 1.5rem;
}

.amazon-tab-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.amazon-tab-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Corpo do conteúdo */
.amazon-tab-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Ícone do disclaimer */
.disclaimer-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #ff8c00, #ffa500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 16px;
}

/* Conteúdo do disclaimer */
.amazon-disclaimer-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.disclaimer-content {
    color: #333333;
    font-size: 0.95rem;
    line-height: 1.7;
}

.disclaimer-content strong {
    color: #ff8c00;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.disclaimer-content p {
    margin-bottom: 16px;
    color: #555555;
}

.disclaimer-content p:last-child {
    margin-bottom: 0;
}

/* Seção de contato */
.amazon-contact-section {
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.amazon-contact-section h4 {
    color: #ff8c00;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.amazon-contact-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.amazon-contact-section li {
    color: #555555;
    font-size: 0.95rem;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.amazon-contact-section li i {
    color: #ff8c00;
    font-size: 1rem;
}

/* Footer do modal */
.amazon-footer-bottom {
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    text-align: center;
}

.amazon-footer-bottom p {
    color: #888888;
    font-size: 0.85rem;
    margin: 0;
}

/* Estilos antigos removidos - agora usando .disclaimer-content */

/* Animação de pulso para o ícone */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Scrollbar personalizada para o conteúdo */
.amazon-tab-body::-webkit-scrollbar {
    width: 8px;
}

.amazon-tab-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.amazon-tab-body::-webkit-scrollbar-thumb {
    background: #ff8c00;
    border-radius: 4px;
}

.amazon-tab-body::-webkit-scrollbar-thumb:hover {
    background: #ff9900;
}

/* Responsividade */


/* Estilos antigos do footer-disclaimer (mantidos para compatibilidade, mas não usados) */
.footer-disclaimer {
    display: none; /* Ocultado - conteúdo movido para aba lateral */
}

/* ===== ANIMAÇÃO DE PULSO SUTIL =====
   Cria um efeito de "pulsação" na sombra do bloco
   para chamar atenção sem ser invasivo
   =================================== */
@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 0 6px 30px rgba(255, 140, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 6px 35px rgba(255, 140, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.15);
    }
}

/* ===== LINHA DECORATIVA NO TOPO DO BLOCO =====
   Cria uma linha animada laranja/dourada no topo do disclaimer
   AQUI VOCÊ PODE ALTERAR:
   - height: Altura da linha (atualmente 5px)
   - background: Cores do gradiente da linha
   ============================================= */
.footer-disclaimer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff8c00, #ffa500, #ffd700, #ffa500, #ff8c00);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

/* ===== ANIMAÇÃO DA LINHA DECORATIVA =====
   Cria efeito de "brilho" deslizante na linha do topo
   ========================================= */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ===== ÍCONE CIRCULAR LARANJA =====
   Ícone "i" (informação) no canto superior esquerdo do bloco
   AQUI VOCÊ PODE ALTERAR:
   - width/height: Tamanho do ícone (atualmente 52px)
   - background: Cor de fundo do ícone (atualmente laranja)
   - font-size: Tamanho do ícone "i" dentro do círculo
   - animation: Animação do ícone (atualmente "bounce")
   ================================== */
.disclaimer-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #ff8c00, #ffa500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.3);
    animation: iconBounce 2s ease-in-out infinite;
}

/* ===== ANIMAÇÃO DO ÍCONE =====
   Cria efeito de "pulo" suave no ícone
   ============================= */
@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* ===== ÁREA DE CONTEÚDO DO TEXTO =====
   ESTILOS DO TEXTO PRINCIPAL DO DISCLAIMER
   
   AQUI VOCÊ PODE ALTERAR A LEGIBILIDADE DO TEXTO:
   - font-size: Tamanho da fonte (atualmente 1.2rem = 19.2px)
   - color: Cor do texto (atualmente preto #000000 para máxima legibilidade)
   - font-weight: Peso da fonte (atualmente 700 = bold)
   - line-height: Espaçamento entre linhas (atualmente 1.9)
   - letter-spacing: Espaçamento entre letras
   
   IMPORTANTE: A cor está como #000000 (preto puro) para garantir
   máximo contraste com o fundo branco e atender requisitos de acessibilidade.
   ===================================== */
/* 🚀 NOVO CSS PARA MELHOR VISIBILIDADE DO DISCLAIMER */
.disclaimer-content {
    flex: 1;
    font-size: 1.25rem;
    line-height: 1.9;
    color: #1a1a1a !important;      /* Preto mais suave, porém extremamente visível */
    font-weight: 800 !important;    /* Peso forte */
    text-shadow: 0 1px 3px rgba(0,0,0,0.25); /* Sombra leve para contraste */
    letter-spacing: 0.015em;
    opacity: 1 !important;          /* Força o texto a aparecer */
}

/* 🔒 Garantir que o container também NÃO reduza a visibilidade */
.footer-disclaimer,
.disclaimer-wrapper,
.disclaimer-box {
    opacity: 1 !important;
    filter: none !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  CONTEÚDO DO DISCLAIMER - COR E FONTE DO TEXTO              ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ ATENÇÃO: PARA ALTERAR A COR E FONTE DO CONTEÚDO:        ║
   ║                                                              ║
   ║  Este é o texto que aparece APÓS os títulos, como:          ║
   ║  "Ao clicar em um link de produto Amazon e realizar..."     ║
   ║                                                              ║
   ║  → Linha ~3426: color: #000000 !important;  (COR)          ║
   ║  → Linha ~3427: font-weight: 700 !important;  (PESO)      ║
   ║  → Linha ~3428: font-size: 1.15rem !important;  (TAMANHO)   ║
   ║                                                              ║
   ║  EXEMPLO DE TEXTO AFETADO:                                  ║
   ║  "Ao clicar em um link de produto Amazon e realizar uma    ║
   ║   compra, este site pode receber uma pequena comissão..."   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   ║ ESTILOS DOS PARÁGRAFOS/CONTEÚDO DENTRO DO DISCLAIMER
   ║ ═══════════════════════════════════════════════════════════
   ║ 
   ║ Esta seção controla o texto que aparece após os títulos:
   ║ - "Como Associado da Amazon, recebemos comissão..."
   ║ - "Este site apresenta conteúdo original..."
   ║ - "Ao clicar em um link de produto Amazon..."
   ║ 
   ║ NOTA: O uso de !important garante que estes estilos não sejam
   ║ sobrescritos por outros estilos do site.
   ═══════════════════════════════════════════════════════════════ */
.disclaimer-content p {
    margin-bottom: 0.75rem;
    
    /* ═══════════════════════════════════════════════════════════
       ║ COR DO TEXTO DO CONTEÚDO
       ║ ═══════════════════════════════════════════════════════
       ║ ALTERE O VALOR #000000 ABAIXO PARA MUDAR A COR DO TEXTO
       ║ 
       ║ Exemplos de cores:
       ║ - Preto: #000000 (atual - máxima legibilidade)
       ║ - Cinza escuro: #1f2937
       ║ - Azul escuro: #1e3a8a
       ║ - Verde escuro: #166534
       ║ - Marrom: #78350f
       ║ 
       ║ IMPORTANTE: Use cores escuras para garantir legibilidade
       ║ sobre o fundo branco do disclaimer.
       ║ ═══════════════════════════════════════════════════════ */
    color: #000000 !important;  /* ← ALTERE ESTE VALOR PARA MUDAR A COR DO TEXTO */
    
    /* ═══════════════════════════════════════════════════════════
       ║ PESO DA FONTE (GROSSURA) DO CONTEÚDO
       ║ ═══════════════════════════════════════════════════════
       ║ ALTERE O VALOR 700 ABAIXO PARA MUDAR O PESO DA FONTE
       ║ 
       ║ Pesos disponíveis:
       ║ - 400 = normal (fino)
       ║ - 500 = medium
       ║ - 600 = semi-bold
       ║ - 700 = bold (atual)
       ║ - 800 = extra bold
       ║ - 900 = black (muito grosso)
       ║ ═══════════════════════════════════════════════════════ */
    font-weight: 700 !important;  /* ← ALTERE ESTE VALOR PARA MUDAR O PESO DA FONTE */
    
    /* ═══════════════════════════════════════════════════════════
       ║ TAMANHO DA FONTE DO CONTEÚDO
       ║ ═══════════════════════════════════════════════════════
       ║ ALTERE O VALOR 1.15rem ABAIXO PARA MUDAR O TAMANHO
       ║ 
       ║ Tamanhos sugeridos:
       ║ - Pequeno: 1rem (16px)
       ║ - Médio: 1.1rem (17.6px)
       ║ - Grande: 1.15rem (18.4px) ← atual
       ║ - Extra Grande: 1.2rem (19.2px)
       ║ - Muito Grande: 1.25rem (20px)
       ║ 
       ║ NOTA: Valores em "rem" são relativos ao tamanho base
       ║ da fonte do navegador (geralmente 16px).
       ║ ═══════════════════════════════════════════════════════ */
    font-size: 1.15rem !important;  /* ← ALTERE ESTE VALOR PARA MUDAR O TAMANHO DA FONTE */
    
    text-shadow: none;
    opacity: 1 !important;
}

.disclaimer-content p:last-child {
    margin-bottom: 0;
}

/* ===== FORÇA TEXTO PRETO EM TODOS OS ELEMENTOS =====
   Esta regra garante que TODOS os elementos dentro do disclaimer
   tenham texto preto, mesmo que outros estilos tentem alterar.
   
   IMPORTANTE: Esta regra é necessária para garantir máxima legibilidade
   e contraste, especialmente se houver herança de estilos do footer.
   =================================================== */
.disclaimer-content,
.disclaimer-content *,
.disclaimer-content p,
.disclaimer-content span,
.disclaimer-content div {
    color: #000000 !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  TÍTULOS DO DISCLAIMER - COR E FONTE                         ║
   ║  ===========================================================  ║
   ║                                                              ║
   ║  ⚠️ ATENÇÃO: PARA ALTERAR A COR DOS TÍTULOS, PROCURE:       ║
   ║                                                              ║
   ║  → Linha ~3522: color: #dc2626 !important;                  ║
   ║  → Linha ~3527: color: #dc2626;                             ║
   ║                                                              ║
   ║  ESTA SEÇÃO CONTROLA A COR E FONTE DOS TÍTULOS:             ║
   ║  - "IDENTIFICAÇÃO COMO ASSOCIADO AMAZON:"                   ║
   ║  - "CONTEÚDO ORIGINAL"                                       ║
   ║  - "TRANSPARÊNCIA:"                                          ║
   ╚══════════════════════════════════════════════════════════════╝
   
   ============================================================
   
   ============================================================
   ONDE ALTERAR A COR DOS TÍTULOS:
   ============================================================
   
   LINHA ~3466: .disclaimer-content p strong
   → color: #dc2626 !important;  ← ALTERE AQUI a cor dos títulos
   
   LINHA ~3471: .disclaimer-content strong
   → color: #dc2626;  ← ALTERE AQUI a cor dos títulos (fallback)
   
   CORES SUGERIDAS:
   - Vermelho: #dc2626 (atual)
   - Azul: #2563eb
   - Verde: #16a34a
   - Laranja: #ea580c
   - Roxo: #9333ea
   - Preto: #000000
   
   ============================================================
   ONDE ALTERAR O TAMANHO DA FONTE DOS TÍTULOS:
   ============================================================
   
   LINHA ~3473: .disclaimer-content strong
   → font-size: 1.25rem;  ← ALTERE AQUI o tamanho da fonte
   
   TAMANHOS SUGERIDOS:
   - Pequeno: 1rem (16px)
   - Médio: 1.25rem (20px) ← atual
   - Grande: 1.5rem (24px)
   - Extra Grande: 1.75rem (28px)
   
   ============================================================
   ONDE ALTERAR O PESO DA FONTE (GROSSURA):
   ============================================================
   
   LINHA ~3467: .disclaimer-content p strong
   → font-weight: 800 !important;  ← ALTERE AQUI o peso
   
   LINHA ~3472: .disclaimer-content strong
   → font-weight: 800;  ← ALTERE AQUI o peso (fallback)
   
   PESOS DISPONÍVEIS:
   - 400 = normal
   - 500 = medium
   - 600 = semi-bold
   - 700 = bold
   - 800 = extra bold ← atual
   - 900 = black
   
   ============================================================
   OUTRAS PROPRIEDADES DOS TÍTULOS:
   ============================================================
   
   LINHA ~3477: text-transform: uppercase;
   → Remove "uppercase" se não quiser texto em MAIÚSCULAS
   
   LINHA ~3478: letter-spacing: 0.8px;
   → Espaçamento entre letras (aumente para mais espaço)
   
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════
   ║ COR DOS TÍTULOS DO DISCLAIMER - LOCALIZAÇÃO EXATA
   ═══════════════════════════════════════════════════════════════
   
   ║ PARA ALTERAR A COR DOS TÍTULOS:
   ║ "IDENTIFICAÇÃO COMO ASSOCIADO AMAZON:"
   ║ "CONTEÚDO ORIGINAL"
   ║ "TRANSPARÊNCIA:"
   ║
   ║ PROCURE AS LINHAS ABAIXO QUE CONTÊM: color: #dc2626
   ║
   ║ EXISTEM 2 LOCAIS ONDE A COR ESTÁ DEFINIDA:
   ║ 1. Linha abaixo (.disclaimer-content p strong) - PRIORIDADE ALTA
   ║ 2. Linha abaixo (.disclaimer-content strong) - FALLBACK
   ║
   ║ IMPORTANTE: Altere AMBAS as linhas para garantir consistência
   ═══════════════════════════════════════════════════════════════ */

.disclaimer-content p strong {
    /* ═══════════════════════════════════════════════════════════
       ║ COR DOS TÍTULOS - LOCAL 1 (PRIORIDADE ALTA)
       ║ ═══════════════════════════════════════════════════════
       ║ ALTERE O VALOR #dc2626 ABAIXO PARA MUDAR A COR
       ║ 
       ║ Exemplos de cores:
       ║ - Vermelho: #dc2626 (atual)
       ║ - Azul: #2563eb
       ║ - Verde: #16a34a
       ║ - Laranja: #ea580c
       ║ - Roxo: #9333ea
       ║ - Preto: #000000
       ║ ═══════════════════════════════════════════════════════ */
    color: #dc2626 !important;  /* ← ALTERE ESTE VALOR PARA MUDAR A COR */
    font-weight: 800 !important;
}

.disclaimer-content strong {
    /* ═══════════════════════════════════════════════════════════
       ║ COR DOS TÍTULOS - LOCAL 2 (FALLBACK)
       ║ ═══════════════════════════════════════════════════════
       ║ ALTERE O VALOR #dc2626 ABAIXO PARA MUDAR A COR
       ║ 
       ║ Esta é a cor de fallback caso a primeira regra não funcione.
       ║ IMPORTANTE: Altere esta também para manter consistência.
       ║ ═══════════════════════════════════════════════════════ */
    color: #dc2626;  /* ← ALTERE ESTE VALOR PARA MUDAR A COR */
    font-weight: 800;
    font-size: 1.25rem;
    display: block;
    margin-bottom: 12px;
    margin-top: 16px;
    text-transform: uppercase;  /* ← Remove se não quiser MAIÚSCULAS */
    letter-spacing: 0.8px;  /* ← Espaçamento entre letras */
    text-shadow: none;
    line-height: 1.4;
}

.disclaimer-content strong:first-child {
    margin-top: 0;
}

/* ===== LINHA DECORATIVA ABAIXO DOS TÍTULOS =====
   Cria uma linha vermelha decorativa abaixo de cada título
   AQUI VOCÊ PODE ALTERAR:
   - width: Largura da linha (atualmente 100px)
   - height: Altura da linha (atualmente 4px)
   - background: Cores do gradiente da linha
   =============================================== */
.disclaimer-content strong::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #dc2626, #ef4444, transparent);
    margin-top: 8px;
    border-radius: 2px;
}

/* ============================================================
   RESPONSIVIDADE - ESTILOS PARA DISPOSITIVOS MÓVEIS
   ============================================================
   
   AQUI VOCÊ PODE ALTERAR OS ESTILOS PARA CELULARES E TABLETS:
   - Ajusta tamanhos de fonte para telas menores
   - Reorganiza layout (ícone acima do texto)
   - Reduz espaçamentos para melhor aproveitamento do espaço
   
   BREAKPOINT: Ativa quando a largura da tela é menor que 768px
   ============================================================ */

/* ========== FOOTER BOTTOM MELHORADO ========== */
.footer-bottom {
    text-align: center;
    padding: 24px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 32px;
}

.footer-bottom p {
    color: #ffffff;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.footer-bottom p:first-child {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
}

/* ========== INFORMAÇÕES DE ENTREGA NO FOOTER ========== */
.delivery-info {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.delivery-info p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.delivery-info p:last-child {
    margin-bottom: 0;
}

.delivery-info strong {
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.delivery-info i {
    font-size: 1.1em;
}

.delivery-info strong i.fa-amazon {
    color: #ff9900;
}

/* ========== BADGES PARA DISTINGUIR PRODUTOS ========== */
/* Badge para produtos da loja própria */
.badge-loja-propria {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    margin-left: 0.5rem;
}

/* Badge para links Amazon */
.badge-amazon-link {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #ff9900, #ff8c00);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3);
    margin-left: 0.5rem;
}

.badge-amazon-link::before {
    content: '🔗 ';
    margin-right: 0.25rem;
}

/* ========== MELHORIAS DE ACESSIBILIDADE ========== */
/* Skip to main content link (para leitores de tela) */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: #2563eb;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
}

.skip-to-main:focus {
    top: 0;
}

/* Melhorias para leitores de tela */
[aria-hidden="true"] {
    pointer-events: none;
}

/* ========== OTIMIZAÇÕES DE PERFORMANCE ========== */
/* Lazy loading para imagens */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ========== MELHORIAS RESPONSIVAS ADICIONAIS ========== */

/* Melhorias de impressão */