/* =========================================================
   Prisma Softwares — landing page

   PRINCÍPIO VISUAL
   O símbolo da marca é um sólido de facetas chapadas, sem sombra e sem
   contorno. A página obedece à mesma ótica: cor aparece como plano e
   aresta, nunca como brilho difuso ou vidro fosco. A única exceção é a
   LUZ do herói — luz dispersa é contínua de verdade, então ali o degradê
   é fiel ao fenômeno, não decoração.

   ONDE MEXER
   :root ................ paleta, fontes, larguras, curva de animação
   tipografia ........... escalas de título, texto e rótulo
   botões ............... .btn e suas variantes
   topo ................. cabeçalho fixo e menu
   herói ................ bloco de abertura + animação da refração
   revelação em scroll .. entrada dos blocos ao rolar
   seções ............... respiro padrão e a banda inclinada
   frentes (serviços) ... as quatro linhas com trilho de cor
   passos (processo) .... 01 a 04
   contato .............. canais e formulário
   rodapé
   movimento reduzido ... respeita prefers-reduced-motion

   ARMADILHA JÁ PAGA
   Em SVG, transform via CSS SOBRESCREVE o atributo transform do mesmo
   elemento. Por isso translate/scale ficam sempre num <g> externo e a
   animação num <g> interno. Misturar os dois faz a peça saltar de lugar.
   ========================================================= */

:root {
  /* paleta da marca (marca/web/marca.css) */
  --violeta: #7C5CFF;
  --ciano: #3DDBE3;
  --magenta: #D95CFF;
  --preto: #0F0E13;
  --grafite: #1C1A24;
  --borda: #22212B;
  --branco: #F4F3F7;
  --fraco: #8B8797;

  --banda: #16151D;

  --f-display: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --pad-secao: clamp(6rem, 13vw, 11rem);
  --corte: 4.5rem;

  /* curva única de toda a página: desacelera com massa, nunca "ease" padrão */
  --mola: cubic-bezier(.32, .72, 0, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--branco);
  color: var(--preto);
  padding: .75rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- tipografia ---------- */

.rotulo {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fraco);
  margin: 0 0 1.25rem;
}

.display {
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.display__em { color: var(--fraco); }

.titulo {
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  color: var(--fraco);
  max-width: 46ch;
  margin: 0 0 2.25rem;
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  padding: .8rem 1.35rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .35s var(--mola),
              color .35s var(--mola),
              border-color .35s var(--mola),
              transform .35s var(--mola);
}
.btn:active { transform: scale(.975); }

.btn--claro {
  background: var(--branco);
  color: var(--preto);
}
.btn--claro:hover { background: var(--ciano); }

.btn--vazado {
  background: transparent;
  color: var(--branco);
  border-color: #34323F;
}
.btn--vazado:hover { border-color: var(--branco); }

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  /* opaco: a 92% o título passava por trás da barra ao rolar */
  background: var(--preto);
  border-bottom: 1px solid var(--borda);
}

.topo__linha {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 5.25rem;
}

.topo__marca { flex: none; }

/* lockup-h-web.svg tem o quadro ajustado à tinta — a altura aqui é
   a altura real da marca, não a de uma caixa com respiro embutido. */
.topo__marca img { height: 2.5rem; width: auto; }

.topo__nav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  font-size: .925rem;
  color: var(--fraco);
}
.topo__nav a {
  text-decoration: none;
  transition: color .35s var(--mola);
}
.topo__nav a:hover { color: var(--branco); }

.topo__cta { flex: none; }
.topo__cta-curto { display: none; }

@media (max-width: 780px) {
  .topo__nav { display: none; }
  .topo__cta { margin-inline-start: auto; }
}

@media (max-width: 560px) {
  .topo__linha { gap: 1rem; min-height: 4.5rem; }
  .topo__marca img { height: 2rem; }
  .topo__cta-longo { display: none; }
  .topo__cta-curto { display: inline; }
}

/* ---------- herói ---------- */

.heroi {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 9vw, 8rem);
  overflow: hidden;
}

