:root{

--primary:#00a8f3;
--dark:#071120;
--dark2:#111c2d;
--light:#f5f7fb;
--white:#ffffff;
--text:#b8c2d1;

--radius:24px;

--shadow:
0 15px 40px rgba(0,0,0,.2);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;

background:var(--dark);

color:white;

overflow-x:hidden;

line-height:1.6;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

/* HEADER */

.main-header{

position:fixed;

top:0;

width:100%;

z-index:999;

padding:20px 0;

backdrop-filter:blur(14px);

background:rgba(7,17,32,.75);

border-bottom:
1px solid rgba(255,255,255,.05);

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:2rem;

font-weight:800;

}

.logo span{

color:var(--primary);

}

.nav-menu{

display:flex;

align-items:center;

gap:20px;

}

.nav-link{

color:white;

text-decoration:none;

font-weight:500;

}

.btn-nav{

background:var(--primary);

padding:14px 22px;

border-radius:14px;

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-nav:hover{

transform:translateY(-3px);

}

/* HERO */

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

padding:140px 0 100px;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(0,168,243,.2),
transparent 35%
);

}

.hero-grid{

display:grid;

grid-template-columns:1fr 450px;

gap:60px;

align-items:center;

position:relative;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

background:rgba(0,168,243,.15);

border-radius:100px;

color:var(--primary);

font-size:.9rem;

margin-bottom:25px;

}

.hero h1{

font-size:4.5rem;

line-height:1.05;

margin-bottom:25px;

font-weight:800;

}

.hero p{

font-size:1.15rem;

color:var(--text);

max-width:650px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

padding:16px 28px;

border-radius:16px;

text-decoration:none;

font-weight:600;

transition:.3s;

display:inline-flex;

align-items:center;

justify-content:center;

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

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

color:white;

}

.hero-stats{

display:flex;

gap:40px;

margin-top:50px;

flex-wrap:wrap;

}

.hero-stats strong{

display:block;

font-size:1.8rem;

}

.hero-stats span{

color:var(--text);

}

/* SEARCH CARD */

.hero-card{

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

backdrop-filter:blur(20px);

padding:40px;

border-radius:32px;

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

box-shadow:var(--shadow);

}

.hero-card h3{

font-size:1.8rem;

margin-bottom:25px;

}

.search-form{

display:flex;

flex-direction:column;

gap:18px;

}

.search-form select{

background:var(--dark2);

border:none;

padding:16px;

border-radius:14px;

color:white;

font-size:1rem;

}

.search-btn{

background:var(--primary);

border:none;

padding:18px;

border-radius:16px;

color:white;

font-weight:700;

font-size:1rem;

cursor:pointer;

transition:.3s;

}

.search-btn:hover{

transform:translateY(-3px);

}

/* SECTION */

section{

padding:100px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:var(--primary);

letter-spacing:2px;

font-weight:700;

font-size:.9rem;

}

.section-title h2{

font-size:3rem;

margin-top:10px;

}

.results-section,
.results-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:28px;
}

.pro-card{
    position:relative;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:28px;
    color:white;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
    transition:.3s ease;
    overflow:hidden;
}

.pro-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(0,168,243,.18), transparent 35%);
    pointer-events:none;
}

.pro-card:hover{
    transform:translateY(-6px);
    border-color:rgba(0,168,243,.35);
}

