/* Ever Designer · Landing page
   Seções, na ordem do wireframe: Hero · Posicionamento · Projetos · Serviços ·
   Diferencial · Sobre · Processo · CTA final · Rodapé. */

/* ---------- Luz ambiente (reaproveitada em Hero e CTA) ---------- */
.glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-primary-muted), transparent);
}
.arc {
  position: absolute; pointer-events: none; border-radius: 50%;
  border: 1px solid var(--color-primary-text);
  box-shadow: 0 0 var(--space-30) var(--space-2) var(--color-primary-muted), inset 0 0 var(--space-30) var(--color-primary-muted);
}
.gridlines {
  position: absolute; inset: 0 var(--page-margin); pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--gutter);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 60%, transparent);
}
.gridlines span { border-inline: 1px solid var(--color-editorial); }
.gridlines span:nth-child(n + 5) { display: none; }
@media (min-width: 768px) { .gridlines span:nth-child(n + 5) { display: block; } .gridlines span:nth-child(n + 9) { display: none; } }
@media (min-width: 1024px) { .gridlines span:nth-child(n + 9) { display: block; } }

/* ============ 01 · HERO ============ */
.hero {
  position: relative; overflow: clip;
  padding-block: var(--space-40) var(--space-20);
}
.hero__light { position: absolute; inset: 0; pointer-events: none; }
.hero__light .glow--a { width: 1100px; height: 1100px; top: -520px; right: -380px; }
.hero__light .glow--b { width: 720px; height: 720px; top: 22%; left: -420px; opacity: 0.45; }
.hero__grid { position: relative; align-items: end; row-gap: var(--space-16); }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding-bottom: var(--space-4); }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-logo-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title b { font-weight: var(--fw-bold); color: var(--color-white); }
.hero__sub { display: flex; flex-direction: column; gap: var(--space-8); }
.hero__sub p { color: var(--color-text-secondary); max-width: 46ch; }

/* Crachá e linhas: ver bloco "HERO · CRACHÁ" no fim deste arquivo */

.hero__services {
  position: relative; list-style: none;
  margin-top: var(--space-20);
}
.hero__services a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-4); border-top: var(--border-strong);
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); letter-spacing: var(--ls-heading);
  color: var(--color-text-secondary);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.hero__services a > span { display: flex; align-items: baseline; gap: var(--space-4); }
.hero__services .spec { font-family: var(--font-body); }
.hero__services .lucide { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.hero__services a:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.hero__services a:hover .lucide { color: var(--color-text-primary); animation: arrow-se var(--dur-arrow) var(--ease-standard); }

@media (max-width: 1023px) {
  .hero { padding-top: var(--space-40); }
  .hero__services { margin-top: var(--space-16); }
  .hero__services a { font-size: var(--fs-body-lg); }
}
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--space-30) + var(--space-4)); padding-bottom: var(--space-12); }
  .hero__light .glow--a { width: 640px; height: 640px; top: -300px; right: -320px; }
  .hero__content { gap: var(--space-6); }
  .hero__sub .row .btn { width: 100%; }
  .hero__grid { row-gap: var(--space-12); }
  .hero__services { margin-top: var(--space-12); row-gap: 0; }
  .hero__services a { padding-block: var(--space-4); }
  .hero__services li:last-child a { border-bottom: var(--border-strong); }
}

/* ============ 02 · POSICIONAMENTO ============ */
.positioning__head { row-gap: var(--space-8); align-items: start; }
.positioning__head .sh__meta { padding-top: var(--space-4); }
.positioning__title { font-size: var(--fs-logo-md); line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
.positioning__title .dim { display: block; color: var(--color-text-muted); }
.positioning__body { margin-top: var(--space-24); align-items: start; row-gap: var(--space-12); }

.touchpoints { list-style: none; position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-8); --p: 1; }
.touchpoints::before,
.touchpoints__beam {
  position: absolute; left: var(--space-2); top: var(--space-4); bottom: var(--space-4); width: 1px;
}
.touchpoints::before { content: ""; background: linear-gradient(var(--color-border), var(--color-border-hover)); }
.touchpoints li:not(.touchpoints__beam) { position: relative; display: flex; }
.touchpoints li:not(.touchpoints__beam)::before {
  content: ""; position: absolute; left: calc(var(--space-6) * -1 - 4px); top: 50%; width: var(--space-4); height: 1px;
  background: var(--color-border-strong);
  transition: background-color var(--dur-slow) var(--ease-standard);
}
.touchpoints li:last-child { margin-top: var(--space-4); }
.touchpoints li:last-child::after {
  content: ""; position: absolute; left: calc(var(--space-6) * -1 - 3px); top: calc(50% - 3px);
  width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-text-disabled);
  transition: background-color var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}

