*{ box-sizing:border-box; }
@media (prefers-reduced-motion: no-preference){
  .pg-wrap{ animation: pg-rise .5s cubic-bezier(.2,.8,.2,1) both; }
  .pg-btn, .pg-prod, .wa-opt{ animation: pg-fade .5s ease both; }
  .pg-btn:nth-of-type(2), .pg-prod:nth-of-type(2), .wa-opt:nth-of-type(2){ animation-delay:.04s; }
  .pg-btn:nth-of-type(3), .pg-prod:nth-of-type(3), .wa-opt:nth-of-type(3){ animation-delay:.08s; }
  .pg-btn:nth-of-type(4), .pg-prod:nth-of-type(4), .wa-opt:nth-of-type(4){ animation-delay:.12s; }
  .pg-btn:nth-of-type(5), .pg-prod:nth-of-type(5){ animation-delay:.16s; }
}
@keyframes pg-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
@keyframes pg-fade{ from{ opacity:0; } to{ opacity:1; } }

.pg{ min-height:100vh; padding:0 0 60px; font-family:'Inter',sans-serif; position:relative; }
.pg-wrap{ max-width:440px; margin:0 auto; padding:34px 20px 0; position:relative; }
.pg-full .pg-wrap{ padding-top:40px; }

/* ---- CAPAS DECORATIVAS PRÉ-MOLDADAS -------------------------------
   Faixa de efeito acima da foto. São 100% CSS (gradientes e padrões),
   nunca imagens: carregam na hora e ficam nítidas em qualquer tela.
   A foto do usuário continua com o mesmo tamanho, logo abaixo. */
.pg-banner{ height:120px; width:100%; position:relative; overflow:hidden; }
.pg-full .pg-banner{ height:150px; }
.has-banner .pg-wrap{ padding-top:0; }
.pg-full.has-banner .pg-wrap{ padding-top:0; }
.pg-banner::before, .pg-banner::after{ content:''; position:absolute; inset:0; }

