/* ========================================================= */
/* -- LP RECUPERAÇÃO ESTRUTURAL -- */
/* Só o que é exclusivo desta página. Hero, formulário,       */
/* seções, cards de serviço e de técnica, comparativo,        */
/* etapas, prévia de documento, registro fotográfico, FAQ,    */
/* CTA e rodapé vêm do lp-componentes.css, carregado antes.   */
/* ========================================================= */

/* --------------------------------------------------------- */
/* -- begin:: Ciclo da corrosão -- */
/* A pergunta que todo síndico faz é "por que não dá só para  */
/* tapar com massa?". A resposta é que o problema não está no */
/* buraco, está dentro do concreto — e continua andando       */
/* embaixo do remendo. Este bloco conta essa história em      */
/* quatro tempos.                                             */
/*                                                            */
/* Desenhado só com borda e fundo, sem imagem: fica no meio   */
/* da página e não pode custar requisição nenhuma.            */
/* --------------------------------------------------------- */
.lp-ciclo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    counter-reset: ciclo;
}

.lp-fase {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    background: #fff;
    border: 1px solid rgba(var(--lp-accent-rgb), 0.16);
    border-radius: var(--lp-radius);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04),
                0 10px 26px rgba(var(--lp-deep-rgb), 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lp-fase:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--lp-accent-rgb), 0.5);
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.13);
}

/* O número é gerado por CSS: reordenar as fases no HTML não
   exige renumerar nada à mão.

   A pastilha vai enchendo de 1 a 4 — vazada, clara, sólida,
   vermelha. É o mesmo movimento que o texto descreve: o
   processo não muda de natureza, muda de intensidade. */
.lp-fase__num {
    counter-increment: ciclo;
    width: 36px;
    height: 36px;
    margin-bottom: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid rgba(var(--lp-accent-rgb), 0.45);
    color: var(--lp-accent);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
}

.lp-fase__num::before { content: counter(ciclo); }

/* Contraste sobre branco: accent #9c522e = 6,04:1;
   #8a4526 sobre a pastilha #ffe4cb = 5,71:1;
   branco sobre o accent sólido = 6,04:1. */
.lp-fase:nth-child(2) .lp-fase__num {
    background: var(--lp-soft-2);
    border-color: rgba(var(--lp-accent-rgb), 0.5);
    color: #8a4526;
}

.lp-fase:nth-child(3) .lp-fase__num {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

.lp-fase__title {
    font-size: 1.02rem;
    color: var(--lp-deep);
    margin-bottom: 8px;
}

.lp-fase__desc {
    font-size: 0.88rem;
    color: var(--lp-muted);
    margin: 0;
}

/* A última fase é onde o dano fica visível — é o ponto em que
   o síndico costuma perceber que existe um problema. */
.lp-fase--visivel {
    background: #fdf4f2;
    border-color: rgba(176, 42, 42, 0.35);
}

.lp-fase--visivel .lp-fase__num {
    background: #b02a2a;
    border-color: #b02a2a;
    color: #fff;
}

.lp-fase--visivel .lp-fase__title { color: #8f2a20; }

.lp-fase--visivel:hover { border-color: rgba(176, 42, 42, 0.6); }

@media (min-width: 768px) {
    .lp-ciclo { grid-template-columns: repeat(2, 1fr); }
}

/* Quatro colunas: as fases ganham o fio que as liga. Antes havia
   só um chevron solto no vão, que não dizia se as fases eram uma
   sequência ou quatro itens avulsos. O fio nasce na altura do
   centro da pastilha e termina na seta. */
@media (min-width: 992px) {
    .lp-ciclo { grid-template-columns: repeat(4, 1fr); gap: 30px; }

    .lp-fase:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 41px;
        right: -30px;
        width: 30px;
        height: 2px;
        background: linear-gradient(90deg,
            rgba(var(--lp-accent-rgb), 0.18),
            rgba(var(--lp-accent-rgb), 0.55));
    }

    .lp-fase:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 36px;
        right: -20px;
        width: 10px;
        height: 10px;
        border-top: 2px solid rgba(var(--lp-accent-rgb), 0.55);
        border-right: 2px solid rgba(var(--lp-accent-rgb), 0.55);
        transform: rotate(45deg);
    }
}