/* Luz azul que desce pela linha conforme a rolagem (main.js atualiza --p de 0 a 1)
   e acende cada badge quando passa por ele (.is-lit) */
.touchpoints__beam::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--color-primary-muted), var(--color-primary-text));
  transform: scaleY(var(--p)); transform-origin: 50% 0;
}
.touchpoints__beam::after {
  content: ""; position: absolute; left: -3px; top: calc(var(--p) * 100% - 3px);
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--color-primary-text);
  box-shadow: 0 0 var(--space-3) var(--space-1) var(--color-primary-muted);
  opacity: min(1, calc(var(--p) * 12));
}
.touchpoints .pill { transition: border-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard), background-color var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard); }
.touchpoints li.is-lit::before { background: var(--color-primary-text); }
.touchpoints li.is-lit .pill--outline { border-color: var(--color-primary-text); color: var(--color-text-primary); box-shadow: 0 0 var(--space-4) var(--color-primary-muted); }
.touchpoints li.is-lit:last-child::after { background: var(--color-primary-text); box-shadow: 0 0 var(--space-3) var(--space-1) var(--color-primary-muted); }
/* "Percepção" só fica clara quando a luz chega nela */
.js .touchpoints li:not(.is-lit) .pill--light { background: transparent; border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.touchpoints li.is-lit .pill--light { box-shadow: 0 0 var(--space-5) var(--color-primary-muted); }
.positioning .prose { font-size: var(--fs-body-lg); }
.positioning .prose .lead { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-ui); letter-spacing: var(--ls-heading); }

/* ============ 03 · PROJETOS ============ */
.projects .sh { row-gap: var(--space-8); }
.projects__intro { display: flex; flex-direction: column; gap: var(--space-6); }
.projects__intro .body-lg { max-width: 44ch; }
.projects__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-block: var(--space-16) var(--space-8);
}
.projects__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.projects-grid { row-gap: var(--gutter); }
.projects__more { display: flex; justify-content: center; margin-top: var(--space-16); }
@media (max-width: 767px) {
  .projects__bar { margin-block: var(--space-12) var(--space-6); }
  .projects__more .btn { width: 100%; }
}

/* ============ 04 · SERVIÇOS ============ */
.services__grid { align-items: start; row-gap: var(--space-12); }
.services__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.services__intro .sh__desc { margin-bottom: var(--space-2); }
@media (min-width: 1024px) {
  .services__intro { position: sticky; top: var(--space-30); }
}
.services__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.service {
  display: grid; grid-template-columns: var(--space-16) minmax(0, 1fr) auto; gap: var(--space-6);
  padding: var(--space-8);
}
.service__num {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: 1;
  color: var(--color-text-disabled); font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-standard);
}
.service__body { display: flex; flex-direction: column; gap: var(--space-3); }
.service__lead { font-size: var(--fs-body-lg); line-height: var(--lh-ui); color: var(--color-text-primary); font-weight: var(--fw-medium); max-width: 34ch; padding-top: var(--space-2); }
.service__desc { max-width: 52ch; }
.service__thumb {
  width: 112px; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-bg-tertiary); align-self: start;
  transform: rotate(2deg);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.service__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.72; transition: filter var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard); }
.service:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.service:hover .service__num { color: var(--color-primary-text); }
.service:hover .service__thumb { transform: rotate(0deg) scale(1.04); }
.service:hover .service__thumb img { filter: none; opacity: 1; }
@media (max-width: 767px) {
  .service { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6); }
  .service__thumb { display: none; }
}

