:root {
  --color-primary: #fd7803;
  --color-primary-dark: #e27100;
  --color-bg: #f5f5f6;
  --color-text: #000000;
  --color-text-muted: #5b616e;
  --color-text-label: #434347;
  --color-white: #ffffff;
  --color-dark: #171717;
  --max-width: 1280px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* calha sempre reservada: sem isto, o overflow:hidden da trava some com a
     barra, a página alarga ~15px e o conteúdo salta de lado ao abrir o modal */
  scrollbar-gutter: stable;
}

/* Modal aberto: trava a rolagem SEM tirar o documento do fluxo. O body em
   position:fixed (técnica usada pelo menu) resolveria a trava, mas quebra
   todo elemento sticky da página — o painel da seção de soluções se soltaria
   e voltaria ao topo da seção, deixando um vazio branco atrás do véu. */
html.modal-open {
  overflow: hidden;
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* menu mobile aberto: o body fixo (com o top guardado pelo JS) é o que
   segura de fato a rolagem do fundo no iOS. Aqui o painel cobre a tela
   inteira, então o efeito colateral em elementos sticky não aparece —
   por isso o modal usa `html.modal-open`, mais acima, e não esta regra */
body.nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* visível só para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.skip-link:focus {
  top: 16px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  transition: opacity 0.1s ease-in-out;
  border: 1px solid transparent;
}

.btn:hover {
  opacity: 0.8;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-dark);
}


/* Ícones (Remix Icon) */
/* sprite inline no topo do body: um só request (nenhum, na verdade), sem
   flash de ícone faltando e sem JS — o <use> só aponta para um <symbol> que
   já está no documento */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  /* currentColor: o ícone herda a cor de quem o contém, então basta pintar o
     texto para pintar o ícone junto */
  fill: currentColor;
  flex-shrink: 0;
}

/* Label badge */
/* o font-size do container governa texto e ícone juntos: basta alterá-lo
   no mobile para os dois reduzirem em proporção */
.label-badge {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 14px;
}

.label-badge .icon {
  width: 1.35em;
  height: 1.35em;
  color: var(--color-primary);
}

.label-badge span {
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--color-text-label);
}

/* sobre o mesh não há contraste para o laranja do ícone nem para o cinza do
   rótulo: os dois viram branco */
.label-badge--on-dark .icon,
.label-badge--on-dark span {
  color: var(--color-white);
}

