/* Equipo Tagers · los cuartos de una lección (ronda 29, 16 oct 2026; equipo-salas). «Una casa, nueve cuartos» (README §2.4 · §3.3; HECHOS
   M13 · M16; D29-2). Jorge, ese día: «todo lo siento muy monótono… le falta diseño, el diseño me cansa, se ve todo igual».
   Cada lección vive en un cuarto de la casa —su luz, sus objetos, su juego— y lo único que se repite es la mesa donde se contesta la
   pregunta. El cuarto se pone con `data-sala="<clave>"` en la raíz de la lección (la lección, la previa, la tarjeta del kiosko, /kit/salas);
   los datos de cada cuarto viven en components/kit/salas.ts. Cómo funciona, en tres capas:
     1. la luz: cada cuarto re-asigna DENTRO de sí los tokens del kit (vino, papel, hoja, línea, crema), así que toda pieza que ya existe
        —la pregunta incluida— toma el tono del cuarto y conserva su única forma;
     2. la cabeza: el título se vuelve la banda del cuarto (foto velada, ilustración, pergamino, espejo, noche);
     3. las pieles: lo que una pieza se pone en ese cuarto (`@piel <bloque>:<piel>`, las mismas palabras que salas.ts).
   `casa` es como se ve hoy y no tiene ni una regla: las 125 lecciones publicadas (escenario NULL ⇒ casa) no cambian en nada. equipo.css no
   se toca; aquí sólo se agrega. Un color crudo vive sólo en :root. Sólo transform y opacity se mueven; un movimiento por cuarto; nada se
   mueve solo salvo las estrellas de la noche; prefers-reduced-motion lo detiene todo. Toques de 44 px, una columna a 390.
   Además (sección 6): la forma base de las tres piezas nuevas de la ronda (Escenario, Hito, Para — los TSX son de equipo-bloques), que se
   ven en cualquier cuarto, `casa` incluido, porque equipo.css no se edita. */

:root {
  /* copias fijas de la marca (un cuarto re-asigna --crema/--vino adentro; éstas no cambian) */
  --s-crema: #FAF2E7; --s-tinta: #2B1B20; --s-ciruela: #3F1D29; --s-oro: #F7BE00; --s-oro-suave: #F4D9A6; --s-oro-claro: #F8E3AE; --s-oro-tinta: #6A4A06;
  /* la paleta de los cuartos (Penpot brand-core + el kit) */
  --s-plum: #5A2D3F; --s-mauve: #835160; --s-mauve-claro: #9A6577;
  --s-oliva: #8B8C3C; --s-oliva-2: #6E7030; --s-oliva-3: #4F5222;
  --s-salvia: #B2B986; --s-salvia-claro: #DDE2C8; --s-salvia-2: #66704A; --s-salvia-3: #3B4224;
  --s-terracota: #C8602D; --s-terracota-claro: #E0804A; --s-terracota-2: #93401C;
  --s-oro-luz: #FFE08A; --s-oro-2: #E5A800;
  --s-coral: #E58BA6; --s-coral-2: #C25370; --s-coral-3: #8A2E45;
  --s-pergamino: #F6E7CB; --s-pergamino-2: #EFDAB4; --s-pergamino-tinta: #5A3740; --s-pergamino-sombra: rgba(120, 80, 20, .2);
  --s-noche: #24101A; --s-noche-2: #3A1A29; --s-noche-3: #7A3C54; --s-noche-tarjeta: #35202A; --s-noche-hoja: #2E1B24; --s-noche-papel-2: #43293A;
  --s-noche-linea: rgba(250, 242, 231, .18); --s-noche-vino: #F3D9DF; --s-noche-gris: #CDB7BC;
  --s-noche-espera-claro: #4A261C; --s-noche-verde: #7CC47F; --s-noche-verde-claro: #1F3A22; --s-noche-verde-tinta: #B5E3B1; --s-noche-rojo: #F08C84; --s-noche-rojo-claro: #4A1C1A;
  --s-luna: #FFFBE6; --s-luna-2: #FFE79A; --s-estrella: #FFF3C4; --s-halo: rgba(247, 190, 0, .28);
  --s-cinta: rgba(255, 255, 255, .55); --s-sombra-dura: rgba(43, 27, 32, .1); --s-brillo: rgba(255, 255, 255, .7);
  --s-semillas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='9' y='9' width='5' height='5' fill='%23F7BE00' fill-opacity='.55' transform='rotate(45 11.5 11.5)'/%3E%3Ccircle cx='33' cy='30' r='2.2' fill='%23FAF2E7' fill-opacity='.35'/%3E%3C/svg%3E");
  --s-camino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 420' preserveAspectRatio='none'%3E%3Cpath d='M32 24 C 32 90, 268 60, 268 110 S 32 150, 32 200 S 268 240, 268 290 S 32 330, 32 396' fill='none' stroke='%23835160' stroke-opacity='.45' stroke-width='3' stroke-dasharray='2 9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* las luces de cada cuarto: la del cuarto (fondo), la de sus tarjetas, la de sus campos, su línea y su tinta */
  --s-ciruela-luz: #F8F0EF; --s-ciruela-tarjeta: #F0E3E3; --s-ciruela-hoja: #FFFBFA; --s-ciruela-linea: #E2CBCC;
  --s-oliva-luz: #F6F4E4; --s-oliva-tarjeta: #ECE9CF; --s-oliva-hoja: #FEFDF4; --s-oliva-linea: #D9D5AE; --s-oliva-tinta: #555622;
  --s-terracota-luz: #FBF0E7; --s-terracota-tarjeta: #F5E0D0; --s-terracota-hoja: #FFFAF5; --s-terracota-linea: #EBCDB6; --s-terracota-tinta: #8A3A18;
  --s-dorado-luz: #FDF6E0; --s-dorado-tarjeta: #F9EAB9; --s-dorado-hoja: #FFFCF0; --s-dorado-linea: #EDD995;
  --s-coral-luz: #FCF1F2; --s-coral-tarjeta: #F6DFE3; --s-coral-hoja: #FFFAFB; --s-coral-linea: #EBC8D0;
  --s-papel-luz: #F5EAD6; --s-papel-hondo: #E6D2B0; --s-papel-tarjeta: #EEDDBE; --s-papel-hoja: #FCF6EA; --s-papel-linea: #DCC59E;
  --s-salvia-luz: #F0F3E8; --s-salvia-tarjeta: #E2E8D2; --s-salvia-hoja: #FAFCF5; --s-salvia-linea: #CBD3B3; --s-salvia-tinta: #48502A;
  /* los velos de la foto de la cabeza, uno por cuarto */
  --s-velo-ciruela: linear-gradient(180deg, rgba(63, 29, 41, .12) 0%, rgba(63, 29, 41, .9) 82%);
  --s-velo-oliva: linear-gradient(180deg, rgba(79, 82, 34, .1) 0%, rgba(79, 82, 34, .88) 82%);
  --s-velo-terracota: linear-gradient(180deg, rgba(147, 64, 28, .1) 0%, rgba(147, 64, 28, .88) 82%);
  --s-velo-dorado: linear-gradient(180deg, rgba(106, 74, 6, .05) 0%, rgba(106, 74, 6, .85) 82%);
  --s-velo-coral: linear-gradient(180deg, rgba(138, 46, 69, .1) 0%, rgba(138, 46, 69, .88) 82%);
  --s-velo-papel: linear-gradient(180deg, rgba(90, 55, 64, .08) 0%, rgba(90, 55, 64, .85) 82%);
  --s-velo-salvia: linear-gradient(180deg, rgba(59, 66, 36, .08) 0%, rgba(59, 66, 36, .86) 82%);
  --s-velo-noche: linear-gradient(180deg, rgba(36, 16, 26, .2) 0%, rgba(36, 16, 26, .94) 80%);
}

