/* css/estilo.css */
/* ---------- Fuentes ----------

   Alojadas aquí y no en Google. Antes eran siete archivos de peso fijo pedidos
   a dos servidores externos —dos resoluciones de nombre y dos apretones de
   manos antes de poder pintar nada—, 290 KB de latín. Ahora son dos fuentes
   variables que cubren todos los pesos de una vez: 81 KB, del mismo dominio.

   El unicode-range hace que el latin-ext solo se descargue si aparece un
   carácter que lo necesite. En español no aparece nunca. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(/fuentes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(/fuentes/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fuentes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fuentes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * White Island — base del sitio.
 *
 * Todo lo que se repite vive aquí arriba como variable: colores, escala de
 * texto, espacios, radios, sombras y tiempos. Si un número aparece dos veces en
 * el resto del archivo, es que le falta su variable.
 */

:root {
  /* ---- Color ---- */
  --fondo: #000000;
  --fondo-2: #0a0a0a;
  --superficie: #101010;
  --superficie-2: #171717;
  --borde: #262626;
  --borde-vivo: #3a3a3a;

  --texto: #f2f2f2;
  --tenue: #a6a6a6;
  --apagado: #767676;

  --arena: #f0b968;
  --arena-viva: #ffd08a;
  --arena-honda: #2a1a05;
  /* Sin azul desde el 16-10-2026: el acento es siempre la arena (Dani). */
  /* Verde de "esto va bien". Lo usan la franja de conexión recuperada y la
     chapa de "estás al día" del perfil. */
  --bien: #62c48c;
  --bien-hondo: #0e2418;
  --alarma: #e2725c;

  /* ---- Texto: una sola escala, fluida ---- */
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-md: .9375rem;
  --t-base: 1rem;
  --t-lg: 1.0625rem;
  --t-xl: clamp(1.15rem, .4vw + 1.05rem, 1.3rem);
  --t-2xl: clamp(1.35rem, 1vw + 1.1rem, 1.7rem);
  --t-3xl: clamp(1.8rem, 2.2vw + 1.2rem, 2.6rem);
  --t-4xl: clamp(2.2rem, 3.6vw + 1.2rem, 3.4rem);
  --t-heroe: clamp(3rem, 9vw + .5rem, 6.5rem);

  /* ---- Espacio: múltiplos de 4 ---- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 22px;
  --e6: 30px;
  --e7: 40px;
  --e8: 56px;
  --e9: 76px;
  --seccion-y: clamp(64px, 9vw, 120px);

  /* ---- Forma ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-redondo: 999px;
  --maxima: 1180px;
  --cabecera: 61px;
  /* El margen de los textos en el móvil, el mismo en todas las páginas. */
  --lado-movil: 28px;

  /* ---- Profundidad ---- */
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .055);
  --s1: 0 1px 2px rgba(0, 0, 0, .3);
  --s2: 0 10px 26px -14px rgba(0, 0, 0, .75);
  --s3: 0 26px 60px -26px rgba(0, 0, 0, .9);
  --s-arena: 0 12px 30px -12px rgba(240, 185, 104, .5);
  /* Anillos: el mismo grosor para todo lo que se señala, cambiando solo el
     color. Antes había tres grosores distintos para la misma idea. */
  --anillo: 0 0 0 3px;
  --anillo-arena: var(--anillo) rgba(240, 185, 104, .28);
  --anillo-alarma: var(--anillo) rgba(226, 114, 92, .28);

  /* ---- Letra ---- */
  /* La de los titulares. Dos reglas la pedian por `var(--titular)` sin que
     existiera, y `var()` de algo sin definir no avisa: deja la propiedad sin
     valor y la letra se hereda. Salian en Inter. */
  --titular: Archivo, Inter, system-ui, sans-serif;

  /* ---- Movimiento ---- */
  --rapido: 130ms;
  --medio: 260ms;
  --lento: 520ms;
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
  /* Exponencial de salida: arranca rápido y se posa muy despacio. Es la
     que hace que algo parezca que llega en vez de que termina. */
  --curva-entrada: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Sin esto, un display: grid o flex propio le gana al atributo hidden. */
[hidden] { display: none !important; }
/* La pregunta de la plaza o la del Early Access: js/comun.js, PREGUNTAS_POR_PLAZAS. */
html[data-plazas="sin"] [data-con-plazas],
html:not([data-plazas="sin"]) [data-sin-plazas] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-lg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--titular);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

p { text-wrap: pretty; }
a { color: inherit; }

::selection { background: rgba(240, 185, 104, .3); color: var(--texto); }

/* Un solo anillo de foco para todo el sitio: sin él no se sabe por dónde se va
   navegando con el teclado. */
:focus-visible {
  outline: 2px solid var(--arena);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Barras de desplazamiento discretas en los paneles que se mueven por dentro. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-vivo) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-redondo);
  background: var(--borde-vivo);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background: #4a4a4a; background-clip: content-box; }

.contenedor {
  width: 100%;
  max-width: var(--maxima);
  margin: 0 auto;
  padding: 0 var(--e5);
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Primer tabulador de cada página. Solo aparece cuando recibe el foco. */
.salto {
  position: fixed;
  top: var(--e2);
  left: var(--e2);
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--arena);
  color: var(--arena-honda);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--medio) var(--curva);
}

.salto:focus { transform: none; }

body.sin-scroll { overflow: hidden; }

/* ---------- Botones ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-redondo);
  font: 600 var(--t-base)/1 Inter, system-ui, sans-serif;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva),
    background var(--medio) var(--curva),
    border-color var(--medio) var(--curva),
    opacity var(--rapido) linear;
}

/* El botón baja al pulsarlo. Es el detalle que más hace que algo se sienta
   pulsable de verdad y no dibujado. */
.boton:active { transform: translateY(1px) scale(.985); transition-duration: 60ms; }

.boton--principal {
  background: linear-gradient(165deg, var(--arena-viva), var(--arena) 65%, #e5a94f);
  color: var(--arena-honda);
  font-weight: 700;
  box-shadow: var(--s-arena), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.boton--principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(240, 185, 104, .68), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.boton--principal:active { box-shadow: 0 6px 16px -8px rgba(240, 185, 104, .6); }

.boton--fantasma {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .16);
  color: var(--texto);
  backdrop-filter: blur(10px);
}

.boton--fantasma:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
}

.boton--peligro {
  background: rgba(226, 114, 92, .1);
  border-color: rgba(226, 114, 92, .45);
  color: #f6b7a6;
}

.boton--peligro:hover {
  transform: translateY(-2px);
  background: rgba(226, 114, 92, .18);
  border-color: var(--alarma);
  color: #ffd9cf;
}

.boton--ancho { width: 100%; }

.boton[disabled] {
  opacity: .5;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--e4) 0;
  border-bottom: 1px solid transparent;
  transition:
    background var(--medio) var(--curva-suave),
    padding var(--medio) var(--curva-suave),
    border-color var(--medio) var(--curva-suave);
}

/* Al bajar se opaca: sobre el cielo del amanecer el menú no se leía. */
.cabecera.pegada {
  padding: var(--e3) 0;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .07);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e5);
  /* Fuera del notch y de las esquinas redondeadas: con `viewport-fit=cover` la
     pagina llega al borde de verdad, y en horizontal el logotipo se metia
     debajo de la muesca. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

/* El menú empuja las acciones al extremo derecho. */
.menu { margin-left: auto; }

.menu__boton {
  display: none;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: rgba(16, 16, 16, .85);
  cursor: pointer;
  transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}

.menu__boton:hover { border-color: var(--borde-vivo); background: var(--superficie-2); }

.menu__boton span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform var(--medio) var(--curva), opacity var(--rapido) linear;
}

.menu__boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu__boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu__boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.marca {
  display: flex;
  align-items: center;
  /* El texto mide veintidós píxeles de alto y en un móvil eso se falla al
     pulsar. El área de toque llega al mínimo sin mover nada de sitio. */
  min-height: 44px;
  gap: var(--e3);
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-decoration: none;
}

.marca__icono { flex: none; transition: transform var(--lento) var(--curva); }
.marca:hover .marca__icono { transform: rotate(-8deg) scale(1.1); }

.menu {
  display: flex;
  align-items: center;
  gap: var(--e6);
}

.menu a:not(.boton):not(.usuario) {
  position: relative;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--tenue);
  text-decoration: none;
  transition: color var(--medio) var(--curva);
}

/* Subrayado que crece desde el centro, en vez del subrayado de siempre. */
.menu a:not(.boton):not(.usuario)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--arena);
  transform: translateX(-50%);
  transition: width var(--medio) var(--curva);
}

.menu a:hover:not(.boton):not(.usuario),
.menu a[aria-current="page"]:not(.boton):not(.usuario) { color: var(--texto); }

.menu a:hover:not(.boton):not(.usuario)::after,
.menu a[aria-current="page"]:not(.boton):not(.usuario)::after { width: 100%; }

.menu .boton { padding: 12px 24px; font-size: var(--t-md); }

/* En móvil el menú pasa a ser un desplegable. Antes se escondían los enlaces
   sin más, y desde el teléfono no había forma de llegar a las secciones. */
@media (max-width: 720px) {
  .menu__boton { display: grid; }

  /* Aquí empuja esto y no `.menu`: el menú se sale de la fila para ser el
     desplegable, y con él se iba el `margin-left: auto` que pegaba el botón al
     borde. Sin esto se quedaba a mitad de la cabecera. */
  .cabecera__acciones { margin-left: auto; }

  .menu {
    position: fixed;
    inset: var(--cabecera) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--e2) var(--e5) var(--e5);
    background: rgba(0, 0, 0, .97);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--s3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--medio) var(--curva),
      transform var(--medio) var(--curva),
      visibility var(--medio) step-end;
  }

  .menu.abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-timing-function: var(--curva), var(--curva), step-start;
  }

  .menu a:not(.boton):not(.usuario) {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--borde);
    font-size: var(--t-lg);
    color: var(--texto);
  }

  .menu a:not(.boton):not(.usuario)::after { display: none; }
  .menu a:not(.boton):not(.usuario):last-child { border-bottom: 0; }
}

/* Sobre el cierre de la portada, en el móvil, la cabecera es solo el logotipo:
   centrado, sin fondo y sin botones, que el de registrarse ya está en la
   sección (Dani, 9-10-2026). En lo demás, como siempre. La clase la pone
   js/portada.js mientras el cierre llena la pantalla. */
@media (max-width: 860px) {
  .cabecera.cabecera--solo-logo,
  .cabecera.pegada.cabecera--solo-logo {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
  }
  .cabecera--solo-logo .cabecera__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .cabecera--solo-logo .cabecera__fila > .marca { grid-column: 2; }
  .cabecera--solo-logo .cabecera__acciones { grid-column: 3; visibility: hidden; }
}

@media (max-width: 520px) {
  .marca { font-size: 1rem; gap: var(--e2); }
  .marca__icono { width: 22px; height: 22px; }
  .cabecera__acciones { gap: var(--e2); }
  .cabecera__acciones .boton { padding: 11px 16px; font-size: var(--t-sm); }
}

@media (max-width: 420px) {
  .cabecera__acciones .boton { padding: 11px 13px; font-size: var(--t-xs); }
}

@media (max-width: 380px) {
  .marca__texto { display: none; }
}

/* ---------- Quién eres, en la cabecera ---------- */

.usuario {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 5px var(--e3) 5px 5px;
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: rgba(16, 16, 16, .8);
  text-decoration: none;
  transition:
    border-color var(--medio) var(--curva),
    background var(--medio) var(--curva),
    transform var(--rapido) var(--curva);
}

.usuario:hover { transform: translateY(-1px); border-color: var(--arena); background: var(--superficie-2); }

.usuario__foto {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-2);
  color: var(--arena);
  font-size: var(--t-xs);
  font-weight: 700;
}

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

.usuario__nombre {
  max-width: 12ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--t-md);
  font-weight: 600;
}

.usuario--fundador { border-color: rgba(240, 185, 104, .42); }
.usuario--fundador .usuario__foto { box-shadow: 0 0 0 2px var(--arena); }

@media (max-width: 520px) {
  /* 44 px de lado: es el mínimo para que un dedo acierte sin pelearse. */
  .usuario { padding: 5px; }
  .usuario__foto { width: 34px; height: 34px; }
  .usuario__nombre { display: none; }
}

/* ---------- Héroe ---------- */

.heroe {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
}

.heroe__fondo {
  position: absolute;
  inset: -6% 0 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.etiqueta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(240, 185, 104, .3);
  border-radius: var(--r-redondo);
  background: rgba(240, 185, 104, .09);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--arena-viva);
}

.etiqueta::before {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arena);
}

/* El anillo es un pseudoelemento aparte que crece y se desvanece.
   Antes era un box-shadow animado, y animar una sombra obliga al navegador a
   repintar en cada fotograma, para siempre y en tres sitios distintos a la vez.
   Escala y opacidad las resuelve el compositor sin repintar nada. */
.etiqueta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--arena);
  opacity: .7;
  animation: latido 2.6s infinite;
  pointer-events: none;
}

@keyframes latido {
  from { transform: scale(1); opacity: .7; }
  70%, to { transform: scale(3.6); opacity: 0; }
}

/* ---------- Secciones ---------- */

/* Páginas que empiezan directamente con una sección: sin esto el primer título
   queda pegado a la cabecera fija. */
.pagina { padding-top: var(--cabecera); }

.seccion { position: relative; padding: var(--seccion-y) 0; }

.seccion--oscura {
  background: var(--fondo-2);
  border-block: 1px solid rgba(255, 255, 255, .04);
}

.rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arena);
}

.seccion h1,
.seccion h2 { max-width: 17ch; font-size: var(--t-3xl); }

.seccion__entrada {
  margin: var(--e4) 0 0;
  max-width: 58ch;
  font-size: var(--t-base);
  color: var(--tenue);
}

.cabeza-seccion { margin-bottom: var(--e8); }

/* ---------- Rejilla de características ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--e4);
}

/* Tres columnas fijas en escritorio: con cuatro, la tarjeta ancha dejaba media
   fila vacía. Con tres, las cinco tarjetas cuadran exactas. */
@media (min-width: 940px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--s1);
  transition:
    transform var(--medio) var(--curva),
    border-color var(--medio) var(--curva),
    box-shadow var(--medio) var(--curva);
}

.tarjeta:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 185, 104, .42);
  box-shadow: var(--s3);
}

.tarjeta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva), filter var(--lento) var(--curva);
}

.tarjeta:hover img { transform: scale(1.06); filter: saturate(1.08); }

.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .94) 100%);
}

.tarjeta__cuerpo { padding: var(--e6); }
.tarjeta h3 { margin-bottom: var(--e2); font-size: var(--t-xl); }
.tarjeta p { margin: 0; font-size: var(--t-md); color: #d4d4d4; }

.tarjeta--ancha { grid-column: span 2; }
@media (max-width: 700px) { .tarjeta--ancha { grid-column: auto; } }

/* ---------- Galería ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e3);
}

.galeria figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.galeria figure:hover { border-color: var(--borde-vivo); transform: translateY(-3px); }

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.galeria figure:hover img { transform: scale(1.07); }

.galeria figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--e7) var(--e4) var(--e3);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .93));
  font-size: var(--t-md);
  font-weight: 600;
}

.galeria .grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 900px) {
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria .grande { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Clips verticales ---------- */

.clips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--e5);
}

.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--s2);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.clip:hover { transform: translateY(-5px); box-shadow: var(--s3); }
.clip video { width: 100%; height: 100%; object-fit: cover; }

.clip__pie {
  position: absolute;
  inset: auto 0 0;
  padding: var(--e8) var(--e4) var(--e4);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
  pointer-events: none;
}

.clip__pie strong { display: block; font-size: var(--t-base); }
.clip__pie span { font-size: var(--t-sm); color: #c9c9c9; }

/* ---------- Pie ---------- */

.pie {
  padding: var(--e8) 0;
  border-top: 1px solid var(--borde);
  font-size: var(--t-md);
  color: var(--tenue);
}

.pie nav { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }

/* Los enlaces del pie medían veinticinco píxeles de alto. Son enlaces sueltos
   en una navegación, no palabras dentro de una frase: en un móvil hay que poder
   acertarlos. */
.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
  transition: color var(--medio) var(--curva);
}
.pie a:hover { color: var(--texto); }

/* ---------- Entrada al hacer scroll ---------- */

/* ---------- Lo que aparece al llegar ---------- */

/*
 * Se esconde SOLO si hay JavaScript para volver a enseñarlo. `con-revelado` lo
 * pone una línea en la cabecera de cada página, antes de que se pinte nada.
 * Antes se escondía desde aquí sin más y una página con el script caído se
 * quedaba en blanco; había hasta una red de dos segundos para taparlo.
 *
 * Cada pieza entra con su retraso, que sale de `--paso`: lo pone el JavaScript
 * contando en orden dentro de la sección. Y la curva es una exponencial de
 * salida --arranca rápido y se posa-- porque con una lineal o una cúbica lo
 * que se ve es que algo "termina"; con esta, que llega.
 */

.con-revelado .revelar {
  opacity: 0;
  transform: translate3d(0, var(--sube, 22px), 0) scale(var(--escala, 1));
  filter: blur(var(--velo, 0px));
  transition:
    opacity var(--entra, 820ms) var(--curva-entrada) var(--espera),
    transform var(--entra, 820ms) var(--curva-entrada) var(--espera),
    filter var(--entra, 820ms) var(--curva-entrada) var(--espera);
  will-change: opacity, transform;
}

.con-revelado .revelar.visible {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* El retraso, de una sola pieza. Se tapa a los ocho para que una galería de
   diez fotos no tarde un segundo y medio en acabar de entrar. */
.con-revelado .revelar { --espera: calc(min(var(--paso, 0), 8) * 95ms); }

/* Y según lo que sea, entra distinto. Un titular sube poco y sale de un velo;
   una tarjeta sube más y crece un pelo, que es lo que la hace parecer que se
   acerca; una foto casi solo aparece, porque moverla se nota como un tirón. */
.con-revelado .cabeza-seccion .revelar { --sube: 14px; --velo: 5px; --entra: 760ms; }
.con-revelado .cartel.revelar,
.con-revelado .tarjeta.revelar { --sube: 30px; --escala: .975; --entra: 900ms; }
.con-revelado .galeria figure.revelar { --sube: 12px; --escala: .985; --entra: 820ms; }
.con-revelado .pregunta.revelar { --sube: 10px; --entra: 620ms; }

@media (prefers-reduced-motion: reduce) {
  .con-revelado .revelar {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- Quien no quiera movimiento, que no lo tenga ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* El lema se apaga con el viaje del logotipo, y aqui el logotipo no viaja:
     sale ya en la cabecera, y el titulo de la portada no se veia nunca. */
  /* Con la seccion delante: la regla normal va mas abajo en el archivo y, con
     el mismo peso, ganaba ella. */
  .heroe--grande .heroe__lema { opacity: 1; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .aparece { opacity: 1; transform: none; }
  /* Los tres fondos del paralaje, quietos. */
  .heroe__fondo,
  .jrs__fondo,
  .cierre__fondo { transform: none !important; }
}

/* ---------- Página que no existe ---------- */

/* Sin cabecera ni pie, por decisión del dueño: el aviso es la pantalla entera. */
.perdido {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

.perdido__caja {
  max-width: 34rem;
  text-align: center;
}

/* El titular de sección tiene tope de ancho: sin esto se queda a la izquierda. */
.perdido__caja h1 { margin-inline: auto; }

/* El número grande es decorativo: hace de ilustración para no meter una imagen
   que habría que cargar solo para un error. */
.perdido__numero {
  font-size: clamp(4.5rem, 22vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(180deg, var(--borde-vivo), transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: var(--e3);
}

.perdido__texto {
  color: var(--tenue);
  margin-top: var(--e3);
}

.perdido__salidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
  margin-top: var(--e6);
}


/* Para quien escucha la página en vez de verla. No es display:none: eso lo
   quitaría también del lector de pantalla, que es justo a quien va dirigido. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mientras algo está en marcha, el botón lo dice sin cambiar de tamaño. */
.boton--ocupado { opacity: .65; cursor: progress; }


/* ---------- Franja de estado de la conexión ---------- */

.franja-conexion {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  padding: var(--e2) var(--e4);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  transform: translateY(-100%);
  transition: transform var(--medio) var(--curva);
}

.franja-conexion--visible { transform: none; }
.franja-conexion--mala { background: var(--alarma); color: #2a0f0a; }
.franja-conexion--buena { background: var(--bien); color: var(--bien-hondo); }
.franja-conexion--aviso { background: var(--arena); color: var(--arena-honda); }

/* ==========================================================================
   LA PORTADA
   Rehecha el 25 de septiembre de 2026 con el orden que pidió el dueño:
   portada, actualizaciones, capturas, comunidad, preguntas y el cierre con el
   registro. Y con sus imágenes, que son ilustraciones y no capturas del juego:
   por eso todo lo de aquí es más oscuro y más contrastado que el resto.
   ========================================================================== */

/* ---------- Cuánto llevas leído ---------- */

.progreso {
  position: fixed; inset: 0 auto auto 0; z-index: 60;
  width: 100%; height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--arena-viva), var(--arena));
}

/* ---------- La cabecera: solo la marca y entrar ---------- */

.cabecera--limpia { background: transparent; border-bottom-color: transparent; }

/* Al bajar se pone opaca. Sobre una foto a pantalla completa, una cabecera con
   fondo desde el primer píxel parte la imagen en dos. */
.cabecera--limpia.posada {
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--borde);
}

.marca__logo {
  display: block; width: auto; height: 58px;
  transition: height var(--lento) var(--curva);
}
.cabecera--limpia.posada .marca__logo { height: 42px; }

/* La cabecera quieta (Dani, 28-9-2026): del mismo alto arriba y al bajar, y con
   el logotipo dentro. Medía 91 píxeles con la página reservando 61, así que el
   logotipo asomaba por debajo, y al bajar encogía. Diez de aire, cuarenta y
   ocho de logotipo y el borde: 69, que es lo que se reserva arriba. La /3 no la
   lleva: es la portada tal como era. */
.cabecera.cabecera--quieta,
.cabecera.cabecera--quieta.pegada,
.cabecera.cabecera--quieta.posada { padding: 10px 0; }

.cabecera--quieta .marca__logo,
.cabecera--quieta.posada .marca__logo { height: 48px; }

/* Opaca desde arriba: la página empieza justo debajo, no detrás. La de la
   portada sigue transparente sobre su foto hasta que se baja. */
.cabecera--quieta:not(.cabecera--limpia) {
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .07);
}

:root:has(.cabecera--quieta:not(.cabecera--limpia)) { --cabecera: 69px; }

/* Una cabecera que se pega a los dos bordes. En una portada a pantalla
   completa, una cabecera centrada con el ancho del texto deja dos huecos
   enormes a los lados y parece que se ha encogido. Desde el 28-9-2026 la
   llevan todas las páginas: el logotipo a la izquierda y el menú a la derecha. */
.contenedor--ancho {
  max-width: none;
  padding-left: clamp(var(--e4), 3vw, var(--e8));
  padding-right: clamp(var(--e4), 3vw, var(--e8));
}

/* ---------- El héroe ---------- */

.heroe--grande {
  position: relative;
  min-height: 88svh;
  /* Abajo y no en el centro: el texto tiene que caer sobre la zona que el velo
     oscurece, y el centro es justo donde la ilustración manda. */
  display: grid; align-items: end; justify-items: center;
  text-align: center;
  overflow: hidden;
}

/* La imagen de la portada viene YA SIN LOGOTIPO, así que se usa entera y el
   logotipo lo pone la página encima, donde toca. */
.heroe--grande .heroe__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* LA IMAGEN NO SE OSCURECE. Lo de arriba y el medio van limpios --es lo primero
   que ve alguien y era justo lo que estaba apagado-- y el velo solo aparece en
   la franja de abajo, que es donde van el titular y la flecha y donde hay que
   empalmar con la sección siguiente, que es negra. */
.heroe__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.16) 0%,
      transparent 12%,
      transparent 56%,
      rgba(0,0,0,.30) 72%,
      rgba(0,0,0,.74) 88%,
      #000 100%);
}

/*
 * LA PORTADA: el logotipo en el centro, y abajo el lema con la flecha.
 *
 * `--logo-grande` es lo que mide el logotipo centrado, y lo lee
 * js/marca-viajera.js para la escala. Vive aquí y no allí porque depende del
 * ancho de la ventana, y eso es cosa de la hoja de estilos.
 */
.heroe--grande {
  --logo-grande: min(31vw, 430px);
  /* Lo que ocupan la flecha y su hueco, que es sobre lo que se apoya el lema. */
  --flecha-hueco: calc(clamp(22px, 4vh, 44px) + 34px);
}

/* El lema, apoyado en el borde de abajo y justo encima de la flecha: las dos
   dicen lo mismo --esto es, y aquí se sigue-- y juntas son el pie de la
   portada. Pequeño y con la letra suelta: es una firma, no un titular. El
   titular es el logotipo. */
.heroe__lema {
  position: absolute;
  left: 50%;
  bottom: calc(var(--flecha-hueco) + clamp(16px, 2.4vh, 30px));
  z-index: 3;
  width: min(92vw, 40rem);
  margin: 0;
  transform: translateX(-50%);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(.72rem, .55vw + .45rem, .95rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  text-indent: .3em;              /* compensa el hueco que deja el último tracking */
  color: rgb(255 255 255 / .92);
  /* Dos sombras: una pegada que separa la letra del fondo y otra ancha que
     apaga lo que hay detras. Con una sola, sobre el agua clara no se lee. */
  text-shadow: 0 1px 3px rgb(0 0 0 / .85), 0 2px 26px rgb(0 0 0 / .95);
  /* Se va con el logotipo: son la misma pieza. */
  opacity: var(--marca-viaja, 1);
}

.heroe__lema b { font-weight: 800; color: #fff; }

.boton--grande { padding: 15px 26px; font-size: var(--t-base); }

.heroe__flecha {
  position: absolute; left: 50%; bottom: clamp(22px, 4vh, 44px);
  width: 34px; height: 34px;
  /* El area de toque, a 44: el dibujo se queda en 34. Un dedo no acierta en
     menos, y esta es la unica salida de la portada. */
  box-sizing: content-box;
  padding: 5px;
  margin: -5px;
  margin-left: -17px;
  display: grid; place-items: center;
  opacity: .55;
  animation: respira 2.4s ease-in-out infinite;
}
.heroe__flecha span {
  width: 11px; height: 11px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
@keyframes respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ---------- Actualizaciones ---------- */

.seccion__pie { margin-top: var(--e7); text-align: center; }




/* ---------- Tarjetas de sección, en fila ---------- */

.fila-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: var(--e4);
  margin-top: var(--e7);
}

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 330px;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.tarjeta img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva);
}
/* El velo va en su propia capa y no encima de la imagen: así la imagen puede
   acercarse al pasar por encima sin que el degradado se estire con ella. */
.tarjeta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.92) 100%);
}
.tarjeta:hover img { transform: scale(1.06); }
.tarjeta:hover { border-color: var(--borde-vivo); }

.tarjeta__texto { margin-top: auto; padding: var(--e5); }
.tarjeta__texto h3 { margin: 0 0 var(--e2); font-size: var(--t-2xl); }
.tarjeta__texto p { margin: 0; font-size: var(--t-md); line-height: 1.6; color: #cfcfcf; }

/* ---------- Preguntas ---------- */

.preguntas { max-width: 800px; margin: var(--e7) auto 0; }

.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta:first-child { border-top: 1px solid var(--borde); }

.pregunta__titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) var(--e3);
  font-weight: 700; font-size: var(--t-lg);
  cursor: pointer; list-style: none;
  transition: color .18s ease, background .18s ease;
}
.pregunta__titulo::-webkit-details-marker { display: none; }

/* Abierta cambia de color y se le enciende una barra a la izquierda. Cerrada
   no se distingue de las demás, y con ocho seguidas hay que poder saber cuál
   está abierta sin ponerse a leerlas. */
.pregunta[open] { background: rgba(255, 255, 255, .025); }
.pregunta[open] .pregunta__titulo { color: var(--arena-viva); }
.pregunta__titulo:hover { color: var(--arena); background: rgba(255, 255, 255, .02); }

.pregunta__titulo::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.pregunta[open] .pregunta__titulo::after { transform: rotate(-135deg) translate(-2px, -2px); }

.pregunta__cuerpo {
  margin: 0 0 0 var(--e3);
  padding: 0 var(--e3) var(--e5) var(--e4);
  font-size: var(--t-md); line-height: 1.75; color: var(--tenue);
  max-width: 70ch;
  border-left: 2px solid var(--arena);
}
/* Un párrafo por bloque, y los requisitos con un salto por línea (js/portada.js). */
.pregunta__cuerpo p { margin: 0; }
.pregunta__cuerpo p + p { margin-top: var(--e3); }

/* ---------- El cierre ---------- */

.cierre {
  position: relative;
  display: grid; place-items: center;
  min-height: 78svh;
  padding: var(--seccion-y) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cierre__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Muy oscurecida a propósito: aquí lo que tiene que leerse es el botón, no la
   foto. La foto solo pone el sitio. */
.cierre::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 30%, rgba(0,0,0,.82) 70%, #000 100%);
}
.cierre__interior { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e5); }
.cierre__interior h2 { margin: 0; font-size: var(--t-3xl); max-width: 18ch; }
.cierre__interior p { margin: 0; max-width: 46ch; font-size: var(--t-lg); line-height: 1.65; color: var(--tenue); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; }

@media (max-width: 640px) {
  .pregunta__titulo { font-size: var(--t-base); padding: var(--e4) var(--e2); }
  .tarjeta { min-height: 250px; }

  /* El pie, sin tanto negro debajo (Dani, 8-10-2026): al final de la página
     no necesita aire, necesita acabar. */
  .pie { padding: var(--e6) 0 calc(var(--e5) + env(safe-area-inset-bottom)); }
  .pie .contenedor--ancho { padding-inline: var(--lado-movil); }
  .pie .pie__legal { text-align: justify; text-align-last: center; hyphens: auto; }

  /* El mismo aire a los dos lados en todas las páginas (Dani, 7-10-2026). La
     cabecera y el pie llevan el suyo, el de --ancho. */
  .contenedor:not(.contenedor--ancho) { padding-inline: var(--lado-movil); }

  /*
   * Los párrafos, iguales en todas las páginas (Dani, 7-10-2026): a 14 píxeles
   * desde el 9-10 (eran 15), y justificados. Donde el texto va centrado, la
   * última línea también; donde va a un lado, a su lado. :is() se queda con la
   * especificidad de su selector más fuerte, así que esto gana a lo de cada
   * página sin depender del orden en que se cargan las hojas.
   */
  main :is(.golpe__texto, .seccion__entrada, .plaza__entrada, .recuadro__entrada,
           .legal__entrada, .noticias__entrada, .diario__resumen, .caratula__detalle, .pregunta__cuerpo,
           .legal .contenedor > p, .cierre--fotos .cierre__interior > p:not(.cierre__dato), .primeros p) {
    font-size: 14px;
    line-height: 1.65;
    text-align: justify;
    hyphens: auto;
  }

  main :is(.golpe__texto, .plaza__entrada, .plena .cabeza-seccion .seccion__entrada,
           .cierre__interior > p) {
    text-align-last: center;
  }

  /* Los renglones que reparte js/renglones.js para que los huecos salgan
     parejos: cada uno justificado solo y entero, el último como el párrafo, y
     el guion de la palabra partida puesto aquí y no en el texto. */
  .renglon { display: block; white-space: nowrap; text-align: justify; text-align-last: justify; }
  .renglon--ultimo,
  .renglon--suelto { text-align-last: inherit; }
  .renglon--corta::after { content: "-"; }

  /*
   * La letra del móvil, por tipos y no por página (Dani, 16-10-2026: «debería
   * ser algo como títulos, párrafos, subtítulos... y cada texto estar en uno y
   * ser del mismo tamaño en todos»). Siete tipos y un tamaño cada uno; lo que
   * cada página pone se queda para el ordenador. `!important` porque la regla
   * es esa: aquí no manda la hoja de cada página. Fuera quedan solo las cifras
   * de adorno (el precio, el 404, el carnet, el número de la semana: la lista de
   * los :not) y la barra de abajo de la app, que son dibujo y no texto.
   */
  main :is(h1, .titulo-pagina):not(.oculto-visual, .heroe__lema) { font-size: var(--l-titulo) !important; line-height: 1.12 !important; }
  /* Las pantallas del principio de la portada son una serie: todas con el título de la primera (h2). */
  main :is(h2, .golpe__idea) { font-size: var(--l-seccion) !important; line-height: 1.18 !important; }
  main :is(h3, h4, h5, h6, .sitio__nombre):not(.golpe__idea, .ranking__nombre) { font-size: var(--l-subtitulo) !important; line-height: 1.28 !important; }

  main :is(p, li, dd, dt, td, th, blockquote, label, summary, .ventajas strong, .ventajas span, input, textarea, select,
           .sitio__linea, .carta__frase, .mensajes__aldia span):not(:is(.boton, button, .pestana, .rotulo, .chip, .etiqueta, .marquita, [class*="insignia"], .letra-pequena, .pie, .pie *, 
           small, [class*="__meta"], [class*="__fecha"], [class*="__cuando"], [class*="__pista"], [class*="__que"], .campo__aviso,
           .casilla__nota, .tramo__luego, .tramo__nombre, .barra-compra__pista, .logro__cuenta, [class*="__chip"],
           .requisitos__nivel, .sala__titulo, .sitio__antes, .perdido__numero, .cerrojo__icono, .sala__candado-grande, .logros__rango, .barra-compra__euros, .carnet, .tramo__ahora, .diario__semana, .golpes__sigue, .golpe__sello, :is(.perdido__numero, .cerrojo__icono, .sala__candado-grande, .logros__rango, .barra-compra__euros, .carnet, .tramo__ahora, .diario__semana, .golpes__sigue, .golpe__sello) *, .ranking__rejilla *)) {
    font-size: var(--l-texto) !important;
  }
  /* Lo que va dentro de un texto lleva su letra: una negrita o un enlace no cambian de tamaño. */
  main :is(p, li, dd, dt, td, th, blockquote, label, figcaption) :is(span, strong, b, em, i, a, small, s, time, mark, code):not(:is(.rotulo, .chip, .etiqueta, .marquita, [class*="insignia"], [class*="cuenta"], .boton, small,
           [class*="__meta"], [class*="__fecha"], [class*="__cuando"], [class*="__pista"], [class*="__que"],
           :is(button, .boton, .pestana, [role="tab"]) *, :is(.perdido__numero, .cerrojo__icono, .sala__candado-grande, .logros__rango, .barra-compra__euros, .carnet, .tramo__ahora, .diario__semana, .golpes__sigue, .golpe__sello) *, .ranking__rejilla *)) {
    font-size: inherit !important;
  }

  main :is(.letra-pequena, small, figcaption, .campo__aviso, .casilla__nota, [class*="__meta"], [class*="__fecha"],
           [class*="__cuando"], [class*="__pista"], [class*="__que"], .sala__que, .tramo__luego, .tramo__nombre,
           .barra-compra__pista, .logro__cuenta),
  .pie :is(p, a, li, span):not(.renglon) {
    font-size: var(--l-pequena) !important;
  }

  main :is(.rotulo, .chip, .etiqueta, .marquita, [class*="insignia"], [class*="__chip"], .requisitos__nivel, .sala__titulo,
           .sitio__antes) {
    font-size: var(--l-rotulo) !important;
  }

  :is(main, .cabecera, .barra-compra) :is(.boton, button:not(.historia__play):not(.plaza__girar):not(.reacciones__opcion), .pestana, [role="tab"],
                                         .diario__todas, .diario__leer) {
    font-size: var(--l-boton) !important;
  }

}

/* Los siete tipos de letra del móvil. */
:root {
  --l-titulo: 30px;      /* el título de la página (h1) */
  --l-seccion: 24px;     /* el de cada sección (h2) */
  --l-subtitulo: 18px;   /* el de cada tarjeta o apartado (h3, h4) */
  --l-texto: 14px;       /* los párrafos, las listas y los formularios */
  --l-pequena: 12px;     /* notas, fechas, pies de foto y avisos */
  --l-rotulo: 12px;      /* lo que va en mayúsculas encima de un título, y las chapas */
  --l-boton: 15px;       /* botones y pestañas */
}

@media (prefers-reduced-motion: reduce) {
  .heroe__flecha { animation: none; }
  .tarjeta img { transition: none; }
}


/* css/paginas.css */
/**
 * White Island — páginas internas.
 *
 * Va detrás de estilo.css y usa sus variables. Aquí no debería aparecer ningún
 * color ni ningún tamaño de texto escrito a mano.
 *
 * Partido por temas (29-10-2026) para leer solo lo que toca: cada trozo es un
 * css/paginas-*.css y van en el orden de abajo, que es el de la cascada (uno
 * de detrás pisa a uno de delante: no se reordena sin mirarlo). En local
 * llegan por @import; al publicar, despliegue/juntar.mjs mete cada trozo aquí,
 * en su sitio, y la web baja un solo archivo, como antes. Una regla nueva va
 * al trozo de su tema; un trozo nuevo, aquí, con su línea.
 */

/* ---------- Formularios (registro, entrada, perfil, panel) ---------- */

.acceso {
  display: grid;
  grid-template-columns: minmax(0, 33rem) 1fr;
  min-height: 100svh;
}

.acceso__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--cabecera) + var(--e8)) clamp(var(--e5), 6vw, var(--e9)) var(--e8);
  background: var(--fondo);
}

.acceso__arte { position: relative; overflow: hidden; }

.acceso__arte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: respirar 26s var(--curva-suave) infinite alternate;
}

/* Un acercamiento lentísimo: no se ve moverse, pero la página deja de parecer
   una captura de pantalla. */
@keyframes respirar {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

.acceso__arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fondo) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .5) 100%);
}

.acceso__cita {
  position: absolute;
  z-index: 2;
  inset: auto var(--e7) var(--e7);
  max-width: 30ch;
  font-family: Archivo, sans-serif;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.28;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .8);
}

