:root{
  --bg: #0b1020;
  --surface: #0f1730;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.60);
  --brand: #04136D;
  --brand2: #50D4DD;
  --deep: #072259;
  --accent: #25D366;
  --ring: rgba(80,212,221,0.35);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(80,212,221,0.14), transparent 60%),
              radial-gradient(1000px 700px at 90% 15%, rgba(4,19,109,0.22), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height:1.55;
}

img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(var(--max), calc(100% - 2.2rem)); margin-inline:auto}

.skip-link{
  position:absolute;left:-999px;top:10px;
  background:#fff;color:#000;padding:.6rem .9rem;border-radius:10px;
}
.skip-link:focus{left:10px; z-index:9999}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,16,32,0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none}
.brand-logo{height:44px; width:auto; border-radius:14px; box-shadow: 0 10px 30px rgba(0,0,0,.35)}

.nav-toggle{
  display:none;
  padding:.55rem .75rem;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color:var(--text);
  border-radius:12px;
}
.nav-menu{display:flex; align-items:center; gap:1.1rem}
.nav-menu a{text-decoration:none; color:var(--muted); font-weight:600; font-size:.95rem}
.nav-menu a:hover{color:var(--text)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.1rem;border-radius:14px;border:1px solid transparent;
  font-weight:800; text-decoration:none; cursor:pointer; user-select:none;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
.btn-sm{padding:.65rem .85rem; border-radius:12px; font-weight:800}
.btn-primary{
  background: linear-gradient(135deg, var(--brand2), rgba(80,212,221,0.65));
  color:#001018;
}
.btn-primary:hover{filter:brightness(1.03)}
.btn-ghost{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: var(--text);
}
.btn-ghost:hover{background: rgba(255,255,255,0.10)}

.hero{position:relative; min-height: 78vh; display:grid; place-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; transform: scale(1.02)}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,16,32,0.92) 0%, rgba(11,16,32,0.68) 40%, rgba(11,16,32,0.55) 100%),
              radial-gradient(900px 700px at 30% 40%, rgba(80,212,221,0.18), transparent 60%),
              radial-gradient(900px 700px at 70% 40%, rgba(4,19,109,0.26), transparent 65%);
}
.hero-content{position:relative; padding: 5.2rem 0 3.4rem}
.hero-card{
  width:min(640px, 100%);
  background: rgba(11,16,32,0.50);
  border:1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius2);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
}
.eyebrow{margin:0 0 .55rem; color: var(--brand2); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem}
.hero h1{margin:0 0 .5rem; font-size: clamp(1.75rem, 3.5vw, 2.6rem); line-height:1.08}
.lead{margin:.2rem 0 1.1rem; color: var(--muted); font-size:1.05rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin: 1rem 0 1rem}
.mini-points{margin:0; padding-left:1.1rem; color: var(--muted); display:grid; gap:.35rem}
.mini-points li{margin:0}

.section{padding: 4.2rem 0}
.section-alt{background: rgba(255,255,255,0.03); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06)}
.section-head{max-width: 760px; margin-bottom: 1.6rem}
.section-head h2{margin:0 0 .35rem; font-size: clamp(1.35rem, 2.6vw, 2.0rem)}
.section-head p{margin:0; color: var(--muted)}

.grid{display:grid; gap:1rem}
.cards{grid-template-columns: repeat(4, minmax(0, 1fr));}
.card{
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 1.15rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.card h3{margin:.1rem 0 .35rem; font-size:1.05rem}
.card p{margin:0; color: var(--muted)}

.banner{
  margin-top:1.2rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: 1.25rem 1.25rem;
  border-radius: var(--radius2);
  background: linear-gradient(135deg, rgba(4,19,109,0.65), rgba(80,212,221,0.20));
  border:1px solid rgba(255,255,255,0.14);
}
.banner h3{margin:0 0 .2rem}
.banner p{margin:0; color: var(--muted)}

.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem}
.chip{
  display:inline-flex; align-items:center;
  padding:.55rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-weight:700;
  font-size:.92rem;
}

.two-col{grid-template-columns: 1.05fr .95fr; align-items:start}
.steps{margin:.8rem 0 0; padding-left:1.1rem; color: var(--muted)}
.steps li{margin:.5rem 0}
.check{margin:.8rem 0 0; padding-left:0; list-style:none; color: var(--muted); display:grid; gap:.55rem}
.check li{position:relative; padding-left:1.55rem}
.check li::before{content:"✓"; position:absolute; left:0; top:0; color: var(--brand2); font-weight:900}
.muted{color: var(--muted)}
.small{font-size:.92rem}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.g-item{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  cursor: zoom-in;
}
.g-item img{width:100%; height: 240px; object-fit: cover; transition: transform .35s ease}
.g-item:hover img{transform: scale(1.04)}