/* ================================================================================================================================
   1 · LA LUZ — cada cuarto: sus cuatro tonos (--sala-fondo/-tinta/-acento/-tarjeta, los que lee la pregunta) y la banda de su cabeza.
   ================================================================================================================================ */
[data-sala="ciruela"] {
  --sala-fondo: var(--s-ciruela-luz); --sala-tinta: var(--s-plum); --sala-acento: var(--s-plum); --sala-tarjeta: var(--s-ciruela-tarjeta);
  --sala-hoja: var(--s-ciruela-hoja); --sala-linea: var(--s-ciruela-linea); --sala-sobre: var(--s-crema); --sala-sobre-2: var(--s-oro-suave);
  --sala-banda: radial-gradient(120% 95% at 82% 0%, var(--s-mauve) 0%, var(--s-plum) 46%, var(--s-ciruela) 100%);
  --sala-velo: var(--s-velo-ciruela);
}
[data-sala="oliva"] {
  --sala-fondo: var(--s-oliva-luz); --sala-tinta: var(--s-oliva-tinta); --sala-acento: var(--s-oliva-2); --sala-tarjeta: var(--s-oliva-tarjeta);
  --sala-hoja: var(--s-oliva-hoja); --sala-linea: var(--s-oliva-linea); --sala-sobre: var(--s-crema); --sala-sobre-2: var(--s-oro-claro);
  --sala-banda: radial-gradient(120% 95% at 22% 0%, var(--s-oliva) 0%, var(--s-oliva-2) 58%, var(--s-oliva-3) 100%);
  --sala-velo: var(--s-velo-oliva);
}
[data-sala="terracota"] {
  --sala-fondo: var(--s-terracota-luz); --sala-tinta: var(--s-terracota-tinta); --sala-acento: var(--s-terracota-2); --sala-tarjeta: var(--s-terracota-tarjeta);
  --sala-hoja: var(--s-terracota-hoja); --sala-linea: var(--s-terracota-linea); --sala-sobre: var(--s-crema); --sala-sobre-2: var(--s-oro-claro);
  --sala-banda: radial-gradient(120% 95% at 86% 8%, var(--s-terracota-claro) 0%, var(--s-terracota) 44%, var(--s-terracota-2) 100%);
  --sala-velo: var(--s-velo-terracota);
}
[data-sala="dorado"] {
  --sala-fondo: var(--s-dorado-luz); --sala-tinta: var(--s-oro-tinta); --sala-acento: var(--s-oro); --sala-tarjeta: var(--s-dorado-tarjeta);
  --sala-hoja: var(--s-dorado-hoja); --sala-linea: var(--s-dorado-linea); --sala-sobre: var(--s-ciruela); --sala-sobre-2: var(--s-ciruela);
  --sala-banda: radial-gradient(120% 95% at 16% 0%, var(--s-oro-luz) 0%, var(--s-oro) 52%, var(--s-oro-2) 100%);
  --sala-velo: var(--s-velo-dorado);
}
[data-sala="coral"] {
  --sala-fondo: var(--s-coral-luz); --sala-tinta: var(--s-coral-3); --sala-acento: var(--s-coral-2); --sala-tarjeta: var(--s-coral-tarjeta);
  --sala-hoja: var(--s-coral-hoja); --sala-linea: var(--s-coral-linea); --sala-sobre: var(--s-crema); --sala-sobre-2: var(--s-oro-claro);
  --sala-banda: radial-gradient(125% 100% at 88% 0%, var(--s-coral) 0%, var(--s-coral-2) 48%, var(--s-coral-3) 100%);
  --sala-velo: var(--s-velo-coral);
}
[data-sala="papel"] {
  --sala-fondo: var(--s-papel-hondo); --sala-tinta: var(--s-pergamino-tinta); --sala-acento: var(--s-mauve); --sala-tarjeta: var(--s-papel-tarjeta);
  --sala-hoja: var(--s-papel-hoja); --sala-linea: var(--s-papel-linea); --sala-sobre: var(--s-pergamino-tinta); --sala-sobre-2: var(--s-terracota-2);
  --sala-banda: linear-gradient(180deg, var(--s-pergamino) 0%, var(--s-pergamino-2) 100%);
  --sala-velo: var(--s-velo-papel);
}
[data-sala="salvia"] {
  --sala-fondo: var(--s-salvia-luz); --sala-tinta: var(--s-salvia-tinta); --sala-acento: var(--s-salvia-2); --sala-tarjeta: var(--s-salvia-tarjeta);
  --sala-hoja: var(--s-salvia-hoja); --sala-linea: var(--s-salvia-linea); --sala-sobre: var(--s-salvia-3); --sala-sobre-2: var(--s-salvia-3);
  --sala-banda: radial-gradient(120% 100% at 80% 0%, var(--s-salvia-claro) 0%, var(--s-salvia) 70%, var(--s-salvia) 100%);
  --sala-velo: var(--s-velo-salvia);
}
[data-sala="noche"] {
  --sala-fondo: var(--s-noche); --sala-tinta: var(--s-noche-vino); --sala-acento: var(--s-oro); --sala-tarjeta: var(--s-noche-tarjeta);
  --sala-hoja: var(--s-noche-hoja); --sala-linea: var(--s-noche-linea); --sala-sobre: var(--s-crema); --sala-sobre-2: var(--s-oro);
  --sala-banda: radial-gradient(120% 95% at 78% 0%, var(--s-noche-3) 0%, var(--s-plum) 30%, var(--s-noche-2) 64%, var(--s-noche) 100%);
  --sala-velo: var(--s-velo-noche);
  /* la lámina de noche: el texto claro sobre lo hondo, los estados en sus versiones de noche */
  --tinta: var(--s-crema); --gris: var(--s-noche-gris); --gris-medio: var(--s-noche-gris); --gris-claro: var(--s-noche-linea);
  --verde: var(--s-noche-verde); --verde-claro: var(--s-noche-verde-claro); --verde-tinta: var(--s-noche-verde-tinta);
  --rojo: var(--s-noche-rojo); --rojo-claro: var(--s-noche-rojo-claro); --oro-tinta: var(--s-oro-claro); --oro-claro: var(--s-noche-papel-2);
  --espera: var(--s-terracota-claro); --espera-claro: var(--s-noche-espera-claro); --espera-tinta: var(--s-oro-claro); --foto-fondo: var(--s-noche-2); --sombra-flota: 0 10px 24px -14px rgba(0, 0, 0, .7);
  /* lo que el kit pinta «sobre vino» (bandas, citas, la decisión, la constancia): aquí el vino es claro, así que su letra es honda */
  --sobre-vino: var(--s-noche); --sobre-vino-2: var(--s-noche-2); --sobre-vino-oro: var(--s-oro-tinta);
  --sobre-vino-linea: rgba(36, 16, 26, .22); --sobre-vino-borde: rgba(36, 16, 26, .5); --sobre-vino-velo: rgba(36, 16, 26, .08);
  color-scheme: dark;
}

/* la luz entra a todo lo que ya existe: el kit lee estos tokens, así que la pregunta, los bloques y los botones toman el tono del cuarto */
:where([data-sala]:not([data-sala="casa"])) {
  --vino: var(--sala-tinta); --vino-claro: var(--sala-acento); --papel: var(--sala-tarjeta); --papel-2: var(--sala-linea);
  --hoja: var(--sala-hoja); --linea: var(--sala-linea); --crema: var(--sala-fondo); --crema-tenue: var(--sala-tarjeta);
  background: var(--sala-fondo); color: var(--tinta); padding-bottom: 24px;
}

/* ================================================================================================================================
   2 · LA CABEZA — el título se vuelve la banda del cuarto; la ilustración de la lección (.sala-ilustracion) arriba a la derecha.
   ================================================================================================================================ */
