/* GERADO POR build.mjs — edite os arquivos em src/ */

/* ===== css/base.css ===== */
/* =====================================================================
   CHARACTER UNIVERSITY — BASE / DESIGN SYSTEM
   Visual claro e institucional: estúdio fotográfico creme (.bg-studio),
   papel creme, caderno, faixas navy, fotos realistas dos personagens e
   detalhes dourados do brasão. (Céu azul .bg-rays/.scene--sky: legado, não usar.)
   Tokens, reset, tipografia, componentes e utilitários de animação.
   Seções NÃO editam este arquivo.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* Papel */
  --paper: #FBF5E8;
  --paper-2: #F5EBD4;
  --paper-3: #EADBB8;
  --white: #FFFDF8;

  /* Tinta (texto, contornos e sombras duras) — azul-marinho, mais amigável que preto */
  --ink: #14213D;
  --ink-soft: #3C4A66;
  --ink-mute: #6B7489;

  /* Céu */
  --sky: #D3E9F8;
  --sky-2: #B4D9F3;
  --sky-3: #84BFE9;
  --sky-deep: #3C8DD0;

  /* Destaques */
  --orange: #F2552C;        /* CTA principal */
  --orange-deep: #C93F1B;
  --orange-soft: #FFC9B5;
  --gold: #E8B53A;          /* dourado do brasão */
  --gold-deep: #A9790F;
  --gold-soft: #F7DE94;
  --navy: #14213D;
  --navy-2: #22345F;

  /* Pastéis (fundos de retrato, chips) */
  --mustard: #F4C64E;
  --peach: #FFD9C4;
  --mint: #CDEBD9;
  --butter: #FFF0BF;
  --rose: #F9D2DA;
  --lilac-gray: #DADDEB;

  /* Caderno */
  --line-blue: #B9D4EE;
  --margin-red: #EE8D8D;

  /* Linha e sombra */
  --line: 2.5px;
  --line-thick: 3.5px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-hard-lg: 8px 8px 0 var(--ink);
  --shadow-soft: 0 22px 44px -22px rgba(20, 33, 61, .45);
  --shadow-photo: 0 18px 30px -16px rgba(20, 33, 61, .55);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Tipografia */
  --font-display: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --font-college: "Graduate", "Rockwell", Georgia, serif;
  --font-body: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-hand: var(--font-body); /* manuscrita removida a pedido do cliente (fonte não é mais carregada) */

  --fs-hero: clamp(2rem, 4.6vw, 4.1rem);
  --fs-xl: clamp(1.9rem, 4.2vw, 3.6rem);
  --fs-lg: clamp(1.7rem, 3.4vw, 2.8rem);
  --fs-md: clamp(1.3rem, 2.3vw, 1.8rem);
  --fs-sm: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body: clamp(1rem, 1.1vw + .6rem, 1.15rem);
  --fs-small: .875rem;

  /* Layout */
  --container: 1180px;
  --container-wide: 1360px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad: clamp(72px, 10vw, 136px);
  --header-h: 68px;
  --guidebar-h: 0px;   /* o guia (barra fixa inferior) atualiza esta variável */

  /* Movimento */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur: .45s;
  --dur-slow: .9s;

  /* Camadas */
  --z-bg: 0;
  --z-scene: 1;
  --z-fg: 2;
  --z-over: 5;
  --z-header: 50;
  --z-guide: 60;
  --z-modal: 100;

  /* Grão de papel (ruído SVG minúsculo, repetido) */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-bottom: var(--guidebar-h);
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
:where(h1, h2, h3, h4) { line-height: 1.04; font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--gold-soft); color: var(--ink); }

/* ---------- ACESSIBILIDADE ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 16px;
  z-index: var(--z-modal);
  background: var(--gold); color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow-hard-sm);
  transform: translateY(-300%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }

/* Seção = ambiente */
.scene {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
  overflow: clip;
}
.scene--paper { background-color: var(--paper); }
.scene--paper-2 { background-color: var(--paper-2); }
.scene--sky { background-color: var(--sky); }
.scene--navy { background-color: var(--navy); color: var(--paper); }
.scene--gold { background-color: var(--gold-soft); }
.scene--white { background-color: var(--white); }

/* Céu com raios de sol. Centro configurável: --rays-x / --rays-y */
.bg-rays {
  background-color: var(--sky);
  background-image:
    radial-gradient(circle at var(--rays-x, 50%) var(--rays-y, 30%), rgba(255, 253, 248, .85) 0, rgba(255, 253, 248, 0) 38%),
    repeating-conic-gradient(from 0deg at var(--rays-x, 50%) var(--rays-y, 30%), var(--sky) 0deg 7.5deg, var(--sky-2) 7.5deg 15deg);
}
/* Fundo de estúdio fotográfico (creme quente, manchado, com luz central e vinheta).
   Substitui o céu azul. Centro da luz: --light-x / --light-y */
.bg-studio {
  background-color: #EEE3CC;
  background-image:
    radial-gradient(ellipse 58% 52% at var(--light-x, 50%) var(--light-y, 42%), rgba(255, 251, 240, .96) 0%, rgba(255, 251, 240, .55) 38%, rgba(255, 251, 240, 0) 72%),
    radial-gradient(circle at 18% 28%, rgba(205, 184, 144, .38) 0, rgba(205, 184, 144, 0) 30%),
    radial-gradient(circle at 84% 22%, rgba(205, 184, 144, .32) 0, rgba(205, 184, 144, 0) 27%),
    radial-gradient(circle at 74% 82%, rgba(190, 165, 120, .36) 0, rgba(190, 165, 120, 0) 34%),
    radial-gradient(circle at 12% 86%, rgba(190, 165, 120, .32) 0, rgba(190, 165, 120, 0) 32%),
    radial-gradient(ellipse 130% 110% at 50% 45%, rgba(110, 82, 44, 0) 52%, rgba(110, 82, 44, .26) 100%);
}

/* Papel de caderno (linhas azuis + margem vermelha). --margin-x controla a margem */
.bg-notebook {
  background-color: var(--white);
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x, 72px) - 1px), var(--margin-red) calc(var(--margin-x, 72px) - 1px), var(--margin-red) calc(var(--margin-x, 72px) + 1px), transparent calc(var(--margin-x, 72px) + 1px)),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--line-blue) 31px 32px);
}
/* Pontilhado suave */
.bg-dots {
  background-image: radial-gradient(rgba(20, 33, 61, .12) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
}
/* Grão de papel sobre qualquer fundo */
.tex-paper { position: relative; }
.tex-paper::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--paper-noise);
  pointer-events: none;
  z-index: var(--z-over);
  mix-blend-mode: multiply;
}

/* Borda de nuvens entre ambientes (como último filho de uma .scene):
   <div class="cloud-edge cloud-edge--bottom" style="--edge-color: var(--paper)" aria-hidden="true"></div> */
.cloud-edge {
  position: absolute; left: 0; right: 0;
  height: 70px;
  pointer-events: none;
  z-index: var(--z-fg);
  background:
    radial-gradient(48px 44px at 30px 70px, var(--edge-color, var(--paper)) 98%, transparent) 0 0 / 120px 70px repeat-x,
    radial-gradient(64px 58px at 90px 70px, var(--edge-color, var(--paper)) 98%, transparent) 0 0 / 120px 70px repeat-x;
}
.cloud-edge--bottom { bottom: -1px; }
/* Costura automática: cena de estúdio (.bg-studio) logo depois de uma cena de papel recebe a mesma
   borda serrilhada das outras transições, na cor do papel de cima (evita o "degrau" seco de cor). */
.scene--paper + .scene.bg-studio { --seam-color: var(--paper); }
.scene--paper-2 + .scene.bg-studio { --seam-color: var(--paper-2); }
:is(.scene--paper, .scene--paper-2) + .scene.bg-studio::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 19px;
  background: var(--seam-color);
  -webkit-mask: radial-gradient(10px 10px at 50% 100%, transparent 96%, #000) 0 0 / 24px 19px repeat-x;
          mask: radial-gradient(10px 10px at 50% 100%, transparent 96%, #000) 0 0 / 24px 19px repeat-x;
  z-index: var(--z-fg);
  pointer-events: none;
}
.cloud-edge--top { top: -1px; transform: scaleY(-1); }
/* Borda serrilhada (ticket) */
.ticket-edge {
  position: absolute; left: 0; right: 0; height: 18px;
  background: var(--edge-color, var(--paper));
  -webkit-mask: radial-gradient(10px 10px at 50% 100%, transparent 96%, #000) 0 0 / 24px 18px repeat-x;
          mask: radial-gradient(10px 10px at 50% 100%, transparent 96%, #000) 0 0 / 24px 18px repeat-x;
  z-index: var(--z-fg);
  pointer-events: none;
}

/* ---------- TIPOGRAFIA ---------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em; }
.college { font-family: var(--font-college); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.hand { font-family: var(--font-hand); }

.title-hero { font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.03; letter-spacing: -.01em; }
.title-xl { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.04; letter-spacing: -.01em; }
.title-lg { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.06; }
.title-md { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.1; }
.title-sm { font-family: var(--font-display); font-size: var(--fs-sm); line-height: 1.15; }
.lead { font-size: clamp(1.08rem, 1vw + .78rem, 1.32rem); line-height: 1.5; max-width: 62ch; }
/* Direção do cliente: títulos SEMPRE em maiúsculas (tom profissional/institucional) */
.title-hero, .title-xl, .title-lg, .title-md, .title-sm { text-transform: uppercase; letter-spacing: .005em; }
.muted { color: var(--ink-soft); }

/* Destaque dentro de títulos: <em class="em">sua IA</em>
   Em fundo claro usa o laranja escuro (contraste ≥ 3:1 em título grande no creme/estúdio/dourado);
   sobre navy, use .em--on-dark (laranja vivo, 4,6:1). */
.em { font-style: normal; color: var(--orange-deep); }
.em--on-dark { color: var(--orange); }
.em--gold { color: var(--gold-deep); }
/* Marca-texto */
.mark {
  background: linear-gradient(transparent 58%, var(--gold-soft) 58%, var(--gold-soft) 92%, transparent 92%);
  padding-inline: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Sombra dura (uso pontual em display grande) */
.shadow-gold { text-shadow: .05em .05em 0 var(--gold); }
.shadow-ink { text-shadow: .05em .05em 0 var(--ink); }

/* Sobrancelha / rótulo universitário */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5em 1em .45em;
  font-family: var(--font-college);
  font-size: clamp(.7rem, .4vw + .6rem, .84rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--ink);
  line-height: 1.1;
}
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }

/* ---------- COMPONENTES ---------- */

/* Botões: contorno marinho, sombra dura, "afundam" ao clicar */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-shadow: 5px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px;
  padding: .82em 1.55em .8em;
  font-family: var(--font-display);
  font-size: clamp(1rem, .5vw + .86rem, 1.16rem);
  letter-spacing: .01em;
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--btn-shadow) var(--btn-shadow) 0 var(--ink);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) linear;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--btn-shadow) + 2px) calc(var(--btn-shadow) + 2px) 0 var(--ink);
}
.btn:active {
  transform: translate(var(--btn-shadow), var(--btn-shadow));
  box-shadow: 0 0 0 var(--ink);
  transition-duration: .06s;
}
.btn__arrow { display: inline-block; transition: transform var(--dur) var(--ease-pop); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn:hover .btn__arrow--down { transform: translateY(4px); }
.btn--primary { --btn-bg: var(--orange); --btn-fg: var(--white); }
.btn--primary:hover { --btn-bg: #F7663F; }
.btn--gold { --btn-bg: var(--gold); }
.btn--gold:hover { --btn-bg: #F0C350; }
.btn--navy { --btn-bg: var(--navy); --btn-fg: var(--paper); }
.btn--paper { --btn-bg: var(--white); }
.btn--ghost { --btn-bg: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.btn--ghost:hover { box-shadow: none; transform: none; text-decoration-color: var(--orange); }
.btn--sm { min-height: 42px; padding: .62em 1.15em .6em; font-size: .95rem; --btn-shadow: 3px; }
/* Botão laranja pequeno (texto < 18px): fundo laranja escuro para o texto branco ter contraste ≥ 4,5:1 */
.btn--primary.btn--sm { --btn-bg: var(--orange-deep); }
.btn--primary.btn--sm:hover { --btn-bg: #B5381A; }
.btn--xl { min-height: 66px; padding: 1em 2.1em .98em; font-size: clamp(1.1rem, 1.1vw + .72rem, 1.5rem); --btn-shadow: 6px; }
.btn--block { width: 100%; }

/* Chips de confiança: <ul class="chips" role="list"><li class="chip"><svg/>Garantia de 7 dias</li></ul> */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .9em .46em;
  font-family: var(--font-college);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--ink);
  line-height: 1.15;
  white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; flex: none; }

/* Cartão */
.card {
  position: relative;
  background: var(--card-bg, var(--white));
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}

/* Cartão de retrato ("carteirinha"): janela da foto em cima + faixa com legenda embaixo.
   O retrato inteiro cabe na janela, apoiado na base — o rosto NUNCA é cortado nem coberto.
   <figure class="photo-card" style="--photo-bg: var(--sky-2)">
     <img src="assets/img/turma/personagem-1.webp" alt="..." width="430" height="382" loading="lazy">
     <figcaption class="photo-card__tag">Turma 2026 · Nº 01</figcaption>
   </figure> */
.photo-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: var(--photo-ratio, 4 / 5);
  background: var(--white);
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  transform: rotate(var(--tilt, 0deg));
}
.photo-card > img {
  display: block;
  width: 100%; height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: var(--photo-pos, 50% 100%);
  padding: var(--photo-pad, 5% 2% 0);
  background: var(--photo-bg, var(--mustard));
}
.photo-card__tag {
  display: block;
  padding: .8em .8em .74em;
  background: var(--white);
  border-top: var(--line-thick) solid var(--ink);
  font-family: var(--font-college); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sticker */
.sticker {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .45em .95em .42em;
  background: var(--sticker-bg, var(--gold));
  color: var(--sticker-fg, var(--ink));
  font-family: var(--font-college);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--ink);
  transform: rotate(var(--tilt, -4deg));
  line-height: 1;
}

/* Balão de fala: <p class="balloon balloon--tail-left">Texto</p> */
.balloon {
  position: relative;
  display: inline-block;
  max-width: 30ch;
  padding: .75em 1em;
  background: var(--balloon-bg, var(--white));
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: clamp(.95rem, .3vw + .85rem, 1.06rem);
  line-height: 1.3;
}
.balloon::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  background: inherit;
  border: var(--line) solid var(--ink);
  border-top: 0; border-left: 0;
}
.balloon--tail-bottom::after { left: 26px; bottom: -10px; transform: rotate(45deg); }
.balloon--tail-top::after { left: 26px; top: -10px; transform: rotate(225deg); }
.balloon--tail-left::after { left: -10px; top: 50%; margin-top: -8px; transform: rotate(135deg); }
.balloon--tail-right::after { right: -10px; top: 50%; margin-top: -8px; transform: rotate(-45deg); }

/* Fita adesiva / alfinete */
.tape {
  position: absolute;
  width: 88px; height: 24px;
  background: rgba(247, 222, 148, .8);
  border-left: 2px dashed rgba(20, 33, 61, .12);
  border-right: 2px dashed rgba(20, 33, 61, .12);
  transform: rotate(var(--tilt, -6deg));
  z-index: 2;
}
.pin {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--pin-color, var(--orange));
  border: 2px solid var(--ink);
  box-shadow: inset -3px -3px 0 rgba(20, 33, 61, .2), 2px 3px 0 rgba(20, 33, 61, .25);
  z-index: 2;
}

/* Carimbo */
.stamp {
  display: inline-grid; place-items: center;
  padding: .45em .85em;
  font-family: var(--font-college);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stamp-color, var(--orange-deep));
  border: 3px solid currentColor;
  border-radius: 8px;
  outline: 2px solid currentColor;
  outline-offset: 3px;
  transform: rotate(var(--tilt, -8deg));
  opacity: .9;
}

/* Dourado metálico (selos, medalhas, brasões) */
.gold-foil {
  background: linear-gradient(145deg, #FFF3C2 0%, #F2D27A 22%, #E0A92E 48%, #B8861B 70%, #F0CF6E 100%);
}

/* ---------- MOVIMENTO / UTILITÁRIOS ---------- */

/* Revelar ao entrar na tela: data-reveal="up|pop|left|right|fade|rise"  (+ style="--reveal-delay:.15s") */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="up"], [data-reveal=""] { transform: translateY(32px); }
[data-reveal="rise"] { transform: translateY(70px); }
[data-reveal="left"] { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="pop"] { transform: scale(.86) rotate(-2deg); transition-timing-function: var(--ease-out), var(--ease-pop); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Flutuar */
[data-float] {
  animation: float var(--float-dur, 6s) var(--ease-in-out) infinite;
  animation-delay: var(--float-delay, 0s);
}
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--float-rot-a, -1deg)); }
  50% { transform: translate3d(0, calc(var(--float-amp, 10px) * -1), 0) rotate(var(--float-rot-b, 1.5deg)); }
}

/* Inclinação 3D (JS aplica --rx/--ry). Mantém a rotação --tilt do elemento */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  transition: transform .5s var(--ease-out);
}
[data-tilt].is-tilting { transition-duration: .08s; }

/* Parallax: JS aplica --py */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Balançar ao passar o mouse */
.wiggle-hover:hover { animation: wiggle .5s var(--ease-in-out); }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
/* Raios girando bem devagar (num elemento dedicado com .bg-rays) */
.spin-slow { animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Brilho que atravessa ao passar o mouse */
.shine { position: relative; overflow: hidden; }
.shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(0);
  pointer-events: none;
  z-index: 3;
}
.shine:hover::before { transition: transform .9s var(--ease-out); transform: skewX(-18deg) translateX(420%); }

main { display: block; }

/* Cenas fora da tela pausam suas animações infinitas (core.js aplica .is-offscreen) */
.scene.is-offscreen *, .scene.is-offscreen *::before, .scene.is-offscreen *::after { animation-play-state: paused !important; }

/* Rótulos em caixa-alta com letter-spacing largo ficam difíceis de ler em telas estreitas */
@media (max-width: 400px) {
  .college, .chip, .photo-card__tag { letter-spacing: .06em; }
  .eyebrow, .sticker { letter-spacing: .08em; }
}

/* ---------- PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  [data-tilt] { transform: rotate(var(--tilt, 0deg)) !important; }
}
/* Mesmo efeito quando o JS detecta reduced motion ou modo estático (?static=1) */
.reduce-motion [data-reveal], .static-mode [data-reveal] { opacity: 1 !important; transform: none !important; }
.reduce-motion [data-parallax] { transform: none !important; }
.static-mode *, .static-mode *::before, .static-mode *::after { animation-play-state: paused !important; }
.no-js [data-reveal] { opacity: 1; transform: none; }


/* ===== css/guide.css ===== */
/* =====================================================================
   GUIA — barra fixa inferior (criada por src/js/guide.js)
   Desktop: pílula flutuante centralizada. Mobile (< 768px): barra
   encostada na base + balão da fala acima dela.
   ===================================================================== */

/* foco por teclado nunca fica escondido atrás da barra */
html { scroll-padding-bottom: calc(var(--guidebar-h, 0px) + 16px); }

.guide__bar {
  position: fixed;
  z-index: var(--z-guide);
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(880px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 12px;
  color: var(--ink);
  min-height: 76px;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard), 0 22px 40px -20px rgba(20, 33, 61, .5);
  transform: translate3d(-50%, 0, 0);
  transition:
    transform .62s var(--ease-pop),
    opacity .3s var(--ease-out),
    visibility 0s linear 0s;
}
.guide[data-visible="false"] .guide__bar,
.guide.is-yielding .guide__bar {
  transform: translate3d(-50%, calc(100% + 48px), 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .38s var(--ease-in-out),
    opacity .3s var(--ease-out),
    visibility 0s linear .38s;
}
.guide[hidden] { display: none; }

/* ---------- foto (medalhão) ---------- */
.guide__face {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 80px;
  height: 58px;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
/* medalhão maior que a barra: "salta" pela borda de cima, como um broche */
.guide__medal {
  --medal: 82px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: var(--medal);
  height: var(--medal);
  margin: calc(var(--medal) / -2) 0 0 calc(var(--medal) / -2);
  translate: 0 -12px;
  padding: 3.5px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FFF3C2 0%, #F2D27A 22%, #E0A92E 48%, #B8861B 70%, #F0CF6E 100%);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink), 0 0 0 0 rgba(232, 181, 58, 0);
  transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-out);
}
/* anel "respirando" */
.guide__medal::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  animation: guide-breathe 3.6s var(--ease-in-out) infinite;
}
.guide__photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* fundo quente de estúdio (nada de azul) */
  background: radial-gradient(circle at 50% 32%, var(--butter) 0, var(--gold-soft) 46%, var(--mustard) 100%);
  border: 1.5px solid var(--ink);
}
.guide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.08);
}
.guide__photo.is-crest { display: grid; place-items: center; background: var(--paper); }
.guide__crest { width: 74%; height: 74%; }
.guide__dot {
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1.5px var(--ink);
}
.guide.is-talking .guide__dot { animation: guide-blip .32s var(--ease-in-out) 4 alternate; }
.guide.is-talking .guide__medal { animation: guide-nod .6s var(--ease-pop); }
@media (hover: hover) {
  .guide__face:hover .guide__medal {
    transform: rotate(-6deg) scale(1.07);
    box-shadow: 2px 2px 0 var(--ink), 0 0 0 5px rgba(232, 181, 58, .5);
  }
}
.guide__face:focus-visible { outline: 0; }
.guide__face:focus-visible .guide__medal {
  box-shadow: 2px 2px 0 var(--ink), 0 0 0 4px var(--white), 0 0 0 7px var(--orange);
}

@keyframes guide-breathe {
  0% { transform: scale(.9); opacity: 0; }
  35% { opacity: .95; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes guide-blip {
  from { transform: scale(1); }
  to { transform: scale(1.4); }
}
@keyframes guide-nod {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-7deg) translateY(-1px); }
  70% { transform: rotate(3deg); }
}

/* ---------- fala (balão creme apontando para a foto) ---------- */
.guide__talk {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 5px 0 0 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46px;
  padding: 8px 16px 7px 14px;
  background: var(--paper);
  border: 2px solid rgba(20, 33, 61, .16);
  border-radius: 16px;
}
.guide__talk::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--paper);
  border: 2px solid rgba(20, 33, 61, .16);
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 3px;
  transform: rotate(45deg);
}
/* nome como "etiqueta" na borda do balão */
.guide__name {
  position: absolute;
  left: 12px;
  top: -10px;
  padding: 3px 8px 2px;
  background: var(--navy);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-college);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  line-height: 1.1;
  white-space: nowrap;
}
.guide__line {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.22;
  letter-spacing: -.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-wrap: wrap;
  will-change: transform, opacity;
}

/* ---------- preço ---------- */
.guide__divider {
  flex: none;
  align-self: stretch;
  margin-block: 6px;
  border-left: 2px dashed rgba(20, 33, 61, .26);
}
.guide__price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}
.guide__label {
  white-space: nowrap;
  font-family: var(--font-college);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.guide__value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--gold-soft) 62%, var(--gold-soft) 94%, transparent 94%);
  padding-inline: 2px;
}
.guide__cur { font-size: .6em; vertical-align: .42em; letter-spacing: 0; }