/* Navigation */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 0;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* fundo branco só depois que a página sai do topo */
.nav.is-scrolled {
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  /* a logo é absoluta e não empurra a barra: o min-height reserva a altura
     dela para não vazar por cima do conteúdo */
  min-height: 72px;
  transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* logo fora do fluxo: fica no centro exato da barra, independente do
   comprimento dos grupos de links de cada lado */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* logo em lockup vertical (marca sobre o wordmark): a altura é a medida
   que importa na barra, a largura acompanha a proporção 642:432 */
/* lockup em duas peças: o símbolo fica sempre, o wordmark recolhe ao rolar */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo img {
  width: auto;
  object-fit: contain;
}

.logo__mark {
  height: 46px;
}

.logo__wordmark {
  height: 18px;
  transform-origin: center top;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav.is-scrolled .logo {
  gap: 0;
}

.nav.is-scrolled .logo__wordmark {
  height: 0;
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
}

.nav.is-scrolled .nav-inner {
  min-height: 46px;
}

.menu-toggle {
  display: none;
  width: 24px;
  height: 24px;
  color: #9b9b9b;
}

/* cabeçalho do painel e véu só existem no menu mobile */
.nav-drawer-head,
.nav-scrim {
  display: none;
}

.nav-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links--start {
  justify-content: flex-start;
}

.nav-links--end {
  justify-content: flex-end;
}

.nav-links .btn {
  opacity: 1;
}

.nav-links a {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.nav-links a:hover {
  opacity: 1;
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
}

.hero-content {
  display: flex;
  justify-content: center;
  padding: 96px 0 64px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  margin: 0 32px;
  width: 100%;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.05em;
  /* distribui as linhas em vez de deixar sobrar uma órfã curta no fim */
  text-wrap: balance;
}

.hero p {
  font-size: 18px;
  /* subtítulo centralizado e curto: balance reparte as linhas em larguras
     próximas, em vez de encher as de cima e sobrar uma palavra na última */
  text-wrap: balance;
  color: var(--color-text-muted);
}

.cta-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.about-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Showcase carousel (Embla) */
.showcase {
  --showcase-gap: 40px;
  --showcase-slide: 20%;

  background: var(--color-bg);
  overflow: hidden;
}

/* Trilho mais largo que a viewport: os slides sangram pelas duas bordas */
.showcase__stage {
  position: relative;
  width: 150%;
  margin-left: -25%;
}

/* Tooltip que segue o cursor, no lugar de pausar o carrossel no hover */
.showcase__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.85);
  transition: opacity 0.2s ease, scale 0.2s ease;
  will-change: transform;
}

.showcase__tooltip.is-visible {
  opacity: 1;
  scale: 1;
}

.showcase .embla {
  /* extra embaixo para o arco dos slides das pontas e a etiqueta do serviço */
  padding: 2% 0 calc(2% + 60px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.showcase .embla::-webkit-scrollbar {
  display: none;
}

.showcase .embla.is-ready {
  overflow: hidden;
  scroll-snap-type: none;
  cursor: grab;
}

.showcase .embla.is-ready:active {
  cursor: grabbing;
}

.showcase .embla__container {
  display: flex;
  list-style: none;
  touch-action: pan-y pinch-zoom;
  will-change: transform;
}

.showcase .embla__slide {
  position: relative;
  flex: 0 0 var(--showcase-slide);
  min-width: 0;
  margin-right: var(--showcase-gap);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
}

/* Etiqueta do serviço, revelada abaixo da imagem sob o cursor.
   --arc é escrito pelo JS para acompanhar a curvatura do slide. */
.showcase__tag {
  position: absolute;
  top: calc(100% + 16px + var(--arc, 0px));
  left: 50%;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.showcase .embla__slide.is-active .showcase__tag {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Wrapper interno: recebe a curvatura 3D sem conflitar com o transform
   que o Embla escreve no <li> para montar o loop. */
.showcase .embla__slide__inner {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #e8e8ea;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

.showcase .embla__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 1023px) {
  .showcase {
    --showcase-gap: 16px;
    --showcase-slide: 45%;
  }
}

/* About */
.about {
  background: var(--color-bg);
  padding: 80px 0;
}

.about-main {
  display: flex;
  justify-content: space-between;
  gap: 64px;
}

/* cartão-imagem: a foto ocupa o fundo e o conteúdo fica por cima */
.about-card {
  position: relative;
  /* largura travada: sem isso a coluna de texto encolhe o cartão */
  flex: 0 0 480px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
}

.about-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* recorte à esquerda do mesh: é onde fica o laranja da marca, o centro da
     imagem é vermelho escuro */
  object-position: 28% center;
}

/* escurece a foto o suficiente para o texto branco ter contraste em cima */
.about-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 32px;
  min-height: 360px;
  padding: 24px;
  background: rgba(28, 10, 0, 0.1);
}

.about-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-card__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.about-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-card__stars {
  font-size: 40px;
  line-height: 0.7;
  letter-spacing: 2px;
  color: var(--color-white);
}

.about-card__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.about-card__note {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
}

.about-card__bottom .cta-row {
  margin-top: 12px;
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  max-width: 736px;
  width: 100%;
  padding: 16px 0 32px;
}

.about-intro p {
  font-size: 18px;
  color: var(--color-text-muted);
}

.about-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* número à esquerda alinhado pela base do título ao lado */
.about-stat {
  display: grid;
  grid-template-columns: 26% 1fr;
  align-items: end;
  gap: 24px;
}

.about-stat + .about-stat {
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.about-stat__number {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-primary);
  /* algarismos de mesma largura: sem isso o número treme durante a contagem */
  font-variant-numeric: tabular-nums;
}

/* contador: cada algarismo numa janelinha que corta o dígito entrando/saindo */
.cu {
  display: inline-flex;
}

.cu-slot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.1em;
}

.cu-digit {
  display: block;
  line-height: 1.1em;
}

.cu-digit--incoming {
  position: absolute;
  inset: 0;
}

.about-stat__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-stat__label {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.about-stat__desc {
  font-size: 16px;
  /* as duas frases sobram poucos caracteres da primeira linha e deixavam uma
     palavra sozinha embaixo: balance reparte as linhas em larguras parecidas */
  text-wrap: balance;
  color: var(--color-text-muted);
}

/* Soluções (baralho de cards com entrada por scroll) */
/* a seção é o trilho: o dobro da altura da janela dá uma tela inteira de
   rolagem para os cards entrarem com o conteúdo preso no lugar */
/* transição do cinza da seção sobre para o branco da seção de parceiros */
.deck {
  position: relative;
  min-height: 200vh;
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    var(--color-white) 85%,
    var(--color-white) 100%
  );
}

.deck__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.deck__layout {
  display: grid;
  /* largura fixa no baralho: a sobreposição entre os cards precisa ser a
     mesma em qualquer tela, senão o texto de um some atrás do outro */
  grid-template-columns: 1fr 640px;
  align-items: center;
  gap: 32px;
}

.deck__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 520px;
}

.deck__intro h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.deck__intro p {
  font-size: 18px;
  /* pretty (e não balance): num parágrafo de quatro linhas, balance estreitaria
     o bloco inteiro para igualá-las. Aqui basta puxar palavra para a última
     linha e tirar a órfã, preservando a largura do parágrafo */
  text-wrap: pretty;
  color: var(--color-text-muted);
}

/* área de empilhamento: os cards são absolutos dentro dela */
.deck__cards {
  position: relative;
  width: 640px;
  max-width: 100%;
  /* item de grid não encolhe abaixo do próprio conteúdo sem isto, e os 640px
     acabariam esticando a página inteira no celular */
  min-width: 0;
  height: 384px;
}

.deck-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 248px;
  height: 280px;
  padding: 24px;
  border-radius: 24px;
  /* a moldura branca é o que separa um card do outro onde eles se sobrepõem */
  border: 8px solid var(--color-white);
  background: var(--color-bg);
  /* o card inteiro abre o modal, não só o botão */
  cursor: pointer;
  /* o pulo do hover usa a propriedade `translate`, não `transform`: o JS do
     scroll é dono do `transform` e o reescreve a cada quadro — uma transição
     ali arrastaria a entrada do leque inteira */
  transition: translate 0.28s cubic-bezier(0.22, 0.68, 0.3, 1),
    box-shadow 0.28s ease;
}

