.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4252 .elementor-element.elementor-element-4b8d9ff{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;}.elementor-4252 .elementor-element.elementor-element-b5a2b74{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;}.elementor-4252 .elementor-element.elementor-element-948f8a8{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4252 .elementor-element.elementor-element-1a41e0d{--grid-columns:3;}.elementor-4252 .elementor-element.elementor-element-1a41e0d .elementor-loop-container{grid-auto-rows:1fr;}.elementor-4252 .elementor-element.elementor-element-1a41e0d .e-loop-item > .elementor-section, .elementor-4252 .elementor-element.elementor-element-1a41e0d .e-loop-item > .elementor-section > .elementor-container, .elementor-4252 .elementor-element.elementor-element-1a41e0d .e-loop-item > .e-con, .elementor-4252 .elementor-element.elementor-element-1a41e0d .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}@media(max-width:1024px){.elementor-4252 .elementor-element.elementor-element-1a41e0d{--grid-columns:2;}}@media(max-width:767px){.elementor-4252 .elementor-element.elementor-element-1a41e0d{--grid-columns:1;}}/* Start custom CSS *//* ============ Listado con filtros — calcado del mockup ============
   https://literary-escapes-map.lovable.app/rutas-literarias
   Encabezado sobre color-sand · barra de filtros pegajosa a 80 · contador ·
   rejilla de tres columnas con gap 28. Medido a 1440.
   Los filtros y la rejilla son widgets nativos de Elementor Pro: aquí solo se
   les da el aspecto del mockup. */
[id^="rl-"], [id^="cl-"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[id^="rl-"] *, [id^="cl-"] * { border-radius: 0; }

/* ---------- Encabezado ---------- */
#rl-head, #cl-head {
  padding: 128px 0 0 !important; margin: 0;
  background-color: var(--color-sand);
  border-bottom: 1px solid var(--color-border);
  flex-direction: column !important; gap: 0 !important;
}
#rl-head-in, #cl-head-in {
  flex-direction: column !important; align-items: flex-start !important; gap: 0 !important;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px 64px !important;
}
#rl-head-in > *, #cl-head-in > * { flex: 0 0 auto; }
#rl-eb p.elementor-heading-title, #cl-eb p.elementor-heading-title {
  margin: 0; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.5;
  color: var(--color-gold-deep);
}
#rl-h1, #cl-h1 { margin-top: 16px; }
#rl-h1 h1.elementor-heading-title, #cl-h1 h1.elementor-heading-title {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.015em;
  color: var(--color-text);
}
#rl-sub, #cl-sub { margin-top: 24px; }
#rl-sub p.elementor-heading-title, #cl-sub p.elementor-heading-title {
  margin: 0; max-width: 576px; font-family: var(--font-body); font-size: 0.98rem;
  font-weight: 400; line-height: 1.625; color: var(--color-text-muted);
}

/* ---------- La barra de filtros ---------- */
#rl-barra, #cl-barra {
  position: sticky; top: 80px; z-index: 30; padding: 0 !important; margin: 0;
  background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  flex-direction: column !important; gap: 0 !important;
}
body.admin-bar #rl-barra, body.admin-bar #cl-barra { top: 112px; }
#rl-barra-in, #cl-barra-in {
  flex-direction: row !important; flex-wrap: nowrap; align-items: center !important;
  column-gap: 28px; row-gap: 20px;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 40px !important;
  overflow-x: auto; scrollbar-width: none;
}
#rl-barra-in::-webkit-scrollbar, #cl-barra-in::-webkit-scrollbar { display: none; }
/* el scroll horizontal de la barra recortaba el panel del desplegable: se
   suelta mientras hay uno abierto */
