/* =========================================================
   CSS PREPARADO PARA BALCONES URZUA
	DISEÑO WEBWORKS.CL 27 MAY 26
========================================================= */

html{
    scroll-behavior:smooth;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{

    font-family:'Montserrat', sans-serif;
    background:#fff;
    overflow-x:hidden;
}
a{
    text-decoration:none;
	
}
ul{
    list-style:none;
}

.hero{

    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:5px 10%;
    z-index:9999;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,.18);
    border-bottom:1px solid rgba(255,255,255,.12);
    transition:.35s ease;
    overflow:hidden;
}


.navbar::before{

    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(../images/concrete-wall-scratched-material-background-texture-concept.webp) center center / cover no-repeat;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:.35s ease;
    z-index:-1;
}


.navbar.scrolled{
    background:rgba(0,0,0,.45);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar.scrolled::before{
    opacity:1;
}

.logo img{
    width:100px;
}

.menu{
    display:flex;
    gap:45px;
}
.menu a{
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:.3s;
    position:relative;
}

.menu a:hover{
    color:#d93025;
}

.menu a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:#d71920;
    transition:.3s ease;
}

.menu a.active::after{

    width:100%;
}

/* =========================================================
   SWIPER
========================================================= */

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{

    width:100%;
    height:100%;
}

.heroSwiper{

    position:relative;
    z-index:1;
}

.swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.5s ease;

    opacity:.35;

    transform:scale(.72);
}

.swiper-slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    animation:zoomHero 12s linear infinite;

    filter:
            brightness(.90)
            contrast(1.05)
            saturate(.95);
}

@keyframes zoomHero{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }
}

/* =========================================================
   OVERLAY
========================================================= */

.slide-overlay{

    position:absolute;
    inset:0;

    z-index:2;

    background:

            radial-gradient(
                    circle at center,
                    rgba(255,255,255,.05) 0%,
                    rgba(0,0,0,.10) 35%,
                    rgba(0,0,0,.55) 100%
            );
}

/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content{

    position:absolute;

    left:80px;
    bottom:120px;

    z-index:20;

    color:#fff;

    opacity:0;
    transform:translateY(40px);

    transition:1s;
}

.swiper-slide-active .hero-content{

    opacity:1;
    transform:translateY(0);
}

.hero-content h1{

    font-size:48px;
    font-weight:800;

    line-height:1;

    margin-bottom:12px;

    text-transform:uppercase;
}

.hero-content h2{

    font-size:18px;
    font-weight:600;

    letter-spacing:2px;
    text-transform:uppercase;

    margin-bottom:15px;
}

.hero-content p{

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;
    text-transform:uppercase;
}

/* =========================================================
   CONTACTO
========================================================= */

.hero-contact{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    z-index:40;

    background:rgba(0,0,0,.78);

    border-top:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(5px);

    padding:12px 0;
}

.contact-container{

    position:relative;

    width:100%;
    max-width:1200px;

    margin:auto;

    padding:0 40px;
}

.contact-title{

    text-align:center;

    color:#fff;

    font-size:11px;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

    margin-bottom:10px;
}

.contact-form{

    display:flex;
    align-items:center;
    gap:10px;
}

.contact-form input{

    flex:1;

    height:34px;

    background:rgba(0,0,0,.65);

    border:1px solid rgba(255,255,255,.55);

    padding:2px 12px;

    color:#fff;

    font-size:11px;

    outline:none;

    transition:.3s;
}

@media (max-width: 768px) {
    .contact-form input {
        padding:10px 12px !important;
    }
}

.contact-form input::placeholder{

    color:rgba(255,255,255,.65);
}

.contact-form input:focus{

    border-color:#fff;

    box-shadow:0 0 8px rgba(255,255,255,.25);
}

.contact-form button{

    height:34px;
    padding:0 28px;
    border:none;
    background:#d93025;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.3s;
	border-radius: 15px;
}

.contact-form button:hover{

    background:#b71c1c;
}

/* =========================================================
   PAGINATION
========================================================= */

.swiper-pagination{

    position:absolute;

    bottom:20px !important;

    right:55px !important;

    left:auto !important;

    transform:none !important;

    width:auto !important;

    z-index:9999 !important;

    display:flex;
    align-items:center;
}

.swiper-pagination-bullet{

    width:9px;
    height:9px;

    background:#fff;

    opacity:.55;

    margin:0 5px !important;

    transition:.3s;
}

.swiper-pagination-bullet-active{

    opacity:1;

    transform:scale(1.15);

    background:#fff;
}


/* =========================================================
   INFO CONTACTO
========================================================= */

