/* ========================================================= */
/* -- LP MANUTENÇÃO PREDIAL -- */
/* Só o que é exclusivo desta página. Todo o resto vem do     */
/* lp-base.css e do lp-componentes.css, carregados antes.     */
/* ========================================================= */

/* --------------------------------------------------------- */
/* -- begin:: Calendário de periodicidade -- */
/* O produto desta LP não é uma obra, é um plano — então o    */
/* entregável precisa ser visível. Quatro faixas de           */
/* frequência, cada uma com o que se verifica naquele ciclo.  */
/*                                                            */
/* Sem imagem: é bloco de meio de página e não pode custar    */
/* requisição.                                                */
/* --------------------------------------------------------- */
.lp-plano {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.lp-ciclo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-top: 5px solid var(--lp-accent);
    border-radius: var(--lp-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.05),
                0 10px 24px rgba(var(--lp-deep-rgb), 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-ciclo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.14);
}

/* Escala de intensidade dentro da família da página (29/08/2026).
   Antes era um semáforo — vermelho, âmbar, azul, verde — quatro
   cores de fora da paleta no meio de uma página inteira sálvia, e o
   azul era o --lp-navy-2. Além de destoar, o vermelho lia como
   "problema" quando o assunto é o que se verifica com mais
   frequência. Agora é o mesmo verde clareando conforme o intervalo
   aumenta: mais escuro = mais vezes por ano.

   O tom do anual é o piso da escala: mais claro que #589274 a faixa
   cai abaixo de 3:1 contra o branco da seção e some. */
