/* ============================================================
   DARA — estilos da página estática desktop
   Construção incremental (uma seção por vez, valores extraídos
   de figma_structure.json e figma_extracted_data.json).
   ============================================================ */


/* -----------------------------------------------------------
   1. Reset minimalista + box model
   ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--vinho);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}


/* -----------------------------------------------------------
   2. Tokens (cores e tipografia extraídos do Figma)
   ----------------------------------------------------------- */
:root {
  /* Paleta — valores exatos do figma_structure.json */
  --vinho:        #3B0017;            /* Hero/Sobre/Manifesto bg, textos sobre amarelo */
  --vinho-pill:   rgba(33, 0, 13, 0.8); /* Navbar pill bg (vinho mais escuro c/ alpha) */
  --vermelho:     #F82709;            /* Logo, links navbar, títulos hero, faixa imprensa */
  --vermelho-30:  rgba(247, 40, 10, 0.3); /* Separadores/strokes a 30% */
  --amarelo:      #EEE100;            /* Destaques amarelos */
  --amarelo2:     #DCCA02;            /* Faixa dado, fundos amarelos secundários */
  --preto:        #0A0513;            /* Faixas pretas, footer */
  --cinza:        #F2F2F4;            /* Fundo equipe, textos sobre fundos escuros */
  --azul-claro:   #84E1E7;            /* Card categoria "Tecnologia" (id 82:484) */
  --branco:       #FFFFFF;

  /* Tipografia */
  --font: 'General Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --frame-width: 1440px;             /* Largura do frame Figma OFC (80:118) */
}


/* -----------------------------------------------------------
   3. Página base
   ----------------------------------------------------------- */
main {
  display: flex;
  flex-direction: column;
}


/* -----------------------------------------------------------
   SEÇÃO 1 — NAVBAR
   Figma: Group 2 (id 81:130), isFixed=true.
   - 2 pílulas vinho-pill (logo 90×90 + menu ~775×90),
     com gap horizontal de 18px.
   - Posicionada no topo, y=56 relativo ao frame
     (y absoluto Figma 1899 - topo do hero 1843).
   - Texto dos links: General Sans 500, 15px, vermelho.
   - Separadores verticais entre Imprensa/Equipe e
     Equipe/Acompanhe (1px × 28.6px, vermelho 30%).
   ----------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.navbar-inner {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}

.navbar-logo,
.navbar-menu {
  pointer-events: auto;
  height: 90px;
  background: var(--vinho-pill);
  border-radius: 50px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.navbar-logo {
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vermelho);
}

.navbar-logo-mark {
  /* Placeholder para o Vector 81:132 (44×30, vermelho).
     TODO: substituir pelo SVG real do logo DARA. */
  display: inline-block;
  font-size: 44px;
  line-height: 1;
  color: var(--vermelho);
  transform: translateY(-2px);
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 50px;
}

.navbar-menu li {
  display: flex;
  align-items: center;
}

.navbar-menu a {
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0;
  color: var(--vermelho);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.navbar-menu a:hover,
.navbar-menu a:focus-visible {
  opacity: 0.7;
}

.navbar-sep {
  width: 1px;
  height: 28.6px;
  background: var(--vermelho-30);
  border-radius: 1px;
}


/* -----------------------------------------------------------
   SEÇÃO 2 — HERO
   Figma: Rectangle 2 (id 81:125), 1440×1024, fill #3B0017.
   - h1 (id 81:144): "DADOS E ANÁLISES DO\nRACISMO E DO
     ANTIRRACISMO". Em x=145, y=426 relativo ao topo do hero
     (9326-9181=145; 2269-1843=426). Caixa 627×131,
     General Sans 500, 40px, line-height 39, vermelho.
   - Marca gigante "DARA" (Vector id 81:127): x=145, y=580 rel,
     caixa 1151×280, vermelho com stroke 6. Renderizada como
     texto HTML em General Sans 700 com tracking apertado.
     TODO: trocar por SVG real do Vector quando vier o asset.
   ----------------------------------------------------------- */
.hero {
  width: 100%;
  min-height: 1024px;
  background: var(--vinho);
  overflow: hidden;
}

.hero-inner {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 0 145px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title {
  margin-top: 426px;
  width: 627px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 40px;
  line-height: 39px;
  letter-spacing: 0;
  color: var(--vermelho);
}

.hero-mark {
  margin-top: 23px;
  width: 1151px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 360px;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: var(--vermelho);
  white-space: nowrap;
  user-select: none;
}


/* -----------------------------------------------------------
   SEÇÃO 3 — SOBRE
   Figma: Rectangle 3 (id 81:146), x=9181 y=2867, 1440×1024,
   fill #F2F2F4 (cinza).
   Padding relativo ao frame: top 105px (2972−2867), left 145px,
   bottom 137px (3891−3754), right 137px (10621−10484).
   Grid: colunas 677px + gap 24px + 457px (total conteúdo 1158).
   - Rótulo "Sobre" (81:153): GS 500, 25px, lh 33.75, #3B0017.
   - Ícone Vector (81:148): 85×58; placeholder até SVG.
   - Esquerda (81:147): GS 500, 50px, lh 50px, caixa 677×394.
   - Direita (81:149): GS 500, 20px, lh 27px, caixa 457×540.
   Espaços verticais Figma: título→ícone 74px; ícone→texto esq.
   100px; topo conteúdo→texto dir. 242px (3214−2972).
   ----------------------------------------------------------- */
.sobre {
  width: 100%;
  min-height: 1024px;
  background: var(--cinza);
}

.sobre-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 1024px;
  margin: 0 auto;
  padding: 105px 137px 137px 145px;
  display: grid;
  grid-template-columns: 677px 457px;
  column-gap: 24px;
  align-items: start;
}

.sobre-col--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sobre-label {
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 33.75px;
  letter-spacing: 0;
  color: var(--vinho);
}

.sobre-icon-placeholder {
  margin-top: 74px;
  width: 85px;
  height: 58px;
  flex-shrink: 0;
  border: 1px dashed rgba(59, 0, 23, 0.35);
  background: rgba(59, 0, 23, 0.06);
}

.sobre-lede {
  margin-top: 100px;
  max-width: 677px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: 0;
  color: var(--vinho);
}

.sobre-col--right {
  padding-top: 242px;
}

.sobre-body {
  max-width: 457px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--vinho);
}

