/* ==========================================================================
   CASS MÍDIA — Reforma de design 2026
   Folha de estilo principal
   Paleta extraída da logomarca oficial:
     Roxo  #52007C  |  Laranja #F85000
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Cores de marca */
  --roxo-900: #2A003D;
  --roxo-800: #3C0059;
  --roxo-700: #52007C;
  --roxo-600: #6B1B99;
  --roxo-500: #8538B3;
  --roxo-100: #F4EBFA;
  --roxo-050: #FAF6FD;

  --laranja-700: #C93F00;
  --laranja-600: #E14700;
  --laranja-500: #F85000;
  --laranja-300: #FF8A4C;
  --laranja-100: #FFF0E7;

  /* Neutros */
  --tinta: #170B22;
  --tinta-2: #241430;
  --grafite: #3D3346;
  --cinza: #6B6175;
  --cinza-claro: #9A92A4;
  --linha: #EDE4F4;
  --linha-escura: rgba(255, 255, 255, .12);
  --fundo: #FFFFFF;
  --fundo-2: #FAF7FC;
  --fundo-3: #F5EFFA;

  --verde-zap: #25D366;
  --verde-ok: #12A150;

  /* Tipografia */
  --fonte-titulo: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --largura: 1200px;
  --raio: 20px;
  --raio-pequeno: 12px;
  --raio-pilula: 999px;
  --espaco-secao: clamp(4.5rem, 8vw, 8rem);

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(23, 11, 34, .04), 0 8px 24px -12px rgba(23, 11, 34, .10);
  --sombra-2: 0 2px 4px rgba(23, 11, 34, .04), 0 24px 48px -24px rgba(82, 0, 124, .22);
  --sombra-3: 0 32px 64px -32px rgba(82, 0, 124, .35);

  --transicao: .28s cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET E BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grafite);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-aberto { overflow: hidden; }

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

[hidden] { display: none !important; }

a { color: var(--roxo-700); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--laranja-600); }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.28rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { text-wrap: pretty; }

ul, ol { padding: 0; list-style: none; }

strong { color: var(--tinta); font-weight: 600; }

