@font-face {
  font-family: 'Outfit';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/outfit-700.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/dm-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/dm-sans-600.woff2') format('woff2');
}

:root {
  --color-tinta: #0E0E1A;
  --color-violeta: #5B3CF6;
  --color-violeta-claro: #8C78FF;
  --color-nevoa: #F3F1FE;
  --color-cinza: #6B6B7B;
  --color-whatsapp: #25D366;

  /* Medidas da comp aprovada (1536 x 864), em % da largura do quadro */
  --r-logo-x: 8.460%;  --r-logo-y: 4.050%;  --r-logo-w: 16.930%; --r-logo-h: 10.420%;
  --r-nav-x: 60.000%;  --r-nav-y: 0.000%;   --r-nav-w: 40.000%;  --r-nav-h: 20.000%;
  --r-headline-x: 10.000%; --r-headline-y: 30.000%; --r-headline-w: 60.000%; --r-headline-h: 30.000%;
  --r-support-x: 10.000%;  --r-support-y: 60.000%;  --r-support-w: 40.000%;  --r-support-h: 10.000%;
  --r-cta-x: 10.000%;  --r-cta-y: 70.000%;  --r-cta-w: 30.000%; --r-cta-h: 20.000%;
  --r-loop-x: 57.290%; --r-loop-y: 27.780%; --r-loop-w: 35.160%; --r-loop-h: 62.500%;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-tinta);
  color: var(--color-nevoa);
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Quadro de primeira dobra: escala com a largura, como a comp */
.comp-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 864;
  overflow: hidden;
  container-type: inline-size;
  background: var(--color-tinta);
}

.comp-frame > * { position: absolute; }

.r-logo {
  left: var(--r-logo-x); top: var(--r-logo-y);
  width: var(--r-logo-w); height: var(--r-logo-h);
  object-fit: contain;
}

/* Supergráfico do kit (viewBox 1920x1080). Posicionado para que o laço caia
   em x 57,3 % e y 27,8 % da comp, com a sangria pela direita e pelo topo. */
.r-loop {
  left: -16.15cqw; top: 4.71cqw;
  width: 103.2cqw; height: 58.05cqw;
}

.r-nav {
  left: var(--r-nav-x); top: var(--r-nav-y);
  width: 32cqw; height: var(--r-nav-h);     /* termina antes da borda, sem cortar "Contato" */
  display: flex; align-items: center; justify-content: flex-end; gap: 2.6cqw;
  font-weight: 600; font-size: 1.6cqw; color: var(--color-nevoa);
}

.r-nav a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.r-headline {
  left: var(--r-headline-x); top: var(--r-headline-y);
  width: var(--r-headline-w); height: var(--r-headline-h);
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 5.469cqw;     /* 84px a 1536px: cap height de 58,8px medida na comp */
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-nevoa);
}

.r-support {
  left: var(--r-support-x); top: var(--r-support-y);
  width: var(--r-support-w); height: var(--r-support-h);
  margin: 0;
  font-weight: 400;        /* face ranqueada no spec (DM Sans 400) */
  font-size: 1.823cqw;     /* 28px a 1536px */
  line-height: 1.5;
  color: var(--color-nevoa);
}

.r-cta {
  left: var(--r-cta-x); top: var(--r-cta-y);
  width: auto; height: auto;
  display: inline-flex; align-items: center;
  padding: 1.1cqw 2.2cqw;
  background: var(--color-whatsapp);
  color: var(--color-tinta);
  font-weight: 600; font-size: 1.823cqw;
  border-radius: 0;        /* cantos vivos, como a haste do símbolo */
  text-decoration: none;
  white-space: nowrap;
}

.r-cta:focus-visible,
.r-nav a:focus-visible {
  outline: 2px solid var(--color-violeta-claro);
  outline-offset: 3px;
}

