/* ==========================================================================
   Rutas Únicas · tipos de rutas (tipos-de-rutas.html) — prefijo tr-
   La página usa la plantilla y los estilos de zona (zona.css). Aquí solo lo que cambia en los tipos de rutas.
   ========================================================================== */
/* Presentación propia de los tipos de rutas (26/10, comentario de Alberto: «que no se parezca a zonas y países, pero coherente»).
   Ordenador y Portátil: dos fotos superpuestas a la izquierda (la pequeña con marco blanco, como las tarjetas de la portada)
   y, a la derecha, título, texto y «Así funciona» en cuatro pasos numerados con filetes. Tablet y Móvil: una columna, texto primero */
.tr-intro__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;max-width:1520px;margin:0 auto}
.tr-intro__media{grid-column:1 / 7;position:relative;padding:0 12% 14% 0}
.tr-intro__big,.tr-intro__small{margin:0;overflow:hidden;border-radius:var(--ru-radius)}
.tr-intro__big{aspect-ratio:4 / 5;max-height:640px}
.tr-intro__small{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:4 / 3;border:8px solid var(--ru-white);border-radius:calc(var(--ru-radius) + 8px);
  box-shadow:0 24px 50px -24px rgba(42,26,34,.45)} /* taste-skill-ignore: foto montada sobre la otra */
.tr-intro__big img,.tr-intro__small img{display:block;width:100%;height:100%;object-fit:cover}
.tr-intro__tag{position:absolute;top:20px;left:20px;z-index:1;box-shadow:0 6px 18px -8px rgba(42,26,34,.35)} /* taste-skill-ignore */
.tr-intro__text{grid-column:8 / 13}
.tr-intro__lead{max-width:52ch}
.tr-how__kicker{margin:36px 0 4px;color:var(--ru-primary);font-size:.75rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.tr-how{margin:0;padding:0;list-style:none}
.tr-how__step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(150,88,113,.16)}
.tr-how__step:last-child{border-bottom:0}
.tr-how__n{font-family:var(--ru-font-display);font-size:2.6rem;line-height:1;color:var(--ru-primary)}
.tr-how__h{margin:0 0 4px;font-size:1.1875rem}
.tr-how .ct-how__p{font-size:.9375rem;line-height:1.55}
.tr-other{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:20px;color:var(--ru-muted);font-size:.9375rem;text-decoration:none}
.tr-other b{color:var(--ru-primary);font-weight:700}
.tr-other svg{color:var(--ru-primary);transition:transform .3s var(--ru-ease)}
.tr-other b{background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat;padding-bottom:1px;transition:background-size .35s var(--ru-ease)}
.tr-other:hover b,.tr-other:focus-visible b{background-size:100% 1px}   /* subrayado animado común (03/11), como .ru-ulink */
.tr-other:hover svg{transform:translateX(3px)}
.tr-other:focus-visible{outline:2px solid var(--ru-primary);outline-offset:3px;border-radius:4px}
.ru-js .tr-intro__text.ct-reveal{transition-delay:.1s}
@media (min-width:901px) and (max-width:1279px){
  .tr-intro__media{grid-column:1 / 6;padding-right:10%}
  .tr-intro__text{grid-column:7 / 13}
}
@media (max-width:900px){
  .tr-intro__text{grid-column:1 / -1;order:-1;text-align:center}
  .tr-intro__lead,.tr-intro__title{margin-left:auto;margin-right:auto}
  .tr-how{max-width:560px;margin:0 auto;text-align:left}
  .tr-other{justify-content:center}
  .tr-intro__media{grid-column:1 / -1;max-width:560px;width:100%;margin:40px auto 0;padding:0 10% 12% 0}
  .tr-intro__big{aspect-ratio:5 / 4}
}
@media (max-width:640px){
  .tr-how__kicker{margin-top:28px}
  .tr-how__step{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0}
  .tr-how__n{font-size:2.1rem}
  .tr-intro__media{margin-top:32px}
  .tr-intro__small{border-width:6px;border-radius:calc(var(--ru-radius) + 6px)}
  .tr-intro__tag{top:12px;left:12px}
}

