/* Luan Silva Films — camada propria sobre o Craftivo (BootstrapMade).
   Nada aqui edita o main.css do template: sao overrides e componentes lsf-*. */

:root {
  --background-color: #0b0b0c;
  --default-color: #d4d4d6;
  --heading-color: #f4f4f5;
  --accent-color: #f5822f;
  --surface-color: #141416;
  --contrast-color: #0b0b0c;

  --nav-color: #d4d4d6;
  --nav-hover-color: #f5822f;
  --nav-mobile-background-color: #141416;
  --nav-dropdown-background-color: #141416;
  --nav-dropdown-color: #d4d4d6;
  --nav-dropdown-hover-color: #f5822f;

  --linha: color-mix(in srgb, var(--default-color), transparent 88%);
  --wpp: #25d366;

  /* Cores lidas do logo: roxo do contorno, laranja do preenchimento e vermelho
     da ponta. O gradiente da marca aparece em detalhes finos, nunca em area
     grande — o protagonista continua sendo a imagem. */
  --marca-roxo: #6b2bb5;
  --marca-laranja: #f5822f;
  --marca-vermelho: #ef4326;
  --marca-gradiente: linear-gradient(135deg, var(--marca-roxo) 0%, var(--marca-laranja) 55%, var(--marca-vermelho) 100%);
}

.light-background {
  --background-color: #101012;
  --surface-color: #1b1b1e;
}

.dark-background {
  --background-color: #060607;
  --surface-color: #161618;
}

body {
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Escala tipografica fluida — secao 18.2 */
h1, .lsf-404 h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 700; line-height: 1.25; }
.section-title h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); }
.lsf-lead { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem); line-height: 1.6; color: color-mix(in srgb, var(--default-color), transparent 8%); }

.section, .lsf-section { padding: clamp(56px, 7vw, 104px) 0; }
.lsf-section .subtitle,
.section-title .subtitle {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1rem;
}

/* Header: nunca transparente, em nenhuma pagina. */
.header,
.index-page .header,
.home-page .header,
.scrolled .header,
.index-page.scrolled .header {
  --background-color: #0b0b0c;
  background-color: #0b0b0c;
  border-bottom: 1px solid var(--linha);
  padding: 8px 0;
}

/* No mobile o CTA do header disputava espaco com a marca e com o hamburger, e
   quebrava em duas linhas. Ele sai abaixo de 1200px — o mesmo ponto em que o
   menu vira hamburger. A conversao nao se perde: o CTA do hero aparece na
   primeira tela e o botao flutuante de WhatsApp acompanha a rolagem. */
@media (max-width: 1199px) {
  .header .btn-getstarted { display: none; }
}

/* Links do menu com respiro menor — o padrao do template deixava a barra fixa
   com 94px, alta demais para uma home cuja dobra e a proposta de valor. */
@media (min-width: 1200px) {
  .navmenu a,
  .navmenu a:focus { padding: 12px 15px; }
}

/* O template limita imagem dentro de .logo a 36px (header) e 40px (footer).
   O simbolo cabe nesse limite; o logo vertical do rodape, nao — por isso os
   seletores abaixo repetem a especificidade do main.css para vencer. */
.header .logo img.lsf-marca-simbolo {
  height: 30px;
  width: auto;
  max-height: none;
  margin-right: 10px;
}

.header .logo .sitename {
  font-family: var(--heading-font, inherit);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--heading-color);
}
.header .logo .sitename span { color: var(--accent-color); font-weight: 300; }

.btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: 2px;
}

/* Alvo de toque do menu mobile: 44x44 minimo (secao 20.2) */
.mobile-nav-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
}
@media (min-width: 1200px) {
  .mobile-nav-toggle { display: none !important; }
}

/* Skip link — secao 20.2 */
.lsf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--accent-color);
  color: #0b0b0c;
  padding: 12px 20px;
  font-weight: 700;
}
.lsf-skip:focus { left: 0; }

/* Foco visivel em tudo que recebe teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* --- Botoes ------------------------------------------------------------- */

.lsf-btn, .lsf-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 30px;
  border-radius: 2px;
  font-family: var(--nav-font, inherit);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: 0.25s;
}

