:root {
      --red-main--OK: #d90429;
      --red-main: #fd0025;
      --blue-bg: #04042b;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    a {
      text-decoration: none;
      color: inherit;
    }

    html {
    }

    body {
        font-family: 'Arial', sans-serif;
        color: #fff;
        overflow-x: hidden;
        /*scroll-behavior: smooth;*/
    }
    .main-container {
        margin: 0;
        padding: 0;
        height: 100vh;
        background-color: var(--blue-bg);
        scroll-snap-type: y mandatory; /* Habilita snapping vertical */
        -webkit-scroll-snap-type: y mandatory;      /* scroll-snap: prefijo + estándar para compatibilidad */
        overflow-y: auto;
        scroll-behavior: smooth; /* Transiciones suaves */
        -webkit-overflow-scrolling: touch; /* momentum en iOS */
    }

    /* Logotipo flotante */
    .floating-logo {
        position: fixed;
        top: 30px;
        left: 30px;
        z-index: 1000;
        font-size: 24px;
        font-weight: bold;
        color: var(--red-main);
        text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
        transition: all 0.3s ease;
    }

    .floating-logo:hover {
        transform: scale(1.1);
        text-shadow: 0 0 30px var(--red-main);
    }
    /* Logotipo flotante */
    .floating-RRSS {
        position: fixed;
        top: calc(50vh - 2rem);
        right: 1.5rem;
        width: 3rem;
        z-index: 1000;
        transition: all 0.3s ease;
    }
    .floating-RRSS img{
        margin-bottom: 0.8rem;
    }

    .marquee-wrap-floating {
        display:none;
    }

    #btn-audio {
        position: absolute;
        top: calc(5vh + 2.5rem);
        left: 2rem;
          background: none;
          border: none;
          padding: 0;
          margin: 0;
  cursor: pointer;
  display: inline-block;
    }    
