/* Lizzy's Poems — estilos */
/* Layout: noche de castillos dibujada en canvas detrás; cuatro estancias (portada, escritorio de cartas, la dama, tras el tapiz) que se cambian con un telón de terciopelo. Tema único, oscuro a propósito. */
:root{
  color-scheme:dark;
  --night:#0a0609; --stone:#160d12; --velvet:#2a0a13; --blood:#5e0b1c; --crimson:#8e1530; --crimson-hi:#c13350;
  --gold:#c6a15b; --gold-hi:#ecd29a; --text:#eadbc8; --muted:#a99382;
  --parch:#e6d4b1; --parch-2:#d4bd92; --ink:#2a160e; --ink-red:#7e1024;
  --line:rgba(198,161,91,.35); --panel:rgba(14,8,11,.72);
  --tex-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .19 0 0 0 0 .07 0 0 0 .6 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .2 0 0 0 0 .05 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .75 0 0 0 0 .7 0 0 0 .18 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --f-black:'UnifrakturMaguntia','Old English Text MT','Goudy Text',serif;
  --f-script:'Pinyon Script','Snell Roundhand',cursive;
  --f-caps:'Cinzel',Georgia,serif;
  --f-body:'IM Fell English',Garamond,Georgia,serif;
  --f-title:'Cormorant Garamond',Garamond,Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--night);color:var(--text);font-family:var(--f-body);font-size:19px;line-height:1.6;overflow-x:clip;min-height:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
::selection{background:rgba(193,51,80,.5)}
button{font:inherit;color:inherit}
a{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
svg{display:block}

#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.paw{position:fixed;left:0;top:0;width:34px;height:48px;z-index:95;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,200,215,.25))}
.paw.show{opacity:1}
.paw svg{width:100%;height:100%;overflow:visible;transform-origin:30% 10%;transform:rotate(-24deg) scale(var(--ps,1));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.paw .pt{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.paw .bean{transition:transform .3s;transform-box:fill-box;transform-origin:center}
.paw.open svg{--ps:1.18}
.paw.open .t1{transform:translate(-4px,1px) rotate(-26deg)}
.paw.open .t2{transform:translate(-2px,-3px) rotate(-10deg)}
.paw.open .t3{transform:translate(2px,-3px) rotate(10deg)}
.paw.open .t4{transform:translate(4px,1px) rotate(26deg)}
.paw.open .bean{transform:scale(1.25)}
.paw.press svg{--ps:.86}
html.paw-on,html.paw-on *{cursor:none!important}
.player{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;
  padding:6px;border-radius:999px;background:var(--tex-stone) 0 0/260px,rgba(14,8,11,.82);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.6);backdrop-filter:blur(6px);
  max-width:calc(100% - 28px)}
.pl-btn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);cursor:pointer;display:grid;place-items:center;color:var(--gold-hi);
  background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);background-blend-mode:soft-light,normal;box-shadow:0 0 16px rgba(193,51,80,.45)}
.pl-btn>*{grid-area:1/1}
.pl-btn svg{width:22px;height:22px}
.pl-btn .eq,.pl-btn .ic-mute{display:none}
.player.playing .pl-btn .ic-note{display:none}.player.playing .pl-btn .eq{display:flex}
.player.muted .pl-btn .ic-note,.player.muted .pl-btn .eq{display:none}.player.muted .pl-btn .ic-mute{display:block}
.eq{gap:3px;align-items:flex-end;height:18px}
.eq i{width:3px;background:var(--gold-hi);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:18px}}
.pl-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding-right:10px;overflow:hidden;max-width:0;opacity:0;transition:max-width .5s ease,opacity .4s}
.player:hover .pl-body,.player:focus-within .pl-body,.player.open .pl-body{max-width:240px;opacity:1}
.pl-track{font-family:var(--f-title);font-style:italic;font-weight:600;font-size:14px;color:var(--gold-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.pl-row{display:flex;align-items:center;gap:8px;color:var(--muted)}
.pl-row>svg{width:15px;height:15px;flex:none}
#plVol{width:130px;accent-color:var(--crimson-hi);height:4px;cursor:pointer}
.pl-next{background:none;border:0;color:var(--gold);cursor:pointer;padding:2px;display:grid}
.pl-next svg{width:16px;height:16px}.pl-next:hover{color:var(--gold-hi)}
.pl-hint{position:absolute;left:58px;bottom:100%;margin-bottom:8px;white-space:nowrap;font-family:var(--f-caps);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);
  background:rgba(14,8,11,.85);border:1px solid var(--line);padding:6px 10px;animation:hintPulse 2s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.55;transform:translateY(-3px)}}
.player.started .pl-hint{display:none}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none}
body::after{content:"";position:fixed;inset:-50%;z-index:46;pointer-events:none;background:var(--tex-grain);opacity:.09;mix-blend-mode:overlay;animation:grain 1.2s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}
.wax,.note-seal,.seal-mid span,.big-seal,.s-seal{background-blend-mode:soft-light,normal}
#front,#reverso{position:relative;z-index:2}

.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- cabecera ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:linear-gradient(var(--night),rgba(10,6,9,0))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.mono{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.pfp{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--gold),0 0 0 4px rgba(10,6,9,.8),0 0 18px rgba(193,51,80,.45)}
.pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s;filter:grayscale(1) contrast(1.05)}
.pfp img.on{opacity:1}
.mono b{font-family:var(--f-black);font-weight:400;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold);color:var(--gold-hi);font-size:24px;background:rgba(42,10,19,.6)}
.mono>span:not(.pfp){white-space:nowrap;font-family:var(--f-script);font-size:32px;line-height:1;color:var(--gold-hi)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--f-caps);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:10px 12px;position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .4s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-hi)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.wax{border:0;cursor:pointer;width:40px;height:40px;margin-left:6px;border-radius:50%;display:grid;place-items:center;color:var(--gold-hi);font-family:var(--f-caps);font-weight:600;font-size:20px;
  background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 0 0 3px #4a0714;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.wax:hover{transform:rotate(-20deg) scale(1.12)}
.wax img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--gold-hi);filter:grayscale(1) contrast(1.1)}
@media (max-width:560px){.nav a{padding:10px 7px;font-size:11px;letter-spacing:.1em}.mono>span:not(.pfp){display:none}}

