/* ═══════════════════════════════════════
   PROYECTO CENTINELA — style.css
═══════════════════════════════════════ */

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
::selection { background: #1E3F8A; color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #6B8FCC; border-radius: 10px; }

/* NAV */
#nav { background: linear-gradient(135deg,#01093F,#1E3F8A,#2B50A8); transition: all .4s ease; }
#nav.solid { background: rgba(255,255,255,.96) !important; backdrop-filter: blur(16px); box-shadow: 0 1px 24px rgba(1,9,63,.08); }
#nav.solid .navlink { color: #374151 !important; }
#nav.solid .navlink:hover { color: #1E3F8A !important; }
.navlink { position: relative; transition: color .2s; }
.navlink::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#1E3F8A; border-radius:2px; transition:width .3s; }
.navlink:hover::after { width: 100%; }

/* HERO */
#hero { background: linear-gradient(135deg,#01093F 0%,#1E3F8A 55%,#2B50A8 100%); position:relative; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }

/* LABELS */
.slabel { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#1E3F8A; font-family:'Inter',sans-serif; }
.slabel-w { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#6B8FCC; font-family:'Inter',sans-serif; }

/* PILLS */
.pill-tag { display:inline-block; padding:6px 14px; background:#EBF0FA; color:#1E3F8A; font-size:.8rem; font-weight:600; border-radius:9999px; border:1px solid rgba(31,67,138,.12); transition:background .2s,transform .2s; cursor:default; }
.pill-tag:hover { background:#1E3F8A; color:#fff; transform:translateY(-1px); }

/* VALUE ICONS */
.val-icon { width:48px; height:48px; background:#EBF0FA; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto; color:#1E3F8A; }

/* CARDS */
.card { background:#fff; border:1px solid #E5E9F5; border-radius:1.5rem; transition:transform .3s,box-shadow .3s,border-color .3s; }
.card:hover { transform:translateY(-6px); box-shadow:0 24px 48px rgba(30,63,138,.12); border-color:#6B8FCC; }

/* PROGRAM */
.prog-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.prog-tag { display:inline-block; font-size:.7rem; font-weight:700; color:#2B50A8; background:#EBF0FA; padding:4px 10px; border-radius:6px; letter-spacing:.03em; }

/* STATIONS */
.station-card { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.station-dot { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(30,63,138,.25); transition:transform .3s,box-shadow .3s; position:relative; z-index:1; }
.station-card:hover .station-dot { transform:scale(1.18); box-shadow:0 8px 28px rgba(30,63,138,.35); }
.station-num { font-family:'Montserrat',sans-serif; font-weight:800; font-size:.7rem; color:#fff; letter-spacing:.04em; }
.station-body { background:#fff; border-radius:1.25rem; padding:1.25rem; margin-top:-1rem; padding-top:2rem; border:1px solid #E5E9F5; text-align:center; width:100%; transition:transform .3s,box-shadow .3s,border-color .3s; }
.station-card:hover .station-body { transform:translateY(4px); box-shadow:0 12px 32px rgba(30,63,138,.1); border-color:#6B8FCC; }
.station-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; }
.station-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:.9rem; color:#01093F; margin-bottom:.5rem; line-height:1.3; }
.station-desc { font-size:.78rem; color:#6B7280; line-height:1.55; }

/* STATS */
.stat-big { display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:3.5rem; color:#1E3F8A; line-height:1; }
.stat-big-w { display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:3.5rem; color:#fff; line-height:1; }
.stat-label { display:block; font-size:.7rem; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.1em; margin-top:.5rem; }
.stat-label-w { display:block; font-size:.7rem; font-weight:700; color:#6B8FCC; text-transform:uppercase; letter-spacing:.1em; margin-top:.5rem; }

/* GALLERY */
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:12px; }
.gallery-item { position:relative; overflow:hidden; border-radius:1.25rem; background:#EBF0FA; min-height:260px; cursor:pointer; }
.gallery-wide { grid-column:1 / -1; min-height:380px; }
.gallery-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .5s ease; }
.gallery-item:hover .gallery-img { transform:scale(1.04); }
.gallery-overlay { position:absolute; bottom:0; left:0; right:0; padding:1rem 1.25rem; background:linear-gradient(to top,rgba(1,9,63,.65),transparent); opacity:0; transition:opacity .3s ease; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-caption { color:#fff; font-size:.78rem; font-weight:600; font-family:'Inter',sans-serif; letter-spacing:.04em; }

/* JOIN */
.join-card { border:1px solid rgba(255,255,255,.15); border-radius:1.5rem; background:rgba(255,255,255,.06); transition:background .3s,transform .3s; }
.join-card:hover { background:rgba(255,255,255,.12); transform:translateY(-4px); }
.join-icon { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#8CB8E8; }
.join-btn { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.8rem; font-weight:700; padding:10px 16px; border-radius:9999px; text-decoration:none; transition:background .2s,color .2s; }
.join-btn:hover { background:#fff; color:#1E3F8A; }

/* CONTACT */
.contact-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinput { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:.875rem; color:#fff; padding:.75rem 1rem; font-family:'Inter',sans-serif; font-size:.9rem; outline:none; transition:border-color .2s,background .2s; }
.cinput::placeholder { color:rgba(255,255,255,.35); }
.cinput:focus { border-color:#6B8FCC; background:rgba(255,255,255,.12); }
.cinput option { background:#01093F; }

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

/* FADE UP */
@keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
.fade-up { animation:fadeUp .75s ease forwards; opacity:0; }

/* TICKER */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-inner { display:flex; animation:ticker 28s linear infinite; width:max-content; }
.ticker-inner:hover { animation-play-state:paused; }

/* BACK TO TOP */
#btt { opacity:0; transform:translateY(12px); transition:opacity .3s,transform .3s; }
#btt.show { opacity:1; transform:none; }

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; transition:none; }
}

/* MOBILE GALLERY */
@media (max-width:640px) {
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-wide { grid-column:1; min-height:260px; }
  .gallery-item { min-height:220px; }
}