:root{
  --bg: #f3f1f6;
  --text: rgba(18,18,24,.95);
  --muted: rgba(35,35,45,.80);
  --line: rgba(18,18,24,.14);

  --pink: #ff1aa8;
  --pink2:#ff62c6;
  --surface: rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.92);

  --shadow: 0 20px 60px rgba(20,20,30,.16);
  --radius: 18px;
  --radius2: 24px;

  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(255,26,168,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,98,198,.10), transparent 55%),
    linear-gradient(180deg, #f6f4f8, #f0eef5 60%, #f6f4f8);
  overflow-x: hidden;
}

.container{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
.muted{ color: var(--muted); }

/* TOPBAR */
.topbar{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20,20,30,.06);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 14px 0;
  flex-wrap: nowrap;
  min-width: 0;
}
.brand{ display:flex; align-items:center; gap:10px; min-width: 0; }
.brand__logo{
  height: 36px; width: auto; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  max-width: 260px;
}
.brand__text{ display:inline-flex; align-items:center; gap:10px; font-weight: 900; }
.brand__dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 6px rgba(255,58,167,.15);
}
.brand__name{ opacity:.95; }

.nav{ display:flex; align-items:center; position: relative; }
.nav__toggle{
  width:42px; height:42px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(0,0,0,.04); cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; margin: 6px 10px; background: rgba(10,10,15,.78); }

/* Drawer */
.nav__drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(360px, 86vw);
  background: rgba(11,11,16,.96);
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  transform: translateX(110%);
  transition: transform .18s ease;
  z-index: 80;
  display:flex;
  flex-direction: column;
  padding: 14px;
}
.nav__drawer.open{ transform: translateX(0); }
.nav__drawerHead{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav__drawerTitle{ font-weight: 950; }
.nav__close{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.04);
  color: rgba(255,255,255,.92);
  cursor:pointer; font-size: 22px;
}
.nav__close:hover{ border-color: rgba(255,58,167,.35); }

.nav__list{
  list-style:none;
  padding: 14px 0 0;
  margin: 0;
  display:flex; flex-direction: column; gap: 6px;
}
.nav__list a{
  font-size: 14px; color: var(--muted);
  padding: 12px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.nav__list a:hover{ color: var(--text); border-color: rgba(255,58,167,.30); background: rgba(255,58,167,.08); }
.nav__drawerCta{ margin-top: auto; padding-top: 12px; }

.nav__backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 70;
}
.nav__backdrop.open{ opacity: 1; pointer-events: auto; }

.topbar__cta{ display:flex; align-items:center; gap:10px; }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255,58,167,.35);
  background: linear-gradient(135deg, rgba(255,58,167,.25), rgba(255,58,167,.10));
  box-shadow: 0 10px 30px rgba(255,58,167,.12);
  color: var(--text); font-weight: 800; cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.btn--ghost{ border: 1px solid var(--line); background: rgba(255,255,255,.05); box-shadow: none; }
.btn--wide{ width: 100%; }

