/* ==========================================================================
   Dinno — landing de conversão
   ==========================================================================

   A MARCA INTEIRA MORA NO :root ABAIXO.

   "Dinno", o mascote e esta paleta são TEMPORÁRIOS: um rebranding total está
   previsto. Por isso não existe um único hex solto no meio das regras — tudo
   passa por var(). Trocar a identidade é reescrever um bloco, não caçar cor
   pelo arquivo.

   As cores não foram inventadas: são os tokens reais do app
   (`app/globals.css`, tema escuro) cruzados com as cores dominantes amostradas
   das próprias imagens do mascote — azul #0090e0, lima #90ff50, roxo #7050ff.
   A landing é mais vibrante que o app, mas é o mesmo produto.
   ========================================================================== */

:root {
  /* --- Paleta base (tema escuro do app) --------------------------------- */
  --cor-fundo: #140f26;
  --cor-fundo-alt: #1a1233;
  --cor-superficie: #211a38;
  --cor-superficie-alta: #2c2350;
  --cor-superficie-funda: #0e0a1c;
  --cor-texto: #f2edff;
  --cor-texto-suave: #cbc2e4;
  --cor-contorno: #3d3363;
  --cor-sombra-dura: #0a0716;

  /* --- Acento da marca (roxo) -------------------------------------------
     `-tinta` é a cor que vai EM CIMA do preenchimento saturado; `-texto` é o
     roxo usado como texto solto sobre o fundo escuro, que precisa ser mais
     claro para passar AA. Mesma separação do app. */
  --cor-acento: #9a6bff;
  --cor-acento-tinta: #1e0b45;
  --cor-acento-sombra: #5c33c4;
  --cor-acento-texto: #d0bcff;

  /* --- Starcoin (dourado) ----------------------------------------------- */
  --cor-moeda: #ffc93c;
  --cor-moeda-tinta: #2a1f00;
  --cor-moeda-sombra: #c4900a;

  /* --- Lima do letreiro e dos espinhos do mascote ------------------------ */
  --cor-lima: #a6f03c;
  --cor-lima-tinta: #14240a;
  --cor-lima-sombra: #6daf15;

  /* --- Ciano do traje / órbita ------------------------------------------- */
  --cor-ciano: #35e0e8;
  --cor-sucesso: #6fe9a9;

  /* --- Forma: peça de plástico injetado, gorda e com espessura ----------- */
  --raio: 0.75rem;
  --raio-lg: 1rem;
  --raio-xl: 1.5rem;
  --raio-2xl: 2rem;
  --raio-pill: 9999px;
  --borda: 2px;
  --sombra-peca: 0 5px 0 0 var(--cor-sombra-dura);
  --sombra-peca-alta: 0 8px 0 0 var(--cor-sombra-dura), 0 16px 32px -8px rgb(0 0 0 / 0.45);

  /* --- Tipografia -------------------------------------------------------- */
  --fonte: "Baloo 2", ui-rounded, "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --peso-normal: 500;
  --peso-forte: 700;
  --peso-titulo: 800;

  /* --- Ritmo ------------------------------------------------------------- */
  --esp-xs: 0.25rem;
  --esp-sm: 0.5rem;
  --esp-md: 1rem;
  --esp-lg: 1.5rem;
  --esp-xl: 2.5rem;
  --esp-2xl: 4rem;
  --gutter: 1.25rem;
  --largura-max: 68rem;

  /* --- Alvo de toque mínimo (WCAG 2.5.5) --------------------------------- */
  --toque: 44px;

  color-scheme: dark;
}

/* ==========================================================================
   Reset curto
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* O cabeçalho é sticky: sem isto a âncora encosta o título embaixo dele. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--peso-titulo);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--cor-acento-texto);
}

/* Foco visível em TUDO que recebe foco, nunca só no hover. */
:focus-visible {
  outline: 3px solid var(--cor-texto);
  outline-offset: 3px;
  border-radius: var(--raio-xs, 4px);
}

/* ==========================================================================
   Esqueleto
   ========================================================================== */

.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  /* Gutter lateral de no mínimo 20px em qualquer largura. */
  padding-inline: var(--gutter);
}

.secao {
  padding-block: var(--esp-xl);
}

.secao--alt {
  background: var(--cor-fundo-alt);
  border-block: var(--borda) solid var(--cor-contorno);
}

.secao__titulo {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  margin-bottom: var(--esp-sm);
}

.secao__intro {
  color: var(--cor-texto-suave);
  font-size: 1.0625rem;
  max-width: 44rem;
  margin-bottom: var(--esp-lg);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-xs);
  font-size: 0.8125rem;
  font-weight: var(--peso-forte);
  color: var(--cor-lima);
  background: color-mix(in srgb, var(--cor-lima) 14%, transparent);
  border: var(--borda) solid color-mix(in srgb, var(--cor-lima) 45%, transparent);
  border-radius: var(--raio-pill);
  padding: 0.25rem 0.75rem;
  margin-bottom: var(--esp-md);
}

