@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    font-family: "Montserrat", serif;
}

html{
    scroll-behavior: smooth;
}
a{
    display: flex;
    cursor: pointer;

all: unset;
}

section{
    padding-top: 5px;
}
/* Ícono de WhatsApp */
.whatsapp-icon {
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Color de fondo de WhatsApp */
    border-radius: 50%; /* Hace que sea redondo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.whatsapp-icon:hover {
    transform: scale(1.1); /* Efecto al pasar el mouse */
}

.whatsapp-icon img {
    width: 40px; /* Tamaño del ícono dentro del contenedor */
    height: 40px;
}
.icons-container {
    position: fixed;
    bottom: 20px; /* Ajusta la posición desde abajo */
    right: 20px; /* Ajusta la posición desde la derecha */
    display: flex;
    gap: 15px; /* Espacio entre los íconos */
    z-index: 1000; /* Asegura que estén siempre visibles */
}

/* Ícono de flecha hacia arriba */
.scroll-to-top {
    width: 60px;
    height: 60px;
    background-color: #007bff; /* Color de fondo */
    border-radius: 50%; /* Hace que sea redondo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra */
    cursor: pointer;
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.3s ease-in-out;
    color: white;
}

/* Mostrar el ícono de la flecha cuando se haga scroll hacia abajo */
.scroll-to-top.show {
    opacity: 1; /* Hace visible el ícono cuando se agrega la clase "show" */
}



/*NAVBAR*/

nav {
    text-align: center;
    color: white;
    top: 0; /* Lo coloca en la parte superior de la página */
    left: 0; /* Alinea el navbar al borde izquierdo */
    width: 100%; /* Asegura que el navbar ocupe todo el ancho */
    z-index: 1000; /* Asegura que el navbar esté encima de otros elementos */
    border-bottom: 1px solid white;
}

.logo {
    
    cursor: pointer;
    display: flex; /* Usa flexbox para centrar */
    align-items: center;

    justify-content: start;
}

.logo img {
    margin-top: 40px;
    margin-left: 50px; /* Ajusta márgenes si es necesario */
    width: 50px; /* Ajusta el tamaño del logo */
}

nav ul {
    display: flex; /* Flexbox para distribuir elementos */
    list-style: none; /* Elimina viñetas */
    justify-content: center; /* Centra horizontalmente los elementos */
    align-items: center; /* Centra verticalmente los elementos */
    margin: 0; /* Elimina márgenes adicionales */
    padding: 0; /* Elimina padding adicional */
}

nav ul li {
    text-decoration: none;
    font-size: 16px; /* Ajusta el tamaño del texto */
    padding: 20px;
    font-family: "Montserrat", sans-serif; /* Aplica la fuente */
    color: white;
    transition: color 0.3s; /* Animación para hover */
}

nav ul li:hover {
    cursor: pointer;
    color: #f0a500; /* Cambia el color al pasar el mouse */
}

.c1 {
    text-align: center;
    border-bottom: none; /* Sin borde por defecto */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}

.c1 a {
    text-align: center;
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Hereda el color del texto */
}

.texto li {
    all: unset;
}


/*HEADER*/

header{
    background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
    url(./img/volcan\ en\ diagonal.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    height: 900px;
}

.contenedor-background{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    margin-top: 0px;
    font-family: "Montserrat", serif;
    gap: 120px;
    
}

.titulo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
}
.titulo h1{
    font-size: 64px;
}
.titulo p{
    margin-top: 20px;
    font-size: 32px;
    text-align: center;
    max-width: 800px;
}

.btn{
    all: unset;
    font-family: "Montserrat", serif; 
}

.btn button{
    all: unset;
    color: white;
    background-color:#355570 ;
    padding: 10px;
    width: 200px;
    font-family: "Montserrat", serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
    -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
    -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);

}

.btn :hover{
    transition: 1s;
    transform: scale(1.1);
    background-color: #ffffff;
    color: #355570;
    border: 1px solid #355570;

}

