/* ==========================================================================
   Termalovers · Galería de viajeros
   Pixel-perfect según export/5 Termalovers.pdf (el JSON de Elementor de esta
   página viene incompleto: no incluye este bloque)
   Frame de referencia: 1366px · sección abs. y 696..1833

   Medidas tomadas por muestreo de píxeles sobre el PDF:
     container 1246 (1366 − 60 por lado) · padding 70px 0
     grid 4 col · gap 22 · tarjeta 295.5 × 381 (imagen 321 + pie 60) · radio 20
     chip 23px alto, inset 13 izq / 12 abajo · botón 208 × 44

   ⚠️ ESPECIFICIDAD — no quitar el prefijo `.tl-galeria` de los selectores.
   Con selectores de una sola clase (0,1,0) el tema le gana al componente:
     · `.elementor-kit-6 h2` (0,1,1) → el título salía a 20px y peso 400
     · `.elementor img { height:auto }` (0,1,1) → la foto no llenaba la tarjeta
   Comprobado en el sitio real el 2026-08-02. El prefijo sube todo a (0,2,0).
   ========================================================================== */

.tl-galeria {
    background: #FFFFFF;
    padding: 70px 0;
    font-family: 'Montserrat', sans-serif;
}

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

.tl-galeria .tl-galeria__container {
    width: min(1246px, 100%);
    margin-inline: auto;
}

/* El margen lateral solo se aplica cuando la ventana es más angosta que el diseño.
   Si estuviera siempre (como `100% - 40px`), al meter el shortcode dentro de un container
   de Elementor —que ya viene limitado a 1246— restaría 40px de más y las tarjetas saldrían
   de 285px en vez de 295. Medido en el sitio real. */
@media (max-width: 1286px) {
    .tl-galeria .tl-galeria__container {
        width: calc(100% - 40px);
    }
}

/* --- Encabezado: pill + título a la izquierda, contador a la derecha --- */
.tl-galeria .tl-galeria__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 50px;
}

.tl-galeria .tl-galeria__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 16px entre las cajas, pero el título arrastra ~10px de interlineado sobre
       la mayúscula; medido contra el PDF el hueco visible queda en 10. */
    gap: 10px;
}

.tl-galeria .tl-galeria__pill {
    display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 18px;
    border-radius: 999px;
    background: #EBF2D8;
    color: #8DB522;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tl-galeria .tl-galeria__title {
    margin: 0;
    color: #032929;
    font-family: inherit;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}

.tl-galeria .tl-galeria__count {
    display: flex;
    align-items: center;
    gap: 8px;
    /* En el PDF el contador no llega al borde del container: queda 4px antes. */
    margin: 0 4px 0 0;
    color: #6B8A8A;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.tl-galeria .tl-icon {
    display: block;
    flex: none;
}

.tl-galeria .tl-galeria__count .tl-icon {
    width: 16px;
    height: 14px;
}

/* --- Grid de tarjetas --- */
.tl-galeria .tl-galeria__grid {
    display: grid;
    grid-template-columns: repeat(var(--tl-columnas, 4), minmax(0, 1fr));
    /* Medido en el PDF: paso horizontal 317 con tarjeta de 295.5 → 22 de gap;
       vertical 21. */
    column-gap: 22px;
    row-gap: 21px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-galeria .tl-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    border-radius: 20px;
    background: #EDE8DF;
    box-shadow: 0 4px 14px rgba(3, 41, 41, 0.08);
}

/* --- Imagen + etiqueta de lugar --- */
.tl-galeria .tl-card__media {
    position: relative;
    aspect-ratio: 295 / 321;
    overflow: hidden;
}

/* `height: 100%` tiene que ganarle a `.elementor img { height: auto }` */
.tl-galeria .tl-card__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
}

.tl-galeria .tl-card__img--vacia {
    background: #D9D2C6;
}

.tl-galeria .tl-card__chip {
    position: absolute;
    left: 13px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 23px;
    padding: 0 11px;
    border-radius: 999px;
    /* Medido: mezcla del 70% sobre la foto (mismo alfa que el overlay de marca) */
    background: rgba(3, 41, 41, 0.7);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.tl-galeria .tl-card__chip .tl-icon {
    width: 7.5px;
    height: 9px;
    color: #8DB522;
}

/* --- Pie de la tarjeta --- */
.tl-galeria .tl-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 17px;
}

.tl-galeria .tl-card__user {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* El bloque no queda centrado en el pie: en el PDF sube 2px respecto al eje
       (el margen inferior lo desplaza al estar en align-items: center). */
    margin-bottom: 4px;
    min-width: 0;
}

.tl-galeria .tl-card__name {
    overflow: hidden;
    color: #032929;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-galeria .tl-card__handle {
    overflow: hidden;
    color: #446C7C;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-galeria .tl-card__date {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    color: #9AADAD;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.tl-galeria .tl-card__date .tl-icon {
    width: 8.5px;
    height: 9.5px;
}

/* --- Botón "Ver más fotos" --- */
.tl-galeria .tl-galeria__more {
    display: flex;
    justify-content: center;
    margin-top: 41px;
}

.tl-galeria .tl-galeria__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 208px;
    width: auto;
    height: 44px;
    padding: 0 24px;
    border: 1px solid #446C7C;
    border-radius: 999px;
    background: transparent;
    color: #446C7C;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.tl-galeria .tl-galeria__btn:hover,
.tl-galeria .tl-galeria__btn:focus-visible {
    background: #446C7C;
    color: #FFFFFF;
}

.tl-galeria .tl-galeria__btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.tl-galeria .tl-galeria__btn .tl-icon {
    width: 11px;
    height: 11px;
}

.tl-galeria .tl-galeria__btn.is-cargando .tl-icon {
    animation: tl-girar 0.8s linear infinite;
}

@keyframes tl-girar {
    to { transform: rotate(180deg); }
}

/* --- Tablet --- */
@media (max-width: 1024px) {
    .tl-galeria .tl-galeria__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tl-galeria {
        padding: 48px 0;
    }

    .tl-galeria .tl-galeria__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 32px;
    }

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

    .tl-galeria .tl-galeria__count {
        margin-bottom: 0;
    }

    .tl-galeria .tl-galeria__more {
        margin-top: 32px;
    }
}

/* --- Mobile --- */
@media (max-width: 560px) {
    .tl-galeria .tl-galeria__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

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

    .tl-galeria .tl-card__media {
        aspect-ratio: 4 / 3;
    }

    /* En desktop el chip va a 10px porque así está medido en el PDF, pero en un móvil eso
       no se lee. Solo se sube aquí: el diseño de 1366 se queda como está. */
    .tl-galeria .tl-card__chip {
        font-size: 11px;
        height: 25px;
    }
}