#btn-audio img {
  display: block;
  width: auto;
  height: auto;
}

    /* Contenedor principal */
    .main-container {
        position: relative;
    }

    /* Secciones */
    .section {
        height: 100vh;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 20px;
        overflow: hidden;

        scroll-snap-align: start; /* Cada sección encaja en el inicio del viewport */
        opacity: 0.6;
        transform: translateY(1rem);
        transform: scale(0.98);
        transition: all 0.8s ease;
    }

    .section.active {
        opacity: 1;
        transform: scale(1);
        transform: translateY(0);
    }

    /* Sección Hero INTRO*/
    .intro-section {
        background: radial-gradient(circle at center, #330000, #000);
    	background-image: url("imgs/bg-demo_video.jpg");
    	background-size: cover;
    	background-position-x: center;
        position: relative;
        overflow: hidden;
    }

    .intro-content {
        text-align: center;
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .intro-content > *:nth-child(1){
        max-width: 18vw;
    }
    .intro-content > *:nth-child(2){
        margin: -0rem auto 0.5rem;
        display: block;
        max-width: 6vw;
    }
    .intro-content > *:nth-child(3){    /*  El Descenso */
        display: block;
        max-width: 45vw;
        animation: pulse 3s ease-in-out infinite alternate;
    }
    .intro-content > *:nth-child(4){
        max-width: 25vw;
    }
    .intro-content > *:nth-child(5){    /*  Compra Entradas */
    	margin: 7rem auto;    
        width: 33vw;
    }
    .intro-content > *:nth-child(6){
        margin: 0.5rem auto;
        max-width: 10vw;
    }
    .intro-content > *:nth-child(7){
        margin: 0.5rem auto;
        max-width: 4vw;
    }


/*  ****************************************************************************************   */
    /* Sección del Portal */
    .portal-section {        
        position: relative;
    }

    .portal-content {
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .portal-content > * {
        display: block;
        margin: 0 auto;
    }
    .portal-content > *:nth-child(1){   /*  logo    */
        display: none;
    }
    .portal-content > *:nth-child(2){   /*  únete    */
    }
    .portal-content > *:nth-child(3){   /*  arco (out)  */
        /*margin: -107% auto 0rem;
        display: block;*/
        display: none;
    }
    .portal-content > *:nth-child(4){   /*  puerta  */
        /*margin: -107% auto 0rem;*/
        display: block;
    }

    .portal-title {
        font-size: clamp(2rem, 6vw, 4rem);
        color: #4488ff;
        margin-bottom: 40px;
        text-shadow: 0 0 30px rgba(68, 136, 255, 0.8);
    }

    .portal-text {
        max-width: 600px;
        font-size: 1.2rem;
        line-height: 1.8;
        color: #aaccff;
        margin-bottom: 40px;
    }



/*  ****************************************************************************************   */
    /* Sección de invocación DEMONS*/
    .demons-section {
        background: radial-gradient(circle at center, #330011, var(--blue-bg));
        position: relative;
        overflow: hidden;
    	text-align: center;
    }

    .demons-content {
    }

    .demons-title {
        font-size: clamp(2.5rem, 7vw, 5rem);
        max-width: 75vw;
    	max-height: 7vw;
        color: #ff4444;
        text-align: center;
        margin: initial auto;
        margin-bottom: 50px;
        text-shadow: 0 0 40px rgba(255, 68, 68, 0.8);
    }

    /* Grid de demonios */
    .demons-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        max-width: 75vw;
        margin: 0 auto;
        padding: 20px;
        justify-items: center;
    }

    /*.demons-grid > div:nth-child(6) { 
        grid-column: 3;
        grid-row: 2;
    }*/
    /* .demons-grid .centered-odd{
        transform: translateX(calc(50% + 15px));    /* centra manualmente la fila inferior de 4 elementos 
    }*/
    .demon-card-container.centered-odd{
        transform: translateX(calc(50% + 15px));   
        grid-row: 2;/*  fuerza la siguiente fila    */  
    }
    .demon-card-container.centered-odd.animate{
        transform: translateX(calc(50% + 15px));     
    }
/*  ***************     */

    .demon-card-container {
        perspective: 1000px;
        /*height: 200px;*/
        height: 275px;        
        aspect-ratio: 10 / 14;
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .demon-card-container.animate {
        opacity: 1;
        transform: translateY(0);
    }

    .demon-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }
    .demon-card-link {
        position: absolute;
        bottom: 0.2rem;
        left:0;
        width: 100%;
        height: 22%;
        text-align: center;
    }

    .demon-card-container:hover .demon-card-inner {
        transform: rotateY(180deg);
    }
    .demon-card,
    .demon-card-reverse {
        position: absolute;
        width: 100%;            
        height: 100%;
        max-height: 280px;
        backface-visibility: hidden;
        border-radius: 15px;
        /*padding: 20px;*/
        text-align: center;
        /*border: 2px solid var(--red-main);*/
        box-shadow: 0 10px 30px rgba(255, 68, 68, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: box-shadow 0.3s ease;
    }

    .demon-card {
        background: linear-gradient(145deg, #440011, #220008);
    }
    .demon-card-reverse {
        background: linear-gradient(145deg, #001144, #000822);
        transform: rotateY(180deg);
        border-color: #4444ff;
        box-shadow: 0 10px 30px rgba(68, 68, 255, 0.3);
    }

    .demon-card-container:hover .demon-card,
    .demon-card-container:hover .demon-card-reverse {
        box-shadow: 0 20px 50px rgba(255, 68, 68, 0.6);
    }


/*  ****************************************************************************************   */

    .aurora-table {
        display: grid;
        grid-template-columns: 1fr 0.6fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 20px;
        padding: 2rem;
        width: 100%;
        height: 100%;
        max-height--: 60vh;
        margin: 10vh auto 2vh;
        box-sizing: border-box;
    }
    .aurora-table > img:nth-child(1) {
        max-width: calc(26vw + 1rem);
        object-fit: cover;
        grid-column: 1;
        grid-row: 1;
        align-self: end;
    	justify-self: right;
    }

    .aurora-table > img:nth-child(2) {  /*  foto up */
        max-width: calc(38vh + 1rem);
        object-fit: cover;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: start;
    }

    .aurora-table > *:nth-child(3) {  /*  foto map */
            max-width: calc(38vh + 1rem);
        object-fit: cover;
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }
    .aurora-table > *:nth-child(3) img {
        width: 100%;       
    }

    .aurora-table > img:nth-child(4) {
        object-fit: cover;
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        justify-self: start;
        display:none;
    }

    .aurora-table > img:nth-child(5) {  /*  txt- Sala Aurora Alberto Alcocer   */
        max-height: calc(15vh + 1rem);
        object-fit: cover;
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        justify-self: start;
    }

    .aurora-table > a:nth-child(6) {
        max-height: calc(25vh + 1rem);
        object-fit: cover;
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        justify-self: right;
        width: 16vw;
    }
    .aurora-table > img:nth-child(7) {
        max-height: calc(1vh + 1rem);
        object-fit: cover;
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        display:none;
    }

    .footer-section {
        background: radial-gradient(circle at center,  var(--blue-bg), var(--blue-bg));
        min-height: 100vh;
    	padding: 20px 0 0;    		
    	justify-content: end;
    }

    .footer-bottom {
        width: 100%;
        height: 100%;
        background: var(--red-main);
    	padding: 1rem 2rem 1rem;
        display: grid;
        grid-template-columns: 0.5fr 1fr 0.5fr;
        grid-template-rows: 1fr;
        box-sizing: border-box;
    }
    .footer-bottom > div:nth-child(1) { /*  logos   */
        max-width: calc(30vw + 1rem);
        object-fit: cover;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    	justify-self: left;
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }
    .footer-bottom > div:nth-child(2) { /*  El Descenso    */
        max-width: calc(40vw + 1rem);
        object-fit: cover;
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    	justify-self: center;
    }
    .footer-bottom > div:nth-child(3) { /* none */
        max-width: calc(30vw + 1rem);
        object-fit: cover;
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    	justify-self: right;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

.footer-logoV{
    max-height:5vh; filter: brightness(0);
}
.footer-email{
    max-height:1rem; filter: brightness(0);
}    
.footer-VMusicReg{
    max-height:0.7rem; filter: brightness(66);
}
.footer-ElDescenso{
    max-width: calc(30vw + 1rem); filter: brightness(0);
}



    /* Animaciones */
    @keyframes pulse {
        0% { transform: scale(1); }
        100% { transform: scale(1.1); }
    }

    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(50px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes rotate {
        0% { transform: translateY(-50%) rotate(0deg); }
        100% { transform: translateY(-50%) rotate(360deg); }
    }


    /* Efectos de partículas */
    .particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .particle {
        position: absolute;
        background: var(--red-main);
        border-radius: 50%;
        opacity: 0.0;
        animation: float 6s infinite ease-in-out;
    }

    @keyframes float {
        100% { transform: translateY(0px) rotate(0deg); opacity: 0.0; }
        0% { transform: translateY(-10rem) rotate(180deg); opacity: 0.6; }
    }

    /* Responsive */
    /*  ver responsive.css  */
		
		/*	*************************************	*/


    /* Elemento giratorio */
    .rotating-element {
        display:initial;
        position: absolute;
        top: 22vh;
        right: 2rem;
        width: 200px;
        height: 200px;
            z-index: 98;
    }
    .rotating-element img {
        width: 200px;
        height: auto;
    }


/* caja contenedora que recorta */
.marquee-wrap { 
  position: absolute;
  bottom: 0rem;
  width: 100vw;
  height: 3rem;
  overflow: hidden;
  background-color:  var(--red-main);  
    z-index: 20;  
}
.marquee-wrap.pos-relative {
  position: relative;
    /*margin-top: 2rem;
    margin-bottom: -1rem;*/
    padding: 0rem 0 3rem;

    /*display:none;*/
}
.marquee-track {
  display: flex;
  align-items: center;
  /*width: max-content;          /* se ajusta al ancho total de sus hijos */
  will-change: transform;
  animation: marquee 8s linear infinite;
  margin-top: -0.4rem
}

.marquee-img {
  /* flex: 0 0 130vw;   /* evita que se reduzca o crezca
  width: 130vw;      para navegadores que usen width más que flex-basis
  height: auto; */ 
  flex: 0 0 130vw; 
  width: auto;   
  height: 4rem;
  display: block;    /* elimina gaps por inline elements */
  object-fit: cover; /* opcional si quieres recortar el svg */
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); } /* -50% del ancho del track ( = -100vw) */
}


/* Intro Section background video */
.intro-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; /* detrás del contenido */
}

.btn-compra {
  width: 200px;                 /* ajusta al tamaño del SVG */
  height: 60px;                 /* ajusta al tamaño del SVG */
  background: url("imgs/btn-COMPRA.svg") no-repeat center/contain;
  border: none;
  cursor: pointer;
  display: inline-block;
}

/* estado hover → cambia la imagen */
.btn-compra:hover {
  background-image: url("imgs/btn-COMPRA_rollover.svg");
}

/*  AUX */
.box-shadow {
    box-shadow: 0 20px 50px rgba(255, 68, 68, 0.6);
}
.bg-shadow {
    background: radial-gradient(circle at center, #330011, var(--blue-bg));
}
.pulse {
    animation: pulse 3s ease-in-out infinite alternate;
}

.fadeInUp {
    animation: fadeInUp 1s ease 0.5s forwards;
}