/**
 * Casa.
 *
 * La habitación ocupa toda la pantalla que queda bajo la barra de
 * arriba y hasta la de abajo, sin franjas de fondo por ningún lado.
 * Reddie va en el centro del cuarto, con lo que dice en un bocadillo
 * encima de su cabeza; el panel de cuidados flota sobre la pared de la
 * derecha, metido un trecho hacia dentro, y el libro del Reddie consejo
 * está apoyado en el suelo, a la izquierda.
 *
 * Todo lo que se pulsa está DENTRO del cuarto. Lo que se pega al borde
 * de la pantalla se lee como una barra de herramientas de la web y no
 * como parte de la habitación, y eso es justo lo que no queremos.
 *
 * El oráculo no es otra pantalla: es la misma con la habitación
 * escondida. Comparte maqueta con Casa a propósito —el centro, la caja
 * de Reddie y el panel se colocan igual en los dos— y lo único que
 * cambia es qué se dibuja dentro y que abajo aparece la cuenta atrás.
 * Cuando eran dos maquetas distintas, la del oráculo se quedó sin
 * arreglar y allí el panel caía en fila debajo de Reddie y el reloj
 * acababa fuera de la pantalla.
 */

/*
 * La escena ocupa el alto que queda.
 *
 * «100dvh» es el alto real de la ventana en un móvil, descontando las
 * barras del navegador que aparecen y desaparecen al desplazar. Con
 * «vh» a secas, el navegador da el alto de cuando esas barras están
 * escondidas, y el resultado es una pantalla que siempre sobra por
 * abajo: justo el hueco vacío que se veía.
 *
 * Se le restan la barra de arriba, la de abajo y el relleno.
 */
.rd-casa__escena {
	position: relative;
	display: grid;
	/* Barras, Reddie y panel. Las dos columnas de los lados ocupan lo
	   que necesitan y el centro se queda con todo lo demás, que es lo
	   que hace que Reddie salga grande y centrado de verdad. */
	/*
	 * Tres columnas, y la primera está vacía a propósito.
	 *
	 * El panel de la derecha ocupa sitio, así que con dos columnas
	 * Reddie quedaba centrado en «lo que sobra» y visualmente escorado
	 * a la izquierda. Poniendo a la izquierda una columna hueca del
	 * mismo ancho que el panel, la del centro queda centrada de verdad
	 * respecto a la pantalla.
	 *
	 * El cajón no es una columna a propósito: si lo fuera, abrirlo
	 * recolocaría todo. Flota encima y Reddie se aparta deslizándose.
	 */
	grid-template-columns: 96px minmax(0, 1fr) 96px;
	align-items: center;
	gap: var(--rd-space-4);

	/*
	 * La escena se estira hasta llenar lo que queda bajo la barra de
	 * arriba.
	 *
	 * El «main» de la Casa ya no lleva relleno ni carril central —ver
	 * más abajo—, así que el aire de los lados lo pone ella. Y como
	 * crece con «flex», el alto le llega hecho y no hay que calcularlo
	 * restando la barra a la ventana.
	 */
	flex: 1;
	padding: 0 var(--rd-space-4);
	min-height: calc(100dvh - 210px);

	/*
	 * CUÁNTO SE METE EL PANEL DENTRO DEL CUARTO.
	 *
	 * Los botones estaban pegados al borde derecho de la habitación, o
	 * sea al filo de la pantalla, y ahí no se leen como algo que está
	 * DENTRO del cuarto: se leen como una barra de herramientas de la web
	 * puesta al lado. Es lo que se veía y lo que había que arreglar.
	 *
	 * Con este trecho de pared a su derecha, los botones quedan sobre el
	 * papel pintado con cuarto a los dos lados, que es lo que hace que se
	 * lean como colgados de la pared. La otra mitad del arreglo es la
	 * sombra que echan encima del papel, y está al final del archivo.
	 *
	 * Se suma a la franja reservada de aquí abajo, no se resta de ella:
	 * si el panel se mete un dedo hacia dentro, todo lo que se coloca
	 * contra su borde —el bocadillo y la cuenta atrás— tiene que
	 * apartarse ese mismo dedo. Sin esto volverían los solapes que ya
	 * estaban medidos y arreglados.
	 *
	 * ESTE VALOR SE USA EN CUATRO SITIOS y los cuatro tienen que llevarlo:
	 * la franja de aquí abajo, la misma franja en la ventana baja, el
	 * «right» del panel en el ordenador y el «right» del panel en el
	 * móvil. Son los mismos cuatro sitios que ya se repartían la cuenta
	 * del panel antes de esto.
	 */
	--rd-casa-panel-dentro: var(--rd-space-5);

	/*
	 * Lo que ocupa el panel de cuidados en el borde derecho del cuarto.
	 *
	 * Es el ancho de un botón, más lo que lo separa del borde, más un
	 * dedo de aire, más lo que ahora se mete hacia dentro. Se escribe
	 * aquí, en una variable, porque lo usan dos cosas que no se tocan
	 * entre sí: el propio panel, para colocarse, y el bocadillo, para no
	 * meterse por debajo de él. Con el número repetido en los dos sitios,
	 * corregir uno dejaba el otro mal.
	 */
	--rd-casa-panel-hueco: calc(68px + 2 * var(--rd-space-4) + var(--rd-space-3) + var(--rd-casa-panel-dentro));

	/*
	 * Y lo que se lleva el lado derecho entero cuando el templo está
	 * abierto: el cajón con su aire —«--rd-cajon-hueco»— más la franja
	 * del panel de cuidados.
	 *
	 * De aquí cuelgan las tres cosas del templo que tienen que caber a
	 * la izquierda de los botones: Reddie meditando, la cuenta atrás y
	 * el bocadillo. Antes cada una descontaba lo suyo por su cuenta —el
	 * bocadillo el cajón, la cuenta atrás el panel— y de ahí salían los
	 * solapes: la cuenta atrás no sabía del cajón y Reddie no sabía del
	 * panel.
	 *
	 * El repuesto es el mismo que usa el panel: con el cajón cerrado
	 * vale un espacio en negativo, que es el relleno que la escena pone
	 * a los lados y que la habitación se come para llegar al borde.
	 */
	--rd-casa-templo-hueco: calc(
		var(--rd-cajon-hueco, calc(-1 * var(--rd-space-4))) + var(--rd-casa-panel-hueco)
	);
}

/* --- El bocadillo ---

   En el ordenador, los textos cortos van encima de la cabeza y los
   largos a la derecha. El motivo es el ancho: encima de Reddie solo
   caben unas pocas palabras antes de que el bocadillo se parta en
   cinco renglones y tape media ilustración. A la derecha hay sitio de
   sobra, pero un bocadillo largo colocado encima quedaría enorme para
   decir tres palabras.

   El pico apunta siempre hacia Reddie: es lo que convierte un recuadro
   con texto en algo que alguien está diciendo. */
/* El bocadillo va SIEMPRE encima de la cabeza de Reddie.

   Antes los largos se iban a su derecha, y allí competían con el panel
   de botones: quedaban pegados a él y parecía que salían del panel y no
   de la boca de Reddie. Centrado y con el pico apuntando a Reddie se lee
   de una vez lo que es.

   Encima y no a los pies. Estuvo abajo por un motivo real —la
   habitación ocupa la pantalla entera, así que lo que se pone sobre
   Reddie cae dentro del techo del cuarto— y eso se resuelve de otra
   manera: el bocadillo es opaco y lleva sombra propia, así que se
   recorta contra el techo igual que se recortaba contra el suelo.
   Dónde cabe exactamente lo decide la colocación de más abajo. */
.rd-casa__bocadillo {
	position: relative;

	/* Nunca más ancho que el hueco que tiene. El tope en píxeles es
	   para que una frase corta no se estire de lado a lado; el 100% es
	   lo que impide que se salga cuando la ventana es estrecha. */
	max-width: min(420px, 100%);
	margin: var(--rd-space-3) auto 0;
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface);
	border: 2px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-lg);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink);
	text-align: center;

	/* La sombra, que es lo que lo despega del techo.

	   Debajo del bocadillo puede haber cualquiera de los papeles de la
	   tienda, y algunos son casi del mismo color que el borde: sobre el
	   gotelé crema, la línea del contorno se pierde. La sombra no
	   depende del papel, así que el recorte se lee siempre.

	   Va en «filter» y no en «box-shadow» porque el pico es un
	   pseudoelemento girado que sobresale de la caja: «box-shadow»
	   dibujaría el contorno del rectángulo y dejaría el pico sin sombra,
	   y «drop-shadow» sigue la silueta de lo que se pinta, pico
	   incluido. */
	filter:
		drop-shadow(0 2px 3px rgba(40, 20, 10, .28))
		drop-shadow(0 6px 14px rgba(40, 20, 10, .22));

	/*
	 * Medido sobre los tres papeles que hay hoy, que son los tres
	 * claros: el borde del bocadillo contra el techo da 4,04, contra la
	 * pared 5,12, contra el suelo 3,78 y contra el cuadro blanco 5,65.
	 * El mínimo para un objeto gráfico son 3, así que hay holgura en los
	 * cuatro. Y el texto, tinta sobre la pastilla del bocadillo, da 14.
	 */

	/* Se puede tocar para apartarlo cuando ya lo has leído. */
	cursor: pointer;

	/* Empieza apagado y un pelín encogido. Lo enciende «is-diciendo»,
	   que es lo que pone el guion cuando Reddie habla.

	   El encogerse va en «transform» y el centrarlo sobre Reddie en
	   «translate», que son dos propiedades distintas y se suman: así
	   colocarlo no se lleva por delante la animación de entrada. */
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 220ms ease, transform 220ms ease;
}

/* Reddie está diciendo algo.

   El bocadillo no se limita a encenderse: entra creciendo un poco,
   como los de Animal Crossing. Es lo que hace que parezca que alguien
   acaba de hablar y no que ha aparecido un recuadro de aviso. */
.rd-casa__bocadillo.is-diciendo {
	opacity: 1;
	transform: scale(1);
}

/* --- El texto, escribiéndose ---

   Cada letra va en su envoltura y se encienden por orden, de izquierda a
   derecha. Están TODAS puestas desde el principio, apagadas: así la caja
   tiene su tamaño final antes de empezar y no da saltos mientras se
   escribe.

   Los espacios hay que conservarlos a mano, porque una envoltura con un
   espacio dentro se colapsa y las palabras se pegarían. */
.rd-casa__bocadillo {
	white-space: pre-wrap;
}

.rd-letra {
	opacity: 0;
	transition: opacity 90ms linear;
}

.rd-letra.is-escrita {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* Sin escritura: la frase entera de una vez. Lo que dice Reddie no
	   cambia, solo el gesto de decirlo. */
	.rd-letra {
		opacity: 1;
		transition: none;
	}
}

/* Quien haya pedido menos movimiento en su sistema lo recibe quieto:
   aparece y desaparece sin crecer ni encogerse. El desvanecido se
   queda porque un corte seco de texto se lee como un fallo. */
@media (prefers-reduced-motion: reduce) {
	.rd-casa__bocadillo {
		transform: none;
		transition: opacity 220ms ease;
	}

	.rd-casa__bocadillo.is-diciendo {
		transform: none;
	}
}

/* Y si algún día hay un papel oscuro, la sombra al revés.

   Con el tema de noche el bocadillo es azul marino y algo
   transparente, así que sobre una pared oscura el contorno se perdería:
   la sombra negra no separa nada de un fondo negro. El resplandor claro
   sí, igual que el halo que ya llevan las letras de los botones de
   cuidar, y por el mismo motivo.

   Hoy no se ve: los tres papeles de la tienda son claros —179, 197 y
   232 de claridad, y el corte está en 150—, así que la escena nunca
   lleva «es-pared-oscura». Se deja escrito para que el día que entre un
   papel oscuro no haya que volver a descubrir esto. */
.rd-casa__escena.es-pared-oscura .rd-casa__bocadillo {
	filter:
		drop-shadow(0 0 2px rgba(255, 246, 239, .8))
		drop-shadow(0 3px 10px rgba(0, 0, 0, .35));
}

/* El pico, hacia abajo: el bocadillo está encima y apunta a Reddie.

   Se giran los bordes igual que el cuadro: los que se ven son los dos
   que quedan fuera de la caja, y con el pico abajo son el de abajo y el
   derecho. Con los de antes el pico salía sin línea y parecía un
   pegote. */
.rd-casa__bocadillo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 16px;
	height: 16px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--rd-surface);
	border-right: 2px solid var(--rd-border-strong);
	border-bottom: 2px solid var(--rd-border-strong);
}


/* --- El panel de cuidados, en el borde derecho --- */

/* Los cinco botones van juntos en una sola tarjeta, no sueltos. Es lo
   que los convierte en «las cosas de Reddie» y no en cinco iconos que
   flotan al lado. */
/* Sin tarjeta: cada botón va suelto.

   Los cinco iban dentro de un recuadro blanco con su borde y su sombra,
   y ese recuadro los convertía en «la barra de herramientas de la web».
   Ahora el panel vive DENTRO de la habitación, pegado a su borde
   derecho, y una tarjeta ahí dentro se ve como un cartel pegado en la
   pared. Cada botón tiene su propio círculo, que ya basta para saber
   que se puede pulsar. */
.rd-casa__panel {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);
	flex-shrink: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.rd-casa__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 68px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-decoration: none;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-xs);
}

.rd-casa__btn-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Cuarenta y ocho píxeles: por encima del mínimo para el dedo, que
	   son cuarenta y cuatro. Estos cuatro botones son lo único que se
	   pulsa en esta pantalla, así que se ganan el tamaño. */
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	transition: background var(--rd-transition), border-color var(--rd-transition);
}

.rd-casa__btn .rd-icon {
	width: 24px;
	height: 24px;
}

.rd-casa__btn:hover .rd-casa__btn-icono,
.rd-casa__btn:focus-visible .rd-casa__btn-icono {
	background: var(--rd-badge-bg);
	border-color: var(--rd-primary);
}

/* --- Reddie --- */
/* La columna del centro no puede quedarse sin ancho: si el dibujo
   fallara al cargar, la rejilla la encogería a cero y arrastraría al
   resto de la pantalla. */
/* Reddie, centrado. Y se aparta cuando hace falta.
 *
 * Al abrir un cajón, Reddie y sus barras se deslizan a la izquierda
 * para dejarle sitio, y vuelven al centro al cerrarlo. Se mueve con
 * «transform», que no toca el reparto de la pantalla: nada de lo que
 * hay alrededor se recoloca, solo se desplaza el dibujo.
 *
 * Y se ve el movimiento a propósito. Si Reddie apareciera de golpe en
 * otro sitio habría que buscarlo con la vista; viéndolo apartarse, se
 * entiende que ha hecho hueco y la mirada lo sigue sola. */
.rd-casa__centro {
	grid-column: 2;

	/* Centrado dentro de su columna.
	   Hace falta desde que el centro se estrecha al abrir el cajón: sin
	   esto el grid lo estira de lado a lado y, al limitarle el ancho, se
	   quedaba pegado al borde izquierdo y Reddie se salía de pantalla. */
	justify-self: center;
	min-width: 220px;
	transition: transform 320ms cubic-bezier(.3, .7, .4, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.rd-casa__saludo {
	margin: 0 0 var(--rd-space-3);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-xl);
	color: var(--rd-ink);
}

/* El alto manda sobre el ancho: Reddie tiene que caber entero sin
   bajar, y lo que limita en un móvil es el alto, no el ancho. */
/* Reddie, con un alto medido en píxeles.
 *
 * Ya lo intenté con porcentajes y con topes, y las dos veces se quedó
 * en nada: dependían del alto del contenedor, y ese alto lo decide la
 * rejilla después de colocar a los hijos. Una medida que depende de
 * algo que aún no existe se resuelve como cero.
 *
 * «clamp» da un alto de verdad desde el primer momento: 55 partes de
 * cien de la ventana, nunca menos de 280 píxeles ni más de 620. No
 * depende de nadie, así que no puede desaparecer.
 */
/* --- Reddie manchada ---

   Las manchas van en una capa encima del dibujo, no dentro de él, para
   poder aparecer y desvanecerse sin tocar la ilustración.

   Lo que las mantiene dentro del cuerpo es la máscara: se recorta la
   capa con la silueta del propio dibujo de Reddie, que llega como
   variable desde la plantilla. Sin eso, las manchas serían un rectángulo
   flotando por encima y se saldrían por los lados.

   Son manchitas irregulares de marrón terroso, como las del Pou: varios
   círculos difuminados de distintos tamaños, repartidos sin simetría
   para que no se lea el patrón. */
.rd-casa__reddie-caja {
	position: relative;
	display: inline-block;
	line-height: 0;

	/* El alto de Reddie. Ver el porqué de la variable más abajo, en
	   «.rd-casa__reddie». */
	--rd-reddie-alto: clamp(240px, 46vh, 520px);
}

.rd-casa__manchas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 700ms ease;

	-webkit-mask-image: var(--rd-silueta);
	mask-image: var(--rd-silueta);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	/*
	 * Las manchas van en porcentajes, no en píxeles.
	 *
	 * Reddie mide distinto en el ordenador y en el móvil, y con medidas
	 * fijas las manchas salían como pecas en una pantalla y como
	 * lamparones en la otra. En porcentaje crecen con ella.
	 *
	 * Están agrupadas de tres en tres, con una grande y dos pequeñas al
	 * lado, porque la suciedad de verdad no cae repartida: cae a
	 * salpicones. Un patrón regular se lee como un lunar de diseño.
	 */
	background-image:
		/* Salpicón del costado izquierdo. */
		radial-gradient(circle at 24% 58%, rgba(66, 45, 26, .88) 0 4.4%, transparent 5%),
		radial-gradient(circle at 30% 65%, rgba(66, 45, 26, .80) 0 2.8%, transparent 3.4%),
		radial-gradient(circle at 18% 67%, rgba(66, 45, 26, .74) 0 2.2%, transparent 2.8%),

		/* Salpicón del costado derecho. */
		radial-gradient(circle at 74% 55%, rgba(66, 45, 26, .86) 0 4.8%, transparent 5.4%),
		radial-gradient(circle at 80% 63%, rgba(66, 45, 26, .78) 0 2.6%, transparent 3.2%),
		radial-gradient(circle at 68% 64%, rgba(66, 45, 26, .72) 0 2%, transparent 2.6%),

		/* La barriga, que es lo primero que se mira. */
		radial-gradient(circle at 47% 72%, rgba(66, 45, 26, .88) 0 5.2%, transparent 5.8%),
		radial-gradient(circle at 55% 80%, rgba(66, 45, 26, .78) 0 3%, transparent 3.6%),
		radial-gradient(circle at 40% 81%, rgba(66, 45, 26, .74) 0 2.4%, transparent 3%),

		/* Un par arriba, para que no parezca que se ha sentado en barro. */
		radial-gradient(circle at 36% 43%, rgba(66, 45, 26, .76) 0 3.2%, transparent 3.8%),
		radial-gradient(circle at 64% 40%, rgba(66, 45, 26, .70) 0 2.6%, transparent 3.2%),

		/* Y las patas. */
		radial-gradient(circle at 31% 90%, rgba(66, 45, 26, .72) 0 2.8%, transparent 3.4%),
		radial-gradient(circle at 68% 91%, rgba(66, 45, 26, .70) 0 2.4%, transparent 3%);
	background-repeat: no-repeat;
}

.rd-casa__reddie-caja.es-sucia .rd-casa__manchas {
	opacity: 1;
}

/* Mientras se frota, las manchas se van yendo al ritmo del guion, que
   escribe la opacidad a mano. Se le quita la transición para que siga al
   jabón sin retraso. */
.rd-casa__reddie-caja.se-esta-lavando .rd-casa__manchas {
	transition: none;
}

/* Y un brillo cuando queda limpia del todo. */
@keyframes rd-recien-lavada {
	0%   { filter: brightness(1); }
	35%  { filter: brightness(1.3) saturate(1.08); }
	100% { filter: brightness(1); }
}

.rd-casa__reddie-caja.recien-lavada .rd-casa__reddie {
	animation: rd-recien-lavada 900ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.rd-casa__reddie-caja.recien-lavada .rd-casa__reddie {
		animation: none;
	}
}

.rd-casa__reddie {
	display: block;

	/* El alto va en una variable y no escrito a pelo.
	
	   Es que el visor de tres dimensiones necesita ANCHO Y ALTO, los dos
	   escritos. Se le dio solo el alto y una proporción, y en el móvil de
	   verdad el ancho le salía cero: el visor se cierra sobre sí mismo
	   —«contain: strict»— y ahí una proporción no tiene contra qué
	   resolverse. En el ordenador funcionaba y en el teléfono Reddie no
	   aparecía.
	
	   Con la altura en una variable, el ancho se saca de ella con una
	   multiplicación y los dos van siempre a juego, cambie donde cambie.
	
	   Un poco más pequeña que antes —era 55vh— para que el bocadillo
	   quepa encima sin empujarla fuera de la pantalla. Reddie sigue
	   siendo lo más grande de Casa, que es lo que tiene que ser.

	   La medida se declara en la caja, no aquí: las manchas y la diana
	   del arrastre también la necesitan y no son «rd-casa__reddie», así
	   que tiene que estar en un sitio del que hereden todos. */
	height: var(--rd-reddie-alto);
	width: auto;

	/* Se encoge antes de desbordar: en ventanas bajas y estrechas manda
	   el ancho disponible, no el alto que le tocaría. */
	max-width: 100%;
	object-fit: contain;
}


/* --- Los cuidados del día ---

   Aquí había dos barras, hambre y limpieza, que se llenaban solas con el
   tiempo y se pintaban de rojo al descuidarlas. Se quitaron: una barra
   que empeora mientras no estás es un reproche con forma de dato, y esta
   aplicación dice justo lo contrario.

   Lo que queda son dos filas de tres puntos —las comidas y los aseos que
   te quedan hoy— que se apagan al usarlos y vuelven mañana. Nada se
   pone rojo y nada empeora solo. */
/* Las dos filas, en rejilla y no en lista.

   Cada fila iba por su cuenta con los puntos empujados al extremo
   derecho, y con títulos de distinto largo los puntos quedaban sueltos
   en mitad de la nada: lejos de lo que cuentan y sin una línea común.

   En rejilla de dos columnas los puntos de las dos filas caen en la
   misma vertical —la del título más largo— y a un palmo del texto. Se
   lee «esto, y van dos de tres» de un golpe.

   El «display: contents» de cada fila es lo que hace que sus dos trozos
   entren en la rejilla de la madre en vez de formar una rejilla propia.
   La fila sigue en la página, así que sus datos y el guion que los lee
   funcionan igual. */
/* --- La cuenta del día, dentro de su cajón ---

   Una sola fila: a la izquierda lo que se cuenta, a la derecha los tres
   puntos, y una raya debajo que la separa del catálogo. Va encima de la
   rejilla de comidas o de jabones, que es lo que se ha venido a ver.

   Estuvo a los pies de Reddie, las dos cuentas juntas en un panel. Ahí
   se veían siempre, también cuando no hacían falta, y le quitaban a
   Reddie el sitio donde ahora habla. */
.rd-casa__cuenta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	margin: 0 0 var(--rd-space-3);
	padding: 0 var(--rd-space-1) var(--rd-space-3);
	border-bottom: 1px solid var(--rd-border);
}

/* El título dice qué se cuenta. Cuánto queda lo dicen los puntos. */
.rd-casa__gesto-titulo {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
}

.rd-casa__veces {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

/* Un punto por cada vez del día.

   HUECO = te queda por hacer. RELLENO = ya lo has hecho.

   Iba al revés —relleno lo disponible, hueco lo gastado— y se leía como
   una cuenta atrás de algo que se acaba. Así, en cambio, se va llenando
   según cuidas: lo que se ve crecer es lo hecho, no lo que falta. */
.rd-casa__vez {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--rd-border);
	transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.rd-casa__vez.is-hecha {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
}

/* El que acaba de marcarse da un pellizco, para que se vea cuál era. */
@keyframes rd-punto-gasta {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

.rd-casa__vez.acaba-de-gastarse {
	animation: rd-punto-gasta 500ms ease;
}

/* El botón de asear. Discreto: es un gesto pequeño, no la acción
   principal de la pantalla. */
.rd-casa__asear {
	padding: 4px 14px;
	border: 2px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface);
	color: var(--rd-ink);
	font-family: inherit;
	font-size: var(--rd-size-xs);
	font-weight: 600;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms ease;
}

.rd-casa__asear:hover {
	background: var(--rd-surface-alt);
}

.rd-casa__asear:active {
	transform: scale(0.96);
}

/* El brillo de Reddie recién aseada. Un destello que la recorre: asear
   no tiene gesto propio como arrastrar la comida, así que sin esto
   pulsar el botón no se vería en ella. */
@keyframes rd-aseo {
	0%   { filter: brightness(1); }
	35%  { filter: brightness(1.25) saturate(1.1); }
	100% { filter: brightness(1); }
}

.rd-casa__reddie.aseandose {
	animation: rd-aseo 900ms ease;
}

/* Los alimentos que aún no tienen dibujo: un hueco con su inicial. Es
   mejor que una imagen rota, que se lee como una avería en vez de como
   algo que está por llegar. */
/* --- Los alimentos que aún no se han abierto ---

   Se enseñan igual que los demás pero apagados, con su nivel escrito
   encima. Es lo que convierte la despensa en algo que va creciendo: con
   solo los abiertos, alguien de nivel 2 veía un dibujo suelto y parecía
   una pantalla a medio hacer. */
.rd-casa__cosa.es-cerrado {
	position: relative;
	cursor: default;
}

/* Apagados, pero reconocibles.

   Estaban al 32 % y en gris del todo, y a esa cantidad ya no se ve qué
   hay debajo: la pastilla cohete y la de Reddie quedaban en dos
   siluetas blancuzcas iguales entre sí. Y eso se lleva por delante lo
   único que hacen ahí, que es dar ganas de llegar al nivel que hace
   falta. Un dibujo que no se distingue no es una promesa de nada.

   Con algo de color y bastante opacidad se ve que uno es un cohete
   amarillo y el otro una cara de Reddie, y se siguen leyendo como
   cerrados: al lado de uno abierto la diferencia canta, y además cada
   uno lleva su etiqueta con el nivel encima. */
.rd-casa__cosa.es-cerrado img,
.rd-casa__cosa.es-cerrado .rd-casa__cosa-hueco {
	opacity: .72;
	filter: grayscale(.35);
}

/* El nivel, en una etiqueta sobre el dibujo. Va encima y no debajo para
   no hacer más alta la casilla: la rejilla tiene que seguir cuadrando
   con los alimentos abiertos. */
/* La etiqueta de «aún no disponible».

   Antes ponía «Nv 23» y cabía en una pastilla diminuta. Ahora dice la
   frase entera, así que ocupa el ancho de la casilla y se parte en los
   renglones que haga falta. Va sobre una franja para que se lea encima
   del dibujo apagado. */
/* --- El nombre al pasar por encima ---

   Un solo rótulo para toda la página, que el guion mueve a donde toque
   (ver rotulo.js). Aquí solo está su aspecto: dónde se coloca depende de
   lo que mida el nombre y del sitio que quede, y eso hay que medirlo. */
.rd-rotulo {
	position: fixed;
	z-index: 60;

	/* El ancho lo pone el guion: es el del recuadro sobre el que está,
	   para que el nombre no se salga ni pise a la casilla vecina. */
	max-width: min(240px, calc(100vw - 24px));
	padding: 5px 10px;
	border-radius: var(--rd-radius-md);

	background: var(--rd-ink);
	color: var(--rd-surface);

	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;

	opacity: 0;
	pointer-events: none;
	transform: translateY(3px);
	transition: opacity .12s ease, transform .12s ease;
}

.rd-rotulo.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.rd-rotulo {
		transition: opacity .12s ease;
		transform: none;
	}

	.rd-rotulo.is-visible {
		transform: none;
	}
}

