:root {
  --bg-black: #454545;
  --texto: #000000;
  --gris: #474747;
  --bg-grid: #323232;
  --bg-gris2: #5d5d5d;
  --blanco: #ffffff;
  --transition: all 3s ease in out;
}

a {
  text-decoration: none;
}

body {
  font-family: "BMWmotorrad" !important;
  background-color: var(--bg-black);
  width: 100%;
  height: 100%;
  font-weight: 400;
}

body::-webkit-scrollbar {
  width: 10px;
  background-color: rgb(201, 222, 255);
}

body::-webkit-scrollbar-thumb {
  padding: 1px;
  background-color: #0061ff;
}


.navbar {
  width: 100%;
  background-color: #fff;
  padding: 10px 0;
}

.navbar img {
  width: 200px;
  margin-left: 9%;
}

.compartir-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 20;
}

.arrow-container {
  background-color: #fff;
  box-shadow: 0 4px 10px 1px #0008;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 12px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 20;
}

.text-share {
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transform: translate(-25px);
  width: 0%;
  overflow: hidden;
  transition: 0.5s ease-in-out;
}

.arrow-container:hover ~ .text-share {
  width: 90px;
  transform: translate(-5px);
}

.text-share:hover {
  width: 90px;
  transform: translate(-5px);
}

button {
  font-family: "BMWmotorrad" !important;
}

.texto-bold {
  font-weight: 500;
  font-size: 24px;
  color: var(--blanco);
}

.tooltip {
  position: absolute;
  z-index: 220;
  background-color: #fff;
  width: 15vw;
  z-index: 220;
  padding: 10px 5px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  border-radius: 5px;
}

.close-tool {
  position: absolute;
  color: #ffffff;
  background-color: #0005;
  width: 12px;
  height: 12px;
  cursor: pointer;
  display: flex;
  font-size: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 4px;
  right: -5px;
  top: -5px;
}
.close-tool:hover {
  background-color: #000;
}
.tool22 {
  left: 79px;
  top: 154px;
  display: none;
}
.tool23 {
  left: -17px;
  top: 74px;
  display: none;
}
.tool24 {
  left: 13px;
  top: 154px;
  display: none;
}
.tool25 {
  left: 76px;
  top: 118px;
  display: none;
}
.tool26 {
  left: -45px;
  top: 76px;
  display: none;
}

.tooltip::before {
  position: absolute;
  top: -34.5px;
  width: 15%;
  height: 24%;
  right: 50%;
  padding: 10px;
  transform: translate(50%);
  background-color: #fff;
  content: url("../assets/icons/moto.svg");
  border-radius: 50%;
}

.tooltip::after {
  position: absolute;
  bottom: -39.5px;
  width: 25%;
  height: 40px;
  right: 50%;
  transform: translate(50%);
  background-color: #fff;
  content: "";
  -webkit-clip-path: polygon(100% 0, 0 0, 50% 70%);
  clip-path: polygon(100% 0, 0 0, 50% 70%);
}

.pueblo {
  text-align: center;
  font-size: 14px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-weight: 500;
  background-color: #fff;
  padding: 0 5px;
  position: absolute;
  top: -16px;
  right: 50%;
  transform: translate(50%);
}

.pueblo-details {
  border: 2px solid #0061ff;
  border-radius: 5px;
  width: 80%;
  margin: 15% auto 5% auto;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  position: relative;
  text-align: center;
  padding: 5px;
}

.pueblo-lugar {
  color: var(--texto);
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
}

.lugar {
  color: #0061ff;
  text-wrap: balance;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
}

.detalles-prov {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 90%;
  margin: auto;
  padding: 0 0 10px 0;
  text-align: center;
}

.caract {
  color: var(--texto);
  font-size: 9px !important;
  font-weight: 500;
}

.iframe-lightbox-link {
  position: relative;
  width: 100%;
  height: 100%;
}

.cont-play {
  background-color: #d4d4d4;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  top: -300%;
  right: 50%;
  transform: translate(50%, 0%);
}

.b-x {
  border-left: 2px solid #0061ff;
  border-right: 2px solid #0061ff;
  padding: 0 5px;
}

.val-caract {
  font-size: 11px !important;
  color: #666;
  font-weight: 600;
}

.header {
  width: 100%;
  height: 1100px;
  background: #000;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  opacity: 0;
  position: relative;
  /* transition: all 0.5s ease-in-out; */
}

.text-container {
  width: 45%;
  display: flex;
  justify-content: center;
  transition: all 0.5s ease in out;
}

.justify-items {
  width: 60%;
  margin: 100px auto;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  transition: all 0.5s ease in out;
}

.reseña {
  width: 100%;
  max-width: 500px;
  -webkit-filter: drop-shadow(0 0 2px, #000);
  filter: drop-shadow(0 0 2px, #000);
  transform: translateY(-50px);
  opacity: 0;
  transition: all 0.5s ease in out;
}

.text-header {
  width: 80%;
  color: var(--blanco);
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.5s ease in out;
}

.text-black {
  color: var(--texto);
}

#compartir-btn {
  z-index: 200;
}

.share {
  margin-top: 50px;
  min-width: 100px;
  width: 50%;
  max-width: 200px;
  opacity: 0;
  transform: translateY(-50px);
  cursor: pointer;
}

.share-header {
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  border-radius: 5px;
  padding: 25px;
  z-index: 300;
  box-shadow: 0 0 10px 2px #0007;
  transition: all 0.3s ease-in-out;
  top: 60%;
  left: -70%;
  /* transform: translateY(-40%); */
}

.share-container-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 5px;
}

.close-share-header {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 5px;
}

.años {
  position: absolute;
  right: 100px;
  top: 120px;
  width: 120px;
  transform: translateY(-50px);
  opacity: 0;
  transition: all 0.5s ease in out;
}

.container-mapa-interactivo {
  width: 68%;
  margin: auto;
  position: relative;
}

.container-mapa-interactivo h2 {
  color: var(--blanco);
  font-weight: 500;
  font-size: 24px;
}

.ref {
  color: var(--blanco);
  margin-top: 10px;
  width: 520px;
}

.map-int {
  width: 100%;
  padding: 20px;
  margin-top: 40px;
  padding-left: 0;
  display: flex;
  flex-direction: row;
}

.transition-prov {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition: top 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
}

.transition-prov-blue {
  position: absolute;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  transition: top 0.5s ease-in-out;
  -webkit-filter: invert(5%) sepia(75%) saturate(0%) hue-rotate(176deg) brightness(26%) contrast(85%);
  filter: invert(5%) sepia(75%) saturate(0%) hue-rotate(176deg) brightness(26%) contrast(85%);
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
}

.lineas {
  position: absolute;
  top: 0%;
  left: 0%;
  opacity: 0.5;
  z-index: 220;
  pointer-events: none;
}

.transition-prov-blue:hover {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  transform: scale(1.02) translateY(-2px);
  z-index: 210;
}

/* .transition-prov:hover {
  opacity: 1;
  filter: invert(70%) sepia(54%) saturate(327%) hue-rotate(180deg) brightness(105%) contrast(90%);
  transform: scale(1.02) translateY(-2px);
  z-index: 210;
} */

