/* CarreiraOS Bio · link hub independente.
   UI mobile-first de uma tela; sem barra branca e sem painel decorativo vazio.
   Alinhado aos tokens TechLeadOS, não integrado ao aplicativo.
*/
:root{
 --navy:#10283b;--navy-deep:#091b2b;--teal:#237f73;--teal-bright:#68d9c9;
 --ink:#eff8fb;--muted:#a7c0cd;--line:rgba(152,213,220,.2);
 --font-heading:'Manrope','DM Sans',system-ui,sans-serif;
 --font-body:'DM Sans',system-ui,sans-serif;
 color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;min-width:280px;font:400 14px/1.55 var(--font-body);color:var(--ink);
 -webkit-font-smoothing:antialiased;
 background:
  radial-gradient(ellipse 600px 360px at 52% -100px,rgba(62,162,158,.19),transparent 70%),
  radial-gradient(ellipse 350px 400px at 0% 100%,rgba(45,121,151,.13),transparent 73%),
  linear-gradient(135deg,#071827,#0c2434 55%,#081d2d);
}
body::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(#99f3e408 1px,transparent 1px),linear-gradient(90deg,#99f3e408 1px,transparent 1px);
 background-size:54px 54px;
 mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 86%);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid var(--teal-bright);outline-offset:4px;border-radius:9px}
