/* ==========================================================================
   1. DISEÑO
   Colores, sombras y medidas reutilizadas en todo el sitio. Para cambiar la
   identidad visual, conviene empezar por estas variables.
   ========================================================================== */
:root {
  /* Paleta */
  --color-acento: #226e93;
  --color-texto: #292929;
  --color-metadatos: #606060;
  --color-borde: #dfe4e9;
  --color-fondo: #ffffff;
  --color-texto-inverso: #ffffff;
  --color-superficie-suave: #f3f4f6;

  /* Navegación */
  --color-navegacion: #606060;
  --color-navegacion-texto: var(--color-texto-inverso);
  --color-navegacion-texto-suave: #e3e3e3;
  --color-navegacion-sombra: rgb(0 0 0 / 10%);
  --color-superposicion: rgb(0 0 0 / 60%);

  /* Elevación */
  --color-sombra-suave: rgb(0 0 0 / 6%);
  --color-sombra-media: rgb(0 0 0 / 7%);
  --color-sombra-fuerte: rgb(0 0 0 / 11%);

  /* Escala tipográfica: cambiá el porcentaje para escalar todo el sitio. */
  --escala-tipografica: 100%;
  --tamano-texto-2xs: 0.75rem;
  --tamano-texto-xs: 0.8125rem;
  --tamano-texto-sm: 0.875rem;
  --tamano-texto-md: 0.9375rem;
  --tamano-texto-base: 1rem;
  --tamano-texto-lg: 1.0625rem;
  --tamano-texto-xl: 1.125rem;
  --tamano-texto-2xl: 1.25rem;
  --tamano-texto-3xl: 1.375rem;
  --tamano-texto-4xl: 1.4375rem;
  --tamano-texto-5xl: 1.5rem;
  --tamano-titulo-pagina: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --tamano-titulo-seccion: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --tamano-control-carrusel: 2.125rem;

  /* Layout */
  --ancho-contenido: 1100px;
  --espacio-tarjetas: 16px;
  --ancho-banner-inicio: 363px;
  --ancho-instituciones-inicio: 520px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  font-size: var(--escala-tipografica);
}

body {
  margin: 0;
  color: var(--color-texto);
  background: var(--color-fondo);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--tamano-texto-base);
}

a {
  color: inherit;
}

/* ==========================================================================
   3. CABECERA Y NAVEGACIÓN
   La cabecera la genera site.js. #site-header reserva su altura para que la
   barra fija no cubra el contenido.
   ========================================================================== */
#site-header {
  height: 65px;
}

.barra-navegacion {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 65px;
  padding: 7px 16px 7px 26px;
  border-top: 3px solid var(--color-navegacion);
  background: var(--color-navegacion);
  box-shadow: 0 5px 18px var(--color-navegacion-sombra);
  backdrop-filter: blur(12px);
  color: var(--color-navegacion-texto);
}

/* Marca InsuMate a la izquierda de la barra en escritorio. */
.marca {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  color: var(--color-navegacion-texto);
  font-size: var(--tamano-texto-2xl);
  font-weight: 550;
  text-decoration: none;
}

/* Imagen pequeña de InsuMate en la barra. */
.marca-imagen {
  display: block;
  width: 40px;
  height: 36px;
  object-fit: contain;
}

/* Símbolo ® junto al nombre de la marca. */
.marca sup {
  font-size: var(--tamano-texto-md);
}

/* Lista horizontal de enlaces que aparece en pantallas anchas. */
.menu-escritorio {
  margin-left: auto;
}

/* Disposición de los enlaces del menú de navegación. */
.enlaces-menu {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.45vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Aspecto normal de los enlaces del menú. */
.enlaces-menu a {
  color: var(--color-navegacion-texto-suave);
  font-size: var(--tamano-texto-md);
  text-decoration: none;
  white-space: nowrap;
}

/* Resalta el enlace actual o el que está bajo el cursor. */
.enlaces-menu a:hover,
.enlaces-menu a[aria-current="page"] {
  color: var(--color-navegacion-texto);
  font-weight: 550;
}

/* Botones de menú y búsqueda. La lupa también aparece en escritorio. */
.boton-menu,
.boton-busqueda {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--color-navegacion-texto);
  text-decoration: none;
  cursor: pointer;
}

