/* Global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

/* Estilo del header */
header {
    position: fixed;
    /* Hace que el header quede fijo en la parte superior */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Asegura que el header quede por encima de otros elementos */
    background-color: #8c52ff;
    /* Asegúrate de que tenga un fondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para el header */
    padding: 15px 20px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 60px;
    transition: height 0.3s ease;
}

.menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    position: relative;
}

.nav-links li {
    position: relative;
}

.nav-links li a {
    padding: 8px 15px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-links li a:hover {
    background-color: #fff;
    color: #8c52ff;
}

/* Dropdown Menus */
.dropdown-menu,
.dropdown-submenu {
    display: none;
    position: absolute;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    top: 100%;
    left: 0;
    list-style: none;
    padding: 5px 0;
    z-index: 10;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu li:hover > .dropdown-submenu {
    display: block;
}

.dropdown-menu li {
    padding: 5px 20px;
}

.dropdown-submenu {
    top: 0;
    left: 100%;
}

.dropdown-menu li a {
    text-decoration: none;
    color: #333;
}

.dropdown-menu li a:hover {
    background-color: #8c52ff;
    color: white;
}

.dropdown-menu li,
.dropdown-submenu li,
.nav-links li {
    list-style: none;
}

/*--------------------------------------BUSCADOR GENERAL--------------------------------*/

.search-bar {
    position: relative;
    /* Mantiene la caja de sugerencias alineada con el input */
    display: flex;
    /* Usa flexbox para que el input ocupe todo el ancho */
    justify-content: flex-start;
    /* Alinea el contenido a la izquierda */
    align-items: center;
    width: 200px;
    /* Define el ancho del buscador */
}

.search-bar input {
    display: block;
    width: 100%;
    height: 40px;
    /* Fija la altura */
    padding: 8px;
    /* Padding uniforme para el contenido */
    border: 2px solid #ccc;
    /* Mantén el mismo grosor de borde */
    outline: none;
    box-sizing: border-box;
    /* El ancho incluye padding y borde */
    text-align: left;
    /* El texto y el placeholder se alinean a la izquierda */
}

.search-bar input:focus {
    border-color: #8c52ff;
}

.suggestions {
    display: none;
    /* Se oculta por defecto para que no se vea la sombra antes de escribir */
    position: absolute;
    top: 100%;
    /* Justo debajo del input */
    left: 0;
    /* Alineación exacta con el borde izquierdo del contenedor */
    width: 100%;
    /* Igual al ancho del contenedor .search-bar */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 120px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 0;
    /* Sin margen extra */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.suggestion-item {
    padding: 4px 8px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s ease;
}

.suggestion-item:hover {
    background-color: #8c52ff;
    color: #fff;
}

/*-----------------------------------------------------------------------------------------*/

/* Menú Hamburguesa */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 4px;
    background-color: #fff;
}

@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        background-color: #ffffff;
        position: absolute;
        top: 70px;
        left: 0;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .menu.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: block;
        padding: 10px;
        text-align: left;
        width: 100%;
        color: #333;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 5px;
        transition: background-color 0.3s ease;
    }

    .nav-links li a:hover {
        background-color: #8c52ff;
        color: #fff;
    }

    .dropdown-menu,
    .dropdown-submenu {
        display: none;
        position: static;
        background-color: #f9f9f9;
        margin-left: 20px;
        padding: 0;
    }

    .dropdown-menu li:hover > .dropdown-submenu,
    .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-menu li,
    .dropdown-submenu li {
        padding: 8px 10px;
    }

    .dropdown-menu li a,
    .dropdown-submenu li a {
        padding: 8px;
        text-align: left;
        color: #333;
    }

    .dropdown-menu li a:hover,
    .dropdown-submenu li a:hover {
        background-color: #8c52ff;
        color: white;
    }

    .nav-links li .dropdown-menu {
        margin-left: 15px;
        background-color: #f0f0f0;
    }

    .dropdown-submenu {
        margin-left: 30px;
        background-color: #d0d0d0;
    }
}

/*-----------------------------MENU CON LOGO----------------------*/

/* Efecto hover para los elementos del menú SIN logo */
.nav-links li a:hover:not(.logo-item) {
    background-color: #fff;
    color: #8c52ff;
}

/* Efecto hover para los elementos del menú CON logo */
.menu-logo {
    height: 40px;
    width: auto;
    margin: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 5px;
}