/* ==========================================================================
   Botões — peça sólida que afunda ao apertar (mesma mecânica do app)
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-sm);
  min-height: var(--toque);
  min-width: var(--toque);
  padding: 0.625rem 1.5rem;
  border-radius: var(--raio-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--peso-forte);
  text-decoration: none;
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.botao:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 currentColor;
}

.botao--principal {
  background: var(--cor-lima);
  color: var(--cor-lima-tinta);
  border: var(--borda) solid var(--cor-lima-sombra);
  box-shadow: 0 4px 0 0 var(--cor-lima-sombra);
}

.botao--principal:active {
  box-shadow: 0 0 0 0 var(--cor-lima-sombra);
}

.botao--secundario {
  background: transparent;
  color: var(--cor-acento-texto);
  border: var(--borda) solid var(--cor-acento-texto);
  box-shadow: 0 4px 0 0 var(--cor-acento-sombra);
}

.botao--secundario:active {
  box-shadow: 0 0 0 0 var(--cor-acento-sombra);
}

.botao--grande {
  font-size: 1.125rem;
  padding: 0.875rem 2rem;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

/* Fundo OPACO, não translúcido.
   A barra é sticky e não usa `backdrop-filter` (nem o app usa). Com 94% de
   opacidade, a linha de texto que passava por baixo aparecia atrás do
   logotipo e do CTA. Mesma regra do drawer do app: o que fica por cima tem de
   ganhar do que está embaixo. */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cor-fundo);
  border-bottom: var(--borda) solid var(--cor-contorno);
  /* A barra encosta no topo: em telas com entalhe, o recorte come o conteúdo. */
  padding-top: env(safe-area-inset-top, 0px);
}

.cabecalho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
  min-height: 4rem;
  padding-block: var(--esp-sm);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  min-height: var(--toque);
  text-decoration: none;
  color: var(--cor-texto);
  font-size: 1.375rem;
  font-weight: var(--peso-titulo);
  letter-spacing: -0.02em;
}

.marca img {
  width: 40px;
  height: 34px;
  object-fit: contain;
}

/* ==========================================================================
   Fundo cósmico — gradientes + estrelas, tudo em CSS. Nenhuma imagem extra.
   ========================================================================== */

.ceu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ceu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(48rem 34rem at 15% 0%, color-mix(in srgb, var(--cor-acento) 26%, transparent), transparent 65%),
    radial-gradient(38rem 32rem at 88% 22%, color-mix(in srgb, var(--cor-ciano) 16%, transparent), transparent 62%),
    radial-gradient(42rem 30rem at 50% 100%, color-mix(in srgb, var(--cor-acento) 18%, transparent), transparent 70%);
}

/* Campo de estrelas: dois planos de pontos, feitos só com radial-gradient
   repetido. Custa zero request e zero JS. */
.ceu::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--cor-texto-suave), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 12%, var(--cor-lima), transparent 100%),
    radial-gradient(1px 1px at 33% 62%, var(--cor-texto), transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 78%, var(--cor-ciano), transparent 100%),
    radial-gradient(1px 1px at 88% 55%, var(--cor-moeda), transparent 100%),
    radial-gradient(1px 1px at 5% 82%, var(--cor-texto-suave), transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 28%, var(--cor-texto), transparent 100%);
  background-size: 18rem 18rem;
  opacity: 0.55;
  animation: cintila 9s ease-in-out infinite alternate;
}

@keyframes cintila {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.7;
  }
}

/* ==========================================================================
   Herói
   ========================================================================== */

.heroi {
  padding-block: var(--esp-xl) var(--esp-2xl);
}

.heroi__grade {
  display: grid;
  gap: var(--esp-xl);
  align-items: center;
}

.heroi h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 3.75rem);
  margin-bottom: var(--esp-md);
}

.heroi h1 em {
  font-style: normal;
  color: var(--cor-lima);
}

.heroi__sub {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--cor-texto-suave);
  max-width: 34rem;
  margin-bottom: var(--esp-lg);
}

/* No celular os dois CTAs ocupam a linha inteira e ficam do MESMO tamanho:
   empilhados com larguras diferentes, o secundário parecia mais importante que
   o primário só por ser mais largo. */
.heroi__acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-md);
  margin-bottom: var(--esp-lg);
}

@media (min-width: 480px) {
  .heroi__acoes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.heroi__selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
}

.heroi__selos li {
  display: flex;
  align-items: center;
  gap: var(--esp-xs);
}

.heroi__arte {
  justify-self: center;
  max-width: 26rem;
  width: 100%;
  filter: drop-shadow(0 18px 36px rgb(0 0 0 / 0.5));
}

/* ==========================================================================
   Cartões
   ========================================================================== */

.peca {
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-contorno);
  border-radius: var(--raio-2xl);
  box-shadow: var(--sombra-peca);
  padding: var(--esp-lg);
}

