.hero{

min-height:100vh;
display:flex;
align-items:center;

background:#f4f4f6;

padding-top:120px;
padding-bottom:60px;

}

.hero-container{

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

}

.hero-image img{

width:320px;
height:380px;

object-fit:cover;

border-radius:30px;

}

.hero-text{

max-width:520px;

}

.hero-text h1{

font-family:var(--title-font);
font-size:48px;
font-weight:700;
margin-bottom:10px;

}

.hero-text h1 span{

color:var(--primary-color);

}

.hero-text h2{

font-size:22px;
font-weight:600;
margin-bottom:20px;
color:var(--primary-color);

}

.hero-text p{

font-size:18px;
line-height:1.7;
margin-bottom:30px;

}





.about{

background:#f7f7fb;

}

.about-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;

}

.about-text h2{

font-family:var(--title-font);
font-size:36px;
color:var(--primary-color);
margin-bottom:20px;

}

.about-text p{

font-size:17px;
line-height:1.7;
margin-bottom:15px;

}

.about-title{

text-align:center;
font-size:36px;
color:var(--primary-color);
margin-bottom:20px;

}

.about-description{

max-width:700px;
margin:auto;
text-align:center;
line-height:1.7;

}


.skills-container{
  margin-top:60px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;

  align-items:start;
  justify-items:center; /* centra cada columna */
}


.skills-tools h3,
.skills-list h3{
  color:var(--primary-color);
  margin-bottom:20px;
  text-align:center;
}


.skills-list ul{
  list-style:none;
  padding:0;

  display:inline-block; /* mantiene el bloque centrado */
  text-align:left; /* pero el texto queda alineado bonito */
}

.skills-list li{
  margin-bottom:10px;
  padding-left:15px;
  position:relative;
}

.skills-list li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--primary-color);
}


/* CIRCULOS DE HERRAMIENTAS */

.skills-circles{
  display:grid;
  grid-template-columns:repeat(4,90px);
  gap:25px;

  justify-content:center;
}

.skill-circle{

width:90px;
height:90px;

border-radius:50%;

overflow:hidden;

position:relative;

cursor:pointer;

border:2px solid #31215f;

transition:0.3s;

}

/* imagen llena el circulo */

.skill-circle img{

width:100%;
height:100%;

object-fit:cover;

}


/* overlay */

.skill-name{

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

background:rgba(49,33,95,0.75);

color:white;

font-size:14px;
font-weight:500;

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

text-align:center;

opacity:0;

transition:0.3s;

}


/* hover */

.skill-circle:hover .skill-name{

opacity:1;

}

.skill-circle:hover{

transform:scale(1.08);

}


/* tap celular */

.skill-circle:active .skill-name{

opacity:1;

}







.projects{

background:white;

padding:100px 0;

}

.projects-title{

text-align:center;
font-size:38px;
color:var(--primary-color);
margin-bottom:40px;

}


.projects-filter{

display:flex;
justify-content:center;
gap:20px;
margin-bottom:60px;

}

.filter-btn{

padding:10px 22px;

border-radius:25px;

border:2px solid var(--primary-color);

background:transparent;

color:var(--primary-color);

cursor:pointer;

transition:0.3s;

}

.filter-btn.active,
.filter-btn:hover{

background:var(--primary-color);
color:white;

}


.projects-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:40px;

}


.project-card{

background:#f8f8fc;

border-radius:12px;

overflow:hidden;

transition:0.3s;

display:flex;
flex-direction:column;

height:100%;

}

.project-card:hover{

transform:translateY(-8px);

}


.project-card img{

width:100%;
height:200px;

object-fit:cover;

display:block;

}


.project-info{

padding:22px;

display:flex;
flex-direction:column;

gap:10px;

flex:1;

}









.project-tag{
display:inline-block;
margin-bottom:10px;
font-size:14px;
color:#6b53b1;
font-weight:500;
}

.project-tech{
margin-top:10px;
font-size:14px;
color:#666;
}

.project-buttons{

margin-top:auto;

display:flex;
gap:10px;

flex-wrap:wrap;

}












/* ============================= */
/* PAGINA DE PROYECTO */
/* ============================= */

.project-page{

padding-top:120px;

}


.project-header{

padding:60px 0;

}


