/* TESTE (branch teste/header-parede): a foto da parede com a logo vira o topo; a mesma parede continua
   pela página (textura tirada da própria foto, espelhada para emendar sem costura); vinheta escura nas bordas.
   Liga com class="parede" no <html>. Para desligar, basta tirar a classe.
   ⚠️ Origem da foto a confirmar: o Manual Cap. 11 veta imagem de IA e de banco de imagem. */

.parede-fundo { display: none; }

/* A parede continua por toda a página clara. */
html.parede body { background: var(--cor-superficie) url("../img/parede-textura.jpg") top center / 100% auto repeat-y; }
html.parede .secao-container { background: color-mix(in srgb, var(--cor-primaria) 6%, transparent); }

/* Vinheta escura nas bordas da tela: fica parada, por cima da página e por baixo do cabeçalho. */
html.parede body::after {
  content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none;
  box-shadow:
    inset 220px 0 220px -90px color-mix(in srgb, var(--cor-tinta) 48%, transparent),
    inset -220px 0 220px -90px color-mix(in srgb, var(--cor-tinta) 48%, transparent),
    inset 0 0 240px 30px color-mix(in srgb, var(--cor-tinta) 28%, transparent);
}
@media (max-width: 899px) { html.parede body::after { box-shadow: inset 0 0 110px 10px color-mix(in srgb, var(--cor-tinta) 30%, transparent); } }

/* Cabeçalho de vidro claro sobre a parede. */
html.parede .topo { background: color-mix(in srgb, var(--cor-superficie) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ── Topo: textos escuros sobre a parede; a logo de verdade é a da foto ── */
html.parede .lp-marca-hero { display: none !important; }
html.parede .lp-hero .lp-abertura { color: var(--cor-tinta); }
html.parede .lp-hero h1 { color: var(--cor-tinta); }
html.parede .lp-hero .destaque { color: var(--cor-grafite); opacity: 1; }
html.parede .lp-hero .garantias, html.parede .lp-hero .garantias .ic { color: var(--cor-grafite); opacity: 1; }
html.parede .lp-hero .lp-link { color: var(--cor-primaria); }
html.parede .lp-hero .botao-negativo { background: var(--cor-primaria); color: var(--cor-superficie); border-color: var(--cor-primaria); }

/* Tela larga (rolagem guiada): a parede sobe com a rolagem e revela a textura que continua embaixo da foto. */
html.parede.rolagem-on .lp-hero .rolagem-pino { background: var(--cor-superficie) url("../img/parede-textura.jpg") top center / 100% auto repeat-y; }
html.parede.rolagem-on .lp-hero .rolagem-pino::after { display: none; }
html.parede.rolagem-on .parede-fundo {
  display: block; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none; will-change: transform;
  height: calc(100% + var(--parede-extra, 900px));
  background-image: url("../img/parede-aluxia.jpg"), url("../img/parede-textura.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, repeat-y;
  background-position: top center, center var(--foto-h, 0px);
}
/* Sem fundo atrás do título: o texto fica direto na parede (as células se afastam dele). */
html.parede .lp-vidro { display: none !important; }
html.parede.rolagem-on .lp-etapas .rolagem-pino { background: var(--cor-superficie) url("../img/parede-textura.jpg") top center / 100% auto repeat-y; }

/* Celular / tela estreita: a foto em cima, inteira, e a parede continua por baixo dos textos. */
html.parede:not(.rolagem-on) .lp-hero .rolagem-e0 {
  background:
    url("../img/parede-aluxia.jpg") top center / 100% auto no-repeat,
    url("../img/parede-textura.jpg") center calc(100vw * 0.558) / 100% auto repeat-y,
    var(--cor-superficie);
  padding-top: calc(100vw * 0.558 + 8px);
}