/* ============ 05 · DIFERENCIAL ============ */
.approach { overflow: clip; }
.bgword {
  position: absolute; top: var(--space-16); right: calc(var(--page-margin) * -0.5);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-mega);
  line-height: 0.8; letter-spacing: var(--ls-display);
  color: var(--color-editorial); white-space: nowrap; pointer-events: none; user-select: none;
}
.approach__head { align-items: end; row-gap: var(--space-10); }
.approach__title { font-size: var(--fs-logo-md); line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
.approach__title span { color: var(--color-text-muted); }
.approach__quote {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-ui);
  color: var(--color-text-primary); padding-left: var(--space-4); border-left: 2px solid var(--color-primary-text);
}
.steps {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: var(--space-20);
  padding: var(--space-12) var(--space-10) var(--space-10);
  border-radius: var(--radius-lg); border: var(--border-hairline);
  background: linear-gradient(180deg, var(--color-bg-secondary), var(--color-bg));
}
/* Linha azul do Diferencial: acompanha a rolagem no desktop (horizontal) e no celular (vertical).
   main.js atualiza --p (0 → 1) e marca .is-lit nos pontos alcançados. Tablet (2×2) não tem linha. */
.steps {
  --p: 0;
  --col: calc((100% - var(--space-10) * 2 - var(--gutter) * 3) / 4);
}
.steps__line {
  position: absolute; top: calc(var(--space-12) + 5px); height: 1px;
  left: calc(var(--space-10) + 5px);
  right: calc(var(--space-10) + var(--col) - 6px);
  background: var(--color-border);
}
.steps__line::after {
  content: ""; position: absolute; inset: -0.5px 0;
  background: linear-gradient(90deg, var(--color-primary-muted), var(--color-primary-text));
  transform: scaleX(var(--p)); transform-origin: 0 50%;
}
.steps__line::before {
  content: ""; position: absolute; z-index: 2; top: -3px; left: calc(var(--p) * 100% - 3px);
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--color-primary-text);
  box-shadow: 0 0 var(--space-3) var(--space-1) var(--color-primary-muted);
  opacity: min(1, calc(var(--p) * 12));
}
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-10); }
.step::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 11px; height: 11px; border-radius: var(--radius-pill);
  background: var(--color-bg); border: 1px solid var(--color-border-hover);
  transition: background-color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.step.is-lit::before { background: var(--color-primary-text); border-color: var(--color-primary-text); }
@media (min-width: 768px) and (max-width: 1023px) {
  .step:last-child::before { background: var(--color-primary-text); border-color: var(--color-primary-text); }
}
.step p { max-width: 28ch; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-10); }
  .steps__line { display: none; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-6); row-gap: var(--space-8); margin-top: var(--space-12); }
  .step { padding: 0 0 0 var(--space-8); }
  .step::before { top: 6px; z-index: 1; }

  /* Celular: a mesma linha, na vertical (main.js define topo e altura do 1º ao último ponto) */
  .steps__line { display: block; left: calc(var(--space-6) + 5px); right: auto; width: 1px; }
  .steps__line::after {
    inset: 0 -0.5px;
    background: linear-gradient(var(--color-primary-muted), var(--color-primary-text));
    transform: scaleY(var(--p)); transform-origin: 50% 0;
  }
  .steps__line::before { top: calc(var(--p) * 100% - 3px); left: -3px; }
}

/* ============ 06 · SOBRE ============ */
.about__grid { align-items: center; row-gap: var(--space-12); }
.about__photo {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-surface-light);
}
.about__photo img { width: 100%; height: 108%; object-fit: cover; object-position: 50% 0; will-change: transform; }
.corner { position: absolute; }
.corner--tl { top: var(--space-5); left: var(--space-5); }
.corner--br { bottom: var(--space-5); right: var(--space-5); text-align: right; }
.about__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
/* Desktop: a foto acompanha a altura do texto — topo alinhado ao rótulo "06 Sobre", base ao botão */
@media (min-width: 1024px) {
  .about__grid { align-items: stretch; }
  .about__photo { aspect-ratio: auto; height: 100%; min-height: 480px; }
}
.about__close { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-8); border-top: var(--border-hairline); width: 100%; }
.about__close .h3 { max-width: 20ch; }
@media (max-width: 1023px) {
  .about__photo { max-width: 560px; }
}

