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

@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');

*{
    box-sizing: border-box; /*calcula el alto y el ancho*/
    margin: 0;
    padding: 0;
}

:root{
    --primary_color:#fff;
    --second_color:#080808;
    --third_color:#e3a54e;
    --second_font:"Jost", sans-serif;
    --main_font: "Marcellus SC", serif;
    --small_font: 0.6rem;
    --medium_font: 2rem;
    --normal_font: 16px;
    --letter_space: 2px;
    --font_weight: 600;
}

html, body{
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--second_color);
    color: var(--primary_color);
    font-family:var(--second_font)

}

/*    Hero section & Menu   */
#cozystay_hero_section{
    width: 100%;
    height: 50rem;
    background: linear-gradient(rgba(0, 0, 0, 0.697), rgba(0, 0, 0, 0.674)), url("../img/principal.jpg") no-repeat center center/cover;

}

/*#cozystay_main_header{
    width: inherit;
    height: 30vh;
    transition: all 0.2s ease-in-out;
    
}*/




/* NAVBAR CON LOGO CENTRADO Y MENÚ A LA DERECHA */

.nav_info {
    width: 100vw;  /* Ocupa todo el ancho de la pantalla */
    height: 20vh;  /* Altura de la barra de navegación */
    display: flex; /* Usa flexbox para la distribución */
    align-items: center; /* Centra los elementos verticalmente */
    justify-content: space-between; /* Separa los elementos en los extremos */
    padding: 0 2rem; /* Espaciado lateral */
    background: var(--background_color); /* Fondo de la barra de navegación */
    position: relative; /* Permite el posicionamiento absoluto del logo */
    
}

/* LOGO CENTRADO*/

.logo {
    position: absolute;  /* Se coloca de forma absoluta dentro del header */
    left: 50%;  /* Se mueve al 50% del ancho de la pantalla */
    transform: translateX(-50%); /* Lo centra exactamente en el medio */
    top: 50%;  /* Se posiciona a la mitad de la altura */
    transform: translate(-50%, -50%); /* Ajusta su posición para quedar centrado */
    margin-top: 1.5rem;
    
}

.logo img {
    width: 12rem;  /* Ajusta el tamaño del logo */
    margin-top: 1.5rem; /* Espacio superior */
}

/* MENÚ DE NAVEGACIÓN A LA DERECHA */

.navigation {
    display: flex; /* Usa flexbox para organizar los elementos */
    align-items: center; /* Alinea los elementos verticalmente */
    gap: 2rem; /* Espacio entre los elementos */
    margin-left: auto; /* Empuja el menú hacia la derecha */
    
   
}


/*SOMBREADO EN LA NAVEGACIÓN*/

/* ============================
 EFECTO DE LÍNEA NARANJA EN HOVER
============================= */

.navigation ul li {
    position: relative; /* Permite posicionar el ::after correctamente */
    padding-bottom: 5px; /* Espacio para la línea */
    
}

.navigation ul li::after {
    content: ""; /* Necesario para generar el pseudo-elemento */
    position: absolute; /* Se posiciona en relación con el elemento padre */
    left: 50%; /* Inicia desde el centro */
    bottom: 0; /* Se coloca en la parte inferior */
    width: 0%; /* Inicialmente no se muestra */
    height: 2px; /* Grosor de la línea */
    background-color: orange; /* Color de la línea */
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out; /* Animación */
}

.navigation ul li:hover::after {
    width: 100%; /* Se extiende completamente */
    left: 0; /* Se alinea al inicio */
}




.navigation .menu {
    display: flex; /* Mantiene los elementos en línea */
    align-items: center; /* Centra los elementos verticalmente */
    gap: 2rem; /* Espaciado entre cada opción del menú */
}

.navigation ul {
    display: flex; /* Organiza los elementos en una fila */
    list-style: none; /* Elimina los estilos predeterminados de lista */
    gap: 1.5rem; /* Espaciado entre los elementos del menú */
    text-transform: uppercase; /* Convierte el texto en mayúsculas */
    font-weight: var(--font_weight); /* Usa la variable de peso de fuente */
    font-family: Poppins, sans-serif;
    font-size: 0.92rem;
    cursor: pointer; /* Hace que el cursor cambie a puntero al pasar */
    margin-top: 1.5rem;
    color: #a9bac6;
    
}

/* BOTÓN DE ACCESO (LOGIN)*/

.navigation .btn-access {
    padding: 0.6rem 1.5rem; /* Ajusta el tamaño del botón */
    background: transparent; /* Fondo transparente */
    border: 1px solid var(--third_color); /* Borde con el color definido en la variable */
    border-radius: 0.3rem; /* Bordes redondeados */
    color: var(--primary_color); /* Color de texto */
    font-family: var(--second_font); /* Fuente del botón */
    font-size: var(--normal_font); /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background 0.2s ease-in-out; /* Efecto suave al pasar el cursor */
    margin-top: 1.5rem;
}

.navigation .btn-access:hover {
    background: var(--third_color); /* Cambia el fondo al pasar el cursor */
}

.menu ul li a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Mantiene el color del texto por defecto o el heredado */
    font-weight: bold; /* Opcional: puedes hacer que el texto sea más llamativo */

}


.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Ajusta según la altura de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.overlay {
    padding: 20px;
    border-radius: 8px;
    font-family: Roboto, sans-serif;
}

.hero h1 {
    font-size: 3rem;
    color: white;
    font-weight: bold;
}

