.mapaTitles{
         font-family: "Open Sans", sans-serif;
         font-weight: 500;
         font-style: normal;
         font-size:28px; /*px*/
         line-height:36px; /* ej. 1.5, 20px, auto*/
         letter-spacing:0.01em; /*ej. 2px o 0.1 em*/
   } 

  .titleEspecial{
         font-family: "Open Sans", sans-serif;
         font-weight: 500;
         font-style: normal;
         font-size:28px; /*px*/
         line-height:36px; /* ej. 1.5, 20px, auto*/
         letter-spacing:0.01em; /*ej. 2px o 0.1 em*/
   } 


   .mapaParrafo{
         font-family: "Open Sans", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 12.75px; /*px*/
         line-height: 18px; /* ej. 1.5, 20px, auto*/
         letter-spacing:0.015em; /*ej. 2px o 0.1 em*/
   }
      
      .mapaNumbers{
         font-family: "Open Sans", sans-serif;
         font-weight: 500;
         font-style: normal;
         font-size: 12.75px; /*px*/
         line-height: 13px; /* ej. 1.5, 20px, auto*/
         letter-spacing:-0.03em; /*ej. 2px o 0.1 em*/
        color:#7C9843;
   }
      
      
      .mapaItalica{
        font-family: "Open Sans", sans-serif;
         font-weight: 400;
         font-style: italic;
         font-size: 16px; /*px*/
         line-height: 23px; /* ej. 1.5, 20px, auto*/
         letter-spacing:0.03em; /*ej. 2px o 0.1 em*/
      }
      
      
      .mapa{
        display:flex;
        width:100%;
        gap:20px;
        padding: 142px 89px 145px 80px;
        background-color:#F5F9ED;
      }
      
      .mapaSucursales{
        display:flex;
        width:35%;
        max-width:395px;
        min-width:290px;
        display:flex;
        flex-direction:column;
        gap:30px;
        align-items:center;
        /*background-color:orange;*/
      }


      .mapaLista{
        width:100%;
        display:flex;
        height:460px;
        background-color:#FDFFF9;
        padding:50px 31px 50px 60px;
        border-radius:8.7px;
      }
      
      .mapaListaOverflow{
        width:100%;
        height:360px;
        display:flex;
        flex-direction:column;
        overflow-y:auto;
        flex-direction:column;
        gap:11px;
        scrollbar-width:auto;
        scrollbar-color:#7C9843 #F3F1F1;
        /*background-color:lightblue;*/
      }
      
      
      
      .mapaSucursalNombre{
        display:flex;
        width:100%;
        gap:24px;
        padding-right:10px;
      }
      
      .mapaNumberContainer{
        width:16px;
        height:18px;
      }
      
      .mapaCTA{
        all:unset;
        cursor:pointer;
        display:flex;
        width:fit-content;
        padding-left:51px;
        display:flex;
        gap:25px;
        /*background-color:green;*/
        align-items:center;
      }
      
      .mapaCTA p{
       max-width:178px;
       /*background-color:yellow;*/
      }
      
      .mapaBoton{
        height: 29px;
        width: 29px;
        flex-shrink:0;
        display:flex;
        /*background-color:black;*/
        background-image:url("./imgs/flecha.svg");
        background-position:center;
        background-size:cover;
        background-repeat:no-repeat;
      }

      .mapaVisual{
        display:flex;
        width:65%;
        /*background-color:pink;*/
        padding-top:21px;
        padding-right:60px;
        justify-content:right;
        position:relative;
      }
      
      .mapaVisual p{
        position:relative;
        z-index:30;
        text-align:right;
        max-width:379px;
        /*background-color:lightblue;*/
      }
      
      .mapaImagen{
        display:flex;
        left:10%;
        position:absolute;
        z-index:0;
        width: 100%;
        /*background-color:grey;*/
        top:50%;
        transform:translateY(-50%);
      }
      
      .mapa img{
         width: 100%;
         height: auto;
         display: block;
         opacity:1;
      }

              .titleEspecial{
          display: none;
        }
      
  
      @media(max-width:1350px){
        .mapa{
          padding:100px 40px;
          gap:10px;
          
        }

        .mapaSucursales{

        }

        .mapaVisual{

        }

        .mapaImagen{
          left: 3%;
        }

        .mapaVisual{
          padding-right:6%;
        }
      }


      @media(max-width:1100px){

        .mapaCTA p{
          max-width: none;
          padding: 0;
          text-align: left;
          /*background-color: pink;*/
        }

        .mapaItalica{
          width: fit-content;
        }

        .mapaCTA{
          justify-content: center;
          padding: 0;
        }

        .titleEspecial{
          display: block;
          text-align: center;
          max-width: 500px;
        }

        .mapa{
          flex-direction: column;
          padding:100px 40px;
          justify-content: center;
          align-items: center;
          height: fit-content;
          gap:60px;
        }

        .mapaSucursales{
            width:100%;
            max-width: 600px;
            order: 2;
        }

        .mapaVisual{
          width:100%;
          padding:0;
        }

        .mapaImagen{
          position: relative;
          top: auto;
          transform: none;
          left:auto;
        }

        .mapaTitles{
          display:none;
        }


      }


      @media(max-width:480px){
          .mapaCTA p{
              max-width: 170px;
          }
      }