/* 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: 9vw; /* 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 */
#cuentame { left: 22vw !important; top: 17vw !important; }
#pildoritas { left: 38vw !important; top: 17vw !important; }
#educacion { left: 54vw !important; top: 17vw !important; }
#mujer { left: 70vw !important; top: 17vw !important; }
#ralamuli { left: 30vw !important; top: 32vw !important; }
#chihuahua { left: 46vw !important; top: 32vw !important; }
#grande { left: 62vw !important; top: 32vw !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;
}