/* AeonikF  ono Light */
@font-face {
    font-family: 'AeonikFono';
    src: url('./assets/fonts/AeonikFono-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* AeonikFono Regular */
@font-face {
    font-family: 'AeonikFono';
    src: url('./assets/fonts/AeonikFono-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* NyghtSerif Medium Italic */
@font-face {
    font-family: 'NyghtSerif';
    src: url('./assets/fonts/NyghtSerif-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

.gradient-background {
    background: linear-gradient(92deg,#dce9f1,#c0aaf1,#ffb9ff);
    background-size: 180% 180%;
    animation: gradient-animation 24s ease infinite;
}

.gradient-background:before {
    content: "";
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 182px;
    opacity: 0.12;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.text-home {
    font-family: 'NyghtSerif', serif;
    color: #2c0852;
    font-size: 96px;
}

.text-italic {
    font-family: 'NyghtSerif', serif;
    font-style: italic;
}

.text-subtitle, .text-subtitle a {
    font-family: 'AeonikFono', sans-serif;
    color: #8118f7;
    font-size: 42px;
}

.footer-inline {
    display: flex;
    align-items: flex-start; /* Alinea verticalmente */
    gap: 10px; /* Espacio entre imagen y texto */
}

.footer-inline img {
    max-height: 40px; /* Ajusta según tu diseño */
    width: auto;
    margin-top: 5px;
}


@media (max-width: 575.98px) {
    .text-home {
        font-size: 36px;
        padding: 0px 5%;
    }


    .text-subtitle, .text-subtitle a {
        font-size: 21px;
        padding: 0px 5%;
    }

    .footer-inline img {
        max-height: 30px; /* Ajusta según tu diseño */
        width: auto;
    }
    
    .footer-inline h3 {
        font-size: 16px;
    }
}