/* 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; /* Ajusta este valor para controlar la altura mínima */
  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: 14vw;
  transition: transform 0.2s ease-in-out;
}

.grado:hover img {
  transform: scale(1.1);
}

/* Posiciones relativas al viewport - imágenes más arriba */

#encabezado{
  width: 46vw;          /* tamaño */
  left: 50vw;           /* centro del contenedor */
  top: 12vw;            /* conserva tu altura */
  transform: translateX(-50%);
}

#fase { 
  left: 14.5vw; 
  top: 20vw; 
}

#grado { 
  left: 72vw; 
  top: 20vw; 
}

/* Campos formativos */
#lenguajes { left: 23vw; top: 27vw;}
#saberes { left: 41vw; top: 27vw;}
#etica { left: 59vw; top: 27vw;}
#humano { left: 77vw; top: 27vw;}

/* Actividades generales */
#actividad_1 { left: 23vw; top: 27vw; }
#actividad_2 { left: 41vw; top: 27vw; }
#actividad_3 { left: 59vw; top: 27vw; }
#actividad_4 { left: 77vw; top: 27vw; }


/* Actividades 1° */
#actividad_1_s { left: 38vw; top: 27vw; }
#actividad_2_s { left: 62vw; top: 27vw; }

#actividad_1_h { left: 32vw; top: 27vw; }
#actividad_2_h { left: 50vw; top: 27vw; }
#actividad_3_h { left: 68vw; top: 27vw; }

#actividad_1_e { left: 38vw; top: 27vw; }
#actividad_2_e { left: 62vw; top: 27vw; }

#actividad_1_l { left: 32vw; top: 27vw; }
#actividad_2_l { left: 50vw; top: 27vw; }
#actividad_3_l { left: 68vw; top: 27vw; }

/* Actividades 2° */
#actividad_1_2_s { left: 20vw; top: 27vw; }
#actividad_2_2_s { left: 35vw; top: 27vw; }
#actividad_3_2_s { left: 50vw; top: 27vw; }
#actividad_4_2_s { left: 65vw; top: 27vw; }
#actividad_5 { left: 80vw; top: 27vw; }


#regresar {
  width: 16vw;          /* tamaño */
  left: 50vw;
  top: 42vw;            /* conserva tu altura */
  transform: translateX(-50%);;
}
/* 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; 
}

.grado {
  width: 14vw;
  transform: translateX(-50%);
}

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

/* Agregar sombra */
#regresar img {
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}

#regresar:hover img {
  box-shadow: 0 8px 18px rgba(128, 90, 200, 0.35);
  filter: brightness(1.05);
}


/* Footer */
footer{
  position: relative;
  margin-top: -2.5vw;   /* AQUÍ lo bajas */
  text-align: center;
  padding: 1.2vw;
  font-size: 1vw;
  color: #555;
  background: transparent;
}

/* =========================
   ACTIVIDADES LENGUAJES (LF)
   ========================= */


/* “Etiqueta” del campo formativo (Lenguajes) */
#campo_formativo{
  position: absolute;
  width: 42vw;
  left: 50vw;
  top: 20vw;
  transform: translateX(-50%);
}

/* Grado a la derecha (igual idea que campos_formativos_f31, pero propio) */
#grado_lf{
  position: absolute;
  width: 14vw;
  left: 72vw;
  top: 20vw;
}

/* Tamaño exclusivo para actividades */
.lf-act{
  width: 10vw;   /* ajusta aquí el tamaño */
}

/* =========================
   ACTIVIDADES SyPC (F31)
   ========================= */

#grado_sypc{
  position: absolute;
  width: 14vw;
  left: 72vw;
  top: 20vw;
}

/* Tamaño exclusivo para actividades SyPC */
.sypc-act{
  width: 10vw; /* ajusta aquí el tamaño, igual que .lf-act */
}