/* ==========================================================================
   home.css — Home do site institucional (ADR-0003, T-302)
   Desenho: docs\design\home.dc.html (aprovado em 2026-10-03). Marcação: br\HomeConteudo.ascx.
   Carregado só pelas duas homes (Bill\index.aspx e Bill\br\index.aspx), depois do site.css,
   por um HtmlLink acrescentado ao <head> no Page_Load (caminho absoluto + ?v=).

   Regras do arquivo (as mesmas do site.css):
     - toda classe começa com "si-home-"; os componentes do site.css (si-section,
       si-section--escura, si-btn) são reaproveitados e só complementados aqui;
     - sem !important; celular primeiro (390 px), media queries só acrescentam;
     - valores que o site.css não tem como token ficam escritos direto e comentados:
         #0f1d2e -> #112a37  degradê azul-marinho do topo e da avaliação (canvas)
         #6ee7b7             verde claro para texto sobre azul-marinho (canvas)
         #a7f3d0             hover do verde claro
       e as transparências do canvas (rgba).
   Exceção ao guia visual, vinda do canvas da home (guia, seção 5.3: "o canvas da
   home, bloco escuro com destaque verde, é a T-302"): na home o verde de ação
   (--si-verde-acao) aparece também no destaque do h1, nos ícones de check e nos
   botões "Simular economia" (topo) e "Iniciar avaliação gratuita"; os títulos
   sobre branco ficam em ardósia 900, como no canvas.
   ========================================================================== */


/* ---------- Peças comuns ---------- */

/* Selo em pílula sobre o azul-marinho (topo e avaliação) */
.si-home-selo {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.375rem 0.875rem;
    font-size: var(--si-fs-mini);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.55);
    border-radius: var(--si-raio-pilula);
}

/* Destaque verde dentro de um título sobre azul-marinho */
.si-home-destaque { color: var(--si-verde-acao); }

/* Título de seção sobre branco ou sobre o fundo da página: ardósia 900, como no canvas */
.si-home-titulo {
    margin: 0;
    font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--si-ardosia-900);
}

/* Grupo de botões: um por linha no celular, lado a lado a partir de 576 px */
.si-home-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--si-esp-3);
}

.si-home-acoes > .si-btn { flex: 1 1 100%; }

@media (min-width: 576px) {
    .si-home-acoes > .si-btn { flex: 0 0 auto; }
}

/* Botão verde do conteúdo da home (mesmas cores do si-btn--avaliacao do menu) */
.si-home-btn--verde {
    --si-btn-fundo: var(--si-verde-acao);
    --si-btn-texto: var(--si-verde-acao-texto);
    --si-btn-borda: var(--si-verde-acao);
    --si-btn-fundo-hover: var(--si-verde-acao-hover);
    --si-btn-borda-hover: var(--si-verde-acao-hover);
}

/* Botão escuro da faixa final (fundo branco) */
.si-home-btn--escuro {
    --si-btn-fundo: var(--si-ardosia-800);
    --si-btn-texto: #ffffff;
    --si-btn-borda: var(--si-ardosia-800);
    --si-btn-fundo-hover: var(--si-ardosia-900);
    --si-btn-borda-hover: var(--si-ardosia-900);
}

/* Lista com check verde (máscara SVG no ::before; o marcador vazio mantém a lista anunciada como lista) */
.si-home-checks {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style-type: "";
}

.si-home-checks > li {
    position: relative;
    padding-left: 1.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--si-ardosia-200);
}

.si-home-checks > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--si-verde-acao);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9.5'/%3e%3cpath d='M8 12.3l2.6 2.6L16.2 9.3'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9.5'/%3e%3cpath d='M8 12.3l2.6 2.6L16.2 9.3'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* Variação do quadro do topo: ícone de 22 px, item centrado na linha */
.si-home-checks--quadro > li {
    padding-left: 2.125rem;
    line-height: 1.375rem;
}

.si-home-checks--quadro > li::before {
    top: 0;
    width: 1.375rem;
    height: 1.375rem;
}

/* Variação da avaliação: só o traço do check, em grade de 2 colunas quando há largura */
.si-home-checks--simples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.625rem 1.5rem;
}

.si-home-checks--simples > li { color: var(--si-ardosia-200); }