.prov-1 {
  top: 0.2%;
  right: 4%;
  width: 65.8%;
  -webkit-clip-path: polygon(
    8% 99%,
    14% 100%,
    19% 99%,
    22% 97%,
    34% 92%,
    36% 87%,
    42% 89%,
    49% 86%,
    49% 82%,
    60% 76%,
    59% 71%,
    65% 61%,
    79% 54%,
    100% 49%,
    100% 25%,
    98% 23%,
    92% 25%,
    86% 23%,
    82% 26%,
    69% 27%,
    67% 19%,
    64% 19%,
    60% 13%,
    53% 10%,
    51% 4%,
    42% 0%,
    32% 0%,
    36% 8%,
    33% 9%,
    29% 17%,
    21% 24%,
    0% 32%,
    0% 66%,
    2% 68%,
    5% 72%,
    10% 70%,
    21% 73%,
    19% 77%,
    12% 78%,
    10% 83%,
    13% 94%
  );
  clip-path: polygon(
    8% 99%,
    14% 100%,
    19% 99%,
    22% 97%,
    34% 92%,
    36% 87%,
    42% 89%,
    49% 86%,
    49% 82%,
    60% 76%,
    59% 71%,
    65% 61%,
    79% 54%,
    100% 49%,
    100% 25%,
    98% 23%,
    92% 25%,
    86% 23%,
    82% 26%,
    69% 27%,
    67% 19%,
    64% 19%,
    60% 13%,
    53% 10%,
    51% 4%,
    42% 0%,
    32% 0%,
    36% 8%,
    33% 9%,
    29% 17%,
    21% 24%,
    0% 32%,
    0% 66%,
    2% 68%,
    5% 72%,
    10% 70%,
    21% 73%,
    19% 77%,
    12% 78%,
    10% 83%,
    13% 94%
  );
}
.prov-2 {
  width: 12.6%;
  top: 15.5%;
  left: 20.6%;
  -webkit-clip-path: polygon(
    38% 100%,
    60% 100%,
    100% 89%,
    100% 77%,
    82% 74%,
    74% 67%,
    83% 59%,
    77% 48%,
    96% 36%,
    100% 20%,
    94% 0,
    74% 0,
    48% 8%,
    21% 26%,
    18% 36%,
    14% 47%,
    11% 61%,
    0 70%,
    10% 83%,
    25% 88%
  );
  clip-path: polygon(
    38% 100%,
    60% 100%,
    100% 89%,
    100% 77%,
    82% 74%,
    74% 67%,
    83% 59%,
    77% 48%,
    96% 36%,
    100% 20%,
    94% 0,
    74% 0,
    48% 8%,
    21% 26%,
    18% 36%,
    14% 47%,
    11% 61%,
    0 70%,
    10% 83%,
    25% 88%
  );
}
.prov-3 {
  top: 24.1%;
  left: 13.5%;
  width: 13.5%;
  -webkit-clip-path: polygon(
    34% 95%,
    73% 100%,
    100% 98%,
    100% 59%,
    86% 54%,
    83% 47%,
    68% 45%,
    59% 38%,
    82% 26%,
    76% 20%,
    82% 7%,
    73% 0,
    53% 1%,
    43% 9%,
    20% 9%,
    0 17%,
    0 44%,
    0 89%,
    6% 92%,
    5% 99%
  );
  clip-path: polygon(
    34% 95%,
    73% 100%,
    100% 98%,
    100% 59%,
    86% 54%,
    83% 47%,
    68% 45%,
    59% 38%,
    82% 26%,
    76% 20%,
    82% 7%,
    73% 0,
    53% 1%,
    43% 9%,
    20% 9%,
    0 17%,
    0 44%,
    0 89%,
    6% 92%,
    5% 99%
  );
}
.prov-4 {
  left: 3.5%;
  width: 8%;
  top: 17.2%;
  -webkit-clip-path: polygon(
    39% 100%,
    60% 83%,
    93% 78%,
    100% 61%,
    100% 53%,
    97% 44%,
    100% 18%,
    100% 11%,
    94% 0,
    91% 0,
    71% 23%,
    61% 27%,
    48% 33%,
    40% 37%,
    26% 50%,
    16% 63%,
    6% 75%,
    0 83%,
    0 90%,
    8% 98%
  );
  clip-path: polygon(
    39% 100%,
    60% 83%,
    93% 78%,
    100% 61%,
    100% 53%,
    97% 44%,
    100% 18%,
    100% 11%,
    94% 0,
    91% 0,
    71% 23%,
    61% 27%,
    48% 33%,
    40% 37%,
    26% 50%,
    16% 63%,
    6% 75%,
    0 83%,
    0 90%,
    8% 98%
  );
}
.prov-5 {
  top: 20.8%;
  left: 0.3%;
  width: 17.5%;
  -webkit-clip-path: polygon(
    35% 100%,
    43% 91%,
    59% 87%,
    62% 73%,
    67% 75%,
    71% 89%,
    82% 94%,
    89% 88%,
    87% 78%,
    95% 61%,
    93% 47%,
    100% 38%,
    100% 34%,
    92% 24%,
    92% 12%,
    76% 0,
    0 0,
    7% 80%,
    0 83%,
    0 100%
  );
  clip-path: polygon(
    35% 100%,
    43% 91%,
    59% 87%,
    62% 73%,
    67% 75%,
    71% 89%,
    82% 94%,
    89% 88%,
    87% 78%,
    95% 61%,
    93% 47%,
    100% 38%,
    100% 34%,
    92% 24%,
    92% 12%,
    76% 0,
    0 0,
    7% 80%,
    0 83%,
    0 100%
  );
}
.prov-6 {
  top: 28.7%;
  left: 4.5%;
  width: 12%;
  -webkit-clip-path: polygon(
    38% 80%,
    50% 100%,
    79% 100%,
    100% 73%,
    88% 72%,
    82% 60%,
    84% 50%,
    94% 44%,
    95% 37%,
    100% 33%,
    100% 22%,
    71% 11%,
    67% 0,
    51% 0,
    48% 10%,
    24% 14%,
    0 48%,
    0 53%,
    6% 56%,
    21% 64%
  );
  clip-path: polygon(
    38% 80%,
    50% 100%,
    79% 100%,
    100% 73%,
    88% 72%,
    82% 60%,
    84% 50%,
    94% 44%,
    95% 37%,
    100% 33%,
    100% 22%,
    71% 11%,
    67% 0,
    51% 0,
    48% 10%,
    24% 14%,
    0 48%,
    0 53%,
    6% 56%,
    21% 64%
  );
}
.prov-7 {
  top: 28.2%;
  width: 19.5%;
  left: 27.9%;
  -webkit-clip-path: polygon(
    29% 98%,
    71% 100%,
    85% 82%,
    73% 60%,
    80% 46%,
    100% 49%,
    100% 19%,
    85% 19%,
    73% 14%,
    57% 11%,
    36% 7%,
    18% 0,
    5% 0,
    7% 16%,
    18% 23%,
    19% 30%,
    0 35%,
    0 79%,
    22% 85%
  );
  clip-path: polygon(
    29% 98%,
    71% 100%,
    85% 82%,
    73% 60%,
    80% 46%,
    100% 49%,
    100% 19%,
    85% 19%,
    73% 14%,
    57% 11%,
    36% 7%,
    18% 0,
    5% 0,
    7% 16%,
    18% 23%,
    19% 30%,
    0 35%,
    0 79%,
    22% 85%
  );
}
.prov-8 {
  width: 22.4%;
  top: 36.4%;
  left: 11.5%;
  -webkit-clip-path: polygon(
    27% 91%,
    26% 95%,
    27% 100%,
    30% 100%,
    34% 96%,
    37% 93%,
    42% 90%,
    47% 89%,
    51% 79%,
    63% 61%,
    70% 62%,
    76% 67%,
    82% 83%,
    92% 85%,
    100% 87%,
    100% 61%,
    85% 55%,
    82% 41%,
    83% 27%,
    78% 22%,
    81% 13%,
    78% 9%,
    77% 1%,
    62% 1%,
    67% 22%,
    60% 33%,
    52% 37%,
    37% 27%,
    23% 28%,
    21% 24%,
    13% 16%,
    15% 10%,
    14% 0,
    5% 0,
    0 0,
    0 21%,
    10% 52%,
    19% 65%,
    21% 75%,
    23% 80%,
    26% 85%
  );
  clip-path: polygon(
    27% 91%,
    26% 95%,
    27% 100%,
    30% 100%,
    34% 96%,
    37% 93%,
    42% 90%,
    47% 89%,
    51% 79%,
    63% 61%,
    70% 62%,
    76% 67%,
    82% 83%,
    92% 85%,
    100% 87%,
    100% 61%,
    85% 55%,
    82% 41%,
    83% 27%,
    78% 22%,
    81% 13%,
    78% 9%,
    77% 1%,
    62% 1%,
    67% 22%,
    60% 33%,
    52% 37%,
    37% 27%,
    23% 28%,
    21% 24%,
    13% 16%,
    15% 10%,
    14% 0,
    5% 0,
    0 0,
    0 21%,
    10% 52%,
    19% 65%,
    21% 75%,
    23% 80%,
    26% 85%
  );
}
.prov-9 {
  width: 45.5%;
  top: 38.7%;
  right: 13.5%;
  -webkit-clip-path: polygon(
    24% 73%,
    26% 77%,
    21% 84%,
    23% 91%,
    35% 89%,
    39% 86%,
    39% 99%,
    48% 100%,
    67% 100%,
    70% 94%,
    75% 93%,
    80% 90%,
    88% 84%,
    94% 78%,
    100% 67%,
    100% 52%,
    85% 66%,
    70% 65%,
    68% 54%,
    62% 51%,
    56% 48%,
    58% 41%,
    52% 31%,
    52% 25%,
    48% 24%,
    46% 12%,
    38% 1%,
    27% 0,
    26% 12%,
    21% 13%,
    17% 14%,
    12% 14%,
    8% 19%,
    5% 23%,
    0 25%,
    0 40%,
    3% 52%,
    13% 45%,
    24% 34%,
    21% 48%,
    24% 60%
  );
  clip-path: polygon(
    24% 73%,
    26% 77%,
    21% 84%,
    23% 91%,
    35% 89%,
    39% 86%,
    39% 99%,
    48% 100%,
    67% 100%,
    70% 94%,
    75% 93%,
    80% 90%,
    88% 84%,
    94% 78%,
    100% 67%,
    100% 52%,
    85% 66%,
    70% 65%,
    68% 54%,
    62% 51%,
    56% 48%,
    58% 41%,
    52% 31%,
    52% 25%,
    48% 24%,
    46% 12%,
    38% 1%,
    27% 0,
    26% 12%,
    21% 13%,
    17% 14%,
    12% 14%,
    8% 19%,
    5% 23%,
    0 25%,
    0 40%,
    3% 52%,
    13% 45%,
    24% 34%,
    21% 48%,
    24% 60%
  );
}
.prov-10 {
  width: 23%;
  left: 30.1%;
  top: 44%;
  -webkit-clip-path: polygon(
    48% 97%,
    47% 84%,
    49% 78%,
    68% 76%,
    76% 71%,
    80% 72%,
    90% 71%,
    99% 65%,
    99% 61%,
    95% 49%,
    100% 24%,
    100% 11%,
    91% 11%,
    81% 18%,
    71% 39%,
    68% 41%,
    57% 48%,
    52% 40%,
    52% 32%,
    50% 26%,
    49% 18%,
    46% 10%,
    42% 12%,
    39% 10%,
    37% 0%,
    33% 0%,
    31% 7%,
    24% 8%,
    14% 6%,
    10% 7%,
    7% 2%,
    3% 5%,
    0% 4%,
    0 16%,
    1% 22%,
    3% 27%,
    12% 38%,
    8% 43%,
    6% 52%,
    0% 63%,
    0% 75%,
    3% 84%,
    3% 84%,
    1% 93%,
    4% 96%,
    4% 96%,
    7% 100%,
    7% 100%,
    10% 99%,
    10% 99%,
    20% 92%,
    25% 93%,
    28% 99%,
    41% 100%
  );
  clip-path: polygon(
    48% 97%,
    47% 84%,
    49% 78%,
    68% 76%,
    76% 71%,
    80% 72%,
    90% 71%,
    99% 65%,
    99% 61%,
    95% 49%,
    100% 24%,
    100% 11%,
    91% 11%,
    81% 18%,
    71% 39%,
    68% 41%,
    57% 48%,
    52% 40%,
    52% 32%,
    50% 26%,
    49% 18%,
    46% 10%,
    42% 12%,
    39% 10%,
    37% 0%,
    33% 0%,
    31% 7%,
    24% 8%,
    14% 6%,
    10% 7%,
    7% 2%,
    3% 5%,
    0% 4%,
    0 16%,
    1% 22%,
    3% 27%,
    12% 38%,
    8% 43%,
    6% 52%,
    0% 63%,
    0% 75%,
    3% 84%,
    3% 84%,
    1% 93%,
    4% 96%,
    4% 96%,
    7% 100%,
    7% 100%,
    10% 99%,
    10% 99%,
    20% 92%,
    25% 93%,
    28% 99%,
    41% 100%
  );
}
.prov-11 {
  width: 31%;
  bottom: 27.9%;
  right: 0.2%;
  -webkit-clip-path: polygon(
    92% 97%,
    94% 91%,
    100% 88%,
    100% 88%,
    100% 75%,
    100% 75%,
    81% 27%,
    69% 25%,
    60% 30%,
    54% 24%,
    54% 0%,
    46% 0%,
    43% 8%,
    33% 16%,
    18% 23%,
    8% 21%,
    8% 28%,
    4% 37%,
    0% 50%,
    0% 61%,
    4% 64%,
    6% 71%,
    9% 73%,
    9% 73%,
    9% 82%,
    14% 88%,
    25% 92%,
    47% 99%,
    48% 94%,
    48% 94%,
    60% 100%,
    60% 100%,
    86% 100%
  );
  clip-path: polygon(
    92% 97%,
    94% 91%,
    100% 88%,
    100% 88%,
    100% 75%,
    100% 75%,
    81% 27%,
    69% 25%,
    60% 30%,
    54% 24%,
    54% 0%,
    46% 0%,
    43% 8%,
    33% 16%,
    18% 23%,
    8% 21%,
    8% 28%,
    4% 37%,
    0% 50%,
    0% 61%,
    4% 64%,
    6% 71%,
    9% 73%,
    9% 73%,
    9% 82%,
    14% 88%,
    25% 92%,
    47% 99%,
    48% 94%,
    48% 94%,
    60% 100%,
    60% 100%,
    86% 100%
  );
}
.prov-12 {
  width: 30%;
  bottom: 17.5%;
  right: 14.7%;
  -webkit-clip-path: polygon(
    78% 84%,
    88% 71%,
    88% 66%,
    93% 64%,
    100% 55%,
    100% 43%,
    95% 43%,
    95% 46%,
    79% 42%,
    68% 38%,
    61% 38%,
    58% 35%,
    60% 31%,
    56% 26%,
    47% 17%,
    49% 8%,
    53% 5%,
    53% 1%,
    43% 1%,
    40% 3%,
    30% 0%,
    22% 0%,
    12% 2%,
    10% 5%,
    5% 8%,
    11% 12%,
    7% 16%,
    5% 20%,
    0% 22%,
    0% 34%,
    4% 37%,
    5% 46%,
    14% 54%,
    23% 54%,
    43% 62%,
    44% 68%,
    30% 78%,
    33% 86%,
    46% 89%,
    48% 86%,
    50% 89%,
    49% 92%,
    57% 95%,
    67% 95%,
    74% 100%,
    78% 100%,
    79% 91%,
    80% 86%
  );
  clip-path: polygon(
    78% 84%,
    88% 71%,
    88% 66%,
    93% 64%,
    100% 55%,
    100% 43%,
    95% 43%,
    95% 46%,
    79% 42%,
    68% 38%,
    61% 38%,
    58% 35%,
    60% 31%,
    56% 26%,
    47% 17%,
    49% 8%,
    53% 5%,
    53% 1%,
    43% 1%,
    40% 3%,
    30% 0%,
    22% 0%,
    12% 2%,
    10% 5%,
    5% 8%,
    11% 12%,
    7% 16%,
    5% 20%,
    0% 22%,
    0% 34%,
    4% 37%,
    5% 46%,
    14% 54%,
    23% 54%,
    43% 62%,
    44% 68%,
    30% 78%,
    33% 86%,
    46% 89%,
    48% 86%,
    50% 89%,
    49% 92%,
    57% 95%,
    67% 95%,
    74% 100%,
    78% 100%,
    79% 91%,
    80% 86%
  );
}
.prov-13 {
  width: 15%;
  right: 30.2%;
  bottom: 20.8%;
  z-index: 200;
  -webkit-clip-path: polygon(
    66% 13%,
    98% 36%,
    100% 49%,
    100% 59%,
    92% 75%,
    73% 86%,
    76% 96%,
    69% 97%,
    59% 95%,
    50% 98%,
    41% 92%,
    34% 95%,
    11% 100%,
    8% 100%,
    5% 92%,
    11% 84%,
    9% 78%,
    11% 60%,
    0% 19%,
    0% 0%,
    11% 0%,
    17% 7%,
    29% 11%,
    44% 15%,
    53% 10%
  );
  clip-path: polygon(
    66% 13%,
    98% 36%,
    100% 49%,
    100% 59%,
    92% 75%,
    73% 86%,
    76% 96%,
    69% 97%,
    59% 95%,
    50% 98%,
    41% 92%,
    34% 95%,
    11% 100%,
    8% 100%,
    5% 92%,
    11% 84%,
    9% 78%,
    11% 60%,
    0% 19%,
    0% 0%,
    11% 0%,
    17% 7%,
    29% 11%,
    44% 15%,
    53% 10%
  );
}
.prov-14 {
  width: 19.2%;
  right: 38.2%;
  bottom: 17.2%;
  -webkit-clip-path: polygon(
    100% 80%,
    100% 74%,
    74% 76%,
    77% 62%,
    66% 38%,
    69% 37%,
    80% 41%,
    96% 42%,
    91% 35%,
    84% 29%,
    79% 17%,
    72% 14%,
    67% 3%,
    50% 4%,
    43% 0,
    37% 0,
    31% 9%,
    38% 13%,
    40% 23%,
    9% 34%,
    13% 51%,
    0 55%,
    0 73%,
    6% 74%,
    8% 88%,
    39% 100%,
    81% 96%,
    93% 92%,
    98% 81%
  );
  clip-path: polygon(
    100% 80%,
    100% 74%,
    74% 76%,
    77% 62%,
    66% 38%,
    69% 37%,
    80% 41%,
    96% 42%,
    91% 35%,
    84% 29%,
    79% 17%,
    72% 14%,
    67% 3%,
    50% 4%,
    43% 0,
    37% 0,
    31% 9%,
    38% 13%,
    40% 23%,
    9% 34%,
    13% 51%,
    0 55%,
    0 73%,
    6% 74%,
    8% 88%,
    39% 100%,
    81% 96%,
    93% 92%,
    98% 81%
  );
}
.prov-15 {
  width: 13%;
  bottom: 25.5%;
  left: 38.2%;
  -webkit-clip-path: polygon(
    63% 76%,
    59% 69%,
    75% 71%,
    76% 62%,
    89% 61%,
    93% 53%,
    100% 50%,
    100% 38%,
    98% 21%,
    90% 17%,
    97% 0,
    75% 0,
    61% 0,
    54% 0,
    52% 7%,
    39% 16%,
    26% 25%,
    20% 33%,
    12% 42%,
    7% 47%,
    5% 58%,
    0 64%,
    4% 69%,
    16% 73%,
    17% 77%,
    12% 81%,
    10% 100%,
    40% 100%,
    65% 100%
  );
  clip-path: polygon(
    63% 76%,
    59% 69%,
    75% 71%,
    76% 62%,
    89% 61%,
    93% 53%,
    100% 50%,
    100% 38%,
    98% 21%,
    90% 17%,
    97% 0,
    75% 0,
    61% 0,
    54% 0,
    52% 7%,
    39% 16%,
    26% 25%,
    20% 33%,
    12% 42%,
    7% 47%,
    5% 58%,
    0 64%,
    4% 69%,
    16% 73%,
    17% 77%,
    12% 81%,
    10% 100%,
    40% 100%,
    65% 100%
  );
}
.prov-16 {
  width: 13.7%;
  left: 32.3%;
  bottom: 17.9%;
  -webkit-clip-path: polygon(
    5% 42%,
    0 47%,
    9% 49%,
    12% 57%,
    29% 73%,
    48% 78%,
    52% 86%,
    62% 92%,
    70% 100%,
    74% 100%,
    81% 94%,
    97% 89%,
    100% 84%,
    100% 81%,
    96% 70%,
    90% 63%,
    81% 65%,
    82% 61%,
    79% 58%,
    82% 45%,
    70% 42%,
    65% 38%,
    55% 36%,
    55% 27%,
    62% 24%,
    59% 17%,
    47% 16%,
    43% 13%,
    49% 10%,
    51% 0%,
    35% 0%,
    24% 3%,
    12% 10%,
    13% 21%,
    10% 33%,
    0% 33%,
    0% 35%,
    4% 40%
  );
  clip-path: polygon(
    5% 42%,
    0 47%,
    9% 49%,
    12% 57%,
    29% 73%,
    48% 78%,
    52% 86%,
    62% 92%,
    70% 100%,
    74% 100%,
    81% 94%,
    97% 89%,
    100% 84%,
    100% 81%,
    96% 70%,
    90% 63%,
    81% 65%,
    82% 61%,
    79% 58%,
    82% 45%,
    70% 42%,
    65% 38%,
    55% 36%,
    55% 27%,
    62% 24%,
    59% 17%,
    47% 16%,
    43% 13%,
    49% 10%,
    51% 0%,
    35% 0%,
    24% 3%,
    12% 10%,
    13% 21%,
    10% 33%,
    0% 33%,
    0% 35%,
    4% 40%
  );
}
.prov-17 {
  width: 35.6%;
  bottom: 7.1%;
  right: 21.8%;
  -webkit-clip-path: polygon(
    0 17%,
    0 25%,
    5% 30%,
    10% 33%,
    18% 43%,
    29% 57%,
    37% 60%,
    51% 75%,
    61% 81%,
    64% 88%,
    77% 100%,
    84% 100%,
    87% 91%,
    85% 84%,
    90% 72%,
    97% 72%,
    98% 67%,
    100% 65%,
    100% 45%,
    98% 26%,
    94% 15%,
    89% 12%,
    83% 14%,
    77% 0,
    67% 0,
    54% 0,
    49% 5%,
    48% 16%,
    43% 18%,
    41% 21%,
    34% 21%,
    26% 26%,
    23% 21%,
    21% 23%,
    18% 21%,
    15% 12%,
    9% 10%
  );
  clip-path: polygon(
    0 17%,
    0 25%,
    5% 30%,
    10% 33%,
    18% 43%,
    29% 57%,
    37% 60%,
    51% 75%,
    61% 81%,
    64% 88%,
    77% 100%,
    84% 100%,
    87% 91%,
    85% 84%,
    90% 72%,
    97% 72%,
    98% 67%,
    100% 65%,
    100% 45%,
    98% 26%,
    94% 15%,
    89% 12%,
    83% 14%,
    77% 0,
    67% 0,
    54% 0,
    49% 5%,
    48% 16%,
    43% 18%,
    41% 21%,
    34% 21%,
    26% 26%,
    23% 21%,
    21% 23%,
    18% 21%,
    15% 12%,
    9% 10%
  );
}
.prov-18 {
  width: 20%;
  bottom: 6%;
  right: 3%;
  -webkit-clip-path: polygon(
    0 31%,
    0 68%,
    11% 70%,
    18% 73%,
    16% 79%,
    33% 84%,
    24% 88%,
    32% 97%,
    54% 100%,
    60% 100%,
    98% 86%,
    96% 82%,
    99% 77%,
    78% 74%,
    76% 68%,
    61% 67%,
    53% 63%,
    49% 66%,
    46% 63%,
    48% 61%,
    60% 64%,
    56% 55%,
    61% 53%,
    81% 60%,
    89% 56%,
    100% 53%,
    87% 47%,
    89% 43%,
    97% 40%,
    100% 38%,
    100% 17%,
    100% 3%,
    76% 6%,
    39% 0,
    17% 12%,
    3% 17%,
    0 21%
  );
  clip-path: polygon(
    0 31%,
    0 68%,
    11% 70%,
    18% 73%,
    16% 79%,
    33% 84%,
    24% 88%,
    32% 97%,
    54% 100%,
    60% 100%,
    98% 86%,
    96% 82%,
    99% 77%,
    78% 74%,
    76% 68%,
    61% 67%,
    53% 63%,
    49% 66%,
    46% 63%,
    48% 61%,
    60% 64%,
    56% 55%,
    61% 53%,
    81% 60%,
    89% 56%,
    100% 53%,
    87% 47%,
    89% 43%,
    97% 40%,
    100% 38%,
    100% 17%,
    100% 3%,
    76% 6%,
    39% 0,
    17% 12%,
    3% 17%,
    0 21%
  );
}
.prov-19 {
  width: 13%;
  bottom: 4.1%;
  right: 15.2%;
  -webkit-clip-path: polygon(
    3% 58%,
    0 62%,
    0 68%,
    0 77%,
    1% 79%,
    0 95%,
    12% 100%,
    27% 95%,
    36% 91%,
    39% 87%,
    44% 82%,
    48% 79%,
    53% 75%,
    57% 73%,
    61% 71%,
    62% 70%,
    64% 67%,
    66% 67%,
    68% 64%,
    69% 61%,
    71% 57%,
    71% 54%,
    75% 50%,
    81% 50%,
    89% 58%,
    100% 49%,
    100% 37%,
    86% 29%,
    88% 13%,
    79% 2%,
    50% 0,
    47% 14%,
    39% 17%,
    35% 25%,
    19% 24%,
    0 43%,
    0 53%
  );
  clip-path: polygon(
    3% 58%,
    0 62%,
    0 68%,
    0 77%,
    1% 79%,
    0 95%,
    12% 100%,
    27% 95%,
    36% 91%,
    39% 87%,
    44% 82%,
    48% 79%,
    53% 75%,
    57% 73%,
    61% 71%,
    62% 70%,
    64% 67%,
    66% 67%,
    68% 64%,
    69% 61%,
    71% 57%,
    71% 54%,
    75% 50%,
    81% 50%,
    89% 58%,
    100% 49%,
    100% 37%,
    86% 29%,
    88% 13%,
    79% 2%,
    50% 0,
    47% 14%,
    39% 17%,
    35% 25%,
    19% 24%,
    0 43%,
    0 53%
  );
}
.prov-20 {
  width: 14.8%;
  bottom: 0.6%;
  right: 11.3%;
  -webkit-clip-path: polygon(
    62% 100%,
    74% 97%,
    85% 80%,
    80% 62%,
    100% 56%,
    100% 51%,
    99% 36%,
    71% 22%,
    65% 1%,
    60% 6%,
    56% 0%,
    48% 0%,
    43% 5%,
    41% 16%,
    26% 30%,
    15% 46%,
    0% 57%,
    0% 60%,
    14% 74%,
    41% 100%,
    57% 100%
  );
  clip-path: polygon(
    62% 100%,
    74% 97%,
    85% 80%,
    80% 62%,
    100% 56%,
    100% 51%,
    99% 36%,
    71% 22%,
    65% 1%,
    60% 6%,
    56% 0%,
    48% 0%,
    43% 5%,
    41% 16%,
    26% 30%,
    15% 46%,
    0% 57%,
    0% 60%,
    14% 74%,
    41% 100%,
    57% 100%
  );
}
.prov-21 {
  width: 10.7%;
  right: 3.3%;
  bottom: 10.2%;
  z-index: 200;
  -webkit-clip-path: polygon(
    77% 99%,
    80% 95%,
    77% 92%,
    98% 89%,
    100% 85%,
    100% 73%,
    94% 74%,
    87% 68%,
    89% 36%,
    84% 34%,
    78% 33%,
    73% 4%,
    67% 6%,
    58% 12%,
    54% 20%,
    30% 0%,
    11% 10%,
    22% 34%,
    9% 25%,
    0% 34%,
    7% 49%,
    15% 54%,
    17% 44%,
    22% 53%,
    30% 56%,
    44% 58%,
    42% 74%,
    56% 82%,
    72% 85%,
    71% 91%,
    69% 97%,
    69% 100%,
    73% 100%
  );
  clip-path: polygon(
    77% 99%,
    80% 95%,
    77% 92%,
    98% 89%,
    100% 85%,
    100% 73%,
    94% 74%,
    87% 68%,
    89% 36%,
    84% 34%,
    78% 33%,
    73% 4%,
    67% 6%,
    58% 12%,
    54% 20%,
    30% 0%,
    11% 10%,
    22% 34%,
    9% 25%,
    0% 34%,
    7% 49%,
    15% 54%,
    17% 44%,
    22% 53%,
    30% 56%,
    44% 58%,
    42% 74%,
    56% 82%,
    72% 85%,
    71% 91%,
    69% 97%,
    69% 100%,
    73% 100%
  );
}
.prov-22 {
  width: 26.2%;
  bottom: 33.2%;
  left: 33.8%;
  -webkit-clip-path: polygon(
    28% 100%,
    44% 83%,
    45% 71%,
    48% 71%,
    59% 71%,
    65% 77%,
    70% 87%,
    90% 86%,
    96% 80%,
    97% 71%,
    100% 64%,
    100% 52%,
    96% 51%,
    100% 49%,
    100% 8%,
    97% 4%,
    91% 4%,
    87% 15%,
    75% 16%,
    71% 18%,
    67% 9%,
    52% 0%,
    47% 0%,
    44% 4%,
    34% 3%,
    27% 7%,
    9% 8%,
    4% 16%,
    0% 14%,
    0% 41%,
    4% 48%,
    5% 60%,
    10% 68%,
    23% 73%,
    21% 80%,
    25% 89%,
    23% 96%
  );
  clip-path: polygon(
    28% 100%,
    44% 83%,
    45% 71%,
    48% 71%,
    59% 71%,
    65% 77%,
    70% 87%,
    90% 86%,
    96% 80%,
    97% 71%,
    100% 64%,
    100% 52%,
    96% 51%,
    100% 49%,
    100% 8%,
    97% 4%,
    91% 4%,
    87% 15%,
    75% 16%,
    71% 18%,
    67% 9%,
    52% 0%,
    47% 0%,
    44% 4%,
    34% 3%,
    27% 7%,
    9% 8%,
    4% 16%,
    0% 14%,
    0% 41%,
    4% 48%,
    5% 60%,
    10% 68%,
    23% 73%,
    21% 80%,
    25% 89%,
    23% 96%
  );
}
.prov-23 {
  width: 16%;
  top: 42.1%;
  left: 17.8%;
  -webkit-clip-path: polygon(
    85% 82%,
    88% 77%,
    81% 65%,
    93% 55%,
    100% 44%,
    100% 42%,
    85% 34%,
    77% 17%,
    69% 6%,
    63% 3%,
    62% 0,
    45% 1%,
    26% 16%,
    67% 81%,
    72% 89%,
    75% 87%,
    79% 85%,
    83% 86%
  );
  clip-path: polygon(
    85% 82%,
    88% 77%,
    81% 65%,
    93% 55%,
    100% 44%,
    100% 42%,
    85% 34%,
    77% 17%,
    69% 6%,
    63% 3%,
    62% 0,
    45% 1%,
    26% 16%,
    67% 81%,
    72% 89%,
    75% 87%,
    79% 85%,
    83% 86%
  );
}

