/* ==========================================================
   MADAITH STUDIOS
   Hoja de estilos principal
   ========================================================== */


/* ==========================================================
   CONFIGURACIÓN GENERAL
   ========================================================== */

html {
    scroll-behavior: smooth;

    scrollbar-width: thin;
    scrollbar-color: #0A3222 #FFFFFF;
}


body {
    margin: 0;

    background-color: #FFFFFF;
    color: #0A3222;

    font-family: "Inter", sans-serif;
}



/* ==========================================================
   SCROLLBAR - CHROME / EDGE / SAFARI
   ========================================================== */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #FFFFFF;
}


::-webkit-scrollbar-thumb {
    background: #0A3222;
}


::-webkit-scrollbar-thumb:hover {
    background: #051A11;
}



/* ==========================================================
   ANIMACIONES
   ========================================================== */

.fade-in {
    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}


.fade-in.visible {
    opacity: 1;

    transform: translateY(0);
}



/* ==========================================================
   BOTÓN OUTLINE
   ========================================================== */

.btn-outline {
    display: inline-block;

    border: 2px solid #0A3222;

    background-color: transparent;

    color: #0A3222;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.btn-outline:hover {
    background-color: #0A3222;

    color: #FFFFFF;
}


.btn-outline:active {
    transform: scale(0.98);
}



/* ==========================================================
   BOTÓN SÓLIDO
   ========================================================== */

.btn-solid {
    display: inline-block;

    border: 2px solid #FFFFFF;

    background-color: #FFFFFF;

    color: #0A3222;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.btn-solid:hover {
    background-color: transparent;

    color: #FFFFFF;
}


.btn-solid:active {
    transform: scale(0.98);
}



/* ==========================================================
   IMÁGENES
   ========================================================== */

img {
    display: block;

    max-width: 100%;
}



/* ==========================================================
   ENLACES
   ========================================================== */

a {
    text-decoration-skip-ink: auto;
}



/* ==========================================================
   BOTONES
   ========================================================== */

button {
    font: inherit;
}



/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;

    outline-offset: 4px;
}



/* ==========================================================
   USUARIOS QUE PREFIEREN MENOS ANIMACIONES
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    .fade-in {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .btn-outline,
    .btn-solid {
        transition: none;
    }

}