/* ============================================================================
   HYRIS — SISTEMA DE COMPONENTES
   ----------------------------------------------------------------------------
   Cada bloque reproduce la anatomía de un componente de HabHub (proporciones,
   densidad, jerarquía) pintado con los tokens de Hyris. Sin colores literales.
   ========================================================================== */

/* ==========================================================================
   1. NAVEGACIÓN SUPERIOR  ·  TopNavigation / MainMenu / DropdownMenu
      HabHub: tarjeta blanca flotante, 76px, logo pixel a la izquierda, menú
      centrado, y a la derecha contador + Discord + Entrar + avatar.
   ========================================================================== */
.topnav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--s-4) var(--shell-gutter) 0;
}

.topnav__bar {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface-nav);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-nav);
}

.topnav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
}

.topnav__logo img,
.topnav__logo svg {
  height: 46px;
  width: auto;
}

/* Un hueco a cada lado del menú, para que no quede pegado al logo.
   El de la izquierda crece más porque el bloque de acciones de la derecha pesa
   bastante más que el logo: con huecos iguales el menú se iba a la izquierda. */
.topnav__spacer {
  flex: 1 1 auto;
  min-width: var(--s-4);
}

.topnav__spacer--izq {
  flex-grow: 2.2;
}

.topnav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

/* --- Menú principal ------------------------------------------------------ */
.menu {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.menu__item {
  position: relative;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu__link:hover {
  background: var(--accent-soft);
  color: var(--text-strong);
}

.menu__link[aria-current="page"] {
  color: var(--text-accent);
  background: var(--accent-soft);
}

.menu__caret {
  width: 10px;
  height: 10px;
  flex: none;
  opacity: 0.65;
  transition: transform var(--dur) var(--ease);
}

.menu__link[aria-expanded="true"] .menu__caret {
  transform: rotate(180deg);
}

/* --- Desplegable --------------------------------------------------------- */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 246px;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--sh-lg);
  z-index: var(--z-dropdown);
  display: none;
}

.dropdown[data-open="true"] {
  display: block;
  animation: hy-drop var(--dur) var(--ease);
}

.dropdown--right {
  left: auto;
  right: 0;
}

@keyframes hy-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: background var(--dur) var(--ease);
}

.dropdown__link:hover {
  background: var(--accent-soft);
}

.dropdown__link .pixel-icon {
  flex: none;
}

.dropdown__desc {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--text-dim);
}

.dropdown__sep {
  height: 1px;
  margin: var(--s-2) var(--s-1);
  background: var(--border-hairline);
}

/* --- Contador de usuarios en línea  ·  OnlineUsersBadge ------------------ */
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 48px;
  padding: 0 var(--s-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--text);
  white-space: nowrap;
}

.online-badge__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--hy-ok-400);
  box-shadow: 0 0 0 4px var(--ok-glow);
}

/* --- Menú de usuario  ·  UserMenu ---------------------------------------- */
.usermenu {
  position: relative;
}

.usermenu__trigger {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 48px;
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.usermenu__trigger:hover {
  background: var(--accent-soft);
  border-color: var(--border);
}

.usermenu__name {
  font-size: var(--fs-16);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Botón hamburguesa (móvil) ------------------------------------------ */
/* Lleva la palabra «Menú» al lado de las rayas: tres rayas solas no decían
   que ahí dentro había secciones. Abierta, las rayas se vuelven una X. */
.navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.navtoggle:hover,
.navtoggle[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}

.navtoggle__icono {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.navtoggle__icono::before,
.navtoggle__icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.navtoggle[aria-expanded="true"] .navtoggle__icono {
  background: transparent;
  box-shadow: none;
}

.navtoggle[aria-expanded="true"] .navtoggle__icono::before {
  opacity: 1;
  transform: rotate(45deg);
}

.navtoggle[aria-expanded="true"] .navtoggle__icono::after {
  opacity: 1;
  transform: rotate(-45deg);
}

/* ==========================================================================
   2. AVATAR PIXEL  ·  PixelAvatar
   ========================================================================== */
.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.avatar img,
.avatar svg {
  width: 118%;
  height: 118%;
  object-fit: contain;
  object-position: center 30%;
}

.avatar--sm {
  width: 40px;
  height: 40px;
}

.avatar--md {
  width: 56px;
  height: 56px;
}

.avatar--lg {
  width: 84px;
  height: 84px;
}

/* Retrato de cuerpo entero sobre lienzo de marca (perfil / fichas de equipo) */
.avatar-tile {
  position: relative;
  display: grid;
  place-items: end center;
  width: 132px;
  height: 168px;
  flex: none;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background-color: var(--surface-sunken);
  background-image: var(--grad-primary),
    repeating-linear-gradient(135deg, var(--hl-faint) 0 8px, transparent 8px 16px);
  background-blend-mode: overlay, normal;
}

.avatar-tile img,
.avatar-tile svg {
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 94%;
  object-fit: contain;
}

.avatar-tile--lg {
  width: 176px;
  height: 216px;
}

.avatar-tile__status {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  border: 2px solid var(--surface);
  background: var(--text-dim);
}

.avatar-tile__status[data-online="true"] {
  background: var(--hy-ok-400);
}

/* Ficha de icono pixel (cuadro dorado con contorno duro, como HabHub) */
/* El marco del logo. Antes era una placa DORADA porque dentro iba un icono de
   mapa de bits que necesitaba fondo. Ahora el logo es vectorial y lleva su
   propio color: el marco se aparta y hace de sitio, no de decoración. */
.pixel-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-inset);
}

.pixel-icon img,
.pixel-icon svg {
  width: 24px;
  height: 24px;
}

.pixel-icon--habbo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

.pixel-icon--sm {
  width: 30px;
  height: 30px;
}

.pixel-icon--sm img,
.pixel-icon--sm svg {
  width: 18px;
  height: 18px;
}

.pixel-icon--plain {
  background-image: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  width: auto;
  height: auto;
}

/* Icono grande y NÍTIDO, sin marco: el asset manda, como en la referencia.
   `pixelated` es obligatorio aquí — son iconos de 20-44 px de origen y el
   suavizado del navegador los deja borrosos justo al ampliarlos. */
.pixel-icon--grande img,
.pixel-icon--grande svg {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px var(--shade-strong));
}

/* `pixelated` sólo para los de mapa de bits que aún puedan quedar: al vector no
   le hace falta y le comería los bordes redondeados. */
.pixel-icon--grande img {
  image-rendering: pixelated;
}

/* ==========================================================================
   3. BOTONES  ·  PrimaryButton / SecondaryButton
      HabHub usa botones con peso: altura 48px, radio 12, texto 16 bold.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-16);
  font-weight: var(--fw-black);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background-image: var(--grad-primary);
  color: var(--text-on-primary);
  border-color: var(--accent-deep);
  box-shadow: var(--sh-btn);
  text-shadow: 0 1px 0 var(--shade);
}

.btn--primary:hover {
  background-image: var(--grad-primary-hover);
}

.btn--primary:active {
  box-shadow: var(--sh-btn-press);
}

.btn--secondary {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border);
}

.btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost:hover {
  background: var(--accent-soft);
}

.btn--gold {
  background-image: var(--grad-gold);
  color: var(--text-on-gold);
  border-color: var(--hy-gold-600);
  box-shadow: var(--sh-btn);
}

.btn--discord {
  background: var(--hy-discord);
  color: var(--on-image);
  border-color: var(--hy-discord-strong);
  box-shadow: var(--sh-btn);
}

.btn--discord:hover {
  background: var(--hy-discord-strong);
}

.btn--sm {
  height: 38px;
  padding: 0 var(--s-4);
  font-size: var(--fs-14);
}

.btn--lg {
  height: 56px;
  padding: 0 var(--s-7);
  font-size: var(--fs-17);
}

.btn--block {
  width: 100%;
}

/* EL BOTÓN QUE SALTA. Es el de entrar al hotel: el que se quiere que se vea
   nada más abrir la página.
   Salta y sólo salta: la animación mueve el botón con `translateY` y NADA MÁS.
   No toca ni el alto, ni el ancho, ni la letra, ni la escala; ni siquiera
   empuja lo que tiene al lado, porque `transform` no ocupa sitio en la página.
   El salto es doble —uno alto y un rebote pequeño— y luego se queda quieto un
   rato largo: un botón dando botes sin parar cansa y se lee como un error. */
@keyframes salto-boton {
  0%,
  100% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(-9px);
  }
  50% {
    transform: translateY(0);
  }
  62% {
    transform: translateY(-4px);
  }
  74% {
    transform: translateY(0);
  }
}

/* Y EL COLOR, sólo mientras está en el aire: sube en morado claro y aterriza en
   el morado oscuro de siempre. Los dos son los de la marca —los mismos que usa
   el botón al pasarle el ratón—, así que no aparece ningún morado nuevo.
   Va en su propia animación para que la del salto siga tocando `transform` y
   nada más. */
@keyframes color-boton {
  /* Oscuro en el suelo. */
  0% {
    background-image: var(--grad-primary);
  }
  /* Se aclara AL DESPEGAR, no al llegar arriba: el cambio de color y el
     movimiento tienen que empezar a la vez o parece que van cada uno por su
     lado. */
  5% {
    background-image: var(--grad-primary-hover);
  }
  /* Y vuelve al oscuro justo cuando aterriza del todo. */
  74%,
  100% {
    background-image: var(--grad-primary);
  }
}

.btn--salta {
  /* Un salto grande, un rebote pequeño y una respiración antes del siguiente.
     LAS DOS ANIMACIONES DURAN LO MISMO, y no es un detalle: el color sube al
     despegar y aterriza con el botón. Si una se alarga y la otra no, el botón
     se enciende cuando ya está en el suelo y parece estropeado.
     La velocidad la ha puesto ella: iba a 1,15 s y pidió que saltara menos
     rápido, así que el ciclo entero —salto, rebote y pausa— se estira por
     igual y la coreografía se queda como estaba, sólo que más calmada. */
  animation:
    salto-boton 1.7s cubic-bezier(0.3, 0.86, 0.4, 1) infinite,
    color-boton 1.7s steps(1, end) infinite;
  /* Que el salto no se coma la sombra ni el borde al pasar por encima. */
  will-change: transform;
}

/* Al pasar el ratón o al pulsarlo, deja de saltar: ya lo has visto y lo estás
   usando; seguir moviéndose sólo hace fallar el clic. */
.btn--salta:hover,
.btn--salta:focus-visible,
.btn--salta:active {
  animation: none;
  background-image: var(--grad-primary-hover);
}

/* Quien pide menos movimiento en su sistema, no lo tiene. Y en modo de
   accesibilidad tampoco. */
@media (prefers-reduced-motion: reduce) {
  .btn--salta {
    animation: none;
  }
}

:root[data-a11y="true"] .btn--salta {
  animation: none;
}

.btn[aria-pressed="true"] {
  background-image: var(--seccion-grad);
  color: var(--text-on-primary);
  border-color: var(--accent-deep);
}

/* ==========================================================================
   4. PANELES  ·  Panel / PanelHeader / SectionTag
   ========================================================================== */
.panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.panel--raised {
  background-image: var(--grad-surface);
  box-shadow: var(--sh-md);
}

.panel--flat {
  box-shadow: none;
  background: var(--surface-sunken);
}

.panel__body {
  padding: var(--s-6);
}

.panel__body--tight {
  padding: var(--s-4);
}

.panel__body--flush {
  padding: 0;
}

/* LA BARRA DE BLOQUE. Color sólido en degradado, SIN rayas: las rayas venían de
   la referencia de HabHub y ella las quitó — "quiero color sólido en degrade". */
.panelbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--panelbar-h);
  padding: var(--s-2) var(--s-4);
  background-image: var(--panelbar-bg);
  border-bottom: 1px solid var(--panelbar-border);
  box-shadow: var(--panelbar-shadow);
  color: var(--panelbar-text);
}

.panelbar__text {
  min-width: 0;
}

.panelbar__title {
  font-size: var(--fs-19);
  font-weight: var(--fw-black);
  color: var(--panelbar-text);
  text-shadow: 0 1px 0 var(--shade-strong);
  line-height: 1.2;
}

.panelbar__sub {
  font-size: var(--fs-13);
  color: var(--hl-text);
  line-height: 1.3;
}

.panelbar__aside {
  margin-left: auto;
  flex: none;
}

/* Segundo tono de la sección: distingue bloques sin salirse del color. Se
   aclara un punto en vez de girar el tono, que producía naranjas raros. */
.panelbar--magenta {
  background-image: var(--seccion-barra);
  filter: brightness(1.18);
}

/* Cabecera sobria (panel de carril lateral): punto + título */
.panelhead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6) 0;
}

.panelhead__dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: var(--sh-glow);
}

.panelhead__title {
  font-size: var(--fs-19);
}

.panelhead__sub {
  font-size: var(--fs-14);
  color: var(--text-muted);
}

.panelhead__aside {
  margin-left: auto;
}

/* Etiqueta / chip  ·  SectionTag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  /* Nunca se estira dentro de una columna flexible: la píldora abraza su texto. */
  width: fit-content;
  max-width: 100%;
  height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-size: var(--fs-12);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--gold {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: var(--gold-soft);
}

.tag--magenta {
  background: var(--accent-2-soft);
  color: var(--hy-magenta-300);
}

.tag--solid {
  background-image: var(--seccion-grad);
  color: var(--text-on-primary);
  border-color: var(--accent-deep);
}

.tag--count {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-13);
  color: var(--text);
  background: var(--surface-inset);
}

/* Filas de datos apiladas (Stats, listas de valores) */
.datarow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.datarow + .datarow {
  margin-top: var(--s-3);
}

.datarow__value {
  font-size: var(--fs-19);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.datarow__label {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-14);
}

/* Ficha de estadística con icono (dashboard) */
.stat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

/* Icono vectorial de una cifra: nítido a cualquier tamaño, sin marco. */
.stat__icono {
  display: grid;
  place-items: center;
  flex: none;
  filter: drop-shadow(0 2px 3px var(--shade-strong));
}

.stat__icono--sm svg {
  width: 24px;
  height: 24px;
}

.stat__label {
  font-size: var(--fs-15);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  line-height: 1.25;
}

.stat__value {
  font-size: var(--fs-14);
  color: var(--text-muted);
}

.stat--currency .stat__label {
  font-size: var(--fs-22);
}

/* Paso numerado (barras laterales "Cómo funciona") */
.step {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.step__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-weight: var(--fw-black);
  font-size: var(--fs-14);
}