.lsf-btn {
  background: var(--accent-color);
  color: #0b0b0c;
  border: 1px solid var(--accent-color);
}
.lsf-btn:hover { background: color-mix(in srgb, var(--accent-color), #fff 18%); color: #0b0b0c; }

.lsf-btn-ghost {
  background: transparent;
  color: var(--heading-color);
  border: 1px solid var(--linha);
}
.lsf-btn-ghost:hover { border-color: var(--accent-color); color: var(--accent-color); }

.lsf-cta-acoes, .lsf-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2rem;
}

/* --- Hero --------------------------------------------------------------- */

.lsf-hero {
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: clamp(64px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}

.lsf-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% 40%;
  height: 70%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--marca-roxo), transparent 82%), transparent 70%);
  pointer-events: none;
}

.lsf-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1.2rem;
}

.lsf-hero h1 { margin-bottom: 1.4rem; }
.lsf-hero .lsf-lead { max-width: 38ch; }

.lsf-hero-midia { position: relative; }
.lsf-hero-img, .lsf-hero-video {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--linha);
  filter: contrast(1.05);
}

/* --- Blocos com imagem lateral ------------------------------------------ */

.lsf-split-midia { position: relative; }
.lsf-split-midia img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--linha);
}
.lsf-split-midia::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 3px;
  z-index: -1;
}

.lsf-split h2 { margin-bottom: 1.2rem; }
.lsf-split p { margin-bottom: 1rem; }

.lsf-bastidores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lsf-bastidores img { width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--linha); }
.lsf-bastidores img:last-child { margin-top: 28px; }

/* --- Cards de servico (markup .service-item do template) ------------------ */

.services .service-item { text-align: left; padding: 38px 32px; border-radius: 3px; }
.lsf-num {
  font-family: var(--heading-font, inherit);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1.4rem;
  background: var(--marca-gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.services .service-item h3 { margin-bottom: 0.9rem; }
.services .service-item .read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* --- Processo e itens ---------------------------------------------------- */

.lsf-step, .lsf-item, .lsf-publico {
  height: 100%;
  padding: 30px 28px 32px;
  background: var(--surface-color);
  border: 1px solid var(--linha);
  border-radius: 3px;
}
.lsf-step { border-top: 2px solid transparent; border-image: var(--marca-gradiente) 1; }
.lsf-step-num {
  display: block;
  font-family: var(--heading-font, inherit);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  margin-bottom: 1rem;
}
.lsf-step h3, .lsf-item h3, .lsf-publico h3 { margin-bottom: 0.7rem; }
.lsf-step p, .lsf-item p, .lsf-publico p { margin: 0; font-size: 0.98rem; }

.lsf-item-foto { padding: 0 0 30px; overflow: hidden; }
.lsf-item-foto img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 15%;
  margin-bottom: 26px;
  filter: contrast(1.05);
}
.lsf-item-foto h3, .lsf-item-foto p { padding: 0 28px; }

.lsf-lista { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.lsf-lista li {
  position: relative;
  padding: 0 0 14px 30px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 14px;
}
.lsf-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1px;
  background: var(--accent-color);
}
.lsf-canais li { padding-left: 0; }
.lsf-canais li::before { display: none; }

/* --- Producao recorrente ------------------------------------------------- */

.lsf-recorrente { background: var(--surface-color); }
.lsf-fluxo {
  list-style: none;
  counter-reset: fluxo;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.lsf-fluxo li {
  counter-increment: fluxo;
  position: relative;
  padding: 18px 20px 18px 74px;
  background: var(--background-color);
  border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  font-family: var(--heading-font, inherit);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-color);
}
.lsf-fluxo li::before {
  content: "0" counter(fluxo);
  position: absolute;
  left: 24px;
  color: var(--accent-color);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

/* --- Portfolio ----------------------------------------------------------- */

.lsf-empty {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 28px;
  background: var(--surface-color);
  border: 1px dashed color-mix(in srgb, var(--default-color), transparent 78%);
  border-radius: 3px;
}
.lsf-empty i { font-size: 2.6rem; color: var(--accent-color); display: block; margin-bottom: 1.2rem; }
.lsf-empty h3 { margin-bottom: 0.9rem; }
.lsf-empty p { margin-bottom: 1.8rem; }

/* --- FAQ (details/summary, sem JS) --------------------------------------- */

.lsf-faq-item {
  border-bottom: 1px solid var(--linha);
}
.lsf-faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 24px 48px 24px 0;
  font-family: var(--heading-font, inherit);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 600;
  color: var(--heading-color);
}
.lsf-faq-item summary::-webkit-details-marker { display: none; }
.lsf-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent-color);
  line-height: 1;
}
.lsf-faq-item[open] summary::after { content: "\2212"; }
.lsf-faq-item summary:hover { color: var(--accent-color); }
.lsf-faq-resposta { padding: 0 48px 24px 0; }
.lsf-faq-resposta p { margin: 0; }

