/* ==========================================================================
   Hydrowick® — portada de juegos (/juego/)
   Hereda las variables de assets/css/styles.css.
   ========================================================================== */

/* ============================================================== el hero == */

.hub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 9vw, 108px) 0 clamp(40px, 6vw, 72px);
  background: var(--surface-inv);
  color: var(--text-on-inv);
}

/* El fondo es la tela vista de cerca: urdimbre y trama que corren muy
   despacio, más un resplandor de marca. Va en un span aparte y no en el
   ::before de la sección para poder animarlo sin tocar el contenido. */
.hub-hero-fondo {
  position: absolute;
  inset: -40px -40px -40px -40px;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 22% 8%, rgba(53, 179, 211, .28), transparent 62%),
    radial-gradient(52% 62% at 84% 92%, rgba(192, 57, 43, .22), transparent 66%),
    repeating-linear-gradient(0deg, rgba(160, 210, 235, .055) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(160, 210, 235, .045) 0 1px, transparent 1px 22px);
  animation: hub-trama 26s linear infinite;
}

@keyframes hub-trama {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(22px, 22px, 0); }
}

.hub-hero-caja { position: relative; }

/* El encabezado del lobby tiene fondo azul oscuro, así que acá el celeste
   va para el otro lado: aclarado. Con el celeste hundido daba 2.5 de
   contraste y el número grande de al lado, lo mismo. */
