/* Proudian Spinardi — ferramentas internas.
   O simbolo do escritorio e feito de planos de cor chapada e cantos duros.
   A pagina segue o mesmo vocabulario: nenhum raio de borda, nenhuma sombra,
   nenhum gradiente. As cores da marca aparecem so na faixa do topo. */

:root {
  --verde: #3e8785;
  --vinho: #be2347;
  --laranja: #ec561e;
  --azul: #7cc7c9;

  --tinta: #1c1a17;
  --tinta-fraca: #5f5b56;
  --regua: #dcd8d2;
  --papel: #ffffff;

  --fonte: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

b {
  font-weight: 600;
}

/* Só o recuo horizontal: o vertical fica com cada seção, senão o shorthand
   `padding` daqui anula o `padding-block` delas. */
.faixa-conteudo {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 32px;
}

/* --- Topo ---------------------------------------------------------------- */

.topo-linha {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 40px 28px;
}

.topo-marca {
  width: 44px;
  height: 44px;
  flex: none;
}

.topo-escritorio {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.topo-titulo {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.faixa-marca {
  display: flex;
  height: 6px;
}

.faixa-marca span:nth-child(1) { background: var(--verde); }
.faixa-marca span:nth-child(2) { background: var(--vinho); }
.faixa-marca span:nth-child(3) { background: var(--laranja); }
.faixa-marca span:nth-child(4) { background: var(--azul); }

/* --- Estrutura ----------------------------------------------------------- */

main {
  padding-block: 56px 96px;
}

.colunas {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.rotulo-secao {
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--regua);
  font-size: 11px;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* --- Formulario ---------------------------------------------------------- */

.campo + .campo {
  margin-top: 28px;
}

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.campo input {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--regua);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.campo input::placeholder {
  color: #a8a29a;
}

.campo input:focus {
  outline: none;
  border-bottom: 2px solid var(--vinho);
  padding-bottom: 7px;
}

/* --- Pre-visualizacao ---------------------------------------------------- */

.quadro {
  padding: 32px 28px;
  border: 1px solid var(--regua);
  background: var(--papel);
  overflow-x: auto;
}

.quadro-vazio {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 15px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

.botao {
  padding: 13px 26px;
  border: 0;
  border-radius: 0;
  background: var(--vinho);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.botao:hover:not(:disabled) {
  background: #a11d3c;
}

.botao:disabled {
  background: #d7d3cd;
  color: #8a857e;
  cursor: not-allowed;
}

.aviso {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--tinta-fraca);
  min-height: 1.55em;
}

.aviso[data-estado='ok'] {
  color: var(--verde);
  font-weight: 600;
}

.aviso[data-estado='erro'] {
  color: var(--vinho);
  font-weight: 600;
}

/* --- Instalar no Gmail --------------------------------------------------- */

.instalar {
  margin-top: 72px;
}

.passos {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 18px 64px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

/* O texto do passo fica em fluxo inline (tem <b> no meio), entao o numero e
   posicionado fora do fluxo em vez de virar uma coluna de grid. */
.passos li {
  position: relative;
  padding-left: 28px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
  counter-increment: passo;
}

.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vinho);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Acessibilidade ------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Telas estreitas ----------------------------------------------------- */

@media (max-width: 900px) {
  .colunas {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .passos {
    grid-auto-flow: row;
    grid-template-rows: none;
  }

  .passos li {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .faixa-conteudo {
    padding-inline: 20px;
  }

  .topo-linha {
    padding-block: 28px 20px;
  }

  main {
    padding-block: 40px 64px;
  }

  .topo-titulo {
    font-size: 22px;
  }

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