/* ============================================================
   Zupptree · estilos de la página pública
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --accent:#22d3ee;
  --font-display:"Bricolage Grotesque",serif;
  --font-body:"Outfit",system-ui,sans-serif;
}

/* ---------- Temas ---------- */
[data-theme="midnight"]{
  --bg:#0a0a0f; --bg2:#12121c;
  --fg:#f4f4f8; --muted:#8a8aa0;
  --btn-bg:rgba(255,255,255,.05); --btn-bd:rgba(255,255,255,.10);
  --btn-bg-h:rgba(255,255,255,.10);
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --grain:.04;
}
[data-theme="zupp"]{
  --bg:#0b1437; --bg2:#1b2e7a;
  --fg:#eef2ff; --muted:#9fb0e6;
  --btn-bg:rgba(255,255,255,.09); --btn-bd:rgba(130,160,255,.30);
  --btn-bg-h:rgba(255,255,255,.18);
  --shadow:0 14px 50px rgba(27,110,243,.40);
  --grain:.04;
}
[data-theme="zupp"] body{
  background:
    radial-gradient(120% 85% at 50% -10%, #5A2EE0 0%, #1B6EF3 34%, #0DA3F2 52%, var(--bg) 78%),
    var(--bg);
}
[data-theme="mono"]{
  --bg:#f6f5f2; --bg2:#efeee9;
  --fg:#16160f; --muted:#6b6b60;
  --btn-bg:#ffffff; --btn-bd:#1d1d14;
  --btn-bg-h:#16160f;
  --shadow:5px 5px 0 #16160f;
  --grain:.02;
}
[data-theme="sunset"]{
  --bg:#1a0e1e; --bg2:#3a1530;
  --fg:#fff4ec; --muted:#e0a9b8;
  --btn-bg:rgba(255,255,255,.08); --btn-bd:rgba(255,180,140,.25);
  --btn-bg-h:rgba(255,255,255,.16);
  --shadow:0 12px 50px rgba(255,90,120,.18);
  --grain:.05;
}
[data-theme="forest"]{
  --bg:#07150f; --bg2:#0e2419;
  --fg:#eef7ef; --muted:#8fb89e;
  --btn-bg:rgba(255,255,255,.05); --btn-bd:rgba(120,220,160,.20);
  --btn-bg-h:rgba(255,255,255,.11);
  --shadow:0 10px 40px rgba(0,40,20,.6);
  --grain:.045;
}
[data-theme="ocean"]{
  --bg:#061521; --bg2:#0b2c45;
  --fg:#eaf5ff; --muted:#8fb6d9;
  --btn-bg:rgba(255,255,255,.06); --btn-bd:rgba(120,200,255,.22);
  --btn-bg-h:rgba(255,255,255,.13);
  --shadow:0 12px 44px rgba(0,60,110,.45); --grain:.04;
}
[data-theme="grape"]{
  --bg:#150a24; --bg2:#2b1148;
  --fg:#f4ecff; --muted:#bba2da;
  --btn-bg:rgba(255,255,255,.06); --btn-bd:rgba(190,150,255,.22);
  --btn-bg-h:rgba(255,255,255,.13);
  --shadow:0 12px 46px rgba(90,40,200,.35); --grain:.045;
}
[data-theme="royal"]{
  --bg:#0a0e2a; --bg2:#161d4f;
  --fg:#eef0ff; --muted:#9aa6e0;
  --btn-bg:rgba(255,255,255,.06); --btn-bd:rgba(140,160,255,.24);
  --btn-bg-h:rgba(255,255,255,.13);
  --shadow:0 12px 46px rgba(30,40,140,.45); --grain:.04;
}
[data-theme="slate"]{
  --bg:#0f1115; --bg2:#1b1f27;
  --fg:#eef0f4; --muted:#9aa3b2;
  --btn-bg:rgba(255,255,255,.05); --btn-bd:rgba(255,255,255,.12);
  --btn-bg-h:rgba(255,255,255,.10);
  --shadow:0 10px 40px rgba(0,0,0,.5); --grain:.035;
}
[data-theme="ember"]{
  --bg:#190d08; --bg2:#3a160c;
  --fg:#fff1e8; --muted:#e0aa8f;
  --btn-bg:rgba(255,255,255,.06); --btn-bd:rgba(255,160,110,.24);
  --btn-bg-h:rgba(255,255,255,.13);
  --shadow:0 12px 46px rgba(200,80,20,.3); --grain:.05;
}
[data-theme="candy"]{
  --bg:#fdf0f6; --bg2:#fbe1ee;
  --fg:#2a1020; --muted:#9c6b82;
  --btn-bg:#ffffff; --btn-bd:#d36aa0;
  --btn-bg-h:#ffe4f1;
  --shadow:0 10px 30px rgba(210,90,150,.18); --grain:.02;
}
[data-theme="sand"]{
  --bg:#f7f3ea; --bg2:#efe6d4;
  --fg:#2a2114; --muted:#8a7a5c;
  --btn-bg:#ffffff; --btn-bd:#caa86a;
  --btn-bg-h:#f3ead6;
  --shadow:0 10px 30px rgba(150,120,60,.16); --grain:.02;
}
[data-theme="rose"]{
  --bg:#1a0c12; --bg2:#3a1420;
  --fg:#ffeef4; --muted:#d99fb0;
  --btn-bg:rgba(255,255,255,.06); --btn-bd:rgba(255,150,180,.24);
  --btn-bg-h:rgba(255,255,255,.13);
  --shadow:0 12px 46px rgba(210,60,110,.3); --grain:.045;
}
[data-theme="mint"]{
  --bg:#07181a; --bg2:#0e3034;
  --fg:#e6fbf7; --muted:#87c4bb;
  --btn-bg:rgba(255,255,255,.06); --btn-bd:rgba(120,240,210,.22);
  --btn-bg-h:rgba(255,255,255,.13);
  --shadow:0 12px 44px rgba(0,120,100,.3); --grain:.04;
}
[data-theme="coffee"]{
  --bg:#160f0a; --bg2:#2e2016;
  --fg:#f7efe6; --muted:#c2a991;
  --btn-bg:rgba(255,255,255,.05); --btn-bd:rgba(220,180,140,.22);
  --btn-bg-h:rgba(255,255,255,.11);
  --shadow:0 10px 40px rgba(60,40,20,.5); --grain:.045;
}
[data-theme="lavender"]{
  --bg:#f3f0fb; --bg2:#e7e1f6;
  --fg:#211a33; --muted:#7a6f99;
  --btn-bg:#ffffff; --btn-bd:#b9a9e0;
  --btn-bg-h:#efeafb;
  --shadow:0 10px 30px rgba(130,100,210,.16); --grain:.02;
}
[data-theme="steel"]{
  --bg:#0c1118; --bg2:#1a2636;
  --fg:#eaf0f7; --muted:#93a4ba;
  --btn-bg:rgba(255,255,255,.05); --btn-bd:rgba(150,180,220,.2);
  --btn-bg-h:rgba(255,255,255,.11);
  --shadow:0 10px 40px rgba(20,40,70,.5); --grain:.035;
}

html,body{min-height:100%}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg2), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  display:flex; justify-content:center;
  padding:clamp(20px,6vw,64px) 18px;
  -webkit-font-smoothing:antialiased;
}
[data-theme="sunset"] body{
  background:
    radial-gradient(110% 70% at 50% -5%, #ff6b6b 0%, #c0398f 30%, var(--bg) 70%),
    var(--bg);
}

/* grano sutil sobre todo */
.bg-grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.card{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  display:flex; flex-direction:column; align-items:center;
}

/* ---------- Perfil ---------- */
.profile{ text-align:center; width:100%; }
.avatar{
  width:104px; height:104px; margin:0 auto 18px;
  border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--btn-bg);
  border:2px solid var(--accent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent);
  animation:pop .6s cubic-bezier(.2,.8,.2,1) both;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-fallback{
  font-family:var(--font-display); font-weight:800; font-size:44px;
  color:var(--accent);
}
.name{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px,7vw,34px); letter-spacing:-.02em;
  animation:rise .6s .08s both;
}
.bio{
  color:var(--muted); margin-top:8px; line-height:1.5;
  font-size:15.5px; max-width:42ch; margin-inline:auto;
  animation:rise .6s .14s both;
}

