.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-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* ============================================================
   CABECERA — hoja reescrita y ordenada
   Sustituye a las capas acumuladas de sucesivas iteraciones, que se
   contradecian entre si y hacian imposible razonar sobre la especificidad.
   Regla que aprendi por las malas: un !important de autor gana a una
   animacion, asi que ninguna propiedad animada puede llevarlo.
   ============================================================ */

/* --- Animaciones dirigidas por scroll (sin JavaScript) ------------------ */

@keyframes tl-fondo   { to { background-color: color-mix(in srgb, var(--color-background) 95%, transparent); } }
@keyframes tl-texto   { to { color: var(--color-text); } }
@keyframes tl-borde   { to { border-color: var(--color-border); } }
@keyframes tl-filete  { to { box-shadow: 0 1px 0 0 var(--color-border); } }

/* --- Cabecera: base comun ---------------------------------------------- */

.elementor-element-96a2278 {
  position: fixed;
  top: 0;
  padding: 0;
  z-index: 50;

  /* El filete se hace con box-shadow, no con border: asi no depende de un
     border-bottom que otras reglas puedan bloquear con !important. */
  box-shadow: 0 1px 0 0 transparent;

  animation: tl-fondo linear both, tl-filete linear both;
  animation-timeline: scroll(root), scroll(root);
  animation-range: 0 40px, 0 40px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.elementor-element-96a2278 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* El logo, los enlaces y el icono de la hamburguesa se oscurecen al bajar.
   El ".COM" se queda dorado a proposito. */
.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: tl-texto linear both;
  animation-timeline: scroll(root);
  animation-range: 0 40px;
}

.elementor-element-9e2ef75 {
  animation: tl-borde linear both;
  animation-timeline: scroll(root);
  animation-range: 0 40px;
}

/* --- Hueco de la barra de administracion de WordPress -------------------
   Solo lo ve quien tiene sesion iniciada. Por debajo de 600px la barra pasa
   a absolute y el hueco deja de ser constante: de eso se encarga el script,
   que escribe el "top" en linea. */

body.admin-bar .elementor-element-96a2278 { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .elementor-element-96a2278 { top: 46px; } }

/* --- Medidas que los valores por defecto de Elementor pisaban ----------- */

.elementor-element-393fe17 {              /* divisor: e-div-block trae min-width 30px */
  min-width: 1px !important;
  width: 1px !important;
  flex: 0 0 1px !important;
}

.elementor-element-9e2ef75 {              /* boton de busqueda: se encogia por flex */
  flex: 0 0 36px !important;
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
}

/* Los contenedores-enlace y los flexbox nacen al 100% de ancho */
.elementor-element-96a2278 a.e-con,
.elementor-element-09a0934,
.elementor-element-4f5cb02 {
  width: fit-content !important;
  flex: 0 0 auto !important;
}

