.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.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-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.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-3914 .elementor-element.elementor-element-ccbf55b{--grid-columns:3;}.elementor-3914 .elementor-element.elementor-element-ccbf55b .elementor-loop-container{grid-auto-rows:1fr;}.elementor-3914 .elementor-element.elementor-element-ccbf55b .e-loop-item > .elementor-section, .elementor-3914 .elementor-element.elementor-element-ccbf55b .e-loop-item > .elementor-section > .elementor-container, .elementor-3914 .elementor-element.elementor-element-ccbf55b .e-loop-item > .e-con, .elementor-3914 .elementor-element.elementor-element-ccbf55b .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-3914 .elementor-element.elementor-element-ae1b083{--grid-columns:1;}.elementor-3914 .elementor-element.elementor-element-e08f491{--grid-columns:1;}.elementor-3914 .elementor-element.elementor-element-cb896de{--grid-columns:1;}@media(max-width:1024px){.elementor-3914 .elementor-element.elementor-element-ccbf55b{--grid-columns:2;}.elementor-3914 .elementor-element.elementor-element-ae1b083{--grid-columns:2;}.elementor-3914 .elementor-element.elementor-element-e08f491{--grid-columns:2;}.elementor-3914 .elementor-element.elementor-element-cb896de{--grid-columns:2;}}@media(max-width:767px){.elementor-3914 .elementor-element.elementor-element-ccbf55b{--grid-columns:1;}.elementor-3914 .elementor-element.elementor-element-ae1b083{--grid-columns:1;}.elementor-3914 .elementor-element.elementor-element-e08f491{--grid-columns:1;}.elementor-3914 .elementor-element.elementor-element-cb896de{--grid-columns:1;}}/* Start custom CSS *//* ============ Ficha de ruta literaria — calcada del mockup ============ */
#rl-hero, #rl-datos, #rl-cuerpo {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#rl-hero *, #rl-datos *, #rl-cuerpo * { border-radius: 0; }

/* ---------- Hero: 80svh, min 540, imagen a sangre ---------- */
#rl-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 80svh;
  min-height: 540px;
  padding: 0 !important;
  margin: 0;
  background-color: var(--color-ink);
  overflow: hidden;
}
#rl-foto { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
#rl-foto .elementor-widget-container, #rl-foto figure, #rl-foto a { height: 100%; }
#rl-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.02);   /* .img-warm del mockup */
}
/* .overlay-cinematic — degradado horizontal sobre ink */
#rl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-ink) 82%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 55%, transparent) 45%,
    color-mix(in srgb, var(--color-ink) 15%, transparent) 100%);
}
#rl-hero-txt {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 64px !important;
  gap: 0;
}
/* Migas: "RUTA LITERARIA · CARTAGENA · AUTOGUIADA" */
#rl-migas {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0 !important;
}
#rl-migas > .elementor-widget { flex: 0 0 auto; }
#rl-migas p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1.4;
}
#rl-migas > .elementor-widget + .elementor-widget p::before {
  content: "·";
  margin: 0 0.55em 0 0.35em;
  letter-spacing: 0;
  opacity: 0.8;
}
#rl-titulo { margin-top: 16px; }
#rl-titulo h1 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-ink-foreground);
}
#rl-resumen {
  margin-top: 24px;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--color-ink-foreground) 78%, transparent);
}
#rl-resumen p { margin: 0; }