.deck-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* o rodapé mantém texto e botão colados na base do card, com o título no topo.
   Grid (e não flex) porque a faixa do botão precisa animar de 0fr a 1fr: é
   assim que ele sai do fluxo quando escondido — o texto encosta na base — e
   empurra o texto para cima ao aparecer */
.deck-card__foot {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 12px;
  justify-items: start;
}

.deck-card h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.deck-card p {
  font-size: 16px;
  color: var(--color-text-muted);
}

.deck-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.deck-card__arrow {
  transition: translate 0.2s ease;
}

.deck-card__more:hover .deck-card__arrow {
  translate: 3px 0;
}

/* leque final: também é o estado sem JS e com movimento reduzido */
.deck-card--first {
  top: 15%;
  left: 0;
  transform: rotate(-5deg);
}

.deck-card--middle {
  top: 0;
  left: 50%;
  margin-left: -124px;
}

.deck-card--last {
  right: 0;
  bottom: 0;
  transform: rotate(10deg);
}

/* o card de cima cobre a direita dos dois de baixo: o texto deles fica preso
   à faixa que continua visível (o título não precisa, porque a inclinação do
   card vizinho abre espaço justo na altura dele). O último card não é coberto
   por ninguém, mas segue a mesma medida: a coluna de texto estreita é o
   padrão do baralho, e abrir só ele quebraria o conjunto */
.deck-card p {
  max-width: 68%;
}

