/* Plugin Menus Periko Ortega v2 — carta cinematográfica */

.mpo-carta{
  --mpo-bg:#0A0A0B;
  --mpo-fg:#F4F1EA;
  --mpo-muted:#8D877D;
  --mpo-accent:#B31118;
  --mpo-line:rgba(244,241,234,.13);
  --mpo-nav-h:58px;
  --mpo-nav-top:0px;
  --mpo-z-nav:90;
  --mpo-ease:cubic-bezier(.19,1,.22,1);
  position:relative;
  background:var(--mpo-bg);
  color:var(--mpo-fg);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
.mpo-carta *{box-sizing:border-box}
.mpo-carta .mpo-hl{color:var(--mpo-accent)}

/* ---------- PROGRESO ---------- */
.mpo-carta .mpo-prog{position:fixed;top:var(--mpo-nav-top);left:0;height:2px;width:0;background:var(--mpo-accent);z-index:var(--mpo-z-nav);
  opacity:0;transition:top .25s ease,opacity .3s ease;
  box-shadow:0 0 18px rgba(179,17,24,.75)}

/* ---------- NAV STICKY ---------- */
.mpo-carta .mpo-nav{position:fixed;top:var(--mpo-nav-top);left:0;right:0;z-index:var(--mpo-z-nav);height:var(--mpo-nav-h);
  background:rgba(10,10,11,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--mpo-line);
  /* Oculta: no se desliza por detrás de la cabecera del tema (que puede ser
     semitransparente y dejarla entrever), sino que se desvanece del todo. */
  transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .45s var(--mpo-ease),opacity .3s ease,visibility 0s linear .3s,top .25s ease}
.mpo-carta.mpo-nav-visible .mpo-prog{opacity:1}
.mpo-carta .mpo-nav.mpo-show{transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .45s var(--mpo-ease),opacity .3s ease,visibility 0s linear 0s,top .25s ease}
.mpo-carta .mpo-nav-in{max-width:1280px;margin:0 auto;height:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);align-items:center;gap:18px;padding:0 18px}
.mpo-carta .mpo-nav-brand{font-family:"Playfair Display",serif;font-size:.98rem;white-space:nowrap;
  justify-self:start;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  padding-right:6px;color:var(--mpo-fg)}
.mpo-carta .mpo-nav-scroll{position:relative;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  display:flex;justify-content:center;justify-content:safe center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.mpo-carta .mpo-nav-scroll::-webkit-scrollbar{display:none}
.mpo-carta .mpo-nav-list{display:flex;gap:2px;position:relative;width:max-content;padding-bottom:2px}
.mpo-carta .mpo-nav-btn{background:none;border:0;cursor:pointer;color:var(--mpo-muted);white-space:nowrap;
  font-family:"Inter",sans-serif;font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 14px;transition:color .3s}
.mpo-carta .mpo-nav-btn:hover,.mpo-carta .mpo-nav-btn.mpo-on{color:var(--mpo-fg)}
.mpo-carta .mpo-magic{position:absolute;bottom:0;height:1px;width:0;background:var(--mpo-accent);
  transition:left .5s var(--mpo-ease),width .5s var(--mpo-ease);box-shadow:0 0 10px rgba(179,17,24,.8)}
.mpo-carta .mpo-brand-off{visibility:hidden}
.mpo-carta .mpo-nav-count{justify-self:end;font-size:.66rem;letter-spacing:.14em;color:var(--mpo-muted);font-variant-numeric:tabular-nums}
.mpo-carta .mpo-nav-count b{color:var(--mpo-fg);font-weight:500}

/* ---------- RAÍL ---------- */
.mpo-carta .mpo-rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:var(--mpo-z-nav);display:flex;flex-direction:column;gap:15px}
.mpo-carta .mpo-rail button{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0;color:var(--mpo-muted);transition:.3s}
.mpo-carta .mpo-rail .mpo-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;transition:.3s var(--mpo-ease)}
.mpo-carta .mpo-rail .mpo-rt{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:.3s;white-space:nowrap}
.mpo-carta .mpo-rail button:hover{color:var(--mpo-fg)}
.mpo-carta .mpo-rail button:hover .mpo-rt{opacity:1;transform:none}
.mpo-carta .mpo-rail button.mpo-on{color:var(--mpo-accent)}
.mpo-carta .mpo-rail button.mpo-on .mpo-dot{transform:scale(1.7);box-shadow:0 0 12px rgba(179,17,24,.9)}
.mpo-carta .mpo-rail button.mpo-on .mpo-rt{opacity:1;transform:none;color:var(--mpo-fg)}

