/* ====== Tokens SEB (fallback si no están en /css/main.css) ====== */
:root{
  --seb-text:#111315;
  --seb-muted:#6b7280;
  --seb-bg:#ffffff;
  --seb-surface:#ffffff;
  --seb-stroke:#e6e7eb;
  --seb-brand:#d10a2a;
  --seb-brand-700:#a40820;
  --seb-shadow:0 6px 18px rgba(0,0,0,.06);
  --seb-radius-lg:16px;
  --seb-radius:12px;
  --seb-radius-sm:10px;
  --seb-ring:rgba(209,10,42,.18);

  /* Footer image */
  --footer-img-height: 200px;
}

/* ====== Estructura (sticky footer) ====== */
html, body { height: 100%; }
body{
  display:flex; flex-direction:column; min-height:100dvh;
  margin:0; color:var(--seb-text); background:var(--seb-bg);
  font-family: Inter, system-ui, Roboto, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap{ max-width:1100px; margin:0 auto; padding:24px; }
main.wrap{ flex:1 0 auto; }

/* ====== Encabezado ====== */
.page-header{ margin-bottom:10px; }
.page-title{ margin:8px 0 4px; font-size:2rem; font-weight:700; }
.page-subtitle{ margin:0; }
.muted{ color:var(--seb-muted); }

/* ====== Grid: una sola columna centrada ====== */
.grid.single{
  display:grid;
  grid-template-columns: min(820px, 100%);
  justify-content:center; /* centra el track */
  gap:18px;
}

/* ====== Cards ====== */
.card{
  background:var(--seb-surface);
  border:1px solid var(--seb-stroke);
  border-radius:var(--seb-radius-lg);
  box-shadow:var(--seb-shadow);
  padding:18px;
}
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.section-title{ margin:0; font-size:1.2rem; }
.tag{
  font-size:.78rem; padding:4px 8px; border:1px solid var(--seb-stroke);
  border-radius:999px; color:var(--seb-muted); background:#fff;
}

/* ====== Lista de enlaces ====== */
.links{ display:grid; gap:12px; }
.link-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px;
  border:1px solid var(--seb-stroke);
  border-radius:var(--seb-radius);
  background:#fff;
}
.link-info{ display:flex; align-items:center; gap:12px; min-width:0; }
.icon{
  height:36px; width:36px; border-radius:10px;
  background:linear-gradient(180deg, var(--seb-brand), var(--seb-brand-700));
  color:#fff; display:grid; place-items:center; font-weight:700;
}
.title{ font-weight:700; line-height:1.2; margin:0; color:var(--seb-text); }
.subtitle{ font-size:.92rem; color:var(--seb-muted); margin:2px 0 0; }

.btn{
  padding:10px 14px;
  border-radius:var(--seb-radius-sm);
  background:var(--seb-brand);
  border:1px solid var(--seb-brand-700);
  color:#fff; font-weight:600; cursor:pointer;
  transition:transform .08s ease, background .2s ease, box-shadow .2s ease;
  text-decoration:none; white-space:nowrap; display:inline-block;
}
.btn:hover{ background:var(--seb-brand-700); box-shadow:0 0 0 6px var(--seb-ring); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--seb-ring); }

/* ====== Footer con imagen ====== */
.site-footer{
  flex-shrink:0;
  position:relative;
  border-top:1px solid var(--seb-stroke);
  padding:0;
  background:transparent;
}
.site-footer .footer-image{
  width:100%;
  height:var(--footer-img-height);
  position:relative;
  overflow:hidden;
  background:#fff;
}
.site-footer .footer-image img.is-banner{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}
.site-footer .footer-image img.is-logo{
  width:100%; height:100%; display:block; object-fit:contain; background:#fff; padding:8px 0;
}
.footer-overlay{
  position:relative;
  margin-top:-60px;
  padding:16px 24px;
  border-top-left-radius:var(--seb-radius-lg);
  border-top-right-radius:var(--seb-radius-lg);
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 -1px 0 rgba(0,0,0,0.04);
}
.footer-left{ display:flex; align-items:center; gap:10px; }
.footer-logo{ height:36px; width:auto; display:block; }
.footer-org{ font-size:.95rem; color:var(--seb-muted); }

.footer-links{
  display:flex; align-items:center; gap:14px;
  list-style:none; margin:0; padding:0;
}
.footer-links a{
  color:var(--seb-text); text-decoration:none; font-weight:600;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.footer-links a:hover{
  color:var(--seb-brand);
  border-color:var(--seb-brand);
  box-shadow:0 2px 0 var(--seb-brand);
}

/* ====== Responsive ====== */
@media (max-width:720px){
  .page-title{ font-size:1.7rem; }
  .footer-overlay{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:-30px;
  }
  .footer-links{ flex-wrap:wrap; gap:10px 14px; }
}