.step__title {
  font-size: var(--fs-15);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.step__desc {
  font-size: var(--fs-13);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Estado vacío */
.empty {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-14);
}

/* ==========================================================================
   5. HERO DE PÁGINA  ·  PageHero
      HabHub: tarjeta 24px de radio, texto a la izquierda, escena pixel a la
      derecha fundida hacia el fondo. Variante oscura a sangre completa.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  padding: var(--s-10) var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background-color: var(--surface);
  overflow: hidden;
  isolation: isolate;
}

.hero__scene {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  background-position: center;
  background-size: cover;
  z-index: -2;
}

.hero__fade {
  position: absolute;
  inset: 0;
  background-image: var(--grad-hero-fade);
  z-index: -1;
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  max-width: 620px;
}

/* EL TÍTULO DEL BANNER. Mismo tamaño y misma altura de línea en las tres
   cabeceras que existen (la normal, la del catálogo y la de Match): si no, al
   pasar de una sección a otra el título pega un salto. */
.hero__title,
.cat-hero__titulo,
.match-hero__titulo {
  font-size: var(--fs-54);
  line-height: 1.1;
}

.hero__sub,
.cat-hero__sub,
.match-hero__sub {
  margin-top: var(--s-2);
  font-size: var(--fs-17);
  color: var(--text-muted);
  max-width: 46ch;
}

.hero__icon {
  width: 78px;
  height: 78px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--accent-soft);
}

.hero__icon img,
.hero__icon svg {
  width: 52px;
  height: 52px;
}

/* Variante oscura: escena a sangre + velo (páginas de comunidad/equipo) */
.hero--immersive {
  border-color: transparent;
}

.hero--immersive .hero__scene {
  inset: 0;
  width: 100%;
}

.hero--immersive .hero__fade {
  background-image: linear-gradient(90deg, var(--bg-veil-strong) 0%, var(--bg-veil) 55%, var(--veil-mid) 100%);
}

.hero--immersive .hero__title,
.hero--immersive .hero__sub {
  color: var(--on-image);
}

.hero--immersive .hero__sub {
  opacity: 0.86;
}

.hero__actions {
  margin-top: var(--s-5);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* ==========================================================================
   6. TARJETAS DE CONTENIDO (noticias, fotos, tienda)
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

a.card:hover,
.card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--surface-sunken);
  background-size: cover;
  background-position: center;
}

.card__media--tall {
  aspect-ratio: 4 / 3;
}

.card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.card__title {
  font-size: var(--fs-22);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-2);
  font-size: var(--fs-13);
  color: var(--text-muted);
}

/* Tarjeta destacada horizontal (portada de noticias) */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.feature__media {
  background-color: var(--surface-sunken);
  background-size: cover;
  background-position: center;
  min-height: 320px;
}

.feature__body {
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.feature__title {
  font-size: var(--fs-32);
}

/* Superposición sobre imagen (foto destacada) */
.overlay-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  padding: var(--s-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background-color: var(--surface-sunken);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.overlay-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg-veil-strong) 0%, var(--veil-soft) 62%);
}

.overlay-card__content {
  position: relative;
  z-index: 1;
  color: var(--on-image);
}

.overlay-card__title {
  font-size: var(--fs-32);
  color: var(--on-image);
}

/* Lista con chevron (centro de ayuda, categorías) */
.linkrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.linkrow + .linkrow {
  margin-top: var(--s-3);
}

.linkrow:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.linkrow__title {
  font-size: var(--fs-17);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.linkrow__sub {
  font-size: var(--fs-14);
  color: var(--text-accent);
  font-weight: var(--fw-medium);
}

.linkrow__chevron {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ==========================================================================
   7. TABLA (valores de rares)
   ========================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  font-size: var(--fs-12);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

.table td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--surface-hover);
}

.table__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.table__name {
  font-size: var(--fs-16);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.table__sub {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.table__value {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.table__value b {
  font-size: var(--fs-16);
}

/* ==========================================================================
   8. RANKINGS  ·  LeaderboardCard / LeaderboardGrid
      HabHub: bloque grande con icono + título y un podio de 3 avatares.
   ========================================================================== */
.lbgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.lbcard__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-6) 0;
}

.lbcard__title {
  font-size: var(--fs-26);
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5) 0;
}

.podium__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.podium__avatar {
  height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.podium__avatar img,
.podium__avatar svg {
  height: 100%;
  width: auto;
}

.podium__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  background-image: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-sunken) 100%);
  text-align: center;
}

.podium__slot--1 .podium__block {
  height: 132px;
  background-image: var(--seccion-grad);
  border-color: var(--accent-deep);
}

.podium__slot--1 .podium__name,
.podium__slot--1 .podium__score {
  color: var(--text-on-primary);
}

.podium__slot--2 .podium__block {
  height: 100px;
}

.podium__slot--3 .podium__block {
  height: 78px;
}

.podium__rank {
  font-size: var(--fs-12);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  color: var(--gold);
}

.podium__slot--1 .podium__rank {
  color: var(--hy-gold-300);
}

.podium__name {
  font-size: var(--fs-16);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium__score {
  font-size: var(--fs-14);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Resto del ranking (puestos 4+) */
.ranklist {
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.rankrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
}

.rankrow:hover {
  background: var(--surface-hover);
}

.rankrow__n {
  width: 26px;
  flex: none;
  font-weight: var(--fw-black);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.rankrow__name {
  font-weight: var(--fw-bold);
}

.rankrow__score {
  margin-left: auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   9. FICHAS DE MIEMBRO (equipo, VIP, leales)
   ========================================================================== */
.membergrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-5);
}

.member {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.member__info {
  min-width: 0;
  flex: 1;
}

.member__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-19);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.member__role {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--text-accent);
}

.member__motto {
  margin-top: var(--s-2);
  font-size: var(--fs-14);
  color: var(--text-muted);
}

.member__meta {
  margin-top: var(--s-2);
  font-size: var(--fs-12);
  color: var(--text-dim);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.member__badges {
  display: grid;
  grid-template-columns: repeat(2, 46px);
  gap: var(--s-2);
  align-content: start;
  flex: none;
}

.badgeslot {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.badgeslot--empty {
  border-style: dashed;
  opacity: 0.5;
}

.badgeslot img,
.badgeslot svg {
  width: 32px;
  height: 32px;
}

.dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--text-dim);
}

.dot[data-online="true"] {
  background: var(--hy-ok-400);
}

/* ==========================================================================
   10. FORMULARIOS  ·  FormField
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-black);
  color: var(--text);
}

.field__hint {
  font-size: var(--fs-12);
  color: var(--text-dim);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.textarea {
  height: auto;
  min-height: 104px;
  padding: var(--s-3) var(--s-4);
  resize: vertical;
  line-height: var(--lh-normal);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-dim);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-glow);
}

.select {
  appearance: none;
  padding-right: var(--s-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.searchbox {
  position: relative;
}

.searchbox .input {
  padding-left: var(--s-10);
}

.searchbox__icon {
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}

.filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-5);
}

/* Grupo de pestañas / filtros rápidos */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  cursor: pointer;
}

.chip:hover {
  background: var(--surface-hover);
}

.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background-image: var(--seccion-grad);
  color: var(--text-on-primary);
  border-color: var(--accent-deep);
}

/* ==========================================================================
   11. PANEL DE HERRAMIENTA  ·  ToolPanel (Creador de placas)
       HabHub usa paneles oscuros para las herramientas: en Hyris el modo
       oscuro es la casa, así que se hunde el lienzo y se sube el contraste.
   ========================================================================== */
.tool {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--bg-page-deep);
  box-shadow: var(--sh-md);
  padding: var(--s-8);
}

.tool__title {
  font-size: var(--fs-40);
  margin-top: var(--s-4);
}

.tool__sub {
  margin-top: var(--s-2);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}

.tool__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.tool__bar .btn--secondary {
  background: var(--surface-raised);
  border-color: var(--border-soft);
  flex: 1 1 auto;
  min-width: 180px;
}

.tool__stage {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
}

.tool__palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.swatch {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 2px solid var(--border-pixel);
  cursor: pointer;
  padding: 0;
}

.swatch[aria-pressed="true"] {
  box-shadow: var(--sh-glow);
  border-color: var(--text-strong);
}

/* Lienzo de dibujo 40×40 */
.canvas-wrap {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  border: 2px solid var(--border-pixel);
  border-radius: var(--r-sm);
  background-color: var(--on-image);
  background-image: linear-gradient(45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  touch-action: none;
}

.canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
}

.badge-preview {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

.badge-preview canvas {
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
}

/* ==========================================================================
   12. CONTROLES FLOTANTES + PIE
   ========================================================================== */
.floaties {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.floaties__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 52px;
  padding: 0 var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  color: var(--text);
  font-weight: var(--fw-black);
  box-shadow: var(--sh-lg);
  cursor: pointer;
}

.floaties__btn--icon {
  width: 52px;
  padding: 0;
  justify-content: center;
}

.footer {
  margin-top: var(--s-12);
  padding: var(--s-10) 0 var(--s-12);
  border-top: 1px solid var(--border-soft);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  align-items: center;
  justify-content: space-between;
}

/* La marca legal, centrada y la última de todo. */
.footer__marcaLegal {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-hairline);
  text-align: center;
}

.footer__marcaLegal .footer__legal {
  margin: 0 auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}

.footer__links a {
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}

.footer__links a:hover {
  color: var(--text-accent);
}

.footer__legal {
  font-size: var(--fs-13);
  color: var(--text-dim);
}

/* ==========================================================================
   13. RESPONSIVE DE COMPONENTES
   ========================================================================== */
/* La barra tiene que caber siempre: primero encoge, luego suelta lastre y por
   último se pliega en el menú hamburguesa. */
/* El menú no se encoge por debajo de su contenido: si no cabe, se pliega en la
   hamburguesa. Así nunca se monta encima del bloque de acciones. */
.topnav__nav {
  flex: 0 0 auto;
  min-width: 0;
}

/* La barra tiene que caber SIEMPRE, con el selector de idioma incluido: era el
   elemento que se salía y se veía cortado.
   OJO: `.topnav__bar` está topada a `--shell-max` (1440 px), así que NO gana
   sitio por mucho que crezca la pantalla. Por eso estas reducciones NO van en
   una media query: si el menú completo no cabe en 1440, no cabe nunca. Cada
   cosa que se quita conserva su etiqueta accesible.
   Por debajo de 1400 px el menú entero se pliega en la hamburguesa (más abajo). */
.topnav__bar {
  gap: var(--s-3);
}

.menu {
  gap: 0;
}

.menu__link {
  padding: 0 5px;
  font-size: var(--fs-15);
}

/* El nombre cede el sitio; el avatar se queda. */
.usermenu__name {
  display: none;
}

.topnav__actions .btn {
  font-size: var(--fs-15);
}

/* Discord se queda en logotipo: sigue teniendo aria-label y título. */
.topnav__actions .btn--discord span {
  display: none;
}

.topnav__actions .btn--discord {
  padding: 0 var(--s-3);
}

/* El logo es la marca: manda, y por eso la barra se hace más alta para él. */
.topnav__logo img,
.topnav__logo svg {
  height: 60px;
}

/* "Entrar al hotel" se acorta a "Entrar": el destino se entiende igual y son
   unos 65 px que salvan la fila única.
   Va SIN media query, como el resto de reducciones de aquí arriba y por lo
   mismo: la barra está topada a 1440 px, así que lo que no cabe ahí no cabe en
   ninguna pantalla. Estaba dentro de un `max-width: 1420px` y al entrar
   "Utilidades" en el menú la barra se salía 81 px justo a 1440. */
.btn__largo {
  display: none;
}

.btn__corto {
  display: inline;
}

/* El botón de Discord lleva su logotipo oficial Y su texto. */
.btn--discord svg {
  flex: none;
}

@media (max-width: 1180px) {
  .hero {
    padding: var(--s-8);
  }
}

/* UNA SOLA LÍNEA. La barra no se parte nunca: primero suelta lastre (texto del
   botón de entrar, aire entre elementos) y, cuando ya no hay nada más que
   soltar, se pliega en la hamburguesa. Nada de una segunda fila con el menú
   descolgado: quedaba desordenado. */
.topnav__bar {
  flex-wrap: nowrap;
}

@media (max-width: 1420px) {
  .topnav__bar {
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
  }

  .menu__link {
    padding: 0 6px;
    font-size: var(--fs-14);
  }

  .topnav__logo img,
  .topnav__logo svg {
    height: 50px;
  }

  .topnav__logo {
    padding: 0;
  }

  .topnav__actions {
    gap: 6px;
  }
}

/* Último apretón antes de plegar. */
@media (max-width: 1320px) {
  .menu__link {
    padding: 0 5px;
  }

  .online-badge {
    padding-left: var(--s-2);
    padding-right: var(--s-2);
  }
}

@media (max-width: 1000px) {
  .lbgrid,
  .membergrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature__media {
    min-height: 220px;
  }

  .filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Aquí aparece la hamburguesa: por debajo de este ancho la fila única ya no
   cabe de ninguna manera (medido en el navegador con el menú completo).
   Con el menú de cinco puertas (24/09/2026) el corte baja de 1239 a 1099 px:
   entre 1100 y 1239 manda `nav-compacta.js`, que pliega sólo si no cabe.
   OJO: aquí SÓLO se pliega el MENÚ. Las acciones —conectados, Discord, "Entrar
   al hotel", avatar— siguen en la barra mientras quepan: esconder el botón de
   entrar al hotel en una tablet sería absurdo. */
@media (max-width: 1099px) {
  .navtoggle {
    display: inline-flex;
    order: 2;
  }

  .topnav__nav {
    display: none;
    order: 5;
    width: 100%;
    margin-top: 0;
    padding: var(--s-2) 0 var(--s-3);
  }

  /* Con el menú desplegado la barra sí puede crecer hacia abajo. */
  .topnav__bar:has(.topnav__nav[data-open="true"]) {
    flex-wrap: wrap;
  }

  .topnav__nav[data-open="true"] {
    display: block;
  }

  .topnav__divider {
    display: none;
  }

  .topnav__spacer {
    order: 1;
  }

  /* Menú a una columna y desplegables en línea. */
  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
  }

  .menu__link {
    width: 100%;
    justify-content: space-between;
    height: 50px;
    font-size: var(--fs-16);
    padding: 0 var(--s-3);
  }

  .dropdown {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 var(--s-2) var(--s-4);
    min-width: 0;
  }

  .dropdown:not([data-open="true"]) {
    display: none;
  }
}

