/* ⚠️ GENERADO por docs/campanas/invita/construir.mjs — piezas de la app + escaparate.css. No se edita a mano. */

/* EL AVATAR ∂A — la geometría NO se escribe aquí: vive medida en `aro.ts` y llega en
 * `--hueco` desde el componente, porque cambia con el aro (el de confeti lo tiene más
 * pequeño). Capas: foto · aro · iconos por fuera · píldora del rol encima. */

.avatar {
	--avatar-size: 120px;
	/* Valor de respaldo. El de verdad lo pone el componente desde `aro.ts`. */
	--hueco: 83.875%;

	display: inline-flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: center;
	margin: 0;
}

.avatar__pieza {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--avatar-size);
	height: var(--avatar-size);
}

/* ── 1 · la foto: llena el hueco del aro, no flota dentro ──
 *
 * ⚠️ El centrado va por `inset`, NO por `place-items` del padre.
 *
 * Antes esto era `width/height: var(--hueco)` a secas, contando con que el
 * `place-items:center` de `.avatar__pieza` la centrara. Y no la centra: a un hijo
 * **absoluto** de una rejilla, el navegador le aplica el centrado del eje en línea
 * (horizontal) pero no el del eje de bloque, así que la foto se quedaba pegada arriba.
 * En un avatar de 68 px son 5,5 px, y es exactamente el desajuste que se veía.
 *
 * Con `inset` el mismo margen se reparte por los cuatro lados por definición: no
 * depende de qué haga el padre ni de qué navegador sea. */
.avatar__foto {
	position: absolute;
	inset: calc((100% - var(--hueco)) / 2);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--surface-sunken);
	border-radius: 50%;
}

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

/* ── el respaldo: iniciales, y si no hay ni nombre, una silueta ──
   Nunca las palabras «sin foto», que es lo que había: no cabían en el aro, salían
   recortadas, y encima estaban escritas a mano en el componente contra la regla de
   i18n. Las iniciales dicen quién es; un texto de sistema, no. */
.avatar__iniciales {
	font-family: var(--font-body);
	font-size: calc(var(--avatar-size, 44px) * 0.36);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--text-on-dark);
	letter-spacing: 0.01em;
	user-select: none;
}