/* El candado y el nivel, en una pastilla pequeña abajo.

   Llegó a decir «Disponible a partir del nivel 23» a todo lo ancho y
   tapaba el dibujo entero. El candado dice lo mismo sin palabras. */
.rd-casa__cosa-nivel {
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-ink-soft);
	color: var(--rd-surface);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
}

.rd-casa__candado {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
}

.rd-casa__cosa-hueco {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface-alt);
	font-family: var(--rd-font-display);
	font-size: 1.4rem;
	color: var(--rd-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
	.rd-casa__vez.acaba-de-gastarse,
	.rd-casa__reddie.aseandose {
		animation: none;
	}
}


/* ==========================================================
   El cajón
   ==========================================================
   Se abre a la izquierda del panel y mide lo mismo que él. Uno solo con
   cuatro contenidos dentro: así solo puede haber uno abierto y no hay
   que cerrar nada al abrir otro.
   ========================================================== */

/*
 * El cajón flota, no ocupa sitio.
 *
 * Estaba como una columna más de la rejilla, y al abrirse empujaba a
 * Reddie y a las barras a otro lado: cada vez que mirabas una
 * notificación, la pantalla entera se recolocaba. Eso marea y hace que
 * se pierda de vista lo que estabas mirando.
 *
 * Sacado del flujo, se despliega encima y a la izquierda del panel, y
 * nada de lo que hay debajo se entera. El alto va de arriba abajo de la
 * escena, que es lo que le da la misma altura que el panel.
 */
/*
 * El cajón: escondido por defecto, se enseña con una clase.
 *
 * Estaba escondido con el atributo «hidden», y con el tema oscuro se
 * colaba una línea vertical justo donde va: su borde de un píxel. Le
 * puse el borde a cero para el estado cerrado y siguió apareciendo, así
 * que el problema no era el borde sino que el elemento seguía ocupando
 * un sitio.
 *
 * Escondiéndolo desde el principio con «display: none» y enseñándolo
 * solo cuando lleva la clase, no hay estado intermedio en el que pueda
 * pintarse nada. Es una manera menos elegante y una que no falla.
 */
.rd-casa__cajon {
	display: none;
	position: absolute;
	/* Con un respiro arriba y abajo.

	   Pegado a cero, el borde superior del cajón quedaba a ras de la
	   barra de navegación y las dos líneas se tocaban: parecía que el
	   cajón colgaba de la barra en vez de estar dentro de la pantalla. */
	top: var(--rd-space-4);
	bottom: var(--rd-space-4);
	/* Con el mismo dedo de aire por los cuatro lados.

	   Estuvo en cero, pegado al borde de la pantalla, y se veía: la
	   tarjeta llegaba al filo y parecía cortada por el monitor en vez de
	   abierta al lado de la habitación. Arriba y abajo ya tenía su aire
	   desde el principio; el de la derecha faltaba.

	   Lo que reserva la habitación por su lado —«--rd-cajon-hueco»—
	   cuenta ya con este hueco, así que las dos cosas no se pisan. */
	right: var(--rd-space-4);
	z-index: 20;
	flex-direction: column;
	width: min(420px, 38vw);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
	overflow: hidden;
}

/* Cerrado no se ve, y se dice de tres formas.
 *
 * Con el tema Calma se colaba una línea vertical justo donde va el
 * cajón: el borde de un píxel del elemento cerrado, que en un fondo
 * oscuro destaca lo suficiente para verse aunque el resto no.
 *
 * «display: none» debería bastar y aquí se le añaden el borde y la
 * sombra a cero. No es redundancia por gusto: si algún día alguien le
 * pone otro «display» a este elemento sin pensar en el estado cerrado,
 * la línea volvería y costaría lo mismo encontrarla que ha costado
 * ahora. */
.rd-casa__cajon.is-abierto {
	display: flex;
}

.rd-casa__cajon-cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3) var(--rd-space-4);
	border-bottom: 1px solid var(--rd-border);
}

.rd-casa__cajon-titulo {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-casa__cerrar {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	font-size: 22px;
	line-height: 1;
	color: var(--rd-ink-soft);
	cursor: pointer;
}

.rd-casa__cerrar:hover {
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
}

/* El cuerpo se desplaza por dentro. El cajón mide lo que mide Reddie,
   así que lo que sobra se recorre aquí y no estirando la pantalla. */
.rd-casa__cajon-cuerpo {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--rd-space-4);
}

.rd-casa__hoja[hidden] {
	display: none;
}

/* La cuadrícula de productos, cuatro columnas. Cada casilla es
   cuadrada: son fotos de producto y todas tienen que ocupar lo mismo,
   o la rejilla deja de leerse como una rejilla. */
.rd-casa__rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	gap: var(--rd-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Casillas cuadradas SIN morderse la cola.

   Este fue el fallo de las filas montadas en el móvil, y costó tres
   intentos porque lo evidente no funciona.

   Poner «aspect-ratio» en la casilla no vale: dentro de una rejilla, su
   alto sale de su ancho, su ancho de la columna y la fila tendría que
   salir del alto. El navegador rompe el círculo calculando la fila con
   el mínimo —54 píxeles para casillas de 81— y las casillas desbordan
   sobre la fila de abajo. Moverlo al dibujo tampoco: la imagen tiene el
   mismo problema, porque su alto también depende de un ancho que aún no
   está resuelto cuando se mide la fila.

   Lo que sí funciona es un relleno del 100%. Un porcentaje de relleno
   vertical se mide SIEMPRE contra el ancho del contenedor, nunca contra
   su alto, así que no hay nada circular: la columna da el ancho, el
   relleno copia ese ancho como alto, y la fila lo respeta a la primera.
   Es el truco de siempre y sigue siendo el único que no falla aquí.

   El contenido va encima, colocado sobre ese cuadrado. */
.rd-casa__rejilla > li {
	position: relative;
	display: block;
	padding: 0;
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	cursor: pointer;
}

.rd-casa__rejilla > li::before {
	content: "";
	display: block;
	padding-bottom: 100%;
}

/* El contenido llena la casilla y respeta un margen por dentro.

   Iba con «inset: 6px» y medidas automáticas, y así una imagen NO se
   estira: al tener tamaño propio se queda con el suyo, anclada arriba a
   la izquierda, y se salía del recuadro. Se veía sobre todo en el jabón,
   que es un dibujo grande.

   Con el tamaño al 100% y el margen puesto como relleno por dentro, el
   dibujo se ajusta al hueco y queda centrado sin salirse. */
.rd-casa__rejilla > li > img,
.rd-casa__rejilla > li > .rd-casa__cosa-hueco {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8px;
	object-fit: contain;
}

.rd-casa__vacio {
	margin: 0;
	padding: var(--rd-space-5) var(--rd-space-2);
	text-align: center;
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-muted);
}

/* La rejilla vacía no ocupa: si no, deja un hueco encima del texto. */
.rd-casa__rejilla:empty {
	display: none;
}

/* AQUÍ EL PANEL ERA LA TERCERA COLUMNA de la rejilla de la escena.
   Ya no: va colocado a mano sobre el borde derecho del cuarto, más
   abajo en este mismo archivo. Se deja dicho porque quien busque por
   qué el panel está donde está va a mirar primero aquí. */


/* AQUÍ SE APARTABA REDDIE AL ABRIR UN CAJÓN, deslizándose a la
   izquierda con un «translateX» y encogiendo su columna.

   Ya no hace falta y por eso se ha ido: la habitación ocupa la escena
   entera y lo que hace hueco al cajón es que el cuarto se recoge por la
   derecha —«--rd-cajon-hueco»—, no que Reddie se mueva. Con las dos
   cosas a la vez, Reddie se iba al borde izquierdo de la pantalla.

   Se deja escrito porque la regla estuvo aquí mucho tiempo y su
   ausencia no se explica sola. */

@media (prefers-reduced-motion: reduce) {
	/* Sin animación, pero el hueco se hace igual: quien pide menos
	   movimiento no está pidiendo que el cajón le tape a Reddie. */
	.rd-casa__centro {
		transition: none;
	}
}


/* ==========================================================
   Los avisos dentro del cajón
   ==========================================================
   El cajón es más estrecho que la pantalla de notificaciones, así que
   las filas se aprietan: tres líneas fijas —titular, explicación y
   cuándo— y el botón a la derecha ocupando el alto de las tres.
   ========================================================== */

.rd-casa__hoja .rd-aviso {
	display: grid;
	/* Dibujo, texto y botón. Tres columnas fijas: en una rejilla no
	   existe un cuarto sitio adonde bajar nada, así que la fila no se
	   parte por larga que sea. */
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3);
	margin-bottom: var(--rd-space-2);
}

/* El dibujo, a la altura de la primera línea del titular. Con
   «align-items: start» arriba, esto lo baja lo justo para que su centro
   coincida con el de esa línea en vez de con el borde de la tarjeta. */
.rd-casa__hoja .rd-aviso__marca {
	width: 38px;
	height: 38px;
	margin-top: 1px;
}

.rd-casa__hoja .rd-aviso__marca .rd-icon {
	width: 20px;
	height: 20px;
}

/* Tres líneas exactas, ninguna se parte. Lo que no cabe se recorta con
   puntos suspensivos: que todas las filas midan lo mismo es lo que
   convierte la lista en algo que se recorre de un vistazo. */
.rd-casa__hoja .rd-aviso__texto {
	min-width: 0;
}

/* El titular se lee entero, aunque ocupe dos renglones.
 *
 * Estaba recortado con puntos suspensivos para que todas las filas
 * midieran lo mismo, y en un cajón estrecho eso dejaba titulares como
 * «Has conseguido una estrella en el l…»: un aviso que no se puede leer
 * no sirve de nada, por muy alineado que esté.
 *
 * Los otros dos sí se recortan: la explicación y la hora se entienden
 * cortadas, un titular no. */
.rd-casa__hoja .rd-aviso__texto small,
.rd-casa__hoja .rd-aviso__cuando {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-casa__hoja .rd-aviso__texto strong {
	display: block;
	font-size: var(--rd-size-sm);
	line-height: 1.35;
}

.rd-casa__hoja .rd-aviso__texto small {
	font-size: var(--rd-size-xs);
	line-height: 1.4;
	color: var(--rd-ink-soft);
}

.rd-casa__hoja .rd-aviso__cuando {
	margin-top: 0;
	line-height: 1.4;
}

/* El botón, del alto de las tres líneas y estrecho. Ocupaba una fila
   entera para decir tres palabras. */
.rd-casa__hoja .rd-aviso .rd-button {
	align-self: stretch;
	display: flex;
	align-items: center;
	min-height: 0;
	padding: 0 var(--rd-space-3);
	font-size: var(--rd-size-xs);
	white-space: nowrap;
}

/* Y el cajón, más alto: hasta media pantalla larga. Antes se quedaba
   corto y la lista se recorría de tres en tres. */
@media (min-width: 900px) {
	/* El cajón, separado de la barra de arriba y del final.

	   Estuvo pegado a cero por arriba, y era demasiado: su borde
	   superior quedaba a ras del borde de la barra de navegación, las
	   dos líneas se tocaban y el cajón parecía colgar del menú en vez
	   de estar dentro de la pantalla. Con un dedo de aire se lee como
	   lo que es, una tarjeta que se abre al lado de la habitación.

	   Y por abajo tampoco se sale ya de la pantalla: los «-2vh» de antes
	   lo alargaban por debajo del borde y la última fila de la rejilla
	   se cortaba a media altura. */
	.rd-casa__cajon {
		top: var(--rd-space-4);
		bottom: var(--rd-space-4);
		right: var(--rd-space-4);
		width: min(500px, 42vw);
	}
}

/* --- Lo que hay en la despensa y el armario ---

   Cada cosa en su casilla cuadrada, con el dibujo dentro y una chapa
   con cuántas quedan. La casilla es cuadrada para que la rejilla se lea
   como rejilla: si cada una midiera lo suyo, dejaría de serlo. */
.rd-casa__cosa {
	position: relative;
}

/* El dibujo es quien manda en la altura de la casilla.

   ASÍ SE ARREGLARON LAS FILAS MONTADAS del móvil, y el porqué no es
   evidente. El dibujo pedía «height: 100%» de una casilla que no tenía
   altura propia, así que se quedaba con su tamaño natural y se salía
   sobre la fila de abajo.

   Lo primero que probé fue poner la proporción en la casilla, y eso lo
   empeoraba: una casilla con proporción dentro de una rejilla se muerde
   la cola —el alto sale del ancho, el ancho de la fila y la fila del
   alto— y el navegador resuelve la fila con el mínimo, 54 píxeles para
   casillas de 85. Se salían igual.

   Puesta en el dibujo no hay pescadilla: el ancho lo da la columna, el
   alto sale del ancho, y la casilla y la fila crecen detrás. */
.rd-casa__cosa img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

/* La rejilla del cajón, a tres columnas: a cuatro, cada dibujo se queda
   en un sello y deja de reconocerse qué es. */
.rd-casa__rejilla {
	grid-template-columns: repeat(3, 1fr);
}

/* Con tres columnas, los extremos son otros. */
.rd-casa__rejilla > li:nth-child(3n + 1)[data-rd-nombre]::after {
	left: 0;
	right: auto;
}

.rd-casa__rejilla > li:nth-child(3n)[data-rd-nombre]::after {
	left: auto;
	right: 0;
	gap: var(--rd-space-3);
}

/* --- El oráculo dentro de Casa --- */

/* El punto que avisa de que hay uno esperando. Va sobre el icono, no
   como un número: no hay varios oráculos, hay uno o ninguno. */
.rd-casa__btn {
	position: relative;
}

.rd-casa__punto {
	position: absolute;
	top: 2px;
	right: 8px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--rd-primary);
	border: 2px solid var(--rd-surface);
}

.rd-casa__abrir {
	margin: 0 0 var(--rd-space-4);
	text-align: center;
}

/* Cada consejo anterior, con su fecha encima. El texto va en cursiva
   para que se lea como algo dicho y no como una ficha de datos.

   Ya no van dentro de una lista: en el libro se ve UNO cada vez, y una
   lista de la que solo se enseña un elemento no es una lista. Son
   «article» sueltos y el guion enseña el que toca. */
.rd-casa__oraculo {
	margin: 0;
}

