/* ============================================================
   PIXELCLUB — REDISEÑO / CAPA DE PULIDO VISUAL
   Product/UI polish sobre el sistema existente. Carga en último
   lugar para refinar jerarquía, ritmo, tarjetas y microinteracciones
   manteniendo la identidad pixel-art. No añade funcionalidad.
   ============================================================

   SOBRE LOS 7/9/13/15px DE ESTE ARCHIVO (09/09/2026) — NO SON TAMAÑOS
   SUELTOS PENDIENTES DE TOKENIZAR. Es una capa deliberada, un punto por
   encima de components.css, que carga antes:

     components.css .navbar-link, .content-card-title, .youtuber-name,
     .feed-creator, .foryou-kicker  → var(--pixel-xs) = 8px
     redesign.css   los mismos cinco selectores                → 9px

   Un píxel exacto por encima, en los cinco — verificado en el código, no
   es casualidad ni descuido de quien escribió este archivo: es la
   decisión de que este pulido visual se lea un pelín más grande que la
   base que pisa.

   POR QUÉ NO SE TOCA: forzar ese 9px al escalón declarado más cercano
   (--pixel-sm = 10px) NO recupera esa intención, la AMPLIFICA — deja la
   capa 2px por encima de la base en vez de 1. Y en los 15px de
   .content-card-meta/.content-card-genre la INVIERTE: bajarían a 14px,
   hacia abajo, cuando el patrón de esta hoja es hacia arriba. Tokenizar
   a ciegas no ordena esta hoja, la contradice — y de dos formas
   distintas según el caso.

   Rubén decidió (pc-030, 09/09/2026) que manda la web construida sobre
   la escala declarada: no se fuerza ni un valor más de esta hoja a
   variables.css. El método para si algún día hace falta reabrir esto
   está en docs/rediseno/METODO_ESCALA_REAL.md.

   ESTO YA HA PASADO DOS VECES: dos agentes distintos, por separado,
   tokenizaron este archivo entero sin saber que el patrón era
   intencional — los dos deshicieron su trabajo al comparar notas. Si
   vas a "limpiar" un 7/9/13/15px de aquí, lee este comentario primero:
   ya se investigó, ya se decidió, y la respuesta fue no. */

/* ── Canales RGB de acento para tintes coherentes (evita literales sueltos) ── */
:root {
  --accent-games-rgb: 0, 245, 212;
  --accent-movies-rgb: 247, 37, 133;
  --accent-series-rgb: 255, 214, 10;
  --ring: rgba(255, 255, 255, 0.07);
  --surface-2: #12182b;
}

/* ── Contenedor con más aire y ancho de lectura consistente ── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
main#page-content {
  padding-top: var(--navbar-height);
  min-height: 70vh;
}
/* Las páginas de catálogo ya traen su propio padding-top inline; lo normalizamos */
.page-content-type,
.page-youtubers,
.page-contact { padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }

/* ════════════════ TIPOGRAFÍA / JERARQUÍA ════════════════ */
.page-title {
  font-family: var(--font-pixel);
  font-size: var(--pixel-3xl);
  line-height: 1.15;
  letter-spacing: 1px;
}
.page-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--text-secondary);
  max-width: 640px;
}
.page-header { margin-bottom: var(--space-lg); }
.page-icon { filter: drop-shadow(0 0 8px rgba(var(--accent-games-rgb), .4)); }

/* Cabeceras de sección con barra de acento (estructura tipo Steam) */
.carousel-title,
.subcategory-title {
  position: relative;
  padding-left: 14px;
  font-size: var(--pixel-base);
  letter-spacing: .5px;
}
.carousel-title::before,
.subcategory-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 1.1em;
  background: var(--accent-games);
  box-shadow: 0 0 8px rgba(var(--accent-games-rgb), .5);
}
.page-movies .subcategory-title::before,
.page-movies .carousel-title::before { background: var(--accent-movies); box-shadow: 0 0 8px rgba(var(--accent-movies-rgb), .5); }
.page-series .subcategory-title::before,
.page-series .carousel-title::before { background: var(--accent-series); box-shadow: 0 0 8px rgba(var(--accent-series-rgb), .5); }

