/* El sombrerero con diagnóstico · 30/10/2026
   La noche de Tim Burton (siluetas negras, espirales, rayas, todo un poco torcido) con el mundo de Lewis Carroll dentro
   (Tenniel, la baraja, el té, el reloj del Conejo, el tablero de ajedrez del espejo). Colores de Claroscuro (marca.json):
   dorado #C9A878 / #B5915F, marfil #F8EEDC, azul sombra #0C111C. Letras libres (OFL) servidas desde aquí. */

@font-face { font-family: 'Sombrerero'; src: url(/a/mountains-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fell'; src: url(/a/imfell.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Fell'; src: url(/a/imfell-italic.woff2) format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Fell SC'; src: url(/a/imfellsc.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Garamond'; src: url(/a/ebgaramond.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Garamond'; src: url(/a/ebgaramond-italic.woff2) format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --noche: #0b0a14; --noche-2: #141226; --violeta: #2a1f40; --bruma: #3a2c52;
  --marfil: #f3e8d2; --papel: #efe4cc; --papel-2: #e4d4b4;
  --tinta: #1b1621; --tinta-2: #4a3f4f;
  --oro: #c9a878; --oro-claro: #e5cea1; --oro-oscuro: #b5915f; --sangre: #8e1b2a;
  --letra: 'Garamond', 'EB Garamond', Georgia, serif;
  --fell: 'Fell', 'IM Fell English', Georgia, serif;
  --burton: 'Sombrerero', 'Fell', Georgia, serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--noche); color: var(--marfil); font-family: var(--letra); font-size: 1.1rem; line-height: 1.6; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--oro-claro); }
