/* Layout: one 12-col frame with equal gutters; flat brand panels meet edge to edge.
   Every heading is brand red (white only on red grounds). The WebGL canvas sits above section
   grounds and below all content, so the travelling boomerang always passes behind text, cards and pictures. */
:root {
  /* Fidelidade brand colours, one deliberate light look with dark stages */
  --red: #EE2429;
  --red-900: #8E1116;
  --red-700: #B9161C;
  --red-300: #F4686B;
  --red-200: #F8A3A5;
  --red-100: #FCD6D7;
  --ink: #1B1B1D;
  --grey: oklch(50% 0.012 25);   /* brand grey #707070, warmed toward the red and darkened for contrast */
  --mist: oklch(95.6% 0.004 25);
  --mist-2: oklch(91.5% 0.006 25);
  --white: #FFFFFF;
  --stage: #121113;
  --stage-soft: oklch(70% 0.01 25);

  /* Lato for display (brand), Azo Sans for text (brand kit) with Figtree as stand-in */
  --f-display: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Azo Sans", "Azo Sans Medium", "Figtree", "Helvetica Neue", Arial, sans-serif;

  /* fluid type scale (rem + vw so browser zoom keeps working) */
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --step-3: clamp(2.125rem, 1.5rem + 2.8vw, 4.25rem);
  --step-hero: clamp(3.25rem, 0.6rem + 12vw, 13.5rem);

  /* fluid space scale */
  --space-xs: clamp(8px, 0.6vw, 12px);
  --space-s: clamp(16px, 1.4vw, 24px);
  --space-m: clamp(24px, 2.4vw, 40px);
  --space-l: clamp(40px, 4vw, 64px);
  --section: clamp(72px, 6vw, 104px);
  --flow: clamp(48px, 4.2vw, 76px); /* space above and below each section: the same gap between all of them */
  --gutter: clamp(16px, 3vw, 40px);
  --nav-h: 68px;

  --leaf: clamp(24px, 3.4vw, 48px); /* brand card motif: top-left + bottom-right */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}

/* Azo Sans (brand text face, licensed): used as soon as it is installed or served by the brand's font kit.
   To self-host, add url(fonts/AzoSans-Medium.woff2) format("woff2") etc. after the local() names. */
