/*!
 * Calculadora dentro do artigo — cartão + popup.
 * Gerado pelo shortcode [calc:slug] (core/helpers.php → cms_calc_card).
 *
 * O cartão vive dentro de #art-body (blog) e de outras views de conteúdo, que
 * estilizam p/b/li por ID. Por isso aqui só existem <span> e <button>: nada
 * que o corpo do artigo consiga sobrescrever — zero !important.
 */

/* ───────────────────────── cartão ───────────────────────── */
.ftpx{
  --ftpx-terra:#DC823E; --ftpx-terra-lt:#F0C9A5; --ftpx-navy:#0D4648;
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:start;
  margin:34px 0; padding:22px 24px; border-radius:20px;
  background:linear-gradient(135deg,#0D4648 0%,#0A3D3F 55%,#062527 100%);
  border:1px solid rgba(220,130,62,.34);
  box-shadow:0 22px 48px -22px rgba(6,37,39,.75);
  position:relative; overflow:hidden; isolation:isolate;
  font-family:inherit; line-height:1.5;
}
.ftpx::after{ /* brilho quente no canto, igual aos cards da home */
  content:''; position:absolute; z-index:-1; inset:auto -40px -70px auto;
  width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle,rgba(220,130,62,.30),transparent 68%);
}
.ftpx__c{ display:block; min-width:0; }
.ftpx__ic{
  grid-row:1 / span 3; width:46px; height:46px; border-radius:14px; flex:none;
  display:grid; place-items:center; font-size:19px; color:var(--ftpx-terra-lt);
  background:rgba(220,130,62,.16); border:1px solid rgba(220,130,62,.30);
}
.ftpx__k{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ftpx-terra-lt); margin-bottom:3px;
}
.ftpx__t{ display:block; font-size:17.5px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.ftpx__d{ display:block; margin-top:5px; font-size:14px; color:#C3D8D6; }
.ftpx__b,
#art-body .ftpx__b{
  grid-column:2; justify-self:start; margin-top:14px;
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px;
  border:0; border-radius:12px; cursor:pointer; font:inherit; font-size:15px; font-weight:800;
  color:#241200; background:linear-gradient(135deg,#E8A15F,#DC823E);
  text-decoration:none;   /* é um <a>: o corpo do artigo sublinha todo link */
  box-shadow:0 10px 22px -10px rgba(220,130,62,.85);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
#art-body .ftpx__b:hover{ color:#241200; text-decoration:none; opacity:1; }
.ftpx__b:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 14px 28px -10px rgba(220,130,62,.95); }
.ftpx__b:active{ transform:translateY(0); }
.ftpx__b:focus-visible{ outline:2px solid #F0C9A5; outline-offset:3px; }
.ftpx__n{
  grid-column:2; display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:10px; font-size:12px; color:#8FAEAD;
}
.ftpx__n i{ color:#2FBE8E; }
@media(max-width:640px){
  .ftpx{ grid-template-columns:1fr; padding:20px; gap:4px; }
  .ftpx__ic{ grid-row:auto; margin-bottom:8px; }
  .ftpx__b,.ftpx__n{ grid-column:1; }
  .ftpx__b{ width:100%; justify-content:center; }
}

/* ───────────────────────── popup ───────────────────────── */
.ftpx-ov{
  position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(6,37,39,.72); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .18s ease;
}
.ftpx-ov.on{ opacity:1; }
.ftpx-mo{
  display:flex; flex-direction:column; margin:auto;   /* centro exato, em qualquer altura */
  width:min(720px,100%); height:min(86vh,920px); height:min(86dvh,920px);
  border-radius:20px; overflow:hidden; background:#F5F1E9;
  border:1px solid rgba(220,130,62,.35); box-shadow:0 40px 90px -30px rgba(0,0,0,.65);
  transform:translateY(14px) scale(.985); transition:transform .18s ease;
}
.ftpx-ov.on .ftpx-mo{ transform:none; }
.ftpx-mo__hd{
  display:flex; align-items:center; gap:12px; flex:none; padding:14px 18px;
  background:linear-gradient(135deg,#0D4648,#0A3D3F); color:#fff;
}
.ftpx-mo__hd i.ico{ color:#F0C9A5; font-size:16px; }
.ftpx-mo__t{ flex:1; min-width:0; font-size:15px; font-weight:800; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ftpx-mo__x{
  flex:none; width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:17px;
  display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.ftpx-mo__x:hover{ background:rgba(255,255,255,.16); }
.ftpx-mo__bd{ position:relative; flex:1; min-height:0; background:#F5F1E9; }
.ftpx-mo__bd iframe{ position:relative; z-index:1; width:100%; height:100%; border:0; display:block; }
.ftpx-mo__ld{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; gap:10px;
  align-content:center; color:#3E5957; font-size:13.5px;
}
.ftpx-mo__ld i{ font-size:22px; color:#DC823E; }
body.ftpx-lock{ overflow:hidden; }
@media(max-width:768px){
  .ftpx-ov{ padding:0; align-items:stretch; }
  /* tela cheia de verdade: dvh acompanha a barra do navegador no celular */
  .ftpx-mo{ width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; border:0; margin:0; }
  .ftpx-mo__hd{ padding:12px 12px 12px 14px; padding-top:max(12px, env(safe-area-inset-top)); }
  .ftpx-mo__t{ font-size:14px; }
  .ftpx-mo__x{ width:40px; height:40px; }   /* alvo de toque confortável */
  .ftpx-mo__bd{ padding-bottom:env(safe-area-inset-bottom); }
}
@media(prefers-reduced-motion:reduce){
  .ftpx-ov,.ftpx-mo,.ftpx__b{ transition:none; }
}