/* =========================================================================
   Sigla Digital — sigladigital.com.br

   A ideia visual sai do próprio slogan: "do papel à inteligência". O bloco
   do topo mostra essa passagem acontecendo — uma ficha de papel rabiscada
   virando dado organizado. É o que o sistema faz de verdade, e é o que o
   dono de mecânica ou de clínica reconhece na hora.

   Paleta e tipografia saem do logo: azul meia-noite, dourado da águia,
   prata para o que é secundário.
   ========================================================================= */

:root {
  --azul-noite: #0a1f3c;   /* fundo do logo, base de tudo */
  --azul-sigla: #14356b;   /* apoio, um degrau acima do fundo */
  --dourado: #c9a227;      /* a águia; usado com parcimônia */
  --dourado-claro: #e3bf4d;
  --prata: #c7cdd4;
  --gelo: #f7f9fb;
  --grafite: #1c1c1e;
  --papel: #efe9dd;        /* o "antes": papel envelhecido */
  --tinta: #4a4034;        /* caneta sobre o papel */

  --fonte-titulo: "Archivo", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", system-ui, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, monospace;

  --largura: 1140px;
  --respiro: clamp(4.5rem, 9vw, 8rem);
}

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

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

body {
  margin: 0;
  background: var(--gelo);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

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

.envelope {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

/* Etiqueta de seção. Numeração não entra: as seções não são um passo a
   passo, e numerar sugeriria uma ordem que não existe. */
.etiqueta {
  font-family: var(--fonte-dado);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dourado);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.etiqueta::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 5rem;
  background: currentColor;
  opacity: .45;
}

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

.topo {
  background: var(--azul-noite);
  color: var(--gelo);
  position: relative;
  overflow: hidden;
}

/* brilho discreto atrás da águia, para o azul chapado não achatar a tela */
.topo::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(circle, rgba(201,162,39,.14), transparent 62%);
  pointer-events: none;
}

.barra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.75rem;
}

/* O lockup repete o logo impresso: águia, SIGLA em peso forte, DIGITAL mais
   leve logo abaixo, e o slogan entre travessões. O contraste de peso entre
   as duas palavras é o que dá o ar premium — não pode virar duas linhas
   iguais. */
.marca {
  display: inline-grid;
  justify-items: center;
  gap: .28rem;
  text-decoration: none;
  color: var(--gelo);
  line-height: 1;
}
.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .34em;
  /* o letter-spacing empurra o texto para a direita; o recuo devolve o
     bloco ao eixo, senão a assinatura fica torta em relação ao subtítulo */
  text-indent: .34em;
  line-height: 1;
}
/* "DIGITAL" acompanha a largura de "SIGLA": no logo impresso as duas palavras
   terminam alinhadas, e é o espacejamento maior que faz isso, não o tamanho. */
.marca-digital {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .62em;
  text-indent: .62em;
  color: var(--gelo);
}

/* travessões dourados nas laterais, como no logo impresso */
.marca-sub {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: .5625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--prata);
  white-space: nowrap;
}
.marca-sub::before,
.marca-sub::after {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: var(--dourado);
  flex: none;
}

.abertura {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem) var(--respiro);
}

.abertura h1 {
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  margin-bottom: 1.5rem;
}
/* "à inteligência" recebe o dourado: é o destino da frase, e o único lugar
   do bloco onde a cor da marca aparece em texto. */
.abertura h1 em {
  font-style: normal;
  color: var(--dourado-claro);
}

.abertura-texto {
  font-size: 1.1875rem;
  color: var(--prata);
  max-width: 34rem;
  margin: 0 0 2.25rem;
}

.acoes { display: flex; flex-wrap: wrap; gap: .875rem; }

.botao {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .9375rem 1.75rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.botao:hover { transform: translateY(-2px); }
.botao-cheio { background: var(--dourado); color: var(--azul-noite); }
.botao-cheio:hover { background: var(--dourado-claro); }
.botao-vazio { border-color: rgba(199,205,212,.4); color: var(--gelo); }
.botao-vazio:hover { border-color: var(--dourado); }

/* -------------------------------------------------- a transformação ----- */
/* O elemento que a página é lembrada: a ficha de papel à esquerda e o mesmo
   dado organizado à direita. */

.transformacao {
  display: grid;
  /* o lado "depois" ganha um pouco mais de espaço: ele tem valores em reais,
     que são mais largos que os rabiscos do caderno */
  grid-template-columns: .92fr auto 1.08fr;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.25rem);
}

.ficha {
  border-radius: 4px;
  padding: 1.375rem 1.25rem;
  font-family: var(--fonte-dado);
  font-size: .78125rem;
  line-height: 1.9;
}

.ficha-papel {
  background: var(--papel);
  color: var(--tinta);
  /* pauta de caderno, para ler como papel sem precisar de imagem */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 1.85rem, rgba(74,64,52,.16) 1.85rem 1.9rem);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
  transform: rotate(-1.4deg);
}
.ficha-papel .linha { display: flex; justify-content: space-between; gap: 1rem; }
/* rabiscos: cada linha ligeiramente torta, como escrita à mão */
.ficha-papel .linha:nth-child(2) { transform: translateX(3px) rotate(.35deg); }
.ficha-papel .linha:nth-child(4) { transform: translateX(-2px) rotate(-.3deg); }
.ficha-papel .rasurado { text-decoration: line-through; opacity: .55; }