.prov-24 {
  width: 18.5%;
  bottom: 29.9%;
  left: 22.9%;
  -webkit-clip-path: polygon(
    61% 100%,
    69% 94%,
    80% 91%,
    88% 92%,
    100% 80%,
    100% 78%,
    96% 76%,
    100% 73%,
    94% 66%,
    96% 61%,
    82% 56%,
    77% 56%,
    71% 50%,
    69% 42%,
    63% 40%,
    60% 32%,
    53% 6%,
    48% 0%,
    39% 0%,
    16% 12%,
    13% 12%,
    11% 7%,
    8% 6%,
    11% 3%,
    10% 0%,
    4% 1%,
    0% 9%,
    7% 28%,
    3% 34%,
    12% 36%,
    18% 41%,
    24% 57%,
    16% 61%,
    19% 63%,
    25% 61%,
    31% 63%,
    36% 67%,
    43% 81%,
    50% 85%,
    50% 92%
  );
  clip-path: polygon(
    61% 100%,
    69% 94%,
    80% 91%,
    88% 92%,
    100% 80%,
    100% 78%,
    96% 76%,
    100% 73%,
    94% 66%,
    96% 61%,
    82% 56%,
    77% 56%,
    71% 50%,
    69% 42%,
    63% 40%,
    60% 32%,
    53% 6%,
    48% 0%,
    39% 0%,
    16% 12%,
    13% 12%,
    11% 7%,
    8% 6%,
    11% 3%,
    10% 0%,
    4% 1%,
    0% 9%,
    7% 28%,
    3% 34%,
    12% 36%,
    18% 41%,
    24% 57%,
    16% 61%,
    19% 63%,
    25% 61%,
    31% 63%,
    36% 67%,
    43% 81%,
    50% 85%,
    50% 92%
  );
}

