/* =============================================================================
   Observatório de Loures — design system
   =============================================================================
   Implementação dos frames do Figma `gPxFkO5N8QKxxEXvyb6BcV`.
   Depende de `tokens.css`, que tem de ser carregado antes deste ficheiro.

   Convenção: tudo tem prefixo `lrs-`, para conviver sem colisões com o CSS
   herdado do Observatório de Gaia enquanto a migração das páginas decorre.

   Medidas: os valores em px vêm directamente da geometria do Figma. O layout
   desktop é fiel ao frame de 1440px; abaixo de 1024px passa às regras do frame
   mobile de 393px.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

.lrs {
  margin: 0;
  font-family: var(--lrs-fonte);
  color: var(--lrs-texto);
  background: var(--lrs-branco);
  -webkit-font-smoothing: antialiased;
}

.lrs img {
  max-width: 100%;
}

.lrs a {
  color: inherit;
  text-decoration: none;
}

.lrs h1,
.lrs h2,
.lrs h3,
.lrs p,
.lrs ul {
  margin: 0;
}

.lrs ul {
  padding: 0;
  list-style: none;
}

/* Faixa central de 1230px, com as margens de 105px do desenho. */
.lrs-conteudo {
  width: 100%;
  max-width: calc(var(--lrs-conteudo) + var(--lrs-margem) * 2);
  margin-inline: auto;
  padding-inline: var(--lrs-margem);
}

/* A `base.html` aplica a faixa ao <main> para as páginas ainda por migrar.
   As já migradas trazem a sua própria — aninhar não deve duplicar a margem. */
.lrs-conteudo .lrs-conteudo {
  max-width: none;
  padding-inline: 0;
}

/* -----------------------------------------------------------------------------
   2. Barra de topo — Figma 4026:277
   -------------------------------------------------------------------------- */

.lrs-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 20px;
  background: var(--lrs-gradiente);
}

.lrs-topbar__texto {
  font: 700 16px/19px var(--lrs-fonte);
  color: var(--lrs-texto);
  text-align: center;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   3. Navbar — Figma 4026:134
   -------------------------------------------------------------------------- */

.lrs-navbar {
  background: var(--lrs-branco);
  box-shadow: 0 1px 0.5px var(--lrs-sombra);
}

.lrs-navbar__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 78px;
  padding-block: 10px;
}

.lrs-navbar__logo {
  display: block;
  flex-shrink: 0;
  width: 145px;
  height: 58px;
}

.lrs-navbar__menu {
  display: flex;
  gap: 32px;
  align-items: center;
}

.lrs-navbar__link {
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto);
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.lrs-navbar__link:hover,
.lrs-navbar__link[aria-current='page'] {
  color: var(--lrs-azul);
}

.lrs-navbar__idiomas {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  font: 400 16px/19px var(--lrs-fonte-idioma);
  color: var(--lrs-texto-medio);
  text-transform: uppercase;
}

.lrs-navbar__idioma--activo {
  font-family: var(--lrs-fonte);
  font-weight: 700;
}

/* Botão hambúrguer — só aparece em mobile (frame 4049:500). */
.lrs-navbar__hamburguer {
  display: none;
  padding: 4px;
  color: var(--lrs-texto);
  cursor: pointer;
  background: none;
  border: 0;
}

.lrs-navbar__hamburguer svg {
  display: block;
}

/* -----------------------------------------------------------------------------
   4. Cabeçalho de secção — Figma "Frame 108", repetido em todas as secções
   -------------------------------------------------------------------------- */

.lrs-seccao {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.lrs-seccao__cabecalho {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
}

.lrs-seccao__titulo {
  display: flex;
  gap: 10px;
  align-items: center;
  font: 600 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto);
  text-transform: uppercase;
}

/* O ponto verde que marca cada secção. */
.lrs-seccao__titulo::before {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  content: '';
  background: var(--lrs-verde);
  border-radius: 50%;
}

.lrs-seccao__ver-mais {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  align-items: center;
  font: 600 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto-link);
  text-transform: uppercase;
}

