/*
 * Landing do Passinho. Cores da marca (assets/brand/MARCA.md e src/constants/theme.ts):
 * pastel preenche, forte escreve. Texto sempre acima de 4,5:1 sobre o fundo.
 */
:root {
  --creme: #f9f7f2;
  --tinta: #3a2e2a;
  --texto-2: #645953;
  --cartao: #ffffff;
  --elemento: #f1ece5;
  --linha: #eae4dc;
  --tint: #5c4189;
  --tint-texto: #ffffff;
  --lavanda-forte: #6b4e9b;
  --area-lavanda: #e8d9f8;
  --area-salvia: #dfeed6;
  --area-azul: #dcecf8;
  --area-pessego: #ffe5d7;
  --lavanda: #cdb7e8;
  --salvia: #b7c9a7;
  --azul: #bfd8ea;
  --pessego: #f8dccb;
  --sombra: 0 18px 40px -22px rgba(58, 46, 42, 0.35);
  --raio: 22px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --creme: #1b1820;
    --tinta: #f4efea;
    --texto-2: #c9bfb9;
    --cartao: #26212b;
    --elemento: #2c2632;
    --linha: #3a3340;
    --tint: #cdb7e8;
    --tint-texto: #241b33;
    --lavanda-forte: #cdb7e8;
    --area-lavanda: #342b41;
    --area-salvia: #2a3328;
    --area-azul: #243240;
    --area-pessego: #3d2f29;
    --sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--lavanda-forte);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(40px, 6vw, 64px);
}

h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  max-width: 22ch;
}

h3 {
  font-size: 19px;
  font-weight: 800;
}

p {
  margin: 0;
}

.largura {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}

.pular {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--tint);
  color: var(--tint-texto);
  padding: 8px 14px;
  border-radius: 10px;
  z-index: 10;
}

.pular:focus {
  left: 16px;
}

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--tint-texto);
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  border: 2px solid var(--tint);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 10px 24px -14px var(--tint);
}

.botao:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -14px var(--tint);
}

.botao:focus-visible,
a:focus-visible {
  outline: 3px solid var(--lavanda);
  outline-offset: 3px;
}

.botao--secundario {
  background: transparent;
  color: var(--tint);
  box-shadow: none;
}

.botao--pequeno {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

.botao--claro {
  background: #ffffff;
  border-color: #ffffff;
  color: #5c4189;
}

/* Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

.topo__linha {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}

.topo__marca img {
  width: 140px;
  height: auto;
}

.topo__nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.topo__nav a {
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

.topo__nav a:hover {
  color: var(--tinta);
}

/* Abertura */
.abertura {
  position: relative;
  padding: 72px 0 88px;
  overflow: hidden;
}

.abertura::before,
.abertura::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
  opacity: 0.55;
}

.abertura::before {
  width: 520px;
  height: 520px;
  background: var(--area-lavanda);
  right: -140px;
  top: -120px;
}

.abertura::after {
  width: 320px;
  height: 320px;
  background: var(--area-salvia);
  left: -120px;
  bottom: -140px;
}