.prov-25 {
  width: 22%;
  left: 32.4%;
  bottom: 41.8%;
  -webkit-clip-path: polygon(
    1% 81%,
    3% 97%,
    14% 100%,
    17% 90%,
    27% 87%,
    36% 87%,
    46% 87%,
    50% 82%,
    62% 82%,
    67% 75%,
    75% 86%,
    87% 91%,
    100% 72%,
    100% 59%,
    97% 55%,
    96% 8%,
    92% 0%,
    83% 6%,
    73% 9%,
    69% 5%,
    60% 14%,
    38% 16%,
    35% 31%,
    38% 46%,
    33% 50%,
    20% 48%,
    16% 38%,
    8% 39%,
    0 50%,
    0 65%
  );
  clip-path: polygon(
    1% 81%,
    3% 97%,
    14% 100%,
    17% 90%,
    27% 87%,
    36% 87%,
    46% 87%,
    50% 82%,
    62% 82%,
    67% 75%,
    75% 86%,
    87% 91%,
    100% 72%,
    100% 59%,
    97% 55%,
    96% 8%,
    92% 0%,
    83% 6%,
    73% 9%,
    69% 5%,
    60% 14%,
    38% 16%,
    35% 31%,
    38% 46%,
    33% 50%,
    20% 48%,
    16% 38%,
    8% 39%,
    0 50%,
    0 65%
  );
}

