/* Galería MSN en acción: archivo independiente de style.css */

.galeria {
    padding: clamp(70px, 9vw, 140px) 0 clamp(70px, 7vw, 105px);
    overflow: hidden;
    background: #1E1E24;
    color: #FFFFFF;
}

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

.galeria .contenedor {
    width: min(1200px, calc(100% - 40px));
    min-width: 0;
    margin-inline: auto;
}

/* Cabecera */
.galeria-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 38px;
}

.galeria-cabecera>div {
    min-width: 0;
}

.galeria-cabecera .etiqueta {
    margin: 0 0 14px;
    color: #C5A059;
}

.galeria-cabecera h2 {
    margin: 0;
    color: #FFFFFF;
    font-family: Manrope, sans-serif;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1.05;
    letter-spacing: -.06em;
    overflow-wrap: break-word;
}

.galeria-cabecera h2 em {
    color: #C5A059;
    font-style: normal;
}

.galeria-cabecera>p {
    max-width: 315px;
    flex: 0 1 315px;
    margin: 0 0 6px;
    color: #A0A5AB;
    line-height: 1.65;
}

/* Filtros */
.galeria-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 24px;
}

.galeria-filtros button {
    min-height: 42px;
    padding: 10px 19px;
    border: 1px solid #7E5233;
    border-radius: 100px;
    background: transparent;
    color: #E7E8EA;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background .2s,
        color .2s,
        border-color .2s;
}

.galeria-filtros button:hover {
    border-color: #C5A059;
}

.galeria-filtros button:focus-visible {
    border-color: #C5A059;
    outline: 2px solid #C5A059;
    outline-offset: 3px;
}

.galeria-filtros button.activo {
    border-color: #C5A059;
    background: #C5A059;
    color: #1E1E24;
}

/* Cuadrícula */
.galeria-secuencia {
    margin: -8px 0 18px;
    padding: 13px 18px;
    border-left: 3px solid #C5A059;
    background: rgba(197, 160, 89, .09);
    color: #FFFFFF;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.5;
}

.galeria-secuencia[hidden] {
    display: none !important;
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 215px;
    gap: 14px;
    min-width: 0;
}

.galeria-card {
    position: relative;
    isolation: isolate;
    display: block;
    grid-column: span 3;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 4px;
    background: radial-gradient(circle at 75% 20%,
            #7E5233,
            #7E5233 47%,
            #1E1E24 100%);
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.galeria-card[hidden] {
    display: none !important;
}

.galeria-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background: repeating-linear-gradient(135deg,
            transparent 0 38px,
            rgba(197, 160, 89, .22) 39px,
            transparent 40px);
}

.galeria-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(30, 30, 36, .48) 0%,
            transparent 38%,
            rgba(30, 30, 36, .9) 100%);
}

.galeria-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease, filter .4s;
}

.galeria-card:hover img,
.galeria-card:focus-visible img {
    transform: scale(1.08);
    filter: saturate(1.12);
}

.galeria-card:focus-visible {
    outline: 3px solid #C5A059;
    outline-offset: 3px;
}

.galeria-card-destacada {
    grid-column: span 6;
    grid-row: span 2;
}

.galeria-card-video {
    grid-column: span 12;
}

.galeria-card-video img {
    object-position: center 48%;
}

/* Textos e iconos dentro de las tarjetas */
.galeria-card-top,
.galeria-card-bottom,
.galeria-play {
    position: absolute;
    z-index: 2;
}

