@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap');

:root {
    --corbg: #CBCBCB;
    --cor1: #FFFFFF;
    --cor2: #000000;
    --cor3: #FFCD00;
    --cor4: #173034;
    --font18: clamp(14px,1.8em,1.8em);
    --font25: clamp(18px,2.5em,2.5em);
    --font40: clamp(27px,4em,4em);
    --fixVh: 87px;
    /*
    --cor5: #313133;
    --margemH: clamp(20px, 3vw, 3em);
    --margemV: clamp(30px,7vw,7.5em);
    --font16: clamp(12px, 1.5vw, 1.6em);
    --font36: clamp(18px,3.4vw,3.6em);
    */
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background: var(--corbg);
    color: var(--cor1);
    min-height: 100vh;
    font-size: clamp(6px,0.78vw,10px);
    font-family: 'Roboto', sans-serif;
}

body {
    margin: 0 auto;
    padding: 0;
    max-width: 128em;
}

header {
    background: var(--cor1);
    padding: 3em 6em;
    text-align: center;
}

header img {
    width: clamp(150px,22.2em,22.2em);
}

.hero {
    display: table;
    width: 100%;
    min-height: calc(100vh - 10.2em - var(--fixVh));
}

.hero > * {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;
    padding: 7.5em;
}

.hero .p1 {
    background-image: url(img/hero-bg.png);
    background-position: top center;
    background-size: cover;
    /*vertical-align: top;*/
    position: relative;
}

.hero .p1::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0) 100%);
    z-index: 0;
}

h1 {
    text-transform: uppercase;
    font-weight: 900;
    margin: 0 auto /*4em*/;
    max-width: 12em;
    font-size: var(--font40);
    display: block;
    z-index: 3;
    position: relative;
}

h1 span {
    -webkit-text-stroke-width: 0.04em;
    -webkit-text-stroke-color: var(--cor1);
    color: transparent;
    display: block;
    margin: 0 auto;
    max-width: 10em;
}

.hero .p1 .logos {
    /*position: absolute;
    bottom: 7.5em;
    left: 0;
    width: 100%;*/
    margin-top: 11em;
    position: relative;
}

.hero .p1 .logos img {
    height: clamp(38px,5.5em,5.5em);
}

.hero .p1 .logos img.margin {
    margin-right: 3em;
}

.hero .p2 {
    background: var(--cor4);
}

h2 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--font25);
    margin: 0 auto 1.3em;
    max-width: 16em;
    letter-spacing: 0.2em;
}

.hero .p2 p {
    font-size: var(--font18);
    margin: 0.5em 0;
}

.hero .p2 a {
    display: inline-block;
    background: var(--cor3);
    color: var(--cor2);
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
    font-size: var(--font18);
    margin-top: 1.8em;
    padding: 1em;
    border-radius: 0.5em;
    transition: all 0.2s ease;
    transition-property: color, background;
}

.hero .p2 a:hover {
    color: var(--cor3);
    background: var(--cor2);
}

footer {
    padding: 3em;
    background: var(--cor2);
    text-align: right;
    position: relative;
    font-size: 12px;
}

footer div {
    float: left;
    text-align: left;
    padding-right: 30px;
}

footer a {
    color: var(--cor1);
    text-decoration: none;
}

@media(max-width:855px){
    :root {
        --fixVh: 88px;
    }
}

@media(max-width:800px){
    :root {
        --fixVh: 113px;
    }
    footer {
        text-align: center;
    }
    footer div {
        float: none;
        text-emphasis: none;
        padding: 0 0 10px;
        text-align: center;
    }
}

@media(max-width:750px){
    .hero {
        display: block;
        width: 100%;
        min-height: auto;
    }

    .hero > * {
        display: block;
        width: 100%;
    }
    
    /*
    .hero .p1 {
        height: calc(100vh - 64px);
        display: table-cell;
        vertical-align: middle;
        width: 100vw;
    }

    h1 {
        margin: 0 auto 4em;
    }

    .hero .p1 .logos {
        position: absolute;
        bottom: 7.5em;
        left: 0;
        width: 100%;
        margin-top: 0;
    }
    */
}

@media(max-width:360px){
    .hero > * {
        padding: clamp(0px, 12.5vw, 7.5em);
    }
    
    h1 {
        font-size: clamp(12px,7.5vw,27px);
    }

    .hero .p1 .logos img {
        height: clamp(0px,14vw,38px);
    }

    h2 {
        font-size: clamp(12px,5vw,18px);
    }
}