/* ---------- estancias ---------- */
.view{min-height:calc(100vh / var(--z,1) - 72px);padding-block:20px 60px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--f-caps);letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--gold);margin:0}
.black{font-family:var(--f-black);font-weight:400;color:var(--gold-hi);text-shadow:0 2px 0 #000,0 0 30px rgba(193,51,80,.35)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;font-family:var(--f-caps);letter-spacing:.18em;text-transform:uppercase;font-size:13px;padding:15px 24px;border-radius:2px;
  color:var(--gold-hi);background:linear-gradient(var(--crimson),var(--blood));border:1px solid var(--gold);box-shadow:0 0 0 4px rgba(0,0,0,.5),0 14px 30px -12px var(--crimson);transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 0 0 4px rgba(0,0,0,.5),0 18px 40px -10px var(--crimson-hi)}
.hero-btn{font-size:15px;padding:19px 34px 19px 22px;gap:14px;position:relative;overflow:hidden;animation:pulse 2.8s ease-in-out infinite;
  background:linear-gradient(var(--crimson-hi),var(--crimson) 45%,var(--blood));box-shadow:0 0 0 4px rgba(0,0,0,.55),0 0 0 5px rgba(198,161,91,.5),0 0 34px rgba(193,51,80,.55)}
.hero-btn svg{width:24px;height:24px;flex:none;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.hero-btn:hover svg{transform:rotate(-18deg) scale(1.2)}
.hero-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,240,210,.35),transparent);animation:sweep 3.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(0,0,0,.55),0 0 0 5px rgba(236,210,154,.8),0 0 60px rgba(193,51,80,.9)}}
@keyframes sweep{0%,55%{left:-60%}100%{left:130%}}
.btn.ghost{background:rgba(10,6,9,.55);color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold)}

/* portada */
.arch{position:relative;margin:0 auto;width:min(660px,100%);text-align:center;padding:clamp(48px,min(10vw,9vh),96px) clamp(18px,6vw,58px) clamp(26px,4vh,46px);
  border:1px solid var(--gold);border-radius:50% 50% 6px 6px/30% 30% 6px 6px;background:var(--tex-stone) 0 0/360px,radial-gradient(ellipse at 50% 0%,rgba(94,11,28,.55),var(--panel) 60%);backdrop-filter:blur(3px);
  box-shadow:0 40px 90px -30px #000, inset 0 0 80px rgba(0,0,0,.6)}
.arch::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);border-radius:inherit;pointer-events:none}
.arch .crest{width:clamp(40px,5.5vh,58px);height:clamp(40px,5.5vh,58px);margin:-26px auto clamp(6px,1.4vh,14px);overflow:visible;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(193,51,80,.45));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(-6deg)}}
.name{font-family:var(--f-script);font-weight:400;font-size:clamp(84px,min(20vw,19vh),200px);line-height:1;margin:0;padding:.05em .2em .12em;display:inline-block;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hi) 30%,#fff3d6 45%,var(--crimson-hi) 55%,var(--gold) 75%,var(--gold-hi) 100%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.motto{font-size:clamp(28px,min(5.4vw,5vh),50px);margin:.3em 0 clamp(8px,1.6vh,16px);line-height:1.1}
.lede{font-style:italic;font-size:clamp(17px,min(2.3vw,2.4vh),22px);color:var(--text);opacity:.85;max-width:34ch;margin:0 auto clamp(16px,3vh,30px);text-wrap:balance}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.whisper-hint{margin:clamp(14px,2.6vh,28px) 0 0;font-size:15px;font-style:italic;color:var(--muted)}

/* cartas */
.head{text-align:center;max-width:620px;margin:0 auto 40px}
.head h2{font-size:clamp(44px,7vw,76px);line-height:1.05;margin:6px 0 10px;text-wrap:balance}
.head p{margin:0;font-style:italic;color:var(--muted)}
.desk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,38px);max-width:1040px;width:100%;margin:0 auto;padding:10px 0}
.sort{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:-14px auto 34px;border:1px solid var(--line);width:fit-content;max-width:100%;background:var(--tex-stone) 0 0/300px,rgba(10,6,9,.6)}
.sort button{background:none;border:0;cursor:pointer;padding:11px 18px;font-family:var(--f-caps);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:background .3s,color .3s}
.sort button[aria-pressed="true"]{background:linear-gradient(var(--crimson),var(--blood));color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--gold)}
.sort button:not([aria-pressed="true"]):hover{color:var(--gold-hi)}
.desk{transition:opacity .35s,transform .35s}
.desk.shuffle{opacity:0;transform:translateY(14px)}
.desk.out-up{opacity:0;transform:translateY(-60px);transition:opacity .4s,transform .4s cubic-bezier(.6,0,.8,.4)}
.desk.out-down{opacity:0;transform:translateY(60px);transition:opacity .4s,transform .4s cubic-bezier(.6,0,.8,.4)}
.desk-hint{margin:-14px 0 22px!important}
.pg-prev{display:block;margin:0 auto 18px;background:rgba(10,6,9,.55);border:1px solid var(--line);color:var(--gold-hi);font-family:var(--f-caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px;cursor:pointer}
.pg-prev:hover{border-color:var(--gold)}
.pager{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px}
.desk-zone{position:relative;overscroll-behavior:contain;padding:6px 0 20px}
#v-cartas{justify-content:flex-start;padding-top:6px}
#v-cartas .head{margin-bottom:16px}
#v-cartas .head h2{font-size:clamp(38px,5.2vw,64px);margin:2px 0 6px}
#v-cartas .sort{margin:0 auto 12px}
#v-cartas .desk-hint{margin:0 0 6px!important}
#v-cartas .desk{gap:clamp(14px,2.4vw,30px)}
@media (min-width:901px) and (max-height:960px){
  #v-cartas .eyebrow,#v-cartas .desk-hint{display:none}
  #v-cartas .head{margin-bottom:10px}
  #v-cartas .head h2{font-size:clamp(34px,4.4vw,50px);margin:0 0 4px}
  #v-cartas .head p{font-size:17px}
  #v-cartas .sort{margin-bottom:8px}
  #v-cartas .pager{margin-top:14px}
}
@media (min-width:901px){.desk .note{max-width:clamp(150px,calc((100vh / var(--z,1) - 300px) * .36),240px)}}
.wheel{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--gold-hi)}
.wheel .mouse{position:relative;width:30px;height:48px;border:2px solid var(--gold);border-radius:16px;box-shadow:0 0 18px rgba(193,51,80,.45),inset 0 0 8px rgba(0,0,0,.6);background:rgba(10,6,9,.5)}
.wheel .mouse i{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:3px;background:var(--crimson-hi);box-shadow:0 0 6px var(--crimson-hi);animation:wheelRoll 1.6s ease-in-out infinite}
@keyframes wheelRoll{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}
.wheel .lbl{font-family:var(--f-caps);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.wheel .chev{font-size:22px;line-height:.5;color:var(--gold);animation:chev 1.6s ease-in-out infinite}
@keyframes chev{50%{transform:translateY(6px);opacity:.5}}
.wheel:hover .mouse{border-color:var(--gold-hi)}
.pg-end{margin:0;font-style:italic;color:var(--muted)}
.pg-dots{display:flex;gap:10px}
.pg-dots .dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--gold);background:transparent;cursor:pointer;padding:0;transition:all .3s}
.pg-dots .dot[aria-current="true"]{background:radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson));box-shadow:0 0 10px var(--crimson-hi);transform:scale(1.25)}
.pack-arrow{position:absolute;top:50%;z-index:5;width:54px;height:54px;margin-top:-27px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--gold-hi);
  border:1px solid var(--gold);background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);background-blend-mode:soft-light,normal;
  box-shadow:0 0 0 4px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.6),0 0 22px rgba(193,51,80,.45);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.pack-arrow svg{width:24px;height:24px}