/* Filtro «Destino»: los países agrupados por zona, en bloques (27/10): zona.css (zn-zg), común con temporadas y meses */

/* Rutas garantizadas: sin el filtro de estado de la salida, los cuatro restantes ocupan todo el ancho. Tablet, Portátil y Ordenador */
@media (min-width:641px){ .tr-page--garantizada .zn-ff__fields{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* «… por zonas»: las cuatro zonas. Ordenador en una fila, Portátil en dos; Tablet y Móvil, una columna (zona.css) */
@media (min-width:1280px){ .tr-page .zn-more__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:901px) and (max-width:1279px){ .tr-page .zn-more__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ru-js .tr-page .zn-more__grid > li:nth-child(4) .ct-reveal{transition-delay:.24s}

/* Sin cita en el banner (26/10, comentario de Alberto: «en los tipos de rutas no hay citas»). Todos los dispositivos */
.tr-page .zn-quote{display:none}

/* Filtro por zonas de «Rutas destacadas» (el de «Mejores Rutas» de la portada, 26/10, comentario de Alberto).
   Aquí va sobre la foto oscura: píldoras y botón «Filtrar» con fondo blanco para leerse. Tablet (píldoras) y Móvil (botón) */
@media (min-width:641px) and (max-width:900px){
  .tr-page .zn-routes .ru-best__filters .ru-chip{background:var(--ru-white)}
  .tr-page .zn-routes .ru-best__filters .ru-chip[aria-pressed="true"]{background:var(--ru-primary)}
}
@media (max-width:640px){
  .tr-page .zn-routes .ru-best__filterbtn,.tr-page .zn-routes .ru-best__filterbtn:hover{background:var(--ru-white);border-color:var(--ru-white)}
}
/* Móvil: «Rutas garantizadas» / «por zonas» en dos líneas (26/10, comentario de Alberto) */
@media (max-width:640px){ .tr-more2{display:block} }

/* Presentación B: «Así funciona» con la foto difuminada (26/10, comentarios de Alberto: «otra opción visual y/o interactiva»,
   «elegante y potente, algo a sangre», «que no haga referencia a los pasos» y «a sangre todo no, juega con los difuminados»).
   ?presentacion=A vuelve a la anterior. Fondo blanco; la foto del paso sale por el borde derecho de la web y se difumina hacia
   el texto (izquierda), arriba y abajo; se funde con la siguiente y se acerca despacio mientras dura el paso.
   Ordenador y Portátil: título y texto a la izquierda, pasos abajo en 4 columnas con un filete que se llena.
   Tablet y Móvil: la foto arriba, difuminada hacia abajo, y debajo el texto y los pasos (2 × 2 en Tablet, uno debajo de otro en Móvil) */
.zn-intro.tr-bleed{padding:0;background:var(--ru-white)}
.tr-tour{--tr-time:6s;--tr-fade:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 48%);
  position:relative;isolation:isolate;overflow:hidden;display:flex}  /* sin alto mínimo: «mucho vacío» (27/10, Alberto) */
.tr-tour__stage{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:-1;margin:0;
  -webkit-mask-image:var(--tr-fade),linear-gradient(180deg,transparent 0%,#000 14%,#000 50%,transparent 76%);-webkit-mask-composite:source-in;
  mask-image:var(--tr-fade),linear-gradient(180deg,transparent 0%,#000 14%,#000 50%,transparent 76%);mask-composite:intersect}
.tr-tour__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ru-ease)}
/* «salto extraño» al pasar de una foto a otra (27/10, Alberto): la foto que sale (is-out) conserva su zoom congelado mientras se funde;
   antes perdía la animación de golpe y volvía a su tamaño */
.tr-tour__img:is(.is-on,.is-out){animation:trKen calc(var(--tr-time) + 1.4s) linear forwards}
.tr-tour__img.is-on{opacity:1}
.tr-tour__img.is-out{animation-play-state:paused}
@keyframes trKen{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.tr-tour:is(.is-hover,.is-focus,.is-away) .tr-tour__img.is-on{animation-play-state:paused}
.tr-tour__inner{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(48px,5vw,72px);width:100%;padding:clamp(64px,9vh,104px) var(--ru-page) clamp(48px,7vh,80px)}
.tr-tour__head{max-width:600px}
.tr-tour .tr-intro__title{font-size:clamp(2.25rem,3.6vw,3.5rem);line-height:1.05;text-wrap:balance}  /* más pequeño (27/10, Alberto: «reduce tamaño tipografía») */
.tr-tour .tr-how__kicker{margin:0 0 18px}
/* «Así funciona» como línea de tiempo (27/10, Alberto: «no me gusta que se ponga como desactivado», «sigue sin convencer»):
   cuatro hitos numerados unidos por una línea; todos los textos con su color normal. El paso activo lleva el número relleno con un halo
   y la línea hacia el siguiente se va llenando mientras dura; los pasos ya vistos quedan con la línea llena.
   Ordenador y Portátil: en horizontal; Tablet y Móvil: en vertical, con la línea a la izquierda */
.tr-tour__steps{--tr-gap:clamp(24px,3vw,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tr-gap);margin:0;padding:0;list-style:none}
.tr-tour__steps > li{position:relative}
.tr-tour__step{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;padding:0;border:0;background:none;
  font:inherit;text-align:left;cursor:pointer;color:var(--ru-text-accent)}
.tr-tour__step:focus-visible{outline:2px solid var(--ru-primary);outline-offset:6px;border-radius:6px}
.tr-tour__n{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;border-radius:50%;
  background:var(--ru-white);box-shadow:inset 0 0 0 1.5px var(--ru-primary);
  font-family:var(--ru-font-display);font-size:1.5rem;line-height:1;color:var(--ru-primary);
  transition:background-color .4s var(--ru-ease), color .4s var(--ru-ease), box-shadow .4s var(--ru-ease)}
.tr-tour__step:hover .tr-tour__n,.tr-tour__step.is-done .tr-tour__n{background:#f6ecf1}
.tr-tour__step.is-on .tr-tour__n{background:var(--ru-primary);color:var(--ru-white);box-shadow:0 0 0 7px rgba(150,88,113,.16)} /* taste-skill-ignore: halo del paso activo */
.tr-tour__h{font:600 1.25rem/1.25 var(--ru-font-country)}
.tr-tour__p{font-size:.9375rem;line-height:1.55;color:var(--ru-muted)}
/* línea entre hitos: sale del número y llega al siguiente */
.tr-tour__bar{position:absolute;top:25px;left:60px;right:calc(8px - var(--tr-gap));height:2px;background:rgba(150,88,113,.2);overflow:hidden}
.tr-tour__steps > li:last-child .tr-tour__bar{opacity:0}
.tr-tour__bar i{display:block;width:100%;height:100%;background:var(--ru-primary);transform:scaleX(0);transform-origin:left}
.tr-tour__step.is-done .tr-tour__bar i{transform:none}
.tr-tour__step.is-on .tr-tour__bar i{animation:trFill var(--tr-time) linear forwards}
.tr-tour:is(.is-hover,.is-focus,.is-away) .tr-tour__step.is-on .tr-tour__bar i{animation-play-state:paused}
/* foto del paso dentro del propio paso: solo en Móvil (abajo) */
.tr-tour__ph{display:none}
@keyframes trFill{to{transform:none}}
@keyframes trFillY{to{transform:none}}
.tr-tour .tr-intro__title,.tr-tour .tr-intro__lead{margin-left:0;margin-right:0}
.tr-tour .tr-other{display:inline-flex;justify-content:flex-start}
@media (prefers-reduced-motion:reduce){
  .tr-tour__img{transition:opacity .2s linear}
  .tr-tour__img:is(.is-on,.is-out){animation:none}
  .tr-tour__step.is-on .tr-tour__bar i{animation:none;transform:none}   /* sin avance automático */
}
@media (min-width:901px) and (max-width:1279px){ .tr-tour__stage{width:64%} .tr-tour__head{max-width:470px} }
@media (max-width:900px){
  .tr-tour{display:block;min-height:0}
  .tr-tour__stage{position:relative;width:100%;height:min(62vw,480px);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .tr-tour__inner{margin-top:-72px;padding:0 var(--ru-page) 56px;gap:44px}
  /* línea de tiempo en vertical */
  .tr-tour__steps{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px}
  .tr-tour__step{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;row-gap:4px;padding-bottom:30px}
  .tr-tour__steps > li:last-child .tr-tour__step{padding-bottom:0}
  .tr-tour__n{grid-row:span 2;margin:0}
  .tr-tour__h{padding-top:12px}
  .tr-tour__bar{top:60px;bottom:8px;left:25px;right:auto;width:2px;height:auto}
  .tr-tour__bar i{transform:scaleY(0);transform-origin:top}
  .tr-tour__step.is-on .tr-tour__bar i{animation-name:trFillY}
}
@media (max-width:640px){
  .tr-tour__stage{height:300px}
  .tr-tour__inner{margin-top:-56px;padding:0 16px 44px;gap:36px}
  .tr-tour .tr-intro__title{font-size:2.25rem}
  .tr-tour__step{grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding-bottom:24px}
  .tr-tour__n{width:44px;height:44px;font-size:1.3125rem}
  .tr-tour__step.is-on .tr-tour__n{box-shadow:0 0 0 5px rgba(150,88,113,.16)}
  .tr-tour__h{padding-top:9px;font-size:1.125rem}
  .tr-tour__bar{top:52px;left:21px}
}
/* «Así funciona» en Tablet igual que en Móvil (04/11, Alberto: «este apartado en tablet como en móvil»). Tablet y Móvil:
   antetítulo, título y texto centrados (03/11, «en versión móvil, alineado al centro»); sin la foto de arriba (27/10, quedaba
   fuera de pantalla): cada paso lleva su foto, que se abre debajo de su texto cuando el paso está activo */
@media (max-width:900px){
  .tr-tour__head{margin:0 auto;text-align:center}
  .tr-tour .tr-intro__title,.tr-tour .tr-intro__lead{margin-left:auto;margin-right:auto}
  .tr-tour__steps{margin:0 auto;width:100%}
  .tr-tour .tr-how__kicker{max-width:640px;width:100%;margin-left:auto;margin-right:auto}
  .tr-tour__stage{display:none}
  .tr-tour__inner{margin-top:0;padding-top:48px}
  .tr-tour__ph{display:block;grid-column:2;height:0;margin-top:0;border-radius:var(--ru-radius);overflow:hidden;opacity:0;
    transition:height .6s var(--ru-ease),margin-top .6s var(--ru-ease),opacity .6s var(--ru-ease)}
  .tr-tour__ph img{width:100%;height:100%;object-fit:cover;display:block}
  .tr-tour__step.is-on .tr-tour__ph{height:clamp(170px,52vw,320px);margin-top:12px;opacity:1}
}
/* Cabecera menos oscura (27/10, Alberto: «muy oscura las cabeceras, mejora la legibilidad de los textos sin abusar del oscurecido»).
   En la cabecera corta el velo de abajo arriba de crea-tu-ruta.css cubre casi toda la foto: aquí, un velo más suave y solo bajo el texto,
   y una sombra en los textos que hace el resto */
.tr-page .ct-hero::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 28%), /* taste-skill-ignore: lectura del menú */
    linear-gradient(90deg,rgba(34,18,27,.5) 0%,rgba(34,18,27,.22) 42%,rgba(34,18,27,0) 70%), /* taste-skill-ignore: velo bajo el texto, a la izquierda */
    linear-gradient(0deg,rgba(34,18,27,.32) 0%,rgba(34,18,27,0) 55%); /* taste-skill-ignore */
}
.tr-page .ct-hero__kicker,.tr-page .ct-hero__title{text-shadow:0 1px 3px rgba(20,10,16,.5),0 4px 30px rgba(20,10,16,.45)} /* taste-skill-ignore */