/**
 * 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.
 */

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

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

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

.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); }

.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); }

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

/* ---------- El vestíbulo: cabe entero en una pantalla ---------- */

.vestibulo {
  position: relative;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
}

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

.vestibulo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 20% 20%, rgba(0, 0, 0, .8), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .97));
}

.vestibulo__interior {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--e5), 3.5vh, var(--e7));
  width: 100%;
  padding-top: clamp(88px, 12vh, 124px);
  padding-bottom: clamp(var(--e5), 4vh, var(--e7));
}

.vestibulo__cabeza { flex: none; }
.vestibulo__cabeza h1 { margin-top: var(--e3); font-size: var(--t-4xl); }
.vestibulo__cabeza h1 [data-nombre] { color: var(--arena); }
.vestibulo__cabeza p { margin: var(--e5) 0 0; }

/* La rejilla se come lo que sobre de alto, así que la página nunca crece más
   que la pantalla y no hace falta bajar. */
.portales {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--e4);
}

.portal {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: clamp(var(--e4), 2.5vh, var(--e6));
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow: var(--s2);
  transition:
    transform var(--medio) var(--curva),
    border-color var(--medio) var(--curva),
    box-shadow var(--medio) var(--curva);
}

.portal--grande { grid-row: span 2; }

.portal 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);
}

.portal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 30%, rgba(0, 0, 0, .9) 100%);
  transition: background var(--medio) var(--curva);
}

.portal:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 185, 104, .5);
  box-shadow: var(--s3);
}

.portal:hover img { transform: scale(1.06); filter: saturate(1.1); }
.portal:hover::after { background: linear-gradient(180deg, rgba(0, 0, 0, .18) 30%, rgba(0, 0, 0, .86) 100%); }

.portal h2 {
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: none;
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  text-shadow: 0 6px 24px rgba(0, 0, 0, .7);
}

/* Flecha que asoma al pasar por encima: da a entender que se puede entrar. */
.portal h2::after {
  content: "→";
  font-size: .7em;
  color: var(--arena);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.portal:hover h2::after { opacity: 1; transform: none; }

@media (max-width: 780px) {
  .portales { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .portal--grande { grid-row: auto; }
  .portal h2 { font-size: clamp(1.2rem, 5.5vw, 1.7rem); }
}

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

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

.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. */
.sala__lista,
.sala__panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sala__lista {
  padding: var(--e5) 0;
  background: #07111a;
  border-right: 1px solid var(--borde);
}

.sala__marca {
  padding: 0 var(--e5) var(--e4);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}

.sala__marca strong {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: var(--t-base);
  font-weight: 800;
  letter-spacing: -.025em;
}

.sala__marca span { font-size: var(--t-sm); color: var(--tenue); }

.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 var(--e3) var(--e4); }

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

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

.sala__canal {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  min-height: 40px;
  padding: 8px var(--e3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: #c9c9c9;
  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); }
/* El de la cabecera del canal va con el texto, no apagado: ahí es el que dice
   de un vistazo si esto se lee o se contesta. */
#sala-canal .sala__icono { color: var(--tenue); margin-right: var(--e2); vertical-align: -2px; }
.sala__canal:hover { background: rgba(255, 255, 255, .035); color: var(--texto); }

.sala__canal.activo {
  background: rgba(79, 195, 217, .12);
  color: var(--texto);
  font-weight: 600;
}


/* Barrita que marca el canal abierto sin mover el texto de sitio. */
.sala__canal.activo::after {
  content: "";
  position: absolute;
  left: calc(var(--e3) * -1);
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--arena);
}

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

.sala__panel { padding: var(--e5) var(--e6) var(--e7); }

.sala__barra {
  position: sticky;
  top: calc(var(--e5) * -1);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e3);
  margin: calc(var(--e5) * -1) calc(var(--e6) * -1) var(--e5);
  padding: var(--e5) var(--e6) var(--e4);
  background: linear-gradient(var(--superficie) 78%, rgba(16, 16, 16, 0));
  font-weight: 700;
}

.sala__barra h2 { max-width: none; white-space: nowrap; font-size: var(--t-lg); }

/* Solo existe en móvil: en escritorio la lista de canales está siempre puesta. */
.sala__canales-boton {
  display: none;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 8px 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);
  font-weight: 600;
  cursor: pointer;
}

/* Tres rayas dibujadas con un degradado que se repite: así van apiladas sin
   necesidad de tres elementos dentro del botón. */
.sala__canales-boton::before {
  content: "";
  width: 14px;
  height: 12px;
  background: linear-gradient(var(--arena) 2px, transparent 2px) 0 0 / 14px 5px repeat-y;
}

.sala__velo {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px);
  animation: aparecer-velo var(--medio) var(--curva);
}

@keyframes aparecer-velo { from { opacity: 0; } }
.sala__barra small { font-weight: 400; font-size: var(--t-md); color: var(--tenue); }

/* En móvil la lista de canales se comía media pantalla. Pasa a ser un panel
   lateral que se abre desde la barra. */
@media (max-width: 820px) {
  .sala { grid-template-columns: 1fr; }
  .sala__canales-boton { display: inline-flex; }

  .sala__lista {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 5;
    width: min(82%, 20rem);
    border-right: 1px solid var(--borde);
    box-shadow: var(--s3);
    transform: translateX(-102%);
    transition: transform var(--medio) var(--curva);
  }

  .sala__lista.abierta { transform: none; }
  .sala__canal { min-height: 46px; }
  .sala__panel { padding: var(--e4) var(--e5) var(--e7); }

  .sala__barra {
    margin: calc(var(--e4) * -1) calc(var(--e5) * -1) var(--e4);
    padding: var(--e4) var(--e5) var(--e3);
  }

  .sala__barra small { flex: 1 0 100%; }

}

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

