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

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff9ec3, #ff63a5);
  color: #fff;
  scroll-behavior: smooth;
}

/* HEADER */
header {
  text-align: center;
  padding: 50px 20px 30px 20px;
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin-bottom: 15px;
}

header h1 span { color:#f8063b; }

nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top:20px;
}

nav ul li a {
  text-decoration:none;
  color:#fff;
  font-weight:bold;
  transition: color 0.3s;
}

nav ul li a.active, nav ul li a:hover {
  color:#f8063b;
}

/* SECTIONS */
section { padding:50px 20px; text-align:center; }
h2 { margin-bottom:20px; font-size:28px; }

/* HABILIDADES */
.skills { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; }
.skill {
  background: rgba(255,255,255,0.2);
  padding:10px 20px;
  border-radius:25px;
  transition: transform 0.3s, background 0.3s;
  cursor:pointer;
}
.skill:hover { background:#f8063b; color:white; transform:scale(1.1); }

/* CAROUSEL */
.carousel {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  overflow:hidden;
  max-width:100%;
  position:relative;
}

.carousel-inner {
  display:flex;
  transition: transform 0.5s ease-in-out;
  gap:15px;
}

.project {
  min-width:250px;
  height:200px;
  background:rgba(255,255,255,0.2);
  border-radius:15px;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}

.project-overlay {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  opacity:0;
  transition: opacity 0.3s;
  padding:10px;
  text-align:center;
}

.project:hover .project-overlay { opacity:1; }

.carousel button {
  background:rgba(255,255,255,0.3);
  border:none;
  color:#fff;
  font-size:30px;
  cursor:pointer;
  padding:10px;
  border-radius:50%;
  transition: background 0.3s;
}

.carousel button:hover { background:rgba(255,255,255,0.6); }

/* CONTATO */
form { display:flex; flex-direction:column; max-width:400px; margin:auto; gap:15px; }
form input, form textarea { padding:10px; border-radius:8px; border:none; outline:none; font-size:14px; }
form button {
  padding:12px;
  border-radius:8px;
  border:none;
  background:#ffd1dc;
  color:#222;
  font-weight:bold;
  cursor:pointer;
  transition: background 0.3s;
}
form button:hover { background:#ff63a5; color:#fff; }

/* FOOTER */
footer { text-align:center; padding:20px; background:rgba(0,0,0,0.2); }

/* RESPONSIVO */
@media(max-width:768px){
  .carousel-inner { flex-wrap:wrap; justify-content:center; }
  .project { min-width:200px; margin-bottom:15px; }
}