/* ==========================================================================
   Boxti — Metáfora de reforma/modernização (modernizacao-sistemas-legados)
   Slider "antes ↔ depois": o MESMO prédio, lado velho (rachado/escuro) à
   esquerda e moderno (limpo/seguro) à direita, com divisor arrastável.
   O texto comparativo vive DENTRO da caixa (base de cada lado) e é revelado
   junto com o respectivo lado pelo divisor.
   ========================================================================== */

.reforma {
    --reforma-pos: 50%;
    margin-top: var(--space-7);
}

/* Moldura — menor e centralizada */
.reforma__frame {
    position: relative;
    max-width: 780px;
    margin-inline: auto;
    aspect-ratio: 640 / 420;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-card-border);
    cursor: ew-resize;
    touch-action: none;        /* arrastar na horizontal sem rolar a página */
    user-select: none;
    -webkit-user-select: none;
}

/* Cada lado agrupa o prédio + o texto daquele estado (recortado pelo divisor,
   então as legendas acompanham a transição do slider) */
.reforma__side {
    position: absolute;
    inset: 0;
}
.reforma__side--after { z-index: 1; }
.reforma__side--before {
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--reforma-pos)) 0 0);
}

.reforma__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Legendas dentro do slider (desktop): scrim de largura inteira recortado
   pelo divisor — a borda do fundo acompanha o slider. */
.reforma__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(0.8rem, 0.6rem + 0.7vw, 1.2rem);
    padding-top: 2.75rem;
    pointer-events: none;
}

.reforma__caption--before {
    background: linear-gradient(to top, rgba(26, 11, 12, 0.95) 38%, rgba(26, 11, 12, 0));
}

.reforma__caption--after {
    text-align: right;
    background: linear-gradient(to top, rgba(8, 21, 31, 0.95) 38%, rgba(8, 21, 31, 0));
}

.reforma__caption--after .reforma__caption-title,
.reforma__caption--after .reforma__caption-list li {
    flex-direction: row-reverse;
}

/* Legenda empilhada — só aparece no mobile (ver media query) */
.reforma__legend { display: none; }

.reforma__caption-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: clamp(0.8rem, 0.7rem + 0.4vw, 0.95rem);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    margin: 0 0 var(--space-3);
}

.reforma__caption-mark {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
}

.reforma__caption-mark--bad { background-color: rgba(229, 72, 77, 0.2); color: #e5646a; }
.reforma__caption-mark--good { background-color: rgba(139, 197, 63, 0.22); color: var(--color-lime); }

.reforma__caption-list { display: grid; gap: 6px; }

.reforma__caption-list li {
    display: flex;
    gap: 8px;
    font-size: clamp(0.72rem, 0.62rem + 0.35vw, 0.85rem);
    line-height: 1.3;
    color: var(--color-text-secondary);
}

.reforma__caption-list li::before {
    flex-shrink: 0;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.reforma__caption-list--bad li::before { content: "\00d7"; color: #e5646a; }
.reforma__caption-list--good li::before { content: "\2713"; color: var(--color-lime); }

/* Linha do divisor */
.reforma__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reforma-pos);
    width: 2px;
    transform: translateX(-1px);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 12px rgba(139, 197, 63, 0.55);   /* glow verde (identidade) */
    pointer-events: none;
    z-index: 4;
}

/* Alça (handle) — mesma linguagem do botão "Falar com especialista":
   fundo escuro, borda verde-limão e glow verde */
.reforma__handle {
    position: absolute;
    top: 50%;
    left: var(--reforma-pos);
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 2px solid var(--color-lime);
    border-radius: 50%;
    background: var(--color-bg-deep);
    color: var(--color-lime);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    cursor: ew-resize;
    box-shadow: var(--shadow-lime), 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: background-color var(--transition-base),
                box-shadow var(--transition-base);
}

.reforma__handle:hover {
    background-color: rgba(139, 197, 63, 0.12);
    box-shadow: 0 0 26px rgba(139, 197, 63, 0.45), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.reforma__handle:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 3px;
}

.reforma__hint {
    text-align: center;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-top: var(--space-3);
}

/* Janelas e detalhes — estados (classes usadas dentro do SVG) */
.r-after-win { fill: url(#rGlass); stroke: rgba(120, 180, 240, 0.45); stroke-width: 1.5; }
.r-after-win--lit { fill: rgba(139, 197, 63, 0.42); stroke: rgba(139, 197, 63, 0.75); }
.r-before-win { fill: #15181b; stroke: #3a3f45; stroke-width: 1.5; }
.r-before-win--dim { fill: #5c4f2e; stroke: #6e5f38; }
.r-shield { filter: drop-shadow(0 0 8px rgba(139, 197, 63, 0.5)); }
.r-crack { fill: none; stroke: rgba(196, 74, 78, 0.75); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.r-board { fill: #50402b; stroke: #34291a; stroke-width: 1; }
.r-broken { stroke: rgba(212, 86, 90, 0.9); stroke-width: 2.2; stroke-linecap: round; }

/* Mobile: esconde as legendas de dentro do slider (que ficariam apertadas)
   e mostra a versão empilhada abaixo */
@media (max-width: 620px) {
    .reforma__caption { display: none; }
    .reforma__legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
        margin-top: var(--space-5);
    }
}

@media (max-width: 460px) {
    .reforma__legend { grid-template-columns: 1fr; }
}