/* La silueta: el último escalón, para quien no tiene ni foto ni nombre. */
.avatar__silueta {
	width: 46%;
	height: 46%;
	background: currentcolor;
	opacity: 0.32;
	mask:
		radial-gradient(circle at 50% 33%, #000 0 20%, transparent 21%),
		radial-gradient(ellipse 42% 30% at 50% 96%, #000 0 99%, transparent 100%);
	mask-composite: add;
}

/* El fondo del hueco lo pone el rol: así las iniciales se leen y de paso la pieza
   sigue diciendo de qué rol es aunque no haya llegado ni la foto ni el aro. */
.avatar__foto {
	color: var(--text-on-dark);
}
.avatar[data-rol='miembro'] .avatar__foto {
	background: var(--da-member);
}
.avatar[data-rol='grumete'] .avatar__foto {
	color: var(--da-ink);
	background: var(--da-grumete);
}
.avatar[data-rol='colaborador'] .avatar__foto {
	color: var(--da-ink);
	background: var(--da-partner);
}
.avatar[data-rol='pendiente'] .avatar__foto,
.avatar[data-rol='invitado'] .avatar__foto {
	background: var(--da-gray);
}

/* ── 2 · el aro y el Lottie, al 100 %, por encima de la foto ── */
.avatar__lottie,
.avatar__contorno {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	object-fit: contain;
}

.avatar__contorno[data-confeti='true'] {
	animation: avatar-celebra 0.6s var(--ease-bounce);
}

@keyframes avatar-celebra {
	40% {
		transform: scale(1.08) rotate(-3deg);
	}
}

/* mini: sin aro dibujado, un trazo del color del rol. A 32 px el doble aro se
   emborrona, así que aquí la señal es un solo color y ocupa todo el hueco. */
.avatar[data-modo='mini'] .avatar__foto {
	inset: 0;
	border: 2.5px solid var(--da-gray);
}

.avatar[data-modo='mini'][data-rol='grumete'] .avatar__foto {
	border-color: var(--da-grumete);
}
.avatar[data-modo='mini'][data-rol='miembro'] .avatar__foto {
	border-color: var(--da-member);
}
.avatar[data-modo='mini'][data-rol='colaborador'] .avatar__foto {
	border-color: var(--da-partner);
}
/* Invitado y miembro lite: el mismo trazo, discontinuo (Andoni, 23/09/2026). */
.avatar[data-modo='mini'][data-discontinuo] .avatar__foto {
	border-style: dashed;
}

/*
 * ── 3 · los iconos: A CABALLO DEL ARO, y DENTRO de la caja ──
 *
 * ⚠️ Aquí estaba el segundo desajuste, y es el que explica por qué los items «nunca se
 * veían»: **no se veían porque no estaban en el avatar**. Tenían el mismo problema que
 * la foto —absolutos dentro de una rejilla, centrados solo en horizontal— así que
 * arrancaban pegados arriba, y encima el radio de la órbita (47 %) los mandaba otros
 * 25 px hacia fuera. Acababan **por encima del borde de la pieza**, y cualquier
 * contenedor con scroll (la tira de «personas que te cruzaste», sin ir más lejos) los
 * recortaba enteros. Medido: la burbuja caía 25 px por encima del avatar.
 *
 * Ahora se centran por `inset` —como la foto— y la órbita se acorta a 33 %, que es el
 * máximo que deja la burbuja **entera dentro de la caja** (33 % + la mitad de 32 % = 49 %
 * del lado, contra el 50 % que hay hasta el borde). Sigue pisando el aro, que es lo que
 * pide el kit, pero el avatar vuelve a ser un cuadrado autocontenido: se puede meter en
 * una lista, en un scroll o en una tarjeta sin que nada lo recorte.
 */
.avatar__icono {
	--item-lado: 32%;

	position: absolute;
	inset: calc((100% - var(--item-lado)) / 2);
	display: grid;
	place-items: center;
	font-size: calc(var(--avatar-size) * 0.155);
	line-height: 1;
	background: var(--surface-card);
	/* El aro fino: sin él, una burbuja blanca sobre papel blanco no se ve. */
	border: 1.5px solid rgba(37, 37, 37, 0.12);
	border-radius: 50%;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
	transform: rotate(var(--angulo)) translateY(calc(var(--avatar-size) * -0.33)) rotate(calc(var(--angulo) * -1));
}

/* El dibujo dentro de la burbuja. No llena el círculo entero: se le deja aire, o el
   trazo toca el borde y la pieza parece apretada. */
.avatar__icono .item {
	width: 70%;
	height: 70%;
	color: var(--da-ink);
}

/* ── 4 · la píldora del rol, superpuesta abajo ── */
.avatar__rol {
	position: absolute;
	bottom: 2%;
	padding: 3px calc(var(--avatar-size) * 0.09);
	font-family: var(--font-display);
	font-size: calc(var(--avatar-size) * 0.09);
	font-weight: var(--fw-black);
	color: var(--text-on-dark);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	white-space: nowrap;
	background: var(--da-ink);
	border-radius: var(--radius-xs);
}

.avatar__etiqueta {
	padding: var(--space-1) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--text-on-dark);
	background: var(--text-primary);
	border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * ⚠️ Aquí NO se esconde el Lottie.
	 *
	 * Es lo que había, y en modo completo el Lottie **es el aro**: al ocultarlo, el
	 * avatar se quedaba en una foto redonda pelada, sin la señal de rol, que es
	 * justo lo único que el avatar existe para decir. Y encima el JSON se seguía
	 * descargando para no verse.
	 *
	 * Ahora lo resuelve el componente: con movimiento reducido, `completo` se degrada
	 * a `simple` y se pinta el contorno quieto. Aquí solo queda parar lo que anima
	 * sin ser el aro.
	 */
	.avatar__contorno[data-confeti='true'] {
		animation: none;
	}
}


/* EL ARO DEL AVATAR — dos circunferencias, y los colores salen de los tokens.
 * La geometría vive en `aro.ts` y NO se escribe a mano aquí: si el dibujo cambia,
 * cambia allí y esto se entera solo. */

.aro {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* El de fuera: el color de la parada de la senda. El invitado usa el del pendiente —
 * la llave no es una parada, y no tiene aro propio en el kit. */
.aro__rol {
	stroke: var(--da-pendiente);
}

.aro[data-rol='grumete'] .aro__rol {
	stroke: var(--da-grumete);
}

.aro[data-rol='miembro'] .aro__rol {
	stroke: var(--da-member);
}

.aro[data-rol='colaborador'] .aro__rol {
	stroke: var(--da-partner);
}

/* El de dentro: el lima de la casa, igual en los cuatro. Es lo que dice que esto es
 * ∂iario aventureros y no cualquier otra app con aros de colores. */
.aro__marca {
	stroke: var(--da-accent);
}


/* SELLO DE ROL — pegatina festoneada. Depende de styles/tokens.css.
 * Contorno = aún no lo tienes · sólido = conseguido. El color lo pone `--sello`. */

/* El tamaño se hereda de quien lo monta (`--sello-size`); 42px es el de la senda,
 * que era el único caso cuando se dibujó. El glifo escala con él. */
.da-sello {
	--sello-size: 42px;

	position: relative;
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--sello-size);
	height: var(--sello-size);
	color: var(--sello, var(--da-gray));
}

.da-sello--accent {
	--sello: var(--da-accent);
}

.da-sello--grumete {
	--sello: var(--da-stamp-check);
}

.da-sello--member {
	--sello: var(--da-stamp-key);
}

.da-sello--partner {
	--sello: var(--da-partner);
}

.da-sello--pendiente,
.da-sello--neutral {
	--sello: var(--da-gray);
}

.da-sello__shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 7;
}

.da-sello.is-solid .da-sello__shape {
	fill: currentColor;
	stroke: currentColor;
}

.da-sello__icon {
	position: relative;
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: var(--fw-black);
	line-height: 1;
	color: currentColor;
}

.da-sello__glifo {
	position: relative;
	width: calc(var(--sello-size) * 0.48);
	height: calc(var(--sello-size) * 0.48);
	color: currentColor;
}

/*
 * El dibujo de dentro va en TINTA, no en blanco.
 *
 * Andoni, 07/09/2026, eligiendo viendo las dos versiones una al lado de otra:
 * *«B · el dibujo en tinta»*.
 *
 * El blanco sobre el color del rol no se ve: el check sobre el amarillo del grumete da
 * **1,75:1** y la mano sobre el lima **1,84:1**, cuando para un dibujo el listón es 3.
 * En tinta pasan los cinco de sobra:
 * grumete 8,75 · lima 8,35 · colaborador 7,65 · pendiente y neutral 5,65.
 *
 * Esto NO es el mismo caso que el texto: aquí no vale ninguna de las tintas de rol nuevas,
 * porque un dibujo no es letra — lo que hay que hacer es dejar de pintarlo en blanco.
 */
