/* PCiLAB Landing v0.12.0 — portas com fotografia + «Do balcão à factura» em três cartões.
   Crítica de um parceiro: os cartões em gradiente com o círculo no canto e a grelha de 12 cartões com
   emoji tinham «ar de IA». A resposta é mostrar o ofício (fotografia) e o produto (capturas reais),
   não enfeites. Ficheiro à parte, como o v05/v07: reverter é tirar uma linha do enqueue.
   As variáveis (--azul, --linha, --tinta, --cinza…) vêm do landing.css; cada porta traz --pc. */

/* ───────── Três portas (home) ───────── */
.pcl-portas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcl-porta{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-radius:12px;
  overflow:hidden;color:var(--tinta);text-decoration:none;transition:border-color .18s,box-shadow .18s}
.pcl-porta:hover{border-color:var(--pc);box-shadow:var(--sombra)}
.pcl-porta-foto{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#dfe5ec}
.pcl-porta-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcl-porta:hover .pcl-porta-foto img{transform:scale(1.03)}
.pcl-porta-corpo{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 22px}
.pcl-porta.tem-foto .pcl-porta-corpo{border-top:3px solid var(--pc)}
.pcl-porta-k{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pc)}
.pcl-porta-t{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.pcl-porta-p{font-size:15px;line-height:1.55;color:var(--cinza)}
.pcl-porta-a{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:800;color:var(--pc)}

/* ───────── A peça da app pousada na imagem ─────────
   Sempre no canto de baixo à esquerda, e nunca passa de metade da foto: do meio para a direita está
   a pessoa (no telemóvel o cartão estreita, e uma largura mínima fixa punha a peça em cima dela). */
.pcl-peca{position:absolute;left:14px;bottom:14px;z-index:1;display:flex;gap:9px;align-items:center;max-width:48%;
  background:#fff;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.26);padding:9px 12px;
  font-size:11.5px;line-height:1.3;color:var(--tinta);text-align:left}
.pcl-peca b{display:block;font-size:12.5px;font-weight:800}
.pcl-peca small{display:block;color:var(--cinza);font-size:10.5px}
.pcl-peca-etiqueta{padding:7px 10px 7px 7px;border:1px solid #d9dee5;transform:rotate(-2.5deg);max-width:60%}
.pcl-qr{flex:none;width:42px;height:42px}
.pcl-peca-ok i{flex:none;width:26px;height:26px;border-radius:7px;background:#1f8a43;color:#fff;font-style:normal;font-weight:900;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.pcl-peca-ok{max-width:80%}
.pcl-peca-ordem{display:block;border-left:4px solid #b8336a;border-radius:4px 10px 10px 4px}
.pcl-peca-sms{display:block;left:auto;right:14px;max-width:80%;border-radius:14px 14px 14px 4px;background:#e9f6ec;border:1px solid #cde9d3}

/* ───────── «Do balcão à factura» — três cartões pela ordem do trabalho ───────── */
.pcl-fus{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.pcl-fu{display:flex;flex-direction:column;gap:24px;background:#fff;border:1px solid var(--linha);border-radius:16px;padding:28px 24px;overflow:hidden}
.pcl-fu-num{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.pcl-fu-num b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--azul);font-size:12px;letter-spacing:0}
.pcl-fu h3{margin:0 0 20px;font-size:22px;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.pcl-fu-lst{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pcl-fu-lst li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin:0}
.pcl-ic{width:22px;height:22px;margin-top:1px;stroke:var(--azul);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pcl-fu-lst b{display:block;font-size:15px;line-height:1.3;margin-bottom:2px}
.pcl-fu-lst li>span>span{display:block;font-size:13.5px;line-height:1.45;color:var(--cinza)}
/* o lado da imagem: fundo da marca, a captura numa moldura de janela e a peça da app por cima */
.pcl-fu-img{position:relative;margin-top:auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#eaf2fb,#f6f9fd);border-radius:12px;padding:18px 14px 64px}
.pcl-janela{width:100%;background:#fff;border-radius:10px;box-shadow:0 18px 44px rgba(16,42,76,.16);overflow:hidden;border:1px solid #dde5ee}
/* a barra da janela com os três pontos (três gradientes, sem elementos a mais no HTML) */
.pcl-janela i{display:block;height:24px;background-color:#f1f4f8;border-bottom:1px solid #e3e8ef;
  background-image:radial-gradient(circle,#cfd6df 3.5px,transparent 4px),radial-gradient(circle,#cfd6df 3.5px,transparent 4px),radial-gradient(circle,#cfd6df 3.5px,transparent 4px);
  background-position:6px 50%,20px 50%,34px 50%;background-size:14px 24px;background-repeat:no-repeat}
/* todas com a mesma proporção, para os cartões alinharem; a captura enche a partir do canto de cima
   à esquerda (onde está o que interessa ler) */
.pcl-janela img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;object-position:left top}
/* a página do cliente é de telemóvel: mostra-se INTEIRA, centrada, com o fundo do portal dos lados */
.pcl-janela.inteira img{object-fit:contain;object-position:center;background:#f3f5f7}

/* ───────── Responsivo ───────── */
@media(max-width:900px){
  .pcl-portas,.pcl-fus{grid-template-columns:1fr}
  .pcl-fu{padding:24px 18px}
  .pcl-fu h3{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .pcl-porta,.pcl-porta-foto img{transition:none}
  .pcl-porta:hover .pcl-porta-foto img{transform:none}
}

/* ───────── v0.12.1 — Páginas das portas: o topo com a fotografia de fundo ─────────
   A fotografia da porta (a do cartão em que a pessoa clicou) cobre a faixa; um véu na cor escura da
   porta escurece o lado do texto e deixa ver a foto do outro lado — como a capa da página pública. */
.pcl-pg-hero.tem-foto{position:relative;overflow:hidden;padding:0;min-height:460px;display:flex;align-items:center;background:rgb(var(--rgb))}
.pcl-pg-hero-bg{position:absolute;inset:0;background-size:cover;background-position:right center}
.pcl-pg-hero.tem-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgb(var(--rgb)/.96) 0%,rgb(var(--rgb)/.90) 36%,rgb(var(--rgb)/.45) 62%,rgb(var(--rgb)/.06) 100%)}
.pcl-pg-hero.tem-foto .pcl-wrap{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:72px}
.pcl-pg-hero-txt{max-width:560px}
.pcl-pg-hero.tem-foto .pcl-kick{display:inline-block;background:#fff;color:var(--pc);padding:6px 13px;border-radius:100px;font-size:12px;margin-bottom:16px}
.pcl-pg-hero.tem-foto h1{text-shadow:0 2px 18px rgba(0,0,0,.25)}
.pcl-pg-hero.tem-foto .pcl-pg-lead{text-shadow:0 1px 10px rgba(0,0,0,.3)}
/* a peça da app sobre a fotografia, do lado onde ela se vê */
.pcl-peca-hero{left:auto;right:max(24px,calc((100% - 1140px)/2 + 24px));bottom:28px;z-index:3;max-width:min(320px,80%)}

/* ───────── v0.12.1 — Blocos: a captura em miniatura, amplia ao clicar ───────── */
.pcl-bloco{grid-template-columns:1.1fr .9fr}
.pcl-bloco-mini{cursor:zoom-in;line-height:normal;transition:transform .16s,box-shadow .16s}
.pcl-bloco-mini:hover{transform:translateY(-2px);box-shadow:var(--sombra-f)}
.pcl-bloco-mini:focus-visible{outline:3px solid var(--pc);outline-offset:3px}
.pcl-bloco-mini img{height:220px;object-fit:cover;object-position:top}
.pcl-bloco-mini figcaption{font-size:12.5px;color:var(--cinza);padding:8px 12px;border-top:1px solid #eef1f6}

@media(max-width:900px){
  .pcl-pg-hero.tem-foto{min-height:0}
  .pcl-pg-hero.tem-foto::after{background:linear-gradient(180deg,rgb(var(--rgb)/.94) 0%,rgb(var(--rgb)/.86) 60%,rgb(var(--rgb)/.72) 100%)}
  .pcl-pg-hero.tem-foto .pcl-wrap{padding-top:44px;padding-bottom:96px}
  .pcl-peca-hero{right:16px;bottom:18px}
  .pcl-bloco{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.pcl-bloco-mini{transition:none}.pcl-bloco-mini:hover{transform:none}}

/* ───────── v0.12.2 — Página de cada plano: o topo com a fotografia e o véu azul ─────────
   Como as páginas das portas. A fotografia combina com o plano (Essencial = o balcão · Pro = a
   equipa a aprovar orçamentos · Premium = stock e compras); a classe .tem-foto liga-se no JS. */
.pcl-pp.tem-foto .pcl-pp-hero{position:relative;overflow:hidden;background:#123f8a;padding:72px 0}
.pcl-pp-hero-bg{display:none}
.pcl-pp.tem-foto .pcl-pp-hero-bg{display:block;position:absolute;inset:0;background-size:cover;background-position:right center}
.pcl-pp.tem-foto .pcl-pp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgb(18 63 138/.96) 0%,rgb(18 63 138/.90) 38%,rgb(18 63 138/.45) 64%,rgb(18 63 138/.08) 100%)}
.pcl-pp.tem-foto .pcl-pp-hero .pcl-wrap{position:relative;z-index:2}
.pcl-pp.tem-foto .pcl-pp-hero .pcl-kick{display:inline-block;background:#fff;color:var(--azul);padding:6px 13px;border-radius:100px;font-size:12px}
.pcl-pp.tem-foto .pcl-pp-hero h2{text-shadow:0 2px 18px rgba(0,0,0,.25)}
.pcl-pp-preco s{font-size:20px;font-weight:700;color:#bcd9f5;margin-right:8px}
@media(max-width:900px){
  .pcl-pp.tem-foto .pcl-pp-hero{padding:48px 0}
  .pcl-pp.tem-foto .pcl-pp-hero::after{background:linear-gradient(180deg,rgb(18 63 138/.92) 0%,rgb(18 63 138/.84) 100%)}
}

/* ───────── v0.12.3 — Faixa final «Experimente 30 dias»: a fotografia com o véu azul ─────────
   Só muda o FUNDO (era o azul liso em gradiente). O título, o aviso, o formulário e o «ou ligue»
   ficam iguais. Na página inicial, o atelier; nas páginas das portas, a fotografia dessa porta
   (--cta-foto, posta no <section> por pcilab_landing_sc_porta). */
.pcilab-cta{background:linear-gradient(180deg,rgb(18 63 138/.88),rgb(18 63 138/.94)),var(--cta-foto,url('portas/personalizados.webp')) center 35%/cover no-repeat,#123f8a}