/* O site público do Apisoli (https://apisoli.cloud): a página inicial e a política de privacidade.
   As cores e as fontes são as do painel (app/globals.css e docs/design.md, "Identidade"); o tema segue o do
   aparelho (claro ou escuro). Sem script nenhum, e tudo vem do próprio site (a CSP do site/nginx.conf). */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fontes/sora-latin.woff2") format("woff2");
}

/* A reserva enquanto a Sora chega, com as medidas dela (as mesmas do painel): o texto não pula quando ela chega */
@font-face {
  font-family: "Sora Reserva";
  src: local("Arial");
  ascent-override: 85.29%;
  descent-override: 25.5%;
  line-gap-override: 0%;
  size-adjust: 113.73%;
}

/* Apisoli Display: a fonte da marca (só maiúsculas), nos títulos */
@font-face {
  font-family: "Apisoli Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fontes/apisoli-display.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --mel: #ffc21c;
  --mel-texto: #8a5a00;
  --mel-suave: #fff4d7;
  --mel-borda: #f0cf73;
  --preto: #0b0b0b;
  --branco: #ffffff;
  --texto-no-preto: #d9d5cc;
  --fundo: #f8f7f4;
  --cartao: #ffffff;
  --borda: #ece9e2;
  --texto: #0b0b0b;
  --texto-2: #6b6760;
  --sombra: 0 1px 2px rgb(11 11 11 / 0.05), 0 8px 24px rgb(11 11 11 / 0.04);
  --letra: "Sora", "Sora Reserva", ui-sans-serif, system-ui, sans-serif;
  --titulo: "Apisoli Display", "Sora", "Sora Reserva", ui-sans-serif, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mel-texto: #ffd45c;
    --mel-suave: #2a2410;
    --mel-borda: #5c4a14;
    --fundo: #0f0f0e;
    --cartao: #1a1918;
    --borda: #2a2826;
    --texto: #f5f3ee;
    --texto-2: #a8a29a;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1rem/1.65 var(--letra);
}

main {
  flex: 1;
}

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

a {
  color: var(--mel-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--mel-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-size: 0.9em;
}

/* "Pular para o conteúdo": aparece só para quem navega pelo teclado */
.pular {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--mel);
  color: var(--preto);
  font-weight: 600;
  text-decoration: none;
}

.pular:focus {
  top: 1rem;
}

/* O destaque da página inicial: o painel preto da tela Entrar, nos dois temas */
.destaque {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1.5rem 4rem;
  background: var(--preto);
  color: var(--branco);
  text-align: center;
}

.destaque::before {
  content: "";
  position: absolute;
  top: 34%;
  left: 50%;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 194 28 / 0.18), transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.colmeia {
  position: absolute;
  right: -2.5rem;
  bottom: -6rem;
  width: 16rem;
  height: 45rem;
  background: url("/marca/colmeia.svg") no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

.destaque > :not(.colmeia) {
  position: relative;
}

.logo {
  width: 15rem;
  margin: 0 auto;
  filter: drop-shadow(0 0 24px rgb(255 194 28 / 0.22));
}

.frase {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.frase span {
  color: var(--mel);
}

.destaque h1 {
  max-width: 24ch;
  margin: 2.25rem auto 0;
  font-size: clamp(1.625rem, 4.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.resumo {
  max-width: 38rem;
  margin: 1rem auto 0;
  color: var(--texto-no-preto);
  font-size: 1.0625rem;
}

.selo {
  display: inline-block;
  margin: 1.75rem 0 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgb(255 194 28 / 0.45);
  border-radius: 999px;
  /* Fundo preto: no celular, a colmeia do fundo passa por trás do selo */
  background: var(--preto);
  color: var(--mel);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (min-width: 640px) {
  .destaque {
    padding: 4.5rem 2rem 5rem;
  }

  .logo {
    width: 20rem;
  }

  .colmeia {
    opacity: 0.6;
  }
}

@media (min-width: 1024px) {
  .logo {
    width: 26rem;
  }
}

/* As seções da página inicial */
.secao {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}

.secao:last-child {
  padding-bottom: 4rem;
}

h2 {
  margin: 0 0 1.5rem;
  font: 400 1.5rem/1.2 var(--titulo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartoes li {
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--cartao);
  box-shadow: var(--sombra);
}

.icone {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--mel-suave);
  color: var(--mel-texto);
}

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

.cartoes h3 {
  margin: 0.875rem 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.cartoes p {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.quadro {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--mel-borda);
  border-radius: 1rem;
  background: var(--mel-suave);
}

.quadro h2 {
  margin-bottom: 1rem;
}

.quadro p,
.quadro ul {
  max-width: 46rem;
  margin: 0 0 1rem;
}

.quadro ul {
  padding-left: 1.25rem;
}

.quadro li + li {
  margin-top: 0.375rem;
}

.quadro p:last-child {
  margin-bottom: 0;
}

/* A barra preta do topo das outras páginas, com o nome Apisoli */
.barra {
  padding: 0 1.5rem;
  background: var(--preto);
}

.barra a {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
}

.barra img {
  width: auto;
  height: 1.25rem;
}

/* O texto da política de privacidade */
.texto {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.texto h1 {
  margin: 0;
  font: 400 clamp(1.75rem, 6vw, 2.5rem)/1.15 var(--titulo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.data {
  margin: 0.5rem 0 0;
  color: var(--texto-2);
  font-size: 0.875rem;
}

.texto h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.texto h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.texto p,
.texto ul {
  margin: 0 0 1rem;
}

.texto ul {
  padding-left: 1.25rem;
}

.texto li + li {
  margin-top: 0.5rem;
}

.aviso {
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--mel);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--mel-suave);
}

/* O rodapé */
.rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 1.5rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: 0.875rem;
}

.rodape p {
  margin: 0;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}