/* Start custom CSS *//* ============================================================
   VISTA DE MAPA A PANTALLA COMPLETA

   Una sola pagina para todas las rutas que tengan mapa: recibe el slug de la
   ruta en la direccion (?ruta=...) y el JS de la cabecera saca de ahi el
   titulo, los datos y la URL del mapa. Asi no hace falta crear una pagina por
   ruta ni duplicar nada.

   Lleva la cabecera y el pie del sitio, para que el mapa se sienta parte de la
   web y no una ventana a otro sitio.
   ============================================================ */

#mp-seccion {
  flex-direction: column;
  gap: 0;
  padding: 104px max(24px, calc((100% - 1400px) / 2 + 24px)) 56px;
  background-color: var(--color-background);
}

/* --- la barra de arriba: volver, titulo y datos --- */
#mp-barra {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}
#mp-volver {
  width: fit-content;
  flex: 0 0 auto;
  padding: 0 !important;
  text-decoration: none;
  margin-bottom: 6px;
}
#mp-volver-txt p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
/* la flecha de vuelta, como en el resto del sitio */
#mp-volver-txt p::before { content: "\2190"; margin-right: 8px; display: inline-block; transition: transform .25s ease; }
#mp-volver:hover #mp-volver-txt p::before { transform: translateX(-3px); }
#mp-volver:hover #mp-volver-txt p { color: var(--color-text); }
#mp-volver:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 4px; }

#mp-titulo h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
#mp-dato p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
#mp-dato:empty, #mp-dato p:empty { display: none; }

/* --- el mapa ---
   Ocupa lo que queda de pantalla por debajo de la cabecera y la barra, con un
   minimo para que nunca quede ahogado. El pie del sitio aparece al bajar. */
#mp-mapa {
  width: 100%;
  min-width: 0;
  height: max(520px, calc(100vh - 300px));
  padding: 0 !important;
  background-color: var(--color-sand);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
#mp-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
#mp-mapa:empty { display: none; }

/* mientras carga o si algo falla */
#mp-aviso {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
#mp-aviso a { color: var(--color-gold-deep); }

@media (max-width: 1024px) {
  #mp-seccion { padding: 96px 24px 48px; }
  #mp-mapa { height: max(460px, calc(100vh - 280px)); }
}
@media (max-width: 767px) {
  #mp-seccion { padding: 88px 20px 40px; }
  #mp-mapa { height: max(420px, calc(100vh - 260px)); }
}

/* === La cabecera, clara desde el principio ==============================
   Copiado de las paginas legales, que resuelven lo mismo: esta pagina no
   tiene hero oscuro, asi que la cabecera no debe arrancar transparente ni
   cambiar de color al bajar. Nace clara y se queda. */
/* === Cabecera fija en claro, sin transicion =============================
   La cabecera del Maquetador lleva animaciones de scroll pensadas para la
   home: arranca transparente sobre el hero oscuro y se aclara al bajar.
   En una pagina legal no hay hero, asi que ese estado inicial la dejaba
   grisacea sobre un fondo claro y luego cambiaba de color a mitad de scroll.
   El mockup no hace eso: aqui la cabecera nace ya clara y no se mueve
   (medido: color-surface al 95%, blur 8px, filete inferior, texto oscuro,
   identico arriba y despues de 600px de scroll).
   Se anulan las animaciones y se fijan los valores finales. */

.elementor-element-96a2278 {
  animation: none !important;
  background-color: color-mix(in srgb, var(--color-background) 95%, transparent) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  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;
}

.elementor-element-9e2ef75 {
  animation: none !important;
  border-color: var(--color-border) !important;
}

/* === El mapa, a toda la pantalla =========================================
   Sin barra de titulo ni enlace de vuelta: el mapa trae su propia navegacion
   y la cabecera del sitio ya deja volver a cualquier parte. Se gana toda esa
   altura para el mapa, que es a lo que se viene a esta pagina.

   La altura es la ventana menos la cabecera fija (80px): asi el mapa llena la
   pantalla de entrada y el pie del sitio queda justo debajo, al bajar.
   Los margenes laterales se quitan tambien: a pantalla completa, completa. */

#mp-barra { display: none !important; }

