:root{
  --bg: #060A06;
  --bg-alt: #0C140C;
  --card: #101A10;
  --card-border: rgba(122, 201, 90, 0.16);
  --text: #E4F4D4;
  --text-muted: #7A9E6A;
  --lime: #B8F04A;
  --lime-dim: #6A9E38;
  --teal: #5ECFC4;
  --teal-dim: #3A8A82;
  --firefly: #F5E642;
  --firefly-core: #EBDDB2;
  --firefly-glow: #A99A46;
  --stone: #6B8494;
  --line: rgba(122, 201, 90, 0.14);
  --glow: rgba(184, 240, 74, 0.12);
  --serif: 'Cinzel', serif;
  --sans: 'Nunito', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

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

html { scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

main, nav, header, section, footer { position:relative; z-index:2; }

/* ---------- Parallax background ---------- */
.parallax-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:var(--bg);
}
.parallax-layer{
  position:absolute;
  left:0;
  right:0;
  top:-80%;
  bottom:-80%;
  z-index:0;
  will-change:transform;
}
.layer-deep{
  background:
    radial-gradient(ellipse 90% 70% at 15% 30%, rgba(58, 138, 130, 0.09), transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 70%, rgba(74, 158, 56, 0.07), transparent 55%),
    radial-gradient(ellipse 70% 55% at 70% 40%, rgba(94, 207, 196, 0.06), transparent 65%);
}
.layer-mid{
  background:
    radial-gradient(circle at 70% 20%, rgba(184, 240, 74, 0.05) 0%, transparent 32%),
    radial-gradient(circle at 25% 80%, rgba(94, 207, 196, 0.04) 0%, transparent 38%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(184, 240, 74, 0.04), transparent 60%);
}
.layer-glow{
  background:
    radial-gradient(circle at 75% 65%, rgba(245, 230, 66, 0.05) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(245, 230, 66, 0.02) 0%, transparent 45%);
}

/* ---------- Firefly particles (WebGL shader) ---------- */
.firefly-field{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}

#fireflyCanvas{
  display:block;
  width:100%;
  height:100%;
}

@media (prefers-reduced-motion: reduce){
  .firefly-field{ display:none; }
  .parallax-layer{ transform:none !important; }
}

::selection{ background:var(--lime); color:var(--bg); }

a { color:inherit; }

img, .ph-img { display:block; width:100%; object-fit:cover; }
.ph-img{ height:auto; }

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--lime);
}

h1,h2,h3{ font-family:var(--serif); font-weight:500; letter-spacing:0.04em; }

a:focus-visible, button:focus-visible{
  outline:1px solid var(--lime);
  outline-offset:4px;
}

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

/* ---------- Placeholder blocks ---------- */
.placeholder{
  border:1px dashed rgba(122, 201, 90, 0.35);
  background:
    repeating-linear-gradient(135deg, rgba(122, 201, 90, 0.04) 0 12px, transparent 12px 24px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--lime-dim);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:24px;
}

.ph-note{
  color:var(--lime-dim);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.7;
}

