/* 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/secciones.css */
/*
 * Las páginas por secciones: la portada y /fundadores (Dani, 11-10-2026: «que
 * funcionara como la principal»). Una pantalla por sección, de una en una con
 * el dedo, y lo de cada una entrando según su papel. Lo mueven js/pantallas.js
 * y js/coreografia.js; aquí está cómo se ve. Salió de css/portada.css tal cual,
 * en el mismo orden, y se carga justo antes de la hoja de cada página para que
 * lo de esa página siga mandando sobre esto.
 */

:root {
  --mov-curva: var(--curva-entrada);
}


/* ---------- El paso de una sección a otra ---------- */

/* Con js/coreografia.js lo de cada sección lo mueve el scroll, y la aparición
   de siempre (css/estilo.css) se aparta: si no, las dos pelearían por la
   opacidad de las mismas piezas. */
.con-coreografia .revelar { opacity: 1; transform: none; filter: none; will-change: auto; }


/* ---------- En el móvil ---------- */

/*
 * Cada sección, como poco una pantalla, con lo suyo centrado bajo la cabecera,
 * y de una en una al deslizar (Dani, 9-10-2026: en una pantalla se veían dos).
 * Las que no caben se recorren con el dedo, y al llegar a su final el gesto
 * siguiente pasa a la de abajo.
 */
@media (max-width: 860px) {
  /* `lvh` y no `svh`: el alto de la pantalla con las barras del navegador
     escondidas, que es como queda en cuanto se desliza. Con `svh` la sección
     se quedaba corta y asomaba la siguiente (Dani, 9-10-2026). */
  .por-pantallas .seccion.plena:not(.capturas--paralaje) {
    min-height: 100lvh;
    align-content: center;
    padding-block: calc(var(--cabecera) + var(--e5)) var(--e5);
  }

  /* Y aire de sobra entre una y otra: se pasa de sección en sección, así que
     no se ve, y en ningún teléfono asoma la de al lado. */
  .por-pantallas .plena[id] + .plena[id] { margin-top: var(--e9); }

  /* La última lleva el pie dentro, abajo, en su misma pantalla. */
  .por-pantallas .seccion.plena.plena--con-pie { padding-bottom: 0; }

  /* El paso de una en una es el ajuste del navegador: con el dedo es lo que
     mejor se siente, y respeta las que hay que recorrer (una sección más alta
     que la pantalla se desplaza libre por dentro). Lo enciende js/pantallas.js
     con `de-una-en-una`, y lo apaga mientras viaja él. */
  .de-una-en-una { scroll-snap-type: y mandatory; }
  .de-una-en-una.viajando { scroll-snap-type: none; }
  .de-una-en-una .plena[id] { scroll-snap-align: start; scroll-snap-stop: always; }
}

@keyframes mov-telon { from { opacity: 1; } to { opacity: 0; } }
@keyframes mov-asienta { from { scale: 1.06; } to { scale: 1; } }
@keyframes mov-sube { from { opacity: 0; translate: 0 26px; filter: blur(4px); } }
@keyframes mov-aparece { from { opacity: 0; } }


/* ---------- En el móvil, cada sección al llegar a ella (js/coreografia.js) ---------- */

/* La aparición de siempre (css/estilo.css) se aparta: si no, las dos pelearían
   por la opacidad de las mismas piezas. */
.con-movimiento .revelar { opacity: 1; transform: none; filter: none; transition: none; will-change: auto; }

/* Cómo es cada papel escondido: cuánto se mueve, cuánto se agranda y cuánto
   dura. El cuándo lo pone el JavaScript en --mov-espera. */
html.con-movimiento [data-mov] {
  --mov-y: 0px;
  --mov-escala: 1;
  --mov-dura: 600ms;
}
html.con-movimiento [data-mov="rotulo"] { --mov-dura: 500ms; }
html.con-movimiento [data-mov="titulo"] { --mov-y: 14px; --mov-dura: 760ms; }
html.con-movimiento [data-mov="texto"] { --mov-y: 8px; --mov-dura: 620ms; }
html.con-movimiento [data-mov="imagen"] { --mov-escala: .97; --mov-dura: 820ms; }
html.con-movimiento [data-mov="lista"] { --mov-y: 6px; --mov-dura: 420ms; }
html.con-movimiento [data-mov="boton"] { --mov-y: 6px; --mov-escala: .98; --mov-dura: 480ms; }
html.con-movimiento [data-mov="pie"] { --mov-dura: 700ms; }

html.con-movimiento [data-mov]:not(.mov-dentro) {
  opacity: 0;
  translate: 0 var(--mov-y);
  scale: var(--mov-escala);
  transition: none;
}
html.con-movimiento [data-mov="titulo"]:not(.mov-dentro) { filter: blur(6px); }
/* El decorado en 3D (la órbita del JRS) no puede apagarse: con opacidad el
   navegador lo aplana. Solo se acerca. */
html.con-movimiento [data-mov="fondo"]:not(.mov-dentro) { opacity: 1; scale: .94; }

html.con-movimiento [data-mov].mov-dentro {
  opacity: 1;
  translate: none;
  scale: none;
  transition:
    opacity var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms),
    translate var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms),
    scale var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms);
}
html.con-movimiento [data-mov="titulo"].mov-dentro {
  filter: none;
  transition:
    opacity var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms),
    translate var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms),
    filter var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms);
}
html.con-movimiento [data-mov="fondo"].mov-dentro { transition: scale 1.4s var(--mov-curva) var(--mov-espera, 0ms); }


