/* ==========================================================================
   Galería con visor — galeria.svg / galeria.pdf, medido a escala 1:1

   Medidas del diseño:
     hero        824 × 417  (ratio 1.9760)  radio 40
     miniatura   190.687²   (se usa 191)    radio 20
     gutter      20 en todo: entre miniaturas, hero→miniaturas y flecha→contenido
     flecha      50 × 50, negro 70%, aro interior blanco 50% de 2px
     activa      borde #8DB522 de 2px
     ancho total 824 + 2*(20 + 50) = 964

   ⚠️ ESPECIFICIDAD — todo anclado a `.tg-galeria`: el kit de Elementor trae reglas (0,1,1)
   como `.elementor-kit-6 h2 {font-size:20px}` y `.elementor img {height:auto}` que le ganan
   a cualquier selector de una sola clase. Un `.tg-galeria__title` a secas saldría a 20px y
   las fotos no llenarían su caja.

   ⚠️ Se declaran font-style/color/font-size aunque parezcan innecesarios: el reset del tema
   los hereda (pasó con figcaption en v1.4.2).
   ========================================================================== */

.tg-galeria {
    --tg-gutter: 20px;
    --tg-flecha: 50px;
    --tg-radio-hero: 40px;
    --tg-radio-thumb: 20px;
    --tg-verde: #8DB522;

    /*
     * El shortcode escribe `--tg-visibles-escritorio` como estilo INLINE, no `--tg-visibles`.
     * Un inline gana a cualquier regla de hoja de estilos, incluidas las media queries: si el
     * atributo del shortcode escribiera `--tg-visibles` directamente, las miniaturas se
     * quedarían en 4 también en móvil. Aquí se copia a la variable que sí pueden pisar.
     */
    --tg-visibles: var(--tg-visibles-escritorio, 4);

    padding: 0;
    background: transparent;
}

.tg-galeria *,
.tg-galeria *::before,
.tg-galeria *::after {
    box-sizing: border-box;
}

/*
 * ⚠️ El atributo `hidden` NO basta en este tema.
 *
 * Su reset trae `[type="button"],[type="submit"],button { display:inline-block }`, que alcanza a
 * un `<button type="button">` con especificidad (0,1,0) — **la misma** que `[hidden]{display:none}`
 * — y va más abajo en la hoja, así que gana. Y con `position:absolute` encima, ese `inline-block`
 * se blockifica. El botón de play salía sobre fotos que no son video (visto en producción el
 * 2026-08-04, popup de /landing-corporativa/).
 *
 * Por eso todo lo que se oculte con `hidden` dentro del componente necesita regla propia.
 */
.tg-galeria .tg-galeria__play[hidden],
.tg-galeria .tg-galeria__nav[hidden],
.tg-galeria [hidden] {
    display: none;
}

/*
 * Ancho máximo del bloque. El diseño da 964 (824 de hero + flecha y gutter a cada lado), pero
 * el resto del sitio usa contenedores de 1246, así que a 964 la galería se ve estrecha en
 * escritorio. Se deja parametrizable con el atributo `ancho` del shortcode: todo lo demás es
 * proporcional, así que sube o baja en bloque sin romper ninguna proporción.
 */
.tg-galeria .tg-galeria__container {
    width: min(var(--tg-ancho, 964px), 100%);
    margin: 0 auto;
}

/* --- Encabezado (opcional) --- */
.tg-galeria .tg-galeria__header {
    /* Alineado con el hero, no con las flechas */
    margin: 0 calc(var(--tg-flecha) + var(--tg-gutter)) 24px;
}

.tg-galeria .tg-galeria__pill {
    display: table;
    margin: 0 0 16px;
    padding: 6px 18px;
    border-radius: 999px;
    background: #EBF2D8;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--tg-verde);
}

.tg-galeria .tg-galeria__title {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-size: 36px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    color: #191919;
}

/* --- Hero --------------------------------------------------------------- */
.tg-galeria .tg-galeria__hero {
    position: relative;
    /* Los 70px son flecha (50) + gutter (20): así el hero queda a ras de las miniaturas */
    margin: 0 calc(var(--tg-flecha) + var(--tg-gutter));
    aspect-ratio: 824 / 417;
    border-radius: var(--tg-radio-hero);
    overflow: hidden;
    background: #112020;
}

