/* ============================================================================
   Doutor Ofertas - landing (tela única, responsiva de 320px a ultrawide)
   Preto quase-puro + dourado metálico + verde WhatsApp no CTA.
   CSS puro de propósito: sem Tailwind CDN, a página pinta na hora no 4G.

   Estratégia responsiva: tudo escala por clamp() em vez de saltar em
   breakpoints. Só há media query para o que clamp() não resolve -
   orientação paisagem e telas muito baixas.

   ⚠️ Tipografia: os corpos de texto escalam por vw PURO, não por
   min(vw, vh). Em retrato vh é sempre muito maior que vw, então min() sempre
   devolvia vw - e vw ficava abaixo do piso do clamp. Resultado medido em
   320x568, 360x800 e 390x844: TODO texto travava no mínimo (CTA 14px, apoio
   11px, notas 9px) em 100% dos celulares. A escala fluida só funcionava no
   desktop, que é justamente a minoria do tráfego.
   ========================================================================= */
:root {
  --bg: #0a0a0b;
  --gold: #e8b84b;
  --gold-deep: #b58d2f;
  --green: #25d366;
  --text: #e5e2e3;
  --muted: #9b8f7c;

  /* Ritmo vertical: cresce com a ALTURA da tela (não com a largura) */
  --rhythm: clamp(10px, 2.2vh, 24px);

  /* Documento já é escuro: impede o force-dark do WebView de inverter por cima */
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;           /* reserva para WebView antigo sem svh */
  min-height: 100svh;          /* svh: não "pula" com a barra do navegador mobile */
  display: flex;
  justify-content: center;
  align-items: center;         /* centraliza a composição em telas altas */
}