/* css/portada.css */
/*
 * Lo que solo tiene la portada: el mosaico de capturas, el JRS contado por
 * golpes y el cierre entre dos fotos. Salen de una página de pruebas con nueve
 * efectos, elegidos por Dani el 6-10-2026. Y el paso de una sección a otra por
 * capas, que mueve js/coreografia.js.
 *
 * /3 (3.html) comparte el resto de la portada --css/paginas.css, js/portada.js,
 * js/pantallas.js-- pero no esto: sigue con su tira, su JRS de una pantalla y
 * su cierre con foto de fondo. Por eso aquí todo va con clases propias y no se
 * toca ninguna de las de allí.
 */


/* ---------- Las secciones que miden más de una pantalla ---------- */

/* La del JRS, una pantalla por golpe. Lo pone el JavaScript: sin escena
   la sección mide lo que sus golpes uno debajo de otro. */
.golpes.golpes--escena { height: calc(var(--golpes) * 100svh); }

/*
 * En el ordenador, `plena` recorta cada sección a una pantalla y lo que sobra
 * se desplaza dentro. Estas dos no: crecen lo que necesiten y las recorre
 * js/pantallas.js, que para en cada pantalla. Y sin `overflow` que recorte,
 * porque el escenario del JRS va pegado, y un `sticky` dentro de algo que
 * recorta deja de pegarse.
 */
@media (min-width: 861px) and (min-height: 660px) {
  .por-pantallas .plena.capturas,
  .por-pantallas .plena.golpes {
    height: auto;
    overflow: visible;
  }

  .por-pantallas .plena.golpes--escena { height: calc(var(--golpes) * 100svh); }
  .por-pantallas .plena.capturas--paralaje { height: 300svh; }
}


/* ---------- Capturas: el recuadro en medio y las fotos alrededor ---------- */

/*
 * Sin paralaje --sin JavaScript, o pidiendo menos movimiento-- es un mosaico con
 * el recuadro encima. Con él, js/capturas.js pone `capturas--paralaje`: la
 * sección mide tres pantallas, el escenario se queda pegado, y las fotos suben
 * en tres pistas; en la del centro va el recuadro, como una foto más y sin
 * tapar ninguna, entre dos ventanas con fotos que también suben (Dani,
 * 6-10-2026).
 */
.capturas__escenario {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: clamp(var(--e4), 3vw, var(--e8));
}

/* El texto, centrado en un recuadro negro. */
.plena .capturas__recuadro {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  width: min(100%, 36rem);
  margin: 0 auto var(--e7);
  padding: var(--e7);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: var(--r-lg);
  background: #000;
  text-align: center;
}

.capturas__recuadro .rotulo { justify-content: center; }
.capturas__recuadro h2 { margin-inline: auto; }
.capturas__recuadro .seccion__entrada { margin: 0; }

/*
 * En columnas y no en rejilla: cada foto con su forma --alta, ancha, cuadrada--
 * y las columnas se reparten la altura solas. Las fotos llegan recortadas a esa
 * forma (img/capturas), así que no se descarga nada que no se vea.
 */
.mosaico {
  column-count: 4;
  column-gap: 14px;
}

.mosaico figure {
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--superficie);
  /* Sin esto Safari dibuja la esquina cuadrada mientras la foto crece. */
  isolation: isolate;
}

.mosaico img {
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--curva-entrada), filter var(--lento) var(--curva);
}

.mosaico figure:hover img { transform: scale(1.05); filter: brightness(1.08); }

.con-revelado .mosaico figure.revelar { --sube: 26px; --escala: .985; --entra: 900ms; }

@media (max-width: 1100px) {
  .mosaico { column-count: 3; }
}

@media (max-width: 860px) {
  .mosaico { column-count: 2; column-gap: 10px; }
  .mosaico figure { margin-bottom: 10px; border-radius: var(--r-md); }
}

/* `plena` centra su contenido, y en un bloque eso también vale: sin quitarlo,
   el escenario saldría en medio de las tres pantallas, como pasó en el JRS. */
.capturas.capturas--paralaje {
  display: block;
  align-content: normal;
  height: 300svh;
  padding: 0;
}

/* Y `.por-pantallas .seccion.plena` (css/paginas.css) hace de cada sección una
   caja que se desplaza por dentro, en el móvil también. Así el escenario se
   pegaba a la sección y no a la pantalla, y solo se veía en la de en medio. */
.por-pantallas .seccion.plena.capturas--paralaje {
  overflow: visible;
  align-content: normal;
}

.capturas--paralaje .capturas__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  max-width: none;
  padding: 0;
  overflow: hidden;
}

/* En la pista del centro, del ancho de la pista y en su sitio entre las fotos:
   un recuadro más de la rejilla, no una ventana encima. */
.plena.capturas--paralaje .capturas__recuadro {
  flex: none;
  width: auto;
  margin: 0;
  padding: var(--e8) var(--e6);
}

/* Las fotos, en pistas que suben. Se desvanecen arriba y abajo: así entran y
   salen de la pantalla en vez de cortarse contra el borde y la cabecera. */
