/* =============================================================================
   TUON — Landing page institucional
   -----------------------------------------------------------------------------
   Mobile-first. Depende de tokens.css (variáveis) e ui.css (componentes).
   Prefixo .lp- para não colidir com o painel e o portal.

   Estrutura da página em dois atos:
     Ato 1 (escuro)  hero · clientes · serviços · projetos
     Ato 2 (claro)   processo · oficina · portal · contato
   A costura entre os atos é o filete ripado, motivo gráfico da casa.
   ========================================================================== */

/* ---------------------------------------------------------------- base */

/* Tranca horizontal: os reveals laterais (--esq/--dir) e o marquee vivem
   fora da tela por natureza, e o iOS Safari deixa o dedo arrastar até
   overflow visual. hidden é a rede antiga; clip é a moderna — não cria
   contêiner de rolagem, então o sticky do preview continua funcionando. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

.lp {
  background: var(--tuon-block);
  color: var(--tuon-block-ink);
  overflow-x: hidden;
  overflow-x: clip;
}

/* Segunda cerca, na própria coluna de conteúdo (só onde clip existe,
   porque hidden aqui quebraria o preview sticky do desktop). */
@supports (overflow: clip) {
  main#conteudo { overflow-x: clip; }
}

.lp ::selection { background: var(--tuon-wood); color: #fff; }

/* Âmbar vira exceção, não padrão (achado do Saulo: "muito amarela" — o
   tom de madeira tinha virado a cor de TODO destaque da página: link,
   botão, número grande, etiqueta, capitular... a repetição cansava mais
   que qualquer instância isolada). Fica reservado pro CTA principal e pro
   motivo dos números grandes; link e etiqueta (que aparecem várias vezes
   por seção, em toda seção) passam a usar tinta neutra por padrão. Regra
   só entra nas seções .lp-claro (dia) — no ato escuro (hero/clientes/
   projetos) o âmbar sobre fundo quase-preto é outro contexto, já contido. */
.lp-claro a:not(.tuon-btn) { color: var(--tuon-ink); }
.lp-claro .tuon-etiqueta { color: var(--tuon-muted); }

/* Tinta contextual: dentro do ato claro os tokens de texto trocam. */
.lp-claro {
  background: var(--tuon-paper);
  color: var(--tuon-ink);
}

/* Motivo ripado: usado na costura dos atos e em detalhes. */
.lp-ripas {
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--tuon-wood) 0 3px,
    transparent 3px 11px
  );
  opacity: 0.85;
}

/* Régua de milímetros: o motivo "sob medida". Só existe no layout desktop. */
.lp-regua {
  display: none;
  width: 14px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(245, 242, 236, 0.35) 0 1px,
      transparent 1px 8px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(245, 242, 236, 0.55) 0 1px,
      transparent 1px 40px
    );
}

/* ---------------------------------------------------------------- reveal */

.lp-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 320ms var(--m-curva),
    transform 320ms var(--m-curva);
}

.lp-reveal.em-vista {
  opacity: 1;
  transform: none;
}

.lp-reveal[data-atraso='1'] { transition-delay: 70ms; }
.lp-reveal[data-atraso='2'] { transition-delay: 140ms; }
.lp-reveal[data-atraso='3'] { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- header */

.lp-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: background var(--m-normal) var(--m-curva),
              border-color var(--m-normal) var(--m-curva);
  border-bottom: 1px solid transparent;
}

.lp-topo.solido {
  background: rgba(26, 25, 23, 0.92);
  border-bottom-color: rgba(245, 242, 236, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lp-topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: 68px;
}

.lp-topo .tuon-marca__nome { color: var(--tuon-block-ink); }
.lp-topo .tuon-marca__bloco {
  width: 38px; height: 38px;
  background: transparent;
}

/* Entrega de cena: no topo da página quem assina é o lockup do hero;
   a marca do cabeçalho só entra quando a rolagem começa. */
.lp-topo .tuon-marca {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--m-normal) var(--m-curva),
              transform var(--m-normal) var(--m-curva),
              visibility 0s linear var(--m-normal);
}

.lp-topo.solido .tuon-marca {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.lp-nav {
  display: none;
  align-items: center;
  gap: var(--e-5);
}

.lp-nav a {
  color: rgba(245, 242, 236, 0.9);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
  letter-spacing: 0.02em;
  padding: var(--e-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--m-rapido), border-color var(--m-rapido);
}

.lp-nav a:hover { color: #fff; border-bottom-color: var(--tuon-wood-soft); }

.lp-topo__acoes { display: none; align-items: center; gap: var(--e-3); }

.lp-topo__acoes .tuon-btn { min-height: 44px; padding-inline: var(--e-4); }

.lp-topo__acoes .tuon-btn--fantasma {
  color: #fff;
  background: rgba(16, 15, 14, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lp-topo__acoes .tuon-btn--fantasma:hover {
  background: rgba(16, 15, 14, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ------------------------------------------------ botões da landing: vidro
   O CTA principal vira "liquid glass": cápsula translúcida que deixa a foto
   atravessar borrada, com brilho especular no topo e o tom da madeira. */
.lp .tuon-btn { border-radius: var(--r-cheio); }

.lp .tuon-btn--principal {
  background: linear-gradient(180deg, rgba(140, 98, 58, 0.62), rgba(118, 78, 35, 0.5));
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -8px 14px -10px rgba(16, 15, 14, 0.4),
    0 10px 28px -14px rgba(16, 15, 14, 0.55);
  transition: background var(--m-rapido), border-color var(--m-rapido),
              box-shadow var(--m-rapido), transform var(--m-rapido);
}

.lp .tuon-btn--principal:hover {
  background: linear-gradient(180deg, rgba(150, 106, 63, 0.75), rgba(126, 84, 39, 0.62));
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -8px 14px -10px rgba(16, 15, 14, 0.35),
    0 14px 34px -14px rgba(16, 15, 14, 0.6);
}

.lp .tuon-btn--principal:active { transform: scale(0.98); }

/* Nas seções claras o fundo não dá contraste ao vidro: o tom fecha
   quase sólido, mantendo o brilho de vidro no topo. */
.lp-contato .tuon-btn--principal,
.lp-claro .tuon-btn--principal {
  background: linear-gradient(180deg, rgba(118, 78, 35, 0.94), rgba(97, 62, 26, 0.9));
}

/* Sem suporte a backdrop-filter, o vidro vira madeira sólida. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp .tuon-btn--principal { background: var(--tuon-wood); }
  .lp .tuon-btn--principal:hover { background: var(--tuon-wood-deep); }
}

/* CTA compacto do topo no celular (o dock cuida da navegação) */
.lp-topo__cta-mini { min-height: 44px; padding-inline: var(--e-4); font-size: var(--t-xs); }

/* dock: a navegação do celular — cápsula de vidro flutuante na base.
   O JS acende a seção atual; os lightbox de fotos a escondem. */
.lp-dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: var(--r-cheio);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 19, 17, 0.78);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 32px -12px rgba(16, 15, 14, 0.7);
}

.lp-dock a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--r-cheio);
  color: rgba(245, 242, 236, 0.78);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: 0.04em;
  transition: color var(--m-rapido), background var(--m-normal) var(--m-curva),
              transform var(--m-rapido);
}

.lp-dock a.ativa {
  color: var(--tuon-wood-luz);
  background: rgba(245, 242, 236, 0.08);
}
.lp-dock a:active { color: #fff; transform: scale(0.93); }

.lp-fotos-aberta .lp-dock { display: none; }

/* Entrada com mola, à la dynamic island: nasce menor e desfocado,
   assenta com um leve overshoot. Nada de deslizar de baixo. */
@media (prefers-reduced-motion: no-preference) {
  .lp-dock {
    animation: lp-dock-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
  }
}
@keyframes lp-dock-pop {
  from { opacity: 0; transform: translateX(-50%) scale(0.7); filter: blur(5px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); filter: blur(0); }
}

/* O dock ocupa a base: o botão do WhatsApp sobe um degrau no celular. */
@media (max-width: 1023.98px) {
  .lp .lp-zap { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1024px) {
  .lp-dock { display: none; }
}

@media (min-width: 1024px) {
  .lp-nav, .lp-topo__acoes { display: flex; }
  .lp-idiomas-mini { display: none; }
  .lp-topo__cta-mini { display: none; }
}
}

/* ---------------------------------------------------------------- hero */

.lp-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}

.lp-hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.lp-hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 62%;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-hero__foto img {
    animation: lp-hero-zoom 2.4s var(--m-curva) both;
  }
  @keyframes lp-hero-zoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1); }
  }
}

