/* =============================================================
   JOELMA LINK NA BIO — ESTILOS
   Edite as cores principais em :root.
   Foto da personagem: assets/img/personagem.png
   ============================================================= */
:root{
      --pink:#ff9ec2;
      --pink-2:#ffd2e2;
      --pink-3:#fff0f6;
      --lilac:#caa6ff;
      --lilac-2:#eee2ff;
      --cream:#fff8f0;
      --brown:#9b6436;
      --ink:#251b23;
      --green:#9bd8b2;
      --orange:#ffb06f;
      --white:#ffffff;
      --shadow:0 16px 40px rgba(73,37,59,.14);
      --stroke:2px solid rgba(37,27,35,.9);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--ink);
      font-family:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;
      background:
        radial-gradient(circle at 10% 10%, rgba(255,255,255,.9) 0 8%, transparent 9%),
        radial-gradient(circle at 85% 18%, rgba(255,255,255,.7) 0 6%, transparent 7%),
        linear-gradient(145deg,#fff8f2 0%,#ffe3ee 45%,#f0e6ff 100%);
      overflow-x:hidden;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      border-radius:50%;
      filter:blur(4px);
      z-index:-2;
      animation:blob 10s ease-in-out infinite alternate;
    }
    body::before{width:300px;height:300px;background:#ffc0d8;top:-90px;left:-80px;opacity:.42}
    body::after{width:380px;height:380px;background:#cbb0ff;right:-150px;bottom:-120px;opacity:.34;animation-delay:-3s}

    .noise{
      position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.2;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
    }

    .page{width:min(100%,520px);margin:0 auto;padding:28px 18px 54px;position:relative}

    .top-badge{
      width:max-content;max-width:100%;margin:0 auto 16px;padding:9px 15px;
      background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:var(--stroke);border-radius:999px;
      font-weight:900;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 0 rgba(37,27,35,.08);
      animation:drop .7s cubic-bezier(.2,.9,.2,1) both;
    }

    .hero{text-align:center;position:relative;padding:8px 8px 12px}
    /* =========================================================
       FOTO DA PERSONAGEM
       - Troque apenas assets/img/personagem.png
       - Pode usar imagem QUADRADA: o CSS recorta automaticamente em círculo.
       - .avatar-wrap::before = moldura colorida externa.
       - .avatar-photo = círculo branco interno.
       ========================================================= */
    .avatar-wrap{width:178px;height:178px;margin:0 auto 14px;position:relative;animation:pop .8s cubic-bezier(.18,1.1,.3,1) both}
    .avatar-wrap::before{
      content:"";position:absolute;inset:-10px;border-radius:44% 56% 48% 52% / 56% 45% 55% 44%;
      background:linear-gradient(135deg,var(--pink),var(--lilac));border:var(--stroke);
      box-shadow:0 12px 28px rgba(73,37,59,.14);animation:wobble 6s ease-in-out infinite;
    }
    .avatar-photo{
      position:absolute;inset:4px;border-radius:50%;overflow:hidden;background:#fff;
      border:5px solid #fff;box-shadow:0 10px 24px rgba(62,32,51,.18);z-index:1;
    }
    .avatar{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
    .mini-heart{z-index:3}
    .mini-heart{position:absolute;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;border:var(--stroke);box-shadow:0 7px 0 rgba(37,27,35,.08);font-size:19px;animation:float 2.4s ease-in-out infinite}
    .mini-heart.h1{top:-6px;right:-9px}.mini-heart.h2{bottom:0;left:-10px;animation-delay:-.9s}

    h1{font-size:clamp(2rem,7vw,3rem);line-height:.98;margin:6px 0 9px;font-weight:1000;letter-spacing:-.04em}
    .highlight{display:inline-block;position:relative;z-index:0}
    .highlight::after{content:"";position:absolute;left:-4px;right:-4px;bottom:1px;height:13px;background:var(--pink);opacity:.5;border-radius:10px;z-index:-1;transform:rotate(-1deg)}
    .subtitle{margin:0 auto;max-width:390px;color:#5e4a59;font-size:1rem;line-height:1.45;font-weight:650}

    .micro-proof{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:17px 0 24px}
    .chip{padding:7px 10px;border-radius:999px;border:1.5px solid rgba(37,27,35,.65);background:rgba(255,255,255,.72);font-size:.76rem;font-weight:900;box-shadow:0 4px 0 rgba(37,27,35,.06)}

    .section-title{margin:23px 4px 10px;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;font-weight:1000;color:#6d5367}

    .link-card{
      position:relative;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
      padding:15px 16px;margin:0 0 14px;border:var(--stroke);border-radius:24px;box-shadow:0 9px 0 rgba(37,27,35,.10),var(--shadow);
      transform:translateY(16px);opacity:0;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
      overflow:hidden;isolation:isolate;
    }
    .link-card.visible{animation:reveal .55s cubic-bezier(.2,.85,.2,1) forwards}
    .link-card:hover{transform:translateY(-4px) rotate(-.35deg);box-shadow:0 13px 0 rgba(37,27,35,.10),0 24px 50px rgba(73,37,59,.18)}
    .link-card:active{transform:translateY(4px) scale(.99);box-shadow:0 4px 0 rgba(37,27,35,.10)}

    .link-card::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-34px;top:-48px;background:rgba(255,255,255,.28);z-index:-1}
    .link-card::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;right:46px;bottom:16px;background:rgba(255,255,255,.55);box-shadow:-22px -42px 0 4px rgba(255,255,255,.25);z-index:-1}

    .featured{background:linear-gradient(135deg,#ffd39d,#ffb578 52%,#ff9e80)}
    .group-card{background:linear-gradient(135deg,#d9f5e2,#a8dfbd)}
    .ebook-card{background:linear-gradient(135deg,#eadbff,#c8a7ff)}
    .ebook-card.alt{background:linear-gradient(135deg,#ffd9e8,#ffabc9)}
    .extra-card{background:linear-gradient(135deg,#fff7c5,#ffe298)}

    .icon-box{
      flex:0 0 62px;height:62px;border:var(--stroke);border-radius:19px;background:rgba(255,255,255,.78);
      display:grid;place-items:center;font-size:30px;box-shadow:inset 0 -6px 0 rgba(37,27,35,.04),0 5px 0 rgba(37,27,35,.09);
      transform:rotate(-2deg);transition:transform .25s ease;
    }
    .link-card:hover .icon-box{transform:rotate(6deg) scale(1.06)}

    .card-copy{min-width:0;flex:1}
    .eyebrow{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:1000;opacity:.68;margin-bottom:4px}
    .card-title{font-size:1.05rem;font-weight:1000;line-height:1.15}
    .card-desc{font-size:.82rem;line-height:1.3;margin-top:4px;color:#533f4d;font-weight:650}
    .arrow{flex:0 0 37px;height:37px;border-radius:50%;border:var(--stroke);display:grid;place-items:center;background:#fff;font-size:18px;font-weight:1000;transition:transform .25s ease}
    .link-card:hover .arrow{transform:translateX(4px) rotate(-8deg)}

    .corner-tag{position:absolute;right:14px;top:8px;background:#fff;border:1.5px solid var(--ink);padding:4px 8px;border-radius:999px;font-size:.62rem;font-weight:1000;transform:rotate(3deg);box-shadow:0 3px 0 rgba(37,27,35,.08)}
    .spark{position:absolute;font-size:15px;pointer-events:none;animation:spark 650ms ease-out forwards;z-index:20}

    .fun-box{
      margin-top:24px;padding:18px;border:var(--stroke);border-radius:28px;background:rgba(255,255,255,.62);backdrop-filter:blur(12px);
      box-shadow:0 8px 0 rgba(37,27,35,.08);position:relative;overflow:hidden;
    }
    .fun-box h2{font-size:1.1rem;margin:0 0 6px}.fun-box p{font-size:.85rem;line-height:1.45;color:#604b59;margin:0}
    .ticker{display:flex;gap:9px;margin-top:13px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
    .ticker-track{display:flex;gap:9px;width:max-content;animation:ticker 16s linear infinite}
    .ticker span{white-space:nowrap;padding:7px 10px;border-radius:999px;background:#fff;border:1.5px solid rgba(37,27,35,.7);font-size:.74rem;font-weight:900}

    footer{text-align:center;padding:26px 8px 0;color:#745f6e;font-size:.72rem;font-weight:800}
    footer .heartline{font-size:18px;letter-spacing:4px;margin-bottom:8px}

    .floating-heart{position:fixed;bottom:-40px;pointer-events:none;z-index:-1;opacity:.2;animation:rise linear forwards}

    .toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,130%);background:#251b23;color:#fff;padding:10px 14px;border-radius:999px;font-size:.78rem;font-weight:900;z-index:60;transition:transform .35s ease;box-shadow:0 12px 30px rgba(0,0,0,.18)}
    .toast.show{transform:translate(-50%,0)}

    @keyframes reveal{to{transform:translateY(0);opacity:1}}
    @keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pop{from{opacity:0;transform:scale(.65) rotate(-7deg)}to{opacity:1;transform:scale(1) rotate(0)}}
    @keyframes wobble{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.03)}}
    @keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
    @keyframes blob{to{transform:translate3d(20px,25px,0) scale(1.08)}}
    @keyframes ticker{to{transform:translateX(-50%)}}
    @keyframes rise{to{transform:translateY(-115vh) rotate(220deg);opacity:0}}
    @keyframes spark{0%{opacity:1;transform:translate(0,0) scale(.7)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.5)}}

    @media (max-width:380px){
      .page{padding-inline:13px}.avatar-wrap{width:155px;height:155px}.link-card{padding:13px 12px;gap:10px}.icon-box{flex-basis:54px;height:54px}.card-title{font-size:.98rem}
    }
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
      .link-card{opacity:1;transform:none}.ticker-track{transform:none}.floating-heart{display:none}
    }