/* ============================================
   PIXELCLUB — Page-Specific Styles
   ============================================ */

/* ═══════════════════════════════════════════
   HOME PAGE
   ═══════════════════════════════════════════ */
.page-home .hero-banner {
  margin-bottom: var(--space-3xl);
}

.page-home .home-section {
  margin-bottom: var(--space-3xl);
}

/* ── Franja «Gratis ahora» (portada) ──────────────────────────────────────
   Recuperada de la página HOY (retirada el 10/09/2026). Solo existe cuando
   hay ofertas vigentes de verdad: sin ellas, GratisAhoraFranja.js devuelve
   '' y no queda ni hueco. En móvil las pastillas envuelven a columna. */
.gratis-franja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0 var(--space-2xl);
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--pixel-green);
  background: color-mix(in srgb, var(--pixel-green) 8%, transparent);
}

.gratis-franja-rotulo {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--pixel-green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.gratis-franja-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.18));
  background: rgba(0, 0, 0, 0.25);
  text-decoration: none;
  min-width: 0;
}

.gratis-franja-item:hover { border-color: var(--pixel-green); }

.gratis-franja-titulo {
  color: var(--text-primary);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

.gratis-franja-tienda {
  color: var(--text-secondary);
  font-size: var(--text-sm, 0.85rem);
  white-space: nowrap;
}

.gratis-franja-plazo {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* El mismo amarillo que usa /gratis para lo urgente (--accent-series). */
.gratis-franja-item.es-urgente .gratis-franja-plazo { color: var(--accent-series); }

.gratis-franja-ver {
  margin-left: auto;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--pixel-green);
  text-decoration: none;
  white-space: nowrap;
}

.gratis-franja-ver:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .gratis-franja { padding: var(--space-md); }
  .gratis-franja-item { flex-wrap: wrap; row-gap: 2px; }
  .gratis-franja-titulo { max-width: 100%; }
}

.page-home .section-title {
  font-family: var(--font-pixel);
  font-size: var(--pixel-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-home .section-title .emoji {
  font-family: sans-serif;
  font-size: var(--text-xl);
}


/* ═══════════════════════════════════════════
   YOUTUBERS PAGE
   ═══════════════════════════════════════════ */
.page-youtubers {
  padding: var(--space-2xl) 0;
}

.page-youtubers .page-header {
  margin-bottom: var(--space-2xl);
}

.page-youtubers .page-title {
  font-family: var(--font-pixel);
  font-size: var(--pixel-2xl);
  margin-bottom: var(--space-sm);
}

.page-youtubers .page-subtitle {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.page-youtubers .filters-row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .page-youtubers .filters-row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-youtubers .search-bar {
    max-width: 100%;
  }
}


/* ═══════════════════════════════════════════
   YOUTUBER PROFILE PAGE
   ═══════════════════════════════════════════ */
.page-profile {
  padding-bottom: var(--space-3xl);
}

.profile-banner {
  position: relative;
  width: 100%;
  height: 300px;
  background: var(--bg-secondary);
  overflow: hidden;
  margin-top: calc(-1 * var(--navbar-height));
  padding-top: var(--navbar-height);
}

.profile-banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(0.4);
}

.profile-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(transparent, var(--bg-primary));
  z-index: 1;
}

.profile-info {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-xl);
  margin-top: -80px;
  padding: 0 var(--space-xl);
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
}

.profile-avatar {
  width: 140px;
  height: 140px;
  border: 4px solid var(--accent-games);
  background: var(--bg-card);
  overflow: hidden;
  flex-shrink: 0;
  image-rendering: pixelated;
  box-shadow: var(--shadow-glow-cyan);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-details {
  flex: 1;
  padding-bottom: var(--space-sm);
}

.profile-name {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.profile-channel {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--accent-games);
  margin-bottom: var(--space-sm);
}

.profile-stats {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-stat-value {
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  color: var(--text-primary);
}

.profile-stat-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.profile-description {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  max-width: 600px;
  margin-top: var(--space-md);
  line-height: 1.6;
}

.profile-social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.profile-social a {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-social a:hover {
  color: var(--accent-games);
  border-color: var(--accent-games);
}

.profile-content {
  margin-top: var(--space-2xl);
  padding: 0 var(--space-xl);
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .profile-banner { height: 200px; }
  .profile-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -60px;
    padding: 0 var(--space-md);
  }
  .profile-avatar {
    width: 100px;
    height: 100px;
  }
  .profile-stats {
    justify-content: center;
  }
  .profile-content {
    padding: 0 var(--space-md);
  }
}


/* ═══════════════════════════════════════════
   CONTENT PAGES (Games / Movies / Series)
   ═══════════════════════════════════════════ */
.page-content-type {
  padding: var(--space-2xl) 0;
}

.page-content-type .page-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Era `font-size: 48px` para un emoji; ahora es un SVG y el tamaño se lo pone
   `icono(nombre, 32)` en el JS. Se mantiene la alineación con el titular. */
.page-content-type .page-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.page-content-type .page-title {
  font-family: var(--font-pixel);
  font-size: var(--pixel-2xl);
}

.page-content-type .page-subtitle {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.page-content-type .subcategory-section {
  margin-bottom: var(--space-3xl);
}

.page-content-type .subcategory-title {
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-content-type .subcategory-title .emoji {
  font-family: sans-serif;
  font-size: var(--text-lg);
}

/* Color accents per type */
.page-games .page-title { color: var(--accent-games); }

.page-movies .page-title { color: var(--accent-movies); }

.page-series .page-title { color: var(--accent-series); }


/* ═══════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════ */
.page-contact {
  padding: var(--space-3xl) 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  max-width: var(--container-lg);
  margin: 0 auto;
}

.contact-form-card {
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-2xl);
}

.contact-form-card h2 {
  margin-bottom: var(--space-md);
  font-size: var(--pixel-lg);
}

.contact-form-card p {
  margin-bottom: var(--space-xl);
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-info-item {
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  transition: border-color var(--transition-fast);
}

.contact-info-item:hover {
  border-color: var(--accent-games);
}

.contact-info-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
  font-family: sans-serif;
}

.contact-info-item h4 {
  font-size: var(--pixel-xs);
  margin-bottom: var(--space-2xs);
}

.contact-social-links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.contact-social-link {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: var(--pixel-2xl);
  transition: all var(--transition-fast);
}

.contact-social-link:hover {
  border-color: var(--accent-games);
  color: var(--accent-games);
  box-shadow: var(--shadow-glow-cyan);
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}


/* ═══════════════════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════ */
.page-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-2xl);
}

.page-404 .error-code {
  font-family: var(--font-pixel);
  font-size: 80px;
  color: var(--accent-movies);
  text-shadow:
    0 0 15px var(--accent-movies),
    0 0 30px rgba(247, 37, 133, 0.3);
  margin-bottom: var(--space-md);
}

.page-404 h2 {
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.page-404 p {
  margin-bottom: var(--space-xl);
  max-width: 400px;
}

/* ═══════════════════════════════════════════
   PAGE TRANSITIONS
   ═══════════════════════════════════════════ */
.page-enter {
  animation: pageEnter 0.4s ease forwards;
}

.page-exit {
  animation: pageExit 0.25s ease forwards;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageExit {
  from { opacity: 1; }
  to { opacity: 0; }
}