/* Tipografía institucional: Montserrat (títulos) + Open Sans (cuerpo) */

body {
  font-family: "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
}

a.btn, #site-languages .btn-lang {
  font-family: "Montserrat", sans-serif;
}

/* Tamaños diferenciales solo para la página de detalle de Proyectos:
   los títulos por defecto del tema (h1 5rem / h2 4rem / h3 3.5rem) son
   demasiado grandes para títulos largos de proyectos y se ven mal */
.page-proyectos-detalle .post-title {
  font-size: 3rem;
  line-height: 1.2em;
}

.page-proyectos-detalle h2 {
  font-size: 2.2rem;
  margin-top: 1.5em;
}

.page-proyectos-detalle h3 {
  font-size: 1.7rem;
  line-height: 1.3em;
  margin-top: 1.2em;
}

/* Centrar el título del grupo de investigación (GISCA IPC) en la
   página de Proyectos. Selector estructural (el h6 justo después del
   logo), no por id del texto, para que funcione igual en español y
   en inglés sin importar cómo cambie el título en el futuro */
.page-proyectos-detalle .detail-page-logo + h6 {
  text-align: center;
}

/* Logo de la página de Proyectos (gisca_ipc_nocolor.png) más grande
   que el tamaño mediano compartido por defecto (.detail-page-logo).
   Se pudo agrandar más que antes porque el PNG ya viene recortado
   al contenido real (antes tenía mucho margen transparente alrededor,
   como "Mesa de trabajo") */
.page-proyectos-detalle .detail-page-logo {
  max-height: 320px;
}

/* Logo centrado, tamaño mediano, al encabezado de las páginas de
   detalle (Proyectos / Staff). Se limita por alto, no por ancho,
   porque logo_proyectos es horizontal y logo_staff es vertical —
   con el mismo alto máximo, cada uno mantiene su proporción real */
.detail-page-logo {
  display: block;
  margin: 0 auto 2.5rem auto;
  max-height: 180px;
  width: auto;
}

/* Página de Staff: nombre arriba, texto (cargo + credenciales) abajo,
   con el enlace a CvLac al final. Separación entre una persona y la
   siguiente */
.staff-block {
  margin-bottom: 2.5rem;
}

.staff-block:last-child {
  margin-bottom: 0;
}

/* Página de Staff: más ancho que el máximo por defecto del tema
   (700px) para que los nombres completos (### h3) entren en una
   sola línea en vez de partirse en dos */
.page-staff-detalle .post {
  width: 95%;
  max-width: 950px;
}

/* Logo de la página de Staff más grande que el tamaño mediano
   compartido con Proyectos (.detail-page-logo) */
.page-staff-detalle .detail-page-logo {
  max-height: 260px;
}

/* La página de detalle de Proyectos usa casi todo el ancho de la
   pantalla, igual que se hizo con la sección GISCA en portada (el
   tema limita las páginas sueltas a max-width:700px) */
.page-proyectos-detalle .post {
  width: 95%;
  max-width: 1400px;
}

/* Cada proyecto en 2 columnas (imagen | nombre y descripción), como
   en la página real del sitio Wix (s-projects-side-by-side) */
.proyecto-row {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: 3.5rem;
}

.proyecto-img-col {
  flex: 0 0 320px;
}

.proyecto-text-col {
  flex: 1 1 400px;
  min-width: 0;
}

/* Tamaño uniforme para todas las imágenes de proyectos: misma caja
   (proporción ~3:4, parecida a las portadas del sitio real). Se usa
   contain (no cover) porque una de las 6 imágenes es apaisada
   (1674x1458) a diferencia de las otras 5 que son verticales — con
   cover esa imagen quedaba recortada a una tira angosta del centro.
   Con contain se ve completa, sin recortar ninguna, con fondo blanco
   para que no se note el espacio sobrante */
.proyecto-img-col img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background-color: #fff;
  display: block;
}

