/* ================================================================
   turismo.css — GAMS Sacaba / Plantilla Turismo
   Estilos para páginas: Parque Cretácico, San Isidro,
   Sabores y paisajes.
   El color de acento --tur-color se inyecta inline desde PHP.
   ================================================================ */

/* ── Hero ────────────────────────────────────────────────── */
.tur-hero {
    position:   relative;
    height:     55vh;
    min-height: 360px;
    max-height: 520px;
    overflow:   hidden;
    background: #111;
}

.tur-hero-img {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    transform:           scale(1.05);
    transition:          transform 8s ease;
}
.tur-hero-img.tur-loaded { transform: scale(1); }

.tur-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.65) 100%
    );
}

.tur-hero-content {
    position:  absolute;
    bottom:    0;
    left:      0;
    right:     0;
    padding:   32px 24px 28px;
    max-width: 960px;
    margin:    0 auto;
}

.tur-hero-back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           rgba(255,255,255,.8);
    font-size:       0.75rem;
    text-decoration: none;
    margin-bottom:   14px;
    transition:      color .2s;
}
.tur-hero-back:hover { color: #fff; }

.tur-hero-tag {
    display:        inline-block;
    background:     var(--tur-color, #2e7d32);
    color:          #fff;
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding:        3px 12px;
    border-radius:  99px;
    margin-bottom:  10px;
}

.tur-hero h1 {
    font-size:   clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color:       #fff;
    line-height: 1.2;
    margin:      0 0 6px;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.tur-hero-sub {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   0.88rem;
    color:       rgba(255,255,255,.82);
    margin:      0;
}

/* ── Layout principal ────────────────────────────────────── */
.tur-main {
    max-width:  960px;
    margin:     0 auto;
    padding:    36px 24px 64px;
    display:    grid;
    grid-template-columns: 1fr 290px;
    gap:        32px;
    align-items: start;
}

@media (max-width: 768px) {
    .tur-main {
        grid-template-columns: 1fr;
    }
    .tur-sidebar {
        order:    -1;
        position: relative !important;
        top:      0px !important;
    }
    .tur-col-principal {
        order: 1;
    }
}

/* ── Cuerpo del contenido ────────────────────────────────── */
.tur-body {
    font-size:   0.95rem;
    line-height: 1.8;
    color:       var(--texto-default);
    margin-bottom: 28px;
}
.tur-body > *:first-child {
    border-left: 3px solid var(--tur-color, #2e7d32);
    padding-left: 16px;
}
.tur-body h2, .tur-body h3 {
    color:       var(--tur-color, #2e7d32);
    margin:      24px 0 8px;
    font-weight: 700;
}
.tur-body h2 { font-size: 1.15rem; }
.tur-body h3 { font-size: 1rem; }
.tur-body p  { margin: 0 0 1rem; }

/* ── Títulos de sección ──────────────────────────────────── */
.tur-seccion-titulo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--tur-color, #2e7d32);
    margin:      28px 0 14px;
}
.tur-seccion-count {
    font-size:   0.72rem;
    font-weight: 500;
    color:       var(--texto-suave);
    background:  var(--background-default);
    border:      1px solid var(--borde-suave);
    padding:     1px 8px;
    border-radius: 99px;
    margin-left: 4px;
}

/* ── Galería de imágenes ─────────────────────────────────── */
.tur-galeria-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:                   8px;
    margin-bottom:         28px;
}

.tur-galeria-thumb {
    aspect-ratio:  1;
    border-radius: var(--radio, 8px);
    overflow:      hidden;
    cursor:        pointer;
    background:    var(--background-default);
    border:        none;
    padding:       0;
    position:      relative;
}

.tur-galeria-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease, opacity .25s;
}
.tur-galeria-thumb:hover img {
    transform: scale(1.06);
    opacity:   .88;
}

/* Ícono de zoom al hover */
.tur-galeria-thumb::after {
    content:    '\F4CF';          /* bi-zoom-in */
    font-family: 'Bootstrap Icons';
    position:   absolute;
    inset:      0;
    display:    flex;
    align-items: center;
    justify-content: center;
    font-size:  1.4rem;
    color:      #fff;
    background: rgba(0,0,0,.35);
    opacity:    0;
    transition: opacity .2s;
}
.tur-galeria-thumb:hover::after { opacity: 1; }

/* ── Videos de YouTube ───────────────────────────────────── */
.tur-video-wrap {
    border-radius: var(--radio, 8px);
    overflow:      hidden;
    aspect-ratio:  16/9;
    background:    #111;
    margin-bottom: 16px;
}
.tur-video-wrap iframe {
    width:  100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Botón volver ────────────────────────────────────────── */
.tur-btn-volver {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    margin-top:      24px;
    padding:         10px 20px;
    background:      var(--tur-color, #2e7d32);
    color:           #fff;
    border-radius:   var(--radio, 8px);
    text-decoration: none;
    font-size:       0.85rem;
    font-weight:     600;
    transition:      opacity .2s;
}
.tur-btn-volver:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ── Sidebar ─────────────────────────────────────────────── */
.tur-sidebar {
    position: sticky;
    top:      80px;
}

.tur-datos-card {
    background:    var(--background-card);
    border:        1px solid var(--borde-suave);
    border-radius: var(--radio-lg, 12px);
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
}

.tur-datos-head {
    background:  var(--tur-color, #2e7d32);
    color:       #fff;
    padding:     13px 18px;
    font-size:   0.85rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.tur-datos-body { padding: 0; }

.tur-dato-fila {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       13px 18px;
    border-bottom: 1px solid var(--borde-suave);
    font-size:     0.83rem;
    color:         var(--texto-default);
    line-height:   1.5;
}
.tur-dato-fila:last-child { border-bottom: none; }

.tur-dato-fila > i {
    color:      var(--tur-color, #2e7d32);
    font-size:  1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.tur-dato-fila strong {
    display:        block;
    font-size:      0.68rem;
    color:          var(--texto-suave);
    margin-bottom:  3px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight:    600;
}

/* Nav de otras páginas en el sidebar */
.tur-dato-nav > div {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.tur-dato-nav a {
    font-size:       0.8rem;
    color:           var(--tur-color, #2e7d32);
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             4px;
    transition:      opacity .15s;
}
.tur-dato-nav a:hover { opacity: .75; }

/* ── Lightbox ────────────────────────────────────────────── */
dialog.tur-lightbox {
    padding:    0;
    border:     none;
    background: transparent;
    max-width:  95vw;
    max-height: 95vh;
    position:   fixed;
    inset:      0;
    margin:     auto;
}
dialog.tur-lightbox::backdrop {
    background:      rgba(0,0,0,.9);
    backdrop-filter: blur(4px);
}

.tur-lightbox-img {
    max-width:     90vw;
    max-height:    88vh;
    object-fit:    contain;
    border-radius: 4px;
    display:       block;
}

/* Botón cerrar */
.tur-lightbox-cerrar {
    position:      fixed;
    top:           16px;
    right:         16px;
    width:         38px;
    height:        38px;
    background:    rgba(255,255,255,.15);
    border:        none;
    border-radius: 50%;
    color:         #fff;
    font-size:     16px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition:    background .15s;
    z-index:       10;
}
.tur-lightbox-cerrar:hover { background: rgba(255,255,255,.3); }

/* Flechas de navegación en el lightbox */
.tur-lightbox-nav {
    position:      fixed;
    top:           50%;
    transform:     translateY(-50%);
    width:         46px;
    height:        46px;
    background:    rgba(255,255,255,.15);
    border:        none;
    border-radius: 50%;
    color:         #fff;
    font-size:     1.2rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition:    background .15s;
    z-index:       10;
}
.tur-lightbox-nav:hover  { background: rgba(255,255,255,.3); }
.tur-lightbox-nav:disabled { opacity: .25; cursor: default; }
.tur-lightbox-prev { left:  16px; }
.tur-lightbox-next { right: 16px; }

/* Contador "2 / 6" */
.tur-lightbox-counter {
    position:   fixed;
    bottom:     20px;
    left:       50%;
    transform:  translateX(-50%);
    background: rgba(0,0,0,.5);
    color:      #fff;
    font-size:  0.78rem;
    padding:    4px 14px;
    border-radius: 99px;
    backdrop-filter: blur(4px);
}