/* ---------- Socials ---------- */
.socials{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-top:18px; animation:rise .6s .2s both;
}
.social{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; color:var(--fg);
  background:var(--btn-bg); border:1px solid var(--btn-bd);
  transition:transform .18s, color .18s, background .18s;
}
.social svg{ width:21px; height:21px; }
.social:hover{ transform:translateY(-3px); color:var(--accent);
  background:var(--btn-bg-h); }
.social.has-label{ width:auto; display:inline-flex; align-items:center; gap:8px; padding:0 15px; }
.social-label{ font-size:13.5px; font-weight:600; white-space:nowrap; }

/* ---------- Botones de enlaces ---------- */
.links{ width:100%; margin-top:30px; display:flex;
  flex-direction:column; gap:13px; }

.link-header{
  font-family:var(--font-display); font-weight:700;
  font-size:13px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); text-align:center; margin-top:14px;
  animation:rise .5s both;
}
.link-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:17px 44px; border-radius:16px; text-decoration:none;
  color:var(--fg); font-weight:600; font-size:16px;
  background:var(--btn-bg); border:1px solid var(--btn-bd);
  box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), background .2s;
  animation:rise .5s both;
}
.link-title{ text-align:center; }
.link-arrow{
  position:absolute; right:18px; opacity:.5;
  transition:transform .2s, opacity .2s;
}
.link-btn:hover{ transform:translateY(-3px) scale(1.01); }
.link-btn:hover .link-arrow{ opacity:1; transform:translate(2px,-2px); }
[data-theme="mono"] .link-btn:hover{ background:var(--btn-bg-h); color:#f6f5f2; }
[data-theme="mono"] .link-btn:active{ transform:translate(2px,2px); box-shadow:none; }

/* acento en el primer botón para jerarquía */
.link-btn:first-of-type{
  background:color-mix(in srgb,var(--accent) 16%,var(--btn-bg));
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ---------- Bloque de oferta (afiliado) ---------- */
.link-offer{ justify-content:flex-start; gap:12px; padding-left:14px; padding-right:64px; }
.offer-img{
  width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none;
  background:var(--btn-bd);
}
.offer-tag{
  position:absolute; right:14px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding:3px 8px; border-radius:999px;
}
.link-offer .link-title{ text-align:left; }

/* ---------- Bloque de captura de email ---------- */
.email-capture{
  width:100%; background:var(--btn-bg); border:1px solid var(--btn-bd);
  border-radius:16px; padding:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  animation:rise .5s both;
}
.email-cta{ font-weight:600; font-size:15px; text-align:center; }
.email-row{ display:flex; gap:8px; }
.email-capture input{
  flex:1; min-width:0; padding:12px 13px; font:inherit; font-size:15px;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--btn-bd); border-radius:11px; outline:none;
}
.email-capture input:focus{ border-color:var(--accent); }
.email-capture button{
  font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
  color:#04141a; background:var(--accent); border:0; border-radius:11px; padding:0 18px;
  transition:filter .15s;
}
.email-capture button:hover{ filter:brightness(1.08); }
.email-capture button:disabled{ opacity:.6; cursor:wait; }
.email-msg{ font-size:13.5px; text-align:center; color:var(--muted); }
.email-msg.ok{ color:var(--accent); }
[data-theme="mono"] .email-capture button{ color:#f6f5f2; background:var(--btn-bg-h); }

/* ---------- Branding ---------- */
.branding{ margin-top:34px; animation:rise .6s .5s both; }
.branding a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--muted); text-decoration:none; font-size:13px;
  padding:7px 14px; border-radius:999px; border:1px solid var(--btn-bd);
  transition:color .2s,border-color .2s;
}
.branding a:hover{ color:var(--accent); border-color:var(--accent); }
.bolt{ font-size:14px; }