.sobre-body p + p {
  margin-top: 27px;
}


/* -----------------------------------------------------------
   SEÇÃO 4 — FAIXA DE CITAÇÃO
   Figma: Rectangle 9 (id 81:154), x=9181 y=3891, 1440×376.
   Fill IMAGE (imageRef 4b814e0e…) + GRADIENT_LINEAR preto.
   Sem o asset real, usamos fundo preto liso + indicador TODO.
   - Texto (81:155): GS 500, 25px, lh 25, textCase UPPER,
     #F2F2F4, caixa 645×47, x=9730 y=4054.
   - Setas (81:156 / 81:157): 58×85, stroke 2, #F2F2F4.
     Edge esq da seta esq: x=9628 → padding-left = 447 (9628-9181).
     Edge dir da seta dir: x=10477 → padding-right = 144 (10621-10477).
     Conteúdo: 58 + gap 44 + 645 + gap 44 + 58 = 849 (1440-447-144 ✓).
   ----------------------------------------------------------- */
.citacao {
  position: relative;
  width: 100%;
  min-height: 376px;
  background: var(--preto);
  overflow: hidden;
}

.citacao-bg-todo {
  /* Marcação visível só em dev — substituir por background-image
     real quando o asset estiver disponível. */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 64px;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 60%);
  color: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.citacao-inner {
  position: relative;
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 376px;
  margin: 0 auto;
  padding: 0 144px 0 447px;
  display: flex;
  align-items: center;
}

.citacao-quote {
  display: flex;
  align-items: center;
  gap: 44px;
  margin: 0;
  color: var(--cinza);
}

.citacao-arrow {
  flex-shrink: 0;
  display: block;
  width: 58px;
  height: 85px;
}

.citacao-text {
  width: 645px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--cinza);
  text-align: center;
  text-transform: uppercase;
}


/* -----------------------------------------------------------
   SEÇÃO 5 — MANIFESTO
   Figma: Rectangle 10 (id 81:159), x=9181 y=4265, 1440×1024,
   fill #0A0513 (preto). Sub-blocos:
   - Rectangle 12 (id 81:169): coluna direita imagem placeholder,
     x=9914 y=4265, 707×1024 (1024 mas só visível até y=5035).
   - Rectangle 14 (id 81:172): faixa inferior vermelha #F82709,
     x=9181 y=5035, 1440×254 (cobre por cima da imagem).
   Textos:
   - Rótulo "Pesquisa & Manifesto" (81:166): x=9326 y=4372, GS
     500/25/lh33.75, #F2F2F4.
   - Corpo (81:160): x=9326 y=4529, 457×377, GS 500/20/lh27,
     #F2F2F4.
   - Claim (81:163): x=9326 y=5082, 930×154, GS 500/50/lh50,
     #3B0017 (vinho sobre vermelho).
   Espaços derivados:
   - top → rótulo = 4372-4265 = 107
   - rótulo bottom → corpo top = 4529-(4372+34) = 123
   - faixa vermelha topo → claim top = 5082-5035 = 47
   - sub-faixa preta altura: 5035-4265 = 770
   - sub-faixa vermelha altura: 5289-5035 = 254
   Coluna esq. de conteúdo: 0..733 (9914-9181); col. dir.: 707.
   ----------------------------------------------------------- */
.manifesto {
  width: 100%;
  background: var(--preto);
}

.manifesto-top {
  width: 100%;
  background: var(--preto);
}

.manifesto-top-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 770px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 733px 707px;
  align-items: stretch;
}

.manifesto-text {
  padding: 107px 145px 0 145px;
}

.manifesto-label {
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 33.75px;
  letter-spacing: 0;
  color: var(--cinza);
}

.manifesto-body {
  margin-top: 123px;
  max-width: 457px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--cinza);
}

.manifesto-body p + p {
  margin-top: 27px;
}

.manifesto-image-placeholder {
  background: rgba(242, 242, 244, 0.06);
  border: 1px dashed rgba(242, 242, 244, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 242, 244, 0.4);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.manifesto-bottom {
  width: 100%;
  background: var(--vermelho);
}

.manifesto-bottom-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 254px;
  margin: 0 auto;
  padding: 47px 145px 0 145px;
  display: flex;
  align-items: flex-start;
}

.manifesto-claim {
  max-width: 930px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: 0;
  color: var(--vinho);
}


