/* PORTFÓLIO: página pública (/portfolio/<token>).
   Três templates (Editorial, Clássico, Minimalista; classe pf-tpl-* na
   raiz). O que vem logo abaixo é o Editorial, que é o padrão; os outros
   dois, a paleta escolhida e o painel de personalizar ficam mais pro fim.
   Layout editorial escuro: a foto é uma coluna alta à esquerda que
   desce ao lado da apresentação e da trajetória. À direita, o nome com
   "Sobre mim", e embaixo Educação | Experiência sem cartão, separadas
   por um fio. Na base, três cartões: Competências, Qualidades, Interesses.
   Os neutros são da página (é um documento, não segue o tema de quem
   abre). A cor vem da empresa: o azul de realce puxa pra secundária
   dela, e o detalhe (fios, janelas acesas) é o acento. */
#tela-portfolio{display:none;min-height:100vh}
.pf-raiz{
  --pf-fundo:#050D18;--pf-card:rgba(8,21,37,.75);--pf-card-2:#0B192B;--pf-pill:#0F2238;
  --pf-linha:rgba(120,170,220,.15);--pf-linha-forte:rgba(120,170,220,.28);
  --pf-texto:#F5F7FA;--pf-texto-2:#AAB8C8;--pf-texto-3:#7F8FA3;
  --pf-realce:color-mix(in srgb,var(--cor-secundaria) 28%,#8FBFFF);
  --pf-realce-forte:color-mix(in srgb,var(--cor-secundaria) 45%,#4C8DFF);
  --pf-detalhe:var(--cor-acento);
  --pf-fundo-topo:#07111F;
  --pf-sombra:0 1px 2px rgba(0,0,0,.25),0 18px 40px -28px rgba(0,0,0,.7);
  --pf-sombra-alta:0 2px 4px rgba(0,0,0,.3),0 26px 50px -28px rgba(0,0,0,.85);
  background:var(--pf-fundo);color:var(--pf-texto);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
/* Modo claro: mesmos elementos, neutros claros. O realce vira um azul
   mais fundo (texto azul sobre branco precisa de contraste) e o detalhe
   usa o acento um pouco mais escuro, pro fio não sumir no branco. O
   síndico escolhe o padrão e o visitante alterna pelo botão sol/lua. */
.pf-raiz.pf-claro{
  --pf-fundo:#F7F6F2;--pf-fundo-topo:#EDF1F7;
  --pf-card:rgba(255,255,255,.86);--pf-card-2:#FFFFFF;
  --pf-pill:color-mix(in srgb,var(--cor-secundaria) 7%,#FFFFFF);
  --pf-linha:rgba(15,23,42,.10);--pf-linha-forte:rgba(15,23,42,.2);
  --pf-texto:#0F172A;--pf-texto-2:#475569;--pf-texto-3:#64748B;
  --pf-realce:color-mix(in srgb,var(--cor-secundaria) 55%,#2563EB);
  --pf-realce-forte:color-mix(in srgb,var(--cor-secundaria) 35%,#7DB4FF);
  --pf-detalhe:color-mix(in srgb,var(--cor-acento) 82%,#000);
  --pf-sombra:0 1px 2px rgba(15,23,42,.05),0 16px 36px -24px rgba(15,23,42,.18);
  --pf-sombra-alta:0 2px 4px rgba(15,23,42,.06),0 24px 48px -24px rgba(15,23,42,.26)}
.pf-pub{min-height:100vh;overflow-x:clip;
  background:radial-gradient(900px 520px at 8% 0%,color-mix(in srgb,var(--pf-realce-forte) 16%,transparent),transparent 62%),
    linear-gradient(180deg,var(--pf-fundo-topo) 0%,var(--pf-fundo) 55%)}
/* Sem barra de rolagem visível na página pública, que é pra
   apresentação. A rolagem continua (roda, toque, teclado). Quem põe a
   classe no <html> é o abrirPortfolioPublico, então o resto do sistema
   fica com a barra fina de sempre. */
html.pagina-portfolio,html.pagina-portfolio body{scrollbar-width:none;-ms-overflow-style:none}
html.pagina-portfolio::-webkit-scrollbar,html.pagina-portfolio body::-webkit-scrollbar{display:none}

.pf-moldura{max-width:var(--pf-max);margin:0 auto;padding:0 var(--pf-margem) 36px}
/* Em tela larga a página cresce até 1560px, e o que sobra dos lados é
   fundo. `--pf-sobra` é a distância da borda do conteúdo até a borda da
   tela: a fachada do topo usa isso pra ir até o canto, em vez de parar
   no meio do nada. */
/* O .pf-pub é o container das consultas de largura (@container, não
   @media): assim a mesma página se arruma pela largura que tem de verdade,
   e a prévia do editor, espremida ao lado do painel, sai igual à pública
   nessa largura. */
.pf-pub{container-type:inline-size;--pf-max:1560px;--pf-margem:clamp(16px,3cqw,40px);
  --pf-sobra:calc(max(0px,(100cqw - var(--pf-max)) / 2) + var(--pf-margem))}

/* ── Topo: coluna da foto + lado direito ── */
.pf-topo{display:grid;grid-template-columns:minmax(220px,26%) minmax(0,1fr);position:relative}
/* Sem overflow:hidden: o brilho sai da coluna de propósito, e cortar ele
   na borda deixava uma linha reta à esquerda. Quem segura o que vaza
   pro lado é o overflow-x:clip do .pf-pub. */
.pf-foto{position:relative;min-height:560px;
  /* A foto se dissolve em oval. Foto de estúdio já vem com o fundo
     iluminado, e dois degradês retos cruzados apagavam esse fundo em
     forma de retângulo: a luz da foto virava um quadrado. Com a elipse
     centrada no rosto, a luz some como um brilho. */
  /* Raios de no máximo 50% x 55%: o oval tem que ficar transparente antes
     de chegar em qualquer borda da foto, senão sobra um lado reto. */
  --pf-mascara:radial-gradient(ellipse 50% 55% at 50% 44%,#000 46%,rgba(0,0,0,.5) 72%,transparent 100%)}
.pf-foto::before{content:'';position:absolute;left:-22%;top:-10%;width:136%;height:78%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pf-realce-forte) 58%,transparent) 0%,
    color-mix(in srgb,var(--pf-realce-forte) 22%,transparent) 55%,transparent 100%);filter:blur(24px)}
/* Retrato 4:5 no alto da coluna. Se esticasse a foto (quadrada) até a
   altura toda da coluna, ia ampliar até sobrar só um pedaço do rosto. */
.pf-foto img{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  filter:contrast(1.06) saturate(.92);
  -webkit-mask-image:var(--pf-mascara);mask-image:var(--pf-mascara)}
/* Sem foto: as iniciais grandes e vazadas ocupam o alto da coluna. */
.pf-foto-iniciais{position:absolute;top:90px;left:50%;transform:translateX(-50%);font-family:var(--pf-fonte,var(--fonte-titulo));
  font-size:6.5rem;font-weight:700;letter-spacing:.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--pf-realce)}
.pf-direita{min-width:0;display:flex;flex-direction:column}

/* Linha do nome + "Sobre mim", com a fachada à direita */
.pf-hero-linha{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:40px;padding:56px 12% 34px 40px;border-bottom:1px solid var(--pf-linha)}
.pf-hero-fundo{position:absolute;top:0;bottom:0;right:calc(-1 * var(--pf-sobra));width:calc(36% + var(--pf-sobra));
  overflow:hidden;pointer-events:none;opacity:.55}
.pf-hero-fundo svg{position:absolute;right:0;bottom:0;height:100%;width:auto}
.pf-hero-fundo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--pf-fundo) 0%,color-mix(in srgb,var(--pf-fundo) 45%,transparent) 40%,
    color-mix(in srgb,var(--pf-fundo) 5%,transparent) 100%)}
.pf-hero-id,.pf-sobre{position:relative;z-index:1;min-width:0}
.pf-ola{font-size:.74rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--pf-texto-2);margin-bottom:10px}
.pf-nome{font-family:var(--pf-fonte,var(--fonte-titulo));font-size:clamp(2rem,3.2vw,3rem);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;margin:0;color:var(--pf-texto)}
.pf-nome-realce{color:var(--pf-realce)}
.pf-cargo{margin:12px 0 0;font-size:.76rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--pf-texto-2)}
.pf-filete{width:64px;height:2px;border-radius:2px;background:var(--pf-detalhe);margin:20px 0 18px}
.pf-contatos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.pf-contatos li{display:flex;align-items:center;gap:10px;color:var(--pf-texto-2);min-width:0}
.pf-contatos li span{overflow-wrap:anywhere}
.pf-contatos i{color:var(--pf-detalhe);font-size:.92rem}
.pf-contatos a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s ease}
.pf-contatos a:hover{color:var(--pf-texto);border-bottom-color:var(--pf-realce)}
.pf-sobre h2{font-family:var(--pf-fonte,var(--fonte-titulo));font-size:1.5rem;font-weight:500;margin:0;color:var(--pf-texto);letter-spacing:-.01em}
.pf-sobre .pf-filete{width:56px;height:1px;margin:12px 0 16px}
.pf-sobre p{margin:0;font-size:.92rem;line-height:1.7;color:var(--pf-texto-2);white-space:pre-line}
.pf-sobre p+p{margin-top:10px}

