/* Google Fonts */
/* 
Para usar Google Fonts siempre incluir estos preconnect primero:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Se pueden unir varias fuentes así: 
family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Pinyon+Script&family=Roboto:wght@300;400;500;700&display=swap
*/

/* <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet"> */
.pinyon-script {
    font-family: 'Pinyon Script', serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet"> */
.cormorant-garamond {
    font-family: 'Cormorant Garamond', serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet"> */
.oswald {
    font-family: 'Oswald', sans-serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> */
.roboto {
    font-family: 'Roboto', sans-serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap" rel="stylesheet"> */
.roboto-slab {
    font-family: 'Roboto Slab', serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> */
.lato {
    font-family: 'Lato', sans-serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet"> */
.cinzel {
    font-family: 'Cinzel', serif;
}

/* <link href="https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap" rel="stylesheet"> */
.luxurious-script-regular {
    font-family: "Luxurious Script", cursive;
}

/* Fuente local Amoresa */
/* Para agregarla usar
@font-face {
    font-family: 'Amoresa';
    src: url('/assets/font/Andrey-Sharonov-playfair-display-Regular.woff2') format('woff2'),
            url('/assets/font/Andrey-Sharonov-playfair-display-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */
.amoresa {
    font-family: 'Amoresa', cursive;
}

/* Fuente local Slight */
/* Para agregarla usar */
/* @font-face {
    font-family: 'Slight';
    src: url('/assets/font/slight.woff2') format('woff2'),
        url('/assets/font/slight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */
.slight {
    font-family: 'Slight', cursive;
}

/* Fuente local Tangerine */
/* Para agregarla usar */
/* @font-face {
    font-family: 'Tangerine';
    src: url('/assets/font/Tangerine_Regular.woff2') format('woff2'),
    url('/assets/font/Tangerine_Regular.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */
.tangerine {
    font-family: 'Tangerine', cursive;
}

/* Fuente local EyesomeDuo */
/* Para agregarla usar */
/* @font-face {
    font-family: 'EyesomeDuo';
    src: url('/assets/font/eyesome-duo-script.woff2') format('woff2'),
    url('/assets/font/eyesome-duo-script.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */
.EyesomeDuo {
    font-family: 'EyesomeDuo', cursive;
}

/* Fuente playfair display */
/* <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet"> */
.playfair-display {
    font-family: 'Playfair Display', serif;
}

/* Fuente Great Vibes */
/* <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet"> */
.great-vibes {
    font-family: 'Great Vibes', serif;
}

/* Fin Google Fonts */

/* Animación de imágenes de fondo en el header*/
.bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1s ease-in-out, transform 6s ease-out;
    z-index: 0;
}

.bg-slide.active {
    opacity: 1;
    transform: scale(1.1);
}

/* Fin de la animación de imágenes de fondo en el header*/

/* Barra de scroll personalizada */
/* Para navegadores webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 70%, transparent) 100%);
    border-radius: 10px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
}

/* Para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.4);
}
/* Fin barra de scroll personalizada */

/* Animación del mouse */
.mouse {
    animation: mouse alternate 0.8s infinite;
}

.mouse:after {
    animation: mouse-bola alternate 0.8s infinite;
}

@keyframes mouse-bola {
    0% {height: 0px;}
    100% {height: 10px;}
}

@keyframes mouse {
    0% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    100% {
        -webkit-transform: translate(-50%, calc(-50% + 20px));
        transform: translate(-50%, calc(-50% + 20px));
    }
}
/* Fin de la animación del mouse */

/* Spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Fin spinner */