/* ===== BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  font-family: "Helvetica Neue", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
  color: #a28f94;
  overflow-x: hidden;
}

/* ===== TRANSPARENT HEADER ===== */
header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* ← right aligned */
  padding: 0 80px 0 0;         /* ← only right padding */
  background: transparent;
  z-index: 20;
}
nav ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 36px; }
nav li { flex-shrink: 0; }
nav a {
  text-decoration: none;
  color: #b79ca2;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  white-space: nowrap;
}
nav a:hover { opacity: .6; }

/* Hamburger toggle — hidden on desktop, shown only below the mobile breakpoint
   (see @media (max-width: 900px) below, where nav ul becomes a dropdown). */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #b79ca2;
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}

/* ===== HERO SECTION ===== */
main.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Fixed/parallax background ONLY for HOME */
.hero-bg {
    position: absolute; /* stays absolute, not fixed — position:fixed here would
      escape main.hero's overflow:hidden (fixed positioning is clipped by the
      viewport, not by a normal ancestor) and bleed through every section below
      it. background-attachment:fixed below gets the same parallax scroll
      effect on the image itself without that problem, since it only affects
      how the image is anchored inside this already-safely-contained box. */
    inset: 0;
    background-image: url("/imagens/fundos/about-me.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%;
    background-attachment: fixed;
    opacity: .32;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
  position: absolute;
  right: 30vw;          /* your previous placement */
  bottom: 22vh;
  max-width: 460px;
  text-align: right;
  z-index: 10;
  color: #8b7f83;
}

.hero-content h1 { 
    font-size: 34px; 
    letter-spacing: .1em; 
    font-weight: 400; 
    color: #8b7f83; 
}

.hero-content h2 { 
    margin-top: 6px; 
    font-size: 18px; 
    letter-spacing: .1em; 
    font-weight: 300; 
    color: #a28f94; 
}


.hero-content p  { 
    margin-top: 18px; 
    font-size: 12px; 
    letter-spacing: .1em; 
    text-transform: uppercase; 
    color: #b8a7ac; 
}

.social {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 15;
}
.social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #c3b1b6;
  display: grid; place-items: center;
  color: #c3b1b6; text-decoration: none; font-size: 14px;
  transition: background .2s, color .2s;
}
.social a:hover { background:#c3b1b6; color:#fff; }

/* ===== BIOGRAFIA SECTION (static background ONLY in this section) ===== */
section.biografia {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 120px 120px 80px;
  background-image: url("/imagens/fundos/about-me.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 100%;
  background-attachment: fixed;
  background-color: #fff;
  overflow: hidden; /* keeps pseudo-element inside */
}

/* overlay for fade effect */
section.biografia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.68; /* controls the fade strength */
  z-index: 0;
}

#educacao {
  position: relative;
  min-height: 100vh;
  padding: 260px 420px 120px;

  background-image: url("/imagens/fundos/about-me.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 100%;
  background-attachment: fixed;

  overflow: hidden;
  background-color: #fff;
}

/* overlay para suavizar a imagem (sem afetar o texto) */
#educacao::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0.68;     /* <-- controla aqui (0 = imagem forte, 1 = quase branco) */
  z-index: 0;
  pointer-events: none;
}

/* garante que o texto fica acima do overlay */
#educacao > *{
  position: relative;
  z-index: 1;
}

/* Make links inside Educacao look like the top menu */
.edu-link {
  text-decoration: none;
  color: #b79ca2;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  line-height: normal;   /* 🔑 important */
}

.edu-link:hover {
  opacity: .6;
}

/* TYPOGRAPHY – EXACT MATCH WITH BIOGRAFIA */
#educacao h1 {
  font-size: 24px;               /* igual ao .bio-content h1 */
  letter-spacing: 0.18em;        /* MESMA espaçamento de "MAFALDA" / "BIOGRAFIA" */
  font-weight: 400;
  text-transform: uppercase;
  color: #b8a7ac;                /* mesma cor de PORTFOLIO */
  margin: 0 0 0px 0;            /* mais espaço para respirar antes do texto */
}

#educacao h2 {
  font-size: 18px;
  letter-spacing: 0.22em;
  font-weight: 300;
  color: #a28f94;
  margin-top: 0;
  margin-bottom: 14px;
  text-transform: uppercase;
}

#educacao h3 {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: 0.25em;
  color: #b8a7ac;
  text-transform: uppercase;
}

#educacao p {
  margin: 0 0 0px 0;             /* menos espaço entre as linhas de texto */
  font-size: 12px;
  color: #6c6466;
  line-height: 1.6;
}

/* spacing between PROJETOS and PUBLICAÇÕES blocks */
#educacao .edu-block {
  margin-bottom: 80px;
}

/* make sure the actual text sits above the overlay */
section.biografia > * {
  position: relative;
  z-index: 1;
}

/* (REMOVED the fixed ::before that caused bleed across sections) */

.bio-content {
  position: relative;
  margin-right: min(20vw, 300px);   /* was `right: 20vw` — a position offset shifts the box
                                        visually after layout without constraining it, so on
                                        wide viewports it could push text past the right edge.
                                        margin participates in layout instead, so it can't. */
  z-index: 10;
  max-width: min(620px, calc(100vw - 240px));   /* never exceed the viewport regardless of
                                                    the section's 120px+120px padding */
  color: #514d4e;
  line-height: 1.6;
}

