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

main{

padding-inline:100px;

margin-top:5px;

margin-bottom:55px;

}

/* ======================================================
   TICKER / FRANJA VERDE DISEÑO
====================================================== */

.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{

width:100%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

position:relative;

padding:0 40px;

}

/* ===== DESKTOP ===== */

.ticker-text{

position:absolute;

left:0;

white-space:nowrap;

font-size:18px;

font-weight:900;

letter-spacing:2px;

color:#000;

animation:
tickerDesktop
20s linear infinite;

}

@keyframes tickerDesktop{

0%{

transform:
translateX(100%);

}

/* llega al centro */

35%{

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

}

/* pausa */

65%{

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

}

/* sale */

100%{

transform:
translateX(-100%);

}

}

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

@media (max-width:956px){

.ticker-banner{

margin-top:85px;

height:35px;

}

.ticker-wrap{

justify-content:flex-start;

}

.ticker-text{

font-size:14px;

display:flex;

animation:
tickerMobile
14s linear infinite;

}

.ticker-text::after{

content:
" LA TECNOLOGÍA SIN DISEÑO ES FRÍA; EL DISEÑO SIN TECNOLOGÍA ES ESTÁTICO.";

padding-left:80px;

}

@keyframes tickerMobile{

0%{

transform:
translateX(0);

}

100%{

transform:
translateX(-50%);

}

}

}

/* ======================================================
   SUBTITULO
====================================================== */

.site-subtitle{

display:block;

width:100%;

max-width:1200px;

margin:

25px auto
15px auto;

padding-inline:20px;

text-align:center;

font-family:Arial,sans-serif;

font-size:

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

font-weight:700;

letter-spacing:1.5px;

line-height:1.4;

color:#76FF45;

}

/* ======================================================
   CONTENEDOR GENERAL
====================================================== */

.content-wrapper{

width:100%;

max-width:1000px;

margin:

60px auto;

padding:

0 20px;

text-align:center;

}

.content-wrapper h1{

font-family:Arial,sans-serif;

font-size:32px;

font-weight:900;

color:#76FF45;

margin-bottom:20px;

}

/* CONTENEDOR */

.diseño-section{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin:60px auto;

padding:0 20px;

}


.diseño-section{

width:100%;

display:flex;

justify-content:center;

margin:60px auto;

padding:0 20px;

}

/* CONTENEDOR */

.media-container-box{

width:100%;

max-width:520px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}


/* GIF PRINCIPAL */

.diseño-section-gif{

display:block;

width:100%;

max-width:520px;

height:auto;

object-fit:contain;

border-radius:14px;

filter:

drop-shadow(0 0 10px rgba(255,255,255,.05))
drop-shadow(0 0 30px rgba(0,255,180,.10))
drop-shadow(0 0 60px rgba(0,255,180,.08));

transition:.35s ease;

}


.diseño-section-gif:hover{

transform:scale(1.01);

}


/* CONTROLES AUDIO */

.audio-control-row{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

margin-top:18px;

}


.equalizer-display{

display:flex;

align-items:flex-end;

gap:5px;

height:40px;

}

.equalizer-display .bar{

width:6px;

height:6px;

background:#76FF45;

border-radius:3px;

box-shadow:

0 0 8px rgba(118,255,69,.4);

}


.equalizer-display.playing .bar{

animation:

equalize 1.2s ease-in-out infinite alternate;

}


.equalizer-display.playing .bar:nth-child(1){

animation-duration:.8s;

}

.equalizer-display.playing .bar:nth-child(2){

animation-duration:1.2s;

}

.equalizer-display.playing .bar:nth-child(3){

animation-duration:.9s;

}

.equalizer-display.playing .bar:nth-child(4){

animation-duration:1.1s;

}

.equalizer-display.playing .bar:nth-child(5){

animation-duration:1s;

}

.equalizer-display.playing .bar:nth-child(6){

animation-duration:.7s;

}

.equalizer-display.playing .bar:nth-child(7){

animation-duration:1.3s;

}


@keyframes equalize{

0%{

height:6px;

}

100%{

height:38px;

}

}


