/* ==========================================
RESET
========================================== */

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

:root{

--primary:#0F172A;
--primary-dark:#020617;

--secondary:#F8FAFC;

--success:#198754;
--warning:#fd7e14;
--danger:#dc3545;

--text:#334155;

--white:#ffffff;

--border:#E2E8F0;

--shadow:
0 8px 25px rgba(0,0,0,.08);

}

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

body{

font-family:
'Segoe UI',
Arial,
sans-serif;

background:#F1F5F9;

color:var(--text);

line-height:1.5;

}

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

.topbar{

background:var(--primary);

color:white;

padding:15px 25px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

}

.logo-img{

width:75px;
height:75px;

object-fit:contain;

background:white;

border-radius:12px;

padding:6px;

}

.actions{

display:flex;

gap:10px;

}

.actions a{

color:white;

text-decoration:none;

padding:10px 18px;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.actions a:hover{

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

}

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

.hero{

min-height:500px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

background-size:cover;

background-position:center;

color:white;

}

.hero::before{

content:"";

position:absolute;

inset:0;

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

}

.hero-overlay{

position:relative;

z-index:2;

padding:30px;

max-width:800px;

}

.hero h2{

font-size:3rem;

margin-bottom:15px;

}

.hero p{

font-size:1.2rem;

margin-bottom:25px;

}

.hero-btn{

display:inline-block;

background:white;

color:var(--primary);

text-decoration:none;

padding:14px 30px;

border-radius:12px;

font-weight:700;

}

/* ==========================================
DESTACADO
========================================== */

.destacado-section{

padding:50px 20px;

}

.destacado-section h2{

text-align:center;

margin-bottom:30px;

}

#destacado-container{

max-width:1100px;

margin:auto;

}

/* ==========================================
BUSCADOR
========================================== */

.search-bar{

background:white;

padding:25px;

text-align:center;

}

.search-bar input{

width:100%;

max-width:650px;

padding:15px;

font-size:1rem;

border:1px solid var(--border);

border-radius:12px;

outline:none;

}

/* ==========================================
FILTROS
========================================== */

.filtros{

background:white;

padding:15px;

text-align:center;

}

.filtros button{

background:var(--primary);

color:white;

border:none;

padding:10px 18px;

margin:5px;

border-radius:10px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.filtros button:hover{

opacity:.9;

}

/* ==========================================
CATÁLOGO
========================================== */

.catalogo{

display:grid;

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

gap:25px;

padding:30px;

max-width:1400px;

margin:auto;

}

/* ==========================================
CARD
========================================== */

.card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

border:1px solid var(--border);

transition:.3s;

position:relative;

}

.card:hover{

transform:
translateY(-6px);

}

.card img{

width:100%;

height:240px;

object-fit:cover;

background:#f5f5f5;

}

.card-content{

padding:20px;

}

.card-content h3{

font-size:1.4rem;

color:#111827;

margin-bottom:12px;

}

.ficha-rapida{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:10px;

margin-bottom:15px;

text-align:center;

}

.ficha-item{

background:#F8FAFC;

padding:10px;

border-radius:10px;

font-size:.90rem;

}

.ficha-item strong{

display:block;

font-size:1rem;

color:#111827;

}

.precio{

font-size:2rem;

font-weight:800;

color:var(--success);

margin:15px 0;

}

.descripcion-corta{

margin-bottom:15px;

font-size:.95rem;

}

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

.btn-detalle{

width:100%;

border:none;

background:#E2E8F0;

padding:12px;

border-radius:10px;

cursor:pointer;

font-weight:700;

margin-bottom:10px;

transition:.3s;

}

.btn-detalle:hover{

background:#CBD5E1;

}

.btn-wa{

display:block;

text-align:center;

background:#25D366;

color:white;

text-decoration:none;

padding:12px;

border-radius:10px;

font-weight:700;

}

.btn-wa:hover{

opacity:.9;

}

/* ==========================================
BADGES
========================================== */

.badge-destacado{

position:absolute;

top:12px;

left:12px;

background:#FFC107;

color:black;

padding:8px 12px;

border-radius:30px;

font-size:.80rem;

font-weight:700;

}

.badge-estado{

position:absolute;

top:12px;

right:12px;

padding:8px 12px;

border-radius:30px;

font-size:.80rem;

font-weight:700;

color:white;

}

.estado-disponible{
background:var(--success);
}

.estado-apartado{
background:var(--warning);
}

.estado-vendido{
background:var(--danger);
}

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

.mapa{

padding:50px 20px;

}

.mapa h2{

text-align:center;

margin-bottom:20px;

}

.mapa iframe{

width:100%;

height:420px;

border:0;

border-radius:18px;

}

/* ==========================================
FOOTER
========================================== */

.footer{

background:var(--primary);

color:white;

padding:40px 20px;

text-align:center;

}

.footer-links{

margin-top:20px;

}

.footer-links a{

color:white;

text-decoration:none;

margin:0 10px;

}

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

.modal{

display:none;

position:fixed;

inset:0;

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

z-index:9999;

overflow:auto;

}

.modal-content{

background:white;

width:90%;

max-width:900px;

margin:40px auto;

padding:25px;

border-radius:18px;

position:relative;

}

.close{

position:absolute;

right:20px;

top:15px;

font-size:2rem;

cursor:pointer;

}

.modal-imagen{

width:100%;

border-radius:12px;

margin:15px 0;

}

.modal-grid{

display:grid;

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

gap:12px;

margin:20px 0;

}

.modal-item{

background:#F8FAFC;

padding:12px;

border-radius:10px;

text-align:center;

}

.modal-galeria{

display:grid;

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

gap:10px;

margin-top:20px;

}

.modal-galeria img{

width:100%;

height:150px;

object-fit:cover;

border-radius:10px;

}

.modal-precio{

font-size:2rem;

font-weight:800;

color:var(--success);

margin:15px 0;

}

/* ==========================================
WHATSAPP
========================================== */

.whatsapp-float{

position:fixed;

right:20px;

bottom:20px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

font-size:30px;

box-shadow:
0 5px 20px rgba(0,0,0,.30);

z-index:9999;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:768px){

.hero h2{

font-size:2rem;

}

.hero p{

font-size:1rem;

}

.topbar{

justify-content:center;

text-align:center;

}

.actions{

width:100%;

justify-content:center;

}

.ficha-rapida{

grid-template-columns:1fr;

}

.catalogo{

padding:20px;

}

.modal-content{

width:95%;

}

}