/* Só onde existe cursor: no toque não há hover, e um botão que só aparece
   nele ficaria inalcançável — ali ele fica visível o tempo todo (regra base). */
@media (hover: hover) and (pointer: fine) {
  /* faixa do botão fechada: o texto do card fica encostado na base. O gap
     também zera — um gap fixo sobreviveria à faixa 0fr e deixaria um vão */
  .deck-card__foot {
    grid-template-rows: auto 0fr;
    row-gap: 0;
    transition: grid-template-rows 0.26s cubic-bezier(0.22, 0.68, 0.3, 1),
      row-gap 0.26s cubic-bezier(0.22, 0.68, 0.3, 1);
  }

  .deck-card__more {
    /* sem estes dois a faixa 0fr não fecha: item de grid tem altura mínima
       automática e o conteúdo do botão a seguraria aberta */
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .deck-card:hover .deck-card__foot,
  .deck-card:focus-within .deck-card__foot {
    grid-template-rows: auto 1fr;
    row-gap: 12px;
  }

  /* a carta escolhida sai do baralho: sobe, ganha sombra e vem para a frente */
  .deck-card:hover,
  .deck-card:focus-within {
    translate: 0 -22px;
    box-shadow: 0 18px 40px rgba(23, 23, 23, 0.16);
    z-index: 3;
  }

  .deck-card:hover .deck-card__more,
  .deck-card:focus-within .deck-card__more {
    opacity: 1;
  }
}

/* Modal de detalhe das soluções */
/* <dialog> + showModal(): a centralização, o foco preso e o Esc vêm do
   próprio elemento, sem recriar nada disso em JS */
.modal {
  /* o reset `* { margin: 0 }` no topo do arquivo zera o `margin: auto` que o
     próprio <dialog> usa para se centralizar: sem isto ele cola no canto */
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  padding: 0;
  border: none;
  border-radius: 24px;
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(23, 23, 23, 0.24);
  overflow: hidden;
}

/* véu leve: a página continua legível atrás, só recua. O desfoque é o que
   segura a separação — sem ele, um véu claro o bastante para ver o site
   deixaria o texto do painel disputando atenção com o fundo */
.modal::backdrop {
  background: rgba(23, 23, 23, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal[open] {
  animation: modal-in 0.22s ease-out;
}

.modal[open]::backdrop {
  animation: modal-fade 0.22s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

/* o painel é quem rola: o dialog fica do tamanho da tela para que o clique
   fora dele caia no próprio <dialog> e o JS possa fechar */
.modal__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.modal__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 64px 16px 32px;
}

.modal__head h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text-label);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal__close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px 8px;
  overflow-y: auto;
  /* item de coluna flex tem altura mínima automática igual ao conteúdo: sem
     isto ele nunca encolhe, o overflow-y não chega a valer e o fim da lista
     fica cortado e inalcançável em telas baixas */
  min-height: 0;
}

.modal__body p {
  font-size: 16px;
  color: var(--color-text-muted);
}

.modal__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.modal__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* o ícone mora num quadrado próprio: alinhado à primeira linha do texto,
   ele segura a coluna mesmo quando o item quebra em duas ou três linhas */
.modal__list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-primary);
}

.modal__list-icon .icon {
  width: 18px;
  height: 18px;
}

/* o bloco de texto começa na mesma linha do topo do quadrado do ícone */
.modal__list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal__list-text strong {
  font-size: 15px;
  line-height: 1.4;
}

.modal__list-text > span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.modal__list strong {
  font-weight: 600;
  color: var(--color-text);
}

.modal__note {
  font-size: 13px;
  color: var(--color-text-label);
}

/* crédito de parceria, no pé do conteúdo: o filete separa da leitura sem
   competir com o CTA logo abaixo */
.modal__partner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 23, 23, 0.08);
}

.modal__partner span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

/* altura fixa e largura automática: o SVG da marca é 3,4:1 */
.modal__partner img {
  width: auto;
  height: 26px;
}

.modal__foot {
  display: flex;
  padding: 20px 32px 28px;
}

.modal__foot .btn {
  width: 100%;
}

