@charset "utf-8";

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}

/* Tipografía */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fredokaone/v8/k3kUo8kEI-tA1RRcTZGmTlHGCac.woff2) format('woff2');
}

body {
  background-color: #6b4d5e;
  font-family: 'Fredoka One', sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Contenedor principal */
#contenido {
  width: 70%; /* Reducido para dejar 15% de espacio a cada lado */
  max-width: 900px; /* Máximo más estrecho */
  margin: 0 auto;
  background-color: #6b4d5e;
  padding: 20px;
}

/* Encabezado centrado */
#encabezado {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 2% 0;
}

#encabezado img {
  height: 150px;
  width: auto;
  margin-right: 20px;
}
#encabezado p {
  text-align: center;
}
h1 {
  font-size: 1.7em;
  color: #ffffff;
  font-weight: 200;
  padding-top: 1rem;
}
h2 {
    font-size: 1.3em;
    color: #ffffff;
    margin-bottom: 10px;
 padding-top: 0px;
}
.contenido-texto{
padding-left: 1rem;
	padding-right: 1rem;
}
.contenido-texto h2 {
    font-size: 1.3em;
    color: #ffffff;
    margin-bottom: 10px;
    padding-top: 50px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 0;
}


h3 {
    font-size: 1.3em;
    color: #ffffff;
    margin-bottom: 10px;
    padding-top: 30px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 0;
}

dl {
    font-size: 1em;
    color: #ffffff;
}

dt {
    padding-top: 10px;
}
ul {
     font-size: 1em;
    color: #ffffff;
	padding-left: 50px;
}
/* Menu y contenido centrado */
#menu {
  width: 100%;
  background-color: #6b4d5e;
  text-align: center;
  margin: auto;
}

#menu p {
  color: #ffffff;
  
}

/* Miniaturas */
/* Contenedor principal de miniaturas */
.caja-miniaturas {
  display: flex;
  justify-content: space-between;
  gap: 15px; /* Espacio entre columnas */
  width: 100%;
  padding: 5px 0;
	

}

/* Columnas de niveles */
#col1, #col2, #col3,
#col1b, #col2b, #col3b {
  width: 33%; /* Más estrecho */
  padding: 10px 5px; /* Padding reducido */
  border-radius: 10px;
  
  text-align: center;
  border: 0.2em solid;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#col1, #col1b {
  background-color: #df8c00;
  border-color: #fab553;
}

#col2, #col2b {
  background-color: #e86a00;
  border-color: #faa972;
}

#col3, #col3b {
  background-color: #9d4a00;
  border-color: #df8c00;
}
/* Contenedor de miniaturas dentro de columnas */
.columna-minis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
/* Juegos */

/* Miniaturas */
.mini {
  width: 45%; /* Dos por fila */
  margin: 4px 0; /* Espacio vertical aumentado */
  padding: 2px; /* Espacio interno */
  box-sizing: border-box;
	

}

.mini img {
   width: 100%;
  max-width: 110px; /* Imágenes más compactas */
  height: auto;
  border: 0.3em solid #ffffff;
  border-radius: 10px;
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto;
}

.mini img:hover {
  box-shadow: 0 0 16px 6px #ffffff;
  transform: scale(1.05); /* Efecto hover más pronunciado */
}

/* Footer */
.footer {
  background-color: #333333;
  padding: 1%;
  text-align: center;
}

.footer a {
  color: #ffffff;
}

.footer a:hover {
  color: #FFF100;
}

.footer-global {
  width: 100%;
  background-color: #333333;
  color: white;
  padding: 15px 20px;
  text-align: center;
  font-size: 1.3rem;
}

.footer-global a {
  color: #ffcc00;
  text-decoration: none;
  margin: 0 8px;
	
}

.footer-global a:hover {
  text-decoration: underline;
}

/* Utilidades */
.espacio { clear: both; height: 10px; }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px; }

/* -------------------------------------------- */
/* RESPONSIVE PARA TODOS LOS DISPOSITIVOS */
/* -------------------------------------------- */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  #contenido {
    width: 95%;
    padding: 10px;
  }
  
  .caja-miniaturas {
    gap: 5px;
  }
  
  #col1, #col2, #col3,
  #col1b, #col2b, #col3b {
    width: 32%;
    padding: 5px 2px;
  }
  
  .mini img {
    max-width: 100%;
  }
}

/* Móvil (hasta 768px) - Versión compacta */
@media (max-width: 768px) {
  /* Fuerza las 3 columnas a mantenerse en línea */
  .caja-miniaturas {
    display: flex;
    flex-wrap: nowrap; /* Esto evita que las columnas se bajen */
    overflow: hidden; /* Elimina cualquier scroll */
    gap: 3px;
  }
  
  /* Columnas ultra compactas pero siempre visibles */
  #col1, #col2, #col3,
  #col1b, #col2b, #col3b {
    flex: 0 0 32%; /* No crece, no encoge, base 32% */
    min-width: 0; /* Permite compresión */
    padding: 2px;
  }
  
  /* Optimización de contenido */
  .mini img {
    max-width: 90px;
    margin: 0 auto;
  }
  

}

/* Ajuste extra para pantallas muy pequeñas */
@media (max-width: 480px) {
  #col1, #col2, #col3,
  #col1b, #col2b, #col3b {
    flex-basis: 31%; /* Un poco más ajustado */
  }
  
  .mini img {
    max-width: 80px;
  }
}
/* -------------------------------------------- */
/* VERSIÓN PARA SMARTPHONES (hasta 600px) */
/* -------------------------------------------- */

@media (max-width: 600px) {
  /* Contenedor principal */
  #contenido {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Encabezado compacto */
  #encabezado {
    padding: 5px 0;
  }
  #encabezado img {
    height: 80px;
    margin-right: 10px;
  }
  h1 {
    font-size: 1.3em;
    padding: 0;
  }

  /* Contenedor de columnas */
  .caja-miniaturas {
    display: flex;
    gap: 1px; /* Espacio mínimo entre columnas */
    padding: 0;
    margin: 0;
  }

  /* Columnas de niveles - ultra compactas */
  #col1, #col2, #col3,
  #col1b, #col2b, #col3b {
    flex: 1;
    min-width: 0;
    padding: 1px;
    margin: 0;
    border-width: 1px;
  }

  /* Miniaturas - 1 por fila, sin espacios */
  .mini {
    width: 100%;
    margin: 0;
    padding: 2px; /* Pequeño padding para separación */
    box-sizing: border-box;
  }
  .mini img {
    width: 90%; /* Ocupa el 90% del contenedor */
    max-width: 100px; /* Tamaño máximo aumentado */
    min-width: 80px; /* Tamaño mínimo garantizado */
    height: auto;
    display: block;
    margin: 0 auto; /* Centrado */
    border: 2px solid #fff;
  }


  /* Textos de contenido */
  #menu p {
    padding: 0 3px;
    font-size: 0.9em;
    line-height: 1.2;
    margin: 5px 0;
  }

  /* Efectos hover para móvil */
  .mini img:hover {
    transform: none; /* Eliminamos efectos en móvil */
    box-shadow: none;
  }

  /* Footer compacto */
  .footer-global {
    padding: 5px;
    font-size: 0.8em;
  }
}

/* -------------------------------------------- */
/* AJUSTES ESPECÍFICOS PARA PANTALLAS MUY PEQUEÑAS (max-width: 400px) */
/* -------------------------------------------- */
@media (max-width: 400px) {
  .mini img {
    max-width: 55px;
  }
  h2 {
    font-size: 0.8em;
  }
  #encabezado img {
    height: 60px;
  }
}