.lp-ciclo-card--mensal     { border-top-color: #14532d; }
.lp-ciclo-card--trimestral { border-top-color: #2a6b46; }
.lp-ciclo-card--semestral  { border-top-color: #44855f; }
.lp-ciclo-card--anual      { border-top-color: #589274; }

/* O head é um <button> desde 29/08/2026 — no celular ele abre e
   fecha o card. Reset primeiro, porque button traz fundo, borda,
   fonte e centralização próprios. */
.lp-ciclo-card__head {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 18px 20px 16px;
    background: var(--lp-soft);
    border: none;
    border-bottom: 1px solid var(--lp-line);
    /* no desktop as quatro listas ficam abertas: nada a clicar */
    cursor: default;
}

.lp-ciclo-card__resumo { display: block; }

/* A seta só existe no modo sanfona */
.lp-ciclo-card__seta { display: none; }

/* Medidor de frequência: quatro barras, uma acesa por ciclo do ano.
   O rótulo ao lado já diz a mesma coisa por escrito, então o span é
   aria-hidden e isto aqui é só o atalho visual — quem bate o olho na
   grade lê a escala antes de ler os quatro títulos. */
.lp-ciclo-card__medidor {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 3px;
}

.lp-ciclo-card__medidor i {
    width: 5px;
    height: 14px;
    border-radius: 2px;
    background: rgba(var(--lp-accent-rgb), 0.16);
}

.lp-ciclo-card--mensal     .lp-ciclo-card__medidor i.is-on { background: #14532d; }
.lp-ciclo-card--trimestral .lp-ciclo-card__medidor i.is-on { background: #2a6b46; }
.lp-ciclo-card--semestral  .lp-ciclo-card__medidor i.is-on { background: #44855f; }
.lp-ciclo-card--anual      .lp-ciclo-card__medidor i.is-on { background: #589274; }

.lp-ciclo-card__freq {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* espaço do medidor, que é absoluto no canto */
    padding-right: 40px;
    margin-bottom: 6px;
}

/* O rótulo não acompanha a escala: os dois tons mais claros dela não
   passam contraste como texto (#7bb495 sobre branco dá 2,4:1). A
   graduação fica por conta da faixa e do medidor, que são elementos
   gráficos; o texto fica sempre no accent, em 6,31:1. */
.lp-ciclo-card__freq { color: var(--lp-accent); }

.lp-ciclo-card__resumo {
    margin: 0;
    font-size: 0.86rem;
    color: var(--lp-muted);
    line-height: 1.5;
}

.lp-ciclo-card__lista {
    list-style: none;
    margin: 0;
    padding: 16px 20px 20px;
}

.lp-ciclo-card__lista li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 0.87rem;
    color: var(--lp-ink);
    line-height: 1.5;
}

.lp-ciclo-card__lista li:last-child { margin-bottom: 0; }

/* Traço em vez de bolinha: a lista é de itens verificados, e o traço
   alinha melhor com a primeira linha de um item de duas linhas. */
.lp-ciclo-card__lista li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: var(--lp-accent);
    opacity: 0.75;
}

/* Aviso de que a periodicidade é ponto de partida, não regra fixa */
.lp-plano__nota {
    max-width: 780px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--lp-muted);
}

.lp-plano__nota strong { color: var(--lp-deep); }

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

@media (min-width: 1200px) {
    .lp-plano { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------- */
/* -- begin:: Ajustes de celular -- */
/* --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .lp-plano { gap: 13px; }
    .lp-ciclo-card:hover { transform: none; }
    .lp-ciclo-card__head { padding: 15px 16px 13px; }
    .lp-ciclo-card__medidor { top: 16px; right: 16px; gap: 2px; }
    .lp-ciclo-card__medidor i { width: 4px; height: 12px; }
    .lp-ciclo-card__freq { padding-right: 34px; }
    .lp-ciclo-card__lista { padding: 13px 16px 16px; }
    .lp-ciclo-card__lista li { font-size: 0.84rem; margin-bottom: 8px; }
    .lp-plano__nota { font-size: 0.85rem; margin-top: 20px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Hero -- */
/* Capa própria desde 29/08/2026 (lp-hero-manutencao). O véu   */
/* genérico (foto a 0.22, 0.95 → 0.72) apagava a foto inteira. */
/* Aqui a foto sobe para 0.50 e o véu alivia.                  */
/*                                                             */
/* O gradiente continua assimétrico de propósito: o assunto da */
/* foto — o técnico — está à DIREITA, atrás do formulário, e a */
/* esquerda é céu claro. Aliviar dos dois lados por igual        */
/* apagaria o texto branco.                                     */
/*                                                             */
/* Medido sobre os pixels reais da foto, na coluna do texto:   */
/*   branco #fff ..................... 7,38:1                  */
/*   lead (branco a 88%) ............. 6,17:1                  */
/*   etiqueta âmbar #ffb020 .......... 5,14:1                  */
/*   <em> do h1 #ffb020 .............. 4,06:1                  */
/* O ponto mais claro da foto sob o véu fica em #435b4b.       */
/* --------------------------------------------------------- */
.lp-page--manutencao .lp-hero__bg { opacity: 0.58; }

.lp-page--manutencao .lp-hero__overlay {
    background: linear-gradient(105deg,
                rgba(var(--lp-deep-rgb), 0.76) 40%,
                rgba(var(--lp-deep-rgb), 0.48) 100%);
}

/* <em> do h1 no mesmo âmbar da etiqueta logo acima (29/08/2026).
   Passou por verde escuro e por azul antes de parar aqui; o âmbar
   é a única cor que já estava no hero, então a promessa do h1 e o
   aviso de cima viram um par em vez de duas cores soltas.
   Mede 4,06:1 sobre o ponto mais claro do véu — o h1 conta como
   texto grande (mínimo 3:1). */
.lp-page--manutencao .lp-hero__title em { color: var(--lp-amber); }

/* A etiqueta âmbar já estava no fio (4,60:1) com o véu antigo e
   não sobreviveria ao alívio. Ganha fundo próprio escuro no lugar
   do âmbar translúcido do componente: sai de 4,60 para 5,49:1 e
   deixa de depender do que passa por trás. */
.lp-page--manutencao .lp-hero__tag {
    background: rgba(var(--lp-deep-rgb), 0.55);
}

/* --------------------------------------------------------- */
/* -- begin:: Sinais — redesenho (29/08/2026) -- */
/* Escopado em .lp-symptoms: o .lp-symptom genérico é o mesmo  */
/* componente da impermeabilização e da estrutural, que        */
/* seguem com a barra âmbar na esquerda.                      */
/*                                                            */
/* O que muda:                                                */
/*   - sai a barra âmbar de 4px, que gritava mais que o        */
/*     título e brigava com o verde da página                  */
/*   - o alerta vira pastilha âmbar clara atrás do ícone, com  */
/*     o glifo em âmbar fechado (#8f5804) — sobre a pastilha   */
/*     dá 5,26:1 (4,82:1 no hover), contra 1,63:1 do #ffb020   */
/*     puro, que sobre fundo claro não é ícone, é mancha       */
/*   - filete no topo que cresce até a borda no hover, o       */
/*     mesmo gesto das outras LPs                              */
/*   - numeração 01–06: o h2 promete "seis sinais" e a         */
/*     contagem estava só no texto                             */
/*   - sombra em repouso, senão o card branco boia no sálvia   */
/* --------------------------------------------------------- */
.lp-symptoms { counter-reset: sinal; }

.lp-symptoms .lp-symptom {
    counter-increment: sinal;
    position: relative;
    overflow: hidden;
    /* desfaz a borda-esquerda âmbar do componente genérico */
    border: 1px solid var(--lp-line);
    padding: 28px 24px 24px;
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.05),
                0 10px 24px rgba(var(--lp-deep-rgb), 0.06);
}

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

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

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

.lp-symptoms .lp-symptom:hover {
    border-color: rgba(217, 154, 18, 0.35);
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.14);
}

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

.lp-symptoms .lp-symptom:hover .lp-symptom__icon { background: #fbe6bf; }

.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: 34px;
    margin-bottom: 10px;
}

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

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

/* --------------------------------------------------------- */
/* -- begin:: Frentes — redesenho (29/08/2026) -- */
/* Escopado em .lp-typecards: o .lp-typecard genérico é o      */
/* mesmo componente das outras três LPs.                      */
/*                                                            */
/* O card genérico empilha ícone, título, texto e etiqueta em  */
/* seis blocos idênticos — não há hierarquia, e seis deles em  */
/* sequência viram parede. Aqui o card vira ficha de sistema,  */
/* que é literalmente o que a página vende (o inventário):     */
/*   - cabeçalho sálvia com ícone e título na MESMA linha,     */
/*     separado do corpo por uma borda: dá o topo da ficha e   */
/*     encurta o card                                          */
/*   - ícone em pastilha branca sobre o sálvia, em vez de      */
/*     pastilha pálida sobre branco                            */
/*   - a etiqueta de ritmo ganha o acento em vez do cinza:     */
/*     é a informação que diferencia um card do outro          */
/*   - sombra em repouso, senão a borda de 1px é tudo o que    */
/*     segura o card                                           */
/* --------------------------------------------------------- */
.lp-typecards .lp-typecard {
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.05),
                0 10px 24px rgba(var(--lp-deep-rgb), 0.06);
}

.lp-typecards .lp-typecard:hover {
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.14);
}

/* Cabeçalho: ícone e título lado a lado */
.lp-typecards .lp-typecard__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--lp-soft);
    border-bottom: 1px solid var(--lp-line);
    transition: background 0.2s ease;
}

.lp-typecards .lp-typecard:hover .lp-typecard__head { background: var(--lp-soft-2); }

/* Pastilha branca: sobre o sálvia ela recorta, a translúcida sumia */
.lp-typecards .lp-typecard__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-bottom: 0;
    background: #fff;
    color: var(--lp-accent);
    box-shadow: 0 2px 6px rgba(var(--lp-deep-rgb), 0.10);
}

