/* ==========================================================================
   Shapeweb — Home v2
   Sistema de design do novo layout (nav em pílula, hero full-bleed,
   slider de segmentos, rodapé escuro).
   ========================================================================== */

:root {
  /* Cores */
  --bg:              #FBFAF8;
  --bg-alt:          #F7F4EF;
  --surface:         #FFFFFF;
  --border:          #E8E4DE;
  --border-strong:   #D6D1C9;
  --text:            #111417;
  --text-2:          #4A5259;
  --text-3:          #5C646C;

  --dark:            #101418;
  --dark-surface:    #161B21;
  --dark-border:     #242B33;
  --on-dark:         #F7F5F1;
  --on-dark-soft:    #F4F1EC;
  --on-dark-2:       #B4BBC2;
  --on-dark-3:       #8A939C;

  --accent:          #0B6FA4;
  --accent-hover:    #08557E;
  --accent-on-dark:  #5FB6DE;

  /* Cores das estrelas conforme o sistema de design.
     ATENÇÃO — contraste: #E0A93B sobre branco dá 2,12:1 e #FFD37A sobre
     #0B6FA4 dá 3,88:1, ambos abaixo do mínimo AA (4,5:1) para texto.
     A nota também é lida por leitores de tela (aria-label nas estrelas e
     o "5.0" em texto). Para conformidade total, trocar por:
       --star: #8C6414;  (5,32:1 sobre branco)
       --star-on-blue: #FFE6B0;  (4,50:1 sobre #0B6FA4)  */
  --star:            #E0A93B;
  --star-on-blue:    #FFD37A;

  /* Forma e ritmo */
  --container:       1180px;
  --gutter:          32px;
  --section-y:       128px;
  --radius-card:     24px;
  --radius-block:    28px;
  --radius-img:      22px;
  --shadow-hover:    0 22px 48px -26px rgba(17, 20, 23, 0.3);

  /* Tipografia */
  --font-display:    'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  --font-body:       Manrope, Helvetica, Arial, sans-serif;
  --font-mono:       'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 0 0 12px 0;
}
.sw-skip:focus { left: 0; }

@keyframes sw-rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Blocos utilitários
   -------------------------------------------------------------------------- */

.sw-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

.sw-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.sw-eyebrow--dark { color: var(--accent-on-dark); }

.sw-h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.036em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.sw-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
}
.sw-lead--dark { color: #9BA3AB; }

.sw-head-center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}

.sw-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
}
.sw-head-row > div:first-child { max-width: 740px; }

/* Botões e pílulas */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.sw-btn--light {
  padding: 17px 32px;
  color: var(--dark);
  background: var(--on-dark-soft);
}
.sw-btn--light:hover { background: #FFFFFF; color: var(--dark); }

.sw-btn--ghost {
  padding: 17px 32px;
  color: var(--on-dark-soft);
  border-color: rgba(255, 255, 255, 0.22);
}
.sw-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-dark-soft); }

.sw-btn--outline {
  flex-shrink: 0;
  padding: 15px 26px;
  font-size: 15px;
  color: var(--text);
  border-color: var(--border-strong);
}
.sw-btn--outline:hover { background: var(--surface); color: var(--text); }

