:root{
  --bg:#0c1220; --panel:#0f172a; --muted:#9fb3c8; --text:#e6f3ff;
  --brand1:#34d2d6; --brand2:#5a8cff; --card:#121a2e; --border:#22314f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,'Helvetica Neue';
  background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:#9dd1ff;text-decoration:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}

/* Header */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(6,10,20,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* compensar la altura del header */
body{ padding-top:64px; }
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:26px}
.brand strong{font-weight:700;letter-spacing:.2px}

.menu{display:flex;gap:26px;align-items:center}
.menu a{padding:8px 10px;border-radius:999px;color:#b9d3ff;border:1px solid transparent}
.menu a.active{border-color:#2b3e67;box-shadow:0 0 0 1px #2b3e67 inset;color:#cfe6ff}

.lang{display:flex;gap:8px}
.lang button{background:transparent;color:#b9d3ff;border:1px solid #2b3e67;border-radius:999px;padding:6px 12px}
.lang button.active{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#061020;border-color:transparent}

/* Hamburger */
.burger{display:none;flex-direction:column;gap:4px;border:0;background:transparent}
.burger span{width:22px;height:2px;background:#cfe6ff;border-radius:2px;display:block}

/* Mobile menu panel */
.mobile-panel{display:none;position:fixed;top:64px;left:0;right:0;background:#0c1426;border-bottom:1px solid #1e2b49;padding:14px}
.mobile-panel.open{display:block}
.mobile-row{display:flex;gap:12px;flex-wrap:wrap}
.mobile-panel a{padding:10px 12px;background:#101a30;border:1px solid #233356;border-radius:10px;color:#cfe6ff}
.mobile-panel .lang{margin-top:8px}
.mobile-panel .lang.mobile-lang{display:flex;gap:10px;justify-content:flex-end}

/* Hero */
.hero{position:relative;min-height:78vh;background-size:cover;background-position:center}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(1000px 400px at 35% 35%, rgba(16,27,55,.6), rgba(12,18,32,.86))}
.hero .content{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:80px 20px 120px;text-align:center}
h1{font-size:clamp(30px,5.8vw,64px);line-height:1.05;margin:0 0 10px;background:linear-gradient(180deg,#78fff3,#6fb1ff 60%,#87a7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.center{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#031022;font-weight:700;border:0}
.btn.secondary{background:#16223D;color:#d1e6ff;border:1px solid #27406e}

/* Sections */
.section{padding:56px 0}
h2{font-size:28px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:#0f172a;border:1px solid #203152;border-radius:16px;padding:18px;display:flex;gap:14px;align-items:flex-start;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-2px);border-color:#395c95}
.card svg{flex:0 0 auto;width:28px;height:28px;color:#92b6ff;opacity:.9}
.card h3{margin:0 0 6px;font-size:17px}
.card p{margin:0;color:#a8c0da}

.form{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.form input,.form select,.form textarea{width:100%;background:#0f172a;border:1px solid #203152;border-radius:12px;color:#e6f3ff;padding:12px}
.form textarea{min-height:120px;grid-column:1/-1}
.whatsapp-box{background:rgba(16,26,46,.6);border:1px solid #223455;border-radius:16px;padding:16px;min-height:180px}
.whatsapp-box .big{font-size:22px;margin-top:6px}

#wa-float{position:fixed;bottom:18px;right:18px;background:#22c55e;color:#052410;border:0;border-radius:28px;padding:10px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:45}
#wa-float svg{width:20px;height:20px;stroke:#052410;background:#d7fbe3;border-radius:999px}
.footer{padding:24px 0;border-top:1px solid #1b2946;text-align:center;color:#93acc7}
.hero h1{line-height:1.25}

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:820px){
  .menu{display:none}
  .burger{display:flex}
  header .lang{display:none}
  .hero .content{
    min-height:70vh;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:40px 16px;text-align:center;
  }
}
@media (min-width:821px){
  .hero{min-height:100vh}
  .hero .content{
    max-width:900px;margin:0 auto;min-height:calc(100vh - 80px);
    display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
    padding:40px 16px;
  }
}