/* ---------- Nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  background:linear-gradient(to bottom, rgba(6,10,6,0.92), transparent);
}
nav .logo{
  display:block;
  line-height:0;
  text-decoration:none;
}
.logo-mark{
  display:block;
  height:auto;
  width:auto;
  filter:drop-shadow(0 0 12px rgba(184, 240, 74, 0.22));
}
nav .logo-mark{
  height:34px;
}
.nav-right{
  display:flex;
  align-items:center;
  gap:32px;
}
.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  padding:4px 2px;
  transition:color .3s ease, text-shadow .3s ease;
}
.lang-flag{
  width:16px;
  height:11px;
  flex-shrink:0;
  border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.1);
}
.lang-btn:hover{
  color:var(--lime);
  text-shadow:0 0 12px var(--glow);
}
.lang-btn.active{
  color:var(--lime);
  font-weight:500;
  text-shadow:0 0 12px var(--glow);
}
.lang-sep{
  color:var(--text-muted);
  opacity:0.45;
  user-select:none;
}
nav ul{ list-style:none; display:flex; gap:32px; }
nav .nav-toggle{ display:none; }
nav a{
  text-decoration:none; font-family:var(--mono); font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
  transition:color .3s ease, text-shadow .3s ease;
}
nav a:hover{
  color:var(--lime);
  text-shadow:0 0 12px var(--glow);
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-inner{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding:140px 0 100px;
}

.hero-anim{
  position:absolute;
  right:max(-8%, calc((100vw - 1080px) / -2 - 32px));
  bottom:0;
  width:min(420px, 42vw);
  pointer-events:none;
  z-index:1;
  opacity:0.85;
  filter:drop-shadow(0 0 40px rgba(184, 240, 74, 0.15));
}
.hero-podium{
  position:relative;
  width:100%;
  z-index:1;
}
.hero-podium > #heroAnim{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  position:relative;
  z-index:1;
}
.hero-ember{
  position:absolute;
  left:50%;
  bottom:34%;
  width:268%;
  height:78%;
  transform:translateX(calc(-50% - 8%)) translateY(7%);
  object-fit:contain;
  object-position:bottom center;
  z-index:2;
  filter:drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  pointer-events:none;
}

.hero-inner > *:not(.hero-anim){
  position:relative;
  z-index:2;
}

.hero .eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(64px, 13vw, 168px);
  line-height:0.92;
  letter-spacing:0.06em;
  color:var(--text);
  text-shadow:0 0 60px rgba(184, 240, 74, 0.12);
}
.hero h1 em{
  font-style:italic; color:var(--lime); font-weight:400;
}
.hero .tagline{
  margin-top:28px;
  max-width:480px;
  font-size:18px;
  color:var(--text-muted);
  font-weight:300;
}
.hero .meta-row{
  margin-top:56px;
  display:flex;
  gap:48px;
  flex-wrap:wrap;
  padding-bottom:48px;
}
.hero .meta-row div{ display:flex; flex-direction:column; gap:6px; min-width:100px; }
.hero .meta-row .val{ font-family:var(--serif); font-size:22px; color:var(--firefly); }
.hero .meta-row .lab{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); }

.scroll-cue{
  position:absolute; bottom:36px; left:32px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-muted);
  display:flex; align-items:center; gap:10px;
  z-index:2;
}
.scroll-cue .line{ width:36px; height:1px; background:var(--lime-dim); }

@media (max-width:720px){
  .hero-anim{
    left:50%;
    right:auto;
    bottom:-10px;
    width:min(300px, 88vw);
    opacity:0.22;
    transform:translateX(-50%);
    filter:drop-shadow(0 0 30px rgba(184, 240, 74, 0.1));
  }
  .hero-ember{
    bottom:32%;
    width:275%;
    height:80%;
    transform:translateX(calc(-50% - 5%)) translateY(5%);
  }
}

/* ---------- Section shell ---------- */
section{
  position:relative;
  border-bottom:1px solid var(--line);
}
.section-inner{
  padding:120px 0;
}
section:last-of-type{ border-bottom:none; }
section:last-of-type .section-inner{ padding-bottom:120px; }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:64px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(32px,4vw,48px);
  color:var(--text);
  line-height:1.15;
}

.section-body{
  position:relative;
  z-index:1;
}

.fade-up{
  opacity:0;
  transition:opacity .8s ease;
}
.fade-up.in{ opacity:1; }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:start; }
.about .about-photo{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 20%;
  border-radius:4px;
}
.about > div:last-child{ display:flow-root; }
.about p{ font-size:17px; color:var(--text-muted); margin-bottom:18px; max-width:520px; }
.about p:first-of-type::first-letter{
  font-family:var(--serif); font-size:52px; color:var(--lime); float:left; line-height:0.8; margin:6px 8px 0 0;
}
.about p:last-child{ margin-bottom:0; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }

