/* ======================================================
   MAIN SPACING INDEX
====================================================== */

main{

    padding-inline:100px;

    margin-top:5px;

    margin-bottom:55px;

}

/* ======================================================
   TICKER / FRANJA VERDE INDEX
====================================================== */

.cinta-index{

    position:relative;

    width:100%;

    height:40px;

    margin-top:150px;

    background:#76FF45;

    display:flex;

    align-items:center;

    overflow:hidden;

    z-index:5;

    box-shadow:

    0 4px 15px

    rgba(
        118,
        255,
        69,
        .2
    );

}

.ticker-wrap{

    width:100%;

    position:relative;

    display:flex;

    align-items:center;

}

.ticker-text-index{

    position:absolute;

    white-space:nowrap;

    font-size:18px;

    font-weight:900;

    letter-spacing:2px;

    color:#000;

    animation:

    tickerPausaCSS

    10s linear infinite;

}

@keyframes tickerPausaCSS{

    0%{

        transform:
        translateX(100vw);

    }

    40%{

        transform:
        translateX(
            calc(
                50vw - 50%
            )
        );

    }

    60%{

        transform:
        translateX(
            calc(
                50vw - 50%
            )
        );

    }

    100%{

        transform:
        translateX(-100%);

    }

}

/* ======================================================
   SUBTITLE HOME
====================================================== */

.site-subtitle{

    display:block;

    width:100%;

    max-width:1200px;

    margin:

    25px auto

    15px auto;

    padding-inline:20px;

    text-align:center;

    font-size:

    clamp(
        12px,
        2vw,
        15px
    );

    color:#76FF45;

    font-weight:bold;

    letter-spacing:1.5px;

    line-height:1.4;

}

/* ======================================================
   SLOGAN SECTION
====================================================== */

.slogan-section{

    max-width:800px;

    margin:auto;

    padding:

    15px
    20px
    20px;

    text-align:center;

}

.slogan-link{

    text-decoration:none;

}

.slogan-title{

    font-size:25px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:15px;
    color:#ffffff;

}

.slogan-link:hover
.slogan-title{

    color:#76FF45;

}

.slogan-text{

    max-width:420px;

    margin:auto;

    font-size:15px;

    color:#a0a0a0;

    line-height:1.4;

}

.slogan-description{

    max-width:420px;

    margin:

    15px auto 0;

    font-size:14px;

    line-height:1.6;

    text-align:justify;

    transition:.4s;

    overflow:hidden;

}

.hidden{

    opacity:0;

    max-height:0;

    margin-top:0;

}

/* ======================================================
   GIF SLOGAN
====================================================== */

.gif-container{

    display:flex;

    justify-content:center;

    padding-top:18px;

}

.slogan-gif{

    width:420px;

    max-width:100%;

    border-radius:8px;

    object-fit:contain;

}

/* ======================================================
   EVOLUTION SECTION
====================================================== */

.kubic-evolution-section{

    width:100%;

    max-width:760px;

    margin:

    50px auto 0;

}

.evolution-header-top{

    text-align:center;

    margin-bottom:35px;

}

.evolution-title{

    font-size:22px;

    font-weight:900;

    line-height:1.3;

}

.evolution-subtitle{

    font-size:15px;

    color:#a0a0a0;

}

.evolution-columns-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.evolution-visual{

    flex:0 0 45%;

}

.evolution-phone-img{

    width:320px;

    max-width:100%;

    animation:

    phoneFloat

    4s ease-in-out infinite;

}

.evolution-text-column{

    flex:0 0 50%;

}

.evolution-footer-text{

    font-size:19px;

    font-weight:900;

    line-height:1.5;

    text-align:right;

}

@keyframes phoneFloat{

    0%{

        transform:
        translateY(0)
        rotateY(-8deg);

    }

    50%{

        transform:
        translateY(-8px)
        rotateY(8deg);

    }

    100%{

        transform:
        translateY(0)
        rotateY(-8deg);

    }

}

/* ======================================================
   AUDIO SECTION
====================================================== */

.kubic-audio-visual-section{

    margin:

    60px auto;

    display:flex;

    justify-content:center;

}

.media-container-box{

    width:320px;

    overflow:hidden;

    border-radius:16px;

    background:#050505;

    padding-bottom:25px;

}

.interactive-gif-element{

    width:100%;

}

/* NUEVA REGLA: Sombra difuminada idéntica al color de los hilos de luz del Header */
.interactive-gif-element {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: drop-shadow(0 10px 10px rgba(0, 180, 130, 0.5)); /* Destello verde/cian de las cintas superiores */
}

/* FILA DE CONTROLES: Alínea horizontalmente ecualizador y volumen al ancho del GIF */
.audio-control-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 0 30px;
    margin-top: 15px;
}

/* DISPLAY DEL ECUALIZADOR */
.equalizer-display {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 40px;
}

.equalizer-display .bar {
    width: 6px;
    height: 4px;
    background-color: #76FF45;
    border-radius: 3px 3px 0 0;
    transition: height 0.2s ease;
    box-shadow: 0 0 8px rgba(118, 255, 69, 0.5);
}

.equalizer-display.playing .bar {
    animation: equalize 1.2s ease-in-out infinite alternate;
}

/* Tiempos desfasados de frecuencias */
.equalizer-display.playing .bar:nth-child(1) { animation-delay: 0.1s; animation-duration: 0.8s; }
.equalizer-display.playing .bar:nth-child(2) { animation-delay: 0.4s; animation-duration: 1.2s; }
.equalizer-display.playing .bar:nth-child(3) { animation-delay: 0.2s; animation-duration: 0.9s; }
.equalizer-display.playing .bar:nth-child(4) { animation-delay: 0.6s; animation-duration: 1.1s; }
.equalizer-display.playing .bar:nth-child(5) { animation-delay: 0.3s; animation-duration: 1.0s; }
.equalizer-display.playing .bar:nth-child(6) { animation-delay: 0.7s; animation-duration: 0.7s; }
.equalizer-display.playing .bar:nth-child(7) { animation-delay: 0.5s; animation-duration: 1.3s; }

@keyframes equalize {
    0% { height: 6px; }
    100% { height: 38px; }
}

/* BOTÓN DE VOLUMEN ESTILIZADO */
.volume-mute-btn {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(118, 255, 69, 0.4);
    color: #76FF45;
    font-size: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(118, 255, 69, 0.2);
    transition: all 0.2s ease-in-out;
    z-index: 6;
}

.volume-mute-btn:hover {
    background: #76FF45;
    color: #000000;
    box-shadow: 0 0 12px rgba(118, 255, 69, 0.6);
    transform: scale(1.05);
}

/* ======================================================
   RESPONSIVE HOME
====================================================== */

@media(max-width:956px){

main{

padding-inline:40px;

}

.cinta-index{

margin-top:85px;

height:35px;

}

.ticker-text-index{

font-size:12px;

letter-spacing:1px;

}

.site-subtitle{

font-size:10px;

padding-inline:25px;

}

.evolution-columns-container{

flex-direction:column;

}

.evolution-title{

font-size:18px;

}

.evolution-subtitle{

font-size:14px;

}

.evolution-footer-text{

text-align:center;

font-size:17px;

}

.kubic-audio-visual-section{

margin:

15px auto

25px;

}

.media-container-box{

width:100%;

max-width:320px;

}

}