/* Site do FitShoe: CSS puro, sem script e sem recurso externo (as fontes são as de assets/fonts).
   Os tokens são os do app (mobile/src/index.css, repositório fitshoe): a etiqueta de tamanho da caixa de tênis, papel branco e tinta
   preta, bordas de 2 px, uma célula laranja e letra condensada. A etiqueta do topo é sempre papel e tinta, nos dois temas.
   Claro e escuro pelo sistema (prefers-color-scheme). Cor nova entra aqui, em :root; nunca hex solto em componente. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
}

:root {
  color-scheme: light dark;
  --fonte: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Barlow Condensed', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* a etiqueta é sempre papel e tinta */
  --papel: #ffffff;
  --tinta: #16191e;
  --pagina: #f1f2ee;
  --pagina-luz: #fbfbf8;
  --superficie: #ffffff;
  --texto: #16191e;
  --texto-suave: #565c66;
  --linha: #d5d7d0;
  --contorno: #16191e;
  --acao: #ff5a1f;
  --sobre-acao: #16191e;
  --destaque-texto: #b83d0f;
  --foco: #16191e;
  --sombra-alta: 0 2px 3px rgb(22 25 30 / 0.06), 0 10px 18px -6px rgb(22 25 30 / 0.13), 0 30px 48px -14px rgb(22 25 30 / 0.3),
    0 60px 90px -32px rgb(22 25 30 / 0.42);
  --curva-saida: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-mola: cubic-bezier(0.34, 1.45, 0.55, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pagina: #17191c;
    --pagina-luz: #1f2226;
    --superficie: #22252a;
    --texto: #f1f2ee;
    --texto-suave: #a9afb8;
    --linha: #33373e;
    --contorno: #f1f2ee;
    --acao: #ff6a33;
    --destaque-texto: #ff8a5b;
    --foco: #ff8a5b;
    --sombra-alta: 0 10px 18px -6px rgb(0 0 0 / 0.5), 0 32px 50px -14px rgb(0 0 0 / 0.7), 0 62px 92px -32px rgb(0 0 0 / 0.85);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--pagina);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(to bottom, var(--pagina-luz), var(--pagina) 22rem) no-repeat, var(--pagina);
  color: var(--texto);
  font: 400 1rem/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--destaque-texto);
}

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

/* a coluna: 16 px de margem no celular, 32 px de 48rem em diante */
.pagina {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .pagina {
    width: min(100% - 4rem, 72rem);
  }
}

.pular {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  background: var(--contorno);
  color: var(--pagina);
  font-weight: 600;
}
.pular:focus {
  top: 0.75rem;
  color: var(--pagina);
}

/* ---- o topo: a marca e o idioma ---- */
.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 1.6rem/1 var(--fonte-titulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.marca:hover {
  color: inherit;
}
.marca svg {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--acao);
}

.idiomas {
  display: flex;
  border: 2px solid var(--contorno);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
}
.idiomas > * {
  display: block;
  min-width: 2.75rem;
  padding: 0.7rem 0.6rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}
.idiomas > * + * {
  border-left: 2px solid var(--contorno);
}
.idiomas [aria-current] {
  background: var(--contorno);
  color: var(--pagina);
}
.idiomas a:hover {
  background: var(--acao);
  color: var(--sobre-acao);
}

/* ---- o começo: o título e a etiqueta ---- */
.hero {
  display: grid;
  gap: 2.5rem;
  padding-block: 1.5rem 3rem;
}

.hero h1 {
  font: 800 clamp(2.9rem, 1.4rem + 7.4vw, 5.6rem) / 0.94 var(--fonte-titulo);
  text-wrap: balance;
}
.hero h1 span {
  display: block;
}
.hero h1 span + span {
  margin-top: 0.12em;
}

.lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.chamada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

/* ainda sem link: a borda tracejada é a da etiqueta vazia do app. Quando o app sair, vira o link da loja (comentário no HTML). */
.em-breve {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.2rem;
  border: 2px dashed var(--contorno);
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 600;
}
.em-breve .ponto {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--acao);
}
.nota {
  color: var(--texto-suave);
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    padding-block: 3rem 4.5rem;
  }
}

/* A etiqueta de tamanho: o adesivo colado na caixa. Canto de 4 px, borda de 2 px, células separadas por 2 px, uma laranja e o código
   de barras embaixo. Papel e tinta fixos nos dois temas. */
.etiqueta {
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-alta);
}
@media (min-width: 56rem) {
  .etiqueta {
    max-width: 31rem;
    transform: rotate(-1.5deg);
  }
  .etiqueta-topo {
    padding: 0.55rem 1.1rem;
    font-size: 1rem;
  }
  .etiqueta-celula {
    padding: 0.9rem 1.1rem 1rem;
  }
  .etiqueta dt {
    font-size: 1rem;
  }
  .etiqueta dd {
    font-size: 3.4rem;
  }
  .barras {
    padding: 0.75rem 1.1rem;
  }
  .barras svg {
    height: 3rem;
  }
}

.etiqueta-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 2px solid var(--tinta);
  font-size: 0.85rem;
  font-weight: 600;
}
.carimbo {
  padding: 0 0.45rem;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  line-height: 1.1rem;
}

.etiqueta dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--tinta);
}
.etiqueta-celula {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem 0.8rem;
  background: var(--papel);
}
.etiqueta-celula.destaque {
  background: var(--acao);
}
.etiqueta dt {
  font-size: 0.85rem;
  font-weight: 600;
}
.etiqueta dd {
  font: 800 2.6rem / 1 var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
}
.etiqueta dd small {
  margin-left: 0.15em;
  font-size: 0.5em;
  font-weight: 700;
}

