.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 );}/* Start custom CSS for text-editor, class: .elementor-element-c1ede41 *//* «TurismoLiterario.com» es una sola palabra de veinte caracteres: con el
   mínimo de 2.75rem no cabía en el móvil y se partía como «TurismoLiterario.co / m».
   En el móvil el tamaño sigue al ancho para que la palabra entre entera
   (8.6 = ancho de la palabra en ems, con margen). 11-oct-2026. */
@media (max-width: 767px) {
  .elementor-3859 .elementor-element.elementor-element-c1ede41 .ad-hero-h1 { font-size: min(2.75rem, calc((100vw - 2.5rem) / 8.6)); }
}/* End custom CSS */
/* Start custom CSS *//* ============================================================
   ACERCA DE — calcado del mockup de Lovable (medido a 1440)
   Cinco secciones: hero a sangre, banda de preguntas, biografia a dos
   columnas, rejilla de curiosidades y cierre a dos columnas.
   ============================================================ */

body { background-color: var(--color-background); }

.elementor-page-3859, .elementor-page-3859 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 1. Hero a sangre (780px) -----------------------------------------
   La imagen va de fondo con el degradado del mockup superpuesto: es
   decorativa y el h1 ya dice de que va la pagina. */

#ad-hero {
  position: relative;
  min-height: 780px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 96px;
  box-sizing: border-box;
  font-family: var(--font-body);
}

#ad-hero-sec {
  position: relative;
  width: 100%;
  background-image:
    linear-gradient(to top,
      color-mix(in srgb, var(--color-ink) 85%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 40%, transparent) 50%,
      color-mix(in srgb, var(--color-ink) 25%, transparent) 100%),
    url("https://www.turismoliterario.com/wp-content/uploads/2026/08/hero-home-turismo-literario.webp");
  background-size: cover;
  background-position: center;
  padding: 0 !important;
}

.ad-hero-eyebrow {
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.24em;
  color: var(--color-gold);
  margin: 0;
}

.ad-hero-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 4.9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-ink-foreground);
  margin: 20px 0 0;
  max-width: 806px;
}

.ad-hero-intro {
  font-size: 1.05rem;
  line-height: 1.625;
  color: color-mix(in srgb, var(--color-ink-foreground) 85%, transparent);
  margin: 24px 0 0;
  max-width: 584px;
}

/* --- 2. Banda de preguntas -------------------------------------------- */

#ad-preguntas-sec {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 !important;
  width: 100%;
}

#ad-preguntas {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 40px;
  box-sizing: border-box;
  font-family: var(--font-body);
}

#ad-preguntas ul { margin: 0; padding: 0; list-style: none; }

#ad-preguntas li {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.375;
  color: var(--color-text);
  margin: 0;
}

.ad-preguntas-cierre {
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.22em;
  color: var(--color-gold-deep);
  margin: 36px 0 0;
}

/* --- 3. Biografia a dos columnas -------------------------------------- */

#ad-bio-sec {
  display: grid;
  grid-template-columns: 410fr 554fr;
  gap: 56px;
  align-items: start;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 40px !important;
  box-sizing: border-box;
}

#ad-bio-col-img { padding: 0 !important; gap: 0 !important; }

#ad-bio-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

#ad-bio-pie {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.625;
  color: var(--color-text-muted);
  margin: 16px 0 0;
}

#ad-bio-txt { font-family: var(--font-body); }

.ad-eyebrow {
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.24em;
  color: var(--color-gold-deep);
  margin: 0;
}

#ad-bio-txt h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 20px 0 0;
}

#ad-bio-txt p {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 20px 0 0;
}
#ad-bio-txt > p.ad-eyebrow { margin-top: 0; }
#ad-bio-txt h2 + p { margin-top: 28px; }

.ad-enlace { margin-top: 32px !important; }

.ad-enlace a {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--color-gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold-deep);
  padding-bottom: 4px;
  transition: color 300ms ease, border-color 300ms ease;
}
.ad-enlace a:hover { color: var(--color-text); border-color: var(--color-text); }

/* --- 4. Curiosidades --------------------------------------------------- */

#ad-curio-sec {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0 !important;
  width: 100%;
}

#ad-curio {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 40px;
  box-sizing: border-box;
  font-family: var(--font-body);
}

#ad-curio h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
  max-width: 649px;
}

.ad-curio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  margin-top: 48px;
}

.ad-curio-grid .n {
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.22em;
  color: var(--color-gold-deep);
  margin: 0;
}

.ad-curio-grid h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.375;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 12px 0 0;
}

.ad-curio-grid div > p:last-child {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* --- 5. Cierre a dos columnas ----------------------------------------- */

#ad-cierre-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 40px !important;
  box-sizing: border-box;
}

#ad-cierre-col-img { padding: 0 !important; }

#ad-cierre-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

#ad-cierre { font-family: var(--font-body); }

#ad-cierre h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.7vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
}

#ad-cierre > p {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 20px 0 0;
}

.ad-redes { margin-top: 32px !important; display: flex; gap: 24px; }

.ad-redes a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 300ms ease;
}
.ad-redes a:hover { color: var(--color-gold-deep); }

/* --- Cortes ------------------------------------------------------------ */