.volume-mute-btn{

width:38px;

height:38px;

border-radius:50%;

border:

1px solid rgba(118,255,69,.4);

background:

rgba(15,15,15,.9);

color:#76FF45;

cursor:pointer;

font-size:16px;

display:flex;

align-items:center;

justify-content:center;

transition:.25s;

}


.volume-mute-btn:hover{

background:#76FF45;

color:#000;

}

/* ======================================================
   SECCION LISTO GIF
====================================================== */

.diseño-listo-section{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin:80px auto;

padding:0 20px;

}


.diseño-listo-container{

width:100%;

max-width:720px;

display:flex;

justify-content:center;

align-items:center;

}


.diseño-listo-gif{

display:block;

width:100%;

height:auto;

object-fit:contain;

border-radius:14px;

filter:

drop-shadow(0 0 10px rgba(255,255,255,.05))
drop-shadow(0 0 30px rgba(0,255,180,.10))
drop-shadow(0 0 60px rgba(0,255,180,.08));

transition:.35s ease;

}


.diseño-listo-gif:hover{

transform:scale(1.01);

}

/* ======================================================
   IA + CREATIVIDAD SECTION
====================================================== */

.diseño-ia-section{

width:100%;

display:flex;

justify-content:center;

margin:90px auto;

padding:0 20px;

}


.diseño-ia-content{

width:100%;

max-width:520px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}


.diseño-ia-title{

font-family:Arial,sans-serif;

font-size:28px;

font-weight:900;

line-height:1.35;

letter-spacing:.5px;

color:#ffffff;

margin-bottom:45px;

text-shadow:

0 4px 12px rgba(0,0,0,.8);

}


.diseño-ia-gif{

display:block;

width:100%;

height:auto;

border-radius:14px;

object-fit:contain;

filter:

drop-shadow(0 0 12px rgba(255,255,255,.05))
drop-shadow(0 0 28px rgba(0,255,180,.10))
drop-shadow(0 0 55px rgba(0,255,180,.08));

transition:.35s ease;

}


.diseño-ia-gif:hover{

transform:scale(1.01);

}

/* ======================================================
   FUTURO DIGITAL SECTION
====================================================== */

.diseño-futuro-section{

width:100%;

display:flex;

justify-content:center;

margin:100px auto 120px auto;

padding:0 20px;

}


.diseño-futuro-content{

width:100%;

max-width:520px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:

35px
25px;

border-radius:16px;


/* glow suave igual resto sitio */

box-shadow:

0 0 25px rgba(0,255,180,.05),
0 0 60px rgba(0,255,180,.03);

}


.diseño-futuro-title{

font-family:Arial,sans-serif;

font-size:30px;

font-weight:900;

line-height:1.45;

letter-spacing:.4px;

color:#ffffff;

text-shadow:

0 4px 12px rgba(0,0,0,.8);

margin:0;

}

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

@media(max-width:956px){

main{

padding-inline:20px;

}

/* cinta */

.ticker-banner{

margin-top:85px;

height:35px;

}

.ticker-text{

font-size:14px;

animation:

tickerMobile

18s linear infinite;

}

.ticker-text span{

padding-right:40px;

}

@keyframes tickerMobile{

0%{

transform:
translateX(0);

}

100%{

transform:
translateX(-50%);

}

}

/* contenido */

.content-wrapper{

margin-top:40px;

padding:

0 10px;

}

.content-wrapper h1{

font-size:24px;

}

.diseño-listo-section{

margin:50px auto;

}

.diseño-listo-container{

max-width:100%;

}

.diseño-ia-section{

margin:60px auto;

padding:0 18px;

}


.diseño-ia-title{

font-size:22px;

margin-bottom:30px;

line-height:1.4;

}

.media-container-box{

max-width:100%;

}

.diseño-section-gif{

max-width:100%;

}

.diseño-futuro-section{

margin:

70px auto
90px auto;

}


.diseño-futuro-content{

padding:

25px
18px;

}


.diseño-futuro-title{

font-size:23px;

line-height:1.5;

}


}