#mp-seccion {
  padding: 80px 0 0 !important;      /* solo el hueco de la cabecera fija */
  gap: 0;
}

#mp-mapa {
  height: calc(100vh - 80px) !important;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

/* la barra de administracion de WordPress empuja la cabecera, y con ella el mapa */
body.admin-bar #mp-mapa { height: calc(100vh - 112px) !important; }
@media (max-width: 782px) {
  body.admin-bar #mp-mapa { height: calc(100vh - 126px) !important; }
}

@media (max-width: 1024px) {
  #mp-seccion { padding: 80px 0 0 !important; }
  #mp-mapa { height: calc(100vh - 80px) !important; }
}
@media (max-width: 767px) {
  #mp-seccion { padding: 72px 0 0 !important; }
  #mp-mapa { height: calc(100vh - 72px) !important; }
}

/* El logo, el mismo que en la ficha con la cabecera ya clara ------------
   La cabecera de esta pagina nace clara y no hace la transicion de scroll,
   asi que el logo tampoco debe hacerla: va directamente el normal, el
   granate. Sin esto se queda la version en claro sobre fondo claro.
   (Al copiar el bloque de las paginas legales se corto justo antes de estas
   dos lineas.) */
#tl-logo-img       { animation: none !important; opacity: 1 !important; }
#tl-logo-img-claro { animation: none !important; opacity: 0 !important; }

/* === Sin pie y sin scroll ===============================================
   Esta pagina es el mapa y nada mas: el pie del sitio obligaba a bajar y aqui
   no aporta, porque el mapa tiene su propia navegacion y la cabecera ya deja
   ir a cualquier parte. Quitandolo, la pagina cabe exacta en la ventana. */

.elementor-location-footer { display: none !important; }

/* que no quede ni un pixel de scroll por redondeos */
html, body { overflow-y: hidden; height: 100%; }
body.admin-bar { height: calc(100% - 32px); }

/* === La cabecera en movil ================================================
   Mas baja y con el rotulo «Mapa literario» junto al logo, para que se sepa
   donde se esta sin ocupar una barra entera. Solo en esta pagina. */

@media (max-width: 767px) {
  /* la barra, mas fina: de 60 a 52 */
  .elementor-element-71a2db0 { min-height: 52px !important; height: 52px !important; }
  .elementor-element-96a2278 { min-height: 52px !important; }

  /* el logo, proporcionalmente mas pequeno */
  #tl-logo-img, #tl-logo-img-claro { height: 34px !important; }
  .elementor-element-b48c7be { align-items: center; }

  /* el rotulo, en la paleta del sitio */
  .elementor-element-b48c7be::after {
    content: "Mapa literario";
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
    white-space: nowrap;
    align-self: center;
  }

  #mp-seccion { padding-top: 52px !important; }
  #mp-mapa { height: calc(100vh - 52px) !important; }
  body.admin-bar #mp-mapa { height: calc(100vh - 98px) !important; }
}

/* en escritorio y tablet, la ventana entera menos la cabecera */
#mp-mapa { height: calc(100vh - 80px) !important; }
body.admin-bar #mp-mapa { height: calc(100vh - 112px) !important; }
@media (max-width: 1024px) and (min-width: 768px) {
  #mp-mapa { height: calc(100vh - 80px) !important; }
}

/* === Corrección de orden ================================================
   La regla de escritorio quedó DESPUÉS del bloque de móvil y, al tener la
   misma especificidad, ganaba también en móvil: la cabecera seguía en 80px.
   Se repite aquí el bloque de móvil, al final, para que gane él. */

