:root{--hero-h:64vh}

#pageIdentity .hero{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
#pageIdentity .hero-glow{position:absolute;inset:-40px;background:radial-gradient(700px 320px at 15% 30%, rgba(0,255,213,.18), transparent 65%),radial-gradient(560px 280px at 85% 40%, rgba(0,163,255,.12), transparent 60%);pointer-events:none}
#pageIdentity .hero-inner{position:relative;z-index:2}
#pageIdentity .kicker{margin:0 0 8px;color:var(--muted);font-weight:800;letter-spacing:.6px;text-transform:uppercase;font-size:.85rem}
#pageIdentity h1{margin:0;font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.1}
#pageIdentity .sub{margin:6px 0 0;color:var(--muted);max-width:64ch}
#pageIdentity .emerald{color:var(--primary)}

#pageIdentity .profile{position:relative;margin-top:-64px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;z-index:2}
#pageIdentity .avatar-wrap{position:relative;width:176px;height:176px;display:grid;place-items:center}
#pageIdentity .avatar{width:176px;height:176px;border-radius:50%;border:2px solid rgba(255,255,255,.16);object-fit:cover;object-position:center;background:#071a20}
#pageIdentity .aura{position:absolute;inset:-18px;border-radius:50%;filter:blur(18px);background:radial-gradient(closest-side, rgba(238,255,0,.14), rgba(179,255,0,.39), transparent 10%);animation:pulse 6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

#pageIdentity .name{font-weight:950;font-size:clamp(1.5rem,4vw,2.1rem);margin:8px 0 0}
#pageIdentity .ens{font-weight:800;color:var(--primary);margin:0}
#pageIdentity .ens a{color:var(--primary);text-decoration:none}
#pageIdentity .ens a:hover{text-decoration:underline}
#pageIdentity .pubkey{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
#pageIdentity .pubkey code{background:rgba(0,255,213,.12);padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10)}
#pageIdentity .copy-btn{padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);cursor:pointer;font-weight:950;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),linear-gradient(90deg, var(--primary), var(--accent));box-shadow:0 7px 16px rgba(0,0,0,.22)}
#pageIdentity .copy-ok{color:var(--primary);font-weight:900}

/* BOOK */
#pageIdentity .book-portal{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:18px 0 10px}
#pageIdentity .book-frame{max-width:1100px;margin:0 auto;padding:18px 16px;border-radius:22px;position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(0,255,213,.16), rgba(0,163,255,.12), rgba(10,31,39,.55));border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.28);transition:transform .18s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease}
#pageIdentity .book-frame::before{content:"";position:absolute;inset:-2px;background:radial-gradient(420px 260px at 12% 30%, rgba(0,255,213,.28), transparent 65%),radial-gradient(420px 260px at 88% 70%, rgba(0,163,255,.22), transparent 70%);filter:blur(6px);opacity:.35;pointer-events:none;transition:opacity .25s ease, filter .25s ease}
#pageIdentity .book-frame>*{position:relative;z-index:2}
#pageIdentity .book-frame:hover{transform:translateY(-2px);filter:saturate(118%);box-shadow:0 22px 48px rgba(0,0,0,.45),0 0 0 1px rgba(0,255,213,.18) inset}
#pageIdentity .book-frame:hover::before{opacity:.75;filter:blur(8px)}
#pageIdentity .book-frame.engaged{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,255,213,.28) inset}
#pageIdentity .book-frame.engaged::before{opacity:.92;filter:blur(9px)}

/* Badge */
#pageIdentity .book-badge{display:inline-flex;align-items:center;gap:8px;font-weight:950;letter-spacing:.6px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,#2cb5b7e9,#50c2c4df);border:1px solid rgba(255,255,255,.12);color:var(--text);text-transform:uppercase;font-size:.78rem;box-shadow:0 0 0 1px rgba(0,255,213,.12) inset,0 10px 22px rgba(0,0,0,.25)}
#pageIdentity .book-frame.engaged .book-badge{animation:badgePulse 1.2s ease-in-out infinite;box-shadow:0 0 0 1px rgba(0,255,213,.25) inset,0 0 18px rgba(0,255,213,.35)}
@keyframes badgePulse{0%,100%{transform:translateY(0);filter:saturate(110%)}50%{transform:translateY(-1px);filter:saturate(135%)}}

#pageIdentity .book-title{margin:10px 0 6px;font-size:1.6rem;font-weight:980}
#pageIdentity .book-sub{margin:0 0 14px;color:var(--muted);max-width:78ch}
#pageIdentity .book-note{opacity:.85}
#pageIdentity .book-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#pageIdentity .book-rune{position:absolute;right:16px;bottom:12px;font-size:3.2rem;opacity:.12;user-select:none}