/* Móvil de verdad: la barra se queda en logo + hamburguesa y TODO lo demás
   —contador, Discord, entrar y usuario— baja al panel desplegable. */
@media (max-width: 900px) {
  .topnav__logo img,
  .topnav__logo svg {
    height: 38px;
  }

  .topnav__bar {
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
  }

  .topnav__actions {
    order: 6;
    display: none;
    width: 100%;
    flex-wrap: wrap;
    padding-top: var(--s-3);
    border-top: 1px solid var(--border-hairline);
  }

  .topnav__nav[data-open="true"] ~ .topnav__actions {
    display: flex;
  }

  .topnav__actions .btn,
  .topnav__actions .online-badge {
    flex: 1 1 140px;
  }

  .topnav__actions .btn--discord {
    width: auto;
    padding: 0 var(--s-4);
  }

  .topnav__actions .btn--discord span {
    display: inline;
  }

  .online-badge__text {
    display: inline;
  }

  .usermenu {
    flex: 1 1 100%;
  }

  .usermenu__trigger {
    width: 100%;
    justify-content: flex-start;
  }

  .usermenu__name {
    display: inline;
    max-width: none;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s-6);
    min-height: 0;
  }

  .hero__scene {
    inset: 0;
    width: 100%;
    opacity: 0.35;
  }

  .hero__fade {
    background-image: linear-gradient(180deg, var(--bg-veil) 0%, var(--bg-veil-strong) 100%);
  }

  .hero__inner {
    max-width: none;
  }

  .tool {
    padding: var(--s-5);
  }
}

@media (max-width: 720px) {
  .panel__body {
    padding: var(--s-4);
  }

  .filterbar,
  .membergrid {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-4);
  }

  .member {
    flex-direction: column;
  }

  .member__badges {
    grid-template-columns: repeat(4, 46px);
  }

  .avatar-tile {
    width: 118px;
    height: 152px;
  }

  .avatar-tile--lg {
    width: 140px;
    height: 176px;
  }

  .podium__avatar {
    height: 88px;
  }

  .feature__body {
    padding: var(--s-5);
  }

  .floaties {
    right: var(--s-3);
    bottom: var(--s-3);
  }

  .footer__inner {
    gap: var(--s-5);
  }

  /* Tabla → tarjetas apiladas */
  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    margin-bottom: var(--s-3);
    background: var(--surface-sunken);
  }

  .table td {
    border-bottom: 0;
    padding: var(--s-2) var(--s-4);
  }

  .table td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: var(--fs-11);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-dim);
  }
}

/* ==========================================================================
   14. AÑADIDOS DE LA ITERACIÓN DE DATOS REALES
   ========================================================================== */

/* --- Aviso de datos de desarrollo ---------------------------------------- */
.devbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--shell-gutter);
  /* Opaca: con un fondo de foto detrás, el aviso se volvía ilegible. */
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font-size: var(--fs-13);
}

.devbar__pill {
  flex: none;
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  background: var(--accent-deep);
  color: var(--text-on-primary);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-11);
}

/* --- Barra superior: separación real entre menú y acciones --------------- */
/* Separador explícito entre el menú y las acciones: "Ayuda" y el contador de
   conectados nunca deben leerse como un mismo elemento. */
/* Separación entre el menú y las acciones. Ya no hace falta una línea: el
   contador de conectados tiene borde propio y se lee como un elemento aparte.
   El hueco se conserva, que era lo importante. */
.topnav__divider {
  width: var(--s-3);
  height: 1px;
  flex: none;
  background: transparent;
  margin: 0;
}

.topnav__nav {
  margin-right: 0;
  flex: 0 0 auto;
}

.topnav__sesion {
  display: flex;
  gap: var(--s-2);
}

/* El logo animado manda sobre su caja: se respeta su proporción 239×88. */
.topnav__logo img {
  width: auto;
}

/* El contador de conectados es un elemento propio, nunca parte del menú. */
.online-badge {
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.online-badge:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.online-badge[data-estado="cargando"] .online-badge__text {
  opacity: 0.6;
}

.online-badge[data-estado="cargando"] .online-badge__dot {
  background: var(--text-dim);
  box-shadow: none;
  animation: hy-latido 1.2s ease-in-out infinite;
}

.online-badge[data-estado="error"] .online-badge__dot {
  background: var(--state-error);
  box-shadow: none;
}

.online-badge[data-hotel="maintenance"] .online-badge__dot {
  background: var(--state-warning);
}

@keyframes hy-latido {
  50% {
    opacity: 0.35;
  }
}

/* --- Perfil / bienvenida ------------------------------------------------- */
/* El keko va CENTRADO respecto a la ficha, no colgando de arriba. */
.profile-card {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  align-items: center;
}

.profile-card > .avatar-tile {
  align-self: center;
}

.profile-card__info {
  flex: 1;
  min-width: 280px;
}

.profile-card__nombre {
  font-size: var(--fs-40);
}

.profile-card__nombre--xl {
  font-size: var(--fs-54);
}

.profile-card__lema {
  margin: 0;
}

/* Pie de panel con la misma barra rayada, sin borde inferior */
.panelbar--pie {
  border-bottom: 0;
  border-top: 1px solid var(--panelbar-border);
  justify-content: space-between;
}

/* --- Ayuda: gestiones ----------------------------------------------------- */
.soporte {
  display: grid;
  gap: var(--s-4);
}

.desbaneados {
  display: grid;
  gap: var(--s-3);
}

.desbaneado {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

/* --- Perfil: personalizar --------------------------------------------------
   La apariencia NO se edita aquí: se enseña el keko tal cual está en el holo y
   se manda al vestidor del hotel. Un `figure` es una cadena interna del
   renderizador, no algo que nadie tenga que leer. */
.perfil-editar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: var(--s-6);
  align-items: start;
}

.perfil-apariencia {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  text-align: center;
}

.field__hint--error {
  color: var(--state-error);
}

@media (max-width: 900px) {
  .perfil-editar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Kekos --------------------------------------------------------------- */
.keko {
  width: auto;
  object-fit: contain;
}

/* Silueta de reserva: se nota que falta el render real, no engaña. */
img[data-reserva="true"] {
  opacity: 0.55;
  filter: saturate(0);
}

/* --- Fotos de la comunidad ---------------------------------------------- */
.photo__autor {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.photo__likes {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-muted);
}

.miniatura {
  width: 56px;
  height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
}

/* --- Barras de filtros --------------------------------------------------- */
.barra-filtros {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}

.barra-filtros__aparte {
  margin-left: auto;
  min-width: 220px;
}

.barra-filtros__aparte--ancho {
  flex: 1;
  min-width: 260px;
}

.chips-vertical .chips {
  flex-direction: column;
  align-items: stretch;
}

/* --- Tienda -------------------------------------------------------------- */
.producto__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background-image: var(--grad-surface);
  border-bottom: 1px solid var(--border-soft);
}

.producto__etiqueta {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
}

.producto__img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px var(--shade-strong));
}

.producto__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

.producto__precio {
  flex: none;
  text-align: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.producto__precio b {
  display: block;
  font-size: var(--fs-22);
  color: var(--text-accent);
}

/* --- Resumen de compra --------------------------------------------------- */
.resumen__cabecera {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
}

.resumen__img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  flex: none;
}

.resumen__precio {
  margin-top: var(--s-3);
  font-size: var(--fs-32);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.resumen__sub {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--fs-17);
}

.metodos {
  display: grid;
  gap: var(--s-3);
}

.metodo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.metodo:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.metodo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.metodo > span:nth-child(2) {
  flex: 1;
}

/* --- Estado del pedido --------------------------------------------------- */
.estado-pedido__cabecera {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}

.estado-pedido__titulo {
  font-size: var(--fs-22);
}

.estado-pedido__spinner {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-pill);
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: hy-giro 0.9s linear infinite;
}

.estado-pedido[data-tono="exito"] .estado-pedido__spinner {
  border-color: var(--state-success);
  border-top-color: var(--state-success);
  animation: none;
}

.estado-pedido[data-tono="error"] .estado-pedido__spinner {
  border-color: var(--state-error);
  border-top-color: var(--state-error);
  animation: none;
}

@keyframes hy-giro {
  to {
    transform: rotate(360deg);
  }
}

/* --- Catálogo ------------------------------------------------------------ */
.catgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-5);
}

.catcard {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.catcard:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

/* --- Estados de carga y error ------------------------------------------- */
.empty--error {
  border-style: solid;
  border-color: var(--state-error);
  color: var(--text);
}

.skeleton {
  display: grid;
  gap: var(--s-2);
}

.skeleton__linea {
  display: block;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover) 50%, var(--surface-sunken) 100%);
  background-size: 200% 100%;
  animation: hy-brillo 1.4s ease-in-out infinite;
}

@keyframes hy-brillo {
  to {
    background-position: -200% 0;
  }
}

/* --- Etiquetas de estado ------------------------------------------------- */
.tag--ok {
  background: var(--state-success-soft);
  color: var(--state-success);
  border-color: var(--state-success-border);
}

.tag--error {
  background: var(--state-error-soft);
  color: var(--state-error);
  border-color: var(--state-error-border);
}

.tag--warn {
  background: var(--state-warning-soft);
  color: var(--state-warning);
  border-color: var(--state-warning-border);
}

@media (max-width: 1000px) {
  .catgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .devbar {
    font-size: var(--fs-12);
  }

  .barra-filtros__aparte {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .profile-card {
    gap: var(--s-5);
  }

  .producto__cabecera,
  .resumen__cabecera {
    flex-direction: column;
  }
}

/* ==========================================================================
   15. CATÁLOGO DE RARES
   ========================================================================== */

.catalogo__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
}

.catalogo__filtros {
  display: flex;
  gap: var(--s-4);
  align-items: flex-end;
  margin-left: auto;
  min-width: 300px;
  flex: 1;
}

.catalogo__filtros .searchbox {
  flex: 1;
}

.chip__contador {
  margin-left: var(--s-2);
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  font-size: var(--fs-12);
}

.chip[aria-selected="true"] .chip__contador {
  background: var(--shade);
}

.catalogo__lista {
  padding: var(--s-5);
}

.catalogo__vacio {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-muted);
}

.catalogo__aviso {
  margin: 0 var(--s-5) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--state-warning-border);
  border-radius: var(--r-md);
  background: var(--state-warning-soft);
  color: var(--text);
  font-size: var(--fs-14);
}

.raregrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-4);
  align-items: stretch;
}

.rare {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rare:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.rare--oculto {
  opacity: 0.6;
  border-style: dashed;
}

.rare__media {
  position: relative;
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.rare__img {
  max-width: 86%;
  max-height: 86%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.rare__sinimagen {
  font-size: var(--fs-12);
  color: var(--text-dim);
}

.rare__etiquetas {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  right: var(--s-2);
  display: flex;
  gap: var(--s-2);
  justify-content: space-between;
  z-index: 1;
}

.rare__etiquetas .tag {
  height: 22px;
  font-size: var(--fs-11);
  padding: 0 var(--s-2);
}

/* El nombre ocupa SIEMPRE dos líneas de alto, se corte o no: así todas las
   tarjetas de una fila miden lo mismo y ningún título se sale de la suya. */
.rare__nombre {
  font-size: var(--fs-15);
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rare__precios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.rare__precio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-14);
}

.rare__precio b {
  color: var(--text-strong);
}

.rare__moneda {
  color: var(--text-dim);
  font-size: var(--fs-12);
}

.rare__precio--vacio {
  color: var(--text-dim);
  font-size: var(--fs-13);
}

.rare__unidades {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-13);
  color: var(--text-muted);
}

/* Las cuatro acciones de administración NO caben en una fila dentro de una
   tarjeta de 190 px: se salían por la derecha y se metían encima del rare de al
   lado. Ahora es una rejilla de 2×2 que nunca se desborda. */
.rare__acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-soft);
}

.rare__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
  justify-content: center;
  height: 32px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

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

/* El texto del botón nunca puede empujar la tarjeta. */
.rare__accion span:not(.sr-only) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rare__accion--peligro:hover {
  color: var(--state-error);
  border-color: var(--state-error-border);
}

.catcard__n {
  margin-left: auto;
  font-weight: var(--fw-black);
  color: var(--text-accent);
}

button.catcard {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* --- Diálogos ------------------------------------------------------------ */
.dialogo {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}

.dialogo::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(3px);
}

.dialogo__caja {
  width: min(460px, calc(100vw - 32px));
  padding: var(--s-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  box-shadow: var(--sh-lg);
}

.dialogo__titulo {
  font-size: var(--fs-22);
  margin-bottom: var(--s-3);
}

.dialogo__opciones {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-5) 0;
}

.dialogo__acciones {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  margin-top: var(--s-6);
}

.btn--peligro {
  background: var(--state-error);
  color: var(--hy-ink-900);
  border-color: var(--state-error-border);
  box-shadow: var(--sh-btn);
}

@media (max-width: 720px) {
  .catalogo__barra,
  .catalogo__lista {
    padding: var(--s-4);
  }

  .catalogo__filtros {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .raregrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ==========================================================================
   16. IDIOMA · CATÁLOGO v2 · TIENDA v2 · AUTENTICACIÓN
   ========================================================================== */

/* --- Selector de idioma --------------------------------------------------- */
/* Un solo botón: enseña el idioma AL QUE VAS, no en el que estás. */
.idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 34px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  flex: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.idioma:hover {
  color: var(--text-accent);
  border-color: var(--border-strong);
}

/* --- Catálogo: cabecera con el Dragón de Plata --------------------------- */
.cat-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5) var(--s-6);
  align-items: center;
  padding: var(--s-8);
  /* Le reserva a la escena la franja derecha, igual que las demás cabeceras.
     Si ella ensancha la imagen, el hueco reservado crece con ella: si no, el
     título se metería debajo de la foto. */
  --banda-ancho: min(calc(52% * var(--foto-escala, 1)), calc(100% - 340px));
  padding-right: max(var(--s-8), calc(var(--banda-ancho) + var(--s-5)));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background-image: var(--grad-surface);
  box-shadow: var(--sh-sm);
}

.cat-hero__dragon {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 10px 22px var(--shade-strong));
}

.cat-hero__clasificacion {
  grid-column: 1 / -1;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}

.cat-hero__clasificacion .chips {
  margin-top: var(--s-3);
}

/* Las pestañas de clasificación llevan furni dentro: necesitan algo más de aire. */
.cat-hero__clasificacion .chip {
  height: 52px;
  padding-left: var(--s-3);
}