.abertura__grade {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.selo {
  display: inline-block;
  background: var(--area-salvia);
  color: var(--tinta);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.abertura__lead {
  font-size: 20px;
  color: var(--texto-2);
  margin-top: 20px;
  max-width: 34ch;
}

.abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.abertura__nota {
  margin-top: 16px;
  font-size: 14px;
  color: var(--texto-2);
}

/* Aparelho ilustrativo */
.aparelho {
  justify-self: center;
  width: min(320px, 100%);

  background: var(--tinta);
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--sombra);
  transform: rotate(2deg);
  animation: flutuar 6s ease-in-out infinite;
}

.aparelho__tela {
  height: 100%;
  background: var(--creme);
  border-radius: 34px;
  padding: 28px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.aparelho__topo {
  background: var(--tint);
  color: var(--tint-texto);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.aparelho__ola {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
}

.aparelho__nome {
  font-size: 14px;
  opacity: 0.9;
}

.mini {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  padding: 12px 14px;
}

.mini div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mini strong {
  font-size: 14px;
}

.mini span:not(.mini__icone) {
  font-size: 13px;
  color: var(--texto-2);
}

.mini__icone {
  font-size: 22px;
}

.mini--lavanda {
  background: var(--area-lavanda);
}
.mini--azul {
  background: var(--area-azul);
}
.mini--salvia {
  background: var(--area-salvia);
}
.mini--pessego {
  background: var(--area-pessego);
}

@keyframes flutuar {
  0%,
  100% {
    transform: rotate(2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-10px);
  }
}

/* Faixa da Caderneta */
.faixa {
  background: var(--tint);
  color: var(--tint-texto);
  padding: 64px 0;
}

.faixa__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.faixa p {
  font-size: 18px;
  opacity: 0.95;
}

/* Seções */
.secao {
  padding: 96px 0;
}

.secao--fundo {
  background: var(--elemento);
}

.sobretitulo {
  color: var(--lavanda-forte);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  margin-bottom: 12px;
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.cartao {
  border-radius: var(--raio);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cartao p {
  color: var(--texto-2);
  font-size: 16px;
}

.cartao__icone {
  font-size: 30px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--cartao);
  border-radius: 16px;
  margin-bottom: 6px;
}

.cartao--lavanda {
  background: var(--area-lavanda);
}
.cartao--salvia {
  background: var(--area-salvia);
}
.cartao--azul {
  background: var(--area-azul);
}
.cartao--pessego {
  background: var(--area-pessego);
}
.cartao--liso {
  background: var(--cartao);
  border: 1px solid var(--linha);
}

.dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.lista li {
  background: var(--cartao);
  border-radius: 18px;
  padding: 20px 22px;
  color: var(--texto-2);
  border-left: 6px solid var(--salvia);
}

.lista strong {
  color: var(--tinta);
}

/* Planos */
.planos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  max-width: 900px;
}

.plano {
  position: relative;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plano--destaque {
  border: 2px solid var(--tint);
  box-shadow: var(--sombra);
}

.plano h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
}

.plano__desc {
  color: var(--texto-2);
}

.plano ul {
  margin: 8px 0 20px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  flex: 1;
}

.plano .botao {
  align-self: flex-start;
}

.plano__etiqueta {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--tint);
  color: var(--tint-texto);
  font-weight: 800;
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 999px;
}

/* Chamada final */
.chamada {
  padding: 96px 0;
}

.chamada__caixa {
  background: #5c4189;
  color: #ffffff;
  border-radius: 32px;
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.chamada__caixa img {
  background: #f9f7f2;
  border-radius: 50%;
  padding: 10px;
  width: 84px;
  height: 84px;
}

.chamada__caixa h2 {
  max-width: none;
}

.chamada__caixa p {
  font-size: 18px;
  opacity: 0.95;
  margin-bottom: 10px;
}

/* Rodapé */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 40px 0 48px;
  font-size: 14px;
  color: var(--texto-2);
}

.rodape__aviso {
  max-width: 80ch;
}

.rodape__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Responsivo */
@media (max-width: 900px) {
  .abertura__grade,
  .faixa__grade,
  .dupla,
  .planos {
    grid-template-columns: 1fr;
  }

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

  .aparelho {
    width: min(280px, 80%);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .topo__nav {
    display: none;
  }

  .topo__linha {
    justify-content: space-between;
  }

  .topo__marca img {
    width: 120px;
  }

  .abertura {
    padding: 40px 0 64px;
  }

  .abertura__lead {
    font-size: 18px;
  }

  .abertura__acoes .botao {
    width: 100%;
  }

  .cartoes,
  .cartoes--tres {
    grid-template-columns: 1fr;
  }

  .secao,
  .chamada {
    padding: 64px 0;
  }

  .plano {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .aparelho {
    animation: none;
  }
  .botao {
    transition: none;
  }
}