/* Skoopi — site oficial
   Tokens: amarelo da marca com preto por cima, branco nas superfícies de leitura. */

@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --amarelo: #FFE600;
  --amarelo-claro: #FFF6A3;
  --preto: #000000;
  --branco: #FFFFFF;
  --badge: #FF3B30;
  --cinza: #5C5C5C;

  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --largura: 1120px;
  --raio: 28px;
  --traco: 3px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--amarelo);
  color: var(--preto);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.55;
}

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

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--preto);
  outline-offset: 3px;
  border-radius: 6px;
}
.escuro :focus-visible { outline-color: var(--amarelo); }

.pular {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--preto);
  color: var(--amarelo);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 10;
}
.pular:focus { top: 12px; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

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

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.marca img:first-child { height: 34px; width: auto; }
.marca img:last-child { height: 20px; width: auto; }

.topo nav a {
  font-weight: 700;
  text-decoration: none;
  padding: 8px 14px;
  border: var(--traco) solid var(--preto);
  border-radius: 999px;
  white-space: nowrap;
}
.topo nav a:hover { background: var(--preto); color: var(--amarelo); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: 40px;
  padding-block: 28px 64px;
}

.hero h1 {
  font-size: clamp(2.75rem, 13vw, 7.5rem);
}

.hero .lide {
  font-size: 1.1875rem;
  max-width: 34ch;
  margin: 20px 0 28px;
}

.em-breve {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: var(--preto);
  color: var(--amarelo);
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  line-height: 1.25;
}
.em-breve svg { flex: none; }

/* Demo da revelação: o card do app */

.demo {
  justify-self: center;
  width: 100%;
  max-width: 360px;
}

.card {
  background: var(--branco);
  border: var(--traco) solid var(--preto);
  border-radius: var(--raio);
  box-shadow: 0 8px 0 var(--preto);
  padding: 22px 22px 24px;
  text-align: center;
}

.card-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
}
.card-topo .badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--badge);
  color: var(--branco);
  font-size: 0.8125rem;
}

.retrato {
  position: relative;
  width: 196px;
  aspect-ratio: 1;
  margin: 20px auto 18px;
  border-radius: 50%;
  overflow: hidden;
  border: var(--traco) solid var(--preto);
  background: #FFC2D1;
}
.retrato svg {
  width: 100%;
  height: 100%;
  filter: blur(16px);
  transform: scale(1.25);
  transition: filter 1100ms cubic-bezier(.2,.7,.2,1), transform 1100ms cubic-bezier(.2,.7,.2,1);
}
.demo[data-visto] .retrato svg {
  filter: blur(0);
  transform: scale(1);
}

.card h2 {
  font-size: 1.625rem;
  line-height: 1.1;
}
.card p { margin: 8px 0 0; color: var(--cinza); }
.card .nome { color: var(--preto); font-weight: 700; }

.acoes {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.botao {
  appearance: none;
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 20px;
  border: var(--traco) solid var(--preto);
  background: var(--preto);
  color: var(--amarelo);
  text-decoration: none;
  display: inline-block;
}
.botao:active { transform: translateY(2px); }
.botao.secundario { background: transparent; color: var(--preto); }
.botao.secundario:hover { background: var(--amarelo-claro); }

.balao {
  display: inline-block;
  margin-top: 16px;
  background: var(--amarelo);
  border: 2px solid var(--preto);
  border-radius: 20px 20px 20px 6px;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--preto);
}

.etapa[hidden] { display: none; }

/* Sem JS a demo fica parada no primeiro passo, sem botões mortos */
html:not(.js) .demo .acoes { display: none; }

.demo-legenda {
  margin: 18px 4px 0;
  font-size: 0.9375rem;
  text-align: center;
}

/* ---------- Como funciona ---------- */

.faixa { padding-block: 72px; }
.faixa.clara { background: var(--branco); }
.faixa.escuro { background: var(--preto); color: var(--branco); }

.faixa > .contido > h2 {
  font-size: clamp(2.25rem, 9vw, 4rem);
  max-width: 14ch;
}
.faixa .intro {
  font-size: 1.1875rem;
  max-width: 42ch;
  margin: 16px 0 0;
}

.passos {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 48px;
  counter-reset: passo;
}

.passo { counter-increment: passo; }

.passo h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.75rem;
}
.passo h3::before {
  content: counter(passo);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amarelo);
  border: var(--traco) solid var(--preto);
  font-size: 1.375rem;
}
.passo p { margin: 10px 0 0; max-width: 38ch; }

/* Mini telas do app dentro de cada passo */
.tela {
  margin-top: 20px;
  background: var(--amarelo-claro);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 150px;
}

.busca {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--branco);
  border: 2px solid var(--preto);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
}
.busca .cursor {
  width: 2px; height: 1.1em; background: var(--preto);
  margin-left: -8px;
}

.linha-perfil {
  display: flex;
  align-items: center;
  gap: 12px;
}
.linha-perfil .mini {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 2px solid var(--preto);
}
.linha-perfil strong { display: block; line-height: 1.2; }
.linha-perfil span { font-size: 0.9375rem; color: var(--cinza); }

.pilula {
  justify-self: start;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.9375rem;
  background: var(--preto);
  color: var(--amarelo);
}
.pilula.apagada { background: transparent; color: var(--cinza); border: 2px solid currentColor; }

.notificacao {
  background: var(--branco);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.9375rem;
  box-shadow: 0 0 0 2px var(--preto);
}
.notificacao img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.notificacao strong { display: block; }

.stories { display: flex; gap: 10px; }
.stories span {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--preto);
  filter: blur(0.5px);
}