.lp-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(16, 15, 14, 0.95) 0%, rgba(16, 15, 14, 0.72) 34%, rgba(16, 15, 14, 0.3) 68%, rgba(16, 15, 14, 0.25) 100%);
}

.lp-hero__conteudo {
  width: 100%;
  padding-block: var(--e-7) var(--e-7);
}

/* Lockup completo da marca abre o hero. */
.lp-hero__lockup {
  width: clamp(120px, 30vw, 150px);
  height: auto;
  filter: drop-shadow(0 4px 22px rgba(16, 15, 14, 0.55));
}

/* Eyebrow em chip: legível sobre qualquer área da foto. */
.lp-hero .tuon-etiqueta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--e-5);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-cheio);
  background: rgba(16, 15, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 155, 110, 0.35);
  color: var(--tuon-wood-luz);
}

.lp-hero h1 { text-shadow: 0 2px 24px rgba(16, 15, 14, 0.4); }

@media (min-width: 1024px) {
  .lp-hero__lockup { width: 190px; }
}

.lp-hero h1 {
  margin-top: var(--e-4);
  font-size: clamp(2.5rem, 10.5vw, 5.6rem);
  font-weight: var(--p-display);
  line-height: 1.08;
  color: #fff;
}

.lp-hero__sub {
  margin-top: var(--e-4);
  font-size: var(--t-md);
  font-weight: var(--p-medio);
  color: rgba(245, 242, 236, 0.94);
  max-width: 44ch;
}

.lp-hero__sub b {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: var(--p-medio);
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  line-height: 1.25;
  padding-bottom: 2px; /* folga para o descendente do itálico */
  /* Neutro, não âmbar: o botão principal já é o momento de destaque do
     hero — duas coisas amarelas na primeira dobra era demais. */
  color: rgba(245, 242, 236, 0.88);
  margin-bottom: var(--e-1);
}

.lp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

/* No celular, os dois viram blocos inteiros, um par de cápsulas. */
@media (max-width: 640px) {
  .lp-hero__ctas { flex-direction: column; align-items: stretch; }
  .lp-hero__ctas .tuon-btn,
  .lp-hero__ctas .lp-btn-portal { width: 100%; min-height: 52px; }
}

/* Portal do Cliente na landing: cápsula de vidro claro, o par do CTA
   de vidro madeira — mesma altura, mesmo material, sem competir. */
.lp-btn-portal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding: 0 var(--e-5);
  border-radius: var(--r-cheio);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(16, 15, 14, 0.32);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 22px -14px rgba(16, 15, 14, 0.55);
  color: #fff;
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  letter-spacing: 0.02em;
  transition: background var(--m-rapido), border-color var(--m-rapido),
              transform var(--m-rapido);
}

.lp-btn-portal__seta { transition: transform var(--m-rapido); }

.lp-btn-portal:hover {
  background: rgba(16, 15, 14, 0.55);
  border-color: rgba(255, 255, 255, 0.42);
}
.lp-btn-portal:hover .lp-btn-portal__seta { transform: translateX(4px); }
.lp-btn-portal:active { transform: scale(0.98); }


/* entrada orquestrada */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero__conteudo > * {
    opacity: 0;
    transform: translateY(18px);
    animation: lp-sobe 0.7s var(--m-curva) forwards;
  }
  .lp-hero__conteudo > *:nth-child(1) { animation-delay: 0.15s; }
  .lp-hero__conteudo > *:nth-child(2) { animation-delay: 0.28s; }
  .lp-hero__conteudo > *:nth-child(3) { animation-delay: 0.44s; }
  .lp-hero__conteudo > *:nth-child(4) { animation-delay: 0.58s; }
  @keyframes lp-sobe {
    to { opacity: 1; transform: none; }
  }
}

/* Desktop: a mesma linguagem cinematográfica do celular, em tela cheia.
   A foto cobre tudo; um véu lateral segura o texto; o lockup abre a cena. */
@media (min-width: 1024px) {
  .lp-hero { align-items: center; }
  .lp-hero::before {
    background:
      linear-gradient(to right, rgba(16, 15, 14, 0.88) 0%, rgba(16, 15, 14, 0.55) 38%, rgba(16, 15, 14, 0.12) 62%, rgba(16, 15, 14, 0.05) 100%),
      linear-gradient(to top, rgba(16, 15, 14, 0.55) 0%, transparent 30%);
  }
  .lp-hero__foto img { object-position: 50% 58%; }
  .lp-hero__conteudo { padding-top: 110px; }
  .lp-hero h1 { font-size: clamp(3.2rem, 4.9vw, 5rem); max-width: 15ch; }
  .lp-hero__sub { max-width: 46ch; }
}

/* ---------------------------------------------------------------- marquee clientes */

.lp-clientes {
  border-block: 1px solid rgba(245, 242, 236, 0.08);
  padding-block: var(--e-4);
  overflow: hidden;
}

.lp-clientes__rotulo {
  /* Sobrescreve o max-width:68ch global de <p> (tokens.css) — mesmo caso
     do .lp-clientes__cobertura logo abaixo: é rótulo curto e centralizado,
     não corpo de texto. Sem isso a caixa encolhe pro tamanho do texto e
     fica presa na esquerda (text-align:center só centraliza o texto DENTRO
     da caixa estreita, não a caixa dentro da faixa inteira). */
  max-width: none;
  font-size: var(--t-xs);
  color: rgba(245, 242, 236, 0.85);
  text-align: center;
  margin-bottom: var(--e-3);
}

.lp-marquee {
  display: flex;
  gap: 0;
  width: max-content;
}

.lp-marquee__grupo {
  display: flex;
  align-items: center;
  flex: none;
}

/* Cada condomínio: nome em display + cidade em tipografia de dados. */
.lp-marquee__grupo span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  padding-inline: var(--e-6);
  position: relative;
}

.lp-marquee__grupo span b {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: var(--p-medio);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.92);
}

.lp-marquee__grupo span i {
  font-style: normal;
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tuon-wood-luz);
}

.lp-marquee__grupo span + span::before {
  content: '';
  position: absolute;
  left: -3px; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--tuon-wood-luz);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-marquee { animation: lp-marquee 46s linear infinite; }
  @keyframes lp-marquee {
    to { transform: translateX(-50%); }
  }
}

/* Faixa de cobertura, discreta, fechando a vitrine de território. */
.lp-clientes__cobertura {
  /* Sobrescreve o max-width:68ch global de <p> (tokens.css) — é legenda
     curta e centralizada, não corpo de texto; deve caber numa linha só
     sempre que a largura real da tela permitir (isso é responsividade de
     verdade, não um teto de caractere arbitrário). */
  max-width: none;
  margin-top: var(--e-3);
  padding-inline: var(--e-4);
  text-align: center;
  font-size: var(--t-xs);
  color: rgba(245, 242, 236, 0.6);
}

@media (min-width: 768px) {
  .lp-clientes__rotulo { font-size: var(--t-sm); }

  .lp-clientes__cobertura {
    /* Pedido do Saulo (29/08): letra um pouco maior pra leitura, e mais
       respiro acima pra nunca ficar perto do letreiro rolando. */
    margin-top: var(--e-6);
    font-size: var(--t-sm);
  }
}