/* ---------- CTA + fechar ---------- */
.guide__cta {
  flex: none;
  min-height: 48px;
  padding-inline: 1.3em 1.2em;
  font-size: 1rem;
  white-space: nowrap;
}
/* rótulo completo no desktop/tablet, curto no celular */
.guide__cta-short { display: none; }
.guide.is-first .guide__cta { animation: guide-pop .7s var(--ease-pop) .35s both; }
@keyframes guide-pop {
  0% { transform: scale(.85); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.guide__close {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -4px;
  border-radius: 50%;
  color: var(--ink-mute);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
/* área de toque de 44 × 44 px em volta do círculo visível */
.guide__close::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* o rosto no desktop é só decoração (a frase já está à vista) */
.guide:not(.is-mobile) .guide__face { cursor: default; }
.guide__close svg { width: 16px; height: 16px; }
.guide__close:hover { background: var(--paper-2); color: var(--ink); }

/* ---------- tablet / notebook estreito ---------- */
@media (max-width: 1023.98px) and (min-width: 768px) {
  .guide__bar { gap: 10px; padding-right: 8px; }
  .guide__talk { padding-inline: 12px 10px; }
  .guide__line { font-size: .88rem; }
  .guide__divider { display: none; }
  .guide__value { font-size: 1.28rem; }
  .guide__cta { padding-inline: 1em .95em; font-size: .9rem; }
  .guide__close { margin-left: -5px; }
}

/* =====================================================================
   MOBILE (< 768px): barra encostada + balão
   ===================================================================== */
@media (max-width: 767.98px) {
  .guide__bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-height: 64px;
    gap: 10px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
    background: var(--white);
    border-width: var(--line) 0 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 28px -16px rgba(20, 33, 61, .45);
    transform: none;
  }
  .guide[data-visible="false"] .guide__bar,
  .guide.is-yielding .guide__bar { transform: translate3d(0, calc(100% + 12px), 0); }

  .guide__face { width: 54px; height: 46px; }
  .guide__medal { --medal: 56px; translate: 0 -10px; padding: 3px; border-width: 2px; box-shadow: 1.5px 1.5px 0 var(--ink); }
  .guide__medal::before { inset: -5px; }
  .guide__dot { width: 11px; height: 11px; right: -3px; bottom: 0; }

  .guide__divider { display: none; }
  .guide__price { flex: 1 1 auto; min-width: 0; gap: 4px; }
  .guide__value { font-size: 1.22rem; }
  .guide__cta { flex: none; min-width: 0; min-height: 46px; padding-inline: .95em .9em; font-size: .88rem; gap: .45em; }
  .guide__cta-long { display: none; }
  .guide__cta-short { display: inline; }
  /* círculo de 30px, área de toque de 44px; 8px livres até o botão */
  .guide__close { width: 30px; height: 30px; margin-left: -2px; }
  .guide__close::after { inset: -7px; }

  /* balão da fala acima da barra */
  .guide__talk::before { display: none; }
  .guide__name { position: static; align-self: flex-start; padding: 3px 7px 2px; font-size: .58rem; }
  .guide__talk {
    position: absolute;
    margin: 0;
    min-height: 0;
    justify-content: flex-start;
    gap: 3px;
    left: 10px;
    bottom: calc(100% + 22px);
    width: max-content;
    max-width: min(340px, calc(100vw - 20px));
    padding: 10px 14px 11px;
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow-hard-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.94);
    transform-origin: 26px 100%;
    /* o balão é só leitura: toques passam para a página por baixo */
    pointer-events: none;
    transition:
      opacity .22s var(--ease-out),
      transform .32s var(--ease-out),
      visibility 0s linear .32s;
  }
  .guide__talk::after {
    content: "";
    position: absolute;
    left: 17px;
    bottom: -9px;
    width: 15px;
    height: 15px;
    background: var(--white);
    border: var(--line) solid var(--ink);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
  }
  .guide.is-open .guide__talk {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity .22s var(--ease-out),
      transform .38s var(--ease-pop),
      visibility 0s linear 0s;
  }
  .guide__line { display: block; font-size: 1rem; overflow: visible; }
}

@media (max-width: 419.98px) {
  .guide__cta { gap: 0; padding-inline: 1.05em; }
  .guide__cta .btn__arrow { display: none; }
}
/* 360–379px: preço e botão menores para sobrar respiro entre eles */
@media (max-width: 379.98px) {
  .guide__value { font-size: 1.08rem; padding-inline: 1px; }
  .guide__label { font-size: .56rem; letter-spacing: .1em; }
  .guide__cta { padding-inline: .8em; font-size: .8rem; }
}
@media (max-width: 359.98px) {
  .guide__bar { gap: 6px; padding-left: 5px; padding-right: 6px; }
  .guide__face { width: 48px; height: 44px; }
  .guide__medal { --medal: 50px; translate: 0 -8px; }
  .guide__label { font-size: .52rem; letter-spacing: .06em; white-space: nowrap; }
  .guide__value { font-size: 1rem; }
  .guide__cta { padding-inline: .7em; font-size: .76rem; gap: 0; }
  .guide__close { width: 28px; height: 28px; margin-left: 2px; }
  .guide__close::after { inset: -8px; }
  .guide__close svg { width: 14px; height: 14px; }
}

/* =====================================================================
   MOVIMENTO REDUZIDO / ESTÁTICO: sem deslizar, sem respirar
   ===================================================================== */
.reduce-motion .guide__bar,
.reduce-motion .guide[data-visible="false"] .guide__bar,
.reduce-motion .guide.is-yielding .guide__bar {
  transition: opacity .2s linear, visibility 0s linear 0s;
}
.reduce-motion .guide[data-visible="false"] .guide__bar,
.reduce-motion .guide.is-yielding .guide__bar { opacity: 0; transform: translate3d(-50%, 0, 0); }
.reduce-motion .guide__medal::before,
.reduce-motion .guide.is-talking .guide__dot,
.reduce-motion .guide.is-talking .guide__medal,
.reduce-motion .guide.is-first .guide__cta { animation: none; }
.reduce-motion .guide__talk,
.reduce-motion .guide.is-open .guide__talk { transition: none; transform: none; }
@media (max-width: 767.98px) {
  .reduce-motion .guide[data-visible="false"] .guide__bar,
  .reduce-motion .guide.is-yielding .guide__bar { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide__medal::before { animation: none; }
}


/* ===== css/sections/00-header.css ===== */
/* =====================================================================
   00 — HEADER
   Faixa de avisos navy (linha fixa) + barra fixa. Transparente sobre o
   fundo de estúdio da capa; com html.is-scrolled vira barra creme e a
   faixa recolhe para cima.
   ===================================================================== */
.site-header {
  --ticker-h: 30px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transform: translate3d(0, 0, 0);
  transition: transform .42s var(--ease-out);
  pointer-events: none;            /* só as partes visíveis recebem clique */
}
.site-header > * { pointer-events: auto; }
html.is-scrolled .site-header { transform: translate3d(0, calc(var(--ticker-h) * -1), 0); }

/* ---------- faixa de avisos (linha fixa, centralizada) ---------- */
.site-header__ticker {
  height: var(--ticker-h);
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
  border-bottom: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  padding-inline: var(--gutter);
}
.site-header__run {
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  font-family: var(--font-college);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.site-header__item { padding-inline: .6em; padding-top: .15em; }
.site-header__item--gold { color: var(--gold); }
.site-header__sep { color: var(--gold); padding-top: .15em; opacity: .85; }
@media (max-width: 419.98px) {
  .site-header__run { font-size: .68rem; letter-spacing: .12em; }
}
@media (max-width: 359.98px) {
  .site-header__sep--opt, .site-header__item--opt { display: none; }
}

/* ---------- barra ---------- */
.site-header__bar {
  position: relative;
  height: var(--header-h);
  background: transparent;
  border-bottom: var(--line) solid transparent;
  transition: background-color .3s linear, border-color .3s linear, box-shadow .3s linear;
}
html.is-scrolled .site-header__bar,
.site-header.is-menu-open .site-header__bar {
  background: var(--paper);
  border-bottom-color: var(--ink);
  box-shadow: 0 8px 22px -18px rgba(20, 33, 61, .6);
}
.site-header__inner {
  height: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px);
}

/* marca */
.site-header__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  margin-right: auto;
  flex: none;
}
.site-header__crest {
  width: 46px; height: 46px;
  flex: none;
  filter: drop-shadow(2px 2px 0 rgba(20, 33, 61, .9));
  transition: transform .5s var(--ease-pop);
}
.site-header__brand:hover .site-header__crest { transform: rotate(-8deg) scale(1.06); }
.site-header__word {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  line-height: .92;
  text-transform: uppercase;
}
.site-header__word-1 { font-size: 1.32rem; letter-spacing: .015em; }
.site-header__word-2 { font-size: .86rem; letter-spacing: .205em; margin-top: 3px; color: var(--ink); }

/* nav desktop */
.site-header__nav { display: none; }
.site-header__nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.site-header__nav a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--font-college);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.site-header__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 9px;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .38s var(--ease-out);
}
.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after,
.site-header__nav a.is-current::after { transform: scaleX(1); transform-origin: left center; }

.site-header__cta { display: none; flex: none; white-space: nowrap; }
.site-header__cta span { font: inherit; }

/* botão de menu (mobile) */
.site-header__toggle {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; min-width: 44px;
  padding: 0 14px 0 12px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-college);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.site-header__toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.site-header__toggle-label { padding-top: .12em; }
.site-header__toggle-icon { position: relative; width: 18px; height: 14px; flex: none; }
.site-header__toggle-icon i {
  position: absolute; left: 0; right: 0;
  height: 2.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease-out), opacity .2s linear;
}
.site-header__toggle-icon i:nth-child(1) { top: 0; }
.site-header__toggle-icon i:nth-child(2) { top: 5.75px; }
.site-header__toggle-icon i:nth-child(3) { bottom: 0; }
.site-header__toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }

/* ---------- painel do menu (mobile) ---------- */
.site-header__panel {
  position: absolute; left: 0; right: 0;
  top: calc(var(--ticker-h) + var(--header-h));
  max-height: calc(100svh - var(--ticker-h) - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  background-image: var(--paper-noise);
  border-bottom: var(--line-thick) solid var(--ink);
  /* sombra + véu escuro sobre a página */
  box-shadow: 0 26px 40px -24px rgba(20, 33, 61, .55), 0 0 0 100vmax rgba(20, 33, 61, .38);
  clip-path: inset(0 0 -100vmax 0);
  padding: 10px var(--gutter) 26px;
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity .24s linear, transform .3s var(--ease-out);
}
html.is-scrolled .site-header__panel { max-height: calc(100svh - var(--header-h)); }
.site-header__panel.is-open { opacity: 1; transform: none; }
.site-header__panel[hidden] { display: none; }
.site-header__menu { max-width: 560px; margin-inline: auto; }
.site-header__links li {
  border-bottom: 2px dashed rgba(20, 33, 61, .2);
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .3s linear, transform .4s var(--ease-out);
  transition-delay: calc(.04s * var(--i, 0) + .05s);
}
.site-header__panel.is-open .site-header__links li,
.site-header__panel.is-open .site-header__panel-cta { opacity: 1; transform: none; }
.site-header__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.site-header__go {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .3s var(--ease-pop), background-color .2s linear;
}
.site-header__links a:hover .site-header__go,
.site-header__links a:focus-visible .site-header__go { background: var(--gold); transform: translateX(3px); }
.site-header__panel-cta {
  margin-top: 22px;
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .3s linear .22s, transform .4s var(--ease-out) .22s;
}
.site-header__panel-note {
  margin-top: 12px;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

html.menu-open { overflow: hidden; }

/* ---------- breakpoints ---------- */
@media (max-width: 389.98px) {
  .site-header__word-1 { font-size: 1.12rem; }
  .site-header__word-2 { font-size: .73rem; }
  .site-header__crest { width: 40px; height: 40px; }
  .site-header__toggle-label { display: none; }
  .site-header__toggle { padding: 0 12px; }
}
@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .site-header__nav { display: block; }
  .site-header__toggle, .site-header__panel { display: none !important; }
  .site-header__inner { gap: clamp(20px, 2.6vw, 40px); }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .site-header__nav ul { gap: 18px; }
  .site-header__nav a { font-size: .74rem; letter-spacing: .1em; }
}


/* ===== css/sections/00-intro.css ===== */
/* =====================================================================
   INTRO — abertura estilo app (a capa "pula", brilha e voa para o site)
   Só existe quando o <head> marca html.intro-on (ou, depois que o JS
   assume, enquanto .intro--js estiver na tela).
   Linha do tempo (s), contada a partir de .intro--go (foto pronta):
   0 fundo · .15–.95 capa pula · .55–1.0 faixa abre · .8–1.4 brilho ·
   .55–1.5 barra carrega · ~1.66 saída (JS) · ~2.3 pouso
   Garantia sem JS: 2.8 s (+.45 fade) e o <head> tira html.intro-on.
   ===================================================================== */
.intro { display: none; }

html.intro-on .intro,
.intro.intro--js {
  --pop-from: .9;            /* tamanho inicial do "pulo" (ver LCP no celular) */
  position: fixed; inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* garantia: se o JS não assumir, a intro some sozinha (o <head> então tira html.intro-on) */
html.intro-on .intro:not(.intro--js) { animation: intro-failsafe .45s var(--ease-out) 2.8s forwards; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

/* tudo parado até a largada (.intro--go); a garantia, no próprio .intro, não para.
   (especificidade alta de propósito: o atalho "animation" de cada peça zera o play-state) */
html .intro:not(.intro--go) * { animation-play-state: paused; }

/* a capa e a faixa do site ficam escondidas até a capa e a faixa da intro "pousarem" nelas */
html.intro-on .hero-figure__rise { opacity: 0; animation: none !important; }
html.intro-on .hero-plate { opacity: 0; }

.intro__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 48% at 50% 46%, rgba(232, 181, 58, .28) 0%, rgba(232, 181, 58, 0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #1B2B52 0%, var(--navy) 55%, #0A1226 100%);
}
.intro__rays {
  position: absolute; left: 50%; top: 46%;
  width: max(160vmax, 1400px); aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(247, 222, 148, .07) 0deg 7deg, transparent 7deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 46%);
          mask-image: radial-gradient(circle, #000 0, transparent 46%);
  opacity: 0;
  animation: intro-rays-in .6s var(--ease-out) .05s forwards, spin 60s linear infinite;
}
@keyframes intro-rays-in { to { opacity: 1; } }

/* palco pelo menos tão largo quanto a capa do site (assim a capa do site, ao aparecer,
   não vira um "novo" LCP maior que a foto da intro) */
.intro__stage {
  position: relative;
  width: min(840px, calc(100vw - 16px));
  display: grid;
  justify-items: center;
}

/* ---------- capa ---------- */
.intro__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1670 / 941;
  transform-origin: 50% 70%;
  opacity: 0;
  /* o exagero está nos quadros-chave; cada trecho só desacelera (sem "borracha") */
  animation: intro-pop .8s cubic-bezier(.22, 1, .36, 1) .15s forwards;
  will-change: transform, opacity;
}
/* a foto só é pintada ~.17 s depois da largada, com a capa já começando a aparecer:
   pintada antes (com a capa em opacidade 0) o Chrome não a conta como LCP e, sem repintura,
   a capa do site acabaria virando o LCP no pouso */
.intro__img, .intro__shine { visibility: hidden; }
.intro--go .intro__img, .intro--go .intro__shine { visibility: visible; transition: visibility 0s .17s; }
@keyframes intro-pop {
  0% { opacity: 0; transform: translateY(34px) scale(var(--pop-from)); }
  40% { opacity: 1; }
  62% { transform: translateY(-4px) scale(1.045); }
  82% { transform: translateY(0) scale(.99); }
  100% { opacity: 1; transform: none; }
}
.intro__img {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 89%, transparent 99.5%);
          mask-image: linear-gradient(90deg, #000 89%, transparent 99.5%);
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .45));
  user-select: none; -webkit-user-drag: none;
}
/* brilho: cópia clareada da foto, visível só numa lâmina fina (+ um filete) que atravessa */
.intro__shine {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
  user-select: none; -webkit-user-drag: none;
  filter: brightness(2.1) saturate(.75) sepia(.2);
  -webkit-mask-image:
    linear-gradient(90deg, #000 89%, transparent 99.5%),
    linear-gradient(105deg, transparent 44%, #000 47%, transparent 50%, transparent 51.5%, rgba(0, 0, 0, .55) 52.5%, transparent 53.5%);
  -webkit-mask-composite: source-in, source-over;   /* a última camada precisa de "add" */
          mask-image:
    linear-gradient(90deg, #000 89%, transparent 99.5%),
    linear-gradient(105deg, transparent 44%, #000 47%, transparent 50%, transparent 51.5%, rgba(0, 0, 0, .55) 52.5%, transparent 53.5%);
          mask-composite: intersect, add;
  -webkit-mask-size: 100% 100%, 300% 100%;
          mask-size: 100% 100%, 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 85% 0;
          mask-position: 0 0, 85% 0;
  /* sempre pintada (a lâmina começa fora da foto): assim não vira um LCP novo no meio da intro */
  animation: intro-shine .6s var(--ease-in-out) .8s forwards;
}
@keyframes intro-shine {
  from { -webkit-mask-position: 0 0, 85% 0; mask-position: 0 0, 85% 0; }
  to { -webkit-mask-position: 0 0, 5% 0; mask-position: 0 0, 5% 0; }
}

/* ---------- faixa (ecoa a faixa navy da capa do site) ---------- */
.intro__plate {
  position: relative;
  width: min(100%, 760px);
  margin-top: -6px;
  padding: 13px 18px 0;
  display: grid; justify-items: center; gap: 12px;
  background: #0F1B38;
  border: 2px solid rgba(247, 222, 148, .25);
  border-top: 4px solid var(--gold);
  border-radius: 6px 6px 16px 16px;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .7);
  overflow: hidden;
  transform: scaleX(0);
  animation: intro-plate .45s var(--ease-out) .55s forwards;
}
@keyframes intro-plate { to { transform: scaleX(1); } }
.intro__tag {
  font-family: var(--font-college);
  font-size: clamp(.62rem, 1.2vw + .3rem, .92rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
  opacity: 0;
  animation: intro-tag .5s var(--ease-out) .75s forwards;
}
.intro__star { color: var(--gold); }
@keyframes intro-tag {
  from { opacity: 0; letter-spacing: .5em; }
  to { opacity: 1; letter-spacing: .2em; }
}
.intro__bar { display: block; height: 4px; background: rgba(247, 222, 148, .12); margin-inline: -18px; width: calc(100% + 36px); }
.intro__bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), #FFF0B8);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: intro-bar .95s var(--ease-in-out) .55s forwards;
}
@keyframes intro-bar { to { transform: scaleX(1); } }

.intro__hint {
  position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: max-content; max-width: calc(100vw - 32px);
  text-align: center;
  font-family: var(--font-college); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251, 245, 232, .62);
  opacity: 0;
  animation: intro-rays-in .5s linear 1s forwards;
}
.intro__hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .intro__hint-mouse { display: none; }
  .intro__hint-touch { display: inline; }
}

/* ---------- saída (JS): capa e faixa voam até a capa e a faixa do site; o fundo some ---------- */
.intro--exit { pointer-events: none; cursor: default; }
.intro--exit .intro__banner { animation: none; opacity: 1; transition: transform .65s cubic-bezier(.65, 0, .25, 1); }
/* a sombra chega à da capa do site (o JS define o valor final, compensando a escala) */
.intro--exit .intro__img { transition: filter .65s cubic-bezier(.65, 0, .25, 1); }
.intro--exit .intro__shine { display: none; }
.intro--exit .intro__plate { animation: none; transform-origin: 0 0; transition: transform .65s cubic-bezier(.65, 0, .25, 1); }
/* o texto e a barra somem logo no começo do voo (a faixa do site traz o texto no pouso) */
.intro--exit .intro__tag,
.intro--exit .intro__star { color: transparent; transition: color .2s linear; }
.intro--exit .intro__bar { opacity: 0; transition: opacity .2s linear; }
.intro--exit .intro__bg,
.intro--exit .intro__rays,
.intro--exit .intro__hint { transition: opacity .5s var(--ease-out) .1s; opacity: 0 !important; }
/* pouso: a faixa da intro desbota por cima da faixa do site (que já está no mesmo lugar) */
.intro--landed .intro__plate { opacity: 0; transition: opacity .22s linear; }
/* saída simples (sem alvo visível): tudo desaparece */
.intro--fade { transition: opacity .45s var(--ease-out); opacity: 0; pointer-events: none; }

/* até 1023 px a capa do site é quase do tamanho do palco: o "pulo" não encolhe a foto
   (se encolhesse, o 1º quadro registrado como LCP seria menor que a capa do site) */
@media (max-width: 1023.98px) {
  html.intro-on .intro,
  .intro.intro--js { --pop-from: 1; }
}

