/* ==========================================================================
   Vizu Comunicação — Camada de marca e melhorias
   Cores: Roxo (principal) · Magenta · Amarelo · Creme · Preto
   ========================================================================== */

:root {
    /* Paleta Vizu */
    --vizu-purple:      #9B2FE0;
    --vizu-purple-dark: #6B21D6;
    --vizu-magenta:     #E91E9C;
    --vizu-pink:        #FF4FD8;
    --vizu-yellow:      #FFD60A;
    --vizu-cream:       #F3F0E7;
    --vizu-ink:         #121212;
    --vizu-purple-rgb:  155, 47, 224;

    /* Sobrepõe o acento do tema base pela cor da Vizu */
    --color-primary:         #9B2FE0;
    --color-primary-rgba:    rgb(155, 47, 224);
    --color-primary-rgba-2:  rgba(155, 47, 224, 0.15);
    --color-primary-alt:     #8B2FD6;
    --color-primary-light:   #B45BEC;
    --color-primary-lightest:#C77FF2;
    --color-secondary:       #E91E9C;
    --color-tertiary:        #6B21D6;
    --color-tertiary-alt:    #6B21D6;
    --color-pink:            #E91E9C;

    --vizu-shadow: 0 10px 30px rgba(18, 18, 18, 0.18);
    --vizu-radius: 16px;
}

/* Gradiente de marca reutilizável em botões principais do tema */
.rn-btn:hover,
.rainbow-gradient-btn,
.btn-default.btn-border:hover,
.rn-button-style--2.btn-solid {
    background-image: linear-gradient(95deg, var(--vizu-purple) 0%, var(--vizu-magenta) 100%) !important;
    border-color: transparent !important;
}

/* ==========================================================================
   POPUP DE BOAS-VINDAS — escolha de tema
   ========================================================================== */

.vizu-theme-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.vizu-theme-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.vizu-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.vizu-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--vizu-cream);
    color: var(--vizu-ink);
    border-radius: 22px;
    padding: 38px 34px 30px;
    text-align: center;
    box-shadow: var(--vizu-shadow);
    transform: translateY(18px) scale(.96);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    border: 2px solid var(--vizu-ink);
    overflow: hidden;
}
.vizu-theme-modal.is-open .vizu-modal__dialog {
    transform: translateY(0) scale(1);
}

/* enfeites tipo "memphis" no canto */
.vizu-modal__dialog::before,
.vizu-modal__dialog::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.vizu-modal__dialog::before {
    width: 120px; height: 120px;
    background: radial-gradient(circle at 30% 30%, var(--vizu-pink), var(--vizu-purple));
    top: -55px; right: -40px;
    opacity: .25;
}
.vizu-modal__dialog::after {
    width: 90px; height: 90px;
    background: var(--vizu-yellow);
    bottom: -45px; left: -35px;
    opacity: .35;
}
.vizu-modal__dialog > * { position: relative; z-index: 1; }

.vizu-modal__brand { margin-bottom: 14px; }
.vizu-logo-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--vizu-ink);
}
.vizu-logo-star {
    color: var(--vizu-yellow);
    -webkit-text-stroke: 1px var(--vizu-ink);
    font-size: 22px;
    vertical-align: super;
    margin-left: 2px;
}

.vizu-modal__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--vizu-ink);
    line-height: 1.2;
}
.vizu-modal__subtitle {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 auto 24px;
    max-width: 340px;
    color: #4a4a4a;
}

.vizu-modal__options {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 22px;
}

.vizu-choice {
    flex: 1 1 0;
    max-width: 160px;
    background: #fff;
    border: 2px solid #d9d4c6;
    border-radius: var(--vizu-radius);
    padding: 16px 12px 14px;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    font-family: inherit;
}
.vizu-choice:hover { transform: translateY(-3px); }
.vizu-choice.is-selected {
    border-color: var(--vizu-purple);
    box-shadow: 0 0 0 4px rgba(var(--vizu-purple-rgb), .18);
}