.mensaje__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  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; 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 {
  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 { 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; }
}

.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); }

@media (max-width: 520px) {
  .comentar { flex-direction: column; }
  .comentar .boton { width: 100%; }
}

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

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


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

.sala__buscar { margin-left: auto; }

.sala__buscar input {
  width: min(15rem, 42vw);
  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);
}

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

.fundador {
  position: relative;
  margin-top: var(--e9);
  padding: clamp(var(--e6), 4vw, var(--e8));
  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);
  box-shadow: var(--s2), var(--brillo);
}

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

.fundador__cabeza > div { min-width: 0; }
.fundador__cabeza h2 { max-width: 14ch; font-size: var(--t-3xl); }
.fundador__cabeza p { margin: var(--e3) 0 0; max-width: 46ch; font-size: var(--t-base); color: var(--tenue); }

.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;
}

.beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: var(--e3);
  margin-top: var(--e7);
}

.beneficio {
  display: flex;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva), background var(--medio) var(--curva);
}

.beneficio:hover {
  transform: translateY(-2px);
  border-color: var(--borde-vivo);
  background: var(--superficie-2);
}

.beneficio > span { flex: none; font-size: var(--t-xl); line-height: 1.3; }
.beneficio strong { display: block; font-size: var(--t-md); }
.beneficio p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--tenue); }

.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--todos { --nivel: var(--agua); }
.nivel--algunos { --nivel: var(--arena); }
.nivel--uno { --nivel: var(--alarma); }

.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); }

.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; }

/* ---------- 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;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-2);
  color: var(--arena);
  font-family: Archivo, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
}

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

.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; font-size: 1.4rem; }
}

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

.subir input[type="file"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 7px;
  border: 1px dashed var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-size: var(--t-sm);
  color: var(--tenue);
}

/* El selector de archivo nativo desentonaba con el resto de controles. */
.subir input[type="file"]::file-selector-button {
  margin-right: var(--e3);
  padding: 9px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva);
}

.subir input[type="file"]::file-selector-button:hover {
  background: #1c1c1c;
  border-color: var(--borde-vivo);
}

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

@media (max-width: 560px) {
  .subir { flex-direction: column; align-items: stretch; }
  .subir .boton { width: 100%; }
}

/* ---------- 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); }
.legal h2 { margin: var(--e8) 0 var(--e3); font-size: var(--t-xl); }
.legal p { font-size: var(--t-base); line-height: 1.75; color: #d4d4d4; }
.legal__entrada { font-size: var(--t-lg); }
.legal a { color: var(--arena); text-underline-offset: 3px; }

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

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

.legal__nota {
  margin-top: var(--e6);
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--arena);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-size: var(--t-md);
}

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


/* ---------- Panel de administración ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--e3);
  margin-bottom: var(--e7);
}

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

.cifra__valor {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.cifra__etiqueta {
  margin: var(--e2) 0 0;
  font-size: var(--t-md);
  color: var(--texto);
}

.cifra__pista {
  margin: var(--e1) 0 0;
  font-size: var(--t-sm);
  color: var(--apagado);
}

.panel-bloque { margin-bottom: var(--e7); }

.panel-bloque h2 {
  margin: 0 0 var(--e4);
  font-size: var(--t-lg);
}

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

.grafica {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  height: 11rem;
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  overflow-x: auto;
}

.grafica__dia {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--e2);
  height: 100%;
  min-width: 15px;
}

.grafica__barra {
  flex: 1;
  min-width: 0;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--arena), rgba(240, 185, 104, .35));
}

/* Un día sin altas tiene que verse como un día, no como un hueco: se deja la
   raya del suelo para que se lea que ese día existió y salió a cero. */
.grafica__barra--vacia { background: var(--borde-vivo); }

.grafica__pie {
  font-size: 10px;
  white-space: nowrap;
  color: var(--apagado);
}

/* Con noventa días no caben las fechas ni en un escritorio: el script deja
   visibles unas seis y esconde el resto con visibility, no con display, porque
   si la fecha desaparece la columna encoge y su barra sale más alta. */
.grafica__pie--muda { visibility: hidden; }

.lista-panel {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  overflow: hidden;
}

.lista-panel__vacio {
  margin: 0;
  padding: var(--e5);
  color: var(--apagado);
}

.fila-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borde);
}

.fila-panel:last-child { border-bottom: 0; }
.fila-panel__texto { flex: 1; min-width: 0; }

.fila-panel__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--texto);
  /* Un nombre de una sola palabra larga no rompe solo dentro de un flex, y se
     mete por debajo del botón de al lado. */
  overflow-wrap: anywhere;
}

.fila-panel__cuerpo {
  margin: var(--e2) 0 0;
  font-size: var(--t-md);
  color: var(--tenue);
  overflow-wrap: anywhere;
}

.fila-panel__pista {
  margin: var(--e2) 0 0;
  font-size: var(--t-sm);
  color: var(--apagado);
  overflow-wrap: anywhere;
}