/* HERO */
.hero{
  position: relative; padding: 64px 0 54px; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.75)),
    url("assets/hero-bg.jpg");
  background-size: cover; background-position: center var(--hero-pos-y, 30%);
  filter: saturate(1.05); transform: scale(1.02);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(255,58,167,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(255,119,200,.16), transparent 55%),
    rgba(0,0,0,.15);
  pointer-events:none;
}
.hero__butterfly{
  position:absolute; right: -30px; bottom: -30px;
  width: 220px; opacity: .14; transform: rotate(-8deg);
  pointer-events:none;
}
.hero__inner{
  position: relative; z-index: 2;
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap: 18px; align-items:end;
}
.kicker{
  display:inline-flex; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.hero h1{ margin: 14px 0 10px; line-height: 1.08; font-size: clamp(34px, 5vw, 58px); }
.accent{
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle{ margin:0 0 18px; color: rgba(255,255,255,.78); font-size: 16px; max-width: 60ch; }
.hero__actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* IMPACT */
.impact{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.impactCard{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,11,16,.45);
  backdrop-filter: blur(10px);
  border-radius: 18px; padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.impactCard:hover{ border-color: rgba(255,58,167,.38); }
.impactNum{
  font-size: 26px; font-weight: 950; letter-spacing: .3px;
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.impactLabel{ margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.74); }

/* SECTIONS */
.section{ padding: 56px 0; }
.section__head{ margin-bottom: 18px; }
.section__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; flex-wrap: wrap; }
.section h2{ margin:0; font-size: 26px; }
.section__desc{ margin: 8px 0 0; color: var(--muted); max-width: 76ch; }

/* ABOUT */
.about{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.about__card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 18px;
}
.about__card--photo{ padding: 0; overflow:hidden; }
.about__photo{ position: relative; min-height: 260px; background: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.10); }
.about__photo img{ width:100%; height: 300px; object-fit: cover; }
.about__photoPlaceholder{
  display:none; position:absolute; inset:0;
  place-items:center; text-align:center; padding: 16px;
  color: rgba(255,255,255,.75);
}
.about__photo--placeholder .about__photoPlaceholder{ display:grid; }
.about__bio{ padding: 18px; }
.about__bio h3{ margin:0 0 8px; }
.about__bio p{ margin:0; color: rgba(255,255,255,.78); line-height: 1.6; }
.about__highlights{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag{
  font-size: 12px; border: 1px solid rgba(255,58,167,.35);
  background: rgba(255,58,167,.12);
  padding: 8px 10px; border-radius: 999px;
  color: rgba(255,255,255,.92); font-weight: 800;
}
.about__links{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.link{ color: rgba(255,58,167,.95); font-weight: 900; }
.link:hover{ text-decoration: underline; }
.facts{ margin: 0; padding: 0; list-style: none; display:grid; gap: 10px; }
.facts li{
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.86);
  color: rgba(255,255,255,.80);
}
.facts span{ color: rgba(255,255,255,.62); margin-right: 8px; }
.brandRow{ display:flex; gap: 10px; align-items:center; margin-top: 10px; }
.brandRow img{ height: 44px; opacity: .9; }

/* TIMELINE 2 */
.timeline2{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 18px;
  overflow:hidden;
}
.t2__rail{ position: relative; padding: 12px 10px 18px; }
.t2__rail::before{
  content:"";
  position:absolute;
  left: 10px; right: 10px;
  top: 26px;
  height: 2px;
  background: rgba(255,255,255,.14);
}
.t2__points{
  position: relative;
  display:flex;
  justify-content: space-between;
  gap: 10px;
}
.t2__dot{
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(255,58,167,.55);
  background: rgba(11,11,16,.55);
  box-shadow: 0 0 0 8px rgba(255,58,167,.10);
  display:grid; place-items:center;
  font-weight: 950;
  color: rgba(10,10,15,.92);
}
.t2__dot small{ font-size: 12px; }
.t2__cards{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(var(--t2-cols), 1fr);
  gap: 10px;
}
.t2__card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,11,16,.35);
  border-radius: 16px;
  padding: 14px;
  min-height: 150px;
}
.t2__place{ color: rgba(255,58,167,.95); font-weight: 950; font-size: 13px; }
.t2__title{ margin: 6px 0 4px; font-weight: 950; }
.t2__period{ color: rgba(255,255,255,.62); font-size: 13px; }
.t2__desc{ margin: 10px 0 0; color: rgba(255,255,255,.76); line-height: 1.55; font-size: 14px; }