.galeria-card-top {
    top: 22px;
    left: 24px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.galeria-card-bottom {
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.galeria-card-bottom strong {
    display: block;
    max-width: 85%;
    font-family: Manrope, sans-serif;
    font-size: clamp(18px, 1.6vw, 25px);
    line-height: 1.15;
    letter-spacing: -.025em;
    overflow-wrap: break-word;
}

.galeria-card-destacada .galeria-card-bottom strong {
    font-size: clamp(27px, 3vw, 43px);
}

.galeria-abrir {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border: 1px solid #ffffffa8;
    border-radius: 50%;
    font-size: 19px;
    line-height: 1;
    transition: background .2s, color .2s;
}

.galeria-card:hover .galeria-abrir,
.galeria-card:focus-visible .galeria-abrir {
    border-color: #C5A059;
    background: #C5A059;
    color: #1E1E24;
}

.galeria-play {
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    padding-left: 4px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #C5A059;
    color: #1E1E24;
    font-size: 24px;
    box-shadow: 0 0 0 10px #ffffff29;
}

.galeria-pie {
    margin: 26px 0 0;
    color: #A0A5AB;
    font-size: 13px;
    text-align: right;
}

/* Visor grande */
.galeria-visor {
    position: fixed;
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #7E5233;
    border-radius: 8px;
    background: #1E1E24;
    color: #fff;
    box-shadow: 0 30px 90px #1E1E2499;
}

.galeria-visor::backdrop {
    background: rgba(30, 30, 36, .92);
    backdrop-filter: blur(8px);
}

.galeria-visor-marco {
    position: relative;
    min-width: 0;
}

.galeria-visor-media {
    display: grid;
    place-items: center;
    height: min(76dvh, 720px);
    min-height: 220px;
    overflow: hidden;
    background: #1E1E24;
}

.galeria-visor-media img,
.galeria-visor-media video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.galeria-visor-media video {
    width: 100%;
    height: 100%;
}

.galeria-cerrar,
.galeria-anterior,
.galeria-siguiente {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    background: #1E1E24CC;
    color: #fff;
    cursor: pointer;
}

.galeria-cerrar {
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    font-size: 27px;
}

.galeria-anterior,
.galeria-siguiente {
    top: 50%;
    width: 46px;
    height: 46px;
    transform: translateY(-50%);
    font-size: 34px;
    line-height: 1;
}

.galeria-anterior {
    left: 15px;
}

.galeria-siguiente {
    right: 15px;
}

.galeria-cerrar:hover,
.galeria-anterior:hover,
.galeria-siguiente:hover,
.galeria-cerrar:focus-visible,
.galeria-anterior:focus-visible,
.galeria-siguiente:focus-visible {
    background: #7E5233;
}

.galeria-cerrar:focus-visible,
.galeria-anterior:focus-visible,
.galeria-siguiente:focus-visible {
    outline: 2px solid #C5A059;
    outline-offset: 2px;
}

.galeria-visor-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    min-height: 58px;
    padding: 12px 24px;
    font-family: Manrope, sans-serif;
}

.galeria-visor-pie strong {
    min-width: 0;
    overflow-wrap: break-word;
}

.galeria-visor-pie span {
    flex: none;
    color: #C5A059;
    font-size: 12px;
    letter-spacing: .12em;
}

/* Tablet */
@media (max-width: 850px) {
    .galeria-cabecera {
        display: block;
    }

    .galeria-cabecera>p {
        max-width: 520px;
        margin-top: 15px;
    }

    .galeria-grid {
        grid-auto-rows: 205px;
    }

    .galeria-card-destacada {
        grid-column: span 12;
        grid-row: span 2;
    }

    .galeria-card:not(.galeria-card-destacada):not(.galeria-card-video) {
        grid-column: span 6;
    }
}

/* Celular */
@media (max-width: 560px) {
    .galeria {
        padding: 70px 0;
    }

    .galeria .contenedor {
        width: min(1200px, calc(100% - 32px));
    }

    .galeria-cabecera {
        margin-bottom: 28px;
    }

    .galeria-cabecera h2 {
        font-size: clamp(38px, 10vw, 52px);
    }

    .galeria-cabecera>p {
        font-size: 14px;
    }

    .galeria-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding: 2px 2px 8px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .galeria-filtros button {
        flex: 0 0 auto;
        min-height: 44px;
    }

    .galeria-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 12px;
    }

    .galeria-card,
    .galeria-card-destacada,
    .galeria-card-video,
    .galeria-card:not(.galeria-card-destacada):not(.galeria-card-video) {
        grid-column: 1;
        grid-row: auto;
        height: auto;
        min-height: 230px;
        aspect-ratio: 4 / 3;
    }

    .galeria-card-destacada {
        min-height: 300px;
        aspect-ratio: 1 / 1;
    }

    .galeria-card-video {
        min-height: 220px;
        aspect-ratio: 16 / 10;
    }

    .galeria-card-top {
        top: 17px;
        left: 18px;
    }

    .galeria-card-bottom {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .galeria-card-bottom strong {
        font-size: clamp(20px, 5vw, 25px);
    }

    .galeria-card-destacada .galeria-card-bottom strong {
        font-size: clamp(28px, 7vw, 38px);
    }

    .galeria-pie {
        text-align: left;
    }

    .galeria-visor {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 6px;
    }

    .galeria-visor-media {
        height: min(70dvh, 620px);
        min-height: 0;
    }

    .galeria-visor-pie {
        min-height: 58px;
        padding: 12px 16px;
        font-size: 13px;
    }

    .galeria-anterior {
        left: 6px;
    }

    .galeria-siguiente {
        right: 6px;
    }

    .galeria-anterior,
    .galeria-siguiente {
        width: 40px;
        height: 40px;
        font-size: 27px;
    }
}

/* Celular en posición horizontal */
@media (max-height: 500px) {
    .galeria-visor-media {
        height: calc(100dvh - 90px);
        min-height: 0;
    }

    .galeria-visor-pie {
        min-height: 48px;
    }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {

    .galeria-card img,
    .galeria-abrir {
        transition: none;
    }
}
/* Cuatro videos reales sin filas gigantes en escritorio. */
@media (min-width: 851px) {
    .galeria-card-video { grid-column: span 3; }
}
@media (min-width: 561px) and (max-width: 850px) {
    .galeria-card-video { grid-column: span 6; }
}

/* Cuatro videos en una fila de tarjetas proporcionadas. */
@media (min-width: 851px) {
    #galeria .galeria-card-video { grid-column: span 3; }
}
@media (min-width: 561px) and (max-width: 850px) {
    #galeria .galeria-card-video { grid-column: span 6; }
}

/* Las tres etapas del tanque ocupan toda la galería al filtrar Industrial. */
@media (min-width: 851px) {
    #galeria .galeria-grid[data-filtro-activo="industrial"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: clamp(270px, 24vw, 355px);
    }

    #galeria .galeria-grid[data-filtro-activo="industrial"] .galeria-card[data-categoria="industrial"] {
        grid-column: span 1;
        grid-row: auto;
    }
}

@media (min-width: 561px) and (max-width: 850px) {
    #galeria .galeria-grid[data-filtro-activo="industrial"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 245px;
    }

    #galeria .galeria-grid[data-filtro-activo="industrial"] .galeria-card[data-categoria="industrial"] {
        grid-column: span 1;
        grid-row: auto;
    }

    #galeria .galeria-grid[data-filtro-activo="industrial"] .galeria-card[data-src$="10-resultado-tanque.jpg"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    #galeria .galeria-grid[data-filtro-activo="industrial"] {
        grid-template-columns: minmax(0, 1fr);
    }

    #galeria .galeria-grid[data-filtro-activo="industrial"] .galeria-card[data-categoria="industrial"] {
        grid-column: 1;
        grid-row: auto;
    }

    #galeria .galeria-card[data-src$="10-resultado-tanque.jpg"] {
        aspect-ratio: 16 / 10;
        min-height: 210px;
    }
}