/* Umbral cinematográfico de Astillas del Vacío. La portada y sus SVG no se modifican. */
.intro-gate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;color:#f8f5ff;background:#070711;height:100vh;height:100dvh;}
.intro-sky{position:absolute;inset:-4%;z-index:-4;background:linear-gradient(90deg,rgba(4,3,13,.97),rgba(8,6,20,.78) 55%,rgba(6,5,18,.91)),url('../assets/portal-ciudad-4k.webp') center center/cover no-repeat;filter:none;transform:scale(1.04);animation:introSkyDrift 15s ease-in-out infinite alternate;}
.intro-gate::before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(5,4,15,.32),transparent 22%,transparent 68%,rgba(5,4,15,.7)),radial-gradient(ellipse 48% 46% at 50% 40%,rgba(95,67,156,.19),transparent 100%);pointer-events:none}
.intro-gate::after{content:"";position:absolute;z-index:4;inset:26px;border:1px solid rgba(207,185,251,.10);pointer-events:none}
.intro-aura{position:absolute;inset:-25%;z-index:-3;pointer-events:none;background:radial-gradient(circle at 50% 46%,rgba(131,94,224,.16),transparent 24%),radial-gradient(circle at 51% 48%,rgba(94,66,171,.09),transparent 42%);animation:introAura 7.5s ease-in-out infinite alternate}
.intro-content{z-index:3;position:relative;width:min(92vw,960px);margin-inline:auto;display:flex;align-items:center;flex-direction:column;text-align:center;padding:clamp(12px,2vh,26px) 16px;max-height:calc(100dvh - 30px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;}
.intro-content::-webkit-scrollbar{display:none}
.intro-sigil{position:relative;width:clamp(80px,12vh,126px);height:clamp(80px,12vh,126px);margin:0 auto clamp(5px,1.4vh,16px);flex:none;display:grid;place-items:center;animation:introFloat 5.8s ease-in-out infinite;filter:drop-shadow(0 0 26px rgba(157,125,247,.22))}
.intro-orbit{position:absolute;border:1px solid rgba(202,183,255,.34);border-radius:50%;inset:12px;transform:rotate(-30deg) scaleX(.64);animation:introOrbit 13s linear infinite;box-shadow:0 0 13px rgba(150,122,225,.10),inset 0 0 11px rgba(150,122,225,.07)}
.intro-orbit--two{inset:26px;transform:rotate(45deg) scaleX(.85);border-color:rgba(212,196,255,.22);animation-direction:reverse;animation-duration:17s}
.intro-sigil-core{width:7px;height:clamp(48px,8.3vh,78px);border-radius:60%;background:linear-gradient(180deg,transparent 0%,#a786ff 18%,#fff 52%,#b394ff 82%,transparent 100%);box-shadow:0 0 9px 2px #e8d9ff,0 0 21px 5px #8c5df1,0 0 58px 17px rgba(147,94,248,.28);transform:rotate(8deg);animation:introCore 3.7s ease-in-out infinite}
.intro-sigil-shine{position:absolute;top:44%;left:30%;width:40%;height:1px;transform:rotate(-20deg);background:linear-gradient(90deg,transparent,#f9f4ff,transparent);box-shadow:0 0 10px #f0e7ff;animation:introCore 3.7s ease-in-out infinite}
.intro-eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 clamp(7px,1.35vh,14px);color:#d4c8ee;font:700 clamp(8px,.75vw,11px)/1.5 Arial,sans-serif;letter-spacing:.32em;animation:introRise .95s .1s both}
.intro-eyebrow span{width:28px;height:1px;background:linear-gradient(90deg,transparent,#bfa6f1)}.intro-eyebrow span:last-child{transform:rotate(180deg)}
.intro-heading{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(48px,min(7.2vw,10.4vh),112px);line-height:.92;letter-spacing:-.055em;margin:0;display:flex;flex-direction:column;align-items:center;text-shadow:0 10px 46px rgba(0,0,0,.7);animation:introRise 1.1s .15s both}
.intro-heading small{font:500 clamp(12px,1.5vw,18px)/1.15 Georgia,serif;letter-spacing:.46em;color:#d4c0ff;margin:clamp(5px,.95vh,10px) 0 clamp(3px,.6vh,6px);padding-left:.46em}
.intro-divider{display:flex;gap:19px;align-items:center;justify-content:center;width:min(315px,68%);margin:clamp(9px,1.8vh,21px) auto clamp(8px,1.45vh,15px);color:#bfa6f2;animation:introRise 1s .35s both}.intro-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(208,179,255,.55))}.intro-divider span:last-child{transform:rotate(180deg)}.intro-divider b{font-weight:400;font-size:19px}
.intro-lead{margin:0 0 clamp(13px,2.7vh,26px);color:#e2d9ef;letter-spacing:.05em;font:italic clamp(17px,1.45vw,23px)/1.4 Georgia,serif;animation:introRise 1s .45s both}
.intro-enter{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:38px;min-width:min(480px,86vw);padding:clamp(13px,1.85vh,20px) 25px;border:1px solid rgba(224,207,255,.66);border-radius:0;background:linear-gradient(110deg,rgba(86,54,145,.55),rgba(34,22,68,.76));backdrop-filter:blur(8px);color:#fff;font:700 11px/1.3 Arial,sans-serif;letter-spacing:.23em;cursor:pointer;overflow:hidden;box-shadow:0 0 28px rgba(122,78,207,.16),inset 0 0 30px rgba(180,155,255,.045);transition:transform .35s,box-shadow .35s,border-color .35s,background .35s;animation:introRise 1s .60s both,introButtonBreath 4.5s 1.6s ease-in-out infinite}
.intro-enter::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 22%,rgba(219,195,255,.18) 45%,transparent 66%);transform:translateX(-140%);animation:introButtonLight 5s 2s ease-in-out infinite}
.intro-enter:hover,.intro-enter:focus-visible{transform:translateY(-3px);border-color:#f2e5ff;box-shadow:0 12px 45px rgba(142,98,239,.38),inset 0 0 34px rgba(175,135,255,.12);outline-offset:5px}
.intro-enter:active{transform:translateY(0)}.intro-enter-symbol{color:#dfcaff;font-size:21px;font-weight:400;transition:transform .25s}.intro-enter:hover .intro-enter-symbol{transform:translate(3px,-3px)}
.intro-footnote{font:600 8px/1.5 Arial,sans-serif;letter-spacing:.26em;margin:clamp(12px,2vh,20px) 0 0;color:rgba(199,186,220,.64);animation:introRise 1s .8s both}
.intro-side-label,.intro-index{position:absolute;bottom:46px;color:rgba(216,199,242,.45);font:600 9px/1 Arial,sans-serif;letter-spacing:.25em}.intro-side-label{left:7%;writing-mode:vertical-rl;transform:rotate(180deg);bottom:auto;top:50%;translate:0 -50%}.intro-index{right:7%;}
.intro-motes{position:absolute;inset:0;pointer-events:none;z-index:-1}.intro-motes i{position:absolute;width:2px;height:2px;background:#d4c4ff;border-radius:50%;box-shadow:0 0 11px 3px rgba(167,130,255,.4);opacity:.55;animation:introMote var(--dur,11s) var(--delay,0s) ease-in-out infinite alternate}.intro-motes i:nth-child(1){top:18%;left:17%;--dur:11s;--delay:-4s}.intro-motes i:nth-child(2){top:65%;left:23%;--dur:15s;--delay:-7s}.intro-motes i:nth-child(3){top:28%;right:15%;--dur:13s;--delay:-2s}.intro-motes i:nth-child(4){top:71%;right:19%;--dur:10s;--delay:-6s}.intro-motes i:nth-child(5){top:82%;left:48%;--dur:16s;--delay:-8s}.intro-motes i:nth-child(6){top:13%;right:42%;--dur:12s;--delay:-3s}
.intro-opening-light{position:absolute;z-index:6;top:50%;left:50%;width:2px;height:2px;border-radius:50%;transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;background:radial-gradient(circle,#f4eaff 0%,rgba(203,165,255,.70) 20%,rgba(122,79,214,.33) 42%,transparent 73%)}
/* Al pulsar: destello y disolución; la portada existente queda debajo. */
.portal-body.intro-opening .intro-opening-light{animation:introBloom 1.65s ease-in-out both}
.portal-body.intro-opening .intro-content{animation:introExit 1.28s cubic-bezier(.18,.7,.32,1) both}
.portal-body.intro-opening .intro-gate{animation:introFade 2s cubic-bezier(.2,.4,.2,1) forwards}
.portal-body.intro-opening .intro-sky{animation:introSkyExit 2s cubic-bezier(.2,.4,.2,1) both}
.portal-body.intro-opening .portal-shell{animation:introReveal 1.8s .2s both}
.portal-body.has-intro:not(.intro-opening) .portal-shell{opacity:.01}
.portal-body.has-intro .intro-gate{pointer-events:auto}
@keyframes introSkyDrift{from{transform:scale(1.04) translateX(-1%)}to{transform:scale(1.095) translateX(1%)}}
@keyframes introAura{to{opacity:.55;transform:scale(1.2)}}
@keyframes introFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes introOrbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes introCore{0%,100%{opacity:.65;filter:brightness(.85)}50%{opacity:1;filter:brightness(1.25)}}
@keyframes introRise{from{opacity:0;translate:0 22px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes introButtonLight{0%,28%{transform:translateX(-140%)}57%,100%{transform:translateX(150%)}}
@keyframes introButtonBreath{0%,100%{box-shadow:0 0 25px rgba(122,78,207,.14)}50%{box-shadow:0 0 40px rgba(122,78,207,.28)}}
@keyframes introMote{0%{transform:translateY(12px) scale(.5);opacity:.12}100%{transform:translateY(-25px) scale(1.5);opacity:.68}}
@keyframes introBloom{0%{width:2px;height:2px;opacity:0}20%{opacity:.9}65%{width:110vmax;height:110vmax;opacity:.4}100%{width:185vmax;height:185vmax;opacity:0}}
@keyframes introExit{0%{opacity:1;transform:scale(1);filter:blur(0)}50%{opacity:.7;transform:scale(1.035)}100%{opacity:0;transform:scale(1.12);filter:blur(14px)}}
@keyframes introFade{0%,24%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes introSkyExit{from{transform:scale(1.04);opacity:1}to{transform:scale(1.25);opacity:.25}}
@keyframes introReveal{0%{opacity:.25;filter:blur(8px);transform:scale(1.02)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@media(max-width:640px){.intro-gate::after{inset:13px}.intro-content{padding:clamp(12px,2vh,22px) 16px;max-height:calc(100dvh - 20px)}.intro-sigil{width:clamp(75px,11vh,100px);height:clamp(75px,11vh,100px);margin-bottom:clamp(6px,1.4vh,15px)}.intro-sigil-core{height:clamp(45px,8vh,68px)}.intro-orbit{inset:7px}.intro-orbit--two{inset:16px}.intro-heading{font-size:clamp(43px,min(15.6vw,10.4vh),90px)}.intro-eyebrow{letter-spacing:.16em;font-size:8px;gap:8px}.intro-eyebrow span{width:13px}.intro-divider{margin:clamp(9px,1.8vh,20px) auto clamp(7px,1.5vh,15px)}.intro-lead{margin-bottom:clamp(11px,2.4vh,23px)}.intro-enter{min-width:0;width:min(390px,96%);gap:10px;padding:19px 18px;font-size:10px;letter-spacing:.13em}.intro-footnote{letter-spacing:.15em;font-size:7px}.intro-side-label{left:25px;font-size:7px;opacity:.55}.intro-index{right:25px;bottom:26px}.intro-gate{overflow:hidden}}
@media(max-height:690px){.intro-sigil{width:96px;height:96px;margin-bottom:4px}.intro-sigil-core{height:62px}.intro-eyebrow{margin-bottom:13px}.intro-heading{font-size:clamp(43px,min(7.2vw,9.6vh),90px)}.intro-divider{margin:14px auto}.intro-lead{margin-bottom:19px}.intro-footnote{margin-top:15px}}
@media(max-width:640px) and (max-height:690px){.intro-heading{font-size:clamp(40px,min(15vw,9.7vh),66px)}.intro-eyebrow{margin-bottom:9px}.intro-sigil{margin-bottom:6px}.intro-lead{margin-bottom:12px}.intro-enter{padding:14px 13px}.intro-footnote{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.intro-gate *, .intro-gate::before,.intro-gate::after{animation:none!important}.portal-body.intro-opening .intro-gate{animation:introFade .6s ease forwards}.portal-body.intro-opening .portal-shell{animation:none;opacity:1}}
/* El atributo hidden debe imponerse sobre el display:grid de la pantalla inicial. */
.intro-gate[hidden]{display:none!important}

/* Volver desde En construcción muestra la portada sin el umbral inicial. */
html.return-to-portada .intro-gate{display:none!important}
html.return-to-portada .portal-body.has-intro .portal-shell{opacity:1}

@media(max-width:1200px), (min-resolution:2dppx){
  .intro-sky{background-image:linear-gradient(90deg,rgba(4,3,13,.97),rgba(8,6,20,.78) 55%,rgba(6,5,18,.91)),url('../assets/portal-ciudad-6k.webp')}
}