/* LocationsGallery.css — Sección "Dónde estamos": una tarjeta por sede con su galería de fotos.
   Nodos 2695:59926 (PC, mesa de 1280), 2695:59162 (tablet, mesa de 768) y 2695:59327 (mobile, 375).
   PC: dos tarjetas por fila, foto principal y dos miniaturas. TABLET: una por fila, igual que PC.
   MOBILE: solo la foto principal, con el botón "Ver galería". Visor de la galería: nodo 2695:60225.
   Tipografía base: site.css. */

/* --- Sección. --- */
.LocationsGallery {
    --LocationsGallery-ink: #0f0f12; /* Casi negro del diseño. */
    --LocationsGallery-accent: #429cde; /* Celeste del enlace principal y del botón de mobile. */
    --LocationsGallery-navy: #243746; /* Azul noche de la etiqueta. */
    --LocationsGallery-line: rgba(15, 15, 18, 0.1); /* Contorno de la tarjeta. */
    --LocationsGallery-media-height: 180px; /* Alto de la franja de fotos del nodo. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding: 56px 48px; /* Relleno del nodo de PC. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--LocationsGallery-ink); /* Color base del texto. */
}

    .LocationsGallery *,
    .LocationsGallery *::before,
    .LocationsGallery *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .LocationsGallery p,
    .LocationsGallery h2,
    .LocationsGallery h3,
    .LocationsGallery ul {
        margin: 0; /* El espaciado lo ponen los contenedores. */
    }

    .LocationsGallery ul {
        padding: 0; /* Sin sangría de lista. */
        list-style: none; /* Sin viñetas. */
    }

/* Contenido centrado dentro del techo del sitio. */
.LocationsGallery-container {
    display: flex; /* Encabezado y grilla apilados. */
    flex-direction: column; /* En columna. */
    gap: 24px; /* Separación del nodo. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Encabezado: etiqueta y título a la izquierda, conteo abajo a la derecha. --- */
.LocationsGallery-header {
    display: flex; /* Bloque del título y conteo en una fila. */
    align-items: flex-end; /* El conteo a la altura del pie del título. */
    justify-content: space-between; /* Cada uno a su borde. */
    gap: 16px; /* Aire mínimo si se acercan. */
}

.LocationsGallery-heading {
    display: flex; /* Etiqueta y título apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 9px; /* Separación del nodo. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Etiqueta con el cuadrado de marca. */
.LocationsGallery-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: flex-start; /* Cuadrado arriba si el texto parte renglón. */
    gap: 10px; /* Separación del nodo. */
}

.LocationsGallery-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    margin-top: 6px; /* Centrado en el primer renglón: (14 x 1,35 - 7) / 2. */
    background-color: var(--LocationsGallery-navy); /* Azul noche del nodo. */
}

.LocationsGallery-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--LocationsGallery-navy); /* Azul noche del nodo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

.LocationsGallery-title {
    font-size: clamp(28px, 2.6563vw, 34px); /* 34 del nodo desde 1280 (34 / 1280 * 100). */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* -0,68px del nodo. */
    color: var(--LocationsGallery-ink); /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* "5 ciudades": discreto. */
.LocationsGallery-count {
    flex-shrink: 0; /* No parte renglón. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    color: rgba(15, 15, 18, 0.4); /* Gris del nodo. */
    white-space: nowrap; /* En una línea. */
}

/* --- Grilla: dos tarjetas por fila, cada fila del alto de su tarjeta más alta. --- */
.LocationsGallery-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 581 + 581 del nodo. */
    gap: 20px; /* Separación del nodo. */
}

/* --- Tarjeta. --- */
.LocationsGallery-card {
    display: flex; /* Fotos y datos apilados. */
    flex-direction: column; /* En columna. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    overflow: hidden; /* Recorta las fotos a las esquinas. */
    background-color: #ffffff; /* Blanco. */
    border: 1px solid var(--LocationsGallery-line); /* Contorno del nodo. */
    border-radius: 14px; /* Esquinas del nodo. */
}

    /* Sedes de otras páginas: el atributo gana al display:flex de la tarjeta. */
    .LocationsGallery-card[hidden] {
        display: none;
    }