/* Un svg en linea reserva el hueco del descendente y no queda centrado */
.elementor-element-96a2278 svg { display: block; }
.elementor-element-9e2ef75 > * {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* --- Tipografia, siempre en rem ---------------------------------------- */

.elementor-element-b48c7be > *:first-child { font-size: 1.5rem; }    /* TurismoLiterario */
.elementor-element-b48c7be > *:last-child  { font-size: 0.7rem; }    /* .COM */
.elementor-element-4f5cb02 > *             { font-size: 0.819rem; }  /* enlaces */
.elementor-element-8edc291 > *             { font-size: 0.875rem; }  /* Buscar */

/* La fila "Buscar" solo existe en el panel movil */
.elementor-element-8edc291 { display: none; }

/* El boton de hamburguesa solo existe en movil */
.elementor-element-e1da398 {
  display: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  line-height: 0;
}

/* ============================================================
   MOVIL — por debajo de 1024px
   ============================================================ */

@media (max-width: 1023px) {

  /* La navegacion se guarda; la abre la hamburguesa */
  .elementor-element-4f5cb02 { display: none; }
  .elementor-element-e1da398 { display: flex; }

  /* La lupa circular y el divisor salen de la cabecera: se solapaban con el
     logo en pantallas estrechas. La busqueda reaparece dentro del panel. */
  .elementor-element-9e2ef75,
  .elementor-element-393fe17 { display: none !important; }

  .elementor-element-09a0934 { gap: 12px !important; }

  /* La cabecera se esconde al bajar y vuelve al subir (clase desde el script) */
  .elementor-element-96a2278 { transition: transform 320ms ease; }
  .elementor-element-96a2278.oculta { transform: translateY(-140%); }

  /* --- Panel desplegable ------------------------------------------------
     Reutiliza el mismo <aside> que la navegacion de escritorio: una sola
     fuente de verdad para los cinco destinos. */

  .elementor-element-96a2278.menu-abierto .elementor-element-4f5cb02 {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: 4px 20px 12px;
  }

  .elementor-element-96a2278.menu-abierto .elementor-element-4f5cb02 > * {
    padding-block: 12px;
    border-bottom: 1px solid var(--color-border);
  }
  .elementor-element-96a2278.menu-abierto .elementor-element-4f5cb02 > *:last-child { border-bottom: none; }

  /* El panel tiene fondo claro: el texto va oscuro y sin animacion de scroll */
  .elementor-element-96a2278.menu-abierto .elementor-element-4f5cb02 *,
  .elementor-element-96a2278.menu-abierto .elementor-element-4f5cb02 a {
    color: var(--color-text) !important;
    animation: none !important;
    font-size: 0.875rem !important;
  }

  .elementor-element-96a2278.menu-abierto .elementor-element-8edc291 {
    display: flex !important;
    width: fit-content !important;
    padding: 0 !important;
  }
}

/* Padding lateral: 40px en escritorio, 20px en movil (spec seccion 4) */
@media (max-width: 767px) {
  .elementor-element-71a2db0 { padding-inline: 20px !important; }
}
/* === Escritorio (>=1024px) ===
   La fila "Buscar" y la hamburguesa pertenecen SOLO al menu movil.
   Al montar el movil se les dieron reglas dentro de @media (max-width:1023px)
   pero nunca se ocultaron por encima: se colaban en la barra de escritorio y,
   al no caber, comprimian el nav y partian "Rutas literarias" y "Casas-museo".
   Referencia medida en el mockup a 1440: nav 571x36, gap 32, enlaces en una linea. */
@media (min-width: 1024px) {
  .elementor-element-8edc291,
  .elementor-element-e1da398 { display: none !important; }

  /* ningun enlace del nav se parte ni se encoge */
  .elementor-element-4f5cb02 > * { flex: 0 0 auto; white-space: nowrap; }

  /* mockup: 32px entre nav, filete y lupa (aqui son hermanos, no hijos del nav) */
  .elementor-element-09a0934 { gap: 32px !important; }
}
/* --- Ajuste fino contra el mockup (medido a 1440) ---------------------- */

/* Los enlaces del nav no llevan clase global de tipografia, asi que heredaban
   la fuente del tema (-apple-system) en vez de Jost: por eso median mas que
   en el mockup (Destinos 60px frente a 53px). Se enlazan a la variable, no
   se escribe la fuente a mano. */
.elementor-element-4f5cb02 > span,
.elementor-element-4f5cb02 > span a,
.elementor-element-8edc291 p { font-family: var(--font-body); }

/* Logotipo. Mockup: 24px con interlineado 1, ls -0.025em y 8px de separacion
   respecto al ".COM". Llevan !important porque la clase local atomica que
   Elementor emite despues empata en especificidad (0,1,0) y ganaria por orden. */
.elementor-element-b48c7be { gap: 8px !important; }
.elementor-element-b48c7be > *:first-child {
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}
/* --- Panel movil: contexto de posicionamiento -------------------------
   El panel es position:absolute con left:0 / right:0 esperando medir contra
   la cabecera, pero el ancestro posicionado mas cercano era el bloque de la
   derecha (.09a0934), que Elementor deja en position:relative y solo mide
   36x36: el menu salia como una columna de 40px pegada a la hamburguesa con
   el texto cortado. Poniendolo estatico mientras el panel esta abierto, la
   referencia pasa a ser la cabecera (fixed) y el panel ocupa todo el ancho. */
@media (max-width: 1023px) {
  .elementor-element-96a2278.menu-abierto .elementor-element-09a0934 { position: static; }
}
/* El inner de la cabecera tambien es relative y tiene los 10px de padding
   por defecto de los contenedores atomicos: dejaba el panel en 355px con
   10px de margen a cada lado. Estatico tambien, para que el panel mida
   contra la cabecera y llegue de borde a borde. */
@media (max-width: 1023px) {
  .elementor-element-96a2278.menu-abierto .elementor-element-71a2db0 { position: static; }
}
/* ===================================================================
   Consistencia del menu movil en TODO el sitio
   -------------------------------------------------------------------
   Las reglas de arriba ocultan el nav y la fila "Buscar" sin !important,
   asi que empatan en especificidad (0,1,0) con la clase local atomica que
   Elementor emite despues y pierden por orden de carga. En la home no se
   notaba porque su propio CSS repetia la regla con !important; en las
   legales, Contacto, Acerca de y las fichas nuevas el nav de escritorio se
   colaba a 390px.
   Es el mismo empate ya documentado para las clases globales.
   =================================================================== */

/* Base: solo existen dentro del panel movil */
.elementor-element-8edc291 { display: none !important; }
.elementor-element-e1da398 { display: none !important; }

@media (max-width: 1023px) {
  /* La navegacion se guarda; la abre la hamburguesa */
  .elementor-element-4f5cb02 { display: none !important; }
  .elementor-element-e1da398 { display: flex !important; }

  /* La lupa suelta y el divisor salen de la barra: se solapaban con el logo */
  .elementor-element-9e2ef75,
  .elementor-element-393fe17 { display: none !important; }

  /* Con el panel abierto reaparecen el nav y la fila Buscar */
  .elementor-element-96a2278.menu-abierto .elementor-element-4f5cb02 { display: flex !important; }
  .elementor-element-96a2278.menu-abierto .elementor-element-8edc291 { display: flex !important; }
}

@media (min-width: 1024px) {
  .elementor-element-4f5cb02 { display: flex !important; }
  .elementor-element-8edc291,
  .elementor-element-e1da398 { display: none !important; }
}

/* ===================================================================
   El panel del menú móvil, cotejado con el mockup (1/9)
   Tres diferencias medidas a 390:
   - el panel lleva 8px arriba y 24 abajo; el nuestro tenía 4 y 12
   - «Buscar» va en dorado (color-gold-deep), no en el color del texto
   - la lupa, igual: dorada, no oscura
   =================================================================== */
#tl-nav { padding: 8px 20px 24px !important; }
#tl-nav .elementor-element-8edc291 p,
#tl-nav .elementor-element-2e784d4,
#tl-nav .elementor-element-2e784d4 * { color: var(--color-gold-deep) !important; }
#tl-nav .elementor-element-a59a146 svg,
#tl-nav .elementor-element-a59a146 svg * { color: var(--color-gold-deep) !important;
                                            stroke: currentColor; fill: none; }

