/* ======================================================= */

/* NUEVO CSS: Estilos de la Descripción y el Botón "Mostrar Más" */

/* ======================================================= */



/* --- Contenedor de la descripción --- */

.MoreInfo .description-content-wrapper {

    /* Altura fija inicial, sin transición aquí para evitar problemas */

    max-height: 100px;

    overflow: hidden; /* Esto es CLAVE para la detección de desbordamiento en JS */

    position: relative;

    /* La transición se aplica en la clase de expansión para animar */

}



/* El Gradiente: Crea un efecto de "fade out" para indicar que hay más texto */

.MoreInfo .description-content-wrapper:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 30px; /* Altura del degradado */

    /* Degradado de transparente a fondo blanco/del color de tu fondo */

    background: linear-gradient(to top, #212121, rgba(33, 33, 33, 0)); 

    pointer-events: none; /* Permite hacer clic a través del degradado */

    opacity: 1;

    transition: opacity 0.3s ease-in-out;

}



/* Estado de EXPANDIDO: Elimina la altura fija, el overflow y el degradado */

.MoreInfo .description-content-wrapper.is-expanded {

    max-height: none !important; /* Desactiva la altura limitada */

    overflow: visible; /* Muestra todo el contenido */

}

.MoreInfo .description-content-wrapper.is-expanded:after {

    opacity: 0; /* Oculta el degradado */

}



/* --- Botón "Mostrar Más" --- */

.read-more-button {

    /* El JS lo mostrará como 'flex' o 'none', pero lo mantenemos fuera del flujo normal para el JS */

    display: none; 

    margin-top: 4px;

    padding: 2px 8px;

    background-color: #ffc107;

    color: #333;

    border: none;

    cursor: pointer;

    border-radius: 9999px;

    font-size: 12px;

    font-weight: bold;

    width: auto;

    transition: all 0.3s ease;

    align-items: center; 

    justify-content: center;

    gap: 6px;

}

.read-more-button:hover {

    background-color: #ffb833;

}



/* Control de la flecha/icono */

.read-more-button .arrow {

    display: inline-block;

    transition: transform 0.3s ease;

    transform: rotate(90deg); /* Flecha hacia abajo/derecha (Mostrar Más) */

}

.read-more-button.is-expanded .arrow {

    transform: rotate(-90deg); /* Flecha hacia arriba (Mostrar Menos) */

}



/* ======================================================= */

/* NUEVOS ESTILOS: Galería de Frames y Modal */

/* ======================================================= */



/* --- Título de la sección de Capturas --- */

.video-frames-section .title {

    margin-top: 15px;

    margin-bottom: 10px;

    font-size: 16px;

    font-weight: bold;

    color: #FFA90A; /* Color de acento */

}

.video-frames-section .title:before {

    margin-right: 5px;

}



/* --- Contenedor de la Galería --- */

.frames-grid-wrapper {

    display: flex;

    flex-wrap: wrap;

    gap: 8px; /* Espacio entre las miniaturas */

    margin-bottom: 15px;

}

.frames-grid-wrapper .placeholder-msg {

    color: #999;

    font-style: italic;

}



/* --- Estilo de cada Miniatura (El enlace <a>) --- */

.frame-thumbnail {

    display: block;

    width: 100px; /* Tamaño de la miniatura */

    height: 70px;

    overflow: hidden;

    cursor: pointer;

    border: 2px solid #333; /* Borde sutil para destacar */

    border-radius: 4px;

    transition: all 0.2s ease;

    flex-shrink: 0; /* No permite que se encoja */

}

.frame-thumbnail:hover {

    border-color: #FFA90A; /* Borde al pasar el ratón */

    transform: scale(1.02);

}

.frame-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Asegura que la imagen cubra el área */

    display: block;

}



/* --- MODAL FLOTANTE --- */

.image-modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.95); /* Fondo muy oscuro */

    display: none; /* Inicialmente oculto */

    justify-content: center;

    align-items: center;

    z-index: 99999; /* Máximo z-index para que flote sobre todo */

    opacity: 0;

    transition: opacity 0.3s ease;

}

.image-modal-overlay.active {

    display: flex; 

    opacity: 1;

}

.image-modal-content {

    position: relative;

    max-width: 95%;

    max-height: 95%;

    margin: auto;

}

#modal-image {

    display: block;

    max-width: 100%;

    max-height: 95vh; /* Se ajusta a la altura visible del viewport */

    border-radius: 5px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}

.close-modal-btn {

    position: absolute;

    top: -8px;

    right: 0px;

    color: white;

    font-size: 34px;

    font-weight: bold;

    cursor: pointer;

    line-height: 1;

    opacity: 0.9;

    text-shadow: 0 0 5px #000;

}

.close-modal-btn:hover {

    opacity: 1;

    color: #FFA90A;

}



/* Opcional: Prevenir el scroll del fondo cuando el modal está activo */

html.modal-open, body.modal-open {

    overflow: hidden;

}



/* --- ESTILOS DE NAVEGACIÓN DEL MODAL (Corregido para solo iconos) --- */

.modal-nav-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    /* Eliminamos las propiedades que creaban el círculo negro */

    background-color: transparent; /* Fondo transparente */

    width: auto; /* Que el ancho se ajuste al icono */

    height: auto; /* Que la altura se ajuste al icono */

    border: none; /* Sin borde */

    border-radius: 0; /* Sin bordes redondeados */

    padding: 10px; /* Padding para hacer el área de clic más grande */

    

    color: #C9B9B9; /* Color de tus iconos (amarillo/ámbar) */

    cursor: pointer;

    font-size: 30px; /* Tamaño más grande para los iconos */

    line-height: 1; /* Asegura el centrado vertical del icono */

    text-align: center;

    opacity: 0.9;

    transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;

    z-index: 100000; /* Debe estar por encima de la imagen */

 }

.modal-nav-btn:hover {
    color: #FFA90A; /* Cambia a blanco al pasar el ratón */
    opacity: 1;
    background-color: transparent;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

.modal-nav-btn:focus {
    outline: none; /* Elimina el contorno de foco por defecto */
    background-color: transparent;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); /* Sombra ligeramente más fuerte al foco */
}





.modal-nav-btn.prev-btn {

    left: 10px; /* Más cerca del borde del modal/imagen */

}



.modal-nav-btn.next-btn {

    right: 10px; /* Más cerca del borde del modal/imagen */

}



/* Ajuste para que los botones se vean bien en móviles */

@media (max-width: 768px) {

    .modal-nav-btn {

        font-size: 30px; /* Iconos más pequeños en móviles */

        padding: 5px; /* Menos padding en móviles */

        top: calc(50% + 20px); /* Bajar un poco para no chocar con el botón de cerrar */

    }

    .modal-nav-btn.prev-btn {

        left: 0px; /* Alinear completamente a la izquierda en móvil */

    }

    .modal-nav-btn.next-btn {

        right: 0px; /* Alinear completamente a la derecha en móvil */

    }

}

/* Eliminar highlight azul en móviles para todos los elementos interactivos de este CSS */
.read-more-button, 
.frame-thumbnail, 
.close-modal-btn, 
.modal-nav-btn {
    -webkit-tap-highlight-color: transparent;
}