/Aplica a todos los elementos del HTML.
/
* {
margin: 0; /Elimina el margen exterior que los navegadores colocan por defecto./
padding: 0; /* Elimina el espaciado interno por defecto.*/
box-sizing: border-box; /Cambia la forma en que se calcula el tamaño total del
elemento: el ancho/alto incluyen padding y bordes, lo que facilita el diseño./
font-family: 'Arial', sans-serif; /Define la fuente del texto, usando 'Segoe UI'
si está disponible y sino, otra fuente sin serifas./
}
body {
background-color: #1a1a1a; /Pinta el fondo del cuerpo de un gris oscuro (casi
negro)./
color: #ffffff; /Hace que todo el texto sea blanco por defecto./
line-height: 1.6; /Mejora la altura entre líneas, facilitando la lectura./
}
a { /Estiliza todos los enlaces./
text-decoration: none; /* Elimina el subrayado de los enlaces.*/
color: #ffffff; /Hace que los enlaces sean blancos./
}
/* Header y menú */
header {
background-color: #0d0d0d; /Color de fondo negro para el encabezado./
padding: 1rem 2rem; /Espacio interno de 1 unidad arriba/abajo y 2 a los lados./
position: sticky; /Hace que el header se quede fijo arriba al hacer scroll./
top: 0; /Lo fija al borde superior./
z-index: 100; /Le da prioridad en el apilamiento (que quede encima de otros
elementos)./
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Añade una sombra debajo del header
para efecto de elevación.*/
}
.logo {
font-size: 2rem; /Tamaño grande del texto./
font-weight: bold; /* Texto en negrita.*/
color: #ff6600; /Naranja vibrante para la marca/logo./
}
.logo span {
color: #ffffff; /Cambia el color del span dentro del logo a blanco, para crear
contraste con el naranja./
}
.menu-container {
display: flex; /Usa flexbox para organizar contenido en fila./
justify-content: space-between; /* Deja espacio entre los extremos (logo y
menú).*/
align-items: center; /Centra verticalmente./
max-width: 1200px; /No permite que crezca más de 1200px./
margin: 0 auto; /Centra el contenedor horizontalmente./
}
nav ul {
display: flex; /Organiza los elementos <li> en fila./
list-style: none; /Quita los puntos de lista por defecto./
}
nav ul li {
margin-left: 2rem; /Espacio entre cada opción del menú./
position: relative; /Necesario para posicionar el submenú de forma absoluta
respecto a este./
}
nav ul li a {
font-weight: bold; /Texto en negrita./
transition: color 0.3s; /Hace que el cambio de color al pasar el mouse sea
suave./
padding: 0.5rem 0; /Espacio arriba y abajo./
}
nav ul li a:hover {
color: #ff6600; /Cambia el color a naranja cuando pasas el mouse./
}
/* Submenú */
.submenu {
display: none; /Oculto por defecto./
position: absolute; /* Se posiciona respecto al <li> padre.*/
background-color: #0d0d0d; /* Fondo negro.*/
width: 200px;
top: 100%; /Coloca el submenú justo debajo./
left: 0; /* Alineado a la izquierda del elemento padre.*/
border-radius: 0 0 5px 5px; /Bordes inferiores redondeados./
overflow: hidden; /Oculta contenido que se salga./
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /Sombra para destacar el menú./
}
.submenu li { /Espaciado interno y línea divisoria entre opciones del submenú./
margin: 0;
padding: 0.5rem 1rem;
border-bottom: 1px solid #333;
}
.submenu li:last-child { /Elimina la línea del último elemento./
border-bottom: none;
}
.has-submenu:hover .submenu { /Al pasar el mouse por encima del padre (has-
submenu), muestra el submenú./
display: block;
}
/* Menú móvil */
.menu-toggle {
display: none; /No se muestra por defecto (solo se verá en móviles con media
query)./
cursor: pointer; /El cursor se vuelve una manita./
font-size: 1.5rem; /Tamaño del icono o texto del botón de menú./
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); /Fondo con
un degradado oscuro semitransparente./
height: 80vh; /* Ocupa el 80% de la altura de la pantalla.*/
display: flex;
align-items: center;
justify-content: center; /Centra contenido en ambas direcciones./
text-align: center; /Texto centrado./
padding: 0 2rem; /Espacio lateral./
}
.hero-content h1 { /Título grande, separado del párrafo, en naranja./
font-size: 3rem;
margin-bottom: 1rem;
color: #ff6600;
}
.hero-content p { /Párrafo más chico, ancho máximo, centrado, con espacio
inferior./
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 2rem;
}
.btn { /Botón naranja, texto blanco, con padding, bordes redondeados y
transición./
display: inline-block;
background-color: #ff6600;
color: #ffffff;
padding: 0.8rem 2rem;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}
.btn:hover { /Al pasar el mouse, se oscurece el botón./
background-color: #e65c00;
}
/* Sección de Juegos */
.games {
padding: 4rem 2rem; /Espaciado interno grande arriba/abajo (4 rem) y a los
lados (2 rem)./
max-width: 1200px; /Limita el ancho total de la cuadrícula./
margin: 0 auto; /Centra la cuadrícula horizontalmente./
}
.section-title {
text-align: center; /Centra horizontalmente el texto de los títulos y párrafos./
margin-bottom: 3rem; /ítulo grande en naranja con separación inferior de 3 rem./
font-size: 2.5rem;
color: #ff6600;
}
.games-grid {
display: grid; /Usa grid layout para acomodar las tarjetas de juegos./
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /Hace que las
columnas se adapten automáticamente al espacio disponible, con un mínimo de 280px
por tarjeta./
gap: 2rem; /Espacio entre las tarjetas./
}
.game-card {
background-color: #262626; /* Establece un fondo gris oscuro para la tarjeta
del juego. */
border-radius: 8px; /* Bordes redondeados con un radio de 8 píxeles.
*/
overflow: hidden; /* Oculta cualquier contenido que se salga del
borde redondeado. */
transition: transform 0.3s; /* Aplica una transición suave de 0.3 segundos a
transformaciones. */
}
.game-card:hover {
transform: translateY(-10px); /* Al pasar el mouse, la tarjeta se desplaza 10px
hacia arriba. */
}
.game-img {
height: 200px; /* Altura fija para que todas las imágenes tengan la
misma medida. */
overflow: hidden; /* Oculta cualquier parte de la imagen que se salga
del contenedor. */
}
.game-img img {
width: 100%; /* La imagen ocupa el 100% del ancho del contenedor.
*/
height: 100%; /* La imagen también se adapta en altura. */
object-fit: cover; /* Ajusta la imagen para cubrir el contenedor,
recortando si es necesario. */
transition: transform 0.5s; /* Hace que los cambios de escala sean suaves en 0.5
segundos. */
}
.game-card:hover .game-img img {
transform: scale(1.1); /* Cuando pasas el mouse sobre la tarjeta, la imagen
se agranda ligeramente. */
}
.game-info {
padding: 1.5rem; /* Espaciado interior en todos los lados del
contenido de la tarjeta. */
}
.game-info h3 {
margin-bottom: 0.5rem; /* Espacio debajo del título del juego. */
font-size: 1.3rem; /* Tamaño de fuente más grande para destacar. */
}
.game-info p {
color: #b3b3b3; /* Color gris claro para la descripción. */
margin-bottom: 1rem; /* Espacio debajo del párrafo. */
}
.game-info .price {
color: #ff6600; /* Color naranja para resaltar el precio. */
font-weight: bold; /* Texto en negrita. */
font-size: 1.2rem; /* Tamaño un poco más grande para que destaque. */
}
/* Footer */
footer {
background-color: #0d0d0d; /* Fondo oscuro para el pie de página. */
padding: 3rem 2rem; /* Espaciado interno (superior/inferior: 3rem,
laterales: 2rem). */
text-align: center; /* Centra todo el contenido del footer. */
}
.footer-content {
max-width: 1200px; /* Limita el ancho máximo del contenido. */
margin: 0 auto; /* Centra horizontalmente el contenido. */
}
.social-links {
margin: 2rem 0; /* Margen vertical (superior e inferior). */
}
.social-links a {
display: inline-block; /* Hace que los enlaces se comporten como bloques en
línea. */
margin: 0 1rem; /* Espaciado lateral entre íconos. */
font-size: 1.5rem; /* Tamaño grande para los íconos (probablemente de
redes sociales). */
transition: color 0.3s; /* Transición suave al cambiar el color. */
}
.social-links a:hover {
color: #ff6600; /* Cambia el color del ícono al pasar el mouse
(naranja). */
}
.copyright {
color: #b3b3b3; /* Color gris claro. */
font-size: 0.9rem; /* Tamaño de letra pequeño. */
}
/* Responsive */
@media (max-width: 768px) {
.menu-toggle {
display: block; /* Hace visible el botón del menú (normalmente oculto
en escritorio). */
}
nav {
position: absolute; /* Posiciona el menú sobre el contenido.
*/
top: 100%; /* Lo coloca justo debajo del encabezado.
*/
left: 0;
width: 100%;
background-color: #0d0d0d; /* Mismo color de fondo que el footer. */
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); /* Oculta el menú al inicio (efecto
"plegado"). */
transition: clip-path 0.4s ease-out; /* Animación suave al desplegar. */
}
[Link] {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
/* Despliega visualmente el menú con animación al cambiar el clip-path. */
}
nav ul {
flex-direction: column; /* Cambia la disposición de los elementos del menú a
vertical. */
}
nav ul li {
margin: 0.5rem 0; /* Espaciado entre los elementos del menú. */
}
.submenu {
position: static; /* Elimina posicionamiento absoluto para adaptarse al
flujo normal. */
width: 100%;
display: none; /* Oculta submenús por defecto. */
margin-top: 0.5rem;
box-shadow: none; /* Sin sombra en dispositivos pequeños. */
}
.has-submenu:hover .submenu {
display: none; /* Desactiva el hover para abrir submenús en móvil. */
}
.[Link] {
display: block; /* Muestra el submenú solo cuando tiene la clase
'active'. */
}
.hero-content h1 {
font-size: 2rem; /* Reduce el tamaño del título principal en móvil. */
}
.hero-content p {
font-size: 1rem; /* Reduce el tamaño del párrafo del héroe. */
}
}
}