@font-face { font-family: "Azo Sans"; font-weight: 400 500; font-display: swap; src: local("Azo Sans Medium"), local("AzoSans-Medium"); }
@font-face { font-family: "Azo Sans"; font-weight: 600 700; font-display: swap; src: local("Azo Sans Bold"), local("AzoSans-Bold"); }
@font-face { font-family: "Azo Sans"; font-weight: 800 900; font-display: swap; src: local("Azo Sans Black"), local("AzoSans-Black"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section, #candidatura { scroll-margin-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--white); }
img, video { max-width: 100%; height: auto; display: block; }
a, button { color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; text-wrap: balance; color: var(--red); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: var(--white); }

/* Icons are always brand red, in every state */
.icon { color: var(--red); flex: none; }

.skip { position: fixed; left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; }

.wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 1520px; margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); color: var(--red); font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.dim { color: var(--grey); }
.meta { font-size: var(--step--1); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: var(--grey); line-height: 1.4; }
.lead { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; }

/* The boomerang's starting place in the hero: kept empty */
.orbit { display: block; position: relative; pointer-events: none; }

/* Buttons: flat, one fill, brand's small radius */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 4px;
  font-family: var(--f-display); font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--red { background: var(--red); color: var(--white); }
.btn--white { background: var(--white); color: var(--red); }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
@media (hover: hover) {
  .btn--red:hover { background: var(--red-700); }
  .btn--white:hover { background: var(--ink); color: var(--white); }
}

/* NAV */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--white); }
.nav__inner { display: flex; align-items: center; gap: 24px; max-width: 1520px; margin-inline: auto; height: var(--nav-h);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav__logo img { width: clamp(120px, 12vw, 170px); height: auto; }
.nav__links { display: flex; gap: clamp(16px, 2.2vw, 36px); margin-left: auto; }
.nav__links a { font-family: var(--f-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; color: var(--ink); padding: 12px 0; transition: color 150ms var(--ease-out); }
.nav__links a[aria-current="true"] { color: var(--red); }
@media (hover: hover) { .nav__links a:hover { color: var(--red); } }
@media (max-width: 860px) { .nav__links { display: none; } .nav .btn { margin-left: auto; } }

/* 3D canvas: above section grounds, below all content. The one boomerang travels the page in
   diagonals as you scroll; text, cards and pictures always sit in front of it. */
#stage3d { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; display: block; }
.no-webgl #stage3d { display: none; }

/* ONE SYSTEM FOR EVERY SECTION
   Ground: one continuous white page between the hero and the footer, so sections flow into each other;
   colour (mist, dark, red) only ever comes as a leaf card inside the page, never as a full-width stripe.
   Rhythm: the same space between every section (--flow).
   Header: the title, and any supporting text below it (never beside it).
   Type: display (hero only) · h2 · h3 · lead · body · small — nothing else.
   Shape: every card and picture takes the brand leaf (top-left + bottom-right); controls keep a small radius.
   Red: titles, actions, numbers and the boomerang; red fields only at the start, in the experience and in the closing invitation. */
.head { display: grid; gap: var(--space-s); margin-bottom: var(--space-l); }
/* section intros: set larger so they can run wide, but kept near 70 characters a line so they stay easy to read */
.head > p { max-width: 68ch; font-size: var(--step-2); line-height: 1.4; }
.head > p a { color: var(--red); font-weight: 600; }
.head--sub { margin-bottom: var(--space-m); }
@media (max-width: 860px) { .head { margin-bottom: var(--space-m); } .head > p { font-size: var(--step-1); } }

/* HERO: the trainees on video fill the stage, shaded on the left and at the foot so the title and button read;
   the title, the band the boomerang leaves from, then the sentence and the button */
.hero { position: relative; overflow: hidden; background: var(--stage); color: var(--white); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
/* the shade is ::after so it paints over the video, still under the boomerang and the text */
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, oklch(13% 0.008 25 / 0.92) 0%, oklch(13% 0.008 25 / 0.72) 38%, oklch(13% 0.008 25 / 0.25) 72%, oklch(13% 0.008 25 / 0.15) 100%),
  linear-gradient(0deg, oklch(13% 0.008 25 / 0.75) 0%, transparent 35%); }
.hero__wrap { position: relative; z-index: 2; padding-block: var(--space-m); }
.hero__text { min-height: calc(100svh - var(--nav-h) - 2 * var(--space-m)); display: flex; flex-direction: column; gap: var(--space-s); }
.hero__title { font-size: min(var(--step-hero), 19svh); line-height: 0.86; letter-spacing: -0.035em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line > span { display: block; }
.hero__title .line--dim { color: oklch(82% 0.008 25); }
.orbit--hero { flex: 1 1 auto; min-height: clamp(88px, 13svh, 280px); }
.hero__foot { display: grid; gap: var(--space-s); justify-items: start; }
.hero__lead { grid-column: 1; font-size: var(--step-1); line-height: 1.4; max-width: 34ch; }
.proof { grid-column: 1; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; justify-self: start; }
.proof__faces { display: flex; gap: 4px; flex: none; }
.proof__faces img { width: 36px; height: 36px; max-width: none; flex: none; border-radius: 50%; object-fit: cover; }
.proof__text { font-size: var(--step--1); font-weight: 500; color: oklch(88% 0.006 25); max-width: 30ch; transition: color 160ms var(--ease-out); }
@media (hover: hover) { .proof:hover .proof__text { color: var(--white); } }
@media (max-width: 400px) { .proof { flex-wrap: wrap; } .proof__text { max-width: none; } }
@media (max-width: 860px) {
  .hero__wrap { padding-block: 20px 16px; }
  .hero::after { background: linear-gradient(0deg, oklch(13% 0.008 25 / 0.9) 0%, oklch(13% 0.008 25 / 0.55) 55%, oklch(13% 0.008 25 / 0.7) 100%); }
  .hero__bg { object-position: 40% 50%; }
  .hero__text { min-height: 0; gap: 12px; } /* sized by its content on a phone */
  .hero__title { font-size: min(12.6vw, 120px); } /* "BOOMERANG" fits whole down to 320px */
  .orbit--hero { flex: none; height: clamp(84px, 13svh, 180px); min-height: 0; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* PROGRAMA (white) — the first of the two red fields */
.programa { padding-block: var(--flow); }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(170px, 24svh, 260px)); gap: 8px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-m); z-index: 2; border-radius: var(--leaf) 0 var(--leaf) 0; }
.tile--a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--red); color: var(--white); }
.tile__slogan { font-size: var(--step-3); line-height: 0.9; letter-spacing: -0.03em; }
.tile--a .tile__slogan { color: var(--white); }
.tile--b { grid-column: 9 / 13; grid-row: 1; background: var(--mist); color: var(--ink); text-decoration: none; transition: background-color 160ms var(--ease-out); }
.tile__go { position: absolute; right: var(--space-m); top: var(--space-m); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); transition: transform 200ms var(--ease-out); }
.tile__go svg { transform: rotate(90deg); }
@media (hover: hover) { .tile--b:hover { background: var(--mist-2); } .tile--b:hover .tile__go { transform: translateY(4px); } }
.tile__figure { font-family: var(--f-display); font-weight: 900; font-size: var(--step-3); line-height: 0.85; letter-spacing: -0.03em; color: var(--red); }
.tile__caption { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-2); line-height: 1; margin-top: var(--space-xs); }
.tile--c { grid-column: 9 / 13; grid-row: 2; padding: 0; background: var(--ink); }
.tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.programa__text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: var(--space-l); }
.programa__text p { grid-column: 1 / 13; font-size: var(--step-2); line-height: 1.4; max-width: 68ch; }
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px; }
  .tile--a { grid-column: 1 / 3; grid-row: 1; min-height: 32svh; }
  .tile--b, .tile--c { grid-column: auto; grid-row: 2; aspect-ratio: 1; }
  .tile__caption { font-size: 18px; }
  .tile--b { padding: 16px; }
  .tile__go { width: 36px; height: 36px; right: 12px; top: 12px; }
  .programa__text p { grid-column: 1 / 13; }
}

