@font-face {
    font-family: 'TuFuente';
    src: url('../../fonts/Quicksand/Quicksand-Regular.ttf') format('woff2'),
        url('../../fonts/Quicksand/Quicksand-Bold.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Opcional: mejora la renderización durante la carga */
}

html {
    width: 100%;
}

/* Aplicar la fuente a todo el documento */
body {
    font-family: 'TuFuente', sans-serif;
    width: 100%;
    /* Asegura que los elementos hereden la fuente */
}

/* Opcional: forzar la herencia para todos los elementos */
* {
    font-family: inherit;
}

.banner {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 45pt;
    font-weight: bold;
    transform: perspective(2);
    background-image: linear-gradient(to right, #C4E2DE 0%, #ABDCD7 100%);
}

.touch{
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

.touch:hover {
    transition-property: all;
    transition-duration: 500ms;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    z-index: 10
}