/**
 * tours.css — Estilos para páginas de tours (single, archive, listado)
 * Complementa main.css con layouts específicos de tour.
 * @package MrBuggy
 */

/* ============================================================
   PAGE HERO — Cabecera común para páginas internas
   ============================================================ */

.page-hero {
    position:       relative;
    padding-top:    clamp(7rem, 14vw, 12rem);
    padding-bottom: clamp(3rem, 6vw,  6rem);
    overflow:       hidden;
    background:     var(--color-bg-primary);
}

.page-hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.page-hero__gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        150deg,
        rgba(232,163,61,0.06) 0%,
        transparent 40%,
        rgba(10,10,10,0) 100%
    );
}

.page-hero__gradient--gold {
    background: linear-gradient(
        150deg,
        rgba(232,163,61,0.12) 0%,
        rgba(232,163,61,0.04) 40%,
        transparent 70%
    );
}

.page-hero__container {
    position:   relative;
    z-index:    2;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-5);
}

.page-hero__title {
    font-size:      clamp(2.4rem, 5vw, 4.5rem);
    line-height:    0.95;
    letter-spacing: -0.02em;
    margin:         0;
}

.page-hero__title em {
    font-style:  normal;
    color:       var(--color-accent);
}

.page-hero__subtitle {
    font-size:   var(--text-lg);
    color:       var(--color-text-secondary);
    max-width:   52ch;
    line-height: 1.6;
    margin:      0;
}

.page-hero__actions {
    display:  flex;
    gap:      var(--space-4);
    flex-wrap:wrap;
    margin-top:var(--space-2);
}

/* Simple page hero (sin imagen) */
.page-hero--simple .page-hero__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

/* ============================================================
   TOUR HERO — Página detalle de tour
   ============================================================ */

.tour-hero {
    position:       relative;
    min-height:     clamp(380px, 60vh, 640px);
    display:        flex;
    align-items:    flex-end;
    overflow:       hidden;
    background:     var(--color-bg-primary);
}

.tour-hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.tour-hero__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
}

.tour-hero__placeholder {
    width:      100%;
    height:     100%;
    background: var(--gradient-tour-1);
}

.tour-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(10,10,10,0.95) 0%,
        rgba(10,10,10,0.5)  50%,
        rgba(10,10,10,0.15) 100%
    );
}

.tour-hero__container {
    position:       relative;
    z-index:        2;
    padding-top:    clamp(5rem, 10vw, 10rem);
    padding-bottom: var(--space-12);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.tour-hero__breadcrumb .breadcrumb { margin-bottom: var(--space-4); }

.tour-hero__badges {
    display:    flex;
    gap:        var(--space-3);
    flex-wrap:  wrap;
}

.tour-hero__title {
    font-size:      clamp(2.4rem, 5vw, 4.5rem);
    line-height:    0.95;
    letter-spacing: -0.02em;
    margin:         0;
    text-shadow:    0 2px 20px rgba(0,0,0,0.5);
}

.tour-hero__price-line {
    display:    flex;
    align-items:baseline;
    gap:        var(--space-2);
    font-size:  var(--text-base);
    color:      var(--color-text-secondary);
    margin:     0;
}

.tour-hero__price-value {
    font-size:   var(--text-2xl);
    font-family: var(--font-display);
    color:       var(--color-accent);
}

.tour-hero__actions {
    display:  flex;
    gap:      var(--space-4);
    flex-wrap:wrap;
}

/* ============================================================
   SINGLE TOUR — Layout 2 columnas
   ============================================================ */

.single-tour__layout {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   var(--space-12);
    align-items:           start;
    padding-top:           var(--space-12);
    padding-bottom:        var(--space-16);
}

/* Sección genérica dentro del contenido del tour */
.tour-section {
    margin-bottom: var(--space-12);
    padding-bottom:var(--space-12);
    border-bottom: 1px solid var(--color-border);
}

.tour-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.tour-section--cols2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
}