.pack-arrow.prev{left:0}
.pack-arrow.next{right:0}
@media (min-width:901px){.desk-zone{--ap:clamp(104px,10.5vw,150px);padding-inline:var(--ap)}}
.pack-arrow:hover{transform:scale(1.12);box-shadow:0 0 0 4px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.6),0 0 34px rgba(236,120,140,.7)}
.pack-arrow.prev:hover svg{animation:nudgeL .8s ease-in-out infinite}.pack-arrow.next:hover svg{animation:nudgeR .8s ease-in-out infinite}
@keyframes nudgeL{50%{transform:translateX(-4px)}}@keyframes nudgeR{50%{transform:translateX(4px)}}
@media (max-width:900px){.pack-arrow{width:44px;height:44px;margin-top:-22px}.pack-arrow.prev{left:-10px}.pack-arrow.next{right:-10px}}
.pg-tip{letter-spacing:.14em!important;opacity:.75}
.pg-tip .touch{display:none}
@media (hover:none){.pg-tip .fine{display:none}.pg-tip .touch{display:inline}}
.author-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin:0 auto 12px}
.add-poem{padding:11px 20px;font-size:12px}
.add-poem span{font-size:16px;line-height:1}
.author-who{font-size:14px;font-style:italic;color:var(--muted)}
.author-who b{font-weight:400;color:var(--gold-hi)}
.linkish{background:none;border:0;padding:0;cursor:pointer;color:var(--gold);text-decoration:underline;font:inherit}
.key-btn{background:none;border:0;cursor:pointer;color:var(--muted);opacity:.45;padding:4px;vertical-align:middle;transition:opacity .3s,color .3s}
.key-btn:hover{opacity:1;color:var(--gold-hi)}
.key-btn svg{width:15px;height:15px;display:inline-block}
.note-new{position:absolute;top:-18px;left:-16px;z-index:5;font-family:var(--f-caps);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
  padding:5px 12px 4px;background:linear-gradient(var(--crimson-hi),var(--crimson));border:1px solid var(--gold);transform:rotate(-12deg);
  box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 16px rgba(193,51,80,.6);animation:newGlow 2.4s ease-in-out infinite}
.note-new::before{content:"✦ "}
@keyframes newGlow{50%{box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 26px rgba(236,120,140,.9)}}
.note.flash{animation:flashIn 1.6s ease-out}
@keyframes flashIn{0%{filter:drop-shadow(0 0 0 rgba(236,210,154,0))}30%{filter:drop-shadow(0 0 30px rgba(236,210,154,.95))}100%{filter:drop-shadow(0 18px 18px rgba(0,0,0,.65))}}
.compose{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.compose .veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(42,10,19,.8),rgba(5,2,4,.95))}
.c-sheet{position:relative;width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(24px,4vw,40px);color:var(--ink);display:flex;flex-direction:column;gap:6px;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(255,247,226,.45),transparent 85%),var(--tex-mottle) 0 0/320px,var(--tex-fiber) 0 0/380px,var(--tex-fine) 0 0/200px,linear-gradient(180deg,#ecdcb8,#dcc495 50%,#cfb07c);
  box-shadow:inset 0 0 30px 6px rgba(75,35,8,.5),0 30px 70px rgba(0,0,0,.7);border-radius:3px;animation:cIn .5s cubic-bezier(.2,.9,.2,1)}
