/* ======================================================
   MAIN
====================================================== */

main{

padding-inline:40px;

margin-top:5px;

margin-bottom:70px;

}



/* ======================================================
   CINTA SERVICIOS
====================================================== */

.ticker-banner{

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{

position:relative;

width:100%;

height:100%;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

}



/* DESKTOP */

.desktop-ticker{

position:absolute;

white-space:nowrap;

font-family:Arial,sans-serif;

font-size:18px;

font-weight:900;

letter-spacing:2px;

color:#000;

top:50%;

animation:

tickerDesktop

18s linear infinite;

}



@keyframes tickerDesktop{

0%{

left:100%;

transform:
translateY(-50%);

}


35%{

left:50%;

transform:
translate(
-50%,
-50%
);

}


65%{

left:50%;

transform:
translate(
-50%,
-50%
);

}


100%{

left:-100%;

transform:
translateY(-50%);

}

}



/* MOBILE */

.ticker-mobile{

display:none;

white-space:nowrap;

font-size:14px;

font-weight:900;

color:#000;

animation:

tickerMobile

12s linear infinite;

}



.ticker-mobile span{

padding-right:20px;

}



@keyframes tickerMobile{

0%{

transform:
translateX(0);

}

100%{

transform:
translateX(-50%);

}

}



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

.site-subtitle{

display:block;

width:100%;

text-align:center;

margin:

25px auto
20px auto;

padding:

0 20px;

font-size:

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

font-weight:700;

line-height:1.4;

letter-spacing:1px;

color:#76FF45;

}



/* ======================================================
   SERVICES CARDS
====================================================== */

.services-cards-section{

display:grid;

grid-template-columns:

repeat(
2,
minmax(
320px,
420px
)
);

justify-content:center;

align-items:start;

gap:

60px;

max-width:1200px;

margin:

80px auto;

padding:

0 20px;

}



.service-card{

position:relative;

width:100%;

max-width:320px;

height:auto;

perspective:1800px;

cursor:pointer;

animation:

floating

5s ease-in-out infinite;

margin:auto;

}



.service-card-inner{

position:relative;

width:100%;

aspect-ratio:

9 / 16;

transform-style:

preserve-3d;

transition:

transform .9s ease,
scale .35s ease;

}



.service-card.active
.service-card-inner{

transform:

rotateY(180deg);

}



.service-card.active.zoomed
.service-card-inner{

transform:

rotateY(180deg)
scale(1.08);

}



.service-card-front,

.service-card-back{

position:absolute;

width:100%;

height:100%;

border-radius:26px;

overflow:visible;

backface-visibility:hidden;

background:transparent;

box-shadow:none;

}



.service-card-front{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:35px;

background:

rgba(
5,
5,
5,
0.75
);

backdrop-filter:

blur(10px);

border:

1px solid rgba(
118,
255,
69,
0.15
);

border-radius:26px;

}


.service-card-front h3{

font-size:34px;

font-weight:900;

color:#76FF45;

margin-bottom:25px;

}



.service-card-front p{

font-size:18px;

line-height:1.6;

color:white;

}



.service-card-back{

transform:

rotateY(180deg);

display:flex;

justify-content:center;

align-items:center;

background:transparent;

}



.service-gif{

width:100%;

height:auto;

display:block;

object-fit:contain;

filter:

drop-shadow(
0 0 20px
rgba(
0,
255,
180,
0.25
))

drop-shadow(
0 0 45px
rgba(
118,
255,
69,
0.18
));

}


/* FLOAT */

@keyframes floating{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-12px);

}

100%{

transform:
translateY(0);

}
}
/* ======================================================
   KUBIC STUDIO AUDIO SECTION
====================================================== */

.kubic-studio-audio-section{

display:flex;

justify-content:center;

margin:

90px auto;

padding:

0 20px;


.kubic-studio-container{

width:100%;

max-width:320px;

display:flex;

flex-direction:column;

align-items:center;

}



.kubic-studio-gif{

width:100%;

height:auto;

display:block;

object-fit:contain;

filter:

drop-shadow(
0 0 20px
rgba(
0,
255,
180,
0.25
))

drop-shadow(
0 0 45px
rgba(
118,
255,
69,
0.16
));

}



/* CONTROLES */

.kubic-studio-controls{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

margin-top:20px;

}



/* ECUALIZADOR */

.kubic-studio-eq{

display:flex;

align-items:flex-end;

gap:5px;

height:40px;

}



.kubic-studio-eq .bar{

width:6px;

height:4px;

background:#76FF45;

border-radius:3px;

transition:.2s;

box-shadow:

0 0 10px rgba(
118,
255,
69,
0.45);

}



.kubic-studio-eq.playing .bar{

animation:

kubicEQ

1.1s ease-in-out infinite alternate;

}



.kubic-studio-eq.playing .bar:nth-child(1){

animation-duration:.8s;

}

.kubic-studio-eq.playing .bar:nth-child(2){

animation-duration:1.1s;

}

.kubic-studio-eq.playing .bar:nth-child(3){

animation-duration:.7s;

}

.kubic-studio-eq.playing .bar:nth-child(4){

animation-duration:1.2s;

}

.kubic-studio-eq.playing .bar:nth-child(5){

animation-duration:.9s;

}

.kubic-studio-eq.playing .bar:nth-child(6){

animation-duration:1.3s;

}

.kubic-studio-eq.playing .bar:nth-child(7){

animation-duration:.8s;

}



@keyframes kubicEQ{

0%{

height:5px;

}

100%{

height:38px;

}

}



/* BOTON AUDIO */

.kubic-studio-audio-btn{

width:40px;

height:40px;

border-radius:50%;

border:

1px solid rgba(
118,
255,
69,
0.3);

background:

rgba(
5,
5,
5,
0.9);

color:#76FF45;

font-size:16px;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

transition:.25s;

}



.kubic-studio-audio-btn:hover{

transform:

scale(1.08);

box-shadow:

0 0 12px rgba(
118,
255,
69,
0.4);

}

}



/* ======================================================
   MOBILE
====================================================== */

@media(max-width:956px){

.ticker-banner{

margin-top:85px;

height:35px;

}


.desktop-ticker{

display:none;

}


.ticker-mobile{

display:flex;

}


.services-cards-section{

grid-template-columns:

1fr;

gap:45px;

max-width:360px;

}

.service-card{

max-width:280px;

}


.service-card.active.zoomed
.service-card-inner{

transform:

rotateY(180deg)
scale(1.03);

}

}