.barras {
  padding: 0.6rem 0.85rem;
  border-top: 2px solid var(--tinta);
}
.barras svg {
  width: 100%;
  height: 2.4rem;
  fill: currentColor;
}

/* o único movimento da página: a etiqueta imprime quando a página abre */
@media (prefers-reduced-motion: no-preference) {
  .etiqueta-celula {
    animation: imprime 0.55s var(--curva-saida) both;
    animation-delay: calc(var(--ordem) * 110ms + 200ms);
  }
  .etiqueta-celula.destaque {
    animation-name: carimba;
    animation-timing-function: var(--curva-mola);
  }
  .barras svg {
    animation: imprime 0.5s var(--curva-saida) 0.75s both;
  }
}
@keyframes imprime {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes carimba {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
}

/* a régua: as marcas da logo, dispostas numa linha (um traço curto a cada 12 px, um longo a cada 60) */
.regua {
  height: 1rem;
  background:
    repeating-linear-gradient(to right, var(--contorno) 0 2px, transparent 2px 12px) left bottom / 100% 0.5rem no-repeat,
    repeating-linear-gradient(to right, var(--contorno) 0 2px, transparent 2px 60px) left bottom / 100% 1rem no-repeat;
}

/* ---- as seções ---- */
.secao {
  padding-block: 3rem;
}
@media (min-width: 48rem) {
  .secao {
    padding-block: 4.5rem;
  }
}
.secao h2 {
  max-width: 28ch;
  margin-bottom: 1.5rem;
  font: 700 clamp(2.1rem, 1.2rem + 3.6vw, 3.5rem) / 1 var(--fonte-titulo);
  text-wrap: balance;
}

/* três passos: células da etiqueta, a última (o resultado) é a laranja */
.passos {
  display: grid;
  gap: 2px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--contorno);
  border-radius: 4px;
  background: var(--contorno);
  list-style: none;
  counter-reset: passo;
}
.passos li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--superficie);
  counter-increment: passo;
}
.passos li::before {
  content: counter(passo);
  color: var(--destaque-texto);
  font: 800 4.25rem / 0.85 var(--fonte-titulo);
}
.passos li:last-child {
  background: var(--acao);
  color: var(--sobre-acao);
}
.passos li:last-child::before {
  color: var(--sobre-acao);
}
.passos h3 {
  font: 700 1.9rem / 1 var(--fonte-titulo);
}
@media (min-width: 48rem) {
  .passos {
    grid-template-columns: repeat(3, 1fr);
  }
  .passos li {
    gap: 1rem;
    padding: 1.75rem;
  }
}

/* o catálogo: a frase grande à esquerda, o detalhe à direita */
.catalogo {
  display: grid;
  gap: 1.25rem;
}
.catalogo h2 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(2.6rem, 1.2rem + 6vw, 5rem);
}
.catalogo p {
  max-width: 34rem;
  font-size: 1.15rem;
}
@media (min-width: 56rem) {
  .catalogo {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: 4rem;
  }
}

/* o que é grátis e o que usa créditos */
.dois {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 56rem) {
  .dois {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
  }
}
.bloco {
  padding-top: 1rem;
  border-top: 8px solid var(--acao);
}
.bloco.creditos {
  border-top-color: var(--contorno);
}
.bloco h3 {
  margin-bottom: 0.5rem;
  font: 700 2.1rem / 1 var(--fonte-titulo);
}
.bloco ul {
  padding: 0;
  list-style: none;
}
.bloco li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--linha);
}
.bloco li:first-child {
  border-top: 0;
}
.bloco h4 {
  margin-bottom: 0.25rem;
  font: 700 1.45rem / 1.1 var(--fonte-titulo);
}
.credito-nota {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--contorno);
  border-radius: 4px;
  background: var(--superficie);
  font-size: 0.95rem;
}

.privacidade p {
  max-width: 40rem;
  font-size: 1.2rem;
}

.aviso {
  margin-bottom: 3rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--contorno);
  border-radius: 4px;
  background: var(--superficie);
  font-size: 0.95rem;
}

/* ---- o rodapé ---- */
.rodape {
  border-top: 2px solid var(--contorno);
  padding-block: 2rem 3.5rem;
  font-size: 0.95rem;
}
.rodape-grade {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 48rem) {
  .rodape-grade {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2.5rem;
  }
}
.rodape-titulo {
  margin-bottom: 0.5rem;
  font: 700 1.2rem / 1 var(--fonte-titulo);
}
.rodape ul {
  display: grid;
  gap: 0.4rem;
  padding: 0;
  list-style: none;
}
.rodape p + p {
  margin-top: 0.4rem;
}
.suave {
  color: var(--texto-suave);
}

/* ---- as páginas curtas (404 e os atalhos suporte, privacidade, termos e dados-de-saude) ---- */
.curta {
  padding-block: 3rem 5rem;
}
.curta h1 {
  margin-bottom: 1rem;
  font: 800 clamp(2.4rem, 1.2rem + 5vw, 4rem) / 0.98 var(--fonte-titulo);
  text-wrap: balance;
}
.curta p {
  max-width: 34rem;
  font-size: 1.15rem;
}
.curta p + p {
  margin-top: 0.75rem;
}
.curta .idioma-bloco + .idioma-bloco {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--contorno);
}