/* =====================================================================
 * PRODUTOS: /produtos e /produtos/{slug}. Complementa o home.css.
 *
 * As medidas seguem as páginas de produto da referência. Cartão, botão e selo vêm
 * do home.css (.cd, .lift, .spot, .btn-b, .eb); aqui fica só o que existe nestas
 * páginas. Conteúdo em config/produtos.php.
 * ===================================================================== */
:root{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.pg-pd .hd-dd>.hd-l{color:#fff}
.pd{padding:132px 0 88px}
.pd-s{margin-top:64px}
.pd-rot{font-size:12px;line-height:18px;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--t3);margin-bottom:32px}
.pd-rot.is-b{margin-bottom:24px}
.pd-i-q{width:36px;height:36px;border-radius:8px;background:rgba(var(--br-rgb),.1);color:var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ─── Índice ─── */
.pd-idx{padding-top:128px}
.pd-idx .eb{margin-bottom:24px}
.pd-t1{font-weight:500;font-size:36px;line-height:1.05;letter-spacing:-.03em;color:#fff;max-width:42rem;margin-bottom:20px;text-wrap:balance}
.pd-sub{max-width:42rem;font-size:17px;line-height:1.625;color:var(--t2)}
.pd-i{display:grid;gap:16px;margin-top:60px}
.pd-c{display:flex;flex-direction:column;padding:32px}
.pd-c-i{width:48px;height:48px;border-radius:12px;background:rgba(var(--br-rgb),.1);color:var(--br);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--tw)}
.pd-c:hover .pd-c-i{transform:scale(1.08)}
.pd-c-a{position:absolute;top:28px;right:28px;color:var(--t4);transition:color .3s var(--tw),transform .3s var(--tw)}
.pd-c:hover .pd-c-a{color:var(--br);transform:translate(2px,-2px)}
.pd-c h2{font-size:18px;line-height:27px;font-weight:500;color:#fff;margin:24px 0 12px;transition:color .3s var(--tw)}
.pd-c:hover h2{color:var(--br)}
.pd-c p{flex:1;font-size:14px;line-height:22.75px;color:var(--t3)}
.pd-c small{margin-top:20px;font-size:13px;line-height:19.5px;color:rgba(var(--br-rgb),.75);transition:color .2s var(--tw)}
.pd-c:hover small{color:var(--br)}

/* ─── Cabeçalho do produto ─── */
.pd-v{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:19.5px;color:var(--t3);margin-bottom:40px;transition:color .2s var(--tw)}
.pd-v:hover{color:var(--br)}
.pd-hd{display:flex;align-items:flex-start;gap:24px;margin-bottom:32px}
.pd-ic{width:64px;height:64px;border-radius:16px;background:linear-gradient(to bottom right,rgba(var(--br-rgb),.2),rgba(45,212,191,.1));color:var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-hd .eb{margin-bottom:20px}
.pd-t2{font-weight:500;font-size:30px;line-height:1.1;letter-spacing:-.03em;color:#fff;margin-top:8px;text-wrap:balance}
.pd-lead{max-width:48rem;font-size:17px;line-height:1.625;color:var(--t2);margin-bottom:24px}
.pd-corpo{max-width:48rem;font-size:15px;line-height:1.625;color:var(--t3)}
.pd-n{display:flex;align-items:flex-start;gap:12px;max-width:48rem;margin-top:24px;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);font-size:14px;line-height:22px;color:var(--t2)}
.pd-n svg{color:var(--br);margin-top:2px}
.pd-n a{color:var(--br);text-decoration:underline;text-underline-offset:3px}

/* ─── Painéis ilustrativos ─── */
.pd-g{display:grid;gap:14px}
.pd-co{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-co>.pd-p{flex:1}
.pd-p{padding:24px;min-width:0}
.pd-p .cd-top{margin-bottom:14px}
.pd-p .cd-pill{color:var(--br);background:rgba(var(--br-rgb),.1)}
.pd-b+.pd-b{margin-top:22px}
.pd-l{display:flex;flex-direction:column;gap:8px}
.pd-r{display:flex;align-items:center;gap:12px;min-width:0;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12px;line-height:18px;color:var(--t2)}
.pd-r>span{flex:1;min-width:0}
.pd-r>b{font-weight:500;color:#fff;text-align:right}
.pd-r>code,.pd-r>em{font-family:var(--mono);font-size:11px;letter-spacing:0;overflow-wrap:anywhere}
.pd-r>code{flex:1;min-width:0;color:#fff}
.pd-r>em{color:var(--br);text-align:right}
.pd-r>small{font-family:var(--mono);font-size:10px;letter-spacing:0;color:var(--t3);white-space:nowrap}
.pd-d{width:7px;height:7px;border-radius:50%;background:var(--t4);flex-shrink:0}
.pd-d.is-ok{background:var(--br)}
.pd-met{min-width:42px;padding:2px 6px 1px;border-radius:6px;font-size:10px;line-height:15px;font-weight:600;text-align:center;letter-spacing:.04em;background:rgba(var(--br-rgb),.1);color:var(--br);flex-shrink:0}
.pd-met.is-p{background:rgba(45,212,191,.1);color:var(--tl)}
.pd-ti{display:flex;flex-direction:column}
.pd-ti b{font-weight:500;color:#fff}
.pd-ti small{font-size:11px;line-height:16px;color:var(--t3)}
.pd-r .pd-i-q{width:30px;height:30px}
.pd-cod{margin:12px 0 0;padding:14px;border-radius:12px;background:#0b0b0b;border:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:11px;line-height:18px;letter-spacing:0;color:var(--t2);overflow-x:auto;white-space:pre}
.pd-cod.is-v{background:rgba(var(--br-rgb),.05);border-color:rgba(var(--br-rgb),.18);color:var(--br);white-space:pre-wrap;overflow-wrap:anywhere}
.pd-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 2px 0;font-size:13px;color:var(--t3)}
.pd-tot b{font-family:var(--mono);font-size:17px;letter-spacing:0;font-weight:500;color:#fff}
.pd-ch{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:12px}
.pd-ch span{padding:7px 6px 6px;text-align:center;border-radius:8px;border:1px solid rgba(255,255,255,.07);font-size:11px;line-height:16px;color:var(--t3)}
.pd-ch .on{border-color:rgba(var(--br-rgb),.3);background:rgba(var(--br-rgb),.08);color:var(--br)}
.pd-bt{margin-top:12px;padding:11px 12px 10px;border-radius:10px;background:var(--br);color:var(--on-br);text-align:center;font-size:13px;line-height:19px;font-weight:600}
.pd-qr{display:block;width:128px;height:128px;margin:0 auto 18px;padding:10px;border-radius:12px;background:#fff}
.pd-qr svg{width:100%;height:100%}
.pd-bar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:12px;line-height:18px;color:var(--t3)}
.pd-bar+.pd-bar{margin-top:14px}
.pd-bar b{font-family:var(--mono);font-size:11px;letter-spacing:0;font-weight:500;color:#fff}
.pd-bar i{grid-column:1/-1;display:block;height:4px;border-radius:9999px;background:rgba(255,255,255,.06);overflow:hidden}
.pd-bar i::after{content:"";display:block;height:100%;width:var(--v);border-radius:9999px;background:var(--grad);transform-origin:left;transition:transform 1s var(--ease) .2s}
.js .pd-bar i::after{transform:scaleX(0)}
.is-in .pd-bar i::after{transform:none}

/* ─── Quanto custa ─── */
.pd-pr{position:relative;border-radius:28px;padding:1px;overflow:hidden}
.pd-pr::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(var(--br-rgb),.55),transparent 30%,transparent 70%,rgba(var(--br-rgb),.55));animation:pd-gira 9s linear infinite}
@keyframes pd-gira{to{transform:rotate(360deg)}}
.pd-pr-c{position:relative;border-radius:27px;padding:32px 24px;background:radial-gradient(620px 320px at 88% 0,rgba(var(--br-rgb),.08),transparent 70%),#0b0b0b}
.pd-pr .eb{margin-bottom:14px}
.pd-pr h2{font-size:32px;line-height:1.1;letter-spacing:-.03em;font-weight:500;color:#fff;margin-bottom:8px}
.pd-pr-s{font-size:14px;line-height:21px;color:var(--t3)}
.pd-pg{display:grid;gap:12px;margin-top:28px}
.pd-pc{padding:24px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.pd-pc small{display:block;font-size:13px;line-height:19.5px;color:var(--t2);margin-bottom:12px}
.pd-pc b{display:block;font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.02em;color:var(--br)}
.pd-pc span{display:block;margin-top:4px;font-size:12px;line-height:18px;color:var(--t3)}
.pd-pr-n{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;line-height:18px;color:var(--t3)}

/* ─── Funcionalidades ─── */
.pd-f{display:grid;gap:16px}
.pd-fi{display:flex;align-items:flex-start;gap:12px;padding:20px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:14px;line-height:22px;font-weight:500;color:var(--t1);transition:border-color .3s var(--tw),background .3s var(--tw)}
.pd-fi:hover{border-color:rgba(var(--br-rgb),.2);background:rgba(255,255,255,.05)}
.pd-fi i{width:24px;height:24px;border-radius:8px;background:rgba(var(--br-rgb),.1);color:var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ─── Chamada e demais produtos ─── */
.pd-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px;padding:32px;border-radius:20px;background:var(--sf);border:1px solid rgba(255,255,255,.07)}
.pd-cta h2{font-size:20px;line-height:28px;font-weight:600;color:#fff;margin-bottom:6px}
.pd-cta p{font-size:14px;line-height:21px;color:var(--t3)}
.pd-cta .btn-b{flex-shrink:0}
.pd-t{display:grid;gap:12px}
.pd-ta{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:14px;line-height:21px;color:var(--t2);transition:border-color .3s var(--tw),background .3s var(--tw),color .3s var(--tw)}
.pd-ta b{font-weight:400}
.pd-ta:hover{border-color:rgba(var(--br-rgb),.2);background:rgba(255,255,255,.05);color:#fff}

/* Mesma correção de tinta do home.css: a maiúscula da Metropolis sobe na caixa de linha. */
.pd-v span,.pd-fi>span,.pd-ta>b,.pd-r>span,.pd-r>b,.pd-ti b{position:relative;top:1px}

@media (min-width:640px){
  .pd-f,.pd-t,.pd-i{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-cta{flex-direction:row;align-items:center}
}
@media (min-width:768px){
  .pd-t1{font-size:60px;line-height:60px}
  .pd-sub{font-size:19px;line-height:1.625}
  .pd-t2{font-size:48px;line-height:1}
  .pd-lead{font-size:19px}
  .pd-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-g.is-l{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .pd-cta{padding:40px}
  .pd-pr-c{padding:40px}
  .pd-pg{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column}
}
@media (min-width:1024px){
  .pd-t2{font-size:60px}
  .pd-f,.pd-t,.pd-i{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .pd-pr::before{animation:none}
}