#tl-nav .e-svg-base, #tl-nav .e-svg-base svg,
#tl-nav .e-svg-base svg * { color: var(--color-gold-deep) !important; }
#tl-nav .e-svg-base svg { stroke: currentColor !important; fill: none !important; }
/* el salto entre enlaces: 45 en el mockup */
#tl-nav > span { min-height: 45px !important; }

/* la regla del salto solo vale para el panel desplegable, no para el nav
   de escritorio, que es el mismo elemento puesto en fila */
#tl-nav > span { min-height: 0 !important; }
@media (max-width: 1023px) {
  #tl-nav > span { min-height: 45px !important; }
}

/* ===================================================================
   El logo de la marca sustituye al texto de la cabecera (1/9)
   Van dos versiones superpuestas: la clara mientras la cabecera está
   sobre el hero oscuro, y la normal cuando se aclara al bajar. Usan la
   misma línea de tiempo de scroll que el resto de la cabecera, así que
   el cambio ocurre a la vez y sin salto.
   =================================================================== */
.elementor-element-b48c7be { position: relative; gap: 0 !important; }
/* el texto que había antes se queda en el marcado por accesibilidad */
.elementor-element-1341a6f, .elementor-element-3341dff {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#tl-logo-img, #tl-logo-img-claro { margin: 0; padding: 0 !important; line-height: 0; }
#tl-logo-img img, #tl-logo-img-claro img {
  display: block; height: 36px; width: auto;
}
#tl-logo-img-claro { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
/* la clara se ve al principio y se desvanece al bajar; la normal al revés */
@keyframes tl-logo-claro { from { opacity: 1; } to { opacity: 0; } }
@keyframes tl-logo-normal { from { opacity: 0; } to { opacity: 1; } }
#tl-logo-img-claro {
  animation: tl-logo-claro linear both;
  animation-timeline: scroll(root); animation-range: 0 120px;
}
#tl-logo-img {
  animation: tl-logo-normal linear both;
  animation-timeline: scroll(root); animation-range: 0 120px;
}
@media (max-width: 767px) {
  #tl-logo-img img, #tl-logo-img-claro img { height: 30px; }
}

