/**
 * DELMAT Engenharia & Tecnologia
 * Landing Page: Diagnóstico Elétrico Escolar
 *
 * Carregado DEPOIS de instalacoes-eletricas.css: a página reusa as
 * classes .iel-* (seções, cards, lista "o que recebe", passos) e as
 * globais de styles.css (hero, clientes, contato). Aqui fica só o que
 * não existe lá: grade de 3, miniaturas do exemplo, números do caso,
 * antes/depois, cards de preço, lista "não incluído", marcadores
 * PENDENTE e o accordion de FAQ (mesmo markup .ldt-faq das LPs de
 * laudo, sem carregar laudos-tecnicos.css inteiro).
 *
 * Namespace: .dge-* (Diagnóstico Elétrico Escolar).
 */

/* Botões: alvo de toque de pelo menos 44px (spec §11.8) */
.dge-btn {
    min-height: 48px;
    justify-content: center;
}

.dge-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dge-ctas--center {
    justify-content: center;
    margin-top: 24px;
}

.dge-btn--pendente {
    cursor: not-allowed;
    opacity: 0.85;
}

/* Etiqueta curta enquanto o PDF não chega (some junto com o span) */
.dge-pendente-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #FFFBEB;
    color: #92400E;
    border: 1px dashed #B45309;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.dge-narrow {
    max-width: 880px;
}

/* ===================================================================
   MARCADOR DE MATERIAL PENDENTE (some quando o arquivo existir)
   =================================================================== */
.dge-pendente {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 2px dashed #B45309;
    border-radius: 16px;
    background: #FFFBEB;
    color: #92400E;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

.dge-pendente--hero {
    min-height: 320px;
    border-radius: 24px;
}

.dge-pendente--thumb {
    aspect-ratio: 297 / 210;
    font-size: 12px;
}

.dge-pendente--foto {
    aspect-ratio: 4 / 3;
}

/* ===================================================================
   2. O PROBLEMA (3 cards)
   =================================================================== */
.dge-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ===================================================================
   3. O QUE RECEBE — 6 itens numerados (3 colunas) + faixa do exemplo
   =================================================================== */
.dge-recebe-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dge-recebe-item {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--iel-border);
    border-radius: var(--iel-radius);
    padding: 28px 24px 26px;
    border-top: 4px solid var(--iel-primary);
}

.dge-recebe-item__num {
    display: block;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--iel-primary);
    letter-spacing: -0.02em;
}

.dge-recebe-item__icon {
    position: absolute;
    top: 26px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 52, 154, 0.08);
    color: var(--iel-primary);
}

.dge-recebe-item__icon i {
    width: 22px;
    height: 22px;
}

.dge-recebe-item__title {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 700;
    color: var(--iel-ink);
}

.dge-recebe-item__text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--iel-text);
}

.dge-exemplo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 48px;
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid var(--iel-border);
    border-radius: var(--iel-radius);
}

.dge-exemplo__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--iel-ink);
}

/* Páginas do modelo são A4 paisagem */
.dge-exemplo__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.dge-exemplo__thumb {
    width: 100%;
    height: auto;
    border: 1px solid var(--iel-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
}

/* ===================================================================
   4. CASO REAL (números + antes/depois)
   =================================================================== */
.dge-numeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 880px;
    margin: 0 auto 40px;
    list-style: none;
    padding: 0;
}

.dge-numero {
    text-align: center;
    background: var(--iel-soft);
    border-radius: var(--iel-radius);
    padding: 24px 16px;
}

.dge-numero__valor {
    display: block;
    font-size: 34px;
    font-weight: 700;
    color: var(--iel-primary);
    line-height: 1.1;
}

.dge-numero__rotulo {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--iel-text);
}

.dge-antes-depois {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 880px;
    margin: 0 auto;
}

.dge-antes-depois__item {
    margin: 0;
}

.dge-antes-depois__item img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.dge-antes-depois__item figcaption {
    margin-top: 10px;
    text-align: center;
    font-weight: 600;
    color: var(--iel-ink);
}

/* ===================================================================
   5. COMO FUNCIONA (3 passos em vez dos 4 da LP de instalações)
   =================================================================== */
.iel-steps.dge-steps-3 {
    grid-template-columns: repeat(3, 1fr);
}

.dge-prazo {
    margin-top: 32px;
    text-align: center;
    font-weight: 600;
    color: var(--iel-ink);
}

/* ===================================================================
   6. PREÇO
   =================================================================== */
.dge-precos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.dge-preco {
    background: #FFFFFF;
    border: 1px solid var(--iel-border);
    border-radius: var(--iel-radius);
    padding: 32px 24px;
    text-align: center;
}

.dge-preco__porte {
    font-size: 20px;
    font-weight: 700;
    color: var(--iel-ink);
}

.dge-preco__tamanho {
    margin-top: 8px;
    font-size: 15px;
    color: var(--iel-muted);
}

.dge-preco__valor {
    margin-top: 18px;
    font-size: 32px;
    font-weight: 700;
    color: var(--iel-primary);
}

