/* simulador-solar.css */

/* ===========================
   bloco : escolha do pf/pj + vantagens
   =========================== */
#ss-bloco {
    --primary: #2F368E;
    --secondary: #EA1C24;
    --highlight: #fdb913;
    --text: #1f2742;
    --muted: #6b7280;
    --bg-light: #f5f7fb;
    --card: #fff;
    --shadow: 0 8px 20px rgba(0,0,0,.08);
    font-family: "Proxima Nova Regular", Arial, sans-serif;
}

    #ss-bloco .ss-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px
    }

    /* faixa cinza colada no topo */
    #ss-bloco .simulador-selector {
        background: var(--cinza-banpara1,#F5F6F7);
        padding: 28px 0;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        margin-top: -50px;
        border-top: 1px solid transparent;
        overflow: hidden;
    }

    #ss-bloco .selector-heading {
        font-weight: 800;
        color: var(--primary);
        font-size: 24px;
        text-align: center;
        margin-bottom: 16px;
        font-family: "Proxima Nova Bold",Arial,sans-serif;
    }

    #ss-bloco .selector-container {
        display: flex;
        gap: 22px;
        justify-content: center;
        flex-wrap: wrap
    }

    #ss-bloco .selector-btn {
        flex: 0 1 420px;
        background: #fff;
        color: var(--primary);
        border: 2px solid var(--primary);
        border-radius: 10px;
        padding: 18px 20px;
        text-align: center;
        box-shadow: var(--shadow);
        position: relative;
        transition: transform .2s,box-shadow .25s,background .25s,color .25s;
        cursor:pointer;
    }

        #ss-bloco .selector-btn .title {
            display: block;
            font-weight: 800;
            font-size: 1.1rem;
            margin: 8px 0 4px;
            font-family: "Proxima Nova Bold",Arial,sans-serif
        }

        #ss-bloco .selector-btn .desc {
            display: block;
            color: #222;
            opacity: .9;
            font-weight: 700;
            font-family: "Proxima Nova Regular",Arial,sans-serif
        }

        #ss-bloco .selector-btn svg {
            width: 34px;
            height: 34px;
            fill: #fff
        }

        #ss-bloco .selector-btn.active {
            background: var(--primary);
            color: #fff;
            transform: translateY(-3px)
        }

            #ss-bloco .selector-btn.active .desc {
                color: #fff;
                opacity: 1
            }

            #ss-bloco .selector-btn.active::after {
                content: "✓";
                position: absolute;
                top: 10px;
                right: 12px;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: rgba(0,0,0,.15);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .8rem;
                font-weight: 700;
            }

        #ss-bloco .selector-btn:not(.active):hover {
            transform: translateY(-2px)
        }

    /* vantagens */
    #ss-bloco .vantagens-section {
        background: #fff;
        padding: 40px 0
    }

    #ss-bloco .section-title {
        text-align: center;
        color: var(--primary);
        font-size: 35.2px;
        font-weight: 800;
        margin: 0 0 10px;
        position: relative;
        font-family: "Proxima Nova Bold",Arial,sans-serif;
    }

        #ss-bloco .section-title::after {
            content: "";
            display: block;
            width: 90px;
            height: 4px;
            background: var(--highlight);
            margin: 12px auto 0;
            border-radius: 2px;
        }

    #ss-bloco .section-subtitle {
        color: var(--muted);
        text-align: center;
        max-width: 820px;
        margin: 0 auto 18px;
        font-family: "Proxima Nova Light",Arial,sans-serif;
        font-weight: 300;
    }

    #ss-bloco .vantagens-tabs {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-bottom: 18px
    }

    #ss-bloco .vantagem-tab {
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 8px 14px;
        font-weight: 700;
        background: #eef1f8;
        color: #2b2f46;
        cursor: pointer;
        font-family: "Proxima Nova Bold",Arial,sans-serif;
    }

        #ss-bloco .vantagem-tab.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary)
        }

    #ss-bloco .vantagens-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(3,minmax(0,1fr));
        padding: 0 10px
    }

@media (max-width:992px) {
    #ss-bloco .vantagens-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:640px) {
    #ss-bloco .vantagens-grid {
        grid-template-columns: 1fr
    }
}

