:root{
  --crema:#F3EEE4; --papel:#FBF8F1; --tinta:#1B1424; --morado:#4B0082; --mostaza:#D4AF37; --noche:#160C26; --lila:#B9A3D9;
  --anton:"Anton",Impact,"Arial Narrow",sans-serif; --brico:"Bricolage Grotesque",system-ui,sans-serif; --mano:"Caveat","Comic Sans MS",cursive;
  --g:clamp(16px,4vw,64px); --d:8em;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 1.125rem/1.55 var(--brico);overflow-x:hidden;text-rendering:optimizeLegibility}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px;border-radius:3px}
.it{font-style:italic}
.mano{font-family:var(--mano);font-weight:700}
.nw{white-space:nowrap}

/* barra */
.barra{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1rem var(--g)}
.logo img{width:clamp(56px,6vw,78px);height:auto;display:block}
.barra nav{display:flex;gap:1.4rem;font:800 .8rem/1 var(--brico);text-transform:uppercase;letter-spacing:.06em}
.barra nav a{text-decoration:none;padding:.5rem 0;border-bottom:2px solid transparent}
.barra nav a:hover{border-color:currentColor}

/* trazos a mano */
.trazo{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;align-content:center;padding:7rem var(--g) 4rem;position:relative}
.titular{font:400 clamp(4.6rem,17.5vw,18rem)/.92 var(--anton);text-transform:uppercase;margin:0;letter-spacing:-.005em}
.titular>span{display:block;overflow:hidden;padding-top:.04em}
.titular .l2{color:var(--tinta)}
.poco{position:relative;display:inline-block;color:var(--morado)}
.circulo{position:absolute;left:-15%;top:-24%;width:130%;height:146%;color:var(--tinta);pointer-events:none;overflow:visible}
.circulo .trazo{stroke-width:3}
.anota{font-size:clamp(1.7rem,3.4vw,3rem);line-height:1;margin:.6em 0 0 clamp(2rem,22vw,22rem);color:var(--morado);position:relative;transform:rotate(-3deg);display:inline-block}
.flecha{position:absolute;width:1.6em;height:1.2em;left:-1.8em;top:-1.1em;color:var(--tinta);transform:scaleX(-1) rotate(10deg)}
.firma{font:500 clamp(.95rem,1.3vw,1.15rem)/1.4 var(--brico);margin:3rem 0 0;max-width:30rem}
@media (min-width:600px){.firma-lineas{max-width:none}.firma-lineas .ln{display:block}}