.rd-casa__oraculo-dia {
	display: block;
	margin-bottom: 4px;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

.rd-casa__oraculo p {
	margin: 0;
	font-size: var(--rd-size-sm);
	font-style: italic;
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink);

	/* JUSTIFICADO Y SIN PARTIR PALABRAS.

	   Justificado, como en un libro: el bloque queda con los dos cantos
	   rectos y se lee como algo escrito a propósito en esa hoja.

	   Y SIN GUIONES, que es lo que pidió Alba después: una palabra que
	   no cabe se va entera al renglón siguiente. Es lo contrario de lo
	   que estaba puesto, y el motivo de que estuviera era bueno —sin
	   partir, un renglón con una palabra larga abre huecos entre las
	   demás— así que a cambio se han ensanchado los márgenes y se ha
	   dejado la línea más corta, que es lo que de verdad evita los
	   huecos.

	   «text-wrap: pretty» ayuda con lo que queda: el navegador mira el
	   párrafo entero en vez de renglón a renglón y reparte mejor. Donde
	   no exista, no pasa nada: se ignora. */
	text-align: justify;
	hyphens: none;
	-webkit-hyphens: none;
	text-wrap: pretty;

	/* PERO SI UNA PALABRA NO CABE DE NINGUNA MANERA, SE PARTE.

	   Alba, 10-09-2026: «el texto de los reddieconsejos guardados no
	   sigue el margen del libro».

	   Y tenía razón. «hyphens: none» dice «no partas palabras», y sin
	   nada más el navegador se lo toma al pie de la letra: una palabra
	   más ancha que la hoja se sale por el canto derecho y se come el
	   margen. En una caja normal se vería fea; dentro de un cuaderno
	   dibujado, con su tapa y sus anillas, se lee como que la página
	   está rota.

	   Y pasa de verdad, no es un caso de laboratorio: el consejo CITA lo
	   que ha escrito la persona, y alguien escribió
	   «mañana es el díaaaaaaaaaaaaaaaaaaaa...». Eso es una sola palabra
	   para el navegador.

	   «break-word» NO deshace lo de arriba: solo actúa cuando la palabra
	   no cabe ni en un renglón entero para ella sola. Las palabras
	   normales siguen yéndose enteras al renglón siguiente, que es lo
	   que se pidió. */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* El cambio de una cara a otra, suave. Un corte seco se lee como un
   error de carga; medio segundo se lee como que Reddie se prepara. */
.rd-casa__reddie {
	transition: opacity 240ms ease;
}

/* ==========================================================
   Reddie en la habitación
   ==========================================================
   Cuál de las dos Reddies se ve —el modelo o el dibujo plano de
   respaldo— y cómo se coloca cada una.
   ========================================================== */

/* --- Cuál de las dos Reddies se ve ---

   Ya no hay dos: solo la habitación con la Reddie de tres dimensiones.
   La que meditaba —un dibujo plano que la sustituía mientras el oráculo
   estaba abierto— se ha ido de esta pantalla con el oráculo, y con ella
   las tres reglas que decidían cuál se veía. Sigue existiendo en la
   pantalla del templo, «/reddie/», que tiene su propia hoja.

   Lo que queda aquí abajo es la Reddie PLANA de respaldo, que es otra
   cosa: la que sale si el modelo de tres dimensiones no llega a
   cargarse. Esa sí hace falta y no se toca. */

/* La Reddie plana de respaldo ocupa el mismo hueco que el modelo: al
   cambiar una por otra no se mueve nada de sitio. */
.rd-casa__reddie--plana {
	display: block;
	width: calc(var(--rd-reddie-alto) * 3 / 4);
	height: var(--rd-reddie-alto);
}

/* Y la de tres dimensiones, escondida cuando se le pide.

   PARECE QUE SOBRA Y NO SOBRA. «visor3d.js» saca la Reddie plana de
   respaldo si el modelo tarda más de ocho segundos, y esconde la de 3D
   poniéndole «hidden». Ese «hidden» no hacía nada: «model-viewer» es un
   elemento propio y se declara «display: block» a sí mismo desde dentro
   —con «:host»—, y eso le gana a la regla «[hidden]» del navegador.

   O sea que en una conexión mala, o en un teléfono viejo, salían LAS DOS
   REDDIES a la vez, la plana encima de la de 3D. Es exactamente la misma
   trampa que ya tenía la plana aquí debajo, y por eso lleva esta regla.

   Reproducido con el modelo tardando a propósito. */
.rd-casa__reddie--3d[hidden] {
	display: none;
}

.rd-casa__reddie--plana[hidden] {
	display: none;
}

.rd-casa__reddie-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* AQUÍ VIVÍA TODO EL «MODO ORÁCULO», Y SE HA IDO ENTERO.

   Eran unas cuantas reglas colgadas de «.rd-casa__escena.es-oraculo»:
   esconder la habitación y los marcadores de decorar, sacar en su lugar
   a la Reddie que meditaba, hacerla levitar con su sombra encogiendo al
   compás, quitarle las manchas y, cuando el mensaje estaba listo,
   posarla y abrirle los ojos.

   Ya no hay modo oráculo. El Reddie consejo se abre en un libro que se
   pone POR ENCIMA de la habitación —ver el bloque del libro, al final de
   esta hoja— así que la habitación no se esconde, no hay segunda Reddie
   que sacar y no hay nada que levitar. Nadie pone ya la clase
   «es-oraculo» en la escena: la quitó «casa.js» con el cajón.

   QUEDAN SUELTOS UNOS CUANTOS «:not(.es-oraculo)» repartidos por esta
   hoja —en los botones de cuidados, en el bocadillo, en la sombra de
   Reddie—. No se han tocado a propósito: como la clase no se pone
   nunca, esos «:not» se cumplen siempre y las reglas hacen exactamente
   lo mismo con ellos que sin ellos. Reescribir diez selectores que ya
   están medidos y que deciden el color de los botones sobre cada papel
   de pared es mover algo que funciona sin ganar nada.
*/

/* --- La cuenta atrás, que ya no está --- */
/* La explicación y el botón, debajo del reloj. */
.rd-casa__espera-hint {
	max-width: 420px;
	margin: var(--rd-space-3) auto 0;
	padding: var(--rd-space-2) var(--rd-space-3);
	background: var(--rd-surface);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

.rd-casa__espera-ir {
	margin: var(--rd-space-3) 0 0;
}

/* AQUÍ ESTABA EL RELOJ DE LA CUENTA ATRÁS y se ha ido con ella: tres
   cajas con horas, minutos y segundos, y encima la frase de «Tu próximo
   Reddie consejo estará disponible en». Un reloj corriendo convierte en
   tarea algo que llega solo una vez al día, y el Reddie consejo ahora se
   abre en un libro donde no hay nada que esperar.

   Lo que SÍ se queda, aquí arriba, son «.rd-casa__espera-hint» y
   «.rd-casa__espera-ir»: la explicación de en qué se basa el consejo y
   el botón al diario, que se han ido con él a la página izquierda del
   libro. Conservan el nombre de cuando vivían debajo del reloj porque
   renombrarlos no se vería en pantalla y sí obligaría a tocar cuatro
   hojas más.
*/
/* --- Los consejos guardados --- */
/* AQUÍ CADA UNO IBA SEPARADO DEL SIGUIENTE POR UNA RAMITA DE LAUREL,
   porque salían todos seguidos en una lista dentro del cajón.

   En el libro se ve UNO CADA VEZ, así que no hay nada que separar: una
   ramita encima del único consejo en pantalla no separa, adorna a
   destiempo. Y peor: los demás siguen en la página escondidos, y
   «hermano siguiente» en CSS cuenta también a los escondidos, así que la
   ramita saldría encima de todos menos del primero.

   La ramita no se pierde: es ahora el adorno de la página en blanco
   —ver «.rd-libro__vacio», al final de esta hoja— que es donde de verdad
   hacía falta algo dibujado. */
.rd-casa__oraculo {
	padding: 0;
	position: relative;
}

/* LA CABECERA DE UN CONSEJO GUARDADO: la fecha a la izquierda en dos
   renglones y «Eliminar» arriba a la derecha.

   «align-items: flex-start» y no «center»: con dos renglones a la
   izquierda y uno a la derecha, centrado dejaba «Eliminar» flotando a
   media altura, como si perteneciera al segundo renglón.

   Y EL MARGEN DE ABAJO ES GRANDE A PROPÓSITO. Eran cuatro píxeles, y con
   la fecha en un solo renglón colaba. Con dos, el texto del consejo
   arrancaba pegado al «hace tres semanas» y los tres renglones se leían
   como un bloque. Ahora hay un espacio que se ve, y encima una raya muy
   fina: la fecha es la cabecera de la página, no la primera línea del
   consejo. */
.rd-casa__oraculo-cab {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rd-space-3);
	margin-bottom: var(--rd-space-5);
	padding-bottom: var(--rd-space-3);
	border-bottom: 1px solid rgba(120, 80, 50, .14);
}

.rd-casa__oraculo-fecha,
.rd-casa__oraculo-hace {
	display: block;
}

/* El día, con su mayúscula. WordPress escribe los días en minúscula en
   español; se sube aquí y no en PHP para no partir los idiomas que
   empiezan por letra acentuada. */
.rd-casa__oraculo-fecha::first-letter {
	text-transform: uppercase;
}

/* El «hace tanto» va un punto más pequeño y más claro: es un apunte
   sobre la fecha, no otra fecha. */
.rd-casa__oraculo-hace {
	margin-top: 2px;
	font-size: 0.92em;
	opacity: .78;
}

/* «Eliminar» en gris y pequeño: tiene que estar, no llamar.

   Ya no es un desplegable con confirmación, sino un botón directo, así
   que las reglas apuntan al botón y no al «summary» de antes. */
.rd-casa__borrar {
	margin: 0;
}

.rd-casa__borrar button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

.rd-casa__borrar button:hover,
.rd-casa__borrar button:focus-visible {
	color: var(--rd-primary);
	text-decoration: underline;
}


/* --- El oráculo recién abierto, arriba del cajón ---

   Va destacado sobre lo demás porque es lo único que hay que hacer en
   ese momento: leerlo y decidir si se guarda.

   La caja de fuera no se pinta: el pergamino es el párrafo, y los dos
   botones van debajo, fuera del papel. */
.rd-casa__nuevo {
	position: relative;
	margin-bottom: var(--rd-space-4);
}

/* --- El consejo del día, escrito en la página del libro ---

   AQUÍ HABÍA UN PERGAMINO. Era un dibujo recortado en nueve trozos —dos
   rodillos de madera arriba y abajo, y el papel estirándose entre
   ellos— y funcionaba muy bien mientras el consejo se leía dentro de un
   cajón lateral, que no tenía forma de nada.

   Ahora se lee en la página izquierda de un libro, y un pergamino
   dentro de la página de un libro son dos papeles uno encima del otro:
   la vista no sabe cuál de los dos está mirando. Así que el texto se
   escribe directamente sobre la página, que ya es papel.

   LO QUE SÍ SE CONSERVA es que el texto se recorra por dentro, y hace
   falta por lo mismo de siempre: los hay de 658 caracteres, y sin eso el
   texto empuja «Guardar el consejo» y «No guardar» por debajo del borde
   de la página. Los botones no son un detalle, son lo único que hay que
   hacer ahí.

   PERO YA NO CON UN TOPE EN PÍXELES. Antes era un «clamp» con números de
   ventana —460 de techo, «100dvh menos 300»— que había que rehacer
   entero para el móvil porque allí el cajón medía otra cosa. Ahora el
   texto se estira a lo que sobre en su página y ya está: la cadena que
   lo consigue está explicada abajo, en «.rd-libro__papel
   .rd-casa__nuevo». Se apaña solo en cualquier pantalla y no hay ningún
   número que mantener.

   La barra de desplazamiento va fina y del color de la tinta: sobre el
   papel, la gris de serie canta mucho. Y hace falta que se vea, porque
   es la señal de que el mensaje sigue. */
.rd-casa__nuevo-txt {
	margin: 0 0 var(--rd-space-4);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(74, 51, 32, .38) transparent;

	font-size: var(--rd-size-sm);
	font-style: italic;
	line-height: 1.75;
	letter-spacing: .012em;
	color: var(--rd-ink);

	/* Igual que en los guardados: el consejo de hoy cita lo que ha
	   escrito la persona, así que puede traer la misma palabra
	   interminable y salirse por el mismo sitio. */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Guardar primero y a la izquierda: es lo que va a querer casi todo el
   mundo. «No guardar» está, pero no compite. */
.rd-casa__nuevo-botones {
	display: flex;
	gap: var(--rd-space-2);
	flex-wrap: wrap;
}

.rd-casa__nuevo-botones .rd-button {
	font-size: var(--rd-size-xs);
	padding: 8px var(--rd-space-4);
	min-height: 0;
}

/* AQUÍ SE AJUSTABA EL PERGAMINO EN EL MÓVIL: el cajón se hacía más alto
   cuando había consejo del día y los rodillos del dibujo pasaban a
   tamaño real. Las dos cosas se han ido con el pergamino y con el
   cajón. En el móvil el libro se apaña solo, enseñando una página cada
   vez —ver el bloque del libro, al final de esta hoja—. */

/* ==========================================================
   La franja de 768 a 899, que no era de nadie
   ==========================================================
   AQUÍ SE PERDÍAN LOS DOS BOTONES DEL ORÁCULO, y el motivo es que dos
   hojas cambian de idea en anchos distintos.

   La barra de secciones se va abajo del todo, fija sobre la pantalla,
   en cuanto la ventana baja de 900: lo dice app.css y nav.css afina lo
   suyo con el mismo corte. Pero la Casa solo se recoloca por debajo de
   768, que es donde empiezan sus reglas de móvil. Entre 768 y 899 la
   Casa se pinta como en el ordenador —el cajón flotando a la derecha,
   anclado arriba y abajo de la escena— mientras una barra de ochenta
   píxeles tapa el pie de la ventana. Nadie le había contado al cajón
   que esa barra existe.

   Con la ventana a 780 de alto o menos, el resultado era que «Guardar
   oráculo» y «No guardar» quedaban DEBAJO de la barra: no medio
   tapados, enteros. Medido con «elementFromPoint» sobre el centro de
   cada botón, lo que respondía era el enlace de la barra, así que no se
   podían pulsar. Y son lo único que hay que hacer en esa pantalla.

   El solape salía siempre el mismo —unos cuarenta píxeles— pareciera
   que se hiciera lo que se hiciera, y eso despista: no es que el papel
   no encoja, es que encoge exactamente al mismo ritmo que baja la
   barra. El tope del papel es «100dvh - 300», o sea que por cada píxel
   que pierde la ventana el papel pierde otro y los botones se quedan
   donde estaban respecto al pie. Restar mal y restar poco dan la misma
   pinta; lo que faltaba en esa cuenta era la barra.

   Se arregla con dos medidas, y las dos salen de la misma geometría.

   1) EL CAJÓN DEJA DE MEDIRSE CONTRA LA ESCENA Y SE MIDE CONTRA LA
      VENTANA. Esto es lo que de verdad faltaba, y no se ve mirando solo
      el oráculo. Con oráculo, la escena es más alta que la pantalla
      —Reddie meditando y el reloj de la cuenta atrás no caben en 780—,
      así que un cajón anclado a su borde de abajo terminaba 235 píxeles
      por debajo de la barra: lo último de la lista de oráculos
      guardados no se alcanzaba con el desplazamiento del propio cajón,
      había que mover además la página. Y sin oráculo pasaba lo mismo en
      pequeño: el cajón de la comida, el del armario, el del aseo y el
      de la campana metían 19 píxeles bajo la barra, justo su borde de
      abajo y su esquina redondeada, y parecían cortados con tijera.

      Los 246 que se restan a la ventana son: 150 desde arriba del todo
      hasta el borde superior del cajón —46 de la barra de
      administración de WordPress en ventanas estrechas, 88 de la barra
      de arriba y los 16 de aire del «top»—, 80 de la barra de abajo y
      16 más de aire, el mismo dedo que ya deja arriba. Se toma la barra
      de administración ancha a propósito: mide 46 por debajo de 783 y
      32 por encima, y quien no administra no la ve. Cogiendo la peor de
      las tres, en las otras dos sobra sitio, que es el error barato.

   2) EL PAPEL, CON SITIO PARA LO QUE VA DEBAJO. De lo que mide el cajón
      hay que descontar su cabecera (61), el relleno del cuerpo (32), el
      hueco bajo el papel (16), los botones (35) y un respiro de 24 para
      que no queden pegados al borde: 168 sobre los 246 de antes son los
      414 de la cuenta. Medido después, con la ventana a 820 de ancho:
      mientras el papel encoge —de 594 a 874 de alto— los botones quedan
      105 píxeles por encima de la barra y no se mueven de ahí, porque
      ellos y la barra bajan al mismo ritmo. Por encima de 874 el papel
      topa en su techo de 460 y deja de crecer, así que el hueco se
      abre: 131 con la ventana a 900, y 255 en una tableta de 1024. Y
      por debajo de 594 el papel topa en su suelo de 180 y el hueco se
      cierra un píxel por cada uno que pierde la ventana; lo que pasa a
      partir de ahí tiene su propio apartado más abajo. De 594 para
      arriba, «elementFromPoint» sobre el centro de cada botón devuelve
      el botón y no el enlace de la barra.

   Y DE PASO, LOS RODILLOS A SU TAMAÑO. Aquí el cajón mide 312 píxeles
   —min(420px, 38vw) con la ventana a 820—, más estrecho todavía que el
   móvil del que se queja la nota de arriba. Con los cantos de
   escritorio, al papel le quedaban 138 píxeles de texto: dieciséis
   letras por renglón, que no es leer, es descifrar. Puestos a 1:1, como
   en el móvil y por el mismo motivo, quedan 170 y el dibujo además se
   ve más nítido. Son los mismos números que usa la regla de 767 para
   abajo, así que no hay una tercera medida que mantener.

   El suelo de 180 es el mínimo con el que el pergamino sigue siendo un
   pergamino: aun con los rodillos finos se llevan 108 de lo que se
   escriba aquí —el borde cuenta dentro del alto—, así que por debajo de
   eso quedan dos renglones y pico. Con la ventana a menos de 594 el
   papel se planta ahí y deja de encoger. Y el techo sigue en 460, el
   mismo del ordenador: en una tableta de 768 por 1024 sobra alto y no
   hay por qué encoger nada.

   CON LA VENTANA MUY BAJA, LO QUE PASA DE VERDAD. Aquí ponía que «los
   botones no se van bajo la barra». Se van. Medido con el cajón del
   oráculo abierto y la ventana a 820 de ancho, que es esta franja.

   El motivo es el suelo del papel: en cuanto lo toca deja de ceder, y
   los botones se quedan clavados a 376 píxeles del borde de arriba
   pase lo que pase. La barra, en cambio, sube según baja la ventana.
   Uno quieto y la otra subiendo, se acaban cruzando. Y antes de que se
   crucen, el cajón ya se ha quedado corto por su cuenta, que es una
   cosa distinta: son cuatro momentos y conviene no mezclarlos. Los
   cuatro, medidos a 820 de ancho:

   - de 584 para abajo el cuerpo del cajón ya no da de sí y empieza a
     desplazarse. Al principio es un píxel, así que no se nota nada;
   - de 552 para abajo lo que se sale por debajo son los botones, que
     son lo último que hay en el cajón: a 552 les falta medio píxel y
     de 519 para abajo no se ve ni uno;
   - de 488 para abajo su caja ya pisa la barra, aunque para entonces
     hace rato que no están a la vista;
   - de 471 para abajo la pisa por el centro, y «elementFromPoint»
     sobre el medio del botón devuelve la barra. A 820 por 460 pasa, y
     ahí lo que devuelve es ya el enlace que va dentro de ella.

   Y a 844 por 390 —un iPhone apaisado, tamaño real— no se ve nada de
   ellos, pero no porque se caigan de la pantalla: su caja empieza en
   376, o sea que catorce píxeles suyos quedan dentro de los 390. Lo
   que los borra es el cajón, que ahí cierra en 248 y lleva «overflow:
   hidden».

   LO QUE SÍ ES VERDAD, y es lo que sostiene la pantalla. El cajón
   entero sigue por encima de la barra: a 820 por 460 su borde de abajo
   queda 63 píxeles por encima de ella, que es exactamente para lo que
   está el tope de 246 de aquí abajo. Y los botones no andan sueltos
   por la página: están recortados por el desplazamiento del propio
   cajón, y recortado lo están también para el dedo. En ese punto el
   botón no recibe el toque —quien responde es la barra, que va
   encima—, así que no hay ningún botón invisible robándole la pulsación
   a nadie.

   Se llega a ellos rodando dentro del cajón, y eso funciona: rodado
   hasta el fondo a 820 por 460, los botones suben a 251, con la barra
   96 píxeles más abajo, y «elementFromPoint» devuelve el botón. La
   pega es tener que rodar sin que nada avise de que hay algo debajo,
   no que no se pueda pulsar.

   Y NO SE ARREGLA AQUÍ PORQUE TODO ARREGLO MUEVE COSAS. Pegar los
   botones al pie del cajón con «position: sticky» los saca de donde
   están y los pone tapando el papel. Bajar el suelo de 180 deshace el
   pergamino, que es justo lo que ese suelo defiende. Y recuperar los
   46 píxeles que el tope reserva para la barra de administración de
   WordPress cuando no la hay agranda el cajón pero no mueve los
   botones: siguen a 376, así que no arregla nada y solo añade una
   condición más. Queda escrito: en apaisado muy bajo hay que rodar el
   cajón, y se sabe por qué.

   No se toca nav.css: su corte en 900 es el correcto y es el mismo que
   el de app.css. La franja no estaba mal repartida, estaba sin cubrir
   por este lado.
   ========================================================== */

@media (min-width: 768px) and (max-width: 899px) {
	/* Con «top» y «bottom» puestos los dos, el alto ya estaba decidido y
	   este tope lo recorta; el cajón se queda pegado arriba, que es de
	   donde cuelga, y lo que sobra se recorre por dentro. */
	.rd-casa__cajon {
		max-height: calc(100dvh - 246px);
	}

	.rd-casa__nuevo-txt {
		max-height: clamp(180px, calc(100dvh - 414px), 460px);
		border-width: 56px 38px 52px;
		border-image-width: 56px 38px 52px;
	}
}

/* La explicación, dentro del cajón: ya no va sobre la escena, así que
   no necesita fondo propio. */
.rd-casa__hoja .rd-casa__espera-hint {
	max-width: none;
	margin: 0 0 var(--rd-space-2);
	padding: 0;
	background: none;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
}

.rd-casa__hoja .rd-casa__espera-ir {
	margin: 0 0 var(--rd-space-4);
	padding-bottom: var(--rd-space-4);
	border-bottom: 1px solid var(--rd-border);
}

/* ==========================================================
   Dar de comer arrastrando
   ========================================================== */

/* La comida se coge, así que lo parece: el cursor cambia y el dibujo no
   se selecciona al arrastrar, que es lo que arruina el gesto. */
.rd-casa__cosa[data-rd-comida] {
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.rd-casa__cosa[data-rd-comida]:active {
	cursor: grabbing;
}

/* --- El jabón, cogido con el dedo ---

   Se coge de su casilla y se pasa por encima de Reddie. Va pegado al
   puntero, por encima de todo y sin estorbar a lo de debajo: si el
   propio jabón recibiera los toques, taparía a Reddie justo donde hay
   que frotar. */
.rd-casa__cosa[data-rd-jabon] {
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.rd-casa__cosa[data-rd-jabon]:active {
	cursor: grabbing;
}

.rd-casa__jabon-mano {
	position: fixed;
	z-index: 60;
	width: 84px;
	height: 84px;
	object-fit: contain;
	transform: translate(-50%, -50%) rotate(-8deg);
	pointer-events: none;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
}

/* Mientras se frota, Reddie se mueve un poquito: es lo que hace que
   parezca que se la está restregando y no que se le pasa algo por
   delante. */
@keyframes rd-frota {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

.rd-casa__reddie-caja.esta-frotando .rd-casa__reddie {
	animation: rd-frota 420ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.rd-casa__reddie-caja.esta-frotando .rd-casa__reddie {
		animation: none;
	}
}

/* La casilla de la que se ha cogido algo se atenúa: así se ve de dónde
   ha salido lo que se lleva en la mano. */
.rd-casa__cosa.es-origen {
	opacity: .35;
}

/* La copia que sigue al dedo. Va sobre todo lo demás y no responde a
   los toques: si respondiera, taparía a Reddie justo cuando hay que
   comprobar si el dedo está encima de él. */
.rd-casa__llevando {
	position: fixed;
	z-index: 200;
	width: 84px;
	height: 84px;
	object-fit: contain;
	pointer-events: none;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
}

/* Reddie se ilumina cuando la comida está encima. Sin esa señal no se
   sabe si soltar ahí va a servir de algo. */
/* El «scale» se ha ido de aquí por lo mismo: agrandaba la habitación
   entera mientras se llevaba la comida por encima. El resplandor solo ya
   dice lo que hay que decir —soltar aquí sirve— y no mueve nada. */
.rd-casa__reddie.va-a-comer {
	filter: drop-shadow(0 0 18px var(--rd-primary));
}

/* Y da un bocado.
 *
 * ALBA, 27-08-2026: «cuando doy de comer algo a Reddie, no muevas la
 * habitación».
 *
 * Y tenía toda la razón. Esta clase NO está en Reddie: está en el
 * «model-viewer», y ese model-viewer es la habitación ENTERA —paredes,
 * suelo, ventana, estantería y Reddie dentro—. El respingo de antes era
 * «scale(1.07) rotate(-2deg)», así que al darle una mora se movía la
 * casa: se ladeaba la ventana, se ladeaba la estantería y se ladeaba el
 * suelo. Reddie no se movía más que lo demás, porque no había forma de
 * mover solo a Reddie desde aquí.
 *
 * QUÉ HACE AHORA. Un destello, que es exactamente lo que ya hacía el
 * aseo unas reglas más arriba: «brightness» no mueve ni un píxel de
 * sitio, así que la habitación se queda quieta y la señal de que el
 * bocado ha entrado se sigue viendo. Y ser la misma señal que la del
 * baño no es un descuido: las dos cosas son cuidar a Reddie y está bien
 * que se parezcan.
 *
 * Si algún día hay que hacer que se mueva SOLO Reddie, no se hace desde
 * aquí: se hace con una animación dentro del propio modelo, que es el
 * único sitio donde Reddie es una pieza separada de la habitación.
 */
@keyframes rd-morder {
	0%   { filter: brightness(1); }
	30%  { filter: brightness(1.22) saturate(1.08); }
	100% { filter: brightness(1); }
}

.rd-casa__reddie.comiendo {
	animation: rd-morder .6s ease-out;
}

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

/* El globo de avisos sin leer. Rojo y con número: aquí la cantidad
   importa, porque «tienes avisos» y «tienes catorce» son cosas
   distintas. El borde del color del panel lo separa del icono. */
.rd-casa__globo {
	position: absolute;
	top: 0;
	right: 2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--rd-radius-pill);
	background: #D93025;
	border: 2px solid var(--rd-surface);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* «Ir al diario», con aire por arriba y por abajo. Estaba pegado al
   texto y a la línea, y eso lo hacía parecer más grande de lo que es. */
.rd-casa__hoja .rd-casa__espera-ir {
	margin: var(--rd-space-4) 0 0;
	padding-bottom: var(--rd-space-5);
}

/* La sombra del oráculo, oscura y transparente. Antes se veía crema
   porque venía dibujada dentro de la propia imagen; quitada de ahí,
   esta es la única que hay. */
.rd-casa__escena.es-oraculo .rd-casa__reddie-caja::after {
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, .38) 0%,
		rgba(0, 0, 0, .22) 48%,
		rgba(0, 0, 0, .06) 74%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* «Ir al diario», del ancho de su texto.

   Heredaba el ancho completo del bloque, y un botón que ocupa toda la
   línea se lee como la acción principal de la pantalla. Aquí no lo es:
   la principal es abrir el Reddie consejo. */
.rd-casa__hoja .rd-casa__espera-ir {
	text-align: center;
}

.rd-casa__hoja .rd-casa__espera-ir .rd-button {
	display: inline-flex;
	width: auto;
	padding: 8px var(--rd-space-4);
	font-size: var(--rd-size-xs);
	min-height: 0;
}

/* --- El botón abierto, marcado ---

   Sin esto, con el cajón abierto no se sabe cuál de los cinco se pulsó:
   el cajón tiene título, pero el panel se queda igual y la vista tiene
   que ir y volver para comprobarlo. */
.rd-casa__btn.is-abierto .rd-casa__btn-icono {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: #fff;
}

.rd-casa__btn.is-abierto .rd-casa__btn-txt {
	color: var(--rd-primary);
	font-weight: 700;
}

/* La moneda como icono de aviso.
   El tamaño lo pone la regla de más abajo, que va dentro del hueco: aquí
   solo se asegura que se comporte como un bloque. */
.rd-aviso__img {
	display: block;
}

/* --- La moneda, sin hueco detrás ---

   El resto de iconos van dentro de un círculo de color: son dibujos
   planos y ese fondo los separa de la tarjeta. La moneda no lo necesita
   —ya tiene su propio volumen y su brillo— y con el círculo detrás
   parecía una moneda pegada sobre un cuadrado.

   Se detecta con «:has», que permite cambiar el hueco según lo que lleve
   dentro sin tener que marcar el marcado con otra clase. */
.rd-aviso__marca--dibujo,
.rd-aviso__marca:has(.rd-aviso__img) {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --- El aviso de subir de nivel ---

   Lleva la silueta de la cabeza de Reddie con el número dentro, la
   misma que va en la barra de arriba. Va sin círculo detrás, como la
   moneda: la silueta ya tiene forma propia y meterla en un círculo la
   convertía en un icono más. */
.rd-aviso__nivel {
	font-size: 26px;
}

.rd-aviso__marca--dibujo,
.rd-aviso__marca:has(.rd-aviso__nivel) {
	background: none;
	border-radius: 0;
}

/* Y llena el hueco: los dibujos van a 26 píxeles dentro de un círculo
   de 52, pero una moneda sin fondo puede ocuparlo entero. */
.rd-aviso__marca .rd-aviso__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================
   Casa en el móvil
   ==========================================================
   Otra disposición, no la misma encogida. En una pantalla estrecha, un
   panel de pie a la derecha se lleva un tercio del ancho y deja a Reddie
   apretado contra el borde; en horizontal ocupa alto, que es lo que
   sobra.

   Queda: barra de cuidados arriba, Reddie en el medio, barras a sus
   pies. Y el cajón se abre hacia abajo, empujando a Reddie, en vez de
   taparlo entero como hacía antes.
   ========================================================== */

@media (max-width: 767px) {
	/* Una sola columna con dos filas: el cajón y Reddie. */
	.rd-casa__escena {
		display: grid;
		grid-template-columns: 1fr;
		/*
		 * El cajón arriba y Reddie debajo.
		 *
		 * El cajón va primero, pegado al panel del que sale, y Reddie
		 * debajo. Así al abrirlo Reddie baja para dejarle sitio, que es
		 * lo que pasa en el ordenador pero hacia el lado.
		 *
		 * Antes el cajón iba el último y Reddie encima, así que abrir
		 * una pestaña dejaba a Reddie arriba y la lista debajo: justo al
		 * revés de como sale.
		 *
		 * AQUÍ HABÍA UNA TERCERA FILA, la primera, reservada al panel de
		 * cuidados. Sobraba: el panel está colocado en absoluto —lo pone
		 * la regla del final del archivo, que lo cuelga del borde
		 * derecho del cuarto— y lo que está en absoluto no ocupa fila.
		 * O sea que era una fila que siempre medía cero.
		 *
		 * Cero de alto, pero NO cero de sitio: una fila vacía sigue
		 * teniendo su separación con la de al lado. Dos filas a cero con
		 * ocho píxeles de separación cada una son dieciséis píxeles de
		 * fondo de la aplicación entre la cabecera y el techo del
		 * cuarto. Es la franja que se veía arriba en el móvil, medida en
		 * 320, 375 y 430: la habitación empezaba en 96 en vez de en 80.
		 *
		 * Con la fila fuera y la separación de filas en cero, la
		 * habitación arranca justo debajo de la cabecera. El aire que el
		 * cajón necesita cuando está abierto se lo pone él con su propio
		 * margen, unas líneas más abajo: así solo existe cuando el cajón
		 * existe, que es lo que fallaba al ponerlo con «gap».
		 *
		 * La última va en «minmax(0, 1fr)» y no en «1fr» a secas. Con
		 * «1fr» la fila nunca baja de lo que ocupa su contenido, así que
		 * al abrirse un cajón alto la escena de Reddie empujaba hacia
		 * abajo, la página se hacía más larga que la ventana y lo último
		 * —la cuenta atrás— acababa por debajo de la barra de secciones.
		 * Con el mínimo en cero, la fila cede y no hay nada que se salga
		 * de la pantalla.
		 */
		grid-template-rows: auto minmax(0, 1fr);
		align-items: center;
		justify-items: center;
		row-gap: 0;
		column-gap: var(--rd-space-3);
		min-height: calc(100dvh - 168px);
	}

	/*
	 * Y se anulan las columnas del ordenador.
	 *
	 * Allí hay tres —una hueca, Reddie y el panel— y cada elemento lleva
	 * escrito en cuál va. Aquí solo hay una, así que decir «ponte en la
	 * tercera» manda a Reddie y al panel a una columna que no existe: el
	 * navegador se la inventa a la derecha, y de ahí que los dos
	 * salieran pegados a un lado.
	 */
	.rd-casa__centro,
	.rd-casa__panel,
	.rd-casa__cajon {
		grid-column: 1;
	}

	/* --- El panel, en columna y dentro de la habitación --- */

	/* Aquí era una barra horizontal encima del cuarto. Ahora vive dentro,
	   igual que en el ordenador, porque es lo que se ha pedido y porque
	   así la habitación empieza justo debajo del menú y gana alto, que es
	   lo que escasea en un móvil.

	   Sin rótulos: en 375 píxeles, cinco palabras al lado de los iconos
	   se comen media habitación. El nombre sigue ahí para el lector de
	   pantalla, solo que no se pinta. */
	.rd-casa__panel {
		flex-direction: column;
		justify-content: center;
		align-self: auto;
		width: auto;
		gap: var(--rd-space-2);
		padding: 0;
	}

	.rd-casa__btn {
		width: auto;
		flex: 0 0 auto;
		min-width: 0;
	}

	/* Sin rótulos, TAMBIÉN en el oráculo.

	   Llevaba el «:not(.es-oraculo)» de cuando el panel caía en fila
	   debajo de Reddie y allí había sitio de sobra. Ahora está pegado al
	   borde del cuarto en los dos casos, y con las cuatro palabras el
	   panel mide 289 píxeles en vez de 216: en el templo de un teléfono
	   eso es más de lo que hay. El nombre sigue ahí para el lector de
	   pantalla, solo que no se pinta. */
	.rd-casa__btn-txt {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Los botones, del tamaño que pide un dedo: cuarenta y ocho
	   píxeles, por encima del mínimo recomendado de cuarenta y cuatro.
	   Son lo único que se pulsa en esta pantalla. */
	.rd-casa__btn-icono {
		width: 48px;
		height: 48px;
	}

	.rd-casa__btn .rd-icon {
		width: 24px;
		height: 24px;
	}

	/* AQUÍ SE PINTABA EL RÓTULO DEL BOTÓN a una línea y recortado.
	   Se ha ido: en el móvil los botones no llevan nombre a la vista, ni
	   en Casa ni en el oráculo. Está unas líneas más arriba, con el
	   porqué. */

	.rd-casa__globo {
		right: 50%;
		margin-right: -22px;
	}

	.rd-casa__punto {
		right: 50%;
		margin-right: -19px;
	}

	/* --- Reddie, en el medio --- */
	.rd-casa__centro {
		grid-row: 2;
		min-width: 0;
		width: 100%;
		padding: 0;
	}

	.rd-casa__reddie-caja {
		--rd-reddie-alto: clamp(150px, 28vh, 260px);
	}

	.rd-casa__reddie {
		height: var(--rd-reddie-alto);
	}

	.rd-casa__veces {
		gap: 4px;
	}

	.rd-casa__vez {
		width: 10px;
		height: 10px;
	}

	/* --- El cajón, abajo y empujando --- */
	.rd-casa__cajon {
		width: 100%;
		/* Vuelve al flujo: así ocupa su fila de la rejilla y Reddie se
		   corre hacia arriba para dejarle sitio, en vez de que el cajón
		   lo tape. */
		position: static;
		grid-row: 1;
		width: auto;
		/* Su aire arriba y abajo se lo pone él, y no la separación de
		   filas de la escena.

		   Con «gap» el hueco existía siempre, también con el cajón
		   cerrado, y entonces la habitación no llegaba hasta la
		   cabecera. Puesto en margen, un cajón cerrado —que va con
		   «display: none»— no deja nada detrás, y uno abierto queda
		   separado de la cabecera por arriba y de Reddie por abajo,
		   igual que antes. */
		margin: var(--rd-space-3) 0;
		max-height: 46dvh;
		border-radius: var(--rd-radius-lg);
	}

	/*
	 * Reddie no cambia de tamaño al abrir un cajón.
	 *
	 * Se limita a bajar, porque el cajón le ha quitado sitio por arriba.
	 * Encogerlo era lo que hacía antes y quedaba raro: la mascota se
	 * hacía pequeña cada vez que mirabas algo.
	 *
	 * Y las barras siguen a la vista: hacen falta para dar de comer, que
	 * es para lo que se abre la despensa.
	 */

	/* Y no se desliza a los lados: aquí el hueco se hace por abajo. */
	.rd-casa__escena.tiene-cajon .rd-casa__centro {
		transform: none;
	}

	.rd-casa__rejilla {
		grid-template-columns: repeat(4, 1fr);
	}

	/* El bocadillo, con la letra del móvil.

	   Dónde se coloca lo deciden las reglas del final del archivo, que
	   lo cuelgan del cuarto por encima de la cabeza de Reddie. Aquí solo
	   queda el tamaño de letra: en una pantalla estrecha, la frase entra
	   en menos renglones y el bocadillo tapa menos habitación. */
	.rd-casa__bocadillo {
		text-align: center;
		font-size: var(--rd-size-xs);
	}
}

/* ==========================================================
   Los cajones en el móvil, uno a uno
   ==========================================================
   Cada uno pide un alto distinto, y por eso no valía una medida única:
   las notificaciones son una lista que se recorre, y los almacenes son
   una rejilla de dos filas que se ve entera de un vistazo.
   ========================================================== */

@media (max-width: 767px) {
	/* Por defecto, contenido. El tope grande es para la lista de
	   avisos, que es lo único que puede crecer sin fin. */
	.rd-casa__cajon {
		max-height: 42dvh;
	}

	/*
	 * Los almacenes ocupan lo justo.
	 *
	 * Dos filas de dibujos y su título: unos ciento sesenta píxeles. Con
	 * el tope de la lista de avisos, media pantalla se iba en un cajón
	 * medio vacío y Reddie quedaba cortado por abajo.
	 */
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="despensa"]:not([hidden])),
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="armario"]:not([hidden])),
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="aseo"]:not([hidden])) {
		max-height: none;
	}


	/*
	 * La rejilla: cinco columnas, dos filas, y se ve entera.
	 *
	 * ANTES SE DESPLAZABA A LO ANCHO, con diez columnas de 54 píxeles
	 * clavados y dos filas también de 54. Tenía sentido con veinte
	 * alimentos: no cabían de otra forma sin dejarlos en sellos de nada.
	 *
	 * Con diez caben de sobra en cinco columnas, y quitar el
	 * desplazamiento se lleva por delante dos problemas de golpe. Uno,
	 * que había que arrastrar la tira para ver la mitad de la despensa.
	 * Y otro más gordo: aquellas filas de 54 píxeles eran una altura
	 * fija, así que las casillas cuadradas —que en un móvil salen a unos
	 * 78— no cabían y se montaban sobre la fila de abajo.
	 *
	 * Sin altura fija, cada fila mide lo que midan sus casillas.
	 */
	.rd-casa__rejilla {
		grid-template-columns: repeat(5, 1fr);
		gap: 6px;
	}

	/* El aseo lleva menos cosas y se ven más grandes. */
	.rd-casa__hoja[data-rd-hoja="aseo"] .rd-casa__rejilla {
		grid-template-columns: repeat(4, 1fr);
	}

	.rd-casa__cajon-cuerpo {
		padding: var(--rd-space-3);
	}

	/* Con un almacén abierto, Reddie encoge lo justo: es lo que hace
	   falta para arrastrarle la comida sin que el cajón le tape.

	   Va en la CAJA y no en el dibujo. Puesto en «.rd-casa__reddie»
	   alcanzaba también al visor de tres dimensiones, y entonces abrir
	   la despensa encogía la habitación entera a 220 píxeles en medio de
	   la pantalla. La medida es para las Reddies planas —la de respaldo
	   y la que medita— y para la capa de manchas, que son las que
	   cuelgan de esta variable. */
	.rd-casa__escena.tiene-cajon .rd-casa__reddie-caja {
		--rd-reddie-alto: clamp(130px, 24vh, 220px);
	}

	/* En el oráculo, Reddie más pequeña: aquí comparte pantalla con el
	   cajón y con la cuenta atrás, y de las tres cosas es la que menos
	   falta hace ver grande. */
	.rd-casa__escena.es-oraculo .rd-casa__reddie-caja {
		--rd-reddie-alto: clamp(96px, 16dvh, 200px);
	}

	/* --- Con el oráculo del día en pantalla, el templo se lo queda todo

	   Se van la cuenta atrás y el panel de cuidados. No es capricho de
	   despejar: es que en un teléfono no caben.

	   La cuenta atrás, porque no cuenta nada. Marca cero mientras el
	   mensaje está sin decidir —la espera del siguiente arranca al
	   guardarlo o al descartarlo— y lo único que dice su rótulo es que el
	   mensaje está aquí, que ya se ve.

	   El panel, porque no hay dónde ponerlo. Con el pergamino abierto, el
	   cajón se lleva el 64 % de la pantalla y a la escena de Reddie le
	   quedan 129 píxeles en un teléfono de 812 y 41 en uno de 568; los
	   cuatro botones miden 216. Medido, con el panel puesto: en 375×812 el
	   último botón acababa 47 píxeles por debajo de la barra de secciones,
	   o sea tapado por ella, y en 320×568 la página se hacía más larga que
	   la ventana. Y no vale encoger el cajón para hacerle sitio: entonces
	   los que se caen son «Guardar el consejo» y «No guardar», que es lo
	   único que hay que hacer ahí.

	   Se recupera todo al cerrar el mensaje, que es lo que se hace con
	   esos dos botones, con el aspa del cajón o con la tecla de escape.
	   Y la barra de abajo sigue estando para moverse por la aplicación. */
	/* Del par que había aquí solo queda el panel: el otro era la cuenta
	   atrás, que ya no existe. Y la condición «es-oraculo» tampoco se
	   cumple nunca desde que el consejo se abre en un libro, así que esta
	   regla está a la espera de que alguien vuelva a necesitarla. */
	.rd-casa__escena.es-oraculo:has(.rd-casa__nuevo) .rd-casa__panel {
		display: none;
	}
}

@media (max-width: 767px) {
	/*
	 * AQUÍ EL ORÁCULO SE ORDENABA AL REVÉS que los demás cajones: Reddie
	 * y el reloj en la fila de arriba y la lista debajo.
	 *
	 * Se ha quitado, y este es el motivo: la fila de arriba es «auto»,
	 * o sea que mide lo que mida su contenido, y la escena de Reddie
	 * necesita justo lo contrario —un alto dado— porque dentro lleva la
	 * habitación estirada de arriba abajo. Sin alto, la caja se cerraba,
	 * todo lo de dentro se apilaba y el reloj acababa por debajo del
	 * borde de la ventana. Que es exactamente lo que se veía.
	 *
	 * Ahora el oráculo se coloca como el resto: el cajón en su fila y la
	 * escena quedándose con lo que sobra. El reloj tiene fila propia al
	 * pie de esa escena, así que se sigue viendo sin bajar la página, que
	 * era lo que se buscaba con el orden invertido.
	 */
	/*
	 * Y con un tope que deja sitio a Reddie y al reloj.
	 *
	 * El 44 % de la pantalla vale en un teléfono normal. En uno bajo
	 * —320 por 568— eran 250 píxeles de cajón sobre 413 de escena, y a
	 * Reddie le quedaban 33: un sello. La segunda cuenta reserva 400
	 * píxeles para todo lo demás y manda cuando la pantalla es corta.
	 *
	 * Los 400 salen de sumar lo que hay que dejar sitio: 80 de la barra
	 * de arriba, 75 de la de abajo, 147 del reloj con su rótulo y 216 de
	 * los cuatro botones de cuidar, que es lo más alto de los dos que
	 * comparten esa franja. Con 380 la cuenta se quedaba corta por
	 * cuatro píxeles y el último botón acababa detrás de la barra;
	 * medido a 320×568.
	 *
	 * Lo que el cajón pierde se recorre por dentro, que para eso la
	 * lista de oráculos guardados ya se desplaza.
	 */
	.rd-casa__escena.es-oraculo .rd-casa__cajon {
		max-height: min(44dvh, calc(100dvh - 400px));
	}

	/*
	 * Y los almacenes ocupan lo que ocupan sus dos filas.
	 *
	 * Les había quitado el tope y sin tope se estiraban a lo que diera
	 * el contenido: la pestaña salía enorme y medio vacía. Dos filas de
	 * cincuenta y cuatro píxeles más el título son unos ciento noventa.
	 */
	.rd-casa__cajon:has([data-rd-hoja="despensa"]:not([hidden])),
	.rd-casa__cajon:has([data-rd-hoja="armario"]:not([hidden])),
	.rd-casa__cajon:has([data-rd-hoja="aseo"]:not([hidden])) {
		max-height: 210px;
	}

}

/* ==========================================================
   Arreglos de la despensa en el móvil
   ==========================================================
   En la captura se veía el cajón más ancho que la pantalla: el título
   salía cortado por la izquierda y dentro no cabía nada.

   La causa: la rejilla mide diez columnas de 54 píxeles —unos 600— y
   una rejilla no encoge por debajo de su contenido salvo que se le diga.
   Así que el cajón se estiraba hasta 600 y se salía de la pantalla.
   ========================================================== */

@media (max-width: 767px) {
	/* Que pueda encogerse por debajo de lo que mide su contenido. Sin
	   esto, la rejilla manda sobre el ancho del cajón. */
	.rd-casa__cajon,
	.rd-casa__cajon-cuerpo,
	.rd-casa__hoja {
		min-width: 0;
		max-width: 100%;
	}

	.rd-casa__cajon {
		width: 100%;
	}

	/* Y la rejilla se desplaza dentro, en vez de empujar hacia fuera. */
	.rd-casa__rejilla {
		max-width: 100%;
	}

	/* El alto, según lo que haya dentro y no un número fijo: con un
	   solo alimento sobraba media pestaña vacía. */
	.rd-casa__cajon:has([data-rd-hoja="despensa"]:not([hidden])),
	.rd-casa__cajon:has([data-rd-hoja="armario"]:not([hidden])),
	.rd-casa__cajon:has([data-rd-hoja="aseo"]:not([hidden])) {
		max-height: 40dvh;
	}
}

/* ==========================================================
   Y en pantallas de ordenador estrechas
   ==========================================================
   Al encoger la ventana, Reddie y el cajón se salían por los lados. Lo
   mismo de antes: las columnas de la rejilla no encogen por debajo de lo
   que miden sus hijos si no se les dice.
   ========================================================== */

@media (min-width: 768px) {
	.rd-casa__centro,
	.rd-casa__cajon,
	.rd-casa__panel {
		min-width: 0;
	}

	.rd-casa__cajon {
		/* Nunca más ancho de lo que queda entre Reddie y el panel. */
		max-width: calc(100vw - 260px);
	}

	.rd-casa__reddie {
		max-width: 100%;
	}
}


/* --- Reddie en tres dimensiones ---

   Ocupa el sitio del dibujo plano y hereda su altura, así que la escena
   no cambia de proporciones. El fondo va transparente para que se vea la
   casa por detrás.

   El cursor de agarre avisa de que se puede girar: sin él, mucha gente
   no descubriría que se mueve. */
.rd-casa__reddie--3d {
	/* Ancho escrito, sacado del alto. Ver el porqué arriba, donde se
	   define «--rd-reddie-alto». */
	width: calc(var(--rd-reddie-alto) * 3 / 4);
	height: var(--rd-reddie-alto);
	background: transparent;
	--poster-color: transparent;
	cursor: grab;
	outline: none;
}

.rd-casa__reddie--3d:active {
	cursor: grabbing;
}

/* Mientras se arrastra comida o jabón, el modelo deja de responder al
   dedo: si no, soltar un kiwi encima de Reddie la haría girar en vez de
   comérselo. */
.rd-casa__reddie-caja.se-esta-lavando .rd-casa__reddie--3d,
.rd-casa__reddie-caja.se-esta-comiendo .rd-casa__reddie--3d {
	pointer-events: none;
}

/* Las manchas del Reddie de tres dimensiones van dentro del propio
   modelo, pegadas a su cuerpo, y se ven igual de frente que por la
   espalda o por la cola.

   La capa plana sigue en la página, pero ya no pinta: es donde vive el
   estado —sucia o limpia, y cuánto queda mientras se frota— y de ahí lo
   copia «manchas3d.js». Quitarla del todo obligaría a llevar la cuenta
   en dos sitios distintos. */
.rd-casa__reddie-caja .rd-casa__manchas {
	z-index: 2;
}

.rd-casa__reddie-caja.tiene-manchas-3d .rd-casa__manchas {
	background-image: none;
}

/* --- Decorar la habitación ---

   La lista de diseños de UNA categoría. Antes era todo lo que había en
   el cajón —se abría pulsando un mueble y salía solo lo suyo—; ahora es
   uno de los siete apartados del catálogo, y cada uno lleva su nombre
   escrito encima. Cómo se ven los apartados y sus títulos está al final
   del archivo, en «El catálogo de decoración».

   Cada línea dice qué es y qué se puede hacer con ella: ponerlo, si ya
   es tuyo; lo que cuesta, si no; o a qué nivel se abre, si aún queda
   lejos. Los tres casos se ven a la vez y en el mismo sitio, que es lo
   que deja entender de un vistazo cuánto le queda a la habitación por
   delante. */
/* ==========================================================
   LAS PESTAÑAS DE CATEGORÍA
   ==========================================================
   Antes las seis listas iban una detrás de otra y el cajón medía mil
   setecientos píxeles: para llegar a los objetos de la estantería había
   que bajar tres pantallas, y por el camino se perdía de vista la
   habitación, que es contra lo que se está eligiendo.

   Van PEGADAS ARRIBA. El catálogo se recorre, y una cabecera que se va
   con el desplazamiento obliga a subir para cambiar de categoría.

   Y SE PARTEN EN DOS FILAS en vez de correrse a lo ancho. Los seis
   nombres suman quinientos treinta píxeles y el cajón tiene
   cuatrocientos sesenta, así que en una sola fila «Ubicación» —que es
   la última— se queda siempre cortada por el borde. Una pestaña que
   asoma a medias no se lee como «hay más, arrástrame»: se lee como que
   la web está mal cortada. Dos filas ocupan treinta píxeles más y se
   ven las seis.
   ========================================================== */
.rd-decor__pestanas {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-space-2);
	margin: 0 0 var(--rd-space-4);
	padding: var(--rd-space-2) 0;

	/* EL FONDO TIENE QUE SER OPACO, y de noche no lo era.

	   Las pestañas se quedan pegadas arriba mientras el catálogo se
	   desplaza por debajo. Con «--rd-surface» a secas colaba de día
	   —es un crema macizo— pero de noche esa variable vale
	   «rgba(45,63,104,.88)», o sea un azul al 88 %: las fichas se veían
	   pasar POR DETRÁS de los nombres de las categorías. Es lo que Alba
	   señaló en su captura.

	   Se arregla apilando el color del tema encima de una base que sí es
	   opaca en los seis temas. Un elemento admite un solo
	   «background-color» pero varias capas de imagen, así que el
	   degradado de un solo color es la manera de poner dos colores sin
	   inventarse un tercero. Es el mismo recurso que usa el papel del
	   cuaderno. */
	background-color: var(--rd-bg);
	background-image: linear-gradient(var(--rd-surface), var(--rd-surface));
}

