/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Evitar desbordamiento horizontal */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Deshabilita el desbordamiento horizontal */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

/* Ocultar barras de desplazamiento */
html {
    scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Clases de tipografía Saira Condensed */
[class^="saira-condensed-"] {
    font-family: "Saira Condensed", sans-serif;
    font-style: normal;
}

.saira-condensed-thin { font-weight: 100; }
.saira-condensed-extralight { font-weight: 200; }
.saira-condensed-light { font-weight: 300; }
.saira-condensed-regular { font-weight: 400; }
.saira-condensed-medium { font-weight: 500; }
.saira-condensed-semibold { font-weight: 600; }
.saira-condensed-bold { font-weight: 700; }
.saira-condensed-extrabold { font-weight: 800; }
.saira-condensed-black { font-weight: 900; }

/* Tipografía para encabezados con Bebas Neue */
h1, h2, h3, h4, h5 {
    font-family: 'Bebas Neue', sans-serif;
    color: black;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 200;
}

h3, h4 {
    font-size: 2.7rem;
    font-weight: 600;
}

h5 {
    font-size: 2.7rem;
    font-weight: 700;
}

/* Enlaces con Bebas Neue */
a {
    font-family: 'Bebas Neue', sans-serif; /* Aplica Bebas Neue a los enlaces */
    font-size: 2rem;
    text-decoration: none; /* Elimina subrayado en enlaces */
}

/* Botones */
.boton, .boton-light, .boton-outline, .boton-outline-light {
    transition: all 0.3s ease;
    color: white;
}

.boton {
    background-color: black;
}

.boton-light {
    background-color: white;
}
.boton-light a{
    color:black;
}

.boton:hover, .boton-light:hover {
    background-color: white;
    transform: scale(1.1);
}

/* Cambiar el color del texto de los enlaces dentro de los botones al hacer hover */
.boton:hover a, .boton-light:hover a {
    color: black;  /* Cambiar el color del texto a negro */
}



.boton-outline {
    background: transparent;
    border: 2px solid black;
}

.boton-outline a{
    color:grey;
}

.boton-outline-light {
    border-color: white;
}

.boton-outline-light:hover {
    border-color: white;
    transform: scale(1.1);
}

.boton-outline-light:hover a{
    color:white;
}

.boton-outline:hover {
    color: white;
    border-color: white;
    transform: scale(1.1);
}

/* Botón de WhatsApp */
.whatsapp {
    position: fixed;
    bottom: 20px;
    right: 30px;
    width: 60px;
    z-index: 999;
    transition: all 0.3s ease-out;
}

.whatsapp:hover {
    transform: scale(1.3);
    transition-duration: 0.5s;
}

/* Sección oscura */
.seccion-dark {
    background-color: black;
    color: white;
    padding: 3rem 0;
}

.seccion-dark input, 
.seccion-dark textarea, 
.seccion-dark select {
    background-color: #303030;
    color: white;
    border: none;
}

.seccion-dark ::placeholder {
    color: #666;
}

/* Imágenes y modal */
.mySlides {
    display: none;
}

/* Estilos Responsivos */

/* Responsividad: Ajustes para dispositivos móviles */
@media (max-width: 767px) {
    h1 {
        font-size: 2.5rem; /* Reducir tamaño de fuente en móviles */
    }

    h2 {
        font-size: 2rem;
    }

    h3, h4 {
        font-size: 2rem;
    }

    h5 {
        font-size: 2.2rem;
    }

    .whatsapp {
        width: 50px; /* Reducir tamaño del ícono de WhatsApp en móviles */
        bottom: 15px;
        right: 15px;
    }

    .boton, .boton-light, .boton-outline, .boton-outline-light {
        font-size: 1rem; /* Reducir tamaño de fuente en botones */
        padding: 10px 15px;
    }
}


#sib-container input:-ms-input-placeholder {
            text-align: left;
            font-family: Helvetica, sans-serif;
            color: #c0ccda;
          }
        
          #sib-container input::placeholder {
            text-align: left;
            font-family: Helvetica, sans-serif;
            color: #c0ccda;
          }
        
          #sib-container textarea::placeholder {
            text-align: left;
            font-family: Helvetica, sans-serif;
            color: #c0ccda;
          }
        
          #sib-container a {
            text-decoration: underline;
            color: #2BB2FC;
          }