/*!
 * landing.css — páginas de conteúdo do Serviços (plano SEO/GEO, 1b).
 *
 * As páginas de serviço (/filmagem-com-drone e irmãs) e as seções de conteúdo
 * da home. Sem o Tailwind do CDN: por cima do brand.css, que já traz tokens,
 * topo, rodapé e botões. Tudo com prefixo próprio (lp-, en-faq, home-servicos)
 * para não brigar com o Tailwind das telas antigas.
 */

/* ---- página ---------------------------------------------------------------- */
html, body { height: 100%; }
body.lp-pagina, .lp-pagina {
  margin: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--fg); font-family: var(--font-body);
}
.lp-pagina main { flex: 1 0 auto; }

/* ---- artigo ---------------------------------------------------------------- */
.lp { max-width: 760px; margin-inline: auto; padding-block: clamp(24px, 4vw, 44px) clamp(48px, 7vw, 80px); }
.lp-trilha { font-size: 13.5px; color: var(--muted-fg); margin: 0 0 18px; }
/* .lp .lp-trilha, não só .lp-trilha: o `.lp a` mais abaixo tem a mesma
   especificidade e, por vir depois, pintava a trilha de azul sublinhado. */
.lp .lp-trilha a { color: var(--muted-fg); text-decoration: none; }
.lp .lp-trilha a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.lp h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(30px, 5vw, 44px); margin: 8px 0 16px; color: var(--fg);
}
.lp h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  font-size: clamp(20px, 2.6vw, 25px); margin: 44px 0 12px; color: var(--fg);
}
.lp p, .lp li { font-size: 16px; line-height: 1.65; color: var(--fg); }
.lp p { margin: 0 0 14px; }
.lp ul, .lp ol { margin: 0 0 16px; padding-left: 22px; }
.lp li { margin-bottom: 8px; }
.lp li::marker { color: var(--cobalto-600); }
.lp li > ul { margin-top: 8px; }
.lp strong { font-weight: 600; }
.lp a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.lp .en-btn { text-decoration: none; color: #fff; }

/* ---- números da cidade (páginas por cidade, 1c) ---------------------------- */
.lp .lp-numeros { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lp .lp-numeros li { margin: 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.4; color: var(--muted-fg); }
.lp .lp-numeros strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--fg); }

/* ---- chamada para o pedido ------------------------------------------------- */
.lp-cta { margin: 22px 0 8px; }
.lp-cta-fim { margin-top: 40px; }

/* ---- as regras do voo: um quadro, igual em todas as páginas ---------------- */
.lp-regras {
  margin-top: 44px; padding: 4px 22px 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.lp-regras h2 { margin-top: 18px; }

/* ---- perguntas frequentes (páginas e home) -------------------------------- */
.en-faq details, .lp-faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.en-faq details:first-of-type, .lp-faq details:first-of-type { border-top: 1px solid var(--border); }
.en-faq summary, .lp-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--fg);
}
.en-faq summary::-webkit-details-marker, .lp-faq summary::-webkit-details-marker { display: none; }
.en-faq summary::after, .lp-faq summary::after {
  content: '+'; flex-shrink: 0; font-weight: 500; color: var(--cobalto-600); font-size: 20px; line-height: 1;
}
.en-faq details[open] summary::after, .lp-faq details[open] summary::after { content: '−'; }
.en-faq details p, .lp-faq details p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted-fg); }

/* ---- home: os cinco serviços ---------------------------------------------- */
.home-servicos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .home-servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .home-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-servico {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 18px 20px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none; color: var(--fg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.home-servico:hover { border-color: var(--cobalto-300); box-shadow: var(--elev-1); }
.home-servico-titulo { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg); }
/* Espaço não quebrável: a seta nunca cai sozinha na linha de baixo. */
.home-servico-titulo::after { content: '\00a0→'; color: var(--cobalto-600); }
.home-servico-texto { font-size: 15px; line-height: 1.5; color: var(--muted-fg); }
.home-servicos-piloto { margin: 18px 0 0; font-size: 15px; color: var(--muted-fg); }
.home-servicos-piloto a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }