/* ==========================================================================
   Rutas Únicas · páginas de fechas (temporada.html y mes.html) — prefijo fe-
   La plantilla y los estilos son los de zona (zona.css). Aquí lo común a temporadas y meses;
   lo propio de cada una va en temporadas.css (te-) y meses.css (me-).
   ========================================================================== */

/* Banner sin cita cuando la página no la tiene (fechas.js añade fe-noquote). Todos los dispositivos */
.fe-noquote .zn-quote{display:none}

/* Presentación: título y texto a la izquierda y el año en 12 meses a la derecha (Ordenador y Portátil);
   en Tablet y Móvil, uno debajo de otro. Debajo, «Dónde viajar en …» con cuatro países */
.zn-intro.fe-intro{background:var(--ru-white)}
.fe-intro__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:end;max-width:1520px;margin:0 auto}
.fe-intro__text{grid-column:1 / 7}
.fe-intro__kicker{display:inline-flex;align-items:center;gap:10px}
.fe-intro__kicker svg{flex:none;color:var(--ru-primary)}
.fe-intro__title{text-wrap:balance}
.fe-intro__lead{max-width:54ch}
.fe-year{grid-column:8 / 13}
.fe-sub{margin:0 0 14px;color:var(--ru-primary);font-size:.75rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}

/* El año: 12 meses en dos filas de 6; los de la página, en color de marca con su número de salidas.
   Tocar uno filtra las ofertas por ese mes (marcado: relleno) */
.fe-year__months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.fe-month{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;width:100%;min-height:84px;padding:12px 12px 10px;
  border:1px solid rgba(150,88,113,.16);border-radius:14px;background:var(--ru-white);font:inherit;text-align:left;color:var(--ru-muted);cursor:default;
  transition:background-color .3s var(--ru-ease),border-color .3s var(--ru-ease),color .3s var(--ru-ease),transform .3s var(--ru-ease)}
.fe-month b{font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:1.25rem;line-height:1}
.fe-month small{font-size:.75rem;font-weight:500;line-height:1.2}
.fe-month__name{display:flex;flex-direction:column;gap:4px}   /* mes y, debajo, su año (27/10, Alberto: «¿Diciembre de 2026 o de 2027?») */
.fe-month__y{font-size:.6875rem;font-weight:600;letter-spacing:.06em;line-height:1;opacity:.8}
.fe-month:not(.is-in){opacity:.55}
.fe-month.is-in{border-color:transparent;background:var(--ru-sand);color:var(--ru-text-accent)}
.fe-month.is-in small{color:var(--ru-primary)}
/* nº de rutas con el estilo común de etiqueta (.ru-status), en su tamaño compacto de las tarjetas (27/10, Alberto: «Usa el estilo de etiqueta») */
.fe-month .fe-month__n{min-height:24px;padding:0 9px;gap:5px;background:var(--ru-white);color:var(--ru-primary);font-size:.6875rem;font-weight:700;line-height:1}
.fe-month .fe-month__n::before{content:none}   /* sin punto ni icono (27/10, Alberto: «Quita el icono») */
.fe-month.is-in:not(:disabled){cursor:pointer}
/* hover con el estilo de mes marcado; al hacer clic vuelve a reposo (27/10, Alberto). Todos los dispositivos con ratón */
@media (hover:hover){
  .fe-month.is-in:not(:disabled):hover{transform:translateY(-2px);border-color:transparent;background:var(--ru-primary);color:var(--ru-white)}
  .fe-month.is-in:not(:disabled):hover small{color:var(--ru-primary)}
}
.fe-month:focus-visible{outline:2px solid var(--ru-primary);outline-offset:3px}

/* «Dónde viajar en …»: cuatro países con su foto, el motivo y «Ver país» */
.fe-picks{max-width:1520px;margin:clamp(56px,8vh,96px) auto 0}
.fe-picks__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.fe-pick{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.fe-pick__media{display:block;overflow:hidden;aspect-ratio:4 / 5;border-radius:var(--ru-radius)}
.fe-pick__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ru-ease)}
.fe-pick__body{display:flex;flex-direction:column;gap:6px;padding:16px 4px 0;flex:1}
.fe-pick__name{font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:1.5rem;line-height:1.15;color:var(--ru-text-accent)}
.fe-pick__why{font-size:.9375rem;line-height:1.5;color:var(--ru-muted)}
.fe-pick__cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;color:var(--ru-primary);font-weight:700;font-size:.9375rem;align-self:flex-end}   /* «Ver país» alineado a la derecha (27/10, Alberto). Todos los dispositivos */
.fe-pick:hover .fe-pick__media img{transform:scale(1.04)}
.fe-pick:hover .fe-pick__cta svg{animation:ru-arrow .6s var(--ru-ease)}
.fe-pick:focus-visible{outline:3px solid var(--ru-primary);outline-offset:4px;border-radius:var(--ru-radius)}
.ru-js .fe-picks__grid > li:nth-child(2) .ct-reveal{transition-delay:.08s}
.ru-js .fe-picks__grid > li:nth-child(3) .ct-reveal{transition-delay:.16s}
.ru-js .fe-picks__grid > li:nth-child(4) .ct-reveal{transition-delay:.24s}
.ru-js .fe-year.ct-reveal{transition-delay:.1s}

