/* ════════════════════════════════════════════════════════════════════════════
   theme_tour.css — Iteración 25
   Estilos del mini-tour de bienvenida del campus ESSAM.
   Estética coherente con la app: verde pastel de fondo, verde profundo
   para el texto, dorado oliva para acentos, Cinzel para titulares.
   ──────────────────────────────────────────────────────────────────────── */
.tour-overlay{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 48, 30, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 20px;
  animation: tourFadeIn .6s ease both;
}
@keyframes tourFadeIn{ from{ opacity: 0 } to{ opacity: 1 } }

.tour-card{
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px);
  background: linear-gradient(160deg, #F4FAF6 0%, #EDF4EF 100%);
  border: 1px solid rgba(42, 90, 60, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(12, 40, 22, 0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: tourCardIn .7s ease both;
}
@keyframes tourCardIn{ from{ opacity: 0; transform: translateY(18px) scale(.98) } to{ opacity: 1; transform: none } }

.tour-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px 8px;
}
.tour-brand{
  font-family: 'Cinzel', serif;
  font-size: 1.05rem; letter-spacing: .12em;
  color: #2A5A3C;
}
.tour-skip{
  background: transparent; border: 1px solid rgba(138, 115, 75, 0.5);
  color: #8A734B; font-size: .8rem; padding: 5px 12px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  transition: background .2s;
}
.tour-skip:hover{ background: rgba(138, 115, 75, 0.12); }

.tour-body{
  padding: 8px 30px 6px;
  text-align: center;
  overflow-y: auto;
}
.tour-icon{ font-size: 2.6rem; margin: 6px 0 2px; }
.tour-body h2{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  letter-spacing: .04em;
  color: #1E3D2A;
  margin: 4px 0 10px;
  line-height: 1.3;
}
.tour-body p{
  font-size: clamp(.92rem, 2.6vw, 1.02rem);
  color: #37504a;
  line-height: 1.6;
  margin: 0 0 18px;
  text-align: left;
}

.tour-body.tour-final .tour-fin-icon{ font-size: 2.6rem; margin: 10px 0 2px; }
.tour-body.tour-final p{ text-align: center; }

.tour-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 22px 20px;
}
.tour-dots{ display: flex; gap: 7px; flex: 1; justify-content: flex-start; }
.tour-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(42, 90, 60, 0.22);
  transition: background .25s;
}
.tour-dot.on{ background: #8A734B; }

.tour-btn{
  font-family: 'Cinzel', serif;
  font-size: .85rem; letter-spacing: .08em;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid rgba(42, 90, 60, 0.35);
  background: transparent;
  color: #2A5A3C;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.tour-btn:hover{ background: rgba(42, 90, 60, 0.10); }
.tour-btn:active{ transform: scale(.97); }
.tour-next.tour-go{
  background: #2A5A3C; color: #F4FAF6;
  border-color: #2A5A3C;
}
.tour-next.tour-go:hover{ background: #1E3D2A; }

@media (max-width: 480px){
  .tour-body{ padding: 4px 20px 4px; }
  .tour-foot{ padding: 10px 14px 16px; }
  .tour-btn{ padding: 9px 12px; font-size: .78rem; }
}