#rl-barra-in:has(.abierto), #cl-barra-in:has(.abierto) { overflow: visible; }
#rl-barra:has(.abierto), #cl-barra:has(.abierto) { overflow: visible; }
#rl-barra-in > *, #cl-barra-in > * { flex: 0 0 auto; }
#rl-f1, #rl-f2, #rl-f3, #cl-f1, #cl-f2, #cl-f3 {
  flex-direction: row !important; align-items: center !important; gap: 12px;
  padding: 0 !important; position: relative;
  width: auto !important; max-width: none !important; flex: 0 0 auto !important;
}
[id^="rl-f"][id$="-lab"] p.elementor-heading-title,
[id^="cl-f"][id$="-lab"] p.elementor-heading-title {
  margin: 0; white-space: nowrap; font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; line-height: 1.5; color: var(--color-text-muted);
}
/* Un widget de Elementor nace al 100% del contenedor: los filtros de
   modalidad y precio se iban fuera de la barra. */
[id^="rl-f"] > .elementor-widget, [id^="cl-f"] > .elementor-widget,
[id^="rl-f"] .elementor-widget-taxonomy-filter,
[id^="cl-f"] .elementor-widget-taxonomy-filter {
  width: auto !important; max-width: none !important; flex: 0 0 auto !important;
}
[id^="rl-f"] .elementor-widget-container, [id^="cl-f"] .elementor-widget-container {
  padding: 0 !important;
}

/* Los botones que pinta el widget nativo */
.elementor-widget-taxonomy-filter .e-filter {
  display: flex; flex-wrap: nowrap; gap: 8px; padding: 0; margin: 0;
  background: none; border: 0;
}
/* Medido en el mockup: el inactivo va en texto apagado sobre borde fino, y
   el elegido en dorado con el texto oscuro de los botones dorados. */
.elementor-widget-taxonomy-filter .e-filter-item {
  white-space: nowrap; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--color-border); background-color: transparent;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 400;
  line-height: 1.4; color: var(--color-text-muted);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.elementor-widget-taxonomy-filter .e-filter-item:hover {
  border-color: var(--color-gold); color: var(--color-text);
}
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"] {
  background-color: var(--color-gold); border-color: var(--color-gold);
  color: var(--color-text-on-gold);
}
/* En móvil el navegador deja el :hover pegado tras tocar, y el tema pinta el
   foco en su rosa. Se fijan los tres estados con los colores del sistema y se
   quita el realce de pulsación. */
.elementor-widget-taxonomy-filter .e-filter-item,
.tl-desplegable { -webkit-tap-highlight-color: transparent; }
.elementor-widget-taxonomy-filter .e-filter-item:focus,
.elementor-widget-taxonomy-filter .e-filter-item:active,
.elementor-widget-taxonomy-filter .e-filter-item:focus:not([aria-pressed="true"]),
.elementor-widget-taxonomy-filter .e-filter-item:active:not([aria-pressed="true"]) {
  background-color: transparent; border-color: var(--color-gold);
  color: var(--color-text); outline: none;
}
.elementor-widget-taxonomy-filter .e-filter-item:focus[aria-pressed="true"],
.elementor-widget-taxonomy-filter .e-filter-item:active[aria-pressed="true"] {
  background-color: var(--color-gold); border-color: var(--color-gold);
  color: var(--color-text-on-gold);
}
.elementor-widget-taxonomy-filter .e-filter-item:focus-visible,
.tl-desplegable:focus-visible {
  outline: 2px solid var(--color-gold-deep); outline-offset: 2px;
}
.tl-desplegable:focus, .tl-desplegable:active {
  background-color: transparent; border-color: var(--color-gold);
  color: var(--color-text); outline: none;
}

/* --- El filtro de destino: son 23 términos, así que va en un desplegable,
       como en el mockup. El filtrado lo sigue haciendo Elementor. --- */