.si-home-checks--simples > li::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12.5l4.5 4.5L19 7.5'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12.5l4.5 4.5L19 7.5'/%3e%3c/svg%3e");
}


/* ---------- 1. Topo (bloco escuro, h1 e quadro dos itens conferidos) ---------- */
.si-home-topo,
.si-home-avaliacao {
    background: linear-gradient(135deg, #0f1d2e 0%, #112a37 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.si-home-topo { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }

.si-home-topo__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.si-home-topo__texto {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.si-home-topo__texto > .si-home-selo { align-self: flex-start; }

.si-home-topo__titulo {
    margin: 0;
    font-size: clamp(1.875rem, 1.2rem + 2.7vw, 2.875rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.si-home-topo__lead {
    max-width: 37.5rem;
    margin: 0;
    font-size: var(--si-fs-lead);
    line-height: 1.6;
    color: var(--si-ardosia-300);
}

.si-home-topo__lead strong { color: #ffffff; }

.si-home-topo .si-home-acoes { margin-top: var(--si-esp-1); }

.si-home-topo__nota {
    margin: 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-ardosia-400);
}

.si-home-topo__nota a {
    font-weight: 600;
    color: #6ee7b7;
}

.si-home-topo__nota a:hover { color: #a7f3d0; }

/* Quadro "O que conferimos em cada fatura" */
.si-home-quadro {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
    padding: 1.375rem 1.25rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.125rem;
}

.si-home-quadro__cab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.si-home-quadro__titulo {
    margin: 0;
    font-size: var(--si-fs-base);
    font-weight: 700;
    color: #ffffff;
}

.si-home-quadro__total {
    margin: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--si-ardosia-400);
}

.si-home-quadro__link {
    align-self: flex-start;
    margin-top: var(--si-esp-1);
    font-size: var(--si-fs-pequeno);
    font-weight: 600;
    color: #6ee7b7;
    text-decoration: none;
}

.si-home-quadro__link:hover {
    color: #a7f3d0;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .si-home-quadro { padding: 1.625rem 1.75rem; }
}

@media (min-width: 992px) {
    .si-home-topo__grade {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 2.75rem;
    }
}


/* ---------- 2. Faixa de números (card branco) ---------- */
.si-home-numeros { padding-block: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }

.si-home-numeros__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style-type: "";
}

.si-home-numeros__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.si-home-numeros__valor {
    font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem);
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--si-ardosia-900);
}

/* Números de economia: o verde de economia do guia */
.si-home-numeros__valor--economia { color: var(--si-verde); }

/* Qualificador antes do número ("Mais de"), em cima, como no si-prova do site.css */
.si-home-numeros__valor small {
    display: block;
    font-size: var(--si-fs-pequeno);
    font-weight: 600;
    line-height: 1.4;
    color: var(--si-ardosia-600);
}

.si-home-numeros__legenda {
    font-size: var(--si-fs-pequeno);
    line-height: 1.45;
    color: var(--si-ardosia-600);
}

/* Lado a lado, todo número começa na mesma altura, com ou sem qualificador */
@media (min-width: 576px) {
    .si-home-numeros__valor {
        position: relative;
        padding-top: 1.25rem;
    }

    .si-home-numeros__valor small {
        position: absolute;
        top: 0;
        left: 0;
    }
}


/* ---------- 3. Soluções (sobre o fundo da página, 3 cards escuros) ---------- */
.si-home-solucoes {
    width: min(100% - 2 * var(--si-margem-lateral), var(--si-largura-card));
    margin: 0 auto var(--si-entre-cards);
    padding-top: var(--si-esp-3);
}

.si-home-solucoes__cab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.375rem;
}

.si-home-solucoes__intro {
    max-width: 35rem;
    margin: 0;
    color: var(--si-ardosia-600);
}

.si-home-solucoes__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
    gap: 1.375rem;
}

.si-home-solucao {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--si-ardosia-200);
    background: var(--si-ardosia-800);
    border-radius: 1.25rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.si-home-solucao picture { display: block; }

.si-home-solucao__img {
    display: block;
    width: 100%;
    height: 11.875rem;
    object-fit: cover;
}

.si-home-solucao__corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.375rem 1.25rem 1.5rem;
}

.si-home-solucao__titulo {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #ffffff;
}

.si-home-solucao__texto {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--si-ardosia-300);
}