@keyframes cIn{from{opacity:0;transform:translateY(30px) scale(.95)}}
.c-eye{text-align:center;color:var(--ink-red)}
.c-sheet h3{margin:0 0 10px;text-align:center;font-family:var(--f-title);font-style:italic;font-weight:700;font-size:clamp(30px,4vw,40px);color:#1e0d06}
.c-sheet label{font-family:var(--f-caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-red);margin-top:8px}
.c-sheet input,.c-sheet textarea{font:inherit;font-family:var(--f-body);font-size:19px;color:#1e0d06;background:rgba(255,250,236,.55);border:1px solid rgba(90,50,15,.45);border-radius:2px;padding:10px 12px;width:100%;box-shadow:inset 0 1px 3px rgba(60,30,8,.25)}
.c-sheet input[type=date]{font-family:var(--f-title);font-weight:600;max-width:240px;color-scheme:light}
.c-sheet textarea{resize:vertical;min-height:220px;line-height:1.6;white-space:pre-wrap}
.c-sheet input:focus,.c-sheet textarea:focus{outline:2px solid var(--crimson);outline-offset:1px;background:rgba(255,252,242,.8)}
.c-msg{min-height:1.4em;margin:6px 0 0;font-style:italic;font-size:16px;color:var(--ink-red)}
.c-msg.ok{color:#2f5a1e}
.c-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:6px}
.c-actions .btn.ghost{color:#1e0d06;background:rgba(255,250,236,.4);border-color:rgba(90,50,15,.5)}
.c-actions .btn[disabled]{opacity:.6;cursor:wait}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 20px;
  background:rgba(14,8,11,.92);border:1px solid var(--gold);color:var(--text);font-style:italic;box-shadow:0 12px 30px rgba(0,0,0,.6);animation:cIn .4s ease}
.pg-count{margin:0;font-family:var(--f-caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.desk .note{animation:dealIn .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(min(var(--n,0),8)*90ms)}
@keyframes dealIn{from{opacity:0;transform:translateY(-30px) rotate(calc(var(--r,0deg)*3))}}
@media (max-width:900px){.desk{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}}
.note{position:relative;border:0;padding:0;background:none;cursor:pointer;aspect-ratio:3/4;width:100%;max-width:240px;margin:0 auto;
  transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;filter:drop-shadow(0 18px 18px rgba(0,0,0,.65))}
.note:hover,.note:focus-visible{transform:rotate(0deg) translateY(-12px) scale(1.04);filter:drop-shadow(0 26px 26px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(236,210,154,.18))}
.note-bg{position:absolute;inset:0;filter:url(#rough);
  background:
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(70,30,8,.55) 100%),
    var(--tex-mottle) 0 0/260px,
    var(--tex-fiber) 0 0/300px,
    var(--tex-fine) 0 0/180px,
    radial-gradient(circle at 78% 22%,rgba(110,55,15,.28) 0 6%,rgba(110,55,15,.12) 6.5%,transparent 9%),
    radial-gradient(circle at 18% 72%,rgba(110,55,15,.2) 0 4%,transparent 7%),
    linear-gradient(180deg,transparent 49%,rgba(70,38,12,.35) 49.8%,rgba(255,246,220,.45) 50.6%,transparent 52%),
    linear-gradient(90deg,transparent 49.4%,rgba(70,38,12,.18) 50%,rgba(255,246,220,.25) 50.6%,transparent 51.2%),
    linear-gradient(165deg,#ead9b4,#d8bf8e 60%,#c9a873);
  box-shadow:inset 0 0 22px 4px rgba(75,35,8,.55),inset 0 0 3px 2px rgba(50,22,5,.6)}
.note-title.long{font-size:clamp(19px,1.9vw,24px)}
.note-paper{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:9% 11% 36%;color:var(--ink);text-align:center}
.note-num{display:flex;align-items:center;gap:7px;margin-bottom:auto;font-family:var(--f-title);font-weight:700;font-style:italic;font-size:clamp(13.5px,1.25vw,16.5px);line-height:1.2;color:var(--ink-red);text-shadow:0 1px 0 rgba(255,245,220,.6);white-space:nowrap}
.note-num::before,.note-num::after{content:"";width:9px;height:1.5px;background:currentColor;opacity:.6;flex:none}
.note-title{font-family:var(--f-title);font-weight:700;font-style:italic;font-size:clamp(23px,2.4vw,29px);line-height:1.08;letter-spacing:.005em;text-wrap:balance;color:#1e0d06;text-shadow:0 1px 0 rgba(255,244,215,.6),0 0 12px rgba(255,240,205,.35)}
.note-title::first-letter{font-family:var(--f-caps);font-style:normal;font-weight:600;font-size:1.25em;color:var(--ink-red);text-shadow:0 1px 0 rgba(255,244,215,.5)}
.note-orn{width:46px;color:var(--ink-red);opacity:.85}
.note-paper::after{content:"";margin-bottom:auto}
.note-tag{position:absolute;left:50%;bottom:-15px;z-index:4;white-space:nowrap;font-family:var(--f-caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
  padding:6px 12px 5px;background:linear-gradient(var(--crimson),var(--blood));border:1px solid var(--gold);box-shadow:0 6px 14px rgba(0,0,0,.6);
  opacity:0;transform:translate(-50%,-6px);transition:opacity .35s,transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.note-tag::before,.note-tag::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--gold);transform:rotate(45deg)}
.note-tag::before{left:-4px}.note-tag::after{right:-4px}
.note:hover .note-tag,.note:focus-visible .note-tag{opacity:1;transform:translate(-50%,0)}
.note-read{position:absolute;right:3%;bottom:4%;z-index:4;font-family:var(--f-caps);font-weight:600;font-size:clamp(9.5px,.9vw,11.5px);letter-spacing:.18em;text-transform:uppercase;
  color:#8e1530;padding:3px 7px 2px 9px;border:2px solid currentColor;outline:1px solid rgba(142,21,48,.5);outline-offset:2px;border-radius:2px;transform:rotate(-14deg);opacity:.88;
  background:rgba(142,21,48,.07);text-shadow:0 0 1px rgba(142,21,48,.5)}
.note-read.fresh{animation:stamp .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes stamp{from{transform:rotate(-14deg) scale(2.4);opacity:0}}
.note-ribbon{position:absolute;left:50%;top:62%;bottom:6%;width:12px;margin-left:-6px;background:linear-gradient(90deg,#3d0611,var(--crimson) 50%,#3d0611);opacity:.9}
.note-seal{position:absolute;left:50%;bottom:9%;width:58px;height:58px;margin-left:-29px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-caps);font-weight:600;font-size:26px;color:var(--gold-hi);
  background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 0 0 4px #4a0714,inset 0 0 0 5px rgba(193,51,80,.6);transition:transform .6s cubic-bezier(.3,1.7,.5,1)}
.note-seal::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:47% 53% 50% 50%/52% 46% 54% 48%;background:var(--crimson);filter:url(#roughS);box-shadow:inset 0 -3px 6px rgba(0,0,0,.4)}
.note:hover .note-seal{transform:rotate(-16deg) scale(1.1)}
.desk-hint{text-align:center;margin:34px 0 0;font-family:var(--f-caps);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* sobre mí */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(34px,6vw,80px);align-items:center;max-width:1060px;width:100%;margin:0 auto}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.rosewin{position:relative;width:min(400px,100%);aspect-ratio:1;margin:0 auto;border-radius:50%;padding:12px;background-blend-mode:overlay,normal;background:var(--tex-grain) 0 0/120px,conic-gradient(from 0deg,var(--gold),#5b4520,var(--gold-hi),#5b4520,var(--gold));box-shadow:0 0 80px rgba(193,51,80,.25),0 40px 80px -30px #000}
.glass{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(circle,transparent 27%,#120709 27.5% 29%,transparent 29.5% 56%,#120709 56.5% 58%,transparent 58.5%),
    repeating-conic-gradient(from 11.25deg,#120709 0 1.2deg,transparent 1.2deg 22.5deg),
    repeating-conic-gradient(from 0deg,#7e1024 0 22.5deg,#3d1a52 22.5deg 45deg,#8e1530 45deg 67.5deg,#1f3a4a 67.5deg 90deg),
    #2a0a13}
.glass::before{content:"";position:absolute;inset:0;background:var(--tex-grain) 0 0/110px;mix-blend-mode:overlay;opacity:.55;z-index:1}
.glass::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--lx,40%) var(--ly,30%),rgba(255,220,160,.45),transparent 50%);mix-blend-mode:screen;transition:background .15s}
.pfp.big{z-index:2;width:58%;height:auto;aspect-ratio:1;box-shadow:0 0 0 5px var(--gold),0 0 0 9px #120709,inset 0 0 30px #000,0 0 40px rgba(0,0,0,.8)}
.glass b{position:relative;z-index:2;font-family:var(--f-black);font-weight:400;font-size:clamp(90px,15vw,140px);line-height:1;color:var(--gold-hi);width:46%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,#3b0510,#120709);box-shadow:0 0 0 4px var(--gold),inset 0 0 30px #000;text-shadow:0 0 20px rgba(236,210,154,.5)}
.about-text::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(14,8,11,.92) 30%,rgba(14,8,11,.55)),url(../img/fondo-sobre-mi.jpg) right center/cover no-repeat;filter:grayscale(1) sepia(.35) hue-rotate(-30deg);opacity:.75}
.tomb{position:relative;width:min(360px,100%);margin:0 auto;perspective:1000px}
.tomb-in{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-origin:50% 100%;transition:transform .35s ease-out;animation:tombIdle 7s ease-in-out infinite}
.tomb:hover .tomb-in{animation:none}
@keyframes tombIdle{0%,100%{transform:rotateY(-4deg) rotateX(1deg)}50%{transform:rotateY(4deg) rotateX(-1deg)}}
.stone{position:relative;aspect-ratio:3/4.1;border-radius:50% 50% 6px 6px/34% 34% 6px 6px;padding:16% 12% 10%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4%;
  background:var(--tex-stone) 0 0/260px,var(--tex-grain) 0 0/160px,radial-gradient(ellipse at 35% 25%,#5b5157,#332a2f 55%,#1a1417);background-blend-mode:normal,overlay,normal;
  box-shadow:inset 0 0 0 10px rgba(0,0,0,.18),inset 0 0 0 11px rgba(255,240,240,.05),inset -18px -24px 40px rgba(0,0,0,.6),inset 10px 12px 30px rgba(255,235,240,.06),0 40px 60px -20px #000,0 0 70px rgba(142,21,48,.25)}
.stone .cracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plinth{height:26px;margin:-2px -8% 0;border-radius:3px;background:var(--tex-stone) 0 0/260px,linear-gradient(#2c2428,#141012);box-shadow:0 16px 30px -10px #000}
.carve{margin:0;font-family:var(--f-caps);color:#140d0c;text-shadow:0 1px 0 rgba(255,235,230,.18),0 -1px 0 rgba(0,0,0,.6);letter-spacing:.16em;text-transform:uppercase;position:relative;z-index:2}
.carve.epit{font-size:clamp(10px,1.2vw,12px);margin-top:13%}
.carve.name-c{font-family:var(--f-black);font-size:clamp(34px,4.5vw,46px);letter-spacing:.04em;text-transform:none;line-height:1;margin-top:4%}
.carve.sm{font-size:clamp(11px,1.25vw,13px);letter-spacing:.14em;line-height:1.6;color:#c9a96a;text-shadow:0 1px 0 #000,0 0 10px rgba(198,161,91,.35);margin-top:2%}
.portrait{position:relative;width:70%;aspect-ratio:1;display:grid;place-items:center;z-index:2}
.portrait img{width:76%;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 4px #1a1417,0 0 0 6px var(--gold),inset 0 0 20px #000,0 10px 24px rgba(0,0,0,.7)}
.thorns{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite;overflow:visible}
@keyframes spin{to{transform:rotate(360deg)}}
.blood{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;opacity:.92;mix-blend-mode:multiply;filter:url(#bloodRough) drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.blood .fd{animation:dropfall 4.2s cubic-bezier(.55,0,1,.6) infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes dropfall{0%,35%{transform:translateY(0) scale(.2);opacity:0}50%{transform:translateY(0) scale(1);opacity:1}62%{transform:translateY(4px) scale(.95,1.15)}100%{transform:translateY(240px) scale(.9,1.3);opacity:0}}
.blood-crown{position:absolute;left:12%;right:12%;top:0;height:26%;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(110,8,24,.85) 0 18%,transparent 30%),radial-gradient(ellipse at 25% 40%,rgba(110,8,24,.6) 0 8%,transparent 14%),radial-gradient(ellipse at 78% 45%,rgba(110,8,24,.6) 0 7%,transparent 13%)}
.drip{position:absolute;left:var(--x);top:var(--y);width:7px;height:var(--h);z-index:1;border-radius:0 0 5px 5px;background:linear-gradient(#5a0612,#9a1229 70%,#b41a35);box-shadow:inset 1px 0 1px rgba(255,180,190,.25)}
.drip::before{content:"";position:absolute;left:-2px;right:-2px;bottom:-5px;height:10px;border-radius:50%;background:#a3142e}
.drip::after{content:"";position:absolute;left:-1px;bottom:-6px;width:9px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 35%,#e0566f,#8e1530 60%);opacity:0;animation:fall 3.6s cubic-bezier(.5,0,1,1) infinite;animation-delay:var(--d)}
@keyframes fall{0%,40%{transform:translateY(0) scale(.3);opacity:0}55%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(300px) scale(1,1.3);opacity:0}}
.about h2{font-size:clamp(42px,6vw,66px);line-height:1.05;margin:6px 0 18px}
.about p{margin:0 0 16px;max-width:56ch}
.about .first::first-letter{font-family:var(--f-black);float:left;font-size:3.6em;line-height:.85;margin:.05em .1em 0 0;color:var(--crimson-hi)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;padding:0;list-style:none}
.chips li{border:1px solid var(--line);padding:6px 14px;font-style:italic;font-size:16px;background:rgba(10,6,9,.5)}
.about-actions{display:flex;gap:12px;flex-wrap:wrap}
.signature{font-family:var(--f-script);font-size:56px;color:var(--gold-hi);margin:0 0 22px;line-height:1}
.about-text{position:relative;overflow:hidden;isolation:isolate;background:var(--tex-stone) 0 0/360px,var(--panel);border:1px solid var(--line);padding:clamp(24px,4vw,42px);backdrop-filter:blur(3px);min-width:0}

/* ---------- lector: pergamino que se desenrolla ---------- */
.reader{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.reader .veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(42,10,19,.75),rgba(5,2,4,.94));opacity:0;transition:opacity .5s}
.reader.on .veil{opacity:1}
.scroll{position:relative;width:min(660px,calc(100% - 28px));transform:translateY(30px) scale(.85);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .5s}
.reader.on .scroll{transform:none;opacity:1}
.rod{position:relative;height:24px;margin:0 -14px;border-radius:12px;z-index:3;background:var(--tex-fiber) 0 0/120px 30px,linear-gradient(180deg,#6a3e1c,#2b160a 55%,#170b05);background-blend-mode:multiply,normal;box-shadow:0 6px 12px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,220,170,.25)}
.rod::before,.rod::after{content:"";position:absolute;top:-6px;width:20px;height:36px;border-radius:6px;background:linear-gradient(90deg,#8a6a2c,var(--gold-hi),#8a6a2c);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.rod::before{left:-10px}.rod::after{right:-10px}
.unroll{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1.4s cubic-bezier(.45,0,.2,1);margin:-6px 0}
.reader.open .unroll{grid-template-rows:1fr}
.unroll>div{overflow:hidden;min-height:0;position:relative}
.unroll>div::before{content:"";position:absolute;inset:0 2px;filter:url(#rough);
  background:
    radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(70,30,8,.5) 100%),
    var(--tex-mottle) 0 0/320px,
    var(--tex-fiber) 0 0/380px,
    var(--tex-fine) 0 0/200px,
    radial-gradient(circle at 86% 14%,rgba(110,55,15,.25) 0 3%,rgba(110,55,15,.1) 3.4%,transparent 5%),
    radial-gradient(circle at 10% 88%,rgba(110,55,15,.22) 0 4%,transparent 6%),
    linear-gradient(90deg,rgba(80,40,10,.4),transparent 6%,transparent 94%,rgba(80,40,10,.4)),
    linear-gradient(180deg,#ecdcb8,#dcc495 50%,#cfb07c);
  box-shadow:inset 0 0 30px 6px rgba(75,35,8,.5)}
.parch{position:relative;z-index:1;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(255,247,226,.42),rgba(255,247,226,.12) 60%,transparent 85%)!important}
.parch{max-height:calc(100dvh / var(--z,1) - 110px);overflow:auto;color:var(--ink);padding:38px clamp(22px,6vw,54px) 26px;scrollbar-width:thin;scrollbar-color:#8a6a2c transparent;background:none}
.seal-mid{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;z-index:4;transition:opacity .4s .6s}
.seal-mid span{position:absolute;inset:0;border-radius:50%;background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);box-shadow:0 5px 14px rgba(0,0,0,.6),inset 0 0 0 5px #4a0714;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .7s}
.seal-mid span:first-child{clip-path:polygon(0 0,55% 0,44% 36%,58% 62%,44% 100%,0 100%)}
.seal-mid span:nth-child(2){clip-path:polygon(55% 0,100% 0,100% 100%,44% 100%,58% 62%,44% 36%)}
.seal-mid b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-caps);font-weight:600;font-size:34px;color:var(--gold-hi);transition:opacity .3s}
.reader.crack .seal-mid span:first-child{transform:translate(-50px,26px) rotate(-50deg);opacity:0}
.reader.crack .seal-mid span:nth-child(2){transform:translate(50px,30px) rotate(46deg);opacity:0}
.reader.crack .seal-mid b{opacity:0}
.reader.open .seal-mid{opacity:0;pointer-events:none}
.parch .num{text-align:center;font-family:var(--f-title);font-weight:700;font-style:italic;font-size:19px;letter-spacing:.03em;color:var(--ink-red);margin:0}
.parch h3{text-align:center;font-family:var(--f-title);font-weight:700;font-style:italic;font-size:clamp(34px,5vw,48px);line-height:1.05;margin:6px 0 4px;color:#1e0d06;text-wrap:balance}
.parch .orn{display:flex;justify-content:center;gap:10px;align-items:center;color:var(--ink-red);margin:6px 0 20px}
.parch .orn i{width:70px;height:1px;background:currentColor;opacity:.6}
.parch .orn svg{width:22px;height:22px}
.poem{font-size:clamp(20.5px,2.5vw,23.5px);line-height:1.68;color:#170a04;text-shadow:0 0 1px rgba(255,248,230,.7),0 1px 0 rgba(255,244,218,.45);width:fit-content;max-width:min(42ch,100%);margin:0 auto}
.poem .ln{display:block;white-space:pre-wrap}
.poem .gap{display:block;height:.8em}
.reader.reading .poem .ln,.reader.reading .poem .gap{animation:ink .9s both;animation-delay:calc(var(--n)*120ms + 100ms)}
@keyframes ink{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:none}}
.drop{float:left;font-family:var(--f-black);font-size:3.6em;line-height:.8;margin:.08em .1em 0 0;color:var(--ink-red)}
.parch .sign{text-align:right;font-family:var(--f-script);font-size:42px;color:var(--ink-red);margin:10px 0 0;clear:both}
.author-only{display:none!important}
body.is-author .author-only{display:block!important}
.parch-admin{margin-top:16px;padding:12px 14px;border:1px dashed rgba(126,16,36,.45);background:rgba(255,248,232,.35);border-radius:2px}
.pa-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.parch-admin button{background:rgba(255,250,236,.55);border:1px solid rgba(90,50,15,.45);cursor:pointer;font-family:var(--f-caps);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#2a160e;padding:9px 14px;border-radius:2px}
.parch-admin button:hover{border-color:var(--ink-red);color:var(--ink-red)}
.parch-admin button.danger{color:#fff3e6;background:linear-gradient(#a3182f,#6e0b1c);border-color:#5a0612}
.parch-admin button.danger:hover{color:#fff;filter:brightness(1.1)}
.parch-admin button[disabled]{opacity:.6;cursor:wait}
.pa-confirm p{margin:0 0 10px;text-align:center;font-style:italic;font-size:16px;color:var(--ink-red)}
.parch-nav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid rgba(42,22,14,.25)}
.parch-nav button{background:none;border:0;cursor:pointer;font-family:var(--f-caps);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(42,22,14,.75);padding:8px 2px}
.parch-nav button:hover{color:var(--ink-red)}
.parch-nav .close{color:var(--ink-red)}

/* ---------- telón ---------- */
.curtain{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.curtain.drop,.curtain.part{pointer-events:auto}
.curtain .pnl{position:absolute;top:0;height:104%;width:51%;transform:translateY(-110%);will-change:transform,clip-path;
  clip-path:polygon(0 0,100% 0,100% 25%,100% 50%,100% 75%,100% 100%,75% 100%,50% 100%,25% 100%,0 100%);
  background:var(--tex-grain) 0 0/140px,
    linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 70%,rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg,#1e0208 0,#4a0815 1.6%,#7d1428 3.1%,#9c1c33 3.8%,#6e1023 4.8%,#3a0510 6.4%,#1e0208 7.4%);
  background-blend-mode:soft-light,normal,normal;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7))}
.curtain .pnl::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(255,120,140,.12),transparent 70%)}
.curtain .pnl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5%;
  background:linear-gradient(transparent 0 30%,#b38a3e 30% 42%,transparent 42%),repeating-linear-gradient(90deg,#d9b46c 0 2px,#8a6a2c 2px 3px,transparent 3px 6px);
  -webkit-mask:linear-gradient(#000,#000 70%,transparent);mask:linear-gradient(#000,#000 70%,transparent)}
.curtain .l{left:0;transform-origin:0 0}
.curtain .r{right:0;transform-origin:100% 0}
.curtain .val{position:absolute;left:-2%;right:-2%;top:0;height:clamp(60px,11vh,120px);transform:translateY(-110%);z-index:2;filter:drop-shadow(0 12px 18px rgba(0,0,0,.8));
  background:var(--tex-grain) 0 0/140px,linear-gradient(180deg,#3a0510,#7d1428 55%,#5a0b1b);background-blend-mode:soft-light,normal;
  -webkit-mask:radial-gradient(circle at 50% 0,#000 70%,transparent 71%) 0 0/clamp(90px,12vw,170px) 100%,linear-gradient(#000,#000) 0 0/100% 62% no-repeat;
  mask:radial-gradient(circle at 50% 0,#000 70%,transparent 71%) 0 0/clamp(90px,12vw,170px) 100%,linear-gradient(#000,#000) 0 0/100% 62% no-repeat}
.curtain .val::after{content:"";position:absolute;left:0;right:0;top:58%;height:4px;background:linear-gradient(90deg,#8a6a2c,var(--gold-hi),#8a6a2c)}
.curtain.drop .pnl{animation:cDrop 1s cubic-bezier(.55,0,.35,1) forwards}
.curtain.drop .r{animation-delay:.05s}
.curtain.drop .val,.curtain.part .val{animation:vDrop .7s cubic-bezier(.3,1.3,.5,1) .15s forwards}
.curtain.part .pnl{transform:none}
.curtain.part .l{animation:partL 1.25s cubic-bezier(.6,0,.2,1) forwards}
.curtain.part .r{animation:partR 1.25s cubic-bezier(.6,0,.2,1) forwards}
.curtain.part .val{animation:vUp .6s cubic-bezier(.6,0,.4,1) .85s both}
@keyframes cDrop{0%{transform:translateY(-110%) scaleY(1.06)}62%{transform:translateY(1.5%) scaleY(.98)}76%{transform:translateY(-1.2%) scaleY(1.01)}88%{transform:translateY(.4%)}100%{transform:translateY(0)}}
@keyframes vDrop{from{transform:translateY(-110%)}to{transform:none}}
@keyframes vUp{from{transform:none}to{transform:translateY(-120%)}}
@keyframes partL{
  0%{clip-path:polygon(0 0,100% 0,100% 25%,100% 50%,100% 75%,100% 100%,75% 100%,50% 100%,25% 100%,0 100%);transform:none}
  45%{clip-path:polygon(0 0,82% 0,70% 22%,55% 44%,42% 62%,34% 78%,24% 84%,14% 88%,6% 90%,0 90%)}
  100%{clip-path:polygon(0 0,18% 0,14% 10%,9% 20%,5% 30%,3% 36%,2% 38%,1% 39%,.5% 39%,0 38%);transform:translateX(-4%)}}
@keyframes partR{
  0%{clip-path:polygon(100% 0,0 0,0 25%,0 50%,0 75%,0 100%,25% 100%,50% 100%,75% 100%,100% 100%);transform:none}
  45%{clip-path:polygon(100% 0,18% 0,30% 22%,45% 44%,58% 62%,66% 78%,76% 84%,86% 88%,94% 90%,100% 90%)}
  100%{clip-path:polygon(100% 0,82% 0,86% 10%,91% 20%,95% 30%,97% 36%,98% 38%,99% 39%,99.5% 39%,100% 38%);transform:translateX(4%)}}
.curtain .r{clip-path:polygon(100% 0,0 0,0 25%,0 50%,0 75%,0 100%,25% 100%,50% 100%,75% 100%,100% 100%)}

/* ---------- giro al reverso ---------- */
.turn-out{animation:turnOut .6s cubic-bezier(.6,0,.8,.4) forwards}
.turn-in{animation:turnIn .75s cubic-bezier(.2,.6,.2,1) both}
@keyframes turnOut{to{transform:perspective(1800px) rotateY(90deg);opacity:.4}}
@keyframes turnIn{from{transform:perspective(1800px) rotateY(-90deg);opacity:.4}to{transform:none;opacity:1}}

#reverso{min-height:calc(100vh / var(--z,1));background:radial-gradient(900px 600px at 50% 10%,rgba(142,21,48,.55),transparent 70%),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 9px),#1a040a}
.rv{padding-block:46px 70px;text-align:center}
.rv-back{background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--text);padding:10px 18px;cursor:pointer;font-family:var(--f-caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.rv-back:hover{border-color:var(--gold)}
.big-seal{width:130px;height:130px;margin:40px auto 14px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-caps);font-weight:600;font-size:64px;color:var(--gold-hi);
  background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);box-shadow:0 0 0 10px rgba(142,21,48,.3),0 20px 40px #000,inset 0 0 0 7px #4a0714;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 20px rgba(142,21,48,.12),0 20px 40px #000,inset 0 0 0 7px #4a0714}}
.big-seal img{width:80%;height:80%;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 3px var(--gold-hi),0 0 0 6px rgba(59,5,16,.9),inset 0 0 20px #000}
#reverso{isolation:isolate}
#reverso::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(26,4,10,.7),rgba(26,4,10,.35) 45%,rgba(26,4,10,.9)),url(../img/fondo-pasaje-secreto.jpg) center 30%/cover no-repeat;filter:grayscale(1) sepia(.5) hue-rotate(-35deg) saturate(1.6) brightness(.6);opacity:.3;mix-blend-mode:luminosity}
.rv h2{font-size:clamp(48px,8vw,88px);line-height:1;margin:8px 0 10px}
.rv .whisper{font-style:italic;font-size:clamp(19px,2.4vw,22px);max-width:40ch;margin:0 auto 46px;opacity:.88;text-wrap:balance}
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:820px;margin:0 auto;padding:0;list-style:none}
@media (max-width:760px){.socials{grid-template-columns:1fr;max-width:340px}}
.social{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 10px 22px;text-decoration:none;color:var(--text);border:1px solid var(--line);background:rgba(0,0,0,.35);
  border-radius:50% 50% 4px 4px/24% 24% 4px 4px;transition:transform .45s cubic-bezier(.3,1.5,.5,1),border-color .3s,background .3s}
.social:hover{transform:translateY(-8px);border-color:var(--gold);background:rgba(142,21,48,.2)}
.s-seal{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;color:var(--gold-hi);background:var(--tex-grain) 0 0/90px,radial-gradient(circle at 35% 30%,var(--crimson-hi),var(--crimson) 55%,#3b0510);box-shadow:0 8px 18px rgba(0,0,0,.6),inset 0 0 0 4px #4a0714;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.social:hover .s-seal{transform:rotate(-22deg) scale(1.1)}
.s-seal svg{width:30px;height:30px}
.social strong{font-family:var(--f-caps);font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:14px;color:var(--gold-hi)}
.social span{font-style:italic;font-size:18px;opacity:.9}
.social .go{font-style:normal;font-family:var(--f-caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.social:hover .go{color:var(--gold-hi)}
.s-logo{width:72px;height:72px;border-radius:50%;padding:4px;background:conic-gradient(var(--gold),#5b4520,var(--gold-hi),#5b4520,var(--gold));box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 24px rgba(193,51,80,.3);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.s-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 2px #1a040a}
.social:hover .s-logo{transform:rotate(-10deg) scale(1.1)}
.discord{position:relative}
.dc-banner{display:block;align-self:stretch;height:52px;margin:0 -10px;background:var(--tex-grain) 0 0/100px,linear-gradient(90deg,#2b0c17,#5e0b1c);background-blend-mode:soft-light,normal}
.dc-avatar{position:relative;width:76px;height:76px;margin-top:-38px;border-radius:50%;box-shadow:0 0 0 5px #1a040a,0 0 0 6px var(--gold)}
.dc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:grayscale(1)}
.dc-avatar i{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#1a040a;display:grid;place-items:center}
.dc-avatar i::after{content:"";width:12px;height:12px;border-radius:50%;box-shadow:-4px -2px 0 0 #f0b232;transform:translate(3px,1px)}
.copy{background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--text);padding:8px 14px;cursor:pointer;font-family:var(--f-caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.copy:hover{border-color:var(--gold)}
.rv .ps{margin:56px auto 0;max-width:44ch;font-style:italic;opacity:.85}
.rv .ps b{display:block;font-family:var(--f-script);font-weight:400;font-size:46px;color:var(--gold-hi)}

.foot{text-align:center;padding-block:0 26px;font-family:var(--f-caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);position:relative;z-index:2}

/* pantallas grandes y televisores: todo crece en proporción */
@media (min-width:1800px) and (min-height:1150px){:root{--z:1.2} #front,#reverso,.reader .scroll{zoom:1.2}}
@media (min-width:2300px) and (min-height:1400px){:root{--z:1.5} #front,#reverso,.reader .scroll{zoom:1.5}}
@media (min-width:3000px) and (min-height:1900px){:root{--z:2} #front,#reverso,.reader .scroll{zoom:2}}
/* móvil */
@media (max-width:600px){
  body{font-size:17px}
  .view{padding-block:26px 40px}
  .arch{padding:64px 18px 34px;border-radius:50% 50% 6px 6px/18% 18% 6px 6px}
  .lede{font-size:18px}
  .hero-btn{padding:16px 22px 16px 18px;font-size:13px}
  .actions .btn{width:100%;justify-content:center}
  .head h2{font-size:44px}
  .sort button{padding:10px 10px;font-size:10px;letter-spacing:.08em;flex:1}
  .sort{width:100%}
  .desk{gap:16px}
  .note-title{font-size:20px}
  .note-num{font-size:13px;gap:4px}
  .note-num::before,.note-num::after{width:8px}
  .note-seal{width:46px;height:46px;margin-left:-23px;font-size:20px}
  .about-text{padding:24px 18px}
  .tomb{width:min(330px,84%)}
  .parch{padding:30px 18px 22px}
  .poem{font-size:19px}
  .rod{margin:0 -8px}
  .top .wrap{padding-block:8px;flex-wrap:wrap;justify-content:center;row-gap:4px}
  .nav{width:100%;justify-content:center;gap:2px}
  .nav a{display:inline-block!important}
  .mono>span:not(.pfp){display:inline!important;font-size:24px}
  .pfp{width:38px;height:38px}
}
@media (max-width:400px){.nav a{padding:8px 6px;font-size:10.5px;letter-spacing:.08em}.mono>span:not(.pfp){font-size:20px}.wax{width:34px;height:34px}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}