:where([data-sala]:not([data-sala="casa"])) > .top {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 10px var(--orilla) 0; padding: 22px 18px 20px; min-height: 172px;
  border-radius: var(--r-grande); background: var(--sala-banda); color: var(--sala-sobre);
  display: flex; flex-direction: column; justify-content: flex-end;
}
:where([data-sala]:not([data-sala="casa"])) > .top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--s-semillas); opacity: .24; pointer-events: none; }
:where([data-sala]:not([data-sala="casa"])) > .top:has(> .sala-ilustracion) { padding-top: 104px; }
:where([data-sala]:not([data-sala="casa"])) > .top .date { color: var(--sala-sobre-2); font-weight: 700; }
:where([data-sala]:not([data-sala="casa"])) > .top .title { color: var(--sala-sobre); font-size: 36px; line-height: 1.02; margin-top: 6px; text-wrap: balance; }
.sala-ilustracion { position: absolute; z-index: 0; top: 14px; right: 14px; display: grid; place-items: center; width: 88px; height: 88px; pointer-events: none; }
.ilustracion { display: inline-grid; place-items: center; }
.ilustracion > :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.sala-ilustracion > :is(svg, img) { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
/* la foto de la cabeza (la tarjeta .l-vis del kit) toma el velo del cuarto */
:where([data-sala]:not([data-sala="casa"])) .l-vis .shade { background: var(--sala-velo); }
[data-sala="noche"] .l-vis .cap { color: var(--s-crema); }
[data-sala="noche"] .l-vis.sin-foto { background: var(--s-noche-tarjeta); box-shadow: inset 0 0 0 1.5px rgba(247, 190, 0, .35); }

/* foto-velada · ciruela: la banda honda y la foto de la casa bajo su velo ciruela */
[data-sala="ciruela"] .l-vis { height: 260px; }
[data-sala="ciruela"] .l-vis img { object-position: center 40%; }

/* ilustración · oliva: un sol de anillos detrás de la ilustración */
[data-sala="oliva"] > .top::before { content: ""; position: absolute; z-index: -1; top: -46px; right: -46px; width: 196px; height: 196px; border-radius: 50%;
  background: radial-gradient(circle, var(--s-oro) 0 22%, transparent 23% 34%, rgba(247, 190, 0, .5) 35% 37%, transparent 38% 52%, rgba(250, 242, 231, .28) 53% 55%, transparent 56% 70%, rgba(250, 242, 231, .16) 71% 73%, transparent 74%); }
/* ilustración · terracota: la pared de azulejos */
[data-sala="terracota"] > .top::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .22;
  background: linear-gradient(90deg, rgba(250, 242, 231, .7) 1.5px, transparent 1.5px) 0 0 / 44px 44px, linear-gradient(0deg, rgba(250, 242, 231, .7) 1.5px, transparent 1.5px) 0 0 / 44px 44px; }
/* ilustración · dorado: los rayos de un momento WOW */
[data-sala="dorado"] > .top::before { content: ""; position: absolute; z-index: -1; top: -60%; right: -40%; width: 140%; aspect-ratio: 1; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .55) 0 6deg, transparent 6deg 18deg); border-radius: 50%; }
[data-sala="dorado"] > .top::after { opacity: .12; }
/* ilustración · coral: los puntos de una tira cómica */
[data-sala="coral"] > .top::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .3;
  background: radial-gradient(circle, rgba(250, 242, 231, .9) 1.6px, transparent 2px) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(200deg, black 0%, transparent 60%); mask-image: linear-gradient(200deg, black 0%, transparent 60%); }
/* pergamino · papel: el papel viejo, su sombra adentro y su orilla mordida */
[data-sala="papel"] > .top { box-shadow: inset 0 0 44px var(--s-pergamino-sombra), 0 10px 24px -16px rgba(0, 0, 0, .45); border-radius: 8px; }
[data-sala="papel"] > .top::after { inset: auto 0 0 0; height: 10px; opacity: 1; background: radial-gradient(circle at 10px 14px, var(--s-papel-luz) 8px, transparent 9px) repeat-x 0 0 / 20px 10px; }
[data-sala="papel"] > .top .title { font-size: 34px; }
/* espejo · salvia: el marco del espejo en arco, la ilustración adentro */
[data-sala="salvia"] > .top::before { content: ""; position: absolute; z-index: -1; top: 12px; right: 14px; width: 84px; height: 112px; border-radius: 42px 42px 10px 10px;
  border: 5px solid var(--s-salvia-2); background: linear-gradient(160deg, var(--s-salvia-hoja) 0%, var(--s-salvia-claro) 100%); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45); }
[data-sala="salvia"] > .top::after { inset: 22px 62px auto auto; width: 12px; height: 46px; border-radius: 999px; opacity: 1; background: linear-gradient(180deg, var(--s-brillo), transparent); transform: rotate(14deg); z-index: 0; }
/* el espejo arriba a la derecha; el rótulo y el título debajo, a todo lo ancho (nunca un «≈ 3 / min» partido junto al marco) */
[data-sala="salvia"] > .top:has(> .sala-ilustracion) { padding-top: 136px; }
[data-sala="salvia"] .sala-ilustracion { top: 30px; right: 26px; width: 60px; height: 60px; }
/* noche: la luna, las estrellas (lo único que se mueve solo) y el pajarito */
[data-sala="noche"] > .top { min-height: 196px; }
[data-sala="noche"] > .top::before { content: ""; position: absolute; z-index: -1; top: 16px; left: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--s-luna) 0%, var(--s-luna-2) 45%, var(--s-oro) 100%); box-shadow: 0 0 36px 12px var(--s-halo); }
[data-sala="noche"] > .top::after { opacity: 1; background:
  radial-gradient(1.6px 1.6px at 22% 64%, var(--s-estrella) 50%, transparent 52%), radial-gradient(2px 2px at 34% 22%, var(--s-estrella) 50%, transparent 52%),
  radial-gradient(1.4px 1.4px at 48% 46%, var(--s-estrella) 50%, transparent 52%), radial-gradient(2.2px 2.2px at 58% 14%, var(--s-estrella) 50%, transparent 52%),
  radial-gradient(1.5px 1.5px at 66% 58%, var(--s-estrella) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 74% 34%, var(--s-estrella) 50%, transparent 52%),
  radial-gradient(1.4px 1.4px at 88% 70%, var(--s-estrella) 50%, transparent 52%), radial-gradient(2px 2px at 92% 12%, var(--s-estrella) 50%, transparent 52%),
  radial-gradient(1.3px 1.3px at 12% 30%, var(--s-estrella) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 40% 80%, var(--s-estrella) 50%, transparent 52%); }

/* ================================================================================================================================
   3 · LO QUE YA EXISTE, EN LA VOZ DEL CUARTO — «Por qué importa», la letra capital, la pregunta como la mesa de siempre.
   ================================================================================================================================ */
/* «Por qué importa» habla con la letra del cuarto (Eighties); su forma y la del primer párrafo son de cada cuarto — lo que hace que,
   pasada la cabeza, la lección siga siendo otro lugar y no «la misma, de otro color» (la guía, 10:5x). */
:where([data-sala]:not([data-sala="casa"])) .l-revela .toca { white-space: nowrap; }
:where([data-sala]:not([data-sala="casa"])) .l-importa b { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--vino); }
/* ciruela · el cuento de las casas: comillas de oro y la letra capital del primer párrafo */
[data-sala="ciruela"] .l-importa { position: relative; padding: 2px 0 14px 40px; }
[data-sala="ciruela"] .l-importa::before { content: "“"; position: absolute; left: -2px; top: -10px; font: 500 70px/1 var(--f-display); color: var(--s-oro-2); }
[data-sala="ciruela"] .l-importa + p::first-letter { float: left; margin: 4px 8px 0 0; font-family: var(--f-display); font-size: 56px; line-height: .78; color: var(--sala-acento); }
/* oliva · la mesa de los detalles: la frase al centro bajo un sol chico, el primer párrafo como entrada */
[data-sala="oliva"] .l-importa { position: relative; justify-items: center; padding: 42px 8px 16px; text-align: center; }
[data-sala="oliva"] .l-importa::before { content: ""; position: absolute; top: 2px; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%;
  background: radial-gradient(circle, var(--s-oro) 0 28%, transparent 29% 42%, var(--s-oliva) 43% 56%, transparent 57% 70%, var(--s-oliva-2) 71%); }