/* El botón hamburguesa se oculta en escritorio. */
.boton-menu {
  display: none;
}

/* Dibujo SVG de los iconos de menú y búsqueda. */
.boton-menu svg,
.boton-busqueda svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Oculta el fondo y el panel cuando JavaScript les agrega el atributo hidden. */
.fondo-menu[hidden],
.menu-lateral[hidden] {
  display: none;
}

/* Fondo oscuro que aparece detrás del menú lateral en móvil. */
.fondo-menu {
  position: fixed;
  z-index: 10;
  inset: 0;
  background: var(--color-superposicion);
}

/* Panel lateral oscuro que se abre con el botón hamburguesa. */
.menu-lateral {
  position: fixed;
  z-index: 11;
  inset: 0 auto 0 0;
  width: min(190px, 72vw);
  overflow-y: auto;
  padding: 8px 16px 24px;
  background: var(--color-navegacion);
  color: var(--color-navegacion-texto);
}

/* Botón X para cerrar el menú lateral. */
.cerrar-menu {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 0 10px -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-navegacion-texto-suave);
  font-size: var(--tamano-texto-5xl);
  line-height: 20px;
  cursor: pointer;
}

/* En el panel móvil, los enlaces aparecen en una columna. */
.enlaces-menu-movil {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 0;
}

/* Quita márgenes predeterminados de cada elemento de la lista móvil. */
.enlaces-menu-movil li {
  margin: 0;
}

/* Tamaño y separación de los enlaces del menú lateral. */
.enlaces-menu-movil a {
  display: block;
  padding: 9px 8px;
  color: var(--color-navegacion-texto);
  font-size: var(--tamano-texto-2xs);
  white-space: normal;
}

/* ==========================================================================
   4. PÁGINA PRINCIPAL
  El contenido va centrado en una sola columna. Los accesos a otras secciones
  están en la barra de navegación, no en tarjetas dentro de la página.
   ========================================================================== */
.inicio {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(360px, 520px);
  align-items: center;
  justify-content: center;
  gap: 28px 100px;
  width: 100%;
  padding: 80px 16px 18px;
}

/* Ilustración del Inicio: limita su tamaño sin deformar la imagen. */
.ilustracion-inicio {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 360px);
  height: 380px;
  object-fit: contain;
}

/*
  Botón de monitoreo remoto.
  Comparte el ancho máximo con la imagen institucional de abajo.
*/
.boton-principal {
  display: inline-flex;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: min(100%, var(--ancho-banner-inicio));
  min-height: 44px;
  margin-top: 0;
  padding: 11px 18px;
  border-radius: 5px;
  background: var(--color-acento);
  color: var(--color-texto-inverso);
  font-size: var(--tamano-texto-base);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.boton-institucional {
  grid-column: 2;
}

/* Oscurece apenas el botón al pasar el cursor. */
.boton-principal:hover {
  filter: brightness(0.94);
}

/* Bloque institucional de la segunda columna del Inicio. */
.instituciones {
  position: relative;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: min(100%, var(--ancho-instituciones-inicio));
  margin-top: 0;
}

.etiqueta-instituciones {
  position: absolute;
  top: -1.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-metadatos);
  font-size: var(--tamano-texto-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.instituciones img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* ==========================================================================
   5. LISTADOS Y TARJETAS
  Las listas crecen según la cantidad de artículos y usan el scroll normal
  de la página, sin altura fija ni desplazamiento interno.
   ========================================================================== */
.pagina-listado {
  width: min(100% - 40px, var(--ancho-contenido));
  margin: 38px auto 48px;
}

/* Título principal compartido por todas las subpáginas. */
.pagina-listado > h1,
.encabezado-contenido h1 {
  color: var(--color-acento);
  font-size: var(--tamano-titulo-pagina);
  line-height: 1.15;
  text-align: center;
}

.pagina-listado > h1 {
  margin: 0 0 42px;
}

/* Publicaciones científicas: una tarjeta por fila. */
#lista-articulos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-tarjetas);
}

/* Divulgación: dos tarjetas por fila en pantallas anchas. */
.pagina-divulgacion #lista-articulos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Apariencia compartida por todas las tarjetas de artículos. */
.tarjeta {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  background: var(--color-fondo);
  box-shadow: 0 2px 8px var(--color-sombra-suave);
  color: inherit;
  text-decoration: none;
}

/* Sombra un poco más visible al pasar el cursor sobre una tarjeta enlazada. */
a.tarjeta:hover {
  box-shadow: 0 5px 14px var(--color-sombra-fuerte);
}

/* Imágenes de divulgación en proporción 4:3, recortadas sin deformarse. */
.tarjeta img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-superficie-suave);
}