.sw-btn--solid-light {
  align-self: flex-start;
  padding: 14px 24px;
  font-size: 15px;
  color: var(--dark);
  background: var(--on-dark-soft);
}
.sw-btn--solid-light:hover { background: #FFFFFF; color: var(--dark); }

.sw-link-arrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.sw-link-arrow:hover { color: var(--accent-hover); }

/* --------------------------------------------------------------------------
   Nav flutuante em pílula
   -------------------------------------------------------------------------- */

.sw-navwrap {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: calc(100% - 48px);
  max-width: var(--container);
}

.sw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 12px 10px 22px;
  background-color: rgba(16, 20, 24, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 18px 46px -22px rgba(0, 0, 0, 0.6);
  transition: background-color .28s ease, border-color .28s ease,
              box-shadow .28s ease, backdrop-filter .28s ease;
}

/* No topo da página o menu continua visível, mas sem o fundo da pílula:
   só os itens sobre o hero. O JS põe .is-scrolled assim que a rolagem começa.
   Sem JS (sem .sw-js no html) o fundo aparece desde o início. */
.sw-js .sw-navwrap:not(.is-scrolled) .sw-nav {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sw-nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.sw-nav__logo {
  height: 54px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.sw-nav__menu { display: flex; align-items: center; gap: 4px; }

.sw-nav__link {
  padding: 9px 15px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: #DDE2E7;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.sw-nav__link:hover { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; }

.sw-nav__cta {
  margin-left: 8px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
  background: var(--on-dark-soft);
  border-radius: 999px;
  transition: background-color .2s ease;
  white-space: nowrap;
}
.sw-nav__cta:hover { background: #FFFFFF; color: var(--dark); }

/* Dropdown de serviços */
.sw-dd { position: relative; }

.sw-dd__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: #DDE2E7;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.sw-dd__toggle:hover { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; }
.sw-dd__caret { font-size: 9px; color: var(--on-dark-3); }

.sw-dd__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 268px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sw-dd__toggle[aria-expanded="true"] + .sw-dd__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sw-dd__item {
  display: block;
  padding: 11px 16px;
  font-size: 14.5px;
  color: var(--text);
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease;
}
.sw-dd__item:hover { background: #F1EEE9; color: var(--accent); }

/* Hambúrguer — só abaixo de 980px */
.sw-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
}
.sw-burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: #F4F1EC;
  border-radius: 2px;
}

/* Drawer mobile */
.sw-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.sw-drawer[data-open="true"] { display: block; }

.sw-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 15, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.sw-drawer__panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(380px, calc(100% - 24px));
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-block);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sw-drawer__close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--on-dark-soft);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
}
.sw-drawer__close:hover { background: rgba(255, 255, 255, 0.1); }

.sw-drawer__link {
  padding: 13px 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--on-dark);
  border-radius: 14px;
}
.sw-drawer__link:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF; }

.sw-drawer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7C8691;
  margin: 18px 0 8px 14px;
}

.sw-drawer__sub {
  display: grid;
  gap: 2px;
}
.sw-drawer__sub a {
  padding: 11px 14px;
  font-size: 15px;
  color: #D5DAE0;
  border-radius: 12px;
}
.sw-drawer__sub a:hover { background: rgba(255, 255, 255, 0.07); color: var(--accent-on-dark); }

.sw-drawer__cta {
  margin-top: 22px;
  padding: 15px 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  background: var(--on-dark-soft);
  border-radius: 999px;
}
.sw-drawer__cta:hover { background: #FFFFFF; color: var(--dark); }

body.sw-no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sw-hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
}

.sw-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sw-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 20, 24, 0.44) 0%,
    rgba(16, 20, 24, 0.40) 38%,
    rgba(16, 20, 24, 0.82) 80%,
    #101418 100%);
}

.sw-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 196px var(--gutter) 56px;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sw-hero__content {
  text-align: center;
  animation: sw-rise-in .8s ease-out both;
}

.sw-hero__badge {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CFD6DC;
  margin-bottom: 30px;
}

.sw-hero__title {
  font-size: clamp(33px, 4.9vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--on-dark);
  max-width: 1000px;
  margin: 0 auto 26px;
  text-wrap: balance;
}

.sw-hero__sub {
  font-size: clamp(16.5px, 1.6vw, 20px);
  line-height: 1.6;
  color: #B7BFC7;
  max-width: 720px;
  margin: 0 auto;
  text-wrap: pretty;
}
.sw-hero__sub strong { color: #FFFFFF; font-weight: 600; }

.sw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 38px;
}

/* Faixa de números */
.sw-stats {
  margin-top: 92px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.sw-stats__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--on-dark);
}

.sw-stats__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Serviços
   -------------------------------------------------------------------------- */

.sw-servicos { background: var(--bg); }

.sw-grid-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
}