.acceso__cita small {
  display: block;
  margin-top: var(--e3);
  font-family: Inter, sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arena);
}

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__arte { display: none; }
  .acceso__panel { padding: calc(var(--cabecera) + var(--e7)) var(--e5) var(--e8); }
}

.acceso h1 { margin-bottom: var(--e3); font-size: var(--t-4xl); }
.acceso__sub { margin: 0 0 var(--e7); font-size: var(--t-base); color: var(--tenue); }

.ventajas {
  display: grid;
  gap: var(--e3);
  margin: 0 0 var(--e7);
  padding: 0;
  list-style: none;
}

.ventajas li {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  font-size: var(--t-md);
  color: #d4d4d4;
}

.ventajas li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(240, 185, 104, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b968' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Recuadro de aviso: el mismo para «vienes a por una plaza», «guardado» y
   «publicado». Un solo componente, tres usos. */
.marca-fundador {
  margin: 0 0 var(--e6);
  padding: var(--e4) var(--e5);
  border: 1px solid rgba(240, 185, 104, .3);
  border-left: 3px solid var(--arena);
  border-radius: var(--r-sm);
  background: rgba(240, 185, 104, .07);
  font-size: var(--t-md);
  animation: entrar-aviso var(--medio) var(--curva);
}

.marca-fundador strong { display: block; margin-bottom: 2px; color: var(--arena-viva); }
.marca-fundador span { color: var(--tenue); }

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

.campo { margin-bottom: var(--e5); }

.campo label,
.campo__rotulo {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: #d4d4d4;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-base);
  transition:
    border-color var(--medio) var(--curva),
    background var(--medio) var(--curva),
    box-shadow var(--medio) var(--curva);
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--borde-vivo); }

.campo textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }

.campo select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393aab9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 0;
  border-color: var(--arena);
  background: var(--superficie-2);
  box-shadow: var(--anillo-arena);
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--apagado); }

/* La hora de programar en /publicar (31-10-2026): el calendario del navegador,
   en oscuro como la página; si no, su icono sale negro sobre negro. */
.campo input[type="datetime-local"] { color-scheme: dark; }

.campo--error input,
.campo--error textarea {
  border-color: var(--alarma);
  box-shadow: var(--anillo-alarma);
}

/* Chico o chica, en el perfil (Dani, 25-10-2026). */
.campo__rotulo { margin-top: 0; }
.campo__pista { margin: var(--e2) 0 0; font-size: var(--t-sm); color: var(--apagado); }
.sexo { display: flex; flex-wrap: wrap; gap: var(--e2); }

.campo__aviso {
  display: none;
  margin: var(--e2) 0 0;
  font-size: var(--t-sm);
  color: #f0947f;
}

.campo--error .campo__aviso { display: block; animation: entrar-aviso var(--rapido) var(--curva); }

/* El botón de Google lo pinta Google (js/sesion.js), en su versión oscura:
   aquí solo su sitio, centrado y con su alto guardado para que el formulario
   no salte al aparecer. Mientras carga su marco, Google enseña un botón
   dibujado igual, y el marco salía debajo: dos botones durante segundos. En la
   misma celda, el marco queda encima del dibujo. */
.boton-google { display: flex; justify-content: center; min-height: 44px; }
.boton-google > div { display: grid; }
.boton-google > div > * { grid-area: 1 / 1; }

/* Y hasta que llega su librería, nuestro dibujo del mismo botón blanco en su
   sitio: antes había un hueco que se llenaba tarde (Dani, 15-10-2026, «tarda
   en aparecer»). Se va solo cuando Google pinta el suyo dentro. */
.boton-google:empty::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") "\00a0\00a0 Continuar con Google";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #dadce0;
  border-radius: 20px;
  background: #fff;
  color: #3c4043;
  font: 500 14px/1 "Google Sans", Roboto, Arial, sans-serif;
  letter-spacing: .25px;
  white-space: nowrap;
}
/* En la web en inglés, como lo dirá el de Google. */
.boton-google:empty:lang(en)::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") "\00a0\00a0 Continue with Google";
}

/* En la app de Windows el botón es nuestro (js/sesion.js), igual que el de
   Google: el suyo no deja elegir cuenta dentro de la app. */
.boton-google:has(.boton-google__app) { flex-direction: column; align-items: center; }
.boton-google__app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #dadce0;
  border-radius: 20px;
  background: #fff;
  color: #3c4043;
  font: 500 14px/1 "Google Sans", Roboto, Arial, sans-serif;
  letter-spacing: .25px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.boton-google__app:hover { background: #f7f8f8; }
.boton-google__app:focus-visible { outline: 2px solid var(--arena, #e8d6a8); outline-offset: 2px; }
.boton-google__espera { margin: 10px 0 0; max-width: 400px; text-align: center; font-size: 14px; opacity: .8; }

/* «Prefiero usar mi correo»: con Google, el formulario del correo va detrás
   (Dani, 6-10-2026). Abierto, la flecha da la vuelta y los campos quedan
   separados de Google por una raya. */
.correo-abrir {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  margin: var(--e2) auto 0;
  padding: 0 14px;
  border: 0;
  background: none;
  color: #d6d6d6;
  font: inherit;
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
}

.correo-abrir:hover { color: var(--texto); }
.correo-abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--medio) var(--curva); }
.correo-abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.correo-abrir:not([hidden]) + .campos-correo { margin-top: var(--e3); padding-top: var(--e5); border-top: 1px solid rgba(255, 255, 255, .08); }

.casilla {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  margin-bottom: var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  color: var(--tenue);
  cursor: pointer;
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva);
}

.casilla:hover { background: rgba(255, 255, 255, .022); border-color: var(--borde); }

.casilla input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--arena);
  cursor: pointer;
}

.aviso-envio {
  display: none;
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid rgba(226, 114, 92, .38);
  border-left: 3px solid var(--alarma);
  border-radius: var(--r-sm);
  background: rgba(226, 114, 92, .09);
  font-size: var(--t-md);
  color: #f6b7a6;
}

.aviso-envio.visible { display: block; animation: entrar-aviso var(--medio) var(--curva); }

.letra-pequena { margin: var(--e4) 0 0; font-size: var(--t-sm); color: var(--apagado); }
.letra-pequena a { color: var(--tenue); text-underline-offset: 3px; }
.letra-pequena a:hover { color: var(--texto); }

/* En el perfil no hay botón de guardar, y hay que decirlo: si no, se busca. */
.perfil__solo { margin: 0 0 var(--e5); }

/* Dos campos cortos en una fila: el nombre y el nombre de usuario. */
.campos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }

@media (max-width: 560px) {
  .campos-dos { grid-template-columns: 1fr; }
}

/* Lo que se sabe de un campo mientras se escribe (si un nombre está libre),
   junto a su etiqueta para no mover nada de sitio. */
.campo__estado { float: right; font-size: var(--t-xs); font-weight: 600; color: var(--apagado); }
.campo__estado--libre { color: var(--bien); }

/* El ojo de las contraseñas (js/ver-clave.js), a la izquierda del campo. */
.clave { position: relative; display: block; }
.campo .clave input { padding-left: 46px; }

.clave__ojo {
  position: absolute;
  top: 50%;
  left: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--apagado);
  transform: translateY(-50%);
  cursor: pointer;
  transition: color var(--medio) var(--curva);
}

.clave__ojo:hover, .clave__ojo[aria-pressed="true"] { color: var(--texto); }
.clave__ojo:focus-visible { outline: 2px solid var(--arena); outline-offset: 1px; }
.clave__ojo svg { width: 18px; height: 18px; }

/* ---------- Registro y entrada: una pantalla y una imagen ---------- */

/* Sin cabecera: el logotipo va en el panel y la imagen se queda el resto. En el
   ordenador cabe entero en una pantalla; el aire entre piezas sale del alto de
   la ventana, así que en un portátil de 1366 x 768 se aprieta y en una pantalla
   alta respira. */
.acceso--pantalla {
  --aire: clamp(10px, 1.9vh, 20px);
  position: relative;
  grid-template-columns: minmax(0, 34rem) 1fr;
  grid-template-areas: "panel arte";
}

.acceso--pantalla .acceso__panel {
  grid-area: panel;
  padding: calc(var(--aire) * 1.2) clamp(var(--e5), 4.5vw, var(--e8));
}

.acceso--pantalla .acceso__arte { grid-area: arte; }

/* La hoguera y el sol, que es lo que cuenta la imagen, arriba del centro. */
.acceso--pantalla .acceso__arte img { object-position: 50% 34%; }

.acceso--pantalla .acceso__arte::after {
  background:
    linear-gradient(90deg, var(--fondo) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(0deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 32%);
}

.acceso__marca { align-self: flex-start; margin-bottom: calc(var(--aire) * 1.4); }
.acceso__marca img { display: block; width: auto; height: clamp(36px, 6vh, 58px); }

.acceso--pantalla h1 { margin-bottom: calc(var(--aire) * .5); font-size: clamp(2rem, 6.2vh, 3.1rem); }
.acceso--pantalla .acceso__sub { margin-bottom: calc(var(--aire) * 1.3); }
.acceso--pantalla .campo { margin-bottom: var(--aire); }
.acceso--pantalla .campo label { margin-bottom: 5px; }
.acceso--pantalla .campo input { padding: 11px 14px; }
.acceso--pantalla .campo .clave input { padding-left: 46px; }
.acceso--pantalla .casilla { margin: 0 0 var(--aire); padding: 4px 0; }
.acceso--pantalla .casilla:hover { background: none; border-color: transparent; }
.acceso--pantalla .letra-pequena { margin-top: var(--aire); font-size: var(--t-xs); }

/* Quien llega desde la oferta de fundadores lee su aviso donde iba la frase de
   debajo del título, y en dos líneas: el aviso entero hacía bajar la página. */
.acceso--pantalla:has(.marca-fundador:not([hidden])) { --aire: clamp(8px, 1.6vh, 20px); }

.acceso--pantalla .marca-fundador {
  margin: 0 0 var(--aire);
  padding: 6px 12px;
  font-size: var(--t-sm);
  line-height: 1.45;
}

.acceso--pantalla .marca-fundador strong { display: inline; }
.acceso--pantalla .acceso__sub:has(~ .marca-fundador:not([hidden])) { display: none; }

/* En /dannndev el título es una frase entera y el aviso, más largo: el título
   baja de cuerpo para no empujar el formulario fuera de la pantalla. */
.acceso--pantalla:has(#marca-dannndev:not([hidden])) h1 { font-size: clamp(1.75rem, 4.9vh, 2.6rem); }
/* Su texto va en párrafos, como lo escribió Dani. */
.acceso--pantalla #marca-dannndev strong,
.acceso--pantalla #marca-dannndev span { display: block; }
.acceso--pantalla #marca-dannndev strong { margin-bottom: 4px; }
.acceso--pantalla #marca-dannndev span + span { margin-top: 6px; }

.acceso__otra { margin: calc(var(--aire) * .8) 0 0; font-size: var(--t-md); color: var(--tenue); }
.acceso__otra a { color: var(--arena); font-weight: 600; text-underline-offset: 3px; }
.acceso__otra a:hover { color: var(--arena-viva); }

/* En el móvil la imagen va arriba, el logotipo encima de ella, y el formulario
   debajo: aquí se puede bajar. */
@media (max-width: 900px) {
  .acceso--pantalla {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "arte" "panel";
  }

  .acceso--pantalla .acceso__arte { display: block; height: 38svh; min-height: 240px; }
  .acceso--pantalla .acceso__arte img { object-position: 50% 30%; }
  .acceso--pantalla .acceso__arte::after { background: linear-gradient(0deg, var(--fondo) 0%, rgba(0, 0, 0, 0) 60%); }

  /* Sin `position`: como hijo de la rejilla ya admite `z-index`, y así el
     logotipo se coloca respecto a la página y no respecto al panel. */
  .acceso--pantalla .acceso__panel {
    z-index: 1;
    margin-top: calc(-1 * var(--e8));
    background: transparent;
    padding: 0 var(--e5) var(--e8);
  }

  .acceso__marca {
    position: absolute;
    z-index: 2;
    top: max(var(--e4), env(safe-area-inset-top));
    left: var(--e5);
    margin: 0;
  }

  .acceso__marca img { height: 46px; }
}

/* ---------- La bienvenida: dos mitades ---------- */

/* El diseño 6 del lienzo, «Dos mitades» (Dani, 6-10-2026): la isla con el
   saludo a un lado y la lista de sitios al otro. En el ordenador cabe en una
   pantalla; en el móvil, la foto arriba y la lista debajo. La cabecera va
   transparente encima y se oscurece al bajar (js/comun.js). */
.mitades {
  display: flex;
  min-height: 100svh;
  background: var(--fondo);
}

.mitades__foto {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.mitades__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}

/* Arriba, para que el logotipo se lea; abajo, para el saludo; y el borde de
   la derecha fundido con el negro de la lista. */
.mitades__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 24%, rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, .9)),
    linear-gradient(90deg, transparent 80%, var(--fondo));
}

.mitades__saludo {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: 0 clamp(20px, 4vw, 56px) clamp(32px, 7vh, 72px);
}

.mitades__saludo h1 {
  font-size: clamp(2.6rem, 5.2vw, 5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .92;
}

.mitades__saludo h1 [data-nombre] > span { display: block; color: var(--arena); }
.mitades__saludo p { margin: var(--e2) 0 0; }

.mitades__lista {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e6);
  padding: clamp(96px, 13vh, 132px) clamp(20px, 4vw, 64px) clamp(28px, 5vh, 48px);
}

.sitios { display: flex; flex-direction: column; }

.sitio {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 1.6vw, 22px);
  padding: clamp(14px, 2.4vh, 22px) 0;
  border-top: 1px solid #1d1d1d;
  color: var(--texto);
  text-decoration: none;
}

.sitio:last-child { border-bottom: 1px solid #1d1d1d; }

.sitio__foto {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  transition: transform var(--medio) var(--curva);
}

/* Tu foto, redonda; sin foto, tus iniciales. */
.sitio__foto--tu {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font: 800 1.6rem var(--titular);
  color: var(--arena);
}

.sitio__foto--tu img { width: 100%; height: 100%; object-fit: cover; }

.sitio__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.sitio__antes {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--apagado);
}

.sitio--primero .sitio__antes { color: var(--arena); }

.sitio__nombre {
  font-family: var(--titular);
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  transition: color var(--medio) var(--curva);
}

.sitio__linea { color: var(--tenue); }

.sitio__flecha {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #3a3a3a;
  color: var(--texto);
  transition: border-color var(--medio) var(--curva), color var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.sitio__flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.sitio--primero .sitio__flecha { border-color: var(--arena); background: var(--arena); color: var(--arena-honda); }

.sitio:hover .sitio__foto { transform: scale(1.05); }
.sitio:hover .sitio__nombre { color: var(--arena-viva); }
.sitio:hover .sitio__flecha { border-color: var(--arena); color: var(--arena); transform: translateX(3px); }
.sitio--primero:hover .sitio__flecha { color: var(--arena-honda); }

/* Tocada: la fila se queda marcada y la flecha gira hasta que sale la página
   siguiente (js/bienvenida.js). */
.sitio:active .sitio__foto,
.sitio--yendo .sitio__foto { transform: scale(.96); }
.sitio--yendo .sitio__nombre { color: var(--arena-viva); }
.sitio--yendo .sitio__flecha { border-color: var(--arena); border-top-color: transparent; color: var(--arena); animation: sitio-yendo .8s linear infinite; }
.sitio--primero.sitio--yendo .sitio__flecha { background: transparent; }
.sitio--yendo .sitio__flecha svg { opacity: 0; }
@keyframes sitio-yendo { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .sitio--yendo .sitio__flecha { animation: none; } }

.mitades__semana {
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: #d4d4d4;
  font-size: var(--t-sm);
  text-decoration: none;
}

.mitades__semana:hover { color: var(--texto); }

.mitades__chip {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--r-redondo);
  background: var(--arena);
  color: var(--arena-honda);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .mitades { flex-direction: column; }
  .mitades__foto { flex: none; min-height: 62svh; }
  .mitades__foto::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 24%, rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, .92) 88%, var(--fondo));
  }
  .mitades__lista { flex: none; padding-top: var(--e5); }
  .sitio { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .sitio__foto { width: 72px; height: 72px; border-radius: 14px; }
  .sitio__foto--tu { border-radius: 50%; font-size: 1.25rem; }
  .sitio__linea { font-size: var(--t-sm); line-height: 1.45; }
  .sitio__flecha { width: 40px; height: 40px; }
}

/* En el teléfono, todo en una pantalla y sin scroll (Dani, 7-10-2026): la
   foto con el saludo se queda con lo que dejen las filas, y las filas se
   aprietan, con su línea en un solo renglón. */
@media (max-width: 640px) {
  .mitades__foto { flex: 1 1 0; min-height: 200px; }
  .mitades__saludo { gap: var(--e2); padding: 0 var(--lado-movil) var(--e4); }
  .mitades__saludo h1 { font-size: min(2.6rem, 4.9svh); }
  .mitades__lista { gap: var(--e3); padding: var(--e2) var(--lado-movil) var(--e4); }
  .sitio { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; padding: 9px 0; }
  .sitio__foto { width: 54px; height: 54px; border-radius: 12px; }
  .sitio__foto--tu { font-size: 1rem; }
  .sitio__texto { gap: 2px; }
  .sitio__antes { font-size: 10px; }
  .sitio__nombre { font-size: 1.3rem; }
  .sitio__linea { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .sitio__flecha { width: 34px; height: 34px; }
  .sitio__flecha svg { width: 16px; height: 16px; }
  /* Sin la semana del devhub debajo (Dani, 8-10-2026): está en Avances. */
  .mitades__semana { display: none; }
}

/* ---------- La bienvenida, entrando como en el cine ---------- */

/*
 * «El horizonte», el 2 de las seis entradas del lienzo (Dani, 9-10-2026): en
 * negro, una línea de luz cruza el centro y se abre como un párpado --primero
 * en banda de cine y luego entera-- dejando ver la isla, que sube a su sitio;
 * el logotipo se enciende como una lámpara, y el saludo y las filas se abren
 * desde su centro. Entera la primera vez de cada visita y en dos segundos las
 * demás: data-entrada lo pone js/antes.js antes de pintar, y lo quita
 * js/bienvenida.js al acabar o al tocar la pantalla. Los tiempos son los del
 * lienzo: en tanto por ciento de 6,8 s, y --t los acorta.
 */
html[data-entrada="cine"] { --t: .85; }
html[data-entrada="breve"] { --t: .3; }
html[data-entrada] { --dura: calc(6.8s * var(--t)); }

html[data-entrada] .mitades__foto { animation: bv-foto var(--dura) linear both; }
html[data-entrada] .mitades__fondo { animation: bv-fondo var(--dura) linear both; }
html[data-entrada] .mitades__foto::after { animation: bv-velo var(--dura) linear both; }
html[data-entrada] .mitades__foto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  height: 0;
  translate: 0 -50%;
  border-block: 2px solid;
  border-image: linear-gradient(90deg, rgb(255 208 138 / 0), #ffd08a 18%, #fff 50%, #ffd08a 82%, rgb(255 208 138 / 0)) 1;
  filter: drop-shadow(0 0 8px rgb(240 185 104 / .75));
  pointer-events: none;
  animation: bv-horizonte var(--dura) linear both;
}
html[data-entrada] .cabecera .marca { animation: bv-logo var(--dura) linear both; }
html[data-entrada] .cabecera .menu,
html[data-entrada] .cabecera__acciones { animation: bv-luego var(--dura) linear both; }

/* Lo de dentro se abre desde su centro, cada cosa a su tiempo. */
html[data-entrada] :is(.mitades__saludo h1, .mitades__saludo h1 [data-nombre] > span,
                       .mitades__saludo > p, .pregunta-sexo, .sitio, .mitades__semana) {
  animation: bv-abre calc(.9s * var(--t)) cubic-bezier(.16, 1, .3, 1) calc(var(--en) * var(--t)) both;
}
html[data-entrada] .mitades__saludo h1 { --en: 4.7s; animation-duration: calc(1.1s * var(--t)); }
html[data-entrada] .mitades__saludo h1 [data-nombre] > span { --en: 5.1s; animation-duration: calc(1.1s * var(--t)); }
html[data-entrada] .mitades__saludo > p { --en: 5.4s; }
/* Encima de las filas desde el 28-10: entra justo antes que ellas, no sola
   sobre el negro; recortada, tampoco recoge un toque antes de verse. */
html[data-entrada] .pregunta-sexo { --en: 5.5s; }
/* Las dos primeras son la misma fila (El juego, con plaza o sin ella): sale una. */
html[data-entrada] .sitio:nth-child(-n + 2) { --en: 5.6s; }
html[data-entrada] .sitio:nth-child(3) { --en: 5.74s; }
html[data-entrada] .sitio:nth-child(4) { --en: 5.88s; }
html[data-entrada] .sitio:nth-child(5) { --en: 6.02s; }
html[data-entrada] .mitades__semana { --en: 6.2s; }
/* Mientras entra, un toque salta la entrada y no se lleva a una fila que
   todavía no se ve. */
html[data-entrada] .mitades__lista { pointer-events: none; }
/* Menos «Chico» y «Chica», que piden respuesta y no llevan a ninguna fila: sin
   esto, el primer toque se perdía y parecía que no funcionaban (28-10-2026). */
html[data-entrada] .mitades__lista .pregunta-sexo { pointer-events: auto; }

@keyframes bv-horizonte {
  0%, 4.4% { opacity: 0; height: 0; scale: 0 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  19.1% { opacity: 1; height: 0; scale: 1 1; }
  22.1% { opacity: 1; height: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  33.8% { opacity: .65; height: 163px; }
  45.6% { opacity: .65; height: 163px; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  58.8% { opacity: 0; }
  66.2%, 100% { opacity: 0; height: 100%; scale: 1 1; }
}
@keyframes bv-fondo {
  0%, 22.1% { clip-path: inset(50% 0 50% 0); filter: brightness(2.6) saturate(.5); scale: 1.14; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  33.8% { clip-path: inset(calc(50% - 81.5px) 0 calc(50% - 81.5px) 0); filter: brightness(1.15) saturate(.95); scale: 1.08; }
  45.6% { clip-path: inset(calc(50% - 81.5px) 0 calc(50% - 81.5px) 0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  66.2% { clip-path: inset(0 0 0 0); }
  79.4%, 100% { clip-path: inset(0 0 0 0); filter: brightness(1) saturate(1); scale: 1; }
}
/* La foto, centrada en la pantalla mientras se abre, y luego a su sitio. */
@keyframes bv-foto {
  0%, 45.6% { translate: 0 calc(50svh - 50%); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  66.2%, 100% { translate: 0 0; }
}
@keyframes bv-velo {
  0%, 45.6% { opacity: 0; }
  66.2%, 100% { opacity: 1; }
}
/* Como una lámpara: se enciende, parpadea y se queda. */
@keyframes bv-logo {
  0%, 63.2% { opacity: 0; filter: brightness(2.6) drop-shadow(0 0 14px rgb(255 208 138 / .9)); }
  66.2% { opacity: .8; }
  69.1% { opacity: .15; }
  72.1% { opacity: 1; filter: brightness(2.2) drop-shadow(0 0 12px rgb(255 208 138 / .8)); animation-timing-function: ease-out; }
  88.2%, 100% { opacity: 1; filter: brightness(1) drop-shadow(0 0 0 rgb(255 208 138 / 0)); }
}
@keyframes bv-luego {
  0%, 72% { opacity: 0; }
  86%, 100% { opacity: 1; }
}
@keyframes bv-abre {
  from { opacity: 0; clip-path: inset(50% -8px 50% -8px); filter: brightness(2.2); }
  to { opacity: 1; clip-path: inset(-40% -8px -40% -8px); filter: brightness(1); }
}

/* ---------- La sala: ocupa la pantalla entera, como una aplicación ---------- */

.sala-pagina {
  display: flex;
  height: 100svh;
  padding-top: var(--cabecera);
  background: var(--fondo-2);
}

/* En el móvil, todos los textos de la sala justificados, como los párrafos del
   resto de la web, y los títulos no (Dani, 12-10-2026). Lo que va centrado, con
   la última línea en el centro. */
@media (max-width: 640px) {
  .sala-pagina :is(p, .norma__explica):not([class*="titul"]):not([class*="nombre"]):not(.sala__de) {
    text-align: justify;
    hyphens: auto;
  }
  .sala-pagina :is(.estado__texto, .sala-cerrada p) { text-align-last: center; }
}

.sala {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}

/* Cada panel se desplaza por su cuenta; la página no se mueve. El min-height
   es imprescindible: sin él, un hijo de rejilla no baja del alto de su
   contenido y estira la fila hasta desbordar la pantalla.
   El position: relative, para que lo colocado con absolute dentro (los textos
   .oculto-visual del ojo y los corazones) se quede en el panel: si no, se
   medía contra .sala, alargaba la página y salía una segunda barra
   (Dani, 25-10-2026). */
.sala__lista,
.sala__panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* La lista, en negro liso (diseño 2, Dani 6-10-2026). En el móvil se abre
   encima de los mensajes y ahí sí es de cristal (más abajo). */
.sala__lista {
  padding: var(--e5) 18px var(--e7);
  background: #0a0a0a;
  border-right: 1px solid #1d1d1d;
}

/*
 * Tu ficha, como la de un jugador (diseño 2): tu foto arriba, que se funde con
 * la ficha; tu papel en una chapa; tu nombre, y tu rango con la barra hasta el
 * siguiente, que lleva a tus logros. Sin foto, la silueta gris de un jugador.
 */
.sala__marca {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--e6);
  overflow: hidden;
  border: 1px solid rgb(240 185 104 / .38);
  border-radius: 18px;
  background: #111;
  box-shadow: 0 0 0 4px rgb(240 185 104 / .05), 0 24px 50px -28px rgb(240 185 104 / .35);
}

.sala__retrato {
  position: relative;
  height: 128px;
  background: #000 url("/img/jugador.svg") no-repeat center bottom / auto 84%;
}

.sala__retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, #111);
}

.sala__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sala__papel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 4px 10px;
  border: 1px solid rgb(240 185 104 / .5);
  border-radius: var(--r-redondo);
  background: rgb(0 0 0 / .6);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arena);
}

.sala__marca strong {
  padding: var(--e1) 18px 0;
  font-family: Archivo, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.sala__salir {
  display: inline-flex;
  align-items: center;
  /* Salirse de la sala con un enlace de veinte píxeles en un móvil es pedir
     que se falle el toque. Se le da alto sin cambiar cómo se ve. */
  min-height: 40px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--apagado);
  font: inherit;
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--medio) var(--curva);
}

.sala__salir:hover { color: var(--texto); }

.sala__grupo { padding: 0 0 var(--e5); }

/* El grupo en letras y con una raya hasta el borde: separa sin pesar. */
.sala__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--e2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6f6f6f;
}

.sala__titulo::after { content: ""; flex: 1; height: 1px; background: #232323; }

.sala__canales { list-style: none; margin: 0; padding: 0; }

/* El chat en vivo, encima de los grupos. Diseño 5 del lienzo (Dani,
   26-10-2026): fina y oscura como el resto de la sala, el nombre del tamaño de
   los canales y lo único en arena, el icono y «en directo» con su puntito. */
.chat-vivo {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--e5);
  padding: 8px 12px;
  background: #121212;
  border: 1px solid #232323;
  border-radius: 14px;
  color: #f2f2f2;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.chat-vivo:hover { background: #181818; border-color: #2e2e2e; }

/* El buscador de toda la comunidad, debajo del chat en vivo. Solo en la lista
   de canales del móvil: en el escritorio ya está el de arriba del canal. */
.indice-buscar { margin: calc(var(--e3) - var(--e5)) 0 var(--e5); }
.sala:not(.sala--indice) .indice-buscar { display: none; }
.indice-buscar input {
  width: 100%;
  min-height: 42px;
  padding: var(--e2) var(--e4);
  border: 1px solid #232323;
  border-radius: var(--r-redondo);
  background: #121212;
  color: var(--texto);
  /* Menos de 16px hace que iOS acerque la página al enfocar el campo. */
  font: inherit;
  font-size: 16px;
}
.indice-buscar input:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }
.indice-buscar__resultados .en-toda { margin: var(--e3) 0 0; }
.indice-buscar__nada { margin: var(--e3) 4px 0; color: var(--tenue); font-size: 14px; }
.chat-vivo.activo { border-color: var(--arena); }
.chat-vivo__icono { flex: none; display: inline-flex; color: var(--arena); }
.chat-vivo__icono svg { width: 19px; height: 19px; }
.chat-vivo__nombre { flex: 1; min-width: 0; font-size: 15px !important; font-weight: 700; line-height: 1.2; }
.chat-vivo__directo { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 600; color: var(--arena); }
.chat-vivo__directo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--arena); animation: chat-latido 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chat-vivo__directo::before { animation: none; } }
.chat-vivo .sala__candado { flex: none; }

/*
 * El chat: lo último abajo, como en cualquier chat, y la caja de escribir
 * pegada al pie del panel. Con burbujas (diseño 1, Dani 26-10-2026): las de
 * los demás a la izquierda en gris con su foto, las tuyas a la derecha en
 * arena; arriba, la cápsula flotante del diseño 3.
 */
.sala--chat .sala__panel { display: flex; flex-direction: column; padding-top: var(--e3); }
/* Llena el panel aunque haya pocos mensajes: la caja de escribir, siempre
   abajo (Dani, 26-10-2026). */
.sala--chat #sala-contenido { flex: 1 0 auto; display: flex; flex-direction: column; }
.chat { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100%; }

/* En el móvil, sin la cabecera de la web ni el logotipo: el chat ocupa la
   pantalla entera, como una aplicación de mensajes (Dani, 26-10-2026). */
@media (max-width: 820px) {
  html:has(.sala--chat) .cabecera { display: none; }
  .sala-pagina:has(.sala--chat) { height: 100dvh; padding-top: 0; }
  .sala.sala--chat { border-top: 0; }
  .sala--chat .sala__panel { padding-top: calc(var(--e3) + env(safe-area-inset-top)); }
  .sala--chat .chat__arriba { top: env(safe-area-inset-top); }
}

/* La cabecera y, a los fundadores, las cápsulas de los dos chats (Dani,
   27-10-2026): se quedan arriba juntas al bajar. */
