/* MUFENS multipage v2 — styles */
*{box-sizing:border-box}
:root{--brand:#c81d25;--ink:#14213d;--muted:#5c6b8a;--bg:#fff;--bg-alt:#f6f8fb;--ring:#1f6feb44}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;color:var(--ink);background:var(--bg)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:#000;color:#fff}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e6e9ef;z-index:10}
.site-header .brand{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem}
.logo{height:68px;width:auto;display:block}
.site-title{margin:0;font-size:1.35rem}
.site-subtitle{margin:.1rem 0 0;color:var(--muted);font-size:.9rem}
.nav-toggle{position:absolute;right:.75rem;top:.75rem;border:1px solid #e0e0e0;background:#fff;border-radius:.375rem;padding:.4rem .6rem}
.primary-nav{padding:0 .75rem .75rem .75rem;display:none}
.primary-nav.open{display:block}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.primary-nav a{display:block;padding:.5rem .75rem;border-radius:.5rem;color:var(--ink);text-decoration:none}
.primary-nav a.active{background:var(--brand);color:#fff}
@media(min-width:768px){.nav-toggle{display:none}.primary-nav{display:block}}
main{max-width:1100px;margin:0 auto;padding:1rem}
.hero{background:var(--bg-alt);border:1px solid #e6e9ef;border-radius:.75rem;padding:1.25rem}
.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:1fr}
@media(min-width:768px){.grid.two{grid-template-columns:1fr 1fr}}
.site-footer{border-top:1px solid #e6e9ef;margin-top:2rem;padding:1rem;text-align:center;color:var(--muted)}
:focus{outline:3px solid var(--ring);outline-offset:2px}
/* PRISMA CTA */
.prisma-cta{display:flex;align-items:center;gap:.65rem;width:100%;max-width:740px;padding:1rem 1.15rem;background:linear-gradient(180deg,#ffffff 0%, #f7fafc 100%);border:1px solid #e6e9ef;border-radius:.75rem;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .15s ease, transform .05s ease, border-color .15s ease}
.prisma-cta:hover{box-shadow:0 4px 14px rgba(17,24,39,.12);border-color:#d6d9e1}
.prisma-cta:active{transform:translateY(1px)}
.prisma-cta .badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#0b63ce10;border:1px solid #cfe2ff;color:#0b63ce;font-weight:700;font-size:.85rem;flex:0 0 auto}
.prisma-cta .meta{line-height:1.25}
.prisma-cta .title{font-weight:700}
.prisma-cta .desc{color:var(--muted);font-size:.95rem}


/* ===== Footer: logo a la izquierda + texto a la derecha ===== */
.footer-branding{
  display: flex;
  align-items: center;
  gap: 1rem;                 /* separación entre logo y texto */
  max-width: 1100px;         /* igual que main */
  margin: 1rem auto 0;       /* centrado horizontal dentro del footer */
  padding: .25rem 1rem;      /* algo de “aire” lateral */
}

.footer-logo {
  display: block;
  height: 48px;              /* adjust */
  width: auto;               
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* mejora nitidez en algunos navegadores */
}
.footer-logo:hover {opacity: 1;}

.funding-note {font-size: 0.95rem;color: var(--muted);margin: 0;line-height: 1.4;}


/* Responsive: en pantallas pequeñas apila (primero logo, debajo texto) */
@media (max-width: 768px){
  .footer-branding{
    flex-direction: column;
    align-items: center;     /* centra el texto al apilar */
    text-align: center;
    gap: .5rem;
  }

 /* ==== FIX MOBILE HEADER LAYOUT ==== */

  /* El contenedor principal del header */
  .site-header .brand{
    display: flex;
    flex-direction: column;      /* Logo arriba, texto debajo */
    align-items: flex-start;     /* Alineado a la izquierda */
    gap: .5rem;
  }

  /* El logo */
  .logo{
    height: 56px;                /* Un poco más pequeño en móvil */
    width: auto;
  }

  /* Título + subtítulo */
  .titles{display: block;width: 100%;}

  .site-subtitle{white-space: normal !important; /* Permitir salto de línea */
    display: block;font-size: .95rem;}

  /* Hamburguesa: posición siempre fija arriba a la derecha */
  .nav-toggle{top: .75rem;right: .75rem;position: absolute;z-index: 20;}
}


.home-subtitle{margin-top: .25rem;font-weight: 500;color: var(--muted);}


.research-structure{width:100%;max-width:600px;display:block;margin:0 auto 1rem;}
.research-block{margin-bottom:.75rem;}
.research-toggle{width:100%;text-align:left;background:#fff;padding:.75rem 1rem;border:1px solid #e6e9ef;border-radius:.5rem;font-weight:600;}
.research-toggle.open{background:#f6f8fb;}
.research-content{display:none;padding:1rem;border-left:1px solid #e6e9ef;border-right:1px solid #e6e9ef;border-bottom:1px solid #e6e9ef;border-radius:0 0 .5rem .5rem;}


.table-wrap{ overflow-x:auto; }
.people-table{ width:100%; border-collapse:collapse; }
.people-table th, .people-table td{ padding:.5rem .6rem; border-bottom:1px solid #e6e9ef; text-align:left; }
.people-table th{ cursor:pointer; border-bottom:2px solid #e6e9ef; white-space:nowrap; }
.people-table tr:hover{ background:#f6f8fb; }
.people-table th.sorted-asc::after{ content:" ▲"; font-size:.8em; color:#5c6b8a; }
.people-table th.sorted-desc::after{ content:" ▼"; font-size:.8em; color:#5c6b8a; }


.prisma-link img{
  width: 22px;      /* tamaño recomendado */
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  transition: transform .1s ease;
}

.prisma-link:hover img{
  transform: scale(1.1);
}


.orcid-link svg{
  width: 22px;
  height: 22px;
  vertical-align: middle;
  transition: transform .1s ease;
}
.orcid-link:hover svg{
  transform: scale(1.1);
}


/* ===== SUPPORT PAGE ===== */

.projects-list{display:flex;flex-direction:column;gap:2rem;margin-top:1.5rem;}

.project{background:#fff;border:1px solid #e6e9ef;border-radius:.75rem;padding:1.25rem 1.5rem;}

.project-title{margin-top:0;font-size:1.3rem;font-weight:600;}

.project p{margin:.5rem 0 1rem;line-height:1.6;}

.project-logos{display:flex;flex-wrap:wrap;justify-content: center;gap:1rem 1.5rem;align-items:center;margin-top:.5rem;}

.project-logos img{height:60px;width:auto;}

@media(max-width:768px){
  .project{padding:1rem;}
  .project-logos{justify-content:center;}
  .project-logos img{height:48px;}
}


.subnav{display:flex;gap:.5rem .75rem;flex-wrap:wrap;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #e6e9ef;}

.subnav a{display:inline-block;padding:.35rem .7rem; background:#fff;border:1px solid #e6e9ef;border-radius:.5rem;text-decoration:none;color:var(--ink);font-weight:500;}

.subnav a:hover,
.subnav a:focus{background:#f6f8fb;border-color:#d6d9e1;}

@media(max-width:768px){
  .subnav{justify-content:center;}
}


html{
  scroll-behavior: smooth;
}

/* Hide all subsections by default */
.people-section{display: none;}
/* Show only the active section */
.people-section.active {display: block;}
.about-section { display: none;}
.about-section.active { display: block;}

.structure-figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: .75rem;
  padding: 1rem;
}

.structure-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}

.structure-caption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
}