.tour-section__title {
    font-size:      var(--text-xl);
    font-weight:    700;
    letter-spacing: -0.02em;
    margin-bottom:  var(--space-6);
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
}

.tour-section__title svg { color: var(--color-accent); flex-shrink:0; }

/* Listas de tour (incluye / traer) */
.tour-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.tour-list li {
    display:    flex;
    align-items:flex-start;
    gap:        var(--space-3);
    font-size:  var(--text-sm);
    color:      var(--color-text-secondary);
    line-height:1.5;
}

.tour-list li svg { flex-shrink: 0; margin-top: 2px; }

.tour-list--green  li svg { color: #10B981; }
.tour-list--accent li svg { color: var(--color-accent); }

/* Requisitos */
.tour-requirements {
    display:  flex;
    flex-wrap:wrap;
    gap:      var(--space-3);
}

.tour-req-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding:     var(--space-2) var(--space-4);
    background:  rgba(239,68,68,0.08);
    border:      1px solid rgba(239,68,68,0.2);
    border-radius:var(--radius);
    font-size:   var(--text-sm);
    color:       #EF4444;
}

.tour-req-item svg { color: #EF4444; flex-shrink:0; }

/* Galería del tour (Swiper) */
.tour-gallery-swiper {
    border-radius: var(--radius-xl);
    overflow:      hidden;
    background:    var(--color-bg-secondary);
}

.tour-gallery__img {
    width:       100%;
    aspect-ratio:16/9;
    object-fit:  cover;
    display:     block;
}

/* Mapa */
.tour-map-wrap {
    border-radius:var(--radius-xl);
    overflow:     hidden;
    border:       1px solid var(--color-border);
    height:       320px;
}

.tour-map-iframe {
    width:   100%;
    height:  100%;
    border:  none;
    display: block;
}

.tour-map-address {
    display:     flex;
    gap:         var(--space-4);
    align-items: flex-start;
    padding:     var(--space-5) var(--space-6);
    background:  var(--color-bg-secondary);
    border:      1px solid var(--color-border);
    border-radius:var(--radius);
    margin-bottom:var(--space-5);
    font-size:   var(--text-sm);
    color:       var(--color-text-secondary);
}

.tour-map-address svg { color: var(--color-accent); flex-shrink:0; margin-top:2px; }

/* FAQ más link */
.tour-faq-more {
    margin-top: var(--space-5);
    font-size:  var(--text-sm);
}

.tour-faq-more a { color: var(--color-accent); }

/* ============================================================
   SIDEBAR DEL TOUR
   ============================================================ */

.tour-sidebar {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow:      hidden;
    position:      sticky;
    top:           calc(80px + var(--space-8));
}

.tour-sidebar__price-block {
    padding:         var(--space-6) var(--space-6) 0;
    text-align:      center;
    border-bottom:   1px solid var(--color-border);
    padding-bottom:  var(--space-6);
}

.tour-sidebar__price-from {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin:     0;
}

.tour-sidebar__price {
    font-family:    var(--font-display);
    font-size:      3rem;
    color:          var(--color-accent);
    line-height:    1;
    margin:         var(--space-1) 0;
}

.tour-sidebar__price-per {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    margin:     0;
}

.tour-sidebar__price-upgrade {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    margin-top: var(--space-2);
}

.tour-sidebar__specs {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction:column;
    gap:     var(--space-4);
    border-bottom:1px solid var(--color-border);
}

.tour-sidebar__spec {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
}

.tour-sidebar__spec svg { color: var(--color-accent); flex-shrink:0; }

.tour-sidebar__spec > div {
    display:        flex;
    flex-direction: column;
    gap:            1px;
}

.tour-sidebar__spec span:first-child {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
}

.tour-sidebar__spec strong {
    color: var(--color-text-primary);
}

.tour-sidebar > .btn {
    display:        block;
    margin:         var(--space-5) var(--space-6) var(--space-3);
    border-radius:  var(--radius);
    text-align:     center;
}

.tour-sidebar > .btn + .btn { margin-top: 0; }

.tour-sidebar__guarantees {
    list-style:     none;
    padding:        var(--space-5) var(--space-6);
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    border-top:     1px solid var(--color-border);
}

.tour-sidebar__guarantees li {
    display:    flex;
    align-items:center;
    gap:        var(--space-2);
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
}

.tour-sidebar__guarantees svg { color: #10B981; flex-shrink:0; }

/* ============================================================
   ARCHIVO DE TOURS (archive / page-tours)
   ============================================================ */

.tours-archive__body {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

/* Filtros */
.tours-filter {
    display:    flex;
    gap:        var(--space-3);
    flex-wrap:  wrap;
    margin-bottom:var(--space-10);
}

.tours-filter__btn {
    padding:      var(--space-2) var(--space-5);
    background:   var(--color-bg-secondary);
    border:       1px solid var(--color-border);
    border-radius:var(--radius);
    color:        var(--color-text-secondary);
    font-size:    var(--text-sm);
    font-weight:  600;
    cursor:       pointer;
    transition:   all var(--transition-fast);
    display:      flex;
    align-items:  center;
    gap:          var(--space-2);
}

.tours-filter__btn:hover,
.tours-filter__btn.is-active {
    border-color: var(--color-accent);
    color:        var(--color-accent);
    background:   var(--color-accent-subtle);
}

/* Grid 3 columnas para el archivo */
.tours-archive__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
}

/* ============================================================
   TOURS RELACIONADOS (carousel)
   ============================================================ */

.related-tours-section {
    padding-block:  var(--section-pad);
    background:     var(--color-bg-secondary);
    border-top:     1px solid var(--color-border);
}

/* ============================================================
   WYSIWYG / Contenido del editor
   ============================================================ */

.wysiwyg {
    font-size:   var(--text-base);
    line-height: 1.75;
    color:       var(--color-text-secondary);
}

.wysiwyg h2 { font-size: var(--text-xl);   margin: var(--space-8) 0 var(--space-4); color: var(--color-text-primary); }
.wysiwyg h3 { font-size: var(--text-lg);   margin: var(--space-6) 0 var(--space-3); color: var(--color-text-primary); }
.wysiwyg p  { margin: 0 0 var(--space-5); }
.wysiwyg ul, .wysiwyg ol { padding-left: var(--space-6); margin: 0 0 var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.wysiwyg a  { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.wysiwyg strong { color: var(--color-text-primary); font-weight: 700; }
.wysiwyg img { border-radius: var(--radius); max-width: 100%; height: auto; }
.wysiwyg blockquote {
    border-left:  3px solid var(--color-accent);
    padding-left: var(--space-6);
    margin:       var(--space-8) 0;
    color:        var(--color-text-secondary);
    font-style:   italic;
}

/* ============================================================
   SPECS TABLE (page-flota)
   ============================================================ */

.specs-section {
    padding-block:  var(--section-pad);
    background:     var(--color-bg-secondary);
    border-top:     1px solid var(--color-border);
}

.specs-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-10);
}

.specs-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--text-sm);
}

