/* =========================================================
   APPLE DEVELOPER ACADEMY | MACKENZIE
   Site Final — Processo Seletivo 2027/2028
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: rgb(31, 31, 31);
  background: var(--c-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.35;
  width: 100%;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- THEMES ---------- */

body {
  --c-dark:    rgb(2, 63, 81);
  --c-mid:     rgb(3, 175, 213);
  --c-accent:  rgb(3, 115, 142);
  --c-text:    rgb(31, 31, 31);
  --c-text-mute: rgba(31, 31, 31, 0.5);
  --c-surface: rgb(255, 255, 255);
  --c-line:    rgba(120, 120, 128, 0.18);

  --stage-0: rgb(3, 175, 213);
  --stage-1: rgb(178, 72, 171);
  --stage-2: rgb(248, 157, 42);
  --stage-3: rgb(47, 198, 60);
  --stage-4: rgb(242, 28, 115);
}
body[data-theme="azul"]    { --c-dark: rgb(2,63,81);   --c-mid: rgb(3,175,213); --c-accent: rgb(3,115,142); }
body[data-theme="verde"]   { --c-dark: rgb(1,91,56);   --c-mid: rgb(47,198,60); --c-accent: rgb(22,164,34); }
body[data-theme="roxo"]    { --c-dark: rgb(78,5,113);  --c-mid: rgb(178,72,171); --c-accent: rgb(184,52,176); }
body[data-theme="rosa"]    { --c-dark: rgb(100,2,21);  --c-mid: rgb(242,28,115); --c-accent: rgb(208,40,108); }
body[data-theme="amarelo"] { --c-dark: rgb(166,54,42); --c-mid: rgb(248,157,42); --c-accent: rgb(203,139,56); }

body[data-mode="dark"] {
  --c-text:    rgb(241,241,241);
  --c-text-mute: rgba(255,255,255,0.55);
  --c-surface: rgb(31,31,31);
  --c-line:    rgba(175,175,186,0.18);
}
body[data-mode="dark"][data-theme="azul"]    { --c-dark: rgb(0,28,37);  --c-mid: rgb(0,147,180); --c-accent: rgb(0,147,180); }
body[data-mode="dark"][data-theme="verde"]   { --c-dark: rgb(0,54,33);  --c-mid: rgb(22,164,34); --c-accent: rgb(22,164,34); }
body[data-mode="dark"][data-theme="roxo"]    { --c-dark: rgb(29,0,43);  --c-mid: rgb(184,52,176); --c-accent: rgb(184,52,176); }
body[data-mode="dark"][data-theme="rosa"]    { --c-dark: rgb(48,0,10);  --c-mid: rgb(208,40,108); --c-accent: rgb(208,40,108); }
body[data-mode="dark"][data-theme="amarelo"] { --c-dark: rgb(65,12,7);  --c-mid: rgb(203,139,56); --c-accent: rgb(203,139,56); }