/* Chevron desenhado em CSS — no Figma é um Vector de 5x10 com traço de 2px. */
.lrs-seccao__ver-mais::after {
  width: 5px;
  height: 5px;
  content: '';
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  transform: rotate(45deg);
}

.lrs-seccao__ver-mais:hover {
  color: var(--lrs-azul);
}

/* -----------------------------------------------------------------------------
   5. Botões — Figma "Component 1"
   -------------------------------------------------------------------------- */

.lrs-botao {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-branco);
  text-transform: uppercase;
  cursor: pointer;
  background: var(--lrs-azul);
  border: 0;
  border-radius: var(--lrs-raio-pilula);
  transition: background-color 0.15s ease;
}

.lrs-botao:hover {
  background: var(--lrs-azul-escuro);
}

.lrs-botao--escuro {
  background: var(--lrs-texto-link);
}

.lrs-botao--escuro:hover {
  background: var(--lrs-texto);
}

/* -----------------------------------------------------------------------------
   6. Hero — Figma 4018:103
   -------------------------------------------------------------------------- */

.lrs-hero {
  display: grid;
  grid-template-columns: 605fr 605fr;
  gap: 20px;
  align-items: center;
  padding-block: 28px;
}

.lrs-hero__texto {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}

.lrs-hero__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lrs-hero__titulo {
  font: 700 48px/56px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-hero__resumo {
  font: 400 22px/30px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-hero__figura {
  aspect-ratio: 605 / 611;
  overflow: hidden;
  background: var(--lrs-placeholder);
  border-radius: var(--lrs-raio-cartao);
}

.lrs-hero__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etiqueta com ponto verde, igual à dos cabeçalhos mas em contexto de hero. */
.lrs-etiqueta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font: 600 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto);
  text-transform: uppercase;
}

.lrs-etiqueta::before {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  content: '';
  background: var(--lrs-verde);
  border-radius: 50%;
}

/* Linha de metadados: data · tempo de leitura · fonte. */
.lrs-meta {
  font: 400 12px/16px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

/* -----------------------------------------------------------------------------
   7. Cartões de notícia — Figma "Component 2/3/4" (395x395)
   -------------------------------------------------------------------------- */

.lrs-grelha-cartoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.lrs-cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--lrs-branco);
  border: 1px solid var(--lrs-borda);
  border-radius: var(--lrs-raio-cartao);
  transition: box-shadow 0.15s ease;
}

.lrs-cartao:hover {
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}

.lrs-cartao__figura {
  aspect-ratio: 395 / 221;
  background: var(--lrs-placeholder);
}

.lrs-cartao__figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lrs-cartao__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
}

.lrs-cartao__titulo {
  font: 600 22px/28px var(--lrs-fonte);
  color: var(--lrs-texto);
}

/* -----------------------------------------------------------------------------
   7b. Cabeçalho de página de índice — Figma "Frame 71" (4057:317 e irmãos)
   -------------------------------------------------------------------------- */

.lrs-cabecalho-pagina {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 76px 30px;
}

.lrs-cabecalho-pagina__titulo {
  font: 700 48px/56px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-cabecalho-pagina__subtitulo {
  max-width: 780px;
  font: 400 22px/30px var(--lrs-fonte);
  color: var(--lrs-texto);
}

/* Na grelha das páginas de índice, as linhas afastam-se 30px e as colunas 22px
   (Figma "Frame 122": col gap30 sobre "Frame 64": row gap22). */
.lrs-grelha-cartoes--indice {
  row-gap: 30px;
}

/* Botão "ver mais" centrado no fim da listagem. */
.lrs-paginacao {
  display: flex;
  justify-content: center;
  padding-block: 53px;
}

/* -----------------------------------------------------------------------------
   7c. Estatísticas — Figma 4067:704 (grelha de gráficos)
   -------------------------------------------------------------------------- */

.lrs-grelha-graficos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 52px 23px;
}