.tg-galeria .tg-galeria__hero-img {
    display: block;
    width: 100%;
    /* `height` explícito: `.elementor img {height:auto}` (0,1,1) gana a una sola clase */
    height: 100%;
    max-width: none;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

/* Overlay negro al 40%: en el diseño solo lo llevan los elementos de video, para que el
   botón de play se lea. Las fotos van limpias. */
.tg-galeria .tg-galeria__hero-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.tg-galeria .tg-galeria__hero--video .tg-galeria__hero-overlay {
    opacity: .4;
}

.tg-galeria .tg-galeria__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 89px;
    height: 89px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.tg-galeria .tg-galeria__play:hover,
.tg-galeria .tg-galeria__play:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
}

.tg-galeria .tg-galeria__play-icono {
    display: block;
    width: 100%;
    height: 100%;
}

/* El reproductor tapa la portada cuando se pulsa play */
.tg-galeria .tg-galeria__reproductor {
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
}

.tg-galeria .tg-galeria__hero.is-reproduciendo .tg-galeria__reproductor {
    display: block;
}

.tg-galeria .tg-galeria__reproductor iframe,
.tg-galeria .tg-galeria__reproductor video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* El video es 16:9 y la caja 1.976:1 — `contain` deja las franjas arriba y abajo en vez
       de recortar la imagen. Decidido así para respetar el alto del diseño. */
    object-fit: contain;
    background: #000;
}

/* --- Carrusel ----------------------------------------------------------- */
.tg-galeria .tg-galeria__carrusel {
    position: relative;
    display: flex;
    align-items: center;      /* centra las flechas con la fila, que en el SVG no lo estaban */
    gap: var(--tg-gutter);
    margin-top: var(--tg-gutter);
}

.tg-galeria .tg-galeria__nav {
    flex: 0 0 var(--tg-flecha);
    width: var(--tg-flecha);
    height: var(--tg-flecha);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Aro interior de 2px al 50% sobre disco negro al 70%, como el SVG */
    border: 2px solid rgba(255, 255, 255, .5);
    background: rgba(0, 0, 0, .7);
    color: #FBFBFB;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.tg-galeria .tg-galeria__nav:hover:not(:disabled) {
    background: rgba(0, 0, 0, .85);
}

/* .5 y no .35: por debajo de eso el disco se aclara tanto que parece un fallo de render en
   vez de un botón deshabilitado. */
.tg-galeria .tg-galeria__nav:disabled {
    opacity: .5;
    cursor: default;
}

.tg-galeria .tg-galeria__nav[hidden] {
    display: none;
}

/*
 * Sin flechas (menos elementos que huecos visibles), la pista se quedaría con el contenedor
 * entero: las miniaturas salían a 226 en vez de 191 y la fila empezaba 70px a la izquierda del
 * hero. El carrusel recibe el mismo margen lateral que el hero para que sigan a ras.
 */
.tg-galeria.tg-galeria--sin-nav .tg-galeria__carrusel {
    margin-left: calc(var(--tg-flecha) + var(--tg-gutter));
    margin-right: calc(var(--tg-flecha) + var(--tg-gutter));
}

.tg-galeria .tg-galeria__chevron {
    display: block;
    width: 24px;
    height: 24px;
}

.tg-galeria .tg-galeria__pista {
    flex: 1 1 auto;
    min-width: 0;             /* sin esto el flex item no encoge y la fila desborda */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (100% - (var(--tg-visibles) - 1) * var(--tg-gutter)) / var(--tg-visibles)
    );
    gap: var(--tg-gutter);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tg-galeria .tg-galeria__pista::-webkit-scrollbar {
    display: none;
}

/* --- Miniatura ---------------------------------------------------------- */
.tg-galeria .tg-galeria__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: var(--tg-radio-thumb);
    overflow: hidden;
    background: #112020;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-appearance: none;
    appearance: none;
}