body::before {
  content: "";
  position: fixed; inset: 0;
  /* Match the horizontal gradient used on .hero/.strip/.lens--last so
     that any area where the body shows through (the gap above a strip
     where the lens above cuts upward at center) blends seamlessly with
     the strip's own gradient. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.32'/></svg>"),
    linear-gradient(90deg,
      var(--c-dark) 0%,
      var(--c-mid)  50%,
      var(--c-dark) 100%);
  background-size: 220px 220px, auto;
  background-repeat: repeat, no-repeat;
  z-index: -1;
  transition: background 350ms ease;
}

/* Each colored section (hero, strip, footer) carries a HORIZONTAL
   linear gradient — dark on the left edge, light at horizontal middle,
   dark on the right edge. Matches the Figma sample (pixel-checked on
   "Site - Final - Azul.png": x=0.05 → rgb(3,108,134), x=0.35 →
   rgb(3,154,189), x=0.95 → rgb(2,84,104)).
   A fine SVG noise layer overlays the gradient with a sand-grain
   texture. */
.hero,
.strip,
.lens--last {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.32'/></svg>"),
    linear-gradient(90deg,
      var(--c-dark) 0%,
      var(--c-mid)  50%,
      var(--c-dark) 100%);
  background-size: 220px 220px, auto;
  background-repeat: repeat, no-repeat;
}

:root {
  --page-pad-x: clamp(24px, 7vw, 130px);
  --max-content: 1080px;
  /* curve magnitude (vertical depth of the arch). Matches the planning where
     the arch ~= 8-9% of viewport width. */
  --lens-curve: clamp(70px, 8.19vw, 118px);
}

/* ==================================================================
   NAV
   ================================================================== */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 72px;
  padding: 0 36px;
  background: color-mix(in srgb, var(--c-dark) 65%, transparent);
  backdrop-filter: blur(19.2px);
  -webkit-backdrop-filter: blur(19.2px);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav__logo { display: inline-flex; align-items: center; gap: 14px; }
.nav__logo-img { height: 38px; width: auto; display: block; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-mark--mackenzie {
  width: 38px; height: 38px;
  border-radius: 50%; border: 2.5px solid #fff;
}
.logo-mark--mackenzie .logo-mark__letter {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px; line-height: 1; color: #fff; margin-top: -2px;
}
.logo-mark--academy { width: 22px; height: 36px; flex-direction: column; justify-content: center; gap: 4px; }
.logo-mark--academy > span { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.logo-mark--academy > span:nth-child(2) { transform: scale(1.4); }

.logo-text { font-family: "Instrument Serif", Georgia, serif; color: #fff; line-height: 1; }
.logo-text--mackenzie { font-size: 24px; }
.logo-text--academy {
  font-size: 11px; display: inline-flex; flex-direction: column;
  letter-spacing: 0.02em; line-height: 1.15;
}
.logo-divider { display: inline-block; width: 1px; height: 36px; background: #fff; }

.nav__links { display: flex; gap: 50px; list-style: none; margin: 0; padding: 0; font-size: 17px; }
.nav__links a { color: #fff; opacity: 0.85; padding: 6px 4px; border-bottom: 2px solid transparent; transition: opacity 180ms; }
.nav__links a:hover { opacity: 1; }
.nav__cta { opacity: 1 !important; border-bottom-color: #fff !important; font-weight: 500; }

/* Hamburger button — only shows on mobile (see media query below).
   Three horizontal bars that morph into an "X" when the menu is open. */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Reduce-motion toggle: pill button with a pulsing dot. Pinned inside
   the hero, just below the fixed nav. When pressed, the body gets
   .reduce-motion which neutralises the polaroid explode animation and
   the folder hover transforms. */
.motion-toggle {
  position: absolute;
  top: calc(72px + 18px);
  right: clamp(20px, 4vw, 36px);
  z-index: 10;
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px;
  padding: 0 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}
.motion-toggle:hover { background: rgba(255,255,255,0.18); }
.motion-toggle[aria-pressed="true"] {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.75);
}
.motion-toggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6ee7a8;
  animation: motionPulse 1.6s ease-in-out infinite;
}
.motion-toggle[aria-pressed="true"] .motion-toggle__dot {
  background: #ffb84d;
  animation: none;
}
@keyframes motionPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.65; }
}

/* When motion is reduced, kill the polaroid explode transition and the
   folder hover/active transforms. Everything else (gradients, nav, page
   layout) is unaffected. */
body.reduce-motion .poly,
body.reduce-motion .folder,
body.reduce-motion .folder__peek {
  transition: none !important;
  animation: none !important;
}
body.reduce-motion .folder:hover { transform: none; }


/* ==================================================================
   HERO (gradient + title + clickable folder)
   ================================================================== */

.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  padding: clamp(88px, 9vw, 128px) 24px clamp(44px, 5vw, 72px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: clamp(16px, 2.8vw, 40px);
  overflow: visible;
}
.hero__title {
  margin: 0; text-align: center;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 75px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
  position: relative;
  z-index: 6;
  pointer-events: none;
}
.hero__title span { display: block; white-space: nowrap; }

/* ---------- the giant FOLDER (image-based) ---------- */

.folder {
  position: relative;
  width: clamp(260px, 33vw, 476px);
  aspect-ratio: 639 / 501; /* proporção real da pasta.png */
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: -16px;
  cursor: pointer;
  outline-offset: 8px;
  z-index: 5;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 600ms ease;
  display: block;
  margin-bottom: 28px;
  filter: drop-shadow(0 24px clamp(40px, 5.49vw, 78.98px) rgba(0,0,0,0.35));
}
.folder:hover { transform: translateY(-4px) scale(1.03); }
.folder:hover .folder__peek { filter: blur(0.6px) saturate(1.05); }
.folder:active { transform: translateY(0) scale(0.98); }
.folder[aria-pressed="true"] .folder__peek {
  opacity: 0;
  transition: opacity 320ms ease;
}
.folder[aria-pressed="true"] .folder__hint { opacity: 0; }

/* The folder artwork itself — IN FRONT of the peeking icons so its
   translucent pocket "glass" overlays the icons, making them look
   like they're inside the folder. */
.folder__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}

/* Layer that holds the peeking icons, BEHIND the folder image. The
   pocket part of the folder PNG is translucent, so the icons show
   through as if they're inside.
   `overflow: hidden` strictly clips anything that would stick out of
   the pocket area. */
/* Static peek decorations baked into the folder HTML are hidden — the
   real polaroids fly INTO the folder on hover, so we don't need (and
   don't want) duplicate static images cluttering the empty state. */
.folder__peek { display: none !important; }
.folder__peeks { display: none !important; }

/* Legacy folder-peek positioning (no-op now that peeks are hidden, kept
   only so existing selectors in the file don't dangle into bad syntax). */
.folder__peek--legacy {
  right: 6%;
  top: 22%;
  bottom: 6%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Icons inside the folder pocket. Already softened by the folder's
   own translucency overlaying them; we just add a tiny blur for depth. */
.folder__peek {
  position: absolute;
  display: block;
  transform-origin: center;
  opacity: 0.95;
  filter: blur(0.4px);
}
.folder__peek img {
  width: 100%; height: auto; display: block;
}
/* Spread the 5 peeks across the pocket area */
.folder__peek--1 { left:  4%;  top: 10%; width: 24%; transform: rotate(-10deg); }
.folder__peek--2 { left: 30%;  top: 22%; width: 24%; transform: rotate(  4deg); }
.folder__peek--3 { right: 4%;  top:  8%; width: 30%; transform: rotate( 12deg); }
.folder__peek--4 { left:  6%;  top: 56%; width: 20%; transform: rotate( -6deg); }
.folder__peek--5 { left: 36%;  top: 50%; width: 22%; transform: rotate(  8deg); }

.folder__hint {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  letter-spacing: 0.04em;
  animation: folderHintBlink 1.6s ease-in-out infinite;
}
@keyframes folderHintBlink {
  0%, 100% { opacity: 0.55; }
  50%     { opacity: 1; }
}
.hero__title span:nth-child(2) { letter-spacing: 0.01em; }

/* ==================================================================
   LENS — white blob with curved top + bottom (matches Figma Subtract)
   ================================================================== */

.lens {
  position: relative;
  /* Lens needs to render IN FRONT of the strips it neighbors so that
     the clip-path's convex-down bottom (default geometry) at center can
     visibly cover the strip below — that's what produces the strip's
     "smile" top curve. (Without this, the strip's flat top rectangle
     would cover the lens's convex area.) */
  z-index: 1;
  background: var(--c-surface);
  color: var(--c-text);
  padding:
    calc(var(--lens-curve) + clamp(40px, 6vw, 80px))
    var(--page-pad-x)
    calc(var(--lens-curve) + clamp(80px, 9vw, 140px));
  /* Soft inner shadow on the colored gradient near the lens edges —
     achieved by giving the lens a drop-shadow that follows its
     clip-path. Two layers: a tight dark one for a defined edge and a
     broader softer one for the vignette feel from the Figma reference. */
  filter:
    drop-shadow(0  4px  6px rgba(0,0,0,0.42))
    drop-shadow(0 16px 28px rgba(0,0,0,0.32))
    drop-shadow(0 -4px  6px rgba(0,0,0,0.36))
    drop-shadow(0 -16px 28px rgba(0,0,0,0.26));
  overflow: visible;

  /* Lens shape is created by SVG <clipPath> references defined in the body.
     Default (lens 2): shifted DOWN at center — top edge dips DOWN at center
     (smile), bottom edge extends DOWN at center (convex-down). */
  --arch: var(--lens-curve);
  clip-path: url(#lensClipDown);
}

/* First lens hosts the hero-card up top — shifted UP at center geometry:
   top edge peaks UP at center (dome up), bottom edge cuts UP at center. */
.lens--first {
  clip-path: url(#lensClipUp);
  padding-top: calc(var(--lens-curve) + clamp(24px, 4vw, 52px));
}

/* Shell wraps lens 1 + its polaroids so the polaroids can render on top
   of the lens without being clipped by the lens's clip-path. */
.lens-shell {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--lens-curve));
}

/* Strips sit between lenses on the body gradient */
.strip + .lens {
  margin-top: calc(-1 * var(--lens-curve));   /* tuck the top arch into the strip above */
}
.lens:not(.lens--last) + .strip,
.lens-shell + .strip {
  margin-top: calc(-1 * var(--lens-curve));   /* the strip eats into lens bottom arch */
}

/* LAST lens (footer) — only TOP arch with dome up at center, flat bottom.
   Brand title and footer nav sit on the left/right edges of the content
   area; they only need enough top padding to clear the curve at their
   horizontal positions (the curve dips down at the corners). */
.lens--last {
  margin-bottom: 0;
  padding:
    clamp(60px, 7vw, 110px)
    var(--page-pad-x)
    clamp(40px, 5vw, 60px);
  clip-path: url(#lensClipFooter);
}

/* lens content stays within max-width and is pushed inside the curves
   (polaroid clusters are full-width so they can scatter to the edges) */
.lens > *:not(.polaroids) { max-width: var(--max-content); margin-inline: auto; }
.lens > .polaroids { max-width: none; }

/* ==================================================================
   HERO CARD (inside lens--first)
   ================================================================== */

.hero-card {
  position: relative; z-index: 5;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
  max-width: 560px;
  margin: 0 auto clamp(52px, 7vw, 96px);
  padding: 0 16px;
}
.hero-card__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(34px, 3.7vw, 48px);
  line-height: 1.1;
  /* Title uses the theme's PRIMARY (bright) color — same as the gradient
     mid-stop. Per Figma: azul → rgb(3,175,213), rosa → rgb(242,28,115). */
  color: var(--c-mid);
}
.hero-card__subtitle {
  margin: -8px 0 0;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 35px);
  line-height: 1.1;
  color: var(--c-text);
}
.hero-card__dates {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 6px;
}
.hero-card__dates-label {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  color: var(--c-text-mute);
}
.hero-card__dates-value {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 30px);
  color: var(--c-text);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.1;
  padding: 12px 32px;
  border-radius: 999px;
  border: 3px solid transparent;
  transition: transform 180ms, background 180ms, color 180ms, box-shadow 180ms;
  white-space: nowrap; font-family: inherit;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Primary CTA — solid swatch in the current theme's main color */
.btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
/* hover: escurece para --c-dark (ex: #023F51 no tema azul) */
.btn--primary:hover {
  background: var(--c-dark);
  border-color: var(--c-dark);
}
/* active: volta ao accent */
.btn--primary:active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateY(0);
}
.btn--secondary { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.btn--secondary:hover { background: var(--c-accent); color: #fff; }

/* ==================================================================
   POLAROIDS — explode from the folder to the top edges of lens 1 & 2
   ================================================================== */

.polaroids {
  position: absolute;
  left: 0; right: 0;
  /* High z so polaroids stay ON TOP of every section as they fly out
     of the folder. They stay positioned inside the lens-shell so they
     only appear in the top portion of the page. */
  z-index: 50;
  pointer-events: none;
  overflow: visible;
}
/* Hero cluster — covers the full hero height so polaroids scatter
   around the title and folder when they explode out. */
.polaroids--hero {
  top: 0;
  bottom: 0;
}
/* Lens 1 permanent stickers — anchored to the top of the lens-shell and
   covering the area around the "Processo Seletivo" card. */
.polaroids--lens1 {
  top: 0;
  height: clamp(420px, 46vw, 620px);
}
.polaroids--top1 {
  top: 0;
  height: clamp(420px, 46vw, 620px);
}
.polaroids--top2 {
  top: 0;
  height: clamp(320px, 30vw, 460px);
}

.poly {
  position: absolute;
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  /* default = exploded (target) — comes from per-poly rules below */
  transition:
    transform 1100ms cubic-bezier(0.18, 1.0, 0.32, 1),
    opacity   500ms ease,
    filter    600ms ease;
  will-change: transform, opacity, filter;
}

/* Irregular icons: outline traces alpha via stacked drop-shadows */
.poly__img {
  display: block;
  width: 90px;
  height: auto;
  filter:
    drop-shadow( 3px  0  0 #fff)
    drop-shadow(-3px  0  0 #fff)
    drop-shadow( 0  3px  0 #fff)
    drop-shadow( 0 -3px  0 #fff)
    drop-shadow( 2px  2px 0 #fff)
    drop-shadow(-2px  2px 0 #fff)
    drop-shadow( 2px -2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(-3px 5px 6px rgba(0,0,0,0.30));
}
/* iMac: rectangular polaroid frame */
.poly__img--rect {
  width: 92px;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 6px;
  box-shadow: -3px 5px 7.8px 3px rgba(0,0,0,0.23);
  filter: none;
}
.poly figcaption {
  margin-top: 4px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  color: rgba(0,0,0,0.32);
  white-space: nowrap;
}

/* sizing per icon */
.poly--hero-l1 .poly__img,
.poly--top-l1  .poly__img,
.poly--top2-l1 .poly__img { width: 110px; }
.poly--hero-l2 .poly__img,
.poly--top-l2  .poly__img,
.poly--top2-l2 .poly__img { width:  88px; }
.poly--hero-l3 .poly__img,
.poly--top-l3  .poly__img,
.poly--top2-r3 .poly__img { width: 104px; }
.poly--hero-l4 .poly__img { width: 100px; }
.poly--hero-c1 .poly__img { width:  84px; }
.poly--hero-c2 .poly__img { width:  78px; }
.poly--hero-c3 .poly__img { width:  98px; }
.poly--hero-r1 .poly__img,
.poly--top-r1  .poly__img,
.poly--top2-r1 .poly__img { width: 130px; }
.poly--hero-r2 .poly__img { width: 130px; }
.poly--hero-r3 .poly__img,
.poly--top-r2  .poly__img,
.poly--top2-r2 .poly__img { width:  96px; }
/* Lens 1 fixed stickers — varied sizes for visual interest. */
.poly--fix-l1 .poly__img { width:  90px; }
.poly--fix-l2 .poly__img { width: 130px; }
.poly--fix-l3 .poly__img { width: 110px; }
.poly--fix-l4 .poly__img { width: 110px; }
.poly--fix-l5 .poly__img { width:  74px; }
.poly--fix-r1 .poly__img { width: 110px; }
.poly--fix-r2 .poly__img { width:  96px; }
.poly--fix-r3 .poly__img { width: 130px; }
.poly--fix-r4 .poly__img { width: 100px; }
.poly--fix-r5 .poly__img { width:  82px; }
.poly--fix-r6 .poly__img { width: 110px; }

/* ---------- TARGET (exploded) positions ---------- */
/* HERO — polaroids land around the title (top half of the hero) and
   beside the folder. The user clicks the folder; these are the spots
   they fly to. */
/* HERO scattered — polaroids distribute throughout the entire hero.
   Title sits at the top-center; folder sits in the middle. Polaroids
   ring the hero (top, sides, bottom) without overlapping those central
   areas. Percentages scale with hero height. */
.poly--hero-l1 { left:  6%;  top:  6%;  transform: rotate(-12deg); transition-delay:  40ms; }
.poly--hero-l2 { left:  2%;  top: 38%;  transform: rotate(-16deg); transition-delay: 120ms; }
.poly--hero-l3 { left:  3%;  top: 78%;  transform: rotate(  8deg); transition-delay: 200ms; }
.poly--hero-l4 { left: 18%;  top: 80%;  transform: rotate( -8deg); transition-delay: 280ms; }
.poly--hero-c1 { left: 38%;  top:  3%;  transform: rotate( -6deg); transition-delay:  60ms; }
.poly--hero-c2 { left: 28%;  top: 88%;  transform: rotate( 12deg); transition-delay: 320ms; }
.poly--hero-c3 { left: 56%;  top: 86%;  transform: rotate( -4deg); transition-delay: 240ms; }
.poly--hero-r1 { right: 4%;  top:  8%;  transform: rotate( 14deg); transition-delay:  80ms; }
.poly--hero-r2 { right: 5%;  top: 78%;  transform: rotate(-10deg); transition-delay: 160ms; }
.poly--hero-r3 { right: 16%; top: 36%;  transform: rotate(  6deg); transition-delay: 220ms; }

/* LENS 1 — legacy positions (no longer wired into the DOM but kept
   to avoid breaking any external override). */
.poly--top-l1 { left: 1%;   top:  70px;  transform: rotate(-14deg); transition-delay:  60ms; }
.poly--top-l2 { left: 6%;   top: 240px;  transform: rotate( -6deg); transition-delay: 200ms; }
.poly--top-l3 { left: 14%;  top: 380px;  transform: rotate( 18deg); transition-delay: 120ms; }
.poly--top-r1 { right: 1%;  top:  60px;  transform: rotate( 12deg); transition-delay:  80ms; }
.poly--top-r2 { right: 7%;  top: 240px;  transform: rotate(-10deg); transition-delay: 160ms; }

/* LENS 1 FIXED stickers — permanent decoration around the "Processo
   Seletivo" card. The card is centered (max-width ~560px), so left
   stickers stay below x≈25% and right stickers above x≈75% to keep
   the text clear. Different rotations and slightly offset y to look
   randomly scattered. */
/* Lens 1 — scattered fixed stickers ringing the "Processo Seletivo"
   card. The card spans the middle ~28–60% horizontally, so left/right
   columns hug the sides and leave the text clear.

   LEFT cluster (above to below, far-left to near-card):
     l1 puzzle (small, top-near-card)
     l2 iMac   (large, far-left, mid)
     l3 Books  (mid-left)
     l4 Cube   (lower-left)
     l5 Apple  (lower, near-card)

   RIGHT cluster:
     r1 Cube   (top, near-card)
     r2 Apple  (mid-right, far)
     r3 iMac   (large, mid-right)
     r4 Books  (lower-right)
     r5 puzzle (bottom-right corner)
     r6 Books  (far-right, partially clipped) */
.poly--fix-l1 { left: 22%;  top:  20px; transform: rotate(  8deg); }
.poly--fix-l2 { left:  2%;  top: 140px; transform: rotate(-14deg); }
.poly--fix-l3 { left: 18%;  top: 200px; transform: rotate(  6deg); }
.poly--fix-l4 { left:  8%;  top: 380px; transform: rotate(-10deg); }
.poly--fix-l5 { left: 26%;  top: 360px; transform: rotate( 16deg); }

.poly--fix-r1 { right: 26%; top:  60px; transform: rotate( 10deg); }
.poly--fix-r2 { right:  6%; top: 140px; transform: rotate(-12deg); }
.poly--fix-r3 { right: 14%; top: 250px; transform: rotate(  8deg); }
.poly--fix-r4 { right: 24%; top: 340px; transform: rotate(-14deg); }
.poly--fix-r5 { right: 14%; top: 440px; transform: rotate( 18deg); }
.poly--fix-r6 { right: -3%; top: 280px; transform: rotate(  4deg); }

/* LENS 2 — scattered around the "Entre no processo" intro */
.poly--top2-l1 { left: 2%;   top:  60px;  transform: rotate(-12deg); transition-delay:  80ms; }
.poly--top2-l2 { left: 14%;  top: 280px;  transform: rotate(  8deg); transition-delay: 240ms; }
.poly--top2-r1 { right: 2%;  top:  60px;  transform: rotate( 16deg); transition-delay: 120ms; }
.poly--top2-r2 { right: 16%; top: 280px;  transform: rotate( -8deg); transition-delay: 200ms; }
.poly--top2-r3 { right: 30%; top: 100px;  transform: rotate( 22deg); transition-delay: 280ms; }

/* ---------- CLOSED (collapsed back into the folder) ---------- */
/* JS sets CSS vars --fx and --fy on each cluster pointing to the folder
   center. When the user hovers the folder, polaroids fly into it and
   stay VISIBLE in front of it (small + readable). */
.polaroids[data-state="closed"] .poly {
  /* Each poly translates to its assigned scatter point inside the
     folder, shrunk to ~78% of original size so they fit comfortably
     inside the folder's pocket without spilling over the edges. */
  transform:
    translate(var(--fx, 50%), var(--fy, -240px))
    scale(0.78)
    rotate(0deg) !important;
  opacity: 0.62;
  filter: blur(2px) saturate(0.8) brightness(0.92);
  z-index: 60;
}

/* Polaroid clusters render in front of the folder image (z-index: 50
   on the cluster itself, see .polaroids rule above). */

/* Leftover responsive rules for legacy poly--top-* classes only. The
   hero and lens1 clusters have their own mobile overrides further down
   in the main media query, so DO NOT add a generic `.polaroids` height
   here — it would clamp .polaroids--hero to a tiny strip and make all
   top:% positions land near the top edge of the viewport. */
@media (max-width: 760px) {
  .poly--top-l3, .poly--top-r2,
  .poly--top2-l2, .poly--top2-r3 { display: none; }
  .poly--top-l2  { top: 110px; }
  .poly--top2-l2 { top: 110px; }
}

/* ==================================================================
   INFO ROWS (Sobre + Mundial + Processo intro)
   ================================================================== */

.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 70px) 0;
}
.info-row + .info-row { padding-top: 0; }
.info-row--reverse .info-row__text { order: 2; }
.info-row--reverse .info-row__photo { order: 1; }

.info-row__title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.47vw, 50px);
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--c-text);
  text-wrap: balance;
}
.info-row__title--end { text-align: end; }

.info-row__body {
  font-size: clamp(16px, 1.67vw, 24px);
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--c-text);
}

.info-row__photo {
  display: flex; justify-content: center;
}
.info-row__photo--rot-r { transform: rotate(2.41deg); }
.info-row__photo--rot-l { transform: rotate(-5.5deg); }

/* "Seja um desenvolvedor de classe mundial!" row — Figma spec:
   text 531 px, gap 40 px, image 487 px at 1440 px viewport.
   153 px vertical gap to the next row below. */
.lens--first .info-row:not(.info-row--reverse) {
  grid-template-columns: minmax(0, 531fr) minmax(0, 487fr);
  gap: clamp(20px, 2.78vw, 40px);
  padding-bottom: clamp(70px, 10.625vw, 153px);
}

/* Photo for the "Entre no processo seletivo" info-row.
   Image is 642 × 388 (ratio) with 578 px radius on the left side only.
   Right edge bleeds flush with the right edge of the viewport
   ("grudada no final da página") via margin-right: calc(50% - 50vw). */
.info-row__photo--bleed-right {
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  margin-right: calc(540px - 50vw); /* extends to viewport right edge: 50vw − max-content/2 */
  padding: 9px 0;
}
/* Text column = 538 px, gap = 80 px at 1440 px (1.164 : 1 ratio). */
.info-row:has(.info-row__photo--bleed-right) {
  grid-template-columns: minmax(0, 1.164fr) minmax(0, 1fr);
  gap: clamp(30px, 5.56vw, 80px);
  align-items: center;
}
.info-row__photo--bleed-right .processo-photo {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  aspect-ratio: 642 / 388;
  object-fit: cover;
  object-position: center center;
  border-radius: 578px 0 0 578px;
  box-shadow: -8px 6px 30px rgba(0,0,0,0.18);
}
/* Shift the text block slightly to the left within the content area. */
#processo .info-row .info-row__text { margin-left: -8px; }
/* Last body paragraph before CTA: remove bottom margin so the 18px
   margin-top on the CTA provides the full 18px text→buttons gap. */
#processo .info-row__body:last-of-type { margin-bottom: 0; }

.processo-photo {
  display: block;
}

.placeholder-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  background: #e5e5e5;
  border: 17px solid #fff;
  box-shadow: 0 3px 20px 0 rgba(0,0,0,0.25);
}
.placeholder-photo--rounded {
  /* legacy — not used anymore (process intro now uses bleed-right) */
  display: none;
}

.process-intro__cta {
  display: flex; gap: 18px;
  margin-top: 18px; flex-wrap: wrap;
}

/* ==================================================================
   STRIP (gradient section between lenses)
   ================================================================== */

.strip {
  position: relative;
  /* DEFAULT (strip 2 — comes after lens 2 whose bottom extends DOWN at
     center, covering the centered area of the strip's top by up to
     var(--lens-curve)). So the top padding has to clear that. */
  padding:
    calc(var(--lens-curve) + clamp(40px, 5vw, 80px))
    var(--page-pad-x)
    calc(var(--lens-curve) + clamp(40px, 5vw, 80px));
  color: #fff;
  text-align: center;
}

/* STRIP 1 — sits below lens 1 (lens--first) whose bottom CUTS UP at
   center, so the centered area is already clear of the lens. Title can
   sit very close to the top of the strip — pull it up further with a
   negative top margin so it hugs the arch. */
.lens-shell + .strip {
  padding-top: 0;
}
.lens-shell + .strip .strip__title {
  margin-top: clamp(-80px, -6vw, -40px);
}
.strip__title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 80px);
  line-height: 1.1;
  margin: 0 auto;
  max-width: 950px;
  color: #fff;
  text-wrap: balance;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px) clamp(40px, 6vw, 90px);
  margin: clamp(50px, 6vw, 80px) auto 0;
  max-width: 1080px;
  text-align: left;
}
.feature {
  padding-top: 0;
}
.feature h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.05;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  color: #fff;
}
.feature p {
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.35;
  margin: 0;
  color: rgba(255,255,255,0.92);
}

