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

/* =========================
   RALÁMULI (RLM)
   centrado a la página
   ========================= */

:root{
  --rlm-axis-x: 50vw;          /* 👈 EJE ÚNICO (centro). Cambia esto y todo se alinea */

  --rlm-banner-w: 32vw;
  --rlm-banner-top: 11.8vw;

  --rlm-carousel-w: 68vw;
  --rlm-carousel-top: 17vw;

  --rlm-card-w: 15vw;
  --rlm-card-h: 24vw;
}

/* Banner centrado */
#rlm_banner{
  position: absolute;
  left: calc(var(--rlm-axis-x) - (var(--rlm-banner-w) / 2));
  top: var(--rlm-banner-top);
  width: var(--rlm-banner-w);
  pointer-events: none;
}

#rlm_banner img{
  width: 100%;
  height: auto;
  display: block;
}

/* Evita hover del sistema (.link-img) en el banner */
.rlm-nohover img{
  transform: none !important;
  transition: none !important;
}

/* Carrusel centrado */
.rlm-carousel-wrapper{
  position: absolute;
  left: calc(var(--rlm-axis-x) - (var(--rlm-carousel-w) / 2));
  top: var(--rlm-carousel-top);
  width: var(--rlm-carousel-w);
  max-width: var(--rlm-carousel-w);
}

.rlm-carousel{
  width: 100%;
  height: var(--rlm-card-h);
  overflow: hidden;
}

.rlm-carousel-track{
  display: flex;
  gap: 0.5vw;
  width: max-content;
  animation: rlm-scroll 120s linear infinite;
}

.rlm-carousel-track:hover{
  animation-play-state: paused;
}

.rlm-carousel-track img{
  flex-shrink: 0;
  width: var(--rlm-card-w);
  height: 100%;
  object-fit: contain;
  border-radius: 0.8vw;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.rlm-carousel-track img:hover{
  transform: scale(1.05);
}

@keyframes rlm-scroll{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Modales */
.rlm-modal{
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.rlm-modal:target{
  display: flex;
}

.rlm-modal img{
  max-width: 90%;
  max-height: 80%;
  border-radius: 1vw;
}

.rlm-close{
  position: absolute;
  top: 2vw;
  right: 2.5vw;
  font-size: 3vw;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.rlm-close:hover{
  color: red;
}

/* Responsivo */
@media (max-width: 1024px){
  :root{
    --rlm-card-h: 20vw;
    --rlm-card-w: 18vw;
    --rlm-carousel-w: 72vw;
  }
}

@media (max-width: 600px){
  :root{
    --rlm-axis-x: 50vw;  /* o 49vw si quieres compensar iconos, etc. */

    --rlm-card-h: 30vw;
    --rlm-card-w: 25vw;
    --rlm-carousel-w: 88vw;
    --rlm-banner-w: 70vw;
    --rlm-banner-top: 18vw;
    --rlm-carousel-top: 34vw;
  }
}