.project-title{

font-size:42px;
color:var(--primary-color);
margin-bottom:10px;

}


.project-meta{

color:#6b53b1;
font-weight:500;
margin-bottom:40px;

}


/* LAYOUT PRINCIPAL */

.project-layout{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;

align-items:start;

}


/* INFORMACION */

.project-info h3{

margin-top:25px;
margin-bottom:10px;
color:var(--primary-color);

}


.project-description{

line-height:1.7;

}


/* TECNOLOGIAS */

.project-tech{

display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;

}

.project-tech span{

background:#eee8ff;
color:#5a43a6;

padding:6px 14px;

border-radius:20px;

font-size:14px;

}


/* FEATURES */

.project-features{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:15px;

}


/* TARJETAS */

.feature-card{

background:white;

padding:18px;

border-radius:12px;

font-size:14px;

line-height:1.5;

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

transition:all .3s ease;

}


/* HOVER */

.feature-card:hover{

transform:translateY(-4px);

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

}


/* BOTONES */

.project-buttons{

margin-top:30px;
display:flex;
gap:15px;
flex-wrap:wrap;

}


/* MEDIA (IMAGENES + VIDEO) */

.project-media{

display:flex;
flex-direction:column;
gap:30px;

}


.project-gallery{

display:flex;
flex-direction:column;
gap:25px;

}

.project-gallery img{

width:100%;
border-radius:12px;

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

transition:transform .35s ease;

cursor:pointer;

}


/* EFECTO ZOOM */

.project-gallery img:hover{

transform:scale(1.15);

}


/* VIDEO */

.project-video video{

width:100%;

border-radius:14px;

box-shadow:0 12px 30px rgba(0,0,0,0.1);

}

.gallery-item{

overflow:hidden;
border-radius:14px;

box-shadow:0 12px 30px rgba(0,0,0,0.1);

}

.gallery-item img{

width:100%;
display:block;

transition:transform .4s ease;

}

/* ZOOM AL PASAR EL MOUSE */

.gallery-item:hover img{

transform:scale(1.08);

}

.project-video h4{

margin-bottom:10px;
font-size:16px;
color:var(--primary-color);

}









/* GALERIA DE PERSONAJES */

.characters-gallery{

display:grid;

grid-template-columns:repeat(2, 1fr);

gap:20px;

max-width:420px;

margin-left:auto;

}


/* TARJETA */

.character-item{

background:#fafafa;

padding:15px;

border-radius:14px;

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

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

transition:all .3s ease;

}


/* IMAGEN */

.character-item img{

width:100%;
max-width:160px;

height:auto;

}


/* HOVER */

.character-item:hover{

transform:translateY(-4px);

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

}






/* BRANDING SHOWCASE */

.branding-showcase{

display:flex;
flex-direction:column;
gap:40px;

max-width:420px;

margin-left:auto;

}


.branding-item{

text-align:center;

}


.branding-item h4{

margin-bottom:12px;

color:var(--primary-color);

}


.branding-item img{

width:100%;

border-radius:14px;

box-shadow:0 12px 30px rgba(0,0,0,0.1);

transition:transform .3s ease;

}


.branding-item img:hover{

transform:scale(1.05);

}






/* CONTACTO */

.contact{

padding:120px 0;

text-align:center;

background:#faf9ff;

}

.contact-title{

font-size:36px;

color:var(--primary-color);

margin-bottom:20px;

}

.contact-description{

max-width:600px;

margin:auto;

line-height:1.6;

margin-bottom:60px;

color:#555;

}

/* TARJETAS */

.contact-cards{

display:grid;

grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));

gap:30px;

justify-content:center;

max-width:700px;

margin:auto;

margin-bottom:50px;

}

.contact-card{

background:white;

padding:30px;

border-radius:12px;

transition:0.3s;

box-shadow:0 5px 20px rgba(0,0,0,0.05);

}

.contact-card:hover{

transform:translateY(-5px);

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

}

.contact-icon{

font-size:28px;

margin-bottom:15px;

}

.contact-card h3{

margin-bottom:10px;

color:var(--primary-color);

}

.contact-card p{

color:#555;

}

/* BOTON */

.contact-buttons{

margin-top:20px;

}