.lp-typecards .lp-typecard__title { margin-bottom: 0; }

.lp-typecards .lp-typecard__desc {
    padding: 20px 22px 0;
    margin-bottom: 18px;
    line-height: 1.6;
}

/* Etiqueta de ritmo: sai do cinza e entra no acento da página */
.lp-typecards .lp-typecard__norma {
    margin: 0 22px 20px;
    background: rgba(var(--lp-accent-rgb), 0.09);
    border-color: rgba(var(--lp-accent-rgb), 0.22);
    color: var(--lp-accent);
    padding: 7px 14px;
}

.lp-typecards .lp-typecard__norma .ico { color: var(--lp-accent); }

@media (max-width: 768px) {
    .lp-typecards .lp-typecard__head { padding: 14px 16px; gap: 11px; }
    .lp-typecards .lp-typecard__icon { width: 36px; height: 36px; }
    .lp-typecards .lp-typecard__icon .ico { width: 17px; height: 17px; }
    .lp-typecards .lp-typecard__title { font-size: 0.96rem; }
    .lp-typecards .lp-typecard__desc { padding: 16px 16px 0; margin-bottom: 14px; }
    .lp-typecards .lp-typecard__norma { margin: 0 16px 16px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Implantação — redesenho (29/08/2026) -- */
/* Escopado em .lp-steps: o .lp-step genérico é o mesmo        */
/* componente das outras três LPs.                            */
/*                                                            */
/* O h2 promete uma sequência ("do primeiro levantamento à     */
/* rotina rodando"), mas eram seis caixas idênticas — nada     */
/* levava de uma para a outra. O que muda:                     */
/*   - o número ganha um trilho que sai dele e atravessa o     */
/*     card: alinhados na grade, os seis viram uma linha de    */
/*     tempo em vez de seis caixas                             */
/*   - o card sai do 5% de branco, que quase não descolava do  */
/*     fundo da seção, e ganha reação no hover                 */
/*   - a etapa 06 fecha o ciclo (o plano é revisto), então é   */
/*     a única sem trilho seguindo adiante                     */
/*                                                            */
/* Contraste sobre o card (#314b3b):                          */
/*   número #b3e0c2 ......... 6,48:1  (era 1,26:1)            */
/*   título #fff ............ 9,48:1                          */
/*   texto branco a 84% ..... 7,27:1                          */
/* --------------------------------------------------------- */
.lp-steps .lp-step {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 24px 22px 26px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lp-steps .lp-step:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(179, 224, 194, 0.35);
    transform: translateY(-4px);
}

/* Número + trilho na mesma linha */
.lp-steps .lp-step__num {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2.1rem;
    margin-bottom: 16px;
}

.lp-steps .lp-step__num::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
                rgba(179, 224, 194, 0.45),
                rgba(179, 224, 194, 0));
    transition: background 0.3s ease;
}