[data-sala="oliva"] .l-importa b { font-size: 23px; }
[data-sala="oliva"] .l-importa + p { font-size: 18px; line-height: 1.55; }
[data-sala="oliva"] .panel.l-texto { border-radius: 28px; }
/* terracota · la pared: la frase es el primer azulejo, con su fila de cuatro colores */
[data-sala="terracota"] .l-importa { position: relative; padding: 16px 16px 18px; border: 0; border-radius: 18px; background: var(--s-terracota-2); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .14); }
[data-sala="terracota"] .l-importa .k { color: var(--s-oro-claro); }
[data-sala="terracota"] .l-importa b { color: var(--s-crema); }
[data-sala="terracota"] .l-importa::after { content: ""; position: absolute; top: 16px; right: 16px; width: 44px; height: 11px; border-radius: 2px;
  background: linear-gradient(90deg, var(--s-oro) 0 25%, var(--s-oliva-2) 25% 50%, var(--s-plum) 50% 75%, var(--s-terracota-claro) 75%); }
/* dorado · el momento: la frase en un listón de oro con sus puntas mordidas */
[data-sala="dorado"] .l-importa { padding: 14px 28px 16px; border: 0; background: var(--s-oro); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }
[data-sala="dorado"] .l-importa .k { color: var(--s-oro-tinta); }
[data-sala="dorado"] .l-importa b { color: var(--s-ciruela); }
[data-sala="dorado"] .panel.l-texto { box-shadow: inset 0 4px 0 var(--s-oro), inset 0 0 0 1px var(--sala-linea); }
/* coral · la tira: la frase en la caja del narrador, con su trazo de tinta */
[data-sala="coral"] .l-importa { padding: 12px 14px 14px; border: 2.5px solid var(--s-tinta); border-radius: 4px; background: var(--s-oro-claro); box-shadow: 4px 4px 0 var(--s-coral); transform: rotate(-.6deg); }
[data-sala="coral"] .l-importa .k { color: var(--s-tinta); text-transform: uppercase; letter-spacing: .06em; }
[data-sala="coral"] .l-importa b { color: var(--s-tinta); }
/* papel · el pergamino: la hoja entera es papel viejo con su orilla rota; se lee con la letra del pergamino; la frase entre dos filetes */
[data-sala="papel"] .panel.l-texto { position: relative; padding: 22px 18px 24px; border-radius: 3px; background: var(--s-pergamino) linear-gradient(180deg, var(--s-pergamino) 0%, var(--s-pergamino-2) 100%);
  box-shadow: inset 0 0 42px var(--s-pergamino-sombra), 0 12px 26px -16px rgba(0, 0, 0, .5);
  -webkit-mask: radial-gradient(circle at 9px 0, transparent 5px, black 5.5px) 0 0 / 18px 51% repeat-x, radial-gradient(circle at 9px 100%, transparent 5px, black 5.5px) 0 100% / 18px 51% repeat-x;
  mask: radial-gradient(circle at 9px 0, transparent 5px, black 5.5px) 0 0 / 18px 51% repeat-x, radial-gradient(circle at 9px 100%, transparent 5px, black 5.5px) 0 100% / 18px 51% repeat-x; }
[data-sala="papel"] .panel.l-texto > p { font-family: var(--f-display); font-size: 19px; line-height: 1.4; color: var(--s-pergamino-tinta); }
[data-sala="papel"] .l-importa { justify-items: center; padding: 6px 4px 16px; border-bottom: 0; text-align: center; background:
  linear-gradient(var(--s-pergamino-tinta), var(--s-pergamino-tinta)) center bottom / 64% 1px no-repeat; }
[data-sala="papel"] .l-importa .k { letter-spacing: .12em; text-transform: uppercase; color: var(--s-terracota-2); }
[data-sala="papel"] .l-importa b { font-size: 24px; color: var(--s-pergamino-tinta); }
/* salvia · el espejo: la frase en la etiqueta que cuelga de la ropa, con su ojillo y su costura */
[data-sala="salvia"] .l-importa { position: relative; padding: 14px 16px 14px 46px; border: 2px dashed var(--s-salvia-2); border-radius: 12px 28px 28px 12px; background: var(--s-salvia-hoja); transform: rotate(-.8deg); }
[data-sala="salvia"] .l-importa::before { content: ""; position: absolute; left: 15px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%; background: var(--sala-fondo); box-shadow: inset 0 0 0 2.5px var(--s-salvia-2); }
/* noche · el caso: el rótulo sellado, la frase en oro */
[data-sala="noche"] .l-importa { padding: 0 0 14px; border-bottom: 1px dashed var(--s-noche-linea); }
[data-sala="noche"] .l-importa .k { justify-self: start; padding: 2px 8px; border: 2px solid var(--s-terracota-claro); border-radius: 4px; color: var(--s-terracota-claro); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-2deg); }
[data-sala="noche"] .l-importa b { color: var(--s-oro-claro); }
:where([data-sala]:not([data-sala="casa"])) .panel.l-texto { box-shadow: inset 0 0 0 1px var(--sala-linea); }
/* la mesa de la pregunta: UNA forma en todos los cuartos, teñida por el cuarto (sus tokens ya entraron en .quiz-*) */
:where([data-sala]:not([data-sala="casa"])) .quiz { padding: 16px; border-radius: var(--r-grande); background: var(--sala-tarjeta); box-shadow: inset 0 0 0 1.5px var(--sala-linea); }
:where([data-sala]:not([data-sala="casa"])) .quiz-q { color: var(--vino); }
:where([data-sala]:not([data-sala="casa"])) .quiz-l { background: var(--sala-hoja); box-shadow: inset 0 0 0 1.5px var(--sala-linea); }
[data-sala="dorado"] .btn:not(.ghost, .oro) { background: var(--s-oro-tinta); color: var(--s-dorado-hoja); }
[data-sala="noche"] .btn:not(.ghost, .oro) { background: var(--s-oro); color: var(--s-ciruela); }
[data-sala="noche"] .l-revela .toca { background: var(--s-oro); color: var(--s-ciruela); }
[data-sala="noche"] .l-revela[open] .toca { background: none; color: var(--s-oro); }

/* ================================================================================================================================
   4 · LAS PIELES — lo que cada bloque se pone en un cuarto (salas.ts `pieles`; la primera palabra de cada lista es la pieza de hoy).
   ================================================================================================================================ */

