:root{
    --pnm-green:#41864a;
    --pnm-green-dark:#245b2d;
    --pnm-purple:#6d397d;
    --pnm-purple-dark:#42234c;
    --pnm-cream:#f5f0e7;
    --pnm-ink:#171717;
    --pnm-white:#fff;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"DM Sans",sans-serif;
    color:var(--pnm-ink);
    background:#fff;
}

h1,
h2,
h3,
h4,
.display-font{
    font-family:"Marcellus",serif;
}

.page-content{
    overflow:hidden;
}

.pnm-section{
    padding:100px 0;
}

.pnm-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:18px;
}

.pnm-eyebrow::before{
    content:"";
    width:34px;
    height:2px;
    background:currentColor;
}

.pnm-title{
    font-size:clamp(2.4rem,5vw,5.2rem);
    line-height:.98;
    letter-spacing:-.035em;
    margin-bottom:24px;
}

.pnm-copy{
    font-size:1.12rem;
    line-height:1.75;
    color:#494949;
}

.pnm-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    border-radius:999px;
    padding:15px 24px;
    font-weight:700;
    text-decoration:none;
    transition:.25s ease;
    border:1px solid transparent;
}

.pnm-btn:hover{
    transform:translateY(-2px);
}

.pnm-btn-light{
    background:#fff;
    color:#1d1d1d;
}

.pnm-btn-green{
    background:var(--pnm-green);
    color:#fff;
}

.pnm-btn-outline{
    border-color:rgba(255,255,255,.65);
    color:#fff;
}

.pnm-btn-outline:hover{
    background:#fff;
    color:#222;
}

.pnm-arrow{
    font-size:1.1rem;
}


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

   O vídeo usa uma classe exclusiva.
   Portanto, não entra na regra global:

   video#video-background {
       height: 440px;
   }
============================================================ */

.pnm-hero{
    position:relative;

    width:100%;

    height:calc(100vh - 80px);

    min-height:650px;
    max-height:980px;

    background:#111;

    overflow:hidden;

    isolation:isolate;
}

.pnm-hero-video{
    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    /*
     * O hero é tratado como vídeo de background.
     * Ele sempre preenche toda a área.
     */
    object-fit:cover !important;

    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    z-index:0 !important;
}

.pnm-hero::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.76) 0%,
            rgba(0,0,0,.42) 52%,
            rgba(0,0,0,.12) 100%
        );

    z-index:1;

    pointer-events:none;
}

.pnm-hero::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:55%;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.72),
            transparent
        );

    z-index:2;

    pointer-events:none;
}

.pnm-hero-inner{
    position:relative;

    z-index:3;

    height:100%;

    padding-top:70px;
    padding-bottom:70px;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.pnm-hero-kicker{
    font-size:.9rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:22px;
}

.pnm-hero h1{
    font-size:clamp(4.3rem,9vw,9rem);

    line-height:.84;

    letter-spacing:-.055em;

    max-width:1000px;

    margin:0 0 28px;

    color:#fff;
}

.pnm-hero h1 span{
    display:block;

    color:#a7d16d;
}

.pnm-hero-copy{
    max-width:760px;

    font-size:clamp(1.08rem,1.6vw,1.38rem);

    line-height:1.55;

    color:rgba(255,255,255,.9);

    margin-bottom:32px;
}

.pnm-hero-actions{
    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.pnm-hero-stamp{
    position:absolute;

    right:5vw;
    bottom:54px;

    z-index:4;

    width:150px;
    height:150px;

    border:1px solid rgba(255,255,255,.48);

    border-radius:50%;

    display:grid;

    place-content:center;

    text-align:center;

    color:#fff;

    transform:rotate(8deg);

    font-size:.8rem;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.pnm-hero-stamp strong{
    font-family:"Marcellus",serif;

    font-size:2.15rem;

    line-height:1;

    display:block;

    letter-spacing:0;

    margin-bottom:5px;
}


/* ============================================================
   QUEM SOMOS
============================================================ */

.pnm-manifesto{
    background:var(--pnm-cream);
}

.pnm-manifesto-grid{
    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:stretch;
}

.pnm-manifesto-media{
    position:relative;

    min-height:100%;

    height:100%;
}

.pnm-manifesto-media img{
    display:block;

    width:100%;

    height:100% !important;

    min-height:100%;

    object-fit:cover;

    border-radius:2px;
}

.pnm-stats{
    display:grid;

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

    border-top:1px solid rgba(0,0,0,.16);

    margin-top:38px;
}

.pnm-stat{
    padding:25px 15px 0 0;
}

.pnm-stat strong{
    display:block;

    font:
        3rem
        /
        1
        "Marcellus",
        serif;

    color:var(--pnm-purple);

    margin-bottom:8px;
}

.pnm-stat span{
    font-size:.9rem;

    line-height:1.3;

    color:#5b5b5b;
}


/* ============================================================
   UNIVERSO
============================================================ */

.pnm-world{
    background:#131313;

    color:#fff;
}

.pnm-world .pnm-title{
    color:#fff;

    max-width:920px;
}

.pnm-world-head{
    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:40px;

    margin-bottom:46px;
}

.pnm-world-head p{
    max-width:500px;

    color:#bfbfbf;

    margin:0;
}

.pnm-cards{
    display:grid;

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

    gap:18px;
}

.pnm-card{
    position:relative;

    min-height:420px;

    overflow:hidden;

    text-decoration:none;

    color:#fff;

    background:#252525;
}

.pnm-card:nth-child(1),
.pnm-card:nth-child(4){
    grid-column:span 7;
}

.pnm-card:nth-child(2),
.pnm-card:nth-child(3){
    grid-column:span 5;
}

.pnm-card img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s ease;
}

.pnm-card::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.82),
            rgba(0,0,0,.04) 70%
        );
}

