/* Variables CSS para colores vibrantes con base amarillo/naranja y combinaciones */
:root {
    --color-fondo-principal: #2c3e50; /* Azul oscuro profundo (similar a noche) */
    --color-fondo-secundario: #34495e; /* Azul oscuro ligeramente más claro */
    --color-texto-principal: #ecf0f1; /* Blanco grisáceo claro para buena legibilidad */

    /* Tonos de amarillo y naranja vibrantes */
    --color-acento-amarillo: #f1c40f; /* Amarillo brillante */
    --color-acento-naranja: #e67e22; /* Naranja vibrante */

    /* Colores de contraste y hover */
    --color-borde-boton: #d35400; /* Naranja oscuro */
    --color-hover-boton: #f39c12; /* Naranja-amarillo para hover */
    --color-social-icon: #f1c40f; /* Amarillo para iconos sociales */
    --color-social-hover: #e67e22; /* Naranja para hover de iconos sociales */
}

/* Estilos generales del cuerpo */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-fondo-principal);
    color: var(--color-texto-principal);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el pie de página quede abajo */
    text-align: center; /* Centra todo el texto por defecto */
}

/* Encabezado y título principal */
header {
    background-color: var(--color-fondo-secundario);
    padding: 30px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.titulo-principal {
    font-size: 3.5em; /* Tamaño grande para el título */
    color: var(--color-acento-amarillo); /* Título en amarillo vibrante */
    margin: 0;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); /* Sombra más pronunciada */
    letter-spacing: 3px; /* Mayor espaciado entre letras */
}

/* Sección principal de juegos */
.seccion-juegos {
    flex-grow: 1; /* Permite que esta sección ocupe el espacio restante */
    padding: 20px 20px; /* Reducido de 40px a 20px para acercar */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
}

.introduccion {
    font-size: 1.3em;
    margin-bottom: 25px; /* Reducido de 40px a 25px */
    max-width: 800px;
    line-height: 1.6;
    color: var(--color-texto-principal);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.contenedor-botones {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea (columnas de bloques) */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 30px; /* Espacio entre botones */
    margin-top: 20px; /* Reducido de 30px a 20px */
}

.boton-juego {
    display: inline-block;
    background-color: var(--color-acento-naranja); /* Botones en naranja vibrante */
    color: var(--color-texto-principal);
    padding: 20px 35px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: 2px solid var(--color-borde-boton);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    min-width: 250px; /* Ancho mínimo para los botones */
    text-align: center;
}

.boton-juego:hover {
    background-color: var(--color-hover-boton); /* Tono de naranja-amarillo al pasar el ratón */
    transform: translateY(-5px); /* Efecto de "levantar" al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.boton-juego:active {
    transform: translateY(-2px); /* Efecto de "presionar" al hacer clic */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Pie de página */
.pie-pagina {
    background-color: var(--color-fondo-secundario);
    padding: 20px 20px;
    margin-top: auto; /* Empuja el pie de página hacia abajo */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
}

.redes-sociales {
    margin-top: 10px;
    display: flex; /* Usar flexbox para centrar los iconos */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    gap: 15px; /* Espacio entre los iconos */
}

.social-link { /* Nueva clase base para los enlaces de iconos SVG */
    display: block; /* Necesario para que background-image funcione con dimensiones */
    width: 40px; /* Tamaño fijo para los iconos SVG */
    height: 40px;
    background-size: contain; /* Asegura que la imagen SVG se ajuste al tamaño del contenedor */
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease; /* Transición solo para el efecto de levantamiento */
    text-decoration: none; /* Asegura que no haya subrayado */
}

.social-link:hover {
    transform: translateY(-3px); /* Pequeño efecto de "levantar" */
}

/* Estilos específicos para cada icono SVG, usando la ruta de la imagen */
.youtube-icon {
    background-image: url('image/rrss/YouTube-Icon.svg'); /* Ruta al SVG de YouTube */
}

.twitter-icon {
    background-image: url('image/rrss/Twitter-Icon.svg'); /* Ruta al SVG de Twitter */
}

.bluesky-icon {
    background-image: url('image/rrss/Bluesky-Icon.svg'); /* Ruta al SVG de Bluesky */
}

.social-link:hover.youtube-icon {
    /* Si quieres un cambio de color en hover, y tu SVG es de un solo color,
       puedes usar un filtro o tener una versión hover del SVG.
       Por simplicidad, mantendremos el efecto de levantamiento. */
    /* filter: brightness(1.5); */ /* Ejemplo de filtro para aclarar */
}
.social-link:hover.twitter-icon {
    /* filter: brightness(1.5); */
}
.social-link:hover.bluesky-icon {
    /* filter: brightness(1.5); */
}

/* Media Queries para adaptabilidad en pantallas más pequeñas */
@media (max-width: 768px) {
    .titulo-principal {
        font-size: 2.5em;
    }

    .introduccion {
        font-size: 1.1em;
        margin-bottom: 20px; /* Ajuste para móviles */
    }

    .boton-juego {
        font-size: 1.2em;
        padding: 15px 25px;
        min-width: unset; /* Quita el ancho mínimo para que se adapte mejor */
        width: 80%; /* Ocupa un buen porcentaje del ancho disponible */
    }

    .contenedor-botones {
        flex-direction: column; /* Apila los botones en pantallas pequeñas */
        gap: 20px;
        margin-top: 15px; /* Ajuste para móviles */
    }

    .redes-sociales a {
        font-size: 1.8em;
        margin: 0 10px;
    }
}

@media (max-width: 480px) {
    .titulo-principal {
        font-size: 2em;
    }

    .introduccion {
        font-size: 1em;
    }
}