.chat__arriba {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--e3);
}
.chat__salas { display: flex; gap: 8px; }
.chat__sala {
  flex: 1;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 999px;
  background: rgb(23 23 23 / .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--tenue);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.chat__sala:hover { color: var(--texto); }
.chat__sala--activa,
.chat__sala--activa:hover { border-color: var(--arena); background: var(--arena); color: #111; }
.chat__sala:focus-visible { outline: none; box-shadow: var(--anillo) rgb(240 185 104 / .45); }

.chat__cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 18px;
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 999px;
  background: rgb(23 23 23 / .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -18px rgb(0 0 0 / .9);
}
.chat__volver {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0d0d0d;
  color: var(--texto);
  cursor: pointer;
}
.chat__titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat__titulo strong { font-family: var(--titular); font-size: 16px; font-weight: 700; line-height: 1.25; }
.chat__quienes { overflow: hidden; font-size: 12px; color: #a6a6a6; white-space: nowrap; text-overflow: ellipsis; }
.chat__directo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(240 185 104 / .12);
  color: var(--arena);
  font-size: 12px;
  font-weight: 600;
  transition: background-color .3s, color .3s;
}
.chat__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: chat-latido 2s ease-in-out infinite; }
.chat__directo--fuera { background: rgb(255 255 255 / .06); color: #a6a6a6; }
.chat__directo--fuera .chat__punto { animation: none; opacity: .6; }
@keyframes chat-latido { 50% { opacity: .35; } }
/* Las caras de quien está, en lugar de «En directo» (Dani, 26-10-2026). */
.chat__caras { flex: none; display: flex; align-items: center; padding-right: 4px; }
.chat__caras[hidden], .chat__directo[hidden] { display: none; }
.chat__cara {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-left: -9px;
  overflow: hidden;
  border: 2px solid #171717;
  border-radius: 50%;
  background: #2c2c2c;
  color: #e6e6e6;
  font-size: 11px;
  font-weight: 700;
}
.chat__cara:first-child { margin-left: 0; }
.chat__cara img { width: 100%; height: 100%; object-fit: cover; }
.chat__cara--tu { background: var(--arena); color: #111; }
.chat__mas { margin-left: 6px; font-size: 12px; font-weight: 700; color: #a6a6a6; }

.chat__lista { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
.chat__dia { align-self: center; margin: var(--e4) 0 var(--e2); padding: 3px 12px; border-radius: 999px; background: var(--superficie); font-size: 11px; color: #a6a6a6; }
.chat__dia::first-letter { text-transform: uppercase; }
.chat__vacio, .chat__cargando { padding: var(--e7) 0; text-align: center; color: var(--apagado); }

.chat__mensaje { position: relative; display: flex; align-items: flex-start; gap: 8px; max-width: 84%; margin-top: var(--e3); }
.chat__mensaje--seguido { margin-top: 3px; }
.chat__mensaje--mio { align-self: flex-end; max-width: 78%; }
.chat__foto { width: 28px; height: 28px; margin-top: 2px; font-size: 10px; }
.chat__mensaje--seguido .chat__foto { visibility: hidden; height: 0; }
.chat__columna { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.chat__mensaje--mio .chat__columna { align-items: flex-end; }
.chat__globo { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.chat__mensaje--mio .chat__globo { flex-direction: row-reverse; }

.chat__burbuja {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 6px;
  border-radius: 18px 18px 18px 6px;
  background: var(--superficie-2);
  transition: box-shadow .3s;
}
.chat__mensaje--seguido .chat__burbuja { border-top-left-radius: 6px; }
.chat__mensaje--mio .chat__burbuja { border-radius: 18px 18px 6px 18px; background: var(--arena); color: #111; }
.chat__mensaje--mio.chat__mensaje--seguido .chat__burbuja { border-top-right-radius: 6px; }
.chat__mensaje--desarrollador:not(.chat__mensaje--mio) .chat__burbuja { gap: 3px; background: #1f1a12; border: 1px solid rgb(240 185 104 / .35); }
.chat__quien { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a6a6a6; }
.chat__quien strong { font-weight: 600; }
.chat__mensaje--desarrollador .chat__quien strong { font-weight: 700; color: var(--arena); }
.chat__quien .insignia { margin: 0; padding: 1px 6px; font-size: 9px; }
.chat__texto { line-height: 1.4; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__mensaje--mio .mencion { color: #111; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.chat__hora { align-self: flex-end; font-size: 10px; line-height: 1.3; color: var(--apagado); }
.chat__mensaje--desarrollador .chat__hora { color: #8f8f8f; }
.chat__mensaje--mio .chat__hora { color: #5a4320; }

/* Corregir lo tuyo: el campo dentro de la burbuja (Dani, 3-11-2026). */
.chat__corregir { display: flex; flex-direction: column; gap: 6px; min-width: min(260px, 62vw); }
.chat__corregir-campo {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgb(0 0 0 / .25);
  border-radius: 10px;
  background: rgb(255 255 255 / .55);
  color: #111;
  font: inherit;
  line-height: 1.4;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
}
.chat__corregir-campo:focus { outline: 2px solid #111; outline-offset: 1px; }
.chat__corregir-pie { display: flex; justify-content: flex-end; gap: 6px; }
.chat__corregir-cancelar,
.chat__corregir-guardar {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.chat__corregir-cancelar { background: none; color: #3d2d14; }
.chat__corregir-guardar { background: #111; color: var(--arena); }
.chat__corregir-guardar:disabled { opacity: .6; cursor: default; }

/* La cita del mensaje al que responde: dentro de la burbuja, y al tocarla
   lleva a él. */
.chat__cita {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 100%;
  margin: 2px 0 4px;
  padding: 5px 10px;
  border: 0;
  border-left: 3px solid var(--arena);
  border-radius: 8px;
  background: rgb(255 255 255 / .06);
  color: #a6a6a6;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.chat__cita strong { font-size: 12px; color: var(--arena); }
.chat__cita span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; overflow-wrap: anywhere; }
.chat__mensaje--mio .chat__cita { border-left-color: #111; background: rgb(0 0 0 / .1); color: #3d2d14; }
.chat__mensaje--mio .chat__cita strong { color: #111; }
.chat__mensaje--senalado .chat__burbuja { animation: chat-senalado 1.6s ease-out; }
@keyframes chat-senalado { 0%, 40% { box-shadow: 0 0 0 3px var(--arena); } 100% { box-shadow: 0 0 0 3px rgb(240 185 104 / 0); } }

/* Responder: al lado de la burbuja al pasar por encima; en el móvil, debajo,
   al tocarla. Reaccionar y reportar, siempre debajo (Dani, 26-10-2026). */
.chat__acciones { flex: none; display: flex; align-items: center; gap: 4px; }
.chat__mensaje--mio .chat__acciones { flex-direction: row-reverse; }
.chat .reacciones__mas { position: static; }
.chat .reacciones__abrir,
.chat__responder,
.chat__reportar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #8f8f8f;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.chat .reacciones__abrir:hover,
.chat__responder:hover,
.chat__responder:focus-visible { background: #1c1c1c; color: var(--texto); }
/* Los de debajo, más pequeños y apagados: que se vean sin tapar la conversación. */
.chat__pie { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.chat__pie:empty { display: none; }
.chat__pie .reacciones__abrir,
.chat__reportar { width: 28px; height: 28px; color: #6f6f6f; }
.chat__pie .reacciones__abrir svg { width: 17px; height: 17px; }
.chat__reportar svg { width: 14px; height: 14px; }
.chat__reportar:hover,
.chat__reportar:focus-visible { background: #1c1c1c; color: #f0b968; }
/* Mantener pulsado para responder: la burbuja se hunde un poco al soltarse.
   En el móvil, sin seleccionar el texto ni el menú de copiar. */
.chat__mensaje--pulsado .chat__burbuja { animation: chat-pulsado .3s ease-out; }
@keyframes chat-pulsado { 40% { transform: scale(.96); } }
@media (hover: none) {
  .chat__burbuja { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* La lista de emojis se abre sobre el mensaje entero: así no se sale por los lados. */
.chat .reacciones__lista { left: 0; }
.chat__mensaje--mio .reacciones__lista { left: auto; right: 0; }
@media (hover: hover) {
  .chat__acciones { opacity: 0; transition: opacity .15s; }
  .chat__mensaje:hover .chat__acciones,
  .chat__mensaje:focus-within .chat__acciones,
  .chat__mensaje--activo .chat__acciones { opacity: 1; }
}
@media (hover: none) {
  .chat__globo { flex-wrap: wrap; }
  .chat__mensaje--mio .chat__globo { justify-content: flex-start; }
  .chat__acciones { display: none; flex-basis: 100%; margin-top: 2px; }
  .chat__mensaje--mio .chat__acciones { justify-content: flex-start; }
  .chat__mensaje--activo .chat__acciones { display: flex; }
}

/* Las reacciones, debajo y más pequeñas que en los temas. */
.chat__pie .reacciones { gap: 4px; }
.chat__pie .reacciones:not(:has(.reaccion:not([hidden]), .reacciones__mas)) { display: none; }
.chat__pie .reaccion { height: 26px; padding: 0 8px; gap: 4px; font-size: 12px; background: var(--superficie); }
.chat__pie .reaccion__emoji { font-size: 14px; }
.chat__pie .reaccion--puesta { background: rgb(240 185 104 / .12); }

/* La caja de escribir: quién escribe, a qué respondes y la fila redonda. */
.chat__escribir {
  position: sticky;
  bottom: calc(-1 * var(--e7));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--e3) 0 0;
  padding: var(--e3) 0 var(--e7);
  background: #000;
}
.chat__escribiendo { padding-left: 18px; font-size: 12px; color: #a6a6a6; }
.chat__escribiendo[hidden], .chat__respondiendo[hidden] { display: none; }
.chat__respondiendo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-left: 3px solid var(--arena);
  border-radius: 12px;
  background: var(--superficie);
}
.chat__respondiendo-que { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 4px; font-size: 13px; color: #a6a6a6; }
.chat__respondiendo-que strong { color: var(--arena); }
.chat__respondiendo-texto { flex-basis: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat__respondiendo-quitar {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #a6a6a6;
  font: inherit;
  cursor: pointer;
}
.chat__respondiendo-quitar:hover { background: #1c1c1c; color: var(--texto); }
.chat__escribir .mencionar { order: 0; }
.chat__caja { display: flex; align-items: center; gap: 8px; }
.chat__caja input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 1px solid #262626;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}
.chat__caja input:focus { outline: none; border-color: var(--arena); }
.chat__enviar {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--arena);
  color: #111;
  cursor: pointer;
}
.chat__enviar:disabled { opacity: .55; cursor: default; }

/* Las fotos del chat, de momento solo del desarrollo (27-10-2026): la cámara
   al lado del campo, las elegidas encima y, ya mandadas, dentro de la burbuja. */
.chat__camara {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #262626;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tenue);
  cursor: pointer;
}
.chat__camara:hover { border-color: var(--arena); color: var(--texto); }
.chat__camara:focus-visible { outline: 2px solid var(--arena-viva); outline-offset: 2px; }
.chat__elegidas { gap: 8px; }
.chat__elegidas:not(:has(figure)) { display: none; }
.chat__elegidas .nuevo-tema__foto { width: 72px; height: 72px; }
.chat__burbuja .entrada__fotos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(280px, 62vw);
  margin: 2px 0;
}
.chat__burbuja .entrada__fotos:has(> a:only-child) { grid-template-columns: 1fr; }
.chat__burbuja .entrada__fotos a { aspect-ratio: 1; border: 0; border-radius: 12px; }
.chat__burbuja .entrada__fotos > a:only-child { aspect-ratio: auto; max-height: 360px; }
.chat__burbuja .entrada__fotos > a:only-child img { height: auto; max-height: 360px; }

@media (max-width: 820px) {
  .chat__cabeza { padding-left: 6px; }
  .chat__volver { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .chat__punto, .chat__mensaje--senalado .chat__burbuja { animation: none; }
}

/* Lo del 28-10-2026 (Dani): spoilers, avisos de los fundadores, hilos, lo
   fijado y «Nuevos desde aquí». */

/* ||Spoiler||, en el chat y en los temas: tapado hasta que se toca. El span
   lo pinta js/sala.js; al tocarlo lleva la clase «visto». */
.spoiler { padding: 0 3px; border-radius: 4px; background: #262626; cursor: pointer; transition: background-color .2s, color .2s; }
.spoiler:not(.visto),
.spoiler:not(.visto) * { color: transparent; text-shadow: none; }
.spoiler:not(.visto) img { visibility: hidden; }
.spoiler:focus-visible { outline: 2px solid var(--arena); outline-offset: 1px; }
.spoiler.visto { padding: 0; background: none; color: inherit; cursor: auto; }

/* Donde te quedaste la última vez. */
.chat__nuevos { display: flex; align-items: center; gap: 10px; margin: var(--e4) 0 var(--e2); color: var(--arena); font-size: 11px; font-weight: 600; }
.chat__nuevos::before,
.chat__nuevos::after { content: ""; flex: 1; height: 1px; background: var(--arena); opacity: .6; }

/* Quien llega y quien sube de rango: una línea en el centro, sin burbuja. */
.chat__aviso { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 92%; margin: var(--e3) 0 var(--e2); text-align: center; }
.chat__aviso-texto { margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--superficie); font-size: 13px; color: #cfcfcf; }
.chat__aviso-icono { margin-right: 6px; }
.chat__aviso-pie { margin-top: 0; justify-content: center; }
/* Varias llegadas seguidas en un aviso: caras apiladas, «4 más» abre la lista. */
.chat__aviso-caras { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.chat__aviso-cara { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex: none; background: #3a3a3a; color: var(--texto); font-size: 10px; font-weight: 700; border: 2px solid var(--superficie); }
.chat__aviso-cara img { width: 100%; height: 100%; object-fit: cover; }
.chat__aviso-caras .chat__aviso-cara + .chat__aviso-cara { margin-left: -7px; }
.chat__aviso-mas { background: none; border: 0; padding: 0; color: var(--arena); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.chat__aviso-lista { list-style: none; margin: 2px 0 0; padding: 8px 12px; border-radius: 14px; background: var(--superficie); display: grid; gap: 6px; font-size: 13px; color: #cfcfcf; text-align: left; }
.chat__aviso-lista li { display: flex; align-items: center; gap: 8px; }
.chat__aviso-cara--lista { border: 0; }
@media (prefers-reduced-motion: no-preference) { .chat__aviso-lista { animation: chat-aviso-abre .18s ease-out; } }
@keyframes chat-aviso-abre { from { opacity: .4; transform: translateY(-3px); } }
.chat__saludar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.chat__saludar:hover:not(:disabled),
.chat__saludar:focus-visible { border-color: var(--arena); }
.chat__saludar:disabled { cursor: default; color: #a6a6a6; }
.chat__saludar--hecho,
.chat__saludar--hecho:disabled { border-color: var(--arena); color: var(--arena); }

/* «💬 3 respuestas», bajo el mensaje: abre su hilo. */
.chat__respuestas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--arena);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chat__respuestas:hover,
.chat__respuestas:focus-visible { background: #1c1c1c; }

/* Lo fijado, arriba con la cabecera: tocarlo lleva al mensaje. */
.chat__fijado { display: flex; align-items: center; gap: 4px; padding-right: 4px; border-left: 3px solid var(--arena); border-radius: 10px; background: var(--superficie); }
.chat__fijado[hidden] { display: none; }
.chat__fijado-ir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.chat__fijado-texto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat__fijado-quitar { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: #8f8f8f; cursor: pointer; }
.chat__fijado-quitar:hover,
.chat__fijado-quitar:focus-visible { background: #1c1c1c; color: var(--texto); }

/* El hilo: al lado; en el móvil, encima y a pantalla completa. */
.chat-hilo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  width: min(420px, 100%);
  height: 100dvh;
  min-height: 0;
  background: #000;
  border-left: 1px solid #1f1f1f;
  box-shadow: -12px 0 32px rgb(0 0 0 / .5);
  animation: chat-hilo-entra .2s ease-out;
}
@keyframes chat-hilo-entra { from { transform: translateX(24px); opacity: 0; } }
.chat-hilo__cabeza { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(var(--e3) + env(safe-area-inset-top)) var(--e4) var(--e3); border-bottom: 1px solid #1a1a1a; }
.chat-hilo__sala { font-size: 12px; color: #a6a6a6; }
.chat-hilo__cerrar { width: 36px; height: 36px; display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texto); font-size: 16px; cursor: pointer; }
.chat-hilo__cerrar:hover,
.chat-hilo__cerrar:focus-visible { background: #1c1c1c; }
.chat-hilo__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--e3) var(--e4); overflow-y: auto; overscroll-behavior: contain; }
.chat-hilo__raiz { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--arena); border-radius: 10px; background: var(--superficie); }
.chat-hilo__quien { font-size: 13px; }
.chat-hilo__lista { flex: 1 0 auto; justify-content: flex-start; }
.chat-hilo .chat-hilo__escribir { position: static; flex: none; margin: 0; padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom)); border-top: 1px solid #1a1a1a; }
@media (max-width: 820px) {
  .chat-hilo { width: 100%; border-left: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-hilo { animation: none; }
}

.sala__canal {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #bdbdbd;
  font: inherit;
  font-size: var(--t-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

/* El icono lo pone el JavaScript, porque ahora depende del TIPO de canal:
   almohadilla si se puede contestar, altavoz si solo habla el desarrollo y una
   tablilla en las normas. Estaba aqui como un "#" fijo. */
.sala__icono { display: inline-flex; flex: none; color: #6b6b6b; }
.sala__canal.activo .sala__icono,
.sala__canal:hover .sala__icono { color: var(--arena); }
.sala__canal:hover { background: rgb(255 255 255 / .05); color: var(--texto); }

/* El abierto, con su raya dorada pegada a la izquierda: sin mover el texto. */
.sala__canal.activo {
  background: #171717;
  box-shadow: inset 3px 0 0 var(--arena);
  color: #fff;
  font-weight: 600;
}

.sala__candado { margin-left: auto; font-size: var(--t-sm); opacity: .7; }

.sala__panel { padding: var(--e7) 44px var(--e7); background: #000; }

/*
 * La cabecera del canal (diseño 2): su grupo en dorado, el nombre grande y lo
 * que es; a la derecha, los temas del canal y la lupa. Con una raya debajo, y
 * sin ir pegada: con el nombre grande se comía media pantalla al bajar.
 */
.sala__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4) var(--e5);
  margin-bottom: var(--e2);
  padding-bottom: 22px;
  border-bottom: 1px solid #1d1d1d;
}

.sala__cabeza { display: grid; gap: var(--e1); min-width: 0; }

.sala__de {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arena);
}

.sala__de:empty { display: none; }

.sala__barra h2 {
  max-width: none;
  margin: 0;
  font-family: var(--titular);
  font-size: clamp(2rem, 1.4vw + 1.3rem, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.sala__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.sala__temas .temas { margin: 0; }

/* Solo existe en el móvil, para volver a la lista de canales. */
.sala__canales-boton {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #cfcfcf;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.sala__canales-boton::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 3px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.sala__barra small { font-weight: 400; font-size: var(--t-md); color: #9a9a9a; }

/* En el chat no hay cabecera: la flecha de volver va en su cápsula. */
.sala--chat .sala__barra { display: none; }

/* En la columna del escritorio cada canal es su nombre y nada más. */
.sala__que { display: none; }

/*
 * En el móvil, al entrar, todos los canales a pantalla entera, cada uno con lo
 * que hay dentro (Dani, 7-10-2026, diseño 2 de «La comunidad, canal por
 * canal»), y al elegir uno, el canal solo. Sin tu ficha: ya está en Perfil.
 */
@media (max-width: 820px) {
  .sala { grid-template-columns: 1fr; }
  .sala__canales-boton { display: inline-flex; }

  .sala:not(.sala--indice) .sala__lista,
  .sala--indice .sala__panel,
  .sala__marca { display: none; }

  .sala__lista { padding: var(--e3) var(--e4) var(--e7); background: #000; border-right: 0; }
  .sala__grupo { padding: 0; }
  .sala__titulo { margin: 18px 4px 6px; color: #8a8a8a; }

  .sala__canal { gap: 12px; min-height: 58px; padding: 8px 10px; border-radius: 14px; color: #f2f2f2; }
  .sala__canal::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 6px 0 4px;
    border-top: 2px solid #5f5f5f;
    border-right: 2px solid #5f5f5f;
    transform: rotate(45deg);
  }

  .sala__icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #151515;
    color: var(--arena);
  }
  .sala__icono svg { width: 17px; height: 17px; }

  .sala__texto { flex: 1; display: grid; gap: 1px; min-width: 0; }
  .sala__nombre { font-size: 15px; font-weight: 700; }
  .sala__que {
    display: block;
    overflow: hidden;
    font-size: 12.5px;
    color: #8a8a8a;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sala__panel { padding: var(--e4) var(--e5) var(--e7); }
  .sala__barra { align-items: center; padding-bottom: var(--e4); }
  .sala__cabeza { flex: 1 0 100%; }

  /* Sin los temas ni la lupa (Dani, 8-10-2026): en el teléfono se baja y se
     lee, y la fila de filtros se comía la pantalla antes de la primera semana. */
  .sala__mandos,
  .sala__buscar { display: none; }

}

/* ---------- Publicaciones y comentarios ---------- */

/* La foto va encima y pegada a los bordes: dentro de la rejilla, una foto
   alargada estiraba la fila y se salía del recuadro (Dani, 25-10-2026). */
.mensaje__avatar {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--arena-viva), var(--arena));
  color: var(--arena-honda);
  font-size: var(--t-md);
  font-weight: 800;
}

.mensaje__hora { margin-left: var(--e2); font-size: var(--t-xs); font-weight: 500; color: var(--apagado); }

.entrada { padding: var(--e5) 0 var(--e6); border-bottom: 1px solid var(--borde); }
.entrada:last-child { border-bottom: 0; }

.entrada__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.entrada__cabeza strong { display: block; font-size: var(--t-md); }
.entrada__titulo { margin: var(--e4) 0 0; font-size: var(--t-2xl); }

/* pre-line: los saltos de línea de la publicación se respetan sin meter HTML. */
.entrada__cuerpo {
  margin: var(--e2) 0 0;
  font-size: var(--t-base);
  line-height: 1.7;
  color: #d4d4d4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.hilo { margin-top: var(--e5); padding-left: var(--e5); border-left: 2px solid var(--borde); }

.comentario {
  display: flex;
  gap: var(--e3);
  margin-bottom: var(--e4);
  animation: subir var(--medio) var(--curva);
}

.comentario > div { min-width: 0; }

.comentario__avatar {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-2);
  color: var(--arena);
  font-size: var(--t-xs);
  font-weight: 700;
}

.comentario__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comentario__avatar--fundador { box-shadow: 0 0 0 2px var(--arena); color: var(--arena); }

.comentario strong { font-size: var(--t-md); }
.comentario p { margin: 2px 0 0; font-size: var(--t-md); color: #d4d4d4; overflow-wrap: anywhere; }

.comentario__borrar {
  margin-top: var(--e1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--apagado);
  font: inherit;
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--medio) var(--curva), color var(--medio) var(--curva);
}

/* En ratón aparece al pasar por encima; en táctil está siempre, porque ahí no
   hay «pasar por encima». */
.comentario:hover .comentario__borrar,
.comentario__borrar:focus-visible { opacity: 1; }
.comentario__borrar:hover { color: var(--alarma); }

@media (hover: none) {
  .comentario__borrar { opacity: 1; }
}

/* La banderita de reportar: pequeña y apagada, que no invite; en arena al
   pasar y cuando ya está reportado. En el chat toma la forma de responder. */
.reportar {
  display: inline-grid;
  place-items: center;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--apagado);
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--medio) var(--curva), color var(--medio) var(--curva);
}
.reportar:hover,
.reportar:focus-visible { opacity: 1; color: #f0b968; }
.reportar--hecho { opacity: 1; color: #f0b968; }
.chat__reportar.reportar { padding: 0; opacity: 1; color: #6f6f6f; }
.chat__reportar.reportar--hecho { color: #f0b968; }

.insignia {
  display: inline-block;
  margin-left: var(--e2);
  padding: 2px 9px;
  border: 1px solid rgba(240, 185, 104, .3);
  border-radius: var(--r-redondo);
  background: rgba(240, 185, 104, .13);
  color: var(--arena);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.insignia--grande { padding: 4px 13px; }

.comentar { display: flex; gap: var(--e2); margin-top: var(--e4); }

.comentar input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 11px var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  color: var(--texto);
  font: inherit;
  /* 16 px clavados: por debajo, iOS hace zoom al enfocar el campo. */
  font-size: var(--t-base);
  transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}

.comentar input:hover { border-color: var(--borde-vivo); }
.comentar input:focus { outline: 0; border-color: var(--arena); background: var(--superficie-2); }
.comentar .boton { padding: 11px var(--e5); font-size: var(--t-md); }

/* En #bugs, con la cámara al lado y las fotos elegidas debajo (25-10-2026). */
.comentar--con-fotos { flex-wrap: wrap; }
.comentar__foto {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  color: var(--tenue);
  cursor: pointer;
}
.comentar__foto:hover { border-color: var(--borde-vivo); color: var(--texto); }
.comentar__foto:focus-visible { outline: 2px solid var(--arena-viva); outline-offset: 2px; }
.comentar__fotos { flex-basis: 100%; }
.comentar__fotos:not(:has(figure)) { display: none; }
.comentario .entrada__fotos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-width: 360px; margin-top: var(--e2); }

@media (max-width: 520px) {
  .comentar { flex-direction: column; }
  .comentar .boton { width: 100%; }
  .comentar--con-fotos { flex-direction: row; }
  .comentar--con-fotos input { flex-basis: calc(100% - 44px - var(--e2)); }
}

/* ---------- Estados de la sala ---------- */

/* ---------- Estados: vacío, roto, cargando ---------- */

.estado { padding: var(--e8) var(--e4); text-align: center; }
.estado__icono { margin: 0 0 var(--e4); font-size: 2.6rem; line-height: 1; }
.estado__titulo { margin: 0; font-size: var(--t-xl); }
.estado__texto { margin: var(--e3) auto 0; max-width: 42ch; font-size: var(--t-md); color: var(--tenue); }
.estado .boton { margin-top: var(--e5); }
.estado--roto .estado__titulo { color: var(--alarma); }

/* El cerrojo de un canal de fundadores, en medio del hueco que deja la barra
   del canal y no pegado arriba. */
.sala__panel:has(.estado--cerrojo) { display: flex; flex-direction: column; }
.sala__panel:has(.estado--cerrojo) #sala-contenido { flex: 1; display: grid; place-items: center; }

/* Nombres viejos, por si queda algún sitio sin migrar. */
.sala__vacio { padding: var(--e8) 0; text-align: center; }
.sala__vacio h3 { font-size: var(--t-xl); }
.sala__vacio p { margin: var(--e3) auto 0; max-width: 42ch; font-size: var(--t-md); color: var(--tenue); }
.sala__vacio .boton { margin-top: var(--e5); }
.sala__cargando { font-size: var(--t-md); color: var(--tenue); }


/* ---------- Esqueletos ---------- */

/* La forma de lo que va a llegar, en gris. Ocupa el mismo sitio que el
   contenido real, así que cuando entra no da el salto de maquetación que daba
   un "Cargando…" de una línea. */

.hueso {
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.hueso + .hueso { margin-top: var(--e4); }
.hueso__fila { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }

.hueso__bulto {
  display: block;
  height: .75rem;
  margin-bottom: var(--e3);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--borde) 37%, var(--superficie-2) 63%);
  background-size: 400% 100%;
  animation: hueso-brillo 1.4s ease infinite;
}

.hueso__fila .hueso__bulto { margin-bottom: 0; }
.hueso__bulto--redondo { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; }
.hueso__bulto--corto { width: 38%; }
.hueso__bulto--medio { width: 72%; }
.hueso__bulto--titulo { width: 60%; height: 1.15rem; margin-bottom: var(--e4); }

@keyframes hueso-brillo {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* Un fondo que se mueve solo es justo lo que molesta a quien pidió menos
   movimiento: se queda quieto y en gris. */
@media (prefers-reduced-motion: reduce) {
  .hueso__bulto { animation: none; background: var(--superficie-2); }
}


/* ---------- Aviso que se va solo ---------- */

.pregon {
  position: fixed;
  left: 50%;
  bottom: var(--e5);
  z-index: 60;
  max-width: min(30rem, calc(100vw - 2 * var(--e4)));
  margin: 0;
  padding: var(--e3) var(--e5);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  box-shadow: var(--s3);
  font-size: var(--t-md);
  color: var(--texto);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 1rem);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
  pointer-events: none;
}

.pregon--visible { opacity: 1; transform: translate(-50%, 0); }
.pregon--malo { border-color: rgba(226, 114, 92, .5); color: var(--alarma); }

/* El aviso grande de abajo (js/estados.js, avisar): cuando la web frena algo.
   El diseño 4 que eligió Dani el 3-11-2026; se cierra al tocarlo. */
.aviso-grande {
  position: fixed;
  left: 50%;
  bottom: var(--e5);
  z-index: 61;
  width: min(26rem, calc(100vw - 24px));
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #2c2c2c;
  border-radius: 18px;
  background: #1b1b1b;
  box-shadow: 0 12px 30px rgb(0 0 0 / .6);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
}
.aviso-grande--visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.aviso-grande__icono {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(240 185 104 / .14);
  font-size: 22px;
  line-height: 1;
}
.aviso-grande__bloque { display: grid; gap: 2px; min-width: 0; }
.aviso-grande__titulo { font-family: var(--titular); font-size: 15px; font-weight: 700; line-height: 1.2; }
.aviso-grande__texto { font-size: 14px; line-height: 1.45; color: #cfcfcf; }
@media (prefers-reduced-motion: reduce) {
  .aviso-grande, .aviso-grande--visible { transform: translate(-50%, 0); transition: opacity .2s, visibility 0s .2s; }
  .aviso-grande--visible { transition-delay: 0s; }
}


/* ---------- Los logros de la comunidad ---------- */

/* El rango del retrato del perfil lleva a la pestaña de logros, sin parecer
   un enlace más. */
.retrato__cifras dd a { color: inherit; text-decoration: none; }

/* Tu rango en la ficha de la sala, con la barra hasta el siguiente (lo pinta
   js/logros.js). Todo él lleva a la lista de logros. */
.sala__rango { display: grid; gap: 10px; padding: 12px 18px 18px; color: inherit; text-decoration: none; }
.sala__rango-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.sala__rango-nombre { font-weight: 700; color: var(--arena); }
.sala__rango:hover .sala__rango-nombre { color: var(--arena-viva); }
.sala__rango-puntos { font-size: 13px; color: var(--tenue); }
.sala__rango-barra { height: 6px; overflow: hidden; border-radius: var(--r-redondo); background: #262626; }
.sala__rango-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c98b3a, var(--arena)); }
.sala__rango-falta { font-size: 12.5px; color: #8a8a8a; }

/* La medalla: apagada hasta que se consigue. */
.medalla {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--borde);
  color: var(--apagado);
}
.medalla svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.medalla--puesta { border-color: rgba(240, 185, 104, .45); background: rgba(240, 185, 104, .1); color: var(--arena); }

.logros__cabeza {
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}
.logros__rango { margin: 0; font-family: var(--titular); font-size: var(--t-2xl); font-weight: 800; color: var(--texto); }
.logros__puntos { margin: var(--e1) 0 var(--e4); font-size: var(--t-md); color: var(--arena); font-variant-numeric: tabular-nums; }
.logros__barra { height: 6px; border-radius: var(--r-redondo); background: var(--fondo-2); overflow: hidden; }
.logros__barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--arena), var(--arena-viva)); }
.logros__falta { margin: var(--e3) 0 0; font-size: var(--t-sm); color: var(--tenue); }
.logros__que { margin: var(--e5) 0; max-width: 62ch; font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }

.logros__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logro {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--fondo-2);
}
.logro--puesto { border-color: rgba(240, 185, 104, .3); background: var(--superficie); }
.logro__texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.logro__texto strong { font-size: var(--t-md); color: var(--texto); }
.logro:not(.logro--puesto) .logro__texto strong { color: var(--tenue); }
.logro__texto > span { font-size: var(--t-sm); line-height: 1.5; color: var(--apagado); }
.logro__barra { height: 4px; margin-top: var(--e2); border-radius: var(--r-redondo); background: var(--borde); overflow: hidden; }
.logro__barra span { display: block; height: 100%; background: var(--arena); }
.logro__texto .logro__cuenta { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.logro__puntos { flex: none; font-size: var(--t-sm); font-weight: 700; color: var(--apagado); font-variant-numeric: tabular-nums; }
.logro--puesto .logro__puntos { color: var(--arena); }

/* El aviso de un logro nuevo: arriba, para no pisar el de abajo («Comentario
   publicado»), que suele salir a la vez. */
.logro-aviso {
  position: fixed;
  left: 50%;
  top: calc(var(--cabecera) + var(--e3));
  z-index: 61;
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: min(26rem, calc(100vw - 2 * var(--e4)));
  padding: var(--e3) var(--e5) var(--e3) var(--e3);
  border: 1px solid rgba(240, 185, 104, .45);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  box-shadow: var(--s3);
  opacity: 0;
  transform: translate(-50%, -.75rem);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.logro-aviso--visible { opacity: 1; transform: translate(-50%, 0); }
.logro-aviso__texto { display: grid; line-height: 1.3; }
.logro-aviso__titulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--arena); }
.logro-aviso__texto strong { font-size: var(--t-md); color: var(--texto); }
.logro-aviso__mas { font-size: var(--t-sm); color: var(--tenue); }
/* El siguiente a por el que ir: con él son cuatro líneas y la píldora ya no cierra redonda. */
.logro-aviso--siguiente { border-radius: var(--r-md); }
.logro-aviso__siguiente { margin-top: var(--e1); padding-top: var(--e1); border-top: 1px solid var(--borde); font-size: var(--t-sm); color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .logro-aviso { transition: none; transform: translate(-50%, 0); }
}


/* ---------- Buscar dentro del canal ---------- */

.sala__buscar { flex: 1 0 100%; }
.sala__barra:not(.sala__barra--buscando) .sala__buscar { display: none; }

.sala__buscar input {
  width: 100%;
  min-height: 38px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--fondo-2);
  color: var(--texto);
  /* Menos de 16px hace que iOS acerque la página al enfocar el campo. */
  font: inherit;
  font-size: var(--t-base);
}

.sala__buscar input:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

.sala__mas { display: block; margin: var(--e5) auto 0; }

.hilo__abrir {
  display: block;
  width: 100%;
  padding: var(--e3);
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: var(--arena);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}

.hilo__abrir:hover { color: var(--texto); }
.sala__candado-grande { margin: 0 0 var(--e2); font-size: 2.2rem; }

.sala-cerrada {
  margin: auto;
  max-width: 34rem;
  padding: clamp(var(--e7), 7vw, var(--e9)) var(--e6);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: var(--s2), var(--brillo);
  text-align: center;
}

.sala-cerrada h3 { font-size: var(--t-2xl); }
.sala-cerrada > p { margin: var(--e3) auto 0; max-width: 46ch; font-size: var(--t-md); color: var(--tenue); }

.sala-cerrada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
  margin-top: var(--e6);
}

/* Las páginas que solo se ven con cuenta (js/con-cuenta.js): sin ella, la
   tarjeta del candado en vez de lo demás. */
html[data-cuenta="no"] [data-con-cuenta],
html:not([data-cuenta="no"]) [data-sin-cuenta] { display: none !important; }

/* ---------- Fundadores ---------- */


.oferta { flex: none; text-align: right; }

.oferta__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--e1) var(--e3);
}

.oferta__precio strong {
  font-family: Archivo, sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.045em;
  background: linear-gradient(120deg, var(--arena-viva), var(--arena));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.oferta__precio s { font-size: var(--t-xl); color: var(--apagado); }
.oferta__nota { margin: var(--e2) 0 var(--e4); font-size: var(--t-sm); color: var(--tenue); }
.oferta__aviso { margin: var(--e3) 0 0; font-size: var(--t-sm); color: var(--arena-viva); }

@media (max-width: 720px) {
  .oferta { flex: 1 1 100%; min-width: 0; text-align: left; }
  .oferta__precio { justify-content: flex-start; }
  .oferta .boton { width: 100%; }
}

.plazas {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 6px 15px 6px 12px;
  margin-bottom: var(--e4);
  border: 1px solid rgba(240, 185, 104, .32);
  border-radius: var(--r-redondo);
  background: rgba(240, 185, 104, .09);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--arena-viva);
}

.plazas::before {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arena);
}

.plazas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--arena);
  opacity: .6;
  animation: latido 2.6s infinite;
  pointer-events: none;
}

.niveles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--e4);
}

.nivel {
  padding: var(--e6);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--nivel, var(--borde-vivo));
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.nivel:hover { transform: translateY(-3px); box-shadow: var(--s2), var(--brillo); }


.nivel__cuantos {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nivel, var(--arena));
}

.nivel h3 { margin: var(--e2) 0 0; font-size: var(--t-xl); }
.nivel > p { margin: var(--e2) 0 0; font-size: var(--t-md); color: var(--tenue); }

.nivel ul {
  display: grid;
  gap: var(--e2);
  margin: var(--e4) 0 0;
  padding-left: var(--e5);
  font-size: var(--t-md);
  color: #d4d4d4;
}

.nivel li::marker { color: var(--nivel, var(--arena)); }

.monumento {
  position: relative;
  margin-top: var(--e5);
  padding: clamp(var(--e6), 5vw, var(--e9));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.monumento > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monumento::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, .95) 30%, rgba(0, 0, 0, .6));
}

/* En vertical el degradado lateral no tapa nada: se cambia por uno plano. */
@media (max-width: 720px) {
  .monumento::after { background: linear-gradient(180deg, rgba(0, 0, 0, .93), rgba(0, 0, 0, .88)); }
}

.monumento > div { position: relative; z-index: 2; max-width: 54ch; }
.monumento h3 { font-size: var(--t-2xl); }

.monumento blockquote {
  margin: var(--e4) 0 0;
  padding-left: var(--e4);
  border-left: 2px solid var(--arena);
  font-family: Archivo, sans-serif;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.35;
}

.monumento p { margin: var(--e4) 0 0; font-size: var(--t-base); color: #d4d4d4; }

/* ---------- Estado del desarrollo ---------- */

.hitos { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.hito { position: relative; padding: 0 0 var(--e6) var(--e6); }

.hito::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fondo-2);
  border-radius: 50%;
  background: var(--borde-vivo);
}

.hito--hecho::before { background: var(--arena); }

.hito--ahora::before {
  background: var(--arena);
  box-shadow: var(--anillo-arena);
  animation: latido-hito 3s infinite;
  will-change: transform;
}

/* Igual que el de la etiqueta: escala en vez de sombra, para no repintar. */
@keyframes latido-hito {
  from, to { transform: scale(1); }
  50% { transform: scale(1.5); }
}

.hito h3 { margin-bottom: var(--e1); font-size: var(--t-lg); }
.hito p { margin: 0; font-size: var(--t-md); color: var(--tenue); }

.hito__marca {
  display: inline-block;
  margin-bottom: var(--e1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apagado);
}

.hito--hecho .hito__marca { color: var(--arena); }
.hito--ahora .hito__marca { color: var(--arena); }

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e9);
  align-items: start;
}

@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; gap: var(--e8); }
}

.ficha {
  padding: var(--e6);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
}

.ficha h3 { margin-bottom: var(--e4); font-size: var(--t-xl); }

.ficha dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3) var(--e5);
  margin: 0;
  font-size: var(--t-md);
}

.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; font-weight: 600; text-align: right; }

/* En columna estrecha los valores largos partían en tres líneas. */
@media (max-width: 540px) {
  .ficha dl { grid-template-columns: 1fr; gap: 0; }
  .ficha dt { margin-top: var(--e3); font-size: var(--t-sm); letter-spacing: .04em; }
  .ficha dt:first-of-type { margin-top: 0; }
  .ficha dd { text-align: left; }
}

.build {
  margin-bottom: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--arena);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
}

.build__fecha {
  margin: 0 0 var(--e1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--arena);
}

.build h3 { font-size: var(--t-xl); }
.build .boton { margin-top: var(--e4); }

/* Las anteriores, plegadas: su fecha y su nombre, y al abrirla lo demás. */
.build--plegada { padding: 0; border-left-color: var(--borde); box-shadow: none; }
.build--plegada > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 56px;
  padding: var(--e4) var(--e6);
  list-style: none;
  cursor: pointer;
}
.build--plegada > summary::-webkit-details-marker { display: none; }
.build--plegada > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--apagado);
  border-bottom: 2px solid var(--apagado);
  transform: rotate(45deg);
  transition: transform var(--medio) var(--curva);
}
.build--plegada[open] > summary::after { transform: rotate(-135deg); }
.build--plegada > summary h3 { margin: 0; font-size: var(--t-md); }
.build--plegada .build__fecha { margin: 0 0 2px; color: var(--apagado); }
.build__dentro { padding: 0 var(--e6) var(--e6); }

.franja-plana {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e6);
  align-items: center;
  justify-content: space-between;
  padding: var(--e7);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background:
    radial-gradient(110% 140% at 100% 0%, rgba(240, 185, 104, .1), transparent 60%),
    var(--superficie);
  box-shadow: var(--brillo);
}

.franja-plana h2 { max-width: 20ch; font-size: var(--t-2xl); }
.franja-plana p { margin: var(--e2) 0 0; max-width: 52ch; font-size: var(--t-md); color: var(--tenue); }

/* ---------- Panel de publicación ---------- */

.publicada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e2);
  padding: var(--e3) var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}

.publicada:hover { border-color: var(--borde-vivo); background: var(--superficie-2); }
.publicada strong { display: block; font-size: var(--t-md); }
.publicada__meta { font-size: var(--t-sm); color: var(--tenue); }
.publicada .sala__salir { flex: none; margin: 0; }
/* Lo programado lleva también «Publicar ya» (31-10-2026). */
.publicada__botones { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); }

/* ---------- La página de cada uno ---------- */

.perfil__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e6);
  margin-bottom: var(--e8);
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--borde);
}

.perfil__foto {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-2);
}

.perfil__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil__foto--fundador { box-shadow: 0 0 0 3px var(--arena); }

/* Sin foto, la silueta de img/jugador.svg sobre negro, la misma del recuadro
   de la sala. El borde, para que el círculo no se pierda en el retrato negro. */
.perfil__foto--vacia {
  border: 1px solid var(--borde-vivo);
  background: #000 url("/img/jugador.svg") center bottom / 80% auto no-repeat;
}

.perfil__cabeza h1 { font-size: var(--t-3xl); }
.perfil__correo { margin: var(--e2) 0 0; font-size: var(--t-md); color: var(--tenue); }
.perfil__estado { margin: var(--e3) 0 0; font-size: var(--t-md); color: var(--tenue); }

@media (max-width: 560px) {
  .perfil__cabeza { flex-direction: column; align-items: flex-start; gap: var(--e4); }
  .perfil__foto { width: 76px; height: 76px; }
}

/* Cada foto como se ve --la tuya redonda, el fondo a lo ancho-- y sus
   botones al lado. El selector de archivos va escondido y lo abre el botón. */
.subir { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; }
.subir__botones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Solo el color: sin foto, la silueta de .perfil__foto--vacia sigue debajo. */
.subir__vista { flex: none; overflow: hidden; background-color: var(--superficie-2); }
.subir__vista img { display: block; width: 100%; height: 100%; object-fit: cover; }
.subir__vista--redonda { width: 72px; height: 72px; border-radius: 50%; }
.subir__vista--ancha { width: 168px; aspect-ratio: 16 / 7; border: 1px solid var(--borde); border-radius: var(--r-md); }

.subir .boton { padding: 10px var(--e5); font-size: var(--t-sm); }

@media (max-width: 560px) {
  .subir__vista--ancha { width: 100%; }
  .subir__botones { flex: 1; }
  .subir__vista--ancha + .subir__botones .boton { flex: 1; }
}

/* ---------- Páginas legales ---------- */

.legal { padding: calc(var(--cabecera) + var(--e8)) 0 var(--e9); }
.legal .contenedor { max-width: 46rem; }
.legal h1 { margin: var(--e1) 0 var(--e4); font-size: var(--t-4xl); }
/* Letra algo más pequeña que el resto de la web y sin el acento: son páginas
   para consultar, no para que algo salte a la vista. */
.legal h2 { margin: var(--e7) 0 var(--e3); font-size: var(--t-lg); color: #e4e4e4; }
.legal h3 { margin: var(--e5) 0 var(--e2); font-size: var(--t-md); color: #d0d0d0; }
.legal p { font-size: var(--t-md); line-height: 1.75; color: #c4c4c4; }
.legal__entrada { font-size: var(--t-base); }
.legal strong { color: #dcdcdc; }
.legal a { color: inherit; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: currentColor; }
/* Un botón dentro de un texto legal (la descarga de /prensa) sigue siendo un
   botón: sin el color heredado ni el subrayado de los enlaces de al lado. */
.legal .boton--principal { color: var(--arena-honda); text-decoration: none; }
/* Los datos del titular: un botón que parece uno de esos enlaces, y lo que
   dibuja js/titular.js, que baja lo que subió para dejar sitio a las letras
   que cuelgan y queda sobre la línea del párrafo. */
.legal .ver-titular {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
}
.legal .ver-titular:hover { text-decoration-color: currentColor; }
.legal .ver-titular:disabled { cursor: progress; }
.legal .titular-dibujo { display: inline-block; vertical-align: -0.3em; max-width: 100%; height: auto; }

.legal ul {
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding-left: var(--e5);
  font-size: var(--t-md);
  line-height: 1.7;
  color: #c4c4c4;
}

.legal li::marker { color: var(--apagado); }
.legal .legal__fecha { margin-top: var(--e8); font-size: var(--t-sm); color: var(--apagado); }

/* ---------- Avances: el antes y el después, uno encima del otro ---------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--e7) var(--e4);
}

/* El texto va encima del vídeo, y los textos no miden todos lo mismo: sin esto
   los vídeos de una misma fila empezarían cada uno a una altura. Con subgrid,
   las cabeceras comparten fila y los vídeos también. */
.paso {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: var(--e4);
  align-content: start;
}

.comparador {
  --corte: 50%;
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--s2);
  /* Arrastrar la línea no debe llevarse el scroll de la página por delante. */
  touch-action: pan-y;
}

.comparador video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El "después" va encima, recortado desde la línea hacia la derecha. Lo que
   asoma por la izquierda es el "antes", que está debajo entero. */
.comparador__despues { clip-path: inset(0 0 0 var(--corte)); }

/* El mando ocupa la tarjeta entera y es invisible: se ve la línea, se arrastra
   el input. Siendo un range de verdad funciona con teclado sin añadir nada. */
.comparador__mando {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: none;
  opacity: 0;
  cursor: ew-resize;
}

.comparador__mando::-webkit-slider-thumb { appearance: none; width: 44px; height: 100%; }
.comparador__mando::-moz-range-thumb { width: 44px; height: 100%; border: 0; border-radius: 0; }

.comparador__tirador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 14px rgba(0, 0, 0, .7);
  pointer-events: none;
}

.comparador__tirador::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: rgba(0, 0, 0, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  backdrop-filter: blur(4px);
  box-shadow: var(--s2);
  transition: transform var(--rapido) var(--curva);
}

.comparador:hover .comparador__tirador::after { transform: translate(-50%, -50%) scale(1.08); }
.comparador__mando:focus-visible + .comparador__tirador::after { outline: 2px solid var(--arena); outline-offset: 4px; }

.comparador__marca {
  position: absolute;
  top: var(--e3);
  z-index: 2;
  padding: 4px 11px;
  border-radius: var(--r-redondo);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

.comparador--solo .comparador__despues { clip-path: none; }

.comparador__marca--antes { left: var(--e3); color: #d4d4d4; }
.comparador__marca--despues { right: var(--e3); color: var(--arena); }

/* Los pasos 20 y 24 no tienen vídeo y lo dicen. La tarjeta se queda solo con
   el texto, ocupando las dos filas que ocuparía una con vídeo. */
.paso--nota {
  grid-row: span 2;
  align-content: center;
  min-height: 14rem;
  padding: var(--e6);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.paso__cabeza { align-self: end; }

/* En una columna de doscientos y pico píxeles, un párrafo de cinco líneas sale
   como una tira. Donde caben cuatro columnas, la nota ocupa dos. */
@media (min-width: 62rem) {
  .paso--nota { grid-column: span 2; }
}

.paso__marca {
  margin: 0 0 var(--e1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arena);
}

.paso h2 { max-width: none; margin-bottom: var(--e2); font-size: var(--t-lg); }
.paso p { margin: 0; font-size: var(--t-md); color: var(--tenue); }


/* Al llegar por un enlace directo, la ficha se señala sola un momento: si no,
   el navegador te deja ahí y no sabes cuál de las tres de la pantalla es. */
.paso:target {
  outline: 2px solid var(--arena);
  outline-offset: var(--e3);
  border-radius: var(--r-md);
}

@supports not (grid-template-rows: subgrid) {
  .paso, .paso--nota { display: block; }
  .paso__cabeza { margin-bottom: var(--e4); }
}

.paso { scroll-margin-top: 5rem; }


/* ---------- Soporte (/soporte; Dani, 2-10-2026) ---------- */

.soporte { max-width: 46rem; }
/* Los títulos de una .seccion llevan 17ch de tope (estilo.css): aquí van centrados y a lo ancho. */
.soporte h1, .soporte h2 { max-width: none; }
.soporte__cabeza { margin-bottom: var(--e7); text-align: center; }
.soporte__cabeza .rotulo { justify-content: center; }
.soporte__cabeza h1 { margin: 0 0 var(--e3); font-size: var(--t-4xl); }
.soporte__entrada { max-width: 36rem; margin: 0 auto; font-size: var(--t-base); line-height: 1.6; color: var(--tenue); text-wrap: pretty; }

.soporte__tarjeta {
  padding: clamp(var(--e5), 4vw, var(--e7));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: var(--s3);
}
.soporte__tarjeta .soporte__titulo { margin: 0 0 var(--e5); font-size: var(--t-xl); }
.soporte .campo input[readonly] { color: var(--tenue); cursor: default; }
.soporte__pista { margin: var(--e2) 0 0; font-size: var(--t-sm); color: var(--apagado); }
.soporte__legal { margin: var(--e4) 0 0; font-size: var(--t-xs); text-align: center; color: var(--apagado); }
.soporte__enviado { padding: var(--e5) 0; text-align: center; }
.soporte__enviado svg { display: block; width: 52px; height: 52px; margin: 0 auto var(--e3); color: var(--arena); }
.soporte__enviado h2 { margin: 0 0 var(--e2); font-size: var(--t-2xl); }
.soporte__enviado p { margin: 0; color: var(--tenue); }

.soporte__ayuda { margin-bottom: var(--e7); }
.soporte__ayuda h2 { margin: 0 0 var(--e4); font-size: var(--t-lg); text-align: center; }
.soporte__ayuda ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.soporte__ayuda li {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}
.soporte__ayuda strong { font-size: var(--t-md); color: var(--texto); }
.soporte__ayuda span { flex: 1; font-size: var(--t-sm); line-height: 1.5; color: var(--tenue); }
.soporte__ayuda a { margin-top: var(--e2); font-size: var(--t-sm); font-weight: 600; color: var(--arena); text-decoration: none; }
.soporte__ayuda a:hover { text-decoration: underline; }
.soporte__contacto { margin: var(--e7) 0 0; font-size: var(--t-sm); text-align: center; color: var(--tenue); }
.soporte__lema { margin: var(--e2) 0 0; font-size: var(--t-xs); letter-spacing: .04em; text-align: center; color: var(--apagado); }

@media (max-width: 44rem) {
  .soporte__ayuda ul { grid-template-columns: 1fr; }
}

/* ---------- Verificación en dos pasos ---------- */

.campo__codigo {
  /* Seis cifras con el espaciado puesto: en 9ch se cortaban las dos últimas. */
  max-width: 12ch;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-xl);
  letter-spacing: .3em;
  text-align: center;
}

.dos-pasos p { margin: 0 0 var(--e4); }

.dos-pasos__qr {
  display: inline-block;
  margin: var(--e2) 0 var(--e5);
  padding: var(--e4);
  border-radius: var(--r-sm);
  /* El QR viene en blanco y negro: sobre el fondo oscuro de la web no lo lee
     ninguna cámara. Va sobre blanco a propósito. */
  background: #fff;
}

.dos-pasos__qr img {
  display: block;
  width: 172px;
  height: 172px;
}

.dos-pasos__clave {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-md);
  letter-spacing: .12em;
  color: var(--texto);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Debajo de descargar: que el antivirus no asuste (perfil.html). */
.aviso-antivirus {
  margin: var(--e4) 0 0;
  padding: var(--e4) var(--e5);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
}
.aviso-antivirus p { margin: 0; }
/* Plegado se queda en el título con su flecha, como los requisitos. */
.aviso-antivirus__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  font-weight: 700;
  color: var(--arena-viva);
  cursor: pointer;
  list-style: none;
}
.aviso-antivirus__titulo::-webkit-details-marker { display: none; }
.aviso-antivirus__titulo::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 4px 0 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--medio) var(--curva);
}
.aviso-antivirus[open] .aviso-antivirus__titulo { margin-bottom: var(--e2); }
.aviso-antivirus[open] .aviso-antivirus__titulo::after { margin-top: 3px; transform: rotate(-135deg); }
.aviso-antivirus:not([open]) { padding-block: var(--e3); }
.aviso-antivirus ul { margin: var(--e2) 0 0; padding-left: 1.2em; }
.aviso-antivirus__plegar {
  display: block;
  margin: var(--e3) 0 0 auto;
  padding: var(--e2) var(--e4);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.aviso-antivirus__plegar:hover { border-color: var(--arena-viva); color: var(--arena-viva); }

/* El canal de Telegram, solo para fundadores (Dani, 25-10-2026). Con su logo y en
   su azul: lo único azul de la web (el acento es la arena desde el 16-10), para
   que destaque. Sale en el perfil, la sala, #actualizaciones y la
   portada; al unirse deja de salir (comun.js). */
.telegram {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e4);
  margin: var(--e5) 0 0;
  padding: var(--e5);
  border: 1px solid rgb(42 171 238 / .42);
  border-radius: 18px;
  background: linear-gradient(160deg, rgb(42 171 238 / .17), rgb(42 171 238 / .05));
}
.telegram[hidden] { display: none; }
.telegram p { margin: 0; }
.telegram__logo { width: 40px; height: 40px; flex: none; }
.telegram__texto { display: grid; gap: var(--e1); }
.telegram__titulo { font-weight: 800; color: #7fcff7; }
.telegram__mandos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.telegram__boton {
  background: #2aabee;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 14px 30px -14px rgb(42 171 238 / .85), inset 0 1px 0 rgb(255 255 255 / .3);
}
.telegram__boton:hover { background: #3db5f2; transform: translateY(-2px); }
.telegram__dentro {
  padding: var(--e2) 0;
  border: 0;
  background: none;
  color: var(--tenue);
  font: inherit;
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.telegram__dentro:hover { color: var(--texto); }

/* Chico o chica, una vez, en la bienvenida (Dani, 25-10-2026). */
.pregunta-sexo[hidden] { display: none; }
.pregunta-sexo {
  margin: 0 0 var(--e6);
  padding: var(--e5);
  border: 1px solid rgb(240 185 104 / .35);
  border-radius: 18px;
  background: rgb(240 185 104 / .06);
}
.pregunta-sexo p { margin: 0; color: var(--tenue); }
.pregunta-sexo .pregunta-sexo__titulo { margin-bottom: var(--e2); font-family: var(--titular); font-size: var(--t-lg); font-weight: 700; color: var(--texto); }
.pregunta-sexo__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e4); }
.sala__lista .telegram { margin: 0 0 var(--e6); }
.sala__lista .telegram__boton { flex: 1; }
/* En franja, donde va de paso: la portada y #actualizaciones. */
.telegram--franja { margin: 0 0 var(--e6); }
@media (min-width: 760px) {
  .telegram--franja { grid-template-columns: auto 1fr auto; align-items: center; }
  .telegram--franja .telegram__mandos { grid-column: auto; flex-direction: column; align-items: center; gap: var(--e1); }
}

/* Recibe al que acaba de comprar (mi-copia.js). */
.compra-hecha {
  margin: 0 0 var(--e6);
  padding: var(--e4) var(--e5);
  border: 1px solid rgba(240, 185, 104, .35);
  border-radius: var(--r-md);
  background: rgba(240, 185, 104, .08);
  font-size: var(--t-md);
  color: var(--arena-viva);
}

.compra-hecha a { color: inherit; }
.compra-hecha ol { margin: var(--e2) 0 0; padding-left: 1.3em; color: var(--texto); }


/* Los pasos de la hoja de ruta eran h3 colgando de un h1, sin h2 en medio: un
   salto que los lectores de pantalla anuncian mal. Son h2 y se ven igual. */
.como-h3 {
  margin: 0 0 var(--e2);
  font-size: var(--t-lg);
  font-weight: 700;
}


/* La lupa, al lado de los temas, y el buscador plegado detrás de ella: abierto
   ocupa la línea de debajo (diseño 2; en el móvil ya era así desde el
   29-9-2026). */
.sala__lupa {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  background: transparent;
  color: #cfcfcf;
  cursor: pointer;
}

.sala__lupa:hover { border-color: var(--borde-vivo); color: var(--texto); }
.sala__lupa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sala__lupa[aria-expanded="true"] { border-color: var(--arena); color: var(--arena); }
.sala__lupa:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

@media (max-width: 820px) {
  .sala__barra small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}


/* Un canal con algo nuevo desde tu última visita. Sin esto había que abrir los
   quince para saber dónde había pasado algo. */
/* Lo nuevo dentro del canal: el mismo punto, en el tema, su montón y la
   opinión (Dani, 25-10-2026). */
.punto-nuevo { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--arena); vertical-align: middle; }
.mensaje__hora + .punto-nuevo, .idea__titulo .punto-nuevo { margin-left: var(--e2); }

.sala__punto {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--arena);
  flex-shrink: 0;
}

.sala__canal--nuevo { color: var(--texto); font-weight: 600; }


/* Lo que se ve mientras se averigua quién eres. Antes era negro a secas. */
.sala-abriendo {
  display: grid;
  place-items: center;
  gap: var(--e4);
  min-height: 60vh;
  color: var(--tenue);
}

.sala-abriendo p { margin: 0; font-size: var(--t-md); }

.sala-abriendo__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--arena);
  animation: sala-latir 1.2s ease-in-out infinite;
}