.da-sello.is-solid .da-sello__icon,
.da-sello.is-solid .da-sello__glifo {
	color: var(--da-ink);
}

/*
 * El miembro es la excepción, y la única: sobre el magenta el blanco da **4,21:1** y la
 * tinta se queda en **3,64:1**. Es el único sello donde el blanco gana, así que se queda.
 */
.da-sello--member.is-solid .da-sello__icon,
.da-sello--member.is-solid .da-sello__glifo {
	color: var(--text-on-dark);
}

/*
 * DISCONTINUO — invitado y miembro lite (Andoni, 23/09/2026): el contorno de su parada,
 * pero a trazos. Un trazo por lóbulo (`pathLength` = 144 en `SelloRol.tsx`).
 *
 * Sólido y discontinuo no pueden rellenar con el mismo color del borde: los trazos se
 * fundirían con el relleno y el sello se leería como uno normal. Por eso el relleno baja
 * a un lavado del color y el dibujo va en la tinta del rol.
 */
.da-sello.is-discontinuo .da-sello__shape {
	stroke-linecap: round;
	stroke-dasharray: 7 5;
}

.da-sello.is-discontinuo.is-solid .da-sello__shape {
	fill: color-mix(in srgb, var(--sello, var(--da-gray)) 22%, var(--da-paper));
}

.da-sello.is-discontinuo.is-solid .da-sello__icon,
.da-sello.is-discontinuo.is-solid .da-sello__glifo {
	color: var(--sello-tinta, var(--da-ink));
}

.da-sello--member.is-discontinuo {
	--sello-tinta: var(--da-member-ink);
}


/* EL SELLO DE UN ROL — envoltorio de tamaño sobre el sello festoneado del DS.
 * El color vive en el sello; el nombre, siempre en tinta (regla A-3). */

.selloRol {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	vertical-align: middle;
}

/* El sello del DS se escala por su propia variable. */
.selloRol[data-tamano='sm'] .da-sello {
	--sello-size: 16px;
}
.selloRol[data-tamano='md'] .da-sello {
	--sello-size: 22px;
}
.selloRol[data-tamano='lg'] .da-sello {
	--sello-size: 38px;
}

/* El sello del colaborador viene del kit en PNG (festoneado teal con corona): ocupa la
 * misma caja que el sello vectorial de los demás roles. */
.selloRol__kit {
	object-fit: contain;
}

.selloRol[data-tamano='sm'] .selloRol__kit {
	width: 16px;
	height: 16px;
}
.selloRol[data-tamano='md'] .selloRol__kit {
	width: 22px;
	height: 22px;
}
.selloRol[data-tamano='lg'] .selloRol__kit {
	width: 38px;
	height: 38px;
}

.selloRol__nombre {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
}

/* Los iconos de lucide (donde el kit aún no tiene pieza) se dimensionan con el sello. */
.selloRol .da-sello__icon svg {
	width: calc(var(--sello-size) * 0.52);
	height: calc(var(--sello-size) * 0.52);
}


/* La foto de perfil de un grupo. Redonda como en WhatsApp, con un aro del color de su
 * rol mínimo. Nada más encima: el estado lo cuenta la tarjeta, no la foto. */

.fotoGrupo {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	overflow: hidden;
	background: var(--surface-sunken);
	border: 2px solid var(--aro, var(--border));
	border-radius: var(--radius-pill);
}

.fotoGrupo[data-tono='grumete'] {
	--aro: var(--da-stamp-check);
}

.fotoGrupo[data-tono='member'] {
	--aro: var(--da-stamp-key);
}

.fotoGrupo[data-tono='partner'] {
	--aro: var(--da-partner);
}

.fotoGrupo[data-tono='pendiente'] {
	--aro: var(--da-gray);
}

.fotoGrupo[data-tamano='md'] {
	width: 38px;
	height: 38px;
}

.fotoGrupo[data-tamano='lg'] {
	width: 52px;
	height: 52px;
}

/* Una foto de WhatsApp llena el círculo; una pieza del kit respira dentro de él. */
.fotoGrupo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fotoGrupo__img[data-pieza='true'] {
	width: 74%;
	height: 74%;
	object-fit: contain;
}

/* El hueco de "todavía sin foto": el emoji, y que se lea como lo que es. */
.fotoGrupo__hueco {
	font-size: 17px;
	line-height: 1;
	opacity: 0.75;
}

.fotoGrupo[data-tamano='lg'] .fotoGrupo__hueco {
	font-size: 23px;
}


/* LA FICHA DE UNA PERSONA — la misma en el buscador, en la lista de amigos y al elegir
 * a quién mandas una carta. Papel claro sobre el fondo de la app; en las pantallas de
 * trastienda (fondo oscuro) hereda su color con las variables de abajo. */

.persona {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	width: 100%;
	background: var(--persona-fondo, var(--da-paper));
	border: var(--border-width) solid var(--persona-linea, var(--da-gray-line));
	border-radius: var(--radius-md);
	transition: border-color var(--dur-fast) var(--ease);
}

.persona:hover {
	border-color: var(--persona-linea-viva, var(--da-accent));
}

.persona__cuerpo {
	display: flex;
	flex: 1;
	gap: var(--space-3);
	align-items: center;
	min-width: 0;
	padding: var(--space-3);
	color: inherit;
	text-decoration: none;
}

.persona__cuerpo--quieta {
	cursor: default;
}

