/* ═══ La Porte de l'Enfer — acto Negro ═══ */
.porte-body { background: #070708; color: var(--frio); min-height: 100svh; }
.porte-body::after { opacity: .07; }
.porte-body .feathers { opacity: .55; }
/* ─── infierno: fuego, almas, brasas ─── */
.souls { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hellfire { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 38vh; pointer-events: none; z-index: 1; opacity: .9;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%); }
.porte .phero__lead, .porte .stage__state, .porte .how p, .porte__foot { text-shadow: 0 1px 12px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.hellfire.is-fallback { background: radial-gradient(ellipse at 50% 120%, rgba(140,60,40,.55), rgba(90,31,46,.25) 45%, transparent 75%); }
body[data-fuego="b"] .hellfire.is-fallback { background: radial-gradient(ellipse at 50% 120%, rgba(229,229,229,.35), transparent 70%); }
.porte-body { --ember: 150, 70, 45; --ember-core: 235, 190, 150; }
body[data-fuego="b"] { --ember: 200, 200, 205; --ember-core: 245, 245, 248; }
@keyframes emberGlow { 0%,100% { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 90px rgba(var(--ember), .16); } 45% { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 140px rgba(var(--ember), .30); } 70% { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 110px rgba(var(--ember), .22); } }
@keyframes underDoor { 0%,100% { opacity: .55; } 30% { opacity: .9; } 55% { opacity: .65; } 80% { opacity: 1; } }
.pvignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }

/* loader */
.ploader { position: fixed; inset: 0; z-index: 10000; background: #070708; display: flex; align-items: center; justify-content: center; }
.ploader__line { width: 1px; height: 0; background: var(--frio); animation: pl 1.4s var(--ease) forwards; }
@keyframes pl { 0% { height: 0; opacity: 0 } 60% { height: 140px; opacity: 1 } 100% { height: 140px; opacity: 0 } }

/* cursor claro */
.porte-body .cursor { background: #fff; }

/* nav */
.pnav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); color: var(--frio); }
.pnav__logo img { height: 34px; width: auto; }
.pnav__back { font-family: var(--oswald); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; opacity: .7; transition: opacity .3s; }
.pnav__back:hover { opacity: 1; }

.porte { position: relative; z-index: 2; padding: 0 var(--gutter) 60px; max-width: 1200px; margin: 0 auto; }

/* ─── título ─── */
.phero { text-align: center; padding: 150px 0 40px; }
.phero__eyebrow { display: inline-flex; align-items: center; gap: 16px; font-family: var(--cinzel); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--humo); margin-bottom: 30px; }
.phero__eyebrow i { display: block; width: 40px; height: 1px; background: currentColor; opacity: .5; }
.phero__title { line-height: 0; margin-bottom: 30px; }
.phero__lettering { display: inline-block; width: min(92vw, 780px); height: auto; filter: drop-shadow(0 0 30px rgba(229,229,229,.08)); }
.phero__lead { font-family: var(--corm); font-style: italic; font-size: clamp(19px, 1.7vw, 24px); color: rgba(229,229,229,.72); line-height: 1.4; }

/* ─── escenario ─── */
.stage { position: relative; text-align: center; padding: 20px 0 20px; }
.stage__count { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin-bottom: 26px; }
.stage__n { font-family: var(--oswald); font-weight: 600; font-size: clamp(64px, 8vw, 110px); line-height: 1; letter-spacing: -.02em; }
.stage__sep { font-family: var(--corm); font-style: italic; font-size: 40px; color: var(--humo); }
.stage__t { font-family: var(--cinzel); font-size: 26px; letter-spacing: .2em; color: var(--humo); }
.stage__state { font-family: var(--corm); font-style: italic; font-size: 19px; color: rgba(229,229,229,.7); margin: 30px 0 46px; min-height: 1.4em; }

