:host  {
          --white: #ffffff;
          --bg-footer: #f1f1f1;
          --color-primary: #005DA7;
          width: 100%;
          height:auto;
          background-color: #1d1d1d;
          display: flex;
      }
      :host * {
           font-family: 'din-medium', sans-serif;
      }
      :host  h3{
          margin: 0;
          padding: 0;
          line-height: 19px;
          font-family: 'din-medium', sans-serif;
      }
    
      li,
      ul {
          list-style: none;
          padding: 0;
          margin: 0;

      }
      :host * {
          font-size: 11px;
      }
      :host #seccions {
          display: grid;
          grid-template-rows: auto 1fr auto;
          flex-wrap: wrap;
          max-width: 1170px;
          width: 100%;
          margin: 0 auto;
          row-gap: 10px;
          column-gap: 10px;
          padding: 20px;
      }

      :host #seccions .grupo {
          padding-bottom: 20px;
      }

      :host #seccions .Destacado {
          font-size: 15px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 20px;
      }
      :host #seccions .Destacado h3 {
          font-size: 13px;
          font-weight: bold;
          color: #fff;
          padding: 0;
          margin: 5px 0;
          font-family: 'din-medium', sans-serif;
      }
      :host #seccions .Default {
        cursor: default;
        pointer-events: none;
      }
      :host #seccions .Default h3 {
          margin: 0;
          font-size: 13px;
          font-weight: 300;
      }
      :host #seccions .Negrita h3 {
         font-size: 13px;
         color: #8d8c8c;
      }
      :host #seccions .Destacado h3 {
          color: #CFCFCF;
          font-family: "din-black", sans-serif;
      }
      :host #seccions .Negrita:hover h3,
      :host #seccions .seccion h2.Destacado:hover {
        color: #4c4c4c;
      }
      :host #seccions .seccion h2 {
        font-family: "din-black", sans-serif;
        font-weight: 400;
        display: block;
        font-size: 15px;
        line-height: 19px;
        color: #fff;
      }
      #seccions > div {
          display: flex;
          row-gap: 10px;
          column-gap: 10px;
          width: 100%;
          justify-content: space-between;
      }

      #seccions > .SiteMap {
          grid-column: auto;
          grid-row: 1 / 3;
      }

      #seccions > .Contactos {
          grid-column: 4 / 5;
          grid-row: 2 / 2;
          display: none;
      }

      #seccions > .Logo {
          grid-column: 4/5;
          grid-row: 1;
      }
      #seccions > .Logo img {
        width: 100px !important;
        height: auto;
        padding: 17px 0 0 0;
      }

      #seccions > .Redes {
          grid-column: 4 / 5;
          grid-row: 2 / 2;
      }

      #seccions > .Legales {
          width: 100%;
          grid-column: 1 / 5;
          grid-row: 3;
          gap: 0;
          justify-content: flex-start;
      }

      #seccions .Legales > li {
          position: relative;
          display: flex;
      }
      #seccions > .Legales h3 {
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-size: 12px;
      }
      #seccions .Legales > li::after {
          content: "";
          border-right: 2px solid #858585;
          margin: 0 12px;
          height: 12px;
          transform: translateY(25%);
          color: #fff;
      }
      #seccions .Legales > li:last-child::after {
          content: "";
          display: none;
      }
      #seccions .submenu{
          transition: all 0.5s ease-in-out;
      }

      #seccions .submenu .boton h2 {
          position: relative;
      }
      #seccions  .Redes > .seccion {
          width: 100%;
      }
      #seccions .submenu .boton h2::after {
          position: absolute;
          content: "";
          background: url('https://asterisco.ypf.com/images/arrow-foot-off.png') no-repeat;
          width: 30px;
          height: 30px;
          margin-left: 10px;
          top: 4px;
      }
      #seccions .submenu .boton > h2 {
        font-size: 14px;
        font-family: "din-medium", sans-serif;
        color: #858585;
        cursor: pointer;
      }
      #seccions .submenu .boton > h2:hover {
        color: #4c4c4c;
      }
      #seccions div .social {
          display: none;
          row-gap: 10px;
          column-gap: 5px;
      }
        #seccions div .social a {
        height: 37px;
        overflow: hidden;
      }
      #seccions .submenu .boton[show] .social {
          display: flex;
          flex-wrap: wrap;
      }
      #seccions div .social a:hover img {
         transform: translateY(-50%);
      }
      .SiteMap .col {
        max-width: 200px !important;
      }
      @media only screen and (max-width: 920px) {
          :host #seccions {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: auto 1fr;
              flex-wrap: wrap;
              padding: 25px 0 30px 0;
          }

          #seccions > .Logo,
          :host #seccions .SiteMap {
              display: none;
          }

          :host #seccions .Legales {
              grid-column: 1 / 4;
              grid-row: 1;
              justify-content: center;
              flex-wrap: wrap;
          }

          :host #seccions .Legales h3 {
              margin: 0;
          }

          :host #seccions .Redes {
              grid-column: 1 / 4;
              grid-row: 2;
             
          }

          :host #seccions .submenu .boton h2::after {
             display: none;
          }
          :host #seccions div .social {
              column-gap: 40px;
              height: auto;
              justify-content: center;
              max-width: 210px;
              margin: auto;
          }
          :host #seccions div .social a {
              height: 37px;
              overflow: hidden;
          }
          :host #seccions .submenu .boton,
          :host #seccions .submenu .boton h2 {
                display: none;
          }
          :host #seccions .submenu .boton:first-child {
              display: flex;
          }
          :host #seccions .Redes > li > h2 {
               color: transparent !important;
               position: relative;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               margin-top: 0;
          }
          :host #seccions .Redes > li > h2::after {
              content: "Seguinos en:";
              color: #858585;
              font-size: 11px;
          }
          :host #seccions .Redes .Destacados {
              display: none;
            }
      }