/*
Theme Name:        ProvForce Child
Theme URI:         https://provforce.com
Description:       Tema-filho da ProvForce (Espaço Provável LDA) sobre o Astra. Contém todo o design da marca. Editável no Elementor gratuito.
Author:            ProvForce
Template:          astra
Version:           1.2.0
License:           GPL v2 or later
Text Domain:       provforce-child
*/


:root {
  /* Paleta */
  --pf-navy:        #0B2A4A;   /* Azul profundo — marca primária */
  --pf-navy-700:    #123a63;
  --pf-blue:        #1E6FD9;   /* Azul de acção */
  --pf-blue-600:    #1a5fbd;
  --pf-teal:        #10A6A0;   /* Accent secundário */
  --pf-ink:         #16202B;   /* Texto principal */
  --pf-muted:       #5A6B7B;   /* Texto secundário */
  --pf-line:        #E4E9EF;   /* Linhas / bordas */
  --pf-bg:          #FFFFFF;
  --pf-bg-soft:     #F5F8FC;   /* Fundo suave */
  --pf-bg-navy:     #0B2A4A;
  --pf-amber:       #F2A73B;   /* Realce quente pontual */
  --pf-red:         #E4022E;   /* Vermelho de marca (logo + acentos) */
  --pf-white:       #FFFFFF;

  --pf-radius:      14px;
  --pf-radius-sm:   10px;
  --pf-shadow:      0 1px 2px rgba(11,42,74,.06), 0 8px 24px rgba(11,42,74,.06);
  --pf-shadow-lg:   0 12px 40px rgba(11,42,74,.12);

  --pf-max:         1180px;
  --pf-font:        "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--pf-font);
  color: var(--pf-ink);
  background: var(--pf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; color: var(--pf-navy); margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
a  { color: var(--pf-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--pf-max); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pf-teal); margin-bottom: .75rem;
}

.muted { color: var(--pf-muted); }
.center { text-align: center; }
.section { padding: 76px 0; }
.section--soft { background: var(--pf-bg-soft); }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--pf-muted); font-size: 1.08rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .98rem; padding: 13px 24px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; transition: all .18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--pf-blue); color: #fff; }
.btn-primary:hover { background: var(--pf-blue-600); }
.btn-navy { background: var(--pf-navy); color: #fff; }
.btn-navy:hover { background: var(--pf-navy-700); }
.btn-ghost { background: transparent; color: var(--pf-navy); border-color: var(--pf-line); }
.btn-ghost:hover { border-color: var(--pf-navy); background: var(--pf-bg-soft); }
.btn-light { background: #fff; color: var(--pf-navy); }
.btn-light:hover { background: #eef3fa; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pf-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--pf-navy); font-size: 1.15rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--pf-ink); font-weight: 500; font-size: .96rem; }
.nav-links a:hover { color: var(--pf-blue); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--pf-navy); margin: 4px 0; border-radius: 2px; }

/* ---------- Hero (versão antiga — substituída pelo hero dividido escuro) ---------- */
.hero {
  position: relative;
  background: #fff;
  padding: 84px 0 68px;
  text-align: center;
}
.hero-inner { max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.hero h1 span { color: var(--pf-blue); }
.hero-lead { font-size: 1.22rem; color: var(--pf-muted); max-width: 46ch; margin: 18px auto 34px; }
.hero-alt { margin-top: 16px; font-size: .98rem; color: var(--pf-muted); }
.hero-alt a { font-weight: 600; }
.hero-trust { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; color: var(--pf-muted); font-size: .92rem; margin-top: 44px; }
.hero-trust b { color: var(--pf-navy); font-size: 1.6rem; display: block; font-weight: 800; }

/* ---------- Barra de pesquisa ---------- */
.searchbar {
  background: #fff; border: 1px solid var(--pf-line); border-radius: 999px;
  box-shadow: var(--pf-shadow-lg); padding: 8px 8px 8px 8px; display: grid;
  grid-template-columns: 1fr 1fr auto; gap: 6px; margin: 0 auto; max-width: 720px;
}
.searchbar .btn { border-radius: 999px; }
.search-field { display: flex; align-items: center; gap: 10px; padding: 6px 18px; border-radius: 999px; background: var(--pf-bg-soft); }
.search-field svg { width: 18px; height: 18px; color: var(--pf-muted); flex-shrink: 0; }
.search-field input, .search-field select {
  border: 0; background: transparent; font-size: .98rem; font-family: inherit; color: var(--pf-ink);
  width: 100%; outline: none; padding: 8px 0;
}

/* ---------- Grelha de cartões genérica ---------- */
.grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
  padding: 26px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s;
}
.card:hover { box-shadow: var(--pf-shadow); transform: translateY(-3px); border-color: #d4deea; }
.card .ic {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.5rem; background: var(--pf-bg-soft); margin-bottom: 16px;
}
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--pf-muted); font-size: .95rem; margin: 0; }

/* Valor / benefícios */
.value .ic { background: rgba(30,111,217,.10); }

/* Setores — mosaicos com ícone squircle grande */
.sector { display: block; color: inherit; text-align: center; padding: 34px 24px; }
.sector:hover { text-decoration: none; }
.sector .ic {
  width: 84px; height: 84px; border-radius: 26px; margin: 0 auto 18px;
  font-size: 2.4rem; background: rgba(30,111,217,.10); color: var(--pf-blue);
  box-shadow: inset 0 0 0 1px rgba(30,111,217,.08);
}
.sector h3 { margin-bottom: .4rem; }
.sector .arrow { color: var(--pf-blue); font-weight: 700; font-size: .9rem; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* Faixa "envie o CV / receba vagas" (estilo Get job matches) */
.jobmatch {
  background: linear-gradient(160deg, var(--pf-navy) 0%, #10365e 100%);
  border-radius: 24px; padding: 48px; color: #fff; text-align: center;
}
.jobmatch h2 { color: #fff; }
.jobmatch p { color: rgba(255,255,255,.82); max-width: 54ch; margin: 10px auto 24px; }
.jobmatch .btn { margin: 6px; }

/* ---------- Listagem de empregos ---------- */
.jobs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.filters { position: sticky; top: 96px; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 22px; }
.filters h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pf-muted); margin: 18px 0 10px; }
.filters h4:first-child { margin-top: 0; }
.filter-opt { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .93rem; color: var(--pf-ink); cursor: pointer; }
.filter-opt input { accent-color: var(--pf-blue); width: 16px; height: 16px; cursor: pointer; }
.filters .btn { margin-top: 18px; }

.jobs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.jobs-head .count { color: var(--pf-muted); font-size: .95rem; }
.jobs-head .count b { color: var(--pf-navy); }

.job-card {
  background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
  padding: 22px 24px; margin-bottom: 14px; transition: box-shadow .18s, border-color .18s;
  display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center;
}
.job-card:hover { box-shadow: var(--pf-shadow); border-color: #d4deea; }
.job-card .jc-ic { width: 52px; height: 52px; border-radius: 13px; background: var(--pf-bg-soft); display: grid; place-items: center; font-size: 1.4rem; }
.job-card h3 { font-size: 1.1rem; margin: 0 0 4px; }
.job-card .jc-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--pf-muted); font-size: .88rem; margin-top: 8px; }
.job-card .jc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.jc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--pf-bg-soft); color: var(--pf-navy-700); }
.tag--new { background: rgba(16,166,160,.14); color: #0a726d; }
.tag--eu { background: rgba(242,167,59,.16); color: #9a6410; }
.job-card .jc-cta { text-align: right; }
.job-card .jc-cta .sal { font-weight: 800; color: var(--pf-navy); display: block; margin-bottom: 8px; font-size: .98rem; }

.empty { text-align: center; padding: 60px 20px; color: var(--pf-muted); }

/* ---------- Passos / mobilidade ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 4px; }
.step .num {
  width: 44px; height: 44px; border-radius: 12px; background: var(--pf-navy); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; margin-bottom: 16px;
}

/* ---------- Faixa empresas ---------- */
.b2b {
  background: linear-gradient(160deg, var(--pf-navy) 0%, #10365e 100%);
  color: #fff; border-radius: 24px; padding: 56px; display: grid;
  grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
}
.b2b h2 { color: #fff; }
.b2b p { color: rgba(255,255,255,.82); }
.b2b ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b2b li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; }
.b2b li svg { width: 20px; height: 20px; color: var(--pf-teal); flex-shrink: 0; margin-top: 2px; }
.b2b-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 28px; }
.b2b-card .stat { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; }
.b2b-card .stat + p { margin-top: 6px; }
.b2b-card .row { display: flex; gap: 28px; margin-bottom: 22px; }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final .btn { margin: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--pf-navy); color: rgba(255,255,255,.72); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.site-footer p { font-size: .92rem; }
.footer-grid h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: rgba(255,255,255,.72); font-size: .92rem; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .86rem; }

/* ---------- Página interior ---------- */
.page-hero { background: var(--pf-bg-soft); padding: 48px 0; border-bottom: 1px solid var(--pf-line); }
.page-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.page-hero p { color: var(--pf-muted); font-size: 1.05rem; max-width: 60ch; margin: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .b2b { grid-template-columns: 1fr; padding: 40px 30px; }
  .b2b ul { grid-template-columns: 1fr; }
  .jobs-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .nav.open + .mobile-menu { display: block; }
  .searchbar { grid-template-columns: 1fr; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .job-card { grid-template-columns: 1fr; text-align: left; }
  .job-card .jc-cta { text-align: left; }
  .job-card .jc-ic { display: none; }
  .b2b-card .row { flex-direction: column; gap: 16px; }
}

.mobile-menu { display: none; background: #fff; border-bottom: 1px solid var(--pf-line); padding: 12px 24px 20px; }
.mobile-menu a { display: block; padding: 12px 0; color: var(--pf-ink); font-weight: 500; border-bottom: 1px solid var(--pf-line); }
.mobile-menu .btn { width: 100%; margin-top: 14px; }

/* ============================================================
   LAYOUT PRINCIPAL — hero dividido escuro + secções
   ============================================================ */

/* Hero dividido: texto (escuro) à esquerda, imagem à direita */
.hero-split { background: var(--pf-navy); color: #fff; overflow: hidden; }
.hero-split .hs-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 560px; }
.hero-split .hs-text { padding: 88px 56px 88px 0; align-self: center; max-width: 620px; margin-left: auto; }
.hero-split .eyebrow { color: var(--pf-teal); }
.hero-split h1 { color: #fff; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.05; }
.hero-split p { color: rgba(255,255,255,.8); font-size: 1.22rem; max-width: 46ch; margin: 20px 0 32px; }
.hero-split .hs-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-split .hs-photo { position: relative; background: linear-gradient(135deg,#16456f,#0e2f52); }
.hero-split .hs-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-split .hs-photo .ph-note { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.55); font-size: .9rem; text-align: center; padding: 20px; }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: #fff; color: var(--pf-navy); border-color: #fff; }

/* Placeholder de foto reutilizável (squircle) */
.ph {
  background: linear-gradient(135deg, #e3ecf6, #cddcec);
  border-radius: 26px; display: grid; place-items: center;
  color: #7b93ab; font-size: .85rem; text-align: center; padding: 16px; overflow: hidden;
}
.ph img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Cartões de recursos (imagem squircle + título teal + texto) */
.insight-card { display: block; color: inherit; }
.insight-card:hover { text-decoration: none; }
.insight-card .ic-img { aspect-ratio: 4/3; margin-bottom: 16px; }
.insight-card h3 { color: var(--pf-teal); font-size: 1.15rem; margin-bottom: .4rem; }
.insight-card:hover h3 { color: var(--pf-blue); }
.insight-card p { color: var(--pf-muted); font-size: .95rem; margin: 0; }

/* Porquê + estatística grande */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.why .stat-big { font-size: clamp(3rem, 7vw, 5rem); font-weight: 800; color: var(--pf-blue); line-height: 1; }
.why .stat-big + p { color: var(--pf-muted); font-size: 1.1rem; margin-top: 8px; max-width: 34ch; }
.why-left { border-left: 4px solid var(--pf-teal); padding-left: 24px; }

/* Bloco "ajudamos à sua maneira" — ilustração + itens */
.help-way { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.help-way .hw-illus { aspect-ratio: 1/1; }
.hw-item { display: flex; gap: 16px; margin-bottom: 26px; }
.hw-item:last-child { margin-bottom: 0; }
.hw-item .hw-ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(30,111,217,.1); color: var(--pf-blue); display: grid; place-items: center; flex-shrink: 0; }
.hw-item .hw-ic svg { width: 24px; height: 24px; }
.hw-item h3 { font-size: 1.15rem; margin: 2px 0 6px; }
.hw-item p { color: var(--pf-muted); font-size: .96rem; margin: 0; }

/* Talento especializado — separadores por setor */
.spec-tabs { display: flex; gap: 30px; flex-wrap: wrap; border-bottom: 1px solid var(--pf-line); margin-bottom: 34px; }
.spec-tab { background: none; border: 0; padding: 0 0 14px; font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--pf-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.spec-tab[aria-selected="true"] { color: var(--pf-navy); border-bottom-color: var(--pf-teal); }
.spec-panel { display: none; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.spec-panel.is-active { display: grid; }
.spec-panel .sp-titles { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.spec-panel .sp-titles a { color: var(--pf-blue); font-weight: 500; font-size: .98rem; }
.spec-panel .sp-photos { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 14px; }
.spec-panel .sp-photos .ph:first-child { grid-row: span 2; }

/* Testemunhos — carrossel horizontal */
.testi-track { display: flex; gap: 20px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x mandatory; }
.testi-card { flex: 0 0 min(420px, 82%); scroll-snap-align: start; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 32px; box-shadow: var(--pf-shadow); }
.testi-card .quote { font-size: 1.15rem; color: var(--pf-ink); font-style: italic; line-height: 1.55; margin: 0 0 20px; }
.testi-card .who { font-weight: 700; color: var(--pf-navy); font-size: .95rem; }

@media (max-width: 940px) {
  .hero-split .hs-grid { grid-template-columns: 1fr; }
  .hero-split .hs-text { padding: 64px 0 40px; margin: 0; max-width: none; }
  .hero-split .hs-photo { min-height: 300px; }
  .why, .help-way, .spec-panel.is-active { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 620px) {
  .spec-panel .sp-titles { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO BANNER (versão clara com foto emoldurada)
   ============================================================ */
.hero-banner { background: #fff; padding: 72px 0 84px; }
.hb-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.hb-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-blue); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: .82rem; }
.hb-eyebrow svg { width: 18px; height: 18px; }
.hb h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.04; margin: 16px 0 0; color: var(--pf-navy); }
.hb h1 .blue { color: var(--pf-blue); }
.hb-lead { color: var(--pf-muted); font-size: 1.16rem; max-width: 45ch; margin: 22px 0 28px; }
.hb-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 30px; max-width: 520px; }
.hb-check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--pf-ink); font-size: .98rem; }
.hb-check .ck { width: 26px; height: 26px; border-radius: 8px; background: rgba(30,111,217,.12); color: var(--pf-blue); display: grid; place-items: center; flex-shrink: 0; }
.hb-check .ck svg { width: 15px; height: 15px; }
.hb-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hb-media { position: relative; }
.hb-photo { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: var(--pf-shadow-lg); z-index: 1; }
.hb-photo img { width: 100%; height: 100%; object-fit: cover; }
.hb-photo .ph { border-radius: 0; height: 100%; }
.hb-bar { position: absolute; left: -12px; top: 44px; bottom: 70px; width: 7px; border-radius: 7px; background: var(--pf-red); z-index: 2; }
.hb-circle { position: absolute; right: -26px; top: -26px; width: 160px; height: 160px; border: 2px solid rgba(30,111,217,.28); border-radius: 50%; z-index: 0; }
.hb-badge { position: absolute; left: 20px; bottom: 20px; z-index: 3; background: var(--pf-navy); color: #fff; border-radius: 14px; padding: 13px 18px; display: flex; gap: 12px; align-items: center; box-shadow: 0 14px 34px rgba(11,42,74,.3); }
.hb-badge .bd-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--pf-blue); display: grid; place-items: center; flex-shrink: 0; }
.hb-badge .bd-ic svg { width: 22px; height: 22px; color: #fff; }
.hb-badge b { display: block; font-size: 1rem; }
.hb-badge span { font-size: .8rem; color: rgba(255,255,255,.75); }

@media (max-width: 940px) {
  .hb-grid { grid-template-columns: 1fr; gap: 40px; }
  .hb-checks { max-width: none; }
}

/* Logótipo com "P" vermelho (cabeçalho/rodapé) */
.brand .logo-sq { width: 34px; height: 34px; border-radius: 9px; background: var(--pf-red); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; }
.brand .logo-wm { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--pf-navy); }
.brand .logo-wm span { color: var(--pf-blue); }
.site-footer .brand .logo-wm { color: #fff; }


/* ============================================================
   3. FORMULÁRIO DE CONTACTO — [provforce_contact_form]
   ============================================================ */
.pf-form-wrap { max-width: 560px; }
.pf-form-row { margin-bottom: 16px; display: flex; flex-direction: column; }
.pf-form-row label {
  font-weight: 600; font-size: .9rem; color: var(--pf-navy); margin-bottom: 6px;
}
.pf-form-row input,
.pf-form-row textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--pf-line);
  border-radius: var(--pf-radius-sm); font: inherit; color: var(--pf-ink);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.pf-form-row input:focus,
.pf-form-row textarea:focus {
  outline: none; border-color: var(--pf-blue);
  box-shadow: 0 0 0 3px rgba(30,111,217,.14);
}
.pf-form-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pf-blue); color: #fff; font-weight: 600; font-size: 1rem;
  border: 0; padding: 14px 28px; border-radius: 999px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.pf-form-btn:hover { background: var(--pf-blue-600); transform: translateY(-1px); }
.pf-form-note { font-size: .85rem; color: var(--pf-muted); margin-top: 12px; }
.pf-form-flash {
  padding: 13px 16px; border-radius: var(--pf-radius-sm); margin-bottom: 18px; font-size: .95rem;
}
.pf-form-flash--success { background: rgba(16,166,160,.12); color: #0a726d; border: 1px solid rgba(16,166,160,.3); }
.pf-form-flash--error   { background: #fdecec; color: #b3261e; border: 1px solid #f4c7c3; }

/* ============================================================
   4. BOTÕES DE MARCA — reutilizáveis em HTML/Elementor
   ============================================================ */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .98rem; padding: 13px 24px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: all .18s ease;
}
.pf-btn--primary { background: var(--pf-blue); color: #fff; }
.pf-btn--primary:hover { background: var(--pf-blue-600); color: #fff; }
.pf-btn--navy { background: var(--pf-navy); color: #fff; }
.pf-btn--navy:hover { background: var(--pf-navy-700); color: #fff; }

/* ============================================================
   5. CHAT FAQ — assistente virtual (widget flutuante)
   ============================================================ */
.pf-chat-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--pf-blue); color: #fff; box-shadow: 0 10px 30px rgba(11,42,74,.28);
  display: grid; place-items: center; transition: transform .18s, background .18s;
}
.pf-chat-launch:hover { transform: translateY(-2px) scale(1.04); background: var(--pf-blue-600); }
.pf-chat-launch svg { width: 26px; height: 26px; }
.pf-chat-launch .pf-chat-badge {
  position: absolute; top: -3px; right: -3px; background: var(--pf-amber); color: #4a2e05;
  font-size: 11px; font-weight: 800; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
}

.pf-chat-panel {
  position: fixed; right: 22px; bottom: 94px; z-index: 9999;
  width: 340px; max-width: calc(100vw - 44px); max-height: 70vh;
  background: #fff; border: 1px solid var(--pf-line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(11,42,74,.24); display: flex; flex-direction: column;
  overflow: hidden; transform-origin: bottom right;
}
.pf-chat-panel[hidden] { display: none !important; }
.pf-chat-header {
  background: linear-gradient(160deg, var(--pf-navy), #10365e); color: #fff;
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
.pf-chat-header .pf-chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14);
  display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
}
.pf-chat-header b { font-size: .98rem; display: block; }
.pf-chat-header span { font-size: .78rem; color: rgba(255,255,255,.75); }
.pf-chat-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; opacity: .8; }
.pf-chat-close:hover { opacity: 1; }

.pf-chat-body { padding: 16px; overflow-y: auto; background: var(--pf-bg-soft); flex: 1; }
.pf-chat-msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; margin-bottom: 10px; font-size: .9rem; line-height: 1.5; }
.pf-chat-msg--bot  { background: #fff; border: 1px solid var(--pf-line); color: var(--pf-ink); border-bottom-left-radius: 4px; }
.pf-chat-msg--user { background: var(--pf-blue); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.pf-chat-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pf-chat-opt {
  text-align: left; background: #fff; border: 1.5px solid var(--pf-line); color: var(--pf-navy);
  padding: 10px 13px; border-radius: 10px; cursor: pointer; font: inherit; font-size: .88rem;
  font-weight: 500; transition: border-color .15s, background .15s;
}
.pf-chat-opt:hover { border-color: var(--pf-blue); background: rgba(30,111,217,.05); }
.pf-chat-footer { padding: 10px 14px; border-top: 1px solid var(--pf-line); background: #fff; text-align: center; }
.pf-chat-footer a { font-size: .85rem; font-weight: 600; }

@media (max-width: 480px) {
  .pf-chat-panel { right: 12px; left: 12px; bottom: 88px; width: auto; }
  .pf-chat-launch { right: 16px; bottom: 16px; }
}