@font-face{font-family:Ibarra;src:url(../fonts/ibarra-real-nova-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Ibarra;font-weight:600;src:url(../fonts/ibarra-real-nova-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Ibarra;font-style:italic;src:url(../fonts/ibarra-real-nova-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:Reenie;src:url(../fonts/reenie-beanie-latin-400-normal.woff2) format("woff2");font-display:swap}
:root{
  --papel:#f3ead9;--papel-2:#e9dcc3;--tinta:#2a211a;--tinta-2:#6b5a49;--hilo:#b3261e;
  --grano: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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:Ibarra,Georgia,serif;font-size:1.15rem;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[hidden]{display:none!important}

/* puerta */
.puerta{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1.5rem;background:var(--papel) var(--grano);overflow:hidden;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.puerta.fuera{transform:translateY(-102%)}
.puerta-hilo{position:absolute;inset:0;width:100%;height:100%}
.puerta-hilo path{fill:none;stroke:var(--hilo);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:3000;stroke-dashoffset:3000;animation:hilo 3.2s .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes hilo{to{stroke-dashoffset:0}}
.puerta-c{position:relative;width:min(100%,30rem);text-align:left}
.puerta-fecha{margin:0 0 1rem;letter-spacing:.32em;font-size:.85rem;color:var(--tinta-2)}
.puerta h1{margin:0 0 2.6rem;font-weight:400;font-size:clamp(2.7rem,11vw,4.6rem);line-height:.98;letter-spacing:-.015em}
.puerta h1 em{color:var(--hilo)}
.puerta label{display:block;font-family:Reenie,cursive;font-size:1.65rem;line-height:1;margin-bottom:.45rem;color:var(--tinta-2)}
.puerta-campo{display:flex;gap:.8rem;align-items:flex-end;border-bottom:2px solid var(--hilo);background:var(--papel)}
.puerta-campo input{flex:1;min-width:0;border:0;background:none;padding:.5rem 0;font:inherit;font-size:1.35rem;color:var(--tinta);letter-spacing:.08em;outline:0}
.puerta-campo button{padding:.45rem .1rem;font-style:italic;font-size:1.3rem;color:var(--hilo)}
.puerta-campo button:hover{text-decoration:underline;text-underline-offset:4px}
.puerta-m{min-height:3.2em;margin:.8rem 0 0;font-size:1.02rem;color:var(--tinta-2)}
@media (max-width:640px){.puerta-c{background:var(--papel);box-shadow:0 0 0 1rem var(--papel),0 0 1.4rem 1.2rem var(--papel)}}
.puerta.mal .puerta-campo{animation:tiron .4s}
@keyframes tiron{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

/* cortina entre páginas */
#cortina{position:fixed;inset:0;z-index:25;pointer-events:none;background:var(--c,#222);clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .55s cubic-bezier(.6,0,.2,1)}
#cortina.on{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}
#cortina.quita{transition:opacity .4s;opacity:0}
#cortina.sin{transition:none}

/* visor */
#visor{border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;overflow:hidden}
#visor[open]{display:grid;place-items:center}
#visor::backdrop{background:rgba(12,9,7,.9)}
#visor img{max-width:94vw;max-height:92dvh;width:auto;height:auto;object-fit:contain}
.visor-x{position:fixed;z-index:2;top:max(.6rem,env(safe-area-inset-top));right:.9rem;width:3rem;height:3rem;border-radius:50%;background:rgba(0,0,0,.62);font-size:2.2rem;line-height:1;color:#fff;touch-action:manipulation}

/* foto y vídeo */
.foto{margin:0;background:#fffdf8;padding:.6rem .6rem 0;box-shadow:0 1px 2px rgba(0,0,0,.25),0 12px 26px -10px rgba(0,0,0,.5);transform:rotate(var(--r,-2deg))}
.foto-m{display:block;width:100%;position:relative;overflow:hidden;background:#d9d0c1;aspect-ratio:var(--ar,3/4)}
.foto-m img,.foto-m video{width:100%;height:100%;object-fit:cover}
.foto button.ver{display:block;width:100%;cursor:zoom-in}
.foto figcaption{font-family:Reenie,cursive;font-size:1.45rem;line-height:1;color:#3a3029;text-align:center;padding:.5rem 0 .55rem;min-height:1.1rem}
.sonido{position:absolute;right:.5rem;bottom:.5rem;z-index:2;padding:.3rem .65rem;border-radius:2px;background:rgba(0,0,0,.62);color:#fff;font:500 .85rem/1.3 system-ui,sans-serif}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}