.contact-info{

    margin-top:10px;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;

    color:#fff;

    font-size:11px;
    font-weight:500;

    letter-spacing:.5px;

    text-align:center;
}

.contact-info .separator{

    opacity:.45;
}


/* =========================================================
   SECCION PROYECTO
========================================================= */

.section-content{

    scroll-margin-top:120px;
}


.proyecto-section{

    position:relative;

    width:100%;

    overflow:hidden;
}

/* =========================================================
   IMAGEN
========================================================= */

.panel-image{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;
}

.panel-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    filter:
            brightness(.72)
            contrast(1.05)
            saturate(.95);
}

/* =========================================================
   OVERLAY
========================================================= */

.panel-overlay{

    position:absolute;
    inset:0;

    background:

            linear-gradient(
                    to bottom,
                    rgba(0,0,0,.45),
                    rgba(0,0,0,.25),
                    rgba(0,0,0,.55)
            );
}

/* =========================================================
   CONTENIDO
========================================================= */

.panel-content{

    position:absolute;
    top:46%;
    left:50%;
    transform:translate(-50%, -50%);
    width:90%;
    max-width:1100px;
    text-align:center;
    color:#fff;
    z-index:5;
}

.panel-content p{
    font-size:20px;
    line-height:1.95;
    margin-bottom:45px;
    font-weight:500;
    letter-spacing:.2px;
    text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.panel-content p:last-child{
    margin-bottom:0;
}



/* =========================================================
   PLANTAS
========================================================= */

.plantas-section{
    background:#fcfbfc;
    position:relative;
}

/* =========================================================
   CONTENEDOR
========================================================= */

.plantas-container{

    width:90%;
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:80px;
	padding: 80px;
}

/* =========================================================
   TITULOS
========================================================= */
.plantas-left, 
.plantas-right {
    flex: 1;
    min-width: 0;
}

.plantas-left h2{

    font-size:42px;

    font-weight:500;

    letter-spacing:1px;

    color:#111;

    margin-bottom:0;
}

.subtitle{

    display:block;

    font-size:18px;

    letter-spacing:3px;

    color:#444;

    margin-bottom:45px;
}

/* =========================================================
   TABLA
========================================================= */

.superficies-table{

    width:100%;
    max-width:100%;
}

/*.row-item{

    display:flex;
    justify-content:space-between;

    gap:30px;

    padding:6px 0;

    border-bottom:1px solid #444;
}*/

.row-item span{

    font-size:18px;
	 text-align: left;
    color:#111;
}

.row-item {
    display: grid;
    /* Divide la fila en dos columnas: la primera ocupa el 60% y la segunda el 40% */
    grid-template-columns: 60% 40%; 
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #444;
}


/* =========================================================
   LISTA
========================================================= */

.plantas-right ul {
    list-style-type: disc; 
    padding-left: 25px;
}

.plantas-right li {
    font-size: 20px;
    color: #111;
    margin-bottom: 22px;
    line-height: 1.6;
}

.plantas-right li::marker {
    color: #ef2b1f;
}

/* =========================================================
   TABS
========================================================= */

.pisos-tabs{

    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    overflow:hidden;
}

.pisos-tabs button{

    width:150px;
    height:50px;
    border:none;
    background:#bdbdbd;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
}

.pisos-tabs button.active{

    background:#4a4a4a;
}

/* =========================================================
   BOTONES
========================================================= */

.plantas-buttons{
    display:flex;
    justify-content:center;
    gap:60px;
}

.plantas-buttons a,
.plantas-buttons button{

    display:flex;
    justify-content:center;
    align-items:center;
    width:260px;
    height:58px;
    border:none;
    border-radius:15px;
    background:#4a4a4a;
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    transition:.3s;
}

.plantas-buttons a:hover,
.plantas-buttons button:hover{
    transform:translateY(-3px);
    background:#222;
}


.plantas-dinamicas .pisos-tabs{
    margin-bottom:50px;
}

.plantas-cotizar{
    display:flex;
    justify-content:center;
    margin:30px;
}

.btn-cotizar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 36px;
    background:#ef2b1f;
    color:#fff;
    font-size:20px;
    font-weight:700;
    text-decoration:none;
    border-radius:60px;
    transition:.3s ease;
    letter-spacing:.5px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.red {
    background:#ef2b1f !important;
}





/* =========================================================
   MODAL SPECS
========================================================= */

.specs-modal{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.4s ease;
}

/* =========================================================
   ACTIVO
========================================================= */

.specs-modal.active{

    opacity:1;
    visibility:visible;
}

/* =========================================================
   OVERLAY
========================================================= */

.specs-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(6px);
}

