/* Las dos puertas, tal como se hicieron en el umbral de ernestoosuna.com (5 oct 2026):
   cada hoja gira sobre sus bisagras (las de fuera), tiene canto y dorso, y detrás se ve
   el mundo de su casa. En reposo están entornadas; al acercarse se abren y la página se
   inclina hacia esa casa; al entrar, la hoja se abre del todo, la luz inunda la pantalla
   y el enlace te lleva. Aquí además vuelan del vestíbulo a su sitio en el paisaje:
   el sitio de cada una lo escribe js/puertas.js en --px, --py y --escala. */

@property --abre { syntax: '<number>'; inherits: true; initial-value: 0; }

#umbral {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  --alto-puerta: 400px;
  overflow: clip;
  perspective: 1400px; perspective-origin: 50% 50%;
}
.umbral__luz { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }

/* ---------- las dos hojas de papel del vestíbulo: se abren por la línea ---------- */
.panel { position: absolute; top: 0; height: 100%; width: 50%; z-index: 1; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; }
.panel--izq { left: 0; transform-origin: 100% 50%; }
.panel--der { left: 50%; transform-origin: 0 50%; }
#umbral.vertical .panel { width: 100%; height: 50%; left: 0; }
#umbral.vertical .panel--izq { top: 0; transform-origin: 50% 100%; }
#umbral.vertical .panel--der { top: 50%; transform-origin: 50% 0; }
.panel__sombra { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(18, 20, 30, 0.6), rgba(18, 20, 30, 0.08)); }
.panel--der .panel__sombra { background: linear-gradient(270deg, rgba(18, 20, 30, 0.6), rgba(18, 20, 30, 0.08)); }
#umbral.vertical .panel--izq .panel__sombra { background: linear-gradient(180deg, rgba(18, 20, 30, 0.6), rgba(18, 20, 30, 0.08)); }
#umbral.vertical .panel--der .panel__sombra { background: linear-gradient(0deg, rgba(18, 20, 30, 0.6), rgba(18, 20, 30, 0.08)); }

/* ---------- el vestíbulo: la línea y el círculo «investigación», una copia en cada hoja ---------- */
.vestibulo { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.panel--der .vestibulo { left: -100%; }
#umbral.vertical .panel--der .vestibulo { left: 0; top: -100%; }
.vestibulo .linea { stroke: var(--tinta); stroke-opacity: 0.38; stroke-width: 1; transition: stroke-opacity .6s ease; }
.vestibulo .zona { fill: transparent; pointer-events: auto; cursor: pointer; }
.vestibulo .circulo { fill: var(--papel); stroke: var(--tinta); stroke-opacity: 0.72; stroke-width: 1.2; transition: stroke-opacity .5s ease; }
.vestibulo .aro { fill: none; stroke: var(--tinta); stroke-opacity: 0; stroke-width: 0.8; transition: stroke-opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); transform-box: fill-box; transform-origin: center; }
.vestibulo .campo-fondo { fill: var(--papel); opacity: 0; transition: opacity .5s ease .15s; }
.vestibulo .campo-texto { fill: var(--tinta); opacity: 0; font-family: var(--fuente-texto); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity .7s ease .15s; }
.vestibulo .palabra { fill: var(--tinta); font-family: var(--fuente-texto); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.vestibulo .boton { pointer-events: auto; cursor: pointer; outline: none; }
.vestibulo .boton:focus-visible .circulo { stroke-width: 2.4; }
.vestibulo.activo .linea { stroke-opacity: 0.9; }
.vestibulo.activo .circulo { stroke-opacity: 1; }
.vestibulo.activo .aro { stroke-opacity: 0.5; transform: scale(1.35); }
.vestibulo.activo .campo-fondo { opacity: 1; }
.vestibulo.activo .campo-texto { opacity: 0.85; }

/* ---------- cada puerta: un enlace que se coloca con su transformación ---------- */
.puerta {
  --abre: 0;
  --angulo: calc(7deg + var(--abre) * 101deg);
  --grosor: clamp(5px, 0.9vw, 9px);
  --marco: clamp(6px, 1vw, 11px);
  --casa: var(--enase);
  --casa-oscuro: var(--enase-oscuro);
  --casa-palido: var(--enase-palido);
  position: absolute; left: 0; top: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 22px;
  color: inherit; text-decoration: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transform: translate(var(--px, 0px), var(--py, 0px)) translate(-50%, -100%) scale(var(--escala, 1));
  will-change: transform;
}
.puerta--latarasca { --casa: var(--tarasca); --casa-oscuro: var(--tarasca-oscuro); --casa-palido: var(--tarasca-palido); }
html:not(.js) .puerta { transition: --abre 0.7s var(--curva); }
html:not(.js) .puerta:hover, html:not(.js) .puerta:focus-visible { --abre: 0.5; }

.puerta__hueco {
  position: relative; display: block;
  width: calc(var(--alto-puerta) / 2.05); max-width: none; aspect-ratio: 100 / 205;
  perspective: 1150px; justify-self: center;
}
/* El suelo: una línea bajo cada puerta que las sienta en el mismo umbral (solo en el vestíbulo). */
.puerta__hueco::after {
  content: ''; position: absolute; left: -42%; right: -42%; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(28 31 43 / 0.17) 30%, rgb(28 31 43 / 0.17) 70%, transparent);
  transition: opacity .8s ease;
}
body.escena .puerta__hueco::after, body.desplegando .puerta__hueco::after { opacity: 0; }
.puerta--enase .puerta__hueco { perspective-origin: 150% 46%; }
.puerta--latarasca .puerta__hueco { perspective-origin: -50% 46%; }