@keyframes sala-latir {
  from, to { transform: scale(1); opacity: .35; }
  50% { transform: scale(1.5); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sala-abriendo__punto { animation: none; opacity: .8; }
}


/* ---------- La edición de fundador ---------- */

.tramo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--e5);
  align-items: start;
}

/* Sin caja desde el 11-10-2026: el precio, como unos títulos de película entre
   dos filos de oro (css/fundadores.css). */
.tramo__ahora { text-align: center; }

.tramo__nombre {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arena);
}

.tramo__luego { margin: 0 0 var(--e5); font-size: var(--t-sm); color: var(--apagado); }
.tramo__ahora .boton { width: 100%; }

.tramo__letra {
  margin: var(--e4) 0 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--apagado);
}

/* Las listas de ventajas (el perfil, /juego). */

.ventajas { margin: 0; padding: 0; list-style: none; }

.ventajas li {
  display: flex;
  gap: var(--e3);
  padding: var(--e2) 0;
}

.ventajas strong { display: block; font-size: var(--t-md); color: var(--texto); }
.ventajas span { font-size: var(--t-sm); color: var(--tenue); }


/* ---------- La barra de compra pegada abajo ---------- */

/* Solo en móvil. En escritorio la tarjeta de precio se ve casi siempre y esto
   sobraría; aquí, en cuanto bajas dos dedos, el precio desaparece. */
.barra-compra { display: none; }

@media (max-width: 820px) {
  .barra-compra {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding: var(--e3) var(--e4);
    /* El hueco del indicador de inicio del iPhone, que si no se come el botón. */
    padding-bottom: max(var(--e3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde-vivo);
    background: rgba(16, 16, 16, .94);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .8);
    /* Escondida abajo hasta que la tarjeta de precio se sale de la pantalla. */
    transform: translateY(110%);
    transition: transform var(--medio) var(--curva);
  }

  .barra-compra--vista { transform: none; }

  .barra-compra__precio { flex: 1; min-width: 0; }

  .barra-compra__euros {
    display: flex;
    align-items: baseline;
    gap: var(--e2);
    margin: 0;
  }

  .barra-compra__euros s { font-size: var(--t-sm); color: var(--apagado); }
  .barra-compra__moneda { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--apagado); }

  .barra-compra__euros strong {
    font-family: Archivo, system-ui, sans-serif;
    font-size: var(--t-xl);
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--arena-viva);
  }

  .barra-compra__pista {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--tenue);
  }

  .barra-compra .boton {
    flex-shrink: 0;
    padding: var(--e3) var(--e5);
    font-size: var(--t-md);
  }

  /* El botón tapaba la cifra en otra moneda («$ 16.999 COP») y rozaba el «€»
     (14-10-2026): el precio de antes, encima, y el botón, más justo. */
  .barra-compra .barra-compra__euros { flex-wrap: wrap; row-gap: 0; }
  .barra-compra .barra-compra__euros s { flex-basis: 100%; line-height: 1.2; }
  .barra-compra .barra-compra__euros strong { white-space: nowrap; }
  .barra-compra .boton { padding-inline: var(--e4); font-size: var(--t-sm); }

  /* Sin esto la barra tapa el final de la página, que es justo donde están el
     aviso legal y los enlaces del pie. */
  html:not([data-cuenta="no"]) body.con-barra-compra .pie { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-compra { transition: none; }
}


/* El titular del bloque de precio: lo que se pierde si esperas. */
.tramo__perdida {
  margin: 0 0 var(--e3);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--texto);
}


/* ---------- La marquita (la sala y el panel) ---------- */

.marquita {
  padding: 2px var(--e2);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apagado);
}

.marquita--admin { background: rgba(240, 185, 104, .16); color: var(--arena); }
.marquita--fundador { background: rgba(240, 185, 104, .16); color: var(--arena); }
.marquita--parado { background: rgba(226, 114, 92, .16); color: var(--alarma); }


/* ---------- Las pestañas (el perfil, los mensajes y el panel) ---------- */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0 0 var(--e6);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borde);
}

.pestana {
  min-height: 42px;
  padding: var(--e2) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--r-redondo);
  background: none;
  color: var(--tenue);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}

.pestana:hover { color: var(--texto); background: var(--superficie); }
.pestana:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

/* En el perfil, repartidas a lo ancho de la tarjeta de arriba (Dani, 2-10-2026). */
.pestanas--a-lo-ancho .pestana { flex: 1 1 auto; }

.pestana--puesta {
  border-color: var(--borde-vivo);
  background: var(--superficie-2);
  color: var(--texto);
}

/* ---------- La clave de activación del juego ---------- */

.activacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  margin: var(--e4) 0 var(--e5);
}

/* Monoespaciada y separada: esto se lee de una pantalla y se teclea en otra, y
   una clave apretada en una proporcional se copia mal. */
.activacion__clave {
  padding: 12px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: .13em;
  color: var(--arena-viva);
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  user-select: all;
}

.activacion__clave--tapada { color: var(--tenue); letter-spacing: .3em; }

.equipo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) 0;
  border-top: 1px solid var(--borde);
}

.equipo__que { font-size: .875rem; }
.equipo__cuando { font-size: .8125rem; color: var(--tenue); }

.enlace-suelto {
  padding: 0; font: inherit; color: var(--arena);
  background: none; border: 0; border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.enlace-suelto:hover { color: var(--texto); }

/* ---------- Abrir un tema ---------- */

.nuevo-tema {
  margin-bottom: var(--e5);
  padding: var(--e4);
  background: var(--fondo-2);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-md);
}

/* De trazo discontinuo y no relleno: se lee como un hueco por rellenar y no
   como un mensaje más, que es justo lo que es. */
.nuevo-tema__abrir {
  width: 100%;
  padding: var(--e3);
  font: inherit; font-size: var(--t-md); font-weight: 600;
  color: var(--tenue);
  text-align: left;
  background: none; border: 0;
  cursor: pointer;
}
.nuevo-tema__abrir:hover { color: var(--arena-viva); }

.nuevo-tema__form { display: flex; flex-direction: column; gap: var(--e3); }

/* Los temas que se parecen a lo que se escribe, para no repetirlo (Dani,
   25-10-2026). */
.nuevo-tema__parecidos[hidden] { display: none; }
.nuevo-tema__parecidos {
  padding: var(--e3) var(--e4);
  border: 1px solid rgb(240 185 104 / .35);
  border-radius: var(--r-md);
  background: rgb(240 185 104 / .06);
}
.parecidos__pregunta { margin: 0 0 var(--e2); font-size: var(--t-sm); font-weight: 700; color: var(--arena); }
.parecidos__lista { display: flex; flex-direction: column; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.parecidos__lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.parecidos__uno { min-width: 0; color: var(--texto); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(240 185 104 / .5); text-underline-offset: 3px; }
.parecidos__uno:hover { color: var(--arena); }
/* El buscador de la sala, en toda la comunidad (26-10-2026): la misma caja. */
.en-toda {
  margin-bottom: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid rgb(240 185 104 / .35);
  border-radius: var(--r-md);
  background: rgb(240 185 104 / .06);
}
.parecidos__corazones { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 700; color: var(--arena); }

/* La categoría de #bugs y #deseos (Dani, 25-10-2026): se elige al escribir con
   los mismos botones que filtran, y luego sale en cada tema como una cápsula. */
.nuevo-tema__categorias { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.nuevo-tema__pregunta { flex-basis: 100%; margin: 0; color: var(--tenue); font-size: var(--t-sm); font-weight: 700; }
.nuevo-tema__categorias--falta .nuevo-tema__pregunta { color: var(--arena); }
.nuevo-tema__categorias--falta .temas__uno { border-color: rgb(240 185 104 / .6); }
.categoria {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 var(--e2);
  padding: 2px var(--e3);
  border: 1px solid rgb(240 185 104 / .35);
  border-radius: 999px;
  background: rgb(240 185 104 / .08);
  color: var(--arena);
  font-size: var(--t-xs);
  font-weight: 700;
}
.idea-hilo > .categoria { display: inline-block; }

/* #novedades (Dani, 27-10-2026): buscar qué tema lo pidió al publicar, y el
   recuadro «Lo pedisteis» con quien lo pidió y el botón a su tema. */
.nuevo-tema__pedido { display: flex; flex-direction: column; gap: var(--e2); }
.nuevo-tema__hallados:empty, .nuevo-tema__elegido:empty { display: none; }
.nuevo-tema__hallados { display: flex; flex-direction: column; gap: 4px; }
.nuevo-tema__hallado {
  padding: 8px var(--e3);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / .03);
  color: inherit;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}
.nuevo-tema__hallado:hover, .nuevo-tema__hallado:focus-visible { border-color: rgb(240 185 104 / .6); outline: none; }
.nuevo-tema__elegido { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.nuevo-tema__cual { color: var(--arena); font-size: var(--t-sm); font-weight: 700; }
.lo-pedisteis {
  margin: var(--e3) 0 0;
  padding: var(--e3) var(--e4);
  border: 1px solid rgb(240 185 104 / .35);
  border-radius: var(--r-md);
  background: rgb(240 185 104 / .06);
}
.lo-pedisteis__titulo { margin: 0; color: var(--arena); font-size: var(--t-sm); font-weight: 700; }
.lo-pedisteis__quien { margin: 4px 0 0; color: var(--tenue); font-size: var(--t-sm); }
.lo-pedisteis__quien:empty { display: none; }
.lo-pedisteis__quien strong { color: var(--texto, inherit); }
.lo-de-normas { margin: var(--e3) 0 0; }

/* La categoría y lo solucionado, juntas (Dani, 25-10-2026). */
.marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e2); }
.marcas > .categoria { margin: 0; }
.resuelto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 2px var(--e3);
  border: 1px solid rgb(98 196 140 / .4);
  border-radius: 999px;
  background: rgb(98 196 140 / .1);
  color: var(--bien);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}
.resuelto svg { flex: none; }
/* «Lo estamos mirando» (26-10-2026): en arena, que aún no está hecho. */
.resuelto--mirando {
  border-color: rgb(240 185 104 / .4);
  background: rgb(240 185 104 / .1);
  color: var(--arena);
}
/* En la fila plegada, al lado del título; en el móvil, debajo. */
.resuelto--fila { flex: none; }

.nuevo-tema__titulo,
.nuevo-tema__cuerpo {
  width: 100%;
  padding: var(--e3) var(--e4);
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
}
.nuevo-tema__titulo { font-weight: 700; font-size: var(--t-lg); }
.nuevo-tema__cuerpo { line-height: 1.6; resize: vertical; min-height: 96px; }
.nuevo-tema__titulo:focus, .nuevo-tema__cuerpo:focus { outline: none; border-color: var(--arena); }

.nuevo-tema__pie { display: flex; align-items: center; gap: var(--e4); }

/* Las fotos de un tema: hasta cuatro, al elegirlas y ya publicadas (5-10-2026). */
.nuevo-tema__fotos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.nuevo-tema__foto { position: relative; margin: 0; width: 96px; height: 96px; }
.nuevo-tema__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--borde); }
.nuevo-tema__quitar {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgb(0 0 0 / .7); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.nuevo-tema__quitar:focus-visible { outline: 2px solid var(--arena-viva); outline-offset: 2px; }

.entrada__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e3); margin-top: var(--e4); }
.entrada__fotos a { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--borde); background: #000; }
.entrada__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* #novedades: la foto enseña la novedad, grande y encima de la frase (Dani, 28-10-2026). */
.entrada__fotos--novedad { grid-template-columns: 1fr; margin: var(--e3) 0 var(--e4); }
.entrada__fotos--novedad:has(> a + a) { grid-template-columns: repeat(2, 1fr); }
.entrada__fotos--novedad > a:only-child { aspect-ratio: 16 / 9; }
.nuevo-tema__fotos > .nuevo-tema__pregunta { flex-basis: 100%; }
.nuevo-tema__fotos--falta > .nuevo-tema__pregunta { color: var(--arena); }

/* ---------- Quién abrió el tema ---------- */

.mensaje__avatar--fundador { border: 2px solid var(--arena); }

/* El desarrollador: una sola cuenta. Anillo con brillo, nombre en el acento,
   su marca, y lo que escribe con filo y un fondo que se apaga hacia la derecha.
   Era azul, para no confundirlo con los fundadores; desde el 16-10-2026 va en el
   amarillo como todo el acento (Dani), y lo distingue su marca «desarrollador». */
.mensaje__avatar--desarrollador {
  border: 2px solid var(--arena);
  background: linear-gradient(160deg, var(--arena-viva), var(--arena));
  color: var(--arena-honda);
  box-shadow: 0 0 14px rgba(240, 185, 104, .45);
}

.comentario__avatar--desarrollador {
  box-shadow: 0 0 0 2px var(--arena), 0 0 12px rgba(240, 185, 104, .45);
  color: var(--arena);
}

.nombre--desarrollador { color: var(--arena); }

/* La cápsula del desarrollador, en blanco (Dani, 24-10-2026): la arena es de los fundadores. */
.marquita--desarrollador { background: rgba(255, 255, 255, .14); color: #fff; }

.insignia--desarrollador {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.entrada--desarrollador,
.comentario--desarrollador {
  padding-left: var(--e4);
  border-left: 2px solid var(--arena);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, rgba(240, 185, 104, .08), rgba(240, 185, 104, 0) 70%);
}

.comentario--desarrollador { padding-top: var(--e2); padding-bottom: var(--e2); }
.mensaje__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.marquita--casa { color: var(--arena); }

.entrada__borrar {
  margin-left: auto;
  padding: 0;
  font: inherit; font-size: var(--t-sm);
  color: var(--apagado);
  background: none; border: 0;
  cursor: pointer;
}
.entrada__borrar:hover { color: var(--alarma); }

/* Un artículo: la publicación con foto (el devhub). La semana a la izquierda,
   grande y de contorno; en medio el título, quién y cuándo, y la entradilla; y
   la foto a la derecha (diseño 2, Dani 6-10-2026). En el móvil, la foto
   encima. */
.entrada--articulo {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 250px);
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid #1d1d1d;
}

.entrada__semana {
  display: flex;
  flex-direction: column;
  font-family: var(--titular);
  font-size: 62px;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.3px rgb(255 255 255 / .5);
}

.entrada__semana small { font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }

/* La última, en dorado. */
.entrada--articulo:first-of-type .entrada__semana { -webkit-text-stroke-color: rgb(240 185 104 / .85); }

.entrada__foto {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--fondo-2);
}
.entrada__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--medio) var(--curva);
}
.entrada--articulo:hover .entrada__foto img { transform: scale(1.03); }
.entrada__texto { min-width: 0; }
.entrada--articulo .entrada__titulo {
  margin: 0;
  font-family: var(--titular);
  font-size: clamp(1.25rem, .6vw + 1.05rem, 1.55rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.entrada--articulo .entrada__titulo a { color: inherit; text-decoration: none; }
.entrada--articulo .entrada__titulo a:hover { color: var(--arena-viva); }

/* «Week 56:» delante del titular del devhub: dice qué semana es sin quitarle
   el sitio. Encima de la foto de un artículo, un punto más clara, o se pierde. */
.semana { color: var(--apagado); }
.articulo__cabeza .semana { color: var(--tenue); }
.entrada__meta { margin: var(--e2) 0 0; font-size: var(--t-sm); color: var(--apagado); }
/* El acento de la web es el amarillo, también para quien firma (Dani, 4-10-2026). */
.entrada__meta strong { font-weight: 700; color: var(--arena-viva); }
.entrada--articulo .entrada__cuerpo { margin-top: var(--e3); font-size: var(--t-sm); line-height: 1.6; color: var(--tenue); }
.entrada__pie { display: flex; align-items: center; gap: var(--e4); margin-top: var(--e3); }
.entrada__comentar {
  padding: 0;
  font: inherit; font-size: var(--t-sm); font-weight: 700;
  color: var(--arena);
  background: none; border: 0;
  cursor: pointer;
}
.entrada__comentar:hover { color: var(--arena-viva); }
.entrada--articulo .entrada__borrar { margin-left: 0; }
.entrada--articulo .hilo { margin-top: var(--e4); }

@media (max-width: 1100px) {
  .entrada--articulo { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 200px); gap: 22px; }
  .entrada__semana { font-size: 48px; }
  .entrada__semana small { font-size: 16px; }
}

@media (max-width: 40rem) {
  .entrada--articulo { grid-template-columns: 1fr; gap: var(--e3); }
  .entrada--articulo .entrada__foto { order: -1; }
  .entrada__semana { flex-direction: row; align-items: baseline; gap: .3em; font-size: 34px; }
  .entrada__semana:empty { display: none; }
  .entrada__semana small { font-size: 15px; }
}

/* Los temas de un canal (el devhub), para quedarse con uno. */
.temas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
.temas:empty { display: none; }
.temas__uno {
  min-height: 36px;
  padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: #cfcfcf;
  background: transparent;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  cursor: pointer;
}
.temas__uno:hover { color: var(--texto); border-color: var(--borde-vivo); }
.temas__uno[aria-pressed="true"] { color: var(--arena); background: rgb(240 185 104 / .12); border-color: var(--arena); font-weight: 700; }

/*
 * Los montones de #bugs (Dani, 25-10-2026, diseño 4 «Por grupos»): una tarjeta
 * por montón con su número, su nombre y sus títulos en una línea; dentro, los
 * temas plegados. Lo de dentro de un tema es la entrada de siempre, sin su
 * título (ya está en la fila) y sin raya debajo.
 */
.montones { display: flex; flex-direction: column; gap: var(--e3); }
.monton { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden; }
.monton--abierto { border-color: var(--borde-vivo); }
.monton__cabeza {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e5);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.monton__cabeza:hover { background: var(--superficie-2); }
.monton__cuantos {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--arena-honda);
  color: var(--arena);
  font-family: var(--titular);
  font-size: 1.25rem;
  font-weight: 800;
}
.monton__texto { flex: 1; min-width: 0; }
.monton__nombre { display: block; font-family: var(--titular); font-size: var(--t-xl); font-weight: 700; line-height: 1.2; }
.monton__titulos { display: block; margin-top: var(--e1); font-size: var(--t-sm); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monton__titulo + .monton__titulo::before { content: ' · '; }
.monton__cuando { flex: none; font-size: var(--t-sm); color: var(--apagado); }
/* En #deseos, los corazones de todo el montón en lugar de la hora: se ven, no
   se votan (Dani, 25-10-2026). Salen también en el móvil. */
.monton__corazones { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm); font-weight: 700; color: var(--arena); }
.monton__flecha { flex: none; display: flex; color: var(--apagado); transition: transform .2s; }
.monton--abierto .monton__flecha { transform: rotate(180deg); color: var(--arena); }
.monton__temas { border-top: 1px solid var(--borde); }

.tema-fila { border-bottom: 1px solid #1c1c1c; }
.tema-fila:last-child { border-bottom: 0; }
.tema-fila__boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e5) var(--e3) 82px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tema-fila__boton:hover { background: var(--superficie-2); }
.tema-fila__titulo { flex: 1; font-family: var(--titular); min-width: 0; font-size: var(--t-base); font-weight: 600; line-height: 1.3; }
.tema-fila--abierta .tema-fila__titulo { color: var(--arena); }
.tema-fila__comentarios { flex: none; display: flex; align-items: center; gap: 5px; font-size: var(--t-sm); color: var(--apagado); }
/* Con comentarios sin ver, en arena hasta que se abre el tema (Dani, 26-10-2026). */
.tema-fila__comentarios.sin-ver, .entrada__comentar.sin-ver { color: var(--arena); font-weight: 700; }
.tema-fila__dentro { padding: 0 var(--e5) var(--e5) 82px; }

/* La fila del desarrollador: el botón, y a su derecha las cápsulas del estado
   con las vistas y los comentarios (Dani, 26-10-2026). */