/* El avatar lleva el color del rol en el aro. La regla A-3: el color va en el aro, el
 * texto va en tinta. */
.persona__avatar {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	color: var(--persona-tinta, var(--da-ink));
	background: var(--persona-hueco, var(--da-paper-2));
	border: 2px solid var(--da-pendiente);
	border-radius: 50%;
}

.persona__avatar[data-rol='miembro'] {
	border-color: var(--da-member);
}

.persona__avatar[data-rol='grumete'] {
	border-color: var(--da-grumete);
}

.persona__avatar[data-rol='colaborador'] {
	border-color: var(--da-partner);
}

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

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

.persona__nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	color: var(--persona-tinta, var(--da-ink));
	white-space: nowrap;
}

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

.persona__user {
	font-size: var(--text-xs);
	color: var(--persona-tinta-suave, var(--da-gray-ink));
}

.persona__pistas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: var(--text-xs);
	color: var(--persona-tinta-suave, var(--da-gray-ink));
}

/* El motivo por el que salió: solo aparece cuando la coincidencia no está a la vista
 * (correo, teléfono), y por eso se marca — es lo que explica el resultado. */
.persona__match {
	padding: 0 var(--space-2);
	font-weight: var(--fw-bold);
	color: var(--da-partner-ink);
	background: var(--persona-match-fondo, rgba(35, 207, 157, 0.14));
	border-radius: var(--radius-pill);
}

.persona__accion {
	flex: 0 0 auto;
	padding-right: var(--space-3);
}


/* EL BUSCADOR DE PERSONAS. Se usa en pantallas claras (invitar, amigos) y oscuras
 * (la trastienda): los colores salen de variables que la pantalla anfitriona puede
 * redefinir, y por defecto son los de la app clara. */

.buscap {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.buscap__campo {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-2) var(--space-3);
	background: var(--persona-fondo, var(--da-paper));
	border: var(--border-width-strong) solid var(--persona-linea, var(--da-gray-line));
	border-radius: var(--radius-md);
}

.buscap__campo:focus-within {
	border-color: var(--da-accent);
}

/* El rótulo se lee en voz alta y no se pinta: el campo ya lleva su lupa y su ejemplo. */
.buscap__etiqueta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.buscap__input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: var(--text-sm);
	color: var(--persona-tinta, var(--da-ink));
	background: none;
	border: 0;
}

.buscap__input:focus {
	outline: none;
}

.buscap__pista,
.buscap__vacio {
	margin: 0;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--persona-tinta-suave, var(--da-gray-ink));
}

.buscap__demo {
	padding: var(--space-2) var(--space-3);
	margin: 0;
	font-size: var(--text-xs);
	color: var(--da-grumete-ink);
	background: rgba(254, 208, 26, 0.16);
	border-radius: var(--radius-sm);
}

.buscap__lista {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 0;
	margin: 0;
	list-style: none;
}


/* Las llaves que has repartido. Misma anatomía que el resto de listas de la app:
   tarjeta de papel sobre superficie, tinta #252525 y el color solo en el borde. */

.mi-inv {
	max-width: 640px;
	padding: var(--space-6) var(--space-4) var(--space-16);
	margin: 0 auto;
}

.mi-inv__top {
	margin-bottom: var(--space-5);
	text-align: center;
}

.mi-inv__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: 28px;
	color: var(--da-ink);
}

.mi-inv__sub {
	margin: var(--space-2) 0 0;
	font-size: 14px;
	color: var(--da-gray);
}

/* El sello 🥪: lo que mide si el motor gira. Va arriba a propósito. */
.mi-inv__sello {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-4);
	margin-bottom: var(--space-5);
	background: var(--da-paper);
	border: 1px solid var(--da-border);
	border-radius: var(--radius-md);
}

.mi-inv__sello-emoji {
	font-size: 26px;
	line-height: 1;
}

.mi-inv__sello-txt {
	font-size: 14px;
	line-height: 1.45;
	color: var(--da-ink);
}

.mi-inv__vacio {
	font-size: 14px;
	color: var(--da-gray);
	text-align: center;
}

.mi-inv__vacio--caja {
	padding: var(--space-8) var(--space-5);
	color: var(--da-ink);
	background: var(--da-paper);
	border: 1px dashed var(--da-border);
	border-radius: var(--radius-md);
}

.mi-inv__cta {
	display: inline-block;
	padding: 10px 20px;
	margin-top: var(--space-3);
	font-weight: 700;
	color: var(--da-accent-ink);
	text-decoration: none;
	background: var(--da-accent);
	border-radius: var(--radius);
}

.mi-inv__lista {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.mi-inv__fila {
	padding: var(--space-4);
	background: var(--da-paper);
	border: 1px solid var(--da-border);
	/* El estado vive en el filo izquierdo: se lee de un vistazo sin leer nada. */
	border-left: 4px solid var(--da-gray);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.mi-inv__fila[data-vida='viva'] {
	border-left-color: var(--da-accent);
}

.mi-inv__fila[data-vida='abierta'] {
	border-left-color: var(--da-grumete);
}

.mi-inv__fila[data-vida='gastada'] {
	border-left-color: var(--da-member);
}

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

.mi-inv__emoji {
	font-size: 20px;
}

.mi-inv__nombre {
	font-weight: 700;
	color: var(--da-ink);
}

.mi-inv__estado {
	padding: 3px 10px;
	margin-left: auto;
	font-size: 12px;
	color: var(--da-ink);
	white-space: nowrap;
	background: var(--da-paper-2);
	border-radius: var(--radius-pill);
}

.mi-inv__que {
	margin: var(--space-2) 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--da-ink);
}

.mi-inv__cuando {
	margin: var(--space-1) 0 var(--space-3);
	font-size: 12px;
	color: var(--da-gray);
}

.mi-inv__enlace {
	display: block;
	padding: var(--space-2) var(--space-3);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--da-ink);
	white-space: nowrap;
	background: var(--da-paper-soft);
	border-radius: var(--radius-xs);
}