.lp-steps .lp-step:hover .lp-step__num::after {
    background: linear-gradient(90deg,
                rgba(179, 224, 194, 0.85),
                rgba(179, 224, 194, 0.12));
}

/* A última etapa fecha o ciclo: sem trilho seguindo adiante */
.lp-steps > div:last-child .lp-step__num::after {
    background: rgba(179, 224, 194, 0.18);
    max-width: 26px;
    flex: 0 0 26px;
}

.lp-steps > div:last-child .lp-step:hover .lp-step__num::after {
    background: rgba(179, 224, 194, 0.5);
}

.lp-steps .lp-step__title { font-size: 1.05rem; margin-bottom: 9px; }
.lp-steps .lp-step__desc { line-height: 1.6; }

@media (max-width: 768px) {
    .lp-steps .lp-step { padding: 20px 18px 22px; }
    .lp-steps .lp-step__num { font-size: 1.8rem; gap: 11px; margin-bottom: 12px; }
    .lp-steps .lp-step__title { font-size: 0.98rem; }
}

/* --------------------------------------------------------- */
/* -- begin:: Acervo — redesenho (29/08/2026) -- */
/* Escopado em .lp-docrow: o .lp-doc genérico é o mesmo        */
/* componente das outras três LPs.                            */
/*                                                            */
/* O que muda:                                                */
/*   - o check sai da ponta direita e vem para junto do texto. */
/*     Solto lá no fim, oito checks idênticos alinhados numa   */
/*     coluna liam como tabela com uma coluna só, e o olho     */
/*     tinha que atravessar o card para confirmar cada item    */
/*   - o check ganha pastilha, que é o que o transforma em     */
/*     marcador de lista em vez de ícone avulso                */
/*   - as divisórias tracejadas viram linha contínua bem       */
/*     clara: oito tracejados em sequência viravam textura     */
/*   - o rodapé do CREA é o selo de credibilidade da seção e   */
/*     estava do tamanho de uma nota de rodapé                 */
/*                                                            */
/* row-reverse em vez de mexer no HTML: o svg é o último no    */
/* DOM e é aria-hidden, então inverter só a ordem visual não   */
/* altera a leitura por leitor de tela.                       */
/* --------------------------------------------------------- */
.lp-docrow .lp-doc__body { padding: 6px 22px; }

.lp-docrow .lp-doc__row {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 13px;
    padding: 13px 0;
    color: var(--lp-ink);
    border-bottom: 1px solid var(--lp-line);
}

/* Pastilha do check: 13 + 6*2 = 25px */
.lp-docrow .lp-doc__ok {
    box-sizing: content-box;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(var(--lp-accent-rgb), 0.12);
    color: var(--lp-accent);
}

.lp-docrow .lp-doc__foot {
    padding: 16px 22px;
    font-size: 0.86rem;
    background: var(--lp-soft);
}

.lp-docrow .lp-doc__foot strong {
    display: inline-block;
    letter-spacing: 0.03em;
}

/* A foto ao lado precisa do mesmo peso do card, senão a linha
   fica desequilibrada — o documento tem sombra e ela não tinha. */
.lp-docrow .lp-figure img {
    border-radius: var(--lp-radius);
    box-shadow: 0 18px 44px rgba(var(--lp-deep-rgb), 0.14);
}

