/* ===== RESET GENERAL ===== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ===== BASE ===== */
body{
font-family:'Montserrat',sans-serif;
font-size:18px;
line-height:1.8;
color:#8f8f8f;
background-color:#fff;
}

/* ===== TÍTULOS ===== */
h1,h2,h3,h4,h5{
font-family:'Playfair Display',serif;
color:#b2bac4;
}

/* ===== TÍTULOS DE SECCIÓN ===== */
.titulo-seccion{
text-align:center;
}

.titulo-seccion p{
max-width:700px;
margin:0 auto;
}

/* ===== HEADER Y NAV ===== */
header{
background:#1f3b5b;
color:#fff;
padding:20px 0;
position:sticky;
top:0;
z-index:1000;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
}

nav h1{
font-size:26px;
font-weight:700;
color:#fff;
}

nav ul{
list-style:none;
display:flex;
gap:20px;
}

nav ul li a{
color:#fff;
text-decoration:none;
font-weight:600;
}

nav ul li a:hover{
text-decoration:underline;
}

/* ===== SECCIONES ===== */
section{
padding:80px 0;
}

section h2{
font-size:40px;
font-weight:700;
margin-bottom:35px;
text-align:center;
}

/* ===== HERO / CARRUSEL ===== */
.carousel-bg{
height:80vh;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
}

.carousel-content{
max-width:800px;
padding:20px;
}

.carousel-content h2{
font-size:46px;
margin-bottom:20px;
}

.carousel-content p{
font-size:20px;
margin-bottom:30px;
}

.carousel img{
height:420px;
object-fit:cover;
}

/* ===== BANNER LUJO ===== */
.luxury-banner{
width:100%;
height:220px;
background:linear-gradient(135deg,#0a1a2f,#102f4a,#1f3b5b);
position:relative;
overflow:hidden;
}

.luxury-banner::after{
content:"";
position:absolute;
bottom:35px;
left:50%;
transform:translateX(-50%);
width:180px;
height:3px;
background:linear-gradient(to right,transparent,#c9d2db,transparent);
}

.luxury-banner::before{
content:"";
position:absolute;
bottom:25px;
left:50%;
transform:translateX(-50%);
width:80px;
height:2px;
background:#f4b400;
}

/* ===== QUIÉNES SOMOS ===== */
.about p{
font-size:19px;
max-width:850px;
margin:auto;
text-align:center;
}

/* ===== BANNER PROYECTO HORIZONTAL ===== */
.project-banner-horizontal{
position:relative;
width:100%;
height:420px;
margin-top:60px;
overflow:hidden;
}

.project-banner-horizontal img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .7s ease;
}

.project-banner-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(12,32,55,.9),
rgba(12,32,55,.6),
rgba(12,32,55,.9)
);
}

.project-banner-content{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
color:#fff;
}

.project-banner-content h3{
font-size:42px;
font-weight:800;
margin-bottom:18px;
}

.project-banner-content p{
font-size:21px;
max-width:700px;
margin-bottom:30px;
color:#e3e9f0;
}

.project-banner-horizontal:hover img{
transform:scale(1.05);
}

/* ===== BANNER VENTAS ===== */
.banner-ventas{
position:relative;
height:65vh;
overflow:hidden;
}

.banner-img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(60%);
}

.banner-overlay{
position:absolute;
inset:0;
background:rgba(12,32,55,.45);
}

.banner-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
max-width:900px;
}