@media (min-width: 1024px) {
  /* Pedido do Saulo (29/08): as duas ficavam minúsculas numa tela de
     desktop de verdade — a faixa é bem mais larga que o texto nela. */
  .lp-clientes__rotulo,
  .lp-clientes__cobertura {
    font-size: var(--t-base);
  }
}

/* ---------------------------------------------------------------- serviços: índice com preview */

.lp-servicos { padding-block: var(--e-8) var(--e-9); }

@media (min-width: 1024px) {
  .lp-servicos { padding-block: var(--e-10) var(--e-10); }
  .lp-processo { padding-block: var(--e-10); }
  .lp-portal { padding-block: var(--e-10); }
  .lp-contato { padding-block: var(--e-10); }
}

.lp-servicos h2,
.lp-projetos h2,
.lp-processo h2,
.lp-oficina h2,
.lp-portal h2,
.lp-contato h2 {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: var(--p-titulo);
}

.lp-servicos__cabeca { max-width: 60ch; margin-bottom: var(--e-6); }
.lp-servicos__cabeca p { margin-top: var(--e-3); color: rgba(245, 242, 236, 0.92); }

.lp-indice { list-style: none; margin: 0; padding: 0; }

.lp-indice__item { border-top: 1px solid rgba(245, 242, 236, 0.12); }
.lp-indice__item:last-child { border-bottom: 1px solid rgba(245, 242, 236, 0.12); }

.lp-indice__link {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-4) 0;
  text-decoration: none;
  color: inherit;
}

.lp-indice__thumb {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.lp-indice__titulo {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: var(--p-display);
  line-height: 1.1;
  color: var(--tuon-block-ink);
  transition: color var(--m-rapido), transform var(--m-normal) var(--m-curva);
}

.lp-indice__desc {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: rgba(245, 242, 236, 0.9);
  max-width: 52ch;
}

/* Desktop: painel de preview à direita; hover acende a linha e troca a foto. */
@media (min-width: 1024px) {
  .lp-servicos__grade {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-7);
    align-items: start;
  }
  .lp-indice__link { grid-template-columns: 1fr; padding: var(--e-5) 0; }
  .lp-indice__thumb { display: none; }
  .lp-indice__item:hover .lp-indice__titulo,
  .lp-indice__item:focus-within .lp-indice__titulo {
    color: var(--tuon-wood-luz);
    transform: translateX(10px);
  }
  .lp-preview {
    position: sticky;
    top: 100px;
    aspect-ratio: 4 / 5;
    max-height: calc(100dvh - 130px);
    overflow: hidden;
    border-radius: var(--r-sm);
  }
  .lp-preview img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity var(--m-normal) var(--m-curva),
                transform var(--m-lento) var(--m-curva);
  }
  .lp-preview img.ativa { opacity: 1; transform: none; }
  .lp-preview__legenda {
    position: absolute; inset: auto 0 0 0;
    padding: var(--e-6) var(--e-4) var(--e-4);
    background: linear-gradient(to top, rgba(16, 15, 14, 0.82), transparent);
    font-size: var(--t-sm);
    color: rgba(245, 242, 236, 0.9);
  }
}

@media (max-width: 1023.98px) {
  .lp-preview { display: none; }
}

/* Fotos do serviço: lightbox aberto por :target — funciona sem JS.
   O JS só acrescenta Esc, trava de rolagem e as setas. */
.lp-fotos { position: fixed; inset: 0; z-index: 60; display: none; }
.lp-fotos:target { display: block; }
body.lp-fotos-aberta { overflow: hidden; }

.lp-fotos__fundo {
  position: absolute; inset: 0;
  background: rgba(16, 15, 14, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp-fotos__caixa {
  position: relative;
  height: 100dvh;
  max-width: 960px;
  margin-inline: auto;
  padding: var(--e-3) var(--e-4) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.lp-fotos__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.lp-fotos__titulo {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  font-weight: var(--p-display);
  color: var(--tuon-block-ink);
}

.lp-fotos__fechar {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(245, 242, 236, 0.25);
  border-radius: var(--r-cheio);
  color: var(--tuon-block-ink);
  text-decoration: none;
  font-size: 26px;
  line-height: 1;
  transition: border-color var(--m-rapido), background var(--m-rapido);
}
.lp-fotos__fechar:hover { border-color: var(--tuon-wood-soft); background: rgba(245, 242, 236, 0.06); }

.lp-fotos__trilho {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lp-fotos__trilho::-webkit-scrollbar { display: none; }

.lp-fotos__foto {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* object-fit contain sobre o placeholder borrado (fundo cover do
   .lp-img-prog): a foto inteira aparece e as bordas ficam ambientadas. */
.lp-fotos__foto img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.lp-fotos__foto figcaption {
  text-align: center;
  font-size: var(--t-sm);
  color: rgba(245, 242, 236, 0.85);
}

.lp-fotos__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.lp-fotos__setas { display: flex; align-items: center; gap: var(--e-2); }

.lp-fotos__contador {
  min-width: 56px;
  text-align: center;
  font-size: var(--t-sm);
  color: rgba(245, 242, 236, 0.85);
  font-variant-numeric: tabular-nums;
}

.lp-fotos__setas button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid rgba(245, 242, 236, 0.25);
  border-radius: var(--r-cheio);
  color: var(--tuon-block-ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color var(--m-rapido), background var(--m-rapido);
}
.lp-fotos__setas button:hover:not(:disabled) { border-color: var(--tuon-wood-soft); background: rgba(245, 242, 236, 0.06); }
.lp-fotos__setas button:disabled { opacity: 0.3; cursor: default; }

/* ---------------------------------------------------------------- projetos: galeria horizontal */

.lp-projetos { padding-block: 0 var(--e-9); }

.lp-projetos__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.lp-projetos__cabeca a {
  color: var(--tuon-wood-luz);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.lp-projetos__cabeca a:hover { color: #fff; }

.lp-galeria {
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e-4);
  scrollbar-width: none;
  /* sangra até a borda da tela */
  margin-inline: calc(-1 * var(--e-4));
  padding-inline: var(--e-4);
}
.lp-galeria::-webkit-scrollbar { display: none; }

.lp-obra {
  flex: 0 0 76%;
  scroll-snap-align: center;
}

.lp-obra figure { margin: 0; }

.lp-obra img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
}

.lp-obra figcaption {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: rgba(245, 242, 236, 0.92);
}

.lp-galeria__setas {
  display: none;
  gap: var(--e-2);
}

.lp-galeria__setas button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid rgba(245, 242, 236, 0.25);
  border-radius: var(--r-cheio);
  color: var(--tuon-block-ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color var(--m-rapido), background var(--m-rapido);
}
.lp-galeria__setas button:hover { border-color: var(--tuon-wood-soft); background: rgba(245, 242, 236, 0.06); }

@media (min-width: 641px) {
  .lp-galeria__setas { display: flex; }
  .lp-galeria {
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: x proximity;
  }
}

@media (min-width: 1024px) {
  .lp-obra { flex-basis: 400px; }
  .lp-obra img { transition: transform var(--m-lento) var(--m-curva); }
  .lp-obra:hover img { transform: scale(1.015); }
}

/* ---------------------------------------------------------------- costura */

.lp-costura {
  position: relative;
  height: 0;
}
.lp-costura .lp-ripas {
  position: absolute;
  inset: -5px 0 auto 0;
}

/* ---------------------------------------------------------------- processo */

.lp-processo { padding-block: var(--e-9); }

.lp-processo__cabeca { max-width: 58ch; }
.lp-processo__cabeca p { margin-top: var(--e-3); color: var(--tuon-muted); }

.lp-processo__grade {
  margin-top: var(--e-7);
  display: grid;
  gap: var(--e-6);
}

.lp-processo__nav { display: none; }

.lp-passo {
  display: grid;
  gap: var(--e-4);
}

.lp-passo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
}

.lp-passo h3 {
  font-size: var(--t-xl);
  font-weight: var(--p-medio);
}

.lp-passo p {
  margin-top: var(--e-2);
  color: var(--tuon-ink-2);
  font-size: var(--t-base);
  max-width: 52ch;
}

.lp-processo__portal {
  margin-top: var(--e-6);
  padding: var(--e-4) var(--e-5);
  background: var(--tuon-wood-wash);
  border-left: 3px solid var(--tuon-wood);
  border-radius: var(--r-sm);
  /* Fundo e filete já carregam o aviso; o texto não precisa repetir. */
  color: var(--tuon-ink-2);
  font-size: var(--t-sm);
  display: flex;
  align-items: center;
  gap: var(--e-4) var(--e-5);
  flex-wrap: wrap;
  justify-content: space-between;
}

.lp-processo__portal p { max-width: 48ch; margin: 0; }

@media (min-width: 1024px) {
  .lp-processo__grade {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--e-8);
    align-items: start;
  }
  .lp-processo__nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 120px;
    gap: 0;
  }
  .lp-processo__nav a {
    font-family: var(--f-display);
    font-size: 1.9rem;
    font-weight: var(--p-display);
    color: var(--tuon-muted);
    text-decoration: none;
    padding: var(--e-3) 0 var(--e-3) var(--e-4);
    border-left: 2px solid var(--tuon-line);
    transition: color var(--m-normal), border-color var(--m-normal), padding-left var(--m-normal) var(--m-curva);
  }
  .lp-processo__nav a.ativa {
    color: var(--tuon-ink);
    border-left-color: var(--tuon-wood);
    padding-left: var(--e-5);
  }
  .lp-passos { display: grid; gap: var(--e-8); }
  .lp-passo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .lp-passo:nth-child(even) img { order: 2; }
}

/* ---------------------------------------------------------------- oficina */

.lp-oficina { padding-block: 0 var(--e-9); }

.lp-oficina__texto p {
  /* Sobrescreve o max-width:68ch global de <p> (tokens.css) — acompanha a
     largura do título (que já usa o .tuon-conteudo inteiro, até 1180px:
     teto suficiente por si só). Com teto de leitura próprio (60ch) o
     parágrafo ficava bem mais estreito que o título logo acima, um "degrau"
     que sobrava vazio do lado (2º achado do Saulo na mesma seção). */
  max-width: none;
  margin-top: var(--e-3);
  color: var(--tuon-ink-2);
}

.lp-oficina__fotos {
  margin-top: var(--e-6);
  display: grid;
  gap: var(--e-4);
}

.lp-oficina__fotos img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}

@media (min-width: 780px) {
  .lp-oficina__fotos {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .lp-oficina__fotos > :nth-child(2) { margin-top: var(--e-7); }
  .lp-oficina__fotos > :nth-child(3) { margin-top: var(--e-9); }
}

/* ---------------------------------------------------------------- garantia */

.lp-garantia { padding-block: var(--e-9); }

.lp-garantia__topo { max-width: 52ch; margin-bottom: var(--e-6); }
.lp-garantia__topo h2 { margin: 0 0 var(--e-2); }
.lp-garantia__topo p { color: var(--tuon-ink-2); margin: 0; }

.lp-garantia__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-4);
}