/* --------------------------------------------------------- */
/* -- Acervo no celular -- */
/* Oito itens empilhados são a lista mais longa da página, e   */
/* metade deles quebra em duas linhas na largura de um celular. */
/* Os ajustes atacam isso:                                     */
/*   - o check alinha pelo TOPO, não pelo centro: num item de  */
/*     duas linhas ele ficava no meio do vão, sem apontar para */
/*     nada                                                    */
/*   - o texto ganha o espaço que o padding lateral tomava     */
/*   - a barra do topo encolhe: era altura de desktop num      */
/*     cabeçalho que só tem uma linha                          */
/* --------------------------------------------------------- */
@media (max-width: 768px) {
    .lp-docrow .lp-doc__bar {
        padding: 13px 16px;
        font-size: 0.86rem;
        gap: 8px;
    }

    .lp-docrow .lp-doc__bar .ico { width: 15px; height: 15px; flex-shrink: 0; }

    .lp-docrow .lp-doc__body { padding: 2px 16px; }

    .lp-docrow .lp-doc__row {
        align-items: flex-start;
        padding: 11px 0;
        font-size: 0.88rem;
        line-height: 1.45;
        gap: 10px;
    }

    /* 2px de ajuste ótico: centra a pastilha na primeira linha */
    .lp-docrow .lp-doc__ok {
        width: 11px;
        height: 11px;
        padding: 5px;
        margin-top: 2px;
    }

    .lp-docrow .lp-doc__foot {
        padding: 13px 16px;
        font-size: 0.8rem;
        line-height: 1.5;
    }

    /* Retrato de 760x1013 ocupando a tela inteira empurra a seção
       seguinte para longe. Limita a altura e corta pelo centro. */
    .lp-docrow .lp-figure { margin-top: 4px; }

    .lp-docrow .lp-figure img {
        max-height: 340px;
        object-fit: cover;
        object-position: center;
    }

    .lp-docrow .lp-figure figcaption { font-size: 0.8rem; line-height: 1.5; }
}

/* --------------------------------------------------------- */
/* -- begin:: Calendário em sanfona no celular (29/08/2026) -- */
/* Empilhados, os quatro cards com a lista aberta somam uma    */
/* rolagem longa de itens soltos, e o síndico perde a noção de */
/* que são quatro ciclos. Fechados, a comparação entre eles    */
/* cabe numa tela e a lista abre quando interessa.             */
/*                                                            */
/* Só abaixo de 992px. Acima disso os quatro ficam lado a lado */
/* e continuam abertos — quem monta o modo sanfona é o JS, que */
/* também põe e tira o aria-expanded conforme a largura, para  */
/* o atributo não mentir no desktop.                           */
/*                                                            */
/* O colapso é grid-template-rows 1fr → 0fr, que anima altura  */
/* automática sem medir nada no JS. Exige o wrapper __corpo:   */
/* com os <li> soltos no grid, cada um vira uma linha e só a   */
/* primeira colapsaria.                                        */
/* --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .lp-ciclo-card__head {
        cursor: pointer;
        /* espaço da seta, à direita do resumo */
        padding-right: 52px;
        transition: background 0.2s ease;
    }

    .lp-ciclo-card__head:hover { background: var(--lp-soft-2); }

    .lp-ciclo-card__head:focus-visible {
        outline: 2px solid var(--lp-accent);
        outline-offset: -2px;
    }

    .lp-ciclo-card__seta {
        display: block;
        position: absolute;
        right: 20px;
        bottom: 18px;
        width: 14px;
        height: 14px;
        color: var(--lp-accent);
        transition: transform 0.25s ease;
    }

    /* Fechado: some a borda entre head e lista, senão sobra um
       filete solto na base do card. */
    .lp-ciclo-card__head[aria-expanded="false"] { border-bottom-color: transparent; }
    .lp-ciclo-card__head[aria-expanded="false"] .lp-ciclo-card__seta { transform: rotate(-90deg); }

    .lp-ciclo-card__corpo {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.28s ease;
    }

    .lp-ciclo-card__corpo.is-fechado { grid-template-rows: 0fr; }

    /* min-height: 0 é o que deixa o filho encolher abaixo do
       conteúdo; sem ele o 0fr não fecha nada. */
    .lp-ciclo-card__lista {
        min-height: 0;
        overflow: hidden;
        transition: padding-top 0.28s ease, padding-bottom 0.28s ease;
    }

    .lp-ciclo-card__corpo.is-fechado .lp-ciclo-card__lista {
        padding-top: 0;
        padding-bottom: 0;
    }
}