body {
    font-family: 'Michroma', sans-serif;
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
    background-color: rgb(121, 118, 114);
    width: auto;
}

h1,h2{
    font-family: 'Michroma', sans-serif;
}

h3,h4,h5,a,p{
    font-family: 'Montserrat', sans-serif;
}

.inicio{
    background-size: cover; /* La imagen cubre toda la pantalla */
    background-position: center top; /* Se mantiene en la parte superior */
    background-attachment: fixed; /* Se queda fija al hacer scroll */
}


#titulo{
    /* font-family: 'Michroma', sans-serif; */
    color:blanchedalmond ;
    font-size: 110px;
    display: flex; 
    justify-content: center;
    align-items: center; 
    height: 500px; 
    text-size-adjust: initial;
    text-align: center;
}

#tituloSeccion{
    font-size: 70px; 
    color: rgb(203, 31, 31);
    text-align: left;
    margin-top: 25%;
}

#parrafoPresentacion{
    /* font-family: 'Montserrat', sans-serif; */
    color:blanchedalmond ;
    font-size: 50px;
    text-align: center;
}

#botonContactoInicio{
    /* font-family: 'Michroma', sans-serif; */
    font-size: 25px ;
    margin-top: 50px;
    height: max-content;
    text-align: center; 
    margin-bottom: 40px;
}

#imagenInicial{
    width:100%;
    height:900px;
    opacity: 0.6;
}

#imagenNosotros{
    width:100%;
    height:600px;
    opacity: 0.2;
}

#imagenServicios{
    width:100%;
    height:600px;
    opacity: 0.2;
}

header {
    background: #333;
    color: #fff;
    padding: 0.4rem;
}

.fa-solid{
    height: fit-content;
}

nav {
    padding: 15px;
    position: fixed;
    top: 0;
    width: 100%;
    backdrop-filter: blur(10px); 
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.transparent {
    background: transparent;
}

section {
    padding: 2rem;
    text-align: center;
}

#presentacionSection{
    padding: 0;
    margin-top: 50px;
}

#seccionNosotros{
    padding: 0;
    margin-top: 50px;
}

#seccionServicios{
    padding: 0;
    margin-top: 50px;
}

#seccionContacto{
    padding: 0;
    margin-top: 50px;
}

.tarjetaPresentacion{
    background-image: url('tu-imagen.jpg');
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
}

.section-title{
    color: rgb(194, 194, 194);
    margin-bottom: 100px;
    margin-top: 100px;
    font-size: 80px;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

footer {
    position: absolute;
    left: 0;
    background: #333;
    color: white;
    text-align: center;
    width: 100%;
}

.presentacion{
    text-decoration: solid;
}

.img-fluid{
    object-fit: cover; /* Recorta la imagen para llenar el contenedor */
    object-position: center; /* Ajusta qué parte de la imagen se muestra */
}

.listaCustom{
    list-style: none; /* Oculta los puntos predeterminados */
    padding-left: 0; /* Ajusta el espaciado */
}

.listaCustom li{
    position: relative;
    padding-left: 25px;
}

.listaCustom li::before{
    content: "\f058"; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    position: absolute;
    left: 0;
    color: rgb(193, 33, 33); 
}

#seccionNosotros{
    margin-bottom:100px; 
    text-align: center;
}

#quienesSomos{
    color: rgb(193, 33, 33);
    font-size: 50px
}


/* Section Por qué Nosotros? */

#porqueNosotros{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width:auto;
    height:auto;
    margin: 0 auto;
    background-size: cover;
}

#nosotrosImagen{
    background-color: rgb(32, 32, 32);
    width: auto;
    height: 1100px;
}

#nosotrosFondo{
    background-color: black;
    opacity: 0.6;
}

#nosotrosTitle{
    color: rgb(194, 194, 194); 
    font-size: 70px;
    margin-bottom: 30px;
}

#tarjetasLlenas{
    margin-top: 30px;
}

#nosotrosCardTitle{
    color: rgb(194, 194, 194);
    margin-bottom: 50px; 
    font-size: 36px;
}

#nosotrosCardIcon{
    color: rgb(194, 194, 194);
    font-size: 80px;
    margin-bottom: 50px;
}

#nosotrosDescripcion{
    color: rgb(194, 194, 194);
    text-align: center;
    font-size: 30px;
}

#expertizCardBody{
    margin-top: 50px;
}

#equipoCardBody{
    margin-top: 50px;
}

#trayectoriaCardBody{
    margin-top: 50px;
}