.lp-garantia__item {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--tuon-line);
}

.lp-garantia__prazo {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  font-weight: var(--p-medio);
  color: var(--tuon-wood-deep);
  line-height: 1;
  flex: none;
  min-width: 4.5ch;
}

.lp-garantia__item span { color: var(--tuon-ink-2); }

@media (min-width: 700px) {
  .lp-garantia__grade { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .lp-garantia__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-2);
    padding: 0 0 0 var(--e-7);
    border-top: none;
    border-left: 1px solid var(--tuon-line);
  }
  .lp-garantia__item:first-child { padding-left: 0; border-left: none; }
}

/* -------------------------------------------------------------- quem somos */

.lp-quem-somos { padding-block: var(--e-4) var(--e-9); }

.lp-quem-somos__grade { display: grid; gap: var(--e-5); }

.lp-quem-somos__marca {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
}

.lp-quem-somos__marca b {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: var(--p-medio);
  color: var(--tuon-wood-deep);
  line-height: 1;
}

.lp-quem-somos__marca span {
  font-size: var(--t-sm);
  color: var(--tuon-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lp-quem-somos__corpo { max-width: 62ch; }
.lp-quem-somos__corpo h2 { margin-top: var(--e-2); max-width: 26ch; }

.lp-quem-somos__lista {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lp-quem-somos__pessoa {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--tuon-line);
}

.lp-quem-somos__pessoa:first-child { border-top: none; padding-top: 0; }

.lp-quem-somos__monograma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--tuon-wood-wash);
  color: var(--tuon-ink);
  box-shadow: inset 0 0 0 1px rgba(118, 78, 35, 0.18);
  font-family: var(--f-display);
  font-weight: var(--p-medio);
  font-size: 1.05rem;
}

.lp-quem-somos__id { display: flex; flex-direction: column; }

.lp-quem-somos__id b {
  font-family: var(--f-display);
  font-weight: var(--p-medio);
  font-size: 1.1rem;
  color: var(--tuon-ink);
}

.lp-quem-somos__id i {
  font-style: normal;
  font-family: var(--f-dados);
  font-size: var(--t-sm);
  color: var(--tuon-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (min-width: 900px) {
  .lp-quem-somos__grade { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: start; }
  .lp-quem-somos__lista { flex-direction: row; flex-wrap: wrap; gap: var(--e-5) var(--e-7); margin-top: var(--e-6); }
  .lp-quem-somos__pessoa { border-top: none; padding: 0; }
}

/* -------------------------------------------------------------- arquitetos */

.lp-arquitetos { padding-block: 0 var(--e-9); }

.lp-arquitetos__caixa {
  max-width: 68ch;
  padding: var(--e-7) var(--e-6);
  background: var(--tuon-wood-wash);
  border-radius: var(--r-sm);
}

.lp-arquitetos__caixa h2 { margin-top: var(--e-2); }
.lp-arquitetos__caixa p {
  margin-top: var(--e-3);
  margin-bottom: var(--e-5);
  /* Fundo já é o tom quente da caixa; parágrafo inteiro em âmbar era
     pesado demais pra ler. */
  color: var(--tuon-ink-2);
}

/* ---------------------------------------------------------------- portal */

.lp-portal {
  background: var(--tuon-sand);
  color: var(--tuon-ink);
  padding-block: var(--e-9);
}

.lp-portal h2,
.lp-processo h2,
.lp-oficina h2,
.lp-contato h2,
.lp-portal h3,
.lp-processo h3 {
  color: var(--tuon-ink);
}

.lp-portal__grade { display: grid; gap: var(--e-7); }

.lp-portal .tuon-etiqueta { color: var(--tuon-muted); }

.lp-portal h2 { margin-top: var(--e-3); }

.lp-portal__texto p {
  margin-top: var(--e-3);
  color: var(--tuon-ink-2);
  max-width: 50ch;
}

.lp-portal__ctas {
  margin-top: var(--e-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Prévia real do produto: cartão do portal com a trilha de etapas. */
.lp-previa {
  background: var(--tuon-surface);
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-md);
  box-shadow: var(--s-3);
  overflow: hidden;
  max-width: 440px;
  justify-self: center;
  width: 100%;
}

.lp-previa__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--tuon-block);
  color: var(--tuon-block-ink);
  padding: var(--e-3) var(--e-4);
}

.lp-previa__topo b {
  font-family: var(--f-display);
  font-weight: var(--p-medio);
  letter-spacing: 0.05em;
  font-size: var(--t-sm);
}

.lp-previa__topo span {
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  opacity: 0.65;
}

.lp-previa__corpo { padding: var(--e-4); color: var(--tuon-ink); }

.lp-previa__obra { font-family: var(--f-display); font-size: var(--t-lg); font-weight: var(--p-medio); }
.lp-previa__meta { font-size: var(--t-xs); color: var(--tuon-muted); margin-top: 2px; }

.lp-previa__prog { margin-top: var(--e-3); }

.lp-previa__prog-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-xs);
  color: var(--tuon-muted);
}