/* BUSCADOR */
.buscador-propiedades{
margin-top:30px;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.buscador-propiedades select{
height:45px;
border-radius:6px;
}

.btn-buscar{
width:100%;
height:45px;
background:#f4b400;
border:none;
font-weight:600;
border-radius:6px;
color:#000;
}

/* ===== QUIÉNES SOMOS CREATIVO ===== */
.about-creative{
position:relative;
padding:0;
background:#fff;
}

.about-slide{
height:65vh;
background-size:cover;
background-position:center;
}

.about-content{
margin-top:-120px;
background:#ffffff;
padding:60px 40px;
max-width:900px;
border-radius:10px;
box-shadow:0 20px 40px rgba(0,0,0,.12);
text-align:center;
position:relative;
z-index:10;
}

.about-content h2{
font-size:42px;
margin-bottom:25px;
}

.about-content p{
font-size:19px;
max-width:750px;
margin:0 auto 20px auto;
line-height:1.8;
}

.about-content .btn{
margin-top:20px;
}

/* ===== PROYECTOS ===== */
.projects{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top: 40px;
}

.project-card{
border:1px solid #ddd;
border-radius:10px;
overflow:hidden;
background:#fff;
transition:transform .3s ease;
}

.project-card:hover{
transform:translateY(1.03px);
}

.project-card img{
width:100%;
height:320px;
object-fit:cover;
}

.project-card .content{
padding:20px;
}

.project-card h3{
font-size:22px;
font-weight:700;
margin-bottom:10px;
}

.project-card p{
font-size:16.5px;
line-height:1.6;
}

.carousel-img{
height:70vh;
object-fit:cover;
}

.carousel-caption{
background:rgba(18,38,63,.65);
inset:0;
padding:2rem;
}

.carousel-caption h3{
font-size:2.2rem;
}

.carousel-caption p{
font-size:1.1rem;
}

/* ===== BANNER AZUL PREMIUM PARA PROPIEDADES ===== */

.banner-cards{
background:linear-gradient(135deg,#0a1a2f,#102f4a,#1f3b5b);
padding:110px 0;
position:relative;
overflow:hidden;
}

/* línea decorativa elegante */

.banner-cards::after{
content:"";
position:absolute;
top:70px;
left:50%;
transform:translateX(-50%);
width:140px;
height:3px;
background:linear-gradient(to right,transparent,#f4b400,transparent);
}

/* título */

.banner-cards h2{
color:white;
margin-bottom:60px;
}

/* cards efecto premium */

.banner-cards .project-card{
border-radius:12px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,.35);
transition:all .35s ease;
}

/* animación hover */

.banner-cards .project-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 30px 60px rgba(0,0,0,.45);
}

/* efecto zoom en imagen */

.banner-cards .project-card img{
transition:transform .6s ease;
}

.banner-cards .project-card:hover img{
transform:scale(1.08);
}

/* ===== BOTONES ===== */
.btn{
display:inline-block;
background:#f4b400;
color:#000;
padding:12px 25px;
border-radius:5px;
font-weight:600;
text-decoration:none;
}

.btn:hover{
background:#d39e00;
}

/* ===== CONTACTO ===== */
.contact p{
text-align:center;
font-size:18px;
}

.contact form{
max-width:600px;
margin:auto;
display:grid;
gap:15px;
}

.contact input,
.contact textarea{
padding:12px;
border-radius:5px;
border:1px solid #ccc;
}

.contact button{
background:#1f3b5b;
color:#fff;
padding:12px;
border-radius:5px;
border:none;
}

/* ===== FOOTER ===== */
footer{
background:#1f3b5b;
color:#fff;
text-align:center;
padding:20px;
}

/* ===== WHATSAPP ===== */
.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
width:60px;
height:60px;
background:#25D366;
border-radius:50%;
font-size:28px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
z-index:2000;
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){

nav{
flex-direction:column;
gap:10px;
}

section h2{
font-size:30px;
}

p{
font-size:16.5px;
}

.carousel img{
height:250px;
}

.project-banner-horizontal{
height:300px;
}

.project-banner-content h3{
font-size:30px;
}

.project-banner-content p{
font-size:17px;
}

.luxury-banner{
height:150px;
}

.about-slide{
height:45vh;
}

.about-content{
margin-top:-60px;
padding:40px 25px;
}

.about-content h2{
font-size:30px;
}

.about-content p{
font-size:17px;
}

}