:root{

    --primary:#1d3557;
    --accent:#e95b52;
    --muted: #666;
    --light:#f6f8fb;
    --text:#2b2b2b;
    --grey:#777;
	--card: #ffffff;
	--shadow: 0 4px 18px rgba(0,0,0,0.08);
    --radius: 16px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    color:var(--text);
    background:white;
    line-height:1.7;

}

a{
    text-decoration: none; 
    color: var(--primary);
    
}

.container{

    width:min(1100px,90%);
    margin:auto;

}

section[id]{
    scroll-margin-top: 70px;
}

/* ---------------- NAV ---------------- */

header{

    position:sticky;
    top:0;
    background:white;
    border-bottom:1px solid #eee;
    z-index:100;

}

.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    position: relative;
    

}

.logo img{

    height:52px;

}

nav{

    display:flex;
    gap:35px;

}

nav a{

    text-decoration:none;
    color:var(--primary);
    font-weight:500;
    transition:.25s;

}

nav a:hover{

    color:var(--accent);

}

.menu-toggle{

    display:none;
    background:none;
    border:none;
    font-size:2rem;
    color:var(--primary);
    cursor:pointer;

}

/* ---------------- HERO ---------------- */

.hero{

    padding:90px 0 70px;
    text-align:center;

}

.hero-logo{

    width:520px;
    max-width:90%;
    margin-bottom:35px;

}

.hero h1{

    font-size:56px;
    color:var(--primary);

}

.subtitle{

    color:var(--accent);
    font-size:22px;
    margin:12px 0 28px;
    font-weight:500;

}

.description{

    max-width:760px;
    margin:auto;
    color:var(--grey);
    font-size:18px;

}

/* ---------------- SECTIONS ---------------- */

section{

    padding:60px 0;

}

section:nth-child(even){

    background:var(--light);

}

h2{

    color:var(--primary);
    margin-bottom:40px;
    font-size:36px;

}

.fade-section{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-section.visible{
    opacity:1;
    transform:translateY(0);
}

/* =====================================================
   PEOPLE
===================================================== */

.people{

    background:#f7f9fc;

}

.people-category{

    margin-top:70px;

}

.people-category:first-of-type{

    margin-top:30px;

}

.category-title{

    font-size:1.5rem;
    color:var(--primary);
    margin-bottom:35px;
    padding-bottom:12px;
    border-bottom:2px solid #dfe5ec;
    font-weight:600;

}

/* ---------- Principal Investigators ---------- */

.pi-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:40px;

}

.pi{

    display:flex;
    gap:30px;
    align-items:flex-start;

    background:white;

    padding:30px;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.pi img{

    width:170px;
    height:170px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;

}

.person-content{

    flex:1;

}

/* ---------- Research Team ---------- */

.research-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;

}

.research{

    background:white;

    text-align:center;

    padding:30px;

    border-radius:16px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.research img{

    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;

}

/* ---------- Working Team (collaborators) ---------- */ 

.working-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:35px;

    text-align:center;

}

.member{

    padding:10px;

}

.member img{

    width:95px;
    height:95px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;

}

.member h5{

    font-size:1rem;
    color:var(--primary);
    margin-bottom:5px;

}

.member span{

    display:block;
    color:#777;
    font-size:.9rem;
    margin-bottom:8px;

}

/* ---------- Common ---------- */

.person h4{

    color:var(--primary);
    margin-bottom:5px;
    font-size:1.3rem;

}

.person {
    transition: transform .3s ease,
                box-shadow .3s ease,
                border-color .3s ease;
    
}
.person:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    
}

.role{

    display:inline-block;
    color:var(--accent);
    font-weight:600;
    margin-bottom:15px;
    font-size:.95rem;

}

.person p{

    color:#666;
    margin-bottom:15px;
    line-height:1.6;

}

.person a,
.member a{

    text-decoration:none;
    color:var(--accent);
    font-weight:600;

}

.person a:hover,
.member a:hover{

    text-decoration:underline;

}


/* ---------------- CARDS (PUBLICACIONES) ---------------- */



.card {
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
 
    
  /* Nuevas propiedades para la experiencia interactiva */
  border-left: 4px solid transparent;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.25s ease, 
              border-left-color 0.25s ease;
}

/* Efecto al pasar el cursor sobre un artículo */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(35, 78, 112, 0.12); /* Sombra un poco más profunda con tu tono azul */
  border-left-color: var(--accent); /* Se ilumina el borde izquierdo en color azul claro */
}


.pub-title {
  font-weight: bold;
  color: var(--primary);
}




.pub-details {
  color: var(--muted);
  margin-top: 0.5rem;
}

.card-footer{
    /*
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1rem;
    gap:1rem;
    
    */
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
  
}


.badges{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
}