.pnm-card-content{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:28px;

    z-index:2;
}

.pnm-card small{
    display:block;

    text-transform:uppercase;

    letter-spacing:.14em;

    font-weight:700;

    margin-bottom:8px;

    color:#d9d9d9;
}

.pnm-card h3{
    color:#fff;

    font-size:2.2rem;

    margin:0 0 7px;
}

.pnm-card p{
    color:#e5e5e5;

    max-width:570px;

    margin:0;
}

.pnm-card:hover img{
    transform:scale(1.045);
}


/* ============================================================
   PARÓDIAS
============================================================ */

.pnm-parodias{
    background:#fff;
}

.pnm-parodias-grid{
    display:grid;

    grid-template-columns:.86fr 1.14fr;

    gap:55px;

    align-items:center;
}

.pnm-collage{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    grid-auto-rows:1fr;

    gap:12px !important;

    width:100% !important;

    max-width:100% !important;

    overflow:hidden !important;
}

.pnm-collage img{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    inset:auto !important;

    display:block !important;

    width:100% !important;

    max-width:100% !important;

    height:100% !important;

    aspect-ratio:1 / 1;

    object-fit:cover !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    translate:none !important;

    rotate:0deg !important;

    z-index:auto !important;
}

.pnm-quote{
    font-family:"Marcellus",serif;

    font-size:clamp(2rem,4vw,4rem);

    line-height:1.08;

    color:var(--pnm-purple);

    margin:25px 0 30px;
}

.pnm-tags{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin:30px 0;
}

.pnm-tag{
    border:1px solid #d8d8d8;

    border-radius:99px;

    padding:8px 13px;

    font-size:.85rem;

    font-weight:600;
}


/* ============================================================
   DESFILE
============================================================ */

.pnm-desfile{
    position:relative;

    background:var(--pnm-green-dark);

    color:#fff;
}

.pnm-desfile .pnm-title{
    color:#fff;
}

.pnm-desfile-media{
    position:relative;

    height:min(72vh,760px);

    margin-top:42px;

    overflow:hidden;
}

.pnm-desfile-media img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.pnm-desfile-media::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(24,58,29,.84),
            transparent 58%
        );
}

.pnm-desfile-caption{
    position:absolute;

    left:38px;
    right:38px;
    bottom:32px;

    z-index:2;

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:30px;
}

.pnm-desfile-caption strong{
    font:
        clamp(3.2rem,8vw,7.5rem)
        /
        .85
        "Marcellus",
        serif;
}

.pnm-desfile-caption p{
    max-width:470px;

    color:#fff;

    margin:0;

    font-size:1.08rem;
}


/* ============================================================
   JUNTE-SE
============================================================ */

.pnm-join{
    background:var(--pnm-purple-dark);

    color:#fff;
}

.pnm-join-grid{
    display:grid;

    grid-template-columns:1.06fr .94fr;

    align-items:stretch;
}