/* ==================================================================
   TIMELINE
   ================================================================== */

.timeline { margin-top: clamp(40px, 5vw, 80px); }

.stages {
  list-style: none;
  /* Constrain + centre the whole timeline (icon column + content) within
     the lens content area, so the coloured bar/panel sit visually around
     the middle of the page instead of hugging the left edge. */
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 70px);
  max-width: 760px;
}
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 26px;
  align-items: start;
}
.stage__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(120,120,128,0.12);
  border: 2px solid rgba(229,229,229,1);
  position: relative;
  margin-top: 2px;
  margin-left: 4px;   /* center the 56px icon in the 64px grid column */
  flex-shrink: 0;
}
body[data-mode="dark"] .stage__icon { background: var(--c-line); border-color: rgba(255,255,255,0.1); }

.stage__icon::after { content: ""; position: absolute; inset: 13px; }
.stage--0 { --shape-color: var(--stage-0); }
.stage--1 { --shape-color: var(--stage-1); }
.stage--2 { --shape-color: var(--stage-2); }
.stage--3 { --shape-color: var(--stage-3); }
.stage--4 { --shape-color: var(--stage-4); }

/* HOLLOW CIRCLE — blue ring */
.stage__icon--circle::after {
  border: 4px solid var(--shape-color);
  border-radius: 50%;
}

