/* ===== RESET + VARS ===== */
*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none;scroll-behavior:smooth}
:root{
  font-size:62.5%;
  --bg-color:#0f1014; --panel:#151723; --text-color:#f7f7fb; --muted:#cfcfe6;
  --accent:#ff5c8a; --accent-2:#ffc2d1; --gold:#d4b86a;
  --card-bg-color:rgba(255,92,138,.16);
  --first-font:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --second-font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --highlight-color:rgba(255,255,255,.15);
  --switch-bg-url:url("./img/moon-star.svg");
  --stroke-color:rgba(255,255,255,.14); --surface-color:rgba(255,255,255,.08);
  --logo-github:url("./img/logo-github-white.svg"); --logo-linkedin:url("./img/logo-linkedin-white.svg");
  --logo-github-hover:url("./img/logo-github-orange.svg"); --logo-linkedin-hover:url("./img/logo-linkedin-orange.svg");
  --bg-contact:url("./img/bg-contact-dark.png");
  --border-form:none; --bg-form:rgba(255,255,255,.06);
  --role-rose:#e91e63;
}
.light{
  --bg-color:#ffffff; --panel:#ffffff; --text-color:#1b1c22; --muted:#5e6275;
  --accent:#e91e63; --accent-2:#ffd6e0; --gold:#d4af37; --card-bg-color:#ffe5ec;
  --switch-bg-url:url("./img/sun.svg");
  --stroke-color:rgba(0,0,0,.12); --surface-color:rgba(0,0,0,.06);
  --logo-github:url("./img/logo-github-black.svg"); --logo-linkedin:url("./img/logo-linkedin-black.svg");
  --bg-contact:url("./img/bg-contact-white.png");
  --border-form:2px solid var(--accent); --bg-form:#fff;
}
html,body{height:100%}
body{background:var(--bg-color);color:var(--text-color);font-family:var(--first-font)}

/* ===== NAV ===== */
nav{
  position:fixed; inset:0 0 auto 0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 10rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--bg-color);
  border-bottom:1px solid var(--stroke-color);
  backdrop-filter:saturate(120%) blur(6px);
}
.navlist{display:flex;gap:4rem}
.navlist a{
  font-family:var(--second-font);font-weight:600;letter-spacing:.3px;
  font-size:1.5rem;line-height:2rem;color:var(--text-color);transition:color .2s ease
}
.navlist a:hover{color:var(--accent)}
.navlist a.active{color:var(--accent);position:relative}
.navlist a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;margin:auto;width:36px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:2px
}
#menu-icon{display:none;font-size:4rem;color:var(--text-color);cursor:pointer;margin-left:2.5rem}
#menu-icon:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:1rem}

/* Switch */
#switch{position:relative;width:4rem;margin:.5rem 1.2rem}
#switch span{display:block;width:4rem;height:1.8rem;background:var(--surface-color);border:1px solid var(--stroke-color);border-radius:625rem}
#switch button{
  position:absolute;inset:auto auto 50% 0;transform:translateY(50%);width:2.5rem;height:2.5rem;border:0;border-radius:50%;
  cursor:pointer;background:#fff;background-image:var(--switch-bg-url);background-repeat:no-repeat;background-position:center;
  transition:all .3s;animation:slide-back .35s;border:1px solid var(--highlight-color);box-shadow:0 6px 16px rgba(0,0,0,.18)
}
#switch button:hover{outline:.5rem solid var(--highlight-color)}
.light #switch button{animation:slide-in .35s forwards}

/* Social */
.social-network{display:flex;gap:1.2rem}
figure{width:3rem;height:3rem;background-size:3rem}
#fig1{background-image:var(--logo-linkedin);transition:all .2s ease}
#fig1:hover{background-image:var(--logo-linkedin-hover);transform:scale(.92)}
#fig2{background-image:var(--logo-github);transition:all .2s ease}
#fig2:hover{background-image:var(--logo-github-hover);transform:scale(.92)}

/* ===== SECTIONS ===== */
section{padding:5rem 10rem}

