/* ============================================================
   SOS DIREITO — Layout: containers, seções, grids
   ============================================================ */

/* ---- Containers ----
   Duas larguras para o site inteiro, sem exceção — cabeçalho incluso,
   para que a margem de toda seção fique sempre na mesma linha do menu:

   .container            1320px — padrão. Cabeçalho, heróis, CTAs,
                          grids, blog, contato, calculadora. É o que
                          quase toda seção do site usa.
   .container--estreito   860px — texto corrido e accordions (FAQ,
                          glossário de Como Funciona, blocos 5-8 do
                          L-1A, fechamento do Sobre, 404). Existe por
                          legibilidade: em 1200px uma linha de texto
                          passaria de 140 caracteres. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito{ max-width: 860px; }

/* Exceção única, documentada: os Blocos 1 e 2 do L-1A são frases
   isoladas em tipo gigante (Roses Bolero, até 2rem) — mesmo o
   container estreito deixaria a linha longa demais para esse
   tamanho de fonte. Não reutilizar em outro lugar sem o mesmo motivo. */
.container--leitura { max-width: 720px; }

/* ---- Seções ---- */
.secao {
  position: relative;
  padding-block: var(--sp-secao);
}
.secao--densa { padding-block: var(--sp-secao-densa); }
.secao--ampla { padding-block: var(--sp-secao-ampla); }
.secao--sem-topo  { padding-top: 0; }
.secao--sem-base  { padding-bottom: 0; }

/* Fundos de seção */
.secao--marfim  { background: var(--marfim); }
.secao--marfim2 { background: var(--marfim-200); }

.secao--apoio {
  background: var(--apoio);
  color: var(--texto-inverso);
}
.secao--apoio h1, .secao--apoio h2, .secao--apoio h3, .secao--apoio h4 { color: var(--marfim); }
.secao--apoio p  { color: var(--texto-inverso-suave); }
.secao--apoio a  { color: var(--marfim); }

.secao--principal {
  background: var(--principal);
  color: var(--texto-inverso);
}
.secao--principal h1, .secao--principal h2, .secao--principal h3, .secao--principal h4 { color: var(--marfim); }
.secao--principal p { color: var(--texto-inverso-suave); }
.secao--principal a { color: var(--marfim); }

/* ---- Cabeçalho de seção ---- */
.secao__cabecalho {
  max-width: var(--medida);
  margin-bottom: var(--sp-8);
}
.secao__cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}
.secao__cabecalho > * + * { margin-top: var(--sp-4); }

/* ---- Pilha vertical ---- */
.pilha > * + *      { margin-top: var(--sp-4); }
.pilha-2 > * + *    { margin-top: var(--sp-2); }
.pilha-5 > * + *    { margin-top: var(--sp-5); }
.pilha-6 > * + *    { margin-top: var(--sp-6); }
.pilha-8 > * + *    { margin-top: var(--sp-8); }

/* ---- Grids ---- */
.grid {
  display: grid;
  gap: var(--sp-5);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Duas colunas assimétricas: texto + apoio */
.grid--texto-apoio {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .grid--3, .grid--4, .grid--texto-apoio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid--2 { grid-template-columns: 1fr; }
}

/* ---- Linha divisória ---- */
.filete {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin-block: var(--sp-8);
}
.secao--apoio .filete, .secao--principal .filete { background: var(--hairline-inversa); }

/* ---- Marca d'água ----
   Usa o monograma real da identidade (assets/img/logo-monograma.svg),
   em opacidade muito baixa, como textura de fundo. */
.monograma-fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-base);
}
/* Duas camadas com a mesma máscara: ::before é a marca parada, ::after é
   a luz que a percorre. Como as duas usam o recorte do símbolo, a luz só
   existe dentro do desenho — nunca vaza como um retângulo. */
.monograma-fundo::before,
.monograma-fundo::after {
  content: '';
  position: absolute;
  width: clamp(400px, 52vw, 820px);
  aspect-ratio: 2.1628;
  -webkit-mask: url('../img/logo-monograma.svg') center / contain no-repeat;
  mask: url('../img/logo-monograma.svg') center / contain no-repeat;
}
.monograma-fundo::before {
  background: var(--principal);
  opacity: 0.05;
}

/* A faixa é 2,5x mais larga que o símbolo e caminha de uma borda à outra.
   Nos dois extremos do ciclo ela está fora do desenho, então o retorno
   não aparece: o movimento fica contínuo, sem corte. */
.monograma-fundo::after {
  background: linear-gradient(100deg,
    transparent 40%,
    var(--principal) 50%,
    transparent 60%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  opacity: 0.06;
  animation: monogramaLuz 9s linear infinite;
}
@keyframes monogramaLuz {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Sangra pela borda: a marca fica como textura no canto, sem sentar
   atrás do texto e virar ruído de leitura. */
.monograma-fundo--dir::before,
.monograma-fundo--dir::after { right: -22%; top: 50%; transform: translateY(-50%); }
.monograma-fundo--esq::before,
.monograma-fundo--esq::after { left: -22%;  top: 50%; transform: translateY(-50%); }

/* Abaixo de tablet o conteúdo ocupa a largura toda: a marca d'água
   passaria por baixo do texto inteiro. */
@media (max-width: 900px) {
  .monograma-fundo::before { opacity: 0.035; }
  .monograma-fundo::after  { opacity: 0.045; }
}

.secao--apoio .monograma-fundo::before,
.secao--principal .monograma-fundo::before { background: var(--marfim); opacity: 0.07; }
/* Sobre fundo escuro quem passa é luz clara, não a cor da marca. */
.secao--apoio .monograma-fundo::after,
.secao--principal .monograma-fundo::after {
  background-image: linear-gradient(100deg,
    transparent 40%,
    var(--marfim) 50%,
    transparent 60%);
  opacity: 0.09;
}

/* Movimento é enfeite: quem pediu para reduzir fica com a marca parada. */
@media (prefers-reduced-motion: reduce) {
  .monograma-fundo::after { animation: none; opacity: 0; }
}

/* O conteúdo sempre acima do monograma e da trilha */
.secao > .container { position: relative; z-index: var(--z-conteudo); }