::selection { background: var(--laranja-500); color: #fff; }

:focus-visible {
  outline: 3px solid var(--laranja-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}
.container--estreito { max-width: 880px; }

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

.pular-link {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--laranja-500); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno); font-weight: 600;
}
.pular-link:focus { top: 0; color: #fff; }

.icone { flex: none; }

/* --------------------------------------------------------------------------
   3. BOTÕES
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.botao--grande { padding: 1.05rem 2rem; font-size: 1rem; }
.botao--bloco { width: 100%; }

.botao--laranja {
  background: var(--laranja-500);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(248, 80, 0, .75);
}
.botao--laranja:hover {
  background: var(--laranja-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(248, 80, 0, .8);
}
.botao--laranja:active { transform: translateY(0); }

.botao--roxo { background: var(--roxo-700); color: #fff; }
.botao--roxo:hover { background: var(--roxo-600); color: #fff; transform: translateY(-2px); }

.botao--vidro {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(8px);
}
.botao--vidro:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  transform: translateY(-2px);
}

.botao--contorno {
  background: transparent;
  border-color: var(--linha);
  color: var(--roxo-700);
}
.botao--contorno:hover {
  border-color: var(--roxo-700);
  background: var(--roxo-050);
  color: var(--roxo-700);
  transform: translateY(-2px);
}

.botao--claro { background: #fff; color: var(--roxo-700); }
.botao--claro:hover { background: var(--roxo-100); color: var(--roxo-800); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   4. CABEÇALHO
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: .85rem;
  transition: background-color var(--transicao), box-shadow var(--transicao),
              backdrop-filter var(--transicao), padding var(--transicao);
}
.cabecalho--fixo {
  background: rgba(23, 11, 34, .88);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .8);
  padding-block: .55rem;
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.logo { display: flex; align-items: center; flex: none; }
.logo img { width: 138px; height: auto; }

.nav { margin-left: auto; }
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1.6rem);
}
.nav__lista a {
  position: relative;
  display: block;
  padding: .35rem 0;
  color: rgba(255, 255, 255, .84);
  font-size: .93rem;
  font-weight: 500;
}
.nav__lista a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--laranja-500);
  transition: width var(--transicao);
}
.nav__lista a:hover { color: #fff; }
.nav__lista a:hover::after { width: 100%; }
.nav__cta { display: none; }

.cabecalho__acoes { display: flex; align-items: center; gap: .75rem; }
.cabecalho__cta { padding: .68rem 1.15rem; font-size: .9rem; }

.menu-alternar {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  cursor: pointer;
}
.menu-alternar__barras,
.menu-alternar__barras::before,
.menu-alternar__barras::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: #fff;
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-alternar__barras { position: relative; }
.menu-alternar__barras::before { content: ""; position: absolute; top: -7px; }
.menu-alternar__barras::after { content: ""; position: absolute; top: 7px; }
.menu-alternar[aria-expanded="true"] .menu-alternar__barras { background: transparent; }
.menu-alternar[aria-expanded="true"] .menu-alternar__barras::before { transform: translateY(7px) rotate(45deg); }
.menu-alternar[aria-expanded="true"] .menu-alternar__barras::after { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.heroi {
  position: relative;
  isolation: isolate;
  padding-top: clamp(7.5rem, 12vw, 10rem);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(248, 80, 0, .13) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 100%, rgba(133, 56, 179, .15) 0%, transparent 60%),
    linear-gradient(160deg, #170322 0%, #0E0216 45%, #060308 100%);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
}

.heroi__luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
}
.orbe--roxo { width: 460px; height: 460px; background: #6D2A93; top: -140px; left: -120px; opacity: .26; }
.orbe--laranja { width: 380px; height: 380px; background: #F85000; bottom: -120px; right: 4%; opacity: .18; }


.heroi__conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: end;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.heroi__texto { padding-bottom: clamp(3rem, 6vw, 5.5rem); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem .5rem .75rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.selo__ponto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--verde-zap);
  box-shadow: 0 0 0 4px rgba(37, 211, 102, .25);
}

.heroi__titulo { color: #fff; margin-bottom: 1.35rem; }
.heroi__titulo em {
  font-style: normal;
  color: var(--laranja-300);
}

.heroi__subtitulo {
  max-width: 33rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: rgba(255, 255, 255, .78);
  margin-bottom: 2rem;
}
.heroi__subtitulo strong { color: #fff; }

.heroi__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 2.5rem;
}


.heroi__visual { position: relative; align-self: end; }
.heroi__moldura {
  position: relative;
  padding: 0 .5rem;
  isolation: isolate;
}
/* Brilho suave atrás da equipe — integra o recorte ao fundo escuro */
.heroi__moldura::before {
  content: "";
  position: absolute;
  inset: 6% -6% -4%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(58% 58% at 50% 62%, rgba(248, 80, 0, .40), transparent 72%),
    radial-gradient(48% 52% at 28% 40%, rgba(133, 56, 179, .55), transparent 74%);
  filter: blur(46px);
}
.heroi__time {
  width: 108%;
  max-width: none;
  margin-left: -4%;
  /* funde a base da foto com a faixa de números */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}

.cartao-flutuante {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .85rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--sombra-3);
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.3;
  animation: flutuar 6s ease-in-out infinite;
}
.cartao-flutuante strong { display: block; color: var(--roxo-700); font-size: .86rem; }
.cartao-flutuante__icone {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--roxo-100);
  color: var(--roxo-700);
  flex: none;
}
.cartao-flutuante__icone--verde { background: #E4F8EC; color: var(--verde-ok); }
.cartao-flutuante__icone--laranja { background: var(--laranja-100); color: var(--laranja-600); }

.cartao-flutuante--a { top: -18%; left: -2%; animation-delay: 0s; }
.cartao-flutuante--b { bottom: 21%; right: -3%; animation-delay: 1.6s; }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Faixa de números */
.faixa-numeros {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(6px);
}
.faixa-numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.numero {
  padding-inline: clamp(.5rem, 2vw, 1.5rem);
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.numero:first-child { border-left: 0; padding-left: 0; }
.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.numero__prefixo { color: var(--laranja-300); font-size: .78em; margin-right: .06em; }
.numero__rotulo {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   6. SEÇÕES (padrão)
   -------------------------------------------------------------------------- */
.secao {
  padding-block: var(--espaco-secao);
  position: relative;
}
.secao--servicos { background: var(--fundo-2); }
.secao--faixa-clientes { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--fundo); }

.secao__cabecalho { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }
.secao__cabecalho--claro .secao__titulo { color: #fff; }
.secao__cabecalho--claro .secao__descricao { color: rgba(255, 255, 255, .74); }

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  color: var(--laranja-600);
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rotulo::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.rotulo--claro { color: var(--laranja-300); }

.secao__titulo { margin-bottom: 1rem; }
.secao__titulo--claro { color: #fff; }

.secao__descricao {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: var(--cinza);
  max-width: 42rem;
}
.secao__cabecalho--centro .secao__descricao { margin-inline: auto; }
.secao__descricao--claro { color: rgba(255, 255, 255, .76); }

/* Grades */
.grade { display: grid; gap: 1.25rem; }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.cartao {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-1);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-2);
  border-color: #E0CFEE;
}

.cartao__icone {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 1.15rem;
  border-radius: 14px;
  background: var(--roxo-100);
  color: var(--roxo-700);
}
.cartao__icone--laranja { background: var(--laranja-100); color: var(--laranja-600); }
.cartao__icone--roxo { background: var(--roxo-100); color: var(--roxo-700); }
.cartao__icone--verde { background: #E4F8EC; color: var(--verde-ok); }
.cartao__icone--vermelho { background: #FDECEC; color: #D64545; }

.cartao h3 { margin-bottom: .6rem; }
.cartao p { font-size: .95rem; color: var(--cinza); }

.cartao--desafio { padding: 1.6rem; }
.cartao--desafio::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  border-radius: 0 0 var(--raio) var(--raio);
  background: linear-gradient(90deg, var(--roxo-700), var(--laranja-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.cartao--desafio:hover::before { transform: scaleX(1); }

.cartao--servico { display: flex; flex-direction: column; padding: 1.9rem; }
.cartao--servico p { margin-bottom: 1.1rem; }

.lista-check { display: grid; gap: .5rem; margin-top: auto; }
.lista-check li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .88rem;
  color: var(--grafite);
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--laranja-500);
  box-shadow: 0 0 0 3px var(--laranja-100);
}
.lista-check--grande { gap: .7rem; margin-block: 1.5rem; }
.lista-check--grande li { font-size: .98rem; color: var(--grafite); }
.lista-check--grande li::before { top: .5em; }

/* Chamada final dentro da seção de serviços */
.chamada-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--raio);
  background: linear-gradient(120deg, var(--roxo-800), var(--roxo-700) 55%, #6B1B99);
  color: rgba(255, 255, 255, .82);
  box-shadow: var(--sombra-3);
}
.chamada-final h3 { color: #fff; margin-bottom: .4rem; }
.chamada-final p { font-size: .95rem; max-width: 34rem; }
.chamada-final .botao { flex: none; }

/* --------------------------------------------------------------------------
   8. PROVA SOCIAL (marquee)
   -------------------------------------------------------------------------- */
.faixa-clientes__titulo {
  margin-bottom: 1.75rem;
  color: var(--cinza);
  font-size: .92rem;
  font-weight: 500;
  text-align: center;
}

.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__trilha {
  display: flex;
  width: max-content;
  animation: deslizar 42s linear infinite;
}
.marquee:hover .marquee__trilha { animation-play-state: paused; }
.marquee__grupo { display: flex; flex: none; }

.marquee img {
  width: 92px; height: 92px;
  margin-inline: .6rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sombra-1);
  filter: saturate(.55) opacity(.85);
  transition: filter var(--transicao), transform var(--transicao);
}
.marquee img:hover { filter: none; transform: scale(1.05); }

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

/* --------------------------------------------------------------------------
   9. MÉTODO
   -------------------------------------------------------------------------- */
.secao--metodo {
  background: linear-gradient(180deg, #fff 0%, var(--fundo-2) 100%);
}

.ciclo {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.ciclo__diagrama { display: grid; place-items: center; }
.ciclo__svg { width: min(100%, 380px); }
.ciclo__giro { animation: girar 90s linear infinite; transform-origin: 160px 160px; }

@keyframes girar { to { transform: rotate(360deg); } }

.ciclo__etapas { display: grid; gap: .75rem; }

.etapa {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-1);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.etapa:hover { transform: translateX(6px); border-color: #E0CFEE; box-shadow: var(--sombra-2); }
.etapa__numero {
  flex: none;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--roxo-500);
}
.etapa h3 { margin-bottom: .25rem; }
.etapa p { font-size: .92rem; color: var(--cinza); }

/* Bloco "como começar" */
.comecar {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: 26px;
  background: linear-gradient(140deg, var(--roxo-900), var(--roxo-700));
  color: rgba(255, 255, 255, .8);
  box-shadow: var(--sombra-3);
  text-align: center;
}
.comecar__texto { max-width: 40rem; margin-inline: auto; margin-bottom: 2rem; }
.comecar__texto h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: .5rem; }

.comecar__passos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}
.passo {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 3.6rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .06);
}
.passo__numero {
  position: absolute;
  left: 1.1rem; top: 1.5rem;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--laranja-500);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 800;
}
.passo h4 { color: #fff; margin-bottom: .35rem; }
.passo p { font-size: .9rem; }
.passo strong { color: #fff; }
.comecar__botao { box-shadow: 0 14px 30px -12px rgba(248, 80, 0, .9); }

/* --------------------------------------------------------------------------
   10. RESULTADOS
   -------------------------------------------------------------------------- */
.secao--resultados {
  background:
    radial-gradient(80% 70% at 8% 0%, rgba(248, 80, 0, .13), transparent 60%),
    radial-gradient(70% 80% at 95% 100%, rgba(133, 56, 179, .16), transparent 62%),
    linear-gradient(150deg, #170322, #060308 70%);
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
}

.grade-resultados {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.resultado {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  text-align: center;
  transition: transform var(--transicao), background-color var(--transicao), border-color var(--transicao);
}
.resultado:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 138, 76, .5);
}
.resultado__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: linear-gradient(100deg, #fff 30%, var(--laranja-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.resultado__rotulo { display: block; margin-top: .4rem; font-size: .88rem; color: rgba(255, 255, 255, .66); }

.resultados__nota {
  position: relative;
  max-width: 44rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: .95rem;
  color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   11. CLIENTES
   -------------------------------------------------------------------------- */
.grade-clientes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem .75rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-1);
  text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cliente:hover { transform: translateY(-5px); box-shadow: var(--sombra-2); border-color: #E0CFEE; }
.cliente img {
  width: 84px; height: 84px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--fundo-3);
}
.cliente span { font-size: .82rem; font-weight: 600; color: var(--grafite); }

.clientes__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  text-align: center;
}
.clientes__acao p { font-size: .95rem; color: var(--cinza); }

/* --------------------------------------------------------------------------
   12. PARCERIA
   -------------------------------------------------------------------------- */
.secao--parceria {
  background: var(--fundo-2);
  border-block: 1px solid var(--linha);
}
.parceria {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.parceria__selo { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
.parceria__selo-moldura {
  padding: 1.75rem 2rem;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sombra-2);
}
.parceria__selo-moldura img { width: min(100%, 260px); }
.parceria__selo-legenda { font-size: .92rem; color: var(--cinza); }
.parceria__selo-legenda strong { color: var(--roxo-700); }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.acordeao { display: grid; gap: .75rem; }
.acordeao__item {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.acordeao__item[open] { border-color: #E0CFEE; box-shadow: var(--sombra-2); }

.acordeao__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
  list-style: none;
}
.acordeao__item summary::-webkit-details-marker { display: none; }
.acordeao__item summary:hover { color: var(--roxo-700); }

.acordeao__mais {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--roxo-100);
  transition: background-color var(--transicao), transform var(--transicao);
}
.acordeao__mais::before,
.acordeao__mais::after {
  content: "";
  position: absolute;
  inset: 50% 7px auto 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--roxo-700);
  transform: translateY(-50%);
  transition: transform var(--transicao), background-color var(--transicao);
}
.acordeao__mais::after { transform: translateY(-50%) rotate(90deg); }
.acordeao__item[open] .acordeao__mais { background: var(--laranja-500); transform: rotate(180deg); }
.acordeao__item[open] .acordeao__mais::before,
.acordeao__item[open] .acordeao__mais::after { background: #fff; }
.acordeao__item[open] .acordeao__mais::after { transform: translateY(-50%) rotate(0deg); }

.acordeao__resposta { padding: 0 1.4rem 1.35rem; }
.acordeao__resposta p { font-size: .95rem; color: var(--cinza); }
.acordeao__item[open] .acordeao__resposta { animation: abrirPainel .32s ease both; }

@keyframes abrirPainel {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   14. CONTATO
   -------------------------------------------------------------------------- */
.secao--contato {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(248, 80, 0, .11), transparent 60%),
    linear-gradient(160deg, #170322, #060308 75%);
  color: rgba(255, 255, 255, .8);
}
.contato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contato__lista { display: grid; gap: 1rem; margin-top: 2rem; }
.contato__acoes { display: grid; gap: .75rem; }
.contato__lista li { display: flex; align-items: center; gap: 1rem; }
.contato__icone {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--linha-escura);
  color: var(--laranja-300);
}
.contato__lista strong { display: block; font-size: .82rem; color: rgba(255, 255, 255, .6); font-weight: 500; }
.contato__lista a { color: #fff; font-size: 1rem; font-weight: 600; }
.contato__lista a:hover { color: var(--laranja-300); }

/* Formulário */
.formulario {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sombra-3);
  color: var(--grafite);
}
.formulario__titulo { font-size: 1.35rem; margin-bottom: .35rem; }
.formulario__subtitulo { font-size: .92rem; color: var(--cinza); margin-bottom: 1.75rem; }

.campo { margin-bottom: 1.05rem; }
.campo label {
  display: block;
  margin-bottom: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta-2);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-2);
  color: var(--tinta);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2352007C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--cinza-claro); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--roxo-500);
  box-shadow: 0 0 0 4px rgba(133, 56, 179, .14);
}
.campo-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.campo--check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.campo--check input {
  width: 20px; height: 20px;
  margin-top: .18rem;
  accent-color: var(--roxo-700);
}
.campo--check label { margin: 0; font-size: .82rem; font-weight: 400; color: var(--cinza); }
.campo--check a { text-decoration: underline; }