.tema-fila__cabeza { display: flex; align-items: center; gap: var(--e3); padding-right: var(--e5); }
.tema-fila__cabeza:hover { background: var(--superficie-2); }
.tema-fila__cabeza > .tema-fila__boton { flex: 1; min-width: 0; padding-right: 0; }
.tema-fila__cabeza > .tema-fila__boton:hover { background: none; }
.tema-fila__lado { flex: none; display: flex; align-items: center; gap: var(--e4); }
.tema-fila__cifras { display: flex; align-items: center; gap: var(--e3); cursor: pointer; }
.estados { display: flex; align-items: center; gap: 6px; }
.estado {
  padding: 2px var(--e3);
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: none;
  color: var(--apagado);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.estado:hover { color: var(--texto); border-color: var(--apagado); }
.estado:disabled { opacity: .5; cursor: wait; }
.estado--revision.estado--puesto { border-color: rgb(240 185 104 / .4); background: rgb(240 185 104 / .1); color: var(--arena); }
.estado--hecho.estado--puesto { border-color: rgb(98 196 140 / .4); background: rgb(98 196 140 / .1); color: var(--bien); }
.tema-fila__dentro .entrada { padding: 0; border-bottom: 0; }
.tema-fila__dentro .entrada__titulo { display: none; }
.montones__nota { margin: var(--e3) 0 0; font-size: var(--t-sm); color: var(--apagado); }

/* Los temas del desarrollador, fijados encima del nombre del canal: el diseño
   «Fondo arena», solo con el título (Dani, 26-10-2026). */
.fijados { display: flex; flex-direction: column; gap: 10px; }
.fijados[hidden] { display: none; }
.sala__barra > .fijados { flex: 1 0 100%; min-width: 0; }
.tema-fila.fijado { border: 1px solid transparent; border-radius: var(--r-md); overflow: hidden; }
.tema-fila.fijado.tema-fila--abierta { border-color: var(--arena); background: var(--superficie); }
.fijado .fijado__boton {
  align-items: center;
  gap: var(--e4);
  padding: 18px 20px;
  background: var(--arena);
  color: #1a1206;
}
.fijado .fijado__boton:hover { background: #f4c582; }
.fijado__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fijado__arriba { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fijado__capsula {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #1a1206;
  color: var(--arena);
  font-size: var(--t-xs);
  font-weight: 600;
}
.fijado .punto-nuevo { width: 8px; height: 8px; background: #1a1206; }
/* Lo programado (31-10-2026): sobre el arena del fijado, en oscuro y de contorno. */
.fijado .resuelto { border-color: rgb(26 18 6 / .45); background: transparent; color: #1a1206; }
.fijado .fijado__titulo, .tema-fila--abierta .fijado__titulo { flex: none; color: #1a1206; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.fijado__cuantos { flex: none; display: flex; flex-direction: column; align-items: center; }
.fijado__cifra { font-family: var(--titular); font-size: 1.375rem; font-weight: 800; line-height: 1.1; }
.fijado__palabra { font-size: var(--t-xs); color: #4a3518; }
.fijado .traducido { color: #4a3518; }
.fijado .tema-fila__dentro { padding: var(--e5); }
/* Ya lo dice la tarjeta: dentro, sin la raya del desarrollador. */
.fijado .tema-fila__dentro .entrada--desarrollador { padding-left: 0; border-left: 0; background: none; }

@media (max-width: 820px) {
  .monton__cabeza { gap: var(--e3); padding: var(--e4); }
  .monton__cuantos { width: 38px; height: 38px; font-size: 1.05rem; }
  .cuenta__dentro { padding: var(--e4); }
  .monton__cuando { display: none; }
  .tema-fila__boton { padding: var(--e3) var(--e4); }
  .tema-fila__dentro { padding: 0 var(--e4) var(--e4); }
  /* En el móvil, las cápsulas del estado van debajo del título. */
  .tema-fila__cabeza { flex-wrap: wrap; row-gap: 0; padding-right: var(--e4); }
  .tema-fila__lado { display: contents; }
  .estados { order: 3; flex-basis: 100%; padding: 0 0 var(--e3) var(--e4); }
  .fijado .fijado__boton { gap: var(--e3); padding: var(--e4); }
  .fijado .fijado__titulo, .tema-fila--abierta .fijado__titulo { font-size: 1.125rem; }
  .fijado .tema-fila__dentro { padding: var(--e4); }
  /* La marca de solucionado, en su propia línea bajo el título: al lado lo
     dejaba en tres palabras por renglón. */
  .tema-fila__boton:has(.resuelto--fila) { flex-wrap: wrap; row-gap: 0; }
  .tema-fila__boton:has(.resuelto--fila)::after { content: ""; flex-basis: 100%; order: 1; }
  .resuelto--fila { order: 2; margin-top: var(--e2); }
}
@media (prefers-reduced-motion: reduce) {
  .entrada__foto img { transition: none; }
}


/* ---------- El perfil por pestañas ---------- */

/*
 * El retrato, la mezcla A (Dani, 29-10-2026): una portada con tu fondo que se
 * funde en negro, y encima una tarjeta con tu foto saliendo por arriba, tu
 * nombre, tus insignias y tus cuatro cifras. En el móvil la portada va de
 * borde a borde; en el ordenador, redondeada y con la tarjeta centrada.
 */
.retrato {
  position: relative;
  isolation: isolate;
  margin-bottom: var(--e5);
  padding-top: 196px;
}

.retrato__fondo,
.retrato__velo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 300px;
  border-radius: var(--r-lg);
}

.retrato__fondo { object-fit: cover; object-position: center 42%; z-index: -2; }

/* Oscuro arriba para que se lea «Cerrar sesión», limpio en medio y negro
   abajo, donde entra la tarjeta. */
.retrato__velo {
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / .2) 60%, var(--fondo) 100%);
}

/* Cerrar sesión, arriba a la derecha de la portada: pequeño y de cristal. */
.retrato__salir {
  position: absolute;
  top: var(--e4);
  right: var(--e4);
  z-index: 1;
  min-height: 36px;
  padding: 6px var(--e4);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-redondo);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.retrato__salir:hover { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .28); }
.retrato__salir:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

.retrato__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 560px;
  margin: 0 auto;
  padding: 66px var(--e5) var(--e4);
  border: 1px solid #262626;
  border-radius: 22px;
  background: #0d0d0d;
  text-align: center;
}

/* Tu foto, a caballo del borde de la tarjeta; el aro, dorado si eres fundador. */
.retrato__aro {
  position: absolute;
  top: -54px;
  left: 50%;
  width: 108px;
  height: 108px;
  margin-left: -54px;
  padding: 4px;
  border-radius: 50%;
  background: #363636;
}
.retrato__aro:has(.perfil__foto--fundador) { background: conic-gradient(#ffd08a, #f0b968, #8a5a1c, #ffd08a); }
.retrato .perfil__foto { width: 100%; height: 100%; border: 4px solid #0d0d0d; box-shadow: none; }
.perfil__foto.con-ficha { cursor: pointer; }
.perfil__foto.con-ficha:focus-visible { outline: 2px solid var(--arena); outline-offset: 4px; }

.retrato__tarjeta h1 { max-width: none; margin: 0; font-size: 24px; letter-spacing: -.3px; overflow-wrap: anywhere; }
.retrato__usuario { margin: -2px 0 0; font-size: var(--t-sm); color: #a8a8a8; }
/* «@tu_nombre · En la isla desde oct 2026»; si no cabe, la fecha baja entera. */
.retrato__desde { display: inline-block; white-space: nowrap; }
#arroba:not([hidden]) + .retrato__desde::before { content: '·'; margin: 0 6px; }

/* Fundador (en oro) o miembro, y tu rango, que lleva a tus logros. */
.retrato__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.retrato__estado { display: contents; }
.retrato .insignia {
  margin: 0;
  padding: 5px 10px;
  border-color: #f0b968;
  background: #f0b968;
  color: #2a1a05;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.retrato__chip {
  padding: 4px 10px;
  border: 1px solid rgb(240 185 104 / .5);
  border-radius: var(--r-redondo);
  color: var(--arena);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
a.retrato__chip:hover { border-color: var(--arena); }
.retrato__chip--gris { border-color: #363636; color: #d6d6d6; }

/* Seguidores, amigos, logros y horas, separados por rayas. */
.retrato__cuatro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid #262626;
}
.retrato__cuatro > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  color: inherit;
  text-decoration: none;
}
.retrato__cuatro > * + * { border-left: 1px solid #262626; }
.retrato__cuatro strong { font-family: Archivo, sans-serif; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.retrato__cuatro span { font-size: 11px; color: #a8a8a8; }
.retrato__cuatro a:hover strong { color: var(--arena); }
.retrato__cuatro a:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; border-radius: 6px; }

/* Las secciones en círculos, como las historias destacadas: El juego,
   Fundador, Historia, Mensajes y Mi cuenta. Son pestañas (js/pestanas.js). */
.circulos {
  display: flex;
  justify-content: center;
  gap: var(--e4);
  margin: 0 auto var(--e6);
}
.circulo.pestana {
  flex: 0 1 66px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--texto);
  text-decoration: none;
}
.circulo.pestana:hover,
.circulo.pestana--puesta { background: none; }
.circulo[hidden] { display: none; }
.circulo__aro {
  position: relative;
  display: block;
  width: 100%;
  max-width: 62px;
  aspect-ratio: 1;
  padding: 3px;
  border: 2px solid var(--arena);
  border-radius: 50%;
  transition: box-shadow var(--rapido) var(--curva);
}
.circulo--gris .circulo__aro { border-color: #363636; }
.circulo__dentro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #0d0d0d;
}
.circulo__dentro img { width: 100%; height: 100%; object-fit: cover; }
.circulo__dentro svg { width: 24px; height: 24px; }
.circulo__nombre { font-size: 12px; font-weight: 500; white-space: nowrap; }
.circulo:hover .circulo__aro { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px rgb(240 185 104 / .4); }
.circulo.pestana--puesta .circulo__aro { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--arena); }
.circulo.pestana--puesta .circulo__nombre { color: var(--arena); font-weight: 700; }
.circulo .mensajes__cuenta { position: absolute; top: -4px; right: -6px; }

/* Tus últimos temas, del ancho de la tarjeta. */
.hoja--temas { max-width: 560px; margin-inline: auto; }
.temas-mios__titulo { max-width: none; margin: 0 0 var(--e4); font-size: var(--t-xl); }
.temas-mios { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tema-mio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #262626;
  border-radius: 16px;
  background: #0d0d0d;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--rapido) var(--curva);
}
.tema-mio:hover { border-color: #3a3a3a; }
.tema-mio:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }
.tema-mio__foto {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: #1a1a1a;
  color: var(--arena);
  font-family: Archivo, sans-serif;
  font-size: 24px;
  font-weight: 800;
}
.tema-mio__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tema-mio__meta { font-size: 12px; font-weight: 600; color: var(--arena); }
.tema-mio strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.temas-mios__vacio,
.temas-mios__nada { text-align: center; color: var(--tenue); }
.temas-mios__vacio .boton { margin-top: var(--e3); }

/* En el móvil, la portada de borde a borde y pegada a la cabecera, y la
   tarjeta a 16 px de cada lado, como en el diseño. */
@media (max-width: 720px) {
  .retrato {
    margin-top: calc(-1 * var(--e6));
    margin-inline: calc(50% - 50vw);
    padding: 156px 16px 0;
  }
  .retrato__fondo,
  .retrato__velo { height: 250px; border-radius: 0; }
  .retrato__salir { top: calc(12px + env(safe-area-inset-top)); right: 16px; }
  .circulos { gap: 12px; }

  /* Sin la cabecera de la web: con la sesión abierta, el perfil empieza en tu
     portada, como una aplicación (Dani, 29-10-2026). Como en el chat. */
  html:has(#panel:not([hidden])) .cabecera { display: none; }
  html:has(#panel:not([hidden])) { --cabecera: 0px !important; }
}

/* En los móviles más estrechos, los nombres largos («Mi cuenta») bajan a dos líneas. */
@media (max-width: 359px) {
  .circulos { gap: 8px; }
  .circulo__nombre { white-space: normal; text-align: center; line-height: 1.2; }
  /* La fecha no cabe al lado del @: baja a su línea, sin el punto delante. */
  .retrato__desde { display: block; }
  #arroba:not([hidden]) + .retrato__desde::before { content: none; }
}


/* Los seis fondos de la isla, en dos filas de tres; el puesto, con el borde arena. */
.fondos__titulo { margin: var(--e4) 0 var(--e2); font-size: var(--t-sm); color: var(--texto-suave, #a8a8a8); }
.fondos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.fondos__uno {
  display: block;
  padding: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: #0d0d0d;
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.fondos__uno img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fondos__uno:hover { border-color: #363636; }
.fondos__uno[aria-pressed="true"] { border-color: var(--arena); }
.fondos__uno:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }
.fondos[aria-busy="true"] .fondos__uno { opacity: .5; pointer-events: none; }


/* ---------- Tu copia ---------- */

.caratula {
  display: flex;
  gap: var(--e6);
  align-items: flex-start;
}

/* La sombra y el borde claro de arriba imitan un estuche: es una carátula, y
   plana sobre el fondo negro no se lee como un objeto. */
.caratula__imagen {
  flex: none;
  width: 300px; height: auto;
  border-radius: var(--r-md);
  border-top: 1px solid rgb(255 255 255 / .18);
  box-shadow: 0 18px 44px rgb(0 0 0 / .6);
}

.caratula__ficha { flex: 1 1 18rem; min-width: 0; }
/* `max-width` explicito en los dos: toda esta pagina vive dentro de un
   <main class="seccion">, y `.seccion h2` recorta a 17ch. */
.caratula__ficha h2 { max-width: none; margin: 4px 0 var(--e4); font-size: var(--t-2xl); }
.caratula__estado { margin: 0 0 var(--e3); }
.caratula__detalle { margin: 0 0 var(--e5); color: var(--tenue); }
.caratula__botones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.caratula__botones:empty { display: none; }

.caratula__datos {
  margin: var(--e6) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}

.caratula__datos > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding: 7px 0;
}

.caratula__datos dt { color: var(--apagado); font-size: var(--t-md); }
.caratula__datos dd { margin: 0; text-align: right; font-size: var(--t-md); font-weight: 600; }

/* La casilla de las actualizaciones, en la ficha: con la raya de las filas de
   arriba y sin el recuadro de los formularios. */
.ajuste-copia {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}
.ajuste-copia .casilla { margin: 0; padding: 0; border: 0; }
.ajuste-copia .casilla:hover { background: none; }
.casilla__titulo { display: block; font-weight: 600; color: var(--texto); }
.casilla__nota { display: block; margin-top: 3px; font-size: var(--t-sm); line-height: 1.5; color: var(--tenue); }
.ajuste-copia__estado { margin: var(--e2) 0 0 calc(18px + var(--e3)); font-size: var(--t-sm); color: var(--arena); }

/* «Cómo funciona», plegado debajo de la casilla y a la altura de su texto. */
.ajuste-copia__mas { margin: var(--e2) 0 0 calc(18px + var(--e3)); }
.ajuste-copia__mas summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-sm);
  color: var(--apagado);
  cursor: pointer;
  list-style: none;
}
.ajuste-copia__mas summary::-webkit-details-marker { display: none; }
.ajuste-copia__mas summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--medio) var(--curva);
}
.ajuste-copia__mas[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.ajuste-copia__mas summary:hover { color: var(--texto); }
.ajuste-copia__mas .casilla__nota { margin: var(--e2) 0 0; }
.ajuste-copia__estado:empty { display: none; }
.ajuste-copia__estado--fallo { color: #f0947f; }

/* Los requisitos: mínimos y recomendados lado a lado, y uno debajo de otro
   cuando no caben. */
.requisitos {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}

/* Plegados: casi nadie los mira dos veces, y empujaban la copia hacia abajo. */
.requisitos__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-md);
  color: var(--apagado);
  cursor: pointer;
  list-style: none;
}
.requisitos__titulo::-webkit-details-marker { display: none; }
.requisitos__titulo::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--medio) var(--curva);
}
.requisitos[open] .requisitos__titulo { margin-bottom: var(--e4); }
.requisitos[open] .requisitos__titulo::after { margin-top: 3px; transform: rotate(-135deg); }
.requisitos__titulo:hover { color: var(--texto); }

.requisitos__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--e5);
}

.requisitos__nivel {
  margin: 0 0 var(--e2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arena);
}

.requisitos ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.requisitos li { font-size: var(--t-sm); line-height: 1.5; color: var(--tenue); }

@media (max-width: 620px) {
  .caratula { flex-direction: column; align-items: center; }
  .caratula__imagen { width: min(240px, 70%); }
  .caratula__ficha { width: 100%; }
  /* Debajo de la carátula, centrado como ella (Dani, 16-10-2026); los datos y
     los requisitos siguen a dos lados, que son listas. */
  .caratula__ficha > :is(.rotulo, h2, .caratula__estado, .caratula__detalle) { text-align: center; }
  .caratula__ficha > .rotulo { justify-content: center; }
  .caratula__botones { justify-content: center; }
}


/* ---------- Actualizaciones: la última en grande y tres al lado ---------- */

/* La pinta js/portada.js. Al lado van tres y no dos, cada una del alto de un
   tercio de la grande (Dani, 6-10-2026). */
.diario {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--e4);
  min-height: min(560px, 62svh);
}

.diario__grande {
  position: relative;
  grid-row: 1 / span 3;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
}

.diario__grande .diario__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--curva-entrada);
}

.diario__grande:hover .diario__foto { transform: scale(1.05); }

/* Oscuro desde un poco más arriba de la mitad: el titular cae encima del cielo
   y en gris claro sobre azul claro no se leía. */
.diario__grande::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 12%, rgb(0 0 0 / .62) 46%, rgb(0 0 0 / .95));
}

.diario__grande .diario__texto {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  justify-items: start;
  gap: var(--e3);
  padding: clamp(22px, 3vw, 36px);
}

.diario__chip {
  padding: 5px 10px;
  border-radius: var(--r-redondo);
  background: var(--arena);
  color: var(--arena-honda);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.diario__meta {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.diario__meta b { color: var(--arena); font-weight: 600; }

/* La semana, en las de al lado: «Week» y el número, los dos de contorno y
   compensados, el número algo mayor (Dani, 6-10-2026). La grande no lo enseña:
   ya dice «Esta semana» (en la tira del móvil de la portada, sí: css/portada.css).
   Al pasar el ratón se encienden en dorado. */
.diario__grande .diario__semana { display: none; }

.diario__semana {
  display: flex;
  align-items: baseline;
  gap: .3em;
  font: 900 clamp(2rem, 1.2vw + 1.3rem, 2.7rem)/.86 var(--titular);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgb(255 255 255 / .6);
  transition: -webkit-text-stroke-color var(--medio) var(--curva);
}

.diario__semana small {
  font-size: .5em;
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-text-stroke-width: 1px;
}

.diario__chica:hover .diario__semana { -webkit-text-stroke-color: var(--arena); }

.diario__titulo { margin: 0; text-wrap: balance; }
.diario__grande .diario__titulo { max-width: 19ch; font-size: clamp(1.7rem, 2.2vw + .7rem, 2.6rem); line-height: 1.04; }
.diario__resumen { max-width: 56ch; margin: 0; color: rgb(255 255 255 / .78); }
.diario__leer { color: var(--arena); font-size: var(--t-md); font-weight: 700; }

.diario__chica {
  display: grid;
  grid-template-columns: 44% 1fr;
  align-items: center;
  gap: var(--e4);
  min-height: 0;
  padding: var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}

/* Con `.diario` delante para ganarle al `transform: none` de la aparición
   (css/estilo.css), que si no se comía la subida. */
.diario .diario__chica:hover { border-color: rgb(240 185 104 / .7); transform: translateY(-3px); }

.diario__chica .diario__foto {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
}

.diario__chica .diario__texto { display: grid; gap: var(--e2); min-width: 0; }
.diario__chica .diario__titulo { font-size: clamp(1rem, .5vw + .8rem, 1.2rem); line-height: 1.2; }

@media (max-width: 860px) {
  .diario { grid-template-columns: 1fr; grid-auto-rows: auto; min-height: 0; }
  .diario__grande { grid-row: auto; min-height: 440px; }
  .diario__chica { grid-template-columns: 40% 1fr; }
  .diario__chica .diario__foto { aspect-ratio: 4 / 3; height: auto; }
}

/* /noticias: todas las semanas, la última en grande y las demás en rejilla,
   con la foto arriba (Dani, 6-10-2026). */
.diario--lista { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; min-height: 0; }
.diario--lista .diario__grande { grid-column: 1 / -1; grid-row: auto; min-height: clamp(360px, 40vw, 520px); }
.diario--lista .diario__chica { grid-template-columns: 1fr; align-items: start; align-content: start; padding: var(--e3) var(--e3) var(--e4); }
.diario--lista .diario__chica .diario__foto { aspect-ratio: 16 / 10; height: auto; }

/* El canal y la fecha, abajo del todo (Dani, 6-10-2026): las de una misma fila
   acaban a la misma altura aunque un título ocupe dos líneas y otro una. */
.diario--lista .diario__chica { grid-template-rows: auto 1fr; }
.diario--lista .diario__chica .diario__texto { display: flex; flex-direction: column; align-self: stretch; }
.diario--lista .diario__chica .diario__meta { margin-top: auto; }

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

@media (max-width: 620px) {
  .diario--lista { grid-template-columns: 1fr; }
}

.noticias { padding: calc(var(--cabecera) + var(--e8)) 0 var(--e9); }
.noticias h1 { margin: var(--e2) 0 var(--e3); font-size: clamp(2.4rem, 3vw + 1.4rem, 4rem); letter-spacing: -.035em; }
.noticias__entrada { max-width: 60ch; margin: 0 0 var(--e7); color: var(--tenue); }
/* Cuánto falta para el próximo devlog, el sábado a las 18:00 (js/proximo-devlog.js). */
.noticias__proximo { margin: calc(var(--e3) - var(--e7)) 0 var(--e7); font-size: var(--t-md); font-weight: 600; color: var(--arena); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .noticias > .contenedor--ancho { padding-inline: var(--lado-movil); }
}


/* ---------- /prensa ---------- */

.prensa__descargar { margin: var(--e5) 0 0; }

.prensa__ficha { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e6); margin: 0; }
.prensa__ficha dt { color: var(--apagado); font-weight: 600; }
.prensa__ficha dd { margin: 0; }

.prensa__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }

.prensa__logo {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: #0d0d0d;
  color: var(--tenue);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: border-color var(--medio) var(--curva);
}

.prensa__logo:hover { border-color: var(--arena); }
.prensa__logo img { width: 100%; max-width: 240px; height: auto; }

/* El de sin fondo, sobre cuadros: es como se sabe que no lo tiene. */
.prensa__logo--oscuro { background: repeating-conic-gradient(#1b1b1b 0 25%, #121212 0 50%) 0 0 / 18px 18px; }

.prensa__capturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--e3); }
.prensa__capturas figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--superficie); }
.prensa__capturas img { display: block; width: 100%; height: auto; transition: transform .6s var(--curva-entrada); }
.prensa__capturas figure:hover img { transform: scale(1.04); }

@media (max-width: 620px) {
  .prensa__logos { grid-template-columns: 1fr; }
  .prensa__ficha { grid-template-columns: 1fr; gap: 0; }
  .prensa__ficha dd { margin-bottom: var(--e3); }
}


/* ---------- El visor de fotos (js/visor.js) ---------- */

/* La foto entera, a su tamaño y nunca más grande: estirada se vería blanda, que
   es justo lo que no se quiere enseñar. Encima de todo, cabecera incluida. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(56px, 7vh, 80px) clamp(16px, 7vw, 120px) clamp(14px, 3vh, 28px);
  background: rgb(0 0 0 / .93);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity .35s var(--curva);
}

.visor--abierto { opacity: 1; }

.visor__escena { display: grid; place-items: center; min-height: 0; }

.visor__foto {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 40px 120px -40px rgb(0 0 0 / .95);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .35s var(--curva), transform .6s var(--curva-entrada);
}

.visor__foto--lista { opacity: 1; transform: none; }

.visor__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--e1) var(--e4);
  padding-top: var(--e4);
  font-size: var(--t-sm);
  text-align: center;
  color: var(--tenue);
}

.visor__texto { max-width: 60ch; margin: 0; }
.visor__cuenta { color: var(--apagado); font-variant-numeric: tabular-nums; white-space: nowrap; }

.visor__boton {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 50%;
  background: rgb(18 18 18 / .72);
  color: #fff;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.visor__boton:hover { background: rgb(44 44 44 / .9); border-color: rgb(255 255 255 / .38); }
.visor__boton:focus-visible { outline: 2px solid var(--arena); outline-offset: 3px; }

.visor__boton svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visor__cerrar { top: clamp(10px, 2vh, 20px); right: clamp(10px, 2vw, 24px); }
.visor__antes, .visor__despues { top: 50%; translate: 0 -50%; }
.visor__antes { left: clamp(10px, 2vw, 32px); }
.visor__despues { right: clamp(10px, 2vw, 32px); }

/* En el móvil, las flechas abajo, a mano del pulgar; y se pasa deslizando. */
@media (max-width: 700px) {
  .visor { padding-inline: 10px; padding-bottom: 88px; }
  .visor__antes, .visor__despues { top: auto; bottom: 20px; translate: none; }
  .visor__antes { left: calc(50% - 64px); }
  .visor__despues { right: calc(50% - 64px); }
}

/* Lo que se abre en el visor lo dice al pasar por encima. */
[data-visor] img[data-grande] { cursor: zoom-in; }
[data-visor] img[data-grande]:focus-visible { outline: 2px solid var(--arena); outline-offset: 3px; }


/* ---------- #builds: tu versión y lo que trae cada una ---------- */

/* Lo pinta js/versiones.js. Arriba la tuya, que es lo que se viene a mirar;
   luego qué hacer con ella, y debajo la historia. */
.versiones { display: grid; gap: var(--e6); max-width: 58rem; }

.versiones__tuya {
  display: grid;
  justify-items: start;
  gap: var(--e3);
  padding: clamp(var(--e5), 3vw, var(--e7));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 0% 0%, rgb(240 185 104 / .1), transparent 55%), var(--superficie);
}

.versiones__numero {
  margin: 0;
  font: 800 clamp(1.8rem, 1.6vw + 1.1rem, 2.6rem)/1.05 var(--titular);
  letter-spacing: -.03em;
}

.versiones__texto { max-width: 52ch; margin: 0; color: var(--tenue); }
.versiones__tuya .boton { margin-top: var(--e2); }

.versiones__invitaciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); }

.versiones__invita {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding: var(--e5);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva), background var(--medio) var(--curva);
}

.versiones__invita:hover { border-color: var(--arena); background: rgb(240 185 104 / .05); transform: translateY(-2px); }
.versiones__invita h3 { margin: var(--e1) 0 0; font-size: var(--t-xl); }
.versiones__invita p { margin: 0; color: var(--tenue); }
.versiones__icono { color: var(--arena); }
.versiones__icono svg { width: 22px; height: 22px; }
.versiones__ir { margin-top: var(--e1); color: var(--arena); font-weight: 700; }

.versiones__rotulo {
  margin: 0 0 var(--e2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apagado);
}

.versiones__lista { margin: 0; padding: 0; list-style: none; }

.version { padding: var(--e5) 0; border-top: 1px solid var(--borde); }
/* Cerrada hasta que se toca su cabeza (11-11-2026). */
.version__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); cursor: pointer; list-style: none; }
.version__cabeza::-webkit-details-marker { display: none; }
.version__cabeza:hover .version__titulo { color: var(--arena); }
.version__flecha { width: 10px; height: 10px; margin-left: auto; border-right: 2px solid var(--apagado); border-bottom: 2px solid var(--apagado); transform: rotate(45deg); transition: transform .2s ease; }
.version__plegable[open] .version__flecha { transform: rotate(-135deg); }
.version__cuerpo { display: grid; gap: var(--e2); padding-top: var(--e3); }
.version__titulo { margin: 0; font-size: var(--t-lg); }
.version__fecha { color: var(--apagado); font-size: var(--t-sm); }
.version p { max-width: 62ch; margin: 0; color: var(--tenue); }
.version p.version__apartado { margin-top: var(--e2); color: var(--texto); font-weight: 700; }
.version__puntos { max-width: 62ch; margin: 0; padding-left: 1.2em; color: var(--tenue); display: grid; gap: var(--e1); }

@media (max-width: 700px) {
  .versiones__invitaciones { grid-template-columns: 1fr; }
}


/* La chapa de estado. Tres, y el color dice cuál sin leerla. */
.chip {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-redondo);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tenue);
}

.chip--bien { border-color: #2c6b4a; background: var(--bien-hondo); color: var(--bien); }
.chip--aviso { border-color: #7a5a1c; background: #2a1f08; color: var(--arena); }
.chip--apagado { color: var(--apagado); }


/* ---------- Lo que está cerrado ---------- */

/* Trazo discontinuo y no relleno: se lee como algo que todavía no está abierto
   y no como un cartel de error. */
.cerrojo {
  margin-top: var(--e7);
  padding: var(--e7) var(--e6);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-lg);
  background: var(--fondo-2);
  text-align: center;
}

.cerrojo__icono { margin: 0 0 var(--e3); font-size: 2rem; }
.cerrojo h2 { max-width: 24ch; margin: 0 auto var(--e3); font-size: var(--t-xl); }
.cerrojo > p { max-width: 46ch; margin: 0 auto var(--e5); color: var(--tenue); }


/* ---------- Las ventajas, en rejilla ---------- */

/* `.ventajas` es de estilo.css y se queda como está: la palomita, la fila y los
   tamaños son los mismos en toda la web. Aquí solo van dos modificadores. */

.ventajas--rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e4);
  text-align: left;
}

.ventajas--rejilla li {
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.ventajas--rejilla a { color: var(--arena); }


/* ---------- El rango, al lado del nombre en la sala ---------- */

/* Más callado que la insignia de fundador: esa es lo que se ha pagado; esto, lo
   que se ha hecho (js/rangos.js). */
.rango-sala {
  margin-left: var(--e2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* Lo que ya tienes y lo que te llega con el juego (js/ventajas.js): la
   palomita o un reloj, y se ve cuál sin leer. */
.ventajas--rejilla .ventaja__texto { display: block; margin-top: 4px; }

.ventajas--llega li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b968' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E");
}

.ventaja__enlace {
  display: inline-block;
  margin-top: var(--e3);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.ventaja__enlace::after { content: " →"; }
.ventaja__enlace:hover { text-decoration: underline; }

/* Tu nombre como irá en la isla. No imita madera ni piedra --eso lo hará el
   juego--: es la etiqueta, en mayúsculas y con su número, como grabada. */
.placa {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--e3);
  max-width: 100%;
  margin-top: var(--e3);
  padding: 6px 12px;
  border: 1px solid rgba(240, 185, 104, .35);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(240, 185, 104, .1), rgba(240, 185, 104, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .35);
  font-family: Archivo, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.placa__nombre { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-sm); font-weight: 800; color: var(--arena-viva); }
.placa__numero { font-size: var(--t-xs); font-weight: 700; color: var(--arena); opacity: .8; }


/* ---------- «Mi cuenta», por partes plegadas (Dani, 26-10-2026) ----------
 * Las tarjetas son los montones de la sala; en el cuadro, un icono en vez del
 * número. Dentro, el formulario de siempre con aire alrededor. */

.cuenta { margin-top: var(--e5); }
.cuenta > .monton { scroll-margin-top: calc(var(--cabecera) + var(--e5)); }
.cuenta .monton__cuantos svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cuenta__dentro { padding: var(--e5); }
.cuenta__dentro > form { margin: 0; }
.monton--peligro .monton__cuantos { background: rgba(226, 114, 92, .14); color: var(--alarma); }
/* Las notificaciones: dos grupos, cada casilla con su nombre y una línea. */
.cuenta__grupo { margin: 0 0 var(--e2); font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--arena); }
.cuenta__grupo:not(:first-child) { margin-top: var(--e6); }
.cuenta__pista { margin: 0 0 var(--e3); color: var(--apagado); }
.cuenta__dentro .casilla { margin: 0 calc(-1 * var(--e4)) var(--e1); }
.cuenta__dentro .casilla strong { display: block; margin-bottom: 2px; color: var(--texto); }
/* Los canales: muchos, así que en columnas y más juntos, con el grupo encima. */
.cuenta__canales { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: var(--e3); margin: 0 calc(-1 * var(--e3)); }
.cuenta__canales .casilla { margin: 0 0 2px; padding: var(--e2) var(--e3); }
.cuenta__subgrupo { grid-column: 1 / -1; margin: var(--e3) 0 var(--e1); padding: 0 var(--e3); font-size: var(--t-sm); font-weight: 600; color: var(--tenue); }
.cuenta__subgrupo:first-child { margin-top: 0; }


/* ---------- Tu plaza, en el perfil ---------- */

/* Con plaza, la tarjeta de fundador; sin ella, la misma con el trazo
   discontinuo de lo que todavía no está abierto. */
.mi-plaza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  padding: var(--e6);
  border: 1px solid rgba(240, 185, 104, .28);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(240, 185, 104, .12), transparent 55%),
    var(--superficie);
}
.mi-plaza__texto { flex: 1 1 22rem; min-width: 0; }
.mi-plaza__texto h2 { max-width: none; margin: 4px 0 var(--e2); font-size: var(--t-2xl); }
.mi-plaza__texto p:last-child { max-width: 58ch; margin: 0; color: var(--tenue); }
/* Los títulos de dentro de una hoja del perfil: «Lo que ya tienes», «En la isla»... */
.hoja__titulillo { margin: var(--e7) 0 var(--e4); font-size: var(--t-lg); }
.hoja__titulillo:first-child,
.hoja > [hidden]:first-child + .hoja__titulillo { margin-top: 0; }


/* ---------- Tus números en la isla (pestaña Logros) ---------- */

.numeros { margin-bottom: var(--e8); }
/* Sobrevivir, lo que has hecho, lo que has recorrido: un rótulo y su rejilla. */
.numeros__grupo + .numeros__grupo { margin-top: var(--e6); }
/* De tres en tres: cada grupo son cinco o seis cifras, y con las columnas que
   quepan quedaba una sola colgando en la segunda fila. */
.numeros__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
}
@media (min-width: 40rem) {
  .numeros__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.numero {
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}
.numero__cifra {
  margin: 0;
  font-family: var(--titular);
  font-size: var(--t-3xl);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--arena-viva);
  font-variant-numeric: tabular-nums;
}
.numero__unidad { margin-left: 4px; font-size: var(--t-md); font-weight: 700; letter-spacing: 0; color: var(--arena); }
.numero__que { margin: var(--e2) 0 0; font-size: var(--t-sm); color: var(--tenue); }
.numero__extra { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--apagado); }
.numeros__desde { margin: var(--e3) 0 0; font-size: var(--t-xs); color: var(--apagado); }
.numeros__vacio {
  max-width: 62ch;
  margin: 0;
  padding: var(--e5);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--fondo-2);
  color: var(--tenue);
}


/* ---------- La presentación del juego ---------- */

.presenta {
  display: flex;
  gap: var(--e8);
  align-items: flex-start;
}

/* Igual que en el perfil: borde claro arriba y sombra larga, para que se lea
   como una caja y no como una imagen pegada al fondo. */
.presenta__caratula {
  flex: none;
  width: 340px; height: auto;
  border-radius: var(--r-md);
  border-top: 1px solid rgb(255 255 255 / .18);
  box-shadow: 0 22px 54px rgb(0 0 0 / .65);
}

.presenta__texto { flex: 1 1 22rem; min-width: 0; }
.presenta__texto h1 { max-width: 18ch; margin: 6px 0 var(--e5); }
.presenta__botones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Las cinco reglas, entre el título y el botón (Dani, 15-10-2026): de dos en
   dos al lado de la carátula, y la quinta, sola, a lo ancho de las dos. */
.presenta__reglas { margin: 0 0 var(--e6); }
.presenta__reglas li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .presenta { flex-direction: column; align-items: center; text-align: center; }
  /* El rótulo es flex: text-align no lo centra, y salía corrido a la izquierda. */
  .presenta .rotulo { justify-content: center; }
  .presenta__caratula { width: min(300px, 62%); }
  .presenta__texto h1 { max-width: none; }
  .presenta__botones { justify-content: center; }
}


/* ---------- El trato ---------- */

.trato {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--e7);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

.trato__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e4);
  margin: 0 0 var(--e6);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--borde);
}

.trato__cifra {
  font-family: Archivo, sans-serif;
  font-size: var(--t-4xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}

.trato__pie { font-size: var(--t-md); color: var(--tenue); }

.trato__botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.trato__letra { margin-top: var(--e3); }


/* ==========================================================================
   La portada, pantalla a pantalla
   ========================================================================== */

/*
 * Cada sección ocupa una pantalla y el scroll salta de una a la siguiente.
 *
 * `mandatory` y no `proximity` porque lo que se pidió es justo eso: que no te
 * puedas quedar a medias entre dos. Pero mandatory tiene una trampa conocida:
 * si una sección es MÁS ALTA que la pantalla, su parte de abajo se vuelve
 * inalcanzable --el navegador te devuelve al punto de anclaje--. Por eso todo
 * esto vive detrás de una consulta de ALTURA además de una de ancho: en una
 * ventana baja, o en el móvil, la página vuelve a ser una página normal.
 */
@media (min-width: 861px) and (min-height: 660px) {
  .por-pantallas {
    scroll-snap-type: y mandatory;
    /* El ancla va en el borde de arriba de la sección, no bajo la cabecera: la
       cabecera es transparente y flota encima. */
    scroll-padding-top: 0;
  }

  .por-pantallas .plena {
    height: 100svh;
    scroll-snap-align: start;
  }

  /* Con `js/pantallas.js` en marcha, el ajuste del navegador estorba: corregiría
     a mitad del viaje y lo cortaría. Queda como red para quien no tenga
     JavaScript, y ahí SIN `scroll-snap-stop: always`, que era la mitad del
     tirón: obliga a parar en cada sección y se come la inercia del trackpad
     una y otra vez. */
  .por-pantallas.con-guia { scroll-snap-type: none; }
}

/* Fuera de esa consulta, `plena` solo garantiza que la sección llene el alto,
   nunca que lo recorte. */
.plena {
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* Sitio para la cabecera flotante, arriba, y aire abajo. */
  padding-block: calc(var(--cabecera) + var(--e6)) var(--e7);
}

.plena > .contenedor { width: 100%; }

/* El contenido de una pantalla no puede desbordarla: si lo hace, lo que sobra
   se recorre dentro de la propia sección. Es el escape para la ventana pequeña
   y para el acordeón de preguntas cuando se abre uno largo.

   Va en la SECCIÓN y no en su contenedor: en el contenedor salía una barra que
   no hacía falta --`scrollHeight` le daba veintidós píxeles más que
   `clientHeight` en cuatro secciones, siempre los mismos, que son márgenes que
   el navegador no cuenta igual en las dos medidas--. Aquí la cuenta es exacta,
   porque el alto está fijado a 100svh.

   Y `safe center`: centrar algo más alto que su caja deja la parte de ARRIBA
   fuera de alcance, que es el fallo clásico de centrar con desbordamiento.

   Solo en `.seccion`: el cierre reparte su alto entre el mensaje y el pie. */
.por-pantallas .seccion.plena {
  overflow-y: auto;
  align-content: safe center;
  scrollbar-width: thin;
}

/* Dentro de una pantalla, los márgenes de sección sobran: el aire lo pone el
   centrado. */
.plena .cabeza-seccion { margin-bottom: var(--e6); }


/* ---------- La cabecera de sección, en fila ---------- */

/* Título a la izquierda y entradilla a la derecha. Apilados ocupan el doble de
   alto, y aquí el alto es lo que se está repartiendo. */
.cabeza-seccion--fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4) var(--e7);
}

.cabeza-seccion--fila .seccion__entrada { max-width: 42ch; margin: 0 0 6px; }
.cabeza-seccion--fila h2 { max-width: 20ch; }


/* Lo que aparece al llegar vive entero en estilo.css, en `.revelar`. Aquí
   estaba `.en-orden`, que hacía lo mismo con otro nombre y otro tope de hijos.
   La clase sigue en el marcado: es la que le dice al JavaScript que los hijos
   de esa caja son piezas sueltas y no una sola. */


/* ---------- El dev hub: carteles ---------- */

/*
 * La foto, entera y sin nada encima, y el título debajo.
 *
 * Estaba al revés --el texto sobre la imagen, sobre un degradado negro-- y esa
 * capa se comía media captura. Puesto el texto debajo, sobre el fondo de la
 * tarjeta, el degradado deja de hacer falta: la imagen se ve tal cual.
 */
.carteles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--e4);
}

.cartel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  transition: transform var(--medio) var(--curva), border-color var(--medio) var(--curva);
}

.cartel__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.cartel:hover { transform: translateY(-4px); border-color: var(--arena); }

.cartel__caja { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5); }

/* Sin envolver, pase lo que pase: si esta linea se parte en dos, el titulo de
   esa tarjeta baja y deja de coincidir con el de las de al lado. */
.cartel__alto {
  display: flex; align-items: baseline; gap: var(--e3);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arena);
}

.cartel__alto span { color: var(--apagado); }

.cartel__titulo {
  margin: 0;
  font-size: var(--t-lg);
  line-height: 1.25;
  text-wrap: balance;
}


/* ---------- El cierre, con el pie dentro ---------- */

.cierre {
  position: relative;
  /* Dos filas: el mensaje ocupa lo que sobre y queda centrado, y el pie se
     queda pegado abajo. Antes el pie era una franja negra DEBAJO de la foto, y
     se leía como otra cosa distinta pegada al final. */
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  padding-block: calc(var(--cabecera) + var(--e6)) 0;
  overflow: hidden;
  isolation: isolate;
}

.cierre__fondo {
  position: absolute;
  /* Lo mismo que el del JRS: sobra para poder moverse. */
  inset: -6% 0;
  width: 100%; height: 112%;
  object-fit: cover;
  will-change: transform;
  /* Arriba: en esta panorámica lo que hay abajo es tierra en sombra, que con
     velo encima se queda en negro. Con el encuadre subido asoman el mar y el
     cielo, que es lo que se tiene que ver. */
  object-position: 50% 26%;
  z-index: -2;
}

/* La foto SE VE. Negro arriba para empalmar con la sección anterior, la imagen
   asomando en la franja del medio y negro otra vez abajo, que es donde va el
   pie: así el pie no necesita fondo propio para leerse. */
.cierre__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    #000 0%,
    rgb(0 0 0 / .52) 16%,
    rgb(0 0 0 / .28) 40%,
    rgb(0 0 0 / .68) 70%,
    #000 94%);
}

.cierre__interior {
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--e4);
  text-align: center;
}

.cierre__interior h2 { margin: 0; max-width: 18ch; font-size: var(--t-3xl); }
.cierre__interior p { margin: 0; max-width: 46ch; font-size: var(--t-lg); line-height: 1.65; color: var(--tenue); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; }


/* ---------- El pie ---------- */

