:root{
  --bg: #0a0d13;
  --text: #e6f1ff;
  --muted: #a9bcd0;
  --accent: #00bfff;
  --accent-2: #008ccc;
  --card: rgba(255,255,255,0.04);
  --shadow: 0 0 14px rgba(0,191,255,0.25);
  --border: 1px solid rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Roboto','Open Sans',sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  letter-spacing: .2px;
}

/* HERO */
.hero{
  position: relative;
  min-height: 46vh;
  background: #0b1220 url('/static/images/hero_socios.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,.65),rgba(5,10,20,.75));backdrop-filter:blur(1px);}
.hero__content{position:relative;text-align:center;padding:32px 20px;max-width:1000px;}
.hero__logo{height:72px;filter:drop-shadow(0 0 8px rgba(0,191,255,.35));margin-bottom:10px;}
.hero__title{font-size:clamp(28px,4.3vw,44px);margin:0 0 6px;color:var(--text);font-weight:700;}
.hero__subtitle{font-size:clamp(14px,1.6vw,18px);color:var(--muted);margin:0;}

/* LAYOUT */
.wrap{max-width:1200px;margin:-40px auto 40px;padding:0 18px;}
.grid{display:grid;gap:24px;grid-template-columns:1fr 0.9fr;}
.col{display:flex;flex-direction:column;gap:22px;}
.col--right .card.sticky{position:sticky;top:18px;}

/* CARD */
.card{background:var(--card);border:var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(2px);}
.card h2{color:var(--accent);margin:0 0 12px;font-size:clamp(20px,2.2vw,26px);}
.card--cta{border-color:rgba(0,191,255,.35);}

/* MODULOS */
.modulo{margin:18px 0 20px;}
.modulo h3{margin:0 0 6px;font-size:18px;color:#cfe9ff;font-weight:600;}
.modulo p{margin:0;color:var(--text);}
.nota{color:var(--muted);font-size:14px;margin-top:10px;}

/* BULLETS */
.bullets{margin:10px 0 0 18px;padding:0;}
.bullets li{margin-bottom:10px;}

/* FORMULARIO */
.form{display:grid;gap:14px;}
.form__label{display:block;font-weight:600;color:#cfe9ff;margin-bottom:6px;}
.form__input{width:100%;margin-top:6px;background:#0b131f;color:var(--text);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:12px;outline:none;}
.form__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,191,255,.15);}
.form__group{margin-top:6px;}

/* QR EN COLUMNA */
.aportebox-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:10px;
}
.qrbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px;
  background:rgba(255,255,255,0.03);
  border-radius:10px;
  width:100%;
  max-width:220px;
}
.qr-img{
  width:130px;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 0 8px rgba(0,191,255,0.25);
  transition:transform .2s ease;
}
.qr-img:hover{transform:scale(1.05);}

/* BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:10px;border:1px solid transparent;
  background:var(--accent);color:#061018;font-weight:700;cursor:pointer;
  text-decoration:none;transition:.2s ease-in-out;
}
.btn:hover{background:var(--accent-2);color:#fff;}
.btn--primary{box-shadow:0 0 10px rgba(0,191,255,.25);}
.btn--ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.18);}
.btn--ghost:hover{background:rgba(0,191,255,.10);border-color:rgba(0,191,255,.45);}
.help{color:var(--muted);font-size:13px;margin:6px 0 0;text-align:center;}

/* FOOTER */
.footer{border-top:var(--border);background:#09121c;color:#99ccee;text-align:center;padding:16px 12px;margin-top:24px;font-size:14px;}

/* RESPONSIVE */
@media(max-width:980px){
  .grid{grid-template-columns:1fr;}
  .col--right .card.sticky{position:static;}
  .qr-img{width:120px;}
}