/* =====================================================
   ICE - Galería (componente compartido)
   Carrusel de fotos y de videos, controles con barra de progreso
   y visor (lightbox). Se usa con js/galeria.js.

   Requiere los tokens de css/estilo-index.css.
   Uso: ver tecnicaturas/index.php (clases gal-*, atributos data-gal-carrusel / data-lightbox).
   ===================================================== */

/* ---------- Carrusel (fotos y videos) ---------- */
.gal-carrusel { --ver: 5; --sep: 16px; position: relative; }

.gal-carrusel__pista {
    display: flex;
    gap: var(--sep);
    padding: 8px 2px 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.gal-carrusel__pista::-webkit-scrollbar { display: none; }
.gal-carrusel__pista.is-arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.gal-carrusel__pista.is-arrastrando * { pointer-events: none; }
.gal-carrusel__pista > * {
    flex: 0 0 calc((100% - (var(--ver) - 1) * var(--sep)) / var(--ver));
    scroll-snap-align: start;
}

/* Controles: flecha, barra de progreso, flecha */
.gal-controles { display: flex; align-items: center; justify-content: center; gap: 20px; }
.gal-controles__flecha {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: var(--azul);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 50%;
    box-shadow: var(--sombra-s);
    transition: background .2s, color .2s, transform .2s var(--ease);
}
.gal-controles__flecha:hover { background: var(--naranja); transform: scale(1.08); }
.gal-controles__flecha:active { transform: scale(.94); }

.gal-progreso {
    position: relative;
    flex: 1;
    max-width: 420px;
    height: 6px;
    overflow: hidden;
    background: rgba(28, 52, 96, .14);
    border-radius: 999px;
}
.gal-progreso__barra {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 30%;
    background: var(--naranja);
    border-radius: 999px;
    transition: left .15s linear, width .2s;
}

.gal-carrusel--claro .gal-controles__flecha { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); box-shadow: none; }
.gal-carrusel--claro .gal-controles__flecha:hover { color: var(--azul); background: var(--naranja); }
.gal-carrusel--claro .gal-progreso { background: rgba(255, 255, 255, .22); }

/* ---------- Tarjetas de foto ---------- */
.gal-carrusel--fotos { --ver: 5; --sep: 14px; }

.gal-foto {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #dfe6f2;
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-s);
}
.gal-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.gal-foto::after {                              /* lupa al pasar el mouse */
    content: '\f00e';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(28, 52, 96, .35), rgba(28, 52, 96, .7));
    opacity: 0;
    transition: opacity .3s;
}
.gal-foto:hover img { transform: scale(1.1); }
.gal-foto:hover::after,
.gal-foto:focus-visible::after { opacity: 1; }

/* ---------- Tarjetas de video (testimonios) ---------- */

.gal-carrusel--videos { --ver: 4; --sep: 22px; }
.gal-carrusel--videos .gal-carrusel__pista { padding-bottom: 56px; margin-bottom: -28px; }   /* espacio para que no se recorte la sombra */

/* Tarjetas verticales: se recorta al centro, que es donde está el video real (los bordes son fondo borroso) */
.gal-video {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radio-l);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.gal-video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s var(--ease);
}
.gal-video:hover img { transform: scale(1.06); }
.gal-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 26, 51, .1) 0%, rgba(13, 26, 51, 0) 35%, rgba(13, 26, 51, .6) 100%);
}
.gal-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    padding-left: 4px;
    font-size: 1.5rem;
    color: var(--azul);
    background: var(--naranja);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(241, 155, 36, .25), 0 12px 32px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.gal-video:hover .gal-video__play { background: #fff; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 14px rgba(255, 255, 255, .25), 0 12px 32px rgba(0, 0, 0, .5); }

/* ---------- Visor (lightbox) ---------- */
.gal-visor {
    width: min(1100px, 94vw);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    overflow: visible;
    color: #fff;
    background: transparent;
    border: 0;
}
.gal-visor::backdrop { background: rgba(8, 16, 32, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gal-visor[open] { display: flex; align-items: center; justify-content: center; }

.gal-visor__contenido { display: grid; place-items: center; width: 100%; }
.gal-visor__contenido img {
    display: block;
    max-width: 100%;
    max-height: 84vh;
    width: auto;
    height: auto;
    border-radius: var(--radio-m);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.gal-visor__contenido .gal-visor__video {         /* los testimonios son verticales */
    width: min(92vw, calc(min(86vh, 780px) * 9 / 16));   /* el ancho se deduce del alto disponible para mantener 9:16 */
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
    border-radius: var(--radio-m);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.gal-visor__contenido iframe { display: block; width: 100%; height: 100%; border: 0; }

.gal-visor__cerrar,
.gal-visor__flecha {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 1.05rem;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .2s, color .2s;
}
.gal-visor__cerrar:hover,
.gal-visor__flecha:hover { color: var(--azul); background: #fff; }
.gal-visor__cerrar { top: -56px; right: 0; }
.gal-visor__flecha { top: 50%; transform: translateY(-50%); }
.gal-visor__flecha--prev { left: 10px; }
.gal-visor__flecha--next { right: 10px; }
.gal-visor__flecha[hidden],
.gal-visor.es-video .gal-visor__flecha { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .gal-carrusel--fotos { --ver: 4; }
    .gal-carrusel--videos { --ver: 3; --sep: 18px; }
}

@media (max-width: 767px) {
    .gal-carrusel--fotos { --ver: 2; --sep: 10px; }
    .gal-carrusel--videos { --ver: 1.25; --sep: 14px; }
    .gal-controles__flecha { width: 46px; height: 46px; }

    .gal-visor__cerrar { top: -54px; right: 4px; }
    .gal-visor__flecha--prev { left: 4px; }
    .gal-visor__flecha--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .gal-foto:hover img,
    .gal-video:hover img { transform: none; }
}