/* ─── la puerta ─── */
.door {
  --w: min(78vw, 440px);
  position: relative; width: var(--w); aspect-ratio: 11 / 17; margin: 0 auto;
  perspective: 1400px; perspective-origin: 50% 40%;
}
.door__frame { position: absolute; inset: -14px; clip-path: url(#archClip); background: linear-gradient(180deg, #2a2a2d, #141416 60%, #0d0d0f); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.door { filter: drop-shadow(0 0 40px rgba(var(--ember), .18)); animation: doorHeat 3.4s ease-in-out infinite; }
@keyframes doorHeat { 0%,100% { filter: drop-shadow(0 0 34px rgba(var(--ember), .14)); } 50% { filter: drop-shadow(0 0 70px rgba(var(--ember), .32)); } }
.door__frame::after { content: ""; position: absolute; inset: 8px; clip-path: url(#archClip); background: #0b0b0c; }
.door__beyond { position: absolute; inset: 0; clip-path: url(#archClip); overflow: hidden; background: #0b0b0c; }
.door__beyond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; transform: scale(1.15); transition: opacity 2.4s var(--ease), transform 4s var(--ease); filter: contrast(1.05); }
.door__light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.95), rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 75%); opacity: 0; transition: opacity 2s var(--ease); }

.door__leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12%),
    linear-gradient(180deg, #1a1a1c, #101012 55%, #0c0c0e);
  transform-style: preserve-3d; transition: transform 3.2s cubic-bezier(.7, 0, .2, 1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.door__leaf--l { left: 0; transform-origin: left center; border-top-left-radius: 100% 36%; }
.door__leaf--r { right: 0; transform-origin: right center; border-top-right-radius: 100% 36%; }
.door::before { content: ""; position: absolute; inset: 0; clip-path: url(#archClip); pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -60px 80px rgba(0,0,0,.5); }
.door.is-open::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.door__band { position: absolute; left: 0; right: 0; height: 4%; background: linear-gradient(180deg, #2b2b2e, #171719); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.6); }
.door__band--1 { top: 30%; } .door__band--2 { top: 56%; } .door__band--3 { top: 82%; }
.door__hinge { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a4a4e, #17171a 70%); box-shadow: 0 1px 2px rgba(0,0,0,.8); }
.door__leaf--l .door__hinge { left: 10%; } .door__leaf--r .door__hinge { right: 10%; }
.door__hinge--1 { top: calc(30% + 1.2%); } .door__hinge--2 { top: calc(56% + 1.2%); } .door__hinge--3 { top: calc(82% + 1.2%); }
.door__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.25) 30%, rgba(255,255,255,.25) 70%, rgba(255,255,255,0)); opacity: .0; transition: opacity 1.2s; pointer-events: none; z-index: 2; box-shadow: 0 0 18px rgba(255,255,255,.25); }
.door__floor { position: absolute; left: -6%; right: -6%; bottom: -10px; height: 14px; background: radial-gradient(ellipse at 50% 100%, rgba(var(--ember-core),.95), rgba(var(--ember),.45) 40%, rgba(var(--ember),0) 72%); opacity: .7; transform: scaleX(.85); transform-origin: center; transition: transform 1.6s var(--ease); animation: underDoor 2.2s ease-in-out infinite; }

.door__locks { position: absolute; left: 12%; top: 22%; bottom: 10%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 2; }
.door__locks li { width: 20px; height: 26px; }
.door__locks svg { width: 100%; height: 100%; fill: #0a0a0b; stroke: rgba(229,229,229,.35); stroke-width: 1.2; transition: fill .8s, stroke .8s, filter .8s; }
.door__locks li.is-on svg { fill: var(--frio); stroke: var(--frio); filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }

/* estados por progreso */
.door[data-p="1"] .door__floor, .door[data-p="2"] .door__floor, .door[data-p="3"] .door__floor, .door[data-p="4"] .door__floor { opacity: .5; transform: scaleX(.5); }
.door[data-p="3"] .door__floor, .door[data-p="4"] .door__floor { opacity: .8; transform: scaleX(.8); }
.door[data-p="4"] .door__seam { opacity: .7; }
.door.is-open .door__seam { opacity: 0; }
.door.is-open .door__floor { opacity: 1; transform: scaleX(1.1); }
.door.is-open .door__leaf--l { transform: rotateY(-108deg); }
.door.is-open .door__leaf--r { transform: rotateY(108deg); }
.door.is-open .door__beyond img { opacity: 1; transform: scale(1); }
.door.is-open .door__light { opacity: .55; }
.door.is-open .door__locks li svg { fill: var(--negro); stroke: var(--negro); filter: none; }

/* ─── llaves ─── */
.keys { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.key { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 86px; transition: transform .6s var(--ease); }
.key__icon { width: 26px; height: 78px; fill: none; stroke: rgba(229,229,229,.32); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .8s, filter .8s, transform .8s var(--ease); }
.key__n { font-family: var(--cinzel); font-size: 11px; letter-spacing: .3em; color: var(--humo); }
.key__name { font-family: var(--oswald); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(229,229,229,.45); }
.key--on .key__icon { stroke: var(--frio); filter: drop-shadow(0 0 10px rgba(255,255,255,.55)); transform: translateY(-6px); }
.key--on .key__n, .key--on .key__name { color: var(--frio); }
.key--live .key__name::after { content: " ·"; color: var(--frio); }

/* ─── panel ─── */
.panel { max-width: 620px; margin: clamp(50px, 7vw, 90px) auto 0; padding: clamp(26px, 4vw, 44px); border: 1px solid rgba(229,229,229,.14); background: rgba(12,12,14,.7); backdrop-filter: blur(8px); position: relative; }
.panel::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(229,229,229,.05); pointer-events: none; }
.panel__view[hidden] { display: none; }
.panel__title { font-family: var(--oswald); font-weight: 500; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; letter-spacing: .02em; }
.panel__text { color: rgba(229,229,229,.65); margin-bottom: 22px; font-size: 18px; }
.panel__muted { color: var(--humo); font-style: italic; text-align: center; }
.panel__user { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--cinzel); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--humo); margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(229,229,229,.12); word-break: break-all; }
.panel__logout { font-family: var(--oswald); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--frio); opacity: .7; }
.panel__logout:hover { opacity: 1; }
.panel__play { display: inline-block; margin-top: 22px; font-family: var(--oswald); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid rgba(229,229,229,.5); padding-bottom: 4px; color: var(--frio); }

.pform { margin-top: 18px; }
.pform__label { display: block; font-family: var(--cinzel); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--humo); margin-bottom: 10px; }
.pform__row { display: flex; border-bottom: 1px solid rgba(229,229,229,.5); }
.pform__row input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--corm); font-size: 22px; padding: 12px 0; outline: none; color: var(--frio); letter-spacing: .04em; }
.pform__row input::placeholder { color: rgba(229,229,229,.35); }
.pform__row--code input { font-family: var(--cinzel); font-size: 30px; letter-spacing: .5em; }
.pform__btn { font-family: var(--oswald); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; padding: 12px 0 12px 20px; white-space: nowrap; color: var(--frio); }
.pform__btn:disabled { opacity: .4; cursor: wait; }
.pform__msg { margin-top: 10px; font-style: italic; font-size: 16px; color: var(--humo); min-height: 1.4em; }
.pform__msg.is-error { color: #d9a7a7; }
.pform__msg.is-ok { color: var(--frio); }

/* ─── cuenta: pestañas + formulario apilado (usuario + contraseña) ─── */
.pase { border: 1px solid rgba(140,122,91,.5); padding: 16px 18px; margin-bottom: 26px; }
.pase__eyebrow { display: block; font-family: var(--cinzel); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #8C7A5B; margin-bottom: 6px; }
.pase p { font-size: 18px; line-height: 1.35; color: var(--frio); }
.pase[hidden] { display: none; }
.pase__pasos { list-style: none; counter-reset: paso; margin: 12px 0 0; padding: 0; }
.pase__pasos li { counter-increment: paso; position: relative; padding-left: 34px; margin-bottom: 10px; font-size: 17px; line-height: 1.35; color: rgba(229,229,229,.8); }
.pase__pasos li:last-child { margin-bottom: 0; }
.pase__pasos li::before { content: counter(paso); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border: 1px solid #8C7A5B; font: 500 12px/20px var(--oswald); text-align: center; color: #8C7A5B; }
.pase__pasos b { font-family: var(--oswald); font-weight: 400; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--frio); }
.ptabs { display: flex; gap: 28px; border-bottom: 1px solid rgba(229,229,229,.14); margin-top: 6px; }
.ptabs__tab { font-family: var(--oswald); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--humo); min-height: 44px; padding: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .3s; }
.ptabs__tab:hover { color: var(--frio); }
.ptabs__tab.is-on { color: var(--frio); border-bottom-color: var(--frio); }
.pform--stack { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.pform[hidden] { display: none; }
.pfield { display: block; }
.pfield .pform__label { margin-bottom: 2px; }
.pfield input { width: 100%; border: 0; border-bottom: 1px solid rgba(229,229,229,.45); border-radius: 0; background: transparent; font-family: var(--corm); font-size: 22px; padding: 8px 0 10px; outline: none; color: var(--frio); letter-spacing: .02em; transition: border-color .3s; }
.pfield input:focus { border-bottom-color: var(--frio); }
.pfield input::placeholder { color: rgba(229,229,229,.3); }
.pfield__pass { display: flex; align-items: stretch; }
.pfield__pass input { flex: 1; min-width: 0; }
.pfield__ver { font-family: var(--oswald); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--humo); padding: 0 0 0 14px; min-width: 44px; border-bottom: 1px solid rgba(229,229,229,.45); }
.pfield__ver:hover { color: var(--frio); }
.pconsent { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.35; color: rgba(229,229,229,.65); cursor: pointer; }
.pconsent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: #E5E5E5; }
.pform__submit { align-self: flex-start; min-height: 48px; padding: 0 34px; background: var(--frio); color: #0A0A0A; font-family: var(--oswald); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; transition: opacity .3s; }
.pform__submit:hover { opacity: .88; }
.pform__submit:disabled { opacity: .45; cursor: wait; }
.pform--stack .pform__msg { margin-top: -6px; }
.pform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pform__help { font-size: 15px; font-style: italic; color: var(--humo); }
.pform__help a { color: var(--frio); border-bottom: 1px solid rgba(229,229,229,.35); }
.panel__aviso { margin: 0 0 16px; }
.panel__aviso[hidden] { display: none; }

.klist { border-top: 1px solid rgba(229,229,229,.2); margin-bottom: 8px; }
.kl { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(229,229,229,.1); }
.kl__n { font-family: var(--cinzel); font-size: 13px; letter-spacing: .1em; color: var(--humo); }
.kl__name { font-family: var(--oswald); text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.kl__desc { display: block; font-family: var(--corm); font-style: italic; font-size: 15px; color: var(--humo); margin-top: 2px; }
.kl__code { font-family: var(--cinzel); font-size: 12px; letter-spacing: .16em; border: 1px solid rgba(229,229,229,.3); padding: 8px 12px; white-space: nowrap; color: rgba(229,229,229,.6); }
.kl--on .kl__n { color: var(--frio); }
.kl--on .kl__code { background: var(--frio); color: var(--negro); border-color: var(--frio); }
.kl--off { opacity: .5; }

/* ─── cómo funciona ─── */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 980px; margin: clamp(70px, 9vw, 120px) auto 0; padding-top: 40px; border-top: 1px solid rgba(229,229,229,.12); }
.how__n { font-family: var(--cinzel); font-size: 11px; letter-spacing: .3em; color: var(--humo); display: block; margin-bottom: 12px; }
.how h3 { font-family: var(--oswald); font-weight: 500; text-transform: uppercase; font-size: 22px; margin-bottom: 8px; }
.how p { font-size: 17px; color: rgba(229,229,229,.6); }

.porte__foot { margin-top: clamp(60px, 9vw, 120px); text-align: center; font-style: italic; color: var(--humo); font-size: 18px; }

@media (max-width: 760px) {
  .phero { padding: 96px 0 24px; }
  .phero__eyebrow { margin-bottom: 18px; }
  .phero__title { margin-bottom: 18px; }
  .phero__lettering { width: min(78vw, 400px); }
  .phero__lead br { display: none; }
  .stage__count { margin-bottom: 18px; }
  .stage__n { font-size: 56px; }
  .door { --w: min(50vw, 210px); }
  .stage__state { margin: 22px 0 28px; }
  .panel { margin-top: 34px; }
  /* el fuego se queda abajo y no tapa el contenido */
  .hellfire { height: 20vh; opacity: .75; }
  .porte { padding-bottom: 22vh; }
  .porte__foot { position: relative; }
  /* nav con fondo para que no se encime con el texto al bajar */
  .pnav { padding: 14px var(--gutter) 22px; background: linear-gradient(to bottom, #070708 55%, rgba(7,7,8,0)); }
  .pnav__back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 12px; opacity: .85; }
  .pnav__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .phero__eyebrow, .key__n, .pform__label, .how__n, .pase__eyebrow { font-size: 12px; }
  .pform__submit { align-self: stretch; }
  .door__locks li { width: 14px; height: 18px; }
  .keys { gap: 4px; flex-wrap: nowrap; }
  .key { width: 19%; }
  .key__icon { width: 20px; height: 60px; }
  .key__name { font-size: 12px; letter-spacing: .04em; }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .kl { grid-template-columns: 32px 1fr; }
  .kl__code { grid-column: 2; justify-self: start; }
}