/* ============ 07 · PROCESSO ============ */
.process__head { align-items: start; row-gap: var(--space-8); }
.process__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.process__steps { list-style: none; margin-top: var(--space-20); align-items: end; }
.process__step { justify-content: space-between; min-height: 340px; gap: var(--space-12); }
.process__step:nth-child(1) { margin-bottom: var(--space-24); }
.process__step:nth-child(2) { margin-bottom: var(--space-12); }
.process__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.process__num {
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-logo-lg);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--color-text-disabled);
  font-variant-numeric: tabular-nums;
}
.process__step .lucide { color: var(--color-text-muted); }
.card--blue .process__num { color: var(--color-text-on-primary-muted); }
.card--blue .lucide { color: var(--color-text-on-primary); }
.process__step .card__title { font-size: var(--fs-h3); }
@media (max-width: 1023px) {
  .process__step:nth-child(n) { margin-bottom: 0; min-height: 280px; }
}
@media (max-width: 767px) {
  .process__steps { margin-top: var(--space-12); row-gap: var(--space-3); }
  .process__step:nth-child(n) { min-height: 0; gap: var(--space-8); padding: var(--space-6); }
}

/* ============ 08 · CTA FINAL ============ */
.cta { padding-bottom: var(--space-16); }
.cta__box {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  padding: var(--space-30) var(--space-12) var(--space-30);
  text-align: center;
  border-radius: var(--radius-lg); border: var(--border-hairline);
  background: var(--color-bg-secondary);
}
.cta__box > .glow { z-index: -1; width: 1200px; height: 720px; left: 50%; bottom: -460px; transform: translateX(-50%); }
.cta__actions { position: relative; }
.cta__actions > .arc {
  /* Ancorado no botão: o topo do arco passa por trás do centro do botão, abaixo dos parágrafos */
  z-index: -1; width: 2400px; height: 2400px; left: 50%; top: 50%; transform: translateX(-50%); opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 14%);
  mask-image: linear-gradient(to bottom, #000, transparent 14%);
}
.cta__title { font-size: var(--fs-logo-md); line-height: var(--lh-heading); letter-spacing: var(--ls-display); max-width: 18ch; }
.cta__text { align-items: center; max-width: 60ch; }
.cta__mail { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; color: var(--color-text-secondary); }
.cta__address { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.cta__mail .btn--icon { width: var(--control-xs); height: var(--control-xs); }
@media (max-width: 767px) {
  .cta__box { padding: var(--space-20) var(--space-5) var(--space-24); align-items: stretch; text-align: left; }
  .cta__box > .pill { align-self: flex-start; }
  .cta__text { align-items: flex-start; }
  .cta__actions .btn { width: 100%; }
  .cta__mail { justify-content: flex-start; }
  .cta__box > .glow { width: 640px; height: 480px; bottom: -320px; }
  .cta__actions > .arc { width: 1400px; height: 1400px; }
}

/* ============ RODAPÉ ============ */
.footer { position: relative; overflow: clip; padding-top: var(--space-20); }
.footer__top { row-gap: var(--space-12); padding-bottom: var(--space-16); }
.footer__brand { font-size: var(--fs-h3); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a { color: var(--color-text-secondary); }
.footer__links a:hover { color: var(--color-text-primary); }
.footer__links .lucide { width: var(--icon-sm); height: var(--icon-sm); }
.footer__meta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-6); border-top: var(--border-hairline);
}
.footer__mark {
  display: flex; justify-content: center;
  margin-bottom: -0.2em;
  font-size: var(--fs-logo-xl);
  user-select: none; pointer-events: none;
}
.footer__mark .wordmark {
  background: linear-gradient(180deg, var(--color-border-strong), transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 1024px) {
  .footer__top > .footer__nav { grid-column: 8 / span 2; }
  .footer__top > .footer__social { grid-column: 10 / span 3; }
}
@media (max-width: 767px) {
  .footer__top > :is(.footer__nav, .footer__social) { grid-column: span 2; }
}

/* ============ 01 · HERO · LINHAS E CRACHÁ ============ */
/* Linhas onduladas que reagem ao cursor (desenhadas por hero.js) */
.hero__lines {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
  opacity: 0.6; /* linhas mais discretas, ainda visíveis em movimento */
}
.hero__lines path { fill: none; stroke: var(--color-border); stroke-width: 1; }

/* Crachá: fita + presilha + cartão. A fita sobe até o topo da hero e passa por trás da navbar. */
.hero__badge { display: flex; justify-content: center; align-self: end; }
.badge { position: relative; width: 100%; max-width: 400px; }
.badge__swing { display: flex; flex-direction: column; align-items: center; }

.badge__clip { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-bottom: -6px; }
.badge__strap {
  position: absolute; bottom: calc(100% - var(--space-4)); left: 50%; translate: -50% 0;
  width: 88px; height: 1600px; overflow: hidden;
  background: linear-gradient(90deg, var(--color-surface), var(--color-surface-hover) 50%, var(--color-surface));
  border-inline: 1px solid var(--color-border);
}
.badge__ring {
  width: 108px; height: var(--space-12);
  border: 5px solid var(--color-text-disabled); border-radius: var(--radius-xs);
  background: var(--color-surface-hover);
  box-shadow: inset 0 1px 0 var(--color-border-strong);
}
.badge__stem { width: var(--space-5); height: var(--space-8); margin-top: -2px; background: var(--color-text-disabled); border-radius: 0 0 3px 3px; }
.badge__bar { width: var(--space-24); height: var(--space-4); border-radius: var(--radius-pill); background: var(--color-ink-muted); box-shadow: 0 2px 6px var(--color-header); }

.badge__card {
  position: relative; width: 100%; margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-surface-light); color: var(--color-text-inverse);
  box-shadow: var(--shadow-soft);
}
.badge__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface); }
.badge__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.badge__panel { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-8) var(--space-6) var(--space-6); }
.badge__seal {
  position: absolute; top: calc(var(--space-6) * -1); left: var(--space-6);
  display: grid; place-items: center; width: var(--control-md); height: var(--control-md);
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-on-primary);
  box-shadow: 0 0 0 4px var(--color-surface-light);
}
.badge__seal .lucide { width: var(--icon-sm); height: var(--icon-sm); }
.badge__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.badge__name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.badge__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-ink-secondary); }
.badge__meta .dot { background: var(--color-primary); }
.badge__role { font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
.badge__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-inverse); }
.badge__mark { font-size: var(--fs-body-lg); color: var(--color-ink-secondary); }
.badge__qr-link { display: block; border-radius: var(--radius-xs); color: var(--color-text-inverse); transition: color var(--dur-base) var(--ease-standard); }
.badge__qr-link:hover { color: var(--color-primary); }
.badge__qr { display: block; width: 64px; height: 64px; }