/* Recado abaixo do ciclo, com o peso de conclusão.
   Era navy — cor da paleta antiga, que nesta página aparecia
   como um bloco de outra LP no meio do terracota. */
.lp-ciclo__fecho {
    max-width: 780px;
    margin: 34px auto 0;
    padding: 20px 26px;
    background: var(--lp-deep);
    border-radius: var(--lp-radius);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    text-align: center;
}

.lp-ciclo__fecho strong { color: #fff; }

/* --------------------------------------------------------- */
/* -- begin:: Ajustes de celular -- */
/* --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .lp-fase { padding: 18px 16px 16px; }
    .lp-fase:hover { transform: none; }
    .lp-fase__num { width: 30px; height: 30px; font-size: 0.76rem; margin-bottom: 11px; }
    .lp-fase__title { font-size: 0.95rem; }
    .lp-fase__desc { font-size: 0.85rem; }
    .lp-ciclo__fecho { padding: 15px 17px; font-size: 0.87rem; margin-top: 22px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Hero — ajustes de leitura (29/08/2026) -- */
/* --------------------------------------------------------- */

/* O tema não declara --lp-highlight, então o <em> do título
   caía no accent terracota sobre o hero terracota. Aqui ele
   fica branco, contínuo com o resto da frase. */
.lp-page--estrutural .lp-hero__title em {
    color: #fff;
}

/* A etiqueta de alerta sumia: o âmbar do componente (#ffb020)
   sobre o terracota fica na mesma família de tom e some. Sobe
   para um amarelo aberto, com fundo e borda mais presentes. */
.lp-page--estrutural .lp-hero__tag {
    background: rgba(255, 206, 64, 0.18);
    border-color: rgba(255, 206, 64, 0.65);
    color: #ffce40;
}

.lp-page--estrutural .lp-hero__tag .ico {
    color: #ffce40;
    fill: #ffce40;
}

/* Filtro da capa aliviado: a foto estava em 22% de opacidade
   debaixo de um véu de 95%, ou seja, praticamente invisível.
   O texto vive na metade esquerda, que continua coberta. */
.lp-page--estrutural .lp-hero__bg {
    opacity: 0.58;
}

.lp-page--estrutural .lp-hero__overlay {
    background: linear-gradient(105deg,
        rgba(var(--lp-deep-rgb), 0.72) 45%,
        rgba(var(--lp-deep-rgb), 0.42) 100%);
}

/* --------------------------------------------------------- */
/* -- begin:: Sinais de alerta — redesenho (29/08/2026) -- */
/* Escopado em .lp-sinais / .lp-symptoms: o .lp-symptom        */
/* genérico continua igual na impermeabilização.              */
/*                                                            */
/* O que muda:                                                */
/*   - a seção fica branca; o pêssego sai do fundo e vai para  */
/*     dentro do card, que era branco sobre bege e não tinha   */
/*     recorte nenhum                                          */
/*   - sai a barra âmbar de 4px na esquerda: sobre pêssego ela */
/*     era o elemento mais forte do card, mais que o título    */
/*   - ícone em pastilha branca com o glifo em terracota       */
/*     fechado (#8a4526 sobre #fff = 6,58:1); o #ffb020 puro   */
/*     sobre claro dá 1,63:1 — não é ícone, é mancha           */
/*   - numeração 01–06, já que o h2 promete "seis sinais"      */
/*   - no hover o card levanta e vira branco, invertendo com   */
/*     a seção — o mesmo gesto das outras LPs sem repetir a    */
/*     sombra pesada                                           */
/* --------------------------------------------------------- */

/* Duas seções brancas em sequência (esta e a de elementos):
   o filete evita que virem um bloco só. */
.lp-page--estrutural .lp-sinais {
    background: #fff;
    border-bottom: 1px solid var(--lp-line);
}

.lp-page--estrutural .lp-symptoms { counter-reset: sinal; }

.lp-page--estrutural .lp-symptoms .lp-symptom {
    counter-increment: sinal;
    position: relative;
    overflow: hidden;
    background: var(--lp-soft);
    border: 1px solid var(--lp-soft-2);
    border-left-width: 1px;
    padding: 26px 24px 24px;
    box-shadow: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease, border-color 0.2s ease;
}

/* Filete de alerta: nasce curto e vai até a borda no hover */
.lp-page--estrutural .lp-symptoms .lp-symptom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--lp-accent), #d98b4a);
    transition: width 0.3s ease;
}

