@charset "UTF-8";

/* VARIABLES */
:root{

--gris:#f5f5f5;
--negro:#111111;
--rosa:#ff3d8d;
--amarillo:#ffc400;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Montserrat', sans-serif;
background:var(--gris);
color:var(--negro);
overflow-x:hidden;

}

/* NAVBAR */

.navbar{

background:rgba(255, 122, 89, 0.18);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,0.15);

padding:15px 0;

box-shadow:
0 4px 20px rgba(0,0,0,0.15);

}

.logo-text{

font-family:'Bangers', cursive;
font-size:2.2rem;
letter-spacing:3px;
color:var(--amarillo) !important;

text-shadow:
3px 3px 0px var(--rosa);

transition:0.4s ease;

}

.logo-text:hover{
transform:scale(1.08);
}

.nav-link{

color:white !important;
font-weight:600;
margin-left:15px;
transition:0.3s;

}

.nav-link:hover{
color:var(--rosa) !important;
}

.nav-link i{

margin-right:7px;
transition:0.3s;

}

.nav-link:hover i{

color:var(--amarillo);
transform:translateY(-2px);

}

/* HERO */

.hero{

position:relative;
min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

padding:100px 20px;

background:black;
color:white;

overflow:hidden;

}

.hero-bg-shape{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0.25;

}

.hero .container{
position:relative;
z-index:2;
}

.hero-title{

font-family:'Bangers', cursive;

font-size:clamp(4rem,10vw,9rem);

color:var(--amarillo);

text-shadow:
5px 5px 0px var(--rosa);

animation:aparecer 1s ease;

}

.hero-subtitle{

max-width:700px;
margin:auto;
margin-top:20px;
font-size:1.2rem;

}

@keyframes aparecer{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* BOTÓN */

.btn-acasound{

background:
linear-gradient(
45deg,
var(--amarillo),
#ff7a59,
var(--rosa)
);

color:white;
border:none;

padding:15px 35px;

border-radius:50px;

font-weight:700;

transition:0.4s;

}

.btn-acasound:hover{

transform:scale(1.05);
color:white;

}

/* SECCIONES */

.section-padding{
padding:100px 20px;
}

.section-title{

font-family:'Bangers', cursive;

font-size:4rem;

letter-spacing:3px;

color:var(--rosa);

}

.section-text{

max-width:800px;

margin:auto;
margin-top:15px;

line-height:1.8;

font-size:1.1rem;

}

/* TEAM */

.team-link{
text-decoration:none;
color:inherit;
display:block;
}

.team-card{

background:rgba(255,255,255,0.2);

backdrop-filter:blur(10px);

border-radius:25px;

overflow:hidden;

text-align:center;

padding-bottom:70px;

transition:0.4s;

cursor:pointer;

position:relative;

height:100%;

}

.team-card:hover{

transform:
translateY(-10px)
scale(1.03);

box-shadow:
0 15px 30px rgba(0,0,0,0.2);

}

.team-card::after{

content:"Ver perfil";

position:absolute;

bottom:20px;
left:50%;

transform:translateX(-50%);

background:var(--rosa);

color:white;

padding:8px 18px;

border-radius:30px;

font-size:0.85rem;
font-weight:600;

opacity:0;

transition:0.3s;

pointer-events:none;

}

.team-card:hover::after{

opacity:1;
bottom:25px;

}

.team-img{

width:100%;
height:250px;

object-fit:cover;

margin-bottom:15px;

}

.team-card h4{
font-weight:700;
}

/* SERVICIOS */

.service-card{

background:rgba(255,255,255,0.2);

backdrop-filter:blur(10px);

border-radius:25px;

padding:50px 30px;

text-align:center;

transition:0.4s;

height:100%;

}

.service-card:hover{

transform:
translateY(-10px)
scale(1.03);

background:rgba(0,0,0,0.15);

box-shadow:
0 15px 30px rgba(0,0,0,0.2);

}

.service-icon{

font-size:2rem;

margin-bottom:25px;

color:white;

transition:0.3s;

}

.service-card:hover .service-icon{

transform:scale(1.2);

color:var(--amarillo);

}

.service-card h3,
.service-card p{
color:white;
}

/* SECCIONES DISEÑADORES */

.designer-section{
padding:120px 20px;
}

.portfolio-img,
.portfolio-video{

width:100%;
height:320px;

object-fit:cover;

border-radius:25px;

transition:0.4s;

background:black;

}

.portfolio-img:hover,
.portfolio-video:hover{

transform:scale(1.03);

box-shadow:
0 15px 25px rgba(0,0,0,0.25);

}

/* FONDOS */

.bg-dark-custom{

background:
linear-gradient(
135deg,
#ff8fb8,
#ff6fa5,
#ffb38a
);

}

.bg-contact{

background:
linear-gradient(
135deg,
var(--rosa),
var(--amarillo)
);

}

/* GALERÍA */

.gallery-img{

width:100%;
height:300px;

object-fit:cover;

border-radius:20px;

transition:0.4s;

}

.gallery-img:hover{

transform:scale(1.03);

filter:brightness(1.1);

box-shadow:
0 10px 20px rgba(0,0,0,0.4);

}

/* CONTACTO */

.contact-box{

background:white;

padding:50px;

border-radius:25px;

}

.form-control{

padding:15px;

border-radius:10px;

border:none;

}

.form-control:focus{

box-shadow:none;

border:2px solid var(--rosa);

}

/* FOOTER */

.footer{

position:relative;

overflow:hidden;

padding:45px 20px 30px;

color:white;

}

.footer-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:1;

filter:brightness(0.4);

}

.footer-content{

position:relative;

z-index:2;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:12px;

}

/* REDES */

.social-links{

display:flex;

justify-content:center;
align-items:center;

gap:18px;

margin-top:4px;

}

.social-links a{

width:50px;
height:50px;

display:flex;

justify-content:center;
align-items:center;

border:1px solid rgba(255,255,255,0.3);

border-radius:50%;

color:white;

font-size:1.2rem;

text-decoration:none;

backdrop-filter:blur(10px);

transition:0.35s ease;

}

.social-links a:hover{

transform:translateY(-4px);

background:rgba(255,255,255,0.12);

color:var(--amarillo);

border-color:white;

}

/* BOTÓN VOLVER ARRIBA */

.back-to-top{

display:inline-flex;

align-items:center;
gap:10px;

padding:12px 24px;

margin-top:8px;

border:1px solid rgba(255,255,255,0.3);

border-radius:50px;

text-decoration:none;

color:white;

font-weight:500;

transition:0.35s ease;

}

.back-to-top:hover{

transform:translateY(-4px);

background:rgba(255,255,255,0.12);

color:var(--amarillo);

}

/* COPYRIGHT */

.footer-copy{

max-width:700px;

margin:auto;

line-height:1.8;

font-size:0.95rem;

opacity:0.9;

font-weight:300;

margin-top:10px;

}

/* RESPONSIVE */

@media(max-width:768px){

.hero-title{
font-size:4rem;
}

.section-title{
font-size:2.5rem;
}

.hero-subtitle{
font-size:1rem;
}

.portfolio-img,
.portfolio-video{
height:250px;
}

}