/* =========================================================
   LIKE IMOBILIÁRIA · v2
   Editorial quiet + profundidade 3D. Host Grotesk no display, Inter no corpo.
   Peso baixo por regra: nada acima de 500, e display em 300.

   Espaçamento: escala única de 4 px em --s1..--s10. Nenhum respiro
   é valor solto — margem, gap e padding saem todos daqui, para o
   ritmo vertical fechar em qualquer largura.

   Leitura: medida de 62ch no corpo, 18ch no display. Nada mais largo,
   porque linha longa cansa e o olho perde o começo da linha seguinte.
   ========================================================= */

:root {
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 104px;
  --s10: 152px;

  /* respiro de seção: cresce com a viewport, mas com teto */
  --secao-y: clamp(80px, 11vw, 152px);
  --gutter: clamp(20px, 5vw, 72px);
  --medida: 62ch;
  --medida-display: 18ch;

  --lk-gold: #c8954a;
  --lk-gold-soft: #e0b877;
}

/* ---------------------------------------------------------- marca */

.lk-mark {
  height: 34px;
  width: auto;
  display: block;
  flex: 0 0 auto; /* trava UMA dimensão: a altura. A largura vem da proporção. */
  color: #fbfaf6;
  transition: color .35s ease;
}

.nav.scrolled .lk-mark { color: #0b0b0c; }
.lk-mark--footer { height: 40px; color: #fbfaf6; }

/* ------------------------------------------------- utilidades 3D */

.cena3d {
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

.camada {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .camada { transform: none !important; }
  .cena3d { perspective: none; }
}

/* ============================================== LANÇAMENTO · RBV */

.lancamento {
  position: relative;
  background: #0b0b0c;
  color: #fbfaf6;
  padding: var(--secao-y) 0 calc(var(--secao-y) * .85);
  overflow: clip;
  isolation: isolate;
}

.lancamento::before {
  /* véu de profundidade: o fundo recua, o conteúdo avança */
  content: "";
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(200, 149, 74, .16), transparent 70%),
    radial-gradient(50% 45% at 12% 82%, rgba(200, 149, 74, .09), transparent 72%);
  z-index: 0;
  pointer-events: none;
}

.lanc-wrap {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.lanc-topo {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.selo-lanc {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #0b0b0c;
  background: var(--lk-gold);
  padding: 7px 14px;
  border-radius: 2px;
}

.lanc-local {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .52);
}

.lanc-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.lanc-texto h2 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 var(--s5);
  max-width: var(--medida-display);
}

.lanc-texto h2 em {
  font-style: normal;
  color: var(--lk-gold);
}

.lanc-texto > p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.72;
  color: rgba(251, 250, 246, .74);
  max-width: 46ch;
  margin: 0 0 var(--s7);
}

.lanc-dados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  border-top: 1px solid rgba(251, 250, 246, .14);
  padding-top: var(--s5);
  margin-bottom: var(--s7);
}

.lanc-dado b {
  display: block;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: var(--s2);
}

.lanc-dado span {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, .5);
  line-height: 1.5;
  display: block;
}

.lanc-acoes {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
}

/* pilha de imagens em profundidade real */
.lanc-pilha {
  position: relative;
  aspect-ratio: 4 / 3.4;
  transform-style: preserve-3d;
}

.lanc-img {
  position: absolute;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}

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

.lanc-img--a { inset: 0 22% 26% 0; z-index: 3; }
.lanc-img--b { inset: 30% 0 0 34%; z-index: 2; }
.lanc-img--c { inset: 8% 4% 58% 62%; z-index: 4; }

.lanc-legenda {
  position: absolute;
  left: 0;
  bottom: -2.2em;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: rgba(251, 250, 246, .42);
}

/* ==================================================== EM FOCO */

.foco {
  background: var(--paper, #f6f4ef);
  color: var(--ink, #14140f);
  padding: var(--secao-y) 0;
}

.foco-wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.foco-topo {
  max-width: var(--medida);
  margin-bottom: var(--s8);
}

.foco-kicker {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lk-gold);
  display: block;
  margin-bottom: var(--s4);
}

.foco-topo h2 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0 0 var(--s4);
  max-width: var(--medida-display);
}

.foco-topo p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(20, 20, 15, .66);
  margin: 0;
  max-width: 52ch;
}

.foco-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}

.foco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transform-style: preserve-3d;
}

.foco-fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #16161a;
  border-radius: 2px;
  margin-bottom: var(--s5);
}