.lrs-grafico {
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.lrs-grafico__titulo {
  font: 700 32px/38px var(--lrs-fonte);
  color: #000;
}

.lrs-grafico__figura img {
  display: block;
  width: 100%;
  height: auto;
}

/* Nota "Atualizado <mês>" — aqui o ponto verde fica DEPOIS do texto
   (Figma 4092:673), ao contrário dos cabeçalhos de secção. */
.lrs-actualizado {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  font: 400 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

.lrs-actualizado::after {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  content: '';
  background: var(--lrs-verde);
  border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   7d. Páginas de detalhe — Figma 4060:1159 (notícia) e 4080:1728 (opinião)
   -------------------------------------------------------------------------- */

/* Notícia: coluna principal de 918px + lateral de 292px, 20px de intervalo.
   O cabeçalho fica na coluna principal; a lateral alinha com a imagem. */
.lrs-artigo {
  display: grid;
  grid-template-columns: 918fr 292fr;
  gap: 40px 20px;
  align-items: start;
  padding-block: 76px 60px;
}

.lrs-artigo__cabecalho {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  gap: 24px;
}

.lrs-artigo__titulo {
  font: 700 48px/56px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-artigo__barra {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.lrs-artigo__meta {
  font: 400 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

.lrs-artigo__principal {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  gap: 51px;
}

.lrs-artigo__figura {
  aspect-ratio: 918 / 512;
  overflow: hidden;
  background: var(--lrs-placeholder);
  border-radius: var(--lrs-raio-cartao);
}

.lrs-artigo__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lrs-artigo__corpo {
  font: 400 22px/30px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-artigo__corpo p {
  margin-bottom: 22px;
}

.lrs-artigo__lateral {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 2;
  gap: 30px;
}

/* Partilha nas redes sociais */
.lrs-partilha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.lrs-partilha__rotulo {
  font: 400 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

.lrs-partilha__icones {
  display: flex;
  gap: 6px;
}

.lrs-partilha__icones img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Notícias relacionadas — miniatura de 80px + título */
.lrs-relacionadas {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lrs-relacionada {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: center;
}

.lrs-relacionada__figura {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--lrs-placeholder);
  border-radius: var(--lrs-raio-cartao);
}

.lrs-relacionada__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lrs-relacionada__titulo {
  font: 600 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-relacionada:hover .lrs-relacionada__titulo {
  color: var(--lrs-azul);
}

/* Opinião: layout invertido — autor à esquerda (293px), artigo à direita. */
.lrs-artigo--opiniao {
  grid-template-columns: 293fr 897fr;
  gap: 40px;
}

.lrs-artigo--opiniao .lrs-artigo__autor {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  gap: 73px;
}

.lrs-artigo--opiniao .lrs-artigo__principal {
  grid-column: 2;
  grid-row: 1;
  gap: 40px;
}

.lrs-artigo--opiniao .lrs-artigo__titulo {
  font: 700 42px/57px var(--lrs-fonte);
}

.lrs-autor-perfil {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

.lrs-autor-perfil__avatar {
  width: 293px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--lrs-borda);
  border-radius: 50%;
}

.lrs-autor-perfil__nome {
  font: 700 22px/30px var(--lrs-fonte);
  color: #000;
}

.lrs-autor-perfil__cargo {
  font: 500 22px/30px var(--lrs-fonte);
  color: #000;
}

.lrs-autor-perfil__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.lrs-autor-perfil__meta .lrs-partilha {
  align-items: center;
}

/* -----------------------------------------------------------------------------
   8. Indicadores — Figma 4026:44 (cartões de 292.5x163)
   -------------------------------------------------------------------------- */

.lrs-grelha-indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.lrs-indicador {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 20px;
  border: 1px solid var(--lrs-borda);
  border-radius: var(--lrs-raio-bloco);
}

.lrs-indicador__rotulo {
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto-medio);
  text-transform: uppercase;
}

.lrs-indicador__valor {
  font: 700 36px/49px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-indicador__variacao {
  font: 700 14px/19px var(--lrs-fonte);
}

.lrs-indicador__variacao--sobe {
  color: var(--lrs-positivo);
}

.lrs-indicador__variacao--desce {
  color: var(--lrs-negativo);
}

/* -----------------------------------------------------------------------------
   9. Opinião — Figma 4026:263 (cartões de 604x489)
   -------------------------------------------------------------------------- */

.lrs-grelha-opiniao {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.lrs-opiniao {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  padding: 40px;
  background: var(--lrs-cinza-cartao);
  border-radius: var(--lrs-raio-bloco);
}

.lrs-opiniao__interior {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.lrs-opiniao__autor {
  display: flex;
  gap: 16px;
  align-items: center;
}

.lrs-opiniao__avatar {
  flex-shrink: 0;
  width: 53px;
  height: 53px;
  object-fit: cover;
  background: var(--lrs-texto-medio);
  border-radius: 50%;
}

.lrs-opiniao__nome {
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-opiniao__cargo {
  font: 400 12px/16px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

.lrs-opiniao__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lrs-opiniao__titulo {
  font: 700 28px/38px var(--lrs-fonte);
  color: var(--lrs-texto);
}

/* O resumo é bold no desenho, apesar de ser cinzento. */
.lrs-opiniao__resumo {
  font: 700 22px/30px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

/* Variante da página de índice: fundo branco com contorno, em vez do cinzento
   usado na home (Figma 4069:717, "Frame 82" de 604x444). */
.lrs-opiniao--contorno {
  gap: 42px;
  background: var(--lrs-branco);
  border: 1px solid var(--lrs-borda);
}

/* Destaque no topo do índice de opiniões — Figma 4072:1323 (1230x376):
   avatar redondo grande à esquerda, texto à direita. */
.lrs-opiniao-destaque {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 40px;
  background: var(--lrs-cinza-cartao);
  border-radius: var(--lrs-raio-bloco);
}

.lrs-opiniao-destaque__autor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lrs-opiniao-destaque__avatar {
  width: 220px;
  height: 220px;
  object-fit: cover;
  background: var(--lrs-placeholder);
  border-radius: 50%;
}

.lrs-opiniao-destaque__corpo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.lrs-opiniao-destaque__texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -----------------------------------------------------------------------------
   10. Mercado imobiliário — Figma 4026:202 (lista datada)
   -------------------------------------------------------------------------- */

.lrs-lista-mercado {
  display: flex;
  flex-direction: column;
}

.lrs-lista-mercado__item {
  display: grid;
  grid-template-columns: 177px 1fr auto;
  gap: 100px;
  align-items: center;
  padding-block: 21px;
  border-bottom: 1px solid var(--lrs-borda);
}

.lrs-lista-mercado__item:first-child {
  padding-top: 0;
}

.lrs-lista-mercado__data {
  display: flex;
  gap: 20px;
  align-items: center;
  font: 400 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

/* Bullet em anel, ao contrário do ponto cheio dos cabeçalhos. */
.lrs-lista-mercado__data::before {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  content: '';
  border: 3px solid var(--lrs-verde);
  border-radius: 50%;
}

.lrs-lista-mercado__titulo {
  font: 700 18px/25px var(--lrs-fonte);
  color: var(--lrs-texto-medio);
}

.lrs-lista-mercado__item:hover .lrs-lista-mercado__titulo {
  color: var(--lrs-azul);
}

.lrs-lista-mercado__fonte {
  font: 400 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
  text-align: right;
}

/* -----------------------------------------------------------------------------
   11. Newsletter — Figma 4018:132
   -------------------------------------------------------------------------- */

.lrs-newsletter {
  display: grid;
  grid-template-columns: 525fr 525fr;
  gap: 20px;
  align-items: center;
  padding: 65px 80px 71px;
  background: var(--lrs-gradiente);
  border-radius: var(--lrs-raio-bloco);
}

.lrs-newsletter__texto {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lrs-newsletter__titulo {
  font: 700 32px/40px var(--lrs-fonte);
  color: var(--lrs-branco);
}

.lrs-newsletter__descricao {
  font: 600 16px/22px var(--lrs-fonte);
  color: var(--lrs-branco);
}

.lrs-newsletter__form {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 32px;
  background: var(--lrs-branco);
  border-radius: var(--lrs-raio-pilula);
}

.lrs-newsletter__input {
  flex: 1;
  min-width: 0;
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto);
  text-transform: uppercase;
  background: none;
  border: 0;
}

.lrs-newsletter__input::placeholder {
  color: var(--lrs-texto-placeholder);
  text-transform: uppercase;
}

.lrs-newsletter__input:focus {
  outline: none;
}

/* -----------------------------------------------------------------------------
   12. Footer — Figma 4016:170
   -------------------------------------------------------------------------- */

.lrs-footer {
  padding-block: 60px 30px;
  margin-top: 70px;
  background: var(--lrs-branco);
  box-shadow: 0 -1px 1px var(--lrs-sombra);
}

.lrs-footer__grelha {
  display: grid;
  grid-template-columns: 544px 104px 1fr;
  gap: 146px;
  align-items: start;
}

.lrs-footer__marca {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.lrs-footer__nome {
  font: 800 22px/26px var(--lrs-fonte);
  color: #000;
  text-transform: uppercase;
}

.lrs-footer__descricao {
  max-width: 444px;
  margin-top: 12px;
  font: 400 16px/22px var(--lrs-fonte);
  color: #000;
}

.lrs-footer__parceria {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.lrs-footer__parceria-rotulo {
  font: 500 12px/16px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
  text-transform: uppercase;
}

.lrs-footer__coluna {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lrs-footer__coluna-titulo {
  font: 800 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto-medio);
  text-transform: uppercase;
}

.lrs-footer__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lrs-footer__link {
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto-medio);
  text-transform: uppercase;
}

.lrs-footer__link:hover {
  color: var(--lrs-azul);
}

.lrs-footer__contactos {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.lrs-footer__redes {
  display: flex;
  gap: 6px;
}

.lrs-footer__redes img {
  display: block;
  width: 24px;
  height: 24px;
}

.lrs p.lrs-footer__copyright {
  margin-top: 56px;
  font: 700 12px/16px var(--lrs-fonte);
  color: var(--lrs-texto-rodape);
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   13. Espaçamento entre secções da home
   -------------------------------------------------------------------------- */

.lrs-pilha {
  display: flex;
  flex-direction: column;
  gap: 70px;
  padding-block: 28px;
}

/* -----------------------------------------------------------------------------
   14. Mobile — frames de 393px (4043:893 e seguintes)
   -------------------------------------------------------------------------- */

@media (width <= 1024px) {
  .lrs-conteudo {
    padding-inline: var(--lrs-margem-mobile);
  }

  .lrs-navbar__menu,
  .lrs-navbar__idiomas {
    display: none;
  }

  .lrs-navbar__menu--aberto {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px var(--lrs-margem-mobile);
    background: var(--lrs-branco);
    box-shadow: 0 4px 8px rgb(0 0 0 / 8%);
  }

  .lrs-navbar__hamburguer {
    display: block;
  }

  .lrs-navbar {
    position: relative;
  }

  .lrs-hero,
  .lrs-newsletter {
    grid-template-columns: 1fr;
  }

  .lrs-hero {
    gap: 24px;
  }

  .lrs-hero__titulo {
    font-size: 32px;
    line-height: 40px;
  }

  .lrs-hero__resumo {
    font-size: 18px;
    line-height: 26px;
  }

  .lrs-grelha-cartoes,
  .lrs-grelha-opiniao {
    grid-template-columns: 1fr;
  }

  .lrs-grelha-indicadores {
    grid-template-columns: repeat(2, 1fr);
  }

  .lrs-lista-mercado__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lrs-lista-mercado__fonte {
    text-align: left;
  }

  .lrs-newsletter {
    padding: 40px 24px;
  }

  .lrs-newsletter__titulo {
    font-size: 24px;
    line-height: 32px;
  }

  .lrs-opiniao {
    gap: 30px;
    padding: 24px;
  }

  .lrs-opiniao__titulo {
    font-size: 22px;
    line-height: 30px;
  }

  .lrs-opiniao__resumo {
    font-size: 16px;
    line-height: 24px;
  }

  .lrs-cabecalho-pagina {
    padding-block: 32px 20px;
  }

  .lrs-cabecalho-pagina__titulo {
    font-size: 32px;
    line-height: 40px;
  }

  .lrs-cabecalho-pagina__subtitulo {
    font-size: 18px;
    line-height: 26px;
  }

  .lrs-opiniao-destaque {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }

  .lrs-opiniao-destaque__avatar {
    width: 120px;
    height: 120px;
  }

  .lrs-grelha-graficos {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Detalhe: uma coluna, com a lateral (relacionadas) no fim. */
  .lrs-artigo,
  .lrs-artigo--opiniao {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 32px 40px;
  }

  .lrs-artigo__cabecalho,
  .lrs-artigo__principal,
  .lrs-artigo__lateral,
  .lrs-artigo--opiniao .lrs-artigo__autor,
  .lrs-artigo--opiniao .lrs-artigo__principal {
    grid-column: 1;
    grid-row: auto;
  }

  .lrs-artigo__titulo,
  .lrs-artigo--opiniao .lrs-artigo__titulo {
    font-size: 30px;
    line-height: 38px;
  }

  .lrs-artigo__barra {
    flex-direction: column;
    gap: 16px;
  }

  .lrs-partilha,
  .lrs-partilha__icones {
    align-items: flex-start;
  }

  .lrs-artigo__corpo {
    font-size: 18px;
    line-height: 28px;
  }

  .lrs-artigo--opiniao .lrs-artigo__autor {
    gap: 24px;
  }

  .lrs-autor-perfil__avatar {
    width: 160px;
  }

  .lrs-autor-perfil__nome,
  .lrs-autor-perfil__cargo {
    font-size: 18px;
    line-height: 26px;
  }

  .lrs-grafico {
    gap: 20px;
  }

  .lrs-grafico__titulo {
    font-size: 22px;
    line-height: 30px;
  }

  .lrs-footer__grelha {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lrs-pilha {
    gap: 48px;
  }
}

@media (width <= 480px) {
  .lrs-grelha-indicadores {
    grid-template-columns: 1fr;
  }

  .lrs-newsletter__form {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border-radius: var(--lrs-raio-bloco);
  }

  .lrs-newsletter__input {
    padding-inline: 12px;
  }
}

/* -----------------------------------------------------------------------------
   Newsletter do rodapé
   Nome próprio (`lrs-footer__newsletter`) para não colidir com a secção
   `.lrs-newsletter` da home, que é o bloco em gradiente do Figma.
   -------------------------------------------------------------------------- */
.lrs-footer__newsletter {
  display: flex;
  margin-bottom: 8px;
  flex-direction: column;
  gap: 10px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--lrs-borda);
}

.lrs-footer__newsletter-titulo {
  font: 800 14px/19px var(--lrs-fonte);
  color: var(--lrs-texto-medio);
  text-transform: uppercase;
}

.lrs-footer__newsletter-texto {
  font: 400 16px/22px var(--lrs-fonte);
  color: var(--lrs-texto);
}

.lrs-footer__newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 520px;
}

.lrs-footer__newsletter-etiqueta,
.lrs-footer__newsletter-isco {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lrs-footer__newsletter-campo {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 16px;
  font: 400 16px/19px var(--lrs-fonte);
  color: var(--lrs-texto);
  background: var(--lrs-branco);
  border: 1px solid var(--lrs-borda);
  border-radius: 4px;
}

.lrs-footer__newsletter-campo::placeholder {
  color: var(--lrs-texto-placeholder);
}

.lrs-footer__newsletter-campo:focus-visible {
  outline: 2px solid var(--lrs-azul);
  outline-offset: 1px;
}

.lrs-footer__newsletter-botao {
  padding: 12px 24px;
  font: 700 14px/19px var(--lrs-fonte);
  color: var(--lrs-branco);
  text-transform: uppercase;
  background: var(--lrs-azul);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lrs-footer__newsletter-botao:hover {
  background: var(--lrs-azul-escuro);
}

.lrs-footer__newsletter-consentimento {
  max-width: 520px;
  font: 400 12px/17px var(--lrs-fonte);
  color: var(--lrs-texto-suave);
}

.lrs-footer__newsletter-aviso {
  font: 600 14px/19px var(--lrs-fonte);
}

.lrs-footer__newsletter-aviso--ok {
  color: var(--lrs-positivo);
}

.lrs-footer__newsletter-aviso--erro {
  color: var(--lrs-negativo);
}