@font-face {
    font-family: 'Nexa Bold';
    src: url('../fuentes/Nexa-Bold.otf') format('opentype');
    font-weight: bold;
}
@font-face {
    font-family: 'Montserrat Bold';
    src: url('../fuentes/Montserrat-Bold.ttf') format('truetype');
    font-size: xx-large;
}
@font-face {
    font-family: 'Cocogoose Pro Darkmode trial';
    src: url('../fuentes/Cocogoose-Pro-Darkmode-trial.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat Semi bold';
    src: url('../fuentes/Montserrat-SemiBold.otf') format('opentype');
}
@font-face {
    font-family: 'Cocogoose Pro Italic Trial';
    src: url('../fuentes/Cocogoose-Pro-Italic-trial.ttf') format('truetype');
}
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color:white;
}
header img{
    width: 100%;
    max-width: 100%;
}
header h1{
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 70px;
    text-align: center;
    width: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 4px 4px 10px rgb(0 0 0);
    font-family: 'Nexa Bold', sans-serif;
}
b{
    color:#81c241;
}
.descripcion-proyecto{
    margin: 20px 100px;
}
.descripcion-proyecto h2{
    text-align: center;
    color: #203838;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 40px;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
}
.descripcion-proyecto .columns .column p{
    padding: 50px 80px;
    text-align: justify;
    line-height: 20px;
    font-family: 'Montserrat Bold', sans-serif;
    font-weight: 600;
}
.descripcion-proyecto .columns{
    display: flex;
    width: 100%;
    gap: 30px;
}
.descripcion-proyecto .columns .column{
    width: 50%;;
}
.descripcion-proyecto .columns .fotografias{
    background-color: #b8d79a;
    text-align: center;
    padding: 20px 0;
    height: max-content;
}
.descripcion-proyecto .fotografias .image-descripcion{
    transition: transform 0.3s ease-in-out;
}
.descripcion-proyecto .fotografias .image-descripcion:hover{
    transform: scale(1.1);
}
.descripcion-proyecto strong{
    font-weight: 600;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
.descripcion-proyecto img{
    width: 90%;
    margin: 10px;
    box-shadow: 10px 10px 16px 4px rgba(0, 0, 0, 0.5);
}
.descripcion-proyecto .columns{
    flex-wrap: wrap;
    gap: 0;
    margin-top: 20px;
}
.vecinos, .aventuras, .tour-virtual{
    background-color: #81c241;
    padding: 0 0 10px;
}
.vecinos h3{
    text-align: center;
    background-color: #203838;
    color: white;
    padding: 20px;
    font-family: 'Montserrat Bold', sans-serif;
    font-size: xx-large;
}
.vecinos .swiper .swiper-wrapper .contenedor-vecinos{
    width: 25% !important;
}
.aventuras .swiper .swiper-wrapper .contenedor-aventuras{
    width: 25% !important;
}
.aventuras h4{
    text-align: center;
    background-color: #203838;
    color: white;
    padding: 20px;
    font-family: 'Montserrat Bold', sans-serif;
    font-size: xx-large;
}
.tour-virtual h2{
    text-align: center;
    background-color: #203838;
    color: white;
    padding: 20px;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
}
.lotes h2{
    text-align: center;
    background-color: #203838;
    color: white;
    padding: 20px;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
}
.lotes .content-texto-lotes{
    background-color: #abd681;
    padding: 50px 100px;
    margin: 100px;
    font-family: 'Montserrat Semi bold', sans-serif;
}
.contacto .siguenos{
    background-color: #203838 ;
    padding: 20px;
} 
.contacto .siguenos .columns{
    display: flex;
    justify-content: space-evenly;
}
.contacto .siguenos .columna-siguenos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
}
.contacto .siguenos p{
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
    color:#81c241 ;
    margin-top: 10px;
    text-shadow: 4px 4px 10px rgb(0 0 0);
}
.contacto .siguenos a img{
    filter: brightness(0) saturate(100%) invert(96%) sepia(8%) saturate(151%) hue-rotate(225deg) brightness(118%) contrast(100%);
    width: 40px;
}
.contacto .siguenos .columns .column .siguenos-vertical{
    width: 80%;
    transition: transform 0.3s ease-in-out;
}
.contacto .siguenos .columns .column img:hover{
    transform: scale(1.1);
}
.contacto .contactanos .columns{
    display: flex;
    width: 100%;
}
.contacto .contactanos .columns .column{
    width: 50%;
}
.contacto .contactanos{
    padding: 50px 100px;
}
.contacto .contactanos h1, h4{
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
    color:#81c241;
}
.contacto .contactanos h4{
    text-align: center;
}
.contacto .contactanos li{
    font-family: 'Montserrat Semi bold', sans-serif;
}
.contacto .contactanos li::marker{
    color:#abd681;
    font-size: 25px;
}
.ubicacion{
    background-color: #c0e0a0;
}
.ubicacion .columns{
    display: flex;
    width: 100%;
}
.ubicacion .column{
    width: 50%;
}
.ubicacion h2{
    text-align: center;
    background-color: #203838;
    color: white;
    padding: 20px;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
}
.ubicacion .contenido-ubicacion{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.ubicacion .contenido-ubicacion strong{
    text-align: center;
    padding: 20px;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: x-large;
    color:#81c241;
}
.ubicacion .contenido-ubicacion p{
    font-family: 'Montserrat Semi bold', sans-serif;
    color:#203838;
}
form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 50px;
}
form .btn-enviar{
    background-color: #203838;
    color: white;
    font-weight: 800;
    margin: auto;
    display: block;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid green;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: large;
}
form input, textarea{
    padding: 10px;
    border-radius: 10px;
    border: 1px solid green;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: large;
    }