.prov-26 {
  width: 16.4%;
  left: 17.6%;
  bottom: 43.8%;
  -webkit-clip-path: polygon(
    38% 93%,
    44% 95%,
    45% 100%,
    53% 100%,
    73% 89%,
    28% 15%,
    21% 22%,
    7% 26%,
    0% 32%,
    0% 39%,
    6% 44%,
    4% 46%,
    9% 51%,
    14% 63%,
    22% 87%,
    31% 96%,
    39% 86%,
    42% 87%
  );
  clip-path: polygon(
    38% 93%,
    44% 95%,
    45% 100%,
    53% 100%,
    73% 89%,
    28% 15%,
    21% 22%,
    7% 26%,
    0% 32%,
    0% 39%,
    6% 44%,
    4% 46%,
    9% 51%,
    14% 63%,
    22% 87%,
    31% 96%,
    39% 86%,
    42% 87%
  );
}

.map-container {
  width: 65%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

.map-relative {
  position: relative;
  overflow: visible;
}

.mapa-base {
  width: 118%;
  top: -4.5%;
  right: -3%;
  position: absolute;
}

.mapa-completo {
  width: 100%;
}

.tooltip-map {
  width: 200px;
  max-width: 40%;
  position: absolute;
  bottom: 25%;
  left: 35%;
  display: none;
  transition: var(--transition);
  z-index: 211;
  pointer-events: none;
}

.map-1 {
  width: 70%;
  overflow: visible;
  z-index: 0;
}

.moto-int {
  width: 50%;
  max-height: 580px;
  padding-bottom: 70px;
  margin-left: -60px;
  z-index: 10;
  transform: translateY(-80px);
  opacity: 0;
  transition: all 0.4s 0.4s ease-in-out;
}

.info-depto {
  width: 30%;
  min-width: 350px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: all 0.6s ease-in-out;
}

.prov-up {
  opacity: 1;
  -webkit-filter: invert(70%) sepia(54%) saturate(327%) hue-rotate(180deg) brightness(105%) contrast(90%);
  filter: invert(70%) sepia(54%) saturate(327%) hue-rotate(180deg) brightness(105%) contrast(90%);
  transform: scale(1.02) translateY(-2px);
  z-index: 210;
}

.prov-active {
  opacity: 1;
  -webkit-filter: invert(5%) sepia(75%) saturate(0%) hue-rotate(176deg) brightness(6%) contrast(85%);
  filter: invert(5%) sepia(75%) saturate(0%) hue-rotate(176deg) brightness(6%) contrast(85%);
}

.prov-up-blue {
  opacity: 1;
  transform: scale(1.02) translateY(-2px);
  z-index: 210;
}

.datos-info {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 25px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.2s 0.2s ease-in-out;
}
.datos-info > .datos > p {
  width: 100%;
  font-size: 12px;
}

.datos {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.datos-info h4,
p {
  color: var(--blanco);
}

.datos-info h4 {
  font-weight: 500;
}

.borde-white {
  position: relative;
  height: 5px;
}

.borde-white::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to right, #fff, #fff);
}

.borde-blue {
  position: relative;
  height: 5px;
}

.borde-blue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 35%;
  height: 3px;
  background-image: linear-gradient(to right, rgb(3, 93, 227), rgb(3, 93, 227));
}

