/* ============================================================
   CALCULADORA DE AMBIENTES (funil) — tela única
   ============================================================ */

/* ── Topo escuro (auto-contido; esta página não carrega catalogo.css) ── */
.funil-topo {
  background:var(--grad-escuro); color:#fff; position:relative; overflow:hidden;
  padding:clamp(28px,5vw,52px) 0 clamp(36px,6vw,64px);
}
.funil-topo .dp-container { position:relative; z-index:1; } /* texto acima do círculo decorativo (fix "sombra" no mobile) */
.funil-topo::after {
  content:""; position:absolute; right:-10%; top:-40%;
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle,rgba(59,123,234,.45),transparent 65%); pointer-events:none;
}
.funil-topo .breadcrumb { color:rgba(255,255,255,.6); }
.funil-topo .breadcrumb a:hover, .funil-topo .breadcrumb strong { color:#fff; }
.funil-topo .eyebrow { color:var(--amarelo); }
.funil-topo .eyebrow::before { background:#fff; }
.funil-topo h1 { color:#fff; max-width:18ch; }
.funil-topo-sub { color:rgba(255,255,255,.72); font-size:var(--fs-lead); line-height:1.5; max-width:54ch; margin-top:var(--sp-4); }

/* ── Layout ── */
.funil-grid { display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,36px); align-items:start; }
@media (min-width:960px) {
  .funil-grid { grid-template-columns:minmax(0,1.55fr) minmax(290px,.85fr); }
}
.funil-principal { display:flex; flex-direction:column; gap:clamp(18px,3vw,28px); min-width:0; }

.funil-bloco {
  background:#fff; border:1.5px solid var(--borda); border-radius:var(--r-lg);
  padding:clamp(18px,3vw,26px); box-shadow:var(--sombra-sm);
}
.funil-rotulo {
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4);
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.03em; color:var(--azul-800);
}
.funil-rotulo i {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:26px; height:26px; border-radius:var(--r-full); font-style:normal; font-size:var(--fs-xs);
  background:var(--grad-marca); color:#fff;
}

/* ── Chips de ambiente ── */
.funil-ambientes { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-2); }
.funil-amb {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center;
  padding:var(--sp-4) var(--sp-3); border:1.5px solid var(--borda); border-radius:var(--r);
  background:#fff; color:var(--texto-suave); font-weight:600; font-size:var(--fs-sm);
  transition:transform var(--t), border-color var(--t), color var(--t), background var(--t);
}
.funil-amb svg { color:var(--azul-600); transition:color var(--t); }
.funil-amb:hover { border-color:var(--azul-400); color:var(--azul-700); transform:translateY(-2px); }
.funil-amb-ativo { border-color:var(--azul-800); background:var(--azul-50); color:var(--azul-800); box-shadow:var(--sombra-sm); }
.funil-amb-ativo svg { color:var(--azul-800); }

