/* =========================================
   TIPOGRAFÍAS
   ========================================= */
@font-face {
    font-family: 'Avenir Next';
    src: url('./avenir-next-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Ultralight';
    src: url('./AvenirNextCyr-UltraLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* =========================================
   ESTILOS GLOBALES
   ========================================= */
body {
    margin: 0;
    padding: 60px 0;
    background-color: #ffffff;
    font-family: 'Avenir Next', sans-serif;
    color: #1a1a1a;
    /* Evita el scroll horizontal cuando el carrusel abarca toda la pantalla */
    overflow-x: hidden;
}

/* =========================================
   CARRUSEL
   ========================================= */
.carousel-section {
    width: 100vw;
    /* Abarca todo el ancho disponible */
    max-width: 100%;
    height: 70vh;
    /* Altura adaptable a la pantalla */
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    position: relative;
    overflow: hidden;
    /* Corta las imágenes laterales que sobresalen de la pantalla */
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-img {
    position: absolute;
    /* Transición suave para el efecto de pasar de imagen */
    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
    object-fit: contain;
    /* Para mostrar la revista completa sin recortes */
    background-color: #ffffff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    /* Sombra elegante */
    border-radius: 2px;
}

/* Imagen Central (Activa) */
.carousel-img.active {
    width: 55vw;
    /* 55% del ancho de la pantalla */
    max-width: 1000px;
    /* Tope máximo en pantallas gigantes */
    height: 65vh;
    max-height: 650px;
    z-index: 3;
    opacity: 1;
    transform: translateX(0) scale(1);
    border-color: #dddddd;
    border-width: 0.5px;
}

/* Imagen a la Izquierda */
.carousel-img.prev {
    width: 45vw;
    max-width: 750px;
    height: 55vh;
    max-height: 550px;
    z-index: 2;
    opacity: 0.35;
    /* Un poco más transparente para dar protagonismo al centro */

    /* El -125% asegura que la imagen se mueva más allá del borde de la central,
       creando el padding/separación perfecto */
    transform: translateX(-120%) scale(0.9);
    cursor: pointer;
}

/* Imagen a la Derecha */
.carousel-img.next {
    width: 45vw;
    max-width: 750px;
    height: 55vh;
    max-height: 550px;
    z-index: 2;
    opacity: 0.35;

    /* Mueve la imagen a la derecha con el mismo padding */
    transform: translateX(120%) scale(0.9);
    cursor: pointer;
}

/* Imágenes ocultas detrás (en espera) */
.carousel-img.hidden {
    opacity: 0;
    z-index: 1;
    transform: scale(0.8);
    pointer-events: none;
}

/* Efecto hover para iluminar las laterales antes de hacerles clic */
.carousel-img.prev:hover,
.carousel-img.next:hover {
    opacity: 0.8;
}

/* =========================================
   GRID DE IMÁGENES (Sin Cambios)
   ========================================= */
.grid-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 1200px;
}

.grid-item {
    display: flex;
    flex-direction: column;
}

.grid-item img {
    width: 100%;
    height: 280px !important;
    object-fit: cover;
    margin-bottom: 15px;
    border: 1px solid #eaeaea;
}

.item-title {
    font-family: 'Avenir Next', sans-serif;
    font-weight: bold;
    font-size: 18px;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.item-subtitle {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    margin: 0 0 4px 0;
    color: #4a4a4a;
}

.item-meta {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    margin: 0;
    color: #7a7a7a;
}

/* =========================================
   MODAL / LIGHTBOX
   ========================================= */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f2f2f2;
    /* Fondo gris claro de tu referencia */
    z-index: 9999;
    /* Por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

/* Clase para mostrar el modal */
.lightbox.show {
    opacity: 1;
    visibility: visible;
}

body #lightbox .lightbox-close {
    position: absolute !important;
    top: 30px !important;
    right: 10px !important;
    font-size: 30px !important;
    cursor: pointer !important;
    color: #1a1a1a !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    transition: transform 0.2s !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

body #lightbox .lightbox-close:hover,
body #lightbox .lightbox-close:focus,
body #lightbox .lightbox-close:active {
    transform: scale(1.2) !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.lightbox-wrapper {
    display: flex;
    width: 90%;
    max-width: 1400px;
    height: 85vh;
    gap: 50px;
}

/* Sidebar izquierda (Textos y portada) */
.lightbox-sidebar {
    width: 250px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.lb-title {
    font-family: 'Avenir Next', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 5px 0;
}

.lb-subtitle {
    font-family: 'Avenir Next', sans-serif;
    font-size: 18px;
    margin: 0 0 30px 0;
}

.lb-credits {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    margin-bottom: auto;
    /* Empuja el resto hacia abajo */
}

.lb-credits p {
    margin: 0 0 15px 0;
}

.lb-credits strong {
    font-family: 'Avenir Next', sans-serif;
    font-weight: bold;
}

.lb-cover {
    width: 100%;
    max-width: 250px;
    height: 350px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

/* Flechas cuadrasdas de la referencia */
.lb-nav {
    display: flex;
    gap: 160px;
}

body #lightbox .lb-btn {
    width: min(2.60vw, 50px) !important;
    height: min(2.60vw, 50px) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #ddd !important;
    font-size: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #7E7E7E !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body #lightbox .lb-btn:hover {
    background: #333338 !important;
    background-color: #333338 !important;
    color: #ffffff !important;
    border-color: #333338 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body #lightbox .lb-btn svg {
    width: min(0.52vw, 10px) !important;
    height: min(1.20vw, 23px) !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body #lightbox .lb-btn svg path {
    transition: stroke 0.3s ease !important;
    stroke: #7E7E7E !important;
}

body #lightbox .lb-btn:hover svg path {
    stroke: #ffffff !important;
}


/* Imagen Principal Derecha */
.lightbox-main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 10px;
}

.lightbox-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* --- BLINDAJE TOTAL CONTRA ESTILOS DE WORDPRESS --- */
/* Eliminación forzada de bordes y sombras al hacer clic o enfocar */
body #lightbox button.lightbox-close:focus,
body #lightbox button.lightbox-close:active,
body #lightbox button.lightbox-close:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Evitar que el tema cambie el fondo al hacer clic en las flechas */
body #lightbox button.lb-btn:focus,
body #lightbox button.lb-btn:active,
body #lightbox button.lb-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #7E7E7E !important;
    border-color: #ddd !important;
    transform: none !important;
}


/* =========================================
   PAGINACIÓN (ESTILOS COMPARTIDOS CON BELT-PROJECTS)
   ========================================= */
body nav.pagination-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 40px !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

body nav.pagination-container #page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Estilos para la clase fractional-text y fractional-pagination en la paginación */
body nav.pagination-container .fractional-text,
body nav.pagination-container .fractional-pagination,
.fractional-pagination {
    font-family: 'Avenir Next', sans-serif !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #54595F !important;
    /* font-weight: bold !important; */
    min-width: 80px !important;
    text-align: center !important;
    user-select: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 12px !important;
}


/* Blindaje ultra específico contra selectores genéricos de WordPress como :[type=button] y button */
body .grid-section nav.pagination-container button.lb-btn,
body .grid-section nav.pagination-container button#btn-prev-page.lb-btn,
body .grid-section nav.pagination-container button#btn-next-page.lb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ddd !important;
    padding: 0 !important;
    /* reset padding to center the SVG! */
    margin: 0 !important;
    width: min(2.60vw, 50px) !important;
    height: min(2.60vw, 50px) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    float: none !important;
    text-transform: none !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

body .grid-section nav.pagination-container button.lb-btn svg {
    width: min(0.52vw, 10px) !important;
    height: min(1.20vw, 23px) !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body .grid-section nav.pagination-container button.lb-btn svg path {
    transition: stroke 0.3s ease !important;
    stroke: #7E7E7E !important;
}

/* Hover state for pagination buttons */
body .grid-section nav.pagination-container button.lb-btn:not(:disabled):hover {
    color: #D7D9E7 !important;
    background-color: #333338 !important;
    border-color: #333338 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body .grid-section nav.pagination-container button.lb-btn:not(:disabled):hover svg path {
    stroke: #D7D9E7 !important;
}

/* Focus and active state resets */
body .grid-section nav.pagination-container button.lb-btn:focus,
body .grid-section nav.pagination-container button.lb-btn:active {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #ddd !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Estado deshabilitado */
body .grid-section nav.pagination-container button.lb-btn:disabled {
    opacity: 0.4 !important;
    cursor: default !important;
    border-color: #eee !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

body .grid-section nav.pagination-container button.lb-btn:disabled svg path {
    stroke: #7E7E7E !important;
}

.grid-item {
    display: none;
}

.grid-item.visible {
    display: flex;
}

/* =========================================
   PUNTOS DEL CARRUSEL (DOTS INSTAGRAM)
   ========================================= */
.carousel-dots {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: center;
    gap: 8px;
    z-index: 9999;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c4c4c4;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.carousel-dot.active {
    background-color: #1a1a1a;
    transform: scale(1.3);
}

/* =========================================
   VISTA MÓVIL (MAX 768PX)
   ========================================= */
@media (max-width: 768px) {

    /* Quitamos el alto fijo gigante y le damos un padding para los dots */
    .carousel-section {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 35px !important;
        /* El espacio vital de los dots */
        margin-bottom: 25px !important;
    }

    .carousel-container {
        height: 48vh !important;
        min-height: 350px !important;
        position: relative;
    }

    /* Imagen protagonista ocupa todo el contenedor */
    .carousel-img.active {
        width: 90vw !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        top: 0;
    }

    /* Ocultar imágenes de los lados */
    .carousel-img.prev,
    .carousel-img.next {
        display: none !important;
    }

    /* Mostrar los dots en el espacio que creamos abajo */
    .carousel-dots {
        display: flex !important;
        bottom: 75px !important;
    }
}

/* =========================================
   VISTA MÓVIL: MODAL / LIGHTBOX (MAX 768PX)
   ========================================= */
@media (max-width: 768px) {

    /* Convertimos el contenedor principal en una grilla adaptable */
    .lightbox-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        /* Col 1: Textos, Col 2: Imagen pequeña */
        grid-auto-rows: min-content;
        width: 100%;
        height: 100vh;
        padding: 60px 20px 20px 20px;
        box-sizing: border-box;
        overflow-y: auto;
        /* Permite deslizar hacia abajo si el contenido es largo */
        gap: 15px;
    }

    /* "Desintegramos" el sidebar para organizar sus hijos libremente */
    .lightbox-sidebar {
        display: contents;
    }

    /* 1. Textos a la izquierda (Ocupan la columna 1, filas 1 y 2) */
    .lb-header {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    .lb-credits {
        grid-column: 1 / 2;
        grid-row: 2;
        margin-bottom: 0;
    }

    /* 2. Imagen miniatura a la derecha (Ocupa la columna 2, filas 1 y 2) */
    .lb-cover {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        width: 90px;
        /* Reducimos su tamaño para la pantalla móvil */
        margin-bottom: 0;
        align-self: end;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    /* 3. Imagen principal al medio (Ocupa de extremo a extremo en la fila 3) */
    .lightbox-main {
        grid-column: 1 / 3;
        grid-row: 3;
        padding: 0;
        box-shadow: none;
        margin-top: 15px;
    }

    .lightbox-main img {
        width: 100%;
        height: auto;
        max-height: 50vh;
        /* Para que no empuje los botones fuera de la pantalla */
    }

    /* 4. Botones de navegación abajo (Ocupan de extremo a extremo en la fila 4) */
    .lb-nav {
        grid-column: 1 / 3;
        grid-row: 4;
        justify-content: center;
        gap: 40px;
        margin-top: 10px;
        padding-bottom: 40px;
        /* Espacio extra cómodo para el pulgar */
    }

    body #lightbox .lb-btn {
        width: 45px !important;
        height: 45px !important;
    }

    /* Ajuste de la 'X' de cerrar para que sea más fácil de tocar en móviles */
    .lightbox-close {
        top: 15px;
        right: 15px;
        background: transparent !important;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 10000;
    }
}

/* =========================================
   VISTA MÓVIL: GRILLA DE REVISTAS (MAX 768PX)
   ========================================= */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr !important;
        /* Fuerza a 1 sola columna */
        width: 100% !important;
        /* Anula el ancho fijo de 1200px del escritorio */
        padding: 0 20px !important;
        /* Evita que las imágenes toquen los bordes del celular */
        box-sizing: border-box;
        gap: 30px !important;
        /* Reduce un poco el espacio vertical entre ítems */
    }

    .grid-item img {
        width: 100% !important;
        height: 280px !important;
        /* height: auto !important; */
        /* Deja que la altura se calcule sola para no deformar */
        /* max-height: 450px; */
        /* Le pone un tope para que no se vuelva gigante */
        object-fit: cover;
    }

    /* Paginación y navegación en móviles */
    body .grid-section nav.pagination-container button.lb-btn,
    body #lightbox .lb-btn {
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
    }

    body .grid-section nav.pagination-container button.lb-btn svg,
    body #lightbox .lb-btn svg {
        width: 10px !important;
        height: 23px !important;
    }
}

/* =========================================
   FULLSCREEN ZOOM (IMAGEN PRINCIPAL Y MINIATURA)
   ========================================= */
#lb-main-img,
#lb-cover-img {
    cursor: zoom-in;
    /* Le indica al usuario que puede hacer clic para ampliar */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.fullscreen-zoom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    /* Por encima de cualquier modal o menú */
    background-color: rgba(0, 0, 0, 0.95) !important;
    /* Fondo casi negro */
    object-fit: contain !important;
    cursor: zoom-out !important;
    /* Cambia el cursor para indicar que al hacer clic se cierra */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;

    /* ¡Magia para móviles! Permite deslizar y hacer el gesto de pinza nativo */
    touch-action: pan-x pan-y pinch-zoom !important;
}

/* Blindaje extremo contra reset.css de Elementor / Tema */
body #grid-pagination button[type="button"].lb-btn:not(:disabled):hover,
body #grid-pagination button[type="button"].lb-btn:not(:disabled):focus {
    background-color: #333338 !important;
    border-color: #333338 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

body #grid-pagination button[type="button"].lb-btn:not(:disabled):hover svg path,
body #grid-pagination button[type="button"].lb-btn:not(:disabled):focus svg path {
    stroke: #ffffff !important;
}

/* Forzar que el texto fraccionario NUNCA cambie al hacer hover */
body nav.pagination-container span.fractional-pagination:hover,
body .grid-section span.fractional-pagination:hover,
span.fractional-pagination:hover {
    background-color: transparent !important;
    color: #54595F !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
}