/* Corrección: los elementos atómicos no llevan la clase
   `elementor-element-<id>` sino `e-<id>-<hash>`, así que el texto del logo no
   se estaba ocultando y se veían las tres cosas a la vez. */
[class*="e-1341a6f"], [class*="e-3341dff"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; margin: 0 !important; padding: 0 !important;
}
/* las dos versiones del logo, una encima de otra */
[class*="e-b48c7be"] {
  position: relative; display: grid !important; place-items: center start;
  width: auto !important; min-height: 36px;
}
#tl-logo-img, #tl-logo-img-claro { grid-area: 1 / 1; margin: 0; padding: 0 !important; }
@media (max-width: 767px) { [class*="e-b48c7be"] { min-height: 30px; } }

#tl-logo-img img, #tl-logo-img-claro img { height: 48px !important; }
[class*="e-b48c7be"] { min-height: 48px; }
@media (max-width: 1023px) {
  #tl-logo-img img, #tl-logo-img-claro img { height: 40px !important; }
  [class*="e-b48c7be"] { min-height: 40px; }
}
@media (max-width: 767px) {
  #tl-logo-img img, #tl-logo-img-claro img { height: 34px !important; }
  [class*="e-b48c7be"] { min-height: 34px; }
}

/* el logo, más presente: la cabecera mide 80 y admite bastante más */
#tl-logo-img img, #tl-logo-img-claro img { height: 52px !important; }
[class*="e-b48c7be"] { min-height: 52px; }
@media (max-width: 1023px) {
  #tl-logo-img img, #tl-logo-img-claro img { height: 46px !important; }
  [class*="e-b48c7be"] { min-height: 46px; }
}
@media (max-width: 767px) {
  #tl-logo-img img, #tl-logo-img-claro img { height: 44px !important; }
  [class*="e-b48c7be"] { min-height: 44px; }
}

/* En escritorio los enlaces del menú se pegaban arriba dentro de su span y
   quedaban 8px por encima del centro del logo. */
@media (min-width: 1024px) {
  #tl-nav { align-items: center !important; }
  #tl-nav > span { display: flex !important; align-items: center !important; }
  #tl-nav > span > a { display: block; }
}

/* El padding del panel desplegable (8/20/24) solo vale en móvil: en
   escritorio empujaba el menú 8px por encima del centro del logo. */
@media (min-width: 1024px) {
  #tl-nav { padding: 0 !important; }
}/* End custom CSS */