.foco-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.foco-card:hover .foco-fig img { transform: scale(1.09); }

.foco-tag {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0b0b0c;
  background: rgba(251, 250, 246, .94);
  padding: 6px 11px;
  border-radius: 2px;
}

.foco-card h3 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0 0 var(--s3);
}

.foco-card .foco-onde {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20, 20, 15, .48);
  display: block;
  margin-bottom: var(--s3);
}

.foco-card p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(20, 20, 15, .7);
  margin: 0 0 var(--s5);
  max-width: 40ch;
}

.foco-lista {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.foco-lista li {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(20, 20, 15, .74);
  padding-left: 18px;
  position: relative;
}

.foco-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--lk-gold);
  border-radius: 50%;
}

.foco-link {
  margin-top: auto;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  align-self: flex-start;
}

/* ========================================================= FAQ */

.faq {
  background: #0b0b0c;
  color: #fbfaf6;
  padding: var(--secao-y) 0;
}

.faq-wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.faq-aside h2 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0 0 var(--s4);
  max-width: 14ch;
}

.faq-aside p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(251, 250, 246, .6);
  margin: 0 0 var(--s6);
  max-width: 40ch;
}

.faq-grupo + .faq-grupo { margin-top: var(--s7); }

.faq-grupo > h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lk-gold);
  margin: 0 0 var(--s4);
}

.faq-item {
  border-top: 1px solid rgba(251, 250, 246, .13);
}

.faq-item:last-child { border-bottom: 1px solid rgba(251, 250, 246, .13); }

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  padding: var(--s5) 40px var(--s5) 0;
  position: relative;
  display: block;
}

.faq-q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--lk-gold);
  border-bottom: 1.5px solid var(--lk-gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.faq-item.aberto .faq-q::after { transform: translateY(-30%) rotate(225deg); }

.faq-a {
  overflow: hidden;
  height: 0;
  transition: height .45s cubic-bezier(.16, 1, .3, 1);
}

.faq-a > div {
  padding: 0 44px var(--s6) 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(251, 250, 246, .68);
  max-width: 56ch;
}

/* ==================================================== responsivo
   Mesma diagramação, só reempilhada. Nada de layout paralelo:
   o que muda é o número de colunas e a escala, nunca o conteúdo. */

@media (max-width: 1100px) {
  .lanc-grade { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 72px); }
  .lanc-pilha { aspect-ratio: 4 / 3; max-width: 640px; }
  .foco-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-wrap { grid-template-columns: 1fr; gap: var(--s7); }
  .faq-aside h2, .faq-aside p { max-width: none; }
}