/* --- CTA final ----------------------------------------------------------- */

.lsf-cta { background: var(--surface-color); }
.lsf-cta-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.lsf-cta-inner h2 { margin-bottom: 1rem; }
.lsf-cta-inner .lsf-cta-acoes { justify-content: center; }

/* --- Paginas legais e 404 ------------------------------------------------ */

.lsf-legal-texto h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 600; margin: 2.4rem 0 1rem; }
.lsf-legal-texto h3 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; }
.lsf-aviso {
  padding: 18px 22px;
  border-left: 2px solid var(--accent-color);
  background: var(--surface-color);
  margin-bottom: 2rem;
}
/* --- Bloco de norma nas verticais reguladas ------------------------------- */
/* Os dois cartoes (o que a norma permite x o que veda) e a nota de rodape que
   diz de onde a regra saiu. A norma citada e sempre verificada e datada: e o
   que separa estas paginas de landing que repete regra revogada. */
.lsf-item .lsf-lista { margin-top: 0.75rem; }
.lsf-nota-norma {
  margin: 28px auto 0;
  max-width: 760px;
  padding: 16px 20px;
  border-left: 2px solid var(--accent-color);
  background: var(--surface-color);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--default-color);
}

/* --- Alvos de toque ------------------------------------------------------ */
/* O template entregava tres alvos abaixo dos 44px do WCAG 2.2: voltar ao topo
   e o icone do Instagram em 40x40, e o link do breadcrumb em 34x17. Nenhum e
   CTA principal, mas sao cliques frequentes e ficam desconfortaveis no polegar.
   Link dentro de frase (como o da politica no banner de cookies) fica de fora
   de proposito — a propria norma abre excecao para link em texto corrido. */
.scroll-top {
  width: 44px !important;
  height: 44px !important;
}
.footer .social-links a {
  width: 44px;
  height: 44px;
}
.breadcrumbs a,
.breadcrumbs .current {
  display: inline-block;
  padding: 13px 2px;
}
/* Links de lista do rodape, dos canais de contato e o "Conhecer" dos cards
   vinham como linha de texto de 14px de altura — abaixo mesmo do minimo de
   24px do WCAG 2.2 AA. */
.footer .footer-links ul a,
.footer .footer-contact a,
.lsf-canais a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.25;
}
.services .read-more,
a.read-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Quadro comparativo do hub de servicos. Em vez de tabela de 4 colunas, que
   estoura em 375px, sao tres cartoes com as mesmas linhas rotuladas. */
.lsf-compara {
  height: 100%;
  padding: 28px 24px;
  background: var(--surface-color);
  border: 1px solid var(--linha);
  border-radius: 4px;
}
.lsf-compara h3 { font-size: 1.2rem; margin-bottom: 18px; }
.lsf-compara dl { margin: 0 0 22px; }
.lsf-compara dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-top: 14px;
}
.lsf-compara dd {
  margin: 4px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* O verbo de cada etapa do funil: vem do posicionamento (atrair, demonstrar,
   humanizar, orientar), e funciona como rotulo, nao como texto corrido. */
.lsf-funil-verbo {
  margin: -6px 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-color);
}

.lsf-404 { padding-top: clamp(140px, 18vh, 220px); }
.lsf-404-rotas {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.lsf-404-rotas a {
  display: inline-block;
  padding: 12px 4px;            /* alvo de toque de 44px de altura */
  color: var(--default-color);
  font-size: 0.95rem;
}
.lsf-404-rotas a:hover { color: var(--accent-color); }

/* --- Footer -------------------------------------------------------------- */

.footer { background: #060607; border-top: 1px solid var(--linha); }
.footer .footer-about .logo img.lsf-marca-logo {
  width: 196px;
  height: auto;
  max-height: none;
  max-width: 100%;
  margin-right: 0;
}
.footer .footer-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-color);
  padding-bottom: 12px;
  margin: 0;
}
.footer .lsf-legal a { color: var(--default-color); }
.footer .lsf-legal a:hover { color: var(--accent-color); }
.footer-contact a { color: var(--default-color); }
.footer-contact a:hover { color: var(--accent-color); }

