/*--------------------------------
    
            ?GENERALES
        
 ----------------------------------*/ 

:root {
    --primary: hsl(60, 10%, 10%);
    --secondary: hsl(0, 10%, 100%);
    --tertiary: hsl(0, 10%, 90%);
}

a {
    text-decoration: none;
    color: #000;
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--tertiary);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
 
}

p , h1 , h2 , li  {
    font-family: "Open Sans", sans-serif;
    font-size: 1.8rem;
    color: var(--primary);
    line-height: 1.5;
    margin-bottom: 30px;
}


.btn {
    width: 200px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(to right, #25D366, #128C7E);
    color: #f0f0f0;
    font-weight: bold;
    cursor: pointer;
}

/*--------------------------------
    
            ?HEADER
        
 ----------------------------------*/ 


.header_container {
    position: relative;
    width: 100vw;     
    display: flex;
    flex-direction: column;
    justify-content: space-around;  
    color: var(--secondary); 
}

.header_container__up {
    display: flex;
    justify-content: space-between;
    align-items: center;    
    padding: 10px 0;
    height: 100%; 
    gap: 10px;
}

.header_main_burguer {
    display: none;
    width: 50px;
    height: 50px;
}

.header_main_burguer line {
    width: 50px;
    height: 10px;
    color: var(--secondary);
}


.header_container__up-left {
    margin-left: 50px;      
}

.header_container__up-left img {
    height: 100px;
    width: auto;    
}

.header_container__up-center p {
    color: var(--secondary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 3rem;
    font-weight: bold;
    max-width: 80vw;
    margin-bottom: 0;
    text-align: center;
}

.header_container__up-right .btn {
    margin-right: 50px;
}

.header_container__down {
    width: 100%;
    justify-content: center;
    margin: 0 auto;
}

.header_container__down-ancla {
    padding: 10px;
    display: flex;
    flex-direction: row;
    background:transparent;
    padding-right: 50px;
    justify-content: center;    
    border-top: 2px solid rgba(0, 0, 0, 0.7); 
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);   
}

.header_container__down-ancla a {
    display: flex;
    background: var(--tertiary);
    border: 0.5px solid transparent; 
    border-bottom: 3px solid transparent;     
    align-items: center;
    color: rgba(0, 0, 0, 0.7);
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;    
    padding: 5px;
    font-size: 1.2rem;
    font-family: "Open Sans", sans-serif;
}

.header_container__down-ancla a:hover {   
    border-bottom: 3px solid rgba(0, 0, 0, 0.7);   
}

.header_container__down-ancla a:nth-child(3) {
    position: relative;
}

.header_container__down-ancla a:nth-child(3) .list_product {   
    display: none ;
    position: absolute;
    top: 35px;
    left: 0;
    background-color: #ffffff;
    list-style: none;
    width: 200px;
    padding: 10px;
    border-radius: 10px;
}

.header_container__down-ancla a:nth-child(3) .list_product li {
    margin: 5px;
}

.header_container__down-ancla a:nth-child(3) .list_product li:hover {
    opacity: 0.5;
}

@media (max-width: 600px) {

    .header_container {
        flex-direction: row;
        position: relative;
        align-items: center;
    }

    .header_main_burguer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 50px;        
        margin-left: 20px;
    }

    .header_main_burguer .line {
        width: 50px;
        height: 5px;
        background-color: var(--secondary);
        margin: 2px 0;
        border-radius: 5px;
    }

    .header_container__up {
        justify-content: center;
    }

    .header_container__up p {
        font-size: 1rem;
    }

    .header_container__up-left{
        display: none;
    }

    .header_container__up-right {
        display: none;
    }

    .header_container__down {
        position: absolute;
        top: 106px;
        left: 0;
        z-index: 200;  
        max-width: 400px;      
    }

    .header_container__down-ancla {
        display: none;
        flex-direction: column;
        background-color: var(--tertiary);
        border-top: none;        
        min-height: 100vh;
    }

    .header_container__down-ancla a {
        box-shadow: none;
        background: transparent;
        height: 50px;
        border-radius: 0;
    }

    .header_container__down-ancla a:hover {
        border-bottom: 1px solid #000;       
    }
}


@media (max-width: 1000px) {

    

    .header_container__up {       
        text-align: center;
        margin: 0 10px;         
    }

    .header_container__up-left {
        margin-left: 0;
    }   

    .header_container__up p {
        font-size: 1.8rem;
        margin-bottom: 0;
        font-weight: bold;
    }

    .header_container__up-right .btn {
        margin-right: 0;
        width: 100px;
        font-size: 0.6rem;
    }

    .header_container__down-ancla a {
        font-size: 0.8rem;
        text-align: center;
    }

    .header_container__down-ancla {
        padding-right: 0;
    }

    .header_container__up-left img {
        height: 50px;
        
    }
}