/* @piel revela:tile — la pared de azulejos: los «Toca y revela» seguidos van de dos en dos; cada uno se voltea para leer su respuesta */
:is([data-sala="terracota"]) .panel.l-texto { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
:is([data-sala="terracota"]) .panel.l-texto > * { flex: 1 1 100%; min-width: 0; margin: 0; }
/* dos por renglón; el que queda solo al final de la pared crece a todo lo ancho (nunca un azulejo huérfano) */
:is([data-sala="terracota"]) .panel.l-texto > .l-revela { flex: 1 1 calc(50% - 6px); }
:is([data-sala="terracota"]) .l-revela { --azulejo: var(--s-terracota-2); --azulejo-tinta: var(--s-crema); min-height: 176px; border-radius: 18px; background: var(--azulejo); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .14), 0 8px 16px -12px rgba(0, 0, 0, .5); color: var(--azulejo-tinta); }
:is([data-sala="terracota"]) .l-revela:nth-of-type(4n + 2) { --azulejo: var(--s-oliva-2); }
:is([data-sala="terracota"]) .l-revela:nth-of-type(4n + 3) { --azulejo: var(--s-plum); }
:is([data-sala="terracota"]) .l-revela:nth-of-type(4n + 4) { --azulejo: var(--s-oro); --azulejo-tinta: var(--s-ciruela); }
:is([data-sala="terracota"]) .l-revela > summary { min-height: 176px; align-content: space-between; padding: 14px 14px 12px; }
/* el azulejo dice la pregunta y nada más: el rótulo «Piénsalo» y las palabras de la pastilla quedan para el lector de pantalla */
:is([data-sala="terracota"]) .l-revela .k, :is([data-sala="terracota"]) .l-revela:not([open]) .toca .cerrada {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is([data-sala="terracota"]) .l-revela .q { color: inherit; font-family: var(--f-display); font-weight: 500; font-size: 18px; line-height: 1.16; overflow-wrap: break-word; hyphens: manual; }
:is([data-sala="terracota"]) .l-revela .toca { justify-self: end; justify-content: center; width: var(--blanco); min-height: var(--blanco); margin-top: 8px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); color: inherit; }
:is([data-sala="terracota"]) .l-revela .toca .ico { width: 22px; height: 22px; }
:is([data-sala="terracota"]) .l-revela:nth-of-type(4n + 4) .toca { background: rgba(63, 29, 41, .12); }
/* volteado: el dorso claro, la frase de la respuesta; la pregunta queda chica arriba y el renglón de arriba lo vuelve a voltear */
:is([data-sala="terracota"]) .l-revela[open] { background: var(--s-terracota-hoja); color: var(--tinta); box-shadow: inset 0 0 0 3px var(--azulejo); }
:is([data-sala="terracota"]) .l-revela[open] > summary { min-height: 0; padding-bottom: 0; }
:is([data-sala="terracota"]) .l-revela[open] .q { font-family: var(--f-texto); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--sala-tinta); }
:is([data-sala="terracota"]) .l-revela[open] .k { display: none; }
:is([data-sala="terracota"]) .l-revela[open] .toca { justify-self: start; width: auto; min-height: 0; margin-top: 6px; padding: 0; border-radius: 0; background: none; color: var(--sala-tinta); }
:is([data-sala="terracota"]) .l-revela[open] > .r { padding: 8px 14px 16px; font-size: 16px; }

/* @piel revela:ring — el sol de anillos: cada pregunta es un disco de anillos; al tocarlo se enciende y su respuesta brilla abajo */
:is([data-sala="oliva"]) .panel.l-texto { counter-reset: sala-anillo; }
:is([data-sala="oliva"]) .l-revela { counter-increment: sala-anillo; position: relative; background: none; box-shadow: none; border-radius: 0; }
:is([data-sala="oliva"]) .l-revela + .l-revela { margin-top: 6px; }
:is([data-sala="oliva"]) .l-revela + .l-revela::before { content: ""; position: absolute; left: 36px; top: -12px; width: 4px; height: 20px; border-radius: 2px; background: var(--s-oro); }
:is([data-sala="oliva"]) .l-revela > summary { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 6px 0; }
:is([data-sala="oliva"]) .l-revela > summary::before { content: counter(sala-anillo); grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  font: 500 24px/1 var(--f-display); color: var(--s-ciruela);
  background: radial-gradient(circle, var(--s-oro) 0 31%, var(--s-oliva-hoja) 32% 39%, var(--s-oliva) 40% 59%, var(--s-oliva-hoja) 60% 66%, var(--s-oliva-2) 67%);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); transition: transform var(--d-2) var(--resorte); }
:is([data-sala="oliva"]) .l-revela .k, :is([data-sala="oliva"]) .l-revela .q, :is([data-sala="oliva"]) .l-revela .toca { grid-column: 2; }
:is([data-sala="oliva"]) .l-revela .q { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.12; color: var(--vino); }
:is([data-sala="oliva"]) .l-revela .toca { justify-self: start; margin-top: 6px; white-space: nowrap; }
:is([data-sala="oliva"]) .l-revela[open] > summary::before { background: radial-gradient(circle, var(--s-oro) 0 31%, var(--s-oro-claro) 32% 39%, var(--s-oro) 40% 59%, var(--s-oro-claro) 60% 66%, var(--s-oro-2) 67%);
  box-shadow: 0 0 0 4px var(--sala-hoja), 0 0 0 7px var(--s-oro), 0 8px 18px -8px rgba(0, 0, 0, .45); transform: scale(1.06); }
:is([data-sala="oliva"]) .l-revela > .r { margin: 4px 0 6px 90px; padding: 12px 14px; border-radius: 16px; background: var(--s-oliva-2); color: var(--s-crema); font-weight: 600; }

/* @piel revela:card — en el cuarto de papel, la tarjeta es un pedazo de pergamino (en los demás, la de hoy en el tono del cuarto) */
:is([data-sala="papel"]) .l-revela { border-radius: 6px; background: linear-gradient(180deg, var(--s-pergamino) 0%, var(--s-pergamino-2) 100%); box-shadow: inset 0 0 30px var(--s-pergamino-sombra), 0 6px 14px -10px rgba(0, 0, 0, .4); }
:is([data-sala="papel"]) .l-revela:nth-of-type(odd) { transform: rotate(-.4deg); }
:is([data-sala="papel"]) .l-revela:nth-of-type(even) { transform: rotate(.35deg); }
:is([data-sala="papel"]) .panel.l-texto { counter-reset: sala-numeral; }
:is([data-sala="papel"]) .l-revela { counter-increment: sala-numeral; }
:is([data-sala="papel"]) .l-revela > summary { grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; }
:is([data-sala="papel"]) .l-revela > summary::before { content: counter(sala-numeral, upper-roman); grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--s-mauve-claro), var(--s-mauve) 60%, var(--s-pergamino-tinta)); color: var(--s-pergamino); font: 500 17px/1 var(--f-display); box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .4); }
:is([data-sala="papel"]) .l-revela .k, :is([data-sala="papel"]) .l-revela .q, :is([data-sala="papel"]) .l-revela .toca { grid-column: 2; }
:is([data-sala="papel"]) .l-revela .q { font-family: var(--f-display); font-weight: 500; font-size: 21px; line-height: 1.18; color: var(--s-pergamino-tinta); }
:is([data-sala="papel"]) .l-revela > .r { margin: 0 16px 14px; padding: 10px 0 0; border-top: 1px dashed var(--s-papel-linea); }

/* en la noche, cada «Toca y revela» es una pista del expediente: su número de evidencia y su orilla punteada de oro */
:is([data-sala="noche"]) .panel.l-texto { counter-reset: sala-pista; }
:is([data-sala="noche"]) .l-revela { counter-increment: sala-pista; position: relative; box-shadow: inset 0 0 0 1.5px rgba(247, 190, 0, .45); }
:is([data-sala="noche"]) .l-revela > summary { padding-top: 18px; }
:is([data-sala="noche"]) .l-revela > summary::before { content: "N.º " counter(sala-pista); position: absolute; top: -9px; right: 14px; padding: 1px 8px; border-radius: 4px;
  background: var(--s-oro); color: var(--s-ciruela); font: 700 14px/1.5 var(--f-texto); letter-spacing: .06em; }

/* @piel pasos:filmina — los pasos como fotogramas de una filmina: la cinta honda con sus perforaciones, el número en oro */
:is([data-sala="ciruela"]) ol.l-pasos { position: relative; display: grid; gap: 10px; padding: 14px 26px; border-radius: 12px; background: var(--s-ciruela); }
:is([data-sala="ciruela"]) ol.l-pasos::before, :is([data-sala="ciruela"]) ol.l-pasos::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 9px;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(250, 242, 231, .55) 7px 15px); border-radius: 2px; }
:is([data-sala="ciruela"]) ol.l-pasos::before { left: 8px; }
:is([data-sala="ciruela"]) ol.l-pasos::after { right: 8px; }
:is([data-sala="ciruela"]) ol.l-pasos > li { grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; padding: 12px; border-radius: 8px; background: linear-gradient(160deg, var(--s-mauve), var(--s-plum)); color: var(--s-crema); }
:is([data-sala="ciruela"]) ol.l-pasos > li::before { content: none; }
:is([data-sala="ciruela"]) ol.l-pasos .n { width: 34px; height: 34px; background: var(--s-oro); color: var(--s-ciruela); }
:is([data-sala="ciruela"]) ol.l-pasos .paso { padding-top: 4px; }
:is([data-sala="ciruela"]) ol.l-pasos strong { color: var(--s-oro-claro); }