#ss-bloco .vantagem-card {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

#ss-bloco .vantagem-top {
    background: var(--primary);
    padding: 18px 0;
    text-align: center
}

    #ss-bloco .vantagem-top svg {
        width: 38px;
        height: 38px;
        fill: #fff
    }

#ss-bloco .vantagem-body {
    padding: 18px
}

#ss-bloco .vantagem-title {
    font-weight: 800;
    color: #1f2742;
    margin-bottom: 8px;
    font-size: 1.05rem;
    font-family: "Proxima Nova Bold",Arial,sans-serif
}

#ss-bloco .vantagem-text {
    color: #4b5563;
    line-height: 1.6;
    font-family: "Proxima Nova Light",Arial,sans-serif;
    font-weight: 300
}

/* ===========================
   cabeçalho + card da simulação
   =========================== */
#ss-form {
    --primary: var(--azul-banpara,#2c3061);
    --gold: #fdb913;
    --muted: #6b7280;
    font-family: "Proxima Nova Regular",Arial,sans-serif;
    background: var(--cinza-banpara1,#F5F6F7);
    padding: 48px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

    #ss-form .ss-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px
    }

    #ss-form .page-title {
        text-align: center;
        color: #2f368E;
        font-weight: 700;
        font-size: 35.2px;
        margin: 24px 0 6px;
        font-family: "Proxima Nova Bold",Arial,sans-serif;
    }

        #ss-form .page-title::after {
            content: "";
            display: block;
            width: 88px;
            height: 4px;
            background: var(--gold);
            margin: 10px auto 0;
            border-radius: 2px
        }

    #ss-form .page-subtitle {
        text-align: center;
        color: var(--muted);
        margin-bottom: 18px;
        font-family: "Proxima Nova Light",Arial,sans-serif;
        font-weight: 300
    }

    #ss-form .simulador-card {
        max-width: 920px;
        margin: 0 auto 24px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 15px 40px rgba(0,0,0,.06);
        overflow: hidden
    }

    #ss-form .card-top {
        background: #2f368E;
        color: #fff;
        padding: 22px 26px;
        position: relative;
        border-bottom: 4px solid var(--gold);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 180px
    }

    #ss-form .card-title {
        font-weight: 700;
        font-size: 28px;
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: "Proxima Nova Bold",Arial,sans-serif
    }

    #ss-form .card-sub {
        font-size: .95rem;
        opacity: .95;
        margin: 0;
        text-align: center;
        font-family: "Proxima Nova Light",Arial,sans-serif;
        font-weight: 300
    }

    #ss-form .card-body {
        padding: 22px 24px
    }

    #ss-form .info-alert {
        background: #f3f4f6;
        border-left: 4px solid var(--gold);
        border-radius: 6px;
        padding: 12px 14px;
        color: #374151;
        font-size: .95rem;
        margin-bottom: 14px;
        display: flex;
        gap: 10px;
        font-family: "Proxima Nova Regular",Arial,sans-serif
    }

        #ss-form .info-alert .ss-ico svg {
            width: 18px;
            height: 18px;
            fill: #1f2742;
            opacity: .9
        }

    #ss-form .form-control,
    #ss-form input[type="text"],
    #ss-form input[type="number"] {
        text-align: left; 
    }

    #ss-form .mode-switch {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: center;
        margin: 10px 0 18px
    }

    #ss-form .pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border: 1px solid #cfd6e3;
        border-radius: 999px;
        background: #fff;
        font-weight: 700;
        font-family: "Proxima Nova Bold",Arial,sans-serif;
        cursor:pointer;
    }

        #ss-form .pill.active {
            background: #e9ecf8;
            border-color: #b8c2e6;
            color: var(--primary)
        }

    #ss-form .mode-switch .pill svg {
        width: 16px;
        height: 16px;
        fill: currentColor
    }

    #ss-form .form-group {
        margin-bottom: 14px
    }

        #ss-form .form-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            color: #1f2742;
            margin-bottom: 8px;
            font-family: "Proxima Nova Bold",Arial,sans-serif;
        }

        #ss-form .form-group .ss-ico {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

            #ss-form .form-group .ss-ico svg {
                width: 18px;
                height: 18px;
                fill: #2f368E
            }

    #ss-form .form-control {
        height: 52px;
        border: 2px solid rgba(47,54,142,.35);
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px rgba(47,54,142,.06);
        font-family: "Proxima Nova Regular",Arial,sans-serif;
    }

        /* placeholders */
        #ss-form .form-control::placeholder {
            color: #9aa3b2;
            font-family: "Proxima Nova Light",Arial,sans-serif
        }

        #ss-form .form-control:focus {
            border-color: #2f368E;
            box-shadow: 0 0 0 3px rgba(47,54,142,.18);
            outline: 0
        }

       
        #ss-form .form-control.is-select { 
            background: #fff;
        }

        #ss-form .form-control,
        #ss-form .form-control.is-select,
        #ss-form input[type="text"],
        #ss-form input[type="number"],
        #ss-form select,
        #ss-form textarea {
            background: #fff !important;
        }

            #ss-form .form-control:disabled,
            #ss-form input:disabled,
            #ss-form select:disabled,
            #ss-form textarea:disabled { 
                background: #E9ECEF !important;
                color: #6B7280;
                cursor: not-allowed;
                opacity: 1; 
            }

                /* estilo do placeholder quando desabilitado (mudar depois)*/
                #ss-form input:disabled::placeholder,
                #ss-form textarea:disabled::placeholder { 
                    color: #9aa3b2;
                }

    #ss-form .botao-form {
        width: 100%;
        background: #2f368E;
        border-color: var(--primary);
        font-family: 'Maven Pro',sans-serif;
        font-weight: 600;
        letter-spacing: .2px;
        padding: 10px 18px;
        border-radius: 8px;
    }

        #ss-form .botao-form:hover {
            filter: brightness(.95)
        }

        #ss-form .botao-form .btn-ico {
            display: inline-flex;
            align-items: center;
            margin-right: 8px
        }

            #ss-form .botao-form .btn-ico svg {
                width: 16px;
                height: 16px;
                fill: #fff
            }

    #ss-form .card-title .title-ico svg {
        width: 24px;
        height: 24px;
        fill: #fff
    }

    /* Sufixo dentro do input (kWh) */
    #ss-form .ss-input-wrap {
        position: relative;
    }

        #ss-form .ss-input-wrap .ss-unit {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
            font-weight: 600;
            pointer-events: none; 
        }

        #ss-form .ss-input-wrap input.has-unit {
            padding-right: 48px; 
        }



    #ss-form svg {
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        fill: currentColor;
    }

    /* card de resultado */
    #ss-form .ss-res-card {
        position: relative;
        background: linear-gradient(90deg,#eef5ff 0%, #ffffff 60%);
        border-radius: 12px;
        box-shadow: 0 12px 24px rgba(0,0,0,.08);
        padding: 20px 24px;
        margin: 18px 0;
    }

        #ss-form .ss-res-card::before {
            content: "";
            position: absolute;
            left: 10px;
            top: 12px;
            bottom: 12px;
            width: 6px;
            border-radius: 6px;
            background: #2f368e;
            box-shadow: 0 2px 8px rgba(47,54,142,.25);
        }

    /* cabeçalho do card */
    #ss-form .ss-res-head {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #2f368e;
        padding-left: 6px;
        font-family: "Proxima Nova Bold", Arial, sans-serif;
        font-weight: 800;
        font-size: 20px;
        letter-spacing: .2px;
    }

        #ss-form .ss-res-head .ico svg {
            width: 18px;
            height: 18px;
        }

    /* valor principal */
    #ss-form .ss-res-value {
        margin: 10px 0 4px 6px;
        color: #2f368e;
        line-height: 1.1;
        font-family: "Proxima Nova Bold", Arial, sans-serif;
        font-weight: 800;
        font-size: 36px;
    }

    /* frase auxiliar e metadados */
    #ss-form .ss-res-sub {
        color: #4b5563;
        margin: 6px 0 0 6px;
        font-family: "Proxima Nova Light", Arial, sans-serif;
        font-weight: 300;
        font-size: 14px;
    }

    #ss-form .ss-res-meta {
        color: #1f2742;
        margin: 6px 0 0 6px;
        display: grid;
        gap: 2px;
        font-family: "Proxima Nova Regular", Arial, sans-serif;
        font-weight: 400;
        font-size: 14px;
    }

    /* Ações centralizadas */
    #ss-form .ss-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
        margin: 14px 0 18px;
    }

        #ss-form .ss-actions .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            border-radius: 12px;
            border: 2px solid transparent;
            text-decoration: none;
            cursor: pointer;
            font-family: "Proxima Nova Bold", Arial, sans-serif;
            font-weight: 700;
        }

            #ss-form .ss-actions .btn .ico svg {
                width: 16px;
                height: 16px;
            }

        #ss-form .ss-actions .btn-outline {
            background: #fff;
            color: #2f368e;
            border-color: #2f368e;
        }

            #ss-form .ss-actions .btn-outline:hover {
                background: #eef1ff;
            }

        #ss-form .ss-actions .btn-primary {
            background: #2f368e;
            color: #fff;
            border-color: #2f368e;
        }

            #ss-form .ss-actions .btn-primary:hover {
                filter: brightness(.96);
            }

    /* avisos */
    #ss-form .ss-disclaimer {
        background: #f6f8fc;
        border-left: 6px solid #2f368e;
        border-radius: 12px;
        padding: 18px 22px;
        box-shadow: 0 8px 20px rgba(0,0,0,.06);
        color: #1f2742;
        font-size: 14px;
        font-family: "Proxima Nova Regular", Arial, sans-serif;
    }

        #ss-form .ss-disclaimer ul {
            margin: 0;
            padding-left: 22px;
        }

        #ss-form .ss-disclaimer li {
            margin: 8px 0;
        }