/* Espacio alrededor del título y los metadatos de cada tarjeta. */
.contenido {
  padding: 18px;
}

/* Título de cada publicación o nota de divulgación. */
.titulo-articulo {
  margin: 0 0 10px;
  color: var(--color-acento);
  font-size: var(--tamano-texto-xl);
  font-weight: 700;
  line-height: 1.4;
}

/* Texto secundario de tarjetas y mensajes de estado. */
.metadatos,
.estado {
  color: var(--color-metadatos);
  font-size: var(--tamano-texto-sm);
  line-height: 1.5;
}

.metadatos {
  margin: 0;
}

.estado {
  margin: 0 0 16px;
}

/* ==========================================================================
   6. ESTRUCTURA DE PÁGINAS INFORMATIVAS
  Estructura común para InsuMate, App, Monitoreo Remoto, COVID-19, aspectos
   éticos y contacto.
   ========================================================================== */
.pagina-contenido {
  width: min(100% - 40px, 980px);
  margin: 46px auto 64px;
}

.encabezado-contenido {
  margin-bottom: 34px;
  text-align: center;
}

.encabezado-contenido h1 {
  margin: 0;
}

.encabezado-contenido p {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--color-metadatos);
  font-size: var(--tamano-texto-xl);
  line-height: 1.6;
}

/* ==========================================================================
   7. PÁGINAS DE PRODUCTO
   Las tres variantes comparten ancho, tipografía y tratamiento de enlaces.
   Cada composición conserva su propia distribución de columnas.
   ========================================================================== */
.pagina-insumate,
.pagina-insumate-app,
.pagina-insumate-mr {
  width: min(100% - 40px, 1180px);
}

.pagina-insumate .encabezado-contenido,
.pagina-insumate-app .encabezado-contenido,
.pagina-insumate-mr .encabezado-contenido {
  margin-bottom: 44px;
}

.presentacion-insumate p,
.presentacion-insumate-app > p,
.texto-insumate-mr p {
  margin: 0 0 18px;
  font-size: var(--tamano-texto-lg);
  line-height: 1.65;
  text-align: justify;
}

.presentacion-insumate a,
.presentacion-insumate-app a:not(.boton-accion),
.texto-insumate-mr a:not(.boton-accion) {
  color: var(--color-acento);
  text-underline-offset: 3px;
}

.imagen-insumate,
.imagen-insumate-app {
  display: block;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
}

/* InsuMate: texto e ilustración en una composición horizontal. */
.presentacion-insumate {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  column-gap: clamp(40px, 7vw, 92px);
}

.presentacion-insumate p {
  grid-column: 1;
}

.presentacion-insumate p:last-child {
  margin-bottom: 0;
}

.imagen-insumate {
  grid-column: 2;
  grid-row: 1 / span 4;
  max-width: 400px;
}

/* InsuMate App: imagen a la izquierda, texto a la derecha y descarga debajo. */
.presentacion-insumate-app {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.2fr);
  align-items: start;
  column-gap: clamp(44px, 6vw, 80px);
}

.presentacion-insumate-app > p {
  grid-column: 2;
}

.imagen-insumate-app {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  max-width: 500px;
}

.descarga-insumate-app {
  grid-column: 2;
  margin-top: 6px;
  text-align: left;
}

.descarga-insumate-app > p {
  margin: 0;
  font-size: var(--tamano-texto-base);
  line-height: 1.6;
}