.sw-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.sw-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.sw-card__kw {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.sw-card__title {
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.026em;
  margin-bottom: 14px;
}

.sw-card__text {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
  margin-bottom: 28px;
}

.sw-card__cta { margin-top: auto; }

/* --------------------------------------------------------------------------
   Trabalhos realizados
   -------------------------------------------------------------------------- */

.sw-trabalhos {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

/* O cabeçalho fica no container; a faixa de trabalhos ocupa 100% da tela. */
.sw-wrap--head { padding-bottom: 0; }

.sw-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sw-mq-toggle {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.sw-mq-toggle:hover { background: var(--surface); }

/* Marquee full-bleed --------------------------------------------------- */

.sw-marquee {
  --mq-scale: 1;
  --mq-gap: 24px;
  width: 100%;
  margin-top: 56px;
  padding-bottom: var(--section-y);
}

.sw-marquee__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.sw-marquee__viewport::-webkit-scrollbar { display: none; }

.sw-marquee__track {
  display: flex;
  align-items: flex-start;
  gap: var(--mq-gap);
  width: max-content;
}

.sw-work--mq {
  flex: 0 0 calc(var(--w) * var(--mq-scale));
  /* Deslocamento vertical por card — é o que quebra o alinhamento da faixa */
  margin-top: calc(var(--top) * var(--mq-scale));
}

.sw-work--mq .sw-work__frame {
  aspect-ratio: auto;
  height: calc(var(--h) * var(--mq-scale));
}

.sw-work { display: flex; flex-direction: column; gap: 18px; }

.sw-work__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: #EDE9E3;
  border: 1px solid #E4DFD8;
}
.sw-work__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sw-work__title {
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -0.024em;
  margin-bottom: 8px;
}
.sw-work__title a { color: var(--text); }
.sw-work__title a:hover { color: var(--accent); }

.sw-work__tags {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Placeholder de imagem — substituir por print real antes de publicar */
.sw-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6A655D;
  background:
    repeating-linear-gradient(135deg,
      rgba(17, 20, 23, 0.035) 0 10px,
      transparent 10px 20px),
    #EDE9E3;
}
.sw-slot--dark {
  color: #8A939C;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.035) 0 10px,
      transparent 10px 20px),
    #1D242B;
}

/* --------------------------------------------------------------------------
   Segmentos (slider)
   -------------------------------------------------------------------------- */

.sw-nichos {
  background: var(--dark);
  color: var(--on-dark-soft);
}
.sw-nichos .sw-h2 { color: var(--on-dark); }
.sw-nichos .sw-head-row > div:first-child { max-width: 860px; }

.sw-slider-nav { display: flex; gap: 10px; flex-shrink: 0; }

.sw-arrow {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--on-dark-soft);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.sw-arrow:hover { background: rgba(255, 255, 255, 0.1); }

/* Trilho de ponta a ponta: o cabeçalho e as setas ficam no container, os
   cards ocupam 100% da largura. O recuo inicial alinha o primeiro card com
   o título; o resto sangra até a borda direita. */
.sw-track {
  --rail-inset: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: var(--rail-inset);
  padding-right: var(--gutter);
  scroll-padding: 0 var(--gutter) 0 var(--rail-inset);
  padding-bottom: 6px;
  margin-bottom: var(--section-y);
}
.sw-track::-webkit-scrollbar { display: none; }

.sw-slide {
  flex: 0 0 428px;
  scroll-snap-align: start;
  /* O último card alinha pelo fim: sem isso, quando sobra menos de um card
     de rolagem, o snap obrigatório devolve o trilho ao início e as setas
     parecem não funcionar. */
  display: flex;
  flex-direction: column;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-block);
  overflow: hidden;
}

.sw-slide:last-child { scroll-snap-align: end; }

.sw-slide__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #1D242B;
}
.sw-slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sw-slide__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 20, 24, 0) 42%, rgba(16, 20, 24, 0.88) 100%);
  pointer-events: none;
}
.sw-slide__title {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  pointer-events: none;
  text-wrap: balance;
}

.sw-slide__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
}

.sw-slide__approach {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--accent-on-dark);
  margin-bottom: 18px;
}
.sw-slide__approach strong { font-weight: 500; }

.sw-slide__text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--on-dark-2);
  text-wrap: pretty;
  margin-bottom: 22px;
}