.lp-page--estrutural .lp-symptoms .lp-symptom:hover::before { width: 100%; }

/* Número do sinal: marca d'água no canto, atrás do conteúdo */
.lp-page--estrutural .lp-symptoms .lp-symptom::after {
    content: "0" counter(sinal);
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--lp-deep);
    opacity: 0.14;
    pointer-events: none;
}

.lp-page--estrutural .lp-symptoms .lp-symptom:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(var(--lp-accent-rgb), 0.28);
    box-shadow: 0 18px 36px rgba(var(--lp-deep-rgb), 0.13);
}

/* Ícone em pastilha: content-box para o padding não achatar o
   desenho. 22 + 10*2 = 42px de pastilha. */
.lp-page--estrutural .lp-symptoms .lp-symptom__icon {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 10px;
    color: #8a4526;
    fill: #8a4526;
    background: #fff;
    border-radius: var(--lp-icon-radius);
    border: 1px solid var(--lp-soft-2);
    margin-bottom: 16px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lp-page--estrutural .lp-symptoms .lp-symptom:hover .lp-symptom__icon {
    background: var(--lp-soft);
    border-color: rgba(var(--lp-accent-rgb), 0.22);
}

.lp-page--estrutural .lp-symptoms .lp-symptom__title {
    font-size: 1.05rem;
    /* espaço para o número não encostar em título de duas linhas */
    padding-right: 36px;
    margin-bottom: 10px;
}

.lp-page--estrutural .lp-symptoms .lp-symptom__desc { line-height: 1.6; }

@media (max-width: 768px) {
    .lp-page--estrutural .lp-symptoms .lp-symptom { padding: 20px 16px 18px; }
    .lp-page--estrutural .lp-symptoms .lp-symptom::after { font-size: 1.1rem; top: 14px; right: 14px; }
    .lp-page--estrutural .lp-symptoms .lp-symptom__title { padding-right: 30px; }
    .lp-page--estrutural .lp-symptoms .lp-symptom__icon {
        width: 20px; height: 20px; padding: 8px; margin-bottom: 12px;
    }
}

/* --------------------------------------------------------- */
/* -- begin:: Elementos atendidos — layout (29/08/2026) -- */
/* Escopado em .lp-elementos: o .lp-typecard genérico segue    */
/* igual nas outras LPs.                                      */
/*                                                            */
/* O que muda:                                                */
/*   - a borda saía do --lp-line, cinza-azulado herdado da    */
/*     paleta navy; sobre a página terracota destoava e ainda */
/*     era fraca demais para recortar card branco em seção    */
/*     branca. Vira borda da própria família + sombra de      */
/*     repouso                                                 */
/*   - filete separando o corpo da etiqueta: a pílula estava  */
/*     solta no branco, sem relação visível com o texto acima */
/*   - ícone maior e com glifo em terracota fechado (#8a4526  */
/*     sobre a pastilha = 6,1:1); o accent puro a 10% de      */
/*     fundo deixava o desenho apagado                        */
/*   - título e etiqueta sobem meio ponto: a hierarquia       */
/*     dentro do card estava toda no mesmo peso               */
/* --------------------------------------------------------- */
.lp-page--estrutural .lp-elementos .lp-typecard {
    border-color: rgba(var(--lp-accent-rgb), 0.16);
    padding: 28px 24px 22px;
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04),
                0 10px 26px rgba(var(--lp-deep-rgb), 0.05);
}

