*{
box-sizing:border-box;
}
html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
img{
max-width:100%;
height:auto;
}
h1,h2,h3,h4,p,a{
overflow-wrap:break-word;
}
body {
margin: 0;
font-family:'Manrope',sans-serif;
background:#FAF0E6;
}
.container{
width:100%;
max-width:1400px;
margin:auto;
}
.menu-social{
display:none;
}
.menu-brand{
display:none;
align-items:center;
gap:10px;
margin-bottom:150px;
}
.menu-brand div{
display:flex;
flex-direction:column;
}
.menu-brand img{
display:flex;
width:100px;
}
.menu-brand span{
display:flex;
font-size:20px;
font-weight:800;
margin-bottom:-15px;
}
.menu-brand small{
display:flex;
font-size:10px;
letter-spacing:2px;
line-height:1;
}
.menu-overlay{
display:none;
}
nav {
position:fixed;
top:0;
left:0;
width:100%;
padding:1px 5%;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
background:transparent;
box-sizing:border-box;
}
nav.scrolled{
background:white;
box-shadow:0 12px 35px rgba(15,23,42,.08);
backdrop-filter:blur(12px);
}
.header-links{
display: flex;
gap: 50px;
letter-spacing:0.5px;
align-items:center;
text-shadow:
0 4px 15px rgba(0,0,0,.5);
font-weight:800;
font-size:18px;
}
nav.scrolled .header-links a{
color:#1e293b;
}
nav.scrolled .header-logo-title{
color:#1e293b;
}
nav.scrolled .header-logo-subtitle{
color:#64748b;
}
nav.scrolled .header-logo-title1{
color:#1e293b;
}
nav.scrolled .header-logo-subtitle1{
color:#64748b;
}
.header-logo{
z-index:1;
display:flex;
align-items:center;
text-decoration:none;
}
.header-logo-img{
z-index:1;
width:90px;
height:auto;
object-fit:contain;
margin-left:0px;
margin-top:4px;
}
.header-logo-text{
color:white;
font-size:30px;
font-weight:700;
display:flex;
flex-direction:column;
text-decoration:none;
justify-content:center;
gap:10px;
line-height:1;
}
.header-logo-title{
color: rgb(53, 51, 44);
font-size:36px;
font-weight:700;
letter-spacing:2px;
}
.header-logo-subtitle{
font-size:22px;
letter-spacing:4px;
margin-top:4px;
color: rgba(116, 55, 15, 0.89);
}
.header-logo-title1{
color: rgb(255, 255, 255);
font-size:36px;
font-weight:700;
letter-spacing:2px;
}
.header-logo-subtitle1{
font-size:22px;
letter-spacing:4px;
margin-top:4px;
color: rgb(255, 255, 255);
}
.logotxt:hover{
color:#dbeafe;
}
.header-links li{
position:relative;
}
.header-links li{
list-style:none;
}
.header-links li:not(:last-child)::after{
content:"│";
margin-left:20px;
color:rgba(255, 255, 255, 0.788);
}
nav div {
display: flex;
gap: 25px;
}
/* encabezado*/
nav a {
text-decoration:none;
color:white;
font-weight:400;
transition:.3s;
position:relative;
}
nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#1e3a8a;
transition:.5s;
}
nav a:hover{
color:#dbeafe;
}
nav a:hover::after{
width:100%;
}
/* */
nav button{
background-color: #1e3a8a;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
}
/*==================================================
H O M E
==================================================*/
.home-hero{
position:relative;
min-height:100vh;
overflow:hidden;
background-size: cover;
background-position: center;
padding:0 28px;
display: flex;
align-items: flex-end;
}
.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
z-index:10;
}
.home-hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:18%;
background:linear-gradient(
to bottom,
rgba(0, 0, 0, 0.74),
transparent
);
z-index:2;
}
.hero-slider{
position:absolute;
inset:0;
z-index:0;
}
.hero-slide{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.2s ease;
animation:heroZoom 8s ease forwards;
will-change:transform;
}
.hero-slide.active{
opacity:1;
}
.hero h1{
font-size:72px;
line-height:1.05;
font-weight:700;
margin-bottom:25px;
}
.hero p{
font-size:22px;
color:#f3f4f6;
margin-bottom:40px;
}
.home-hero-content{
position: relative;
z-index: 3;
color:#fff;
max-width: 800px;
margin-left: 5%;
margin-bottom: 8%;
}
.home-hero-content h1{
font-size:68px;
font-weight:700;
line-height:1.1;
margin-bottom:25px;
letter-spacing:-2px;
color:#fff;
text-shadow:
0 2px 8px rgba(0,0,0,.35),
0 8px 20px rgba(0,0,0,.25);
}
.home-hero-content p{
position:relative;
display:inline-block;
font-size:24px;
line-height:1.5;
max-width:800px;
margin:0 0 5px;
color:white;
font-weight:500;
text-shadow:0 3px 10px rgba(0,0,0,.35);
z-index:2;
}
.home-hero-content p::before{
content:"";
position:absolute;
top:-14px;
bottom:-14px;
left:-120px; /* Hace que nazca desde la izquierda */
right:-30px;
background:linear-gradient(
90deg,
rgba(30,58,138,.90),
rgba(30,58,138,.70)
);
z-index:-1;
}
.hero-buttons{
display:flex;
gap:45px;
margin-top:25px;
text-shadow:
0 3px 15px rgba(255,255,255,.8);
}
.btn-primary i{
font-size:28px;
margin-right:8px;
}
.btn-secondary{
background:rgba(255,255,255,.08);
color:#fff;
border:2px solid rgb(255, 255, 255);
padding:18px 42px;
border-radius:8px;
font-weight:700;
text-shadow:0 2px 8px rgb(0, 0, 0);
font-size:16px;
text-decoration:none;
text-transform:none;
letter-spacing:.5px;
display:inline-flex;
justify-content:center;
align-items:center;
transition:all .35s ease;
box-shadow:0 8px 25px rgba(18,61,146,.25);
}
.btn-secondary:hover{
background:white;
color:#123D92;
}
.hero .btn-primary{
font-size:18px;
padding:18px 42px;
}
.home-properties{
padding:1px 20px;
text-align: center;
background:#F8F7F4;
/*background: rgba(235, 235, 235, 1);*/
/*background: rgba(238, 238, 238, 1);*/
}
.home-properties h2{
font-size: 42px;
margin-bottom: 65px;
}
.btn-primary{
background:#123D92;
color:#fff;
border:1px solid rgb(255, 255, 255);
padding:18px 42px;
border-radius:8px;
font-weight:700;
font-size:16px;
text-decoration:none;
display:inline-flex;
justify-content:center;
align-items:center;
transition:all .35s ease;
letter-spacing:.2px;
box-shadow:
0 8px 20px rgba(0,0,0,.18);
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.btn-primary:hover{
background:#3e5492;
box-shadow:0 10px 20px rgba(30,58,138,.25);
transform: scale(1.05);
}
.home-about{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
padding:120px 8%;
background:white;
position: relative;
}
.about-background{
position:absolute;
width:145%;
height:620px;
/*background:rgba(238,223,184,.97);*/
background:#F8F7F4;
background-image:url("img/fondo-figura2.jpeg");
bottom:40px;
right:5%;
border-radius:3px;
z-index:0;
}
.home-about-image,
.home-about-content{
position:relative;
z-index:2;
}
.home-about-image{
flex:1;
}
.home-about-image img{
width:100%;
max-width:800px;
height:500px;
object-fit:cover;
border-radius:10px;
transition:.4s;
}
.home-about-image img:hover{
transform:scale(1.01);
}
.home-about-content{
flex:1;
}
.home-section-tag{
color:#1e3a8a;
font-weight:bold;
letter-spacing:3px;
font-size:14px;
margin-bottom: 12px;
}
.home-about-list{
display:flex;
flex-direction:column;
gap:18px;
}
.home-about-list div{
margin-bottom:10px;
font-size:18px;
color:#141414;
}
.home-about-content h2{
font-size:40px;
margin:8px 0;
line-height:1.2;
color:#1e3b31;
}
.home-about-content p{
color:#1e293b;
line-height:1.9;
font-size:18px;
margin-bottom:35px;
}
.home-service-card a{
display:inline-block;
margin-top:25px;
color:#1e3a8a;
font-weight:600;
text-decoration:none;
transition:.3s;
}
.services {
padding: 90px 8%;
background: #f8fafc;
}
.services-header {
text-align: center;
max-width: 1200px;
margin: 0 auto 60px;
}
.services-label {
display: inline-block;
color: #1e3a8a;
font-size: 19px;
font-weight: 900;
letter-spacing: 3px;
margin-bottom: 15px;
}
.services-header h2 {
color: #0f1f3d;
font-size: 48px;
line-height: 1.1;
margin: 0;
}
.services-header p {
color: #64748b;
font-size: 18px;
line-height: 1.6;
}
.services-content {
max-width: 1250px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.service-card {
display: flex;
align-items: center;
gap: 35px;
background: #ffffff;
padding: 45px;
border-radius: 18px;
border-left: 4px solid #1e3a8a;
box-shadow:
0 10px 30px rgba(15, 23, 42, 0.06);
margin-bottom: 30px;
transition: transform .3s ease,
box-shadow .3s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow:
0 15px 35px rgba(15, 23, 42, 0.10);
}
.service-icon {
min-width: 110px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eff6ff;
color: #1e3a8a;
font-size: 40px;
}
.service-info h3 {
color: #0f1f3d;
font-size: 23px;
margin: 0 0 15px;
line-height: 1.3;
}
.service-info p {
color: #64748b;
font-size: 16px;
line-height: 1.7;
margin-bottom: 20px;
}
.service-link {
color: #1e3a8a;
font-weight: 800;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap .3s ease;
}
.service-link:hover {
gap: 13px;
}
.services-image {
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 30px;
}
.services-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.services-trust {
position: relative;
background: #eff6ff;
padding: 50px 40px 35px;
text-align: center;
border-radius: 0 0 25px 25px;
margin-top: -5px;
}
.trust-icon {
width: 65px;
height: 65px;
margin: -80px auto 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #1e3a8a;
color: white;
font-size: 24px;
border: 7px solid #f8fafc;
}
.services-trust h3 {
color: #1e3a8a;
font-size: 24px;
margin-bottom: 15px;
}
.services-trust p {
color: #64748b;
line-height: 1.7;
margin: 0;
}
.home-cta{
background-color: #ffffff;
color: rgb(17, 17, 17);
text-align: center;
padding:80px 20px;
}
.home-cta h2{
font-size: 30px;
margin-bottom: 15px;
font-weight:800;
}
.home-cta p{
margin-bottom: 35px;
font-size: 17px;
font-weight:600;
color: black;
}
/*==================================================
F O O T E R
==================================================*/
footer{
/*0F2C59*/
background:#193275;
color:#d8d8d8;
/*padding:150px 8% 25px;*/
padding:100px 5% 25px;
}
.footer-container{
max-width:1600px;
width:90%;
margin:auto;
align-items:start;
display:grid;
/*grid-template-columns:repeat(5,1fr);*/
grid-template-columns:repeat(auto-fit,minmax(257px,1fr));
gap:40px;
}
.footer-column{
display:flex;
flex-direction:column;
gap:18px;
padding-top:1px;
}
.footer-column a{
color:#ffffff;
text-decoration:none;
transition:.3s;
line-height:1.8;
margin:0;
overflow-wrap:break-word;
}
.footer-column a:hover{
transform:translateX(5px);
opacity:.8;
}
.footer-social{
display:flex;
flex-wrap:wrap;
gap:15px;
}
.footer-social a{
width:45px;
height:45px;
background:rgba(255,255,255,.15);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:20px;
transition:.3s;
}
.footer-social a:hover{
transform:translateY(-5px);
background:white;
color:#1e3a8a;
}
.footer-social a:hover{
transform:translateY(-5px);
}
.footer-column h3{
color:white;
font-size:32px;
letter-spacing:.5px;
margin:0;
}
.footer-column h4{
font-size:16px;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:5px;
padding-top:3px;
}
.footer-column p{
color:#ffffff;
line-height:1.8;
margin:0;
overflow-wrap:break-word;
/*word-break:break-word;*/
}
.footer-column p i{
width:22px;
color:#7dd3fc;
}
.footer-copy{
margin-top:60px;
border-top:1px solid rgba(255,255,255,.2);
padding-top:25px;
text-align:center;
color:white;
font-size:15px;
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.12);
margin-top:50px;
padding-top:25px;
text-align:center;
color:#8d8d8d;
}
html{
scroll-behavior: smooth;
}
.whatsapp-btn{
position: fixed;
bottom: 30px;
right:30px;
left:auto;
width: 70px;
height: 70px;
background-color: #25D366;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 40px;
box-shadow: 0 5px 15px rgba(0,0,0,.30);
transition: .2s;
z-index:2;
transform:none;
animation:pulseShadow 2.5s infinite;
}
.whatsapp-tooltip{
position:absolute;
right:75px;
background:white;
color:#1f2937;
padding:10px 18px;
border-radius:30px;
white-space:nowrap;
font-size:14px;
font-weight:600;
box-shadow:0 8px 25px rgba(0,0,0,.18);
opacity:0;
transform:translateX(20px);
transition:.35s;
pointer-events:none;
}
.whatsapp-btn:hover{
box-shadow:0 18px 40px rgba(0,0,0,.14);
transform:scale(1.1);
}
.whatsapp-btn:hover .whatsapp-tooltip{
opacity:1;
transform:translateX(0);
}
.home-section-title{
text-align: center;
margin-bottom: 60px;
}
.home-section-title h1{
font-size: 42px;
color: #af8e22;
margin-bottom: 15px;
}
.home-section-title h2{
font-size:34px;
color:#1e293b;
margin-bottom:8px;
font-weight:700;
}
.home-section-title h2::after{
content:"";
display:block;
width:220px;
max-width:80%;
height:4px;
background:#1e3a8a;
margin:18px auto 0;
border-radius:20px;
}
.home-section-title p{
max-width:650px;
width:90%;
margin:18px auto;
font-size:19px;
line-height:1.7;
color:#64748b;
}
.home-property-container-grid{
display: flex;
flex-direction: row;
justify-content: center;
gap: 50px;
margin-bottom: 100px;
flex-wrap: wrap;
margin-top:-30px;
}
.home-property-image img{
width:100%;
height:400px;
object-fit:cover;
display:block;
transition:.4s;
}
.badge{
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
background:#dc2626;
color: white;
font-size: 13px;
letter-spacing:.5px;
font-weight: bold;
padding:8px 14px;
border-radius: 20px;
z-index: 1;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
animation:pulseScale 2s infinite ease-in-out;
}
.home-property-card > p{
margin: 15px 0;
color: #555;
}
/*====================== T A R J E T A S ===========================*/
.home-property-card{
display:block;
text-decoration:none;
width: 450px;
background-color: rgb(238, 236, 236);
border-radius:5px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.205);
transition: transform 0.3s ease, box-shadow .3s ease;
position: relative;
text-align:left;
border:1px solid #ececec;
cursor: pointer;
margin-bottom:20px;
}
/**/
.home-property-image{
position: relative;
overflow: hidden;
}
.image-info{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:35px;
color:white;
background:linear-gradient(
transparent,
rgba(0,0,0,.80)
);
transform:translateY(100%);
transition:.35s;
font-weight:700;
letter-spacing: 1.2px;
}
.home-property-card:hover .image-info{
transform:translateY(0);
}
.home-property-card:hover{
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.home-property-card:hover img{
transform: scale(1.10);
}
.home-property-card h3{
font-size:27px;
font-weight:700;
letter-spacing:1.5px;
color:#1e293b;
margin:0 0 4px;
}
.home-property-card:hover h3{
color:#1e3a8a;
}
.home-property-content{
padding:1px;
display:flex;
flex-direction:column;
}
.home-property-content h3{
display:flex;
flex-direction:column;
gap:12px;
letter-spacing:2px;
}
.home-property-short {
font-size:24px;
color:#1e3a8a;
font-weight:700;
margin: 0;
}
.property-price{
display:flex;
align-items:baseline;
gap:10px;
margin:8px 0 10px;
}
.price-label{
font-size:21px;
font-weight:800;
letter-spacing:1.2px;
color:#151d29;
}
.price{
font-size:32px;
font-weight:700;
color:#1e3a8a;
margin:0;
}
.home-property-location{
display:flex;
align-items:center;
gap:7px;
margin:0;
font-size:16px;
font-weight:500;
color:#1e293b;
margin-top: 15px;
}
.home-property-location i{
color:#1e3a8a;
font-size:18px;
padding-left:10px;
}
.home-properties-more{
text-align:center;
margin-top:10px;
margin-bottom:20px;
}
.home-property-decription{
color:#64748b;
font-size:15px;
margin:0;
line-height:1.5;
}
.promo-banner{
height:180px;
background-image:url("img/bannerpag.jpg");
background-size:cover;
background-position:center;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.promo-overlay{
position:absolute;
inset:0;
background:rgba(0, 0, 0, 0.158);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:white;
}
.promo-overlay h2{
font-size:40px;
margin-bottom:20px;
}
.promo-overlay p{
font-size:20px;
max-width:700px;
margin-bottom:35px;
line-height:1.6;
}
.home-stats{
background:#032688;
background-image:url("img/fondo-figura.webp");
display:flex;
justify-content:center;
gap:25px;
padding:75px 20px;
flex-wrap:wrap;
}
.home-stat-card{
width:100%;
max-width:320px;
text-align:center;
padding:40px 25px;
border-radius:20px;
background: rgb(255,255,255,1);
box-shadow:0 12px 35px rgba(0,0,0,.08);
transition:.35s;
}
.home-stat-card:hover{
transform:translateY(-5px);
}
.home-stat-card h2{
font-size:50px;
margin:0;
color: #ba5a5a;
position:relative;
}
.home-stat-card p{
font-size:18px;
color: #080808;
margin-top:18px;
line-height:1.6;
}
.home-stat-card h2::after{
content:"";
display:block;
width:0px;
height:3px;
background:#d66c6c;
margin:18px auto;
border-radius:20px;
transition:.45s;
}
.home-stat-card:hover h2::after{
width:80px;
}
/*//////////////////////D E T A L L E S P R O P I E D A D////////////////////// */
.detail-property{
background:#fff;
position:relative;
}
.detail-page{
background: rgb(249, 249, 250);
}
.detail-page nav{
background:rgba(255, 255, 255, 0.699);
box-shadow:0 2px 12px rgba(255, 0, 0, 0.08);
}
.detail-page nav.scrolled{
background:white;
box-shadow:0 12px 35px rgba(15,23,42,.08);
backdrop-filter:blur(12px);
}
.detail-logo-title{
color: rgba(28, 51, 78, 0.973);
font-size:36px;
font-weight:700;
letter-spacing:2px;
}
.detail-logo-subtitle{
color: rgba(28, 51, 78, 0.973);
font-size:15px;
letter-spacing:4px;
margin-top:4px;
}
.detail-page .logo{
color:#1e293b;
}
.detail-page .logo-main{
color:#1e293b;
}
.detail-page .logo-sub{
color:#8b6864;
}
.detail-page nav a{
color:#3b1e1e;
}
.detail-hero{
position:relative;
height: 100vh;
margin:0;
overflow:hidden;
}
.detail-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.85);
backdrop-filter:blur(8px);
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
font-size:18px;
color:#1e3a8a;
box-shadow:0 10px 25px rgba(0,0,0,.18);
transition:.3s;
z-index:30;
}
.detail-arrow:hover{
transform:translateY(-50%) scale(1.08);
background:white;
}
.detail-arrow.prev{
left:15px;
}
.detail-arrow.next{
right:15px;
}
.detail-gallery{
height:100%;
position:relative;
}
.detail-main-image{
width:100%;
height:100%;
object-fit:cover;
transition: opacity 1s ease;
}
.detail-dots{
display:none;
}
.detail-property-info{
position:absolute;
right:1px;
top:52%;
border-top-left-radius: 5px;
transform:translateY(-50%);
padding:7px;
background:rgba(247, 242, 242, 0.466);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.45);
box-shadow:0 30px 70px rgba(0,0,0,.20);
}
/* */
.detail-back-link{
position:absolute;
top:200px;
left:35px;
z-index:100;
background:#1e3a8a;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:#ffffff;
text-decoration:none;
padding:12px 22px;
border-radius:40px;
font-weight:600;
font-size:15px;
box-shadow:0 8px 20px rgba(0,0,0,.15);
transition:.3s;
}
.detail-back-link i{
font-size:13px;
transition:.3s;
}
.detail-back-link:hover{
background:rgb(219, 19, 19);
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.detail-back-link:hover i{
transform:translateX(-5px);
}
/**/
.detail-status{
display:inline-block;
margin-top:10px;
background:#1e3a8a;
color:white;
padding:8px 18px;
border-radius:50px;
font-size:13px;
font-weight:700;
letter-spacing:2px;
margin-bottom:20px;
}
.detail-property-info h1{
font-size:42px;
color:#1f2937;
margin:0 0 15px;
line-height:1.2;
}
.detail-price{
font-size:40px;
font-weight:700;
color:#1e3a8a;
margin:10px 0;
}
.detail-location{
color:#000103;
font-size:20px;
margin-bottom:30px;
}
.detail-property-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:35px;
}
.detail-property-features div{
background:white;
border-radius:2px;
padding:20px;
display:flex;
font-size:17px;
font-weight:600;
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,.06);
transition:.35s;
}
.detail-property-features div:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.detail-property-features i{
width:90px;
color:#1e3a8a;
font-size:25px;
text-align:center;
}
.thumbnail-gallery{
position:absolute;
bottom:50px;
left:30px;
display:flex;
gap:12px;
z-index:1;
}
.thumbnail-gallery img{
width: 95px;
height: 70px;
object-fit: cover;
cursor: pointer;
transition: .3s;
z-index:2;
}
.thumbnail{
width: 70px;
height: 70px;
object-fit: cover;
border-radius:14px;
cursor: pointer;
border: 3px solid transparent;
transition: 0.3s;
outline: none;
}
.thumbnail.active{
transform:translateY(-5px);
box-shadow:0 12px 30px rgba(30,58,138,.35);
border:3px solid #1e3a8a;
}
.thumbnail:hover{
transform:translateY(-5px);
box-shadow:0 12px 25px rgba(0,0,0,.20);
}
.property-description {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 70px;
max-width: 1200px;
margin: 0 auto;
padding: 80px 5%;
align-items: start;
background-image: url(img/fondo-figura2.jpeg);
}
/* CONTENIDO DE LA DESCRIPCIÓN */
.description-content h2 {
font-size: 32px;
line-height: 1.25;
margin: 12px 0 25px;
color: #193275;
}
.description-content p {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 18px;
}
/* ETIQUETA */
.section-tag {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
color: #1e3a8a;
}
/* TARJETA DE CARACTERÍSTICAS */
.property-features {
background: #f7f9fc;
border: 1px solid #e5e9f0;
border-radius: 18px;
padding: 30px;
}
.property-features ul {
list-style: none;
padding: 0;
margin: 25px 0 0;
}
.property-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid #e2e6ec;
color: #444;
font-size: 15px;
}
.property-features li:last-child {
border-bottom: none;
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: #1e3a8a;
color: white;
font-size: 12px;
font-weight: bold;
flex-shrink: 0;
}
.detail-property-map{
padding:100px 8%;
background:#F8F7F4;
}
.detail-map-content{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:420px 1fr;
gap:60px;
align-items:center;
}
.detail-map-frame iframe{
width:100%;
height:450px;
border:none;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.detail-map-text h2{
font-size:40px;
color:#1e293b;
margin:15px 0 20px;
}
.detail-map-text p{
color:#64748b;
line-height:1.9;
font-size:18px;
}
.detail-property-contact-section{
padding:100px 8%;
background:white;
}
.detail-contact-container{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:start;
}
.detail-property-plan img{
width:100%;
height:600px;
object-fit:contain;
background:white;
border-radius:15px;
box-shadow:0 15px 35px rgba(0,0,0,.10);
}
.detail-property-plan a{
display:inline-block;
margin-top:20px;
text-decoration:none;
color:#1e3a8a;
font-weight:700;
}
.detail-contact-form form{
display:flex;
flex-direction:column;
gap:18px;
}
.detail-contact-form input,
.detail-contact-form textarea{
width:100%;
padding:16px;
border:1px solid #ddd;
border-radius:12px;
font-family:inherit;
font-size:16px;
}
.detail-contact-form textarea{
height:150px;
resize:none;
}
.property-gallery{
display: flex;
flex-direction: column;
margin-bottom: 30px;
z-index:2;
}
.property-gallery::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to right,
rgba(0,0,0,.15),
rgba(0,0,0,.45)
);
}
.related-properties{
margin-top: 80px;
}
.related-properties h2{
text-align: center;
margin-bottom: 40px;
}
.features-grid{
display: grid;
grid-template-columns: repeat(2,1fr);
gap:20px;
margin:20px 0;
}
.feature-box{
background:white;
min-height: 80px;
display: flex;
padding: 15px;
border-radius: 15px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow:0 5px 15px rgba(0,0,0,.08);
transition:.3s;
text-align: center;
}
.feature-box:hover{
transform:translateY(-5px);
}
/*==========================================================================================
P R O P I E D A D E S //// C A T A L O G
=======================================================================================*/
/*========================== C A T A L O G S E A R C H ==========================*/
.catalog-nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 5%;
}
.catalog-search{
display:flex;
justify-content:center;
margin:25px 0 40px;
margin-top:120px;
}
.catalog-search-box{
display:grid;
grid-template-columns:30px 1fr;
width:100%;
max-width:700px;
background:white;
border-radius:60px;
padding:18px 28px;
display:flex;
align-items:center;
gap:18px;
box-shadow:0 15px 45px rgba(0,0,0,.12);
border:1px solid rgb(49, 46, 46);
z-index: 1001;
}
.catalog-search-box i{
color:#1e3a8a;
font-size:22px;
cursor: text;
pointer-events:none;
}
.catalog-search-box input{
background:rgba(255,0,0,.15);
flex:1;
min-width:0;
border:none;
outline:none;
font-size:17px;
font-family:inherit;
background:transparent;
z-index: 1001;
}
/*==========================C A T A L O G F I L T E R==========================*/
.catalog-filter-section{
margin:45px 0;
display:flex;
justify-content:center;
}
.catalog-filter-container{
display:flex;
gap:18px;
flex-wrap:wrap;
justify-content:center;
}
.catalog-filter-btn{
background:white;
border:none;
padding:14px 30px;
border-radius:50px;
cursor:pointer;
font-size:16px;
font-weight:600;
color:#334155;
box-shadow:0 6px 20px rgba(0,0,0,.08);
transition:.30s;
}
.catalog-filter-btn:hover{
transform:translateY(-3px);
background:#1e3a8a;
color:white;
}
.catalog-filter-btn.active{
background:#1e3a8a;
color:white;
}
/*========================== C A T A L O G C A R D ==========================*/
.catalog-properties{
width:92%;
max-width:1800px;
margin:auto;
}
.catalog-badge{
position:absolute;
top:16px;
left:16px;
background:#1e3a8a;
color:white;
padding:8px 14px;
border-radius:30px;
font-size:12px;
font-weight:700;
letter-spacing:.8px;
z-index:5;
animation:pulseScale 2s infinite ease-in-out;
}
.catalog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
padding-bottom:50px;
}
.catalog-card{
height:100%;
background:#fff;
border-radius:22px;
overflow:hidden;
transition:.35s ease;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.catalog-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 55px rgba(0,0,0,.15);
}
.catalog-image{
position:relative;
overflow:hidden;
border-radius:22px 22px 0 0;
border-bottom:1px solid #ececec;
}
.catalog-card:hover .catalog-image img{
transform:scale(1.08);
}
.catalog-image-gradient{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.38),
rgba(0,0,0,0)
);
opacity:0;
transition:.35s;
}
.catalog-card:hover .catalog-image-gradient{
opacity:1;
}
.catalog-image img{
object-position:center;
width:100%;
height:330px;
object-fit:cover;
transition:.45s;
}
.catalog-content{
padding:16px;
display:flex;
flex-direction:column;
flex:1;
}
.catalog-name{
position:relative;
padding-bottom:14px;
margin-bottom:14px;
font-size:24px;
margin:0;
}
.catalog-name::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:60px;
height:3px;
border-radius:20px;
background:#1e3a8a;
}
.catalog-location{
margin:4px 0 0;
color:#64748b;
}
.catalog-price{
display:inline-block;
font-size:30px;
font-weight:700;
color:#1e3a8a;
margin:14px 0 14px;
transition:.35s;
}
.catalog-card:hover .catalog-price{
color:#163a80;
letter-spacing:.5px;
}
.catalog-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin:10px 0;
}
.catalog-feature{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:1px;
padding:1px;
background:white;
border:1px solid #edf2f7;
border-radius:14px;
transition:.3s;
}
.catalog-feature i{
font-size:22px;
color:#1d4597;
}
.catalog-feature span{
font-size:16px;
font-weight:600;
color:#475569;
}
.catalog-feature:hover{
background:#eef4ff;
transform:translateY(-4px);
}
.catalog-btn{
display:flex;
justify-content:center;
align-items:center;
margin-top:auto;
padding:15px;
border-radius:14px;
background:#1d4597;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.3s;
}
.catalog-btn:hover{
transform:translateY(-3px);
}
.menu-toggle{
display:none;
width:30px;
height:20px;
cursor:pointer;
position:relative;
z-index:1001;
}
.menu-toggle span{
position:absolute;
left:12px;
width:25px;
height:3px;
background:#1e3a8a;
border-radius:50px;
transition:.35s;
}
.menu-toggle span:nth-child(1){
top:14px;
}
.menu-toggle span:nth-child(2){
top:50%;
transform:translateY(-50%);
}
.menu-toggle span:nth-child(3){
bottom:14px;
}
.menu-toggle.active span:nth-child(1){
top:50%;
transform:translateY(-50%) rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
opacity:0;
}
.menu-toggle.active span:nth-child(3){
bottom:50%;
transform:translateY(50%) rotate(-45deg);
}
/* =============================S E R V I C I O C O M P R A ==============================*/
.service-process{
padding:70px 8% 1px;;
background:#ffffff;
}
.process-grid{
margin-top:70px;
margin-bottom:40px;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:25px;
}
.process-step{
background:#fafafa;
border-radius:18px;
padding:35px 25px;
text-align:center;
transition:.35s;
position:relative;
border:1px solid rgba(30,58,138,.08);
}
.process-step:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.process-number{
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
width:38px;
height:38px;
border-radius:50%;
background:#1e3a8a;
color:white;
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
}
.process-step i{
font-size:42px;
color:#1e3a8a;
margin:18px 0;
animation: pulseScale 2s infinite ease-in-out;
}
.process-step h3{
margin:15px 0;
color:#1e293b;
}
.process-step p{
color:#64748b;
line-height:1.7;
}
.service-why{
padding:40px 8% 80px;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
background:#ffffff;
}
.service-why-image{
flex:1;
}
.service-why-content{
flex:1;
}
.service-why-image img{
width:100%;
border-radius:20px;
display:block;
object-fit:cover;
}
.service-why-content span{
color:#1e3a8a;
font-weight:700;
letter-spacing:2px;
}
.service-why-content h2{
font-size:42px;
margin:20px 0;
color:#0f1e46;
}
.service-why-content p{
color:#1e3a8a;
line-height:1.8;
}
.why-list{
margin-top:35px;
display:flex;
flex-direction:column;
gap:18px;
color:#1e3a8a;
}
.why-list div{
display:flex;
align-items:center;
gap:12px;
font-weight:600;
}
.why-list i{
color:#1e3a8a;
font-size:20px;
}
/*========================
SERVICE HERO
========================*/
.service-hero{
position:relative;
min-height:70vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:white;
background-image:url("img/propiedad-molina/nuevo2.webp");
background-size:cover;
background-position:center;
}
.service-hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0, 0, 0, 0.185);
}
.service-overlay{
position:relative;
z-index:2;
width:min(900px,90%);
}
.service-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 24px;
border-radius:999px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
color:#1e3a8a;
font-size:15px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
box-shadow:0 8px 24px rgba(0,0,0,.12);
border:1px solid rgba(255,255,255,.35);
}
.service-tag::before{
content: "";
display:block;
width:50px;
height:2px;
background:#0538c5;
margin:10px auto 0;
}
.service-tag::after{
content: " ";
display:block;
width:50px;
height:2px;
background:#0538c5;
margin:10px auto 0;
}
.service-overlay h1{
font-size:64px;
font-weight:700;
margin:20px 0;
text-shadow:
0 3px 15px rgba(12, 11, 11, 0.8);
}
.service-overlay p{
max-width:650px;
font-size:20px;
margin:auto;
text-shadow:
0 3px 15px rgba(12, 11, 11, 0.8);
}
/*========================
SERVICE FEATURES
========================*/
.service-features{
padding:70px 8%;
background: #fafafa;
}
.service-title{
text-align:center;
max-width:700px;
margin:auto;
}
.service-title span{
color:#1e3a8a;
font-weight:700;
letter-spacing:2px;
font-size: 30px;
}
.service-title p{
color:#64748b;
line-height:1.8;
font-size: 22px;
}
.service-grid{
margin-top:50px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.service-card{
background:white;
border-radius:18px;
padding:40px;
box-shadow:0 10px 30px rgba(30,58,138,.10);
transition:.35s;
}
.service-card:hover{
transform:translateY(-10px);
}
.service-card i{
font-size:42px;
color:#1e3a8a;
animation: pulseScale 2s infinite ease-in-out;
}
.service-card h3{
margin:25px 0 15px;
}
.service-card p{
color:#3c4653;
line-height:1.8;
}
.service-cta{
border-top:1px solid rgba(255,255,255,.08);
padding:100px 8%;
background:#f8fafc;
}
.service-cta-content{
max-width:750px;
margin:auto;
text-align:center;
}
.service-cta-content span{
color:#0538c9;
font-weight:700;
letter-spacing:2px;
font-size:14px;
}
.service-cta-content h2{
font-size:42px;
margin:20px 0;
color:#1f2937;
}
.service-cta-content p{
font-size:18px;
color:#6b7280;
margin-bottom:35px;
line-height:1.7;
}
.service-cta .btn-primary{
display:inline-flex;
align-items:center;
gap:12px;
}
/*==================================================
R E S P O N S I V E - T A B L E T S
==================================================*/
@media (max-width: 900px){
/*===================================HEADER=========================================*/
nav{
padding:15px 20px;
}
.catalog-nav{
padding:15px 20px;
}
.header-logo-img{
width:60px;
height:80px;
margin:0;
}
.header-logo-title{
font-size:24px;
letter-spacing:1px;
}
.header-logo-subtitle{
font-size:12px;
letter-spacing:2px;
}
/*======================== M E N U M O V I L ===================================*/
.menu-brand{
display:flex;
}
.header-links li:not(:last-child)::after{
content:"";
margin-left:1px;
color:rgba(255, 255, 255, 0.788);
}
.menu-social{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
margin-top:200px;
}
.menu-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.35);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:998;
}
.header-links.active{
right:0;
}
.menu-overlay.active{
opacity:1;
visibility:visible;
}
.header-links{
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
background:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:28px;
transition:.35s;
box-shadow:-10px 0 30px rgba(0,0,0,.15);
z-index:999;
}
.home-services-image{
display:none;
}
.services {
padding: 80px 5%;
}
.services-header h2 {
font-size: 38px;
}
.services-content {
grid-template-columns: 1fr;
gap: 40px;
}
.header-links a{
color:#1e293b;
font-size:20px;
font-weight:700;
text-align:center;
}
.menu-toggle{
position: relative;
z-index: 1001;
display:flex;
justify-content:center;
align-items:center;
width:48px;
height:48px;
border-radius:12px;
background:white;
cursor:pointer;
color:#1e3a8a;
font-size:22px;
box-shadow:0 8px 20px rgba(0,0,0,.12);
}
/*==================================== H O M E - H E R O ======================================*/
.home-hero{
height:90vh;
align-items:center;
}
.home-hero-content{
margin:0;
padding:0 20px;
max-width:100%;
text-align:center;
}
.home-hero-content h1,
.home-hero-content h2{
font-size:48px;
line-height:1.15;
margin:0;
}
.home-hero-content p{
font-size:18px;
line-height:1.5;
margin:25px auto;
width:100%;
}
.hero-buttons{
gap:15px;
}
/*==================================== H O M E - P R O P I E D A D E S ======================================*/
.home-property-container-grid{
flex-direction:column;
align-items:center;
gap:25px;
}
.home-property-card{
width:100%;
max-width:420px;
}
.home-property-image img{
height:280px;
}
/*==================================== H O M E - B A N N E R ======================================*/
.promo-banner{
height:auto;
min-height:320px;
padding:50px 20px;
}
.promo-overlay{
padding:20px;
}
.promo-overlay h2{
font-size:32px;
line-height:1.2;
}
.promo-overlay p{
font-size:17px;
line-height:1.6;
margin-bottom:25px;
}
/*==================================== H O M E - N O S O T R O S ======================================*/
.home-about{
flex-direction: column;
gap: 50px;
text-align: center;
}
.home-about-image{
width:100%;
}
.home-about-image img{
width:100%;
height:auto;
max-width:500px;
margin:auto;
display:block;
}
.home-about-content{
width:100%;
}
.home-about-content h2{
font-size:28px;
margin:8px 0;
line-height:1.2;
color:#1e3b31;
}
.home-about-list{
align-items:center;
}
/*==================================== F O O T E R ======================================*/
.footer-container{
/* grid-template-columns:1fr;
gap:35px;*/
grid-template-columns:repeat(2,1fr);
gap:40px;
text-align:center;
}
/*==================================== C A T A L O G ======================================*/
.catalog-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}
/*==================================== D E T A I L ======================================*/
.home-services-content{
flex-direction:column;
align-items:center;
}
.home-services-image{
display:none;
}
/*========================
DESCRIPTION MOBILE
========================*/
.detail-section-tag{
font-size:12px;
letter-spacing:2px;
}
.detail-property-description{
padding:60px 20px;
}
.property-description {
grid-template-columns: 1fr;
gap: 40px;
padding: 60px 5%;
}
.description-content h2 {
font-size: 27px;
}
.property-features {
padding: 25px;
}
.detail-description-container h2{
font-size:28px;
line-height:1.3;
margin:15px 0 20px;
}
.detail-description-container p{
font-size:16px;
line-height:1.7;
margin-bottom:18px;
}
.detail-hero{
position:relative;
height:auto;
min-height:auto;
}
.detail-main-image{
width:100%;
height:55vh;
min-height:340px;
max-height:500px;
object-fit:cover;
}
.detail-property-info{
position:static;
transform:none;
width:100%;
border-radius:1px;
margin-top:20px;
}
.thumbnail-gallery{
position:relative;
display:none;
bottom:auto;
left:auto;
justify-content:center;
margin:20px 0;
flex-wrap:wrap;
}
.detail-property-features{
display:grid;
grid-template-columns:repeat(2,1fr);
margin-top:3px;
gap:12px;
padding:10px 0;
}
.detail-property-features div{
padding:16px;
border-radius:14px;
}
.detail-back-link{
top:115px;
left:1px;
padding:10px 18px;
font-size:14px;
}
.detail-property-contact-section{
padding:60px 20px;
}
.detail-contact-container{
grid-template-columns:1fr;
gap:50px;
}
.detail-property-map{
padding:60px 20px;
}
.detail-map-content{
grid-template-columns:1fr;
gap:35px;
}
.detail-map-text h2{
font-size:28px;
line-height:1.3;
}
.detail-map-text p{
font-size:16px;
line-height:1.7;
}
.detail-map-frame iframe{
height:300px;
border-radius:16px;
}
.detail-property-plan img{
height:auto;
max-height:450px;
}
.detail-contact-form form{
gap:15px;
}
.detail-contact-form input,
.detail-contact-form textarea{
box-sizing:border-box;
}
.detail-contact-form .btn-primary{
width:100%;
}
/*================== DETALLE RESPONSIVE ==================*/
.detail-title-row{
display:flex;
justify-content:flex-start;
align-items:center;
gap:clamp(20px,5vw,165px);
}
.detail-title-row h1{
margin:0;
font-size:32px;
letter-spacing: 2px;
}
.detail-title-row .detail-location{
margin:0;
font-size:15px;
white-space:nowrap;
}
.detail-price{
position:absolute;
right:15px;
transform:translateY(-156px);
margin:0;
padding:10px 18px;
background:rgba(30,58,138,.90);
color:white;
font-size:26px;
backdrop-filter:blur(10px);
}
.detail-status{
position:absolute;
left:-1px;
transform:translateY(-85px);
margin:0;
padding:1px 18px;
background:rgba(30,58,138,.90);
color:white;
font-size:16px;
backdrop-filter:blur(10px);
border-radius: 0px;
}
.whatsapp-btn{
position: fixed;
bottom: 15px;
right:15px;
left:auto;
width: 70px;
height: 70px;
background-color: #25D366;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 40px;
box-shadow: 0 5px 15px rgba(0,0,0,.30);
transition: .2s;
z-index:2;
transform:none;
animation:pulseShadow 2.5s infinite;
}
.header-links{
width:100%;
justify-content: center;
}
.service-tag{
display: none;
}
.footer-social{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content: center;
}
.footer-copy{
margin-top:80px;
border-top:1px solid rgba(255,255,255,.2);
padding-bottom:40px;
text-align:center;
color:white;
font-size:15px;
}
}
/*==================================================
R E S P O N S I V E - C E L U L A R E S
==================================================*/
@media (max-width:600px){
/*home*/
.home-hero-content{
padding:0 25px;
}
.home-hero-content h1{
font-size:36px;
line-height:1.15;
margin-bottom:20px;
}
.home-hero-content p{
font-size:16px;
max-width:320px;
}
.hero-buttons{
flex-direction:column;
width:100%;
gap:15px;
}
.hero-buttons a{
width:100%;
text-align:center;
}
.home-services-image{
position:absolute;
right:-120px;
top:80px;
width:320px;
opacity:.08;
}
.home-services-image img{
width:330px;
}
.home-services-image{
display:none;
}
/*======================================C A T A L O G ================================*/
.catalog-search-box{
padding:14px 18px;
border-radius:18px;
}
.catalog-search-box input{
font-size:15px;
}
.catalog-search-box i{
font-size:18px;
}
.catalog-filter-container{
gap:10px;
}
.catalog-filter-btn{
padding:10px 18px;
font-size:14px;
}
.catalog-grid{
grid-template-columns:1fr;
gap:22px;
}
.catalog-card{
border-radius:18px;
}
.catalog-image img{
height:240px;
}
.catalog-content{
padding:18px;
}
.catalog-name{
font-size:22px;
}
.catalog-price{
font-size:28px;
margin:12px 0;
}
.catalog-features{
gap:10px;
margin:18px 0;
}
.catalog-feature{
padding:10px;
}
.catalog-btn{
margin-top:16px;
}
/*price detail*/
.detail-price{
position:absolute;
top:-80px;
right:-1px;
transform:none;
margin:0;
padding:12px 18px;
font-size:24px;
}
.header-links{
width:100%;
}
.footer-container{
grid-template-columns:1fr;
gap:30px;
text-align:center;
}
.service-tag{
display: none;
}
}
/* scroll imagenes */
.detail-dots{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:18px 0;
}
.detail-dots span{
width:10px;
height:10px;
border-radius:50%;
background:#cbd5e1;
transition:.3s;
}
.detail-dots span.active{
width:26px;
border-radius:20px;
background:#1e3a8a;
}
.header-links.active{
right:0;
}
/* *{
outline:1px solid red;
}*/
/* ANIMACIONES */
.hidden{
opacity:1;
transform:translateY(60px);
transition:.8s ease;
}
.reveal{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.reveal-left{
opacity:0;
transform:translateX(-80px);
transition:all .8s ease;
}
.reveal-scale{
opacity:0;
transform:scale(.9);
transition:all .8s ease;
}
.reveal-scale-small{
opacity:0;
transform:scale(.9);
transition:all .8s ease;
}
.show{
opacity:1;
transform:translateY(0);
}
.reveal.show{
opacity:1;
transform:translateY(0);
}
.reveal-left.show{
opacity:1;
transform:translateX(0);
}
.reveal-scale.show{
opacity:1;
transform:scale(1);
}
.reveal-scale-small.show{
opacity:1;
transform:scale(1);
}
.whatsapp-btn i{
animation:pulseScale 2s infinite ease-in-out;
transform-origin:center;
}
/* Animación del Latido (Reveal Scale) */
@keyframes pulseScale {
0% {
transform: scale(1);
}
15% {
transform: scale(1.12); /* Primer pulso hacia afuera */
}
30% {
transform: scale(1); /* Regresa al centro */
}
45% {
transform: scale(1.12); /* Segundo pulso rápido */
}
60% {
transform: scale(1); /* Regresa y hace una pausa corta */
}
100% {
transform: scale(1); /* Mantiene el tamaño original antes de repetir */
}
}
@keyframes pulseShadow{
0%{
box-shadow:0 0 0 0 rgba(37,211,102,.45);
}
70%{
box-shadow:0 0 0 18px rgba(37,211,102,0);
}
100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}
}
@keyframes heroZoom{
from{
transform:scale(1);
}
to{
transform:scale(1.08);
}
}
/*==================================================
RESPONSIVE TABLET GRANDE
1024px
==================================================*/
@media (max-width: 1300px){
.home-services-image{
display:none;
}
}
@media(max-width:1024px){
/* R E S P O N S I V E === S E R V I C E */
.process-grid{
grid-template-columns:repeat(3,1fr);
}
.home-services-image{
display:none;
}
.service-why{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}
.why-list{
align-items:center;
}
.service-tag{
display: none;
}
.footer-copy{
margin-top:80px;
border-top:1px solid rgba(255,255,255,.2);
padding-bottom:80px;
text-align:center;
color:white;
font-size:15px;
}
}
/*==================================================
RESPONSIVE TABLET / MOVIL
768px
==================================================*/
@media(max-width:768px){
/*========================
DETAIL MOBILE
========================*/
.header-links{
justify-content:flex-start;
padding-top:80px;
}
.service-tag{
display: none;
}
/*========================
MENU MOBILE BRAND
========================*/
.menu-brand{
display:flex;
align-items:center;
gap:10px;
margin-bottom:200px;
padding-top:10px;
}
.menu-brand img{
width:45px;
}
.menu-brand div{
display:flex;
flex-direction:column;
}
.menu-brand span{
font-size:20px;
font-weight:800;
line-height:1.1;
}
.menu-brand small{
font-size:10px;
letter-spacing:2px;
line-height:1;
gap:15px;
}
.menu-social{
display:flex;
flex-direction:column;
align-items:center;
margin-top:auto;
gap:15px;
margin-top:200px;
}
.menu-social div{
display:flex;
gap:20px;
}
.menu-social a{
font-size:22px;
}
.detail-property-info{
position:relative;
right:auto;
top:auto;
transform:none;
width:100%;
padding:20px 15px;
box-sizing:border-box;
}
.detail-price{
position:absolute;
top:-111px;
right:-1px;
transform:none;
margin:0;
padding:12px 18px;
font-size:24px;
}
.detail-status{
position:absolute;
top:7px;
left:-1px;
}
.detail-title-row{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.detail-title-row h1{
font-size:28px;
letter-spacing:1px;
}
.detail-title-row .detail-location{
font-size:15px;
}
/*========================
DETAIL DESCRIPTION
========================*/
.detail-property-description{
padding:40px 20px;
}
.detail-description-container{
width:100%;
}
.detail-description-container h2{
font-size:26px;
line-height:1.3;
}
.detail-description-container p{
font-size:16px;
line-height:1.7;
margin-top:18px;
}
.detail-map-content{
grid-template-columns:1fr;
}
.footer-column:not(:first-child){
padding-left:px;
}
/*RESPONSIVE SERVICE*/
.service-hero{
min-height:60vh;
}
.service-overlay h1{
font-size:40px;
}
.service-overlay p{
font-size:17px;
}
.service-features{
padding:70px 6%;
}
.service-grid{
grid-template-columns:1fr;
gap:20px;
}
.service-card{
padding:30px;
}
.service-process{
padding:70px 6% 100px;
}
.process-grid{
grid-template-columns:1fr;
gap:35px;
}
.process-step{
padding:35px 25px;
}
.service-why{
padding:70px 6%;
}
.service-why-content h2{
font-size:32px;
}
.service-cta{
padding:70px 25px;
}
.service-cta-content h2{
font-size:32px;
}
.service-cta-content p{
font-size:16px;
}
.footer-copy{
margin-top:80px;
border-top:1px solid rgba(255,255,255,.2);
padding-bottom:40px;
text-align:center;
color:white;
font-size:15px;
}
}
@media(max-width:480px){
.detail-price{
top:-112px;
}
.header-links{
width:100%;
}
.home-services-image{
width:250px;
right:-90px;
opacity:.06;
}
.home-services-image img{
width:260px;
}
/*RESPONSIVE SERVICE*/
.service-tag{
font-size:12px;
padding:7px 14px;
}
.service-overlay h1{
font-size:32px;
}
.service-overlay p{
font-size:20px;
line-height:1.6;
font-weight: 500;
}
.service-title span{
font-size:13px;
}
.service-title p{
font-size:15px;
margin: 50;
}
.service-card i{
font-size:36px;
}
.service-card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
.service-card h3{
font-size:20px;
}
.process-step i{
font-size:36px;
}
.service-tag{
display: none;
}
.footer-copy{
margin-top:80px;
border-top:1px solid rgba(255,255,255,.2);
padding-bottom:60px;
text-align:center;
color:white;
font-size:15px;
}
}
@media(max-width:375px){
.menu-social{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
margin-top:20px;
}
.menu-social div{
display:flex;
gap:20px;
}
.menu-social a{
font-size:22px;
}
.detail-price{
top:-112px;
}
.home-hero-content h1,
.home-hero-content h2{
font-size:30px;
}
.home-hero-content p{
font-size:17px;
}
/*========================
DETAIL MAP
========================*/
.detail-property-map{
padding:40px 20px;
}
.detail-map-content{
gap:30px;
}
.detail-map-text h2{
font-size:26px;
line-height:1.3;
}
.detail-map-text p{
font-size:16px;
line-height:1.7;
}
.detail-map-frame iframe{
width:100%;
height:300px;
border-radius:16px;
}
/*========================
DETAIL CONTACT
========================*/
.detail-property-contact-section{
padding:40px 20px;
}
.detail-contact-container{
gap:50px;
}
.detail-property-plan h2,
.detail-contact-form h2{
font-size:26px;
line-height:1.3;
}
.detail-property-plan img{
width:100%;
height:auto;
border-radius:16px;
}
.detail-contact-form{
width:100%;
}
.detail-contact-form form{
width:100%;
padding:0 5px;
}
.detail-contact-form input,
.detail-contact-form textarea{
width:100%;
box-sizing:border-box;
}
.detail-contact-form button{
width:100%;
}
.header-links a{
color:#1e293b;
font-size:20px;
font-weight:700;
bottom: 140px;
}
.service-tag{
display: none;
}
.whatsapp-btn{
position: fixed;
bottom: 16px;
right:30px;
left:auto;
width: 70px;
height: 70px;
background-color: #25D366;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 40px;
box-shadow: 0 5px 15px rgba(0,0,0,.30);
transition: .2s;
z-index:2;
transform:none;
animation:pulseShadow 2.5s infinite;
}
}