.heroi__grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* A ótica sangra até a borda direita da viewport. Encerrada na coluna
   do grid ela virava um diagrama solto no meio da página; saindo do
   quadro, a luz parece continuar além da tela. */
.heroi__optica {
  min-width: 0;
  margin-inline-end: min(
    calc(var(--gutter) * -1),
    calc((var(--wrap) - 100vw) / 2 - var(--gutter))
  );
}
.refracao { width: 100%; height: auto; }

@media (max-width: 900px) {
  .heroi__grade { grid-template-columns: 1fr; }

  /* No retrato a composição larga não cabe: espremida, vira enfeite solto
     com um vão de preto morto embaixo. Aqui ela sangra de ponta a ponta e
     é recortada numa faixa (preserveAspectRatio slice), encostando na
     seção seguinte — passa a fazer a transição em vez de sobrar. */
  .heroi { padding-block-end: 0; }
  .heroi__optica {
    order: 2;
    margin-inline: calc(var(--gutter) * -1);
    margin-block-start: clamp(2.5rem, 9vw, 4rem);
  }
  .refracao {
    height: clamp(160px, 46vw, 230px);
  }

  /* a faixa já separa o herói do resto: o respiro cheio aqui vira vão morto */
  .heroi + .secao { padding-block-start: clamp(3rem, 11vw, 4.5rem); }
}

/* Sequência de carga — um gesto só: luz branca entra, atravessa,
   e abre em espectro no ponto exato de saída do prisma.
   Nenhum elemento com transform via CSS carrega transform como atributo:
   o CSS sobrescreve o atributo e a peça salta de lugar. */

.feixe {
  animation: acende .8s var(--mola) .1s both;
}

.prisma {
  transform-box: fill-box;
  transform-origin: center;
  animation: assenta .8s var(--mola) .3s both;
}

.linha-branca {
  animation: passagem 1.4s var(--mola) .5s both;
}

.raios__abre {
  transform-box: fill-box;
  transform-origin: left center;
  will-change: transform;
  animation: abre 1.1s var(--mola) .95s both;
}

.raios__tilt {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform .7s var(--mola);
}

