/* Estilos generales */
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Contenedor principal */
#fondo {
  position: relative;
  width: 100vw;
  height: auto;
  min-height: 50vw;
  flex: 1;
}

/* Imagen de fondo */
#fondo > img {
  width: 100%;
  height: auto;
  display: block;
}

/* Estilo general para los botones con imágenes */
.link-img {
  position: absolute;
  display: block;
  width: 25vw; /* Tamaño base */
  transition: transform 0.2s ease-in-out;
}

/* Efecto hover general */
.link-img:hover img {
  transform: scale(1.1);
}

/* --- EXCEPCIÓN PARA EL BANNER --- */
#banner {
  left: 30vw !important;
  top: 10vw !important;
  width: 40vw !important; /* Banner más grande */
  pointer-events: none;   /* Evita hover o clic */
}

#banner img {
  transform: none !important; /* Anula cualquier transformación */
  transition: none !important; /* Sin animación */
}

/* Posiciones individuales */
#tema_1 { left: 22vw !important; top: 17vw !important; }
#tema_2 { left: 22vw !important; top: 22vw !important; }
#tema_3 { left: 22vw !important; top: 27vw !important; }
#tema_4 { left: 22vw !important; top: 32vw !important; }
#tema_5 { left: 22vw !important; top: 37vw !important; }
#tema_6 { left: 52vw !important; top: 19.5vw !important; }
#tema_7 { left: 52vw !important; top: 24.5vw !important; }
#tema_8 { left: 52vw !important; top: 29.5vw !important; }
#tema_9 { left: 52vw !important; top: 34.5vw !important; }

/* Logos y encabezados */
#Logo_SEECH { position: absolute; width: 16vw; left: 12.5vw; top: 4.4vw; }
#logo_MEyAD { position: absolute; width: 16vw; left: 75.6vw; top: 3.8vw; }
#bienvenidos { position: absolute; width: 27vw; left: 36.2vw; top: 4vw; }

/* Todas las imágenes adaptables */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Footer */
footer {
  position: relative;
  bottom: 3vw;
  left: 0;
  right: 0;
  text-align: center;
  padding: 1vw;
  font-size: 1vw;
  color: #555;
  background-color: transparent;
  z-index: 10;
}

/* =========================
   LA MUJER EN LA CIENCIA (LMC)
   GRILLA CENTRADA A LA PÁGINA
   ========================= */

:root{
  /* Anchos */
  --lmc-banner-w: 38.82vw;
  --lmc-btn-w: 32.57vw;

  /* Posiciones verticales */
  --lmc-banner-top: 10.96vw;
  --lmc-row-start: 20.5vw;
  --lmc-row-gap: 8.2vw;
}

/* =========================
   BANNER CENTRADO
   ========================= */
#lmc_banner{
  left: calc(50vw - (var(--lmc-banner-w) / 2)) !important;
  top: var(--lmc-banner-top) !important;
  width: var(--lmc-banner-w) !important;
  pointer-events: none;
}

#lmc_banner img{
  transform: none !important;
  transition: none !important;
}

/* =========================
   BOTONES (tamaño uniforme)
   ========================= */
#lmc_alice_evans,
#lmc_rachel_carson,
#lmc_cecilia_payne,
#lmc_florence_nightingale,
#lmc_margarita_salas{
  width: var(--lmc-btn-w) !important;
  aspect-ratio: 443 / 59;
}

#lmc_alice_evans img,
#lmc_rachel_carson img,
#lmc_cecilia_payne img,
#lmc_florence_nightingale img,
#lmc_margarita_salas img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================
   GRILLA 2 COLUMNAS CENTRADA
   ========================= */

/* Columna izquierda */
#lmc_alice_evans{
  left: calc(50vw - var(--lmc-btn-w) - 2.5vw) !important;
  top: var(--lmc-row-start) !important;
}

#lmc_cecilia_payne{
  left: calc(50vw - var(--lmc-btn-w) - 2.5vw) !important;
  top: calc(var(--lmc-row-start) + var(--lmc-row-gap)) !important;
}

/* Columna derecha */
#lmc_rachel_carson{
  left: calc(50vw + 2.5vw) !important;
  top: var(--lmc-row-start) !important;
}

#lmc_florence_nightingale{
  left: calc(50vw + 2.5vw) !important;
  top: calc(var(--lmc-row-start) + var(--lmc-row-gap)) !important;
}

/* =========================
   ÚLTIMO BOTÓN CENTRADO
   ========================= */
#lmc_margarita_salas{
  left: calc(50vw - (var(--lmc-btn-w) / 2)) !important;
  top: calc(var(--lmc-row-start) + (var(--lmc-row-gap) * 2)) !important;
}