/* HOLLOW DIAMOND — purple rotated square */
.stage__icon--diamond::after {
  border: 4px solid var(--shape-color);
  transform: rotate(45deg);
  inset: 14px;
  border-radius: 4px;
}

/* HOLLOW TRIANGLE — orange outline */
.stage__icon--triangle {
  position: relative;
}
.stage__icon--triangle::after {
  content: "";
  position: absolute;
  inset: 10px;
  background-color: var(--shape-color);
  -webkit-mask: var(--triangle-mask);
          mask: var(--triangle-mask);
  --triangle-mask:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C4%2022%2C21%202%2C21%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E")
    center / contain no-repeat;
}

/* SOLID PLUS — green plus sign (thinner) */
.stage__icon--plus::after {
  background:
    linear-gradient(var(--shape-color), var(--shape-color)) center / 18% 78% no-repeat,
    linear-gradient(var(--shape-color), var(--shape-color)) center / 78% 18% no-repeat;
  inset: 9px;
}

/* HOLLOW STAR — pink outline */
.stage__icon--star {
  position: relative;
}
.stage__icon--star::after {
  content: "";
  position: absolute;
  inset: 9px;
  background-color: var(--shape-color);
  -webkit-mask: var(--star-mask);
          mask: var(--star-mask);
  --star-mask:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C3%2014.6%2C9.4%2021.5%2C9.9%2016.2%2C14.3%2017.9%2C21%2012%2C17.3%206.1%2C21%207.8%2C14.3%202.5%2C9.9%209.4%2C9.4%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E")
    center / contain no-repeat;
}