@media (max-width: 720px) {
  :root { --secao-y: clamp(64px, 14vw, 96px); }

  .lanc-topo { gap: var(--s3); margin-bottom: var(--s5); }
  .lanc-dados { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
  .lanc-dado:last-child { grid-column: 1 / -1; }
  .lanc-acoes { flex-direction: column; align-items: stretch; }
  .lanc-acoes .btn { justify-content: center; width: 100%; }

  /* a pilha 3D vira empilhamento honesto: perde o Z, mantém a leitura */
  .lanc-pilha {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    max-width: none;
  }
  .lanc-img { position: relative; inset: auto; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
  .lanc-img--a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .lanc-img--b, .lanc-img--c { aspect-ratio: 1 / 1; }
  .lanc-legenda { position: static; margin-top: var(--s3); display: block; }

  .foco-grade { grid-template-columns: 1fr; gap: var(--s8); }
  .foco-fig { aspect-ratio: 3 / 2; }
  .foco-topo { margin-bottom: var(--s7); }

  .faq-q { padding-right: 32px; }
  .faq-a > div { padding-right: 0; }

  .lk-mark { height: 28px; }
}

/* leitor de tela: o H1 real da página, invisível sem sumir do DOM */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Correções medidas na tela, não no olho
   ========================================================= */

/* 1. A perspectiva estava na SEÇÃO, com origem no centro dela. Quem fica
      à direita era empurrado para fora ao vir para a frente, e a imagem
      saía da viewport. A perspectiva passa a ser LOCAL da pilha. */
.lancamento.cena3d { perspective: none; }

.lanc-pilha {
  perspective: 1250px;
  perspective-origin: 50% 50%;
  transform-style: flat;
  padding-bottom: var(--s7); /* espaço para a legenda não subir na imagem */
}

.lanc-img { transform-style: flat; }

/* 2. "500 a 840 m²" quebrava em duas linhas e desalinhava a régua de dados. */
.lanc-dados { align-items: start; }

.lanc-dado b {
  font-size: clamp(21px, 1.9vw, 28px);
  text-wrap: balance;
}

/* 3. Botão fantasma sobre fundo escuro estava tinta-sobre-tinta. */
.lancamento .btn--ghost {
  color: #fbfaf6;
  border-color: rgba(251, 250, 246, .34);
}

.lancamento .btn--ghost:hover {
  color: #0b0b0c;
  background: #fbfaf6;
  border-color: #fbfaf6;
}

/* 4. A legenda passava por baixo do botão flutuante do WhatsApp. */
.lanc-legenda {
  bottom: 0;
  max-width: 46ch;
  padding-right: clamp(0px, 12vw, 190px);
}

.lanc-legenda b { color: rgba(251, 250, 246, .72); font-weight: 400; }

@media (max-width: 720px) {
  .lanc-pilha { padding-bottom: 0; }
  .lanc-legenda { padding-right: 0; max-width: none; }
}

/* =========================================================
   Peso: uma escala só, e leve.
   Display 300, corpo 400, ênfase 500. Nada acima disso.
   Sem isso, h1..h6, b e strong caem no bold padrão do navegador
   e o Host Grotesk sintetiza um peso que não existe no arquivo.
   ========================================================= */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
b, strong { font-weight: 500; }
.hp-hook, .section-title, .lanc-texto h2, .foco-topo h2, .faq-aside h2 { font-weight: 300; }
.lanc-dado b, .foco-card h3, .doc h1, .doc h2 { font-weight: 300; }

/* ============================================ lockup do herói
   Marca com nome ao lado do monograma. As frações abaixo saem do
   arquivo oficial, não do olho: o "LIKE" tem 0,336 da altura do tile
   e tracking de 0,237 do próprio corpo; "IMOBILIÁRIA" tem 0,124 e
   tracking 0,429. Como aqui a referência é a altura do MONOGRAMA
   (0,492 do tile), os valores viram 0,683 e 0,252 dessa altura. */

.hero-lockup {
  --marca-h: 54px;               /* altura do monograma */
  display: flex;
  align-items: flex-start;
  gap: calc(var(--marca-h) * .5); /* 0,504 da altura: o respiro do lockup oficial */
  margin-bottom: 1.7rem;
}

.hero-lockup .hero-mark {
  height: var(--marca-h);
  width: auto;
  margin: 0;
  opacity: .96;
  color: #fbfaf6;
}

.hero-wordmark {
  display: block;
  padding-top: calc(var(--marca-h) * .04);
  color: #fbfaf6;
}

.hero-wordmark b {
  display: block;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--marca-h) * .683);
  letter-spacing: .237em;
  line-height: 1;
  text-indent: .237em;           /* compensa o tracking da última letra */
}

.hero-wordmark i {
  display: block;
  font-style: normal;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: calc(var(--marca-h) * .252);
  letter-spacing: .429em;
  line-height: 1;
  margin-top: calc(var(--marca-h) * .28);
  text-indent: .429em;
  color: var(--lk-gold);
}

@media (max-width: 640px) {
  .hero-lockup { --marca-h: 34px; gap: calc(var(--marca-h) * .46); }
}

/* =========================================================
   MOBILE · correções medidas com o medidor em 375 / 390 / 412
   Cada bloco traz o valor medido e o alvo. Nada aqui é estético.
   ========================================================= */

/* --- 2 · alvo de toque abaixo de 44 px ---------------------------------
   Dedo não é cursor. Abaixo de 44×44 o toque erra, e erro de toque em
   formulário custa lead. O desenho não muda: cresce só a área clicável. */

.brand {                                    /* medido 22×28 */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

#nav-toggle {                               /* medido 30×20 */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hero-arrow {                               /* medido 38×38 */
  min-width: 44px;
  min-height: 44px;
}

.hdot {                                     /* medido 23×3: a barrinha fica */
  position: relative;
}

