/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}


/* FUNDO DO SITE */

body{
background:#111;
min-height:100vh;
}


/* CARROSSEL DE FUNDO */

.bg-slider{
position:fixed;
inset:0;
z-index:-1;
overflow:hidden;
}

.bg-slide{
position:absolute;
inset:0;
background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
opacity:1;
}

/* FUNDO ESTÁTICO */
.bg-slide--1{
background-image:
  linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
  url("../assets/fundoasduas.jpg");
}


/* TEXTO DO CARROSSEL */

.bg-slide-text{
position:absolute;
top:0;
left:0;
right:0;
height:175px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
}

.bg-slide-titulo{
font-size:42px;
font-weight:700;
color:#fff;
letter-spacing:8px;
text-transform:uppercase;
text-shadow:0 2px 20px rgba(0,0,0,.6);
}

.bg-slide-sub{
font-size:12px;
font-weight:600;
color:#ffd400;
letter-spacing:3px;
text-transform:uppercase;
}


/* TOPO */

.cover{
height:220px;
}


/* ÁREA DO SITE */

.page-bg{
min-height:100vh;
}


/* CONTAINER PADRÃO (HOME) */

.container{

max-width:420px;
margin:-60px auto 0;
padding:0 20px 40px;

}


/* CONTAINER GRANDE (PROJETOS) */

.container-projetos{

max-width:900px;
margin:-60px auto 0;
padding:0 16px 40px;
width:100%;
box-sizing:border-box;

}


/* PERFIL */

.profile{

background:#ffffff;
border-radius:20px;

padding:70px 20px 30px;

text-align:center;

position:relative;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}


/* FOTO PERFIL */

.profile img{

width:110px;
height:110px;

border-radius:50%;
object-fit:cover;

border:6px solid #ffd400;

position:absolute;
top:-55px;
left:50%;
transform:translateX(-50%);

}


/* TITULO */

.profile h1{
font-size:22px;
color:#111;
}


/* TEXTO */

.profile p{

font-size:14px;
color:#555;
margin-top:8px;
line-height:1.5;

}


/* CARDS */

.cards{

margin-top:25px;

display:flex;
flex-direction:column;

gap:18px;

}


/* CARD BASE */

.card{

height:120px;

border-radius:20px;

overflow:hidden;

text-decoration:none;

position:relative;

background-size:110%;
background-position:center;
background-repeat:no-repeat;

box-shadow:0 10px 30px rgba(0,0,0,.45);

transition:.25s;

display:flex;
align-items:center;

}

.card:hover{
transform:scale(1.03);
}


/* OVERLAY */

.card-overlay{

position:absolute;
inset:0;

background:linear-gradient(
to right,
rgba(0,0,0,.75),
rgba(0,0,0,.35)
);

display:flex;
flex-direction:column;
justify-content:center;

padding:20px;

}


/* TITULO */

.card h2{
color:#fff;
font-size:18px;
}


/* BOTÃO */

.card span{

margin-top:10px;

background:#ffd400;
color:#000;

width:max-content;

padding:8px 18px;

border-radius:22px;

font-size:13px;
font-weight:600;

}


/* IMAGENS DOS CARDS */

.card-instagram{
background-image:url("../assets/instagram.jpg");
background-position:center;
background-size:105%;
}

.card-portfolio{
background-image:url("../assets/portfolio.jpg");
background-position:center 38%;
background-size:115%;
}

.card-projetos{
background-image:url("../assets/topo-fundo.jpg");
background-position:center 38%;
background-size:115%;
}

.card-sobre{
background-image:url("../assets/sobreasduas.jpg");
background-position: center 22%;
background-size: cover;
}

.card-whatsapp{
  background-image: url("../assets/asduas.jpg");
  background-position: center 28%;
  background-size: cover;
}


/* RODAPÉ */

footer{

text-align:center;

margin-top:25px;

font-size:12px;

color:#fff;

}


/* BOTÃO WHATSAPP */

.whatsapp-float{

position:fixed;

right:20px;
bottom:20px;

width:60px;
height:60px;

background:#25d366;

border-radius:50%;

display:flex;

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

color:#fff;

font-size:30px;

box-shadow:0 10px 25px rgba(0,0,0,.4);

z-index:999;

}


/* ===================== */
/* PROJETOS */
/* ===================== */


/* FILTROS */

.proj-filtros{
display:flex;
gap:12px;
justify-content:center;
margin:20px 0 10px;
flex-wrap:wrap;
}

