/* Lucas Marinho Advocacia — folha de estilo única do site.
   Sem framework e sem nenhuma requisição a terceiros: a fonte é servida de
   fonts/, os tokens do design system estão achatados aqui embaixo e o layout
   de cada bloco vive no atributo style= do próprio index.html. */

/* ══════════════════════════════════════════════════════════════════════════
   Montserrat — subconjuntos latin e latin-ext, pesos 400 a 800.
   O unicode-range faz o navegador baixar só o arquivo que a página precisa.
   ══════════════════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-800.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tokens — a paleta e a tipografia do site. Mudar uma cor aqui muda ela na
   página inteira; os únicos valores literais no HTML são o azul-noite de
   fundo (#121226) e o dourado claro (#e2c790).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f7f6f4;
  --color-surface: #ecebe7;
  --color-text: #141424;
  --color-divider: rgba(20, 20, 36, 0.35);

  /* dourado da marca, do mais claro ao mais escuro */
  --color-accent: #b28b53;
  --color-accent-100: #f6efe4;
  --color-accent-200: #ebdcc3;
  --color-accent-300: #dbc59d;
  --color-accent-400: #c7a674;
  --color-accent-500: #b28b53;
  --color-accent-600: #9a7745;
  --color-accent-700: #7c6038;
  --color-accent-800: #5b462a;
  --color-accent-900: #121226;

  --color-neutral-100: #faf9f8;
  --color-neutral-200: #e6e5e1;
  --color-neutral-300: #cfcecb;
  --color-neutral-700: #56555f;
  --color-neutral-800: #343340;
  --color-neutral-900: #121226;

  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Montserrat", system-ui, sans-serif;

  --space-2: 8px;
  --space-3: 12px;

  /* arredondamento dos botões de contato — mexer aqui muda todos de uma vez */
  --radius-cta: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════════════════ */

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

html {
  /* o cabeçalho é sticky: sem isso a âncora joga a seção para trás dele */
  scroll-padding-top: 84px;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-accent-700);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-600);
}

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

figure {
  margin: 0;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: rgba(178, 139, 83, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   Botões de contato
   O resto do site é propositalmente angular (o design system zera todos os
   raios). Os botões são a exceção: quadrados eles ficavam duros demais.
   Vêm em duas versões, definidas no style= de cada um — dourado sobre os
   blocos escuros, azul-noite sobre os claros — e o hover é o mesmo nos dois.
   ══════════════════════════════════════════════════════════════════════════ */

.lm-h-cta {
  border-radius: var(--radius-cta);
}

/* ══════════════════════════════════════════════════════════════════════════
   Hover — cada regra leva !important porque precisa vencer o style= do
   elemento, que tem prioridade maior que qualquer classe.
   ══════════════════════════════════════════════════════════════════════════ */

/* links do menu */
.lm-h-nav:hover { color: #e2c790 !important; }

/* botões de contato, nas duas versões */
.lm-h-cta:hover { background: #e2c790 !important; border-color: #e2c790 !important; color: #121226 !important; }

/* botão flutuante do WhatsApp */
.lm-h-float:hover { background: #24244a !important; border-color: #e2c790 !important; }

/* perguntas do FAQ */
.lm-h-faq:hover { color: var(--color-accent-700) !important; }

/* botão de voltar ao topo */
.lm-h-top:hover { background: var(--color-accent) !important; color: #121226 !important; }

/* links sobre fundo quase preto: o a:hover global escurece o dourado, o que
   some no fundo do footer e da seção de contato. Aqui o hover clareia. */
.lm-h-dev:hover { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsivo — as grades do desktop viram coluna única e o cabeçalho encolhe.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1120px) {
  .lm-nav-links { display: none !important; }
}

/* O par de botões flutuantes ocupa os 150px inferiores da tela (24px de margem
   + 122px de altura). Acima de ~1400px o conteúdo do rodapé termina antes
   deles; abaixo disso as duas últimas linhas ficavam presas atrás dos ícones,
   sem como rolar para fora. O espaço reservado não fica vazio: é onde os
   próprios botões pousam quando a página chega ao fim. */
@media (max-width: 1400px) {
  footer > div { padding-bottom: 170px !important; }
}

@media (max-width: 860px) {
  .lm-2col,
  .lm-3col,
  .lm-hero { grid-template-columns: 1fr !important; }
  .lm-edge { border-right: 0 !important; }

  /* "Como funciona o atendimento": no desktop o primeiro passo não tem padding
     à esquerda (encosta na margem da grade) e os outros dois têm 28px.
     Empilhados, isso deixava os passos 2 e 3 deslocados. Todos passam a
     começar na margem. */
  #atendimento .lm-3col > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #atendimento .lm-3col > div + div {
    border-top: 2px solid var(--color-divider);
  }

  /* borda vertical da grade de áreas, que em coluna única virava um risco
     solto na lateral direita */
  #areas .lm-3col > div { border-right: 0 !important; }
}

@media (max-width: 700px) {
  .lm-hero-copy { padding: 44px 20px 48px !important; }
  .lm-sobre-copy { padding: 44px 20px 48px !important; }
  .lm-sec { padding-left: 20px !important; padding-right: 20px !important; }
  .lm-stats { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .lm-faq-grid { gap: 24px !important; }

  /* Botões do corpo da página: no celular o texto quebrava em duas linhas
     dentro de um retângulo enorme, e cada botão tinha uma largura diferente.
     Agora todos ocupam a largura da coluna, com o texto centralizado e menor.
     O seletor exclui de propósito o botão do cabeçalho, que não é filho de
     <section> e precisa continuar do tamanho do conteúdo. */
  section .lm-h-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
    line-height: 1.3;
    padding: 15px 14px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 68px; }
  .lm-brand-sub { display: none !important; }
  .lm-brand-mark { height: 40px !important; }
  .lm-head { height: 68px !important; }
  .lm-float { right: 14px !important; bottom: 14px !important; }

  /* Sem largura para a marca e o botão ao mesmo tempo, o cabeçalho ficava
     apertado. O botão sai da tela: o flutuante do WhatsApp continua visível
     o tempo todo, então nenhum caminho de contato se perde. */
  .lm-head > .lm-h-cta { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ — o "+" gira 45° e vira "×" quando a pergunta abre.
   ══════════════════════════════════════════════════════════════════════════ */

.lm-faq summary {
  list-style: none;
  cursor: pointer;
}

.lm-faq summary::-webkit-details-marker {
  display: none;
}

.lm-faq .lm-faq-sign > span {
  transition: transform 0.18s ease;
}

.lm-faq details[open] .lm-faq-sign > span {
  transform: rotate(45deg);
}

.lm-faq details[open] summary {
  color: var(--color-accent-700);
}