@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
    --bg:#090b16;
    --panel:#111528;
    --text:#f7f7ff;
    --muted:#b9bfd8;
    --pink:#ff6bb5;
    --violet:#a78bfa;
    --cyan:#67e8f9;
    --lime:#c7f36b;
    --radius:24px;
    --shadow:0 18px 50px rgba(0,0,0,.28);
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}
body {
    margin:0;
    color:var(--text);
    font-family:'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.65;
    background:radial-gradient(circle at 12% 5%,rgba(167,139,250,.19),transparent 28rem),radial-gradient(circle at 92% 16%,rgba(103,232,249,.13),transparent 27rem),radial-gradient(circle at 50% 65%,rgba(255,107,181,.07),transparent 34rem),var(--bg);
    background-attachment:fixed;
}
a {
    color:var(--cyan);
}
a:hover {
    color:#fff;
}
.hero {
    max-width:1120px;
    margin:auto;
    padding:72px 24px 58px;
    text-align:center;
    position:relative;
}
.hero::before {
    content:"SEMANA TECNOLÓGICA DA FEAP";
    display:block;
    width:fit-content;
    margin:0 auto 24px;
    padding:9px 16px;
    color:var(--cyan);
    background:#67e8f90d;
    border:1px solid #67e8f940;
    border-radius:999px;
    font:600 .82rem 'Space Grotesk',sans-serif;
    letter-spacing:.12em;
}
.eyebrow {
    display:inline-block;
    padding:7px 14px;
    border:1px solid #ffffff26;
    border-radius:999px;
    color:var(--lime);
    background:#ffffff0a;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}
h1,h2 {
    font-family:'Space Grotesk','DM Sans',sans-serif;
}
h1 {
    max-width:950px;
    margin:24px auto 20px;
    font-size:clamp(2.7rem,7.5vw,6.1rem);
    line-height:.99;
    letter-spacing:-.065em;
    font-weight:700;
}
h1 span {
    display:inline-block;
    background:linear-gradient(95deg,var(--pink) 5%,var(--violet) 52%,var(--cyan) 95%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero p {
    max-width:760px;
    margin:0 auto;
    color:var(--muted);
    font-size:clamp(1rem,2vw,1.15rem);
}
.stats {
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:34px;
}
.stat {
    padding:12px 17px;
    color:var(--muted);
    background:#ffffff0b;
    border:1px solid #ffffff1c;
    border-radius:16px;
    font-size:.88rem;
    backdrop-filter:blur(12px);
}
.stat strong {
    color:var(--text);
}
main {
    max-width:1240px;
    margin:auto;
    padding:0 24px 76px;
}
.toolbar {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    align-items:end;
    justify-content:space-between;
    margin:0 0 44px;
    padding:20px;
    background:#111528dc;
    border:1px solid #ffffff20;
    border-radius:22px;
    box-shadow:var(--shadow);
    position:sticky;
    top:12px;
    z-index:5;
    backdrop-filter:blur(18px);
}
.toolbar>div {
    flex:1 1 280px;
    min-width:0;
}
.toolbar label {
    display:inline-block;
    margin-bottom:7px;
    color:#e4e7fa;
    font-size:.87rem;
    font-weight:700;
}
input,select {
    width:100%;
    min-height:48px;
    padding:12px 15px;
    border:1px solid #ffffff26;
    border-radius:14px;
    outline:none;
    color:var(--text);
    background:#0c1021;
    font:inherit;
    transition:border-color .2s,box-shadow .2s,background .2s;
}
input::placeholder {
    color:#7e86a7;
}
select {
    cursor:pointer;
}
input:focus,select:focus {
    border-color:var(--cyan);
    box-shadow:0 0 0 4px #67e8f91f;
    background:#10162b;
}
.timeline {
    position:relative;
    padding:8px 0;
}
.timeline::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:3px;
    border-radius:999px;
    background:linear-gradient(to bottom,var(--pink),var(--violet),var(--cyan),var(--lime));
    transform:translateX(-50%);
    opacity:.85;
}
.entry {
    position:relative;
    width:50%;
    padding:0 42px 34px 0;
}
.entry:nth-child(even) {
    margin-left:50%;
    padding:0 0 34px 42px;
}
.entry::before {
    content:"";
    position:absolute;
    top:28px;
    right:-9px;
    width:17px;
    height:17px;
    border-radius:50%;
    background:var(--pink);
    border:4px solid var(--bg);
    box-shadow:0 0 0 3px #ff6fb538,0 0 24px #ff6fb566;
    z-index:1;
}
.entry:nth-child(even)::before {
    right:auto;
    left:-9px;
    background:var(--cyan);
    box-shadow:0 0 0 3px #67e8f933,0 0 24px #67e8f94d;
}
.card {
    height:100%;
    overflow:hidden;
    padding:18px;
    border:1px solid #ffffff1c;
    border-radius:var(--radius);
    background:linear-gradient(145deg,#191f39f7,#0e1223f7);
    box-shadow:0 14px 35px #00000038;
    transition:transform .25s,border-color .25s,box-shadow .25s;
}
.card:hover {
    transform:translateY(-6px);
    border-color:#a78bfa8c;
    box-shadow:0 22px 48px #00000052,0 0 0 1px #a78bfa14;
}
.portrait-wrap {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));
    gap:9px;
    align-items:stretch;
    position:relative;
}
.portrait {
    width:100%;
    height:260px;
    object-fit:contain;
    object-position:center center;
    display:block;
    border-radius:12px;
    margin:0 0 16px;
    border:1px solid #ffffff20;
    background:#202943;
}
.portrait-wrap:has(.portrait:only-child) .portrait {
    height:285px;
}
.portrait-wrap .portrait:not(:only-child) {
    height:190px;
    object-fit:contain;
    background:#11172c;
}
.image-credit {
    grid-column:1/-1;
    margin:-7px 2px 12px;
    color:#8f98bb;
    font-size:.72rem;
}
.year {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:2px 0 8px;
    padding:5px 10px;
    border:1px solid #67e8f940;
    border-radius:8px;
    color:var(--cyan);
    background:#67e8f914;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
}
.entry:nth-child(odd) .year {
    color:#ff9ccc;
    border-color:#ff6fb540;
    background:#ff6fb514;
}
.card h2 {
    margin:4px 0 7px;
    font-size:clamp(1.2rem,2.1vw,1.55rem);
    line-height:1.2;
    letter-spacing:-.035em;
}
.origin {
    margin-bottom:13px;
    color:var(--muted);
    font-size:.86rem;
}
.tag {
    display:inline-block;
    margin:0 5px 8px 0;
    padding:5px 10px;
    border:1px solid #a78bfa47;
    border-radius:999px;
    color:#e7ddff;
    background:#a78bfa1c;
    font-size:.72rem;
    font-weight:700;
}
.card p {
    margin:7px 0 0;
    color:#d6daf0;
    font-size:.94rem;
    line-height:1.7;
}
.empty {
    display:none;
    margin:22px 0;
    padding:26px;
    border:1px dashed #ffffff33;
    border-radius:18px;
    color:var(--muted);
    text-align:center;
    background:#ffffff06;
}
.note {
    margin:32px 0 0;
    padding:25px 26px;
    border:1px solid #c7f36b40;
    border-radius:22px;
    color:var(--muted);
    background:linear-gradient(110deg,#c7f36b12,#67e8f90a);
}
.note strong {
    color:var(--lime);
}
footer {
    padding:32px 24px 48px;
    border-top:1px solid #ffffff17;
    color:#aab2d0;
    text-align:center;
    font-size:.88rem;
    background:#05070f59;
}
.backtop {
    display:inline-flex;
    margin-top:16px;
    padding:10px 17px;
    border:1px solid #67e8f94d;
    border-radius:999px;
    color:var(--cyan);
    text-decoration:none;
    font-weight:700;
    transition:background .2s,transform .2s;
}
.backtop:hover {
    background:#67e8f91a;
    transform:translateY(-2px);
}
[hidden] {
    display:none!important;
}
@media(max-width:760px) {
    .hero {
        padding:58px 20px 40px;
    }
    main {
        padding:0 16px 52px;
    }
    .toolbar {
        position:static;
        padding:16px;
        margin-bottom:30px;
    }
    .toolbar>div {
        flex-basis:100%;
    }
    .timeline::before {
        left:9px;
    }
    .entry,.entry:nth-child(even) {
        width:100%;
        margin-left:0;
        padding:0 0 24px 32px;
    }
    .entry::before,.entry:nth-child(even)::before {
        left:1px;
        right:auto;
        top:24px;
    }
    .card {
        padding:15px;
        border-radius:20px;
    }
    .portrait-wrap:has(.portrait:only-child) .portrait {
        height:260px;
    }
    .portrait-wrap .portrait:not(:only-child) {
        height:150px;
    }
    .stats {
        gap:8px;
    }
    .stat {
        flex:1 1 145px;
    }    
}
@media(max-width:420px) {
    h1 {
        font-size:clamp(2.45rem,14vw,3.6rem);
    }
    .eyebrow {
        font-size:.67rem;
        letter-spacing:.1em;
    }
    .portrait-wrap:has(.portrait:only-child) .portrait {
        height:225px;
    }
    .card h2 {
        font-size:1.18rem;
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none!important;
    }
}
#raios-cursor {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}
@media (prefers-reduced-motion: reduce) {
    #raios-cursor {
        display: none;
    }
}