.descarga-insumate-app .botones-contenido {
  justify-content: flex-start;
  margin: 16px 0 0;
}

.descarga-insumate-app .boton-accion {
  width: min(100%, 760px);
}

.bloque-contenido {
  margin-top: 28px;
}

.bloque-contenido p,
.bloque-contenido li {
  font-size: var(--tamano-texto-lg);
  line-height: 1.72;
}

.bloque-contenido p {
  margin: 0 0 18px;
  text-align: justify;
}

.bloque-contenido h2 {
  margin: 38px 0 14px;
  color: var(--color-acento);
  font-size: var(--tamano-titulo-seccion);
}

.bloque-contenido h3 {
  margin: 30px 0 10px;
  font-size: var(--tamano-texto-3xl);
}

.bloque-contenido a:not(.boton-accion) {
  color: var(--color-acento);
  text-underline-offset: 3px;
}

.imagen-contenido {
  display: block;
  width: 100%;
  max-height: 620px;
  margin: 30px auto;
  object-fit: contain;
}

.imagen-contenido-marco {
  padding: 14px;
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  background: var(--color-fondo);
  box-shadow: 0 3px 14px var(--color-sombra-media);
}

.botones-contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.boton-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 5px;
  background: var(--color-acento);
  color: var(--color-texto-inverso);
  font-weight: 700;
  text-decoration: none;
}

.boton-accion:hover {
  filter: brightness(0.94);
}

.boton-accion-secundario {
  border: 1px solid var(--color-acento);
  background: transparent;
  color: var(--color-acento);
}

/* Monitoreo remoto: carrusel a la izquierda y explicación a la derecha. */
.presentacion-insumate-mr {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 34px clamp(44px, 6vw, 80px);
}

.carrusel-mr {
  min-width: 0;
  outline: none;
}

.carrusel-mr:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 6px;
}

.carrusel-mr-ventana {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
}

.diapositiva-mr {
  display: grid;
  width: 100%;
  min-height: 360px;
  margin: 0;
  place-items: center;
}

.diapositiva-mr[hidden] {
  display: none;
}

.diapositiva-mr img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 470px;
  object-fit: contain;
}

.control-carrusel {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 0 4px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: var(--color-superposicion);
  color: var(--color-texto-inverso);
  font-size: var(--tamano-control-carrusel);
  line-height: 1;
  cursor: pointer;
}

.control-carrusel:hover,
.control-carrusel:focus-visible {
  background: var(--color-navegacion);
}

.control-carrusel-anterior {
  left: 8px;
}

.control-carrusel-siguiente {
  right: 8px;
}

.indicadores-carrusel {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.indicadores-carrusel button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-borde);
  cursor: pointer;
}

.indicadores-carrusel button[aria-current="true"] {
  background: var(--color-acento);
}

.credito-carrusel {
  margin: 16px 0 0;
  color: var(--color-metadatos);
  font-size: var(--tamano-texto-2xs);
  line-height: 1.5;
}

.acceso-monitoreo {
  width: 100%;
}

.accesos-monitoreo {
  display: grid;
  gap: 12px;
}

.enlace-etica-mr {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 170px;
}

/* ==========================================================================
   8. CONTENIDO COMPLEMENTARIO Y CONTACTO
   ========================================================================== */
.lista-investigadores {
  columns: 2;
  column-gap: 48px;
  padding-left: 22px;
}

.lista-investigadores li {
  break-inside: avoid;
  margin-bottom: 8px;
}

.contacto-opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.contacto-opciones-unificada {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}

.contacto-tarjeta {
  padding: 24px;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  background: var(--color-fondo);
  box-shadow: 0 3px 12px var(--color-sombra-suave);
}

.contacto-tarjeta h2 {
  margin-top: 0;
  color: var(--color-acento);
  font-size: var(--tamano-texto-4xl);
}

.contacto-tarjeta p {
  font-size: var(--tamano-texto-base);
  line-height: 1.6;
}

.contacto-persona {
  display: grid;
  gap: 5px;
  margin-top: 26px;
}

.contacto-persona strong {
  font-size: var(--tamano-texto-xl);
}