.submenu-logo {
    height: 30px;
    width: auto;
    margin: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 5px;
}

.menu-logo:hover,
.submenu-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px #8c52ff;
}

/* Para evitar el fondo morado en los ítems que tienen logo */
.dropdown-menu li a.logo-item:hover,
.nav-links li a.logo-item:hover {
    background-color: transparent;
}

/* Para que el submenú no se desplace */
.dropdown-menu img,
.dropdown-submenu img {
    margin: 5px auto;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-logo,
    .submenu-logo {
        height: 25px;
    }

    .nav-links li a {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-links li a:hover {
        background-color: #8c52ff;
        color: #fff;
    }

    .dropdown-menu,
    .dropdown-submenu {
        display: none;
        position: static;
        background-color: #f9f9f9;
        margin-left: 20px;
        padding: 0;
    }

    .dropdown-menu li:hover > .dropdown-submenu,
    .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-menu li,
    .dropdown-submenu li {
        padding: 8px 10px;
    }

    .dropdown-menu li a,
    .dropdown-submenu li a {
        padding: 8px;
        text-align: left;
        color: #333;
    }

    .dropdown-menu li a:hover,
    .dropdown-submenu li a:hover {
        background-color: #8c52ff;
        color: white;
    }
}
/*-----------------------BANDERITAS--------------------*/

.language-selector {
    position: relative;
    display: inline-block;
}

#lang-btn {
    border: none;
    background: none;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

#lang-btn:hover {
    color: #8c52ff;
}

/* Ajuste para centrar el desplegable */
.lang-menu {
    display: none;
    position: absolute;
    right: 50%;
    /* Centrado respecto al botón */
    transform: translateX(50%);
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 5px;
}

.lang-menu li {
    list-style: none;
    padding: 5px;
}

/* Formato igual al botón */
.lang-menu li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 5px;
    display: block;
    transition: color 0.2s ease;
}

.lang-menu li a:hover {
    color: #8c52ff;
}

/* Mostrar el desplegable al pasar el ratón */
.language-selector:hover .lang-menu {
    display: block;
}

/*---------------------------LOGO------------------------*/