.capturas--paralaje .mosaico {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 14px;
  padding-inline: clamp(var(--e4), 3vw, var(--e8));
  column-count: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/* Cada pista mide lo que sus fotos, no el escenario: estiradas al alto de la
   pantalla, las fotos --que recortan con `overflow`, y por eso pueden encoger
   hasta cero-- se aplastaban en franjas para caber. */
.capturas__pista {
  flex: 1;
  align-self: flex-start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

.capturas--paralaje .mosaico figure { flex: none; margin: 0; }

/* La del centro mide lo que el escenario: una ventana arriba, el recuadro y otra
   ventana abajo, las dos del mismo alto, así que el recuadro queda siempre en
   medio sin que nadie lo coloque. Las fotos de cada ventana van en una tira que
   sube, y se desvanecen al llegar al recuadro en vez de cortarse en seco. */
.capturas--paralaje .capturas__pista--centro { align-self: stretch; will-change: auto; }

.capturas__ventana { flex: 1 1 0; min-height: 0; overflow: hidden; }
.capturas__ventana--arriba {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent);
}
.capturas__ventana--abajo {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 48px);
  mask-image: linear-gradient(180deg, transparent, #000 48px);
}

.capturas__tira { display: flex; flex-direction: column; gap: 14px; will-change: transform; }

/*
 * En el móvil, el recuadro negro va arriba, de lado a lado, y las fotos, una
 * debajo de otra. Al deslizar se va como todo lo demás (Dani, 9-10-2026): del
 * 7 al 9-10 se quedaba pegado arriba y las fotos pasaban por debajo. En medio
 * de una sola columna no dejaba ver las fotos, y las de 16:9 salían bajas.
 */
@media (max-width: 860px) {
  /* Como en el ordenador, crece lo que necesite: `plena` le pondría un scroll
     por dentro. */
  .por-pantallas .seccion.plena.capturas { overflow: visible; }
  .capturas__escenario { padding-inline: var(--e4); }

  /* Con aire de sobra arriba, contando la cabecera que flota encima: al
     llegar, «Capturas» se quedaba pegado a ella (Dani, 9-10-2026). */
  .plena .capturas__recuadro {
    width: auto;
    margin: 0 calc(var(--e4) * -1) var(--e4);
    padding: calc(var(--cabecera) + var(--e7)) var(--lado-movil) var(--e6);
    border: 0;
    border-radius: 0;
  }

  .mosaico { column-count: 1; }
  .mosaico figure { margin-bottom: var(--e3); }
  .mosaico img { aspect-ratio: 4 / 3; object-fit: cover; }
}


/* ---------- El JRS, por golpes ---------- */

/*
 * Sin escena --sin JavaScript, o pidiendo menos movimiento-- los golpes van uno
 * debajo de otro y se lee todo. La escena la enciende js/golpes.js con
 * `golpes--escena`: la sección mide entonces una pantalla por golpe, el
 * escenario se queda pegado y en el centro solo está el golpe que toca.
 */
/* `plena` centra su contenido, y en un bloque eso también vale: el escenario
   salía en medio de las seis pantallas, no arriba, y se pegaba tarde. */
.golpes.plena {
  display: block;
  align-content: normal;
  padding: 0;
  background: #000;
}

.golpes__escenario {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--cabecera) + var(--e7)) var(--e5) var(--e8);
  text-align: center;
  background: radial-gradient(60% 55% at 50% 50%, #111, #000 75%);
}

.golpes__textos {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(100%, 52rem);
}

.golpe {
  display: grid;
  justify-items: center;
  gap: var(--e4);
  padding-block: var(--e8);
}

.golpe p { margin: 0; }

.golpe__titular {
  max-width: 18ch;
  font-size: clamp(2.1rem, 3.3vw + .8rem, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.golpe__idea {
  max-width: 16ch;
  font-size: clamp(2rem, 3vw + .8rem, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.golpe__texto {
  max-width: 40ch;
  font-size: clamp(1.05rem, .45vw + .9rem, 1.3rem);
  line-height: 1.6;
  color: var(--tenue);
}

/* El motor, como un sello entre los dos textos de la última pantalla: el nombre
   grande y en contorno, como el número de las semanas, y su nombre largo en
   arena debajo (Dani, 9-10-2026: «dale una vuelta»). Solo eso: el «Por eso se
   creó» va al final del texto de encima. */
.golpe__sello {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: var(--e2) 0;
  padding: var(--e4) var(--e6) var(--e5);
  border: 1px solid rgb(240 185 104 / .28);
  border-radius: 22px;
  background: radial-gradient(120% 140% at 50% 0%, rgb(240 185 104 / .12), transparent 70%);
}
.golpe__sello-nombre {
  font: 900 clamp(3.2rem, 4vw + 1.6rem, 4.6rem)/.9 var(--titular);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--arena);
}
.golpe__sello-largo {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arena);
}

.golpes__orbita,
.golpes__sigue { display: none; }


/* ---------- La escena ---------- */

.golpes--escena .golpes__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  perspective: 1100px;
}

/* Un velo en el centro: las fotos pasan por detrás del texto, y sin él la frase
   se pierde en cuanto cruza por debajo una foto clara. */
.golpes--escena .golpes__escenario::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(38% 36% at 50% 50%, rgb(0 0 0 / .85), rgb(0 0 0 / .5) 62%, transparent 100%);
}