/* -----------------------------------------------------------
   SEÇÃO 6 — NOSSA CIÊNCIA
   Figma: Rectangle 15 (id 81:186), x=9181 y=5289, 1440×688,
   fill #F2F2F4 (cinza).
   Texto intro (81:187): x=9326 y=5436, 457×269, GS 500/20/lh27,
   #3B0017.
   Pílulas (cornerRadius 15, fill #3B0017 a 10%):
   - 81:190 Rectangle 16: x=9931 y=5436, 444×93 (Rigorosa)
   - 82:193 Rectangle 17: x=9931 y=5539, 498×93 (transparente)
   - 82:194 Rectangle 18: x=9931 y=5642, 498×93 (plural)
   - 82:195 Rectangle 19: x=9931 y=5745, 396×93 (engajada — 2 linhas)
   Spacing vertical entre pílulas: 5539-5436 = 103 (height 93 + gap 10).
   Textos das pílulas (82:198–82:201): GS 500/25/lh25, #3B0017,
   x=9963 (padding-left 32 dentro da pílula).
   Padding da seção: top 147 (5436-5289), left 145, right 192
   (1440-1103-145), bottom 139 (5977-5838).
   ----------------------------------------------------------- */
.ciencia {
  width: 100%;
  background: var(--cinza);
}

.ciencia-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 688px;
  margin: 0 auto;
  padding: 147px 192px 139px 145px;
  display: grid;
  grid-template-columns: 457px 498px;
  column-gap: 148px;
  align-items: start;
}

.ciencia-text {
  max-width: 457px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--vinho);
}

.ciencia-text p + p {
  margin-top: 27px;
}

.ciencia-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: start;
}

.ciencia-pill {
  width: fit-content;
  min-height: 93px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  background: rgba(59, 0, 23, 0.1);
  border-radius: 15px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--vinho);
}


/* -----------------------------------------------------------
   SEÇÃO 6.5 — ACREDITAMOS
   Figma: Rectangle 14 (id 81:???), x=9181 y=5977, 1440×1024,
   fill #0A0513 (preto = --preto).
   Layout em duas colunas:
     - Esquerda: Rectangle IMAGE x=9326 y=6125, 545×730,
       cornerRadius 20, imageRef "af723f87611d…". Vector
       decorativo (id 82:214) 479×99 amarelo em x=9359 y=6722
       sobreposto à parte inferior da imagem.
     - Direita (x≈9977):
       • Lede (id 82:217): "O conhecimento produzido…",
         x=9978 y=6152, 459×80, GS 500/20/lh27, amarelo.
       • Frase grande (id 82:216): "Acreditamos\n…",
         x=9977 y=6325, 467×402, GS 500/50/lh50, amarelo.
       • Pos (id 82:218): "Podem ampliar…", x=9978 y=6769,
         645×80, GS 500/20/lh27, amarelo.
   Padding lateral derivado: 145 esq (9326-9181) e 0 dir
   (textos vão até quase o final do frame).
   ----------------------------------------------------------- */
.acreditamos {
  width: 100%;
  background: var(--preto);
}

.acreditamos-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 1024px;
  margin: 0 auto;
  padding: 148px 0 0 145px;
  display: grid;
  grid-template-columns: 545px 1fr;
  /* gap horizontal: 9977 - (9326+545) = 106 */
  column-gap: 106px;
}

.acreditamos-imagem {
  position: relative;
  width: 545px;
  height: 730px;
  border-radius: 20px;
  /* Placeholder visual enquanto não há a imagem real;
     TODO substituir por background-image: url(...) com a foto
     extraída (imageRef "af723f87611d7dc0e38b150b00999a8a53e1b28d"). */
  background:
    linear-gradient(135deg, rgba(238, 225, 0, 0.05), rgba(248, 39, 9, 0.05)),
    #2a2a2a;
  overflow: hidden;
}

.acreditamos-imagem-todo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: rgba(238, 225, 0, 0.5);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.acreditamos-vector {
  /* Vector decorativo amarelo (id 82:214): 479×99 em x=9359
     y=6722. Relativo ao topo da imagem (y=6125): top 597.
     Relativo ao left da imagem (x=9326): left 33. */
  position: absolute;
  left: 33px;
  top: 597px;
  width: 479px;
  height: 99px;
  color: var(--amarelo);
  pointer-events: none;
}

.acreditamos-textos {
  /* Coluna direita: empilhamento natural seguindo a ordem
     visual do Figma (lede → título grande → pos). Os offsets
     verticais reproduzem aproximadamente os y do Figma. */
  display: flex;
  flex-direction: column;
  /* lede top: 6152 - 5977 = 175. padding-top do inner = 148.
     Então o primeiro texto começa 27px abaixo do topo do inner. */
  padding-top: 27px;
}

.acreditamos-lede {
  width: 459px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--amarelo);
  margin: 0;
}

.acreditamos-titulo {
  /* gap lede→titulo: 6325 - (6152+80) = 93 */
  margin-top: 93px;
  width: 467px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: 0;
  color: var(--amarelo);
}

.acreditamos-pos {
  /* gap titulo→pos: 6769 - (6325+402) = 42 */
  margin-top: 42px;
  width: 645px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--amarelo);
}