/* ---------- Barra de datos: bg sand, borde inferior, 3 columnas ---------- */
#rl-datos {
  padding: 0 !important;
  background-color: var(--color-sand);
  border-bottom: 1px solid var(--color-border);
}
#rl-datos-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px !important;
}
#rl-datos-in > div {          /* cada celda: icono + bloque */
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 0 !important;
}
#rl-datos-in > div > .e-svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-gold-deep);
  line-height: 0;
}
#rl-datos-in > div > .e-svg svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;                 /* Elementor reescribe fill a currentColor */
  stroke: currentColor;
}
#rl-datos-in > div > div {    /* el bloque etiqueta+valores */
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 !important;
  min-width: 0;
}
#rl-datos p { margin: 0; font-family: var(--font-body); }
#rl-datos [id^="rl-et-"] p {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.4;
}
#rl-datos [id^="rl-va-"] { margin-top: 4px; }
#rl-datos [id^="rl-va-"] p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text);
}
/* Segundo valor de una celda: se une al primero con un punto medio */
#rl-datos [id$="-2"] { margin-top: 0; }
#rl-datos [id$="-2"] p::before { content: "· "; }
#rl-va-modalidad, #rl-va-duracion,
#rl-va-modalidad-2, #rl-va-duracion-2 { display: inline-block; }
#rl-dt-modalidad, #rl-dt-duracion { display: block; }
#rl-dt-modalidad #rl-et-modalidad, #rl-dt-duracion #rl-et-duracion { display: block; }

/* Un dato sin valor no se pinta: se oculta la celda entera */
#rl-d-modalidad:not(:has([id^="rl-va-"])),
#rl-d-duracion:not(:has([id^="rl-va-"])),
#rl-d-precio:not(:has([id^="rl-va-"])),
#rl-d-encuentro:not(:has([id^="rl-va-"])),
#rl-d-app:not(:has([id^="rl-va-"])),
#rl-d-dificultad:not(:has([id^="rl-va-"])) { display: none; }

/* ---------- Cuerpo: 1400 max, 112/40, dos columnas 727/537 ---------- */
#rl-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 727fr) minmax(0, 537fr);
  align-items: start;
  gap: 56px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 112px 40px !important;
  background-color: var(--color-background);
}
#rl-col-texto { flex-direction: column; align-items: stretch; gap: 0; padding: 0 !important; min-width: 0; }
#rl-col-lado  { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 !important;
                position: sticky; top: 112px; min-width: 0; }

/* Eyebrow del sistema */
#rl-cuerpo [id^="rl-eb-"] p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  line-height: 1.5;
}
#rl-eb-como, #rl-eb-paradas { margin-top: 56px; }

/* Titulares */
#rl-intro-titular h2 {
  margin: 16px 0 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
#rl-como-titular h3, #rl-mapa-titular h3 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
/* Sin titular, el texto no debe quedar pegado al eyebrow */
#rl-intro { margin-top: 28px; }
#rl-como  { margin-top: 20px; }

/* Cuerpo de texto */
#rl-intro, #rl-como {
  font-family: var(--font-body);
  color: var(--color-text-muted);
}
#rl-intro { font-size: 1.02rem; line-height: 1.8; }
#rl-como  { font-size: 0.98rem; line-height: 1.8; }
#rl-intro p, #rl-como p { margin: 0 0 20px; }
#rl-intro p:last-child, #rl-como p:last-child { margin-bottom: 0; }
#rl-intro strong, #rl-como strong { font-weight: 500; color: var(--color-text); }
#rl-intro a, #rl-como a { color: var(--color-gold-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
#rl-intro a:hover, #rl-como a:hover { color: var(--color-text); }

/* ---------- Paradas: ol a dos columnas, numeradas ---------- */
#rl-paradas { margin-top: 24px; }
#rl-paradas ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: parada;
  border-top: 1px solid var(--color-border);
}
#rl-paradas li {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  counter-increment: parada;
  font-family: var(--font-body);
}
#rl-paradas li::before {
  content: counter(parada, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.375;
  color: var(--color-gold-deep);
}
#rl-paradas .rl-parada-lugar {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.375;
  color: var(--color-text);
}
#rl-paradas .rl-parada-autor {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-gold-deep);
}

/* ---------- El mapa ---------- */
#rl-mapa-head {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding: 0 !important;
}
#rl-mapa-head-txt { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 !important; }
#rl-btn-mapa {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 12px 20px !important;
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
#rl-btn-mapa:hover { background-color: var(--color-sand); border-color: var(--color-gold-deep); color: var(--color-gold-deep); }
#rl-btn-mapa p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: inherit;
}
#rl-ic-expand { flex: 0 0 auto; width: 16px; height: 16px; line-height: 0; color: inherit; }
#rl-ic-expand svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; }