.lp-previa__prog-linha b { font-size: var(--t-sm); color: var(--tuon-ink); }

/* Barra ripada da prévia: monta ripa por ripa quando o cartão entra em cena. */
.lp-previa .tuon-ripado { margin-top: var(--e-2); height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .lp-previa .tuon-ripado i {
    transition: background 0.5s var(--m-curva), box-shadow 0.5s var(--m-curva);
    transition-delay: var(--d, 0s);
  }
  .lp-previa:not(.em-vista) .tuon-ripado i.feita,
  .lp-previa:not(.em-vista) .tuon-ripado i.atual {
    background: var(--tuon-sand);
    box-shadow: none;
    animation: none;
  }
}

.lp-previa__item {
  border: 1px solid var(--tuon-line-soft);
  border-radius: var(--r-sm);
  padding: var(--e-3);
  margin-top: var(--e-3);
  background: var(--tuon-paper);
}

.lp-previa__item h4 { font-family: var(--f-texto); font-size: var(--t-sm); font-weight: var(--p-forte); }

.lp-previa__linha-fim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--e-2);
  gap: var(--e-2);
}

.lp-previa__data { font-family: var(--f-dados); font-size: var(--t-xs); color: var(--tuon-muted); }

/* animação da trilha quando entra em vista */
.lp-previa .tuon-trilha__passo { transition: background 0.5s var(--m-curva); }
.lp-previa:not(.em-vista) .tuon-trilha__passo--feito,
.lp-previa:not(.em-vista) .tuon-trilha__passo--atual { background: var(--tuon-line); }

/* Barra gradiente (a MESMA do portal via barraProgresso) — reveal ao entrar em cena. */
.lp-previa__barra { margin-top: var(--e-2); }
@media (prefers-reduced-motion: no-preference) {
  .lp-previa:not(.em-vista) .lp-previa__barra .tuon-barra__fill { clip-path: inset(0 100% 0 0 round 999px); }
}
/* Andamentos recolhíveis na prévia — mesma ideia do portal (observações recolhíveis). */
.lp-previa__hist { margin-top: var(--e-2); border-top: 1px solid var(--tuon-line-soft); padding-top: var(--e-2); }
.lp-previa__hist > summary {
  list-style: none; cursor: pointer; font-size: var(--t-xs); font-weight: var(--p-forte);
  color: var(--tuon-wood-deep);
}
.lp-previa__hist > summary::-webkit-details-marker { display: none; }
.lp-previa__hist > summary span { color: var(--tuon-muted); }
.lp-previa__hist-lista { display: grid; gap: 3px; margin-top: var(--e-1); }
.lp-previa__hist-lista p { margin: 0; font-size: var(--t-xs); color: var(--tuon-muted); }
.lp-previa__hist-lista time { color: var(--tuon-wood-deep); margin-right: var(--e-1); font-family: var(--f-dados); }

.lp-previa__fin {
  margin-top: var(--e-3);
  border-top: 1px solid var(--tuon-line-soft);
  padding-top: var(--e-3);
  display: grid;
  gap: 6px;
  font-size: var(--t-sm);
}
.lp-previa__fin div { display: flex; justify-content: space-between; }
.lp-previa__fin span { color: var(--tuon-muted); }
.lp-previa__fin b { font-family: var(--f-dados); font-weight: var(--p-medio); }
.lp-previa__fin .saldo b { color: var(--tuon-wood-deep); font-weight: var(--p-forte); }

@media (min-width: 1024px) {
  .lp-portal__grade {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--e-8);
  }
  .lp-previa { transform: rotate(0.6deg); }
}

/* ----------------------------------------------------------------- diário
   Formato jornal impresso: capa (manchete) + coluna de notas, separadas por
   fio vertical — não cartões de app. Pedido explícito do Saulo: "precisa ter
   cara de notícia atualizada". */

.lp-diario { padding-block: 0 var(--e-9); }

.lp-jornal__masthead { text-align: center; margin-bottom: var(--e-7); }

.lp-jornal__nome {
  font-family: var(--f-display);
  font-weight: var(--p-forte);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  letter-spacing: 0.01em;
  margin: 0;
}

.lp-jornal__linha { height: 3px; background: var(--tuon-ink); margin: var(--e-3) 0 0; }
.lp-jornal__linha--fina { height: 1px; margin-top: var(--e-2); background: var(--tuon-line); }

.lp-jornal__edicao {
  margin: var(--e-2) 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tuon-muted);
}

/* Caixinha de clima real, estilo "previsão do tempo" de jornal — ícones na
   cor da madeira (o único acento âmbar novo desde a v1.0080, pedido
   explícito do Saulo pra esse elemento específico). */
.lp-jornal__clima {
  margin: var(--e-3) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--e-1) var(--e-3);
  max-width: 48ch;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-sm);
  background: var(--tuon-wood-wash);
  font-size: var(--t-sm);
  text-align: center;
}

.lp-jornal__clima-medidas {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: var(--p-forte);
  color: var(--tuon-ink);
  white-space: nowrap;
}

.lp-jornal__clima-medida { display: inline-flex; align-items: center; gap: 5px; }
.lp-jornal__clima-medida svg { color: var(--tuon-wood-deep); flex: none; }

.lp-jornal__clima-quando {
  font-size: var(--t-xs);
  color: var(--tuon-muted);
  white-space: nowrap;
}

.lp-jornal__clima-dica { font-style: italic; color: var(--tuon-ink-2); }

.lp-jornal__grade { display: grid; gap: var(--e-7); }

.lp-jornal__kicker {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
  font-family: var(--f-dados);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tuon-muted);
  font-weight: var(--p-medio);
}

.lp-jornal__quando { color: var(--tuon-muted); font-weight: var(--p-normal); }

.lp-jornal__ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tuon-muted);
  font-weight: var(--p-normal);
}

.lp-jornal__ao-vivo i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tuon-wood-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-jornal__ao-vivo i { animation: lp-pulso 2s ease-in-out infinite; }
}

@keyframes lp-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

.lp-jornal__manchete h3 {
  font-family: var(--f-display);
  font-weight: var(--p-forte);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

.lp-jornal__manchete h3 a { color: inherit; text-decoration: none; }

.lp-jornal__manchete h3 a:hover,
.lp-jornal__manchete h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--tuon-wood-deep);
  text-underline-offset: 0.15em;
}

.lp-jornal__manchete h3 a span { color: var(--tuon-muted); font-size: 0.65em; }

.lp-jornal__foto {
  display: block;
  margin: 0 0 var(--e-4);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tuon-wood-wash);
}

.lp-jornal__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.lp-jornal__corpo {
  color: var(--tuon-ink-2);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
}

.lp-jornal__corpo::first-letter {
  float: left;
  font-family: var(--f-display);
  font-weight: var(--p-forte);
  font-size: 3.6em;
  line-height: 0.78;
  padding-right: 0.08em;
  color: var(--tuon-wood-deep);
}

.lp-jornal__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding-top: var(--e-6);
  border-top: 1px solid var(--tuon-line);
}

.lp-jornal__nota + .lp-jornal__nota {
  padding-top: var(--e-5);
  border-top: 1px solid var(--tuon-line);
}

.lp-jornal__nota h4 {
  font-family: var(--f-display);
  font-weight: var(--p-titulo);
  font-size: 1.05rem;
  margin: 0 0 var(--e-2);
}

.lp-jornal__nota--externa {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
}

.lp-jornal__nota-foto {
  display: block;
  flex: none;
  width: 84px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tuon-wood-wash);
}

.lp-jornal__nota-foto img {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
}

.lp-jornal__nota-corpo { min-width: 0; flex: 1 1 auto; }

.lp-jornal__nota--externa h4 a {
  color: inherit;
  text-decoration: none;
}

.lp-jornal__nota--externa h4 a:hover,
.lp-jornal__nota--externa h4 a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--tuon-wood-deep);
  text-underline-offset: 0.15em;
}