/* Y EL FONDO SE ESTIRA HACIA ARRIBA, hasta el filo del cajón.

   «top: 0» pega las pestañas al borde de arriba de la ZONA QUE SE
   DESPLAZA, y esa zona empieza después del relleno del cajón: dieciséis
   píxeles. Así que quedaba una franja de esos dieciséis por encima de
   las pestañas donde las fichas seguían asomando al subir. Se veía como
   un recorte de papel pintado flotando sobre los nombres.

   Se tapa alargando el fondo de las pestañas hacia arriba. Va como
   pseudo-elemento y no como relleno porque el relleno movería las
   pastillas hacia abajo; esto solo pinta.

   «background: inherit» copia las DOS capas —el color macizo de debajo
   y el del tema encima—, así que sigue siendo opaco en los seis temas.
   Los dieciséis son el relleno del cajón; si se cambia allí hay que
   cambiarlo aquí. */
.rd-decor__pestanas::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 16px;
	background: inherit;
}

.rd-decor__pestana {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	background: transparent;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-xs);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--rd-transition), color var(--rd-transition), border-color var(--rd-transition);
}

.rd-decor__pestana:hover {
	border-color: var(--rd-primary);
	color: var(--rd-ink);
}

.rd-decor__pestana.es-activa {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: #fff;
}

/* ==========================================================
   EL CATÁLOGO, EN FICHAS COMO LAS DE COMIDA
   ==========================================================
   Alba lo pidió así: «el producto en grande con el botón poner». Y tiene
   razón, porque lo que se elige aquí es un DIBUJO —un papel pintado, una
   alfombra, una lámpara— y en la muestra de treinta y cuatro píxeles que
   había antes un papel de rayas y uno de bambú se veían igual: dos
   cuadraditos de color crema.

   Dos columnas y no tres: el cajón mide unos cuatrocientos sesenta
   píxeles, así que a tres cada muestra se queda en ciento treinta y
   volvemos a lo mismo. A dos, la muestra sale de doscientos y el dibujo
   se reconoce.
   ========================================================== */
.rd-decor__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rd-space-3);
}

.rd-decor__uno {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--rd-space-2);
	padding: var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	transition: border-color var(--rd-transition), box-shadow var(--rd-transition);
}

/* Al pasar por encima se levanta un poco. No es adorno: es lo que dice
   que esa ficha está haciendo algo —la habitación de al lado se ha
   pintado con ella— y sirve para saber cuál se está mirando cuando el
   ratón se mueve deprisa. */
.rd-decor__uno:hover {
	border-color: var(--rd-primary);
	box-shadow: 0 4px 14px rgba(90, 60, 40, .12);
}

/* El que está puesto se marca con el borde y una chincheta arriba a la
   derecha: en una rejilla, un texto a la derecha ya no cae en una línea
   propia y se perdía. */
.rd-decor__uno.es-puesto {
	border-color: var(--rd-primary);
	box-shadow: inset 0 0 0 1px var(--rd-primary);
}

/* LO BLOQUEADO: VELO OSCURO Y CANDADO.

   Antes se apagaba con transparencia y ya está, y eso se lee como «esto
   está desactivado», que es lo que se le pone a un botón roto. Un velo y
   un candado cerrado dicen otra cosa: esto existe, es tuyo más adelante.

   NO SE APAGA LA FICHA ENTERA. Con «opacity» sobre el «li» se apagaba
   también el nombre y el nivel, que son justo lo que hay que poder leer
   para saber qué es y cuánto falta. El velo va SOLO encima de la
   muestra.

   Y AL PASAR EL RATÓN EL VELO SE ABRE. Alba lo pidió así: aunque no
   puedas tenerlo todavía, tienes que poder ver cómo quedaría. La
   habitación de al lado se pinta con él —eso lo hace «decorar.js»— y la
   ficha enseña su dibujo. El candado se queda, más flojito: sigue siendo
   verdad que está cerrado. */
.rd-decor__uno.es-cerrado .rd-decor__muestra {
	color: #fff;
}

.rd-decor__uno.es-cerrado .rd-decor__muestra::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(24, 16, 11, .52);
	transition: background var(--rd-transition);
}

.rd-decor__uno.es-cerrado:hover .rd-decor__muestra::before {
	background: rgba(24, 16, 11, .10);
}

.rd-decor__candado {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34%;
	height: 34%;
	max-width: 44px;
	max-height: 44px;
	translate: -50% -50%;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
	transition: opacity var(--rd-transition);
}

.rd-decor__uno.es-cerrado:hover .rd-decor__candado {
	opacity: .75;
}

/* El nivel al que se abre, en gris de apoyo: es un dato, no un botón. */
.rd-decor__accion--estado {
	color: var(--rd-ink-muted);
}

/* LA MUESTRA, EN GRANDE Y CUADRADA.

   El relleno del 100 % es el mismo truco que la rejilla de la comida:
   un porcentaje de relleno vertical se mide contra el ANCHO, así que la
   casilla sale cuadrada sin que el alto dependa de sí mismo. Con
   «aspect-ratio» dentro de una rejilla el navegador rompe el círculo por
   lo bajo y las fichas se montan unas sobre otras. */
.rd-decor__muestra {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: var(--rd-radius-sm);
	border: 1px solid var(--rd-border);
	background-color: var(--rd-bg);
}

.rd-decor__nombre {
	min-width: 0;
	font-size: var(--rd-size-xs);
	font-weight: 600;
	line-height: 1.25;
}

