/* Retro Gamer theme basado en la estética del logo TrueGamer */
:root{
  --tg-bg:#0a0e1f;          /* fondo muy oscuro */
  --tg-text:#ffffff;        /* texto */
  --tg-primary:#a855f7;     /* violeta neon */
  --tg-secondary:#00e5ff;   /* cyan neon */
  --tg-accent:#ff007a;      /* magenta */
}


@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700&family=Inter:wght@300;400;700&display=swap');

html, body{
  background: radial-gradient(ellipse at top, var(--tg-bg) 0%, #000 70%);
  color: var(--tg-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

a{ color: var(--tg-secondary); }
a:hover{ color: var(--tg-primary); }

.navbar-brand, h1, h2, h3, .brand-pixel{
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 1px;
}

.navbar{
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.85) 60%, #000 100%);
  border-bottom: 2px solid var(--tg-primary);
  box-shadow: 0 0 20px var(--tg-primary);
  margin-bottom:0;
  padding-block:.35rem;
}

.navbar .navbar-nav{
  margin-bottom:0 !important;
}

.nav-link, .navbar-brand{
  color: var(--tg-text) !important;
}
.nav-link:hover{
  color: #000 !important;
}

.btn-neon{
  --shadow: 0 0 5px var(--tg-primary), 0 0 15px var(--tg-primary), 0 0 30px var(--tg-primary);
  background: transparent;
  color: var(--tg-primary);
  border: 2px solid var(--tg-primary);
  box-shadow: var(--shadow);
}
.btn-neon:hover{ color:#000; background: var(--tg-primary); }

.hero{
  position:relative;
  padding:clamp(8px, 26px, 28px) 0 clamp(28px, 5vw, 60px);text-align:center;
  background:
    /* desplaza las líneas horizontales 40px hacia arriba */
    linear-gradient(transparent 0 98%, rgba(255,255,255,0.08) 99%) 0 40px/40px 40px,
    /* las líneas verticales quedan igual */
    linear-gradient(90deg, transparent 0 98%, rgba(255,255,255,0.08) 99%) 0 0/40px 40px,
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08), transparent 40%);
}

.hero .title{
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  color: var(--tg-secondary);
  text-shadow: 0 0 8px var(--tg-secondary), 0 0 20px var(--tg-secondary);
}

.card{
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  border-radius: 14px;
}

.card-title{
  color: var(--tg-primary);
  font-family: 'Orbitron', sans-serif;
}

.card-text{
  color: #ffffff;
  font-size: 0.9rem;
}

.badge-pixel{
  background: var(--tg-accent);
  color: #000;
  border-radius: 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  padding: .4rem .5rem;
}

.footer{
  border-top: 2px solid rgba(255,255,255,0.1);
  padding: 2rem 0;
  text-align: center;
  opacity: .9;
}

/* Escala fluida para .lead.title */
:root{
  /* Ajusta estos límites a tu gusto */
  --lead-title-min: 0.95rem;  /* ~15px en teléfonos pequeños */
  --lead-title-max: 1.40rem;  /* ~22–23px en monitores grandes */
}

.lead.title{
  font-family: 'Press Start 2P', monospace;
  /* Tamaño fluido entre min y max; el término central usa viewport */
  font-size: clamp(var(--lead-title-min), 1rem + 1vw, var(--lead-title-max));
  line-height: clamp(1.5, 1.2 + 0.5vw, 1.9);
  letter-spacing: clamp(0.2px, 0.3vw, 1px);
}

/* Afinado opcional */
@media (max-width: 360px){
  .lead.title{
    word-break: break-word;
  }
}
@media (min-width: 1200px){
  .lead.title{
    letter-spacing: 1px;
  }
}

html{
  /* base fluida ~15–18px */
  font-size: clamp(15px, 1.2vw, 18px);
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/PressStart2P-Regular.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* mejora rendimiento y evita FOIT */
}

.title-with-coin{
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;     /* <- nunca permitas wrap */
  gap: .4ch;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;   /* <- bloquea el salto de línea del texto */
}

.coin-icon{
  height: 1em;
  width: auto;
  display: block;
  flex: 0 0 auto;        /* <- la imagen no se encoge ni crece raro */
}

.step-card {
  background: #0f0f1e;
  border-radius: 16px;
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 600px;             /* ancho máximo en desktop */
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);

  /* efecto glow */
  box-shadow:
    0 0 8px rgba(155,92,255,0.6),
    0 0 16px rgba(255,47,176,0.4);
}