/*
 * Los golpes, todos en la misma celda: el que entra sustituye al que se va en
 * el mismo sitio, que es lo que hace que la escena cambie en vez de bajar.
 */
.golpes--escena .golpe { grid-area: 1 / 1; align-self: center; padding: 0; pointer-events: none; }
.golpes--escena .golpe.en-escena { pointer-events: auto; }

/* Cada pieza entra por su cuenta y en orden --`--i`--, y se van todas juntas y
   deprisa: un golpe que se va no tiene que estorbar al que llega. */
.golpes--escena .golpe > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(6px);
  transition: opacity .28s var(--curva), transform .4s var(--curva), filter .28s var(--curva);
}

.golpes--escena .golpe.ya-paso > * { transform: translate3d(0, -14px, 0); }

/* Y entra saliendo de un velo, como lo de las demás secciones al llegar
   (Dani, 9-10-2026: «difuminándose»). */
.golpes--escena .golpe.en-escena > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .7s var(--curva-entrada), transform .9s var(--curva-entrada), filter .7s var(--curva-entrada);
  transition-delay: calc(.22s + var(--i, 0) * 140ms);
}

.golpe > :nth-child(2) { --i: 1; }
.golpe > :nth-child(3) { --i: 2; }
.golpe > :nth-child(4) { --i: 3; }

/* Las fotos, alrededor. Las coloca js/golpes.js; aquí solo su aspecto: pequeñas
   y apagadas, que lo que se lee es el centro. */
.golpes--escena .golpes__orbita {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: block;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.golpes__carta {
  --carta: clamp(130px, 15vw, 250px);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--carta);
  aspect-ratio: 16 / 10;
  margin: calc(var(--carta) * -.3125) 0 0 calc(var(--carta) * -.5);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .9);
  will-change: transform, opacity;
}

.golpes__carta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.82);
}

/* Que hay más abajo: el texto, una raya por la que cae una luz y la punta de
   la flecha de la portada, que se asoma cuando la luz llega. Centrado con
   márgenes y no con `translate`, que lo mueve js/coreografia.js al entrar.
   Sale en todos los golpes: después del último sigue el diario. */
.golpes--escena .golpes__sigue {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  /* Encima de la barra de la app instalada, si la hay (css/app.css). */
  bottom: calc(clamp(18px, 3.4vh, 36px) + var(--barra-app, env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin: 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .5);
  transition: opacity .5s var(--curva);
}

.golpes__sigue::before {
  content: "";
  order: 1;
  width: 1px;
  height: 42px;
  background:
    linear-gradient(transparent, rgb(255 255 255 / .95), transparent) 0 -20px / 1px 20px no-repeat,
    rgb(255 255 255 / .14);
  animation: sigue-luz 2.2s cubic-bezier(.55, 0, .35, 1) infinite;
}

.golpes__sigue::after {
  content: "";
  order: 2;
  width: 7px;
  height: 7px;
  margin-top: -13px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  rotate: 45deg;
  opacity: .4;
  animation: sigue-punta 2.2s cubic-bezier(.55, 0, .35, 1) infinite;
}

@keyframes sigue-luz {
  0% { background-position: 0 -20px, 0 0; }
  62%, 100% { background-position: 0 42px, 0 0; }
}

@keyframes sigue-punta {
  0%, 46%, 100% { translate: 0 0; opacity: .4; }
  64% { translate: 0 4px; opacity: 1; }
}

.golpes__sigue-dedo { display: none; }

/* En el móvil, una mano que sube como el dedo que hace scroll, en letra más
   pequeña, y solo en el primer golpe: con el primer gesto se va y no vuelve. */
@media (max-width: 860px) {
  .golpes--escena .golpes__sigue { font-size: 9px; letter-spacing: .26em; text-indent: .26em; }
  .golpes__sigue::before,
  .golpes__sigue::after,
  .golpes__sigue-raton { display: none; }

  .golpes__sigue-dedo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .golpes__sigue-dedo svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: dedo-sube 2s cubic-bezier(.45, 0, .25, 1) infinite;
  }

  .golpes--bajado .golpes__sigue { opacity: 0; visibility: hidden; transition: opacity .4s var(--curva), visibility 0s .4s; }
}

@keyframes dedo-sube {
  0% { translate: 0 8px; opacity: 0; }
  20% { opacity: .9; }
  70% { translate: 0 -10px; opacity: .9; }
  100% { translate: 0 -10px; opacity: 0; }
}

@media (max-width: 860px) {
  .golpes__carta { --carta: 26vw; }
  .golpes__escenario { padding-inline: var(--e4); }

  /* Las fotos que giran pasaban por debajo del aviso de abajo y de la
     cabecera, y lo tapaban: en el móvil se apagan al llegar a los bordes. */
  .golpes--escena .golpes__escenario::after {
    background:
      linear-gradient(rgb(0 0 0 / .92), transparent 17%, transparent 72%, rgb(0 0 0 / .94) 92%),
      radial-gradient(62% 32% at 50% 50%, rgb(0 0 0 / .86), rgb(0 0 0 / .45) 64%, transparent 100%);
  }
}




/* ---------- Los títulos de sección, centrados ---------- */