@media (max-width: 768px) {
    #ss-form .ss-res-head {
        font-size: 16px;
    }

        #ss-form .ss-res-head .ico svg {
            width: 16px;
            height: 16px;
        }

    #ss-form .ss-res-value {
        font-size: 28px;
        margin-left: 4px;
    }

    #ss-form .ss-res-sub, #ss-form .ss-res-meta {
        font-size: 13px;
        margin-left: 4px;
    }
}
@@media (max-width: 420px) {
    #ss-form .ss-actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/
#ss-bloco svg,
#ss-form svg {
    max-width: none;
    max-height: none;
}

/* ----- topo: botões pf/pj ----- */
#ss-bloco .selector-btn svg {
    width: 44px; 
    height: 44px;
}

/* ----- cards de vantagens ----- */
#ss-bloco .vantagem-top svg {
    width: 48px;
    height: 48px;
}

/* ----- alerta do formulário ----- */
#ss-form .info-alert .ss-ico svg {
    width: 22px; 
    height: 22px;
}

/* ----- tabs (consumo kWh / valor do Projeto) ----- */
#ss-form .mode-switch .pill svg {
    width: 20px; 
    height: 20px;
}

/* ----- labels e ícones dos campos ----- */
#ss-form .form-group .ss-ico svg {
    width: 29px; 
    height: 22px;
}