/* La última sección de la portada lleva el pie dentro, abajo, con lo suyo
   centrado en lo que sobre; es lo que hacía el cierre hasta que las preguntas
   pasaron a ser la última (Dani, 9-10-2026). */
.plena--con-pie { grid-template-rows: 1fr auto; align-content: stretch; padding-bottom: 0; }
.plena--con-pie > .contenedor { align-self: center; }

/* Sin fondo ni borde. Y todo en gris, que es lo que se pidió: el pie no compite
   con lo que tiene encima. */
.pie--dentro {
  align-self: end;
  padding: var(--e6) 0 var(--e5);
  background: none;
  border: 0;
}

/* La letra pequeña de verdad: apagada, estrecha y centrada. Se lee si alguien
   la busca y no llama la atención si no. */
/* A lo ancho: en una pantalla grande, noventa y seis caracteres dejaban tres
   renglones centrados en una columna estrecha con dos palmos de negro a los
   lados. Con el ancho de la pantalla cabe en dos. */
.pie__legal {
  max-width: 150ch;
  margin: 0 auto;
  font-size: var(--t-xs);
  line-height: 1.75;
  text-align: center;
  color: #6b6b6b;
  text-wrap: pretty;
}

/* Debajo de la letra pequeña, lo último de la página, y con su mismo tamaño,
   color y letra (Dani, 6-10-2026). El pie lo escribe herramientas/pie.py en
   todas las páginas: no se toca a mano. */
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--e4);
  margin-top: var(--e3);
}

/* En el móvil, sin ellos, en ninguna página (Dani, 8-10-2026): son cosas del
   ordenador. Con `.pie` delante: solo con la clase perdía contra `.pie nav`
   de estilo.css, que pesa más, y seguían saliendo en todos los móviles. */
@media (max-width: 820px) {
  .pie .pie__enlaces { display: none; }
}

.pie__enlaces a {
  min-height: 36px;
  font-size: var(--t-xs);
  line-height: 1.75;
  color: #6b6b6b;
  text-decoration: none;
}

.pie__enlaces a:hover { color: var(--tenue); }


/* ---------- Ajustes de las secciones a pantalla ---------- */

/* El héroe ya tenía su propio alto; dentro de `plena` manda esta. Y su
   contenido NO se centra: en el héroe el texto va abajo, sobre la franja que el
   velo oscurece, porque el centro es donde manda la ilustración. `align-content`
   de `.plena` es lo que lo subía al medio. */
.plena.heroe--grande { min-height: 100svh; padding-block: 0; align-content: stretch; }

/* En móvil el logotipo puede llenar más ancho: hay menos que compensar. Al 74 %
   se comía la ilustración (Dani, 9-10-2026: «haz el logo más pequeño»). */
@media (max-width: 720px) {
  .heroe--grande { --logo-grande: min(60vw, 420px); }
}

/* Las preguntas, apretadas: seis con el aire de una página larga se van de
   pantalla por setenta píxeles. Cerradas caben las seis; al abrir una, lo que
   sobre se recorre dentro, que para eso está el escape de arriba. */
.plena .preguntas { margin-top: var(--e5); }
.plena .pregunta__titulo { padding: var(--e4) var(--e3); font-size: var(--t-base); }
.plena .pregunta__cuerpo { padding-bottom: var(--e4); }


/* La galería, más baja: cinco fotos en una pantalla, no siete en dos. */
.plena .galeria { grid-template-columns: repeat(4, 1fr); gap: var(--e3); }
.plena .galeria .grande { grid-column: span 2; grid-row: span 2; }
.plena .galeria figure { aspect-ratio: 16 / 10; }

@media (max-width: 860px) {
  .plena .galeria { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- Una novedad, entera ---------- */

.articulo__portada {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(62svh, 560px);
  padding-block: calc(var(--cabecera) + var(--e7)) var(--e7);
  overflow: hidden;
  isolation: isolate;
}

.articulo__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: -2;
}

.articulo__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .32) 40%, rgb(0 0 0 / .86) 84%, #000 100%);
}

.articulo__cabeza h1 {
  max-width: 22ch;
  margin: var(--e2) 0 var(--e3);
  font-size: var(--t-4xl);
  text-shadow: 0 3px 24px rgb(0 0 0 / .9);
}

.articulo__fecha {
  margin: 0;
  font-size: var(--t-md);
  color: var(--tenue);
}

.articulo {
  max-width: 76ch;
  padding-block: var(--e8);
}

.articulo__texto p {
  margin: 0 0 var(--e5);
  font-size: var(--t-lg);
  line-height: 1.75;
  color: #dcdcdc;
}

/* Un artículo con apartados, listas y fotos entre medias (js/articulo.js). */
.articulo__texto h2 {
  margin: var(--e8) 0 var(--e4);
  font-size: var(--t-2xl);
  text-wrap: balance;
}
.articulo__texto ul { margin: 0 0 var(--e5); padding-left: 1.2em; }
.articulo__texto li {
  margin-bottom: var(--e2);
  font-size: var(--t-lg);
  line-height: 1.7;
  color: #dcdcdc;
}
.articulo__texto li::marker { color: var(--arena); }
.articulo__texto strong { color: #fff; }
.articulo__texto .medio { margin: var(--e5) 0 var(--e6); }
.articulo__fecha strong { color: var(--arena-viva); }
.articulo__proximo { margin: var(--e2) 0 0; font-size: var(--t-md); font-weight: 600; color: var(--arena); font-variant-numeric: tabular-nums; }

/* Al acabar de leer: a qué viene todo esto. */
.articulo__llamada {
  display: grid;
  justify-items: start;
  gap: var(--e3);
  margin-top: var(--e9);
  padding: var(--e6);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}
.articulo__llamada h2 { margin: 0; font-size: var(--t-2xl); }
.articulo__botones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Lo que viene: lo más votado de #actualizaciones, al acabar de leer. */
.articulo__viene { margin-top: var(--e9); padding-top: var(--e6); border-top: 1px solid var(--borde); }
.articulo__viene h2 { margin: 0 0 var(--e4); font-size: var(--t-2xl); }
.articulo__viene ul { margin: 0 0 var(--e5); padding-left: 1.2em; }
.articulo__viene li { margin-bottom: var(--e2); font-size: var(--t-lg); line-height: 1.6; color: #dcdcdc; }
.articulo__viene li::marker { color: var(--arena); }
.articulo__viene + .articulo__llamada { margin-top: var(--e7); }


/* ---------- Así ha cambiado la isla (arriba de /avances) ---------- */

/* La primera semana al lado de ahora, cada una con su etiqueta: al lado, no
   una encima de otra con una línea que se arrastra. */
.cambios { display: grid; gap: var(--e9); }
.cambio h2 { margin: 0 0 var(--e4); font-size: var(--t-2xl); }
.cambio__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.cambio__par figure { position: relative; margin: 0; }
.cambio__par img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.cambio__cuando {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / .66);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cambio__cuando--ahora { background: var(--arena-viva); color: var(--arena-honda); }
.cambio p { max-width: 70ch; margin: var(--e4) 0 0; font-size: var(--t-md); line-height: 1.7; color: var(--tenue); }
.seccion__mas { margin: var(--e6) 0 0; }

@media (max-width: 560px) {
  .cambio__par { grid-template-columns: 1fr; }
}
.articulo__llamada p:not(.rotulo) { margin: 0 0 var(--e2); font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }

.articulo__vuelta { margin-top: var(--e8); }


/* Lo que cuelga: fotos, vídeos y parejas de antes y después. */

.medio { margin: var(--e7) 0; }

/* `width: auto` con los dos topes: un clip vertical se queda en 72svh de alto y
   se centra, y una captura apaisada se estira hasta el ancho de la columna sin
   que el tope de alto llegue a morder. */
.medio img,
.medio video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72svh;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: #000;
}

/* En pareja mandan las dos columnas: cada lado ocupa el suyo entero. */
.medio--par img,
.medio--par video { width: 100%; max-height: 64svh; object-fit: contain; }

.medio figcaption {
  margin-top: var(--e3);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--tenue);
}

/* Uno al lado del otro, cada uno con su etiqueta. En vertical --que es como se
   graba en este proyecto-- dos clips 9:16 en una columna se van de pantalla, y
   en fila caben los dos y se comparan de un vistazo. */
.medio--par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
}

.medio--par figcaption { grid-column: 1 / -1; margin-top: 0; }
.medio__lado { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }

.medio__etiqueta {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--arena);
}

@media (max-width: 560px) {
  .medio--par { grid-template-columns: 1fr; }
}


/* ---------- Un aviso que hay que leer ---------- */

/* Filo de alarma y fondo propio. No es un `letra-pequena` mas: es lo unico de
   la pagina que, si no se lee, le estropea la partida a dos personas. */
.aviso-serio {
  margin: var(--e5) 0;
  padding: var(--e5) var(--e6);
  border: 1px solid var(--borde-vivo);
  border-left: 3px solid var(--arena);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.aviso-serio__titulo {
  margin: 0 0 var(--e3);
  font-family: Archivo, sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--arena-viva);
}

.aviso-serio p { margin: 0 0 var(--e3); font-size: var(--t-md); line-height: 1.65; color: var(--tenue); }
.aviso-serio p:last-child { margin-bottom: 0; }
.aviso-serio strong { color: var(--texto); }


/* ---------- La tira de capturas ---------- */

/*
 * Una fila que pasa sola, sin fin y sin rótulos.
 *
 * Va con dos tandas IGUALES dentro del carril y la animación lo mueve media
 * anchura: cuando la segunda llega al sitio donde empezó la primera, el bucle
 * vuelve a cero y el salto cae justo en un fotograma idéntico. Es la única
 * forma de que una tira gire sin fin sin tocarla desde JavaScript.
 *
 * Y sin pies: un rótulo debajo de cada foto convierte una galería en un
 * catálogo, y lo que se está enseñando aquí es el juego, no una lista.
 */

.tira-fotos {
  /* Con aire a los lados: a sangre, la primera y la ultima foto tocaban el
     borde de la pantalla y la seccion se sentia apretada. El margen es
     generoso y sigue dejando que la fila se salga del contenedor del titular,
     que es lo que la hace leerse como algo que sigue. */
  margin-inline: clamp(18px, 5vw, 80px);
  overflow: hidden;
  /* Se desvanece en los dos bordes, pero poco: con un desvanecido largo la
     primera y la última foto se ven apagadas y la fila parece que deja margen.
     Lo justo para que no se corte en seco contra el borde de la pantalla. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}

.tira-fotos__carril {
  display: flex;
  width: max-content;
  animation: pasar 64s linear infinite;
}

.tira-fotos:hover .tira-fotos__carril { animation-play-state: paused; }

.tira-fotos__tanda { display: flex; gap: var(--e4); padding-right: var(--e4); }

/* Manda el ALTO y el ancho lo sigue: la tira vive dentro de una pantalla y lo
   que hay que llenar es el hueco que dejan el titular y el aire, no un ancho. */
.tira-fotos img {
  flex: none;
  height: clamp(210px, 44svh, 440px);
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
}

@keyframes pasar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * EN UN MÓVIL LA TIRA SE PASA CON EL DEDO.
 *
 * Sola funciona en un ordenador, donde está de fondo mientras se lee lo demás.
 * En un móvil ocupa la pantalla entera y es lo único que hay: lo primero que
 * hace cualquiera es intentar arrastrarla, y no se dejaba.
 *
 * Con `scroll-snap` de CSS y no con una librería: es lo único que se mueve con
 * el dedo de verdad, porque lo lleva el navegador. Un carrusel de JavaScript
 * imita el arrastre y siempre se nota.
 *
 * Manda el ANCHO y no el alto: con el alto de escritorio cada foto medía 536 px
 * en una pantalla de 375 y solo se veía un trozo de una.
 */
@media (max-width: 860px) {
  .tira-fotos {
    /* Pegada a los bordes, que aquí el aire lo pone el propio desplazamiento. */
    margin-inline: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Que la primera y la última puedan quedar centradas como las de en medio. */
    scroll-padding-inline: var(--e5);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* El desvanecido de los bordes estorba cuando se arrastra: apaga justo la
       foto que estás trayendo. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tira-fotos::-webkit-scrollbar { display: none; }

  .tira-fotos__carril {
    /* Quieta: ahora la mueve el dedo. */
    animation: none;
    padding-inline: var(--e5);
  }

  /* La segunda tanda es la copia que hace posible el bucle infinito de la
     animación. Sin animación es contenido repetido, y arrastrando se llega. */
  .tira-fotos__tanda:last-child { display: none; }

  .tira-fotos img {
    height: auto;
    /* Menos del ancho de la pantalla: la siguiente asoma, y eso es lo que dice
       que se puede seguir arrastrando sin tener que explicarlo. */
    width: 82vw;
    scroll-snap-align: center;
  }
}

/* Quien ha pedido menos movimiento la ve quieta y la mueve él. */
@media (prefers-reduced-motion: reduce) {
  .tira-fotos { overflow-x: auto; }
  .tira-fotos__carril { animation: none; }
  .tira-fotos__tanda:last-child { display: none; }
}

/* ---------- El logotipo, del centro a la cabecera ---------- */

/*
 * La pieza la mueve `js/marca-viajera.js` con un `transform`, que es lo unico
 * que un navegador anima sin volver a calcular la pagina entera en cada
 * fotograma. Aqui solo van las condiciones para que ese movimiento se vea bien.
 */
.marca--viajera {
  transform-origin: 50% 50%;
  /* Sin transicion a proposito: el que manda es el scroll, y una transicion
     encima llegaria siempre un poco tarde. */
  transition: none;
  will-change: transform;
}

/* Grande y centrado, el logotipo tiene que leerse sobre la ilustracion. */
.marca--viajera .marca__logo {
  filter: drop-shadow(0 6px 34px rgb(0 0 0 / .65));
}

/*
 * Lo de la derecha no esta mientras el logotipo manda.
 *
 * Entrar y encontrarse una llamada a registrarse antes de haber visto nada es
 * pedir el paso antes de dar el motivo. Aparece con el mismo viaje, cuando el
 * logotipo ya se ha ido a su esquina.
 */
.por-pantallas .cabecera__acciones {
  opacity: calc(1 - var(--marca-viaja, 0));
  transform: translate3d(0, calc(var(--marca-viaja, 0) * -10px), 0);
}

/* Y no se puede pulsar lo que no se ve. Va por clase y no atado a la variable
   porque `pointer-events` no interpola desde un numero. */
.con-marca-grande .cabecera__acciones { pointer-events: none; }

/* ---------- El JRS ---------- */

.jrs {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* La captura, muy apagada y desenfocada: no es una foto que haya que mirar, es
   lo que evita que la seccion sea un rectangulo negro con letras. */
.jrs__fondo {
  position: absolute;
  /* Sobra por arriba y por abajo porque el paralaje lo desplaza: con
     `inset: 0` asomaría el negro de detrás en cuanto se moviera. */
  inset: -6% 0;
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: -2;
  filter: saturate(.75);
  will-change: transform;
}

.jrs__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #000 0%, rgb(0 0 0 / .80) 24%, rgb(0 0 0 / .74) 68%, #000 100%),
    linear-gradient(90deg, rgb(0 0 0 / .68) 0%, rgb(0 0 0 / .12) 64%, rgb(0 0 0 / .42) 100%);
}

/* El titular manda en la seccion: es la frase que tiene que quedarse. */
.jrs__titulo {
  max-width: none;
  margin: var(--e2) 0 var(--e5);
  font-size: clamp(2rem, 3.6vw + .8rem, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

/* Las dos preguntas enfrentadas. La de arriba apagada y tachada --es la que se
   deja atras-- y la de abajo encendida y mas grande. Puestas una encima de otra
   y con la misma sangria, el cambio se lee sin tener que explicarlo. */
.cambio {
  display: grid;
  gap: var(--e3);
  margin: var(--e6) 0 0;
  padding: var(--e5) 0 0;
  border-top: 1px solid var(--borde);
}

.cambio__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e3) var(--e5);
  margin: 0;
}

.cambio__quien {
  flex: none;
  width: 15rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cambio__dice {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.cambio__fila--antes .cambio__quien { color: var(--apagado); }
.cambio__fila--antes .cambio__dice {
  font-size: clamp(1.1rem, 1.5vw + .4rem, 1.6rem);
  color: var(--apagado);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(255 255 255 / .28);
}

.cambio__fila--ahora .cambio__quien { color: var(--arena); }
.cambio__fila--ahora .cambio__dice {
  font-size: clamp(1.35rem, 2.1vw + .5rem, 2.3rem);
  color: #fff;
}

@media (max-width: 720px) {
  .cambio__quien { width: 100%; }
}


/* Los tres pilares. Numerados porque son tres afirmaciones seguidas y el numero
   dice que hay tres y que van juntas, no que haya un orden que seguir. */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--e5);
  margin: var(--e7) 0 0;
  padding: 0;
  list-style: none;
}

.pilares li {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-vivo);
}

/* Los enlaces del pie, a 44 px de alto para el dedo. En el ordenador se tocan
   con un raton y 40 sobran; en un movil van en dos filas de cuatro y un fallo
   te lleva a otra pagina. Crece el area, no la letra. */
@media (max-width: 860px) {
  .pie__enlaces a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ---------- El final de la pagina, en un movil ---------- */

/*
 * El pie va dentro de la ultima seccion, las preguntas, tambien en el movil
 * (Dani, 9-10-2026: suelto contaba como otra pantalla), y `main` en columna,
 * para que lo que tenga que llenar la pantalla crezca con flex-grow.
 */
@media (max-width: 860px) {
  main { display: flex; flex-direction: column; }

  /* El cierre ya no lleva el pie: su escenario, la pantalla entera. */
  .cierre { grid-template-rows: 1fr; }

  /*
   * Y el pie, compacto. Ocupaba 290 pixeles: los enlaces en dos filas con dos
   * dedos de hueco entre ellas, y seis renglones de letra pequena que no lo era.
   * Al final del todo no necesita aire: necesita acabar.
   */
  .pie--dentro {
    padding: var(--e6) 0 calc(var(--e5) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde);
  }

  .pie__enlaces {
    gap: 0 var(--e4);
    margin-bottom: var(--e3);
  }

  .pie__legal {
    font-size: 11px;
    line-height: 1.6;
    /* Todo el ancho que haya: estrecharla a 42ch le sumaba un renglon y dejaba
       hueco a los lados. En un pie no hace falta comodidad de lectura. */
    max-width: none;
  }
}


.pilares__numero {
  font-family: Archivo, sans-serif;
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--arena);
}

.pilares strong { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -.02em; }
.pilares span:not(.pilares__numero) { font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }



/* Lo que escribe la gente, traducido al idioma de la página (js/traduccion.js y
   api/_semana.js): una línea pequeña debajo, y el original a un toque. */
.traducido {
  margin: var(--e1) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--apagado);
}
.traducido--corto { display: inline-block; margin: 0 0 0 var(--e2); vertical-align: middle; }
.traducido--articulo { max-width: var(--ancho-texto, 68ch); margin: var(--e3) auto 0; padding: 0 var(--e4); }
.traducido__ver,
.traducido a {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--tenue);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.traducido__ver:hover,
.traducido a:hover { color: var(--texto); }

/* ---------- Perfil: en el móvil, a jugar al ordenador ---------- */

/* Lo ve quien ya tiene el juego y entra desde el teléfono (cuándo sale, en
   css/app.css, [data-solo-movil]). Que se note que lo tiene y que le apetezca
   ir al PC, no un aviso de que aquí no se puede (Dani, 19-10-2026). */
.al-ordenador {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: var(--e2);
  margin: var(--e3) 0 var(--e5);
  padding: var(--e6) var(--e4) var(--e5);
  border: 1px solid rgb(240 185 104 / .6);
  border-radius: 22px;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(240 185 104 / .22), transparent 70%),
    var(--superficie, #111);
  box-shadow: 0 24px 60px -30px rgb(240 185 104 / .55);
}

.al-ordenador__icono {
  width: 64px;
  height: 64px;
  margin-bottom: var(--e2);
  fill: none;
  stroke: var(--arena);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 14px rgb(240 185 104 / .55));
  animation: al-ordenador-flota 3.2s ease-in-out infinite;
}
.al-ordenador__ola { stroke: var(--arena-viva); animation: al-ordenador-ola 2.4s ease-in-out infinite; }

.al-ordenador__rotulo {
  margin: 0;
  color: var(--arena);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.al-ordenador__titulo { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; text-wrap: balance; }
.al-ordenador__texto { margin: var(--e1, 4px) 0 var(--e3); color: var(--tenue); text-align: center !important; text-wrap: pretty; }
.al-ordenador .boton { width: 100%; }
.al-ordenador__hecho { margin: var(--e2) 0 0; color: var(--arena-viva); font-size: 14px; }

@keyframes al-ordenador-flota { 50% { transform: translateY(-5px); } }
@keyframes al-ordenador-ola { 50% { transform: translateX(2px); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .al-ordenador__icono, .al-ordenador__ola { animation: none; }
}

/*
 * El ojo (Dani, 25-10-2026): cuántas personas lo han visto, en todo lo de la
 * sala. Apagado, como la hora: se mira, no se toca.
 */
.ojo { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm); color: var(--apagado); white-space: nowrap; }
.entrada__cabeza > .ojo { margin-left: auto; }
.entrada__cabeza > .ojo ~ .entrada__borrar { margin-left: 0; }

/*
 * Las reacciones (Dani, 26-10-2026, estilo 1 y botón A): pastillas con el
 * emoji del sistema y la cuenta; la tuya, en arena. La carita con el + abre
 * los ocho, hacia arriba: en un montón, lo de abajo se corta.
 */
.comentario__pie { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e2); }
.comentario__pie .comentario__borrar { margin-top: 0; }

/* Corregir lo tuyo y mencionar con @ (Dani, 26-10-2026). «Corregir» va junto
   a «Borrar», con su misma letra, y pasa a arena y no a rojo. */
.comentario__corregir:hover, .entrada__corregir:hover { color: var(--arena); }
.entrada__corregir + .entrada__borrar { margin-left: 0; }
.mensaje__corregido { margin-left: var(--e2); font-size: var(--t-xs); font-style: italic; color: var(--apagado); cursor: default; }
.mencion { color: var(--arena); font-weight: 600; }

.corregir { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e2); }
.corregir__campo {
  width: 100%;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}
.corregir__campo--titulo { font-weight: 700; }
.corregir__campo:focus { outline: none; border-color: var(--arena); }
.corregir__pie { display: flex; align-items: center; gap: var(--e4); }

/* Los nombres que salen al escribir @: encima del campo, a lo ancho. */
.comentar:has(.mencionar:not([hidden])) { flex-wrap: wrap; }
.mencionar { display: flex; flex-wrap: wrap; gap: var(--e2); flex-basis: 100%; order: -1; }
.mencionar[hidden] { display: none; }
.mencionar__uno {
  padding: 4px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: none;
  color: var(--arena);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.mencionar__uno:hover, .mencionar__uno:focus-visible { border-color: var(--arena); outline: none; }
/* Los temas que salen al escribir /: el título, y detrás su canal en gris. */
.mencionar__tema { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; text-align: left; }
.mencionar__tema span:last-child { flex: none; font-size: .85em; color: var(--apagado); }

/* Un tema o un canal enlazado en un mensaje (#canal/12): un botón relleno
   con un bocadillo, su título y una flecha (el diseño 3, 27-10). */
.enlace-tema {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 4px 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--arena);
  color: #111;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;
  transition: filter .15s, transform .15s;
}
.enlace-tema:hover, .enlace-tema:focus-visible { filter: brightness(1.08); outline: none; }
.enlace-tema:focus-visible { box-shadow: 0 0 0 2px var(--fondo, #0b0b0b), 0 0 0 4px var(--arena); }
.enlace-tema:active { transform: scale(.98); }
.enlace-tema__icono, .enlace-tema__flecha { flex: none; display: flex; }
.enlace-tema__titulo { min-width: 0; overflow-wrap: anywhere; }
.chat__mensaje--mio .enlace-tema { background: #111; color: var(--arena); }

/* #bugs: la primera pregunta, más corta que la segunda. */
.nuevo-tema__antes { min-height: 0; }
.entrada > .reacciones { margin-top: var(--e3); }
.entrada__pie { flex-wrap: wrap; }
.reacciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reaccion,
.reacciones__abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: none;
  color: #a6a6a6;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.reaccion[hidden] { display: none; }
.reaccion__emoji,
.reacciones__opcion { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; }
.reaccion__emoji { font-size: 17px; line-height: 1; }
button.reaccion,
.reacciones__abrir { cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
button.reaccion:hover,
.reacciones__abrir:hover { color: var(--texto); border-color: var(--borde-vivo); }
.reaccion--puesta,
button.reaccion--puesta:hover { color: var(--arena); background: rgb(240 185 104 / .12); border-color: var(--arena); }
.reacciones__abrir { width: 40px; padding: 0; }
.reacciones__abrir[aria-expanded="true"] { color: var(--texto); background: #1c1c1c; border-color: var(--borde-vivo); }
.reacciones__mas { position: relative; display: inline-flex; }
.reacciones__lista {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(8, 46px);
  gap: 4px;
  padding: 8px;
  background: #161616;
  border: 1px solid var(--borde-vivo);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9);
}
.reacciones__lista[hidden] { display: none; }
.reacciones__lista--abajo { top: calc(100% + 6px); bottom: auto; }
.reacciones__opcion {
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.reacciones__opcion:hover,
.reacciones__opcion:focus-visible { background: #222; transform: scale(1.12); }
.reacciones__opcion--puesta { background: rgb(240 185 104 / .16); }
@media (max-width: 600px) {
  .reacciones__lista { grid-template-columns: repeat(4, 46px); }
}
@media (prefers-reduced-motion: reduce) {
  .reacciones__opcion:hover, .reacciones__opcion:focus-visible { transform: none; }
}

/* Te han contestado: encima de los canales, en arena, y se va al abrirlo. */
.respuestas { margin: 0 0 var(--e5); }
.respuestas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.respuestas__una {
  display: block;
  padding: var(--e3);
  border: 1px solid rgb(240 185 104 / .35);
  border-radius: var(--r-md);
  background: rgb(240 185 104 / .06);
  color: inherit;
  text-decoration: none;
}
.respuestas__una:hover { border-color: var(--arena); }
.respuestas__titulo { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.respuestas__que { font-size: var(--t-xs); color: var(--arena); }
.respuestas__canal { margin-left: var(--e2); font-size: var(--t-xs); color: var(--apagado); }

/* #preguntas-frecuentes, plegadas como los montones; abierta, la respuesta
   entera en lugar de su principio. */
.monton--pregunta + .monton--pregunta { margin-top: var(--e3); }
.monton--pregunta .monton__nombre { font-size: var(--t-lg); }
.monton--pregunta.monton--abierto .monton__titulos { display: none; }
.monton--pregunta .monton__temas { padding: var(--e4) var(--e5) var(--e5); }
.monton--pregunta .entrada { padding: 0; border-bottom: 0; }
.monton--pregunta .entrada__titulo { display: none; }
@media (max-width: 820px) {
  .monton--pregunta .monton__temas { padding: var(--e3) var(--e4) var(--e4); }
}

/* ---------- La ficha de cada persona (Dani, 27-10-2026) ---------- */
/* Lo que la abre: su foto, su nombre o una mención (js/ficha-jugador.js). */
.con-ficha { cursor: pointer; }
strong.con-ficha:hover, .mencion.con-ficha:hover { text-decoration: underline; text-underline-offset: 3px; }
.con-ficha:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; border-radius: 4px; }
.comentario__avatar.con-ficha:focus-visible, .mensaje__avatar.con-ficha:focus-visible, .chat__cara.con-ficha:focus-visible { border-radius: 50%; }

.ficha {
  width: min(460px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--texto);
  overflow: auto;
  overscroll-behavior: contain;
}
.ficha::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
.ficha[open] { animation: ficha-entra var(--rapido, .2s) var(--curva, ease-out); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ficha__cerrar {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 1;
  padding: var(--e1) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
}
.ficha__cerrar:hover { border-color: var(--borde-vivo); }
/* Encima del fondo, de cristal, como «Cerrar sesión» en la tarjeta del perfil. */
.ficha:has(.ficha__portada) .ficha__cerrar { border-color: rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .35); backdrop-filter: blur(12px) saturate(140%); }
.ficha__dentro { padding: var(--e5); }
.ficha__nada { margin: 0; color: var(--apagado); font-size: var(--t-sm); }

/* Centrada, como una tarjeta: la foto arriba y debajo quién es. */
.ficha__cabeza { display: flex; flex-direction: column; align-items: center; gap: var(--e3); padding-top: var(--e3); margin-bottom: var(--e5); text-align: center; }
.ficha__foto.comentario__avatar { width: 84px; height: 84px; font-size: var(--t-lg); }
.ficha__quien { min-width: 0; max-width: 100%; }
.ficha__nombre { margin: 0; font-size: var(--t-lg); line-height: 1.2; overflow-wrap: anywhere; }
.ficha__usuario { margin: 2px 0 0; color: var(--apagado); font-size: var(--t-sm); overflow-wrap: anywhere; }
.ficha__marcas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e2); margin: var(--e3) 0 0; }
.ficha__marcas .insignia { margin-left: 0; }
.ficha__desde { color: var(--medio); font-size: var(--t-xs); }
.ficha__rango { color: var(--medio); font-size: var(--t-xs); }

.ficha__seccion { padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--borde); }
.ficha__titulo { margin: 0 0 var(--e3); color: var(--apagado); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ficha__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--e2); }
.ficha__cifra { padding: var(--e3); border-radius: var(--r-sm); background: var(--superficie-2); }
.ficha__cifra strong { display: block; color: var(--arena); font-size: var(--t-md); line-height: 1.2; }
.ficha__cifra span { display: block; margin-top: 2px; color: var(--apagado); font-size: var(--t-xs); }

.ficha__logros { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.ficha__logro { border: 1px solid rgba(240, 185, 104, .3); border-radius: var(--r-redondo); background: rgba(240, 185, 104, .1); color: var(--arena); font-size: var(--t-xs); font-weight: 600; }
.ficha__logro button { padding: 3px var(--e3); border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ficha__logro:has([aria-expanded="true"]) { background: rgba(240, 185, 104, .24); }
.ficha__logro-que { margin: var(--e3) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tenue); }
.ficha__logro-que[hidden] { display: none; }

.ficha__temas { margin: 0; padding: 0; list-style: none; }
.ficha__tema { display: block; padding: var(--e2) 0; color: var(--texto); text-decoration: none; }
.ficha__temas li + li .ficha__tema { border-top: 1px solid var(--borde); }
.ficha__tema strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ficha__tema span { color: var(--apagado); font-size: var(--t-xs); }
.ficha__tema:hover strong { color: var(--arena); }

/* Diseño 1, «Portada arriba» (Dani, 28-10-2026): su fondo de lado a lado, la
   foto encima del borde y, debajo del nombre, Seguidores, Amigos y el botón. */
.ficha__portada { position: relative; height: 150px; margin: calc(-1 * var(--e5)) calc(-1 * var(--e5)) 0; background: var(--superficie-2); }
.ficha__portada img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.ficha__portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, var(--superficie) 100%); }
.ficha__portada + .ficha__cabeza { position: relative; margin-top: -52px; padding-top: 0; }
.ficha__portada + .ficha__cabeza .ficha__foto.comentario__avatar { width: 100px; height: 100px; box-shadow: 0 0 0 4px var(--superficie); }
.ficha__portada + .ficha__cabeza .ficha__foto.comentario__avatar--fundador { box-shadow: 0 0 0 3px var(--arena), 0 0 0 7px var(--superficie); }
.ficha__portada + .ficha__cabeza .ficha__foto.comentario__avatar--desarrollador { box-shadow: 0 0 0 3px var(--arena), 0 0 0 7px var(--superficie), 0 0 18px rgba(240, 185, 104, .45); }
.ficha__portada + .ficha__cabeza .ficha__nombre { font: 800 22px/1.15 var(--titular); }
.ficha__tesigue { margin-left: var(--e2); padding: 2px var(--e2); border-radius: 6px; background: var(--superficie-2); color: var(--tenue); font-size: 11px; font-weight: 600; white-space: nowrap; }

.ficha__lazos { width: 100%; }
.ficha__gente { display: flex; justify-content: center; margin: var(--e1) 0 var(--e4); }
.ficha__gente div { padding: 0 22px; }
.ficha__gente div + div { border-left: 1px solid var(--borde); }
.ficha__gente strong { display: block; font: 800 20px/1.2 var(--titular); font-variant-numeric: tabular-nums; }
.ficha__gente span { color: var(--apagado); font-size: var(--t-xs); }
.ficha__seguir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--arena);
  border-radius: var(--r-redondo);
  background: var(--arena);
  color: var(--arena-honda);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ficha__seguir:hover { background: var(--arena-viva); border-color: var(--arena-viva); }
.ficha__seguir--hecho, .ficha__seguir--hecho:hover { background: transparent; border-color: var(--borde-vivo); color: var(--texto); }
.ficha__seguir--hecho:hover { border-color: var(--tenue); }
.ficha__seguir--amigos, .ficha__seguir--amigos:hover { border-color: rgba(240, 185, 104, .5); color: var(--arena); }
.ficha__seguir:disabled { opacity: .6; cursor: progress; }
.ficha__seguir:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }
.ficha__seguir svg { flex: none; width: 16px; height: 16px; }
.ficha__fallo { margin: var(--e2) 0 0; color: var(--alarma); font-size: var(--t-xs); }
@media (prefers-reduced-motion: reduce) { .ficha__seguir { transition: none; } }

/*
 * Tarjetas (Dani, 28-10-2026, diseño 1 de seis): #novedades y #devhub, cada
 * tema en su caja, con la foto arriba de borde a borde y lo demás dentro. En
 * #novedades no va la firma: la etiqueta y el día, y la novedad.
 */
.entrada--tarjeta,
.entrada--articulo {
  margin-bottom: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  overflow: hidden;
}
.entrada--tarjeta:last-child, .entrada--articulo:last-child { border-bottom: 1px solid var(--borde); }

.entrada--tarjeta { padding: 0 0 var(--e4); }
.entrada--tarjeta > * { margin-inline: var(--e4); }
.entrada--tarjeta > .entrada__fotos--novedad { margin: 0; gap: 2px; }
.entrada--tarjeta > .entrada__fotos--novedad a { border: 0; border-radius: 0; }
.entrada--tarjeta > .entrada__cabeza { margin-top: var(--e4); }
.entrada--tarjeta .entrada__cabeza .marcas { margin: 0; }
.entrada--tarjeta .entrada__cabeza > button:first-of-type { margin-left: auto; }
.entrada--tarjeta > .entrada__titulo { margin-top: var(--e3); font-size: var(--t-xl); line-height: 1.2; }
/* «Nueva» (4-11-2026): rellena, para que se distinga de la etiqueta del tema de al lado. */
.etiqueta-nueva {
  padding: 2px var(--e3);
  border-radius: 999px;
  background: var(--arena);
  color: #1a1206;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .02em;
}

.entrada--articulo { padding: 22px; }

/*
 * En el ordenador, tres por fila y en 4:5 (Dani, 28-10-2026: «en lugar de salir
 * los temas uno debajo del otro salgan 3 por fila»): #actualizaciones,
 * #novedades, #deseos, #bugs y #feedback. El móvil, como estaba. El 4:5 es lo
 * mínimo: si no cabe, la tarjeta crece. Lo abierto ocupa la fila entera y se
 * ve como antes.
 */
@media (min-width: 821px) {
  #sala-contenido[data-canal="novedades"],
  #sala-contenido:is([data-canal="deseos"], [data-canal="bugs"], [data-canal="feedback"]) .montones,
  #sala-contenido[data-canal="actualizaciones"] .ideas__lista:not(.monton__temas) {
    display: grid;
    grid-template-columns: repeat(var(--en-fila, 2), minmax(0, 1fr));
    gap: var(--e4);
    align-items: stretch;
  }

  /* #novedades: lo que no es una novedad (publicar, «Ver más»), a lo ancho. */
  #sala-contenido[data-canal="novedades"] > :not(.entrada--tarjeta) { grid-column: 1 / -1; }
  #sala-contenido[data-canal="novedades"] > .entrada--tarjeta {
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
  }
  #sala-contenido[data-canal="novedades"] > .entrada--tarjeta > .entrada__fotos--novedad > a:only-child { aspect-ratio: 4 / 3; }

  /* Los montones cerrados: el número arriba, el nombre, sus temas uno debajo
     de otro hasta donde quepan, y abajo la hora o los corazones. */
  #sala-contenido .montones > .montones__nota { grid-column: 1 / -1; margin: 0; }
  #sala-contenido .montones > .monton--abierto { grid-column: 1 / -1; }
  #sala-contenido:is([data-canal="deseos"], [data-canal="bugs"], [data-canal="feedback"]) .monton:not(.monton--abierto) {
    aspect-ratio: 4 / 5;
    display: flex;
  }
  #sala-contenido:is([data-canal="deseos"], [data-canal="bugs"], [data-canal="feedback"]) .monton:not(.monton--abierto) > .monton__cabeza {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "cuantos . punto" "texto texto texto" "cuando cuando flecha";
    align-items: start;
    gap: var(--e4) var(--e3);
    height: 100%;
  }
  .monton:not(.monton--abierto) > .monton__cabeza > .monton__cuantos { grid-area: cuantos; }
  .monton:not(.monton--abierto) > .monton__cabeza > .punto-nuevo { grid-area: punto; align-self: center; }
  .monton:not(.monton--abierto) > .monton__cabeza > .monton__texto {
    grid-area: texto;
    align-self: stretch;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 75%, transparent);
    mask-image: linear-gradient(#000 75%, transparent);
  }
  .monton:not(.monton--abierto) > .monton__cabeza > :is(.monton__cuando, .monton__corazones) { grid-area: cuando; align-self: center; }
  .monton:not(.monton--abierto) > .monton__cabeza > .monton__flecha { grid-area: flecha; align-self: center; }
  #sala-contenido .monton:not(.monton--abierto) .monton__titulos { margin-top: var(--e3); white-space: normal; }
  #sala-contenido .monton:not(.monton--abierto) .monton__titulo {
    display: -webkit-box;
    margin-top: var(--e2);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--t-md);
    line-height: 1.45;
    color: var(--tenue);
  }
  #sala-contenido .monton:not(.monton--abierto) .monton__titulo::before { content: none; }
}
@media (min-width: 1200px) {
  #sala-contenido { --en-fila: 3; }
}
.entrada--articulo .entrada__foto { border-radius: var(--r-md); }

