/* =========================
       MAPA
    ========================= */

    .map-section {
      width: 100%;
      min-height: 0;
      background: #f0efee;
      color: #2c2929;
      display: flex;
      justify-content: center;
    }

    .map-section__inner {
      width: 100%;
      min-height: 0;
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }


    /* =========================
       MAPA
    ========================= */

    .map-section__map {
      width: 100%;
      min-height: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .map-section__map > img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
    }


    /* =========================
       MARCADORES DEL MAPA
    ========================= */

    .map-marker {
      width: 19px;
      height: 19px;

      position: absolute;

      border: 0;
      border-radius: 50%;

      background: #750b04;

      transform: translate(-50%, -50%);

      cursor: pointer;

      z-index: 3;

      animation: markerPulse 1.8s ease-in-out infinite;

      transition:
        width 0.2s ease,
        height 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .map-marker::before {
      content: "";
      width: 100%;
      height: 100%;

      position: absolute;
      inset: 0;

      border-radius: 50%;

      background: #750b04;

      opacity: 0.4;

      animation: markerGlow 1.8s ease-in-out infinite;
    }

    .map-marker__label {
      position: absolute;

      left: 50%;
      bottom: calc(100% + 10px);

      transform: translateX(-50%);

      padding: 5px 9px;

      background: #2c2929;
      color: #ffffff;

      white-space: nowrap;

      font-size: 12px;
      line-height: 14px;

      border-radius: 2px;

      opacity: 0;
      visibility: hidden;

      pointer-events: none;

      transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    }

    .map-marker__label::after {
      content: "";

      position: absolute;

      left: 50%;
      top: 100%;

      transform: translateX(-50%);

      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #2c2929;
    }


    /* =========================
       ESTADO ACTIVO
    ========================= */

    .map-marker:hover,
    .map-marker.is-active {
      width: 22px;
      height: 22px;

      background: #b72323;

      animation: none;

      box-shadow: 0 0 0 5px rgba(183, 35, 35, 0.16);
    }

    .map-marker:hover::before,
    .map-marker.is-active::before {
      display: none;
    }

    .map-marker:hover .map-marker__label,
    .map-marker.is-active .map-marker__label {
      opacity: 1;
      visibility: visible;
    }


    /* =========================
       ANIMACIONES
    ========================= */

    @keyframes markerPulse {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }

      50% {
        transform: translate(-50%, -50%) scale(0.72);
        opacity: 0.55;
      }

    }

    @keyframes markerGlow {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.35;
      }

      50% {
        transform: scale(2.1);
        opacity: 0;
      }

    }


    /* =========================
       POSICIONES
    ========================= */

    .map-marker--usa {
      left: 19.824%;
      top: 42.329%;
    }

    .map-marker--mexico {
      left: 21.094%;
      top: 53.288%;
    }

    .map-marker--dominican {
      left: 31.934%;
      top: 55.205%;
    }

    .map-marker--guatemala {
      left: 24.805%;
      top: 56.849%;
    }

    .map-marker--venezuela {
      left: 32.91%;
      top: 60.959%;
    }

    .map-marker--ecuador {
      left: 28.906%;
      top: 65.616%;
    }

    .map-marker--peru {
      left: 29.785%;
      top: 70%;
    }

    .map-marker--chile {
      left: 31.25%;
      top: 83.699%;
    }

    .map-marker--spain {
      left: 53.809%;
      top: 42.74%;
    }


    /* =========================
       PANEL
    ========================= */

    .map-section__panel {
      width: fit-content;
      padding: 20px 0 20px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .map-section__content {
      width: 498px;
      height: 100%;
      padding: 76px 76px 74px 74px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      border-right: 1px solid #cecece;
      border-left: 1px solid #cecece;

      background: #f0efee;
    }


    /* =========================
       TÍTULO
    ========================= */

    .map-section__title {
      width: 100%;
      max-width: 412px;

      margin: 0;

      font-size: 43px;
      line-height: 38px;
      letter-spacing: 0;

      color: #2c2929;
    }

    .map-section__title span {
      display: block;
      color: #b72323;
    }


    /* =========================
       LISTA DE PAÍSES
    ========================= */

    .country-list {
      width: 100%;
      max-width: 436px;
      margin-top: 17px;

      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
    }

    .country-list__row {
      width: 50%;
      min-height: 38px;

      display: flex;
      align-items: center;

      border-bottom: 1px solid #d9d9d9;

      cursor: pointer;
    }

    .country-list__row:nth-child(1),
    .country-list__row:nth-child(2),
    .country-list__row:nth-child(4),
    .country-list__row:nth-child(5),
    .country-list__row:nth-child(6),
    .country-list__row:nth-child(8) {
      border-bottom-width: 2px;
    }

    .country-list__row span {
      width: 100%;

      display: block;

      font-size: 13.455px;
      line-height: 17px;

      text-transform: uppercase;

      color: #a6a6a6;

      transition: color 0.2s ease;
      padding-right: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .country-list__country--active {
      color: #000000 !important;
    }


    /* =========================
       TABLETA
       3 COLUMNAS
    ========================= */

    @media (max-width: 1100px) {

      .map-section {
        min-height: auto;
      }

      .map-section__inner {
        min-height: auto;
        padding: 0;
        flex-direction: column;
        align-items: center;
      }

      .map-section__map {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1024 / 797;
      }

      .map-section__panel {
        width: 100%;
        min-height: auto;
        padding: 0;
        justify-content: center;
      }

      .map-section__content {
        width: 100%;
        max-width: 700px;
        padding: 40px 30px;
      }

      .map-section__title {
        font-size: 42px;
        line-height: 40px;
      }

      .country-list {
        max-width: 100%;
      }

      .country-list__row {
        width: 33.333%;
        min-height: 38px;
      }

      .country-list__row span {
        width: 100%;
        min-height: 38px;
        display: flex;
        align-items: center;
      }

    }


    /* =========================
       MOBILE
       2 COLUMNAS
    ========================= */

    @media (max-width: 640px) {

      .map-section__inner {
        padding: 0;
      }

      .map-section__content {
        min-height: auto;
        padding: 40px 24px;
      }

      .map-section__title {
        font-size: 38px;
        line-height: 36px;
      }

      .country-list {
        margin-top: 20px;
      }

      .country-list__row {
        width: 50%;
        min-height: 36px;
      }

      .country-list__row span {
        width: 100%;
        min-height: 36px;
        padding: 6px 0;
        padding-right: 10px;

        font-size: 13px;
        line-height: 18px;

        display: flex;
        align-items: center;
      }

      .map-section__panel {
        padding-top: 0;
      }

      .map-marker {
        width: 14px;
        height: 14px;
      }

      .map-marker:hover,
      .map-marker.is-active {
        width: 17px;
        height: 17px;
      }

      .map-marker__label {
        font-size: 10px;
        line-height: 12px;
        padding: 4px 7px;
      }

    }