.pnm-join-media img{
    width:100%;

    height:100%;

    min-height:610px;

    object-fit:cover;
}

.pnm-join-copy{
    padding:70px;

    background:var(--pnm-purple-dark);

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.pnm-join-copy .pnm-title{
    color:#fff;
}

.pnm-join-copy p{
    color:#e7dfe9;

    font-size:1.12rem;

    line-height:1.7;
}

.pnm-paths{
    display:grid;

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

    gap:10px;

    margin:24px 0 34px;
}

.pnm-path{
    padding:15px 16px;

    border:1px solid rgba(255,255,255,.18);

    font-weight:700;
}

.pnm-path span{
    display:block;

    color:#c7a8cf;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    margin-bottom:3px;
}


/* ============================================================
   INSTAGRAM
============================================================ */

.pnm-instagram{
    padding:85px 0;

    background:var(--pnm-cream);

    text-align:center;
}

.pnm-instagram .pnm-title{
    font-size:clamp(2.8rem,6vw,6rem);

    margin-left:auto;
    margin-right:auto;

    max-width:970px;
}

.pnm-instagram p{
    max-width:660px;

    margin:0 auto 30px;

    color:#555;

    font-size:1.08rem;
}


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

.site-footer{
    background:#111 !important;

    color:#ccc;
}

.footer-bottom{
    padding:30px 0;
}

.pnm-footer-links{
    display:flex;

    gap:18px;

    flex-wrap:wrap;

    justify-content:flex-end;
}

.pnm-footer-links a{
    color:#ddd;

    text-decoration:none;
}

.pnm-footer-links a:hover{
    color:#fff;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1199px){

    .pnm-hero{
        min-height:620px;
    }

    .pnm-hero-stamp{
        width:130px;
        height:130px;

        right:3vw;
    }

}


@media(max-width:991px){

    .pnm-section{
        padding:75px 0;
    }

    .pnm-hero{
        height:calc(100svh - 72px);

        min-height:620px;

        max-height:none;
    }

    .pnm-hero-video{
        object-position:center center !important;
    }

    .pnm-hero-inner{
        padding-top:60px;
        padding-bottom:55px;

        justify-content:flex-end;
    }

    .pnm-hero-stamp{
        display:none;
    }

    .pnm-manifesto-grid,
    .pnm-parodias-grid,
    .pnm-join-grid{
        grid-template-columns:1fr;
    }

    .pnm-manifesto-media{
        height:520px;
    }

    .pnm-manifesto-media img{
        height:100% !important;

        min-height:0;
    }

    .pnm-world-head{
        display:block;
    }

    .pnm-world-head p{
        margin-top:15px;
    }

    .pnm-card:nth-child(n){
        grid-column:span 6;
    }

    .pnm-join-copy{
        padding:55px 35px;
    }

    .pnm-join-media img{
        min-height:460px;
    }

    .pnm-desfile-caption{
        display:block;
    }

    .pnm-desfile-caption p{
        margin-top:14px;
    }

}


@media(max-width:767px){

    .pnm-hero{
        height:auto;

        min-height:720px;
    }

    .pnm-hero-video{
        object-position:55% center !important;
    }

    .pnm-hero-inner{
        min-height:720px;

        padding-top:80px;
        padding-bottom:48px;

        justify-content:flex-end;
    }

    .pnm-hero h1{
        font-size:clamp(3.5rem,18vw,6rem);
    }

    .pnm-hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.72),
                rgba(0,0,0,.35)
            );
    }

    .pnm-manifesto-media{
        height:430px;
    }

    .pnm-stats{
        grid-template-columns:1fr;
    }

    .pnm-stat{
        padding:18px 0;

        border-bottom:
            1px solid
            rgba(0,0,0,.12);
    }

    .pnm-card:nth-child(n){
        grid-column:1/-1;

        min-height:360px;
    }

    .pnm-collage{
        grid-template-columns:1fr !important;

        grid-auto-rows:auto;
    }

    .pnm-collage img{
        height:auto !important;

        aspect-ratio:16 / 10;
    }

    .pnm-desfile-media{
        height:620px;
    }

    .pnm-desfile-caption{
        left:20px;
        right:20px;
        bottom:22px;
    }

    .pnm-paths{
        grid-template-columns:1fr;
    }

    .pnm-join-copy{
        padding:44px 24px;
    }

    .pnm-footer-links{
        justify-content:flex-start;

        margin-top:15px;
    }

}