.campo__erro {
  margin-top: .3rem;
  font-size: .8rem;
  color: #D64545;
  min-height: 0;
}
.campo--invalido input,
.campo--invalido select { border-color: #E48A8A; background: #FFF7F7; }

.formulario__aviso { margin-top: 1rem; font-size: .78rem; color: var(--cinza-claro); text-align: center; }
.formulario__aviso a { text-decoration: underline; }

.formulario__sucesso {
  display: grid;
  justify-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding: 1.75rem 1.25rem;
  border: 1px solid #CBEBD8;
  border-radius: var(--raio);
  background: #F2FBF5;
  text-align: center;
  animation: abrirPainel .35s ease both;
}
.formulario__sucesso-icone {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #DCF5E6;
  color: var(--verde-ok);
}
.formulario__sucesso h4 { font-size: 1.1rem; }
.formulario__sucesso p { font-size: .9rem; color: var(--cinza); max-width: 30rem; }
.formulario__sucesso-acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; }

/* --------------------------------------------------------------------------
   15. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  background: #0F0714;
  color: rgba(255, 255, 255, .62);
  font-size: .92rem;
}
.rodape__interno {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.rodape__marca img { width: 148px; margin-bottom: 1.1rem; }
.rodape__marca p { max-width: 26rem; }
.rodape__sociais { display: flex; gap: .6rem; margin-top: 1.25rem; }
.rodape__sociais a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--linha-escura);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  transition: background-color var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.rodape__sociais a:hover { background: var(--laranja-500); border-color: var(--laranja-500); color: #fff; transform: translateY(-3px); }

.rodape__coluna h3 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rodape__coluna ul { display: grid; gap: .55rem; }
.rodape__coluna a { color: rgba(255, 255, 255, .66); }
.rodape__coluna a:hover { color: var(--laranja-300); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.5rem 0 6rem; /* folga inferior: o botao flutuante ocupa ~83px do canto */
  border-top: 1px solid var(--linha-escura);
  font-size: .82rem;
}
.rodape__base a { color: rgba(255, 255, 255, .62); }
.rodape__base a:hover { color: var(--laranja-300); }

