/* Página inicial: as cores e letras de estilo.css (D20 e D22), com faixas de cor alternando com o fundo claro, como no Lumescroll. Só modo claro. */
:root {
  --nevoa: #bfe3ea;
  --escuro: #0b3a44;
  --turquesa-claro: #8fdbe7;
  --topo-altura: 4.25rem;
  --borda: rgba(11, 58, 68, 0.1);
  --sombra-tela: 0 30px 60px -28px rgba(11, 58, 68, 0.55);
  --entra: cubic-bezier(0, 0, 0.2, 1);
  --rapido: 200ms;
  --medio: 280ms;
  --lento: 900ms;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body.inicio { overflow-x: hidden; }

/* Botões, com a borda de baixo do botão do app (D39) */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--fundo);
  box-shadow: 0 4px 0 var(--beirada);
  font: 700 1.0625rem/1.25 var(--texto);
  text-decoration: none;
  transition: transform var(--rapido) var(--entra);
}
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--beirada); }
.botao-pequeno { min-height: 2.5rem; padding: 0 1.125rem; font-size: 0.9375rem; box-shadow: none; }
.botao-claro { background: var(--fundo); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--borda); }
.botao-claro:active { box-shadow: inset 0 0 0 1.5px var(--borda); }
.maca { width: 1.0625rem; height: 1.25rem; fill: currentColor; margin-top: -2px; }

.rotulo {
  margin: 0 0 0.5rem;
  color: var(--apagado);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Topo fixo */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(217, 242, 246, 0.85);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medio) var(--entra);
}
.topo.rolou { border-bottom-color: var(--borda); }
.topo-dentro, .rodape-dentro, .hero-dentro, .secao, .final, .manifesto {
  max-width: 72rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.topo-dentro { display: flex; align-items: center; gap: 1.5rem; min-height: var(--topo-altura); }
.topo-links { display: flex; gap: 1.5rem; margin-left: auto; }
.topo-links a { color: var(--apagado); text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.topo-links a:hover { color: var(--tinta); }
@media (max-width: 860px) {
  .topo-links { display: none; }
  .topo-dentro .botao { margin-left: auto; }
}

.hero h1 { font-size: clamp(2.375rem, 7vw, 4.25rem); line-height: 1.22; margin: 0 0 1.25rem; }
.marcado { background: linear-gradient(transparent 60%, var(--trilho) 60%); padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-sub { font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--apagado); max-width: 36rem; margin: 0 0 1.75rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 9rem));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.numeros li {
  margin: 0;
  background: var(--fundo);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 0.75rem 1rem;
  color: var(--apagado);
  font-size: 0.9375rem;
}
.numeros b { display: block; font: 700 1.75rem/1.25 var(--titulo); color: var(--tinta); }

/* Um print da loja sem o título de cima: fica a moldura turquesa com o iPhone dentro */
.tela {
  aspect-ratio: 644 / 1180;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1.75rem;
  background: var(--forma);
}
.tela img { display: block; width: 100%; height: auto; margin-top: -33%; }

/* Topo: duas colunas, com a luva e tarefas em volta (D98) */
.hero { padding-block: 3.5rem 2rem; }
.hero .hero-dentro { display: grid; gap: 3rem; align-items: center; }
.luva { position: relative; width: min(28rem, 100%); aspect-ratio: 1; justify-self: center; }
.luva-logo { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 3rem; box-shadow: var(--sombra-tela); }
.mini-tarefa {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  width: 15.5rem;
  max-width: 64%;
  padding: 0.75rem 0.875rem;
  background: var(--fundo);
  border-radius: 1rem;
  box-shadow: var(--sombra-tela);
  animation: boia 6s ease-in-out infinite alternate;
}
.mini-tarefa p { margin: 0; font-size: 0.8125rem; color: var(--apagado); line-height: 1.35; min-width: 0; }
.mini-tarefa b { display: block; color: var(--tinta); font-size: 0.9375rem; }
.mini-tarefa .barra { grid-column: 1 / -1; margin: 0; height: 0.5rem; }
.mt-1 { left: -4%; top: 6%; }
.mt-2 { right: -6%; top: 40%; animation-delay: -2s; }
.mt-3 { left: 0; bottom: 4%; animation-delay: -4s; }
.pilula { padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--trilho); color: var(--tinta); font-weight: 700; font-size: 0.875rem; }
@keyframes boia { to { transform: translateY(-10px); } }