.chip__icono {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.catcard__asset {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

.catcard__sigla {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-weight: var(--fw-black);
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
}

/* Filtro real: se oculta con clase para que gane a display:flex */
.rare--filtrado {
  display: none !important;
}

/* --- Catálogo: barra de Buscar / Ordenar alineada ------------------------ */
.catalogo__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
  gap: var(--s-5);
  padding: var(--s-5);
  align-items: end;
}

/* En "Mis matches" la columna de filtros necesita más sitio: son cuatro
   pestañas, no un desplegable. */
.catalogo__toolbar--match {
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr);
}

.catalogo__toolbar--match .chips {
  gap: var(--s-2);
}

.campo-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.campo-toolbar__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: 1.2;
}

.campo-toolbar .searchbox,
.campo-toolbar .select {
  width: 100%;
}

/* --- Tienda -------------------------------------------------------------- */
.aviso-tienda {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--state-warning-border);
  border-left: 4px solid var(--state-warning);
  border-radius: var(--r-lg);
  /* Opaco por debajo: con un fondo de foto detrás, un aviso translúcido no se
     lee, y este avisa de que no hay devoluciones. Dos capas: el panel sólido
     abajo y el tinte de aviso encima (dos colores en `background` a secas no es
     CSS válido y se caía la regla entera). */
  background-color: var(--surface);
  background-image: linear-gradient(var(--state-warning-soft), var(--state-warning-soft));
}

.aviso-tienda__icono {
  color: var(--state-warning);
  flex: none;
}

.aviso-tienda__titulo {
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.aviso-tienda__texto {
  font-size: var(--fs-14);
  color: var(--text);
}

.aviso-tienda__enlace {
  margin-left: auto;
  flex: none;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.aviso-tienda__enlace:hover {
  border-color: var(--border-strong);
}

.tienda__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--grid-gap);
}

.producto {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  overflow: hidden;
}

.producto__cab {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}

.producto__icono {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

.producto__nombre {
  font-size: var(--fs-19);
  flex: 1;
  min-width: 0;
}

/* El precio va en el color de la sección (lila), no en verde: el verde es
   para los estados de la interfaz, no para la marca. */
.producto__precio {
  flex: none;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--seccion-borde);
  border-radius: var(--r-md);
  background: var(--seccion-suave);
  color: var(--seccion-texto);
  font-weight: var(--fw-black);
}

.producto__desc {
  padding: var(--s-5);
  color: var(--text-muted);
  flex: 1;
}

.producto__pie {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  border-top: 1px solid var(--border-soft);
}

.producto__pie .btn {
  margin-left: auto;
}

.producto__accion {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent-deep);
  border-radius: var(--r-md);
  background-image: var(--grad-primary);
  color: var(--text-on-primary);
  cursor: pointer;
}

.saldo {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  text-align: center;
}

.saldo__valor {
  font-size: var(--fs-26);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

.saldo__label {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

/* --- Términos ------------------------------------------------------------ */
.dialogo--ancho .dialogo__caja {
  width: min(720px, calc(100vw - 32px));
  max-height: 86vh;
  overflow-y: auto;
}

.terminos {
  position: relative;
}

.terminos__cerrar {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.terminos__cerrar:hover {
  color: var(--text-strong);
  background: var(--surface-hover);
}

.terminos__titulo {
  font-size: var(--fs-32);
  text-align: center;
  margin-bottom: var(--s-6);
}

.terminos__sub {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--fs-19);
}

.terminos p {
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.terminos p + p {
  margin-top: var(--s-3);
}

.checkbox {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) 0;
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: none;
}

.enlace {
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 900px) {
  .cat-hero {
    padding: var(--s-5);
    padding-bottom: 172px;
    gap: var(--s-4);
  }

  /* Como en las demás cabeceras: en móvil la escena baja al pie. */
  .cat-hero__foto {
    inset: auto 0 0 0;
    width: 100%;
    height: 148px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cat-hero__dragon {
    width: 64px;
  }

  .catalogo__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .aviso-tienda {
    flex-wrap: wrap;
  }

  .aviso-tienda__enlace {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================================================
   17. INICIO v2 (composición de la referencia) Y AUTENTICACIÓN
   ========================================================================== */

/* --- Bienvenida: keko integrado en la escena ----------------------------- */
.bienvenida {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-8);
  padding: var(--s-8);
  /* Se le reserva a la escena la franja derecha: el keko, el nombre y las
     cifras se quedan a su izquierda y nunca la tapan. Crece con la escala, para
     que ensanchar la imagen no le coma el sitio al texto. */
  --banda-ancho: min(calc(40% * var(--foto-escala, 1)), calc(100% - 420px));
  padding-right: max(var(--s-8), calc(var(--banda-ancho) + var(--s-5)));
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--surface);
}

/* Misma composición que las cabeceras y que HabHub: la escena llena la mitad
   derecha a tamaño real y su borde izquierdo es un ARCO. Se ve nítida y entera;
   el nombre y las cifras viven en la parte lisa de la izquierda.
   Era un pseudo-elemento con sus propias reglas, y por eso se quedaba fuera de
   todo lo que se arreglaba para las demás: ni encuadre, ni zoom, ni vista
   previa. Ahora es una capa más de la misma familia y hereda lo mismo. */
/* Va atada al panel (`.bienvenida .bienvenida__foto`) y no suelta: la regla
   común de todas las bandas vive MÁS ABAJO en esta hoja, así que con la misma
   fuerza ganaba ella y el panel se pintaba con el 52 % de las cabeceras en vez
   de con su 40 %. */
.bienvenida .bienvenida__foto {
  width: var(--banda-ancho);
  /* Su arco es un poco más cerrado que el de las cabeceras: el panel es más
     alto y con la curva de 26 % se comía media escena. */
  -webkit-mask-image: radial-gradient(ellipse var(--arco-panel) 104% at 0% 50%, transparent 0 98%, var(--mascara-solida) 100%);
  mask-image: radial-gradient(ellipse var(--arco-panel) 104% at 0% 50%, transparent 0 98%, var(--mascara-solida) 100%);
}

/* El keko va CENTRADO en su columna, no apoyado abajo: así queda a media
   altura del panel, a la altura del nombre y de las fichas. */
.bienvenida__keko {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  align-self: center;
}

.bienvenida__keko .keko {
  filter: drop-shadow(0 14px 18px var(--shade-strong));
}

.bienvenida__cuerpo {
  min-width: 0;
}

.bienvenida__nombre {
  font-size: var(--fs-54);
  line-height: 1;
}

/* Cinco cifras: monedas y comunidad, en una rejilla que se adapta sola. */
/* Cinco cifras en 3 + 2. Con `auto-fit` salía 4 + 1 y la quinta se quedaba
   sola, que se ve descuadrado; con tres columnas fijas siempre queda repartido
   y las fichas tienen ancho de sobra para su icono y su número. */
/* Las tres cifras sociales, SIEMPRE en una línea. */
/* Las fichas se reparten el ancho ENTRE LAS QUE HAYA, no entre tres fijas.
   Con la rejilla de tres columnas escrita a mano, quitar una dejaba un hueco
   vacío a la derecha en vez de dos fichas anchas. Con `flex` la cuenta la hace
   el navegador: dos, tres o las que sean, siempre llenan la línea, y cuando no
   caben en 200 px cada una bajan solas. */
.bienvenida__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* 140 px es lo que mide una ficha con su icono, su número y su etiqueta sin
   apretarse. Por debajo de eso bajan de línea en vez de encogerse hasta no
   poder leerse. */
.bienvenida__cifras > * {
  flex: 1 1 140px;
  min-width: 0;
}

.bienvenida__cifras .stat {
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}

.bienvenida__cifras .stat__label {
  font-size: var(--fs-26);
}

/* (Ya no hace falta una regla para pantalla estrecha: el `flex-wrap` de arriba
   baja las fichas solo cuando dejan de caber.) */

/* --- Autenticación -------------------------------------------------------- */
.cuerpo-auth {
  background-image: none;
}

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  min-height: 100vh;
}

.auth__hero {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s-12);
  overflow: hidden;
  isolation: isolate;
}

.auth__escena {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.auth__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--velo-auth) 0%, var(--velo-auth-medio) 60%, var(--velo-auth-brillo) 100%);
  z-index: -1;
}

.auth__heroContenido {
  display: grid;
  gap: var(--s-8);
  justify-items: start;
  max-width: 520px;
}

.auth__logo {
  height: 74px;
  width: auto;
  image-rendering: pixelated;
}

.auth__tarjeta {
  padding: var(--s-8);
  border: 1px solid var(--sobre-foto-borde);
  border-radius: var(--r-2xl);
  background: var(--velo-auth-caja);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-lg);
}

.auth__heroTitulo {
  font-size: var(--fs-40);
  color: var(--sobre-foto-texto);
}

.auth__heroSub {
  margin-top: var(--s-3);
  color: var(--sobre-foto-suave);
  font-size: var(--fs-17);
}

.auth__datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.auth__dato {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--sobre-foto-borde);
  border-radius: var(--r-md);
  background: var(--sobre-foto-caja);
  text-align: center;
}

.auth__dato b {
  font-size: var(--fs-19);
  color: var(--sobre-foto-texto);
}

.auth__dato span {
  font-size: var(--fs-12);
  color: var(--sobre-foto-tenue);
}

.auth__miembros {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--sobre-foto-borde);
}

.auth__kekos {
  display: flex;
}

.auth__kekos .avatar {
  margin-right: -10px;
  border: 2px solid var(--surface);
}

.auth__miembrosTexto {
  font-size: var(--fs-13);
  color: var(--sobre-foto-tenue);
}

.auth__panel {
  display: grid;
  align-content: center;
  gap: var(--s-6);
  padding: var(--s-12) var(--s-10);
  background: var(--bg-page);
}

.auth__caja {
  width: min(420px, 100%);
  margin: 0 auto;
}

.auth__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 auto var(--s-6);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

.auth__punto {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--state-success);
  box-shadow: 0 0 0 4px var(--ok-glow);
}

.auth__estado[data-hotel="offline"] .auth__punto {
  background: var(--state-error);
  box-shadow: none;
}

.auth__titulo {
  font-size: var(--fs-40);
  text-align: center;
}

.auth__sub {
  margin: var(--s-3) 0 var(--s-8);
  text-align: center;
  color: var(--text-muted);
}

.auth__form {
  display: grid;
  gap: var(--s-5);
}

.auth__pie {
  text-align: center;
  font-size: var(--fs-14);
  color: var(--text-muted);
}

.auth__disclaimer {
  text-align: center;
  font-size: var(--fs-12);
  color: var(--text-dim);
}

.auth__mock {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.password {
  position: relative;
}

.password .input {
  padding-right: 52px;
}

.password__ojo {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.password__ojo:hover,
.password__ojo--activo {
  color: var(--text-accent);
}

.field__error {
  font-size: var(--fs-13);
  color: var(--state-error);
}

.field--error .input {
  border-color: var(--state-error);
}

.btn--cargando {
  opacity: 0.75;
  pointer-events: none;
}

@media (max-width: 1000px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth__hero {
    min-height: 300px;
    padding: var(--s-8) var(--s-6);
  }

  .auth__panel {
    padding: var(--s-8) var(--s-5) var(--s-12);
  }

  .bienvenida {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
    padding: var(--s-5);
  }

  .bienvenida__keko {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--s-3);
  }
}

@media (max-width: 900px) {
  /* Sin sitio para la franja derecha, la escena pasa a ser una FRANJA al pie
     del panel. Detrás del texto no puede ir: el panel es alto y estrecho, y
     rellenarlo obligaría a acercarse tanto a la escena que sólo se vería un
     trozo de mueble. */
  .bienvenida {
    padding-right: var(--s-5);
    padding-bottom: 172px;
  }

  .bienvenida .bienvenida__foto {
    inset: auto 0 0 0;
    width: 100%;
    height: 148px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 720px) {
  .auth__datos {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth__logo {
    height: 56px;
  }
}

/* --- Catálogo: el furni de cada clasificación, junto a su título ---------- */
/* Siempre visible, sin tener que pulsar: el logo va DENTRO de la pestaña.
   Los tres miden distinto en origen (60×60, 63×77, 44×98), así que se
   normalizan en un marco cuadrado común: mismo tamaño y misma proporción. */
.chip__logo {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  flex: none;
  margin-right: var(--s-1);
}

@media (max-width: 720px) {
  .chip__logo {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   18. HYRIS MATCH
   --------------------------------------------------------------------------
   Identidad de Hyris: morados de marca, paneles del sistema y el corazón
   PIXEL del propio hotel. Nada de rosa de otra aplicación, nada de rojo de
   alerta para algo que es una buena noticia.
   ========================================================================== */

.match-heart {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

/* --- Insignia de novedades ------------------------------------------------ */
/* Acento de marca, no rojo de error: un match no es un fallo. */
.match-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: var(--s-2);
  border-radius: var(--r-pill);
  background-image: var(--grad-magenta);
  color: var(--text-on-primary);
  font-size: var(--fs-12);
  font-weight: var(--fw-black);
  line-height: 1;
  box-shadow: 0 0 0 1px var(--accent-deep) inset;
}

/* --- Cabecera ------------------------------------------------------------- */
.match-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5) var(--s-6);
  padding: var(--s-8);
  /* Franja derecha reservada para la escena, como en las demás cabeceras, y que
     crece con la escala para no dejar el texto debajo de la foto. */
  padding-right: max(var(--s-8), calc(var(--banda-ancho, 32%) + var(--s-5)));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background-image: var(--grad-surface);
  box-shadow: var(--sh-sm);
}

.match-hero__marca {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: var(--r-xl);
  background: var(--accent-2-soft);
  border: 1px solid var(--border-strong);
}

.match-hero__cifras {
  display: flex;
  gap: var(--s-6);
  text-align: center;
}

.match-hero__cifras b {
  display: block;
  font-size: var(--fs-32);
  color: var(--text-accent);
}

.match-hero__cifras span {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

/* --- Pestañas internas ---------------------------------------------------- */
.match-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.match-subnav__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--text-muted);
}

.match-subnav__link:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.match-subnav__link[aria-current="page"] {
  background-image: var(--seccion-grad);
  color: var(--text-on-primary);
}

/* --- Titular de bloque ---------------------------------------------------- */
.match-titular {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-22);
  color: var(--text-strong);
}

/* --- Avance de nuevos matches --------------------------------------------- */
.match-avance {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

.match-avance__kekos {
  display: flex;
  align-items: center;
}

.match-avance__keko {
  margin-right: -10px;
  border-radius: var(--r-pill);
  border: 2px solid var(--surface);
  background: var(--surface-sunken);
  transition: transform var(--dur) var(--ease);
}

.match-avance__keko:hover {
  transform: translateY(-3px);
  z-index: var(--z-base);
}

.match-avance__mas {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  margin-left: var(--s-3);
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-weight: var(--fw-black);
}

.match-avance__link {
  margin-left: auto;
  color: var(--text-accent);
  font-weight: var(--fw-bold);
}

/* --- Tarjeta de match nuevo (el momento) ---------------------------------- */
.match-wow {
  position: relative;
  overflow: hidden;
  padding: var(--s-8);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  background-image: var(--grad-surface);
  box-shadow: var(--sh-md);
  text-align: center;
}

.match-wow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

.match-wow__kekos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-8);
  margin: var(--s-5) 0 var(--s-4);
}