/* ---------- Timeline (trajetória) ---------- */
.timeline{ position:relative; padding-left:32px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:52px; }
.t-item{ position:relative; }
.t-item::before{
  content:''; position:absolute; left:-37.5px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--bg); border:1px solid var(--lime);
  box-shadow:0 0 8px var(--glow);
}
.t-item .yr{ font-family:var(--mono); font-size:12px; color:var(--teal); letter-spacing:0.1em; }
.t-item h3{ font-size:26px; margin:8px 0 6px; }
.t-item p{ color:var(--text-muted); font-size:15px; max-width:560px; }
.t-events{
  list-style:none;
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:560px;
}
.t-events li{ color:var(--text-muted); font-size:15px; line-height:1.55; }
.t-events a{
  color:var(--lime-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.t-events a:hover{ color:var(--lime); border-color:var(--lime-dim); }

/* ---------- Stats ---------- */
.stat-groups{
  display:flex;
  flex-direction:column;
  gap:56px;
}
.stat-group-title{
  font-family:var(--serif);
  font-size:clamp(22px,2.5vw,28px);
  font-weight:500;
  letter-spacing:0.04em;
  margin-bottom:24px;
  color:var(--text);
}
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat-card{
  background:var(--card); padding:36px 28px;
  transition:background .3s ease;
}
.stat-card:hover{ background:var(--bg-alt); }
.stat-card .num{ font-family:var(--mono); font-size:38px; color:var(--firefly); }
.stat-card .num.is-growing{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.stat-card .num.is-growing::after{
  content:'↗';
  font-size:0.48em;
  color:var(--lime);
  text-shadow:0 0 12px var(--glow);
  animation:trend-nudge 2s ease-in-out infinite;
}
@keyframes trend-nudge{
  0%, 100%{ transform:translateY(2px); opacity:0.7; }
  50%{ transform:translateY(-2px); opacity:1; }
}
.stat-card .lab{ margin-top:10px; font-size:13px; color:var(--text-muted); letter-spacing:0.02em; }
@media (max-width:820px){ .stat-grid{ grid-template-columns:1fr; } }

/* ---------- Legends ---------- */
#legends .section-head{ justify-content:center; }
.legends{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.legend-card{
  flex:0 1 calc(33.333% - 14px);
  min-width:200px;
  max-width:260px;
  background:var(--card); border:1px solid var(--card-border);
  padding:28px 20px; text-align:center;
  transition:border-color .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.legend-card:hover{
  border-color:var(--lime-dim);
  box-shadow:0 0 24px var(--glow);
}
.legend-card .legend-img{
  aspect-ratio:1/1;
  margin-bottom:16px;
  border-radius:4px;
  flex-shrink:0;
  width:100%;
  height:auto;
  object-fit:contain;
}
.legend-card h3{ font-size:19px; margin-bottom:4px; }
.legend-card .lab{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-top:6px; }

/* ---------- Achievements ---------- */
.ach-list{ display:flex; flex-direction:column; }
.ach-row{
  display:grid; grid-template-columns:100px 1fr auto; gap:24px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--line);
}
.ach-list .ach-row:last-child{ border-bottom:1px solid var(--line); }
.ach-row .place{ font-family:var(--serif); font-size:26px; color:var(--firefly); }
.ach-row h3{ font-size:20px; font-weight:400; }
.ach-row .ph-tag{ font-family:var(--mono); font-size:11px; color:var(--text-muted); }

/* ---------- Footer ---------- */
footer.wrap{
  padding:140px 32px 120px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:36px;
  position:relative;
  clear:both;
  text-align:center;
}
footer .logo{
  line-height:0;
}
footer .logo-mark{
  height:52px;
  filter:drop-shadow(0 0 16px rgba(184, 240, 74, 0.18));
}
footer .socials{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
footer a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; color:var(--text-muted); border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
footer a .social-icon{
  width:15px;
  height:15px;
  flex-shrink:0;
  display:block;
}
footer a:hover{ color:var(--lime); border-color:var(--lime-dim); }
footer .footer-copy{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  opacity:0.75;
}
footer .footer-copy-symbol{
  font-size:1.45em;
  vertical-align:-0.18em;
}

/* ---------- Mobile (max 720px) — desktop unchanged above this breakpoint ---------- */
@media (max-width:720px){
  body.nav-open{ overflow:hidden; }

  /* vagalumes — mais ao fundo e mais sutis (só mobile) */
  .firefly-field{
    z-index:0;
    opacity:0.38;
  }
  .parallax-layer{ z-index:1; }

  /* conteúdo — hero + seções (header/footer fora) */
  .wrap:not(footer){
    padding-left:max(44px, env(safe-area-inset-left));
    padding-right:max(44px, env(safe-area-inset-right));
  }

  nav{
    padding:16px 20px;
  }
  nav .logo-mark{ height:28px; }
  .nav-right{ gap:12px; }
  .lang-switch{ font-size:10px; }
  .lang-flag{ width:14px; height:10px; }
  nav ul.nav-menu{
    display:flex;
    flex-direction:column;
    gap:0;
    position:fixed;
    inset:0;
    z-index:49;
    padding:88px 28px 32px;
    background:rgba(6, 10, 6, 0.97);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
  }
  nav ul.nav-menu.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  nav ul.nav-menu li{ border-bottom:1px solid var(--line); }
  nav ul.nav-menu a{
    display:block;
    padding:18px 0;
    font-size:12px;
    letter-spacing:0.18em;
  }
  nav .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--line);
    border-radius:4px;
    background:rgba(12, 20, 12, 0.6);
    cursor:pointer;
    z-index:51;
  }
  nav .nav-toggle span{
    display:block;
    width:18px;
    height:1px;
    margin:0 auto;
    background:var(--text);
    transition:transform .25s ease, opacity .25s ease;
  }
  nav .nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  nav .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  nav .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* — hero — */
  .hero{ min-height:100svh; }
  .hero-inner{
    min-height:100svh;
    padding:104px 0 48px;
    justify-content:flex-start;
    isolation:isolate;
  }
  .hero-anim{ z-index:1; }
  .hero-podium,
  .hero-podium > #heroAnim{ z-index:1; }
  .hero-ember{ z-index:2; }
  .hero-inner > *:not(.hero-anim){ z-index:2; }
  .hero .eyebrow{
    margin-bottom:16px;
    font-size:10px;
    letter-spacing:0.18em;
  }
  .hero h1{
    font-size:clamp(75px, 23vw, 119px);
    line-height:0.9;
    letter-spacing:0.05em;
  }
  .hero .tagline{
    margin-top:18px;
    font-size:15px;
    line-height:1.65;
    max-width:none;
  }
  .hero .meta-row{
    margin-top:32px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px 20px;
    padding-bottom:0;
  }
  .hero .meta-row div{ min-width:0; }
  .hero .meta-row .val{ font-size:18px; }
  .hero .meta-row .lab{ font-size:9px; letter-spacing:0.12em; }
  .scroll-cue{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:36px;
    font-size:9px;
    letter-spacing:0.14em;
    line-height:1.5;
  }
  .scroll-cue .line{ width:28px; flex-shrink:0; }

  /* — sections — */
  .section-inner{ padding:64px 0; }
  section:last-of-type .section-inner{ padding-bottom:64px; }
  .section-body{ z-index:1; }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:32px;
  }
  .section-head h2{
    font-size:clamp(26px, 7.5vw, 34px);
    line-height:1.2;
  }

  /* — sobre — */
  .about{
    grid-template-columns:1fr;
    gap:28px;
  }
  .about .about-photo{
    aspect-ratio:4/3;
    max-height:280px;
  }
  .about p{
    font-size:15px;
    line-height:1.7;
    max-width:none;
    margin-bottom:16px;
  }
  .about p:first-of-type::first-letter{
    float:none;
    font-size:inherit;
    color:inherit;
    margin:0;
    font-family:inherit;
    line-height:inherit;
  }

  /* — trajetória — */
  .timeline{
    margin-left:12px;
    margin-right:4px;
    padding-left:22px;
    gap:36px;
  }
  .t-item::before{ left:-30.5px; }
  .t-item .yr{ font-size:11px; }
  .t-item h3{
    font-size:20px;
    line-height:1.25;
    margin:6px 0 8px;
    word-break:break-word;
  }
  .t-item p{
    max-width:none;
    font-size:14px;
    line-height:1.65;
  }
  .t-events{
    max-width:none;
    gap:8px;
  }
  .t-events li{
    font-size:14px;
    line-height:1.65;
  }

  /* — stats — */
  .stat-groups{ gap:40px; }
  .stat-group-title{ font-size:20px; margin-bottom:16px; }
  .stat-grid{ grid-template-columns:1fr; }
  .stat-card{ padding:22px 16px; }
  .stat-card .num{ font-size:28px; }
  .stat-card .lab{ font-size:12px; margin-top:6px; }
  .ph-note{ font-size:9px; line-height:1.6; margin-top:12px !important; }

  /* — legends — */
  .legends{
    gap:12px;
  }
  .legend-card{
    flex:1 1 100%;
    max-width:280px;
    padding:16px 12px;
  }
  .legend-card .legend-img{
    aspect-ratio:1/1;
    margin-bottom:12px;
  }
  .legend-card h3{ font-size:15px; }
  .legend-card .lab{ font-size:9px; margin-top:4px; }

  /* — conquistas — */
  .ach-row{
    display:grid;
    grid-template-columns:88px 1fr;
    grid-template-rows:auto auto;
    column-gap:16px;
    row-gap:4px;
    align-items:start;
    padding:20px 0;
  }
  .ach-row .place{
    grid-row:1 / span 2;
    align-self:center;
    white-space:nowrap;
    font-size:20px;
  }
  .ach-row h3{
    grid-column:2;
    font-size:16px;
    line-height:1.35;
    word-break:break-word;
  }
  .ach-row .ph-tag{
    grid-column:2;
    font-size:10px;
  }

  /* — footer (sem alterar padding lateral) — */
  footer.wrap{
    padding:88px 20px 72px;
    gap:28px;
  }
  footer .logo-mark{ height:44px; }
  footer .socials{ gap:14px 20px; }
  footer a{ font-size:10px; }
}