.si-home-solucao .si-home-checks {
    margin-top: var(--si-esp-1);
    gap: 0.5625rem;
}

.si-home-solucao__mais {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--si-ardosia-400);
}

.si-home-solucao__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 2.75rem;
    margin-top: auto;
    padding: 0 1.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6ee7b7;
    text-decoration: none;
    border: 1.5px solid var(--si-verde-acao);
    border-radius: var(--si-raio-pilula);
    transition: background-color var(--si-dur) var(--si-curva), color var(--si-dur) var(--si-curva);
}

.si-home-solucao__link:hover,
.si-home-solucao__link:focus-visible {
    color: #a7f3d0;
    background: rgba(16, 185, 129, 0.12);
}

.si-home-solucao__link:focus-visible { outline-color: #ffffff; }

@media (min-width: 768px) {
    .si-home-solucao__corpo { padding: 1.625rem 1.625rem 1.75rem; }
}


/* ---------- 4. Como funciona (card branco, 4 etapas) ---------- */
.si-home-como__cab {
    display: flex;
    flex-direction: column;
    gap: var(--si-esp-2);
    max-width: 43.75rem;
    margin-bottom: 1.75rem;
}

.si-home-como__intro {
    margin: 0;
    color: var(--si-ardosia-600);
}

.si-home-etapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr));
    gap: 1.375rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style-type: "";
    counter-reset: si-home-etapa;
}

.si-home-etapa {
    display: flex;
    flex-direction: column;
    gap: var(--si-esp-2);
    counter-increment: si-home-etapa;
}

/* Número da etapa: círculo azul-marinho com o algarismo em verde claro */
.si-home-etapa::before {
    content: counter(si-home-etapa);
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--si-fs-base);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #6ee7b7;
    background: var(--si-ardosia-800);
    border-radius: 50%;
}

.si-home-etapa__titulo {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--si-ardosia-900);
}

.si-home-etapa__texto {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--si-ardosia-700);
}

.si-home-como__nota {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--si-ardosia-900);
}


/* ---------- 5. Avaliação gratuita (bloco escuro) ---------- */
.si-home-avaliacao { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3rem); }

.si-home-avaliacao .si-home-selo { margin-bottom: 1.5rem; }

.si-home-avaliacao__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 3rem;
    align-items: start;
}

.si-home-avaliacao__texto {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.si-home-avaliacao__titulo {
    margin: 0;
    font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.125rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
}

.si-home-avaliacao__lead {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--si-ardosia-300);
}

.si-home-avaliacao .si-home-acoes { margin-top: 0.375rem; }

/* Os 3 números da avaliação */
.si-home-avaliacao__numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--si-raio-g);
}

.si-home-avaliacao__numero {
    display: flex;
    flex-direction: column;
    gap: var(--si-esp-1);
    padding: 1.375rem 0.375rem;
    text-align: center;
}

.si-home-avaliacao__numero + .si-home-avaliacao__numero { border-left: 1px solid rgba(148, 163, 184, 0.2); }

/* 22 px em 390 ("Grátis" cabe na coluna sem quebrar a palavra) a 32 px */
.si-home-avaliacao__valor {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    overflow-wrap: normal;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--si-verde-acao);
}

.si-home-avaliacao__valor small {
    font-size: 0.47em;
    font-weight: 700;
}

.si-home-avaliacao__legenda {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--si-ardosia-300);
}

.si-home-avaliacao__nota {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.875rem 1.125rem;
    font-size: 0.8125rem;
    color: var(--si-ardosia-300);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

@media (min-width: 576px) {
    .si-home-avaliacao__numero { padding-inline: 0.75rem; }
}

@media (min-width: 992px) {
    .si-home-avaliacao__grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}


/* ---------- 6. Faixa final de contato (card branco) ---------- */
.si-home-contato__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 2.5rem;
    align-items: center;
}

.si-home-contato__titulo {
    margin-bottom: 0.375rem;
    font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
}

.si-home-contato__frase {
    margin: 0;
    color: var(--si-ardosia-600);
}

.si-home-contato__frase a {
    font-weight: 600;
    color: var(--si-ardosia-900);
}

.si-home-contato__frase a:hover { color: var(--si-vermelho); }

@media (min-width: 992px) {
    .si-home-contato__grade { grid-template-columns: minmax(0, 1fr) auto; }
}