/* ============================================================================
   PERSONARE · Central de Ajuda — Tema custom (v1)
   Cole TODO este bloco na aba  Personalizar › CSS  do tema do Zoho Desk.
   Paleta do Clube + Open Sans. Reversível: basta apagar este bloco.
   Feito sobre as classes reais que a central renderiza (jul/2026).
   ============================================================================ */

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

:root{
  --pn-bg:#F3F2F9;          /* fundo geral       */
  --pn-surface:#FFFFFF;     /* cards/containers  */
  --pn-ink:#14142D;         /* texto principal   */
  --pn-muted:#5A5F73;       /* texto secundário  */
  --pn-border:#E5E3F0;      /* bordas            */
  --pn-violet:#9B00CD;      /* identidade        */
  --pn-violet-strong:#7C00A4;
  --pn-magenta:#DC00B4;
  --pn-cta:#FF3246;
  --pn-nebula:#6A2A5C;      /* magenta do hero (canto)   */
  --pn-hero-angle:118deg;   /* ângulo do degradê do hero */
  --pn-cosmos-1:#3C0F5F;    /* roxo profundo do hero     */
  --pn-cosmos-2:#14142D;
  --pn-cosmos-3:#0E0E22;
}

/* ---- Tipografia + fundo global -------------------------------------------- */
body, .home, [class*="fontSize_"]{
  font-family:'Open Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif !important;
  background:var(--pn-bg) !important;
  color:var(--pn-ink);
}
h1,h2,h3,h4,.ContentBox__headerMid,.Header__searchTitle{
  font-family:'Open Sans','Segoe UI',system-ui,sans-serif !important;
  letter-spacing:-.01em;
}