.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(79, 195, 217, .16); color: var(--agua); }
.marquita--fundador { background: rgba(240, 185, 104, .16); color: var(--arena); }
.marquita--parado { background: rgba(226, 114, 92, .16); color: var(--alarma); }

.boton--pequeno {
  flex-shrink: 0;
  min-height: 36px;
  padding: var(--e2) var(--e4);
  font-size: var(--t-sm);
}

/* En una columna estrecha, texto y botón lado a lado dejan al texto en un
   canalón de cien píxeles. Mejor el botón debajo. */
@media (max-width: 34rem) {
  .fila-panel { flex-direction: column; align-items: flex-start; }
}

.atajos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}


/* ---------- Panel: periodo, embudo y series ---------- */

.periodo {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e5);
}

.periodo__boton {
  min-height: 38px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: none;
  color: var(--tenue);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.periodo__boton:hover { color: var(--texto); border-color: var(--borde-vivo); }

.periodo__boton--puesto {
  border-color: var(--arena);
  background: rgba(79, 195, 217, .12);
  color: var(--arena);
}

.panel-pista {
  margin: calc(var(--e4) * -1) 0 var(--e4);
  font-size: var(--t-sm);
  color: var(--apagado);
}

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

.peldano + .peldano { margin-top: var(--e5); }

.peldano__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e2);
}

.peldano__nombre { font-size: var(--t-md); color: var(--texto); }

.peldano__valor {
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--texto);
}

.peldano__carril {
  height: 10px;
  border-radius: var(--r-redondo);
  background: var(--fondo-2);
  overflow: hidden;
}

.peldano__relleno {
  display: block;
  height: 100%;
  border-radius: var(--r-redondo);
  background: linear-gradient(90deg, var(--arena-viva), var(--arena));
  transition: width var(--lento) var(--curva);
}

.peldano__pie {
  margin: var(--e2) 0 0;
  font-size: var(--t-sm);
  color: var(--apagado);
}

.peldano__salto {
  margin-right: var(--e2);
  padding: 1px var(--e2);
  border-radius: var(--r-redondo);
  background: rgba(79, 195, 217, .14);
  font-weight: 600;
  color: var(--arena);
}

/* Perder más del ochenta y cinco por ciento en un peldaño es lo que hay que
   mirar primero, así que se pinta distinto. */
.peldano__salto--flojo { background: rgba(226, 114, 92, .16); color: var(--alarma); }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: calc(var(--e4) * -1) 0 var(--e4);
  font-size: var(--t-sm);
  color: var(--apagado);
}

.leyenda__punto {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.leyenda__punto + .leyenda__punto { margin-left: var(--e3); }
.leyenda__punto--visitas { background: var(--agua); }
.leyenda__punto--altas { background: var(--arena); }
.leyenda__punto--fundadores { background: #8de08a; }

.grafica__grupo {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  width: 100%;
  height: 100%;
}

.grafica__barra--visitas { background: linear-gradient(180deg, var(--agua), rgba(79, 195, 217, .4)); }
.grafica__barra--altas { background: linear-gradient(180deg, var(--arena), rgba(240, 185, 104, .4)); }
.grafica__barra--fundadores { background: linear-gradient(180deg, #8de08a, rgba(141, 224, 138, .4)); }

.fila-barra {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--borde);
}

.fila-barra:last-child { border-bottom: 0; }

/* La barra va detrás del texto, no al lado: en una columna estrecha una barra
   con su propio hueco deja el nombre en un canalón. */
.fila-barra__fondo {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(79, 195, 217, .1);
  pointer-events: none;
}

.fila-barra__nombre {
  position: relative;
  flex: 1;
  min-width: 0;
  font-size: var(--t-md);
  color: var(--texto);
  overflow-wrap: anywhere;
}

.fila-barra__valor {
  position: relative;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tenue);
}


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

.aviso-dos-pasos {
  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);
}

.aviso-dos-pasos a { color: inherit; }


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


/* Con margin-left:auto el buscador se descolgaba solo a la derecha dejando
   medio renglón vacío. En una columna ocupa la línea entera. Va al final del
   archivo a propósito: las reglas base del buscador están más abajo que el
   bloque de móvil, y si no ganarían por orden. */
@media (max-width: 820px) {
  .sala__buscar { flex: 1 0 100%; margin-left: 0; }
  .sala__buscar input { width: 100%; }
}


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

.tramo__ahora {
  padding: var(--e7) var(--e6);
  border: 1px solid rgba(240, 185, 104, .3);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(240, 185, 104, .07), var(--superficie) 60%);
  box-shadow: var(--s2);
  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__tuyo { margin: var(--e3) 0 0; font-size: var(--t-md); color: var(--tenue); }
.tramo__tuyo strong { color: var(--texto); }

.tramo__precio {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--e3);
  margin: var(--e4) 0 var(--e3);
}

.tramo__precio s { font-size: var(--t-lg); color: var(--apagado); }

.tramo__precio strong {
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--arena-viva);
}

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

/* Con cinco o menos, la cifra deja de ser un dato y pasa a ser un aviso. */
.tramo__quedan--pocas { color: var(--alarma); font-weight: 600; }

.tramo__barra {
  height: 6px;
  margin-bottom: var(--e3);
  border-radius: var(--r-redondo);
  background: var(--fondo-2);
  overflow: hidden;
}

.tramo__barra span {
  display: block;
  height: 100%;
  border-radius: var(--r-redondo);
  background: linear-gradient(90deg, var(--arena), var(--arena-viva));
  transition: width var(--lento) var(--curva);
}