@media (max-width: 40rem) {
  .entrada--articulo { padding: 0 0 var(--e4); }
  .entrada--articulo > :not(.entrada__foto) { margin-inline: var(--e4); }
  .entrada--articulo .entrada__foto { border-radius: 0; }
}

/* La semana que viene, arriba del devhub (Dani, 28-10-2026: la 3B): la semana
   en dorado y cuánto falta, sobre la foto de la última difuminada. */
.semana-viene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  min-height: 210px;
  margin-bottom: var(--e4);
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgb(240 185 104 / .3);
  border-radius: var(--r-lg);
  background: var(--superficie);
}
.semana-viene__fondo { position: absolute; inset: 0; z-index: -1; }
.semana-viene__fondo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.5); transform: scale(1.3); }
.semana-viene__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .78), rgb(0 0 0 / .35) 70%, rgb(0 0 0 / .55)); }
.semana-viene .entrada__semana { -webkit-text-stroke-color: var(--arena); }
.semana-viene__cuenta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
.semana-viene__cuenta small { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #d6d6d6; }
.semana-viene__cuenta b { font: 900 54px/1 var(--titular); letter-spacing: -.02em; color: var(--arena); font-variant-numeric: tabular-nums; white-space: nowrap; }
.semana-viene__dia { margin-top: 6px; font-size: 15px; color: #d6d6d6; }

@media (max-width: 1100px) {
  .semana-viene { grid-template-columns: 90px minmax(0, 1fr); gap: 22px; }
  .semana-viene__cuenta b { font-size: 44px; }
}
@media (max-width: 40rem) {
  .semana-viene { grid-template-columns: 1fr; gap: var(--e3); min-height: 0; padding: var(--e4); }
  .semana-viene__cuenta b { font-size: 30px; }
  .semana-viene__dia { font-size: 13px; }
}

/* ---------- Moderar a una persona (3-11-2026) ---------- */
/* La ventana de castigar y cerrar cuentas (js/moderar.js). Igual que la ficha,
   que es desde donde se abre en la comunidad. */
.moderar {
  width: min(480px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--texto);
  overflow: auto;
  overscroll-behavior: contain;
}
.moderar::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
.moderar[open] { animation: ficha-entra var(--rapido, .2s) var(--curva, ease-out); }
.moderar__cerrar {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 1;
  padding: var(--e1) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
}
.moderar__cerrar:hover { border-color: var(--borde-vivo); }
.moderar__dentro { padding: var(--e5); }
.moderar__nada { margin: 0; color: var(--apagado); font-size: var(--t-sm); }

.moderar__cabeza { padding-right: 72px; margin-bottom: var(--e4); }
.moderar__nombre { margin: 0; font-size: var(--t-lg); line-height: 1.2; overflow-wrap: anywhere; }
.moderar__pista { margin: var(--e1) 0 0; color: var(--apagado); font-size: var(--t-sm); }

.moderar__estado {
  margin: 0;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  font-size: var(--t-sm);
}
.moderar__estado--malo { background: rgba(226, 114, 92, .12); color: #f6b7a6; }

.moderar__seccion { padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--borde); }
.moderar__titulo { margin: 0 0 var(--e3); color: var(--apagado); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.moderar__seccion .moderar__pista { margin: 0 0 var(--e3); }

/* Los cuatro escalones en fila; el que toca, en arena. */
.moderar__escalones { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.moderar .boton--pequeno { min-height: 36px; padding: var(--e2) var(--e3); font-size: var(--t-sm); }
@media (max-width: 30rem) {
  .moderar__escalones { grid-template-columns: repeat(2, 1fr); }
}

.moderar__motivo {
  display: block;
  width: 100%;
  margin-top: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  resize: vertical;
}
.moderar__motivo:focus { outline: none; border-color: var(--arena); }
.moderar__casilla { display: flex; gap: var(--e2); align-items: flex-start; margin-top: var(--e3); color: var(--apagado); font-size: var(--t-sm); cursor: pointer; }
.moderar__casilla input { margin-top: 3px; accent-color: var(--arena); }

.moderar__otras { display: flex; flex-wrap: wrap; gap: var(--e2); }

.moderar__historial { display: grid; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.moderar__paso-que { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; font-size: var(--t-sm); font-weight: 600; }
.moderar__paso-pista { margin: 2px 0 0; color: var(--apagado); font-size: var(--t-xs); }
.moderar__paso-motivo { margin: var(--e1) 0 0; color: var(--medio); font-size: var(--t-sm); overflow-wrap: anywhere; }

/* El botón de la ficha que la abre, solo para la administración. */
.ficha__moderar { display: flex; justify-content: center; margin-top: var(--e5); }

/* Quien está castigado: el aviso encima de la sala y sin dónde escribir. La
   base lo frena igual; esto es para que no lo intente a ciegas. */
.aviso-castigo {
  margin: 0;
  padding: var(--e3) var(--e5);
  border-top: 1px solid rgba(226, 114, 92, .35);
  background: rgba(226, 114, 92, .12);
  color: #f6b7a6;
  font-size: var(--t-sm);
  text-align: center;
}
/* La sala va en fila (paginas-sala.css): con el aviso, en columna, para que
   quede encima y la sala ocupe lo que sobra. */
.sala-pagina:has(> .aviso-castigo) { flex-direction: column; }
/* En el móvil la sala justifica los párrafos: lo centrado, con la última línea en medio. */
.sala-pagina .aviso-castigo { text-align-last: center; }
body.castigado .nuevo-tema,
body.castigado form.comentar,
body.castigado .records__form,
body.castigado form.chat__escribir { display: none !important; }
/* ---------- Temas y canales (28-10-2026): silenciar, la fila de la isla,
   encuestas, retos, récords y capturas. js/sala.js ---------- */

/* Silenciar: «⋯» al pasar por encima o con el foco; en el móvil, pulsación larga. */
.sala__con-menu { position: relative; }
.sala__canal { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sala__callado { flex: none; margin-left: auto; font-size: 12px; opacity: .7; }
.sala__canal--callado { color: var(--apagado); }
.sala__opciones {
  position: absolute; top: 20px; right: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: var(--superficie-2); color: var(--tenue); font: inherit; font-size: 16px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity var(--rapido) var(--curva);
}
.sala__con-menu:hover .sala__opciones,
.sala__con-menu:focus-within .sala__opciones { opacity: 1; }
.sala__opciones:hover { color: var(--texto); }
@media (hover: none) { .sala__opciones:not(:focus-visible) { opacity: 0; pointer-events: none; } }
.sala__menu {
  position: absolute; top: 38px; right: 6px; z-index: 40; min-width: 200px; padding: 6px;
  background: var(--fondo-2); border: 1px solid var(--borde-vivo); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9);
}
.sala__menu-opcion {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--texto); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer;
}
.sala__menu-opcion:hover, .sala__menu-opcion:focus-visible { background: var(--superficie-2); }

/* La fila «De la isla», debajo de las ocho de siempre. */
.reacciones__titulo {
  grid-column: 1 / -1; margin: 4px 4px 0; color: var(--tenue);
  font-size: var(--t-xs); font-weight: 700;
}

/* Encuestas: barras en arena. */
.encuesta { display: grid; gap: 6px; margin: var(--e3) 0 0; }
.encuesta__opcion {
  --parte: 0%;
  position: relative; display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 42px;
  padding: 8px 12px; overflow: hidden; border: 1px solid var(--borde-vivo); border-radius: 10px;
  background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer;
}
.encuesta__opcion::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--parte);
  background: rgb(240 185 104 / .18); transition: width .4s var(--curva);
}
.encuesta__opcion:hover, .encuesta__opcion[aria-pressed="true"] { border-color: var(--arena); }
.encuesta__opcion[aria-pressed="true"]::before { background: rgb(240 185 104 / .32); }
.encuesta__texto, .encuesta__cifra { position: relative; }
.encuesta__texto { flex: 1; overflow-wrap: anywhere; }
.encuesta__cifra { flex: none; color: var(--arena); font-weight: 700; }
.encuesta__pie { margin: 2px 0 0; color: var(--tenue); font-size: var(--t-xs); }
.nuevo-tema__encuesta { display: grid; gap: var(--e2); justify-items: start; }
.nuevo-tema__respuestas { display: grid; gap: var(--e2); width: 100%; }
.nuevo-tema__campos { display: grid; gap: 6px; }

/* Lo que espera aprobación (solo lo ve su autor). */
.por-aprobar {
  width: fit-content; margin: var(--e2) 0 0; padding: 6px 10px; border-radius: 8px;
  background: rgb(240 185 104 / .1); color: var(--arena); font-size: var(--t-xs); font-weight: 700;
}
/* Lo mío que no se publicó, con el motivo (W91, 4-11-2026). */
.por-aprobar--no { display: grid; gap: 4px; background: rgb(226 114 92 / .1); color: var(--alarma); }
.por-aprobar--no p { margin: 0; color: var(--tenue); font-weight: 400; line-height: 1.45; }

/* Las caras pequeñas de los retos y los récords. */
.cara {
  flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; overflow: hidden;
  border: 2px solid var(--fondo-2); border-radius: 50%;
  background: linear-gradient(160deg, var(--arena-viva), var(--arena));
  color: var(--arena-honda); font-size: 11px; font-weight: 800;
}
.cara img { width: 100%; height: 100%; object-fit: cover; }

/* #retos */
.reto { display: grid; gap: var(--e3); margin: var(--e3) 0 0; }
.reto__fila, .reto__quien { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.reto__boton {
  min-height: 38px; padding: 8px 16px; border: 1px solid var(--arena); border-radius: 999px;
  background: var(--arena); color: var(--arena-honda); font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer;
}
.reto__boton:hover { border-color: var(--arena-viva); background: var(--arena-viva); }
.reto__boton:disabled { opacity: .6; cursor: default; }
.reto__estado { color: var(--tenue); font-size: var(--t-sm); }
.reto__estado--hecho { color: var(--arena); font-weight: 700; }
.reto__cuantos { color: var(--texto); font-size: var(--t-sm); font-weight: 700; }
.reto__caras { display: inline-flex; flex-wrap: wrap; padding-left: 6px; }
.reto__caras > .cara { margin-left: -6px; }
.reto__mas { align-self: center; margin-left: 6px; color: var(--tenue); font-size: var(--t-xs); }
.reto__esperan { display: grid; gap: 6px; padding: var(--e3); border: 1px dashed var(--borde-vivo); border-radius: 12px; }
.reto__titulo { margin: 0; color: var(--tenue); font-size: var(--t-xs); font-weight: 700; }
.reto__espera { display: flex; align-items: center; gap: var(--e2); }
.reto__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.reto__espera .reto__boton { min-height: 32px; padding: 4px 12px; }

/* #records */
.records {
  display: grid; gap: var(--e4); margin: 0 0 var(--e4); padding: var(--e4);
  border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie);
}
.records__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.records__titulo { margin: 0; font-size: var(--t-lg); }
.records__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.records__form { display: grid; gap: var(--e2); }
.records__mias { display: grid; gap: 4px; }
.records__mia { margin: 0; color: var(--arena); font-size: var(--t-xs); font-weight: 700; }
.records__vacio { margin: 0; color: var(--tenue); font-size: var(--t-sm); }
.records__tablas { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.records__tabla { display: grid; gap: var(--e2); align-content: start; }
.records__categoria { margin: 0; color: var(--tenue); font-size: var(--t-sm); font-weight: 700; }
.records__podio, .records__resto { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.records__puesto { display: flex; align-items: center; gap: var(--e2); padding: 6px 8px; border-radius: 10px; font-size: var(--t-sm); }
.records__puesto--podio { background: var(--superficie-2); }
.records__puesto--podio:first-child { background: rgb(240 185 104 / .12); }
.records__medalla { flex: none; width: 26px; text-align: center; font-size: 18px; }
.records__resto .records__medalla { color: var(--tenue); font-size: var(--t-xs); }
.records__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.records__valor { flex: none; color: var(--arena); font-weight: 700; }

/* #capturas: la foto de la semana, arriba. */
.foto-semana {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: var(--e4);
  margin: 0 0 var(--e4); padding: var(--e3); border: 1px solid var(--arena); border-radius: 16px; background: var(--superficie);
}
.foto-semana__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; }
.foto-semana__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-semana__texto { display: grid; gap: 4px; padding-bottom: 4px; }
.foto-semana__etiqueta { margin: 0; color: var(--arena); font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.foto-semana__titulo { margin: 0; color: var(--texto); font-weight: 700; }
.foto-semana__quien { margin: 0; color: var(--tenue); font-size: var(--t-sm); }
@media (max-width: 600px) {
  .foto-semana { grid-template-columns: 1fr; }
}

/* La racha (idea 1): junto a tu nombre en tu ficha de la sala; en el móvil,
   donde la ficha no sale, arriba de la lista de canales. */
.sala__racha { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0; padding: 6px 18px 0; color: var(--arena); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Al lado, cuántos somos (11-11-2026): el diseño 1, centrado y con una raya fina. */
.sala__racha-dato { display: inline-flex; align-items: center; gap: 7px; }
.sala__racha-dato svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sala__racha-raya { width: 1px; height: 14px; background: #3a3a3a; }
.sala__racha--movil { display: none; margin: 0 4px var(--e3); padding: 0; }
@media (max-width: 820px) {
  .sala__racha--movil { display: flex; }
}

/* #ranking (1-11-2026): diez rankings cada mes, el diseño 7, «Rejilla de diez».
   Las tarjetas van de cinco en fila, o de dos si la columna es estrecha. */
.ranking { container-type: inline-size; display: grid; gap: var(--e5); }
.ranking__franja {
  display: grid; gap: var(--e4); padding: 22px 24px; border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: linear-gradient(90deg, rgb(0 0 0 / .92) 35%, rgb(0 0 0 / .55)), url("/img/capturas/white-island-anochecer-960.webp") center / cover;
}
.ranking__lema { display: flex; align-items: center; gap: var(--e4); }
.ranking__diez {
  flex: none; color: var(--arena); font-family: var(--titular); font-size: 92px; font-weight: 800;
  line-height: .82; letter-spacing: -.06em;
}
.ranking__que { display: grid; gap: var(--e2); min-width: 0; }
.ranking__rankings { margin: 0; color: var(--texto); font-family: var(--titular); font-size: 22px; font-weight: 700; }
.ranking__dibujos { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.ranking__dibujos li {
  display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #232323; border-radius: 8px;
  background: #141414; font-size: 15px;
}
.ranking__pestanas {
  display: flex; gap: 4px; width: fit-content; max-width: 100%; padding: 4px;
  border: 1px solid var(--borde); border-radius: 16px; background: #0d0d0d;
}
.ranking__pestana {
  display: grid; justify-items: start; gap: 1px; min-height: 48px; padding: 8px 18px; border: 0; border-radius: 12px;
  background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.ranking__pestana b { display: flex; align-items: center; gap: 7px; font-family: var(--titular); font-size: 16px; font-weight: 800; }
.ranking__pestana small { color: var(--tenue); font-size: 12px; }
.ranking__pestana[aria-selected="true"] { background: var(--arena); color: #141414; }
.ranking__pestana[aria-selected="true"] small { color: #3d2f1a; }
.ranking__pestana:focus-visible { outline: 2px solid var(--arena-viva); outline-offset: 2px; }
.ranking__vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--bien); box-shadow: 0 0 0 3px rgb(98 196 140 / .18); }

.ranking__panel { display: grid; gap: var(--e3); }
.ranking__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; font-family: var(--titular); font-size: 22px; }
.ranking__directo {
  padding: 3px 8px; border-radius: var(--r-redondo); background: rgb(98 196 140 / .12); color: var(--bien);
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ranking__texto { margin: 0; color: var(--tenue); font-size: var(--t-sm); line-height: 1.5; }
.ranking__rejilla { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: var(--e2) 0 0; padding: 0; }
@container (max-width: 760px) {
  .ranking__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.ranking__tarjeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 14px 13px 15px;
  border: 1px solid #1f1f1f; border-radius: 16px; background: #0b0b0b;
}
.ranking__tarjeta--gana { border-color: rgb(240 185 104 / .28); }
.ranking__cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ranking__emoji {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #262626; border-radius: 12px;
  background: #171717; font-size: 20px;
}
.ranking__nombre { margin: 0; font-family: var(--titular); font-size: 15px; font-weight: 700; line-height: 1.2; }
.ranking__raya { align-self: stretch; height: 1px; margin: 6px 0; border: 0; background: #1f1f1f; }
.ranking__quien { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.ranking .ranking__cara { flex: none; width: 36px; height: 36px; border: 0; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--arena); }
.ranking__persona { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-size: 14px; font-weight: 700; }
.ranking__cifra { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.ranking__cifra b { color: var(--arena); font-family: var(--titular); font-size: 26px; font-weight: 800; line-height: 1.1; }
.ranking__cifra small { color: var(--tenue); font-size: 12px; }
.ranking__detalle { margin: 0; color: var(--tenue); font-size: 12px; line-height: 1.4; }
.ranking__frase { margin: 0; color: var(--texto); font-size: 13px; line-height: 1.35; text-decoration: none; }
a.ranking__frase:hover { color: var(--arena); }
.ranking__etiqueta { padding: 3px 8px; border-radius: 6px; background: #0e2418; color: var(--bien); font-size: 11px; font-weight: 700; }
.ranking__foto { display: block; align-self: stretch; height: 66px; overflow: hidden; border-radius: 9px; }
.ranking__foto img, .ranking__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ranking__hueco {
  display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px dashed #4a4a4a; border-radius: 50%; color: #8a8a8a;
}
.ranking__hueco svg { width: 16px; height: 16px; }
.ranking__estreno { margin: 0; color: var(--texto); font-size: 14px; font-weight: 700; }

/* «Así va»: los tres primeros de cada ranking. */
.ranking__tres { list-style: none; display: grid; gap: 4px; align-self: stretch; margin: 0; padding: 0; }
.ranking__fila { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 34px; }
.ranking__puesto { flex: none; width: 12px; font-size: 12px; font-weight: 800; text-align: center; }
.ranking__fila--1 .ranking__puesto { color: var(--arena); }
.ranking__fila--2 .ranking__puesto { color: #d4d4d4; }
.ranking__fila--3 .ranking__puesto { color: #d9a27a; }
.ranking .ranking__fila .ranking__cara { width: 26px; height: 26px; box-shadow: none; font-size: 10px; }
.ranking .ranking__fila--1 .ranking__cara { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3.5px var(--arena); }
.ranking__fila .ranking__persona { flex: 1; min-width: 3.5em; color: #d6d6d6; font-size: 12px; font-weight: 400; }
.ranking__fila .ranking__cifra { flex: none; }
.ranking__fila .ranking__cifra b { color: #f2f2f2; font-size: 15px; }
.ranking__fila--1 .ranking__cifra b { color: var(--arena); }
.ranking__fila .ranking__cifra small { font-size: 11px; }
.ranking__fila--nadie .ranking__persona { color: #8a8a8a; }
.ranking__hueco--chico { flex: none; width: 26px; height: 26px; }
.ranking__mini { flex: none; display: block; width: 36px; height: 28px; overflow: hidden; border-radius: 6px; }
/* Donde no cabe en una línea (el móvil y la fila con foto), la cifra va debajo del nombre. */
.ranking__fila:has(.ranking__mini) {
  display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; padding: 3px 0;
}
.ranking__fila:has(.ranking__mini) > :is(.ranking__puesto, .ranking__cara) { grid-row: 1 / span 2; }
.ranking__fila:has(.ranking__mini) > :is(.ranking__persona, .ranking__cifra) { grid-column: 3; min-width: 0; }
.ranking__fila:has(.ranking__mini) > .ranking__mini { grid-column: 4; grid-row: 1; }
/* La cifra de la captura usa también el ancho de la foto, para no partirse. */
.ranking__fila:has(.ranking__mini) > .ranking__cifra { grid-column: 3 / span 2; white-space: nowrap; }
@container (max-width: 760px) {
  .ranking__fila:not(.ranking__fila--nadie, :has(.ranking__mini)) {
    display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; padding: 3px 0;
  }
  .ranking__fila:not(.ranking__fila--nadie, :has(.ranking__mini)) > :is(.ranking__puesto, .ranking__cara) { grid-row: 1 / span 2; }
  .ranking__fila:not(.ranking__fila--nadie, :has(.ranking__mini)) > :is(.ranking__persona, .ranking__cifra) { grid-column: 3; min-width: 0; }
}

/* Debajo: cómo se cuenta cada ranking y las notas. */
.ranking__como { padding: 20px 22px; border: 1px solid #1d1d1d; border-radius: 18px; background: #070707; }
.ranking__como-titulo { margin: 0 0 var(--e3); font-family: var(--titular); font-size: 16px; }
.ranking__como-lista {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px var(--e5);
  margin: 0; padding: 0;
}
.ranking__como-lista li { display: flex; align-items: flex-start; gap: 10px; color: var(--tenue); font-size: 12.5px; line-height: 1.5; }
.ranking__como-lista strong { color: var(--texto); }
.ranking__como-emoji { flex: none; width: 1.4em; text-align: center; }
.ranking__notas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin: 0; padding: 0; color: var(--tenue); font-size: 12px; }
.ranking__notas li { display: flex; align-items: center; gap: 6px; }
.ranking__notas svg { flex: none; width: 14px; height: 14px; }
.ranking__quedan {
  display: inline-block; padding: 4px 12px; border: 1px solid rgb(240 185 104 / .45); border-radius: var(--r-redondo);
  background: rgb(240 185 104 / .1); color: var(--arena); font-size: 13.5px; font-weight: 700; white-space: nowrap;
}

@media (max-width: 820px) {
  .ranking__franja { padding: var(--e4); }
  .ranking__diez { font-size: 76px; }
  .ranking__rankings { font-size: 18px; }
  .ranking__dibujos li { width: 26px; height: 26px; font-size: 13px; }
  .ranking__pestanas { width: 100%; }
  .ranking__pestana { flex: 1; padding: 8px var(--e3); }
  .ranking__como { padding: var(--e4); }
}

/* Arriba de #bugs, el cazador del mes pasado, que lleva a #ranking. */
.ranking-tira {
  display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); padding: 10px var(--e4);
  border: 1px solid rgb(240 185 104 / .35); border-radius: var(--r-md); background: rgb(240 185 104 / .06);
  color: var(--texto); text-decoration: none;
}
.ranking-tira:hover { border-color: var(--arena); }
.ranking-tira__emoji { flex: none; font-size: 20px; }
.ranking-tira__cara { flex: none; width: 32px; height: 32px; }
.ranking-tira__texto { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.ranking-tira__texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.ranking-tira__texto small { color: var(--tenue); font-size: var(--t-xs); }
.ranking-tira__ver { flex: none; color: var(--arena); font-size: var(--t-xs); font-weight: 700; }
@media (max-width: 820px) {
  .ranking-tira__ver { display: none; }
}

/* La ficha de cada uno: la racha, la marca de «Top de …» (ideas 1 y 18) y la
   vitrina, hasta tres logros elegidos arriba (idea 16). */
.ficha__racha { color: var(--arena); font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha__top { border-color: var(--arena); color: var(--arena); text-decoration: none; }
.ficha__vitrina { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--e2); margin: 0; padding: 0; }
.ficha__vitrina li {
  display: grid; justify-items: center; gap: 4px; padding: var(--e3) var(--e2);
  border: 1px solid rgb(240 185 104 / .35); border-radius: var(--r-md); background: rgb(240 185 104 / .06); text-align: center;
}
.ficha__vitrina .medalla { color: var(--arena); }
.ficha__vitrina strong { color: var(--texto); font-size: var(--t-sm); line-height: 1.25; }

/* /perfil#logros: elegir los tres de la vitrina (idea 16). */
.logro__vitrina {
  flex: none; padding: 4px 10px; border: 1px solid var(--borde); border-radius: var(--r-redondo);
  background: transparent; color: var(--tenue); font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer;
}
.logro__vitrina:hover:not(:disabled) { border-color: var(--arena); color: var(--arena); }
.logro__vitrina[aria-pressed="true"] { border-color: var(--arena); background: rgb(240 185 104 / .12); color: var(--arena); }
.logro__vitrina:disabled { opacity: .45; cursor: default; }
.logros__vitrina-que { margin: 0 0 var(--e4); color: var(--tenue); font-size: var(--t-sm); }
/* /home: LA ISLA EN VIVO (W46, Dani 30-10-2026). El «Nuevo 2» del lienzo:
   las pestañas y, a su lado, el botón que pasa de la lista a la cuadrícula. */
.home {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--cabecera, 64px) + var(--e2, 8px)) var(--e4) var(--e8);
}
.home__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 12px; }
.home__titulo {
  margin: 0;
  font-family: var(--titular);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.home__titulo span { color: var(--arena); }
.home__jugando { margin: 0; font-size: 12px; color: var(--tenue); white-space: nowrap; }
.home__jugando::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--arena);
  vertical-align: 1px;
}

.home__mandos { display: flex; gap: 8px; margin-bottom: 12px; }
.home__mandos[hidden] { display: none; }
.home__pestanas {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  /* En el móvil, estilo.css pone a los botones var(--l-boton) con !important. */
  --l-boton: 11px;
}
.home__pestanas button {
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--tenue);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
}
.home__pestanas button:hover { color: var(--texto); }
.home__pestanas button[aria-selected="true"] { background: var(--arena); color: #000; font-weight: 700; }
.home__vista {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}
.home__vista svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.home__vista--puesta { border-color: var(--arena); background: var(--arena-honda); color: var(--arena); }
.home button:focus-visible, .home a:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

/* ---------- La lista ---------- */
.home__lista { display: grid; gap: 12px; }
.home__lista[aria-busy="true"]:empty { min-height: 60vh; }
.home__mas { height: 1px; }

.captura {
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
  overflow: hidden;
  scroll-margin-top: calc(var(--cabecera, 64px) + 12px);
}
.captura__cabeza { display: flex; align-items: center; gap: 10px; padding: 12px; }
.captura__avatar, .celda__avatar {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--arena-honda);
  color: var(--arena);
  font-family: var(--titular);
  font-weight: 800;
}
.captura__avatar { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
.captura__avatar img, .celda__avatar img { width: 100%; height: 100%; object-fit: cover; }
.captura__avatar[data-ficha], .captura__nombre[data-ficha] { cursor: pointer; }
.captura__quien { flex: 1; min-width: 0; }
.captura__fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.captura__nombre { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.captura__fila .marquita {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.captura__fila .marquita--fundador { background: var(--arena); color: #000; }
.captura__cuando { display: block; margin-top: 1px; font-size: 12px; color: var(--tenue); }
.captura__seguir {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--arena);
  border-radius: 8px;
  background: none;
  color: var(--arena);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.captura__seguir--puesto { border-color: var(--borde); background: var(--borde); color: var(--texto); }
.captura__seguir:disabled { opacity: .6; cursor: wait; }
.captura__espera {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--borde);
  background: var(--arena-honda);
  font-size: 12px;
  color: var(--arena);
}
/* Aprobar desde aquí (W91, 4-11-2026): lo que no se publicó, «⋯ → Quitar» y
   los botones de decidir (css/paginas-decidir.css). */
.captura__espera--no { display: grid; gap: 4px; background: rgb(226 114 92 / .1); color: var(--texto); }
.captura__espera--no b { color: var(--alarma); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.captura__espera--no p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tenue); }
.captura__espera--no .decidir { margin-top: 6px; }
.captura__cambiar {
  justify-self: start;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--arena);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
  /* En el móvil, estilo.css pone a los botones var(--l-boton) con !important:
     este es un enlace pequeño, no un botón grande (Dani, 4-11-2026). */
  --l-boton: 12px;
  cursor: pointer;
}
.captura__mas {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: none;
  color: var(--tenue);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.captura__mas:hover, .captura__mas[aria-expanded="true"] { border-color: var(--borde-vivo); color: var(--texto); }
.captura__decidir { padding: 12px; border-top: 1px solid var(--borde); }
.captura__decidir[hidden] { display: none; }
.captura__marco { position: relative; background: #000; }
.captura__foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.captura__chapas { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.captura__chapas span {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgb(0 0 0 / .72);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.captura__texto { margin: 0; padding: 12px 12px 8px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.captura__reacciones { padding: 4px 12px 10px; }
.captura__pie { display: flex; border-top: 1px solid var(--borde); }
.captura__gusta, .captura__comentarios {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--tenue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.captura__gusta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.captura__gusta--puesto { color: var(--arena); }
.captura__gusta--puesto svg { fill: currentColor; }
.captura__gusta:disabled { opacity: .45; cursor: default; }
.captura__comentarios { border-left: 1px solid var(--borde); }
.captura__gusta:not(:disabled):hover, .captura__comentarios:hover { color: var(--texto); background: rgb(255 255 255 / .03); }

/* ---------- La cuadrícula ---------- */
.home__lista--cuadricula {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-radius: 16px;
  overflow: hidden;
}
.celda { position: relative; display: block; aspect-ratio: 1; background: var(--superficie-2); color: #fff; text-decoration: none; }
.celda--grande { grid-row: span 2; aspect-ratio: auto; }
.celda__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.celda__gusta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgb(0 0 0 / .72);
  font-size: 12px;
  font-weight: 700;
  color: var(--arena);
}
.celda__gusta--arriba { top: 8px; bottom: auto; }
.celda__firma {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: 99px;
  background: rgb(0 0 0 / .72);
  font-size: 12px;
  font-weight: 600;
}
.celda__firma > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celda__avatar { width: 22px; height: 22px; border-radius: 50%; font-size: 11px; }

/* Lo de la sala que aquí no va: el vacío y el error sin pastilla. */
.home__lista > .estado {
  grid-column: 1 / -1;
  padding: var(--e8) var(--e4);
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  white-space: normal;
  cursor: auto;
}
/* El vacío de Todos va en dos párrafos. */
.home__lista .estado__texto { white-space: pre-line; }
.home__cerrada { margin-top: var(--e6); }

@media (min-width: 768px) {
  .home__lista--cuadricula { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .home { padding: calc(var(--cabecera, 64px) + 8px) 12px var(--e8); }
}
/* ---------- Decidir una captura (W91, 4-11-2026) ---------- */
/* Los botones de js/decidir-captura.js: «Publicar» a todo el ancho en arena,
   los cuatro motivos en dos por dos y «Otro…» suave, con su campo. Salen en
   /admin («Por aprobar», una a una) y en /home. */
.decidir {
  display: grid;
  gap: var(--e2);
  /* En el móvil, estilo.css pone a los botones var(--l-boton) con !important. */
  --l-boton: var(--t-sm);
}
.decidir[aria-busy="true"] { opacity: .6; }
.decidir__pista { margin: 0; color: var(--tenue); font-size: var(--t-sm); }
.decidir__boton {
  min-height: 40px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.decidir__boton:hover:not(:disabled) { border-color: var(--tenue); }
.decidir__boton:disabled { cursor: wait; }
.decidir__boton:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }
.decidir__publicar {
  width: 100%;
  min-height: 48px;
  border-color: var(--arena);
  background: var(--arena);
  color: #1a1004;
  font-size: var(--t-md);
  font-weight: 700;
}
.decidir__publicar:hover:not(:disabled) { border-color: #ffd08a; background: #ffd08a; }
.decidir__motivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.decidir__otro { background: none; }
.decidir__otro[aria-expanded="true"] { border-color: var(--tenue); }
.decidir__escribir { display: grid; gap: var(--e2); }
.decidir__escribir[hidden] { display: none; }
.decidir__escribir textarea {
  width: 100%;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-sm);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  resize: vertical;
}
.decidir__escribir textarea:focus { outline: none; border-color: var(--arena); }
.decidir__mandar { color: var(--alarma); }
.decidir__fallo { margin: 0; color: var(--alarma); font-size: var(--t-sm); }
.decidir__fallo[hidden] { display: none; }

/* /admin: la cuenta junto a «Por aprobar» y la captura de turno. */
.aprobar-cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: var(--e1);
  padding: 0 7px;
  border-radius: var(--r-redondo);
  background: var(--arena);
  color: #1a1004;
  font-size: var(--t-xs);
  font-weight: 700;
  vertical-align: 3px;
}
.aprobar-cuenta[hidden] { display: none; }
.aprobar-una {
  display: grid;
  gap: var(--e3);
  max-width: 560px;
  margin-bottom: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}
.aprobar-una[hidden] { display: none; }
.aprobar-una__arriba { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--e3); }
.aprobar-una__cuantas {
  flex: none;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-redondo);
  color: var(--tenue);
  font-size: var(--t-xs);
  font-weight: 600;
}
.aprobar-una__quien { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.aprobar-una__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--arena-honda);
  color: var(--arena);
  font-family: var(--titular);
  font-weight: 800;
}
.aprobar-una__avatar img { width: 100%; height: 100%; object-fit: cover; }
.aprobar-una__datos { min-width: 0; }
.aprobar-una__datos b { display: block; overflow: hidden; font-size: var(--t-md); text-overflow: ellipsis; white-space: nowrap; }
.aprobar-una__datos small { color: var(--tenue); font-size: var(--t-xs); }
.aprobar-una__foto { display: block; overflow: hidden; border-radius: var(--r-sm); background: #000; }
.aprobar-una__foto img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.aprobar-una__texto { margin: 0; font-size: var(--t-sm); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.aprobar-una__hecho { margin: 0; color: var(--bien); font-size: var(--t-sm); }
@media (prefers-reduced-motion: no-preference) {
  .aprobar-una > * { animation: aprobar-entra .2s ease-out; }
  @keyframes aprobar-entra { from { opacity: 0; transform: translateY(4px); } }
}


/* css/ideas.css */
/* ---------- #actualizaciones y #deseos: lo que se vota (js/ideas.js) ----------

   Una clasificación: el puesto a la izquierda, la idea en medio y el voto a la
   derecha, que es lo que se viene a pulsar: un corazón, en las próximas
   actualizaciones y en los deseos (hasta el 25-10-2026 las actualizaciones
   llevaban dos pulgares). El rojo del corazón es solo suyo: la arena sigue
   siendo el acento y marca el podio. */

/* El ancho entero de la sala, como el resto de canales (Dani, 26-10-2026);
   hasta entonces, una columna de 56rem. */
.ideas {
  --corazon: #ff5c73;
  --corazon-claro: #ff9aa8;
}

.ideas__que {
  max-width: 62ch;
  margin: 0 0 var(--e5);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--tenue);
}

.ideas__lista { list-style: none; margin: 0; padding: 0; }
.monton__temas .idea { padding: var(--e4) var(--e5); }


/* ---------- Una fila ---------- */

.idea {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: start;
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--borde);
}

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

.idea__puesto {
  padding-top: 3px;
  font-family: var(--titular);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #4a4a4a;
}

.idea--podio .idea__puesto { color: var(--arena); }

.idea__titulo { margin: 0; font-size: var(--t-xl); line-height: 1.3; text-wrap: balance; }

.idea__abrir,
.idea__leer {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.idea__abrir { color: inherit; }

.idea__enlace { color: inherit; text-decoration: none; }

/* Toda la fila lleva al hilo, no solo el título: el corazón queda por encima. */
.idea__enlace::after { content: ""; position: absolute; inset: 0; }

.idea__abrir:hover,
.idea__enlace:hover { color: var(--arena-viva); }

.idea__abrir:focus-visible,
.idea__leer:focus-visible,
.idea__enlace:focus-visible {
  outline: 2px solid var(--arena);
  outline-offset: 3px;
  border-radius: 4px;
}

.idea__extracto {
  display: -webkit-box;
  margin: var(--e2) 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--tenue);
}

.idea--abierta .idea__extracto { display: none; }

.idea__leer {
  min-height: 32px;
  margin-top: var(--e1);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--arena);
}

.idea__leer:hover { color: var(--arena-viva); }

.idea__entera { margin-top: var(--e3); }

.idea__acciones { display: flex; margin-top: var(--e3); }
.idea__acciones .entrada__borrar { margin-left: 0; }

.idea__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e4);
  margin-top: var(--e3);
  font-size: var(--t-sm);
  color: var(--apagado);
}

/* La firma de siempre, en pequeño: aquí acompaña, no encabeza. */
.idea__firma { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.idea__firma .mensaje__avatar { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.idea__firma .mensaje__avatar--fundador,
.idea__firma .mensaje__avatar--desarrollador { border-width: 1.5px; }
.idea__firma strong { font-size: var(--t-sm); color: var(--texto); }
.idea__firma .marquita { margin-left: var(--e1); }

.idea__opiniones { font-weight: 600; }
/* Por encima del enlace que cubre la fila, para que se puedan pulsar. */
.idea__meta .estados { position: relative; z-index: 1; }
/* En las actualizaciones lleva a su hilo de opiniones (Dani, 25-10-2026). */
a.idea__opiniones { color: var(--arena); text-decoration: none; }
a.idea__opiniones:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La recién publicada se ilumina un momento: entra la última y, si no, parece
   que no ha salido. */
.idea--nueva { animation: idea-nueva 1.8s var(--curva); }

@keyframes idea-nueva {
  0%, 35% { background: rgba(240, 185, 104, .1); }
  100% { background: transparent; }
}


/* ---------- El texto entero ---------- */

.idea__texto {
  max-width: 68ch;
  font-size: var(--t-base);
  line-height: 1.7;
  color: #d4d4d4;
  overflow-wrap: anywhere;
}

/* pre-line: dentro de un párrafo, cada renglón sigue siendo un renglón. */
.idea__texto p { margin: 0 0 var(--e3); white-space: pre-line; }

.idea__texto ul {
  display: grid;
  gap: 3px;
  margin: 0 0 var(--e3);
  padding: 0;
  list-style: none;
}

/* Sitio para «10.», no solo para «•». */
.idea__texto li { position: relative; padding-left: 1.7em; }

.idea__texto li::before {
  content: attr(data-marca);
  position: absolute;
  left: .25em;
  font-weight: 700;
  color: var(--arena);
}

.idea__texto > :last-child { margin-bottom: 0; }


/* ---------- El corazón ---------- */

/* Con su número dentro, como cualquier «me gusta»: una sola cuenta ya dice de
   quién es. */
.corazon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: var(--e2);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  color: var(--tenue);
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.corazon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill var(--rapido) var(--curva), stroke var(--rapido) var(--curva);
}

.corazon:hover { border-color: rgba(255, 92, 115, .55); color: var(--texto); }
.corazon:focus-visible { outline: 2px solid var(--corazon); outline-offset: 2px; }

.corazon--puesto {
  border-color: rgba(255, 92, 115, .5);
  background: rgba(255, 92, 115, .1);
  color: var(--corazon-claro);
}

.corazon--puesto svg { fill: var(--corazon); stroke: var(--corazon); }

.corazon__cuenta { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.corazon__cuenta:empty { display: none; }


/* El que se acaba de poner da un saltito. */
.voto--late svg { animation: latido 420ms var(--curva-entrada); }

@keyframes latido {
  30% { scale: 1.35; }
  100% { scale: 1; }
}


/* ---------- El hilo ---------- */

.ideas__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 40px;
  margin-bottom: var(--e3);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tenue);
  text-decoration: none;
}

.ideas__volver::before { content: "←"; }
.ideas__volver:hover { color: var(--arena-viva); }

.idea-hilo__titular {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  margin: var(--e4) 0 var(--e3);
}

.idea-hilo__titulo { margin: 0; font-size: var(--t-2xl); text-wrap: balance; }

.idea-hilo__opiniones { margin-top: var(--e6); }

.idea-hilo__solo { margin: var(--e4) 0 0; font-size: var(--t-md); color: var(--tenue); }

.idea-hilo__pista { margin: calc(-1 * var(--e2)) 0 var(--e4); font-size: var(--t-sm); color: var(--tenue); }

/* Juntar dos deseos repetidos, solo la administración. */
.idea-hilo__juntar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-left: auto; }
.idea-hilo__juntar-con { max-width: 260px; min-height: 34px; padding: 0 var(--e2); font: inherit; font-size: var(--t-sm); color: var(--texto); background: var(--superficie-2); border: 1px solid var(--borde-vivo); border-radius: 8px; }

.idea-hilo__cabecera {
  margin: 0 0 var(--e4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado);
}


@media (max-width: 560px) {
  .idea { grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: var(--e3); }
  .idea__puesto { font-size: var(--t-xl); }
  .idea__titulo { font-size: var(--t-lg); }
  .monton__temas .idea { padding: var(--e4); }
}

@media (prefers-reduced-motion: reduce) {
  .idea--nueva,
  .voto--late svg { animation: none; }
}

/* Al desarrollador, encima de su caja: aquí publica solo él (25-10-2026). */
.ideas__pista { margin: 0 0 var(--e3); font-size: var(--t-sm); color: var(--apagado); }

/* #actualizaciones: cada una en su tarjeta, como #novedades (Dani, 28-10-2026). */
.ideas__lista:not(.monton__temas) { display: grid; gap: var(--e3); }
.ideas__lista:not(.monton__temas) > .idea--tarjeta {
  padding: var(--e5) var(--e5) var(--e5) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

@media (max-width: 560px) {
  .ideas__lista:not(.monton__temas) > .idea--tarjeta { padding: var(--e4) var(--e4) var(--e4) var(--e2); }
}

/* En el ordenador, de tres en fila y en 4:5 (Dani, 28-10-2026; la rejilla, en
   paginas.css): el puesto y el corazón arriba, el título y el principio debajo,
   lo de abajo al fondo. La que se lee entera, a lo ancho de la fila. */
@media (min-width: 821px) {
  #sala-contenido[data-canal="actualizaciones"] .ideas__lista > .idea--tarjeta:not(.idea--abierta) {
    aspect-ratio: 4 / 5;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "puesto voto" "centro centro";
    padding: var(--e5);
  }
  #sala-contenido[data-canal="actualizaciones"] .idea--tarjeta:not(.idea--abierta) > .idea__puesto { grid-area: puesto; text-align: left; }
  #sala-contenido[data-canal="actualizaciones"] .idea--tarjeta:not(.idea--abierta) > .idea__centro {
    grid-area: centro;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #sala-contenido[data-canal="actualizaciones"] .idea--tarjeta:not(.idea--abierta) > :last-child { grid-area: voto; }
  #sala-contenido[data-canal="actualizaciones"] .idea--tarjeta:not(.idea--abierta) .idea__extracto { -webkit-line-clamp: 7; }
  #sala-contenido[data-canal="actualizaciones"] .idea--tarjeta:not(.idea--abierta) .idea__meta { margin-top: auto; padding-top: var(--e3); }
  #sala-contenido[data-canal="actualizaciones"] .ideas__lista > .idea--abierta { grid-column: 1 / -1; }
}


/* css/normas.css */
/*
 * #normas (Dani, 6-10-2026): la «Lista grande» --el número en dorado, la norma
 * en grande y su explicación debajo-- con una casilla en cada una, y al final
 * la cuenta y el botón de aceptarlas. Lo pinta js/normas.js.
 */
.normas { padding: var(--e6) 0 var(--e7); }

.normas__titular {
  margin: 0;
  max-width: 20ch;
  font: 900 clamp(2rem, 2.6vw + 1.1rem, 3.5rem)/.98 var(--titular);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.normas__entrada { margin: var(--e3) 0 0; max-width: 62ch; font-size: var(--t-lg); color: var(--tenue); }

.normas__lista { list-style: none; margin: var(--e6) 0 0; padding: 0; border-bottom: 1px solid #1d1d1d; }

.norma__fila {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--e2) var(--e5);
  align-items: start;
  padding: var(--e5) var(--e2) var(--e5) 0;
  border-top: 1px solid #1d1d1d;
  cursor: pointer;
}
.normas--aceptadas .norma__fila { cursor: default; }

.norma__numero { font: 900 2.9rem/.9 var(--titular); letter-spacing: -.04em; color: var(--arena); }
.norma__texto { display: grid; gap: 6px; min-width: 0; }
.norma__titulo {
  font: 800 clamp(1.3rem, .9vw + 1.05rem, 1.9rem)/1.1 var(--titular);
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}
.norma__explica { max-width: 66ch; font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }
.norma__explica + .norma__explica { margin-top: 4px; }
/* Los #canales de las normas; el botón de después lleva su color. */
.normas a:not(.boton) { color: var(--arena); }

.norma__marca {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--apagado);
  white-space: nowrap;
}
.norma--marcada .norma__marca { color: var(--arena); }

/* Dibujada y no la del sistema: la de Windows sale blanca y cuadrada, y se
   comía la fila (era lo que se veía en el lienzo). */
.norma__casilla {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1.5px solid #4a4a4a;
  border-radius: 8px;
  background: #0d0d0d;
  cursor: pointer;
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.norma__casilla::after {
  content: '';
  width: 11px;
  height: 6px;
  margin-top: -3px;
  border: solid #1a1206;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--rapido) var(--curva);
}
.norma__casilla:checked { border-color: var(--arena); background: var(--arena); }
.norma__casilla:checked::after { transform: rotate(-45deg) scale(1); }
.norma__fila:hover .norma__casilla:not(:checked, :disabled) { border-color: var(--arena); }
.norma__casilla:focus-visible { outline: 0; box-shadow: var(--anillo-arena); }
.norma__casilla:disabled { cursor: default; }

/* Tras la raya: qué pasa si alguien no las cumple, con su título. */
.normas__cierre { display: grid; gap: var(--e3); margin-top: var(--e6); }
.normas__cierre-titulo {
  margin: 0;
  font: 800 clamp(1.2rem, .7vw + 1rem, 1.6rem)/1.15 var(--titular);
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.normas__cierre p { margin: 0; max-width: 66ch; font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }

.normas__aceptar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4) var(--e6);
  margin-top: var(--e6);
  padding: var(--e5);
  border: 1px solid rgb(240 185 104 / .25);
  border-radius: 18px;
  background: rgb(240 185 104 / .06);
}
.normas__marcador { display: grid; flex: 1 1 260px; gap: var(--e2); min-width: 0; }
.normas__cuenta { margin: 0; font-size: var(--t-sm); color: var(--tenue); }
.normas__cuenta b { color: var(--texto); }
.normas__barra { display: block; max-width: 320px; height: 6px; overflow: hidden; border-radius: 999px; background: #262626; }
.normas__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c98b3a, var(--arena));
  transition: width .3s var(--curva);
}
.normas__falta { margin: 0; font-size: var(--t-md); color: #cfcfcf; }
/* Apagado hasta marcarlas todas: eso no es «cargando», que es lo que dice el
   cursor de un botón apagado en el resto de la web. */
.normas__aceptar .boton[disabled]:not(.boton--ocupado) { cursor: not-allowed; }

.normas__aceptar--hecho { border-color: #1f1f1f; background: #0d0d0d; }
.normas__hecho { margin: 0; font-weight: 600; color: var(--texto); }
.normas__hecho::before { content: '✓'; margin-right: var(--e2); color: var(--arena); }

@media (max-width: 640px) {
  .norma__fila { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--e1) var(--e3); }
  .norma__numero { font-size: 2.1rem; }
  .norma__estado { display: none; }
  .normas__aceptar .boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .norma__casilla, .norma__casilla::after, .normas__relleno { transition: none; }
}

/* Cada norma en su tarjeta, como #novedades (Dani, 28-10-2026). */
.normas__lista { display: grid; gap: var(--e3); border-bottom: 0; }
.norma { border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); transition: border-color .2s; }
.norma--marcada { border-color: rgba(240, 185, 104, .35); }
.norma__fila { padding: var(--e5); border-top: 0; }

@media (max-width: 640px) {
  .norma__fila { padding: var(--e4); }
}

/*
 * La ventana de antes de escribir por primera vez (3-11-2026): las mismas
 * normas, en una hoja encima de lo escrito. La pinta js/sala-lista.js.
 */
.ventana-normas {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: var(--e5) var(--e5) 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--texto);
  overflow: auto;
  overscroll-behavior: contain;
}
.ventana-normas::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
.ventana-normas[open] { animation: ficha-entra var(--rapido, .2s) var(--curva, ease-out); }
.ventana-normas__cerrar {
  float: right;
  margin: 0 0 var(--e2) var(--e3);
  padding: var(--e1) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
}
.ventana-normas__aviso { margin: 0; max-width: 56ch; color: var(--arena); font-weight: 600; }
.ventana-normas .normas { padding: var(--e4) 0 0; }
.ventana-normas .normas__titular { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.4rem); }
.ventana-normas .normas__aceptar { position: sticky; bottom: var(--e3); margin-bottom: var(--e3); background: linear-gradient(rgb(240 185 104 / .06), rgb(240 185 104 / .06)), var(--superficie); box-shadow: 0 -12px 24px var(--superficie); }
@media (max-width: 30rem) {
  .ventana-normas { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: var(--e4) 16px 0; border: 0; border-radius: 0; }
}


/* css/app.css */
/* ---------- La web instalada como app (Dani, 29-9-2026) ----------

   La app y la web se ven y funcionan igual (Dani, 6-10-2026: «tanto la app
   como la web tienen que ser idénticas»). Lo de abrirla desde el icono que no
   es aspecto sino necesidad --el hueco de la barra de estado del iPhone-- va
   en el bloque de `standalone`; todo lo demás vale en las dos. */

/* La barra de pestañas viene escrita en cada página, para que esté desde el
   primer fotograma; aquí se decide cuándo se ve, y js/app.js le da el tacto. */
.barra-app { display: none; }

@media (display-mode: standalone) {
  /* La barra de estado del iPhone es transparente en la app
     (apple-mobile-web-app-status-bar-style): la cabecera baja lo que ocupa, y
     con ella lo que la página deja libre arriba. Fuera del iPhone vale cero. */
  .cabecera.cabecera--quieta,
  .cabecera.cabecera--quieta.pegada,
  .cabecera.cabecera--quieta.posada { padding-top: calc(10px + env(safe-area-inset-top)); }

  :root:has(.cabecera--quieta:not(.cabecera--limpia)) { --cabecera: calc(69px + env(safe-area-inset-top)); }
}

/* Sin el destello azul al tocar un enlace: lo que se toca responde con su
   propio estado, no con un recuadro del navegador. */
a, button { -webkit-tap-highlight-color: transparent; }

/* Al cambiar de página, la de antes se desenfoca y se apaga y la nueva sale
   enfocándose, como los menús del juego (Dani, 6-10-2026: «Desenfoque», de
   seis). Igual en la web y en la app; sustituye a la cortina negra que solo
   tenía la app. Que se haga lo dice cada página en su <head>; aquí, cómo. En
   el móvil la barra de pestañas no se mueve (su `view-transition-name`). */
::view-transition-old(root) { animation: wi-pagina-sale 440ms ease-in-out both; }
::view-transition-new(root) { animation: wi-pagina-entra 440ms 90ms ease-out both; }

/* Sobre negro y mezcladas como dos capas normales. El navegador las suma por
   defecto (plus-lighter), pensado para un fundido: con el desenfoque las dos a
   la vez se aclaraban y salía un gris lechoso. */
::view-transition { background: var(--fondo); }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

@keyframes wi-pagina-sale { to { opacity: 0; filter: blur(18px) brightness(.6); transform: scale(1.04); } }
@keyframes wi-pagina-entra { from { opacity: 0; filter: blur(18px); transform: scale(.98); } }

@keyframes wi-cortina-entra { from { opacity: 0; } }
@keyframes wi-cortina-sale { to { opacity: 0; } }

/* El programa de Windows, al abrirse (Dani, 2-10-2026): negro y el logotipo
   en medio, como la pantalla de arranque de la propia app (Taller/app/App.cs,
   `Arranque`) y en el mismo sitio y del mismo tamaño, `min(44vw, 200px)` y
   centrado: la app quita la suya cuando esta ya se ve, y no se nota el cambio.
   Solo en la app: lo pone y lo quita js/antes.js, y solo dentro de ella.

   Y sale como en el cine («más lograda y más cinematográfica»): el logotipo
   se acerca a cámara mientras se apaga, el telón se abre despacio y la
   página, que esperaba detrás desenfocada y un poco más cerca, se enfoca. Son
   dos capas para que cada una lleve su ritmo: el telón (::before) y el
   logotipo (::after).

   El mismo telón sirve para «Jugar» (html[data-jugando], js/app.js): baja al
   revés --la página se oscurece y se desenfoca, se cierra el negro y el
   logotipo se posa en medio-- con «Abriendo el juego» debajo, y se queda
   hasta que el juego enseña su ventana. Al volver del juego, sale igual que
   al arrancar. */
html[data-arranque] body::before,
html[data-arranque] body::after,
html[data-jugando] body::before,
html[data-jugando] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html[data-arranque] body::before,
html[data-jugando] body::before { z-index: 100; background: #000; }

html[data-arranque] body::after,
html[data-jugando] body::after { z-index: 101; background: url("/img/logotipo.webp") center / min(44vw, 200px) auto no-repeat; }

html[data-arranque] body > :not(.jugando-rotulo),
html[data-jugando] body > :not(.jugando-rotulo) {
  filter: blur(12px) brightness(.4);
  transform: scale(1.06);
}

/* El logotipo se va antes de que se abra el telón: encima de la página
   asomando, los dos a la vez, se veía revuelto (medido fotograma a fotograma). */
html:is([data-arranque="sale"], [data-jugando="sale"]) body::after { animation: wi-arranque-logo 700ms cubic-bezier(.55, 0, 1, .45) both; }
html:is([data-arranque="sale"], [data-jugando="sale"]) body::before { animation: wi-arranque-telon 1100ms 450ms cubic-bezier(.45, 0, .25, 1) both; }
html:is([data-arranque="sale"], [data-jugando="sale"]) body > :not(.jugando-rotulo) { animation: wi-arranque-pagina 1400ms 450ms var(--curva) both; }

@keyframes wi-arranque-logo { to { opacity: 0; transform: scale(1.12); } }
@keyframes wi-arranque-telon { to { opacity: 0; } }
@keyframes wi-arranque-pagina { to { filter: none; transform: none; } }

/* «Jugar»: lo mismo al revés. Primero la página se va, luego el negro, y el
   logotipo llega de un poco más cerca y se posa. */
html[data-jugando="entra"] body > :not(.jugando-rotulo) { animation: wi-jugando-pagina 900ms var(--curva-suave) both; }
html[data-jugando="entra"] body::before { animation: wi-jugando-telon 800ms 150ms cubic-bezier(.45, 0, .25, 1) both; }
html[data-jugando="entra"] body::after { animation: wi-jugando-logo 900ms 650ms var(--curva-entrada) both; }

@keyframes wi-jugando-pagina { from { filter: none; transform: none; } }
@keyframes wi-jugando-telon { from { opacity: 0; } }
@keyframes wi-jugando-logo { from { opacity: 0; transform: scale(1.12); } }

/* «Abriendo el juego», debajo del logotipo, con una raya que va y viene: el
   juego tarda unos segundos en enseñarse y no siempre lo mismo, así que una
   cuenta atrás mentiría. */
.jugando-rotulo { display: none; }

html[data-jugando] .jugando-rotulo {
  position: fixed;
  left: 50%;
  top: calc(50% + min(15.9vw, 72px) + 30px);
  z-index: 102;
  display: grid;
  justify-items: center;
  gap: 14px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  pointer-events: none;
  animation: wi-jugando-telon 700ms 1100ms ease both;
}

html[data-jugando] .jugando-rotulo i {
  position: relative;
  width: 120px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}

html[data-jugando] .jugando-rotulo i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  border-radius: inherit;
  background: var(--arena);
  animation: wi-cargando 1.3s var(--curva-suave) infinite;
}

/* Al salir, el rótulo se va el primero */
html[data-jugando="sale"] .jugando-rotulo { animation: wi-arranque-telon 300ms ease both; }

@keyframes wi-cargando {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}


/* ---------- En el móvil: las secciones abajo, a un toque del pulgar ----------

   Sin la app no hay botón de atrás del navegador, y detrás del menú de tres
   rayas cada sección costaba dos toques. La barra lo sustituye: el menú
   desaparece, y la ficha de usuario de la cabecera también, porque ya está en
   «Perfil». En la web del móvil igual que en la app (Dani, 6-10-2026).

   Flota sobre la página y es de cristal (Dani, 30-9-2026): lo de debajo se ve
   borroso a través, con un canto de luz arriba y la pestaña puesta como una
   pastilla más clara dentro. */

@media (max-width: 820px) {
  :root { --barra-app: calc(84px + env(safe-area-inset-bottom)); }

  /* Solo con cuenta (Dani, 7-10-2026). Sin ella vuelve el menú de tres rayas
     de la cabecera, y nada se aparta para dejarle sitio. */
  html[data-cuenta="no"] { --barra-app: 0px; }
  html[data-cuenta="no"] .barra-app { display: none !important; }

  /* La barra va escondida hasta que se sube (Dani, 8-10-2026), así que la
     página no le guarda sitio: al llegar abajo ya se ha ido. Lo que va pegado
     abajo baja con ella, y lo que se desplaza en la sala le deja el hueco
     solo mientras se ve. */
  html:has(.barra-app:not(.barra-app--vista)) { --barra-app: 0px; }
  .sala__lista,
  .sala__panel { padding-bottom: calc(var(--barra-app) + var(--e5)); }

  /* Tu foto se queda arriba a la derecha: es el Perfil, que ya no va en la
     barra (Dani, 26-10-2026). */
  html:not([data-cuenta="no"]) .menu__boton { display: none; }

  /* Lo que ya iba pegado abajo, ahora encima de la barra. */
  .pregon,
  .aviso-grande { bottom: calc(var(--barra-app) + var(--e2)); }

  .barra-compra {
    bottom: var(--barra-app);
    padding-bottom: var(--e3);
    transition: transform var(--medio) var(--curva), bottom .4s var(--curva);
  }

  .barra-app {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    height: 64px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)),
      rgba(20, 20, 20, .5);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 18px 40px -14px rgba(0, 0, 0, .85);
    view-transition-name: barra-app;
    transition: transform .4s var(--curva), opacity .3s var(--curva);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .barra-app a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    border-radius: 18px;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    touch-action: manipulation;
    transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
  }

  /* El Chat, solo para los fundadores (data-solo-fundador, js/comun.js). */
  .barra-app a[hidden] { display: none; }

  .barra-app svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .barra-app a[aria-current="page"] {
    color: var(--arena);
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /* Al tocar, en el acto: la pastilla se hunde un poco. La pone js/app.js al
     apoyar el dedo, porque en el iPhone :active no llega sin ayuda. */
  .barra-app a.pulsada { background: rgba(255, 255, 255, .14); transform: scale(.95); }

  /* Escondida: se hunde por debajo del borde y se apaga a la vez. Con el
     teclado, al llegar a ella con el tabulador, sale. */
  .barra-app:not(.barra-app--vista):not(:focus-within) {
    transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  .barra-app a:focus-visible { outline: 2px solid var(--arena); outline-offset: -2px; }

  /* Mientras llega la página nueva, una raya que recorre el canto de arriba. */
  .barra-app.yendo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 2px;
    border-radius: 2px;
    background: var(--arena);
    animation: wi-cargando 900ms var(--curva-suave) infinite;
  }

  /* Con el teclado abierto la barra sube con él y tapa lo que se escribe. */
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"]), textarea, select):focus) .barra-app { display: none; }

  /* Dentro del chat en vivo, sin barra: el chat llega hasta abajo (Dani, 26-10-2026). */
  html:has(.sala--chat) { --barra-app: 0px; }
  html:has(.sala--chat) .barra-app { display: none; }
}


/* ---------- La invitación a crear cuenta ----------

   Sin cuenta, lo que la pide --la sala, el perfil, las plazas, los avances y el
   diario-- y cualquier enlace a /registro abren esta hoja en vez de otra
   página, con el logotipo y el formulario de alta dentro (Dani, 6-10-2026).
   Los enlaces a /entrar, y el «Entra» de la propia hoja, la abren con el de
   entrar.
   Sale en medio, negra y con la página difuminada
   detrás, también en el móvil: pegada abajo se leía como algo del navegador y
   no de la página. Tocar fuera la cierra. La pone js/app.js; los formularios,
   de registro.html y entrar.html, js/alta.js y js/entrada.js. */

.invitacion {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .45);
  /* Que se vea que lo de detrás sigue ahí, pero sin leerse: con 6 px el texto
     de la página competía con el de la hoja. */
  backdrop-filter: blur(14px) saturate(120%);
  /* Entra como se cambia de página (el «Desenfoque», 6-10-2026): la página se
     va difuminando detrás mientras la hoja llega enfocándose, y lo de dentro
     entra por orden (Dani, 15-10-2026: «se abre sin un efecto ni nada»). */
  animation: wi-invitacion-entra 420ms var(--curva) both;
}

.invitacion--sale { animation: wi-invitacion-sale 260ms var(--curva) both; }
@keyframes wi-invitacion-entra { from { opacity: 0; backdrop-filter: blur(0) saturate(100%); } }
@keyframes wi-invitacion-sale { to { opacity: 0; backdrop-filter: blur(0) saturate(100%); } }

.invitacion__hoja {
  position: relative;
  display: grid;
  gap: var(--e3);
  width: 100%;
  max-width: 28rem;
  /* En una pantalla baja el formulario no cabe: se desplaza la hoja, y sin
     arrastrar a la página de detrás al llegar al final. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e6) var(--e5) var(--e5);
  /* Negra, no de cristal gris (Dani, 12-10-2026): la página de detrás ya va
     difuminada en la cortina. */
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  background: var(--fondo);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  text-align: center;
  animation: wi-hoja-aparece 560ms var(--curva-entrada) both;
}

/* Por orden: la foto se asienta, y el logotipo, el título, el texto y el
   formulario suben uno detrás de otro. */
.invitacion__foto img { animation: wi-hoja-foto 900ms var(--curva-entrada) both; }
.invitacion__hoja > :is(.invitacion__logo, .invitacion__insignia, h2, .invitacion__texto, .invitacion__formulario) {
  animation: wi-hoja-trozo 520ms var(--curva-entrada) var(--turno, 0ms) both;
}
.invitacion__logo, .invitacion__insignia { --turno: 90ms; }
.invitacion__hoja > h2 { --turno: 150ms; }
.invitacion__texto { --turno: 200ms; }
.invitacion__formulario { --turno: 250ms; }

.invitacion--sale .invitacion__hoja { animation: wi-hoja-desaparece 260ms var(--curva) both; }
.invitacion__hoja:focus { outline: none; }

/* La orilla al atardecer arriba, de borde a borde, y el logotipo montado
   encima (Dani, 6-10-2026, «Google primero · Foto arriba»). La foto se funde
   con su máscara: la hoja era de cristal y un degradado a un color fijo se
   leía como una franja; ahora es negra y la máscara funde igual. */
.invitacion__hoja { --hoja-lado: var(--e5); padding-top: 0; }
.invitacion__foto { height: 190px; margin: 0 calc(var(--hoja-lado) * -1); }
.invitacion__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
}

.invitacion__logo {
  position: relative;
  justify-self: center;
  width: 116px;
  height: auto;
  margin: -66px 0 var(--e2);
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .75));
}
/* En la del candado y en los avisos, en vez del logotipo, su dibujo en un círculo. */
.invitacion__insignia {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: -52px 0 var(--e1);
  border: 1px solid rgb(240 185 104 / .5);
  border-radius: 50%;
  background: #121212;
  box-shadow: 0 0 0 6px rgb(240 185 104 / .06), 0 14px 30px -10px rgba(0, 0, 0, .8);
  color: var(--arena);
}
.invitacion__insignia svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.invitacion__botones { display: grid; gap: var(--e2); }
.invitacion__hoja h2 { margin: 0; font-size: var(--t-xl); text-wrap: balance; }
.invitacion__texto { margin: 0; font-size: var(--t-md); line-height: 1.6; color: var(--tenue); }
.invitacion__texto:empty { display: none; }
.invitacion__hoja .boton { width: 100%; justify-content: center; }

/* El formulario de /registro o el de /entrar, más apretado: en la página tiene
   una pantalla entera, y aquí una hoja. */
.invitacion__formulario { margin-top: var(--e3); text-align: left; }
.invitacion__formulario .campo { margin-bottom: var(--e4); }
.invitacion__formulario .campo input { padding: 11px 14px; }
.invitacion__formulario .campo .clave input { padding-left: 46px; }
.invitacion__formulario .letra-pequena,
.invitacion__formulario .acceso__otra { text-align: center; }
/* La explicación del segundo paso: en la página lleva el aire de una pantalla. */
.invitacion__formulario .acceso__sub { margin: 0 0 var(--e4); font-size: var(--t-md); text-align: center; }
/* En la de entrar, «¿Todavía no tienes cuenta?» va justo debajo del botón: sin
   aire se leía como parte de él. */
.invitacion__formulario .campos-correo + .acceso__otra { margin-top: var(--e4); }
/* Mientras llega el formulario, su forma (js/app.js): el botón de Google con su
   dibujo y la letra pequeña en rayas que laten. Mide lo que medirá lo de verdad. */
.invitacion__esqueleto { display: grid; justify-items: center; gap: var(--e4); padding-bottom: var(--e2); }
.invitacion__esqueleto .boton-google { width: 100%; }
.invitacion__esqueleto-linea {
  display: block;
  width: 72%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 75%) 0 0 / 300% 100%;
  animation: wi-esqueleto 1.6s linear infinite;
}
.invitacion__esqueleto-linea--corta { width: 44%; height: 16px; margin: var(--e1) 0 var(--e2); }
.invitacion__esqueleto-linea--media { width: 52%; }
@keyframes wi-esqueleto { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* Lo que llega entra igual que lo demás: subiendo y enfocándose. */
.invitacion__formulario > * > :not(.invitacion__esqueleto):not(.oculto-visual) { animation: wi-hoja-trozo 420ms var(--curva-entrada) both; }

/* Encima de la foto: oscura, para que se vea sobre el cielo. */
.invitacion__cerrar {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: var(--texto);
  cursor: pointer;
}

.invitacion__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.invitacion__cerrar:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

@keyframes wi-hoja-aparece { from { opacity: 0; filter: blur(14px); transform: translateY(26px) scale(.95); } }
@keyframes wi-hoja-desaparece { to { opacity: 0; filter: blur(10px); transform: translateY(12px) scale(.97); } }
@keyframes wi-hoja-foto { from { opacity: 0; transform: scale(1.08); } }
@keyframes wi-hoja-trozo { from { opacity: 0; filter: blur(6px); transform: translateY(12px); } }

/* En el ordenador, mas ancha, con el titulo mas grande y los botones en fila: en
   el movil no caben. */
@media (min-width: 700px) {
  .invitacion { padding: var(--e5); }
  .invitacion__hoja { --hoja-lado: var(--e6); max-width: 30rem; padding: 0 var(--e6) var(--e6); }
  .invitacion__foto { height: 210px; }
  .invitacion__hoja h2 { font-size: var(--t-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .invitacion { animation-name: wi-cortina-entra; }
  .invitacion--sale { animation-name: wi-cortina-sale; }
  .invitacion__hoja,
  .invitacion__foto img,
  .invitacion__hoja > *,
  .invitacion__formulario > * > * { animation-name: wi-cortina-entra; }
  .invitacion--sale .invitacion__hoja { animation-name: wi-cortina-sale; }
  .invitacion__esqueleto-linea { animation: none; }
}


/* ---------- El juego, instalándose desde la app de Windows ----------

   La app «White Island» instala el juego ella misma y va contando cómo va
   (js/app.js, `WIJuego`; Dani, 2-10-2026): la barra entera, en el perfil
   (js/mi-copia.js), y un resumen en el menú de arriba de todas las páginas,
   donde va «Jugar» cuando el juego ya está. html[data-app-instala] lo pone
   js/app.js en la app que sabe instalar (la de antes lo baja al navegador). */

html[data-app-instala] [data-solo-navegador] { display: none !important; }

.instalacion {
  display: grid;
  gap: var(--e2);
  width: 100%;
  max-width: 32rem;
  padding: var(--e4) var(--e4) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
}

.instalacion__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
}

.instalacion__fase { font-weight: 600; }
.instalacion__cifra { font-weight: 700; color: var(--arena); font-variant-numeric: tabular-nums; }

.instalacion__barra {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.instalacion__relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--arena), var(--arena-viva));
  transition: width 400ms linear;
}

/* Comprobando o mientras Windows lo revisa no hay cifra: la raya va y viene. */
.instalacion--sin-cifra .instalacion__relleno {
  width: 30%;
  transition: none;
  animation: wi-cargando 1.3s var(--curva-suave) infinite;
}

.instalacion__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
}

.instalacion__detalle {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.instalacion__pie .enlace-suelto { flex: none; font-size: var(--t-sm); }

/* El fallo, encima de los botones y a lo ancho. */
.caratula__botones > .aviso-envio { flex-basis: 100%; margin: 0; }

/* Desinstalar no compite con «Jugar»: un enlace apagado a su lado. */
.caratula__quitar {
  align-self: center;
  margin-left: var(--e2);
  font-size: var(--t-sm);
  color: var(--apagado);
}

.caratula__quitar:hover { color: var(--texto); }

/* En el menú, mientras se instala, en el sitio de «Jugar»: lleva al perfil. */
.menu-instalando {
  position: relative;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.menu-instalando::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--hecho, 0%);
  height: 2px;
  background: var(--arena);
  transition: width 400ms linear;
}

.menu-instalando[data-sin-cifra]::after {
  width: 30%;
  transition: none;
  animation: wi-cargando 1.3s var(--curva-suave) infinite;
}


/* ---------- Bajarse la app de Windows ----------

   Se ofrece aunque vaya sin firmar (Dani, 2-10-2026): en el perfil, como la
   forma de instalar el juego, y en el «Instalar la app» del pie. Solo en
   Windows y fuera de la app: html[data-windows] lo pone js/app.js. */

html:not([data-windows]) [data-solo-windows] { display: none !important; }
/* Y tampoco si ya se ha bajado la app desde este navegador (js/app.js). */
html[data-app-bajada] .app-windows { display: none !important; }

.app-windows {
  margin-top: var(--e5);
  padding: var(--e4) var(--e4) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--brillo);
}

