/* Calculadora de custo real de nuvem pública — só o WIDGET.
   ⚠️ Zero cor, zero fonte e zero botão próprios: tudo sai das variáveis --svc-* do
   `servico-landing.css`, que é a folha das páginas de serviço. Trocar a paleta de lá
   troca esta página junto, que é exatamente o que se quer.
   Os botões reutilizam `.svc-btn`; os blocos reutilizam `.svc-section`. */

/* ÂMBAR — a única cor que esta página acrescenta, e ela é ESCOPADA à página, não entra na
   folha compartilhada. Medida sobre --svc-surface: 11,02:1 (piso 4,5). Serve ao lado
   "nuvem pública" e ao bloco do que NÃO está incluído. */
.svc-page--calculadora {
    --svc-amber: #ffd166;
    /* as imagens seguem o MESMO par das 15 páginas de serviço (--svc-hero-img / --svc-cta-img).
       Declaradas aqui, e não na folha compartilhada, para esta página não tocar em nenhuma outra. */
    --svc-hero-img: url("/assets/img/heroi/calculadora-nuvem.webp");
    --svc-cta-img:  url("/assets/img/products/calculadora-nuvem.webp");
}

.calc-grade { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc-grade > * { min-width: 0; }   /* item de grade nasce com min-width:auto e estoura a coluna */

.calc-painel, .calc-res, .calc-fontes {
    background: var(--svc-surface); border: 1px solid var(--svc-border);
    border-radius: 12px; padding: 26px;
}
.calc-rot {
    color: var(--svc-muted); font-size: 13px; font-weight: 700;
    letter-spacing: 1.7px; text-transform: uppercase; margin: 0 0 18px;
}
.calc-campo { margin-bottom: 16px; }
.calc-campo label { color: var(--svc-heading); display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.calc-campo .calc-pista { color: var(--svc-muted); display: block; font-size: 12.5px; line-height: 1.45; margin-top: 4px; }
.calc-campo input, .calc-campo select {
    background: var(--svc-bg); border: 1px solid var(--svc-border); border-radius: 8px;
    color: var(--svc-heading); font: inherit; font-size: 16px; min-height: 46px;
    padding: 10px 12px; width: 100%;
}
.calc-campo input:focus, .calc-campo select:focus { border-color: var(--svc-green); outline: 3px solid var(--svc-green); outline-offset: 2px; }
.calc-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.calc-perfis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }

/* 🔴 TODO <p> desta página disputa com `.svc-section p { color:… !important; font-size:16px }`
   da folha compartilhada — mesma especificidade e carregada depois. Sem subir a especificidade,
   O NÚMERO GRANDE, que é o conteúdo da peça, sai a 16px. E `render.sh` dá 0 grave: texto pequeno
   e legível não é defeito pela régua dele. Quem pegou foi abrir a captura. */
.svc-page--calculadora .calc-faixa {
    color: var(--svc-heading) !important; font-size: clamp(32px, 6vw, 58px); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.05; margin: 10px 0 8px; min-height: 1.05em;
}
.svc-page--calculadora .calc-ano { color: var(--svc-muted) !important; font-size: 15px; margin: 0; }

.calc-barra { background: var(--svc-bg); border-radius: 10px; display: flex; height: 56px; margin: 28px 0 16px; overflow: hidden; }
.calc-barra i { display: block; height: 100%; transition: width .18s ease; }
#calc-bar-comp { background: var(--svc-green); }
#calc-bar-arm  { background: var(--svc-cyan); }
#calc-bar-sai  { background: var(--svc-amber); }

.calc-legenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.calc-legenda > div { min-width: 0; }
.calc-legenda .calc-chave { align-items: center; color: var(--svc-heading); display: flex; font-size: 14px; font-weight: 600; gap: 8px; }
.calc-legenda .calc-quad { border-radius: 3px; flex: 0 0 auto; height: 12px; width: 12px; }
.calc-legenda .calc-n { color: var(--svc-heading); display: block; font-size: 21px; font-weight: 700; margin-top: 6px; }
.calc-legenda .calc-p { color: var(--svc-muted); font-size: 13px; }

/* leitura honesta — tinta ESCURA sobre o verde, sempre. Branco sobre --svc-green dá 1,62:1 e reprova. */
.svc-page--calculadora .calc-leitura { background: var(--svc-green); border-radius: 12px; margin: 22px 0 0; padding: 26px; }
/* ⚠️ O `!important` aqui RESPONDE a outro, não cria um: a folha compartilhada tem
   `.svc-section p { color: var(--svc-text) !important }`, e `!important` não se vence com
   especificidade. Medido: --svc-text sobre --svc-green dá 1,01:1 — texto invisível.
   É a armadilha nº 2 do método: token de cor != cor efetiva; quem pinta é a cascata inteira. */
.svc-page--calculadora .calc-leitura h3,
.svc-page--calculadora .calc-leitura p { color: var(--svc-bg) !important; }
.svc-page--calculadora .calc-leitura h3 { font-size: clamp(19px, 2.4vw, 25px); letter-spacing: -.01em; margin: 0; min-height: 1.15em; }
.svc-page--calculadora .calc-leitura p { font-size: 16px; font-weight: 500; margin: 10px 0 0; max-width: 62ch; min-height: 3em; }

.calc-naoinclui { border-top: 5px solid var(--svc-amber); }
.calc-naoinclui h3 { color: var(--svc-amber); }
.calc-naoinclui ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 22px; list-style: none; margin: 18px 0 0; padding: 0; }
.calc-naoinclui li { color: var(--svc-heading); font-size: 15px; font-weight: 600; padding-left: 16px; position: relative; }
.calc-naoinclui li::before { background: var(--svc-amber); border-radius: 2px; content: ""; height: 7px; left: 0; position: absolute; top: .62em; width: 7px; }

.calc-fontes table { border-collapse: collapse; font-size: 14.5px; width: 100%; }
.calc-fontes th, .calc-fontes td { border-bottom: 1px solid var(--svc-border); padding: 9px 10px; text-align: left; vertical-align: top; }
.calc-fontes th { color: var(--svc-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.calc-fontes td { color: var(--svc-text); }
.calc-fontes td b { color: var(--svc-heading); }
.calc-tabwrap { -webkit-overflow-scrolling: touch; overflow-x: auto; }
.svc-page--calculadora .calc-conferido { color: var(--svc-amber) !important; font-size: 14.5px; font-weight: 600; margin: 16px 0 0; }

.calc-semjs { border-top: 5px solid var(--svc-amber); margin-top: 22px; }
.calc-semjs h3 { color: var(--svc-amber); }
html.calc-js .calc-semjs { display: none; }

@media (max-width: 991px) { .calc-grade { grid-template-columns: 1fr; } }
/* por ÚLTIMO na folha: com a mesma especificidade, quem vem depois vence */
@media (max-width: 520px) { .calc-dupla { grid-template-columns: 1fr; } .calc-painel, .calc-res, .calc-fontes { padding: 20px; } }

/* o <code> do site e rosa (#e83e8c) e da 4,16:1 sobre --svc-surface: abaixo do piso de 4,5.
   Dentro desta pagina ele usa a tinta do proprio bloco, que ja esta medida. */
.svc-page--calculadora code { color: var(--svc-heading); background: none; font-size: .94em; }

/* os <p> de leitura dos blocos: mesma disputa, mesma resposta */
.svc-page--calculadora .calc-naoinclui > p,
.svc-page--calculadora .calc-semjs > p { color: var(--svc-text) !important; font-size: 16px; max-width: 70ch; }