/* LBS-SRC — folha de estilo derivada do design system do site do LBS (bioinfo.dcc.ufmg.br) */

:root{
  --color-background:251 253 255;
  --color-foreground:8 33 63;
  --color-ink:8 33 63;
  --color-muted:95 114 139;
  --color-line:220 232 244;
  --color-cloud:247 251 255;
  --color-cyan:19 155 215;
  --color-marine:15 111 184;
  --color-leaf:53 169 114;
  --color-amber:244 160 27;
  --color-surface:255 255 255;
  --color-surface-soft:247 251 255;
  --color-primary-surface:8 33 63;
  --color-shadow:15 64 105;
  --color-hero-start:251 253 255;
  --color-hero-mid:255 255 255;
  --color-hero-end:244 251 253;
  --plate:#ffffff;
  color-scheme:light;
  scroll-behavior:smooth;
}

html[data-theme="dark"]{
  --color-background:4 12 24;
  --color-foreground:232 244 255;
  --color-ink:232 244 255;
  --color-muted:154 179 205;
  --color-line:37 62 88;
  --color-cloud:9 25 43;
  --color-cyan:87 205 255;
  --color-marine:118 196 255;
  --color-leaf:98 220 157;
  --color-amber:248 184 76;
  --color-surface:8 22 39;
  --color-surface-soft:6 18 33;
  --color-primary-surface:13 42 72;
  --color-shadow:0 0 0;
  --color-hero-start:4 12 24;
  --color-hero-mid:6 18 33;
  --color-hero-end:8 28 43;
  --plate:#eef4fa;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;overflow-x:hidden;-webkit-text-size-adjust:100%;background:rgb(var(--color-background));-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(circle at 8% 16%,rgb(var(--color-leaf)/.08),transparent 24rem),
    radial-gradient(circle at 92% 12%,rgb(var(--color-cyan)/.08),transparent 28rem),
    linear-gradient(180deg,rgb(var(--color-hero-start)) 0,rgb(var(--color-hero-mid)) 42%,rgb(var(--color-hero-end)) 100%);
  color:rgb(var(--color-foreground));
  font-family:Inter,Manrope,Geist,ui-sans-serif,system-ui,sans-serif;
  line-height:1.5;text-rendering:geometricPrecision;
}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl{margin:0}

.serif{font-family:"Iowan Old Style",Newsreader,Fraunces,Georgia,serif}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* ---------- layout ---------- */
.gutter{padding-left:1.25rem;padding-right:1.25rem}
@media (min-width:640px){.gutter{padding-left:2rem;padding-right:2rem}}
@media (min-width:1024px){.gutter{padding-left:5vw;padding-right:5vw}}
@media (min-width:1440px){.gutter{padding-left:8vw;padding-right:8vw}}
.shell{margin-inline:auto;width:100%;max-width:80rem}
.doc{margin-inline:auto;width:100%;max-width:56rem}
.section-shell{position:relative;border-top:1px solid rgb(var(--color-line)/.9)}

.soft-card{
  border:1px solid rgb(var(--color-line)/.92);
  background:rgb(var(--color-surface)/.82);
  box-shadow:0 18px 45px rgb(var(--color-shadow)/.11);
  border-radius:1.5rem;
}

.scientific-motif{
  pointer-events:none;position:absolute;inset:0;overflow:hidden;opacity:.58;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.scientific-motif::before,.scientific-motif::after{
  content:"";position:absolute;width:19rem;height:19rem;
  border:1px solid rgb(var(--color-cyan)/.11);transform:rotate(30deg);
}
.scientific-motif::before{right:-9rem;top:3rem;border-radius:35% 48% 42% 46%}
.scientific-motif::after{left:-11rem;bottom:1rem;border-radius:44% 36% 49% 40%}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgb(var(--color-line)/.8);background:rgb(var(--color-surface)/.86);backdrop-filter:blur(18px)}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem}
.brand{display:flex;min-width:0;align-items:center;transition:transform .3s}
.brand:hover{transform:scale(1.03)}
.brand-mark{position:relative;display:block;height:3.42rem;width:9rem;flex-shrink:0}
@media (min-width:640px){.brand-mark{width:13.68rem}}
.brand-mark img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain}
.brand-logo-dark{opacity:0}
html[data-theme="dark"] .brand-logo-light{opacity:0}
html[data-theme="dark"] .brand-logo-dark{opacity:1}