.ficha-dado {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(199,205,212,.22);
  color: var(--gelo);
}
.ficha-dado .linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .1rem;
}
/* o valor nunca quebra em duas linhas: "R$" órfão numa linha e o número na
   seguinte destruiria a leitura de tabela que a ficha precisa ter */
.ficha-dado .valor,
.ficha-dado .conferido { white-space: nowrap; }
.ficha-dado .linha > span:first-child { min-width: 0; }
.ficha-dado .valor { color: var(--dourado-claro); }
.ficha-dado .conferido { color: #7fd4a8; }

.ficha-titulo {
  font-family: var(--fonte-texto);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .62;
  margin-bottom: .875rem;
}

.seta {
  color: var(--dourado);
  font-size: 1.5rem;
  line-height: 1;
}

/* entrada orquestrada: o papel aparece, depois a seta, depois o dado */
@media (prefers-reduced-motion: no-preference) {
  .transformacao > * { opacity: 0; animation: surgir .7s ease forwards; }
  .transformacao > *:nth-child(1) { animation-delay: .25s; }
  .transformacao > *:nth-child(2) { animation-delay: .6s; }
  .transformacao > *:nth-child(3) { animation-delay: .8s; }
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* a inclinação do papel sobrevive à animação */
@media (prefers-reduced-motion: no-preference) {
  .transformacao .ficha-papel { animation-name: surgir-papel; }
}
@keyframes surgir-papel {
  from { opacity: 0; transform: translateY(14px) rotate(-1.4deg); }
  to   { opacity: 1; transform: rotate(-1.4deg); }
}

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

.secao { padding-block: var(--respiro); }
.secao-clara { background: var(--gelo); }
.secao-azul { background: var(--azul-noite); color: var(--gelo); }
.secao-azul .titulo-secao { color: var(--gelo); }

.titulo-secao {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  max-width: 22ch;
  margin-bottom: 1.25rem;
}
.intro-secao {
  font-size: 1.125rem;
  max-width: 46rem;
  color: #4b5563;
  margin: 0 0 3rem;
}
.secao-azul .intro-secao { color: var(--prata); }

.grade { display: grid; gap: 1.5rem; }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }

.cartao {
  background: #fff;
  border: 1px solid #e4e8ee;
  border-top: 3px solid var(--dourado);
  padding: 2rem 1.75rem;
}
.cartao h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.cartao p { margin: 0; color: #4b5563; font-size: 1rem; }

.secao-azul .cartao {
  background: rgba(255,255,255,.04);
  border-color: rgba(199,205,212,.18);
  border-top-color: var(--dourado);
}
.secao-azul .cartao p { color: var(--prata); }

/* lista de dores: o que o cliente vive hoje */
.dores { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.dores li {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  font-size: 1.0625rem;
  color: var(--prata);
}
.dores li::before {
  content: "—";
  color: var(--dourado);
  flex: none;
  font-family: var(--fonte-dado);
}

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

.contato-grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.formulario { display: grid; gap: 1.125rem; }
.campo { display: grid; gap: .4375rem; }
.campo label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.campo input, .campo textarea, .campo select {
  font: inherit;
  font-size: 1rem;
  padding: .8125rem .9375rem;
  border: 1px solid #d3dae3;
  border-radius: 3px;
  background: #fff;
  color: var(--grafite);
  width: 100%;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--azul-sigla);
  outline: 2px solid rgba(20,53,107,.18);
  outline-offset: 0;
}

.aviso-form { font-size: .875rem; color: #6b7280; margin: 0; }

.recado { border-radius: 3px; padding: .875rem 1rem; font-size: .9375rem; margin: 0; }
.recado[hidden] { display: none; }
.recado-ok { background: #e7f6ee; color: #1a6b45; border: 1px solid #b9e3cd; }
.recado-erro { background: #fdecec; color: #a02020; border: 1px solid #f3c2c2; }

.rodape {
  background: var(--azul-noite);
  color: var(--prata);
  padding-block: 2.5rem;
  font-size: .875rem;
  border-top: 1px solid rgba(199,205,212,.14);
}
.rodape .envelope {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.rodape a { color: var(--gelo); text-decoration: none; }
.rodape a:hover { color: var(--dourado); }

/* ------------------------------------------------------------- telas --- */

@media (max-width: 940px) {
  .abertura { grid-template-columns: 1fr; }
  .grade-3, .grade-2, .contato-grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .transformacao { grid-template-columns: 1fr; gap: 1rem; }
  .seta { transform: rotate(90deg); justify-self: center; }
  .ficha-papel { transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .transformacao .ficha-papel { animation-name: surgir; }
  }
  .marca-sub { display: none; }
}

/* A verificação é um campo como os outros, mas com fundo levemente distinto:
   sinaliza que é uma checagem, não mais um dado do contato. */
.verificacao {
  background: #eef2f7;
  border: 1px solid #dde3ec;
  padding: .875rem 1rem;
}
.verificacao label { font-weight: 600; }

/* A águia entra acima do nome, como no logo impresso. Largura em rem para
   acompanhar o tamanho do texto se a pessoa aumentar a fonte do navegador. */
.marca-simbolo {
  width: 3.25rem;
  height: auto;
  display: block;
  margin-bottom: .15rem;
}
@media (max-width: 560px) {
  .marca-simbolo { width: 2.5rem; }
}