.carousel-see-all {
  border: 2px solid rgba(var(--accent-games-rgb), .25);
  padding: 6px 12px;
  transition: all var(--transition-fast);
}
.carousel-see-all:hover {
  border-color: var(--accent-games);
  background: rgba(var(--accent-games-rgb), .1);
  box-shadow: 0 0 12px rgba(var(--accent-games-rgb), .2);
}

/* ════════════════ NAVBAR ════════════════ */
.navbar { border-bottom-width: 1px; }
.navbar-inner { max-width: var(--container-xl); }
.navbar-link { font-size: 9px; }

/* ════════════════ HERO ════════════════ */
.hero-banner {
  min-height: 78vh;
  /* Fondo diseñado siempre presente (aunque la imagen remota no cargue) */
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(var(--accent-games-rgb), .12), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(var(--accent-movies-rgb), .10), transparent 55%),
    linear-gradient(180deg, #0c1024 0%, var(--bg-primary) 90%);
}
.hero-content { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.hero-title { font-size: clamp(28px, 5vw, 44px); line-height: 1.25; }
.hero-subtitle { font-size: var(--text-xl); max-width: 560px; }
.hero-buttons { margin-top: var(--space-lg); }

/* ════════════════ TARJETAS DE CONTENIDO — «A SANGRE» (t-02) ════════════════
   Rubén eligió la propuesta C de t-01 («así las quiero en Inicio, Juegos,
   Películas y Series»; comparativa en docs/rediseno/TARJETAS_PROPUESTAS.md).
   Solo la portada, sin marco ni pie. Título, año, género, nota, corazón y 🔥
   suben al pasar el ratón o al llegar con el tabulador; en pantallas táctiles,
   donde no se puede pasar por encima, una franja deja siempre a la vista el
   título y la nota.

   Si tocas las tarjetas desde otra hoja, ojo con dos que las pisaban:
   `fondos.css` les ponía un panel translúcido con desenfoque y `zonas.css` un
   borde y un resplandor de zona. Sin panel ni borde, las tarjetas salieron de
   esas dos reglas; si vuelven a entrar, el `body[data-zone]` de zonas gana en
   especificidad y se come el filo de color del hover. */
.content-card {
  --tinta: var(--accent-games);
  --tinta-rgb: var(--accent-games-rgb);
  background: var(--pc-capa-0);
  border: 0;
  box-shadow: var(--pc-alto-1);
  transition: transform var(--pc-salto), box-shadow var(--pc-salto);
}
.content-card[data-type="movies"] { --tinta: var(--accent-movies); --tinta-rgb: var(--accent-movies-rgb); }
.content-card[data-type="series"] { --tinta: var(--accent-series); --tinta-rgb: var(--accent-series-rgb); }

/* Hover: filo del color del tipo, sin borde que empuje la portada. */
.content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--tinta), var(--pc-alto-2), 0 0 22px rgba(var(--tinta-rgb), .35);
}
.content-card:hover .content-card-image img { transform: scale(var(--pc-zoom-arte)); }

/* El foco, en amarillo y separado de la tarjeta: el cian del foco global se
   confundía con el filo del hover, que en los juegos es del mismo color. El
   `[role]` es para ganar a accesibilidad.css, que carga después. */
.content-card[role="button"]:focus-visible {
  outline: 3px solid var(--accent-series);
  outline-offset: 3px;
}

/* Sin la etiqueta del tipo: en #/juegos todo es un juego, y en Inicio lo dice
   el título de la fila. */
.content-card-badge { display: none; }

/* En reposo, la portada sola. El corazón se queda si ya lo has guardado: eso
   lo decidió el socio, no es ruido. */
.fav-btn,
.card-rating-pill,
.card-trending-pill {
  opacity: 0;
  transition: opacity var(--pc-salto), transform var(--pc-salto);
}
.fav-btn {
  width: 38px; height: 38px;
  background: rgba(6, 8, 15, .6);
}
.fav-btn.active { opacity: 1; }

/* Nota arriba a la derecha (el hueco que dejó la etiqueta del tipo) y la 🔥
   debajo: abajo sube el título. */