.rd-decor__accion {
	display: block;
	width: 100%;
	text-align: center;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

/* El precio, con la moneda de Reddie delante.

   Es la misma moneda de la barra de arriba, en pequeño: así el número
   se lee como reddies sin tener que escribir la palabra, que en una
   ficha de dos columnas no cabe. */
.rd-decor__accion--precio {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.rd-decor__moneda {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Y el pie de la ficha se pega abajo, para que todas las fichas de una
   fila tengan el botón a la misma altura aunque un nombre ocupe dos
   renglones. */
.rd-decor__nombre {
	margin-top: auto;
}

/* Solo lo que se puede pulsar se ve pulsable. «Puesto» y «Nivel 12» son
   estados, no botones, y darles pinta de botón invita a pulsar algo que
   no va a hacer nada. */
.rd-decor__accion[data-rd-poner],
.rd-decor__accion[data-rd-comprar] {
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--rd-primary);
	color: #fff;
	font-weight: 600;
}

.rd-decor__accion[data-rd-poner] {
	background: transparent;
	color: var(--rd-primary);
	border: 1px solid var(--rd-primary);
}

/* AQUÍ ESTABA TAMBIÉN «.rd-decor__cargando», el «Un momento…» que se
   enseñaba mientras el cajón pedía los diseños al servidor. Se ha ido
   porque ya no hay espera: el catálogo entero viene escrito en la
   página, igual que la comida, y al abrirlo está. */
.rd-decor__vacio {
	margin: 0;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
	text-align: center;
}

/* La habitación se puede tocar: el dedo cambia sobre los muebles. */
.rd-casa__reddie--3d {
	cursor: grab;
}

/* --- Los marcadores de la habitación ---

   Un punto pequeño sobre cada cosa que se puede cambiar. El visor los
   coloca y los mueve solo; aquí únicamente se dice cómo son.

   Discretos a propósito: la habitación es de Reddie, no un panel de
   botones. Se ven lo justo para saber que están y crecen al acercarse
   el dedo. */
.rd-decor__punto {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	background: rgba(216, 90, 54, .82);
	box-shadow: 0 1px 6px rgba(58, 33, 22, .35);
	cursor: pointer;
	transition: transform 160ms ease, background 160ms ease;
}

.rd-decor__punto::after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	margin: 4px auto;
	border-radius: 50%;
	background: #fff;
}

.rd-decor__punto:hover,
.rd-decor__punto:focus-visible {
	transform: scale(1.25);
	background: rgba(216, 90, 54, 1);
}

/* La capa donde viven, justo encima de la habitación y del mismo
   tamaño. No atrapa el dedo: solo lo atrapan los marcadores, para que
   girar la vista siga funcionando en todo lo demás. */
.rd-decor__marcas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.rd-decor__punto {
	position: absolute;

	/* Las coordenadas que escribe el guion son el centro del marcador,
	   no su esquina. */
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

/* En el móvil la habitación se ve pequeña, así que los marcadores se
   encogen con ella: al tamaño del ordenador tapaban lo que señalan. Se
   quedan en dieciséis píxeles, que es lo mínimo para poder darles con
   el dedo sin fallar. */
@media (max-width: 767px) {
	.rd-decor__punto {
		width: 16px;
		height: 16px;
		border-width: 1.5px;
	}

	.rd-decor__punto::after {
		width: 5px;
		height: 5px;
		margin: 3.5px auto;
	}
}


/* ==========================================================
   La habitación, a pantalla completa
   ==========================================================
   Reddie ya no vive en un recuadro en medio de la página: la
   habitación ocupa todo lo que hay bajo la barra de arriba, de borde
   a borde, y lo demás —el bocadillo, los cuidados y el panel— se
   apoya encima.

   La barra de navegación no se toca. Va por delante en el flujo de la
   página y la Casa empieza donde ella termina, así que no hay forma
   de que quede tapada.

   Todo esto vale para la Casa y solo para la Casa. En el oráculo la
   habitación se esconde y Reddie levita en un dibujo plano, con su
   sombra debajo, y esa maqueta es la de siempre: por eso cada regla
   lleva «:not(.es-oraculo)». Sin esa condición, la sombra se iría al
   pie de la pantalla y Reddie se quedaría sin ella.
   ========================================================== */

/* La Casa se sale del carril del resto de la aplicación.
 *
 * Las demás pantallas son texto y fichas, y se leen mejor en una
 * columna estrecha y centrada. Esta es un escenario, y un escenario
 * con márgenes no es un escenario.
 *
 * Abajo se reserva el hueco de la barra de botones del móvil. En el
 * ordenador esa barra no existe y el hueco se quita más abajo.
 */
.rd-app__main.rd-casa {
	max-width: none;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	display: flex;
}

@media (min-width: 900px) {
	.rd-app__main.rd-casa {
		padding-bottom: 0;
	}
}

/* --- El centro pasa a ocupar las tres columnas ---

   Antes iba en la de en medio, entre dos huecos de noventa y seis
   píxeles que dejaban sitio al panel. Ahora la habitación tiene que
   llegar a los dos bordes, así que el centro los cruza y el panel se
   le pone encima: en una rejilla dos cosas pueden compartir casilla.

   Y por dentro son tres filas: el bocadillo arriba, la habitación en
   medio quedándose con todo lo que sobre, y la cuenta atrás abajo. Es
   lo que hace que la habitación crezca sola cuando la ventana es más
   alta, sin ninguna cuenta escrita a mano.

   ESTO VALE TAMBIÉN PARA EL ORÁCULO, y antes no. Allí el centro volvía
   a ser una columna estrecha centrada, la caja de Reddie medía lo que
   el dibujo y el panel de cuidados caía en fila justo debajo de él: de
   ahí las tres cosas que se veían mal —el panel encima de Reddie, la
   escena más alta que la ventana y la cuenta atrás por debajo del
   borde—. Con la misma maqueta en los dos modos, lo único que cambia
   es QUÉ se dibuja dentro, que es lo que de verdad distingue Casa del
   templo. */
.rd-casa__centro {
	grid-row: 1;
	grid-column: 1 / -1;
	justify-self: stretch;
	align-self: stretch;
	max-width: none;

	/* Contra esta caja se cuelga el bocadillo, que va colocado a mano
	   sobre la cabeza de Reddie. */
	position: relative;

	display: grid;
	/* Una sola columna y a todo el ancho. Si no se escribe, la rejilla
	   se inventa una del ancho del texto más largo y la habitación se
	   queda encogida en el medio. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	justify-items: center;
	align-items: center;
}

/* --- El bocadillo, encima de la cabeza y dentro del cuarto ---

   Sale del flujo y se cuelga del borde de arriba de la habitación. La
   altura exacta la escribe «dice.js» en «--rd-casa-globo-top», que es
   la única que sabe tres cosas a la vez: dónde empieza el dibujo del
   cuarto, dónde queda la cabeza de Reddie y cuánto mide el bocadillo
   con la frase de hoy dentro.

   El valor de reserva —el borde de arriba de la habitación más un dedo
   de aire— es el que vale mientras el guion no ha medido todavía o si
   no llega a medir nunca. Nunca se sale del cuarto y nunca tapa la
   cara: como mucho queda más alto de la cuenta.

   Se centra con «translate» y no con «transform» porque el transform
   ya está cogido: es el encogerse con el que entra cuando Reddie habla.
   Son dos propiedades distintas y se suman. */
.rd-casa__escena:not(.es-oraculo) .rd-casa__bocadillo {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: var(--rd-casa-globo-top, calc(var(--rd-casa-inicio, 0px) + var(--rd-space-4)));
	translate: calc(-50% - 0.5 * var(--rd-cajon-hueco, 0px)) 0;
	margin: 0;

	/* Nunca tan ancho como para meterse debajo del panel de cuidados ni
	   tan ancho como para que una frase corta se estire de lado a lado.

	   Se recorta por los dos lados aunque el panel esté solo en uno: el
	   bocadillo sale de la boca de Reddie, que está en el centro, y
	   descentrarlo para ganar dos palabras lo despegaría de ella. */
	width: max-content;
	max-width: min(340px, calc(100% - 2 * var(--rd-casa-panel-hueco)));
}

/* En el oráculo el bocadillo va arriba del todo, y Reddie le hace sitio.

   Aquí no hay habitación que medir ni cabeza que buscar: Reddie flota
   centrada en lo que le dejan el cajón y la cuenta atrás, así que su
   altura cambia con la pantalla y no hay una cuenta fija que valga.

   Así que se hace al revés que en Casa: el bocadillo se queda quieto
   arriba y es Reddie quien se aparta, porque la caja se reserva por
   arriba lo que mida el bocadillo. Esa medida la escribe «dice.js» en
   «--rd-casa-globo-alto» y vale cero cuando Reddie no está hablando.

   Puesto en el flujo, en una fila propia, encogía la caja de Reddie:
   medido en un teléfono de 320 por 568 con el templo abierto, a Reddie
   le quedaban nueve píxeles. Apartándola con el relleno se queda
   pequeña pero entera. */
.rd-casa__escena.es-oraculo .rd-casa__bocadillo {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: var(--rd-space-3);
	translate: calc(-50% - 0.5 * var(--rd-cajon-hueco, 0px)) 0;
	margin: 0;
	width: max-content;
	max-width: min(340px, calc(100% - 2 * var(--rd-casa-panel-hueco)));
}

/* AQUÍ SE COLOCABAN LA REDDIE QUE MEDITABA Y LA CUENTA ATRÁS, cada una
   en su fila de la rejilla, para que el bocadillo no le tapara la cara a
   una y el panel de cuidados no se comiera a la otra. Las dos se han ido
   con el oráculo y no queda nada que colocar. */

/* El panel, sobre la habitación y pegado a su borde derecho.

   Antes ocupaba su propia columna de la rejilla, fuera del cuarto. Ahora
   va colocado encima, así que cuando se abre un cajón y el cuarto se
   estrecha, el panel se corre con él.

   SE CUELGA DEL CENTRO Y NO DE LA CAJA DE LA HABITACIÓN, aunque lo que
   busca sea el borde del cuarto. El motivo es que esa caja recorta lo
   que se sale de ella —hace falta para que el cuarto llene la
   pantalla— y en el oráculo el panel es más alto que ella: dentro
   salía con los botones cortados.

   Así que el borde del cuarto se calcula: la caja se sale del centro
   por la derecha justo «--rd-cajon-hueco», que vale un espacio negativo
   cuando no hay cajón abierto y lo que ocupa el cajón cuando lo hay.
   Sumándole los dos espacios que el panel deja por dentro, sale lo
   mismo que cuando el panel vivía dentro, y sin recortes.

   Se centra a lo alto y no se estira: cuatro botones repartidos por un
   lateral de setecientos píxeles quedaban desperdigados. */
.rd-casa__panel {
	position: absolute;
	top: 50%;
	right: calc(2 * var(--rd-space-4) + var(--rd-cajon-hueco, calc(-1 * var(--rd-space-4))) + var(--rd-casa-panel-dentro));
	transform: translateY(-50%);
	z-index: 10;
	margin: 0;
	gap: var(--rd-space-3);
}

/* --- Con la ventana baja, los botones se quedan sin rótulo ---

   Los cuatro botones con su nombre miden 326 píxeles de alto. En una
   ventana de 460, a la escena le quedan 293: el panel se salía por
   abajo y el último botón —entonces el del oráculo, hoy «Decoración»,
   que son los mismos cuatro huecos— acababa detrás de la barra de
   secciones. Medido a 820×460.

   Sin los nombres miden 216 y caben con holgura. El corte en 520 es
   donde la cuenta deja de dar: 520 menos la barra de arriba y la de
   abajo son 353, que es lo justo para los 326 más su aire.

   El nombre no se pierde: sigue en el marcado para quien use lector de
   pantalla, solo que no se pinta. Es lo mismo que se hace en el móvil y
   por lo mismo. */
@media (max-height: 520px) {
	.rd-casa__btn-txt {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/*
	 * AQUÍ SE REBAJABA LA FRANJA DEL PANEL A 48 PÍXELES, y no era eso lo
	 * que pasaba.
	 *
	 * Quitar el rótulo baja el ALTO de los botones, no su ancho: en el
	 * ordenador siguen midiendo 68, que es lo que dice «.rd-casa__btn»
	 * unas páginas más arriba, y solo en el móvil pasan a 48 porque allí
	 * se les quita el ancho fijo. Medido con la ventana a 1024×500, a
	 * 1440×420 y a 820×460: el panel mide 68 en los tres.
	 *
	 * O sea que la franja reservada se quedaba veinte píxeles corta y lo
	 * que se coloca contra ella —la cuenta atrás y el bocadillo— se
	 * metía por debajo de los botones justo en las ventanas bajas. */
	.rd-casa__escena {
		--rd-casa-panel-hueco: calc(68px + 2 * var(--rd-space-4) + var(--rd-space-3) + var(--rd-casa-panel-dentro));
	}
}

/* --- Los botones se visten según la pared, no según el tema ---

   Están SOBRE el papel pintado, y el papel se cambia en la tienda. Lo
   que decide si van claros u oscuros no es el tema de la web —eso es el
   color de la página, que aquí no se ve— sino el papel que haya puesto.

   Quién lo mide: el plugin abre la imagen del papel, saca su claridad
   media y Casa pone «es-pared-clara» o «es-pared-oscura» en la escena.

   Sobre pared clara: círculo oscuro y letra oscura con halo claro.
   Sobre pared oscura: círculo claro y letra clara con halo oscuro.

   El halo es lo que salva los casos raros: un papel de rayas tiene zonas
   claras y oscuras a dos centímetros, y sin él la letra desaparece a
   trozos por mucho que se acierte con el color general. */

.rd-casa__escena:not(.es-oraculo) .rd-casa__btn-txt {
	font-weight: 600;
}

/* Pared clara: todo oscuro. */
.rd-casa__escena.es-pared-clara:not(.es-oraculo) .rd-casa__btn-txt {
	color: #2E2A26;
	text-shadow:
		0 1px 3px rgba(255, 255, 255, .95),
		0 -1px 3px rgba(255, 255, 255, .95),
		1px 0 3px rgba(255, 255, 255, .95),
		-1px 0 3px rgba(255, 255, 255, .95);
}

.rd-casa__escena.es-pared-clara:not(.es-oraculo) .rd-casa__btn-icono {
	background: rgba(46, 42, 38, .82);
	border-color: rgba(255, 255, 255, .45);
	color: #FFF6EF;
}

/* Pared oscura: todo claro. */
.rd-casa__escena.es-pared-oscura:not(.es-oraculo) .rd-casa__btn-txt {
	color: #FFF6EF;
	text-shadow:
		0 1px 3px rgba(20, 16, 14, .9),
		0 -1px 3px rgba(20, 16, 14, .9),
		1px 0 3px rgba(20, 16, 14, .9),
		-1px 0 3px rgba(20, 16, 14, .9);
}

.rd-casa__escena.es-pared-oscura:not(.es-oraculo) .rd-casa__btn-icono {
	background: rgba(255, 246, 239, .9);
	border-color: rgba(20, 16, 14, .35);
	color: #2E2A26;
}

/* El icono va del color del botón en los dos casos: es un trazo, no un
   dibujo, y hereda el color del texto de su caja. */
.rd-casa__escena:not(.es-oraculo) .rd-casa__btn-icono .rd-icon,
.rd-casa__escena:not(.es-oraculo) .rd-casa__btn-icono svg {
	color: inherit;
}

/* Y el que está abierto se marca con el color de Reddie, que se ve
   igual de bien sobre las dos. */
.rd-casa__escena:not(.es-oraculo) .rd-casa__btn.is-abierto .rd-casa__btn-icono {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: #FFF6EF;
}

/* --- La habitación ---

   Cruza las tres filas de arriba abajo y se sale por los lados con un
   margen negativo, que es justo el relleno que la escena pone para
   que el panel no quede pegado al borde. Así llega a los cuatro
   bordes de lo que hay bajo la barra de navegación.

   En el oráculo la caja sigue midiendo lo mismo aunque la habitación no
   se vea: es lo que le da al panel de cuidados un borde derecho contra
   el que colocarse, y lo que evita que caiga en fila debajo de Reddie. */
.rd-casa__reddie-caja {
	grid-row: 1 / -1;
	grid-column: 1;
	justify-self: stretch;
	align-self: stretch;
	display: block;
	width: auto;

	/* Por la izquierda siempre se sale hasta el borde. Por la derecha
	   depende de si hay un cajón abierto, y de eso se ocupa la variable
	   de más abajo: cerrada vale lo mismo que la izquierda, y con el
	   cajón abierto vale lo que ocupa el cajón. */
	margin-left: calc(-1 * var(--rd-space-4));
	margin-right: var(--rd-cajon-hueco, calc(-1 * var(--rd-space-4)));
	z-index: 0;

	/* Lo que sobresalga del cuarto se recorta aquí. Hace falta para lo
	   de justo debajo: el visor se hace más ancho que la caja para que
	   la habitación llene la pantalla. */
	overflow: hidden;

	/* Y la caja se declara «contenedor de tamaño» para que sus hijos
	   puedan medirse contra ella con «cqh». Es lo que permite escribir
	   el ancho del visor en función del alto de la caja, que es una
	   cuenta que el CSS normal no sabe hacer. */
	container-type: size;
}

/* --- La habitación llena la pantalla, sin franjas ---

   EL PROBLEMA. En el móvil quedaban dos franjas de fondo rosa, una
   encima del cuarto y otra debajo, y la de abajo era la mayor. No es
   que la caja no llegue hasta el borde: es que el DIBUJO no llena la
   caja. El visor no deforma la escena, así que en una caja estrecha
   abre el ángulo de la cámara para que el cuarto quepa a lo ancho, y
   entonces sobra alto por arriba y por abajo. Medido en un teléfono de
   375 por 812: caja de 652 de alto y dibujo de 488, con 36 píxeles de
   franja arriba y 128 abajo.

   POR QUÉ NO VALE ESTIRARLO. Darle más alto al visor no llena nada:
   sigue dibujando el cuarto con sus proporciones dentro de la caja.

   LO QUE SÍ FUNCIONA es lo mismo que hace «object-fit: cover» con una
   foto: se le da al visor MÁS ANCHO del que se ve y lo que sobra por
   los lados se recorta con el «overflow» de la caja. Con más ancho, el
   visor cierra el ángulo, el cuarto se dibuja más grande y llega arriba
   y abajo.

   POR QUÉ TAN ANCHO COMO ALTO. Es la medida a partir de la cual el
   dibujo tapa la caja entera, con un poco de margen. Comprobado en
   pantalla con la caja a 641 de alto: con el visor a 493 de ancho
   quedaban 60 píxeles de franja abajo; a 551 quedaban 30; a 602 se
   cerraba justo, y a 641 llena de sobra. Lo que se pierde por los lados
   es el trozo de pared más cercano a la cámara —en un teléfono normal,
   poco más de un tercio a cada lado— y la habitación se sigue leyendo
   como una habitación: se ven el techo con la lámpara, la estantería,
   el cuadro, la alfombra y las dos paredes.

   En el ordenador la caja ya es más ancha que alta, así que «max» se
   queda con el 100 % y aquí no cambia nada.

   SI EL NAVEGADOR NO ENTIENDE «cqh» —los anteriores a 2022— la
   declaración entera se descarta y queda la de arriba, el 100 % de
   siempre: vuelven las franjas, pero no se rompe nada, y «dice.js»
   sigue colocando el bocadillo dentro del cuarto. */
.rd-casa__reddie--3d {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	width: 100%;
	width: max(100%, 100cqh);
	height: 100%;
	max-width: none;
}

/* --- Y AQUÍ ESTABA LA EXCEPCIÓN DEL ORÁCULO, QUE YA NO HACE FALTA ---

   Decía que con el oráculo abierto la habitación volviera al 100 % de
   ancho, o sea que CUPIERA en vez de llenar. Tenía su motivo: el cajón
   del oráculo se llevaba media pantalla, la caja de la habitación se
   quedaba estrecha y alta —434 de ancho por 524 de alto a 1024×768— y
   entonces el «max(100%, 100cqh)» de aquí arriba le pedía al visor 524
   de ancho y se salía 45 píxeles por cada lado. Lo que se recortaba
   ahí no era pared: era Reddie, cortada por la mitad y con las orejas
   asomando por arriba.

   Con el libro no puede volver a pasar, y por eso se quita en vez de
   dejarla dormida: el libro se pone POR ENCIMA de la habitación y no
   le quita ni un píxel de ancho. La caja del cuarto sigue siendo la
   pantalla entera menos la cabecera, o sea más ancha que alta, y en
   una caja apaisada «llenar» y «caber» quieren decir lo mismo. Ya no
   hay ningún momento en toda la pantalla en el que la caja se quede
   estrecha y alta.

   Y dejarla habría sido peor que inútil: era la única regla capaz de
   hacer que la habitación NO llene la pantalla, que es justo lo que se
   ha pedido dos veces que no pase. */

/* --- Con un cajón abierto ---

   Reddie tiene que seguir a la vista: el cajón se abre para darle de
   comer, y no se le puede dar de comer a alguien que está debajo del
   cajón.

   Antes la habitación se alargaba por la derecha justo lo que ocupa el
   cajón y se corría ese mismo trecho: seguía llegando a los cuatro
   bordes y el sobrante quedaba escondido debajo. Funcionaba, pero el
   cajón salía encima de la habitación, y una habitación medio tapada
   se lee como una ventana rota, no como una habitación.

   Ahora la habitación no llega hasta ahí: se recoge por la derecha y
   deja libre el trecho del cajón más un dedo de aire. El cajón se abre
   AL LADO, no encima, y entre los dos queda una separación que enseña
   que son dos cosas distintas.

   El recogerse va con transición: de golpe parece un salto de la
   página, y con la transición se lee como que la habitación le hace
   sitio al cajón. */
@media (min-width: 768px) {
	.rd-casa__reddie-caja {
		transition: margin-right 320ms cubic-bezier(.4, 0, .2, 1);
	}

	.rd-casa__escena.tiene-cajon {
		/* Lo que ocupa el lado derecho: el cajón, el aire que lo separa
		   de la habitación y el aire que ahora lo separa también del
		   borde de la pantalla.

		   Antes se le sumaban los 96 del panel de botones, que estaba
		   fuera. Ya no: el panel vive dentro de la habitación, así que se
		   estrecha con ella y no hay que reservarle nada. Dejar los 96
		   dejaba una franja de fondo vacía entre el cuarto y el cajón.

		   Son DOS huecos y no uno porque el cajón ya no está pegado al
		   borde: uno a cada lado suyo. */
		--rd-cajon-hueco: calc(2 * var(--rd-space-4) + min(420px, 38vw));
	}

	/*
	 * Y el bocadillo, con Reddie.
	 *
	 * Se corre la mitad del hueco —él va centrado, no estirado— y se le
	 * pone de tope lo que queda libre, para que una frase larga no se
	 * meta por debajo del cajón. El correrse ya está escrito arriba, en
	 * el «translate» que lo centra; aquí solo se le pone la transición
	 * para que acompañe a la habitación mientras se recoge.
	 */
	.rd-casa__escena.tiene-cajon .rd-casa__bocadillo {
		/* Lo que queda de cuarto: la ventana menos lo que se lleva el
		   cajón por la derecha y menos el aire de la izquierda. De ahí se
		   descuentan los dos lados del panel de cuidados y un respiro,
		   que es lo que faltaba: sin él, medido a 900 de ancho, el
		   bocadillo llegaba cuatro píxeles por debajo de los botones. */
		max-width: min(
			340px,
			calc(100vw - var(--rd-cajon-hueco) - 2 * var(--rd-casa-panel-hueco) - 2 * var(--rd-space-4))
		);
		transition: translate 320ms cubic-bezier(.4, 0, .2, 1);
	}
}

/* De 900 para arriba el cajón es más ancho, así que el hueco es otro. */
@media (min-width: 900px) {
	.rd-casa__escena.tiene-cajon {
		--rd-cajon-hueco: calc(2 * var(--rd-space-4) + min(500px, 42vw));
	}
}

/* ==========================================================
   El escenario del templo, en el ordenador
   ==========================================================
   TRES COSAS SE PISABAN Y LAS TRES SON EL MISMO FALLO: en el templo, lo
   que se ve a la izquierda no sabía del todo qué se lleva la derecha.

   La derecha se lleva dos cosas: el cajón del oráculo, con su aire a
   cada lado, y la franja donde flotan los cuatro botones de cuidados.
   Sumadas son «--rd-casa-templo-hueco», que se declara arriba del todo
   con la escena. Lo de la izquierda —Reddie meditando, la cuenta atrás
   con su reloj y el bocadillo— tiene que caber en lo que queda, y los
   tres se centran en ESE trozo, no en la pantalla entera. Centrarse en
   trozos distintos era lo que los descuadraba entre sí.

   Lo que se veía, medido con el mensaje del día en pantalla:

   - EL CAJÓN TAPABA EL RELOJ en todos los tamaños de ordenador, de 169
     a 204 píxeles de ancho por 26 a 73 de alto. En 900×700 y en
     1024×768 el centro de la casilla de los segundos ni siquiera
     respondía: quien contestaba era la lista de oráculos guardados, que
     va por encima. La cuenta atrás descontaba la franja del panel por
     los dos lados y del cajón no sabía nada.
   - EL CAJÓN CORTABA LA FRASE «Tu oráculo de hoy está aquí…», entre 56
     y 204 píxeles, por lo mismo.
   - EL PANEL SE PONÍA ENCIMA DE REDDIE: en 768×1024 le pisaba 32 por
     291 píxeles —«Comida» detrás de la oreja y los botones sobre la
     pata—. Reddie se centraba en la habitación entera, y los botones
     están dentro de ella pegados a su borde derecho.
   - EL PANEL SE PONÍA ENCIMA DEL RELOJ en las ventanas bajas —68 por 34
     en 768×600, 820×600 y 899×600— porque el panel se corre a la
     izquierda con el cajón y la cuenta atrás se quedaba quieta en el
     centro de la pantalla.

   NO VALÍA arreglarlo descontando la franja del panel por los dos lados
   de la cuenta atrás, que es lo que hace el bocadillo. Con el cajón
   abierto y la ventana a 768, a la cuenta atrás le quedaban 188 píxeles
   y el reloj necesita 244 —tres casillas de 76 y dos huecos de 8—: se
   habría salido por los dos lados y habría vuelto a tocar los botones.
   Corriéndola con la habitación cabe de sobra: 316 de sitio para 244.

   Todo esto es solo de 768 para arriba. Por debajo, el cajón se abre en
   su propia fila encima de Reddie y no hay nada a la derecha de nadie;
   y con el mensaje del día en pantalla, la cuenta atrás y el panel se
   esconden, que es lo que se decidió más arriba.
   ========================================================== */

@media (min-width: 768px) {
	/* Reddie medita en lo que queda de habitación, no en la habitación
	   entera. Es la misma cuenta que ya hace la caja para apartarse del
	   cajón, sumándole ahora la franja de los botones.

	   Se le pone a la CAJA y no al dibujo porque de la caja cuelgan
	   también la sombra de los pies y el recorte: moviendo la caja se
	   mueve todo junto, y Reddie sigue centrada en su sitio en vez de
	   quedarse igual de grande y descentrada. */
	.rd-casa__escena.es-oraculo .rd-casa__reddie-caja {
		margin-right: var(--rd-casa-templo-hueco);

		/*
		 * Y EN EL TEMPLO SE APARTA DE GOLPE, SIN DESLIZARSE.
		 *
		 * La caja lleva una transición de 320 milisegundos en el margen
		 * de la derecha. En Casa está bien: la caja ES la habitación, se
		 * ve, y recogerse poco a poco se lee como que le hace sitio al
		 * cajón.
		 *
		 * En el templo no hay habitación —el visor está oculto— y lo
		 * único que se mueve es el dibujo de Reddie. Así que durante esos
		 * 320 milisegundos Reddie no «se recoge»: cruza por debajo de los
		 * cuatro botones de cuidados y del propio cajón, que ya están en
		 * su sitio desde el primer fotograma porque ellos no van con
		 * transición. Es exactamente lo que se veía —«Comida» detrás de
		 * la oreja y los botones sobre la pata—, solo que dura un
		 * suspiro.
		 *
		 * Medido con el mensaje del día en pantalla y el cajón recién
		 * abierto: el dibujo pisaba los botones 68 píxeles de ancho por
		 * hasta 323 de alto, y al cajón hasta 70 por 389. Con el margen
		 * puesto de una vez, Reddie aparece ya centrada en el trozo que
		 * le queda y no pisa nada en ningún momento.
		 *
		 * Solo se quita aquí, con «es-oraculo». Al cerrar el cajón la
		 * clase se va y la habitación vuelve a abrirse deslizándose, que
		 * es lo que se quería.
		 */
		transition: none;
	}

	/* Y el bocadillo, sobre el mismo eje.
	 *
	 * Ya se corría con el cajón, pero no con el panel, y por eso en
	 * 820×520 su borde derecho acababa dos décimas de píxel por debajo
	 * del primer botón. Ahora se corre con los dos, que es lo que lo
	 * deja encima de la cabeza de Reddie y no medio palmo a su derecha.
	 *
	 * Se corre la mitad del hueco porque va centrado, no estirado, que es
	 * lo mismo que ya hacía con el cajón solo. Y queda en el mismo eje
	 * que la cuenta atrás, ocho píxeles a la derecha del de Reddie y por
	 * el mismo motivo que allí: es texto, y no se pega al filo.
	 *
	 * Solo en el templo: en Casa el bocadillo se cuelga de la cabeza de
	 * la Reddie de tres dimensiones, que no se ha movido de sitio. */
	.rd-casa__escena.es-oraculo .rd-casa__bocadillo {
		translate: calc(-50% - 0.5 * var(--rd-casa-templo-hueco)) 0;
		max-width: min(340px, calc(100% - var(--rd-casa-templo-hueco)));
	}
}

/* --- Lo que va dentro de la habitación, centrado ---

   La Reddie plana de respaldo, la que medita y la capa de manchas
   siguen midiendo lo de siempre: no crecen con la habitación porque
   son dibujos, y estirados se verían borrosos. Se quedan en medio,
   que es donde el modelo dibuja a Reddie.

   Se centran con «margin: auto» y no moviéndolos, porque al frotar
   con el jabón Reddie se menea, y eso es un movimiento: uno pisaría
   al otro y el dibujo se iría de sitio a cada temblor.

   Aquí iba también la Reddie que meditaba, y se ha ido con el oráculo. */
.rd-casa__reddie--plana,
.rd-casa__manchas {
	position: absolute;
	inset: 0;
	margin: auto;
	width: calc(var(--rd-reddie-alto) * 3 / 4);
	height: var(--rd-reddie-alto);

	/* Y nunca más grande que su caja. En un teléfono bajo con el oráculo
	   del día abierto, al cuarto le quedan cuatro dedos de alto: sin este
	   tope, Reddie se salía por arriba y por abajo y el recorte de la
	   caja la dejaba sin cabeza y sin pies. Encogida entera se ve
	   pequeña, que es mucho mejor que se ve partida. El dibujo de dentro
	   se ajusta solo, que ya va con «object-fit: contain». */
	max-height: 100%;
	max-width: 100%;
}

/* En el oráculo, la caja de Reddie NO cruza las tres filas.

   En Casa sí: es la habitación y tiene que llegar a los cuatro bordes.
   Aquí no hay habitación, y cruzándolas Reddie quedaba centrada en toda
   la escena, o sea encima de la cuenta atrás. En la fila de en medio se
   centra en lo que queda por encima del reloj, que es su sitio. */
.rd-casa__escena.es-oraculo .rd-casa__reddie-caja {
	grid-row: 2;
}

/* --- Dónde hay que soltar la comida y el jabón ---

   Es una casilla invisible del tamaño de Reddie. Antes ese sitio lo
   marcaba la propia caja, pero la caja es ahora la habitación entera
   y sin esto valdría soltar el kiwi en el techo.

   Va en porcentaje del alto de la habitación y no en píxeles porque
   Reddie se dibuja siempre ocupando la misma parte del encuadre: si
   la ventana crece, Reddie crece con ella y la casilla también. */
.rd-casa__diana {
	position: absolute;
	left: 50%;

	/* Reddie no sale en el centro del cuadro, sino más abajo: la cámara
	   mira a la altura de la estantería para que se vea la habitación
	   entera. El 66 es donde le queda la barriga. */
	top: 66%;
	transform: translate(-50%, -50%);
	height: 42%;
	aspect-ratio: 3 / 4;
	pointer-events: none;
}

/* Sin habitación no hay encuadre del que sacar proporciones: la
   casilla vuelve a medir y a colocarse como la Reddie plana, que va
   centrada. */
.rd-casa__reddie-caja:has(.rd-casa__reddie--3d[hidden]) .rd-casa__diana {
	top: 50%;
	height: var(--rd-reddie-alto);
}

@media (max-width: 767px) {
	/* En el móvil el cajón se abre en su propia fila, encima, así que la
	   habitación no puede cruzar la pantalla entera: se queda con la fila
	   que le toca, que es la que sobra después de él.

	   El oráculo va igual. Estuvo al revés —Reddie arriba y la lista
	   debajo— y era justo lo que rompía la pantalla: la escena de Reddie
	   caía en una fila «auto», así que su caja no tenía alto contra el
	   que medirse y todo lo de dentro se apilaba hasta salirse por
	   abajo. En la fila que se lleva lo que sobra, la caja tiene un alto
	   de verdad y la cuenta atrás cabe siempre. */
	.rd-casa__centro {
		grid-row: 2;
		grid-column: 1;
	}

	/* Sigue dentro de la habitación, pegado a su derecha. Antes volvía a
	   la primera fila de la rejilla, que es donde estaba la barra.

	   Aquí los botones no llevan rótulo, así que ocupan lo que mide el
	   círculo: 48 en vez de 68. */
	.rd-casa__escena {
		/* En el móvil se mete menos: el cuarto es estrecho y cada
		   milímetro de pared que se le quita al panel se lo quita también
		   al bocadillo, que se coloca contra su franja. */
		--rd-casa-panel-dentro: var(--rd-space-4);
		--rd-casa-panel-hueco: calc(48px + 2 * var(--rd-space-3) + var(--rd-space-2) + var(--rd-casa-panel-dentro));
	}

	.rd-casa__panel {
		right: calc(2 * var(--rd-space-3) + var(--rd-cajon-hueco, calc(-1 * var(--rd-space-4))) + var(--rd-casa-panel-dentro));
	}
}

/* --- Donde la barra de botones va abajo ---

   Es decir, de 899 para abajo: el móvil y la tableta. Aquí la barra de
   secciones es fija y se pega al pie de la ventana, así que la Casa
   tiene que dejarle su hueco: si no, la habitación se mete por debajo
   y la barra le tapa el suelo y los botones de cuidados. */
@media (max-width: 899px) {
	/*
	 * LA HABITACIÓN SIGUE POR DEBAJO DE LA BARRA, hasta el filo.
	 *
	 * Aquí se le reservaba a la barra su hueco, y la habitación se
	 * paraba justo encima. Quedaba correcto pero dejaba una franja que
	 * NO es habitación en la parte de abajo de la pantalla, y Alba lo
	 * pidió al revés y en mayúsculas: fuera de la habitación solo se ve
	 * el header. La barra de apartados no es el header.
	 *
	 * Así que el cuarto llega al borde de abajo y la barra flota encima,
	 * como flotan ya el panel de cuidados y el libro. La barra tiene su
	 * propio fondo, así que se sigue leyendo igual de bien.
	 *
	 * LO QUE HAY QUE VIGILAR, y por eso esto no es solo borrar una
	 * línea: lo que quede debajo de la barra deja de poder pulsarse. El
	 * panel de cuidados va centrado a lo alto y le sobra sitio, pero el
	 * libro se apoya en el suelo y sí caía justo ahí; se sube en su
	 * propia regla, más abajo.
	 *
	 * «--rd-casa-barra» lo sigue midiendo «dice.js» y sigue haciendo
	 * falta: es lo que usa el libro para apartarse.
	 */
	body .rd-app__main.rd-casa {
		padding-bottom: 0;
	}

	/*
	 * Y LA BARRA DE APARTADOS SE VUELVE CRISTAL, solo en Casa.
	 *
	 * Con lo de arriba la habitación ya llegaba al filo de abajo, pero
	 * no se notaba nada: la barra tiene su fondo crema OPACO, así que
	 * seguía leyéndose exactamente igual que antes —una franja que no es
	 * habitación—. El cuarto estaba detrás; no se veía.
	 *
	 * Así que la barra se queda, porque hace falta para moverse por la
	 * web, pero deja pasar la habitación: un velo del color de siempre
	 * al 82 % y un desenfoque detrás. Es el mismo recurso que ya usan
	 * las pestañas de Comunidad, no un invento nuevo.
	 *
	 * POR QUÉ 65 Y NO MÁS NI MENOS. Encima van cinco nombres de once
	 * píxeles, que piden 4,5 a uno, y debajo puede haber cualquier
	 * habitación. Medido el rótulo apagado contra los suelos, alfombras
	 * y objetos DE VERDAD de la tienda —no contra colores inventados—,
	 * el 65 % deja el peor caso en 4,98 y los suelos entre 5,6 y 6,2.
	 * Al 60 % el peor cae a 4,53, que pasa pero sin margen para una
	 * pieza futura más oscura; al 82 % se lee de sobra pero la
	 * habitación casi no se ve por debajo, que era justo el problema.
	 *
	 * El desenfoque es de 14 y no de 10 por lo mismo: cuanto más se
	 * emborrona lo de detrás, menos posibilidades hay de que una raya
	 * oscura del suelo caiga justo debajo de una letra.
	 *
	 * SOLO EN CASA. Fuera de aquí no hay habitación detrás, hay una
	 * lista o un calendario: una barra translúcida sobre texto que
	 * pasa por debajo es peor, no mejor. «rd-screen--casa» lo pone
	 * «reddie_body_classes» en PHP, así que llega con la página y no
	 * hay parpadeo.
	 *
	 * Y LA RAYA DE ARRIBA SE VA. Una línea a todo lo ancho es
	 * justamente lo que dibuja «aquí se acaba la habitación». En su
	 * lugar, una sombra suave hacia arriba: separa la barra del cuarto
	 * sin cortarlo.
	 */
	@supports (
		(backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))
	) and (background: color-mix(in srgb, white 65%, transparent)) {
		.rd-screen--casa .rd-nav__sections {
			background: color-mix(in srgb, var(--rd-surface) 65%, transparent);
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			border-top: 0;
			box-shadow: 0 -6px 18px rgba(60, 40, 30, 0.10);
		}

		/*
		 * DE NOCHE, EL VELO SE HACE CON OTRO COLOR Y ES MÁS ESPESO.
		 *
		 * Y hay dos motivos, los dos medidos:
		 *
		 * 1. «--rd-surface» de noche YA ES TRANSLÚCIDO —un azul al 88 %—,
		 *    así que rebajarlo al 65 % dejaba el velo en un 57 % de
		 *    verdad. «--rd-bg» es macizo en los seis fondos, así que el
		 *    número que se escribe es el número que sale.
		 *
		 * 2. De noche el rótulo es CLARO, así que lo que le hace daño no
		 *    es un suelo oscuro sino uno claro. El peor caso cambia de
		 *    lado: con la baldosa blanca, el velo del 57 % dejaba el
		 *    rótulo en 2,93 a uno, muy por debajo del 4,5. Con
		 *    «--rd-bg» al 75 % sube por encima de 5 en los cinco suelos
		 *    y alfombras de la tienda.
		 *
		 * Sigue viéndose la habitación por debajo: una cuarta parte, que
		 * de noche es justo lo que se quiere —el tema Calma está para no
		 * deslumbrar— y sigue sin haber ninguna franja que no sea
		 * habitación.
		 */
		/*
		 * LAS DOS CLASES VAN JUNTAS, SIN ESPACIO ENTRE ELLAS. Las pone
		 * las dos «reddie_body_classes» en el MISMO body, así que
		 * «.rd-oscuro .rd-screen--casa» —con espacio— pide que una sea
		 * hija de la otra y no encuentra nada. Escrito así no se
		 * aplicaba y de noche seguía el velo claro; se vio midiendo el
		 * color de la barra, que salía tal cual el de día.
		 */
		.rd-screen--casa.rd-oscuro .rd-nav__sections {
			background: color-mix(in srgb, var(--rd-bg) 75%, transparent);
			box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.22);
		}
	}
}

/* ==========================================================
   Los botones, colgados de la pared
   ==========================================================
   Estaban pegados al filo de la pantalla y se leían como una barra de
   herramientas puesta AL LADO de la habitación, no dentro. Alba lo dijo
   así: quiere que todo sea la habitación, y que el panel se vea dentro.

   Son dos cosas, y hacen falta las dos:

   - METERLOS HACIA DENTRO. Lo hace «--rd-casa-panel-dentro», arriba del
     todo con la escena. Con pared a los dos lados del botón, ya no
     parece que estén enganchados al borde del monitor.
   - QUE ECHEN SOMBRA SOBRE EL PAPEL. Es lo que de verdad convierte un
     círculo dibujado encima de una foto en un objeto que está delante
     de una pared. Sin sombra, por muy adentro que se metan, siguen
     leyéndose como pegatinas.

   La sombra cae hacia abajo y un poco a la derecha, que es hacia donde
   caen todas las de este cuarto: la lámpara está en el techo, algo a la
   izquierda del centro.

   Solo en Casa. En el templo no hay pared contra la que echar sombra:
   ahí el panel flota sobre el fondo de la aplicación y una sombra
   marcada lo despegaría de un fondo que no existe. */
.rd-casa__escena:not(.es-oraculo) .rd-casa__btn-icono {
	box-shadow:
		0 5px 12px rgba(38, 24, 16, .30),
		0 1px 3px rgba(38, 24, 16, .26);
	transition:
		background var(--rd-transition),
		border-color var(--rd-transition),
		box-shadow var(--rd-transition),
		translate var(--rd-transition);
}

/* Y al acercarse, se separan un poco más de la pared.
   Es el gesto de «esto se puede coger»: la sombra crece y el botón
   sube. Dos píxeles bastan; más y parece que se cae. */
.rd-casa__escena:not(.es-oraculo) .rd-casa__btn:hover .rd-casa__btn-icono,
.rd-casa__escena:not(.es-oraculo) .rd-casa__btn:focus-visible .rd-casa__btn-icono {
	translate: 0 -2px;
	box-shadow:
		0 9px 18px rgba(38, 24, 16, .34),
		0 1px 3px rgba(38, 24, 16, .26);
}

@media (prefers-reduced-motion: reduce) {
	/* Quien pide menos movimiento sigue necesitando saber qué botón
	   tiene debajo del dedo: la sombra crece, el salto no. */
	.rd-casa__escena:not(.es-oraculo) .rd-casa__btn-icono {
		transition: background var(--rd-transition), border-color var(--rd-transition);
	}

	.rd-casa__escena:not(.es-oraculo) .rd-casa__btn:hover .rd-casa__btn-icono,
	.rd-casa__escena:not(.es-oraculo) .rd-casa__btn:focus-visible .rd-casa__btn-icono {
		translate: none;
	}
}

/* ==========================================================
   El libro del Reddie consejo
   ==========================================================
   ESTE ES EL DIBUJO PROVISIONAL. Alba pasará el suyo más adelante; el
   día que llegue se borra este bloque entero —de aquí hasta donde lo
   dice el comentario de abajo— y se le da tamaño a su imagen dentro de
   «.rd-casa__libro-cuerpo». Lo demás —dónde se coloca, el punto de sin
   leer, el foco, el blanco para el dedo— es del BOTÓN y no del dibujo,
   así que se queda.

   El libro está hecho con cuatro caras y una perspectiva: la tapa, el
   canto de las hojas, el lomo y una cinta de marcapáginas. Girado
   veinticuatro grados se ven la tapa y el lomo a la vez, que es lo que
   hace que se lea como un libro y no como un rectángulo rojo.

   DÓNDE VA. Abajo a la izquierda, apoyado en el suelo, justo en el
   espejo del panel de cuidados. Ahí no estorba: Reddie ocupa el centro
   —la casilla donde se le suelta la comida va del 50 % menos un palmo
   al 50 % más un palmo— y de las siete cosas que se decoran, la única
   que pasa por esa esquina es el suelo, que es enorme y sigue
   pudiéndose pulsar por todas partes.

   Los colores NO son los del tema. Son fijos, como los de los botones
   de cuidados y por el mismo motivo: esto está sobre la pared del
   cuarto, y la pared no cambia cuando se pone Calma. Un libro que se
   volviera naranja claro de noche sería un libro distinto cada día. */
.rd-casa__libro {
	position: absolute;

	/* En el espejo del panel: el mismo trecho de pared por dentro. Por
	   la izquierda el cuarto no se mueve al abrir un cajón —quien se
	   recoge es el borde derecho—, así que aquí no hay que descontar
	   nada. */
	left: calc(var(--rd-space-4) + var(--rd-casa-panel-dentro));

	/* Apoyado en el suelo, no flotando.
	   El suelo del cuarto ocupa la franja de abajo, y en la esquina de
	   la izquierda empieza más o menos a un veinteavo del alto: puesto
	   más arriba, el libro se queda colgado a media pared. El «clamp» es
	   para que en una ventana muy alta no se vaya al centro del cuarto y
	   en una muy baja no se meta debajo de la barra de secciones.

	   Y SE LE SUMA LO QUE MIDA LA BARRA DE APARTADOS. Desde que el
	   cuarto llega hasta el filo de abajo, la barra flota encima, y lo
	   que queda debajo de ella no se puede pulsar. El libro se apoyaba
	   justo ahí: se veía y no se abría. De 900 para arriba la barra está
	   arriba y la variable vale cero, así que allí no cambia nada. */
	/* 26-08-2026: SE SUBE UN POCO. Estaba en un 5 % y quedaba metido en
	   la esquina, casi tocando el filo de abajo; Alba lo pidió «un pelín
	   más arriba». Con un 10 % se apoya igual en el suelo del cuarto
	   —que ocupa toda la franja de abajo— pero se le ve el aire por
	   debajo, como a un libro apoyado en la pared y no caído. */
	bottom: calc(clamp(20px, 10%, 100px) + var(--rd-casa-barra, 0px));

	/* Por encima de la habitación, como el panel. */
	z-index: 10;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);

	/* La perspectiva va en el botón y no en el libro: es la cámara con
	   la que se mira, y tiene que estar en quien contiene la escena. Un
	   número pequeño exagera el efecto; 260 da una perspectiva de
	   fotografía, no de dibujo animado. */
	perspective: 260px;
}

/* LA ZONA QUE RESPONDE AL DEDO, más grande que el dibujo.
 *
 * Alba, 28-08-2026: «no se abre el Reddie consejo». Y no se abría porque
 * el libro MIDE 34 x 46 PÍXELES. Un dedo apunta con menos precisión que
 * eso —lo aceptado son 44 por lado—, así que media de cada dos veces el
 * toque caía fuera y lo recogía la habitación, que está justo debajo y
 * responde girando. Desde fuera se ve como «le doy al libro y no pasa
 * nada»; lo que pasa es que la habitación gira un grado y no se nota.
 *
 * Se agranda con un rectángulo invisible y no con relleno: el relleno
 * movería el libro de sitio, y está apoyado en el suelo del cuarto a
 * propósito. Así el dibujo se queda donde está y lo que crece es la
 * zona sensible, hasta 58 x 66. */
.rd-casa__libro::after {
	content: "";
	position: absolute;
	inset: -10px -12px;
}

/* El blanco para el dedo, sin agrandar el dibujo.
   El libro mide 44 por 58, o sea que a lo ancho se queda por debajo de
   los 44 píxeles que pide un dedo. En vez de dibujar un libro más
   grande —que taparía más cuarto— se le pone un blanco invisible
   alrededor, que es lo que se pulsa. */
.rd-casa__libro::before {
	content: "";
	position: absolute;
	inset: -8px -12px;
}

.rd-casa__libro-cuerpo {
	position: relative;
	display: block;
	width: 44px;
	height: 58px;

	/* Sin esto las cuatro caras se aplastan contra el mismo plano y el
	   libro se ve de frente, como una carta. */
	transform-style: preserve-3d;

	/* Girado hacia la izquierda para que se vea el lomo, e inclinado un
	   pelo hacia atrás para que se le vea el canto de arriba. Un libro
	   del que solo se ve la tapa no se distingue de una tarjeta. */
	transform: rotateY(24deg) rotateX(6deg);
	transition: transform var(--rd-transition);
}

/* LOS SALTITOS DE «HAY UNO SIN LEER».
 *
 * Dos saltos y un descanso, en bucle. Dos y no uno: uno solo se lee
 * como un tropiezo, y dos seguidos se leen como que algo llama. Y con
 * descanso largo porque esto se queda dando saltos hasta que se abra el
 * libro: sin la pausa, un cuarto con algo botando sin parar cansa a los
 * dos minutos.
 *
 * VA EN «translate» Y NO EN «transform», y esa es la parte que importa:
 * el cuerpo del libro ya usa «transform» para su pose de tres
 * dimensiones —girado y algo inclinado— y para el gesto de al pasar por
 * encima. Metiendo el salto ahí habría que repetir la pose en cada
 * fotograma y el gesto del ratón se pelearía con el salto. «translate»
 * es una propiedad aparte que se compone con la otra, así que el libro
 * salta SIN dejar de estar girado y sin estorbar al hover. */
@keyframes rd-libro-salta {
	0%, 46%, 100% { translate: 0 0; }
	8%            { translate: 0 -7px; }
	18%           { translate: 0 0; }
	27%           { translate: 0 -4px; }
	36%           { translate: 0 0; }
}

.rd-casa__libro.es-nuevo .rd-casa__libro-cuerpo {
	animation: rd-libro-salta 2.4s ease-in-out infinite;
}

/* Al acercarse, el libro se abre un poco: se gira hacia quien mira,
   como si fuera a cogerlo. Es lo que dice «esto se pulsa». */
.rd-casa__libro:hover .rd-casa__libro-cuerpo,
.rd-casa__libro:focus-visible .rd-casa__libro-cuerpo {
	transform: rotateY(32deg) rotateX(6deg) translateY(-3px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.rd-casa__libro-cuerpo,
	.rd-casa__libro:hover .rd-casa__libro-cuerpo,
	.rd-casa__libro:focus-visible .rd-casa__libro-cuerpo {
		transition: none;
		transform: rotateY(24deg) rotateX(6deg);
	}

	/* Y sin saltos: quien pide menos movimiento lo pide sobre todo por
	   esto, por lo que se mueve solo y en bucle. El punto de la esquina
	   sigue ahí y sigue diciendo lo mismo. */
	.rd-casa__libro.es-nuevo .rd-casa__libro-cuerpo {
		animation: none;
		translate: none;
	}
}

/* La tapa, el lomo y las hojas comparten la forma. */
.rd-casa__libro-tapa,
.rd-casa__libro-hojas,
.rd-casa__libro-lomo {
	position: absolute;
	display: block;
}

/* LA TAPA. Va la primera de todas, la más cerca de quien mira. */
.rd-casa__libro-tapa {
	inset: 0;
	transform: translateZ(6px);
	background: #B24A2C;
	border-radius: 2px 5px 5px 2px;

	/* Un filete claro por dentro, como el hilo dorado de una tapa —es
	   lo que le da al rectángulo pinta de libro encuadernado— y una
	   sombra por fuera, que es la que echa contra el papel de la pared.
	   Cae hacia abajo y a la derecha, como todas las de este cuarto: la
	   lámpara está en el techo, algo a la izquierda. */
	box-shadow:
		inset 0 0 0 1px rgba(255, 246, 239, .28),
		inset 3px 0 0 -1px rgba(0, 0, 0, .22),
		5px 7px 13px rgba(38, 24, 16, .32);
}

/* EL CANTO DE LAS HOJAS. Un poco más pequeño que la tapa y un poco más
   atrás, así asoma por arriba, por abajo y por el lado de fuera: es lo
   que se ve de las hojas en un libro cerrado. */
.rd-casa__libro-hojas {
	/* Asoma tres píxeles por el lado de fuera: es lo que se ve de las
	   hojas en un libro cerrado. Con uno solo no se distinguía y el
	   libro parecía un bloque macizo. */
	top: 1.5px;
	bottom: 1.5px;
	left: 4px;
	right: -3px;
	transform: translateZ(3px);
	background: #FFF6EF;
	border-radius: 0 3px 3px 0;

	/* Las rayitas de las hojas, muy tenues: de cerca se ven las páginas
	   y de lejos es un canto crema. */
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(120, 84, 62, .22) 0 1px,
		transparent 1px 3px
	);

	/* Y una línea oscura en el filo de fuera.
	   MEDIDO EN PANTALLA: el canto crema contra el papel de bambú daba
	   1,44 a 1, o sea que por ese lado el libro no tenía borde: se
	   fundía con la pared. Es el lado por el que se ve el libro entero,
	   así que hace falta que se distinga. Con la línea, ese filo pasa a
	   ser la propia madera de la tapa, que contra el papel da 6,66 a 1. */
	box-shadow: inset -1.5px 0 0 rgba(110, 44, 25, .9);
}

/* EL LOMO. Es la cara que se ve al girar el libro, pegada por el borde
   de la izquierda y doblada hacia atrás. Los seis píxeles de ancho son
   el grosor del libro, el mismo que separa la tapa del fondo. */
.rd-casa__libro-lomo {
	top: 0;
	bottom: 0;
	left: 0;
	width: 7px;
	transform-origin: left center;
	transform: rotateY(-90deg);
	background: #8E3A21;
	border-radius: 3px 0 0 3px;

	/* Dos nervios, como los de un lomo cosido. */
	background-image: linear-gradient(
		to bottom,
		transparent 0 22%,
		rgba(255, 246, 239, .30) 22% 25%,
		transparent 25% 74%,
		rgba(255, 246, 239, .30) 74% 77%,
		transparent 77%
	);
}

/* LA CINTA DE MARCAPÁGINAS, asomando por abajo. Es el detalle que hace
   que se lea «libro» y no «caja»: ningún otro objeto lleva esto. */
.rd-casa__libro-cinta {
	position: absolute;
	left: 26px;
	bottom: -9px;
	width: 6px;
	height: 14px;
	transform: translateZ(4px);
	background: #F0C265;

	/* La punta en pico, como una cinta cortada al bies. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

/* Y su sombra, que es lo que lo apoya.
   Sin ella el libro flota: un objeto sin sombra en una habitación con
   luz de techo se lee como una pegatina.

   Son dos, y hacen dos cosas distintas: la que echa la tapa contra la
   pared —está en su «box-shadow», arriba— dice que el libro está
   DELANTE de algo, y esta mancha de debajo dice que está APOYADO. Con
   una sola no se entiende dónde está.

   Va en el plano del suelo, tumbada, y no de pie como el libro: es lo
   que hace que se lea como una sombra y no como un pie de goma. */
.rd-casa__libro-cuerpo::after {
	content: "";
	position: absolute;
	left: -7px;
	right: -12px;
	bottom: -4px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(40, 24, 14, .42), transparent);
	transform: translateZ(-3px) rotateX(72deg);
}

/* --- Y que se vea sobre cualquier papel ---

   El papel de la pared se cambia en la tienda, así que el libro puede
   acabar sobre un fondo claro o sobre uno oscuro. La escena ya sabe
   cuál de los dos es —lo mide el plugin y lo escribe en
   «es-pared-clara» o «es-pared-oscura»—, que es el mismo camino que
   usan los botones de cuidados.

   Sobre pared clara basta con la sombra: el libro es oscuro. Sobre
   pared oscura se le pone un filo claro alrededor, que es lo que
   separa un objeto oscuro de un fondo oscuro. */
.rd-casa__escena.es-pared-oscura .rd-casa__libro-tapa {
	box-shadow:
		inset 0 0 0 1px rgba(255, 246, 239, .28),
		inset 3px 0 0 -1px rgba(0, 0, 0, .22),
		0 0 0 1.5px rgba(255, 246, 239, .85);
}

.rd-casa__escena.es-pared-oscura .rd-casa__libro-lomo {
	box-shadow: 0 0 0 1.5px rgba(255, 246, 239, .85);
}

/* AQUÍ TERMINA EL DIBUJO PROVISIONAL. Lo de abajo es del botón. */

/* El foco, en el libro entero y no en cada cara.
   El contorno se dibuja sobre el blanco invisible del «::before», que
   es lo que de verdad se pulsa: así el recuadro del foco coincide con
   lo que responde al dedo. */
.rd-casa__libro:focus-visible {
	outline: none;
}

.rd-casa__libro:focus-visible::before {
	border-radius: var(--rd-radius-sm);

	/* DOS AROS, no uno, y el motivo es que debajo hay papel pintado y no
	   una tarjeta: el papel se cambia en la tienda y puede ser claro u
	   oscuro. Con un solo aro del color de Reddie, sobre el papel de
	   bambú da 3,82 a 1 y sobre el suelo 3,10 —medido en pantalla, sobre
	   los píxeles ya compuestos—, que pasa pero va justo; sobre un papel
	   oscuro no pasaría.

	   El aro claro por fuera resuelve el otro caso sin tocar el primero:
	   pase lo que pase debajo, uno de los dos separa. Es el mismo truco
	   del halo que llevan los rótulos de los botones de cuidados. */
	outline: 2px solid #FFF6EF;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--rd-primary);
}

/* El punto de «hay uno sin leer».
   Es el mismo de siempre —«.rd-casa__punto»—, que venía colocado para
   la esquina del botón del panel.

   AQUÍ NO VALE PEGARLO AL BORDE DEL BOTÓN, y eso fue lo que se vio en
   pantalla: el botón mide lo que mida su parte más ancha, que es el
   rótulo «Reddie consejo», o sea el doble que el libro. Pegado a su
   borde derecho, el punto salía flotando a un dedo de distancia, sobre
   la pared, sin que se entendiera de qué avisaba.

   Así que se coloca desde el centro, que es por donde va el libro:
   medio libro a la derecha menos medio punto. El 16 son los 22 de medio
   libro menos los 6 que se le dejan asomando por la esquina.

   Lleva el nombre del libro delante para pesar más que la regla del
   móvil, que lo coloca para el panel de cuidados. */
.rd-casa__libro .rd-casa__punto {
	top: -4px;
	right: auto;
	left: 50%;
	margin: 0 0 0 16px;
	border-color: rgba(255, 246, 239, .95);
}

/* En el templo no hay habitación, así que tampoco hay libro.
   Es un objeto del cuarto: dejarlo flotando sobre el fondo de la
   aplicación, al lado de Reddie meditando, sería justo lo contrario de
   lo que se busca. Quien lo abrió cierra con el aspa, con la tecla de
   escape o con los dos botones del mensaje, y «casa.js» le devuelve el
   foco al libro cuando el cajón se cierra. */
.rd-casa__escena.es-oraculo .rd-casa__libro {
	display: none;
}

/* En el móvil el libro es más pequeño, como los botones.
   El blanco para el dedo NO se encoge: sigue midiendo lo mismo. */
@media (max-width: 767px) {
	.rd-casa__libro-cuerpo {
		width: 34px;
		height: 46px;
	}

	.rd-casa__libro-cinta {
		left: 20px;
		bottom: -7px;
		width: 5px;
		height: 11px;
	}

	.rd-casa__libro {
		left: calc(var(--rd-space-3) + var(--rd-casa-panel-dentro));
	}

	.rd-casa__libro::before {
		inset: -12px -14px;
	}

	/* Medio libro son ahora 17, así que el punto se acerca. */
	.rd-casa__libro .rd-casa__punto {
		margin-left: 11px;
	}
}

/* ==========================================================
   El catálogo de decoración
   ==========================================================
   Siete apartados, uno por cada cosa que se puede cambiar, con el
   nombre encima y sus diseños debajo. El orden y los nombres los pone
   «Reddie_Decor::piezas()»; aquí solo se dice cómo se ven.

   Se ven los siete a la vez, sin plegar. Un menú de siete nombres que
   hay que abrir uno a uno esconde justo lo que hay que enseñar: que la
   habitación da para mucho más de lo que se ve. Es lo mismo que hace la
   despensa con los alimentos que aún no están abiertos. */
/* Cada categoría es ahora una HOJA de las pestañas: se ve una y las
   demás llevan «hidden». Ya no hacen falta ni el margen que las
   separaba ni el desplazarse hasta ellas.

   EL «[hidden]» HAY QUE ESCRIBIRLO cuando el elemento tiene un
   «display» propio, y este lo tiene: sin la línea, la hoja escondida se
   vería igual. */
.rd-decor__grupo {
	margin: 0;
}

.rd-decor__grupo[hidden] {
	display: none;
}

/* Al llegar desde un mueble del cuarto, el apartado no lleva contorno
   de foco: no es algo que se pulse, solo el sitio al que se ha ido. */
.rd-decor__grupo:focus {
	outline: none;
}

.rd-decor__grupo-titulo {
	margin: 0 0 var(--rd-space-2);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);

	/* Va pegado a su lista y separado del apartado de arriba: es lo que
	   hace que se lea como el título de lo de abajo y no como el final
	   de lo de arriba. */
	letter-spacing: .02em;
}