.hero p {
    color: white;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 10px auto;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 15px;
    border: 2px solid orange;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.btn:hover {
    background: orange;
    color: black;
}

.nosotros h3, h2{
    font-weight: bold;
    padding: 2rem;
    display: block;
    color: #30302f;
    font-family: Roboto, sans-serif;
    
}



.subtitulo {
    font-size: 32px !important;
    font-family: Roboto, sans-serif !important;
    color: #52565e !important;
    font-weight: 700 !important;
    text-align: center !important;
    position: relative !important;
    display: inline-block !important;
}

/* Estilos para las líneas decorativas */
.subtitulo::before,
.subtitulo::after {
    content: ""; 
    position: absolute; 
    top: 50%; 
    width: 60px; /* Ajusta el ancho de las líneas */
    height: 2px; 
    background-color: orange; 
}

/* Línea a la izquierda del subtítulo */
.subtitulo::before {
    left: -70px; /* Ajusta la posición de la línea izquierda */
}

/* Línea a la derecha del subtítulo */
.subtitulo::after {
    right: -70px; /* Ajusta la posición de la línea derecha */
}





/* Contenedor del subtítulo y la descripción */
.contenedor {
    text-align: center; /* Asegura que los elementos dentro del contenedor estén centrados */
    padding-top: 50px; /* Agrega espacio en la parte superior */
    /*background: #e5e5e8;*/
    border-bottom: 1px solid rgba(185, 157, 117, 0.198);
    
    
}

/* Estilos para la descripción debajo del subtítulo */
.descripcion {
    text-align: center; /* Centra el texto */
    color: #555; /* Color gris oscuro para el texto */
    margin: 10px 80px; /* Espaciado entre el subtítulo y la descripción */
    padding-bottom: 3rem;
}



.mision-vision {
    display: flex; /* Pone los elementos en una fila */
    justify-content: space-around; /* Distribuye los elementos uniformemente */
    align-items: flex-start; /* Alinea los elementos arriba */
    gap: 20px; /* Espacio entre los elementos */
    align-items: stretch; /* Hace que ambas se estiren a la misma altura */
    text-align: center;
    padding-bottom: 2rem;
}

.mision, .vision {
    width: 45%; /* Limita el ancho para que no ocupen toda la pantalla */
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados */
    color: #2e2d2b;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(36, 35, 35, 0.1);
}


/* Estilos para la sección de testimonios */
.section_testimonios {
    background: #eae6e1;
    padding: 50px 0;
    width: 100%;
    text-align: center;
}



.testimonios {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.testimonio {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.testimonio p {
    color: #555;
    font-style: italic;
    font-size: 14px;
}

.estrellas {
    color: #ffc107;
    font-size: 18px;
}

/* Responsivo */
@media (max-width: 768px) {
    .testimonios {
        flex-direction: column;
        align-items: center;
    }
}



/******MENÚ SECUNDARIO*********

.second-menu{
    width: 100vw ;
    height:70vh ;
    background: var(--second_color);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.second-menu.active{
    opacity: 1;
    visibility: visible;
    display: flex;
    background-color: rgb(13, 14, 14);
    justify-content: center;

    
    


    & .container1 .first-container{
       
        font-size: var(--medium_font);
        font-family: var(--second_font);
        padding-left: 5rem;
        
       
    }

    & .container1 .second-container{
       
        font-size: 0.8rem;
        font-family: var(--second_font);
        padding-left: 5rem;
        font-weight: 9px;
        display: grid;
        grid-template-columns:15fr 15fr;
        justify-content: center;
        font-family: var(--small_font);
    }

    & .container1 .first-container p{
        margin-top: 5px;
        font-style: cursive;
        cursor: pointer;
        transition: background-color 0.40s ease;

    }

    & .container1 p:hover {
        color: #5f5c5c;
    }

    & .container1 .second-container p{
        margin-top: 3px;
    }

    & .container1 .first-container .second-container p:hover{
        color: #5f5c5c;
        cursor: pointer;
    }

    & .container2{
        padding-top: 1rem;
        margin-bottom: 4.7rem;
    }

    & .container3{
        padding-top: 6px;
        padding-left: 50px;
        cursor: pointer;
        transition: background-color 0.40s ease;

        & .container3 i:hover {
            color: #5f5c5c;
        }
        
        & p{
            padding-top: 6px;
            font-size: 1.5rem;
        }

        & .parent-div i{
            color: #b99d75;
        }
        

        & .parent-div{
            gap:1.3rem;
        }

        & hr {
            border: none;
            height: 0.01rem;
            background-color: #817979; /* Color blanco */
            margin: 12px 0; /* Espaciado encima y debajo de la línea *
            margin-right: 6rem;
        }

        & .stay-connected i{
            margin: 0.5rem;
            margin-top: 17px;
        }

        & .stay-connected i:hover{
            color: #5f5c5c;
        }

        
        
    }


    

}

/******HERO SECTION**********

.hero-section{
    width: 100vw;
    height: 70vh;
    background: transparent;

}

.additional-containers {
    display: grid;
    grid-template-columns:22fr 18fr 18fr;
     
}



/*.additional-containers .first-container{
    justify-content: center;
    font-family: var(--medium_font);
    
}

.additional-containers .second-container{
    display: grid;
    grid-template-columns:15fr 15fr;
    justify-content: center;
    font-family: var(--small_font);
    
}