/* ---------- Animaciones ---------- */
@keyframes rise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes pop{ from{opacity:0;transform:scale(.8)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }

/* ---------- Apariencia: forma de botones ---------- */
[data-btn-shape="pill"] .link-btn,
[data-btn-shape="pill"] .email-row input,
[data-btn-shape="pill"] .email-row button{ border-radius:999px; }
[data-btn-shape="square"] .link-btn,
[data-btn-shape="square"] .email-row input,
[data-btn-shape="square"] .email-row button{ border-radius:6px; }

/* ---------- Apariencia: relleno de botones ---------- */
[data-btn-fill="outline"] .link-btn{
  background:transparent;
  border:2px solid var(--accent);
  box-shadow:none;
}
[data-btn-fill="outline"] .link-btn .link-title{ color:var(--fg); }
[data-btn-fill="outline"] .link-btn:hover{ background:rgba(255,255,255,.06); }

/* ---------- Bloque producto / propina ---------- */
.product-block{
  display:flex; flex-direction:column; gap:9px; width:100%;
  padding:16px; border-radius:16px; background:var(--btn-bg);
  border:1px solid var(--btn-bd); box-shadow:var(--shadow);
  animation:rise .5s both;
}
[data-btn-shape="pill"] .product-block{ border-radius:22px; }
[data-btn-shape="square"] .product-block{ border-radius:6px; }
.product-title{ font-weight:600; color:var(--fg); }
.product-row{ display:flex; gap:8px; }
.product-row input{
  flex:1; min-width:0; padding:11px 12px; border-radius:10px;
  border:1px solid var(--btn-bd); background:rgba(255,255,255,.04); color:var(--fg); font:inherit;
}
.product-row button{
  flex:none; padding:11px 16px; border-radius:10px; border:0; cursor:pointer;
  background:var(--accent); color:#06121a; font:inherit; font-weight:700;
}

/* Icono/emoji opcional al inicio del botón */
.link-icon{ margin-right:10px; font-size:19px; line-height:1; flex:0 0 auto; }

/* ===== Página pública: barra superior, compartir, promo y pie ===== */
.link-btn, .email-capture, .product-block, .link-offer{ width:100%; }

body{ padding-top:74px; }

.zt-topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px clamp(14px,4vw,22px); pointer-events:none;
}
.zt-tb-btn{
  pointer-events:auto; position:relative; flex:0 0 auto; overflow:hidden;
  width:46px; height:46px; padding:0; border:0; cursor:pointer;
  border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--fg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .15s;
}
.zt-tb-btn::before{ content:""; position:absolute; inset:0; background:currentColor; opacity:.16; }
.zt-tb-btn:hover::before{ opacity:.28; }
.zt-tb-btn:hover{ transform:translateY(-1px); }
.zt-tb-btn svg, .zt-tb-btn img{ position:relative; z-index:1; }
.zt-tb-btn svg{ width:22px; height:22px; display:block; }
.zt-tb-btn img{ width:24px; height:24px; display:block; border-radius:6px; }
.zt-tb-btn.copied::after{
  content:"¡Copiado!"; position:absolute; top:52px; right:0; white-space:nowrap;
  background:var(--fg); color:var(--bg); font-size:12px; font-weight:700;
  padding:5px 9px; border-radius:8px;
}

