/* hero styles */
        .hero {
            position: relative;

            display: flex;

            justify-content: center;
            align-items: center;

            /*background-image: linear-gradient(to bottom, #430000, #1F0B00);
            */
            padding: 0 20px;
        }

        .hero .leon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 100%;
            max-width: 387px;
            height: 718px;

            opacity: 0.35;
            object-fit: cover;
            object-position: center;
            mix-blend-mode: screen;
            z-index: 2;
        }

        .hero .leon-2 {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;

            opacity: 0.35;

            width: 387px;
            height: 718px;
            object-fit: cover;
            object-position: center;
            mix-blend-mode: screen;
            z-index: 2;
        }

        .hero .background-3 {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);

            width: 100%;
            height: 100%;

            opacity: 1;
            z-index: 1;
            object-fit: cover;
            object-position: center bottom;
            background-color: black;
        }

        .hero .container {
            display: flex;

            justify-content: space-between;

            padding: 131px 0 0 0;

            flex-direction: row;

            gap: 41px;
            z-index: 2;
            width: 100%;
            max-width: 1331px;
            background: transparent;
        }

        .hero .container .left {
            display: flex;
            flex-direction: column;

            /* gap: 46px; */

            width: 100%;
            max-width: 517px;
            padding-top: 104px;
        }

        .hero .container .left h1 {
            font-size: 56px;
            line-height: 116.8%;
            color: white;
            margin-bottom: 42px;
        }

        .hero .container .left p {
            font-size: 25.9px;
            line-height: 118%;
            color: white;
        }

        .hero .container .left p.espaciado {
            margin-top: 25px;
        }

        .hero .container .caraDoc {
            width: 721.47px;
            height: 633px;
            flex-shrink:0;
            padding: 0;
            background: transparent;
            z-index: 2;
        }

        .hero .container .caraDoc img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;

        }