body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: "Myriad Pro", Arial, sans-serif;
        }
        @font-face {
            font-family: "Myriad Pro";
            src: url("assets/fonts/Myriad\ Pro\ Regular.ttf") format("truetype");
        }
        @font-face {
            font-family: "Myriad Pro Bold";
            src: url("assets/fonts/Myriad\ Web\ Pro\ Bold.ttf") format("truetype");
        }
        @font-face {
            font-family: "Myriad Pro Semibold";
            src: url("assets/fonts/Myriad\ Pro\ Semibold.ttf") format("truetype");
        }

        @media (max-width: 768px) {
            .cintillo{
                height: 40px !important;
            }
            .container{
              align-items: center;
            }
            h1{
              font-size: 24px !important;
            }
            .logo{
              width: 333px !important;
              height: 187px !important;
              padding-top: 75px;
            }
            .socialmedia{
              display: none;
            }
            .text{
              font-size: 18px !important;
              text-align: center;
            }
            .container .image{
              display: none;
            }
            .mobile-image{
              display: block !important;
              width: 333px;
              height: 187px;
              margin-top: 30px;
              margin-bottom: 30px;
            }
            .titulo{
              margin-top: 30px !important;
              margin-bottom: 10px !important;
              text-align: center;
            }
            .button{
              margin-top: 50px !important;
              margin-bottom: 30px !important;
              text-align: center;
              padding: 13px 27px !important;
              font-size: 18px !important;
            }
            .mobile-socialmedia{
              display: flex !important;
              margin-top: 20px;
              text-align: center;
              justify-content: space-evenly;
              margin-bottom: 75px;
              width: 100%;
            }
        }


        .container{
            margin-left: 7%;
            margin-right: 7%;
            padding: 0;
        }
        h1 {
            margin: 0;
            color: #332083;
            font-family: "Myriad Pro Bold", Arial, sans-serif;
            font-size: 78px;
        }
        a {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        section{
            display: flex;
            flex-direction: column;
            size: 100px 100px;
        }

        .cintillo{
            position: relative; /* Permite que los hijos se posicionen en relación al contenedor */
            background-color: #BD0C2E;
            width: 100%;
            height: 60px;
        }
        .division2{
            position: absolute; /* Posiciona el div fuera del flujo normal */
            top: 0;
            left: 0;
            width: 40%; /* Ajusta el ancho */
            height: 100%; /* Ajusta la altura */
            background-color: #261b6a; /* Color azul */
            z-index:2; /* Coloca este div detrás */

            clip-path: polygon(
                0 0,        /* esquina superior izquierda */
                100% 0,     /* esquina superior derecha */
                95% 100%,   /* esquina inferior derecha inclinada */
                0 100%      /* esquina inferior izquierda */
            );
        }
        .mobile-image{
            display: none;
        }
        .division1{
            position: absolute; /* Posiciona el div fuera del flujo normal */
            top: 0;
            left: 0;
            right: 0;
            width: 4%; /* Ajusta el ancho */
            height: 100%; /* Ajusta la altura */
            background-color: #1e1656; /* Color amarillo */
            z-index:3; /* Coloca este div delante */

            clip-path: polygon(
                0 0,        /* esquina superior izquierda */
                100% 0,     /* esquina superior derecha */
                50% 100%,   /* esquina inferior derecha inclinada */
                0 100%      /* esquina inferior izquierda */
            );
        }
        .division3
        {
            position: absolute; /* Posiciona el div fuera del flujo normal */
            top: 0;
            right: 0;
            left: 0;
            width: 55%; /* Ajusta el ancho */
            height: 100%; /* Ajusta la altura */
            background-color: #302481; /* Color azul */
            z-index: 1; /* Coloca este div detrás */

            clip-path: polygon(
                0 0,        /* esquina superior izquierda */
                100% 0,     /* esquina superior derecha */
                95% 100%,   /* esquina inferior derecha inclinada */
                0 100%      /* esquina inferior izquierda */
            );
        }
        main{
            /* margin-top: 100px; */
        }
        .socialmedia{
            margin-top: 50px;
            text-align: right;
        }
        .logo{
            width: 415px;
            height: 229px;
        }
        .titulo{
            margin-top: 70px;
            margin-bottom: 20px;
        }
        .text{
            max-width: 908px;
            font-family: "Myriad Pro", Arial, sans-serif;
            font-size: 26px;
        }
        .button{
            background-color: #BD0C2E;
            font-family: "Myriad Pro Semibold", Arial, sans-serif;
            padding: 24px 20px;
            font-size: 28px;
            width: fit-content;
            margin-bottom: 100px;
            border-radius: 20px;
            border: #BD0C2E 2px solid;
            transition: all 0.3s ease;
            margin-top: 0;
        }

        .button:hover {
            background-color: #ffffff;
            color: #BD0C2E;
            border: #BD0C2E 2px solid;
        }
        .container-text{
            display: flex;
            align-items: center;
        }
        .container-text .image{
            margin-left: 50px;
            left: 50%; /* Ajusta la posición horizontal */
        }
        .container-text .image img {
            max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
            height: auto; /* Mantiene la proporción de la imagen */
            object-fit: cover; /* Ajusta la imagen para que se vea bien dentro del contenedor */
        }
        .figura {
            width: 400px;
            height: 150px;
            background: rgb(0, 0, 0);
            border: 4px solid black;

            clip-path: polygon(
                0 0,        /* esquina superior izquierda */
                100% 0,     /* esquina superior derecha */
                75% 100%,   /* esquina inferior derecha inclinada */
                0 100%      /* esquina inferior izquierda */
            );
        }
        .mobile-socialmedia{
            display: none;
        }