/* ── Campos (mesma linguagem da calculadora de produto) ── */
.calc-modo-seletor { display:flex; gap:var(--sp-2); padding:var(--sp-1); background:var(--azul-50); border-radius:var(--r-sm); margin-bottom:var(--sp-4); }
.calc-modo-btn { flex:1; padding:var(--sp-3); border-radius:8px; font-weight:700; font-size:var(--fs-sm); color:var(--texto-suave); transition:all var(--t); }
.calc-modo-ativo { background:#fff; color:var(--azul-800); box-shadow:var(--sombra-sm); }
.calc-campos { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.calc-label { display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:700; color:var(--tinta-2); }
.input-wrap { position:relative; display:flex; align-items:center; }
.calc-input {
  width:100%; padding:var(--sp-4) 42px var(--sp-4) var(--sp-4); border:1.5px solid var(--borda); border-radius:var(--r);
  font-size:var(--fs-md); font-weight:600; transition:border-color var(--t), box-shadow var(--t); background:#fff;
}
.calc-input:focus { outline:none; border-color:var(--azul-500); box-shadow:0 0 0 4px var(--azul-100); }
.input-unit { position:absolute; right:var(--sp-4); font-size:var(--fs-sm); font-weight:700; color:var(--texto-suave); pointer-events:none; }
@media (max-width:520px) { .funil-grid .calc-campos { grid-template-columns:1fr; } }

/* ── Diagrama do cômodo ── */
.funil-diagrama {
  margin-top:18px; height:180px; padding:26px 18px 18px; border-radius:var(--r);
  border:1.5px dashed var(--borda);
  background:
    linear-gradient(var(--azul-100) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,var(--azul-100) 1px,transparent 1px) 0 0/22px 22px,
    var(--azul-50);
  display:flex; align-items:center; justify-content:center;
}
.funil-sala {
  position:relative; min-width:64px; min-height:54px; width:46%; height:54%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#fff,var(--azul-50));
  border:2px solid var(--azul-300, #9bbdf0); border-radius:10px; box-shadow:var(--sombra-sm);
  transition:width .28s var(--t-suave), height .28s var(--t-suave), border-color var(--t);
}
.funil-diagrama-on .funil-sala { border-color:var(--azul-600); }
.funil-area-centro { font-family:var(--ff-display); font-weight:800; color:var(--azul-800); font-size:1.1rem; }
.funil-medidas-eco { margin-top:10px; font-size:.84rem; color:var(--texto-suave); font-weight:600; text-align:center; }

/* ── Pisos recomendados ── */
.funil-rec-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.funil-rec-cab .secao-cabecalho p { margin-top:var(--sp-2); font-size:var(--fs-sm); }
.funil-rec { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:clamp(12px,1.6vw,16px); }
.funil-card {
  display:flex; flex-direction:column; text-align:left; overflow:hidden;
  background:var(--superficie); border:1.5px solid var(--borda); border-radius:var(--r-lg); box-shadow:var(--sombra-sm);
  transition:transform var(--t-suave), box-shadow var(--t-suave), border-color var(--t);
}
.funil-card:hover { transform:translateY(-4px); box-shadow:var(--sombra-md); }
.funil-card-ativo { border-color:var(--azul-700); box-shadow:0 0 0 2px var(--azul-700), var(--sombra-md); }
.funil-card-midia { position:relative; aspect-ratio:4/3; background:var(--azul-50); overflow:hidden; }
.funil-card-midia img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--t-suave); }
.funil-card:hover .funil-card-midia img { transform:scale(1.06); }
.funil-card-motivo {
  position:absolute; left:10px; top:10px; max-width:calc(100% - 20px); z-index:2;
  font-size:.66rem; font-weight:800; letter-spacing:.02em; padding:5px 9px; border-radius:7px;
  background:rgba(10,61,145,.92); color:#fff; backdrop-filter:blur(4px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* corpo flexível: nome reserva 2 linhas, preço/CTA ancorados embaixo → cards alinhados */
.funil-card-corpo { flex:1; padding:var(--sp-3) var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1); }
.funil-card-nome { font-size:var(--fs-base); font-weight:700; line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.funil-card-sub { font-size:var(--fs-xs); color:var(--texto-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.funil-card-preco { margin-top:auto; padding-top:var(--sp-3); }
.funil-card-atual { font-family:var(--ff-display); font-weight:800; color:var(--azul-800); font-size:var(--fs-h3); letter-spacing:-.01em; }
.funil-card-atual small { font-size:var(--fs-2xs); font-weight:700; color:var(--texto-suave); }
.funil-card-cta {
  margin-top:var(--sp-3); display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-weight:700; font-size:var(--fs-sm); padding:var(--sp-3); border-radius:var(--r-sm);
  background:var(--azul-100); color:var(--azul-800); transition:background var(--t), color var(--t);
}
.funil-card:hover .funil-card-cta { background:var(--azul-200); }
.funil-card-ativo .funil-card-cta { background:var(--grad-marca); color:#fff; }
.funil-card-cta-ok { display:none; align-items:center; gap:6px; }
.funil-card-ativo .funil-card-cta-sel { display:none; }
.funil-card-ativo .funil-card-cta-ok { display:inline-flex; }

/* ── Painel de estimativa ── */
@media (min-width:960px) { .funil-aside { position:sticky; top:calc(var(--h-header) + 18px); } }
.funil-estimativa {
  background:#fff; border:1.5px solid var(--borda); border-radius:var(--r-lg);
  padding:clamp(18px,3vw,24px); box-shadow:var(--sombra);
}
.funil-est-vazio, .funil-est-instrucao { color:var(--texto-suave); font-size:var(--fs-sm); line-height:1.5; }
.funil-est-instrucao { margin-top:var(--sp-4); }
.funil-mini { display:flex; align-items:center; gap:var(--sp-3); color:inherit; }
.funil-mini img { width:54px; height:54px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--azul-50); }
.funil-mini strong { display:block; font-size:var(--fs-sm); line-height:1.2; }
.funil-mini small { color:var(--texto-suave); font-size:var(--fs-xs); }
.funil-est-linhas { list-style:none; display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-4) 0; padding:var(--sp-4) 0; border-top:1px solid var(--borda); border-bottom:1px solid var(--borda); }
.funil-est-linhas li { display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--tinta-2); }
.funil-est-linhas li small { color:var(--texto-suave); font-weight:600; }
.funil-est-linhas li span:last-child { font-weight:700; white-space:nowrap; color:var(--texto); }
.funil-est-total { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.funil-est-total > span { display:flex; flex-direction:column; font-weight:700; }
.funil-est-total small { font-weight:700; font-size:var(--fs-2xs); color:var(--wa-escuro); text-transform:uppercase; letter-spacing:.05em; }
.funil-est-total strong { font-family:var(--ff-display); font-size:var(--fs-h2); color:var(--azul-800); overflow-wrap:anywhere; min-width:0; }
.funil-est-obs { font-size:var(--fs-2xs); color:var(--texto-suave); margin:var(--sp-3) 0 var(--sp-4); }
#funil-add { margin-bottom:var(--sp-3); }
.funil-add-ok { background:var(--azul-50) !important; color:var(--wa-escuro) !important; box-shadow:inset 0 0 0 1.5px var(--wa) !important; }
.funil-est-ctas { display:flex; flex-direction:column; gap:var(--sp-3); }
.funil-est-link { display:inline-block; margin-top:var(--sp-3); font-weight:700; color:var(--azul-700); font-size:var(--fs-sm); }
.funil-est-link:hover { text-decoration:underline; }