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

/* =========================
   SISTEMA DE APOYO (SATD)
   GRILLA 2 COLUMNAS PERFECTA
   ========================= */

/* Banner */
#satd_banner{
  left: 24.85vw !important;
  top: 9.04vw !important;
  width: 53.31vw !important;
  pointer-events: none;
}
#satd_banner img{
  transform: none !important;
  transition: none !important;
}

/* ===== GRILLA (ajustes rápidos) ===== */
:root{
  --satd-margin-x: 12.5vw;      /* margen izquierdo y derecho */
  --satd-btn-w: 31.76vw;        /* ancho botones columna */
  --satd-gap-x: 11.48vw;        /* espacio entre columnas (calculado para que quede perfecto) */

  --satd-top-1: 17.65vw;        /* fila 1 */
  --satd-row-gap: 5.88vw;       /* separación vertical entre filas */
}

/* Botones columnas: tamaño uniforme */
#satd_epd_1, #satd_epd_2, #satd_epd_3,
#satd_epd_4, #satd_epd_5, #satd_epd_6{
  width: var(--satd-btn-w) !important;
  aspect-ratio: 432 / 55;
}

/* Botón 7 (manual) */
#satd_epd_7{
  width: 32.43vw !important; /* 441px aprox */
  aspect-ratio: 441 / 55;
}

/* Imágenes dentro (siempre llenan sin deformarse) */
#satd_epd_1 img, #satd_epd_2 img, #satd_epd_3 img,
#satd_epd_4 img, #satd_epd_5 img, #satd_epd_6 img,
#satd_epd_7 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== POSICIONES: dos columnas perfectas ===== */

/* Columna 1 (izquierda) */
#satd_epd_1 { left: var(--satd-margin-x) !important; top: var(--satd-top-1) !important; }
#satd_epd_2 { left: var(--satd-margin-x) !important; top: calc(var(--satd-top-1) + var(--satd-row-gap)) !important; }
#satd_epd_3 { left: var(--satd-margin-x) !important; top: calc(var(--satd-top-1) + (var(--satd-row-gap) * 2)) !important; }

/* Columna 2 (derecha) */
#satd_epd_4 { left: calc(var(--satd-margin-x) + var(--satd-btn-w) + var(--satd-gap-x)) !important; top: var(--satd-top-1) !important; }
#satd_epd_5 { left: calc(var(--satd-margin-x) + var(--satd-btn-w) + var(--satd-gap-x)) !important; top: calc(var(--satd-top-1) + var(--satd-row-gap)) !important; }
#satd_epd_6 { left: calc(var(--satd-margin-x) + var(--satd-btn-w) + var(--satd-gap-x)) !important; top: calc(var(--satd-top-1) + (var(--satd-row-gap) * 2)) !important; }

/* Botón 7: centrado EXACTO debajo de ambas columnas */
#satd_epd_7{
  left: 32.79vw !important; /* centrado matemático */
  top:  calc(var(--satd-top-1) + (var(--satd-row-gap) * 3) + 0.12vw) !important;
}

/* Logos (se quedan como estaban en tu SATD, si ya los tienes globales puedes omitir esto) */
#Logo_SEECH { left: 11.03vw !important; top: 3.68vw !important; width: 16.18vw !important; }
#logo_MEyAD  { left: 77.21vw !important; top: 3.01vw !important; width: 16.25vw !important; }
#bienvenidos { left: 37.35vw !important; top: 3.09vw !important; width: 27.43vw !important; }