@media only screen and (max-width: 700px) {
  .proyecto-row {
    flex-direction: column;
  }

  .proyecto-img-col {
    flex: 0 0 auto;
    width: 60%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* "Quiénes somos", "Qué buscamos" y el teaser "¿Quieres conocer más..."
   usan casi todo el ancho de la página, igual que se hizo con la
   sección GISCA original y con la página de detalle de Proyectos (el
   tema limita las secciones de portada a max-width:700px, lo que
   dejaba el contenido apeñuscado en el centro). Se repiten los ids
   en inglés porque el id se autogenera del título de cada sección,
   que cambia de un idioma a otro */
#quiénes-somos.post,
#qué-buscamos.post,
#proyectos.post,
#who-we-are.post,
#what-we-seek.post,
#projects.post {
  width: 95%;
  max-width: 1400px;
}

/* "Quiénes somos" y "Qué buscamos": layout en 2 columnas
   (imagen | texto), mismo patrón que .proyecto-row pero con su
   propio tamaño de imagen (son fotos, no portadas de reportes) */
.content-row {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.content-img-col {
  flex: 0 0 45%;
}

.content-img-col img {
  width: 100%;
  height: auto;
  display: block;
}

.content-text-col {
  flex: 1 1 400px;
  min-width: 0;
}

/* Imagen de "Qué buscamos" achicada 1/4 (100%→75%), solo en esta
   sección — mantiene la proporción original (height:auto), no
   recorta nada, solo reduce el tamaño mostrado */
#qué-buscamos .content-img-col img,
#what-we-seek .content-img-col img {
  width: 75%;
  margin: 0 auto;
}

@media only screen and (max-width: 900px) {
  .content-row {
    flex-direction: column;
  }

  .content-img-col {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Centrar los títulos de las 2 columnas de GISCA ("Química e
   Intensificación de procesos" / "Sistemas Ambientales y Sociales") */
.gisca-col h6 {
  text-align: center;
}

/* GISCA: layout en 2 columnas, como en el sitio original */
.gisca-columns {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.gisca-col {
  flex: 1 1 300px;
  min-width: 0;
}

/* Las 2 imágenes de GISCA tienen tamaño/proporción original distintos;
   se emparejan al mismo recorte para que se vean uniformes. Ancho y
   alto reducidos por igual (25% cada uno, de 100%x320px a 75%x240px)
   para achicar la imagen completa sin recortarla más de lo que ya
   estaba recortada */
.gisca-col img {
  width: 75%;
  height: 240px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* gisca_pinn.png es un diagrama panorámico (1942x1132) con contenido
   pegado a los 4 bordes: con object-fit:cover (el valor por defecto
   de arriba) se recortaban los costados. Con contain se ve el
   diagrama completo, sin cortar nada; fondo blanco para que no se
   note el espacio sobrante (mismo criterio que proyecto_3 en la
   sección de Proyectos de investigación) */
.gisca-col img[src*="gisca_pinn"] {
  object-fit: contain;
  background-color: #fff;
}

/* Evita que el texto se parta con guion en cualquier parte del sitio
   (el tema aplica hyphens:auto + word-break:break-word a todo .post,
   es decir a todo el contenido de cada página): la palabra completa
   pasa entera a la línea siguiente en vez de cortarse */
.post {
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}


/* Portada: logo, título y subtítulo más grandes. Este halo lo usan
   POR IGUAL .blog-title y .blog-description (misma variable), para
   que se lean claramente sobre la foto de fondo real (cielo estrellado,
   muy texturada) sin que título y subtítulo queden distintos entre sí.
   Capas repetidas al mismo radio se suman y dan un borde casi sólido,
   no solo un brillo tenue. */
:root {
  --cover-title-text-shadow:
    0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff,
    0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff,
    0 0 14px #fff, 0 0 14px #fff, 0 0 14px #fff,
    0 0 28px #fff, 0 0 28px #fff,
    0 0 50px #fff, 0 0 50px #fff,
    0 0 80px #fff, 0 0 80px #fff,
    0 0 120px #fff;
}

/* El logo real es muy panorámico (proporción ~3.24:1, 1256x388).
   Solo se limita el alto (sin límite de ancho) para que no se
   distorsione ni quede recortado por un ancho máximo chico */
#blog-logo {
  max-height: 300px;
}

/* El tema anida .blog-title/.blog-description dentro de #site-head,
   lo que les da más especificidad que un selector de clase suelto.
   Hay que igualar esa especificidad para que estas reglas realmente
   ganen la cascada (antes perdían en silencio contra el tema). */
#site-head .blog-title {
  font-size: 7rem;
}

#site-head .blog-description {
  font-family: "Montserrat", sans-serif;
  font-size: 3.2rem;
  color: var(--cover-text-color);
  text-shadow: var(--cover-title-text-shadow);
}

@media only screen and (max-width: 1130px) {
  #blog-logo {
    max-height: 220px;
  }

  .blog-title {
    font-size: 5.5rem;
  }

  .blog-description {
    font-size: 2.8rem;
  }
}

@media only screen and (max-width: 500px) {
  #blog-logo {
    max-height: 130px;
  }

  .blog-title {
    font-size: 4rem;
  }

  .blog-description {
    font-size: 2.6rem;
  }
}