/* Paginas de suporte e ferramentas gratis (/ferramentas e /ferramentas/*), 2026-10-19.
   Partilhado pela pagina principal e pelas paginas de cada teste. */
:root { --vermelho: #c1121f; --verde: #10b981; --ambar: #f59e0b; --azul: #667eea; --fundo: #1e293b; --cartao: rgba(148,163,184,.1); --borda: rgba(148,163,184,.2); --texto: #e2e8f0; --suave: #94a3b8; }
.ft-page { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ft-page h1, .ft-page h2, .ft-page h3, .ft-page h4 { color: #f1f5f9; }
.ft-page p, .ft-page li { color: var(--texto); }
.ft-page a { color: #f1f5f9; }

.ft-hero { text-align: center; padding: 60px 0 28px; }
.ft-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.35); border-radius: 100px; font-size: 13px; font-weight: 500; color: #34d399; margin-bottom: 20px; }
.ft-hero h1 { font-size: clamp(28px,5vw,46px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.ft-hero h1 span { background: linear-gradient(135deg,#c1121f,#667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ft-hero p { font-size: 17px; color: var(--suave) !important; max-width: 640px; margin: 0 auto; line-height: 1.6; }

.ft-confianca { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin: 4px 0 8px; }
.ft-confianca span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #cbd5e1; }
.ft-confianca i { color: var(--vermelho); }
.ft-mais-loja { margin: 10px 0 0 !important; font-size: 14px; color: var(--suave) !important; }
.ft-mais-loja a { color: #34d399 !important; font-weight: 600; }
.ft-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 44px; }
.ft-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; background: var(--cartao); border: 1px solid var(--borda); color: #f1f5f9; text-decoration: none; font-size: 14px; font-weight: 500; transition: background .2s, transform .2s; }
.ft-nav a:hover { background: rgba(148,163,184,.2); transform: translateY(-2px); }
.ft-nav a i { color: var(--vermelho); }

.ft-sec-titulo { font-size: 26px; font-weight: 800; margin: 12px 0 8px; display: flex; align-items: center; gap: 12px; }
.ft-sec-sub { color: var(--suave) !important; margin-bottom: 24px; font-size: 15px; line-height: 1.6; }

/* 2026-10-19: cada teste num banner proprio (faixa de cor no topo + corpo), a pedido do Ruben */
.ft-card { background: rgba(15,23,42,.38); border: 1px solid var(--borda); border-radius: 24px; padding: 0; margin-bottom: 44px; overflow: hidden; scroll-margin-top: 110px; box-shadow: 0 24px 48px -28px rgba(0,0,0,.7); }
.ft-card.destaque { border-color: rgba(193,18,31,.45); }
.ft-card-cab { display: flex; align-items: center; gap: 14px; margin: 0; padding: 20px 28px; flex-wrap: wrap; background: linear-gradient(135deg, var(--cor1,#334155), var(--cor2,#1e293b)); }
.ft-card-corpo { padding: 24px 28px 28px; }
.ft-icone { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.ft-card-cab .ft-icone { background: rgba(255,255,255,.18) !important; }
.ft-card-cab h3 { font-size: 22px; font-weight: 700; margin: 0; color: #fff !important; }
.ft-card-cab .ft-tag { margin-left: auto; padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: rgba(0,0,0,.25); color: #fff; }
.ft-card p { line-height: 1.6; font-size: 15px; }
.ft-card .ft-nota { color: var(--suave) !important; font-size: 13px; }

.ft-aviso { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 14px 18px; margin: 14px 0; font-size: 14px; line-height: 1.55; color: var(--texto); }
.ft-aviso i { font-size: 18px; margin-top: 2px; }
.ft-aviso p, .ft-aviso div { margin: 0; font-size: 14px; }
.ft-aviso.ambar { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); }
.ft-aviso.ambar i, .ft-aviso.ambar strong { color: #fbbf24; }
.ft-aviso.azul { background: rgba(102,126,234,.12); border: 1px solid rgba(102,126,234,.4); }
.ft-aviso.azul i, .ft-aviso.azul strong { color: #a5b4fc; }
.ft-aviso.vermelho { background: rgba(193,18,31,.14); border: 1px solid rgba(193,18,31,.45); }
.ft-aviso.vermelho i, .ft-aviso.vermelho strong { color: #ff8a8a; }

.ft-passos { counter-reset: passo; list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.ft-passos li { counter-increment: passo; position: relative; padding-left: 44px; line-height: 1.55; font-size: 15px; }
.ft-passos li::before { content: counter(passo); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: rgba(16,185,129,.2); color: var(--verde); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s, background .2s; font-family: inherit; }
.ft-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.ft-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ft-btn.principal { background: linear-gradient(135deg,#c1121f,#780000); color: #fff !important; }
.ft-btn.verde { background: linear-gradient(135deg,#10b981,#047857); color: #fff !important; }
.ft-btn.whatsapp { background: linear-gradient(135deg,#25D366,#128C7E); color: #fff !important; }
.ft-btn.neutro { background: #334155; color: #e2e8f0 !important; border: 1px solid #475569; }
.ft-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
/* 2026-10-19: pedido do Ruben, a assistencia remota a "piscar" no topo para se encontrar logo */
.ft-btn.remota-pulsar { background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff !important; animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.75); transform: scale(1); }
    50% { box-shadow: 0 0 0 12px rgba(124,58,237,0); transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .ft-btn.remota-pulsar { animation: none; } }

/* Pergunta final de cada teste */
.ft-pergunta { margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: rgba(15,23,42,.55); border: 1px solid var(--borda); }
.ft-pergunta > p { font-weight: 600; font-size: 16px; margin: 0 0 12px; color: #f1f5f9; }
.ft-pergunta .ft-sn { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-pergunta .ft-sn button { min-width: 110px; }
.ft-pergunta .ft-sn button.escolhido { outline: 2px solid #f1f5f9; outline-offset: 2px; }
.ft-resultado { display: none; margin-top: 16px; padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.6; }
.ft-resultado.mostrar { display: block; animation: aparecer .25s ease; }
.ft-resultado.sim { background: rgba(193,18,31,.14); border: 1px solid rgba(193,18,31,.45); }
.ft-resultado.nao { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.4); }
.ft-resultado p { margin: 0 0 8px; }
.ft-resultado .ft-botoes { margin-bottom: 4px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Comandos: vista rapida pelo Gamepad API */
.gp-area { display: none; margin-top: 16px; }
.gp-area.mostrar { display: block; }
.gp-sticks { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.gp-stick { text-align: center; }
.gp-circulo { width: 140px; height: 140px; border-radius: 50%; border: 2px solid #475569; position: relative; background: radial-gradient(circle, rgba(16,185,129,.18) 0 10%, rgba(15,23,42,.6) 10.5%); }
.gp-ponto { width: 16px; height: 16px; border-radius: 50%; background: var(--vermelho); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 10px rgba(193,18,31,.8); }
.gp-valor { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--suave); margin-top: 8px; }
.gp-valor.fora { color: #ff8a8a; font-weight: 700; }
.gp-botoes { display: flex; flex-wrap: wrap; gap: 6px; max-width: 420px; }
.gp-b { min-width: 38px; padding: 6px 8px; border-radius: 8px; background: #334155; color: #cbd5e1; font-size: 12px; text-align: center; font-family: ui-monospace, Consolas, monospace; }
.gp-b.on { background: var(--verde); color: #fff; }

/* Teclado */
.kb-zona { margin-top: 14px; padding: 16px; border-radius: 16px; background: rgba(15,23,42,.6); border: 2px dashed #475569; outline: none; cursor: pointer; overflow-x: auto; }
.kb-zona.activa { border-color: var(--verde); border-style: solid; }
.kb-estado { font-size: 14px; color: var(--suave); margin-bottom: 12px; }
.kb-estado strong { color: #f1f5f9; }
.kb-teclado { display: inline-flex; gap: 18px; min-width: 100%; }
.kb-bloco { display: flex; flex-direction: column; gap: 5px; }
.kb-linha { display: flex; gap: 5px; }
.kb-tecla { height: 38px; min-width: 38px; padding: 0 6px; border-radius: 7px; background: #334155; color: #e2e8f0; font-size: 12px; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid #1e293b; user-select: none; white-space: nowrap; transition: background .1s; }
.kb-tecla.premida { background: #f59e0b; color: #111; }
.kb-tecla.ok { background: #059669; color: #fff; }
.kb-vazio { visibility: hidden; }
.kb-extra { margin-top: 10px; font-size: 13px; color: var(--suave); }

/* Ecra */
#ecraTela { position: fixed; inset: 0; z-index: 99999; display: none; cursor: pointer; }
#ecraTela.mostrar { display: block; }
#ecraDica { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 15px; transition: opacity .6s; text-align: center; max-width: 90vw; }
.ecra-cores { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.ecra-cores span { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #475569; }

/* Som / microfone / webcam */
.ft-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mic-barra { height: 18px; border-radius: 9px; background: #0f172a; border: 1px solid #475569; overflow: hidden; margin: 12px 0 6px; }
.mic-nivel { height: 100%; width: 0; background: linear-gradient(90deg,#10b981,#f59e0b,#c1121f); transition: width .08s; }
.ft-info { font-size: 13px; color: var(--suave); font-family: ui-monospace, Consolas, monospace; word-break: break-word; }
.cam-video { width: 100%; max-width: 560px; aspect-ratio: 16/9; background: #0f172a; border-radius: 14px; border: 1px solid #475569; display: block; margin: 12px 0; object-fit: contain; }

/* Programas */
.pg-grupo { margin-bottom: 36px; background: rgba(15,23,42,.38); border: 1px solid var(--borda); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(0,0,0,.7); }
.pg-grupo h3 { font-size: 19px; font-weight: 700; margin: 0; padding: 16px 24px; display: flex; align-items: center; gap: 10px; color: #fff !important; background: linear-gradient(135deg, var(--cor1,#334155), var(--cor2,#1e293b)); }
.pg-corpo { padding: 22px 24px 24px; }
.pg-grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.pg-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; }
.pg-cartao h4 { font-size: 17px; margin: 0 0 6px; }
.pg-cartao .pg-quando { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.pg-cartao .pg-loja { font-size: 13px; line-height: 1.55; color: #fca5a5 !important; margin: 0 0 14px; }
.pg-cartao .pg-loja i { margin-right: 4px; }
.pg-cartao .ft-btn { margin-top: auto; align-self: flex-start; padding: 10px 16px; font-size: 14px; }
.pg-cartao .pg-selo { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: 100px; background: rgba(16,185,129,.18); color: #34d399; margin-bottom: 10px; align-self: flex-start; }

.ft-ajuda { text-align: center; padding: 40px 28px; background: var(--cartao); border-radius: 24px; border: 1px solid var(--borda); margin: 10px 0 60px; }
.ft-ajuda h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.ft-ajuda p { color: var(--suave) !important; max-width: 620px; margin: 0 auto 20px; line-height: 1.6; }
.ft-ajuda .ft-botoes { justify-content: center; }
.ft-credito { font-size: 12px; color: #64748b !important; text-align: center; margin: -40px 0 50px; line-height: 1.6; }
.ft-credito a { color: #94a3b8 !important; }

@media (max-width: 768px) {
    .ft-dois { grid-template-columns: 1fr; }
    .ft-card-cab { padding: 16px 20px; }
    .ft-card-corpo, .pg-corpo { padding: 20px; }
    .ft-card-cab .ft-tag { margin-left: 0; }
    .ft-botoes .ft-btn { width: 100%; }
    .gp-circulo { width: 120px; height: 120px; }
}

/* Paginas de cada teste (/ferramentas/<slug>), 2026-10-19 */
.ft-migalhas { padding-top: 24px; font-size: 13px; color: var(--suave); }
.ft-migalhas a { color: #cbd5e1 !important; text-decoration: none; }
.ft-migalhas a:hover { text-decoration: underline; }
.ft-migalhas span { color: var(--suave); }
.ft-h2-cab { font-size: 22px; font-weight: 700; margin: 0; color: #fff !important; }
.ft-faq { border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 10px; background: rgba(148,163,184,.06); }
.ft-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: #f1f5f9; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ft-faq summary::-webkit-details-marker { display: none; }
.ft-faq summary::after { content: '+'; color: var(--suave); font-size: 20px; line-height: 1; }
.ft-faq[open] summary::after { content: '−'; }
.ft-faq p { padding: 0 18px 16px; margin: 0; color: #cbd5e1 !important; line-height: 1.6; font-size: 15px; }
.ft-outros { text-align: center; margin: 10px 0 44px; }
.ft-outros h2 { font-size: 22px; font-weight: 800; }
.ft-guia { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: #a5b4fc !important; text-decoration: none; }
.ft-guia:hover { text-decoration: underline; }