/* -----------------------------------------------------------
   SEÇÃO 7 — SOBRE O NOME
   Figma: Rectangle 21 (id 82:228), x=9181 y=7002, 1440×1024,
   fill #DCCA02 (amarelo escuro = --amarelo2).
   Padrão decorativo: 3 Vectors "DARA" empilhados, x=9326,
   y=7077/7374/7671, 1151×280, fill #CCB604 (amarelo + escuro).
   Card central: Rectangle 30 (id 82:229), x=9643 y=7223,
   517×582, cornerRadius 20, fill #EEE100 (--amarelo).
   Card está centralizado horizontal e verticalmente no frame
   (padding ~462 lados; ~221 topo/fundo).
   Conteúdo do card (paddings derivados):
   - top 51 (7274-7223), left 43 (9686-9643)
   - corpo (82:230): 457×269, GS 500/20/lh27, #3B0017
   - gap 44 (7587-7543)
   - claim (82:231): 438×182, GS 500/30/lh33, #3B0017
   - bottom 36 (7805-7769)
   Em 82:230 as palavras "dárà" e "data" usam GS Semibold (600).
   ----------------------------------------------------------- */
.nome {
  position: relative;
  width: 100%;
  min-height: 1024px;
  background: var(--amarelo2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nome-bg {
  /* Substituto temporário das letras "DARA" gigantes vetorizadas.
     TODO: trocar por SVGs reais (Vectors 126:99 + 2 irmãos). */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  pointer-events: none;
  user-select: none;
  font-family: var(--font);
  font-weight: 700;
  font-size: 280px;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #CCB604;
  text-transform: uppercase;
}

.nome-bg span {
  display: block;
}

.nome-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 517px;
  min-height: 582px;
  padding: 51px 17px 36px 43px;
  background: var(--amarelo);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

.nome-text {
  width: 457px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--vinho);
}

.nome-text strong {
  font-weight: 600;
}

.nome-claim {
  margin-top: 44px;
  width: 438px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 30px;
  line-height: 33px;
  letter-spacing: 0;
  color: var(--vinho);
}


/* -----------------------------------------------------------
   SEÇÃO 8 — FAIXA SLOGAN
   Figma: Rectangle 31 (id 82:238), x=9181 y=8026, 1440×376,
   fill #0A0513 (preto = --preto).
   Placeholders laterais (276×376 cada, IMG fills, sem cor sólida):
   - Rectangle 43 (124:7): x=9180 y=8026 (esquerda)
   - Rectangle 42 (124:6): x=10346 y=8026 (direita)
   Texto (82:242): x=9254 y=8139, 1295×149, GS 500/40/lh45,
   textCase UPPER, textAlign CENTER, #F2F2F4.
   Padding-top do texto: 113 (8139-8026); centralizado vertical.
   ----------------------------------------------------------- */
.slogan {
  width: 100%;
  background: var(--preto);
}

.slogan-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 376px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 276px 1fr 276px;
  align-items: center;
}

.slogan-image-placeholder {
  height: 376px;
  background: rgba(242, 242, 244, 0.04);
  border: 1px dashed rgba(242, 242, 244, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 242, 244, 0.4);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px;
}

.slogan-text {
  font-family: var(--font);
  font-weight: 500;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 0;
  color: var(--cinza);
  text-align: center;
  text-transform: uppercase;
  padding: 0 24px;
}


/* -----------------------------------------------------------
   SEÇÃO 8.5 — ABORDAGEM
   Figma: Rectangle 35 (id 82:283), x=9181 y=9829, 1440×899,
   fill #F2F2F4 (cinza = --cinza).
   Layout: 2 cards lado a lado (sem fill, apenas border vinho
   2px @ 20% opacity, cornerRadius 20).
     - Card esquerdo (Rectangle 36 / id 82:284):
       394.75×642 em x=9322 y=9956.
       • Título "Abordagem:" (id 82:289), GS 500/25/lh25, vinho,
         em x=9363 y=9988 → padding interno: top 32, left 41.
       • Texto corrido (id 82:288), GS 500/20/lh27, vinho,
         em x=9363 y=10059, 320×269 → 71px abaixo do título.
     - Card direito (Rectangle 37 / id 82:285):
       742.39×642 em x=9737.61 y=9956.
       • Texto-placeholder (id 82:291) "AQUI VÃO OS DADOS DA
         PESQUISA CITADA NO TEXTO." centralizado h/v,
         GS 500/25/lh25, vinho, 285×47 em x=9954 y=10253.
   Padding do "frame" interno: top 127 (9956-9829), bottom 130
   (10728-10598), lados 141 (9322-9181 / 10621-10480).
   Gap horizontal entre cards: ~21 (9737.61 - (9322+394.75)).
   ----------------------------------------------------------- */
.abordagem {
  width: 100%;
  background: var(--cinza);
}

.abordagem-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 899px;
  margin: 0 auto;
  padding: 127px 141px 130px;
  display: grid;
  grid-template-columns: 394.75px 1fr;
  column-gap: 21px;
}

.abordagem-card {
  height: 642px;
  border: 2px solid rgba(59, 0, 23, 0.2);
  border-radius: 20px;
  box-sizing: border-box;
}

.abordagem-card--texto {
  padding: 32px 41px;
  display: flex;
  flex-direction: column;
}

.abordagem-card-titulo {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--vinho);
}

.abordagem-card-texto {
  /* gap titulo→texto: 10059 - (9988+47) = 24 */
  margin: 24px 0 0;
  width: 320px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--vinho);
}

