/* ---------- tokens ---------- */
:root{
  --cream:#f6f8f9;
  --cream-2:#edf0f1;
  --ink:#121316;
  --ink-soft:#6b6e72;
  --dark:#0e0f11;
  --dark-2:#18191c;
  --lime:#ccff00;
  --line:#e1e3e5;
  --line-dark:rgba(246,248,249,0.12);
  --muted-dark:#9a9da0;

  --display:'Manrope', sans-serif;
  --text:'Manrope', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--display);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,p{margin:0;}
button{font-family:inherit; cursor:pointer;}
p, small, .hero-id-text span, .job-role span, .contact-card, .menu-footer a{font-family:var(--text);}

.dot{width:7px; height:7px; border-radius:50%; background:var(--lime); display:inline-block; flex:none;}

.logo-mark{
  width:28px; height:28px; border-radius:8px; background:var(--ink); color:var(--lime);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
}

/* ---------- pills / buttons ---------- */
.pill{
  display:inline-flex; align-items:center; padding:6px 20px; border-radius:999px;
  font-weight:700; font-size:0.62em; vertical-align:middle; white-space:nowrap;
}
.pill-white{background:var(--cream); border:1px solid var(--line); color:var(--ink);}
.pill-dark{background:var(--ink); color:var(--lime);}
.pill-outline{background:transparent; border:1px solid var(--ink-soft); color:var(--ink);}

.pill-btn{
  display:inline-flex; align-items:center; gap:16px; background:var(--lime); color:var(--ink);
  padding:10px 10px 10px 28px; border-radius:999px; font-weight:700; font-size:16px;
  width:fit-content;
}
.pill-btn-icon{
  width:38px; height:38px; border-radius:50%; background:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.pill-btn-sm{font-size:14px; padding:8px 8px 8px 22px;}
.pill-btn-sm .pill-btn-icon{width:32px; height:32px; font-size:14px;}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:72px clamp(20px,6vw,56px); max-width:1240px; margin:0 auto;
}
.hero-id{display:flex; align-items:center; gap:16px; margin-bottom:36px;}
.avatar{position:relative; width:56px; height:56px; flex:none;}
.avatar-face{
  position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover;
  z-index:2; border:1px solid var(--line);
}
.bars{position:absolute; left:-26px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:3px; z-index:1;}
.bars i{display:block; width:4px; border-radius:2px; background:var(--line);}
.bars i:nth-child(1){height:14px;}
.bars i:nth-child(2){height:24px;}
.bars i:nth-child(3){height:34px;}
.hero-id-text{display:flex; flex-direction:column; font-size:14px;}
.hero-id-text strong{font-weight:700;}
.hero-id-text span{color:var(--ink-soft); font-size:12.5px;}
.hero-social{display:flex; gap:8px; margin-left:8px;}
.hero-social a{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-soft);
}
.hero-social a img{width:14px; height:14px;}
.hero-social a:hover{color:var(--ink); border-color:var(--ink-soft);}

.hero-status{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);
  margin-bottom:26px;
}

.hero-title{
  font-weight:400; font-size:clamp(40px,8vw,90px); line-height:1.1; letter-spacing:-0.01em;
}
.hero-title .row{display:block; overflow:hidden; padding-bottom:0.08em;}
.hero-title .row > *{display:inline-block;}