/* CTA botones: ambos iguales */
#pageIdentity .btn-primary{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:10px 14px;text-decoration:none;font-weight:950;cursor:pointer;border:1px solid rgba(255,255,255,.18);color:#08101a;background:linear-gradient(90deg, var(--primary), #bff8ff);box-shadow:0 9px 18px rgba(0,0,0,.22)}
#pageIdentity .btn-primary:hover{transform:translateY(-1px);filter:saturate(125%) brightness(1.06);box-shadow:0 14px 28px rgba(0,0,0,.30),0 0 0 1px rgba(0,255,213,.22) inset,0 0 18px rgba(0,255,213,.35)}
#pageIdentity .book-frame.engaged .btn-primary{animation:ctaPulse 1.1s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{transform:translateY(0);filter:saturate(110%)}50%{transform:translateY(-1px);filter:saturate(140%)}}

#pageIdentity .buy-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.1}
#pageIdentity .buy-main{font-size:1rem;font-weight:950}
#pageIdentity .buy-sub{font-size:.7rem;font-weight:700;opacity:.85;letter-spacing:.4px;text-transform:uppercase}

/* Tema claro: book + CTA contraste fuerte (para que NO se funda con el fondo) */
html.light #pageIdentity .book-frame{background:linear-gradient(135deg, rgba(0,255,213,.22), rgba(0,200,170,.18), rgba(200,255,245,.55));border-color:rgba(0,163,255,.18)}
html.light #pageIdentity .btn-primary{background:linear-gradient(135deg,#00cbb0,#00a3ff);color:#08101a;border-color:rgba(0,163,255,.55);box-shadow:0 10px 22px rgba(0,163,255,.45),0 0 0 1px rgba(255,255,255,.65) inset}
html.light #pageIdentity .btn-primary:hover{box-shadow:0 18px 36px rgba(0,163,255,.55),0 0 0 1px rgba(0,163,255,.45) inset,0 0 22px rgba(0,163,255,.45)}

/* SOCIAL CARDS */
#pageIdentity .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
#pageIdentity .social-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;text-decoration:none;color:var(--text);background:color-mix(in oklab,var(--panel),transparent 25%);border:1px solid var(--border);backdrop-filter:blur(10px);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease}
#pageIdentity .social-card:hover{transform:translateY(-2px);filter:saturate(115%);border-color:rgba(0,255,213,.35);box-shadow:0 14px 32px rgba(0,0,0,.35),0 0 0 1px rgba(0,255,213,.25) inset}
#pageIdentity .social-card .platform{font-weight:900;font-size:14px}
#pageIdentity .social-card .desc{font-size:12px;opacity:.75}
html.light #pageIdentity .social-card{background:linear-gradient(135deg, rgba(0,255,213,.18), rgba(200,255,245,.55))}

#pageIdentity .social-card .row{display:flex;align-items:center;gap:10px}
#pageIdentity .social-card .ico{width:22px;height:22px;flex:0 0 22px;display:block}

#pageIdentity .cards-grid,
#cards.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:16px;
justify-content:center;
margin-top:16px;
}


#pageIdentity .social-card{
display:grid;
grid-template-columns:92px 1fr;
align-items:stretch;
gap:0;
padding:0;
border-radius:18px;
overflow:hidden;
text-decoration:none;
color:var(--text);
background:color-mix(in oklab,var(--panel),transparent 25%);
border:1px solid var(--border);
backdrop-filter:blur(10px);
min-height:92px;
max-height:92px;
}

#pageIdentity .social-card .icon-pane{
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,rgba(0,255,213,.22),rgba(0,163,255,.16));
}

#pageIdentity .social-card .ico{
width:100%;
height:100%;
padding:18px;
object-fit:contain;
display:block;
}

#pageIdentity .social-card .text-pane{
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
padding:12px 14px;
min-width:0;
min-height:0; /* clave para evitar empujes */
overflow:hidden;
}

#pageIdentity .social-card .platform{
font-weight:700;
font-size:14px;
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}


#pageIdentity .social-card .desc{
  font-size:12px;
  line-height:1.2;
  opacity:.78;

  /* Estándar moderno */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Fallback WebKit */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* Estándar emergente */
  line-clamp: 2;
}



/* Tema claro: mantener contraste suave */
html.light #pageIdentity .social-card{
background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.68));
border-color:rgba(0,0,0,.06);
}