#rl-fciudad, #cl-fciudad, #cl-fautor {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  display: none; width: 320px; max-height: 340px; overflow-y: auto;
  padding: 12px !important;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 40px -24px rgba(26, 19, 16, .45);
}
#rl-f1.abierto #rl-fciudad, #cl-f1.abierto #cl-fciudad,
#cl-f2.abierto #cl-fautor { display: block; }
#rl-fciudad .e-filter, #cl-fciudad .e-filter, #cl-fautor .e-filter { flex-wrap: wrap; gap: 6px; }
/* el mockup pone «Todas / Todos» delante; el widget lo pinta al final */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter="__all"] { order: -1; }
/* el botón que lo abre lo pone el JS */
.tl-desplegable {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-width: 152px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--color-border); background-color: transparent;
  font-family: var(--font-body); font-size: 0.8rem; line-height: 1.4;
  color: var(--color-text); transition: border-color .25s ease;
}
.tl-desplegable:hover { border-color: var(--color-gold); }
.tl-desplegable::after {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}
.abierto .tl-desplegable::after { transform: rotate(180deg); }

/* ---------- El listado ---------- */
#rl-lista, #cl-lista {
  padding: 56px 0 !important; background-color: var(--color-background);
  flex-direction: column !important; gap: 0 !important;
}
#rl-lista-in, #cl-lista-in {
  flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px !important;
}
#rl-lista-in > *, #cl-lista-in > * { flex: 0 0 auto; }
#rl-contador p.elementor-heading-title, #cl-contador p.elementor-heading-title {
  margin: 0; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400;
  line-height: 1.4; color: var(--color-text-muted);
}
#rl-grid, #cl-grid { margin-top: 32px; }
#rl-grid .elementor-grid, #cl-grid .elementor-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px !important;
}
#rl-grid .e-loop-item, #cl-grid .e-loop-item { height: 100%; }

@media (max-width: 1024px) {
  /* la barra pegajosa, con fondo opaco: el 95% con desenfoque deja ver las
     tarjetas por detrás en los navegadores móviles */
  #rl-barra, #cl-barra {
    background-color: var(--color-background) !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #rl-head, #cl-head { padding: 104px 0 0 !important; }
  #rl-head-in, #cl-head-in { padding: 0 24px 48px !important; }
  #rl-barra-in, #cl-barra-in { padding: 16px 24px !important; column-gap: 20px; }
  #rl-lista-in, #cl-lista-in { padding: 0 24px !important; }
  #rl-grid .elementor-grid, #cl-grid .elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #rl-head, #cl-head { padding: 88px 0 0 !important; }
  #rl-head-in, #cl-head-in { padding: 0 20px 40px !important; }
  #rl-barra, #cl-barra { top: 64px; }
  body.admin-bar #rl-barra, body.admin-bar #cl-barra { top: 110px; }
  #rl-barra-in, #cl-barra-in { padding: 14px 20px !important; }
  #rl-lista, #cl-lista { padding: 40px 0 !important; }
  #rl-lista-in, #cl-lista-in { padding: 0 20px !important; }
  #rl-grid .elementor-grid, #cl-grid .elementor-grid { grid-template-columns: 1fr; }
  #rl-fciudad, #cl-fciudad, #cl-fautor { width: min(320px, calc(100vw - 40px)); }
}

/* ---------------------------------------------------------------
   La cabecera del Maquetador trae las animaciones de scroll, pensadas
   para las páginas con hero oscuro. Aquí el encabezado es claro, así
   que se fija el estado final. Es el mismo bloque que ya usan las
   páginas legales y Contacto; el body.elementor-page-4252 es el id del contenedor de
   la cabecera 3659.
   --------------------------------------------------------------- */
.elementor-element-96a2278 {
  backdrop-filter: blur(8px);
  animation: none !important;
  background-color: color-mix(in srgb, var(--color-background) 95%, transparent) !important;
  box-shadow: 0 1px 0 0 var(--color-border) !important;
}
.elementor-element-96a2278 a:first-child > :first-child,
.elementor-element-96a2278 aside a,
.elementor-element-96a2278 aside span,
.elementor-element-96a2278 aside p,
.elementor-element-9e2ef75 svg,
.elementor-element-e1da398 svg {
  animation: none !important;
  color: var(--color-text) !important;
}

