/* ==========================================================================
   Mapa das Ofertas - pagina-ponte
   Mobile-first: o que esta fora de media query descreve o celular, que e de
   onde vem a maior parte do trafego. O desktop entra depois, como excecao.
   ========================================================================== */

:root {
  --verde: #25d366;          /* verde do WhatsApp: a pessoa reconhece o destino */
  --verde-escuro: #1da851;   /* estado de hover */
  --sobre-verde: #08150d;    /* texto do botao: 9,5:1 sobre o verde */
  --fundo: #ffffff;
  --texto: #16181d;
  --texto-suave: #4a5159;    /* 8:1 sobre o branco */
}

* {
  box-sizing: border-box;
}

html {
  /* impede o iOS de aumentar a fonte sozinho ao girar a tela */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  /* fonte do sistema: zero requisicao de rede, zero piscada de texto */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.5;
}

/* ==========================================================================
   Bloco do topo
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 4vw, 1.75rem);

  /* A altura da dobra no celular:
     100vh mede a tela com a barra do navegador RECOLHIDA, entao um bloco de
     100vh e mais alto que o visivel e empurra o botao para fora.
     100svh usa a viewport com a barra ABERTA - a menor - garantindo que o CTA
     apareca sem rolagem. A primeira linha e o fallback de navegador antigo.
     min-height, e nao height: se o conteudo crescer (tela pequena, fonte
     aumentada), o bloco cresce em vez de cortar. */
  min-height: 100vh;
  min-height: 100svh;

  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  /* max() com env(): respeita o notch e a barra inferior do iPhone quando
     existirem, e mantem o respiro normal quando nao existirem */
  padding-block:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-bottom));
}

.hero__titulo {
  margin: 0;
  max-width: 20ch;
  /* minimo e maximo em rem preservam o zoom do usuario; o vw do meio faz a
     escala continua entre 320px e o desktop, sem breakpoint de fonte */
  font-size: clamp(1.9rem, 7.5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance; /* evita palavra orfa na ultima linha */
}

.hero__texto {
  margin: 0;
  max-width: 34ch; /* linha curta: leitura mais rapida no celular */
  font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  color: var(--texto-suave);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 26rem;    /* no desktop nao vira uma faixa esticada */
  min-height: 3.5rem;  /* 56px: alvo de toque confortavel com o polegar */
  padding: 0.9rem 1.5rem;

  border-radius: 999px;
  background: var(--verde);
  color: var(--sobre-verde);

  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;

  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.hero__cta:hover {
  background: var(--verde-escuro);
}

.hero__cta:active {
  transform: translateY(1px);
}

.hero__cta:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__cta {
    transition: background-color 0.15s ease, transform 0.1s ease;
  }
}

/* ==========================================================================
   Telas maiores: so respiro. O clamp ja cuidou dos tamanhos.
   ========================================================================== */

@media (min-width: 48rem) {
  .hero {
    gap: 2rem;
  }

  .hero__titulo {
    max-width: 24ch;
  }
}

/* ==========================================================================
   Rodape - usado nas duas paginas
   ========================================================================== */

.rodape {
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  padding-block: 2rem max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid #e6e8eb;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texto-suave);
}

.rodape p {
  max-width: 52ch; /* linha curta mesmo em tela larga */
  margin: 0 auto 0.75rem;
}

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

.rodape a {
  color: var(--texto);
}

.rodape__ano {
  margin-top: 1rem;
}

/* ==========================================================================
   Pagina de texto corrido (politica de privacidade)
   ========================================================================== */

.pagina {
  max-width: 40rem;    /* ~65 caracteres por linha: o conforto de leitura */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  padding-block: clamp(1.5rem, 6vw, 3rem) clamp(2rem, 8vw, 3.5rem);
}

.pagina__voltar {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.pagina h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.pagina__atualizacao {
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.pagina h2 {
  margin: 2.25rem 0 0.5rem;
  font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  line-height: 1.3;
}

/* texto longo pede entrelinha maior que a do heroi (1.5): o olho precisa
   achar o comeco da linha seguinte sem esforco */
.pagina p,
.pagina li {
  line-height: 1.65;
}

.pagina p {
  margin: 0 0 1rem;
}

.pagina ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.pagina li {
  margin-bottom: 0.4rem;
}

.pagina a {
  color: var(--texto);
}

.pagina a:focus-visible,
.rodape a:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 2px;
}