:root{
  --accent:#E86822;
  --paper:#FFF8EC;
  --bg:#17110D;
  --heading:"Playfair Display",serif;
  --body:"DM Sans",sans-serif;
  --heading-scale:1;
  --body-scale:1;
  --weight:700;
  --radius:26px;
  --duration:460ms;
  --perspective:1800px;
  --depth:30px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--body);background:var(--bg);color:#21170f}
body{overflow:hidden}
button{font:inherit}
.app{height:100svh;display:grid;grid-template-rows:72px 1fr 58px;background:
  radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 42%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#fff 8%),var(--bg))}
.topbar,.hud{display:flex;align-items:center;position:relative;z-index:50;color:#fff}
.topbar{padding:0 max(18px,env(safe-area-inset-left));justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 80%,transparent)}
.brand b,.brand small{display:block}
.brand b{font-size:12px;letter-spacing:.13em}
.brand small{font-size:11px;opacity:.62;margin-top:3px}
.glass-btn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;padding:9px 14px;border-radius:999px;backdrop-filter:blur(12px);cursor:pointer}

.viewport{position:relative;min-height:0;display:grid;place-items:center}
.scene{width:min(1050px,86vw);height:min(690px,calc(100svh - 155px));min-height:430px;perspective:var(--perspective);position:relative;display:grid;place-items:center;touch-action:pan-y}
.floor-glow{position:absolute;width:75%;height:16%;bottom:-4%;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(28px);transform:rotateX(72deg)}
.book{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 180ms ease-out}
.book::before{content:"";position:absolute;inset:2% -1% -2% 2%;border-radius:var(--radius);background:#4c2815;transform:translateZ(calc(var(--depth) * -1));box-shadow:0 32px 80px rgba(0,0,0,.44)}
.sheet{
  position:absolute;inset:0;border-radius:var(--radius);transform-style:preserve-3d;
  transform-origin:left center;transition:transform var(--duration) cubic-bezier(.2,.74,.22,1),opacity 180ms ease;
  pointer-events:none;opacity:0;
}
.sheet.active{pointer-events:auto;opacity:1;z-index:10}
.sheet.before{opacity:0;transform:rotateY(-22deg) translateX(-3%) translateZ(-20px)}
.sheet.after{opacity:0;transform:rotateY(22deg) translateX(3%) translateZ(-20px)}
.sheet.enter-next{animation:enterNext var(--duration) cubic-bezier(.2,.74,.22,1)}
.sheet.enter-prev{animation:enterPrev var(--duration) cubic-bezier(.2,.74,.22,1)}
@keyframes enterNext{0%{transform:rotateY(62deg) translateX(10%) translateZ(-35px);filter:brightness(.72)}100%{transform:rotateY(0);filter:brightness(1)}}
@keyframes enterPrev{0%{transform:rotateY(-62deg) translateX(-10%) translateZ(-35px);filter:brightness(.72)}100%{transform:rotateY(0);filter:brightness(1)}}

.paper{
  position:absolute;inset:0;border-radius:inherit;background:var(--paper);overflow:hidden;
  box-shadow:inset 18px 0 26px rgba(83,49,19,.08),0 24px 70px rgba(0,0,0,.22);
  transform:translateZ(0);backface-visibility:hidden
}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(62,36,15,.14),transparent 4%,transparent 96%,rgba(62,36,15,.08)),
  repeating-linear-gradient(0deg,rgba(110,74,39,.018) 0 1px,transparent 1px 5px)}