/* Trajetória: Educação | fio | Experiência, sem cartão */
.pf-trajetoria{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.3fr);gap:36px;padding:34px 0 40px 40px}
.pf-trajetoria-unica{grid-template-columns:minmax(0,1fr)}
.pf-divisor{background:var(--pf-linha)}
.pf-secao{min-width:0;animation:pf-entra .3s ease-out both;animation-delay:calc(var(--i,0) * 60ms)}
.pf-secao+.pf-secao{margin-top:30px}
.pf-secao-titulo{position:relative;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--pf-linha);
  font-family:var(--pf-fonte,var(--fonte-titulo));font-size:1.3rem;font-weight:500;color:var(--pf-texto);letter-spacing:-.01em}
.pf-secao-titulo::after{content:'';position:absolute;left:0;bottom:-1px;width:48px;height:1px;background:var(--pf-detalhe)}

/* Linha do tempo (Experiência): fio fino, pontos, data à direita */
.pf-linha-tempo{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.pf-linha-tempo::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(var(--pf-realce),color-mix(in srgb,var(--pf-realce) 25%,transparent))}
.pf-marco{position:relative}
.pf-marco+.pf-marco{margin-top:22px}
.pf-marco::before{content:'';position:absolute;left:-30px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--pf-realce);box-shadow:0 0 0 4px color-mix(in srgb,var(--pf-realce) 16%,transparent)}
/* Educação e certificados: mesma leitura, sem os pontos */
.pf-lista{padding-left:0}
.pf-lista::before,.pf-lista .pf-marco::before{display:none}
.pf-marco-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pf-marco h3{margin:0;font-family:var(--pf-fonte,var(--fonte-titulo));font-size:1.02rem;font-weight:700;color:var(--pf-texto);letter-spacing:-.01em}
.pf-periodo{flex-shrink:0;font-size:.84rem;color:var(--pf-texto-2);font-variant-numeric:tabular-nums}
.pf-org{margin-top:3px;font-size:.9rem;color:var(--pf-realce)}
.pf-resultado{margin:6px 0 0;font-size:.9rem;line-height:1.6;color:var(--pf-texto-2);white-space:pre-line;max-width:60ch}
.pf-marco a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.82rem;color:var(--pf-realce);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s ease}
.pf-marco a:hover{border-bottom-color:var(--pf-realce)}

