/* ===========================
   THEME GLOBAL - PROMOTREM
   =========================== */

:root {
    /* 🎨 Cores de fundo / gradiente */
    --bg-start: #1e3a8a;
    /* Azul escuro principal */
    --bg-end: #0f172a;
    /* Azul marinho profundo */

    /* ✨ Destaques */
    --accent: #facc15;
    /* Dourado */
    --accent-dark: #d4af37;
    /* Dourado fechado (opcional para contraste) */

    /* 📱 WhatsApp */
    --whatsapp-light: #25D366;
    --whatsapp-dark: #128C7E;

    /* 📡 Telegram */
    --telegram-light: #1d9bf0;
    --telegram-dark: #0a66c2;

    /* 🎨 Neutros */
    --muted: #94a3b8;
    --card-bg: rgba(255, 255, 255, 0.1);
    --text-light: #f1f5f9;
    --text-dark: #111;

    /* 🔤 Tipografia */
    --font-main: "Plus Jakarta Sans", sans-serif;

    /* 💫 Efeitos */
    --blur-bg: blur(16px) saturate(120%);
    --shadow-strong: 0 8px 40px rgba(0, 0, 0, .6);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, .3);
}

/* ===========================
   BASE GERAL
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100vh;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main), sans-serif;
    color: var(--text-light);
    background: linear-gradient(270deg, var(--bg-start), var(--bg-end), var(--bg-start));
    background-size: 600% 600%;
    /*animation: bgGradient 15s ease infinite;*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes bgGradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

h1 {
    font-size: 24px;
    text-align: center;
}

h2 {
    font-size: 16px;
    text-align: center;
    font-weight: 400;
}

h1+h2 {
    margin: 10px auto 0;
}

.card {
    background: var(--card-bg);
    backdrop-filter: var(--blur-bg);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-strong);
    transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 50px rgba(0, 0, 0, .7);
}

/* ===========================
   BOTÕES
   =========================== */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    padding: 14px;
    margin: 16px auto 0;

    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 14px;

    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
}

.btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-soft);
}

/* Variações */
.btn-whatsapp {
    background: linear-gradient(135deg, var(--whatsapp-light), var(--whatsapp-dark));
    color: #fff;
}

.btn-telegram {
    background: linear-gradient(135deg, var(--telegram-light), var(--telegram-dark));
    color: #fff;
}

.btn-morto {
    background: rgba(100, 116, 139, .7);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-morto img {
    filter: brightness(.6);
}

/* Faixa de alerta no botão morto */
.btn-morto::after {
    content: "GRUPO LOTADO";
    position: absolute;
    top: -10px;
    right: -15px;
    background: var(--accent);
    color: var(--text-dark);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    transform: rotate(12deg);
    box-shadow: var(--shadow-soft);
}

#promocoes-de-hoje {
    margin: 20px auto;
}