/* Manifesto: cada palavra acende ao rolar */
.manifesto { padding-block: 5rem 3rem; text-align: center; max-width: 54rem; }
.manifesto-texto { font: 700 clamp(1.625rem, 4vw, 2.5rem)/1.3 var(--titulo); color: var(--tinta); margin: 0 auto 1.25rem; text-wrap: balance; }
.js .manifesto-texto .p { color: var(--linha); transition: color var(--medio) var(--entra); }
.js .manifesto-texto .p.acesa { color: var(--tinta); }
.manifesto-resposta { display: inline-block; margin: 0; padding: 0.75rem 1.25rem; border-radius: var(--raio); background: var(--trilho); font-weight: 700; font-size: 1.125rem; }

/* Seções e faixas */
.secao { padding-block: 5rem; }
.faixa .secao { padding-block: 5rem; }
.faixa-turquesa { background: var(--forma); }
.faixa-turquesa .titulo-duplo span { color: var(--tinta); }
.faixa-escura { background: var(--escuro); color: var(--nevoa); }
.faixa-escura .titulo-duplo { color: var(--fundo); }
.faixa-escura .titulo-duplo span { color: var(--nevoa); }
.faixa-limao { background: var(--trilho); }
.faixa-limao .titulo-duplo span { color: var(--tinta); }
.faixa-cinza { background: var(--sup); }
.secao-estreita { max-width: 48rem; }

.titulo-duplo { font-size: clamp(1.875rem, 4.5vw, 2.75rem); line-height: 1.22; margin: 0 0 2.5rem; }
.titulo-duplo span { display: block; margin-top: 0.5rem; font: 400 clamp(1.0625rem, 2vw, 1.25rem)/1.5 var(--texto); color: var(--apagado); }
.duas-colunas .titulo-duplo { margin-bottom: 1.5rem; }

.duas-colunas { display: grid; gap: 3rem; align-items: center; }
.duas-colunas > * { min-width: 0; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; }
.checks li { position: relative; margin: 0; padding-left: 2rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--trilho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230b3a44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.faixa-escura .checks li { color: var(--fundo); }
.checks-claro li::before { background-color: var(--forma); }

/* Como funciona */
.passos { display: grid; gap: 2.5rem; list-style: none; padding: 0; margin: 0; }
.passo { position: relative; margin: 0; }
.passo .tela { width: min(17rem, 80%); margin: 0 auto 1.5rem; background: var(--turquesa-claro); box-shadow: var(--sombra-tela); }
.passo-n { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--tinta); color: var(--fundo); font: 700 1.125rem/1 var(--titulo); }
.passo h3 { font-size: 1.375rem; margin: 0.75rem 0 0.5rem; }
.passo p { margin: 0; }