/* ── Base: três cartões ── */
.pf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.pf-card{position:relative;background:var(--pf-card);border:1px solid var(--pf-linha);border-radius:16px;
  padding:26px 28px 28px;box-shadow:var(--pf-sombra);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  animation:pf-entra .3s ease-out both;animation-delay:calc(var(--i,0) * 60ms)}
.pf-card:hover{transform:translateY(-3px);border-color:var(--pf-linha-forte);
  box-shadow:var(--pf-sombra-alta)}
@keyframes pf-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pf-card-titulo{display:flex;align-items:center;gap:16px;margin:0 0 20px;font-family:var(--pf-fonte,var(--fonte-titulo));
  font-size:1.18rem;font-weight:500;color:var(--pf-texto)}
.pf-card-titulo i{font-size:1.5rem;color:var(--pf-realce)}
.pf-card-titulo span{position:relative;flex:1;padding-bottom:10px;border-bottom:1px solid var(--pf-linha)}
.pf-card-titulo span::after{content:'';position:absolute;left:0;bottom:-1px;width:40px;height:1px;background:var(--pf-detalhe)}
.pf-tags{display:flex;flex-wrap:wrap;gap:10px}
.pf-tag{padding:7px 16px;border-radius:999px;font-size:.86rem;line-height:1.3;color:var(--pf-texto);
  background:var(--pf-pill);border:1px solid color-mix(in srgb,var(--pf-realce) 26%,transparent);
  transition:border-color .25s ease}
.pf-tag:hover{border-color:color-mix(in srgb,var(--pf-realce) 60%,transparent)}

/* ── Cases: galeria com capa, meta e descrição ── */
.pf-cases{margin:6px 0 28px}
.pf-cases .pf-secao-titulo{margin-bottom:22px}
.pf-cases-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.pf-case{display:flex;flex-direction:column;overflow:hidden;background:var(--pf-card);border:1px solid var(--pf-linha);
  border-radius:16px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  animation:pf-entra .3s ease-out both;animation-delay:calc(var(--i,0) * 60ms)}
