:root {
  --navy: #062c5c; --blue: #07539d; --blue-2: #0b6bc1; --ink: #0a2342;
  --muted: #637386; --line: rgba(8,55,102,.12); --surface: #fff;
  --soft: #f4f8fc; --shadow: 0 22px 70px rgba(4,31,61,.18); --radius: 30px;
}
*{box-sizing:border-box} html{background:#eaf1f8}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,rgba(26,114,193,.16),transparent 32rem),linear-gradient(180deg,#edf4fa 0%,#f8fbfd 65%,#edf4fa 100%)}
a{color:inherit} button,a{-webkit-tap-highlight-color:transparent}
.page-shell{width:min(100%,760px);margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 14px max(28px,env(safe-area-inset-bottom))}
.card{overflow:hidden;background:var(--surface);border:1px solid rgba(8,55,102,.09);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{position:relative;padding:26px 24px 30px;color:#fff;background:linear-gradient(135deg,rgba(4,41,87,.98),rgba(5,84,155,.94)),#07539d}
.hero-pattern{position:absolute;inset:0;opacity:.22;background:radial-gradient(circle at 86% 22%,rgba(255,255,255,.42) 0 1px,transparent 2px),radial-gradient(circle at 65% 54%,rgba(255,255,255,.22) 0 1px,transparent 2px);background-size:34px 34px,52px 52px;mask-image:linear-gradient(to left,#000,transparent 70%)}
.institution-mark{position:relative;display:flex;align-items:center;gap:11px;width:max-content;max-width:calc(100% - 60px);padding:8px 10px;border:1px solid rgba(255,255,255,.30);border-radius:16px;background:rgba(255,255,255,.93);box-shadow:0 8px 24px rgba(0,0,0,.13);backdrop-filter:blur(10px)}
.brand-logo{display:flex;align-items:center;justify-content:center;text-decoration:none;min-width:0}.brand-logo img{display:block;max-width:100%;height:auto;object-fit:contain}.brand-upsi{width:168px}.brand-upsi img{max-height:58px}.brand-meta{width:94px}.brand-meta img{max-height:58px}.brand-divider{width:1px;height:46px;background:rgba(6,44,92,.15);flex:0 0 auto}
.share-button{position:absolute;top:22px;right:20px;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;background:rgba(255,255,255,.11);cursor:pointer;backdrop-filter:blur(8px)}
.share-button svg{width:21px;height:21px;fill:currentColor}
.identity{position:relative;display:grid;grid-template-columns:154px 1fr;align-items:end;gap:22px;margin-top:36px}
.photo-ring{width:154px;height:154px;padding:5px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 16px 32px rgba(0,0,0,.24)}
.profile-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 22%;border-radius:50%}
.eyebrow{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#cce6ff}
h1{margin:0;font-size:clamp(27px,5vw,38px);line-height:1.04;letter-spacing:-.03em}
.position{margin:8px 0 0;color:#d7ebff;font-size:18px;font-weight:700}
.faculty{margin:9px 0 0;font-size:14px;font-weight:650}.university{margin:4px 0 0;max-width:440px;font-size:13px;line-height:1.45;opacity:.82}
.tagline{padding:22px 24px;text-align:center;background:linear-gradient(90deg,#f3f8fd,#fff,#f3f8fd);border-bottom:1px solid var(--line)}
.tagline p{margin:0;font-size:15px;font-weight:760;line-height:1.6;color:#0b3d72}.tagline span{color:#2f81ca;padding:0 4px}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:22px 20px 12px}
.action{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:92px;padding:12px 8px;border:1px solid var(--line);border-radius:18px;text-decoration:none;font-size:12px;font-weight:780;background:#fbfdff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.action:hover,.action:focus-visible{transform:translateY(-2px);border-color:rgba(0,88,167,.28);box-shadow:0 10px 24px rgba(5,62,117,.1);outline:none}
.action-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff}.action-icon svg{width:25px;height:25px;fill:currentColor}
.phone{background:linear-gradient(135deg,#0e9b5a,#23bf76)}.email{background:linear-gradient(135deg,#0b72d1,#43a1f6)}.whatsapp{background:linear-gradient(135deg,#119c52,#28ce70)}.web{background:linear-gradient(135deg,#5d42ce,#8d65ea)}
.primary-cta{padding:10px 20px 24px}.save-contact{display:flex;justify-content:center;align-items:center;gap:10px;min-height:58px;padding:14px 18px;color:#fff;text-decoration:none;font-size:17px;font-weight:850;border-radius:17px;background:linear-gradient(135deg,var(--navy),var(--blue-2));box-shadow:0 12px 28px rgba(5,70,133,.25)}
.save-contact svg{width:24px;height:24px;fill:currentColor}.cta-note{margin:9px 6px 0;color:var(--muted);font-size:11px;text-align:center}
.academic{padding:24px 20px;border-top:1px solid var(--line);background:var(--soft)}.section-heading h2,.qr-section h2{margin:2px 0 0;font-size:21px;letter-spacing:-.02em}
.section-kicker{margin:0;color:#3f77ab;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:850}
.academic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}
.academic-link{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;min-width:0;padding:13px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none}
.academic-badge{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eaf4ff;color:#07539d;font-weight:900}.academic-badge.orcid{background:#eef9df;color:#4d7d18}
.academic-link strong,.academic-link small{display:block;min-width:0}.academic-link strong{font-size:13px}.academic-link small{margin-top:2px;color:var(--muted);font-size:10px;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.arrow{color:#6e8498;font-size:16px}
.qr-section{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:24px 20px;border-top:1px solid var(--line)}
.qr-copy{max-width:380px;margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.qr-card{display:grid;place-items:center;width:154px;height:154px;padding:10px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(7,52,96,.08)}
#qrcode img,#qrcode canvas{display:block;width:128px!important;height:128px!important}
footer{padding:20px 24px 24px;text-align:center;border-top:1px solid var(--line)}footer p{margin:0;font-size:11px;color:var(--muted);line-height:1.55}footer p:first-child{font-weight:800;color:#365c7d}
@media(max-width:620px){.page-shell{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.card{border-radius:0;border-left:0;border-right:0}.hero{padding:22px 18px 24px}.identity{grid-template-columns:118px 1fr;gap:15px;margin-top:32px}.photo-ring{width:118px;height:118px}h1{font-size:27px}.position{font-size:16px}.faculty{font-size:12px}.university{font-size:11px}.actions{gap:7px;padding-left:14px;padding-right:14px}.action{padding:10px 3px;min-height:88px;font-size:10px}.action-icon{width:46px;height:46px}.academic-grid{grid-template-columns:1fr}.qr-section{grid-template-columns:1fr;text-align:center;justify-items:center}}
@media(max-width:390px){.brand-upsi{width:125px}.brand-meta{width:72px}.brand-upsi img,.brand-meta img{max-height:46px}.brand-divider{height:36px}.identity{grid-template-columns:100px 1fr;gap:12px}.photo-ring{width:100px;height:100px}h1{font-size:23px}.institution-subtitle{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}