.match-wow__kekos .keko {
  filter: drop-shadow(0 12px 16px var(--shade-strong));
  animation: hy-match-entra var(--dur-slow) var(--ease) both;
}

.match-wow__kekos .keko:last-child {
  animation-delay: 90ms;
}

.match-wow__union {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--accent-2-soft);
  box-shadow: 0 0 0 1px var(--border-strong);
  animation: hy-match-latido 900ms var(--ease) 180ms 2;
}

.match-wow__nombres {
  font-size: var(--fs-32);
}

.match-wow__comunes {
  margin-top: var(--s-2);
  color: var(--text-muted);
}

.match-wow__acciones {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

@keyframes hy-match-entra {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hy-match-latido {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.14);
  }
}

/* --- Fichas de conexión --------------------------------------------------- */
.match-lista {
  display: grid;
  gap: var(--s-4);
}

.match-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}

.match-card--nuevo {
  border-color: var(--border-strong);
  box-shadow: var(--sh-glow);
}

.match-card--filtrada {
  display: none !important;
}

.match-card__nombre {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-19);
}

.match-card__nuevo {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background-image: var(--grad-magenta);
  color: var(--text-on-primary);
  font-size: var(--fs-11);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.match-card__estado {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-1);
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.match-card__bio {
  margin-top: var(--s-3);
  color: var(--text-secondary);
}

.match-card__comunes {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--text-accent);
  font-size: var(--fs-14);
}

.match-card__acciones {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

.match-menu {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
}

.match-menu__trigger {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.match-menu__trigger:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.match-menu .dropdown {
  min-width: 220px;
}

.match-menu .dropdown__link {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* --- Matches en línea ----------------------------------------------------- */
.match-onlines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.match-online {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.match-online__texto {
  min-width: 0;
}

.match-online__estado {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--state-success);
}

/* --- Intereses ------------------------------------------------------------ */
.interes-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.interes {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-13);
  color: var(--text-secondary);
}

/* El interés COMPARTIDO se marca: es la única medida de compatibilidad. */
.interes--comun {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-weight: var(--fw-bold);
}

.interes__icono {
  flex: none;
}

.interes-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.interes-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.interes-opcion__caja {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  cursor: pointer;
  font-size: var(--fs-14);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.interes-opcion input:checked + .interes-opcion__caja {
  background-image: var(--seccion-grad);
  border-color: var(--accent-deep);
  color: var(--text-on-primary);
}

.interes-opcion input:focus-visible + .interes-opcion__caja {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.interes-opcion--bloqueada .interes-opcion__caja {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Descubrir ------------------------------------------------------------ */
.discovery-mazo {
  position: relative;
}

.discovery {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background-image: var(--grad-surface);
  box-shadow: var(--sh-md);
  position: relative;
}

.discovery--entra {
  animation: hy-match-entra var(--dur-slow) var(--ease) both;
}

.discovery__escena {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
}

.discovery__keko .keko {
  filter: drop-shadow(0 14px 18px var(--shade-strong));
}

.discovery__giro {
  display: flex;
  gap: var(--s-2);
}

.discovery__giroBtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.discovery__giroBtn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.discovery__nombre {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-32);
}

.discovery__estado {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.discovery__bio {
  margin-top: var(--s-3);
  color: var(--text-secondary);
  font-size: var(--fs-17);
}

.discovery__datos {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

/* Botones grandes: en escritorio se decide con el ratón o con el teclado, y el
   gesto de deslizar del móvil es un extra, nunca la única forma. */
.discovery__acciones {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

.discovery__acciones .btn {
  flex: 1 1 180px;
  min-height: 54px;
}

.discovery-fin {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  border: 1px dashed var(--border);
  border-radius: var(--r-2xl);
  text-align: center;
}

/* --- Carril: números, likes, actividad, resumen --------------------------- */
.match-stats,
.match-recap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--s-3);
}

.match-stat,
.match-recap > div {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  text-align: center;
}

.match-stat b,
.match-recap b {
  display: block;
  font-size: var(--fs-26);
  color: var(--text-accent);
}

.match-stat span,
.match-recap span {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.match-likes {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-17);
}

.match-actividad {
  display: grid;
  gap: var(--s-3);
}

.match-actividad__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.match-actividad__texto {
  font-size: var(--fs-14);
}

/* --- Encontrarse en Hyris ------------------------------------------------- */
.match-encuentros {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

.match-encuentro {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.match-encuentro:hover {
  background: var(--surface-hover);
}

.match-encuentro--activo {
  border-color: var(--accent-deep);
  background: var(--accent-soft);
  color: var(--text-accent);
}

.field__hint--visible {
  color: var(--state-warning);
}

/* --- Estados -------------------------------------------------------------- */
.match-estado {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background-image: var(--grad-surface);
  text-align: center;
}

.match-estado__titulo {
  font-size: var(--fs-32);
}

.match-estado__faltan {
  display: grid;
  gap: var(--s-2);
  color: var(--text-accent);
  font-weight: var(--fw-bold);
}

.match-estado__accion {
  margin-top: var(--s-2);
}

/* --- Ajustes -------------------------------------------------------------- */
.switchrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-hairline);
}

.switchrow:last-child {
  border-bottom: 0;
}

.switchrow__label {
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.switch {
  flex: none;
  margin-left: auto;
  appearance: none;
  width: 52px;
  height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  position: relative;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.switch:checked {
  background-image: var(--seccion-grad);
  border-color: var(--accent-deep);
}

.switch:checked::after {
  transform: translateX(22px);
  background: var(--on-image);
}

.switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.match-guardar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.match-preview,
.match-privacidad {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* --- Bloque del inicio ---------------------------------------------------- */
.match-widget__titular {
  font-size: var(--fs-19);
  font-weight: var(--fw-black);
  color: var(--text-strong);
}

/* --- Avisos flotantes ----------------------------------------------------- */
.match-toasts {
  position: fixed;
  left: 50%;
  bottom: var(--s-8);
  transform: translateX(-50%);
  z-index: var(--z-float);
  display: grid;
  gap: var(--s-2);
  pointer-events: none;
}

.match-toast {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  box-shadow: var(--sh-lg);
  pointer-events: auto;
  animation: hy-match-entra var(--dur) var(--ease);
}

.match-toast--fuera {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.match-toast__accion {
  color: var(--text-accent);
  font-weight: var(--fw-black);
}

/* --- Responsive de Match -------------------------------------------------- */
@media (max-width: 1000px) {
  .match-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .match-hero__cifras {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
  }

  .discovery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* La escena baja al pie, como en el resto de cabeceras. */
  .match-hero {
    padding-right: var(--s-5);
    padding-bottom: 172px;
  }

  .match-hero__foto {
    inset: auto 0 0 0;
    top: auto;
    transform: none;
    width: 100%;
    height: 148px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 720px) {
  .match-hero,
  .match-wow,
  .match-estado {
    padding: var(--s-5);
  }

  /* …pero la cabecera sigue reservándole su franja a la escena. */
  .match-hero {
    padding-bottom: 172px;
  }

  .match-wow__kekos {
    gap: var(--s-4);
  }

  .match-wow__union {
    width: 46px;
    height: 46px;
    margin-bottom: var(--s-6);
  }

  .match-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .match-card__keko {
    display: flex;
    justify-content: center;
  }

  .match-subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .match-subnav__link {
    white-space: nowrap;
  }

  /* Todo lo que se pulsa con el dedo, cómodo de pulsar. */
  .discovery__acciones .btn,
  .match-encuentro,
  .interes-opcion__caja {
    min-height: 48px;
  }

  .match-toasts {
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-4);
    transform: none;
  }
}

/* ==========================================================================
   19. ESCENAS DE REFERENCIA  ·  fondos difuminados A COLOR
   --------------------------------------------------------------------------
   Capturas de holo que enseñan de qué va esto. Nunca compiten con el
   contenido: van difuminadas, con la saturación algo subida (el desenfoque se
   come el color) y SIEMPRE debajo de un velo del color de la sección, para que
   una foto naranja no rompa una página cian.

   No son fotos de la comunidad: no llevan pie, ni autor, ni enlace.
   ========================================================================== */

/* --- En la cabecera de una página ---------------------------------------- */
/* Se ve la escena, no una mancha. El desenfoque fuerte la convertía en un
   borrón de color y dejaba de contar nada. Cómo se dibuja cada captura al
   ampliarla lo decide el build: ver `--foto-render` más abajo. */
/* LA COMPOSICIÓN DE HABHUB: la captura llena la MITAD DERECHA de la tarjeta,
   a sangre hasta el borde, y su lado izquierdo se recorta en ARCO. El texto
   vive en la parte lisa de la izquierda, así que no hace falta ni desenfoque ni
   velo encima de la foto: se ve entera y nítida.

   TODOS LOS BANNERS MIDEN LO MISMO. Es la regla que manda: la web no puede
   cambiar de forma al pasar de una sección a otra.

   Durante un tiempo la banda se encogía al ancho real de la captura para no
   ampliarla nunca. Sonaba bien y en la práctica descuadraba la web: con una
   foto de 260 px, "Conoce al equipo" salía con una tira estrecha al lado de
   secciones con banda de 600. Ahora la banda mide siempre lo que dice el sitio
   y la captura se adapta; el editor dice, foto a foto, cuánto se está
   ampliando, para poder cambiarla por una más grande si se ve blanda. */
.hero__referencia,
.cat-hero__foto,
.match-hero__foto,
.perfil-foto,
.bienvenida__foto {
  position: absolute;
  inset: 0 0 0 auto;
  /* La foto NO se pinta aquí: se pinta en la capa de dentro. Así el zoom la
     agranda a ella sola —el arco se queda como está— y lo que se sale por los
     bordes se recorta aquí. */
  overflow: hidden;
  /* `--foto-escala` es lo que ella mueve en el editor: 1 es la medida de
     siempre, y por encima la banda se hace más horizontal. Es la MISMA para
     todos los banners. El último tope deja siempre sitio limpio para el texto,
     pase lo que pase con la escala. */
  /* EL ANCHO LO DEFINE LA TARJETA, no la banda. La tarjeta necesita la misma
     medida para reservarle el hueco al texto, así que la calcula ella una vez y
     la banda sólo la usa.
     Definirla aquí fue un error caro: esta regla vale para las cinco
     composiciones, así que su 52 % TAPABA el 40 % del panel de bienvenida —la
     variable se resuelve en el elemento donde se USA— y la foto se comía las
     fichas. El valor de reserva es para una banda sin tarjeta que la defina. */
  width: var(--banda-ancho, min(calc(52% * var(--foto-escala, 1)), calc(100% - 340px)));
  z-index: -2;
  /* El arco. Es un óvalo transparente apoyado en el borde izquierdo de la
     banda: lo que queda dentro no se pinta y deja ver la tarjeta, lo que queda
     fuera es la foto. La curva se abre hacia la derecha, como en HabHub. */
  -webkit-mask-image: radial-gradient(ellipse var(--arco-banda) 104% at 0% 50%, transparent 0 98%, var(--mascara-solida) 100%);
  mask-image: radial-gradient(ellipse var(--arco-banda) 104% at 0% 50%, transparent 0 98%, var(--mascara-solida) 100%);
}

/* LA CAPA DE LA FOTO. Va dentro de la banda y es la única que se mueve.
   · `cover` la encoge hasta llenar la banda: es el punto de partida, el zoom 1.
   · `--foto-zoom` la acerca. Crece alrededor del PUNTO ENCUADRADO —el mismo que
     dice `--foto-encuadre`—, así que ese punto se queda quieto y lo que sobra
     por los lados es justo lo que se puede mover con el cuadro del editor.
   · Nunca por debajo de 1: alejarse más de lo que cabe dejaría un hueco. */
.hero__referencia::before,
.cat-hero__foto::before,
.match-hero__foto::before,
.perfil-foto::before,
.bienvenida__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-src);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--foto-encuadre, center);
  transform: scale(var(--foto-zoom, 1));
  transform-origin: var(--foto-encuadre, center);
  /* CÓMO SE DIBUJA AL AMPLIARLA. Lo decide el build, foto a foto, midiendo la
     captura contra su hueco (`--foto-render`):
     · `pixelated` cuando se amplía — las capturas del holo son pixel art y el
       suavizado del navegador las convierte en pasta; repitiendo el píxel tal
       cual los bordes se quedan duros y se lee como un dibujo grande;
     · `auto` cuando se encoge — ahí repetir píxeles haría dientes de sierra.
     Ninguna de las dos inventa detalle: la única forma de tener más nitidez de
     verdad es una captura más grande, y el editor lo dice con su número. */
  image-rendering: var(--foto-render, auto);
}

/* TAMAÑO FIJO. Todos los banners de sección miden lo mismo —600×232— para que
   la web no cambie de forma al pasar de una sección a otra. Se salen de esta
   medida, a propósito, el inicio, el perfil y el catálogo: tienen su propia
   composición. Si una captura es más estrecha que 600 px, la banda se queda en
   lo que dé la captura: antes que ampliarla y estropearla, se hace más corta. */
.hero__referencia,
.match-hero__foto {
  top: 50%;
  bottom: auto;
  height: var(--banner-h);
  transform: translateY(-50%);
  width: var(--banda-ancho, var(--banner-w));
}

.hero--foto,
.match-hero {
  min-height: var(--banner-h);
}

/* El texto se queda en la mitad lisa: nunca se monta sobre la foto. Al ensanchar
   la imagen, el texto se estrecha lo mismo: si no, acabarían pisándose. */
.hero--foto,
.match-hero {
  /* La tarjeta necesita la misma cuenta que la banda para apartar el texto. */
  --banda-ancho: min(calc(var(--banner-w) * var(--foto-escala, 1)), calc(100% - 340px));
}

.hero--foto .hero__inner {
  max-width: min(620px, calc(100% - var(--banda-ancho) - var(--s-6)));
}

@media (max-width: 900px) {
  /* En móvil no hay mitad derecha que valga: la foto pasa a ser una franja al
     pie de la tarjeta, también a tamaño real y sin recorte en arco. */
  .hero--foto {
    padding-bottom: 0;
  }

  .hero--foto .hero__inner {
    max-width: none;
    order: 1;
  }

  .hero__referencia {
    position: relative;
    inset: auto;
    top: auto;
    transform: none;
    order: 2;
    width: calc(100% + 2 * var(--s-6));
    /* Ni aquí se amplía: la franja no pasa del ancho real de la captura. */
    height: 132px;
    margin: var(--s-6) calc(-1 * var(--s-6)) 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --- En la entrada (login y registro) ------------------------------------- */
/* Aquí la escena es la columna entera: el holo a color, a tamaño real, con la
   tarjeta de texto flotando encima. Es lo primero que se ve al llegar. */
.auth__referencia {
  position: absolute;
  inset: 0;
  /* La columna es grande y la captura, con `minimo: 900`, es más grande
     todavía: `cover` la encoge para llenarla. Nunca la amplía. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -2;
}

/* ==========================================================================
   20. AMIGOS CONECTADOS Y REFERIDOS (portada)
   ========================================================================== */

/* --- Amigos dentro del hotel --------------------------------------------- */
/* Rejilla de tamaño fijo: se ve ordenada tengas 2 amigos dentro o 40, porque
   a partir del máximo el resto se resume en "+N". */
.amigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-4);
}

.amigo {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  text-align: center;
}

.amigo__aro {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--seccion-borde);
  background: var(--surface-sunken);
  box-shadow: 0 0 0 5px var(--seccion-suave);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.amigo:hover .amigo__aro {
  transform: translateY(-2px);
  box-shadow: 0 0 0 7px var(--seccion-suave);
}

.amigo__aro .avatar {
  border: 0;
  background: transparent;
  width: 84px;
  height: 84px;
}

.amigo__aro .avatar img {
  width: 145%;
  height: 145%;
  object-position: center 50%;
}

.amigo__nombre {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--text);
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amigo--mas .amigo__aro {
  font-size: var(--fs-19);
  font-weight: var(--fw-black);
  color: var(--text-accent);
}

/* --- Accesos rápidos ------------------------------------------------------ */
.panel--accesos .panel__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  padding: var(--s-3);
}

.panel--accesos .linkrow {
  min-width: 0;
  min-height: 56px;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}

.panel--accesos .linkrow > span:nth-child(2) {
  min-width: 0;
}

.panel--accesos .linkrow + .linkrow {
  margin-top: 0;
}

.panel--accesos .linkrow__title {
  font-size: var(--fs-15);
}

.panel--accesos .linkrow__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-11);
}

.panel--accesos .linkrow__chevron {
  width: 24px;
  height: 24px;
}

/* --- Referidos ------------------------------------------------------------ */
.panel--referidos .panel__body {
  gap: var(--s-2);
  padding: var(--s-3);
}

.ref-objetivo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--seccion-borde);
  border-radius: var(--r-lg);
  background: var(--seccion-suave);
}

.ref-objetivo__titulo {
  margin-top: var(--s-1);
  color: var(--text-strong);
  font-size: var(--fs-17);
  line-height: var(--lh-snug);
}

.ref-objetivo__premio {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: var(--s-2);
  border-radius: var(--r-lg);
  background-image: var(--seccion-grad);
  color: var(--text-on-primary);
  text-align: center;
  box-shadow: var(--sh-btn);
}

.ref-objetivo__premio b {
  font-size: var(--fs-22);
  line-height: 1;
}

.ref-objetivo__premio small {
  overflow: hidden;
  max-width: 100%;
  margin-top: 2px;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-progreso {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.ref-progreso__barra {
  display: block;
  height: 100%;
  min-width: 0;
  background-image: var(--seccion-grad);
  transition: width var(--dur-slow) var(--ease);
}

.ref-enlace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}

.ref-enlace .input {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-12);
}

.panel--referidos [data-aviso-referido] {
  margin: 0;
  font-size: var(--fs-11);
}

.ref-reglas {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-13);
}

.ref-reglas summary {
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  cursor: pointer;
  font-weight: var(--fw-bold);
}

.ref-reglas > p,
.ref-reglas > ul,
.ref-reglas > .field__hint {
  margin-right: var(--s-4);
  margin-left: var(--s-4);
}

.ref-reglas > p {
  margin-top: 0;
}

.ref-reglas > ul {
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-4);
}