/* === Match BIOGRAFIA headings with HERO typography === */
.bio-content h1 {
  font-size: 34px;
  letter-spacing: .18em;
  font-weight: 400;
  color: #8b7f83; /* same as hero-content h1 */
}

.bio-content h2 {
  margin-top: 6px;
  font-size: 18px;
  letter-spacing: .22em;
  font-weight: 300;
  color: #a28f94; /* same as hero-content h2 */
}

.bio-content h3 {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #b8a7ac; /* same as hero-content p */
  font-weight: 400;
}

.bio-content p {
  margin-top: 18px;
  font-size: 15px;
  color: #6c6466;
  text-align: justify;
}

/* === FOTOGRAFIA SECTION (different static background ONLY here) === */
#fotografia{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;           /* center content vertically */
  justify-content: center;       /* center content horizontally */
  padding: 120px 120px 80px;     /* keep same spacing as other sections */
  overflow: hidden;
  z-index: 1;
  background-image: url("/imagens/fundos/home-img.jpg"); /* <-- your new image ONLY here */
  background-repeat: no-repeat;
  background-position: center top; /* or left top to match others */
  background-size: cover;          /* fill nicely */
  background-attachment: fixed;
  background-color: #fff;
}

/* optional: center logo + labels like your screenshot */
#fotografia .foto-content{
  text-align: center;
  color: #a28f94;
}
#fotografia .foto-content img{
  max-width: 160px;
  margin-bottom: 20px;
  opacity: 0.9;
}
#fotografia .foto-content h3{
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .22em;
  font-weight: 300;
  text-transform: uppercase;
  color: #b8a7ac;
}
#fotografia .foto-content h3 strong{
  color: #a28f94;  /* highlight word like "BABY" */
  font-weight: 400;
}

.tri-gallery {
  max-width: 1600px;              /* wider overall gallery */
  width: 96vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* center slightly wider */
  gap: 0.2vw;   /* smaller gap — almost touching */
  align-items: center;
}

/* delete these from your CSS */
.tri-slot {opacity: 0.5;  aspect-ratio: 5 / 5; } 

/* Clickable overlays for prev/next */
.tri-nav {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  pointer-events: none; /* children re-enable */
}

.tri-hit {
  width: 30%;
  pointer-events: auto;
}

.tri-hit.left { cursor: w-resize; }
.tri-hit.right { cursor: e-resize; }

/* Optional arrows */
.tri-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  font-size: 14px;
  color: #6c6466;
  pointer-events: none;
}
.tri-arrow.left { left: 8px; }
.tri-arrow.right { right: 8px; }

/* MOBILE */
@media (max-width: 900px) {
  header { padding: 0 20px; }

  /* Nav becomes a hamburger-triggered dropdown below 900px — 5 items including
     "Educação e Investigação" simply cannot fit in one row on a phone-width
     header no matter how small the font gets. */
  .nav-toggle { display: block; }
  nav ul {
    display: none;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    padding: 8px 0;
  }
  nav ul.open { display: flex; }
  nav li { flex-shrink: 1; width: 100%; }
  nav a {
    display: block;
    padding: 14px 24px;
    font-size: 14px;
    white-space: normal;
  }

  /* background-attachment:fixed is a known source of jank on mobile browsers
     that do support it (Android Chrome etc.) and is silently ignored by iOS
     Safari anyway (falls back to scroll) — turn it off below 900px everywhere
     the parallax is used, same as mainpage.css does for index.php. */
  .hero-bg,
  section.biografia,
  #educacao,
  #fotografia {
    background-attachment: scroll;
  }

  /* Home bg behavior on mobile */
  .hero-bg {
    background-position: center top;
    background-size: cover;
    opacity: .18;
  }

  /* right:30vw + max-width:460px leaves only ~263px for text on a 375px phone
     — tight for "MAFALDA" at 34px letter-spaced uppercase. Give it more room
     and scale the headings down a bit. */
  .hero-content {
    right: 6vw;
    left: 6vw;
    max-width: none;
  }
  .hero-content h1 { font-size: 28px; }
  .hero-content h2 { font-size: 15px; }

  /* Biografia & Fotografia bg behavior on mobile */
  section.biografia {
    background-position: center top;
    background-size: cover;
  }
  #fotografia {
    padding: 110px 30px 80px;
    background-position: center top;
    background-size: cover;
    justify-content: center;
  }

  /* #educacao's base padding is 260px 420px 120px — 420px of left+right
     padding alone is wider than every current phone's viewport. Guaranteed
     overflow without this override. */
  #educacao {
    padding: 110px 24px 60px;
  }

  .bio-content {
    max-width: 90vw;
    margin-right: 0;
  }

  /* .bio-content p { text-align: justify } outside this media query is more
     specific than .bio-content { text-align: left }, so it always won on
     mobile regardless -- justified text on a narrow column stretches short
     lines into large, uneven gaps between words. Match its specificity here
     so the mobile override actually takes effect. */
  .bio-content p {
    text-align: left;
  }

  .tri-gallery {
    grid-template-columns: 1fr;
  }
  .tri-slot img {
    height: 38vh;         /* smaller on phones */
  }
  .tri-gallery .tri-slot:nth-child(3) img {
    height: 42vh;
  }
  .tri-nav { display: none; } /* taps & swipe suffice on mobile */
}