a:focus-visible { outline: 2px dashed var(--oro-claro); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── rayas de Burton ─────────────────────────────────────────────────────────────────────────────────────────── */
.rayas { height: 14px; background: repeating-linear-gradient(-45deg, var(--noche) 0 12px, var(--papel) 12px 24px); }

/* ── barra de arriba: el logotipo de Claroscuro y el nombre del blog ─────────────────────────────────────────────── */
.barra { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 14px clamp(16px, 4vw, 40px); pointer-events: none; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marfil); pointer-events: auto;
  font-family: var(--fell); font-size: 1.02rem; letter-spacing: .02em; padding: 6px 14px 6px 6px; border-radius: 40px;
  background: rgba(11, 10, 20, .55); border: 1px solid rgba(201, 168, 120, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.marca img { width: 40px; height: 40px; border-radius: 50%; }
.portada .marca span { display: none; }
@media (min-width: 700px) { .portada .marca span { display: inline; } }

/* ── la escena de la portada ──────────────────────────────────────────────────────────────────────────────────── */
.escena { position: relative; height: max(620px, min(100svh, 900px)); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 78% 20%, rgba(243, 232, 210, .24), transparent 30%),
    radial-gradient(ellipse at 50% 85%, rgba(122, 92, 160, .35), transparent 60%),
    linear-gradient(#0a0918 0%, #18122b 45%, #33264b 74%, #251c3a 100%); }
.estrellas { position: absolute; inset: 0; width: 100%; height: 72%; }
.estrellas .ti { animation: titila 4.5s ease-in-out infinite alternate; }
.estrellas .ti:nth-child(3n) { animation-delay: -1.7s; } .estrellas .ti:nth-child(4n) { animation-delay: -3.1s; }
@keyframes titila { to { opacity: .1; } }
.luna { position: absolute; z-index: 6; width: min(300px, 38vw, 62vh); height: auto;   /* 62vh: en un móvil apaisado el título rozaba la luna (A20s, 31/10) */ top: clamp(72px, 12vh, 110px); right: clamp(14px, 8vw, 150px);
  border-radius: 50%; filter: drop-shadow(0 0 26px rgba(243, 232, 210, .45)) drop-shadow(0 0 80px rgba(201, 168, 120, .35));
  animation: respira 9s ease-in-out infinite alternate; }
@keyframes respira { to { filter: drop-shadow(0 0 36px rgba(243, 232, 210, .6)) drop-shadow(0 0 110px rgba(201, 168, 120, .45)); } }
.bruma { position: absolute; inset: auto 0 14% 0; height: 34%; z-index: 1;
  background: linear-gradient(transparent, rgba(160, 138, 190, .22) 55%, transparent); filter: blur(6px); }
/* la colina: más ancha que la pantalla en el móvil y con la espiral siempre al 62 % (la misma fracción que en el SVG) */
.colina { position: absolute; z-index: 3; bottom: 0; width: max(104%, 1000px); max-width: none; height: auto; aspect-ratio: 1200 / 460;
  left: calc((100% - max(104%, 1000px)) * .62); }
.arbol { position: absolute; z-index: 2; left: -3%; bottom: 15%; width: clamp(170px, 28vw, 380px); height: auto; transform: scaleX(-1); }
.arbol.a2 { left: auto; right: -5%; bottom: 7%; width: clamp(130px, 22vw, 320px); transform: none; }
.sonrisa { position: absolute; z-index: 2; left: 8%; top: 53%; width: clamp(118px, 18vw, 230px); }
@media (min-width: 820px) { .sonrisa { left: 33%; top: 55%; } }
.sonrisa .ojos, .sonrisa .boca { opacity: 0; animation: cheshire 17s ease-in-out -4.5s infinite; }
.sonrisa .ojos { animation-name: cheshire-ojos; }
@keyframes cheshire-ojos { 0%, 8% { opacity: 0; } 16%, 52% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes cheshire { 0%, 16% { opacity: 0; } 26%, 74% { opacity: 1; } 86%, 100% { opacity: 0; } }
/* el tablero del espejo, en perspectiva, delante de la colina */
.ajedrez { position: absolute; z-index: 4; left: -60%; right: -60%; bottom: -2%; height: 27%; transform-origin: 50% 100%;
  transform: perspective(420px) rotateX(58deg);
  background: conic-gradient(var(--papel) 25%, #07060d 0 50%, var(--papel) 0 75%, #07060d 0) 0 0 / 74px 74px;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 98%); mask-image: linear-gradient(to top, #000 35%, transparent 98%); opacity: .92; }
.cartas { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.carta { position: absolute; top: -14%; width: 44px; opacity: .9; animation: cae 19s linear infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.carta.c0 { left: 8%; animation-duration: 21s; animation-delay: -3s; width: 40px; }
.carta.c1 { left: 27%; animation-duration: 26s; animation-delay: -15s; width: 34px; }
.carta.c2 { left: 46%; animation-duration: 18s; animation-delay: -9s; width: 50px; }
.carta.c3 { left: 63%; animation-duration: 24s; animation-delay: -20s; width: 38px; }
.carta.c4 { left: 81%; animation-duration: 20s; animation-delay: -6s; width: 46px; }
.carta.c5 { left: 92%; animation-duration: 28s; animation-delay: -12s; width: 32px; }
@keyframes cae {
  0% { transform: translate3d(0, 0, 0) rotate(-20deg); }
  25% { transform: translate3d(26px, 32vh, 0) rotate(40deg); }
  50% { transform: translate3d(-18px, 62vh, 0) rotate(110deg); }
  75% { transform: translate3d(22px, 92vh, 0) rotate(190deg); }
  100% { transform: translate3d(-10px, 125vh, 0) rotate(260deg); }
}
.titular { position: absolute; z-index: 6; left: clamp(18px, 6vw, 110px); right: 18px; top: clamp(150px, 27%, 270px); max-width: 760px; }
.rotulo { margin: 0; font-family: var(--burton); font-weight: 700; color: var(--marfil); line-height: .98; letter-spacing: .005em;
  font-size: clamp(3.1rem, 9.2vw, 7.4rem); text-shadow: 0 3px 0 #07060d, 0 0 28px rgba(201, 168, 120, .35); }
.rotulo .linea { display: block; } .rotulo .pal { display: inline-block; white-space: nowrap; } .rotulo .pal span { display: inline-block; }
.escena .rotulo .l1 { font-size: .72em; margin-left: .55em; color: var(--oro-claro); }
.j0 { transform: rotate(-4deg) translateY(2px); } .j1 { transform: rotate(3deg) translateY(-3px); } .j2 { transform: rotate(-2deg); }
.j3 { transform: rotate(5deg) translateY(1px); } .j4 { transform: rotate(-6deg) translateY(-2px); } .j5 { transform: rotate(2deg) translateY(3px); }
.j6 { transform: rotate(-3deg) translateY(-1px); }
.sombrero { position: absolute; width: clamp(92px, 15vw, 170px); left: clamp(-30px, -2vw, -8px); top: clamp(-104px, -12vw, -58px); transform: rotate(-13deg);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); animation: balancea 7s ease-in-out infinite alternate; transform-origin: 40% 90%; }
@keyframes balancea { from { transform: rotate(-16deg); } to { transform: rotate(-9deg); } }
.bajar { display: inline-flex; gap: 10px; margin-top: 26px; padding: 10px 22px; border-radius: 40px; text-decoration: none;
  font-family: 'Fell SC', var(--fell); font-size: 1.15rem; letter-spacing: .08em; color: var(--tinta); background: var(--oro-claro);
  border: 2px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); transform: rotate(-2deg); }
.bajar:hover { transform: rotate(1deg) translateY(-2px); }

/* ── las entradas: naipes ─────────────────────────────────────────────────────────────────────────────────────── */
.entradas { padding: 56px 16px 80px; background:
  radial-gradient(ellipse at 50% 0, rgba(122, 92, 160, .22), transparent 60%), var(--noche); }
.seccion { margin: 0 auto 34px; max-width: 980px; text-align: center; font-family: 'Fell SC', var(--fell); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: .12em; color: var(--oro-claro); }
.seccion::before, .seccion::after { content: '♠ ♥'; display: inline-block; margin: 0 .6em; font-size: .55em; vertical-align: .3em; color: var(--oro-oscuro); }
.seccion::after { content: '♣ ♦'; }
.naipe { max-width: 980px; margin: 0 auto; }
.naipe a { position: relative; display: grid; gap: 22px; padding: 46px 26px 52px; text-decoration: none; color: var(--tinta);
  border-radius: 22px; border: 2px solid var(--tinta); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E"), var(--papel);
  box-shadow: inset 0 0 0 9px var(--papel), inset 0 0 0 10.5px var(--oro-oscuro), 0 24px 60px rgba(0, 0, 0, .55);
  transform: rotate(-.6deg); transition: transform .35s ease; }
.naipe a:hover, .naipe a:focus-visible { transform: rotate(.4deg) translateY(-4px); }
.esquina { position: absolute; display: flex; flex-direction: column; align-items: center; font-family: var(--fell); font-size: 1.35rem; line-height: 1; color: var(--sangre); }
.esquina b { font-size: 1.3rem; margin-top: 2px; }
.esquina.arriba { top: 18px; left: 20px; } .esquina.abajo { bottom: 18px; right: 20px; transform: rotate(180deg); }
.lamina-naipe img { width: min(100%, 460px); height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.naipe-texto { display: flex; flex-direction: column; gap: 8px; }
.fecha { font-family: var(--fell); font-style: italic; color: var(--tinta-2); font-size: 1rem; }
.naipe-titulo { font-family: var(--burton); font-weight: 700; font-size: clamp(2.3rem, 7vw, 3.4rem); line-height: 1; color: var(--tinta); }
.naipe-sub { font-family: var(--fell); font-style: italic; font-size: 1.2rem; line-height: 1.35; color: var(--sangre); }
.naipe-entradilla { font-size: 1.08rem; line-height: 1.6; }
.leer { align-self: flex-start; margin-top: 8px; padding: 8px 18px; border-radius: 30px; background: var(--tinta); color: var(--papel);
  font-family: 'Fell SC', var(--fell); letter-spacing: .06em; font-size: 1.05rem; }
@media (min-width: 820px) {
  .naipe a { grid-template-columns: 1fr 1fr; align-items: center; padding: 54px 58px; gap: 44px; }
}

/* ── la entrada: cabecera de noche, camafeo con el Sombrerero y papel para leer ───────────────────────────────────── */
.cabecera { position: relative; overflow: hidden; padding: 112px 18px 0; isolation: isolate;
  background: radial-gradient(circle at 20% 30%, rgba(243, 232, 210, .14), transparent 40%), linear-gradient(#0a0918, #241a39 70%, #33264b); }
.cabecera-cielo { position: absolute; inset: 0; z-index: -1; } .cabecera-cielo .estrellas { height: 100%; }
.cabecera .colina { bottom: 14px; height: 62%; opacity: .95; z-index: 0; }
.cabecera-dentro { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding-bottom: 92px; display: grid; gap: 26px; justify-items: center; text-align: center; }
.camafeo { width: min(46vw, 250px); aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #2a2140, #0b0a14 75%); border: 3px solid var(--oro);
  box-shadow: 0 0 0 7px rgba(11, 10, 20, .8), 0 0 0 8.5px var(--oro-oscuro), 0 0 60px rgba(201, 168, 120, .3); transform: rotate(-3deg); }
.camafeo img { width: 92%; height: auto; transform: translateY(5%); mix-blend-mode: screen; }
.cabecera .rotulo { font-size: clamp(2.9rem, 10vw, 6rem); }
.subtitulo { margin: 14px auto 0; max-width: 34ch; font-family: var(--fell); font-style: italic; font-size: clamp(1.15rem, 3.2vw, 1.5rem); line-height: 1.35; color: var(--oro-claro); }
.meta { margin: 12px 0 0; font-family: 'Fell SC', var(--fell); letter-spacing: .06em; color: rgba(243, 232, 210, .75); }
.cabecera > .rayas { position: relative; z-index: 2; }
.luna-cab { display: none; }
@media (min-width: 1000px) {
  .luna-cab { display: block; position: absolute; z-index: 0; width: 220px; height: auto; top: 86px; right: max(30px, calc(50% - 600px));
    border-radius: 50%; filter: drop-shadow(0 0 24px rgba(243, 232, 210, .4)) drop-shadow(0 0 70px rgba(201, 168, 120, .3)); }
}
@media (min-width: 820px) {
  .cabecera-dentro { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 54px; align-items: center; }
  .subtitulo { margin-left: 0; }
}

.papel { position: relative; width: min(780px, calc(100% - 20px)); margin: 46px auto 0; padding: 40px clamp(20px, 6vw, 70px) 50px;
  color: var(--tinta); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 0, #f6ecd8, var(--papel) 60%, var(--papel-2));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65); font-size: clamp(1.1rem, .98rem + .4vw, 1.24rem); line-height: 1.72;
  text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.papel::before, .papel::after { content: ''; position: absolute; left: 0; right: 0; height: 22px; background-repeat: repeat-x; background-size: 600px 22px; }
.papel::before { top: -21px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' width='600' height='22' preserveAspectRatio='none'%3E%3Cpath fill='%23efe4cc' d='M0 22 L0 12.5 L9 19.7 L17.2 13.3 L26.5 8.3 L35.1 15.2 L46.3 6.9 L53 6.9 L64.3 16.2 L68.7 20.6 L81.3 15.6 L90.9 7.9 L95 13.6 L99.5 8.4 L105.7 6 L113.9 12.3 L125.5 13.5 L135.2 13.2 L145.2 12.5 L151.7 20.9 L164.7 18.4 L175 10.4 L181.1 10 L185.7 17.3 L193.3 18.5 L200.8 20.3 L212.4 5.5 L218.3 19.5 L226.6 20.6 L234.1 6.6 L243.8 17.5 L250.2 6.8 L257.2 20.3 L268.1 7.3 L274.3 7.1 L278.8 17.8 L284.4 14.1 L292.4 8.4 L303 7.5 L312.8 7.3 L320.6 8.8 L327 20.5 L338.3 10.2 L350.2 8.7 L357.8 18.7 L367.5 7 L380.5 8.8 L386.8 17.4 L393.7 10.1 L398.4 6.9 L407.6 9.2 L417.1 11.2 L425.1 20.3 L433.5 14.3 L445.3 8.3 L450.7 19.5 L462 9.3 L467.7 16.9 L480.2 8.5 L492.8 19.1 L502.2 12 L507.1 6.1 L519.8 9.2 L530.1 9.5 L541.5 14.7 L548.2 8.2 L558.7 6.6 L564.7 14.1 L576.4 15 L582.9 19.6 L588.8 5.8 L595.2 12.4 L599.7 8.2 L600 12.5 L600 22Z'/%3E%3C/svg%3E"); }
.papel::after { bottom: -21px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' width='600' height='22' preserveAspectRatio='none'%3E%3Cpath fill='%23efe4cc' d='M0 0 L0 9.2 L9.9 6.2 L15.2 16.3 L22.6 12.3 L33.9 5.9 L43.3 7.9 L53.2 14.3 L61.2 14 L73.3 15.6 L84.7 15.4 L94.9 11.3 L102.5 3.5 L106.7 15.6 L118.9 8.7 L123.8 1.3 L136.3 14.8 L144.1 14.4 L150.9 6.9 L156.4 5.8 L160.8 13.9 L172.2 10.3 L179.9 7.3 L188.2 10.6 L192.5 5.3 L205.2 1.5 L215.2 11 L222.5 5.9 L232.5 14.7 L238.6 10.9 L247.2 4 L255.7 16.1 L267.1 9.9 L275.8 13.1 L283.7 10.5 L294.6 14.9 L303.6 13.8 L313.8 15.9 L320.3 11.2 L330 15.7 L338.2 13.3 L344.7 9.2 L357.3 9.1 L369.9 13.9 L382.3 10.9 L388 5 L400.2 16.4 L406.6 4.6 L413.7 12.8 L417.7 15.9 L427.3 1.3 L440.3 8.7 L444.5 11.5 L455.6 3.7 L465.4 13 L474.1 9.1 L483.7 12.5 L496.3 2.7 L501.7 12 L513.6 12.2 L526.1 8.6 L536.3 5.6 L542.3 12.1 L548.6 6 L558.8 14.5 L570.8 10 L577 9.8 L589.8 7.9 L599.4 2.3 L600 9.2 L600 0Z'/%3E%3C/svg%3E"); }
.papel p { margin: 0 0 1.05em; text-wrap: pretty; }
.papel em { font-style: italic; }

.indice { margin: 0 0 36px; text-align: center; }
.indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.indice a { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 92px; height: 128px; padding: 8px 6px 10px;
  text-decoration: none; color: var(--tinta); background: var(--marfil); border: 1.5px solid var(--tinta); border-radius: 9px;
  box-shadow: 2px 3px 0 rgba(27, 22, 33, .35); font-family: var(--fell); font-size: .86rem; line-height: 1.15; text-align: center; transition: transform .2s; }
.indice li:nth-child(odd) a { transform: rotate(-2.5deg); } .indice li:nth-child(even) a { transform: rotate(2deg); }
.indice a:hover, .indice a:focus-visible { transform: translateY(-5px) rotate(0); }
.indice b { font-weight: 400; font-size: 1.3rem; color: var(--sangre); display: flex; flex-direction: column; align-items: center; }
.indice b i { font-style: normal; font-size: 1.1rem; }
.indice li:nth-child(4n+1) b, .indice li:nth-child(4n+3) b { color: var(--tinta); }
@media (min-width: 820px) { .indice ol { gap: 8px; flex-wrap: nowrap; } .indice a { width: 80px; height: 114px; font-size: .8rem; } }

.parte { margin-top: 10px; }
.parte + .parte { margin-top: 44px; }
.parte-cab { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; text-align: left; }
.parte-num { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 72px;
  border: 1.5px solid var(--tinta); border-radius: 7px; background: var(--marfil); font-family: var(--fell); font-size: 1.15rem; line-height: 1;
  color: var(--sangre); box-shadow: 2px 3px 0 rgba(27, 22, 33, .3); transform: rotate(-4deg); }
.parte-num i { font-style: normal; margin-top: 3px; }
.parte:nth-child(4n+2) .parte-num, .parte:nth-child(4n+4) .parte-num { color: var(--tinta); }
.parte-cab h2 { margin: 0; font-family: 'Fell SC', var(--fell); font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1;
  letter-spacing: .03em; color: var(--tinta); }
.parte-cab h2::after { content: ''; display: block; height: 10px; margin-top: 6px; width: min(220px, 60%);
  background: radial-gradient(circle, var(--sangre) 2.4px, transparent 3px) 0 50% / 14px 10px repeat-x; opacity: .7; }
.capitular::first-letter { float: left; font-family: var(--fell); font-size: 4.3em; line-height: .8; padding: .08em .1em 0 0; margin: .02em .12em 0 0;
  color: var(--sangre); text-shadow: 2px 2px 0 rgba(201, 168, 120, .55); }
.lamina { margin: 6px auto 22px; width: min(78%, 340px); text-align: center; }
/* el giro va en la imagen y no en la figura: una figura girada aísla su contenido y el «multiply» ya no ve el papel */
.lamina img { width: 100%; height: auto; mix-blend-mode: multiply; }
.lamina.izq img { transform: rotate(-1.4deg); } .lamina.der img { transform: rotate(1.2deg); }
figcaption { margin-top: 8px; font-family: var(--fell); font-style: italic; font-size: .92rem; line-height: 1.35; color: var(--tinta-2); text-align: center; -webkit-hyphens: manual; hyphens: manual; }
figcaption span { display: block; font-size: .85rem; opacity: .85; }
@media (min-width: 820px) {
  .lamina { width: 300px; margin-top: 4px; }
  .lamina.izq { float: left; margin: 4px 30px 16px -10px; }
  .lamina.der { float: right; margin: 4px -10px 16px 30px; }
  .parte::after { content: ''; display: block; clear: both; }
}
.tesis { position: relative; margin: 28px 0 30px; padding: 30px clamp(18px, 4vw, 34px) 22px; text-align: left; -webkit-hyphens: manual; hyphens: manual;
  background: var(--marfil); border: 2px solid var(--tinta); border-radius: 4px;
  box-shadow: inset 0 0 0 6px var(--marfil), inset 0 0 0 7.5px var(--oro-oscuro), 6px 7px 0 rgba(27, 22, 33, .3); transform: rotate(-.5deg); }
.tesis p { margin: 0; font-size: 1.12em; line-height: 1.6; }
.tesis-orla { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 0 12px; background: var(--papel); color: var(--sangre);
  letter-spacing: .3em; font-size: 1.05rem; white-space: nowrap; }
.ornamento { clear: both; margin: 44px 0 26px; text-align: center; letter-spacing: .6em; color: var(--sangre); font-size: 1.15rem; }
.obras { font-size: .93em; line-height: 1.55; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.obras-titulo { margin: 0 0 14px; font-family: 'Fell SC', var(--fell); font-weight: 400; font-size: 1.45rem; letter-spacing: .06em; text-align: center; }
.obras ul { margin: 0; padding-left: 1.1em; } .obras li { margin-bottom: .45em; } .obras li::marker { content: '♦  '; color: var(--sangre); font-size: .8em; }
.fin { margin: 34px 0 0; text-align: center; font-size: 2rem; color: var(--oro-oscuro); }
.volver { text-align: center; padding: 50px 16px 60px; }
.volver a { font-family: 'Fell SC', var(--fell); font-size: 1.15rem; letter-spacing: .05em; }

/* el reloj de bolsillo del Conejo Blanco: la aguja roja marca lo leído */
.reloj { position: fixed; z-index: 30; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 54px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .5s; pointer-events: none; }
.reloj.visible { opacity: 1; }
.reloj .aguja, .reloj .aguja-h { transform-origin: 60px 80px; transform-box: view-box; }
@media (min-width: 820px) { .reloj { width: 70px; } }

/* ── pie ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pie { background: #07060d; color: rgba(243, 232, 210, .8); }
.pie-dentro { max-width: 760px; margin: 0 auto; padding: 40px 18px 46px; text-align: center; font-size: .98rem; line-height: 1.5; }
.pie-dentro img { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(201, 168, 120, .35)); }
.firma { margin: 0 0 14px; font-family: 'Fell SC', var(--fell); font-size: 1.35rem; letter-spacing: .14em; color: var(--oro-claro); }
.firma span { font-size: .8em; letter-spacing: .1em; color: var(--oro-oscuro); }
.pie p { margin: 0 0 8px; }

/* ── página perdida ────────────────────────────────────────────────────────────────────────────────────────────── */
.perdida { background: linear-gradient(#0a0918, #241a39); min-height: 100svh; }
.perdida-dentro { padding: 120px 18px 60px; text-align: center; }
.perdida-dentro img { width: 200px; height: auto; margin: 0 auto 20px; transform: rotate(-4deg); mix-blend-mode: screen; }
.perdida-dentro h1 { font-family: var(--burton); font-size: clamp(2.2rem, 8vw, 3.6rem); margin: 0 0 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .sonrisa .ojos, .sonrisa .boca { opacity: 1; }
  .carta { top: auto; bottom: 30%; } .carta.c1, .carta.c3, .carta.c5 { display: none; }
}
@media print {
  .barra, .escena, .cartas, .reloj, .indice, .pie, .volver, .cabecera { display: none !important; }
  body { background: #fff; } .papel { box-shadow: none; width: auto; margin: 0; background: #fff; }
  .papel::before, .papel::after { display: none; }
}