.areas-comunes h2{
    text-align: center;
    background-color: #203838;
    color: white;
    padding: 20px;
    font-family: 'Cocogoose Pro Darkmode trial', sans-serif;
    font-size: xx-large;
}
.container {
    width: auto;
    max-width: 100%;
    background-color: #c0e0a0;
    padding: 50px 100px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    text-align: center;
}
.container div:nth-last-child(2) {
    grid-column: 2; /* Ubica "Portería" en la segunda columna */
}

.container div:last-child {
    grid-column: 4; /* Ubica "Parqueadero" en la tercera columna */
}
.container .content-areascomunes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.icon-box {
    color: white;
    padding: 15px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-direction: column;
}

.icon-text {
    text-align: center;
    font-size: 14px;
    color: black;
    margin-top: 5px;
    font-family: 'Montserrat Semi bold', sans-serif;
}
footer{
    background-color: #203838;
}
footer img{
    width: 70%;
}
footer .columns{
    display: flex;
    justify-content: space-evenly;
    padding: 20px 100px;
}
footer .column{
    width: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
    color: white;
}
footer li{
    list-style: none;
    font-family: 'Cocogoose Pro Italic Trial',sans-serif;
    line-height: 40px;
}
footer .wpp, .correo, .instagram{
    display: flex;
    align-items: center;
}
footer .wpp::before{
    content: '';
    background-image: url(../images/icono-whatsapp.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    filter: brightness(0) saturate(100%) invert(69%) sepia(19%) saturate(1259%) hue-rotate(48deg) brightness(96%) contrast(91%);
}
footer .correo::before{
    content: '';
    background-image: url(../images/icono-correo.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    filter: brightness(0) saturate(100%) invert(69%) sepia(19%) saturate(1259%) hue-rotate(48deg) brightness(96%) contrast(91%);
}
footer .instagram::before{
    content: '';
    background-image: url(../images/Icono-instagram.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    filter: brightness(0) saturate(100%) invert(69%) sepia(19%) saturate(1259%) hue-rotate(48deg) brightness(96%) contrast(91%);
}
/* ESTILOS PARA EL SLIDER */
.swiper{
    padding: 50px 100px!important;
}
.swiper-wrapper{
    padding: 0 20px;
}
.swiper-button-prev {
    background-image: url('../images/flecha-slider.png'); /* Reemplaza con la ruta de tu icono */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px !important; 
    height: 50px !important;
    transform: rotate(180deg);
}
.swiper-button-next{
    background-image: url('../images/flecha-slider.png'); /* Reemplaza con la ruta de tu icono */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px !important; 
    height: 50px !important;
}
/* Ocultar la flecha original */
.swiper-button-prev::after, .swiper-button-next::after {
    display: none;
}
/* ESTILOS PARA EL SLIDER */

/* ESTILOS RESPONSIVE */
@media screen and (max-width: 1024px) {
    header h1 {
        color: white;
        position: absolute;
        top: 16%;
        left: 50%;
        text-align: center;
        width: 100%;
        transform: translate(-50%, -50%);
        text-shadow: 4px 4px 10px rgb(0 0 0);
        font-family: 'Nexa Bold', sans-serif;
        font-size: xx-large;
    }
    .descripcion-proyecto{
        margin: 10px;
        .columns{
            flex-direction: column;

            .column{
                width:100%;
                p{
                    padding: 20px;
                }
            }
        } 
    }
   .vecinos .swiper .swiper-wrapper .contenedor-vecinos {
        width: 100% !important;
        display: flex;
    }
    .aventuras .swiper .swiper-wrapper .contenedor-aventuras {
        width: 100% !important;
    }
    .swiper{
        width: 100%;
        padding: 0 !important;
    }
    .lotes .content-texto-lotes {
        background-color: #abd681;
        padding: 50px;
        margin: 0;
        font-family: 'Montserrat Semi bold', sans-serif;
    }
    .contacto .siguenos .columns{
            display: flex;
            flex-direction: column;
    }
    .contacto .siguenos .columns .column{
        margin: auto;
    }
    .contacto .contactanos{
        padding: 50px;
    }
    .contacto .contactanos .columns{
        flex-direction: column;
    }
    .contacto .contactanos .columns .column{
        width: 100%;
    }
    .ubicacion .columns{
        flex-direction: column;
    }
    .ubicacion .columns .column{
        width: 100%;
    }
    .ubicacion .columns .column .mapa{
        width: 100%;
        max-width: 100%;
    }
    .ubicacion .contenido-ubicacion{
        margin-top: 100px;
    }
    footer .columns{
        flex-direction: column;
        padding: 20px;
    }
    footer .columns .column{
        width: 100%;
    }
    .container div:last-child {
        grid-column: 1;
    }
    .container {
        width: auto;
        max-width: 100%;
        background-color: #c0e0a0;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        text-align: center;
    }
    .contacto .siguenos .columns .column .siguenos-vertical{
        display: flex;
        margin: auto;
    }

}
/* ESTILOS RESPONSIVE */