#rl-mapa {
  width: 100%;
  min-width: 0;
  height: 420px;
  margin-top: 28px;
  padding: 0 !important;
  background-color: var(--color-sand);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
#rl-mapa:empty { display: none; }
#rl-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
#rl-mapa-pie { margin-top: 12px; }
#rl-mapa-pie p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ---------- Columna lateral ---------- */
#rl-caja-cta, #rl-caja-adicional {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 32px !important;
  border: 1px solid var(--color-border);
}
#rl-caja-cta { background-color: var(--color-surface); }
#rl-cta-texto { margin-top: 16px; }
#rl-cta-texto p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
#rl-btn-plano {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
  padding: 14px 24px !important;
  background-color: var(--color-gold);
  color: var(--color-text-on-gold);
  text-decoration: none;
  border: 1px solid var(--color-gold);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
#rl-btn-plano:hover { background-color: var(--color-gold-deep); border-color: var(--color-gold-deep); color: var(--color-ink-foreground); }
#rl-btn-plano p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: inherit;
}
#rl-ic-arrow { flex: 0 0 auto; width: 16px; height: 16px; line-height: 0; color: inherit; }
#rl-ic-arrow svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; }

#rl-adicional { margin-top: 20px; }
#rl-adicional ul { list-style: none; margin: 0; padding: 0; }
#rl-adicional li {
  position: relative;
  padding: 0 0 14px 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
#rl-adicional li:last-child { padding-bottom: 0; }
#rl-adicional li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background-color: var(--color-gold);
}
#rl-adicional strong { font-weight: 500; color: var(--color-text); }
#rl-adicional a { color: var(--color-gold-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
#rl-adicional a:hover { color: var(--color-text); }

/* Un enlace sin URL no se muestra */
#rl-btn-mapa:not([href]), #rl-btn-plano:not([href]) { display: none; }
/* Una caja sin contenido tampoco */
#rl-caja-cta:not(:has(#rl-btn-plano[href])):not(:has(#rl-cta-texto)) { display: none; }
#rl-caja-adicional:not(:has(#rl-adicional)) { display: none; }
#rl-col-lado:not(:has(#rl-caja-cta)):not(:has(#rl-caja-adicional)) { display: none; }

/* Portadores de URL para el JS: nunca visibles */
#rl-datos-ocultos { display: none !important; }

/* ---------- Cortes ---------- */
@media (max-width: 1024px) {
  #rl-cuerpo { grid-template-columns: 1fr; gap: 56px; padding: 80px 24px !important; }
  #rl-col-lado { position: static; }
  #rl-datos-in { grid-template-columns: repeat(2, 1fr); padding: 32px 24px !important; }
  #rl-mapa { height: 360px; }
}
@media (max-width: 767px) {
  #rl-hero { height: auto; min-height: 460px; }
  #rl-hero-txt { padding: 0 20px 48px !important; }
  #rl-datos-in { grid-template-columns: 1fr; gap: 20px; padding: 28px 20px !important; }
  #rl-cuerpo { padding: 56px 20px !important; }
  #rl-paradas ul { grid-template-columns: 1fr; }
  #rl-eb-como, #rl-eb-paradas { margin-top: 40px; }
  #rl-mapa-head { margin-top: 48px; }
  #rl-mapa { height: 300px; }
  #rl-caja-cta, #rl-caja-adicional { padding: 24px !important; }
}
/* ---- Correcciones tras medir en el navegador ---- */

/* Los iconos atomicos llevan clase `e-svg-base`, no `e-svg`, y Elementor les
   reescribe fill a currentColor: sin esto salen como manchas macizas. */