.pf-case:hover{transform:translateY(-3px);border-color:var(--pf-linha-forte);box-shadow:var(--pf-sombra-alta)}
.pf-case-capa{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;cursor:zoom-in;overflow:hidden;
  background:linear-gradient(135deg,var(--pf-card-2),var(--pf-pill))}
.pf-case-capa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pf-case:hover .pf-case-capa img{transform:scale(1.03)}
.pf-case-capa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,13,24,.55) 0%,transparent 45%)}
.pf-case-qtd{position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:.74rem;color:#F5F7FA;background:rgba(5,13,24,.7);
  border:1px solid var(--pf-linha-forte)}
.pf-carregando-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--pf-texto-3)}
.pf-case-corpo{padding:20px 22px 22px}
.pf-case-corpo h3{margin:0;font-family:var(--pf-fonte,var(--fonte-titulo));font-size:1.08rem;font-weight:700;color:var(--pf-texto)}
.pf-case-meta{margin-top:4px;font-size:.84rem;color:var(--pf-realce)}
.pf-case-corpo p{margin:10px 0 0;font-size:.9rem;line-height:1.6;color:var(--pf-texto-2);white-space:pre-line}
.pf-case-mini{display:flex;gap:8px;margin-top:14px}
.pf-case-mini button{width:56px;height:40px;padding:0;border-radius:8px;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--pf-linha);background:var(--pf-card-2);transition:border-color .25s ease}
.pf-case-mini button:hover{border-color:var(--pf-realce)}
.pf-case-mini img{width:100%;height:100%;object-fit:cover;display:block}