.grade {
  display: grid;
  gap: var(--esp-md);
}

.passo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-pill);
  background: var(--cor-acento);
  color: var(--cor-acento-tinta);
  border: var(--borda) solid var(--cor-acento-sombra);
  font-weight: var(--peso-titulo);
  font-size: 1.125rem;
  margin-bottom: var(--esp-sm);
}

.peca h3 {
  font-size: 1.1875rem;
  font-weight: var(--peso-forte);
  margin-bottom: var(--esp-xs);
}

.peca p {
  color: var(--cor-texto-suave);
  font-size: 0.9875rem;
}

.recurso__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-funda);
  border: var(--borda) solid var(--cor-contorno);
  color: var(--cor-ciano);
  margin-bottom: var(--esp-sm);
}

.recurso__icone svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Aviso honesto dentro da seção "como funciona". */
.nota {
  margin-top: var(--esp-lg);
  border-left: 4px solid var(--cor-moeda);
  background: var(--cor-superficie-funda);
  border-radius: var(--raio-lg);
  padding: var(--esp-md);
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

.nota strong {
  color: var(--cor-moeda);
}

/* Faixa de itens menores ("e ainda"). */
.miudos {
  display: grid;
  gap: var(--esp-sm);
  list-style: none;
  margin: var(--esp-lg) 0 0;
  padding: 0;
}

.miudos li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-sm);
  background: var(--cor-superficie-funda);
  border: var(--borda) solid var(--cor-contorno);
  border-radius: var(--raio-pill);
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
}

.miudos svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--cor-lima);
}

/* ==========================================================================
   Blocos com imagem ao lado
   ========================================================================== */

.dupla {
  display: grid;
  gap: var(--esp-xl);
  align-items: center;
}

.dupla__arte {
  justify-self: center;
  max-width: 22rem;
  width: 100%;
}

/* Teto de ALTURA, não só de largura.
   `mascote-em-pe` é um retrato de 535x1043: limitado só pela largura, ele sai
   com 800px de altura e engole a coluna de texto ao lado. O teto de altura com
   `width: auto` deixa a proporção intacta e resolve os dois casos — a dupla,
   que é deitada, nem chega a encostar nele. */
.dupla__arte img {
  max-height: 26rem;
  width: auto;
  margin-inline: auto;
}

.lista-marcada {
  list-style: none;
  margin: var(--esp-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-md);
}

.lista-marcada li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-sm);
  color: var(--cor-texto-suave);
}

.lista-marcada svg {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--cor-lima);
}

.lista-marcada strong {
  color: var(--cor-texto);
  font-weight: var(--peso-forte);
}

/* ==========================================================================
   FAQ — <details> nativo, sem uma linha de JS
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--esp-sm);
  max-width: 48rem;
}

.faq details {
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-contorno);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-peca);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
  min-height: var(--toque);
  padding: var(--esp-md);
  cursor: pointer;
  font-weight: var(--peso-forte);
  font-size: 1.0625rem;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 3px solid var(--cor-acento-texto);
  border-bottom: 3px solid var(--cor-acento-texto);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease-out;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq details p {
  padding: 0 var(--esp-md) var(--esp-md);
  color: var(--cor-texto-suave);
}

/* ==========================================================================
   Chamada final e rodapé
   ========================================================================== */

.final {
  background: var(--cor-superficie-alta);
  border-block: var(--borda) solid var(--cor-contorno);
  padding-block: var(--esp-2xl);
  text-align: center;
}

.final__grade {
  display: grid;
  gap: var(--esp-lg);
  justify-items: center;
}

.final h2 {
  font-size: clamp(1.875rem, 1.2rem + 3vw, 2.75rem);
}

.final p {
  color: var(--cor-texto-suave);
  font-size: 1.0625rem;
  max-width: 34rem;
}

.final__arte {
  max-width: 15rem;
  width: 100%;
}

.rodape {
  padding-block: var(--esp-xl);
  border-top: var(--borda) solid var(--cor-contorno);
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

.rodape__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
}

.rodape__aviso {
  margin-top: var(--esp-md);
  max-width: 40rem;
}

.rodape a {
  min-height: var(--toque);
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   Pontos de quebra — mobile primeiro
   ========================================================================== */

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }

  .grade--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .miudos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :root {
    --esp-xl: 3.5rem;
    --esp-2xl: 5.5rem;
    --gutter: 2rem;
  }

  .heroi__grade {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .heroi__arte {
    max-width: 32rem;
  }

  .grade--3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grade--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .miudos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dupla {
    grid-template-columns: 1fr 1fr;
  }

  .dupla--invertida .dupla__arte {
    order: -1;
  }

  .dupla__arte {
    max-width: 26rem;
  }
}

/* ==========================================================================
   Menos movimento — desliga TODA a decoração animada
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ceu::after {
    opacity: 0.5;
  }

  .botao:active {
    transform: none;
  }
}