html, body {
    min-height: 100%;
}

body {
    background-image: url('./assets/fondo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Readex Pro Bold', sans-serif;
    background-color: gray;
    background-attachment: fixed;
    margin: 0; /* Agregar margen 0 para evitar espacios en blanco */
    padding: 0; /* Agregar relleno 0 para evitar espacios en blanco */
}
a {
    text-decoration: none;
}


@font-face {
    font-family: 'Readex Pro Bold';
    src: url('./assets/fonts/variable/Readexpro[HEXP\,wght].ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.map-iframe {
    width: 100%;
    height: 100vh;
    border: 0;
}

.card {
    margin-right: 30px; /* Ajustar el valor según sea necesario */
}

body, html {
    overflow-x: hidden;
}

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Color oscuro semi-transparente */
}

.contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}
 

.texto_img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Ajusta el color de fondo del texto aquí */
    color: white; /* Ajusta el color del texto aquí */
    padding: 20px; /* Ajusta el espaciado interior del texto aquí */
}

.text-overlay h5,
.text-overlay p {
    margin: 0;
}


.texto_img p {
    max-width: 80%;
    margin: auto;
    font-size: 1rem; /* Tamaño de fuente base */
}

@media (min-width: 577px) {
    .texto_img h5, .texto_img p {
        font-size: 1.1rem; /* Tamaño predeterminado del texto para pantallas medianas y grandes */
    }
}



img.img-fluid {
    max-width: 100%;
    height: auto;
}
 /* Estilo para el botón */
 .magia {
    background-image: url('./assets/Fondo.png'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen para cubrir todo el botón */
    color: white; /* Color del texto */
    border: none; /* Quita el borde */
    padding: 10px 20px; /* Ajusta el relleno del botón */
    font-size: 16px; /* Tamaño de fuente */
        width: 1240px; /* Ancho del botón */
        height: 400px; /* Altura del botón */
}

.magia{
    /* Estilo cuando el mouse está encima del botón */
    opacity: 0.8; /* Opacidad reducida */
}

/*
html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url('./assets/fondo.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            font-family: 'Readex Pro Bold', sans-serif;
            background-color: gray;
            background-attachment: fixed; /* Fija la imagen de fondo para que no se mueva al desplazarse 
        }

        @font-face {
            font-family: 'Readex Pro Bold';
            src: url('./assets/fonts/variable/Readexpro[HEXP\,wght].ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        .map-iframe {
            width: 100%;
            height: 100vh;
            border: 0;
        }

        .card {
            margin-right: 30px; /* Ajustar el valor según sea necesario 
        }

        body, html {
            overflow-x: hidden;
        }

        .dark-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Color oscuro semi-transparente 
        }

        .contenedor {
            position: relative;
            display: inline-block;
            text-align: center;
        }

        .texto_img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .text-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Ajusta el color de fondo del texto aquí 
            color: white; /* Ajusta el color del texto aquí 
            padding: 20px; /* Ajusta el espaciado interior del texto aquí 
        }

        .text-overlay h5,
        .text-overlay p {
            margin: 0;
        }

        .texto_img p {
            max-width: 80%;
            margin: auto;
            font-size: 1rem; /* Tamaño de fuente base 
        }

        @media (min-width: 577px) {
            .texto_img h5,
            .texto_img p {
                font-size: 1.1rem; /* Tamaño predeterminado del texto para pantallas medianas y grandes 
            }
        }

        /* Estilo para la imagen 
        img.img-fluid {
            max-width: 100%;
            height: auto;
        }

        /* Estilo para dispositivos móviles 
        @media (max-width: 767px) {
            .magia {
                height: 100px; /* Altura del botón en dispositivos móviles 
            }

            .texto_img {
                width: 100%;
                height: auto;
                min-height: 100vh; /* Altura mínima del 100% del viewport height 
            }

            .texto_img p {
                font-size: 14px; /* Tamaño de fuente más pequeño para dispositivos móviles 
            }
        }
*/