/* Va con «outline» y no con un borde o una sombra: el contorno se
   dibuja por fuera y no ocupa sitio, así que la lista no se mueve ni un
   píxel al encenderse y al apagarse. Con un borde, las cuatro líneas de
   la alfombra darían un salto justo cuando la vista acaba de llegar. */
.rd-decor__grupo.es-recien-abierto .rd-decor__lista {
	border-radius: var(--rd-radius-md);
	outline: 2px solid var(--rd-primary);
	outline-offset: 4px;
}

/* Lo que se puede hacer es ahora un BOTÓN de verdad, no un «span».
   Antes era texto con un atributo: solo lo pulsaba quien tiene ratón, y
   un lector de pantalla lo leía como una palabra suelta. Con las siete
   categorías abiertas eso son veinte cosas que no se podían usar sin
   ratón.

   Al ser un botón hay que quitarle lo que el navegador le pone de serie
   —el borde, el fondo gris y la letra del sistema—, porque su aspecto ya
   estaba decidido más arriba y no queremos dos. */
button.rd-decor__accion {
	font: inherit;
	font-size: var(--rd-size-xs);
	line-height: 1.2;
	border: 0;
	background: none;
	color: inherit;
}

button.rd-decor__accion:focus-visible {
	outline: 3px solid var(--rd-primary);
	outline-offset: 2px;
}