.dge-desconto {
    max-width: 720px;
    margin: 32px auto 0;
    padding: 18px 24px;
    border-radius: 16px;
    background: rgba(0, 52, 154, 0.08);
    color: var(--iel-ink);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.dge-letra-menor {
    max-width: 720px;
    margin: 14px auto 0;
    font-size: 13px;
    color: var(--iel-muted);
    text-align: center;
    line-height: 1.5;
}

/* ===================================================================
   7. O QUE NÃO ESTÁ INCLUÍDO
   =================================================================== */
.dge-nao-incluido {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.dge-nao-incluido li {
    position: relative;
    padding: 14px 18px 14px 44px;
    background: #FFFFFF;
    border: 1px solid var(--iel-border);
    border-radius: 12px;
    color: var(--iel-text);
}

.dge-nao-incluido li::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--iel-muted);
}

.dge-nao-incluido__nota {
    max-width: 720px;
    margin: 20px auto 0;
    font-size: 15px;
    color: var(--iel-muted);
    text-align: center;
    line-height: 1.55;
}

/* ===================================================================
   8. FAQ — mesmo accordion <details> das LPs de laudo (.ldt-faq)
   =================================================================== */
.ldt-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ldt-faq__item {
    background: #FFFFFF;
    border: 1px solid var(--iel-border);
    border-radius: 16px;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.ldt-faq__item[open] {
    border-color: #CCD9F4;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.ldt-faq__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 18px 22px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--iel-ink);
    line-height: 1.4;
    list-style: none;
}

.ldt-faq__pergunta::-webkit-details-marker { display: none; }
.ldt-faq__pergunta::marker { content: ''; }

.ldt-faq__pergunta:focus-visible {
    outline: 3px solid var(--iel-blue-vivid);
    outline-offset: 2px;
    border-radius: 16px;
}

.ldt-faq__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--iel-blue-vivid);
    transition: transform 0.25s ease;
}

.ldt-faq__item[open] .ldt-faq__chevron {
    transform: rotate(180deg);
}

.ldt-faq__resposta {
    padding: 0 22px 20px;
    font-size: 15px;
    color: var(--iel-text);
    line-height: 1.65;
}

.ldt-faq__resposta p { margin: 0; }

/* ===================================================================
   9. FORMULÁRIO (select não tem estilo em .form-group no styles.css)
   =================================================================== */
.dge-form .form-group select {
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 16px;
    background: #FFFFFF;
    color: #0F172A;
}

.dge-form .form-group select:focus {
    outline: none;
    border-color: #00349A;
    box-shadow: 0 0 0 3px rgba(0, 52, 154, 0.1);
}

.dge-form .btn-block {
    width: 100%;
}

/* ===================================================================
   RESPONSIVO (celular primeiro a partir de 360px)
   =================================================================== */
@media (max-width: 1024px) {
    .dge-recebe-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dge-recebe-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dge-exemplo {
        margin-top: 32px;
        padding: 20px 16px;
    }

    /* No celular: 1ª página larga, as outras duas embaixo */
    .dge-exemplo__thumbs {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .dge-exemplo__thumbs > :first-child {
        grid-column: 1 / -1;
    }

    .dge-cards-3,
    .iel-steps.dge-steps-3,
    .dge-precos,
    .dge-numeros {
        grid-template-columns: 1fr;
    }

    .dge-antes-depois {
        grid-template-columns: 1fr;
    }

    .dge-ctas .dge-btn {
        width: 100%;
    }

    .dge-pendente--hero {
        min-height: 220px;
    }

    .dge-hero .hero-title {
        overflow-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .dge-numero__valor {
        font-size: 28px;
    }

    .dge-preco__valor {
        font-size: 28px;
    }

    .contato-section .contato-form {
        padding: 24px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ldt-faq__chevron { transition: none; }
}

/* ===================================================================
   FOTOS (British College) — <picture> WebP + JPG
   =================================================================== */
.dge-foto {
    margin: 0;
}

.dge-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.dge-foto--larga {
    max-width: 960px;
    margin: 40px auto 0;
    aspect-ratio: 16 / 9;
}

/* <picture> é inline: sem isto a altura do figure não chega na <img> */
.dge-foto picture {
    display: block;
    height: 100%;
}



/* Como funciona: ficha de campo inteira (sem recorte) */
.dge-foto--inteira img {
    height: auto;
    object-fit: contain;
    background: #FFFFFF;
    border: 1px solid var(--iel-border);
}

.dge-antes-depois__item picture img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Como funciona: foto do levantamento à esquerda, passos empilhados à direita */
.dge-como {
    display: grid;
    grid-template-columns: minmax(0, 440px) 1fr;
    gap: 32px;
    align-items: center;
}

.dge-como .iel-steps.dge-steps-3 {
    grid-template-columns: 1fr;
    gap: 16px;
}

.dge-como .iel-step {
    padding: 24px 26px;
}

@media (max-width: 768px) {
    /* Antes/depois seguem lado a lado também no celular (mesma proporção 4:5) */
    .dge-antes-depois {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .dge-como {
        grid-template-columns: 1fr;
    }

    .dge-foto--inteira {
        max-width: 360px;
        width: 100%;
        margin: 0 auto;
    }

    .dge-hero .dge-hero__image {
        max-height: 440px;
    }

    .dge-foto--larga {
        aspect-ratio: 4 / 3;
    }
}