/* PCiLAB Landing v0.5 — secções novas (shortcodes em inc/secoes.php).
   Ficheiro à parte do landing.css de propósito: o que é v0.5 fica separado do que é herdado, e
   reverter é apagar uma linha do enqueue em vez de desfazer edições no meio de 200 linhas.
   Prefixo `pcl-` para não colidir com as classes de blocos do WordPress nem com as `pcilab-`.
   As variáveis (--azul, --linha, --raio…) vêm do landing.css, que carrega antes. */

.pcl-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.pcl-kick{font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--azul);margin:0 0 8px}
.pcl-lead{font-size:17px;color:var(--cinza);line-height:1.6}
.pcl-fundo{background:var(--fundo)}

/* ───────── Selector de tipificação (hero) ───────── */
.pcl-sel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pcl-sel button{background:#fff;border:1.5px solid #dbe5f0;border-radius:100px;padding:9px 16px;
  font-size:13.5px;font-weight:700;color:var(--cinza);cursor:pointer;transition:.15s;font-family:inherit}
.pcl-sel button:hover{border-color:var(--azul);color:var(--azul)}
.pcl-sel button[aria-selected="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.pcl-folha{background:#fff;border:1px solid var(--linha);border-radius:16px;box-shadow:var(--sombra-f);overflow:hidden}
.pcl-f-topo{background:linear-gradient(135deg,var(--azul),var(--azul-esc));color:#fff;padding:13px 18px;
  display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14.5px}
.pcl-f-topo span:last-child{font-size:12.5px;font-weight:600;opacity:.85}
.pcl-f-chave{background:#E6F1FB;padding:11px 18px;display:flex;justify-content:space-between;align-items:center;
  font-size:13px;border-bottom:1px solid var(--linha)}
.pcl-f-chave span{font-weight:800;color:var(--azul);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.pcl-f-chave b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:var(--tinta)}
.pcl-f-corpo{padding:16px 18px}
.pcl-f-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#98a1aa;margin-top:12px}
.pcl-f-corpo .pcl-f-lbl:first-child{margin-top:0}
.pcl-f-eq{font-size:14.5px;color:var(--tinta);margin-top:3px}
.pcl-f-av{font-size:13.5px;color:var(--cinza);font-style:italic;margin-top:3px;line-height:1.5}
.pcl-f-selo{display:inline-block;margin-top:5px;background:#fff4e5;color:#a05500;font-size:11.5px;
  font-weight:700;padding:4px 12px;border-radius:100px}
.pcl-f-linhas{padding:0 18px 4px}
.pcl-li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;color:var(--cinza);
  padding:9px 0;border-top:1px solid #f2f5f9}
.pcl-li.tot{font-weight:800;color:var(--tinta);font-size:15px;border-top:2px solid var(--linha)}
.pcl-f-rodape{background:#fbfcfe;border-top:1px solid var(--linha);padding:11px 18px;font-size:12px;color:#98a1aa}
.pcl-tip-nota{font-size:12.5px;color:#98a1aa;text-align:center;margin-top:12px}

/* ───────── Planos ─────────
   Alturas iguais mesmo com listas de tamanhos diferentes (pedido dele): a grelha estica os cartões
   e o bloco de botões desce ao fundo com margin-top:auto. */
.pcl-planos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pcl-plano{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:26px 24px;
  display:flex;flex-direction:column;position:relative;box-shadow:var(--sombra)}
.pcl-plano.destaque{border:2px solid var(--azul);box-shadow:var(--sombra-f)}
.pcl-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--azul);color:#fff;
  font-size:11.5px;font-weight:800;padding:5px 15px;border-radius:100px;white-space:nowrap}
.pcl-plano h3{font-size:21px;margin:0 0 5px}
.pcl-desc{font-size:13.5px;color:var(--cinza);min-height:40px;margin:0}
.pcl-preco{font-size:34px;font-weight:800;color:var(--tinta);margin:14px 0 4px;letter-spacing:-.02em}
.pcl-preco span{font-size:15px;font-weight:600;color:var(--cinza)}
.pcl-preco-alt{font-size:20px;font-weight:800;color:var(--azul);margin:16px 0 8px}
.pcl-plano ul{list-style:none;margin:16px 0 0;padding:0;flex:1}
.pcl-plano li{font-size:14px;color:var(--cinza);padding:7px 0 7px 25px;position:relative;line-height:1.45}
.pcl-plano li::before{content:"\2713";position:absolute;left:0;color:var(--verde-cl);font-weight:800}
.pcl-novo{display:inline-block;margin-left:7px;background:#eaf3de;color:#3b6d11;font-size:10px;
  font-weight:800;padding:2px 8px;border-radius:100px;letter-spacing:.04em;vertical-align:middle}
.pcl-plano-acts{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px;align-items:center}
.pcl-plano-acts .wp-block-button__link{width:100%;text-align:center}
.pcl-btn-o{background:#fff !important;color:var(--azul) !important;border:1.5px solid #cfe0f2 !important;box-shadow:none !important}
.pcl-plano.destaque .pcl-btn-o{background:var(--azul) !important;color:#fff !important;border-color:var(--azul) !important}
.pcl-ver-plano{font-size:13px;font-weight:700;color:var(--azul);text-decoration:none}
.pcl-ver-plano:hover{text-decoration:underline}
.pcl-planos-nota{text-align:center;font-size:13px;color:#98a1aa;margin-top:22px}

/* ───────── Página por plano (ecrã inteiro) ───────── */
.pcl-pp{position:fixed;inset:0;background:#fff;z-index:200;overflow-y:auto;display:none}
.pcl-pp.on{display:block}
body.pcl-preso{overflow:hidden}
.pcl-pp-topo{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.pcl-pp-topo .pcl-wrap{display:flex;align-items:center;min-height:60px;gap:14px}
.pcl-voltar{background:none;border:0;color:var(--azul);font-size:14.5px;font-weight:700;cursor:pointer;
  padding:8px 10px;border-radius:8px;font-family:inherit}
.pcl-voltar:hover{background:#E6F1FB}
.pcl-pp-nome-top{margin-left:auto;font-size:13.5px;color:#8a929b}
.pcl-pp-hero{background:linear-gradient(135deg,var(--azul),var(--azul-esc));color:#fff;padding:56px 0 60px}
.pcl-pp-hero h2{font-size:44px;margin:0 0 10px;letter-spacing:-.02em;color:#fff}
.pcl-pp-hero p{font-size:18px;color:#cfe1f5;max-width:640px;margin:0}
.pcl-pp-hero .pcl-kick{color:#bcd9f5}
.pcl-pp-preco{font-size:36px;font-weight:800;margin-top:20px}
.pcl-pp-preco span{font-size:15px;font-weight:600;color:#bcd9f5}
.pcl-pp-preco .pcl-sob{font-size:24px;color:#e8f1fb}
.pcl-pp-cta{margin-top:22px;display:inline-block;background:#fff !important;color:var(--azul) !important}
.pcl-pp-sec{padding:52px 0}
.pcl-pp-sec h3{font-size:28px;margin:0 0 8px}
.pcl-pp-fim{text-align:center;background:var(--fundo)}
.pcl-extra{border-top:1px solid var(--linha);padding:20px 0}
.pcl-extra h4{font-size:18px;margin:0 0 5px}
.pcl-extra p{font-size:14.5px;color:var(--cinza);margin:0;max-width:720px;line-height:1.55}
.pcl-tagnovo{display:inline-block;background:#eaf3de;color:#3b6d11;font-size:10px;font-weight:800;
  padding:2px 9px;border-radius:100px;letter-spacing:.04em;margin-bottom:6px}
.pcl-tab-wrap{overflow-x:auto}
.pcl-comp{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.pcl-comp th{text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#98a1aa}
.pcl-comp th:not(:first-child){text-align:center}
.pcl-comp td{padding:10px 12px;border-top:1px solid var(--linha);color:var(--cinza)}
.pcl-comp td.c{text-align:center;width:110px}
.pcl-comp td.c.s{color:var(--verde-cl);font-weight:800}
.pcl-comp td.c.n{color:#cfd6de}
.pcl-comp tr.dest td{background:#f4f9ff;color:var(--tinta)}

/* ───────── Vídeo ───────── */
.pcl-video{padding:56px 0 8px}
.pcl-video-tit{text-align:center;font-size:30px;letter-spacing:-.01em;margin:0 0 22px}
.pcl-video-cx{max-width:900px;margin:0 auto;border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra-f);background:#000;line-height:0}
.pcl-video-cx video{width:100%;height:auto;display:block}
.pcl-video-nota{text-align:center;font-size:13px;color:#98a1aa;margin-top:14px}

/* ───────── Telemóvel ───────── */
@media(max-width:900px){
  .pcl-planos{grid-template-columns:1fr}
  .pcl-plano.destaque{order:-1}          /* o destacado à frente, em vez de encalhado no meio */
  .pcl-desc{min-height:0}
  .pcl-pp-hero h2{font-size:32px}
  .pcl-pp-hero{padding:40px 0 44px}
  .pcl-pp-sec{padding:38px 0}
  .pcl-sel button{padding:8px 13px;font-size:12.5px}
}

/* ───────── Capturas na página do plano ─────────
   Duas colunas em ecrã largo, uma no telemóvel. A imagem tem sombra e borda para se ler como
   «ecrã da aplicação» e não como ilustração — é a diferença que a legenda promete. */
/* v0.5.4 — de 2 colunas grandes para MINIATURAS + lightbox. As capturas dominavam a página e não
   se liam; agora a secção mostra-se pequena e o clique amplia (mock aprovado 2026-08-25). */
.pcl-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.pcl-shot{margin:0;cursor:zoom-in;border:1px solid var(--linha);border-radius:12px;overflow:hidden;
  background:#fff;box-shadow:0 6px 18px rgba(16,42,74,.05);transition:.16s}
.pcl-shot:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,42,74,.10);border-color:#b5d4f4}
.pcl-shot img{width:100%;height:150px;object-fit:cover;object-position:top;display:block;
  border-bottom:1px solid #eef1f6}
.pcl-shot figcaption{font-size:13px;color:var(--cinza);padding:9px 12px 11px;line-height:1.35}
.pcl-shot figcaption b{display:block;color:var(--tinta);font-size:13.5px}
.pcl-shot .pcl-lupa{float:right;color:#8a93a3;font-size:12px}
@media(max-width:900px){ .pcl-shots{grid-template-columns:1fr 1fr;gap:12px} }

/* Lightbox das capturas (criado por JS, um por página) */
.pcl-lb{position:fixed;inset:0;background:rgba(10,18,35,.90);z-index:99999;display:none;
  align-items:center;justify-content:center;flex-direction:column;padding:34px}
.pcl-lb.pcl-aberto{display:flex}
.pcl-lb img{max-width:min(1200px,92vw);max-height:78vh;border-radius:10px;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pcl-lb-cap{color:#c9d3e2;font-size:15px;margin-top:16px;text-align:center;max-width:760px;line-height:1.5}
.pcl-lb-cap b{color:#fff;display:block;font-size:16.5px;margin-bottom:2px}
.pcl-lb-x{position:absolute;top:18px;right:22px;background:none;border:0;color:#c9d3e2;
  font-size:34px;cursor:pointer;line-height:1;padding:8px}
.pcl-lb-x:hover{color:#fff}
.pcl-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:26px;width:52px;height:52px;
  border-radius:50%;cursor:pointer}
.pcl-lb-nav:hover{background:rgba(255,255,255,.18)}
.pcl-lb-ant{left:26px}.pcl-lb-seg{right:26px}
.pcl-lb-n{position:absolute;bottom:20px;color:#8fa0b8;font-size:13px}
@media(max-width:700px){ .pcl-lb{padding:16px} .pcl-lb-nav{width:42px;height:42px;font-size:22px}
  .pcl-lb-ant{left:8px}.pcl-lb-seg{right:8px} }