/* ---------- Base ---------- */
:root{
  --bg:#0b1416;
  --panel:#101b1d;
  --soft:#0e2021;
  --text:#d7efec;
  --muted:#a6c9c4;
  --brand:#08b0a7;
  --brand-ink:#06201e;
  --ring:rgba(8,176,167,.35);
  --card:#0f181a;
  --border:#183234;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto}

/* Layout */
.wrap{width:min(1100px, 92%);margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(11,20,22,.95), rgba(11,20,22,.75));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.logo{
  width:56px; height:auto;           /* NO se deforma */
  object-fit:contain; object-position:center;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.brand-name{letter-spacing:2px; font-weight:800; opacity:.9}

.top-nav a{
  color:var(--text); text-decoration:none; margin-left:16px;
  padding:8px 10px; border-radius:8px; border:1px solid transparent;
}
.top-nav a:hover{background:var(--soft); border-color:var(--border)}
.top-nav .cta{background:var(--brand); color:var(--brand-ink); font-weight:800}

/* Hero */
.hero{position:relative; padding:56px 0 32px; background:radial-gradient(1200px 500px at 20% 0%, rgba(8,176,167,.18), transparent 60%);}
.hero .hero-title{font-size:clamp(26px, 5vw, 44px); line-height:1.1; margin:0 0 10px}
.hero .hero-sub{max-width:62ch; color:var(--muted); margin:0 0 16px}
.hero-actions .btn{margin-right:10px}
.hero-fade{height:28px; background:linear-gradient(180deg, rgba(11,20,22,0), rgba(11,20,22,1))}

/* Sections */
.section{padding:28px 0}
.section h2{font-size:clamp(20px, 3.8vw, 28px); margin:0 0 10px}

.bullets{margin:6px 0 0 18px}
.bullets li{margin:6px 0}

/* Buttons */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:10px 16px; border-radius:12px; border:1px solid var(--border);
  transition:.15s transform ease, .15s box-shadow ease;
}
.btn-primary{background:var(--brand); color:var(--brand-ink); font-weight:800; border-color:transparent}
.btn-ghost{background:transparent; color:var(--text)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.28)}

/* Gallery grid */
.grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.card img{width:100%; height:220px; object-fit:cover;}

/* Contact */
.contact-cards{
  display:grid; gap:10px; margin:12px 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.contact-link{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; color:var(--text); text-decoration:none;
}
.contact-link .label{opacity:.85}
.contact-form{
  display:grid; gap:10px; max-width:560px;
}
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color:var(--ring); box-shadow:0 0 0 3px var(--ring);
}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:26px}
.site-footer .wrap{padding:12px 0; color:var(--muted); font-size:14px}

/* Floating language toggle */
.lang-toggle{
  position:fixed; right:16px; bottom:16px; z-index:5000;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,27,29,.9); color:#e6f5f3; font-weight:700;
  letter-spacing:.5px; backdrop-filter:blur(6px); cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.lang-toggle:hover{transform:translateY(-1px)}
/* ===== Lightbox ===== */
.lb{
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); padding: 20px;
}
.lb.is-open{ display: flex; }

.lb img{
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.lb button{
  position: absolute;
  background: rgba(255,255,255,.08);
  color: #fff; border: 1px solid rgba(255,255,255,.18);
  width: 44px; height: 44px; border-radius: 10px;
  font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
}

.lb button:hover{ background: rgba(255,255,255,.16); }
.lb-close{ top: 20px; right: 20px; font-size: 30px; }
.lb-prev{ left: 20px; }
.lb-next{ right: 20px; }

/* Evitar desplazamiento del body cuando está abierto */
body.lb-lock{ overflow: hidden; }
/* ===== Lightbox ===== */
.lightbox-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.lightbox-backdrop.open { display: flex; }

.lightbox-frame {
  max-width: 92vw; max-height: 92vh;
  position: relative;
}
.lightbox-frame img {
  width: 100%; height: auto; object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* controles */
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  border: none; color: #fff; font-size: 26px;
  width: 42px; height: 42px; border-radius: 8px;
  cursor: pointer; user-select: none;
}
.lb-prev { left: -56px; }
.lb-next { right: -56px; }

.lb-close {
  position: absolute; top: -50px; right: 0;
  background: rgba(0,0,0,.5);
  border: none; color: #fff; font-size: 22px;
  width: 38px; height: 38px; border-radius: 8px;
  cursor: pointer;
}

/* fallback por si hay poco espacio */
@media (max-width: 520px) {
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-close { top: 6px; right: 6px; }
}