.title-carmencita {
  font-size: 20px;
  font-weight: 500;
  width: 100%;
  color: var(--blanco);
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.3s 0.2s ease-in-out;
}

.text-carmencita {
  width: 100%;
  font-size: 13px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.4s 0.2s ease-in-out;
}

.img-perfil {
  border-radius: 5px;
  -o-object-fit: conver;
  object-fit: conver;
  border: 1px solid #fff;
  width: 60px;
  height: 50px;
}

.img-carmencita {
  width: 100%;
  height: 200px;
  max-height: 300px;
  margin: 20px auto;
  border-radius: 15px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.4s 0.3s ease-in-out;
}

.button-info {
  background-color: #0061ff;
  width: 60%;
  padding: 15px 10px;
  border-radius: 5px;
  border: none;
  outline: none;
  color: var(--blanco);
  font-weight: 600;
  cursor: pointer;
}
.modal-btn {
  padding: 20px 15px;
}
.anime-btn {
  opacity: 0;
  transform: translateY(-20px);
  transition: 0.5s 0.4s ease-in-out;
}

.show-card {
  opacity: 1;
  transform: translateY(0);
}

.button-info:hover {
  background-color: #095ce0;
}

.linea {
  position: absolute;
  left: -140px;
  top: 20px;
  width: 100px;
  opacity: 0;
  transition: 0.5s ease-in-out;
}