/*main*/

.mid-seccion{
    position: relative;
}

.vector{
position: absolute;
width: 100%;
}

.vector img{
    width: 100%;
}

.contenedor-volcan{
    background-image: url(./img/crater\ felipe\ 3.jpg);
    height: 1100px;
    background-size: cover;
    background-position: 50% 20%;
}


.card{
       
   
        position: absolute;
        display: flex;
        flex-direction: column;
        background: linear-gradient(
            rgba(0, 0, 0, 0.5), 
            rgba(0, 0, 0, 0.5)
        );
        width: 400px;
        height: 400px;
        color: white;
        top:25% ;
        left: 20%;
        gap: 40px;
        align-items: center;
        border-radius: 10px;
        justify-content: center;
        z-index: 10;
    
}


.text{
    text-align: center;
}

.text h1{
    margin-bottom: 50px;
}

.text p{
    margin: 0 auto;
    max-width: 300px;
    text-align: center;
}

.card-datos{
position: absolute;
top: 95%;
left: 15%;
}

.fotos{
    background-color: #355570;
    height: 600px;
    align-items: center;
    text-align: center;
    justify-content: center;
    display: flex;
    
    
}

.fotos img{
    margin: 35px;
    margin-top: 120px;

}

.contenedor-reservar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    margin-top: 50px;
    color: #355570;
    margin-bottom: 80px;

}

.banner{


}

.banner img{
    height: 700px;
}

.informacion{
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 60px;

}


.informacion h1{
    max-width: 800px;
}

.btn{
    display: flex;
    justify-content: center;
}

.layout{
    display: flex;
    gap: 50px;
    background-color: rgb(255, 255, 255);
    padding: 0px;
    border-radius: 5px;
    width: 700px;
    height: 90px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
    -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
    -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
    margin-bottom: 50px;
    
}

.contendor{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    
}
.c2{
    color: #355570;
    padding: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    
}

.c2 p{
    
    font-size: 8px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    max-height: 20px;
    
}

.c2:hover{
    background-color: #355570;
    transform: scale(1.1);
    border-radius: 5px;
    transition: 0s;
    border: 0px;
    color: white;
}


.banner-fotos{
    height: 600px;
    align-items: center;
    text-align: center;
    justify-content: center;
    display: flex;
}

.banner-fotos img{
    margin: 35px;
}

.banner-fotos img:hover{
    transform: scale(1.1);
    transition: 2s;
}

.footer-contacto{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #355570;
    height: 600px;
}


.cart-text-3{
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    width: 400px;
    height: 400px;
    gap: 50px;
    margin: 0 auto;
    
    color: #355570;
    box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
-webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
-moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
}

.cart-text-3 h1{
    margin-top: 0px;
    font-size: 36px;
    text-align: center;
}

.cart-text-3 p{

    max-width: 400px;
    cursor: pointer;
}

.contendor-contacto{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

}

.icons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    text-align: center;
    gap: 44px;
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
}
.contenedor-general{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding: 10px;
width: 100%;
}

.title-1{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1100px;
    margin-bottom: 120px;
    text-align: center;
    font-size: 18px;
}

.informacion-1{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0px;


}