.nav-links{display:none;align-items:center;gap:1.75rem}
@media (min-width:1024px){.nav-links{display:flex}}
.nav-links a{position:relative;font-size:1rem;font-weight:600;color:rgb(var(--color-ink)/.72);text-decoration:none;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-.375rem;height:2px;width:0;border-radius:999px;background:rgb(var(--color-cyan));transition:width .3s}
.nav-links a:hover{color:rgb(var(--color-marine))}
.nav-links a:hover::after{width:100%}

.nav-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{display:inline-flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgb(var(--color-line)/.9);background:rgb(var(--color-surface));color:rgb(var(--color-ink));box-shadow:0 1px 2px rgb(var(--color-shadow)/.08);cursor:pointer;transition:color .2s,border-color .2s}
.icon-btn:hover{border-color:rgb(var(--color-cyan)/.45);color:rgb(var(--color-marine))}
.icon-btn svg{height:1rem;width:1rem}
.pill-link{display:none;height:2.5rem;align-items:center;gap:.375rem;border-radius:999px;background:rgb(var(--color-primary-surface));padding-inline:1rem;font-size:.84375rem;font-weight:700;color:#fff;text-decoration:none;box-shadow:0 18px 45px rgb(var(--color-shadow)/.12);transition:transform .3s}
.pill-link:hover{transform:translateY(-2px)}
@media (min-width:640px){.pill-link{display:inline-flex}}
.pill-link svg{height:.875rem;width:.875rem}

.lang-switch{align-items:center;gap:.125rem;border-radius:999px;border:1px solid rgb(var(--color-line)/.9);background:rgb(var(--color-surface));padding:.25rem .375rem;box-shadow:0 1px 2px rgb(var(--color-shadow)/.08)}
@media (min-width:768px){.lang-switch{display:flex}}
.lang-switch a,.lang-switch button{display:inline-flex;height:2rem;min-width:2rem;align-items:center;justify-content:center;gap:.25rem;padding-inline:.5rem;border:0;background:none;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.06em;color:rgb(var(--color-ink)/.7);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
.lang-switch a:hover,.lang-switch button:hover{background:rgb(var(--color-cloud))}
.lang-switch [aria-current="page"],.lang-switch .is-active{background:rgb(var(--color-primary-surface));color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:3rem 2.5rem}
@media (min-width:1024px){.hero{padding-block:4rem 3.5rem}}
.hero-gradient{position:absolute;inset:0;z-index:-20;background:linear-gradient(135deg,rgb(var(--color-hero-start)) 0,rgb(var(--color-hero-mid)) 52%,rgb(var(--color-hero-end)) 100%)}
.hero-grid{display:grid;align-items:center;gap:2rem}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.25fr .75fr}}
.eyebrow{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.26em;color:rgb(var(--color-marine))}
.hero h1{margin-top:1rem;font-size:clamp(2.2rem,5.6vw,3.75rem);line-height:.98;color:rgb(var(--color-ink));text-wrap:balance}
.hero-lead{margin-top:1.5rem;max-width:38rem;font-size:1rem;line-height:1.75;color:rgb(var(--color-muted))}
@media (min-width:640px){.hero-lead{font-size:1.125rem;line-height:2}}
.version-tag{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;border-radius:999px;border:1px solid rgb(var(--color-line));background:rgb(var(--color-surface)/.85);padding:.4rem .9rem;font-size:.8125rem;font-weight:700;color:rgb(var(--color-ink)/.85)}
.version-tag .dot{height:.5rem;width:.5rem;border-radius:999px;background:rgb(var(--color-leaf))}
.hero-art{position:relative;justify-self:end;display:none}
@media (min-width:1024px){.hero-art{display:block}}
.hero-art svg{position:relative;height:16rem;width:16rem}