@media (max-width: 767px) {
  /* la barra de la cabecera: hay varios contenedores que fijan el alto */
  .elementor-location-header .elementor-element-96a2278,
  .elementor-location-header .elementor-element-71a2db0 {
    min-height: 52px !important;
    height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #tl-logo-img, #tl-logo-img-claro { height: 34px !important; }

  #mp-seccion { padding-top: 52px !important; }
  #mp-mapa { height: calc(100vh - 52px) !important; }
  body.admin-bar #mp-mapa { height: calc(100vh - 98px) !important; }
}

/* El rótulo, AL LADO del logo y no debajo -------------------------------
   El enlace del logo es un flex en columna (lleva la imagen y el texto
   accesible apilados), así que el ::after caía debajo. Se pasa a fila.
   Es el mismo tropiezo de siempre con los contenedores de Elementor: la
   dirección hay que ponerla explícita. */
@media (max-width: 767px) {
  .elementor-location-header .elementor-element-b48c7be {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 0 !important;
  }
  .elementor-location-header .elementor-element-b48c7be::after {
    align-self: center !important;
    line-height: 1.1;
  }
}

/* El rótulo, al lado del logo — la buena ---------------------------------
   El enlace del logo NO es un flexbox: es una REJILLA, porque las dos
   versiones del logo (la normal y la clara) se superponen en la misma celda
   para poder cruzarse al hacer scroll. Por eso `flex-direction: row` no hacía
   nada y el ::after caía en una fila nueva.
   Se le da una segunda columna y se coloca ahí, en la misma fila. */
@media (max-width: 767px) {
  .elementor-location-header .elementor-element-b48c7be {
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    width: auto !important;
  }
  .elementor-location-header .elementor-element-b48c7be > * { grid-area: 1 / 1; }
  .elementor-location-header .elementor-element-b48c7be::after {
    grid-area: 1 / 2 !important;
    align-self: center !important;
  }
}

/* === El rótulo «Mapa literario», centrado en la barra ====================
   Antes colgaba del enlace del logo, así que solo cabía a su derecha y solo
   se puso en móvil. Ahora cuelga de la barra entera y va **centrado de
   verdad**, horizontal y verticalmente, en todos los tamaños.

   La barra es `position: relative` y reparte logo y menú con space-between,
   así que un absoluto centrado no le quita el sitio a ninguno de los dos.
   Con pointer-events: none no estorba a los clics del menú. */

/* fuera el del logo, que era solo de móvil */
.elementor-location-header .elementor-element-b48c7be::after { content: none !important; }
.elementor-location-header .elementor-element-b48c7be {
  grid-template-columns: auto !important;
  width: auto !important;
}

.elementor-location-header .elementor-element-71a2db0::after {
  content: "Mapa literario";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* en móvil hay menos hueco entre el logo y la hamburguesa: se aprieta un poco */
@media (max-width: 767px) {
  .elementor-location-header .elementor-element-71a2db0::after {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
}

/* El logo en móvil: más pequeño y centrado en la barra --------------------
   Con 34px sobre una barra de 52 quedaba pegado abajo, casi saliéndose. Se
   baja a 28 y se centra de verdad: el enlace deja de estirarse a todo el alto
   (align-self) y su contenido se centra dentro. */
@media (max-width: 767px) {
  #tl-logo-img, #tl-logo-img-claro { height: 28px !important; }

  .elementor-location-header .elementor-element-b48c7be {
    align-self: center !important;
    align-items: center !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* la fila de la barra centra a sus hijos, no los estira */
  .elementor-location-header .elementor-element-71a2db0 {
    align-items: center !important;
  }
}

/* En móvil el rótulo va tras el logo, no en el centro ---------------------
   Medido a 390px: la barra útil son 370 y su centro cae en 185, pero el logo
   llega hasta 188. Centrado en la barra se solapaba con el logo.
   Así que en móvil se ancla a la izquierda, justo detrás del logo, y sigue
   centrado verticalmente. En tablet y escritorio hay hueco de sobra y se
   queda centrado en la barra. */
@media (max-width: 767px) {
  .elementor-location-header .elementor-element-71a2db0::after {
    left: 152px;                 /* el logo mide 128 + 24 de aire */
    transform: translateY(-50%);
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
  }
}
@media (max-width: 480px) {
  .elementor-location-header .elementor-element-71a2db0::after {
    left: 130px;
    padding-left: 10px;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }
  #tl-logo-img, #tl-logo-img-claro { height: 26px !important; }
}

/* === El rótulo, centrado en el HUECO (no en la barra) ====================
   Centrarlo en el centro de la barra lo dejaba pegado al menú en escritorio
   —el menú ocupa la mitad derecha— y solapado con el logo en móvil.

   Lo que hay que centrar es el hueco ENTRE el logo y el menú, y eso lo
   resuelve el propio flex: el rótulo deja de ser absoluto y pasa a ser un
   hijo más de la barra, con `order` para colocarse en medio y `flex: 1` para
   quedarse con el hueco que sobra. El texto se centra dentro.

   Vale igual en escritorio, tablet y móvil, sin medidas a mano. */

.elementor-location-header .elementor-element-71a2db0 { align-items: center !important; }

/* el logo primero, el rótulo en medio, el menú al final */
.elementor-location-header .elementor-element-b48c7be { order: 0 !important; }
.elementor-location-header .elementor-element-09a0934,
.elementor-location-header .elementor-element-e1da398 { order: 2 !important; }

.elementor-location-header .elementor-element-71a2db0::after {
  content: "Mapa literario";
  order: 1;
  position: static;            /* deja de ser absoluto */
  transform: none;
  left: auto; top: auto;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  align-self: center;
  padding: 0 16px;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

@media (max-width: 767px) {
  .elementor-location-header .elementor-element-71a2db0::after {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    padding: 0 8px;
  }
}

/* El logo se salía por abajo: la altura iba al contenedor, no a la imagen ---
   `#tl-logo-img` es un DIV que envuelve al `<img>`. Poniéndole la altura a él,
   la imagen de dentro seguía en sus 44 px y desbordaba 4 px por debajo de la
   barra: la caja estaba centrada pero el globo se salía.
   La altura va a la imagen, y el contenedor se adapta. */
@media (max-width: 899px) {
  #tl-logo-img, #tl-logo-img-claro { height: auto !important; }
  #tl-logo-img img, #tl-logo-img-claro img {
    height: 28px !important;
    width: auto !important;
    max-height: 28px !important;
    display: block;
  }
}
@media (max-width: 480px) {
  #tl-logo-img img, #tl-logo-img-claro img {
    height: 26px !important;
    max-height: 26px !important;
  }
}

/* El rótulo, con más cuerpo -----------------------------------------------
   A 11 px se leía pequeño para lo que es: el nombre de la sección en la que
   estás. Sube a 15 en escritorio y a 13 en tablet; en móvil solo un punto,
   que ahí el hueco entre el logo y la hamburguesa es de 166 px. */
.elementor-location-header .elementor-element-71a2db0::after {
  font-size: 0.9375rem !important;      /* 15px */
  letter-spacing: 0.12em !important;
}
@media (max-width: 1023px) {
  .elementor-location-header .elementor-element-71a2db0::after {
    font-size: 0.8125rem !important;    /* 13px */
    letter-spacing: 0.1em !important;
  }
}
@media (max-width: 767px) {
  .elementor-location-header .elementor-element-71a2db0::after {
    font-size: 0.625rem !important;     /* 10px */
    letter-spacing: 0.08em !important;
  }
}

/* === El alto en un móvil de verdad: dvh, no vh =========================
   En un móvil real la barra del navegador aparece y desaparece al hacer
   scroll, y `100vh` mide **la ventana sin esa barra**: siempre más alto que
   lo que se ve. Resultado: el mapa se sale por abajo y su barra de opciones
   —Ciudad · Selecciones · Recorrido · Paso a paso— queda fuera de pantalla.
   En el navegador de escritorio no pasa, por eso no se veía aquí.

   `100dvh` mide el alto **que hay ahora mismo**, con la barra puesta, y se
   reajusta cuando cambia. Se deja `vh` antes como respaldo para navegadores
   antiguos: el que entienda dvh usará la segunda. */

#mp-mapa { height: calc(100vh - 80px) !important; }
#mp-mapa { height: calc(100dvh - 80px) !important; }
body.admin-bar #mp-mapa { height: calc(100dvh - 112px) !important; }

@media (max-width: 767px) {
  #mp-mapa { height: calc(100vh - 52px) !important; }
  #mp-mapa { height: calc(100dvh - 52px) !important; }
  body.admin-bar #mp-mapa { height: calc(100dvh - 98px) !important; }
}

/* y que la página no pueda crecer más que la ventana */
html, body { height: 100dvh; overflow: hidden; }/* End custom CSS */