/* ----- ícone do título do card (faixa azul) ----- */
#ss-form .card-title .title-ico svg {
    width: 32px; 
    height: 32px;
}

/* ----- cabeçalho dos cards de resultado ----- */
#ss-form .ss-res-head .ico svg {
    width: 22px; 
    height: 22px;
}

/* ----- ícones dos botões (Refazer / PDF) ----- */
#ss-form .ss-actions .btn .ico svg {
    width: 20px; 
    height: 20px;
}


#ss-form .card-title {
    gap: 12px;
}

#ss-form .ss-res-head {
    gap: 12px;
}

#ss-form .ss-actions .btn {
    gap: 12px;
}


@media (max-width: 768px) {
    #ss-bloco .selector-btn svg {
        width: 38px;
        height: 38px;
    }

    #ss-bloco .vantagem-top svg {
        width: 42px;
        height: 42px;
    }

    #ss-form .info-alert .ss-ico svg,
    #ss-form .form-group .ss-ico svg {
        width: 20px;
        height: 20px;
    }

    #ss-form .card-title .title-ico svg {
        width: 28px;
        height: 28px;
    }

    #ss-form .ss-res-head .ico svg {
        width: 20px;
        height: 20px;
    }

    #ss-form .mode-switch .pill svg,
    #ss-form .ss-actions .btn .ico svg {
        width: 18px;
        height: 18px;
    }
}