@media (max-width: 600px) {
  .intro__plate { padding-inline: 10px; }
  .intro__bar { margin-inline: -10px; width: calc(100% + 20px); }
  /* igual à faixa do site no celular: sem estrelas, duas linhas */
  .intro__tag {
    font-size: .78rem;
    letter-spacing: .14em;
    line-height: 1.5;
    max-width: 17em;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
  .intro__star { display: none; }
  /* sem animar o espaçamento: com quebra de linha, ele mudaria a altura da faixa no meio */
  @keyframes intro-tag { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro { display: none !important; }
  html.intro-on .hero-figure__rise,
  html.intro-on .hero-plate { opacity: 1; }
}

/* Tab durante a intro: o link "Pular para o conteúdo" aparece por cima da intro que está saindo */
html.intro-on .skip-link:focus,
html:has(.intro--js) .skip-link:focus { z-index: 210; }


/* ===== css/sections/01-hero.css ===== */
/* =====================================================================
   01 — HERO (capa)  #inicio
   Fundo de estúdio fotográfico (.bg-studio + grão), composição central:
   rótulo + dica → capa grande e interativa → "púlpito" navy → H1 em dois
   níveis → subtítulo → preço + CTAs → chips → faixa dourada sobre o navy.

   A altura da capa no desktop é calculada para que o botão principal e o
   preço caibam na primeira tela (900, 800 e 768 px de altura).

   Personagens interativos: o JS (01-hero.js) põe data-active="1|2|3",
   data-pos="1|2|3" (último ativo) e .has-spot na <section>. Uma cópia
   escurecida da foto aparece por cima (só opacidade anima), com um "furo"
   no personagem ativo e outro no brasão — só os pixels da foto escurecem.
   ===================================================================== */

/* holofote: posição e raio animáveis (desliza de um personagem para o outro) */
@property --sx  { syntax: "<percentage>"; inherits: true; initial-value: 47.9%; }
@property --sy  { syntax: "<percentage>"; inherits: true; initial-value: 26%; }
@property --srx { syntax: "<percentage>"; inherits: true; initial-value: 17%; }

.hero {
  /* rostos, em % da imagem (1670 × 941). Se trocar a capa, ajuste aqui. */
  --f1x: 29.3%; --f1y: 31%;
  --f2x: 47.9%; --f2y: 17.5%;
  --f3x: 74.2%; --f3y: 33%;
  --ring: 16%;                         /* diâmetro do anel, em % da largura da capa */

  --top-h: calc(30px + var(--header-h)); /* faixa de avisos + barra do cabeçalho */
  --head-h: 84px;                       /* rótulo + dica (e a ficha, no lugar deles) */
  --hero-g: var(--gutter);
  --stage-w: min(840px, calc(100vw - var(--hero-g) * 2));
  --floor-h: 118px;

  --light-y: 40%;
  padding: calc(var(--top-h) + clamp(6px, 1.6vh, 20px)) 0 calc(var(--floor-h) + clamp(28px, 3.4vw, 48px));
  color: var(--ink);
  text-align: center;
}

.hero-inner {
  position: relative;
  z-index: 6;                            /* acima do grão do papel */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(var(--container-wide) + var(--hero-g) * 2);
  margin-inline: auto;
  padding-inline: var(--hero-g);
}

/* ---------- rótulo + dica ---------- */
.hero-head {
  height: var(--head-h);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 8px;
  padding-bottom: 10px;
}
/* volta com um pequeno atraso, depois que a ficha do topo já saiu */
.hero-eyebrow { transition: opacity .25s linear .22s, transform .35s var(--ease-out) .22s; }
.hero.has-spot .hero-eyebrow { transition-delay: 0s; }

/* ---------- capa ---------- */
.hero-figure {
  position: relative;
  width: var(--stage-w);
  max-width: 100%;
  z-index: 2;
}
.hero-figure__tilt {
  position: relative;
  aspect-ratio: 1670 / 941;
  transform: perspective(1300px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease-out);
}
.hero-figure__tilt.is-tilting { transition-duration: .12s; }

.hero-cover {
  display: block;
  width: 100%; height: 100%;
  /* lado direito da foto é um corte reto → some num degradê */
  -webkit-mask-image: linear-gradient(90deg, #000 89%, transparent 99.5%);
          mask-image: linear-gradient(90deg, #000 89%, transparent 99.5%);
  filter: drop-shadow(0 26px 26px rgba(92, 64, 22, .26));   /* estática: nunca anima */
  user-select: none;
  -webkit-user-drag: none;
}

/* cópia escurecida: só a opacidade anima. Máscara = degradê da direita
   ∩ furo no personagem ativo ∩ furo retangular no brasão */
.hero-cover--dim {
  position: absolute; inset: 0;
  filter: brightness(.56) saturate(.76);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
  -webkit-mask-image:
    linear-gradient(90deg, #000 89%, transparent 99.5%),
    radial-gradient(ellipse var(--srx) 50% at var(--sx) var(--sy), transparent 52%, rgba(0, 0, 0, .55) 78%, #000 100%),
    linear-gradient(180deg, #000 41%, transparent 47.5%),
    linear-gradient(90deg, #000 17%, transparent 21.5%, transparent 79.5%, #000 84%);
  -webkit-mask-composite: source-in, source-in, source-over, source-over;
          mask-image:
    linear-gradient(90deg, #000 89%, transparent 99.5%),
    radial-gradient(ellipse var(--srx) 50% at var(--sx) var(--sy), transparent 52%, rgba(0, 0, 0, .55) 78%, #000 100%),
    linear-gradient(180deg, #000 41%, transparent 47.5%),
    linear-gradient(90deg, #000 17%, transparent 21.5%, transparent 79.5%, #000 84%);
          mask-composite: intersect, intersect, add, add;
}
.hero.has-spot .hero-cover--dim { opacity: 1; }

/* centro/raio do holofote por personagem (um pouco abaixo do rosto: pega cabelo e ombros) */
.hero-figure { transition: --sx .3s var(--ease-out), --sy .3s var(--ease-out), --srx .3s var(--ease-out); }
.hero[data-pos="1"] .hero-figure { --sx: 26.5%; --sy: 40%; --srx: 20%; }
.hero[data-pos="2"] .hero-figure { --sx: 48.5%; --sy: 26%; --srx: 17%; }
.hero[data-pos="3"] .hero-figure { --sx: 74%;   --sy: 40%; --srx: 19.5%; }

/* entrada da capa (só com movimento) */
html.js:not(.reduce-motion):not(.static-mode) .hero-figure__rise {
  animation: hero-rise 1.15s var(--ease-out) .05s both;
}
@keyframes hero-rise {
  from { transform: translate3d(0, 36px, 0) scale(.975); }
  to { transform: none; }
}

/* ---------- áreas de toque/mouse (o personagem inteiro) ---------- */
.hero-zone {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero-zone--1 { left: 0; width: 38.5%; }
.hero-zone--2 { left: 38.5%; width: 22.5%; }
.hero-zone--3 { left: 61%; right: 0; }

/* ---------- pontos interativos ---------- */
.hero-spot {
  position: absolute;
  z-index: 3;
  width: var(--ring);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero-spot--1 { left: var(--f1x); top: var(--f1y); --pin-dy: 14%; }
.hero-spot--2 { left: var(--f2x); top: var(--f2y); --pin-dy: 22%; }
.hero-spot--3 { left: var(--f3x); top: var(--f3y); --pin-dy: 4%; }
.hero-spot:focus-visible { outline: none; }

.hero-spot__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 4px solid var(--gold);
  box-shadow:
    0 0 0 2px var(--ink),
    inset 0 0 0 2px rgba(20, 33, 61, .55),
    0 0 0 8px rgba(255, 249, 232, .38),
    0 12px 30px -6px rgba(20, 33, 61, .5);
  opacity: 0;
  scale: .72;
  transition: opacity .2s linear, scale .5s var(--ease-pop);
  pointer-events: none;
}
.hero-spot.is-active .hero-spot__ring { opacity: 1; scale: 1; }
.hero-spot:focus-visible .hero-spot__ring { opacity: 1; scale: 1; border-color: var(--orange); }

/* "crachá" numerado na gola: mostra que dá para interagir */
.hero-spot__pin {
  position: absolute;
  left: 50%; top: calc(100% + var(--pin-dy, 0%));
  translate: -50% -42%;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-soft);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px var(--ink), 0 6px 12px -4px rgba(20, 33, 61, .6);
  font-family: var(--font-college);
  font-size: .72rem;
  letter-spacing: .02em;
  line-height: 1;
  padding-top: 1px;
  transition: background-color .2s linear, color .2s linear, scale .45s var(--ease-pop);
  pointer-events: none;
}
.hero-spot__pin::before {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
}
html.js:not(.reduce-motion):not(.static-mode) .hero-spot__pin::before {
  animation: hero-pulse 2.8s var(--ease-out) 1.6s 4;
}
html.js:not(.reduce-motion):not(.static-mode) .hero-spot--2 .hero-spot__pin::before { animation-delay: 1.9s; }
html.js:not(.reduce-motion):not(.static-mode) .hero-spot--3 .hero-spot__pin::before { animation-delay: 2.2s; }
@keyframes hero-pulse {
  0% { opacity: .9; scale: .8; }
  70%, 100% { opacity: 0; scale: 1.5; }
}
.hero-spot:hover .hero-spot__pin,
.hero-spot.is-active .hero-spot__pin { background: var(--gold); color: var(--ink); scale: 1.12; }
.hero.is-offscreen .hero-spot__pin::before { animation-play-state: paused; }

/* ---------- fichas ---------- */
.hero-fichas {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero-ficha {
  --cw: 272px;
  position: absolute;
  width: var(--cw);
  display: flex; align-items: stretch;
  text-align: left;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--fx-from, 0), var(--fy-from, 8px), 0) scale(.94);
  transition: opacity .2s linear, transform .45s var(--ease-pop), visibility 0s linear .45s;
}
.hero[data-active="1"] .hero-ficha--1,
.hero[data-active="2"] .hero-ficha--2,
.hero[data-active="3"] .hero-ficha--3 {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s linear, transform .45s var(--ease-pop), visibility 0s;
}
.hero-ficha__num {
  flex: none;
  display: grid; place-items: center;
  width: 54px;
  background: var(--ink);
  color: var(--gold);
  border-right: var(--line) solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1;
}
.hero-ficha__body {
  display: grid; gap: 3px;
  padding: 10px 14px 11px;
  min-width: 0;
}
.hero-ficha__kicker {
  font-family: var(--font-college);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #85600A;                      /* ouro escuro: ≥ 5:1 sobre o branco em texto pequeno */
  line-height: 1.1;
}
.hero-ficha__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ink);
}
.hero-ficha__text {
  font-family: var(--font-college);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}

/* posição padrão (telas menores): no espaço do rótulo, acima da capa,
   deslocada na direção do rosto — nunca sobre outro rosto */
.hero-ficha {
  --cw: min(292px, 100%);
  bottom: calc(100% + 4px);
  left: clamp(0px, calc(var(--fx) - var(--cw) / 2), calc(100% - var(--cw)));
}
.hero-ficha--1 { --fx: var(--f1x); }
.hero-ficha--2 { --fx: var(--f2x); }
.hero-ficha--3 { --fx: var(--f3x); }
.hero.has-spot .hero-eyebrow { opacity: 0; transform: translateY(-6px); }

/* ---------- dica ---------- */
.hero-hint {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--font-college);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.25;
  transition: opacity .3s linear;
}
/* some enquanto um personagem está aceso e, de vez, depois da 1ª interação */
.hero.has-spot .hero-hint,
.hero.is-explored .hero-hint { opacity: 0; }
.hero-hint__icon { width: 18px; height: 18px; flex: none; color: var(--orange-deep); }
.hero-hint__text--touch, .hero-hint__icon--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .hero-hint__text--mouse, .hero-hint__icon--mouse { display: none; }
  .hero-hint__text--touch { display: inline; }
  .hero-hint__icon--touch { display: block; }
}

/* ---------- "púlpito" ---------- */
.hero-plate {
  position: relative;
  z-index: 3;
  width: min(calc(var(--stage-w) + 96px), 100%);
  margin-top: -16px;                    /* cobre o corte inferior da foto */
  display: flex; align-items: center; justify-content: center; gap: .9em;
  padding: 12px 18px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%),
    var(--navy);
  color: var(--gold-soft);
  border: 3px solid var(--ink);
  border-top: 5px solid var(--gold);
  border-radius: 6px 6px 16px 16px;
  box-shadow: 0 7px 0 var(--ink), 0 26px 30px -14px rgba(70, 46, 12, .55);
  font-family: var(--font-college);
  font-size: clamp(.78rem, .4vw + .55rem, .95rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
}
.hero-plate::before, .hero-plate::after {   /* "rebites" dourados nas pontas */
  content: "";
  position: absolute; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset -1.5px -1.5px 0 var(--gold-deep);
}
.hero-plate::before { left: 14px; }
.hero-plate::after { right: 14px; }
.hero-plate__star { color: var(--gold); font-size: .9em; }
.hero-plate__text { padding-top: .1em; }

/* ---------- título ---------- */
.hero-title {
  margin-top: clamp(26px, 3.2vh, 36px);
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  max-width: 100%;
}
.hero-title__main {
  display: block;
  font-size: clamp(2.1rem, 5.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: .004em;
  text-wrap: balance;
}
.hero-title__main .em { white-space: nowrap; }
.hero-title__sub {
  display: block;
  margin-top: .42em;
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: .015em;
  color: var(--ink-soft);
  text-wrap: balance;
}

.hero-lead {
  margin-top: 14px;
  max-width: 56ch;
  font-size: clamp(1.03rem, .45vw + .9rem, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- ações (preço + CTAs) ---------- */
.hero-actions {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 18px;
}
.hero-actions .btn { white-space: nowrap; }
.hero-actions__more { min-height: 66px; padding-inline: 1.7em; }

.hero-price {
  display: flex; flex-direction: column; align-items: flex-end;
  margin: 0 6px 0 0;
  text-align: right;
  font-family: var(--font-college);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}
.hero-price strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 2px;
}
.hero-chips { justify-content: center; margin-top: 18px; }
.hero-chips .chip { background: rgba(255, 253, 248, .92); }
.hero-chips .chip svg { color: var(--orange-deep); }

/* ---------- transição para o navy ---------- */
.hero-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--floor-h);
  z-index: 6;
  pointer-events: none;
  --tape-rot: -1.6deg;
}
.hero-floor__navy {
  position: absolute;
  left: -8%; right: -8%;
  top: 52%;
  height: 300%;
  background: var(--navy);
  border-top: 4px solid var(--ink);
  transform: rotate(var(--tape-rot));
  transform-origin: 50% 0;
}
.hero-tape {
  position: absolute;
  left: -8%; right: -8%;
  top: calc(52% - 22px);
  height: 44px;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--gold);
  border-block: 3px solid var(--ink);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .45);
  transform: rotate(var(--tape-rot));
  transform-origin: 50% 50%;
}
.hero-tape__track {
  display: flex; align-items: center; flex: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: .98rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: .12em;
  animation: hero-tape 80s linear infinite;
  will-change: transform;
}
.hero-tape__track span { padding-inline: .9em; }
.hero-tape__track i { font-style: normal; font-size: .8em; color: var(--ink); }
@keyframes hero-tape { to { transform: translate3d(-25%, 0, 0); } }
.hero.is-offscreen .hero-tape__track { animation-play-state: paused; }
html.reduce-motion .hero-tape__track,
html.static-mode .hero-tape__track { animation: none; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-figure__rise, .hero-tape__track, .hero-spot__pin::before { animation: none !important; }
  .hero-figure__tilt { transform: none !important; }
  .hero-figure { transition: none; }
}

/* =====================================================================
   DESKTOP (≥ 960px): fichas ao lado dos rostos (01 à esquerda, 03 à
   direita, 02 acima da cabeça), dica como etiqueta ao lado da capa e capa
   dimensionada pela altura da tela, para o botão + preço caberem na
   primeira dobra.
   ===================================================================== */
@media (min-width: 960px) {
  .hero {
    --head-h: 58px;
    /* largura: ≤ 840 · cabe na tela · deixa ~280px de cada lado para as fichas ·
       altura da foto = altura da tela − (cabeçalho + rótulo + púlpito/H1/subtítulo/botões) */
    --stage-w: min(840px,
                   calc(100vw - var(--hero-g) * 2),
                   calc((50vw - 280px) * 2.88),
                   max(520px, calc((100svh - 490px) * 1.7747)));
    padding-top: calc(var(--top-h) + 6px);
  }
  .hero-head { padding-bottom: 12px; }

  .hero-ficha { --cw: 268px; }
  .hero-ficha--1 {
    left: auto; bottom: auto;
    right: calc(100% - var(--f1x) + var(--ring) / 2 + 2.5%);
    top: var(--f1y);
    translate: 0 -50%;
    --fx-from: 14px; --fy-from: 0px;
  }
  .hero-ficha--3 {
    bottom: auto;
    left: calc(var(--f3x) + var(--ring) / 2 + 2.5%);
    top: var(--f3y);
    translate: 0 -50%;
    --fx-from: -14px; --fy-from: 0px;
  }
  /* Nº 02: acima da cabeça, encostando só no alto do cabelo (nunca no rosto) */
  .hero-ficha--2 { bottom: calc(100% - 10px); }
  .hero.has-spot .hero-eyebrow { opacity: 1; transform: none; }
  .hero.has-spot[data-active="2"] .hero-eyebrow { opacity: 0; transform: translateY(-6px); }

  /* dica: etiqueta ao lado da capa, na altura dos ombros do Nº 01 */
  .hero-hint {
    position: absolute;
    top: calc(var(--head-h) + var(--stage-w) / 1.7747 * .56);
    right: calc(50% + var(--stage-w) * .45);
    width: max-content;
    margin: 0;
    padding: 10px 12px 9px 12px;
    gap: 10px;
    text-align: left;
    font-size: .7rem;
    letter-spacing: .14em;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .hero-hint::after {               /* setinha apontando para a capa */
    content: "";
    position: absolute;
    right: -8px; top: 50%;
    width: 12px; height: 12px; margin-top: -6px;
    background: var(--white);
    border: 2px solid var(--ink);
    border-left: 0; border-bottom: 0;
    transform: rotate(45deg);
  }
  .hero-hint__icon { width: 24px; height: 24px; }
  .hero-hint__l2 { display: block; }

  .hero-title { margin-top: clamp(26px, 3.4vh, 40px); }
  /* uma linha só: o maior título da página */
  .hero-title__main { font-size: min(3.3rem, calc((100vw - var(--hero-g) * 2) / 23)); }
  .hero-title__sub { font-size: min(1.62rem, calc((100vw - var(--hero-g) * 2) / 50)); }
  .hero-lead { max-width: 64em; font-size: clamp(1rem, .25vw + .85rem, 1.1rem); margin-top: 12px; text-wrap: balance; }
  .hero-actions { margin-top: clamp(16px, 2.4vh, 24px); gap: 14px 16px; }
  .hero-actions .btn--xl { padding-inline: 1.5em; }
}
/* telas baixas (laptops 768–820 px): botões um pouco mais baixos */
@media (min-width: 960px) and (max-height: 820px) {
  .hero-actions .btn--xl { min-height: 58px; padding-block: .8em .78em; }
  .hero-actions__more { min-height: 58px; }
  .hero-title { margin-top: 24px; }
}

/* =====================================================================
   TABLET / CELULAR
   ===================================================================== */
@media (max-width: 899.98px) {
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: min(420px, 100%); }
  /* preço logo abaixo do botão principal, antes de "Ver como funciona" */
  .hero-actions__buy { order: 1; }
  .hero-price { order: 2; flex-direction: row; align-items: baseline; justify-content: center; gap: .55em; margin: 0; text-align: center; }
  .hero-price strong { font-size: 1.32rem; margin: 0; }
  .hero-actions__more { order: 3; }
}
@media (max-width: 640px) {
  .hero {
    --hero-g: 10px;
    --head-h: 78px;
    --floor-h: 92px;
    --stage-w: calc(100vw - 20px);
    --ring: 18%;
    padding-top: calc(var(--top-h) + 2px);
  }
  .hero-head { gap: 7px; padding-bottom: 8px; }
  .hero-ficha__num { width: 46px; font-size: 1.15rem; }
  .hero-ficha__body { padding: 9px 12px 10px; }
  .hero-ficha__title { font-size: 1rem; }
  .hero-spot__pin { width: 28px; height: 28px; font-size: .72rem; }
  .hero-plate {
    margin-top: -10px;
    padding: 8px 30px 7px;
    gap: .6em;
    font-size: clamp(.75rem, 3.4vw, .94rem);
    letter-spacing: .07em;
    line-height: 1.25;
    border-radius: 4px 4px 12px 12px;
    text-wrap: balance;
  }
  .hero-plate::before { left: 11px; }
  .hero-plate::after { right: 11px; }
  .hero-plate__star { display: none; }
  .hero-eyebrow { font-size: .72rem; padding: .42em .95em .38em; }
  .hero-title { padding-inline: 6px; margin-top: 14px; }
  .hero-title__main { font-size: clamp(1.6rem, 7.6vw, 2.3rem); }
  .hero-title__sub { font-size: clamp(.92rem, 4.1vw, 1.12rem); }
  .hero-lead { padding-inline: 8px; margin-top: 10px; font-size: 1rem; line-height: 1.45; }
  .hero-actions { width: 100%; max-width: 380px; gap: 10px; margin-top: 14px; padding-inline: 6px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn--xl { min-height: 58px; padding-block: .8em .78em; }
  .hero-actions__more { min-height: 52px; }
  .hero-chips { padding-inline: 6px; gap: 8px; margin-top: 16px; }
  .hero-chips .chip:nth-child(2) { order: 1; }   /* 2 chips na 1ª linha, 1 na 2ª */
  .hero-floor { --tape-rot: -2.4deg; }
  .hero-tape { height: 38px; top: calc(52% - 19px); }
  .hero-tape__track { font-size: .82rem; }
}
/* 900–1099px: preço + 2 botões numa linha só */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .hero-actions { gap: 12px 14px; }
  .hero-actions .btn--xl { font-size: 1.24rem; padding-inline: 1.3em; }
  .hero-actions__more { font-size: .98rem; padding-inline: 1.3em; }
  .hero-price strong { font-size: 1.5rem; }
}
/* celulares estreitos: 2 chips na 1ª linha, 1 na 2ª */
@media (max-width: 380px) {
  .hero-chips { gap: 7px; }
  .hero-chips .chip { font-size: .68rem; letter-spacing: .05em; padding-inline: .75em; }
}


/* ===== css/sections/02-pergunta.css ===== */
/* =====================================================================
   02 — PERGUNTA  (#pergunta)
   Papel creme claro (sem céu, sem cena ilustrada). O navy aparece só no
   "portão": um cartão de contraste com friso dourado que carrega a
   pergunta e, embaixo, duas folhas com o brasão que se abrem e revelam
   as respostas.
   Estado padrão = ESTÁTICO (sem JS / movimento reduzido / ?static=1):
   tudo visível, portão aberto, botões visíveis.
   O JS adiciona .is-live e escreve: --open (folhas) · --ans (respostas)
   --u (sublinhado) · por linha da pergunta: --o --y
   ===================================================================== */

.pergunta {
  --open: 1;
  --ans: 1;
  --u: 1;
  padding-block: clamp(56px, 7vw, 96px);
  background:
    radial-gradient(ellipse 62% 48% at 50% 46%, rgba(255, 253, 248, .95) 0%, rgba(255, 253, 248, 0) 72%),
    linear-gradient(180deg, #EEE3CC 0, rgba(238, 227, 204, 0) 140px),
    linear-gradient(0deg, #EEE3CC 0, rgba(238, 227, 204, 0) 140px),
    var(--paper);
}

/* ---------- palco ---------- */
.pergunta-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.2vw, 40px);
  padding-inline: var(--gutter);
}

/* ---------- "ANTES DE ENTRAR... UMA PERGUNTA." (sempre visível) ---------- */
.pergunta-copy { width: 100%; text-align: center; }
.pergunta-kicker {
  display: grid;
  justify-items: center;
  gap: .06em;
  font-family: var(--font-display);
  font-size: clamp(2rem, min(5.4vw, 7svh), 4.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--ink);
  text-wrap: balance;
}
.pergunta-kicker__b { color: var(--orange); }

/* ---------- o portão (cartão navy) ---------- */
.pergunta-gate {
  position: relative;
  width: 100%;
  max-width: 1000px;
  display: grid;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232, 181, 58, .16), rgba(232, 181, 58, 0) 70%),
    var(--navy);
  color: var(--paper);
  border: var(--line-thick) solid var(--ink);
  border-top: 5px solid var(--gold);
  border-radius: 10px 10px var(--radius) var(--radius);
  box-shadow: 0 8px 0 var(--ink), var(--shadow-soft);
}

.pergunta-q {
  display: grid;
  justify-items: center;
  gap: .3em;
  padding: clamp(26px, 3.6vw, 44px) clamp(18px, 4vw, 56px) clamp(22px, 3vw, 34px);
  text-align: center;
}
.pergunta-line {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 100%;
  min-width: 0;
}
.pergunta-line--3 { font-size: clamp(1.3rem, min(2.9vw, 4.4svh), 2.4rem); color: #E9E2D0; }
.pergunta-line--4 { font-size: clamp(1.85rem, min(4.6vw, 6.6svh), 3.9rem); color: var(--paper); }
.pergunta-hl { position: relative; display: inline-block; color: var(--orange); white-space: nowrap; }
.pergunta-underline {
  position: absolute;
  left: -2%;
  bottom: -.22em;
  width: 104%;
  height: .3em;
  overflow: visible;
  pointer-events: none;
}
.pergunta-underline path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--u));
  vector-effect: non-scaling-stroke;
}

/* vão do portão: luz quente + respostas; as folhas cobrem tudo até abrir */
.pergunta-doorway {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: clamp(150px, 21svh, 196px);
  margin: 0 clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px);
  padding: 26px clamp(14px, 3vw, 32px) 22px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 62% 95% at 50% 58%, #FFFDF8 0%, #FFF4D6 42%, #F4D78E 80%, #E8B53A 100%);
  border: 2px solid var(--gold);
}
.pergunta-answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  opacity: var(--ans);
  transform: translate3d(0, calc((1 - var(--ans)) * 14px), 0);
}
.pergunta-answer { white-space: nowrap; }
.pergunta-answers .btn--primary { min-height: 56px; }
.pergunta-answer--alt { min-height: 56px; }
.pergunta-price {
  font-size: .86rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: var(--ans);
}
.pergunta-price strong { color: var(--ink); font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* folhas do portão: navy com grade dourada em traço fino e moldura interna */
.pergunta-leaf {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: 50%;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(232, 181, 58, .2) 0 2px, transparent 2px 26px),
    #1C2B50;
  box-shadow: inset 0 0 0 8px #1C2B50, inset 0 0 0 10px rgba(232, 181, 58, .75);
  pointer-events: none;
}
.pergunta-leaf--l { left: 0; transform: translate3d(calc(var(--open) * -101%), 0, 0); border-right: 2px solid var(--gold); }
.pergunta-leaf--r { right: 0; transform: translate3d(calc(var(--open) * 101%), 0, 0); border-left: 2px solid var(--gold); }
.pergunta-leaf__name {
  padding: .5em .9em .45em;
  background: #1C2B50;
  font-family: var(--font-college);
  font-size: clamp(.66rem, .5vw + .5rem, .9rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.pergunta-leaf--l .pergunta-leaf__name { margin-right: clamp(34px, 5vw, 56px); }
.pergunta-leaf--r .pergunta-leaf__name { margin-left: clamp(34px, 5vw, 56px); }

/* brasão na emenda: some quando o portão abre */
.pergunta-seal {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  width: clamp(58px, 6vw, 76px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  box-shadow: 0 0 0 4px #1C2B50, 0 0 0 6px var(--gold);
  transform: translate(-50%, -50%) scale(calc(1 - var(--open) * .4)) rotate(calc(var(--open) * -40deg));
  opacity: calc(1 - var(--open) * 1.8);
  pointer-events: none;
}
.pergunta-seal svg { width: 46%; height: auto; fill: var(--navy); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.pergunta-seal svg path + path { fill: none; stroke: var(--gold-soft); stroke-width: 1.5; }

/* ---------- ao vivo: trilho alto + palco grudado ---------- */
.pergunta.is-live { padding-block: 0; }
.pergunta.is-live .pergunta-track { height: 175vh; }
.pergunta.is-live .pergunta-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  justify-content: center;
  padding-top: calc(var(--header-h) + 12px);
  padding-bottom: calc(var(--guidebar-h) + 16px);
}
.pergunta.is-live .pergunta-line {
  opacity: var(--o, 0);
  transform: translate3d(0, var(--y, 0px), 0);
  will-change: transform, opacity;
}
.pergunta.is-live:not(.is-open) .pergunta-answers { pointer-events: none; }
/* teclado: se o foco chegar nos botões antes da hora, o portão abre */
.pergunta.is-live:focus-within { --open: 1 !important; --ans: 1 !important; --u: 1 !important; }
.pergunta.is-live:focus-within .pergunta-line { opacity: 1 !important; transform: none !important; }

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .pergunta.is-live .pergunta-track { height: 160vh; }
  .pergunta-answers { flex-direction: column; width: 100%; }
  .pergunta-answers .btn { width: 100%; max-width: 330px; justify-content: center; padding-inline: .9em; }
  .pergunta-answers .btn--primary { font-size: .98rem; }
  .pergunta-answer--alt { font-size: .84rem; min-height: 50px; }
  .pergunta-doorway { padding-top: 22px; }
}
@media (max-width: 380px) {
  .pergunta-answer { white-space: normal; }
}


/* ===== css/sections/02b-na-pratica.css ===== */
/* =====================================================================
   NA PRÁTICA — antes × depois em vídeo (original × com IA)
   Faixa navy de contraste entre a pergunta (creme) e a turma (paper-2).
   ===================================================================== */
.pratica {
  --phone-w: clamp(220px, 21vw, 300px);
  padding-block: calc(var(--section-pad) * .8) calc(var(--section-pad) * .85);
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(232, 181, 58, .16) 0%, rgba(232, 181, 58, 0) 70%),
    linear-gradient(180deg, var(--navy) 0%, #0F1A33 100%);
  color: var(--paper);
  text-align: center;
}
.pratica-edge { z-index: 3; }
.pratica-edge--top { top: -1px; }
.pratica-edge--bottom { bottom: -1px; transform: scaleY(-1); }

/* holofote suave atrás dos celulares */
.pratica-glow {
  position: absolute; left: 50%; top: 46%;
  width: min(1100px, 120vw); aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 253, 248, .035) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%);
          mask-image: radial-gradient(circle, #000 0, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- cabeçalho ---------- */
.pratica-head { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; }
.pratica-eyebrow { background: var(--gold); border-color: var(--ink); }
.pratica-head .title-xl { color: var(--paper); max-width: 18ch; }
.pratica-lead { color: rgba(251, 245, 232, .82); margin-inline: auto; max-width: 60ch; }

/* ---------- palco ---------- */
.pratica-stage { position: relative; z-index: 1; margin-top: clamp(32px, 4vw, 48px); }

.pratica-tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 6px;
  background: rgba(255, 253, 248, .06);
  border: 1.5px solid rgba(255, 253, 248, .14);
  border-radius: var(--radius-pill);
}
.pratica-tab {
  display: inline-flex; align-items: baseline; gap: .55em;
  min-height: 44px;
  padding: .7em 1.2em .64em;
  border-radius: var(--radius-pill);
  font-family: var(--font-college);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(251, 245, 232, .78);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.pratica-tab__num { color: var(--gold); }
.pratica-tab:hover { color: var(--paper); background: rgba(255, 253, 248, .08); }
.pratica-tab[aria-selected="true"] {
  background: var(--paper); color: var(--ink);
  box-shadow: 3px 3px 0 var(--gold);
}
.pratica-tab[aria-selected="true"] .pratica-tab__num { color: var(--orange-deep); }
.pratica-tab:focus-visible { outline-color: var(--gold); }

.pratica-panel { margin-top: clamp(26px, 3vw, 38px); }
.pratica-panel[hidden] { display: none; }
.pratica-panel.is-active .pratica-pair { animation: pratica-in .55s var(--ease-out) both; }
@keyframes pratica-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.pratica-pair {
  display: grid;
  grid-template-columns: var(--phone-w) auto var(--phone-w);
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 34px);
}

/* ---------- celular ---------- */
.pratica-phone { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.pratica-phone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: clamp(22px, 2.6vw, 34px);
  overflow: hidden;
  background: #070C18;
  border: clamp(6px, .7vw, 9px) solid #070C18;
  box-shadow:
    0 0 0 2.5px rgba(255, 253, 248, .22),
    0 30px 60px -24px rgba(0, 0, 0, .7);
  transform: rotate(var(--phone-tilt, -2deg));
  transition: transform .5s var(--ease-out), box-shadow .3s linear;
}
.pratica-phone--ia .pratica-phone__screen {
  --phone-tilt: 2deg;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 7px rgba(232, 181, 58, .22),
    0 30px 60px -24px rgba(0, 0, 0, .7),
    0 0 70px -10px rgba(232, 181, 58, .45);
}
.pratica-pair:hover .pratica-phone__screen { transform: rotate(0deg); }
/* entalhe do celular */
.pratica-phone__screen::before {
  content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0;
  width: 30%; height: 14px; border-radius: 999px;
  background: #070C18; z-index: 2; pointer-events: none;
}
.pratica-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(clamp(22px, 2.6vw, 34px) - 8px);
  background: #0B1428;
}