.hub-hero .eyebrow { color: #7fcbe2; }

.hub-hero h1 {
  font-size: clamp(2.2rem, 6.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: .16em 0 .44em;
  color: #fff;
}

.hub-hero .lead {
  max-width: 54ch;
  color: #c3d2de;
}

.hub-datos {
  list-style: none;
  margin: clamp(22px, 3.4vw, 34px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
}

.hub-datos li { display: flex; align-items: baseline; gap: 7px; }

.hub-datos strong {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #7fcbe2;                 /* aclarado: el fondo del encabezado es oscuro */
}

.hub-datos span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8ba0b0;
}

/* =================================================== seguir donde ibas == */

.seguir {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(18px, 3vw, 28px) 0 0;
  padding: 14px 16px;
  border: 1px solid var(--brand);
  border-left-width: 4px;
  border-radius: var(--radius-m);
  background: var(--brand-soft);
  box-shadow: var(--shadow-s);
}

.seguir[hidden] { display: none; }

.seguir-icono { display: flex; color: var(--brand); flex: none; }

.seguir-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.seguir-juego {
  font-size: .98rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.seguir-detalle {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.seguir-btn { flex: none; }

@media (max-width: 560px) {
  .seguir { flex-wrap: wrap; }
  .seguir-btn { width: 100%; justify-content: center; }
}

/* ===================================================== barra y filtros == */

.hub-lista { padding: clamp(26px, 4vw, 44px) 0 clamp(44px, 6vw, 76px); }

.hub-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.hub-titulo {
  margin: 0;
  font-size: 1.14rem;
  letter-spacing: -.012em;
}

.hub-filtros { display: flex; flex-wrap: wrap; gap: 7px; }
.hub-filtros[hidden] { display: none; }

.filtro {
  appearance: none;
  cursor: pointer;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-0);
  color: var(--text-secondary);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.filtro:hover { border-color: var(--border-strong); color: var(--text-primary); }

.filtro:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.filtro[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ========================================================== las tarjetas = */

.tarjetas {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tarjetas > li[hidden] { display: none; }

/* Con cuatro juegos, tres columnas dejan una tarjeta sola en la segunda
   fila. Dos de a dos entra parejo y además deja leer las descripciones,
   que son largas a propósito. */
@media (min-width: 820px) {
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
  .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tarjeta {
  position: relative;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface-0);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tarjeta:hover,
.tarjeta:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
  border-color: var(--border-strong);
}

.tarjeta-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.tarjeta-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* --------------------------------------------------------------- el arte -- */

.tarjeta-arte {
  display: block;
  position: relative;
  background: #080506;
  border-bottom: 1px solid var(--border);
}

.tarjeta-arte svg { display: block; width: 100%; height: auto; }

/* Una viñeta encima del dibujo: le da profundidad sin tocar el SVG. */
.tarjeta-arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

/* El dibujo se mueve solo, despacio, y se despierta al pasar por encima.
   Cada juego se mueve como se mueve el juego: caen gotas, el telón se abre,
   la baliza de la antena parpadea. */
.arte-gotas   { animation: arte-caer 5.5s ease-in infinite; }
.arte-algodon { animation: arte-caer 7.2s ease-in infinite .8s; }
.arte-tela    { animation: arte-vaiven 4.2s ease-in-out infinite; }
.arte-baliza  { animation: arte-latir 2.4s ease-in-out infinite; }
.arte-ventanas{ animation: arte-luces 6s steps(1) infinite; }
.arte-ojos    { animation: arte-parpadeo 5s steps(1) infinite; }
.arte-telon-izq, .arte-telon-der { transition: transform .5s ease; }
.arte-alegre-a { animation: arte-acercarse 6.5s ease-in-out infinite; }
.arte-alegre-b { animation: arte-acercarse 6.5s ease-in-out infinite .7s; }
/* el abismo: la linterna titila y lo que está parado al fondo aparece y no */
.arte-cono    { animation: arte-titilar 3.4s ease-in-out infinite; }
.arte-bicho   { animation: arte-esta-y-no 7s steps(1) infinite; }
/* la manija de la maquina de capsulas gira despacio, y la capsula que ya
   salio rebota una vez cada tanto. Nada mas: la tarjeta tiene que llamar,
   no bailar. */
.arte-manija  { transform-origin: 107px 65px; animation: arte-girar 4.5s linear infinite; }
.arte-capsula { animation: arte-rebote 4.5s ease-out infinite; }

.tarjeta-link:hover .arte-telon-izq,
.tarjeta-link:focus-visible .arte-telon-izq { transform: translateX(-26px); }
.tarjeta-link:hover .arte-telon-der,
.tarjeta-link:focus-visible .arte-telon-der { transform: translateX(26px); }

@keyframes arte-girar {
  to { transform: rotate(360deg); }
}
@keyframes arte-rebote {
  0%, 62% { transform: translateY(0); }
  70%     { transform: translateY(-10px); }
  78%     { transform: translateY(0); }
  84%     { transform: translateY(-4px); }
  90%,100%{ transform: translateY(0); }
}
@keyframes arte-titilar {
  0%, 100%  { opacity: 1; }
  46%       { opacity: .82; }
  50%       { opacity: .45; }
  54%       { opacity: .9; }
  78%       { opacity: .6; }
}
@keyframes arte-esta-y-no {
  0%, 38%   { opacity: 0; }
  40%, 62%  { opacity: 1; }
  64%, 100% { opacity: 0; }
}

@keyframes arte-caer {
  0%        { transform: translateY(-26px); opacity: 0; }
  14%       { opacity: 1; }
  86%       { opacity: 1; }
  100%      { transform: translateY(96px); opacity: 0; }
}

@keyframes arte-vaiven {
  0%, 100%  { transform: translateX(-16px); }
  50%       { transform: translateX(16px); }
}

@keyframes arte-latir {
  0%, 100%  { opacity: 1; }
  50%       { opacity: .2; }
}

@keyframes arte-luces {
  0%, 49%   { opacity: .22; }
  50%, 100% { opacity: .06; }
}

@keyframes arte-parpadeo {
  0%, 91%   { opacity: 1; }
  92%, 96%  { opacity: 0; }
  97%, 100% { opacity: 1; }
}

@keyframes arte-acercarse {
  0%, 100%  { transform: translateX(0); }
  50%       { transform: translateX(-13px); }
}

/* -------------------------------------------------------------- el texto -- */

.tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  flex: 1;
}

.tarjeta-cabeza { display: flex; align-items: center; gap: 9px; }

.tarjeta-num {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.tarjeta-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tarjeta h3 {
  margin: 0;
  font-size: 1.32rem;
  letter-spacing: -.018em;
  line-height: 1.2;
}

.tarjeta p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tarjeta-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  font-size: .78rem;
  color: var(--text-muted);
}

.tarjeta-datos span { display: inline-flex; align-items: center; gap: 6px; }

.tarjeta-datos span + span::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}

/* ---------------------------------------------------------- el progreso -- */

/* El bloque de progreso y el botón van pegados abajo de la tarjeta: como las
   tarjetas se estiran a la misma altura, si el hueco sobrante queda entre
   ellos la que tiene menos texto se ve partida al medio. */
.tarjeta-progreso {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--surface-1);
  border: 1px solid var(--border);
}

.tarjeta-progreso[hidden] { display: none; }

.progreso-texto {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.progreso-barra {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.progreso-relleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
  transition: width .7s cubic-bezier(.2, .7, .2, 1);
}

/* Ya la empezaste: se nota antes de leer nada. */
.tarjeta-empezada .tarjeta { border-color: var(--brand); }

/* ------------------------------------------------------------- el botón -- */

.tarjeta-cta {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--brand);
}

.tarjeta-progreso:not([hidden]) ~ .tarjeta-cta { margin-top: 0; }

.tarjeta-link:hover .tarjeta-cta svg { transform: translateX(4px); }
.tarjeta-cta svg { transition: transform .18s ease; }

/* --------------------------------------------------- la tarjeta de terror -- */

.tarjeta-terror .tarjeta-num,
.tarjeta-terror .tarjeta-cta { color: #c0392b; }

.tarjeta-terror:hover,
.tarjeta-terror:focus-within { border-color: #c0392b; }

.tarjeta-terror .progreso-relleno { background: linear-gradient(90deg, #8f1d1d, #c0392b); }

.tarjeta-empezada .tarjeta-terror { border-color: #c0392b; }

.aviso-contenido {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(192, 57, 43, .35);
  background: rgba(192, 57, 43, .08);
  color: #a4342a;
  font-size: .78rem;
  line-height: 1.45;
  font-weight: 600;
}

.aviso-contenido svg { flex: none; margin-top: 2px; }

/* La contracara: en el juego que no tiene sustos, decirlo ocupa el mismo
   lugar que el aviso en los otros dos y las tarjetas dejan de verse
   desparejas. */
.aviso-apto {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 2px;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.45;
  font-weight: 600;
}

.aviso-apto svg { flex: none; margin-top: 2px; color: var(--brand); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aviso-contenido { color: #e8897c; }
  :root:not([data-theme="light"]) .tarjeta-terror .tarjeta-num,
  :root:not([data-theme="light"]) .tarjeta-terror .tarjeta-cta { color: #e8574a; }
  :root:not([data-theme="light"]) .tarjeta-terror:hover,
  :root:not([data-theme="light"]) .tarjeta-terror:focus-within,
  :root:not([data-theme="light"]) .tarjeta-empezada .tarjeta-terror { border-color: #e8574a; }
}

:root[data-theme="dark"] .aviso-contenido { color: #e8897c; }
:root[data-theme="dark"] .tarjeta-terror .tarjeta-num,
:root[data-theme="dark"] .tarjeta-terror .tarjeta-cta { color: #e8574a; }
:root[data-theme="dark"] .tarjeta-terror:hover,
:root[data-theme="dark"] .tarjeta-terror:focus-within,
:root[data-theme="dark"] .tarjeta-empezada .tarjeta-terror { border-color: #e8574a; }

/* ================================================= nota y sin resultados = */

/* Sólo para lectores de pantalla: al filtrar, la lista cambia sin que nada
   se anuncie, y quien no ve la pantalla no se entera. */
.hub-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sin-resultados {
  margin: 0 0 24px;
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m);
  color: var(--text-muted);
  font-size: .9rem;
  text-align: center;
}

.sin-resultados[hidden] { display: none; }

.nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.nota p {
  margin: 0;
  max-width: 62ch;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.nota button[hidden] { display: none; }

/* ====================================================== menos movimiento = */

@media (prefers-reduced-motion: reduce) {
  .hub-hero-fondo,
  .arte-gotas, .arte-algodon, .arte-tela, .arte-baliza,
  .arte-ventanas, .arte-ojos, .arte-alegre-a, .arte-alegre-b,
  .arte-cono, .arte-bicho, .arte-manija, .arte-capsula { animation: none; }
  .tarjeta, .tarjeta-cta svg, .progreso-relleno,
  .arte-telon-izq, .arte-telon-der, .filtro { transition: none; }
  .tarjeta:hover, .tarjeta:focus-within { transform: none; }
  .tarjeta-link:hover .arte-telon-izq,
  .tarjeta-link:hover .arte-telon-der { transform: none; }
}