/* ─── PSI RECÉM-FORMADO(A) — .graduate-* namespace ───
   Base .sp-* (hero, seção, eyebrow, títulos, cta-card) vive em app.css */
.sp-page-hero{background:linear-gradient(180deg, rgba(61, 79, 60,0.30) 0%, rgba(61, 79, 60,0.03) 100%);}
.sp-page-hero__title{color:var(--bg);}
.sp-page-hero__body{color:rgba(248,243,238,.92);}
.sp-page-hero__eyebrow{color:var(--bg);}
@media (min-width: 769px) {
    .sp-page-hero__title{color:var(--bg);font-size:clamp(36px,3.8vw,62px);}
    .sp-page-hero__body{color:rgba(248,243,238,0.8);font-size:18px;}
    .sp-page-hero__eyebrow{color:var(--bg);}
    .sp-page-hero .btn-secondary--light{background:transparent;border-color:rgba(248,243,238,.4);color:var(--bg) !important;}
}
@media(max-width:768px){
    .sp-page-hero__title{color:var(--primary);}
    .sp-page-hero__body{color:var(--muted);}
    .sp-page-hero__eyebrow{color:var(--accent-strong);}
    .sp-page-hero .btn-secondary--light{background:transparent;border-color:rgba(43,36,32,.25);color:var(--primary) !important;}
}

/* HERO — padrão <img> full-bleed (how-hero), variante escura profissional */
.pro-hero {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
}
.pro-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.pro-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 65%);
    mask-image: linear-gradient(to right, transparent 0%, black 65%);
}
.pro-hero__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(61, 79, 60,1) 0%, rgba(61, 79, 60,1) 38%, rgba(61, 79, 60,0.55) 58%, transparent 74%);
    pointer-events: none;
    z-index: 1;
}
.pro-hero > .sp-page-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}
@media(max-width:768px){
    .pro-hero {
        flex-direction: column;
        padding: 0 !important;
    }
    .pro-hero > .sp-page-hero__inner {
        width: 100%;
        padding: 24px var(--m-margin) 24px;
    }
    .pro-hero__image {
        position: static;
        width: 100%;
        height: auto;
        margin-top: auto;
    }
    .pro-hero__image img {
        display: block;
        width: 100%;
        height: auto !important;
        max-width: 100% !important;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .pro-hero__image-overlay {
        display: none;
    }
}

/* Grid 4 cards */
.graduate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.graduate-card {
    background: var(--surface);
    border: 1px solid rgba(214, 207, 199, 0.12);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(43, 36, 32, 0.02);
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: start;
    transition: transform .2s ease, box-shadow .2s ease;
}
.graduate-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,36,32,0.06);}
.graduate-card .serium-icon-img{width:48px;height:48px;margin:0;grid-row:1/3;align-self:center;}
.graduate-card__title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    grid-column: 2;
    text-wrap: balance;
}
.graduate-card__body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
    grid-column: 2;
    text-wrap: pretty;
}

/* Quote box */
.graduate-quote {
    background: var(--primary);
    border-radius: 16px;
    padding: 72px 64px;
    text-align: center;
    color: var(--bg);
}
.graduate-quote__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 20px;
    color: var(--bg);
    text-wrap: balance;
}
.graduate-quote__body {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(248,243,238,0.92);
    margin: 0 auto;
    max-width: 720px;
    text-wrap: pretty;
}

@media(max-width:900px){
    .graduate-grid{grid-template-columns:1fr;gap:16px;}
    .graduate-quote{padding:56px 32px;}
}
@media(max-width:600px){
    .graduate-card{grid-template-columns:36px 1fr;gap:14px;padding:20px;}
    .graduate-card .serium-icon-img{width:36px;height:36px;}
    .graduate-quote{padding:40px var(--m-margin);}
}