/* --- Paginación (más sedes que las de una página): "Página 1 de 2 · ‹ Anterior | Siguiente ›".
   Mismo patrón y estilo que DocumentLibrary. Igual en PC, tablet y mobile. Reemplaza a la carga al
   hacer scroll. --- */
.LocationsGallery-pager {
    display: flex; /* Estado y leyendas en una sola fila. */
    flex-wrap: wrap; /* En un ancho muy chico las leyendas bajan en lugar de salirse. */
    align-items: center; /* Centrados verticalmente. */
    justify-content: space-between; /* Estado a la izquierda, leyendas a la derecha. */
    gap: 4px 16px; /* Separación mínima al envolver. */
    margin-top: 20px; /* Aire con la última fila de sedes. */
    padding-top: 12px; /* Ídem. */
    border-top: 1px solid var(--LocationsGallery-line); /* Divisor. */
}

    .LocationsGallery-pager[hidden] {
        display: none; /* Sin script no se pinta. */
    }

/* "Página 1 de 2": discreto. */
.LocationsGallery-pager-status {
    margin: 0; /* Sin margen propio. */
    font-size: 12px; /* Pequeño: no satura. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al cambiar de página. */
    letter-spacing: 0.2px; /* Apertura leve. */
    color: rgba(15, 15, 18, 0.5); /* Gris del diseño. */
}