/* ==========================================================
   Y en el móvil, ningún cajón puede dejar al panel sin cuarto
   ==========================================================
   ESTO ES UN FALLO QUE YA ESTABA Y QUE SE VE AL MEDIRLO. En un teléfono
   bajo —320 por 568— con un cajón abierto, el panel de cuidados no
   cabía: los cuatro botones miden 216 píxeles y al cuarto le quedaban
   136. El panel se centra en el cuarto, así que se salía por los dos
   extremos, y medido con «document.elementFromPoint» sobre el centro de
   cada botón, dos de los cuatro no respondían: «Comida» quedaba por
   debajo del cajón y «Decoración» por detrás de la barra de secciones.
   Pasaba igual con la despensa, con el armario y con la limpieza; no lo
   trae el catálogo nuevo.

   La cuenta es la misma que ya hace el cajón del Reddie consejo unas
   páginas más arriba, sin el reloj, que allí sí ocupa. Medido en
   pantalla a 320 por 568:

      88 de la barra de arriba
   +  75 de la barra de secciones de abajo
   + 216 de los cuatro botones de cuidados, que es lo que miden los
         cuatro círculos de 48 con sus tres huecos de 8
   +  24 de los dos márgenes que el cajón se pone en el móvil
   -----
     403, redondeados a 410 para no dejarlo al filo: con 390 los botones
     entraban por tres píxeles, y tres píxeles no son un margen.

   En un teléfono normal —375 por 812— no cambia nada: 812 menos 410 son
   402, más que el 46 % que pide el catálogo. Solo muerde en las
   pantallas cortas, que son justo donde estaba roto.

   El catálogo de decoración pide algo más de alto que los almacenes
   —son veinte líneas repartidas en siete apartados, no dos filas de
   dibujos— y por eso va en su propia regla con el 46 % en vez del 40 %.
   ========================================================== */
@media (max-width: 767px) {
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="despensa"]:not([hidden])),
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="armario"]:not([hidden])),
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="aseo"]:not([hidden])) {
		max-height: min(40dvh, calc(100dvh - 410px));
	}

	/*
	 * La decoración reserva MENOS que los almacenes, a propósito.
	 *
	 * Con los mismos 410 el catálogo se quedaba en 105 píxeles de cuerpo
	 * para los mil cuatrocientos que mide: se veía un SIETE POR CIENTO,
	 * o sea línea y media cada vez. Eso no es un catálogo, es una
	 * rendija, y era peor que el fallo que los 410 venían a arreglar.
	 *
	 * Los 410 guardaban sitio para los cuatro botones de cuidados
	 * enteros. Aquí se guardan 250, que es lo que necesitan el aspa de
	 * cerrar y los dos primeros botones. El razonamiento: quien tiene el
	 * catálogo abierto está mirando muebles, no dando de comer, y del
	 * cajón siempre se sale por el aspa. Guardarle media pantalla a unos
	 * botones que nadie está usando, y dejar el catálogo en una rendija,
	 * es repartir al revés.
	 *
	 * Y sube del 46 % al 68 % por lo mismo: es el único cajón que no
	 * cabe de ninguna manera, así que lo que se decide no es si hay que
	 * desplazar —hay que hacerlo siempre— sino cuánto se ve de una vez.
	 */
	.rd-casa__cajon:has(.rd-casa__hoja[data-rd-hoja="decorar"]:not([hidden])) {
		max-height: 46dvh;
	}

	/*
	 * EL CATÁLOGO DE DECORACIÓN, A LA MEDIDA DE LOS OTROS CAJONES.
	 *
	 * Alba, 31-08-2026: «las fichas salen tan grandes que tapan casi
	 * toda la habitación; tienen que quedar del mismo tamaño que las de
	 * Comida y de Limpieza».
	 *
	 * MEDIDO ANTES DE TOCAR NADA, en un móvil de 375: las fichas de
	 * comida son de 62 por 62 y su cajón ocupa el 29 % de la pantalla;
	 * las de decoración eran de 163 por 215 —dos veces y media más
	 * anchas, tres y media más altas— y el cajón se comía el 66 %.
	 *
	 * De dónde salía la diferencia: comida se pinta a CINCO columnas y
	 * decoración a DOS, y encima cada ficha de decoración apila muestra,
	 * nombre y botón con su relleno. Aquí se pasa a tres columnas y se
	 * aprieta la ficha.
	 *
	 * TRES Y NO CINCO a propósito: la ficha de comida es un dibujo y ya
	 * está, pero la de decoración tiene que caber un nombre legible y un
	 * botón que se pueda pulsar con el dedo. A cinco columnas quedarían
	 * en 62 píxeles y el botón dejaría de ser pulsable, que es peor que
	 * una ficha grande.
	 *
	 * Y el tope del cajón baja del 68 % al 46 %, que es el que tienen
	 * los otros tres. Aquel 68 % se puso porque el catálogo no cabía de
	 * otra manera; con las fichas pequeñas ya cabe.
	 */
	.rd-decor__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--rd-space-2);
	}

	.rd-decor__uno {
		gap: 4px;
		padding: var(--rd-space-2);
		border-radius: var(--rd-radius-sm);
	}

	/* La muestra manda en la altura de la ficha, así que es lo primero
	   que hay que bajar: cuadrada y sin alto fijo, para que se encoja
	   con la columna en vez de estirar la fila. */
	.rd-decor__uno .rd-decor__muestra {
		aspect-ratio: 1;
		height: auto;
		min-height: 0;
	}

	.rd-decor__nombre {
		font-size: 11px;
		line-height: 1.25;
	}

	.rd-decor__accion {
		padding: 5px 6px;
		font-size: 11px;
		/* Cuarenta y cuatro es lo que necesita un dedo. Por debajo de
		   eso el botón se ve pero falla al pulsarlo, y eso es peor que
		   no tenerlo. */
		min-height: 32px;
	}

	.rd-decor__moneda {
		width: 14px;
		height: 14px;
	}

	/*
	 * Y con el catálogo abierto, el panel de cuidados no se pinta.
	 *
	 * NO ES POR SITIO, ES POR HONESTIDAD. Con el cajón alto, dos de los
	 * cuatro botones —«Comida» y «Decoración», los de las puntas—
	 * quedaban debajo y dejaban de responder: medido con
	 * «elementFromPoint», devolvían el cajón. Se veían perfectamente y
	 * al pulsarlos no pasaba nada.
	 *
	 * Un botón que se ve y no funciona es lo peor de las tres opciones:
	 * peor que no verlo, y mucho peor que ver el catálogo en una
	 * rendija. Así que mientras dura el catálogo el panel se va entero.
	 *
	 * No se pierde nada: del cajón se sale por el aspa, que sí responde
	 * en todos los tamaños, y al cerrarlo el panel vuelve. Y quien está
	 * eligiendo una alfombra no está a la vez dando de comer.
	 *
	 * Solo en el móvil: de 768 para arriba los cuatro responden con el
	 * catálogo abierto, así que allí el panel se queda.
	 */
	.rd-casa__escena:has(.rd-casa__hoja[data-rd-hoja="decorar"]:not([hidden])) .rd-casa__panel {
		display: none;
	}
}

/* ==========================================================
   EL CUADERNO DEL REDDIE CONSEJO
   ==========================================================
   Se abre al pulsar el cuaderno que hay apoyado en el suelo de la
   habitación. Es un CUADERNO DE ESPIRAL, no dos columnas con una raya en
   medio: Alba mandó la foto de cuál, y de ahí sale todo lo de aquí
   abajo —tapa de cartón kraft asomando por los cuatro lados, papel
   hueso, esquinas redondeadas, la doble espiral metálica cosiendo el
   centro y una sombra suave debajo—.

   LAS PROPORCIONES SON LAS DE LA FOTO. El cuaderno abierto mide 1,28 de
   ancho por 1 de alto: dos hojas de A5 apaisadas puestas una al lado de
   la otra. Está escrito como una razón y no como dos números porque es
   lo que hace que se vea REAL: un cuaderno estirado a lo ancho de un
   monitor deja de parecer un cuaderno y parece un cartel.

   NUNCA SE PONE ENCIMA DE LA CABECERA, que es lo que se pidió. El velo y
   el cuaderno empiezan por debajo de ella: «--rd-libro-cima» lo mide
   «casa.js» al abrirlo y al cambiar el tamaño de la ventana. Antes esto
   era «inset: 0» y el velo tapaba la cabecera entera.

   EL «[hidden]» HAY QUE ESCRIBIRLO. El navegador esconde lo que lleva
   «hidden» poniéndole «display: none», pero eso pesa menos que
   cualquier «display» que escribamos nosotros: sin esta línea, el
   cuaderno se vería siempre.
   ========================================================== */
.rd-libro {
	position: fixed;
	top: var(--rd-libro-cima, 88px);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-space-4);

	/* Los colores del cuaderno como OBJETO.

	   Van aquí y no en «tokens.css» porque son de esta cosa y de
	   ninguna otra, y porque un cuaderno es un objeto: su tapa es de
	   cartón tanto de día como de noche, igual que la lámpara de la
	   habitación es roja a las tres de la mañana.

	   Lo que sí cambia de noche es el PAPEL, y no por capricho: el tema
	   Calma existe para no deslumbrar, y una hoja color hueso a pantalla
	   casi completa deslumbra. De noche el papel es el del tema y la
	   tapa se apaga para acompañarlo. */
	--rd-libro-tapa: #C2A177;
	--rd-libro-tapa-canto: #A8875D;

	/* Cuánto sobresale la tapa por detrás de las hojas.

	   Estaba escrito a mano en «.rd-libro__tapa» y en ningún sitio más,
	   y eso escondía un problema: el cuaderno «mide» lo que miden sus
	   hojas, pero lo que se VE es nueve píxeles más grande por los
	   cuatro lados. Al dejarle un margen en el móvil, el margen de
	   verdad salía nueve píxeles más corto de lo que decía la regla, y
	   la tapa acababa pegada al filo de la pantalla.

	   Con la medida en una variable, quien reserve el hueco puede
	   sumarla. Si algún día la tapa sobresale más o menos, el margen se
	   ajusta solo. */
	--rd-libro-tapa-fuera: 9px;
	--rd-libro-aro: #9CA1A9;
	--rd-libro-radio: 14px;

	/* El papel. De día, casi blanco con un punto cálido, que es el de
	   la foto que mandó Alba: «--rd-surface» es un blanco rosado y al
	   lado de la tapa de cartón se veía frío, como un folio de
	   impresora dentro de un cuaderno; y el hueso de antes se veía
	   viejo. De noche manda el tema, por lo que dice el bloque de
	   arriba. */
	--rd-libro-papel: #FBF8F1;

	/* EL GRANO DEL PAPEL.

	   Una hoja de verdad no es una superficie lisa: tiene fibras, y eso
	   es lo que la distingue de un rectángulo de color. Es un dibujo de
	   128 píxeles en baldosa, de 8 kilobytes, y va a un 7 % de opacidad
	   como mucho: no se ve mirándolo, se nota. Puesto más fuerte el
	   papel parece piedra y el texto se lee peor.

	   Va como variable y no escrito en cada sitio porque las dos caras
	   de la hoja lo apilan encima de sus propios degradados y el orden
	   importa: el grano va ARRIBA del todo, sobre el color y sobre la
	   sombra del lomo. */
	--rd-libro-grano: url("../img/papel.png");
}

.rd-oscuro .rd-libro {
	--rd-libro-tapa: #6B5942;
	--rd-libro-tapa-canto: #574733;
	--rd-libro-aro: #7C818A;
	--rd-libro-papel: var(--rd-surface);
}

.rd-libro[hidden] {
	display: none;
}

/* El velo que apaga la habitación.

   Es el mismo tono que usa el panel de compartir. Oscuro y no claro a
   propósito: sirve para los seis temas —crema, cuadrícula azul, cielo
   estrellado— sin escribir una regla por tema, porque el papel del
   cuaderno es siempre claro y sobre un velo oscuro se recorta en todos.

   Empieza donde empieza el cuaderno, o sea POR DEBAJO DE LA CABECERA:
   cuelga de «.rd-libro», que ya está apartado. */
.rd-libro__fondo {
	position: absolute;
	inset: 0;
	background: rgba(28, 20, 14, .62);
}

/* El marco: el cuaderno arriba y el pie debajo, centrados.

   No pinta nada —no tiene fondo ni borde—: lo que se ve es el cuaderno.
   Existe para dos cosas, agrupar el diálogo para los lectores de
   pantalla y darle a «casa.js» una caja que medir. */
.rd-libro__marco {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--rd-space-3);
	width: 100%;
	height: 100%;
	min-height: 0;
}

/* El foco del propio marco no se pinta: se le da el foco al abrirlo
   para que el lector de pantalla lea de qué va, y un recuadro naranja
   alrededor del cuaderno entero en ese momento no dice nada. Lo que sí
   se ve es el foco de cada botón de dentro. */
.rd-libro__marco:focus {
	outline: none;
}

/* AQUÍ ESTABAN LAS REGLAS DEL ASPA DE CERRAR.

   Se han ido con ella: el cuaderno se cierra pulsando en cualquier sitio
   que no sea el propio cuaderno ni los botones de abajo. Está contado en
   «casa.php», donde estaba el botón, y lo hace «casa.js». */

/* --- EL CUADERNO ---

   El tamaño lo escribe «casa.js» en «--rd-libro-ancho» y
   «--rd-libro-alto», midiendo el hueco que queda entre la cabecera y el
   pie y respetando la razón de la foto. Se hace con el guion y no con
   «aspect-ratio» a secas porque hay que respetar DOS topes a la vez —el
   ancho de la ventana y el alto que queda libre— y con «max-height» el
   navegador rompe la razón en vez de encoger el ancho: el cuaderno
   salía achatado en pantallas bajas.

   Los valores de reserva del «var()» son para el instante entre que se
   quita el «hidden» y el guion mide. Sin ellos el cuaderno aparece con
   ancho cero y se ve dar un salto. */
/* EL ASPA DE CERRAR.

   Va pegada a la esquina de arriba a la derecha del marco, FUERA del
   cuaderno: ahí es donde el guion ya cierra al tocar, así que no le hace
   falta escuchador propio. Ver el comentario de «casa.php».

   Cuarenta y cuatro píxeles de lado, que es lo que mide un dedo. El aspa
   dibujada dentro es más pequeña; lo que crece es la zona que responde,
   que es lo que hace que se acierte a la primera. */
.rd-libro__cerrar {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(58, 33, 22, .72);
	color: #fff;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms ease;
}

.rd-libro__cerrar svg {
	width: 20px;
	height: 20px;
}

.rd-libro__cerrar:hover,
.rd-libro__cerrar:focus-visible {
	background: rgba(58, 33, 22, .92);
}

.rd-libro__cerrar:active {
	transform: scale(0.94);
}

.rd-libro__cuaderno {
	position: relative;
	width: var(--rd-libro-ancho, min(1040px, 100%));
	height: var(--rd-libro-alto, min(700px, 100%));
	flex: 0 0 auto;
	filter: drop-shadow(0 22px 38px rgba(40, 20, 10, .42));
}

/* La tapa de cartón, que asoma por los cuatro lados.

   Es lo que convierte dos hojas de papel en un cuaderno: sin ella se
   ven dos folios flotando. El canto de abajo un punto más oscuro, que
   es donde el cartón dobla. */
.rd-libro__tapa {
	position: absolute;
	inset: calc(var(--rd-libro-tapa-fuera) * -1);
	border-radius: calc(var(--rd-libro-radio) + 4px);
	background: linear-gradient(
		to bottom,
		var(--rd-libro-tapa) 0%,
		var(--rd-libro-tapa) 88%,
		var(--rd-libro-tapa-canto) 100%
	);
}

/* --- LAS HOJAS ---

   Cada hoja es media caja —la mitad DERECHA— que gira sobre su canto
   izquierdo, que es el lomo. Girada media vuelta, se pone sobre la
   mitad izquierda: eso es pasar una hoja.

   Y COMO EN UN CUADERNO DE VERDAD, cada hoja tiene dos caras. La
   trasera de la primera lleva el consejo del día; la delantera de la
   segunda, el primero guardado; la trasera de esa misma, el siguiente;
   y así. Es literalmente el orden que pidió Alba, y sale solo de que las
   hojas sean hojas.

   LA PERSPECTIVA es lo que hace que el giro se vea como papel y no como
   una persiana que se estrecha. 2400 es bastante: más cerca deforma la
   página y parece un ojo de pez. */
.rd-libro__hojas {
	position: absolute;
	inset: 0;
	perspective: 2400px;
}

.rd-libro__hoja {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform 620ms cubic-bezier(.42, .02, .28, 1);
}

.rd-libro__hoja.es-vuelta {
	transform: rotateY(-180deg);
}

/* Al abrirlo, las hojas se colocan de golpe.

   La primera tiene que estar YA volteada cuando aparece el cuaderno: es
   la que lleva el consejo de hoy. Con la transición puesta se vería
   girar sola nada más abrir, como si alguien hubiera pasado una página
   que nadie ha pasado. «casa.js» pone esta clase, coloca las hojas y la
   quita al instante siguiente. */
.rd-libro.es-quieto .rd-libro__hoja {
	transition: none;
}

/* Las dos caras de la hoja.

   «backface-visibility: hidden» es todo el truco: cada cara solo se ve
   cuando mira al lector. Sin ella se verían las dos a la vez, una del
   revés encima de la otra.

   LAS ESQUINAS. Redondas por fuera y en pico por el lomo, que es donde
   el papel está cosido. La cara trasera lleva las suyas al revés porque
   al girar la hoja su canto izquierdo pasa a ser el de fuera. */
.rd-libro__cara {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
}

.rd-libro__cara--frente {
	border-radius: 0 var(--rd-libro-radio) var(--rd-libro-radio) 0;
}

.rd-libro__cara--dorso {
	transform: rotateY(180deg);
	border-radius: var(--rd-libro-radio) 0 0 var(--rd-libro-radio);
}

/* El papel.

   EL PAPEL TIENE QUE SER OPACO, Y AQUÍ ESTÁ EL PORQUÉ. De día
   «--rd-surface» es un crema macizo y no hay nada que pensar. De noche
   —el tema Calma— vale un azul al 88 %, y puesto a secas el cuaderno se
   transparentaba: la habitación se veía POR DEBAJO del texto —la
   lámpara, la ventana, Reddie— y el consejo había que leerlo por encima
   de un cuarto.

   Así que el color del tema se pone ENCIMA DE UNA BASE MACIZA, que es
   «--rd-bg», el fondo de la página, y ese sí es opaco en los seis temas.
   Se hace con un degradado de un solo color porque un elemento admite
   una sola «background-color» pero varias capas de imagen: es la manera
   de apilar dos colores sin inventarse un tercero ni escribir una regla
   por tema.

   Encima va un tinte cálido muy flojo hacia el lomo: es la sombra del
   pliegue, y es lo que hace que dos rectángulos claros se lean como una
   hoja doblada.

   SE DESPLAZA POR DENTRO. Un consejo largo se recorre dentro de su
   página en vez de estirar el cuaderno hasta sacarlo de la pantalla. */
.rd-libro__papel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;

	/*
	 * LOS MÁRGENES, LOS DE UN LIBRO DE VERDAD.
	 *
	 * Eran un 3,4 % por los cuatro lados y el texto se leía pegado al
	 * filo, como una hoja de cuaderno escrita hasta el borde. Un libro
	 * impreso no reparte el aire por igual: el de FUERA es el más ancho
	 * —es por donde se sujeta la página con el pulgar—, el de ARRIBA es
	 * algo menor, y el de ABAJO es el mayor de los tres, que es lo que
	 * hace que el bloque de texto parezca centrado aunque no lo esté.
	 *
	 * Aquí quedan en 9 %, 7 % y 10 %. Con la página de ancho normal
	 * —unos 560 píxeles en un portátil— eso son unos 50 arriba y 56
	 * abajo, que es el aire que tiene un libro de bolsillo.
	 *
	 * Y por el lado del LOMO, esos 9 % MÁS un 6 %: ahí pasa la espiral.
	 * Sin ese extra la primera palabra de cada renglón caía debajo del
	 * alambre y la fecha se leía «unes 24 de agosto».
	 *
	 * Van con «clamp» y no con un porcentaje pelado porque la misma
	 * página mide 560 píxeles en un portátil y 320 en un móvil: con un
	 * porcentaje solo, el margen del móvil se quedaría en nada y el del
	 * monitor grande se comería media hoja.
	 */
	--rd-libro-fuera: clamp(18px, 9%, 52px);
	--rd-libro-arriba: clamp(16px, 7%, 42px);
	--rd-libro-abajo: clamp(20px, 10%, 58px);

	padding: var(--rd-libro-arriba) var(--rd-libro-fuera) var(--rd-libro-abajo);
	padding-left: calc(var(--rd-libro-fuera) + 6%);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(74, 51, 32, .38) transparent;
	background-color: var(--rd-bg);
	background-image:
		var(--rd-libro-grano),
		linear-gradient(to left, rgba(120, 80, 50, 0) 78%, rgba(120, 80, 50, .09) 100%),
		linear-gradient(var(--rd-libro-papel), var(--rd-libro-papel));
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 128px 128px, auto, auto;
}