/* ===================================================================
   Dos correcciones de la barra, encontradas midiendo (1/9)
   =================================================================== */

/* 1. EL MAGENTA. El tema trae
      `[type="button"]:hover, [type="button"]:focus { background: #CC3366 }`
      —vale (0,2,0)— y mi botón del desplegable es un `type="button"`, así que
      perdía y se pintaba de rosa al pasar el ratón o tras tocarlo en el móvil.
      Se fijan los tres estados con los colores del sistema. */
.tl-desplegable,
.tl-desplegable:hover,
.tl-desplegable:focus,
.tl-desplegable:active,
.tl-desplegable:focus-within {
  background-color: transparent !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}
.tl-desplegable:hover, .tl-desplegable:focus, .tl-desplegable:active {
  border-color: var(--color-gold) !important;
}
.elementor-widget-taxonomy-filter .e-filter-item:hover,
.elementor-widget-taxonomy-filter .e-filter-item:focus,
.elementor-widget-taxonomy-filter .e-filter-item:active {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border-color: var(--color-gold) !important;
}
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"],
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]:hover,
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]:focus,
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]:active {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-text-on-gold) !important;
}

/* 2. EL HUECO EN MÓVIL. La cabecera se retira al bajar (queda en y=-32) pero
      la barra seguía clavada a 110px: entre una y otra se veían pasar las
      tarjetas por un hueco de 142px. En móvil la barra se pega arriba del
      todo, que es el sitio que deja libre la cabecera. */
/* El `top` de la barra lo lleva el JS, que la pega al borde de abajo de la
   cabecera mientras esta se esconde y vuelve. Lo de aquí es solo el valor de
   partida, para que no salte en el primer pintado. */

/* 3. LOS FILTROS EN MÓVIL, EN VARIAS FILAS.
      El mockup deja la barra en `flex-nowrap` con overflow visible: a 390px su
      tercer filtro empieza en x=507, o sea fuera de la pantalla, y no hay forma
      de llegar a él. Es una de esas decisiones suyas que solo valen para
      escritorio. Aquí los grupos se envuelven y no se pierde ninguna opción.
      En escritorio no cambia nada: siguen en una fila. */
@media (max-width: 1024px) {
  #rl-barra-in, #cl-barra-in, #dl-barra-in {
    flex-wrap: wrap !important; overflow: visible !important;
    column-gap: 20px; row-gap: 12px;
  }
  /* cada grupo ocupa el ancho completo, para que sus botones envuelvan
     dentro de la pantalla en vez de salirse */
  #rl-f1, #rl-f2, #rl-f3, #cl-f1, #cl-f2, #cl-f3, #dl-f1, #dl-f2, #dl-f3 {
    flex-wrap: wrap; row-gap: 8px;
    width: 100% !important; flex: 1 1 100% !important;
  }
  [id^="rl-f"] > .elementor-widget, [id^="cl-f"] > .elementor-widget,
  [id^="dl-f"] > .elementor-widget,
  [id^="rl-f"] .elementor-widget-taxonomy-filter,
  [id^="cl-f"] .elementor-widget-taxonomy-filter,
  [id^="dl-f"] .elementor-widget-taxonomy-filter {
    flex: 1 1 auto !important; min-width: 0;
  }
  .elementor-widget-taxonomy-filter .e-filter { flex-wrap: wrap; }
}


/* La cabecera de estas páginas no hace la transición de scroll, así que el
   logo tampoco: va directamente el normal. Sin esto se quedaba la versión
   clara sobre fondo claro, o sea invisible. */
#tl-logo-img { animation: none !important; opacity: 1 !important; }
#tl-logo-img-claro { animation: none !important; opacity: 0 !important; }/* End custom CSS */