/* PERCURSOS (mist) — the five names as a list you read top to bottom; the chosen one opens beside it */
.percursos { background: var(--white); padding-block: var(--flow); }
/* the chosen name turns white and joins the white card beside it, like a folder tab */
.percursos__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; padding: var(--space-s) var(--space-s) var(--space-s) 0; background: var(--mist); border-radius: var(--leaf) 0 var(--leaf) 0; }
.plist { display: grid; align-content: start; gap: 4px; padding: var(--space-m) 0 var(--space-m) var(--space-s); }
.ptab {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) 24px; align-items: center; gap: 16px;
  width: 100%; min-height: 64px; padding: 14px 20px; border: 0; border-radius: var(--leaf) 0 0 var(--leaf); background: transparent; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-1); line-height: 1.1; color: var(--ink);
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.ptab__dot { width: 14px; height: 14px; border-radius: 7px 0 7px 0; background: var(--mist-2); transition: background-color 160ms var(--ease-out), transform 220ms var(--ease-out); }
.ptab[aria-selected="true"] .ptab__dot { transform: rotate(-45deg) scale(1.15); }
.ptab__icon { opacity: 0; transform: translateX(-6px); transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); }
.ptab[aria-selected="true"] { color: var(--red); background: var(--white); }
.ptab[aria-selected="true"] .ptab__dot { background: var(--red); }
.ptab[aria-selected="true"] .ptab__icon { opacity: 1; transform: none; }
.ptab:active { transform: scale(0.99); }
@media (hover: hover) { .ptab:not([aria-selected="true"]):hover { color: var(--red); } }
.percursos__panels { display: grid; }
.perc { grid-area: 1 / 1; display: grid; align-content: start; gap: var(--space-s); padding: var(--space-l); background: var(--white); border-radius: 0 var(--leaf) var(--leaf) 0; min-height: 100%; }
.perc[hidden] { display: grid !important; visibility: hidden; }
.perc__name { font-size: var(--step-3); line-height: 0.95; }
.perc__toggle { all: unset; display: block; color: inherit; font: inherit; }
.perc__plus { display: none; }
@media (min-width: 861px) { .perc__toggle { pointer-events: none; } }
.perc__text { font-size: var(--step-1); line-height: 1.5; max-width: 48ch; }
html:not(.js) .perc[hidden] { display: grid !important; }
/* on a phone there is no list to tap: all five are shown, one card after the other */
@media (max-width: 860px) {
  .percursos__grid { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .plist { display: none; }
  .percursos__panels { gap: 8px; }
  /* on a phone the five percursos are an accordion: the names in a list, one opens at a time */
  .percursos__panels { gap: 6px; }
  .perc { grid-area: auto; padding: 0; gap: 0; border-radius: 22px 0 22px 0; overflow: hidden; }
  .perc[hidden] { display: grid !important; visibility: visible; }
  .perc__name { font-size: var(--step-1); line-height: 1.15; }
  .perc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box; min-height: 60px; padding: 14px 18px; cursor: pointer; }
  .perc__toggle:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
  .perc__plus { display: block; position: relative; width: 16px; height: 16px; flex: none; }
  .perc__plus::before, .perc__plus::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2.5px; background: var(--red); transition: transform 200ms var(--ease-out); }
  .perc__plus::after { transform: rotate(90deg); }
  .perc.is-open .perc__plus::after { transform: rotate(0deg); }
  .perc__text { display: none; padding: 0 18px 18px; font-size: var(--step-0); }
  .perc.is-open .perc__text { display: block; }
}