.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);
}


/* La escalera: se ve de un vistazo que el precio sube por etapas. */

.escalera {
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  overflow: hidden;
}

.peldano-precio { border-bottom: 1px solid var(--borde); }
.peldano-precio:last-child { border-bottom: 0; }

.peldano-precio__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  cursor: pointer;
  list-style: none;
  transition: background var(--rapido) var(--curva);
}

/* El triángulo que pone Safari por su cuenta. */
.peldano-precio__cabeza::-webkit-details-marker { display: none; }
.peldano-precio__cabeza:hover { background: var(--superficie-2); }

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

/* La salida no se pliega: no hay nada dentro que enseñar. */
.peldano-precio--salida .peldano-precio__cabeza { cursor: default; }
.peldano-precio--salida .peldano-precio__cabeza:hover { background: none; }

.peldano-precio__flecha {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-left: var(--e2);
  border-right: 2px solid var(--apagado);
  border-bottom: 2px solid var(--apagado);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--medio) var(--curva);
}

details[open] > .peldano-precio__cabeza .peldano-precio__flecha {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.peldano-precio__dentro {
  padding: 0 var(--e5) var(--e5);
  border-top: 1px solid var(--borde);
  padding-top: var(--e4);
}

.peldano-precio__titulillo {
  margin: 0 0 var(--e3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

.peldano-precio__dentro .ventajas + .peldano-precio__titulillo { margin-top: var(--e5); }

.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:not(.ventaja__icono) { font-size: var(--t-sm); color: var(--tenue); }
.ventaja__icono { flex-shrink: 0; width: 1.4rem; font-size: var(--t-md); line-height: 1.5; }

/* Lo que solo da este tramo se separa de lo que dan todos. */
.ventajas--propias li {
  padding: var(--e3);
  border-radius: var(--r-sm);
  background: rgba(240, 185, 104, .08);
}

.ventajas--propias li + li { margin-top: var(--e2); }
.ventajas--propias strong { color: var(--arena-viva); }

.peldano-precio__quien { flex: 1; min-width: 0; }
.peldano-precio__quien strong { display: block; font-size: var(--t-md); color: var(--texto); }
.peldano-precio__quien span { font-size: var(--t-sm); color: var(--apagado); }

.peldano-precio__promesa {
  flex: 0 1 auto;
  font-size: var(--t-sm);
  color: var(--tenue);
}

.peldano-precio__euros {
  flex-shrink: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--texto);
}

.peldano-precio__sello {
  flex-shrink: 0;
  padding: 2px var(--e2);
  border-radius: var(--r-redondo);
  background: var(--superficie-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
}

.peldano-precio__sello--ahora { background: rgba(240, 185, 104, .16); color: var(--arena); }

.peldano-precio--ahora > .peldano-precio__cabeza { background: rgba(240, 185, 104, .06); }
.peldano-precio--ahora .peldano-precio__euros { color: var(--arena-viva); }

/* Un tramo agotado no se esconde: enseñar que ya ha pasado uno es lo que hace
   creíble que el precio sube de verdad. */
.peldano-precio--agotado > .peldano-precio__cabeza { opacity: .5; }
.peldano-precio--agotado .peldano-precio__euros { text-decoration: line-through; }

.peldano-precio--salida { background: var(--fondo-2); }
.peldano-precio--salida .peldano-precio__euros { color: var(--tenue); }

@media (max-width: 34rem) {
  .peldano-precio__cabeza { flex-wrap: wrap; }
  .peldano-precio__promesa { flex: 1 0 100%; order: 3; }
  .peldano-precio__quien { flex: 1 0 60%; }
}


/* Dónde acaba tu nombre según el tramo. */

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

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

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

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

/* Cuanto más arriba el tramo, más se nota la tarjeta. */
.huella--media { border-color: var(--borde-vivo); }

.huella--alta {
  border-color: rgba(240, 185, 104, .38);
  background: linear-gradient(180deg, rgba(240, 185, 104, .07), var(--superficie) 70%);
}

.huella--alta .huella__tramo { color: var(--arena); }

.oferta--numero .oferta__precio strong {
  font-size: clamp(2.2rem, 8vw, 3rem);
  color: var(--arena-viva);
}


/* La frase que queda del bloque que se repetía tres veces. */
.regla-tramos {
  max-width: 56ch;
  margin: var(--e7) auto 0;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--tenue);
  text-align: center;
}

/* El rótulo del bloque exclusivo se distingue del de los momentos: uno dice
   QUÉ es especial, los otros CUÁNDO llega. */
.peldano-precio__titulillo--propio { color: var(--arena); }

/* Los grupos por momento se separan entre sí. */
.peldano-precio__dentro .ventajas + .peldano-precio__titulillo { margin-top: var(--e5); }


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

  /* 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. */
  body.con-barra-compra .pie { padding-bottom: 6rem; }
}

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


/* Lo que te descargas hoy. Va antes que nada porque es la ventaja más fuerte y
   estaba enterrada en un renglón de una lista. */
.ahora-mismo {
  max-width: 46rem;
  margin: var(--e6) auto var(--e7);
  padding: var(--e5) var(--e6);
  border: 1px solid rgba(79, 195, 217, .32);
  border-radius: var(--r-md);
  background: rgba(79, 195, 217, .06);
}

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

.ahora-mismo__estado { margin: 0; font-size: var(--t-md); color: var(--texto); }

.ahora-mismo__aviso {
  margin: var(--e3) 0 0;
  font-size: var(--t-sm);
  color: var(--apagado);
}

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


/* Los sorteos van aparte a propósito: mezclarlos con lo garantizado hace que
   parezca que le tocan a todo el mundo, y no es verdad. */
.sorteos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--e4);
}