/* Aurora — brilhos difusos que se cruzam */
.cv-aurora{ background:linear-gradient(115deg,#1877F2,#5BA4F7 45%,#B8A6F0); }
.cv-aurora::before{
  background:radial-gradient(60% 90% at 20% 10%, rgba(255,255,255,.55), transparent 60%),
             radial-gradient(50% 80% at 85% 30%, rgba(255,255,255,.35), transparent 60%);
}

/* Ondas — camadas curvas sobrepostas */
.cv-ondas{ background:linear-gradient(180deg,#0F5FCC,#4A97F5); }
.cv-ondas::before{
  background:
    radial-gradient(120% 70% at 50% 130%, rgba(255,255,255,.30) 40%, transparent 41%),
    radial-gradient(120% 70% at 50% 155%, rgba(255,255,255,.40) 40%, transparent 41%);
}

/* Malha — grade técnica discreta */
.cv-malha{ background:linear-gradient(135deg,#123A52,#1E6E9C); }
.cv-malha::before{
  background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:26px 26px;
}
.cv-malha::after{ background:radial-gradient(70% 100% at 50% 0%, transparent, rgba(0,0,0,.28)); }

/* Raios — leque de luz saindo do topo */
.cv-raios{ background:linear-gradient(180deg,#1E82C4,#5BA4F7); }
.cv-raios::before{
  background:repeating-conic-gradient(from 200deg at 50% 130%,
            rgba(255,255,255,.22) 0deg 7deg, transparent 7deg 16deg);
}

/* Bolhas — círculos flutuantes */
.cv-bolhas{ background:linear-gradient(140deg,#1877F2,#7FB8F9); }
.cv-bolhas::before{
  background:
    radial-gradient(circle at 12% 70%, rgba(255,255,255,.45) 0 16px, transparent 17px),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.32) 0 26px, transparent 27px),
    radial-gradient(circle at 68% 74%, rgba(255,255,255,.38) 0 20px, transparent 21px),
    radial-gradient(circle at 88% 34%, rgba(255,255,255,.28) 0 32px, transparent 33px);
}

/* Horizonte — faixa de nascer do sol */
.cv-horizonte{ background:linear-gradient(180deg,#0B4A9E 0%,#1877F2 55%,#C7DEFC 100%); }
.cv-horizonte::before{
  background:radial-gradient(48% 78% at 50% 108%, rgba(255,255,255,.85), rgba(255,255,255,.25) 45%, transparent 62%);
}

/* Prisma — faixas diagonais facetadas, tipo vidro cortado */
.cv-prisma{ background:linear-gradient(135deg,#0B4A9E,#1877F2 55%,#5BA4F7); }
.cv-prisma::before{
  background:repeating-linear-gradient(115deg,
            rgba(255,255,255,.16) 0 18px,
            rgba(255,255,255,.04) 18px 34px,
            transparent 34px 60px);
}
.cv-prisma::after{
  background:linear-gradient(200deg, rgba(255,255,255,.28), transparent 55%);
}

/* Constelação — pontos de luz sobre azul profundo */
.cv-constelacao{ background:linear-gradient(165deg,#071B3D,#0B4A9E 70%,#1877F2); }
.cv-constelacao::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1.5px);
  background-size:52px 44px, 31px 27px;
  background-position:0 0, 14px 12px;
}
.cv-constelacao::after{
  background:radial-gradient(70% 110% at 78% 12%, rgba(255,255,255,.30), transparent 58%);
}

/* Vidro — blocos translúcidos desfocados (glassmorphism) */
.cv-vidro{ background:linear-gradient(120deg,#1877F2,#7FB8F9 60%,#D9E9FE); }
.cv-vidro::before{
  /* O inset negativo é essencial: sem ele o blur "puxa" transparência de
     fora do elemento e as bordas da faixa ficam desbotadas. */
  inset:-16px;
  background:
    radial-gradient(38% 120% at 18% 20%, rgba(255,255,255,.65), transparent 62%),
    radial-gradient(30% 100% at 62% 85%, rgba(11,74,158,.45), transparent 60%),
    radial-gradient(26% 90% at 90% 25%, rgba(255,255,255,.50), transparent 60%);
  filter:blur(6px);
}
.cv-vidro::after{
  background:linear-gradient(180deg, transparent 55%, rgba(255,255,255,.22));
}
/* ---- FOTO DE DESTAQUE ---------------------------------------------
   A imagem entra num contêiner de proporção fixa (4:3) com object-fit:cover,
   então qualquer resolução — retrato gigante, panorâmica, print — é
   recortada para o mesmo formato. Nada é sobreposto: o texto sempre
   começa abaixo da imagem. */
.pg-photo{
  width:100%; max-width:300px; margin:0 auto 22px;
  aspect-ratio:4 / 3; border-radius:22px; overflow:hidden; position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.20);
}
.pg-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Aro sutil por dentro da borda: dá acabamento e separa a foto do fundo,
   qualquer que seja a cor escolhida pelo usuário. */
.pg-photo::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
/* Com capa decorativa, a foto sobe um pouco e ganha moldura clara — fica
   "apoiada" sobre a faixa, como um cartão. */
.has-banner .pg-photo{
  margin-top:-52px; border:5px solid var(--frame, #fff); border-radius:24px;
  box-shadow:0 20px 44px rgba(0,0,0,.26);
}
.has-banner .pg-avatar{ margin-top:-46px; position:relative; z-index:2; box-shadow:0 12px 30px rgba(0,0,0,.24), 0 0 0 5px var(--frame, #fff); }

.pg-avatar{ width:74px; height:74px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 16px; overflow:hidden; }
.pg-avatar img{ width:100%; height:100%; object-fit:cover; }

.pg-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:23px; text-align:center; margin:0 0 8px; letter-spacing:-0.015em; }

/* Ornamento discreto entre o nome e a bio: um filete que se abre a partir
   do centro, dando um respiro editorial sem poluir. */
.pg-name::after{
  content:''; display:block; width:34px; height:2px; margin:10px auto 0;
  border-radius:2px; background:currentColor; opacity:.22;
}

/* A bio se estende um pouco além da coluna principal (440px), ganhando
   ~64px extras de largura para o texto respirar em menos linhas. Em telas
   estreitas as margens negativas são zeradas para não vazar. */
.pg-tag{
  text-align:center; font-size:14px; opacity:.72; margin:0 0 22px;
  line-height:1.65; margin-inline:-32px; padding-inline:6px;
}
@media (max-width:520px){ .pg-tag{ margin-inline:0; } }
.pg-video{ width:100%; border-radius:16px; margin-bottom:18px; display:block; background:#000; max-height:280px; }

/* Botões com brilho que atravessa no hover — um toque de vida sem exagero. */
.pg-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:15px; border-radius:10px; font-weight:600; font-size:14px; margin-bottom:10px;
  border:none; text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.pg-btn::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.pg-btn:hover::after{ left:120%; }
.pg-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.14); }
.pg-btn:active{ transform:translateY(0) scale(.985); }
.pg-btn.link{ background:rgba(128,128,128,.12); }
@media (prefers-reduced-motion: reduce){ .pg-btn::after{ display:none; } }

/* Título de seção com filetes laterais */
.pg-sec-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; opacity:.5;
  margin:32px 0 14px; text-align:center; font-weight:700;
  display:flex; align-items:center; gap:12px;
}
.pg-sec-title::before, .pg-sec-title::after{
  content:''; flex:1; height:1px; background:currentColor; opacity:.32;
}

.pg-prod{ display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:14px; margin-bottom:9px; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.pg-prod:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.11); }
.pg-prod-photo{ width:46px; height:46px; border-radius:11px; object-fit:cover; flex-shrink:0; }
.pg-prod-info{ flex:1; min-width:0; }
/* o nome herda a cor do card — inclusive a escolhida pelo usuário */
.pg-prod .pn{ font-size:14px; font-weight:600; margin:0 0 2px; color:inherit; }
/* O preço herda a cor de texto do card (inclusive a escolhida pelo usuário),
   só um pouco mais suave — nunca uma cor fixa. */
.pg-prod .pp{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:inherit; opacity:.82; font-weight:600; }
.pg-prod button{ border:none; padding:9px 15px; border-radius:8px; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; transition:transform .15s; }
.pg-prod button:hover{ transform:scale(1.05); }

.pg-social{ display:flex; justify-content:center; gap:18px; margin-top:30px; font-size:12.5px; opacity:.6; }
.pg-social span{ transition:opacity .15s; }
.pg-social span:hover{ opacity:1; }
.pg-foot{ text-align:center; font-size:11px; opacity:.42; margin-top:38px; letter-spacing:.03em; }
.pg-foot-link{ color:inherit; text-decoration:none; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:1px; }
.pg-foot-link:hover{ opacity:1; }

.wa-menu{ border-radius:18px; padding:17px; margin-bottom:12px; }
.wa-menu p{ margin:0 0 12px; font-size:12.5px; font-weight:700; text-align:center; opacity:.8; letter-spacing:.01em; }
.wa-opt{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  text-align:left; padding:12px 14px; border-radius:9px; background:rgba(128,128,128,.1);
  border:none; font-size:13px; margin-bottom:7px; font-weight:600; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .2s;
}
.wa-opt::after{ content:'→'; opacity:0; transform:translateX(-6px); transition:all .2s; font-weight:400; }
.wa-opt:hover{ transform:translateX(4px); }
.wa-opt:hover::after{ opacity:.55; transform:translateX(0); }

/* ---- theme palettes ---- */
.th-minimal{ background:#FAFAF7; color:#16161C; --frame:#FAFAF7; }
.th-minimal .pg-avatar{ background:#1877F2; color:#fff; }
/* Links e produtos em azul Facebook com texto branco */
.th-minimal .pg-btn.link{ background:#1877F2; color:#fff; }
.th-minimal .pg-btn.link:hover{ background:#0F5FCC; }
.th-minimal .pg-btn.wa{ background:#16161C; color:#FAFAF7; }
.th-minimal .pg-prod{ background:#1877F2; color:#fff; }
.th-minimal .pg-prod button{ background:#fff; color:#1877F2; }
.th-minimal .pg-prod button:hover{ background:#EAF2FE; }
.th-minimal .wa-menu{ background:#EFEEEA; }
.th-minimal .wa-opt{ background:#FAFAF7; color:#16161C; }

.th-corp{ background:#0E2233; color:#F2F5F7; --frame:#0E2233; }
.th-corp .pg-avatar{ background:#00C896; color:#0E2233; }
.th-corp .pg-avatar{ border-radius:0; }
.th-corp .pg-name{ font-family:'Playfair Display',serif; font-weight:700; }
.th-corp .pg-btn.link{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#F2F5F7; }
.th-corp .pg-btn.wa{ background:#00C896; color:#0E2233; }
.th-corp .pg-prod{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.th-corp .pg-prod button{ background:transparent; border:1px solid #00C896; color:#00C896; }
.th-corp .wa-menu{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.th-corp .wa-opt{ background:rgba(255,255,255,.06); color:#F2F5F7; }

.th-creator{ background:linear-gradient(160deg,#FF3D77,#7B2FF7); color:#fff; --frame:rgba(255,255,255,.9); }
.th-creator .pg-avatar{ background:#FFD84D; color:#7B2FF7; }
.th-creator .pg-name{ font-family:'Bebas Neue',sans-serif; font-size:29px; letter-spacing:.02em; }
.th-creator .pg-btn.link{ background:rgba(255,255,255,.18); color:#fff; }
.th-creator .pg-btn.wa{ background:#FFD84D; color:#7B2FF7; }
.th-creator .pg-prod{ background:rgba(255,255,255,.16); }
.th-creator .pg-prod button{ background:#FFD84D; color:#7B2FF7; }
.th-creator .wa-menu{ background:rgba(255,255,255,.14); }
.th-creator .wa-opt{ background:rgba(255,255,255,.18); color:#fff; }

.th-dark{ background:#0A0A0A; color:#EDEDED; --frame:#0A0A0A; }
.th-dark .pg-avatar{ background:transparent; border:1px solid #C9A24B; color:#C9A24B; }
.th-dark .pg-name{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; }
.th-dark .pg-btn.link{ background:transparent; border:1px solid rgba(201,162,75,.4); color:#EDEDED; }
.th-dark .pg-btn.wa{ background:#C9A24B; color:#0A0A0A; }
.th-dark .pg-prod{ background:transparent; border:1px solid rgba(201,162,75,.25); }
.th-dark .pg-prod button{ background:transparent; border:1px solid #C9A24B; color:#C9A24B; }
.th-dark .wa-menu{ background:transparent; border:1px solid rgba(201,162,75,.25); }
.th-dark .wa-opt{ background:rgba(201,162,75,.08); color:#EDEDED; }

.th-resto{ background:#FFF3E4; color:#3B2115; --frame:#FFF3E4; }
.th-resto .pg-avatar{ background:#E4572E; color:#FFF3E4; }
.th-resto .pg-name{ font-family:'Playfair Display',serif; font-weight:700; }
.th-resto .pg-btn.link{ background:#fff; border:1px solid rgba(59,33,21,.12); color:#3B2115; }
.th-resto .pg-btn.wa{ background:#E4572E; color:#FFF3E4; }
.th-resto .pg-prod{ background:#fff; }
.th-resto .pg-prod button{ background:#3B2115; color:#FFF3E4; }
.th-resto .wa-menu{ background:#fff; }
.th-resto .wa-opt{ background:#FFF3E4; color:#3B2115; }

.th-tech{ background:#0B0F14; color:#D7E3EA; --frame:#0B0F14; }
.th-tech .pg-avatar{ background:#0B0F14; border:1px solid #4FD1FF; color:#4FD1FF; }
.th-tech .pg-avatar{ border-radius:6px; }
.th-tech .pg-name{ font-family:'IBM Plex Mono',monospace; }
.th-tech .pg-tag{ font-family:'IBM Plex Mono',monospace; font-size:12px; }
.th-tech .pg-btn.link{ background:rgba(79,209,255,.06); border:1px solid rgba(79,209,255,.35); color:#D7E3EA; font-family:'IBM Plex Mono',monospace; font-weight:500; }
.th-tech .pg-btn.wa{ background:#4FD1FF; color:#0B0F14; }
.th-tech .pg-prod{ background:rgba(79,209,255,.05); border:1px solid rgba(79,209,255,.2); }
.th-tech .pg-prod button{ background:transparent; border:1px solid #4FD1FF; color:#4FD1FF; font-family:'IBM Plex Mono',monospace; }
.th-tech .wa-menu{ background:rgba(79,209,255,.05); border:1px solid rgba(79,209,255,.2); }
.th-tech .wa-opt{ background:rgba(79,209,255,.07); color:#D7E3EA; font-family:'IBM Plex Mono',monospace; }

/* ---- public chrome / lead overlay / toast ---- */

.lead-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; z-index:100; }
.lead-overlay.show{ opacity:1; pointer-events:auto; }
.lead-box{ width:90%; max-width:340px; border-radius:18px; padding:22px; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.lead-box input{ width:100%; padding:12px 13px; border-radius:10px; border:1px solid rgba(128,128,128,.3); margin-bottom:10px; font-size:13.5px; background:rgba(128,128,128,.06); color:inherit; }
.lead-title{ font-weight:700; font-size:15px; text-align:center; margin-bottom:16px; }
.lead-close{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:16px; opacity:.6; cursor:pointer; color:inherit; }

.sl-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:#1C1C27; color:#F7F5F0; padding:13px 22px; border-radius:12px; font-size:13px;
  z-index:200; transition:transform .3s ease, opacity .3s ease; box-shadow:0 10px 30px rgba(0,0,0,.4);
  font-family:'Inter',sans-serif;
  /* sem isto a div vazia aparece como um borrão escuro no pé da página */
  opacity:0; visibility:hidden; pointer-events:none;
}
.sl-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; }

/* ---- CORES PERSONALIZADAS DO CARD DE PRODUTO ----------------------
   Quando o usuário escolhe as próprias cores, o botão de ação precisa
   acompanhar: as regras de tema fixavam "fundo branco + texto azul", o
   que sumia por completo num card branco. Aqui o botão é o INVERSO do
   card (fundo = cor do texto, texto = cor do fundo), então o contraste
   é garantido seja qual for a combinação escolhida.
   Os seletores usam duas classes para vencer as regras de tema. */
.pg-prod.pg-prod-custom button{
  background:var(--prod-text, #fff);
  color:var(--prod-bg, #15181F);
  border:none;
}
.pg-prod.pg-prod-custom button:hover{ filter:brightness(.94); background:var(--prod-text, #fff); }

/* mesma ideia para os botões de link personalizados */
.pg-btn.link.pg-link-custom:hover{ filter:brightness(.94); }