@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap");
/* ══════════════════════════════════════════════════════════════════
   TEMA 3 · SOCIAL / CREATOR
   Cara de rede social: progresso em segmentos (stories), topo de perfil
   com anel em gradiente, cards "adesivo" com contorno preto e sombra
   solida, gradiente Instagram, numeros e metricas em selos coloridos,
   botoes em pilula e entradas com mola. Mobile-first e cheio de energia.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --background:#FFF4F8;
  --background-image:radial-gradient(rgba(221,42,123,.10) 1.4px,transparent 1.6px) 0 0/22px 22px;
  --surface:#FFFFFF;
  --surface-2:#FFF7FB;
  --surface-3:#F6E7EF;
  --text:#14111A;
  --text-2:#3A3343;
  --text-muted:#76697F;
  --border:#14111A;
  --border-strong:#14111A;
  --primary:#DD2A7B;
  --secondary:#8134AF;
  --accent:#F58529;
  --grad:linear-gradient(45deg,#F58529 0%,#DD2A7B 40%,#8134AF 72%,#515BD4 100%);
  --on-primary:#FFFFFF;
  --success:#00A86B;
  --danger:#E11D48;
  --info:#515BD4;
  --focus:rgba(221,42,123,.45);
  --confete:#F58529,#DD2A7B,#8134AF,#515BD4,#FEDA75,#00A86B;
  --ink-shadow:4px 4px 0 #14111A;

  --radius-sm:14px;
  --radius:20px;
  --radius-lg:26px;
  --shadow-sm:3px 3px 0 #14111A;
  --shadow:4px 4px 0 #14111A;
  --shadow-lg:6px 6px 0 #14111A;
  --shadow-cta:4px 4px 0 #14111A;
  --hairline:2px;

  --font:"DM Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Poppins","DM Sans",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Poppins","DM Sans",sans-serif;
  --w-display:800;
  --ls-display:-.025em;
  --t-h1:clamp(1.95rem,9vw,2.5rem);
  --t-h2:clamp(1.55rem,7vw,2rem);

  --entra:pula;
  --mola:cubic-bezier(.34,1.7,.5,1);
  --topo-bg:rgba(255,255,255,.94);
  --topo-border:#14111A;
  --bar-h:5px;
  --bar-track:#EEDBE5;
  --etapa-border:#14111A;
  --etapa-shadow:6px 6px 0 #14111A;
  --etapa-mx:14px;
  --etapa-gap:22px;
  --op-border:#14111A;
  --op-shadow:3px 3px 0 #14111A;
  --op-hover-border:#14111A;
  --op-sel-bg:#FFF0F6;
  --op-sel-border:#14111A;
  --ico-bg:#FFE9F2;
  --ico-radius:50%;
  --btn-radius:999px;
  --btn-h:64px;
  --btn-tt:uppercase;
  --btn-ls:.02em;
  --btn-weight:800;
  --card-border:#14111A;
  --img-border:#14111A;
  --img-radius:18px;
  --pergunta-cor:#DD2A7B;
  --marca-texto:#FEDA75;
  --no-bg:#fff;
  --no-color:#14111A;
  --timer-bg:#14111A;
  --timer-color:#fff;
}
@keyframes pula{0%{opacity:0;transform:translateY(26px) scale(.94)}70%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{transform:none}}

/* fundo: icones de interacao flutuando (sem numeros inventados) */
.fundo{display:block}
.fundo span{font-size:28px;line-height:1;opacity:.5;animation:t3sobe 14s linear infinite}
.fundo span::before{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid #14111A;box-shadow:3px 3px 0 #14111A}
.fundo span:nth-child(1){left:4%;bottom:-70px}.fundo span:nth-child(1)::before{content:"♥";color:#E1306C}
.fundo span:nth-child(2){right:5%;bottom:-70px;animation-delay:-5s;animation-duration:17s}.fundo span:nth-child(2)::before{content:"▶";color:#8134AF;font-size:20px}
.fundo span:nth-child(3){left:46%;bottom:-70px;animation-delay:-9s;animation-duration:19s}.fundo span:nth-child(3)::before{content:"★";color:#F58529}
.fundo span:nth-child(4){right:30%;bottom:-70px;animation-delay:-12s;animation-duration:15s}.fundo span:nth-child(4)::before{content:"@";color:#515BD4;font-family:var(--font-display);font-weight:800}
@keyframes t3sobe{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-115vh) rotate(8deg)}}
@media (max-width:767px){ .fundo span{opacity:.28} }

/* topo de perfil: avatar com anel de stories, progresso em segmentos */
.topo{border-bottom-width:2px}
.marca{font-family:var(--font-display);font-weight:800;font-size:.9375rem;letter-spacing:-.01em}
.marca-av{width:36px;height:36px;color:#14111A;font-size:.75rem;border:3px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:inset 0 0 0 2px #fff}
.passo{font-family:var(--font-display);padding:5px 12px;border-radius:999px;background:#14111A;color:#fff}
.passo b{color:#FEDA75}
.barra{border-radius:0;background:var(--bar-track);overflow:hidden;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100% / 19 - 3px),transparent calc(100% / 19 - 3px) calc(100% / 19));
  mask:repeating-linear-gradient(90deg,#000 0 calc(100% / 19 - 3px),transparent calc(100% / 19 - 3px) calc(100% / 19))}
.barra i{border-radius:0}
.barra i::after{display:none}

/* etapa: card adesivo; numero como bolha de story */
.etapa{border-width:2px}
.no{width:44px;height:44px;min-width:44px;padding:0;top:-22px;border-radius:50%;font-family:var(--font-display);font-size:.9375rem;
  border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  box-shadow:inset 0 0 0 2px #fff,0 0 0 4px var(--background),3px 3px 0 4px #14111A}
.h1,.h2{font-weight:900}
.pergunta{font-weight:800}
/* metricas em destaque: selos coloridos */
.h1 .pos,.h2 .pos,.h3 .pos,.tx .pos,.tx b.pos,.op .rot .pos{display:inline-block;color:#fff;background:#00A86B;padding:0 .35em;border-radius:.4em;
  border:2px solid #14111A;box-shadow:2px 2px 0 #14111A;transform:rotate(-2deg);line-height:1.25}
.h1 .neg,.h2 .neg,.h3 .neg,.tx .neg,.op .rot .neg{background:linear-gradient(transparent 55%,#FFD4E1 55%)}
.destaque{background:#FEDA75;color:#14111A;border:2px solid #14111A;box-shadow:2px 2px 0 #14111A}

/* opcoes: pilulas adesivo que afundam no clique */
.op{border-width:2px;border-radius:22px;transition:transform .15s,box-shadow .15s,opacity .3s,background .2s}
.op .ico{border:2px solid #14111A;background:var(--ico-bg)}
.op{grid-template-columns:44px minmax(0,1fr) 30px}
.op .ico{width:44px;height:44px}
.op .rot{font-family:var(--font-display);font-weight:700;font-size:1rem}
.op .seta{border:2px solid #14111A;background:#FEDA75;color:#14111A}
@media (hover:hover){
  .opcoes:not(.ok) .op:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #14111A}
  .opcoes:not(.ok) .op:hover .seta{background:#DD2A7B;border-color:#14111A;color:#fff}
}
.op:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #14111A}
.opcoes.ok .op.sim{box-shadow:5px 5px 0 #DD2A7B;border-color:#14111A}
.opcoes.ok .op.sim .seta{background:#00A86B;border-color:#14111A;color:#fff}

/* botoes: pilula gradiente com contorno e sombra solida */
.btn{border:2px solid #14111A}
.btn::after{width:30%}
@media (hover:hover){.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #14111A;filter:none}}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #14111A}

/* imagens como posts; casos como cards de feed */
.foto{border-width:2px;box-shadow:4px 4px 0 #14111A}
.caso{background:#fff;border:2px solid #14111A;box-shadow:4px 4px 0 #14111A;padding-top:0;overflow:hidden}
.caso::before{content:"";display:block;height:6px;margin:0 calc(var(--s4) * -1) var(--s4);background:var(--grad);border-bottom:2px solid #14111A}
.autoriza{border:2px dashed #14111A;font-style:normal}
.perfil{border-width:2px;border-color:#14111A;box-shadow:4px 4px 0 #14111A}
.valores p{border:2px solid #14111A;box-shadow:3px 3px 0 #14111A;background:#FFE4EC}
.valores p:nth-child(2){transform:rotate(-1deg)}.valores p:nth-child(3){transform:rotate(1deg)}

/* VSL + timer */
.player{background:#14111A;border:2px solid #14111A;box-shadow:6px 6px 0 #DD2A7B}
.player-tag .play{background:var(--grad);color:#fff}
.timer-card{background:#fff;border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.timer-rot{color:#DD2A7B;font-family:var(--font-display)}
.relogio .cx{border:2px solid #14111A;box-shadow:3px 3px 0 #DD2A7B;border-radius:18px}
.relogio .n{font-family:var(--font-display);font-weight:900}
.relogio .dp{color:#14111A}

/* oferta: parabens em gradiente instagram */
.parabens{background:var(--grad);border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}
.parabens::before{background:radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.6px) 0 0/18px 18px}
.parabens p{color:#fff;text-shadow:2px 2px 0 rgba(20,17,26,.35)}
.parabens .big{font-weight:900;color:#FEDA75;text-shadow:4px 4px 0 #14111A}
.cadeado{background:#fff;color:#DD2A7B;border:2px solid #14111A;box-shadow:3px 3px 0 #14111A}
.bonus{border:2px solid #14111A;box-shadow:5px 5px 0 #14111A}
.bonus:nth-child(1){transform:rotate(-1deg)}.bonus:nth-child(3){transform:rotate(1deg)}
.bonus-n{border:2px solid #14111A;box-shadow:2px 2px 0 #14111A}
.gratis{border:2px solid #14111A;box-shadow:2px 2px 0 #14111A}
.selo{background:#FEDA75;color:#14111A;border:2px solid #14111A;outline:0;box-shadow:4px 4px 0 #14111A}
.faixa.azul-bg{background:#515BD4;border:2px solid #14111A}
.pacote{border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}
.pacote-cab{background:var(--grad);border-bottom:2px solid #14111A}
.pacote-cab::after{display:none}
.quadro-rot{color:#14111A}
.quadro-rot::before,.quadro-rot::after{background:#14111A;height:2px}
.quadro-rot.bx{color:#DD2A7B}
.quadro-rot.bx::before,.quadro-rot.bx::after{background:#DD2A7B}
.itens li + li{border-top:2px dotted #EBD7E1}
.itens li::before{background-color:#00A86B;border:2px solid #14111A;box-sizing:border-box}
.bx-lista{background:#FFF0F6;border:2px solid #14111A}
.bx-lista li + li{border-top:2px dotted #EBC3D5}
.bx-lista .n{border:2px solid #14111A;border-radius:50%}
.bx-lista .azul{color:#DD2A7B}
.fecho{background:#FFF7FB;border-top:2px solid #14111A}
.vagas{color:#E1306C}
.arte-bonus{border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}

/* pagamento */
.pag{border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}
.pag-topo{background:#FFF0F6;border-bottom:2px solid #14111A}
.pag-valor{color:#14111A;text-shadow:3px 3px 0 #FEDA75}
.campo input{border:2px solid #14111A;border-radius:16px;box-shadow:3px 3px 0 #EEDBE5}
.campo input:focus{border-color:#DD2A7B;box-shadow:3px 3px 0 #DD2A7B}
.confere{border:2px solid #14111A}
.confianca svg{color:#DD2A7B}
.px-chip{border:2px solid #14111A}
.px-chip.status{border-color:#14111A}
.px-codigo{border:2px dashed #14111A}
.btn.copiar{border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.px-qrbox{border:2px solid #14111A;box-shadow:4px 4px 0 #DD2A7B}
.px-como li::before{background:#DD2A7B;color:#fff}
.px-gerando .gira{color:#DD2A7B}

/* pos-compra, upsell e obrigado */
.pos-faixa{border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.up{border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}
.btn.up-sim{border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.up.feito{border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.conf{border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}
.liberado,.fim{border:2px solid #14111A}
.obg-hero{border-bottom:2px solid #14111A}
.obg-card{border:2px solid #14111A;box-shadow:6px 6px 0 #14111A}
.obg-selo{border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.obg-chip{background:#FEDA75;color:#14111A;border:2px solid #14111A}
.btn.whats{border:2px solid #14111A;box-shadow:4px 4px 0 #14111A}
.obg-link{border:2px solid #14111A;box-shadow:3px 3px 0 #14111A}
.obg-num{background:#14111A}