.hdot::after {                              /* área invisível de 44 px de altura */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.nav-links a,
.footer a,
.footer li a {                              /* medidos entre 14 e 22 px de altura */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.btn {                                      /* .btn--gold medido 42 px */
  min-height: 44px;
}

/* --- 3 · texto pequeno demais para ler no sol -------------------------
   O medidor não achou campo abaixo de 16 px, então o iOS não vai dar
   zoom sozinho. O que existe é texto de apoio ilegível. Piso de 12 px. */

@media (max-width: 720px) {
  .t-lbl { font-size: 12px; }               /* medido 9,6 px */
  .lanc-legenda { font-size: 12px; }        /* medido 11 px */
  .mf-eyebrow, .eyebrow { font-size: 12px; }/* medido 10,9 px */
  .footer, .footer a, .footer span { font-size: 12.5px; } /* medido 10,6 px */
  .btn { font-size: 12.5px; }               /* medido 11,5 px */
}

/* --- 4 · contraste abaixo de 4.5:1 -----------------------------------
   Corrigido na cor, nunca engrossando a fonte. */

.trust-item .t-lbl {                        /* medido 3,34:1 → alvo 4,5:1 */
  color: rgba(20, 20, 15, .78);
}

.wa-fab {                                   /* medido 3,09:1 sobre o verde claro */
  background: #128C4A;                      /* verde WhatsApp escurecido: 4,64:1 com branco */
}

/* --- 7 · safe area do iPhone -----------------------------------------
   Com viewport-fit=cover no meta, env() finalmente devolve valor. */

.wa-fab {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
  .footer { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px)); }
  .nav { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* --- 2ª rodada de medição: três achados sobreviveram ------------------
   O ::after invisível não resolveu o ponto de toque, porque o medidor
   lê a caixa do próprio elemento. Então a caixa cresce e o desenho de
   3 px passa a ser um filho. */

.hdot {                                     /* medido 23×3 → alvo 44 de altura */
  height: 44px;
  width: 34px;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hdot::after { content: none; }

.hdot::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(246, 244, 239, .26);
  transition: background .3s;
}

.hdot.is-active::before { background: var(--gold, #c8954a); }

/* O piso de 12 px não vencia: a regra original é .trust-item .t-lbl. */
@media (max-width: 720px) {
  .trust-item .t-lbl { font-size: 12px; }
}

/* Verde do botão flutuante: #128C4A deu 4,31:1, ainda abaixo de 4,5. */
.wa-fab { background: #107A40; }            /* 5,41:1 com o texto branco */

/* Os 9 pontinhos não têm como virar alvo de 44 px: 9 × 44 = 396 px, e a
   tela do iPhone SE tem 375. Alargar trocaria um problema de toque por
   um de rolagem horizontal, que é pior. No celular eles saem, e a
   navegação fica com as setas (já em 44×44), o contador e o arraste. */
@media (max-width: 720px) {
  .hero-dots { display: none; }
}

/* "A Like" tem só 38 px de largura porque o texto é curto. No menu do
   celular os itens são empilhados, então padding lateral não desalinha
   nada e leva o alvo aos 44. */
.nav-links a { min-width: 44px; padding-inline: 4px; }

/* `.nav.mobile-open .nav-links a` (0,3,1) vencia o meu `.nav-links a`
   (0,2,1). Igualando a especificidade para o alvo de toque valer. */
.nav .nav-links a,
.nav.mobile-open .nav-links a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
}

/* O último alvo pequeno era o "A Like" do RODAPÉ, não o do menu. */
.footer a, .footer li a { min-width: 44px; }

/* ================================= NOTÍCIAS · INSTAGRAM
   Trilho horizontal logo abaixo do herói: é notícia, então tem que
   caber no primeiro rolar da página, e não no rodapé. */

.noticias { background: #0b0b0c; color: #fbfaf6; padding: var(--s8) 0 var(--s9); }
.noticias[hidden] { display: none; }

.not-wrap { max-width: 1560px; margin: 0 auto; padding-inline: var(--gutter); }

.not-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6);
}

.not-topo h2 {
  font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
}

.not-perfil {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--lk-gold);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* trilho com rolagem por toque e encaixe: no celular vira carrossel
   nativo, sem JS de arrasto e sem biblioteca */
.not-trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s2);
}
.not-trilho::-webkit-scrollbar { display: none; }

.not-card {
  scroll-snap-align: start;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: var(--s3);
}

.not-card figure {
  margin: 0; overflow: hidden; border-radius: 3px;
  aspect-ratio: 1 / 1; background: #16161a;
}

.not-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.not-card:hover img { transform: scale(1.07); }

.not-data {
  font-family: "Inter", system-ui, sans-serif; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(251,250,246,.5);
}

.not-card b {
  font-family: "Inter", system-ui, sans-serif; font-weight: 400;
  font-size: 14.5px; line-height: 1.5; color: rgba(251,250,246,.88);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .noticias { padding: var(--s7) 0 var(--s8); }
  .not-trilho {
    grid-auto-columns: 72vw;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .not-topo { margin-bottom: var(--s5); }
}