.video-wrap{position:relative; width:100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius2);
  overflow:hidden; border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.2);
  box-shadow: var(--shadow);
}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.social-row{display:flex; gap:.75rem; margin-top:1.1rem; flex-wrap:wrap}
.social{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem .85rem; border-radius:999px;
  text-decoration:none; font-weight:800;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.social:hover{background: rgba(255,255,255,0.10)}

.embed-row{display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem; margin-top: 1.2rem}
.embed-card{background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius: var(--radius2); padding: 1.15rem 1.1rem}
.fb-embed{overflow:hidden; border-radius: var(--radius); border:1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.2)}
.fb-embed iframe{width:100%; height:520px}
.note{margin-top:1rem; padding: .9rem 1rem; border-radius: var(--radius); background: rgba(80,212,221,0.10); border:1px solid rgba(80,212,221,0.25)}
.note p{margin:.2rem 0; color: var(--muted)}

.contact-grid{grid-template-columns: 1fr 1fr; align-items:start}
.contact-list{list-style:none; padding:0; margin:.7rem 0 1rem; display:grid; gap:.55rem}
.contact-list li{display:flex; justify-content:space-between; gap:1rem; padding:.55rem .7rem; border-radius: 14px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08)}
.contact-list span{color: var(--muted2); font-weight:700}
.contact-list a{color: var(--brand2); font-weight:800; text-decoration:none}
.contact-list a:hover{text-decoration:underline}

.form{display:grid; gap:.8rem}
label{display:grid; gap:.35rem; color: var(--muted2); font-weight:700}
input, select, textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(11,16,32,0.30);
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus{border-color: rgba(80,212,221,0.55); box-shadow: 0 0 0 5px var(--ring)}

.map{margin-top:1.2rem; padding:0; overflow:hidden}
.map iframe{width:100%; height:360px; border:0}

.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width: 56px; height:56px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  display:grid; place-items:center;
  text-decoration:none;
}
.whatsapp-float span{position:absolute; left:-999px}
.whatsapp-float::before{
  content:"";
  width: 28px; height:28px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20fill%3D%22white%22%20d%3D%22M20.5%2016.9c-1.2-.6-2.6-1.1-3-.9-.4.2-1%20.9-1.2%201.2-.2.3-.5.3-.9.1-2.3-1.1-4.1-2.8-5.3-5.1-.2-.4-.2-.7.1-.9.2-.2.9-.8%201.1-1.2.2-.4-.3-1.8-.9-3-.3-.7-.7-.7-1-.7h-.9c-.4%200-1%20.2-1.4.7-.6.7-1.5%202-1.5%204.1%200%203.4%202.9%206.9%206.4%209%203.4%202%205.9%202.2%207.3%201.7%201.6-.6%202.4-1.8%202.6-2.6.2-.8.2-1.3%200-1.5-.2-.2-.6-.4-1.4-.8Z%22/%3E%0A%3Cpath%20fill%3D%22white%22%20d%3D%22M12%202a9.5%209.5%200%200%200-8.2%2014.2L3%2022l5.9-1.5A9.5%209.5%200%201%200%2012%202Zm0%2017.5c-1.4%200-2.8-.4-4-1.1l-.3-.2-3.5.9.9-3.4-.2-.3A8%208%200%201%201%2012%2019.5Z%22/%3E%0A%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
}

.site-footer{
  padding: 2.2rem 0;
  border-top:1px solid rgba(255,255,255,0.08);
  background: rgba(11,16,32,0.55);
}
.footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem}
.site-footer a{color: var(--brand2); font-weight:800; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

.lightbox{
  position: fixed; inset:0; z-index:80;
  display:none;
  place-items:center;
  background: rgba(0,0,0,0.76);
  padding: 1.2rem;
}
.lightbox.open{display:grid}
.lightbox-img{
  max-width:min(980px, 92vw);
  max-height: 86vh;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: var(--shadow);
}
.lightbox-close{
  position:absolute; top:14px; right:14px;
  width: 44px; height:44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color:#fff;
  font-size: 26px;
  cursor:pointer;
}

.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}

@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr));}
  .gallery{grid-template-columns: repeat(2, minmax(0,1fr));}
  .embed-row{grid-template-columns: 1fr;}
}
@media (max-width: 720px){
  .nav-toggle{display:inline-flex}
  .nav-menu{display:none; position:absolute; right:1rem; top:64px; flex-direction:column; align-items:stretch;
    background: rgba(11,16,32,0.95);
    border:1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: .9rem;
    min-width: min(320px, calc(100vw - 2rem));
    box-shadow: var(--shadow);
  }
  .nav-menu.open{display:flex}
  .nav-menu a{padding:.55rem .6rem; border-radius:12px}
  .nav-menu a:hover{background: rgba(255,255,255,0.07)}
  .hero-content{padding: 4.6rem 0 2.6rem}
  .two-col{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .g-item img{height: 210px}
}