/* botão de som (canto inferior do vídeo) */
.pratica-sound {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(7, 12, 24, .72);
  color: var(--paper);
  border: 1.5px solid rgba(255, 253, 248, .35);
  font-family: var(--font-college); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.pratica-sound::after { content: ""; position: absolute; inset: -6px; }  /* área de toque ≥ 44px */
.pratica-sound:hover { background: rgba(7, 12, 24, .9); border-color: var(--gold); }
.pratica-sound[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.pratica-sound__icon {
  width: 14px; height: 14px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pratica-sound[aria-pressed="true"] .pratica-sound__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* etiquetas */
.pratica-tag {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .55em 1.1em .5em;
  border-radius: var(--radius-pill);
  font-family: var(--font-college); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 253, 248, .1);
  color: var(--paper);
  border: 1.5px solid rgba(255, 253, 248, .3);
}
.pratica-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 253, 248, .6); }
.pratica-tag--ia {
  background: var(--gold); color: var(--ink); border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.pratica-tag--ia::before { background: var(--orange); }

/* ponte entre os dois celulares */
.pratica-bridge {
  position: relative;
  display: grid; place-items: center;
  width: clamp(54px, 6vw, 92px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px);
}
.pratica-bridge::after {
  content: ""; position: absolute; right: -2px; top: 50%;
  width: 10px; height: 10px;
  border-top: 2.5px solid var(--gold); border-right: 2.5px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.pratica-bridge__chip {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  box-shadow: 0 0 0 5px rgba(232, 181, 58, .2), 3px 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}

.pratica-caption {
  margin: clamp(22px, 2.6vw, 30px) auto 0;
  max-width: 56ch;
  color: rgba(251, 245, 232, .8);
  font-size: clamp(.98rem, .3vw + .9rem, 1.08rem);
}

/* ---------- controles ---------- */
.pratica-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 18px;
}
.pratica-play {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 253, 248, .3);
  color: var(--paper);
  font-family: var(--font-college); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.pratica-play:hover { border-color: var(--gold); background: rgba(255, 253, 248, .06); }
.pratica-play__icon {
  width: 12px; height: 12px; flex: none;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.pratica-play[aria-pressed="true"] .pratica-play__icon {
  background: currentColor;
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}
.pratica-progress {
  width: min(220px, 40vw); height: 4px; border-radius: 4px;
  background: rgba(255, 253, 248, .14); overflow: hidden;
}
.pratica-progress__bar {
  display: block; height: 100%; width: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: scaleX(var(--prog, 0));
}

/* ---------- rodapé ---------- */
.pratica-foot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; margin-top: clamp(36px, 4.5vw, 56px); }
.pratica-cta { --btn-shadow: 6px; box-shadow: var(--btn-shadow) var(--btn-shadow) 0 var(--gold); }
.pratica-cta:hover { box-shadow: calc(var(--btn-shadow) + 2px) calc(var(--btn-shadow) + 2px) 0 var(--gold); }
.pratica-cta:active { box-shadow: 0 0 0 var(--gold); }
.pratica-price { font-family: var(--font-college); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 245, 232, .8); }
.pratica-price strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--gold-soft); }
.pratica-note { max-width: 64ch; font-size: .82rem; color: rgba(251, 245, 232, .66); }
.pratica-note a { color: var(--gold-soft); text-underline-offset: 3px; }

/* ---------- celular (tela pequena) ---------- */
@media (max-width: 700px) {
  .pratica { --phone-w: calc((100vw - var(--gutter) * 2 - 14px) / 2); }
  .pratica-pair { grid-template-columns: var(--phone-w) var(--phone-w); gap: 14px; position: relative; }
  .pratica-bridge {
    position: absolute; left: 50%; top: 44%;
    width: auto; height: auto; background: none;
    translate: -50% -50%; z-index: 4;
  }
  .pratica-bridge::after { display: none; }
  .pratica-bridge__chip { width: 44px; height: 44px; font-size: .95rem; }
  .pratica-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; border-radius: 16px; scrollbar-width: none; max-width: 100%; }
  .pratica-tabs::-webkit-scrollbar { display: none; }
  .pratica-tab { flex: none; padding-inline: .95em; }
  .pratica-tabs { justify-content: center; width: 100%; }
  .pratica-tab__name { display: none; }
  .pratica-tag { font-size: .62rem; padding: .5em .8em .45em; letter-spacing: .1em; }
  .pratica-sound { right: 7px; bottom: 7px; min-height: 32px; padding: 0 9px 0 8px; }
  .pratica-sound__txt { display: none; }
  .pratica-phone__screen { --phone-tilt: 0deg; }
  .pratica-phone--ia .pratica-phone__screen { --phone-tilt: 0deg; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .pratica-panel.is-active .pratica-pair { animation: none; }
  .pratica-phone__screen { transform: none !important; }
}
.reduce-motion .pratica-panel.is-active .pratica-pair { animation: none; }


/* ===== css/sections/03-turma.css ===== */
/* =====================================================================
   03 — TURMA  (#turma)
   Fundo de estúdio fotográfico (sem céu) que se dissolve no papel --paper-2
   da seção seguinte. Carteirinhas interativas (retratos reais) que viram
   para mostrar a FICHA DO PERSONAGEM + vagas abertas.
   ≥ 960px: fileira centralizada (3 personagens + 1 vaga).
   600–959px: grade 2 × 2. < 600px: faixa com scroll-snap (começa no Nº 01,
   bordas esmaecidas para não "cortar" rostos nas laterais).
   Camadas por cartão: li[data-reveal] > .turma-lift (sobe no hover)
   > .turma-card (inclinação + perspectiva) > .turma-flip (giro 3D) > faces
   ===================================================================== */

.turma {
  --card-w: 232px;
  background-color: var(--paper-2);
  padding-bottom: calc(var(--section-pad) * .6);
}

/* estúdio: luz central atrás das carteirinhas; some no rodapé da seção */
.turma-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  --light-x: 50%;
  --light-y: 52%;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  pointer-events: none;
}

/* ---------- cabeçalho ---------- */
.turma-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(16px, 2vw, 22px);
}
.turma-title { max-width: 21ch; }
.turma-title .em { white-space: nowrap; }
.turma-lead { max-width: 54ch; color: var(--ink-soft); }

/* ---------- galeria ---------- */
.turma-gallery {
  position: relative;
  margin-top: clamp(36px, 4.5vw, 56px);
}
.turma-strip { outline: none; }
.turma-strip:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; border-radius: 12px; }

.turma-list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 26px);
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 26px var(--gutter) 48px;
}
.turma-item {
  flex: 0 1 var(--card-w);
  min-width: 0;
  display: flex;
}
.turma-item:nth-child(even) { margin-top: 26px; }
.turma-lift {
  flex: 1;
  display: flex;
  transition: transform .45s var(--ease-pop);
}
.turma-item:hover .turma-lift,
.turma-item:focus-within .turma-lift { transform: translateY(-10px); }

/* ---------- cartão que vira ---------- */
.turma-card {
  position: relative;
  flex: 1;
  display: flex;
  perspective: 1200px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .5s var(--ease-out);
}
.turma-card.is-flipped { transform: rotate(0deg); }
.turma-flip {
  position: relative;
  flex: 1;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .75s var(--ease-out);
}
.turma-card.is-flipped .turma-flip { transform: rotateY(180deg); }
.turma-face {
  grid-area: 1 / 1;
  min-width: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.turma-face--back { transform: rotateY(180deg); }

/* botão invisível sobre o cartão inteiro (clique, toque, Enter, Espaço) */
.turma-card__btn {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent;
}
.turma-card__btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: var(--radius); }

/* movimento reduzido / ?static=1: troca suave (fade) em vez do giro */
html.reduce-motion .turma .turma-flip,
html.reduce-motion .turma .turma-face--back { transform: none; }
html.reduce-motion .turma .turma-card.is-flipped { transform: rotate(var(--tilt, 0deg)); }
html.reduce-motion .turma .turma-face {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  transition: opacity .35s linear !important;
}
html.reduce-motion .turma .turma-face--back { opacity: 0; }
html.reduce-motion .turma .is-flipped .turma-face--back { opacity: 1; }
html.reduce-motion .turma .is-flipped .turma-face--front { opacity: 0; }

/* ---- frente: carteirinha ---- */
.turma-id,
.turma-vaga {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
}
.turma-id {
  padding: 22px 12px 12px;
  background: var(--white);
  border: var(--line-thick) solid var(--ink);
  box-shadow: var(--shadow-hard);
}
.turma-item:hover .turma-id,
.turma-item:hover .turma-back { box-shadow: 8px 10px 0 var(--ink); }
.turma-id__slot {
  position: absolute;
  top: 8px; left: 50%;
  width: 46px; height: 9px;
  margin-left: -23px;
  border-radius: 99px;
  background: var(--paper-3);
  border: 2px solid var(--ink);
}
.turma-id__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 0 9px;
  font-size: .62rem;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--ink);
}
.turma-id__crest { width: 16px; height: 18px; flex: none; fill: var(--gold); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.turma-id__crest path + path { fill: none; stroke: var(--ink); stroke-width: 1.4; }

.turma-id__photo {
  border-width: var(--line);
  border-radius: 12px;
  box-shadow: none;
  transform: none;
}
/* Nº 03: janela recortada da imagem de capa (rosto inteiro + gola). A imagem inteira da capa
   fica posicionada de modo que o centro do cabelo (x 1211 de 1670) caia no meio da janela e a
   linha y 530 (de 941) na base; o clip-path esconde o ombro/alça do personagem do meio. */
.turma-crop {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: var(--photo-bg, var(--mint));
}
.turma-crop img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 371.11%;
  max-width: none;
  height: auto;
  transform: translate(-72.51%, 43.68%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 73.65% 100%, 72.51% 62.7%, 71.62% 58.45%, 70.42% 54.2%, 69.22% 50.48%, 68.14% 48.03%, 67.13% 47.4%, 65.63% 46.01%, 64.13% 44.74%, 62.63% 43.78%, 61.14% 42.93%, 59.46% 42.08%, 58.14% 41.23%, 0% 41.23%);
}
.turma-id__photo .photo-card__tag {
  font-size: .64rem;
  padding: .7em .5em .64em;
  border-top-width: var(--line);
}

.turma-id__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 8px;
  padding: 10px 2px 8px;
}
.turma-id__label {
  grid-column: 1;
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--ink-mute);
}
.turma-id__course {
  grid-column: 1;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: clamp(.8rem, .3vw + .66rem, .9rem);
  line-height: 1.05;
  text-transform: uppercase;
}
/* selo "virar" — sinaliza que o cartão tem verso */
.turma-id__turn {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .6s var(--ease-pop);
}
.turma-id__turn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.turma-item:hover .turma-id__turn { transform: rotate(180deg); }
.turma-id__barcode {
  display: block;
  height: 20px;
  margin-top: auto;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 8px,
    var(--ink) 8px 9px, transparent 9px 12px, var(--ink) 12px 13px, transparent 13px 15px);
  opacity: .82;
}

/* ---- verso: ficha do personagem ---- */
.turma-back {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(rgba(20, 33, 61, .07) 1.1px, transparent 1.5px) 0 0 / 16px 16px,
    var(--white);
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}
.turma-back__head {
  padding: 12px 10px 10px;
  background: var(--navy);
  color: var(--gold-soft);
  border-bottom: 3px solid var(--gold);
  font-size: .7rem;
  letter-spacing: .16em;
  text-align: center;
  white-space: nowrap;
}
.turma-back__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3em;
  padding: 8px 10px 7px;
  background: var(--card-c, var(--butter));
  border-bottom: var(--line) solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
}
.turma-back__num .college { font-size: .42em; letter-spacing: .12em; }
.turma-back__focus {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 10px 10px 2px;
  padding: 10px 10px 11px;
  text-align: center;
  background: var(--gold-soft);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
}
.turma-back__focus-tag { font-size: .56rem; letter-spacing: .16em; color: var(--ink-soft); }
.turma-back__focus-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.05;
  text-transform: uppercase;
}
.turma-back__focus-sub { font-size: .6rem; letter-spacing: .1em; color: var(--ink); }
.turma-back__focus-text {
  margin-top: 4px;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--ink-soft);
  text-wrap: balance;
}
.turma-back__list {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  gap: 0;
  padding: 4px 12px 8px;
}
.turma-back__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  border-bottom: 1.5px dashed rgba(20, 33, 61, .22);
}
.turma-back__list li:last-child { border-bottom: 0; }
.turma-back__list b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .78rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.turma-back__list small {
  display: block;
  margin-top: 1px;
  font-size: .74rem;
  line-height: 1.25;
  color: var(--ink-soft);
}
.turma-back__check {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--gold);
  border: 2px solid var(--ink);
}
.turma-back__check svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.turma-back__foot {
  margin-top: auto;
  padding: 10px 10px 12px;
  border-top: var(--line) solid var(--ink);
  background: var(--paper);
  font-size: .58rem;
  letter-spacing: .12em;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- vaga aberta ---- */
.turma-vaga {
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 14px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background:
    radial-gradient(rgba(20, 33, 61, .1) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    rgba(255, 253, 248, .72);
  border: var(--line-thick) dashed var(--ink-soft);
  transition: border-color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.turma-vaga .turma-id__slot { border-style: dashed; background: var(--paper); }
.turma-vaga__top { font-size: .76rem; letter-spacing: .16em; }
.turma-vaga__plus {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--white);
  border: var(--line-thick) dashed var(--orange);
  color: var(--orange);
  transition: transform .5s var(--ease-pop), background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.turma-vaga__plus svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.turma-vaga__who { font-family: var(--font-display); font-size: 1rem; line-height: 1.1; text-transform: uppercase; }
.turma-vaga__go {
  margin-top: 6px;
  padding: .45em .95em .4em;
  font-family: var(--font-display);
  font-size: .78rem;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--orange-deep);
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  background: var(--white);
}
.turma-vaga:hover,
.turma-vaga:focus-visible { border-color: var(--orange); }
.turma-vaga:hover .turma-vaga__plus,
.turma-vaga:focus-visible .turma-vaga__plus { transform: rotate(90deg) scale(1.08); background: var(--orange); color: var(--white); border-style: solid; border-color: var(--ink); }

/* dica de interação */
.turma-nav { display: none; }
.turma-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.turma-hint svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.turma-hint__touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .turma-hint__fine { display: none; }
  .turma-hint__touch { display: inline; }
}

/* CTA */
.turma-cta {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: clamp(30px, 4vw, 44px);
  text-align: center;
}
.turma-cta .btn { max-width: 100%; }
.turma-price { font-size: .92rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.turma-price strong { color: var(--ink); font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* ---------- 960–1099px: fileira mais estreita ---------- */
@media (max-width: 1099px) {
  .turma { --card-w: 220px; }
  .turma-list { gap: 16px; }
}

/* ---------- 600–959px: grade 2 × 2 (cartões inteiros, nada cortado) ---------- */
@media (max-width: 959px) and (min-width: 600px) {
  .turma { --card-w: 250px; }
  .turma-list {
    display: grid;
    grid-template-columns: repeat(2, var(--card-w));
    justify-content: center;
    gap: 34px 30px;
    padding-bottom: 36px;
  }
  .turma-item:nth-child(even) { margin-top: 0; }
  .turma-item { display: flex; }
}

/* ---------- < 600px: faixa deslizante ---------- */
@media (max-width: 599px) {
  .turma { --card-w: clamp(220px, 66vw, 260px); }
  .turma-strip {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* as pontas esmaecem: os vizinhos aparecem como "mais cartões", sem rosto cortado em destaque */
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  }
  .turma-strip::-webkit-scrollbar { display: none; }
  .turma-list {
    justify-content: flex-start;
    width: max-content;
    max-width: none;
    gap: 18px;
    /* o 1º e o último cartão podem parar no centro da tela */
    padding: 30px calc(50vw - var(--card-w) / 2) 36px;
  }
  .turma-item {
    flex: 0 0 var(--card-w);
    scroll-snap-align: center;
  }
  .turma-item:nth-child(even) { margin-top: 0; }
  .turma-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: -4px;
    padding-inline: var(--gutter);
  }
  .turma-nav__btn {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--white);
    border: var(--line) solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    color: var(--ink);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
  }
  .turma-nav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .turma-nav__btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
  .turma-nav__btn[disabled] { opacity: .35; cursor: default; }
  .turma-nav__hint { font-size: .68rem; letter-spacing: .12em; color: var(--ink-soft); min-width: 0; text-align: center; }
  .turma-hint { margin-top: 16px; }
}
@media (max-width: 420px) {
  .turma-hint { font-size: .64rem; letter-spacing: .1em; align-items: flex-start; }
  .turma-hint span { max-width: 30ch; }
}


/* ===== css/sections/04-como-funciona.css ===== */
/* =====================================================================
   04 — COMO FUNCIONA  (#como-funciona)
   Papel creme (--paper-2) pontilhado, sem céu. Fluxo de 6 etapas ligadas
   por setas tracejadas; frase de impacto numa faixa navy.
   ≥ 1180px: trilho horizontal · abaixo: lista vertical com setas ↓
   Estado padrão = tudo aceso. Com JS e movimento, .is-live apaga as
   etapas e o scroll (--p de data-progress="view") acende uma a uma.
   ===================================================================== */

.comofunc {
  padding-top: calc(var(--section-pad) * .62);
}
/* emenda suave com a turma (o pontilhado surge aos poucos) + luz atrás do título */
.comofunc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--paper-2) 0, rgba(245, 235, 212, 0) 160px),
    radial-gradient(ellipse 56% 34% at 50% 16%, rgba(255, 251, 240, .8), rgba(255, 251, 240, 0) 70%);
  pointer-events: none;
}

/* ---------- cabeçalho ---------- */
.comofunc-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 1.8vw, 20px);
}
.comofunc-title { max-width: 22ch; }
.comofunc-title .em { white-space: nowrap; }
.comofunc-sub {
  display: block;
  margin-top: .42em;
  font-size: .56em;
  letter-spacing: .02em;
  color: var(--ink);
}
.comofunc-lead { max-width: 52ch; color: var(--ink-soft); }
.comofunc-sub__mark {
  background: linear-gradient(transparent 55%, var(--gold-soft) 55%, var(--gold-soft) 92%, transparent 92%);
  padding-inline: .12em;
}

/* ---------- fluxo ---------- */
.comofunc-flow { margin-top: clamp(44px, 5.5vw, 72px); }
.comofunc-steps {
  --gap: 38px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: stretch;
}
.comofunc-step {
  position: relative;
  min-width: 0;
  display: flex;
}
.comofunc-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px 14px 20px;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  transition:
    opacity .6s var(--ease-out),
    transform .6s var(--ease-pop),
    box-shadow .3s var(--ease-out);
}
.comofunc-step:nth-child(odd) .comofunc-card { transform: rotate(-1.2deg); }
.comofunc-step:nth-child(even) .comofunc-card { transform: rotate(1.2deg); }
.comofunc-step--voce .comofunc-card {
  background: var(--paper);
  border-style: dashed;
}

.comofunc-num {
  position: absolute;
  top: -17px; left: 50%;
  margin-left: -19px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--font-display);
  font-size: .86rem;
  line-height: 1;
  color: var(--ink);
  transition: transform .5s var(--ease-pop), background .3s linear;
}

.comofunc-media {
  display: grid;
  place-items: center;
  height: 104px;
  width: 100%;
}
.comofunc-icon {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--step-c, var(--butter));
  border: 2px solid var(--ink);
  color: var(--ink);
  transition: background-color .3s linear, transform .5s var(--ease-pop);
}
.comofunc-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.comofunc-step--voce .comofunc-icon { background: var(--white); border-style: dashed; }

.comofunc-portrait {
  display: block;
  width: 96px; height: 92px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mint);
  border: var(--line) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
/* retrato inteiro, apoiado na base (sem cortar o rosto) */
.comofunc-portrait { position: relative; }
/* recorte da capa: centro do cabelo do Nº 03 (x 1211/1670) no meio, linha y 530/941 na base;
   o clip-path esconde o ombro do personagem do meio */
.comofunc-portrait img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 334%;
  max-width: none;
  height: auto;
  transform: translate(-72.51%, 43.68%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 73.65% 100%, 72.51% 62.7%, 71.62% 58.45%, 70.42% 54.2%, 69.22% 50.48%, 68.14% 48.03%, 67.13% 47.4%, 65.63% 46.01%, 64.13% 44.74%, 62.63% 43.78%, 61.14% 42.93%, 59.46% 42.08%, 58.14% 41.23%, 0% 41.23%);
}

/* celular em traço (CSS) */
.comofunc-phone {
  position: relative;
  display: block;
  width: 60px; height: 104px;
  padding: 6px 5px 9px;
  border-radius: 14px;
  background: var(--ink);
  box-shadow: 3px 3px 0 rgba(20, 33, 61, .3);
  transform: rotate(-5deg);
}
.comofunc-phone__screen {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
  background: var(--peach);
}
.comofunc-phone__screen img { position: absolute; left: 0; right: 0; top: 18%; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.comofunc-phone__bar {
  position: absolute; left: 6px; right: 14px; bottom: 6px;
  height: 4px; border-radius: 4px;
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 -7px 0 -0.5px rgba(255, 253, 248, .6);
}
.comofunc-phone__rail {
  position: absolute;
  right: -20px; top: 22px;
  display: grid; gap: 4px;
}
.comofunc-phone__rail svg {
  width: 26px; height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink);
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
}
.comofunc-phone__rail .is-heart { fill: var(--orange); stroke: var(--ink); }