/* Todos, en todas las secciones de la portada (Dani, 6-10-2026): el JRS, las
   capturas y el cierre ya lo estaban, y los otros tres a un lado se leían
   como de otra página. */
.plena .cabeza-seccion { text-align: center; }
.plena .cabeza-seccion .rotulo { justify-content: center; }
.plena .cabeza-seccion h2,
.plena .cabeza-seccion .seccion__entrada { margin-inline: auto; }


/* El diario (la última semana en grande y tres al lado) vive en css/paginas.css:
   lo usa también /noticias. */


/* ---------- La comunidad: cartas que se inclinan ---------- */

/*
 * La inclinación y el brillo los mueve js/cartas.js con variables: el giro
 * (--rx, --ry), la foto, que va al revés (--px, --py), y el brillo, que sigue
 * al ratón (--bx, --by). Sin ratón se quedan quietas, y se leen igual.
 */
.cartas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  perspective: 1100px;
}

.carta { display: block; color: inherit; text-decoration: none; }

.carta__dentro {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  max-height: min(480px, 58svh);
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 34px 60px -30px rgb(0 0 0 / .95);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .7s var(--curva-entrada), box-shadow var(--lento) var(--curva);
}

/* Mientras el ratón la mueve, la carta lo sigue sin retraso; al soltarla
   vuelve despacio a su sitio. */
.carta--movida .carta__dentro { transition: transform 80ms linear, box-shadow var(--lento) var(--curva); }

.carta__foto {
  position: absolute;
  inset: -6%;
  z-index: -2;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform .7s var(--curva-entrada);
}

.carta--movida .carta__foto { transition: transform 80ms linear; }

.carta__dentro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 38%, rgb(0 0 0 / .9));
}

.carta__brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 30%), rgb(255 255 255 / .42), transparent 46%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity var(--lento) var(--curva);
}

.carta:hover .carta__brillo { opacity: 1; }

.carta__texto {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  justify-items: start;
  gap: var(--e2);
  padding: clamp(18px, 2vw, 26px);
  transform: translateZ(36px);
}

.carta__texto h3 { margin: 0; font-size: clamp(1.3rem, 1.1vw + .9rem, 1.8rem); }
.carta__frase { color: rgb(255 255 255 / .8); font-size: var(--t-md); line-height: 1.5; }

/* La de fundador, en dorado y con un reflejo que se mueve con ella. */
.carta--oro .carta__dentro { border-color: rgb(240 185 104 / .75); box-shadow: 0 34px 70px -30px rgb(240 185 104 / .45); }

.carta__holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgb(255 208 138 / .38) 45%, rgb(156 195 240 / .26) 52%, transparent 64%);
  background-size: 240% 240%;
  background-position: var(--bx, 50%) var(--by, 50%);
  mix-blend-mode: color-dodge;
  opacity: .55;
}

/* En el móvil, de lado, como cartas en la mano: una entera y la siguiente
   asomando, que dice que se desliza. Una debajo de otra eran tres pantallas. */
@media (max-width: 860px) {
  .cartas {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--e3);
    margin-inline: calc(var(--e5) * -1);
    /* La tira recorta lo que se sale de ella, y la sombra de las cartas baja
       unos 75 px: se le deja ese sitio debajo y se le quita al margen, para que
       lo de abajo no se mueva (Dani, 19-10-2026). */
    padding: var(--e2) var(--e5) 80px;
    margin-bottom: calc(var(--e4) - 80px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--e5);
    scrollbar-width: none;
  }

  .carta { scroll-snap-align: start; }
  .carta__dentro { aspect-ratio: 3 / 4; max-height: none; }
}


/* ---------- El cierre, entre dos fotos ---------- */

/*
 * Una foto a cada lado, inclinadas hacia el titular, y fijas: los tiburones y
 * el machete (Dani, 6-10-2026). En el ordenador el pie sigue dentro, debajo:
 * las fotos ocupan la fila del mensaje y no la pisan.
 */
/* `.cierre` centra lo que lleva (css/estilo.css) y lo oscurece con un velo
   para su foto de fondo. Aquí el escenario ocupa toda la fila --las fotos van
   a los bordes-- y no hay foto de fondo que oscurecer. */
.cierre--fotos {
  --columna: clamp(320px, 32vw, 470px);
  place-items: stretch;
  background: #0b0b0d;
}

.cierre--fotos::after { content: none; }

.cierre__escenario {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  perspective: 1600px;
}

.cierre__carta {
  position: absolute;
  top: 5%;
  bottom: 5%;
  width: calc((100% - var(--columna)) / 2 - 2vw);
  border-radius: 26px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 50px 100px -40px rgb(0 0 0 / .9);
}

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

.cierre__carta--izq { left: -3vw; transform-origin: 100% 50%; transform: rotateY(16deg); }
.cierre__carta--der { right: -3vw; transform-origin: 0 50%; transform: rotateY(-16deg); }

.cierre--fotos .cierre__interior {
  position: relative;
  z-index: 1;
  width: var(--columna);
  gap: var(--e5);
}