/* Visualizador: a imagem grande, com setas e contador */
.pf-visor{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:16px;padding:24px;background:rgba(3,8,15,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  --pf-texto:#F5F7FA;--pf-texto-2:#AAB8C8;--pf-linha-forte:rgba(120,170,220,.28)}
.pf-visor img{max-width:min(1200px,92vw);max-height:78vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pf-visor-legenda{font-size:.88rem;color:var(--pf-texto-2);text-align:center}
.pf-visor-legenda strong{color:var(--pf-texto);font-weight:600}
.pf-visor button{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--pf-linha-forte);background:rgba(8,21,37,.8);color:var(--pf-texto);
  font-size:1.2rem;cursor:pointer;transition:border-color .25s ease}
.pf-visor button:hover{border-color:var(--pf-realce)}
.pf-visor .pf-visor-fechar{top:20px;right:20px}
.pf-visor .pf-visor-ant{left:20px;top:50%;transform:translateY(-50%)}
.pf-visor .pf-visor-prox{right:20px;top:50%;transform:translateY(-50%)}
@container (max-width:760px){
  .pf-cases-grade{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pf-visor .pf-visor-ant,.pf-visor .pf-visor-prox{top:auto;bottom:24px;transform:none}
}

/* Botão sol/lua: troca claro/escuro e lembra neste navegador */
.pf-alternar{position:fixed;top:16px;right:16px;z-index:60;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;
  color:var(--pf-texto);background:color-mix(in srgb,var(--pf-card-2) 78%,transparent);
  border:1px solid var(--pf-linha-forte);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .25s ease,transform .25s ease}
.pf-alternar:hover{border-color:var(--pf-detalhe);transform:rotate(-12deg)}

/* Rodapé */
.pf-rodape{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;
  padding-top:18px;border-top:1px solid var(--pf-linha);font-size:.78rem;letter-spacing:.02em;color:var(--pf-texto-3)}
.pf-imprimir{background:none;border:1px solid var(--pf-linha-forte);border-radius:999px;padding:7px 16px;
  font-size:.78rem;letter-spacing:.06em;color:var(--pf-texto-2);cursor:pointer;transition:border-color .25s ease,color .25s ease}
.pf-imprimir:hover{border-color:var(--pf-detalhe);color:var(--pf-texto)}

.pf-indisponivel{max-width:560px;margin:0 auto;padding:15vh 16px}
.pf-indisponivel .pf-card:hover{transform:none}
.pf-indisponivel .vazio h6{color:var(--pf-texto)}
.pf-indisponivel .vazio p,.pf-indisponivel .vazio i{color:var(--pf-texto-2)}

/* Tablet: nome e "Sobre mim" empilham; a trajetória vira uma coluna */
/* Tablet: a foto deixa de ser a coluna que desce ao lado de tudo e
   divide o topo com nome e contatos. "Sobre mim" e a trajetória passam
   pra largura toda. O `display:contents` solta os filhos de
   .pf-direita e .pf-hero-linha no grid do topo, sem mexer no HTML. */
@container (max-width:1100px){
  .pf-topo{grid-template-columns:minmax(200px,36%) minmax(0,1fr);
    grid-template-areas:"foto id" "sobre sobre" "traj traj"}
  .pf-direita,.pf-hero-linha{display:contents}
  .pf-foto{grid-area:foto;min-height:0;align-self:start;padding-top:28px}
  .pf-foto img{position:relative;display:block;margin:0 auto;width:100%;max-width:300px}
  .pf-foto-iniciais{position:relative;top:auto;left:auto;transform:none;text-align:center;padding:40px 0}
  /* Brilho do tamanho da foto, não da página. */
  .pf-foto::before{left:0;top:6%;width:100%;height:80%;filter:blur(18px)}
  .pf-hero-id{grid-area:id;align-self:center;padding:36px 0 24px 32px}
  .pf-sobre{grid-area:sobre;padding:28px 0;border-top:1px solid var(--pf-linha);border-bottom:1px solid var(--pf-linha)}
  .pf-hero-fundo{bottom:auto;height:min(420px,60vw);width:calc(60% + var(--pf-sobra));opacity:.3}
  .pf-trajetoria{grid-area:traj;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.2fr);gap:32px;padding:30px 0 34px}
}
/* Celular: uma coluna */
@container (max-width:760px){
  .pf-topo{grid-template-columns:1fr;grid-template-areas:"foto" "id" "sobre" "traj"}
  .pf-foto img{max-width:260px}
  .pf-foto-iniciais{font-size:5rem;padding:30px 0 10px}
  .pf-hero-id{padding:22px 0 26px}
  .pf-hero-fundo{width:calc(100% + var(--pf-sobra));height:520px;opacity:.15}
  .pf-trajetoria{display:flex;flex-direction:column;padding:26px 0 30px}
  .pf-divisor{display:none}
  .pf-trajetoria .pf-col-b{margin-top:30px}
  .pf-cards{grid-template-columns:1fr}
  .pf-card{padding:22px 20px}
  .pf-marco-topo{flex-direction:column;gap:2px}
}
/* Monitor grande: tipografia e foto acompanham a largura extra. */
@container (min-width:1600px){
  .pf-nome{font-size:clamp(3rem,3vw,3.8rem)}
  .pf-foto{min-height:640px}
  .pf-hero-linha{padding-top:68px;padding-bottom:40px}
  .pf-sobre p,.pf-resultado{font-size:.98rem}
  .pf-marco h3{font-size:1.1rem}
}
/* 2K/4K: a coluna cresce mais e o texto sobe um degrau, senão a página
   vira uma faixa fininha no meio da tela. */
@container (min-width:2200px){
  .pf-moldura{--pf-max:1840px}
  .pf-hero-fundo{--pf-sobra:calc(max(0px,(100cqw - 1840px) / 2) + var(--pf-margem))}
  .pf-nome{font-size:4.2rem}
  .pf-foto{min-height:720px}
  .pf-ola,.pf-cargo{font-size:.86rem}
  .pf-contatos{font-size:.95rem}
  .pf-sobre h2,.pf-secao-titulo{font-size:1.6rem}
  .pf-sobre p,.pf-resultado,.pf-texto{font-size:1.06rem}
  .pf-marco h3{font-size:1.2rem}
  .pf-org,.pf-periodo{font-size:.98rem}
  .pf-tag{font-size:.95rem}
  .pf-cases-grade{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .pf-card,.pf-secao{animation:none;transition:none}
  .pf-card:hover{transform:none}
}
@media print{
  .pf-raiz{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pf-card{box-shadow:none;break-inside:avoid;animation:none;backdrop-filter:none}
  .pf-imprimir,.pf-alternar{display:none}
  .pf-cl-lado{position:static}
}

/* ═══ Paleta escolhida pelo síndico ═══
   O JS escreve só duas cores (--pf-base e --pf-acento) e põe a classe
   pf-paleta. Daqui sai o resto: a luminosidade de fundo, cartão e texto é
   fixa e só o tom e a saturação vêm da cor escolhida. Por isso qualquer
   cor, até uma bem clara ou bem escura, fica legível nos dois modos.
   Navegador sem cor relativa fica com os neutros padrão e só o realce
   e o detalhe trocam. */
.pf-raiz.pf-paleta{
  --pf-realce:color-mix(in srgb,var(--pf-base) 35%,#BFD4F0);
  --pf-realce-forte:color-mix(in srgb,var(--pf-base) 60%,#6B8FC0);
  --pf-detalhe:var(--pf-acento)}
.pf-raiz.pf-paleta.pf-claro{
  --pf-realce:color-mix(in srgb,var(--pf-base) 80%,#000);
  --pf-realce-forte:color-mix(in srgb,var(--pf-base) 40%,#fff);
  --pf-detalhe:color-mix(in srgb,var(--pf-acento) 75%,#000);
  --pf-pill:color-mix(in srgb,var(--pf-base) 7%,#fff)}
@supports (color:oklch(from red l c h)){
  .pf-raiz.pf-paleta{
    --pf-fundo:oklch(from var(--pf-base) .16 calc(c * .35) h);
    --pf-fundo-topo:oklch(from var(--pf-base) .2 calc(c * .4) h);
    --pf-card:oklch(from var(--pf-base) .22 calc(c * .4) h / .75);
    --pf-card-2:oklch(from var(--pf-base) .24 calc(c * .4) h);
    --pf-pill:oklch(from var(--pf-base) .28 calc(c * .45) h);
    --pf-texto-2:oklch(from var(--pf-base) .8 .025 h);
    --pf-texto-3:oklch(from var(--pf-base) .66 .03 h);
    --pf-realce:oklch(from var(--pf-base) .8 clamp(.05, calc(c * .9), .14) h);
    --pf-realce-forte:oklch(from var(--pf-base) .6 clamp(.08, c, .18) h);
    --pf-detalhe:oklch(from var(--pf-acento) clamp(.7, l, .88) c h);
    --pf-linha:oklch(from var(--pf-base) .8 .06 h / .16);
    --pf-linha-forte:oklch(from var(--pf-base) .8 .06 h / .3)}
  .pf-raiz.pf-paleta.pf-claro{
    --pf-fundo:oklch(from var(--pf-base) .975 .008 h);
    --pf-fundo-topo:oklch(from var(--pf-base) .95 .016 h);
    --pf-card:rgba(255,255,255,.86);--pf-card-2:#FFFFFF;
    --pf-pill:oklch(from var(--pf-base) .955 .02 h);
    --pf-texto-2:oklch(from var(--pf-base) .42 .03 h);
    --pf-texto-3:oklch(from var(--pf-base) .52 .03 h);
    --pf-realce:oklch(from var(--pf-base) .45 clamp(.08, calc(c + .03), .16) h);
    --pf-realce-forte:oklch(from var(--pf-base) .75 .1 h);
    --pf-detalhe:oklch(from var(--pf-acento) clamp(.45, l, .6) c h);
    --pf-linha:oklch(from var(--pf-base) .3 .03 h / .12);
    --pf-linha-forte:oklch(from var(--pf-base) .3 .03 h / .22)}
}

/* "Sobre mim" como seção comum (Clássico e Minimalista). */
.pf-sobre-texto p{margin:0;font-size:.95rem;line-height:1.75;color:var(--pf-texto-2);white-space:pre-line;max-width:72ch}
.pf-sobre-texto p+p{margin-top:10px}

/* Editorial sem foto: o topo vira uma coluna só. */
.pf-topo.pf-sem-foto{grid-template-columns:minmax(0,1fr)}
.pf-sem-foto .pf-hero-linha{padding-left:0}
.pf-sem-foto .pf-trajetoria{padding-left:0}
/* Linhas do tempo e cartões que vêm depois do topo já ocupam a largura toda. */
.pf-moldura>.pf-trajetoria{padding-left:0}
.pf-moldura>.pf-cards{margin-bottom:28px}
@container (max-width:1100px){
  .pf-topo.pf-sem-foto{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "sobre" "traj"}
  .pf-sem-foto .pf-hero-id{padding-left:0}
}

/* ═══ Template Clássico ═══
   Cabeçalho no centro com a foto redonda; o conteúdo em cartões numa
   coluna larga e as etiquetas numa coluna estreita ao lado. */
.pf-cab{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 0 40px}
.pf-cab-foto{position:relative;width:148px;height:148px;border-radius:50%;overflow:hidden;margin-bottom:24px;
  background:var(--pf-card-2);border:3px solid var(--pf-detalhe);box-shadow:var(--pf-sombra-alta)}
.pf-cab-foto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pf-cab-foto .pf-foto-iniciais,.pf-mi-foto .pf-foto-iniciais{position:static;transform:none;height:100%;
  display:flex;align-items:center;justify-content:center;font-size:3rem}
.pf-cab .pf-filete{margin:18px auto}
.pf-cab .pf-contatos{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 24px}
.pf-cl-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:24px;align-items:start;margin-bottom:8px}
.pf-cl-corpo.pf-cl-unico{grid-template-columns:minmax(0,1fr)}
.pf-cl-principal{display:flex;flex-direction:column;gap:24px;min-width:0}
.pf-cl-bloco{background:var(--pf-card);border:1px solid var(--pf-linha);border-radius:16px;padding:28px 30px;box-shadow:var(--pf-sombra)}
.pf-cl-lado{display:flex;flex-direction:column;gap:20px;position:sticky;top:20px}
.pf-cl-lado .pf-card{padding:22px 22px 24px}
.pf-tpl-classico .pf-cases{margin:0}
.pf-tpl-classico .pf-cases-grade{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@container (max-width:860px){
  .pf-cl-corpo{grid-template-columns:minmax(0,1fr)}
  .pf-cl-lado{position:static}
  .pf-cl-bloco{padding:22px 20px}
}

/* ═══ Template Minimalista ═══
   Uma coluna estreita, sem cartão e sem brilho: título da seção pequeno
   à esquerda, conteúdo à direita, fios finos entre as partes. */
.pf-tpl-minimalista .pf-pub{background:var(--pf-fundo)}
.pf-tpl-minimalista .pf-moldura{max-width:900px}
.pf-mi-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding:80px 0 36px;
  border-bottom:1px solid var(--pf-linha-forte)}
.pf-mi-id{min-width:0}
.pf-mi-foto{position:relative;flex:none;width:112px;height:112px;border-radius:14px;overflow:hidden;background:var(--pf-card-2)}
.pf-mi-foto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pf-mi-foto .pf-foto-iniciais{font-size:2.4rem}
.pf-tpl-minimalista .pf-nome{font-size:clamp(2rem,5cqw,2.8rem)}
.pf-tpl-minimalista .pf-filete{width:32px;margin:16px 0}
.pf-mi-cab .pf-contatos{flex-direction:row;flex-wrap:wrap;gap:6px 22px}
.pf-mi-corpo>.pf-secao,.pf-mi-corpo>.pf-card,.pf-mi-corpo>.pf-cases{display:grid;grid-template-columns:170px minmax(0,1fr);
  gap:28px;margin:0;padding:32px 0;border:0;border-bottom:1px solid var(--pf-linha);border-radius:0;
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pf-mi-corpo>.pf-card:hover{transform:none;box-shadow:none}
.pf-mi-corpo .pf-secao-titulo,.pf-mi-corpo .pf-card-titulo{display:block;margin:0;padding:3px 0 0;border:0;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pf-texto-3)}
.pf-mi-corpo .pf-secao-titulo::after,.pf-mi-corpo .pf-card-titulo i,.pf-mi-corpo .pf-card-titulo span::after{display:none}
.pf-mi-corpo .pf-card-titulo span{padding:0;border:0}
.pf-mi-corpo .pf-linha-tempo{padding-left:0}
.pf-mi-corpo .pf-linha-tempo::before,.pf-mi-corpo .pf-marco::before{display:none}
.pf-mi-corpo .pf-tags{gap:6px 0}
.pf-mi-corpo .pf-tag{padding:0;border:0;background:none;font-size:.94rem;color:var(--pf-texto-2)}
.pf-mi-corpo .pf-tag:not(:last-child)::after{content:'·';margin:0 10px;color:var(--pf-texto-3)}
.pf-mi-corpo .pf-cases-grade{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.pf-mi-corpo .pf-case{border-radius:10px;background:none}
.pf-mi-corpo .pf-case-corpo{padding:14px 2px 4px}
.pf-tpl-minimalista .pf-rodape{border-top:0}
@container (max-width:640px){
  .pf-mi-cab{flex-direction:column-reverse;gap:20px;padding-top:72px}
  .pf-mi-corpo>.pf-secao,.pf-mi-corpo>.pf-card,.pf-mi-corpo>.pf-cases{grid-template-columns:minmax(0,1fr);gap:14px;padding:26px 0}
}

/* ═══ Personalizar aparência (editor) ═══
   A página em tela cheia, ao vivo, com o painel do lado. O painel é do
   sistema, então usa as cores do tema e não as da página. */
html.pf-prev-aberta,html.pf-prev-aberta body{overflow:hidden}
.pf-personalizar{position:fixed;inset:0;z-index:1045;display:flex;background:var(--cor-bg)}
.pf-prev-area{position:relative;flex:1;min-width:0;overflow:auto;scrollbar-width:thin}
.pf-prev-area .pf-pub{min-height:100%}
.pf-painel{flex:none;width:360px;display:flex;flex-direction:column;background:var(--cor-card);color:var(--cor-texto);
  border-left:1px solid var(--cor-border)}
.pf-painel-fechado .pf-painel{display:none}
.pf-painel-topo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--cor-border)}
.pf-painel-corpo{flex:1;overflow:auto;padding:18px 16px}
.pf-painel-rodape{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--cor-border)}
.pf-painel-alternar{position:absolute;left:16px;bottom:16px;z-index:5;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--cor-card);color:var(--cor-texto);border:1px solid var(--cor-border);box-shadow:var(--sombra-md,0 6px 18px rgba(0,0,0,.18))}
.pf-pgrupo{margin-bottom:22px}
.pf-pgrupo-titulo{margin-bottom:8px;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cor-texto-muted)}
.pf-pdica{margin-top:6px;font-size:.76rem;line-height:1.45;color:var(--cor-texto-muted)}
.pf-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pf-ops.pf-ops-1{grid-template-columns:minmax(0,1fr)}
.pf-ops.pf-ops-2{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-op{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;cursor:pointer;text-align:left;
  font-size:.86rem;font-weight:600;color:var(--cor-texto);background:transparent;
  border:1px solid var(--cor-border);border-radius:var(--radius-sm);transition:border-color .2s ease,background .2s ease}
.pf-ops-2 .pf-op{align-items:center;text-align:center}
.pf-op small{font-size:.74rem;font-weight:400;color:var(--cor-texto-muted)}
.pf-op:hover{border-color:var(--cor-acento)}
.pf-op.ativo{border-color:var(--cor-acento);background:color-mix(in srgb,var(--cor-acento) 12%,transparent);
  box-shadow:inset 0 0 0 1px var(--cor-acento)}
.pf-cores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pf-cor{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:5px;cursor:pointer;font-size:.74rem;
  color:var(--cor-texto);background:none;border:1px solid transparent;border-radius:var(--radius-sm)}
.pf-cor:hover{border-color:var(--cor-border)}
.pf-cor.ativo{border-color:var(--cor-acento);box-shadow:inset 0 0 0 1px var(--cor-acento)}
.pf-cor-amostra{height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cor-border)}
.pf-cor-amostra i{padding:2px 5px;border-radius:50%;font-size:.72rem;background:var(--cor-card);color:var(--cor-texto)}
.pf-cor-pers{display:flex;gap:10px;margin-top:10px}
.pf-cor-pers label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.76rem;color:var(--cor-texto-muted)}
.pf-cor-pers input{width:100%;height:34px;padding:2px;cursor:pointer;background:none;border:1px solid var(--cor-border);border-radius:8px}
.pf-sec-item{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pf-sec-item .form-check-input{flex:none;margin:0}
.pf-sec-item .form-control{flex:1;min-width:0}
.pf-sec-item .btn{flex:none;padding:4px 7px}
.pf-sec-fixa span{font-size:.88rem;padding:5px 0}
/* Celular: o painel vira uma gaveta embaixo e a página fica em cima. */
@media(max-width:760px){
  .pf-personalizar{flex-direction:column}
  .pf-painel{width:auto;height:55vh;border-left:0;border-top:1px solid var(--cor-border)}
  .pf-painel-alternar{top:12px;bottom:auto;left:12px}
}

/* Foto no Meu Perfil. --cor-card sobre --cor-primaria, assim o contraste
   acompanha o tema (claro sobre escuro e vice-versa). */
.perfil-foto{width:64px;height:64px;border-radius:50%;flex:0 0 auto;overflow:hidden;display:flex;
  align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;
  background:var(--cor-primaria);color:var(--cor-card)}
.perfil-foto img{width:100%;height:100%;object-fit:cover}

/* Editor (tela Meu Portfólio) */
/* Aviso de portfólio pendente: fio na cor de destaque pra chamar o olho
   sem parecer erro. */
.pf-pedido{border-left:3px solid var(--cor-acento)}
.pf-item{position:relative;border:1px solid var(--cor-border);border-radius:var(--radius-md);
  padding:var(--esp-4) 48px var(--esp-1) var(--esp-4);margin-bottom:var(--esp-3)}
.pf-item .pf-remover{position:absolute;top:var(--esp-2);right:var(--esp-2)}
/* Imagens do case no editor: miniaturas + botão de adicionar */
.pf-case-imgs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.pf-case-thumb,.pf-case-add{position:relative;width:112px;height:80px;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--cor-border);background:var(--cor-table-header);display:flex;align-items:center;justify-content:center}
.pf-case-thumb img{width:100%;height:100%;object-fit:cover}
.pf-case-thumb button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.72);color:#fff;cursor:pointer}
.pf-case-add{flex-direction:column;gap:4px;cursor:pointer;border-style:dashed;color:var(--cor-texto-muted);
  font-size:.74rem;transition:border-color .2s ease,color .2s ease}
.pf-case-add:hover{border-color:var(--cor-acento);color:var(--cor-texto)}
.pf-case-add i{font-size:1.1rem}