@media (max-width: 1023px) {
  #ad-bio-sec { grid-template-columns: 1fr; gap: 40px; }
  #ad-cierre-sec { grid-template-columns: 1fr; gap: 32px; }
  #ad-bio-foto img { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
  #ad-hero { min-height: 560px; padding: 0 20px 64px; }
  #ad-preguntas { padding: 64px 20px; }
  #ad-bio-sec { padding: 64px 20px !important; }
  #ad-curio { padding: 64px 20px; }
  .ad-curio-grid { grid-template-columns: 1fr; gap: 36px; }
  #ad-cierre-sec { padding: 64px 20px !important; }
}
/* Correccion: los contenedores de seccion se crearon por importacion y no
   llevan id CSS propio, asi que las reglas #ad-*-sec no apuntaban a nada.
   Se usan las clases que Elementor asigna a cada elemento, que son estables
   porque los elementos ya existen (no se regeneran). */

.elementor-element-93d52f4 {          /* hero */
  position: relative;
  width: 100%;
  padding: 0 !important;
  background-image:
    linear-gradient(to top,
      color-mix(in srgb, var(--color-ink) 85%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 40%, transparent) 50%,
      color-mix(in srgb, var(--color-ink) 25%, transparent) 100%),
    url("https://www.turismoliterario.com/wp-content/uploads/2026/08/hero-home-turismo-literario.webp");
  background-size: cover;
  background-position: center;
}

.elementor-element-923993c {          /* banda de preguntas */
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 !important;
  width: 100%;
}

.elementor-element-df98e34 {          /* biografia */
  display: grid !important;
  grid-template-columns: 410fr 554fr;
  gap: 56px;
  align-items: start;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 40px !important;
  box-sizing: border-box;
}

.elementor-element-a05c185 { padding: 0 !important; gap: 0 !important; }

.elementor-element-d25a34d {          /* curiosidades */
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0 !important;
  width: 100%;
}

.elementor-element-1074544 {          /* cierre */
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 40px !important;
  box-sizing: border-box;
}

.elementor-element-229bf59 { padding: 0 !important; }

@media (max-width: 1023px) {
  .elementor-element-df98e34 { grid-template-columns: 1fr; gap: 40px; }
  .elementor-element-1074544 { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  .elementor-element-df98e34 { padding: 64px 20px !important; }
  .elementor-element-1074544 { padding: 64px 20px !important; }
}
/* Tres correcciones tras medir:
   1. add-atomic-image pone el css_id en el propio <img>, no en un contenedor,
      asi que "#ad-bio-foto img" no apuntaba a nada. El body.elementor-page-3859 es el id solo.
   2. Elementor fija max-width:100% en sus contenedores y ganaba al 1100px.
   3. La columna de la foto nacia en fila: la imagen y su pie salian en
      paralelo (el pie en una tira de 109px de ancho y 376 de alto). */

#ad-bio-foto,
#ad-cierre-foto {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
#ad-bio-foto { aspect-ratio: 3 / 4; }
#ad-cierre-foto { aspect-ratio: 4 / 3; }

.elementor-element-df98e34,
.elementor-element-1074544 { max-width: 1100px !important; }

.elementor-element-a05c185,
.elementor-element-229bf59 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

@media (max-width: 1023px) {
  #ad-bio-foto { aspect-ratio: 4 / 3; }
}
/* El contenido del hero salia arriba, tapado por la cabecera fija: yo habia
   puesto el flex y el justify-content en el widget de texto, cuyo unico hijo
   es su propio contenedor, asi que no empujaba nada. Van en la seccion. */

.elementor-element-93d52f4 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 780px;
}

#ad-hero {
  min-height: 0;
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 96px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .elementor-element-93d52f4 { min-height: 560px; }
  #ad-hero { padding: 0 20px 64px; }
}
/* "TurismoLiterario.com" es una sola palabra de veinte caracteres: a 390 px no
   cabe en la caja del titular y se salia 4 px por la derecha. Se le permite
   partir donde haga falta, igual que se hizo con las URLs de las paginas
   legales. */
.ad-hero-h1 { overflow-wrap: anywhere; }
/* (comprobacion) */
/* Rediseño de «Sobre TurismoLiterario.com» (11 oct 2026): portada nueva,
   «Por qué existe» en la banda clara, retrato nuevo en «Quién está detrás»
   y cierre a una columna, sin foto, en banda clara. */

.elementor-element-93d52f4 {
  background-image:
    linear-gradient(to top,
      color-mix(in srgb, var(--color-ink) 85%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 40%, transparent) 50%,
      color-mix(in srgb, var(--color-ink) 25%, transparent) 100%),
    url("https://www.turismoliterario.com/wp-content/uploads/2026/10/portada-sobre-turismo-literario.webp");
  background-position: 60% center;
}

#ad-preguntas { max-width: 820px; padding: 96px 40px; }

#ad-preguntas h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
}

#ad-preguntas p {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 20px 0 0;
}
#ad-preguntas h2 + p { margin-top: 28px; }

#ad-bio-txt h2:first-child { margin-top: 0; }
#ad-bio-foto { object-position: center 30%; }

.elementor-element-1074544 {
  display: block !important;
  max-width: none !important;
  width: 100%;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 96px 40px !important;
}

#ad-cierre { max-width: 720px; margin: 0 auto; text-align: center; }

@media (max-width: 1023px) {
  #ad-bio-foto { aspect-ratio: 4 / 5; max-width: 480px; }
}

@media (max-width: 767px) {
  #ad-preguntas { padding: 64px 20px; }
  .elementor-element-1074544 { padding: 64px 20px !important; }
}/* End custom CSS */