[id^="rl-ic-"] { line-height: 0; }
[id^="rl-ic-"] svg,
#rl-datos-in svg,
#rl-btn-mapa svg,
#rl-btn-plano svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5;
  overflow: visible;
}
#rl-datos-in > div > .e-svg-base {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 0 !important;
  color: var(--color-gold-deep);
}
#rl-btn-mapa .e-svg-base, #rl-btn-plano .e-svg-base {
  flex: 0 0 auto; width: 16px; height: 16px; padding: 0 !important; color: inherit;
}

/* El punto medio solo separa: no debe abrir la linea cuando el primer valor
   de la celda esta vacio (p. ej. una ruta sin duracion pero con horario). */
#rl-datos [id$="-2"] p::before { content: none; }
#rl-dt-modalidad:has(#rl-va-modalidad) #rl-va-modalidad-2 p::before,
#rl-dt-duracion:has(#rl-va-duracion) #rl-va-duracion-2 p::before { content: "· "; }

/* La cabecera del mapa reparte titular y boton a los extremos */
#rl-mapa-head { display: flex; }
#rl-mapa-head-txt { flex: 1 1 auto; }
/* El contenedor del titular del mapa nace al 100% y empuja el boton de linea */
#rl-mapa-head-txt { flex: 0 1 auto !important; width: auto !important; }
/* Lugar y autor apilados dentro de su envoltorio (el ::before es el numero) */
#rl-paradas li > div { flex: 1 1 auto; min-width: 0; }
/* El tema pone peso 600 en los valores de la barra; el mockup los da en 400 */
#rl-datos [id^="rl-va-"] p { font-weight: 400; }
#rl-paradas ul { font-family: var(--font-body); }
/* --- Boton de reserva ---------------------------------------------------
   Las rutas guiadas de la web vieja se reservan en Civitatis. El boton solo
   aparece si el campo Enlace trae una URL, igual que el del plano. Va en
   secundario (borde, sin relleno) para que el dorado siga siendo la accion
   principal, como en el mockup. */
#rl-btn-reserva {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 24px !important;
  background-color: transparent;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
#rl-btn-reserva:hover {
  background-color: var(--color-sand);
  border-color: var(--color-gold-deep);
  color: var(--color-gold-deep);
}
#rl-btn-reserva p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: inherit;
}
#rl-ic-reserva { flex: 0 0 auto; width: 16px; height: 16px; line-height: 0; color: inherit; }
#rl-ic-reserva svg { display: block; width: 16px; height: 16px; fill: none !important; stroke: currentColor !important; }

/* Sin URL, no se muestra. Y si es el unico boton, se pega al texto */
#rl-btn-reserva:not([href]) { display: none; }
#rl-caja-cta:not(:has(#rl-btn-plano[href])) #rl-btn-reserva { margin-top: 24px; }

/* La caja entera desaparece si no hay ni texto ni ningun boton con destino */
#rl-caja-cta:not(:has(#rl-cta-texto)):not(:has(#rl-btn-plano[href])):not(:has(#rl-btn-reserva[href])) { display: none; }

#rl-datos-ocultos-2 { display: none !important; }
/* --- Secciones vacias: el eyebrow no puede quedarse solo ----------------
   Una ficha sin "como funciona" o sin lista de paradas dejaba el rotulo
   colgado sobre la nada. Cada eyebrow desaparece con su seccion. */
#rl-col-texto:not(:has(#rl-como)):not(:has(#rl-como-titular)) #rl-eb-como { display: none; }
#rl-col-texto:not(:has(#rl-paradas)) #rl-eb-paradas { display: none; }
#rl-col-texto:not(:has(#rl-intro)):not(:has(#rl-intro-titular)) #rl-eb-intro { display: none; }

/* Sin mapa no hay seccion de mapa: ni rotulo, ni titular, ni boton, ni caja */
#rl-col-texto:not(:has(#rl-url-mapa)) #rl-mapa-head,
#rl-col-texto:not(:has(#rl-url-mapa)) #rl-mapa,
#rl-col-texto:not(:has(#rl-url-mapa)) #rl-mapa-pie { display: none; }
#rl-mapa-head:has(#rl-btn-mapa:not([href])) { display: none; }
#rl-mapa:not(:has(iframe)) { display: none; }