.metrics{
    display:flex;
    align-items:center;
    flex-shrink:0;
    margin-left: auto;
  
}

.metrics .altmetric-embed {
    transform: scale(0.80);
    transform-origin: center right;
}


.badge {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  color: white;
  font-size: 0.85rem;
  text-decoration: none;
}

.data {
  background: #2a9d8f;
}

.divulgacion {
  background: #457b9d;
}

.preregistered {
  background: #e76f51;
}


/* ---------- Outreach activity tags ---------- */

.activity-card {
    display: flex;
    padding: 0;
    overflow: hidden;
	flex-direction: column;
}

.activity-tag {
    width: 100%;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-content {
    padding: 1.5rem;
    flex: 1;
}

/* Activity types */

.activity-tag.conference {
    background: #457b9d;
}

.activity-tag.collaboration {
    background: #2a9d8f;
}

.activity-tag.media {
    background: #e76f51;
}




/* ---------------- FOOTER ---------------- */

footer{

    padding:30px;
    text-align:center;
    color:#888;
    border-top:1px solid #eee;

}



/* ---------------- BOTON BACKTOTOP ---------------- */

/* Botón Back to Top */

#backToTop{

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background-color: #0056b3;      /* Azul corporativo */

    color: white;

    font-size: 24px;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

    transition:
        opacity .3s ease,
        transform .3s ease,
        background-color .3s ease;

    opacity: 0;

    visibility: hidden;

    z-index: 9999;      /* Siempre por encima del contenido */

}


/* Cuando debe mostrarse */

#backToTop.show{

    opacity: 1;

    visibility: visible;

}


/* Efecto al pasar el ratón */

#backToTop:hover{

    background-color: #004494;

    transform: translateY(-4px) scale(1.05);

}


/* Efecto al pulsarlo */

#backToTop:active{

    transform: scale(0.95);

}


#backToTop svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* ---------------- MOBILE ---------------- */

@media(max-width:700px){


.hero h1{

    font-size:42px;

}

.subtitle{

    font-size:18px;

}

}


@media (max-width:700px){

    .pi{

        flex-direction:column;
        text-align:center;
        align-items:center;
        padding: 20px;

    }

    .pi img{

        width:120px;
        height:120px;

    }
    
    .pi-grid{
        grid-template-columns:1fr;
    }

}


@media (max-width:700px){
       .container{
        width:100%;
        padding:0 15px;
        box-sizing:border-box;
    }
    
    .nav{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:18px 0;
        gap:0;
        width:100%;
    }
    
    .logo img{
        height:40px;
    }
    
    .menu-toggle{
        display:block;
        font-size:2rem;
        padding:0;
        background:none;
        border:none;
        color:var(--primary);
        cursor:pointer;
        flex-shrink:0;
        margin-right:10px; 
    }
    
    nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
    }
    
    nav a{
        padding:16px;
        text-align:center;
        border-bottom:1px solid #eee;
    }
    
    nav.active{
        display:flex;
    }
}

@media(max-width:700px){

    .activity-card {
        flex-direction: column;
    }

    .activity-tag {
        width: 100%;
        height: 30px;
    }

    .activity-content {
        width: 100%;
    }

}

/* =====================================================
   PUBLICATIONS SEARCH — minimal additions
   ===================================================== */

.publications-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px auto;
    gap: 1rem;
    align-items: end;
    margin: -10px 0 2rem;
    padding: 1rem;
    background: var(--light);
    border-radius: var(--radius);
}

.publications-controls label {
    display: block;
    margin-bottom: .35rem;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 600;
}

.search-row {
    display: flex;
    gap: .5rem;
}

.publications-controls input,
.publications-controls select {
    width: 100%;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    background: white;
    color: var(--text);
    font: inherit;
}

.publications-controls input:focus,
.publications-controls select:focus {
    outline: 2px solid rgba(233,91,82,.25);
    border-color: var(--accent);
}

.search-clear {
    min-height: 42px;
    padding: .55rem .9rem;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    background: white;
    color: var(--primary);
    font: inherit;
    cursor: pointer;
}

.search-clear:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.publication-count {
    color: var(--muted);
    font-size: .9rem;
    white-space: nowrap;
    padding-bottom: .65rem;
}

.year-heading {
    color: var(--primary);
    margin: 2.2rem 0 1rem;
    padding-bottom: .45rem;
    font-size: 1.6rem;
    border-bottom: 2px solid #dfe5ec;
}

.publication-empty {
    color: var(--muted);
    margin: 1rem 0 2rem;
}

@media(max-width:700px) {
    .publications-controls {
        grid-template-columns: 1fr;
        align-items: stretch;
        margin-top: -5px;
    }

    .publication-count {
        padding-bottom: 0;
    }

    .search-clear {
        flex-shrink: 0;
    }
}