/* --------------------------------------------------------------------------
   16. FLUTUANTES
   -------------------------------------------------------------------------- */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.3rem .85rem 1.05rem;
  border-radius: var(--raio-pilula);
  background: var(--verde-zap);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: .92rem;
  font-weight: 700;
  box-shadow: 0 16px 34px -14px rgba(37, 211, 102, .85);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.zap-flutuante:hover { transform: translateY(-3px) scale(1.02); color: #fff; box-shadow: 0 22px 42px -16px rgba(37, 211, 102, .95); }
.zap-flutuante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: pulsar 2.6s ease-out infinite;
}
@keyframes pulsar {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}

.voltar-topo {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 89;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: #fff;
  color: var(--roxo-700);
  box-shadow: var(--sombra-2);
  cursor: pointer;
  transition: transform var(--transicao), background-color var(--transicao);
}
.voltar-topo:hover { transform: translateY(-3px); background: var(--roxo-050); }

/* --------------------------------------------------------------------------
   17. ANIMAÇÃO DE ENTRADA
   -------------------------------------------------------------------------- */
/* O estado oculto so vale quando o JavaScript esta ativo (.js vem de um script no <head>).
   Sem JavaScript nada fica invisivel. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
[data-revelar].revelado { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav__lista { display: none; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    margin: 0;
    padding: 6rem 1.75rem 2rem;
    background: #180A24;
    box-shadow: -20px 0 60px -30px rgba(0, 0, 0, .9);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    overflow-y: auto;
  }
  .nav--aberto { transform: none; }
  .nav__lista {
    display: grid;
    gap: .25rem;
    margin-bottom: 1.5rem;
  }
  .nav__lista a {
    padding: .85rem .5rem;
    border-bottom: 1px solid var(--linha-escura);
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
  }
  .nav__cta { display: inline-flex; }
  .menu-alternar { display: block; }
  .cabecalho__cta { display: none; }

  .heroi__conteudo { grid-template-columns: 1fr; }
  .heroi__texto { padding-bottom: 1rem; }
  .heroi__visual { margin-inline: auto; max-width: 620px; width: 100%; }
  .cartao-flutuante--a { left: 0; }
  .cartao-flutuante--b { right: 0; }

  .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-clientes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ciclo { grid-template-columns: 1fr; }
  .ciclo__diagrama { order: -1; }
  .parceria { grid-template-columns: 1fr; }
  .contato { grid-template-columns: 1fr; }
  .rodape__interno { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 820px) {
  .faixa-numeros__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0;
  }
  .numero:nth-child(3) { border-left: 0; padding-left: 0; }
  .chamada-final { flex-direction: column; align-items: flex-start; }
  .comecar__passos { grid-template-columns: 1fr; }
  .cliente img { width: 72px; height: 72px; }
}

@media (max-width: 620px) {
  :root { --raio: 16px; }

  html { scroll-padding-top: 84px; }

  .cabecalho { padding-block: .6rem; }
  .logo img { width: 118px; }
  .cabecalho__acoes { margin-left: auto; }

  .heroi { padding-top: 6.5rem; }
  .heroi__titulo em { white-space: normal; }
  .heroi__botoes .botao { width: 100%; }

  .cartao-flutuante { font-size: .74rem; padding: .55rem .7rem; }
  .cartao-flutuante__icone { width: 26px; height: 26px; }
  .cartao-flutuante--a { top: -28%; left: 1%; }
  .cartao-flutuante--b { bottom: 3%; right: 1%; }

  .grade, .grade--3, .grade--4 { grid-template-columns: 1fr; }
  .grade-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .cliente { padding: .85rem .5rem; gap: .55rem; }
  .cliente img { width: 62px; height: 62px; border-radius: 14px; }
  .cliente span { font-size: .72rem; }

  .cartao, .cartao--servico { padding: 1.35rem; }
  .campo-grupo { grid-template-columns: 1fr; gap: 0; }
  .rodape__interno { grid-template-columns: 1fr; }
  .zap-flutuante__texto { display: none; }
  .zap-flutuante { padding: .95rem; border-radius: 50%; }
  .marquee img { width: 72px; height: 72px; border-radius: 14px; margin-inline: .45rem; }
}

@media (max-width: 420px) {
  .grade-resultados { grid-template-columns: 1fr; }
  .grade-clientes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero { padding-inline: 0; }
  .numero__valor { font-size: 1.45rem; }
  .numero__rotulo { font-size: .78rem; }
}

/* --------------------------------------------------------------------------
   19. ACESSIBILIDADE / PREFERÊNCIAS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .marquee__trilha { animation: none; }
  .ciclo__giro { animation: none; }
}

@media print {
  .cabecalho, .zap-flutuante, .voltar-topo, .marquee, .formulario { display: none !important; }
  body { color: #000; }
  .secao { padding-block: 1.5rem; }
}

/* --------------------------------------------------------------------------
   NORMALIZACAO OPTICA DOS LOGOS DE CLIENTES
   Medido no navegador: o desenho destes logos ocupa menos area dentro do
   arquivo original que os demais, entao pareciam menores na mesma caixa de
   84x84. O ajuste iguala o peso visual sem alterar os arquivos de imagem.
   -------------------------------------------------------------------------- */