/* Partners */
.partners {
  background: var(--color-white);
  padding: 140px 0;
}

/* Duas esteiras em sentidos opostos com um orbe central por cima */
.partners-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.partners-rows {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  /* dissolve os logos nas pontas em vez de cortá-los no seco */
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.partners-row {
  height: 92px;
  overflow: hidden;
}

.partners-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.partners-row--left .partners-track {
  animation: partners-scroll-left 40s linear infinite;
}

.partners-row--right .partners-track {
  animation: partners-scroll-right 40s linear infinite;
}

.partners-group {
  display: flex;
  flex-shrink: 0;
}

.partners-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 200px;
  height: 92px;
  padding: 12px;
}

/* Altura calibrada logo a logo. As proporções vão de 1,1:1 a 4,8:1, então
   altura igual deixaria as compridas pesadas e as quadradas apagadas — aqui
   quanto mais comprida, menor a altura, para todas ocuparem área parecida.
   height (e não max-height) porque alguns SVGs têm tamanho nativo pequeno
   e precisam crescer, não só encolher. */
.partners-item img {
  width: auto;
  height: var(--logo-h, 34px);
  max-width: 100%;
  object-fit: contain;
}

.partners-item img[src*="sompo"]        { --logo-h: 24px; }
.partners-item img[src*="porto-seguro"] { --logo-h: 27px; }
.partners-item img[src*="allianz"]      { --logo-h: 30px; }
.partners-item img[src*="zurich"]       { --logo-h: 30px; }
.partners-item img[src*="yelum"]        { --logo-h: 35px; }
.partners-item img[src*="suhai"]        { --logo-h: 43px; }
.partners-item img[src*="essor"]        { --logo-h: 45px; }
.partners-item img[src*="bradesco"]     { --logo-h: 45px; }
.partners-item img[src*="mapfre"]       { --logo-h: 48px; }
.partners-item img[src*="agrobrasil"]   { --logo-h: 50px; }
/* fora da curva de propósito: a proporção pediria ~56px, mas o bloco verde
   sólido pesa mais que os outros marcos na mesma área */
.partners-item img[src*="hdi"]          { --logo-h: 46px; }
.partners-item img[src*="tokio-marine"] { --logo-h: 66px; }

/* mesma lógica do original: um disco de tom levemente destacado do fundo,
   com o gradiente puxando a cor do fundo nas bordas para dissolver */
.partners-orb {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 320px;
  padding: 0 32px;
  border-radius: 100%;
  /* mesmo cinza dos cards de soluções. Era um disco de vidro translúcido, mas
     o gradiente branco por cima lavava o tom e o resultado lia como branco —
     opaco também esconde de vez os logos que passam por trás */
  background: var(--color-bg);
  /* sombra só para descolar o disco da esteira que corre atrás */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.09),
    0 2px 10px rgba(0, 0, 0, 0.04);
}

.partners-orb h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  /* mesma escala de tracking dos outros títulos: quanto maior o corpo,
     mais fechado (-0.05em aos 48px, -0.03em aos 28/32px) */
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--color-text);
}

.partners-footnote {
  max-width: 620px;
  margin: 88px auto 0;
  font-size: 18px;
  text-align: center;
  text-wrap: balance;
  color: var(--color-text-muted);
}

@keyframes partners-scroll-left {
  to { transform: translateX(-50%); }
}

@keyframes partners-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }

  /* sem a descida: o wordmark já nasce no lugar */
  .footer__wordmark img {
    translate: 0 0;
    transition: none;
  }

  .nav-bottom,
  .nav-scrim {
    transition: none;
  }

  /* sem o pulo: o card ainda vem para a frente e mostra o botão, só não anima */
  .deck-card,
  .deck-card__more {
    transition: none;
  }

  .deck-card:hover,
  .deck-card:focus-within {
    translate: none;
  }

  .modal[open],
  .modal[open]::backdrop {
    animation: none;
  }
}

/* Contact */
.contact {
  background: var(--color-bg);
  padding: 80px 0;
}

/* cabeçalho centralizado, ao contrário das outras seções */
.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.contact-intro h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.contact-intro p {
  font-size: 18px;
  text-wrap: pretty;
  color: var(--color-text-muted);
}