.lp-page--estrutural .lp-elementos .lp-typecard:hover {
    border-color: rgba(var(--lp-accent-rgb), 0.45);
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.13);
}

.lp-page--estrutural .lp-elementos .lp-typecard__icon {
    width: 50px;
    height: 50px;
    background: var(--lp-soft);
    border: 1px solid rgba(var(--lp-accent-rgb), 0.14);
    color: #8a4526;
    margin-bottom: 18px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lp-page--estrutural .lp-elementos .lp-typecard__icon .ico {
    width: 22px;
    height: 22px;
}

.lp-page--estrutural .lp-elementos .lp-typecard:hover .lp-typecard__icon {
    background: var(--lp-soft-2);
    border-color: rgba(var(--lp-accent-rgb), 0.3);
}

.lp-page--estrutural .lp-elementos .lp-typecard__title {
    font-size: 1.12rem;
    margin-bottom: 10px;
}

.lp-page--estrutural .lp-elementos .lp-typecard__desc {
    line-height: 1.62;
    margin-bottom: 20px;
}

/* A etiqueta ganha um filete acima: fecha o corpo do card e
   dá à pílula um lugar, em vez de deixá-la solta no branco.
   O padding do card já é o recuo lateral, então o filete vai
   de borda a borda via margem negativa. */
.lp-page--estrutural .lp-elementos .lp-typecard__norma {
    position: relative;
    margin-top: auto;
    padding-top: 6px;
    border-color: rgba(var(--lp-accent-rgb), 0.18);
    font-size: 0.76rem;
}

.lp-page--estrutural .lp-elementos .lp-typecard__norma::before {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    top: -14px;
    height: 1px;
    background: rgba(var(--lp-accent-rgb), 0.12);
}

@media (max-width: 768px) {
    .lp-page--estrutural .lp-elementos .lp-typecard { padding: 22px 18px 18px; }
    .lp-page--estrutural .lp-elementos .lp-typecard__icon { width: 44px; height: 44px; margin-bottom: 14px; }
    .lp-page--estrutural .lp-elementos .lp-typecard__norma::before { left: -18px; right: -18px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Comparativo — layout (29/08/2026) -- */
/* Escopado em .lp-comparativo: o .lp-versus genérico segue    */
/* azul nas outras LPs.                                       */
/*                                                            */
/* O que muda:                                                */
/*   - o lado certo estava em azul navy (#f0f7ff / #3f5a7d),  */
/*     cor de outra família, com um check verde em cima —      */
/*     duas semânticas na mesma coluna. Passa para verde       */
/*     inteiro, que é o par natural do vermelho do outro lado  */
/*     e o complementar do terracota da página                 */
/*   - o vermelho desce de saturação: #b02a2a puro sobre uma   */
/*     página terracota brigava com o acento da casa           */
/*   - divisor central: as colunas só se separavam pela troca  */
/*     de fundo, e na linha em que os dois lados têm o mesmo   */
/*     comprimento a fronteira sumia                           */
/*   - cabeçalho vira faixa sólida, com o bloco recortado por  */
/*     sombra em vez da borda cinza-azulada do componente      */
/* --------------------------------------------------------- */
.lp-page--estrutural .lp-comparativo .lp-versus {
    position: relative;
    border-color: rgba(var(--lp-deep-rgb), 0.10);
    background: linear-gradient(to right, #fdf4f2 0 50%, #f2f8f4 50% 100%);
    box-shadow: 0 2px 4px rgba(var(--lp-deep-rgb), 0.05),
                0 18px 40px rgba(var(--lp-deep-rgb), 0.09);
}

/* Divisor central, de ponta a ponta do bloco */
.lp-page--estrutural .lp-comparativo .lp-versus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(var(--lp-deep-rgb), 0.10);
    pointer-events: none;
}

.lp-page--estrutural .lp-comparativo .lp-versus__head {
    padding: 17px 24px;
    letter-spacing: -0.01em;
}

.lp-page--estrutural .lp-comparativo .lp-versus__head--bad {
    background: #f8e6e1;
    color: #9c3a28;
    border-bottom-color: #edcdc4;
}

.lp-page--estrutural .lp-comparativo .lp-versus__head--good {
    background: #e4f0e8;
    color: #1f5c3d;
    border-bottom-color: #c8e0d1;
}

.lp-page--estrutural .lp-comparativo .lp-versus__cell {
    padding: 16px 24px;
    line-height: 1.55;
}

.lp-page--estrutural .lp-comparativo .lp-versus__cell--bad {
    color: #7c4438;
    border-bottom-color: rgba(156, 58, 40, 0.10);
}

.lp-page--estrutural .lp-comparativo .lp-versus__cell--bad .ico { color: #c25943; }

.lp-page--estrutural .lp-comparativo .lp-versus__cell--good {
    color: #3a5a47;
    border-bottom-color: rgba(31, 92, 61, 0.10);
}

.lp-page--estrutural .lp-comparativo .lp-versus__cell--good .ico { color: #2f855a; }

@media (max-width: 767.98px) {
    .lp-page--estrutural .lp-comparativo .lp-versus__head { padding: 13px 13px; }
    .lp-page--estrutural .lp-comparativo .lp-versus__cell { padding: 13px; }
}

/* --------------------------------------------------------- */
/* -- begin:: --lp-highlight do tema (29/08/2026) -- */
/* Fecha a pendência anotada no lp-componentes.css: a          */
/* estrutural era a última LP sem highlight declarado, então   */
/* tudo que é acento sobre fundo escuro caía no accent sólido  */
/* (#9c522e) — terracota sobre terracota, ou seja, sumia.      */
/* Pegava o número das etapas, o eyebrow do CTA, a tag da      */
/* seção escura e o ícone dos cards de técnica.                */
/*                                                            */
/* Contraste medido (WCAG AA = 4.5:1):                         */
/*   highlight #f8d8b6 sobre --lp-deep #6b4030 .... 6,45:1     */
/*   highlight #f8d8b6 sobre --lp-deep-2 #8a5340 .. 4,57:1     */
/*   (o deep-2 é a ponta do gradiente do CTA, o pior caso)     */
/*   accent sólido sobre --lp-deep, que era o estado ... 1,71:1 */
/*                                                             */
/* O <em> do h1 não volta ao highlight: ficou branco de        */
/* propósito, no bloco do hero acima.                          */
/* --------------------------------------------------------- */
.lp-page--estrutural {
    --lp-highlight: #f8d8b6;
}

/* --------------------------------------------------------- */
/* -- begin:: Processo em 6 etapas — layout (29/08/2026) -- */
/* Escopado em .lp-processo.                                   */
/*                                                             */
/* O que muda:                                                 */
/*   - o card era branco a 5% com borda a 12% sobre terracota: */
/*     não chegava a existir como card, e as seis caixas       */
/*     boiavam sem grade visível                                */
/*   - o número herda o highlight novo e passa a ser o que se  */
/*     lê primeiro, que é o ponto de uma seção de sequência    */
/*   - filete acima do título separando número de conteúdo:    */
/*     antes o "01" colava no "Inspeção e mapeamento" e os     */
/*     dois disputavam a mesma linha de leitura                */
/* --------------------------------------------------------- */
.lp-page--estrutural .lp-processo .lp-step {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(248, 216, 182, 0.20);
    padding: 24px 24px 26px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lp-page--estrutural .lp-processo .lp-step:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(248, 216, 182, 0.42);
    transform: translateY(-4px);
}

/* Filete de progresso no topo, que completa no hover */
.lp-page--estrutural .lp-processo .lp-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 3px;
    background: linear-gradient(90deg, var(--lp-highlight), rgba(248, 216, 182, 0.25));
    transition: width 0.3s ease;
}

.lp-page--estrutural .lp-processo .lp-step:hover::before { width: 100%; }

.lp-page--estrutural .lp-processo .lp-step__num {
    font-size: 2.35rem;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(248, 216, 182, 0.18);
}

.lp-page--estrutural .lp-processo .lp-step__title {
    font-size: 1.06rem;
    margin-bottom: 9px;
}

.lp-page--estrutural .lp-processo .lp-step__desc {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .lp-page--estrutural .lp-processo .lp-step { padding: 20px 18px 22px; }
    .lp-page--estrutural .lp-processo .lp-step__num { font-size: 2rem; margin-bottom: 13px; padding-bottom: 11px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Técnicas de reforço — layout (29/08/2026) -- */
/* Escopado em .lp-tecnicas: o .lp-sistema genérico segue com  */
/* a faixa escura na impermeabilização.                       */
/*                                                            */
/* O que muda:                                                */
/*   - a seção fica branca                                    */
/*   - a faixa de topo era --lp-deep sólido: quatro barras     */
/*     terracota cheias, que sobre o pêssego já pesavam e      */
/*     sobre branco viravam o assunto da seção. Vira faixa     */
/*     clara com o ícone em pastilha, o mesmo vocabulário dos  */
/*     cards de sinais e de elementos                          */
/*   - divisor do "costuma resolver" sai do tracejado cinza-   */
/*     azulado do --lp-line para um fio sólido da família       */
/*   - as etiquetas ficam brancas: em pêssego elas repetiam a  */
/*     cor da faixa e o card virava um degradê de bege só      */
/* --------------------------------------------------------- */

/* A seção seguinte também é branca — o filete evita a emenda. */
.lp-page--estrutural .lp-tecnicas {
    background: #fff;
    border-bottom: 1px solid var(--lp-line);
}

.lp-page--estrutural .lp-tecnicas .lp-sistema {
    border-color: rgba(var(--lp-accent-rgb), 0.16);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04),
                0 10px 26px rgba(var(--lp-deep-rgb), 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lp-page--estrutural .lp-tecnicas .lp-sistema:hover {
    border-color: rgba(var(--lp-accent-rgb), 0.45);
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.13);
}

.lp-page--estrutural .lp-tecnicas .lp-sistema__topo {
    gap: 13px;
    padding: 16px 20px;
    background: var(--lp-soft);
    border-bottom: 1px solid rgba(var(--lp-accent-rgb), 0.14);
}

/* Ícone em pastilha branca: content-box para o padding não
   achatar o desenho. 18 + 9*2 = 36px de pastilha.
   Glifo #8a4526 sobre #fff = 6,58:1. */
.lp-page--estrutural .lp-tecnicas .lp-sistema__topo .ico {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 9px;
    color: #8a4526;
    background: #fff;
    border: 1px solid rgba(var(--lp-accent-rgb), 0.14);
    border-radius: var(--lp-icon-radius);
}

.lp-page--estrutural .lp-tecnicas .lp-sistema__nome {
    color: var(--lp-deep);
    font-size: 1.02rem;
}

.lp-page--estrutural .lp-tecnicas .lp-sistema__corpo { padding: 22px 20px 20px; }

.lp-page--estrutural .lp-tecnicas .lp-sistema__desc {
    line-height: 1.62;
    margin-bottom: 18px;
}

.lp-page--estrutural .lp-tecnicas .lp-sistema__uso {
    padding-top: 16px;
    border-top: 1px solid rgba(var(--lp-accent-rgb), 0.14);
}

.lp-page--estrutural .lp-tecnicas .lp-sistema__uso-titulo {
    color: #8a4526;
    margin-bottom: 11px;
}

.lp-page--estrutural .lp-tecnicas .lp-sistema__tag {
    background: #fff;
    border-color: rgba(var(--lp-accent-rgb), 0.22);
    color: var(--lp-deep);
    padding: 5px 12px;
}

@media (max-width: 575.98px) {
    .lp-page--estrutural .lp-tecnicas .lp-sistema__topo { padding: 13px 15px; gap: 11px; }
    .lp-page--estrutural .lp-tecnicas .lp-sistema__topo .ico { padding: 7px; }
    .lp-page--estrutural .lp-tecnicas .lp-sistema__corpo { padding: 17px 15px 15px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Registro fotográfico — layout (29/08/2026) -- */
/* Escopado em .lp-registro.                                   */
/*                                                             */
/* O que muda:                                                 */
/*   - o card era branco a 5% sobre o terracota da seção: dava */
/*     praticamente a mesma cor do fundo, então a legenda      */
/*     parecia solta na seção e só a foto existia. Agora o     */
/*     card escurece em vez de clarear — recorta contra o      */
/*     fundo e a foto ganha o brilho da comparação             */
/*   - fio entre foto e legenda, que estavam encostadas        */
/*   - zoom lento na foto no hover: é galeria, e o card já     */
/*     levantava sem que a imagem respondesse a nada           */
/*   - a etiqueta ganha contorno; sobre a pastilha de accent   */
/*     a 18% ela dependia só da cor do texto                   */
/* --------------------------------------------------------- */
.lp-page--estrutural .lp-registro .lp-shot {
    background: rgba(0, 0, 0, 0.16);
    border-color: rgba(248, 216, 182, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.lp-page--estrutural .lp-registro .lp-shot:hover {
    border-color: rgba(248, 216, 182, 0.45);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.24);
}

/* O wrapper precisa recortar o zoom; o <picture> é inline por
   padrão e não segura overflow. */
.lp-page--estrutural .lp-registro .lp-shot picture {
    display: block;
    overflow: hidden;
}

.lp-page--estrutural .lp-registro .lp-shot__img {
    transition: transform 0.45s ease;
}

.lp-page--estrutural .lp-registro .lp-shot:hover .lp-shot__img {
    transform: scale(1.05);
}

.lp-page--estrutural .lp-registro .lp-shot__body {
    padding: 17px 18px 19px;
    border-top: 1px solid rgba(248, 216, 182, 0.16);
}

.lp-page--estrutural .lp-registro .lp-shot__tag {
    margin-bottom: 10px;
    border: 1px solid rgba(248, 216, 182, 0.3);
    background: rgba(var(--lp-accent-rgb), 0.28);
}

.lp-page--estrutural .lp-registro .lp-shot__desc {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.58;
}

/* Quem prefere menos movimento não leva o zoom */
@media (prefers-reduced-motion: reduce) {
    .lp-page--estrutural .lp-registro .lp-shot:hover .lp-shot__img { transform: none; }
}

/* --------------------------------------------------------- */
/* -- begin:: Garantias — layout (29/08/2026) -- */
/* Escopado em .lp-garantias.                                  */
/*                                                             */
/* O que muda:                                                 */
/*   - o card saía do --lp-bg (#f5f7fa) com borda --lp-line:   */
/*     dois cinzas azulados, herdados da paleta navy, em cima  */
/*     do pêssego da seção. Era o único ponto frio da tela.    */
/*     Passa a branco com borda da família                     */
/*   - filete de acento na esquerda, que abre no hover: o      */
/*     card só deslizava 3px e nada mais respondia             */
/*   - o ícone tinha border-radius: 11px fixo, ignorando o     */
/*     --lp-icon-radius do tema — cantos redondos numa página  */
/*     que é toda de canto seco                                */
/* --------------------------------------------------------- */
.lp-page--estrutural .lp-garantias .lp-guarantee {
    position: relative;
    overflow: hidden;
    gap: 15px;
    padding: 19px 20px;
    margin-bottom: 14px;
    background: #fff;
    border-color: rgba(var(--lp-accent-rgb), 0.16);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04),
                0 8px 20px rgba(var(--lp-deep-rgb), 0.05);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-page--estrutural .lp-garantias .lp-guarantee::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lp-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}

.lp-page--estrutural .lp-garantias .lp-guarantee:hover {
    border-color: rgba(var(--lp-accent-rgb), 0.4);
    box-shadow: 0 14px 30px rgba(var(--lp-deep-rgb), 0.11);
}

.lp-page--estrutural .lp-garantias .lp-guarantee:hover::before { transform: scaleY(1); }

.lp-page--estrutural .lp-garantias .lp-guarantee__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--lp-icon-radius);
    background: var(--lp-soft);
    border-color: rgba(var(--lp-accent-rgb), 0.14);
    color: #8a4526;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lp-page--estrutural .lp-garantias .lp-guarantee:hover .lp-guarantee__icon {
    background: var(--lp-soft-2);
    border-color: rgba(var(--lp-accent-rgb), 0.3);
}

.lp-page--estrutural .lp-garantias .lp-guarantee__title {
    font-size: 1rem;
    margin-bottom: 6px;
}

.lp-page--estrutural .lp-garantias .lp-guarantee__desc { line-height: 1.58; }

@media (max-width: 575.98px) {
    .lp-page--estrutural .lp-garantias .lp-guarantee { padding: 16px; gap: 13px; }
    .lp-page--estrutural .lp-garantias .lp-guarantee__icon { width: 40px; height: 40px; }
}

/* --------------------------------------------------------- */
/* -- begin:: FAQ — layout (29/08/2026) -- */
/* Escopado em .lp-duvidas.                                    */
/*                                                             */
/* O que muda:                                                 */
/*   - o item aberto era idêntico ao fechado, tirando o texto  */
/*     que aparecia embaixo. Agora ganha fundo pêssego, borda  */
/*     de acento e um fio separando pergunta de resposta       */
/*   - respostas de dois parágrafos vinham coladas: o          */
/*     componente zera a margem de todo <p> para não sobrar    */
/*     espaço no fim do bloco. Aqui só o último perde a margem */
/*   - o chevron era um glifo solto na ponta da linha; vira    */
/*     pastilha, que é área de clique visível e gira inteira   */
/*   - borda cinza-azulada do --lp-line trocada pela da        */
/*     família, como no resto da página                        */
/* --------------------------------------------------------- */
.lp-page--estrutural .lp-duvidas .lp-faq {
    margin-bottom: 10px;
    border-color: rgba(var(--lp-accent-rgb), 0.16);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.lp-page--estrutural .lp-duvidas .lp-faq:hover {
    border-color: rgba(var(--lp-accent-rgb), 0.35);
}

.lp-page--estrutural .lp-duvidas .lp-faq[open] {
    background: var(--lp-soft);
    border-color: rgba(var(--lp-accent-rgb), 0.32);
    box-shadow: 0 10px 26px rgba(var(--lp-deep-rgb), 0.07);
}

.lp-page--estrutural .lp-duvidas .lp-faq__q {
    padding: 19px 20px 19px 24px;
    line-height: 1.4;
}

/* Pastilha do chevron: área de clique visível, e gira inteira */
.lp-page--estrutural .lp-duvidas .lp-faq__q .ico {
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 8px;
    color: #8a4526;
    background: var(--lp-soft);
    border: 1px solid rgba(var(--lp-accent-rgb), 0.18);
    border-radius: var(--lp-icon-radius);
    transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.lp-page--estrutural .lp-duvidas .lp-faq[open] .lp-faq__q .ico {
    background: #fff;
    border-color: rgba(var(--lp-accent-rgb), 0.34);
}

.lp-page--estrutural .lp-duvidas .lp-faq__a {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(var(--lp-accent-rgb), 0.16);
    line-height: 1.66;
}

/* Só o último parágrafo fica sem margem — o componente zera
   todos e cola as respostas de dois parágrafos. */
.lp-page--estrutural .lp-duvidas .lp-faq__a p { margin: 0 0 12px; }
.lp-page--estrutural .lp-duvidas .lp-faq__a p:last-child { margin-bottom: 0; }

.lp-page--estrutural .lp-duvidas .lp-faq__a strong { color: var(--lp-deep); }

@media (max-width: 575.98px) {
    .lp-page--estrutural .lp-duvidas .lp-faq__q { padding: 16px 14px 16px 17px; gap: 12px; }
    .lp-page--estrutural .lp-duvidas .lp-faq__q .ico { padding: 6px; }
    .lp-page--estrutural .lp-duvidas .lp-faq__a { padding: 14px 17px 17px; }
}