.proj-btn{
background:rgba(255,255,255,.15);
color:#fff;
border:2px solid rgba(255,255,255,.35);
padding:10px 26px;
border-radius:50px;
font-family:'Poppins',sans-serif;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.proj-btn.ativo{
background:#ffd400;
color:#000;
border-color:#ffd400;
}


/* GRID */

.proj-grid{
margin-top:20px;
display:grid;
grid-template-columns:1fr;
gap:14px;
}

@media (min-width:480px){
.proj-grid{
grid-template-columns:1fr 1fr;
}
}

.escondido{
display:none;
}


/* ITEM */

.proj-item{
position:relative;
border-radius:16px;
overflow:hidden;
cursor:pointer;
}

.proj-item img{
width:100%;
height:auto;
display:block;
transition:.35s;
}

.proj-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0);
display:flex;
align-items:center;
justify-content:center;
transition:.3s;
}

.proj-overlay i{
color:#fff;
font-size:28px;
opacity:0;
transition:.3s;
transform:scale(.7);
}

.proj-item:hover img{
transform:scale(1.06);
}

.proj-item:hover .proj-overlay{
background:rgba(0,0,0,.45);
}

.proj-item:hover .proj-overlay i{
opacity:1;
transform:scale(1);
}


/* LIGHTBOX */

.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.93);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
z-index:1000;
opacity:0;
pointer-events:none;
transition:.3s;
}

.lightbox.ativo{
opacity:1;
pointer-events:all;
}

.lightbox img{
max-width:100%;
max-height:90vh;
border-radius:12px;
box-shadow:0 20px 60px rgba(0,0,0,.8);
}

.lightbox-fechar{
position:absolute;
top:18px;
right:18px;
background:#ffd400;
color:#000;
border:none;
width:40px;
height:40px;
border-radius:50%;
font-size:18px;
font-weight:700;
cursor:pointer;
transition:.2s;
}

.lightbox-fechar:hover{
transform:scale(1.1);
}


/* DESKTOP */

@media (min-width:900px){

.proj-grid{
grid-template-columns:1fr 1fr 1fr;
}

}


@media (min-width:900px){

.projetos{

grid-template-columns:1fr 1fr;

max-width:900px;

margin-left:auto;
margin-right:auto;

}

}


/* ===================== */
/* SOBRE */
/* ===================== */


/* HERO CEO */

.ceo-hero{

height:320px;

border-radius:20px;

overflow:hidden;

position:relative;

background-image:url("../assets/quemsoudentro.jpg");
background-size:cover;
background-position:center 38%;

box-shadow:0 15px 40px rgba(0,0,0,.5);

}

.ceo-hero-overlay{

position:absolute;
bottom:0;
left:0;
right:0;

background:linear-gradient(transparent, rgba(0,0,0,.92));

padding:24px 22px;

}

.ceo-tag{
display:block;
font-size:10px;
color:#ffd400;
font-weight:600;
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:8px;
}

.ceo-hero h1{
color:#fff;
font-size:26px;
font-weight:700;
line-height:1.2;
}

.ceo-hero p{
color:rgba(255,255,255,.7);
font-size:13px;
margin-top:5px;
}


/* STATS */

.ceo-stats{

display:flex;
gap:12px;
margin-top:16px;

}

.stat{

flex:1;

background:#fff;

border-radius:16px;

padding:16px 8px;

text-align:center;

box-shadow:0 6px 20px rgba(0,0,0,.2);

}

.stat strong{

display:block;

font-size:20px;
font-weight:700;
color:#111;

}

.stat span{

display:block;

font-size:10px;
color:#777;

margin-top:4px;
line-height:1.3;

}


/* CARDS INFO */

.sobre-card{

background:#fff;

border-radius:18px;

padding:20px 22px;

margin-top:16px;

box-shadow:0 8px 24px rgba(0,0,0,.15);

border-left:4px solid #ffd400;

}

.sobre-card--destaque{

border-left:4px solid #ffd400;

}

.sobre-card h2{

margin-bottom:12px;

font-size:16px;
font-weight:600;
color:#111;

display:flex;
align-items:center;
gap:8px;

}

.sobre-card h2 i{
color:#ffd400;
font-size:15px;
}

.sobre-card p{

font-size:14px;

line-height:1.7;

color:#555;

margin-bottom:10px;

}


/* CTA WHATSAPP */

.cta-whatsapp{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

margin-top:24px;

background:#ffd400;
color:#000;

padding:16px;

border-radius:50px;

font-weight:700;
font-size:15px;

text-decoration:none;

box-shadow:0 8px 28px rgba(255,212,0,.45);

transition:.2s;

}

.cta-whatsapp i{
font-size:20px;
color:#25d366;
}

.cta-whatsapp:hover{
transform:scale(1.03);
background:#ffc400;
}


/* BOTÃO VOLTAR */

.voltar-container{
display:flex;
justify-content:center;
margin-top:40px;
}

.botao-voltar{

background:#ffd400;
color:#000;

padding:12px 22px;

border-radius:25px;

font-weight:600;

text-decoration:none;

transition:.2s;

}

.botao-voltar:hover{

transform:scale(1.05);

background:#ffc400;

}