/* Entrada (sempre que a página carrega, desktop e celular). Mesmos valores da referência Noirspace:
   o crachá (fita + cartão) surge 360px acima, girado e inclinado em 3D, e assenta em 1,5s.
   Depois fica estático. */
/* Começa pelo CSS assim que a página pinta (não espera o JavaScript): a foto do crachá
   é o maior elemento da tela, e esperar o JS atrasava o carregamento medido pelo Google. */
.intro-badge .badge { animation: badge-in 1.5s cubic-bezier(0.68, 0, 0.31, 0.91) 0.2s both; }
@keyframes badge-in {
  from { opacity: 0.001; transform: translateY(-360px) rotate(14deg) rotateX(43deg) rotateY(28deg); }
  to { opacity: 1; transform: none; }
}

/* Tablet e celular: crachá primeiro, alinhado ao texto. Só o crachá anima (queda);
   texto e linhas da hero ficam estáticos. */
@media (max-width: 1023px) {
  .hero__badge { order: -1; justify-content: flex-start; }
  .badge { max-width: 400px; }
  .js .hero [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero .dot--pulse, .hero .dot--pulse::after { animation: none; }
}
/* Celular: crachá na largura total do conteúdo, mesmas margens do texto */
@media (max-width: 767px) {
  .hero { padding-top: var(--space-24); }
  .hero__grid { row-gap: var(--space-10); }
  .badge__strap { width: 76px; }
  .badge__ring { width: 96px; height: 44px; }
  .badge__bar { width: 88px; }
  .badge { max-width: none; }
  .badge__photo { aspect-ratio: 5 / 4; }
  .badge__panel { padding: var(--space-8) var(--space-5) var(--space-5); }
  .badge__foot { align-items: center; margin-top: var(--space-4); padding-top: 0; border-top: 0; }
  .badge__qr { width: 48px; height: 48px; }
}