.main-container{width:100%;display:flex;flex-direction:column;min-height:100vh;padding:0;margin:0;overflow-x:hidden}.header{height:15vh;background-color:black;display:flex;align-items:center;justify-content:center}.header,.header h1{width:100%;text-align:center}.header h1{color:white;margin:0;font-size:2.5rem;padding:0 1rem}.video-section{width:100%;height:100vh;position:relative}.background-video{width:100%;height:100%;object-fit:cover}.content-section{width:100%;min-height:100vh;position:relative}.accordion-container{position:relative;width:100%;height:100vh;display:flex;overflow:hidden}.video-container{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:0}.accordion-section{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;overflow:hidden;height:85vh;transition:flex .5s cubic-bezier(.4,0,.2,1);cursor:pointer;background-color:rgba(0,0,0,.5);width:100%}.accordion-section:hover{flex:3}.section-title{position:absolute;left:5%;top:0;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;z-index:1;color:white;font-size:2rem;pointer-events:none;text-align:center;width:auto;padding:1rem;display:flex;justify-content:center;align-items:center;min-width:min-content;transition:transform .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1)}.section-title-sobreelproyecto{transform-origin:50% 0}.section-title-podcast{transform-origin:65%}.section-title-blog-entremitosyverdades{transform-origin:40% -50%;left:0}.section-title-cómic-elúltimoconjuro{transform-origin:38% 10%;left:0}.section-title-videojuego-brujiaventuras{transform-origin:40% -50%;left:0}.accordion-section:hover .section-title{top:15%;transform:translate(-50%,-50%) rotate(0deg)}.section-content{position:absolute;top:50%;left:50%;width:80%;max-width:500px;text-align:center;padding:2rem;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(0,0,0,.7);border-radius:8px;z-index:10;pointer-events:none;will-change:opacity,transform}.section-button{margin:1.5rem auto 0;padding:.8rem 2rem;min-width:150px;background:black;border:none;border-radius:30px;font-weight:700;cursor:pointer;transition:all .3s ease;z-index:11}.accordion-section img{z-index:1!important}.section-button-wrapper{text-decoration:none;z-index:20;pointer-events:auto}.section-content{pointer-events:all!important;z-index:20}@media (max-width:768px){.main-container{min-height:100vh;height:auto;overflow-y:auto}.accordion-container{position:relative;flex-direction:column;height:auto;min-height:100vh}.accordion-section{width:100%;min-height:10vh;height:auto}.accordion-section.active{min-height:70vh}.header h1{font-size:2rem}.section-title{text-align:center;width:auto;padding:1rem;font-size:1.5rem;left:50%!important}.accordion-section:hover .section-title,.section-title{transform:translate(-50%,-50%) rotate(0deg)!important}}@media (max-width:480px){.section-title{font-size:1.5rem}.section-content{font-size:.9rem}.section-button{padding:.6rem 1.5rem;min-width:120px}}.video-container{margin-bottom:2rem}.smoke-transition{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity 1s ease-in-out}.smoke-transition.active{opacity:.5}.smoke-transition.fadein{opacity:1;transition:opacity 1s ease-in}.smoke-transition.fadeout{opacity:0;transition:opacity 1s ease-out}