.cierre--fotos .cierre__interior h2 {
  max-width: none;
  font-size: clamp(2rem, 2.4vw + .7rem, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.cierre--fotos .cierre__interior p { max-width: none; font-size: var(--t-base); }

.cierre__dato {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* La flecha dibujada y no escrita: el ► no está en las fuentes de la web, y el
   navegador lo sacaba de otra a medio tamaño, como un guion. */
.cierre__flecha {
  width: 0;
  height: 0;
  border-left: 7px solid var(--arena);
  border-block: 4.5px solid transparent;
}

/*
 * En el móvil, a los lados no caben: una foto encima del mensaje y otra debajo,
 * inclinadas hacia él como las del ordenador, la de arriba mirando abajo y la
 * de abajo mirando arriba (Dani, 7-10-2026; el 6-10 iban las dos arriba).
 */
@media (max-width: 860px) {
  .cierre--fotos { --columna: 100%; }

  .cierre__escenario {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: space-between;
    gap: var(--e7);
    padding: 0 var(--e5);
    perspective: 900px;
  }

  /* De borde a borde y enteras (Dani, 8-10-2026): en el 80 % y recortadas a
     4:3 se veía un trozo de cada una. Y de arriba abajo (9-10): la de arriba
     empieza donde empieza la sección y la de abajo acaba donde acaba. Lo que la
     inclinación saca por fuera lo recorta la sección, también arriba y abajo,
     o la foto de arriba se montaba encima de las preguntas. */
  .cierre--fotos { overflow: clip; }
  .cierre__carta {
    position: relative;
    top: auto;
    bottom: auto;
    justify-self: stretch;
    width: auto;
    margin-inline: calc(var(--e5) * -1);
    aspect-ratio: 16 / 9;
    border-radius: 18px;
  }
  .cierre__carta picture { display: contents; }

  /* El borde que da al mensaje se queda quieto y el de fuera se acerca. */
  .cierre__carta--izq { grid-row: 1; left: auto; transform-origin: 50% 100%; transform: rotateX(-14deg); }
  .cierre--fotos .cierre__interior { grid-row: 2; padding-inline: 0; }
  .cierre__carta--der { grid-row: 3; right: auto; transform-origin: 50% 0; transform: rotateX(14deg); }

  /* Por el lado del mensaje, la foto se funde con el negro en vez de cortarse
     (Dani, 9-10-2026). */
  .cierre__carta--izq {
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
    mask-image: linear-gradient(180deg, #000 40%, transparent);
  }
  .cierre__carta--der {
    -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent);
    mask-image: linear-gradient(0deg, #000 40%, transparent);
  }

  .cierre__dato { gap: var(--e2); font-size: 10px; letter-spacing: .14em; }
  .cierre__flecha { border-left-width: 5px; border-block-width: 3.5px; }
}


/* ---------- La portada en el móvil ---------- */

/*
 * Cada sección, como poco una pantalla, con lo suyo centrado bajo la cabecera,
 * y de una en una al deslizar (Dani, 9-10-2026: en una pantalla se veían dos).
 * Del 6 al 9-10 medían lo que llevaban, y el hueco negro que eso quitaba ya no
 * se ve: se pasa de sección en sección y nunca hay dos a la vista. Las que no
 * caben --las capturas, el cierre, las preguntas abiertas-- se recorren con el
 * dedo, y al llegar a su final el gesto siguiente pasa a la de abajo.
 */
@media (max-width: 860px) {
  /* Lo de todas las páginas por secciones --una pantalla como poco, el aire
     entre una y otra y el paso de una en una-- vive en css/secciones.css. */

  /* Las capturas empiezan en su recuadro negro: con el margen de arriba asomaba
     el fondo de la sección, más claro, como una franja gris (Dani, 9-10-2026). */
  .seccion.plena.capturas:not(.capturas--paralaje) { padding-top: 0; }

  /* El cierre también, una pantalla como poco: las fotos en los bordes y el
     mensaje en medio. */
  .cierre--fotos.plena { min-height: 100lvh; padding-top: 0; }

  /* El diario, de lado: esta semana y las de antes, una entera y la siguiente
     asomando. Debajo unas de otras eran cuatro pantallas, y las de al lado,
     con la foto a un lado y el texto al otro, no cabían. */
  .diario {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-auto-rows: auto;
    gap: var(--e3);
    min-height: 0;
    margin-inline: calc(var(--e5) * -1);
    padding: 0 var(--e5) var(--e2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--e5);
    scrollbar-width: none;
  }

  .diario::-webkit-scrollbar,
  .cartas::-webkit-scrollbar { display: none; }

  .diario > * { scroll-snap-align: start; }
  .diario__chica { grid-template-columns: 1fr; align-content: start; overflow: hidden; padding: 0 0 var(--e4); }

  /* La foto a todo el ancho de la tarjeta, cuadrada, y fundida con ella por
     abajo, con el texto encima del fundido (Dani, 8-10-2026). */
  .diario .diario__foto {
    aspect-ratio: 1;
    height: auto;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
    mask-image: linear-gradient(180deg, #000 62%, transparent);
  }
  .diario .diario__texto { position: relative; margin-top: -56px; padding-inline: var(--e4); }

  /* «Esta semana», como las demás de la tira (Dani, 7-10-2026): la foto
     arriba, con «Esta semana» encima, y debajo su número, el título y el
     canal. Era una foto grande con el texto encima y se leía como otra cosa. */
  .diario__grande {
    display: grid;
    grid-row: auto;
    align-content: start;
    gap: var(--e4);
    min-height: 0;
    padding: 0 0 var(--e4);
    border: 1px solid var(--borde);
    background: var(--superficie);
  }
  .diario__grande::after { content: none; }
  .diario__grande .diario__foto { position: static; z-index: auto; }
  /* Sin posición propia: «Esta semana» se coloca contra la tarjeta, arriba de la foto. */
  .diario__grande .diario__texto { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: 0 var(--e4); }
  .diario__grande .diario__chip { position: absolute; top: var(--e4); left: var(--e4); }
  .diario__grande .diario__semana { display: flex; order: 1; }
  .diario__grande .diario__titulo { order: 2; max-width: none; font-size: 1rem; line-height: 1.2; }
  .diario__grande .diario__meta { order: 3; }
  .diario__grande .diario__resumen,
  .diario__grande .diario__leer { display: none; }

  .diario__todas {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    color: var(--texto);
    font-family: var(--titular);
    font-size: var(--t-lg);
    font-weight: 800;
    text-decoration: none;
  }
  .diario__todas-flecha {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgb(240 185 104 / .6);
    border-radius: 50%;
    color: var(--arena);
  }
  .diario__todas-flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
}

/* «Ver todas» es el final de la tira del móvil; en el ordenador no hay tira. */
@media (min-width: 861px) {
  .diario__todas { display: none; }
}

/* En el teléfono, el margen de los textos es el de todas las páginas: las
   tiras que llegan al borde se salen eso, y los golpes y el cierre lo llevan. */
@media (max-width: 640px) {
  .diario,
  .cartas {
    margin-inline: calc(var(--lado-movil) * -1);
    padding-inline: var(--lado-movil);
    scroll-padding-inline: var(--lado-movil);
  }

  .golpes__escenario,
  .cierre__escenario { padding-inline: var(--lado-movil); }
  .cierre__carta { margin-inline: calc(var(--lado-movil) * -1); }

  /* Los textos del JRS, más metidos (Dani, 8-10-2026): con el margen de las
     demás páginas llegaban casi al borde, con las fotos girando al lado. */
  .golpe__texto { padding-inline: 14px; }
}


/* ---------- El movimiento ---------- */

/*
 * Revisado el 9-10-2026: probado en /81 y pasado a la portada el mismo día. Va
 * al final de la hoja a propósito, para mandar sobre lo de arriba.
 *
 * Una regla para toda la web: cada pieza se mueve según su PAPEL, no todas
 * igual.
 *   - El titular abre cada sección: es lo primero y lo único que sale de un velo.
 *   - El texto llega después y casi sin moverse: se lee, no se mira.
 *   - Las fotos acompañan: solo aparecen y se asientan, sin velo ni recorrido.
 *   - El botón llega pronto y quieto: tiene que encontrarse sin buscarlo.
 * El cierre es la excepción, y a propósito: va como el final de una película.
 * Todo con la misma curva --la de llegar y posarse, --curva-entrada-- y todo
 * hacia arriba: nada entra de lado ni desde arriba. Solo opacidad, `translate`,
 * `scale` y, en el titular, un velo pequeño: nada que obligue a recolocar la
 * página.
 */


/* ---------- Al cargar: la primera pantalla, como el principio de una película ---------- */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Como el principio de una película (Dani, 9-10-2026): negro, el logotipo en
   * el centro, la isla que sale poco a poco del negro y, cuando ya se ve, el
   * lema subiendo desde abajo; la flecha, lo último.
   *
   * Todo espera a que js/marca-viajera.js ponga el logotipo en el centro
   * (.marca--viajera, que se pone una vez y no se quita): con relojes sueltos,
   * en un móvil lento la isla o el lema salían antes que el logotipo. Hasta
   * entonces está todo escondido, también el botón de registro, que asomaba
   * arriba a la derecha hasta que llegaba lo que lo esconde mientras el logotipo
   * está grande. Sin JavaScript no se esconde nada (.con-revelado lo pone
   * js/revelado.js); si llega el primero y no el del logotipo, a los cuatro
   * segundos sale todo igual: con dos y medio, en un móvil lento el logotipo
   * llegaba casi a la vez (medido a 2,3 s) y la isla podía volver a negro.
   *
   * Lo que se funde es una capa negra encima y no la foto: la foto se pinta
   * desde el primer momento, que es lo que el navegador cuenta como «ya se ve
   * la página». El lema y la flecha, con `backwards`: al acabar manda otra vez
   * lo de siempre, que los dos se van con el logotipo al bajar.
   */
  .con-revelado.por-pantallas .heroe--grande::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
    pointer-events: none;
  }
  .con-revelado.por-pantallas:not(:has(.marca--viajera)) .heroe--grande::after {
    animation: mov-por-si-acaso-telon 0s 4s forwards;
  }
  .con-revelado.por-pantallas:has(.marca--viajera) .heroe--grande::after {
    animation: mov-telon 2.2s ease-in-out .9s both;
  }
  .por-pantallas:has(.marca--viajera) .heroe__fondo { animation: mov-asienta 3.2s var(--mov-curva) .9s both; }

  .con-revelado.por-pantallas:not(:has(.marca--viajera)) :is(.cabecera .marca, .cabecera .menu, .cabecera__acciones, .heroe__lema, .heroe__flecha) {
    opacity: 0;
    animation: mov-por-si-acaso 0s 4s forwards;
  }
  .por-pantallas .marca--viajera .marca__logo { animation: mov-logo 1s var(--mov-curva) .15s both; }
  .por-pantallas:has(.marca--viajera) .heroe__lema { animation: mov-sube 1s var(--mov-curva) 2.6s backwards; }
  .por-pantallas:has(.marca--viajera) .heroe__flecha {
    animation: mov-aparece .7s ease 3.4s backwards, respira 2.4s ease-in-out 4.1s infinite;
  }
}

@keyframes mov-por-si-acaso-telon { to { opacity: 0; } }
@keyframes mov-por-si-acaso { to { opacity: 1; } }
@keyframes mov-logo { from { opacity: 0; scale: .9; filter: blur(10px); } }


/* ---------- Las preguntas, en el móvil ---------- */

/* Más pequeñas y más metidas (Dani, 9-10-2026): a 16 px y casi de borde a borde
   se leían como un bloque. */
@media (max-width: 860px) {
  #preguntas .preguntas { margin-inline: var(--e3); }
  #preguntas .pregunta__titulo { font-size: var(--t-md); padding-inline: var(--e2); }
}



/* ---------- En el móvil, lo propio de la portada al llegar a cada sección ---------- */

/* Cómo entra cada papel --el titular, el texto, las fotos, el botón-- está en
   css/secciones.css, que es de todas las páginas por secciones. Aquí, lo que
   solo tiene la portada. */

/* Las capturas: el marco entra como lo demás y la foto sale de negro, cuando ya
   ha llegado (js/coreografia.js le pone `foto-lista`). */
html.con-movimiento .mosaico > figure[data-mov] { background: #000; }
html.con-movimiento .mosaico > figure[data-mov] > img { opacity: 0; }
html.con-movimiento .mosaico > figure.mov-dentro.foto-lista > img {
  opacity: 1;
  transition:
    opacity 1.6s ease-out calc(var(--mov-espera, 0ms) + 120ms),
    transform 1.2s var(--curva-entrada),
    filter var(--lento) var(--curva);
}

/* Las cartas de la comunidad de detrás de la primera, igual: el marco entra en
   negro y la foto, el reflejo y el texto se encienden dentro. */
html.con-movimiento .carta[data-mov]:not(:first-child) .carta__dentro { background: #000; }
html.con-movimiento .carta[data-mov]:not(:first-child) :is(.carta__foto, .carta__holo, .carta__texto) { opacity: 0; }
html.con-movimiento .carta.mov-dentro.foto-lista:not(:first-child) :is(.carta__foto, .carta__texto) {
  opacity: 1;
  transition: opacity 1.6s ease-out calc(var(--mov-espera, 0ms) + 120ms), transform .7s var(--curva-entrada);
}
html.con-movimiento .carta.mov-dentro.foto-lista:not(:first-child) .carta__holo {
  opacity: .55;
  transition: opacity 1.6s ease-out calc(var(--mov-espera, 0ms) + 120ms);
}

/* El cierre, «El horizonte»: el titular y «Acceso anticipado» se abren desde
   una raya en su centro, con un golpe de luz que se apaga, y el texto se
   descubre de arriba abajo. Los márgenes negativos del recorte, para que no se
   coman las tildes ni las colas de las letras. */
html.con-movimiento [data-mov="abre"] { --mov-dura: 900ms; }
html.con-movimiento .cierre__dato[data-mov="abre"] { --mov-dura: 500ms; }
html.con-movimiento [data-mov="abre"]:not(.mov-dentro) {
  clip-path: inset(50% -4% 50% -4%);
  filter: brightness(2.2);
}
html.con-movimiento [data-mov="abre"].mov-dentro {
  clip-path: inset(-12% -4% -12% -4%);
  filter: none;
  transition:
    opacity var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms),
    clip-path var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms),
    filter var(--mov-dura) var(--mov-curva) var(--mov-espera, 0ms);
}
html.con-movimiento [data-mov="descubre"]:not(.mov-dentro) { clip-path: inset(0 -2% 100% -2%); }
html.con-movimiento [data-mov="descubre"].mov-dentro {
  clip-path: inset(0 -2% -6% -2%);
  transition:
    opacity 700ms var(--mov-curva) var(--mov-espera, 0ms),
    clip-path 700ms var(--mov-curva) var(--mov-espera, 0ms);
}

/* Las fotos del cierre, lo último y a un cuarto: que se intuyan sin quitarle la
   vista al titular ni al botón. */
html.con-movimiento [data-mov="velado"].mov-dentro {
  opacity: .25;
  transition: opacity 5s ease-in-out var(--mov-espera, 0ms);
}


/* ---------- El JRS, golpe a golpe ---------- */

/* El titular primero y el texto después. Y solo el titular sale de un velo:
   en el texto, el velo se lee como un desenfoque de la pantalla. */
.golpe > .golpe__titular { --i: 0; }
.golpe > .golpe__titular + .golpe__texto { --i: 1; }
.golpes--escena .golpe > :not(.golpe__titular, .golpe__idea) { filter: none; }
.golpes--escena .golpe.en-escena > * { transition-delay: calc(.14s + var(--i, 0) * 150ms); }


/* 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; }
}