.specs-table thead tr {
    background:  var(--color-bg-tertiary);
}

.specs-table thead th {
    text-align:     left;
    padding:        var(--space-4) var(--space-6);
    font-size:      var(--text-xs);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-accent);
    border-bottom:  1px solid var(--color-border);
}

.specs-table__label {
    padding:     var(--space-3) var(--space-6);
    color:       var(--color-text-muted);
    width:       40%;
    border-bottom:1px solid var(--color-border);
}

.specs-table__value {
    padding:     var(--space-3) var(--space-6);
    color:       var(--color-text-primary);
    font-weight: 600;
    border-bottom:1px solid var(--color-border);
}

.specs-table tbody tr:hover .specs-table__label,
.specs-table tbody tr:hover .specs-table__value {
    background: var(--color-accent-subtle);
}

/* ============================================================
   EXCLUSIVOS — Paquetes
   ============================================================ */

.exclusive-packages {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

.exclusive-packages__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
    margin-top:            var(--space-14);
}

.exclusive-card {
    background:     var(--color-bg-secondary);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-xl);
    padding:        var(--space-8);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
    position:       relative;
    transition:     all var(--transition-base);
}

.exclusive-card:hover {
    border-color: rgba(232,163,61,0.4);
    transform:    translateY(-4px);
    box-shadow:   var(--shadow-card-lg);
}