/* FILTERS + CARDS */
.filters{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.input, .select, .textarea{
  width: 100%;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(255,58,167,.55);
  box-shadow: 0 0 0 6px rgba(255,58,167,.12);
}
.filters .input{ width: 220px; }
.filters .select{ width: 180px; }

.grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height: 260px;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(255,58,167,.35); }
.card__media{
  height: 140px;
  background: radial-gradient(circle at 30% 30%, rgba(255,58,167,.25), transparent 55%),
              radial-gradient(circle at 70% 50%, rgba(255,119,200,.20), transparent 55%),
              rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.card__media img{ width:100%; height:100%; object-fit: cover; opacity:.96; }
.card__body{ padding: 14px; display:grid; gap: 10px; flex:1; }
.card__title{ font-weight: 950; margin:0; }
.card__desc{ margin:0; color: rgba(255,255,255,.74); line-height: 1.5; font-size: 14px; }
.card__meta{ display:flex; gap: 8px; flex-wrap: wrap; }
.badge{
  font-size: 12px; border-radius: 999px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.86);
  color: rgba(255,255,255,.75);
}
.badge--pink{ border-color: rgba(255,58,167,.35); background: rgba(255,58,167,.12); color: rgba(10,10,15,.92); font-weight: 900; }
.card__actions{ margin-top:auto; display:flex; gap: 10px; align-items:center; }
.smallbtn{
  border: 1px solid rgba(255,58,167,.35);
  background: rgba(255,58,167,.12);
  color: rgba(255,255,255,.92);
  padding: 10px 12px; border-radius: 14px;
  font-weight: 950; cursor:pointer;
}
.smallbtn:hover{ filter: brightness(1.07); }

/* SKILLS */
.skills{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skills__card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 18px;
}
.skills__card h3{ margin:0 0 10px; }
.chips{ display:flex; flex-wrap: wrap; gap: 10px; }
.chip{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.86);
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: 13px;
}
.chip--pink{ border-color: rgba(255,58,167,.35); background: rgba(255,58,167,.12); }
.stack{ display:grid; gap: 10px; }
.stackItem{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.86);
  border-radius: 14px; padding: 10px 12px;
}
.stackItem__name{ font-weight: 950; }
.stackItem__level{ color: rgba(255,255,255,.62); font-size: 13px; }