/* painel único com os canais em cima e o mapa embaixo: o overflow recorta o
   iframe do mapa nos cantos de baixo, que ele não arredonda sozinho */
.contact-panel {
  background: var(--color-white);
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 24px;
  overflow: hidden;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px;
}

/* filete só entre os cards, nunca na borda do painel */
.contact-card + .contact-card {
  border-left: 1px solid rgba(23, 23, 23, 0.1);
}

.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 12px;
  color: var(--color-primary);
}

.contact-card__icon .icon {
  width: 20px;
  height: 20px;
}

.contact-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.contact-card p {
  font-size: 15px;
  text-wrap: pretty;
  color: var(--color-text-muted);
}

/* o link é o dado em si (endereço, telefone), por isso sublinhado */
.contact-card a {
  margin-top: auto;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.contact-card a:hover {
  color: var(--color-primary);
}

.contact-map {
  border-top: 1px solid rgba(23, 23, 23, 0.1);
  /* line-height zera o espaço fantasma que o iframe inline deixaria embaixo */
  line-height: 0;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* WhatsApp */
.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 82px;
  height: 82px;
  background: #25d366;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.whatsapp-btn .icon {
  width: 41.67%;
  height: auto;
  color: var(--color-white);
}

.whatsapp-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
  filter: brightness(1.05);
}

/* Footer */
.footer {
  background: var(--color-white);
}

/* palco do mesh: o overflow é o que corta o wordmark gigante na base */
.footer__stage {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* este mesh é laranja parelho de ponta a ponta, então não precisa do
     recorte deslocado que o cartão do "sobre" usa */
  object-position: center;
}

/* véu escuro: o mesh é claro demais para texto branco sem ajuda */
.footer__content {
  position: relative;
  padding-top: 80px;
  padding-bottom: 48px;
}

.footer__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 10, 0, 0.34);
}

.footer__top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 48px;
}