/* Seccion Contacto */

#queresContactarte{
    font-size: 45px;
    text-align: center;
    color:rgb(193, 33, 33)
}

#botonesContacto{
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    text-align: center
}

iframe{
    width:600px;
    height:450px;
    border:0;
}


@media only screen and (max-width: 767px) {

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0.5rem;
        box-sizing: border-box;
        background-color: rgb(121, 118, 114);
        width: auto;
    }

    #titulo{
        color:rgb(232, 202, 157) ;
        font-size: 42px;
        height: 100px; 
        text-size-adjust: initial;
        text-align: center;
        margin-bottom: 50px;
    }

    #tituloSeccion{
        font-size: 40px;
    }

    #parrafoPresentacion{
        color:rgb(240, 221, 192) ;
        font-size: 30px;
    }

    #botonContactoInicio{
        font-size: 20px ;
        margin-top: 50px;
        height: max-content;
        text-align: center; 
        margin-bottom: 40px;
    }

    #imagenInicial{
        width:100%;
        height:450px;
        opacity: 0.4;
    }

    #imagenNosotros{
        width:100%;
        height:450px;
        opacity: 0.4;
    }

    #imagenServicios{
        width:100%;
        height:300px;
        opacity: 0.4;
    }

    main{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
 
    .iniciocompleto{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    nav {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 15px;
        position: fixed;
        display: flexbox;
        top: 0;
        width: 100%;
        backdrop-filter: blur(10px); 
    }
 
    .navbar {
        grid-template-columns: 1fr;
        gap: 20px;
        background: rgba(0, 0, 0, 0.5); 
        padding: 0;
        display: flexbox;
        position: fixed;
        top: 0;
        width: 100%;
        backdrop-filter: blur(10px); 
    }

    .navbar-toggler {
        border-color: rgb(193, 33, 33); /* Cambia el borde del botón */
      }

    #navbarBotones{
        grid-template-columns: 1fr;
        display: flexbox;
        position: relative;
        justify-content: center;
        background-color: rgb(193, 33, 33);
    }

    #logo{
        grid-template-columns: 1fr;
        gap: 20px;
        display: flexbox;
        position: relative;
        width: 50%;
        height: 100%;
    }

    section {
        padding: 3rem;
        text-align: center;
    }

    /* Section Enfoque */

    #sectionEnfoque{
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    #enfoqueImg1{
        display: none;
    }

    #enfoqueImg2{
        display: none;
    }

    #quienesSomos{
        font-size: 42px;
        text-align: center;
    }

    /* Section Por qué Nosotros? */

    #porqueNosotros{
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    #tarjetasLlenas{
        display: flex;
        overflow: auto;
 
    }

    #nosotrosFondo{
        width: auto;
        height: auto;
    }
    
    .card-img-overlay img {
        visibility: hidden;
    }

    #nosotrosImagen{
        visibility: hidden;
        display: flex;
        overflow: auto;
        width: auto;
        height: 100%;
    }

    #nosotrosTitle{
        color: rgb(194, 194, 194); 
        font-size: 50px;
        text-align: center;
    }


    #nosotrosCardTitle{
        color: rgb(194, 194, 194);
        font-size: 21px;
        margin-top: 8px; 
        margin-bottom: 8px; 
    }

    #nosotrosCardIcon{
        color: rgb(194, 194, 194);
        font-size: 40px;
        margin-bottom: 0;

    }

    #nosotrosDescripcion{
        color: rgb(194, 194, 194);
        text-align: center;
        font-size: 18px;
    }
    
    #expertizCardBody{
        margin-top: 0;
        
    }

    #equipoCardBody{
        margin-top: 0;
    }

    #trayectoriaCardBody{
        margin-top: 0;
    }

    /* Section Contacto */

    #queresContactarte{
        font-size: 36px;
        text-align: left;
    }

    #imagenContacto{
        visibility: hidden;
        display: none;
    }

    #botonesContacto{
        font-size: 20px;
        text-align: center
    }

    iframe{
        width:400px;
        height:400px;
    }

    /* Seccion Servicios */
    #imagenServicio{
        visibility: hidden;
        display: none;
    }

    /* Seccion Nosotros */

    #seccionNosotros{
        margin-bottom:50px; 
        text-align: center;
    }

    #imagenPaginaNosotros{
        visibility: hidden;
        display: none;
    }

    /* Footer */
    footer {
        position: absolute;
        left: 0;
        background: #333;
        color: white;
        text-align: center;
        width: 100%;
    }

}