.exclusive-card--featured {
    border-color: rgba(232,163,61,0.3);
    background:   var(--color-bg-tertiary);
}

.exclusive-card__badge {
    position:   absolute;
    top:        -12px;
    left:       50%;
    transform:  translateX(-50%);
    white-space:nowrap;
}

.exclusive-card__icon {
    width:          56px;
    height:         56px;
    background:     var(--color-accent-subtle);
    border:         1px solid rgba(232,163,61,0.2);
    border-radius:  var(--radius);
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          var(--color-accent);
}

.exclusive-card__icon svg { width: 24px; height: 24px; }

.exclusive-card__title {
    font-size:   var(--text-xl);
    font-weight: 700;
    margin:      0;
}

.exclusive-card__desc {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    line-height:1.6;
    margin:     0;
    flex:       1;
}

.exclusive-card__list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.exclusive-card__list li {
    display:    flex;
    align-items:center;
    gap:        var(--space-2);
    font-size:  var(--text-xs);
    color:      var(--color-text-secondary);
    font-weight:600;
}

.exclusive-card__list svg { color: var(--color-accent); flex-shrink:0; }

.exclusive-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     var(--space-4);
    border-top:      1px solid var(--color-border);
}

.exclusive-card__price {
    display:    flex;
    align-items:baseline;
    gap:        var(--space-1);
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
}

.exclusive-card__price strong {
    font-family: var(--font-display);
    font-size:   var(--text-2xl);
    color:       var(--color-accent);
}

/* Por qué exclusivo */
.exclusivos-why {
    padding-block:  var(--section-pad);
    background:     var(--color-bg-secondary);
    border-top:     1px solid var(--color-border);
}

.exclusivos-why__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-8);
    margin-top:            var(--space-14);
}

.exclusivos-why__num {
    font-family:    var(--font-display);
    font-size:      3rem;
    color:          var(--color-accent);
    opacity:        0.3;
    line-height:    1;
    display:        block;
    margin-bottom:  var(--space-4);
}

.exclusivos-why__title {
    font-size:   var(--text-lg);
    font-weight: 700;
    margin:      0 0 var(--space-3);
}

.exclusivos-why__desc {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    line-height:1.65;
    margin:     0;
}

/* CTA exclusivos */
.exclusivos-cta {
    padding-block:  var(--section-pad);
    background:     var(--color-bg-primary);
    border-top:     1px solid var(--color-border);
}

.exclusivos-cta__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-12);
    flex-wrap:       wrap;
}

.exclusivos-cta__title {
    font-size:   clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.1;
    margin:      0 0 var(--space-4);
}

.exclusivos-cta__desc {
    font-size:  var(--text-base);
    color:      var(--color-text-muted);
    max-width:  48ch;
    margin:     0;
}

.exclusivos-cta__actions {
    display:  flex;
    gap:      var(--space-4);
    flex-wrap:wrap;
    flex-shrink:0;
}

/* ============================================================
   FAQ SECTION — page-faq.php
   ============================================================ */