.card-rating-pill {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 3;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--accent-series);
  background: rgba(6, 8, 15, .82);
  border: 1px solid rgba(var(--accent-series-rgb), .5);
  padding: 4px 6px;
  letter-spacing: .5px;
  pointer-events: none;
}
.content-card.trending::before { content: none !important; }
.card-trending-pill {
  position: absolute;
  top: 38px;
  right: var(--space-xs);
  z-index: 3;
  font-size: 13px;
  line-height: 1;
  background: rgba(6, 8, 15, .82);
  border: 1px solid rgba(255, 120, 0, .6);
  padding: 4px 6px;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 110, 0, .6));
}

/* El velo que deja leer el título, apagado hasta que salen los datos. */
.content-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pc-velo-datos);
  opacity: 0;
  transition: opacity var(--pc-salto);
  pointer-events: none;
  z-index: 1;
}

/* Los datos viven DENTRO de la portada, escondidos debajo del borde (la
   tarjeta recorta con su overflow). */
.content-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-sm);
  gap: var(--space-2xs);
  justify-content: flex-end;
  transform: translateY(101%);
  transition: transform var(--pc-salto-largo);
}
.content-card-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1;
  min-height: 0;
  letter-spacing: 0;
  text-shadow: var(--pc-alto-0);
}
.content-card-meta { color: var(--text-primary); text-shadow: var(--pc-alto-0); }
.content-card-genre { font-size: 15px; }
.content-card-year { color: var(--text-primary); }
.content-card-reco { color: var(--text-secondary); white-space: nowrap; }
.content-card-frase { -webkit-line-clamp: 3; }

/* Ratón encima, tabulador encima (o dentro, en el corazón): sale todo. */
.content-card:is(:hover, :focus-visible, :focus-within) .content-card-info { transform: none; }
.content-card:is(:hover, :focus-visible, :focus-within) .content-card-image::after,
.content-card:is(:hover, :focus-visible, :focus-within) :is(.fav-btn, .card-rating-pill, .card-trending-pill) {
  opacity: 1;
}

/* En la ficha de un creador la nota es SUYA, no la del catálogo: es lo que se
   viene a ver a esa página, así que no se esconde. */
.content-card-suya .card-rating-pill { opacity: 1; }

/* En pantallas táctiles no hay «pasar por encima»: el título y la nota se
   quedan a la vista en una franja fina. Año y género están en la ficha. */
@media (hover: none) {
  .content-card-info {
    transform: none;
    padding: var(--space-lg) var(--space-xs) var(--space-xs);
    background: var(--pc-velo-franja);
  }
  /* Con `.content-card` delante: polish.css y ranking.css cargan después y
     vuelven a dar `display` al pie y a la frase. */
  .content-card .content-card-meta,
  .content-card .content-card-frase { display: none; }
  .content-card-title { -webkit-line-clamp: 1; }
  .fav-btn,
  .card-rating-pill { opacity: 1; }
  /* La frase del creador sí se queda, en dos líneas: en su ficha es lo que
     da sentido a la tarjeta. */
  .content-card.content-card-suya .content-card-frase { display: -webkit-box; -webkit-line-clamp: 2; }
}

/* ════════════════ GRID / CARRUSEL ════════════════ */
.content-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--space-lg);
}
.carousel-track .content-card { width: 190px; }
.carousel-section { margin-bottom: var(--space-3xl); }
/* Difuminados de borde acompañan el color de página */
.page-movies .carousel-container::before { background: linear-gradient(90deg, var(--bg-primary), transparent); }

/* ════════════════ YOUTUBER CARDS ════════════════ */
.youtuber-card {
  background: var(--surface-2);
  border-color: var(--ring);
  padding: var(--space-lg) var(--space-md);
}
.youtuber-avatar {
  width: 96px; height: 96px;
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4);
}
.youtuber-name { font-size: 9px; line-height: 1.5; }
.youtuber-subs { font-size: var(--text-lg); color: var(--text-secondary); }

/* ════════════════ BUSCADOR / FILTROS ════════════════ */
.search-bar { max-width: 460px; }
.search-bar input { padding-top: 14px; padding-bottom: 14px; font-size: var(--text-xl); }
.filters-row { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; min-width: 0; }
/* min-width:0 permite que el filtro (scroll horizontal interno) no desborde la página */
.filters-row > * { min-width: 0; max-width: 100%; }
.category-filter { min-width: 0; flex: 1 1 auto; }
.filter-pill {
  border-color: rgba(255,255,255,.12);
  color: var(--text-secondary);
  padding: 9px 14px;
}
.filter-pill.active { box-shadow: 0 0 12px rgba(var(--accent-games-rgb), .35); }
.category-filter { padding-bottom: var(--space-sm); }

