:root{
  /* Colores principales de la plantilla (tema oscuro) */
  --bg:#0b1117; 
  --panel:#111821; 
  --card:#121a23; 
  --border:#1f2a36;
  --text:#e8edf5; 
  --muted:#9fb2c5; 
  --cyan:#00e0ff; 
  --purple:#7c4dff; 
  --green:#22d3a3;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --nav-h: 56px;
  --radius: 6px;

  /* Acentos app */
  --chip1-accent:var(--cyan); 
  --chip2-accent:var(--purple); 
  --map-glow-color: rgba(0, 224, 255, 0.6); 
  --chip-glow-color: rgba(124, 77, 255, 0.4); 

  /* Chip visitado */
  --site-chip-bg:var(--card); 
  --site-chip-text:var(--text); 
  --site-chip-border-img:var(--cyan); 

  /* Chip pendiente */
  --pending-bg-color:#232c37;
  --pending-text-color:var(--cyan); 
  --pending-border-color:var(--purple);

  /* Botones neón */
  --neon-blue: #3a47d5;
  --neon-purple: #8a2be2;
}

.contador-aventureros {
    margin-top: 14px;
    padding: 14px 22px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    border-radius: 14px;
    background: linear-gradient(120deg, #ff9f43, #f368e0, #48dbfb, #1dd1a1);
    background-size: 300% 300%;
    animation: movimientoColor 6s ease infinite;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.icono-brujula {
    font-size: 32px;
    animation: giroBrujula 3.5s ease-in-out infinite;
    display: inline-block;
}

.contador-aventureros span {
    font-size: 34px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255,255,255,0.8),
                 0 0 20px rgba(255,255,255,0.6);
}

@keyframes movimientoColor {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes giroBrujula {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(18deg); }
    100% { transform: rotate(0deg); }
}




/* ======================================================= */
/* ===== SWEETALERT: ALERTA EN FONDO BLANCO ===== */
/* ======================================================= */

.swal2-popup.swal-viajero-claro {
  background: #ffffff !important;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 55px rgba(0,0,0,0.25);
  color: #1f2937 !important;
  padding: 20px 24px 24px;
}

.swal-viajero-claro .swal2-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #111827 !important;
}

.swal-viajero-claro .swal2-html-container {
  font-size: 1rem;
  color: #374151 !important;
}

.swal-viajero-claro .swal2-timer-progress-bar {
  background: #3b82f6 !important;
  height: 3px;
  border-radius: 999px;
}

/* ======================================================= */
/* ===== ESTILOS ADICIONALES PARA BOTONES DE LA SECCIÓN HERO ===== */
/* ======================================================= */

/* --- Contenedor de Promoción de Trivia --- */
.trivia-promo-box {
  margin: 25px 0 25px 0;
  padding: 20px;
  background-color: rgba(58, 71, 213, 0.1); 
  border: 1px solid var(--neon-blue); 
  border-radius: 10px;
  max-width: 480px;
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.trivia-promo-box p {
  font-size: 1em;
  color: var(--text);
  line-height: 1.5;
  margin: 5px 0;
}

.trivia-promo-box strong {
  color: var(--neon-purple); 
}

/* --- Contenedor CTA de registro --- */
.cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 0;
  color:#fff;
  justify-content: center;
}

/* --- 1. BOTÓN PRINCIPAL: "Prueba tu conocimiento" (.btn-cta-main) --- */
.btn-cta-main {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 18px 35px !important; 
  border-radius: 12px !important; 
  font-size: 1.2em !important; 
  font-weight: bold !important;
  text-transform: uppercase !important;
  cursor: pointer;
  
  background: linear-gradient(90deg, var(--neon-blue) 0%, var(--neon-purple) 100%) !important;
  color: var(--text) !important; 
  box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6), 0 0 0 0 rgba(58, 71, 213, 0) !important;
  transition: all 0.3s ease-in-out; 

  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: 15px;
  width: 100%;
  max-width: 320px;
}