.contacto-persona span {
  color: var(--color-metadatos);
  font-size: var(--tamano-texto-sm);
}

.contacto-persona a {
  width: fit-content;
  color: var(--color-acento);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

.contacto-persona-alternativa {
  padding-top: 24px;
  border-top: 1px solid var(--color-borde);
}

/* ==========================================================================
   9. PANTALLAS ANGOSTAS
  Cambia el menú superior por el botón hamburguesa y reduce los anchos máximos
  del botón y la institución a 278 px. Ambos siguen reduciéndose si falta espacio.
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --ancho-banner-inicio: 278px;
    --ancho-instituciones-inicio: 420px;
  }

  #site-header {
    height: 40px;
  }

  /* Compacta la barra superior para móvil. */
  .barra-navegacion {
    justify-content: flex-start;
    gap: 12px;
    min-height: 40px;
    padding: 3px 10px;
    border-top: 0;
  }

  /* Muestra el botón hamburguesa y ordena los controles del encabezado. */
  .boton-menu {
    display: inline-flex;
    order: 1;
  }

  .marca {
    order: 2;
    margin-right: auto;
  }

  /* El icono de marca es pequeño y el nombre se oculta en móvil. */
  .marca-imagen {
    width: 27px;
    height: 27px;
  }

  .marca-texto {
    display: none;
  }

  /* Reemplaza los enlaces horizontales por el panel lateral. */
  .menu-escritorio {
    display: none;
  }

  /* Deja la lupa al extremo derecho de la barra. */
  .boton-busqueda {
    order: 3;
  }

  /* Reduce el espacio alrededor del contenido de Inicio. */
  .inicio {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 26px 14px 14px;
  }

  /* Ilustración de Inicio para pantallas angostas. */
  .ilustracion-inicio {
    width: min(100%, 270px);
    height: 285px;
  }

  /* Mantiene en móvil el ancho asociado a cada logo. */
  .boton-principal {
    width: min(100%, var(--ancho-banner-inicio));
    margin-top: 30px;
  }

  /* Conserva el espacio vertical entre botón e institución. */
  .instituciones {
    gap: 16px;
    margin-top: 30px;
  }

  /* Ajustes de ancho y margen para las listas en móvil. */
  .pagina-listado {
    width: min(100% - 28px, var(--ancho-contenido));
    margin-top: 28px;
  }

  .pagina-listado > h1 {
    margin-bottom: 30px;
  }

  /* Divulgación cambia a una tarjeta por fila en móvil. */
  .pagina-divulgacion #lista-articulos {
    grid-template-columns: 1fr;
  }

  .pagina-contenido {
    width: min(100% - 28px, 980px);
    margin-top: 30px;
  }

  .encabezado-contenido {
    margin-bottom: 26px;
  }

  .pagina-insumate .encabezado-contenido,
  .pagina-insumate-app .encabezado-contenido,
  .pagina-insumate-mr .encabezado-contenido {
    margin-bottom: 34px;
  }

  .presentacion-insumate,
  .presentacion-insumate-app {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .presentacion-insumate p,
  .presentacion-insumate-app > p {
    grid-column: 1;
  }

  .presentacion-insumate p,
  .presentacion-insumate-app > p,
  .texto-insumate-mr p,
  .bloque-contenido p,
  .bloque-contenido li {
    font-size: var(--tamano-texto-base);
  }

  .imagen-insumate,
  .imagen-insumate-app {
    grid-column: 1;
    grid-row: auto;
    margin: 12px auto 30px;
  }

  .imagen-insumate {
    width: min(100%, 360px);
  }

  .imagen-insumate-app {
    width: min(100%, 440px);
  }

  .descarga-insumate-app {
    grid-column: 1;
    margin-top: 24px;
  }

  .presentacion-insumate-mr,
  .contacto-opciones {
    grid-template-columns: 1fr;
  }

  .carrusel-mr-ventana,
  .diapositiva-mr {
    min-height: 280px;
  }

  .diapositiva-mr img {
    max-height: 390px;
  }

  .credito-carrusel {
    text-align: center;
  }

  .lista-investigadores {
    columns: 1;
  }
}