.sorteo {
  padding: var(--e6);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie);
}

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

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

.sorteos__reglas {
  max-width: 54ch;
  margin: var(--e5) auto 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--apagado);
  text-align: center;
}


/* ---------- Tu enlace de fundador ---------- */

.referidos {
  margin: var(--e7) 0 0;
  padding: var(--e6);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.referidos h3 { margin: 0 0 var(--e3); font-size: var(--t-lg); }
.referidos > p { margin: 0 0 var(--e5); font-size: var(--t-md); color: var(--tenue); }

.referidos h4 {
  margin: var(--e7) 0 var(--e4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

.referidos__enlace { display: flex; flex-wrap: wrap; gap: var(--e3); }

.referidos__enlace input {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  color: var(--texto);
  font: inherit;
  /* 16px o iOS acerca la página al tocar el campo. */
  font-size: var(--t-base);
}

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

.referidos__cuenta {
  margin: var(--e4) 0 0;
  font-size: var(--t-md);
  color: var(--texto);
}

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

.referidos__fila {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde);
}

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

.referidos__puesto {
  flex-shrink: 0;
  width: 1.6rem;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  color: var(--apagado);
  text-align: right;
}

.referidos__nombre {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: 1;
  min-width: 0;
  font-size: var(--t-md);
  color: var(--texto);
  overflow-wrap: anywhere;
}

.referidos__cuantos {
  flex-shrink: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--arena);
}


.ahora-mismo__lista {
  margin: var(--e3) 0 0;
  padding-left: var(--e5);
  font-size: var(--t-md);
  color: var(--tenue);
}

.ahora-mismo__lista li { margin-bottom: var(--e2); }
.ahora-mismo__lista strong { color: var(--texto); }


/* El sorteo con dinero se distingue de los que reparten cosas del juego. */
.sorteo--dinero {
  border-style: solid;
  border-color: rgba(240, 185, 104, .38);
  background: linear-gradient(180deg, rgba(240, 185, 104, .07), var(--superficie) 70%);
}

.sorteo--dinero .sorteo__cuando { color: var(--arena); }


/* ---------- Ganar dinero enseñando el juego ---------- */

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

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

.ingresos__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  margin: 0 0 var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-md);
  color: var(--tenue);
}

.ingresos__linea strong {
  flex-shrink: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--texto);
}

.ingresos__rebaja { color: var(--arena); }

/* Lo que te llevas cierra la cuenta y no lleva raya debajo: es el total. */
.ingresos__linea--tuyo { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ingresos__linea--tuyo strong { font-size: var(--t-2xl); color: var(--arena-viva); }

.ingresos__texto h3 { margin: 0 0 var(--e4); font-size: var(--t-lg); }

.ingresos__texto ol {
  margin: 0 0 var(--e5);
  padding-left: var(--e5);
  font-size: var(--t-md);
  color: var(--tenue);
}

.ingresos__texto li { margin-bottom: var(--e3); }

.ingresos__cuando {
  margin: 0;
  padding: var(--e4);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--tenue);
}


/* Los sorteos, dentro del tramo. Se distinguen de lo garantizado a la vista:
   una cosa es lo que recibes seguro y otra a lo que entras. */
.peldano-precio__titulillo--sorteo { color: var(--arena); }

.peldano-precio__sorteo-nota {
  margin: calc(var(--e3) * -1) 0 var(--e3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--apagado);
}

.ventajas--sorteo li {
  padding: var(--e3);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-sm);
}

.ventajas--sorteo li + li { margin-top: var(--e2); }


/* El botón de comprar cierra cada tramo desplegado. */
.peldano-precio__cierre { margin-top: var(--e5); }

.peldano-precio__ojo {
  margin: var(--e3) 0 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--arena);
  text-align: center;
}

.peldano-precio__cerrado {
  margin: 0;
  padding: var(--e4);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  font-size: var(--t-sm);
  color: var(--apagado);
  text-align: center;
}


/* Lo que se está cocinando y todavía no se cuenta. Se distingue de lo que sí
   está definido: borde discontinuo y sin nada que pulsar. */
.asoma {
  max-width: 46rem;
  margin: var(--e6) auto 0;
  padding: var(--e6);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--fondo-2);
  text-align: center;
}

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

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

.asoma__letra {
  max-width: 52ch;
  margin: var(--e4) auto 0 !important;
  font-size: var(--t-sm) !important;
  line-height: 1.6;
  color: var(--apagado) !important;
}


/* Dentro del panel de fundador, la cuenta lleva su rótulo: ahí ya no hay una
   cabecera de sección que diga de qué va. */
.ingresos--dentro { margin-top: var(--e7); }

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

.ingresos--dentro + .asoma { margin-top: var(--e5); }


/* ---------- Retención ---------- */

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

.retencion__fila {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) 0;
}

.retencion__fila + .retencion__fila { border-top: 1px solid var(--borde); }

.retencion__cuando {
  flex-shrink: 0;
  width: 4.5rem;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--texto);
}