.vizu-choice__preview {
    display: block;
    height: 70px;
    border-radius: 10px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
}
.vizu-choice__preview--light { background: #f7f6f1; }
.vizu-choice__preview--dark  { background: #14141a; }
.vizu-choice__bar {
    position: absolute; top: 12px; left: 12px; right: 12px; height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--vizu-purple), var(--vizu-magenta));
}
.vizu-choice__dot {
    position: absolute; bottom: 12px; left: 12px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--vizu-yellow);
}
.vizu-choice__preview--dark .vizu-choice__dot { background: var(--vizu-pink); }

.vizu-choice__label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--vizu-ink);
}

.vizu-modal__confirm {
    display: inline-block;
    width: 100%;
    background: linear-gradient(95deg, var(--vizu-purple) 0%, var(--vizu-magenta) 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
    font-family: inherit;
}
.vizu-modal__confirm:hover { transform: translateY(-2px); filter: brightness(1.05); }

.vizu-modal__hint {
    font-size: 12.5px;
    color: #7a7a7a;
    margin: 14px 0 0;
}

/* ==========================================================================
   BOTÕES FLUTUANTES (tema + WhatsApp)
   ========================================================================== */

.vizu-fab-stack {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vizu-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 6px 18px rgba(18,18,18,.28);
    transition: transform .2s ease, filter .2s ease;
    text-decoration: none;
}
.vizu-fab:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.05); }

.vizu-fab--whatsapp { background: #25D366; }
.vizu-fab--theme {
    background: linear-gradient(135deg, var(--vizu-purple), var(--vizu-magenta));
    position: relative;
}

/* alterna ícones sol/lua consoante o modo */
.vizu-fab--theme .vizu-icon-sun,
.vizu-fab--theme .vizu-icon-moon { transition: opacity .2s ease; }
.vizu-fab--theme .vizu-icon-moon { display: none; }
.active-dark-mode .vizu-fab--theme .vizu-icon-sun  { display: none; }
.active-dark-mode .vizu-fab--theme .vizu-icon-moon { display: block; }

/* Pulso suave no botão de WhatsApp */
@keyframes vizu-pulse {
    0%   { box-shadow: 0 6px 18px rgba(18,18,18,.28), 0 0 0 0 rgba(37,211,102,.55); }
    70%  { box-shadow: 0 6px 18px rgba(18,18,18,.28), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 6px 18px rgba(18,18,18,.28), 0 0 0 0 rgba(37,211,102,0); }
}
.vizu-fab--whatsapp { animation: vizu-pulse 2.6s infinite; }

/* ==========================================================================
   DARK MODE — ajustes do popup
   ========================================================================== */

.active-dark-mode .vizu-modal__dialog {
    background: #1a1a22;
    border-color: #2e2e38;
    color: #f2f0ea;
}
.active-dark-mode .vizu-logo-text,
.active-dark-mode .vizu-modal__title,
.active-dark-mode .vizu-choice__label { color: #f2f0ea; }
.active-dark-mode .vizu-modal__subtitle { color: #b9b9c2; }
.active-dark-mode .vizu-choice {
    background: #23232d;
    border-color: #34343f;
}
.active-dark-mode .vizu-modal__hint { color: #9a9aa4; }
.active-dark-mode .vizu-logo-star { -webkit-text-stroke: 1px #f2f0ea; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 520px) {
    .vizu-modal__dialog { padding: 30px 22px 24px; }
    .vizu-logo-text { font-size: 34px; }
    .vizu-modal__title { font-size: 21px; }
    .vizu-modal__options { gap: 10px; }
    .vizu-fab { width: 50px; height: 50px; }
}

/* Acessibilidade: respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
    .vizu-fab--whatsapp { animation: none; }
    .vizu-theme-modal, .vizu-modal__dialog, .vizu-fab, .vizu-choice { transition: none; }
}