.app-windows__titulo { margin: 0 0 6px; font-weight: 600; }
.app-windows__texto { margin: 0 0 var(--e3); font-size: var(--t-md); color: var(--tenue); }
.app-windows .letra-pequena { margin-top: var(--e3); }

/* Al bajarla, los dos avisos que vienen y qué pulsar: abajo, en medio, hasta
   que se cierra o pasa medio minuto. */
.aviso-programa {
  position: fixed;
  left: 50%;
  bottom: var(--e5);
  z-index: 80;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  width: min(34rem, calc(100vw - 2 * var(--e4)));
  padding: var(--e4) var(--e3) var(--e4) var(--e5);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  box-shadow: var(--s3);
  opacity: 0;
  transform: translate(-50%, 1rem);
  pointer-events: none;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.aviso-programa--visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso-programa p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--tenue); }
.aviso-programa strong { color: var(--texto); }

.aviso-programa__cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--tenue);
  cursor: pointer;
}

.aviso-programa__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.aviso-programa__cerrar:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }

/* El consejo de poner la app en el móvil (js/app.js, darConsejo; Dani,
   25-10-2026): sube desde abajo como una notificación, con el icono de la app
   y los pasos de cada móvil. Encima de la barra de pestañas y debajo de las
   hojas. */
.consejo-app {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  width: min(30rem, calc(100vw - 2 * var(--e4)));
  padding: var(--e4) var(--e3) var(--e4) var(--e4);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  box-shadow: var(--s3);
  opacity: 0;
  transform: translate(-50%, calc(100% + var(--e5)));
  pointer-events: none;
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.consejo-app--visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* Mientras se escribe (el chat, un comentario), se aparta; vuelve al soltar el
   campo (Dani, 28-10-2026: tapaba la caja de escribir). */
body:has(:is(input[type="text"], input[type="search"], input:not([type]), textarea, [contenteditable="true"]):focus) .consejo-app--visible {
  opacity: 0;
  transform: translate(-50%, calc(100% + var(--e5)));
  pointer-events: none;
}

.consejo-app__icono {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08);
}
.consejo-app__cuerpo { flex: 1; min-width: 0; }
.consejo-app__titulo { margin: 0 0 4px; font-weight: 600; line-height: 1.3; color: var(--texto); }
.consejo-app__texto { margin: 0; font-size: var(--t-md); line-height: 1.5; color: var(--tenue); }

.consejo-app__pasos {
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  display: grid;
  gap: 8px;
}
.consejo-app__pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 30px;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--texto);
}
.consejo-app__pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--arena);
  color: #000;
  font-size: 12px;
  font-weight: 700;
}
.consejo-app__simbolo {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -.25em;
  fill: none;
  stroke: var(--arena);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.consejo-app__simbolo--lleno { fill: var(--arena); stroke: none; }
.consejo-app__instalar { margin-top: var(--e3); }
/* La invitación a los avisos (darAvisos): «Sí, avísame» y «Ahora no». */
.consejo-app__botones { display: flex; gap: var(--e2); margin-top: var(--e3); }
.consejo-app__botones .boton { flex: 1 1 0; min-width: 0; padding-inline: var(--e3); white-space: nowrap; }
/* Los avisos: «Sí, avísame» entero y debajo «Ahora no», como el texto de
   arriba y sin pinta de botón (Dani, 28-10-2026). */
.consejo-app__botones--avisos { flex-direction: column; align-items: center; gap: var(--e1); }
.consejo-app__botones--avisos .boton { flex: none; align-self: stretch; }
.consejo-app__ahora-no { margin: 0; padding: 4px 8px; border: 0; background: none; font: inherit; font-size: var(--t-md); line-height: 1.5; color: var(--tenue); cursor: pointer; }
.consejo-app__ahora-no:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; border-radius: 4px; }
.consejo-app__texto a { color: var(--arena); }

.consejo-app__cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}
.consejo-app__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.consejo-app__cerrar:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }


/* Sin movimiento, la raya de cargando se queda quieta a lo ancho. Al final del
   archivo para que gane a la de arriba. */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .barra-app.yendo::before { animation: none; width: 100%; opacity: .6; }
  .barra-app { transition: opacity .2s linear; }
  .barra-app:not(.barra-app--vista):not(:focus-within) { transform: none; }
  .barra-compra { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .instalacion--sin-cifra .instalacion__relleno,
  .menu-instalando[data-sin-cifra]::after { animation: none; width: 100%; opacity: .5; }

  /* El arranque de la app y «Jugar», sin acercarse ni enfocar: solo se apagan y se encienden */
  html[data-arranque] body > :not(.jugando-rotulo),
  html[data-jugando] body > :not(.jugando-rotulo) { filter: none; transform: none; animation: none; }
  html:is([data-arranque="sale"], [data-jugando="sale"]) body::before,
  html:is([data-arranque="sale"], [data-jugando="sale"]) body::after { animation: wi-arranque-telon 600ms ease both; }
  html[data-jugando="entra"] body::before,
  html[data-jugando="entra"] body::after { animation: wi-jugando-telon 400ms ease both; }
  html[data-jugando] .jugando-rotulo i::after { animation: none; width: 100%; opacity: .5; }
}

/* En el teléfono y la tableta no se juega: lo de bajar e instalar el juego no
   sale, y en su sitio un aviso de que se entre desde el ordenador (perfil.html,
   Dani, 19-10-2026). Por el dedo y no por el ancho: una ventana estrecha en el
   ordenador sí puede descargar. */
@media (hover: none) and (pointer: coarse) {
  [data-solo-ordenador] { display: none !important; }
}
@media (hover: hover), (pointer: fine) {
  [data-solo-movil] { display: none !important; }
}