.stage__line {
  position: absolute;
  left: 31px;
  top: 62px;
  bottom: calc(-1 * clamp(40px, 5vw, 70px) - 2px);
  width: 2px;
  background: rgba(120,120,128,0.18);
}

.stage__content h3 {
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--c-text);
}
.stage__date { font-weight: 400; }
/* Stage bar — sits flush on top of the panel below. Rounded on the top
   corners (pill-like) and SQUARE on the bottom corners so the panel and
   bar look like one continuous block. The gradient runs HORIZONTALLY:
   darker shade on the left, full shape-color on the right. */
.stage__bar {
  height: 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--shape-color) 45%, black) 0%,
    var(--shape-color) 100%);
}
.stage__panel {
  background: color-mix(in srgb, var(--shape-color) 10%, transparent);
  padding: clamp(20px, 2.4vw, 32px) clamp(28px, 4vw, 60px);
  display: flex; flex-direction: column; gap: 12px;
}
.stage__panel p {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.4;
  color: var(--c-text);
}

/* ==================================================================
   CALENDAR
   ================================================================== */

.calendar-block { margin-top: clamp(80px, 10vw, 130px); }

.calendar-grid {
  display: grid;
  /* Columns shrink to the natural size of each month box (no stretching).
     The whole grid is then pushed to the right with margin-left:auto so
     the title "Calendário" sits alone on the left and the grids align
     with the right-side legend below. */
  grid-template-columns: repeat(3, max-content);
  gap: clamp(22px, 3vw, 44px);
  margin-top: 24px;
  width: fit-content;
  margin-left: auto;
}