.sw-slide__list {
  display: grid;
  gap: 11px;
  margin-bottom: 28px;
}
.sw-slide__list li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  color: #D5DAE0;
}
.sw-slide__list span { color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   Avaliações
   -------------------------------------------------------------------------- */

.sw-avaliacoes { background: var(--bg); }
.sw-avaliacoes .sw-head-center { margin-bottom: 56px; }

.sw-reviews {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(238px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.sw-rating {
  padding: 34px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sw-rating__label {
  font-size: 16px;
  font-weight: 700;
  color: #DCEEF8;
  margin-bottom: 18px;
}
.sw-rating__stars {
  font-size: 19px;
  letter-spacing: 0.08em;
  color: var(--star-on-blue);
  margin-bottom: 6px;
}
.sw-rating__score {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
}
.sw-rating__count {
  font-size: 14px;
  line-height: 1.55;
  color: #DCEEF8;
}

.sw-review {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.sw-review__stars {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--star);
  margin-bottom: 20px;
}
.sw-review blockquote {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.62;
  color: #2A3037;
  text-wrap: pretty;
}
.sw-review figcaption { margin-top: auto; }
.sw-review__author {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.sw-review__place {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 6px;
}

.sw-reviews-foot { margin-top: 34px; text-align: center; }
.sw-reviews-foot a { font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.sw-blog {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.sw-grid-blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 20px;
}

.sw-post {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: box-shadow .25s ease;
}
.sw-post:hover { box-shadow: var(--shadow-hover); }

.sw-post__title {
  font-size: 18.5px;
  line-height: 1.3;
  letter-spacing: -0.024em;
  margin-bottom: 14px;
}
.sw-post__title a { color: var(--text); }
.sw-post__title a:hover { color: var(--accent); }

.sw-post__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
  margin-bottom: 24px;
}

.sw-post__more {
  margin-top: auto;
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */

.sw-cta {
  position: relative;
  background: var(--dark);
  overflow: hidden;
}
.sw-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sw-cta__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 20, 24, 0.5), rgba(16, 20, 24, 0.72));
  pointer-events: none;
}
.sw-cta__inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 152px var(--gutter);
  text-align: center;
}
.sw-cta__title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--on-dark);
  margin-bottom: 22px;
  text-wrap: balance;
}
.sw-cta__sub {
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.6;
  color: #B7BFC7;
  max-width: 680px;
  margin: 0 auto 42px;
  text-wrap: pretty;
}
.sw-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sw-cta .sw-btn--light,
.sw-cta .sw-btn--ghost { padding: 17px 34px; font-size: 16.5px; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.sw-footer { background: var(--dark); }

.sw-footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--gutter) 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.sw-footer__logo {
  height: 26px;
  width: auto;
  display: block;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.sw-footer__brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--on-dark-soft);
  margin-bottom: 14px;
}

.sw-footer__about {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--on-dark-3);
  max-width: 420px;
  text-wrap: pretty;
}

.sw-footer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7C8691;
  margin-bottom: 20px;
}