.instruccion{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.instruccion i{
    font-size: 80px;
    margin-bottom: 20px;
}
.name{
display: flex;
flex-direction: column;

}


.informacion{
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    gap: 55px;
}

.icons i{
    text-align: center;
    font-size: 30px;
    margin: 10px;
    align-items: center; margin: 0px;
}

.icons a{
    font-size: 30px;
}

.icons p{
    display: flex;
    justify-content: start;
    text-align: start;
}
.icon p{
    text-align: start;


}
.banner-footer{
    position: relative;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
    margin-top: -200px;
}

.btn-cart{
    display: flex;
    justify-content: center;
    align-items: center;
    all: unset;

}

.btn-cart button{
    display: flex;
    justify-content: center;
    align-items: center;
    all: unset;
    background-color: #355570;
    color: white;
    width: 150px;
    padding: 10px;
    text-align: center;
    cursor: pointer;

}

.btn-cart button:hover{
    transition: 2s;
    transform: scale(1.1);
    }


    @media (max-width: 1440px){
        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 2px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
            }
            .logo img{
                margin-left: 50px;
                width: 100px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                text-decoration: none;
                font-size: 15px;
                margin: 20px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 36px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 24px;
                text-align: center;
                max-width: 800px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 20%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 12px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 95%;
            left: 25%;
            }

            .card-datos img{
                width: 700px;
            }
            
            .fotos{
                background-color: #355570;
                height: 600px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 250px;
                margin: 35px;
                margin-top: 120px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 120px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 700px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                max-width: 500px;
                gap: 60px;
            
            }
            
            
            .informacion h1{
                max-width: 800px;
            }
            
            .btn{
                display: flex;
                justify-content: center;
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 700px;
                height: 90px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }
            
            .c2 p{
                
                font-size: 8px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 100%;
                max-height: 40px;
                margin-top: 15px;
                padding: 0px;
                
            }

            .c2 h5{
                margin-top: 10px;

            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 600px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
            .banner-fotos img{
                margin: 35px;
            }
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }

            .banner-fotos img{
                width: 300px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 400px;
                height: 400px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 36px;
                text-align: center;
            }
            
            .cart-text-3 p{
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon, .text-1 {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p, .text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
                .text-1 a {
                    text-decoration: none;
                    color: #000; /* Color del texto */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .text a:hover {
                    color: #355570; /* Color al pasar el cursor */
                }
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    }

    @media (max-width: 1024px){
        
        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 2px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
            }
            .logo img{
                margin-left: 50px;
                width: 100px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                text-decoration: none;
                font-size: 15px;
                margin: 20px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 36px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 24px;
                text-align: center;
                max-width: 800px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 35%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                display: block;
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 10px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 95%;
            left: 20%;
            }

            .card-datos img{
                width: 600px;
            }
            
            .fotos{
                background-color: #355570;
                height: 400px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 200px;
                margin: 35px;
                margin-top: 20px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 120px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 500px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                max-width: 500px;
                gap: 60px;
            
            }
            
            
            .informacion h1{
                font-size: 20px;
                max-width: 800px;
            }
            .informacion p{
                font-size: 16px;
                margin-bottom: 50px;

            }           
            .btn{
                display: flex;
                justify-content: center;
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 700px;
                height: 90px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }
            
            .c2 p{
                
                font-size: 8px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 100%;
                max-height: 20px;
                
            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 500px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
         
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }

            .banner-fotos img{
                width: 250px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 400px;
                height: 400px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 36px;
                text-align: center;
            }
            
            .cart-text-3 p{
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p,.text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
         
           
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    
    }

    
    @media (max-width: 968px){
        
        
        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 2px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
                display: none;
            }
            .logo img{
                margin-left: 50px;
                width: 100px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                text-decoration: none;
                font-size: 12px;
                margin: 20px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 24px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 18px;
                text-align: center;
                max-width: 600px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 36%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                display: block;
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 10px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 95%;
            left: 18%;
            }

            .card-datos img{
                width: 600px;
            }
            
            .fotos{
                background-color: #355570;
                height: 400px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 150px;
                margin: 35px;
                margin-top: 20px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 400px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                max-width: 500px;
                gap: 0px;
            
            }
            
            
            .informacion h1{
                font-size: 18px;
                max-width: 280px;
            }
            .informacion p{
                font-size: 14px;
                margin-bottom: 50px;
                max-width: 280px;

            }           
            .btn{
                display: flex;
                
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 550px;
                height: 90px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }
            
            .c2 p{
                
                font-size: 8px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 100%;
                max-height: 20px;
                
            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
         
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }

            .banner-fotos img{
                width: 150px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 400px;
                height: 400px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 36px;
                text-align: center;
            }
            
            .cart-text-3 p{
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p,.text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
         
           
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    
    
       
    }

    @media (max-width: 775px){
        
        
        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 2px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
                display: none;
            }
            .logo img{
                margin-left: 50px;
                width: 100px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                text-decoration: none;
                font-size: 12px;
                margin: 20px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 24px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 18px;
                text-align: center;
                max-width: 600px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 31%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                display: block;
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 10px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 95%;
            left: 8%;
            }

            .card-datos img{
                width: 600px;
            }
            
            .fotos{
                background-color: #355570;
                height: 400px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 150px;
                margin: 35px;
                margin-top: 20px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 400px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                max-width: 500px;
                gap: 0px;
            
            }
            
            
            .informacion h1{
                font-size: 18px;
                max-width: 280px;
            }
            .informacion p{
                font-size: 14px;
                margin-bottom: 50px;
                max-width: 280px;

            }           
            .btn{
                display: flex;
                
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 550px;
                height: 90px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }
            
            .c2 p{
                
                font-size: 8px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 100%;
                max-height: 20px;
                
            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
         
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }

            .banner-fotos img{
                width: 150px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 400px;
                height: 400px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 36px;
                text-align: center;
            }
            
            .cart-text-3 p{
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p,.text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
         
           
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    
    
       
    }

    @media (max-width: 470px){

        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 2px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
                display: none;
            }
            .logo img{
                margin-left: 50px;
                width: 100px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                text-decoration: none;
                font-size: 12px;
                margin: 20px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 16px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 14px;
                text-align: center;
                max-width: 330px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 18%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                display: block;
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 10px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 98%;
            left: 8%;
            }

            .card-datos img{
                width: 380px;
            }
            
            .fotos{
                background-color: #355570;
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 130px;
                margin: 35px;
                margin-top: 20px;
                margin: 5px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 40px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 400px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                max-width: 500px;
    
                text-align: center;
            
            }
            
            
            .informacion h1{
                font-size: 18px;
                max-width: 280px;
            }
            .informacion p{
                font-size: 14px;
                margin-bottom: 50px;
                max-width: 280px;

            }           
            .btn{
                display: flex;
                
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 350px;
                height: 90px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }

            .c2 h5{
                font-size: 12px;
            }
            
            .c2 p{
                display: none;
                visibility: hidden;
                
                
                
            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
         
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }


            .banner-fotos img{
                margin: 5px;
                width: 130px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 400px;
                height: 400px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 36px;
                text-align: center;
            }
            
            .cart-text-3 p{
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p,.text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
         
           
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    


    }

    @media (max-width: 440px){
        

        

        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 1px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
                display: none;
            }
            .logo img{
                margin-left: 0px;
                width: 0px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                font-size: 12px;
                padding: 5px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 14px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 14px;
                text-align: center;
                max-width: 330px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 13%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                display: block;
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 10px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 98%;
            left: 12%;
            }

            .card-datos img{
                width: 300px;
            }
            
            .fotos{
                background-color: #355570;
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 110px;
                margin: 35px;
                margin-top: 20px;
                margin: 5px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 40px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 400px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                max-width: 500px;
    
                text-align: center;
            
            }
            
            
            .informacion h1{
                font-size: 18px;
                max-width: 280px;
            }
            .informacion p{
                font-size: 14px;
                margin-bottom: 50px;
                max-width: 280px;

            }           
            .btn{
                display: flex;
                
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 350px;
                height: 60px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }

            .c2 h5{
                font-size: 12px;
            }
            
            .c2 p{
                display: none;
                visibility: hidden;
                
                
                
            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
         
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }


            .banner-fotos img{
                margin: 5px;
                width: 110px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 300px;
                height: 300px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 16px;
                text-align: center;
            }
            
            .cart-text-3 p{
                font-size: 14px;
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p,.text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
         
           
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    


    

    

    }

    @media (max-width: 390px){

        

        nav{
            color: white;
               /* Fija el navbar en la parte superior */
               top: 0; /* Lo coloca en la parte superior de la página */
               left: 0; /* Alinea el navbar al borde izquierdo */
               width: 100%; /* Asegura que el navbar ocupe todo el ancho */
               z-index: 1000; /* Asegura que el navbar se quede encima de otros elementos */
               
                border-bottom: 1px solid white;
            }
            
            
            
            .logo{
                height: 0px;
                cursor: pointer;
                display: none;
            }
            .logo img{
                margin-left: 0px;
                width: 0px;
                
            }
            nav{
                display: block;
                
                font-family: "Montserrat", sans-serif;
            }
            
            nav ul{
                display: flex;
                list-style: none;
                justify-content: center;
                justify-content: center;
                
            }
            
            nav ul li{
                display: block;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                font-size: 12px;
                padding: 5px;
            
            }
            
            .c1 {
                
                border-bottom: none; /* Sin borde por defecto */
            }
            
            
            .c1:hover{
                cursor: pointer;
               
            }
            
            
            .texto li {
                all: unset;
            }
            
            
            /*HEADER*/
            
            header{
                background-image:        linear-gradient(to bottom, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 1) 99%), 
                url(./img/volcan\ en\ diagonal.jpg) ;
                background-repeat: no-repeat;
                background-size: cover;
                height: 900px;
            }
            
            .contenedor-background{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: white;
                margin-top: 0px;
                font-family: "Montserrat", serif;
                gap: 120px;
                
            }
            
            .titulo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 150px;
            }
            .titulo h1{
                font-size: 14px;
            }
            .titulo p{
                margin-top: 20px;
                font-size: 14px;
                text-align: center;
                max-width: 330px;
            }
            
            .btn{
                all: unset;
                font-family: "Montserrat", serif; 
            }
            
            .btn button{
                all: unset;
                color: white;
                background-color:#355570 ;
                padding: 10px;
                width: 200px;
                font-family: "Montserrat", serif;
                text-align: center;
                cursor: pointer;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            
            }
            
            .btn :hover{
                transition: 1s;
                transform: scale(1.1);
                background-color: #ffffff;
                color: #355570;
                border: 1px solid #355570;
            
            }
            
            /*main*/
            
            .mid-seccion{
                position: relative;
            }
            
            .vector{
            position: absolute;
            width: 100%;
            }
            
            .vector img{
                width: 100%;
            }
            
            .contenedor-volcan{
                background-image: url(./img/crater\ felipe\ 3.jpg);
                height: 900px;
                background-size: cover;
                background-position: 80% 120%;
            }
            
            
            .card{
                   
               
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(
                        rgba(0, 0, 0, 0.5), 
                        rgba(0, 0, 0, 0.5)
                    );
                    width: 300px;
                    height: 300px;
                    color: white;
                    top:25% ;
                    left: 10%;
                    gap: 10px;
                    align-items: center;
                    border-radius: 10px;
                    justify-content: center;
                    z-index: 10;
                
            }
            
            
            .text{
                display: block;
                text-align: center;
            }
            
            .text h1{
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            .text p{
                font-size: 10px;
                margin: 0 auto;
                max-width: 250px;
                text-align: center;
                margin-bottom: 20px;
            }
            
            .card-datos{
                
            position: absolute;
            top: 98%;
            left: 8%;
            }

            .card-datos img{
                width: 300px;
            }
            
            .fotos{
                background-color: #355570;
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
                
                
            }
            
            .fotos img{
                width: 110px;
                margin: 35px;
                margin-top: 20px;
                margin: 5px;
            
            }
            
            .contenedor-reservar{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 40px;
                margin-top: 50px;
                color: #355570;
                margin-bottom: 80px;
            
            }
            
            .banner{
            
            
            }
            
            .banner img{
                height: 400px;
            }
            
            .informacion{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                max-width: 500px;
    
                text-align: center;
            
            }
            
            
            .informacion h1{
                font-size: 18px;
                max-width: 280px;
            }
            .informacion p{
                font-size: 14px;
                margin-bottom: 50px;
                max-width: 280px;

            }           
            .btn{
                display: flex;
                
            }
            
            .layout{
                display: flex;
                gap: 50px;
                background-color: rgb(255, 255, 255);
                padding: 0px;
                border-radius: 5px;
                width: 350px;
                height: 90px;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
                margin-bottom: 50px;
                
            }
            
            .contendor{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                justify-content: center;
                
            }
            .c2{
                color: #355570;
                padding: 5px;
                height: 100%;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                
            }

            .c2 h5{
                
                font-size: 10px;
            }
            
            .c2 p{
                display: none;
                visibility: hidden;
                
                
                
            }
            
            .c2:hover{
                background-color: #355570;
                transform: scale(1.1);
                border-radius: 5px;
                transition: 0s;
                border: 0px;
                color: white;
            }
            
            
            .banner-fotos{
                height: 300px;
                align-items: center;
                text-align: center;
                justify-content: center;
                display: flex;
            }
            
         
            
            .banner-fotos img:hover{
                transform: scale(1.1);
                transition: 2s;
            }


            .banner-fotos img{
                margin: 5px;
                width: 110px;
            }
            
            .footer-contacto{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #355570;
                height: 600px;
            }
            
            
            .cart-text-3{
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: rgb(255, 255, 255);
                width: 300px;
                height: 300px;
                gap: 40px;
                margin: 0 auto;
                
                color: #355570;
                box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -webkit-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            -moz-box-shadow: 1px 1px 14px 6px rgba(163,163,163,0.75);
            }
            
            .cart-text-3 h1{
                margin-top: 0px;
                font-size: 16px;
                text-align: center;
            }
            
            .cart-text-3 p{
                font-size: 14px;
            
                max-width: 400px;
                cursor: pointer;
            }
            
            .contendor-contacto{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            
            }
            
          
            .contenedor-general{
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                padding: 10px;
            width: 100%;
            }
            
            .title-1{
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1100px;
                margin-bottom: 120px;
                text-align: center;
                font-size: 18px;
            }
            

            
            .instruccion{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name{
            display: flex;
            flex-direction: column;
            
            }
            
            

            

            
            .banner-footer{
                position: relative;
                z-index: 10;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #0c528f), #0c528f;
                margin-top: -200px;
            }
            
            .btn-cart{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
            
            }
            
            .btn-cart button{
                display: flex;
                justify-content: center;
                align-items: center;
                all: unset;
                background-color: #355570;
                color: white;
                width: 150px;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            
            }
            
            .btn-cart button:hover{
                transition: 2s;
                transform: scale(1.1);
                }

                .footer-contacto {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 20px; /* Espaciado entre secciones */
                }
                
                .contendor-contacto {
                    display: flex;
                    justify-content: center;
                    gap: 50px; /* Espaciado entre columnas */
                }
                
                .icons, .informacion {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 15px; /* Espaciado entre íconos y textos */
                }
                
                .icon {
                    display: flex;
                    align-items: center; /* Alinea íconos con textos en una línea */
                    gap: 10px; /* Espaciado entre el ícono y el texto */
                }
                
                .icon p,.text-1 p {
                    margin: 0; /* Elimina márgenes innecesarios */
                    font-size: 16px; /* Tamaño del texto */
                }
                
                .icon i {
                    font-size: 24px; /* Tamaño de los íconos */
                    color: #355570; /* Color del ícono, ajustable */
                }

    
                
         
           
                
                .btn-cart button {
                    padding: 10px 20px;
                    font-size: 16px;
                    color: white;
                    background-color:#355570;
                    border: none;
                    cursor: pointer;
                    border-radius: 5px;
                }
                
                .btn-cart button:hover {
                    background-color: #355570;
                }
                
    


    

    }