Oaxaca

Clima templado todo el año en la ciudad (días cálidos, noches frescas); cálido y tropical en la costa.

<!– ETM Map (Region/Home) – Responsive + UX lock + variables editables –>

<div

  data-etm=”map-region”

  data-etm-tablet-labels=”on”

  data-maphub-src=

>

  <style>

    /* =========================================================

       Variables de calibración (mobile first)

       Mobile base: déjalo como tu referencia principal.

       ========================================================= */

    div[data-etm=”map-region”]{

      /* ===== Layout del módulo (contenedor) ===== */

      –etm-container-width: 100vw;

      –etm-container-ml: calc(50% – 50vw);

      –etm-container-mr: calc(50% – 50vw);

      –etm-height: 560px;

 

      /* ===== Aire lateral en tablets ===== */

      –etm-tablet-gutter: 48px;

 

      /* ===== Reencuadre del mapa (iframe) ===== */

      –etm-scale: 1;

      –etm-origin-x: 50%;

      –etm-origin-y: 50%;

      –etm-shift-x: 0px;

      –etm-shift-y: 0px;

 

      /* ===== Experimento frame: apagado por defecto ===== */

      –etm-wide-frame-width: 100%;

      –etm-wide-frame-height: 100%;

      –etm-wide-frame-left: 0%;

      –etm-wide-frame-top: 0%;

      –etm-wide-frame-scale: 1;

 

      /* ===== Espaciado externo del módulo ===== */

      –etm-mt: 0px;

      –etm-mb: 0px;

 

      /* ===== UI superior para tapar controles de MapHub ===== */

      –etm-top-bar-height: 70px;

 

      /* ===== UI inferior (barra + tarjeta CTA) ===== */

      –etm-bar-height: 75px;

      –etm-card-bottom: 64px;

      –etm-card-minh: 34px;

      –etm-card-pad: 9px 9px;

      –etm-card-width: min(860px, calc(100% – 20px));

 

      position: relative;

      overflow: visible;

      width: var(–etm-container-width);

      margin-left: var(–etm-container-ml);

      margin-right: var(–etm-container-mr);

      height: calc(var(–etm-height) + var(–etm-top-bar-height));

      margin-top: var(–etm-mt);

      margin-bottom: var(–etm-mb);

      box-sizing: border-box;

      isolation: isolate;

      z-index: 0;

    }

 

    /* =========================================================

       Tablet portrait estándar (iPad mini / Air portrait, etc.)

       Aire calculado para alinearse con Destinos clave.

       ========================================================= */

    @media (min-width: 768px) and (max-width: 1023px){

      div[data-etm=”map-region”]{

        –etm-tablet-gutter: clamp(44px, 5.85vw, 50px);

 

        –etm-container-width: calc(100% – var(–etm-tablet-gutter) – var(–etm-tablet-gutter));

        –etm-container-ml: auto;

        –etm-container-mr: auto;

        –etm-height: 540px;

 

        –etm-scale: 1;

        –etm-origin-x: 50%;

        –etm-origin-y: 50%;

        –etm-shift-x: 0px;

        –etm-shift-y: 0px;

 

        –etm-mt: 0px;

        –etm-mb: 0px;

 

        –etm-bar-height: 88px;

        –etm-card-bottom: 72px;

        –etm-card-minh: 38px;

        –etm-card-pad: 12px 10px;

        –etm-card-width: min(860px, calc(100% – 20px));

      }

    }

 

    /* =========================================================

       Tablet portrait grande (iPad Pro portrait)

       Aire calculado para alinearse con Destinos clave.

       ========================================================= */

    @media (min-width: 1024px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse){

      div[data-etm=”map-region”]{

        –etm-tablet-gutter: 56px;

 

        –etm-container-width: calc(100% – var(–etm-tablet-gutter) – var(–etm-tablet-gutter));

        –etm-container-ml: auto;

        –etm-container-mr: auto;

        –etm-height: 620px;

 

        –etm-scale: 1;

        –etm-origin-x: 50%;

        –etm-origin-y: 50%;

        –etm-shift-x: 0px;

        –etm-shift-y: 0px;

 

        –etm-mt: 0px;

        –etm-mb: 0px;

 

        –etm-bar-height: 92px;

        –etm-card-bottom: 76px;

        –etm-card-minh: 40px;

        –etm-card-pad: 12px 12px;

        –etm-card-width: min(860px, calc(100% – 20px));

      }

    }

 

    /* =========================================================

       Tablet landscape mini / Air

       Aire calculado para alinearse con Destinos clave.

       ========================================================= */

    @media (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) and (hover: none) and (pointer: coarse){

      div[data-etm=”map-region”]{

        –etm-tablet-gutter: clamp(55px, 5.3vw, 62px);

 

        –etm-container-width: calc(100% – var(–etm-tablet-gutter) – var(–etm-tablet-gutter));

        –etm-container-ml: auto;

        –etm-container-mr: auto;

        –etm-height: 580px;

 

        –etm-scale: 1;

        –etm-origin-x: 50%;

        –etm-origin-y: 50%;

        –etm-shift-x: 0px;

        –etm-shift-y: 0px;

 

        –etm-mt: 0px;

        –etm-mb: 0px;

 

        –etm-bar-height: 92px;

        –etm-card-bottom: 74px;

        –etm-card-minh: 40px;

        –etm-card-pad: 12px 12px;

        –etm-card-width: min(860px, calc(100% – 20px));

      }

    }

 

    /* =========================================================

       Tablet landscape Pro

       Aire calculado para alinearse con Destinos clave.

       ========================================================= */

    @media (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse){

      div[data-etm=”map-region”]{

        –etm-tablet-gutter: clamp(64px, 5.3vw, 72px);

 

        –etm-container-width: calc(100% – var(–etm-tablet-gutter) – var(–etm-tablet-gutter));

        –etm-container-ml: auto;

        –etm-container-mr: auto;

        –etm-height: 680px;

 

        –etm-scale: 1;

        –etm-origin-x: 50%;

        –etm-origin-y: 50%;

        –etm-shift-x: 0px;

        –etm-shift-y: 0px;

 

        –etm-mt: 0px;

        –etm-mb: 0px;

 

        –etm-bar-height: 96px;

        –etm-card-bottom: 78px;

        –etm-card-minh: 40px;

        –etm-card-pad: 12px 12px;

        –etm-card-width: min(860px, calc(100% – 20px));

      }

    }

 

    /* =========================================================

       Experimento de etiquetas en tablets

       Para apagarlo: cambia data-etm-tablet-labels=”on” a “off”.

       ========================================================= */

    @media (min-width: 768px) and (max-width: 1023px),

           (min-width: 1024px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse),

           (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) and (hover: none) and (pointer: coarse),

           (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse){

      div[data-etm=”map-region”][data-etm-tablet-labels=”on”]{

        –etm-wide-frame-width: 85%;

        –etm-wide-frame-height: 115%;

        –etm-wide-frame-left: 7.5%;

        –etm-wide-frame-top: -8%;

        –etm-wide-frame-scale: 1.25;

      }

    }

 

    /* =========================================================

       Desktop real

       ========================================================= */

    @media ((min-width: 1024px) and (hover: hover) and (pointer: fine)),

           (min-width: 1367px){

      div[data-etm=”map-region”]{

        –etm-container-width: min(1200px, calc(100% – 32px));

        –etm-container-ml: auto;

        –etm-container-mr: auto;

        –etm-height: 800px;

 

        –etm-scale: 1;

        –etm-origin-x: 50%;

        –etm-origin-y: 50%;

        –etm-shift-x: 0px;

        –etm-shift-y: 0px;

 

        –etm-mt: 0px;

        –etm-mb: 0px;

 

        –etm-bar-height: 110px;

        –etm-card-bottom: 86px;

        –etm-card-minh: 43px;

        –etm-card-pad: 14px 12px;

        –etm-card-width: min(860px, calc(100% – 20px));

 

        /* ===== Experimento desktop: iframe más vertical, sin deformar ===== */

        –etm-wide-frame-width: 85%;

        –etm-wide-frame-height: 115%;

        –etm-wide-frame-left: 7.5%;

        –etm-wide-frame-top: -8%;

        –etm-wide-frame-scale: 1.25;

      }

    }

 

    /* =========================================================

       Estructura MapHub (capas internas)

       ========================================================= */

    div[data-etm=”map-region”] .etm-maphub{

      position: relative;

      width: 100%;

      height: 100%;

      overflow: visible;

      background: #f2f2f2;

    }

 

    div[data-etm=”map-region”] .etm-maphub__viewport{

      width: 100%;

      height: 100%;

      overflow: hidden;

      background: #f2f2f2;

      position: relative;

      z-index: 1;

      isolation: isolate;

    }

 

    div[data-etm=”map-region”] .etm-maphub__frame{

      width: 100% !important;

      height: 100% !important;

      border: 0;

      display: block;

      position: relative;

      z-index: 1;

      transform: translate3d(var(–etm-shift-x), var(–etm-shift-y), 0) scale(var(–etm-scale));

      transform-origin: var(–etm-origin-x) var(–etm-origin-y);

      will-change: transform;

    }

 

    /* =========================================================

       Frame experimental

       Aplica en tablets y desktop.

       En tablets se controla con data-etm-tablet-labels.

       ========================================================= */

    @media (min-width: 768px) and (max-width: 1023px),

           (min-width: 1024px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse),

           (min-width: 1024px) and (max-width: 1180px) and (orientation: landscape) and (hover: none) and (pointer: coarse),

           (min-width: 1181px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse),

           (min-width: 1024px) and (hover: hover) and (pointer: fine),

           (min-width: 1367px){

      div[data-etm=”map-region”] .etm-maphub__frame{

        position:absolute;

        z-index: 1;

        top: var(–etm-wide-frame-top);

        left: var(–etm-wide-frame-left);

        width: var(–etm-wide-frame-width) !important;

        height: var(–etm-wide-frame-height) !important;

        transform: scale(var(–etm-wide-frame-scale));

        transform-origin: 50% 50%;

      }

    }

 

    /* =========================================================

       UX lock: evita que el mapa “robe” el scroll de la página

       ========================================================= */

    div[data-etm=”map-region”].etm-map–lock:not(.etm-map–active) .etm-maphub__frame{

      pointer-events: none !important;

    }

 

    div[data-etm=”map-region”] .etm-maphub__lock{

      display: none;

      position: absolute;

      inset: 0;

      z-index: 2;

      background: rgba(0,0,0,.06);

      opacity: 1;

      transition: opacity 220ms ease;

      pointer-events: auto;

      touch-action: pan-y;

      user-select: none;

      -webkit-tap-highlight-color: transparent;

      cursor: pointer;

    }

 

    div[data-etm=”map-region”].etm-map–lock .etm-maphub__lock{

      display: block;

    }

 

    div[data-etm=”map-region”].etm-map–active .etm-maphub__lock{

      opacity: 0;

      pointer-events: none;

    }

 

    /* =========================================================

       Ping visual

       ========================================================= */

    div[data-etm=”map-region”] .etm-maphub__viewport::after{

      content:””;

      position:absolute;

      inset:0;

      z-index:5;

      background: rgba(0,0,0,.10);

      opacity:0;

      pointer-events:none;

    }

 

    @keyframes etmPing{

      0%{opacity:0}

      25%{opacity:1}

      100%{opacity:0}

    }

 

    div[data-etm=”map-region”].etm-map–ping .etm-maphub__viewport::after{

      animation: etmPing 180ms ease-out 1;

    }

 

    /* =========================================================

       Barra superior: tapa controles de zoom de MapHub

       ========================================================= */

    div[data-etm=”map-region”] .etm-maphub__topbar{

      position:absolute;

      left:0;

      right:0;

      top:0;

      z-index:30;

      background:#fff;

      height: var(–etm-top-bar-height);

      pointer-events:auto;

      touch-action:pan-y;

      user-select:none;

      cursor:default;

    }

 

    /* =========================================================

       Barra inferior

       ========================================================= */

    div[data-etm=”map-region”] .etm-maphub__bar{

      position:absolute;

      left:0;

      right:0;

      bottom:0;

      z-index:30;

      background:#fff;

      height: var(–etm-bar-height);

      pointer-events:auto;

      touch-action:pan-y;

      user-select:none;

      cursor:default;

    }

 

    /* =========================================================

       Tarjeta CTA

       ========================================================= */

    div[data-etm=”map-region”] .etm-maphub__card{

      position:absolute;

      left:0;

      right:0;

      margin:0 auto;

      z-index:40;

      bottom: var(–etm-card-bottom);

      background:#fff;

      border:2px solid #E6007E;

      box-sizing:border-box;

      width: var(–etm-card-width);

      padding: var(–etm-card-pad);

      min-height: var(–etm-card-minh);

      display:flex;

      align-items:center;

      justify-content:center;

      text-align:center;

      pointer-events:auto;

      touch-action:pan-y;

      user-select:none;

      cursor:default;

    }

 

    div[data-etm=”map-region”] .etm-maphub__cta{

      color:#E6007E;

      font-size:12px;

      letter-spacing:.14em;

      text-transform:uppercase;

      line-height:1;

      margin:0;

      white-space:nowrap;

    }

  </style>

 

  <div class=”etm-maphub”>

    <div class=”etm-maphub__viewport”>

      <iframe

        class=”etm-maphub__frame”

        src=””

        frameborder=”0″

        title=”Interactive map”

        loading=”lazy”

        referrerpolicy=”no-referrer-when-downgrade”

        allowfullscreen

      ></iframe>

      <div class=”etm-maphub__lock” aria-label=”Activate map” role=”button” tabindex=”0″></div>

    </div>

 

    <div class=”etm-maphub__topbar” aria-hidden=”true”></div>

 

    <div class=”etm-maphub__bar” aria-hidden=”true”></div>

 

    <div class=”etm-maphub__card”>

      <span class=”etm-maphub__cta”>Selecciona un estado para explorar</span>

    </div>

  </div>

 

  <script>

    (function () {

      var activeClass = ‘etm-map–active’;

      var lockClass = ‘etm-map–lock’;

      var pingClass = ‘etm-map–ping’;

 

      var ACTIVATE_SCROLL_COOLDOWN_MS = 450;

      var PING_REMOVE_MS = 260;

 

      function setup(root){

        if (!root || root.getAttribute(‘data-etm-ux’) === ‘1’) return;

 

        var src = root.getAttribute(‘data-maphub-src’) || ”;

        var lock = root.querySelector(‘.etm-maphub__lock’);

        var frame = root.querySelector(‘.etm-maphub__frame’);

        if (!lock || !frame || !src) return;

 

        frame.setAttribute(‘src’, src);

 

        root.setAttribute(‘data-etm-ux’, ‘1’);

        root.classList.add(lockClass);

 

        var touchMoved = false, sx = 0, sy = 0;

        var lastActivatedAt = 0, pingT = null;

 

        function ping(){

          root.classList.remove(pingClass);

          void root.offsetWidth;

          root.classList.add(pingClass);

          if (pingT) clearTimeout(pingT);

          pingT = setTimeout(function(){ root.classList.remove(pingClass); }, PING_REMOVE_MS);

        }

 

        function activate(){

          root.classList.add(activeClass);

          lastActivatedAt = Date.now();

          ping();

        }

 

        function deactivate(){

          root.classList.remove(activeClass);

        }

 

        function isActive(){

          return root.classList.contains(activeClass);

        }

 

        root.addEventListener(‘touchstart’, function(e){

          if (e.touches && e.touches.length > 1) return;

          var t = e.touches && e.touches[0];

          if (!t) return;

          touchMoved = false;

          sx = t.clientX;

          sy = t.clientY;

        }, { passive: true });

 

        root.addEventListener(‘touchmove’, function(e){

          if (e.touches && e.touches.length > 1) return;

          var t = e.touches && e.touches[0];

          if (!t) return;

          if (Math.abs(t.clientX – sx) > 10 || Math.abs(t.clientY – sy) > 10) touchMoved = true;

        }, { passive: true });

 

        function activateOnPinch(e){

          if (isActive()) return;

          var touches = e.touches;

          if (touches && touches.length >= 2) {

            e.preventDefault();

            activate();

          }

        }

 

        lock.addEventListener(‘touchstart’, activateOnPinch, { passive: false });

        lock.addEventListener(‘touchmove’, activateOnPinch, { passive: false });

 

        lock.addEventListener(‘gesturestart’, function(e){

          if (isActive()) return;

          e.preventDefault();

          activate();

        }, { passive: false });

 

        root.addEventListener(‘click’, function(e){

          var target = (e.target && e.target.nodeType === 1) ? e.target : null;

          if (!target || !target.closest) return;

 

          var hit = target.closest(‘.etm-maphub__lock, .etm-maphub__card, .etm-maphub__bar, .etm-maphub__topbar’);

          if (!hit) return;

          if (touchMoved) return;

 

          /*

            Regla:

            – Si el mapa está activo, las plecas y la card lo desactivan.

            – Si el mapa está inactivo, solo el área real del mapa (.etm-maphub__lock) lo activa.

            – Las plecas/card no activan el mapa.

          */

          if (isActive()) {

            if (hit.matches(‘.etm-maphub__card, .etm-maphub__bar, .etm-maphub__topbar’)) deactivate();

            return;

          }

 

          if (hit.matches(‘.etm-maphub__lock’)) {

            activate();

          }

        }, true);

 

        window.addEventListener(‘scroll’, function(){

          if (!isActive()) return;

          if (Date.now() – lastActivatedAt < ACTIVATE_SCROLL_COOLDOWN_MS) return;

          deactivate();

        }, { passive: true });

 

        document.addEventListener(‘mousedown’, function(e){

          if (!root.contains(e.target)) deactivate();

        });

 

        document.addEventListener(‘touchstart’, function(e){

          if (!root.contains(e.target)) deactivate();

        }, { passive: true });

 

        root.addEventListener(‘mouseleave’, function(){

          deactivate();

        });

      }

 

      function initAll(){

        document.querySelectorAll(‘div[data-etm=”map-region”]’).forEach(setup);

      }

 

      if (document.readyState === ‘loading’) {

        document.addEventListener(‘DOMContentLoaded’, initAll);

      } else {

        initAll();

      }

    })();

  </script>

</div>

• Aeropuertos: Ciudad de Oaxaca (OAX), Puerto Escondido (PXM) y Huatulco (HUX).
• Transporte: La nueva autopista reduce significativamente el tiempo de viaje entre la ciudad y la costa, facilitando los viajes de doble destino.