/* El primer bloque visible de la columna no lleva margen superior */
#rl-eb-como:first-child, #rl-eb-paradas:first-child { margin-top: 0; }
/* --- Correccion de dos condicionales mal apuntados ----------------------
   1. La regla vieja de la caja de acciones no contaba con el boton de
      reserva, asi que ocultaba la caja en las rutas que solo tienen reserva.
   2. Los portadores de URL viven en un contenedor propio, fuera de
      #rl-col-texto: preguntar por ellos desde ahi daba siempre falso y el
      mapa no se mostraba nunca. Se pregunta por lo que de verdad importa:
      si el enlace acabo teniendo href. */

#rl-caja-cta:not(:has(#rl-cta-texto)):not(:has(#rl-btn-plano[href])) { display: flex; }
#rl-caja-cta:not(:has(#rl-cta-texto)):not(:has(#rl-btn-plano[href])):not(:has(#rl-btn-reserva[href])) { display: none; }

#rl-col-texto:not(:has(#rl-url-mapa)) #rl-mapa-head,
#rl-col-texto:not(:has(#rl-url-mapa)) #rl-mapa,
#rl-col-texto:not(:has(#rl-url-mapa)) #rl-mapa-pie { display: revert; }

#rl-col-texto:not(:has(#rl-btn-mapa[href])) #rl-mapa-head,
#rl-col-texto:not(:has(#rl-btn-mapa[href])) #rl-mapa,
#rl-col-texto:not(:has(#rl-btn-mapa[href])) #rl-mapa-pie { display: none; }
#rl-mapa-head:has(#rl-btn-mapa[href]) { display: flex; }
/* El :not(:has()) de arriba tiene mas especificidad y dejaba la cabecera del
   mapa en block, con el boton cayendo bajo el titular en vez de a su derecha */
#rl-mapa-head:has(#rl-btn-mapa[href]) { display: flex !important; }
/* --- El horario pasa a celda propia ------------------------------------
   Estaba dentro de «Duración», como en el mockup, pero el mockup solo tenía
   que colocar «horario libre». Las rutas guiadas traen horarios de dos
   líneas («Sábados. A las 17:00h (de noviembre a mayo) y a las 18:00h…»),
   que ni caben ni son una duración. Es el caso de mejorar el mockup donde
   no aguanta: idéntico cuando el dato es corto, correcto cuando es largo. */
#rl-d-horario:not(:has(#rl-va-horario)) { display: none; }

/* El punto medio ya solo une modalidad + cómo se recorre */
#rl-dt-duracion:has(#rl-va-duracion) #rl-va-duracion-2 p::before { content: none; }
/* --- El boton de reserva va en el dorado del mockup ---------------------
   Lo habia puesto en secundario para que el del plano siguiera siendo la
   accion principal. Vanessa prefiere el dorado del mockup en todas las
   fichas, asi que los dos botones comparten estilo. */
#rl-btn-reserva {
  background-color: var(--color-gold) !important;
  color: var(--color-text-on-gold) !important;
  border-color: var(--color-gold) !important;
}
#rl-btn-reserva:hover {
  background-color: var(--color-gold-deep) !important;
  border-color: var(--color-gold-deep) !important;
  color: var(--color-ink-foreground) !important;
}
/* --- Las viñetas del mockup son circulos, no cuadrados -----------------
   Medido en el mockup: span de 6x6 con rounded-full, dorado, separado del
   texto por un gap de 12px y bajado 6px para alinear con la primera linea. */
#rl-adicional li { padding-left: 18px; }
#rl-adicional li::before {
  border-radius: 50%;
  top: 0.55em;
}
/* ===================================================================
   Repaso pedido por Vanessa (1/9, 11:00)
   =================================================================== */

/* 1. La barra se compacta sola. Con auto-fit las pistas vacias colapsan, asi
      que 3 datos ocupan 3 columnas anchas, 4 caben en una fila y 6 se
      reparten sin bajar de 200px. Antes eran 3 columnas fijas y con cuatro
      datos el cuarto se quedaba solo en una segunda fila. */
