.intro{--nom-w:760px;--nom-m:30px;display:none;position:fixed;inset:0;z-index:100;background:#fff;align-items:center;justify-content:center;animation:intro-salida .7s ease 3.3s forwards}
.intro-on .intro{display:flex}
.intro-on body{overflow:hidden}
.intro-logo{display:flex;align-items:center}
.intro-icono{position:relative;height:230px;aspect-ratio:320/455;animation:intro-pulso .35s ease 1s both}
.intro-icono img{position:absolute;inset:0;width:100%;height:100%}
.intro-icono .p-arriba{animation:intro-arriba 1s cubic-bezier(.2,.8,.2,1) both}
.intro-icono .p-abajo{animation:intro-abajo 1s cubic-bezier(.2,.8,.2,1) both}
.intro-nombre{display:block;overflow:hidden;white-space:nowrap;padding:.08em 0;font-size:124px;line-height:1.15;font-weight:700;letter-spacing:-3px;color:#0D0F0E;max-width:0;opacity:0;animation:intro-nombre .9s cubic-bezier(.2,.8,.2,1) 1.4s forwards}
@keyframes intro-arriba{from{transform:translateY(-160px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes intro-abajo{from{transform:translateY(160px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes intro-pulso{50%{transform:scale(1.07)}}
@keyframes intro-nombre{from{max-width:0;opacity:0;margin-left:0;transform:translateX(-24px)}to{max-width:var(--nom-w);opacity:1;margin-left:var(--nom-m);transform:none}}
@keyframes intro-salida{to{opacity:0;visibility:hidden}}
@media (max-width:900px){.intro{--nom-w:560px;--nom-m:22px}.intro-icono{height:170px}.intro-nombre{font-size:90px;letter-spacing:-2px}}
@media (max-width:640px){.intro{--nom-w:300px;--nom-m:12px}.intro-icono{height:120px}.intro-nombre{font-size:50px;letter-spacing:-1px}}
@media (prefers-reduced-motion: reduce){.intro{display:none!important}}