/* ════════════════ CONSISTENCIA: esquinas afiladas pixel ════════════════ */
.content-detail-modal,
.modal-card,
.modal-rating-box,
.modal-badge,
.buy-key-btn,
.btn,
.tag-pill { border-radius: 0 !important; }
.tag-pill { padding: 5px 10px; }

/* Modal: marco pixel coherente */
.content-detail-modal { border-width: 2px; box-shadow: 6px 6px 0 rgba(0,0,0,.6), 0 0 60px rgba(0,0,0,.8); }
.modal-item-title { font-size: var(--pixel-2xl); }
.modal-close-btn { border-radius: 0; width: 40px; height: 40px; }

/* ════════════════ ESTADOS VACÍOS ════════════════ */
.empty-state {
  border: 2px dashed rgba(255,255,255,.1);
  background: rgba(255,255,255,.015);
  padding: var(--space-3xl) var(--space-xl);
}
.empty-state-icon { filter: grayscale(.2); }

/* ════════════════ STATS BAR ════════════════ */
.stats-bar {
  border-color: var(--ring);
  background: linear-gradient(180deg, var(--surface-2), var(--bg-card));
  gap: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
}
.stat-value { font-size: var(--pixel-xl); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 1024px) {
  .container { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}
@media (max-width: 768px) {
  main#page-content { padding-top: var(--navbar-height); }
  .hero-banner { min-height: 66vh; }
  .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
  .page-title { font-size: var(--pixel-2xl); }
  .filters-row { flex-direction: column; align-items: stretch; }
  .search-bar { max-width: none; }
}
@media (max-width: 480px) {
  .container { padding-left: var(--space-md); padding-right: var(--space-md); }
  .content-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .carousel-track .content-card { width: 150px; }
  .page-title { font-size: var(--pixel-xl); }
  .card-rating-pill { font-size: 7px; }
}

/* ════════════════ PERFIL DE YOUTUBER ════════════════ */
.profile-banner {
  position: relative;
  height: 240px;
  overflow: hidden;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(var(--accent-games-rgb), .18), transparent 60%),
    radial-gradient(700px 300px at 90% 20%, rgba(var(--accent-movies-rgb), .16), transparent 60%),
    linear-gradient(180deg, #0e1430, #0a0a12);
}
.profile-banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-image:
    linear-gradient(rgba(var(--accent-games-rgb), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-games-rgb), .05) 1px, transparent 1px);
  background-repeat: repeat;
  /* tamaño de rejilla pixel; una portada real (si existe) la cubre vía inline style */
  background-size: 32px 32px;
  opacity: .9;
}
.profile-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,18,.85) 100%);
}
.profile-info { position: relative; z-index: 2; }
.profile-avatar img { image-rendering: pixelated; }
.profile-name { font-family: var(--font-pixel); letter-spacing: 1px; }

/* ════════════════ AJUSTES FINOS LOGIN / AUTH ════════════════ */
.auth-card { border-radius: 0 !important; box-shadow: 6px 6px 0 rgba(0,0,0,.5), 0 0 30px rgba(var(--accent-games-rgb), .12) !important; }

/* ════════════════ RECOMENDACIONES / PARA TI ════════════════ */
.foryou-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-lg); flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(var(--accent-games-rgb),.12), rgba(var(--accent-movies-rgb),.12));
  border:2px solid var(--ring);
  padding:var(--space-xl);
}
.foryou-kicker{ font-family:var(--font-pixel); font-size:9px; letter-spacing:1px; color:var(--accent-games); }
.foryou-cta h3{ font-family:var(--font-pixel); font-size:var(--pixel-lg); margin:10px 0 8px; color:var(--text-primary); line-height:1.4; }
.foryou-cta p{ color:var(--text-secondary); font-size:var(--text-xl); max-width:540px; }