.abordagem-card--placeholder {
  /* Card direito reservado para gráfico/dado da pesquisa.
     Texto centralizado horizontal e vertical conforme Figma. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.abordagem-card-placeholder-texto {
  margin: 0;
  max-width: 285px;
  text-align: center;
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--vinho);
}


/* -----------------------------------------------------------
   SEÇÃO 9 — FAIXA DADO
   Figma: Rectangle 38 (id 82:292), x=9181 y=10728, 1440×376,
   fill #F82709 (vermelho = --vermelho). Atenção: o plano original
   dizia "amarelo", mas o JSON do Figma é vermelho.
   Textos:
   - 82:295 "112.700.000": x=9322 y=10810, 1236×200, GS Regular
     400, fontSize 175 (override styles 11 e 12), #3B0017.
     Chars "." (idx 3 e 7) e o último "0" (idx 10) recebem
     style 11 → cor #EEE100 (amarelo). Demais usam #3B0017.
   - 82:294 "Número da população\npreta ou parda.": x=10276
     y=10883, 204×54, GS 500/20/lh27, #3B0017.
     Centro vertical alinhado ao centro do número (lh do número
     é 62 só para apertar a caixa visualmente).
   Padding lateral derivado: 141 (9322-9181) à esq.,
   141 (10621-10480) à dir.
   ----------------------------------------------------------- */
.dado {
  width: 100%;
  background: var(--vermelho);
}

.dado-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 376px;
  margin: 0 auto;
  padding: 0 141px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.dado-numero {
  font-family: var(--font);
  font-weight: 400;
  font-size: 175px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--vinho);
  white-space: nowrap;
}

.dado-accent {
  color: var(--amarelo);
}

.dado-legenda {
  flex-shrink: 0;
  width: 204px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--vinho);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -----------------------------------------------------------
   SEÇÃO 10 — IMPRENSA
   Figma: Rectangle 39 (id 82:297), x=9181 y=11104, 1440×772,
   fill #EEE100 (amarelo = --amarelo). Atenção: o plano dizia
   "fundo vermelho" mas o JSON do Figma é amarelo.
   - Título "Imprensa:" (82:298): x=9322 y=11186, GS 500/60/lh62,
     #3B0017 (vinho).
   - Group 29 / id 82:301: 3 cards "pasta" (Vector 82:302/303/304),
     341.45×277.48 cada, fill #3B0017, em y=11442.
     x: 9322.92 / 9730.73 / 10138.55 → gap horizontal de ~66px.
   - Textos dos cards (Manifesto / Pesquisa 01 / Pesquisa 02):
     GS 500/20, color #EEE100 (amarelo), x ~44px do edge esq
     do card, y=11619.31 (177 do topo do card).
   - Links "abrir" (82:308/309/310): GS 500/20, #EEE100 a 30%,
     UNDERLINE, mesma y dos títulos, mais à direita.
   - Lines 82:311+: separadores horizontais amarelos abaixo da
     linha título+link (y=11680.98, ~252px de largura).
   Padding lateral derivado: 142 (esq) e 141 (dir).
   Top derivado: 82 (11186-11104).
   ----------------------------------------------------------- */
.imprensa {
  width: 100%;
  background: var(--amarelo);
}

.imprensa-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 772px;
  margin: 0 auto;
  padding: 82px 141px 0 142px;
}

.imprensa-titulo {
  font-family: var(--font);
  font-weight: 500;
  font-size: 60px;
  line-height: 62px;
  letter-spacing: 0;
  color: var(--vinho);
}

.imprensa-cards {
  /* y=11442 - (y_titulo=11186 + h=146) = 110 */
  margin-top: 110px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 66px;
}

.imprensa-card {
  /* Aproximação visual da forma "pasta" do Vector: retângulo
     arredondado vinho com aba pequena no top-left.
     TODO: substituir por SVG real (Vectors 82:302/303/304). */
  position: relative;
  display: block;
  min-height: 278px;
  padding: 0 44px;
  background: var(--vinho);
  border-radius: 0 20px 20px 20px;
  color: var(--amarelo);
}

.imprensa-card::before {
  /* Aba esquerda da pasta */
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  width: 130px;
  height: 30px;
  background: var(--vinho);
  border-radius: 14px 14px 0 0;
}

.imprensa-card-icon {
  position: absolute;
  top: 32px;
  left: 44px;
  width: 47px;
  height: 32px;
  color: var(--amarelo);
}

.imprensa-card-row {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 39px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.imprensa-card-titulo {
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--amarelo);
}

