/* GASTÓN SPRATT — ARCHIVO CENTRAL */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');


:root{
    --bg:#000;
    --panel:#0b0b0b;
    --accent:#b87a3a;
    --title:#f4f0ea;
    --text:#d5d1ca;
    --muted:#8c8882;
    --border:rgba(184,122,58,.35);
    --max:1500px;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    background:var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans',sans-serif;
    line-height:1.8;
}


a{
    color:inherit;
    text-decoration:none;
}


img{
    display:block;
    max-width:100%;
}


.container{
    width:min(var(--max),92%);
    margin:auto;
}


/* HEADER */

header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(0,0,0,.9);
    border-bottom:1px solid rgba(255,255,255,.05);
}


nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}


.logo{
    font-family:'Exo 2',sans-serif;
    font-weight:800;
    letter-spacing:.18em;
    color:var(--title);
}


.menu{
    display:flex;
    gap:35px;
}


.menu a{
    color:var(--muted);
}


.menu a:hover{
    color:var(--accent);
}



/* HERO */

.hero{
    min-height:calc(100vh - 80px);
    padding:0;
}


.hero-layout{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:40px;
    align-items:start;
    min-height:calc(100vh - 80px);
    padding-top:80px;
}


.hero-text{
    position:relative;
    z-index:2;
}


.eyebrow{
    color:var(--accent);
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.35em;
    text-transform:uppercase;
    margin-bottom:25px;
}


.hero h1{
    font-family:'Exo 2',sans-serif;
    font-size:clamp(5rem,8vw,8rem);
    line-height:.82;
    letter-spacing:-4px;
    color:var(--title);
    margin-bottom:25px;
}


.metadata{
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.05em;
    margin-bottom:8px;
}


.hero-description{
    max-width:520px;
    font-size:1.1rem;
}


.hero-description strong{
    color:var(--title);
}


.hero-image{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}


.hero-image img{
    width:100%;
    max-width:820px;
    object-fit:contain;
    transform:translateY(-100px);
}



/* MANIFIESTO */

.manifesto{
    margin-top:35px;
    padding:25px;
    max-width:520px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(0,0,0,.35);
}


.manifesto-title{
    color:var(--accent);
    font-family:'IBM Plex Mono',monospace;
    margin-bottom:20px;
}


.manifesto p{
    margin-bottom:20px;
    font-family:'IBM Plex Mono',monospace;
    color:var(--text);
}


.manifesto span{
    color:var(--muted);
}



/* BOTONES */

.button{
    display:inline-block;
    margin-top:35px;
    padding:15px 35px;
    border:1px solid var(--accent);
    border-radius:999px;
    color:var(--accent);
    font-family:'IBM Plex Mono',monospace;
}


.button:hover{
    background:var(--accent);
    color:#000;
}



/* SECCIONES */

.section{
    padding:100px 0;
}


.section-title{
    font-family:'Exo 2',sans-serif;
    font-size:3rem;
    color:var(--title);
    margin-bottom:40px;
}


.panel,
.card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:35px;
}


.grid{
    display:grid;
    gap:30px;
}


.grid-2{
    grid-template-columns:repeat(2,1fr);
}



/* FOOTER */

footer{
    padding:40px 0;
    border-top:1px solid rgba(255,255,255,.06);
    text-align:center;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
}



/* ANIMACION */

.fade{
    animation:entrada .8s ease both;
}


@keyframes entrada{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:none;
    }
}



/* MOBILE */

@media(max-width:1000px){

    nav{
        flex-direction:column;
        gap:20px;
    }


    .menu{
        flex-wrap:wrap;
        justify-content:center;
    }


    .hero-layout{
        grid-template-columns:1fr;
        text-align:center;
    }


    .hero-description{
        margin:auto;
    }


    .manifesto{
        margin-left:auto;
        margin-right:auto;
    }


    .hero-image{
        justify-content:center;
        margin-top:50px;
    }


    .hero-image img{
        max-width:600px;
    }


    .grid-2{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .hero h1{
        font-size:4rem;
    }


    .section-title{
        font-size:2.2rem;
    }

}

.archive-loader{
position:fixed;
inset:0;
background:#000;
z-index:9999;
display:flex;
flex-direction:column;
justify-content:center;
padding-left:8%;
font-family:'IBM Plex Mono',monospace;
color:#b87a3a;
font-size:1rem;
animation:archivoSalida 1s ease forwards;
animation-delay:3.5s;
}

.archive-loader p{
opacity:0;
animation:lineaArchivo .4s forwards;
}

.archive-loader p:nth-child(1){animation-delay:.3s}
.archive-loader p:nth-child(2){animation-delay:.8s}
.archive-loader p:nth-child(3){animation-delay:1.3s}
.archive-loader p:nth-child(4){animation-delay:1.8s}
.archive-loader p:nth-child(5){animation-delay:2.3s}


@keyframes lineaArchivo{
from{
opacity:0;
transform:translateX(-20px);
}
to{
opacity:1;
transform:none;
}
}


@keyframes archivoSalida{
to{
opacity:0;
visibility:hidden;
}
}

.record-table{
    width:100%;
    border-collapse:collapse;
    font-family:'IBM Plex Mono',monospace;
    font-size:.95rem;
}

.record-table tr{
    border-bottom:1px solid rgba(184,122,58,.18);
}

.record-table td{
    padding:12px 0;
}

.record-table td:first-child{
    color:var(--accent);
    width:42%;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.record-table td:last-child{
    color:#ddd;
}

.archive-divider{
border:none;
height:1px;
background:rgba(184,122,58,.2);
margin:40px 0;
}

.influences-columns{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px;
margin-top:30px;
}

.influences-columns h3{
margin-bottom:16px;
color:var(--accent);
font-size:1rem;
letter-spacing:.08em;
text-transform:uppercase;
}

.influences-columns ul{
list-style:none;
padding:0;
margin:0 0 35px;
}

.influences-columns li{
padding:8px 0;
border-bottom:1px solid rgba(184,122,58,.12);
}

.final-panel{
text-align:center;
}

.status-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin:45px 0;
padding:25px 0;
border-top:1px solid rgba(184,122,58,.15);
border-bottom:1px solid rgba(184,122,58,.15);
}

.status-grid span{
display:block;
font-family:'IBM Plex Mono',monospace;
font-size:.75rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:10px;
}

.status-grid strong{
font-size:1rem;
font-weight:600;
color:#fff;
}

.final-panel blockquote{
margin:50px auto 10px;
max-width:720px;
font-size:1.15rem;
font-style:italic;
line-height:1.7;
color:#ddd;
}

@media (max-width:900px){

.status-grid{
grid-template-columns:1fr;
gap:25px;
}

}