.lp-jornal__nota--externa h4 a span { color: var(--tuon-muted); }

.lp-jornal__nota p:not(.lp-jornal__kicker) {
  color: var(--tuon-ink-2);
  font-size: 0.92rem;
  margin: 0;
}

@media (min-width: 860px) {
  .lp-jornal__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lp-jornal__coluna {
    padding-top: 0;
    padding-left: var(--e-7);
    border-top: none;
    border-left: 1px solid var(--tuon-line);
  }
}

/* ---------------------------------------------------------------- contato */

.lp-contato { padding-block: var(--e-9); }

.lp-contato__grade {
  display: grid;
  gap: var(--e-7);
  margin-top: var(--e-6);
}

.lp-contato__intro { max-width: 56ch; color: var(--tuon-ink-2); margin-top: var(--e-3); }

.lp-form { display: grid; gap: var(--e-4); }

.lp-form textarea.tuon-campo__controle { min-height: 120px; resize: vertical; }

.lp-form .tuon-btn { justify-self: start; }

.lp-contato__dados {
  display: grid;
  gap: var(--e-4);
  align-content: start;
  font-size: var(--t-base);
}

.lp-dado {
  border-top: 1px solid var(--tuon-line);
  padding-top: var(--e-3);
}

.lp-dado b {
  display: block;
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--k-etiqueta);
  text-transform: uppercase;
  color: var(--tuon-muted);
  margin-bottom: 4px;
}

.lp-dado a {
  display: inline-block;
  padding-block: var(--e-2);
  margin-block: calc(-1 * var(--e-2));
  color: var(--tuon-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tuon-line);
}
.lp-dado a:hover { border-bottom-color: var(--tuon-wood); }

@media (min-width: 1024px) {
  .lp-contato__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--e-9);
  }
}

/* ---------------------------------------------------------------- footer */

.lp-rodape {
  background: var(--tuon-block);
  color: rgba(245, 242, 236, 0.85);
  padding-block: 0 var(--e-6);
  font-size: var(--t-sm);
}

/* A costura ripada da casa abre o rodapé. */
.lp-rodape__ripas { margin-bottom: var(--e-7); }
.lp-rodape__ripas .lp-ripas { height: 7px; opacity: 0.55; }

.lp-rodape__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-6) var(--e-5);
}

.lp-rodape__marca {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: var(--e-4);
}

.lp-rodape .tuon-marca__nome { color: var(--tuon-block-ink); }
.lp-rodape .tuon-marca__bloco { background: transparent; }

.lp-rodape__info {
  color: rgba(245, 242, 236, 0.66);
  line-height: 1.7;
  max-width: 40ch;
}

.lp-rodape__rotulo {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--k-etiqueta);
  text-transform: uppercase;
  color: var(--tuon-wood-luz);
}

.lp-rodape__col { display: grid; gap: var(--e-1); align-content: start; }

.lp-rodape a {
  display: inline-block;
  padding-block: var(--e-2);
  margin-block: calc(-1 * var(--e-2));
  color: rgba(245, 242, 236, 0.85);
  text-decoration: none;
  transition: color var(--m-rapido);
}
.lp-rodape a:hover { color: #fff; }

.lp-rodape__fim {
  margin-top: var(--e-7);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(245, 242, 236, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: rgba(245, 242, 236, 0.6);
}

/* Atalho da equipe: some no meio do copyright, acende no hover. */
.lp-rodape a.lp-rodape__equipe {
  color: rgba(245, 242, 236, 0.6);
  text-decoration: underline;
  text-decoration-color: rgba(245, 242, 236, 0.25);
  text-underline-offset: 3px;
  padding-block: var(--e-2); /* alvo de toque folgado sem mudar o visual */
}
.lp-rodape a.lp-rodape__equipe:hover { color: #fff; }

/* Assinatura de quem elaborou: discreta, acende no hover.
   Dois pedaços que fluem e quebram como texto — nunca esparramam. */
.lp-rodape a.lp-rodape__credito {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--e-2);
  row-gap: 2px;
  min-height: 44px;
  color: rgba(245, 242, 236, 0.62);
}
.lp-rodape a.lp-rodape__credito b { color: rgba(245, 242, 236, 0.85); }
.lp-rodape__credito-zap {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  white-space: nowrap;
}
.lp-rodape a.lp-rodape__credito:hover,
.lp-rodape a.lp-rodape__credito:hover b { color: #fff; }

/* No celular, o fim do rodapé empilha centrado. */
@media (max-width: 779.98px) {
  .lp-rodape__fim {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .lp-rodape a.lp-rodape__credito { justify-content: center; }
}

/* No celular o rodapé termina acima do dock, nunca atrás dele. */
@media (max-width: 1023.98px) {
  .lp-rodape { padding-bottom: calc(var(--e-6) + 84px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 780px) {
  .lp-rodape__grade { grid-template-columns: 2fr 1fr 1fr; }
  .lp-rodape__marca { grid-column: auto; }
}

/* ---------------------------------------------------------------- imagens progressivas */

.lp-img-prog {
  background-size: cover;
  background-position: center;
}

/* Deterrente simples contra arrastar/salvar as fotos com um clique — ver
   também o bloqueio de contextmenu em site.js. Não afeta seleção de texto. */
.lp img { -webkit-user-drag: none; user-drag: none; }

/* CTA secundário sobre foto: vidro escuro, legível em qualquer fundo. */
.lp-btn-vidro {
  background: rgba(16, 15, 14, 0.45);
  color: #fff;
  border-color: rgba(245, 242, 236, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lp-btn-vidro:hover { background: rgba(16, 15, 14, 0.65); border-color: #fff; color: #fff; }

/* ---------------------------------------------------------------- horário e mapa */

.lp-horarios { display: grid; gap: 2px; }

.lp-horarios__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
}

.lp-horarios__linha .tuon-dados { font-size: var(--t-sm); }

/* Estado real da loja, calculado no servidor a cada visita. */
.lp-aberto {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  color: var(--tuon-muted);
}

.lp-aberto::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--r-cheio);
  background: var(--tuon-faint);
  flex: none;
}

.lp-aberto--sim { color: var(--ui-ok); }
.lp-aberto--sim::before { background: var(--ui-ok); }

.lp-mapa {
  position: relative;
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tuon-sand);
}

.lp-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Mapa em tom de papel envelhecido, na paleta da madeira. */
  filter: grayscale(0.85) sepia(0.3) saturate(1.1) brightness(0.98) contrast(1.03);
}

/* Vinheta por cima do iframe: costura o mapa na página sem travar o uso. */
.lp-mapa::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(118, 78, 35, 0.14),
    inset 0 -56px 64px -40px rgba(118, 78, 35, 0.35);
}

.lp-mapa__nota {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  background: var(--tuon-surface);
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-cheio);
  box-shadow: var(--s-2);
  color: var(--tuon-ink);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: box-shadow var(--m-rapido), border-color var(--m-rapido);
}
.lp-mapa__nota:hover { border-color: var(--tuon-wood-soft); box-shadow: var(--s-3); }
.lp-mapa__nota b { font-weight: var(--p-medio); }

.lp-mapa__estrela { color: var(--tuon-wood-deep); font-size: 17px; line-height: 1; }

.lp-mapa__ir {
  position: absolute;
  left: var(--e-3);
  bottom: var(--e-3);
  min-height: 44px;
  box-shadow: var(--s-2);
}

/* Depoimentos do Google, logo abaixo do mapa. */
.lp-avaliacoes {
  display: grid;
  gap: var(--e-4);
  border-top: 1px solid var(--tuon-line);
  padding-top: var(--e-4);
}

.lp-avaliacoes__rotulo {
  font-family: var(--f-dados);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--k-etiqueta);
  text-transform: uppercase;
  color: var(--tuon-muted);
}

.lp-avaliacao { margin: 0; display: grid; gap: var(--e-1); }

.lp-avaliacao__estrelas {
  color: var(--tuon-wood-deep);
  font-size: var(--t-sm);
  letter-spacing: 3px;
}

.lp-avaliacao blockquote {
  margin: 0;
  color: var(--tuon-ink-2);
  max-width: 46ch;
}

.lp-avaliacao figcaption {
  font-size: var(--t-sm);
  color: var(--tuon-muted);
}

.lp-avaliacoes__todas {
  justify-self: start;
  color: var(--tuon-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tuon-line);
  padding-block: var(--e-1);
}
.lp-avaliacoes__todas:hover { border-bottom-color: var(--tuon-wood); }

/* ---------------------------------------------------------------- formulário 2.0
   Ficha clássica, acabamento de marcenaria: campos generosos, foco na madeira. */

.lp-form2__grade {
  display: grid;
  gap: var(--e-4);
}

.lp-form2 .tuon-campo__controle {
  background: var(--tuon-surface);
  transition: border-color var(--m-rapido) var(--m-curva),
              box-shadow var(--m-rapido) var(--m-curva);
}

.lp-form2 .tuon-campo__controle:focus-visible {
  outline: none;
  border-color: var(--tuon-wood);
  box-shadow: 0 0 0 3px var(--tuon-wood-wash);
}

.lp-form2 textarea.tuon-campo__controle { resize: vertical; min-height: 96px; }

@media (min-width: 780px) {
  .lp-form2__grade { grid-template-columns: 1fr 1fr; gap: var(--e-4) var(--e-5); }
  .lp-form2__toda { grid-column: 1 / -1; }
}

.lp-form2__pe {
  margin-top: var(--e-5);
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
}

.lp-form2__nota { font-size: var(--t-sm); color: var(--tuon-muted); }

.lp-form2__opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--tuon-muted);
  cursor: pointer;
  user-select: none;
}