.footer__top h2 {
  max-width: 620px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.footer__top .btn {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 999px;
}

.footer__links {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__links a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.footer__links a:hover {
  opacity: 1;
}

/* wordmark gigante, cortado pela base do palco */
.footer__wordmark {
  position: relative;
  padding: 0 32px;
  line-height: 0;
  /* recorta a base das letras (o que o palco já fazia) e, de quebra, esconde
     o wordmark acima do próprio quadro enquanto ele desce na entrada */
  overflow: hidden;
}

.footer__wordmark img {
  width: 100%;
  height: auto;
  /* o SVG é preto: brightness(0) achata tudo em preto e invert(1) vira branco */
  filter: brightness(0) invert(1);
  /* margem negativa em % da largura: encurta a caixa e joga a base das letras
     para fora dela, que as recorta com o overflow. Em % para o corte manter a
     mesma proporção em qualquer tela */
  margin-bottom: -6.5%;
  /* parte escondido abaixo do quadro e sobe quando o rodapé entra na tela.
     `translate` e não `transform`: não conflita com nada e anima sozinho */
  translate: 0 100%;
  transition: translate 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__wordmark.is-revealed img {
  translate: 0 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.footer-copy {
  font-size: 12px;
  opacity: 0.5;
  text-align: center;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-links a {
  opacity: 0.5;
  transition: opacity 0.15s;
}

.social-links a:hover {
  opacity: 1;
}

.social-links svg {
  width: 20px;
  height: 20px;
}

/* Responsive */
@media (max-width: 1080px) {
  .hero-text {
    max-width: 768px;
  }
}

@media (max-width: 1023px) {
  /* em duas colunas o leque não caberia: texto em cima, baralho embaixo */
  .deck__layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 48px;
  }

  .deck__intro {
    max-width: 640px;
  }

  .deck__cards {
    justify-self: center;
  }

  .deck__intro h2 {
    font-size: 36px;
  }

  /* lado a lado o cartão e o texto ficariam estreitos demais: empilha */
  .about-main {
    flex-direction: column;
  }

  .about-card {
    flex: 0 0 auto;
  }

  .about-content {
    max-width: none;
    gap: 48px;
    padding: 8px 0 0;
  }
}

@media (max-width: 844px) {
  .nav {
    padding: 12px 0;
  }

  .nav-inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  .logo__mark {
    height: 40px;
  }

  .logo__wordmark {
    height: 15px;
  }

  .nav-inner {
    min-height: 63px;
  }

  .nav.is-scrolled .nav-inner {
    min-height: 40px;
  }

  /* alvo de toque de 44px sem mexer no tamanho aparente do ícone */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44px;
    margin: -10px 0;
    order: 1;
    flex: 1;
    color: var(--color-dark);
    -webkit-tap-highlight-color: transparent;
  }

  /* volta ao fluxo: o botão à esquerda e o espaçador à direita têm o mesmo
     flex, então a logo continua centralizada mesmo com o menu aberto */
  .logo {
    position: static;
    transform: none;
    order: 2;
  }

  .nav-inner::after {
    content: '';
    order: 3;
    flex: 1;
  }

  /* painel lateral: sai do fluxo do header e desliza pela esquerda, do mesmo
     lado do botão que o abre */
  .nav-bottom {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: min(84vw, 340px);
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 14px 24px calc(24px + env(safe-area-inset-bottom));
    background: var(--color-white);
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    /* visibility sem transição na abertura (aparece já focável) e adiada no
       fechamento, para o painel não sumir antes de terminar de deslizar */
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0.3s;
  }

  .nav-bottom.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(10, 10, 10, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }

  /* o botão flutuante ficaria por cima do véu (z-index maior) */
  body.nav-open .whatsapp-btn {
    opacity: 0;
    pointer-events: none;
  }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    margin-bottom: 12px;
  }

  .nav-drawer-head__logo {
    height: 24px;
    width: auto;
  }

  .nav-drawer-head__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: var(--color-text-muted);
    -webkit-tap-highlight-color: transparent;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  /* estica para o CTA poder descer até o rodapé do painel; o gap garante o
     respiro mínimo quando a tela é curta e não sobra espaço livre */
  .nav-links--end {
    flex: 1;
    gap: 32px;
  }

  /* linhas altas o bastante para o toque, com divisória entre elas */
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 54px;
    font-size: 17px;
    opacity: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-tap-highlight-color: transparent;
  }

  .nav-links a:active {
    opacity: 0.55;
  }

  /* último item da lista: sem divisória sobrando no vazio antes do CTA */
  .nav-links--end a:not(.btn) {
    border-bottom: 0;
  }

  .nav-links .btn {
    margin-top: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 0;
    font-size: 16px;
  }

  .hero-content {
    padding: 64px 0 40px;
  }

  .hero h1 {
    font-size: 40px;
  }

  /* quatro colunas ficariam estreitas demais: vira 2x2, e o filete de cima
     passa a separar as linhas */
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-card:nth-child(n + 3) {
    border-top: 1px solid rgba(23, 23, 23, 0.1);
  }

  .contact-card:nth-child(odd) {
    border-left: 0;
  }

  .contact-intro h2 {
    font-size: 36px;
  }

  /* o CTA ao lado do título não cabe: empilha e alinha à esquerda */
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .footer__top h2 {
    font-size: 34px;
  }

  /* cinco links espalhados viram grade de duas colunas */
  .footer__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
  }

  .partners-orb {
    width: 260px;
    height: 260px;
  }

  .partners-orb h2 {
    font-size: 26px;
    line-height: 1.2;
  }
}

