/* =========================================================
   ZONA (zona.html) — prefijo zn-
   América del Norte, América Central, Caribe y América del Sur con una sola plantilla.
   Usa los colores, tipografías y botones de rutas-unicas.css y el banner de crea-tu-ruta.css.
   Dispositivos: Móvil ≤ 640 · Tablet 641–900 · Portátil 901–1279 · Ordenador ≥ 1280
   ========================================================= */

/* ---------- 1. Banner ---------- */
.zn-hero__slides{position:absolute;inset:0;z-index:-2}
.zn-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity 1.4s var(--ru-ease), transform 0s 1.4s}   /* la que sale se funde quieta y vuelve a su tamaño ya invisible */
/* la que entra hace el zoom lento; antes la que salía volvía a crecer mientras se fundía y parecía un salto (27/10, comentario de Alberto) */
.zn-hero__img.is-active{opacity:1;transform:none;transition:opacity 1.4s var(--ru-ease), transform 7s linear}
.zn-hero__content{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.zn-hero__content > *{animation:none}
.zn-hero__text > *{animation:ru-rise .9s var(--ru-ease) backwards}
.zn-hero__text > .ct-hero__kicker{animation-delay:.25s}
.zn-hero__text > .ct-hero__title{animation-delay:.33s}
.zn-hero__text > .zn-quote{animation-delay:.41s}
.zn-hero__text > .ct-hero__actions{animation-delay:.49s}
.zn-quote{margin:24px 0 0;max-width:46ch}
.zn-quote p{margin:0;font-family:var(--ru-font-country);font-style:italic;font-size:clamp(1.0625rem,1.45vw,1.3125rem);line-height:1.5;color:rgba(255,255,255,.92)}
.zn-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.75)}
.zn-quote cite::before{content:"— "}
.zn-hero__nav{display:flex;align-items:center;gap:6px;flex:none;animation:ru-rise .9s var(--ru-ease) .57s backwards}
.zn-hero__nav[hidden]{display:none}
.zn-hero__arrow{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ru-white);cursor:pointer;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));transition:transform .3s var(--ru-ease)}
.zn-hero__arrow[data-dir="-1"]:hover{transform:translateX(-4px)}
.zn-hero__arrow[data-dir="1"]:hover{transform:translateX(4px)}
.zn-hero__arrow:focus-visible,.zn-hero__bar:focus-visible{outline:2px solid var(--ru-white);outline-offset:2px;border-radius:8px}
.zn-hero__bars{display:flex;gap:6px}
.zn-hero__bar{position:relative;width:36px;height:24px;border:0;padding:0;background:none;cursor:pointer}
.zn-hero__bar::before,.zn-hero__bar i{content:"";position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px}
.zn-hero__bar::before{right:0;background:rgba(255,255,255,.35)}
.zn-hero__bar i{width:0;background:var(--ru-white)}
.zn-hero__bar.is-active i{animation:zn-fill 7s linear forwards}
@keyframes zn-fill{to{width:100%}}

/* ---------- Títulos de sección ---------- */
.zn-page .ct-title em{font-style:normal}   /* títulos sin cursiva (25/10) */
.zn-routes .ct-title em{display:block}   /* «Rutas por / América del Sur» en dos líneas, sin cortes raros */
.zn-deps .ct-title{white-space:nowrap;font-size:min(var(--fs),6.4vw)}   /* «Ofertas en Caribe» en una sola línea (25/10); en Móvil la letra se ajusta al ancho */

/* ---------- 2. Presentación ---------- */
.zn-intro{background:var(--ru-white);padding:clamp(56px,10vh,120px) var(--ru-page)}
.zn-intro__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.zn-intro__text{grid-column:1 / 6}
.zn-intro__title{max-width:21ch;text-wrap:balance}   /* título poético de la zona: misma longitud en todas, siempre en dos líneas */
.zn-intro__lead{max-width:52ch}
.zn-countries{margin-top:32px}   /* sin la etiqueta «Países de la zona» (25/10) */
.zn-countries{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0;padding:0;list-style:none}
.zn-country{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--ru-tint);
  color:var(--ru-text-accent);font-size:.875rem;font-weight:600;text-decoration:none;transition:background .3s var(--ru-ease), color .3s var(--ru-ease)}
.zn-country:hover{background:var(--ru-primary);color:var(--ru-white)}
.zn-country:focus-visible{outline:2px solid var(--ru-primary);outline-offset:2px}
/* mosaico de 2 a 4 fotos */
/* Collage de 4 fotos (como el diseño original y con las medidas de los recortes de Alberto):
   1 vertical 396×600 a la izquierda, 2 y 3 apaisadas 618×290 una sobre otra a la derecha
   y 4 panorámica 832×280 debajo, a todo el ancho. Las proporciones se mantienen en todos los dispositivos */
.zn-mosaic{--g:16px;grid-column:7 / 13;display:grid;grid-template-columns:396fr 618fr;gap:var(--g);align-self:center}
.zn-mosaic__item:nth-child(1){grid-column:1;grid-row:1 / 3}
.zn-mosaic__item:nth-child(2),.zn-mosaic__item:nth-child(3){grid-column:2;aspect-ratio:618 / 290}
.zn-mosaic__item:nth-child(4){grid-column:1 / -1;aspect-ratio:832 / 280}
.zn-mosaic__item{margin:0;border-radius:24px;overflow:hidden;background:var(--ru-tint)}
.zn-mosaic__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ru-ease)}
.zn-mosaic__item:hover img{transform:scale(1.025)}

/* ---------- 3. Rutas por la zona ---------- */
/* La sección usa los estilos de «Mejores Rutas» de la portada (.ru-best, .ru-deck, .ru-trip en rutas-unicas.css);
   aquí solo cambia el fondo: la foto de la ruta activa con un velo oscuro, y los textos de cabecera en blanco */
.ru-best.zn-routes{background:var(--ru-ink);padding-top:clamp(96px,13vh,160px);padding-bottom:clamp(72px,10vh,120px)}
.zn-routes__bg{position:absolute;inset:0;z-index:-2}
.zn-routes__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--ru-ease), transform 1.6s var(--ru-ease)}
.zn-routes__bg img.is-active{opacity:1;transform:none}
.zn-routes::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(270deg,rgba(34,18,27,.88) 0%,rgba(34,18,27,.7) 40%,rgba(34,18,27,.45) 100%)} /* taste-skill-ignore: velo para leer el texto sobre la foto */
.zn-routes .ru-dest__kicker{color:rgba(255,255,255,.8)}
.zn-routes .ru-dest__title{color:var(--ru-white)}
.zn-routes .ru-best__intro{color:rgba(255,255,255,.85)}
.zn-routes .ru-best__bar .ru-dest__arrow{color:var(--ru-white)}
.zn-routes .ru-best__progress{background:rgba(255,255,255,.3)}
.zn-routes .ru-best__progress i{background:var(--ru-white)}
.zn-routes .ru-best__card{border:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)} /* taste-skill-ignore: tarjeta que flota sobre la foto */
.zn-routes .ru-deck__card[data-pos="0"]{box-shadow:0 30px 60px -20px rgba(0,0,0,.55)} /* taste-skill-ignore: la foto activa flota sobre el fondo */
.zn-routes .ru-best__head{margin-bottom:28px}
/* etiquetas de la ruta (tipo y estado): comunes en rutas-unicas.css (.ru-deck__tags / .ru-best__tags, alias .zn-*) */