.ref-reglas > .field__hint {
  margin-bottom: var(--s-4);
}

@media (max-width: 720px) {
  .panel--accesos .panel__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ref-objetivo {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
  }
}

/* Vista previa del rare que se está añadiendo. Va sobre el MISMO fondo que el
   catálogo a propósito: si la imagen trae recuadro en vez de fondo
   transparente, aquí se ve antes de añadirla, no después. */
.rare__preview {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--surface-inset);
}

.rare__preview img {
  max-width: 120px;
  max-height: 120px;
  image-rendering: pixelated;
}

/* ==========================================================================
   MANUALES  ·  la sección Utilidades
   --------------------------------------------------------------------------
   Dos vistas: la PORTADA, con un libro por manual, y la LECTURA, que es el
   manual abierto.
   ========================================================================== */

/* --- La portada: un manual, una tarjeta ---------------------------------- */
.manuales-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--grid-gap);
}

.manual-tarjeta {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background-color: var(--surface);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.manual-tarjeta:hover,
.manual-tarjeta:focus-visible {
  border-color: var(--accent);
  background-color: var(--surface-hover);
  transform: translateY(-2px);
}

/* El libro va sobre su propio disco de color: sin él, un dibujo de píxeles
   sobre el panel oscuro pierde los contornos. */
.manual-tarjeta__libro {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  margin-bottom: var(--s-2);
  border-radius: var(--r-lg);
  background-color: var(--accent-soft);
}

.manual-tarjeta__nombre {
  font-family: var(--font-display, inherit);
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: 1.2;
}

.manual-tarjeta__n {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.utilidades__staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--s-6);
}

/* --- La lectura: el manual abierto --------------------------------------- */
/* EL TEXTO LLENA SU COLUMNA. Antes se cortaba a 68 caracteres dentro de un
   panel ancho y quedaba media página vacía a la derecha.
   Y la columna no es la página entera —760 px, con el grupo centrado—, porque
   una línea de mil píxeles se pierde al saltar de renglón. */
.manual-lectura {
  display: grid;
  grid-template-columns: 232px minmax(0, 760px);
  gap: var(--s-8);
  justify-content: center;
  padding-bottom: var(--s-10);
}

/* El índice se queda a la vista mientras se baja: en un manual de diez
   capítulos, saber dónde estás importa más que ganar dos centímetros. */
.manual-lectura__indice {
  position: sticky;
  top: var(--s-6);
  align-self: start;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.manual-lectura__volver {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-accent);
  text-decoration: none;
}

.manual-lectura__volver:hover {
  text-decoration: underline;
}

/* EL MANUAL VA SOBRE UNA HOJA OPACA. Sin ella, el texto se leía encima del
   fondo de la web —una captura del holo a todo color— y una normativa de diez
   capítulos sobre un dibujo no hay quien la lea. */
.manual-lectura__cuerpo {
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background-color: var(--surface);
}

.manual__portada {
  padding-bottom: var(--s-5);
  border-bottom: 2px solid var(--accent-soft);
}

.manual__titulo {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-40);
  line-height: 1.1;
}

.manual__resumen {
  margin-top: var(--s-3);
  font-size: var(--fs-18);
}

.manual__sumario-lista {
  margin: 0;
  padding-left: var(--s-5);
  color: var(--text-muted);
  font-size: var(--fs-13);
  line-height: 1.8;
}

.manual__sumario-lista a {
  color: inherit;
  text-decoration: none;
}

.manual__sumario-lista a:hover,
.manual__sumario-lista a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.manual-lectura__capitulos {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-7);
}

.manual-cap {
  scroll-margin-top: var(--s-6);
}

.manual-cap__n {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.manual-cap__titulo {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-26);
  line-height: 1.2;
}

/* El texto, a todo el ancho de la columna y con aire entre líneas: esto se lee
   seguido, no se ojea. */
.manual-cap__texto p {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-18);
  line-height: 1.75;
  color: var(--text-secondary);
}

.manual-cap__texto p:last-child {
  margin-bottom: 0;
}

.manual-cap__texto b {
  color: var(--text-strong);
}

@media (max-width: 900px) {
  .manual-lectura {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }

  /* Sin sitio al lado, el índice deja de ir pegado: se queda al principio, se
     lee una vez y se sigue hacia abajo. */
  .manual-lectura__indice {
    position: static;
  }
}

/* --- Tienda: el filtro encima y lo demás debajo --------------------------- */
/* El filtro de categorías vivía en la columna de la derecha. Al bajar esa
   columna debajo de los paquetes se habría quedado un filtro DEBAJO de la lista
   que filtra, así que sube a una fila encima de los paquetes: es lo que hace
   cualquier tienda y ocupa una línea en vez de un panel entero. */
.tienda__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.catchip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-13);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.catchip:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.catchip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Lo que se consulta, debajo y TODO DEL MISMO TAMAÑO: mismas columnas y misma
   altura de fila. Es lo que hace que la página se lea uniforme en vez de como
   una columna larga y estrecha pegada a un lado. */
.tienda__abajo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
  margin-top: var(--grid-gap);
}

.tienda__abajo > * {
  height: 100%;
}

/* Los iconos de Hyris son pixel art: se amplían con el borde duro, como las
   capturas del holo. Suavizados se vuelven pasta a cualquier tamaño por encima
   del suyo. */
.icono-hyris {
  image-rendering: pixelated;
  object-fit: contain;
}

/* Cerrar sesión es un BOTÓN, no un enlace (va por POST). Se ve exactamente
   igual que las demás entradas del desplegable: lo único que cambia es que el
   navegador no puede dispararlo desde fuera. */
button.dropdown__link {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ========================================================================
   PORTADA PERSONAL · tablero compacto
   ======================================================================== */
.home-tablero {
  display: grid;
  gap: var(--grid-gap);
}

.home-tablero .home-icon-frame {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 8px;
  background: var(--surface-inset);
}

.home-tablero .home-icon-frame .home-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.home-tablero__superior {
  display: grid;
  /* Las tres piezas no tienen el mismo peso: el perfil necesita poder leer
     sus acciones, la escena es la protagonista y la comunidad es un carril. */
  grid-template-columns: minmax(300px, 1.15fr) minmax(480px, 1.95fr) minmax(300px, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.home-tablero {
  --grid-gap: 14px;
}

.home-tablero__perfil {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--s-3);
  min-width: 0;
}

.home-perfil-resumen,
.home-metricas,
.home-escena {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.home-perfil-resumen {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
}

.home-perfil-resumen__keko {
  position: relative;
  isolation: isolate;
  width: 104px;
  height: 160px;
  justify-self: center;
}

.home-perfil-resumen__keko::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 8px;
  left: 50%;
  width: 73px;
  height: 57px;
  background: url("../assets/home/baldosa-perfil.png") center / contain no-repeat;
  image-rendering: pixelated;
  transform: translateX(-50%);
}

.home-perfil-resumen__keko .keko {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 50%;
  max-width: 104px;
  max-height: 148px;
  width: auto;
  height: auto;
  margin-bottom: 0;
  transform: translateX(-50%);
  filter: none;
}

.home-perfil-resumen__cuerpo {
  min-width: 0;
}

.home-perfil-resumen h1 {
  margin-top: var(--s-2);
  font-size: var(--fs-32);
  line-height: 1;
  overflow-wrap: anywhere;
}

.home-perfil-resumen__lema {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-13);
}

.home-perfil-resumen__lema i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--state-success);
  box-shadow: 0 0 0 3px var(--state-success-soft);
}

.home-perfil-resumen__lema span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-perfil-resumen__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: calc(-1 * var(--s-2)) 0 var(--s-3);
}

.home-chip,
.home-status {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-11) !important;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.home-chip--muted {
  font-weight: var(--fw-medium);
}

.home-status--live {
  border-color: rgba(58, 215, 134, .35);
  background: rgba(58, 215, 134, .12);
  color: #74e9aa !important;
}

.home-perfil-resumen .btn {
  max-width: 100%;
}

.home-metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.home-metricas__dato {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: var(--s-3) var(--s-1);
  text-align: center;
}

.home-metricas__dato + .home-metricas__dato {
  border-left: 1px solid var(--border-soft);
}

.home-metricas__dato > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  color: var(--text-accent);
}

.home-metricas__dato b {
  color: var(--text-strong);
  font-size: var(--fs-19);
  line-height: 1;
}

.home-metricas__dato small {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-muted);
  font-size: var(--fs-11);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-escena {
  position: relative;
  min-height: 396px;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-sunken);
}

.home-slider__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.home-slider__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--home-slide-image);
  background-position: var(--home-slide-position, center);
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.01);
  filter: saturate(1.08) contrast(1.03);
}

.home-slider__slide::after {
  content: "";
  position: absolute;
  inset: 20% 0 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(13, 8, 20, .96) 0%, rgba(13, 8, 20, .76) 58%, transparent 100%);
}

.home-slider__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.home-slider__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #f18bff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .9);
}

.home-slider__controles {
  position: absolute;
  z-index: 3;
  top: var(--s-3);
  right: var(--s-3);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(18, 11, 27, .72);
  backdrop-filter: blur(5px);
}

.home-slider__flecha,
.home-slider__punto {
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.home-slider__flecha {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
}

.home-slider__flecha:hover,
.home-slider__flecha:focus-visible {
  background: rgba(255, 255, 255, .14);
  outline: none;
}

.home-slider__puntos {
  display: flex;
  gap: 6px;
}

.home-slider__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transition: width 180ms ease, border-radius 180ms ease, background 180ms ease;
}

.home-slider__punto.is-active {
  width: 20px;
  border-radius: 5px;
  background: #d95bf4;
}

.home-slider__punto:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.home-escena__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.home-escena__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-src);
  background-position: var(--foto-encuadre, center);
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(var(--foto-zoom, 1));
  transform-origin: var(--foto-encuadre, center);
  image-rendering: var(--foto-render, auto);
}