.LocationsGallery-pager-actions {
    display: flex; /* Leyendas en línea. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha. */
    gap: 12px; /* Separación entre leyendas. */
    margin-left: auto; /* Quedan a la derecha aunque la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. */
.LocationsGallery-pager-button {
    display: inline-flex; /* Texto e ícono en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto e ícono. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 8px 2px; /* Zona de toque cómoda sin caja visible. */
    border: 0; /* Sin contorno. */
    background: transparent; /* Sin fondo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 14px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    color: var(--LocationsGallery-accent); /* Celeste del enlace principal. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease; /* Respuesta suave. */
}

    /* Con las dos leyendas visibles, una barra las separa. */
    .LocationsGallery-pager-button:not([hidden]) ~ .LocationsGallery-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .LocationsGallery-pager-button[hidden] {
        display: none; /* En el extremo, la leyenda que no aplica no se ve. */
    }

    .LocationsGallery-pager-button:hover,
    .LocationsGallery-pager-button:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    .LocationsGallery-pager-button:focus-visible {
        outline: 2px solid var(--color-cool-neutral-02); /* Anillo de foco, como los demás controles. */
        outline-offset: 2px;
    }

.LocationsGallery-pager-icon {
    width: 14px; /* Tamaño del glifo. */
    height: 14px; /* Cuadrado. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Entrada animada de cada página (la pone el script): las tarjetas entran desde abajo, una tras
   otra. */
.LocationsGallery-enter {
    animation: LocationsGallery-enter 0.32s ease-out both; /* Entrada; "both" la oculta durante el retraso. */
    animation-delay: var(--LocationsGallery-delay, 0ms); /* Escalonado que pone el script. */
}

@keyframes LocationsGallery-enter {
    from {
        opacity: 0; /* Aparece... */
        transform: translateY(10px); /* ...desde abajo. */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Franja de fotos: principal y miniaturas en la proporción del nodo (391 : 182). */
.LocationsGallery-media {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 391fr) minmax(0, 182fr); /* Proporción del nodo. */
    gap: 8px; /* Separación del nodo. */
    height: var(--LocationsGallery-media-height); /* Alto del nodo. */
}

/* Una sola foto: la principal ocupa toda la franja. */
.LocationsGallery-media--single {
    grid-template-columns: minmax(0, 1fr); /* Una columna. */
}

.LocationsGallery-main {
    position: relative; /* Origen del velo, el chip y el botón. */
    min-width: 0; /* No fuerza el ancho. */
    overflow: hidden; /* Recorta el zoom de la foto. */
}

/* Columna de miniaturas: se reparten el alto. */
.LocationsGallery-thumbs {
    display: flex; /* Apiladas. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Separación del nodo. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Enlace de cada foto: abre el visor. */
.LocationsGallery-photo {
    position: relative; /* Origen del "+N". */
    display: block; /* Ocupa su caja. */
    width: 100%; /* Ancho de su columna. */
    height: 100%; /* Alto de su caja. */
    overflow: hidden; /* Recorta el zoom. */
    cursor: zoom-in; /* Indica que se amplía. */
}

.LocationsGallery-thumb {
    flex: 1 1 0; /* Las miniaturas se reparten el alto: 86 + 86 del nodo. */
    min-height: 0; /* Pueden achicarse. */
}

.LocationsGallery-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 100%; /* Ancho de la caja. */
    height: 100%; /* Alto de la caja. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar. */
    transition: transform 0.4s ease; /* Zoom suave. */
}

.LocationsGallery-photo:hover .LocationsGallery-image,
.LocationsGallery-photo:focus-visible .LocationsGallery-image {
    transform: scale(1.04); /* Zoom leve: invita a abrir. */
}

.LocationsGallery-photo:focus-visible {
    outline: 3px solid var(--LocationsGallery-accent); /* Anillo de foco. */
    outline-offset: -3px; /* Por dentro: la tarjeta recorta lo de afuera. */
}

/* Velo de legibilidad del chip (nodo "scrim · legibilidad"). No intercepta el clic. */
.LocationsGallery-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* La cubre entera. */
    background: linear-gradient(180deg, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
    pointer-events: none; /* El clic llega a la foto. */
}

/* "GALERÍA · 8 FOTOS": vidrio blanco abajo a la izquierda. */
.LocationsGallery-chip {
    position: absolute; /* Sobre la foto. */
    left: 12px; /* Posición del nodo. */
    bottom: 12px; /* Ídem. */
    padding: 5px 9px; /* Relleno del nodo. */
    border: 1px solid rgba(255, 255, 255, 0.6); /* Borde del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: rgba(255, 255, 255, 0.86); /* Vidrio del nodo. */
    backdrop-filter: blur(8px); /* Desenfoque del nodo. */
    font-size: 9.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de etiqueta. */
    text-transform: uppercase; /* Como el nodo. */
    color: var(--LocationsGallery-ink); /* Casi negro. */
    white-space: nowrap; /* En una línea. */
    opacity: 0.95; /* Opacidad del nodo. */
    pointer-events: none; /* El clic llega a la foto. */
}

/* "+5 ver todas": velo oscuro sobre la última miniatura. */
.LocationsGallery-more {
    position: absolute; /* Sobre la miniatura. */
    inset: 0; /* La cubre entera. */
    display: flex; /* Número y leyenda apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados. */
    justify-content: center; /* Ídem vertical. */
    gap: 2px; /* Separación del nodo. */
    background-color: rgba(15, 15, 18, 0.62); /* Velo del nodo. */
    color: #ffffff; /* Blanco. */
    transition: background-color 0.2s ease; /* Respuesta suave. */
}

.LocationsGallery-photo:hover .LocationsGallery-more {
    background-color: rgba(15, 15, 18, 0.5); /* Aclara al pasar. */
}

.LocationsGallery-more-count {
    font-size: 22px; /* Tamaño del nodo. */
    font-weight: 900; /* Black. */
    line-height: 1.2; /* Interlineado. */
}

.LocationsGallery-more-text {
    font-size: 10px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
    color: rgba(255, 255, 255, 0.8); /* Blanco atenuado del nodo. */
}

/* "Ver galería →": solo en mobile (nodo 2695:59346). */
.LocationsGallery-gallery-button {
    position: absolute; /* Sobre la foto. */
    right: 8px; /* Con la reserva de 4px queda a los 12px del nodo. */
    bottom: 12px; /* Posición del nodo. */
    display: none; /* Oculto fuera de mobile. */
    align-items: center; /* Texto y flecha centrados. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    margin: 0; /* Sin el margen del navegador. */
    margin-inline-end: 4px; /* Reserva los 4px que crece en hover. */
    max-width: calc(100% - 24px); /* Nunca más que la foto, con 12px de aire a cada lado. */
    padding: 8px 14px; /* Relleno del nodo. */
    border: 0; /* Sin el borde del navegador. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: var(--LocationsGallery-accent); /* Celeste del nodo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 600; /* SemiBold del nodo. */
    line-height: 1.2; /* Interlineado. */
    color: #ffffff; /* Blanco. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos. */
    transition: gap 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Flecha, reserva y tope al mismo ritmo. */
}

    /* Anclado a la derecha: la flecha se corre y el texto no se mueve. */
    .LocationsGallery-gallery-button:hover,
    .LocationsGallery-gallery-button:focus-visible {
        gap: 10px; /* Separación estándar en hover y foco. */
        margin-inline-end: 0; /* Cede la reserva: el borde izquierdo no cambia. */
        max-width: calc(100% - 20px); /* El tope crece los 4px de la flecha. */
    }

    .LocationsGallery-gallery-button:focus-visible {
        outline: 2px solid #ffffff; /* Visible sobre la foto. */
        outline-offset: 2px; /* Separado del botón. */
    }

/* --- Datos de la sede. --- */
.LocationsGallery-body {
    display: flex; /* Piezas apiladas. */
    flex: 1 1 auto; /* Ocupa el alto que deja la franja. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Cada pieza del ancho de su texto. */
    gap: 8px; /* Separación del nodo. */
    padding: 20px 24px 24px; /* Relleno del nodo. */
}

    .LocationsGallery-body > * {
        max-width: 100%; /* Ninguna pieza pasa del ancho de la tarjeta. */
    }

.LocationsGallery-name {
    font-size: 21px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de titular. */
    color: var(--LocationsGallery-ink); /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

.LocationsGallery-address {
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular. */
    line-height: 1.45; /* Aire si parte renglón. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

.LocationsGallery-phone {
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    line-height: 1.2; /* Interlineado. */
    color: rgba(15, 15, 18, 0.7); /* Gris del nodo. */
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.LocationsGallery-phone-link,
.LocationsGallery-phone-link:link,
.LocationsGallery-phone-link:visited,
.LocationsGallery-phone-link:hover,
.LocationsGallery-phone-link:focus,
.LocationsGallery-phone-link:active {
    color: inherit; /* El del teléfono. */
    text-decoration: none; /* Nunca subrayado. */
}

/* Enlaces: en una fila, y bajan si no entran. */
.LocationsGallery-links {
    display: flex; /* En línea. */
    flex-wrap: wrap; /* Bajan en un ancho chico. */
    align-items: center; /* Centrados. */
    align-self: stretch; /* Ancho de la tarjeta: el tope de los enlaces se calcula contra ella. */
    gap: 6px 20px; /* Separación del nodo. */
}

/* "Cómo llegar →": gris. Los cinco estados le ganan al a:hover de Bootstrap. */
.LocationsGallery-link,
.LocationsGallery-link:link,
.LocationsGallery-link:visited,
.LocationsGallery-link:hover,
.LocationsGallery-link:focus,
.LocationsGallery-link:active {
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
    text-decoration: none; /* Nunca subrayado. */
}

/* "Agendar visita →": celeste. */
.LocationsGallery-link--primary,
.LocationsGallery-link--primary:link,
.LocationsGallery-link--primary:visited,
.LocationsGallery-link--primary:hover,
.LocationsGallery-link--primary:focus,
.LocationsGallery-link--primary:active {
    color: var(--LocationsGallery-accent); /* Celeste del nodo. */
}

.LocationsGallery-link {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    max-width: calc(100% - 4px); /* Deja los 4px que crece en hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado. */
    transition: opacity 0.2s ease-in-out, gap 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Respuesta, flecha, reserva y tope. */
}

    /* Tiene "Cómo llegar" a la derecha: reserva los 4px que crece en hover. */
    .LocationsGallery-link--primary {
        margin-inline-end: 4px; /* Reserva para el crecimiento del hover. */
    }

    .LocationsGallery-link:hover,
    .LocationsGallery-link:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    /* La flecha se corre al abrir la separación; el texto no se mueve. */
    .LocationsGallery-link:hover,
    .LocationsGallery-link:focus-visible {
        gap: 10px; /* Separación estándar en hover y foco. */
        max-width: 100%; /* El tope crece los 4px de la flecha. */
    }

    .LocationsGallery-link--primary:hover,
    .LocationsGallery-link--primary:focus-visible {
        margin-inline-end: 0; /* Cede la reserva: el vecino no se mueve. */
    }

/* Leyendas editables: dos renglones como máximo, con puntos suspensivos. */
.LocationsGallery-link-text,
.LocationsGallery-gallery-button-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

    .LocationsGallery-link:focus-visible,
    .LocationsGallery-phone-link:focus-visible {
        outline: 2px solid var(--color-cool-neutral-02); /* Anillo de foco, como los demás controles. */
        outline-offset: 2px; /* Separado del texto. */
    }

/* Flecha estándar de LegalLinksSection, en los enlaces y en el botón. */
.LocationsGallery-arrow {
    flex: none; /* No se comprime. */
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Toma el color del texto. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Visor de la galería (nodo 2695:60225): <dialog> nativo a pantalla completa, con fondo, Esc y
   foco atrapado del navegador. Foto de 940 × 560, nombre de la sede debajo y miniaturas de 92 × 62. --- */
.LocationsGallery-viewer {
    position: fixed; /* Cubre la ventana. */
    inset: 0; /* De borde a borde. */
    width: 100vw; /* Ancho de la ventana. */
    height: 100vh; /* Alto de la ventana (respaldo). */
    height: 100dvh; /* Alto visible real en mobile. */
    max-width: none; /* Sin el tope del navegador. */
    max-height: none; /* Ídem. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: transparent; /* El fondo lo da el ::backdrop. */
    color: #ffffff; /* Texto sobre el velo. */
    font-family: var(--font-brand); /* Pila de marca. */
    overflow: hidden; /* Nada se sale. */
}

    /* Recibe el foco al abrir; sin anillo: no es un control. */
    .LocationsGallery-viewer:focus {
        outline: none;
    }

    .LocationsGallery-viewer::backdrop {
        background-color: rgba(18, 21, 24, 0.95); /* Velo oscuro del nodo. */
    }

    .LocationsGallery-viewer[open] {
        animation: LocationsGallery-fade-in 0.22s ease-out; /* Entrada suave. */
    }

/* Con el visor abierto, la página de atrás no se desplaza. */
html:has(.LocationsGallery-viewer[open]) {
    overflow: hidden; /* Sin scroll de fondo. */
}

/* Foto, nombre y miniaturas, centrados en la ventana. */
.LocationsGallery-viewer-frame {
    display: flex; /* Apilados. */
    flex-direction: column; /* En columna. */
    align-items: center; /* Centrados en horizontal. */
    justify-content: center; /* Y en vertical. */
    gap: 18px; /* Separación del nodo. */
    height: 100%; /* Alto de la ventana. */
    padding: 80px 120px 40px; /* Lugar para el contador, la ✕ y las flechas. */
}

/* "1 / 8", arriba al centro. */
.LocationsGallery-viewer-counter {
    position: absolute; /* Sobre el velo. */
    top: 34px; /* Posición del nodo. */
    left: 50%; /* Centrado. */
    margin: 0; /* Sin margen propio. */
    transform: translateX(-50%); /* Centro exacto. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    letter-spacing: 1px; /* Apertura del nodo. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan. */
    color: #ffffff; /* Blanco. */
}

/* ✕ arriba a la derecha, sin caja. */
.LocationsGallery-viewer-close {
    position: absolute; /* Sobre el velo. */
    top: 20px; /* Posición del nodo. */
    right: 22px; /* Ídem. */
    z-index: 2; /* Por encima de la foto. */
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 44px; /* Área de toque cómoda. */
    height: 44px; /* Cuadrada. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin borde. */
    border-radius: 50%; /* Anillo de foco redondo. */
    background: transparent; /* Sin caja, como el nodo. */
    color: #ffffff; /* Blanco. */
    cursor: pointer; /* Mano de clic. */
    transition: opacity 0.2s ease; /* Respuesta suave. */
    appearance: none; /* Sin los estilos nativos. */
}

    .LocationsGallery-viewer-close:hover {
        opacity: 0.7; /* Respuesta al puntero. */
    }

    .LocationsGallery-viewer-close svg {
        width: 26px; /* Tamaño del nodo. */
        height: 26px; /* Cuadrado. */
    }

/* Flechas: círculos de vidrio a los costados de la ventana. */
.LocationsGallery-viewer-nav {
    position: absolute; /* Sobre el velo. */
    top: 50%; /* Centradas en vertical. */
    z-index: 2; /* Por encima de la foto. */
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 56px; /* Tamaño del nodo. */
    height: 56px; /* Círculo. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Borde del nodo. */
    border-radius: 50%; /* Círculo. */
    background-color: rgba(255, 255, 255, 0.14); /* Vidrio del nodo. */
    color: #ffffff; /* Blanco. */
    cursor: pointer; /* Mano de clic. */
    transform: translateY(-50%); /* Centro exacto. */
    transition: background-color 0.2s ease, opacity 0.2s ease; /* Respuesta suave. */
    appearance: none; /* Sin los estilos nativos. */
}

    .LocationsGallery-viewer-nav:hover {
        background-color: rgba(255, 255, 255, 0.26); /* Más opaco al pasar. */
    }

    /* En la primera o la última foto, la flecha de ese lado queda apagada. */
    .LocationsGallery-viewer-nav:disabled {
        opacity: 0.3; /* Atenuada. */
        cursor: default; /* Sin mano de clic. */
    }

    .LocationsGallery-viewer-nav[hidden] {
        display: none; /* Con una sola foto no hay a dónde ir. */
    }

    .LocationsGallery-viewer-nav svg {
        width: 26px; /* Ícono. */
        height: 26px; /* Cuadrado. */
    }

.LocationsGallery-viewer-nav--prev {
    left: 44px; /* Posición del nodo. */
}

.LocationsGallery-viewer-nav--next {
    right: 44px; /* Posición del nodo. */
}

.LocationsGallery-viewer-close:focus-visible,
.LocationsGallery-viewer-nav:focus-visible,
.LocationsGallery-viewer-strip-button:focus-visible {
    outline: 2px solid #ffffff; /* Blanco, visible sobre el velo. */
    outline-offset: 3px; /* Separado del botón. */
}

/* Escenario: 940 × 560 del nodo, sin pasarse del alto disponible. Se arrastra. */
.LocationsGallery-viewer-stage {
    position: relative; /* Origen de la tira. */
    flex: 0 1 auto; /* Cede alto si la ventana es baja. */
    width: min(940px, 100%, calc((100dvh - 240px) * 940 / 560)); /* Proporción del nodo, sin pasarse del alto. */
    aspect-ratio: 940 / 560; /* Proporción del nodo. */
    border-radius: 10px; /* Esquinas del nodo. */
    overflow: hidden; /* Solo se ve la foto actual. */
    cursor: grab; /* Indica que se arrastra. */
    touch-action: pan-y; /* El deslizamiento horizontal lo maneja el script; el vertical, el navegador. */
    user-select: none; /* No selecciona al arrastrar. */
}

    .LocationsGallery-viewer-stage.is-dragging {
        cursor: grabbing; /* Mano cerrada mientras arrastra. */
    }

/* Tira: todas las fotos en fila; se mueve con transform. */
.LocationsGallery-viewer-track {
    display: flex; /* En fila. */
    height: 100%; /* Alto del escenario. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); /* Se acomoda suave al soltar. */
    will-change: transform; /* Arrastre fluido. */
}

    /* Mientras se arrastra, la tira sigue al dedo sin retraso. */
    .LocationsGallery-viewer-stage.is-dragging .LocationsGallery-viewer-track {
        transition: none;
    }

.LocationsGallery-viewer-slide {
    flex: 0 0 100%; /* Una por pantalla. */
    min-width: 0; /* No fuerza el ancho. */
    height: 100%; /* Alto del escenario. */
}

/* La foto llena el escenario, como en el nodo. */
.LocationsGallery-viewer-image {
    display: block; /* Sin hueco de línea. */
    width: 100%; /* Ancho del escenario. */
    height: 100%; /* Alto del escenario. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar, como el nodo. */
    pointer-events: none; /* El arrastre lo recibe el escenario. */
    -webkit-user-drag: none; /* Sin el arrastre nativo de imágenes. */
}

/* Nombre de la sede, bajo la foto. */
.LocationsGallery-viewer-title {
    max-width: 100%; /* No pasa del ancho. */
    margin: 0; /* Sin margen propio. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del nodo. */
    line-height: 1.2; /* Interlineado. */
    color: #ffffff; /* Blanco. */
    text-align: center; /* Centrado. */
    overflow: hidden; /* Recorta un nombre largo. */
    text-overflow: ellipsis; /* Con puntos suspensivos. */
    white-space: nowrap; /* En una línea. */
}

/* Miniaturas: se desplazan en horizontal si no entran. */
.LocationsGallery-viewer-strip {
    display: flex; /* En fila. */
    flex: none; /* No se comprime. */
    gap: 10px; /* Separación del nodo. */
    max-width: 100%; /* No pasa del ancho. */
    margin: 0; /* Sin margen de la lista. */
    padding: 3px; /* Lugar para el anillo de foco. */
    list-style: none; /* Sin viñetas. */
    overflow-x: auto; /* Se desplaza si no entran. */
    scrollbar-width: none; /* Sin barra visible. */
}

    .LocationsGallery-viewer-strip::-webkit-scrollbar {
        display: none; /* Sin barra visible. */
    }

    .LocationsGallery-viewer-strip[hidden] {
        display: none; /* Con una sola foto sobra. */
    }

    .LocationsGallery-viewer-strip li {
        flex: 0 0 auto; /* Cada miniatura con su ancho. */
    }

.LocationsGallery-viewer-strip-button {
    display: block; /* Ocupa su caja. */
    width: 92px; /* Tamaño del nodo. */
    height: 62px; /* Ídem. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 3px solid transparent; /* Marco de la elegida. */
    border-radius: 6px; /* Esquinas del nodo. */
    background: none; /* Sin fondo. */
    overflow: hidden; /* Recorta la foto. */
    opacity: 0.55; /* Opacidad del nodo para las demás. */
    cursor: pointer; /* Mano de clic. */
    transition: opacity 0.2s ease, border-color 0.2s ease; /* Respuesta suave. */
    appearance: none; /* Sin los estilos nativos. */
}

    .LocationsGallery-viewer-strip-button:hover {
        opacity: 0.85; /* Se aclara al pasar. */
    }

    .LocationsGallery-viewer-strip-button[aria-current="true"] {
        border-color: var(--LocationsGallery-accent); /* Celeste del nodo. */
        opacity: 1; /* La que se ve, entera. */
    }

    .LocationsGallery-viewer-strip-button img {
        display: block; /* Sin hueco de línea. */
        width: 100%; /* Llena la miniatura. */
        height: 100%; /* Ídem. */
        max-width: none; /* Anula el max-width de Bootstrap. */
        object-fit: cover; /* Recorta sin deformar. */
        border-radius: 3px; /* Esquinas dentro del marco. */
    }

@keyframes LocationsGallery-fade-in {
    from {
        opacity: 0; /* Aparece. */
    }
}

/* --- Tablet: hasta 1024px (nodo 2695:59162). Una tarjeta por fila, sin conteo. --- */
@media (max-width: 1024px) {

    .LocationsGallery {
        padding: 48px 40px; /* Relleno estándar de tablet. */
    }

    .LocationsGallery-container {
        gap: 20px; /* Separación de tablet. */
    }

    .LocationsGallery-heading {
        gap: 6px; /* Separación de tablet. */
    }

    /* El nodo de tablet no dibuja el conteo. */
    .LocationsGallery-count {
        display: none;
    }

    .LocationsGallery-grid {
        grid-template-columns: minmax(0, 1fr); /* Una por fila. */
        gap: 16px; /* Separación de tablet. */
    }

    /* Visor: menos aire a los costados; las flechas siguen en el borde. */
    .LocationsGallery-viewer-frame {
        padding: 80px 96px 36px; /* Relleno de tablet. */
    }

    .LocationsGallery-viewer-nav--prev {
        left: 20px; /* Más pegada al borde. */
    }

    .LocationsGallery-viewer-nav--next {
        right: 20px; /* Ídem. */
    }
}

/* --- Mobile: hasta 500px (nodo 2695:59327). Solo la foto principal y el botón "Ver galería". --- */
@media (max-width: 500px) {

    .LocationsGallery {
        padding: 40px 20px; /* Relleno estándar de mobile. */
    }

    .LocationsGallery-title {
        font-size: 28px; /* Tamaño de mobile. */
    }

    /* La principal ocupa toda la franja; las miniaturas se ven en el visor. */
    .LocationsGallery-media {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
    }

    .LocationsGallery-thumbs {
        display: none; /* El nodo de mobile las oculta. */
    }

    .LocationsGallery-gallery-button {
        display: inline-flex; /* Visible en mobile. */
    }

    /* BTCN-352: el chip "Galería · N fotos" y el botón "Ver galería" comparten UNA FILA abajo de la
       foto (antes los dos iban absolutos y un texto largo del botón tapaba el chip). La foto ocupa
       toda la caja; el chip mide lo suyo y el botón toma solo el ancho que sobra, con su texto en
       dos renglones como máximo: nunca se enciman, con cualquier largo permitido (40). */
    .LocationsGallery-main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        column-gap: 8px;
    }

    .LocationsGallery-main > .LocationsGallery-photo {
        grid-area: 1 / 1 / 3 / 3; /* La foto, de fondo en toda la caja. */
    }

    .LocationsGallery-main > .LocationsGallery-chip,
    .LocationsGallery-main > .LocationsGallery-gallery-button {
        position: relative; /* En la fila, sobre la foto. */
        z-index: 1;
        left: auto;
        right: auto;
        bottom: auto;
        align-self: end;
        margin-bottom: 12px;
    }

    .LocationsGallery-main > .LocationsGallery-chip {
        grid-area: 2 / 1;
        margin-left: 12px;
    }

    .LocationsGallery-main > .LocationsGallery-gallery-button,
    .LocationsGallery-main > .LocationsGallery-gallery-button:hover,
    .LocationsGallery-main > .LocationsGallery-gallery-button:focus-visible {
        grid-area: 2 / 2;
        justify-self: end; /* A la derecha, como el nodo. */
        max-width: 100%; /* Su columna, sin pasar al chip. */
        margin-right: 12px;
        margin-inline-end: 12px; /* Sin la reserva de 4px: a la derecha no hay vecino que mover. */
    }

    .LocationsGallery-body {
        padding: 20px 24px 24px; /* Relleno del nodo de mobile (igual al de PC). */
    }

    /* Visor: la foto a todo el ancho; flechas más chicas sobre ella. */
    .LocationsGallery-viewer-frame {
        padding: 72px 12px 28px; /* Lugar para el contador y la ✕. */
    }

    .LocationsGallery-viewer-stage {
        width: min(100%, calc((100dvh - 220px) * 940 / 560)); /* Todo el ancho, sin pasarse del alto. */
    }

    .LocationsGallery-viewer-nav {
        width: 40px; /* Más chicas. */
        height: 40px; /* Ídem. */
        background-color: rgba(15, 15, 18, 0.35); /* Más oscuras: van sobre la foto. */
    }

    .LocationsGallery-viewer-nav--prev {
        left: 18px; /* Sobre la foto. */
    }

    .LocationsGallery-viewer-nav--next {
        right: 18px; /* Ídem. */
    }

    .LocationsGallery-viewer-strip-button {
        width: 64px; /* Más chicas. */
        height: 44px; /* Ídem. */
    }
}

/* --- Movimiento reducido: sin zoom ni animaciones. --- */
@media (prefers-reduced-motion: reduce) {

    .LocationsGallery-image,
    .LocationsGallery-link,
    .LocationsGallery-gallery-button,
    .LocationsGallery-more {
        transition: none; /* Sin transición. */
    }

    .LocationsGallery-photo:hover .LocationsGallery-image,
    .LocationsGallery-photo:focus-visible .LocationsGallery-image {
        transform: none; /* Sin movimiento. */
    }

    /* La flecha no se corre: separación, reserva y tope de reposo. */
    .LocationsGallery-link:hover,
    .LocationsGallery-link:focus-visible {
        gap: 6px; /* Separación de reposo. */
        max-width: calc(100% - 4px); /* El tope no crece. */
    }

    .LocationsGallery-link--primary:hover,
    .LocationsGallery-link--primary:focus-visible {
        margin-inline-end: 4px; /* La reserva se queda. */
    }

    .LocationsGallery-gallery-button:hover,
    .LocationsGallery-gallery-button:focus-visible {
        gap: 6px; /* Separación de reposo. */
        margin-inline-end: 4px; /* La reserva se queda. */
        max-width: calc(100% - 24px); /* El tope no crece. */
    }

    .LocationsGallery-viewer[open],
    .LocationsGallery-enter {
        animation: none; /* Sin animación. */
    }

    .LocationsGallery-pager-button {
        transition: none; /* Sin animaciones. */
    }

    .LocationsGallery-viewer-track {
        transition: none; /* La foto cambia sin deslizarse. */
    }
}