/* @piel ejemplo:vinetas — «Así se hace» como tira cómica: cada renglón es una viñeta con su número, su trazo de tinta y su sombra coral */
:is([data-sala="coral"]) .l-asi { gap: 16px; padding: 0; border: 0; background: none; counter-reset: sala-vineta; }
:is([data-sala="coral"]) .l-asi > .k { color: var(--sala-tinta); }
:is([data-sala="coral"]) .l-asi > .k .ic { background: var(--s-coral-2); }
:is([data-sala="coral"]) .l-asi > p:not(.k) { counter-increment: sala-vineta; position: relative; padding: 16px 14px 14px 18px; border: 2.5px solid var(--s-tinta); border-radius: 6px; background: var(--s-coral-hoja); box-shadow: 5px 5px 0 var(--s-coral); }
:is([data-sala="coral"]) .l-asi > p:not(.k):nth-child(even) { transform: rotate(-.6deg); }
:is([data-sala="coral"]) .l-asi > p:not(.k):nth-child(odd) { transform: rotate(.5deg); margin-left: 10px; }
:is([data-sala="coral"]) .l-asi > p:not(.k)::before { content: counter(sala-vineta); position: absolute; top: -13px; left: -11px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--s-tinta); color: var(--s-coral-hoja); font: 500 16px/1 var(--f-display); }

/* @piel ejemplo:lines — en la noche, «Así se hace» es el expediente del caso: papel claro sobre lo hondo, dos cintas y su sello */
:is([data-sala="noche"]) .l-asi { position: relative; padding: 18px 16px 16px; border: 0; border-radius: 6px; background: var(--s-pergamino); color: var(--s-tinta); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7); }
:is([data-sala="noche"]) .l-asi::before, :is([data-sala="noche"]) .l-asi::after { content: ""; position: absolute; top: -8px; width: 70px; height: 16px; background: rgba(247, 190, 0, .75); }
:is([data-sala="noche"]) .l-asi::before { left: 14px; transform: rotate(-4deg); }
:is([data-sala="noche"]) .l-asi::after { right: 14px; transform: rotate(5deg); }
:is([data-sala="noche"]) .l-asi > .k { color: var(--s-pergamino-tinta); }
:is([data-sala="noche"]) .l-asi > .k .ic { background: var(--s-pergamino-tinta); color: var(--s-pergamino); }
:is([data-sala="noche"]) .l-asi > p:not(.k) { font-family: var(--f-display); font-size: 18px; line-height: 1.3; color: var(--s-tinta); }

/* @piel cotejo:nota — la lista como nota pegada: papel de oro claro, un pedazo de cinta, la palomita a mano */
:is([data-sala="salvia"]) .l-cotejo { position: relative; padding: 22px 16px 10px; border-radius: 4px; background: var(--s-oro-claro); color: var(--s-tinta); transform: rotate(-.8deg); box-shadow: 4px 6px 0 var(--s-sombra-dura); }
:is([data-sala="salvia"]) .l-cotejo::before { content: ""; position: absolute; top: -10px; left: 50%; width: 92px; height: 20px; background: var(--s-cinta); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
:is([data-sala="salvia"]) .l-cotejo > .k { font-family: var(--f-display); font-weight: 500; font-size: 20px; color: var(--s-oro-tinta); }
:is([data-sala="salvia"]) .l-cotejo > ul > li + li { border-top: 1px dashed rgba(106, 74, 6, .28); }
:is([data-sala="salvia"]) .l-cotejo .caja { border-color: var(--s-oro-tinta); background: transparent; }
:is([data-sala="salvia"]) .l-cotejo input:checked + .caja { border-color: var(--s-salvia-2); background: var(--s-salvia-2); }

/* @piel escenario:termometro — junto a las opciones, el termómetro: la carita sube a WOW o baja a Deficiente con la opción que abres
   (el bloque lleva el `data-nivel` de la última que se abrió; antes de tocar, la carita espera en medio) */
:is([data-sala="dorado"]) .l-escenario .opciones { position: relative; padding-right: 62px; }
:is([data-sala="dorado"]) .l-escenario .opciones::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: 18px; width: 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--verde) 0 33%, var(--s-oro) 33% 66%, var(--rojo) 66% 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }
:is([data-sala="dorado"]) .l-escenario .opciones::after { content: "🙂"; position: absolute; top: 6px; bottom: 6px; right: 7px; width: 46px; display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: radial-gradient(circle at 50% 50%, var(--s-dorado-hoja) 0 19px, var(--s-oro-tinta) 19.5px 23px, transparent 23.5px); transition: transform var(--d-3) var(--resorte); }
:is([data-sala="dorado"]) .l-escenario[data-nivel="wow"] .opciones::after { content: "🤩"; transform: translateY(calc(-50% + 23px)); }
:is([data-sala="dorado"]) .l-escenario[data-nivel="deficiente"] .opciones::after { content: "😕"; transform: translateY(calc(50% - 23px)); }
:is([data-sala="dorado"]) .l-escenario > .situacion { border-radius: 22px 22px 22px 4px; background: var(--s-dorado-hoja); box-shadow: inset 0 0 0 2px var(--s-oro); }

/* @piel hitos:monedas — el camino de las casas: una moneda por año que va de un lado al otro sobre el camino punteado */
:is([data-sala="ciruela"]) .l-hitos { display: grid; gap: 10px; padding: 4px 0; background: var(--s-camino) center / 100% 100% no-repeat; }
:is([data-sala="ciruela"]) .l-hitos .hito { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 0; border: 0; }
:is([data-sala="ciruela"]) .l-hitos .hito::before { content: none; }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(even) { grid-template-columns: minmax(0, 1fr) 64px; text-align: right; }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(even) .anio { grid-column: 2; grid-row: 1; }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(even) > :not(.anio) { grid-column: 1; }
:is([data-sala="ciruela"]) .l-hitos .anio { --moneda: var(--s-plum); grid-row: 1 / span 2; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: 50%;
  background: var(--moneda); color: var(--s-crema); font: 500 19px/1 var(--f-display); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--sala-hoja), 0 0 0 5px var(--moneda), 0 8px 14px -8px rgba(0, 0, 0, .45); }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(5n + 2) .anio { --moneda: var(--s-oliva-2); }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(5n + 3) .anio { --moneda: var(--s-terracota-2); }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(5n + 4) .anio { --moneda: var(--s-mauve); }
:is([data-sala="ciruela"]) .l-hitos .hito:nth-child(5n + 5) .anio { --moneda: var(--s-oro); color: var(--s-ciruela); }
:is([data-sala="ciruela"]) .l-hitos .hito .texto { margin: 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--sala-hoja) 88%, transparent); }

/* ================================================================================================================================
   5 · EL MOVIMIENTO — uno por cuarto, orquestado (contesta a un toque o entra una vez); sólo transform y opacity.
   ================================================================================================================================ */