.imprensa-card-link {
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: rgba(238, 225, 0, 0.3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.imprensa-card:hover .imprensa-card-link,
.imprensa-card:focus-visible .imprensa-card-link {
  color: var(--amarelo);
}

.imprensa-card-line {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 30px;
  height: 2px;
  background: var(--amarelo);
}


/* -----------------------------------------------------------
   SEÇÃO 11 — NOSSOS VALORES
   Figma: Rectangle 30 / id 82:227, x=9181 y=8402, 1440×1427,
   fill SOLID #3B0017 vinho sobre IMAGE (imagem é coberta; usar
   só o vinho). TODO: re-extrair imagem caso volte a aparecer.
   - Título "NOSSOS\nVALORES" (id 82:248): x=9332 y=8487, 1139×298,
     GS 500/110/lh110, letterSpacing -3.3, color #F82709 vermelho,
     align CENTER, 2 linhas.
   - 5 Rectangle 10 (82:253/259/266/272/277): 379×397, radius 20,
     fill #F72809 (vermelho — variação levíssima do --vermelho).
     Layout 3 + 2 deslocado em meia coluna.
       Linha 1 (y=8870): x=9316 / 9712 / 10108 (gap H = 17)
       Linha 2 (y=9285): x=9514 / 9910            (gap V = 18)
   - Texto dentro de cada card (origem padded ~51 do edge esq/topo):
       Título "Autonomia:" (etc.) GS 500/25/lh25 vinho.
       Body GS 500/20/lh27 vinho, w=285.
       Número "01"–"05" GS 500/17/lh17 vinho, alinhado à direita.
       Vector 43×29 vinho à esquerda do número (decorativo).
   ----------------------------------------------------------- */
.valores {
  width: 100%;
  background: var(--vinho);
}

.valores-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 1427px;
  margin: 0 auto;
  padding: 85px 135px 147px 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 85px;
}

.valores-titulo {
  font-family: var(--font);
  font-weight: 500;
  font-size: 110px;
  line-height: 110px;
  letter-spacing: -3.3px;
  text-align: center;
  color: var(--vermelho);
  display: flex;
  flex-direction: column;
  /* "NOSSOS\nVALORES" — alinhamento e quebra de linha
     reproduzidos por dois <span> em coluna. */
}

.valores-titulo span {
  display: block;
}

.valores-cards {
  /* Grid de 6 colunas para permitir 3 cards na linha 1
     ocupando 2 colunas cada e 2 cards na linha 2 deslocados
     em uma coluna (efeito "tijolo"). Cada coluna ≈ 181px. */
  width: 1171px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 17px;
  row-gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.valor-card {
  position: relative;
  box-sizing: border-box;
  height: 397px;
  padding: 51px 43px 51px 51px;
  background: var(--vermelho);
  border-radius: 20px;
  color: var(--vinho);
  display: flex;
  flex-direction: column;
}

.valor-card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.valor-card:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
.valor-card:nth-child(3) { grid-column: 5 / span 2; grid-row: 1; }
.valor-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
.valor-card:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; }

.valor-titulo {
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--vinho);
  margin: 0 0 28px 0;
}

.valor-texto {
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--vinho);
  margin: 0;
}

.valor-rodape {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.valor-vector {
  width: 43px;
  height: 29px;
  color: var(--vinho);
  flex-shrink: 0;
}

.valor-numero {
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 17px;
  letter-spacing: 0;
  color: var(--vinho);
}


/* -----------------------------------------------------------
   SEÇÃO 12 — EQUIPE
   Figma: Rectangle 40 (id 82:318), x=9181 y=11876, 1440×4178,
   fill #F2F2F4 (cinza = --cinza). Esse retângulo cobre Equipe
   + Parceiros; aqui o estilo aplica só à área da Equipe.
   - Título h2 "Conheça os membros da nossa equipe:" (id 82:319):
     x=9322 y=11996, 746×146, GS 500/60/lh62, vinho.
   - 5 cards "categoria" 317×414 radius 20:
       Coordenação geral      (Group 33 / 82:401) bg vermelho, txt vinho
       Coord. Pesquisa & Eixos(Group 32 / 82:400) bg vinho,    txt vermelho
       Comunicação            (Group 39 / 82:447) bg amarelo,  txt vinho
       Tecnologia             (Group 43 / 82:483) bg azul-claro,txt vinho
       Pesquisadores associados(Group 45 / 82:498) bg preto,    txt cinza
     Texto categoria: GS 500/30/lh30. Vector decorativo 47×32.
   - Cards de pessoa 317×414 (Rectangle 47 com IMAGE foto +
     Rectangle 48 gradient overlay preto na metade inferior):
       Nome (GS 500/20/lh20) cinza no topo do bloco de texto.
       Bio (GS 500/13/lh17.55) cinza.
       Pills "Lattes"/"Linkedin": GS 500/13, padding ~9-12,
       border 2px cinza, border-radius 60.
   - Layout: 4 cards por linha (1 categoria + 3 pessoas), gap 18.
     Cards começam em x=9240 (padding-left=59 desde o frame).
   ----------------------------------------------------------- */
.equipe {
  width: 100%;
  background: var(--cinza);
}

.equipe-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  margin: 0 auto;
  /* padding-top: 11996 - 11876 = 120
     padding-left: 9240 - 9181 = 59 (largura útil dos cards
     começa em 59 mas o título começa em 141; tratado abaixo) */
  padding: 120px 59px 0 59px;
  display: flex;
  flex-direction: column;
}

.equipe-titulo {
  /* Título tem padding-left adicional para alinhar em x=9322
     (141 do frame), mas o container já está em x=9240 (59 do
     frame); diferença = 82px. */
  margin-left: 82px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 60px;
  line-height: 62px;
  letter-spacing: 0;
  color: var(--vinho);
  margin-bottom: 146px;
}

.equipe-grupo {
  display: grid;
  grid-template-columns: 317px 1fr;
  column-gap: 18px;
  margin-bottom: 64px;
}

.equipe-grupo:last-of-type {
  margin-bottom: 0;
}