.faq-section {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

.faq-section__inner {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   var(--space-12);
    align-items:           start;
}

.faq-accordion { display: flex; flex-direction: column; gap: 0; }

.faq-accordion__category {
    margin-top:   var(--space-8);
    margin-bottom:var(--space-4);
}

.faq-accordion__category:first-child { margin-top: 0; }

.faq-accordion__category-label {
    font-size:      var(--text-xs);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color:          var(--color-accent);
    margin:         0;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:first-of-type { border-top: 1px solid var(--color-border); }

.faq-item__question {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
    padding:         var(--space-5) 0;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    color:           var(--color-text-primary);
    font-size:       var(--text-base);
    font-weight:     600;
    font-family:     var(--font-body);
    transition:      color var(--transition-fast);
}

.faq-item__question:hover { color: var(--color-accent); }

.faq-item__question[aria-expanded="true"] { color: var(--color-accent); }

.faq-item__icon {
    flex-shrink:0;
    transition: transform var(--transition-base);
    color:      var(--color-text-muted);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon {
    transform: rotate(180deg);
    color:     var(--color-accent);
}

.faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.32s ease;
}

.faq-item__answer.is-open { grid-template-rows: 1fr; }

.faq-item__answer[hidden] { display: none; }

.faq-item__answer-inner {
    overflow: hidden;
    min-height: 0;
    padding-bottom: var(--space-5);
}

.faq-item__answer-inner p {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    line-height:1.7;
    margin:     0;
}

/* FAQ sidebar */
.faq-contact-card {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-8);
    display:       flex;
    flex-direction:column;
    gap:           var(--space-5);
    text-align:    center;
    margin-bottom: var(--space-6);
}

.faq-contact-card__icon {
    width:          64px;
    height:         64px;
    background:     var(--color-accent-subtle);
    border:         1px solid rgba(232,163,61,0.2);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          var(--color-accent);
    margin:         0 auto;
}

.faq-contact-card__title {
    font-size:   var(--text-lg);
    font-weight: 700;
    margin:      0;
}

.faq-contact-card__desc {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    margin:     0;
}

/* Botones de la tarjeta: textos largos (WhatsApp, email) sin desbordar */
.faq-contact-card .btn {
    white-space:    normal;
    line-height:    1.35;
    max-width:      100%;
    min-width:      0;
    padding-inline: var(--space-4);
    letter-spacing: 0.04em;
    overflow-wrap:  anywhere;
    word-break:     break-word;
    text-align:     center;
}

/* El email en minúsculas y un punto más compacto (legible y entero) */
.faq-contact-card .btn[href^="mailto:"] {
    text-transform: lowercase;
    font-size:      var(--text-xs);
    letter-spacing: 0.02em;
}

.faq-cta-mini {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-6) var(--space-8);
    display:       flex;
    flex-direction:column;
    gap:           var(--space-4);
    text-align:    center;
}

.faq-cta-mini p {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    margin:     0;
}

/* ============================================================
   GALERÍA
   ============================================================ */

.gallery-section {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

.gallery-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-3);
}

.gallery-item {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius);
    aspect-ratio:  1;
    display:       block;
    background:    var(--color-bg-secondary);
}

.gallery-item__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out-expo);
    display:    block;
}

.gallery-item:hover .gallery-item__img { transform: scale(1.06); }

.gallery-item__overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(10,10,10,0.5);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity var(--transition-base);
    color:           white;
}

.gallery-item:hover .gallery-item__overlay { opacity: 1; }

/* Gallery empty state */
.gallery-empty { padding: var(--space-16) 0; }

.gallery-empty__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-3);
    margin-bottom:         var(--space-12);
    opacity:               0.4;
}

.gallery-empty__item {
    aspect-ratio:  1;
    border-radius: var(--radius);
    overflow:      hidden;
}

.gallery-empty__shimmer {
    width:      100%;
    height:     100%;
    background: linear-gradient(90deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 100%);
    background-size: 200% 100%;
    animation:  shimmer 1.5s infinite;
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.gallery-empty__message {
    text-align: center;
    max-width:  400px;
    margin:     0 auto;
    display:    flex;
    flex-direction:column;
    gap:        var(--space-5);
}

.gallery-empty__message h2 { font-size: var(--text-2xl); }
.gallery-empty__message p  { color: var(--color-text-muted); }

/* Lightbox */
.gallery-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         var(--z-modal);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-8);
}

.gallery-lightbox[hidden] { display: none; }

