/* Calculadora Detailer — aba Início (prefixo .in-) */

.in-raiz { padding-top: 8px; }

/* ---------- saudação ---------- */
.in-ola { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.in-ola-rotulo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.in-ola-rotulo .ms { font-size: 16px; }
.in-ola-txt { margin: 8px 0 0; max-width: 60ch; font-size: 14.5px; }
.in-ola-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- guia de primeiros passos ---------- */
.in-guia { padding: 20px 22px; animation: in-surgir .5s var(--ease) backwards; }
.in-guia-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.in-guia-cab .titulo-sm { margin-top: 6px; }
.in-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: passo; }
.in-passo-btn {
  width: 100%; height: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 16px; border-radius: var(--r-3);
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--borda);
  color: var(--texto); transition: border-color .2s var(--ease), transform .3s var(--mola), background .2s var(--ease);
}
:root[data-tema="claro"] .in-passo-btn { background: rgba(255, 255, 255, 0.6); }
.in-passo-btn:hover { border-color: var(--laranja); transform: translateY(-2px); }
.in-passo-n {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font: 800 17px/1 var(--f-mono); color: var(--texto-no-laranja);
  background: var(--grad-laranja); box-shadow: 0 8px 20px -8px var(--laranja-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.in-passo-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.in-passo-txt b { font: 700 14px/1.3 var(--f-titulo); text-transform: uppercase; letter-spacing: .01em; }
.in-passo-txt > span:not(.in-passo-st) { font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.in-passo-st { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--laranja-claro); }
.in-passo-st .ms { font-size: 14px; }
.in-passo.feito .in-passo-btn { border-color: rgba(61, 220, 151, 0.3); }
.in-passo.feito .in-passo-n { background: var(--ok-suave); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.in-passo.feito .in-passo-st { color: var(--ok); }
.in-passo.feito .in-passo-txt b { text-decoration: line-through; text-decoration-color: var(--ok); text-decoration-thickness: 2px; }

/* ---------- 4 cards grandes ---------- */
.in-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; perspective: 1400px; }
.in-card {
  --in-cor: var(--laranja);
  --in-cor-suave: var(--laranja-suave);
  --in-cor-texto: var(--in-cor);   /* cor usada em TEXTO (a do laranja segue a cor personalizada legível) */
  --in-cor-sobre: #fff;            /* texto/ícone em cima da cor cheia */
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 300px; padding: 22px 20px 20px; text-align: left; color: var(--texto);
  border-radius: var(--r-4); border: 1px solid var(--borda);
  background:
    radial-gradient(120% 70% at 0% 0%, var(--in-cor-suave), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    var(--vidro);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--sombra-1);
  animation: in-surgir .55s var(--ease) backwards;
}
.in-card:nth-child(2) { animation-delay: .06s; }
.in-card:nth-child(3) { animation-delay: .12s; }
.in-card:nth-child(4) { animation-delay: .18s; }
.in-card:hover { border-color: color-mix(in srgb, var(--in-cor) 45%, transparent); box-shadow: var(--sombra-2), 0 30px 60px -30px var(--in-cor); }
.in-card:focus-visible { outline: 2px solid var(--in-cor); outline-offset: 3px; }
.in-cor-laranja { --in-cor: var(--laranja); --in-cor-suave: var(--laranja-suave); --in-cor-texto: var(--laranja-claro); --in-cor-sobre: var(--texto-no-laranja); }
.in-cor-ambar { --in-cor: var(--ambar-forte); --in-cor-suave: rgba(238, 152, 0, 0.16); }
.in-cor-ok { --in-cor: var(--ok); --in-cor-suave: rgba(61, 220, 151, 0.13); }
.in-cor-ciano { --in-cor: var(--ciano); --in-cor-suave: rgba(56, 189, 248, 0.14); }
:root[data-tema="claro"] .in-cor-ciano { --in-cor: #0B7DB5; }

/* luz de fundo que respira no canto (recortada por fora, pra o card não perder o 3D) */
.in-card-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.in-card-luz {
  position: absolute; width: 220px; height: 220px; right: -90px; bottom: -110px; border-radius: 50%;
  background: var(--in-cor); opacity: .16; filter: blur(50px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.in-card:hover .in-card-luz { opacity: .32; transform: scale(1.2); }

.in-card-topo { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 6px; }
.in-card-ico {
  position: relative; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: var(--in-cor-sobre);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--in-cor) 70%, #fff), var(--in-cor) 60%, color-mix(in srgb, var(--in-cor) 70%, #000));
  box-shadow: 0 16px 34px -12px var(--in-cor), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 -6px 12px rgba(0, 0, 0, 0.18) inset;
}
.in-card-ico::after { /* brilho em volta */
  content: ''; position: absolute; inset: -10px; border-radius: 24px; z-index: -1;
  background: var(--in-cor); opacity: .28; filter: blur(16px);
}
.in-card-ico .ms { font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.in-card-num { font-size: 12px; color: var(--texto-3); }
.in-card-nome { font: 900 21px/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: -0.01em; }
.in-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.in-card-stat { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--borda); }
.in-stat-grande { font-size: 13.5px; color: var(--texto-2); line-height: 1.35; }
.in-stat-grande b { font: 800 22px/1 var(--f-mono); color: var(--texto); letter-spacing: -0.02em; }
.in-card-stat .in-stat-grande b:first-child { color: color-mix(in srgb, var(--in-cor-texto) 75%, var(--texto)); }
.in-stat-sub { font: 600 11px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); }
.in-stat-sub b { color: var(--texto-2); }
.in-mini-barra { height: 8px; width: 100%; }
.in-card-ir {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--in-cor-texto);
}
.in-card-ir .ms { font-size: 16px; transition: transform .3s var(--mola); }
.in-card:hover .in-card-ir .ms { transform: translateX(4px); }

/* ---------- parte de baixo ---------- */
.in-resumo-grade .stat { padding: 14px 16px; }
.in-top-ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.in-top-item {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 12px 12px 10px; border-radius: var(--r-2);
  background: rgba(0, 0, 0, 0.2); border: 1px solid var(--borda); color: var(--texto);
  transition: border-color .2s var(--ease), transform .25s var(--mola);
}
:root[data-tema="claro"] .in-top-item { background: rgba(255, 255, 255, 0.6); }
.in-top-item:hover { border-color: var(--laranja); transform: translateX(3px); }
.in-top-pos {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: var(--laranja-suave); color: var(--laranja-claro);
}
.in-top-ol li:first-child .in-top-pos { background: var(--grad-laranja); color: var(--texto-no-laranja); box-shadow: 0 6px 16px -6px var(--laranja-glow); }
.in-top-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.in-top-nome { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.in-top-meta { font-size: 12px; color: var(--texto-3); }
.in-top-preco { font-weight: 800; font-size: 15px; color: var(--laranja-claro); white-space: nowrap; }
.in-top-seta { color: var(--texto-3); }
.in-vazio { padding: 22px 16px; }
.in-vazio span { font-size: 13px; }

@keyframes in-surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .in-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-card { min-height: 260px; }
}
@media (max-width: 860px) {
  .in-passos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .in-cards { grid-template-columns: 1fr; gap: 12px; }
  .in-card { min-height: 0; padding: 18px 16px 16px; }
  .in-card-ico { width: 52px; height: 52px; border-radius: 15px; }
  .in-card-ico .ms { font-size: 27px; }
  .in-card-nome { font-size: 19px; }
  .in-guia { padding: 16px; }
  .in-guia-cab .btn { width: 100%; }
  .in-top-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}