/* HERO */
.home{
  width:100%;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;position:relative;
}
.home .home-mac{width:50%;position:absolute;right:5rem;z-index:-2;max-width:640px}
.home-presentation{min-width:45rem;max-width:60rem}
.home-presentation .my-name{ text-transform:uppercase;font-weight:300;font-size:1.6rem;letter-spacing:.12em;color:var(--muted) }
#name{ font-weight:900; font-size: clamp(3.2rem, 8vw, 7.2rem); line-height:.92; letter-spacing:-1.2px }
#last-name{ font-weight:300; font-size: clamp(2.8rem, 7vw, 6.2rem); line-height:.92; letter-spacing:-1px; padding-bottom:1.2rem }
.home h3{
  font-weight:800;font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  line-height:1.35;color:var(--accent);letter-spacing:.08em;padding-bottom:3.6rem
}
.home h3 .role-rose{color:var(--role-rose)}
.home h3 .divider{color:var(--text-color);opacity:.6;margin:0 .6rem}

/* Botões hero */
.button{max-width:48rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.project-button,.contact-button{
  font-size:1.5rem;line-height:1;padding:1rem 1.6rem;letter-spacing:.5px;border-radius:999px;
  border:2px solid var(--accent);transition:.25s;text-align:center
}
.project-button{background:linear-gradient(90deg,var(--accent),var(--gold));border-color:transparent;color:#121217}
.contact-button{border-color:var(--accent);color:var(--accent);background:transparent}
.project-button:hover{filter:saturate(105%) brightness(1.02)}
.contact-button:hover{background:var(--accent);color:#121217}

/* ===== ABOUT ===== */
.about{display:flex;gap:5rem;align-items:center;justify-content:space-around;width:100%;min-height:82vh}
.about-img img{max-width:45rem;width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.about-text{max-width:55rem}
.about-text h2{font-weight:900;font-size:4.2rem;color:var(--accent);padding-bottom:1.8rem;letter-spacing:.4px}
.about-text h2 span{color:var(--text-color);border-top:3px solid var(--accent);display:inline-block;padding-top:1rem}
.about-text p{font-size:1.7rem;line-height:2.6rem;color:var(--text-color);text-align:justify;margin-bottom:1.6rem}
.btn-cv{display:inline-block;margin-top:1rem;font-size:1.6rem;font-weight:800;border:2px solid var(--gold);color:var(--gold);padding:1rem 2rem;border-radius:10px;transition:.25s;background:transparent}
.btn-cv:hover{background:var(--gold);color:#121217}

/* ===== SKILLS ===== */
.skills{display:flex;flex-direction:column;align-items:center;text-align:center}
.line{height:3px;width:18rem;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:999px;margin-bottom:1.2rem}
.tech h2,.tool h2{margin-bottom:2.2rem;font-weight:900;letter-spacing:.6px}
.tech h2{font-size:3.6rem}.tool h2{font-size:2.6rem}
.techs{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;max-width:92rem;margin-bottom:4rem}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:76rem}
.card{
  padding:2.4rem;background:var(--card-bg-color);border:1px solid var(--stroke-color);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-color);transition:.25s;box-shadow:0 8px 22px rgba(0,0,0,.18)
}
.card:hover{transform:translateY(-6px);background:linear-gradient(180deg,var(--accent-2),transparent);border-color:rgba(255,92,138,.45)}
.card p{font-size:1.6rem}
.card img{width:6.2rem;height:6.2rem;object-fit:contain;display:block}

/* ===== PROJECTS ===== */
.projects{display:flex;flex-direction:column;align-items:center;text-align:center}
.main-text h2{margin-bottom:2.2rem;font-weight:900;font-size:3.6rem}
.portfolio-content{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
  gap:2rem;padding:0 2rem 7rem;align-items:start;width:100%;max-width:1200px
}
.row{
  position:relative;overflow:hidden;border-radius:14px;cursor:pointer;background:#0f0f0f;
  aspect-ratio:16/9;border:1px solid var(--stroke-color);box-shadow:0 14px 30px rgba(0,0,0,.28)
}
.row img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .45s ease,filter .45s ease}
.layer{
  position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  padding:1.4rem;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.0) 0%,rgba(0,0,0,.55) 100%);
  opacity:0;transform:translateY(6%);transition:opacity .35s ease,transform .35s ease
}
.layer h5{margin:0;font-size:1.8rem;font-weight:900}
.layer p{margin:0;font-size:1.3rem;opacity:.95}
.layer .site-github{display:flex;gap:1rem}
.layer i{
  color:var(--accent);font-size:2.1rem;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#fff;transition:.25s;box-shadow:0 6px 16px rgba(0,0,0,.18)
}
.layer i:hover{transform:translateY(-2px);background:var(--accent);color:#121217}
.row:hover img{transform:scale(1.06);filter:brightness(86%) saturate(110%)}
.row:hover .layer{opacity:1;transform:translateY(0)}

/* ===== CONTACT ===== */
.contact{background-image:var(--bg-contact);background-position:center;background-size:cover;display:flex;flex-direction:column;align-items:center;gap:2.2rem;text-align:center}
.contact-text h2{font-size:3.2rem;line-height:1.2;text-align:initial;font-weight:900}
.contact-text h2 span{color:var(--accent)}
.contact-form form{position:relative;width:100%;max-width:760px}
.contact-form form input,.contact-form form textarea{
  width:100%;padding:14px;background:var(--bg-form);color:var(--text-color);border:var(--border-form);outline:none;font-size:1.6rem;border-radius:12px;margin-bottom:10px;
  box-shadow:inset 0 0 0 1px var(--stroke-color)
}
.contact-form textarea{resize:none;height:22rem;margin-bottom:2.4rem}
.contact-form .submit{
  display:inline-block;background:linear-gradient(90deg,var(--accent),var(--gold));color:#121217;font-weight:900;font-size:1.6rem;border:none;
  padding:1.1rem 2rem;border-radius:999px;transition:.25s
}
.contact-form .submit:hover{filter:saturate(105%) brightness(1.02);cursor:pointer}
.contact-icons i{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent);color:#fff;font-size:2.4rem;transition:.25s;
  box-shadow:0 8px 18px rgba(0,0,0,.22)
}
.contact-icons i:hover{background:var(--gold);color:#121217}

/* ===== FOOTER ===== */
.end{position:relative;padding:12px 3%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--panel);border-top:1px solid var(--stroke-color)}
.top{position:absolute;right:10px;bottom:5px}
.top i{padding:10px;border-radius:10px;font-size:1.5rem;color:#121217;background:var(--accent);transition:.25s;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.top i:hover{transform:translateY(-2px);background:var(--gold)}
.last-text p{display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--muted)}
.last-text img{width:20px;margin-left:.6rem}