.ver-mas {
  position: absolute;
  bottom: 20px;
  cursor: pointer;
  -webkit-animation: float infinite 0.8s ease-in-out;
  animation: float infinite 0.8s ease-in-out;
}

.bg-dark {
  background-color: var(--bg-gris2);
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
  -webkit-clip-path: polygon(0 0, 100% 4%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0% 100%);
  transition: var(--transition);
}

.map-client {
  width: 100%;
  height: 62vw;
  min-height: 500px;
  background: inherit;
  background-image: url("../assets/backgrounds/background.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.content-map {
  width: 85%;
  margin: auto;
  padding-top: 100px;
}

.mapa-interactive {
  width: 90%;
  height: 35vw;
  padding-top: 100px;
  margin: auto !important;
}

.mapa-interactive iframe {
  border-radius: 20px !important;
}

.footer-container {
  width: 100%;
  min-height: 450px;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
}

.gris-footer {
  width: 100%;
  height: 80px;
  background-color: #666666;
}

.footer-up {
  width: 90%;
  min-height: 200px;
  margin: auto;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.column-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
  gap: 20px;
}

.column-2 {
  width: 20%;
}

.column-3 {
  width: 20%;
}

.redes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.redes a {
  color: #000;
  font-size: 14px;
}

.redes a:hover {
  color: #888;
}

.suscribe {
  color: #666;
  font-weight: 600;
}

.button-suscribe {
  background-color: #666;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 15px 40px;
  font-size: 15px;
  border: none;
  outline: none;
  color: var(--blanco);
  font-weight: 600;
  margin-top: 10px;
  cursor: pointer;
}

.button-suscribe:hover {
  background-color: #888;
}

.cont-links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  align-items: left;
}

.links {
  font-weight: 400;
  font-size: 14px;
  color: #7e7e7e;
}

.list-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgb(21, 21, 21);
  font-weight: 400;
  cursor: pointer;
  font-size: 12px;
}

.list-col:hover {
  text-decoration: underline;
}

.copy-footer {
  color: #000;
  font-size: 12px;
}

.footer-down {
  width: 100%;
  min-height: 140px;
  background-color: var(--blanco);
  display: flex;
  align-items: center;
}

.footer-white {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.copiar_url2,
.copiar_url {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #095ce0;
  color: #fff;
  padding: 15px 10px;
  border-radius: 5px;
  border: none;
  font-weight: 500;
  margin-left: 5px;
  font-size: 14px;
  cursor: pointer;
}

.copy {
  color: #000;
  font-weight: 300;
  font-size: 14px;
  width: 50%;
  position: absolute;
  bottom: 50px;
  left: 30px;
}

.make {
  position: absolute;
  right: 40px;
  top: 40px;
  font-weight: 500;
}

.borde-black {
  position: relative;
  height: 5px;
}

.borde-black::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 120%;
  height: 5px;
  background-image: linear-gradient(to right, #000, #000);
}

.bg-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: #0008;
  display: none;
  place-items: center;
  opacity: 0;
}

.swiper-horizontal-2 {
  display: none;
}

.modal {
  width: 68%;
  margin: 20px auto;
  height: 90%;
  position: relative;
  overflow-y: auto;
  border-radius: 20px;
  scroll-behavior: smooth;
  background-color: var(--blanco);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.modal::-webkit-scrollbar {
  width: 10px;
  background-color: rgb(201, 222, 255);
}

.modal::-webkit-scrollbar-thumb {
  padding: 1px;
  background-color: #0061ff;
}

.close-modal {
  color: var(--blanco);
  position: fixed;
  top: 5px;
  right: 20px;
  z-index: 3;
  cursor: pointer;
}

.galeria {
  width: 100%;
  position: relative;
}

.bg-gris {
  background-color: var(--bg-black);
  width: 100%;
  height: 80%;
  position: absolute;
  top: 0;
  z-index: 1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 51%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 51%);
}

.title-modal {
  color: var(--blanco);
  font-weight: 500;
  width: 70%;
  font-size: xx-large;
  margin: 20px 0;
}

.container-portada {
  position: relative;
  width: 80%;
  left: 50%;
  padding-top: 50px;
  transform: translate(-50%);
  z-index: 2;
}

.portada-galeria {
  width: 100%;
  height: 400px;
  min-height: 380px;
}

.placeholder-max {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.descript {
  width: 80%;
  margin: auto;
  color: var(--texto);
}

.texto-contenedor {
  max-height: 110px; /* Establece una altura máxima para mostrar */
  overflow: hidden;
  position: relative;
}

.descripcion {
  color: var(--texto) !important;
  margin: 0;
  padding: 0;
  transition: max-height 0.3s ease-in-out; /* Agrega una transición suave */
}

#ver-mas-btn {
  margin: 10px 0;
  background-color: inherit;
  color: #007bff;
  border: none;
  cursor: pointer;
}

.expandido {
  max-height: -webkit-max-content;
  max-height: -moz-max-content;
  max-height: max-content;
}

.datos-between {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
  padding: 30px 0;
}

.datos-modal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.img-perfil2 {
  width: 60px;
  height: 50px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 5px;
}

.autor {
  color: var(--bg-gris2);
  margin: 0;
}

.subido {
  color: #7e7e7e;
  font-size: 14px;
  margin-bottom: 10px;
}

.winner {
  font-size: 12px;
  color: var(--texto);
}

.nombre {
  font-weight: 600;
  font-size: 28px;
}

.datos-publi {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

.borde-gris {
  position: relative;
  height: 5px;
}

.borde-gris::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #c4c4c4, #c4c4c4);
}

.descripcion-h6 {
  font-weight: 600;
  color: var(--bg-gris2);
  font-size: 16px;
}

.descripcion {
  margin: 20px 0;
  color: var(--texto) !important;
  font-size: 14px;
}

.descripcion > p {
  color: #000 !important;
}

.icons-publi {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.comment {
  padding-left: 40px;
  padding-right: 40px;
}

.content-modal {
  width: 80%;
  margin: auto;
}

.title-modal-2 {
  font-size: 24px;
  font-weight: 500;
  margin: 20px 0;
}

.content-ruta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10%;
}

.cont-mapa-static {
  width: 70%;
}

.mapa-static {
  width: 90%;
}