/* Seções abaixo da primeira dobra: fluxo normal, sem quadro de medidas */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.section { padding: clamp(72px, 9vw, 120px) 0; background: #fff; color: var(--color-tinta); }
.section-nevoa { background: var(--color-nevoa); }
.section-violeta {
  background: var(--color-violeta) url('../img/pattern/trama-violeta.svg') center / 360px repeat;
  color: #fff;
}

.h2 {
  margin: 0 0 48px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-tinta);
}
.h2-light { color: #fff; }

.h3 {
  margin: 16px 0 8px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--color-tinta);
}

.section p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

/* Como trabalhamos: sequência real, por isso os números entram */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step-num { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1rem; color: var(--color-violeta); }
.step-icon { display: block; margin-top: 16px; }
.step-icon svg, .row-icon svg { width: 40px; height: 40px; color: var(--color-violeta); }

/* Serviços: linhas com fio, não cards */
.rows, .cases { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: start;
  padding: 32px 0; border-bottom: 1px solid rgba(14, 14, 26, 0.12);
}
.row:first-child { border-top: 1px solid rgba(14, 14, 26, 0.12); }
.row-icon svg { width: 48px; height: 48px; }

/* Portfólio: lista com miniatura de bloco sólido (fallback sem imagem) */
.case {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid rgba(14, 14, 26, 0.12);
}
.case:first-child { border-top: 1px solid rgba(14, 14, 26, 0.12); }
.case-thumb {
  width: 96px; height: 96px; display: grid; place-items: center;
  background: var(--color-nevoa); color: var(--color-tinta);
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1.5rem;
}
.case-sector { margin: 0 0 4px; font-size: 0.875rem; color: #4B4B5C; }

/* Contato: bloco violeta com trama tom sobre tom; botão de WhatsApp verde */
.section-violeta .lead-light { margin-top: 16px; color: var(--color-nevoa); font-size: 1.125rem; max-width: 40ch; }
.btn-whatsapp {
  display: inline-block; margin-top: 32px; padding: 16px 28px;
  background: var(--color-whatsapp); color: var(--color-tinta);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; border-radius: 0;
}

/* Rodapé */
.site-footer { background: var(--color-tinta); color: var(--color-nevoa); padding: 64px 0 48px; }
.footer-inner { display: grid; gap: 24px; }
.footer-logo { width: 200px; height: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-nav a, .footer-nav a:visited { color: var(--color-nevoa); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-copy { margin: 0; font-size: 0.9375rem; color: var(--color-nevoa); }

.section a:focus-visible, .site-footer a:focus-visible, .btn-whatsapp:focus-visible {
  outline: 2px solid var(--color-violeta); outline-offset: 3px;
}
.section-violeta a:focus-visible { outline-color: #fff; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .case { grid-template-columns: 72px 1fr; gap: 16px; }
  .case-thumb { width: 72px; height: 72px; }
}

/* Celular: o hero deixa de ser quadro de medidas e vira fluxo vertical.
   O laço fica como fundo decorativo, atrás do texto. */
@media (max-width: 760px) {
  .comp-frame {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px 64px;
    container-type: normal;
  }
  .comp-frame > * { position: relative; left: auto; top: auto; width: auto; height: auto; }

  .r-logo { width: 200px; height: auto; object-fit: initial; }

  .r-nav {
    flex-wrap: wrap; justify-content: flex-start; gap: 12px 20px;
    margin-top: 32px; font-size: 16px;
  }

  .r-loop {
    position: absolute; left: -35%; top: 28%; width: 150%; height: auto;
    z-index: 0; pointer-events: none;
  }

  .r-headline {
    z-index: 1; margin-top: 64px; font-size: 42px; line-height: 1.05; max-width: 14ch;
  }

  .r-support { z-index: 1; margin-top: 20px; font-size: 18px; max-width: 34ch; }

  .r-cta {
    z-index: 1; margin-top: 32px; padding: 14px 22px; font-size: 17px;
  }
}

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