/* ---------- HERO ---------- */
.mpo-carta .mpo-hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px;position:relative;overflow:hidden}
.mpo-carta .mpo-aura{position:absolute;inset:-25%;z-index:0;
  background:radial-gradient(44% 36% at 50% 44%,rgba(179,17,24,.30),transparent 70%),
             radial-gradient(62% 52% at 50% 60%,rgba(125,115,100,.13),transparent 72%);
  animation:mpo-breathe 13s ease-in-out infinite alternate}
@keyframes mpo-breathe{from{transform:scale(1) rotate(0)}to{transform:scale(1.18) rotate(2deg)}}
.mpo-carta .mpo-hero > *:not(.mpo-aura),.mpo-carta .mpo-finale > *:not(.mpo-aura){position:relative;z-index:1}

.mpo-carta .mpo-ticker{width:min(560px,86vw);overflow:hidden;margin-bottom:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  opacity:0;animation:mpo-fadeUp .9s .2s var(--mpo-ease) forwards}
.mpo-carta .mpo-ticker > div{display:flex;width:max-content;animation:mpo-slide 26s linear infinite}
.mpo-carta .mpo-ticker span{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--mpo-accent);
  font-weight:500;padding:0 22px;white-space:nowrap}
@keyframes mpo-slide{to{transform:translateX(-50%)}}

.mpo-carta .mpo-hero-title{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(3.4rem,14vw,9rem);
  line-height:.94;margin:0;letter-spacing:-.015em;color:var(--mpo-fg)}
.mpo-carta .mpo-sub{color:var(--mpo-muted);font-size:clamp(.96rem,2.6vw,1.12rem);margin-top:24px;max-width:34ch;
  opacity:0;animation:mpo-fadeUp 1s 1.05s var(--mpo-ease) forwards}
.mpo-carta .mpo-cue{position:absolute;bottom:26px;left:50%;z-index:1;font-size:.56rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mpo-muted);opacity:0;transform:translateX(-50%);
  animation:mpo-fadeUp 1s 1.4s var(--mpo-ease) forwards,mpo-bob 2.8s 2.4s ease-in-out infinite}
@keyframes mpo-fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mpo-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* letras enmascaradas */
.mpo-carta .mpo-ch{display:inline-block;overflow:hidden;vertical-align:bottom}
.mpo-carta .mpo-ch > i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform 1.05s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-ch > i{transform:none}
.mpo-carta .mpo-hero-title .mpo-ch > i{animation:mpo-rise 1.15s var(--mpo-ease) forwards}
@keyframes mpo-rise{to{transform:none}}
.mpo-carta .mpo-sp{display:inline-block;width:.3em}