@media (max-width: 640px) {
  /* reduz texto e ícone juntos para o badge caber em uma linha só */
  .label-badge {
    font-size: 11px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero p,
  .about-intro p,
  .contact-intro p {
    font-size: 14px;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* empilhado e em tela estreita, 64px entre o cartão e o texto abre um vão */
  .about-main {
    gap: 40px;
  }

  .about-card__body {
    min-height: 300px;
    padding: 20px;
  }

  .about-card__brand {
    font-size: 40px;
  }

  .about-card__stars {
    font-size: 32px;
  }

  .about-card__title {
    font-size: 22px;
  }

  .about-card__note {
    font-size: 14px;
  }

  .about-card__heading {
    font-size: 28px;
  }

  /* número em cima do rótulo: em duas colunas sobra pouco para cada uma */
  .about-stat {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 4px;
  }

  .about-stat__number {
    font-size: 40px;
  }

  .about-stat__label {
    font-size: 20px;
  }

  .about-stat__desc {
    font-size: 14px;
  }

  /* no celular o leque não cabe: vira lista, e sem trilho não há o que animar */
  .deck {
    min-height: 0;
  }

  .deck__sticky {
    position: static;
    min-height: 0;
    padding: 80px 0;
  }

  .deck__layout {
    gap: 32px;
  }

  .deck__intro h2 {
    font-size: 30px;
  }

  .deck__intro p {
    font-size: 14px;
  }

  .deck__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .deck-card {
    position: static;
    width: 100%;
    height: auto;
    gap: 16px;
    margin: 0;
    transform: none;
  }

  /* em lista vertical não há baralho de onde puxar a carta: o pulo só
     empurraria o card por cima do vizinho */
  .deck-card:hover,
  .deck-card:focus-within {
    translate: none;
    box-shadow: none;
  }

  /* empilhados, os cards não se cobrem: o texto usa a largura toda */
  .deck-card p {
    max-width: none;
    font-size: 14px;
  }

  /* numa janela estreita com mouse o botão continuaria colapsado até o hover:
     aqui a faixa fica aberta de vez, como no toque */
  .deck-card__foot {
    grid-template-rows: auto auto;
    row-gap: 12px;
  }

  .deck-card__more {
    opacity: 1;
  }

  .modal {
    width: calc(100vw - 24px);
    max-height: 88vh;
    border-radius: 20px;
  }

  .modal__head {
    padding: 24px 56px 12px 20px;
  }

  .modal__head h3 {
    font-size: 22px;
  }

  .modal__close {
    top: 18px;
    right: 16px;
  }

  .modal__body {
    padding: 0 20px 8px;
  }

  .modal__body p {
    font-size: 14px;
  }

  .modal__list li {
    font-size: 14px;
  }

  .modal__foot {
    padding: 16px 20px 20px;
  }

  .partners {
    padding: 80px 0;
  }

  /* logos menores e mais densos: com wordmarks, o corte nas bordas do
     orbe fica menos agressivo do que com poucos logos grandes */
  .partners-item {
    width: 116px;
    height: 72px;
    padding: 16px 8px;
  }

  /* escala todas as alturas calibradas de uma vez */
  .partners-item img {
    height: calc(var(--logo-h, 34px) * 0.66);
  }

  .partners-row {
    height: 72px;
  }

  .partners-rows {
    gap: 28px;
  }

  /* no celular o orbe tapa metade dos logos: o título sai de cima das
     esteiras e vira um bloco normal acima delas */
  .partners-stage {
    flex-direction: column;
    gap: 32px;
  }

  .partners-orb {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .partners-orb h2 {
    font-size: 26px;
    line-height: 1.2;
  }

  .partners-footnote {
    /* mesmo respiro que separa o título das esteiras */
    margin-top: 32px;
    font-size: 15px;
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  /* empilhados: o filete que separa é sempre o de cima, nunca o da esquerda */
  .contact-card {
    padding: 24px;
    border-left: 0;
  }

  .contact-card + .contact-card {
    border-left: 0;
    border-top: 1px solid rgba(23, 23, 23, 0.1);
  }

  .contact-map iframe {
    height: 320px;
  }

  .contact-intro h2 {
    font-size: 30px;
  }

  .contact-intro p {
    font-size: 16px;
  }

  .footer-inner {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .footer__content {
    padding-top: 56px;
    padding-bottom: 32px;
  }

  .footer__top h2 {
    font-size: 28px;
  }

  .footer__top .btn {
    width: 100%;
  }

  .footer__links {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* o wordmark ocupando a largura toda fica pequeno demais numa tela estreita:
     cresce além da tela e o corte lateral vira parte do efeito */
  .footer__wordmark {
    padding: 0 20px;
  }
}