/* =======================================================
   PROJECT PAGES
   Carolina Sánchez Girona
======================================================= */

:root{

    --background:#ffffff;
    --background-soft:#f5f7f8;

    --text:#172026;
    --text-light:#6d7880;

    --accent:#315f68;

    --border:#dfe6e8;

    --max-width:1180px;

    --radius:22px;

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:1.8;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

/* ================= HEADER ================= */

header{

    position:sticky;

    top:0;

    z-index:100;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.90);

    border-bottom:1px solid var(--border);

}

.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

}

.brand{

    font-size:1.05rem;

    font-weight:700;

    letter-spacing:-0.02em;

}

.back{

    color:var(--text-light);

    transition:.25s;

}

.back:hover{

    color:var(--accent);

}

/* ================= HERO ================= */

.hero{

    padding:90px 0 60px;

}

.eyebrow{

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:20px;

}

.hero h1{

    font-size:clamp(3rem,7vw,6rem);

    line-height:.95;

    letter-spacing:-.05em;

    font-weight:500;

    max-width:900px;

}

.hero p{

    margin-top:30px;

    max-width:760px;

    color:var(--text-light);

    font-size:1.15rem;

}

.hero-image{

    margin-top:70px;

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--border);

}

/* ================= CONTENT ================= */

.content{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:90px;

    padding:80px 0 120px;

}

.sidebar{

    position:sticky;

    top:110px;

    align-self:start;

}

.sidebar h3{

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.15em;

    color:var(--accent);

    margin-bottom:18px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.sidebar a{

    color:var(--text-light);

    transition:.25s;

}

.sidebar a:hover{

    color:var(--accent);

}

/* ================= SECTIONS ================= */

section{

    margin-bottom:90px;

}

section h2{

    font-size:2.4rem;

    margin-bottom:25px;

    font-weight:500;

    letter-spacing:-.03em;

}

section p{

    color:var(--text-light);

    margin-bottom:22px;

}

section ul{

    padding-left:22px;

}

section li{

    margin-bottom:12px;

    color:var(--text-light);

}

/* ================= STATUS ================= */

.status{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    margin-top:40px;

    gap:20px;

}

.card{

    border:1px solid var(--border);

    border-radius:18px;

    padding:24px;

    background:var(--background-soft);

}

.card h4{

    margin-bottom:10px;

    color:var(--accent);

    font-size:.75rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.card p{

    margin:0;

}

/* ================= FOOTER ================= */

footer{

    border-top:1px solid var(--border);

    padding:30px 0;

}

.footer-inner{

    display:flex;

    justify-content:space-between;

    color:var(--text-light);

    font-size:.85rem;

}

/* ================= MOBILE ================= */

@media(max-width:900px){

.content{

grid-template-columns:1fr;

gap:60px;

}

.sidebar{

position:relative;

top:auto;

}

.status{

grid-template-columns:1fr;

}

.footer-inner{

flex-direction:column;

gap:10px;

}

}