/* ===== RESET Y ESTILOS BASE ===== */
    body {
        background-color: #202020;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column; /* Estructura de página en columna */
    }

    main {
        flex: 1; /* Ocupa todo el espacio disponible */
        padding-bottom: 60px; /* Espacio para el footer */
    }

    footer {
        position: relative;
        bottom: 0;
        width: 100%;
        margin-top: auto; /* Empuja el footer al final */
    }

    /* ===== GALERÍA PRINCIPAL ===== */
    .fototeca {
        max-width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 170px 0 26px 0;
        margin: 0px auto;  /* Esto centra horizontalmente */
    }

    /* Foto destacada con estilos y efectos */
    .fototecaDestacada {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        border-radius: 4%;
        box-shadow: 0 0 11px 2px rgba(255, 0, 0, 0.8);
        border: 2px solid rgb(255, 51, 0);
        background-color: #ffffff;
        
    }
    .fototecaDestacada::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
        z-index: 1; /* Opcional: asegura que esté sobre otros elementos */
    }
    .fototecaDestacada::after {
        content: "";
        position: absolute;
        bottom: 0;  /* Cambiado de top: 0 a bottom: 0 */
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
        z-index: 1;
    }

    .fototecaDestacada img {
        cursor: zoom-in;
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        margin: 0 auto;
    }



    /* ===== INDICADORES Y CONTADORES ===== */
    .numeracionFototecaDestacada {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 14%;
        display: flex;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.616);
        font-size: 14px;
    }

    /* Puntos indicadores de progreso */
    .progresoFototecaDestacada {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #progress-dots {
        display: flex;
        gap: 0px;
    }

    .dot {
        width: 6px;
        height: 6px;
        border-radius: 0%;
        transition: background-color 0.5s ease;
        background-color: rgba(255, 255, 255, 0.493);
        cursor: pointer; /* 👈 esto hace que se vea la manita */
    }

    .dot.active {
        transform: scale(1.7);
        background-color: rgb(255, 220, 25);
    }




    /* ===== RESPONSIVE DESIGN ===== */


    @media screen and (min-width: 1080px) {
        main {
            display: flex;
            
            flex-direction: column;

            justify-content: center;
            max-width: 95%;
            margin: 0px auto 0 auto; /*arriba Derecha Abajo Izquierda */
        }
        
        .fototeca {
            max-width: 390px;

        }
        
        .grid-Miniaturas-Fototeca {
            max-width: 800px;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

        }

        .video-item {
            width: calc(33.333% - 20px);
        }
        
        .price-option {
            min-width: 200px;
        }
    /* Posicionamiento de botones */
    .botonesNavFotoDestacada.btnIzquierda {
        left: 23%;
    }

    .botonesNavFotoDestacada.btnDerecha {
        right: 23%;
    }

    }

    /* ===== GRID DE MINIATURAS ===== */
    .grid-Miniaturas-Fototeca {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
        max-width: 78%;
        padding: 5px 5% 50px; /* arriba derecha abajo izquierda */
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.829);
        box-shadow: 0 0 11px 2px rgba(255, 0, 0, 0.8);
        border: 2px solid rgb(255, 51, 0);
        border-radius: 8px;
        gap: 20px;
        position: relative;
                
    }
    .grid-Miniaturas-Fototeca::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
            height: 4px; /* Un poco más gruesa */
            opacity: 0.9; /* Controla la transparencia */
    }
    .grid-Miniaturas-Fototeca::after {

        content: "";
        position: absolute;
        bottom: 0;  /* Cambiado de top: 0 a bottom: 0 */
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
        z-index: 1;
    }
    .title-container-thumbnail-pack {
        margin-right: 12px;
        font-weight: bold;
        padding: 10px 0px 10px 0px;
        text-align: center;
        grid-column: 1 / -1; /* Ocupa todas las columnas */
        color:   rgba(170, 143, 54, 0.8); /* color texto */   
        font-size: 1 rem;
        position: relative; /* Necesario para el pseudo-elemento */
    }

    .title-container-thumbnail-pack::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 25%; /* Comienza al 25% del ancho */
        width: 50%; /* Ocupa el 50% del ancho */
        height: 3px; /* Grosor de la línea */
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 0, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 0, 0, 0.8), 
            transparent);
        z-index: 1;
    }
    .description-container-thumbnail-pack { 
        padding-bottom: 0px;
        font-size: 13px;
        text-align: center; /*centrar texto */
        line-height: 1.2; /* espacio entre cada linea */
        grid-column: 1 / -1; /* Ocupa todas las columnas */
        color: rgba(182, 182, 182, 0.76); /* color texto */
        /*border-bottom: 1px solid rgba(255, 152, 152, 0.76); /* color linea horizontal */
    }




    /* Estilos de las miniaturas */
    .grid-Miniaturas-Fototeca img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 2px solid rgba(255, 152, 152, 0.76);
        filter: brightness(0.3);
        transform: scale(0.9);
        transition: all 0.3s ease;
            cursor: pointer; /* 👈 esto hace que se vea la manita */
    }

    .grid-Miniaturas-Fototeca img:hover {
        filter: brightness(0.5);
        transform: scale(1);
    }

    .grid-Miniaturas-Fototeca img.clicked {
        filter: brightness(1);
        transform: scale(1.1);
        border: 2px solid rgb(255, 202, 102);
    }

    /* ===== MODAL DE IMAGEN ===== */
    .modal-Abierto-FototecaDestacada {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content-scroll {
        width: 100%;
        height: 100%;
        overflow: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .class-fotoDestacadaModal {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
        cursor: zoom-in;
    }

    .class-fotoDestacadaModal.zoomed {
        cursor: zoom-out;
    }

    /* Botón de cerrar modal */
    .btnCerrarModalFototeca {
        position: fixed;
        bottom: 19px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        background-color: rgba(255, 0, 0, 0.8);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
        z-index: 1001;
    }

    .btnCerrarModalFototeca:hover {
        background-color: rgba(255, 0, 0, 1);
        transform: translateX(-50%) scale(1.1);
    }

    .btnCerrarModalFototeca:active {
        transform: translateX(-50%) scale(0.9);
    }

    /* Icono X del botón de cerrar */
    .x-icon::before,
    .x-icon::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: white;
        top: 50%;
        left: 0;
    }

    .x-icon::before {
        transform: rotate(45deg);
    }

    .x-icon::after {
        transform: rotate(-45deg);
    }

    /* Clase utilitaria */
    .hidden {
        display: none;
    }

    /* ===== SCROLLBARS PERSONALIZADOS ===== */
    .modal-content-scroll::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .modal-content-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(255, 0, 0, 0.8);
        border-radius: 6px;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .modal-content-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgb(251, 255, 0);
    }

    .modal-content-scroll::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
    }

    .modal-content-scroll::-webkit-scrollbar-thumb {
        transition: background-color 0.3s ease;
    }






    /* ==================================== */
    /* ========= VIDEO GALERIA ============ */
    /* ==================================== */


    .main-container-video-gallery {
        max-width: 78%;
        margin: 30px auto;
        background: rgba(0, 0, 0, 0.829);
        box-shadow: 0 0 11px 2px rgba(255, 0, 0, 0.8);
        border: 2px solid rgb(255, 51, 0);
        border-radius: 8px;
        padding: 15px 5% 50px; /* Un solo padding (elimina el de 100px) */
        position: relative; /* ¡ESENCIAL para que funcione el ::before! */
        overflow: hidden; /* Contiene el pseudo-elemento */
    }

    .main-container-video-gallery::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
        z-index: 1; /* Opcional: asegura que esté sobre otros elementos */
        height: 4px; /* Un poco más gruesa */
        opacity: 0.9; /* Controla la transparencia */
    }
    .main-container-video-gallery::after {
        content: "";
        position: absolute;
        bottom: 0;  /* Cambiado de top: 0 a bottom: 0 */
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
        z-index: 1;
    }

    .title-video-gallery {
        margin-right: 12px;
        font-weight: bold;
        padding: 10px 10px 10px 0px;
        text-align: center;
        grid-column: 1 / -1; /* Ocupa todas las columnas */
        color:   rgba(170, 143, 54, 0.8); /* color texto */   
        font-size: 1 rem;
        position: relative; /* Necesario para el pseudo-elemento */
    }

    .title-video-gallery::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 25%; /* Comienza al 25% del ancho */
        width: 50%; /* Ocupa el 50% del ancho */
        height: 3px; /* Grosor de la línea */
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 0, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 0, 0, 0.8), 
            transparent);
        z-index: 1;
    }
    .descripcion-video-galeria { 
        padding: 10px 10px 0px 0px;
        font-size: 13px;
        text-align: center; /*centrar texto */
        line-height: 1.2; /* espacio entre cada linea */
        grid-column: 1 / -1; /* Ocupa todas las columnas */
        color: rgba(182, 182, 182, 0.76); /* color texto */
        /*border-bottom: 1px solid rgba(255, 152, 152, 0.76); /* color linea horizontal */
    }
    .video-container-full-video-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        padding-top: 30px;
    }

    .video-item {
        width: 350px;
        background: #2a2a2a;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
    }

    .video-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(255, 0, 0, 0.726);
    }

    .video-miniatura {
        position: relative;
        height: 180px;
        overflow: hidden;
    }

    .video-miniatura img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .video-item:hover .video-miniatura img {
        transform: scale(1.05);
    }

    .video-duracion {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 3px 6px;
        border-radius: 4px;
        font-size: 14px;
    }

    .video-numero {
        position: absolute;
        top: 161px;
        left: 10px;
        background: rgba(228, 43, 43, 0.8);
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: bold;
        font-size: 16px;
    }

    .video-titulo {
        padding: 15px;
    }

    .video-titulo h3 {
        margin: 0 0 10px 0;
        color: rgba(247, 204, 64, 0.952);
        font-size: 18px;
    }

    .video-titulo p {
        margin: 0;
        color: #c0c0c0;
        font-size: 14px;
        line-height: 1.4;
    }




    /* ===== CONTENEDOR PRINCIPAL  DETALLES DEL PACK ===== */
    .estilo-contenedor-detalles-pack {
        max-width: 80%;
        margin: 8px auto; /* separacion con el contenedor*/
        padding-right: 6%;
        padding-left: 1%;
        background: rgba(10, 10, 10, 0.9);
        box-shadow: 0 0 15px 3px rgba(255, 0, 0, 0.6);
        border: 2px solid rgba(255, 51, 0, 0.8);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }

    .estilo-contenedor-detalles-pack::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
            height: 4px; /* Un poco más gruesa */
            opacity: 0.9; /* Controla la transparencia */
    }
    .estilo-contenedor-detalles-pack::after {
        content: "";
        position: absolute;
        bottom: 0;  /* Cambiado de top: 0 a bottom: 0 */
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 51, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 51, 0, 0.8),
            transparent);
        z-index: 1;
    }

    /* ===== TÍTULO DE SECCIÓN ===== */
    .titulo-detalles-pack {
        margin-right: 12px;
        font-weight: bold;
        padding: 10px 10px 10px 0px;
        text-align: center;
        grid-column: 1 / -1; /* Ocupa todas las columnas */
        color:   rgba(170, 143, 54, 0.8); /* color texto */   
        font-size: 1 rem;
        position: relative; /* Necesario para el pseudo-elemento */
    }



    .titulo-detalles-pack::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 25%; /* Comienza al 25% del ancho */
        width: 50%; /* Ocupa el 50% del ancho */
        height: 3px; /* Grosor de la línea */
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 0, 0, 0.8), 
            rgba(247, 204, 64, 0.8),
            rgba(255, 0, 0, 0.8), 
            transparent);
        z-index: 1;
    }
    /* ===== CONTENEDOR PRINCIPAL LISTA DE DETALLES ===== */
    .animacion-descripcion-detalles-pack li {
        margin-bottom: 25px;
        padding: 15px;
        border-radius: 8px;
        background: #2a2a2a; /* color de fondo para los contenedores de iconos y detalles del Pack */
        border-left: 3px solid rgba(255, 255, 255, 0.685); /* color linevertical izquierda vertical de los contenedores de iconos y detalles del Pack */
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center; /* Cambiado de flex-start a center para alineación vertical */
        gap: 20px;
    }
    .animacion-descripcion-detalles-pack li:hover .estilo-iconos-detalles-pack {
        transform: rotate(15deg) scale(1.3);
        text-shadow: 0 0 10px rgba(13, 219, 23, 0.884); /* color animacion resplando del icono */
    }
    .animacion-descripcion-detalles-pack li:hover { /* resplandores exteriores del contenedor al pasar puntero */
        background: rgba(36, 54, 56, 0.9); /*  */
        transform: translateY(-3px);
        box-shadow: 0 5px 6px rgba(124, 255, 139, 0.671);  /* resplando de sombra al pasar puntero */
        
        /* Efecto de borde animado */
        border-left-width: 5px;
        border-left-color: rgba(13, 219, 23, 0.801) /* color linea vertical de la izquierda */
    }

    .animacion-descripcion-detalles-pack li:hover .estilos-cajas-detalles-pack {
        animation: pulse 1.2s infinite;  /**/
    }
    .estilos-cajas-detalles-pack {
        display: block;
        margin-top: 9px;
        padding: 12px;
        border-radius: 6px;
        font-weight: 600;
        text-align: center;
        transition: border-color 0.3s ease; /* Agrega transición suave */
        background: rgba(0, 0, 0, 0.4); /* fondo de los totales */   
        color: rgba(255, 255, 255, 0.514); /* titulo de los totales */
        border: 1px solid rgba(255, 255, 255, 0.63); /* color borde de los totales*/
    }
    .estilos-cajas-detalles-pack {
        transition: all 0.3s ease;
    }


    .estilo-iconos-detalles-pack {
        font-size: 1.5rem;
        padding: 0.5%;
        transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }


    .textos-cajas-descripcion-pack {
        flex: 1; /* Ocupa el espacio restante */
        color: #e0e0e0; /* descripcion de la caja del icono */
        font-size: 0.9rem; /* Tamaño de fuente aumentado */
        line-height: 1.5; /* Mayor interlineado */
    }

    .duration-highlight {
        color: #bff185;
        font-weight: 600;
        font-size: 1 rem;
    }












    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.03); }
        100% { transform: scale(1); }
    }








    /* ===== SECCIÓN DE PRECIOS ===== */

    /* Estilos para el nombre del pack en la sección de precios */
    .dinamico-nombrePack-cajaPrecio {
        color: rgba(116, 255, 51, 0.726); /* color titulo pack dinamico en caja de texto*/
        font-size: 1.5rem;
        margin: 5px 0 10px;
        text-align: center;
        font-weight: normal;
        font-style: italic;
        border-bottom: 1px solid rgba(247, 204, 64, 0.3);
        padding-bottom: 33px;
    }


    .contenedor-precio-pack {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 60px;
    }
    .price-option {
        flex: 1;
        min-width: 250px;
        max-width: 300px;
        background: #1b290b9a; /* fondo caja general precio */
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        transition: all 0.3s ease;
    }


    .price-option.featured {
        transform: scale(1.05);
        border: 2px solid rgba(251, 255, 0, 0.575); /* borde contorno caja general de precios */ 
        box-shadow: 0 0 15px rgb(132, 190, 135); /* resplando caja general de precios */
    }


    .price-option h4 {
        color:  rgb(223, 245, 29); /* texto - Contenido Premium*/
        font-size: 16px;
        margin-top: 0;
    }

    .precio-MX {
        color: rgba(255, 255, 255, 0.452);
        font-size: 20px;
        font-weight: bold;
        margin: 15px 0;
    }
    .price-usd {
        color: rgba(255, 255, 255, 0.452);
        font-size: 22px;
        font-weight: bold;
        margin: 15px 0;
    }

    .price-option ul {
        list-style: none;
        padding: 0;
        margin: 20px 0;
        text-align: left;
    }

    .price-option li {
        margin-bottom: 10px;
        color: #e0e0e0;
        font-size: 14px;
        padding-left: 20px;
        position: relative;
    }

    .price-option li:before {
        content: "✓";
        color: rgb(0, 255, 0);
        position: absolute;
        left: 0;
    }

    .comprar-pack-via-WhatsApp {

        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        width: 100%;
    }



    .comprar-pack-via-WhatsApp {
        background: rgba(158, 255, 158, 0.836); /*color fondo boton solicitar por twitter*/
        color: #202020; /* color texto twitter*/
    }

    .comprar-pack-via-WhatsApp:hover {
        background:rgb(223, 245, 29); /*color al seleccionar */

    }









    /* Contenedor principal que activará el efecto */
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img {
        opacity: 0;
        animation: photoCycle 3.5s infinite; /* Tiempo total del ciclo */
    }

    /* Delays personalizados */
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img:nth-child(1) { 
        animation-delay: 0s;   /* Inmediato */
    }
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img:nth-child(2) { 
        animation-delay: 0s;   /* 0s */
    }
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img:nth-child(3) { 
        animation-delay: 0.7s; /* 0.7s */
    }
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img:nth-child(4) { 
        animation-delay: 1.4s; /* 1.4s */
    }
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img:nth-child(5) { 
        animation-delay: 2.1s; /* 2.1s */
    }
    .video-container-full-video-gallery:hover .video-miniatura .multi-photo-container img:nth-child(6) { 
        animation-delay: 2.8s; /* 2.8s */
    }

    /* El resto del CSS se mantiene igual */
    .video-miniatura {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
    }

    .multi-photo-container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .multi-photo-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    /* Mostrar primera foto al inicio */
    .multi-photo-container img:first-child {
        opacity: 1;
    }

    /* Keyframes para la animación */
    @keyframes photoCycle {
        0%, 20% { opacity: 1; }   /* Visible 20% del ciclo */
        25%, 100% { opacity: 0; } /* Transición más rápida */
    }








    /* Contenedor de metadatos (cámara y participantes) */
    .video-meta-info {
        position: absolute;
        top: 10px; /* Posición debajo del número de video */
        right: 10px;
        display: flex;
        gap: 8px;
        z-index: 2; /* Asegura que esté sobre la miniatura */
    }

    /* Estilo base para ambos badges */
    .tipo-camara,
    .participantes {
        background: rgba(255, 255, 255, 0.95); /* Fondo semi-transparente */
        padding: 4px 10px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(2px); /* Efecto de vidrio (opcional) */
    }

    /* Estilo específico para tipo de cámara */
    .tipo-camara {
        color: #2c3e50; /* Azul oscuro */
        border: 1px solid #e0e0e0;
    }


    /* Efecto hover (opcional) */
    .tipo-camara:hover,
    .participantes:hover {
        transform: scale(1.05);
        transition: transform 0.2s ease;
    }





        .whatsapp-container {
            margin-top: 20px;
            text-align: center; /* Opcional: centrar el botón */
        }
        
        .whatsapp-button {
            background-color: #25D366;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
        }
        
        .whatsapp-button:hover {
            background-color: #128C7E;
            transform: scale(1.02);
        }
        
        .whatsapp-icon {
            width: 18px;
            height: 18px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>');
            margin-right: 6px;
        }





        












    /* ===== BOTONES "CABINA ROJA" CON EFECTO NEON ===== */
    .botonesNavFotoDestacada {
        position: absolute;
        top: 45%;
        transform: translateY(-40%);
        width: 50px;
        height: 100px;
        margin: 0;
        padding: 0;
        border: none;
        background: linear-gradient(
            135deg, 
            rgba(255, 0, 0, 0.473) 0%,
            rgba(40, 0, 0, 0.8) 100%
        );
        backdrop-filter: blur(12px) brightness(1.2);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        box-shadow: 
            0 5px 15px rgba(0, 0, 0, 0.5),
            0 0 10px rgba(255, 20, 147, 0.3) inset;
        opacity: 0.6;
        border: 1px solid rgba(255, 20, 147, 0.4);
    }

    /* Posicionamiento */
    .btnIzquierda {
        left: 25px;
    }

    .btnDerecha {
        right: 25px;
    }

    /* Efectos hover */
    .botonesNavFotoDestacada:hover {
        background: linear-gradient(
            135deg, 
            rgba(30, 30, 30, 0.8) 0%,
            rgba(60, 0, 0, 0.9) 100%
        );
        transform: translateY(-50%) scale(1.04);
        box-shadow: 
            0 7px 25px rgba(0, 0, 0, 0.6),
            0 0 15px rgba(255, 20, 147, 0.5) inset,
            0 0 25px rgba(255, 105, 180, 0.7);
        border: 1px solid rgba(255, 20, 147, 0.7);
    }

    /* Flechas neon */
    .botonesNavFotoDestacada::before {
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        border: 2px solid #ffffff;
        box-sizing: border-box;
        transition: all 0.3s ease;
        filter: drop-shadow(0 0 5px #ff1493) brightness(1.2);
    }

    /* Flecha izquierda */
    .btnIzquierda::before {
        border-right: none;
        border-top: none;
        transform: rotate(45deg);
        margin-right: -13px;
    }

    /* Flecha derecha */
    .btnDerecha::before {
        border-left: none;
        border-bottom: none;
        transform: rotate(45deg);
        margin-left: -13px;
    }

    /* Animación hover */
    .btnIzquierda:hover::before {
        transform: rotate(45deg) translateX(-5px);
        filter: drop-shadow(0 0 8px #ff1493) brightness(1.5);
    }

    .btnDerecha:hover::before {
        transform: rotate(45deg) translateX(5px);
        filter: drop-shadow(0 0 8px #ff1493) brightness(1.5);
    }

    /* Efecto de pulso neon al hacer hover */
    .botonesNavFotoDestacada:hover::before {
        animation: neonPulse 1.5s infinite alternate;
    }

    .botonesNavFotoDestacada {
        position: absolute;
        /* ...otros estilos... */
        font-size: 0; /* Oculta el carácter HTML */
    }


    /* Responsive */
    @media screen and (min-width: 768px) {
        .botonesNavFotoDestacada {
            width: 65px;
            height: 100px;
            
        }
        
        .btnIzquierda {
            left: 25px;
        }
        
        .btnDerecha {
            right: 25px;
        }
    }

    @media screen and (max-width: 480px) {
        .botonesNavFotoDestacada {
            width: 50px;
            height: 100px;
        }
        
        .btnIzquierda {
            left: 10px;
        }
        
        .btnDerecha {
            right: 10px;
        }
    }
    /* ===== FIN - BOTONES "CABINA ROJA" CON EFECTO NEON ===== */



    /* estilo para el autor de la musica */
    .video-musica {
        margin-top: 8px;              /* separacion del texto */
        font-size: 14px;              /* un poco más legible */
        font-style: normal;           /* quitamos cursiva */
        color: #bbb;                  /* gris claro, no tan apagado */
        display: flex;                /* ícono y texto alineados */
        align-items: center;
        justify-content: flex-end;    /* alineado a la derecha */
        gap: 5px;                     /* espacio entre 🎶 y el texto */
        padding: 2%;
    }

    .video-musica .autor-musica {
        font-weight: 500;             /* resalta un poco el autor */
        color: #ff4fa1;                /* blanco para contraste */
    }


    /* ===== REPRODUCTOR DE VIDEO MEJORADO ===== */
.video-player-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(255, 0, 0, 0.3);
    border: 2px solid rgba(255, 51, 0, 0.6);
}

.video-pack-player {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.video-pack-player:focus {
    outline: 2px solid rgba(247, 204, 64, 0.8);
    outline-offset: -2px;
}

/* Estilos para los controles del video nativo */
.video-pack-player::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.video-pack-player::-webkit-media-controls-play-button,
.video-pack-player::-webkit-media-controls-volume-slider,
.video-pack-player::-webkit-media-controls-mute-button {
    filter: brightness(0) invert(1);
}

.video-info {
    padding: 20px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.video-description {
    margin-bottom: 15px;
}

.video-description p {
    margin: 0;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.video-description strong {
    color: rgba(247, 204, 64, 0.95);
    font-weight: 600;
}

.video-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 51, 0, 0.3);
}

.video-duration,
.video-quality,
.video-camera {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(182, 182, 182, 0.9);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Efectos hover para los elementos de metadata */
.video-duration:hover,
.video-quality:hover,
.video-camera:hover {
    background: rgba(255, 51, 0, 0.3);
    color: #fff;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .video-player-wrapper {
        margin: 0 10px;
        border-radius: 8px;
    }
    
    .video-info {
        padding: 15px;
    }
    
    .video-meta {
        gap: 10px;
    }
    
    .video-duration,
    .video-quality,
    .video-camera {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* Estados del reproductor */
.video-pack-player.loading {
    opacity: 0.7;
    filter: blur(1px);
}

.video-pack-player.playing {
    box-shadow: 0 0 20px rgba(247, 204, 64, 0.4);
}

/* Estilos para el reproductor de video */
.video-player-container {
    max-width: 800px;
    margin: 20px auto;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
}

.video-player-container video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.video-info {
    padding: 20px;
    color: #fff;
}

.video-title {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 600;
}

.video-description {
    color: #ccc;
    line-height: 1.5;
    font-size: 0.95em;
}

/* Estilos responsivos para el video */
@media (max-width: 768px) {
    .video-player-container {
        margin: 15px;
        border-radius: 8px;
    }
    
    .video-info {
        padding: 15px;
    }
    
    .video-title {
        font-size: 1.2em;
    }
}

/* Mejoras para los controles del video */
.video-player-container video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.video-player-container video::-webkit-media-controls-play-button,
.video-player-container video::-webkit-media-controls-volume-slider,
.video-player-container video::-webkit-media-controls-timeline {
    filter: invert(0.8);
}


/* ==================== HEADER ==================== */
/* ==================== HEADER ==================== */
.container {
    display: flex;
    flex-direction: column;        /* Dos filas */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 5% !important;
    background: #000;
    box-sizing: border-box;
    gap: 8px;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
}

.pack-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pack-link {
    text-decoration: none;
    color: rgb(255, 205, 96);
}

.fototecaTitulo-Header {
    font-size: 1 rem;
    font-weight: bold;
    white-space: nowrap;
    color: rgb(84, 255, 84);
}

.pack-titulo {
    font-size: 1 rem;
    color: rgb(255, 255, 255);
    white-space: nowrap;
}

/* Navegación centrada */
nav {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    padding: 4px 0;
}

nav a:hover {
    color: rgb(255, 205, 96);
}

/* Responsive */
@media (max-width: 900px) {
    .container {
        padding: 12px 10px;
    }
    nav {
        gap: 15px;
    }
}