.comofunc-name {
  font-family: var(--font-display);
  font-size: clamp(.92rem, .35vw + .78rem, 1.08rem);
  line-height: 1.08;
  letter-spacing: .01em;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.comofunc-text {
  font-size: .94rem;
  line-height: 1.32;
  color: var(--ink-soft);
}

/* setas tracejadas entre as etapas */
.comofunc-link {
  position: absolute;
  z-index: 1;
  top: 76px;
  left: calc(100% + 2px);
  width: calc(var(--gap) - 4px);
  height: 16px;
  color: var(--ink-mute);
  transition: color .4s linear;
}
.comofunc-link svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.comofunc-link__line { stroke-dasharray: 4 5; }

/* ---------- aceso / apagado (só com .is-live) ---------- */
.comofunc-step.is-lit .comofunc-link,
.comofunc:not(.is-live) .comofunc-link { color: var(--orange); }
.comofunc.is-live .comofunc-step:not(.is-lit) .comofunc-card {
  opacity: .35;
  transform: translateY(16px) scale(.96);
  box-shadow: 0 0 0 var(--ink);
}
.comofunc.is-live .comofunc-step:not(.is-lit) .comofunc-num { transform: scale(.6); }
.comofunc-step.is-lit .comofunc-card:hover,
.comofunc:not(.is-live) .comofunc-card:hover { box-shadow: 8px 8px 0 var(--ink); }
.comofunc-card:hover .comofunc-icon { transform: scale(1.08) rotate(-6deg); }
.comofunc-card:hover .comofunc-num { transform: rotate(-12deg) scale(1.1); }
.comofunc-card { text-transform: none; }
.comofunc-text { text-wrap: balance; }

/* ---------- frase de impacto ---------- */
.comofunc-impact {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.5vw, 40px);
  margin-top: clamp(64px, 8vw, 104px);
}
/* faixa navy institucional com friso dourado */
.comofunc-quote {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(34px, 4.6vw, 56px) clamp(22px, 5vw, 64px) clamp(26px, 3.4vw, 40px);
  text-align: center;
  color: var(--paper);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(232, 181, 58, .16), rgba(232, 181, 58, 0) 70%),
    var(--navy);
  border: var(--line-thick) solid var(--ink);
  border-top: 5px solid var(--gold);
  border-radius: 10px 10px var(--radius) var(--radius);
  box-shadow: 0 8px 0 var(--ink), var(--shadow-soft);
}
.comofunc-quote__mark { width: 40px; height: 30px; fill: var(--gold); }
.comofunc-quote__text { color: var(--paper); text-wrap: balance; }
.comofunc-quote__text .em--gold { color: var(--gold); }
@media (min-width: 768px) { .comofunc-quote__text .em { white-space: nowrap; } }
.comofunc-quote__sign { font-size: .72rem; letter-spacing: .2em; color: var(--gold-soft); }
.comofunc-quote__sign span { color: var(--gold); }
.comofunc-cta .btn { max-width: 100%; }
.comofunc-cta {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.comofunc-price { font-size: .92rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.comofunc-price strong { color: var(--ink); font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* ---------- tablet (768–1179px): 2 fileiras de 3 ---------- */
@media (min-width: 768px) and (max-width: 1179px) {
  .comofunc-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 54px;
    max-width: 920px;
    margin-inline: auto;
  }
  .comofunc-step:nth-child(3) .comofunc-link { display: none; }
  .comofunc-text { max-width: 22ch; }
}

/* ---------- vertical (< 768px) ---------- */
@media (max-width: 767px) {
  .comofunc-steps {
    --gap: 50px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--gap);
    max-width: 600px;
    margin-inline: auto;
  }
  .comofunc-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
    padding: 16px 20px 16px 16px;
  }
  .comofunc-num { top: 50%; left: -16px; margin: -17px 0 0; width: 34px; height: 34px; font-size: .78rem; }
  .comofunc-media { grid-row: 1 / span 2; height: 96px; }
  .comofunc-name { align-self: end; margin-top: 0; font-size: 1.12rem; overflow-wrap: normal; }
  .comofunc-text { align-self: start; font-size: 1rem; }
  .comofunc-step:nth-child(odd) .comofunc-card { transform: rotate(-.8deg); }
  .comofunc-step:nth-child(even) .comofunc-card { transform: rotate(.8deg); }
  .comofunc-link {
    top: calc(100% + 4px);
    left: 64px;
    width: 16px;
    height: calc(var(--gap) - 8px);
  }
  .comofunc-link svg { transform: rotate(90deg); transform-origin: 50% 50%; max-width: none; width: calc(var(--gap) - 8px); height: 16px; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 calc((var(--gap) - 8px) / -2); }
  .comofunc-icon { width: 68px; height: 68px; }
  .comofunc-icon svg { width: 34px; height: 34px; }
  .comofunc-portrait { width: 84px; height: 80px; }
  .comofunc-phone { width: 52px; height: 90px; }
  .comofunc-phone__rail { right: -16px; top: 16px; }
  .comofunc-phone__rail svg { width: 23px; height: 23px; padding: 3px; }
}
@media (max-width: 420px) {
  .comofunc-card { grid-template-columns: 78px minmax(0, 1fr); column-gap: 14px; padding: 14px 14px 14px 18px; }
  .comofunc-media { height: 88px; }
  .comofunc-icon { width: 60px; height: 60px; }
  .comofunc-icon svg { width: 30px; height: 30px; }
  .comofunc-portrait { width: 74px; height: 70px; }
  .comofunc-phone { width: 48px; height: 84px; }
  .comofunc-link { left: 56px; }
  .comofunc-name { font-size: 1.04rem; }
  .comofunc-text { font-size: .95rem; }
  .comofunc-cta .btn--xl { padding-inline: 1.3em; font-size: 1.08rem; }
}

/* trilho horizontal: as etapas acendem juntas, em cascata */
@media (min-width: 768px) {
  .comofunc.is-live .comofunc-card { transition-delay: calc(var(--i, 0) * 120ms), calc(var(--i, 0) * 120ms), 0s; }
  .comofunc.is-live .comofunc-link { transition-delay: calc(var(--i, 0) * 120ms + 100ms); }
}


/* ===== css/sections/04b-oportunidade.css ===== */
/* =====================================================================
   OPORTUNIDADE — "um mundo de oportunidades" (lá fora → Brasil → você)
   Entre "como funciona" (paper-2) e a grade (papel).
   ===================================================================== */
.oportunidade { text-align: center; background: var(--paper-2); }
.oportunidade-bg { position: absolute; inset: 0; z-index: -1; opacity: .9; }

.oportunidade-head { display: grid; justify-items: center; gap: 18px; }
.oportunidade-head .title-xl { max-width: 20ch; }
.oportunidade-lead { margin-inline: auto; color: var(--ink-soft); }

/* caminho em 3 etapas */
.oportunidade-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 1080px;
}
.oportunidade-path::before {          /* linha pontilhada ligando as etapas */
  content: ""; position: absolute; left: 16%; right: 16%; top: 44px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--gold-deep) 0 10px, transparent 10px 18px);
  z-index: 0;
}
.oportunidade-step {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: start; gap: 8px;
  padding: 0 clamp(16px, 2vw, 26px) clamp(24px, 2.6vw, 30px);
  margin-top: 0;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  min-width: 0;
}
.oportunidade-step__badge {
  display: grid; place-items: center;
  width: 88px; height: 88px; margin-top: 0; margin-bottom: 6px;
  translate: 0 -0px;
  border-radius: 50%;
  border: var(--line-thick) solid var(--ink);
  box-shadow: 0 0 0 6px var(--white), 3px 4px 0 6px var(--ink);
  position: relative; top: -2px;
  transform: translateY(-50%);
  margin-bottom: -30px;
}
.oportunidade-step__badge svg { width: 42px; height: 42px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.oportunidade-step--you .oportunidade-step__badge { background: var(--orange); }
.oportunidade-step--you .oportunidade-step__badge svg { stroke: var(--white); }
.oportunidade-step--you .oportunidade-star { fill: var(--gold); stroke: var(--gold); }
.oportunidade-step--you { background: var(--butter); }
.oportunidade-step__kicker { font-size: .74rem; letter-spacing: .16em; color: var(--orange-deep); }
.oportunidade-step__title { color: var(--ink); }
.oportunidade-step__text { color: var(--ink-soft); font-size: .98rem; max-width: 30ch; }

.oportunidade-path { padding-top: 44px; }

/* formas de monetizar */
.oportunidade-ways { margin-top: clamp(34px, 4vw, 48px); display: grid; justify-items: center; gap: 14px; }
.oportunidade-ways__title { font-size: .8rem; letter-spacing: .16em; color: var(--ink-soft); }
.oportunidade-chips { justify-content: center; }

.oportunidade-foot { margin-top: clamp(34px, 4vw, 48px); display: grid; justify-items: center; gap: 12px; }
.oportunidade-price { font-family: var(--font-college); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.oportunidade-price strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--ink); }
.oportunidade-note { max-width: 62ch; font-size: .8rem; color: var(--ink-mute); }

@media (max-width: 820px) {
  .oportunidade-path { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 56px; }
  .oportunidade-path::before { left: 50%; right: auto; top: 44px; bottom: 40px; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--gold-deep) 0 10px, transparent 10px 18px); translate: -50% 0; }
  .oportunidade-chips .chip { white-space: normal; }
}


/* ===== css/sections/05-grade.css ===== */
/* =====================================================================
   05 · GRADE CURRICULAR + SISTEMA DE NÍVEIS
   Parte 1: histórico escolar numa folha de caderno sobre a mesa creme.
   Parte 2 (#niveis): faixa marinho com medalhas douradas + barra de XP.
   ===================================================================== */

.grade {
  --grade-ink: #2C7347;              /* tinta de carimbo (verde "aprovado") */
  --grade-gm: 96px;                  /* margem vermelha da folha */
  padding-bottom: 0;
  padding-top: calc(var(--section-pad) + 24px);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(20, 33, 61, .08) 1.2px, transparent 1.6px);
  background-size: 24px 24px;
}
.grade-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* costura com #como-funciona (papel 2 pontilhado) */
.grade-edge-top { top: 0; }

.grade svg:not(.grade-clip):not(.grade-sheet__crest) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
   PARTE 1 — FOLHA
   --------------------------------------------------------------------- */
.grade-sheet-wrap {
  position: relative;
  max-width: 1060px;
  margin-inline: auto;
}
.grade-sheet-under {
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  border: var(--line) solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard);
  transform: translate(10px, 10px) rotate(1.4deg);
}
.grade-sheet {
  position: relative;
  padding: 44px clamp(24px, 4vw, 52px) 40px calc(var(--grade-gm) + clamp(18px, 2.4vw, 32px));
  background-color: var(--white);
  background-image:
    linear-gradient(90deg, transparent calc(var(--grade-gm) - 3px), var(--margin-red) calc(var(--grade-gm) - 3px), var(--margin-red) calc(var(--grade-gm) - 1px), transparent calc(var(--grade-gm) - 1px), transparent calc(var(--grade-gm) + 1px), var(--margin-red) calc(var(--grade-gm) + 1px), var(--margin-red) calc(var(--grade-gm) + 2px), transparent calc(var(--grade-gm) + 2px)),
    repeating-linear-gradient(180deg, transparent 0 35px, var(--line-blue) 35px 36px);
  background-position: 0 0, 0 18px;
  border: var(--line) solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard-lg);
}

/* furos do fichário */
.grade-holes {
  position: absolute;
  left: calc(var(--grade-gm) / 2 - 12px);
  top: 64px; bottom: 64px;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.grade-holes i {
  display: block;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(20, 33, 61, .28);
  box-shadow: inset 2px 3px 0 rgba(20, 33, 61, .16);
}

/* carteirinha sobre a mesa (só telas largas) — vira ao passar o mouse */
.grade-idcard {
  position: absolute;
  z-index: 2;
  left: -150px; top: 330px;
  width: 184px;
  perspective: 900px;
  transform: rotate(-7deg);
  transition: transform .5s var(--ease-out);
}
.grade-idcard:hover { transform: rotate(-3deg) translateY(-6px); }
.grade-idcard__inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease-out);
}
.grade-idcard:hover .grade-idcard__inner { transform: rotateY(180deg); }
.grade-idcard__face {
  grid-area: 1 / 1;
  padding: 12px 12px 14px;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.grade-idcard__face--back { transform: rotateY(180deg); background: var(--paper); }
.grade-idcard__band {
  display: flex; align-items: center; gap: 6px;
  margin: -12px -12px 10px;
  padding: 7px 10px;
  background: var(--navy);
  color: var(--gold);
  border-radius: 11px 11px 0 0;
  font-size: .62rem;
  letter-spacing: .14em;
}
.grade-idcard__band svg { width: 16px; height: 18px; flex: none; }
.grade-idcard .photo-card { --photo-ratio: 1 / 1; --photo-bg: var(--mustard); border-width: 2.5px; box-shadow: 3px 3px 0 var(--ink); border-radius: 10px; }
.grade-idcard__name { margin-top: 10px; font-family: var(--font-display); font-size: .95rem; line-height: 1.1; text-transform: uppercase; }
.grade-idcard__role { margin-top: 3px; font-size: .62rem; letter-spacing: .14em; color: var(--ink-soft); }
.grade-idcard__fields { display: grid; gap: 9px; margin: 4px 0 0; }
.grade-idcard__fields div { padding-bottom: 6px; border-bottom: 1.5px dotted rgba(20, 33, 61, .35); }
.grade-idcard__fields dt { font-size: .56rem; letter-spacing: .14em; color: var(--ink-soft); }
.grade-idcard__fields dd { margin: 2px 0 0; font-size: .82rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.grade-idcard__ok { color: var(--grade-ink); }
@media (max-width: 1399px) { .grade-idcard { display: none; } }

/* clipe + bilhete */
.grade-note {
  position: absolute;
  top: -26px; right: clamp(24px, 5vw, 64px);
  width: 168px;
  z-index: 3;
  transform: rotate(4deg);
}
.grade-note__text {
  padding: 34px 16px 18px;
  min-height: 112px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 4px 4px 14px 4px;
  box-shadow: 4px 5px 0 rgba(20, 33, 61, .85);
  font-size: .8rem;
  letter-spacing: .12em;
  line-height: 1.5;
  color: var(--ink);
}
.grade-note__text span { color: var(--orange-deep); }
.grade-clip {
  position: absolute;
  top: -22px; right: 22px;
  width: 26px; height: auto;
  transform: rotate(6deg);
  filter: drop-shadow(1px 2px 0 rgba(20, 33, 61, .25));
  z-index: 1;
}

/* cabeçalho do histórico */
.grade-sheet__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding-right: 190px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 3px double var(--ink);
}
.grade-sheet__org { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grade-sheet__crest { flex: none; width: 42px; height: 48px; }
.grade-sheet__org p { font-size: .92rem; line-height: 1.2; letter-spacing: .1em; }
.grade-sheet__org p > span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.grade-sheet__student {
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  padding: .3em .8em;
  border: 1.5px dashed rgba(20, 33, 61, .35);
  border-radius: 6px;
}
.grade-sheet__student span { color: var(--orange-deep); }

.grade-intro { max-width: 720px; margin-bottom: 30px; }
.grade-intro .eyebrow { margin-bottom: 18px; }
.grade-title { max-width: 12ch; }
.grade-lead { margin-top: 16px; color: var(--ink-soft); max-width: 54ch; }

/* cabeçalho das colunas do histórico: deixa claro que os status são um exemplo */
.grade-legend {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0 4px 10px 0;
  font-size: .68rem;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.grade-legend span:last-child { text-align: right; }
@media (max-width: 900px) { .grade-legend { padding-bottom: 12px; } }
@media (max-width: 600px) { .grade-legend { font-size: .58rem; letter-spacing: .1em; padding-bottom: 8px; } }

/* ---------- disciplinas ---------- */
.grade-list { counter-reset: none; }
.grade-row {
  position: relative;
  display: grid;
  grid-template-columns: 76px 54px minmax(0, 1fr) 210px;
  align-items: center;
  gap: 18px;
  padding: 18px 14px 18px 0;
  border-top: 2px solid rgba(20, 33, 61, .14);
  transition: background-color var(--dur-fast) linear;
}
.grade-row:last-child { border-bottom: 2px solid rgba(20, 33, 61, .14); }
.grade-row::before { /* marca-texto ao passar o mouse */
  content: "";
  position: absolute;
  left: -14px; right: -10px; top: 8px; bottom: 8px;
  background: var(--gold-soft);
  border-radius: 8px;
  opacity: 0;
  transform: scaleX(.96);
  transition: opacity var(--dur-fast) linear, transform var(--dur) var(--ease-out);
  z-index: -1;
}
.grade-list { position: relative; z-index: 0; isolation: isolate; }
.grade-row--open:hover::before { opacity: .45; transform: none; }

.grade-row__num {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.grade-row__num span {
  font-family: var(--font-college);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.grade-row__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--chip, var(--butter));
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
}
.grade-row__icon svg { width: 26px; height: 26px; }
.grade-row__text { min-width: 0; }
.grade-row__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, .4vw + .88rem, 1.18rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}
.grade-row__desc {
  margin-top: 4px;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.grade-row__status {
  position: relative;
  display: flex; justify-content: flex-end;
  min-width: 0;
}

/* carimbo DESBLOQUEADA */
.grade-stamp {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em .85em .5em;
  font-family: var(--font-college);
  font-size: .86rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--grade-ink);
  background: rgba(44, 115, 71, .06);
  border: 3px solid currentColor;
  border-radius: 7px;
  outline: 1.5px solid currentColor;
  outline-offset: 3px;
  transform: rotate(var(--stamp-tilt, -6deg));
  opacity: .92;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 180px 90px;
          mask-size: 180px 90px;
  white-space: nowrap;
}
.grade-stamp svg { width: 17px; height: 17px; stroke-width: 3.2; }

/* animação: o carimbo "bate" na folha (só quando o JS arma) */
.grade--armed .grade-row--open .grade-stamp { opacity: 0; transform: rotate(var(--stamp-tilt, -6deg)) scale(1.9); }
.grade--armed .grade-row--open.is-stamped .grade-stamp { animation: grade-thunk .46s var(--ease-out) forwards; }
@keyframes grade-thunk {
  0%   { opacity: 0; transform: rotate(var(--stamp-tilt, -6deg)) scale(1.9); }
  55%  { opacity: 1; transform: rotate(var(--stamp-tilt, -6deg)) scale(.9); }
  78%  { opacity: .95; transform: rotate(var(--stamp-tilt, -6deg)) scale(1.04); }
  100% { opacity: .92; transform: rotate(var(--stamp-tilt, -6deg)) scale(1); }
}
.grade--armed .grade-row--open.is-stamped .grade-row__icon { animation: grade-nudge .5s var(--ease-pop) .12s; }
@keyframes grade-nudge {
  0%, 100% { transform: none; }
  40% { transform: translateY(2px) scale(.96); }
}

/* disciplinas bloqueadas */
.grade-row--locked .grade-row__icon { opacity: .55; box-shadow: 3px 3px 0 rgba(20, 33, 61, .45); border-color: rgba(20, 33, 61, .6); }
.grade-row--locked .grade-row__num { color: var(--ink-mute); }
.grade-row--locked .grade-row__name { color: var(--ink-soft); }
.grade-row--locked .grade-row__desc { color: var(--ink-mute); }

.grade-lock {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  padding: .5em 1em .45em;
  font-family: var(--font-college);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-mute);
  background: rgba(255, 253, 248, .85);
  border: 2px dashed rgba(20, 33, 61, .38);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.grade-lock svg { width: 16px; height: 16px; stroke-width: 2.4; }
.grade-lock:hover, .grade-lock:focus-visible, .grade-lock.is-tip {
  color: var(--ink);
  border-color: var(--ink);
  border-style: solid;
}
.grade-lock:hover svg, .grade-lock.is-tip svg { animation: grade-jiggle .45s var(--ease-in-out); }
@keyframes grade-jiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-12deg); }
  65% { transform: rotate(9deg); }
}
.grade-tip {
  position: absolute;
  right: 0; bottom: calc(100% + 10px);
  z-index: 6;
  padding: .7em .95em .62em;
  font-family: var(--font-college);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--paper);
  background: var(--navy);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--orange);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  pointer-events: none;
}
.grade-tip::after {
  content: "";
  position: absolute;
  right: 28px; top: 100%;
  border: 7px solid transparent;
  border-top-color: var(--navy);
}
.grade-lock:hover + .grade-tip,
.grade-lock:focus-visible + .grade-tip,
.grade-lock.is-tip + .grade-tip {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}

