/**** ESTILOS BASE DEL TEMPLATE  ****/
@import url('assets/css/style.css');
@import url('assets/css/responsive.css');


/** MENU ***/
@import url('assets/css/menu.css');



/*** ICONOS  ******/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/*** SWEETALERT  ******/
@import url('assets/css/terceros/sweetalert2.css');



/****       FUENTES PROPIAS     ****/
@font-face { font-family: backtoback; src: url("fuente/Back to Black Demo.ttf") format('truetype'); }
@font-face { font-family: bariol; src: url("fuente/Bariol.ttf") format('truetype'); }
@font-face { font-family: bariol_bold; src: url("fuente/Bariol_Bold.otf") format('opentype'); }




/*** ADAPTACION BOOTSTRAP a V5  ***/
/* Margins */
.m-0  { margin: 0 !important; }
.m-1  { margin: 4px !important; }
.m-2  { margin: 8px !important; }
.m-3  { margin: 16px !important; }
.m-4  { margin: 24px !important; }
.m-5  { margin: 48px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 48px !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 16px !important; }
.mr-4 { margin-right: 24px !important; }
.mr-5 { margin-right: 48px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 48px !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 16px !important; }
.ml-4 { margin-left: 24px !important; }
.ml-5 { margin-left: 48px !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.mx-3 { margin-left: 16px !important; margin-right: 16px !important; }
.mx-4 { margin-left: 24px !important; margin-right: 24px !important; }
.mx-5 { margin-left: 48px !important; margin-right: 48px !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
.my-5 { margin-top: 48px !important; margin-bottom: 48px !important; }


.m-auto { margin-left: auto !important;  margin-right: auto !important;}
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* Paddings */
.p-0  { padding: 0 !important; }
.p-1  { padding: 4px !important; }
.p-2  { padding: 8px !important; }
.p-3  { padding: 16px !important; }
.p-4  { padding: 24px !important; }
.p-5  { padding: 48px !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 16px !important; }
.pt-4 { padding-top: 24px !important; }
.pt-5 { padding-top: 48px !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 4px !important; }
.pr-2 { padding-right: 8px !important; }
.pr-3 { padding-right: 16px !important; }
.pr-4 { padding-right: 24px !important; }
.pr-5 { padding-right: 48px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 16px !important; }
.pb-4 { padding-bottom: 24px !important; }
.pb-5 { padding-bottom: 48px !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 4px !important; }
.pl-2 { padding-left: 8px !important; }
.pl-3 { padding-left: 16px !important; }
.pl-4 { padding-left: 24px !important; }
.pl-5 { padding-left: 48px !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.px-4 { padding-left: 24px !important; padding-right: 24px !important; }
.px-5 { padding-left: 48px !important; padding-right: 48px !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }

/* ROW FLEXIBLE */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* COLUMNAS BÁSICAS */
.col {
    flex: 1 0 0%;
    padding-left: 15px;
    padding-right: 15px;
}

[class^="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* COLUMNAS FIJAS (igual que Bootstrap 5) */
.col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3  { flex: 0 0 25%;        max-width: 25%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6  { flex: 0 0 50%;        max-width: 50%; }
.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9  { flex: 0 0 75%;        max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%;       max-width: 100%; }

/* COLUMNAS RESPONSIVE */
@media (min-width: 576px) {
    .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* FLEXIBLE ROW COMPATIBLE */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* COLUMNAS BASE */
.col {
    flex: 1 1 0%;
    min-width: 0;
    padding-left: 15px;
    padding-right: 15px;
}

/* COLUMNAS AUTO ANCHO */
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/*** MENU ***/






/*** PERSONALIZACION ***/

.bg-amarillo {
    background-color: #ffd500 !important;
}
.bg-gray80 {
    background-color: #333333 !important;
}
.bg-gray50 {
    background-color: #808080 !important;
}
.bg-gray30 {
    background-color: #e6e6e6 !important;
}

.bg-black {
    background-color: #000000 ;
}
.text-amarillo {
    color: #ffd500 !important;
}
.text-amarillo-hover:hover {
    color: #ffd500 !important;
}
.text-black {
    color: #000000 !important;

}


.request-a-qoute form.contact-form textarea {
    height: auto !important;
}

.header-home-three .header-navigation .container {
    background-color: #e6e6e6 !important;
}

.gallery-filter .post-filter .filter span {
    color:#cccccc !important;
}

.gallery-filter .post-filter .active span {
    color:#ff6a26 !important;
}


.site-main-menu > ul > li > a > .menu-text {
    font-family: 'bariol' !important;
}
.slider-home-two .content h2 {
    font-family: 'bariol_bold' !important;
}
.slider-home-two .content p {
    font-family: 'bariol' !important;
    font-size: 25px !important;
}

#galeria {
    background-image: url("assets/img/bg-galeria.jpg");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#unidades .piso {
    width: 100%;
    height: auto;
    position: relative;
    cursor: pointer;
}
#unidades .piso img{
    opacity: .75;
    z-index: 1;
}
#unidades .piso:hover img{
    opacity: 1;

}

#unidades .sec-title h3 {
    font-family: 'bariol_bold' !important;
}




#unidades .piso .placa {
    width: 100%;
    min-height: 100%;
    border-radius: 0.5rem;
    position: absolute;
    overflow: hidden;
    top: 0px;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Opcional: centra horizontalmente */
    font-size: 30px;
    color: #333333;
    font-family: 'bariol_bold';
}
#unidades .piso:hover .placa {
    background-color: #eaeaea;
}

.btn_general {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #ff6a26;
    width: 149px;
    height: 45px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Heebo';
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 45px;
    color: #fff !important;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    cursor: pointer;
}

#contacto {
    background-image: url("assets/img/bg-contacto.jpg");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#contacto .sec-title h3 {
    font-family: 'bariol_bold' !important;
}


#contacto .contactoDato {
    font-family: 'bariol';
}

#contacto .contactoDato .contactoWp{
    color:  #ff6a26;
    font-size: 25px;
}


#contacto .contactoDato .contactoNum{
    color: #cbcbcb;
    font-size: 16px;
}

.request-a-qoute form.contact-form input.error, .request-a-qoute form.contact-form textarea.error {
    background-color: none !important;
}

#contacto .form_contacto input, textarea {
    width: 100%;
    padding: 10px 15px;
    outline: none;
    background-color: rgba(255,255,255,.75);
    border: none;
}

#contacto .form_contacto label{
    width: 100%;
    color: #d0d0d0;
    font-size: 15px;
    line-height: 18px;
    font-family: bariol;
    margin-top: 10px;
}