/* ===== Tokens globais — ajustar quando as referências chegarem ===== */
:root {
  /* Cores */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-accent: #000000;

  /* Tipografia */
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-serif-accent: 'Playfair Display', serif;

  /* Espaçamento */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Layout */
  --content-max: 1200px;
  --section-pad-x: clamp(1.25rem, 5vw, 5rem);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.1; }

/* ===== Seções ===== */
.secao {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: var(--section-pad-x);
}

/* ===== Animação por scroll ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Navegação lateral em barrinhas (fixa, à direita, centralizada na vertical) */
.side-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(20, 18, 18, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.side-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 14px;
  padding-left: 12px;
  outline: none;
}

.side-nav__bar {
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.25s ease, background 0.25s ease;
}
.side-nav__item:hover .side-nav__bar,
.side-nav__item:focus-visible .side-nav__bar {
  width: 22px;
  background: rgba(255, 255, 255, 0.85);
}
.side-nav__item[aria-current='true'] .side-nav__bar {
  width: 28px;
  background: #6b3bf8;
}
.side-nav__item:focus-visible .side-nav__bar { outline: 2px solid #d7ff00; outline-offset: 3px; }

/* Rótulo ao passar o mouse */
.side-nav__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(6px, -50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(20, 18, 18, 0.92);
  color: #fff;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.side-nav__item:hover .side-nav__label,
.side-nav__item:focus-visible .side-nav__label {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (max-width: 768px) {
  .side-nav { display: none; }
}

/* hero */
/* Hero — medidas do Figma (frame de 1935 × 1088).
   Tudo escala proporcionalmente com a largura da seção: 1 unidade = 1px do design. */
.hero {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #f0efe9; /* mesmo bege do fundo do vídeo, para ele se fundir à página */
  color: #141414;
  overflow: hidden;
}

.hero__canvas {
  --u: calc(100cqw / 1935);
  position: relative;
  height: calc(1088 * var(--u));
  display: flex;
  justify-content: center;
}

/* Duas colunas: texto à esquerda, card com o motion à direita */
.hero__inner {
  width: calc(1412.338 * var(--u));
  padding-top: calc(88.271 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(44.136 * var(--u));
}

/* Logo + título */
.hero__top {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(40 * var(--u));
  padding-bottom: calc(80 * var(--u));
}

.hero__logo {
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero__logo img {
  width: calc(35.403 * var(--u));
  height: calc(35.403 * var(--u));
}
.hero__logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}

.hero__title {
  width: calc(579.675 * var(--u) + 2 * 4.414 * var(--u));
  padding-inline: calc(4.414 * var(--u));
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: calc(-2.24 * var(--u));
  line-height: 0;
}
.hero__title-regular {
  font-size: calc(56 * var(--u));
  line-height: 1;
}
.hero__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: 1;
}

/* ===== Vídeo com o motion =====
   Sem moldura: o fundo do vídeo é o mesmo bege da seção. Ocupa 629,5 dos 684,1px da coluna,
   alinhado à esquerda, com a proporção do Figma (o vídeo quadrado é recortado no centro). */
.hero__media {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}

.hero__screen {
  width: calc(629.524 / 684.101 * 100%);
  aspect-ratio: 629.524 / 547.041;
  border-radius: 6.354% / 7.312%; /* 40px do design em 629,5 × 547 */
  overflow: hidden;
}
.hero__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Animação de entrada =====
   o vídeo sobe com fade e, quase no fim, logo e título aparecem
   (usa a propriedade 'translate', que não interfere no 'transform') */
.hero__media {
  animation: hero-rise 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__top {
  animation: hero-fade 1s ease-out 0.6s both;
}
@keyframes hero-rise {
  from { translate: 0 calc(120 * var(--u)); opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__top { animation: none; }
}

/* agenda */
/* Agenda — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.agenda {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
}

.agenda__canvas {
  --u: calc(100cqw / 1920);
  position: relative;
  height: calc(1080 * var(--u));
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.agenda__content {
  width: calc(1480 * var(--u));
  display: flex;
  align-items: stretch;
  gap: calc(60 * var(--u));
}

/* Coluna do título */
.agenda__intro {
  flex: 1 0 0;
  min-width: 0;
  padding-top: calc(20 * var(--u));
}
.agenda__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: calc(-1.8 * var(--u));
  line-height: 0;
  text-box: trim-both cap alphabetic;
}
.agenda__title-regular {
  font-size: calc(45 * var(--u));
  line-height: 1.2;
}
.agenda__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(50.625 * var(--u));
  line-height: 1.2;
}

/* Lista */
.agenda__panel {
  width: calc(784 * var(--u));
  flex: none;
  background: #000;
  font-size: calc(19.507 * var(--u));
  line-height: 1.2;
}
.agenda__panel-head {
  padding: calc(22.294 * var(--u)) calc(24 * var(--u));
  font-weight: 500;
}
.agenda__list { list-style: none; padding: 0; }

.agenda__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16.72 * var(--u));
  padding: calc(5.573 * var(--u)) calc(11.147 * var(--u));
  font-weight: 400;
}
.agenda__row:nth-child(odd)  { background: #282828; }
.agenda__row:nth-child(even) { background: #191919; }

.agenda__num,
.agenda__text {
  padding: calc(13.934 * var(--u)) calc(16.72 * var(--u));
}
.agenda__num { flex: none; color: #808080; white-space: nowrap; }
.agenda__text { flex: 1 0 0; min-width: 0; }

/* No design, o primeiro item tem a coluna do número com largura fixa */
.agenda__row--first .agenda__num { width: calc(48.768 * var(--u)); }

/* Logo no rodapé */
.agenda__logo {
  position: absolute;
  left: calc(100 * var(--u));
  bottom: calc(100 * var(--u));
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.agenda__logo img {
  width: calc(35.403 * var(--u));
  height: calc(35.403 * var(--u));
}
.agenda__logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}

/* sobre */
/* Sobre nós — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.sobre {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
}

.sobre__canvas {
  --u: calc(100cqw / 1920);
  position: relative;
  height: calc(1080 * var(--u));
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sobre__content {
  width: calc(1605 * var(--u));
  display: flex;
  align-items: stretch;
  gap: calc(60 * var(--u));
}

/* Grade de creators (4 / 5 / 4) */
.sobre__creators {
  width: calc(684.431 * var(--u));
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(46.639 * var(--u));
}
.sobre__row {
  display: flex;
  justify-content: center;
  gap: calc(46.639 * var(--u));
  padding-inline: calc(69.959 * var(--u));
}
.sobre__avatar {
  width: calc(93.278 * var(--u));
  height: calc(93.278 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* Texto */
.sobre__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  font-family: 'Poppins', sans-serif;
}
.sobre__title {
  font-weight: 500;
  letter-spacing: calc(-3.3876 * var(--u));
  line-height: 0;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.sobre__title-accent,
.sobre__title-space {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.sobre__title-accent { font-size: calc(64 * var(--u)); }
.sobre__title-space  { font-size: calc(95.277 * var(--u)); }
.sobre__title-regular { font-size: calc(56 * var(--u)); line-height: 1.2; }

.sobre__body {
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}
.sobre__lines {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.sobre__line {
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.64 * var(--u));
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.sobre__line--fixed { width: calc(544.408 * var(--u)); white-space: normal; }
.sobre__accent-sm {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(36 * var(--u));
}

.sobre__line-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.sobre__minis {
  display: flex;
  align-items: center;
}
.sobre__mini {
  display: flex;
  margin-right: calc(-17.269 * var(--u));
  border-radius: calc(21.739 * var(--u));
  overflow: hidden;
  flex: none;
}
.sobre__mini:last-child { margin-right: 0; }
.sobre__mini img {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}

.sobre__tagline {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.72 * var(--u));
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

/* Logo no rodapé */
.sobre__logo {
  position: absolute;
  left: calc(99.97 * var(--u));
  bottom: calc(100 * var(--u));
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sobre__logo img {
  width: calc(35.403 * var(--u));
  height: calc(35.403 * var(--u));
}
.sobre__logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}

/* mercado */
/* Mercado (Influenciadores x UGC Creators) — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.mercado {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.mercado__canvas {
  --u: calc(100cqw / 1920);
  position: relative;
  height: calc(1080 * var(--u));
  padding-inline: calc(100 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.mercado__inner {
  width: 100%;
  height: calc(892 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Cabeçalho */
.mercado__header {
  width: 100%;
  padding-top: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--u));
  text-align: center;
  font-weight: 500;
  line-height: 0;
}
.mercado__kicker {
  width: calc(1064.535 * var(--u));
  letter-spacing: calc(-0.849 * var(--u));
  text-box: trim-both cap alphabetic;
}
.mercado__kicker-regular { font-size: calc(37.143 * var(--u)); line-height: 1.2; }
.mercado__kicker-space   { font-size: calc(21.224 * var(--u)); line-height: 1.2; }
.mercado__kicker-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(42.449 * var(--u));
  line-height: 1.2;
}
.mercado__headline {
  font-size: calc(60 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-1.2 * var(--u));
  text-box: trim-both cap alphabetic;
}
.mercado__headline-x {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
}

/* Linha principal: foto | textos | foto */
.mercado__row {
  width: calc(1631 * var(--u));
  height: calc(647 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
}

.mercado__side {
  position: relative;
  height: 100%;
  width: calc(400 * var(--u));
  flex: none;
  display: flex;
}
.mercado__side--left  { align-items: flex-start; }
.mercado__side--right { align-items: flex-end; }

.mercado__photo {
  width: calc(355.556 * var(--u));
  height: calc(533.333 * var(--u));
  flex: none;
  overflow: hidden;
}
.mercado__photo--left  { position: relative; border-radius: 0 calc(19.753 * var(--u)) calc(19.753 * var(--u)) 0; }
.mercado__photo--right { object-fit: cover; border-radius: calc(19.753 * var(--u)) 0 0 calc(19.753 * var(--u)); }

/* Recorte da foto da esquerda (posição definida no Figma) */
.mercado__photo-crop {
  position: absolute;
  left: -60.67%;
  top: -53.71%;
  width: 187.27%;
  height: 163.27%;
  max-width: none;
}

/* Faixa de círculos coloridos, cortada ao meio */
.mercado__dots {
  width: calc(44.444 * var(--u));
  height: calc(533.333 * var(--u));
  flex: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mercado__dots--pink   { align-items: flex-end;   --dot: #e84ca7; }
.mercado__dots--purple { align-items: flex-start; --dot: #6b3bf8; }
.mercado__dot {
  width: calc(88.889 * var(--u));
  height: calc(88.889 * var(--u));
  flex: none;
  border-radius: 50%;
  background: var(--dot);
}

/* Bordas onduladas sobre as fotos */
.mercado__edge {
  position: absolute;
  top: 0;
  width: calc(88.889 * var(--u));
  height: calc(533.333 * var(--u));
}
.mercado__side--right .mercado__edge { top: auto; bottom: 0; }
.mercado__edge--left  { left: 0; }
.mercado__edge--right { left: calc(311.11 * var(--u)); }

/* Textos */
.mercado__texts {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mercado__text {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.mercado__text--top    { padding-top: calc(20 * var(--u)); align-items: flex-start; text-align: left; }
.mercado__text--bottom { padding-bottom: calc(20 * var(--u)); align-items: flex-end; text-align: right; }

.mercado__title {
  width: calc(412.939 * var(--u));
  font-weight: 500;
  line-height: 0;
  letter-spacing: calc(-0.8832 * var(--u));
  text-box: trim-both cap alphabetic;
}
.mercado__title-regular { font-size: calc(38.639 * var(--u)); line-height: 1.2; }
.mercado__title-space   { font-size: calc(22.08 * var(--u));  line-height: 1.2; }
.mercado__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(44.159 * var(--u));
  line-height: 1.2;
}

.mercado__desc {
  width: calc(505.851 * var(--u));
  font-weight: 400;
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  letter-spacing: calc(-0.48 * var(--u));
  text-box: trim-both cap alphabetic;
}
.mercado__desc--right { width: calc(498.305 * var(--u)); }

/* Logo no rodapé */
.mercado__logo {
  position: absolute;
  left: calc(99.97 * var(--u));
  bottom: calc(100 * var(--u));
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mercado__logo img {
  width: calc(35.403 * var(--u));
  height: calc(35.403 * var(--u));
}
.mercado__logo-text {
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}

/* ugc */
/* UGC — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.ugc {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.ugc__canvas {
  --u: calc(100cqw / 1920);
  position: relative;
  height: calc(1080 * var(--u));
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ugc__content {
  width: calc(1605 * var(--u));
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(60 * var(--u));
}

/* ===== Coluna esquerda ===== */
.ugc__left {
  flex: 1 0 0;
  min-width: 0;
}
.ugc__left-inner {
  padding-top: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.ugc__title {
  font-weight: 500;
  letter-spacing: calc(-3.3876 * var(--u));
  line-height: 0;
  text-box: trim-both cap alphabetic;
}
.ugc__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: 1.2;
}
.ugc__title-regular { font-size: calc(56 * var(--u)); line-height: 1.2; }

.ugc__lead {
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.64 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ===== Chips de fonte ===== */
.ugc__sources {
  list-style: none;
  padding: 0;
  display: flex;
  gap: calc(12 * var(--u));
  align-items: flex-start;
}
.ugc__source {
  position: relative;
  outline: none;
}

.ugc__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  background: #000;
  border-radius: calc(20 * var(--u));
  cursor: default;
  transition: background 0.2s ease;
}
.ugc__chip-name {
  font-weight: 400;
  font-size: calc(20.366 * var(--u));
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.ugc__source:hover .ugc__chip,
.ugc__source:focus-visible .ugc__chip { background: #2b2929; }

.ugc__icon {
  display: flex;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  overflow: hidden;
  flex: none;
}
.ugc__icon img { width: 100%; height: 100%; object-fit: cover; }
.ugc__icon--hubspot { width: calc(19.063 * var(--u)); }
/* Ícone do G4 no card: recorte de uma imagem mais larga */
.ugc__icon--sprite { width: calc(20.435 * var(--u)); }
.ugc__icon--sprite img { width: 248%; max-width: none; object-fit: fill; }

/* ===== Card flutuante (hover) ===== */
.ugc__card {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14 * var(--u));
  z-index: 10;
  width: calc(456 * var(--u));
  padding: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(calc(8 * var(--u)));
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ugc__source:hover .ugc__card,
.ugc__source:focus-visible .ugc__card {
  opacity: 1;
  transform: none;
}

.ugc__card-brand { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ugc__card-name {
  font-weight: 400;
  font-size: calc(20.366 * var(--u));
  line-height: 1;
  color: #141414;
  white-space: nowrap;
}
.ugc__card-title {
  font-weight: 500;
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  color: #141414;
  text-box: trim-both cap alphabetic;
}
.ugc__card-date {
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.36 * var(--u));
  color: #808080;
  text-box: trim-both cap alphabetic;
}

/* ===== Coluna direita: gráfico ===== */
.ugc__right {
  width: calc(745 * var(--u));
  flex: none;
  padding-block: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--u));
}
.ugc__question {
  width: calc(602.074 * var(--u));
  margin-inline: auto;
  padding-left: 0;
  transform: translateX(calc(6 * var(--u)));
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.64 * var(--u));
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.ugc__chart-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.ugc__chart {
  height: calc(377.227 * var(--u));
  display: flex;
  overflow: hidden;
}
.ugc__chart-col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ugc__block {
  padding: calc(28 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: calc(40 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) 0;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}
.ugc__block--purple { width: calc(496 * var(--u)); flex: none; padding: calc(40 * var(--u)); background: #6b3bf8; }
.ugc__block--pink   { height: calc(230.402 * var(--u)); flex: none; background: #e84ca7; }
.ugc__block--lime   { flex: 1 0 0; min-height: 0; background: #d7ff00; color: #141414; }

.ugc__block-label {
  font-size: calc(28 * var(--u));
  letter-spacing: calc(-1.12 * var(--u));
  text-box: trim-both cap alphabetic;
}
.ugc__block-label--md { font-size: calc(21 * var(--u)); letter-spacing: calc(-0.84 * var(--u)); }
.ugc__block-label--sm { font-size: calc(18 * var(--u)); letter-spacing: calc(-0.72 * var(--u)); }
.ugc__block-value {
  font-size: calc(40 * var(--u));
  letter-spacing: calc(-1.6 * var(--u));
  text-box: trim-both cap alphabetic;
}
.ugc__block-value--xl { font-size: calc(80 * var(--u)); letter-spacing: calc(-3.2 * var(--u)); }

.ugc__chart-source { display: flex; justify-content: flex-end; }

/* ===== Logo no rodapé ===== */
.ugc__logo {
  position: absolute;
  left: calc(99.5 * var(--u));
  bottom: calc(100 * var(--u));
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ugc__logo img {
  width: calc(35.403 * var(--u));
  height: calc(35.403 * var(--u));
}
.ugc__logo-text {
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}

/* contexto */
/* Contexto do marketing — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.contexto {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.contexto__canvas {
  --u: calc(100cqw / 1920);
  position: relative;
  height: calc(1080 * var(--u));
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.contexto__content {
  width: calc(1500 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(75 * var(--u));
}

.contexto__title {
  padding-inline: calc(5 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-1.6 * var(--u));
  line-height: 0;
}
.contexto__title-regular { font-size: calc(40 * var(--u)); line-height: 1; }
.contexto__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: calc(45 * var(--u));
  line-height: 1;
}

/* Cards */
.contexto__cards {
  display: flex;
  gap: calc(25 * var(--u));
  align-items: flex-start;
}
.contexto__card {
  width: calc(483 * var(--u));
  height: calc(370 * var(--u));
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #323232;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) 0;
}
.contexto__card:nth-child(2) { width: calc(484 * var(--u)); }

.contexto__card-top {
  height: calc(141.25 * var(--u));
  padding: calc(35 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: none;
}

.contexto__icon {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(150 * var(--u));
  background: #000;
  flex: none;
}
.contexto__icon img { max-width: none; }
.contexto__icon--volume img { width: calc(26 * var(--u)); height: calc(23.3333 * var(--u)); }
.contexto__icon--autenticidade img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.contexto__icon-full {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  flex: none;
}

.contexto__tag {
  padding: calc(8 * var(--u)) calc(20 * var(--u));
  border-radius: calc(8 * var(--u));
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.contexto__tag--pink   { background: #e84ca7; }
.contexto__tag--lime   { background: #d7ff00; color: #454b21; }
.contexto__tag--purple { background: #6b3bf8; }

.contexto__card-body {
  flex: 1 0 0;
  min-height: 0;
  padding: calc(25 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12.5 * var(--u));
}
.contexto__card-title {
  font-weight: 500;
  font-size: calc(21 * var(--u));
  line-height: 1.1;
  white-space: nowrap;
}
.contexto__card-text {
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  color: #ccc;
}
.contexto__card-text--pink   { width: calc(393.444 * var(--u)); }
.contexto__card-text--lime   { width: calc(381.949 * var(--u)); }
.contexto__card-text--purple { width: calc(379.828 * var(--u)); }

/* Logo no rodapé */
.contexto__logo {
  position: absolute;
  left: calc(99.5 * var(--u));
  bottom: calc(100 * var(--u));
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contexto__logo img {
  width: calc(35.403 * var(--u));
  height: calc(35.403 * var(--u));
}
.contexto__logo-text {
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}

/* problema */
/* Problema (3 abas) — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.problema {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: clip; /* clip (e não hidden) para o sticky da caixa continuar funcionando */
}

.problema__canvas {
  --u: calc(100cqw / 1920);
  padding-top: calc(120 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--u));
}

/* ===== Cabeçalho ===== */
.problema__header {
  width: calc(1546 * var(--u));
  margin-inline: auto;
  padding: calc(20 * var(--u)) calc(20 * var(--u)) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-weight: 500;
  flex: none;
}
.problema__header-left {
  width: calc(803.23 * var(--u));
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.problema__header-line {
  font-size: calc(32 * var(--u));
  line-height: 1.2;
}
.problema__header-left > p:first-child { display: block; }
.problema__header-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.2;
}
.problema__header-right {
  width: calc(400.702 * var(--u));
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}
.problema__header-side-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(24 * var(--u));
  line-height: 1.3;
}
.problema__header-side {
  font-size: calc(21 * var(--u));
  line-height: 1.3;
}

/* ===== Componente de abas =====
   A caixa é "pinada" (sticky) e expande com o scroll até preencher a tela toda
   (largura e altura); ao sair da tela ela retrai de volta.
   --exp (0 → 1) é escrito pelo problema.js.
   • .problema__tabs-box  = a tela (100svh × 100%), recortada por clip-path
   • .problema__tabs-inner = o conteúdo, que mantém a mesma posição e só ganha altura */
.problema__tabs-box {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  flex: none;
  overflow: hidden;
  background: #000;
  /* p = 0: retângulo de 1680 × 809 com margem de 120 · p = 1: tela inteira */
  clip-path: inset(
    0
    calc(120 * (1 - var(--exp, 0)) * var(--u))
    calc((100svh - 809 * var(--u)) * (1 - var(--exp, 0)))
    calc(120 * (1 - var(--exp, 0)) * var(--u))
    round calc(28 * (1 - var(--exp, 0)) * var(--u))
  );
}
.problema__tabs-inner {
  width: calc(1680 * var(--u));
  height: calc(809 * var(--u) + (100svh - 809 * var(--u)) * var(--exp, 0));
  margin-left: calc(120 * var(--u));
  display: flex;
  flex-direction: column;
}
/* distância de scroll em que a caixa fica cheia, ocupando a tela */
.problema__hold { height: 60svh; flex: none; }

.problema__tablist {
  display: flex;
  gap: calc(20 * var(--u));
  padding: calc(40 * var(--u)) calc(40 * var(--u)) 0;
  flex: none;
}
.problema__tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(20 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.problema__tab.is-active {
  background: #211f1f;
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  cursor: default;
}
.problema__tab:focus-visible { outline: 2px solid #d7ff00; outline-offset: -2px; }
.problema__tab-num {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(8 * var(--u));
  background: #211f1f;
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: 1.1;
  color: #ccc;
}
.problema__tab-label {
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
}

/* Moldura do conteúdo: os cantos mudam conforme a aba ativa */
.problema__frame {
  flex: 1 0 0;
  min-height: 0;
  padding-inline: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
}
.problema__frame-inner {
  flex: 1 0 0;
  min-height: 0;
  padding: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  background: #211f1f;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.12));
  border-radius: 0 calc(28 * var(--u)) 0 0;
  display: flex;
}
.problema__tabs-box[data-active='2'] .problema__frame-inner { border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; }
.problema__tabs-box[data-active='3'] .problema__frame-inner { border-radius: calc(28 * var(--u)) 0 0 0; }

/* ===== Painéis ===== */
.problema__panel {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(60 * var(--u));
  display: flex;
  gap: calc(60 * var(--u));
  align-items: flex-start;
  background: #000;
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
}
.problema__panel[hidden] { display: none; }

.problema__copy {
  width: calc(540 * var(--u));
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--u));
}
.problema__copy-head {
  padding-left: calc(12 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.problema__heading {
  width: calc(470.63 * var(--u));
  letter-spacing: calc(-1.76 * var(--u));
  line-height: 0;
  text-box: trim-both cap alphabetic;
}
.problema__heading-regular {
  font-weight: 500;
  font-size: calc(40 * var(--u));
  line-height: 1.2;
}
.problema__heading-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(44 * var(--u));
  line-height: 1.2;
}
.problema__panel--2 .problema__heading { width: calc(420 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
.problema__panel--3 .problema__heading { width: calc(380.566 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
/* Nas abas 2 e 3, o título é todo em Poppins; só o destaque é serifado */
.problema__panel--2 .problema__heading,
.problema__panel--3 .problema__heading { font-family: 'Poppins', sans-serif; }

.problema__lead {
  width: calc(499.186 * var(--u));
  font-weight: 400;
  font-size: calc(24 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.48 * var(--u));
  text-box: trim-both cap alphabetic;
}
.problema__lead--full { width: 100%; }

.problema__points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.problema__points li {
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  border-left: calc(6 * var(--u)) solid #d7ff00;
  background: #141414;
  border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0;
  font-weight: 500;
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.25;
  letter-spacing: calc(-0.3 * var(--u));
  white-space: normal;
  text-wrap: pretty;
}
.problema__points li:nth-child(-n + 2) { line-height: 1.25; }

/* ===== Lado visual ===== */
.problema__visual {
  width: calc(864 * var(--u));
  height: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.problema__panel--2 .problema__visual,
.problema__panel--3 .problema__visual { gap: calc(60 * var(--u)); }

.problema__media {
  flex: 1 0 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
}
.problema__media img { display: block; object-fit: cover; max-width: none; }

/* Aba 1: imagem maior que a caixa, alinhada à esquerda e centralizada na vertical */
.problema__media--portrait { display: flex; align-items: center; }
.problema__media--portrait img {
  width: calc(1024 * var(--u));
  height: calc(1536 * var(--u));
  flex: none;
}

/* Aba 2: imagem preenche a caixa */
.problema__media--cover img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Aba 3: imagem levemente rotacionada, centralizada e cortada pela caixa */
.problema__media--rotate { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.problema__rotate-box {
  width: calc(993.846 * var(--u));
  height: calc(690.563 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.problema__rotate-tilt {
  width: calc(961.568 * var(--u));
  height: calc(641.045 * var(--u));
  flex: none;
  transform: rotate(-3deg);
}
.problema__rotate-tilt img { width: 100%; height: 100%; }

.problema__caption {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: calc(24 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.48 * var(--u));
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

/* treinamento */
/* Treinamento (Profissão do Futuro) — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. Altura "hug". */
.treino {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.treino__canvas {
  --u: calc(100cqw / 1920);
  padding-top: calc(120 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(60 * var(--u));
}

/* ===== Cabeçalho ===== */
.treino__head {
  width: calc(1546 * var(--u));
  padding-inline: calc(20 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-weight: 500;
}
.treino__head-title {
  width: calc(753 * var(--u));
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.treino__head-regular { font-size: calc(32 * var(--u)); line-height: 1.2; }
.treino__head-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.2;
}
.treino__head-text {
  width: calc(461.973 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ===== Caixa preta ===== */
.treino__content {
  width: calc(1662 * var(--u));
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  display: flex;
}
.treino__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
  background: #000;
}

/* Texto */
.treino__copy {
  width: calc(420 * var(--u));
  align-self: stretch;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}
.treino__copy-top {
  padding-top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.treino__badge-wrap { padding-inline: calc(8 * var(--u)); }
.treino__badge {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.treino__badge-icon {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(8 * var(--u));
  overflow: hidden;
}
.treino__badge-icon img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); max-width: none; }
.treino__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.treino__title {
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.treino__desc-box { padding-inline: calc(12 * var(--u)); }
.treino__desc {
  font-weight: 400;
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}
.treino__chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); align-content: flex-start; }
.treino__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* Pílula + notebook */
.treino__visual {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}
.treino__pill {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  border-radius: calc(40 * var(--u));
  background: #fff;
}
.treino__minis { display: flex; align-items: center; }
.treino__mini {
  display: flex;
  margin-right: calc(-17.269 * var(--u));
  border: calc(1.786 * var(--u)) solid #f1f0ea;
  border-radius: calc(21.739 * var(--u));
  overflow: hidden;
  flex: none;
}
.treino__mini:last-child { margin-right: 0; }
.treino__mini img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.treino__pill-text {
  padding-left: calc(12 * var(--u));
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  color: #141414;
  white-space: nowrap;
}
.treino__device {
  width: calc(1138.645 * var(--u));
  height: calc(688.243 * var(--u));
  flex: none;
  max-width: none;
  object-fit: cover;
}

/* campanha */
/* Campanha — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.campanha {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.campanha__canvas {
  --u: calc(100cqw / 1920);
  display: flex;
  justify-content: center;
}
.campanha__content {
  width: calc(1662 * var(--u));
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  display: flex;
}
.campanha__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(200 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
}

/* ===== Texto ===== */
.campanha__copy {
  width: calc(420 * var(--u));
  align-self: stretch;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}
.campanha__copy-top {
  padding-top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.campanha__badge-wrap { padding-inline: calc(8 * var(--u)); }
.campanha__badge {
  height: calc(36 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.campanha__title-box {
  max-width: calc(660 * var(--u));
  padding: calc(12 * var(--u));
}
.campanha__title {
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.campanha__desc-box { padding-inline: calc(12 * var(--u)); }
.campanha__desc {
  width: calc(515.067 * var(--u));
  font-weight: 400;
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}

.campanha__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  align-content: flex-start;
}
.campanha__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ===== Cluster de cards (mesma sobreposição em grade do Figma) ===== */
.campanha__cluster {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  flex: none;
}
.campanha__card {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  position: relative;
  background: #f1f0ea;
  border: 1px solid #ccc;
  border-radius: calc(38.42 * var(--u));
  color: #141414;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) #000);
}
.campanha__card--prompt  { margin: calc(62 * var(--u)) 0 0 0; width: calc(547.303 * var(--u)); padding: calc(10.977 * var(--u)); border-width: calc(1.372 * var(--u)); }
.campanha__card--parsing { margin-left: calc(584.5 * var(--u)); padding: calc(41 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--u)); }
.campanha__card--quiz    { margin: calc(294 * var(--u)) 0 0 calc(27.3 * var(--u)); width: calc(520 * var(--u)); padding: calc(40 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--u)); overflow: hidden; filter: drop-shadow(0 calc(4 * var(--u)) calc(20 * var(--u)) #000); }
.campanha__card--preview { margin: calc(419 * var(--u)) 0 0 calc(584.5 * var(--u)); padding: calc(20 * var(--u)); filter: drop-shadow(0 calc(4 * var(--u)) calc(20 * var(--u)) #000); overflow: hidden; }

/* --- Prompt de IA --- */
.prompt {
  position: relative;
  height: calc(161.714 * var(--u));
  padding: calc(9.513 * var(--u));
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: calc(23.781 * var(--u));
  background: #6b3bf8;
}
.prompt__glow {
  position: absolute;
  left: calc(-589.79 * var(--u));
  top: calc(-403.24 * var(--u));
  width: calc(1343.1 * var(--u));
  height: calc(951.363 * var(--u));
  max-width: none;
}
.prompt__box {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  border-radius: calc(16.647 * var(--u));
  background: #fff;
}
.prompt__text {
  height: calc(71.344 * var(--u));
  padding: calc(23.781 * var(--u)) calc(23.781 * var(--u)) calc(9.513 * var(--u));
  display: flex;
}
.prompt__text p {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  border-left: calc(1.189 * var(--u)) solid #141414;
  font-weight: 400;
  font-size: calc(16.647 * var(--u));
  line-height: calc(27.468 * var(--u));
  color: rgba(20, 20, 20, 0.5);
}
.prompt__actions {
  height: calc(71.344 * var(--u));
  padding: calc(9.513 * var(--u)) calc(19.025 * var(--u)) calc(19.025 * var(--u));
  display: flex;
  align-items: center;
}
.prompt__btn {
  width: calc(81.927 * var(--u));
  height: calc(42.807 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(9.513 * var(--u));
  background: #6b3bf8;
  color: #fff;
  font-weight: 500;
  font-size: calc(14.269 * var(--u));
  line-height: 1;
}

/* --- Analisando briefing --- */
.parsing__head { width: calc(350.212 * var(--u)); text-align: center; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.parsing__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: calc(26 * var(--u));
  line-height: calc(39 * var(--u));
  white-space: nowrap;
}
.parsing__sub {
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: calc(21 * var(--u));
  color: #6b6b6b;
  white-space: nowrap;
}
.parsing__list {
  list-style: none;
  padding: 0;
  width: calc(340 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(7.6 * var(--u));
}
.parsing__item {
  padding: calc(12 * var(--u)) calc(17 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: calc(0.8 * var(--u)) solid #dbffc7;
  border-radius: calc(10 * var(--u));
  background: #fff;
}
.parsing__left { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.parsing__check {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(8 * var(--u));
  background: #d7ff00;
  flex: none;
}
.parsing__check img { width: calc(9 * var(--u)); height: calc(6.5 * var(--u)); }
.parsing__label {
  width: calc(136 * var(--u));
  font-weight: 500;
  font-size: calc(13 * var(--u));
  line-height: calc(19.5 * var(--u));
  white-space: nowrap;
}
.parsing__tag {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(11 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* --- Pergunta do briefing --- */
.quiz__body { width: 100%; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.quiz__head { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.quiz__step { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.quiz__back {
  width: calc(16 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz__back img { width: calc(12 * var(--u)); height: calc(8 * var(--u)); transform: rotate(90deg); flex: none; }
.quiz__step-text {
  font-weight: 500;
  font-size: calc(11 * var(--u));
  line-height: calc(24.375 * var(--u));
  color: #808080;
  white-space: nowrap;
}
.quiz__question {
  padding-inline: calc(4 * var(--u));
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: calc(28 * var(--u));
  line-height: calc(30.8 * var(--u));
}
.quiz__options { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.quiz__option {
  width: 100%;
  padding: calc(8 * var(--u));
  display: flex;
  align-items: center;
  border: calc(2 * var(--u)) solid #e8e7e1;
  border-radius: calc(12 * var(--u));
  background: #fff;
  color: #141414;
  font: inherit;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.quiz__option img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; }
.quiz__option:hover { border-color: #6b3bf8; }
.quiz__actions { width: 100%; display: flex; justify-content: flex-end; }
.quiz__next {
  padding: calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #141414;
  opacity: 0.3;
  color: #fff;
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* --- Prévia da campanha --- */
.preview {
  width: calc(441.157 * var(--u));
  overflow: hidden;
  border-radius: calc(12.838 * var(--u));
  background: #fff;
}
.preview__top { width: calc(335.848 * var(--u)); padding: calc(15.406 * var(--u)) calc(15.406 * var(--u)) 0; }
.preview__top > * + * { margin-top: calc(5.135 * var(--u)); }
.preview__kicker {
  font-weight: 500;
  font-size: calc(12.453 * var(--u));
  line-height: calc(18.68 * var(--u));
  letter-spacing: calc(0.6227 * var(--u));
  text-transform: uppercase;
  color: #808080;
}
.preview__name {
  width: calc(258.818 * var(--u));
  font-weight: 500;
  font-size: calc(17.974 * var(--u));
  line-height: calc(19.771 * var(--u));
}
.preview__tags { margin-top: calc(10.271 * var(--u)) !important; display: flex; gap: calc(10.271 * var(--u)); }
.preview__tag {
  padding: calc(5.135 * var(--u)) calc(10.271 * var(--u));
  display: flex;
  align-items: center;
  border-radius: calc(5.135 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14.122 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.preview__tag--soft { background: #efeaff; color: #6d3df8; }

.preview__mid {
  width: calc(335.848 * var(--u));
  padding: calc(10.271 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12.838 * var(--u));
}
.preview__block { padding-inline: calc(2.568 * var(--u)); display: flex; flex-direction: column; gap: calc(10.271 * var(--u)); }
.preview__label {
  padding-left: calc(2.568 * var(--u));
  font-weight: 500;
  font-size: calc(14.122 * var(--u));
  line-height: calc(21.183 * var(--u));
  color: #808080;
  white-space: nowrap;
}
.preview__label--upper { text-transform: uppercase; padding-left: 0; }
.preview__summary {
  font-weight: 400;
  font-size: calc(15.406 * var(--u));
  line-height: calc(20.028 * var(--u));
}
.preview__skeleton-block {
  height: calc(57.13 * var(--u));
  padding-left: calc(2.568 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10.271 * var(--u));
}
.preview__skeletons { display: flex; gap: calc(3.4 * var(--u)); padding-left: calc(2.57 * var(--u)); }
.skeleton {
  width: calc(77.029 * var(--u));
  height: calc(25.676 * var(--u));
  border-radius: calc(5.135 * var(--u));
  background: linear-gradient(90deg, #f1f1f1 25%, #f8f8f8 50%, #f1f1f1 75%);
}

.preview__footer {
  padding-bottom: calc(29.41 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.preview__value {
  width: calc(151.464 * var(--u));
  padding: calc(10.271 * var(--u)) calc(15.406 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(5.135 * var(--u));
}
.preview__price {
  font-weight: 500;
  font-size: calc(17.974 * var(--u));
  line-height: calc(26.96 * var(--u));
  white-space: nowrap;
}
.preview__brand {
  padding: calc(10.271 * var(--u)) calc(30 * var(--u)) calc(15.406 * var(--u)) calc(15.406 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(7.703 * var(--u));
}
.preview__avatar {
  width: calc(29.528 * var(--u));
  height: calc(29.528 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5b7fd4;
  color: #fff;
  font-weight: 600;
  font-size: calc(14.122 * var(--u));
}
.preview__brand-name {
  font-weight: 500;
  font-size: calc(15.406 * var(--u));
  line-height: calc(23.109 * var(--u));
  white-space: nowrap;
}

/* creators */
/* Creators — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.creators {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.creators__canvas {
  --u: calc(100cqw / 1920);
  height: calc(1080 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
}
.creators__content {
  width: calc(1662 * var(--u));
  display: flex;
}
.creators__row {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: calc(742.3 * var(--u));
  padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
}

/* ===== Texto ===== */
.creators__copy {
  width: calc(420 * var(--u));
  height: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}
.creators__copy-top {
  padding-top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.creators__badge-wrap { padding-inline: calc(8 * var(--u)); }
.creators__badge {
  height: calc(36 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.creators__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.creators__title {
  width: calc(322.833 * var(--u));
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.creators__desc-box { padding-inline: calc(12 * var(--u)); }
.creators__desc {
  width: calc(436.974 * var(--u));
  font-weight: 400;
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}
.creators__chips {
  width: calc(448 * var(--u));
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  align-content: flex-start;
}
.creators__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ===== Grade de creators ===== */
.creators__grid {
  position: absolute;
  left: calc(852.03 * var(--u));
  top: 0;
  width: calc(838.594 * var(--u));
  height: calc(760.784 * var(--u));
  padding-bottom: calc(80 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(57.144 * var(--u));
}

.creators__pill {
  padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  border-radius: calc(40 * var(--u));
  background: #fff;
}
.creators__minis { display: flex; align-items: center; }
.creators__mini {
  display: flex;
  margin-right: calc(-17.269 * var(--u));
  border: calc(1.786 * var(--u)) solid #f1f0ea;
  border-radius: calc(21.739 * var(--u));
  overflow: hidden;
  flex: none;
}
.creators__mini:last-child { margin-right: 0; }
.creators__mini img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.creators__pill-text {
  padding-left: calc(12 * var(--u));
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  color: #535353;
  white-space: nowrap;
}

.creators__avatars-row {
  width: 100%;
  padding-inline: calc(85.717 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(57.144 * var(--u));
  overflow: hidden;
  flex: none;
}
.creators__avatar {
  width: calc(114.289 * var(--u));
  height: calc(114.289 * var(--u));
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.creators__avatar.is-dim { opacity: 0.4; }

/* ===== Card de candidatura ===== */
.creators__card {
  position: absolute;
  left: calc(1328.47 * var(--u));
  top: calc(210.9 * var(--u));
  width: calc(274.953 * var(--u));
  padding: calc(8 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  overflow: hidden;
  border: 1px solid #e8e7e1;
  border-radius: calc(24 * var(--u));
  background: #fff;
  color: #141414;
}
.creators__card-photo {
  width: calc(258 * var(--u));
  height: calc(258 * var(--u));
  border-radius: calc(16 * var(--u));
  object-fit: cover;
}
.creators__card-id { padding-inline: calc(8 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.creators__card-name-row { display: flex; align-items: center; justify-content: space-between; }
.creators__card-name { font-weight: 500; font-size: calc(14 * var(--u)); line-height: 1; white-space: nowrap; }
.creators__card-badge {
  height: calc(26 * var(--u));
  padding-inline: calc(6.5 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3.25 * var(--u));
  border-radius: calc(6.5 * var(--u));
  background: #f3f1fb;
  color: #7b3df8;
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.creators__card-badge img { width: calc(13.723 * var(--u)); height: calc(13.085 * var(--u)); }
.creators__card-place { font-weight: 400; font-size: calc(12 * var(--u)); line-height: 1; color: #808080; }

.creators__card-msg { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.creators__card-label {
  padding-inline: calc(8 * var(--u));
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.1;
  color: #808080;
}
.creators__card-label--sm { padding-inline: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
.creators__card-text {
  padding-inline: calc(8 * var(--u));
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  color: #808080;
}
.creators__card-niches { padding-inline: calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.creators__card-tags { display: flex; gap: calc(3.235 * var(--u)); }
.creators__card-tag {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #f8f8f8;
  color: #808080;
  font-weight: 500;
  font-size: calc(11 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.creators__card-footer {
  padding: calc(8 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.creators__card-link {
  padding: calc(16 * var(--u)) calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #fff;
  color: #808080;
  font-weight: 600;
  font-size: calc(12 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.creators__card-cta {
  padding: calc(13.091 * var(--u)) calc(16.364 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(13.091 * var(--u));
  border-radius: calc(9.818 * var(--u));
  background: #141414;
  color: #fff;
  font-weight: 500;
  font-size: calc(9.818 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.creators__card-cta img { width: calc(7.69 * var(--u)); height: calc(7.69 * var(--u)); margin: calc(-0.57 * var(--u)); }

/* ===== Tiras de portfólio ===== */
.creators__strip {
  position: absolute;
  padding: calc(1.267 * var(--u)) calc(2.534 * var(--u));
  border-radius: calc(5.069 * var(--u));
  background: #fff;
}
.creators__strip--a { left: calc(957.54 * var(--u)); top: calc(464.9 * var(--u)); }
.creators__strip--b { left: calc(823.41 * var(--u)); top: calc(601.54 * var(--u)); }
.creators__strip-crop { position: relative; overflow: hidden; }
.creators__strip--a .creators__strip-crop { width: calc(308.713 * var(--u)); height: calc(106.423 * var(--u)); }
.creators__strip--b .creators__strip-crop { width: calc(319.325 * var(--u)); height: calc(106.426 * var(--u)); }
.creators__strip-crop img { position: absolute; max-width: none; left: -0.85%; width: 101.71%; }
/* a: linha de baixo da imagem · b: linha de cima */
.creators__strip--a img { top: -96.69%; height: 196.69%; }
.creators__strip--b img { top: 0; height: 203.44%; }

/* portfolio */
/* Portfólio — medidas do Figma (frame de 1920 × 1080). 1 unidade (--u) = 1px do design. */
.portfolio {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}
.portfolio__canvas {
  --u: calc(100cqw / 1920);
  height: calc(1080 * var(--u));
  display: flex;
  justify-content: center;
}
.portfolio__content {
  width: calc(1662 * var(--u));
  height: 100%;
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  display: flex;
}
.portfolio__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(80 * var(--u));
  overflow: hidden;
  border-radius: calc(20 * var(--u));
}

/* Texto */
.portfolio__copy {
  width: calc(420 * var(--u));
  height: 100%;
  flex: none;
  padding-top: calc(100 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}
.portfolio__copy-top { padding-top: calc(60 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.portfolio__badge-wrap { padding-inline: calc(8 * var(--u)); }
.portfolio__badge {
  height: calc(36 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
}
.portfolio__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.portfolio__title {
  width: calc(347.168 * var(--u));
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.portfolio__desc-box { padding-inline: calc(12 * var(--u)); }
.portfolio__desc {
  width: calc(459.779 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}
.portfolio__chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.portfolio__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* Prints inclinados (o cluster é maior que a área e é cortado pela caixa) */
.portfolio__cluster {
  position: relative;
  width: calc(1618 * var(--u));
  height: calc(1390 * var(--u));
  flex: none;
  pointer-events: none;
}
.pf-cell { position: absolute; display: flex; align-items: center; justify-content: center; }
.pf-tilt { flex: none; transform: rotate(-22.86deg); }
.pf-tilt img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

.pf-cell--219 { left: calc(989.52 * var(--u)); top: calc(641.04 * var(--u)); width: calc(628.957 * var(--u)); height: calc(506.882 * var(--u)); }
.pf-cell--219 .pf-tilt { width: calc(548.069 * var(--u)); height: calc(319.025 * var(--u)); }
.pf-cell--220 { left: calc(454.79 * var(--u)); top: calc(882.51 * var(--u)); width: calc(611.204 * var(--u)); height: calc(508.01 * var(--u)); }
.pf-cell--220 .pf-tilt { width: calc(524.01 * var(--u)); height: calc(330.393 * var(--u)); }
.pf-cell--218 { left: calc(551.95 * var(--u)); top: 0; width: calc(604.143 * var(--u)); height: calc(491.264 * var(--u)); }
.pf-cell--218 .pf-tilt { width: calc(524.01 * var(--u)); height: calc(312.218 * var(--u)); }
.pf-cell--212 { left: calc(523.61 * var(--u)); top: calc(429.62 * var(--u)); width: calc(605.846 * var(--u)); height: calc(495.302 * var(--u)); }
.pf-cell--212 .pf-tilt { width: calc(524.012 * var(--u)); height: calc(316.591 * var(--u)); }
.pf-cell--213 { left: 0; top: calc(650.39 * var(--u)); width: calc(605.846 * var(--u)); height: calc(495.302 * var(--u)); }
.pf-cell--213 .pf-tilt { width: calc(524.012 * var(--u)); height: calc(316.591 * var(--u)); overflow: hidden; position: relative; }
.pf-cell--213 .pf-tilt img { position: absolute; left: -7.78%; top: 0; width: 135.33%; height: 100%; }
.pf-cell--214 { left: calc(11.98 * var(--u)); top: calc(222.78 * var(--u)); width: calc(605.846 * var(--u)); height: calc(495.302 * var(--u)); }
.pf-cell--214 .pf-tilt { width: calc(524.012 * var(--u)); height: calc(316.591 * var(--u)); }

/* Degradês no topo e na base para "sumir" os prints no fundo da dobra */
.pf-fade {
  position: absolute;
  left: calc(31.5 * var(--u));
  width: calc(1259 * var(--u));
  height: calc(160 * var(--u));
  backdrop-filter: blur(2px);
}
.pf-fade--top { top: calc(165.06 * var(--u)); background: linear-gradient(to bottom, #211f1f, rgba(33, 31, 31, 0)); }
.pf-fade--bottom { top: calc(1085.06 * var(--u)); background: linear-gradient(to top, #211f1f, rgba(33, 31, 31, 0)); }

/* juridico */
/* Jurídico / Segurança — medidas do Figma (frame de 1920 × 1080). 1 unidade (--u) = 1px do design. */
.juridico {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}
.juridico__canvas {
  --u: calc(100cqw / 1920);
  height: calc(1080 * var(--u));
  display: flex;
  justify-content: center;
}
.juridico__content {
  width: calc(1662 * var(--u));
  height: 100%;
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  display: flex;
}
.juridico__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(80 * var(--u));
  border-radius: calc(20 * var(--u));
}

/* Texto */
.juridico__copy { width: calc(420 * var(--u)); height: 100%; flex: none; padding-top: calc(100 * var(--u)); display: flex; flex-direction: column; gap: calc(80 * var(--u)); }
.juridico__copy-top { padding-top: calc(60 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.juridico__badge-wrap { padding-inline: calc(8 * var(--u)); }
.juridico__badge {
  height: calc(36 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.juridico__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.juridico__title {
  width: calc(347.168 * var(--u));
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.juridico__desc-box { padding-inline: calc(12 * var(--u)); }
.juridico__desc { width: calc(459.779 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.3; letter-spacing: calc(-0.42 * var(--u)); text-box: trim-both cap alphabetic; }
.juridico__chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.juridico__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* Palco: tela de aprovação atrás, modal na frente */
.juridico__stage {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: calc(601 * var(--u));
  margin-left: calc(153 * var(--u));
  color: #141414;
}
.jd-card { position: absolute; background: #fff; border-radius: calc(12 * var(--u)); overflow: hidden; }

.jd-kicker { font-weight: 500; font-size: calc(15.12 * var(--u)); line-height: 1.1; text-transform: uppercase; color: #808080; }
.jd-kicker--sm { font-size: calc(9.704 * var(--u)); }

/* Tela de aprovação */
.jd-approve {
  left: 0;
  top: calc(-80 * var(--u));
  width: calc(764.822 * var(--u));
  padding: calc(24.923 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(18.692 * var(--u));
}
.jd-approve__head { padding-inline: calc(6.231 * var(--u)); display: flex; flex-direction: column; gap: calc(6.231 * var(--u)); }
.jd-approve__title { font-weight: 500; font-size: calc(21.81 * var(--u)); line-height: 1.3; }
.jd-approve__terms {
  padding: calc(24.923 * var(--u)) calc(18.692 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #efeaff;
  color: #6b3bf8;
  font-size: calc(18.69 * var(--u));
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.jd-approve__terms strong { font-weight: 500; }
.jd-approve__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18.692 * var(--u));
  padding: calc(24.923 * var(--u));
  font-weight: 500;
  font-size: calc(18.69 * var(--u));
  line-height: 1;
  color: #535353;
}
.jd-approve__link svg { width: calc(12.461 * var(--u)); height: calc(12.461 * var(--u)); }
.jd-approve__actions { display: flex; justify-content: flex-end; gap: calc(12.461 * var(--u)); }

/* Modal de termos */
.jd-modal {
  left: calc(397 * var(--u));
  top: calc(0 * var(--u));
  width: calc(457 * var(--u));
  height: calc(601 * var(--u));
  padding: calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  box-shadow: 0 0 calc(16 * var(--u)) rgba(0, 0, 0, 0.25);
}
.jd-modal__head { padding-inline: calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.jd-modal__title { font-weight: 500; font-size: calc(14 * var(--u)); line-height: 1.1; }
.jd-modal__alert {
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: 1px dashed #6b3bf8;
  border-radius: calc(8 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.jd-modal__alert-title { display: flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.1; color: #6b3bf8; }
.jd-modal__alert-title svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); flex: none; }
.jd-modal__alert-title .jd-modal__alert-x { margin-left: auto; width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.jd-modal__alert-text { font-size: calc(11 * var(--u)); line-height: 1.1; color: #808080; }
.jd-modal__text {
  flex: 1 0 0;
  min-height: 0;
  overflow-y: auto;
  padding: calc(16 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #f8f8f8;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  scrollbar-width: thin;
}
.jd-modal__actions { padding-top: calc(8 * var(--u)); display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); }

/* Botões (só visuais) */
.jd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  font-weight: 600;
  font-size: calc(12 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.jd-btn--ghost { background: #fff; color: #808080; }
.jd-btn--purple { min-width: calc(164 * var(--u)); background: #6b3bf8; color: #fff; }
.jd-btn--lg { padding: calc(24.923 * var(--u)); font-size: calc(18.69 * var(--u)); font-weight: 500; }
.jd-btn--lg.jd-btn--purple { min-width: calc(255.46 * var(--u)); }

/* producao */
/* Produção — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.producao {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.producao__canvas {
  --u: calc(100cqw / 1920);
  height: calc(1080 * var(--u));
  display: flex;
  justify-content: center;
}
.producao__content {
  width: calc(1662 * var(--u));
  height: 100%;
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  display: flex;
}
.producao__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
}

/* ===== Texto ===== */
.producao__copy {
  width: calc(420 * var(--u));
  height: 100%;
  flex: none;
  padding-top: calc(100 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
}
.producao__copy-top {
  padding-top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.producao__badge-wrap { padding-inline: calc(8 * var(--u)); }
.producao__badge {
  height: calc(36 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.producao__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.producao__title {
  width: calc(347.168 * var(--u));
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.producao__desc-box { padding-inline: calc(12 * var(--u)); }
.producao__desc {
  width: calc(459.779 * var(--u));
  font-weight: 400;
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}
.producao__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  align-content: flex-start;
}
.producao__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ===== Imagem do produto ===== */
.producao__device {
  width: calc(1216 * var(--u));
  height: calc(735 * var(--u));
  flex: none;
  object-fit: cover;
}

/* resultados */
/* Resultados — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção. */
.resultados {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.resultados__canvas {
  --u: calc(100cqw / 1920);
  height: calc(1080 * var(--u));
  display: flex;
  justify-content: center;
}
.resultados__content {
  width: calc(1662 * var(--u));
  height: 100%;
  display: flex;
}
.resultados__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: center;
  justify-content: flex-start; /* o cluster é mais largo que a linha e vaza à direita, como no design */
}

/* ===== Texto ===== */
.resultados__copy {
  width: calc(420 * var(--u));
  height: 100%;
  flex: none;
  padding: calc(100 * var(--u)) 0 calc(80 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(80 * var(--u));
}
.resultados__copy-top {
  padding-top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.resultados__badge-wrap { padding-inline: calc(8 * var(--u)); }
.resultados__badge {
  height: calc(36 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(12 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.resultados__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.resultados__title {
  width: calc(347.168 * var(--u));
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.resultados__desc-box { padding-inline: calc(12 * var(--u)); }
.resultados__desc {
  width: calc(408 * var(--u));
  font-weight: 400;
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}
.resultados__chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.resultados__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ===== Cluster de cards =====
   As posições dos cards foram ajustadas para bater com a renderização do Figma. */
.resultados__cluster {
  position: relative;
  width: calc(1301.927 * var(--u));
  height: calc(816.63 * var(--u));
  flex: none;
  color: #141414;
}
.rs-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-cell--chart { left: calc(36 * var(--u)); top: 0; width: calc(757.404 * var(--u)); height: calc(431.689 * var(--u)); }
.rs-cell--rank  { left: calc(773.48 * var(--u)); top: calc(413.2 * var(--u)); width: calc(391.004 * var(--u)); height: calc(393.178 * var(--u)); }
.rs-cell--insta { left: calc(268.98 * var(--u)); top: calc(432.98 * var(--u)); width: calc(478.174 * var(--u)); height: calc(254.597 * var(--u)); }
.rs-cell--meta  { left: calc(817.48 * var(--u)); top: calc(148.2 * var(--u)); width: calc(478.174 * var(--u)); height: calc(254.597 * var(--u)); }
.rs-cell { pointer-events: none; }          /* a caixa (retângulo) não reage: só o card inclinado */
.rs-tilt {
  flex: none;
  transform: rotate(6deg);
  pointer-events: auto;                   /* o hover segue o formato real do card */
  opacity: 0.4;                           /* em repouso, mais apagado */
  transition: opacity 0.35s ease;
}
.rs-tilt:hover { opacity: 1; }            /* só o card sob o mouse volta ao normal */
/* sem mouse (celular/tablet) não há hover: mantém a opacidade normal */
@media (hover: none) {
  .rs-tilt { opacity: 1; }
}

.rs-card {
  display: flex;
  flex-direction: column;
  gap: calc(19.328 * var(--u));
  padding: calc(19.328 * var(--u));
  overflow: hidden;
  border: calc(1.611 * var(--u)) solid #e8e7e1;
  border-radius: calc(19.328 * var(--u));
  background: #fff;
  height: calc(357.976 * var(--u));
}
.rs-title {
  font-weight: 500;
  font-size: calc(20.939 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.rs-title--grow { flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rs-chip {
  padding: calc(12.885 * var(--u)) calc(25.771 * var(--u));
  border-radius: calc(12.885 * var(--u));
  background: #efeaff;
  color: #6b3bf8;
  font-weight: 500;
  font-size: calc(19.328 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* --- Gráfico por creator --- */
.rs-chart { width: calc(723.952 * var(--u)); }
.rs-chart__head { display: flex; align-items: center; justify-content: space-between; gap: calc(6.443 * var(--u)); }
.rs-chart__tools { display: flex; align-items: center; gap: calc(6.443 * var(--u)); }
.rs-dropdown {
  display: flex;
  align-items: center;
  gap: calc(4.632 * var(--u));
  padding: calc(4.632 * var(--u));
  border: calc(1.158 * var(--u)) solid #ccc;
  border-radius: calc(23.16 * var(--u));
  background: #fff;
}
.rs-dropdown__avatars { display: flex; }
.rs-dropdown__avatars img {
  width: calc(32.425 * var(--u));
  height: calc(32.425 * var(--u));
  box-sizing: content-box;
  border: calc(1.158 * var(--u)) solid #fff;
  border-radius: 50%;
}
.rs-dropdown__avatars img:first-child { margin-right: calc(-6.948 * var(--u)); }
.rs-dropdown__chev { padding: 0 calc(6.948 * var(--u)) 0 calc(4.632 * var(--u)); display: flex; align-items: center; }
.rs-dropdown__chev img { width: calc(10.66 * var(--u)); height: calc(6.02 * var(--u)); margin: calc(-0.7 * var(--u)) calc(-0.7 * var(--u)); max-width: none; }

.rs-chart__body { height: calc(258.961 * var(--u)); display: flex; flex-direction: column; gap: calc(19.294 * var(--u)); }
.rs-chart__plotrow { position: relative; display: flex; gap: calc(6.443 * var(--u)); height: calc(226 * var(--u)); flex: none; }
.rs-chart__ylabels {
  padding-right: calc(6.443 * var(--u));
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  font-weight: 400;
  font-size: calc(12.885 * var(--u));
  line-height: calc(12.885 * var(--u));
  color: #808080;
}
.rs-chart__ylabels span { display: block; }
.rs-chart__plot {
  position: relative;
  width: calc(641 * var(--u));
  height: calc(226 * var(--u));
  flex: none;
  display: flex;
  flex-direction: column;
  border-left: calc(1.756 * var(--u)) dashed #ccc;
}
.rs-chart__grid { flex: 1 0 0; border-bottom: calc(0.703 * var(--u)) solid #ccc; }
.rs-line { position: absolute; max-width: none; }
.rs-line--media { left: calc(-3.513 * var(--u)); top: calc(128.75 * var(--u)); width: calc(576.992 * var(--u)); height: calc(51.2745 * var(--u)); }
.rs-line--roxa  { left: calc(-3.513 * var(--u)); top: calc(75.45 * var(--u));  width: calc(565.677 * var(--u)); height: calc(86.4723 * var(--u)); }
.rs-line--lima  { left: calc(-1.437 * var(--u)); top: calc(122.62 * var(--u)); width: calc(562.164 * var(--u)); height: calc(82.9596 * var(--u)); }
.rs-dot { position: absolute; width: calc(31.705 * var(--u)); height: calc(31.705 * var(--u)); border-radius: 50%; }
.rs-dot--1 { left: calc(609.29 * var(--u)); top: calc(57.64 * var(--u)); }
.rs-dot--2 { left: calc(600.15 * var(--u)); top: calc(125.72 * var(--u)); }
.rs-chart__media-label {
  position: absolute;
  left: calc(194.37 * var(--u));
  top: calc(210.87 * var(--u));
  transform: translate(-100%, -100%);
  font-size: calc(12.885 * var(--u));
  line-height: calc(12.885 * var(--u));
  color: #808080;
  white-space: nowrap;
}
.rs-chart__foot {
  padding-left: calc(41.311 * var(--u));
  text-align: center;
  font-size: calc(12.059 * var(--u));
  line-height: calc(12.885 * var(--u));
  color: #808080;
}

/* --- Ranking por métrica --- */
.rs-rank { width: calc(355.533 * var(--u)); }
.rs-rank__head { display: flex; align-items: flex-start; justify-content: space-between; }
.rs-rank__body {
  position: relative;
  height: calc(248.806 * var(--u));
  display: flex;
  gap: calc(14.016 * var(--u));
}
.rs-rank__ylabels {
  padding-bottom: calc(38.656 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  font-size: calc(12.885 * var(--u));
  line-height: calc(25.771 * var(--u));
  color: #808080;
}
.rs-rank__bars {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  padding: calc(6.443 * var(--u)) calc(18.553 * var(--u)) 0 0;
  display: flex;
  align-items: flex-end;
  gap: calc(21.024 * var(--u));
}
.rs-rank__col {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: calc(6.443 * var(--u));
}
.rs-rank__bar {
  width: 100%;
  height: calc(var(--h) * var(--u));
  border-radius: calc(6.443 * var(--u));
  background: var(--c);
  flex: none;
}
.rs-rank__col img { width: calc(38.656 * var(--u)); height: calc(38.656 * var(--u)); max-width: none; border-radius: 50%; flex: none; }
.rs-rank__dash { position: absolute; max-width: none; height: calc(1.61 * var(--u)); }
.rs-rank__dash--1 { left: calc(38.92 * var(--u)); top: calc(136.17 * var(--u)); width: calc(425.924 * var(--u)); }
.rs-rank__dash--2 { left: calc(90.88 * var(--u)); top: calc(141.62 * var(--u)); width: calc(353.439 * var(--u)); }

/* --- Cards de redes (Instagram / Meta Ads) --- */
.rs-net {
  width: calc(458.971 * var(--u));
  height: calc(207.759 * var(--u));
  padding: calc(5.432 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: calc(1.358 * var(--u)) solid #e8e7e1;
  border-radius: calc(16.295 * var(--u));
}
.rs-net--insta { background: #e84ca7; }
.rs-net--meta  { background: #6b3bf8; }
.rs-net__head {
  padding: calc(10.863 * var(--u)) calc(16.295 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(13.579 * var(--u));
  color: #fff;
}
.rs-net__icon { width: calc(21.726 * var(--u)); height: calc(21.726 * var(--u)); flex: none; }
.rs-net__icon--fb { width: calc(21.77 * var(--u)); height: calc(21.683 * var(--u)); }
.rs-net__name { font-weight: 500; font-size: calc(19.011 * var(--u)); line-height: 1.1; }
.rs-net__body {
  flex: 1 0 0;
  min-height: 0;
  padding: calc(16.295 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(21.726 * var(--u));
  overflow: hidden;
  border-radius: calc(10.863 * var(--u));
  background: #fff;
}
.rs-net__body--meta { gap: calc(10.863 * var(--u)); }
.rs-net__profile { display: flex; align-items: center; gap: calc(10.863 * var(--u)); }
.rs-net__avatar { width: calc(43.453 * var(--u)); height: calc(43.453 * var(--u)); border-radius: 50%; flex: none; }
.rs-net__who { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: calc(5.432 * var(--u)); }
.rs-net__who-name { padding-inline: calc(2.716 * var(--u)); font-weight: 500; font-size: calc(19.011 * var(--u)); line-height: 1; white-space: nowrap; }
.rs-net__who-handle { padding-left: calc(2.716 * var(--u)); font-size: calc(16.295 * var(--u)); line-height: calc(16.295 * var(--u)); color: #808080; white-space: nowrap; }
.rs-net__menu { width: calc(24.442 * var(--u)); height: calc(43.453 * var(--u)); flex: none; }
.rs-net__stats { display: flex; gap: calc(5.432 * var(--u)); padding-inline: calc(5.432 * var(--u)); }
.rs-net__stats--meta { display: flex; align-items: center; gap: calc(10.863 * var(--u)); padding: 0; }

.rs-stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: calc(10.863 * var(--u)); }
.rs-stat--grow { flex: 1 0 0; }
.rs-stat__label {
  font-weight: 500;
  font-size: calc(14.937 * var(--u));
  line-height: calc(14.871 * var(--u));
  text-transform: uppercase;
  color: #808080;
  white-space: nowrap;
}
.rs-stat__row { display: flex; align-items: center; gap: calc(5.432 * var(--u)); padding-inline: calc(5.432 * var(--u)); }
.rs-net__stats--meta .rs-stat__row,
.rs-net__body--meta > .rs-stat .rs-stat__row { padding-inline: 0; }
.rs-stat__icon { flex: none; margin-right: calc(5.431 * var(--u)); }
.rs-stat__icon--clapper { width: calc(17.879 * var(--u)); height: calc(16.091 * var(--u)); }
.rs-stat__icon--heart { width: calc(16.295 * var(--u)); height: calc(16.295 * var(--u)); }
.rs-stat__value { font-weight: 500; font-size: calc(24.442 * var(--u)); line-height: 1.1; white-space: nowrap; }
.rs-delta {
  padding: calc(5.432 * var(--u)) calc(10.863 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5.432 * var(--u));
  border-radius: calc(5.432 * var(--u));
  background: #d7ff00;
  color: #454b21;
  font-weight: 500;
  font-size: calc(14.937 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.rs-delta--pl { margin-left: calc(2.716 * var(--u)); }
.rs-delta__trend { width: calc(22.632 * var(--u)); height: calc(11.316 * var(--u)); flex: none; }
.rs-delta__arrow { width: calc(10.863 * var(--u)); height: calc(10.863 * var(--u)); flex: none; }
.rs-net__stats--meta .rs-net__menu { margin-left: auto; }
.rs-net__stats--meta .rs-stat { min-width: 0; }

/* escala */
/* Escala (pin scroll) — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção.

   A seção é alta (100vh + distância de scroll) e o conteúdo fica "pinado" (sticky).
   O JS (escala.js) escreve o progresso do scroll em --p, de 0 a 1:
     p = 0  → frame de entrada: MacBook inteiro, sem texto
     p = 1  → frame final: MacBook recolhido em uma faixa, texto revelado */
.escala {
  --pin-distance: 150vh;
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  height: calc(100svh + var(--pin-distance));
  background: #040403;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.escala__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.escala__canvas {
  --u: calc(100cqw / 1920);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: calc(1080 * var(--u));
  transform: translateY(-50%);
}

/* ===== Texto (aparece com o scroll) ===== */
.escala__text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(369.7 * var(--u));
  padding-inline: calc(4.414 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80 * var(--u));
  text-align: center;
  font-weight: 500;
  opacity: calc((var(--p, 0) - 0.6) / 0.35);
  transform: translateY(calc((1 - var(--p, 0)) * 60 * var(--u)));
  will-change: opacity, transform;
}
.escala__title {
  width: calc(883.392 * var(--u));
  letter-spacing: calc(-2.24 * var(--u));
  line-height: 0;
}
.escala__title-regular { font-size: calc(56 * var(--u)); line-height: 1; }
.escala__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: 1;
}
.escala__lead {
  width: calc(860.569 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.64 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ===== MacBook (a tampa fecha em 3D com o scroll) =====
   A imagem é dividida na linha da dobradiça (y = 625 da imagem):
   a tampa gira em torno da borda inferior (rotateX de 0 a -90°) e a base fica parada. */
.escala__laptop {
  position: absolute;
  left: 50%;
  bottom: calc(200 * var(--u));
  transform: translateX(-50%);
  width: calc(1114 * var(--u));
  height: calc(673 * var(--u));
  perspective: calc(2600 * var(--u));
  perspective-origin: 50% 35%;
}
.escala__lid,
.escala__base {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.escala__lid img,
.escala__base img {
  position: absolute;
  left: 0;
  width: calc(1114 * var(--u));
  height: calc(673 * var(--u));
  max-width: none;
}
.escala__lid {
  top: 0;
  height: calc(625 * var(--u));
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--p, 0) * -90deg));
  backface-visibility: hidden;
  filter: brightness(calc(1 - var(--p, 0) * 0.55));
  will-change: transform;
}
.escala__lid img { top: 0; }
.escala__base {
  top: calc(625 * var(--u));
  height: calc(48 * var(--u));
}
.escala__base img { top: calc(-625 * var(--u)); }

/* Sem animação: mostra direto o estado final, sem pin */
@media (prefers-reduced-motion: reduce) {
  .escala { height: 100svh; --p: 1; }
}

/* parceiros */
/* Parceiros e Cases — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção.
   A altura é "hug": a seção cresce conforme o conteúdo que for sendo adicionado. */
.parceiros {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.parceiros__canvas {
  --u: calc(100cqw / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
}
.parceiros__content {
  width: calc(1662 * var(--u));
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  display: flex;
}
.parceiros__row {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
}

/* ===== Cabeçalho ===== */
.parceiros__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(40 * var(--u));
}
.parceiros__title-wrap {
  padding-top: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--u));
}
.parceiros__spacer { height: calc(36 * var(--u)); }
.parceiros__title-box { max-width: calc(660 * var(--u)); padding: calc(12 * var(--u)); }
.parceiros__title {
  font-weight: 600;
  font-size: calc(44 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-1.28 * var(--u));
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.parceiros__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); }
.parceiros__chip {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #393939;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* ===== Carrossel de cases (vídeos + logo da marca) ===== */
.cases {
  width: 100%;
  margin-top: calc(-44 * var(--u));           /* a logo sobe 44px acima do card */
  padding: calc(44 * var(--u)) 0 calc(102 * var(--u));
  overflow: hidden;
}
.cases__track {
  display: flex;
  width: max-content;
  margin-left: calc(-120 * var(--u));
  animation: cases-scroll var(--cases-duration, 50s) linear infinite;
}
.cases:hover .cases__track { animation-play-state: paused; }
.cases__set {
  display: flex;
  gap: calc(40 * var(--u));
  padding-right: calc(40 * var(--u));
  flex: none;
}
@keyframes cases-scroll { to { transform: translateX(-50%); } }

.cases__card {
  position: relative;
  width: calc(400 * var(--u));
  height: calc(600 * var(--u));
  flex: none;
}
.cases__video {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(24 * var(--u));
  box-shadow: 0 calc(80 * var(--u)) calc(80 * var(--u)) 0 #000;
  background: #393939;
}
.cases__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cases__logo {
  position: absolute;
  left: calc(-40 * var(--u));
  top: calc(-44.09 * var(--u));
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .cases__track { animation: none; }
  .cases { overflow-x: auto; }
}

/* ===== Card clicável ===== */
.cases__card { cursor: pointer; outline: none; }
.cases__video { transition: transform 0.25s ease, filter 0.25s ease; }
.cases__card:hover .cases__video,
.cases__card:focus-visible .cases__video { transform: scale(1.02); filter: brightness(1.08); }
.cases__card:focus-visible .cases__video { outline: 3px solid #d7ff00; outline-offset: 4px; }
/* selo de "play" ao passar o mouse */
.cases__video { position: relative; }
.cases__video::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  transform: translate(-50%, -50%) scale(0.85);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 6.5v11l9-5.5z'/></svg>") center / 50% no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.cases__card:hover .cases__video::after,
.cases__card:focus-visible .cases__video::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ===== Galeria (lightbox com player) — usa unidades da tela, não do design ===== */
.gallery {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 7, 7, 0.92);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 48px);
}
.gallery[open] { display: flex; animation: gallery-in 0.25s ease; }
.gallery::backdrop { background: transparent; }
@keyframes gallery-in { from { opacity: 0; } to { opacity: 1; } }

.gallery__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}
.gallery__video {
  display: block;
  height: min(78vh, 900px);
  max-width: min(92vw, 560px);
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.gallery__meta { display: flex; align-items: center; gap: 12px; }
.gallery__logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gallery__name { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.gallery__count { margin-left: 8px; font-size: 14px; color: #a0a0a0; }

.gallery__close,
.gallery__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.gallery__close:hover,
.gallery__nav:hover { background: rgba(255, 255, 255, 0.24); }
.gallery__close:focus-visible,
.gallery__nav:focus-visible { outline: 2px solid #d7ff00; outline-offset: 2px; }
.gallery__close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; }
.gallery__nav { width: 56px; height: 56px; flex: none; }

@media (max-width: 720px) {
  .gallery__nav { position: absolute; bottom: 24px; width: 48px; height: 48px; }
  .gallery__nav--prev { left: 24px; }
  .gallery__nav--next { right: 24px; }
}

/* casos */
/* Cases de sucesso — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção.
   Altura "hug". Cada case é um <article class="casos__card"> dentro do carrossel. */
.casos {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.casos__canvas {
  --u: calc(100cqw / 1920);
  position: relative;
  padding-block: calc(120 * var(--u));
}

/* ===== Carrossel (rolagem horizontal com snap) ===== */
.casos__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.casos__viewport::-webkit-scrollbar { display: none; }
.casos__track {
  display: flex;
  gap: calc(60 * var(--u));
  width: max-content;
  padding-inline: calc(80 * var(--u));
  align-items: stretch;
}

/* ===== Card de case ===== */
.casos__card {
  flex: none;
  display: flex;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-margin-left: calc(80 * var(--u));
  background: #282828;
  border: calc(8 * var(--u)) solid #393939;
  border-radius: calc(40 * var(--u));
}

/* Card que não está ativo fica com menos destaque (o JS marca o ativo com .is-active) */
.casos__card { transition: opacity 0.4s ease; }
.casos__viewport.is-ready .casos__card:not(.is-active) { opacity: 0.4; }

/* Coluna de texto */
.casos__info {
  width: calc(840 * var(--u));
  flex: none;
  padding: calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}
.casos__logo {
  width: calc(217.218 * var(--u));
  height: calc(127.541 * var(--u));
  max-width: none;
  flex: none;
}
/* logo quadrada (ex.: OLX): mesma altura do logo da QCY, largura proporcional */
.casos__logo--square { width: calc(127.541 * var(--u)); border-radius: 50%; object-fit: cover; }
.casos__text {
  padding-inline: calc(6 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}
.casos__title {
  font-weight: 600;
  font-size: calc(48 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-1.92 * var(--u));
}
.casos__desc {
  padding-inline: calc(6 * var(--u));
  font-weight: 400;
  font-size: calc(24 * var(--u));
  line-height: 1.3;
  color: #ccc;
}

/* Números do case */
.casos__stats {
  list-style: none;
  padding: calc(28 * var(--u)) 0 0;
  display: flex;
  justify-content: flex-start;
  gap: calc(30 * var(--u));
}
.casos__stat {
  padding: calc(24 * var(--u)) calc(30 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(15.12 * var(--u));
  background: #fff;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.12));
  white-space: nowrap;
}
.casos__stat-value {
  display: flex;
  align-items: center;
  gap: calc(15.12 * var(--u));
  font-weight: 500;
  font-size: calc(27.216 * var(--u));
  line-height: 1;
  color: #141414;
}
.casos__stat-suffix {
  font-weight: 400;
  font-size: calc(21.6 * var(--u));
  letter-spacing: calc(-0.864 * var(--u));
}
.casos__stat-label {
  font-weight: 500;
  font-size: calc(15.12 * var(--u));
  line-height: 1.1;
  text-align: center;
  color: #808080;
}

/* Vídeos (dois "celulares" lado a lado) */
.casos__media {
  padding-inline: calc(40 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--u));
  flex: none;
  background: #040403;
}
.casos__phone {
  width: calc(402.013 * var(--u));
  padding: calc(7.586 * var(--u));
  overflow: hidden;
  border-radius: calc(33.663 * var(--u));
  background: #393939;
  box-shadow: 0 calc(3.366 * var(--u)) calc(13.465 * var(--u)) rgba(0, 0, 0, 0.12);
}
.casos__phone video {
  display: block;
  width: 100%;
  height: calc(653.914 * var(--u));
  object-fit: cover;
  border-radius: calc(26.924 * var(--u));
  background: #393939;
}

/* ===== Setas (no topo, alinhadas à esquerda com o primeiro card) ===== */
.casos__nav {
  display: flex;
  gap: 16px;
  padding: 0 calc(80 * var(--u)) calc(40 * var(--u));
}
.casos__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 20%;
  background: #393939;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.casos__arrow svg { width: 20px; height: auto; }
.casos__arrow:hover:not(:disabled) { background: #6b3bf8; }
.casos__arrow:focus-visible { outline: 2px solid #d7ff00; outline-offset: 2px; }
.casos__arrow:disabled { opacity: 0.3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .casos__viewport { scroll-behavior: auto; }
}

/* fullservice */
/* Full Service — acordeão que abre abaixo de "Planos" quando o visitante clica em
   "A gente faz para você". A altura anima de 0 até o conteúdo (grid 0fr → 1fr). */
.fullservice {
  display: grid;
  grid-template-rows: 0fr;
  background: #211f1f;
  visibility: hidden;
  transition: grid-template-rows 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.8s;
}
.fullservice.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}
.fullservice__inner {
  min-height: 0;
  overflow: clip; /* clip (e não hidden) para não quebrar seções com sticky/pin dentro */
}

/* Marcador temporário enquanto as dobras reais não chegam */
.fullservice__placeholder {
  padding: 160px 24px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 21px;
  color: #808080;
  border-top: 1px dashed #393939;
}

@media (prefers-reduced-motion: reduce) {
  .fullservice { transition: none; }
}

/* fsintro */
/* Full Service · abertura — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção.

   Mesma estrutura da dobra "escala": a seção é alta (100vh + distância de scroll) e o conteúdo
   fica PINADO (sticky) enquanto o notebook abre/fecha. O fsintro.js escreve em --p (0 → 1) o
   progresso do scroll dentro da seção:
     p = 0 → MacBook aberto (planilha), sem texto
     p = 1 → MacBook fechado em uma faixa, texto revelado
   Ao chegar na dobra, o próprio JS rola a página sozinho até o estado final (p = 1). */
.fsintro {
  --pin-distance: 120svh;
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  height: calc(100svh + var(--pin-distance));
  background: #040403;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.fsintro__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.fsintro__canvas {
  --u: calc(100cqw / 1920);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: calc(1080 * var(--u));
  transform: translateY(-50%);
}

/* ===== Selo "Full-Service" ===== */
.fsintro__badge-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(88.271 * var(--u));
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.fsintro__tag {
  display: block;
  width: calc(141 * var(--u));
  height: calc(42 * var(--u));
  max-width: none;
}

/* ===== Texto (aparece no fim da animação) ===== */
.fsintro__text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(292 * var(--u));
  padding-inline: calc(4.414 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80 * var(--u));
  text-align: center;
  opacity: calc((var(--p, 0) - 0.6) / 0.35);
  transform: translateY(calc((1 - var(--p, 0)) * 60 * var(--u)));
  will-change: opacity, transform;
}
.fsintro__title {
  letter-spacing: calc(-2.4 * var(--u));
  line-height: 0;
}
.fsintro__title-regular {
  font-weight: 500;
  font-size: calc(52 * var(--u));
  line-height: 1;
}
.fsintro__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: calc(56 * var(--u));
  line-height: 1.2;
}
.fsintro__lead {
  width: calc(860.569 * var(--u));
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.64 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ===== MacBook (a tampa fecha em 3D) ===== */
.fsintro__laptop {
  position: absolute;
  left: 50%;
  bottom: calc(200 * var(--u));
  transform: translateX(-50%);
  width: calc(1114 * var(--u));
  height: calc(673 * var(--u));
  perspective: calc(2600 * var(--u));
  perspective-origin: 50% 35%;
}
.fsintro__lid,
.fsintro__base {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.fsintro__lid img,
.fsintro__base img {
  position: absolute;
  left: 0;
  width: calc(1114 * var(--u));
  height: calc(673 * var(--u));
  max-width: none;
}
.fsintro__lid {
  top: 0;
  height: calc(625 * var(--u));
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--p, 0) * -90deg));
  backface-visibility: hidden;
  filter: brightness(calc(1 - var(--p, 0) * 0.55));
  will-change: transform;
}
.fsintro__lid img { top: 0; }
.fsintro__base {
  top: calc(625 * var(--u));
  height: calc(48 * var(--u));
}
.fsintro__base img { top: calc(-625 * var(--u)); }


/* fscomparativo */
/* Full Service · comparativo — medidas do Figma (frame de 1920 × 1080). 1 unidade (--u) = 1px do design. */
.fscomp {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.fscomp__canvas {
  --u: calc(100cqw / 1920);
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  justify-content: center;
}
.fscomp__row {
  width: calc(1500 * var(--u));
  min-height: calc(511.25 * var(--u));
  display: flex;
  gap: calc(75 * var(--u));
  align-items: flex-start;
}

/* Texto */
.fscomp__copy {
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fscomp__top { padding-top: calc(25 * var(--u)); display: flex; flex-direction: column; gap: calc(75 * var(--u)); }
.fscomp__title { font-weight: 500; letter-spacing: calc(-1.6 * var(--u)); line-height: 0; text-box: trim-both cap alphabetic; }
.fscomp__title-regular { font-size: calc(40 * var(--u)); line-height: 1.2; }
.fscomp__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  font-size: calc(45 * var(--u));
  line-height: 1;
}
.fscomp__lead {
  width: calc(517.5 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.525 * var(--u));
  text-box: trim-both cap alphabetic;
}
.fscomp__bottom { width: calc(517.5 * var(--u)); letter-spacing: calc(-0.525 * var(--u)); text-box: trim-both cap alphabetic; }
.fscomp__bottom-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(32 * var(--u));
  line-height: 1.3;
}
.fscomp__bottom-text { 
  margin-top: calc(34 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  padding-bottom: 12px;
}

/* Tabela */
.fscomp__table { width: calc(867.5 * var(--u)); flex: none; background: #000; }
.fscomp__head, .fscomp__line { display: flex; gap: calc(15 * var(--u)); align-items: center; }
.fscomp__head { padding-block: 0; }
.fscomp__line { padding-block: calc(5 * var(--u)); }
.fscomp__line:nth-of-type(even) { background: #282828; }
.fscomp__line:nth-of-type(odd)  { background: #191919; }
.fscomp__cell {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(12.5 * var(--u)) calc(15 * var(--u));
  font-weight: 400;
  font-size: calc(17.5 * var(--u));
  line-height: 1.2;
  color: #fff;
}
.fscomp__cell:first-child { flex: none; width: calc(386.25 * var(--u)); }
.fscomp__cell--dim { color: #808080; }
.fscomp__cell--head { padding-block: calc(15 * var(--u)); font-weight: 500; }
.fscomp__cell--head:last-child { padding-block: calc(15 * var(--u)); }
.fscomp__pill {
  height: calc(30 * var(--u));
  padding-inline: calc(15 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(10 * var(--u));
  background: #6b3bf8;
  white-space: nowrap;
}

/* fsequipe */
/* Full Service · execução — medidas do Figma (frame de 1920 × 1080). 1 unidade (--u) = 1px do design. */
.fsequipe {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.fsequipe__canvas {
  --u: calc(100cqw / 1920);
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  justify-content: center;
}
.fsequipe__content { width: calc(1500 * var(--u)); display: flex; flex-direction: column; gap: calc(60 * var(--u)); }

.fsequipe__title { padding-inline: calc(4 * var(--u)); font-weight: 600; letter-spacing: calc(-1.28 * var(--u)); line-height: 0; }
.fsequipe__title-regular { font-size: calc(32 * var(--u)); line-height: 1; }
.fsequipe__title-accent { font-family: 'Playfair Display', serif; font-weight: 600; font-size: calc(36 * var(--u)); line-height: 1; }

.fsequipe__cards { display: flex; gap: calc(20 * var(--u)); align-items: stretch; }
.fsequipe__card {
  flex: 1 0 0;
  min-width: 0;
  min-height: calc(258 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: #323232;
  padding-bottom: 20px;
}
.fsequipe__card-top { height: calc(113 * var(--u)); padding: calc(28 * var(--u)); flex: none; }
.fsequipe__card-top img { display: block; width: calc(40 * var(--u)); height: calc(40 * var(--u)); max-width: none; }
.fsequipe__card-body { flex: 1 0 0; padding: calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.fsequipe__card-title { 
  font-weight: 500; 
  font-size: calc(18 * var(--u));
  line-height: 1.1; 
}
.fsequipe__card-text { 
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: 1.5; color: #ccc;
}

/* fsoferta */
/* Full Service · oferta e próximas etapas. 1 unidade (--u) = 1px do design (base 1920).
   Composição do Figma (2 blocos de 540 / 580), com tema escuro dos cards de planos. Altura "hug". */
.fsoferta {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.fsoferta__canvas {
  --u: calc(100cqw / 1920);
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  justify-content: center;
}
.fsoferta__content { width: calc(1200 * var(--u)); display: flex; flex-direction: column; gap: calc(60 * var(--u)); }

/* Cabeçalho */
.fsoferta__head { padding-inline: calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.fsoferta__title { font-weight: 600; font-size: calc(40 * var(--u)); line-height: 1.15; letter-spacing: calc(-1.6 * var(--u)); }
.fsoferta__title-accent { font-family: 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: calc(45 * var(--u)); }
.fsoferta__lead { max-width: calc(700 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.4; letter-spacing: calc(-0.42 * var(--u)); color: #ccc; }

.fsoferta__grid { display: flex; gap: calc(80 * var(--u)); align-items: stretch; }

/* ===== Card de oferta (mesmo tema do plano Campanha Avulsa) ===== */
.oferta {
  width: calc(540 * var(--u));
  flex: none;
  padding: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  background: #323232;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) 0;
}
.oferta__name { font-weight: 500; font-size: calc(21 * var(--u)); line-height: 1.1; }
.oferta__price { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.oferta__amount { font-weight: 600; font-size: calc(56 * var(--u)); line-height: 1; letter-spacing: calc(-2.24 * var(--u)); }
.oferta__per { font-weight: 500; font-size: calc(21 * var(--u)); color: #b9b7ba; }

.oferta__list, .oferta__prazos-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.oferta__list li {
  position: relative;
  padding-left: calc(30 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  color: #ccc;
}
.oferta__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(3 * var(--u));
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  background: #d7ff00;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
}

.oferta__prazos { margin-top: calc(10 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px dashed #808080; display: flex; flex-direction: column; gap: calc(16 * var(--u)); margin-bottom: auto; }
.oferta__prazos-title { font-weight: 500; font-size: calc(21 * var(--u)); line-height: 1.1; }
.oferta__prazos-list li { font-size: calc(16 * var(--u)); line-height: 1.4; color: #ccc; }
.oferta__prazos-list strong { display: block; font-weight: 500; font-size: calc(17 * var(--u)); color: #fff; }

.oferta__cta {
  width: 100%;
  margin-top: calc(20 * var(--u));
  padding: calc(20 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  background: #f1f0ea;
  color: #141414;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.oferta__cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.oferta__cta:focus-visible { outline: 2px solid #d7ff00; outline-offset: 3px; }

/* ===== Próximas etapas: linha do tempo vertical ===== */
.etapas { flex: 1 0 0; min-width: 0; padding-top: calc(10 * var(--u)); }
.etapas__kicker {
  margin-bottom: calc(40 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(0.9 * var(--u));
  text-transform: uppercase;
  color: #808080;
}
.etapas__list { list-style: none; padding: 0; counter-reset: etapa; }
.etapas__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  padding-bottom: calc(44 * var(--u));
}
.etapas__item:last-child { padding-bottom: 0; }
/* linha que liga os marcos */
.etapas__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(23 * var(--u));
  top: calc(48 * var(--u));
  bottom: calc(-2 * var(--u));
  width: 2px;
  background: #393939;
}
.etapas__dot {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #393939;
  color: #fff;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1;
}
.etapas__item:first-child .etapas__dot { background: #6b3bf8; }
.etapas__item:last-child .etapas__dot { background: #d7ff00; color: #454b21; }
.etapas__text { font-weight: 500; font-size: calc(26 * var(--u)); line-height: 1.2; letter-spacing: calc(-0.52 * var(--u)); }

/* planos */
/* Planos — medidas do Figma (frame de 1920 × 1080).
   1 unidade (--u) = 1px do design, escalando com a largura da seção.
   Tema escuro nos cards (mesma família visual dos cards de "contexto" e "cases").
   Altura "hug". */
.planos {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #211f1f;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.planos__canvas {
  --u: calc(100cqw / 1920);
  padding: calc(120 * var(--u)) calc(80 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--u));
}

/* ===== Cabeçalho ===== */
.planos__head {
  width: calc(1500 * var(--u));
  margin-inline: auto;
  padding: calc(20 * var(--u)) calc(20 * var(--u)) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-weight: 500;
}
.planos__head-title {
  width: calc(803.23 * var(--u));
  letter-spacing: calc(-1.28 * var(--u));
  text-box: trim-both cap alphabetic;
}
.planos__title-line { font-size: calc(32 * var(--u)); line-height: 1.2; }
.planos__title-accent {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.2;
}
.planos__head-text {
  width: calc(579.106 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.42 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ===== Cards ===== */
.planos__cards {
  display: flex;
  align-items: flex-end;   /* alturas diferentes, alinhados pela base */
  justify-content: center;
  gap: calc(24 * var(--u));
  padding-top: calc(36 * var(--u));
}

.plano {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding: calc(34 * var(--u));
  background: #323232;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) 0;
}
.plano--free {
  background: transparent;
  border: 1px dashed #808080;
  border-radius: calc(16 * var(--u));
}
.plano--agency { padding-top: calc(40 * var(--u)); }
.plano--pro {
  background: #141414;
  border-radius: calc(20 * var(--u));
  padding-top: calc(46 * var(--u));
}

.plano__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  min-height: calc(32 * var(--u));
}
.plano__name {
  font-weight: 500;
  font-size: calc(21 * var(--u));
  line-height: 1.1;
  white-space: nowrap;
}
.plano__tag {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(6 * var(--u));
  font-weight: 500;
  font-size: calc(14 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.plano__tag--soft { background: #efeaff; color: #3b169c; }
.plano__tag--lime { background: #d7ff00; color: #454b21; }

.plano__price { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.plano__amount {
  font-weight: 600;
  font-size: calc(56 * var(--u));
  line-height: 1;
  letter-spacing: calc(-2.24 * var(--u));
}
.plano__per {
  font-weight: 500;
  font-size: calc(21 * var(--u));
  line-height: 1;
  color: #b9b7ba;
}

/* Lista de benefícios com ✓ */
.plano__list {
  list-style: none;
  padding: 0 0 calc(24 * var(--u));
  margin-bottom: auto;   /* empurra o botão para a base */
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}
.plano__list li {
  position: relative;
  padding-left: calc(30 * var(--u));
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  color: #ccc;
}
.plano__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(3 * var(--u));
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  background: #d7ff00;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
}
.plano--pro .plano__list li { color: #fff; }
.plano__note {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  color: #b9b7ba;
}

/* Botões */
.plano__cta {
  width: 100%;
  padding: calc(20 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  font-family: inherit;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.plano__cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.plano__cta:focus-visible { outline: 2px solid #d7ff00; outline-offset: 3px; }
.plano__cta--purple { background: #6b3bf8; color: #fff; }
.plano__cta--light  { background: #f1f0ea; color: #141414; }
.plano__cta--lime   { background: #d7ff00; color: #454b21; }

/* ===== Aviso ===== */
.planos__aviso {
  min-height: calc(95.301 * var(--u));
  padding: calc(20 * var(--u)) calc(24.861 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(20 * var(--u));
  background: #323232;
  color: #fff;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.43;
  text-align: center;
}

/* ===== Convite (tamanhos do Figma +40%): "Prefere deixar a operação com a gente?" ===== */
.planos__ajuda {
  align-self: center;
  display: flex;
  align-items: center;
  padding: calc(5.6 * var(--u));
  border-radius: calc(16.8 * var(--u));
  background: #fff;
}
.planos__ajuda-text {
  padding-inline: calc(28 * var(--u));
  font-weight: 500;
  font-size: calc(19.6 * var(--u));
  line-height: calc(28 * var(--u));
  color: #141414;
  white-space: nowrap;
}
.planos__ajuda-btn {
  height: calc(58.8 * var(--u));
  padding: calc(22.4 * var(--u)) calc(39.2 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16.8 * var(--u));
  border: 0;
  border-radius: calc(11.2 * var(--u));
  background: #141414;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: calc(19.6 * var(--u));
  line-height: calc(22.4 * var(--u));
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}
.planos__ajuda-btn img { transition: transform 0.4s ease; width: calc(19.6 * var(--u)); height: calc(19.6 * var(--u)); max-width: none; }
.planos__ajuda-btn:hover { background: #6b3bf8; }
.planos__ajuda-btn:focus-visible { outline: 2px solid #d7ff00; outline-offset: 3px; }
.planos__ajuda-btn[aria-expanded='true'] img { transform: rotate(180deg); }

/* Entrada: sobe de baixo com fade-in quando aparece na tela (data-reveal → scroll-reveal.js) */
.planos__ajuda[data-reveal] {
  transform: translateY(calc(90 * var(--u)));
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.planos__ajuda[data-reveal].is-visible { transform: none; }

/* footer */
/* Rodapé — medidas do Figma (frame de 1811 px de largura).
   1 unidade (--u) = 1px do design, escalando com a largura da seção.
   Altura "hug". */
.rodape {
  container-type: inline-size;
  min-height: 0;
  padding-inline: 0;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.rodape__canvas {
  --u: calc(100cqw / 1811);
  padding: calc(55 * var(--u)) calc(25 * var(--u)) calc(120 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(29 * var(--u));
  align-items: center;
}

/* ===== Topo: logo + frase ===== */
.rodape__top {
  width: calc(1500 * var(--u));
  padding: calc(20 * var(--u)) calc(20 * var(--u)) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.rodape__logo {
  width: calc(254.466 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rodape__logo img { width: calc(35.403 * var(--u)); height: calc(35.403 * var(--u)); }
.rodape__logo-text {
  font-weight: 600;
  font-size: calc(30.977 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.6195 * var(--u));
  white-space: nowrap;
}
.rodape__tagline {
  width: calc(579.106 * var(--u));
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.36 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ===== Corpo ===== */
.rodape__body {
  width: calc(1486 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rodape__social {
  list-style: none;
  padding: 0;
  display: flex;
  gap: calc(12 * var(--u));
}
.rodape__social-link {
  width: calc(53.5 * var(--u));
  height: calc(53.5 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(14 * var(--u));
  background: #2a2a2a;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rodape__social-link:hover { background: #6b3bf8; }
.rodape__social-link:focus-visible { outline: 2px solid #d7ff00; outline-offset: 2px; }
.rodape__social-link svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

.rodape__divider {
  border: 0;
  height: 1px;
  background: #333;
  margin: 0;
}
.rodape__divider--short {
  width: calc(1340 * var(--u));
  margin-top: calc(56 * var(--u));
}

.rodape__legal {
  width: calc(1340 * var(--u));
  padding-top: calc(38 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--u));
  font-weight: 400;
  font-size: calc(17 * var(--u));
  line-height: 1.55;
  color: #808080;
}
.rodape__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rodape__link:hover { color: #d7ff00; }

.rodape .rodape__divider:not(.rodape__divider--short) { margin-top: calc(56 * var(--u)); }

.rodape__bottom {
  padding-top: calc(28 * var(--u));
  display: flex;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  font-weight: 400;
  font-size: calc(17 * var(--u));
  line-height: 1.5;
  color: #808080;
}
.rodape__heart { color: #e84ca7; }

/* responsive/base */
/* ===== Fundação responsiva =====
   Camada ADITIVA: tokens novos (não existem no desktop) + regras só abaixo de 1200px.
   Breakpoints do projeto:  desktop ≥1200 (intocado) · tablet 768–1199 · mobile ≤767 */

:root {
  /* Tipografia fluida (tablet/mobile) */
  --r-fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);   /* 16–18px */
  --r-fs-label: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13–14px */
  --r-fs-title: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);  /* 28–40px */
  --r-fs-display: clamp(2rem, 1.1rem + 3.4vw, 3rem);     /* 32–48px (abertura) */

  /* Espaçamento e layout */
  --r-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --r-section-y: clamp(3rem, 8vw, 5rem);
  --r-readable: 42rem;

  /* Toque */
  --r-tap: 44px;
}

@media (max-width: 1199.98px) {
  /* Rede de segurança contra rolagem horizontal. `clip` (e não `hidden`) para não criar
     contêiner de rolagem e não quebrar seções com sticky. */
  html, body { overflow-x: clip; }

  /* Logo do rodapé das seções: some no tablet/mobile (no desktop continua) */
  .agenda__logo, .sobre__logo, .mercado__logo, .ugc__logo, .contexto__logo { display: none; }

  /* Sem atraso de duplo-toque e sem flash cinza ao tocar */
  a, button, [role='tab'], summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 767.98px) {
  /* Mídia nunca maior que o contêiner (as seções que precisarem de largura fixa usam max-width: none) */
  img, video { max-width: 100%; }
}

/* responsive/hero */
/* Hero — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: as duas colunas viram uma pilha centralizada — logo e título em cima,
   com tamanho fluido em rem/clamp, e o vídeo do motion embaixo, centralizado. */

@media (max-width: 1199.98px) {
  .hero .hero__canvas {
    height: auto;
    padding: 120px var(--r-gutter) var(--r-section-y);
  }

  .hero .hero__inner {
    width: 100%;
    max-width: 44rem;
    padding-top: 0;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 7vw, 4rem);
  }

  /* Logo + título: centralizados, acima do card */
  .hero .hero__top {
    flex: none;
    align-self: auto;
    width: 100%;
    align-items: center;
    padding-bottom: 0;
    gap: clamp(1.25rem, 3.5vw, 2rem);
  }
  .hero .hero__logo {
    width: auto;
    gap: 0.625rem;
  }
  .hero .hero__logo img { width: 1.75rem; height: 1.75rem; }
  .hero .hero__logo-text {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
  }
  .hero .hero__title {
    --t: var(--r-fs-display);
    width: 100%;
    max-width: 36rem;
    padding-inline: 0;
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-wrap: balance;
  }
  .hero .hero__title-regular { font-size: var(--t); line-height: 1.1; }
  .hero .hero__title-accent  { font-size: calc(var(--t) * 1.143); line-height: 1.1; } /* 64/56 do desktop */

  /* Vídeo: centralizado, largura total da pilha até um limite confortável */
  .hero .hero__media {
    flex: none;
    width: 100%;
    max-width: 36rem;
    justify-content: center;
  }
  .hero .hero__screen { width: 100%; }

  .hero .hero__media { animation-name: hero-rise-r; }
}

/* a subida do desktop é em --u (proporcional à tela); aqui fica fixa */
@keyframes hero-rise-r {
  from { translate: 0 3rem; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

@media (max-width: 767.98px) {
  /* Hero ocupa a tela inteira: logo no topo, título e card centralizados no espaço restante.
     min-height (e não height) para não cortar nada em telas baixas; svh ignora a barra do navegador. */
  .hero .hero__canvas {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: max(1.75rem, env(safe-area-inset-top));
    padding-bottom: 2.5rem;
  }
  .hero .hero__inner { justify-content: center; gap: 2.25rem; }
  .hero .hero__top { gap: 2.5rem; }
  .hero .hero__title { --t: clamp(1.875rem, 8.2vw, 2.5rem); } /* 30–40px */
}

/* responsive/agenda */
/* Agenda — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: o canvas de 1920×1080 (tudo em --u) vira uma coluna de verdade, com altura
   natural: título em cima e painel da lista embaixo. O logo do rodapé não aparece (ver base.css).
   Tamanhos em rem/clamp, sem depender da largura do canvas. */

@media (max-width: 1199.98px) {
  .agenda .agenda__canvas {
    height: auto;
    min-height: 0;
    padding: var(--r-section-y) var(--r-gutter);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(2rem, 6vw, 3rem);
  }

  .agenda .agenda__content {
    width: 100%;
    max-width: 44rem;
    flex-direction: column;
    align-items: stretch;
    gap: calc(clamp(1.75rem, 5vw, 2.5rem) + 40px); /* respiro headline → conteúdo */
  }

  /* Título: texto real, fluido */
  .agenda .agenda__intro { flex: none; padding-top: 0; }
  .agenda .agenda__title {
    --t: calc(var(--r-fs-title) * 0.8);
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-box: none;
    text-wrap: balance;
  }
  .agenda .agenda__title-regular { font-size: var(--t); line-height: 1.2; }
  .agenda .agenda__title-accent  { font-size: calc(var(--t) * 1.125); line-height: 1.2; } /* 50,6/45 do desktop */

  /* Lista */
  .agenda .agenda__panel {
    width: 100%;
    font-size: calc(var(--r-fs-body) * 0.8);
    line-height: 1.3;
  }
  .agenda .agenda__panel-head { padding: 1.125rem 1.25rem; }
  .agenda .agenda__row { justify-content: flex-start; gap: 0.5rem; padding: 0.25rem 0.5rem; }
  .agenda .agenda__num,
  .agenda .agenda__text { padding: 0.75rem 0.75rem; }
  .agenda .agenda__row--first .agenda__num { width: auto; }
  .agenda .agenda__num { min-width: 2.25rem; text-align: center; }
}

@media (max-width: 767.98px) {
  .agenda .agenda__title { --t: calc(clamp(1.75rem, 7.4vw, 2rem) * 0.8); } /* 22–26px */
  .agenda .agenda__title-regular br { display: none; }          /* a quebra forçada do desktop não faz sentido em coluna estreita */
  .agenda .agenda__panel-head { font-size: calc(var(--r-fs-body) * 0.8); }
}

/* responsive/sobre */
/* Sobre nós — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: o canvas de 1920×1080 vira uma coluna. O texto (título, frases, minis, tagline)
   vem primeiro, com tamanho fluido e quebra de linha liberada; a grade de 13 creators (4/5/4)
   vem depois, como prova visual, com avatares fluidos. O logo do rodapé não aparece (ver base.css). */

@media (max-width: 1199.98px) {
  .sobre .sobre__canvas {
    height: auto;
    min-height: 0;
    padding: var(--r-section-y) var(--r-gutter);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* No DOM a grade vem antes do texto; aqui o texto vem primeiro */
  .sobre .sobre__content {
    width: 100%;
    max-width: 44rem;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: clamp(2.5rem, 7vw, 3.5rem);
  }
  /* Mobile: ordem do DOM — grade de creators em cima, texto embaixo */
  @media (max-width: 767.98px) {
    .sobre .sobre__content { flex-direction: column; }
  }

  /* Texto */
  .sobre .sobre__text { flex: none; gap: clamp(1.25rem, 4vw, 1.75rem); }
  .sobre .sobre__title {
    --t: var(--r-fs-title);
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-box: none;
  }
  .sobre .sobre__title-accent  { font-size: calc(var(--t) * 1.143); }  /* 64/56 do desktop */
  .sobre .sobre__title-space   { font-size: calc(var(--t) * 0.6); }
  .sobre .sobre__title-regular { font-size: var(--t); line-height: 1.2; }

  .sobre .sobre__body  { gap: clamp(1.75rem, 5vw, 2.5rem); text-align: center; }
  .sobre .sobre__lines { gap: 0.75rem; }
  .sobre .sobre__line {
    --l: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);                          /* 18–24px */
    font-size: var(--l);
    line-height: 1.35;
    letter-spacing: -0.02em;
    white-space: normal;
    text-wrap: pretty;
    text-box: none;
  }
  .sobre .sobre__line--fixed { width: auto; }
  .sobre .sobre__accent-sm { font-size: 1.125em; }

  /* "Conectamos negócios à [rostos] + de 35 mil creators." — quebra se faltar espaço */
  .sobre .sobre__line-row { flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.625rem; }
  .sobre .sobre__mini {
    margin-right: -0.625rem;
    border-radius: 999px;
  }
  .sobre .sobre__mini:last-child { margin-right: 0; }
  .sobre .sobre__mini img { width: 2.25rem; height: 2.25rem; }

  .sobre .sobre__tagline {
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);                    /* 20–28px */
    line-height: 1.3;
    letter-spacing: -0.02em;
    white-space: normal;
    text-box: none;
  }

  /* Grade de creators (4 / 5 / 4) */
  .sobre .sobre__creators { width: 100%; gap: calc(clamp(0.625rem, 2.5vw, 1rem) * 1.2); }
  .sobre .sobre__row { gap: calc(clamp(0.5rem, 2vw, 0.875rem) * 1.2); padding-inline: 0; }
  .sobre .sobre__avatar {
    width: calc(clamp(2.75rem, 12.5vw, 4.5rem) * 1.2);                /* 53–86px (+20%) */
    height: calc(clamp(2.75rem, 12.5vw, 4.5rem) * 1.2);
  }
}

/* Tablet: frases curtas com quebra equilibrada */
@media (max-width: 1199.98px) {
  .sobre .sobre__lines { gap: 1rem; }
  .sobre .sobre__line,
  .sobre .sobre__tagline { text-wrap: balance; }
  .sobre .sobre__lines > .sobre__line:first-child { font-size: calc(var(--l, 1.25rem) * 1.15); }
  .sobre .sobre__tagline { padding-top: 0.25rem; }
}

/* Mobile — medidas do Figma (SeuInfluencer, nó 7465:22636, frame ~348px):
   título 35,7px, frases 20,4px (itálico 22,97px), tagline 22,97px em duas linhas,
   rostos de 25,5px. As frases ficam empilhadas e juntas, sem destaque extra na primeira. */
@media (max-width: 767.98px) {
  .sobre .sobre__text { gap: 40px; }
  .sobre .sobre__title { --t: 35.728px; letter-spacing: -0.0605em; }
  .sobre .sobre__title-accent { font-size: 40.833px; }
  .sobre .sobre__title-space  { font-size: 60.788px; }
  .sobre .sobre__title-regular { font-size: 35.728px; }

  .sobre .sobre__body { gap: 40px; }
  .sobre .sobre__lines { gap: 5px; }
  .sobre .sobre__line,
  .sobre .sobre__lines > .sobre__line:first-child {
    font-size: 20.416px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: wrap;
  }
  .sobre .sobre__lines > .sobre__line:first-child { margin-bottom: 7.76px; }      /* 12,76 − 5 */
  .sobre .sobre__accent-sm { font-size: 22.968px; }

  /* "Conectamos negócios à" numa linha; abaixo, rostos + "+ de 35 mil creators." */
  .sobre .sobre__line-row { gap: 8px 5.104px; }
  .sobre .sobre__line-row > .sobre__line:first-child { flex-basis: 100%; }
  .sobre .sobre__minis { padding-left: 0; }
  .sobre .sobre__mini { margin-right: -11.018px; }
  .sobre .sobre__mini:last-child { margin-right: 0; }
  .sobre .sobre__mini img { width: 25.52px; height: 25.52px; }

  .sobre .sobre__tagline {
    font-size: 22.968px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;                                                          /* "Conteúdo como serviço, / não como aposta." */
    padding-top: 0;
  }
}

/* responsive/mercado */
/* Mercado — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia (Figma SeuInfluencer, nó 7468:22673): a linha "foto | textos | foto" vira dois
   cartões, cada um com a foto em cima e o texto embaixo:
     • tablet (≥640px): os dois cartões lado a lado, como no Figma;
     • mobile estreito (<640px): carrossel horizontal, um cartão por vez (swipe nativo + snap).
   Cada foto continua sendo a composição original (foto + faixa de círculos + borda ondulada),
   em --u, com escala própria (--side-w). No Figma, 260,5px = 400 unidades do desktop.
   O logo do rodapé não aparece (ver base.css). */

@media (max-width: 1199.98px) {
  .mercado .mercado__canvas {
    height: auto;
    padding: var(--r-section-y) var(--r-gutter);
  }
  .mercado .mercado__inner {
    height: auto;
    max-width: 56rem;
    justify-content: flex-start;
    gap: clamp(2.5rem, 7vw, 3.5rem);
  }

  /* Cabeçalho */
  .mercado .mercado__header {
    --h: var(--r-fs-title);
    padding-top: 0;
    gap: 0.75rem;
    line-height: 1.2;
  }
  .mercado .mercado__kicker {
    width: auto;
    letter-spacing: -0.03em;
    text-box: none;
  }
  .mercado .mercado__kicker-regular { font-size: calc(var(--h) * 0.65); line-height: 1.2; }
  .mercado .mercado__kicker-space   { font-size: calc(var(--h) * 0.37); line-height: 1.2; }
  .mercado .mercado__kicker-accent  { font-size: calc(var(--h) * 0.74); line-height: 1.2; }
  .mercado .mercado__headline {
    font-size: var(--h);
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-box: none;
    text-wrap: balance;
  }

  /* Linha principal: o contêiner dos textos "some" e cada bloco vira item da grade.
     Linha 1 = fotos, linha 2 = textos; coluna 1 = Influenciadores, coluna 2 = UGC. */
  .mercado .mercado__row {
    --side-w: clamp(16.28rem, 32vw, 22rem);                               /* 260,5px no Figma */
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, var(--side-w));
    justify-content: center;
    align-items: start;
    column-gap: clamp(1.75rem, 4vw, 2.5rem);                              /* 28px no Figma */
    row-gap: 26.049px;
  }
  .mercado .mercado__texts { display: contents; }
  .mercado .mercado__side--left   { grid-area: 1 / 1; }
  .mercado .mercado__side--right  { grid-area: 1 / 2; }
  .mercado .mercado__text--top    { grid-area: 2 / 1; }
  .mercado .mercado__text--bottom { grid-area: 2 / 2; }

  /* Foto: a mesma composição, em escala própria (400 unidades = largura do bloco) */
  .mercado .mercado__side {
    --u: calc(var(--side-w) / 400);
    width: var(--side-w);
    height: calc(533.333 * var(--u));
  }

  /* Textos (alinhados à esquerda, na largura da foto) */
  .mercado .mercado__text {
    gap: 26.049px;
    align-items: flex-start;
    text-align: left;
    padding: 0 0 0 4px;
  }
  .mercado .mercado__title {
    --st: clamp(1.5725rem, 1.3rem + 0.9vw, 1.875rem);                      /* 25,2px (Figma) → 30px */
    width: auto;
    line-height: 1.2;
    letter-spacing: -0.0229em;
    text-box: none;
  }
  .mercado .mercado__title-regular { font-size: 21px; line-height: 1.2; }
  .mercado .mercado__title-space   { font-size: 21px; line-height: 1.2; }
  .mercado .mercado__title-accent  { font-size: 24px; line-height: 1.2; }
  .mercado .mercado__desc,
  .mercado .mercado__desc--right {
    width: auto;
    font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);                     /* 14px (Figma) → 16px */
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-box: none;
    text-wrap: pretty;
  }
  /* No Figma os dois parágrafos do cartão da direita são um texto corrido */
  .mercado .mercado__desc--right { display: block; }
  .mercado .mercado__desc--right p { display: inline; }
}

/* Mobile estreito: carrossel horizontal. Cada cartão (foto + texto) é uma coluna da grade;
   o scroll é nativo (swipe), com snap, e o cartão seguinte aparece "espiando" na borda. */
@media (max-width: 639.98px) {
  .mercado .mercado__row {
    --side-w: 16.28rem;                                                   /* 260,5px */
    grid-template-columns: repeat(2, var(--side-w));
    width: calc(100% + 2 * var(--r-gutter));                              /* ocupa a tela toda (compensa o padding da seção) */
    max-width: none;
    justify-content: start;
    /* sangra até as bordas da tela para o swipe não parecer "preso" na margem */
    margin-inline: calc(-1 * var(--r-gutter));
    padding-inline: var(--r-gutter);
    scroll-padding-inline: var(--r-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;                                       /* não puxa a página para o lado; a rolagem vertical segue livre */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mercado .mercado__row::-webkit-scrollbar { display: none; }
  .mercado .mercado__side,
  .mercado .mercado__text { scroll-snap-align: start; }
  .mercado .mercado__title { --st: 25.163px; }
  .mercado .mercado__desc,
  .mercado .mercado__desc--right { font-size: 14px; }
}

/* responsive/ugc */
/* UGC — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: coluna única (título → fontes → frase → pergunta → gráfico), tudo em rem/clamp.
   • Fontes: no desktop o card de cada fonte só aparece no hover; no toque não existe hover,
     então aqui os cards ficam SEMPRE visíveis (tablet: grade; mobile: carrossel com swipe).
   • Gráfico: os 3 blocos viram um grid em que a ÁREA de cada um é proporcional a 79 / 12 / 9.
   O logo do rodapé não aparece (ver base.css). */

@media (max-width: 1199.98px) {
  .ugc .ugc__canvas {
    height: auto;
    padding: var(--r-section-y) var(--r-gutter);
    align-items: flex-start;
  }
  .ugc .ugc__content {
    width: 100%;
    max-width: 44rem;
    flex-direction: column;
    justify-content: flex-start;
    gap: 100px;
  }
  .ugc .ugc__left { flex: none; }
  .ugc .ugc__left-inner { padding-top: 0; gap: clamp(1.5rem, 4vw, 2rem); }

  /* Título e frase de abertura */
  .ugc .ugc__title {
    --t: var(--r-fs-title);
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-box: none;
    text-wrap: balance;
  }
  .ugc .ugc__title-accent  { font-size: calc(var(--t) * 1.143); line-height: 1.2; }
  .ugc .ugc__title-regular { font-size: var(--t); line-height: 1.2; }
  .ugc .ugc__lead {
    font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);                    /* 18–24px */
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-box: none;
    text-wrap: pretty;
  }

  /* Fontes: cards sempre visíveis (sem hover). Dentro de cada fonte, 1 unidade do design = 1px. */
  .ugc .ugc__sources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
    align-items: stretch;
  }
  .ugc .ugc__source { --u: 1px; }
  .ugc .ugc__source .ugc__chip { display: none; }                        /* a marca já aparece dentro do card (o chip "Nosto" do gráfico continua) */
  .ugc .ugc__card {
    position: static;
    width: auto;
    height: 100%;
    padding: 1rem 1.125rem;
    gap: 0.75rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 0.75rem;
  }
  .ugc .ugc__card-title { font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; text-box: none; }
  .ugc .ugc__card-date  { font-size: 0.875rem; letter-spacing: 0; text-box: none; margin-top: auto; }
  .ugc .ugc__card-name  { font-size: 0.875rem; }

  /* Pergunta */
  .ugc .ugc__right { width: 100%; padding-block: 0; gap: 40px; }
  .ugc .ugc__question {
    width: auto;
    margin-inline: 0;
    transform: none;
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);                    /* 20–28px */
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    text-box: none;
    text-wrap: balance;
  }

  /* Gráfico de área: a ÁREA de cada bloco é proporcional ao valor (79 / 12 / 9).
     Roxo ocupa 79% da altura (largura toda); embaixo, rosa e lima dividem os 21% restantes
     na proporção 12 : 9 — assim 79 + 12 + 9 = 100% da área, exatamente. */
  .ugc .ugc__chart-wrap { gap: 1rem; }
  .ugc .ugc__chart {
    --gap: 0.5rem;
    height: 35rem;
    display: grid;
    grid-template-columns: 12fr 9fr;
    grid-template-rows: 79fr 21fr;
    gap: var(--gap);
    overflow: visible;
  }
  .ugc .ugc__chart-col { display: contents; }
  .ugc .ugc__block,
  .ugc .ugc__block--purple,
  .ugc .ugc__block--pink,
  .ugc .ugc__block--lime {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0.875rem;
    border-radius: 1.5rem 1.5rem 1.5rem 0;
    gap: 0.5rem;
  }
  .ugc .ugc__block--purple { grid-column: 1 / -1; padding: 1.5rem; border-radius: 2rem 2rem 2rem 0; }
  .ugc .ugc__block-label,
  .ugc .ugc__block-label--md,
  .ugc .ugc__block-label--sm {
    font-size: 0.875rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-box: none;
  }
  .ugc .ugc__block--purple .ugc__block-label { font-size: 1.25rem; }
  .ugc .ugc__block-value {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.04em;
    text-box: none;
  }
  .ugc .ugc__block-value--xl { font-size: clamp(3.5rem, 2.5rem + 4vw, 5rem); }   /* 56–80px */
  .ugc .ugc__chart-source { --u: 1px; }
  .ugc .ugc__chip-name { font-size: 14px; }
}

/* Mobile estreito: as fontes viram um carrossel horizontal (swipe nativo + snap) */
@media (max-width: 639.98px) {
  .ugc .ugc__sources {
    display: flex;
    margin-inline: calc(-1 * var(--r-gutter));
    padding-inline: var(--r-gutter);
    scroll-padding-inline: var(--r-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ugc .ugc__sources::-webkit-scrollbar { display: none; }
  .ugc .ugc__source { flex: none; width: 16.5rem; scroll-snap-align: start; }
}

/* Mobile: cards das fontes em dark mode (mesmo preto dos chips/painéis do resto da apresentação) */
@media (max-width: 767.98px) {
  .ugc .ugc__card { background: #000; }
  .ugc .ugc__card-name,
  .ugc .ugc__card-title { color: #fff; }
  .ugc .ugc__card-date { color: #808080; }
}

/* responsive/contexto */
/* Contexto — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: coluna única com altura natural. Os 3 cards empilham (≤999px) ou ficam lado a lado
   (1000–1199px). Dentro de cada card, 1 unidade do design = 1px real (ícone 50px, etiqueta 16px,
   título 21px, texto 18px), então só largura/altura fixas e o nowrap do título saem.
   O logo do rodapé não aparece (ver base.css). */

@media (max-width: 1199.98px) {
  .contexto .contexto__canvas {
    height: auto;
    padding: var(--r-section-y) var(--r-gutter);
    align-items: flex-start;
  }
  .contexto .contexto__content {
    width: 100%;
    max-width: 44rem;
    gap: clamp(2rem, 6vw, 3rem);
  }

  .contexto .contexto__title {
    --t: calc(var(--r-fs-title) * 0.8);
    padding-inline: 0;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-wrap: balance;
  }
  .contexto .contexto__title-regular { font-size: var(--t); line-height: 1.1; }
  .contexto .contexto__title-accent  { font-size: calc(var(--t) * 1.125); line-height: 1.1; }   /* 45/40 do desktop */

  .contexto .contexto__cards {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .contexto .contexto__card,
  .contexto .contexto__card:nth-child(2) {
    --u: 1px;
    width: auto;
    height: auto;
  }
  .contexto .contexto__tag { font-size: 12px; }                                              /* 16 − 20% */
  .contexto .contexto__card-top { height: auto; padding: 1.5rem 1.5rem 0; }
  .contexto .contexto__card-body { flex: none; padding: 1.25rem 1.5rem 1.75rem; gap: 0.75rem; }
  .contexto .contexto__card-title { font-size: 1.1rem; white-space: normal; }                 /* 17,6px (22 − 20%) */
  .contexto .contexto__card-text,
  .contexto .contexto__card-text--pink,
  .contexto .contexto__card-text--lime,
  .contexto .contexto__card-text--purple { width: auto; font-size: 0.85rem; line-height: 1.4; text-wrap: pretty; }   /* 13,6px (17 − 20%) */
}

/* Tablet largo: 3 cards lado a lado */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .contexto .contexto__content { max-width: 70rem; }
  .contexto .contexto__cards { flex-direction: row; align-items: stretch; }
  .contexto .contexto__card,
  .contexto .contexto__card:nth-child(2) { flex: 1 1 0; min-width: 0; }
}

/* responsive/problema */
/* Problema — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: a caixa pinada (sticky) que expande por clip-path sai de cena; vira um bloco normal.
   Os 3 painéis viram um carrossel horizontal nativo (scroll-snap) e as abas viram uma fileira de
   botões (≥44px) sincronizada com ele — o JS da sincronização está em src/problema-carousel.js.
   Painel: mobile = coluna (texto → imagem); tablet = 2 colunas. Textos em rem/clamp. */

@media (max-width: 1199.98px) {
  .problema .problema__canvas {
    padding: var(--r-section-y) 0 0;
    gap: clamp(2rem, 6vw, 3rem);
  }

  /* ===== Cabeçalho ===== */
  .problema .problema__header {
    --hl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);                      /* 22–28px */
    width: 100%;
    margin: 0;
    padding: 0 var(--r-gutter);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .problema .problema__header-left { width: auto; letter-spacing: -0.03em; text-box: none; }
  /* as duas frases correm como um texto só ("…explodiu... mas a operação continua…") */
  .problema .problema__header-left > p,
  .problema .problema__header-left > p:first-child { display: inline; }
  .problema .problema__header-line   { font-size: var(--hl); line-height: 1.25; }
  .problema .problema__header-accent { font-size: calc(var(--hl) * 1.125); line-height: 1.25; }
  .problema .problema__header-right { width: auto; letter-spacing: -0.02em; text-box: none; }
  .problema .problema__header-side-accent { font-size: 1.25rem; line-height: 1.3; }
  .problema .problema__header-side { font-size: 1rem; line-height: 1.4; }

  /* ===== Caixa: bloco normal, sem pin nem expansão ===== */
  .problema .problema__tabs-box {
    position: static;
    height: auto;
    overflow: visible;
    clip-path: none;
    border-radius: 1.75rem 1.75rem 0 0;
  }
  .problema .problema__tabs-inner { width: 100%; height: auto; margin-left: 0; gap: 40px; }
  .problema .problema__hold { display: none; }

  /* ===== Abas: fileira rolável de botões ===== */
  .problema .problema__tablist {
    position: relative;
    gap: 0.5rem;
    order: 2;                                                             /* abas abaixo do carrossel (no DOM vêm antes) */
    padding: 0 16px 80px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .problema .problema__tablist::-webkit-scrollbar { display: none; }
  .problema .problema__tab {
    flex: none;
    min-height: var(--r-tap);
    gap: 0.625rem;
    padding: 0.375rem 1rem 0.375rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
  }
  .problema .problema__tab.is-active { background: #211f1f; border-radius: 999px; }
  .problema .problema__tab-num { width: 1.75rem; height: 1.75rem; border-radius: 999px; font-size: 0.875rem; }
  .problema .problema__tab-label { font-size: 0.9375rem; white-space: nowrap; }

  /* ===== Carrossel dos painéis ===== */
  .problema .problema__frame { order: 1; padding-inline: 0; flex: none; }
  .problema .problema__tabs-box[data-active] .problema__frame-inner {
    position: relative;
    flex: none;
    padding: 0;
    background: transparent;
    filter: none;
    border-radius: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;                                       /* a rolagem vertical da página segue livre */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .problema .problema__frame-inner::-webkit-scrollbar { display: none; }
  /* todos os painéis ficam visíveis lado a lado (o JS original esconde os inativos com [hidden]) */
  .problema .problema__panel,
  .problema .problema__panel[hidden] {
    display: flex;
    flex: 0 0 100%;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding: 80px 20px 0;
    border-radius: 0;
  }

  /* Texto */
  .problema .problema__copy { width: 100%; gap: 1.5rem; }
  .problema .problema__copy-head { padding-left: 0; gap: 1rem; }
  .problema .problema__panel .problema__heading {
    --ht: calc(clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem) * 0.8);         /* 21–29px (−20%) */
    width: auto;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-box: none;
    text-wrap: balance;
  }
  .problema .problema__heading-regular { font-size: var(--ht); line-height: 1.2; }
  .problema .problema__heading-accent  { font-size: calc(var(--ht) * 1.1); line-height: 1.2; }
  .problema .problema__lead,
  .problema .problema__lead--full {
    width: auto;
    font-size: var(--r-fs-body);
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-box: none;
  }
  .problema .problema__points { gap: 0.75rem; }
  .problema .problema__points li,
  .problema .problema__points li:nth-child(-n + 2) {
    padding: 0.625rem;
    border-left-width: 4px;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
    font-weight: 500;
  }

  /* Imagem + legenda */
  .problema .problema__visual,
  .problema .problema__panel--2 .problema__visual,
  .problema .problema__panel--3 .problema__visual { width: 100%; height: auto; gap: 1rem; }
  .problema .problema__media {
    flex: none;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
  }
  .problema .problema__media--portrait { display: block; }
  .problema .problema__media--portrait img,
  .problema .problema__media--cover img,
  .problema .problema__rotate-tilt img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .problema .problema__media--portrait img { object-position: center 30%; }
  /* aba 3: a leve inclinação continua, com um zoom para não aparecerem cantos vazios */
  .problema .problema__media--rotate { display: block; }
  .problema .problema__rotate-box,
  .problema .problema__rotate-tilt { position: absolute; inset: 0; width: 100%; height: 100%; }
  .problema .problema__rotate-tilt { transform: rotate(-3deg) scale(1.1); }
  .problema .problema__caption {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    white-space: normal;
    text-box: none;
    text-wrap: balance;
  }
}

/* Tablet: texto e imagem lado a lado dentro de cada painel */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .problema .problema__panel,
  .problema .problema__panel[hidden] {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
    padding-top: 2rem;
  }
  .problema .problema__copy { flex: 1 1 0; min-width: 0; }
  .problema .problema__visual,
  .problema .problema__panel--2 .problema__visual,
  .problema .problema__panel--3 .problema__visual { flex: 1 1 0; min-width: 0; width: auto; }
  .problema .problema__media { aspect-ratio: 1 / 1; }
}

/* Mobile: a imagem vem antes do título e a legenda some */
@media (max-width: 767.98px) {
  .problema .problema__panel .problema__visual { order: -1; }
  .problema .problema__caption { display: none; }
  .problema .problema__media { aspect-ratio: 5 / 3; }                    /* altura 20% menor que 4 / 3 */
}

/* responsive/treinamento */
/* Treinamento — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia (Figma SeuInfluencer, nó 6550:88802): coluna única na ordem
   etiqueta → título → chips → pílula "+40 mil creators" → notebook.
   No HTML os chips ficam junto do texto; .treino__copy vira "display: contents" para
   que título, visual e chips possam ser reordenados só com CSS (sem mexer no desktop).
   Dentro da caixa, 1 unidade do design = 1px real (--u: 1px), com os tamanhos do Figma. */

@media (max-width: 1199.98px) {
  .treino .treino__canvas {
    padding-top: var(--r-section-y);
    gap: clamp(2rem, 6vw, 3rem);
    align-items: stretch;
  }

  /* ===== Cabeçalho ===== */
  .treino .treino__head {
    --hl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);                      /* 22–28px */
    width: 100%;
    padding: 0 var(--r-gutter);
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .treino .treino__head-title { width: auto; letter-spacing: -0.03em; text-box: none; }
  .treino .treino__head-regular { font-size: var(--hl); line-height: 1.25; }
  .treino .treino__head-accent  { font-size: calc(var(--hl) * 1.125); line-height: 1.25; }
  .treino .treino__head-text { width: auto; font-size: 1rem; line-height: 1.4; letter-spacing: -0.02em; text-box: none; }

  /* ===== Caixa ===== */
  .treino .treino__content {
    width: 100%;
    border-radius: 1.75rem 1.75rem 0 0;
  }
  .treino .treino__row {
    --u: 1px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 20px var(--r-gutter) 60px;
    border-radius: 0;
    background: #282828;
  }

  /* o contêiner do texto "some": título, visual e chips viram itens da coluna */
  .treino .treino__copy { display: contents; }
  .treino .treino__copy-top,
  .treino .treino__visual,
  .treino .treino__chips { width: 100%; max-width: 44rem; }
  .treino .treino__copy-top { order: 1; padding-top: 12px; margin-bottom: 12px; gap: 20px; }   /* 28 + 12 = 40 entre título e pílula */
  .treino .treino__chips    { order: 2; gap: 10px; }
  .treino .treino__visual   { order: 3; gap: 20px; }

  /* Etiqueta e título */
  .treino .treino__title-box { max-width: none; padding: 12px; }
  .treino .treino__title {
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);                  /* 28px (Figma) → 36px */
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-box: none;
    text-wrap: balance;
  }
  .treino .treino__desc-box { padding-inline: 12px; }
  .treino .treino__desc { font-size: var(--r-fs-body); line-height: 1.4; letter-spacing: -0.01em; text-box: none; }

  /* Pílula com os rostos */
  .treino .treino__pill { gap: 10px; padding: 2.812px 14.061px 2.812px 2.812px; border-radius: 28.122px; }
  .treino .treino__mini { margin-right: -12.141px; border-width: 1.256px; border-radius: 15.283px; }
  .treino .treino__mini:last-child { margin-right: 0; }
  .treino .treino__mini img { width: 28.122px; height: 28.122px; }
  .treino .treino__pill-text { padding-left: 0; font-size: 12.655px; line-height: 1.3; color: #535353; }

  /* Notebook: no tablet cabe na coluna */
  .treino .treino__device { width: 100%; height: auto; max-width: 100%; }

  /* Chips */
  .treino .treino__chip {
    padding: 13.399px 16.079px;
    border-radius: 8.04px;
    font-size: 12px;                                                      /* 10,7px no Figma; 12px é o mínimo legível */
  }
}

/* Mobile: notebook "sangra" para fora da caixa (como no Figma) e a descrição some */
@media (max-width: 767.98px) {
  .treino .treino__desc-box { display: none; }
  .treino .treino__device { width: 116%; max-width: none; flex: none; }  /* 418,85 ÷ 362 do Figma */
}

/* responsive/secoes-padrao */
/* Dobras "caixa + texto + visual" — tablet e mobile.
   Campanha, Creators, Portfólio, Jurídico, Produção e Resultados (a Treinamento tem o mesmo
   desenho em treinamento.css). Todas compartilham o mesmo esqueleto de HTML:

     .secao > __canvas > __content > __row > [ __copy > ( __copy-top[badge, title, desc], __chips ) , <visual> ]

   Desktop (≥1200px): nada muda (só há regras abaixo disso).

   Estratégia (igual à Treinamento): coluna única na ordem etiqueta → título → chips → visual.
   __copy vira "display: contents" para título, chips e visual poderem ser reordenados só com CSS.
   Dentro da caixa, 1 unidade do design = 1px real (--u: 1px). Cada dobra tem altura mínima = tela (min-height: 100lvh), sem altura fixa:
   se o conteúdo for maior, ela cresce. O visual de cada seção é tratado à parte.
   Os seletores listam explicitamente as classes de cada seção (":is(.campanha__x, .creators__x, …)"),
   para não pegar classes internas dos mockups (ex.: parsing__title, jd-modal__title). */

@media (max-width: 1199.98px) {
  :is(.campanha, .creators, .portfolio, .juridico, .producao, .resultados) {
    --sp-gutter: var(--r-gutter);
  }

  /* ===== Caixa ===== */
  /* altura MÍNIMA = tela inteira (lvh); se o conteúdo for maior, a dobra cresce */
  .secao:is(.campanha, .creators, .portfolio, .juridico, .producao, .resultados) {
    min-height: 100vh;
    min-height: 100lvh;                                                   /* lvh = tela com a barra do navegador recolhida: a dobra fixada sempre cobre a tela toda */
    display: flex;
    flex-direction: column;
  }
  .secao :is(.campanha__canvas, .creators__canvas, .portfolio__canvas, .juridico__canvas, .producao__canvas, .resultados__canvas) {
    flex: 1 0 auto;
    height: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }
  .secao :is(.campanha__content, .creators__content, .portfolio__content, .juridico__content, .producao__content, .resultados__content) {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1.75rem 1.75rem 0 0;
  }
  .secao :is(.campanha__row, .creators__row, .portfolio__row, .juridico__row, .producao__row, .resultados__row) {
    --vw: min(calc(100cqw - 2 * var(--r-gutter)), 44rem);              /* largura útil para o visual */
    position: relative;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 20px var(--sp-gutter) 60px;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
  }

  /* o contêiner do texto "some": título, chips e visual viram itens da coluna */
  .secao :is(.campanha__copy, .creators__copy, .portfolio__copy, .juridico__copy, .producao__copy, .resultados__copy) { display: contents; }
  .secao :is(.campanha__copy-top, .creators__copy-top, .portfolio__copy-top, .juridico__copy-top, .producao__copy-top, .resultados__copy-top),
  .secao :is(.campanha__chips, .creators__chips, .portfolio__chips, .juridico__chips, .producao__chips, .resultados__chips) { width: 100%; max-width: 44rem; }
  .secao :is(.campanha__copy-top, .creators__copy-top, .portfolio__copy-top, .juridico__copy-top, .producao__copy-top, .resultados__copy-top) {
    order: 1;
    padding-top: 12px;
    margin-bottom: 12px;
    gap: 20px;
  }
  .secao :is(.campanha__chips, .creators__chips, .portfolio__chips, .juridico__chips, .producao__chips, .resultados__chips) { order: 2; gap: 10px; }
  /* texto e chips: 1 unidade do design = 1px real (tamanhos do Figma). O visual escala à parte */
  .secao :is(.campanha__copy-top, .creators__copy-top, .portfolio__copy-top, .juridico__copy-top, .producao__copy-top, .resultados__copy-top),
  .secao :is(.campanha__chips, .creators__chips, .portfolio__chips, .juridico__chips, .producao__chips, .resultados__chips) { --u: 1px; }
  /* qualquer visual (cluster, stage, grid, device…) vem depois dos chips */
  .secao :is(.campanha__row, .creators__row, .portfolio__row, .juridico__row, .producao__row, .resultados__row) > :not(:is(.campanha__copy, .creators__copy, .portfolio__copy, .juridico__copy, .producao__copy, .resultados__copy)) { order: 3; }

  /* ===== Etiqueta, título, descrição ===== */
  .secao :is(.campanha__title-box, .creators__title-box, .portfolio__title-box, .juridico__title-box, .producao__title-box, .resultados__title-box) { max-width: none; padding: 12px; }
  .secao :is(.campanha__title, .creators__title, .portfolio__title, .juridico__title, .producao__title, .resultados__title) {
    width: auto;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);                  /* 28px (Figma) → 36px */
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-box: none;
    text-wrap: balance;
  }
  .secao :is(.campanha__desc-box, .creators__desc-box, .portfolio__desc-box, .juridico__desc-box, .producao__desc-box, .resultados__desc-box) { padding-inline: 12px; }
  .secao :is(.campanha__desc, .creators__desc, .portfolio__desc, .juridico__desc, .producao__desc, .resultados__desc) {
    width: auto;
    font-size: var(--r-fs-body);
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-box: none;
  }

  /* ===== Chips ===== */
  .secao :is(.campanha__chip, .creators__chip, .portfolio__chip, .juridico__chip, .producao__chip, .resultados__chip) {
    padding: 13.399px 16.079px;
    border-radius: 8.04px;
    font-size: 12px;                                                      /* 10,7px no Figma; 12px é o mínimo legível */
  }

  /* ===== Visuais ainda sem versão definitiva =====
     Provisório: a composição original encolhe para caber na largura (--u = largura útil ÷ largura do design).
     Cada uma dessas dobras terá uma proposta própria de comportamento para o mobile. */
  .campanha .campanha__cluster   { --u: calc(var(--vw) / 1068); }
  .portfolio .portfolio__cluster { --u: calc(var(--vw) / 1618); }
  .resultados .resultados__cluster { --u: calc(var(--vw) / 1302); }
  /* Jurídico: o conteúdo real vai de x=0 a 854 e de y=-80 (a tela de aprovação sobe 80) a 656; o palco original
     tem 1009 de largura (sobra à direita) e não conta esse trecho de cima. Aqui o palco passa a ter exatamente o
     tamanho do conteúdo (854 × 656) com 80 de margem em cima: fica centralizado e não encosta nos chips. */
  .juridico .juridico__stage {
    --u: calc(var(--vw) / 854);
    width: calc(854 * var(--u));
    height: calc(656 * var(--u));
    margin: calc(80 * var(--u)) 0 0;
    flex: none;
  }
  /* Portfólio: os degradês das bordas da parede de imagens saem (eram pensados para o fundo preto do desktop) */
  .portfolio .pf-fade { display: none; }

  /* Creators: grade, card e tiras são posicionados em absoluto sobre a linha inteira (coordenadas do design).
     Aqui a linha vira um grid de 1 coluna e os 4 itens dividem a MESMA célula (linha 3), mantendo as
     posições relativas do design (left/top em --u). A caixa do visual tem ~868 unidades de largura (823 → 1691). */
  .creators .creators__row {
    --u: calc(var(--vw) / 868);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .creators .creators__copy-top { grid-row: 1; }
  .creators .creators__chips    { grid-row: 2; }
  .creators .creators__grid,
  .creators .creators__card,
  .creators .creators__strip { position: relative; grid-row: 3; grid-column: 1; justify-self: start; align-self: start; }
  .creators .creators__grid  { left: calc(29.03 * var(--u));  top: 0; }
  .creators .creators__card  { left: calc(505.47 * var(--u)); top: calc(210.9 * var(--u)); }
  .creators .creators__strip--a { left: calc(134.54 * var(--u)); top: calc(464.9 * var(--u)); }
  .creators .creators__strip--b { left: 0;                      top: calc(601.54 * var(--u)); }

  /* o segundo <p> da descrição da Produção é só um espaçador (zero-width) e abria um vão a mais */
  .producao .producao__desc p + p { display: none; }

  /* ===== Produção: o visual é só uma imagem (como o notebook da Treinamento) ===== */
  .producao .producao__device { width: 100%; height: auto; max-width: 100%; }
}


/* responsive/escala */
/* Escala — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: a MESMA cena (pin + tampa do MacBook fechando em 3D + texto revelado no fim),
   só ampliada. O canvas de 1920 unidades passa a ser ~2× maior que a largura da tela
   (--escala-k), então o notebook fica grande e "sangra" um pouco nas laterais (a cena já
   tem overflow: hidden). Os textos saem do sistema --u e passam a usar rem/clamp, com
   largura livre, para continuarem legíveis. A animação (escala.js) e a distância de
   scroll não mudam. */
@media (max-width: 1199.98px) {
  .escala .escala__canvas {
    --escala-k: 1.683;                                                    /* 1,98 − 15%: notebook ≈ 98% da largura da tela */
    --u: calc(100cqw * var(--escala-k) / 1920);
  }

  .escala .escala__text {
    top: calc(200 * var(--u));                                            /* sobe o texto: com fontes em rem ele é mais alto e batia na base do notebook */
    padding-inline: var(--r-gutter);
    gap: 1.25rem;
  }
  .escala .escala__title {
    --t: calc(clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem) * 0.85);         /* 22–31px (−15%) */
    width: auto;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-wrap: balance;
  }
  .escala .escala__title-regular { font-size: var(--t); line-height: 1.1; }
  .escala .escala__title-accent  { font-size: calc(var(--t) * 1.143); line-height: 1.1; }   /* 64/56 do desktop */
  .escala .escala__lead {
    width: auto;
    max-width: 36rem;
    font-size: calc(var(--r-fs-body) * 0.85);                             /* 13,6–15,3px (−15%) */
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-box: none;
    text-wrap: pretty;
  }
}

/* responsive/parceiros */
/* Parceiros e Cases — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: o cabeçalho vira texto fluido (título + 3 chips empilhados). O carrossel contínuo
   do desktop (marquee em loop) vira um carrossel de rolagem nativa com snap, mostrando UM card
   (o ativo) e só uma pontinha do próximo. Abaixo dele há uma barra de navegação com bolinhas;
   a bolinha ativa vira uma barra que "enche" e, quando termina, o carrossel avança (autoplay do
   carrossel, não só do vídeo) + um botão de pausar/retomar. O comportamento está em
   src/parceiros-carousel.js; a galeria (clique no card) continua a mesma. */

/* a barra de navegação só existe no ambiente responsivo */
.cases-nav { display: none; }

@media (max-width: 1199.98px) {
  .parceiros .parceiros__canvas { gap: 1.5rem; padding-top: var(--r-section-y); }

  /* ===== Cabeçalho ===== */
  .parceiros .parceiros__content { width: 100%; border-radius: 0; }
  .parceiros .parceiros__row { padding: 0 var(--r-gutter); align-items: center; border-radius: 0; }
  .parceiros .parceiros__head { gap: 1.5rem; }
  .parceiros .parceiros__title-wrap { padding-top: 0; gap: 0; }
  .parceiros .parceiros__spacer { display: none; }
  .parceiros .parceiros__title-box { max-width: none; padding: 0; }
  .parceiros .parceiros__title {
    font-size: var(--r-fs-title);                                         /* 28–40px */
    line-height: 1.2;
    letter-spacing: -0.04em;
    white-space: normal;
    text-align: center;
    text-box: none;
    text-wrap: balance;
  }
  .parceiros .parceiros__chips { flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; max-width: 28rem; }
  .parceiros .parceiros__chip {
    padding: 0.875rem 1.125rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  /* ===== Carrossel: rolagem nativa + snap, sem o marquee ===== */
  .parceiros .cases {
    --card-w: min(calc(100cqw - 2 * var(--r-gutter) - 2.5rem), 26rem);    /* o card ativo + uma pontinha do próximo */
    position: relative;
    margin-top: 0;
    padding: 0.5rem 0 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;                                       /* a rolagem vertical da página segue livre */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--r-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .parceiros .cases::-webkit-scrollbar { display: none; }
  .parceiros .cases__track { animation: none; transform: none; margin-left: 0; }
  .parceiros .cases__set[aria-hidden='true'] { display: none; }           /* a cópia só servia para o loop do desktop */
  .parceiros .cases__set { gap: 1rem; padding-inline: var(--r-gutter); }
  .parceiros .cases__card {
    --u: calc(var(--card-w) / 400);                                       /* a mesma composição do card, em escala */
    width: var(--card-w);
    height: calc(600 * var(--u));
    scroll-snap-align: start;
    scroll-snap-stop: always;                                             /* um card por gesto */
  }
  .parceiros .cases__video { box-shadow: none; }
  /* o selo de play fica SEMPRE visível (no toque não existe hover): indica que dá para abrir o player */
  .parceiros .cases__video::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  /* sem a borda verde de foco/ativação, nunca */
  .parceiros .cases__card,
  .parceiros .cases__card:focus,
  .parceiros .cases__card:focus-visible,
  .parceiros .cases__card:focus-visible .cases__video { outline: none; }
  .parceiros .cases__logo {                                               /* logo dentro do card (não sobra para fora) */
    left: 0.75rem;
    top: 0.75rem;
    width: 3.25rem;
    height: 3.25rem;
  }

  /* ===== Barra de navegação (bolinhas + progresso + pausar) ===== */
  .cases-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem var(--r-gutter) 0;
  }
  .cases-nav__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.125rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
  }
  .cases-nav__dot {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
  }
  /* área de toque maior que a bolinha (≥44px) sem aumentar o visual */
  .cases-nav__dot::before { content: ''; position: absolute; inset: -1rem -0.25rem; }
  .cases-nav__dot.is-active { width: 2.25rem; background: rgba(255, 255, 255, 0.28); }
  .cases-nav__dot.is-active::after {                                      /* a barra de progresso */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(var(--prog, 0));
    transform-origin: left center;
  }
  .cases-nav__toggle {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
  }
  .cases-nav__toggle svg { width: 1.125rem; height: 1.125rem; }
  .cases-nav__dot:focus-visible,
  .cases-nav__toggle:focus-visible { outline: 2px solid #d7ff00; outline-offset: 2px; }
}

/* Tablet: o card ativo fica centralizado, com uma pontinha de cada lado */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .parceiros .cases { scroll-padding-inline: 0; }
  .parceiros .cases__set { padding-inline: calc((100cqw - var(--card-w)) / 2); }
  .parceiros .cases__card { scroll-snap-align: center; }
}

/* responsive/casos */
/* Casos — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: cada case é um card vertical — bloco de vídeo em cima, textos embaixo — todos com a
   mesma largura e o mesmo espaço de vídeo. Só UM vídeo por card (a QCY tem dois; o segundo some).
   Os cards passam lateralmente (scroll nativo + snap): o card ativo inteiro e uma pontinha do
   próximo, como no carrossel dos creators. Os cards fora de foco continuam esmaecidos (comportamento
   do desktop, via .is-active). O vídeo do card ativo toca sozinho (src/casos-carousel.js). */
@media (max-width: 1199.98px) {
  .casos .casos__canvas { padding-block: var(--r-section-y); }

  /* ===== Setas ===== */
  .casos .casos__nav { padding: 0 var(--r-gutter) 1.25rem; gap: 0.75rem; }
  .casos .casos__arrow { width: var(--r-tap); height: var(--r-tap); border-radius: 0.75rem; }

  /* ===== Carrossel ===== */
  .casos .casos__viewport {
    --card-w: min(calc(100cqw - 2 * var(--r-gutter) - 2.5rem), 26rem);    /* card ativo + uma pontinha do próximo */
    scroll-padding-inline: var(--r-gutter);
    overscroll-behavior-x: contain;                                       /* a rolagem vertical da página segue livre */
    -webkit-overflow-scrolling: touch;
  }
  .casos .casos__track { gap: 1rem; padding-inline: var(--r-gutter); }

  /* ===== Card: vídeo em cima, textos embaixo ===== */
  .casos .casos__card {
    width: var(--card-w);
    flex-direction: column;
    scroll-margin-left: 0;
    scroll-snap-stop: always;                                             /* um card por gesto */
    border-width: 0.25rem;
    border-radius: 1.75rem;
  }
  .casos .casos__media { order: -1; padding: 1.25rem 0; }
  .casos .casos__phone { width: 13rem; padding: 0.375rem; border-radius: 1.75rem; }
  .casos .casos__phone + .casos__phone { display: none; }                 /* só o primeiro vídeo de cada case */
  .casos .casos__phone video {
    height: auto;
    aspect-ratio: 388 / 654;                                              /* mesmo placeholder em todos os cards */
    border-radius: 1.4rem;
  }

  .casos .casos__info { width: auto; padding: 1.5rem; gap: 1.25rem; flex: 1 1 auto; }
  .casos .casos__logo { width: auto; height: 3.5rem; }
  .casos .casos__logo--square { width: 3.5rem; }
  .casos .casos__text { padding-inline: 0; gap: 1rem; }
  .casos .casos__title {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);                 /* 22–28px */
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .casos .casos__desc { padding-inline: 0; font-size: 0.9375rem; line-height: 1.45; }
  .casos .casos__desc p + p { margin-top: 0.75rem; }

  /* Números */
  .casos .casos__stats { padding-top: 0; flex-wrap: wrap; gap: 0.625rem; margin-top: auto; }
  .casos .casos__stat { padding: 0.75rem 1rem; border-radius: 0.75rem; }
  .casos .casos__stat-value { font-size: 1.25rem; gap: 0.5rem; }
  .casos .casos__stat-suffix { font-size: 0.9375rem; letter-spacing: -0.02em; }
  .casos .casos__stat-label { font-size: 0.75rem; }
}

/* Tablet: o card ativo fica centralizado */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .casos .casos__viewport { scroll-padding-inline: 0; }
  .casos .casos__track { padding-inline: calc((100cqw - var(--card-w)) / 2); }
  .casos .casos__card { scroll-snap-align: center; }
}

/* ===== Ajustes de ordem e leitura (tablet e mobile) ===== */
@media (max-width: 1199.98px) {
  /* Navegação (setas) abaixo dos cards */
  .casos .casos__canvas { display: flex; flex-direction: column; }
  .casos .casos__viewport { order: 1; }
  .casos .casos__nav { order: 2; justify-content: center; padding: 1.5rem var(--r-gutter) 0; }

  /* Números do case (chips) sobem para entre a logo e o título, em dark mode */
  .casos .casos__logo { order: 1; align-self: flex-start; object-fit: contain; }   /* sem esticar: mantém a proporção da logo */
  .casos .casos__stats { order: 2; margin-top: 0; }
  .casos .casos__text { order: 3; }
  .casos .casos__stat { background: #000; filter: none; }
  .casos .casos__stat-value { color: #fff; }
  .casos .casos__stat-label { color: #a0a0a0; }

  /* chips de métricas menores */
  .casos .casos__stats { gap: 0.5rem; }
  .casos .casos__stat { padding: 0.5rem 0.75rem; border-radius: 0.625rem; }
  .casos .casos__stat-value { font-size: 1rem; gap: 0.375rem; }
  .casos .casos__stat-suffix { font-size: 0.75rem; }
  .casos .casos__stat-label { font-size: 0.6875rem; }

  /* Textos de tamanho parecido entre os cases: a OLX usa a versão curta */
  .casos .casos__desc--short[hidden] { display: block; }
  .casos .casos__text:has(.casos__desc--short) .casos__desc:not(.casos__desc--short) { display: none; }
}

/* responsive/planos */
/* Planos — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   Estratégia: cabeçalho em texto fluido; os 4 cards viram uma grade 2×2 no tablet e um carrossel
   lateral (scroll nativo + snap, card ativo + pontinha do próximo) no mobile, todos com a mesma
   altura e o botão sempre na base. Dentro de cada card, 1 unidade do design = 1px real (--u: 1px). */
@media (max-width: 1199.98px) {
  .planos .planos__canvas { padding: var(--r-section-y) var(--r-gutter); gap: 2rem; }

  /* ===== Cabeçalho ===== */
  .planos .planos__head {
    --hl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);                      /* 22–28px */
    width: 100%;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .planos .planos__head-title { width: auto; letter-spacing: -0.03em; text-box: none; }
  .planos .planos__title-line   { font-size: var(--hl); line-height: 1.25; }
  .planos .planos__title-accent { font-size: calc(var(--hl) * 1.125); line-height: 1.25; }
  .planos .planos__head-text { width: auto; max-width: 36rem; font-size: 1rem; line-height: 1.4; letter-spacing: -0.02em; text-box: none; font-weight: 400;}

  /* ===== Cards: grade 2×2 (tablet) ===== */
  .planos .planos__cards {
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
  }
  .planos .plano,
  .planos .plano--agency,
  .planos .plano--pro {
    --u: 1px;
    flex: none;
    padding: 28px;
  }
  .planos .plano__name { white-space: normal; }
  .planos .plano__head { flex-wrap: wrap; row-gap: 0.5rem; }
  .planos .plano__cta { min-height: var(--r-tap); }
  .planos .plano__price { flex-wrap: wrap; }
  /* textos dos cards de oferta: −20% sobre os tamanhos do design */
  .planos .plano__name   { font-size: 16.8px; }                              /* 21 */
  .planos .plano__tag    { font-size: 11.2px; }                              /* 14 */
  .planos .plano__amount { font-size: 35.2px; letter-spacing: -0.04em; }     /* 44 (56 quebrava "R$ 997,00") */
  .planos .plano__per    { font-size: 16.8px; }                              /* 21 */
  .planos .plano__list li { font-size: 14.4px; }                             /* 18 */
  .planos .plano__note   { font-size: 12px; }                                /* 15 */
  .planos .plano__cta    { font-size: 14.4px; }                              /* 18 */

  /* ===== Aviso ===== */
  .planos .planos__aviso {
    min-height: 0;
    padding: 1.2rem;
    justify-content: flex-start;                                          /* o desktop centraliza o bloco */
    text-align: left;
    border-radius: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* ===== Convite final ===== */
  .planos .planos__ajuda { --u: 1px; width: 100%; max-width: 44rem; }
  .planos .planos__ajuda { padding: 0.5rem; border-radius: 1rem; }
  .planos .planos__ajuda-text {
    padding: 0.5rem 0.75rem;
    font-size: 14.4px;                                                    /* mesmo tamanho dos textos dos cards de oferta */
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
  /* botão com a mesma estrutura, peso e tamanho dos botões dos planos (.plano__cta) */
  .planos .planos__ajuda-btn {
    height: auto;
    min-height: var(--r-tap);
    padding: 20px;
    gap: 10px;
    border-radius: 12px;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1;
  }
  .planos .planos__ajuda-btn img { width: 14.4px; height: 14.4px; }
}

/* Mobile: carrossel lateral */
@media (max-width: 767.98px) {
  .planos .planos__cards {
    --card-w: min(calc(100cqw - 2 * var(--r-gutter) - 2.5rem), 22rem);   /* um card + a pontinha do próximo */
    display: flex;
    justify-content: flex-start;                                          /* o desktop centraliza: com excesso de largura isso empurra o 1º card para fora, inalcançável */
    max-width: none;
    margin-inline: calc(-1 * var(--r-gutter));
    padding-inline: var(--r-gutter);
    scroll-padding-inline: var(--r-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;                                       /* a rolagem vertical da página segue livre */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto;
  }
  .planos .planos__cards::-webkit-scrollbar { display: none; }
  .planos .plano { flex: 0 0 var(--card-w); scroll-snap-align: start; scroll-snap-stop: always; }

  .planos .planos__ajuda { flex-direction: column; align-items: stretch; }
  .planos .planos__ajuda-btn { width: 100%; }
}

/* responsive/fullservice */
/* Full Service (comparativo, equipe e oferta) — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).
   A abertura (fsintro) é tratada à parte. O acordeão (fullservice.js) não muda.

   Estratégia: tudo em coluna única, com altura natural e textos em rem/clamp.
   • Comparativo: título + lead → tabela de 2 colunas (Plataforma | Full-service) → fecho.
   • Equipe: 4 cards empilhados (mobile) ou em grade 2×2 (tablet).
   • Oferta: cabeçalho → card de oferta → linha do tempo das etapas. */
@media (max-width: 1199.98px) {
  .fscomp .fscomp__canvas,
  .fsequipe .fsequipe__canvas,
  .fsoferta .fsoferta__canvas { padding: var(--r-section-y) var(--r-gutter); }

  /* ===== Comparativo ===== */
  .fscomp .fscomp__row { width: 100%; max-width: 44rem; min-height: 0; flex-direction: column; gap: 2rem; }
  .fscomp .fscomp__copy { display: contents; }                            /* topo, tabela e fecho viram itens da coluna */
  .fscomp .fscomp__top    { order: 1; padding-top: 0; gap: 1.25rem; }
  .fscomp .fscomp__table  { order: 2; width: 100%; }
  .fscomp .fscomp__bottom { order: 3; width: auto; }
  .fscomp .fscomp__title {
    --t: var(--r-fs-title);
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-box: none;
    text-wrap: balance;
  }
  .fscomp .fscomp__title-regular { font-size: var(--t); line-height: 1.2; }
  .fscomp .fscomp__title-accent  { font-size: calc(var(--t) * 1.125); line-height: 1.2; }
  .fscomp .fscomp__lead { width: auto; font-size: var(--r-fs-body); line-height: 1.4; letter-spacing: -0.01em; text-box: none; }
  .fscomp .fscomp__bottom { text-box: none; letter-spacing: -0.02em; text-align: center; }
  .fscomp .fscomp__bottom-accent { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.25; }
  .fscomp .fscomp__bottom-text { margin-top: 0.75rem; padding-bottom: 0; font-size: var(--r-fs-body); line-height: 1.4; }
  /* tabela: duas colunas iguais */
  .fscomp .fscomp__head,
  .fscomp .fscomp__line { gap: 0.5rem; align-items: stretch; }
  .fscomp .fscomp__cell,
  .fscomp .fscomp__cell:first-child { flex: 1 1 0; width: auto; padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.3; }
  .fscomp .fscomp__cell--head { padding-block: 0.875rem; font-size: 0.9375rem; }
  .fscomp .fscomp__pill { height: auto; padding: 0.375rem 0.75rem; border-radius: 0.5rem; }

  /* ===== Equipe ===== */
  .fsequipe .fsequipe__content { width: 100%; max-width: 44rem; gap: 2rem; }
  .fsequipe .fsequipe__title {
    --t: var(--r-fs-title);
    padding-inline: 0;
    letter-spacing: -0.04em;
    line-height: 1.2;
    text-wrap: balance;
  }
  .fsequipe .fsequipe__title-regular { font-size: var(--t); line-height: 1.2; }
  .fsequipe .fsequipe__title-accent  { font-size: calc(var(--t) * 1.125); line-height: 1.2; }
  .fsequipe .fsequipe__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .fsequipe .fsequipe__card { --u: 1px; min-height: 0; padding-bottom: 12px; }
  .fsequipe .fsequipe__card-top { height: auto; padding: 24px 24px 0; }
  .fsequipe .fsequipe__card-body { flex: none; padding: 16px 24px 12px; gap: 12px; }
  .fsequipe .fsequipe__card-title { font-size: 1.125rem; }
  .fsequipe .fsequipe__card-text { font-size: 0.9375rem; line-height: 1.5; }

  /* ===== Oferta ===== */
  .fsoferta .fsoferta__content { width: 100%; max-width: 44rem; gap: 2rem; }
  .fsoferta .fsoferta__head { padding-inline: 0; gap: 1rem; }
  .fsoferta .fsoferta__title {
    --t: var(--r-fs-title);
    font-size: var(--t);
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .fsoferta .fsoferta__title-accent { font-size: calc(var(--t) * 1.125); }
  .fsoferta .fsoferta__lead { max-width: none; font-size: var(--r-fs-body); line-height: 1.4; letter-spacing: -0.01em; }
  .fsoferta .fsoferta__grid { flex-direction: column; gap: 2rem; }
  .fsoferta .oferta { --u: 1px; width: auto; padding: 28px; }
  .fsoferta .oferta__amount { font-size: 40px; letter-spacing: -0.04em; }      /* 56px quebraria "R$ 10.000,00" */
  .fsoferta .oferta__price { flex-wrap: wrap; }
  .fsoferta .oferta__cta { min-height: var(--r-tap); }
  .fsoferta .etapas { --u: 1px; flex: none; padding-top: 0; }
  .fsoferta .etapas__kicker { margin-bottom: 24px; font-size: 14px; }
  .fsoferta .etapas__item { gap: 16px; padding-bottom: 28px; }
  .fsoferta .etapas__item:not(:last-child)::before { left: 19px; top: 40px; }
  .fsoferta .etapas__dot { width: 40px; height: 40px; font-size: 16px; }
  .fsoferta .etapas__text { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.25; letter-spacing: -0.02em; }
}

/* Mobile: os 4 cards da equipe ficam um por linha */
@media (max-width: 767.98px) {
  .fsequipe .fsequipe__cards { grid-template-columns: 1fr; }
}

/* responsive/fsintro */
/* Full Service · abertura (fsintro) — tablet e mobile.
   Desktop (≥1200px): nada muda (este arquivo só tem regras abaixo disso).

   A mesma cena do desktop (pin + tampa do MacBook fechando em 3D + texto no fim) e a mesma rolagem
   automática na primeira vez (fsintro.js). A dobra ocupa a tela toda, com o conteúdo centralizado, e o
   notebook tem a MESMA escala da Escala (--fsintro-k = --escala-k).

   TAMANHO: --fsintro-h é a altura da área fixada (100svh = tela inteira, que é o tamanho original). */
@media (max-width: 1199.98px) {
  .fsintro {
    --fsintro-h: 100svh;
    --pin-distance: 120svh;
    height: calc(var(--fsintro-h) + var(--pin-distance));
  }
  .fsintro .fsintro__pin { height: var(--fsintro-h); }

  .fsintro .fsintro__canvas {
    --fsintro-k: 1.683;                                                   /* igual à Escala: notebook ≈ 98% da largura */
    --u: calc(100cqw * var(--fsintro-k) / 1920);
    /* o conteúdo (do selo à base do notebook) ocupa de ~60 a ~880 das 1080 unidades do canvas:
       o centro dele está ~70 unidades acima do centro do canvas, então descemos o canvas para centralizar */
    top: calc(50% + 70 * var(--u));
  }

  /* selo "Full-Service": tamanho fixo em rem (a escala do canvas o deixaria minúsculo) */
  /* o selo sobe para perto do topo da TELA: a posição é calculada a partir do topo da área fixada
     (o canvas está centralizado e deslocado 70 unidades: topo do canvas = metade da altura + 70u − 540u) */
  .fsintro .fsintro__badge-wrap {
    --tag-top: 5rem;                                                      /* distância do topo da tela ao selo */
    top: calc(var(--tag-top) - var(--fsintro-h) / 2 + 470 * var(--u));
    padding-top: 0;
  }
  .fsintro .fsintro__tag { width: 9.75rem; height: auto; }                /* 6,5rem + 50% */

  /* texto: respiro maior depois do selo e entre título e subtexto */
  .fsintro .fsintro__text {
    top: calc(60 * var(--u) + 4rem);                                      /* selo + respiro */
    padding-inline: var(--r-gutter);
    gap: 1.5rem;
  }
  .fsintro .fsintro__title {
    --t: calc(clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem) * 0.714);        /* 0,85 (Escala) × 0,84 (−16%) ≈ 18,5–26px */
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-wrap: balance;
  }
  .fsintro .fsintro__title-regular { font-size: var(--t); line-height: 1.1; }
  .fsintro .fsintro__title-accent  { font-size: calc(var(--t) * 1.077); line-height: 1.1; }   /* 56/52 do desktop */
  .fsintro .fsintro__lead {
    width: auto;
    max-width: 36rem;
    font-size: calc(var(--r-fs-body) * 0.85);                             /* 13,6–15,3px (igual à Escala) */
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-box: none;
  }
  .fsintro .fsintro__lead p + p { margin-top: 0.5rem; }

  /* mais espaço entre o texto e o notebook: o notebook desce 3,5rem em relação à posição do desktop */
  .fsintro .fsintro__laptop { bottom: calc(200 * var(--u) - 3.5rem); }
}

/* Bloco "Resolve a dor" (v2) */
@media (min-width: 1200px) {
  :is(.treino__copy, .campanha__copy, .creators__copy, .portfolio__copy, .juridico__copy, .producao__copy, .resultados__copy):has([data-dor]) { gap: calc(48 * var(--u)); }
  .creators__copy:has([data-dor]) { gap: calc(24 * var(--u)); }
  :is(.portfolio__copy, .juridico__copy, .producao__copy, .resultados__copy):has([data-dor]) { padding-top: calc(60 * var(--u)); }
}
@media (max-width: 1199.98px) {
  [data-dor] { --u: 1px; order: 2; width: 100%; max-width: 44rem; align-self: center; box-sizing: border-box; }
  .creators .creators__row > .creators__copy > [data-dor] { grid-row: 3; }
  .creators .creators__grid,
  .creators .creators__card,
  .creators .creators__strip { grid-row: 4; }
}

@keyframes ap-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1199.98px) {
  .creators .creators__marq { --u: calc(var(--vw) / 1120); width: 100% !important; max-width: 44rem; order: 3; }
  .creators .creators__marq { grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) { .creators__marq [style*="ap-marq"] { animation: none !important; } }



@media (max-width: 1199.98px) {
  .secao .ap-mac { --u: calc(var(--vw) / 960); width: 100%; max-width: 44rem; padding-left: 0 !important; order: 3; align-self: center !important; }
}

/* Full Service · comparativo maior (v2) */
@media (min-width: 1200px) {
  .fscomp .fscomp__row { width: calc(1760 * var(--u)); gap: calc(80 * var(--u)); }
  .fscomp .fscomp__table { width: calc(1060 * var(--u)); border-radius: calc(24 * var(--u)); overflow: hidden; }
  .fscomp .fscomp__cell { font-size: calc(24 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)); }
  .fscomp .fscomp__cell:first-child { width: calc(440 * var(--u)); }
  .fscomp .fscomp__cell--head { font-size: calc(26 * var(--u)); padding-block: calc(24 * var(--u)); }
  .fscomp .fscomp__pill { height: calc(44 * var(--u)); padding-inline: calc(22 * var(--u)); border-radius: calc(14 * var(--u)); }
  .fscomp .fscomp__line .fscomp__cell:not(.fscomp__cell--dim):not(.fscomp__cell--head) { font-weight: 500; display: flex; gap: calc(14 * var(--u)); align-items: center; }
  .fscomp .fscomp__line .fscomp__cell:not(.fscomp__cell--dim):not(.fscomp__cell--head)::before { content: '✓'; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 999px; background: #d7ff00; color: #211f1f; font-size: calc(16 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .fscomp .fscomp__title-regular { font-size: calc(56 * var(--u)); }
  .fscomp .fscomp__title-accent { font-size: calc(62 * var(--u)); }
  .fscomp .fscomp__lead, .fscomp .fscomp__bottom-text { font-size: calc(26 * var(--u)); width: calc(600 * var(--u)); }
  .fscomp .fscomp__bottom { width: calc(600 * var(--u)); }
  .fscomp .fscomp__bottom-accent { font-size: calc(40 * var(--u)); }
}

@keyframes ap-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ap-orbit-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

@container (max-width: 1199px) {
  .ap-capa { --u: calc(100cqw / 1000) !important; height: auto !important; grid-template-columns: 1fr !important; padding: 48px 24px !important; gap: 32px !important; }
  .ap-capa > div:last-child { grid-template-columns: 1fr !important; row-gap: 28px; }
  .ap-capa__line { display: none !important; }
  .ap-capa__arrow { height: 40px !important; width: 4px; margin: 0 auto !important; }
  .ap-capa__arrow > div { background-image: linear-gradient(180deg, #211f1f 50%, transparent 0) !important; background-size: 4px 14px !important; }
  .ap-capa__arrow > span { right: auto !important; left: 50% !important; top: auto !important; bottom: -4px; transform: translateX(-50%) rotate(135deg) !important; }
}

@keyframes ap-dash { from { background-position: 0 0; } to { background-position: 14px 0; } }

/* Problema: no tablet mostra só a aba ativa (evita as 3 dores lado a lado se sobrepondo) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .problema .problema__panel { flex: 0 0 100% !important; min-width: 0 !important; overflow: hidden !important; box-sizing: border-box; }
  .problema .problema__visual, .problema .problema__media { max-width: 100% !important; min-width: 0 !important; overflow: hidden; }
  .problema .problema__media img { max-width: 100%; }
}

@keyframes ap-float { from { transform: translateY(-50%); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes ap-pulse { from { transform: scale(.9); opacity: .5; } to { transform: scale(1.35); opacity: 0; } }


/* ===== Mobile das dobras novas ===== */
@container (max-width: 899px) {
  .ap-md { --u: calc(100cqw / 760) !important; height: auto !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; padding: 56px 20px !important; gap: 20px !important; }
  .ap-md > div { grid-template-rows: auto !important; }
  .ap-md [style*="white-space:nowrap"], .ap-md [style*="white-space: nowrap"] { white-space: normal !important; flex-wrap: wrap; }
}
@media (max-width: 899px) {
  .ap-case { grid-template-columns: 1fr !important; height: auto !important; }
  .ap-case > div:first-child { padding: 24px !important; }
  .ap-case > div:last-child { padding: 24px 24px 72px !important; }
  .ap-case > div:last-child > div { height: 460px !important; }
  .ap-case__kpis { grid-template-columns: 1fr !important; }
  .ap-case__kpis > div { height: auto !important; }
  .ap-fs-etapas { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ap-fs-etapas > div:first-child { display: none; }
  .ap-fs-cartas { flex-basis: 100% !important; height: 440px !important; }
  .planos__cards > article { margin-top: 0 !important; }
  .casos { padding: 40px 16px !important; }
}

/* Problema: no desktop só a aba ativa aparece, mesmo se o [hidden] for removido pelo carrossel */
@media (min-width: 1200px) {
  .problema .problema__tabs-box[data-active="1"] .problema__panel:not(.problema__panel--1),
  .problema .problema__tabs-box[data-active="2"] .problema__panel:not(.problema__panel--2),
  .problema .problema__tabs-box[data-active="3"] .problema__panel:not(.problema__panel--3) { display: none !important; }
  .problema .problema__panel { overflow: hidden; }
}