/* =========================
   VARIABLES DE TEMA
   ========================= */

:root {
    /* Colores base */
    --color-bg: #0b0f1a;
    --color-text: #ffffff;

    /* Tipografía */
    --title-color: #ffffff;

    /* Botones generales */
    --button-bg: rgba(255, 255, 255, 0.06);
    --button-bg-hover: rgba(255, 255, 255, 0.10);
    --button-border: rgba(255, 255, 255, 0.14);

    /* Botón destacado (Instalar APP) */
    --accent-color: #78ffd2;
    --accent-bg: rgba(120, 255, 210, 0.10);
    --accent-border: rgba(120, 255, 210, 0.28);

    /* Footer */
    --footer-opacity: 0.75;
}


/* =========================
   BASE VISUAL
   ========================= */

body {
    background: var(--color-bg);
    color: var(--color-text);
}


/* =========================
   CABECERA / MARCA
   ========================= */

.business-name {
    color: var(--title-color);
}


/* =========================
   BOTONES
   ========================= */

.menu-button {
    background: var(--button-bg);
    color: var(--color-text);
    border: 1px solid var(--button-border);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.15s ease;
}

.menu-button:hover {
    background: var(--button-bg-hover);
}

.menu-button:active {
    transform: scale(0.98);
}


/* =========================
   BOTÓN INSTALAR (DESTACADO)
   ========================= */

.install-button {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--color-text);
}


/* =========================
   FOOTER / MARCA CONVOY
   ========================= */

.footer-brand {
    opacity: var(--footer-opacity);
}