.gallery-lightbox__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.92);
    cursor:     pointer;
}

.gallery-lightbox__img-wrap {
    position:   relative;
    z-index:    1;
    max-width:  90vw;
    max-height: 85vh;
    display:    flex;
}

.gallery-lightbox__img {
    max-width:    100%;
    max-height:   85vh;
    object-fit:   contain;
    border-radius:var(--radius);
    display:      block;
}

.gallery-lightbox__close {
    position:        absolute;
    top:             var(--space-6);
    right:           var(--space-6);
    z-index:         2;
    width:           44px;
    height:          44px;
    background:      rgba(255,255,255,0.1);
    border:          1px solid rgba(255,255,255,0.2);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           white;
    transition:      all var(--transition-fast);
}

.gallery-lightbox__close:hover { background: rgba(255,255,255,0.2); }

.gallery-lightbox__nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;
    width:           48px;
    height:          48px;
    background:      rgba(255,255,255,0.1);
    border:          1px solid rgba(255,255,255,0.2);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           white;
    transition:      all var(--transition-fast);
}

.gallery-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.gallery-lightbox__nav--prev { left:  var(--space-6); }
.gallery-lightbox__nav--next { right: var(--space-6); }

/* ============================================================
   CONTACT — page-contacto
   ============================================================ */

.contact-section {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

.contact-layout {
    display:               grid;
    grid-template-columns: 1fr 400px;
    gap:                   var(--space-12);
    align-items:           start;
}

.contact-form-wrap__title {
    font-size:   var(--text-2xl);
    font-weight: 700;
    margin-bottom:var(--space-8);
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--space-5);
}

.contact-form__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-6);
    flex-wrap:       wrap;
    margin-top:      var(--space-6);
}

.contact-form__legal {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    margin:     0;
}

.contact-form__legal a { color: var(--color-accent); }

.contact-alert {
    display:      flex;
    align-items:  flex-start;
    gap:          var(--space-3);
    padding:      var(--space-4) var(--space-5);
    border-radius:var(--radius);
    font-size:    var(--text-sm);
    font-weight:  600;
    margin-bottom:var(--space-6);
}

.contact-alert--success {
    background:  rgba(16,185,129,0.1);
    border:      1px solid rgba(16,185,129,0.25);
    color:       #10B981;
}

.contact-alert--error {
    background:  rgba(239,68,68,0.1);
    border:      1px solid rgba(239,68,68,0.25);
    color:       #EF4444;
}

/* Contact info sidebar */
.contact-info__card {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-8);
    margin-bottom: var(--space-6);
}

.contact-info__title {
    font-size:     var(--text-xl);
    font-weight:   700;
    margin-bottom: var(--space-6);
}

.contact-info__list {
    list-style:     none;
    padding:        0;
    margin:         0 0 var(--space-6);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.contact-info__list li {
    display:    flex;
    gap:        var(--space-4);
    align-items:flex-start;
}

.contact-info__list svg { color: var(--color-accent); flex-shrink:0; margin-top:2px; }

.contact-info__label {
    display:     block;
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    font-weight: 600;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.contact-info__value {
    display:   block;
    font-size: var(--text-sm);
    color:     var(--color-text-secondary);
    font-weight:600;
}

a.contact-info__value:hover { color: var(--color-accent); }

.contact-info__wa-cta { margin-top: var(--space-4); }

.contact-map {
    border-radius:var(--radius-xl);
    overflow:     hidden;
    height:       280px;
    border:       1px solid var(--color-border);
}

.contact-map__iframe {
    width:   100%;
    height:  100%;
    border:  none;
    display: block;
}

/* ============================================================
   RESERVAR PAGE
   ============================================================ */

.reservar-section {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

.reservar-section__inner {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   var(--space-12);
    align-items:           start;
}

.booking-widget-wrap__title {
    font-size:     var(--text-2xl);
    font-weight:   700;
    margin-bottom: var(--space-8);
}

.prereserva-form-wrap__header {
    margin-bottom: var(--space-8);
}

.prereserva-form-wrap__header h2 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-3); }
.prereserva-form-wrap__header p  { color: var(--color-text-muted); font-size: var(--text-base); }

.reservar-success {
    text-align:     center;
    padding:        var(--space-16) var(--space-8);
    background:     var(--color-bg-secondary);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-xl);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-6);
}

