/*
 * A vitrine (#198): o panfleto do me-lembra para quem ainda não entrou. Só tokens de tokens.css: o claro, o escuro
 * e o céu de cada hora vêm de lá. A capa é o céu da hora de quem visita (as regras de .topo em ceu.css).
 * O que se mexe (a frase que acende e os botões) só roda com `prefers-reduced-motion: no-preference`.
 */
.vitrine {
  --miolo: 75rem;
  --margem: max(1rem, calc((100% - var(--miolo)) / 2));
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --sombra-solta: 0 1.5rem 3rem -1.5rem rgba(9, 12, 38, 0.55);
  overflow-x: clip;
}
.vitrine main {
  padding: 0;
}
.vitrine main > * + * {
  margin-top: 0;
}
/* Os resets pesam uma classe (.vitrine :where): vencem o p do base.css e perdem para as classes abaixo. */
.vitrine :where(p, h1, h2, h3) {
  margin: 0;
  max-width: none;
}
.vitrine :where(h1, h2, h3) {
  text-wrap: balance;
}
.vitrine :where(p) {
  text-wrap: pretty;
}
.vitrine :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vitrine__miolo {
  max-width: var(--miolo);
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}
.vitrine__miolo--estreito {
  max-width: 55rem;
}

/* ---------- Os botões ---------- */
.vitrine__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1.5rem;
  border-radius: var(--raio-botao);
  background: var(--agora-botao, var(--primario));
  color: var(--agora-sobre-botao, var(--sobre-primario));
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-decoration: none;
}
.vitrine__botao--pequeno {
  min-height: var(--alvo-minimo);
  padding-inline: 1.25rem;
  font-size: 0.875rem;
}
.vitrine__botao--vidro {
  background: var(--agora-fundo);
  color: var(--agora-texto);
}
.vitrine__botao--noite {
  background: var(--ceu-noite-cartao-botao);
  color: var(--ceu-noite-topo);
}
.vitrine__botao--contorno {
  background: none;
  color: var(--ceu-noite-texto);
  box-shadow: inset 0 0 0 1px currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .vitrine__botao {
    transition: transform 0.5s var(--curva), filter 0.5s var(--curva);
  }
  .vitrine__botao:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
  }
  .vitrine__botao:active {
    transform: scale(0.98);
  }
}

/* ---------- A capa: o céu, a barra e a chamada ---------- */
.vitrine__capa {
  display: block;
  min-height: 0;
  padding: 0 0 6rem;
}
.vitrine__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 5rem;
}
.vitrine__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  color: inherit;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.vitrine__links {
  display: flex;
  gap: 1.5rem;
}
.vitrine__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  color: inherit;
  text-decoration: none;
}
.vitrine__links a:hover {
  text-decoration: underline;
}
.vitrine__heroi {
  display: grid;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}