.detalles-ruta {
  width: 25%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.section-map {
  padding: 20px 0;
}

.cont-det {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 80px;
  height: 160px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  gap: 20px;
}

.details {
  display: flex;
  flex-direction: column;
}

.details > h6 {
  color: var(--texto);
  font-weight: 600;
  font-size: 17px;
}

.details > p {
  color: #0061ff;
  font-size: 16px;
}

.cont-bloques {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  color: var(--texto);
}

.bloque {
  width: 100%;
  text-align: center;
}

.b-b {
  border-bottom: 2px solid #0061ff;
}

.bl {
  border-left: 2px solid #0061ff;
}

.br {
  border-right: 2px solid #0061ff;
}

.bloque > article > p {
  padding: 10px;
  color: var(--texto);
}

.cont-galery {
  width: 100%;
  height: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
.icons {
  color: #000;
  width: 30px;
  fill: var(--texto);
  cursor: pointer;
}

.text-area-cont {
  position: relative;
}

.carita {
  position: absolute;
  bottom: 20px;
  right: 10px;
  width: 18px;
  cursor: pointer;
}

.img-slider {
  width: 100%;
  max-height: 130px;
  margin: 1px 0;
  border-radius: 3px;
  -o-object-fit: cover;
  object-fit: cover;
  cursor: pointer;
}

.swiper-vertical {
  width: 15%;
}

.portada-galery {
  width: 84%;
}

.title-galery {
  font-size: 26px;
  font-weight: 600;
  margin: 20px 0;
}
.loaded {
  transition: background-image 0.5s ease-in-out;
}

.likes {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 6px;
}

.likes-cant {
  position: absolute;
  bottom: 50%;
  right: -14px;
  font-size: 11px;
  transform: translateY(50%);
}

.portada {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 5px;
}

.swiper-horizontal {
  width: 100%;
  height: 400px;
  padding: 20px 0;
}

.swiper-horizontal,
.swiper-vertical {
  overflow: hidden;
}

.slider-galery {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  gap: 10px;
}

.title-form {
  margin: 20px 0;
  font-size: 24px;
  font-weight: 600;
}

.detalle-form {
  color: var(--bg-gris2);
  margin: 20px 0;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input,
textarea {
  border: none;
  border: 1px solid #0061ff;
  border-radius: 5px;
  padding: 15px;
  outline: none;
  font-family: "BMWmotorrad";
  background-color: #f5f5f5;
}

.inputs {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

input {
  width: 100%;
}

.map_modal {
  height: 400px;
  margin: 20px 0 50px 0;
}

.textarea {
  margin-top: 5px;
  width: 98.6%;
  padding-right: 0;
  height: 160px;
  resize: none;
  font-family: "BMWmotorrad";
}

.buttons-form {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.cancel-button {
  border: none;
  padding: 15px;
  background-color: inherit;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  text-transform: uppercase;
}

.cancel-button:hover {
  box-shadow: 0 0 0 1px #0061ff;
}
.btn-video {
  margin: 50px 0;
  text-align: center;
}
.submit-comment {
  padding: 15px 40px;
}

.container-form {
  padding: 20px 0;
}

.comentario {
  padding: 10px 5px;
  border-bottom: 1px solid #0002;
}

.cont-coment {
  width: 100%;
  max-height: 350px;
  overflow-y: auto;
  padding: 20px 0;
}

.cant-coment {
  font-size: 14px;
  color: var(--texto);
}

.user-coment {
  font-weight: 600;
}

.card-coment {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.time-coment {
  font-size: 12px;
  color: #7e7e7e;
}

.content-coment {
  color: #7e7e7e;
  font-size: 14px;
  margin: 10px 0;
}

.title-section-video {
  font-size: 18px;
  font-weight: 500;
}

.conteiner-videos,
.slider-video {
  padding: 30px 0 !important;
}

.slider-video {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.updown {
  width: 40px;
  opacity: 1;
  background-color: #0007;
  border-radius: 50%;
  cursor: pointer;
}

.updown:hover {
  background-color: #0009;
}

.rightleft2 {
  width: 40px;
  opacity: 0.8;
}

.prev-left2,
.next-right2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  width: 50px;
  cursor: pointer;
}

.prev-left2 {
  left: 10px;
  z-index: 300;
  background-color: #0008;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.next-right2 {
  right: 10px;
  z-index: 300;
  background-color: #0008;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

.rightleft {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  opacity: 0.8;
}

.galery {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.prev,
.next {
  position: absolute;
  right: 50%;
  transform: translate(50%);
  z-index: 400;
  /* pointer-events: none; */
}

.prev-left,
.next-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  place-items: center;
  background-color: #0007;
  cursor: pointer;
}

.prev-left:hover,
.next-right:hover {
  background-color: #0009;
}

#map {
  height: 100%;
  border-radius: 5px;
}

.prev {
  top: 2px;
}

.next {
  bottom: 2px;
}

.next-right {
  right: 2%;
}

.prev-left {
  left: -2%;
}

.swiperVertical {
  width: 20%;
  height: 100%;
}

.swiper-vertical {
  position: relative;
}

.card-video {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.bg-video {
  background-color: #e7e7e7;
  padding: 30px;
  border-radius: 10px;
}

.title-video {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0;
  color: var(--texto);
  max-height: 90px;
  min-height: 90px;
}

.img-video {
  width: 95%;
  height: auto;
  max-height: 250px;
  margin: auto;
}

.distancia {
  font-size: 17px;
  color: #8a8a8a !important;
}

.dist_detail {
  font-size: 20px;
  font-weight: 600;
}

.fade-datos {
  opacity: 1;
  transform: translate(0px);
  transform: translateY(0px);
}

.cls-1 {
  stroke-dasharray: 20 250; /* Inicialmente, la línea está oculta */
  stroke-dashoffset: 20 250; /* Comienza sin trazo oculto */
  transition: stroke-dasharray 0.5s ease-in-out; /* Transición suave */
}

.svg {
  opacity: 1;
  stroke-dasharray: 250 0; /* Inicialmente, la línea está oculta */
  stroke-dashoffset: 250 0; /* Comienza con el trazo oculto y lo anima */
}

.fade {
  opacity: 1;
}

.share-modal {
  z-index: 400;
  border: none;
  position: absolute;
  flex-direction: column;
  align-items: center;
  padding: 25px;
  bottom: 10%;
  left: 40%;
  border-radius: 5px;
  box-shadow: 0 0 5px 1px #0004;
}

.close-share {
  color: #000;
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

.share-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.url {
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.url_value {
  color: #000;
  background-color: #d7d7d7;
  width: 100%;
  height: 30px;
}

.share-button {
  display: flex;
  padding: 10px;
  margin: 5px;
  background-color: #0077b5; /* Color de LinkedIn */
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.share-button.facebook {
  background-color: #1877f2; /* Color de Facebook */
}

.share-button.twitter {
  background-color: #0c0c0c; /* Color de Twitter */
}

.swal-icon--success {
  border-color: #0068f6 !important;
}

.swal-icon--success__line {
  background-color: #0068f6 !important;
}

.swal-icon--success__ring {
  border: 3px solid #0068f666 !important;
}

.swal-button-container {
  margin: auto !important;
  display: flex !important;
  position: relative !important;
}
.swal-button {
  background-color: #0068f6 !important;
  margin: auto !important;
}

.place-img {
  width: 100%;
  height: calc(100% - 3px);
  border-radius: 10px;
}

.swal-button:focus {
  outline: none;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0068f666 !important;
}

@-webkit-keyframes float {
  0% {
    transform: translatey(-8%);
  }
  50% {
    transform: translateY(10%);
  }
  0% {
    transform: translatey(0%);
  }
}

@keyframes float {
  0% {
    transform: translatey(-8%);
  }
  50% {
    transform: translateY(10%);
  }
  0% {
    transform: translatey(0%);
  }
}