/* Brilho dourado atrás do logo - escala junto com a tela */
.glow {
  position: fixed;
  top: 6%; left: 50%;
  width: clamp(240px, 60vmin, 520px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 184, 75, .15) 0%, rgba(10, 10, 11, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Composição: 4 blocos com respiro igual entre si E nas bordas (space-evenly) */
.screen {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Acompanha a tela: coluna no celular, mais presença no desktop */
  max-width: clamp(320px, min(92vw, 88vh), 900px);
  min-height: 100vh;
  min-height: 100svh;
  /* Lateral com piso de 16px (era 20): num aparelho de 320px cada 4px a menos
     é largura que o rótulo do botão precisa para caber em uma linha. */
  padding:
    clamp(16px, 3vh, 40px)
    clamp(16px, 6vw, 40px)
    calc(clamp(16px, 3vh, 40px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--rhythm);
  text-align: center;
}

/* Blocos mantem a altura natural - sem isso o flex esmaga o logo em tela alta */
.screen > * { flex: 0 0 auto; }

/* ── Marca ─────────────────────────────────────────────────────────────── */
.top {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.4vh, 18px);
}

.logo-ring {
  /* vmin faz o logo respeitar a MENOR dimensão - não estoura em paisagem */
  width: clamp(64px, 21vmin, 210px);
  height: clamp(64px, 21vmin, 210px);
  padding: 4px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(232, 184, 75, .2);
  flex: none;
}
.logo-ring picture { display: block; width: 100%; height: 100%; }
.logo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.brand {
  font-size: clamp(13px, 3.4vw, 24px);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
}

/* ── Chamada ───────────────────────────────────────────────────────────── */
.middle { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 18px); }

.headline {
  /* Reserva condensada: Anton chega depois (fonte não-bloqueante), e uma
     fallback estreita mantém a quebra de linha parecida quando ela troca. */
  font-family: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  font-weight: 400;
  /* Escala contínua: no celular quem manda é o vw (9.6vw); em desktop e
     paisagem quem manda é o vh. O fator vh é 7.4 e não 8.6 porque com a linha
     de marcas somada o bloco passava de 100svh no desktop e aparecia barra de
     rolagem numa página que é vendida como tela única (medido 919 contra 900
     em 1440x900). Mexer só no teto em rem não resolvia: naquele tamanho o vh
     já governa bem abaixo do teto. */
  font-size: clamp(1.95rem, min(9.6vw, 7.4vh), 6.5rem);
  /* 1 e apertado demais pra CAIXA ALTA com acento: o E de ATE batia na linha
     de cima. 1.08 da espaco pro diacritico sem soltar o bloco. */
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;          /* evita linha órfã onde suportado */
}

/* Dourado metálico. O gradiente fica dentro de @supports E fora de print:
   -webkit-text-fill-color vence color na pintura do glifo, então declarar os
   dois soltos não era fallback nenhum - em forced-colors ou "Salvar como PDF"
   sem gráficos de fundo, o "70% OFF" sumia. */
.gold { color: var(--gold); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media not print {
    .gold {
      background: linear-gradient(45deg, var(--gold), var(--gold-deep));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
/* Alto contraste do Windows/Android descarta o background: devolve o glifo. */
@media (forced-colors: active) {
  .gold { -webkit-text-fill-color: currentColor; background: none; }
}

.support {
  font-size: clamp(14px, 3.7vw, 24px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}

/* Prova concreta: as marcas que o bot realmente busca */
.marcas {
  font-size: clamp(12px, 3.2vw, 20px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
  opacity: .85;
  text-wrap: balance;
}

/* ── Ação ──────────────────────────────────────────────────────────────── */
.bottom {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.2vh, 14px);
}

.vagas {
  font-size: clamp(12px, 3.3vw, 24px);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
}
/* Sem raio: ⚡ é o vocabulário visual de disparo em massa e de conta pirata.
   Não adicionava informação - a linha diz o que precisa dizer sozinha - e
   adicionava textura de spam justamente onde a página precisa parecer sóbria. */

.cta {
  width: 100%;
  /* Nunca menor que um alvo de toque confortável, nunca gigante */
  height: clamp(56px, 8.4vh, 108px);
  display: flex; align-items: center; justify-content: center;
  gap: .45em;
  /* O rótulo NUNCA quebra em duas linhas: botão de duas linhas lê como erro
     de layout justamente no elemento que precisa parecer sólido. */
  white-space: nowrap;
  background: var(--green);
  /* Texto ESCURO: #fff sobre #25d366 dava 1.98:1 e reprovava até no critério
     de texto grande. Com #0a0a0b vai a 9.98:1 e o verde-WhatsApp continua
     sendo o sinal de reconhecimento. */
  color: #0a0a0b;
  font-size: clamp(17px, 4.4vw, 30px);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .3);
  transition: transform .2s ease, filter .2s ease;
}
.cta svg { width: 1.15em; height: 1.15em; flex: none; }
.cta:active { transform: scale(.98); filter: brightness(1.1); }
.cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) {
  .cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
}

/* Estado de grupos realmente lotados: nunca um botão verde vivo apontando
   pra convite que vai falhar. */
.cta--off {
  background: #2a2a2c;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.cta-note {
  /* Era 9px com opacity .6 sobre preto = 2.91:1: a única frase que responde à
     objeção ficava ilegível. Sem o opacity, --muted sozinho dá 6.23:1. */
  font-size: clamp(12px, 3.2vw, 20px);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--muted);
  text-wrap: balance;
}

/* Plano B quando o webview engole o handoff pro app */
.escape {
  font-size: clamp(12px, 3.2vw, 20px);
  font-weight: 600;
  color: var(--text);
}
.escape button {
  font: inherit;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 4px 2px;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.foot p {
  /* Idem: era 9px com opacity .5 (3.35:1). É a linha que posiciona o projeto
     como curadoria e explica a comissão - precisa ser lida. */
  font-size: clamp(11px, 3vw, 18px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

/* ── DESKTOP BAIXO ─────────────────────────────────────────────────────────
   Janela de desktop com pouca altura (1366x768, ou qualquer janela não
   maximizada): o bloco de conteúdo tem altura quase fixa e o rodapé caía pra
   fora da tela única. Aperta logo, ritmo e headline.

   min-height: 500px exclui celular deitado - esse caso tem regra própria logo
   abaixo, e sem essa condição um 812x375 cairia aqui também. */
@media (min-width: 900px) and (min-height: 500px) and (max-height: 820px) {
  :root { --rhythm: clamp(8px, 1.6vh, 16px); }
  .logo-ring { width: clamp(64px, 15vh, 150px); height: clamp(64px, 15vh, 150px); }
  .headline { font-size: clamp(1.95rem, min(9.6vw, 6.6vh), 6.5rem); }
}

/* ── HUB (a raiz) ──────────────────────────────────────────────────────────
   Página de marca, não de conversão: quem cai aqui buscou "doutor ofertas" ou
   digitou o domínio. Anúncio aponta direto pra /<nicho>. Por isso ela pode ter
   um clique a mais sem custar conversão de campanha. */
.headline-hub {
  font-family: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, min(7.4vw, 5.6vh), 4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.nichos {
  width: 100%;
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
}

/* Cada nicho é um <a> de verdade: é seguindo estes links que o crawler acha as
   páginas de nicho a partir da raiz. */
.nicho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: clamp(56px, 8vh, 88px);
  padding: 12px clamp(14px, 4vw, 22px);
  border: 1px solid rgba(232, 184, 75, .35);
  border-radius: 14px;
  background: rgba(232, 184, 75, .05);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.nicho-nome {
  font-size: clamp(13px, 3.4vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.nicho-nome b { color: var(--gold); font-weight: 700; }
.nicho-seta { color: var(--gold); font-size: 1.6em; line-height: 1; flex: none; }

.nicho:active { transform: scale(.99); }
.nicho:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) {
  .nicho:hover { border-color: var(--gold); background: rgba(232, 184, 75, .1); }
}

/* ── PAISAGEM / telas muito baixas ─────────────────────────────────────────
   Celular deitado (ex.: 812x375) não cabe em coluna. Vira 2 colunas: marca de
   um lado, chamada e botão do outro - e permite rolar se ainda faltar espaço
   (nunca prender o usuário sem ver o botão). */
@media (max-height: 460px) and (orientation: landscape) {
  body { min-height: auto; }
  .screen {
    max-width: min(96vw, 900px);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vw, 48px);
    padding: 16px 24px;
  }
  .top { flex: 0 0 auto; }
  .middle { flex: 1 1 300px; max-width: 460px; }
  .bottom { flex: 1 1 240px; max-width: 340px; }
  .headline { font-size: clamp(1.5rem, 4.4vw, 2.4rem); }
  .support, .marcas, .vagas, .cta-note { font-size: clamp(11px, 1.7vw, 15px); }
  .cta { font-size: clamp(15px, 2vw, 20px); height: clamp(48px, 13vh, 64px); }
  .foot { flex: 1 1 100%; }
  .foot p { font-size: clamp(10px, 1.5vw, 13px); }
  .glow { top: -10%; }
}

/* Telas baixas em retrato (navegador com muita UI): aperta o ritmo */
@media (max-height: 620px) and (orientation: portrait) {
  :root { --rhythm: clamp(6px, 1.4vh, 16px); }
  .headline { font-size: clamp(1.75rem, 8.4vw, 2.6rem); }
  .logo-ring { width: clamp(64px, 17vmin, 160px); height: clamp(64px, 17vmin, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}