/* =========================================================
   Luz Cero - Asociación Astronómica
   Hoja de estilos compartida (versión modernizada)
   ========================================================= */

:root{
  --space-900:#080d1c;   /* fondo más profundo (barra superior) */
  --space-800:#0b1124;   /* hero / oscuros */
  --space-700:#101a3a;
  --indigo:#1d2c5e;
  --star:#ffc94d;        /* dorado luz de estrella (acento) */
  --star-soft:#ffe2a6;
  --nebula-1:#7c5cff;    /* violeta nebulosa */
  --nebula-2:#38bdf8;    /* cian */
  --ink:#0f1729;         /* texto principal */
  --ink-soft:#586079;    /* texto secundario */
  --bg:#ffffff;
  --bg-alt:#f5f7fc;
  --line:#e7eaf3;
  --card:#ffffff;
  --radius:18px;
  --radius-lg:26px;
  --maxw:1140px;
  --shadow-sm:0 4px 18px rgba(15,23,41,.06);
  --shadow-md:0 18px 50px rgba(15,23,41,.13);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.68;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--indigo); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--star); }

h1,h2,h3,.logo,.pie-logo{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-.01em;
}

.contenedor{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Barra superior (sin redes) ---------- */
.barra-superior{
  background:var(--space-900);
  color:#9fb0d0;
  font-size:13.5px;
}
.barra-superior .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:42px; flex-wrap:wrap;
}
.barra-superior a{ color:#c2d0ea; }
.barra-superior a:hover{ color:#fff; }
.barra-superior .correo{ display:inline-flex; align-items:center; gap:8px; }
.barra-superior svg{ width:17px; height:17px; fill:currentColor; }
.barra-superior .ubicacion{
  display:inline-flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:2px; font-size:11.5px; color:#7e90b4;
}
.barra-superior .ubicacion::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--star); box-shadow:0 0 8px var(--star);
}

/* ---------- Cabecera ---------- */
.cabecera{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.cabecera .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:86px; flex-wrap:wrap;
}
.logo{
  display:inline-flex; align-items:center; gap:13px;
  font-weight:700; color:var(--space-800); font-size:21px;
}
.logo img{ height:52px; width:auto; }
.logo .marca-texto{ line-height:1.05; }
.logo .marca-texto small{
  display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:11px;
  color:var(--ink-soft); letter-spacing:2px; text-transform:uppercase; margin-top:3px;
}

.menu{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.menu a{
  position:relative; color:var(--space-800); font-weight:600; font-size:15px;
  padding:10px 14px; border-radius:10px; white-space:nowrap;
}
.menu a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--star); border-radius:2px; transform:scaleX(0);
  transform-origin:left; transition:transform .2s ease;
}
.menu a:hover{ color:var(--indigo); }
.menu a:hover::after{ transform:scaleX(1); }
.menu a.activo{ color:var(--indigo); }
.menu a.activo::after{ transform:scaleX(1); }