::selection{background:var(--teal-bright);color:var(--navy-deep)}
.skip{
 position:absolute;left:12px;top:-70px;padding:10px 14px;background:#e0f4f3;color:#10283b;
 font:700 13px var(--font-heading);border-radius:8px;z-index:10;
}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hub-main{
 min-height:100vh;min-height:100dvh;
 display:grid;place-items:center;
 padding:clamp(18px,3.3vh,35px) 18px calc(clamp(18px,3.3vh,35px) + env(safe-area-inset-bottom));
}
.hub-app{
 width:min(100%,490px);position:relative;
 padding:28px 30px 22px;
 border:1px solid rgba(144,199,212,.18);
 border-radius:24px;
 background:linear-gradient(160deg,rgba(24,59,77,.65),rgba(10,31,46,.89));
 box-shadow:0 24px 75px rgba(0,10,20,.23),inset 0 1px rgba(255,255,255,.065);
}
.hub-app::before{
 content:"";pointer-events:none;position:absolute;inset:-1px;
 border-radius:24px;
 background:radial-gradient(ellipse 160px 110px at 50% 0%,rgba(90,219,201,.12),transparent 85%);
}
.hub-app>*{position:relative}
.hub-topline,.hub-links-heading{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 font:800 10px/1.25 var(--font-heading);letter-spacing:.12em;
}
.hub-topline{color:#9cbdca}
.hub-edition{display:inline-flex;align-items:center;gap:9px}
.hub-edition-mark{width:7px;height:7px;border-radius:50%;background:#6ce0c7;box-shadow:0 0 0 4px rgba(95,220,193,.1)}
.hub-edition-number{color:#7297aa}
.hub-header{text-align:center}
.hub-portrait{display:flex;justify-content:center;margin:16px auto 11px}
.brand-seal{
 position:relative;width:62px;height:62px;border-radius:18px;
 background:linear-gradient(155deg,#174254,#0a2334);border:1px solid #477789;
 display:grid;place-items:center;color:#f5fcfd;
 font:800 23px/1 var(--font-heading);letter-spacing:-.13em;padding-right:3px;
 box-shadow:0 14px 26px rgba(2,15,28,.25);
}
.brand-seal>span{
 position:absolute;width:9px;height:9px;border:2px solid #0b2535;border-radius:50%;right:6px;bottom:7px;background:var(--teal-bright);
}
.hub-overline{margin:0 0 5px;font:800 9px/1.5 var(--font-heading);letter-spacing:.21em;color:#78cebd}
h1{
 margin:0;font:800 clamp(26px,5vw,34px)/1.2 var(--font-heading);
 letter-spacing:-.067em;color:#f5f9fc;
}
h1 span{color:#92e2d4}
.hub-role{margin:5px 0 10px;font:750 11.5px/1.5 var(--font-heading);color:#c6dce4;letter-spacing:.005em}
.hub-role span{color:#6fc9bc;margin:0 3px}
.hub-description{max-width:375px;margin:0 auto 13px;font-size:13px;line-height:1.6;color:#b7cdd7}
.bio-specialties{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.bio-specialties>span{
 border:1px solid rgba(121,194,187,.26);
 background:rgba(72,148,149,.095);color:#b4d9db;border-radius:99px;
 padding:4px 10px;font:750 10px/1.5 var(--font-heading);
}
.hub-navigation{margin-top:22px}
.hub-links-heading{margin-bottom:11px;color:#8bacb9;font-size:9px;letter-spacing:.12em}
.hub-links-heading span:last-child{color:#7092a1}
.link-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.link-card{
 min-width:0;display:flex;align-items:center;gap:14px;
 padding:10px 13px;min-height:65px;
 border:1px solid #d4e5ea;
 border-radius:12px;
 background:#f4f8fa;color:#17384a;
 box-shadow:0 3px 0 rgba(0,0,0,.05);
 transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.link-card:hover{transform:translateY(-2px);background:#fff;border-color:#85cabc;box-shadow:0 9px 23px rgba(0,16,25,.15)}
.link-card:active{transform:translateY(0)}
.link-card.featured{
 background:linear-gradient(105deg,#8de9d9,#64d5c5);border-color:#91e5d6;
 color:#0c2d3c;box-shadow:0 9px 25px rgba(58,190,167,.18);
}
.link-card.featured:hover{background:#aff0e4}
.link-icon{
 width:40px;height:40px;flex:0 0 40px;
 border-radius:10px;display:grid;place-items:center;
 background:#e5eef3;color:#1b5262;
}
.link-card.featured .link-icon{background:#0a3b4217;color:#0f474f}
.link-icon svg{width:22px;height:22px}
.link-icon.hub-letter{font:800 23px/1 var(--font-heading)}
.link-card .copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}
.link-card .copy strong{font:800 13px/1.3 var(--font-heading);letter-spacing:-.01em}
.link-card .copy small{font-size:11.5px;line-height:1.38;color:#55707f;overflow-wrap:break-word}
.link-card.featured .copy small{color:#2a5760}
.link-card .arrow{width:19px;height:19px;flex:0 0 19px;color:#658797}
.link-card.featured .arrow{color:#175965}
.hub-footer{margin-top:17px}
.hub-actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.hub-actions a,.hub-actions button{
 border:1px solid rgba(127,181,191,.24);
 background:rgba(255,255,255,.035);
 padding:8px 11px;border-radius:8px;min-height:40px;
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 color:#c5dce2;font:700 10px/1.4 var(--font-heading);white-space:nowrap;cursor:pointer;
 transition:background .16s,border-color .16s;
}
.hub-actions a:hover,.hub-actions button:hover{background:rgba(125,203,197,.12);border-color:rgba(137,216,206,.5)}
.hub-actions svg{width:15px;height:15px;flex:none}
.hub-bottom{
 display:flex;justify-content:space-between;gap:12px;margin-top:17px;padding-top:12px;
 border-top:1px solid rgba(130,175,191,.13);
 font:650 10px/1.4 var(--font-heading);color:#8eaab9;
}
.hub-bottom a{text-decoration:underline;text-decoration-color:#507888;text-underline-offset:3px}
.hub-bottom a:hover{color:#c7eeeb}
@media(min-width:760px) and (min-height:780px){
 /* Keep the copyright/actions visible in a standard 844px desktop viewport. */
 .hub-app{padding-top:22px;padding-bottom:18px}
 .hub-portrait{margin-top:11px;margin-bottom:8px}
 .hub-navigation{margin-top:17px}
 .hub-description{margin-bottom:10px}
 .link-card{min-height:59px;padding-block:8px}
 .link-stack{gap:8px}
 .hub-footer{margin-top:13px}
 .hub-bottom{margin-top:11px;padding-top:10px}
}
@media(max-width:520px){
 .hub-main{place-items:start center;padding:14px 12px calc(16px + env(safe-area-inset-bottom))}
 .hub-app{padding:20px 17px 17px;border-radius:19px}
 .hub-app::before{border-radius:19px}
 .hub-portrait{margin:13px auto 8px}
 .brand-seal{width:58px;height:58px;border-radius:16px;font-size:22px}
 .hub-overline{font-size:8px;margin-bottom:4px}
 h1{font-size:clamp(25px,7.5vw,32px)}
 .hub-role{font-size:11px;margin-top:5px;margin-bottom:8px}
 .hub-description{font-size:12.5px;line-height:1.58;margin-bottom:11px}
 .bio-specialties>span{font-size:9px;padding:4px 8px}
 .hub-navigation{margin-top:19px}
 .hub-links-heading{margin-bottom:9px}
 .link-stack{gap:8px}
 .link-card{min-height:62px;padding:9px 12px;gap:12px}
 .link-icon{width:38px;height:38px;flex-basis:38px}
 .link-card .copy strong{font-size:13px}
 .link-card .copy small{font-size:11px}
 .hub-footer{margin-top:14px}
 .hub-actions{gap:6px}
 .hub-actions a,.hub-actions button{min-height:42px;padding:9px 10px;font-size:10px}
 .hub-bottom{margin-top:12px}
}
@media(max-width:350px){
 .hub-app{padding-inline:13px}
 .hub-topline{font-size:8px}
 .hub-description{font-size:12px}
 .hub-role{font-size:10.5px}
 .hub-actions a,.hub-actions button{padding:8px 7px;font-size:9px}
 .hub-actions svg{width:13px;height:13px}
 .link-card .copy small{font-size:10.5px}
}
@media(max-height:740px) and (min-width:520px){
 .hub-main{place-items:start center;padding-block:12px}
 .hub-app{padding-block:18px}
 .hub-portrait{margin-block:10px 7px}
 .hub-navigation{margin-top:16px}
 .hub-description{margin-bottom:9px}
 .link-card{min-height:58px;padding-block:7px}
 .link-stack{gap:7px}
 .hub-footer{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
@media print{
 body{background:#fff;color:#09293c}
 body::before,.skip,.hub-actions{display:none!important}
 .hub-app{box-shadow:none;border:1px solid #ccc;background:#fff;color:#10283b}
 .hub-topline,.hub-role,.hub-description,.hub-links-heading,.hub-bottom{color:#334}
 h1{color:#10283b}
 .link-card{box-shadow:none;border:1px solid #ccc}
}