/* Base styles for the main template */

/* Logo en navbar */
.navbar-brand { 
    gap: .08rem; 
    align-items: center; 
}

.navbar-brand .brand-logo {
    height: 40px;
    width: auto;
    display: block;
    line-height: 1;
    object-fit: contain;
    object-position: left center;
}

.navbar-brand .brand-name-svg {
    height: 15px;
    width: auto;
    display: block;
    line-height: 1;
    object-fit: contain;
    object-position: left center;
    margin-top: -1px;
    background-color: #332f2c;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Logo con gradiente animado mediante máscara en header */
.navbar-brand .brand-logo-green-masked {
    display: inline-block;
    height: 36px;
    width: auto;
    aspect-ratio: 1 / 1;
    background: linear-gradient(45deg, #0700b8 0%, #00ff88 50%, #0700b8 100%);
    background-size: 200% 200%;
    animation: gradientMoveDiagonal 15s ease-in-out infinite;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    line-height: 1;
}

/* Ajuste en pantallas pequeñas */
@media (max-width: 576px) {
    .navbar-brand .brand-logo { height: 34px; }
    .navbar-brand .brand-name-svg { height: 14px; }
    .navbar-brand .brand-logo-green-masked { height: 30px; width: auto; aspect-ratio: 1 / 1; }
}

/* Tablets y arriba */
@media (min-width: 768px) {
    .navbar-brand .brand-logo { height: 44px; }
    .navbar-brand .brand-name-svg { height: 18px; }
    .navbar-brand .brand-logo-green-masked { height: 40px; width: auto; aspect-ratio: 1 / 1; }
}

/* Desktop grande */
@media (min-width: 1200px) {
    .navbar-brand .brand-logo { height: 48px; }
    .navbar-brand .brand-name-svg { height: 20px; }
    .navbar-brand .brand-logo-green-masked { height: 44px; width: auto; aspect-ratio: 1 / 1; }
}

/* Footer brand */
.footer-brand { 
    gap: .08rem; 
}

.footer-brand-logo {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
    line-height: 1;
}

.footer-brand-name-white {
    height: 24px;
    width: clamp(150px, 30vw, 280px);
    display: block;
    line-height: 1;
    background-color: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    margin-top: -1px;
}

.footer-brand-logo-green {
    height: 36px;
    width: auto;
    aspect-ratio: 1 / 1;
    display: inline-block;
    line-height: 1;
    background-color: var(--primary-green);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 576px) {
    .footer-brand-logo { height: 32px; }
    .footer-brand-name-white { height: 20px; width: clamp(130px, 38vw, 240px); }
    .footer-brand-logo-green { height: 30px; width: auto; aspect-ratio: 1 / 1; }
}

@media (min-width: 1200px) {
    .footer-brand-logo { height: 40px; }
    .footer-brand-name-white { height: 28px; width: clamp(170px, 24vw, 320px); }
    .footer-brand-logo-green { height: 42px; width: auto; aspect-ratio: 1 / 1; }
}

/* Animación para el gradiente diagonal del logo */
@keyframes gradientMoveDiagonal {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}