.cal-month {
  /* outer wrapper — no background, holds title + box */
  display: block;
}
.cal-month__title {
  margin: 0 0 12px 4px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--c-text-mute);
  letter-spacing: -0.01em;
}
.cal-month__box {
  background: rgba(120,120,128,0.10);
  border-radius: 12px;
  padding: 14px;
}
body[data-mode="dark"] .cal-month__box {
  background: rgba(175,175,186,0.10);
}

.cal-month__days {
  display: grid;
  /* Compact cells with breathing room between them — sized so the inner
     icon (circle / diamond / triangle / + / star) stays clearly readable. */
  grid-template-columns: repeat(7, minmax(0, clamp(24px, 2.7vw, 34px)));
  gap: clamp(5px, 0.55vw, 8px);
  justify-content: center;
}

.day {
  aspect-ratio: 1;
  border-radius: 5px;
  /* default cell — white with thin black border 10% opacity */
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  position: relative;
}
body[data-mode="dark"] .day {
  /* solid dark cell so the grid silhouette reads clearly against the
     near-black page background. */
  background: rgba(255, 255, 255, 0.10);
  border-color: transparent;
}
/* leading / trailing cells from prev/next month — invisible in light
   mode (only current-month cells show), faintly visible in dark mode
   so the calendar grid keeps its rectangular shape against the dark page. */
