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

/* =========================
   EDUCACIÓN INCLUSIVA
   (homologado a PI)
   ========================= */

/* Botones (equivalentes a los 160px sobre lienzo 1360px) */
#ei_cuento,
#ei_pildoritas {
  width: 11.8vw !important;
  aspect-ratio: 1 / 1;
}

#ei_cuento img,
#ei_pildoritas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Posiciones (convertidas de px -> vw, basadas en 1360px de ancho) */
#ei_cuento { left: 37.95vw !important; top: 21.32vw !important; }
#ei_pildoritas { left: 55.44vw !important; top: 21.32vw !important; }

/* Banner (antes “encabezado_educacion_inclusiva”) */
#ei_banner {
  left: 33.38vw !important;
  top: 10.96vw !important;
  width: 38.5vw !important;
  pointer-events: none; /* sin clic ni hover */
}

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

/* Logos (convertidos de px -> vw) */
#Logo_SEECH { left: 4.71vw !important; top: 2.06vw !important; width: 24.0vw !important; }
#logo_MEyAD  { left: 76.18vw !important; top: 1.84vw !important; width: 22.8vw !important; }
#bienvenidos { left: 33.53vw !important; top: 2.21vw !important; width: 38.0vw !important; }

/* =========================
   EI · CUÉNTAME UN CUENTO
   ========================= */

/* Botones */
#ei_cuento_1,
#ei_cuento_2,
#ei_cuento_3 {
  width: 30vw !important;
}

/* Posiciones */
#ei_cuento_1 { left: 55.8vw !important; top: 21vw !important; }
#ei_cuento_2 { left: 22vw !important; top: 21vw !important; }
#ei_cuento_3 { left: 22vw !important; top: 32vw !important; }

/* Encabezado */
#ei_encabezado {
  left: 33.3vw !important;
  top: 10.9vw !important;
  width: 38.5vw !important;
  pointer-events: none;
}

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

/* Uniformidad visual */
#ei_cuento_1,
#ei_cuento_2,
#ei_cuento_3 {
  aspect-ratio: 438 / 81;
}

#ei_cuento_1 img,
#ei_cuento_2 img,
#ei_cuento_3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}