/* EXPERIÊNCIA (white) — heading and text on the left, each card a row on the right: its name, then what it gives you;
   then the first steps on one line that fills as you scroll */
.experiencia { background: var(--white); padding-block: var(--flow); }
.exp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-l); align-items: start; }
.exp .head { margin-bottom: 0; }
.exp .head > p { max-width: 40ch; font-size: var(--step-0); line-height: 1.55; }
.cards { display: grid; gap: 8px; }
.card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xs) var(--space-m); align-items: center; padding: var(--space-m); border-radius: var(--leaf) 0 var(--leaf) 0; }
.card__name { font-size: var(--step-2); line-height: 1; overflow-wrap: anywhere; }
.card p { font-size: 16px; line-height: 1.55; }
.card--red { background: var(--red-700); color: var(--white); }
.card--red .card__name { color: var(--white); }
.card--ink { background: var(--ink); color: var(--white); }
.card--mist { background: var(--mist); }
.passos { padding-top: var(--flow); background: var(--white); }
@media (max-width: 1200px) { .exp { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); } }
@media (max-width: 860px) { .card { grid-template-columns: minmax(0, 1fr); } }

/* The first steps are held while you scroll (big enough screens): the block sticks inside a taller track,
   so the scroll moves through the three steps; it never leaves its own section.
   The extra scroll is a spacer inside the track (sticky only travels within the content, not the padding). */
@media (min-width: 861px) and (min-height: 800px) {
  .passos__track::after { content: ""; display: block; height: 130vh; }
  .passos { position: sticky; top: var(--nav-h); }
}