/* ---- HERO (faixa "cosmos") ------------------------------------------------- */
.Header__header{
  background:linear-gradient(var(--pn-hero-angle),
             var(--pn-nebula) 0%, var(--pn-cosmos-1) 42%, var(--pn-cosmos-2) 78%, var(--pn-cosmos-3) 100%) !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
/* pontinhos de estrela sutis, só com CSS */
.Header__header::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(240,75,200,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 48%, rgba(216,196,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 70%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 66%, rgba(255,255,255,.6) 50%, transparent 51%);
}
.Header__header > *{ position:relative; z-index:1; }

.Header__name{ color:#FFFFFF !important; font-weight:700 !important; }
/* faixa do topo (navbar) sempre escura — mesma cor do rodapé — p/ o ícone branco aparecer */
.Header__navbar{ background:linear-gradient(var(--pn-hero-angle),
             var(--pn-nebula) 0%, var(--pn-cosmos-1) 42%, var(--pn-cosmos-2) 78%, var(--pn-cosmos-3) 100%) !important; }
.Header__navbar .Icon__icon{ color:#FFFFFF !important; fill:#FFFFFF !important; }

/* Título + subtítulo do hero (edite os textos em content:"…") */
.Header__searchTitle{
  font-size:0 !important; text-transform:none !important; letter-spacing:0 !important;
}
.Header__searchTitle::before{
  content:"Central de Ajuda"; display:block;
  color:#FFFFFF; font-family:'Montserrat','Open Sans',sans-serif;
  font-weight:800; font-size:clamp(28px,4.4vw,46px); line-height:1.15; letter-spacing:.01em;
}
.Header__searchTitle::after{
  content:"Como podemos te ajudar?"; display:block;
  color:rgba(255,255,255,.85); font-family:'Open Sans',sans-serif;
  font-weight:500; font-size:clamp(15px,2vw,20px); line-height:1.4; margin-top:8px; letter-spacing:0;
}
/* navegação superior */
.Header__tabs__link{ color:rgba(255,255,255,.80) !important; transition:color .2s; }
.Header__tabs__link:hover, .Header__active .Header__tabs__link{ color:#FFFFFF !important; }

/* ---- BUSCA ---------------------------------------------------------------- */
.SearchContainer__formGroup{
  background:#FFFFFF !important;
  border-radius:14px !important;
  box-shadow:0 20px 50px -18px rgba(155,0,205,.5) !important;
  border:2px solid transparent !important;
  transition:border-color .2s;
  overflow:hidden;
}
.SearchContainer__formGroup:focus-within{ border-color:var(--pn-violet) !important; }
.Input__headerSearch, input[data-id="searchInput"]{
  font-family:'Open Sans',sans-serif !important;
  font-size:16px !important; color:var(--pn-ink) !important;
  padding:14px 16px !important; background:transparent !important;
}
/* botão de busca: fundo roxo (marca) + LUPA BRANCA para contraste */
.SearchContainer__searchIcon svg, .SearchContainer__searchIcon svg *{ color:#FFFFFF !important; fill:#FFFFFF !important; }

/* ---- Cor da marca (laranja padrão -> roxo Personare) ---------------------- */
.commonStyle__zt3BrandBg,[class*="zt3BrandBg"]{ background:var(--pn-violet) !important; }
.commonStyle__zt3BrandBg:hover,[class*="zt3BrandBg"]:hover{ background:var(--pn-violet-strong) !important; }
.commonStyle__zt3BrandColor,[class*="zt3BrandColor"]{ color:var(--pn-violet) !important; }

/* ---- Título da seção "Base de conhecimento" ------------------------------- */
.ContentBox__headerMid{ color:var(--pn-ink) !important; font-weight:700 !important; }

/* ---- LISTA DE ARTIGOS (cada linha vira um card) --------------------------- */
.ContentList__topicList{
  background:var(--pn-surface) !important;
  border:1px solid var(--pn-border) !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  margin:0 0 10px 0 !important;
  display:flex !important; align-items:center; gap:12px;
  box-shadow:0 8px 22px -14px rgba(60,15,95,.18);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.ContentList__topicList:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--pn-violet) 45%,var(--pn-border)) !important;
  box-shadow:0 14px 30px -14px rgba(155,0,205,.28);
}
.ContentList__documentIcon{ float:none !important; display:flex; align-items:center; }
.ContentList__listIcon, .ContentList__documentIcon svg{ color:var(--pn-magenta) !important; fill:var(--pn-magenta) !important; }
.ContentList__topicContent{ display:block !important; }
.ContentList__listLink, a.ContentList__listLink.commonStyle__zt3Link{
  color:var(--pn-ink) !important; font-weight:500 !important; font-size:15px !important;
  text-decoration:none !important; transition:color .15s;
}
.ContentList__listLink:hover{ color:var(--pn-violet) !important; }

/* ---- Links gerais --------------------------------------------------------- */
.commonStyle__zt3Link{ color:var(--pn-violet) !important; }

/* ---- BOX DE CONTATO (rodapé: "Ainda não conseguiu encontrar uma resposta?") */
.Footer__footerBg{
  background:linear-gradient(118deg,var(--pn-nebula),var(--pn-cosmos-1) 55%,var(--pn-cosmos-2)) !important;
  max-width:1040px; margin:30px auto !important;
  border-radius:18px !important; padding:34px 28px !important;
  box-shadow:0 24px 60px -28px rgba(60,15,95,.5) !important;
}
.Footer__footerInfo{ gap:14px !important; }
.Footer__footerBg *{ color:rgba(255,255,255,.88); }
/* textos do box de contato (edite em content:"…") */
.Footer__footerQus{ font-size:0 !important; }
.Footer__footerQus::after{
  content:"Prefere falar com a gente?"; display:block;
  color:#FFFFFF; font-family:'Montserrat','Open Sans',sans-serif;
  font-weight:800; font-size:clamp(20px,2.6vw,28px);
}
.Footer__footerDescription{ font-size:0 !important; }
.Footer__footerDescription::after{
  content:"Envie uma mensagem e retornaremos por e-mail";
  font-size:14px; color:rgba(255,255,255,.88); font-family:'Open Sans',sans-serif;
}
.Footer__footerBtn button{ font-size:0 !important; }
.Footer__footerBtn button::after{
  content:"Enviar mensagem"; font-size:14px; font-weight:700;
  color:var(--pn-violet); font-family:'Open Sans',sans-serif;
}
/* o <a> só embrulha o botão — sem fundo próprio; o branco fica só no <button> */
.Footer__footerBg a{ background:transparent !important; padding:0 !important; box-shadow:none !important; border-radius:0 !important; }
.Footer__footerBg button, .Footer__footerBg .Button__footerBtn, .Footer__footerBg .zcb-button{
  background:#FFFFFF !important; color:var(--pn-violet) !important; border:0 !important;
  border-radius:10px !important; font-weight:700 !important; padding:12px 26px !important;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.35) !important; transition:transform .15s;
}
.Footer__footerBg button:hover, .Footer__footerBg a:hover button{ transform:translateY(-2px) !important; }

/* ===========================================================================
   PÁGINA "ENVIAR UM TICKET" (newticket) — mesmo padrão do FAQ
   =========================================================================== */
.Layout__layout1{ background:var(--pn-bg) !important; }
form:has(.TicketFormLeftContainer__formTitle){
  background:var(--pn-surface) !important; border:1px solid var(--pn-border) !important;
  border-radius:16px !important; padding:28px !important;
  box-shadow:0 14px 34px -20px rgba(60,15,95,.22) !important;
  max-width:860px !important; margin:26px auto !important;
}
.TicketFormLeftContainer__formTitle{
  color:var(--pn-ink) !important; font-family:'Montserrat','Open Sans',sans-serif !important;
  font-weight:800 !important; font-size:clamp(20px,2.4vw,26px) !important;
}
.TicketFormLeftContainer__sectionName{ display:none !important; }
.TicketFormLeftContainer__formHeader{ margin-bottom:10px !important; padding-bottom:8px !important; }
form:has(.TicketFormLeftContainer__formTitle) .FormElement__labelStyle{
  color:var(--pn-ink) !important; font-family:'Open Sans',sans-serif !important; font-weight:600 !important;
}
form:has(.TicketFormLeftContainer__formTitle) .Input__formInput,
form:has(.TicketFormLeftContainer__formTitle) .Input__inputCommon,
form:has(.TicketFormLeftContainer__formTitle) textarea,
form:has(.TicketFormLeftContainer__formTitle) select{
  border:1px solid var(--pn-border) !important; border-radius:10px !important;
  background:#FFFFFF !important; font-family:'Open Sans',sans-serif !important;
  transition:border-color .15s, box-shadow .15s;
}
form:has(.TicketFormLeftContainer__formTitle) .Input__formInput:focus,
form:has(.TicketFormLeftContainer__formTitle) .Input__inputCommon:focus,
form:has(.TicketFormLeftContainer__formTitle) textarea:focus,
form:has(.TicketFormLeftContainer__formTitle) select:focus{
  border-color:var(--pn-violet) !important; box-shadow:0 0 0 3px rgba(155,0,205,.15) !important; outline:0 !important;
}
.commonStyle__zt3buttonPrimaryBg, .Button__primary{
  background:var(--pn-violet) !important; border-color:var(--pn-violet) !important;
  border-radius:10px !important; font-weight:700 !important;
}
.commonStyle__zt3buttonPrimaryBg:hover, .Button__primary:hover{ background:var(--pn-violet-strong) !important; }
.commonStyle__zt3buttonPrimaryText{ color:#FFFFFF !important; }
.FileUpload__label, .Field__attachMent{ border-radius:10px !important; }

/* ===========================================================================
   CARDS DE CATEGORIA  (página /kb — Base de Conhecimento)
   Classes reais: .KbCategoryContainer__row > .KbCategory__box
   =========================================================================== */
:root{ --pn-violet-soft:#D9B8EC; }

/* grade dos cards: espaçamento uniforme, cards de altura igual */
.KbCategoryContainer__row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:20px !important;
  align-items:stretch !important;
}

/* o card */
.KbCategory__box{
  background:var(--pn-surface) !important;
  border:1px solid var(--pn-border) !important;
  border-radius:16px !important;
  box-shadow:0 10px 26px -16px rgba(60,15,95,.20) !important;
  padding:22px !important;
  margin:0 !important;
  flex:1 1 280px !important;
  max-width:380px !important;
  position:relative;
  overflow:hidden;
  transition:transform .16s, border-color .16s, box-shadow .16s !important;
}
/* faixa de acento (roxo→magenta) que aparece no hover */
.KbCategory__box::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--pn-violet),var(--pn-magenta));
  opacity:0; transition:opacity .16s;
}
.KbCategory__box:hover{
  transform:translateY(-4px) !important;
  border-color:var(--pn-violet-soft) !important;
  box-shadow:0 20px 40px -18px rgba(155,0,205,.32) !important;
}
.KbCategory__box:hover::before{ opacity:1; }