/* =========================================================
   MODAL CONTENT
========================================================= */

.specs-modal-content{

    position:relative;

    width:95%;
    max-width:1400px;

    max-height:95vh;

    overflow-y:auto;

    background:#efefef;

    z-index:5;

    animation:modalUp .4s ease;
}

@keyframes modalUp{

    from{

        opacity:0;
        transform:translateY(40px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
   CLOSE
========================================================= */

.specs-close{

    position:absolute;

    top:18px;
    right:18px;

    border:none;

    background:none;

    color:#fff;

    font-size:32px;

    cursor:pointer;

    z-index:20;

    opacity:.8;

    transition:.3s;
}

.specs-close:hover{

    opacity:1;
}

/* =========================================================
   HEADER
========================================================= */

.specs-header{

    background-image:url('../images/concrete-wall-scratched-material-background-texture-concept.jpg');

    background-size:cover;
    background-position:center;

    padding:35px 40px;

    display:flex;
    align-items:center;

    gap:40px;
}

.specs-header img{

    width:80px;
}

.specs-header h2{

    font-size:48px;

    font-weight:400;

    letter-spacing:1px;

    color:#fff;

    margin-bottom:0;
}

.specs-header span{

    display:block;

    font-size:28px;

    letter-spacing:2px;

    color:#fff;
}


/* =========================================================
   BODY
========================================================= */

.specs-body{

    padding:40px 70px 70px;
}


/* =========================================================
   LISTA
========================================================= */

.specs-list{

    padding-left:18px;

    margin-bottom:40px;
}

.specs-list li{

    font-size:15px;

    line-height:1.5;

    margin-bottom:4px;

    color:#111;
}

/* =========================================================
   BLOCK
========================================================= */

.specs-block{

    margin-bottom:35px;
}

.specs-block h3{

    font-size:26px;

    font-weight:400;

    margin-bottom:8px;

    border-top:1px solid #111;
    border-bottom:1px solid #111;

    padding:4px 0;

    color:#111;
}

/* =========================================================
   TABLE
========================================================= */

.specs-block table{

    width:100%;

    border-collapse:collapse;
}

.specs-block td{

    padding:2px 0;

    vertical-align:top;

    font-size:14px;

    line-height:1.3;

    color:#222;
}

.specs-block td:first-child{

    width:220px;

    font-weight:600;
}



/* =========================================================
   PLANTAS DINAMICAS
========================================================= */

.plantas-dinamicas{

    display:none;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

/* =========================================================
   PANEL
========================================================= */

.planta-panel{

    display:none;
    margin-top:-120px;
}

.planta-panel.active{

    display:block;

    animation:fadePlanta .4s ease;
}



@keyframes fadePlanta{

    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
   GRID
========================================================= */

.planta-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center; 
}

.planta-info {
    width: 100%;
}

/* =========================================================
   INFO
========================================================= */

.planta-info h2{

    font-size:38px;

    font-weight:400;

    color:#111;

    line-height:1;

    margin-bottom:5px;
}

.planta-info span{

    display:block;

    font-size:20px;

    letter-spacing:3px;

    color:#222;

    margin-bottom:20px;
}

/* =========================================================
   TABLA
========================================================= */

.planta-table{

    width:100%;

    border-collapse:collapse;
}

.planta-table th{

    text-align:left;

    border-top:1px solid #111;
    border-bottom:1px solid #111;

    padding:8px 0;

    font-size:18px;

    color:#111;
}

.planta-table td{

    padding:8px 0;

    border-bottom:1px solid #bdbdbd;

    font-size:18px;

    color:#222;
}




#contacto{
    scroll-margin-top:200px;
}


/* =========================================================
MODAL PLANTA
========================================================= */

.planta-modal{

    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
}

/* =========================================================
   ACTIVE
========================================================= */

.planta-modal.active{
    opacity:1;
    visibility:visible;
}

/* =========================================================
   OVERLAY
========================================================= */

.planta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(4px);
}

/* =========================================================
   CONTENT
========================================================= */

.planta-modal-content{

    position:relative;
    width:90%;
    max-width:1200px;
    max-height:90vh;
    z-index:10;
    display:flex;
    justify-content:center;
    align-items:center;
}

.planta-modal-content img{
    max-width:50%;
    object-fit:contain;
    display:block;
	border-radius: 15px;
	transform:rotate(90deg);
}

/* =========================================================
   CLOSE
========================================================= */

.planta-close{

    position:absolute;
    top:0px;
    right:0;
    border:none;
    background:none;
    color:#fff;
    font-size:42px;
    cursor:pointer;
    transition:.3s;
}

.planta-close:hover{
    opacity:1;
}



/* =========================================================
   UBICACION
========================================================= */

.ubicacion-section{

    background:#e9e9e9;

    padding:90px 0;
}

/* =========================================================
   CONTAINER
========================================================= */

.ubicacion-container{

    width:90%;
    max-width:1400px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:100px;

    align-items:center;
}

/* =========================================================
   TITLE
========================================================= */

.ubicacion-left h2{

    font-size:72px;

    font-weight:300;

    line-height:.95;

    color:#111;

    margin-bottom:50px;
}

.ubicacion-left h2 span{

    display:block;

    font-size:42px;

    letter-spacing:4px;
}

/* =========================================================
   TEXTO
========================================================= */

.ubicacion-texto{
    margin-bottom:50px;
}

.ubicacion-texto p{
    margin-bottom:25px;
    font-size:24px;
}

.ubicacion-texto ul{
    padding-left:25px;
	list-style-type: disc;
}

.ubicacion-texto li{
    margin-bottom:14px;
    font-size:22px;
    line-height:1.2;
	font-weight: 300;
}

.ubicacion-texto li::marker {
    color: #ef2b1f;
}

/* =========================================================
   GALLERY
========================================================= */

.ubicacion-gallery{
    display:flex;
    gap:25px;
}

.ubicacion-gallery img{

    width:230px;
    height:150px;
    object-fit:cover;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* =========================================================
   RIGHT
========================================================= */

.ubicacion-right{
    text-align:center;
}

/* =========================================================
   MAPA
========================================================= */

.mapa-circle{

    width:520px;
    height:520px;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    margin:0 auto 40px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.mapa-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================================================
   ZOOM
========================================================= */

.mapa-zoom{

    position:absolute;

    bottom:35px;
    right:35px;

    width:70px;
    height:70px;

    border-radius:50%;

    border:3px solid #2d6b3f;

    background:#fff;

    color:#2d6b3f;

    font-size:42px;

    cursor:pointer;

    transition:.3s;
}

.mapa-zoom:hover{

    transform:scale(1.08);
}

/* =========================================================
   DIRECCION
========================================================= */

.direccion{

    font-size:18px;

    letter-spacing:1px;

    color:#111;
}


/* =========================================================
   UBICACION MAPA
========================================================= */

.ubicacion-mapa-section{

    background:#ffffff;

    padding:40px 0 100px;
}

/* =========================================================
   WRAPPER
========================================================= */

.ubicacion-mapa-wrapper{

    width:92%;
    max-width:1600px;

    margin:0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.ubicacion-mapa-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;
}

.ubicacion-mapa-header h2{

    font-size:38px;

    font-weight:300;

    letter-spacing:1px;

    color:#111;
}

.ubicacion-mapa-header h3{

    font-size:34px;

    font-weight:300;

    color:#111;
}

/* =========================================================
   CONTENT
========================================================= */

.ubicacion-mapa-content{

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:50px;

    align-items:start;
}

/* =========================================================
   MAPA
========================================================= */

.ubicacion-mapa-box{

    position:relative;
}

.ubicacion-mapa-box img{

    width:100%;

    display:block;

    /*box-shadow:0 10px 35px rgba(0,0,0,.08);*/
}

/* =========================================================
   GOOGLE MAPS
========================================================= */

.google-maps-btn{

    position:absolute;

    bottom:15px;

    right:60px;

    width:90px;

    transition:.3s ease;

    z-index:10;
}

.google-maps-btn:hover{

    transform:scale(1.08);
}

.google-maps-btn img{

    width:100%;
}

/* =========================================================
   INFO LIST
========================================================= */

.ubicacion-info-list{

    display:flex;

    flex-direction:column;

    gap:24px;

    padding-top:10px;
}

/* =========================================================
   ITEM
========================================================= */

.ubicacion-info-item{

    display:flex;

    align-items:flex-start;

    gap:16px;
}

.ubicacion-info-item img{

    width:34px;
}

.ubicacion-info-item span{

    font-size:20px;

    line-height:1.35;

    color:#222;
}


/* =========================================================
   ESTILO VIDA
========================================================= */

.estilo-vida-section{

    background:#ececec;

    padding:120px 0;
}

/* =========================================================
   CONTAINER
========================================================= */

.estilo-vida-container{

    width:92%;
    max-width:1600px;

    margin:0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.estilo-vida-header{

    text-align:center;

    margin-bottom:80px;
}

.estilo-vida-header h2{

    font-size:34px;

    font-weight:700;

    color:#333;

    margin-bottom:20px;
}

.estilo-vida-header p{

    font-size:22px;

    font-weight:300;

    margin-bottom:12px;

    color:#444;
}

.estilo-vida-header span{

    font-size:22px;

    font-weight:300;

    color:#444;

    line-height:1.4;
}

/* =========================================================
   SUBTITLE
========================================================= */

.estilo-vida-container h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:70px;

    color:#333;

    text-align: center;
}

/* =========================================================
   GALLERY WRAPPER
========================================================= */

.estilo-gallery-wrapper{

    position:relative;

    width:100%;

    overflow:visible;

    padding:40px 120px 90px;
}


.estiloSwiper{

    width:100%;
    overflow:visible !important;
}


.estiloSwiper .swiper-wrapper{

    overflow:visible;
}


/* =========================================================
   ARROWS
========================================================= */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:100;

    font-size:120px;

    color:#111;

    cursor:pointer;

    user-select:none;

    transition:.3s;
}

.gallery-arrow:hover{

    transform:translateY(-50%) scale(1.08);
}

/* =========================================================
   GALLERY
========================================================= */

.estilo-gallery{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:0;
}

/* =========================================================
   ITEMS
========================================================= */

.gallery-item{

    position:relative;

    transition:.4s ease;

    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.gallery-item img{

    display:block;

    width:100%;

    object-fit:cover;
}

/* =========================================================
   SIDE
========================================================= */

.gallery-item.side{

    width:420px;

    z-index:1;

    opacity:.92;
}

/* =========================================================
   CENTER
========================================================= */

.gallery-item.center{

    width:650px;

    margin:0 -40px;

    z-index:5;
}

/* =========================================================
   LABEL
========================================================= */

.gallery-label{

    position:absolute;

    bottom:-28px;

    left:50%;

    transform:translateX(-50%);

    background:#9b9b9b;

    color:#fff;

    padding:10px 40px;

    font-size:24px;

    font-weight:600;

    letter-spacing:1px;
}

/* =========================================================
   ZOOM
========================================================= */

.gallery-zoom{

    position:absolute;

    bottom:18px;
    right:18px;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    font-size:24px;

    cursor:pointer;
}



/* =========================================================
   SWIPER
========================================================= */

.estiloSwiper{

    width:100%;

    overflow:hidden;

    padding:40px 0;
}


.estiloSwiper .swiper-wrapper{

    align-items:center;
}


.estiloSwiper .swiper-slide{

    width:720px;

    opacity:.45;

    transition:.45s ease;

    transform:scale(.82);
}

.estiloSwiper .swiper-slide-active{

    opacity:1;

    transform:scale(1);
}




/* =========================================================
   ITEM
========================================================= */

.gallery-item{

    position:relative;

    width:100%;

    max-width:720px;

    box-shadow:0 15px 40px rgba(0,0,0,.18);
}


.gallery-item img{

    width:100%;

    display:block;
}

/* =========================================================
   ARROWS
========================================================= */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:50;

    font-size:120px;

    color:#111;

    cursor:pointer;

    user-select:none;
}

.swiper-button-prev-custom{

    left:20px;
}

.swiper-button-next-custom{

    right:20px;
}


.contacto-final {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                url(../images/concrete-wall-scratched-material-background-texture-concept.webp) center center / cover no-repeat;
    padding: 70px 0;
    color: #fff;
    position: relative;
}

.contacto-overlay{
    width:90%;
    max-width:1500px;
    margin:0 auto;
}

.contacto-top{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:80px;
    align-items:start;
    margin-bottom:10px;
}

.contacto-frase{
    text-align:center;
}

.contacto-frase p{
    font-size:22px;
    line-height:1.5;
    margin-bottom:30px;
	font-weight: 300;
}

.contacto-frase span{
    font-size:18px;
    display:block;
}

.contacto-info{
    text-align:center;
}

.contacto-info h3{
    font-size:28px;
    margin-bottom:35px;
    font-weight:700;
}

.dato-contacto{
    font-size:18px;
    margin-bottom:18px;
    font-weight:700;
}

.direccion-contacto{
    margin-top:20px;
    font-size:15px;
    font-weight:700;
}

.contacto-contenido{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:80px;
    align-items:start;
    margin-top: 30px;
}

.contacto-formulario h2{
    text-align:center;
    font-size:34px;
    margin-bottom:50px;
    font-weight:300;
    letter-spacing:2px;
}

.dato-contacto{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    font-size:18px;
    margin-bottom:18px;
    font-weight:500;
}

.icon-contacto{
    font-size:26px;
    line-height:1;
}

.dato-contacto a{
    color:#fff;
    transition:.3s ease;
}

.dato-contacto a:hover{
    opacity:.75;
}

.direccion-contacto{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:20px;
    font-size:18px;
    font-weight:500;
}

.direccion-contacto a{
    color:#fff;
    transition:.3s ease;
}

.direccion-contacto a:hover{
    opacity:.75;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.campo{
    margin-bottom:30px;
}

.campo label{
    display:block;
    margin-bottom:10px;
    font-size:18px;
}

.campo input,
.campo textarea{
    width:100%;
    border:none;
    background:rgba(255,255,255,.9);
    padding:18px;
    font-size:18px;
}

.campo textarea{
    height:315px;
    resize:none;
}

.btn-enviar{
    background:#ef2a1f;
    border:none;
    color:#fff;
    padding:18px 70px;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    transition:.3s ease;
	border-radius: 15px;
}

.btn-enviar:hover{
    opacity:.9;
}

.contacto-lateral{
    text-align:center;
}

.arquitectura{
    margin-bottom:70px;
}

.arquitectura h4,
.vende h4{
    font-size:14px;
    margin-bottom:10px;
    letter-spacing:2px;
	font-weight: 500;
}

.arquitectura img{
    max-width:120px;
    margin-bottom:20px;
}
.vende img{
    max-width:220px;
    margin-bottom:20px;
}

.arquitectura span{
    display:block;
    font-size:18px;
    font-weight:500;
    letter-spacing:2px;
}

.texto-legal{
    margin-top:70px;
    font-size:12px;
    line-height:1.6;
    color:rgba(255,255,255,.9);
}


.formulario-box{
    background:rgba(120,120,120,.28);
    backdrop-filter:blur(3px);
    padding:45px;
    border:1px solid rgba(255,255,255,.15);
}



/* =========================================================
   RESPONSIVE GENERAL
========================================================= */
@media (max-width: 768px) {
    .ubicacion-info-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }

    .ubicacion-info-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

@media(max-width:991px){

    html,
    body{

        overflow-x:hidden;
    }

    /* =====================================================
       NAVBAR
    ===================================================== */

    .navbar{

        padding:10px 15px;

        flex-direction:column;

        gap:8px;
    }

    .logo img{

        width:130px;
    }

    .menu{

        gap:12px;

        flex-wrap:wrap;

        justify-content:center;
    }

    .menu a{

        font-size:10px;

        letter-spacing:1px;
    }

    /* =====================================================
       HERO
    ===================================================== */

    .hero{

        height:100vh;

        min-height:650px;
    }

    .hero-content{

        left:20px;
        right:20px;

        bottom:260px;

        max-width:90%;
    }

    .hero-content h1{

        font-size:28px;

        line-height:1.1;
    }

    .hero-content h2{

        font-size:12px;

        line-height:1.5;
    }

    .hero-content p{

        font-size:10px;
    }

    /* =====================================================
       HERO CONTACTO
    ===================================================== */

    .hero-contact{

        padding:12px 0 25px;
    }

    .contact-container{

        padding:0 15px;
    }

    .contact-form{

        flex-direction:column;

        gap:8px;
    }

    .contact-form input,
    .contact-form button{

        width:100%;
    }

    .contact-info{

        font-size:9px;

        line-height:1.5;

        padding:0 10px;
    }

    /* =====================================================
       SWIPER BULLETS
    ===================================================== */

    .swiper-pagination{

        bottom:12px !important;

        right:50% !important;

        transform:translateX(50%) !important;
    }

    /* =====================================================
       PROYECTO
    ===================================================== */

    .panel-image{

        height:100vh;

        min-height:700px;
    }

    .panel-content{

        width:88%;

        top:56%;

        left:50%;

        transform:translate(-50%, -50%);
    }

    .panel-content p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:28px;
    }

    /* =====================================================
       PLANTAS
    ===================================================== */

    .plantas-section{

        padding:30px 0;
    }

    .plantas-container{

        flex-direction:column;

        gap:40px;
    }

    .pisos-tabs{

        flex-wrap:wrap;

        gap:2px;
    }

    .pisos-tabs button{

        width:calc(50% - 2px);

        height:50px;

        font-size:15px;
    }

    .planta-panel{

        margin-top:0 !important;
		padding: 0px 30px;
    }

    .planta-info{

        padding-top:0;
    }

    .planta-info h2{

        font-size:34px;
    }

    .planta-info span{

        font-size:15px;

        margin-bottom:15px;
    }

    .planta-table th,
    .planta-table td{

        font-size:13px;
    }
	
    .zoom-btn{

        width:42px;
        height:42px;
        font-size:22px;
        right:5px;
    }
	
    /* =====================================================
       UBICACION
    ===================================================== */

    .ubicacion-section{

        padding:70px 0;
    }

    .ubicacion-container{

        grid-template-columns:1fr;

        gap:50px;
    }

    .ubicacion-left h2{

        font-size:40px;

        margin-bottom:30px;
    }

    .ubicacion-left h2 span{

        font-size:22px;
    }

    .ubicacion-texto p{

        font-size:18px;
    }

    .ubicacion-texto li{

        font-size:16px;
    }

    .mapa-circle{

        width:300px;
        height:300px;
    }

    .ubicacion-gallery{

        flex-direction:column;
    }

    .ubicacion-gallery img{

        width:100%;

        height:220px;
    }

    .direccion{

        font-size:14px;

        line-height:1.5;
    }

    /* =====================================================
       MAPA UBICACION
    ===================================================== */

    .ubicacion-mapa-section{

        padding:60px 0;
    }

    .ubicacion-mapa-content{

        grid-template-columns:1fr;

        gap:40px;
    }

    .ubicacion-mapa-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;
    }

    .ubicacion-mapa-header h2{

        font-size:28px;
    }

    .ubicacion-mapa-header h3{

        font-size:22px;
    }

    .ubicacion-info-item span{

        font-size:13px;
    }

    .google-maps-btn{

        width:60px;

        right:15px;

        bottom:10px;
    }
	
	

    /* =====================================================
       ESTILO VIDA
    ===================================================== */

    .estilo-vida-section{

        padding:70px 0;
    }

    .estilo-vida-header{

        margin-bottom:40px;
    }

    .estilo-vida-header h2{

        font-size:28px;

        line-height:1.4;
    }

    .estilo-vida-header p{

        font-size:18px;
    }

    .estilo-vida-header span{

        font-size:18px;
    }

    .estilo-vida-container h3{

        font-size:20px;

        line-height:1.5;

        margin-bottom:40px;
    }

    .estilo-gallery-wrapper{

        padding:20px 0 60px;
    }

    .estiloSwiper .swiper-slide{

        width:85%;
    }

    .gallery-item{

        max-width:100%;
    }

    .gallery-label{

        font-size:14px;

        padding:8px 18px;

        bottom:-20px;
    }

    .gallery-arrow{

        display:none;
    }

    /* =====================================================
       CONTACTO FINAL
    ===================================================== */

    .contacto-final{

        padding:60px 0;
    }

    .contacto-top,
    .contacto-contenido,
    .form-grid{

        grid-template-columns:1fr;

        gap:40px;
    }

    .contacto-frase p{

        font-size:18px;
    }

    .contacto-formulario h2{

        font-size:28px;
    }

    .formulario-box{

        padding:25px;
    }

    .campo label{

        font-size:15px;
    }

    .campo input,
    .campo textarea{

        font-size:15px;

        padding:14px;
    }

    .campo textarea{

        height:220px;
    }

    .btn-enviar{

        width:100%;

        font-size:18px;
    }

    .dato-contacto{

        font-size:15px;

        flex-wrap:wrap;
    }

    .direccion-contacto{

        font-size:13px;

        line-height:1.5;

        text-align:center;
    }

    .arquitectura img,
    .vende img{

        max-width:160px;
    }

    .texto-legal{

        font-size:10px;

        margin-top:40px;
    }


}

	/* =========================================================
   		FIX BOTON MODAL PLANTA
=	======================================================== */

@media(max-width:991px){

    .planta-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .planta-image{
        height:auto;
        min-height:unset;
        transform:none;
        margin:0 auto;
        padding:20px 0;
    }

    .planta-image img{
        width:100%;
        height:auto;
        transform:none;
        max-width:100%;
    }

    .planta-image .zoom-btn{
        top:auto;
        right:15px;
        bottom:15px;

        transform:none;
    }

    .planta-image .zoom-btn:hover{
        transform:scale(1.08);
    }
}

	
.plantas-container{
    grid-template-columns:1fr;
    padding:40px 25px;
    gap:40px;
}

.planta-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.planta-panel{
    padding:20px 0;
}

.pisos-tabs{
    grid-template-columns:repeat(2, 1fr);
    gap:2px;
}

.pisos-tabs button{
    width:100%;
}

.plantas-buttons{
    gap:20px;
}



/* =========================================================
   MAPA CLICKABLE
	========================================================= */

	.ubicacion-mapa-box{
		position:relative;
	}

	.mapa-img-trigger{
		cursor:pointer;

		display:block;

		position:relative;

		z-index:5;

		transition:transform .3s ease;
	}

	.mapa-img-trigger:hover{
		transform:scale(1.01);
	}

/* =========================================================
   MODAL MAPA 
========================================================= */
.mapa-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

/* Estado cuando se hace clic en la imagen (trigger) */
.mapa-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Fondo oscuro translúcido con desenfoque */
.mapa-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
	
}

/* Contenedor de la imagen dentro del modal */
.mapa-modal-content {
    position: relative;
	width: 90%;
	/*    max-width: 1000px;
    max-height: 85vh;*/
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: mapaUp .4s ease;
}

/* Animación de entrada para el mapa */
@keyframes mapaUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos de la imagen ampliada */
.mapa-modal-content img {
    object-fit: contain;
    display: block;
    border-radius: 15px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
	width: 90%;
}

/* Botón para cerrar (X) */
.mapa-close {
    position: absolute;
    top: -45px;
    right: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 42px;
    cursor: pointer;
    transition: .3s;
}

.mapa-close:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

/* Añade un cursor de lupa al mapa original para indicar que es clickeable */
.mapa-img-trigger {
    cursor: zoom-in;
    transition: .3s ease;
}

.mapa-img-trigger:hover {
    filter: brightness(0.95);
}

/* =========================================================
   AJUSTES LAYOUT PLANTAS
========================================================= */

/* CONTENEDOR GENERAL */
.plantas-section{
    overflow:hidden;
}

/* CONTENEDOR SUPERIOR */
.plantas-container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
    padding:80px 40px;
    display:grid;
    grid-template-columns:40% 60%;
    gap:60px;
    align-items:start;
}

