:root{
  --bg:#071026;
  --bg2:#0b1b3a;
  --card:#0d234b;
  --text:#f3f5fb;
  --muted:#b7c0d9;
  --gold:#d6b36a;
  --gold2:#f0d9a2;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 600px at 10% 0%, rgba(214,179,106,.10), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(240,217,162,.10), transparent 60%), var(--bg); color:var(--text);}
a{color:inherit}
.container{width:min(1120px, 92vw); margin:0 auto;}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,16,38,.55);
  border-bottom:1px solid rgba(214,179,106,.18);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand .mark{width:40px;height:40px;border-radius:12px; background:linear-gradient(145deg, rgba(214,179,106,.25), rgba(214,179,106,.05)); border:1px solid rgba(214,179,106,.25); display:grid; place-items:center; box-shadow: var(--shadow);}
.brand .mark img{width:26px;height:26px;border-radius:8px}
.brand .name{line-height:1.05}
.brand .name strong{display:block; letter-spacing:.12em; font-size:.86rem; text-transform:uppercase}
.brand .name span{display:block; font-size:.92rem; color:var(--muted)}
.menu{display:flex; gap:18px; align-items:center;}
.menu a{font-size:.95rem; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:12px; transition:.2s;}
.menu a:hover{color:var(--text); background:rgba(214,179,106,.10)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid rgba(214,179,106,.30); background:linear-gradient(180deg, rgba(214,179,106,.22), rgba(214,179,106,.10)); color:var(--text); text-decoration:none; box-shadow: var(--shadow); transition:.2s; font-weight:650;}
.btn:hover{transform: translateY(-1px); border-color: rgba(240,217,162,.55)}
.btn.secondary{background:rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow:none; color:var(--text);}
.btn.secondary:hover{background:rgba(255,255,255,.07)}
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid rgba(214,179,106,.18);
}
.hero .wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center; padding:48px 0 44px;}
.hero::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    linear-gradient(90deg, rgba(7,16,38,.92) 0%, rgba(7,16,38,.78) 42%, rgba(7,16,38,.35) 72%, rgba(7,16,38,.20) 100%),
    url("assets/img/portada.webp") center/cover no-repeat;
  filter:saturate(1.08) contrast(1.05);
  z-index:-2;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 500px at 20% 15%, rgba(214,179,106,.16), transparent 55%),
              radial-gradient(700px 420px at 70% 80%, rgba(240,217,162,.10), transparent 60%);
  z-index:-1;
}
.kicker{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid rgba(214,179,106,.28); background:rgba(214,179,106,.10); color:var(--gold2); letter-spacing:.08em; text-transform:uppercase; font-size:.78rem;}
h1{margin:16px 0 10px; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing:.02em;}
.lead{color:var(--muted); font-size:1.05rem; line-height:1.6; margin:0 0 20px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;}
.hero-card{
  background:linear-gradient(180deg, rgba(13,35,75,.72), rgba(13,35,75,.45));
  border:1px solid rgba(214,179,106,.18);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.hero-card h3{margin:0 0 10px; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem; color:var(--gold2);}
.hero-card ul{margin:0; padding:0 0 0 18px; color:var(--muted); line-height:1.65}
.hero-card li{margin:6px 0}
section{padding:56px 0}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px;}
.section-title h2{margin:0; font-size:1.7rem}
.section-title p{margin:0; color:var(--muted); max-width:52ch}
.grid{display:grid; gap:16px}
.grid.cards{grid-template-columns: repeat(3, minmax(0, 1fr));}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding:18px;
}
.card h3{margin:0 0 6px; font-size:1.05rem}
.card p{margin:0; color:var(--muted); line-height:1.6}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.pill{padding:8px 12px; border-radius:999px; border:1px solid rgba(214,179,106,.20); background:rgba(214,179,106,.08); color:var(--gold2); font-size:.9rem}
.gallery{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px}
.gitem{position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:#081736; cursor:pointer}
.gitem img{width:100%; height:180px; object-fit:cover; display:block; transition: transform .35s}
.gitem:hover img{transform: scale(1.04)}
.gitem::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); opacity:.7}
.video-wrap{position:relative; padding-top:56.25%; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.10); background:#081736}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.map{width:100%; height:380px; border:0; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.10)}
form{display:grid; gap:12px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
small.helper{color:var(--muted); display:block; margin-top:8px; line-height:1.5}
.footer{
  padding:26px 0; border-top:1px solid rgba(214,179,106,.18);
  color:var(--muted); font-size:.95rem;
}
.footer .row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer a{color:var(--gold2); text-decoration:none}
.footer a:hover{text-decoration:underline}

.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(37, 211, 102, .95), rgba(37, 211, 102, .75));
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.20);
}
.whatsapp-float svg{width:26px;height:26px; fill:#fff}
.whatsapp-float:hover{transform: translateY(-1px)}
/* Lightbox */
.lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:80; background: rgba(0,0,0,.75); padding:18px;}
.lightbox.open{display:flex}
.lightbox figure{margin:0; width:min(1000px, 95vw); background:rgba(7,16,38,.92); border:1px solid rgba(214,179,106,.22); border-radius: 18px; overflow:hidden; box-shadow: var(--shadow);}
.lightbox img{width:100%; height:auto; display:block}
.lightbox .bar{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; color:var(--muted); font-size:.95rem}
.lightbox button{appearance:none; border:none; background:rgba(255,255,255,.06); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.10)}

/* reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

.burger{display:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:var(--text); padding:10px 12px; border-radius:14px}
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr; padding:34px 0 34px;}
  .grid.cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns: repeat(2, minmax(0,1fr))}
  .menu{display:none}
  .burger{display:inline-flex}
  .menu.open{display:flex; position:absolute; left:0; right:0; top:64px; padding:10px 4vw 14px; background:rgba(7,16,38,.92); border-bottom:1px solid rgba(214,179,106,.18); flex-wrap:wrap}
}