/* ---------- CAPÍTULOS ---------- */
.mpo-carta .mpo-chapter{position:relative;padding:14svh 0}
.mpo-carta .mpo-inner{max-width:1280px;margin:0 auto;padding:0 26px 0 74px;
  display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.mpo-carta .mpo-shot{order:1;position:relative}
.mpo-carta .mpo-text{order:2}
.mpo-carta .mpo-chapter.mpo-alt .mpo-shot{order:2}
.mpo-carta .mpo-chapter.mpo-alt .mpo-text{order:1}

.mpo-carta .mpo-ghostnum{position:absolute;top:-7%;left:-5%;z-index:0;font-family:"Playfair Display",serif;
  font-size:clamp(6.5rem,15vw,14rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(244,241,234,.14);pointer-events:none;
  opacity:0;transform:translateY(24px);transition:opacity 1.1s .2s var(--mpo-ease),transform 1.1s .2s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-ghostnum{opacity:1;transform:none}

.mpo-carta .mpo-frame{position:relative;z-index:1;aspect-ratio:3/4;overflow:hidden;border-radius:2px;
  box-shadow:0 50px 95px -52px rgba(0,0,0,.95);background:#111}
.mpo-carta .mpo-media{position:absolute;inset:-9%;background-size:cover;background-position:center;
  transform:scale(1.2);transition:transform 1.8s var(--mpo-ease);will-change:transform}
.mpo-carta .mpo-in .mpo-media{transform:scale(1)}
.mpo-carta .mpo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 48%)}
.mpo-carta .mpo-slats{position:absolute;inset:0;z-index:4;display:flex;pointer-events:none}
.mpo-carta .mpo-slats i{flex:1;background:var(--mpo-bg);transform:translateY(0);transition:transform 1.15s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-slats i{transform:translateY(-101%)}

.mpo-carta .mpo-lbl{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mpo-accent);
  font-weight:500;margin-bottom:15px;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(12px);transition:.8s .15s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-lbl{opacity:1;transform:none}
.mpo-carta .mpo-lbl::after{content:"";height:1px;width:0;background:var(--mpo-accent);opacity:.5;transition:width 1.1s .5s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-lbl::after{width:60px}

.mpo-carta .mpo-ctitle{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(2.3rem,5.6vw,4.2rem);
  line-height:1;margin:0 0 30px;letter-spacing:-.015em;color:var(--mpo-fg)}

.mpo-carta .mpo-dish{padding:16px 0;border-bottom:1px solid var(--mpo-line);position:relative;
  opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--mpo-ease),transform .85s var(--mpo-ease),padding-left .35s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-dish{opacity:1;transform:none}
.mpo-carta .mpo-dish::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--mpo-accent);
  transition:width 1.2s var(--mpo-ease)}
.mpo-carta .mpo-in .mpo-dish::before{width:32px}
.mpo-carta .mpo-dish:hover{padding-left:14px}
.mpo-carta .mpo-dish:hover::before{width:100%;transition:width .6s var(--mpo-ease)}
.mpo-carta .mpo-dish:last-child{border-bottom:0}
.mpo-carta .mpo-dish h3{font-family:"Playfair Display",serif;font-weight:400;font-size:1.4rem;margin:0;line-height:1.22;color:var(--mpo-fg)}
.mpo-carta .mpo-dish p{font-size:.9rem;color:var(--mpo-muted);margin:6px 0 0;line-height:1.6;max-width:46ch}
.mpo-carta .mpo-sub{display:block;padding-left:13px;border-left:1px solid var(--mpo-accent);margin-top:7px}

/* ---------- CIERRE ---------- */
.mpo-carta .mpo-finale{position:relative;min-height:92svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:100px 24px;overflow:hidden}
.mpo-carta .mpo-ey{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--mpo-accent);margin-bottom:22px;
  opacity:0;transform:translateY(12px);transition:.8s var(--mpo-ease)}
.mpo-carta .mpo-finale.mpo-in .mpo-ey{opacity:1;transform:none}
.mpo-carta .mpo-price{font-family:"Playfair Display",serif;font-size:clamp(3.2rem,10vw,6.2rem);line-height:1;
  opacity:0;transform:scale(.94);transition:1.1s .15s var(--mpo-ease)}
.mpo-carta .mpo-finale.mpo-in .mpo-price{opacity:1;transform:none}
.mpo-carta .mpo-price .mpo-hl{font-size:.4em}
.mpo-carta .mpo-notes,.mpo-carta .mpo-aller,.mpo-carta .mpo-cta{opacity:0;transform:translateY(14px);transition:.9s var(--mpo-ease)}
.mpo-carta .mpo-finale.mpo-in .mpo-notes{opacity:1;transform:none;transition-delay:.35s}
.mpo-carta .mpo-finale.mpo-in .mpo-aller{opacity:1;transform:none;transition-delay:.45s}
.mpo-carta .mpo-finale.mpo-in .mpo-cta{opacity:1;transform:none;transition-delay:.55s}
.mpo-carta .mpo-notes{color:var(--mpo-muted);font-size:clamp(.86rem,2.4vw,.96rem);margin-top:20px;line-height:1.85}
.mpo-carta .mpo-aller{color:rgba(141,135,125,.9);font-size:.79rem;margin-top:20px;max-width:44ch}
.mpo-carta .mpo-cta{position:relative;display:inline-block;margin-top:34px;overflow:hidden;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  color:var(--mpo-fg);text-decoration:none;border:1px solid var(--mpo-accent);padding:17px 44px;border-radius:1px}
.mpo-carta .mpo-cta span{position:relative;z-index:1}
.mpo-carta .mpo-cta::before{content:"";position:absolute;inset:0;background:var(--mpo-accent);
  transform:translateY(101%);transition:transform .5s var(--mpo-ease)}
.mpo-carta .mpo-cta:hover::before{transform:none}
.mpo-carta .mpo-foot{text-align:center;padding:32px 24px 54px;color:var(--mpo-muted);font-size:.68rem;letter-spacing:.04em}

/* ---------- SIN ANIMACIÓN ---------- */
.mpo-carta.mpo-no-anim .mpo-slats i{transform:translateY(-101%)}
.mpo-carta.mpo-no-anim .mpo-media{transform:none}
.mpo-carta.mpo-no-anim .mpo-ch > i{transform:none;animation:none}
.mpo-carta.mpo-no-anim .mpo-dish,
.mpo-carta.mpo-no-anim .mpo-ghostnum,
.mpo-carta.mpo-no-anim .mpo-lbl,
.mpo-carta.mpo-no-anim .mpo-sub,
.mpo-carta.mpo-no-anim .mpo-ey,
.mpo-carta.mpo-no-anim .mpo-price,
.mpo-carta.mpo-no-anim .mpo-notes,
.mpo-carta.mpo-no-anim .mpo-aller,
.mpo-carta.mpo-no-anim .mpo-cta,
.mpo-carta.mpo-no-anim .mpo-sub{opacity:1;transform:none}
.mpo-carta.mpo-no-anim .mpo-aura,
.mpo-carta.mpo-no-anim .mpo-ticker > div{animation:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){ .mpo-carta .mpo-inner{padding:0 24px 0 64px;gap:44px} }
@media(max-width:900px){
  .mpo-carta .mpo-rail{display:none}
  .mpo-carta .mpo-inner{grid-template-columns:1fr;gap:26px;padding:0 24px}
  .mpo-carta .mpo-chapter{padding:8svh 0}
  .mpo-carta .mpo-chapter .mpo-shot,.mpo-carta .mpo-chapter.mpo-alt .mpo-shot{order:1}
  .mpo-carta .mpo-chapter .mpo-text,.mpo-carta .mpo-chapter.mpo-alt .mpo-text{order:2}
  .mpo-carta .mpo-frame{aspect-ratio:4/5;max-height:60svh;margin-inline:auto;width:100%}
  .mpo-carta .mpo-ghostnum{top:-3%;left:0;font-size:5.5rem}
  .mpo-carta .mpo-nav-brand{font-size:.86rem}
}
@keyframes mpo-bob-fijo{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(8px);opacity:1}}

