/* 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;
}

/* ===== PILDORITAS DEL SABER (5 elementos: 3 arriba + 2 abajo) ===== */

/* Banner tipo "excepción" como tu #banner, sin hover ni clic */
#banner_pildoritas{
  left: 30vw;
  top: 10vw;
  width: 40vw;
  pointer-events: none;
}
#banner_pildoritas img{
  transform: none !important;
  transition: none !important;
}

/* Opcional (recomendado): que los botones sean un poco más anchos que el default 25vw */
#video_lpz, #video_prns, #video_qell, #video_les, #video_360{
  width: 26vw;
}

/* Fila 1 (3) */
#video_lpz  { left: 37vw; top: 18vw; }
#video_prns { left: 37vw; top: 23vw; }
#video_qell { left: 37vw; top: 28vw; }

/* Fila 2 (2) centrados */
#video_les  { left: 37vw; top: 33vw; }
#video_360  { left: 37.5vw; top: 38vw; }