/* rodapé da folha */
.grade-sheet__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 3px double var(--ink);
}
.grade-sheet__foot-text { min-width: 0; font-size: 1.05rem; max-width: 46ch; }
.grade-sheet__foot-text strong { font-weight: 800; }
.grade-sheet__foot-text > span { display: block; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   PARTE 2 — SISTEMA DE NÍVEIS
   --------------------------------------------------------------------- */
.grade-niveis {
  --medal: 116px;
  position: relative;
  margin-top: var(--section-pad);
  padding: calc(var(--section-pad) * .78) 0 calc(var(--section-pad) * .9);
  color: var(--paper);
  background-color: var(--navy);
  background-image:
    radial-gradient(60% 70% at 50% 46%, rgba(232, 181, 58, .16), rgba(232, 181, 58, 0) 70%),
    radial-gradient(rgba(251, 245, 232, .07) 1.2px, transparent 1.6px);
  background-size: auto, 22px 22px;
}
.grade-niveis__edge--top { top: 0; }
.grade-niveis__edge--bottom { bottom: 0; transform: scaleY(-1); }

.grade-niveis__head { text-align: center; }
.grade-niveis__eyebrow { background: var(--gold); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.grade-niveis__eyebrow .eyebrow__dot { background: var(--ink); }
.grade-niveis__title {
  margin: 20px auto 0;
  max-width: 26ch;
  color: var(--paper);
}
.grade-niveis__xp { font-style: normal; color: var(--gold); }
.grade-niveis__sub {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(251, 245, 232, .82);
}

/* interação: a medalha se destaca ao passar o mouse / focar o nível */
.grade-level { cursor: default; }
.grade-niveis.is-settled .grade-medal { transition-delay: 0s; transition-duration: .45s; }
.grade-niveis .grade-level:hover .grade-medal,
.grade-niveis .grade-level:focus-within .grade-medal { transform: translateY(-8px) rotate(-6deg) scale(1.05); }
.grade-niveis.is-live .grade-level--locked:hover .grade-medal { opacity: .8; }
.grade-level:hover .grade-level__name { color: var(--gold-soft); }

/* trilha */
.grade-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 64px;
}
.grade-path::before,
.grade-path::after {
  content: "";
  position: absolute;
  top: calc(var(--medal) / 2 - 3px);
  height: 6px;
  border-radius: 6px;
  pointer-events: none;
}
.grade-path::before { /* trecho que falta */
  left: 10%; right: 10%;
  background: repeating-linear-gradient(90deg, rgba(247, 222, 148, .38) 0 14px, transparent 14px 26px);
}
.grade-path::after { /* trecho percorrido */
  left: 10%; width: 20%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(232, 181, 58, .55);
  transform-origin: left center;
  transition: transform 1s var(--ease-out) .25s;
}
.grade-niveis.is-armed .grade-path::after { transform: scaleX(0); }
.grade-niveis.is-live .grade-path::after { transform: none; }

.grade-level {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  min-width: 0;
}
.grade-medal {
  --shape: circle(50% at 50% 50%);
  position: relative;
  width: var(--medal); height: var(--medal);
  flex: none;
  filter: drop-shadow(0 6px 0 rgba(3, 8, 20, .55));
  transition: transform .7s var(--ease-pop), opacity .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.grade-medal::before,
.grade-medal::after,
.grade-medal__face {
  content: "";
  position: absolute;
  clip-path: var(--shape);
}
.grade-medal::before { inset: 0; background: #6E4D08; }
.grade-medal::after { inset: 5px; background: linear-gradient(145deg, #FFF3C2 0%, #F2D27A 22%, #E0A92E 48%, #B8861B 70%, #F0CF6E 100%); }
.grade-medal__face {
  inset: 14px;
  z-index: 1;
  display: grid; place-items: center;
  color: var(--ink);
  background: linear-gradient(325deg, #FFF0B8 0%, #F0CC6C 30%, #DDA22A 62%, #F6DB8C 100%);
}
.grade-medal__face svg { width: 40px; height: 40px; stroke-width: 2.2; }
.grade-medal--shield { --shape: polygon(50% 0%, 96% 13%, 96% 50%, 89% 70%, 73% 87%, 50% 100%, 27% 87%, 11% 70%, 4% 50%, 4% 13%); }
.grade-medal--hex { --shape: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.grade-medal--seal { --shape: polygon(50% 0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%, 100% 50%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%, 50% 100%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%, 0% 50%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%); }
.grade-medal--star { --shape: polygon(50% 0%, 64.5% 14.9%, 85.4% 14.6%, 85.1% 35.5%, 100% 50%, 85.1% 64.5%, 85.4% 85.4%, 64.5% 85.1%, 50% 100%, 35.5% 85.1%, 14.6% 85.4%, 14.9% 64.5%, 0% 50%, 14.9% 35.5%, 14.6% 14.6%, 35.5% 14.9%); }
.grade-medal--star .grade-medal__face svg, .grade-medal--hex .grade-medal__face svg { width: 36px; height: 36px; }


.grade-niveis.is-armed .grade-medal { transform: scale(.4) rotate(-25deg); opacity: 0; }
.grade-niveis.is-live .grade-medal { transform: none; opacity: 1; }
.grade-niveis.is-live .grade-level--locked .grade-medal { opacity: .5; }

.grade-level--locked .grade-medal { filter: grayscale(1) brightness(.85) drop-shadow(0 6px 0 rgba(3, 8, 20, .55)); opacity: .5; }

/* nível atual: pulso + token do guia */
.grade-level--current::before {
  content: "";
  position: absolute;
  top: calc(var(--medal) / 2 - 74px); left: 50%;
  width: 148px; height: 148px;
  margin-left: -74px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  opacity: 0;
  animation: grade-pulse 2.8s var(--ease-out) infinite 1.2s;
  pointer-events: none;
}
@keyframes grade-pulse {
  0% { opacity: .75; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.18); }
}
.grade-level__token {
  position: absolute;
  top: -10px; left: calc(50% + 26px);
  z-index: 2;
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mustard);
  border: 3px solid var(--paper);
  box-shadow: 3px 3px 0 rgba(3, 8, 20, .55);
  transition: transform .6s var(--ease-pop) .7s, opacity .4s var(--ease-out) .7s;
}
.grade-niveis.is-armed .grade-level__token { transform: translateY(-14px) scale(.5); opacity: 0; }
.grade-niveis.is-live .grade-level__token { transform: none; opacity: 1; }

.grade-level__num {
  margin-top: 18px;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--gold);
}
.grade-level__name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1rem, .5vw + .8rem, 1.2rem);
  line-height: 1.1;
  color: var(--paper);
  text-transform: uppercase;
  text-wrap: balance;
}
.grade-level--locked .grade-level__name { color: rgba(251, 245, 232, .62); }
.grade-level__state {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: 12px;
  padding: .42em .8em .38em;
  font-family: var(--font-college);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(251, 245, 232, .7);
  border: 1.5px solid rgba(251, 245, 232, .28);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.grade-level__state svg { width: 13px; height: 13px; stroke-width: 2.6; }
.grade-level__state--done { color: var(--ink); background: var(--mint); border-color: var(--mint); }
.grade-level__state--here {
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px var(--paper);
  transform: rotate(-3deg);
  font-size: .72rem;
}

/* barra de XP */
.grade-xp {
  max-width: 780px;
  margin: 60px auto 0;
  padding: 22px clamp(18px, 3vw, 28px) 18px;
  background: rgba(251, 245, 232, .04);
  border: 2px solid rgba(247, 222, 148, .3);
  border-radius: 22px;
}
.grade-xp__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 14px;
}
.grade-xp__label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grade-xp__tag {
  padding: .35em .6em .3em;
  font-size: .9rem;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--gold-soft);
  line-height: 1;
}
.grade-xp__nums {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.grade-xp__max { color: rgba(251, 245, 232, .72); font-size: .62em; }
.grade-xp__next { font-size: .74rem; letter-spacing: .12em; color: rgba(251, 245, 232, .78); }
.grade-xp__next b { font-weight: 400; color: var(--paper); }

.grade-xp__bar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: #0A1328;
  border: 3px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 6px 0 rgba(3, 8, 20, .55);
}
.grade-xp__seg {
  display: block;
  height: 30px;
  border-radius: 7px;
  background: rgba(251, 245, 232, .07);
  border: 2px dashed rgba(251, 245, 232, .16);
}
.grade-xp__seg.is-full {
  background: linear-gradient(180deg, #FFF3C2 0%, #F2D27A 30%, #E0A92E 70%, #B8861B 100%);
  border: 2px solid #6E4D08;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45);
  transition: transform .45s var(--ease-pop), opacity .3s linear;
  transition-delay: calc(var(--s) * 120ms + 200ms);
}
.grade-xp--armed .grade-xp__seg.is-full { transform: scale(.35); opacity: 0; }
.grade-xp--go .grade-xp__seg.is-full { transform: none; opacity: 1; }
.grade-xp__seg:first-child { border-radius: 11px 7px 7px 11px; }
.grade-xp__seg:last-child { border-radius: 7px 11px 11px 7px; }
.grade-xp__hint {
  margin-top: 12px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gold-soft);
  text-align: center;
}

/* ---------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .grade { --grade-gm: 80px; }
  .grade-row { grid-template-columns: 66px 50px minmax(0, 1fr) 196px; gap: 14px; }
}

/* folha muito alta no tablet/celular: a folha de trás só desloca, sem girar
   (girada, as bordas viravam uma cunha marinho na lateral) */
@media (max-width: 900px) {
  .grade-sheet-under { transform: translate(7px, 7px); }
}

@media (max-width: 900px) {
  .grade-niveis { --medal: 96px; }
  .grade-medal__face svg { width: 34px; height: 34px; }
  .grade-level__state { font-size: .62rem; letter-spacing: .08em; padding-inline: .6em; }
}

/* tablet: disciplinas viram cartões (2 colunas), celular: 1 coluna */
@media (max-width: 900px) {
  .grade-list { display: grid; gap: 14px; }
  .grade-row,
  .grade-row:last-child {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      "icon num"
      "text text"
      "status status";
    gap: 10px 12px;
    padding: 14px;
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .grade-row--locked,
  .grade-row--locked:last-child { background: #FBF8F1; border-style: dashed; box-shadow: 3px 3px 0 rgba(20, 33, 61, .35); }
  .grade-row::before { display: none; }
  .grade-row__icon { grid-area: icon; width: 46px; height: 46px; box-shadow: 2px 2px 0 var(--ink); }
  .grade-row__icon svg { width: 22px; height: 22px; }
  .grade-row__num { grid-area: num; flex-direction: row; align-items: baseline; gap: 6px; font-size: 1.35rem; }
  .grade-row__num span { margin: 0; }
  .grade-row__text { grid-area: text; }
  .grade-row__status { grid-area: status; justify-content: flex-start; padding-left: 4px; }
  .grade-tip { right: auto; left: 0; }
  .grade-tip::after { right: auto; left: 28px; }
  .grade-stamp { font-size: .7rem; padding: .5em .6em .45em; letter-spacing: .1em; }
  .grade-stamp svg { width: 14px; height: 14px; }
  .grade-lock { font-size: .68rem; padding: .45em .75em .4em; letter-spacing: .08em; }
  .grade-tip { font-size: .68rem; }

  .grade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-row, .grade-row:last-child { grid-template-rows: auto 1fr auto; }
  .grade-row__text { align-self: start; }
}
/* celular: linha de histórico compacta (sem cartões, status na mesma linha do número) */
@media (max-width: 600px) {
  .grade-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grade-row,
  .grade-row:last-child {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas:
      "icon num status"
      "icon text text";
    align-items: center;
    gap: 4px 12px;
    padding: 14px 0 15px;
    background: none;
    border: 0;
    border-top: 1.5px solid rgba(20, 33, 61, .16);
    border-radius: 0;
    box-shadow: none;
  }
  .grade-row:last-child { border-bottom: 1.5px solid rgba(20, 33, 61, .16); }
  .grade-row--locked { background: none; }
  .grade-row__icon { align-self: start; width: 38px; height: 38px; margin-top: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .grade-row--locked .grade-row__icon { box-shadow: 2px 2px 0 rgba(20, 33, 61, .4); }
  .grade-row__icon svg { width: 19px; height: 19px; }
  .grade-row__num { font-size: 1.15rem; gap: 5px; }
  .grade-row__num span { font-size: .6rem; letter-spacing: .14em; }
  .grade-row__text { align-self: start; }
  .grade-row__name { font-size: 1rem; }
  .grade-row__desc { margin-top: 3px; font-size: .9rem; line-height: 1.4; }
  .grade-row__status { padding-left: 0; justify-content: flex-end; }
  .grade-stamp { font-size: .6rem; padding: .45em .55em .4em; outline-offset: 2px; border-width: 2px; outline-width: 1px; }
  .grade-stamp svg { width: 12px; height: 12px; }
  /* cadeado: pílula pequena, área de toque de 44px mantida pelo ::after */
  .grade-lock {
    position: relative;
    min-height: 0;
    padding: .5em .7em .45em;
    font-size: .6rem;
    letter-spacing: .08em;
    border-width: 1.5px;
  }
  .grade-lock::after { content: ""; position: absolute; inset: -10px -6px; }
  .grade-lock svg { width: 12px; height: 12px; }
  .grade-tip { left: auto; right: 0; }
  .grade-tip::after { left: auto; right: 22px; }
}

@media (max-width: 760px) {
  .grade { --grade-gm: 32px; padding-top: calc(var(--section-pad) + 8px); }
  .grade-sheet { padding: 34px 14px 26px calc(var(--grade-gm) + 12px); box-shadow: var(--shadow-hard); }
  .grade-holes { left: calc(var(--grade-gm) / 2 - 9px); }
  .grade-holes { left: calc(var(--grade-gm) / 2 - 8px); }
  .grade-holes i { width: 15px; height: 15px; }
  .grade-note { width: 104px; top: -30px; right: 10px; }
  .grade-note__text { min-height: 0; padding: 26px 10px 12px; font-size: .64rem; letter-spacing: .08em; }
  .grade-clip { width: 20px; right: 14px; top: -18px; }
  .grade-sheet__head { padding-right: 104px; gap: 8px; }
  .grade-sheet__org p { font-size: .74rem; letter-spacing: .06em; }
  .grade-sheet__org p > span { font-size: .64rem; letter-spacing: .08em; }
  .grade-sheet__crest { width: 34px; height: 40px; }

  .grade-sheet__foot { flex-direction: column; align-items: stretch; text-align: left; }
  .grade-sheet__foot .btn { width: 100%; padding-inline: .7em; font-size: .9rem; gap: .45em; }

  /* níveis: trilha vertical */
  .grade-niveis { --medal: 84px; }
  .grade-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 44px;
    max-width: 420px;
    margin-inline: auto;
  }
  .grade-path::before,
  .grade-path::after {
    top: 34px; bottom: 34px;
    left: calc(var(--medal) / 2 - 3px);
    width: 6px; height: auto;
    right: auto;
  }
  .grade-path::before { background: repeating-linear-gradient(180deg, rgba(247, 222, 148, .38) 0 12px, transparent 12px 22px); }
  .grade-path::after { bottom: auto; height: calc(var(--medal) + 22px); transform-origin: center top; }
  .grade-niveis.is-armed .grade-path::after { transform: scaleY(0); }
  .grade-level {
    display: grid;
    grid-template-columns: var(--medal) minmax(0, 1fr);
    grid-template-areas:
      "medal num"
      "medal name"
      "medal state";
    align-content: center;
    column-gap: 18px;
    text-align: left;
    align-items: center;
  }
  .grade-medal { grid-area: medal; }
  .grade-medal__face svg { width: 30px; height: 30px; }
  .grade-medal--star .grade-medal__face svg, .grade-medal--hex .grade-medal__face svg { width: 28px; height: 28px; }
  .grade-medal__face { inset: 11px; }
  .grade-level__num { grid-area: num; margin-top: 0; align-self: end; }
  .grade-level__name { grid-area: name; font-size: 1.15rem; }
  .grade-level__state { grid-area: state; justify-self: start; align-self: start; margin-top: 8px; font-size: .66rem; }
  .grade-level--current::before { top: calc(var(--medal) / 2 - 58px); left: calc(var(--medal) / 2); width: 116px; height: 116px; margin-left: -58px; }
  .grade-level__token { top: -8px; left: calc(var(--medal) - 30px); width: 40px; height: 40px; }
  .grade-xp { margin-top: 44px; }
  .grade-xp__seg { height: 24px; }
  .grade-xp__bar { gap: 4px; padding: 5px; }
}

@media (max-width: 420px) {
  .grade-sheet__student { display: none; }
  .grade-xp__next { width: 100%; }
}

/* celular: trilha de níveis mais enxuta (medalhas menores, linhas de 2 níveis de texto) */
@media (max-width: 600px) {
  .grade-niveis { --medal: 62px; --lv-gap: 14px; }
  .grade-niveis__sub { font-size: .98rem; }
  .grade-path { gap: var(--lv-gap); margin-top: 34px; }
  .grade-path::before, .grade-path::after { top: calc(var(--medal) / 2); bottom: calc(var(--medal) / 2); }
  .grade-path::after { bottom: auto; height: calc(var(--medal) + var(--lv-gap)); }
  .grade-level {
    grid-template-areas:
      "medal num"
      "medal name"
      "medal state";
    column-gap: 14px;
  }
  .grade-medal { filter: drop-shadow(0 4px 0 rgba(3, 8, 20, .55)); }
  .grade-level--locked .grade-medal { filter: grayscale(1) brightness(.85) drop-shadow(0 4px 0 rgba(3, 8, 20, .55)); }
  .grade-medal::after { inset: 4px; }
  .grade-medal__face { inset: 9px; }
  .grade-medal__face svg,
  .grade-medal--star .grade-medal__face svg,
  .grade-medal--hex .grade-medal__face svg { width: 22px; height: 22px; }
  .grade-level__num { font-size: .64rem; }
  .grade-level__name { font-size: 1rem; margin-top: 2px; }
  .grade-level__state { margin-top: 5px; font-size: .58rem; padding: .38em .7em .34em; }
  .grade-level__state--here { font-size: .6rem; }
  .grade-level--current::before { top: calc(var(--medal) / 2 - 44px); left: calc(var(--medal) / 2); width: 88px; height: 88px; margin-left: -44px; }
  .grade-level__token { top: -10px; left: calc(var(--medal) - 22px); width: 32px; height: 32px; border-width: 2px; }
  .grade-xp { margin-top: 32px; padding: 16px 14px 14px; }
  .grade-xp__seg { height: 20px; }
}

/* ---------- sem movimento ---------- */
.reduce-motion .grade *,
.reduce-motion .grade *::before,
.reduce-motion .grade *::after { transition: none !important; }
.reduce-motion .grade-level--current::before { animation: none; opacity: 0; }


/* ===== css/sections/06-para-quem.css ===== */
/* =====================================================================
   06 · PARA QUEM É — ficha de inscrição carimbada
   Coluna A: caixinhas marcadas em sequência. Coluna B: itens riscados
   com caneta vermelha. Carimbo APROVADO + CTA.
   ===================================================================== */

.paraquem {
  --pq-pen: #2C7347;     /* tinta verde (marcação aprovada) */
  --pq-red: #D23A2E;     /* caneta vermelha */
  background-image: radial-gradient(rgba(169, 121, 15, .16) 1.3px, transparent 1.7px);
  background-size: 22px 22px;
  padding-bottom: calc(var(--section-pad) + 10px);
}
.paraquem-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.paraquem-head { text-align: center; }
.paraquem-title { margin-top: 18px; }
.paraquem-lead { margin: 14px auto 0; color: var(--ink-soft); }

/* ---------- ficha ---------- */
.paraquem-form-wrap {
  max-width: 1080px;
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.paraquem-form {
  position: relative;
  background-color: var(--white);
  background-image:
    linear-gradient(rgba(20, 33, 61, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 33, 61, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-hard-lg);
  transform: rotate(-.5deg);
}
.paraquem-tape--l { top: -12px; left: 34px; --tilt: -8deg; }
.paraquem-tape--r { top: -12px; right: 34px; --tilt: 6deg; }

.paraquem-form__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "org photo" "fields photo";
  gap: 22px 40px;
  padding: clamp(26px, 3.4vw, 40px) clamp(20px, 3.6vw, 44px) 28px;
  border-bottom: 3px double var(--ink);
}
.paraquem-form__org { grid-area: org; display: flex; align-items: center; gap: 14px; min-width: 0; }
.paraquem-form__crest { flex: none; width: 44px; height: 50px; }
.paraquem-form__uni { font-size: .72rem; letter-spacing: .14em; color: var(--ink-soft); }
.paraquem-form__title {
  margin-top: 4px;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: .02em;
}

.paraquem-form__fields {
  grid-area: fields;
  display: grid;
  grid-template-columns: 1.5fr 1.1fr .8fr;
  gap: 14px 24px;
  margin: 0;
  align-self: end;
}
.paraquem-form__fields > div { min-width: 0; }
.paraquem-form__fields dt { font-size: .66rem; letter-spacing: .14em; color: var(--ink-soft); }
.paraquem-form__fields dd {
  margin: 4px 0 0;
  padding-bottom: 4px;
  min-height: 30px;
  font-size: 1rem;
  font-weight: 650;
  border-bottom: 2px dotted rgba(20, 33, 61, .45);
}
.paraquem-pen { color: var(--orange-deep); font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; }

/* foto 3x4 — carteirinha base (.photo-card): rosto inteiro, apoiado na base.
   Inclina em 3D ao passar o mouse (data-tilt). */
.paraquem-photo { grid-area: photo; position: relative; width: 156px; align-self: start; --tilt: 3deg; }
.paraquem-photo__card {
  --tilt: 0deg;
  --photo-ratio: 4 / 5;
  --photo-bg: var(--peach);
  --photo-pad: 8% 3% 0;
  border-width: var(--line);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
}
.paraquem-photo__card .photo-card__tag { font-size: .64rem; padding: .62em .5em .56em; border-top-width: var(--line); }
.paraquem-photo__clip {
  position: absolute;
  top: -20px; left: 22px;
  z-index: 2;
  transform: rotate(-8deg);
  filter: drop-shadow(1px 2px 0 rgba(20, 33, 61, .25));
}

/* ---------- colunas ---------- */
.paraquem-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
}
.paraquem-col { min-width: 0; margin: 0; border: 0; padding: 32px clamp(20px, 3.6vw, 44px) 34px; }
.paraquem-col--no { border-left: 2px dashed rgba(20, 33, 61, .3); background: rgba(251, 245, 232, .55); }
.paraquem-col__title {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.2vw + .8rem, 1.5rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.paraquem-col__letter {
  display: grid; place-items: center;
  flex: none;
  width: 34px; height: 34px;
  font-size: .9rem;
  letter-spacing: 0;
  color: var(--gold);
  background: var(--ink);
  border-radius: 50%;
}
.paraquem-not { color: var(--pq-red); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

.paraquem-checks li {
  font-size: 1.08rem;
  line-height: 1.4;
  border-bottom: 1.5px dotted rgba(20, 33, 61, .28);
}
/* cada linha é um checkbox de verdade: clique/toque/espaço marca e desmarca */
.paraquem-check {
  display: flex; align-items: flex-start; gap: 14px;
  min-height: 44px;
  padding: 10px 8px 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}
.paraquem-check:hover { background-color: rgba(247, 222, 148, .35); }
.paraquem-checks__text { transition: color var(--dur-fast) linear; }
.paraquem-check input:not(:checked) ~ .paraquem-checks__text { color: var(--ink-mute); }
.paraquem-check:hover .paraquem-box { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.paraquem-check input:focus-visible + .paraquem-box { outline: 3px solid var(--orange); outline-offset: 3px; }
.paraquem-checks li:last-child { border-bottom: 0; }
.paraquem-checks strong { font-weight: 800; }
.paraquem-box {
  position: relative;
  flex: none;
  width: 28px; height: 28px;
  margin-top: -1px;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.paraquem-box svg {
  position: absolute;
  left: -2px; top: -9px;
  width: 36px; height: 36px;
  overflow: visible;
  fill: none;
  stroke: var(--pq-pen);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 30% 80%;
  transition: transform .5s var(--ease-pop), opacity .2s linear;
}
.paraquem-check input:not(:checked) + .paraquem-box svg { transform: scale(0) rotate(-25deg); opacity: 0; }

.paraquem-tally {
  display: inline-flex; align-items: baseline; gap: .5em;
  margin-top: 12px;
  padding: .5em .9em .45em;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  background: rgba(205, 235, 217, .55);
  border: 1.5px solid rgba(44, 115, 71, .35);
  border-radius: var(--radius-pill);
}
.paraquem-tally b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--pq-pen); }

.paraquem-strikes li { padding: 10px 0; }
.paraquem-strike {
  position: relative;
  display: inline-block;
  font-size: clamp(1.15rem, .8vw + .9rem, 1.4rem);
  font-weight: 650;
  color: var(--ink-soft);
}
.paraquem-strike::after {
  content: "";
  position: absolute;
  left: -6px; right: -10px; top: 56%;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 4, 60 9, 92 6 S 150 3, 198 5' fill='none' stroke='%23D23A2E' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
  transition-delay: calc(var(--n, 0) * 240ms + 700ms);
}
.paraquem-col__note {
  margin-top: 14px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: opacity .4s linear 1.8s;
}

/* ---------- parecer + CTA ---------- */
.paraquem-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 32px;
  padding: 26px clamp(20px, 3.6vw, 44px) 32px;
  border-top: 3px double var(--ink);
  background: rgba(247, 222, 148, .28);
  border-radius: 0 0 8px 8px;
}
.paraquem-verdict {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  min-width: 0;
}
.paraquem-verdict__label {
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
  padding-bottom: 6px;
  border-bottom: 2px dotted rgba(20, 33, 61, .45);
  min-width: 150px;
}
.paraquem-stamp {
  --tilt: -9deg;
  --stamp-color: var(--orange-deep);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  padding: .3em .6em .25em;
  border-width: 4px;
  outline-width: 2.5px;
  outline-offset: 4px;
  background: rgba(242, 85, 44, .05);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 2.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 2.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  transition: transform .5s var(--ease-pop), opacity .18s linear;
  transition-delay: 1.9s;
}
.paraquem-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.paraquem-cta__price { font-size: .95rem; color: var(--ink-soft); }
.paraquem-cta__price b { color: var(--ink); }

/* ---------- estados de animação (só quando o JS arma) ---------- */
/* atrasos em cascata só na entrada; depois (.is-settled) a resposta é imediata */
.paraquem-form:not(.is-settled) .paraquem-box svg { transition-delay: calc(var(--n, 0) * 260ms + 250ms); }
.paraquem-form.is-settled .paraquem-stamp { transition-delay: 0s; }
.paraquem--armed .paraquem-form:not(.is-live) .paraquem-box svg { transform: scale(0) rotate(-25deg); opacity: 0; }
.paraquem--armed .paraquem-strike::after { transform: scaleX(0); }
.paraquem--armed .paraquem-col__note { opacity: 0; }
.paraquem--armed .paraquem-stamp { transform: rotate(-20deg) scale(2.3); opacity: 0; }
.paraquem--armed .is-live .paraquem-strike::after { transform: rotate(-1.5deg); }
/* nenhum item marcado: o carimbo some (volta ao marcar de novo) */
.paraquem .paraquem-form .paraquem-stamp.is-off { opacity: .1; transform: rotate(var(--tilt)) scale(.94); }
.paraquem--armed .is-live .paraquem-col__note { opacity: 1; }
.paraquem--armed .is-live .paraquem-stamp { transform: rotate(var(--tilt)); opacity: .92; }
.paraquem-strike::after { transform: rotate(-1.5deg); }

.paraquem-edge { bottom: 0; transform: scaleY(-1); }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) and (min-width: 721px) {
  .paraquem-form__foot { justify-content: center; gap: 22px 28px; }
  .paraquem-verdict { gap: 16px; }
  .paraquem-verdict__label { min-width: 0; max-width: 118px; line-height: 1.5; }
  .paraquem-cta .btn { font-size: 1.18rem; padding-inline: 1.5em; }
}
@media (max-width: 900px) {
  .paraquem-cols { grid-template-columns: minmax(0, 1fr); }
  .paraquem-col--no { border-left: 0; border-top: 2px dashed rgba(20, 33, 61, .3); }
  .paraquem-form__fields { grid-template-columns: 1fr 1fr; }
  .paraquem-form__fields > div:first-child { grid-column: 1 / -1; }
  .paraquem-photo { width: 124px; }
}
@media (max-width: 720px) {
  .paraquem-form { transform: none; box-shadow: var(--shadow-hard); }
  .paraquem-form__head {
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas: "org photo" "fields fields";
    gap: 18px 14px;
  }
  .paraquem-form__org { flex-direction: column; align-items: flex-start; gap: 8px; }
  .paraquem-form__crest { width: 36px; height: 42px; }
  .paraquem-form__uni { font-size: .62rem; letter-spacing: .1em; }
  .paraquem-photo { width: 96px; margin-top: 4px; }
  .paraquem-photo__clip { width: 16px; height: auto; top: -14px; left: 14px; }
  .paraquem-checks li { font-size: 1.02rem; }
  .paraquem-check { gap: 12px; }
  .paraquem-form__foot { flex-direction: column; align-items: stretch; }
  .paraquem-verdict { justify-content: space-between; }
  .paraquem-verdict__label { min-width: 0; }
  .paraquem-cta .btn { width: 100%; min-height: 60px; padding-inline: .8em; font-size: 1rem; gap: .5em; }
  .paraquem-tape--r { display: none; }
}
@media (max-width: 380px) {
  .paraquem-form__fields { grid-template-columns: 1fr; }
}

.reduce-motion .paraquem *,
.reduce-motion .paraquem *::before,
.reduce-motion .paraquem *::after { transition: none !important; }


/* ===== css/sections/07-certificado.css ===== */
/* =====================================================================
   07 · CERTIFICADO — momento formatura
   Certificado em papel envelhecido com moldura guilhochê (padrão SVG),
   cantoneiras douradas, selo com fitas que "carimba" ao entrar na tela,
   capelos jogados + confete discreto. Escala por container (cqi).
   ===================================================================== */

.cert {
  background-image:
    radial-gradient(70% 60% at 72% 45%, rgba(247, 222, 148, .45), rgba(247, 222, 148, 0) 70%),
    radial-gradient(rgba(20, 33, 61, .07) 1.2px, transparent 1.6px);
  background-size: auto, 24px 24px;
}
.cert-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cert-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "head  head"
    "side  stage";
  align-content: center;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 30px;
}
.cert-head { grid-area: head; min-width: 0; text-align: center; margin-bottom: clamp(4px, 1.5vw, 20px); }
.cert-title { margin-top: 18px; }
.cert-lead { margin: 16px auto 0; color: var(--ink-soft); }
.cert-lead strong { color: var(--ink); }

.cert-side { grid-area: side; align-self: center; min-width: 0; display: grid; row-gap: 30px; }

/* ---------- formulário do nome ---------- */
.cert-form { min-width: 0; }
.cert-form__label { display: block; font-size: .78rem; letter-spacing: .12em; margin-bottom: 10px; text-transform: uppercase; }
.cert-form__field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cert-form__field:focus-within {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.cert-form__icon {
  flex: none;
  width: 24px; height: 24px;
  fill: none; stroke: var(--orange-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cert-form__input {
  flex: 1;
  min-width: 0;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--ink);
}
.cert-form__input:focus { outline: none; }
.cert-form__input::placeholder { color: var(--ink-mute); opacity: 1; }
.cert-form__hint { margin-top: 10px; font-size: .9rem; color: var(--ink-mute); }

.cert-foot { min-width: 0; }
.cert-foot__price { margin-top: 12px; font-size: .95rem; color: var(--ink-soft); }
.cert-foot__price b { color: var(--ink); }
.cert-honesty {
  margin-top: 18px;
  max-width: 48ch;
  padding-top: 12px;
  border-top: 1.5px dashed rgba(20, 33, 61, .3);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- palco do certificado ---------- */
.cert-stage {
  grid-area: stage;
  position: relative;
  align-self: center;
  min-width: 0;
  padding: 40px 0 70px;
  container-type: inline-size;
  container-name: cert;
}
.cert-tilt { position: relative; z-index: 1; }
.cert-doc {
  position: relative;
  z-index: 1;
  aspect-ratio: 1.414 / 1;
  padding: 3.2cqi;
  background-color: #F3E1B6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23A9790F' stroke-width='.7' opacity='.85'%3E%3Ccircle cx='0' cy='0' r='12'/%3E%3Ccircle cx='24' cy='0' r='12'/%3E%3Ccircle cx='0' cy='24' r='12'/%3E%3Ccircle cx='24' cy='24' r='12'/%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/g%3E%3Cg fill='none' stroke='%2314213D' stroke-width='.5' opacity='.35'%3E%3Ccircle cx='12' cy='0' r='7'/%3E%3Ccircle cx='12' cy='24' r='7'/%3E%3Ccircle cx='0' cy='12' r='7'/%3E%3Ccircle cx='24' cy='12' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 2.6cqi 2.6cqi;
  border: var(--line) solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard-lg), 0 30px 50px -26px rgba(20, 33, 61, .5);
  transform: rotate(-1.4deg);
}
.cert-doc__paper {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 3.4cqi 7cqi 3.2cqi;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 45%, #FFFAEE 0%, #FBF1DA 55%, #EFDDB4 100%);
  border: 1.5px solid var(--gold-deep);
  box-shadow: inset 0 0 0 .8cqi #FBF3DF, inset 0 0 0 calc(.8cqi + 1.5px) var(--gold-deep), inset 0 0 4cqi rgba(169, 121, 15, .22);
  overflow: hidden;
}
.cert-doc__paper::after { /* grão do papel */
  content: "";
  position: absolute; inset: 0;
  background-image: var(--paper-noise);
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
}

.cert-corner { position: absolute; width: 7.5cqi; height: 7.5cqi; }
.cert-corner--tl { top: 1.6cqi; left: 1.6cqi; }
.cert-corner--tr { top: 1.6cqi; right: 1.6cqi; transform: scaleX(-1); }
.cert-corner--bl { bottom: 1.6cqi; left: 1.6cqi; transform: scaleY(-1); }
.cert-corner--br { bottom: 1.6cqi; right: 1.6cqi; transform: scale(-1, -1); }

.cert-emblem { width: 15cqi; height: auto; flex: none; }
.cert-uni {
  margin-top: .6cqi;
  font-family: var(--font-display);
  font-size: 4.6cqi;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--ink);
}
.cert-coc {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqi;
  width: 100%;
  margin-top: 1.2cqi;
  font-family: var(--font-college);
  font-size: 1.9cqi;
  letter-spacing: .3em;
  color: var(--gold-deep);
}
.cert-coc::before, .cert-coc::after {
  content: "";
  flex: 0 1 9cqi;
  height: 1.5px;
  background: var(--gold-deep);
}
.cert-small {
  margin-top: 1.6cqi;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.65cqi;
  line-height: 1.2;
  color: var(--ink-soft);
}
.cert-namerow {
  --cert-len: 8;
  display: flex; align-items: last baseline; justify-content: center; gap: 1.4cqi;
  width: 76cqi;
  max-width: 100%;
  margin-top: .8cqi;
  padding: 0 1cqi .6cqi;
  border-bottom: 1.5px solid var(--ink);
}
.cert-namelabel {
  flex: none;
  text-transform: uppercase;
  font-family: var(--font-college);
  font-size: 1.6cqi;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.cert-name {
  min-width: 0;
  /* nomes longos (até 40 caracteres) quebram em duas linhas em vez de encolher demais */
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: max(2.9cqi, min(5cqi, calc(68cqi / var(--cert-len))));
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--dur) linear;
}
.cert-name.is-custom { color: var(--ink); }
.cert-award {
  margin-top: 1.2cqi;
  filter: drop-shadow(.4cqi .4cqi 0 rgba(20, 33, 61, .35));
}
.cert-award span {
  display: inline-block;
  padding: 1cqi 4.6cqi .9cqi;
  font-family: var(--font-college);
  font-size: 2.3cqi;
  letter-spacing: .2em;
  line-height: 1.1;
  color: var(--gold);
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 96.5% 50%, 100% 100%, 0 100%, 3.5% 50%);
}

.cert-sigs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22cqi minmax(0, 1fr);
  align-items: end;
  width: 100%;
  margin-top: auto;
  padding-top: 1cqi;
}
.cert-sig { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cert-sig__ink { display: block; width: 19cqi; height: 6cqi; overflow: hidden; }
.cert-sig__ink > span { display: block; width: 100%; height: 100%; }
.cert-sig__ink svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: #22345F;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cert-sig__line {
  display: block;
  width: 100%;
  padding-top: .7cqi;
  border-top: 1.5px solid var(--ink);
  font-family: var(--font-college);
  font-size: 1.4cqi;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* selo */
.cert-seal {
  position: absolute;
  left: 50%; bottom: -9cqi;
  z-index: 3;
  width: 20cqi;
  transform: translateX(-50%) rotate(-8deg);
  filter: drop-shadow(.6cqi .8cqi 0 rgba(20, 33, 61, .45));
}
.cert-seal svg { width: 100%; height: auto; }

/* efeitos (só aparecem animados) */
.cert-fx { position: absolute; inset: 40px 0 70px; z-index: 0; pointer-events: none; }
.cert-cap {
  position: absolute;
  top: 6%; left: var(--cx);
  width: clamp(36px, 8cqi, 60px);
  opacity: 0;
  transform: translateX(-50%);
}
.cert-cap svg { width: 100%; height: auto; }
.cert-confetti {
  position: absolute;
  left: 50%; bottom: 6.6cqi;
  z-index: 4;
  width: 0; height: 0;
  pointer-events: none;
}
.cert-confetti i {
  position: absolute;
  left: -5px; top: -3px;
  width: 10px; height: 6px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(20, 33, 61, .25);
  opacity: 0;
}
.cert-confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }

/* ---------- animação (só quando o JS arma) ---------- */
.cert--armed .cert-seal { opacity: 0; transform: translateX(-50%) rotate(-40deg) scale(2.6); }
.cert--armed .cert-sig__ink { transform: translateX(-100%); }
.cert--armed .cert-sig__ink > span { transform: translateX(100%); }

.cert--go .cert-seal { animation: cert-stamp .6s var(--ease-out) .55s forwards; }
.cert--go .cert-doc { animation: cert-thud .35s var(--ease-out) .88s; }
.cert--go .cert-sig__ink,
.cert--go .cert-sig__ink > span { transform: none; transition: transform 1s var(--ease-in-out) 1.2s; }
.cert--go .cert-sig + .cert-sig__gap + .cert-sig .cert-sig__ink,
.cert--go .cert-sig + .cert-sig__gap + .cert-sig .cert-sig__ink > span { transition-delay: 1.6s; }
.cert--go .cert-confetti i { animation: cert-confetti 1.5s cubic-bezier(.2, .7, .3, 1) .92s forwards; }
.cert--go .cert-cap { animation: cert-toss 1.9s var(--ease-out) calc(.95s + var(--cd, 0s)) forwards; }

@keyframes cert-stamp {
  0%   { opacity: 0; transform: translateX(-50%) rotate(-40deg) scale(2.6); }
  55%  { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(.9); }
  75%  { transform: translateX(-50%) rotate(-9deg) scale(1.04); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-8deg) scale(1); }
}
@keyframes cert-thud {
  0%, 100% { transform: rotate(-1.4deg); }
  40% { transform: rotate(-1.4deg) translateY(3px) scale(.995); }
}
@keyframes cert-confetti {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(.5); }
  55%  { opacity: 1; transform: translate(calc(var(--x) * .9), var(--y)) rotate(calc(var(--r) * .6)) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)) scale(1); }
}
@keyframes cert-toss {
  0%   { opacity: 0; transform: translate(-50%, 40px) rotate(0); }
  12%  { opacity: 1; }
  48%  { opacity: 1; transform: translate(-50%, calc(var(--cy) * var(--cy-k, 1))) rotate(var(--cr)); }
  100% { opacity: 0; transform: translate(-50%, calc(var(--cy) * var(--cy-k, 1) * .25)) rotate(calc(var(--cr) * 2.2)); }
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .cert-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "stage" "side";
    max-width: 760px;
    row-gap: 24px;
  }
  .cert-stage { padding: 30px 0 60px; }
  .cert-fx { inset: 22px 0 60px; --cy-k: .4; } /* capelos não sobem até o campo do nome */
  /* coluna única: o campo do nome vem ANTES do certificado, para que a prévia
     fique à vista enquanto a pessoa digita (teclado aberto no celular) */
  .cert-grid { grid-template-areas: "head" "form" "stage" "foot"; }
  .cert-side { display: contents; }
  .cert-form { grid-area: form; }
  .cert-foot { grid-area: foot; }
  .cert-stage { padding-top: 22px; }
  .cert-form, .cert-foot { width: 100%; max-width: 560px; margin-inline: auto; }
  .cert-foot { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .cert-honesty { margin-inline: auto; }
}
@media (max-width: 600px) {
  .cert-foot .btn { width: 100%; padding-inline: .9em; font-size: .96rem; }
  .cert-doc, .cert--go .cert-doc { transform: none; animation: none; }
}