.step-image {
  max-width: 100%;   /* responsive */
  height: auto;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  box-shadow:
    0 0 4px rgba(155,92,255,0.5),
    0 0 12px rgba(255,47,176,0.3);
}

.step-text {
  color: #e7e7f7;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
}

/* ===== Lista de FAQ como enlaces con glow ===== */
.faq-links{
  max-width: 860px;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}
.faq__title{
  text-align: center;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: var(--tg-accent, #ffd94d);
  text-shadow: 0 0 6px var(--tg-neon, #9b5cff), 0 0 14px var(--tg-neon2, #ff2fb0);
  margin-bottom: 1rem;
}

.faq-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

/* Botón con apariencia de enlace de texto */
.faq-link{
  appearance: none;
  background: none;
  border: 0;
  padding: .25rem .1rem;
  text-align: left;
  cursor: pointer;

  color: #e7e7f7;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 700;

  /* subrayado sutil que aparece al hover/focus */
  text-decoration: none;
  border-bottom: 1px dashed transparent;

  transition: color .15s ease, text-shadow .2s ease, border-color .15s ease;
}

.faq-link:hover,
.faq-link:focus-visible{
  color: var(--tg-accent, #ffd94d);
  border-bottom-color: rgba(255, 217, 77, .6);
  text-shadow:
    0 0 6px var(--tg-neon, #9b5cff),
    0 0 14px var(--tg-neon2, #ff2fb0);
  outline: none;
}

/* Click activo con un toque más intenso */
.faq-link:active{
  color: #111;
  text-shadow:
    0 0 10px var(--tg-accent, #ffd94d),
    0 0 18px var(--tg-neon2, #ff2fb0);
}

.link-download {
  color: #e7e7f7;              /* color base (gris claro) */
  text-decoration: underline;  /* subrayado como link clásico */
  transition: all 0.3s ease;   /* animación suave */
}

/* Hover con efecto neón */
.link-download:hover {
  color: #9b5cff;   /* morado neon de la paleta TrueGamer */
  text-shadow: 
    0 0 4px #9b5cff,
    0 0 10px #ff2fb0,
    0 0 20px #9b5cff;
  cursor: pointer;
}

.salteo{
  margin-top: 40px;
}

/* ===== Sección Trackers (TrueGamer) ===== */
.trackers-section{
  max-width: 920px;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}

.tg-heading{
  text-align:center;
  font-size: clamp(22px,3vw,32px);
  font-weight: 900;
  color: var(--tg-accent, #ffd94d);
  text-shadow: 0 0 6px var(--tg-neon, #9b5cff), 0 0 14px var(--tg-neon2, #ff2fb0);
  margin-bottom: .75rem;
}

/* <details> + <summary> con glow sutil */
.tg-details{
  background: #0f0f1e;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow:
    0 0 8px rgba(155,92,255,.35),
    0 0 16px rgba(255,47,176,.18);
  padding: .25rem .75rem .75rem;
}

.tg-summary{
  list-style: none;
  cursor: pointer;
  padding: .75rem .25rem;
  font-weight: 800;
  color: #e7e7f7;
  display: flex; align-items: center; gap: .5ch;
}
.tg-summary::-webkit-details-marker{ display:none; }
.tg-summary::before{
  content: "›";
  display:inline-block; transform: rotate(90deg);
  transition: transform .2s ease;
  color: var(--tg-accent, #ffd94d);
  text-shadow: 0 0 6px var(--tg-neon, #9b5cff);
}
.tg-details[open] .tg-summary::before{ transform: rotate(270deg); }

/* Lista visual (bonita) */
.tracker-list{
  margin: .25rem 0 0;
  padding: .75rem;
  display: grid;
  gap: .5rem;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  max-height: 360px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(13px,1.8vw,15px);
}
.tracker-list li{
  color: #dcdcf0;
  padding: .35rem .5rem;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}

/* Acciones */
.tracker-actions{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
}
.copy-status{
  color: #9fe29f;
  font-size: .9rem;
}

/* Ocultar scrollbar visual (manteniendo scroll) */
.tracker-list{ -ms-overflow-style: none; scrollbar-width: none; }
.tracker-list::-webkit-scrollbar{ display: none;
}

/* Titular */
.videos-page { max-width: 1100px; margin: 2rem auto 3rem; padding: 0 1rem; }
.tg-heading{
  text-align:center; font-size:clamp(22px,3vw,32px); font-weight:900;
  color: var(--tg-accent,#ffd94d);
  text-shadow: 0 0 6px var(--tg-neon,#9b5cff), 0 0 14px var(--tg-neon2,#ff2fb0);
  margin-bottom: 1rem;
}

/* Lista de preguntas (links neon) */
.video-qa{
  list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.5rem;
}
.video-link{
  appearance:none; background:none; border:0; padding:.25rem .1rem; text-align:left; cursor:pointer;
  color:#e7e7f7; font-weight:800; font-size:clamp(15px,2.2vw,18px);
  border-bottom:1px dashed transparent; transition:color .15s ease,text-shadow .2s ease,border-color .15s ease;
}
.video-link:hover, .video-link:focus-visible{
  color: var(--tg-accent,#ffd94d);
  border-bottom-color: rgba(255,217,77,.6);
  text-shadow: 0 0 6px var(--tg-neon,#9b5cff), 0 0 14px var(--tg-neon2,#ff2fb0);
  outline:none;
}

/* Grid de tarjetas */
.video-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.video-card{
  background:#0f0f1e; border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden;
  box-shadow: 0 0 8px rgba(155,92,255,.35), 0 0 16px rgba(255,47,176,.18);
  display:flex; flex-direction:column;
}
.video-thumb{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.video-card__body{ padding:1rem; display:grid; gap:.6rem; }
.video-card__title{ margin:0; font-size:1.05rem; font-weight:900; color:#e7e7f7; }

/* Modal de video: reusa tu modal + ajustes */
.modal__card--video{ max-width:min(980px,94vw); }
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9; background:#05050a; border-radius:12px; overflow:hidden;
  box-shadow: inset 0 0 18px rgba(155,92,255,.25), 0 0 24px rgba(255,47,176,.18);
}
/* Elementos <video> / <iframe> ocupan todo el frame */
.video-frame > *{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

@media only screen and (max-width:600px){
    .stack{display:block !important; width:100% !important;}
    .td-pad{padding:6px 0 !important;}
    .logo{width:240px !important; height:auto !important; max-width:100% !important;}
    .char{width:80px !important; height:auto !important;}
  }

@media only screen and (max-width:600px){
.hide-sm{
      display:none !important;
      width:0 !important;
      max-height:0 !important;
      overflow:hidden !important;
      line-height:0 !important;
      font-size:0 !important;
      ime-mode:all !important; /* Outlook */
    }
  }

 .logo-img{
    display:block;
    margin:0 auto;
    width:486px;           /* tamaño “ideal” desktop */
    max-width:100%;        /* no sobrepasa su contenedor */
    height:auto;
  }

  @media only screen and (max-width:600px){
    .logo-img{
      width:90% !important;     /* ocupa 80% del ancho del contenedor */
      max-width:90% !important;  /* por si el cliente respeta max-width mejor que width */
      height:auto !important;
    }
  }