.day--mute { background: transparent; border-color: transparent; visibility: hidden; }
body[data-mode="dark"] .day--mute {
  visibility: visible;
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
}
/* weekends look identical to regular days now */
.day--weekend { background: #fff; border-color: rgba(0,0,0,0.10); }
body[data-mode="dark"] .day--weekend {
  background: rgba(255, 255, 255, 0.10);
  border-color: transparent;
}
/* Marked day cells — solid colour with a hollow shape icon centred inside.
   --icon is a darker shade of the cell colour for good contrast. */
.day--inscriptions { background: var(--stage-0); border-color: transparent; --icon: color-mix(in srgb, var(--stage-0) 50%, #000); }
.day--inscriptions::before {
  content: ""; position: absolute; inset: 22%;
  border: 2px solid var(--icon); border-radius: 50%;
  pointer-events: none;
}
.day--etapa-1 { background: var(--stage-1); border-color: transparent; --icon: color-mix(in srgb, var(--stage-1) 50%, #000); }
.day--etapa-1::before {
  content: ""; position: absolute; inset: 26%;
  border: 2px solid var(--icon); transform: rotate(45deg);
  pointer-events: none;
}
.day--etapa-2 { background: var(--stage-2); border-color: transparent; --icon: color-mix(in srgb, var(--stage-2) 50%, #000); }
.day--etapa-2::before {
  content: ""; position: absolute; inset: 20%;
  background-color: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C4%2022%2C21%202%2C21%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C4%2022%2C21%202%2C21%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  pointer-events: none;
}
.day--etapa-3 { background: var(--stage-3); border-color: transparent; --icon: color-mix(in srgb, var(--stage-3) 45%, #000); }
.day--etapa-3::before {
  content: ""; position: absolute; inset: 22%;
  background:
    linear-gradient(var(--icon), var(--icon)) center / 22% 100% no-repeat,
    linear-gradient(var(--icon), var(--icon)) center / 100% 22% no-repeat;
  pointer-events: none;
}
.day--etapa-4 { background: var(--stage-4); border-color: transparent; --icon: color-mix(in srgb, var(--stage-4) 45%, #000); }
.day--etapa-4::before {
  content: ""; position: absolute; inset: 18%;
  background-color: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C3%2014.6%2C9.4%2021.5%2C9.9%2016.2%2C14.3%2017.9%2C21%2012%2C17.3%206.1%2C21%207.8%2C14.3%202.5%2C9.9%209.4%2C9.4%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C3%2014.6%2C9.4%2021.5%2C9.9%2016.2%2C14.3%2017.9%2C21%2012%2C17.3%206.1%2C21%207.8%2C14.3%202.5%2C9.9%209.4%2C9.4%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  pointer-events: none;
}
/* Dark mode: mute the marked-day cell backgrounds and brighten the icons
   so each shape reads clearly against the darker cell colour. */
body[data-mode="dark"] .day--inscriptions {
  background: color-mix(in srgb, var(--stage-0) 55%, #000);
  --icon: color-mix(in srgb, var(--stage-0) 65%, #fff);
}
body[data-mode="dark"] .day--etapa-1 {
  background: color-mix(in srgb, var(--stage-1) 55%, #000);
  --icon: color-mix(in srgb, var(--stage-1) 65%, #fff);
}
body[data-mode="dark"] .day--etapa-2 {
  background: color-mix(in srgb, var(--stage-2) 55%, #000);
  --icon: color-mix(in srgb, var(--stage-2) 65%, #fff);
}
body[data-mode="dark"] .day--etapa-3 {
  background: color-mix(in srgb, var(--stage-3) 50%, #000);
  --icon: color-mix(in srgb, var(--stage-3) 60%, #fff);
}
body[data-mode="dark"] .day--etapa-4 {
  background: color-mix(in srgb, var(--stage-4) 50%, #000);
  --icon: color-mix(in srgb, var(--stage-4) 60%, #fff);
}

/* legend */
.legend {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  /* Push the whole block to the right edge of the calendar, but keep
     items inside it aligned to the left. */
  width: fit-content;
  margin-left: auto;
}
.legend__title { font-size: 14px; font-weight: 700; color: var(--c-text-mute); }
.legend__items { display: flex; gap: 18px; flex-wrap: wrap; }
.legend__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-text-mute);
}
/* Legend chips mirror the calendar day cells exactly: same size, same
   radius, same icon centred in a darker shade of the cell colour. */
.legend__chip {
  position: relative;
  width: clamp(20px, 2.2vw, 28px);
  height: clamp(20px, 2.2vw, 28px);
  border-radius: 5px;
  border: 0;
  display: inline-block;
}
.legend__chip.stage-color-0 { background: var(--stage-0); --icon: color-mix(in srgb, var(--stage-0) 50%, #000); }
.legend__chip.stage-color-1 { background: var(--stage-1); --icon: color-mix(in srgb, var(--stage-1) 50%, #000); }
.legend__chip.stage-color-2 { background: var(--stage-2); --icon: color-mix(in srgb, var(--stage-2) 50%, #000); }
.legend__chip.stage-color-3 { background: var(--stage-3); --icon: color-mix(in srgb, var(--stage-3) 45%, #000); }
.legend__chip.stage-color-4 { background: var(--stage-4); --icon: color-mix(in srgb, var(--stage-4) 45%, #000); }
body[data-mode="dark"] .legend__chip.stage-color-0 { background: color-mix(in srgb, var(--stage-0) 55%, #000); --icon: color-mix(in srgb, var(--stage-0) 65%, #fff); }
body[data-mode="dark"] .legend__chip.stage-color-1 { background: color-mix(in srgb, var(--stage-1) 55%, #000); --icon: color-mix(in srgb, var(--stage-1) 65%, #fff); }
body[data-mode="dark"] .legend__chip.stage-color-2 { background: color-mix(in srgb, var(--stage-2) 55%, #000); --icon: color-mix(in srgb, var(--stage-2) 65%, #fff); }
body[data-mode="dark"] .legend__chip.stage-color-3 { background: color-mix(in srgb, var(--stage-3) 50%, #000); --icon: color-mix(in srgb, var(--stage-3) 60%, #fff); }
body[data-mode="dark"] .legend__chip.stage-color-4 { background: color-mix(in srgb, var(--stage-4) 50%, #000); --icon: color-mix(in srgb, var(--stage-4) 60%, #fff); }
.legend__chip--circle::after {
  content: ""; position: absolute; inset: 22%;
  border: 2px solid var(--icon); border-radius: 50%;
}
.legend__chip--diamond::after {
  content: ""; position: absolute; inset: 26%;
  border: 2px solid var(--icon); transform: rotate(45deg);
}
.legend__chip--triangle::after {
  content: ""; position: absolute; inset: 20%;
  background-color: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C4%2022%2C21%202%2C21%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C4%2022%2C21%202%2C21%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.legend__chip--plus::after {
  content: ""; position: absolute; inset: 22%;
  background:
    linear-gradient(var(--icon), var(--icon)) center / 22% 100% no-repeat,
    linear-gradient(var(--icon), var(--icon)) center / 100% 22% no-repeat;
}
.legend__chip--star::after {
  content: ""; position: absolute; inset: 18%;
  background-color: var(--icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C3%2014.6%2C9.4%2021.5%2C9.9%2016.2%2C14.3%2017.9%2C21%2012%2C17.3%206.1%2C21%207.8%2C14.3%202.5%2C9.9%209.4%2C9.4%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%2712%2C3%2014.6%2C9.4%2021.5%2C9.9%2016.2%2C14.3%2017.9%2C21%2012%2C17.3%206.1%2C21%207.8%2C14.3%202.5%2C9.9%209.4%2C9.4%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ==================================================================
   FAQ STRIP
   ================================================================== */

.strip--faq { padding-bottom: clamp(160px, 18vw, 260px); }
.faq__head h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 80px);
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff;
}
.faq__head p {
  font-size: clamp(15px, 1.6vw, 28px);
  line-height: 1.25;
  margin: 0 auto 50px;
  max-width: 760px;
  color: rgba(255,255,255,0.92);
}
.faq__list {
  max-width: 891px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 15px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  text-align: left;
  display: flex;
  flex-direction: column;
  color: var(--c-text);
}
body[data-mode="dark"] .faq__list { background: var(--c-surface); }

.faq__item {
  border-bottom: 2px solid rgba(120,120,128,0.12);
}
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  width: 100%; background: transparent; border: 0;
  padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.2;
  color: var(--c-text);
  text-align: left;
  font-family: inherit;
}
.faq__q-arrow {
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--c-text);
  border-bottom: 2.5px solid var(--c-text);
  transform: rotate(-45deg);
  margin-right: 6px;
  margin-top: 2px;
}
.faq__item[aria-expanded="true"] .faq__q-arrow {
  transform: rotate(45deg);
  margin-top: -4px;
}
.faq__a {
  background: rgba(120,120,128,0.12);
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
}
.faq__item[aria-expanded="true"] .faq__a {
  padding: 18px 24px;
  max-height: 800px;
}
.faq__a p {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.45;
  color: var(--c-text);
}
.faq__a a { color: var(--c-accent); text-decoration: underline; }

/* ==================================================================
   FOOTER (last lens)
   ================================================================== */

.footer__inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
  max-width: var(--max-content);
  margin: 0 auto;
}
.footer__brand-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(26px, 2.6vw, 46px);
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--c-text);
}
.footer__brand-title span { display: block; }
.footer__brand-title span:nth-child(2) { letter-spacing: 0.01em; }
.footer__brand-tag {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 20px);
  color: var(--c-text-mute);
}
.footer__nav {
  display: flex; gap: clamp(30px, 5vw, 80px);
}
.footer__nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer__nav a {
  font-size: clamp(15px, 1.2vw, 22px);
  color: var(--c-accent);
}
.footer__nav a:hover { text-decoration: underline; }

/* ==================================================================
   FLOATING BUTTONS
   ================================================================== */

.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  background: #fff; color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: -6px 10px 16px rgba(0,0,0,0.23);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms;
}
.to-top.visible { opacity: 1; pointer-events: auto; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 760px) {
  body { --lens-curve: clamp(38px, 9vw, 56px); }

  /* NAV — swap the inline link bar for a slide-down drawer triggered by
     the hamburger button. The drawer overlays the page just below the
     fixed nav. */
  .nav { padding: 0 20px; }
  .nav__burger { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: color-mix(in srgb, var(--c-dark) 92%, transparent);
    backdrop-filter: blur(19.2px);
    -webkit-backdrop-filter: blur(19.2px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    /* hidden by default; .nav__links[data-open="true"] reveals it */
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms ease;
  }
  .nav__links[data-open="true"] { max-height: 320px; }
  .nav__links li { width: 100%; }
  .nav__links a {
    display: block;
    padding: 16px 20px;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .nav__cta { border-top-color: rgba(255,255,255,0.12) !important; }

  /* HERO — shrink folder + title; hide the explode-stickers on mobile so
     they don't crowd the small viewport. The lens1 cluster also shrinks
     and only the outer-edge stickers stay (the inner ones overlapped the
     text). */
  .hero { padding: clamp(90px, 18vh, 130px) 18px clamp(30px, 6vw, 60px); }
  .hero__title { font-size: clamp(42px, 10vw, 56px); }
  .hero__title span { white-space: normal; }
  /* Folder still dominates the viewport on mobile — keep it large enough
     to feel proportional with the title and large enough for the click
     target. A bit of top margin pushes it visually away from the title. */
  .folder {
    width: clamp(210px, 58vw, 270px);
    margin-top: 4px;
    margin-bottom: 24px;
  }
  /* Hero explode-stickers stay (animation is the focal point), but each
     polaroid is scaled down so they fit around the smaller hero. Drop
     the three CENTER polys (c1/c2/c3) since they sit over the title at
     percentage positions; the side polys still scatter around the edges. */
  .polaroids--hero .poly--hero-c1,
  .polaroids--hero .poly--hero-c2,
  .polaroids--hero .poly--hero-c3 { display: none; }
  .polaroids--hero .poly__img       { width: 58px !important; }
  .polaroids--hero .poly__img--rect { width: 62px !important; }
  .polaroids--hero figcaption       { font-size: 9px; }
  /* Compress the vertical spread of the explode positions so the polys
     cluster around the MIDDLE of the hero (i.e. around the folder), not
     at the very top edge (which crowded the title) or all the way at
     the bottom. Positions are kept clear of the title (top ~30%) and
     concentrate between 40-78%, the band the folder occupies. */
  .polaroids--hero .poly--hero-l1 { left:  3%;  top: 38%; }
  .polaroids--hero .poly--hero-l2 { left:  2%;  top: 56%; }
  .polaroids--hero .poly--hero-l3 { left:  6%;  top: 74%; }
  .polaroids--hero .poly--hero-l4 { left: 20%;  top: 80%; }
  .polaroids--hero .poly--hero-r1 { right: 2%;  top: 42%; }
  .polaroids--hero .poly--hero-r2 { right: 5%;  top: 74%; }
  .polaroids--hero .poly--hero-r3 { right: 18%; top: 58%; }

  /* Lens 1 fixed stickers — drop inner ones that cross over the card.
     Keep the far-edge stickers, scaled down. */
  .polaroids--lens1 .poly--fix-l1,
  .polaroids--lens1 .poly--fix-l3,
  .polaroids--lens1 .poly--fix-l5,
  .polaroids--lens1 .poly--fix-r1,
  .polaroids--lens1 .poly--fix-r3,
  .polaroids--lens1 .poly--fix-r5,
  .polaroids--lens1 .poly--fix-r6 { display: none; }
  .polaroids--lens1 .poly__img { width: 64px !important; }
  .polaroids--lens1 .poly__img--rect { width: 60px !important; }

  /* CONTENT layout — collapse two-column rows to one column */
  .info-row { grid-template-columns: 1fr; }
  .lens--first .info-row:not(.info-row--reverse) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .lens--first .info-row:not(.info-row--reverse) .info-row__text { order: 1; }
  .lens--first .info-row:not(.info-row--reverse) .info-row__photo { order: 2; }
  .info-row--reverse .info-row__photo { order: 2; }
  .info-row--reverse .info-row__text { order: 1; }
  /* Processo Seletivo row: keep desktop-style composition on tablet. */
  .info-row:has(.info-row__photo--bleed-right) {
    grid-template-columns: minmax(0, 1.164fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
  }
  .info-row__photo--bleed-right {
    margin-right: calc(50% - 50vw);
    padding: 9px 0;
    justify-content: flex-end;
    align-self: center;
  }
  .info-row__photo--bleed-right .processo-photo {
    max-width: 100%;
    aspect-ratio: 642 / 388;
    border-radius: 578px 0 0 578px;
  }

  .feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .calendar-grid { grid-template-columns: repeat(2, max-content); justify-content: center; margin-left: auto; margin-right: auto; }
  .legend { width: 100%; margin-left: 0; align-items: flex-start; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .stages { max-width: 100%; }
  .stage { grid-template-columns: 44px 1fr; gap: 14px; }
  .stage__icon { width: 38px; height: 38px; }
  .stage__icon::after { inset: 9px; }
  .stage__line { left: 21px; top: 42px; }
  .lens { padding-inline: 20px; }
  .lens--last { padding-inline: 20px; }

  .to-top {
    position: fixed !important;
    top: auto !important;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 560px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(42px, 10.8vw, 52px); }
  .info-row:has(.info-row__photo--bleed-right) {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .info-row__photo--bleed-right {
    margin-right: 0;
    padding: 0;
    justify-content: center;
    align-self: auto;
  }
  .info-row__photo--bleed-right .processo-photo {
    max-width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
  }
  #processo .info-row .info-row__text { margin-left: 0; }
  .placeholder-photo { border-width: 10px; }
}