/* TIMELINE — shared by the first steps and the selection: a red numbered leaf, a line to the next */
.tl { display: grid; gap: var(--space-m); }
.tl--passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl--selecao { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-s); }
.tl__item { display: grid; gap: var(--space-s); align-content: start; min-width: 0; }
.tl__mark { display: flex; align-items: center; gap: 12px; }
.tl__n { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 22px 0 22px 0; background: var(--red); color: var(--white); font: 900 22px/1 var(--f-display); }
.tl__line { flex: 1; height: 2px; background: var(--red); transform-origin: left center; }
.tl__item:not(:last-child) .tl__mark { margin-right: calc(-1 * var(--space-m)); }
.tl--selecao .tl__item:not(:last-child) .tl__mark { margin-right: calc(-1 * var(--space-s)); }
.tl__item:last-child .tl__line { visibility: hidden; }
/* the first steps' line: a grey track the red fills as you scroll (--fill is driven by the scroll) */
.tl--passos .tl__line { background: linear-gradient(90deg, var(--red) var(--fill, 100%), var(--mist-2) var(--fill, 100%)); }
@media (max-width: 860px) { .tl--passos .tl__line { background: linear-gradient(180deg, var(--red) var(--fill, 100%), var(--mist-2) var(--fill, 100%)); } }
.tl__body { display: grid; gap: 10px; align-content: start; }
.tl__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--leaf) 0 var(--leaf) 0; margin-bottom: 4px; }
.tl__t { font-size: var(--step-2); line-height: 1; overflow-wrap: anywhere; }
.tl--selecao .tl__t { font-size: var(--step-1); line-height: 1.05; }
.tl__body p:not(.meta) { font-size: 16px; line-height: 1.55; }
@media (max-width: 1100px) {
  .tl--selecao { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-m); }
  .tl--selecao .tl__item:nth-child(3) .tl__line { visibility: hidden; }
}
/* on a phone the line runs down the left, beside each step */
@media (max-width: 860px) {
  .tl--passos, .tl--selecao { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl__item { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .tl__item .tl__mark, .tl--selecao .tl__item .tl__mark { flex-direction: column; margin-right: 0; }
  .tl__line { width: 2px; height: auto; min-height: 24px; transform-origin: center top; }
  .tl--selecao .tl__item:nth-child(3) .tl__line { visibility: visible; }
  .tl__body { padding-bottom: var(--space-m); }
  .tl--selecao .tl__body { padding-top: 12px; }
  .tl__img { aspect-ratio: 16 / 9; }
}

/* PERFIL (mist) */
.perfil { background: var(--white); padding-block: var(--flow); }
.perfil__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l); align-items: start; }
.perfil__photo { overflow: hidden; border-radius: var(--leaf) 0 var(--leaf) 0; }
.perfil__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.perfil__body { display: grid; gap: var(--space-s); }
.perfil__intro { font-size: var(--step-1); line-height: 1.45; font-weight: 600; }
.bars { display: grid; gap: 6px; }
.bars li { background: var(--mist); border-radius: 4px; padding: 16px 20px 16px 50px; position: relative; font-weight: 500; }
.bars li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--red); border-radius: 7px 0 7px 0; }
.perfil__note { color: var(--grey); max-width: 56ch; font-size: 16px; }
.estu { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; margin-top: var(--space-xs); }
.estu__q { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-3); line-height: 0.9; letter-spacing: -0.03em; color: var(--red); }
@media (max-width: 860px) {
  .perfil__grid { grid-template-columns: minmax(0, 1fr); }
  .perfil__photo { max-width: 78%; }
}

/* SELEÇÃO (white) */
.selecao { background: var(--white); padding-block: var(--flow); }
.selecao__foot { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-s) var(--space-m); flex-wrap: wrap; margin-top: var(--space-l); }
.selecao__note { max-width: 58ch; font-size: var(--step-1); line-height: 1.45; }
.selecao__note strong { color: var(--red); font-weight: 700; }