@media(max-width:768px){
  /* En pantallas pequeñas el "desliza" pasa a formar parte del flujo,
     justo debajo del subtítulo, en vez de ir anclado al fondo. */
  .mpo-carta .mpo-hero{padding-bottom:56px}
  .mpo-carta .mpo-cue{position:static;left:auto;bottom:auto;transform:none;
    margin-top:30px;text-align:center;
    animation:mpo-fadeUp 1s 1.4s var(--mpo-ease) forwards,mpo-bob-fijo 2.8s 2.4s ease-in-out infinite}
}
@media(max-width:640px){
  .mpo-carta{--mpo-nav-h:52px}
  .mpo-carta .mpo-nav-count{visibility:hidden;width:0}
  .mpo-carta .mpo-nav-brand{max-width:38vw;overflow:hidden;text-overflow:ellipsis}
  .mpo-carta .mpo-hero{padding:70px 22px}
  .mpo-carta .mpo-frame{aspect-ratio:3/4;max-height:56svh}
}
@media(max-width:420px){
  .mpo-carta .mpo-nav-brand{visibility:hidden;width:0}
  .mpo-carta .mpo-dish h3{font-size:1.26rem}
  .mpo-carta .mpo-ctitle{margin-bottom:22px}
  .mpo-carta .mpo-ghostnum{font-size:4.6rem}
}
@media(prefers-reduced-motion:reduce){
  .mpo-carta *{animation:none!important;transition-duration:.01ms!important}
  .mpo-carta .mpo-slats i{transform:translateY(-101%)}
  .mpo-carta .mpo-media{transform:none}
  .mpo-carta .mpo-ch > i{transform:none}
  .mpo-carta .mpo-dish,.mpo-carta .mpo-ghostnum,.mpo-carta .mpo-lbl,
  .mpo-carta .mpo-ey,.mpo-carta .mpo-price,.mpo-carta .mpo-notes,
  .mpo-carta .mpo-aller,.mpo-carta .mpo-cta{opacity:1;transform:none}
}