.retencion__carril {
  flex: 1;
  min-width: 0;
  height: 10px;
  border-radius: var(--r-redondo);
  background: var(--fondo-2);
  overflow: hidden;
}

.retencion__relleno {
  display: block;
  height: 100%;
  border-radius: var(--r-redondo);
  background: linear-gradient(90deg, var(--arena-viva), var(--arena));
  transition: width var(--lento) var(--curva);
}

.retencion__pct {
  flex-shrink: 0;
  width: 4.5rem;
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--texto);
  text-align: right;
}

/* El denominador, en pequeño: un 50 % sobre dos personas no es un 50 %, y sin
   verlo al lado el porcentaje engaña. */
.retencion__de {
  flex-shrink: 0;
  width: 8rem;
  font-size: var(--t-sm);
  color: var(--apagado);
  text-align: right;
}

@media (max-width: 40rem) {
  .retencion__fila { flex-wrap: wrap; }
  .retencion__carril { order: 3; flex: 1 0 100%; margin-top: var(--e2); }
  .retencion__pct { flex: 1; text-align: left; }
  .retencion__de { width: auto; }
}


/* ---------- Panel: pestañas, tiempo real y usuarios ---------- */

.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; }

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

.filtros { margin-bottom: var(--e4); }
.periodo__suyo { display: inline-flex; }

.periodo__suyo input {
  width: 5.5rem;
  min-height: 38px;
  padding: var(--e2) var(--e3);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-redondo);
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: var(--t-base);
  text-align: center;
}

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


/* Lo que pasa ahora mismo. Fuera de las pestañas: es lo único que se mira sin
   buscarlo, y lo único que caduca en un minuto. */
.ahora {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e5);
  padding: var(--e4) var(--e5);
  border: 1px solid rgba(141, 224, 138, .3);
  border-radius: var(--r-md);
  background: rgba(141, 224, 138, .06);
}

.ahora__punto {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #8de08a;
  animation: ahora-late 2.4s ease-in-out infinite;
}

@keyframes ahora-late {
  from, to { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) { .ahora__punto { animation: none; } }

.ahora__cifra { margin: 0; font-size: var(--t-md); color: var(--texto); }
.ahora__cifra strong { font-family: Archivo, system-ui, sans-serif; font-size: var(--t-xl); font-weight: 900; }
.ahora__detalle { margin: 0 0 0 auto; font-size: var(--t-sm); color: var(--apagado); }

/* Sin nadie jugando no se pinta de verde: sería celebrar un cero. */
.ahora--vacio { border-color: var(--borde); background: var(--superficie); }
.ahora--vacio .ahora__punto { background: var(--apagado); animation: none; }


/* Buscar dentro de una pestaña. */
.buscar-panel { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e4); }

.buscar-panel input,
.buscar-panel select {
  min-height: 44px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--fondo-2);
  color: var(--texto);
  font: inherit;
  /* 16px o iOS acerca la página al tocar. */
  font-size: var(--t-base);
}

.buscar-panel input { flex: 1 1 18rem; min-width: 0; }
.buscar-panel input:focus-visible,
.buscar-panel select:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }


/* Una persona, con todo lo suyo. */
.usuario-fila {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e5);
  border-bottom: 1px solid var(--borde);
}

.usuario-fila:last-child { border-bottom: 0; }

.usuario-fila__foto {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--superficie-2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--tenue);
  overflow: hidden;
}

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

.usuario-fila__cuerpo { flex: 1; min-width: 0; }

.usuario-fila__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.usuario-fila__correo {
  margin: var(--e1) 0 0;
  font-size: var(--t-sm);
  color: var(--apagado);
  overflow-wrap: anywhere;
}

.usuario-fila__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: var(--e2) var(--e4);
  margin-top: var(--e4);
}

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

.dato__que {
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apagado);
}

.dato__valor { font-size: var(--t-sm); color: var(--texto); overflow-wrap: anywhere; }

/* Un dato que no tenemos se atenúa, para que no se lea como un cero real. */
.dato--flojo .dato__valor { color: var(--apagado); font-style: italic; }

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

/* ---------- Copias en circulación ---------- */

/* Un aviso, no una alarma: lo que hay debajo son indicios y la diferencia
   importa antes de escribirle a nadie. */
.aviso-panel {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  font-size: .875rem; line-height: 1.65; color: var(--tenue);
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--arena);
  border-radius: var(--r-sm);
}
.aviso-panel strong { color: var(--texto); font-weight: 600; }

/* La marquita de una fila señalada. No roja: rojo es "esta persona ha hecho
   algo", y aquí todavía no se sabe. */
.marquita--ojo { color: var(--arena-viva); }

/* ---------- La cuarta puerta: tu perfil, de canto ---------- */

/* Una columna estrecha a la derecha de las tres. Va de canto y sin foto a
   propósito: las tres de al lado son el juego, y lo tuyo tiene que estar sin
   competir con ellas. */
.portales { grid-template-columns: 1.25fr 1fr auto; }
/* Columna y filas explícitas. Con solo `span 2`, la tarjeta de Comunidad se
   colaba en la tercera columna y el panel se quedaba debajo, a media altura. */
.portal--canto { grid-column: 3; grid-row: 1 / span 2; }

.portal--canto {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--e4);
  width: 64px;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.portal--canto:hover { background: var(--superficie-2); border-color: var(--arena); }

.portal__vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 800; font-size: var(--t-lg);
  letter-spacing: .02em;
  color: var(--texto);
}
.portal--canto:hover .portal__vertical { color: var(--arena-viva); }

