* {
  margin: 0;
  box-sizing: border-box;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none; }

html, body {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Work Sans', sans-serif; }

body {
  background-color: #F3F4F4;
  background-image: url("../img/baldosas.webp");
  background-repeat: repeat;
  background-size: calc(290px + (700 - 300) * ((100vw - 1200px) / (3840 - 1200))) auto; }
  @media screen and (max-width: 1024px) {
    body {
      background-size: calc(151px + (412 - 151) * ((100vw - 300px) / (1024 - 300))) auto;
      overflow-x: hidden; } }

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 2;
  padding: calc(8px + (20 - 8) * ((100vw - 1200px) / (3840 - 1200))) 0 calc(8px + (20 - 8) * ((100vw - 1200px) / (3840 - 1200))) calc(30px + (65 - 30) * ((100vw - 1200px) / (3840 - 1200))); }
  .page-header img {
    width: calc(245px + (525 - 245) * ((100vw - 1200px) / (3840 - 1200)));
    height: auto; }
    @media screen and (max-width: 1024px) {
      .page-header img {
        width: calc(180px + (380 - 180) * ((100vw - 300px) / (1024 - 300))); } }

#mesa-main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden; }
  @media screen and (max-width: 1024px) {
    #mesa-main {
      display: block; } }
  #mesa-main .wrapper {
    position: relative;
    width: calc(1050px + (2400 - 1050) * ((100vw - 1200px) / (3840 - 1200)));
    height: calc(370px + (850 - 370) * ((100vw - 1200px) / (3840 - 1200)));
    background-color: #d4b086;
    background-image: url("../img/mesa.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    border-radius: calc(20px + (40 - 20) * ((100vw - 1200px) / (3840 - 1200)));
    box-shadow: 6px 6px 15px -4px rgba(0, 0, 0, 0.3);
    margin-top: calc(65px + (130 - 65) * ((100vw - 1200px) / (3840 - 1200))); }
    @media screen and (max-width: 1024px) {
      #mesa-main .wrapper {
        background-image: url("../img/mesa_mobile.webp");
        width: calc(250px + (700 - 250) * ((100vw - 300px) / (1024 - 300)));
        height: calc(690px + (1885 - 690) * ((100vw - 300px) / (1024 - 300)));
        margin: calc(85px + (170 - 85) * ((100vw - 300px) / (1024 - 300))) auto calc(45px + (85 - 45) * ((100vw - 300px) / (1024 - 300))) auto; } }
    #mesa-main .wrapper .img-access, #mesa-main .wrapper .img-inactive {
      position: absolute;
      display: block;
      z-index: 2; }
      #mesa-main .wrapper .img-access .img-hover, #mesa-main .wrapper .img-inactive .img-hover {
        position: absolute;
        opacity: 0; }
      #mesa-main .wrapper .img-access:hover .img-hover, #mesa-main .wrapper .img-inactive:hover .img-hover {
        opacity: 1; }
    #mesa-main .wrapper .img-inactive {
      cursor: no-drop; }
    #mesa-main .wrapper .presentacion {
      width: calc(130px + (335 - 130) * ((100vw - 1200px) / (3840 - 1200)));
      top: calc(95px + (190 - 95) * ((100vw - 1200px) / (3840 - 1200)));
      left: calc(50px + (100 - 50) * ((100vw - 1200px) / (3840 - 1200))); }
      @media screen and (max-width: 1024px) {
        #mesa-main .wrapper .presentacion {
          width: calc(100px + (280 - 100) * ((100vw - 300px) / (1024 - 300)));
          top: calc(15px + (30 - 15) * ((100vw - 300px) / (1024 - 300)));
          left: calc(68px + (184 - 68) * ((100vw - 300px) / (1024 - 300))); } }
      #mesa-main .wrapper .presentacion img {
        width: 100%;
        height: auto; }
    #mesa-main .wrapper .influencia {
      width: calc(265px + (630 - 265) * ((100vw - 1200px) / (3840 - 1200)));
      top: calc(-123px + (-295 - -123) * ((100vw - 1200px) / (3840 - 1200)));
      left: 0;
      right: 0;
      margin: 0 auto; }
      @media screen and (max-width: 1024px) {
        #mesa-main .wrapper .influencia {
          width: calc(265px + (740 - 265) * ((100vw - 300px) / (1024 - 300)));
          top: calc(248px + (675 - 248) * ((100vw - 300px) / (1024 - 300)));
          left: auto;
          right: calc(-91px + (-254 - -91) * ((100vw - 300px) / (1024 - 300))); } }
      #mesa-main .wrapper .influencia img {
        width: 100%;
        height: auto; }
    #mesa-main .wrapper .valor {
      width: calc(265px + (630 - 265) * ((100vw - 1200px) / (3840 - 1200)));
      bottom: calc(-117px + (-280 - -117) * ((100vw - 1200px) / (3840 - 1200)));
      left: calc(220px + (500 - 220) * ((100vw - 1200px) / (3840 - 1200)));
      z-index: 3; }
      @media screen and (max-width: 1024px) {
        #mesa-main .wrapper .valor {
          width: calc(235px + (635 - 235) * ((100vw - 300px) / (1024 - 300)));
          top: calc(132px + (365 - 132) * ((100vw - 300px) / (1024 - 300)));
          bottom: auto;
          left: calc(-85px + (-225 - -85) * ((100vw - 300px) / (1024 - 300))); } }
      #mesa-main .wrapper .valor img {
        width: 100%;
        height: auto; }
    #mesa-main .wrapper .diversidad {
      width: calc(265px + (630 - 265) * ((100vw - 1200px) / (3840 - 1200)));
      bottom: calc(-118px + (-280 - -118) * ((100vw - 1200px) / (3840 - 1200)));
      right: calc(218px + (480 - 218) * ((100vw - 1200px) / (3840 - 1200))); }
      @media screen and (max-width: 1024px) {
        #mesa-main .wrapper .diversidad {
          width: calc(235px + (635 - 235) * ((100vw - 300px) / (1024 - 300)));
          bottom: calc(122px + (335 - 122) * ((100vw - 300px) / (1024 - 300)));
          left: calc(-85px + (-225 - -85) * ((100vw - 300px) / (1024 - 300))); } }
      #mesa-main .wrapper .diversidad img {
        width: 100%;
        height: auto; }
    #mesa-main .wrapper .backlog {
      width: calc(132px + (310 - 132) * ((100vw - 1200px) / (3840 - 1200)));
      top: calc(123px + (260 - 123) * ((100vw - 1200px) / (3840 - 1200)));
      right: calc(50px + (120 - 50) * ((100vw - 1200px) / (3840 - 1200))); }
      @media screen and (max-width: 1024px) {
        #mesa-main .wrapper .backlog {
          width: calc(108px + (290 - 108) * ((100vw - 300px) / (1024 - 300)));
          top: auto;
          right: auto;
          bottom: calc(32px + (60 - 32) * ((100vw - 300px) / (1024 - 300)));
          left: calc(75px + (220 - 75) * ((100vw - 300px) / (1024 - 300))); } }
      #mesa-main .wrapper .backlog img {
        width: 100%;
        height: auto; }
    #mesa-main .wrapper .lineas {
      position: absolute;
      width: calc(620px + (1400 - 620) * ((100vw - 1200px) / (3840 - 1200)));
      margin: 0 auto;
      top: calc(100px + (220 - 100) * ((100vw - 1200px) / (3840 - 1200)));
      left: 0;
      right: 0;
      z-index: 1; }
      @media screen and (max-width: 1024px) {
        #mesa-main .wrapper .lineas {
          width: calc(236px + (650 - 236) * ((100vw - 300px) / (1024 - 300)));
          margin: 0;
          top: calc(136px + (370 - 136) * ((100vw - 300px) / (1024 - 300)));
          left: calc(15px + (40 - 15) * ((100vw - 300px) / (1024 - 300))); } }
  #mesa-main.active-1 .wrapper .img-inactive.presentacion {
    display: none; }
  #mesa-main.active-1 .wrapper .img-access.influencia, #mesa-main.active-1 .wrapper .img-access.valor, #mesa-main.active-1 .wrapper .img-access.diversidad, #mesa-main.active-1 .wrapper .img-access.backlog {
    display: none; }
  #mesa-main.active-2 .wrapper .img-inactive.presentacion, #mesa-main.active-2 .wrapper .img-inactive.valor {
    display: none; }
  #mesa-main.active-2 .wrapper .img-access.influencia, #mesa-main.active-2 .wrapper .img-access.diversidad, #mesa-main.active-2 .wrapper .img-access.backlog {
    display: none; }
  #mesa-main.active-3 .wrapper .img-inactive.presentacion, #mesa-main.active-3 .wrapper .img-inactive.influencia, #mesa-main.active-3 .wrapper .img-inactive.valor {
    display: none; }
  #mesa-main.active-3 .wrapper .img-access.diversidad, #mesa-main.active-3 .wrapper .img-access.backlog {
    display: none; }
  #mesa-main.active-4 .wrapper .img-inactive.presentacion, #mesa-main.active-4 .wrapper .img-inactive.influencia, #mesa-main.active-4 .wrapper .img-inactive.valor, #mesa-main.active-4 .wrapper .img-inactive.diversidad {
    display: none; }
  #mesa-main.active-4 .wrapper .img-access.backlog {
    display: none; }
  #mesa-main.active-5 .wrapper .img-inactive.presentacion, #mesa-main.active-5 .wrapper .img-inactive.influencia, #mesa-main.active-5 .wrapper .img-inactive.valor, #mesa-main.active-5 .wrapper .img-inactive.diversidad, #mesa-main.active-5 .wrapper .img-inactive.backlog {
    display: none; }

@media screen and (max-width: 1024px) {
  .display-desk {
    display: none; } }

@media screen and (min-width: 1025px) {
  .display-mobile {
    display: none; } }

/*# sourceMappingURL=styles.css.map */