.equipe-categoria-card {
  position: relative;
  box-sizing: border-box;
  width: 317px;
  height: 414px;
  padding: 37px 41px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

.equipe-categoria-card--vermelho {
  background: var(--vermelho);
  color: var(--vinho);
}

.equipe-categoria-card--vinho {
  background: var(--vinho);
  color: var(--vermelho);
}

.equipe-categoria-card--amarelo {
  background: var(--amarelo);
  color: var(--vinho);
}

.equipe-categoria-card--azul {
  background: var(--azul-claro);
  color: var(--vinho);
}

.equipe-categoria-card--preto {
  background: var(--preto);
  color: var(--cinza);
}

.equipe-categoria-titulo {
  font-family: var(--font);
  font-weight: 500;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: 0;
  color: inherit;
}

.equipe-categoria-vector {
  position: absolute;
  left: 41px;
  bottom: 44px;
  width: 47px;
  height: 32px;
  color: inherit;
}

.equipe-pessoas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.equipe-pessoa {
  position: relative;
  box-sizing: border-box;
  height: 414px;
  border-radius: 20px;
  overflow: hidden;
  background: #5a4a4a;
  /* Placeholder de cor de foto enquanto não há imagem real;
     TODO substituir por background-image: url(...) com a foto. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.equipe-pessoa::before {
  /* Gradient overlay preto na metade inferior (Rectangle 48):
     transparent no topo → preto sólido em ~72%. */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 292px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 72%
  );
  z-index: 1;
}

.equipe-pessoa-foto {
  /* Placeholder visual identificando que falta a imagem real. */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 0;
}

.equipe-pessoa-conteudo {
  position: relative;
  z-index: 2;
  padding: 0 31px 32px 31px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.equipe-pessoa-nome {
  font-family: var(--font);
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--cinza);
}

.equipe-pessoa-bio {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  line-height: 17.55px;
  letter-spacing: 0;
  color: var(--cinza);
  margin: 0;
}

.equipe-pessoa-links {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}

.equipe-pessoa-link {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  line-height: 17.55px;
  color: var(--cinza);
  border: 2px solid var(--cinza);
  border-radius: 60px;
  padding: 7px 20px;
}

.equipe-pessoa-link:hover,
.equipe-pessoa-link:focus-visible {
  background: var(--cinza);
  color: var(--vinho);
}

.equipe-pessoa--placeholder {
  background: rgba(59, 0, 23, 0.08);
  border: 1px dashed rgba(59, 0, 23, 0.25);
}

.equipe-pessoa--placeholder::before {
  /* placeholder não tem overlay escuro */
  display: none;
}


/* -----------------------------------------------------------
   SEÇÃO 13 — PARCEIROS
   Figma: Rectangle 24 (id 82:583), x=9181 y=16054, 1440×376,
   fill #0A0513 (preto = --preto). Atenção: o plano dizia
   "vinho", mas o JSON do Figma é preto.
   - Título "Nossos parceiros:" (id 82:585): x=9792 y=16154,
     218×60, GS 500/25/lh62, color #F2F2F4 (cinza), centralizado
     horizontalmente na seção.
   - Group 54 (id 126:178): x=9500 y=16230, 808×75. Contém:
       iesp-logo (126:167)  225×70 em x=9500 y=16230
       Line 1   (126:162)  separador vertical 2×28.6 em x=9800 y=16265, cinza @30%
       IF logo  (126:169)  151×43 em x=9877 y=16256
       Line 22  (126:171)  separador vertical 2×28.6 em x=10103 y=16265
       logoapoio(126:176)  128×55 em x=10180 y=16250
     Logos centralizados verticalmente em y≈16265 (centro do
     bloco). Separadores entre cada par de logos.
   - Spacing vertical: title top 100, logos top 176 (gap 16
     entre title bottom 16214 e logos top 16230).
   ----------------------------------------------------------- */
.parceiros {
  width: 100%;
  background: var(--preto);
}

.parceiros-inner {
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 376px;
  margin: 0 auto;
  padding: 100px 141px 100px 141px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.parceiros-titulo {
  font-family: var(--font);
  font-weight: 500;
  font-size: 25px;
  line-height: 62px;
  letter-spacing: 0;
  color: var(--cinza);
  text-align: center;
}

.parceiros-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 78px;
  /* gap derivado: separador em x=9800; iesp termina em x=9725.
     gap entre iesp e separador = 75; entre separador e IF = 77.
     Aproximamos com gap 78. */
  list-style: none;
  padding: 0;
  margin: 0;
}

.parceiros-logo {
  /* Placeholder visual enquanto não há SVG/PNG real.
     TODO substituir por <img> ou background-image com o asset
     extraído do Figma (imageRefs documentados no comentário). */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(242, 242, 244, 0.35);
  border-radius: 6px;
  color: rgba(242, 242, 244, 0.6);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 8px 12px;
}

.parceiros-logo--iesp {
  width: 225px;
  height: 70px;
}

.parceiros-logo--if {
  width: 151px;
  height: 43px;
}

.parceiros-logo--apoio {
  width: 128px;
  height: 55px;
}

.parceiros-logo-todo {
  display: block;
}

.parceiros-sep {
  width: 2px;
  height: 28.6px;
  background: rgba(242, 242, 244, 0.3);
  border-radius: 1px;
}