/* --- WhatsApp flutuante (verde oficial, sempre) --------------------------- */

.lsf-wpp {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 998;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wpp);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s;
}
.lsf-wpp i { font-size: 1.8rem; line-height: 1; }
.lsf-wpp:hover { transform: scale(1.06); color: #fff; }

/* --- Banner de cookies ---------------------------------------------------- */

.lsf-cookies {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 24px;
  background: #141416;
  border: 1px solid var(--linha);
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.lsf-cookies p { margin: 0 0 16px; font-size: 0.92rem; }
.lsf-cookies-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.lsf-cookies-acoes button { min-height: 44px; cursor: pointer; }
.lsf-cookies[hidden] { display: none; }
/* Link dentro do texto: so a cor o separava da frase (1,74:1 contra o texto).
   O sublinhado resolve sem mudar a cor (WCAG 1.4.1). */
.lsf-cookies p a { text-decoration: underline; text-underline-offset: 2px; }

/* No celular o painel ocupava 274 de 812 px (33,7%) e cobria o CTA da home.
   Menos respiro e os dois botoes na mesma linha, com o mesmo peso, deixam o
   painel abaixo de 20% da tela. */
@media (max-width: 767px) {
  .lsf-cookies { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; }
  .lsf-cookies p { margin: 0 0 10px; font-size: 0.8rem; line-height: 1.45; }
  .lsf-cookies-acoes { flex-wrap: nowrap; gap: 8px; }
  .lsf-cookies-acoes .lsf-btn,
  .lsf-cookies-acoes .lsf-btn-ghost {
    flex: 1 1 0;
    width: auto;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  /* o "voltar ao topo" (z-index 99999) caia em cima de "Aceitar medição" */
  body.lsf-cookies-na-tela .scroll-top { visibility: hidden; }
}

/* O painel e fixo no rodape e cobria 100% do CTA secundario da primeira tela —
   em desktop e no mobile, em toda pagina. Quem chega pela primeira vez so via a
   opcao secundaria depois de decidir sobre cookies.

   Dois ajustes, nenhum deles escondendo o banner: em tela larga o texto e os
   botoes dividem a mesma linha, o que corta a altura quase pela metade e
   descobre a faixa onde os CTAs ficam; e o body reserva a altura do painel
   enquanto ele estiver na tela, para o rodape nao terminar embaixo dele. */
@media (min-width: 768px) {
  .lsf-cookies {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 860px;
    padding: 14px 20px;
  }
  .lsf-cookies p { margin: 0; flex: 1 1 auto; }
  .lsf-cookies-acoes { flex: 0 0 auto; flex-wrap: nowrap; }
}

body.lsf-cookies-na-tela { padding-bottom: 150px; }

@media (min-width: 768px) {
  body.lsf-cookies-na-tela { padding-bottom: 96px; }
}

/* --- Responsivo ----------------------------------------------------------- */

@media (max-width: 991px) {
  .lsf-hero { padding-top: 110px; }
  /* Ordem obrigatoria no mobile (secao 18.4): texto e CTA antes da midia. */
  .lsf-hero .row > [class*="col-"]:first-child { order: 1; }
  .lsf-hero .row > [class*="col-"]:last-child { order: 2; }
  .lsf-hero-midia { max-width: 420px; }
  .lsf-split-midia::before { display: none; }
  .lsf-bastidores img:last-child { margin-top: 0; }
}

@media (max-width: 575px) {
  .lsf-btn, .lsf-btn-ghost { width: 100%; }
  .header .logo img.lsf-marca-simbolo { height: 26px; margin-right: 8px; }
  .header .logo .sitename { font-size: 1.15rem; }
  .lsf-cta-acoes, .lsf-hero-acoes { gap: 10px; }
  .lsf-wpp { width: 52px; height: 52px; bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Menu: mega menu de Segmentos e acordeao acessivel
   Secao 5 do Documento Tecnico de Pendencias V2. O gatilho de submenu deixou
   de ser um <i> decorativo e virou <button aria-expanded>, entao ele precisa
   perder a aparencia de botao e ganhar o comportamento de abrir em ambos os
   breakpoints — antes o painel so abria por :hover, o que deixava o teclado
   de fora no desktop.
   ========================================================================== */

.navmenu .toggle-dropdown {
  background: none;
  border: 0;
  padding: 0 4px;
  margin: 0;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  /* area de toque minima no desktop (era 20x17 px; WCAG 2.5.8 pede 24x24) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
}

.navmenu .toggle-dropdown i {
  font-size: 12px;
  transition: transform 0.3s;
  display: inline-block;
}

.navmenu .toggle-dropdown[aria-expanded="true"] i { transform: rotate(180deg); }

.navmenu .toggle-dropdown:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (min-width: 1200px) {

  /* O item pai agrupa <a> + <button> + painel. Sem o flex aqui o botao cai
     para a linha de baixo, porque o <a> do tema tem padding de 18px e os dois
     nao cabem lado a lado no fluxo inline. */
  .navmenu .dropdown {
    display: flex;
    align-items: center;
  }

  .navmenu .dropdown > a { padding-right: 4px; }
  .navmenu .dropdown > .toggle-dropdown { color: var(--nav-color); }
  .navmenu .dropdown:hover > .toggle-dropdown,
  .navmenu .dropdown > a.active ~ .toggle-dropdown { color: var(--nav-hover-color); }

  /* teclado: sem isto, o painel so abria no hover */
  .navmenu .dropdown > ul.dropdown-active {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  /* --- mega menu em colunas (secao 5 do documento V4).
     Quatro grupos — Saude, Medicos, Beleza e Autoridade Profissional — mais a
     coluna de ajuda que fecha o painel. Grupo sem pagina pronta nao e
     renderizado no HTML, entao o flex se ajusta sozinho.

     O painel nao se ancora no item, e sim no header (que e fixed-top).
     Ancorado no item, ele crescia para a esquerda conforme as colunas eram
     adicionadas: com tres colunas ja vazava para fora da tela. Ancorado no
     header, vira uma faixa da largura da janela e aguenta as cinco colunas
     sem tocar em CSS de novo. */
  .navmenu .lsf-mega { position: static; }

  .navmenu .lsf-mega > ul {
    display: flex;
    /* stretch, e nao flex-start: com flex-start cada coluna so tem a altura do
       proprio conteudo e as divisorias terminam em alturas diferentes */
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px 14px;
    left: 0;
    right: 0;
    border-radius: 0;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu .lsf-mega > ul > li {
    min-width: 236px;
    flex: 0 0 auto;
  }

  /* A coluna mais alta tem 9 links; com o respiro do tema o painel passava de
     480px de altura e cobria metade da dobra. O seletor precisa dos dois tipos
     (ul, a) para vencer `.navmenu .dropdown ul a` do tema — com um a menos ele
     perde por especificidade e o padding do tema volta calado. */
  .navmenu .lsf-mega > ul > li > .lsf-mega-lista a {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .navmenu .lsf-mega > ul > li + li {
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    padding-left: 10px;
  }

  /* A lista de dentro nao e um segundo dropdown: ela mora na coluna.
     O seletor e longo de proposito: `.navmenu .dropdown ul` do main.css tem
     especificidade (0,2,1) e vence qualquer coisa mais curta que isto — com
     `.navmenu .lsf-mega-lista` o painel abria mostrando so os titulos. */
  .navmenu .lsf-mega > ul > li > .lsf-mega-lista {
    position: static;
    display: block;
    visibility: visible;
    opacity: 1;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  /* No desktop o titulo da coluna e so titulo: quem abre e fecha o painel e o
     <button> do primeiro nivel. O elemento continua sendo <button> porque no
     mobile ele vira o acionador do acordeao (secao 9.1) — aqui ele so perde a
     interatividade. O aria-expanded e acertado pelo main.js. */
  .navmenu .lsf-mega-titulo {
    pointer-events: none;
    width: 100%;
    text-align: left;
  }

  .navmenu .lsf-mega-titulo::after { display: none; }

  /* Secao 10.1: abrir com atraso curto e fechar com tolerancia, para o painel
     nao sumir quando o cursor atravessa o vao entre o rotulo e a coluna. */
  .navmenu .dropdown > ul {
    transition: opacity 0.2s ease, top 0.2s ease, visibility 0.2s ease;
    transition-delay: 250ms;
  }

  .navmenu .dropdown:hover > ul { transition-delay: 120ms; }
  .navmenu .dropdown > ul.dropdown-active { transition-delay: 0ms; }

  /* "Nao encontrou sua profissao?" fecha o painel com a saida de conversa. */
  .navmenu .lsf-mega-ajuda { align-self: stretch; }

  .navmenu .lsf-mega-ajuda a {
    color: var(--accent-color);
    font-weight: 600;
  }

  .navmenu .lsf-menu-hub a { font-weight: 600; }

  /* Secao 10.1: a area atual precisa se identificar tambem dentro do painel.
     Sem isto o `.active` do link interno perdia para `.navmenu .dropdown ul a`
     do tema, que tem especificidade maior, e so aparecia no hover. */
  .navmenu .dropdown ul a.active { color: var(--accent-color); }


  /* o CTA mora no painel mobile; no desktop quem converte e o botao do header */
  .navmenu .lsf-cta-mobile { display: none; }
}

/* Titulo de coluna do mega menu — mesmo elemento nos dois tamanhos de tela,
   papel diferente: titulo no desktop, acionador de acordeao no mobile. */
.navmenu .lsf-mega-titulo {
  display: block;
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 20px;
  font-family: var(--nav-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nav-dropdown-color), transparent 35%);
}

.navmenu .lsf-mega-titulo:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: 3px;
}

/* o <a> do tema e flex com space-between: sem isto a seta vai para a outra
   ponta da linha no mobile e cola no texto no desktop */
.navmenu .lsf-menu-hub a,
.navmenu .lsf-mega-ajuda a {
  gap: 6px;
  justify-content: flex-start;
}

.navmenu .lsf-menu-hub {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.navmenu .lsf-mega-titulo-texto {
  padding: 6px 20px;
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--nav-dropdown-color), transparent 30%);
}

@media (max-width: 1199px) {

  /* Secao 9.1: no mobile o mega menu nao vira lista unica de 24 links. Cada
     grupo e um acordeao, e o main.js mantem um aberto por vez. */
  .navmenu .lsf-mega > ul > li > .lsf-mega-lista {
    display: none;
    position: static;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .navmenu .lsf-mega > ul > li > .lsf-mega-lista.aberta { display: block; }

  /* O tema usa white-space: nowrap nos links do menu, e "Otorrinolaringologistas"
     estoura o painel em 390px — o menu ganhava rolagem horizontal. A secao 10
     proibe encurtar esse rotulo, entao quem cede e a linha, nao a palavra. */
  .navmenu .lsf-mega > ul > li > .lsf-mega-lista a { white-space: normal; }

  .navmenu .lsf-mega-titulo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* area de toque confortavel, como pede a secao 12 */
    min-height: 48px;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--nav-dropdown-color);
    cursor: pointer;
  }

  /* seta em CSS: o subset de icones do site tem 7 glifos e nao vale crescer
     por causa do acordeao */
  .navmenu .lsf-mega-titulo::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.3s;
  }

  .navmenu .lsf-mega-titulo[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .navmenu .lsf-mega > ul > li + li {
    margin-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    padding-top: 6px;
  }

  .navmenu .lsf-mega-ajuda { padding: 4px 0 8px; }
  .navmenu .lsf-mega-ajuda a { color: var(--accent-color); }

  /* o gatilho fica na mesma linha do link, e o painel cai inteiro embaixo */
  .navmenu .dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .navmenu .dropdown > a { flex: 1 1 auto; }

  /* flex-basis 100% mais a margem lateral de 20px do tema davam 375px dentro
     de um painel de 335px: o menu mobile ganhava rolagem horizontal. O painel
     ja tem respiro proprio, entao quem sai e a margem, nao a largura. */
  .navmenu .dropdown > ul {
    flex: 1 0 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* area de toque confortavel, como pede a secao 5.2 */
  .navmenu .toggle-dropdown {
    padding: 12px 16px;
    min-width: 48px;
    min-height: 48px;
  }

  /* Secao 8: o CTA do header some abaixo de 1200px para nao disputar espaco
     com a marca e o hamburger. Ele reaparece aqui, no fim do painel, que e
     onde a secao 9 o desenha. */
  .navmenu .lsf-cta-mobile { margin: 10px 20px 4px; }

  .navmenu .lsf-cta-mobile a {
    justify-content: center;
    background: var(--accent-color);
    color: #0b0b0c;
    font-weight: 700;
    border-radius: 4px;
    padding: 14px 20px;
    min-height: 48px;
  }

  .navmenu .lsf-cta-mobile a:hover { color: #0b0b0c; }
}