.btn-cta-main i {
  margin-right: 10px; 
  font-size: 1.3em;
}

.btn-cta-main:hover {
  background: linear-gradient(90deg, #5d8aff 0%, #a052ff 100%) !important; 
  box-shadow: 0 10px 35px rgba(138, 43, 226, 0.8), 0 0 15px rgba(58, 71, 213, 0.8) !important;
  transform: translateY(-3px) !important; 
}

/* Quita brillo diagonal de .btn-primary */
.btn-cta-main::after {
  display: none !important;
}

.btn-cta-main::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
  transition: all 0.7s ease-out;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: -1;
}

.btn-cta-main:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* --- 2. BOTÓN SECUNDARIO: "Registrarse" (.btn-hero-register) --- */
.btn-hero-register {
  padding: 16px 30px !important; 
  border-radius: 10px !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  
  background: none !important; 
  color: #5d8aff !important; 
  border: 2px solid var(--neon-blue) !important; 
  
  box-shadow: 0 4px 15px rgba(58, 71, 213, 0.3) !important;
  transform: none !important; 
  
  width: 100%;
  max-width: 320px;
}

.btn-hero-register:hover {
  background: #1e2a3a !important; 
  color: var(--neon-purple) !important; 
  border-color: var(--neon-purple) !important; 
  box-shadow: 0 6px 20px rgba(138, 43, 226, 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-hero-register::after {
  display: none !important;
}

/* Media para escritorio: botones más cortos y CTA alineada a la izquierda */
@media (min-width: 1001px) {
  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .cta {
    justify-content: flex-start;
  }
  .btn-cta-main, .btn-hero-register {
    width: auto;
  }
}

/* ======================================================= */
/* ===== BOTÓN PRIMARIO ANIMADO (BASE) ===== */
.btn-primary {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden; 
  
  background: #2f7af8;
  color: white;
  box-shadow: 0 4px 15px rgba(47, 122, 248, 0.4);
  
  position: relative; 
  z-index: 1; 
  transition: transform .15s ease, background .3s ease, box-shadow .3s ease;
}

.btn-primary:hover {
  background: #2a6ee0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(47, 122, 248, 0.6);
}
.btn-primary:active {
  transform: translateY(1px);
}

@keyframes shiny-sweep {
  0% {
    transform: skewX(-25deg) translateX(-100%);
  }
  100% {
    transform: skewX(-25deg) translateX(200%);
  }
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.5) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transform: skewX(-25deg) translateX(-100%); 
  transition: opacity .4s ease;
  z-index: 2; 
}

.btn-primary:hover::after {
  opacity: 1;
  animation: shiny-sweep 1s ease-in-out;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 600px at 86% 12%, #00e0ff1c, transparent 60%),
    radial-gradient(900px 600px at 12% 90%, #7c4dff1c, transparent 60%),
    linear-gradient(180deg,#0a1016 0%,#0f1620 100%);
}

/* ===== Navbar ===== */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:14px 20px; background:rgba(10,16,22,.7);
  border-bottom:1px solid #0f1a24; backdrop-filter: blur(14px);
}
.brand{
  display:flex; align-items:center; gap:0;
  text-decoration:none; color:var(--text); font-weight:800; padding:0;
}
.nav-logo{
  height:130px; width:auto;
  filter: drop-shadow(0 0 5px rgba(0, 224, 255, 0.3));
}
.links{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:6px; width:100%; justify-content:flex-start;
}
.links a{
  color:var(--muted); text-decoration:none; font-weight:600;
}
.links a:hover{color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius); padding:10px 14px; font-weight:700;
  text-decoration:none; cursor:pointer; transition:.2s;
}
.btn-ghost{background:#0f1720; color:#cfe4f2; border:1px solid var(--border)}
.btn-ghost:hover{background:#141c26}

@media (max-width: 720px){
  :root{ --nav-h: 100px; }
  .nav{flex-direction:column; align-items:flex-start; padding:10px 16px}
  .nav-logo{height:130px}
  .links{flex-direction:column; align-items:flex-start; width:100%; margin-top:8px; gap:8px}
  .links a, .btn-ghost{display:block; width:100%; text-align:left; padding:8px 0}
}

/* ===== Hero ===== */
.hero{
  max-width:1200px; margin:0 auto;
  padding: clamp(24px,6vw,72px) 20px;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; align-items:center;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.hero-text h1{
  margin:0 0 10px;
  font-size: clamp(28px,4.6vw,54px);
  font-weight:800;
}
.grad{
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{color:var(--muted); max-width:620px}

.hero-media{
  margin:0; display:grid; place-items:center;
  border-radius:var(--radius); padding:14px;
  background:#0f1720; border:1px solid var(--border); box-shadow:var(--shadow);
}
.hero-media img{
  width:100%; height:auto; max-width:560px; object-fit:contain; 
  box-shadow: 0 0 25px 5px rgba(0, 210, 255, 0.4),
              0 0 40px 10px rgba(0, 224, 255, 0.2);
  border-radius: var(--radius);
}

/* VIDEO FIJO DEBAJO DEL MAPA */
.hero-video-wrapper{
  width:100%;
  grid-column: 1 / -1;        /* ocupa todo el ancho del grid debajo del hero */
  margin-top:20px;
}
.hero-video-wrapper video{
  width:100%;
  max-width:600px;
  border-radius:16px;
  display:block;
  margin:0 auto;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  max-height:80vh;
  object-fit:cover;
}

@media (max-width: 1000px){
  .hero{grid-template-columns:1fr}
}

/* ===== Secciones & títulos ===== */
.section{
  max-width:1100px; margin:0 auto;
  padding: clamp(28px,6vw,64px) 20px;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.title{
  text-align:center; margin:0 0 10px;
  font-size: clamp(22px,3vw,34px); font-weight:800;
}
.copy{text-align:center; color:var(--muted)}
.texto-blanco{
  color:#fff; font-size:1.1rem; line-height:1.6;
  text-align:center; max-width:900px; margin:0 auto;
}

/* ===== Info + progreso ===== */
.demo-info{max-width: 860px; margin: 0 auto 22px; text-align: center; color: var(--muted)}
.mini-progress{ display:grid; gap:8px; justify-items:center }
.mini-track{
  width:min(560px, 92vw); height:12px; border-radius:999px;
  background:#0f1720; border:1px solid var(--border); overflow:hidden;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
}
.mini-bar{
  width:var(--val,0%); height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  transition:width .4s ease;
}
.mini-meta{ font-weight:800; color:#cfe4f2; letter-spacing:.2px }

/* ===== Grid de chips ===== */
.demo-chips { text-align:center; margin-top:10px }
.chips-grid{
  display:grid; gap:32px; padding: 10px 20px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  justify-items:center;
}
.chip{
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  transition: transform .3s ease;
}

/* Visitado */
.chip.visited img{
  width:100px; height:100px; border-radius:var(--radius);
  object-fit:cover; border:2px solid var(--site-chip-border-img); 
  box-shadow:0 0 10px var(--chip1-accent);
  transition: transform .3s, box-shadow .3s;
}
.chip.visited:hover img{
  transform:scale(1.08);
  box-shadow:0 0 20px var(--chip1-accent);
}
.chip.visited p{
  margin-top:8px; font-size:.95rem; color:var(--site-chip-text);
}

/* Pendiente */
.chip.pending{
  width:100px; height:100px; border-radius:var(--radius);
  background:var(--pending-bg-color)!important;
  border:1px solid var(--pending-border-color)!important;
  position:relative; display:flex; justify-content:center; align-items:center;
  animation: glow 3s infinite ease-in-out;
}
.chip.pending:hover{
  background:#2a3541!important;
  animation: glow 1.5s infinite ease-in-out;
}
.chip.pending p{
  position:absolute; bottom:-24px; width:100%;
  color:var(--pending-text-color);
  font-weight:700; font-size:.92rem; text-align:center;
}

@keyframes glow {
  0% { box-shadow: 0 0 0 0 transparent }
  50%{ box-shadow: 0 0 8px 0 var(--chip-glow-color) }
  100%{ box-shadow: 0 0 0 0 transparent }
}

/* ===== Destinos destacados (3 imágenes) ===== */
.destinos-destacados{
  display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap;
  gap:24px; margin:60px auto; max-width:1100px; padding:0 20px;
}
.destino-card{
  background:#0b1219; border:1px solid #1e2b38; border-radius:14px; overflow:hidden;
  width:32%; min-width:280px; max-width:350px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; text-align:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.destino-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 36px rgba(93,169,255,.25);
}
.destino-card img{
  width:100%; height:220px; object-fit:cover;
}
.destino-info{ padding:14px 16px 20px }
.destino-info h3{
  margin:8px 0 6px; color:#5da9ff; font-size:1.1rem;
}
.destino-info p{
  margin:0; color:#9bb0c9; font-size:.95rem; line-height:1.6;
}

@media (max-width: 900px){
  .destino-card{ width:100%; max-width:480px }
}

/* ===== Modales ===== */
.modal{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 100;
}
.modal.active{ display:flex }

/* Contenido modal por defecto (detalle de sitio) */
.modal-content{
  width: min(720px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px 22px 18px;
  position: relative;
  color: var(--text);
  text-align:center;

  display:flex;
  flex-direction:column;
  max-height: min(92vh, 880px);
}
.close-btn{
  position:absolute; right:8px; top:6px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size:22px; line-height:1; display:grid; place-items:center;
  cursor:pointer; transition: transform .15s ease, opacity .2s ease;
}
.close-btn:hover{ transform:translateY(-1px) }

.modal-img{
  display:block;
  width:100%;
  height:auto;
  max-height: 70vh;
  object-fit: contain !important;
  object-position:center;
  background:#0f1720;
  border-radius:var(--radius);
  margin-bottom:15px;
  border:2px solid var(--chip1-accent);
}
.modal-title{ color:var(--cyan); margin:0 0 10px }
.modal-description{ color:var(--muted); margin-bottom:20px; text-align:left }

/* ==== Modal del parlante/intro (#about-modal) */
#about-modal{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display:none; padding:24px; z-index:110;
}
#about-modal.active{ display:grid; place-items:center }
#about-modal .modal-content{
  width:min(520px,92vw); max-height:90vh; overflow:auto;
}

/* Galería del modal intro */
.about-gallery{
  margin-top:14px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.about-card{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  background:#0f1720; border:1px solid #1f2a36;
  background-size:cover; background-position:center;
  transform:translateY(4px);
  transition:filter .35s ease, transform .35s ease,
             border-color .35s ease, box-shadow .35s ease;
}
.about-card.locked{
  filter:grayscale(1) brightness(.65);
}
.about-card.locked::after{
  content:"?";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:800; font-size:28px;
  color:rgba(234,242,255,.9);
  text-shadow:0 3px 10px rgba(0,0,0,.6);
  background:radial-gradient(transparent 35%, rgba(0,0,0,.45));
}
.about-card.unlocked{
  filter:none; transform:translateY(0);
  border-color:rgba(61,123,255,.55);
  box-shadow:0 10px 28px rgba(61,123,255,.25);
}
@media (min-width:1100px){
  #about-modal .modal-content{width:min(600px,84vw)}
}

/* ===== Botón parlante ===== */
.speaker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(90deg, #0077ff, #5c40ff);
  font-size: 1.2rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 119, 255, 0.4);
}

.speaker-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}

/* ===== Footer ===== */
.footer{
  text-align:center;
  color:var(--muted);
  padding:22px;
}