:root{
  --bg:#071226; /* deep navy */
  --panel:#0b1624;
  --muted:#9fb0bf;
  --text:#e6eef6;
  --accent:#70b3b3; /* subtle teal */
  --glass: rgba(255,255,255,0.03);
  --card: rgba(255,255,255,0.02);
  --radius:12px;
  --max-width:1100px;
}
/* Base */
html,body{height:100%;}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  display:flex;
  align-items:flex-start; /* start at top so header is visible */
  justify-content:center;
  padding:32px 20px 140px;
  box-sizing:border-box;
  min-height:100vh; /* ensure full viewport height */
}
/* Layout */
.wrap{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;   /* centrar ✔ */
  padding:0 20px;   /* espacio interno para móviles */
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 6px 24px rgba(3,8,15,0.6);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.03);
}
header.hero{
  /* wide‑screen layout: logo + info side‑by‑side */
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.logo{ width:84px; height:84px; display:inline-flex; align-items:center; justify-content:center; margin-right:14px; flex:0 0 84px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:18px; box-shadow:0 14px 28px rgba(0,0,0,0.18); }
.logo svg{ width:64px; height:64px; display:block; }
.hero-left{
  flex:1 1 auto;
}
h1{
  margin:0;
  font-size:clamp(20px,4vw,32px);
  letter-spacing:0.6px;
  font-weight:600;
  color:var(--text);
}
p.tagline{
  margin:6px 0 0;
  color:var(--muted);
  font-size:0.98rem;
}
.meta{
  text-align:right;
  font-size:0.9rem;
  color:var(--muted);
}

main{display:grid; gap:16px;}
.section{display:block;}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

/* Activities cards */
.activity{
  padding:14px;
  border-radius:10px;
  background:var(--card);
  transition:transform .22s ease, box-shadow .22s ease;
  border:1px solid rgba(255,255,255,0.03);
}
.activity:hover{ transform:translateY(-6px); box-shadow:0 10px 30px rgba(2,6,12,0.6); }
.activity h3{ margin:0 0 6px; font-size:1.05rem; color:var(--text); }
.activity p{ margin:0; color:var(--muted); font-size:0.95rem; }

/* Observations table/card list */
.observations.card{ overflow:hidden; }
table.obs{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
}
.obs th,.obs td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
}
.obs th{ color:var(--muted); font-weight:600; font-size:0.9rem; }
.obs tr:last-child td{ border-bottom:0; }

.note{ color:var(--muted); font-size:0.92rem; }

footer.links {
  display: grid;
  /* Crea 2 columnas de igual tamaño si hay espacio */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 10px 20px;
  align-items: start;
  color: var(--muted);
  font-size: 0.95rem;
}
  a.link{
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px dashed rgba(112,179,179,0.12);
    word-break: break-all; /* Evita que links larguísimos rompan el diseño */
    transition: color .18s, border-bottom-color .18s, box-shadow .18s;
    box-shadow: 0 1px 0 0 rgba(112,179,179,0);
  }
.links-subsection ul li {
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
a.link:hover, a.link:focus {
  color:#9de1d7;
  border-bottom:1px solid var(--accent);
  box-shadow: 0 2px 0 0 #9de1d733;
  text-decoration:none;
}

/* responsive */
/* ====================================================== */
/* 1.  Ajuste del header en pantallas ≤ 880 px             */
@media (max-width:880px) {
  .logo {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
  }
  /* Header: apilar y centrar logo y texto */
  header.hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
    padding: 0 0 8px 0;
  }
  header.hero > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0;
    width: 100%;
  }
  header.hero .logo {
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.13);
  }
  header.hero .hero-left {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
  header.hero .meta {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
  }
  h1 {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }
  p.tagline {
    font-size: 1rem;
    margin-top: 4px;
  }
}
/* ====================================================== */

/* subtle reveal */
.fade-up{ animation:fadeUp .6s ease both; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none;}
}

/* canvas overlay container *//* 4 columns on wide, fallback to 3/2/1 on smaller screens */
.grid-3{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}
.stars-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* small accent badges */
.badge{
  display:inline-block;
  padding:6px 10px;
  background:rgba(255,255,255,0.02);
  border-radius:999px;
  color:var(--muted);
  font-size:0.85rem;
  border:1px solid rgba(255,255,255,0.025);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Accessible focus */
a:focus{ outline:2px dashed rgba(112,179,179,0.18); outline-offset:3px; border-radius:6px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .activity, .fade-up { transition:none; animation:none; transform:none; }
}

/* Solo los articles dentro de #links usan estilo de tarjeta */
#links .links-groups-grid article {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding: 16px 14px 14px 14px;
  margin: 0;
  box-shadow: 0 2px 10px rgba(3,8,15,0.10);
  border: 1px solid rgba(255,255,255,0.03);
}