@keyframes acende {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes assenta {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes passagem {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  52%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes abre {
  from { opacity: 0; transform: scaleY(.05); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* texto do herói entra escalonado junto com a ótica */
.js .heroi__texto > * { animation: sobe .9s var(--mola) both; }
.js .heroi__texto > *:nth-child(1) { animation-delay: .05s; }
.js .heroi__texto > *:nth-child(2) { animation-delay: .14s; }
.js .heroi__texto > *:nth-child(3) { animation-delay: .23s; }
.js .heroi__texto > *:nth-child(4) { animation-delay: .32s; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

/* ---------- revelação em scroll ----------
   Sem JS o conteúdo já está visível: a classe .js só é aplicada
   pelo script inline no <head>. */

.js .revela {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .9s var(--mola), transform .9s var(--mola);
}
.js .revela--dentro {
  opacity: 1;
  transform: none;
}

/* ---------- seções ---------- */

.secao { padding-block: var(--pad-secao); }

.secao__cabeca {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.secao__intro {
  color: var(--fraco);
  margin: 1.25rem 0 0;
  max-width: 54ch;
}

/* a banda inclinada — único lugar onde a diagonal aparece na estrutura */
.secao--banda {
  background: var(--banda);
  clip-path: polygon(0 var(--corte), 100% 0, 100% calc(100% - var(--corte)), 0 100%);
  padding-block: calc(var(--pad-secao) + var(--corte));
  margin-block: calc(var(--corte) * -0.5);
}

@media (max-width: 640px) {
  .secao--banda { --corte: 2.25rem; }
}

/* ---------- frentes (serviços) ----------
   Sem card. Card só se justifica quando a elevação comunica hierarquia
   real — aqui não comunicava nada, só repetia a mesma caixa quatro vezes.
   As quatro frentes são fatias de um mesmo espectro: o trilho da esquerda
   corre sem interrupção, e o filete divisor atravessa só o conteúdo. */

/* O trilho é uma BORDA, não um elemento vazio esticado no grid: bordas de
   blocos empilhados encostam sempre, em qualquer navegador. */
.frente {
  --facet: var(--branco);
  border-inline-start: 6px solid var(--facet);
  padding-inline-start: clamp(1.5rem, 3.5vw, 3rem);
  transition: background-color .45s var(--mola);
}
.frente:hover { background: #14131A; }

.frente--ciano   { --facet: #3DDBE3; }
.frente--azul    { --facet: #5584F1; }
.frente--violeta { --facet: #7C5CFF; }
.frente--magenta { --facet: #D95CFF; }

.frente__linha {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  padding-inline-end: clamp(0rem, 2vw, 2rem);
  border-top: 1px solid var(--borda);
}
.frente:last-child .frente__linha { border-bottom: 1px solid var(--borda); }

.frente__nome {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  transition: transform .45s var(--mola);
}
.frente:hover .frente__nome { transform: translateX(6px); }

.frente__texto {
  color: #ADA9B8;
  margin: 0 0 1rem;
  max-width: 58ch;
}

.frente__itens {
  margin: 0;
  font-size: .855rem;
  line-height: 1.75;
  color: var(--fraco);
  max-width: 58ch;
}

@media (max-width: 860px) {
  .frente__linha {
    grid-template-columns: 1fr;
    row-gap: .9rem;
  }
}
/* ---------- passos (processo) ---------- */

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: none;
}

@media (max-width: 940px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .passos { grid-template-columns: 1fr; } }

.passo {
  border-top: 1px solid #2C2A37;
  padding-top: 1.25rem;
}

.passo__num {
  display: block;
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ciano);
  margin-bottom: 1.5rem;
}

.passo__nome {
  font-size: 1.075rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 .6rem;
}

.passo__texto {
  color: var(--fraco);
  font-size: .925rem;
  margin: 0;
}

/* ---------- contato ---------- */

.contato__grade {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contato__grade { grid-template-columns: 1fr; }
}

.canais {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--borda);
}

.canal {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--borda);
  text-decoration: none;
  transition: padding-inline-start .4s var(--mola);
}
.canal:hover { padding-inline-start: .6rem; }

.canal__rotulo {
  flex: none;
  width: 6.5rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fraco);
}

.canal__valor {
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.canal:hover .canal__valor { color: var(--ciano); }

@media (max-width: 560px) {
  .canal {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  .canal__rotulo { width: auto; }
}

/* ---------- formulário ---------- */

.form {
  background: var(--grafite);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.form__titulo {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fraco);
  margin: 0 0 1.5rem;
}

.campo { margin-bottom: 1.1rem; }

.campo label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  margin-bottom: .4rem;
}
.campo__opc { color: var(--fraco); font-weight: 400; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--branco);
  background: var(--preto);
  border: 1px solid var(--borda);
  padding: .7rem .8rem;
  transition: border-color .35s var(--mola);
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #34323F; }

.campo textarea { resize: vertical; min-height: 6rem; }

.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fraco) 50%),
                    linear-gradient(135deg, var(--fraco) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 1.2rem, calc(100% - .8rem) 1.2rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 2.25rem;
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--magenta); }

.form__enviar { width: 100%; margin-top: .5rem; }

.form__nota {
  font-family: var(--f-mono);
  font-size: .72rem;
  line-height: 1.55;
  color: var(--fraco);
  margin: 1rem 0 0;
  text-align: center;
}

/* ---------- rodapé ---------- */

.rodape {
  border-top: 1px solid var(--borda);
  padding-block: 2.5rem;
}

.rodape__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.rodape__marca { height: 2.25rem; width: auto; opacity: .8; }

.rodape__nota {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--fraco);
  margin: 0;
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .linha-branca { display: none; }
  .raios__tilt { transition: none; }
  .js .revela { opacity: 1; transform: none; }
  .js .heroi__texto > * { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}