/* certificado pequeno: deixa de ser paisagem fixa e usa tamanhos mínimos legíveis */
@container cert (max-width: 540px) {
  .cert-doc { aspect-ratio: auto; padding: 10px; background-size: 14px 14px; }
  .cert-doc__paper { padding: 20px 16px 22px; box-shadow: inset 0 0 0 4px #FBF3DF, inset 0 0 0 5.5px var(--gold-deep), inset 0 0 22px rgba(169, 121, 15, .22); }
  .cert-corner { width: 30px; height: 30px; }
  .cert-corner--tl, .cert-corner--tr { top: 8px; }
  .cert-corner--bl, .cert-corner--br { bottom: 8px; }
  .cert-corner--tl, .cert-corner--bl { left: 8px; }
  .cert-corner--tr, .cert-corner--br { right: 8px; }
  .cert-emblem { width: 64px; }
  .cert-uni { font-size: clamp(17px, 6cqi, 26px); margin-top: 4px; }
  .cert-coc { font-size: clamp(9px, 2.8cqi, 12px); letter-spacing: .18em; gap: 8px; margin-top: 6px; }
  .cert-coc::before, .cert-coc::after { flex-basis: 24px; }
  .cert-small { font-size: 12px; margin-top: 12px; }
  .cert-namerow { width: 100%; gap: 6px; margin-top: 4px; padding-bottom: 4px; }
  .cert-namelabel { font-size: 10px; }
  .cert-name { font-size: max(15px, min(21px, calc(80cqi / var(--cert-len)))); }
  .cert-award { margin-top: 8px; }
  .cert-award span { font-size: clamp(10px, 3.2cqi, 13px); padding: 6px 18px 5px; letter-spacing: .14em; }
  .cert-sigs { grid-template-columns: minmax(0, 1fr) 27cqi minmax(0, 1fr); margin-top: 18px; }
  .cert-sig__ink { width: 80%; height: 26px; }
  .cert-sig__line { font-size: 8.5px; letter-spacing: .04em; padding-top: 4px; white-space: normal; line-height: 1.2; }
  .cert-seal { width: 25cqi; bottom: -12cqi; }
  .cert-confetti { bottom: 9cqi; }
}

.reduce-motion .cert *,
.reduce-motion .cert *::before,
.reduce-motion .cert *::after { transition: none !important; }


/* ===== css/sections/08-matricula.css ===== */
/* =====================================================================
   08 — MATRÍCULA (oferta) + GARANTIA
   Fundo azul-marinho: a ficha de admissão (papel branco) ocupa o centro,
   com a carteirinha de estudante presa a ela (um "envelope de admissão"):
   carteirinha · você recebe · valor + CTA. O selo dourado fecha.
   Sombras duras douradas (a tinta marinho some no fundo marinho).
   ===================================================================== */

.matricula {
  padding-block: calc(var(--section-pad) + 8px) calc(var(--section-pad) + 8px);
  background-image:
    radial-gradient(ellipse 58% 46% at 50% 40%, rgba(232, 181, 58, .16), rgba(232, 181, 58, 0) 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(5, 10, 24, 0) 55%, rgba(5, 10, 24, .45) 100%);
}
.matricula-edge--top { top: -1px; }
.matricula-edge--bottom { bottom: -1px; transform: scaleY(-1); }

/* pontinhos dourados discretos, só nas laterais */
.matricula-glow {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(247, 222, 148, .16) 1.3px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask: linear-gradient(90deg, #000 0, transparent 22%, transparent 78%, #000 100%);
          mask: linear-gradient(90deg, #000 0, transparent 22%, transparent 78%, #000 100%);
}

/* ---------- Cabeçalho ---------- */
.matricula-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 18px;
}
.matricula-eyebrow { box-shadow: 3px 3px 0 var(--gold); border-color: var(--gold); }
.matricula-title { color: var(--paper); }
.matricula-title .em { color: var(--orange); text-shadow: .05em .05em 0 rgba(5, 10, 24, .55); }
.matricula-lead {
  max-width: 50ch;
  color: rgba(251, 245, 232, .84);
  font-size: clamp(1.02rem, .5vw + .9rem, 1.2rem);
}
.matricula-lead strong { color: var(--gold-soft); font-weight: 700; }

/* ---------- Palco: uma ficha central, larga ---------- */
.matricula-stage {
  margin-top: clamp(40px, 5vw, 64px);
}

/* ---------- Ficha de admissão ---------- */
.matricula-card {
  position: relative;
  min-width: 0;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 38px);
  color: var(--ink);
  background-color: var(--white);
  background-image: var(--paper-noise);
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 12px 12px 0 var(--gold);
}
/* moldura interna de documento */
.matricula-card::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1.5px solid rgba(20, 33, 61, .16);
  border-radius: 20px;
  pointer-events: none;
}

.matricula-card__head {
  position: relative;
  display: flex; align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  padding-bottom: 16px;
  border-bottom: 4px double var(--ink);
}
.matricula-crest { width: clamp(46px, 5vw, 60px); height: auto; flex: none; }
.matricula-card__brand { min-width: 0; flex: 1; }
.matricula-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.2vw + .6rem, 1.5rem);
  line-height: 1.05;
  letter-spacing: .01em;
}
.matricula-card__kind {
  margin-top: 4px;
  font-family: var(--font-college);
  font-size: clamp(.78rem, .4vw + .62rem, .95rem);
  letter-spacing: .55em;
  color: var(--gold-deep);
  line-height: 1;
}
.matricula-card__form {
  flex: none;
  padding: 6px 9px 5px;
  font-family: var(--font-college);
  font-size: .62rem;
  letter-spacing: .14em;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-mute);
  border: 1.5px solid currentColor;
  border-radius: 6px;
}

.matricula-card__status {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  padding: 18px 0 6px;
}
.matricula-card__status-label {
  font-family: var(--font-college);
  font-size: .9rem;
  letter-spacing: .16em;
  color: var(--ink-soft);
}
.matricula-stamp {
  --stamp-color: var(--orange);
  --tilt: -5deg;
  position: relative;
  font-size: clamp(.9rem, .5vw + .74rem, 1.12rem);
  padding: .5em .9em .44em;
  background: rgba(242, 85, 44, .07);
  white-space: nowrap;
}
/* respingo de tinta quando o carimbo bate */
.matricula-stamp::after {
  content: "";
  position: absolute; inset: -10px;
  border: 2px solid var(--orange);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
}

.matricula-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "get fee" "id id";
  gap: clamp(20px, 2.6vw, 34px);
  align-items: stretch;
  margin-top: 18px;
}
/* desktop: carteirinha · você recebe · valor */
@media (min-width: 1180px) {
  .matricula-card__body {
    grid-template-columns: minmax(0, .84fr) minmax(0, .94fr) minmax(0, 1.22fr);
    grid-template-areas: "id get fee";
  }
}

/* preço + CTA */
.matricula-fee {
  grid-area: fee;
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(18px, 2vw, 24px) clamp(16px, 2vw, 22px) 14px;
  background: var(--butter);
  border: 2.5px dashed rgba(20, 33, 61, .55);
  border-radius: var(--radius);
  container-type: inline-size;   /* o CTA se ajusta à largura da caixa */
}
.matricula-fee__label {
  display: inline-block;
  padding: .45em 1em .4em;
  font-family: var(--font-college);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.matricula-fee__price {
  display: flex; align-items: flex-start; justify-content: center;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 4.4vw + .9rem, 4.7rem);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.matricula-fee__cur { font-size: .36em; margin: .32em .22em 0 0; letter-spacing: 0; }
.matricula-fee__num { text-shadow: .045em .045em 0 var(--gold); }
.matricula-fee__price { margin-bottom: 18px; }
/* CTA principal: sempre em uma linha — a fonte acompanha a largura da caixa de valor */
.matricula-cta {
  white-space: nowrap;
  padding-inline: .9em;
  font-size: clamp(.9rem, 5.2cqi, 1.32rem);
}
.matricula-cta__text { white-space: nowrap; }
.matricula-fee__guarantee {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  margin-top: 8px;
  padding-inline: 6px;
  font-family: var(--font-college);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(20, 33, 61, .35);
}
.matricula-fee__guarantee svg { width: 20px; height: 20px; flex: none; color: var(--gold-deep); }
.matricula-fee__guarantee:hover { text-decoration-color: var(--orange); }

/* "Você recebe" */
.matricula-get { grid-area: get; min-width: 0; padding-top: 4px; }
.matricula-get__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.15rem, .6vw + .95rem, 1.35rem);
  margin-bottom: 8px;
}
.matricula-list li {
  display: flex; align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-weight: 650;
  font-size: clamp(1rem, .3vw + .92rem, 1.08rem);
  line-height: 1.25;
  border-bottom: 1.5px dashed rgba(20, 33, 61, .2);
}
.matricula-check { width: 30px; height: 28px; flex: none; overflow: visible; }
.matricula-check rect { fill: var(--white); stroke: var(--ink); stroke-width: 2.2; }
.matricula-check__tick {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.matricula-get__sign { display: grid; gap: 4px; margin-top: 22px; }
.matricula-get__sign-line { height: 2px; background: var(--ink); opacity: .55; width: 88%; }
.matricula-get__sign-label {
  font-family: var(--font-college);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Animação: carimbo + checks ---------- */
.matricula.is-armed .matricula-stamp { opacity: 0; transform: rotate(-16deg) scale(2.4); }
.matricula.is-armed .matricula-check__tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.matricula.is-stamped .matricula-stamp { animation: matricula-thunk .55s var(--ease-out) .25s both; }
.matricula.is-stamped .matricula-stamp::after { animation: matricula-splash .6s var(--ease-out) .5s both; }
.matricula.is-stamped .matricula-check__tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .42s var(--ease-out);
  transition-delay: calc(.7s + var(--i, 0) * .09s);
}
@keyframes matricula-thunk {
  0% { opacity: 0; transform: rotate(-16deg) scale(2.4); }
  55% { opacity: 1; transform: rotate(-4deg) scale(.92); }
  75% { transform: rotate(-6deg) scale(1.04); }
  100% { opacity: .9; transform: rotate(-5deg) scale(1); }
}
@keyframes matricula-splash {
  0% { opacity: .7; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* ---------- Carteirinha (decorativa, presa à ficha com fita) ---------- */
.matricula-id {
  grid-area: id;
  position: relative;
  width: 100%;
  max-width: 360px;
  min-width: 0;
  justify-self: center;
  align-self: start;
  padding: 14px 0 34px;
}
.matricula-id__tilt { --tilt: -3deg; position: relative; }
.matricula-id__card {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    var(--paper-noise),
    repeating-linear-gradient(135deg, rgba(232, 181, 58, .09) 0 10px, transparent 10px 20px);
  border: var(--line-thick) solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: box-shadow var(--dur) var(--ease-out);
}
.matricula-id__tilt.is-tilting .matricula-id__card { box-shadow: 12px 14px 0 var(--ink); }
.matricula-id__tape { top: -8px; left: 50%; margin-left: -44px; --tilt: 4deg; z-index: 2; }
.matricula-id__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 14px 16px 12px;
  border-bottom: var(--line) solid var(--ink);
}
.matricula-id__top { background: linear-gradient(145deg, #FFF3C2 0%, #F2D27A 30%, #E0A92E 62%, #F0CF6E 100%); }
.matricula-id__crest { grid-row: span 2; width: 38px; height: auto; }
.matricula-id__uni { font-family: var(--font-display); font-size: 1rem; line-height: 1.05; }
.matricula-id__kind {
  font-family: var(--font-college);
  font-size: .62rem;
  letter-spacing: .2em;
  line-height: 1.2;
  margin-top: 2px;
}
.matricula-id__body {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 16px 10px;
}
.matricula-id__photo {
  border-width: var(--line);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.matricula-id__photo > img { --photo-pad: 8% 3% 0; }
.matricula-id__photo-tag {
  padding: .45em .3em .4em;
  font-size: .56rem;
  letter-spacing: .12em;
  border-top-width: var(--line);
}
.matricula-id__fields { display: grid; gap: 8px; align-content: start; }
.matricula-id__row { border-bottom: 1.5px solid rgba(20, 33, 61, .2); padding-bottom: 5px; }
.matricula-id__row dt {
  font-family: var(--font-college);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.2;
}
.matricula-id__row dd { margin: 0; font-weight: 750; font-size: .98rem; line-height: 1.2; }
.matricula-id__you {
  font-family: var(--font-display);
  font-size: 1.3rem !important;
  color: var(--orange-deep);
  line-height: 1.05 !important;
  letter-spacing: .01em;
}
.matricula-id__row dd { text-transform: uppercase; letter-spacing: .02em; }
.matricula-id__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 2px 16px 14px;
}
.matricula-id__barcode {
  height: 30px; width: 62%;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 8px,
    var(--ink) 8px 9px, transparent 9px 12px, var(--ink) 12px 15px, transparent 15px 17px);
  opacity: .85;
}
.matricula-id__holo {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 4px rgba(255, 253, 248, .45);
  position: relative;
}
.matricula-id__holo::after {
  content: "★";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1rem;
  color: var(--ink);
}
.matricula-id__sticker {
  position: absolute;
  left: 50%; bottom: -22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: .7em 1.15em .62em;
  font-family: var(--font-college);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--gold-soft);
  background: var(--navy-2);
  border: 2px solid var(--gold);
  border-radius: var(--radius-pill);
  box-shadow: 4px 4px 0 rgba(5, 10, 24, .55);
  transform: translateX(-50%) rotate(-2deg);
  z-index: 3;
}
.matricula-id__star { width: 14px; height: 14px; flex: none; color: var(--gold); }

/* ---------- Garantia ---------- */
.matricula-guarantee {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(72px, 8vw, 112px);
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 4.6vw, 64px);
  color: var(--ink);
  background-color: var(--gold-soft);
  background-image:
    radial-gradient(circle at var(--gx, 16%) 50%, rgba(255, 253, 248, .95) 0, rgba(255, 253, 248, 0) 34%),
    var(--paper-noise),
    linear-gradient(120deg, var(--butter), var(--gold-soft));
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 12px 12px 0 #0A1226;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.matricula-seal { position: relative; width: 100%; max-width: 250px; justify-self: center; }
.matricula-seal__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(5px 6px 0 rgba(20, 33, 61, .9)); }
.matricula-seal__ring {
  transform-box: view-box;
  transform-origin: 120px 120px;
  animation: spin 38s linear infinite;
}
.matricula-seal__ringtext { font-family: var(--font-college); }
.matricula-seal__center {
  position: absolute; left: 0; top: 0;
  width: 100%;
  height: 82.76%;              /* 240 / 290 do viewBox */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1;
}
.matricula-seal__days {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3vw + 1rem, 3.5rem);
  line-height: .8;
  color: var(--ink);
  text-shadow: .05em .05em 0 var(--gold);
}
.matricula-seal__unit {
  margin-top: 4px;
  font-family: var(--font-college);
  font-size: clamp(.82rem, .4vw + .7rem, 1rem);
  letter-spacing: .22em;
  padding-left: .22em;
}
.matricula-seal__word {
  margin-top: 4px;
  font-family: var(--font-college);
  font-size: clamp(.64rem, .2vw + .58rem, .74rem);
  letter-spacing: .1em;
  padding-left: .1em;
  color: var(--orange-deep);
}
.matricula-guarantee__copy { min-width: 0; display: grid; justify-items: start; gap: 14px; justify-self: stretch; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.matricula-guarantee__eyebrow {
  font-size: .8rem;
  letter-spacing: .16em;
  padding: .45em .9em .4em;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--ink);
  line-height: 1;
}
.matricula-guarantee__title { max-width: 18ch; }
.matricula-guarantee__text {
  max-width: 50ch;
  font-size: clamp(1.04rem, .4vw + .94rem, 1.2rem);
  color: var(--ink-soft);
  font-weight: 500;
}
.matricula-guarantee__cta { margin-top: 6px; white-space: nowrap; max-width: 100%; padding-inline: 1.2em; font-size: clamp(.9rem, 5cqi, 1.16rem); }
.matricula-guarantee__cta .matricula-cta__text { white-space: nowrap; }