/* TESTEMUNHOS (mist) — a row of tall portraits; the one you point at opens wide, with its name and its video */
.testemunhos { background: var(--white); padding-block: var(--flow); }
.tst { display: flex; gap: 12px; height: clamp(520px, 78svh, 760px); }
.tst__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--leaf) 0 var(--leaf) 0; background: var(--ink); transition: flex-grow 550ms var(--ease-out); }
.tst__item.is-active { flex-grow: 4.2; }
.tst__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.tst__item::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, oklch(15% 0.01 25 / 0.82), transparent); opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; }
.tst__pick { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.tst__pick:focus-visible { outline-offset: -4px; outline-color: var(--white); }
.tst__info, .tst__cta { position: absolute; z-index: 1; bottom: 22px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s linear 250ms; }
.tst__info { left: 24px; right: 170px; display: grid; gap: 2px; color: var(--white); pointer-events: none; }
.tst__name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-1); line-height: 1.05; }
.tst__role { font-size: var(--step--1); font-weight: 500; color: oklch(90% 0.006 25); }
.tst__cta { right: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid var(--white); border-radius: 999px; color: var(--white); text-decoration: none; font-weight: 600; transition-property: opacity, transform, visibility, background-color, color; }
.tst__cta svg { color: currentColor; }
.tst__item.is-active::after { opacity: 1; }
.tst__item.is-active .tst__info, .tst__item.is-active .tst__cta { opacity: 1; visibility: visible; transform: none; transition-delay: 200ms, 200ms, 0s; }
.tst__item.is-active .tst__pick { pointer-events: none; }
@media (hover: hover) { .tst__cta:hover { background: var(--white); color: var(--red); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* on a phone there is nothing to point at: two columns, every name and video showing */
@media (max-width: 860px) {
  .tst { display: block; height: auto; }
  .tst__item:not(.is-active) { display: none; }
  .tst__item, .tst__item.is-active { aspect-ratio: 4 / 5; }
  .tst__pick { display: none; }
  .tst__item::after { opacity: 1; inset: 30% 0 0; }
  .tst__info, .tst__cta { opacity: 1; visibility: visible; transform: none; }
  .tst__info { left: 18px; right: 18px; bottom: 76px; }
  .tst__name { font-size: var(--step-1); }
  .tst__role { font-size: 14px; }
  .tst__cta { left: 18px; right: auto; bottom: 18px; min-height: 44px; padding: 0 18px; font-size: 15px; gap: 8px; }
}

.tst__h { margin-bottom: var(--space-s); }
.tst + .tst__h, .tst__nav + .tst__h { margin-top: var(--space-l); }

/* Áreas: a dark leaf card; the area you point at shows its orientador on the right, faded into the dark,
   with a sentence and the link to the video on the left */
.areas { position: relative; display: grid; align-content: center; gap: 4px; min-height: clamp(420px, 56svh, 560px); padding: var(--space-l); background: var(--stage); color: var(--white); border-radius: var(--leaf) 0 var(--leaf) 0; overflow: hidden; isolation: isolate; }
.areas::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--stage) 42%, oklch(15% 0.01 25 / 0.6) 54%, transparent 72%); pointer-events: none; }
.area { max-width: 420px; }
.area__bg { position: absolute; inset: 0 0 0 38%; z-index: -2; background-size: cover; background-position: 50% 20%; opacity: 0; transform: scale(1.04); transition: opacity 600ms var(--ease-out), transform 1200ms var(--ease-out); }
.area.is-active .area__bg { opacity: 1; transform: none; }
.area__pick { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--stage-soft); cursor: pointer; text-align: left; font: 600 var(--step-1)/1.2 var(--f-text); transition: color 160ms var(--ease-out); }
.area__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: currentColor; transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.area.is-active .area__pick { color: var(--white); }
.area.is-active .area__dot { background: var(--white); box-shadow: 0 0 0 4px oklch(100% 0 0 / 0.25); }
@media (hover: hover) { .area__pick:hover { color: var(--white); } }
.area__panel { display: grid; gap: 10px; padding: 2px 0 12px 26px; }
.area:not(.is-active) .area__panel { display: none; }
.area__text { color: oklch(90% 0.006 25); max-width: 38ch; }
.area__link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--white); font-weight: 700; text-decoration: none; }
.area__link .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) { .area__link:hover .icon { transform: translateX(4px); } }
/* on a phone: the chosen person's picture across the top of the card, the names below; tap a name to switch */
@media (max-width: 860px) {
  .areas { --pic: min(62vw, 420px); min-height: 0; padding: calc(var(--pic) + 16px) 20px 16px; align-content: start; }
  .areas::after { background: linear-gradient(180deg, transparent 0, transparent calc(var(--pic) - 120px), var(--stage) var(--pic)); }
  .area { max-width: none; }
  .area__bg { inset: 0 0 auto 0; height: var(--pic); background-position: 50% 30%; }
  .area:not(.is-active) { display: none; }
  .area__pick { pointer-events: none; padding-top: 0; }
  .area__dot { display: none; }
  .area__panel { padding-left: 0; }
}