#ss-form svg {
    max-width: none;
    max-height: none;
}

/* título do card (faixa azul) */
#ss-form .card-title .title-ico svg {
    width: 36px !important; 
    height: 36px !important;
}

/* aviso (Informação importante) */
#ss-form .info-alert .ss-ico svg {
    width: 24px !important; 
    height: 24px !important;
}

/* abas/pílulas (Consumo kWh / Valor do Projeto) */
#ss-form .mode-switch .pill svg {
    width: 22px !important; 
    height: 22px !important;
}

/* ícones das labels dos campos */
#ss-form .form-group .ss-ico svg {
    width: 200px !important; 
    height: 200px !important;
}

/* botão “Gerar Simulação” */
#ss-form .botao-form .btn-ico svg {
    width: 22px !important; /
    height: 22px !important;
}

/* cabeçalho dos cards de resultado (Valor Total / Valor da Parcela) */
#ss-form .ss-res-head .ico svg {
    width: 24px !important; 
    height: 24px !important;
}

/* botões de ação (Refazer / Baixar PDF) */
#ss-form .ss-actions .btn .ico svg {
    width: 22px !important; 
    height: 22px !important;
}

#ss-form .card-title {
    gap: 12px;
}

#ss-form .ss-res-head {
    gap: 12px;
}

#ss-form .ss-actions .btn {
    gap: 12px;
}


@media (max-width: 768px) {
    #ss-form .card-title .title-ico svg {
        width: 30px !important;
        height: 30px !important;
    }

    #ss-form .info-alert .ss-ico svg,
    #ss-form .form-group .ss-ico svg {
        width: 20px !important;
        height: 20px !important;
    }

    #ss-form .mode-switch .pill svg,
    #ss-form .botao-form .btn-ico svg,
    #ss-form .ss-actions .btn .ico svg {
        width: 18px !important;
        height: 18px !important;
    }

    #ss-form .ss-res-head .ico svg {
        width: 20px !important;
        height: 20px !important;
    }
}


:root {
    --fx-shadow: 0 8px 20px rgba(0,0,0,.08);
    --fx-shadow-hover: 0 20px 44px rgba(0,0,0,.14);
    --fx-ring: 0 0 0 3px rgba(47,54,142,.18);
}


#ss-bloco .vantagem-card,
#ss-form .simulador-card,
#ss-form .ss-res-card,
#ss-bloco .selector-btn {
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

  
    #ss-bloco .vantagem-card:hover,
    #ss-form .simulador-card:hover,
    #ss-form .ss-res-card:hover,
    #ss-bloco .selector-btn:not(.active):hover {
        transform: translateY(-6px);
        box-shadow: var(--fx-shadow-hover);
    }

   
    #ss-bloco .vantagem-card:active,
    #ss-form .simulador-card:active,
    #ss-form .ss-res-card:active,
    #ss-bloco .selector-btn:active {
        transform: translateY(-2px);
    }

    #ss-bloco .vantagem-card:focus-within,
    #ss-form .simulador-card:focus-within,
    #ss-form .ss-res-card:focus-within,
    #ss-bloco .selector-btn:focus-visible {
        outline: none;
        box-shadow: var(--fx-shadow-hover), var(--fx-ring);
    }


#ss-form .ss-res-card {
    position: relative;
}

    #ss-form .ss-res-card::before {
        transition: background-color .25s ease, width .25s ease;
    }

    #ss-form .ss-res-card:hover::before {
        background: #4350d8;
        width: 10px; 
    }


.fx-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease, box-shadow .25s ease;
}

    .fx-reveal.fx-in {
        opacity: 1;
        transform: none;
    }