.sw-footer__list { display: grid; gap: 12px; }
.sw-footer__list li { font-size: 14.5px; color: #D5DAE0; }
.sw-footer__list a { font-size: 14.5px; color: #D5DAE0; }
.sw-footer__list a:hover { color: var(--accent-on-dark); }

.sw-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px var(--gutter) 46px;
  border-top: 1px solid var(--dark-border);
}
.sw-footer__bottom p { font-size: 13px; color: #7C8691; }

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   -------------------------------------------------------------------------- */

.sw-whats {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 14px 34px -14px rgba(11, 111, 164, 0.7);
  transition: background-color .2s ease;
}
.sw-whats:hover { background: var(--accent-hover); color: var(--bg); }

/* --------------------------------------------------------------------------
   Responsividade
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {
  .sw-reviews { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .sw-marquee { --mq-scale: 0.82; }
}

@media (max-width: 980px) {
  :root { --gutter: 20px; --section-y: 68px; }

  .sw-navwrap { left: 12px; right: 12px; width: auto; transform: none; }
  .sw-nav { padding: 8px 8px 8px 18px; gap: 12px; }
  .sw-nav__menu { display: none; }
  .sw-burger { display: flex; }

  .sw-hero__inner { padding: 132px var(--gutter) 40px; min-height: 0; }
  /* A foto do topo é panorâmica (2032x774): num hero alto e estreito o corte
     fica muito fechado. Deslocar o foco mantém a pessoa no enquadramento. */
  .sw-hero__bg { object-position: 62% 50%; }
  /* No corte fechado do celular o suéter claro ocupa o fundo do texto:
     o véu precisa ser mais forte aqui do que no desktop. */
  .sw-hero__veil {
    background: linear-gradient(180deg,
      rgba(16, 20, 24, 0.62) 0%,
      rgba(16, 20, 24, 0.60) 38%,
      rgba(16, 20, 24, 0.88) 80%,
      #101418 100%);
  }
  .sw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 60px; }

  .sw-head-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .sw-head-center { margin-bottom: 44px; }

  .sw-slide { flex: 0 0 86%; }

  .sw-marquee { --mq-scale: 0.62; --mq-gap: 16px; margin-top: 40px; }
  .sw-head-actions { width: 100%; }

  .sw-cta__inner { padding: 92px 22px; }

  .sw-footer__grid {
    padding: 60px var(--gutter) 30px;
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }
  .sw-footer__bottom { padding: 22px var(--gutter) 104px; }

  .sw-whats { right: 16px; bottom: 16px; padding: 14px 20px; }
}

@media (max-width: 560px) {
  .sw-hero__actions .sw-btn,
  .sw-cta__actions .sw-btn { flex: 1 1 100%; }
  .sw-card, .sw-post { padding: 26px; }
  .sw-slide__body { padding: 24px; }
  .sw-marquee { --mq-scale: 0.55; --mq-gap: 14px; }
}

/* --------------------------------------------------------------------------
   Nav sobre topo claro
   Em páginas cujo conteúdo começa em fundo claro (trabalhos, projeto), a
   pílula sem fundo precisa de itens escuros — os claros sumiriam. Vale só
   enquanto a pílula está transparente; a partir da rolagem o fundo escuro
   volta e os itens claros também.
   -------------------------------------------------------------------------- */

.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-nav__logo {
  filter: brightness(0);
}

.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-nav__link,
.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-dd__toggle {
  color: var(--text);
}
.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-nav__link:hover,
.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-dd__toggle:hover {
  background: rgba(17, 20, 23, 0.07);
  color: var(--text);
}
.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-dd__caret { color: var(--text-3); }

.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-nav__cta {
  background: var(--text);
  color: var(--bg);
}
.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-nav__cta:hover {
  background: #000000;
  color: var(--bg);
}

.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-burger {
  border-color: rgba(17, 20, 23, 0.22);
}
.sw-js .sw-navwrap--claro:not(.is-scrolled) .sw-burger span {
  background: var(--text);
}

/* --------------------------------------------------------------------------
   Segmentos — bento grid
   Blocos de tamanhos diferentes sobre o fundo escuro; alguns com imagem,
   outros só com texto. É o contraste entre eles que dá o ritmo da grade.
   -------------------------------------------------------------------------- */

.nicho-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.nicho-card {
  display: flex;
  flex-direction: column;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-block);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.nicho-card:hover {
  border-color: #33404C;
  transform: translateY(-3px);
}

.nicho-card--lg   { grid-column: span 7; }
.nicho-card--sm   { grid-column: span 5; }
.nicho-card--wide { grid-column: span 12; flex-direction: row; }

/* Imagem */
.nicho-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  background: #1D242B;
  border-bottom: 1px solid var(--dark-border);
}
.nicho-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No bloco largo a imagem fica ao lado, ocupando a altura toda */
.nicho-card--wide .nicho-card__media {
  width: 42%;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--dark-border);
}

.nicho-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px;
}

.nicho-card__titulo {
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin-bottom: 20px;
  text-wrap: balance;
}

.nicho-card__rotulo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 12px;
}
.nicho-card__rotulo strong { font-weight: 500; }

/* Os componentes da abordagem viram pílulas — mesmas palavras, sem o "+" */
.nicho-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.nicho-card__pills li {
  padding: 6px 13px;
  font-size: 13px;
  line-height: 1.4;
  color: #D5DAE0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dark-border);
  border-radius: 999px;
}

.nicho-card__texto {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--on-dark-2);
  text-wrap: pretty;
  margin-bottom: 22px;
}

.nicho-card__lista {
  display: grid;
  gap: 11px;
  margin-bottom: 28px;
}
.nicho-card__lista li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  color: #D5DAE0;
}
.nicho-card__lista span { color: var(--accent-on-dark); }

/* Empurra o CTA para a base: como os blocos da mesma linha esticam para a
   mesma altura, sem isso o botão do bloco mais curto ficava boiando no meio. */
.nicho-card .sw-btn { margin-top: auto; }

@media (max-width: 980px) {
  .nicho-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nicho-card--lg,
  .nicho-card--sm,
  .nicho-card--wide { grid-column: auto; }
  .nicho-card--wide { flex-direction: column; }
  .nicho-card--wide .nicho-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--dark-border);
  }
  .nicho-card__body { padding: 26px; }
  .nicho-card__titulo { font-size: 23px; }
}