/* A barra de sujeira tem comprimento, não só cor (CLAUDE.md) */
.barra { display: block; height: 0.75rem; margin: 1rem 0 0.25rem; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.barra > span { display: block; height: 100%; width: calc(var(--cheia, 0) * 100%); border-radius: inherit; background: var(--barra); transition: width var(--medio) var(--entra); }

.simulador { margin: 0; padding: 1.5rem; }
.simulador-rotulo { display: block; color: var(--apagado); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.simulador-dias { margin: 0.25rem 0 0.75rem; color: var(--apagado); }
.simulador-dias b { font: 700 2.5rem/1.25 var(--titulo); color: var(--tinta); margin-right: 0.25rem; font-variant-numeric: tabular-nums; }
.simulador input[type="range"] { width: 100%; accent-color: var(--barra); margin: 0 0 1rem; }
.sim-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.sim-lista li { margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--linha); }
.sim-lista p { margin: 0; color: var(--apagado); font-size: 0.875rem; }
.sim-lista b { display: block; color: var(--tinta); font-size: 1rem; }
.sim-lista .barra { margin: 0.5rem 0 0; height: 0.625rem; }

/* Dia, semana e mês */
.ritmos { display: grid; gap: 1rem; }
.ritmo { background: var(--fundo); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem; }
.ritmo h3 { font-size: 1.375rem; margin: 0 0 0.5rem; }
.ritmo p:last-child { margin: 0; color: var(--apagado); }
.nota { margin: 2rem auto 0; max-width: 42rem; text-align: center; color: var(--apagado); }

/* Dia de faxina */
.tela-faxina { width: min(20rem, 80%); justify-self: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }

/* Toque atrás: cartão branco com sombra, no jeito das telas do app (D100) */
.toque { margin: 0; padding: 2rem 1.75rem; }
.toque .titulo-duplo { margin-bottom: 1.25rem; }

/* O que mais tem */
.grade { display: grid; gap: 1rem; }
.bloco { background: var(--fundo); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem; }
.bloco h3 { font-size: 1.25rem; margin: 1.25rem 0 0.375rem; }
.bloco p { margin: 0; color: var(--apagado); }
.comodos, .tipos { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.comodos li, .tipos li { margin: 0; padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); font-weight: 600; font-size: 0.9375rem; }
.tipos li:nth-child(1) { background: var(--forma); box-shadow: none; }
.roleta { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: conic-gradient(var(--forma) 0 25%, var(--trilho) 0 50%, var(--forma) 0 75%, var(--trilho) 0); box-shadow: inset 0 0 0 4px var(--fundo), 0 0 0 2px var(--linha); }
.roleta span { position: absolute; left: 50%; top: -0.5rem; width: 0; height: 0; margin-left: -0.5rem; border: 0.5rem solid transparent; border-top: 0.75rem solid var(--tinta); }
.nivel b { font: 700 1.5rem/1.25 var(--titulo); }
.nivel .barra { margin-top: 0.5rem; }
.nova span { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; background: var(--sup); color: var(--link); font-weight: 700; }

/* Perguntas */
.perguntas { display: grid; gap: 0.75rem; }
.perguntas details { background: var(--fundo); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.25rem; }
.perguntas summary { cursor: pointer; font-weight: 700; }
.perguntas details p { margin: 0.75rem 0 0; color: var(--apagado); }
.mais-ajuda { margin: 2rem 0 0; color: var(--apagado); }

/* Chamada final */
.final { padding-block: 1rem 5rem; }
.final-cartao { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 3rem 1.5rem; border-radius: 2rem; background: var(--forma); }
.final-cartao img { width: 6rem; height: 6rem; border-radius: 1.5rem; box-shadow: var(--sombra-tela); }
.final-cartao h2 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.22; margin: 0; max-width: 36rem; }
.final-cartao p { margin: 0 0 0.5rem; }

/* Rodapé */
.rodape-site { border-top: 1px solid var(--linha); background: var(--fundo); }
.rodape-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 2rem; color: var(--apagado); font-size: 0.9375rem; }
.rodape-dentro nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.rodape-dentro p { margin: 0 0 0 auto; }
.rodape-dentro .marca img { width: 2rem; height: 2rem; }

@media (min-width: 48rem) {
  .hero .hero-dentro { grid-template-columns: 1.1fr 1fr; }
  .passos, .ritmos { grid-template-columns: repeat(3, 1fr); }
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: 4rem; }
  #faxina .duas-colunas { grid-template-columns: 0.8fr 1.2fr; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .bloco-largo { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .grade { grid-template-columns: repeat(3, 1fr); }
  .bloco-largo { grid-column: span 2; }
}

/* Entrada ao rolar */
.js .revela { opacity: 0; transform: translateY(16px); transition: opacity var(--medio) var(--entra), transform var(--medio) var(--entra); }
.js .revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  .mini-tarefa { animation: none; }
}