/* -----------------------------------------------------------
   SEÇÃO 14 — FOOTER
   Composto por duas faixas empilhadas:
     - Parte 1 (vermelha): Rectangle 25 (id 82:595), x=9181
       y=16430, 1440×852, fill #F72809 (--vermelho).
     - Parte 2 (vinho):    Rectangle 41 (id 82:604), x=9181
       y=17282, 1440×700, fill #3B0017 (--vinho).
   Conteúdos:
     - Tagline (id 82:597): "Dados\nque revelam, conectam &
       transformam realidades.", x=9322 y=16509, 746×448,
       GS 500/90/lh90, textCase UPPER, color #3B0017 (vinho).
     - Vector decorativo (id 82:602) 927×632 stroke 3 vinho,
       x=10107 y=16542 — placeholder TODO.
     - Logo DARA pequeno (id 82:598) 92×92 vinho em x=9329
       y=17071 + wordmark "DARA" Vector (id 82:599) 429×62
       em x=9462 y=17086 (sobre o fundo vermelho).
     - CTA newsletter (id 82:605): "FIQUE POR DENTRO\nDAS
       NOVIDADES\n& ATUALIZAÇÕES.", x=9329 y=17397, 1028×146,
       GS 500/50/lh50 UPPER, color #F82709 vermelho.
     - 3 links sociais (ids 82:606/607/608, GS 500/30, vermelho)
       em y=17381: Instagram (x=10055), Contato (x=10228),
       Linkedin (x=10375). Em linha horizontal à direita.
     - Vectors decorativos 82:610 / 82:611 perto do bottom —
       placeholders TODO.
   ----------------------------------------------------------- */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- Parte 1: faixa vermelha (tagline + brand) ---------- */
.footer-top {
  width: 100%;
  background: var(--vermelho);
}

.footer-top-inner {
  position: relative;
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 852px;
  margin: 0 auto;
  /* Tagline em x=9322 → padding-left 141.
     Topo da tagline em y=16509 → padding-top 79. */
  padding: 79px 141px 0 141px;
}

.footer-tagline {
  /* Tagline 746×448, 90px line-height 90px, UPPER */
  width: 746px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 90px;
  line-height: 90px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--vinho);
  margin: 0;
}

.footer-brand {
  position: absolute;
  /* Logo asterisco em x=9329 (~148 do frame), y=17071.
     Wordmark em x=9462 (~281 do frame), y=17086.
     Footer-top inicia em y=16430.
     Logo top relativo: 17071-16430 = 641.
     Wordmark top relativo: 17086-16430 = 656. */
  left: 148px;
  top: 641px;
  display: flex;
  align-items: center;
  gap: 41px;
  /* gap horizontal: 9462 - (9329+92) = 41 */
  color: var(--vinho);
}

.footer-brand-logo {
  display: inline-flex;
  width: 92px;
  height: 92px;
}

.footer-brand-logo svg {
  width: 100%;
  height: 100%;
}

.footer-brand-wordmark {
  font-family: var(--font);
  font-weight: 500;
  /* Wordmark Vector tem 429×62; aproximamos como texto
     uppercase grande até dispormos do SVG real. */
  font-size: 80px;
  line-height: 62px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vinho);
}

.footer-decor-todo {
  /* Placeholder visual para o Vector decorativo (id 82:602)
     que ocupa o canto direito da faixa vermelha. */
  position: absolute;
  right: 60px;
  top: 112px;
  width: 927px;
  max-width: calc(100% - 120px);
  height: 632px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  border: 1px dashed rgba(59, 0, 23, 0.25);
  border-radius: 12px;
  padding: 16px;
  color: rgba(59, 0, 23, 0.4);
  font-family: var(--font);
  font-size: 12px;
  text-align: right;
}

/* ---------- Parte 2: faixa vinho (CTA + links) ---------- */
.footer-bottom {
  width: 100%;
  background: var(--vinho);
}

.footer-bottom-inner {
  position: relative;
  box-sizing: border-box;
  max-width: var(--frame-width);
  min-height: 700px;
  margin: 0 auto;
  /* CTA em x=9329 → padding-left 148. Topo em y=17397.
     Footer-bottom inicia em y=17282 → padding-top 115. */
  padding: 115px 141px 0 148px;
  display: flex;
  flex-direction: column;
}

.footer-cta {
  /* CTA 1028×146, GS 500/50/lh50, UPPER, vermelho.
     Width contém também os links sociais à direita
     (eles ficam absolutamente posicionados sobre/à direita). */
  font-family: var(--font);
  font-weight: 500;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--vermelho);
  width: 1028px;
  max-width: 100%;
  margin: 0;
}

.footer-social {
  position: absolute;
  /* Links sociais y=17381, primeiro link em x=10055.
     Footer-bottom y=17282 → top 99.
     Links em x=10055; footer-bottom-inner começa em x=9181
     com padding-left 148, então alinhamento absoluto via
     right: o último link Linkedin termina em x=10491,
     então right do frame = 10621-10491 = 130. */
  top: 99px;
  right: 130px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 30px;
  line-height: 50px;
  color: var(--vermelho);
}

.footer-social ul {
  display: flex;
  align-items: center;
  gap: 31px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social-link {
  color: var(--vermelho);
  text-decoration: none;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.footer-decor-bottom-todo {
  /* Placeholder para os Vectors decorativos 82:610 (633×129)
     em y=17732 e 82:611 (495×71) em y=17761.
     Ambos no rodapé inferior da faixa vinho. */
  position: absolute;
  left: 141px;
  bottom: 90px;
  /* Vectors topo: 17732-17282 = 450. Bottom relativo:
     17282+700 - (17732+129) = 121. Aproximamos com 90. */
  right: 130px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  border: 1px dashed rgba(248, 39, 9, 0.25);
  border-radius: 12px;
  padding: 16px;
  color: rgba(248, 39, 9, 0.5);
  font-family: var(--font);
  font-size: 12px;
}