.hero-period{
  font-family:var(--mono); font-size:13px; color:var(--ink-soft); margin-top:34px; letter-spacing:0.03em;
}
.hero-text{
  max-width:480px; font-size:17px; line-height:1.7; color:var(--ink-soft); margin-top:18px;
}
.hero .pill-btn{margin-top:48px;}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden; padding:22px 0; border-top:1px solid transparent;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{display:flex; align-items:center; gap:14px; width:max-content; animation:marquee 26s linear infinite;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-dark{background:var(--dark); color:var(--cream);}
.marquee-dark .marquee-track span{font-weight:800; font-size:18px; white-space:nowrap;}
.marquee-dark .marquee-track em{font-style:normal; font-weight:500; color:var(--muted-dark); margin-left:6px;}
.ast{color:var(--lime); font-size:20px; margin:0 6px;}
.ast.dark{color:var(--ink);}
.marquee-lime{background:var(--lime); color:var(--ink);}
.marquee-lime .marquee-track span{font-weight:700; font-size:18px; white-space:nowrap;}

/* ---------- certifications ---------- */
.certificacoes h2{margin-bottom:44px;}
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.cert-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px;
  display:flex; flex-direction:column; gap:18px;
}
.cert-logo{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden;
}
.cert-logo img{width:100%; height:100%; object-fit:cover;}
.cert-logo-mono{font-family:var(--mono); font-size:12px; font-weight:700; background:var(--ink); color:var(--lime); border-color:transparent;}
.cert-logo-rd{background:#e10a4f; color:#fff;}
.cert-card h3{font-size:15.5px; font-weight:600; line-height:1.4;}
@media (max-width:900px){ .cert-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cert-grid{grid-template-columns:1fr;} }

/* ---------- trajetoria: name-left, line, summary-right ---------- */
.timeline{margin-top:80px; display:flex; flex-direction:column;}
.timeline-item{
  display:flex; align-items:flex-start; gap:28px;
  padding-bottom:110px;
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-left{width:260px; flex:none; opacity:0;}
.timeline-tc{display:block; font-family:var(--mono); font-size:13px; color:var(--lime); margin-bottom:14px;}
.timeline-item h3{font-size:clamp(24px,2.6vw,32px); font-weight:800; color:var(--cream); line-height:1.15; display:flex; align-items:center; gap:12px;}
.timeline-logo{
  width:42px; height:42px; border-radius:50%; object-fit:cover; background:#fff;
  border:1px solid var(--line-dark); flex:none;
}
.timeline-line{
  flex:none; width:64px; height:1px; background:var(--lime); margin-top:20px;
  transform-origin:left center; transform:scaleX(0);
}
.timeline-right{flex:1; padding-top:2px; max-width:560px;}
.timeline-role{display:block; font-size:15px; color:var(--lime); opacity:0; transform:translateX(-16px);}
.timeline-item p{margin-top:16px; font-size:17px; color:var(--muted-dark); line-height:1.75; opacity:0; transform:translateX(-16px);}
@media (max-width:820px){
  .timeline-item{flex-direction:column; gap:20px; padding-bottom:70px;}
  .timeline-left{width:auto;}
  .timeline-line{width:40px; height:1px;}
}

/* ---------- working photo ---------- */
.working{padding:70px clamp(20px,6vw,56px);}
.working-frame{
  max-width:1240px; margin:0 auto; aspect-ratio:1400/350;
  border-radius:24px; overflow:hidden; position:relative;
}
.working-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center; display:block; will-change:transform;
}

/* ---------- section shared ---------- */
section{padding:110px clamp(20px,6vw,56px);}
.projects, .skills, .faq, .contact-list, .certificacoes{max-width:1240px; margin:0 auto;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  color:var(--ink-soft); margin-bottom:20px;
}
.eyebrow-light{color:var(--muted-dark);}
section h2{font-size:clamp(32px,6vw,90px); font-weight:400; line-height:1.08; letter-spacing:-0.01em;}

/* ---------- projects ---------- */
.projects{padding-bottom:100px;}
.section-head{margin-bottom:48px;}
.section-intro{margin-top:22px; max-width:56ch; font-size:16px; line-height:1.7; color:var(--ink-soft);}
.section-head-row{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.project-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px;
  display:flex; flex-direction:column;
}
.project-card .tag{
  display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:11.5px; color:var(--lime);
  background:var(--ink); padding:4px 11px; border-radius:999px; margin-bottom:14px;
}
.project-card h3{font-size:17px; font-weight:800; line-height:1.3;}
.project-card p{font-size:13.5px; color:var(--ink-soft); margin-top:10px; line-height:1.6;}
@media (max-width:900px){ .project-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .project-grid{grid-template-columns:1fr;} }

/* ---------- portfolio ---------- */
.portfolio{max-width:1240px; margin:0 auto;}
.portfolio h2{margin-bottom:14px;}
.portfolio-joke{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); margin-bottom:36px;}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.portfolio-item{
  position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:none; padding:0;
  cursor:pointer; background:none; display:block; width:100%;
}
.portfolio-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.portfolio-item:hover img{transform:scale(1.06);}
.portfolio-item-label{
  position:absolute; left:0; right:0; bottom:0; padding:16px; text-align:left;
  font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
@media (max-width:900px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .portfolio-grid{grid-template-columns:1fr;} }

.portfolio-modal{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.portfolio-modal.is-open{opacity:1; pointer-events:auto;}
.portfolio-modal-backdrop{position:absolute; inset:0; background:rgba(18,19,22,0.82);}
.portfolio-modal-card{
  position:relative; width:min(960px,100%); max-height:86vh; background:var(--cream);
  border-radius:20px; overflow:hidden; display:flex;
  transform:translateY(16px); transition:transform .3s ease;
}
.portfolio-modal.is-open .portfolio-modal-card{transform:translateY(0);}
.portfolio-modal-media{flex:1; min-width:0; background:var(--ink); position:relative;}
.portfolio-modal-text{flex:1; min-width:0; padding:44px; overflow-y:auto; display:flex; flex-direction:column; justify-content:center;}
.portfolio-modal-text h3{font-size:clamp(24px,3vw,34px); font-weight:400; color:var(--ink); margin-bottom:18px;}
.portfolio-modal-text p{font-size:15.5px; line-height:1.7; color:var(--ink-soft);}
.portfolio-modal-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:var(--cream); border:1px solid var(--line); font-size:16px; cursor:pointer; z-index:3;
}
@media (max-width:760px){
  .portfolio-modal-card{flex-direction:column; max-height:92vh; overflow-y:auto;}
  .portfolio-modal-media{aspect-ratio:4/5;}
  .portfolio-modal-text{padding:28px;}
}

/* ---------- carousel ---------- */
.carousel{position:relative; width:100%; height:100%; overflow:hidden;}
.carousel-img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.85); border:none; font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink); z-index:2;
}
.carousel-prev{left:12px;}
.carousel-next{right:12px;}
.carousel-nav:hover{background:#fff;}
.carousel-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2;}
.carousel-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5); border:none; cursor:pointer; padding:0;}
.carousel-dot.is-active{background:#fff;}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.is-open{opacity:1; pointer-events:auto;}
.lightbox-backdrop{position:absolute; inset:0; background:rgba(14,15,17,0.92);}
.lightbox-img{position:relative; max-width:92vw; max-height:92vh; object-fit:contain; border-radius:6px;}

/* ---------- skills ---------- */
.skills{background:var(--cream);}
.skills h2{margin-bottom:48px;}
.skill-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.skill-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; display:flex; align-items:center; gap:16px;}
.skill-card strong{display:block; font-size:15.5px;}
.skill-card small{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.badge{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700; color:#fff; flex:none; overflow:hidden;
}
.badge img{width:100%; height:100%; object-fit:cover;}
.badge-ps{background:#001e36;} .badge-ae{background:#00005b;} .badge-pr{background:#00005b;}
.badge-wp{background:var(--ink);} .badge-ai{background:#33001a;} .badge-ads{background:#4285f4;}
.badge-rd{background:#e10a4f;} .badge-cc{background:var(--ink); color:var(--lime);}
@media (max-width:700px){ .skill-grid{grid-template-columns:1fr;} }

/* ---------- trajetoria ---------- */
.trajetoria{background:var(--dark); color:var(--cream); padding-bottom:70px;}
.trajetoria-inner{max-width:1240px; margin:0 auto;}
.trajetoria h2{margin-bottom:6px;}
.trajetoria .ast{margin-left:4px;}

/* ---------- contact list ---------- */
.contact-list h2{margin-bottom:36px;}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px;}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px;
  display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600;
}
.contact-icon{
  width:44px; height:44px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;
}
.contact-icon img{width:20px; height:20px;}
.cta-bar{
  display:flex; align-items:center; justify-content:center; background:var(--lime); color:var(--ink);
  border-radius:20px; padding:44px; font-size:clamp(20px,3vw,28px); font-weight:800;
}
@media (max-width:760px){ .contact-cards{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .contact-cards{grid-template-columns:1fr;} }

/* ---------- final cta ---------- */
.final-cta{
  background:var(--dark); color:var(--cream); text-align:center;
  display:flex; flex-direction:column; align-items:center; padding-bottom:70px;
}
.final-cta h2{font-size:clamp(34px,7vw,90px); font-weight:400; line-height:1.08;}
.lime-dot{color:var(--lime);}
.final-cta > p{color:var(--muted-dark); font-size:16px; margin-top:18px;}
.final-divider{width:100%; max-width:640px; height:1px; background:var(--line-dark); margin:48px 0;}
.final-id{display:flex; align-items:center; gap:16px; margin-bottom:34px;}
.final-id .hero-id-text span{color:var(--muted-dark);}
.final-id .hero-social a{border-color:var(--line-dark); color:var(--muted-dark);}
.avatar-sm{width:48px; height:48px;}
.avatar-sm .avatar-face{font-size:13px;}
.final-label{font-family:var(--mono); font-size:12.5px; color:var(--muted-dark); letter-spacing:0.05em; text-transform:uppercase;}
.final-email{font-size:clamp(24px,4vw,36px); font-weight:800; color:var(--cream); margin-top:12px;}
.final-note{max-width:44ch; font-size:14.5px; color:var(--muted-dark); margin-top:20px; line-height:1.6;}
.final-cta .pill-btn{margin-top:36px;}

/* ---------- footer ---------- */
.foot{
  display:flex; justify-content:space-between; align-items:center; padding:28px clamp(20px,6vw,56px);
  font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:var(--dark); color:var(--muted-dark);
}
.foot-logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; color:var(--cream);}
.foot .logo-mark{background:var(--lime); color:var(--ink);}

/* ---------- reveal helpers ---------- */
.reveal-up{opacity:0; transform:translateY(24px);}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}