.areas__nav, .stepnav { display: none; }
@media (max-width: 860px) {
  .areas__nav, .stepnav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; }
  .stepnav__step--prev { justify-self: start; text-align: left; }
  .stepnav__step--next { justify-self: end; text-align: right; }
  .stepnav__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stepnav__count { font: 600 13px/1 var(--f-text); font-variant-numeric: tabular-nums; color: var(--grey); }
  .areas__step, .stepnav__step { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--mist); color: var(--ink); font: 600 14px/1.15 var(--f-text); cursor: pointer; min-width: 0; }
  .areas__step--prev { justify-self: start; text-align: left; }
  .areas__step--next { justify-self: end; text-align: right; }
  .areas__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .areas__count { font: 600 13px/1 var(--f-text); font-variant-numeric: tabular-nums; color: var(--grey); }
}

/* PASSAPORTE (dark stage) — the promise beside the Boomerang who came back */
.passaporte { background: var(--white); padding-block: var(--flow); }
.passaporte__card { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-l); align-items: center; padding: var(--space-l); background: var(--stage); color: var(--white); border-radius: var(--leaf) 0 var(--leaf) 0; }
.passaporte__body { display: grid; gap: var(--space-s); }
.passaporte__title { font-size: var(--step-3); }
.passaporte__title .dim { color: var(--stage-soft); }
.passaporte__body p:not(.h3) { color: oklch(88% 0.006 25); max-width: 54ch; }
.passaporte__media { position: relative; display: grid; gap: 4px; text-decoration: none; }
.passaporte__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 30%; border-radius: var(--leaf) 0 var(--leaf) 0; }
.passaporte__cap { display: grid; gap: 2px; padding-top: 8px; }
.passaporte__cap .meta { color: var(--stage-soft); }
.passaporte__media .reel__play { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--white); transition: transform 160ms var(--ease-out); }
.passaporte__media .reel__play::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 12px solid var(--red); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.passaporte__media .reel__name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--step-0); line-height: 1.1; }
@media (hover: hover) { .passaporte__media:hover .reel__play { transform: scale(1.08); } }
@media (max-width: 860px) { .passaporte__card { grid-template-columns: minmax(0, 1fr); padding: var(--space-m); } }