/* CONTACT */
.contact{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items: start; }
.contact__cards{ margin-top: 12px; display:grid; gap: 10px; }
.contactCard{
  display:grid; gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 14px;
}
.contactCard:hover{ border-color: rgba(255,58,167,.35); }
.contactCard__title{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.contactCard__value{ font-weight: 950; color: rgba(255,255,255,.92); }
.form{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 18px;
  display:grid; gap: 12px;
}
.form h3{ margin:0; }
.form label{ display:grid; gap: 6px; }
.form label span{ font-size: 13px; color: rgba(10,10,15,.65); }
.textarea{ min-height: 120px; resize: vertical; }
.form__hint{ margin: 0; color: rgba(10,10,15,.65); font-size: 13px; min-height: 18px; }

/* FOOTER */
.footer{ border-top: 1px solid rgba(255,255,255,.25); padding: 22px 0; background: linear-gradient(90deg, rgba(255,26,168,.92), rgba(255,98,198,.86)); color: #fff; }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; flex-wrap: wrap;
}
.footer__left{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.footer__logo{ height: 34px; opacity: .9; }
.footer p{ margin:0; color: rgba(10,10,15,.65); }
.toTop{ color: rgba(255,58,167,.9); font-weight: 950; }

/* MODAL */
.modal{ position: fixed; inset: 0; display:none; z-index: 90; }
.modal[aria-hidden="false"]{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); }
.modal__content{
  position: relative;
  width: min(880px, calc(100% - 24px));
  margin: 72px auto;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__close{
  position:absolute; right: 12px; top: 10px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.04);
  color: rgba(10,10,15,.92);
  cursor:pointer; font-size: 22px;
}
.modal__close:hover{ border-color: rgba(255,58,167,.35); }
.modal__body{ padding: 18px; }
.modalTitle{ margin: 0 0 8px; font-size: 22px; }
.modalDesc{ margin: 0 0 14px; color: rgba(255,255,255,.75); line-height: 1.55; }
.modalRow{ display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.modalLink{ color: rgba(255,58,167,.95); font-weight: 950; }
.modalLink:hover{ text-decoration: underline; }

/* RESPONSIVE */
@media (max-width: 1040px){
  .hero__inner{ grid-template-columns: 1fr; align-items: start; }
  .impact{ grid-template-columns: repeat(2, 1fr); }
  .about{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .skills{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .filters .input, .filters .select{ width: 100%; }
}
@media (max-width: 720px){
  .topbar__cta{ display:none; } /* no mobile, CTA vai no drawer */
  .brand{ display:none; }       /* conforme você pediu: sem logo no mobile */
  .topbar__inner{ justify-content: flex-end; } /* deixa só o hambúrguer */
  .impact{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .hero{ padding: 56px 0 44px; }
  .hero__butterfly{ width: 170px; }
  .t2__rail::before{ display:none; }
  .t2__points{ justify-content: flex-start; gap: 14px; overflow:auto; padding-bottom: 6px; }
  .t2__cards{ grid-template-columns: 1fr; }
  .filters .input, .filters .select{ width: 100%; }
}


/* ======= NAV responsivo (desktop vs mobile) ======= */
.nav__desktop{ display:none; list-style:none; padding:0; margin:0; gap: 18px; align-items:center; }
.nav__desktop a{
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(10,10,15,.82);
}
.nav__desktop a:hover{ background: rgba(255,58,167,.10); color: rgba(10,10,15,.92); }
.nav__mobile{ list-style:none; padding: 10px 0 0; margin:0; display:flex; flex-direction:column; gap: 6px; }
.nav__mobile a{ display:block; padding: 12px 14px; border-radius: 12px; color: rgba(10,10,15,.90); font-weight: 750; }
.nav__mobile a:hover{ background: rgba(255,58,167,.10); }

@media (min-width: 860px){
  .nav__toggle{ display:none; }
  .nav__drawer, .nav__backdrop{ display:none !important; }
  .nav__desktop{ display:flex; }
  .topbar__cta{ display:inline-flex; }
}
@media (max-width: 859px){
  .topbar__cta{ display:none; }
}

/* ======= Ajustes de tema claro ======= */
.sectionCard, .card, .panel, .projectCard, .skillCard, .impactCard, .timelineCard, .contactCard{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(20,20,30,.08);
}


@media (min-width: 980px){
  :root{ --hero-pos-y: 18%; }
}

/* ===== Navbar: dropdown simples no mobile (sem drawer lateral) ===== */
.nav{ position: relative; }
.nav__dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(92vw, 360px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(18,18,24,.14);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(20,20,30,.18);
  padding: 10px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}
.nav__dropdown.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 520px;
}
.nav__dropdownCta{ padding-top: 10px; border-top: 1px solid rgba(18,18,24,.10); }
.nav__mobile{ list-style:none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 6px; }
.nav__mobile a{
  display:block; padding: 10px 10px; border-radius: 12px;
  color: var(--text); text-decoration:none;
}
.nav__mobile a:hover{ background: rgba(255,26,168,.10); }
@media (max-width: 820px){
  .nav__desktop{ display:none !important; }
  .topbar__cta{ display:none !important; }
}
@media (min-width: 821px){
  .nav__toggle{ display:none !important; }
  .nav__dropdown{ display:none !important; }
}

.footer a{ color:#fff; }
.footer a:hover{ opacity:.9; }

/* ===== Galeria (Quem sou) ===== */
.about__gallery{ margin-top: 18px; padding: 18px; border: 1px solid rgba(18,18,24,.12); border-radius: var(--radius2); background: var(--surface2); }
.about__galleryTitle{ margin: 0 0 6px; font-size: 18px; }
.about__galleryDesc{ margin: 0 0 14px; color: var(--muted); }
.galleryGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.galleryItem{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(18,18,24,.10);
  background: rgba(0,0,0,.02);
}
.galleryItem img{ width:100%; height: 160px; object-fit: cover; display:block; }
@media (max-width: 980px){
  .galleryGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleryItem img{ height: 170px; }
}

img{ max-width:100%; height:auto; }