/* ícone/avatar da categoria */
.KbCategory__avatarPhoto, .KbCategory__avatarPhoto .Avatar__avatar,
.KbCategory__avatarPhoto .Avatar__avatarImg{
  border-radius:12px !important; overflow:hidden;
}

/* título */
.KbCategory__topic{ margin:0 0 6px 0 !important; }
.KbCategory__topic a, .KbCategory__topic a.commonStyle__zt3Link{
  color:var(--pn-ink) !important;
  font-family:'Open Sans',sans-serif !important;
  font-weight:700 !important; font-size:17px !important;
  text-decoration:none !important; transition:color .15s;
}
.KbCategory__box:hover .KbCategory__topic a{ color:var(--pn-violet) !important; }

/* descrição */
.KbCategory__topicContent{
  color:var(--pn-muted) !important;
  font-size:14px !important; line-height:1.5 !important;
  margin-top:4px !important;
}

/* menu "..." (seguir) — de-ênfase para não competir com o conteúdo */
.KbCategory__dottedPopup{ opacity:.3; transition:opacity .15s; }
.KbCategory__box:hover .KbCategory__dottedPopup{ opacity:.65; }

/* ---- Responsivo ----------------------------------------------------------- */
@media (max-width:600px){
  .ContentList__topicList{ padding:12px 14px !important; }
  .KbCategory__box{ flex:1 1 100% !important; max-width:100% !important; padding:18px !important; }
  .KbCategoryContainer__row{ gap:14px !important; }
}

