/* Efecto de "flote" suave para el logo del Carwash (Adaptado para imagen PNG) */
.brand-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 260px;
    /* Le damos buen ancho para que se lea K&A */
    margin: 0 auto 16px auto;
    /* Centrado automático */
    animation: float 3s ease-in-out infinite;
}

/* La clase para tu imagen PNG */
.brand-logo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Drop-shadow aplica sombra a la silueta de tu logo (las letras y el auto), no a un cuadro */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
}

/* Animación simplificada: Solo mueve arriba y abajo (la sombra ya está en la imagen) */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Campos de entrada con íconos integrados (Esto queda igual, ¡está perfecto!) */
.input-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.input-wrapper i.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
    transition: color 0.3s;
}

.input-wrapper input {
    padding-left: 40px;
    /* Espacio para el ícono */
}

.input-wrapper input:focus+i.input-icon,
.input-wrapper input:not(:placeholder-shown)+i.input-icon {
    color: var(--accent);
    /* El ícono se enciende cuando escribes o haces foco */
}