/*---------------------------------

   ?Estilos SLIDER

 ------------------------------------*/


.slider_container {   
    width: 100vw;  
    max-width: 1200px;
    height: 200px; 
    display: flex;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;   
}

.slider_container_elements {
    display: flex;  
    width: 100%;  
    transition: transform 0.5s ease;
}

.slider {    
    display: flex;
    justify-content: center;
    align-items: center;   
    transform: translateX(-000%); 
    border-radius: 10px;
}

.slider1 {
    background-image: url("./Images/paisaje.jpg");
    background-size: cover;
    background-position: center;
}

.slider2 {
    background-image: url("./Images/wellness.jpg");
    background-size: cover;
    background-position: center;
}

.slider3 {
    background-image: url("./Images/assisted_living_1.jpg");
    background-size: cover;
    background-position: center;
}

.slider4 {
    background-image: url("./Images/assisted_living.jpg");
    background-size: cover;
    background-position: center;
}


.slider img {    
    width: 90vw;
    height: 100%;
    object-fit: cover;
    object-position: bottom left;        
}

.slider h2 {  
    width: 100vw;
    max-width: 1200px;
    font-size: 4rem;
    color: #ffffff;    
    text-align: center;
    margin: auto;
    border-radius: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}






/*---------------------------------

   ?Estilos MAIN

 ------------------------------------*/


.main_container {
    width: 100vw;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;    
}








/*---------------------------------

    ?BOTÓN CONTACTO

 ------------------------------------*/


.btn_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(to right, #25D366, #128C7E);
    font-weight: bold;
    margin: 50px auto;
    cursor: pointer;
}


.btn_contact a {
    color: #f0f0f0;
}



/*---------------------------------

    ?HERO Tarjetas de productos

 ------------------------------------*/

 /*Estilos para los titulos H1*/