.cover .paper{background:
  radial-gradient(circle at 75% 20%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 28%),
  linear-gradient(145deg,#25120b,color-mix(in srgb,var(--accent) 72%,#35180c));color:#fff}
.cover-content{height:100%;padding:7%;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.cover-content .eyebrow{color:#ffd7a8}
.cover-content h1{font-family:var(--heading);font-size:calc(clamp(50px,7.4vw,96px)*var(--heading-scale));line-height:.91;max-width:710px;margin:14px 0 18px;font-weight:var(--weight)}
.cover-content p{max-width:520px;font-size:calc(16px*var(--body-scale));line-height:1.65;opacity:.78}
.cover-mark{position:absolute;right:6%;bottom:6%;font-size:clamp(100px,18vw,220px);filter:drop-shadow(0 18px 32px rgba(0,0,0,.28));transform:rotate(-8deg)}

.menu-page{height:100%;display:grid;grid-template-columns:48% 52%;position:relative;z-index:2}
.visual{margin:24px;border-radius:calc(var(--radius) - 7px);overflow:hidden;background:
  radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 50%),
  linear-gradient(145deg,#ecdcc4,#c8a77b);position:relative}
.visual.empty::before{content:"IMAGEN CLOUDINARY";position:absolute;inset:0;display:grid;place-items:center;color:rgba(54,32,15,.42);font-size:12px;font-weight:800;letter-spacing:.15em}
.visual img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.015)}
.copy{padding:7% 7% 7% 3%;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--accent)}
.copy h2{font-family:var(--heading);font-size:calc(clamp(42px,5vw,72px)*var(--heading-scale));line-height:.96;margin:14px 0 12px;font-weight:var(--weight)}
.copy>p{font-size:calc(15px*var(--body-scale));color:#776553;line-height:1.65;max-width:520px}
.items{margin-top:20px;border-top:1px solid rgba(70,46,24,.13)}
.item{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(70,46,24,.13);font-size:calc(14px*var(--body-scale))}
.item span{font-weight:600}.item b{color:var(--accent);font-family:var(--heading);font-size:18px}

.edge{
  position:fixed;z-index:80;top:72px;bottom:58px;width:max(54px,5.5vw);border:0;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,255,255,.075),transparent);
  opacity:.58;transition:opacity .18s,background .18s;display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent
}
.edge-left{left:0;border-radius:0 24px 24px 0}
.edge-right{right:0;border-radius:24px 0 0 24px;background:linear-gradient(-90deg,rgba(255,255,255,.075),transparent)}
.edge span{width:42px;height:64px;border-radius:999px;display:grid;place-items:center;font-size:46px;background:rgba(0,0,0,.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.11)}
.edge:hover,.edge:active{opacity:1;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}
.edge-right:hover,.edge-right:active{background:linear-gradient(-90deg,rgba(255,255,255,.12),transparent)}
.edge:disabled{opacity:.12;cursor:default}

.hud{padding:0 18px;display:grid;grid-template-columns:minmax(80px,1fr) minmax(120px,2fr) auto;gap:14px;font-size:12px}
.hud-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-progress{height:3px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
.hud-progress i{display:block;height:100%;width:0;background:#fff;transition:width .3s ease}
.hud-counter{opacity:.72}

dialog{width:min(520px,calc(100% - 28px));max-height:78svh;border:0;border-radius:24px;background:#fff8ec;color:#23170f;padding:28px;box-shadow:0 30px 100px rgba(0,0,0,.44)}
dialog::backdrop{background:rgba(12,8,6,.72);backdrop-filter:blur(7px)}
dialog h2{font-family:var(--heading);font-size:36px;margin:10px 0 22px}
.close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;font-size:24px;background:#eadcc9;cursor:pointer}
.index-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.index-list button{border:1px solid rgba(64,41,20,.12);background:#fff;border-radius:14px;padding:12px;text-align:left;font-weight:700;cursor:pointer}

@media(max-width:740px){
  .app{grid-template-rows:64px 1fr 52px}
  .scene{width:88vw;height:calc(100svh - 132px);min-height:0}
  .edge{top:64px;bottom:52px;width:50px}
  .edge span{width:34px;height:56px;font-size:38px;background:rgba(0,0,0,.17)}
  .menu-page{grid-template-columns:1fr;grid-template-rows:42% 58%}
  .visual{margin:15px 15px 0}
  .copy{padding:20px 24px 25px;justify-content:flex-start}
  .copy h2{font-size:calc(41px*var(--heading-scale));margin:9px 0}
  .copy>p{font-size:calc(13px*var(--body-scale));margin:5px 0}
  .items{margin-top:10px}.item{padding:9px 0}
  .cover-content{padding:9%}
  .cover-content h1{font-size:calc(48px*var(--heading-scale))}
  .cover-mark{right:2%;bottom:8%;font-size:120px;opacity:.52}
  .hud{grid-template-columns:1fr auto}.hud-progress{grid-column:1/-1;grid-row:2;margin-top:-8px}
}
@media(max-width:430px){.index-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}


/* ===== Seasonal theme layer ===== */
.theme-fx,.theme-decor{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.theme-decor{z-index:40}
.theme-corner{position:absolute;top:78px;font-size:clamp(28px,4vw,56px);filter:drop-shadow(0 8px 15px rgba(0,0,0,.25));opacity:.92}
.theme-corner.left{left:max(62px,6vw)}
.theme-corner.right{right:max(62px,6vw)}
.theme-banner{position:absolute;left:50%;top:74px;transform:translateX(-50%);max-width:min(56vw,680px);max-height:88px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.24))}
.particle{position:absolute;top:-10vh;will-change:transform,opacity;animation:themeFall linear infinite;opacity:.82}
@keyframes themeFall{
  0%{transform:translate3d(0,-12vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift,40px),112vh,0) rotate(360deg)}
}
body.theme-glow .scene::after{
  content:"";position:absolute;inset:-5%;border-radius:34px;pointer-events:none;
  box-shadow:0 0 60px color-mix(in srgb,var(--accent) 22%,transparent);
}
body[data-theme="halloween"] .paper::after{background:
  radial-gradient(circle at 12% 18%,rgba(70,15,94,.05),transparent 18%),
  linear-gradient(90deg,rgba(62,36,15,.14),transparent 4%,transparent 96%,rgba(62,36,15,.08)),
  repeating-linear-gradient(0deg,rgba(110,74,39,.018) 0 1px,transparent 1px 5px)}
body[data-theme="dia-muertos"] .paper{box-shadow:inset 18px 0 26px rgba(104,48,124,.09),0 24px 70px rgba(0,0,0,.22)}
body[data-theme="navidad"] .book::before{background:color-mix(in srgb,var(--theme-secondary,#1B5E20) 70%,#321)}
@media(max-width:740px){
  .theme-corner{top:68px;font-size:31px}
  .theme-corner.left{left:52px}.theme-corner.right{right:52px}
  .theme-banner{top:66px;max-width:58vw;max-height:62px}
}
@media(prefers-reduced-motion:reduce){.particle{display:none!important}}