@media (prefers-reduced-motion: reduce) {
    #ss-bloco .vantagem-card,
    #ss-form .simulador-card,
    #ss-form .ss-res-card,
    #ss-bloco .selector-btn {
        transition: box-shadow .2s ease;
        transform: none !important;
    }

    .fx-reveal {
        opacity: 1;
        transform: none;
    }
}

/
#ss-toast-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.ss-toast {
    background: #2f368e; 
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    padding: 12px 16px;
    min-width: 260px;
    max-width: 360px;
    line-height: 1.35;
    font-family: "Proxima Nova Bold", Arial, sans-serif;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.12);
    animation: ss-toast-in .25s ease forwards;
}

    .ss-toast.hide {
        animation: ss-toast-out .25s ease forwards;
    }

@keyframes ss-toast-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ss-toast-out {
    to {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

/* --- card eco --- */
.ss-res-card.ss-res-card--eco {
    background: linear-gradient( 90deg, #edf7ee 0%, 
    #dff2e1 20%, #c9e9cc 45%, #a8deb1 70%, #86d39a 85%, #66c487 100% 
    ) !important;
    border-radius: 12px;
}

    
    .ss-res-card.ss-res-card--eco .ss-res-head h3 {
        color: #0f7a2a !important;
        font-weight: 700;
    }

    .ss-res-card.ss-res-card--eco .ss-res-head .ico svg {
        width: 22px;
        height: 22px;
        fill: #0f7a2a !important;
    }

    /* texto e “fonte” */
    .ss-res-card.ss-res-card--eco .ss-eco-lines {
        color: #1f2937;
        line-height: 1.65;
        margin-top: 6px;
    }

    .ss-res-card.ss-res-card--eco .ss-eco-source {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px dashed rgba(15,122,42,.28);
    }

        .ss-res-card.ss-res-card--eco .ss-eco-source a {
            color: #166534;
            text-decoration: underline;
        }

            .ss-res-card.ss-res-card--eco .ss-eco-source a:hover {
                color: #14532d;
            }

:root {
    --font-regular: "Proxima Nova Regular", Arial, sans-serif;
    --font-bold: "Proxima Nova Bold", Arial, sans-serif;
    --font-light: "Proxima Nova Light", Arial, sans-serif;
    /* escala de tamanhos */
    --fz-xxl: 36px; 
    --fz-xl: 28px; 
    --fz-lg: 20px; 
    --fz-md: 16px; 
    --fz-sm: 14px; 
}

/* aplica família padrão em tudo do bloco e do formulário */
html, body, #ss-bloco, #ss-form,
#ss-bloco *:not(svg):not(path),
#ss-form *:not(svg):not(path) {
    font-family: var(--font-regular) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* botão principal também com Proxima Nova para manter padrão */
    #ss-form .botao-form {
        font-family: var(--font-bold) !important;
        font-weight: 700;
        letter-spacing: .2px;
    }



  
    #ss-form .ss-res-head,
    #ss-form .ss-res-head h3 {
        font-family: var(--font-bold) !important;
        font-weight: 800 !important;
        font-size: var(--fz-lg) !important;
        letter-spacing: .2px;
    }

  
    #ss-form .ss-res-value {
        font-family: var(--font-bold) !important;
        font-weight: 800 !important;
        font-size: var(--fz-xxl) !important;
        line-height: 1.15;
    }

    /* Frase auxiliar e metadados (linhas e carência) */
    #ss-form .ss-res-sub,
    #ss-form .ss-res-meta {
        font-family: var(--font-regular) !important;
        font-weight: 400 !important;
        font-size: var(--fz-sm) !important;
        line-height: 1.6;
        color: #1f2742; 
    }



/* título já herda o estilo acima; garante bold e cor verde */
.ss-res-card.ss-res-card--eco .ss-res-head h3 {
    font-family: var(--font-bold) !important;
    font-weight: 800 !important;
}

/* linhas e fonte */
.ss-res-card.ss-res-card--eco .ss-eco-lines {
    font-family: var(--font-regular) !important;
    font-weight: 400 !important;
    font-size: var(--fz-md);
}

/* fonte/links no rodapé do card eco */
.ss-res-card.ss-res-card--eco .ss-eco-source {
    font-family: var(--font-regular) !important;
    font-weight: 400 !important;
    font-size: var(--fz-sm);
}