.pro-card-top{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.pro-badge{
    display:inline-flex;
    align-items:center;
    background:rgba(0,168,243,.16);
    color:#00a8f3;
    padding:8px 14px;
    border-radius:100px;
    font-size:.8rem;
    font-weight:800;
}

.pro-location{
    color:#b8c2d1;
    font-size:.85rem;
    display:flex;
    align-items:center;
    gap:6px;
}

.pro-avatar{
    position:relative;
    z-index:2;
    width:64px;
    height:64px;
    border-radius:20px;
    background:linear-gradient(135deg,#00a8f3,#005d86);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    font-weight:800;
    margin-bottom:22px;
    box-shadow:0 12px 30px rgba(0,168,243,.25);
}

.pro-content{
    position:relative;
    z-index:2;
}

.pro-content h3{
    font-size:1.55rem;
    line-height:1.2;
    margin-bottom:8px;
    color:white;
}

.pro-content h4{
    font-size:1rem;
    font-weight:600;
    color:#00a8f3;
    margin-bottom:14px;
}

.pro-summary{
    color:#b8c2d1;
    font-size:.95rem;
    line-height:1.6;
    margin-bottom:24px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.pro-actions{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}

.btn-ficha,
.btn-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    padding:14px 16px;
    border-radius:15px;
    font-weight:800;
    font-size:.9rem;
    transition:.3s ease;
}

.btn-ficha{
    background:#00a8f3;
    color:white;
}

.btn-whatsapp{
    background:rgba(37,211,102,.15);
    color:#25D366;
    border:1px solid rgba(37,211,102,.25);
}

.btn-ficha:hover,
.btn-whatsapp:hover{
    transform:translateY(-3px);
}

.pro-map{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    color:#d8dee9;
    font-size:.9rem;
    text-decoration:none;
    margin-bottom:14px;
}

.pro-map:hover{
    color:#00a8f3;
}

.pro-footer{
    position:relative;
    z-index:2;
    color:#7f8ba0;
    font-size:.82rem;
}

/* Mensajes sin resultados */

.no-results{
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:28px;
    padding:42px!important;
    color:#b8c2d1;
    text-align:center;
    box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.no-results p{
    font-size:1.05rem;
    margin-bottom:22px;
}

.no-results .btn-main{
    background:#00a8f3;
    color:white;
    padding:14px 22px;
    border-radius:15px;
    text-decoration:none;
    font-weight:800;
}

/* BENEFITS */

.benefits-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.benefit-card{

background:var(--dark2);

padding:40px;

border-radius:var(--radius);

text-align:center;

transition:.3s;

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

}

.benefit-card:hover{

transform:translateY(-6px);

}

.benefit-card i{

font-size:2rem;

color:var(--primary);

margin-bottom:20px;

}

.benefit-card h3{

margin-bottom:15px;

}

/* RESULTS */

.results-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

/* SERVICES */

.services-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

.service-card{

background:var(--dark2);

padding:40px;

border-radius:var(--radius);

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

transition:.3s;

}

.service-card:hover{

transform:translateY(-6px);

}

.service-card i{

font-size:2rem;

color:var(--primary);

margin-bottom:20px;

}

.service-card h3{

margin-bottom:15px;

}

.service-card p{

color:var(--text);

margin-bottom:25px;

}

.service-card a{

color:var(--primary);

text-decoration:none;

font-weight:700;

}

/* CTA */

.cta-box{

background:
linear-gradient(
135deg,
#00a8f3,
#005d86
);

padding:80px;

border-radius:32px;

text-align:center;

}

.cta-box h2{

font-size:3rem;

margin-bottom:20px;

}

.cta-box p{

max-width:700px;

margin:auto;

margin-bottom:35px;

}

/* FOOTER */

.footer{

padding:60px 0;

text-align:center;

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

}

.footer-links{

margin-top:20px;

}

.footer-links a{

color:var(--text);

text-decoration:none;

margin:0 10px;

}

/* WHATSAPP */

.float-whatsapp{

position:fixed;

bottom:30px;

right:30px;

width:65px;

height:65px;

background:#25d366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

color:white;

text-decoration:none;

z-index:999;

box-shadow:var(--shadow);

transition:.3s;

}

.float-whatsapp:hover{

transform:scale(1.1);

}

.hero-value-card{
    text-align:left;
}

.hero-card-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    background:rgba(0,168,243,.15);
    color:#00a8f3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    margin-bottom:24px;
}

.hero-value-card p{
    color:#b8c2d1;
    margin:18px 0 26px;
}

.hero-value-list{
    list-style:none;
    display:grid;
    gap:14px;
    margin-bottom:30px;
}

.hero-value-list li{
    color:#d8dee9;
    font-weight:600;
}

.hero-value-list li::before{
    content:"✓";
    color:#00a8f3;
    margin-right:10px;
    font-weight:800;
}

/* BUSCADOR HORIZONTAL */

.search-horizontal-section{
    padding:70px 0 40px;
    background:#071120;
}

.search-horizontal-card{
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border-radius:32px;
    padding:36px;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.search-horizontal-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 32px;
}

.search-horizontal-title span{
    color:#00a8f3;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:2px;
}

.search-horizontal-title h2{
    color:white;
    font-size:2.2rem;
    margin-top:8px;
}

.search-horizontal-title p{
    color:#b8c2d1;
    margin-top:10px;
}

.search-form-horizontal{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.search-form-horizontal select{
    width:100%;
    padding:16px 18px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.1);
    background:#111c2d;
    color:white;
    font-size:1rem;
    outline:none;
    cursor:pointer;
    transition:.25s ease;
}

.search-form-horizontal select:focus{
    border-color:#00a8f3;
    box-shadow:0 0 0 4px rgba(0,168,243,.12);
}

.search-form-horizontal select:hover{
    border-color:rgba(0,168,243,.45);
}

@media(max-width:992px){
    .search-form-horizontal{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .search-horizontal-card{
        padding:28px 20px;
    }

    .search-form-horizontal{
        grid-template-columns:1fr;
    }

    .search-horizontal-title h2{
        font-size:1.65rem;
    }
}

/* RESPONSIVE */

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

}

@media(max-width:768px){

.hero h1{

font-size:2.8rem;

}

.section-title h2{

font-size:2rem;

}

.cta-box{

padding:50px 25px;

}

.cta-box h2{

font-size:2rem;

}

.nav{

flex-direction:column;

gap:20px;

}

}

/* Responsive */

@media(max-width:600px){
    .pro-actions{
        grid-template-columns:1fr;
    }

    .pro-card{
        padding:24px;
    }
}