.lp-form2__opcao input {
  width: 16px;
  height: 16px;
  accent-color: var(--tuon-wood);
  flex: none;
}

.lp-form2__consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--tuon-muted);
  cursor: pointer;
}

.lp-form2__consentimento input {
  width: 16px;
  height: 16px;
  margin-top: 0.2em;
  accent-color: var(--tuon-wood);
  flex: none;
}

.lp-form2__consentimento a { color: inherit; text-decoration: underline; }

.lp-horarios__nota {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--tuon-muted);
}

/* ------------------------------------------------ autocomplete de cidades */

.lp-ac { position: relative; }

.lp-ac__lista {
  position: absolute;
  top: calc(100% - var(--e-6));
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: var(--e-1);
  list-style: none;
  background: var(--tuon-surface);
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-md);
  box-shadow: var(--s-3);
  max-height: 264px;
  overflow-y: auto;
}

.lp-ac__lista li {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  cursor: pointer;
}

.lp-ac__lista li b { font-weight: var(--p-forte); color: var(--tuon-wood-deep); }

.lp-ac__lista li:hover,
.lp-ac__lista li[aria-selected='true'] {
  background: var(--tuon-wood-wash);
}

/* ---------------------------------------------------------------- WhatsApp flutuante
   Verde oficial dentro do horário de atendimento; fora dele, um vidro escuro
   discreto. O estado vem do servidor a cada visita. */

.lp-zap {
  position: fixed;
  right: max(var(--e-4), env(safe-area-inset-right));
  bottom: max(var(--e-4), env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  aspect-ratio: 1 / 1;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  pointer-events: none;
  transition: opacity var(--m-normal) var(--m-curva),
              transform var(--m-normal) var(--m-curva);
}

.lp-zap svg { width: 30px; height: 30px; }

.lp-zap--on {
  background: linear-gradient(135deg, #2BD668 0%, #17A851 100%);
  box-shadow:
    0 2px 4px rgba(16, 15, 14, 0.18),
    0 8px 22px -4px rgba(23, 168, 81, 0.55);
}

.lp-zap--off {
  width: 48px;
  height: 48px;
  background: rgba(26, 25, 23, 0.66);
  color: rgba(245, 242, 236, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 242, 236, 0.16);
  box-shadow: 0 4px 14px rgba(16, 15, 14, 0.3);
}

.lp-zap--off svg { width: 24px; height: 24px; }

/* Aparece depois que o visitante começa a rolar; no topo, o hero fala primeiro. */
.lp-rolou .lp-zap {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lp-rolou .lp-zap--off { opacity: 0.85; }

.lp-zap:hover { transform: translateY(-2px); opacity: 1; }
.lp-zap:active { transform: scale(0.94); }

/* Etiqueta em balão, ao lado do botão. */
.lp-zap__dica {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--tuon-block);
  color: var(--tuon-block-ink);
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
  box-shadow: var(--s-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-normal) var(--m-curva),
              transform var(--m-normal) var(--m-curva);
}

.lp-zap:hover .lp-zap__dica,
.lp-zap--acena .lp-zap__dica {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .lp-zap, .lp-zap__dica { transition: none; }
}

/* ================================================================
   DESKTOP E TABLET: a cena ganha cinema.
   Tudo aqui é melhoria progressiva — nada muda no celular, nada
   existe para quem pediu menos movimento, e os efeitos de rolagem
   (animation-timeline) degradam em silêncio onde não há suporte.
   ================================================================ */

/* Âncoras deslizam em vez de saltar. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {

  /* Pedido do Saulo (29/08): no desktop o conteúdo aparece direto, sem
     esperar rolagem — o "nasce desfocado e sobe" fica exclusivo do celular,
     onde o scroll é a forma natural de descobrir a página aos poucos. */
  .lp-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  /* Brilho especular varre o vidro no hover, uma vez. */
  .lp .tuon-btn--principal,
  .lp-btn-portal { position: relative; overflow: hidden; }

  .lp .tuon-btn--principal::before,
  .lp-btn-portal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
      transparent 42%, rgba(255, 255, 255, 0.32) 50%, transparent 58%);
    transform: translateX(-130%);
  }
  .lp .tuon-btn--principal:hover::before,
  .lp-btn-portal:hover::before {
    transform: translateX(130%);
    transition: transform 0.7s var(--m-curva);
  }

  /* O lightbox de fotos abre como um modal Apple: véu funde,
     cartão sobe e assenta. */
  .lp-fotos:target .lp-fotos__fundo { animation: lp-funde 0.35s var(--m-curva) both; }
  .lp-fotos:target .lp-fotos__caixa { animation: lp-assenta 0.45s var(--m-curva) both; }
}

@keyframes lp-funde { from { opacity: 0; } }
@keyframes lp-assenta {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
}

/* ---- efeitos de rolagem: só onde o navegador sabe fazer ---- */
@supports (animation-timeline: view()) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {

    /* Fotos do processo e da oficina respiram com a rolagem. */
    .lp-passo img,
    .lp-oficina__fotos img {
      animation: lp-respira linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Na galeria horizontal, cada obra levanta ao entrar em cena. */
    .lp-obra {
      animation: lp-obra-entra linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% entry 80%;
    }

    /* A costura de ripas se estende ao cruzar a tela. */
    .lp-costura .lp-ripas {
      transform-origin: left center;
      animation: lp-ripas-estendem linear both;
      animation-timeline: view();
      animation-range: entry -100% exit 200%;
    }
  }
}

@keyframes lp-respira {
  from { transform: translateY(16px); }
  to   { transform: translateY(-16px); }
}
@keyframes lp-obra-entra {
  from { opacity: 0.35; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-ripas-estendem {
  from { transform: scaleX(0.12); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.85; }
}

/* ---- refinamentos de notebook para cima ---- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {

  /* O cabeçalho condensa ao rolar, como as barras da Apple. */
  .lp-topo__linha { transition: height var(--m-normal) var(--m-curva); }
  .lp-topo.solido .lp-topo__linha { height: 56px; }
  .lp-topo.solido {
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
  }

  /* Sublinhado que desliza da esquerda no menu. */
  .lp-nav a { position: relative; border-bottom: 0; }
  .lp-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1px;
    background: var(--tuon-wood-luz);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--m-normal) var(--m-curva);
  }
  .lp-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  /* A prévia do portal levanta da mesa em perspectiva e assenta
     no leve giro que já era dela. */
  .lp-previa {
    opacity: 0;
    transform: perspective(1200px) rotateX(16deg) translateY(48px) scale(0.95);
    transition: opacity 0.9s var(--m-curva), transform 0.9s var(--m-curva);
  }
  .lp-previa.em-vista {
    opacity: 1;
    transform: rotate(0.6deg);
  }
}