.portal__flecha {
  width: 9px; height: 9px;
  border-left: 2px solid var(--apagado);
  border-top: 2px solid var(--apagado);
  transform: rotate(45deg);
}
.portal--canto:hover .portal__flecha { border-color: var(--arena-viva); }

@media (max-width: 780px) {
  /* En vertical no hay sitio para una columna de canto: pasa a ser una barra
     ancha debajo, con el texto horizontal. */
  .portales { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr) auto; }
  /* `grid-column` también, no solo `grid-row`: con una sola columna declarada,
     pedir la tercera hace que el navegador se invente las dos de en medio, y las
     cuatro puertas salían en tres tiras de 42 px con los títulos cortados. */
  .portal--canto { grid-column: auto; grid-row: auto; width: auto; flex-direction: row; min-height: 56px; }
  .portal__vertical { writing-mode: horizontal-tb; transform: none; }
  .portal__flecha { transform: rotate(135deg); }
}

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

.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); }

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

.mensaje__avatar--fundador { border: 2px solid var(--arena); }
.mensaje__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.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); }


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

/* El retrato: quién eres, con un trozo de isla detrás. La foto y el nombre van
   sobre la imagen, no al lado, para que la cabecera ocupe una franja y no
   media pantalla. */
.retrato {
  position: relative;
  margin-bottom: var(--e6);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}

.retrato__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}

/* Dos capas: una oscura entera para que el texto se lea, y una degradada desde
   la izquierda para que la foto de la isla siga viéndose por la derecha. */
.retrato__velo {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .78) 45%, rgb(0 0 0 / .45) 100%),
    rgb(0 0 0 / .25);
}

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

.retrato__quien { min-width: 0; flex: 1 1 auto; }
.retrato__quien h1 { max-width: none; font-size: var(--t-3xl); }

.retrato__cifras {
  flex: none;
  display: flex;
  gap: var(--e6);
  margin: 0;
  text-align: right;
}

.retrato__cifras dt {
  margin: 0 0 4px;
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apagado);
}

.retrato__cifras dd {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .retrato__interior { flex-wrap: wrap; gap: var(--e4); padding: var(--e6) var(--e5); }
  .retrato__cifras { width: 100%; text-align: left; gap: var(--e5); }
  .retrato__velo { background: rgb(0 0 0 / .8); }
}


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

@media (max-width: 620px) {
  .caratula { flex-direction: column; align-items: center; }
  .caratula__imagen { width: min(240px, 70%); }
  .caratula__ficha { width: 100%; }
}


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

/* Dentro del cerrojo son un adelanto de lo que hay detrás, no una lista de
   cosas que ya tienes. */
.ventajas--apagadas { margin-top: var(--e6); opacity: .55; }


/* ---------- 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__entrada { max-width: 52ch; margin: 0 0 var(--e6); font-size: var(--t-lg); line-height: 1.65; color: var(--tenue); }
.presenta__claves { margin-bottom: var(--e6); }
.presenta__botones { display: flex; flex-wrap: wrap; gap: var(--e3); }

@media (max-width: 860px) {
  .presenta { flex-direction: column; align-items: center; text-align: center; }
  .presenta__caratula { width: min(300px, 62%); }
  .presenta__texto h1, .presenta__entrada { max-width: none; }
  .presenta__botones { justify-content: center; }
  /* Las claves vuelven a alinearse a la izquierda: son frases con su palomita
     delante, y centradas la palomita queda a media altura de la nada. */
  .presenta__claves { text-align: left; }
}


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


/* En la portada el cierre va antes que las preguntas, y el pie se queda en la
   última pantalla, dentro de las preguntas: como en el cierre, lo demás
   centrado en lo que sobra y el pie pegado abajo. La /3 no lleva `con-pie`. */
.seccion.plena.con-pie {
  grid-template-rows: 1fr auto;
  align-content: stretch;
  padding-bottom: 0;
}

.plena.con-pie > .contenedor { align-self: safe center; }


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

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

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2) var(--e5);
  margin-bottom: var(--e4);
}

/* Gris, y no blanco: el pie está debajo del único botón de la pantalla y no
   tiene que competir con él. */
.pie--dentro a {
  color: var(--apagado);
  font-size: var(--t-sm);
  text-decoration: none;
}

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

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


/* ---------- 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. */
@media (max-width: 720px) {
  .heroe--grande { --logo-grande: min(74vw, 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;
}

.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; }
}


/* ---------- El JRS: los otros contra este ---------- */

/*
 * Dos columnas enfrentadas. Es el único sitio de la web donde se compara con
 * algo, y por eso tiene forma propia: la de la izquierda va apagada y con el
 * filo gris, la de la derecha encendida y con el filo de la marca. Sin ese
 * contraste las dos listas se leen como dos listas, y la gracia es que una
 * contesta a la otra.
 */
.contra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--e4);
}

.contra__lado {
  padding: var(--e6);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-vivo);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--apagado);
}

.contra__lado--bien {
  border-left-color: var(--arena);
  background: var(--superficie-2);
  color: var(--tenue);
}

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

.contra__marca--mal { color: var(--apagado); }
.contra__marca--bien { color: var(--arena); }

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

.contra__lista li {
  position: relative;
  padding-left: var(--e5);
  font-size: var(--t-md);
  line-height: 1.55;
}

