/* ==========================================
   TUCHOK 2.0 — DESTINATIONS
========================================== */

.destinations-page { width: 100%; overflow: clip; background: #FFFFFF; }

/* 01 — HERO */
.destinations-hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 52vh; height: clamp(340px, 52vh, 600px); overflow: hidden; background: #17291B; }
.destinations-hero-media,
.destinations-hero-overlay { position: absolute; inset: 0; }
.destinations-hero-media { z-index: -2; }
.destinations-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.destinations-hero-overlay { z-index: -1; background: rgba(0, 0, 0, 0.28); }
.destinations-hero-content { position: relative; z-index: 3; width: min(100% - 40px, 1200px); margin: 0 auto; padding: 110px 0 35px; text-align: center; }
.destinations-hero-content h1 { margin: 0; color: #FFFFFF; font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: clamp(34px, 4.2vw, 65px); font-weight: 800; letter-spacing: 0.02em; line-height: 1.05; }

/* 02 — INTRODUCCIÓN */
.destinations-intro { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 460px; padding: 90px 32px; background-color: #FFC100; background-image: var(--destinations-intro-bg, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
.destinations-intro-inner { width: min(100%, 1250px); margin: 0 auto; }
.destinations-intro-inner p { margin: 0; color: #151515; font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: clamp(19px, 1.65vw, 27px); font-weight: 700; line-height: 1.48; letter-spacing: -0.015em; text-align: center; text-wrap: pretty; }

/* 03 — MAPA */
.destinations-map { position: relative; isolation: isolate; width: 100%; padding: 100px 0 75px; overflow: hidden; background: #F7F9F9; color: #24323E; }
.destinations-map-header { width: min(100% - 40px, 1000px); margin: 0 auto 36px; text-align: center; }
.destinations-map-eyebrow { display: block; margin-bottom: 16px; color: #C48E00; font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; }
.destinations-map-header h2 { margin: 0; font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: clamp(30px, 3.7vw, 54px); font-weight: 400; line-height: 1.12; letter-spacing: -0.035em; }
.destinations-map-header h2 strong { display: block; font-weight: 800; }
.destinations-map-header p { margin: 18px 0 0; font-size: 14px; color: #647580; }
.destinations-map-viewport { position: relative; width: 100%; overflow: hidden; }
.destinations-map-canvas { width: min(100% - 24px, 1320px); margin: 0 auto; }
.destinations-map-svg { display: block; width: 100%; height: auto; }
.destinations-map-globe { fill: #FFFFFF; stroke: #E5EBEE; stroke-width: 1.5; }
.destinations-map-land { fill: url(#destinations-map-dots); stroke: #D9E1E5; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.destinations-map-route { fill: none; stroke: #E5A900; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 6; animation: destinations-route-flow 20s linear infinite; }
.destinations-marker { cursor: pointer; outline: none; }
.destinations-marker-halo { fill: rgba(255, 193, 0, 0.2); transition: r 250ms ease; }
.destinations-marker-core { fill: #FFC100; stroke: #FFFFFF; stroke-width: 2; transition: r 250ms ease; }
.destinations-marker:hover .destinations-marker-halo,
.destinations-marker.is-active .destinations-marker-halo,
.destinations-marker:focus-visible .destinations-marker-halo { r: 13; }
.destinations-marker:hover .destinations-marker-core,
.destinations-marker.is-active .destinations-marker-core,
.destinations-marker:focus-visible .destinations-marker-core { r: 6; }
.destinations-marker-label { font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: 11px; font-weight: 700; fill: #253440; stroke: #FFFFFF; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }
.destinations-map-details { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto 26px; padding: 12px 20px; text-align: center; }
.destinations-map-details span { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; color: #87949D; }
.destinations-map-details strong { font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: clamp(21px, 2.1vw, 28px); font-weight: 800; }
.destinations-map-selector { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; width: min(100% - 48px, 1160px); margin: 0 auto; }
.destinations-country { flex: 0 0 auto; padding: 11px 16px; border: 1px solid #E0E7EB; border-radius: 999px; background: #FFFFFF; color: #344550; font-family: "Dexa Pro Expanded", Arial, sans-serif; font-size: 11px; font-weight: 500; cursor: pointer; transition: background 250ms ease, border-color 250ms ease; }
.destinations-country:hover,
.destinations-country.is-active { border-color: #FFC100; background: #FFC100; color: #151515; }
.destinations-country:focus-visible { outline: 2px solid #253440; outline-offset: 3px; }

@keyframes destinations-route-flow { to { stroke-dashoffset: -220; } }

@media (max-width: 1024px) {
  .destinations-hero { height: 430px; min-height: 430px; }
  .destinations-intro { min-height: 380px; padding: 75px 30px; }
  .destinations-intro-inner p { font-size: clamp(17px, 2.2vw, 23px); }
}

@media (max-width: 767px) {
  .destinations-hero { height: 350px; min-height: 350px; }
  .destinations-hero-content { padding-top: 80px; }
  .destinations-hero-content h1 { font-size: clamp(28px, 8vw, 39px); }
  .destinations-intro { min-height: 0; padding: 65px 24px; }
  .destinations-intro-inner p { font-size: 15px; line-height: 1.7; font-weight: 600; }
  .destinations-map { padding: 65px 0 50px; }
  .destinations-map-header { margin-bottom: 24px; }
  .destinations-map-header h2 { font-size: 31px; }
  .destinations-map-header p { font-size: 12px; }
  .destinations-map-viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .destinations-map-canvas { width: 850px; max-width: none; margin: 0; }
  .destinations-map-selector { width: calc(100% - 28px); justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .destinations-map-selector::-webkit-scrollbar { display: none; }
  .destinations-country { scroll-snap-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .destinations-map-route { animation: none; }
  .destinations-marker-halo,
  .destinations-marker-core,
  .destinations-country { transition: none; }
}

/* ==========================================
   DESTINATIONS — MAPA MÁS LIMPIO
========================================== */

/* Eliminar el óvalo y cualquier fondo adicional */

.destinations-map-globe {
  display: none;
}

.destinations-map-svg {
  overflow: visible;
}

/* Etiqueta flotante del país activo */

.destinations-label-background {
  fill: #FFFFFF;
  stroke: #E9ECEF;
  stroke-width: 1;
  filter: drop-shadow(
    0 5px 12px rgba(25, 40, 50, 0.12)
  );
}

.destinations-label-text {
  fill: #253440;
  stroke: none;

  font-family:
    "Dexa Pro Expanded",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 700;
}

/* Los países no seleccionados permanecen discretos */

.destinations-marker {
  cursor: pointer;
}

.destinations-marker-halo {
  fill: rgba(255, 193, 0, 0.16);
}

.destinations-marker-core {
  fill: #FFC100;
}

/* Destino seleccionado */

.destinations-marker.is-active
.destinations-marker-halo {
  fill: rgba(255, 193, 0, 0.3);
}

/* Ajuste móvil */

@media (max-width: 767px) {
  .destinations-map {
    padding-bottom: 45px;
  }

  .destinations-map-header {
    margin-bottom: 12px;
  }
}
/* =========================
   DESTINATIONS MAP REFINES
========================= */

.destinations-map-svg {
  overflow: hidden;
}

.destinations-map-route {
  fill: none;
  stroke: #ffc100;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  opacity: 0.9;
  transition:
    opacity 0.35s ease,
    d 0.45s ease;
}

.destinations-marker {
  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
  transform-origin: center;
}

.destinations-marker-halo {
  fill: rgba(255, 193, 0, 0.14);
  transition:
    fill 0.28s ease,
    transform 0.28s ease,
    opacity 0.28s ease;
}

.destinations-marker-core {
  fill: #ffc100;
  stroke: #ffffff;
  stroke-width: 2;
  transition:
    transform 0.28s ease,
    fill 0.28s ease;
}

.destinations-marker.is-active {
  transform: scale(1.04);
}

.destinations-marker.is-active .destinations-marker-halo {
  fill: rgba(255, 193, 0, 0.22);
}

.destinations-active-label {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.destinations-label-background {
  fill: #ffffff;
  stroke: #e7ecef;
  stroke-width: 1;
  filter: drop-shadow(0 6px 16px rgba(20, 35, 45, 0.10));
}

.destinations-label-text {
  fill: #253440;
  font-family: "Dexa Pro Expanded", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ==========================================
   DESTINATIONS — MAPA RESTAURADO
========================================== */

/* Recuperar los continentes punteados */

.destinations-map-land {
  fill: url(#destinations-map-dots);
  stroke: #D6DFE4;
  stroke-width: 0.45;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}

/* Mantener eliminado el óvalo gigante */

.destinations-map-globe {
  display: none;
}

/* Recuperar las conexiones punteadas */

.destinations-map-route {
  fill: none;
  stroke: #E5AE00;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  stroke-dashoffset: 0;
  opacity: 0.85;

  /* El movimiento se gestiona en JavaScript */
  animation: none;
  transition: none;
}

/* Transición discreta de la etiqueta */

.destinations-active-label {
  opacity: 1;
  transition: opacity 350ms ease;
}

/* Marcadores */

.destinations-marker-halo {
  fill: rgba(255, 193, 0, 0.17);
}

.destinations-marker.is-active
.destinations-marker-halo {
  fill: rgba(255, 193, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .destinations-map-route,
  .destinations-active-label {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   DESTINATIONS — CERTIFICACIÓN BASC
========================================== */

.destinations-certification {
  position: relative;
  width: 100%;
  padding: 85px 30px 105px;
  background: #FFFFFF;
  color: #151515;
}

.destinations-certification-inner {
  width: min(100%, 1250px);
  margin: 0 auto;
  text-align: center;
}

/* TEXTO SUPERIOR */

.destinations-certification-eyebrow {
  margin: 0 0 26px;

  font-family:
    "Dexa Pro Expanded",
    Arial,
    sans-serif;

  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

/* TÍTULO */

.destinations-certification h2 {
  margin: 0 0 35px;

  font-family:
    "Dexa Pro Expanded",
    Arial,
    sans-serif;

  font-size: clamp(29px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-align: center;
}

/* DESCRIPCIÓN */

.destinations-certification-description {
  max-width: 1150px;
  margin: 0 auto;

  font-family:
    "Dexa Pro Expanded",
    Arial,
    sans-serif;

  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* TABLET */

@media (max-width: 1024px) {
  .destinations-certification {
    padding: 70px 30px 85px;
  }

  .destinations-certification h2 {
    font-size: clamp(27px, 3.5vw, 37px);
  }
}

/* MÓVIL */

@media (max-width: 767px) {
  .destinations-certification {
    padding: 60px 23px 75px;
  }

  .destinations-certification-eyebrow {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .destinations-certification h2 {
    margin-bottom: 24px;
    font-size: clamp(25px, 7vw, 33px);
    line-height: 1.18;
  }

  .destinations-certification-description {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
  }
}

/* ==========================================
   DESTINATIONS — TRANSPORTATION
========================================== */

.destinations-transport {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: clamp(560px, 54vw, 820px);

  overflow: hidden;
  background: #223344;
}

/* FOTOGRAFÍA */

.destinations-transport-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.destinations-transport-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.destinations-transport-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

/* TEXTO */

.destinations-transport-content {
  position: relative;

  width: min(100% - 80px, 1120px);
  height: 100%;

  margin: 0 auto;
  padding-top: clamp(85px, 7vw, 130px);

  transform:
    translate3d(
      var(--transport-text-x, 0px),
      var(--transport-text-y, 0px),
      0
    );
}

.destinations-transport h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin: 0;
  color: #FFFFFF;

  font-family:
    "Dexa Pro Expanded",
    Arial,
    sans-serif;

  font-size: clamp(42px, 4.3vw, 70px);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.03em;
}

.destinations-transport h2 strong {
  display: block;
  font-weight: 800;
}

.destinations-transport h2 span {
  display: block;
  margin-top: 8px;
  font-weight: 400;
}

/* TABLET */

@media (max-width: 1024px) {

  .destinations-transport {
    height: 620px;
  }

  .destinations-transport-content {
    width: min(100% - 70px, 850px);
    padding-top: 105px;
  }

  .destinations-transport h2 {
    font-size: clamp(39px, 5vw, 58px);
  }
}

/* MÓVIL */

@media (max-width: 767px) {

  .destinations-transport {
    height: min(150vw, 690px);
    min-height: 520px;
  }

  .destinations-transport-image {
    object-fit: cover;
    object-position: center center;
  }

  .destinations-transport-content {
    width: calc(100% - 100px);
    margin: 0 auto;
    padding-top: 100px;

    transform:
      translate3d(
        var(--transport-text-mx, 0px),
        var(--transport-text-my, 0px),
        0
      );
  }

  .destinations-transport h2 {
    font-size: clamp(27px, 7.2vw, 39px);
    line-height: 1.02;
  }

  .destinations-transport h2 span {
    margin-top: 3px;
    font-size: 0.9em;
  }
}