img[src$="dluxo.webp"]        { transform: scale(1.45); }
img[src$="lilo.webp"]         { transform: scale(1.45); }
img[src$="panzagnv.webp"]     { transform: scale(1.30); }
img[src$="karlabolsas.webp"]  { transform: scale(1.26); }
img[src$="panta.webp"]        { transform: scale(1.12); }

/* --------------------------------------------------------------------------
   SEÇÃO "O QUE MUDA NA PRÁTICA" — ilustrações de celular
   -------------------------------------------------------------------------- */
.muda__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 44rem;
  margin-inline: auto;
}
.muda__item { text-align: center; }
.muda__item img {
  height: clamp(230px, 25vw, 320px);
  width: auto;
  margin-inline: auto;
  filter: drop-shadow(0 20px 34px rgba(82, 0, 124, .16));
}
.muda__item h3 { font-size: 1.12rem; margin: 1.35rem 0 .45rem; }
.muda__item p { font-size: .95rem; color: var(--cinza); max-width: 21rem; margin-inline: auto; }

@media (max-width: 700px) {
  .muda__grade { grid-template-columns: 1fr; gap: 2.25rem; }
  .muda__item img { height: 250px; }
}

/* --------------------------------------------------------------------------
   ITENS DE LISTA COM ÍCONE DE CHECK (substitui o ponto laranja)
   -------------------------------------------------------------------------- */
.lista-check li::before {
  top: .1em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--laranja-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F85000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.lista-check--grande li::before { top: .22em; width: 20px; height: 20px; background-size: 12px 12px; }