/* ---------- 4. Ofertas (salidas) ---------- */
.zn-deps{background:var(--ru-ivory);padding:clamp(56px,10vh,120px) var(--ru-page) clamp(56px,9vh,104px)}
.zn-deps__bar{position:relative;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:clamp(20px,3vh,28px)}   /* título y, debajo, los filtros (25/10) */
.zn-deps__head{text-align:left}   /* sin contador de salidas (25/10) */
/* Filtros como los de Crea tu ruta: dos campos («País» y «Fechas») y el panel del que está abierto, debajo */
.zn-ff{position:relative;margin:0;padding:0}
/* cuatro filtros (País, Fechas, Duración, Precio) bajo el título: una fila (con icono en Ordenador y Portátil); Móvil 2 × 2 */
.zn-ff__fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}   /* País, Fechas, Duración, Precio y Tipo de ruta */
.zn-ff__fields .ru-field__icon{display:none}
.zn-ff__fields .zn-ff__btn.ru-field__btn{padding-left:16px;padding-right:36px}
.zn-ff__fields .zn-ff__x{right:8px}
@media (min-width:901px){
  .zn-ff__fields .ru-field__icon{display:grid}   /* como en la home: icono centrado en su recuadro */
}
.zn-ff__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;min-height:28px}   /* «Filtrar» con su icono sobre los campos (25/10) */
.zn-ff__label{display:flex;align-items:center;gap:8px;margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ru-text-accent)}
.zn-ff__label svg{color:var(--ru-primary)}
.zn-ff__reset{padding:4px 0;border:0;background:none;cursor:pointer;font:inherit;font-size:.8125rem;font-weight:600;color:var(--ru-primary);text-decoration:underline;text-underline-offset:3px}
.zn-ff__reset[hidden]{display:block;visibility:hidden;pointer-events:none}   /* reserva su hueco: al aparecer no mueve los campos (25/10) */
.zn-ff__field{position:relative}
.zn-ff__btn.ru-field__btn{background:var(--ru-white);min-height:68px;padding-right:52px;box-shadow:inset 0 0 0 1px rgba(150,88,113,.14)} /* taste-skill-ignore: borde fino del campo sobre fondo claro */
.zn-ff__btn.ru-field__btn:hover{transform:none;background:var(--ru-white);box-shadow:inset 0 0 0 1px rgba(150,88,113,.35)}
.zn-ff__btn[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--ru-primary)} /* taste-skill-ignore: campo abierto */
.zn-ff__btn[aria-expanded="true"] .ru-field__icon{transform:none}   /* el icono no se inclina al abrir (25/10) */
.zn-ff__btn:focus-visible{outline:3px solid var(--ru-primary);outline-offset:2px}
.zn-ff__btn .ru-field__value{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zn-ff__btn .ru-field__txtbox{min-width:0}   /* un texto largo se corta con «…» y el campo no se ensancha */
.zn-ff__x{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.zn-ff__x[hidden]{display:none}
.zn-ff__panel{position:absolute;top:calc(100% + 10px);left:0;z-index:30;width:min(640px,calc(100vw - 2 * var(--ru-page)));max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain;padding:20px 22px;border-radius:var(--ru-radius);background:var(--ru-white);box-shadow:0 24px 50px rgba(110,61,82,.14)} /* taste-skill-ignore: panel que se abre bajo el campo */
.zn-ff__panel[hidden]{display:none}
.zn-ff__panelbar{display:none}   /* solo en Móvil (hojas) */
.zn-ff.is-up .zn-ff__panel{top:auto;bottom:calc(100% + 10px)}
/* pop ups compactos: todo cabe en pantalla sin scroll interior (25/10) */
.zn-ff__panel{padding:16px 18px}
.zn-ff__panel .ru-panel__title{font-size:1rem}
.zn-ff__panel .zn-ff__head,.zn-ff__panel .zn-ff__sub{margin:0 0 8px}
.zn-ff__panel .zn-ff__seasons{margin-bottom:12px}
.zn-ff__panel .ru-dp__chip{padding:6px 12px}
.zn-ff__panel .ct-opts:not(.ct-opts--months) .ct-opt{min-height:40px;padding:0 14px;font-size:.875rem}
.zn-ff__panel .ct-pick__list{gap:6px}
.zn-ff__panel .ru-dest__row{padding-top:6px;padding-bottom:6px}
/* Fechas: el mismo selector que «¿Cuándo quieres salir?» de la home (25/10). Conmutador en pastilla, calendario
   de dos meses (uno en Móvil) con la flexibilidad debajo y, en fechas flexibles, temporadas y meses en baldosas */
.zn-ff__panel .ru-dp__switch{margin:0 auto 16px}
.zn-ff__panel .ru-dp__foot.zn-ff__flex{margin-top:8px;padding-top:12px}
.zn-ff__panel .zn-ff__flex .ru-dp__flexrow{justify-content:center}
.zn-ff__months{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.zn-ff__months .ru-dp__mtile{min-height:70px;gap:0}
.zn-ff__foot--dates{align-items:center;justify-content:flex-end;gap:12px}
.zn-ff__panel .ru-dp__foot.zn-ff__flex{border-top:1px solid var(--ru-tint-2)}
.zn-ff__panel .zn-ff__foot{margin-top:12px;padding-top:12px}
.zn-ff__panel .zn-ff__done{min-height:42px}   /* sin sitio debajo: se abre hacia arriba */
.zn-ff__veil{display:none}
.zn-ff__open,.zn-ff__sheethead,.zn-ff__listfoot{display:none}   /* solo en Móvil */
/* filtros fijos arriba al recorrer las ofertas (25/10): bajo la barra de la cabecera, con el fondo de la sección detrás */
.zn-ff.is-stuck{position:fixed;z-index:50;margin:0}
.zn-ff.is-stuck::before{content:"";position:absolute;z-index:-1;top:calc(-1 * var(--zn-ff-top, 0px));bottom:-12px;left:-100vmax;right:-100vmax;background:var(--ru-ivory);
  box-shadow:0 12px 24px -16px rgba(42,26,34,.25)} /* taste-skill-ignore: separa los filtros fijos de la lista que pasa por debajo */
.zn-ff.is-stuck .zn-ff__top{margin-bottom:6px}
.zn-ff__head{margin:0 0 10px}
.zn-ff .ct-pick__list{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.zn-ff .ru-dest__row:disabled{opacity:.45;cursor:default}
.zn-ff .ct-opt:disabled{opacity:.4;cursor:default}
.zn-ff__sub{margin:0 0 10px}
.zn-ff__seasons{margin-bottom:18px}
.zn-ff .ru-dp__chips{justify-content:flex-start}   /* alineados a la izquierda también en Móvil */
.zn-ff .ru-dp__chip:disabled{opacity:.4;cursor:default}
.zn-ff .ru-dp__day.has-dep:not(:disabled){color:var(--ru-primary);font-weight:800;text-decoration:underline;text-underline-offset:3px}   /* días con salida */
.zn-ff .ru-dp__day.has-dep.is-sel,.zn-ff .ru-dp__day.has-dep.is-sel:hover{color:var(--ru-white)}   /* día con salida elegido: número en blanco sobre el fondo de color (Alberto, 28/10) */
.zn-ff__foot{display:flex;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--ru-tint-2)}
.zn-ff__done{min-height:48px;padding:0 24px}
/* Tipo de ruta: estados de la salida con la misma etiqueta que en las ofertas; marcada, con borde */
.zn-ff__head--st{margin-top:16px!important}
.zn-ff__head small{font:500 .8125rem var(--ru-font-body);color:var(--ru-muted)}
.zn-ff__sts{display:flex;flex-wrap:wrap;gap:8px}
.zn-ff__st{min-height:36px;border:0;cursor:pointer;font-family:inherit;transition:box-shadow .2s var(--ru-ease),opacity .2s}
.zn-ff__st:hover{box-shadow:inset 0 0 0 1px currentColor}
.zn-ff__st[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.zn-ff__st:disabled{opacity:.4;cursor:default;box-shadow:none}
.zn-ff__st:focus-visible{outline:3px solid var(--ru-primary);outline-offset:2px}
.zn-ff-wrap{margin-bottom:24px}   /* el margen va en el envoltorio: al quedarse fijos los filtros, la lista no salta */
.zn-list{display:flex;flex-direction:column;gap:16px;max-width:1240px;margin:0 auto;padding:0;list-style:none}
.zn-dep{display:grid;grid-template-columns:clamp(150px,14vw,200px) minmax(0,1fr) minmax(170px,.55fr) auto;gap:24px;align-items:center;
  padding:14px 24px 14px 14px;border-radius:var(--ru-radius);background:var(--ru-white);
  transition:transform .5s var(--ru-ease), box-shadow .5s var(--ru-ease)}
.zn-dep:hover{box-shadow:0 0 0 1px rgba(150,88,113,.28),0 18px 40px -24px rgba(110,61,82,.3)} /* taste-skill-ignore: al pasar el ratón la tarjeta no se mueve: borde fino, sombra suave y la foto se acerca (25/10) */
.zn-dep__img{transition:transform 1.1s var(--ru-ease),filter .5s}
.zn-dep:hover .zn-dep__img{transform:scale(1.06)}
.zn-dep__img{width:100%;aspect-ratio:4 / 3;height:auto;object-fit:cover;border-radius:14px;display:block}
/* foto con el inicio de la ruta encima (25/10): rótulo pequeño y fecha grande, sobre un velo oscuro abajo */
.zn-dep__media{position:relative;border-radius:14px;overflow:hidden}
.zn-dep__start{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;margin:0;padding:28px 12px 10px;color:#fff;line-height:1.1;
  background:linear-gradient(0deg,rgba(34,18,27,.72) 0%,rgba(34,18,27,.35) 60%,rgba(34,18,27,0) 100%)} /* taste-skill-ignore: velo para leer la fecha sobre la foto */
.zn-dep__start small{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.zn-dep__start b{margin-top:2px;font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:1.75rem;letter-spacing:.02em}
.zn-dep__country{margin:0 0 4px;font-size:var(--ru-text-xs);font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--ru-primary)}
.zn-dep__title{margin:0;font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.2}
.zn-dep__title a{color:var(--ru-text-accent);text-decoration:none}
.zn-dep__title a:hover,.zn-dep__title a:focus-visible{color:var(--ru-primary);text-decoration:none}   /* sin subrayado: al pasar, solo cambia de color */
.zn-dep__dates{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:.9375rem;font-weight:700;color:var(--ru-text-accent)}
.zn-dep__dates svg,.zn-dep__week > svg{position:relative;top:-.5px;color:var(--ru-primary);flex:none}   /* el dibujo del calendario cae algo bajo en su caja */
.zn-dep__week{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:10px;font-size:.9375rem;font-weight:700;color:var(--ru-text-accent)}   /* salidas semanales finas (25/10): los días que sale, en negrita y color; los demás, en gris claro */
.zn-dep__week.is-short .zn-dep__weekx{display:none}   /* «Inicio:» cuando «Inicio de la ruta:» no deja sitio a los días */
.zn-dep__week ol{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.zn-dep__week li{position:relative;padding:0 5px;font-size:.8125rem;font-weight:400;color:var(--ru-disabled)}
.zn-dep__week li.is-on{color:var(--ru-text-accent);font-weight:700}
.zn-dep__dur{margin:4px 0 0;font-size:.875rem;font-style:italic;color:var(--ru-muted)}
/* fechas: salida → regreso, sencillas (25/10) */
.zn-trip{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.zn-trip > svg{flex:none;margin-top:1px;color:var(--ru-primary)}   /* centrado ópticamente con la línea de la fecha (25/10) */
.zn-trip__end{display:flex;flex-direction:column;line-height:1.25}
.zn-trip__end b{font-size:.9375rem;font-weight:700;color:var(--ru-text-accent);white-space:nowrap}
.zn-trip__end span{font-size:.8125rem;color:var(--ru-muted)}
.zn-trip__arrow{position:relative;flex:0 1 48px;min-width:20px;height:1px;margin-top:10px;background:rgba(150,88,113,.45)}
/* sin punta de flecha: solo una línea (Alberto, 25/10) */
.zn-dep__state{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* etiqueta de estado con su botón «i» y la ficha que explica el estado (25/10) */
.zn-stwrap{display:inline-flex;align-items:center;gap:4px}
.zn-stinfo{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--ru-muted);cursor:pointer;transition:color .2s,background .2s}
.zn-stinfo:hover,.zn-stinfo[aria-expanded="true"]{color:var(--ru-primary);background:var(--ru-tint)}
.zn-stinfo:focus-visible{outline:2px solid var(--ru-primary);outline-offset:1px}
.zn-stpop{position:absolute;z-index:70;width:min(340px,calc(100vw - 24px));padding:18px 20px 20px;border-radius:18px;background:var(--ru-white);
  box-shadow:0 24px 50px -12px rgba(42,26,34,.28),0 0 0 1px rgba(150,88,113,.1);animation:zn-stpop .25s var(--ru-ease)} /* taste-skill-ignore: ficha flotante */
.zn-stpop[hidden]{display:none}
.zn-stpop::before{content:"";position:absolute;top:-6px;left:calc(var(--arrow, 24px) - 6px);width:12px;height:12px;background:var(--ru-white);transform:rotate(45deg);
  box-shadow:-1px -1px 0 rgba(150,88,113,.1)}
.zn-stpop.is-up::before{top:auto;bottom:-6px;box-shadow:1px 1px 0 rgba(150,88,113,.1)}
@keyframes zn-stpop{from{opacity:0;transform:translateY(4px)}}
.zn-stpop__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--ru-tint-2)}
.zn-stpop__t{margin:0;font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:1.0625rem;color:var(--ru-text-accent)}
.zn-stpop__x{display:grid;place-items:center;width:30px;height:30px;margin:-4px -6px -4px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--ru-muted);cursor:pointer}
.zn-stpop__x:hover{background:var(--ru-tint);color:var(--ru-primary)}
.zn-stpop__p{margin:12px 0 0;font-size:.9375rem;line-height:1.55;color:var(--ru-ink)}
.zn-stpop__p b{color:var(--ru-text-accent)}
.zn-stpop__note{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#f5f1f4;font-size:.875rem;font-weight:600;line-height:1.45;color:var(--ru-text-accent)}
.zn-stpop__note svg{flex:none;margin-top:1px;color:var(--ru-primary)}
@media (prefers-reduced-motion:reduce){.zn-stpop{animation:none}}
/* etiquetas de estado (.zn-status--*): comunes en rutas-unicas.css (.ru-status) */
.zn-best__tags .zn-status.is-in{animation:ru-price-in .8s var(--ru-ease) .2s backwards}   /* misma animación y duración que el tipo de ruta (.ru-best__tag.is-in) al cambiar de oferta (25/10) */
.zn-dep.is-full .zn-dep__img{filter:grayscale(.6);opacity:.75}
.zn-dep__cta.is-off{background:var(--ru-tint);color:var(--ru-muted);box-shadow:none;cursor:default;pointer-events:none}
.zn-dep__cta.is-off::before{display:none}
.zn-dep__type{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:0;border-radius:999px;background:#f2eaf0;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ru-text-accent);cursor:default;user-select:none}
/* tipo de ruta como etiqueta informativa, no como botón (26/10, comentario de Alberto): fondo suave sin contorno e icono, igual que los estados */
.zn-dep__type::before{content:"";flex:none;width:14px;height:14px;background:currentColor}
.zn-dep__type--garantizada::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='5.5'/%3E%3Cpath d='M8.5 10.7L5.5 3h4l2.5 5.5M15.5 10.7L18.5 3h-4l-1.4 3.1'/%3E%3Cpath d='M12 12.6l.8 1.6 1.7.2-1.2 1.2.3 1.7-1.6-.8-1.6.8.3-1.7-1.2-1.2 1.7-.2z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='5.5'/%3E%3Cpath d='M8.5 10.7L5.5 3h4l2.5 5.5M15.5 10.7L18.5 3h-4l-1.4 3.1'/%3E%3Cpath d='M12 12.6l.8 1.6 1.7.2-1.2 1.2.3 1.7-1.6-.8-1.6.8.3-1.7-1.2-1.2 1.7-.2z'/%3E%3C/svg%3E") center / contain no-repeat}
.zn-dep__type--grupo::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.6-3.4 3-5.5 6-5.5s5.4 2.1 6 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.6c2.4.2 4 2 4.5 4.9'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.6-3.4 3-5.5 6-5.5s5.4 2.1 6 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.6c2.4.2 4 2 4.5 4.9'/%3E%3C/svg%3E") center / contain no-repeat}
.zn-dep__alert{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;cursor:pointer;font:inherit;font-size:var(--ru-text-xs);font-weight:600;
  color:var(--ru-primary);text-decoration:none;text-underline-offset:3px;text-align:left}   /* subrayado solo al pasar el ratón (25/10) */
.zn-dep__alert svg{flex:none}
.zn-dep__alert:hover{color:var(--ru-primary-dark)}
.zn-dep__alert:hover .zn-dep__alert-t{text-decoration:underline;text-underline-offset:3px}   /* subrayado normal bajo el texto, sin animación (03/11, Alberto) */
.zn-dep__buy{display:flex;align-items:center;gap:24px;align-self:stretch;padding-left:24px;border-left:1px solid var(--ru-tint-2)}   /* precio (25/10): «desde» y cifra como en el resto del prototipo, con «por persona» debajo; a su lado Reservar y la señal en pastilla */
@media (min-width:901px){ .zn-dep__buy{min-width:340px;justify-content:flex-end} }   /* mismo ancho en todas las tarjetas: el filete cae siempre en el mismo sitio */
.zn-dep__amount{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.zn-dep__price{margin:0 0 6px;white-space:nowrap}
.zn-dep__price b{display:block;margin:4px 0 0}   /* «desde» encima y la cifra debajo (25/10) */
.zn-dep__amount{text-align:right}   /* tipografía de .ru-trip__price (rutas-unicas.css), la misma que en el resto del prototipo (25/10) */
.zn-dep__pp{font-size:.8125rem;color:var(--ru-muted)}
.zn-dep__act{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.zn-dep__deposit{margin:0;padding:4px 10px;border-radius:999px;background:var(--ru-tint);font-size:.6875rem;color:var(--ru-muted);text-align:center;white-space:nowrap}
.zn-dep__deposit b{color:var(--ru-text-accent)}
/* bocadillo explicativo de la señal (25/10): al pasar el ratón o al tocar */
.zn-dep__deposit[data-tip]{position:relative;cursor:help;outline:0}
.zn-dep__deposit[data-tip]::after{content:attr(data-tip);position:absolute;z-index:20;bottom:calc(100% + 10px);left:50%;width:250px;padding:12px 14px;border-radius:14px;
  background:var(--ru-white);color:var(--ru-ink);font-size:.8125rem;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;
  box-shadow:0 18px 40px -12px rgba(42,26,34,.28),0 0 0 1px rgba(150,88,113,.12);   /* como la ficha «Estado de la salida» */
  opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
.zn-dep__deposit[data-tip]::before{content:"";position:absolute;z-index:21;bottom:calc(100% + 4px);left:50%;border:6px solid transparent;border-top-color:var(--ru-white);border-bottom:0;filter:drop-shadow(0 1px 0 rgba(150,88,113,.15));
  opacity:0;visibility:hidden;transform:translateX(-50%);transition:opacity .2s,visibility .2s}
.zn-dep__deposit[data-tip]:is(:hover,:focus)::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.zn-dep__deposit[data-tip]:is(:hover,:focus)::before{opacity:1;visibility:visible}
.zn-dep__deposit[data-tip]:focus-visible{box-shadow:0 0 0 2px var(--ru-primary)}
/* «¡Reserva por 0 €!»: mismos colores que «Reserva con X €» (25/10) */
.zn-dep__cta{min-height:52px;min-width:150px;padding:0 24px;justify-content:center}   /* «Reservar» y «Sin plazas» del mismo tamaño (25/10); 52px como el resto de botones de la web (26/10) */
.zn-dep.is-full .zn-dep__amount{opacity:.5}
.zn-empty{max-width:560px;margin:8px auto 0;padding:32px;border-radius:var(--ru-radius);background:var(--ru-white);text-align:center}
.zn-empty__t{margin:0;font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:1.375rem;color:var(--ru-text-accent)}
.zn-empty__p{margin:8px 0 0;color:var(--ru-muted);line-height:1.55}
.zn-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.zn-empty__actions .ru-chip{min-height:52px;padding:0 20px;font-size:.9375rem}
.zn-empty__actions .ru-submit{min-height:52px;padding:0 24px}

/* ---------- 6. Otras zonas ---------- */
.zn-more{background:#f2eaf0;padding:clamp(48px,7vh,88px) var(--ru-page) clamp(56px,9vh,104px)}
.zn-more__head{text-align:center}
.zn-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(28px,4vh,44px) 0 0;padding:0;list-style:none}
.zn-zone{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(260px,34vh,380px);border-radius:var(--ru-radius);overflow:hidden;
  color:var(--ru-white);text-decoration:none;transition:transform .6s var(--ru-ease), box-shadow .6s var(--ru-ease)}
.zn-zone img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ru-ease)}
.zn-zone::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(110,61,82,.92) 0%,rgba(110,61,82,.5) 40%,rgba(110,61,82,0) 72%)} /* taste-skill-ignore: velo de marca, como Fechas únicas */
.zn-zone__body{display:flex;flex-direction:column;gap:6px;width:100%;padding:24px}
.zn-zone__body small{font-size:var(--ru-text-xs);font-weight:500;color:rgba(255,255,255,.85)}
.zn-zone__body b{font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:clamp(1.625rem,2.4vw,2.25rem);line-height:1.1}
.zn-zone__more{display:grid;grid-template-rows:1fr}   /* descripción y «Ver rutas»: en Ordenador y Portátil aparecen al pasar el ratón */
.zn-zone__more > span{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.zn-zone__desc{margin-top:2px;font-size:.9375rem;line-height:1.45;color:rgba(255,255,255,.92)}
.zn-zone__cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-end;margin-top:10px;font-weight:700;font-size:.9375rem}
@media (hover:hover) and (min-width:901px){
  .zn-zone__more{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ru-ease),opacity .35s var(--ru-ease)}
  .zn-zone:hover .zn-zone__more,.zn-zone:focus-visible .zn-zone__more{grid-template-rows:1fr;opacity:1}
}
/* hover: solo zoom de la foto, la tarjeta no se mueve (Alberto, 27/10) */
.zn-zone:hover img{transform:scale(1.06)}
/* hover: velo de marca sobre la foto para que el texto se lea mejor, como «Fechas únicas» de la portada (Alberto, 27/10) */
.zn-zone::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(110,61,82,.35);opacity:0;transition:opacity .6s var(--ru-ease)} /* taste-skill-ignore: velo de marca, como Fechas únicas */
.zn-zone:hover::after,.zn-zone:focus-visible::after{opacity:1}
.zn-zone:hover .zn-zone__cta svg{animation:ru-arrow .6s var(--ru-ease)}
.zn-zone:focus-visible{outline:3px solid var(--ru-primary);outline-offset:3px}
.ru-js .zn-more__grid > li:nth-child(2) .ct-reveal{transition-delay:.08s}
.ru-js .zn-more__grid > li:nth-child(3) .ct-reveal{transition-delay:.16s}
.ru-js .zn-zone.ct-reveal.is-in:hover{transform:none}

/* ---------- Avísame cuando esté confirmada ---------- */
/* compacto para que quepa en pantalla (25/10): la campana a la izquierda del título, nombre y email en una fila */
.zn-dlg__ask > .ct-ico,.zn-dlg__done > .ct-ico{float:left;width:40px;height:40px;margin-right:12px}
.zn-dlg{padding:0;border:0;background:none;max-width:min(520px,calc(100vw - 32px));width:100%;color:var(--ru-ink)}
.zn-dlg::backdrop{background:rgba(20,10,16,.5)}
.zn-dlg[open]{animation:ru-rise .5s var(--ru-ease)}
.zn-dlg__card{position:relative;padding:22px 24px;border-radius:24px;background:var(--ru-white);box-shadow:0 24px 60px rgba(0,0,0,.28)} /* taste-skill-ignore: elemento que flota */
.zn-dlg__x{position:absolute;top:16px;right:16px}
.zn-dlg__t{margin:0;min-height:40px;display:flex;align-items:center;font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:1.5rem;line-height:1.2;color:var(--ru-text-accent);padding-right:40px}
.zn-dlg__p{margin:8px 0 20px;color:var(--ru-muted);line-height:1.5}
/* la salida en el diálogo, con el estilo de la tarjeta de la oferta (25/10) */
.zn-dlg__trip{display:flex;align-items:center;gap:14px;margin:12px 0 12px;padding:10px;border-radius:18px;background:var(--ru-sand)}
.zn-dlg__trip .zn-dep__img{flex:none;width:72px;height:72px;aspect-ratio:auto;border-radius:12px}
.zn-dlg__trip > div{min-width:0}
.zn-dlg__check{margin:2px 0 10px}
.zn-dlg__how{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin:2px 0 12px}
.zn-dlg__how .zn-dlg__lbl{margin:0}
.zn-dlg__how .ct-opts{display:flex;gap:6px;margin:0}
.zn-dlg__how .ct-opt{min-height:36px;padding:0 12px;font-size:.8125rem}
.zn-dlg__trip .zn-dep__title{font-size:1.125rem;color:var(--ru-text-accent)}
.zn-dlg__trip .zn-dep__dur{display:none}   /* sin duración: el diálogo cabe en pantalla */
.zn-dlg__trip .zn-dep__dates,.zn-dlg__trip .zn-dep__week{margin-top:6px;font-size:.875rem}
.zn-dlg__trip .zn-trip{margin-top:6px;gap:8px}
.zn-dlg__trip .zn-trip__end b{font-size:.875rem}
.zn-dlg__trip .zn-trip__arrow{margin-top:9px}
.zn-dlg__trip .zn-trip > svg{margin-top:0}
.zn-dlg__f{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;flex:1;min-width:0}
.zn-dlg__f > span,.zn-dlg__lbl{font-size:var(--ru-text-xs);font-weight:500;color:var(--ru-muted)}
.zn-dlg__f input:not(.ct-field__input){min-height:46px;padding:0 16px;border:1px solid transparent;border-radius:14px;background:var(--ru-sand);font:inherit;font-size:1rem;color:var(--ru-ink)}
.zn-dlg__f input:not(.ct-field__input):focus{outline:none;border-color:var(--ru-primary);background:var(--ru-white)}
.zn-dlg__row{display:flex;flex-direction:column}   /* nombre y email uno debajo de otro (25/10) */
.zn-dlg__f .ct-tel{min-height:46px}   /* teléfono con prefijo (estilos de crea-tu-ruta.css), a la altura de los demás campos */
.zn-dlg__f .ct-field__input{min-height:46px}
.zn-dlg,.zn-dlg__card{overflow:visible}
.zn-dlg .ct-pre__list{top:auto;bottom:calc(100% + 8px);max-height:min(320px,50vh)}   /* la lista de prefijos se abre hacia arriba, sobre los otros campos, sin cortarse */
.zn-dlg__err{margin:0 0 12px;font-size:.875rem;font-weight:500;color:#a1324a}
.zn-dlg__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.zn-dlg__actions .ru-submit{min-height:48px;padding:0 28px}
.zn-dlg [hidden]{display:none!important}

/* =========================================================
   Portátil (901–1279)
   ========================================================= */
@media (max-width:1279px){
  .zn-dep{grid-template-columns:150px minmax(0,1fr) auto;row-gap:14px}
  .zn-dep__state{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .zn-dep__buy{grid-column:3;grid-row:1 / span 2}
  .zn-dep__media{grid-row:1 / span 2}
  .zn-dep__img{height:100%;aspect-ratio:auto}
}

/* =========================================================
   Tablet y Móvil (≤ 900)
   ========================================================= */
@media (max-width:900px){
  /* Tablet y Móvil: los filtros bajan debajo del título y el pop up ocupa su ancho */
  .zn-ff .ct-pick__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zn-hero__content{flex-direction:column;align-items:stretch;gap:20px}
  .zn-hero__nav{align-self:flex-end}
  .zn-intro__text,.zn-mosaic{grid-column:1 / -1}
  .zn-intro__text{text-align:center}
  .zn-intro__lead,.zn-intro__title{margin-left:auto;margin-right:auto}
  .zn-countries{justify-content:center}
  .zn-mosaic{margin-top:40px}

  .ru-best.zn-routes{padding-top:64px;padding-bottom:48px}
  .zn-routes::after{background:linear-gradient(180deg,rgba(34,18,27,.88) 0%,rgba(34,18,27,.7) 55%,rgba(34,18,27,.5) 100%)} /* taste-skill-ignore: velo para leer el texto sobre la foto */
  .zn-routes .ru-best__head{margin-bottom:0}

  .zn-dep{grid-template-columns:120px minmax(0,1fr);padding:12px;gap:14px 16px}
  .zn-dep__media{grid-row:auto;align-self:start}
  .zn-dep__img{height:auto;aspect-ratio:1}
  .zn-dep__start{padding:22px 8px 7px}
  .zn-dep__start small{font-size:.5rem;letter-spacing:.06em}
  .zn-dep__start b{font-size:1.25rem}
  .zn-dep__state{grid-column:1 / -1}
  .zn-dep__buy{grid-column:1 / -1;grid-row:auto;justify-content:space-between;padding:14px 0 0;border-left:0;border-top:1px solid var(--ru-tint-2)}
  .zn-dep__amount{align-items:flex-start;text-align:left}

  .zn-more__grid{grid-template-columns:1fr;gap:12px}
  .zn-zone{min-height:150px}
}

/* =========================================================
   Móvil (≤ 640)
   ========================================================= */
@media (max-width:640px){
  .ct-hero.zn-hero .ct-hero__actions{flex-direction:column}
  .zn-quote{margin-top:16px}
  .zn-hero__nav{display:none}
  .zn-intro{padding:40px 16px 48px}
  .zn-countries{margin-top:24px}
  .zn-mosaic{--g:10px;gap:var(--g);margin-top:28px}
  .zn-mosaic__item{border-radius:16px}

  .ru-best.zn-routes{padding:40px 16px 40px}

  .zn-deps{padding:40px 0 40px}
  .zn-deps__bar{padding:0 16px}
  .zn-ff__panel .ru-dp__switch{width:auto}   /* en Móvil, a todo el ancho */
  .zn-ff__panel .ru-dp__tab{flex:1}
  .zn-ff.is-stuck.is-open,.zn-ff.is-stuck.is-list{z-index:1001}   /* la hoja, por encima del oscurecido */
  .zn-ff.is-stuck.is-open::before,.zn-ff.is-stuck.is-list::before{display:none}   /* sin la franja: la cabecera queda bajo el oscurecido */
  /* Móvil (26/10, comentario de Alberto): un único botón «Filtrar · Todas» centrado, como en «Mejores Rutas» de la portada;
     abre una hoja inferior con los cinco campos uno debajo de otro; cada campo abre su propia hoja */
  .zn-ff__label,.zn-ff__top .zn-ff__reset{display:none}
  .zn-ff__top{justify-content:center;margin:0}
  /* «Filtrar · Todas» sin fondo, solo el borde (26/10, comentario de Alberto) */
  .zn-ff__open{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid rgba(150,88,113,.35);border-radius:999px;
    background:transparent;color:var(--ru-primary);font:inherit;font-size:.875rem;font-weight:600;letter-spacing:.02em;cursor:pointer}
  .zn-ff__open:hover,.zn-ff__open:active{border-color:var(--ru-primary)}
  .zn-ff__open small{font-size:.875rem;font-weight:400;color:var(--ru-muted)}
  .zn-ff__open small::before{content:"·";margin-right:8px;color:var(--ru-faint)}
  .zn-ff__open.is-on small{color:var(--ru-primary);font-weight:600}
  .zn-ff__fields{position:fixed;left:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;gap:8px;margin:0;
    padding:16px 16px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--ru-white);
    box-shadow:0 -20px 50px rgba(34,18,27,.2); /* taste-skill-ignore: hoja inferior flotante */
    transform:translateY(105%);visibility:hidden;transition:transform .45s var(--ru-ease),visibility 0s .45s}
  .zn-ff.is-list .zn-ff__fields{transform:none;visibility:visible;transition-delay:0s}
  .zn-ff__sheethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
  .zn-ff__sheethead b{font-size:1.0625rem;font-weight:700;color:var(--ru-text-accent)}
  .zn-ff__close{width:44px;height:44px;border:0;border-radius:50%;background:var(--ru-tint);color:var(--ru-text-accent);display:grid;place-items:center;cursor:pointer}
  .zn-ff__listfoot{display:flex;align-items:center;gap:12px;margin-top:8px}
  .zn-ff__listfoot .zn-ff__done{flex:1;justify-content:center}
  .zn-ff__clearall{padding:4px 0;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:600;color:var(--ru-primary);text-decoration:underline;text-underline-offset:3px}
  .zn-ff__clearall[hidden]{display:none}
  .zn-ff.is-stuck .zn-ff__top{margin:0}
  /* el pop up es una hoja que sube desde abajo, con el fondo oscurecido */
  .zn-ff__panel{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:1001;width:auto;max-height:92dvh;border-radius:22px 22px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
  .zn-ff.is-open + .zn-ff__veil,.zn-ff.is-list + .zn-ff__veil{display:block;position:fixed;inset:0;z-index:1000;background:rgba(43,22,33,.45)}
  html.zn-lock{overflow:hidden}
  /* cada hoja de un filtro: «Atrás» a la izquierda y la X a la derecha, como la hoja de la lista (26/10) */
  .zn-ff__panelbar{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 10px}
  .zn-ff__back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px 0 2px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:600;color:var(--ru-text-accent)}
  .zn-ff .ct-pick__list{grid-template-columns:repeat(2,minmax(0,1fr))}   /* dos columnas: caben todos los países sin scroll */
  .zn-ff__panel .ru-dest__row{padding-top:3px;padding-bottom:3px}
  .zn-ff__months{grid-template-columns:repeat(4,minmax(0,1fr))}
  .zn-ff__months .ru-dp__mtile{min-height:58px}
  .zn-ff__panel .ru-dp__cal .ru-dp__day,.zn-ff__panel .ru-dp__cal .ru-dp__pad{width:36px;height:34px}   /* táctil y compacto */
  .zn-ff__done{flex:1;justify-content:center}
  .zn-ff__foot--dates{flex-wrap:wrap}
  .zn-list{padding:0 16px}
  .zn-dep{grid-template-columns:88px minmax(0,1fr)}
  .zn-dep__title{font-size:1.1875rem}
  .zn-dep__week li{padding:0 4px}
  .zn-dep__start small span{display:none}   /* foto pequeña: solo «Inicio» */
  .zn-dep__start{padding:18px 7px 6px}
  .zn-dep__start b{font-size:1.0625rem;white-space:nowrap}
  /* la foto llega hasta el final del bloque de fechas (26/10, comentario de Alberto) */
  .zn-dep__media{align-self:stretch}
  .zn-dep__img{height:100%;min-height:88px;aspect-ratio:auto}
  /* etiquetas (tipo + estado + «i») siempre en una sola fila (26/10, comentario de Alberto); «Avísame» va debajo */
  .zn-dep__state{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 6px}
  .zn-dep__type{flex:none;min-height:28px;padding:0 9px;gap:5px;font-size:.625rem;letter-spacing:.06em;white-space:nowrap}
  .zn-dep__type::before{width:12px;height:12px}
  .zn-dep__state .zn-stwrap{flex:none;gap:2px}
  .zn-dep__state .zn-status{min-height:28px;padding:0 9px;gap:5px;font-size:.6875rem;white-space:nowrap}
  .zn-dep__state .zn-status::before{width:12px;height:12px}
  .zn-dep__alert{flex:1 1 100%}
  /* precio en una sola línea: «desde 1.850 € por persona» (26/10, comentario de Alberto) */
  .zn-dep__amount{flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:6px;white-space:nowrap}
  .zn-dep__price{margin:0}
  .zn-dep__price b{display:inline;margin:0 0 0 4px}
  .zn-dep__amount{flex:1 1 100%;justify-content:center}   /* precio centrado en la tarjeta (26/10, comentario de Alberto) */
  .zn-dep__amount{flex-wrap:wrap}
  .zn-dep__amount .ru-was{flex:1 1 100%;justify-content:center;margin:0 0 2px}   /* promoción: «Antes» en su propia línea, también centrada */
  .zn-trip{gap:8px}
  .zn-trip > svg{display:none}   /* sin icono: cabe en la columna estrecha */
  .zn-dep__info{align-self:center}
  .zn-dep__buy{flex-wrap:wrap;gap:14px}
  .zn-dep__act{flex:1 1 100%}
  .zn-empty{margin:8px 16px 0;padding:24px 20px}
  .zn-empty__actions > *{flex:1 1 100%;justify-content:center}

  .zn-more{padding:40px 16px 48px}
  .zn-dlg__card{padding:20px 18px}
  .zn-dlg__t{font-size:1.25rem;padding-right:48px}
  .zn-dlg__trip .zn-dep__img{width:56px;height:56px}
  .zn-dlg__trip .zn-dep__title{font-size:1rem}
  .zn-dlg__row{flex-direction:column;gap:0}
  .zn-dlg__actions > *{flex:1;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .zn-hero__img,.zn-routes__bg img{transition:opacity .4s linear;transform:none}
  .zn-hero__bar.is-active i{animation:none;width:100%}
  .zn-dep:hover .zn-dep__img,.zn-zone:hover{transform:none}
}
@media (max-width:380px){ .zn-trip__end b{font-size:.8125rem} .zn-trip__arrow{min-width:16px} }   /* móviles estrechos */

/* Pie como el de Crea tu ruta (26/10, comentario «Trae el footer con la newsletter integrada»): clase .ru-foot-in del <body>,
   reglas en crea-tu-ruta.css; el degradado empieza en el fondo de «Otras zonas» */
.zn-page{--ft-from:#f2eaf0}   /* «Otras zonas» va sobre #f2eaf0 (26/10) */

/* Móvil: «Ofertas en …» del mismo tamaño que el resto de títulos y centrado (26/10, comentario de Alberto); puede ir en dos líneas */
@media (max-width:640px){
  .zn-deps__head{text-align:center}
  .zn-deps .ct-title{white-space:normal;font-size:var(--fs)}
}

/* Móvil: «Otras zonas» sin la descripción; países · rutas, el nombre y el enlace «Ver zona» (26/10, comentarios de Alberto) */
@media (max-width:640px){ .zn-zone__desc{display:none} .zn-zone__cta{margin-top:4px} }
/* «Otras zonas» en Móvil: velo de izquierda a derecha, como «Fechas únicas» de la portada (26/10, comentario de Alberto). Solo Móvil */
@media (max-width:640px){ .zn-zone::before{background:linear-gradient(90deg,rgba(110,61,82,.9) 0%,rgba(110,61,82,.55) 55%,rgba(110,61,82,.15) 100%)} } /* taste-skill-ignore */

/* Móviles muy estrechos (≤ 359): etiquetas un poco más compactas para que sigan en una sola fila (26/10) */
@media (max-width:359px){
  .zn-dep__type{padding:0 7px;gap:4px;letter-spacing:.03em}
  .zn-dep__type::before{display:none}   /* sin icono: así tipo y estado siguen en una fila */
  .zn-dep__state .zn-status{padding:0 7px;gap:4px;font-size:.625rem}
  .zn-dep__state .zn-status::before{width:11px;height:11px}
}
/* móviles estrechos (26/10, Alberto): el nombre del mes («Septiembre») nunca se sale de la baldosa: 3 columnas */
@media (max-width:420px){ .zn-ff__months{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* «Ofertas en América del Norte» (26/10, Alberto): si no cabe en una línea, el salto va entre «en» y el nombre de la zona */
#znDepsTitle em{display:inline-block}
/* fondos (26/10, Alberto, igual que la ficha de país): página en blanco puro y «Descubre nuestras Ofertas en…» en blanco roto #f9f7f0,
   también la franja de los filtros fijos; «Rutas por…» y «Otras zonas» mantienen el suyo */
.zn-page,.zn-page .zn-intro,.zn-page .ru-own{background:var(--ru-white)}
.zn-page .zn-deps,.zn-page .zn-ff.is-stuck::before{background:#f9f7f0}
/* «Otras zonas»: etiqueta «N rutas disponibles» arriba a la derecha, como en «Fechas únicas» de la portada (26/10, Alberto) */
.zn-zone__count{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:999px;
  background:var(--ru-white);color:var(--ru-text-accent);font-size:.8125rem;font-weight:600;white-space:nowrap;
  opacity:0;transform:translateY(-6px);transition:opacity .45s var(--ru-ease), transform .5s var(--ru-ease)}
.zn-zone__count svg{color:var(--ru-primary)}
.zn-zone:hover .zn-zone__count,.zn-zone:focus-visible .zn-zone__count{opacity:1;transform:none}
@media (hover:none),(max-width:959px){ .zn-zone__count{opacity:1;transform:none} }   /* en táctil y en las versiones compactas, siempre visible */
@media (max-width:640px){ .zn-zone__count{top:12px;right:12px;padding:5px 11px 5px 8px;font-size:.75rem} }

/* «Ver países» del banner: mismo efecto que «Inspiración» de la portada (cristal translúcido con desenfoque);
   deshace el botón blanco de .ct-hero__actions de crea-tu-ruta.css (Alberto, 27/10) */
.zn-page .ct-hero__actions .ru-submit--alt{
  background:rgba(255,255,255,.14);color:var(--ru-white);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); /* taste-skill-ignore: decisión del cliente */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); /* taste-skill-ignore: contorno del botón translúcido */
}
.zn-page .ct-hero__actions .ru-submit--alt::before{background:rgba(255,255,255,.18)}

/* Con todos los países (27/10, Alberto): cada zona es un bloque (zona.js, con PAIS.groups: tipos de rutas, temporadas y meses), con su título y sus países en lista compacta debajo.
   Ordenador y Portátil: panel ancho, una columna por zona, se ven todos de golpe */
@media (min-width:641px){ .zn-ff__panel--zones{width:min(1040px,calc(100vw - 2 * var(--ru-page)))} }   /* en Móvil, la hoja de abajo a todo el ancho */
.zn-ff__panel--zones .ct-pick__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 20px;align-items:start}
.zn-zg{min-width:0}
.zn-zg__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;width:100%;margin:0 0 6px;padding:0 4px 8px;border:0;border-bottom:1px solid var(--ru-tint-2);background:none;font:inherit;text-align:left;cursor:default;
  color:var(--ru-primary);font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.zn-zg__head small{font-size:.75rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ru-muted)}
.zn-zg__head svg{display:none}
.zn-zg__list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.zn-ff__panel--zones .ru-dest__row{gap:8px;padding:3px 4px}
.zn-ff__panel--zones .ru-dest__ico{width:24px;height:24px;flex:none}
.zn-ff__panel--zones .ru-dest__ico svg{width:14px;height:14px}
.zn-ff__panel--zones .ru-dest__txt{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;flex:1}   /* país y salidas en la misma línea */
.zn-ff__panel--zones .ru-dest__txt strong{font-size:.875rem;line-height:1.25}
.zn-ff__panel--zones .ru-dest__txt small{flex:none;font-size:.75rem;white-space:nowrap}
/* Tablet: dos zonas por fila */
@media (min-width:641px) and (max-width:900px){ .zn-ff__panel--zones .ct-pick__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px} }
/* Móvil: acordeón, una zona abierta cada vez que se pulsa su título; los países, en dos columnas */
@media (max-width:640px){
  .zn-ff__panel--zones .ct-pick__list{grid-template-columns:1fr;gap:0}
  .zn-zg{border-bottom:1px solid var(--ru-tint-2)}
  .zn-zg__head{align-items:center;margin:0;padding:14px 4px;border:0;cursor:pointer;font-size:.75rem}
  .zn-zg__head svg{display:block;margin-left:auto;transition:transform .3s var(--ru-ease)}
  .zn-zg.is-open .zn-zg__head svg{transform:rotate(180deg)}
  .zn-zg__list{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6px;padding:0 0 12px}
  .zn-zg.is-open .zn-zg__list{display:grid}
  .zn-ff__panel--zones .ru-dest__txt{flex-direction:column;gap:0}   /* en Móvil, el país encima de sus salidas */
  .zn-ff__panel--zones .ru-dest__txt strong{white-space:normal;overflow:visible}
  .zn-zg__head:focus-visible{outline:2px solid var(--ru-primary);outline-offset:-2px;border-radius:8px}
}

/* X de cierre en cada panel del filtro (27/10, Alberto: «x de cierre»): la de las hojas de Móvil, arriba a la derecha y sin «Atrás».
   Tablet, Portátil y Ordenador */
@media (min-width:641px){
  .zn-ff__panelbar{display:block;position:absolute;top:10px;right:10px;z-index:2;margin:0}
  .zn-ff__panelbar .zn-ff__back{display:none}
  .zn-ff__panelbar .zn-ff__close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--ru-tint);color:var(--ru-text-accent);cursor:pointer;transition:background .25s var(--ru-ease)}
  .zn-ff__panelbar .zn-ff__close:hover{background:var(--ru-tint-2)}
  .zn-ff__panelbar .zn-ff__close:focus-visible{outline:2px solid var(--ru-primary);outline-offset:2px}
  .zn-ff__panel > .zn-ff__head:first-of-type,.zn-ff__panel > .ru-panel__title:first-of-type{padding-right:44px}
}

/* el esmerilado del botón secundario desde el primer momento: ningún antepasado del botón anima su opacidad;
   la entrada pasa del bloque de texto y del contenedor de botones a cada botón (Alberto, 28/10) */
.ct-hero__content > .zn-hero__text,.zn-hero__text > .ct-hero__actions{animation:none}
.zn-hero__text > .ct-hero__actions > *{animation:ru-rise .9s var(--ru-ease) .49s backwards}
@media (prefers-reduced-motion:reduce){ .zn-hero__text > .ct-hero__actions > *{animation:none} }

/* título de las ofertas junto a los filtros fijos: pequeño y discreto, solo mientras están fijos (Alberto, 28/10) */
.zn-ff__ttl{display:none;align-items:baseline;margin:0;min-width:0;max-width:100%;white-space:nowrap;font-size:.75rem;font-weight:500;color:var(--ru-muted);letter-spacing:.01em}
.zn-ff__ttl span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.zn-ff.is-stuck .zn-ff__ttl{display:inline-flex;animation:zn-ttl-in .4s var(--ru-ease)}
@keyframes zn-ttl-in{from{opacity:0}to{opacity:1}}
@media (min-width:641px){
  .zn-ff.is-stuck .zn-ff__top{justify-content:flex-start}
  .zn-ff.is-stuck .zn-ff__ttl{order:2}
  .zn-ff.is-stuck .zn-ff__ttl::before{content:"·";margin:0 10px;color:var(--ru-faint)}
  .zn-ff.is-stuck .zn-ff__top .zn-ff__reset{order:3;margin-left:auto}
}
@media (max-width:640px){
  .zn-ff.is-stuck .zn-ff__top{justify-content:space-between}
  .zn-ff.is-stuck .zn-ff__open{flex:none}
  .zn-ff__ttl span{font-size:0}   /* Móvil: solo el nombre («América del Norte»), sin «Ofertas en» */
  .zn-ff .zn-ff__ttl em{margin:0;font-family:var(--ru-font-country);font-size:1rem;font-style:normal;text-transform:uppercase;letter-spacing:0}   /* Móvil: el nombre en mayúsculas, en Lora y sin cursiva; en Ordenador sigue en la letra artística (Alberto, 28/10) */
}
.zn-ff__ttl em{margin-left:2px;font-family:var(--ru-font-display);font-size:1.0625rem;font-style:italic;font-weight:400;color:var(--ru-primary);letter-spacing:0}   /* lo propio de la página, en cursiva y en la letra artística de los títulos (Alberto, 28/10) */
@media (prefers-reduced-motion:reduce){ .zn-ff.is-stuck .zn-ff__ttl{animation:none} }
/* Ordenador: la fila «Filtrar» (con el título) no se queda fija; solo los campos (Alberto, 28/10) */
@media (min-width:1280px){ .zn-ff.is-stuck .zn-ff__top{display:none} }
/* título de las ofertas: el nombre («América del Norte», «Antigua y Barbuda»…) en cursiva, en la letra artística del título (Alberto, 28/10) */
.zn-page #znDepsTitle em{font-style:italic}
/* el resto del título («Ofertas en») en Lora fina; también en la copia fija (Alberto, 28/10) */
.zn-page #znDepsTitle{font-family:var(--ru-font-country);font-weight:400}
/* «Ofertas en» más pequeño; el nombre conserva su tamaño (Alberto, 28/10) */
.zn-page .zn-deps #znDepsTitle{font-size:calc(min(var(--fs),6.4vw) * .7)}
.zn-page .zn-deps #znDepsTitle em{font-size:calc(1em / .7)}
@media (max-width:640px){ .zn-page .zn-deps #znDepsTitle{font-size:calc(var(--fs) * .7)} }
.zn-page #znDepsTitle em{font-family:var(--ru-font-display)}
.zn-ff__ttl span{font-family:var(--ru-font-country);font-weight:400}
/* Prefijo con todos los países y buscador dentro de la lista, igual que en reserva-datos (05/11, Alberto: «Lleva esto a todos los puntos de la web donde esté este campo»).
   Formulario de aviso de zona, país, tipos, mes y temporada; la lista sigue abriéndose hacia arriba */
.zn-dlg .zn-pre__pop{display:flex;flex-direction:column;overflow:hidden;width:min(320px,calc(100vw - 2 * var(--ru-page)));max-height:min(360px,50vh);padding:8px}
.zn-dlg .zn-pre__pop[hidden]{display:none}
.zn-pre__q{position:relative;flex:none;margin-bottom:6px}
.zn-pre__q svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ru-muted);pointer-events:none}
.zn-dlg .zn-pre__q input{width:100%;height:42px;min-height:0;padding:0 12px 0 36px;border:0;border-radius:12px;background:var(--ru-sand,#f5f1f4);font:inherit;font-size:.9375rem;color:var(--ru-ink)}
.zn-dlg .zn-pre__q input:focus{outline:none;border:0;background:var(--ru-sand,#f5f1f4);box-shadow:inset 0 0 0 2px #875871}
.zn-pre__q input::-webkit-search-cancel-button{cursor:pointer}
.zn-pre__pop ul{flex:1 1 auto;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.zn-pre__pop [role="option"][hidden]{display:none}
.zn-pre__none{margin:0;padding:12px;font-size:.875rem;color:var(--ru-muted)}
.zn-pre__sep{height:1px;margin:6px 12px;background:rgba(150,88,113,.22);list-style:none;pointer-events:none}
.zn-pre__sep[hidden]{display:none}