@keyframes sala-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes sala-voltea { from { opacity: 0; transform: perspective(700px) rotateY(-80deg); } }
@keyframes sala-enciende { 0% { transform: scale(.9); } 60% { transform: scale(1.12); } 100% { transform: scale(1.06); } }
@keyframes sala-vineta { from { opacity: 0; transform: scale(.88) rotate(-2.5deg); } }
@keyframes sala-desenrolla { from { opacity: 0; transform: scaleY(.2); } }
@keyframes sala-pega { 0% { opacity: 0; transform: scale(1.8) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
@keyframes sala-brilla { 0% { opacity: 0; transform: translateY(-6px); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sala-titila { 0% { opacity: .35; } 100% { opacity: 1; } }
/* ciruela: las monedas y los fotogramas entran uno tras otro, una vez */
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li) { animation: sala-entra var(--d-3) var(--suave) both; }
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li):nth-child(2) { animation-delay: 90ms; }
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li):nth-child(3) { animation-delay: 180ms; }
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li):nth-child(4) { animation-delay: 270ms; }
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li):nth-child(5) { animation-delay: 360ms; }
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li):nth-child(6) { animation-delay: 450ms; }
[data-sala="ciruela"] :is(.l-hitos .hito, ol.l-pasos > li):nth-child(n + 7) { animation-delay: 540ms; }
/* oliva: el anillo que tocas se enciende */
[data-sala="oliva"] .l-revela[open] > summary::before { animation: sala-enciende var(--d-3) var(--resorte) both; }
[data-sala="oliva"] .l-revela[open] > .r { animation: sala-entra var(--d-2) var(--suave) both; }
/* terracota: el azulejo se voltea */
[data-sala="terracota"] .l-revela[open] > .r { transform-origin: left center; animation: sala-voltea var(--d-3) var(--suave) both; }
/* coral: la respuesta entra como una viñeta */
[data-sala="coral"] .l-revela[open] > .r { animation: sala-vineta var(--d-2) var(--resorte) both; }
/* papel: la respuesta se desenrolla */
[data-sala="papel"] .l-revela[open] > .r { transform-origin: top center; animation: sala-desenrolla var(--d-3) var(--suave) both; }
/* salvia: la palomita se pega en la nota */
[data-sala="salvia"] .l-cotejo input:checked + .caja .ico { animation: sala-pega var(--d-2) var(--resorte) both; }
/* dorado: la carita sube o baja (la transición de arriba); noche: lo que abres brilla una vez y las estrellas titilan */
[data-sala="noche"] .l-revela[open] > .r { animation: sala-brilla var(--d-3) var(--suave) both; }
[data-sala="noche"] > .top::after { animation: sala-titila 3.2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  :where([data-sala]:not([data-sala="casa"])) *, :where([data-sala]:not([data-sala="casa"])) *::before, :where([data-sala]:not([data-sala="casa"])) *::after { animation: none !important; transition: none !important; }
}

/* ================================================================================================================================
   6 · LAS TRES PIEZAS NUEVAS (M9 · M10 · M11; los TSX son de equipo-bloques): su forma base, en cualquier cuarto (casa incluido).
   Clases del contrato M16: .l-escenario (.opcion [data-abierta] [data-nivel] .pasa .nivel) · .l-hitos (.hito .anio .texto) · .l-para ([data-lit]).
   ================================================================================================================================ */
.l-texto > * + :is(.l-escenario, .l-hitos, .l-para), .l-texto > :is(.l-escenario, .l-hitos, .l-para) + * { margin-top: 18px; }
/* M9 · Escenario (bloques: .l-escenario > p.k + p.situacion + p.toca + div.opciones > details.opcion > summary > span.texto, y adentro
   p.pasa > b.nivel + span.linea): la situación como globo de diálogo; cada opción, una tarjeta que se abre y dice lo que pasa; el color del
   nivel sólo aparece al abrirla, nunca antes del toque. Nada se califica ni se guarda. */
.l-escenario { display: grid; gap: 10px; }
.l-escenario > .k, .l-escenario > .toca { margin: 0; font-size: var(--t-apoyo); font-weight: 700; color: var(--gris); }
.l-escenario > .situacion { margin: 0; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: var(--hoja); box-shadow: inset 0 0 0 1.5px var(--linea);
  font-family: var(--f-display); font-size: 21px; line-height: 1.22; color: var(--vino); }
.l-escenario .opciones { display: grid; gap: 8px; }
.l-escenario .opcion { border-radius: 14px; background: var(--hoja); box-shadow: inset 0 0 0 2px var(--linea); }
.l-escenario .opcion > summary { display: flex; align-items: center; gap: 12px; min-height: var(--blanco); padding: 12px 14px; border-radius: 14px; list-style: none; cursor: pointer;
  font-weight: 700; line-height: 1.3; color: var(--tinta); -webkit-tap-highlight-color: transparent; transition: transform var(--d-1) var(--suave); }
.l-escenario .opcion > summary::-webkit-details-marker { display: none; }
.l-escenario .opcion > summary::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--vino); }
.l-escenario .opcion > summary:active { transform: scale(.98); }
.l-escenario .opcion > summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.l-escenario .opcion[open] { box-shadow: inset 0 0 0 2px var(--vino); }
.l-escenario .opcion[open] > summary::before { background: var(--vino); }
.l-escenario .opcion[open][data-nivel="wow"] { box-shadow: inset 0 0 0 2px var(--verde); }
.l-escenario .opcion[open][data-nivel="wow"] > summary::before { background: var(--verde); box-shadow: inset 0 0 0 2.5px var(--verde); }
.l-escenario .opcion[open][data-nivel="suficiente"] { box-shadow: inset 0 0 0 2px var(--oro); }
.l-escenario .opcion[open][data-nivel="suficiente"] > summary::before { background: var(--oro); box-shadow: inset 0 0 0 2.5px var(--oro); }
.l-escenario .opcion[open][data-nivel="deficiente"] { box-shadow: inset 0 0 0 2px var(--rojo); }
.l-escenario .opcion[open][data-nivel="deficiente"] > summary::before { background: var(--rojo); box-shadow: inset 0 0 0 2.5px var(--rojo); }
.l-escenario .pasa { margin: 0 14px; padding: 10px 0 14px; border-top: 1px dashed var(--linea); line-height: 1.45; }
.l-escenario .opcion[open] > .pasa { animation: l-revela var(--d-2) var(--suave) both; }
.l-escenario .pasa .nivel { font-weight: 800; color: var(--vino); }
.l-escenario .pasa[data-nivel="wow"] .nivel { color: var(--verde-tinta); }
.l-escenario .pasa[data-nivel="suficiente"] .nivel { color: var(--oro-tinta); }
.l-escenario .pasa[data-nivel="deficiente"] .nivel { color: var(--rojo); }
/* M10 · Hito: el año como marca en un riel (sin piel), el texto a su lado; una foto debajo de su hito */
.l-hitos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* `.hito` is also the kit's milestone card (persona.llegar: ciruela, crema, padding): inside a lesson's road it is reset to a plain stop */
.l-hitos .hito { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 0 0 16px; border-radius: 0; background: none; color: inherit; }
.l-hitos .hito p { color: inherit; font-weight: inherit; }
.l-hitos .hito:last-child { padding-bottom: 0; }
.l-hitos .hito::before { content: ""; position: absolute; left: 31px; top: 34px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--gris-claro); }
.l-hitos .hito:last-child::before { content: none; }
.l-hitos .anio { position: relative; z-index: 1; display: grid; place-items: center; min-height: 32px; padding: 4px 0; border-radius: var(--r-pastilla); background: var(--vino); color: var(--crema);
  font: 500 17px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.l-hitos .hito .texto { margin: 0; padding-top: 4px; line-height: 1.45; color: var(--tinta); }
.l-hitos .hito > .l-foto { grid-column: 2; }
/* M11 · Para <familias> (bloques: div.l-para[data-lit=true] > p.k + p.t · details.l-para[data-lit=false] > summary > span.k + span.abre, p.t):
   encendido para su familia, la franja de oro claro con su rótulo; para las demás, plegado a un toque — nunca escondido */
.l-para { margin: 0; }
.l-para > .t { margin: 0; line-height: 1.45; }
div.l-para[data-lit="true"] { padding: 10px 14px 12px; border-left: 4px solid var(--oro-vivo); border-radius: 0 14px 14px 0; background: var(--oro-claro); color: var(--oro-tinta); }
div.l-para[data-lit="true"] > .k { margin: 0 0 2px; font-size: var(--t-apoyo); font-weight: 800; letter-spacing: .02em; }
details.l-para { border-radius: 14px; background: var(--hoja); box-shadow: inset 0 0 0 1.5px var(--linea); }
details.l-para > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--blanco); padding: 0 14px; border-radius: 14px;
  list-style: none; cursor: pointer; font-weight: 700; color: var(--vino); -webkit-tap-highlight-color: transparent; }