.vitrine__chamada {
  max-width: 42.5rem;
}
.vitrine__sobretitulo,
.vitrine__rotulo {
  font-family: var(--fonte-titulo);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vitrine__rotulo {
  color: var(--cor-roxo-texto);
}
.vitrine__agora {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.vitrine__titulo {
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  letter-spacing: -0.02em;
}
.vitrine__subtitulo {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.vitrine__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.vitrine__garantia {
  margin-top: 1.5rem;
  font-size: 1rem;
}

/* O app de exemplo: o Hoje de dia, feito com as mesmas cores do produto (não é print). */
.vitrine__vitrine-do-app {
  position: relative;
  justify-self: center;
  padding-bottom: 2rem;
}
.fone {
  width: 18rem;
  padding: 0.5rem;
  border-radius: 2.5rem;
  background: #14121f;
  box-shadow: var(--sombra-solta);
}
.fone__tela {
  overflow: hidden;
  border-radius: 2rem;
  background: var(--fundo);
  color: var(--texto);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.fone__ceu {
  padding: 2rem 1rem 1rem;
  background: linear-gradient(180deg, var(--ceu-dia-topo), var(--ceu-dia-meio) 60%, var(--ceu-dia-baixo));
  color: var(--ceu-dia-texto);
}
.fone__data {
  font-size: 0.75rem;
  line-height: 1rem;
}
.fone__saudacao {
  margin-top: 0.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
}
.fone__agora {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--ceu-dia-cartao);
  color: var(--ceu-dia-cartao-texto);
}
.fone__agora-texto {
  flex: 1;
  min-width: 0;
}
.fone__agora-texto small,
.fone__bloco small {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--texto-suave);
}
.fone__agora small {
  color: var(--ceu-dia-cartao-suave);
}
.fone__agora strong,
.fone__bloco strong {
  display: block;
}
.fone__tempo {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--ceu-dia-cartao-link);
  text-align: right;
}
.fone__icone {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--c-fundo);
  color: var(--c-texto);
}
.fone__dia {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0.75rem 1.5rem;
}
.fone__titulo-dia {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 500;
}
.fone__titulo-dia small {
  font-family: var(--fonte-texto);
  font-size: 0.75rem;
  color: var(--texto-suave);
}
.fone__bloco {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 1rem;
  background: var(--cartao);
}
.fone__bloco > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.fone__bloco--feito {
  opacity: 0.75;
}
.fone__bloco--feito strong {
  text-decoration: line-through;
}
.fone__bloco--insiste {
  box-shadow: inset 0 0 0 2px var(--c);
}
.fone__bloco .fone__ok {
  color: var(--cor-verde-texto);
}
.fone__bloco .fone__insiste {
  color: var(--c-texto);
  font-weight: 700;
}
.fone__hora {
  font-size: 0.75rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* A notificação: a do celular de verdade, com o texto que o servidor manda. */
.noti {
  max-width: 19rem;
  padding: 1rem;
  border-radius: 1.5rem;
  background: var(--cartao);
  color: var(--texto);
  box-shadow: var(--sombra-solta);
  font-size: 1rem;
  line-height: 1.5rem;
}
.vitrine__vitrine-do-app .noti {
  position: absolute;
  left: -1.5rem;
  bottom: 0;
  width: 17rem;
}
.noti__app {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--texto-suave);
}
.noti__app .icone {
  width: 1rem;
  height: 1rem;
  color: var(--primario);
}
.noti__titulo {
  margin-top: 0.25rem;
  font-weight: 700;
}
.noti__corpo {
  color: var(--texto-suave);
}
.noti__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.noti__botoes span {
  padding: 0.25rem 0.75rem;
  border-radius: var(--raio-botao);
  background: var(--cor-cinza-fundo);
  color: var(--cor-cinza-texto);
  font-size: 0.875rem;
  font-weight: 700;
}
.noti__botoes .noti__sim {
  background: var(--primario);
  color: var(--sobre-primario);
}

