/*
  PAPO PRIS — SEÇÃO "CONVIDADOS" (módulo HubSpot)
  Cole este trecho no campo "CSS" do módulo personalizado.
  Todas as regras estão prefixadas com .pp- para não vazar estilo
  para o resto do tema.
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800;900&display=swap');

.pp-guests-section{
  --pp-blue:#307ae0;
  --pp-navy:#16264a;
  --pp-text-muted:#5b6b8c;
  --pp-border:#e4e9f5;

  padding:44px 24px;
  font-family:'Nunito Sans', system-ui, sans-serif;
  box-sizing:border-box;
}
.pp-guests-section *{ box-sizing:border-box; }
.pp-guests-section img{ max-width:100%; display:block; }

.pp-sec-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
.pp-sec-kicker{
  font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--pp-blue);
  margin-bottom:12px; display:block;
}
.pp-sec-head h2{
  font-family:'Nunito Sans',sans-serif; font-size:30px; font-weight:700;
  color:var(--pp-navy); letter-spacing:-0.01em; margin:0;
}

.pp-guests{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  max-width:760px; margin:0 auto;
}
.pp-guest-card{
  background:#fff; border:1px solid var(--pp-border); border-radius:18px;
  padding:36px 28px; text-align:center;
  box-shadow:0 10px 30px -18px rgba(20,40,90,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pp-guest-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(20,40,90,0.28); }

.pp-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 18px;
  padding:4px;
  background:var(--pp-blue);
  overflow:hidden;
}
.pp-avatar img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; background:#dfe8ff;
}

.pp-guest-card h3{
  font-family:'Nunito Sans',sans-serif; font-size:17px; font-weight:600;
  color:var(--pp-navy); margin:0 0 4px 0;
}
.pp-guest-card .pp-role{ font-size:13.5px; color:var(--pp-text-muted); margin-bottom:16px; }

.pp-li-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--pp-border); color:var(--pp-blue);
  transition:background .15s ease, color .15s ease;
}
.pp-li-btn:hover{ background:var(--pp-blue); color:#fff; border-color:var(--pp-blue); }
.pp-li-btn svg{ width:15px; height:15px; }

@media (max-width:640px){
  .pp-guests{ grid-template-columns:1fr; }
}

<!--
  PAPO PRIS — SEÇÃO "CONVIDADOS" (módulo HubSpot)
  Cole este trecho no campo "HTML" do módulo personalizado.
-->

<section class="pp-guests-section">
  <div class="pp-sec-head">
    <span class="pp-sec-kicker">Convidados</span>
    <h2>Quem estará no Papo Pris</h2>
  </div>

  <div class="pp-guests">

    <div class="pp-guest-card">
      <div class="pp-avatar">
        <img src="https://47850379.fs1.hubspotusercontent-na1.net/hubfs/47850379/vivi.png?width=860&t=1770664053189" alt="Foto de Viviane Mota">
      </div>
      <h3>Viviane Mota</h3>
      <div class="pp-role">Especialista em ILP na Pris</div>
      <a href="https://www.linkedin.com/in/vivianemotamessias/" target="_blank" rel="noopener" class="pp-li-btn">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2 3.75-2 4 0 4.4 2.6 4.4 6v6.3H18v-5.6c0-1.3-.02-3-1.9-3-1.9 0-2.2 1.4-2.2 2.9V21H10V9z"/></svg>
      </a>
    </div>

    <div class="pp-guest-card">
      <div class="pp-avatar">
        <img src="https://47850379.fs1.hubspotusercontent-na1.net/hubfs/47850379/1559191030600.jpg?width=860&t=1787073352649" alt="Foto de Leandro Rangel">
      </div>
      <h3>Leandro Rangel</h3>
      <div class="pp-role">Sócio da Pris</div>
      <a href="https://www.linkedin.com/in/lerangel1979/" target="_blank" rel="noopener" class="pp-li-btn">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2 3.75-2 4 0 4.4 2.6 4.4 6v6.3H18v-5.6c0-1.3-.02-3-1.9-3-1.9 0-2.2 1.4-2.2 2.9V21H10V9z"/></svg>
      </a>
    </div>

  </div>
</section>