/* Una raya tachando a la izquierda, y una palomita en el otro lado: se ve de
   qué lado está cada lista antes de leer una palabra. */
.contra__lista li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--apagado);
}

.contra__lado--bien .contra__lista li::before { content: "·"; color: var(--arena); font-weight: 800; }

.contra__lado--bien .contra__lista li { color: var(--texto); }

.contra__pie {
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  line-height: 1.6;
}


/* ---------- El ejemplo del coco, en /juego ---------- */

.ejemplo {
  max-width: 62rem;
  margin: var(--e7) auto 0;
  padding: var(--e7);
  border: 1px dashed var(--borde-vivo);
  border-radius: var(--r-lg);
  text-align: center;
}

.ejemplo__pregunta {
  margin: 0 0 var(--e3);
  font-family: Archivo, sans-serif;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--arena);
}

.ejemplo__texto { max-width: 58ch; margin: 0 auto var(--e5); font-size: var(--t-lg); line-height: 1.7; color: var(--tenue); }
.ejemplo__remate { max-width: 58ch; margin: 0 auto; font-size: var(--t-md); line-height: 1.7; color: var(--apagado); }
.ejemplo__remate strong { color: var(--texto); }


/* La etiqueta del héroe cuando lleva la frase de la marca: con el filo de la
   arena, que es lo que hace que se lea como un sello y no como una versión. */
/* ---------- 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 orden que se pidio: el cierre, despues las preguntas, y el pie al final.
 *
 * El pie lo mueve `js/portada.js` --vive dentro del cierre y ahi no hay `order`
 * que valga-- y estas dos lineas le cambian el turno a las dos secciones. En el
 * ordenador no se toca nada: alli el pie apoyado en la parte baja de la foto es
 * lo que se pidio, y cada seccion ocupa su pantalla.
 */
@media (max-width: 860px) {
  main { display: flex; flex-direction: column; }

  #entrar { order: 1; }
  #preguntas { order: 2; }
  .pie--dentro { order: 3; }

  /* Sin el pie dentro, el cierre recupera la pantalla entera para su mensaje:
     tenia 522 de 812. */
  .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;
  }
}


/* ---------- El coco: la idea del JRS contada con una cosa concreta ---------- */

/*
 * Cuatro tiempos: la pregunta, el reto, lo que se puede hacer, y que ninguna es
 * la correcta. En el ordenador van juntos y compactos --la sección entera cabe
 * en una pantalla-- y en el móvil cada uno tiene su momento, más abajo.
 */
/*
 * En el ordenador, en tres filas y compacto. La seccion entera cabe en una
 * pantalla y se lee de una mirada, asi que repartir en cuatro tiempos --que es
 * lo que hace que el movil lo cuente con el scroll-- solo servia para que el
 * boton se saliera cuatro pixeles por abajo.
 */
.coco {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--e4);
  row-gap: var(--e4);
  margin: var(--e6) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}

.coco p { margin: 0; }

/* La pregunta y el reto comparten fila; las opciones ocupan la suya entera. */
.coco__opciones { grid-column: 1 / -1; }

/* Y el veredicto con el boton al lado, como estaba el remate de antes: la frase
   que hay que recordar a la izquierda, la salida a la derecha. */
.coco__veredicto { grid-column: 1; max-width: 46ch; }
.coco__pie { display: contents; }
.coco__pie a { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; }

.coco__pregunta {
  font-family: var(--titular);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto);
}

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

/* Seguidas y separadas por un punto: son cuatro opciones, no una lista de la
   compra, y en el ordenador ocupan una línea. */
.coco__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-md);
  color: var(--texto);
}

.coco__opciones li { position: relative; }

.coco__opciones li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--e4) / -2);
  top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--apagado);
  transform: translate(-50%, -50%);
}

/* La frase que se tiene que quedar. */
.coco__veredicto {
  font-family: var(--titular);
  font-size: var(--t-lg);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--arena);
  text-wrap: balance;
}



/*
 * EN PANTALLA ESTRECHA, EN UNA COLUMNA.
 *
 * Es lo que ve quien no tiene escenas --pide menos movimiento, o tiene el movil
 * apaisado--: el coco del ordenador, puesto en vertical. Con escenas, el coco
 * del movil es otro y vive en css/escenas.css.
 */
@media (max-width: 860px) {
  .coco {
    /* Una columna: la rejilla de dos y el `display: contents` del pie son del
       ordenador, donde la pregunta y el reto caben en la misma linea. */
    display: block;
    margin-top: var(--e8);
    padding-top: 0;
    border-top: 0;
  }

  .coco__pie { display: block; }
  .coco__veredicto { display: block; }

  .coco__pregunta { margin-bottom: var(--e4) !important; }

  .coco__reto {
    font-size: var(--t-lg);
    color: var(--texto);
  }

  /* En columna y con aire: cada una es una posibilidad distinta, y en fila se
     leen como una enumeración de la que no se recuerda ninguna. */
  .coco__opciones {
    flex-direction: column;
    gap: 0;
    font-size: var(--t-lg);
  }

  .coco__opciones li {
    padding: var(--e4) 0;
    border-bottom: 1px solid var(--borde);
    color: var(--tenue);
  }

  .coco__opciones li:first-child { border-top: 1px solid var(--borde); }
  /* El punto de separación es cosa de la fila; en columna separan las rayas. */
  .coco__opciones li + li::before { display: none; }

  .coco__pie { margin-top: var(--e6) !important; }
}


.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); }