.tg-galeria .tg-galeria__thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    transition: transform .3s ease;
}

.tg-galeria .tg-galeria__thumb:hover .tg-galeria__thumb-img {
    transform: scale(1.05);
}

.tg-galeria .tg-galeria__thumb-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .4;
    pointer-events: none;
}

.tg-galeria .tg-galeria__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
}

.tg-galeria .tg-galeria__thumb-play .tg-galeria__play-icono {
    width: 100%;
    height: 100%;
}

/* Borde verde de 2px por dentro, como el rect interior del SVG (rx 19 sobre rx 20) */
.tg-galeria .tg-galeria__thumb.is-activa::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--tg-verde);
    border-radius: var(--tg-radio-thumb);
    pointer-events: none;
}

.tg-galeria .tg-galeria__thumb:focus-visible {
    outline: 2px solid var(--tg-verde);
    outline-offset: 3px;
}

/* Lectores de pantalla: mismo nombre que usa el core */
.tg-galeria .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Tablet ≤768 -------------------------------------------------------- */
@media (max-width: 768px) {
    .tg-galeria {
        --tg-gutter: 12px;
        --tg-flecha: 36px;
        --tg-radio-hero: 26px;
        --tg-radio-thumb: 14px;
        --tg-visibles: 3;
    }

    .tg-galeria .tg-galeria__container {
        width: calc(100% - 32px);
    }

    /*
     * Las flechas siguen FUERA de la pista, solo que más pequeñas.
     *
     * Antes se superponían a los extremos de la fila para no gastar ancho, y tapaban media
     * miniatura: a 390px el disco de 40px caía justo encima de la primera foto. Ocupar
     * 2×(36+12) = 96px de 736 es mucho menos malo que esconder contenido.
     */
    .tg-galeria .tg-galeria__hero {
        margin: 0 calc(var(--tg-flecha) + var(--tg-gutter));
    }

    .tg-galeria .tg-galeria__play {
        width: 62px;
        height: 62px;
    }

    .tg-galeria .tg-galeria__title {
        font-size: 28px;
    }

    .tg-galeria .tg-galeria__header {
        margin: 0 calc(var(--tg-flecha) + var(--tg-gutter)) 20px;
    }
}

/* --- Mobile ≤480 -------------------------------------------------------- */
@media (max-width: 480px) {
    .tg-galeria {
        --tg-gutter: 10px;
        --tg-visibles: 2;
        --tg-radio-hero: 20px;
        --tg-radio-thumb: 12px;
    }

    /*
     * Sin flechas: aquí es táctil y la pista ya se desliza con el dedo (`overflow-x:auto` +
     * `scroll-snap`). Mantenerlas costaría ~96px de 358 y dejaría las miniaturas por debajo
     * de 120px. El JS las tolera: comprueba que existan antes de tocarlas.
     */
    .tg-galeria .tg-galeria__nav {
        display: none;
    }

    /* A este ancho no hay flechas nunca, así que nada lleva margen lateral. La regla de
       `--sin-nav` es (0,3,0): esta la iguala para poder pisarla. */
    .tg-galeria .tg-galeria__hero,
    .tg-galeria .tg-galeria__header,
    .tg-galeria.tg-galeria--sin-nav .tg-galeria__carrusel,
    .tg-galeria.tg-galeria--sin-nav .tg-galeria__hero {
        margin-left: 0;
        margin-right: 0;
    }

    .tg-galeria .tg-galeria__play {
        width: 48px;
        height: 48px;
    }

    .tg-galeria .tg-galeria__thumb-play {
        width: 24px;
        height: 24px;
    }

    .tg-galeria .tg-galeria__title {
        font-size: 24px;
    }
}

/* --- Accesibilidad ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .tg-galeria .tg-galeria__pista {
        scroll-behavior: auto;
    }

    .tg-galeria .tg-galeria__thumb-img,
    .tg-galeria .tg-galeria__play,
    .tg-galeria .tg-galeria__hero-overlay {
        transition: none;
    }

    .tg-galeria .tg-galeria__thumb:hover .tg-galeria__thumb-img {
        transform: none;
    }
}