html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Montserrat', sans-serif;
background:#000;
overflow-x:hidden;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
/* =========================================================
HERO
========================================================= */
.hero{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}
/* =========================================================
NAVBAR
========================================================= */
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
padding:20px 60px;
z-index:9999;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,.25);
border-bottom:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(4px);
transition:.4s ease;
}
.navbar.scrolled{
background-image:url('../images/concrete-wall-scratched-material-background-texture-concept.jpg');
background-size:cover;
background-position:center;
border-bottom:1px solid rgba(255,255,255,.08);
box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.logo img{
width:95px;
}
.menu{
display:flex;
gap:45px;
}
.menu a{
color:#fff;
font-size:11px;
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:0 12px;
color:#fff;
font-size:11px;
outline:none;
transition:.3s;
}
.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;
}
.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;
}
/* =========================================================
DESKTOP
========================================================= */
@media(min-width:992px){
.contact-form{
padding-right:90px;
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:991px){
.hero{
height:100vh;
min-height:700px;
}
.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{
height:100%;
}
/* =========================================
NAVBAR
========================================= */
.navbar{
padding:10px 15px;
flex-direction:column;
gap:8px;
}
.logo img{
width:70px;
}
.menu{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
}
.menu a{
font-size:9px;
letter-spacing:1px;
}
/* =========================================
HERO TEXTOS
========================================= */
.hero-content{
position:absolute;
left:25px;
right:25px;
bottom:320px;
width:auto;
max-width:320px;
z-index:999;
}
.hero-content h1{
font-size:26px;
line-height:1.05;
margin-bottom:8px;
}
.hero-content h2{
font-size:11px;
line-height:1.5;
letter-spacing:1px;
margin-bottom:10px;
}
.hero-content p{
font-size:10px;
letter-spacing:1px;
}
/* =========================================
FORMULARIO
========================================= */
.hero-contact{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:12px 0 45px;
height:auto;
z-index:50;
}
.contact-container{
padding:0 20px;
}
.contact-title{
margin-bottom:12px;
}
.contact-form{
display:flex;
flex-wrap:wrap;
gap:8px;
padding-right:0;
}
.contact-form input{
width:100%;
flex:none;
}
.contact-form button{
width:100%;
}
/* =========================================
PAGINATION
========================================= */
.swiper-pagination{
right:50% !important;
left:auto !important;
transform:translateX(50%) !important;
bottom:15px !important;
}
.heroSwiper{
z-index:1;
}
.contact-info{
font-size:9px;
line-height:1.6;
gap:6px;
padding:0 10px;
}
.panel-image{
height:100vh;
min-height:700px;
}
.panel-content{
width:90%;
top:50%;
}
.panel-content p{
font-size:15px;
line-height:1.8;
margin-bottom:30px;
}
}
/* =========================================================
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:#efefef;
padding:120px 0;
position:relative;
}
/* =========================================================
CONTENEDOR
========================================================= */
.plantas-container{
width:90%;
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
gap:80px;
}
/* =========================================================
TITULOS
========================================================= */
.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:420px;
}
.row-item{
display:flex;
justify-content:space-between;
gap:30px;
padding:6px 0;
border-bottom:1px solid #444;
}
.row-item span{
font-size:18px;
color:#111;
}
/* =========================================================
LISTA
========================================================= */
.plantas-right ul{
padding-left:20px;
}
.plantas-right li{
font-size:20px;
color:#111;
margin-bottom:22px;
line-height:1.6;
}
/* =========================================================
TABS
========================================================= */
.pisos-tabs{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:30px auto 70px;
}
.pisos-tabs button{
width:150px;
height:60px;
border:none;
background:#bdbdbd;
color:#fff;
font-size:20px;
font-weight:700;
cursor:pointer;
transition:.3s;
}
.pisos-tabs button.active{
background:#4a4a4a;
}
/* =========================================================
BOTONES
========================================================= */
.plantas-buttons{
margin-top:80px;
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:50px;
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-top:35px;
}
.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);
}
.btn-cotizar:hover{
background:#d9251b;
transform:translateY(-2px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:991px){
.plantas-container{
flex-direction:column;
}
.plantas-left h2{
font-size:32px;
}
.subtitle{
font-size:14px;
}
.row-item span{
font-size:15px;
}
.plantas-right li{
font-size:16px;
}
.pisos-tabs button{
width:50%;
font-size:16px;
}
.plantas-buttons{
flex-direction:column;
align-items:center;
gap:20px;
}
.plantas-buttons a{
width:100%;
max-width:320px;
}
}
/* =========================================================
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;
}
@media(max-width:991px){
.specs-header{
padding:20px;
}
.specs-header img{
width:60px;
}
.specs-header h2{
font-size:28px;
}
.specs-header span{
font-size:18px;
}
.specs-body{
padding:25px;
}
.specs-list li{
font-size:13px;
}
.specs-block h3{
font-size:20px;
}
.specs-block td{
font-size:12px;
}
.specs-block td:first-child{
width:120px;
}
}
/* =========================================================
PLANTAS DINAMICAS
========================================================= */
.plantas-dinamicas{
display:none;
width:90%;
max-width:1400px;
margin:0 auto;
}
/* =========================================================
PANEL
========================================================= */
.planta-panel{
display:none;
margin-top:-120px;
}
.planta-panel.active{
display:block;
animation:fadePlanta .4s ease;
}
#piso1{
margin-top:-80px;
}
#piso2{
margin-top:-75px;
}
#piso3{
margin-top:-110px;
}
#piso4{
margin-top:-70px;
}
@keyframes fadePlanta{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* =========================================================
GRID
========================================================= */
.planta-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 380px;
gap:60px;
align-items:center;
}
/* =========================================================
INFO
========================================================= */
.planta-info{
display:flex;
flex-direction:column;
justify-content:center;
height:100%;
align-self:start;
padding-top:40px;
}
.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;
}
/* =========================================================
IMAGEN
========================================================= */
.planta-image{
position:relative;
width:100%;
max-width:380px;
display:flex;
justify-content:flex-start;
align-items:flex-start;
margin-left:auto;
}
.planta-image img{
width:100%;
max-height:320px;
object-fit:contain;
display:block;
}
/* =========================================================
ZOOM
========================================================= */
.zoom-btn{
position:absolute;
right:-20px;
bottom:15px;
width:55px;
height:55px;
border-radius:50%;
border:3px solid #2f6d3d;
background:#fff;
color:#2f6d3d;
font-size:34px;
cursor:pointer;
transition:.3s;
}
.zoom-btn:hover{
transform:scale(1.05);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:991px){
.planta-grid{
grid-template-columns:1fr;
gap:40px;
}
.planta-info h2{
font-size:40px;
}
.planta-info span{
font-size:16px;
}
.planta-table th,
.planta-table td{
font-size:14px;
}
.planta-image{
margin:auto;
}
.zoom-btn{
right:10px;
width:45px;
height:45px;
font-size:24px;
}
}
#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,.82);
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:100%;
max-height:90vh;
object-fit:contain;
display:block;
}
/* =========================================================
CLOSE
========================================================= */
.planta-close{
position:absolute;
top:-50px;
right:0;
border:none;
background:none;
color:#fff;
font-size:42px;
cursor:pointer;
opacity:.8;
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:20px;
}
.ubicacion-texto li{
margin-bottom:14px;
font-size:22px;
line-height:1.4;
}
/* =========================================================
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;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1100px){
.ubicacion-container{
grid-template-columns:1fr;
gap:80px;
}
.ubicacion-right{
order:-1;
}
}
@media(max-width:768px){
.ubicacion-section{
padding:80px 0;
}
.ubicacion-left h2{
font-size:46px;
}
.ubicacion-left h2 span{
font-size:28px;
}
.ubicacion-texto li{
font-size:18px;
}
.mapa-circle{
width:320px;
height:320px;
}
.ubicacion-gallery{
flex-direction:column;
}
.ubicacion-gallery img{
width:100%;
height:220px;
}
}
/* =========================================================
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;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1100px){
.ubicacion-mapa-content{
grid-template-columns:1fr;
}
.ubicacion-info-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
}
@media(max-width:768px){
.ubicacion-mapa-section{
padding:70px 0;
}
.ubicacion-mapa-header{
flex-direction:column;
align-items:flex-start;
gap:15px;
}
.ubicacion-mapa-header h2{
font-size:38px;
}
.ubicacion-mapa-header h3{
font-size:24px;
}
.ubicacion-info-list{
grid-template-columns:1fr;
}
.ubicacion-info-item span{
font-size:17px;
}
.google-maps-btn{
width:70px;
}
}
/* =========================================================
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;
}
/* =========================================================
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;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1100px){
.estilo-gallery{
flex-direction:column;
gap:50px;
}
.gallery-item.side,
.gallery-item.center{
width:100%;
max-width:700px;
margin:0;
}
.gallery-arrow{
display:none;
}
}
@media(max-width:768px){
.estilo-vida-section{
padding:80px 0;
}
.estilo-vida-header h2{
font-size:34px;
}
.estilo-vida-header p{
font-size:26px;
}
.estilo-vida-header span{
font-size:22px;
}
.estilo-vida-container h3{
font-size:28px;
line-height:1.4;
}
.gallery-label{
font-size:18px;
padding:8px 22px;
}
}
/* =========================================================
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;
}
@media(max-width:992px){
.gallery-arrow{
display:none;
}
.swiper-slide{
opacity:1;
transform:scale(1);
}
.gallery-item{
max-width:100%;
}
}
.contacto-final{
background:url('../images/concrete-wall-scratched-material-background-texture-concept.jpg') 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;
font-family:serif;
margin-bottom:30px;
}
.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;
}
.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;
}
.btn-enviar:hover{
opacity:.9;
}
.contacto-lateral{
text-align:center;
}
.arquitectura{
margin-bottom:70px;
}
.arquitectura h4,
.vende h4{
font-size:20px;
margin-bottom:25px;
letter-spacing:2px;
}
.arquitectura img,
.vende img{
max-width:220px;
margin-bottom:20px;
}
.arquitectura span{
display:block;
font-size:20px;
font-weight:700;
letter-spacing:2px;
}
.texto-legal{
margin-top:70px;
font-size:12px;
line-height:1.6;
color:rgba(255,255,255,.9);
}
@media(max-width:991px){
.contacto-top,
.contacto-contenido,
.form-grid{
grid-template-columns:1fr;
}
.contacto-formulario h2{
font-size:38px;
}
.contacto-frase p{
font-size:22px;
}
.dato-contacto{
font-size:22px;
}
}
.formulario-box{
background:rgba(120,120,120,.28);
backdrop-filter:blur(3px);
padding:45px;
border:1px solid rgba(255,255,255,.15);
}