/* UNIVERSO (white) — four doors into the Group: picture, what you will find, where it takes you */
.universo { background: var(--white); padding-block: var(--flow); }
.worlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.world { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--mist); border-radius: var(--leaf) 0 var(--leaf) 0; overflow: hidden; text-decoration: none; transition: background-color 200ms var(--ease-out); }
.world img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 500ms var(--ease-out); }
.worlds > li { min-width: 0; }
.world__body { display: grid; align-content: start; gap: 6px; padding: 20px 22px 76px; }
.world__t { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.125rem, 1.7vw, 1.875rem); line-height: 1; letter-spacing: -0.01em; color: var(--red); }
.world__go { position: absolute; right: 18px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); transition: transform 200ms var(--ease-out); }
@media (hover: hover) {
  .world:hover { background: var(--mist-2); }
  .world:hover img { transform: scale(1.04); }
  .world:hover .world__go { transform: translate(3px, -3px); }
}
@media (max-width: 1100px) { .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .world__t { font-size: var(--step-2); } }
@media (max-width: 520px) {
  .worlds { grid-template-columns: minmax(0, 1fr); }
  .world img { aspect-ratio: 21 / 9; }
  .world__body { padding: 16px 72px 18px 18px; }
  .world__go { top: auto; bottom: 16px; right: 14px; margin-top: 0; }
}

/* CTA (white) — the closing invitation: a red leaf card, the trainees beside the brand's own sentence */
.cta { background: var(--white); padding-block: var(--flow); }
.cta__card { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; background: var(--red); color: var(--white); border-radius: var(--leaf) 0 var(--leaf) 0; overflow: hidden; }
.cta__body { display: grid; align-content: center; gap: var(--space-s); padding: var(--space-m) var(--space-l); }
.cta__title { font-size: var(--step-3); color: var(--white); }
.cta__lead { font-size: var(--step-1); line-height: 1.45; max-width: 40ch; }
.cta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px var(--space-s); margin-top: var(--space-xs); }
/* the photo keeps its own proportions, so everyone in the group is in the frame */
.cta__img { width: 100%; height: auto; aspect-ratio: 1010 / 572; object-fit: cover; align-self: stretch; }
@media (max-width: 1340px) {
  .cta__card { grid-template-columns: minmax(0, 1fr); }
  .cta__img { order: -1; align-self: auto; }
  .cta__body { padding: var(--space-m); }
}

/* FAQ (white) */
.faq { background: var(--white); padding-block: var(--flow) var(--section); }
.faq__list { display: grid; gap: 6px; }
.faq__more { margin-top: var(--space-s); }
.faq__more a { color: var(--red); font-weight: 600; }
.q { background: var(--mist); border-radius: 4px; }
.q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; min-height: 56px; font-weight: 600; font-size: 17px; border-radius: 4px; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1; color: var(--red); transition: transform 200ms var(--ease-out); flex: none; }
.q[open] summary::after { transform: rotate(45deg); }
.q p { padding: 0 20px 20px; max-width: 64ch; }
@media (hover: hover) { .q summary:hover { background: var(--mist-2); } }

/* FOOTER (dark stage) — only the essentials: who, how to reach us, where to follow, the legal line */
.footer { background: var(--stage); color: var(--white); position: relative; z-index: 2; }
.footer__body { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-s) var(--space-l); max-width: 1520px; margin-inline: auto; padding: var(--space-l) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--space-m) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.footer__logo { width: 150px; height: auto; }
.footer__mail { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 3px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; font-size: 15px; }
.footer__social a { text-underline-offset: 3px; }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: var(--space-m); font-size: 13px; color: var(--stage-soft); }
.footer__legal a { text-underline-offset: 3px; }
/* back to the top, from anywhere: a floating button that shows once you leave the hero */
.totop { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08), 0 6px 18px oklch(0% 0 0 / 0.18); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 200ms; }
.totop.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .totop:hover { transform: translateY(-3px); } }
@media (min-width: 861px) { .totop { right: 28px; bottom: 28px; } }
@media (max-width: 860px) {
  .footer__body { grid-template-columns: minmax(0, 1fr); }
  .footer__social { justify-content: flex-start; }
}

/* Reduced motion: no travel, everything visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}