/* ===========================================================================
   CARDS DA PÁGINA INICIAL  (widget HTML personalizado "Explore por categoria")
   O <style> é removido pelo Zoho no widget, então o estilo mora aqui.
   Mira as classes .pnhome-* do HTML do widget.
   =========================================================================== */
/* remove o título "Categorias" do widget e encosta os cards no topo */
.WidgetContainer__contentList:has(.pnhome-wrap) .ListHeader__header2,
.WidgetContainer__boxSplit:has(.pnhome-wrap) .ListHeader__headerContent{ display:none !important; }
.pnhome-wrap{
  font-family:'Open Sans',sans-serif !important;
  max-width:1180px; margin:0 auto 28px; padding:0 16px;
}
.pnhome-title{ font-size:20px !important; font-weight:800 !important; color:var(--pn-ink) !important; letter-spacing:-.01em; margin:0 0 4px !important; }
.pnhome-sub{ font-size:14px !important; color:var(--pn-muted) !important; margin:0 0 18px !important; }
.pnhome-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px !important; }
.pnhome-card{
  position:relative; overflow:hidden; display:block !important;
  background:var(--pn-surface) !important; border:1px solid var(--pn-border) !important;
  border-radius:16px !important; padding:20px !important; text-decoration:none !important;
  box-shadow:0 10px 26px -16px rgba(60,15,95,.20) !important;
  transition:transform .16s, border-color .16s, box-shadow .16s !important;
}
.pnhome-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--pn-violet),var(--pn-magenta)); opacity:0; transition:opacity .16s; }
.pnhome-card:hover{ transform:translateY(-4px) !important; border-color:var(--pn-violet-soft) !important; box-shadow:0 20px 40px -18px rgba(155,0,205,.32) !important; }
.pnhome-card:hover::before{ opacity:1; }
.pnhome-card h3{ margin:0 0 6px !important; font-size:16px !important; font-weight:700 !important; color:var(--pn-ink) !important; display:flex !important; align-items:center; justify-content:space-between; gap:8px; }
.pnhome-card h3 .pnhome-arrow{ color:var(--pn-violet) !important; font-weight:700; transition:transform .16s; flex:0 0 auto; }
.pnhome-card:hover h3{ color:var(--pn-violet) !important; }
.pnhome-card:hover h3 .pnhome-arrow{ transform:translateX(4px); }
.pnhome-card p{ margin:0 !important; font-size:13.5px !important; line-height:1.5 !important; color:var(--pn-muted) !important; }
@media (max-width:980px){ .pnhome-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:600px){ .pnhome-grid{ grid-template-columns:1fr !important; gap:12px !important; } }