/* ═══════════════════════════════════════════════════════
   TOURS.CSS — Mayan Routes
   Complementa index.css. Ambos deben estar vinculados.
═══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   HERO COMPACTO
══════════════════════════════════════════════════════ */
.tours-hero {
  position: relative;
  height: 52vh; min-height: 380px;
  display: flex; align-items: flex-end;
  padding-bottom: 64px;
  overflow: hidden;
}

/* 👇 Cambia esta imagen por la tuya */
.tours-hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.72) 65%, var(--color-surface) 100%),
    url('imgs/portada_tours.webp') center / cover no-repeat;
  animation: zoomBg 18s ease-in-out infinite alternate;
}

.tours-hero-content {
  position: relative; z-index: 1;
  padding: 0 80px;
}
.tours-hero-content h1 {
  font-family: var(--font-title);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: .95;
  color: var(--color-white);
  margin: 12px 0 16px;
}
.tours-hero-content h1 span { color: var(--color-gold); }
.tours-hero-sub {
  font-size: clamp(.85rem, 1.4vw, 1rem);
  font-weight: 300;
  color: rgba(255,255,255,.7);
  max-width: 680px;
}


/* ══════════════════════════════════════════════════════
   TOURS — FILAS HORIZONTALES
══════════════════════════════════════════════════════ */
.tours-main {
  background: var(--color-surface);  /* #131c21 */
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;  /* 👈 15px entre cada tour */
}

.tour-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  transition: background .3s;
}
.tour-row:hover { background: rgba(66,183,140,.04); }

/* Imagen derecha en filas pares */
.tour-row.reverse { direction: rtl; }
.tour-row.reverse > * { direction: ltr; }


/* ── Imagen ──────────────────────────────────────── */
.tour-row-img {
  position: relative;
  overflow: hidden;
}
.tour-row-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  filter: brightness(.85) saturate(1.1);
}
.tour-row:hover .tour-row-img img {
  transform: scale(1.05);
  filter: brightness(.95) saturate(1.2);
}

/* Número más visible */
.tour-row-num {
  position: absolute;
  bottom: 16px; left: 20px;
  font-family: var(--font-title);
  font-size: 7rem;
  line-height: 1;
  color: rgba(255,255,255,.28);         /* más visible: era .12 */
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  pointer-events: none;
  user-select: none;
  letter-spacing: -.02em;
}
.tour-row.reverse .tour-row-num { left: auto; right: 20px; }


/* ── Texto ───────────────────────────────────────── */
.tour-row-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 72px;
  gap: 14px;
}

.tour-category {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 500;
}

.tour-row-body h2 {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--color-white);
  line-height: 1.05;
}

/* El h2 también es link */
.tour-row-body h2 a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.tour-row-body h2 a:hover { color: var(--color-gold); }

.tour-row-body > p {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 420px;
}

/* Detalles (duración, grupo, salida) */
.tour-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}
.tour-details li {
  font-size: .82rem;
  color: var(--color-muted);
  display: flex; align-items: center; gap: 8px;
}

/* ── Botones — dos en fila, alineados a la derecha ── */
.tour-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}

.tour-btn-detail {
  display: inline-block;
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 40px;
  transition: border-color .25s, color .25s, transform .2s;
}
.tour-btn-detail:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

.tour-btn {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-dark);
  border: 1px solid var(--color-gold);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 40px;
  transition: background .25s, color .25s, transform .2s;
}
.tour-btn:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════
   CTA CIERRE — ANÍMESE A RESERVAR
══════════════════════════════════════════════════════ */
.tours-cta {
  position: relative;
  text-align: center;
  padding: 120px 48px;
  overflow: hidden;
}

.tours-cta-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--color-surface) 0%, rgba(0,0,0,.7) 40%, rgba(13,43,26,.8) 100%),
    url('imgs/portada_tours.webp') center / cover no-repeat fixed;
}

.tours-cta-content {
  position: relative; z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.tours-cta-content .label { margin-bottom: 16px; }

.tours-cta-content h2 {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--color-white);
  line-height: 1;
  margin-bottom: 20px;
}
.tours-cta-content h2 span { color: var(--color-gold); }

.tours-cta-content p {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  margin-bottom: 36px;
}

.tours-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn-primary {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-dark);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 40px;
  transition: background .25s, transform .2s;
}
.cta-btn-primary:hover { background: var(--color-gold-light); transform: translateY(-2px); }

.cta-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,.4);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 40px;
  transition: border-color .25s, color .25s, transform .2s;
}
.cta-btn-secondary:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-2px); }


/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tours-hero-content { padding: 0 40px; }

  .tour-row { grid-template-columns: 1fr; min-height: auto; }
  .tour-row.reverse { direction: ltr; }
  .tour-row-img { height: 280px; }
  .tour-row-num { font-size: 5rem; }
  .tour-row-body { padding: 40px; }
  .tour-row-body > p { max-width: 100%; }
  .tour-actions { justify-content: flex-start; }

  .tours-cta { padding: 80px 24px; }
}

@media (max-width: 600px) {
  .tours-hero-content { padding: 0 24px; }
  .tour-row-body { padding: 32px 24px; }
  .tours-main { padding: 40px 0; gap: 10px; }
  .tour-actions { flex-direction: column; align-items: stretch; }
  .tour-btn, .tour-btn-detail { text-align: center; }
}