/* Pie público */
.zt-pubfoot{ width:100%; max-width:520px; margin:30px auto 8px; text-align:center; }
.zt-foot-cta{
  display:inline-block; background:var(--fg); color:var(--bg);
  font-weight:700; font-size:15px; text-decoration:none;
  padding:14px 30px; border-radius:999px; box-shadow:var(--shadow);
  transition:transform .15s;
}
.zt-foot-cta:hover{ transform:translateY(-2px); }
.zt-foot-links{ margin-top:16px; font-size:13px; color:var(--muted); }
.zt-foot-links a{ color:var(--muted); text-decoration:none; }
.zt-foot-links a:hover{ text-decoration:underline; }

/* Popup de invitación a crear cuenta */
.zt-promo{
  position:fixed; inset:0; z-index:50; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.5); padding:0;
}
.zt-promo.open{ display:flex; }
.zt-promo-card{
  position:relative; width:100%; max-width:520px; color:#0A1330; background:#fff;
  border-radius:24px 24px 0 0; padding:30px clamp(22px,6vw,34px) calc(34px + env(safe-area-inset-bottom));
  animation:zt-slideup .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes zt-slideup{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.zt-promo-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border:0; cursor:pointer;
  border-radius:50%; background:#eef1f7; color:#0A1330; font-size:17px; line-height:1;
}
.zt-promo-mark{ width:42px; height:42px; border-radius:10px; display:block; margin-bottom:14px; }
.zt-promo h2{ font-family:var(--font-display); font-size:1.7rem; line-height:1.12; font-weight:800; margin:0 0 .55rem; color:#0A1330; }
.zt-promo p{ margin:0 0 1.3rem; font-size:1rem; line-height:1.5; color:#5b6577; }
.zt-promo-cta{
  display:block; text-align:center; text-decoration:none; font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(120deg,#0DA3F2,#1B6EF3 50%,#5A2EE0); padding:15px 22px; border-radius:14px;
}
.zt-promo-alt{ display:block; text-align:center; margin-top:12px; color:#1B6EF3; font-weight:600; text-decoration:none; font-size:14px; }

/* Preferencias de cookies (página pública) */
.zt-ck{ position:fixed; inset:0; z-index:55; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.5); }
.zt-ck.open{ display:flex; }
.zt-ck-card{ position:relative; width:100%; max-width:520px; background:#fff; color:#0A1330; border-radius:24px 24px 0 0; padding:28px clamp(22px,6vw,34px) calc(30px + env(safe-area-inset-bottom)); animation:zt-slideup .28s cubic-bezier(.2,.8,.2,1) both; }
.zt-ck-card h2{ font-family:var(--font-display); font-size:1.4rem; font-weight:800; margin:0 0 .5rem; color:#0A1330; }
.zt-ck-card p{ margin:0 0 1.3rem; font-size:.95rem; line-height:1.5; color:#5b6577; }
.zt-ck-actions{ display:flex; gap:10px; }
.zt-ck-actions button{ flex:1; padding:13px; border-radius:12px; font-weight:700; font-size:15px; cursor:pointer; border:0; }
.zt-ck-accept{ background:linear-gradient(120deg,#0DA3F2,#1B6EF3 50%,#5A2EE0); color:#fff; }
.zt-ck-reject{ background:#eef1f7; color:#0A1330; }
.zt-ck-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border:0; cursor:pointer; border-radius:50%; background:#eef1f7; color:#0A1330; font-size:17px; line-height:1; }

/* ---- Contador de visitas (3 diseños) ---- */
.zt-views{ margin:.8rem auto 0; font-size:.87rem; text-align:center; }
.zt-views b{ font-weight:800; }
.zt-views .zt-views-lbl{ opacity:.65; margin-left:.3em; }
.zt-views .zt-eye{ margin-right:.35em; }
/* 1 · Minimalista */
.zt-views-1{ opacity:.82; font-weight:500; }
/* 2 · Pastilla */
.zt-views-2{ display:inline-flex; align-items:center; padding:.38em .95em; border-radius:999px; font-weight:600;
  background:rgba(127,127,127,.14); border:1px solid rgba(127,127,127,.20); }
.zt-views-2 b{ color:var(--accent); }
.zt-views-2 .zt-views-lbl{ opacity:.78; }
/* 3 · Tarjeta */
.zt-views-3{ display:inline-flex; flex-direction:column; align-items:center; padding:.6em 1.3em; border-radius:16px; line-height:1.15;
  background:rgba(127,127,127,.12); border:1px solid rgba(127,127,127,.18); }
.zt-views-3 .zt-views-num{ font-size:1.5rem; font-weight:800; color:var(--accent); }
.zt-views-3 .zt-views-lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; margin:0; }