:root{--color1: rgba(255, 255, 255, .95);--color2: rgba(255, 244, 214, .95);--back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);--p-logo1: rgba(255, 255, 255, .9);--p-logo2: rgba(255, 244, 214, .9);--p-logofront: url(/fotos/logos/pez.png);--a-logo1: rgba(255, 255, 255, .9);--a-logo2: rgba(255, 244, 214, .9);--a-logofront: url(/fotos/logos/a.png);--b-logo1: rgba(255, 255, 255, .9);--b-logo2: rgba(255, 244, 214, .9);--b-logofront: url(/fotos/logos/b.png);--l-logo1: rgba(255, 255, 255, .9);--l-logo2: rgba(255, 244, 214, .9);--l-logofront: url(/fotos/logos/l.png);--o-logo1: rgba(255, 255, 255, .9);--o-logo2: rgba(255, 244, 214, .9);--o-logofront: url(/fotos/logos/o-complete.png)}.portada .sub-titulo{display:flex;align-items:center;justify-content:space-between;margin:-10px 10px}.sub-titulo p{letter-spacing:-1px;font-weight:700;font-size:1.6em}.card{position:relative;display:block;flex:0 0 auto;overflow:hidden;z-index:10;touch-action:pan-y;border-radius:5%/3.5%;box-shadow:-5px -5px 5px -5px var(--color1),5px 5px 5px -5px var(--color2),-7px -7px 10px -5px transparent,7px 7px 10px -5px transparent,0 0 5px #fff0,0 55px 35px -20px #00000080;transition:transform .5s ease,box-shadow .2s ease;will-change:transform,filter;background-color:#040712;background-image:var(--front);background-size:cover;background-repeat:no-repeat;background-position:50% 50%;transform-origin:center}.cards .card:nth-child(2){margin-left:-7vw}.cards .card:nth-child(3){margin-left:-8vw}.cards .card:nth-child(4){margin-left:-8vw}.cards .card:nth-child(5){margin-left:-8vw}@media screen and (min-width:10px){.card{width:clamp(12.9vw,61vh,18vw);height:clamp(18vw,85vh,25.2vw)}}.card:hover{box-shadow:-20px -20px 30px -25px var(--color1),20px 20px 30px -25px var(--color2),-7px -7px 10px -5px var(--color1),7px 7px 10px -5px var(--color2),0 0 13px 4px #ffffff4d,0 55px 35px -20px #00000080}.card.p-logo{--color1: var(--p-logo1);--color2: var(--p-logo2);--front: url(/fotos/logos/pez.png);background-image:var(--front);background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:url(/fotos/logos/pez.png);mask-image:url(/fotos/logos/pez.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.card.a-logo{--color1: var(--a-logo1);--color2: var(--a-logo2);--front: url(/fotos/logos/a.png);background-image:var(--front);background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:url(/fotos/logos/a.png);mask-image:url(/fotos/logos/a.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.card.b-logo{--color1: var(--b-logo1);--color2: var(--b-logo2);--front: url(/fotos/logos/b.png);background-image:var(--front);background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:url(/fotos/logos/b.png);mask-image:url(/fotos/logos/b.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.card.l-logo{--color1: var(--l-logo1);--color2: var(--l-logo2);--front: url(/fotos/logos/l.png);background-image:var(--front);background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:url(/fotos/logos/l.png);mask-image:url(/fotos/logos/l.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;z-index:99}.card.o-logo{--color1: var(--o-logo1);--color2: var(--o-logo2);--front: url(/fotos/logos/o-complete.png);background-image:var(--front);background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-mask-image:url(/fotos/logos/o-complete.png);mask-image:url(/fotos/logos/o-complete.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.card:before,.card:after{content:"";position:absolute;inset:0;background-repeat:no-repeat;opacity:.5;mix-blend-mode:color-dodge;transition:all .33s ease}.card:before{background-position:50% 50%;background-size:300% 300%;background-image:linear-gradient(115deg,transparent 0%,var(--color1) 25%,transparent 47%,transparent 53%,var(--color2) 75%,transparent 100%);opacity:.5;filter:brightness(.5) contrast(1);z-index:1}.card:after{background-image:url(/fotos/logos/sparkles.webp),url(/fotos/logos/holo.webp),linear-gradient(125deg,#fff0 10%,#ffffff40,#fff4d659,#ffffff40,#fff0 90%);background-position:50% 50%;background-size:160%;background-blend-mode:overlay;z-index:2;filter:brightness(1) contrast(1);transition:all .33s ease;mix-blend-mode:color-dodge;opacity:.32}.card.active:after,.card:hover:after{filter:brightness(1) contrast(1);opacity:.55}.card.active,.card:hover{-webkit-animation:none;animation:none;transition:box-shadow .1s ease-out}.card.active:before,.card:hover:before{-webkit-animation:none;animation:none;background-image:linear-gradient(110deg,transparent 25%,var(--color1) 48%,var(--color2) 52%,transparent 75%);background-position:50% 50%;background-size:250% 250%;opacity:.88;filter:brightness(.66) contrast(1.33);transition:none}.card.active:before,.card:hover:before,.card.active:after,.card:hover:after{-webkit-animation:none;animation:none;transition:none}.card.animated{transition:none;-webkit-animation:holoCard 12s ease 0s 1;animation:holoCard 12s ease 0s 1}.card.animated:before{transition:none;-webkit-animation:holoGradient 12s ease 0s 1;animation:holoGradient 12s ease 0s 1}.card.animated:after{transition:none;-webkit-animation:holoSparkle 12s ease 0s 1;animation:holoSparkle 12s ease 0s 1}@-webkit-keyframes holoSparkle{0%,to{opacity:.75;background-position:50% 50%;filter:brightness(1.2) contrast(1.25)}5%,8%{opacity:1;background-position:40% 40%;filter:brightness(.8) contrast(1.2)}13%,16%{opacity:.5;background-position:50% 50%;filter:brightness(1.2) contrast(.8)}35%,38%{opacity:1;background-position:60% 60%;filter:brightness(1) contrast(1)}55%{opacity:.33;background-position:45% 45%;filter:brightness(1.2) contrast(1.25)}}@keyframes holoSparkle{0%,to{opacity:.35}5%,8%{opacity:.55}13%,16%{opacity:.25}35%,38%{opacity:.5}55%{opacity:.18}}@keyframes holoGradient{0%,to{opacity:.25}5%,9%{opacity:.55}13%,17%{opacity:.4}35%,39%{opacity:.45}55%{opacity:.55}}@keyframes holoGradient{0%,to{opacity:.5;background-position:50% 50%;filter:brightness(.5) contrast(1)}5%,9%{background-position:100% 100%;opacity:1;filter:brightness(.75) contrast(1.25)}13%,17%{background-position:0% 0%;opacity:.88}35%,39%{background-position:100% 100%;opacity:1;filter:brightness(.5) contrast(1)}55%{background-position:0% 0%;opacity:1;filter:brightness(.75) contrast(1.25)}}@-webkit-keyframes holoCard{0%,to{transform:rotate(0) rotateX(0) rotateY(0)}5%,8%{transform:rotate(0) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotate(0) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg)}}@keyframes holoCard{0%,to{transform:rotate(0) rotateX(0) rotateY(0)}5%,8%{transform:rotate(0) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotate(0) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg)}}.card.eevee:hover{box-shadow:0 0 30px -5px #fff,0 0 10px -2px #fff,0 55px 35px -20px #00000080}.card.eevee:hover:before,.card.eevee.active:before{background-image:linear-gradient(115deg,transparent 20%,var(--color1) 36%,var(--color2) 43%,var(--color3) 50%,var(--color4) 57%,var(--color5) 64%,transparent 80%)}.demo .card{background-image:var(--back);font-size:2vh}.demo .card>span{position:relative;top:45%}.demo .card:nth-of-type(1),.demo .card:nth-of-type(2),.demo .card:nth-of-type(3){width:20vh;height:27.5vh;box-shadow:inset 0 0 0 1px #fff6,0 25px 15px -10px #00000080;-webkit-animation:none;animation:none}.demo .card:nth-of-type(1):before,.demo .card:nth-of-type(1):after,.demo .card:nth-of-type(2):before,.demo .card:nth-of-type(2):after,.demo .card:nth-of-type(3):before,.demo .card:nth-of-type(3):after{-webkit-animation:none;animation:none}.demo .card:nth-of-type(1):before,.demo .card:nth-of-type(1):after{display:none}.demo .card:nth-of-type(2){background:none}.demo .card:nth-of-type(2):before{display:none}.demo .card:nth-of-type(3){background:none}.demo .card:nth-of-type(3):after{display:none}.operator{display:inline-block;vertical-align:middle;font-size:6vh}h1{display:block;margin:30px 0}p{margin-top:5px;font-weight:200}#app{position:relative}.demo,.cards{display:flex;align-items:center;justify-content:center;perspective:2000px;position:relative;z-index:1;transform:translate3d(.1px,.1px,.1px);gap:.5vw}.demo{flex-direction:row;justify-content:center}.cards .card:nth-child(2),.cards .card:nth-child(2):before,.cards .card:nth-child(2):after{-webkit-animation-delay:.25s;animation-delay:.25s}.cards .card:nth-child(3),.cards .card:nth-child(3):before,.cards .card:nth-child(3):after{-webkit-animation-delay:.5s;animation-delay:.5s}.cards .card:nth-child(4),.cards .card:nth-child(4):before,.cards .card:nth-child(4):after{-webkit-animation-delay:.75s;animation-delay:.75s}p{margin:0;padding:0}.promo{margin-top:50px}.promo img{margin-top:10px;max-width:80%}p a{color:#0ff}@-webkit-keyframes rubberBand{0%{transform:scaleZ(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleZ(1)}}@keyframes rubberBand{0%{transform:scaleZ(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleZ(1)}}@media(max-width:768px){.portada{width:min(100%,32rem);margin-inline:auto}.cards{width:100%;gap:0}.card{width:clamp(3.35rem,18vw,5rem);height:auto;aspect-ratio:5 / 7}.cards .card:nth-child(n+2){margin-left:clamp(-2rem,-8vw,-1.25rem)}.portada .sub-titulo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;justify-content:initial;margin:-.25rem 0 0;gap:1rem}.sub-titulo p{font-size:clamp(.8rem,3vw,1rem);letter-spacing:0;white-space:nowrap}}@media(prefers-reduced-motion:reduce){.card.animated,.card.animated:before,.card.animated:after{animation:none}}