/* Portátil */
@media (min-width:901px) and (max-width:1279px){
  .fe-intro__text{grid-column:1 / 7}
  .fe-year{grid-column:7 / 13}
  .fe-picks__grid{gap:18px}
  .fe-pick__name{font-size:1.3125rem}
}
/* Tablet y Móvil: una columna; países en 2 × 2 (Tablet) */
@media (max-width:900px){
  .fe-intro__text,.fe-year{grid-column:1 / -1}
  .fe-intro__grid{row-gap:32px}
  .fe-picks__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .fe-pick__media{aspect-ratio:4 / 3}
}
/* Móvil: el año en 4 × 3; cada país en una fila (foto a la izquierda, texto a la derecha) */
@media (max-width:640px){
  .fe-year__months{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .fe-month{min-height:82px;padding:10px 8px 8px;gap:6px;border-radius:12px}   /* todas iguales, con cifra o sin ella (28/10, Alberto) */
  .fe-month b{font-size:1.0625rem}
  .fe-month small{font-size:.6875rem}
  .fe-month .fe-month__n{align-self:flex-end}   /* la etiqueta a la derecha (28/10, Alberto) */
  .fe-picks{margin-top:48px}
  .fe-picks__grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .fe-pick{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:stretch}
  .fe-pick__media{aspect-ratio:auto;min-height:124px;border-radius:14px}
  .fe-pick__body{padding:2px 0}
  .fe-pick__name{font-size:1.25rem}
  .fe-pick__why{font-size:.875rem}
  .fe-pick__cta{padding-top:4px}
}


/* Filtro por zonas de «Rutas destacadas» sobre la foto oscura (como en tipos de rutas). Tablet (píldoras) y Móvil (botón) */
@media (min-width:641px) and (max-width:900px){
  .fe-page .zn-routes .ru-best__filters .ru-chip{background:var(--ru-white)}
  .fe-page .zn-routes .ru-best__filters .ru-chip[aria-pressed="true"]{background:var(--ru-primary)}
}
@media (max-width:640px){
  .fe-page .zn-routes .ru-best__filterbtn,.fe-page .zn-routes .ru-best__filterbtn:hover{background:var(--ru-white);border-color:var(--ru-white)}
}

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

/* Meses: en lugar de la tira del año, el mes en cifras (27/10, Alberto: «En los meses este recurso no tiene sentido»;
   «hazlo más visual y anímalo»): cuatro tarjetas con icono y cifra grande; al entrar en pantalla suben una tras otra
   y los números cuentan desde 0 (fechas.js) */
.fe-facts__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.fe-fact{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:93px;padding:12px 16px;border-radius:14px;overflow:hidden;   /* mismo alto que los meses de las temporadas (27/10, Alberto) */
  
  background:linear-gradient(145deg,var(--ru-sand),rgba(150,88,113,.1));color:var(--ru-text-accent);
  transition:transform .35s var(--ru-ease),box-shadow .35s var(--ru-ease)}
.fe-fact:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(150,88,113,.55)}
.fe-fact__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}   /* toda la tarjeta filtra y baja (27/10) */
.fe-fact__btn:disabled{cursor:default}
.fe-fact:has(.fe-fact__btn:focus-visible){outline:2px solid var(--ru-primary);outline-offset:3px}
.fe-fact__btn:focus-visible{outline:none}
.fe-fact__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ru-white);color:var(--ru-primary);box-shadow:0 6px 16px -10px rgba(150,88,113,.6)}
.fe-fact__txt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}   /* cifra y texto al medio y a la derecha (27/10, Alberto) */
.fe-fact__icon{flex:none}
.fe-fact b{font-family:var(--ru-font-country);font-weight:var(--ru-country-w);font-size:2.25rem;line-height:.9;color:var(--ru-primary);font-variant-numeric:tabular-nums}
.fe-fact__label{font-size:.8125rem;font-weight:600;line-height:1.25}
.ru-js .fe-facts__grid .fe-fact{opacity:0;transform:translateY(18px) scale(.97)}
.ru-js .fe-facts__grid.is-on .fe-fact{opacity:1;transform:none;transition:opacity .6s var(--ru-ease) calc(var(--i) * .12s),transform .6s var(--ru-ease) calc(var(--i) * .12s),box-shadow .35s var(--ru-ease)}
.ru-js .fe-facts__grid.is-on .fe-fact:hover{transform:translateY(-3px);transition-delay:0s}
.ru-js .fe-facts__grid.is-on .fe-fact__icon{animation:fe-pop .6s var(--ru-ease) calc(var(--i) * .12s + .2s) backwards}
@keyframes fe-pop{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ru-js .fe-facts__grid .fe-fact{opacity:1;transform:none}
  .ru-js .fe-facts__grid.is-on .fe-fact__icon{animation:none}
}
@media (max-width:640px){
  .fe-facts__grid{gap:6px}
  .fe-fact{min-height:82px;padding:10px 12px;gap:8px;border-radius:12px}
  .fe-fact__icon{width:32px;height:32px}
  .fe-fact__icon svg{width:16px;height:16px}
  .fe-fact b{font-size:1.625rem}
  .fe-fact__label{font-size:.6875rem}
}

/* Tira con función (27/10, Alberto): cada mes filtra las ofertas por ese mes y baja a ellas (marcado: [aria-pressed]) */

/* Meses: en el filtro «Fechas» no hay «Fecha de inicio» / «Fechas flexibles» (27/10, Alberto: «En los meses no hay fechas
   flexibles»): sin conmutador; el panel muestra solo el mes de la página, ya marcado (fechas.js) */
.fe-page--mes #znPanelDates .ru-dp__switch{display:none}
/* meses: sin filtro «Fechas» (28/10, Alberto); los otros cuatro campos se reparten el ancho. Todos los dispositivos */
.fe-page--mes .zn-ff__field[hidden]{display:none}
.fe-page--mes .zn-ff__fields{grid-template-columns:repeat(4,minmax(0,1fr))}