/* ---------- As seções ---------- */
.vitrine__secao {
  padding-block: 4rem;
}
.vitrine__secao--clara {
  background: var(--cartao);
}
.vitrine__h2 {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: -0.01em;
  max-width: 47.5rem;
}
.vitrine__texto {
  margin-top: 1rem;
  max-width: 42.5rem;
  color: var(--texto-suave);
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.vitrine__nota {
  margin-top: 1.5rem;
  color: var(--texto-suave);
}
.vitrine__dupla {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
.vitrine__dupla--centro {
  margin-top: 0;
  align-items: center;
}
.vitrine__grade {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
.cartao-v {
  padding: 2rem;
  border-radius: 1.5rem;
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.vitrine__secao--clara .cartao-v {
  background: var(--fundo);
  box-shadow: none;
}
.cartao-v--destaque {
  box-shadow: inset 0 0 0 2px var(--cor-roxo-fundo), var(--sombra-cartao);
}
.cartao-v h3 {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.cartao-v p {
  margin-top: 0.5rem;
  color: var(--texto-suave);
}
.cartao-v__rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 500;
}
.cartao-v .cartao-v__rotulo {
  margin-top: 0;
  color: var(--texto-suave);
}
.cartao-v .cartao-v__rotulo--marca {
  color: var(--cor-roxo-texto);
}
.ladrilho {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--c-fundo);
  color: var(--c-texto);
}
.ladrilho .icone {
  width: 1.5rem;
  height: 1.5rem;
}
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--raio-botao);
  background: var(--c-fundo);
  color: var(--c-texto);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  white-space: nowrap;
}
.linha-v {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.cartao-v .linha-v {
  margin-top: 1.5rem;
}
.linha-v__vazio {
  flex: 1 1 3rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--borda) 0 0.5rem, transparent 0.5rem 1rem);
}
.linha-v__fim {
  color: var(--texto-suave);
}
.lista-v {
  display: grid;
  gap: 1.5rem;
}
.lista-v li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--texto-suave);
}
.lista-v strong {
  display: block;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-weight: 600;
}
.vitrine__instalar {
  margin-top: 1.5rem;
}

/* A frase que acende palavra por palavra (vitrine.js). Sem JS, ou sem movimento, ela já vem acesa. */
.vitrine__frase {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: -0.01em;
  max-width: 61.25rem;
  text-wrap: balance;
}
.vitrine__frase .palavra {
  color: color-mix(in srgb, var(--texto) 30%, transparent);
  transition: color 0.8s var(--curva);
}
.vitrine__frase .palavra.acesa {
  color: var(--texto);
}