/* ---------- noche / casa ---------- */
.noche{background:var(--noche);color:var(--crema);padding:clamp(4rem,9vw,8rem) var(--g) clamp(3rem,6vw,5rem);position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 12% 18%,#F3EEE4 1px,transparent 1.6px),radial-gradient(circle at 78% 9%,#E3B23C 1.4px,transparent 2px),radial-gradient(circle at 88% 34%,#F3EEE4 1px,transparent 1.6px),radial-gradient(circle at 30% 6%,#F3EEE4 .8px,transparent 1.4px),radial-gradient(circle at 55% 22%,#E3B23C 1px,transparent 1.6px),radial-gradient(circle at 6% 46%,#F3EEE4 1px,transparent 1.6px),radial-gradient(circle at 94% 60%,#E3B23C 1.2px,transparent 1.8px)}
.enorme{font:400 clamp(2.8rem,10.5vw,11rem)/1 var(--anton);text-transform:uppercase;text-align:center;margin:0}

.pasa{font-size:clamp(1.4rem,2.6vw,2.2rem);text-align:center;color:var(--mostaza);margin:.8rem 0 0;transform:rotate(-2deg)}
.pista{text-align:center;font:500 .85rem/1.4 var(--brico);color:var(--lila);margin:1rem 0 0}
.pista .tactil{display:none}@media (hover:none){.pista .raton{display:none}.pista .tactil{display:inline}}

/* ---------- la casa 3D ---------- */
.escenario{font-size:min(2.05vw,17px);perspective:120em;perspective-origin:50% 35%;margin:3.5em auto 0;width:52em;max-width:100%;height:56em;display:flex;justify-content:center}
.mundo{position:relative;width:40em;height:50em;transform-style:preserve-3d;transform:rotateX(var(--rx,-8deg)) rotateY(var(--ry,16deg));will-change:transform}
.cuarto{position:absolute;display:block;left:calc(var(--x)*1em);top:calc(var(--y)*1em);width:calc(var(--w)*1em);height:calc(var(--h)*1em);transform-style:preserve-3d;text-decoration:none;color:inherit;outline:none}
.caja{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.p{position:absolute;display:block}
.fondo{inset:0;background:var(--pared);transform:translateZ(calc(var(--d)*-1));overflow:hidden}
.suelo{left:0;right:0;bottom:0;height:var(--d);transform-origin:bottom;transform:rotateX(90deg);
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 2.2em),linear-gradient(var(--suelo),color-mix(in srgb,var(--suelo) 70%,#000))}
.techo{left:0;right:0;top:0;height:var(--d);transform-origin:top;transform:rotateX(-90deg);background:color-mix(in srgb,var(--pared) 55%,#000)}
.izq{top:0;bottom:0;left:0;width:var(--d);transform-origin:left;transform:rotateY(90deg);background:linear-gradient(90deg,color-mix(in srgb,var(--pared) 78%,#000),var(--pared))}
.der{top:0;bottom:0;right:0;width:var(--d);transform-origin:right;transform:rotateY(-90deg);background:linear-gradient(270deg,color-mix(in srgb,var(--pared) 70%,#000),color-mix(in srgb,var(--pared) 92%,#000))}
.medio{inset:0;transform:translateZ(calc(var(--d)*-.48));pointer-events:none}
.frente{inset:0;transform:translateZ(calc(var(--d)*-.14));pointer-events:none}
/* Safari: si un dibujo se sale de su cuarto cruza las paredes laterales y desordena la profundidad (el cuarto se vacía) */
.medio .dib,.frente .dib{overflow:hidden}
.dib{width:100%;height:100%;display:block;overflow:visible}
.resplandor{position:absolute;inset:0;background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,226,160,.75),rgba(255,200,120,.18) 38%,transparent 62%);opacity:0;transition:opacity .6s}
.cuarto.on .resplandor{opacity:1}
.sombra{inset:0;background:rgba(14,6,28,.84);transform:translateZ(.12em);pointer-events:none;transition:opacity .5s}
.cuarto.on .sombra{animation:encender 1s forwards}
@keyframes encender{0%{opacity:1}12%{opacity:.25}20%{opacity:.85}30%{opacity:.35}45%,100%{opacity:0}}
.apagado .sombra{opacity:.72}
a.apagado:hover .sombra,a.apagado:focus-visible .sombra{opacity:.45}
.borde{position:absolute;inset:-.32em;border:.32em solid #F4EEE2;box-shadow:inset 0 0 0 .08em var(--tinta),0 0 0 .08em var(--tinta);pointer-events:none;transform:translateZ(.18em)}
.tri .borde{display:none}
.tri .fondo,.tri .sombra,.tri .medio{clip-path:polygon(0 100%,50% 0,100% 100%)}
a.cuarto:hover .caja,a.cuarto:focus-visible .caja,.cuarto.activo .caja{transform:translateZ(1.4em)}
.rotulo{position:absolute;left:50%;top:-.4em;transform:translate(-50%,-100%) translateZ(3em) rotate(-3deg);font:700 1.9em/1 var(--mano);color:var(--tinta);background:var(--mostaza);padding:.15em .45em .2em;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:.12em .12em 0 var(--tinta)}
a.cuarto:hover .rotulo,a.cuarto:focus-visible .rotulo,.cuarto.activo .rotulo{opacity:1}
.c-antes .rotulo{top:auto;bottom:-.6em;transform:translate(-50%,100%) translateZ(3em) rotate(2deg)}
.cuarto.aqui .borde{border-color:var(--mostaza)}
.cuarto.desde .borde{border-color:var(--mostaza)}
.tiza{font:700 13px var(--mano);fill:#F4EEE2}
.cartel{font:italic 700 9px Georgia,serif;fill:#B8901F}
.cal{font:700 10px var(--brico);fill:var(--tinta)}
.auto{font:800 7.5px var(--brico);fill:var(--tinta)}
svg .mano{font-family:var(--mano);font-weight:700;fill:var(--tinta)}

.tejado{position:absolute;height:calc(var(--d) + 1.6em);transform-origin:left top;
  background:repeating-linear-gradient(0deg,#3A0068 0 .12em,var(--morado) .12em 1.3em)}
.t-izq{left:-2em;top:10.8em;width:24.6em;transform:rotateZ(-26.57deg) rotateX(-90deg) translateY(-.8em)}
.t-der{left:20em;top:-.2em;width:24.6em;transform:rotateZ(26.57deg) rotateX(-90deg) translateY(-.8em)}
.chimenea{position:absolute;left:28.5em;top:1.2em;width:3em;height:5.5em;background:#3A0068;border:.12em solid var(--tinta);transform:translateZ(-4.5em)}
.gablete{position:absolute;left:-2em;top:-.2em;width:44em;height:11em;transform:translateZ(.12em);overflow:visible;pointer-events:none}
.lateral{position:absolute;left:-.32em;top:10.2em;width:var(--d);height:30.7em;transform-origin:left;transform:rotateY(90deg);
  background:radial-gradient(circle at 50% 22%,#F7E7A6 0 1.1em,transparent 1.2em),radial-gradient(circle at 50% 56%,#2B0050 0 1.1em,transparent 1.2em),linear-gradient(90deg,#D9CFBE,#EDE5D7);border:.08em solid var(--tinta)}
.lateral.der{left:40.32em}
.tierra{position:absolute;left:-5em;top:40.7em;width:50em;height:10.6em;background:linear-gradient(#2A1838,#1D1028);transform:translateZ(calc(var(--d)*-1 - .2em))}
.cesped{position:absolute;left:-7em;top:40.7em;width:54em;height:calc(var(--d) + 7em);transform-origin:top;transform:translateZ(4em) rotateX(-90deg);
  background:radial-gradient(ellipse at 50% 40%,#3B2A55,#1E1230 70%)}
.c-antes .borde{border-color:#3A2A44}

/* en la página de una habitación */
.escenario.solo{width:auto;height:auto;margin:0;perspective:80em;font-size:min(calc(30vw / var(--w)),calc(460px / var(--w)))}
.solo .mundo{width:auto;height:auto;transform:rotateX(var(--rx,-6deg)) rotateY(var(--ry,-14deg))}
.solo .cuarto{position:relative;left:0;top:0}
.solo .rotulo{display:none}
.escenario.mini{font-size:min(.62vw,6px);height:52em;width:48em;margin:0 auto;perspective:110em}
.mini .rotulo{font-size:3.4em}

/* ---------- hola ---------- */
.hola{padding:clamp(4rem,9vw,8rem) var(--g);max-width:64rem;margin:0 auto}
.parrafo{font:500 clamp(1.3rem,2.1vw,1.85rem)/1.5 var(--brico);margin:0 0 1.3rem;text-wrap:pretty;max-width:42rem}
.parrafo.grande{font:400 clamp(3.4rem,8vw,7.5rem)/.9 var(--anton);text-transform:uppercase;margin-bottom:2rem}
.n{all:unset;cursor:pointer;display:inline-block;font:800 .5em/1 var(--brico);color:var(--crema);background:var(--morado);border-radius:999px;min-width:1.55em;padding:.28em .3em;text-align:center;vertical-align:.75em;margin-left:.12em;transition:transform .15s,background .15s}
.parrafo.grande .n{font-size:.22em;vertical-align:2.6em}
.n:hover,.n[aria-expanded="true"]{background:var(--mostaza);color:var(--tinta);transform:rotate(-8deg) scale(1.15)}
.n:focus-visible{outline:3px solid var(--mostaza);outline-offset:2px}

/* ---------- índice de habitaciones ---------- */
.indice{padding:0 0 clamp(4rem,8vw,7rem);overflow:hidden}
.indice li,.pasillo li{overflow:hidden}
.indice ul{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--tinta)}
.indice li{border-top:2px solid var(--tinta)}
.indice a{display:flex;align-items:baseline;gap:clamp(.8rem,2vw,2rem);padding:.15em var(--g) .05em;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.indice .rn{font:800 .85rem/1 var(--brico);min-width:2.6rem}
.indice .pal{font:400 clamp(3.6rem,13vw,13rem)/.92 var(--anton);text-transform:uppercase}
.indice .eti{font-size:clamp(1.3rem,2.4vw,2.2rem);color:var(--morado);opacity:0;transform:translateY(.3em) rotate(-4deg);transition:opacity .25s,transform .25s}
.indice a:hover,.indice a:focus-visible{background:var(--morado);color:var(--crema)}
.indice a:hover .eti,.indice a:focus-visible .eti{opacity:1;transform:none;color:var(--mostaza)}
@media (hover:none){.indice .eti{opacity:1;transform:none}}

/* ---------- cierre ---------- */
.cierre{background:var(--morado);color:var(--crema);text-align:center;padding:clamp(5rem,11vw,9rem) var(--g)}
.cierre-grande{font:400 clamp(3.8rem,13vw,13rem)/.86 var(--anton);text-transform:uppercase;margin:0}
.cierre-grande span{display:block}
.cierre-mano{font-size:clamp(2.2rem,5vw,4.4rem);color:var(--mostaza);margin:.2em 0 1.4rem;transform:rotate(-3deg)}
.cierre-txt{max-width:30rem;margin:0 auto 2rem;font-size:1.2rem}
.vias{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.vias a{font:800 .9rem/1 var(--brico);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:1.05rem 1.4rem;border-radius:999px;border:2px solid var(--crema)}
.vias a.prim{background:var(--mostaza);border-color:var(--mostaza);color:var(--tinta)}
.vias a:hover{transform:translateY(-2px)}
.pie{background:var(--tinta);color:var(--lila);font:500 .75rem/1.6 var(--brico);text-align:center;padding:1.4rem var(--g)}

/* ---------- página de habitación ---------- */
.pag section.cartel{min-height:100svh;background:var(--pared);display:grid;align-content:center;justify-items:center;padding:7rem var(--g) 4rem;overflow:hidden;text-align:center}
.pag-todavia section.cartel{color:var(--crema)} .pag-todavia .barra,.pag-clase .barra{color:var(--crema)}
.pag-clase section.cartel{color:var(--crema)}
.rn-top{font:800 .85rem/1 var(--brico);text-transform:uppercase;letter-spacing:.1em;margin:0 0 clamp(2rem,5vw,4rem)}
.palabra{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2.5vw,2.5rem);margin:0;font:400 clamp(4.5rem,17vw,19rem)/.84 var(--anton);text-transform:uppercase;white-space:nowrap}
.mitad{display:block}
.ventana{display:block;flex:none}
.bajada{font-size:clamp(1.6rem,3.2vw,2.8rem);margin:1.6rem 0 0;transform:rotate(-2deg)}
@media (max-width:760px){
  .palabra{flex-direction:column;gap:1.2rem;font-size:clamp(4rem,24vw,10rem)}
  .escenario.solo{font-size:calc(74vw / var(--w))}
}
.cuerpo{max-width:62rem;margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--g) 2rem}
.poco-bloque{margin:0 0 clamp(3rem,7vw,6rem)}
.poco-bloque .et{font:800 .85rem/1 var(--brico);text-transform:uppercase;letter-spacing:.12em;color:var(--morado);margin:0 0 1.6rem;position:relative;z-index:1}
.poco-bloque .gr{font:400 clamp(2.8rem,7.5vw,6.8rem)/1 var(--anton);text-transform:uppercase;margin:0 0 2rem;text-wrap:balance}
.poco-bloque .resto{color:var(--morado)}
.bloque{margin:0 0 clamp(3rem,6vw,5rem)}
.bloque p{font-size:1.25rem;max-width:40rem;margin:0 0 1.1rem;text-wrap:pretty}
.bloque .lead{font:500 clamp(1.5rem,2.6vw,2.15rem)/1.4 var(--brico)}
.bloque.centro{text-align:center}.bloque.centro p{margin-inline:auto}
.sub{font:400 clamp(2.4rem,5vw,4rem)/1 var(--anton);text-transform:uppercase;margin:0 0 1rem}
.estante{list-style:none;padding:0;margin:1.5rem 0;border-top:2px solid var(--tinta)}
.estante li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgba(27,20,36,.2)}
.estante .fecha{font:800 .8rem/1.9 var(--brico);text-transform:uppercase;color:var(--morado)}
.estante .titulo{font:700 1.35rem/1.3 var(--brico)}
.estante a{text-decoration:none;border-bottom:2px solid var(--mostaza)}
.estante small{display:block;font:400 .92rem/1.5 var(--brico);color:#5B5266;margin-top:.3rem}
.salir{display:inline-block;font:800 .95rem/1.2 var(--brico);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;background:var(--tinta);color:var(--crema);padding:1.05rem 1.4rem;border-radius:999px;margin:1rem 0}
.salir small{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:.78rem;margin-top:.25rem;color:var(--lila)}
.salir.apagada{opacity:.6}
.pend{font:500 .92rem/1.5 var(--brico)!important;color:var(--morado);border:2px dashed var(--morado);border-radius:10px;padding:.7rem .9rem;margin:1.2rem 0!important;max-width:40rem}
.pend::before{content:"Falta · ";font-weight:800}
.cuaderno{margin:0 0 clamp(3rem,6vw,5rem);overflow:hidden;padding:1.5rem .6rem;display:flex;flex-direction:column;align-items:center}
.hoja{width:100%;background:#FFFDF6 repeating-linear-gradient(transparent 0 2.15rem,#BFD3E6 2.15rem calc(2.15rem + 1px));border-left:3px solid #E8A3A3;box-shadow:0 18px 40px rgba(27,20,36,.15);padding:1.1rem 1.6rem 1.6rem 2.4rem;max-width:34rem;transform:rotate(-1.5deg)}
.hoja .mano{font-size:1.85rem;line-height:2.15rem;margin:0 0 2.15rem}
.hoja .chica{font-size:1.5rem;color:#5B5266}
.hoja .verso-mano{color:var(--morado);font-size:2.1rem;margin:0}
.nota-hoja{font-size:1.3rem;color:#5B5266;margin:1rem 0 0;transform:rotate(2deg)}
.grande-mano{font-size:clamp(2.4rem,5vw,3.6rem)!important;color:var(--morado);transform:rotate(-2deg);display:inline-block}
.frase{background:var(--tinta);color:var(--crema);margin:0 0 clamp(3rem,6vw,5rem);padding:clamp(3.5rem,8vw,7rem) var(--g);text-align:center;width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.frase p{font:400 clamp(2.6rem,7vw,6.5rem)/.95 var(--anton);text-transform:uppercase;margin:0 auto;max-width:18ch;text-wrap:balance}
.frase p.mano{font:700 clamp(1.4rem,2.6vw,2.2rem)/1.2 var(--mano);text-transform:none;color:var(--mostaza);margin-top:1.4rem}
.frase.verso{background:var(--morado)}
.frase.verso p:first-child{font:700 clamp(2.4rem,6vw,5.4rem)/1.05 var(--mano);text-transform:none;max-width:20ch}
.frase.estrellas{background:var(--noche);background-image:radial-gradient(circle at 15% 25%,#F3EEE4 1px,transparent 1.6px),radial-gradient(circle at 80% 20%,#E3B23C 1.4px,transparent 2px),radial-gradient(circle at 60% 80%,#F3EEE4 1px,transparent 1.6px),radial-gradient(circle at 30% 75%,#E3B23C 1px,transparent 1.6px)}
.frase em{font-style:normal;color:var(--mostaza)}
.mesa{display:flex;flex-wrap:wrap;gap:1.5rem;margin:2rem 0}
.polaroid{background:#FFFDF6;padding:.8rem .8rem 3rem;width:13rem;margin:0;position:relative;transform:rotate(var(--r));box-shadow:0 14px 30px rgba(27,20,36,.18);display:inline-block}
.polaroid span{display:grid;place-items:center;aspect-ratio:1;background:#E4DACB;font:700 1.35rem/1.15 var(--mano);color:#6B5E78;text-align:center;padding:1rem}
.cinta{position:absolute;top:-.7rem;left:50%;width:4.5rem;height:1.4rem;transform:translateX(-50%) rotate(-4deg);background:rgba(227,178,60,.55)}
.mapa{max-width:62rem;margin:0 auto;padding:0 var(--g);text-align:center}
.mapa .eti{font-size:1.5rem;color:var(--morado);margin:.4rem 0 0}
.pasillo{max-width:92rem;margin:0 auto;padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,6rem)}
.pasillo ul{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--tinta)}
.pasillo li{border-top:2px solid var(--tinta)}
.pasillo a{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.2rem;text-decoration:none;padding:.1em var(--g) 0;transition:background .25s,color .25s}
.pasillo .eti{font-size:clamp(1.3rem,2.4vw,2rem);min-width:4.5rem;color:var(--morado)}
.pasillo .pal{font:400 clamp(2.6rem,9vw,8.5rem)/.95 var(--anton);text-transform:uppercase}
.pasillo a:hover,.pasillo a:focus-visible{background:var(--morado);color:var(--crema)}
.pasillo a:hover .eti{color:var(--mostaza)}
.volver{display:inline-block;margin:1.6rem var(--g) 0;font:800 .9rem/1 var(--brico);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.2rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.cuarto.on .sombra{opacity:0}}

/* ---------- borrador 4 ---------- */
.eti{font:800 .78rem/1.2 var(--brico)!important;text-transform:uppercase;letter-spacing:.08em}
.indice .eti{font-size:clamp(.8rem,1.1vw,1rem)!important;align-self:center}
.pasillo .eti{align-self:center}
.mapa .eti{color:var(--morado);margin-top:.6rem}
svg .rot{font:800 8px var(--brico);fill:var(--tinta);text-transform:uppercase;letter-spacing:.06em}
.parrafo.grande .n{font-size:.2em;vertical-align:2.8em}
.nota-pop{position:absolute;z-index:45;width:max-content;max-width:min(22rem,calc(100vw - 24px));background:var(--tinta);color:var(--crema);font:500 .98rem/1.45 var(--brico);padding:.85rem 1rem .9rem;border-radius:12px;box-shadow:0 18px 40px rgba(27,20,36,.28);opacity:0;transform:translateY(6px) scale(.97);transform-origin:var(--ox,50%) 100%;transition:opacity .18s,transform .18s;pointer-events:none;left:0;top:0}
.nota-pop.abierta{opacity:1;transform:none;pointer-events:auto}
.nota-pop.abajo{transform-origin:var(--ox,50%) 0}
.nota-pop::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:12px;height:12px;background:var(--tinta);transform:translateX(-50%) rotate(45deg)}
.nota-pop.abajo::after{bottom:auto;top:-6px}
.nota-pop b{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:999px;background:var(--mostaza);color:var(--tinta);font:800 .78rem/1 var(--brico);margin-right:.5rem;vertical-align:.1em}
.nota-pop a{color:var(--mostaza)}
.ast{all:unset;cursor:pointer;color:var(--mostaza);font-weight:800;padding:0 .15em;border-bottom:1px dotted var(--mostaza)}
.nota-pop .ast-txt{display:block;margin-top:.5rem;font-size:.88rem;color:var(--lila)}
.frase .n{font-size:.14em;vertical-align:2.4em;margin-left:.3em}
.frase.verso p:first-child{font:italic 400 clamp(2.6rem,6.4vw,5.8rem)/1.08 "Instrument Serif",Georgia,serif!important;text-transform:none;max-width:18ch}
.frase.estrellas p{font:italic 400 clamp(2.2rem,5.4vw,4.8rem)/1.12 "Instrument Serif",Georgia,serif;text-transform:none;max-width:22ch}
.frase.estrellas em{font-style:normal}
.estante3d{margin:clamp(3rem,7vw,6rem) 0;text-align:center}
.sub-mueble{font:400 clamp(2.6rem,6vw,5rem)/1 var(--anton);text-transform:uppercase;margin:0 0 2rem}
.escenario.mueble{font-size:min(calc(70vw / var(--w)),calc(560px / var(--w)));margin:0 auto 1.5rem;width:auto;height:auto;perspective:70em;display:flex;justify-content:center}
.mueble .mundo{width:auto;height:auto}
.mueble .cuarto{position:relative;left:0;top:0}
.mueble .borde{border-color:#4A3220}
.repisa{left:0;right:0;height:var(--d);transform-origin:top;transform:rotateX(-90deg);background:linear-gradient(#8B5E3C,#5B3E28)}
.estante3d .pend{margin-inline:auto!important;text-align:left}

.dib text{text-transform:none;letter-spacing:0}
.dib .rot{text-transform:uppercase;letter-spacing:.06em}

.nota-pop.nivel2{z-index:46;background:var(--morado)}
.nota-pop.nivel2::after{background:var(--morado)}
.nota-pop .n{font-size:.72rem;vertical-align:.25em;background:var(--mostaza);color:var(--tinta)}

@media (max-width:760px){.palabra{font-size:clamp(3.4rem,22vw,10rem)!important}}

/* rótulos de habitación: sobrios, grotesca, dorado del logo */
.rotulo{font:600 1.25em/1 var(--brico)!important;letter-spacing:.01em;color:#D4AF37!important;background:#1B1424!important;
  padding:.55em .8em .6em!important;border:.06em solid #D4AF37;border-radius:.2em;box-shadow:0 .5em 1.4em rgba(0,0,0,.35)!important;
  transform:translate(-50%,-100%) translateZ(3em)!important;text-transform:none}
.c-antes .rotulo{transform:translate(-50%,100%) translateZ(3em)!important}
.rotulo::before{content:attr(data-rn);font:500 .62em/1 var(--brico);letter-spacing:.14em;color:rgba(212,175,55,.7);margin-right:.7em;vertical-align:.18em}
.mini .rotulo{font-size:3em!important}

.frase .firma-verso{font:600 clamp(1rem,1.6vw,1.3rem)/1 var(--brico)!important;text-transform:none;color:#D4AF37;letter-spacing:.02em;margin-top:1.6rem!important;max-width:none}

.saltar{position:absolute;left:1rem;top:-4rem;z-index:80;background:var(--tinta);color:#D4AF37;font:700 .95rem/1 var(--brico);padding:.9rem 1.1rem;border-radius:.4rem;text-decoration:none}
.saltar:focus{top:1rem}

/* calidad: área táctil de 24 px y foco visible en las habitaciones */
.n{min-width:24px!important;min-height:24px;display:inline-grid!important;place-items:center;padding:0 .35em!important;box-sizing:border-box;font-size:max(.5em,12px)!important}
.parrafo.grande .n{font-size:max(.2em,12px)!important}
a.cuarto:focus-visible{outline:3px solid #D4AF37;outline-offset:.3em}
a.cuarto:focus-visible .borde{border-color:#D4AF37}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.indice .eti,.pasillo .eti{white-space:nowrap}
@media (max-width:760px){
  .indice a,.pasillo a{flex-wrap:wrap;white-space:normal;row-gap:0}
  .indice .eti{flex-basis:100%;padding:0 0 .7rem 3.4rem;opacity:1;transform:none}
  .pasillo .eti{flex-basis:100%;padding-top:.6rem}
}

/* calidad: menú legible sobre cualquier pared y «volver» con área táctil */
.barra nav a{background:var(--tinta);color:#F4EEE2!important;padding:.62rem .9rem;border-radius:999px;border:0!important}
.barra nav a:hover{background:#D4AF37;color:var(--tinta)!important}
.volver{padding:.7rem 0!important;min-height:24px}

.rn-top{display:inline-block;background:var(--tinta);color:#D4AF37!important;padding:.6rem .9rem;border-radius:999px}

/* cursos con filtros */
.filtros{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 1.6rem}
.filtro{all:unset;cursor:pointer;font:700 .95rem/1 var(--brico);padding:.85rem 1.2rem;border-radius:999px;border:2px solid var(--tinta);color:var(--tinta);transition:background .2s,color .2s}
.filtro[aria-pressed="true"]{background:var(--tinta);color:#D4AF37}
.filtro:hover{background:rgba(27,20,36,.08)}
.filtro[aria-pressed="true"]:hover{background:var(--tinta)}
.filtro:focus-visible{outline:3px solid #D4AF37;outline-offset:3px}
.panel-filtro[hidden]{display:none}
.curso{border:2px solid var(--tinta);border-radius:16px;padding:1.4rem 1.4rem 1.2rem;max-width:34rem;background:var(--papel)}
.curso h3{font:400 clamp(2.2rem,5vw,3.2rem)/1 var(--anton);text-transform:uppercase;margin:.4rem 0 .8rem}
.curso-et{font:800 .78rem/1.3 var(--brico)!important;text-transform:uppercase;letter-spacing:.08em;color:var(--morado);margin:0!important}
.curso p{font-size:1.1rem}
.nota-cursos{margin-top:1.6rem!important;font-size:1.15rem}
.nota-cursos a{font-weight:700;text-decoration:none;border-bottom:2px solid #D4AF37}

.vacio{font:500 1.2rem/1.4 var(--brico)!important;color:#5B5266;padding:1.2rem 0;margin:0!important}

/* trazos a mano: invisibles hasta que empiezan a dibujarse */
.js .hero .trazo{opacity:0}
/* Head → House */
.enorme .linea{display:block;white-space:nowrap}
.morph{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;color:#D4AF37;line-height:1}
.morph .m-a,.morph .m-b{display:block;white-space:nowrap}
.morph .m-b{position:absolute;left:0;top:0;opacity:0}
.morph.hecho .m-a{position:absolute;visibility:hidden}
.morph.hecho .m-b{position:static;opacity:1}

.poco{cursor:pointer;outline:none}
.poco:focus-visible{outline:3px solid #D4AF37;outline-offset:.06em;border-radius:.05em}

/* prints */
.obras{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.6rem}
.obra{margin:0;background:var(--papel);border:2px solid var(--tinta);border-radius:16px;overflow:hidden}
.obra-img{position:relative;aspect-ratio:var(--ar-a,3/2);background:#E4DACB;overflow:hidden}
.obra-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform .8s ease}
.obra-img .v-impreso{opacity:0}
.obra-img[data-vista="impreso"]{aspect-ratio:var(--ar-b,3/2)}
.obra-img[data-vista="impreso"] .v-impreso{opacity:1}
.obra-img[data-vista="impreso"] .v-foto{opacity:0}
.obra:hover .obra-img img{transform:scale(1.03)}
.obra figcaption{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:center;padding:1rem 1.1rem 1.2rem}
.obra-t{font:400 1.8rem/1 var(--anton);text-transform:uppercase}
.obra-l{font:600 .85rem/1.3 var(--brico);color:#5B5266;grid-column:1}
.vistas{grid-column:2;grid-row:1/3;display:flex;gap:.3rem}
.vista{all:unset;cursor:pointer;font:700 .8rem/1 var(--brico);padding:.6rem .75rem;border-radius:999px;border:1.5px solid var(--tinta);min-height:24px}
.vista[aria-pressed="true"]{background:var(--tinta);color:#D4AF37}
.vista:focus-visible{outline:3px solid #D4AF37;outline-offset:2px}
.pedir{grid-column:1/-1;justify-self:start;margin-top:.6rem;font:800 .85rem/1 var(--brico);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;background:#D4AF37;color:var(--tinta);padding:.85rem 1.1rem;border-radius:999px}
.pedir:hover{background:var(--tinta);color:#D4AF37}
@media (max-width:420px){.obra figcaption{grid-template-columns:1fr}.vistas{grid-column:1;grid-row:auto;margin-top:.5rem}}

/* prints: obras verticales y formatos de compra */
/* verticales: la tarjeta se estrecha para que la foto entera quepa en pantalla */
.obra.vertical{justify-self:center;width:100%;max-width:max(17rem,calc((100svh - 12rem) * .66))}
.formatos-et{font:700 .8rem/1 var(--brico);text-transform:uppercase;letter-spacing:.08em;color:#5B5266;margin:0 0 .6rem}
.formatos{list-style:none;padding:0;margin:0 0 2.2rem;border-top:2px solid var(--tinta)}
.formatos li{padding:.8rem 0;border-bottom:1px solid rgba(27,20,36,.2)}
.formatos .f-t{font:700 1.15rem/1.3 var(--brico)}
/* el pie de la tarjeta se ordena según el ancho de la propia tarjeta, no de la pantalla */
.obra{container-type:inline-size}
@container (max-width:27rem){.obra figcaption{grid-template-columns:1fr}.vistas{grid-column:1;grid-row:auto;margin-top:.5rem}}

/* biblioteca: el estante abre la lista completa */
[data-abre].escenario{cursor:pointer;border-radius:12px;transition:transform .35s ease}
[data-abre].escenario:hover{transform:translateY(-4px)}
[data-abre].escenario:focus-visible{outline:3px solid #D4AF37;outline-offset:6px}
.abrir-biblio{all:unset;cursor:pointer;display:inline-block;font:800 .85rem/1 var(--brico);text-transform:uppercase;letter-spacing:.04em;background:#D4AF37;color:var(--tinta);padding:.85rem 1.2rem;border-radius:999px;min-height:24px}
.abrir-biblio:hover{background:var(--tinta);color:#D4AF37}
.abrir-biblio:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.biblio{border:0;padding:0;margin:auto;width:min(46rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);border-radius:18px;background:var(--papel);color:var(--tinta);box-shadow:0 30px 80px rgba(27,20,36,.45)}
.biblio::backdrop{background:rgba(27,20,36,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.biblio[open]{animation:biblio-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes biblio-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.biblio-in{padding:clamp(1.2rem,4vw,2.2rem);overflow:auto;max-height:calc(100dvh - 2rem);box-sizing:border-box}
.biblio-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.biblio-cab h2{font:400 clamp(2.2rem,7vw,3.6rem)/1 var(--anton);text-transform:uppercase;margin:0}
.biblio-x{all:unset;cursor:pointer;font:400 2rem/1 var(--brico);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--tinta);flex:none}
.biblio-x:hover{background:var(--tinta);color:#D4AF37}
.biblio-x:focus-visible{outline:3px solid #D4AF37;outline-offset:2px}
.biblio-intro{font:500 1.05rem/1.4 var(--brico);margin:.6rem 0 1.2rem;color:#5B5266}
.biblio-filtros{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;width:100%}
.filtro.chip{font-size:.82rem;padding:.6rem .85rem;border-width:1.5px}
.biblio-filtros label{display:flex;align-items:center;gap:.5rem;font:700 .8rem/1 var(--brico);text-transform:uppercase;letter-spacing:.06em}
.biblio-filtros select{font:600 .95rem/1.2 var(--brico);color:var(--tinta);background-color:var(--papel);border:1.5px solid var(--tinta);border-radius:999px;padding:.55rem 2rem .55rem .9rem;max-width:min(15rem,calc(100vw - 11rem));min-width:0;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),linear-gradient(135deg,var(--tinta) 50%,transparent 50%);background-position:calc(100% - 1.05rem) 52%,calc(100% - .75rem) 52%;background-size:.3rem .3rem;background-repeat:no-repeat}
.biblio-filtros select:focus-visible{outline:3px solid #D4AF37;outline-offset:2px}
.biblio-n{font:800 .8rem/1 var(--brico);text-transform:uppercase;letter-spacing:.06em;color:var(--morado);margin:0 0 .4rem}
.libros{list-style:none;padding:0;margin:0;border-top:2px solid var(--tinta)}
.libro{display:grid;grid-template-columns:.9rem 1fr auto;gap:.15rem .9rem;align-items:center;padding:.85rem 0;border-bottom:1px solid rgba(27,20,36,.18)}
.libro[hidden]{display:none}
.lb-lomo{grid-row:1/3;align-self:stretch;background:var(--lomo);border:1.5px solid var(--tinta);border-radius:2px;min-height:2.6rem;box-shadow:inset 0 .35rem 0 rgba(27,20,36,.18)}
.lb-t{font:700 1.1rem/1.25 var(--brico)}
.lb-d{font:500 .85rem/1.3 var(--brico);color:#5B5266;grid-column:2}
.lb-c{grid-column:3;grid-row:1/3;font:800 .75rem/1 var(--brico);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--tinta);border:1.5px solid var(--tinta);border-radius:999px;padding:.6rem .8rem;white-space:nowrap}
.lb-c:hover{background:var(--tinta);color:#D4AF37}
.lb-c:focus-visible{outline:3px solid #D4AF37;outline-offset:2px}
.libro .ast-txt{display:block;font:500 .85rem/1.3 var(--brico);color:var(--morado);margin-top:.2rem}
.libro .ast-txt[hidden]{display:none}
html.biblio-abierta{overflow:hidden}
@media (max-width:480px){.libro{grid-template-columns:.8rem 1fr}.lb-c{grid-column:2;grid-row:auto;justify-self:start;margin-top:.4rem}}
.biblio-cab h2:focus{outline:none}

/* Substack: tarjetas que llevan al artículo (1 destacado + 2 recientes) */
.sb-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin:1.5rem 0 .5rem}
.sb-tarjeta{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta);background:var(--papel);border:2px solid var(--tinta);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--tinta);transition:transform .2s ease,box-shadow .2s ease}
.sb-tarjeta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinta)}
.sb-tarjeta:focus-visible{outline:3px solid #D4AF37;outline-offset:3px}
.sb-img{display:block;aspect-ratio:16/9;background:var(--morado);border-bottom:2px solid var(--tinta)}
.sb-img:empty{display:none}
.sb-img img{width:100%;height:100%;object-fit:cover;display:block}
.sb-txt{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem 1.1rem;flex:1}
.sb-et{font:800 .72rem/1 var(--brico);text-transform:uppercase;letter-spacing:.06em;color:var(--morado)}
.sb-dest .sb-et{color:#8A6A10}
.sb-t{font:700 1.15rem/1.25 var(--brico)}
.sb-ex{font:500 .92rem/1.4 var(--brico);color:#5B5266;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sb-ir{margin-top:auto;padding-top:.4rem;font:800 .78rem/1 var(--brico);text-transform:uppercase;letter-spacing:.04em}
@media (min-width:900px){.sb-tarjetas.con-dest{grid-template-columns:1.35fr 1fr 1fr}.sb-dest .sb-t{font-size:1.35rem}}

/* cortes de línea pedidos: en pantallas anchas cada .ln es una línea; en móvil el texto fluye */
@media (min-width:700px){.lineas .ln{display:block}.curso p.lineas{max-width:none}}
.bloque p.sb-inv{max-width:none}
.pend.aviso::before{content:none}
.pend.aviso a{color:inherit;font-weight:800}
/* el inciso de una frase grande no cuenta para centrarla: queda pegado a la palabra, fuera del flujo */
.frase p .n{position:absolute;margin:-.2em 0 0 .3em;vertical-align:baseline}
@media (max-width:420px){.estante li{grid-template-columns:1fr;gap:.15rem}}