/* ---------- Tablet: ficha mais estreita, carteirinha embaixo, dentro da ficha ---------- */
@media (max-width: 1179.98px) {
  .matricula-card { width: 100%; }
  .matricula-id { max-width: 360px; padding-top: 26px; }
  .matricula-id::before {
    content: "";
    position: absolute; top: 0; left: 50%;
    width: min(560px, 150%); translate: -50% 0;
    border-top: 1.5px dashed rgba(20, 33, 61, .22);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 659.98px) {
  .matricula-card { padding: 18px 16px 22px; box-shadow: 8px 8px 0 var(--gold); border-radius: 22px; }
  .matricula-card::before { inset: 6px; border-radius: 16px; }
  .matricula-card__form { display: none; }
  .matricula-card__status { padding-top: 14px; }
  .matricula-card__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "fee" "get" "id";
    margin-top: 14px;
  }
  .matricula-fee { padding-inline: 12px; }
  .matricula-fee__price { font-size: clamp(3.2rem, 15vw, 4rem); }
  .matricula-get { padding-inline: 4px; }
  .matricula-id { max-width: 320px; }
  .matricula-id::before { width: 100%; }
  .matricula-id__body { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .matricula-id__sticker { font-size: .66rem; letter-spacing: .08em; }

  .matricula-guarantee {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    --gx: 50%;
    background-image:
      radial-gradient(circle at 50% 20%, rgba(255, 253, 248, .95) 0, rgba(255, 253, 248, 0) 46%),
      var(--paper-noise),
      linear-gradient(180deg, var(--butter), var(--gold-soft));
    padding: 28px 18px 30px;
    box-shadow: 8px 8px 0 #0A1226;
  }
  .matricula-seal { max-width: 200px; }
  .matricula-guarantee__copy { justify-items: center; }
  .matricula-guarantee__cta { width: 100%; }
}
@media (max-width: 380px) {
  .matricula-stamp { font-size: .82rem; letter-spacing: .08em; }
}

/* ---------- Movimento reduzido / estático: tudo carimbado e desenhado ---------- */
@media (prefers-reduced-motion: reduce) {
  .matricula-seal__ring { animation: none; }
}
.reduce-motion .matricula-stamp, .static-mode .matricula-stamp { opacity: .9; transform: rotate(-5deg); animation: none; }
.reduce-motion .matricula-check__tick, .static-mode .matricula-check__tick { stroke-dashoffset: 0; }

/* aviso exibido só quando config.checkoutUrl está vazio (ver 08-matricula.js) */
.matricula-pending {
  margin-top: 10px;
  padding: .55em .9em .5em;
  font-family: var(--font-college);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
}
.matricula-pending:empty { display: none; }

/* ===== Transparência: ferramentas de IA pagas à parte ===== */
.matricula-sup { font-size: .7em; vertical-align: super; line-height: 0; margin-left: 2px; }
.matricula-sup a { color: var(--orange-deep); text-decoration: none; font-weight: 800; padding: 0 2px; }
.matricula-tools {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
  margin-top: clamp(56px, 6vw, 80px);
  padding: clamp(26px, 3.2vw, 40px) clamp(22px, 4vw, 52px);
  color: var(--ink);
  text-align: left;
  background: var(--white);
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 10px 10px 0 var(--gold);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.matricula-tools__head { display: grid; gap: 12px; min-width: 0; }
.matricula-tools__kicker { font-size: .74rem; letter-spacing: .14em; color: var(--orange-deep); }
.matricula-tools__title { color: var(--ink); max-width: 22ch; }
.matricula-tools__text { color: var(--ink-soft); font-size: clamp(.98rem, .3vw + .9rem, 1.08rem); line-height: 1.55; }
.matricula-tools__text strong { color: var(--ink); }
.matricula-tools__list { display: grid; gap: 12px; min-width: 0; }
.matricula-tools__list li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-size: .95rem; color: var(--ink-soft); line-height: 1.4;
}
.matricula-tools__list strong {
  display: block; margin-bottom: 2px;
  font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink);
}
.matricula-tools__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink);
}
.matricula-tools__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .matricula-tools { grid-template-columns: minmax(0, 1fr); box-shadow: 8px 8px 0 var(--gold); }
}


/* ===== css/sections/09-faq.css ===== */
/* =====================================================================
   09 — FAQ / SECRETARIA DA UNIVERSITY
   Cada pergunta é uma senha de atendimento (ticket creme com canhoto
   picotado). Ao lado, o balcão da Secretaria Acadêmica com o atendente
   e o painel "Atendendo agora".
   ===================================================================== */

.faq {
  interpolate-size: allow-keywords;   /* abre/fecha suave do <details> */
  background-image: radial-gradient(rgba(20, 33, 61, .07) 1.2px, transparent 1.6px);
  background-size: 24px 24px;
}

/* ---------- Cabeçalho ---------- */
.faq-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  text-align: center;
}
.faq-lead { max-width: 46ch; color: var(--ink-soft); font-size: clamp(1.02rem, .5vw + .9rem, 1.2rem); }

/* ---------- Layout ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 60px);
}
.faq-queue { min-width: 0; }
.faq-side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 22px;
  min-width: 0;
}

/* ---------- Tickets ---------- */
.faq-list { display: grid; gap: 14px; }
.faq-ticket {
  --stub-w: 92px;
  position: relative;
  background:
    repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 12px) var(--stub-w) 0 / 2px 100% no-repeat,
    linear-gradient(90deg, var(--stub, var(--butter)) 0 var(--stub-w), var(--white) var(--stub-w));
  background-color: var(--white);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: clip;
  overflow-clip-margin: border-box;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* picote: meia-lua em cima e embaixo, na linha do canhoto */
.faq-ticket::before,
.faq-ticket::after {
  content: "";
  position: absolute;
  left: calc(var(--stub-w) - 9px);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper-2);
  border: var(--line) solid var(--ink);
  z-index: 2;
  pointer-events: none;
}
.faq-ticket::before { top: -12px; }
.faq-ticket::after { bottom: -12px; }

.faq-ticket:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.faq-ticket[open] { box-shadow: 6px 6px 0 var(--ink); }

.faq-ticket__sum {
  display: grid;
  grid-template-columns: var(--stub-w) minmax(0, 1fr) auto;
  align-items: center;
  min-height: 74px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.faq-ticket__sum::-webkit-details-marker { display: none; }
.faq-ticket__sum::marker { content: ""; }
.faq-ticket__sum:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }

.faq-ticket__stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-self: stretch;
  padding: 10px 4px;
  line-height: 1;
}
.faq-ticket__senha {
  font-family: var(--font-college);
  font-size: .6rem;
  letter-spacing: .2em;
  padding-left: .2em;
  color: var(--ink-soft);
}
.faq-ticket__num {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ink);
  transition: color var(--dur-fast) linear, transform var(--dur) var(--ease-pop);
}
.faq-ticket[open] .faq-ticket__num { color: var(--orange-deep); transform: rotate(-6deg) scale(1.06); }

.faq-ticket__q {
  padding: 16px 12px 16px 24px;
  font-weight: 750;
  font-size: clamp(.98rem, .35vw + .88rem, 1.1rem);
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.faq-ticket__toggle {
  position: relative;
  width: 36px; height: 36px;
  margin-right: 18px;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform var(--dur) var(--ease-pop), background-color var(--dur-fast) linear;
}
.faq-ticket__toggle::before,
.faq-ticket__toggle::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2.6px;
  margin: -1.3px 0 0 -7px;
  background: var(--ink);
  border-radius: 2px;
}
.faq-ticket__toggle::after { transform: rotate(90deg); }
.faq-ticket__sum:hover .faq-ticket__toggle { background: var(--gold-soft); }
.faq-ticket[open] .faq-ticket__toggle { transform: rotate(135deg); background: var(--orange); }
.faq-ticket[open] .faq-ticket__toggle::before,
.faq-ticket[open] .faq-ticket__toggle::after { background: var(--white); }

.faq-ticket::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete;
}
.faq-ticket[open]::details-content { block-size: auto; }

.faq-ticket__a {
  padding: 0 28px 22px calc(var(--stub-w) + 24px);
  color: var(--ink-soft);
  font-size: clamp(1rem, .3vw + .93rem, 1.08rem);
  line-height: 1.55;
}
.faq-ticket__a p {
  max-width: 60ch;
  padding-top: 14px;
  border-top: 1.5px dashed rgba(20, 33, 61, .22);
}

/* ---------- Balcão da secretaria ---------- */
.faq-desk {
  position: relative;
  text-align: center;
  background-color: var(--white);
  background-image: var(--paper-noise);
  border: var(--line-thick) solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow-hard);
  padding-bottom: 24px;
}
.faq-desk__sign {
  margin: -1px -1px 0;
  padding: 13px 14px 11px;
  font-family: var(--font-college);
  font-size: .82rem;
  letter-spacing: .2em;
  color: var(--gold-soft);
  background: var(--ink);
  border-radius: 18px 18px 0 0;
  line-height: 1.1;
}
.faq-desk__now {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: 16px 18px 0;
  padding: 10px 14px;
  background: #0E1830;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.faq-desk__now-label {
  font-family: var(--font-college);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 245, 232, .72);
  text-align: left;
  line-height: 1.2;
}
.faq-desk__now-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: #FF7A4F;
  text-shadow: 0 0 10px rgba(242, 85, 44, .65);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.faq-desk__now-pre { font-size: .62em; letter-spacing: .06em; }
.faq-desk__now-val { display: inline-block; min-width: 2ch; }
.faq-desk__now-val.is-flip { animation: faq-flip .4s var(--ease-pop); }
@keyframes faq-flip {
  0% { transform: translateY(-40%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.faq-desk__clerk {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 22px 20px 0;
}
.faq-desk__photo {
  display: block;
  width: 118px; height: 118px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mint);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 6px var(--gold), 0 0 0 8.5px var(--ink), 6px 7px 0 8.5px rgba(20, 33, 61, .9);
}
.faq-desk__photo img { width: 100%; height: 100%; object-fit: cover; }
.faq-desk__balloon { max-width: 24ch; margin-top: 4px; }
.faq-desk__balloon.balloon--tail-top::after { left: calc(50% - 8px); }

/* ---------- Ajuda + CTA ---------- */
.faq-help { display: grid; gap: 16px; }
.faq-help__support {
  display: flex; align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  font-family: var(--font-college);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  text-decoration: none;
  color: var(--ink);
  border: 2px dashed rgba(20, 33, 61, .5);
  border-radius: 14px;
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.faq-help__support svg { width: 28px; height: 28px; flex: none; }
.faq-help__support:hover { background: var(--white); border-color: var(--ink); }
.faq-help__support:hover .btn__arrow { transform: translateX(4px); }
.faq-help__buy { display: grid; justify-items: center; gap: 8px; text-align: center; }
.faq-help__cta { width: 100%; white-space: normal; }
.faq-help__price { font-family: var(--font-college); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.faq-help__price > span { white-space: nowrap; }
.faq-help__support-text { display: grid; gap: 2px; }
.faq-help__support-pre { font-size: .9em; color: var(--ink-soft); }
.faq-help__support-go { color: var(--ink); }
.faq-help__price strong { color: var(--ink); font-weight: 400; }

/* ---------- Tablet / mobile: balcão compacto antes das senhas ---------- */
@media (max-width: 959.98px) {
  .faq-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .faq-side { display: contents; }
  .faq-desk { order: -1; display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; }
  .faq-queue { order: 0; }
  .faq-help { order: 1; }
  .faq-desk__clerk {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 22px;
    padding: 18px 18px 0;
  }
  .faq-desk__photo { width: 84px; height: 84px; box-shadow: 0 0 0 5px var(--gold), 0 0 0 7.5px var(--ink); margin: 8px; }
  .faq-desk__balloon { margin-top: 0; max-width: 34ch; }
  .faq-desk__balloon.balloon--tail-top::after { left: -10px; top: 50%; margin-top: -8px; transform: rotate(135deg); }
  .faq-desk { padding-bottom: 18px; }
  .faq-help { justify-items: stretch; }
  .faq-help__buy { justify-items: center; }
  .faq-help__cta { width: auto; }
}
@media (max-width: 599.98px) {
  .faq-ticket { --stub-w: 66px; }
  .faq-ticket__num { font-size: 1.5rem; }
  .faq-ticket__senha { font-size: .5rem; letter-spacing: .14em; }
  .faq-ticket__q { padding: 14px 8px 14px 16px; font-size: .92rem; letter-spacing: .01em; }
  .faq-ticket__toggle { width: 32px; height: 32px; margin-right: 12px; }
  .faq-ticket__a { padding: 0 18px 18px calc(var(--stub-w) + 16px); }
  .faq-desk__now { margin-inline: 14px; }
  .faq-desk__clerk { padding-inline: 14px; gap: 18px; }
  .faq-desk__photo { width: 72px; height: 72px; }
  .faq-desk__balloon { font-size: .98rem; }
  .faq-help__cta { width: 100%; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-ticket::details-content { transition: none; }
}
.reduce-motion .faq-ticket::details-content { transition: none; }

/* link de suporte ainda não configurado (supportUrl = "#" em config.js): não exibir link morto */
.faq-help__support[href="#"],
.faq-help__support[href=""] { display: none; }
/* CTA de compra: alvo de toque confortável */
.faq-help__cta { min-height: 48px; }


/* ===== css/sections/10-final.css ===== */
/* =====================================================================
   10 — FINAL: fundo de estúdio fotográfico (fecha a página como a capa
   abriu). Foto da turma no centro, apoiada num púlpito navy; cada
   retrato reage ao mouse e ao toque (sobe, anel dourado em volta do rosto
   e o número "Nº 0X"). Os retratos são decorativos (sem paradas de Tab);
   a vaga aberta é um link para a matrícula. Depois, headline e o CTA.
   ===================================================================== */

.final {
  --light-y: 34%;
  padding-block: clamp(84px, 9vw, 128px) clamp(104px, 10vw, 148px);
  text-align: center;
}

.final-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.final-eyebrow { margin-bottom: clamp(30px, 4vw, 46px); }

/* ---------- Foto da turma ---------- */
.final-class {
  width: 100%;
  max-width: 1000px;
  display: flex; flex-direction: column; align-items: center;
}
.final-row {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: clamp(16px, 2.4vw, 30px);
  padding-inline: clamp(8px, 2vw, 24px);
}
.final-mate { min-width: 0; }

/* moldura que envolve o retrato (mouse/toque) */
.final-mate__btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  border-radius: var(--radius);
  translate: 0 0;
  transition: translate var(--dur) var(--ease-pop);
  -webkit-tap-highlight-color: transparent;
}
.final-mate__card {
  margin: 0;
  --photo-ratio: 4 / 5;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.final-mate__card > img { transition: filter var(--dur) var(--ease-out); }

/* anel dourado em volta do rosto — mesmo desenho do anel da capa
   (posição e diâmetro calculados no JS a partir de data-face) */
.final-mate__ring {
  position: absolute;
  left: var(--ring-x, 50%);
  top: var(--ring-y, 40%);
  width: var(--ring-d, 46%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 4px solid var(--gold);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--ink),
    inset 0 0 0 2px rgba(20, 33, 61, .55),
    0 10px 24px -8px rgba(20, 33, 61, .45);
  opacity: 0;
  scale: .8;
  transition: opacity .25s var(--ease-out), scale .4s var(--ease-pop);
  pointer-events: none;
  z-index: 2;
}

/* número que salta no canto */
.final-mate__num {
  position: absolute;
  top: -16px; right: -10px;
  z-index: 3;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  font-family: var(--font-college);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 3px 0 var(--ink);
  opacity: 0;
  scale: .4;
  rotate: -14deg;
  transition: opacity .2s var(--ease-out), scale .45s var(--ease-pop), rotate .45s var(--ease-pop);
  pointer-events: none;
}

/* estado ativo (hover, foco ou toque — o JS aplica .is-on) */
.final-mate.is-on .final-mate__btn { translate: 0 -12px; }
.final-mate.is-on .final-mate__card { transform: rotate(0deg); box-shadow: 8px 10px 0 var(--ink); }
.final-mate.is-on .final-mate__ring { opacity: 1; scale: 1; }
.final-mate.is-on .final-mate__num { opacity: 1; scale: 1; rotate: 8deg; }
/* os outros recuam um pouco — o holofote fica no escolhido */
.final-row.has-on .final-mate:not(.is-on) .final-mate__card > img { filter: saturate(.75) brightness(.9); }

/* vaga aberta */
.final-vaga {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 4 / 5;
  color: var(--ink);
  text-decoration: none;
  background: repeating-linear-gradient(135deg, var(--white) 0 12px, #FFF4EC 12px 24px);
  border: 3px dashed var(--orange-deep);
  border-radius: var(--radius);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur) var(--ease-out), border-color var(--dur-fast) linear;
}
.final-vaga::before {
  content: "";
  position: absolute; inset: -10px;
  border: 2.5px solid var(--gold);
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  animation: final-pulse 3.2s var(--ease-out) infinite;
}
@keyframes final-pulse {
  0% { opacity: .8; transform: scale(.95); }
  70%, 100% { opacity: 0; transform: scale(1.05); }
}
.final-vaga__window {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px;
  min-height: 0;
}
.final-vaga__plus {
  display: grid; place-items: center;
  width: clamp(44px, 4.6vw, 58px); height: clamp(44px, 4.6vw, 58px);
  margin-bottom: 8px;
  color: var(--white);
  background: var(--orange);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--dur) var(--ease-pop);
}
.final-vaga__plus svg { width: 55%; height: 55%; }
.final-vaga__title {
  font-family: var(--font-college);
  font-size: clamp(.74rem, .5vw + .58rem, .95rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.final-vaga__you {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.1vw + .7rem, 1.55rem);
  text-transform: uppercase;
  color: var(--orange-deep);
  line-height: 1;
}
.final-vaga__tag {
  display: block;
  padding: .8em .6em .74em;
  font-family: var(--font-college);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--orange-deep);
  border-top: 3px dashed var(--orange-deep);
}
.final-vaga:hover,
.final-vaga:focus-visible { transform: rotate(0deg) translateY(-12px); border-style: solid; box-shadow: 8px 10px 0 var(--ink); }
.final-vaga:hover .final-vaga__plus,
.final-vaga:focus-visible .final-vaga__plus { transform: rotate(90deg) scale(1.08); }
.final-vaga:hover .final-vaga__tag,
.final-vaga:focus-visible .final-vaga__tag { border-top-style: solid; }
/* o botão principal também "acende" a vaga */
.final:has(.final-cta:hover, .final-cta:focus-visible) .final-vaga { border-style: solid; background: var(--white); }

/* púlpito navy (eco da faixa da capa) */
.final-podium {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 18px;
  padding: 12px 18px 11px;
  font-family: var(--font-college);
  font-size: .86rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gold-soft);
  background: var(--navy);
  border: 3px solid var(--ink);
  border-top: 4px solid var(--gold);
  border-radius: 6px 6px 16px 16px;
  box-shadow: 0 8px 0 var(--ink), 0 22px 30px -12px rgba(60, 40, 10, .45);
}

/* ---------- Texto ---------- */
.final-title {
  margin-top: clamp(44px, 5vw, 64px);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.final-title__line { display: block; }
.final-sub {
  max-width: 46ch;
  margin-top: 20px;
  font-size: clamp(1.06rem, .6vw + .9rem, 1.3rem);
  font-weight: 550;
  color: var(--ink-soft);
}

/* ---------- CTA ---------- */
.final-action { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 34px; max-width: 100%; }
.final-cta {
  min-height: 80px;
  max-width: 100%;
  padding: 1.05em 2.4em 1em;
  font-size: clamp(1.15rem, 1.4vw + .7rem, 1.75rem);
  --btn-shadow: 7px;
  white-space: normal;
}
.final-cta__text { text-wrap: balance; }
.final-price {
  display: inline-block;
  padding: .62em 1.2em .56em;
  font-family: var(--font-college);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 253, 248, .86);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  line-height: 1.35;
}
.final-price strong { font-weight: 400; color: var(--orange-deep); }
.final-price__part { white-space: nowrap; }   /* quebra só no "·" */

.final-edge { bottom: -1px; transform: scaleY(-1); }

/* ---------- Tablet ---------- */
@media (max-width: 899.98px) {
  .final-row { gap: 16px; padding-inline: 4px; }
  .final-mate__num { width: 48px; height: 48px; font-size: .66rem; top: -14px; right: -8px; }
  .final-vaga__tag { font-size: .62rem; letter-spacing: .06em; }
  .final-mate__card .photo-card__tag { font-size: .62rem; letter-spacing: .06em; }
}

/* ---------- Mobile ---------- */
@media (max-width: 659.98px) {
  .final-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; padding-inline: 8px; }
  .final-podium { font-size: .62rem; letter-spacing: .1em; padding: 10px 8px 9px; margin-top: 16px; }
  .final-title { font-size: clamp(1.75rem, 8.6vw, 2.9rem); line-height: 1.04; }
  .final-cta { width: 100%; padding-inline: 1.1em; min-height: 72px; }
  .final-price { font-size: .68rem; letter-spacing: .08em; border-radius: 18px; }
}

/* ---------- Celulares estreitos: legendas inteiras numa linha ---------- */
@media (max-width: 419.98px) {
  .final-row { gap: 24px 14px; padding-inline: 4px; }
  .final-mate__card .photo-card__tag,
  .final-vaga__tag { font-size: .58rem; letter-spacing: .03em; padding-inline: .3em; }
  .final-vaga__you { font-size: 1.15rem; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .final-vaga::before { animation: none; opacity: 0; }
}
.reduce-motion .final-vaga::before { animation: none; opacity: 0; }


/* ===== css/sections/99-footer.css ===== */
/* =====================================================================
   99 — RODAPÉ: marinho, institucional. Brasão + nome + assinatura,
   links em versalete, linha fina dourada e copyright.
   Reserva espaço para a barra fixa do guia (--guidebar-h) e cobre o
   padding-bottom que o body já reserva, para o marinho ir até o fim.
   ===================================================================== */
.site-footer {
  position: relative;
  color: rgba(251, 245, 232, .82);
  background: var(--navy);
  padding: 52px 0 calc(36px + var(--guidebar-h));
  margin-bottom: calc(var(--guidebar-h) * -1);
  font-size: .95rem;
}
.footer-inner { display: grid; gap: 30px; }
.footer-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px 48px;
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  color: var(--paper);
  text-decoration: none;
}
.footer-crest { width: 46px; height: auto; flex: none; }
.footer-brand__text { display: grid; gap: 6px; }
.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.footer-brand__tag {
  font-family: var(--font-college);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.2;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 2px 4px;
}
.footer-links a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: inherit;
  font-family: var(--font-college);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  transition: color var(--dur-fast) linear;
}
.footer-links a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px;
  padding-top: 22px;
  border-top: 1.5px solid rgba(232, 181, 58, .35);
  font-family: var(--font-college);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251, 245, 232, .62);
}

.footer-copy__sym { font-family: var(--font-body); font-size: 1.15em; letter-spacing: 0; }

@media (max-width: 1023.98px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; }
  .footer-brand { flex-direction: column; gap: 10px; }
  .footer-links { justify-content: center; max-width: 560px; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
}

/* quebra só no "·" (nunca "7 / DIAS" sozinho) */
.footer-note__part { white-space: nowrap; }
/* links ainda não configurados em config.js (valor "#"): não exibir links mortos */
.footer-links li:has(> a[href="#"]),
.footer-links li:has(> a[href=""]) { display: none; }