.mi-inv__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.mi-inv__btn {
	min-height: 44px;
	padding: 0 var(--space-4);
	font-size: 13px;
	font-weight: 600;
	color: var(--da-ink);
	cursor: pointer;
	background: var(--da-paper-2);
	border: none;
	border-radius: var(--radius);
}

.mi-inv__btn--baja {
	color: var(--da-gray);
	text-decoration: underline;
	background: transparent;
}

.mi-inv__confirmar {
	padding: var(--space-3);
	margin-top: var(--space-3);
	background: var(--da-paper-soft);
	border-radius: var(--radius-sm);
}

.mi-inv__confirmar p {
	margin: 0 0 var(--space-2);
	font-size: 13px;
	line-height: 1.45;
	color: var(--da-ink);
}

.mi-inv__err {
	display: block;
	margin-top: var(--space-2);
	font-size: 12px;
	color: var(--da-member);
}

/* La puerta de ida: escribir una invitación nueva. */
.mi-inv__nueva {
	display: inline-block;
	padding: 10px 18px;
	margin-top: var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	color: var(--accent-ink);
	text-decoration: none;
	background: var(--accent);
	border-radius: var(--radius-pill);
	box-shadow: var(--press-accent);
}



/* ═══ «Esto no se guarda» — _comun/aviso-demo.mjs: sale de la etiqueta DEMO al tocar cualquier cosa ═══ */
.ad-aviso{position:fixed;z-index:120;top:12px;left:12px;display:none;box-sizing:border-box;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:11px 14px 12px;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.4;letter-spacing:0;text-align:left;text-transform:none;color:#f4f4ef;background:#12130f;border:1px solid color-mix(in srgb,var(--da-accent,var(--accent,#b9c91c)) 60%,transparent);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.35);pointer-events:none;transform-origin:var(--ad-x,50%) 0}
.ad-aviso b{font-weight:800;color:var(--da-accent,var(--accent,#b9c91c))}
.ad-aviso::before{content:'';position:absolute;top:-7px;left:var(--ad-x,50%);width:12px;height:12px;margin-left:-6px;background:#12130f;border-top:1px solid color-mix(in srgb,var(--da-accent,var(--accent,#b9c91c)) 60%,transparent);border-left:1px solid color-mix(in srgb,var(--da-accent,var(--accent,#b9c91c)) 60%,transparent);transform:rotate(45deg)}
.ad-aviso[data-ad-sin-pico]::before{display:none}
.ad-aviso[data-ad-medir]{display:block;visibility:hidden}
.ad-aviso[data-ad-visible]{display:block;animation:ad-sale .34s cubic-bezier(.22,1,.36,1) both}
.ad-aviso[data-ad-va]{animation:ad-va .26s ease both}
@keyframes ad-sale{from{opacity:0;transform:translateY(-6px) scale(.55)}}
@keyframes ad-va{to{opacity:0;transform:translateY(-4px) scale(.96)}}
.ad-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ad-pronto{margin:10px 0 0;font-size:.8rem;line-height:1.4;color:inherit;opacity:.78}
.ad-pronto b{font-weight:800}
@media (prefers-reduced-motion:reduce){.ad-aviso[data-ad-visible],.ad-aviso[data-ad-va]{animation:none}}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   📱 EL ESCAPARATE DE «INVITAR» — lo propio de /exp/demo/invitar/: la cinta, la cabecera, las pestañas, el móvil que se
   reproduce solo y el pop-up de «esto no se guarda». Lo de DENTRO del móvil viste con el CSS de la app (tokens, el
   compositor, la carta, «Lo que has repartido», la ficha de una persona, el avatar, el sello y la foto de grupo), que
   construir.mjs pone delante de esta hoja. Aquí solo va lo que la app todavía no tiene y el marco del teléfono.
   Prefijos: esc- (la página), movil/app- (el teléfono), gr (fila de grupo), hoja-app, plan-app, perfil-app, quien, nsg.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

html{-webkit-text-size-adjust:100%}

/* ── La cinta de demo, la misma de todas las páginas de /exp/demo/ (experiencias-sept-oct/experiencias.mjs) ── */
.demo{position:sticky;top:0;z-index:20}
.demo__cinta{display:flex;gap:var(--space-3);align-items:center;justify-content:center;padding:8px var(--space-4);font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:#fff;background:#12130f}
.demo__cinta b{color:var(--da-accent)}
.demo__que{padding:3px 10px;font:inherit;font-size:11px;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill)}
.demo__panel{padding:var(--space-4);font-size:var(--text-sm);color:#f4f4ef;background:#1c1d18}
.demo__panel p{max-width:520px;margin:0 auto var(--space-3)}
.demo__panel .ad-pronto{max-width:520px;margin:var(--space-3) auto 0}

/* ── La cabecera: una frase ── */
.esc-top{max-width:560px;margin:0 auto;padding:22px 16px 4px;text-align:center}
.esc-top__pronto{display:inline-block;margin:0 0 10px;padding:4px 12px;font:700 11.5px/1.3 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--da-member-ink);background:color-mix(in srgb,var(--da-member) 11%,transparent);border-radius:var(--radius-pill)}
.esc-top__h1{margin:0;font-family:var(--font-display);font-size:32px;line-height:1.08;color:var(--da-ink)}
.esc-top__sub{max-width:34ch;margin:8px auto 0;font-size:15.5px;line-height:1.45;color:var(--text-secondary)}

/* ── Las pestañas: saltan de escena. Sin animación (o sin JS) son anclas a cada escena ── */
.esc{max-width:420px;margin:0 auto;padding:14px 16px 4px}
.esc__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
.esc__tab{position:relative;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-width:0;min-height:56px;padding:6px 3px 9px;overflow:hidden;font:600 12px/1.15 var(--font-body);text-align:center;color:var(--da-ink);text-decoration:none;cursor:pointer;background:var(--da-paper);border:1px solid var(--da-border);border-radius:12px}
.esc__tab b{display:grid;place-items:center;width:22px;height:22px;font-size:12px;background:var(--da-paper-2);border-radius:50%}
.esc__tab[aria-selected='true']{border-color:var(--da-ink)}
.esc__tab[aria-selected='true'] b{color:var(--da-accent-ink);background:var(--da-accent)}
/* La barrita de avance, como las historias: dice cuánto queda de la escena. */
.esc__tab::after{position:absolute;bottom:0;left:0;width:calc(var(--avance,0) * 100%);height:3px;content:'';background:var(--da-accent);transition:width .45s ease}
.esc__mando{display:flex;gap:10px;align-items:center;justify-content:center;margin:10px 0 0;font-size:12.5px;color:var(--text-secondary)}
.esc__pausa{min-height:32px;padding:0 12px;font:700 12.5px var(--font-body);color:var(--da-ink);cursor:pointer;background:var(--da-paper);border:1px solid var(--da-border);border-radius:var(--radius-pill)}

/* ── Cada escena: su título, tres pasos y su móvil ── */
.escena{margin:0 0 30px;scroll-margin-top:44px}
.escena__t{display:flex;gap:8px;align-items:center;margin:0 0 6px;font:800 19px/1.2 var(--font-display);color:var(--da-ink)}
.escena__n{display:grid;flex:0 0 auto;place-items:center;width:26px;height:26px;font:800 13px var(--font-body);color:var(--da-accent-ink);background:var(--da-accent);border-radius:50%}
.escena__pasos{display:grid;gap:4px;padding:0;margin:0 0 12px;list-style:none;counter-reset:paso}
.escena__pasos li{position:relative;padding-left:24px;font-size:14px;line-height:1.35;color:var(--text-secondary)}
.escena__pasos li::before{position:absolute;top:1px;left:0;display:grid;place-items:center;width:17px;height:17px;font-size:10px;font-weight:800;color:var(--da-ink);content:counter(paso);counter-increment:paso;background:var(--da-paper-2);border-radius:50%}
.escena__pasos a{font-weight:700;color:inherit}
.anima .escena:not([data-activa]){display:none}
.anima .escena__pasos li{transition:color .3s ease}
.anima .escena__pasos li[data-ahora]{color:var(--da-ink)}
.anima .escena__pasos li[data-ahora]::before{background:var(--da-accent)}

/* ═══ EL MÓVIL ═══ */
.movil{position:relative;width:100%;max-width:340px;padding:9px;margin:0 auto;background:#15140f;border-radius:38px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.movil__pantalla{position:relative;isolation:isolate;height:560px;overflow:hidden;font-family:var(--font-body);font-size:14px;color:var(--da-ink);background:var(--da-paper-soft);border-radius:30px}
.movil__estado{position:relative;display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 24px;font:700 12px var(--font-body);color:var(--da-ink);background:var(--da-paper)}
.movil__estado::after{position:absolute;top:7px;left:50%;width:74px;height:16px;margin-left:-37px;content:'';background:#15140f;border-radius:10px}
.movil__estado i{display:inline-block;width:18px;height:9px;border:1.5px solid currentColor;border-radius:3px;opacity:.8}
.app-barra{display:flex;gap:4px;align-items:center;height:44px;padding:0 10px 0 4px;font-size:15px;font-weight:700;background:var(--da-paper);border-bottom:1px solid var(--da-border)}
.app-barra span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-barra__atras{display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;padding:0;font-size:26px;line-height:1;color:var(--da-ink);cursor:pointer;background:none;border:0;border-radius:50%}
.app-cuerpo{padding:12px}
.movil button{font-family:var(--font-body)}

/* El dedo que toca solo. Va por encima de todo lo del móvil y no recoge toques. */
.dedo{position:absolute;top:0;left:0;z-index:9;width:38px;height:38px;margin:-19px 0 0 -19px;pointer-events:none;background:rgba(18,19,15,.28);border:2.5px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.25);opacity:0;transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .25s ease}
.dedo[data-visible]{opacity:1}
.dedo[data-toca]{animation:dedo-toca .32s ease}
@keyframes dedo-toca{45%{box-shadow:0 0 0 10px rgba(185,201,28,.35);scale:.82}}

/* Lo que el móvil dice un momento, abajo (el candado, el «tócala»). */
.movil__toast{position:absolute;right:12px;bottom:14px;left:12px;z-index:8;padding:10px 12px;margin:0;font-size:13px;font-weight:600;line-height:1.35;color:#fff;text-align:center;pointer-events:none;background:rgba(18,19,15,.9);border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.movil__toast[data-visible]{opacity:1;transform:none}

/* El escribir, letra a letra. */
.tecleo:empty::before{content:attr(data-placeholder);color:var(--da-gray)}
.tecleo[data-tecleando]::after{display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;content:'';background:currentColor;animation:parpadeo .8s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}

/* ── Escena 1 · los grupos ── */
.app-pista{margin:0 0 10px;padding:8px 10px;font-size:12.5px;line-height:1.35;color:var(--da-grumete-ink);background:var(--da-grumete-wash);border-radius:10px}
.grupos-app{display:grid;gap:6px}
.gr{display:flex;gap:10px;align-items:center;width:100%;min-height:54px;padding:7px 10px;font:inherit;text-align:left;color:var(--da-ink);cursor:pointer;background:var(--da-paper);border:1.5px solid var(--da-border);border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease}
.gr__txt{display:grid;flex:1;gap:1px;min-width:0}
.gr__txt b{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.gr__txt small{overflow:hidden;font-size:11.5px;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap}
.gr__estado{display:flex;flex:0 0 auto;flex-direction:column;gap:2px;align-items:center;font-size:10.5px;color:var(--text-secondary);white-space:nowrap}
.gr__estado .da-sello{--sello-size:22px}
.gr[data-estado='candado']{background:var(--da-paper-2)}
.gr[data-estado='candado'] .gr__txt,.gr[data-estado='candado'] .fotoGrupo{opacity:.55}
.gr[data-elegido]{border-color:var(--da-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--da-accent) 32%,transparent)}
.gr[data-sacude]{animation:sacude .45s ease}
@keyframes sacude{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ── La hoja que sube (escenas 1 y 2) ── */
.movil__velo{position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(18,19,15,.34);opacity:0;transition:opacity .3s ease}
.escena[data-hoja] .movil__velo{pointer-events:auto;opacity:1}
.hoja-app{position:absolute;right:0;bottom:0;left:0;z-index:4;display:grid;gap:10px;padding:8px 12px 14px;background:var(--da-paper);border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);transform:translateY(105%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.escena[data-hoja] .hoja-app{transform:none}
.hoja-app__asa{justify-self:center;width:40px;height:4px;background:var(--da-paper-2);border-radius:2px}
.hoja-app__t{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.hoja-app .buscap__input{display:block;min-height:20px;font-size:14px}
.hoja-app .buscap__lista{display:none}
.escena[data-busca] .hoja-app .buscap__lista{display:flex}
.hoja-app .persona__cuerpo{gap:10px;padding:8px 10px}
.hoja-app .persona__avatar{width:34px;height:34px}
.hoja-app .persona__accion{padding-right:10px}
.persona[data-no]{background:var(--da-paper-soft)}
.persona[data-no] .persona__cuerpo{opacity:.62}
.persona-no{display:inline-block;padding:4px 8px;font-size:11px;font-weight:700;color:var(--text-secondary);white-space:nowrap;background:var(--da-paper-2);border-radius:var(--radius-pill)}
.persona__ok{display:none;place-items:center;width:30px;height:30px;font-weight:800;color:var(--da-accent-ink);background:var(--da-accent);border-radius:50%}
.persona[data-elegida]{border-color:var(--da-accent)}
.persona[data-elegida] .crear-inv__elegir{display:none}
.persona[data-elegida] .persona__ok{display:grid}
.hoja-app .crear-inv__enviar{margin-top:0}
.escena:not([data-persona]) .hoja-app__mandar{opacity:.55}
.hoja-app__hecho{display:none;padding:10px 12px;margin:0;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--da-accent-text);background:var(--da-accent-wash);border-radius:10px}
.escena[data-hecho] .hoja-app__hecho{display:block}
.escena[data-hecho] .hoja-app__mandar{display:none}

/* ── Escena 2 · la ficha del plan (como la del escaparate de la puerta) ── */
.plan-app{overflow:hidden;background:var(--da-paper);border-radius:14px;box-shadow:var(--shadow-card)}
.plan-app__cab{padding:16px 14px;color:#fff;background:linear-gradient(135deg,#3b3f06,#1d1a12)}
.plan-app__cinta{display:inline-block;padding:3px 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1d1a12;background:#f6b51c;border-radius:99px}
.plan-app__t{margin:8px 0 2px;font:800 24px/1.1 var(--font-display)}
.plan-app__sub{margin:0;font-size:13px;line-height:1.35;opacity:.86}
.plan-app__datos{padding:4px 14px 8px;margin:0;font-size:13px;list-style:none}
.plan-app__datos li{padding:7px 0;border-bottom:1px solid var(--da-border)}
.plan-app__datos li:last-child{border-bottom:0}
.plan-app__invitar{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:12px;font:800 15px var(--font-body);color:var(--da-ink);cursor:pointer;background:var(--da-paper);border:2px dashed color-mix(in srgb,var(--da-member) 55%,transparent);border-radius:14px}
.llave-app{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;font-size:12.5px;line-height:1.4;background:var(--da-paper-soft);border-radius:10px}
.llave-app__e{font-size:20px;line-height:1}
.llave-app b{display:block;font-size:13.5px}

/* ── Escena 3 · perfil → compositor → sobre ── */
.p3{position:absolute;inset:28px 0 0;display:flex;flex-direction:column;visibility:hidden;background:var(--da-paper-soft);opacity:0;transform:translateX(26px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.escena[data-p='perfil'] .p3--perfil,.escena[data-p='compositor'] .p3--compositor,.escena[data-p='sobre'] .p3--sobre{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.perfil-app{display:flex;flex-direction:column;gap:8px;align-items:center;padding:26px 16px;text-align:center}
.perfil-app__nota{max-width:26ch;margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--text-secondary)}
.perfil-app .mi-inv__nueva{margin-top:6px;cursor:pointer;border:0}
.movil .crear-inv__h1{margin:0 0 12px;font-size:22px}
.movil .crear-inv__paso-titulo{margin:0 0 8px;font-size:12px}
.movil .crear-inv__op{gap:2px;padding:10px;background:var(--da-paper);border:var(--border-width-strong,2px) solid var(--border);border-radius:var(--radius-md)}
.movil .crear-inv__op-label{font-size:14px}
.movil .crear-inv__op-desc{font-size:11.5px}
.movil .crear-inv__campo{margin-top:12px}
.movil .crear-inv__texto{display:block;min-height:112px;font-size:14.5px;white-space:pre-wrap}
.escena[data-modo='sistema'] .crear-inv__campo{display:none}
.movil .crear-inv__enviar{margin-top:14px}
.sobre-app{display:block;margin:16px auto 0;text-decoration:none}
.movil .carta__para{margin-bottom:10px;font-size:24px}
.movil .carta__envoltorio{height:180px}
.movil .carta__abrir{margin-top:14px}
.p3 .crear-inv__enlace{margin-top:14px;padding:12px}
.p3 .crear-inv__enlace-url{color:var(--text-secondary)}
.p3__escribela{display:block;margin:14px 0 0;font-size:14px;font-weight:700;text-align:center;color:var(--da-ink)}

/* ── Escena 4 · «Mis invitaciones»: quién vino de tu parte ── */
.movil .mi-inv{max-width:none;padding:12px}
.movil .mi-inv__titulo{font-size:22px;font-weight:var(--fw-black,900);text-align:left} /* en la app es un <h1>: aquí, un <p> con su peso */
.quien-t{margin:2px 0 10px;font-size:12px;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.movil .mi-inv__lista{gap:8px}
.quien{position:relative;padding:10px 12px;border-left-width:4px;transition:opacity .35s ease,transform .35s ease,box-shadow .2s ease}
.quien .mi-inv__cabeza{gap:8px}
.quien .avatar{flex:0 0 auto}
.quien .mi-inv__nombre{overflow:hidden;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
.quien .mi-inv__estado{padding:3px 8px;font-size:11px}
.quien[data-estado='pendiente']{border-left-color:var(--da-grumete)}
.quien[data-estado='unido']{border-left-color:var(--da-accent)}
.quien[data-estado='fue']{border-left-color:var(--da-member)}
/* «De dónde vino» es un enlace que ocupa la fila entera; los botones van por encima. */
.quien__de{display:block;margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--da-ink);text-decoration:none}
.quien__de::after{position:absolute;inset:0;content:'';border-radius:inherit}
.quien__de span{text-decoration:underline;text-underline-offset:2px}
.quien .mi-inv__acciones{position:relative;z-index:1;gap:6px;margin-top:8px}
.quien .mi-inv__btn{min-height:36px;padding:0 12px;font-size:12px}
.quien[data-pulsada]{box-shadow:0 0 0 3px color-mix(in srgb,var(--da-accent) 40%,transparent)}
.anima .quien:not([data-visto]){opacity:0;transform:translateY(10px)}

/* ═══ «Pruébalo ya»: el compositor de verdad, que ya existía ═══ */
.esc-probar{max-width:560px;margin:0 auto;padding:10px 16px 0;text-align:center;scroll-margin-top:44px}
.esc-probar h2{margin:0;font-family:var(--font-display);font-size:24px;line-height:1.15}
.esc-probar p{max-width:40ch;margin:8px auto 0;font-size:14.5px;line-height:1.45;color:var(--text-secondary)}
.esc-pie{display:grid;gap:10px;justify-items:center;max-width:560px;margin:8px auto 48px;padding:0 16px;font-size:14px;text-align:center}
.esc-pie a{font-weight:700;color:var(--da-ink)}
.esc-pie nav{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center}

/* ═══ 🧪 El pop-up de «esto no se guarda» ═══ */
.nsg{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(18,19,15,.62)}
.nsg[hidden]{display:none}
.nsg__caja{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;max-width:340px;max-height:calc(100dvh - 40px);padding:22px 20px 18px;overflow:auto;text-align:center;background:var(--da-paper);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.nsg__seta{width:40px;height:40px}
.nsg__t{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:800;line-height:1.25}
.nsg__s,.nsg__que{margin:0;font-size:.9rem;line-height:1.45;color:var(--text-secondary)}
.nsg__que{padding:10px 12px;color:var(--da-ink);background:var(--da-paper-soft);border-radius:10px}
.nsg__ok{width:100%;min-height:46px;margin-top:4px;font:800 15px var(--font-body);color:var(--da-accent-ink);cursor:pointer;background:var(--da-accent);border:0;border-radius:12px;box-shadow:0 4px 0 var(--da-accent-shadow)}

a:focus-visible,button:focus-visible{outline:3px solid var(--da-member);outline-offset:3px}

/* ═══ En un ordenador: el móvil a la derecha, los pasos a la izquierda ═══ */
@media (min-width:860px){
	.esc{max-width:820px}
	.esc__tabs{max-width:520px;margin:0 auto 20px}
	.escena{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:center}
	.escena__t{font-size:24px}
	.escena__pasos li{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
	.dedo,.movil__toast,.hoja-app,.movil__velo,.p3,.quien,.gr,.esc__tab::after,.escena__pasos li{transition:none!important;animation:none!important}
	.tecleo[data-tecleando]::after{animation:none}
}