.vantagem-top i {
  font-size: 40px;
  color: #fff;       
  line-height: 1;
}

#ss-bloco .vantagem-top {
    color: #fff;
    text-align: center;
    background: var(--primary);
    padding: 18px 0;
}
    #ss-bloco .vantagem-top .ico {
        display: inline-block;
        width: 48px; 
        height: 48px;
        background-color: currentColor; 
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

   
    #ss-bloco .vantagem-top .i-house {
        -webkit-mask-image: url("/images/icones/house-solid.svg");
        mask-image: url("/images/icones/house-solid.svg");
    }

    #ss-bloco .vantagem-top .i-wallet {
        -webkit-mask-image: url("/images/icones/wallet-solid.svg");
        mask-image: url("/images/icones/wallet-solid.svg");
    }

    #ss-bloco .vantagem-top .i-hand-dollar {
        -webkit-mask-image: url("/images/icones/hand-holding-dollar-solid.svg");
        mask-image: url("/images/icones/hand-holding-dollar-solid.svg");
    }


#ss-bloco .vantagem-top {
    color: #fff;
    text-align: center;
    background: var(--primary);
    padding: 18px 0;
}

    #ss-bloco .vantagem-top .ico {
        display: inline-block;
        width: 48px;
        height: 48px;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    #ss-bloco .vantagem-top .i-chart {
        -webkit-mask-image: url("/images/icones/chart-line-solid.svg");
        mask-image: url("/Images/icones/chart-line-solid.svg");
    }

    #ss-bloco .vantagem-top .i-leaf {
        -webkit-mask-image: url("/images/icones/leaf-solid.svg");
        mask-image: url("/Images/icones/leaf-solid.svg");
    }

    #ss-bloco .vantagem-top .i-briefcase {
        -webkit-mask-image: url("/images/icones/briefcase-solid.svg");
        mask-image: url("/Images/icones/briefcase-solid.svg");
    }

/* Ícones no seletor PF/PJ via mask */
#ss-bloco .selector-btn {
    color: var(--primary);
}

    #ss-bloco .selector-btn.active {
        background: var(--primary);
        color: #fff;
    }

    
    #ss-bloco .selector-btn .icon .ico {
        display: inline-block;
        width: 44px; 
        height: 44px;
        background-color: currentColor; 
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    /* mapeamento dos arquivos SVG da sua pasta */
    #ss-bloco .selector-btn .icon .i-house {
        -webkit-mask-image: url("/Images/icones/house-solid.svg");
        mask-image: url("/Images/icones/house-solid.svg");
    }

    #ss-bloco .selector-btn .icon .i-building {
        -webkit-mask-image: url("/Images/icones/building-solid.svg"); 
        mask-image: url("/Images/icones/building-solid.svg");
    }

/* (opcional) responsivo, mantendo seu padrão */
@media (max-width: 768px) {
    #ss-bloco .selector-btn .icon .ico {
        width: 38px;
        height: 38px;
    }
}



/* ========== BASE DO ÍCONE VIA MASK (reutilizável) ========== */
#ss-form .ico {
    display: inline-block;
    width: 1em; 
    height: 1em; 
    background-color: currentColor; 
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


#ss-form .card-top {
    color: #fff;
}

#ss-form .card-title .title-ico .ico {
    width: 36px;
    height: 36px;
}

#ss-form .card-title .title-ico .i-house {
    -webkit-mask-image: url("/Images/icones/house-solid.svg");
    mask-image: url("/Images/icones/house-solid.svg");
}

/* ========== AVISO (info-alert) ========== */
#ss-form .info-alert .ss-ico {
    color: #1f2742;
}
    /* cor do ícone */
    #ss-form .info-alert .ss-ico .ico {
        width: 24px;
        height: 24px;

    }
    /* mapeamento do arquivo info */
    #ss-form .info-alert .ss-ico .i-info {
        -webkit-mask-image: url("/Images/icones/circle-info-solid.svg"); 
        mask-image: url("/Images/icones/circle-info-solid.svg");
    }