.title {  
    color: var(--secondary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 4rem;
    text-align: center;
    margin-bottom: 50px;
} 

@media (max-width: 1000px) {
    .title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}



.hero_container {   
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .hero_container {
       flex-direction: column; 
       justify-content: center;
       align-items: center;
    }
}




.hero_container .category_container, .hero_container .city_container {
    width: 200px;   
    height: max-content;
    padding: 10px;
    border-radius: 10px;
    margin: 30px;
}

@media (max-width: 900px) {
    .hero_container  .category_container {
       width: 90%;   
       margin: 30px auto;
    }

    .list_category li {
        text-align: center;
    }
}


.category_title , .city_title {
    width: 100%;
    font-size: 1.4rem;
    margin-bottom: 10px;
    box-shadow: 5px 4px 4px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    background-color: var(--tertiary);
    padding: 5px;
    text-align: center;
}

.hero_container .category_image {   
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    margin: 0 auto;
    width: 100vw;
    max-width: 700px;
    margin: 30px auto;
    justify-content: center;
}

@media (max-width: 1000px) {
    .hero_container .category_image {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

.category_container, .city_container {
    position: relative;
}


.list_category, .list_city {
    list-style: none;
    padding: 0 10px;    
}

.list_category li , .list_city li {
    margin: 10px auto;
    border-radius: 10px;
    padding-left: 10px;
    font-size: 1.2rem;
    font-weight: 400;
    cursor: pointer;
    text-decoration: underline
}

.list_category li:nth-child(1):hover {
    background-color: rgb(204, 7, 7);
}

.list_category li:hover::before {    
    background-color: #fff;
    position: absolute;    
    border-radius: 10px;
    width: max-content;
    padding: 5px;
    left: -20px;
}

.list_category li:nth-child(1):hover::before {    
    content: "Bienestar y Servicios Hoteleros.";
    top: 20px;
}

.list_category li:nth-child(2):hover::before {    
    content: "Vida Plena Independiente.";
    top: 50px;    
}

.list_category li:nth-child(3):hover::before {    
    content: "Permanente Asistencia en Salud.";
    top: 90px;   
}

.list_category li:nth-child(4):hover::before {    
    content: "Espacios Amoblados con Servicios Incluidos.";
    top: 130px; 
    left: -80px;   
}

.list_city li:hover::before {    
    background-color: #fff;
    position: absolute;    
    border-radius: 10px;
    width: max-content;
    padding: 5px;
    left: -20px;
}

.list_city li:hover {
    background-color: rgb(130, 126, 126);
}


.list_city li:nth-child(1):hover::before {    
    content: "Servicios de alojamiento en Bogotá.";
    top: 20px;
}

.list_city li:nth-child(2):hover::before {    
    content: "Servicios de alojamiento en Medellin.";
    top: 50px;    
}

.list_city li:nth-child(3):hover::before {    
    content: "Servicios de alojamiento en Pereira.";
    top: 90px;   
}


.list_category li:nth-child(2):hover {
    background-color: rgb(194, 194, 9);
}

.list_category li:nth-child(3):hover {
    background-color: rgb(6, 163, 6);
}

.list_category li:nth-child(4):hover {
    background-color: rgb(0, 128, 255);
}

.hero_container__card {
    width: 200px;  
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background-color: hsl(0, 10%, 100%);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
}

.hero_container__card:hover {
    scale: 1.05;
    opacity: 0.5;
}

.hero_container__card-img {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-bottom: 1px solid var(--primary);
}

.hero_container__card-img::before {
    position: absolute;
    font-family: "Open Sans", sans-serif;
    rotate: -40deg;
    top: 30px;
    left: -40px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 100;
    color: white;
    font-size: 1rem;   
    width: 100%;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.irotama::before {
    content: "WELLNESS LIVING";   
    background-color: rgb(204, 7, 7);
}

.plazau::before {
    content: "COLIVING";    
    background-color: rgb(0, 128, 255);    
}

.caluce:before {
    content: "ASSISTED LIVING";      
    background-color: rgb(6, 163, 6);  
}

.alqueria:before {
    content: "SENIOR LIVING";     
    background-color: rgb(194, 194, 9);  
}

.hero_container__card-img img {
    position: relative;
    object-fit: cover;
    width: 200px;
    height: 100%;
}

.hero_container__card-title,
.hero_container__card-info {
    text-align: center;
    margin: 10px;
}


.hero_container__card-title h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.hero_container__card-title p {
    font-size: 1rem;
    margin-bottom: 10px;
}

.hero_container__card-title p:nth-child(3) {
    font-weight: 700;
    text-decoration: underline;
    margin-bottom: 10px;
}

.hero_container__card-title p:nth-child(4) {
    text-align: center;
    font-size: 1.2rem;
}


.hero_container__card-btn {
    display: flex;
    margin-top: 5px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 5px;
    width: 70px;
    height: 30px;
    margin: 10px 10px 10px auto;
}

.hero_container__card-btn p {
    color: var(--primary);
    font-weight: bold;
    font-size: 1rem;   
}

.hero_container__card-btn a:hover {
    background-color: #000;
    color: #f0f0f0;
}

.hero_container__card-btn img {
    width: 20px;
    height: 100%;
    margin-right: 5px;
}

.hero_container__card-btn a {
   text-decoration: none;
   color: #000;
   font-weight: bold;
}















/*-------------------------------------------

    ?Descripción Que es un COLIVING WELLNESS?

 --------------------------------------------*/


 .description_container img {
    height: 400px;
 }

 .description_container__coliving_wellness {
    display: flex;
    flex-direction: column;    
    max-width: 80vw;
    margin: 50px auto;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 50px;
    background-color: hsl(0, 10%, 100%);   
    background-repeat: no-repeat;
    background-size: cover;   
 }

 .description_container__coliving_wellness h2 {
    font-size: 3rem;
    margin-bottom: 30px;
 }

 .description_container__coliving_wellness p {
    margin-bottom: 30px;
 }

 .description_container__coliving_wellness p, h2 {
    color: rgba(0, 0, 0, 0.7);    
 }

.description_container__coliving_wellness-includes-services {
    display: flex;
    justify-content: space-around;
}


@media (max-width: 1000px) {
    .description_container__coliving_wellness h2 {
        font-size: 1.4rem;
    }
    
    .description_container__coliving_wellness p {
        font-size: 1rem;
    }

    .description_container img {
        height: 200px;
    }

    .description_container__coliving_wellness p {
        margin-bottom: 10px;
    }
}







/*-----------------------------------------------

    ?Botón de chatea con Nosotros

 -----------------------------------------------*/


.chat_with_us {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
}

.chat_with_us:hover{
    scale: 1.2;
}

.chat_with_us p {
    font-size: 0.8rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0;
}

.chat_with_us img {
    width: 100%;
}








/*-----------------------------------------------

    ?Estilos Plaza U Comunidad Joven

 -----------------------------------------------*/

 .product_container {
    display: flex;
    justify-content: space-between;
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    text-align: center;
 }

 .product_container__description , .product_container__video {
    max-width: 500px;
 }

 .product_container__description h2 {
    font-size: 3rem;
    margin-bottom: 50px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: var(--secondary);
    justify-content: center;
 }

 .product_container__description .descarga-pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(to right, #25D366, #128C7E);
    color: #f0f0f0;
    font-weight: bold;
    margin: 30px auto;
    text-decoration: none;
 }

 .product_container__description .descarga-pdf:hover {
    scale: 1.2;
    text-decoration: underline;
 }

 .product_container__video {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
 }

 .product_container__video h2 {
    width: 50vw;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: var(--secondary);
    font-size: 2.4rem;
 }

 .product_container__video iframe {
    width: 100%;
    min-height: 300px;
    border-radius: 10px;
 }

 .product_container__video .btn {
    position: absolute;
    bottom: -50px;
    right: -200px;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(to right, #25D366, #128C7E);
    color: #f0f0f0;
    font-weight: bold;
    margin-right: 50px;
 }

 @media (max-width: 1000px) {
    .product_container {
        flex-direction: column;
    }

    .product_container__description h2 ,  .product_container__video h2{
        font-size: 1.4rem;
    }

    .product_container__description p {
        font-size: 1rem;
    }
}



/*-------------------------------------------

    ?Estilos IROTAMA

 --------------------------------------------*/

 .container_irotama {
    justify-content: center;
    max-width: 100vw; 
    margin: 50px auto;
  }

  .irotama_video {
    max-width: auto; 
    height: auto;
  }

  .irotama_video video {
    width: 100%;   
  }















 /*-----------------------------------------------

    ?Estilos de Conoce colombia.

 -----------------------------------------------*/

.conoce_colombia_container {
    justify-content: center;
    margin: 0 auto 50px auto;
}


.conoce_colombia_container iframe {
    width: 80vw;
    min-height: 500px;
}





 /*-----------------------------------------------

    ?Estilos Por qué en Colombia.

 -----------------------------------------------*/

 .por_que_colombia_container {
    padding: 0 50px;
 }

 .por_que_colombia_container .msg_banner {
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 10px 20px;
    text-align: center;
    font-weight: 700;
 }

 .por_que_colombia_container p {
    margin-bottom: 50px;
 }


 .subtitle {    
    text-align: start;
    color: #000;    
    font-size: 3rem;
 }

 .acogedor {
    font-size: 2rem;
    color: #000;
    text-decoration: underline;
 }

 .list_country {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    margin:50px 0;
}

.list_country p {
    width: calc(33.33% - 20px); 
    margin: 0;
}

.list_country p span {
    font-weight: bold;
}

.text_articulo {
    text-align: center;
    font-weight: 700;
 }











 /*-----------------------------------------------

    ?Estilos Formulario Contactanos

 -----------------------------------------------*/


 .main_container_form {
    display: flex;
    margin: 0 auto 50px;
 }

 .form {
    display: flex;
    margin: 0 auto;
 }


.form_data_container {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_data_container h2 {
    display: flex;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    margin: 20px 0;
}

.form_element_container {
    display: flex;   
    justify-content: center;
    gap: 30px; 
}

.form_element_container label {
    margin: 10px 0;
}

.form_element_container input {
    border-radius: 10px;
    height: 30px;
    padding: 10px;
}

.form_element_container .input_mensaje {
    max-width: 630px;
    height: 180px;
    display: flex;
    justify-content: flex-start;
    align-items: start;
}

.form_section {
    display: flex;
    flex-direction: column;
    width: 25vw;
    max-width: 300px;    
}

.prompt {
    display: flex;
    flex-direction: column;
    width: 100%;    
}

.form_data_container .btn { 
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}















 /*-----------------------------------------------

    ?Estilos Footer

 -----------------------------------------------*/


#footer {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    border-top: 2px solid rgba(0, 0, 0, 0.7);
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
}

.footer_description {
    margin: 20px 50px;   
}

.footer_description p {
    margin: 10px 0;
    font-size: 1rem;
}

.footer_description p:nth-child(3) {
    text-decoration: underline;
    cursor: pointer;
}

.footer_logo_container {
    display: flex;
    align-items: center;
    margin: 20px 50px;
    font-size: 1rem;
}

.footer_logo_container img {
    width: 100px;
}

@media (max-width: 1000px) {

    #footer {             
        justify-content: space-between;        
    }

    .footer_description {
        margin: 10px 5px 10px 50px;      
    }
    

    .footer_description p {
        font-size: 0.8rem;
        text-align: start;
    }

    .footer_logo_container {
        justify-content: center;
        margin: 10px 50px;   
    }

    .footer_logo_container img {
        width: 50px;
    }
}