/* ---------- documento ---------- */
.doc-section{padding-block:3rem}
@media (min-width:1024px){.doc-section{padding-block:4rem}}

.figure{margin-top:2rem;overflow:hidden}
.figure-plate{background:var(--plate);padding:1rem;overflow-x:auto}
@media (min-width:640px){.figure-plate{padding:1.5rem}}
.figure-plate img{display:block;margin-inline:auto;width:100%;min-width:34rem;max-width:48rem}

.doc-body{margin-top:2.5rem;display:flex;flex-direction:column;gap:2.25rem}
.doc-body section{scroll-margin-top:6rem}
.doc-body h2{font-size:.875rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:rgb(var(--color-marine))}
.prose{margin-top:.75rem;display:flex;flex-direction:column;gap:1rem;font-size:.98rem;line-height:2;color:rgb(var(--color-ink)/.8)}
.prose a{color:rgb(var(--color-marine));font-weight:600;text-decoration:none;border-bottom:1px solid rgb(var(--color-cyan)/.4)}
.prose a:hover{color:rgb(var(--color-cyan))}
.prose ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.prose ul li{position:relative;padding-left:1.25rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.85em;height:.4rem;width:.4rem;border-radius:999px;background:rgb(var(--color-cyan))}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.9em;background:rgb(var(--color-cloud));border:1px solid rgb(var(--color-line)/.8);border-radius:.375rem;padding:.1rem .35rem}

.copy-block{margin-top:1.25rem;padding:1.25rem 1.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.875rem;line-height:2;color:rgb(var(--color-ink)/.85);overflow-x:auto}
.copy-block a{color:rgb(var(--color-marine));text-decoration:none;border-bottom:1px solid rgb(var(--color-cyan)/.4)}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;border-top:1px solid rgb(var(--color-line)/.9);background:rgb(var(--color-cloud));padding-block:3.5rem}
.footer-grid{display:grid;gap:2.5rem}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer-brand{max-width:24rem}
.footer-brand .brand-mark{height:4.75rem;width:19rem;max-width:100%}
.footer-brand p{margin-top:1.25rem;font-size:.875rem;line-height:1.5;color:rgb(var(--color-muted))}
.socials{margin-top:1.5rem;display:flex;align-items:center;gap:.75rem}
.footer-col p.head{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:rgb(var(--color-ink)/.7)}
.footer-col ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.footer-col a{font-size:.875rem;font-weight:600;color:rgb(var(--color-muted));text-decoration:none;transition:color .2s}
.footer-col a:hover{color:rgb(var(--color-marine))}
.footer-col li.contact{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;line-height:1.25rem;color:rgb(var(--color-muted))}
.footer-col li.contact svg{height:1rem;width:1rem;flex-shrink:0;margin-top:.15rem;color:rgb(var(--color-cyan))}
.footer-bottom{margin-top:3rem;display:flex;flex-direction:column;gap:.75rem;border-top:1px solid rgb(var(--color-line)/.8);padding-top:1.5rem;font-size:.75rem;font-weight:500;color:rgb(var(--color-muted))}
@media (min-width:640px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}}

.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}

/* documento simples */
.doc-body h2{margin-top:2.25rem;font-size:1.25rem;font-weight:800;color:rgb(var(--color-ink));letter-spacing:normal;text-transform:none}
.prose p.pattern{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1.25rem;font-weight:700;letter-spacing:.04em;color:rgb(var(--color-marine))}
.prose strong{font-weight:800;color:rgb(var(--color-ink))}