/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  display: none;
  position: fixed;
  top:0;
  left: 0;
  z-index: 20000;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #d4a240;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/* Menú*/
nav {
    width: 100%;
    height: 40px;
    background-color: var(--accent); /* color dorado */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    padding-top: 10px;
}

nav a {
    text-decoration: none;
    color: var(--bg-dark); /* texto oscuro para contraste */
    font-family: var(--font);
    margin-left: 130px;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--text-light); /* blanco al pasar */
}

#centrarmenu {
    width: 1000px;
    margin: 0 auto;
}

/* Espaciado para que el contenido no se tape por el menú fijo */
body {
    padding-top: 60px;
}
 /* Menú*/


/* textos adicionales*/
.intro-franja {
    background-color: var(--bg-dark);
    padding: 0.8rem 1rem;
    text-align: center;
    width: 90%;
}

.intro-franja p {
    max-width: 900px;
    margin: 0 auto 1rem auto;
    font-size: 1.1rem;
    line-height: 1.6;
    width: 80%;
}
/* textos adicionales*/

/* Galería*/
.galeria {
    padding: 2rem;
    background-color: #111; /* color de fondo */
    color: white;
    text-align: center;
}

.galeria h2 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.grid-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* adaptable */
    gap: 1rem;
}

.grid-galeria img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* recorta la imagen para que llene el espacio */
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.grid-galeria img:hover {
    transform: scale(1.05); /* efecto zoom al pasar el mouse */
}

/* Lightbox */
.lightbox {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
}

.cerrar {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}
/* Galería*/

/* Imagen logo*/
.logo-footer {
    text-align: center;
    padding: 2rem 0;
    background-color: #111; /* Fondo oscuro igual al resto */
}

.logo-footer img {
    max-width: 500px; /* Tamaño del logo */
    height: auto;
    filter: brightness(1.1); /* Un toque más visible */
}

/* Imagen logo*/

 /* Reset pequeño */
    *, *::before, *::after { box-sizing: border-box; }
    body { margin:0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#0d0d0d; color:#fff; }

    .investigaciones-section { max-width: 1200px; margin: 0 auto; padding: 40px 16px; }

    .investigaciones-section h2 {
      font-size: 2.25rem;
      margin: 0 0 24px;
      font-weight: 800;
      padding-left: 12px;
    }

    /* Grid general: dos columnas (cada columna contiene varias tarjetas) */
    .grid-contenedores {
      display: grid;
      grid-template-columns: 1fr 1fr; /* izquierda / derecha */
      gap: 36px;
      align-items: start; /* que empiecen ambos arriba */
    }

    /* columna: agrupa tarjetas verticalmente */
    .galeria-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* línea dorada divisoria entre columnas (verás en izquierda) */
    .grid-contenedores > .galeria-col:first-child {
      padding-right: 22px;
      border-right: 4px solid #d4a240;
    }

    /* Tarjeta clicable */
    .card-investigacion {
      display: block;
      text-decoration: none;
      color: inherit;
      background: #0b0b0b;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(0,0,0,0.45);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .card-investigacion:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,0.55); }

    .card-investigacion figure { margin:0; position: relative; }

    .card-investigacion img {
      width: 100%;
      height: 220px;       /* alto uniforme para todas las tarjetas */
      object-fit: cover;   /* recorta sin deformar */
      display: block;
    }

    /* degradado para legibilidad del texto sobre la imagen */
    .card-investigacion figure::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0) 100%);
      pointer-events: none;
    }

    .card-investigacion figcaption {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 18px;
      z-index: 2;
      color: #fff;
    }

    .card-investigacion h3 {
      margin: 0 0 8px;
      font-size: 1.02rem;
      line-height: 1.25;
      font-weight: 800;
    }

    .card-investigacion .cta {
      color: #d4a240;
      font-weight: 700;
      font-size: .95rem;
      text-decoration: none;
    }

    /* Ajustes responsivos */
    @media (max-width: 920px) {
      .grid-contenedores { grid-template-columns: 1fr; }
      .grid-contenedores > .galeria-col:first-child { border-right: none; padding-right: 0; border-bottom: 4px solid #d4a240; padding-bottom: 18px; margin-bottom: 18px; }
      .card-investigacion img { height: 200px; }
    }

/* investigaciones*/

/* Por defecto la ocultamos (desktop/tablet) */
.portada-movil {
  display: none;
}

/* Solo se muestra en pantallas de ancho máximo 768px */
@media (max-width: 768px) {
  .portada-movil {
    display: block;
    width: 100%;
  }

  .portada-movil img {
    width: 100%;
    height: auto; /* mantiene proporción */
    display: block;
  }
}
/* --- Desktop y tablet: mostrar parallax, ocultar portada-movil --- */
header.parallax {
  display: flex;
}

.portada-movil {
  display: none;
}

/* --- Celular: mostrar portada-movil, ocultar parallax --- */
@media (max-width: 768px) {
  header.parallax {
    display: none; /* oculta la portada grande */
  }

  .portada-movil {
    display: block;
    width: 100%;
  }

  .portada-movil img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* Por defecto oculto en escritorio */
.portada-movil {
  display: none;
  position: relative;
  width: 100%;
}

.portada-movil img {
  width: 100%;
  height: auto;
  display: block;
}

/* Texto encima de la imagen */
.portada-movil .portada-texto {
  position: absolute;
  bottom: 20%;
  left: 5%;
  color: white;
  max-width: 90%;
  background: rgba(0, 0, 0, 0.4); /* opcional: fondo semitransparente */
  padding: 1rem;
  border-left: 3px solid #f0b400; /* línea decorativa amarilla */
}

.portada-movil .portada-texto h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.portada-movil .portada-texto .descripcion {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* En celular mostrar portada móvil y ocultar el parallax */
@media (max-width: 768px) {
  header.parallax {
    display: none;
  }

  .portada-movil {
    display: block;
  }
}


/* Código Isabella*/



/* Código Oscar */
:root {
    --bg-dark: #111;
    --text-light: #f5f5f5;
    --accent: #d4a240;
    --font: 'Inter', sans-serif;
}
*, *::before, *::after {margin:0; padding:0; box-sizing:border-box;}
body {
    font-family: var(--font);
    background: var(--bg-dark);
    color: var(--text-light);
    line-height:1.6;
}
.parallax {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
header.parallax {
    justify-content: flex-end;
    padding-right: 5%;
}
.container {
    background: rgba(0,0,0,.6);
    padding: 2rem;
    max-width: 500px;
    margin: 2rem;
    border-left: 4px solid var(--accent);
}
h1 { font-size:2.5rem; margin-bottom:1rem; }
h2 { font-size:2rem; margin-bottom:1rem; }
p { font-size:1.1rem; margin-bottom:1rem; }
.accent-line { width: 60px; height:4px; background: var(--accent); margin:1rem 0; }
.btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    background: var(--accent);
    color: var(--bg-dark);
    font-weight:600;
    text-decoration:none;
    border-radius: 4px;
    margin-top:1rem;
}
footer {
    text-align:center;
    padding:2rem;
    background:#000;
    font-size:.9rem;
}
@media(max-width:768px){
    header.parallax { justify-content:center; padding:2rem;}
    .container { margin:2rem; }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  nav {display: none;}
  .topnav.responsive {position: fixed;}
  .topnav.responsive a.icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}