#rl-datos-in {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 24px 32px !important;
}
@media (max-width: 1024px) {
  #rl-datos-in { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
}
@media (max-width: 767px) {
  #rl-datos-in { grid-template-columns: 1fr !important; }
}

/* 2. El icono de la barra: mismo fallo que en la ficha de casa-museo, el
      contenedor nacia con medidas propias y mi regla empataba en
      especificidad. Se blinda aunque aqui salia bien, para que no dependa
      del orden de carga. */
#rl-datos-in [id^="rl-ic-"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 16px !important;
}

/* 3. Los eyebrows del heading v3 nacen en peso 600; el mockup los tiene en 400 */
#rl-migas p,
#rl-cuerpo [id^="rl-eb-"] p,
#rl-datos [id^="rl-et-"] p { font-weight: 400 !important; }

/* 4. Pie del mapa. Mockup: Jost 12.48px / 18.72 (1.5), ls 0.06em, color muted */
#rl-mapa-pie { margin-top: 12px; }
#rl-mapa-pie p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
/* Con minimo de 200px solo cabian 5 pistas (200x6 + 32x5 = 1360 > 1320) y el
   sexto dato se iba solo a una segunda fila. Con 180 caben los seis. */
#rl-datos-in { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
@media (max-width: 1024px) {
  #rl-datos-in { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }
}
@media (max-width: 767px) {
  #rl-datos-in { grid-template-columns: 1fr !important; }
}

/* Bandas de cierre, con las medidas de «Lugares recomendados» de casa-museo */
#rl-rec { background-color: var(--color-sand); -webkit-font-smoothing: antialiased; padding: 96px 0 !important; }
#rl-rec * { border-radius: 0; }
#rl-rec-in { flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  max-width: 1400px; margin: 0 auto; padding: 0 40px !important; }
#rl-rec-head { flex-flow: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 0 !important; }
#rl-rec-head-txt { flex: 0 1 auto; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0 !important; width: auto !important; max-width: 100%; }
#rl-rec-eb p { margin: 0; font-family: var(--font-body); font-size: .6875rem; font-weight: 400 !important;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.5; color: var(--color-gold-deep); }
#rl-rec-h2 h2 { margin: 16px 0 0; max-width: 20ch; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -.015em; color: var(--color-text); }
#rl-rec-link { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; width: fit-content;
  line-height: 0; color: var(--color-gold-deep); text-decoration: none;
  transition: color .25s, gap .25s; padding: 0 0 6px !important; }
#rl-rec-link:hover { color: var(--color-text); gap: 12px; }
#rl-rec-link p { margin: 0; font-family: var(--font-body); font-size: .875rem; letter-spacing: .06em;
  line-height: 1.4; color: inherit; }
#rl-rec-ic { flex: 0 0 16px !important; width: 16px !important; height: 16px !important;
  min-width: 0 !important; line-height: 0; color: inherit; padding: 0 !important; }
#rl-rec-ic svg { display: block; overflow: visible; stroke-width: 1.5;
  width: 16px !important; height: 16px !important; fill: none !important; stroke: currentcolor !important; }
@media (max-width: 1024px) {
  #rl-rec { padding: 80px 0 !important; }
  #rl-rec-in { padding: 0 24px !important; }
}
@media (max-width: 767px) {
  #rl-rec { padding: 56px 0 !important; }
  #rl-rec-in { padding: 0 20px !important; }
  #rl-rec-head { align-items: flex-start; }
}