/* El marco y, dentro, el mundo de la casa. */
.puerta__marco {
  position: absolute; inset: 0; display: block; border-radius: 3px;
  background: linear-gradient(180deg, #F2F1EE, #D9DCE2);
  box-shadow: 0 0 0 1px rgba(28, 31, 43, 0.14), 0 1px 0 1px rgba(255, 255, 255, 0.7) inset, var(--sombra-puerta);
}
.puerta--latarasca .puerta__marco { border-radius: 50% 50% 3px 3px / 25% 25% 3px 3px; background: linear-gradient(180deg, #EBDCBD, #CDB083); }
.puerta:focus-visible .puerta__marco { box-shadow: 0 0 0 3px var(--papel), 0 0 0 6px var(--casa), var(--sombra-puerta); }
.puerta__mundo { position: absolute; inset: var(--marco) var(--marco) 0; display: block; overflow: hidden; border-radius: 1px; background: #1B3560; }
.puerta--latarasca .puerta__mundo { border-radius: 50% 50% 1px 1px / 24.4% 24.4% 1px 1px; background: #4A2E18; }
.puerta__jamba {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 10px 22px -6px rgba(8, 12, 24, 0.62), inset 12px 0 20px -10px rgba(8, 12, 24, 0.55), inset -12px 0 20px -10px rgba(8, 12, 24, 0.55);
  background: rgba(8, 12, 24, calc(0.34 - var(--abre) * 0.6));
}

/* El mundo de ENASE: la sala */
.sala { position: absolute; inset: -3% -6%; width: 112%; height: 106%; max-width: none; transform: translate3d(calc(var(--mx, 0) * -2.2%), calc(var(--my, 0) * -1.2%), 0) scale(calc(1 + var(--abre) * 0.04)); }
.sala__halo { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 42% at 50% 33%, rgba(234, 240, 249, 0.42), rgba(234, 240, 249, 0) 72%); }
.sala__emblema {
  position: absolute; left: 50%; top: 33%; width: 60%; aspect-ratio: 1; background: #F3F0EA;
  -webkit-mask: url('../marca/enase-logo-completo.svg') center / contain no-repeat; mask: url('../marca/enase-logo-completo.svg') center / contain no-repeat;
  transform: translate(-50%, -50%) translate3d(calc(var(--mx, 0) * -7%), calc(var(--my, 0) * -4%), 0) scale(calc(0.94 + var(--abre) * 0.12));
  filter: drop-shadow(0 0 14px rgba(234, 240, 249, 0.45));
}
.sala__regla {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7%; opacity: 0.5;
  background: repeating-linear-gradient(180deg, rgba(234, 240, 249, 0.9) 0 1px, transparent 1px 10%) 0 0 / 100% 100%, repeating-linear-gradient(180deg, rgba(234, 240, 249, 0.7) 0 1px, transparent 1px 2%) 0 0 / 50% 100% no-repeat;
}

/* El mundo de La Tarasca: el taller */
.taller__pared {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 40% at 50% 22%, rgba(255, 176, 96, 0.30), rgba(255, 176, 96, 0) 72%), repeating-linear-gradient(90deg, rgba(30, 14, 4, 0.42) 0 1.2%, rgba(30, 14, 4, 0) 1.2% 16.6%), linear-gradient(180deg, #5A3518 0%, #744722 46%, #5A3518 100%);
}
.taller__farol { position: absolute; left: 50%; top: -6%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 200, 130, 0.26), rgba(255, 200, 130, 0) 62%); mix-blend-mode: screen; }
.taller__dragon {
  position: absolute; left: 50%; top: 21%; width: 62%; aspect-ratio: 1; background: linear-gradient(180deg, #FFA45C, #F0782E);
  -webkit-mask: url('../marca/latarasca-logo-naranja.svg') center / contain no-repeat; mask: url('../marca/latarasca-logo-naranja.svg') center / contain no-repeat;
  transform: translate(-50%, -50%) translate3d(calc(var(--mx, 0) * -4%), calc(var(--my, 0) * -3%), 0);
  filter: drop-shadow(0 0 9px rgba(255, 140, 60, 0.55)) drop-shadow(0 2px 1px rgba(30, 14, 4, 0.7));
}
.taller__figura { position: absolute; width: 23%; height: auto; border-radius: 2px; box-shadow: 0 8px 14px -6px rgba(30, 14, 4, 0.75); }
.taller__figura--1 { left: 7%; bottom: 17%; transform: translate3d(calc(var(--mx, 0) * -9%), 0, 0) rotate(-3.5deg); }
.taller__figura--2 { right: 7%; bottom: 17%; transform: translate3d(calc(var(--mx, 0) * -9%), 0, 0) rotate(3.5deg); }
.taller__figura--3 { left: 50%; bottom: 22%; width: 19%; opacity: 0.92; transform: translateX(-50%) translate3d(calc(var(--mx, 0) * -6%), 0, 0); }
.taller__suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 19%; background: repeating-linear-gradient(90deg, rgba(30, 14, 4, 0.4) 0 1px, transparent 1px 12.5%), linear-gradient(180deg, #5E3A1C, #3A2210); box-shadow: 0 -10px 18px -6px rgba(30, 14, 4, 0.6); }
.taller__maga { position: absolute; left: 50%; bottom: 2.5%; width: auto; height: 50%; max-width: none; transform: translateX(-46%) translate3d(calc(var(--mx, 0) * -16%), 0, 0) scale(calc(0.96 + var(--abre) * 0.1)); transform-origin: 50% 100%; filter: drop-shadow(0 6px 8px rgba(30, 14, 4, 0.55)); }

/* La hoja */
.puerta__hoja { position: absolute; inset: var(--marco) var(--marco) 0; display: block; transform-style: preserve-3d; will-change: transform; }
.puerta--enase .puerta__hoja { transform-origin: 0 50%; transform: rotateY(calc(var(--angulo) * -1)); }
.puerta--latarasca .puerta__hoja { transform-origin: 100% 50%; transform: rotateY(var(--angulo)); }
.puerta__cara, .puerta__dorso { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 1px; }
.puerta__dorso { transform: rotateY(180deg); }
.puerta__canto { position: absolute; top: 0; bottom: 0; width: var(--grosor); display: block; }
.puerta--enase .puerta__canto { right: 0; transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #1A335D, #24437A); }
.puerta--latarasca .puerta__canto { top: 24.4%; left: 0; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, #6B4524, #54351A); }
.hoja__sombra { position: absolute; inset: 0; pointer-events: none; background: rgba(10, 12, 22, calc(var(--abre) * 0.34)); }

/* La hoja de ENASE: lacada en azul, dos cuarteles, pomo de latón. */
.puerta--enase .puerta__cara { background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.10)), linear-gradient(180deg, #2F5797, #274A84); }
.puerta--enase .puerta__dorso { background: linear-gradient(180deg, #24457A, #1C3763); }
.hoja__cuartel {
  position: absolute; left: 13%; right: 13%; display: block; border-radius: 2px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 2px 3px rgba(8, 16, 36, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.10), 0 1px 0 rgba(255, 255, 255, 0.10), 0 -1px 0 rgba(8, 16, 36, 0.35);
}
.hoja__cuartel--alto { top: 6.5%; height: 39%; }
.hoja__cuartel--bajo { top: 51.5%; height: 42%; }
.hoja__emblema {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #A9C2EA, #7E9FD6);
  -webkit-mask: url('../marca/enase-emblema.svg') center / contain no-repeat; mask: url('../marca/enase-emblema.svg') center / contain no-repeat; opacity: 0.9;
}
.hoja__pomo { position: absolute; right: 4.5%; top: 48.4%; width: 7.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F6E6C2, #C9A876 46%, #7E6236 100%); box-shadow: 0 2px 4px rgba(8, 16, 36, 0.6); }

/* La hoja de La Tarasca: tablones, herrajes de forja, aldaba y el dragón. */
.puerta--latarasca .puerta__hoja .puerta__cara, .puerta--latarasca .puerta__hoja .puerta__dorso { border-radius: 50% 50% 1px 1px / 24.4% 24.4% 1px 1px; }
.puerta--latarasca .puerta__cara {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0)), repeating-linear-gradient(90deg, rgba(50, 26, 10, 0.5) 0 1.4%, rgba(50, 26, 10, 0) 1.4% 20%), repeating-linear-gradient(180deg, rgba(255, 220, 170, 0.05) 0 2px, rgba(0, 0, 0, 0.04) 2px 7px), linear-gradient(180deg, #A9713C, #8E5B2D 60%, #7B4D25);
}
.puerta--latarasca .puerta__dorso { background: repeating-linear-gradient(90deg, rgba(50, 26, 10, 0.5) 0 1.4%, rgba(50, 26, 10, 0) 1.4% 20%), linear-gradient(180deg, #7B4D25, #633C1B); }
.hoja__dragon {
  position: absolute; left: 50%; top: 30%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); background: linear-gradient(180deg, #F59A54, #E07A3A);
  -webkit-mask: url('../marca/latarasca-logo-naranja.svg') center / contain no-repeat; mask: url('../marca/latarasca-logo-naranja.svg') center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(60, 30, 10, 0.5));
}
.hoja__herraje {
  position: absolute; right: 0; width: 74%; height: 3.1%; display: block;
  background: radial-gradient(circle at 14% 50%, #8C857B 0 1.6px, transparent 2.2px), radial-gradient(circle at 48% 50%, #8C857B 0 1.6px, transparent 2.2px), radial-gradient(circle at 84% 50%, #8C857B 0 1.6px, transparent 2.2px), linear-gradient(180deg, #453F39, #26221F);
  clip-path: polygon(0 50%, 5% 0, 100% 0, 100% 100%, 5% 100%); box-shadow: 0 2px 3px rgba(20, 10, 4, 0.6);
}
.hoja__herraje--alto { top: 50%; }
.hoja__herraje--bajo { top: 84%; }
.hoja__aldaba { position: absolute; left: 7%; top: 61%; width: 11%; aspect-ratio: 1; border-radius: 50%; border: clamp(2px, 0.34vw, 4px) solid #3A342E; box-shadow: 0 2px 3px rgba(20, 10, 4, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2); }

/* La luz que sale por la puerta y cae al suelo. */
.puerta__derrame {
  position: absolute; left: -30%; right: -30%; top: 99.4%; height: clamp(28px, 6svh, 60px); display: block; pointer-events: none;
  opacity: calc(0.16 + var(--abre) * 1.5); background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--casa), transparent 72%);
  filter: blur(7px); transform: scaleX(calc(0.5 + var(--abre) * 0.9)); mix-blend-mode: multiply;
}
body.escena .puerta__derrame { mix-blend-mode: screen; opacity: calc(0.1 + var(--abre) * 1.2); }

/* ---------- El rótulo (solo en el vestíbulo) ---------- */
.puerta__rotulo { display: grid; gap: 6px; min-width: 0; transition: opacity .6s ease; }
.puerta__tipo { font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.puerta__tipo::before { content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.7em; border-radius: 1px; background: var(--casa-oscuro); }
.puerta__casa { font-family: var(--fuente-titulo); font-weight: 500; font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.puerta__verbo { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 600; font-size: var(--t-menor); color: var(--tinta); text-decoration: underline; text-decoration-color: var(--casa-oscuro); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.puerta__flecha { width: 22px; height: 10px; flex: none; background: var(--casa-oscuro); clip-path: polygon(0 40%, 72% 40%, 72% 0, 100% 50%, 72% 100%, 72% 60%, 0 60%); transform: translateX(calc(var(--abre) * 10px)); }
.puerta:hover .puerta__verbo, .puerta:focus-visible .puerta__verbo { text-decoration-thickness: 3px; }
/* En escritorio el rótulo flanquea a su puerta, por fuera. */
.puerta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.puerta--enase .puerta__rotulo { order: -1; text-align: right; justify-items: end; }
.puerta--latarasca { grid-template-columns: auto minmax(0, 1fr); }
.puerta__rotulo { padding-bottom: 8%; }
#umbral.vertical .puerta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
#umbral.vertical .puerta__rotulo { justify-items: center; padding-bottom: 0; text-align: center; order: 0; }
#umbral.vertical .puerta__tipo { color: var(--tinta); }
#umbral.vertical .puerta__derrame { height: 12px; left: -8%; right: -8%; filter: blur(4px); }
#umbral.vertical .puerta__flecha { display: none; }
body.escena .puerta__rotulo, body.desplegando .puerta__rotulo { opacity: 0; pointer-events: none; }

/* La riada: la luz de la casa inunda la pantalla al entrar. */
.riada { position: fixed; inset: 0; z-index: 300; pointer-events: none; background: radial-gradient(circle at var(--x) var(--y), #FFFFFF 0%, var(--enase-palido) 38%, #C9D8F0 100%); }
.riada--latarasca { background: radial-gradient(circle at var(--x) var(--y), #FFFFFF 0%, var(--tarasca-palido) 38%, #F6CFA9 100%); }

@media (prefers-reduced-motion: reduce) {
  .vestibulo .aro { transition: stroke-opacity .6s ease; }
}

/* En el paisaje, la puerta de La Tarasca va embebida en la piedra de la torre: sin el marco claro de la portada (Ernesto, 8 oct) */
body.escena .puerta--latarasca .puerta__marco, body.desplegando .puerta--latarasca .puerta__marco { background: transparent; box-shadow: none; }

/* ---------- al bajar por la portada, las puertas se pliegan sobre sí mismas y desaparecen (--pliegue de 0 a 1) ---------- */
#umbral { perspective: 1400px; }
.puerta__hueco, .puerta__rotulo { transform-origin: 50% 100%; }
#umbral:not(.plegado) .puerta__hueco { transform: rotateX(calc(var(--pliegue, 0) * 88deg)) scaleY(calc(1 - var(--pliegue, 0) * 0.35)); }
#umbral:not(.plegado) .puerta__rotulo { opacity: calc(1 - var(--pliegue, 0) * 2); }
#umbral:not(.plegado) .puerta { opacity: calc(1.15 - var(--pliegue, 0) * 1.15); }
#umbral:not(.plegado) .panel { opacity: calc(1 - var(--pliegue, 0) * 1.3); }
#umbral.plegando, #umbral.plegando * { pointer-events: none !important; }
#umbral.plegado { visibility: hidden; }