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

/* =========================
   VARIABLES (EDITABLES)
   ========================= */
:root{
  /* Tamaños */
  --w-fase: 14vw;         /* ancho de cada fase */
  --w-grado: 9vw;        /* ancho de cada botón de grado */

  /* Grid */
  --grid-w: 82vw;         /* ancho total del bloque (centrado) */
  --grid-top: 20vw;       /* altura del bloque (posición vertical) */
  --gap-cols: 3vw;        /* separación entre columnas */
  --gap-fase-grados: 3vw; /* separación vertical entre fase y grados */
  --gap-grados: 1.2vw;    /* separación horizontal entre los dos grados */
}

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

/* Base */
.link-img {
  display: block;
}

/* =========================
   GRID 3 COLUMNAS
   ========================= */
#grid_ai{
  position: absolute;
  top: var(--grid-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--grid-w);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap-cols);

  align-items: start;
}

/* Cada columna: fase arriba y “fila” de 2 grados abajo */
.ai-col{
  display: flex;
  flex-direction: column;
  align-items: center; /* centra la fase respecto a su columna */
}

/* Tamaño fase */
.fase{
  width: var(--w-fase);
}

/* Contenedor de 2 grados debajo de cada fase */
.ai-grados{
  margin-top: var(--gap-fase-grados);
  display: flex;
  justify-content: center; /* centra el par debajo de la fase */
  gap: var(--gap-grados);
}

/* Tamaño de cada grado */
.grado{
  width: var(--w-grado);
  transition: transform 0.2s ease-in-out;
}

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

/* =========================
   ELEMENTOS QUE SE QUEDAN COMO ESTABAN
   ========================= */

#encabezado{
  position: absolute;
  width: 42vw;
  left: 50vw;
  top: 12vw;
  transform: translateX(-50%);
}

#regresar {
  position: absolute;
  width: 16vw;
  left: 50vw;
  top: 42vw;
  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;
}

/* Sombra del botón regresar */
#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;
  bottom: 3vw;
  left: 0;
  right: 0;
  text-align: center;
  padding: 1vw;
  font-size: 1vw;
  color: #555;
  background-color: transparent;
  z-index: 10;
}