/* Blobs tipo blurhash: o que o app mostra antes da revelação */
.bh1 { background: radial-gradient(circle at 35% 40%, #C98A5E, #3B2A22 70%); }
.bh2 { background: radial-gradient(circle at 60% 35%, #E9B08A, #6B4AA8 75%); }
.bh3 { background: radial-gradient(circle at 45% 45%, #F2C9A0, #2E6B5A 72%); }
.bh4 { background: radial-gradient(circle at 50% 30%, #D59B7A, #B8324A 72%); }

.antes-depois {
  display: flex;
  align-items: center;
  gap: 14px;
}
.antes-depois .rosto {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--preto); background: #FFC2D1; flex: none;
}
.antes-depois .rosto svg { width: 100%; height: 100%; }
.antes-depois .rosto.borrado svg { filter: blur(7px); transform: scale(1.25); }
.antes-depois .seta { font-family: var(--display); font-size: 1.75rem; font-weight: 700; }

.conversa { display: grid; gap: 8px; }
.conversa .msg {
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.conversa .msg.dela { background: var(--branco); border: 2px solid var(--preto); border-bottom-left-radius: 6px; justify-self: start; }
.conversa .msg.minha { background: var(--preto); color: var(--amarelo); border-bottom-right-radius: 6px; justify-self: end; }

/* ---------- Segredo ---------- */

.promessas {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
.promessas h3 {
  font-size: 1.5rem;
  color: var(--amarelo);
}
.promessas p { margin: 8px 0 0; max-width: 40ch; color: #E8E8E8; }
.promessas q { font-style: normal; color: var(--branco); font-weight: 600; }

/* ---------- Fechamento ---------- */

.fechamento { padding-block: 80px 56px; }
.fechamento h2 {
  font-size: clamp(2.5rem, 11vw, 5rem);
  max-width: 12ch;
}
.fechamento .em-breve { margin-top: 28px; }

.idade {
  margin-top: 56px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr;
  align-items: start;
  max-width: 560px;
}
.idade .selo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: var(--traco) solid var(--preto);
  border-radius: 50%;
}
.idade p { margin: 0; }

/* ---------- Rodapé ---------- */

.rodape {
  border-top: var(--traco) solid var(--preto);
  padding-block: 32px 40px;
  display: grid;
  gap: 20px;
  font-size: 0.9375rem;
}
.rodape ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-weight: 700;
}
.rodape p { margin: 0; }

/* ---------- Páginas legais ---------- */

.pagina-legal { background: var(--branco); }
.pagina-legal .cabeca { background: var(--amarelo); }
.pagina-legal .cabeca .conteudo-titulo { padding-block: 16px 40px; }
.pagina-legal h1 { font-size: clamp(2.5rem, 10vw, 4.25rem); }
.pagina-legal .atualizado { margin: 12px 0 0; font-weight: 600; }

.rascunho {
  background: var(--preto);
  color: var(--amarelo);
  font-weight: 800;
  text-align: center;
  padding: 12px var(--gutter);
  font-size: 1rem;
  line-height: 1.3;
}
.rascunho span { display: block; font-weight: 500; color: var(--branco); font-size: 0.875rem; margin-top: 2px; }

.texto-legal {
  max-width: 70ch;
  padding-block: 40px 72px;
}
.texto-legal h2 {
  font-size: 1.75rem;
  margin: 48px 0 12px;
  scroll-margin-top: 20px;
}
.texto-legal h3 {
  font-family: var(--texto);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 28px 0 8px;
}
.texto-legal p, .texto-legal li { line-height: 1.65; }
.texto-legal ul, .texto-legal ol { padding-left: 1.3em; }
.texto-legal li + li { margin-top: 6px; }

.indice {
  background: var(--amarelo-claro);
  border-radius: 20px;
  padding: 20px 24px;
}
.indice strong { font-family: var(--display); font-size: 1.25rem; }
.indice ol { margin: 10px 0 0; }

.aviso {
  border-left: 6px solid var(--amarelo);
  background: #FAFAFA;
  padding: 14px 18px;
  border-radius: 0 14px 14px 0;
}

.revisar {
  background: var(--amarelo);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

table.dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: 12px;
}
table.dados th, table.dados td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid #DDD;
}
table.dados th { font-weight: 800; border-bottom: 2px solid var(--preto); }
.rolagem { overflow-x: auto; }

.pagina-legal .rodape-legal { background: var(--amarelo); }

/* ---------- Telas maiores ---------- */

@media (min-width: 760px) {
  :root { --gutter: 40px; }

  .hero {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    padding-block: 48px 96px;
  }
  .hero h1 { font-size: clamp(4.5rem, 9vw, 8rem); }
  .demo { justify-self: end; }

  .passos { grid-template-columns: repeat(2, 1fr); gap: 56px 48px; }
  .promessas { grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
  .faixa { padding-block: 104px; }
  .rodape { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 1080px) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .passo h3 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .retrato svg { transition: none; }
}

/* Itens de grid não podem crescer além da coluna por causa de títulos longos */
.hero > *, .passos > *, .promessas > * { min-width: 0; }

/* Páginas legais: uma coluna só, título e texto alinhados */
.pagina-legal .contido { max-width: calc(720px + 2 * var(--gutter)); }
.pagina-legal .texto-legal { max-width: calc(720px + 2 * var(--gutter)); }
.rascunho { margin: 0; }

/* Barra branca do cabeçalho, de ponta a ponta */
.barra {
  background: var(--branco);
  border-bottom: var(--traco) solid var(--preto);
}
.barra .topo { padding-block: 14px; }
.pagina-legal .cabeca .conteudo-titulo { padding-top: 36px; }