/* Bandas de cierre, con las medidas de «Lugares recomendados» de casa-museo */
#rl-rel { background-color: var(--color-background); -webkit-font-smoothing: antialiased; padding: 96px 0 !important; }
#rl-rel * { border-radius: 0; }
#rl-rel-in { flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  max-width: 1400px; margin: 0 auto; padding: 0 40px !important; }
#rl-rel-head { flex-flow: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 0 !important; }
#rl-rel-head-txt { flex: 0 1 auto; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0 !important; width: auto !important; max-width: 100%; }
#rl-rel-eb p { margin: 0; font-family: var(--font-body); font-size: .6875rem; font-weight: 400 !important;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.5; color: var(--color-gold-deep); }
#rl-rel-h2 h2 { margin: 16px 0 0; max-width: 20ch; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -.015em; color: var(--color-text); }
#rl-rel-link { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; width: fit-content;
  line-height: 0; color: var(--color-gold-deep); text-decoration: none;
  transition: color .25s, gap .25s; padding: 0 0 6px !important; }
#rl-rel-link:hover { color: var(--color-text); gap: 12px; }
#rl-rel-link p { margin: 0; font-family: var(--font-body); font-size: .875rem; letter-spacing: .06em;
  line-height: 1.4; color: inherit; }
#rl-rel-ic { flex: 0 0 16px !important; width: 16px !important; height: 16px !important;
  min-width: 0 !important; line-height: 0; color: inherit; padding: 0 !important; }
#rl-rel-ic svg { display: block; overflow: visible; stroke-width: 1.5;
  width: 16px !important; height: 16px !important; fill: none !important; stroke: currentcolor !important; }
@media (max-width: 1024px) {
  #rl-rel { padding: 80px 0 !important; }
  #rl-rel-in { padding: 0 24px !important; }
}
@media (max-width: 767px) {
  #rl-rel { padding: 56px 0 !important; }
  #rl-rel-in { padding: 0 20px !important; }
  #rl-rel-head { align-items: flex-start; }
}

#rl-rec-grid { margin-top: 48px; }
#rl-rec-grid .elementor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* la banda mixta es una rejilla de tres bucles de uno: cada columna trae una familia */
#rl-rel-in > [id^="rl-rel-"]:not(#rl-rel-head):not(#rl-rel-in) { margin-top: 48px; }
#rl-rel-in { display: grid; grid-template-columns: 1fr; }
#rl-rel-mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
@media (max-width: 1024px) {
  #rl-rec-grid .elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #rl-rec-grid { margin-top: 32px; }
  #rl-rec-grid .elementor-grid { grid-template-columns: 1fr; }
}

/* la banda mixta: el encabezado ocupa la fila entera y debajo van las tres
   familias, un bucle de uno por columna */
#rl-rel-in { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px; align-items: start; }
#rl-rel-head { grid-column: 1 / -1; margin-bottom: 8px; }
#rl-rel-in > [id^="rl-rel-"]:not(#rl-rel-head) { margin-top: 0; }
#rl-rel-in .elementor-grid { grid-template-columns: 1fr !important; }
@media (max-width: 1024px) { #rl-rel-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { #rl-rel-in { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- El mapa interactivo necesita mas alto ----------
   La caja se diseno con 420px para una imagen estatica del mockup. El mapa
   propio trae su propia barra de navegacion abajo (Ciudad · Selecciones ·
   Recorrido · Paso a paso) y con 420 quedaba cortada.
   Medido: la barra ocupa 60px, asi que el mapa necesita al menos 560 para
   respirar. Se usa una altura fluida con tope, como el resto del sitio. */
#rl-mapa { height: clamp(420px, 62vh, 640px) !important; }
@media (max-width: 1024px) { #rl-mapa { height: clamp(400px, 58vh, 520px) !important; } }
@media (max-width: 767px)  { #rl-mapa { height: clamp(380px, 62vh, 460px) !important; } }

/* Los textos de los botones viajan en párrafos ocultos, como las URLs.
   Se esconden con la misma regla que los demás datos ocultos. */
#rl-txt-reserva, #rl-txt-plano, #rl-txt-mapa { display: none !important; }

/* En móvil, alto en dvh: con vh la barra del navegador deja fuera de pantalla
   la barra de opciones del mapa. */
@media (max-width: 767px) {
  #rl-mapa { height: clamp(380px, 62dvh, 460px) !important; }
}/* End custom CSS */