:root {
           --fondonav: #07417A;
           --fondobody: #000000;
           --fondomain: #FFFFFF;
           --textoblanco: #FFFFFF;
           --textonegro: #000000;
           --fondocaja: #aaccd4;
           --fondoboton: #134e89;
           --anchoform: 1200px;
       }

       * {
           box-sizing: border-box;
           margin: 0px;
           padding: 0px;
           font-family: Arial, Helvetica, sans-serif;
           /* border: 1px solid black; */
       }

       body {
           /* width:1200px; */
           background-color: var(--fondobody);
           color: var(--textonegro);
       }

       header {
           width: var(--anchoform);
           margin: auto;
           background-color: var(--fondonav);
           display: grid;
           grid-template-columns: 1fr 1fr;
       }


       header>div {
           align-items: center;
           text-decoration: none;
           color: var(--textoblanco);
       }

       header>nav {
           display: grid;
           grid-template-columns: 1fr 3fr;
           color: var(--textoblanco);

           /* align-items: end; */
       }


       header>nav>ul {
           width: auto;
           display: grid;
           background-color: var(--fondonav);
           grid-template-columns: 1fr 1fr 1fr 1fr;
           align-items: end;
           justify-items: center;
           list-style: none;
           padding: 10px;
           margin: 10px;
       }

       nav ul li {
           margin: 20px;
           padding: 20px;
       }

       main {
           width: var(--anchoform);
           margin: auto;
           background-color: var(--fondomain);
       }

       /* Formateo imagen*/
       main>img {
           width: 100%;
           margin: auto;
           display: block;
           object-fit: cover;
       }

       /*Formateo cajas destacados*/
       main>div>section:first-child {
           width: auto;
           display: grid;
           margin: auto;
           grid-template-columns: 1fr 1fr;
           gap: 10px;
       }

       main>div>section:first-child>div {
           width: auto;
           color: var(--textonegro);
           background-color: var(--fondocaja);
           padding: 10px;
           margin: 10px;
       }


       main>div>section:last-child {
           display: grid;
           grid-template-columns: 1fr 1fr 1fr;
           margin: 10px;
           padding: 10px;
       }

       main section:last-child>article {
           background-color: var(--fondocaja);
           color: var(--textonegro);
           margin: 10px;
           padding: 10px;
           display: grid;
           grid-template-columns: 1fr;
           align-items: last baseline;

       }


       main article img {
           display: block;
           width: 100%;
           padding: 10px;
           object-fit: cover;
       }

       footer {
           width: var(--anchoform);
           height: 25px;
           margin: auto;
           background: var(--fondonav);
           color: var(--textoblanco);
           text-align: center;
           align-items: center;
       }

       footer>div {

           text-wrap-style: auto;
           ;
       }

       .boton {
           width: 150px;
           height: 50px;
           border-bottom: none;
           font-weight: bold;
           background-color: var(--fondoboton);
           color: var(--textoblanco);
           font-size: 1.2em;
           align-items: end;
       }


       @media (width < 768px) {
           header {
               width: 100%;
               grid-template-columns: 1fr;
           }

           header>div {
               display: none;
           }

           header>nav {
               width: 100%;
               align-items: center;
           }

           header>nav>ul {
               grid-template-columns: 1fr 1fr 1fr 1fr;
               gap: 2px;
               padding: 1px;
               margin: 1px;
           }

           header nav ul li {
               padding: 5px;
               margin: 5px;
           }

           main {
               width: 100%;
           }

           main>img {
               width: 100%;
           }

           main>div>section:first-child {

               display: grid;
               margin: auto;
               grid-template-columns: 1fr;
               gap: 10px;
           }

           main>div>section:last-child {
               display: grid;
               grid-template-columns: 1fr;
               margin: 10px;
               padding: 10px;
           }

           footer {
               width: 100%;
           }
       }