.home-escena::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--velo-auth) 0%, var(--velo-auth-medio) 58%, transparent 100%);
}

.home-escena__copy {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  left: var(--s-5);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  z-index: 2;
}

.home-escena__copy > div {
  min-width: 0;
}

.home-escena__copy h2 {
  color: var(--on-image);
  font-size: var(--fs-26);
  line-height: 1.1;
  text-shadow: 0 2px 8px var(--shade-strong);
  overflow-wrap: anywhere;
}

.home-escena__copy p {
  margin-top: var(--s-1);
  color: var(--sobre-foto-suave);
  font-size: var(--fs-14);
}

.home-escena__copy .btn {
  flex: none;
}

.home-tablero__lateral {
  display: grid;
  /* La foto necesita más espacio que una noticia. Antes ambas filas medían lo
     mismo y la foto podía asomarse fuera de su tarjeta. */
  grid-template-rows: minmax(128px, 1fr) minmax(256px, 2fr);
  gap: var(--s-3);
  min-width: 0;
}

.home-comunidad {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.home-comunidad .panelbar,
.home-modulo .panelbar {
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
}

.home-comunidad .panelbar__title,
.home-modulo .panelbar__title {
  font-size: var(--fs-16);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-comunidad .panelbar__aside,
.home-modulo .panelbar__aside {
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-noticia-destacada {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  color: inherit;
  text-decoration: none;
}

.home-noticia-destacada > span,
.home-noticia-destacada > span > span {
  min-width: 0;
}

.home-noticia-destacada > span:only-child {
  grid-column: 1 / -1;
}

.home-noticia-destacada:hover b,
.home-lista-noticias__fila:hover,
.home-eventos__fila:hover b,
.home-actividad__fila:hover b {
  color: var(--text-accent);
}

.home-noticia-destacada__imagen {
  display: block;
  align-self: stretch;
  min-height: 62px;
  border-radius: var(--r-sm);
  background-color: var(--surface-sunken);
  background-position: center;
  background-size: cover;
}

.home-noticia-destacada b,
.home-noticia-destacada small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.home-noticia-destacada b {
  -webkit-line-clamp: 2;
  color: var(--text-strong);
  font-size: var(--fs-15);
  line-height: 1.2;
}

.home-noticia-destacada small {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--fs-12);
  line-height: 1.3;
  -webkit-line-clamp: 2;
}

.home-foto-destacada {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 146px;
  margin: var(--s-2);
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--surface-sunken);
  color: inherit;
  text-decoration: none;
}

.home-foto-destacada__imagen {
  min-height: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home-foto-destacada__autor {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  overflow: hidden;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
}

.home-foto-destacada__autor .avatar {
  width: 30px;
  height: 30px;
}

.home-foto-destacada__autor > span:last-child {
  min-width: 0;
}

.home-foto-destacada__autor b,
.home-foto-destacada__autor small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-foto-destacada__autor small {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--fw-medium);
}

.home-vacio {
  display: grid;
  place-items: center;
  min-height: 90px;
  padding: var(--s-4);
  color: var(--text-muted);
  font-size: var(--fs-13);
  text-align: center;
}

.home-tablero__modulos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(148px, auto);
  gap: var(--grid-gap);
}

.home-modulo {
  min-width: 0;
  height: 100%;
}

.home-lista-noticias,
.home-eventos,
.home-actividad {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
}

.home-lista-noticias__fila,
.home-eventos__fila,
.home-actividad__fila {
  display: grid;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  padding: 5px;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}

.home-lista-noticias__fila:hover,
.home-eventos__fila:hover,
.home-actividad__fila:hover {
  background: var(--surface-sunken);
}

.home-lista-noticias__fila {
  grid-template-columns: 56px minmax(0, 1fr);
}

.home-lista-noticias__imagen {
  min-height: 40px;
  border-radius: var(--r-sm);
  background-color: var(--surface-sunken);
  background-position: center;
  background-size: cover;
}

.home-lista-noticias__imagen--vacia {
  display: grid;
  place-items: center;
  color: var(--text-accent);
}

.home-lista-noticias__fila > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-strong);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-eventos__fila {
  grid-template-columns: 36px minmax(0, 1fr);
}

.home-actividad__fila {
  /* El avatar pequeño mide 40 px. En una columna de 28 se montaba sobre la
     fecha de debajo; la fecha necesita su propia línea y su propio inicio. */
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
}

.home-eventos__icono {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--text-accent);
}

.home-eventos__fila b,
.home-eventos__fila small,
.home-actividad__fila b,
.home-actividad__fila small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-eventos__fila b,
.home-actividad__fila b {
  color: var(--text-strong);
  font-size: var(--fs-13);
}

.home-eventos__fila small,
.home-actividad__fila small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-11);
}

.home-tablero__mas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--s-3);
}

/* Una misma fila para amigos/accesos y otra para salas/referidos. */
@media (min-width: 981px) {
  .home-tablero__mas > .stack {
    display: contents;
  }

  .home-tablero__mas > div > :first-child { grid-area: 1 / 1; }
  .home-tablero__mas > aside > :first-child { grid-area: 1 / 2; }
  .home-tablero__mas > div > :nth-child(2) { grid-area: 2 / 1; }
  .home-tablero__mas > aside > :nth-child(2) { grid-area: 2 / 2; }
}

.home-tablero .ref-objetivo__premio {
  flex-shrink: 0;
  min-width: 74px;
}

.home-tablero .ref-objetivo__premio small {
  max-width: none;
  overflow: visible;
  font-size: 10px;
  text-overflow: clip;
}

.home-tablero .panel--accesos .linkrow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  min-height: 74px;
}

.home-tablero .panel--accesos .linkrow > span:nth-child(2) {
  display: contents;
}

.home-tablero .panel--accesos .home-icon-frame {
  width: 32px;
  height: 32px;
}

.home-tablero .panel--accesos .home-icon {
  width: 28px;
  height: 28px;
}

.home-tablero .panel--accesos .linkrow__sub {
  grid-column: 1 / -1;
}

.home-tablero .panel--accesos .linkrow__chevron {
  display: none;
}

.home-tablero .card__meta {
  flex-wrap: wrap;
}

