/* Telemóvel interativo da conta de trás para a frente — componente partilhado (/comunidade, /calculadora).
   Mudar aqui muda em todas as páginas. Comportamento em calc-demo.js. */
.calc-sec{padding-top:0}
.calc{display:grid;gap:clamp(28px,5vw,64px);align-items:center;grid-template-columns:1fr;padding:clamp(22px,4vw,44px);border-radius:var(--radius-lg);background:radial-gradient(60% 80% at 85% 50%,color-mix(in srgb,var(--dourado) 14%,transparent),transparent 70%),var(--bg-2);border:1px solid color-mix(in srgb,var(--dourado) 30%,transparent)}
@media(min-width:900px){.calc{grid-template-columns:1.15fr .85fr}}
.calc-txt{display:flex;flex-direction:column;gap:16px}
.calc-txt .eyebrow{color:var(--dourado)}
.campos{display:grid;gap:14px;margin-top:6px}
.campo{display:grid;gap:7px}
.campo>span{font-size:.86rem;font-weight:700}
.campo small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}
.inp{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px}
.inp output{min-width:96px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg)}
.inp input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--dourado) var(--p,50%),#2c2a25 var(--p,50%));outline:none;cursor:pointer}
.inp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);border:4px solid var(--dourado);box-shadow:0 4px 12px rgba(0,0,0,.5);transition:transform .15s}
.inp input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:4px solid var(--dourado)}
.inp input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.inp input[type=range]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dourado) 40%,transparent)}
.calc-nota{font-size:.76rem;color:var(--muted);line-height:1.45}
.calc-txt .btn{align-self:flex-start;background:var(--dourado);color:var(--on-acc)}
/* telemóvel */
/* o ecrã do telemóvel é sempre escuro: repõe as cores escuras cá dentro (o resto da página está em tema claro) */
.tel{--fg:#F3EEE3;--muted:#A99F8C;--line:#2C2821;--bg:#0B0B0A;color:var(--fg)}
.tel-linhas b{color:#F3EEE3}
.tel-head b,.tel-status{color:#F3EEE3}
.calc-tel{display:grid;place-items:center}
.tel{width:min(100%,280px);aspect-ratio:9/18.5;border-radius:44px;padding:9px;background:linear-gradient(145deg,#6b665c,#2a2722 30%,#47433b 55%,#1c1a17 80%,#55504a);box-shadow:0 50px 90px -40px #000,0 0 80px -30px color-mix(in srgb,var(--dourado) 60%,transparent),inset 0 0 0 1px rgba(255,255,255,.12);transform:rotate(-3deg)}
.tel-ecra{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(120% 55% at 50% 0%,color-mix(in srgb,var(--dourado) 18%,transparent),transparent 60%),#0b0b0a}
.tel-ecra::before{content:"";position:absolute;left:50%;top:9px;width:84px;height:22px;border-radius:999px;background:#000;transform:translateX(-50%)}
.tel-status{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;padding:0 6px 10px}
.tel-ico{display:flex;gap:2px;align-items:flex-end}.tel-ico i{width:3px;background:var(--fg);border-radius:1px}.tel-ico i:nth-child(1){height:5px}.tel-ico i:nth-child(2){height:7px}.tel-ico i:nth-child(3){height:9px}.tel-ico em{width:18px;height:9px;border:1px solid var(--fg);border-radius:3px;margin-left:4px;background:linear-gradient(90deg,var(--fg) 70%,transparent 70%)}
.tel-head{display:flex;align-items:center;gap:10px}.tel-head img{width:34px;height:auto}.tel-head b{display:block;font-size:.95rem}.tel-head small{display:block;font-size:.7rem;color:var(--muted)}
.tel-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tel-big{font-size:clamp(1.9rem,8vw,2.4rem);font-weight:800;letter-spacing:-.03em;color:var(--dourado);font-variant-numeric:tabular-nums;line-height:1;transition:color .3s}
.tel-big.neg{color:#F08A6B}
.tel-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.06)}
.tel-bar i{display:block;height:100%;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.cb1,.cd1{background:#8a7a5c}.cb2,.cd2{background:#5c6b7a}.cb3,.cd3{background:#8C6B2E}.cb4,.cd4{background:var(--dourado)}
.tel-leg{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:.66rem;color:var(--muted)}.tel-leg span{display:flex;align-items:center;gap:5px}.tel-leg i{width:7px;height:7px;border-radius:50%}
.tel-linhas{display:grid;gap:0;margin-top:2px}
.tel-linhas div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid rgba(255,255,255,.07);font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tel-linhas b{color:var(--fg);font-weight:700}
.tel-ok{margin-top:auto;text-align:center;padding:10px 0;border-radius:12px;font-weight:800;font-size:.8rem;background:color-mix(in srgb,var(--dourado) 16%,transparent);color:var(--dourado);transition:background .3s,color .3s}
.tel-ok.neg{background:color-mix(in srgb,#F08A6B 16%,transparent);color:#F08A6B}
@media (prefers-reduced-motion:no-preference){.tel{animation:telF 6s ease-in-out infinite}@keyframes telF{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}}

/* variante para o topo de página: telemóvel em cima, barras compactas por baixo */
.calc.calc-hero{grid-template-columns:1fr;gap:22px;padding:0;max-width:440px;justify-self:center;width:100%;background:none;border:0;border-radius:0;box-shadow:none}
.calc.calc-hero .campos{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:12px 16px;margin:0}
.calc.calc-hero .campo>span{font-size:.76rem}
.calc.calc-hero .campo small{display:none}
.calc.calc-hero .inp{grid-template-columns:1fr;gap:6px}
.calc.calc-hero .inp output{text-align:left;min-width:0;font-size:.9rem}
.calc-dica{font-size:.74rem;color:var(--muted);text-align:center;margin:-6px 0 0}

/* modo "lucro" (/calculadora): linha com % e ROI e a parte do lucro a verde, como na calculadora paga */
.tel-sub{font-size:.74rem;font-weight:700;color:#22E07A;margin-top:-2px}
.cb4.lucro,.cd4.lucro{background:#22E07A}