/* ---------- Hero con cielo estrellado animado ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  color:#eef3ff; text-align:center; padding:96px 24px 104px;
  background:
    radial-gradient(1200px 480px at 50% -8%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(900px 420px at 88% 120%, rgba(56,189,248,.16), transparent 60%),
    linear-gradient(165deg, #070c1c 0%, #0b1124 45%, #101a3a 100%);
}
/* estrellas fijas */
.hero::before,
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.hero::before{
  background:
    radial-gradient(1.6px 1.6px at 15% 22%, #fff 99%, transparent),
    radial-gradient(1.4px 1.4px at 72% 16%, #fff 99%, transparent),
    radial-gradient(1.2px 1.2px at 40% 60%, #dbe6ff 99%, transparent),
    radial-gradient(1.8px 1.8px at 85% 52%, #fff 99%, transparent),
    radial-gradient(1.3px 1.3px at 28% 82%, #fff 99%, transparent),
    radial-gradient(1.1px 1.1px at 60% 38%, #cfe0ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 92% 30%, #fff 99%, transparent);
  animation:titilar 4.5s ease-in-out infinite;
}
.hero::after{
  background:
    radial-gradient(1.4px 1.4px at 8% 50%, #fff 99%, transparent),
    radial-gradient(1.2px 1.2px at 33% 30%, #cfe0ff 99%, transparent),
    radial-gradient(1.6px 1.6px at 55% 72%, #fff 99%, transparent),
    radial-gradient(1.1px 1.1px at 78% 80%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 95% 66%, #dbe6ff 99%, transparent),
    radial-gradient(1.2px 1.2px at 48% 12%, #fff 99%, transparent);
  animation:titilar 6s ease-in-out infinite reverse;
}
@keyframes titilar{ 0%,100%{opacity:.35} 50%{opacity:.9} }

.hero .eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px; border-radius:999px; margin-bottom:22px;
  background:rgba(255,201,77,.10); border:1px solid rgba(255,201,77,.32);
  color:var(--star-soft); text-transform:uppercase; letter-spacing:2.5px;
  font-size:12px; font-weight:600;
}
.hero .eyebrow::before{ content:"✦"; color:var(--star); }
.hero h1{
  margin:0 0 18px; font-weight:700;
  font-size:clamp(34px, 6vw, 60px); line-height:1.06;
  text-shadow:0 2px 40px rgba(56,189,248,.25);
}
.hero p{
  margin:0 auto; max-width:640px; color:#c2cfeb;
  font-size:clamp(16px, 2.3vw, 20px);
}

/* ---------- Secciones ---------- */
.seccion{ padding:78px 0; }
.seccion.alt{ background:var(--bg-alt); }

.eyebrow-seccion{
  display:block; text-align:center; text-transform:uppercase;
  letter-spacing:3px; font-size:12.5px; font-weight:700; color:var(--star);
  margin-bottom:10px;
}
.eyebrow-seccion span{ color:var(--indigo); }
.titulo-seccion{
  text-align:center; margin:0 0 16px;
  font-size:clamp(26px, 3.6vw, 38px); font-weight:700; color:var(--space-800);
}
.subtitulo-seccion{
  text-align:center; max-width:760px; margin:0 auto 44px; color:var(--ink-soft);
}

/* ---------- Sobre la asociación ---------- */
.sobre{
  display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:center;
  max-width:980px; margin:0 auto;
}
.sobre .logo-grande{
  display:flex; justify-content:center; align-items:center; padding:24px;
  background:linear-gradient(160deg,#0b1124,#101a3a);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.sobre .logo-grande img{ max-width:170px; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)); }
.sobre p{ margin:0 0 16px; }
.sobre .presidente{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:15.5px;
}

/* ---------- Tarjetas ---------- */
.tarjetas{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  gap:26px; max-width:1040px; margin:0 auto;
}
.tarjeta{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:34px 26px; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tarjeta:hover{
  transform:translateY(-7px); box-shadow:var(--shadow-md);
  border-color:rgba(255,201,77,.55);
}
.tarjeta .badge{
  width:74px; height:74px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(15,23,41,.18);
}
.tarjeta .badge svg{ width:38px; height:38px; fill:#fff; }
.tarjeta .icono-logo{
  height:92px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.tarjeta .icono-logo img{ max-height:92px; width:auto; }
.tarjeta h3{ margin:0 0 10px; font-size:19.5px; font-weight:700; }
.tarjeta h3 a{ color:var(--space-800); }
.tarjeta h3 a:hover{ color:var(--star); }
.tarjeta p{ margin:0; color:var(--ink-soft); font-size:15.5px; }

/* colores de marca para los badges sociales */
.badge.wa{ background:#25D366; }
.badge.ig{ background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.badge.fb{ background:#1877F2; }
.badge.tw{ background:#0f1419; }

/* ---------- CTA ---------- */
.cta{ text-align:center; max-width:760px; margin:0 auto; }
.cta p{ color:var(--ink-soft); margin:0 0 14px; }
.boton{
  display:inline-block; background:var(--star); color:#1a1300; font-weight:700;
  padding:15px 34px; border-radius:999px; margin-top:18px; border:2px solid var(--star);
  box-shadow:0 10px 28px rgba(255,201,77,.32);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.boton:hover{
  transform:translateY(-2px); color:#1a1300;
  background:var(--star-soft); border-color:var(--star-soft);
  box-shadow:0 14px 34px rgba(255,201,77,.45);
}
.boton.secundario{
  background:transparent; color:var(--space-800); border-color:var(--space-800);
  box-shadow:none;
}
.boton.secundario:hover{ background:var(--space-800); color:#fff; }

/* ---------- Páginas de contenido ---------- */
.pagina{ padding:64px 0 78px; }
.pagina .contenido{ max-width:840px; margin:0 auto; }
.pagina .eyebrow-pagina{
  display:block; text-align:center; text-transform:uppercase; letter-spacing:3px;
  font-size:12.5px; font-weight:700; color:var(--star); margin-bottom:10px;
}
.pagina h1{
  font-size:clamp(30px, 5vw, 46px); color:var(--space-800); font-weight:700;
  margin:0 0 26px; text-align:center;
}
.pagina h2{
  color:var(--space-800); font-size:25px; margin:38px 0 14px;
  padding-left:14px; border-left:4px solid var(--star);
}
.pagina p{ margin:0 0 16px; }
.pagina ul, .pagina ol{ margin:0 0 18px; padding-left:22px; }
.pagina li{ margin-bottom:10px; }
.pagina img.ilustracion{
  margin:26px auto; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow-md);
}
.pagina figure{ margin:26px 0; text-align:center; }
.pagina figcaption{ color:var(--ink-soft); font-size:14.5px; margin-top:8px; }
.video-wrap{
  position:relative; width:100%; padding-top:56.25%;
  margin:26px 0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md);
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Tabla ---------- */
.tabla-datos{
  width:100%; border-collapse:collapse; margin:24px 0; font-size:16px;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.tabla-datos caption{
  caption-side:top; text-align:left; font-family:'Space Grotesk',sans-serif;
  font-weight:700; color:var(--space-800); padding:0 0 12px; font-size:19px;
}
.tabla-datos th, .tabla-datos td{
  text-align:left; padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:top;
}
.tabla-datos tr:last-child th, .tabla-datos tr:last-child td{ border-bottom:0; }
.tabla-datos th{ background:var(--bg-alt); color:var(--space-800); width:38%; font-weight:700; }
.aviso{
  background:#fff7e6; border:1px solid #f3d18a; color:#6b5417;
  padding:15px 20px; border-radius:14px; margin:20px 0;
}

/* ---------- Formularios ---------- */
.formulario{
  max-width:640px; margin:10px auto 0; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; box-shadow:var(--shadow-md);
}
.campo{ margin-bottom:20px; }
.campo label{ display:block; font-weight:600; margin-bottom:8px; color:var(--space-800); font-size:15.5px; }
.campo input, .campo textarea{
  width:100%; padding:13px 15px; font-size:16px; font-family:inherit;
  border:1px solid var(--line); border-radius:12px; background:#fcfdff; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.campo input:focus, .campo textarea:focus{
  outline:none; border-color:var(--star); box-shadow:0 0 0 4px rgba(255,201,77,.2);
}
.campo textarea{ min-height:150px; resize:vertical; }
.campo .obligatorio{ color:#c0392b; font-weight:600; }
.oculto{ position:absolute; left:-9999px; }
.nota-form{ font-size:14px; color:var(--ink-soft); margin-top:12px; text-align:center; }

/* ---------- Pie modernizado (sin redes) ---------- */
.pie{ background:var(--space-900); color:#9fb0d0; }
.pie-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:34px; flex-wrap:wrap; padding:50px 24px 34px;
}
.pie-marca{ max-width:420px; }
.pie-logo{
  display:block; font-size:23px; font-weight:700; color:#fff; margin-bottom:10px;
}
.pie-marca p{ margin:0; font-size:14.5px; color:#8a9cbf; line-height:1.6; }
.pie-enlaces{ display:flex; flex-direction:column; gap:10px; }
.pie-enlaces a{ color:#c2d0ea; font-size:15px; }
.pie-enlaces a:hover{ color:var(--star); }
.pie-base{ border-top:1px solid rgba(255,255,255,.08); }
.pie-base .contenedor{ padding-top:20px; padding-bottom:24px; }
.pie .copyright{ font-size:13.5px; color:#7e90b4; margin:0; text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .cabecera .contenedor{ justify-content:center; text-align:center; min-height:auto; padding:14px 24px 12px; gap:12px; }
  .menu{ justify-content:center; }
  .cabecera{ position:static; }
  .sobre{ grid-template-columns:1fr; text-align:center; gap:30px; }
  .sobre .presidente{ text-align:center; }
  .seccion{ padding:60px 0; }
  .pie-grid{ flex-direction:column; gap:26px; }
}
@media (max-width:480px){
  body{ font-size:16px; }
  .menu a{ padding:8px 11px; font-size:14.5px; }
  .barra-superior .contenedor{ justify-content:center; }
  .barra-superior .ubicacion{ display:none; }
  .hero{ padding:72px 22px 80px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after{ animation:none; opacity:.7; }
  *{ scroll-behavior:auto; }
}