/* ===== ANIMAÇÕES ===== */
@keyframes slide-in{from{left:0}to{left:50%}}
@keyframes slide-back{from{left:50%}to{left:0}}

/* ===== RESPONSIVO ===== */
@media (max-width:1480px){nav{padding:0 3%}section{padding:10.5rem 8% 8rem}.end{padding:12px 3%}}
@media (max-width:1180px){
  .home{flex-direction:column}
  .home .home-mac{width:90%;position:static;right:auto;z-index:1;max-width:540px;margin-top:1rem;opacity:.98}
}
@media (max-width:920px){
  #menu-icon{display:block}
  .navlist{
    position:absolute;top:-1000px;right:0;left:0;background:var(--bg-color);
    display:flex;flex-direction:column;transition:all .35s ease;border-bottom:1px solid var(--stroke-color)
  }
  .navlist a{display:block;font-size:1.8rem;text-align:center;padding:1.1rem 0}
  .navlist.open{top:100%}
  .about{flex-direction:column;gap:2rem}
  .about-img img{max-width:80%}
  .techs,.tools{grid-template-columns:repeat(2,1fr);gap:1.6rem}
}
@media (max-width:768px){
  section{padding:9rem 1.6rem 6rem}
  .home{padding-top:10rem;align-items:flex-start}
  .home-presentation{min-width:auto;max-width:30rem}
  .home .home-mac{width:86%;max-width:420px}
  .button{gap:.8rem}
  .project-button,.contact-button{padding:.9rem 1.2rem;font-size:1.45rem}
  .portfolio-content{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:1.6rem;padding:0 0 6rem}
}
@media (max-width:480px){
  nav{padding:.6rem 1.2rem}
  .home-presentation .my-name{font-size:1.1rem}
  #name{font-size:clamp(2.4rem,7vw,3.6rem)}
  #last-name{font-size:clamp(2.2rem,6.6vw,3.2rem)}
  .home h3{font-size:1.25rem;padding-bottom:1.6rem}
  .home .home-mac{width:88%;max-width:360px}
  .card{padding:2rem}
  .card p{font-size:1.5rem}
  .contact-form form input,.contact-form form textarea{font-size:1.55rem}
  .contact-form .submit{width:100%;padding:1.2rem 1.4rem;font-size:1.6rem}
}