/* En la cara trasera el lomo está a la DERECHA, así que la sombra del
   pliegue se cambia de lado. */
.rd-libro__cara--dorso .rd-libro__papel {
	padding-left: var(--rd-libro-fuera);
	padding-right: calc(var(--rd-libro-fuera) + 6%);
	background-image:
		var(--rd-libro-grano),
		linear-gradient(to right, rgba(120, 80, 50, 0) 78%, rgba(120, 80, 50, .09) 100%),
		linear-gradient(var(--rd-libro-papel), var(--rd-libro-papel));
}

/* --- LA ESPIRAL ---

   Va POR ENCIMA de las hojas, que es donde va el alambre de un cuaderno
   de verdad: se le ve pasar por encima del papel en la mitad de cada
   vuelta. Y con «pointer-events: none» no se come ninguna pulsación.

   Los aros son un dibujo que se repite hacia abajo: veinticuatro y
   todos iguales, así que escribirlos a mano sería veinticuatro
   elementos que no dicen nada. Cada uno lleva su degradado de metal
   —claro arriba, oscuro abajo— y la sombrita del centro, que es la que
   hace que se vea el hueco por donde pasa el papel. */
.rd-libro__espiral {
	position: absolute;
	top: 1.5%;
	bottom: 1.5%;
	left: 50%;
	width: 5.8%;
	min-width: 34px;
	translate: -50% 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E2E4E8'/%3E%3Cstop offset='.42' stop-color='%23A8ADB5'/%3E%3Cstop offset='1' stop-color='%236B7079'/%3E%3C/linearGradient%3E%3Crect x='2' y='7.5' width='40' height='10' rx='5' fill='url(%23m)'/%3E%3Crect x='19' y='7.5' width='6' height='10' fill='%23000' opacity='.20'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-size: 100% 34px;
	background-position: center top;
	filter: drop-shadow(0 1px 1px rgba(40, 20, 10, .30));
}

/* --- LA PÁGINA DEL DÍA: DORADA ---

   Alba: «que la página donde se ve el Reddie consejo del día y la cuenta
   atrás se vea dorada, con las letras en negro».

   Es la cara 0 del cuaderno —la trasera de la primera hoja—, la que se
   ve nada más abrirlo. Va dorada en sus TRES estados: con el consejo del
   día, con el botón de leerlo y con la cuenta atrás. Las demás páginas
   se quedan de papel hueso; el dorado es lo que dice «esta es la de
   hoy».

   NO SE PINTA CADA TEXTO A MANO: se redefinen aquí las tres tintas del
   tema y los hijos las heredan. Escribir el color en la fecha, en la
   nota, en el consejo y en el pie serían cuatro reglas que hay que
   acordarse de tocar cada vez que se añada algo a esta página.

   MEDIDO: el negro sobre este dorado da 13,1 a uno, y la tinta de apoyo
   6,6. Un texto pide 4,5. */
.rd-libro__cara[data-rd-cara="0"] .rd-libro__papel {
	--rd-libro-papel: #EFD79A;
	--rd-ink: #1A1206;
	--rd-ink-soft: #3A2A10;
	--rd-ink-muted: #5A4416;
	--rd-border: rgba(90, 68, 22, .30);

	color: #1A1206;
}

/* La sombra del pliegue, en tono dorado: con el marrón de las otras
   páginas se veía una franja gris sobre el oro. */
.rd-libro__cara[data-rd-cara="0"] .rd-libro__papel {
	background-image:
		var(--rd-libro-grano),
		linear-gradient(to left, rgba(120, 84, 20, 0) 78%, rgba(120, 84, 20, .12) 100%),
		linear-gradient(var(--rd-libro-papel), var(--rd-libro-papel));
}

/* --- LA CUENTA ATRÁS --- */

/* Tres cifras grandes con su nombre debajo, cada una en su recuadro.
   Van con cifras de ancho fijo: sin eso, al pasar de «09» a «10» los
   tres bloques se mueven de sitio cada segundo y el reloj tiembla. */
.rd-libro__reloj {
	display: flex;
	justify-content: center;
	gap: var(--rd-space-3);
	margin: var(--rd-space-3) 0 var(--rd-space-5);
}

/* EL CANTO DEL RECUADRO NO PUEDE SALIR DE «--rd-border», Y ESTÁ MEDIDO.
   Sobre el papel del cuaderno, ese borde da 1,30 a uno y sencillamente
   no se ve; el borde fuerte se queda en 1,62. Un contorno que separa
   una caja de su fondo necesita 3.

   Así que se mezcla la propia tinta con el propio papel, un 55 y un 45.
   Al salir de las dos variables del sitio, se ajusta solo a los tres
   fondos que tiene este cuaderno: papel claro 4,02, página dorada 3,49
   —que trae su tinta más oscura— y tema noche 4,39. Con un color fijo
   habría que escribir tres reglas y acordarse de las tres.

   El relleno va al 6 %: lo justo para que se lea como una caja y no
   como un marco vacío, sin tocar el contraste de las cifras. */
.rd-libro__reloj span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 3.4em;
	padding: 10px 8px;
	background: color-mix(in srgb, var(--rd-ink) 6%, var(--rd-libro-papel, #FBF8F1));
	border: 1px solid color-mix(in srgb, var(--rd-ink) 55%, var(--rd-libro-papel, #FBF8F1));
	border-radius: var(--rd-radius-md);
}

/* Sin «color-mix» —navegadores de antes de 2023— se cae a un canto de
   tinta al 40 % de opacidad, que sobre cualquiera de los tres fondos
   sigue viéndose. Se pierde el ajuste fino, no el recuadro. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.rd-libro__reloj span {
		background: transparent;
		border-color: rgba(58, 33, 22, .40);
	}

	body.rd-oscuro .rd-libro__reloj span {
		border-color: rgba(255, 255, 255, .40);
	}
}

.rd-libro__reloj b {
	font-family: var(--rd-font-display);
	font-size: clamp(26px, 8vw, 40px);
	font-weight: var(--rd-weight-display);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--rd-ink);
}

.rd-libro__reloj small {
	font-size: var(--rd-size-xs);
	letter-spacing: .06em;
	text-transform: lowercase;
	color: var(--rd-ink-muted);
}

/* En el móvil el cuaderno ocupa una sola página, y tres recuadros con
   su relleno no caben con el hueco de antes. Se aprieta el hueco y el
   relleno, nunca las cifras: la cuenta atrás se mira de lejos. */
@media (max-width: 767px) {
	.rd-libro__reloj {
		gap: var(--rd-space-2, 6px);
	}

	.rd-libro__reloj span {
		min-width: 0;
		flex: 1 1 0;
		max-width: 6.5em;
		padding: 8px 4px;
	}
}

/* El título del reloj va centrado y sin el margen de abajo de una nota
   normal: lo que sigue es el reloj, no otro párrafo. */
.rd-libro__nota--reloj {
	margin-bottom: 0;
	text-align: center;
}

/* La explicación de en qué se basa el consejo, SIN su recuadro blanco.

   Traía fondo de «--rd-surface», que en el resto de la web es lo que la
   separa de lo que tiene alrededor. Sobre el dorado no separa: se lee
   como una pegatina blanca pegada encima de la hoja. En una página de
   cuaderno el texto va sobre el papel y ya está. */
.rd-libro__cara[data-rd-cara="0"] .rd-casa__espera-hint {
	background: none;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

/* Y el botón al diario, centrado como todo lo demás de esta página. */
.rd-libro__cara[data-rd-cara="0"] .rd-casa__espera-ir {
	text-align: center;
}

/* --- LO QUE VA ESCRITO EN LA HOJA --- */

/* La fecha, antes del texto, que es como se pidió.

   Sale en minúscula porque así escribe los días WordPress en español;
   la mayúscula se pone aquí y no en PHP para no partir los idiomas que
   empiezan por letra acentuada. */
.rd-libro__fecha {
	margin: 0 0 var(--rd-space-3);
	padding-bottom: var(--rd-space-2);
	border-bottom: 1px solid var(--rd-border);
	font-size: var(--rd-size-xs);
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--rd-ink-muted);
}

.rd-libro__fecha::first-letter {
	text-transform: uppercase;
}

/* Las frases cortas de la página de hoy: que te espera, o que ya está
   leído. Van en el gris de apoyo, no en el principal: lo que manda en
   esa página es el consejo o el botón, no la explicación. */
.rd-libro__nota {
	margin: 0 0 var(--rd-space-4);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

/* El aviso de que el consejo no se ha podido escribir.

   Ocupa el sitio de la nota de siempre —«tu Reddie consejo de hoy te
   está esperando»— cuando hay algo que contar, y va con un poco más de
   peso porque explica algo que acaba de pasar y que no se esperaba.

   NO VA EN ROJO, y es a propósito. No ha hecho nada mal quien lo lee, y
   los textos que salen aquí no son errores: son «dame unos minutos»,
   «todavía no te he leído nada» o «no tengo permiso». Un recuadro rojo
   convertiría un contratiempo en una bronca.

   El filete de la izquierda es lo que lo separa del texto normal de la
   página sin gritar, y va en el canto de la tapa del propio cuaderno
   —«--rd-libro-tapa-canto»— para que parezca parte del objeto y no
   pegado encima. Ese color lo redefine el tema de noche unas líneas más
   arriba, así que se adapta solo. */
/* El motivo técnico, debajo del aviso y solo para quien administra.

   Va en letra pequeña y apagada a propósito: no es para leerlo, es para
   copiarlo. Y se puede seleccionar con el dedo —«user-select: text»—
   porque su único uso es ese, mandárselo a alguien. */
.rd-libro__tecnico {
	margin: calc(var(--rd-space-3) * -1) 0 var(--rd-space-4);
	padding-left: var(--rd-space-4);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-muted);
	user-select: text;
	-webkit-user-select: text;
}

.rd-libro__aviso {
	margin: 0 0 var(--rd-space-4);
	padding: var(--rd-space-3) var(--rd-space-3) var(--rd-space-3) var(--rd-space-4);
	border-left: 3px solid var(--rd-libro-tapa-canto);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink);
}

/* El consejo del día ocupa lo que quede y se recorre por dentro.

   Esta es la cadena entera, y hay que dejarla escrita porque si se
   rompe un eslabón el efecto no se ve: el papel es una columna que se
   desplaza, y aquí dentro el texto se estira a lo que sobre. Basta con
   quitar un «min-height: 0» para que los botones de guardar se vayan
   por debajo del borde de la hoja. */
.rd-libro__papel .rd-casa__nuevo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin-bottom: 0;
}

.rd-libro__papel .rd-casa__nuevo-txt {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}

/* --- La página que todavía no tiene nada ---

   NO SE QUEDA EN BLANCO, y este es el motivo: una página vacía dentro
   de un cuaderno no se lee como «todavía no hay nada», se lee como que
   algo ha fallado al cargar. Y el primer día de una cuenta nueva es
   justo cuando menos hay que dar esa impresión.

   Ni una palabra de reproche: no dice que falte nada ni que haya que
   hacer nada. Dice que la página está por estrenar, que es verdad y
   además suena a lo que es, algo que empieza. */
.rd-libro__vacio {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	padding: var(--rd-space-4) 0;
	text-align: center;
}

.rd-libro__vacio::before {
	content: "";
	width: 86px;
	height: 14px;
	margin-bottom: var(--rd-space-4);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 14'%3E%3Cg fill='none' stroke='%237E9B5B' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M8 7h70'/%3E%3C/g%3E%3Cg fill='%237E9B5B'%3E%3Cpath d='M20 7c0-2.2 1.8-4 4-4 0 2.2-1.8 4-4 4Zm0 0c0 2.2 1.8 4 4 4 0-2.2-1.8-4-4-4Z'/%3E%3Cpath d='M32 7c0-2.2 1.8-4 4-4 0 2.2-1.8 4-4 4Zm0 0c0 2.2 1.8 4 4 4 0-2.2-1.8-4-4-4Z'/%3E%3Cpath d='M50 7c0-2.2-1.8-4-4-4 0 2.2 1.8 4 4 4Zm0 0c0 2.2-1.8 4-4 4 0-2.2 1.8-4 4-4Z'/%3E%3Cpath d='M62 7c0-2.2-1.8-4-4-4 0 2.2 1.8 4 4 4Zm0 0c0 2.2-1.8 4-4 4 0-2.2 1.8-4 4-4Z'/%3E%3Ccircle cx='43' cy='7' r='2'/%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .85;
}

.rd-libro__vacio-tit {
	margin: 0 0 var(--rd-space-2);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
}

.rd-libro__vacio p {
	max-width: 30ch;
	margin: 0;
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

/* --- EL PIE: dónde estás y cómo moverte --- */
.rd-libro__pie {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--rd-space-3);
	flex: 0 0 auto;
	width: var(--rd-libro-ancho, min(1040px, 100%));
	max-width: 100%;
}

/* La cuenta va sobre el velo, no sobre el papel, así que se escribe en
   blanco. Con cifras de ancho fijo: sin eso, pasar de «9 de 12» a «10
   de 12» mueve el botón de sitio y hay que volver a apuntar. */
.rd-libro__cuenta {
	margin-right: auto;
	font-size: var(--rd-size-xs);
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .82);
}

.rd-libro__mandos {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
}

/* «width: auto» porque «.rd-button» viene del ancho completo, que es lo
   que quiere un botón que ocupa una línea para él solo. Aquí comparte
   línea con las flechas, así que mide lo que mida su texto. */
.rd-libro__pasar {
	width: auto;
	font-size: var(--rd-size-xs);
	padding: 8px var(--rd-space-4);
	min-height: 0;
	background: rgba(255, 255, 255, .92);
	border-color: rgba(255, 255, 255, .92);
	color: #3A2116;
}

.rd-libro__pasar:hover:not(:disabled) {
	background: #fff;
	border-color: #fff;
}

/* Apagado NO es escondido.

   «Volver al día actual» está siempre, también en la primera vista.
   Ahí no lleva a ninguna parte nueva, pero esconderlo obligaría a
   buscarlo justo cuando hace falta. Apagado se ve que ya estás en el
   día de hoy, y sigue en su sitio. */
.rd-libro__pasar:disabled,
.rd-libro__flecha:disabled {
	opacity: .42;
	cursor: default;
}

.rd-libro__flecha {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.rd-libro__flecha:hover:not(:disabled),
.rd-libro__flecha:focus-visible:not(:disabled) {
	background: rgba(255, 255, 255, .32);
	border-color: #fff;
}

/* Quien haya pedido menos movimiento en su sistema pasa la hoja sin
   giro. El texto cambia igual, que es lo que importa; el giro era el
   adorno. */
@media (prefers-reduced-motion: reduce) {
	.rd-libro__hoja {
		transition: none;
	}

	.rd-libro__cara.esta-llegando {
		animation: none;
	}
}

/* ==========================================================
   El cuaderno en una pantalla estrecha: una página cada vez
   ==========================================================
   UN CUADERNO ABIERTO DE DOS PÁGINAS EN 320 PÍXELES SON DOS COLUMNAS DE
   140, y en 140 píxeles no se lee un párrafo: se leen tres palabras por
   renglón y el consejo del día se convierte en una tira de veinte
   líneas. Así que por debajo de 720 se enseña UNA sola página.

   Los 720 son el punto donde dos páginas dejan de caber con holgura.
   EL MISMO NÚMERO ESTÁ ESCRITO EN «casa.js», en «estrecho()»; si se
   cambia uno hay que cambiar el otro, porque es el guion quien decide
   qué cara enseñar.

   CÓMO SE PASA. Con las mismas dos flechas y en el mismo orden que en
   el ordenador: primero el consejo de hoy, luego los guardados uno a
   uno. Es exactamente la misma lista, leída de una en una en vez de de
   dos en dos, así que quien use las dos pantallas no aprende nada
   nuevo.

   Y SIGUE GIRANDO. La hoja no se cambia de golpe: entra girando sobre
   su canto izquierdo, que es por donde está cosida. Aquí no se puede
   girar la hoja entera —solo hay sitio para una cara— así que gira la
   que llega, que es lo que se ve de una hoja que cae.

   La espiral se va al canto izquierdo, que es donde está el alambre de
   una hoja suelta de un cuaderno. */
@media (max-width: 719px) {
	/* EL CUADERNO OCUPA LA PANTALLA ENTERA, Y ES OPACO.
	 *
	 * Alba, 28-08-2026: «en el móvil el cuaderno del Reddie consejo se ve
	 * mal». Eran tres cosas a la vez y ninguna era la página en sí:
	 *
	 *   1. El fondo era transparente, así que por debajo del pie asomaba
	 *      la barra de Emociones/Hábitos/Casa. Un cuaderno abierto con
	 *      una barra de navegación cruzándolo se lee como una pantalla a
	 *      medio cargar.
	 *   2. No había forma de cerrarlo. Eso lo arregla el aspa de arriba.
	 *
	 * Tapa el ancho entero con el color de la página, así que lo único
	 * que se ve dentro del hueco es el cuaderno. Es lo mismo que se hizo
	 * con la pestaña del registro del diario, y por el mismo motivo.
	 *
	 * LA BARRA DE ARRIBA NO SE TAPA. Aquí ponía «top: 0» y el cuaderno
	 * empezaba en el filo de la pantalla, comiéndose la cabecera entera:
	 * el saldo de reddies, las notificaciones y los ajustes desaparecían
	 * mientras el cuaderno estuviera abierto.
	 *
	 * Alba, 01-09-2026: «el header no puede desaparecer nunca, hazlo
	 * visible aun con el cuaderno abierto». Quitando ese «top: 0» vuelve
	 * a mandar el de la regla de arriba, que es «--rd-libro-cima»: la
	 * medida que «casa.js» calcula del alto real de la cabecera, no un
	 * número escrito a mano. Así vale igual en un móvil que en otro.
	 *
	 * Y EL CUADERNO NO TOCA LOS BORDES. El relleno estaba en «space-3»,
	 * que en el móvil son ocho píxeles: a esa distancia el canto del
	 * cuaderno se pega al filo de la pantalla y deja de leerse como un
	 * objeto —no se le ve la forma, parece la pantalla misma—. Con
	 * «space-6» hay aire para que se vean las esquinas redondeadas y la
	 * tapa por los cuatro lados, y de paso el cuaderno sale un poco más
	 * pequeño, que es lo que se pidió.
	 *
	 * Y SE LE SUMA LO QUE SOBRESALE LA TAPA. El hueco lo reserva esta
	 * regla midiendo las HOJAS, pero lo que se ve es la tapa, que va
	 * nueve píxeles por fuera en cada lado. Sin sumarlos, el margen que
	 * queda a la vista es nueve píxeles más corto que el que dice esta
	 * línea: medido, se pedían veinte y se veían once. */
	.rd-libro {
		padding: calc(var(--rd-space-6) + var(--rd-libro-tapa-fuera));
		padding-bottom: calc(var(--rd-space-6) + var(--rd-libro-tapa-fuera) + env(safe-area-inset-bottom, 0px));
		background: var(--rd-bg, #FDF3EC);
		--rd-libro-radio: 12px;
	}

	/* Y el pie se despega de la tapa.

	   El hueco que reserva «casa.js» se mide desde las HOJAS, y la tapa
	   sobresale nueve píxeles por debajo de ellas: medido, el pie
	   arrancaba un píxel POR ENCIMA del canto de la tapa, o sea pegado.
	   Se le suma lo que sobresale más un respiro, y así el cuaderno se
	   ve entero y los botones no parecen colgar de él. */
	.rd-libro__pie {
		margin-top: calc(var(--rd-libro-tapa-fuera) + var(--rd-space-2));
	}

	/* Y el velo oscuro se quita: aquí no hay nada detrás que velar.
	   En el ordenador es lo que separa el cuaderno de la habitación, que
	   se sigue viendo alrededor; en el teléfono el cuaderno ocupa la
	   pantalla, así que el velo solo servía para pintarla de marrón. */
	.rd-libro__fondo {
		background: transparent;
	}

	/* Y CON EL VELO SE VAN LOS BOTONES BLANCOS.
	 *
	 * El pie —la cuenta de hojas, «Volver al día actual» y las dos
	 * flechas— está escrito en blanco porque hasta ahora caía sobre el
	 * velo oscuro. Sobre el papel de la página, blanco sobre crema, no se
	 * veía: medía 1,1. Aquí pasan a la tinta de la web. */
	.rd-libro__cuenta {
		color: var(--rd-ink-muted);
	}

	/* El borde de las flechas va en la tinta suave y no en el borde de
	   siempre: aquel mide 1,58 contra el papel de la página y una flecha
	   con un contorno que no se ve es una flecha que no se ve. Con la
	   tinta suave mide 5,89. */
	.rd-libro__flecha {
		border-color: var(--rd-ink-muted);
		background: var(--rd-surface);
		color: var(--rd-ink);
	}

	.rd-libro__pasar {
		background: var(--rd-surface);
		border-color: var(--rd-ink-muted);
		color: var(--rd-ink);
	}

	/* La hoja deja de ser media caja: cada cara ocupa la página entera
	   y se enseña la que toca. El giro de la hoja se apaga —con
	   «!important» porque el guion lo escribe en el atributo de estilo
	   al animar— y lo hace la cara que llega. */
	.rd-libro__hoja {
		left: 0;
		width: 100%;
		transform: none !important;
		transition: none;
	}

	/* ================================================================
	   Y LAS HOJAS DEJAN DE RECIBIR EL DEDO. AQUÍ ESTABA EL FALLO.
	   ================================================================
	   Alba, 01-09-2026: «le doy a leer el reddie consejo y no hace
	   nada». Y era literal: el botón se veía, estaba bien puesto y
	   funcionaba, pero el dedo NUNCA le llegaba.

	   Lo que pasa es que en el móvil se esconden las CARAS, no las
	   HOJAS. Cada hoja sigue siendo una caja absoluta del tamaño entero
	   del cuaderno, y como van apiladas por orden, la última —vacía,
	   con todas sus caras en «display: none»— queda ENCIMA de la que sí
	   se ve. Medido: la hoja 2, sin una sola cara visible, con
	   «z-index: 2» sobre la hoja 1, tapando los 307 x 44 píxeles del
	   botón. Cualquier punto del cuaderno que se tocara caía en ella.

	   Con eso no se podía pulsar NADA de dentro del cuaderno en el
	   teléfono: ni «Leer el Reddie consejo», ni «Guardar el consejo»,
	   ni «No guardar», ni «Eliminar» de los consejos anteriores. Solo
	   funcionaban las flechas y el aspa, que viven fuera de las hojas.

	   POR QUÉ NO SE VEÍA PROBANDO. Desde el ordenador las hojas no se
	   apilan: se reparten a los lados y giran. Y probándolo con un
	   guion tampoco salta, porque pedirle a un botón que se pulse va
	   directo al botón y se salta lo que tenga encima. Solo aparece
	   tocando la pantalla, que es lo que hacía Alba.

	   El arreglo es que la hoja no reciba nada y que lo reciba solo la
	   cara que se está viendo. No se toca ninguna medida ni ningún
	   z-index: lo que se ve queda exactamente igual. */
	.rd-libro__hoja {
		pointer-events: none;
	}

	.rd-libro__cara {
		display: none;
		transform: none !important;
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
		border-radius: 0 var(--rd-libro-radio) var(--rd-libro-radio) 0;
	}

	.rd-libro__cara.es-visible {
		display: block;
		z-index: 2;
		/* La única que sí. Va con «auto» y no con «all» porque el padre
		   está en «none»: es la forma de devolvérselo a un hijo. */
		pointer-events: auto;
	}

	/* En el móvil el lomo está siempre a la izquierda, y con él la
	   espiral: el hueco que le deja el texto se pone a ese lado en las
	   dos caras. */
	.rd-libro__cara .rd-libro__papel,
	.rd-libro__cara--dorso .rd-libro__papel {
		padding-left: calc(clamp(14px, 3.4%, 30px) + 24px);
		padding-right: clamp(14px, 3.4%, 30px);
		background-image:
			var(--rd-libro-grano),
			linear-gradient(to right, rgba(120, 80, 50, .10) 0%, rgba(120, 80, 50, 0) 14%),
			linear-gradient(var(--rd-libro-papel), var(--rd-libro-papel));
	}

	/* La espiral, cosida al canto izquierdo.

	   Se enseña la MITAD DERECHA del dibujo del aro —«background-position:
	   right»—, que es el trozo que en un cuaderno de verdad queda sobre
	   el papel. Con la mitad izquierda los aros parecían colgar por fuera
	   de la hoja, sujetos a nada. */
	.rd-libro__espiral {
		left: 0;
		width: 22px;
		min-width: 22px;
		translate: 0 0;
		background-size: 200% 26px;
		background-position: right top;
	}

	/* La hoja que llega, cayendo desde el lomo.

	   440 milisegundos: lo que tarda una hoja de verdad. Más rápido no
	   se lee como papel; más lento estorba a quien quiere ver tres
	   seguidas. */
	.rd-libro__cara.es-visible.esta-llegando {
		transform-origin: left center;
		animation: rd-libro-cae 440ms cubic-bezier(.32, .72, .3, 1);
	}

	.rd-libro__cara.es-visible.esta-llegando.es-hacia-atras {
		animation-name: rd-libro-cae-atras;
	}

	.rd-libro__pie {
		justify-content: space-between;
	}
}

@keyframes rd-libro-cae {
	from {
		transform: perspective(1200px) rotateY(-84deg);
		opacity: .25;
	}

	to {
		transform: perspective(1200px) rotateY(0);
		opacity: 1;
	}
}

@keyframes rd-libro-cae-atras {
	from {
		transform: perspective(1200px) rotateY(84deg);
		opacity: .25;
	}

	to {
		transform: perspective(1200px) rotateY(0);
		opacity: 1;
	}
}