/* ---------------------------------------------------------------- anexos de plantas
   Zona de arrastar-e-soltar do formulário. Só aparece com JS. */
.lp-anexos__zona {
  display: grid;
  justify-items: center;
  gap: var(--e-1);
  padding: var(--e-5) var(--e-4);
  border: 1px dashed var(--tuon-wood-soft);
  border-radius: var(--r-md);
  background: var(--tuon-wood-wash);
  color: var(--tuon-ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--m-rapido), background var(--m-rapido),
              transform var(--m-rapido);
}

.lp-anexos__zona:hover,
.lp-anexos__zona.arrastando {
  border-color: var(--tuon-wood);
  background: var(--tuon-sand);
}

.lp-anexos__zona.arrastando { border-style: solid; transform: scale(1.01); }

.lp-anexos__zona input { display: none; }
.lp-anexos__zona svg { color: var(--tuon-wood-deep); }
.lp-anexos__zona b { font-size: var(--t-sm); color: var(--tuon-ink); }
.lp-anexos__zona > span { font-size: var(--t-xs); color: var(--tuon-muted); max-width: 44ch; }

.lp-anexos__lista {
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}

.lp-anexos__lista li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  padding: 0 var(--e-2) 0 var(--e-4);
  background: var(--tuon-surface);
  border: 1px solid var(--tuon-line);
  border-radius: var(--r-cheio);
  font-size: var(--t-sm);
}

.lp-anexos__lista li span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-anexos__lista li small {
  color: var(--tuon-muted);
  font-family: var(--f-dados);
  white-space: nowrap;
}

.lp-anexos__lista li button {
  width: 36px; height: 36px;
  flex: none;
  display: grid; place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tuon-muted);
  font-size: 20px;
  line-height: 1;
  border-radius: var(--r-cheio);
}
.lp-anexos__lista li button:hover { background: var(--tuon-sand); color: var(--tuon-ink); }

/* ---------------------------------------------------------------- idiomas
   Seletor PT · EN · ES com bandeiras em SVG. O idioma atual veste a
   cápsula; os demais ficam discretos até o hover. Padrão do site: PT-BR. */
.lp-idiomas {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lp-idiomas__opcao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-cheio);
  color: rgba(245, 242, 236, 0.7);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: 0.05em;
  transition: color var(--m-rapido), border-color var(--m-rapido),
              background var(--m-rapido);
}

.lp-idiomas__opcao svg {
  display: block;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  opacity: 0.75;
  filter: saturate(0.75);
  transition: opacity var(--m-rapido), filter var(--m-rapido);
}

.lp-idiomas__opcao:hover { color: #fff; }
.lp-idiomas__opcao:hover svg { opacity: 1; filter: none; }

.lp-idiomas__opcao.ativa {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(16, 15, 14, 0.35);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.lp-idiomas__opcao.ativa svg { opacity: 1; filter: none; }

/* Seletor compacto do celular: só a bandeira atual ao lado do hambúrguer;
   tocar abre as três opções num painel de vidro. Some no desktop. */
.lp-idiomas-mini { position: relative; margin-left: auto; }

.lp-idiomas-mini summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--r-cheio);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(16, 15, 14, 0.3);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: rgba(245, 242, 236, 0.85);
  cursor: pointer;
  transition: border-color var(--m-rapido), background var(--m-rapido);
}
.lp-idiomas-mini summary::-webkit-details-marker { display: none; }

.lp-idiomas-mini summary svg:first-child {
  display: block;
  width: 27px;
  height: 19px;
  border-radius: 3.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.lp-idiomas-mini__seta { transition: transform var(--m-rapido); }
.lp-idiomas-mini[open] .lp-idiomas-mini__seta { transform: rotate(180deg); }

.lp-idiomas-mini[open] summary {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(16, 15, 14, 0.55);
}

.lp-idiomas-mini__lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  display: grid;
  padding: var(--e-1);
  background: rgba(26, 25, 23, 0.97);
  border: 1px solid rgba(245, 242, 236, 0.14);
  border-radius: var(--r-lg);
  box-shadow: var(--s-3);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transform-origin: top right;
}

/* O painel abre com o mesmo pop de mola do dock. */
@media (prefers-reduced-motion: no-preference) {
  .lp-idiomas-mini[open] .lp-idiomas-mini__lista {
    animation: lp-pop-vidro 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}
@keyframes lp-pop-vidro {
  from { opacity: 0; transform: scale(0.86) translateY(-4px); }
}

.lp-idiomas-mini__lista a {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 46px;
  padding: 0 var(--e-3);
  border-radius: var(--r-md);
  color: rgba(245, 242, 236, 0.85);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  letter-spacing: 0.04em;
}
.lp-idiomas-mini__lista a svg { width: 24px; height: 17px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.lp-idiomas-mini__lista a:active { background: rgba(245, 242, 236, 0.08); }
.lp-idiomas-mini__lista a.ativa { color: var(--tuon-wood-luz); }
.lp-idiomas-mini__lista a.ativa::after { content: '\2713'; margin-left: auto; font-size: var(--t-xs); }

@media (min-width: 1024px) {
  .lp-idiomas-mini { display: none; }
}

/* ================================================================
   COREOGRAFIA DOS REVEALS
   O motor é o mesmo (.lp-reveal + .em-vista via IntersectionObserver),
   mas cada natureza de conteúdo entra do seu jeito — nada de tudo
   subir igual:
     --foco    títulos de seção: sobem ganhando foco (blur → nítido)
     --esq     listas: deslizam da esquerda, em cascata
     --dir     colunas de apoio: chegam da direita
     --zoom    fotos e cartões: assentam de um leve zoom
     --cortina fotos do processo: a imagem se abre como cortina
   ================================================================ */

.lp-reveal--foco {
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity var(--m-lento) var(--m-curva),
              transform var(--m-lento) var(--m-curva),
              filter var(--m-lento) var(--m-curva);
}
.lp-reveal--foco.em-vista { filter: blur(0); }

/* No desktop a rolagem é mais rápida e o olho já foca no título: os
   --m-lento (420ms) do mobile ficam arrastados. Encurtar a duração (v1.0081)
   não foi suficiente — o olho só considera o texto "legível" perto do fim
   do blur, então blur(8px) gasta a maior parte da transição ainda ilegível.
   Reduzir o raio em vez de (só) o tempo resolve a sensação de demora. */
@media (min-width: 1024px) {
  .lp-reveal--foco {
    filter: blur(3px);
    transition-duration: var(--m-normal);
  }
}

.lp-reveal--esq { transform: translateX(-32px); }
.lp-indice__item:nth-child(2) { transition-delay: 60ms; }
.lp-indice__item:nth-child(3) { transition-delay: 120ms; }
.lp-indice__item:nth-child(4) { transition-delay: 180ms; }
.lp-indice__item:nth-child(5) { transition-delay: 240ms; }

.lp-reveal--dir { transform: translateX(32px); }

.lp-reveal--zoom { transform: scale(0.93) translateY(10px); }

/* Dois tempos: o cartão do passo sobe, e um instante depois a foto
   se abre de baixo para cima, como cortina. */
.lp-reveal--cortina img {
  clip-path: inset(0 0 30% 0);
  transition: clip-path var(--m-lento) var(--m-curva) 140ms;
}
.lp-reveal--cortina.em-vista img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .lp-reveal--foco { filter: none; }
  .lp-reveal--cortina img { clip-path: none; transition: none; }
}