/* Custom CSS - Algo Mais Comunicação Visual */

:root {
    --brand-blue: #26247b;
    --brand-red: #ee1d25;
    --brand-cyan: #008fcb;
    --brand-dark: #12113B;
    --brand-light: #f8fafc;
}

html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Suporte à proporção 9:16 para o vídeo vertical */
.aspect-9-16 {
    aspect-ratio: 9 / 16;
}

/* Barra de Progresso no Topo */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(to right, var(--brand-red), var(--brand-cyan));
    width: 0%;
    z-index: 1000;
    transition: width 0.1s ease-out;
}

/* Hero Background */
.hero-bg {
    background: linear-gradient(rgba(38, 36, 123, 0.88), rgba(18, 17, 59, 0.92)), url('../img/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Logos */
.header-logo {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    .header-logo {
        height: 76px;
    }
}

.footer-logo {
    height: 80px;
    width: auto;
    object-fit: contain;
}

/* Logos dos Clientes */
.client-logo {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    max-height: 55px;
    width: auto;
    object-fit: contain;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

/* Cards do Portfólio */
.portfolio-card {
    aspect-ratio: 1 / 1;
}

/* Lightbox */
#lightbox {
    transition: opacity 0.3s ease-in-out;
}

/* Animação Flutuante para Mascote */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.mascote-float {
    animation: float 4s ease-in-out infinite;
}

/* Pulsar do Botão Flutuante do WhatsApp */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.whatsapp-float {
    animation: pulse-green 2s infinite;
}