.home-tablero .card__meta .dim {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .home-tablero__superior {
    grid-template-columns: 240px minmax(350px, 1fr) 280px;
  }

  .home-perfil-resumen {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-escena__copy {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .home-tablero__superior {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .home-tablero__lateral {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .home-comunidad {
    min-height: 170px;
  }

  .home-tablero__modulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tablero__mas {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .home-tablero__superior,
  .home-tablero__lateral,
  .home-tablero__modulos {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tablero__perfil,
  .home-tablero__lateral {
    grid-column: auto;
  }

  .home-perfil-resumen {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-4);
  }

  .home-perfil-resumen .btn {
    white-space: normal;
    text-align: center;
  }

  .home-perfil-resumen .btn .home-icon { flex: none; }

  .home-comunidad .panelbar__title,
  .home-modulo .panelbar__title {
    white-space: normal;
    line-height: 1.25;
  }

  .home-escena {
    min-height: 300px;
  }

  .home-escena__copy {
    align-items: flex-start;
    flex-direction: column;
    right: var(--s-4);
    bottom: var(--s-4);
    left: var(--s-4);
  }

  .home-slider__controles {
    top: 10px;
    right: 10px;
  }

  .home-escena__copy h2 {
    max-width: 15ch;
    font-size: var(--fs-22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-slider__slide,
  .home-slider__punto {
    transition: none;
  }
}

/* ==========================================================================
   17. MENÚ PRINCIPAL · cinco puertas y todo a la vista (24/09/2026)
   ==========================================================================

   El árbol de nueve entradas no cabía y el menú entero vivía en la hamburguesa
   hasta en pantallas grandes. Ahora son cinco puertas (config/hyris-menu.php)
   con desplegables anchos: icono, nombre y una línea que dice qué hay dentro.
   Comunidad reparte sus siete enlaces en tres columnas con título.

   En escritorio con ratón se abren también al pasar por encima: el clic sigue
   funcionando igual (teclado, táctil). En la hamburguesa NO hay segundo nivel
   plegado: cada puerta es un título y sus enlaces van debajo, a la vista.
   ========================================================================== */
.menu__link[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--text-strong);
}

.dropdown--menu {
  min-width: 280px;
  padding: var(--s-2);
  grid-template-columns: repeat(var(--menu-columnas, 1), minmax(232px, 1fr));
  gap: 2px var(--s-2);
}

.dropdown--menu[data-open="true"] {
  display: grid;
}

/* Puente invisible sobre el hueco de 10 px entre el botón y el panel: sin él,
   al bajar el ratón el panel se cerraba antes de llegar. */
.dropdown--menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

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

/* Sin grupos, los enlaces van directos a la rejilla (dos columnas desde
   cuatro enlaces). */
.dropdown--menu:not(.dropdown--grupos) .dropdown__grupo {
  display: contents;
}

.dropdown--grupos .dropdown__grupo + .dropdown__grupo {
  padding-left: var(--s-2);
  border-left: 1px solid var(--border-hairline);
}

.dropdown__titulo {
  display: block;
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--fs-11);
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dropdown--menu .dropdown__link {
  padding: var(--s-2) var(--s-3);
}

.dropdown__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dropdown__etiqueta {
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: 1.25;
}

.dropdown--menu .dropdown__desc {
  margin-top: 2px;
  line-height: 1.3;
}

.dropdown__link:hover .pixel-icon {
  border-color: var(--border-strong);
}

.dropdown__link[aria-current="page"] {
  background: var(--accent-soft);
}

.dropdown__link[aria-current="page"] .dropdown__etiqueta {
  color: var(--text-accent);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .topnav:not([data-compacto="true"]) .menu__item[data-dropdown]:hover > .dropdown--menu {
    display: grid;
    animation: hy-drop var(--dur) var(--ease);
  }

  .topnav:not([data-compacto="true"]) .menu__item[data-dropdown]:hover > .menu__link {
    background: var(--accent-soft);
    color: var(--text-strong);
  }

  .topnav:not([data-compacto="true"]) .menu__item[data-dropdown]:hover > .menu__link .menu__caret {
    transform: rotate(180deg);
  }
}

/* Los iconos del menú y de la portada son iconos CLÁSICOS de Habbo, de la
   colección que eligió Leo. Cada uno trae su medida natural (15-44 px): van
   a su tamaño, sin estirar, y sólo se reducen si no caben en su hueco. */
.icono-habbo {
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  image-rendering: auto;
}

.pixel-icon--sm .icono-habbo {
  max-width: 24px;
  max-height: 24px;
}

/* --- Menú del avatar: quién eres, y el panel de staff si te toca ---------- */
.dropdown__cabecera {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-3) var(--s-3);
  margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--border-hairline);
}

.dropdown__cabecera strong {
  font-size: var(--fs-15);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `button.dropdown__link` hereda la letra con `font: inherit` y se quedaba
   más fina que los enlaces de encima. */
button.dropdown__link--salir {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.dropdown__link--salir:hover {
  background: color-mix(in srgb, var(--state-error) 14%, transparent);
}

/* Con cinco puertas sobra sitio: las puertas respiran y el nombre vuelve
   junto al avatar. (El menú de nueve iba con 0 de hueco y 5 px de relleno
   para caber a duras penas.) */
@media (min-width: 1321px) {
  .menu {
    gap: 2px;
  }

  .menu__link {
    padding: 0 11px;
  }
}

@media (min-width: 1280px) {
  .usermenu__name {
    display: inline;
    max-width: 110px;
  }
}

/* --- La hamburguesa en móvil: todo desplegado ---------------------------- */
@media (max-width: 1099px) {
  .topnav__nav .menu__item[data-dropdown] {
    margin-top: var(--s-1);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border-hairline);
  }

  /* La puerta pasa a ser el título de su sección. */
  .topnav__nav .menu__item[data-dropdown] > .menu__link {
    justify-content: flex-start;
    height: auto;
    padding: var(--s-1) var(--s-3);
    font-size: var(--fs-12);
    font-weight: var(--fw-black);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    pointer-events: none;
  }

  .topnav__nav .menu__item[data-dropdown] > .menu__link .menu__caret {
    display: none;
  }

  .topnav__nav .menu .dropdown--menu {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px var(--s-2);
    min-width: 0;
    padding: 0 0 var(--s-2);
    border: 0;
    box-shadow: none;
    background: transparent;
    animation: none;
  }

  .topnav__nav .dropdown--menu::before,
  .topnav__nav .dropdown__titulo {
    display: none;
  }

  .topnav__nav .dropdown__grupo {
    display: contents;
  }

  /* La cabecera es `sticky`: si el panel abierto mide más que la pantalla,
     lo de abajo no se alcanzaría nunca. Así la propia barra se desplaza. */
  .topnav__bar:has(.topnav__nav[data-open="true"]) {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ==========================================================================
   18. PORTADA · VENTANAS DEL JUEGO (25/09/2026)
   ==========================================================================

   Leo pidió la portada «más Habbo, sin perder esta estructura», y eligió que
   cada caja parezca una ventana del cliente de Hyris. Los valores salen del
   propio cliente (src/common/card/NitroCardView.scss, tema primario):

     · borde negro de 1 px y esquinas de 4-6 px;
     · barra de título morada en DOS TONOS (#9215bc arriba, #8112a6 abajo),
       con una línea de luz #b227e0 y el canto inferior #4a1960;
     · título blanco en negrita, centrado, con la letra del juego (Ubuntu);
     · botones del juego: dos tonos con línea de luz y borde oscuro.

   El cuerpo de las ventanas se queda oscuro: es la esencia de la web y lo que
   Leo no quería perder. Todo va acotado a `.home-tablero`; el resto de
   páginas no cambia. Los botones `.btn-habbo` sí son reutilizables.
   ========================================================================== */
@font-face {
  font-family: "Hyris Ubuntu";
  src: url("../fonts/ubuntu-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hyris Ubuntu";
  src: url("../fonts/ubuntu-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Botones del juego ---------------------------------------------------- */
.btn-habbo {
  --boton-arriba: #dbe4ec;
  --boton-abajo: #c8d2dc;
  --boton-luz: #ffffff;
  --boton-borde: #6f8196;
  --boton-texto: #0f172a;
  --boton-sombra-texto: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--boton-borde);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--boton-arriba) 0 50%, var(--boton-abajo) 50% 100%);
  box-shadow: inset 0 1px 0 var(--boton-luz), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.35);
  color: var(--boton-texto);
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: var(--boton-sombra-texto);
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn-habbo:hover {
  color: var(--boton-texto);
  filter: brightness(1.08);
}

.btn-habbo:active {
  transform: translateY(1px);
  filter: brightness(0.92);
  box-shadow: inset 0 1px 0 var(--boton-luz), 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.btn-habbo:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.btn-habbo .home-icon {
  width: auto;
  height: auto;
  max-width: 20px;
  max-height: 20px;
}

.btn-habbo--verde {
  --boton-arriba: #4cbb3c;
  --boton-abajo: #3ba42d;
  --boton-luz: #86e076;
  --boton-borde: #1d5a16;
  --boton-texto: #ffffff;
  --boton-sombra-texto: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.btn-habbo--morado {
  --boton-arriba: #9215bc;
  --boton-abajo: #8112a6;
  --boton-luz: #b227e0;
  --boton-borde: #4a1960;
  --boton-texto: #ffffff;
  --boton-sombra-texto: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.btn-habbo--grande {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 17px;
  letter-spacing: 0.2px;
}

/* --- La ventana ----------------------------------------------------------- */
/* El marco va EN SINTONÍA CON LA BARRA DE ARRIBA (25/09, pedido de Leo): el
   borde negro y la sombra dura de la primera versión destacaban más que el
   menú. Ahora el marco es el de la barra —borde suave, esquinas de 16 px,
   fondo translúcido con desenfoque— y lo «Habbo» lo pone la barra de título. */
.home-tablero {
  --win-borde: var(--border);
  --win-cuerpo: var(--surface-nav);
  --win-hundido: var(--surface-sunken);
  --win-canto: transparent;
  --win-barra-arriba: #9215bc;
  --win-barra-abajo: #8112a6;
  --win-barra-luz: #b227e0;
  --win-barra-canto: #4a1960;
  --win-barra-h: 34px;
  --win-radio: var(--r-lg);
  --win-hueco: inset 0 0 0 1px var(--border-soft);
}

.home-tablero .panel,
.home-tablero .home-perfil-resumen,
.home-tablero .home-metricas,
.home-tablero .home-escena {
  border: 1px solid var(--win-borde);
  border-radius: var(--win-radio);
  background: var(--win-cuerpo);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-sm);
}

/* La barra de título, la de las ventanas del cliente. */
.home-tablero .panelbar,
.home-tablero .panelhead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--win-barra-h);
  margin: 0;
  padding: 4px 8px;
  border-bottom: 1px solid var(--win-barra-canto);
  border-radius: calc(var(--win-radio) - 1px) calc(var(--win-radio) - 1px) 0 0;
  background: linear-gradient(180deg, var(--win-barra-arriba) 0 50%, var(--win-barra-abajo) 50% 100%);
  box-shadow: inset 0 1px 0 var(--win-barra-luz), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  filter: none;
  color: #ffffff;
}

/* Segundo tono (fotos, Match): el mismo dibujo en magenta. */
.home-tablero .panelbar--magenta {
  --win-barra-arriba: #b3179c;
  --win-barra-abajo: #9c1388;
  --win-barra-luz: #d93fc2;
  --win-barra-canto: #5a0f4f;
}

.home-tablero .panelbar__text,
.home-tablero .panelhead > div {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.home-tablero .panelbar__title,
.home-tablero .panelhead__title {
  overflow: hidden;
  color: #ffffff;
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* En una barra de título no cabe un subtítulo: el juego no los lleva. */
.home-tablero .panelbar__sub,
.home-tablero .panelhead__sub {
  display: none;
}

.home-tablero .panelbar .home-icon-frame,
.home-tablero .panelhead .home-icon-frame {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
}

.home-tablero .panelbar .home-icon-frame .home-icon,
.home-tablero .panelhead .home-icon-frame .home-icon {
  width: auto;
  height: auto;
  max-width: 22px;
  max-height: 22px;
}

.home-tablero .panelbar__aside {
  flex: none;
  max-width: 45%;
  margin-left: 0;
  overflow: hidden;
}

/* «Ver todas» pasa a ser un botón pequeño del juego. */
.home-tablero .panelbar__aside a {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #6f8196;
  border-radius: 3px;
  background: linear-gradient(180deg, #dbe4ec 0 50%, #c8d2dc 50% 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(0, 0, 0, 0.45);
  color: #0f172a;
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
}

.home-tablero .panelbar__aside a:hover {
  filter: brightness(1.06);
}

/* Lo que no es un enlace (en directo, N activos) va como etiqueta hundida. */
.home-tablero .panelbar__aside > span {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Los iconos de dentro, en cajita hundida como en el juego. */
.home-tablero .home-icon-frame {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: var(--win-hundido);
  box-shadow: var(--win-hueco);
}

.home-tablero .home-icon-frame .home-icon {
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
}

/* Los iconos grandes (cifras, noticias sin foto, eventos) a su medida. */
.home-tablero .home-icon--grande {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 36px;
}

/* --- Perfil: keko, placas y el botón de entrar ---------------------------- */
.home-tablero .home-perfil-resumen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.home-perfil-resumen__contenido {
  display: grid;
  flex: 1;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-2);
}

.home-placas {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 var(--s-3);
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--win-hundido);
  box-shadow: var(--win-hueco);
}

.home-placas__hueco {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  max-width: 46px;
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.home-placas__hueco img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

.home-placas__hueco--vacio {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 4px, transparent 4px 8px);
}

.home-placas__hueco.is-rota::after {
  content: "?";
  color: var(--text-dim);
  font-weight: var(--fw-black);
}

.home-placas__nota {
  padding: 8px;
  color: var(--text-muted);
  font-size: var(--fs-12);
}

.home-perfil-resumen__acciones {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3);
}

.home-perfil-resumen__acciones .btn-habbo {
  flex: 1 1 auto;
  min-height: 46px;
}

.home-perfil-resumen__acciones .btn-habbo--grande {
  flex: 3 1 auto;
}

/* El texto no puede ensanchar la ventana: la misión larga se corta con
   puntos suspensivos también cuando el perfil va en una sola columna. */
.home-perfil-resumen__contenido > * {
  max-width: 100%;
  min-width: 0;
}

/* --- Las cifras, como el monedero del juego ------------------------------ */
.home-tablero .home-metricas {
  gap: 6px;
  padding: 6px;
}

.home-tablero .home-metricas__dato {
  border-radius: var(--r-md);
  background: var(--win-hundido);
  box-shadow: var(--win-hueco);
}

.home-tablero .home-metricas__dato + .home-metricas__dato {
  border-left: 0;
}

.home-tablero .home-metricas__dato > span {
  width: 44px;
  height: 36px;
}

.home-tablero .home-metricas__dato .home-icon {
  width: auto;
  height: auto;
  max-width: 44px;
  max-height: 34px;
}

.home-tablero .home-metricas__dato b {
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-weight: 700;
}

/* --- El carrusel, dentro de su ventana ---------------------------------- */
.home-tablero .home-escena > .panelbar {
  z-index: 4;
}

.home-tablero .home-slider__slide {
  top: var(--win-barra-h);
}

/* El título deja sitio a los controles, que viven a su derecha. */
.home-tablero .home-escena > .panelbar {
  padding-right: 118px;
}

/* Los controles se suben a la barra de título, a la derecha. */
.home-tablero .home-slider__controles {
  top: 5px;
  right: 8px;
  z-index: 5;
  gap: 6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
}

.home-tablero .home-slider__flecha {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* El botón del anuncio, verde como los de «comprar» del catálogo. */
.home-tablero .home-escena__copy .btn--primary {
  height: 44px;
  border: 1px solid #1d5a16;
  border-radius: 6px;
  background: linear-gradient(180deg, #4cbb3c 0 50%, #3ba42d 50% 100%);
  box-shadow: inset 0 1px 0 #86e076, 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.home-tablero .home-escena__copy .btn--primary:hover {
  background: linear-gradient(180deg, #4cbb3c 0 50%, #3ba42d 50% 100%);
  filter: brightness(1.08);
}

/* --- La barra de amigos, como la de abajo del juego ---------------------- */
.home-amigos__fila {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.home-amigos__amigo {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 5px;
  width: 72px;
  color: inherit;
  text-decoration: none;
}

.home-amigos__hueco {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--win-hundido);
  box-shadow: var(--win-hueco), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-family: "Hyris Ubuntu", Ubuntu, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

/* Todos los de la barra están dentro: el punto verde lo dice sin texto. */
.home-amigos__amigo:not(.home-amigos__amigo--mas) .home-amigos__hueco::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border: 1px solid #0b2a10;
  border-radius: 50%;
  background: #4ade80;
}

.home-amigos__hueco {
  border-radius: var(--r-md);
}

/* El avatar trae su propio aro (fondo oscuro y borde redondo): dentro del
   hueco se veía un círculo negro. Aquí el marco es el hueco. */
.home-amigos__hueco .avatar {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-amigos__amigo:hover .home-amigos__hueco {
  box-shadow: var(--win-hueco), inset 0 0 0 2px var(--win-barra-luz);
}

.home-amigos__nombre {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-amigos__amigo:hover .home-amigos__nombre {
  color: var(--text-accent);
}

.home-amigos__vacio {
  padding: 16px;
  color: var(--text-muted);
  font-size: var(--fs-13);
  text-align: center;
}

/* LA PARTE DE ABAJO, COMPACTA. Sin el panel de amigos, las salas quedaban
   con un hueco debajo mientras la columna de la derecha (accesos + referidos)
   seguía y seguía. Ahora: salas y accesos en la misma fila y a la misma
   altura, y los referidos debajo a lo ancho, repartidos en tres columnas. */
@media (min-width: 981px) {
  .home-tablero__mas {
    align-items: stretch;
  }

  .home-tablero__mas > aside > :nth-child(2) {
    grid-area: 2 / 1 / 3 / 3;
  }

  .home-tablero .panel--accesos {
    display: flex;
    flex-direction: column;
  }

  .home-tablero .panel--accesos .panel__body {
    flex: 1;
    grid-auto-rows: 1fr;
  }

  /* Al estirarse, el contenido de cada acceso va centrado en su caja. */
  .home-tablero .panel--accesos .linkrow {
    align-content: center;
  }

  .home-tablero .panel--referidos [data-referidos] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
      "objetivo enlace reglas"
      "progreso aviso reglas";
    align-items: start;
    gap: var(--s-2) var(--s-5);
  }

  .home-tablero .panel--referidos [data-referidos] > * {
    margin: 0;
  }

  .home-tablero .panel--referidos .ref-objetivo { grid-area: objetivo; }
  .home-tablero .panel--referidos .ref-progreso { grid-area: progreso; align-self: center; }
  .home-tablero .panel--referidos .ref-enlace { grid-area: enlace; }
  .home-tablero .panel--referidos [data-aviso-referido] { grid-area: aviso; }
  .home-tablero .panel--referidos .ref-reglas { grid-area: reglas; }
}

/* LA BARRA DE ARRIBA, ALINEADA CON LAS CAJAS (25/09, pedido de Leo). La
   barra medía 1440 px y el contenido 1392 (`.shell` resta su margen por
   dentro): en pantallas anchas el menú sobresalía 24 px por cada lado. Ahora
   los bordes de la barra y los de las cajas caen en la misma línea. */
.topnav__bar {
  max-width: calc(var(--shell-max) - 2 * var(--shell-gutter));
}

@media (max-width: 1180px) {
  .home-perfil-resumen__contenido {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .home-perfil-resumen__contenido .home-perfil-resumen__lema,
  .home-perfil-resumen__contenido .home-perfil-resumen__meta {
    justify-content: center;
  }

  .home-perfil-resumen__acciones {
    flex-wrap: wrap;
  }

  .home-perfil-resumen__cuerpo {
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  .home-perfil-resumen__contenido {
    grid-template-columns: 104px minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }

  .home-perfil-resumen__contenido .home-perfil-resumen__lema,
  .home-perfil-resumen__contenido .home-perfil-resumen__meta {
    justify-content: flex-start;
  }

  .home-tablero .home-slider__controles {
    top: 5px;
    right: 8px;
  }

  /* La barra de título se come 34 px de la foto: se le devuelven. */
  .home-tablero .home-escena {
    min-height: 334px;
  }

  .home-tablero .panelbar__title,
  .home-tablero .panelhead__title {
    white-space: nowrap;
  }
}

/* ==========================================================================
   19. TIENDA — paquetes con dinero real (clubs y Hyrions), 25/09/2026
   Las tarjetas son «huecos» dentro de la ventana, como la barra de amigos:
   borde fino, fondo hundido y el morado del juego sólo para el destacado.
   ========================================================================== */
.tienda-aviso {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-nav);
  font-weight: 600;
}
.tienda-grupo__sub {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-13);
  opacity: .8;
}
.tienda-rejilla {
  display: grid;
  gap: var(--s-4) var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tienda-rejilla--clubs,
.tienda-rejilla--hyrions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .tienda-rejilla--clubs { grid-template-columns: 1fr; }
  .tienda-rejilla--hyrions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tienda-paquete {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-3);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.tienda-paquete--destacado {
  border-color: #b227e0;
  box-shadow: inset 0 0 0 1px rgba(178, 39, 224, .35), 0 0 0 1px rgba(178, 39, 224, .2);
}
.tienda-paquete__cinta {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(#9215bc 50%, #8112a6 50%);
  box-shadow: 0 0 0 1px #4a1960;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.tienda-paquete__icono {
  height: 60px;
  display: grid;
  place-items: center;
}
.tienda-paquete__icono img {
  width: auto;
  max-height: 56px;
  image-rendering: pixelated;
}
.tienda-paquete__icono--clubs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.tienda-paquete__nombre {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}
.tienda-paquete__incluye {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: var(--fs-13);
}
.tienda-paquete__incluye li::before {
  content: "\2713\00a0";
  color: #3fbf4c;
  font-weight: 700;
}
.tienda-paquete__desc {
  margin: 0;
  font-size: 12px;
  opacity: .75;
}
.tienda-paquete__precio {
  margin-top: auto;
  font-family: "Hyris Ubuntu", inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
}
.tienda-paquete__comprar {
  width: 100%;
  display: grid;
  gap: var(--s-2);
  justify-items: center;
}
.tienda-paquete__form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.tienda-paquete__form .btn-habbo {
  flex: 1 1 90px;
}
.tienda-pasos {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--s-2);
}
.tienda-pasos li span {
  display: block;
  font-size: var(--fs-13);
}
.pedido-fase--entregado {
  border-color: #3fbf4c;
}
.pedido-fase--revision {
  border-color: #e0a327;
}
.club-estado .btn-habbo {
  justify-self: start;
}