@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");




.page-content {
    display: grid;
    font-family: var(--font-sans);
}


.card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 315px;
    overflow: hidden;
    width: 100%;
    text-align: center;
    color: whitesmoke;
    background-color: whitesmoke;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 
                0 2px 2px rgba(0, 0, 0, 0.1),
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.1), 
                0 16px 16px rgba(0, 0, 0, 0.1);
}



    .card:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        background-size: cover;
        background-position: 0 0;
        transition: transform calc(var(--d) * 1.5) var(--e);
        pointer-events: none;
    }

    .card:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200%;
        pointer-events: none;
        background-image: linear-gradient(to bottom,
         rgba(0, 0, 0, 0.249) 0%,rgba(0, 0, 0, 0.32) 58.9%,
         rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%,
         rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%,
         rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
        transform: translateY(-50%);
        transition: transform calc(var(--d) * 2) var(--e);
    }

.card-p1{
	align-items:flex-start;
}

    #background-video{
        position: absolute;
        object-fit: cover;
        height:100%;
    }

    .referencia{
        font-size: 0.7rem;
    }
    .referencia a{
        text-decoration: underline;
        color: #06f;
    }


    .content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 1rem;
        transition: transform var(--d) var(--e);
        z-index: 1;
    }

    .content-1{
        position: sticky;
		top:15vh;
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .content-1 h1{
        line-height: 0.8;
    }

    .content>*+* {
        margin-top: 1rem;
        font-family: circular-std-medium;
    }

    .title {
        font-family: coolvetica-compressed-hv_1;
        font-size: 3rem;
        font-weight: bold;
        line-height: 1.2;
    }

    .copy {
        font-size: 1rem;
        font-style: italic;
        line-height: 1.35;
        width: 80%;
        text-align: justify;
    }

    .copy-list{
        list-style-type: disc;
		list-style-position: inside;
        width: 100%;
        text-align: justify;
        width: 80%;
    }
    

    .btn {
        cursor: pointer;
        margin-top: 1.5rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.65rem;
        font-weight: bold;
        letter-spacing: 0.025rem;
        text-transform: uppercase;
        color: white;
        background-color: black;
        border: none;
    }

    #beneficios-grid{
        position: relative;


    }

    footer{
        position: relative;
    }

    /* CSS */
    .button-59 {
        align-items: center;
        background-color: #fff;
        border: 2px solid #000;
        box-sizing: border-box;
        color: #000;
        cursor: pointer;
        display: inline-flex;
        fill: #000;
        font-family: Inter, sans-serif;
        font-size: 16px;
        font-weight: 600;
        height: 48px;
        justify-content: center;
        letter-spacing: -.8px;
        line-height: 24px;
        min-width: 340px;
        outline: 0;
        padding: 0 17px;
        text-align: center;
        text-decoration: none;
        transition: all .3s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }

    .button-59:focus {
        color: #171e29;
    }

    .button-59:hover {
        border-color: #06f;
        color: #06f;
        fill: #06f;
    }

    .button-59:active {
        border-color: #06f;
        color: #06f;
        fill: #06f;
    }



    .btn:hover {
        background-color: #0d0d0d;
    }

    .btn:focus {
        outline: 1px dashed yellow;
        outline-offset: 3px;
    }


@media (min-width: 600px) {
    .page-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-p1 {
        order: 1;
        grid-column: span 2;

    }





}

@media (min-width: 800px) {
    #background-video{
        position: absolute;
        object-fit: cover;
        height:auto;
        width: 100%;
    }

    .page-content {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3,1fr);
    }

    .card-p1 {
        order: 1;
        grid-column: span 2;
        grid-row:1/4;
        grid-column-start: 1;

    }

    .card {
        grid-column: span 2;
        grid-row: span 1;
    }

}



@media (hover: hover) and (min-width: 600px) {
    .card:after {
        transform: translateY(0);
    }


    #background-video{
        object-fit: cover;
        height: 100%;
    }

    .content {
        transform: translateY(calc(100% - 4.5rem));
    }

    .content>*:not(.title) {
        opacity: 0;
        transform: translateY(1rem);
        transition: transform var(--d) var(--e), opacity var(--d) var(--e);
    }

    .copy{
        text-align: center;
    }
    .copy-list{
        list-style-type: disc;
        width: 60%;
        text-align: center;
    }
    
    .copy-list li::marker {
        position: relative;
        left: -50px;
    }

    .card:hover,
    .card:focus-within {
        align-items: center;
    }

    .card:hover:before,
    .card:focus-within:before {
        transform: translateY(-4%);
    }

    .card:hover:after,
    .card:focus-within:after {
        transform: translateY(-50%);
    }

    .card:hover .content,
    .card:focus-within .content {
        transform: translateY(0);
    }

    .card:hover .content>*:not(.title),
    .card:focus-within .content>*:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
    }

    .card:focus-within:before,
    .card:focus-within:after,
    .card:focus-within .content,
    .card:focus-within .content>*:not(.title) {
        transition-duration: 0s;
    }
}