/* Modern UI for vendomicasa.pro */
:root{
  --bg:#0b1220;          /* fondo oscuro azulado */
  --card:#0f1b31;        /* cartas */
  --soft:#15243f;        /* bordes suaves */
  --brand:#4fb3ff;       /* acento */
  --brand-2:#9be2ff;     /* acento claro */
  --text:#e6eefc;        /* texto principal */
  --muted:#a9b5cc;       /* texto secundario */
  --ok:#1dd1a1;
  --danger:#ff6b6b;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0a2540,#060b16 60%) fixed;
}

.container{width:min(1280px,94%);margin-inline:auto}


a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,11,22,.6);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;font-size:20px;color:#fff}
.brand span{color:var(--brand)}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);opacity:.9}
.btn.small{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}

.burger{display:none;background:transparent;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* =========================
   HERO (única definición)
   ========================= */
.hero{
  position:relative;
  min-height:72vh;
  padding:80px 0;                 /* espaciado vertical */
  background:linear-gradient(180deg,#0a2540,#060b16 60%); /* sin cover.jpg */
}
.hero .overlay{
  position:absolute; inset:0;
  background:radial-gradient(80% 80% at 50% 20%, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 60%);
  z-index:0;                       /* debajo del contenido */
}
.hero-inner{position:relative;z-index:1;text-align:center}
.hero-badge{
  display:inline-block;background:rgba(255,255,255,.08);
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  font-weight:600
}

/* Layout del hero */
.hero-content{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:2rem;margin-top:10px
}
.hero-text{flex:1 1 48%;text-align:center}
.hero-title{margin:0 0 10px;line-height:1.2}
.hero-title .titulo{font-size:42px;font-weight:800;color:#fff}
.hero-title .subtitulo{display:inline-block;font-size:22px;color:#9be2ff;margin:6px 0}
.hero-title .lugar{font-size:38px;font-weight:800;color:#4fb3ff}
.hero-sub{color:var(--brand-2);margin:6px 0 14px}

.cta-row{display:flex;gap:12px;justify-content:center;margin:10px 0 18px}

.hero-image{flex:1 1 44%;display:flex;justify-content:center}
.hero-image img{
  width:100%;max-width:520px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px rgba(0,0,0,.35)
}

/* Tarjeta de precio */
.price-card{
  display:flex;gap:14px;align-items:center;justify-content:center;
  background:rgba(10,18,36,.8);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(6px);border-radius:var(--radius);padding:10px 12px
}
.price-card small{display:block;color:var(--muted)}
.price-card strong{font-size:18px}
.price-card .divider{width:1px;height:24px;background:rgba(255,255,255,.14)}

/* Botones */
.btn{background:var(--brand);color:#081325;padding:12px 18px;border-radius:999px;border:0;font-weight:700;box-shadow:var(--shadow);display:inline-block}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18);box-shadow:none}

/* Secciones genéricas */
.section{padding:56px 0}
.section-head{margin-bottom:16px}
.section-head h2{margin:0 0 6px}
.section-head p{color:var(--muted);margin:0}

/* Galería optimizada: 6 por fila */
.grid{display:grid;gap:18px}
.gallery{grid-template-columns:repeat(6, minmax(160px, 1fr));justify-content:center}
.g-item{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.g-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .25s}
.g-item:hover img{transform:scale(1.03)}
/* Responsive */
@media (max-width:1200px){ .gallery{grid-template-columns:repeat(5,1fr)} }
@media (max-width:992px){  .gallery{grid-template-columns:repeat(4,1fr)} }
@media (max-width:768px){  .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width:576px){  .gallery{grid-template-columns:repeat(2,1fr)} }
/* Video */
.video-wrap{aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.video{width:100%;height:100%}

/* Cards / ficha */
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.spec{grid-template-columns:repeat(3,1fr)}
.spec-item h3{margin:.2rem 0 .3rem}
.spec-item p{color:var(--muted);margin:0}

/* Descripción */
.feats{grid-template-columns:repeat(2,1fr)}
.feat{display:flex;gap:12px;align-items:flex-start}
.feat-ico{font-size:28px;line-height:1.2}

/* Mapa */
.map-wrap{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.map{width:100%;height:420px;border:0}

/* Formulario */
.form{padding:22px}
.form-grid{grid-template-columns:repeat(2,1fr)}
label{display:flex;flex-direction:column;gap:6px;font-weight:600}
input,textarea{background:#0b1529;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;outline:0}
input:focus,textarea:focus{border-color:var(--brand)}
.hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.check{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-weight:400;color:var(--muted)}
.check a{color:var(--brand)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:24px 0;margin-top:24px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.links{display:flex;gap:16px}

/* Floating actions */
.floating{position:fixed;right:18px;z-index:60;border-radius:999px;padding:12px 16px;text-decoration:none;box-shadow:var(--shadow)}
.floating.cta{bottom:88px;background:var(--ok);color:#002b1f;font-weight:800}
.floating.whatsapp{bottom:24px;background:#25D366;color:#001a0d}

/* Modal */
.icon-btn{background:transparent;border:0;font-size:18px;color:var(--text);cursor:pointer}
dialog::backdrop{background:rgba(0,0,0,.6)}
.modal-card header{display:flex;justify-content:space-between;align-items:center;margin:-4px -4px 10px}
.modal-card h3{margin:0}