/* =========================================================
   CONTENEDOR DINÁMICO
========================================================= */

.plantas-dinamicas{
    width:90%;
    max-width:1200px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

/* =========================================================
   PANEL ACTIVO
========================================================= */

	.planta-panel{
		width:100%;
		max-width:1200px;
		margin:0 auto;
		padding:20px 0;
		overflow:hidden;
	}

	.planta-panel.active{
		display:flex;
		align-items:center;
		width:100%;
		max-height:500px;
		overflow:hidden;
	}

/* =========================================================
   GRID PRINCIPAL 40 / 60
========================================================= */

.planta-grid{
    display:grid;
    grid-template-columns:40% 60%;
    gap:40px;
    width:100%;
    height: 500px;
	align-items: center;
	overflow: hidden;
}

/* =========================================================
   COLUMNA INFORMACIÓN
========================================================= */

.planta-info{
    width:100%;
    min-width:0;
    max-height:500px;
    overflow-y:auto;
    padding-right:15px;
}

/* =========================================================
   PLANTA IMAGE ORIGINAL + FIX MODAL
========================================================= */

.planta-image{
    position:relative;
    width:100%;
    height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:auto;
    transform:rotate(90deg);
    overflow:visible;
}

/* IMAGEN */
.planta-image img{
    width:auto;
    height:130%;
    max-width:none;
    object-fit:contain;
    display:block;
}

/* =========================================================
   BOTON ZOOM PLANTAS
========================================================= */

.planta-image .zoom-btn{
    position:absolute;
    top:50%;
    width:58px;
    height:58px;
    border-radius:50%;
    border:2px solid #c60000;
    background:#fff;
    color:#c60000;
    
    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    z-index:9999;

    transform:translateY(-50%) rotate(-90deg);
    transition:all .25s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* ICONO LUPA */
.planta-image .zoom-btn::before{
    content:"";

    position:absolute;

    width:18px;
    height:18px;

    border:3px solid #c60000;
    border-radius:50%;

    top:12px;
    left:12px;
}

/* MANGO LUPA */
.planta-image .zoom-btn::after{
    content:"";

    position:absolute;

    width:12px;
    height:3px;

    background:#c60000;

    transform:rotate(45deg);

    right:13px;
    bottom:17px;

    border-radius:3px;
}

/* HOVER */
.planta-image .zoom-btn:hover{
    transform:translateY(-50%) rotate(-90deg) scale(1.08);
}

/* =========================================================
   TABS DENTRO DEL CONTENEDOR
========================================================= */

.pisos-tabs{
    width:90%;
    max-width:900px;
    margin:40px auto 0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    overflow:hidden;
}

/* BOTONES FLEXIBLES */
.pisos-tabs button{
    width:100%;
    min-width:0;
}

.pisos-tabs .tab-info{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    text-decoration:none;
    cursor:pointer;
}

/* =========================================================
   BOTONES INFERIORES
========================================================= */

.plantas-buttons{
    width:90%;
    max-width:1200px;
    margin:40px auto;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
}




.btn-loading {
    opacity: 0.8;
    cursor: not-allowed;
}

.spinner-btn {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}