#ss-form .mode-switch .pill .ico {
    width: 22px;
    height: 22px;
    margin-right: 6px; 
    vertical-align: -3px;
}

#ss-form .mode-switch .pill .i-bolt {
    -webkit-mask-image: url("/images/icones/bolt-solid.svg");
    mask-image: url("/Images/icones/bolt-solid.svg");
}
#ss-form .mode-switch .pill .i-invoice-dollar {
    -webkit-mask-image: url("/Images/icones/money-bill-wave-solid.svg"); 
    mask-image: url("/Images/icones/money-bill-wave-solid.svg");
}

/* Responsivo (mantém seu padrão) */
@media (max-width: 768px) {
    #ss-form .card-title .title-ico .ico {
        width: 30px;
        height: 30px;
    }

    #ss-form .info-alert .ss-ico .ico {
        width: 20px;
        height: 20px;
    }

    #ss-form .mode-switch .pill .ico {
        width: 18px;
        height: 18px;
    }
}


#ss-form .ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


#ss-form .form-group .ss-ico {
    color: #2f368E;
}
   
    #ss-form .form-group .ss-ico .ico {
        width: 22px;
        height: 22px;
    }


#ss-form .botao-form .btn-ico .ico {
    width: 22px;
    height: 22px;
}


#ss-form .i-bolt {
    -webkit-mask-image: url("/Images/icones/bolt-solid.svg");
    mask-image: url("/Images/icones/bolt-solid.svg");
}

#ss-form .i-money-bill {
    -webkit-mask-image: url("/Images/icones/money-bill-wave-solid.svg");
    mask-image: url("/Images/icones/money-bill-wave-solid.svg");
}

#ss-form .i-users {
    -webkit-mask-image: url("/Images/icones/users-solid.svg");
    mask-image: url("/Images/icones/users-solid.svg");
}

#ss-form .i-list {
    -webkit-mask-image: url("/Images/icones/list-ol-solid.svg");
    mask-image: url("/Images/icones/list-ol-solid.svg");
}

#ss-form .i-clock {
    -webkit-mask-image: url("/Images/icones/clock-solid.svg");
    mask-image: url("/Images/icones/clock-solid.svg");
}

#ss-form .i-calculator {
    -webkit-mask-image: url("/Images/icones/calculator-solid.svg");
    mask-image: url("/Images/icones/calculator-solid.svg");
}



@media (max-width: 768px) {
    #ss-form .form-group .ss-ico .ico {
        width: 20px;
        height: 20px;
    }

    #ss-form .botao-form .btn-ico .ico {
        width: 18px;
        height: 18px;
    }
}


#ss-form .i-leaf {
    -webkit-mask-image: url("/images/icones/leaf-solid.svg");
    mask-image: url("/images/icones/leaf-solid.svg");
}

#ss-form .i-rotate {
    
    -webkit-mask-image: url("/images/icones/rotate-right-solid.svg");
    mask-image: url("/images/icones/rotate-right-solid.svg");
}

#ss-form .i-download {
    -webkit-mask-image: url("/images/icones/file-pdf-solid.svg");
    mask-image: url("/images/icones/file-pdf-solid.svg");
}

#ss-form .i-house {
    -webkit-mask-image: url("/images/icones/house-solid.svg");
    mask-image: url("/images/icones/house-solid.svg");
}

#ss-form .i-building {
    -webkit-mask-image: url("/images/icones/building-solid.svg");
    mask-image: url("/images/icones/building-solid.svg");
}


#ss-form .ss-res-head .ico {
    width: 24px;
    height: 24px;
}

#ss-form .ss-actions .btn .ico {
    width: 22px;
    height: 22px;
}

.ss-res-card.ss-res-card--eco .ss-res-head {
    color: #0f7a2a; 
}

    .ss-res-card.ss-res-card--eco .ss-res-head .ico {
        width: 22px;
        height: 22px;
    }

#ss-form .mode-switch .pill.active {
    background: #2F368E;
    color: #fff;
    border-color: #2F368E;
}

    #ss-form .mode-switch .pill.active .ico,
    #ss-form .mode-switch .pill.active i {
        color: #fff;
    }