/* Página Recomendados: celda = motivo + tarjeta */
.page-recs .rec-cell{ position:relative; display:flex; flex-direction:column; }
.rec-reason{
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.4px;
  color:var(--accent-series);
  background:rgba(6,8,15,.55);
  border-left:3px solid var(--accent-series);
  padding:6px 8px; margin-bottom:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Fila de contenido similar en el modal */
.modal-similar-row{ display:flex; gap:var(--space-md); overflow-x:auto; padding-bottom:var(--space-sm); }
.modal-similar-row .content-card{ width:132px; flex-shrink:0; }

/* ════════════════ QUIZ / TEST DE GUSTOS ════════════════ */
.quiz-modal{
  max-width:640px; width:94%;
  border:2px solid var(--accent-games) !important;
  box-shadow:6px 6px 0 rgba(0,0,0,.6),0 0 50px rgba(var(--accent-games-rgb),.2) !important;
}
.quiz-body{ padding:var(--space-xl); }
.quiz-title{ font-family:var(--font-pixel); font-size:var(--pixel-xl); margin-bottom:10px; }
.quiz-sub{ color:var(--text-secondary); font-size:var(--text-lg); margin-bottom:var(--space-md); line-height:1.6; }
.quiz-step{ font-family:var(--font-pixel); font-size:var(--pixel-sm); color:var(--accent-series); margin:var(--space-lg) 0 var(--space-sm); }
.quiz-chips{ display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.quiz-chips .quiz-chip{ flex:0 0 auto; }
.quiz-actions{ display:flex; gap:var(--space-md); align-items:center; margin-top:var(--space-xl); flex-wrap:wrap; }

@media (max-width:600px){
  .foryou-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
  .quiz-body{ padding:var(--space-lg); }
}

/* ════════════════ SEGUIR CREADOR ════════════════ */
.follow-btn{
  position:absolute; top:var(--space-sm); right:var(--space-sm); z-index:4;
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.4px;
  color:var(--accent-games);
  background:rgba(6,8,15,.75);
  border:2px solid var(--accent-games);
  padding:6px 8px; cursor:pointer;
  transition:all var(--transition-fast);
}
.follow-btn:hover{ background:rgba(var(--accent-games-rgb),.18); }
.follow-btn.following{ color:var(--text-inverse); background:var(--accent-games); border-color:var(--accent-games); }
.youtuber-card{ position:relative; }
/* Botón grande en la ficha del creador */
.follow-btn-lg{
  position:static; display:inline-block; margin-top:var(--space-sm);
  font-size:var(--pixel-xs); padding:12px 20px;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}

/* ════════════════ FEED DE NOVEDADES ════════════════ */
.feed-list{ display:flex; flex-direction:column; gap:var(--space-sm); }
.feed-item{
  display:flex; align-items:center; gap:var(--space-md);
  background:var(--surface-2); border:2px solid var(--ring);
  border-left-width:4px; border-left-color:var(--accent-games);
  padding:var(--space-sm) var(--space-md); cursor:pointer;
  transition:border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.feed-item:hover{ transform:translateX(4px); background:var(--bg-card); }
.feed-item.act-watching{ border-left-color:var(--accent-series); }
.feed-item.act-reco{ border-left-color:var(--accent-movies); }
.feed-avatar{ flex:0 0 auto; width:52px; height:52px; border:2px solid rgba(255,255,255,.12); overflow:hidden; display:block; }
.feed-avatar img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.feed-text{ flex:1 1 auto; min-width:0; }
.feed-line{ font-family:var(--font-body); font-size:var(--text-xl); color:var(--text-secondary); line-height:1.4; }
.feed-creator{ font-family:var(--font-pixel); font-size:9px; color:var(--text-primary); text-decoration:none; }
.feed-creator:hover{ color:var(--accent-games); }
.feed-verb{ color:var(--text-muted); }
.feed-content-title{ color:var(--accent-games); font-weight:bold; }
.feed-item.act-watching .feed-content-title{ color:var(--accent-series); }
.feed-item.act-reco .feed-content-title{ color:var(--accent-movies); }
.feed-time{ display:block; font-family:var(--font-pixel); font-size:7px; color:var(--text-muted); margin-top:4px; }
.feed-thumb{ flex:0 0 auto; width:46px; height:69px; overflow:hidden; border:1px solid var(--ring); }
.feed-thumb img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:600px){
  .feed-line{ font-size:var(--text-lg); }
  .feed-avatar{ width:44px; height:44px; }
  .feed-thumb{ width:38px; height:57px; }
}