/* ---------- Como funciona: o dia, cada hora no seu céu ---------- */
.dia__abertura {
  padding-block: 4rem 2rem;
}
.hora {
  padding-block: 5rem;
}
.hora__miolo {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.hora__texto {
  max-width: 32.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.hora__relogio {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 3.75rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hora__titulo {
  margin-block: 1.5rem 1rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.hora--amanhecer {
  background: linear-gradient(180deg, var(--fundo) 0%, var(--ceu-amanhecer-baixo) 25%, var(--ceu-amanhecer-meio) 100%);
  color: var(--ceu-amanhecer-texto);
}
.hora--dia {
  background: linear-gradient(180deg, var(--ceu-amanhecer-meio) 0%, var(--ceu-dia-baixo) 30%, var(--ceu-dia-meio) 100%);
  color: var(--ceu-dia-texto);
}
.hora--tarde {
  background: linear-gradient(180deg, var(--ceu-dia-meio) 0%, var(--ceu-dia-topo) 100%);
  color: var(--ceu-dia-texto);
}
.hora--entardecer {
  background: linear-gradient(
    180deg,
    var(--ceu-dia-topo) 0%,
    var(--ceu-entardecer-baixo) 12%,
    var(--ceu-entardecer-meio) 35%,
    var(--ceu-entardecer-topo) 100%
  );
  color: var(--ceu-entardecer-texto);
}
.hora--noite {
  /* O pé se funde com o fundo da página, como o céu do topo: no claro, sem o corte do azul-marinho na lavanda. */
  background: linear-gradient(
    180deg,
    var(--ceu-entardecer-topo) 0%,
    var(--ceu-noite-topo) 30%,
    var(--ceu-madrugada-topo) 70%,
    var(--fundo) 100%
  );
  color: var(--ceu-noite-texto);
  /* O pé alto é onde a noite clareia até o fundo: nenhum texto branco fica em cima do claro. */
  padding-bottom: 12rem;
}
.pilha {
  display: grid;
  gap: 0.75rem;
}
.noti--velha {
  opacity: 0.6;
  transform: scale(0.94);
  transform-origin: left;
}
.noti--meia {
  opacity: 0.85;
  transform: scale(0.97);
  transform-origin: left;
}
.historico-v ul {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.historico-v li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.historico-v li > span:nth-child(2) {
  flex: 1 1 8rem;
}
.historico-v strong,
.historico-v small {
  display: block;
}
.historico-v small {
  color: var(--texto-suave);
  font-size: 0.875rem;
}
.hora__lua {
  justify-self: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  box-shadow: inset 2rem -0.75rem 0 0 #f1eeff;
  filter: drop-shadow(0 0 1.5rem rgba(220, 220, 255, 0.45));
}

/* ---------- As perguntas ---------- */
.perguntas {
  display: grid;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.perguntas details {
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.perguntas summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: var(--alvo-minimo);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
  cursor: pointer;
  list-style: none;
}
.perguntas summary::-webkit-details-marker {
  display: none;
}
.perguntas summary .icone {
  color: var(--cor-roxo-texto);
}
.perguntas details[open] summary .icone {
  transform: rotate(45deg);
}
.perguntas details p {
  margin-top: 0.75rem;
  color: var(--texto-suave);
}
@media (prefers-reduced-motion: no-preference) {
  .perguntas summary .icone {
    transition: transform 0.5s var(--curva);
  }
}

/* ---------- O fim: o céu de noite ---------- */
.vitrine__fim {
  padding-block: 6rem;
  background: linear-gradient(180deg, var(--ceu-noite-topo) 0%, var(--ceu-noite-meio) 70%, var(--ceu-noite-baixo) 100%);
  color: var(--ceu-noite-texto);
  text-align: center;
}
.vitrine__fim .vitrine__h2 {
  margin-inline: auto;
}
.vitrine__fim .vitrine__texto {
  margin-inline: auto;
  color: inherit;
}
.vitrine__fim .vitrine__acoes {
  justify-content: center;
}
.vitrine__pe {
  padding-block: 2rem;
  color: var(--texto-suave);
}
.vitrine__pe .vitrine__miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.vitrine__pe .vitrine__marca {
  margin: 0;
  color: var(--texto);
}
.vitrine__pe ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.vitrine__pe a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
}

/* ---------- Do celular para cima ---------- */
/* A capa é alta, e o sol ou a lua (em % da altura, como no app) cairia atrás do título: aqui o astro fica na faixa
   da barra, no meio. Com a capa empilhada, os links da barra saem (a página rola até cada parte). */
.vitrine .vitrine__capa[data-faixa] {
  --sol-x: 50%;
  --sol-y: 0.75rem;
}
.vitrine__capa .ceu__lua {
  left: 50%;
  top: 1rem;
}
@media (max-width: 63.99rem) {
  .vitrine__links {
    display: none;
  }
}
@media (min-width: 48rem) {
  .vitrine__miolo {
    padding-inline: 2.5rem;
  }
  .vitrine__titulo {
    font-size: 3rem;
    line-height: 1;
  }
  .vitrine__secao {
    padding-block: 6rem;
  }
  .vitrine__h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .vitrine__frase {
    font-size: 3rem;
    line-height: 1.15;
  }
  .vitrine__dupla,
  .hora__miolo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vitrine__dupla--centro {
    gap: 3rem;
  }
  .vitrine__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hora {
    padding-block: 7.5rem;
  }
  .hora--noite {
    padding-bottom: 15rem;
  }
  .hora__relogio {
    font-size: 6rem;
  }
  .hora:nth-child(even of .hora) .hora__texto {
    order: 2;
  }
}
@media (min-width: 64rem) {
  .vitrine__heroi {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .vitrine__titulo {
    font-size: 3.75rem;
    line-height: 1;
  }
  .vitrine__subtitulo {
    font-size: 1.25rem;
    line-height: 2rem;
  }
  .vitrine__h2 {
    font-size: 3rem;
    line-height: 1.1;
  }
  .vitrine__frase {
    font-size: 3.75rem;
    line-height: 1.1;
  }
  .vitrine__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fone {
    width: 20rem;
  }
}
@media (min-width: 80rem) {
  .vitrine__titulo {
    font-size: 4.5rem;
  }
}