details.l-para > summary::-webkit-details-marker { display: none; }
details.l-para > summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
details.l-para > summary .abre { flex: none; font-size: 20px; line-height: 1; transition: transform var(--d-1) var(--suave); }
details.l-para[open] > summary .abre { transform: rotate(90deg); }
details.l-para > .t { padding: 0 14px 12px; }
details.l-para[open] > .t { animation: l-revela var(--d-2) var(--suave) both; }
@media (prefers-reduced-motion: reduce) {
  :is(.l-escenario, .l-hitos, .l-para) *, :is(.l-escenario, .l-hitos, .l-para) *::before, :is(.l-escenario, .l-hitos, .l-para) *::after { animation: none !important; transition: none !important; }
}

/* ================================================================================================================================
   7 · /kit/salas — la página del kit: los cuartos lado a lado en teléfonos de 390, uno bajo otro en un teléfono.
   ================================================================================================================================ */
.kit-salas-intro { max-width: 760px; }
.kit-salas-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 390px)); justify-content: center; gap: 28px 24px; padding: 8px var(--orilla) 0; }
.kit-salas-tel { min-width: 0; }
.kit-salas-tel > .heroe { overflow: hidden; border-radius: 30px; background: var(--crema); box-shadow: 0 0 0 1px var(--linea), 0 18px 40px -24px rgba(43, 27, 32, .55); padding-bottom: 24px; }
.kit-salas-tel > .heroe > .top:first-child { margin-top: 14px; }
.kit-salas-pie { margin: 12px 8px 0; font-size: var(--t-apoyo); line-height: 1.45; color: var(--gris); }
.kit-salas-pie b { color: var(--tinta); }
.kit-salas-pie .muestra { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; background: var(--sala-acento, var(--vino)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.eq-lienzo > section.kit-salas-sec { margin: 40px 0 0; }
.kit-salas-sec > .section-head, .kit-salas-sec > .note { padding: 0 var(--orilla); }
.kit-ilustraciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 0 var(--orilla); margin: 0; list-style: none; }
.kit-ilustraciones li { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: var(--r-tarjeta); background: var(--papel); }
.kit-ilustraciones .ilustracion { width: 100%; height: 96px; }
.kit-ilustraciones li.sobre-noche .ilustracion { border-radius: var(--r-chico); background: var(--s-plum); padding: 10px; }
.kit-ilustraciones code { font-size: 14px; font-weight: 700; color: var(--vino); overflow-wrap: anywhere; }
.kit-ilustraciones p { margin: 0; font-size: var(--t-apoyo); line-height: 1.35; color: var(--gris); }
.kit-salas-para > .kit-salas-tel > .heroe { padding: 14px 0; }
.kit-salas-para .panel.l-texto { margin-top: 0; }
.kit-salas-saltos { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--orilla) 0; }
.kit-salas-saltos a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--blanco); padding: 0 14px; border-radius: var(--r-pastilla); background: var(--papel); color: var(--vino); font-weight: 700; text-decoration: none; }
.kit-salas-saltos a[data-muestra]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--vino); }
.kit-salas-saltos a[data-muestra="ciruela"]::before { background: var(--s-plum); }
.kit-salas-saltos a[data-muestra="oliva"]::before { background: var(--s-oliva-2); }
.kit-salas-saltos a[data-muestra="terracota"]::before { background: var(--s-terracota-2); }
.kit-salas-saltos a[data-muestra="dorado"]::before { background: var(--s-oro); }
.kit-salas-saltos a[data-muestra="coral"]::before { background: var(--s-coral-2); }
.kit-salas-saltos a[data-muestra="papel"]::before { background: var(--s-pergamino-2); box-shadow: inset 0 0 0 1px var(--s-pergamino-tinta); }
.kit-salas-saltos a[data-muestra="salvia"]::before { background: var(--s-salvia); }
.kit-salas-saltos a[data-muestra="noche"]::before { background: var(--s-noche); }
.kit-salas-saltos a:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* el selector de cuarto del editor (equipo-editor, #799): cada chip lleva la muestra de su cuarto (`data-sala-muestra`, nunca `data-sala`) */
.chips-elige [data-sala-muestra] { --muestra: var(--vino); }
.chips-elige [data-sala-muestra="ciruela"] { --muestra: var(--s-plum); }
.chips-elige [data-sala-muestra="oliva"] { --muestra: var(--s-oliva-2); }
.chips-elige [data-sala-muestra="terracota"] { --muestra: var(--s-terracota-2); }
.chips-elige [data-sala-muestra="dorado"] { --muestra: var(--s-oro-2); }
.chips-elige [data-sala-muestra="coral"] { --muestra: var(--s-coral-2); }
.chips-elige [data-sala-muestra="papel"] { --muestra: var(--s-mauve); }
.chips-elige [data-sala-muestra="salvia"] { --muestra: var(--s-salvia-2); }
.chips-elige [data-sala-muestra="noche"] { --muestra: var(--s-noche); }
.chips-elige [data-sala-muestra] span::before { content: ""; display: inline-block; flex: none; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--muestra); vertical-align: -1px; }
.chips-elige [data-sala-muestra] input:checked + span { border-color: var(--muestra); box-shadow: inset 0 0 0 1.5px var(--muestra); }

/* ================================================================================================================================
   8 · «TOCA Y REVELA», A LA VISTA (2026-10-19, Jorge: «luego luego entras y veo pura pregunta»). La lección enseña primero y pregunta una
   vez, al final: el bloque se dibuja abierto (`.l-revela-vista`, un `details` que nace abierto) y su cabeza ya no lo cierra. Cada cuarto
   conserva su forma abierta de siempre — el anillo encendido de oliva, el pergamino de papel, la pista de la noche —; los azulejos de
   terracota guardan su color con la respuesta adentro, uno por renglón en el teléfono y de dos en dos desde 700 px.
   ================================================================================================================================ */
.l-revela-vista > summary { pointer-events: none; cursor: default; padding-bottom: 4px; }
.l-revela-vista[open] > .r { animation: none; }
:is([data-sala="terracota"]) .panel.l-texto > .l-revela-vista { flex-basis: 100%; }
@media (min-width: 700px) { :is([data-sala="terracota"]) .panel.l-texto > .l-revela-vista { flex-basis: calc(50% - 6px); } }
:is([data-sala="terracota"]) .l-revela-vista[open] { min-height: 0; background: var(--azulejo); color: var(--azulejo-tinta); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .14), 0 8px 16px -12px rgba(0, 0, 0, .5); }
:is([data-sala="terracota"]) .l-revela-vista[open] > summary { min-height: 0; padding: 16px 16px 0; }
:is([data-sala="terracota"]) .l-revela-vista[open] .q { font-family: var(--f-display); font-weight: 500; font-size: 20px; line-height: 1.16; color: inherit; }
:is([data-sala="terracota"]) .l-revela-vista[open] > .r { padding: 8px 16px 18px; font-size: 16px; color: inherit; }
/* oliva: sin la pastilla, el anillo ocupa un solo renglón y la pregunta queda a su altura; la respuesta brilla justo abajo */
:is([data-sala="oliva"]) .l-revela-vista > summary::before { grid-row: 1; }
:is([data-sala="oliva"]) .l-revela-vista > .r { margin-top: 2px; }