:root {
    --color-background-div: rgba(209, 209, 209, 0.8);
    --color-texto: rgb(0, 0, 0);
}

body {
    background-color: #fffaf0;
}

/*TITULO */

.white-strip h2 {
  margin-top: 25px;
  text-align: center;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000; 
}

.container-juegos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    padding: 5%;
    flex-wrap: wrap;
    gap: 20px;
}

.container-juegos div {
    width: 27vw;
    min-width: 300px;
    transition: transform 0.3s ease;
    background-color: rgb(130, 130, 130);
    border-radius: 10px;
    padding: 1rem;
    aspect-ratio: 4/3;
}

.container-juegos a {
    text-decoration: none;
    color: inherit;
}

.container-juegos p {
    display: none;
    margin: 1rem;
    font-size: 1rem;
    color: var(--color-texto);
}

.container-juegos h2 {
    color: var(--color-texto);
    text-align: center;
    font-size: 1.2rem;
    padding: 0.5rem;
    background-color: var(--color-background-div);
    border-radius: 10px;
    letter-spacing: 1px;
}

.container-juegos div:hover p {
    display: block;
    background-color: var(--color-background-div);
    border-radius: 10px;
    padding: 1rem;
}

.container-juegos div:hover {
    transform: scale(1.02);
}

#juego1,
#juego2,
#juego3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}

#juego1 {
    background-image: url(../../ImagenesProyecto/juego-mariposas.png);
}

#juego2 {
    background-image: url(../../FotosRecortadas/juegoQuizTrata.png);
}

#juego3 {
    background-image: url(../../ImagenesProyecto/juego-wordle.png);
}
/* ================================================= */
/* AJUSTES EXCLUSIVOS PARA MÓVIL (max-width: 700px) */
/* ================================================= */
@media (max-width: 700px) {
  /* 1) El contenedor de juegos pasa a columna y ocupa todo el ancho */
  .container-juegos {
    flex-direction: column;
    padding: 2rem 1rem;
    gap: 1.5rem;
  }

  /* 2) Cada “div” (tile) ocupa casi el 100% y ajusta su alto automáticamente */
  .container-juegos div {
    width: 100%;
    min-width: auto;       /* quitamos el min-width: 300px para que ceda */
    aspect-ratio: auto;     /* que su altura se ajuste al contenido */
    padding: 1rem;
  }

  /* 3) Ajustamos el h2 para que sea más legible en pantallas pequeñas */
  .container-juegos h2 {
    font-size: 1.4rem;
    padding: 0.5rem;
  }

  /* 4) Las “p” dentro de cada tile siempre estarán visibles en móvil (no ocultas) */
  .container-juegos p {
    display: block;
    margin: 1rem 0 0;
    font-size: 0.95rem;
    background-color: var(--color-background-div);
    border-radius: 8px;
    padding: 0.8rem;
    line-height: 1.4;
  }

  /* 5) Ajustamos la altura de la imagen de fondo para que no quede muy alta */
  #juego1,
  #juego2,
  #juego3 {
    background-size: cover;
    background-position: center;
    /* Podrías forzar un min-height si quieres versiones cuadradas: */
    min-height: 180px;
  }

  /* 6) Reducimos márgenes del título principal */
  .white-strip h2 {
    font-size: 1.8rem;
    margin-top: 1rem;
  }

  /* 7) Evitamos efecto hover/problemático en móviles (opcional) */
  .container-juegos div:hover {
    transform: none;
  }
}