/* Efecto de giro en el logo */
.logo img {
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.logo img:hover {
    transform: rotateY(360deg);
    /* Gira el logo en el eje Y */
}

/*-------------------------------------------------------*/

/* Banner - Carrousel */
.carousel {
    margin-top: 140px;
    overflow: hidden;
    height: 100px;
}

.carousel-track {
    display: flex;
    transition: transform 1s ease;
}

.carousel-item {
    min-width: 100%;
    padding: 20px;
    background-color: #8c52ff;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

/* Sección de contenido */
.content-section {
    margin: 30px 20px;
    padding: 40px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

.review-card {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*-------------------------- Footer------------------------------------------------- */
footer {
    background-color: #8c52ff;
    /* Color más sofisticado */
    color: white;
    padding: 40px 20px;
    text-align: center;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
}

footer a{
    color: #f4f4f9;
    text-decoration: dotted;
   
}


.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo img {
    height: 60px;
    margin-bottom: 15px;
    opacity: 0.9;
    /* Efecto sutil */
}

.footer-socials {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 25px;
}

.footer-socials img {
    width: 30px;
    /* Iconos más proporcionales */
    transition: transform 0.1s ease, opacity 0.3s ease;
}

.footer-socials a:hover img {
    transform: scale(1.2);
    opacity: 0.7;
}

.footer-bottom {
    font-size: 14px;
    opacity: 0.8;
}
/*----------------------------------------------------------------------------------------- */

/* Estilos generales */
input[type="text"] {
    padding: 10px;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: #8c52ff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #7e4ccd;
}

/* ---------------------RESEÑA---------------------------------------------------------- */

main {
    padding-top: 100px;
}
/* ============================== */
/*   Estilos del MAIN de la Página  */
/* ============================== */

/* Contenedor principal de la reseña */
main.review-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

/* ------------- HERO SECTION ------------- */
/* ============================== */
/*    Sección HERO Responsiva     */
/* ============================== */

.hero {
    position: relative;
    width: 100%;
    height: 70vh;
    /* Altura base para pantallas grandes */
    overflow: hidden;
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Asegura que la imagen cubra todo el contenedor sin distorsión */
    opacity: 0.8;
    /* Transparencia para resaltar el overlay */
    filter: brightness(0.8);
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usamos flexbox para centrar vertical y horizontalmente el contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    color: #fff;
    z-index: 2;
    /* Capa semi-transparente oscura para mejorar la legibilidad */
    background: rgba(0, 0, 0, 0.3);
}

/* Datos del juego en el overlay */
.hero-overlay .game-details {
    margin-bottom: 20px;
}

.hero-overlay .game-details h1 {
    margin: 0;
    font-size: 3rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-overlay .game-details p {
    margin: 5px 0;
    font-size: 1.2rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

/* Valoración en el overlay */
.hero-overlay .rating-box {
    background-color: rgba(140, 82, 255, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
}

.hero-overlay .rating-box .rating-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.hero-overlay .rating-box .stars {
    font-size: 1.5rem;
}

/* ============================== */
/*        Media Queries         */
/* ============================== */

/* Para pantallas medianas */
@media (max-width: 768px) {
    .hero {
        height: 50vh;
    }
    .hero-overlay .game-details h1 {
        font-size: 2.5rem;
    }
    .hero-overlay .game-details p {
        font-size: 1rem;
    }
    .hero-overlay .rating-box {
        padding: 8px 15px;
    }
    .review-text {
        padding: 15px;
    }
    .video-container {
        width: 95%;
    }
    /* Ajuste en los tabs: distribuir y reducir espacios */
    .review-tabs {
        justify-content: space-around;
        gap: 10px;
    }
}

/* Para dispositivos muy pequeños */
@media (max-width: 480px) {
    .hero {
        height: 40vh;
    }
    .hero-overlay .game-details h1 {
        font-size: 2rem;
    }
    .hero-overlay .game-details p {
        font-size: 0.9rem;
    }
    .hero-overlay .rating-box .rating-title {
        font-size: 1rem;
    }
    .hero-overlay .rating-box .stars {
        font-size: 1.2rem;
    }
    /* Para los tabs apilados y centrados */
    .review-tabs {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .review-tabs .tab-button {
        padding: 8px 10px;
        font-size: 12px;
        width: 90%;
        max-width: 300px;
        text-align: center;
    }
    .review-tabs .tab-logo {
        width: 25px;
    }
    .video-container iframe {
        width: 100%;
        height: auto;
    }
}

/* ------------- REVIEW DETAILS SECTION ------------- */
.review-details {
    padding: 20px;
    background-color: #fff;
    margin-top: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ----------- TABS (RESEÑAS) - REDISEÑADOS ----------- */
.review-tabs {
    display: flex;
    justify-content: center;
    /* Se centra en pantallas grandes */
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.review-tabs .tab-button {
    background: none;
    border: none;
    padding: 10px;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    transition: color 0.3s ease;
    outline: none;
}

.review-tabs .tab-button .tab-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-tabs .tab-logo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    /* Estilo circular para mayor modernidad */
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.review-tabs .tab-button.active {
    color: #8c52ff;
}

.review-tabs .tab-button.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #8c52ff;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
}

.review-tabs .tab-button:hover .tab-logo {
    border-color: #8c52ff;
}

/* ----------- CONTENIDO DE LAS RESEÑAS ----------- */


.review-text {
    background-color: #f9f9f9;
    padding: 1px;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Enlaces en los textos de las reseñas: letra morada y en negrita */
.review-text a {
    color: #8c52ff; /* Utilizamos el mismo tono morado que en otras partes del diseño */
    font-weight: bold;
    text-decoration: none; /* Opcional: quitar subrayado por defecto */
}



.review-text h2 {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
}

.review-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

/* Imágenes dentro de las reseñas que se adaptan a su contenedor */
.review-text img {
    max-width: 100%; /* La imagen nunca excederá el ancho del contenedor */
    height: auto;    /* Mantiene la proporción original */
    display: block;  /* Quita espacios extra que puede generar el inline-block */
    margin: 0 auto;  /* Opcional: para centrar la imagen si se requiere */
}

/* ----------- SPOILER TOGGLE MEJORADO ----------- */
.spoiler-container {
    margin: 20px 0;
    border: 2px solid #e74c3c;
    /* Un rojo que advierte visualmente */
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s ease;
    background: linear-gradient(90deg, #ffcccc, #ffe6e6);
}

.spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
    background-color: #e74c3c;
    color: #fff;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.spoiler-header:hover {
    background-color: #c0392b;
}

.spoiler-text {
    font-weight: bold;
}

.spoiler-arrow {
    font-size: 1.5rem;
    transition: transform 0.4s ease;
}

.spoiler-container.open .spoiler-arrow {
    transform: rotate(180deg);
}

.spoiler-content {
    display: none;
    padding: 15px;
    background-color: #fff;
    color: #333;
    animation: slideDown 0.4s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------- SECCIÓN DE TRÁILER COMÚN ----------- */
/* Esta sección se muestra justo después del contenido de las reseñas */
.review-trailer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    /* Separación visual del contenido anterior */
    text-align: center;
    padding-bottom: 20PX;
}

.review-trailer h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.review-trailer .video-container {
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsividad para la sección de tráiler */
@media (max-width: 768px) {
    .review-trailer .video-container {
        width: 95%;
    }
    #lang-btn {
        color: #000; /* Cambia el color a negro */
    }
    .video-container iframe {
         height: 250px;  /* Modifica este valor al alto deseado */
    }

}

@media (max-width: 480px) {
    .review-trailer h3 {
        font-size: 1.3rem;
    }
    .review-trailer .video-container iframe {
        width: 100%;
        height: auto;
    }
    #lang-btn {
        color: #000; /* Cambia el color a negro */
    }

}

/*-----------------------------------------------------VALORACION INDIVIDUAL-------------------------------------------*/

/* Estilos para el bloque de valoración del producto */
.product-rating {
    margin-top: 20px;
    text-align: center;
}

.product-rating .rating-title {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.product-rating .stars {
    font-size: 1.5rem;
    color: #FFD700;
    /* Color dorado para las estrellas */
    text-shadow: 0 0 2px #000;
}

/*----------------------------VALORACÓN DE USUARIOS-------------------------------*/

.review-feedback {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Aplicamos estilos a todos los botones dentro de .review-feedback */
.review-feedback button {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    padding-bottom: 20PX;
}

/* Quitar el outline y cualquier box-shadow incluso al focus */
.review-feedback button:focus,
.review-feedback button:hover {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Solución para Firefox (quita el borde interno) */
.review-feedback button::-moz-focus-inner {
    border: 0;
}

/* Estilo inicial de los iconos */
.thumb-down i,
.thumb-up i {
    font-size: 2rem;
    color: #888;
    transition: color 0.3s ease;
}

/* Al pasar el mouse, el ícono se oscurece ligeramente */
.thumb-down:hover i,
.thumb-up:hover i {
    color: #555;
}

/* Estado activo: pulgar arriba en verde, pulgar abajo en rojo */
.thumb-up.active i {
    color: green !important;
}

.thumb-down.active i {
    color: red !important;
}

/*---------------------------------COMENTARIOS-----------------------------------------*/
/* Contenedor padre que agrupa el comentario y el video */
.comment-video-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Ajuste en escritorio: comentarios y video al lado */
.comment-box {
    flex: 1;
    max-width: none;
}

/* Ajuste en escritorio: video ocupa la otra mitad */
.video-container {
    flex: 1;
    margin: 10px;
}

/* Estilos generales para la caja de comentarios */
.comment-box {
    margin: 20px auto;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.comment-box label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.comment-box select, 
.comment-box textarea, 
.comment-box button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.comment-box textarea {
    resize: vertical;
}

.comment-box button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.comment-box button:hover {
    background-color: #0056b3;
}

/* Ajuste para móvil: los elementos se apilan y se invierte el orden para mostrar el video encima */
@media (max-width: 768px) {
    .comment-video-wrapper {
        flex-direction: column-reverse;
    }

    .comment-box {
        width: 90%;
    }
}



/*-------------------SPOTIIIIFYYY---------------------------*/
/* --- Configuración base para desktop --- */
.hero {
  position: relative;
  width: 100%;
  height: 70vh; /* Altura en desktop */
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.game-details {
  text-align: center;
  color: #fff;
}

.rating-box {
  background-color: rgba(140,82,255,0.8);
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  margin: 10px 0;
  z-index: 2;
}

/* Reproductor Spotify ubicado al final */
.spotify-player {
  width: 100%;
  height: 80px;  /* Altura en desktop */
  margin-top: auto;
}

.spotify-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}

/* --- Ajustes Responsive --- */
@media (max-width: 768px) {
  /* Reducir la altura de la imagen para dispositivos móviles */
  .hero {
    height: 50vh;  /* Disminuida respecto a 55vh */
  }
  
  /* Reducir el padding para ganar espacio */
  .hero-overlay {
    padding: 10px;
  }
  
  /* Ajuste de tamaños de fuente para que el contenido no se comprima tanto */
  .game-details h1 {
    font-size: 1.8rem;
  }
  .game-details p {
    font-size: 0.9rem;
  }
  .rating-box {
    font-size: 0.9rem;
    padding: 8px 15px;
    margin: 8px 0;
  }
  
  /* Aumentar la altura del reproductor para evitar scroll en el iframe */
  .spotify-player {
    height: 80px;
  }
}

/* Opcional: ajustes para dispositivos muy pequeños */
@media (max-width: 480px) {
  .hero {
    height: 45vh;
  }
  
  .game-details h1 {
    font-size: 1.6rem;
  }
  .game-details p {
    font-size: 0.8rem;
  }
  .rating-box {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
  
  .spotify-player {
    height: 80px;
  }
}


/*-----------comentarios---------*/
/* Ajustes para el contenedor que agrupa el video y el formulario */
.email-comment-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap; /* Permite que, si no cabe en una sola fila, se apilen */
}

/* En resoluciones amplias, ambos elementos se reparten el 50% del ancho mínimo */
.email-comment-wrapper .video-container,
.email-comment-wrapper .comment-box {
  flex: 1 1 50%;
  min-width: 300px; /* Evita que se estiren demasiado en tamaños intermedios */
}

/* Para controlar que el video no se “exceda” */
.email-comment-wrapper .video-container {
  max-width: 560px; /* O el valor que desees, acorde al ancho nativo del iframe */
}

/* En pantallas donde el espacio es limitado, se apilan verticalmente */
@media (max-width: 800px) {
  .email-comment-wrapper {
    flex-direction: column;
  }
  .email-comment-wrapper .video-container,
  .email-comment-wrapper .comment-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

#commentEmailForm button{
    background-color :grey ;
}

#commentEmailForm button:hover{
    background-color :#8c52ff ;
}

@media screen and (min-width: 470px) and (max-width: 580px) {
  /* Forzamos que el contenedor se ajuste al 100% del viewport sin márgenes internos que lo empujen */
  .email-comment-wrapper {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Garantizamos que cada hijo (video y formulario) ocupe el 100% de ancho */
  .email-comment-wrapper .video-container,
  .email-comment-wrapper .comment-box {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: none;
  }
  /* El iframe se redimensiona al 100% del contenedor */
  .email-comment-wrapper .video-container iframe {
    width: 100%;
    height: 400px;
    display: block;
  }
}

@media screen and (min-width: 580px) and (max-width: 1200px) {
  .email-comment-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .email-comment-wrapper .video-container {
    width: 100%;
    max-width: 560px; /* O el ancho nativo que quieras para el video */
    margin: 0 auto;
    box-sizing: border-box;
  }
  .email-comment-wrapper .comment-box {
    width: 100%;
    max-width: 560px;
    margin-top: 20px; /* Espaciado entre el video y el formulario */
    box-sizing: border-box;
  }
}


/*---------------------------------------------------------------------SHARE---------------------------------*/

/* Nueva regla para colocar like, share y dislike en una misma línea */
.review-feedback {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Para darle un tamaño uniforme a los botones y al share */
.review-feedback button,
.review-feedback .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Puedes ajustar el ancho y alto si lo consideras necesario */
    width: 50px;
    height: 50px;
}

/* Ajusta la imagen del botón de compartir */
.review-feedback .share-btn img {
    width: 24px;
    height: 24px;
}

/* En responsive, por si se requiere mantener la misma estructura */
@media screen and (max-width: 580px) {
    .review-feedback {
        justify-content: space-around;
    }
    .review-feedback button,
    .review-feedback .share-btn {
        width: auto;
        padding: 10px;
    }
}


/*------------------------------------------------------------------------------------------------------
---------------------------------------------OCULTO-----------------------------------------------------
-------------------------------------------------------------------------------------------------------*/

.oculto{

position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}