.reservar-success__icon { color: #10B981; }
.reservar-success h2 { font-size: var(--text-2xl); }
.reservar-success p  { color: var(--color-text-muted); max-width: 40ch; margin: 0; }

/* Sidebar reservar */
.reservar-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }

.reservar-sidebar__card {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-6) var(--space-7);
}

.reservar-sidebar__card h3 {
    font-size:     var(--text-base);
    font-weight:   700;
    margin-bottom: var(--space-5);
    color:         var(--color-text-primary);
}

/* Nota informativa (duración real vs briefing/equipo) */
.reservar-sidebar__note h3 { margin-bottom: var(--space-3); }
.reservar-sidebar__note p {
    font-size:   var(--text-sm);
    line-height: 1.6;
    color:       var(--color-text-secondary);
    margin:      0;
}

.reservar-guarantees {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    font-size:      var(--text-sm);
    color:          var(--color-text-secondary);
    font-weight:    600;
}

.reservar-sidebar__wa {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-3);
}

.reservar-sidebar__wa p {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    text-align: center;
    margin:     0;
}

/* Booking widget */
.booking-widget {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-4);
}

.booking-widget__price {
    display:    flex;
    align-items:baseline;
    gap:        var(--space-2);
    padding:    var(--space-5) var(--space-6);
    background: var(--color-bg-tertiary);
    border-radius:var(--radius);
    border:     1px solid var(--color-border);
}

.booking-widget__price-from,
.booking-widget__price-per { font-size: var(--text-xs); color: var(--color-text-muted); }

.booking-widget__price-amount {
    font-family: var(--font-display);
    font-size:   var(--text-2xl);
    color:       var(--color-accent);
}

.booking-widget__guarantees {
    list-style:     none;
    padding:        var(--space-5);
    margin:         0;
    background:     var(--color-bg-tertiary);
    border-radius:  var(--radius);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.booking-widget__guarantees li {
    display:    flex;
    align-items:center;
    gap:        var(--space-2);
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
}

.booking-widget__guarantees svg { color: #10B981; }

/* Default page */
.page-content-section {
    padding-block: var(--section-pad);
    background:    var(--color-bg-primary);
}

.page-content-section__inner {
    max-width:    760px;
    margin-inline:auto;
}

/* ============================================================
   RESPONSIVE — Tours
   ============================================================ */

@media (max-width: 1024px) {
    .single-tour__layout { grid-template-columns: 1fr; }
    .tour-sidebar { position: static; }
    .single-tour__sidebar { order: -1; }

    .tours-archive__grid    { grid-template-columns: repeat(2, 1fr); }
    .exclusive-packages__grid { grid-template-columns: repeat(2, 1fr); }
    .exclusivos-why__grid   { grid-template-columns: repeat(2, 1fr); }
    .contact-layout         { grid-template-columns: 1fr; }
    .faq-section__inner     { grid-template-columns: 1fr; }
    .reservar-section__inner{ grid-template-columns: 1fr; }

    .tour-section--cols2    { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .tours-archive__grid    { grid-template-columns: 1fr; }
    .gallery-grid           { grid-template-columns: repeat(2, 1fr); }
    .exclusive-packages__grid { grid-template-columns: 1fr; }
    .exclusivos-why__grid   { grid-template-columns: 1fr; }
    .contact-form__row      { grid-template-columns: 1fr; }
    .exclusivos-cta__inner  { flex-direction: column; }

    .gallery-empty__grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .page-hero__actions     { flex-direction: column; }
    .tour-hero__actions     { flex-direction: column; }
    .gallery-grid           { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .contact-form__footer   { flex-direction: column; align-items: stretch; }
}
