/* ====== CORES: troque aqui para combinar com a logo da loja ====== */
  :root{
    --cor1:#ee7fa3;       /* rosa da logo */
    --cor2:#a985d6;       /* lilás da logo */
    --titulo:#e5728f;     /* cor do nome e títulos */
    --fundo1:#fde4ee;     /* fundo da página */
    --fundo2:#e6d9f7;
    --card:#fffdf9;
    --texto:#6b5b73;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{min-height:100%;background:linear-gradient(135deg,var(--fundo1),var(--fundo2)) no-repeat;background-size:100% 100%}
  body{
    font-family:'Poppins',system-ui,sans-serif;
    min-height:100vh;
    display:flex;justify-content:center;
    padding:20px 12px 100px;
    color:var(--texto);
  }
  .card{
    width:100%;max-width:400px;
    background:linear-gradient(180deg,var(--card) 0%,#fbf4ff 100%);
    border:3px dashed #e3d2f3;
    border-radius:22px;
    padding:28px 18px 26px;
    box-shadow:0 10px 40px rgba(0,0,0,.12);
    text-align:center;
    animation:sobe .6s ease both;
  }
  @keyframes sobe{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

  .avatar{
    width:104px;height:104px;border-radius:50%;
    margin:0 auto 14px;padding:3px;
    background:linear-gradient(135deg,var(--cor1),var(--cor2));
    box-shadow:0 4px 14px rgba(169,133,214,.35);
  }
  .avatar img,.avatar .ph{
    width:100%;height:100%;border-radius:50%;
    object-fit:cover;border:3px solid #fff;background:#fff;display:block;
  }
  .avatar .ph{display:flex;align-items:center;justify-content:center;
    font-family:'Fredoka',sans-serif;font-size:42px;color:var(--titulo)}

  h1{font-family:'Fredoka',sans-serif;color:var(--titulo);font-size:28px;line-height:1.2}
  h1::after{content:"";display:block;width:70px;height:5px;margin:8px auto 0;border-radius:5px;
    background:linear-gradient(90deg,#f6a5b8,#f9c98f,#f7e08f,#a9dcc4,#a8c8ef,#c5a8e8)}
  .bio{white-space:pre-line;font-size:13.5px;margin:8px 4px 22px;line-height:1.5}

  .links{display:flex;flex-direction:column;gap:12px}
  .btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 16px;border-radius:12px;
    background:linear-gradient(90deg,var(--cor1),var(--cor2));
    color:#fff;text-decoration:none;font-weight:600;font-size:15px;
    box-shadow:0 4px 12px rgba(169,133,214,.3);
    transition:transform .15s,box-shadow .15s;
  }
  .btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 18px rgba(169,133,214,.45)}
  .btn:active{transform:scale(.98)}
  .btn svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}

  h2{font-family:'Fredoka',sans-serif;color:var(--titulo);font-size:22px;margin:30px 0 14px}
  .galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .galeria figure{
    aspect-ratio:3/4;border-radius:12px;overflow:hidden;
    cursor:zoom-in;background:#f6eefc;box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .galeria img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;transition:transform .3s}
  .galeria figure:hover img{transform:scale(1.05)}
  .galeria .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:12px;color:var(--titulo);padding:10px;opacity:.75;cursor:default;word-break:break-all}

  footer{margin-top:22px;font-size:12px;opacity:.7}

  .whats{
    position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;
    background:#25d366;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:10;
    animation:pulsa 2s infinite;
  }
  .whats svg{width:34px;height:34px;fill:#fff}
  @keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

  .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;
    align-items:center;justify-content:center;z-index:20;padding:20px;cursor:zoom-out}
  .lightbox.on{display:flex}
  .lightbox img{max-width:100%;max-height:90vh;border-radius:12px}

  /* ====== Botão "ver catálogo completo" ====== */
  .btn-sec{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:10px 18px;border-radius:999px;
    border:2px solid var(--cor2);color:var(--cor2);font-weight:600;font-size:14px;text-decoration:none;transition:.15s}
  .btn-sec:hover{background:var(--cor2);color:#fff}

  /* ====== Página do catálogo ====== */
  .topo{display:flex;align-items:center;gap:12px;margin-bottom:18px;text-align:left}
  .voltar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--cor2);text-decoration:none;font-size:22px;line-height:1}
  .topo .mini{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--cor2);flex-shrink:0}
  .topo h1{font-size:22px}
  .topo h1::after{display:none}
  .topo small{display:block;font-size:12px;opacity:.8}
  .filtros{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
  .chip{border:2px solid #e3d2f3;background:#fff;color:var(--texto);padding:7px 14px;border-radius:999px;
    font:600 13px 'Poppins',sans-serif;cursor:pointer;transition:.15s}
  .chip.on{background:linear-gradient(90deg,var(--cor1),var(--cor2));border-color:transparent;color:#fff}
  .catalogo .item{display:flex;flex-direction:column;gap:6px}
  .catalogo .item[hidden]{display:none}
  .quero{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;border-radius:10px;
    background:#25d366;color:#fff;text-decoration:none;font-size:12.5px;font-weight:600}
  .quero svg{width:15px;height:15px;fill:#fff}
  .vazio{grid-column:1/-1;padding:30px 0;opacity:.7}

  /* lightbox com navegação */
  .lightbox{flex-direction:column;gap:14px}
  .lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;
    background:rgba(255,255,255,.18);color:#fff;font-size:26px;cursor:pointer}
  .lightbox .ant{left:10px}.lightbox .prox{right:10px}
  .lightbox .fechar{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;
    background:rgba(255,255,255,.18);color:#fff;font-size:22px;cursor:pointer}
  .lightbox .quero{padding:11px 22px;font-size:14px;border-radius:999px}
  .lightbox img{max-height:78vh}