/* ==========================================================================
   areaclientes.es/viajes — correcciones de maquetación
   Pegar en: Elementor → Ajustes del sitio → CSS personalizado
   (o en el style.css del child theme de Hello Elementor)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CRÍTICO — Loop Grid "Últimos viajes" desborda la pantalla
   El grid declara repeat(3, 1fr), pero 1fr = minmax(auto, 1fr): el suelo
   "auto" lo fija el min-content de cada tarjeta, que aquí es enorme. Las
   columnas se calculan a ~1290px cada una y la página se va a 3780px de
   ancho sobre un viewport de 1425px. En móvil: 1254px sobre 375px.
   min-width:0 libera ese suelo y las columnas vuelven a 1fr real.
   -------------------------------------------------------------------------- */
.elementor-loop-container.elementor-grid > * {
  min-width: 0;
}

/* Red de seguridad: ningún elemento debe generar scroll horizontal */
html,
body {
  overflow-x: clip;   /* clip > hidden: no crea contenedor de scroll */
}

/* Las imágenes de las tarjetas nunca fuerzan el ancho de su columna */
.elementor-loop-container .e-loop-item img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   2. Hero en móvil — el H1 se solapa con el logo
   El header (.elementor-element-dcb29d7) es absolute con z-index:100 sobre
   el hero, y el hero sólo tiene padding-top:10px. En 375px el logo ocupa
   335px de ancho / 67px de alto, así que el H1 (52px) le pisa 37px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Aire suficiente bajo el header superpuesto */
  .elementor-8 .elementor-element-066fa23 {
    padding-top: 110px;
  }

  /* El logo no debe ocupar el ancho completo del móvil */
  .elementor-location-header .elementor-element-7980dfd img {
    max-width: 210px;
  }

  /* Titular fluido: legible sin comerse la pantalla */
  .elementor-8 h1.elementor-heading-title {
    font-size: clamp(2rem, 9.5vw, 3.25rem);
    line-height: 1.08;
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
   3. Botón secundario del hero — texto casi invisible
   El segundo CTA es transparente con texto #cc2200 sobre una foto oscura:
   contraste insuficiente. Se convierte en botón fantasma blanco.
   -------------------------------------------------------------------------- */
/* !important es necesario: Elementor genera para este widget la regla
   .elementor-8 .elementor-element.elementor-element-c92e8c6 .elementor-button
   con la misma especificidad. Lo ideal es cambiarlo en el propio widget
   (Estilo > Color de texto y Borde); este bloque es el atajo. */
.elementor-8 .elementor-element.elementor-element-c92e8c6 .elementor-button {
  color: #fff !important;
  fill: #fff !important;
  border-color: #fff !important;
}
.elementor-8 .elementor-element.elementor-element-c92e8c6 .elementor-button:hover,
.elementor-8 .elementor-element.elementor-element-c92e8c6 .elementor-button:focus-visible {
  background-color: #fff !important;
  color: #cc2200 !important;
}

/* --------------------------------------------------------------------------
   4. Tarjetas de continente — indicar que son clicables
   (requiere además asignar el enlace en Elementor, ver informe)
   -------------------------------------------------------------------------- */
.elementor-element-d3d63e0 .e-con-full {
  overflow: hidden;
  border-radius: 10px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.elementor-element-d3d63e0 .e-con-full:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

/* --------------------------------------------------------------------------
   5. Pulido general de las tarjetas del blog
   -------------------------------------------------------------------------- */
.elementor-loop-container .e-loop-item {
  transition: transform .3s ease, box-shadow .3s ease;
}
.elementor-loop-container .e-loop-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
}

/* Títulos de tarjeta a la misma altura: rejilla visualmente alineada */
.elementor-loop-container .e-loop-item h3.elementor-heading-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

/* Recorte uniforme de las miniaturas (evita alturas dispares) */
.elementor-loop-container .e-loop-item .elementor-widget-theme-post-featured-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. Accesibilidad — foco visible con el teclado
   Hello Elementor no lo trae; es requisito de accesibilidad.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid #cc2200;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. Archivos de categoría — contraste ilegible sobre la foto de cabecera
   Los enlaces de subcategoría eran #cc3366 sobre una foto oscura: contraste
   2,66:1 (el mínimo WCAG AA es 4,5:1). El título "Explora esta sección" iba
   en #333, aún peor. Se convierten en píldoras blancas sobre velo oscuro.
   -------------------------------------------------------------------------- */

/* Aire suficiente bajo el header superpuesto en archivos */
.archive .elementor-element-563828b > .e-con-inner {
  padding-top: 150px;
}

.viajes-lista-categorias .viajes-lista-categorias__cabecera .viajes-lista-categorias__titulo {
  color: #fff !important;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem) !important;
  margin: 0 0 14px !important;
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
  letter-spacing: .01em;
}

.viajes-lista-categorias__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.viajes-lista-categorias__item {
  margin: 0;
}

/* Contraste resultante: 17,3:1 */
.viajes-lista-categorias__nav .viajes-lista-categorias__lista .viajes-lista-categorias__enlace {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  background-color: rgb(0 0 0 / 45%) !important;
  color: #fff !important;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  backdrop-filter: blur(3px);
  transition: background-color .25s ease, border-color .25s ease;
}
.viajes-lista-categorias__nav .viajes-lista-categorias__lista .viajes-lista-categorias__enlace:hover,
.viajes-lista-categorias__nav .viajes-lista-categorias__lista .viajes-lista-categorias__enlace:focus-visible {
  background-color: #cc2200 !important;
  border-color: #cc2200;
}

/* --------------------------------------------------------------------------
   8. Páginas sin hero — logo blanco invisible sobre fondo blanco
   El header es transparente y superpuesto: está pensado para ir encima de
   una foto oscura. "Contacto" (82534) y "Sobre el autor" (174) no tienen
   hero, así que el logotipo blanco quedaba sobre el fondo blanco del body y
   el H1 chocaba con la cabecera.

   PARCHE TEMPORAL: estas dos páginas están vacías (0 caracteres de
   contenido). Cuando se maqueten con su propia sección de cabecera, este
   bloque se puede eliminar.
   -------------------------------------------------------------------------- */
body.page-id-174 .elementor-location-header > .elementor-element {
  position: relative !important;
}
body.page-id-174 .elementor-location-header .elementor-element-dcb29d7 {
  background-color: #1d1d1d !important;
}

body.page-id-174 .page-header {
  background: #f4f1ec;
  border-bottom: 1px solid #e4ded4;
}
body.page-id-174 h1.entry-title {
  margin: 0;
  padding: 40px 20px !important;
  color: #2b2b2b;
  text-align: center;
}

/* Evita que el pie quede pegado al título en páginas casi vacías */
body.page-id-174 .site-main {
  min-height: 40vh;
}

/* Contacto (82534) ya tiene hero propio desde 22/09/2026, así que su header
   vuelve a ser transparente y superpuesto como en el resto del sitio. */


/* --------------------------------------------------------------------------
   9. Página de Contacto
   -------------------------------------------------------------------------- */

/* El subtítulo del hero se leía a todo el ancho; se limita la medida */
.elementor-element-ct100c1 {
  max-width: 620px;
  margin-inline: auto;
}

/* La etiqueta "Consentimiento" duplica el texto de la casilla */
.elementor-field-type-acceptance > .elementor-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Casilla y texto alineados y con espacio suficiente para el dedo */
.elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
}
.elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: #cc2200;
}

/* --------------------------------------------------------------------------
   10. Menú móvil / tablet
   El desplegable de la cabecera se abría con texto blanco sobre panel
   blanco: invisible. Además medía 135 px de ancho y empujaba el contenido
   en lugar de superponerse, y la hamburguesa era de 33 px (por debajo de
   los 44 px de área táctil recomendada) en gris oscuro sobre foto oscura.

   El menú del pie se plegaba en una segunda hamburguesa: en un pie los
   enlaces deben estar siempre a la vista.

   Elementor colapsa estos desplegables con transform: scaleY(0), no con
   display, de ahí el transform: none del bloque del pie.

   El desplegable se activa en "tablet", así que todo va hasta 1024 px.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* --- Cabecera --- */

  /* El widget deja de ser el ancla para que el panel ocupe toda la cabecera */
  .elementor-element-dcb29d7 .elementor-element-d0038cc {
    position: static !important;
  }

  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 120px);
    margin: 0 !important;
    overflow-y: auto;
    border-top: 1px solid rgb(255 255 255 / 12%);
    background-color: #141414 !important;
    box-shadow: 0 14px 34px rgb(0 0 0 / 35%);
  }

  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown a.elementor-item,
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    display: flex;
    align-items: center;
    min-height: 48px;          /* área táctil */
    padding: 12px 22px !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    background: transparent !important;
    color: #fff !important;
    font-size: 17px !important;
  }
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    padding-left: 42px !important;
    color: rgb(255 255 255 / 72%) !important;
    font-size: 15px !important;
  }
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    background: #cc2200 !important;
    color: #fff !important;
  }

  /* Hamburguesa: 44x44 y con contraste sobre la foto del hero */
  .elementor-element-d0038cc .elementor-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px;
    background-color: rgb(0 0 0 / 35%) !important;
    color: #fff !important;
  }
  .elementor-element-d0038cc .elementor-menu-toggle svg,
  .elementor-element-d0038cc .elementor-menu-toggle i {
    color: #fff !important;
    fill: #fff !important;
    font-size: 24px !important;
  }

  /* --- Pie: enlaces siempre visibles, sin hamburguesa --- */

  .elementor-element-24fcc23 .elementor-menu-toggle {
    display: none !important;
  }
  .elementor-element-24fcc23 nav.elementor-nav-menu--dropdown {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;   /* Elementor lo colapsa con scaleY(0) */
  }
  .elementor-element-24fcc23 nav.elementor-nav-menu--dropdown a.elementor-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgb(255 255 255 / 80%) !important;
    font-size: 15px !important;
  }
  .elementor-element-24fcc23 nav.elementor-nav-menu--dropdown a.elementor-item:hover {
    color: #fff !important;
  }
}

/* --------------------------------------------------------------------------
   11. Tarjetas de "Últimos viajes" en formato revista
   Antes: foto a la izquierda y texto a la derecha dentro de una rejilla de 3
   columnas, lo que dejaba la columna de texto en 182 px. Ahora la tarjeta se
   apila en vertical y el texto dispone del ancho completo.

   El extracto y el botón "Leer más" viven en la plantilla de bucle
   "últimos viajes" (ID 93).
   -------------------------------------------------------------------------- */

.elementor-loop-container .e-loop-item > .e-con {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 7%);
}
.elementor-loop-container .e-loop-item > .e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  gap: 0 !important;
  padding: 0 !important;
}

.elementor-loop-container .e-loop-item .elementor-widget-theme-post-featured-image {
  width: 100% !important;
}
.elementor-loop-container .e-loop-item .elementor-widget-theme-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Columna de texto */
.elementor-loop-container .e-loop-item .elementor-element-0eb2bb7 {
  width: 100% !important;
  gap: 8px !important;
  padding: 18px 20px 20px !important;
}

/* Categoría: antetítulo discreto en mayúsculas */
.elementor-loop-container .e-loop-item .elementor-widget-post-info .elementor-icon-list-text,
.elementor-loop-container .e-loop-item .elementor-widget-post-info a {
  color: #cc2200 !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.elementor-loop-container .e-loop-item .elementor-widget-post-info .elementor-icon-list-icon {
  display: none;
}

.elementor-loop-container .e-loop-item h3.elementor-heading-title {
  margin: 0;
  font-size: 19px !important;
  line-height: 1.3 !important;
}

/* Extracto a 3 líneas para que todas las tarjetas midan parecido */
.viajes-extracto {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #5a5a5a;
}

/* "Leer más" como enlace de texto, no como botón macizo */
.viajes-leermas .elementor-button {
  padding: 0 !important;
  background: transparent !important;
  color: #cc2200 !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.viajes-leermas .elementor-button::after {
  content: " →";
  display: inline-block;
  transition: transform .2s ease;
}
.viajes-leermas .elementor-button:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   12. Filtros de la galería
   El filtro seleccionado se pintaba en #F9F6F1 (el crema del kit) sobre
   fondo blanco: contraste 1,08:1, es decir, invisible. Se invierte la
   lógica: los inactivos en gris y el activo en el rojo de marca.
   -------------------------------------------------------------------------- */
.elementor-gallery__titles-container .elementor-gallery-title {
  padding: 8px 4px;
  color: #5a5a5a !important;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.elementor-gallery__titles-container .elementor-gallery-title:hover {
  color: #cc2200 !important;
}
.elementor-gallery__titles-container .elementor-gallery-title.elementor-item-active {
  color: #cc2200 !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. Pie de página
   La galería terminaba pegada al pie (0 px de separación) y el pie no
   tenía ningún respiro interior.
   -------------------------------------------------------------------------- */

#fotografias {
  padding-bottom: 72px !important;
}

.elementor-location-footer .elementor-element-787ec86 {
  padding: 64px 20px 18px !important;
}

/* Títulos de columna como antetítulos, no como titulares */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  margin-bottom: 14px;
  color: rgb(255 255 255 / 55%) !important;
  font-size: 13px !important;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.viajes-pie-lista .elementor-icon-list-item a,
.viajes-pie-lista .elementor-icon-list-text {
  color: rgb(255 255 255 / 80%) !important;
  font-size: 15px;
}
.viajes-pie-lista .elementor-icon-list-item a:hover {
  color: #fff !important;
}
.viajes-pie-lista .elementor-icon-list-icon {
  display: none;
}

/* Barra legal separada por un filete discreto */
.elementor-location-footer .elementor-element-ftbar01 {
  margin-top: 34px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}
.viajes-pie-legal p {
  margin: 0;
  /* 45% se quedaba en 4,48:1, justo por debajo del mínimo AA de 4,5 */
  color: rgb(255 255 255 / 52%) !important;
  font-size: 13px;
}

/* En móvil las columnas se apilan: algo de aire entre ellas */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-element-787ec86 {
    padding-top: 48px !important;
  }
  .elementor-location-footer .e-con.e-child {
    margin-bottom: 26px;
  }
}

/* --------------------------------------------------------------------------
   14. Perfiles sociales (pie y página de Contacto)
   Elementor los pinta con el color corporativo de cada red (azul Facebook,
   rojo YouTube...), lo que choca con la paleta sobria del sitio. Se unifican
   como círculos perfilados que se rellenan de rojo al pasar por encima.
   También se sube el área táctil de 32 a 42 px.
   -------------------------------------------------------------------------- */
.viajes-redes-pie .elementor-social-icon,
.viajes-redes-contacto .elementor-social-icon {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid currentColor;
  background-color: transparent !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.viajes-redes-pie .elementor-social-icon svg,
.viajes-redes-contacto .elementor-social-icon svg {
  fill: currentColor !important;
}

/* Sobre el negro del pie */
.viajes-redes-pie .elementor-social-icon {
  color: rgb(255 255 255 / 70%) !important;
}

/* Sobre el crema de Contacto */
.viajes-redes-contacto {
  margin-top: 10px;
}
.viajes-redes-contacto .elementor-social-icon {
  border-color: rgb(26 26 26 / 28%);
  color: #1a1a1a !important;
}

.viajes-redes-pie .elementor-social-icon:hover,
.viajes-redes-pie .elementor-social-icon:focus-visible,
.viajes-redes-contacto .elementor-social-icon:hover,
.viajes-redes-contacto .elementor-social-icon:focus-visible {
  border-color: #cc2200;
  background-color: #cc2200 !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   15. Color del menú
   La línea del efecto "subrayado" usaba #666666 (el gris "Énfasis" del kit)
   bajo un texto en #F9F6F1: gris sobre gris, sin relación con la marca y
   con 3 px de grosor. Pasa al rojo de marca y a 2 px.

   El efecto funciona por opacidad, así que la línea solo aparece en el
   elemento activo y al pasar por encima.
   -------------------------------------------------------------------------- */

/* Cabecera */
.elementor-element-d0038cc .elementor-nav-menu--main .elementor-item::after,
.elementor-element-d0038cc .elementor-nav-menu--main .elementor-item::before {
  height: 2px !important;
  background-color: #cc2200 !important;
}

/* El texto va sobre fotografías de fondo variables, y no se sabe cómo serán:
   puede tocar un cielo claro, arena o una pared blanca, y entonces el crema
   desaparece. Tres sombras, cada una con su función: contorno pegado, halo
   corto que lo despega del fondo claro, y sombra larga que le da cuerpo. */
.elementor-element-d0038cc .elementor-nav-menu--main .elementor-item {
  text-shadow:
    0 1px 2px rgb(0 0 0 / 70%),
    0 0 4px rgb(0 0 0 / 55%),
    0 2px 12px rgb(0 0 0 / 45%);
}

/* Pie: misma línea, y enlaces al mismo tono que las demás columnas
   (iban en crema mientras el resto del pie va en blanco al 80%) */
.elementor-element-24fcc23 .elementor-item::after,
.elementor-element-24fcc23 .elementor-item::before {
  height: 2px !important;
  background-color: #cc2200 !important;
}
.elementor-element-24fcc23 nav.elementor-nav-menu--main .elementor-item {
  color: rgb(255 255 255 / 80%) !important;
  font-size: 15px;
}
.elementor-element-24fcc23 nav.elementor-nav-menu--main .elementor-item:hover,
.elementor-element-24fcc23 nav.elementor-nav-menu--main .elementor-item:focus-visible {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   16. Botones del hero
   Sus widgets estaban limitados a 181 px, suficiente para el "Haz clic aquí"
   original pero no para los textos definitivos: "Explorar destinos" se
   partía en dos líneas. Se dejan al ancho de su contenido.
   -------------------------------------------------------------------------- */
/* El grupo era una rejilla de columnas fijas: al soltar el ancho de los
   botones se salían de su celda y llegaban a solaparse. Pasa a flex. */
.elementor-8 .elementor-element-b8eea3a {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  width: max-content !important;
  max-width: 100%;
  grid-template-columns: none !important;
}
.elementor-8 .elementor-element-65f0113,
.elementor-8 .elementor-element-c92e8c6 {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
}
.elementor-8 .elementor-element-65f0113 .elementor-button,
.elementor-8 .elementor-element-c92e8c6 .elementor-button {
  white-space: nowrap;
}

/* En móvil sí se apilan */
@media (max-width: 767px) {
  .elementor-8 .elementor-element-b8eea3a {
    width: auto !important;
    flex-wrap: wrap !important;
  }
}

/* --------------------------------------------------------------------------
   17. Antetítulo de las tarjetas: una sola categoría
   El widget de información del post pintaba TODAS las categorías separadas
   por comas: "AMÉRICA, ECUADOR, ISLAS GALÁPAGOS, AMÉRICA DEL SUR". Los
   nombres son enlaces, pero las comas y los espacios entre ellos eran texto
   rojo sin enlace, y la etiqueta quedaba larguísima para una tarjeta.

   Se deja solo la primera categoría, que es el continente y coincide con la
   navegación principal del sitio.

   El font-size:0 del contenedor elimina las comas, que son nodos de texto
   sueltos y no se pueden ocultar de otra forma. El !important es necesario
   porque el bloque 11 fija el tamaño de estos enlaces también con
   !important.
   -------------------------------------------------------------------------- */
.elementor-loop-container .e-loop-item .elementor-post-info__terms-list {
  font-size: 0 !important;
}
.elementor-loop-container .e-loop-item .elementor-post-info__terms-list-item {
  display: none !important;
}
.elementor-loop-container .e-loop-item .elementor-post-info__terms-list-item:first-of-type {
  display: inline !important;
  font-size: 11px !important;
}

/* --------------------------------------------------------------------------
   18. Mosaico de imágenes en los artículos
   Los posts importados colocan las fotos una detrás de otra a ancho
   completo: 14.322 imágenes en 407 artículos, con 2.071 series de dos o
   más seguidas. El filtro inc-mosaico.php las agrupa y aquí se maquetan.

   Una imagen suelta se queda a ancho completo: es la pausa entre bloques.
   -------------------------------------------------------------------------- */
.viajes-mosaico {
  display: grid;
  gap: 10px;
  margin: 28px 0;
}

.viajes-mosaico--2 { grid-template-columns: repeat(2, 1fr); }
.viajes-mosaico--3 { grid-template-columns: repeat(3, 1fr); }
/* --4 y --n no se dan hoy: el repartidor corta las filas en 3 como mucho.
   Se conservan porque la función que construye la rejilla sigue sabiendo
   hacerlas, y si ese límite cambia, el estilo ya está puesto. */
.viajes-mosaico--4 { grid-template-columns: repeat(2, 1fr); }
.viajes-mosaico--n {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow: dense;
}

.viajes-mosaico__pieza {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  background: #efeae3;      /* color de espera mientras carga */
}
.viajes-mosaico__pieza img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  transition: transform .5s ease;
}
.viajes-mosaico__pieza:hover img {
  transform: scale(1.04);
}

/* Las verticales ocupan dos filas: es lo que da aire de mosaico */
.viajes-mosaico--n .viajes-mosaico__pieza.es-vertical,
.viajes-mosaico--4 .viajes-mosaico__pieza.es-vertical {
  aspect-ratio: 2 / 3;
  grid-row: span 2;
}

.viajes-mosaico__pieza:focus-visible {
  outline: 3px solid #cc2200;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .viajes-mosaico--3,
  .viajes-mosaico--n {
    grid-template-columns: repeat(2, 1fr);
  }
  .viajes-mosaico {
    gap: 6px;
    margin: 20px 0;
  }
}

/* --------------------------------------------------------------------------
   19. El cuerpo del artículo: medida de lectura y ritmo

   Medido en Wadi Rum, que es un artículo tipo: 1.340 px de columna con Inter
   a 16 px dan **159 caracteres por línea**. La horquilla cómoda es 60-80. Al
   doble de ancho el ojo pierde el renglón al saltar de línea, y como además
   el artículo son 49 párrafos seguidos sin una sola cita ni lista, el
   resultado es un muro: todo igual, todo vertical.

   No se arregla con más interlineado. Se arregla separando dos anchos:

     - El TEXTO baja a 720 px, que es donde está la medida de lectura.
     - Las FOTOS siguen ocupando los 1.340 px del contenedor.

   Esa diferencia es justamente lo que rompe la verticalidad: el texto se
   estrecha, la imagen se abre, y la página deja de ser una sola columna de
   ancho constante.

   OJO: esto revierte la decisión de "que el texto vaya a 1340" que se tomó
   viéndolo en pantalla. Las fotos no cambian. Para volver atrás basta con
   poner `max-width: none` en la regla de más abajo.
   -------------------------------------------------------------------------- */

.elementor-location-single .elementor-element-907db0a {
  --content-width: 1340px;
}

.elementor-location-single .elementor-element-907db0a > .e-con-inner {
  max-width: 1340px;
}

/* --- La medida de lectura --- */

.elementor-widget-theme-post-content > p,
.elementor-widget-theme-post-content > h2,
.elementor-widget-theme-post-content > h3,
.elementor-widget-theme-post-content > h4,
.elementor-widget-theme-post-content > h5,
.elementor-widget-theme-post-content > ul,
.elementor-widget-theme-post-content > ol,
.elementor-widget-theme-post-content > blockquote,
.elementor-widget-theme-post-content > hr,
.elementor-widget-theme-post-content > div:not(.viajes-mosaico):not(.wp-block-image) {
  /* 960 px = unos 92 caracteres por linea. Por encima de la horquilla comoda
     (60-80), pero es lo que pidio el cliente tras ver 720 y encontrarlo
     angosto. Se compensa con mas interlineado. Para volver a lo optimo,
     bajar este numero a 720. */
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

/* Las fotos conservan el ancho completo: son el motivo de que la caja sea
   de 1.340 px */
.elementor-widget-theme-post-content > .viajes-mosaico,
.elementor-widget-theme-post-content > figure,
.elementor-widget-theme-post-content > .wp-block-image,
.elementor-widget-theme-post-content > p:has(> img:only-child) {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

/* --- El texto --- */

.elementor-widget-theme-post-content > p {
  margin-bottom: 1.5em;
  font-size: 20px;        /* lo pidio el cliente: de 18 a 20 */
  line-height: 1.8;       /* a 20 px el interlineado de 1,85 separaba de mas */
}

/* --- El ritmo: que los apartados se vean venir --- */

.elementor-widget-theme-post-content > h2,
.elementor-widget-theme-post-content > h3 {
  margin-top: 2.2em;      /* mucho aire encima, poco debajo: el encabezado
                             se agrupa con SU texto, no flota en medio */
  margin-bottom: .55em;
  line-height: 1.25;
  text-wrap: balance;
}

.elementor-widget-theme-post-content > h2 {
  padding-top: .5em;
  border-top: 2px solid rgb(204 34 0 / 18%);
  /* con el cuerpo a 22 px, 30 se quedaba casi igual: no habia jerarquia */
  font-size: 35px;
}

.elementor-widget-theme-post-content > h3 {
  font-size: 27px;
}

/* Una foto justo después de un encabezado no necesita tanto hueco */
.elementor-widget-theme-post-content > h2 + .viajes-mosaico,
.elementor-widget-theme-post-content > h3 + .viajes-mosaico {
  margin-top: 1.2em;
}

/* --- Citas y listas: hoy no se usan, pero cuando se usen deben lucir --- */

.elementor-widget-theme-post-content > blockquote {
  margin-top: 2em;
  margin-bottom: 2em;
  padding-left: 22px;
  border-left: 3px solid #cc2200;
  color: #2b2b2b;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  line-height: 1.45;
}

.elementor-widget-theme-post-content > ul,
.elementor-widget-theme-post-content > ol {
  margin-bottom: 1.45em;
  padding-left: 1.3em;
  font-size: 20px;        /* acompana al cuerpo */
  line-height: 1.7;
}

.elementor-widget-theme-post-content > ul li,
.elementor-widget-theme-post-content > ol li {
  margin-bottom: .5em;
}

/* --- Móvil: aquí la medida hay que darla a mano ---

   Decía "la medida ya la impone la pantalla", y era mentira. En escritorio
   el texto va a 960 px centrado dentro de un contenedor de 1340: sobran
   unos 190 px a cada lado y PARECE que hay margen. Ese margen no existe,
   lo finge el ancho máximo. En móvil 960 > 375, el max-width no hace nada
   y el texto se pegaba a los dos bordes: 42 párrafos y 7 encabezados a
   0 px, medidos a 375.

   Se arregla con margin, no con padding: las listas ya usan padding-left
   para las viñetas y la cita para su barra roja, y un padding nuevo se
   sumaría al suyo.

   Las fotos siguen a sangre, que es como se decidió: quedan fuera los
   mosaicos y los párrafos que solo llevan una imagen. */

@media (max-width: 767px) {

  /* En movil NO se sube a 20. Hay 327 px utiles: a 20 px saldrian unos 34
     caracteres por linea y por debajo de 35 el ojo salta de renglon. 18 es
     el equivalente proporcional en esta pantalla. */
  .elementor-widget-theme-post-content > p,
  .elementor-widget-theme-post-content > ul,
  .elementor-widget-theme-post-content > ol {
    font-size: 18px;
  }

  .elementor-widget-theme-post-content > h2 { font-size: 25px; }
  .elementor-widget-theme-post-content > h3 { font-size: 21px; }

  .elementor-widget-theme-post-content > blockquote { font-size: 20px; }

  /* El margen que faltaba. 24 px es lo que usa el H1 de la portadilla, que
     está justo encima: así el texto arranca en su misma vertical. */
  .elementor-widget-theme-post-content > p:not(:has(> img:only-child)),
  .elementor-widget-theme-post-content > h2,
  .elementor-widget-theme-post-content > h3,
  .elementor-widget-theme-post-content > h4,
  .elementor-widget-theme-post-content > h5,
  .elementor-widget-theme-post-content > ul,
  .elementor-widget-theme-post-content > ol,
  .elementor-widget-theme-post-content > blockquote,
  .elementor-widget-theme-post-content > table {
    margin-right: 24px;
    margin-left: 24px;
  }
}

/* Pantallas estrechas: con 24 px quedarían 272 px de línea y se estrangula */
@media (max-width: 360px) {

  .elementor-widget-theme-post-content > p:not(:has(> img:only-child)),
  .elementor-widget-theme-post-content > h2,
  .elementor-widget-theme-post-content > h3,
  .elementor-widget-theme-post-content > h4,
  .elementor-widget-theme-post-content > h5,
  .elementor-widget-theme-post-content > ul,
  .elementor-widget-theme-post-content > ol,
  .elementor-widget-theme-post-content > blockquote,
  .elementor-widget-theme-post-content > table {
    margin-right: 16px;
    margin-left: 16px;
  }
}

/* --------------------------------------------------------------------------
   20. Slider de publicaciones relacionadas
   Antes era una rejilla sin filtro (mostraba los últimos posts de cualquier
   región) y solo se podía pulsar el título. Ahora es un carrusel con la
   consulta "Relacionados por categoría", que en este sitio equivale a la
   región.

   El área clicable se resuelve estirando el enlace del título sobre toda la
   tarjeta: hacer el contenedor un <a> generaba marcado anidado, porque es un
   contenedor "boxed" con un .e-con-inner dentro.
   -------------------------------------------------------------------------- */
/* Elementor no aplica clases personalizadas a este contenedor concreto,
   así que se usa también su identificador, que sí está en el marcado. */
.viajes-relacionado,
.elementor-widget-loop-carousel .elementor-element-856e29b {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 7%);
  transition: transform .3s ease, box-shadow .3s ease;
}
.viajes-relacionado:hover,
.elementor-widget-loop-carousel .elementor-element-856e29b:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
}

/* Toda la tarjeta clicable, sin anidar enlaces */
.elementor-widget-loop-carousel .viajes-relacionado__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.elementor-widget-loop-carousel .elementor-widget-theme-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Aquí se vestía el antetítulo de categoría de las tarjetas de relacionados.
   El cliente pidió quitar las categorías de las fichas, así que esa línea ya
   no se imprime y las reglas se fueron con ella. */

.viajes-relacionado__titulo .elementor-heading-title {
  margin: 0;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

/* Flechas del carrusel sobre el fondo claro */
.viajes-relacionados .elementor-swiper-button {
  color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   21. Aire alrededor del carrusel de relacionados
   Terminaba pegado al pie (0 px de separación), el mismo caso que la galería
   de la home. También le faltaba respiro por arriba respecto al final del
   artículo.
   -------------------------------------------------------------------------- */
.elementor-location-single .elementor-element-99cee40 {
  padding-top: 56px !important;
  padding-bottom: 88px !important;
}

@media (max-width: 767px) {
  .elementor-location-single .elementor-element-99cee40 {
    padding-top: 36px !important;
    padding-bottom: 56px !important;
  }
}

/* Título del bloque de relacionados */
.viajes-relacionados-titulo .elementor-heading-title {
  margin-bottom: 26px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* Extracto y botón de la tarjeta de relacionados */
.viajes-relacionado__extracto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #5a5a5a;
}
.elementor-widget-loop-carousel .elementor-element-856e29b {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 18px !important;
}
/* El botón queda por debajo del enlace estirado, pero abarca lo mismo */
.elementor-widget-loop-carousel .viajes-leermas {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   22. Espaciado del pie
   Dos de las tres columnas estaban vacías en un 70%: las cajas se estiraban
   hasta igualar la más alta (294 px cada una, con 104 y 89 px de contenido
   real). Y el menú de Destinos gastaba 47 px por enlace, de ahí la sensación
   de espaciado raro.

   Las columnas dejan de estirarse y los tres tipos de enlace pasan al mismo
   paso de 35 px, así el ritmo vertical es el mismo en las tres.

   Nota de selector: apuntar a `.elementor-item` no bastaba para el padding
   del menú; hay que usar la misma forma que Elementor,
   `.elementor-nav-menu--main .elementor-nav-menu a`.
   -------------------------------------------------------------------------- */
.elementor-location-footer .elementor-element-787ec86 > .e-con-inner {
  align-items: flex-start !important;
}
.elementor-location-footer .elementor-element-787ec86 > .e-con-inner > .e-con {
  padding: 0 !important;
}

.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  margin-bottom: 16px !important;
}

/* Menú de Destinos */
.elementor-location-footer .elementor-element-24fcc23 .elementor-nav-menu--main .elementor-nav-menu a {
  padding: 6px 0 !important;
  line-height: 1.5 !important;
}
.elementor-location-footer .elementor-element-24fcc23 .elementor-nav-menu--main .elementor-nav-menu li {
  margin: 0 !important;
}

/* Listas de las otras columnas, al mismo paso */
.viajes-pie-lista .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.viajes-pie-lista .elementor-icon-list-item {
  margin: 0 !important;
}
.viajes-pie-lista .elementor-icon-list-item a {
  padding: 6px 0 !important;
  line-height: 1.5 !important;
}

.viajes-redes-pie {
  margin-top: 18px !important;
}

/* --------------------------------------------------------------------------
   23. Logotipo en el pie y ajuste del hueco inferior
   Se añade como primera columna: además de dar identidad, equilibra una
   fila donde Destinos tenía 5 enlaces y Contacto uno solo.

   El hueco de abajo eran 18 px de relleno del contenedor más 34 px de
   margen de la barra legal.
   -------------------------------------------------------------------------- */
.viajes-pie-logo img {
  width: 100%;
  max-width: 190px;
  height: auto;
}
.viajes-pie-lema p {
  margin: 14px 0 0;
  max-width: 230px;
  color: rgb(255 255 255 / 55%);
  font-size: 14px;
  line-height: 1.55;
}

/* Elementor conserva el relleno antiguo en su CSS generado, así que se
   fuerza aquí el cero de abajo. */
.elementor-location-footer .elementor-element-787ec86 {
  padding-bottom: 0 !important;
}

/* La barra legal se pega menos a las columnas */
.elementor-location-footer .elementor-element-ftbar01 {
  margin-top: 26px !important;
}
.elementor-location-footer .elementor-element-ftbar01 > .e-con-inner {
  padding: 16px 0 !important;
}

@media (max-width: 767px) {
  .viajes-pie-lema p {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   24. Correcciones del pie tras revisión
   - El relleno de 64 px se aplicaba DOS veces: en el contenedor y otra vez
     en su caja interior (.e-con-inner). Eran 128 px de hueco arriba.
   - El logo y los títulos de columna se quedaban pequeños.
   - La línea roja del hover ocupaba los 331 px de la columna entera, porque
     el enlace es un flex que llena el ancho disponible. Con inline-flex se
     ajusta al texto.
   -------------------------------------------------------------------------- */
.elementor-location-footer .elementor-element-787ec86 {
  padding-top: 56px !important;
  padding-bottom: 0 !important;
}
.elementor-location-footer .elementor-element-787ec86 > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.viajes-pie-logo img {
  max-width: 240px !important;
}

.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  color: rgb(255 255 255 / 70%) !important;
  font-size: 15px !important;
  letter-spacing: .14em !important;
}

/* La línea del subrayado se ciñe al texto, no a la columna */
.elementor-location-footer .elementor-element-24fcc23 .elementor-nav-menu--main .elementor-nav-menu a {
  display: inline-flex !important;
  width: auto !important;
}
.elementor-location-footer .elementor-element-24fcc23 .elementor-nav-menu--main .elementor-nav-menu li {
  display: block;
}

/* ==========================================================================
   25. Buscador y redes en la cabecera

   La cabecera es transparente y flota sobre la fotografía del hero, así que
   todo lo que se añada tiene que leerse igual sobre un cielo claro que sobre
   una roca oscura. Se sigue el mismo recurso que ya usa el menú: blanco con
   una sombra corta debajo.

   Los iconos venían con los colores de marca (azul Facebook, rojo YouTube).
   Sobre una foto quedan como pegatinas y compiten con el logo, así que se
   dejan en blanco y el color aparece sólo al pasar por encima.
   ========================================================================== */

/* El bloque medía 504 px con el contenido pegado a la izquierda: 325 px de
   hueco muerto. Ahora se ciñe a su contenido y se va al extremo derecho. */
.elementor-location-header .elementor-element-cabext01 {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* --- Redes --- */

.viajes-redes-cabecera .elementor-grid {
  gap: 4px !important;
}

.viajes-redes-cabecera .elementor-social-icon {
  width: 34px !important;          /* área de pulsación cómoda */
  height: 34px !important;
  background-color: transparent !important;
  transition: background-color .2s ease, transform .2s ease;
}

.viajes-redes-cabecera .elementor-social-icon i,
.viajes-redes-cabecera .elementor-social-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 17px !important;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 65%)) drop-shadow(0 0 4px rgb(0 0 0 / 50%));
}

.viajes-redes-cabecera .elementor-social-icon:hover,
.viajes-redes-cabecera .elementor-social-icon:focus-visible {
  background-color: #cc2200 !important;
  transform: translateY(-1px);
}

.viajes-redes-cabecera .elementor-social-icon:hover i,
.viajes-redes-cabecera .elementor-social-icon:hover svg {
  filter: none;
}

/* --- Lupa --- */

.viajes-buscador .elementor-search-form__toggle {
  --e-search-form-toggle-size: 20px;
  --e-search-form-toggle-color: #fff;
  color: #fff !important;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 65%)) drop-shadow(0 0 4px rgb(0 0 0 / 50%));
  transition: color .2s ease;
}

.viajes-buscador .elementor-search-form__toggle:hover,
.viajes-buscador .elementor-search-form__toggle:focus-visible {
  color: #cc2200 !important;
  filter: none;
}

/* Una barra vertical separa la lupa de las redes: son dos cosas distintas
   y sin ella parecen un solo grupo de cinco iconos. */
.viajes-buscador {
  position: relative;
  padding-left: 14px !important;
}

.viajes-buscador::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 18px;
  background-color: rgb(255 255 255 / 35%);
  content: "";
  transform: translateY(-50%);
}

/* --- El panel de búsqueda ---

   Elementor trae esto como capa a pantalla completa: fondo negro al 96 % y
   el campo a 44 px en mitad de la pantalla. Para buscar en un blog es
   desproporcionado, así que se convierte en un panel pequeño colgado de la
   lupa.

   El truco está en no tocar el tamaño del CONTENEDOR. Elementor cierra la
   búsqueda comprobando que el clic haya caído sobre el contenedor mismo
   (`$container[0] === event.target`). Si lo encogiéramos, los clics fuera
   del panel caerían en la página y ya no cerrarían nada.

   Por eso el contenedor sigue cubriendo la ventana, pero transparente, y el
   aspecto de panel se lo damos al propio campo. Así se conservan las tres
   formas de cerrar: clic fuera, Esc y el aspa.
   --- */

.viajes-buscador .elementor-search-form__container {
  padding: 150px 20px 0 !important;   /* justo por debajo de la cabecera */
  align-items: flex-start !important;
  justify-content: flex-end !important;
  background-color: rgb(0 0 0 / 18%) !important;   /* apenas un velo */
}

.viajes-buscador.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input {
  /* Elementor le pone flex-basis:100%, que gana sobre width en un flex */
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 15px 18px !important;
  border: 1px solid rgb(255 255 255 / 18%) !important;
  border-radius: 4px !important;
  background-color: rgb(20 20 20 / 97%) !important;
  box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.viajes-buscador input[type="search"]::placeholder {
  color: rgb(255 255 255 / 45%) !important;
}

/* El aspa, dentro del panel y a su derecha */
.viajes-buscador .elementor-search-form__container .dialog-lightbox-close-button {
  top: 162px !important;
  right: 32px !important;
  bottom: auto !important;
  color: rgb(255 255 255 / 70%) !important;
  font-size: 20px !important;
}

/* --- Tablet y móvil --- */

@media (max-width: 1024px) {

  /* Orden: logo · lupa · hamburguesa. Sin esto el bloque nuevo caía a una
     segunda línea y la cabecera pasaba de 90 a 154 px de alto. */
  .elementor-location-header .elementor-element-dcb29d7 {
    flex-wrap: nowrap !important;
  }

  .elementor-location-header .elementor-element-7980dfd { order: 1; }
  .elementor-location-header .elementor-element-cabext01 { order: 2; }
  .elementor-location-header .elementor-element-d0038cc { order: 3; flex: 0 0 auto; }

  /* Las cuatro redes no caben junto al logo, la lupa y la hamburguesa.
     Se quedan en el pie, que es donde se buscan al final de la página. */
  .viajes-redes-cabecera {
    display: none !important;
  }

  .viajes-buscador {
    padding-left: 0 !important;
  }

  .viajes-buscador::before {
    display: none;
  }

  .viajes-buscador .elementor-search-form__toggle {
    --e-search-form-toggle-size: 22px;
    padding: 11px;               /* 44 px de área táctil */
  }
}

/* ==========================================================================
   26. La franja estrecha de la cabecera

   Entre el punto en que aparece la hamburguesa (1024) y el ancho donde todo
   cabe holgado la cabecera va justa: el menú mide 699 px de ancho natural y
   el logotipo 400.

   Esto YA pasaba antes de añadir el buscador — a 1100 px el logo se quedaba
   en 326 px en vez de 400 — pero el bloque nuevo lo agravó hasta 107 px,
   que es ilegible. Se arregla por los dos lados: se le pone un suelo al
   logotipo y se le quita grasa al menú, en vez de dejar que flex reparta.

   REMEDIDO en octubre de 2026. Los umbrales anteriores se fijaron cuando el
   menú tenía 5 entradas y medía 699 px. Al añadirle "Canal de vídeos" y
   "Sobre el autor" pasó a 1019, y se quedaron cortos sin que se notara: a
   1366 px —la medida de portátil más común— la página se desplazaba 78 px
   en horizontal, y entre 1400 y 1550 el logotipo se aplastaba a 187.

   Lo que ocupa cada pieza hoy:

     logotipo 400 · menú 1019 natural, 785 compacto, 712 muy compacto
     extras 199 con las redes, unos 40 con la lupa sola · dos huecos de 20

   De donde salen los tres tramos:

     menú natural  + todo    = 1658  →  por debajo hay que compactar
     menú compacto + todo    = 1444  →  pide 1470 de ventana
     menú compacto sin redes = 1265  →  pide 1310 de ventana

     1025 – 1719 px : menú compacto (17 px)
     1025 – 1519 px : además se ocultan las redes; siguen en el pie
     1025 – 1359 px : además el menú se aprieta un punto más (16 px)

   Recalculados en octubre de 2026 al subir el tipo del menú un punto: pasó
   de 785 a 821 px y los umbrales anteriores se quedaron cortos por 25 px a
   1470 y por 13 a 1680. Ahora llevan margen: clavarlos en el mínimo exacto
   deja el fallo a un píxel de distancia.

   La lupa no se oculta en ningún tramo: un buscador que desaparece según el
   ancho de la ventana no lo encuentra nadie.

   El logotipo lleva `flex: 0 0 auto` en TODOS los tramos de escritorio, no
   solo en los estrechos. Ese era el fallo de los 187 px.
   ========================================================================== */

/* La medida del logotipo.

   El anterior era un PNG de 400x80 y se mostraba a su tamaño natural, así que
   nunca necesitó regla de anchura. El nuevo viene a 1200 px: sin esto entraba
   a 1200 y la cabecera pedía 2.101 px de los 1.385 que hay.

   360 es menos que los 400 del anterior y aun así el nombre se ve más grande:
   el viejo gastaba un tercio de su alto en la coletilla que el nuevo no
   lleva. Y deja 40 px libres en una cabecera que va justa.

   El suelo de 200 es para que no se haga ilegible en el tramo estrecho. */
.elementor-location-header .elementor-element-7980dfd img {
  width: 360px;
  min-width: 200px;
  max-width: 100%;
  height: auto;
}

/* De 1660 para arriba, el menú a tamaño completo. Antes no tenía regla
   propia y se quedaba en lo que pusiera Elementor. */
@media (min-width: 1720px) {
  .elementor-element-d0038cc .elementor-nav-menu--main .elementor-nav-menu a {
    font-size: 18px !important;
  }
}

/* De 1310 para arriba el logotipo no se encoge: mantiene sus 400 px. Antes
   esto vivía dentro del tramo de 1400, y por encima de ese ancho quedaba a
   merced de flex — a 1500 px medía 187.

   Por debajo de 1310 sí se le deja encoger: con 400 px clavados no caben las
   piezas (a 1100 faltaban 57 px). No se queda en nada, porque la imagen tiene
   un suelo de 200 px, que es donde deja de leerse. */
@media (min-width: 1360px) {
  .elementor-location-header .elementor-element-7980dfd {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 1025px) and (max-width: 1719px) {

  /* 8 entradas × 18 px de recorte a cada lado */
  .elementor-element-d0038cc .elementor-nav-menu--main .elementor-nav-menu a {
    padding-right: 11px !important;
    padding-left: 11px !important;
    font-size: 17px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1359px) {

  /* Un punto más de apriete */
  .elementor-element-d0038cc .elementor-nav-menu--main .elementor-nav-menu a {
    padding-right: 7px !important;
    padding-left: 7px !important;
    font-size: 16px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1519px) {

  .viajes-redes-cabecera {
    display: none !important;
  }

  .viajes-buscador {
    padding-left: 0 !important;
  }

  .viajes-buscador::before {
    display: none;
  }
}





/* En móvil la cabecera mide 84 px en vez de 120, así que el panel sube */
@media (max-width: 1024px) {

  .viajes-buscador .elementor-search-form__container {
    padding-top: 112px !important;
  }

  .viajes-buscador .elementor-search-form__container .dialog-lightbox-close-button {
    top: 124px !important;
    right: 30px !important;
  }
}

/* ==========================================================================
   27. Las redes del pie, más presentes

   Estaban a 16 px, sin fondo y en la última columna: se perdían. El cliente
   pidió que las redes se vieran más, y el sitio en el que más se buscan es
   el final de la página.

   Se les pone un aro tenue para que se lean como botones y no como adorno,
   y el glifo sube a 19 px. El color de marca aparece sólo al pasar por
   encima: el pie ya tiene bastante con el rojo del logotipo.
   ========================================================================== */

.viajes-redes-pie .elementor-grid {
  gap: 10px !important;
}

.viajes-redes-pie .elementor-social-icon {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgb(255 255 255 / 22%);
  background-color: transparent !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.viajes-redes-pie .elementor-social-icon i,
.viajes-redes-pie .elementor-social-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 19px !important;
}

.viajes-redes-pie .elementor-social-icon:hover,
.viajes-redes-pie .elementor-social-icon:focus-visible {
  border-color: #cc2200;
  background-color: #cc2200 !important;
  transform: translateY(-2px);
}

/* El foco del teclado tiene que verse sobre fondo oscuro */
.viajes-redes-pie .elementor-social-icon:focus-visible,
.viajes-redes-cabecera .elementor-social-icon:focus-visible,
.viajes-buscador .elementor-search-form__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/* ==========================================================================
   28. "Ver todos los viajes"

   Era un encabezado suelto sin enlace: se leía como un rótulo y no llevaba a
   ninguna parte. Ahora apunta a /todos-los-viajes/, así que tiene que
   parecer pulsable — si no, nadie lo intenta.
   ========================================================================== */

.elementor-element-8587e8b .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, gap .2s ease;
}

.elementor-element-8587e8b .elementor-heading-title a::after {
  content: "→";
  font-size: .95em;
}

.elementor-element-8587e8b .elementor-heading-title a:hover,
.elementor-element-8587e8b .elementor-heading-title a:focus-visible {
  gap: 10px;
  border-bottom-color: currentcolor;
}

.elementor-element-8587e8b .elementor-heading-title a:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 4px;
}

/* ==========================================================================
   29. (retirado)

   Aqui se corregia el hueco que dejaba el contenedor de la entradilla, que
   salia vacio en 406 de los 407 articulos porque el extracto automatico
   repetia el arranque del texto. En octubre de 2026 el contenedor se retiro
   de la plantilla y el aire pasó a la portada y al cuerpo del articulo, asi
   que estas reglas ya no tenian a que agarrarse.
   ========================================================================== */


/* ==========================================================================
   30. La tarjeta de relacionados, clicable entera (bien hecha)

   El montaje anterior convertía el contenedor de la tarjeta en un <a>. Pero
   dentro ya había enlaces propios — el título y el botón Leer más — y un
   enlace dentro de otro es HTML inválido: el navegador deshacía el
   anidamiento y partía el contenedor en CUATRO anclas sueltas. De paso se
   tragaba el widget de categorías, que quedaba invisible ocupando 84 px.

   La forma correcta es el enlace estirado: el contenedor es un div normal
   y el enlace del título se expande por encima de toda la tarjeta con un
   pseudoelemento. Un solo <a> por tarjeta, marcado válido, y se puede
   pulsar en cualquier punto.

   Se cuelga de .e-loop-item, que es el envoltorio que pone Elementor a cada
   elemento del bucle, en vez de una clase propia que puede perderse al
   regenerar la plantilla.
   ========================================================================== */

.viajes-relacionados .e-loop-item {
  position: relative;
  transition: transform .2s ease;
}

/* El widget del título viene con position:relative, y eso lo convertía en el
   ancla de la capa: se estiraba sólo sobre el título (433x44) en vez de sobre
   la tarjeta (453x485). En static, el ancla pasa a ser el contenedor. */
.viajes-relacionados .e-loop-item .viajes-relacionado__titulo {
  position: static;
}

.viajes-relacionados .e-loop-item .viajes-relacionado__titulo a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: ;
}

/* El botón queda por encima: sigue siendo un objetivo propio */
.viajes-relacionados .e-loop-item .viajes-leermas {
  position: relative;
  z-index: 2;
}

.viajes-relacionados .e-loop-item:hover {
  transform: translateY(-3px);
}

.viajes-relacionados .e-loop-item:hover .viajes-relacionado__titulo a {
  color: #cc2200;
}

.viajes-relacionados .e-loop-item:focus-within {
  outline: 2px solid #cc2200;
  outline-offset: 3px;
}


/* ==========================================================================
   31. La página 404

   La del tema eran dos frases, cero enlaces y sin buscador: un callejón sin
   salida. Pesa más de lo normal aquí porque en la migración se movieron 398
   URLs, y todo enlace antiguo que se le escape a los 301 aterriza en ella.

   Mismo lenguaje que la cabecera de los posts — foto a sangre con velo
   oscuro y texto en blanco — para que no parezca el error de otro sitio. El
   orden lo marca la utilidad: buscador primero, que es lo que resuelve el
   caso; luego los continentes; por último el listado completo.

   OJO con dos cosas de esta instalación:
   · El contenedor raíz NO recibe la clase de _css_classes, así que todo se
     cuelga de su id (.elementor-element-e404main).
   · Elementor no ha generado el CSS del velo (sólo lo escribe al guardar la
     plantilla desde el editor), así que el velo se pinta aquí.
   ========================================================================== */

.elementor-element-e404main {
  position: relative;
}

/* El velo oscuro: sin él el texto blanco cae sobre un cielo claro */
.elementor-element-e404main::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: rgb(0 0 0 / 55%);
  content: ;
}

.elementor-element-e404main > * {
  position: relative;
  z-index: 1;
}

.viajes-404-titulo .elementor-heading-title {
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
  text-wrap: balance;
}

.viajes-404-texto {
  /* Elementor pone width:100% al widget y gana sobre un max-width normal */
  max-width: 580px !important;
  margin: 14px auto 30px;
  color: rgb(255 255 255 / 90%) !important;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
}

.viajes-404-texto p {
  color: inherit !important;
}

/* --- El buscador --- */

.viajes-404-buscador {
  width: min(540px, 100%) !important;
  margin-bottom: 34px;
}

.viajes-404-buscador .elementor-search-form__container {
  overflow: hidden;
  border-radius: 4px;
  background-color: rgb(255 255 255 / 96%) !important;
  box-shadow: 0 14px 34px rgb(0 0 0 / 30%);
}

.viajes-404-buscador input[type=search] {
  padding: 16px 18px !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
}

.viajes-404-buscador .elementor-search-form__submit {
  padding: 0 20px !important;
  background-color: #cc2200 !important;
  color: #fff !important;
}

/* --- Los continentes --- */

.viajes-404-destino .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;          /* área de pulsación, 44 en móvil */
  padding: 9px 18px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  background-color: transparent;
  color: #fff;
  font-size: 14px;
  letter-spacing: .04em;
  transition: background-color .2s ease, border-color .2s ease;
}

.viajes-404-destino .elementor-button:hover,
.viajes-404-destino .elementor-button:focus-visible {
  border-color: #cc2200;
  background-color: #cc2200;
  color: #fff;
}

/* --- El listado completo --- */

.viajes-404-todos .elementor-button {
  padding: 13px 28px;
  background-color: #cc2200;
  color: #fff;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.viajes-404-todos .elementor-button:hover,
.viajes-404-todos .elementor-button:focus-visible {
  background-color: #a81c00;
}

.elementor-element-e404main .elementor-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 767px) {

  .elementor-element-e404main {
    padding-top: 130px !important;
  }

  .viajes-404-texto {
    font-size: 16px;
  }

  .viajes-404-destino .elementor-button {
    min-height: 44px;
  }
}


/* ==========================================================================
   32. Variedad en el artículo: que no todo caiga igual

   Con el texto a 880 px y las fotos a 1.340 ya hay dos anchos, pero los 14
   mosaicos de un artículo salían todos con la misma rejilla regular, y eso
   vuelve a producir monotonía: cambia el contenido, no la forma.

   Aquí se rompe esa regularidad sin tocar el contenido ni pedirle nada al
   autor. Todo es CSS: se puede quitar entero sin consecuencias.

     · Los mosaicos de DOS alternan 50/50 y 60/40, un par a cada lado.
     · Los de TRES alternan tres iguales con "una grande + dos apiladas".
     · Se alternan también los anchos: unos llegan a los 1.340 y otros se
       quedan en 1.100, para que los bordes no formen una columna recta.
     · El artículo abre con capitular y una primera línea mayor.

   La alternancia va por :nth-of-type, así que depende del orden en que
   aparecen y cada artículo sale distinto sin configurar nada.
   ========================================================================== */

/* --- Dos fotos: alternar simetría --- */

/* --- Tres fotos: una grande y dos apiladas, de vez en cuando --- */

/* --- Alternar anchos: que el borde no forme una columna recta --- */

.elementor-widget-theme-post-content > .viajes-mosaico:nth-of-type(3n) {
  width: min(1100px, 100%);
  margin-right: auto;
  margin-left: auto;
}

/* --- La entrada del artículo --- */

/* Primera línea algo mayor: marca por dónde se empieza */
.elementor-widget-theme-post-content > p:first-of-type {
  font-size: 20px;
  line-height: 1.65;
}

/* Capitular. Sólo en pantallas con sitio: en móvil se come la primera línea */
@media (min-width: 768px) {

  .elementor-widget-theme-post-content > p:first-of-type::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    color: #cc2200;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 64px;
    font-weight: 700;
    line-height: .82;
  }
}

/* --- Móvil: la variedad sobra, manda el ancho de pantalla --- */

@media (max-width: 767px) {

  .elementor-widget-theme-post-content > .viajes-mosaico--2,
  .elementor-widget-theme-post-content > .viajes-mosaico--2:nth-of-type(even),
  .elementor-widget-theme-post-content > .viajes-mosaico--2:nth-of-type(4n),
  .elementor-widget-theme-post-content > .viajes-mosaico--3,
  .elementor-widget-theme-post-content > .viajes-mosaico--3:nth-of-type(odd) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
  }

  .elementor-widget-theme-post-content > .viajes-mosaico--3:nth-of-type(odd) > .viajes-mosaico__pieza:first-child {
    grid-row: auto;
    grid-column: span 2;     /* la primera manda, a lo ancho */
    aspect-ratio: 3 / 2;
  }

  .elementor-widget-theme-post-content > .viajes-mosaico:nth-of-type(3n) {
    width: 100%;
  }

  .elementor-widget-theme-post-content > p:first-of-type {
    font-size: 18px;
  }
}


/* ==========================================================================
   33. Los huecos blancos de los mosaicos

   Problema visto en pantalla: una foto vertical ocupaba dos filas y la foto
   corta de al lado dejaba debajo un hueco en blanco del tamaño de media
   imagen. Pasaba siempre que un grupo mezclaba orientaciones y no había
   piezas suficientes para rellenar la segunda fila.

   Una rejilla con celdas de altura fija no puede resolver eso: o recorta las
   verticales, o deja agujeros.

   Solución distinta según el tamaño del grupo:

     · Grupos de 2 y 3 fotos -> todas con la misma proporción. La variedad la
       dan los anchos de columna (bloque 32), no las alturas. Sin huecos
       posibles.

     · Grupos de 4 o más -> columnas tipo revista. Cada foto conserva SU
       proporción y las columnas se rellenan solas de arriba abajo. Ni se
       recorta ninguna vertical ni queda aire muerto.

   Esto anula el "grid-row: span 2" del bloque 18, que era el origen.
   ========================================================================== */

/* --- Grupos pequeños: alturas iguales, sin agujeros --- */

.viajes-mosaico--2 .viajes-mosaico__pieza.es-vertical,
.viajes-mosaico--3 .viajes-mosaico__pieza.es-vertical {
  grid-row: auto;
  aspect-ratio: 3 / 2;
}

/* --- Grupos grandes: columnas, cada foto con su proporción --- */

.viajes-mosaico--4,
.viajes-mosaico--n {
  display: block;
  columns: 3;
  column-gap: 10px;
}

.viajes-mosaico--4 {
  columns: 2;
}

.viajes-mosaico--4 .viajes-mosaico__pieza,
.viajes-mosaico--n .viajes-mosaico__pieza {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  /* sin proporción fija: cada foto se muestra como es */
  aspect-ratio: auto;
  break-inside: avoid;
}

.viajes-mosaico--4 .viajes-mosaico__pieza.es-vertical,
.viajes-mosaico--n .viajes-mosaico__pieza.es-vertical {
  aspect-ratio: auto;
  grid-row: auto;
}

.viajes-mosaico--4 .viajes-mosaico__pieza img,
.viajes-mosaico--n .viajes-mosaico__pieza img {
  height: auto !important;
  object-fit: contain;
}

/* --- Pantallas medianas y móvil --- */

@media (max-width: 1024px) {

  .viajes-mosaico--n {
    columns: 2;
  }
}

@media (max-width: 767px) {

  .viajes-mosaico--4,
  .viajes-mosaico--n {
    columns: 2;
  }

  /* Ninguna vertical intenta ocupar dos filas. Pero NO se les impone 3/2:
     forzar una caja apaisada a una foto vertical la encogia dentro y dejaba
     el fondo crema a los lados. Cada una conserva su proporcion y ocupa
     todo el ancho del movil. */
  .viajes-mosaico .viajes-mosaico__pieza.es-vertical {
    grid-row: auto;
    aspect-ratio: var(--ar, 0.6667);
  }
}

/* ==========================================================================
   34. Alturas iguales en los mosaicos de 2 y 3

   El hueco que se veía venía de aquí: al hacer las columnas asimétricas
   (1,45fr / 1fr) y darle a cada foto la MISMA proporción, la columna ancha
   sale más alta que la estrecha. La diferencia queda como una banda blanca
   debajo de la foto corta. Medido: 13 % del bloque vacío.

   Con la proporción puesta en la pieza no hay forma de arreglarlo: el ancho
   manda sobre el alto. La solución es al revés — se fija la ALTURA de la
   fila y cada foto rellena su celda recortando por el centro.

   La altura es fluida (24 % del ancho de ventana, con topes) para que no se
   descuadre entre un portátil y una pantalla grande.
   ========================================================================== */

.viajes-mosaico--2,
.viajes-mosaico--3 {
  grid-auto-rows: clamp(210px, 24vw, 400px);
}

.viajes-mosaico--2 .viajes-mosaico__pieza,
.viajes-mosaico--3 .viajes-mosaico__pieza,
/* las verticales llevan su propia regla mas especifica en el bloque 33: hay
   que nombrarlas aqui o se quedan a 3/2 y dejan una banda blanca al lado */
.viajes-mosaico--2 .viajes-mosaico__pieza.es-vertical,
.viajes-mosaico--3 .viajes-mosaico__pieza.es-vertical {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;     /* manda la fila, no la proporcion de la foto */
}

/* La grande del mosaico asimétrico de tres ocupa las dos filas y el hueco
   entre ellas */
.elementor-widget-theme-post-content > .viajes-mosaico--3:nth-of-type(odd) > .viajes-mosaico__pieza:first-child {
  height: 100%;
}

@media (max-width: 767px) {

  .viajes-mosaico--2,
  .viajes-mosaico--3 {
    grid-auto-rows: 38vw;
  }
}

/* ==========================================================================
   35. La tarjeta de home y categorías: foto y titular pulsables

   Antes sólo se podía pulsar en "Leer más" y en las etiquetas de categoría:
   un 3 % de la tarjeta. La gente pincha en la foto y en el titular, que es
   justo lo que no llevaba enlace. Ahora los dos van al artículo (57 % de la
   superficie).

   Aquí no se usa el enlace estirado de la tarjeta de relacionados: esta
   lleva dentro enlaces propios a las categorías, y una capa por encima los
   dejaría inservibles.

   Lo que falta es avisar de que se puede pulsar: toda la tarjeta reacciona
   aunque el enlace esté sólo en dos sitios.
   ========================================================================== */

.e-loop-item .viajes-tarjeta__foto a {
  display: block;
  overflow: hidden;
}

.e-loop-item .viajes-tarjeta__foto img {
  transition: transform .45s ease;
}

.e-loop-item:hover .viajes-tarjeta__foto img {
  transform: scale(1.04);
}

.e-loop-item .viajes-tarjeta__titulo a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.e-loop-item:hover .viajes-tarjeta__titulo a {
  color: #cc2200;
}

/* El foco de teclado tiene que verse: son los dos destinos principales */
.e-loop-item .viajes-tarjeta__foto a:focus-visible,
.e-loop-item .viajes-tarjeta__titulo a:focus-visible {
  outline: 2px solid #cc2200;
  outline-offset: 3px;
}

/* ==========================================================================
   36. La franja blanca bajo el pie

   El pie son dos bloques: el oscuro con las columnas (787ec86) y debajo la
   barra del aviso legal (ftbar01). La barra tenía fondo transparente y
   26 px de margen superior, así que debajo del negro aparecían 78 px de
   blanco: 26 del hueco y 53 de la propia barra.

   Se oscurece la barra y se quita el hueco. El fondo se pone también en el
   contenedor de la ubicación, que es lo que evita que vuelva a asomar el
   blanco si algún día cambian los márgenes por dentro.

   El texto legal iba en gris #333, pensado para fondo claro: sobre negro
   quedaría en 1,3 de contraste, ilegible. Pasa a blanco al 55 %, que sobre
   #0a0a0a da unos 5,2 y cumple de sobra para un texto pequeño.
   ========================================================================== */

.elementor-location-footer {
  background-color: #0a0a0a;
}

.elementor-location-footer .elementor-element-ftbar01 {
  margin-top: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 20px !important;
  border-top: 1px solid rgb(255 255 255 / 10%);
  background-color: #0a0a0a !important;
}

.elementor-location-footer .elementor-element-ftbar01,
.elementor-location-footer .elementor-element-ftbar01 p,
.elementor-location-footer .viajes-pie-legal,
.elementor-location-footer .viajes-pie-legal p {
  color: rgb(255 255 255 / 55%) !important;
  font-size: 13px !important;
}

.elementor-location-footer .elementor-element-ftbar01 a {
  color: rgb(255 255 255 / 75%) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.elementor-location-footer .elementor-element-ftbar01 a:hover,
.elementor-location-footer .elementor-element-ftbar01 a:focus-visible {
  color: #fff !important;
}

/* ==========================================================================
   37. Mosaicos sin recortar y sin huecos

   Hasta aquí había que elegir: o las fotos rellenaban su celda recortándose,
   o conservaban su proporción y quedaba una banda blanca. En una web de un
   fotógrafo, recortarle las verticales es el peor de los dos males.

   No hace falta elegir. Es el reparto clásico de las galerías: en una fila,
   todas las fotos a la MISMA altura y con el ancho repartido en proporción a
   cada una. La panorámica ocupa más, la vertical menos, y la fila cuadra
   exactamente.

   En CSS sale de una propiedad que ahora escribe inc-mosaico.php en cada
   pieza (--ar, su proporción real):

     flex-grow: var(--ar)   -> el ancho se reparte segun la proporcion
     aspect-ratio: var(--ar) -> y entonces TODAS las alturas coinciden

   Porque si ancho = k · proporción, el alto = ancho / proporción = k para
   todas. Ni recorte ni hueco.

   Los grupos de 4 o más siguen en columnas: con tantas fotos una sola fila
   dejaría las imágenes diminutas.
   ========================================================================== */

.viajes-mosaico--2,
.viajes-mosaico--3 {
  display: flex;
  gap: 10px;
  /* se anula la rejilla y las alturas fijas de los bloques 18, 32 y 34 */
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-items: flex-start;
}

.viajes-mosaico--2 > .viajes-mosaico__pieza,
.viajes-mosaico--3 > .viajes-mosaico__pieza,
.viajes-mosaico--2 > .viajes-mosaico__pieza.es-vertical,
.viajes-mosaico--3 > .viajes-mosaico__pieza.es-vertical {
  flex: var(--ar, 1.5) 1 0;
  width: auto;
  height: auto;
  min-width: 0;
  aspect-ratio: var(--ar, 1.5);
  grid-row: auto;
}

/* La foto se ve entera: su caja ya tiene exactamente su proporción */
.viajes-mosaico--2 .viajes-mosaico__pieza img,
.viajes-mosaico--3 .viajes-mosaico__pieza img {
  height: 100% !important;
  object-fit: cover;        /* de seguridad: la caja ya encaja al milímetro */
}

/* Una vertical sola junto a una panorámica se quedaría en un sello: se le
   pone un suelo para que no desaparezca */
.viajes-mosaico--2 > .viajes-mosaico__pieza,
.viajes-mosaico--3 > .viajes-mosaico__pieza {
  min-width: 140px;
}

@media (max-width: 767px) {

  /* Una foto por fila. Con dos columnas, un grupo de tres dejaba media fila
     vacia (30 % del bloque). Asi cada foto se ve grande, con su proporcion,
     y no hay hueco posible. */
  .viajes-mosaico--2,
  .viajes-mosaico--3 {
    display: flex;
    flex-direction: column;
    grid-auto-rows: auto;
  }

  .viajes-mosaico--2 > .viajes-mosaico__pieza,
  .viajes-mosaico--3 > .viajes-mosaico__pieza,
  .viajes-mosaico--2 > .viajes-mosaico__pieza.es-vertical,
  .viajes-mosaico--3 > .viajes-mosaico__pieza.es-vertical {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: var(--ar, 1.5);
  }
}

/* ==========================================================================
   38. El tamaño de letra del artículo

   La columna se quedó en 960 px porque 720 se veía angosta. A 18 px eso son
   91 caracteres por línea, por encima de lo cómodo (60-80).

   La salida no es volver a estrechar la columna: es agrandar la letra. Medido
   en pantalla: a 18 px salian 101 caracteres, a 20 px 91, y a 22 px quedan
   unos 83. El texto se lee mejor SIN perder el ancho que se pidio. Es lo que
   hace la prensa cuando quiere columnas anchas.
   ========================================================================== */

/* 20 px a peticion del cliente (14/10/2026). Baja desde 22: a 20 son unos
   91 caracteres por linea en esta columna de 960, por encima de la horquilla
   comoda de 60-80. Si se ve largo de leer, lo que hay que estrechar es la
   columna, no volver a subir la letra. */
.elementor-widget-theme-post-content > p,
.elementor-widget-theme-post-content > ul,
.elementor-widget-theme-post-content > ol {
  font-size: 20px;
  line-height: 1.78;
}

/* La entradilla va un escalon por encima del cuerpo: 22 sobre 20 */
.elementor-widget-theme-post-content > p:first-of-type {
  font-size: 22px;
}

@media (max-width: 767px) {

  .elementor-widget-theme-post-content > p,
  .elementor-widget-theme-post-content > ul,
  .elementor-widget-theme-post-content > ol {
    font-size: 18px;
  }

  .elementor-widget-theme-post-content > p:first-of-type {
    font-size: 19px;
  }
}

/* ==========================================================================
   39. Las líneas sueltas del artículo

   Hay 312 etiquetas <hr> repartidas en 107 posts, heredadas del montaje
   antiguo. Salían como una raya negra fina a media página, sin relación con
   nada: parecía un error, no un separador.

   No se borran del contenido porque 205 de ellas sí separan secciones. Lo
   que se corrige es cómo se ven y las dos situaciones en que sobran:

     · 78 van justo delante de un subtítulo, que ya trae su propio filete
       rojo: ahí se le quita el filete al subtítulo y manda la línea.
     · 29 cuelgan al final del artículo, sin nada detrás: ésas se ocultan.

   La raya pasa a ser corta, centrada y en el rojo de la casa. Así se lee
   como una pausa deliberada entre dos partes del relato.
   ========================================================================== */

.elementor-widget-theme-post-content > hr {
  width: 90px;
  height: 0;
  margin: 3.2em auto;
  border: 0;
  border-top: 2px solid rgb(204 34 0 / 45%);
}

/* Sin doble separador: si ya hay raya, el subtítulo va limpio */
.elementor-widget-theme-post-content > hr + h2,
.elementor-widget-theme-post-content > hr + h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Una raya al final del artículo no separa nada */
.elementor-widget-theme-post-content > hr:last-child {
  display: none;
}

@media (max-width: 767px) {

  .elementor-widget-theme-post-content > hr {
    margin: 2.4em auto;
  }
}

/* ==========================================================================
   40. Los dos separadores de la plantilla del post

   La plantilla trae dos widgets de separador, los dos en negro puro de 1 px
   y de 670 px de ancho, sin alinear con la columna de texto (iban de 378 a
   1048 cuando el texto empieza en 233). Resultado: una raya negra flotando
   a media página.

   El primero, b72724a, se fue con el contenedor de la entradilla cuando se
   retiró en octubre de 2026. Queda uno.

   · 1a4a7d5 sí hace su trabajo: cierra el artículo antes del carrusel de
     relacionados. Se queda, pero alineado con el texto y en gris claro, que
     es lo que corresponde a una pausa, no a un subrayado.
   ========================================================================== */

/* La que cierra el artículo */
.elementor-location-single .elementor-element-1a4a7d5 {
  /* Elementor le pone width:100% al widget: sin !important no se estrecha */
  width: 960px !important;
  max-width: 100% !important;
  margin: 3.2em auto 0 !important;
}

.elementor-location-single .elementor-element-1a4a7d5 .elementor-divider-separator {
  width: 100% !important;
  border-top-color: rgb(0 0 0 / 12%) !important;
}

/* ==========================================================================
   41. El icono de Twitter, ahora X

   La versión de iconos que trae Elementor es Font Awesome 5, anterior al
   cambio de marca: no incluye el logotipo de X. Y no se puede actualizar sin
   tocar el plugin.

   Así que se oculta el pájaro y se dibuja la X con una máscara. Al ser
   máscara y no imagen, el icono hereda el color del enlace y sigue
   reaccionando igual al pasar por encima, en la cabecera y en el pie.
   ========================================================================== */

.elementor-social-icon-twitter .e-font-icon-svg,
.elementor-social-icon-twitter svg,
.elementor-social-icon-twitter i {
  display: none !important;
}

.elementor-social-icon-twitter::after {
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentcolor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* El color lo pone el enlace, no el svg que acabamos de ocultar */
.viajes-redes-cabecera .elementor-social-icon-twitter,
.viajes-redes-pie .elementor-social-icon-twitter {
  /* el CSS que genera Elementor para el widget pesa mas */
  color: #fff !important;
  font-size: 17px;
}

.viajes-redes-pie .elementor-social-icon-twitter {
  font-size: 19px;
}

/* Para quien usa lector de pantalla: ya no se llama Twitter */
.elementor-social-icon-twitter .elementor-screen-only {
  font-size: 0;
}

.elementor-social-icon-twitter .elementor-screen-only::after {
  font-size: 1rem;
  content: "X";
}

/* ==========================================================================
   42. El submenú del móvil se veía en blanco

   El panel del menú es oscuro y sus enlaces van en blanco. Pero el SUBMENÚ
   (el que se abre al tocar un continente) conservaba el fondo blanco por
   defecto de Elementor, mientras sus enlaces seguían siendo blancos al 72 %.
   Blanco sobre blanco: el desplegable parecía vacío.

   Es el mismo fallo que ya tuvo el panel principal, una capa más adentro.

   Se le pone un fondo apenas más claro que el panel, para que se entienda
   que es un nivel anidado, y un filete rojo a la izquierda que marca de
   dónde cuelga.
   ========================================================================== */

@media (max-width: 1024px) {

  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu {
    border-left: 2px solid rgb(204 34 0 / 55%);
    background-color: #1e1e1e !important;
  }

  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu a {
    padding-left: 28px !important;
    color: rgb(255 255 255 / 82%) !important;
    font-size: 15px !important;
  }

  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu a:hover,
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu a:focus-visible,
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu a.elementor-item-active {
    background-color: rgb(204 34 0 / 85%) !important;
    color: #fff !important;
  }

  /* Tercer nivel: un punto más adentro todavía */
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu {
    background-color: #272727 !important;
  }

  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu a {
    padding-left: 44px !important;
  }

  /* La flecha de desplegar tiene que verse sobre el panel oscuro */
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown .sub-arrow svg,
  .elementor-element-d0038cc nav.elementor-nav-menu--dropdown .sub-arrow i {
    fill: #fff;
    color: #fff;
  }
}

/* ==========================================================================
   43. Los tres botones del hero, a la misma altura

   Al añadir "Últimos viajes" los tres salían distintos: 39, 43 y 58 px de
   alto, porque cada uno heredaba ajustes diferentes y el nuevo partía el
   texto en dos líneas.

   Se igualan por CSS en lugar de pelear con los ajustes de cada widget:
   misma altura, mismo relleno y el texto en una sola línea. El primero se
   queda macizo (es la acción principal) y los otros dos como botón fantasma.
   ========================================================================== */

.elementor-element-b8eea3a .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  font-size: 15px;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Los dos secundarios, mismo tratamiento.

   El tercero se creó copiando los ajustes del segundo, que por dentro
   guarda texto y borde en rojo (el blanco se lo pone el bloque 3 por
   identificador). Así que el botón nuevo nacía rojo sobre la foto, casi
   ilegible. Hay que nombrarlo también por identificador: la clase sola
   pierde frente al CSS que Elementor genera para el widget. */
.elementor-element-c92e8c6 .elementor-button,
.elementor-element-herobtn3 .elementor-button,
.viajes-hero-boton3 .elementor-button {
  /* 2 px y blanco pleno, como el botón de fotografías */
  border: 2px solid #fff !important;
  background-color: transparent !important;
  color: #fff !important;
  transition: background-color .2s ease, border-color .2s ease;
}

.elementor-element-c92e8c6 .elementor-button:hover,
.elementor-element-herobtn3 .elementor-button:hover,
.viajes-hero-boton3 .elementor-button:hover,
.elementor-element-c92e8c6 .elementor-button:focus-visible,
.elementor-element-herobtn3 .elementor-button:focus-visible,
.viajes-hero-boton3 .elementor-button:focus-visible {
  border-color: #fff !important;
  background-color: rgb(255 255 255 / 16%) !important;
}

@media (max-width: 767px) {

  .elementor-element-b8eea3a {
    flex-wrap: wrap;
    gap: 10px;
  }

  .elementor-element-b8eea3a .elementor-button {
    min-height: 46px;
    padding: 0 18px;
    font-size: 14px;
  }
}

/* ==========================================================================
   44. Canal de vídeos y Sobre el autor

   Dos páginas nuevas, rescatadas de la web antigua.

   VÍDEOS: allí eran 19 reproductores de YouTube incrustados uno debajo de
   otro. Aquí son 19 miniaturas que sirve el propio YouTube; al pulsar se
   abre el vídeo. La página pesa lo que pesan 19 fotos, no 19 reproductores.

   OJO: en esta instalacion los CONTENEDORES no reciben la clase de
   _css_classes (solo los widgets), asi que todo lo que cuelga de un
   contenedor va por su identificador .elementor-element-xxx.

   AUTOR: el texto es el mismo, palabra por palabra. Lo que cambia es cómo se
   presenta: el retrato se queda fijo a la izquierda mientras el texto sube,
   las cifras resumen la trayectoria de un vistazo, y el cierre invita a
   escribir. En móvil el retrato pasa arriba y deja de ser fijo.
   ========================================================================== */

/* --- Cabecera común de las dos páginas --- */

.elementor-element-vidhero1 .viajes-pagina-titulo .elementor-heading-title {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}

.viajes-pagina-entrada {
  max-width: 620px !important;
  margin: 14px auto 26px;
  color: rgb(255 255 255 / 90%) !important;
  font-size: 19px;
  line-height: 1.6;
  text-align: center;
}

.viajes-pagina-entrada p {
  color: inherit !important;
}

.viajes-pagina-boton .elementor-button {
  padding: 14px 30px;
  background-color: #cc2200;
  color: #fff;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.viajes-pagina-boton .elementor-button:hover,
.viajes-pagina-boton .elementor-button:focus-visible {
  background-color: #a81c00;
}

/* --- La rejilla de vídeos --- */

.viajes-videos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.viajes-video {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #111;
}

.viajes-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, opacity .25s ease;
}

.viajes-video:hover img {
  opacity: .82;
  transform: scale(1.04);
}

/* El triángulo de reproducir, dibujado con bordes: ni icono ni imagen */
.viajes-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgb(204 34 0 / 92%);
  transition: transform .25s ease, background-color .25s ease;
}

.viajes-video__play::after {
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
  content: "";
  transform: translate(-50%, -50%);
}

.viajes-video:hover .viajes-video__play {
  background-color: #cc2200;
  transform: translate(-50%, -50%) scale(1.08);
}

.viajes-video:focus-visible {
  outline: 3px solid #cc2200;
  outline-offset: 3px;
}

/* --- Sobre el autor --- */

.elementor-element-autfoto img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

@media (min-width: 1025px) {

  /* El retrato acompaña la lectura en lugar de quedarse atrás */
  .elementor-element-autfoto {
    position: sticky;
    top: 150px;
  }
}

.viajes-autor__antetitulo .elementor-heading-title {
  color: #cc2200;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.viajes-autor__nombre .elementor-heading-title {
  margin: 6px 0 22px;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
}

.viajes-autor__cuerpo {
  font-size: 19px;
  line-height: 1.8;
}

.viajes-autor__cuerpo p {
  margin-bottom: 1.3em;
}

/* Capitular, igual que en los artículos */
.viajes-autor__cuerpo p:first-of-type::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  color: #cc2200;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 62px;
  font-weight: 700;
  line-height: .82;
}

/* --- Las cifras --- */

.elementor-element-autcifras {
  border-top: 1px solid rgb(0 0 0 / 10%);
}

.elementor-element-autc1, .elementor-element-autc2, .elementor-element-autc3 {
  flex: 1 1 0;
  padding-top: 34px;
  text-align: center;
}

.viajes-cifra__numero .elementor-heading-title {
  display: block;
  color: #cc2200;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1;
}

.viajes-cifra__texto .elementor-heading-title {
  display: block;
  margin-top: 8px;
  color: #555;
  font-size: 15px;
  letter-spacing: .02em;
}

/* --- El cierre --- */

.viajes-autor__cierre-titulo .elementor-heading-title {
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}

.viajes-autor__cierre-boton .elementor-button {
  margin-top: 18px;
  padding: 14px 32px;
  background-color: #cc2200;
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.viajes-autor__cierre-boton .elementor-button:hover,
.viajes-autor__cierre-boton .elementor-button:focus-visible {
  background-color: #a81c00;
}

/* --- Móvil --- */

@media (max-width: 1024px) {

  .elementor-element-autmain {
    flex-direction: column !important;
  }

  .elementor-element-autfoto,
  .elementor-element-auttxt {
    width: 100% !important;
  }

  .elementor-element-autfoto img {
    max-height: 60vh;
    object-fit: cover;
  }
}

@media (max-width: 767px) {

  .viajes-videos {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .elementor-element-autcifras {
    flex-wrap: wrap;
  }

  .elementor-element-autc1, .elementor-element-autc2, .elementor-element-autc3 {
    flex: 1 1 40%;
    padding-top: 24px;
  }

  .viajes-autor__cuerpo {
    font-size: 17px;
  }

  .viajes-autor__cuerpo p:first-of-type::first-letter {
    float: none;
    margin: 0;
    font-size: inherit;
    color: inherit;
  }
}

/* ==========================================================================
   45. Verticales solas o en pareja

   Antes todas las fotos seguidas entraban en la misma fila. Con el reparto
   por proporción eso significa que una vertical junto a dos panorámicas, al
   tener todas la misma altura, se queda en un sello: la mitad de ancho que
   sus vecinas.

   Ahora el filtro separa por orientación antes de maquetar: las verticales
   van de dos en dos (o solas si quedan sueltas) y las horizontales de tres
   en tres. Cada foto se ve al tamaño que le corresponde.

   Falta decirle al CSS qué hacer con una foto sola: a 1.340 px de ancho una
   vertical mediría casi 1.800 de alto y se comería la pantalla entera.
   ========================================================================== */

/* --- Una sola foto --- */

.viajes-mosaico--1 {
  display: flex;
  justify-content: center;
}

.viajes-mosaico--1 > .viajes-mosaico__pieza {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  /* el alto manda: así una vertical no se desboca y una panorámica
     sigue aprovechando el ancho */
  max-height: 78vh;
  aspect-ratio: var(--ar, 1.5);
  height: auto;
}

.viajes-mosaico--1 > .viajes-mosaico__pieza.es-vertical {
  width: min(560px, 100%);
}

.viajes-mosaico--1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Pareja de verticales --- */

.viajes-mosaico--2 > .viajes-mosaico__pieza.es-vertical {
  /* dos verticales juntas no deben llegar a 900 px de alto */
  max-height: 72vh;
}

@media (max-width: 767px) {

  .viajes-mosaico--1 > .viajes-mosaico__pieza,
  .viajes-mosaico--1 > .viajes-mosaico__pieza.es-vertical {
    width: 100%;
    max-height: none;
    /* su propia proporcion, no una impuesta */
    aspect-ratio: var(--ar, 1.5);
  }

  /* Al tener la caja la proporcion exacta de la foto, cover ya no recorta
     nada y evita el medio pixel de fondo que deja contain */
  .viajes-mosaico--1 img {
    object-fit: cover;
  }

  .viajes-mosaico--2 > .viajes-mosaico__pieza.es-vertical {
    max-height: none;
  }
}

/* ==========================================================================
   46. Legibilidad en móvil

   De la auditoría a 375 px sólo salió un aviso: los antetítulos de región de
   las tarjetas van a 11 px. En mayúsculas y con espaciado entre letras, 11 px
   en un teléfono se queda corto. Suben a 12 y se les quita algo de espaciado,
   que es lo que más cuesta leer a tamaño pequeño.
   ========================================================================== */

@media (max-width: 767px) {

  .e-loop-item .elementor-widget-post-info .elementor-icon-list-text,
  .e-loop-item .elementor-widget-post-info a,
  /* Esta hace falta aparte, y con el camino COMPLETO: la regla que pinta la
     etiqueta de categoría apunta a
     `.elementor-loop-container .e-loop-item ...:first-of-type`, cuatro
     clases, y lleva !important. Con menos clases no gana, por mucho
     !important que se le ponga. */
  .elementor-loop-container .e-loop-item .elementor-post-info__terms-list-item:first-of-type {
    font-size: 12px !important;
    letter-spacing: .06em !important;
  }

  /* El pie de foto tampoco debe bajar de 13 */
  .viajes-mosaico figcaption,
  .elementor-widget-theme-post-content figcaption {
    font-size: 13px;
  }
}

/* ==========================================================================
   47. La galería de la home en móvil

   Con 16 fotos en dos columnas, cada una medía 173 × 115 px: un sello. En la
   web de un fotógrafo eso es peor que enseñar menos.

   Ahora son 8 y en móvil se ven más altas (proporción 4:3 en vez de 3:2), que
   es lo que hace que una foto se lea como foto y no como icono. Ocho fotos en
   dos columnas son cuatro filas: menos scroll que antes y con la imagen al
   doble de superficie.
   ========================================================================== */

@media (max-width: 767px) {

  .elementor-widget-gallery .e-gallery-item {
    aspect-ratio: 4 / 3;
  }

  .elementor-widget-gallery .e-gallery-image {
    background-size: cover;
    background-position: center;
  }

  /* Los filtros, enteros y sin cortar.

     Antes iban en una tira que se deslizaba. Medido a 375 px: las cinco
     suman 477 y el hueco es de 355, así que "Naturaleza" y "Retratos"
     quedaban fuera de la vista. Y una pestaña que no se ve no se pulsa:
     media galería quedaba fuera de alcance para quien no adivinara que
     aquello se arrastraba. Lo vio el cliente.

     Se arregla por dos lados: sin mayúsculas (ocupan mucho más, y el
     letter-spacing lo multiplicaba) y dejando que lo que no cabe pase a
     la línea siguiente. Cuesta unos 30 px de alto una vez; a cambio no
     queda nada escondido. */
  .elementor-widget-gallery .elementor-gallery-title {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 13px;
    letter-spacing: .01em;
    text-transform: none;
  }

  .elementor-widget-gallery .elementor-gallery__titles-container {
    display: flex;
    gap: 4px 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 4px;
  }
}

/* ==========================================================================
   48. (retirado el 20/10/2026)

   Aquí había una regla que en móvil ocultaba las fotos pares de la galería
   y la barra de filtros. Tenía sentido cuando la galería tenía OCHO fotos:
   ocultar las pares dejaba una de cada categoría, y con una foto por
   categoría filtrar no aportaba nada.

   Hoy hay 124 fotos. Esa misma regla tiraba 62 y escondía unas pestañas
   que son la única forma de orientarse. Lo detectó el cliente, que echó en
   falta las pestañas en el móvil.

   Lo que aquel apaño resolvía -que la galería no se hiciera eterna en el
   teléfono- lo resuelve mejor el botón "Ver más fotos" (inc-galeria.php),
   que recorta a 12 y deja decidir al visitante.

   Queda escrito aquí porque la lección sirve para todo este fichero: una
   regla escrita para un tamaño concreto de contenido caduca cuando el
   contenido crece.
   ========================================================================== */


/* ==========================================================================
   49. Las promociones del autor

   En la web antigua eran seis banners apilados en una columna lateral. Aquí
   no hay columna lateral, y copiarlos tal cual dejaba un tablón de anuncios
   al final del artículo.

   Dos decisiones para que tenga forma:

   · Van sobre franja oscura, igual que el cierre de "Sobre el autor". Marca
     el final del artículo y separa la publicidad del contenido en vez de
     mezclarlos.

   · Se separan en dos grupos con su rótulo: las herramientas de viaje
     (afiliación) y el trabajo del propio Antonio (sus dos libros y el
     manifiesto). No es capricho: mezclarlos iguala una cosa con la otra, y
     sus libros no son un banner de seguros.

   Las creatividades vienen en seis tamaños distintos (250x250, 300x250,
   285x263...). Se igualan en una caja cuadrada con la imagen contenida, sin
   recortar: son anuncios, no fotografías, y recortarlos los estropea.
   ========================================================================== */

.viajes-promos {
  display: grid;
  gap: 42px;
  grid-template-columns: 1fr 1fr;
}

.viajes-promos__rotulo {
  margin: 0 0 16px;
  color: rgb(255 255 255 / 55%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* El segundo grupo lleva un filete a la izquierda que lo separa del
   primero sin necesidad de una línea a lo ancho */
.viajes-promos__grupo--obra {
  padding-left: 42px;
  border-left: 1px solid rgb(255 255 255 / 12%);
}

.viajes-promos__fila {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

.viajes-promo {
  display: block;
  color: #fff;
  text-decoration: none;
}

.viajes-promo__foto {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #1e1e1e;
}

.viajes-promo__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* son anuncios: no se recortan */
  transition: transform .3s ease, opacity .25s ease;
}

.viajes-promo:hover .viajes-promo__foto img {
  opacity: .9;
  transform: scale(1.03);
}

.viajes-promo__nombre {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  transition: color .2s ease;
}

.viajes-promo:hover .viajes-promo__nombre {
  color: #ff5533;
}

.viajes-promo__texto {
  display: block;
  margin-top: 2px;
  color: rgb(255 255 255 / 55%);
  font-size: 12.5px;
  line-height: 1.35;
}

.viajes-promo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* El titular del bloque, en blanco sobre la franja */
.viajes-promos-titulo .elementor-heading-title {
  margin-bottom: 30px;
  color: #fff;
  font-size: 28px;
}

@media (max-width: 1024px) {

  .viajes-promos {
    gap: 34px;
    grid-template-columns: 1fr;
  }

  .viajes-promos__grupo--obra {
    padding-top: 30px;
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
    border-left: 0;
  }
}

@media (max-width: 767px) {

  /* Tres por fila en 335 px deja cada anuncio en 104: ilegible.
     Dos por fila los pone en 160 y se distinguen. */
  .viajes-promos__fila {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }

  .viajes-promo__nombre {
    font-size: 13px;
  }

  .viajes-promo__texto {
    font-size: 12px;
  }

  .viajes-promos-titulo .elementor-heading-title {
    margin-bottom: 22px;
    font-size: 22px;
  }
}

/* ==========================================================================
   50. Titulares que no se adaptaban a la pantalla

   El titular del artículo salía a 52 px fijos. En un teléfono de 375 px eso
   son 8 líneas y 416 px de alto: el titular se come el 68 % de la foto de
   cabecera y no queda sitio para nada más.

   Se cambia por un tamaño fluido: crece con la pantalla en vez de saltar de
   golpe en un punto de corte. A 375 px da unos 30, a 1440 los 52 de siempre.

   `text-wrap: balance` reparte las líneas para que no quede una palabra
   suelta al final, y `overflow-wrap` parte las palabras largas antes de que
   se salgan de la caja (la más larga del blog es "desconocida...todavía",
   21 letras).
   ========================================================================== */

.elementor-location-single .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: clamp(30px, 22px + 2.2vw, 52px) !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}

/* Vale para cualquier titular del sitio: si una palabra no cabe, se parte
   antes que desbordar */
h1, h2, h3, h4,
.elementor-heading-title,
.viajes-tarjeta__titulo,
.viajes-relacionado__titulo {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

@media (max-width: 767px) {

  /* Titulares de sección y de página, también fluidos */
  .viajes-pagina-titulo .elementor-heading-title,
  .viajes-404-titulo .elementor-heading-title {
    font-size: clamp(26px, 20px + 3vw, 40px) !important;
  }

  .viajes-autor__nombre .elementor-heading-title {
    font-size: clamp(28px, 22px + 3vw, 42px) !important;
  }

  /* Los títulos de las tarjetas no deben pasar de tres líneas */
  .e-loop-item .viajes-tarjeta__titulo .elementor-heading-title,
  .viajes-relacionado__titulo .elementor-heading-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* ==========================================================================
   51. La conversación

   Había 4.641 comentarios aprobados en 272 artículos y no se veía ninguno:
   la plantilla no incluía el widget. Uno de los posts acumula 614.

   Van después del artículo y ANTES de las promociones: lo que han escrito
   los lectores durante años pesa más que un banner.

   El tratamiento huye de la lista de foro. Cada comentario es una pieza con
   su inicial en un círculo rojo a modo de retrato, el nombre en Playfair y
   el texto a la medida de lectura. Las respuestas del autor se marcan con
   un filete rojo a la izquierda, que es lo que convierte una lista en una
   conversación.
   ========================================================================== */

/* Por el identificador, no por la clase: en esta instalacion Elementor no
   imprime las clases que se le ponen a un CONTENEDOR, solo las de widget.
   Escrito como clase, este filete no llegaba a dibujarse. */
.elementor-location-single .elementor-element-comcon1 {
  border-top: 1px solid rgb(0 0 0 / 10%);
}

/* La medida de los comentarios: 820 px, mas estrecha que los 960 del
   artículo. Son lectura secundaria y se leen mejor en línea corta.

   Va por el identificador del widget porque la clase sola no ganaba: una
   regla de Elementor le ponía `max-width: 100%` y la lista salía a 1.311 px
   de ancho, con líneas larguísimas. */
.elementor-location-single .elementor-element-comtit1 .elementor-heading-title {
  max-width: 820px;
  margin: 0 auto 6px;
  padding-top: .4em;
  font-size: 28px;
}

.elementor-location-single .elementor-element-comwid1 {
  /* Dos cosas distintas, y las dos hacen falta:

     max-width  — sin !important la regla no ganaba y la lista salía a
                  1.311 px de ancho, con líneas larguísimas.
     min-width  — el widget es un elemento flexible, y de fábrica uno de
                  esos no se encoge por debajo del ancho de su contenido. Con
                  dos pingbacks cuyo título no tenía dónde partir, crecía a
                  317 px dentro de un hueco de 280 y se salía de una pantalla
                  de 320. */
  min-width: 0;
  width: 100%;

  /* Centrado con `align-self`, NO con `margin: auto`.

     Dentro de un contenedor flexible en columna, los márgenes automáticos
     anulan el estirado: el widget deja de medir lo que su hueco y pasa a
     medir lo que su contenido. Con eso se salía 17 px en una pantalla de
     320. `align-self` centra sin tocar el ancho. */
  align-self: center;
  max-width: 820px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Que las palabras largas partan, igual que en el texto de los artículos
   (bloque 54). Un comentario con una dirección pegada hacía lo mismo que el
   pingback. */
.viajes-comentarios-lista .comment-content,
.viajes-comentarios-lista .comment-content p,
.viajes-comentarios-lista .comment-content a,
.viajes-comentarios-lista .comment-author,
.viajes-comentarios-lista .comment-body a,
.viajes-comentarios-lista .pingback a {
  overflow-wrap: anywhere;
}

/* --- Cada comentario --- */

.viajes-comentarios-lista .comment-list,
.viajes-comentarios-lista .comment-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada cosa en un sitio: el hueco entre comentarios lo pone el <li>, y el
   relleno y la raya separadora el <article>. Antes se aplicaban las dos
   cosas a los dos elementos y entre comentario y comentario quedaban 52 px.

   El relleno de arriba lleva !important porque el tema pone 30 px y gana. */
.viajes-comentarios-lista .comment {
  position: relative;
  margin-bottom: 16px;
}

.viajes-comentarios-lista .comment-body {
  position: relative;
  margin-bottom: 0;
  padding-top: 14px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.viajes-comentarios-lista .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
}

/* La foto de perfil, redonda y discreta */
.viajes-comentarios-lista .comment-author img,
.viajes-comentarios-lista .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
}

.viajes-comentarios-lista .comment-metadata,
.viajes-comentarios-lista .comment-meta .comment-metadata a {
  color: #8a8a8a;
  font-size: 13px;
  text-decoration: none;
}

/* 16/1,55 en vez de 17/1,7: lo segundo es interlineado de artículo largo.
   Un comentario de dos líneas no lo necesita. */
.viajes-comentarios-lista .comment-content p {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.viajes-comentarios-lista .comment-content p + p {
  margin-top: 10px;
}

/* Nombre y fecha en la misma línea. De fábrica van en dos, que son 25 px
   por comentario; con 20 comentarios por página, 500 px de nada. */
.viajes-comentarios-lista .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 6px !important;
}

.viajes-comentarios-lista .comment-metadata {
  margin-left: auto;
}

@media (max-width: 480px) {

  /* En pantalla estrecha la fecha vuelve debajo: antes de apretarse, que se
     lea el nombre entero. */
  .viajes-comentarios-lista .comment-metadata {
    margin-left: 46px;
  }
}

/* El "Responder", pegado al comentario al que pertenece */
.viajes-comentarios-lista .reply {
  margin-top: 6px;
}

/* --- Las respuestas, anidadas --- */

.viajes-comentarios-lista .children {
  margin-top: 14px;
  margin-left: 14px;
  padding-left: 16px;
  border-left: 2px solid rgb(204 34 0 / 25%);
  list-style: none;
}

.viajes-comentarios-lista .children .comment-body {
  border-bottom: 0;
}

/* Cuando responde el autor, se nota */
.viajes-comentarios-lista .bypostauthor > .comment-body {
  padding: 12px 16px !important;
  border-left: 3px solid #cc2200;
  border-bottom: 0;
  border-radius: 0 4px 4px 0;
  background-color: #faf8f5;
}

.viajes-comentarios-lista .bypostauthor > .comment-body .comment-author::after {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #cc2200;
  color: #fff;
  content: "autor";
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- El formulario --- */

.viajes-comentarios-lista .comment-respond {
  margin-top: 24px;
  padding: 20px 22px;
  border-radius: 6px;
  background-color: #faf8f5;
}

.viajes-comentarios-lista .comment-reply-title {
  margin: 0 0 4px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
}

/* Los campos, sin el margen de fábrica entre uno y otro */
.viajes-comentarios-lista .comment-form p {
  margin: 0 0 10px;
}

.viajes-comentarios-lista .comment-form .form-submit {
  margin-bottom: 0;
}

/* Nombre, correo y web en una fila de tres. Apilados eran 222 px para tres
   campos de una línea cada uno. */
.viajes-comentarios-lista .comment-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 14px;
}

.viajes-comentarios-lista .comment-form > p {
  grid-column: 1 / -1;
}

.viajes-comentarios-lista .comment-form > .comment-form-author,
.viajes-comentarios-lista .comment-form > .comment-form-email,
.viajes-comentarios-lista .comment-form > .comment-form-url {
  grid-column: auto;
}

.viajes-comentarios-lista .comment-form label {
  display: block;
  margin-bottom: 4px;
  color: #6b6b6b;
  font-size: 13px;
}

/* El área de texto empieza en 120 px y crece sola al escribir. 248 de salida
   era medio formulario para un campo vacío. */
.viajes-comentarios-lista .comment-form textarea {
  min-height: 120px;
  field-sizing: content;
  resize: vertical;
}

@media (max-width: 600px) {

  /* Tres campos en fila no se escriben en un móvil. */
  .viajes-comentarios-lista .comment-form {
    grid-template-columns: 1fr;
  }

  .viajes-comentarios-lista .comment-form > .comment-form-author,
  .viajes-comentarios-lista .comment-form > .comment-form-email,
  .viajes-comentarios-lista .comment-form > .comment-form-url {
    grid-column: 1 / -1;
  }
}

.viajes-comentarios-lista .comment-form input[type="text"],
.viajes-comentarios-lista .comment-form input[type="email"],
.viajes-comentarios-lista .comment-form input[type="url"],
.viajes-comentarios-lista .comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgb(0 0 0 / 14%);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;   /* por debajo de 16 el móvil hace zoom al escribir */
}

.viajes-comentarios-lista .comment-form textarea:focus,
.viajes-comentarios-lista .comment-form input:focus {
  border-color: #cc2200;
  outline: 2px solid rgb(204 34 0 / 25%);
  outline-offset: 1px;
}

.viajes-comentarios-lista .comment-form .form-submit input[type="submit"],
.viajes-comentarios-lista .comment-form .submit {
  padding: 13px 30px;
  border: 0;
  border-radius: 4px;
  background-color: #cc2200;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}

.viajes-comentarios-lista .comment-form .form-submit input[type="submit"]:hover {
  background-color: #a81c00;
}

.viajes-comentarios-lista .comment-form-cookies-consent label,
.viajes-comentarios-lista .comment-notes {
  color: #6b6b6b;
  font-size: 13px;
}

@media (max-width: 767px) {

  .viajes-comentarios-titulo .elementor-heading-title {
    font-size: 24px;
  }

  .viajes-comentarios-lista .comment-content p {
    font-size: 16px;
  }

  /* El anidamiento no puede comerse el ancho en un teléfono */
  .viajes-comentarios-lista .children {
    margin-left: 0;
    padding-left: 14px;
  }

  .viajes-comentarios-lista .comment-respond {
    padding: 18px;
  }
}

/* ==========================================================================
   52. Paginación de los comentarios

   Un artículo acumulaba 614 comentarios y salían todos de golpe: 331.842 px
   de alto, unas 400 pantallas de scroll. Ahora van de 20 en 20, abriendo por
   los más recientes, y esa zona baja a 7.300 px.

   Los enlaces de página venían como texto suelto. Se les da forma de botón
   para que se vean, y el rótulo "Navegación de comentarios" se oculta: es
   para lectores de pantalla y ahí sobra a la vista.
   ========================================================================== */

.viajes-comentarios-lista .comment-navigation,
.viajes-comentarios-lista .navigation.comment-navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0;
}

.viajes-comentarios-lista .comment-navigation .screen-reader-text,
.viajes-comentarios-lista .comment-navigation > h2 {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}

.viajes-comentarios-lista .comment-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.viajes-comentarios-lista .comment-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgb(0 0 0 / 14%);
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.viajes-comentarios-lista .comment-navigation a:hover,
.viajes-comentarios-lista .comment-navigation a:focus-visible {
  border-color: #cc2200;
  background-color: #cc2200;
  color: #fff;
}

@media (max-width: 767px) {

  .viajes-comentarios-lista .comment-navigation .nav-links {
    flex-direction: column;
  }

  .viajes-comentarios-lista .comment-navigation a {
    justify-content: center;
  }
}

/* ==========================================================================
   53. Las tarjetas de "Artículos relacionados"

   El titular de la tarjeta no tenía tamaño propio, así que heredaba el de un
   titular de página: 40 px dentro de una tarjeta de 300 px de ancho. Un
   titular de cuatro líneas que tapaba la foto y empujaba el resumen fuera de
   la vista.

   Se le pone medida propia, holgada en pantalla grande y contenida en el
   móvil, y se limita el resumen a tres líneas para que todas las tarjetas
   terminen a la misma altura.
   ========================================================================== */

.viajes-relacionados .elementor-widget-theme-post-title .elementor-heading-title,
.viajes-relacionados .elementor-widget-theme-post-title .elementor-heading-title a {
  font-size: clamp(19px, 16px + .6vw, 24px) !important;
  line-height: 1.25 !important;
  text-wrap: balance;
}

.viajes-relacionados .elementor-widget-theme-post-title {
  margin-bottom: 10px;
}

/* El resumen, a tres líneas: las tarjetas acaban a la misma altura */
.viajes-relacionados .elementor-widget-theme-post-excerpt p,
.viajes-relacionados .elementor-widget-theme-post-excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.5;
}

/* ==========================================================================
   54. Palabras que no caben en la pantalla

   Tres artículos traen un enlace cuyo texto es la dirección entera, pegada
   de un tirón: 47 caracteres sin un solo espacio donde partir. En un móvil
   de 375 px ese enlace llegaba hasta los 436 y el final no se leía.

   La página no llegaba a desplazarse en horizontal, así que no saltaba a la
   vista; simplemente faltaba el final del enlace.

   Se pone la regla en general, no en esos tres: la próxima dirección que se
   pegue en un artículo hará exactamente lo mismo.
   ========================================================================== */

.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-theme-post-content a,
.elementor-widget-theme-post-content figcaption,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4 {
  /* "anywhere" y no "break-word": este parte también cuando la palabra es
     el único contenido de la línea, que es justamente este caso. */
  overflow-wrap: anywhere;
}

/* Una tabla pegada tampoco debe empujar la página */
.elementor-widget-theme-post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   55. El feed de Instagram de la portada

   La web original lleva uno, a 8 columnas pegadas de lado a lado. Aquí se
   monta distinto: las fotos van en una tira con aire, y a la izquierda un
   bloque de texto que explica qué se está viendo y lleva al perfil. Sin ese
   bloque, una rejilla de ocho cuadrados no dice nada.

   En móvil la tira se desplaza en horizontal en vez de apilar ocho fotos:
   ocho cuadrados uno detrás de otro son casi tres pantallas de scroll, y
   esto es un complemento del artículo, no el artículo.

   IMPORTANTE: mientras no haya cuenta de Instagram conectada, esta sección
   no se imprime (ver inc-instagram.php). Así que estas reglas no pintan nada
   hoy; están puestas para el día en que el cliente conecte la cuenta.
   ========================================================================== */

.viajes-instagram {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: center;
  gap: 40px;
  margin: 0 0 70px;
  padding-top: 10px;
}

.viajes-instagram__titulo {
  margin: 0 0 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(26px, 20px + 1.2vw, 34px);
  font-weight: 400;
  line-height: 1.15;
}

.viajes-instagram__entrada {
  margin: 0 0 18px;
  color: rgb(0 0 0 / 62%);
  font-size: 16px;
  line-height: 1.5;
}

.viajes-instagram__perfil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cc2200;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
}

/* La arroba, dibujada: un icono menos que cargar */
.viajes-instagram__perfil::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid currentcolor;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px currentcolor;
  transform: scale(.92);
}

.viajes-instagram__perfil:hover,
.viajes-instagram__perfil:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- La tira de fotos --- */

.viajes-instagram__tira #sb_instagram {
  padding: 0 !important;
}

.viajes-instagram__tira #sb_instagram .sbi_item {
  padding: 0 !important;
}

.viajes-instagram__tira #sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 !important;
}

.viajes-instagram__tira #sb_instagram .sbi_photo {
  border-radius: 4px;
  transition: transform .3s ease, filter .3s ease;
}

.viajes-instagram__tira #sb_instagram .sbi_item:hover .sbi_photo {
  transform: scale(1.03);
  filter: saturate(1.1);
}

/* Smash Balloon pone el alto por JS; con esto los cuadrados salen cuadrados
   desde el primer pintado, sin el salto de maquetación al cargar. */
.viajes-instagram__tira #sb_instagram .sbi_photo_wrap,
.viajes-instagram__tira #sb_instagram .sbi_photo {
  aspect-ratio: 1;
  overflow: hidden;
  height: auto !important;
}

.viajes-instagram__tira #sb_instagram .sbi_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {

  .viajes-instagram {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 767px) {

  .viajes-instagram {
    margin-bottom: 46px;
  }

  /* Ocho cuadrados apilados son casi tres pantallas. En una tira que se
     desplaza, son una. */
  .viajes-instagram__tira #sb_instagram #sbi_images {
    display: flex !important;
    overflow-x: auto;
    gap: 8px;
    margin: 0 -20px;
    padding: 0 20px 6px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .viajes-instagram__tira #sb_instagram #sbi_images::-webkit-scrollbar {
    display: none;
  }

  .viajes-instagram__tira #sb_instagram .sbi_item {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   56. Que la cabecera y el titular se lean sobre CUALQUIER foto

   La cabecera no tiene fondo propio: flota sobre lo que venga debajo, y su
   texto es crema. Mientras la foto del hero sea oscura por arriba, bien. Pero
   basta un cielo claro, una pared blanca o arena para que el menú entero
   desaparezca.

   PRIMER INTENTO, RETIRADO: un degradado oscuro en la banda. Se recortaba a
   la altura de la cabecera, así que en vez de desvanecerse se cortaba en seco
   a media opacidad y dejaba una caja gris con borde duro cruzando la foto.
   Peor que el problema.

   LO QUE SE HACE: la legibilidad la da el propio texto, con un halo oscuro
   ajustado. Se lee sobre fondo claro y no se nota sobre fondo oscuro, que es
   exactamente lo que hace falta cuando no se sabe cómo será la foto. Es el
   recurso de cualquier cabecera que va sobre imagen.

   Tres sombras por texto, y cada una hace algo:
     · 0 1px 2px   contorno pegado, define la letra
     · 0 0 4px     halo corto, la despega del fondo claro
     · 0 2px 12px  sombra larga y suave, da cuerpo sin ensuciar
   ========================================================================== */

/* El menú, las redes y la lupa llevan su halo en sus propios bloques (el del
   menú, más arriba en este fichero). Aquí solo lo que no tenía ninguno. */

/* La hamburguesa es el único mando de navegación que queda en móvil: sobre
   una foto clara desaparecía igual que el menú en escritorio. */
.elementor-location-header .elementor-menu-toggle {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 65%)) drop-shadow(0 0 4px rgb(0 0 0 / 50%));
}

body.page-id-174 .elementor-location-header .elementor-menu-toggle {
  filter: none;
}

/* El logotipo es una imagen, así que la sombra va al dibujo, no al texto.

   OJO AL SENTIDO DE LA SOMBRA. Aquí había una sombra oscura, correcta
   mientras el logotipo fue crema: un dibujo claro sobre foto se despega
   oscureciendo lo de debajo.

   El logotipo del cliente es rojo #C43328, luminancia 0,14: oscuro. Una
   sombra oscura bajo un dibujo oscuro no separa, funde. Medido contra la
   zona donde cae el logotipo en las 12 últimas fotos de cabecera, el rojo
   se perdía en 6 de ellas; los cielos azules daban 1,11:1, porque el azul
   medio y este rojo tienen casi la misma luminancia.

   Así que el halo va al revés: claro. Y cubre todo el rango, porque sobre
   foto oscura o media el blanco recorta la silueta, y sobre foto clara el
   halo se funde pero allí el rojo ya contrasta solo (4,6:1).

   El color del logotipo NO se toca: drop-shadow dibuja fuera de la
   silueta, siguiendo el canal alfa. El rojo es exactamente el del archivo
   original. Para quitarlo basta con borrar este filter. */
.elementor-location-header .elementor-element-7980dfd img {
  filter:
    drop-shadow(0 0 1px rgb(255 255 255 / 90%))
    drop-shadow(0 0 4px rgb(255 255 255 / 75%))
    drop-shadow(0 0 9px rgb(255 255 255 / 45%))
    drop-shadow(0 2px 5px rgb(0 0 0 / 25%));
}

/* En "Sobre el autor" la banda es negra y las sombras sobran */
body.page-id-174 .elementor-location-header .elementor-nav-menu a,
body.page-id-174 .elementor-location-header .elementor-item,
body.page-id-174 .elementor-location-header .elementor-search-form__toggle {
  text-shadow: none;
}

/* --- El titular del hero --- */

.elementor-location-single .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-location-archive .elementor-widget-archive-title .elementor-heading-title {
  /* Dos sombras: una pegada para definir el contorno y otra difusa para
     despegarlo del fondo. Con una sola, o no se nota o se ve sucia. */
  text-shadow:
    0 1px 2px rgb(0 0 0 / 45%),
    0 2px 18px rgb(0 0 0 / 35%);
}

/* ==========================================================================
   57. Banners de afiliado que no caben

   Dos artículos llevan un banner de Civitatis pegado con sus estilos en
   línea, y entre ellos un `min-width: 728px`. Eso impide que encoja: en una
   pantalla de 320 px el banner llegaba hasta los 728 y se salía 408 fuera.
   La página no se desplazaba —queda recortado— pero media promoción no se
   veía.

   Se le quita el suelo. Es lo único que hay que tocar: sin `min-width` ya
   obedece al `max-width: 100%` de siempre.

   El gancho es `[style*="min-width"]`, y es seguro: las piezas de los
   mosaicos llevan `--ar` en línea, no `min-width`, así que esta regla no
   las alcanza. Y si mañana se pega otro banner igual, queda cubierto sin
   tocar nada.
   ========================================================================== */

.elementor-widget-theme-post-content img[style*="min-width"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ==========================================================================
   58. El mosaico: un reparto en escritorio y otro en móvil

   El cliente preguntó si la distribución podía ser una en ordenador y otra en
   el móvil. Hasta ahora no: las filas se cerraban en el HTML y el móvil sólo
   podía apilar lo que ya venía agrupado.

   EL INTENTO QUE NO SALIÓ, Y LO QUE ENSEÑÓ

   Primero se dejó que el CSS formase las filas por anchura. Apareció un
   triángulo imposible: no se pueden tener a la vez

       1. filas sin huérfanas          (con 4 fotos, 3 + 1 deja una sola)
       2. filas que llenen el ancho
       3. fotos sin recortar

   Fijando cuántas van por fila para evitar la huérfana, las fotos de una
   misma fila dejan de ser proporcionales, flexbox las estira para igualar la
   altura y `object-fit: cover` las recorta. Se midieron 6 fotos recortadas, y
   a una apaisada se le comía un tercio. En una web de fotografía, no.

   LO QUE SE HACE

   `viajes_mosaico_repartir()` ya resolvía bien el reparto: agrupa por
   orientación y prefiere 2 + 2 antes que 3 + 1. Lo que le faltaba era poder
   repartir distinto en móvil.

   Así que las filas se agrupan en PHP, pero van DENTRO de un contenedor
   común:

     · en escritorio cada fila es su propia caja. Queda como estaba:
       justificada, sin recortes y sin huérfanas.
     · en móvil las filas pasan a `display: contents` —desaparecen como caja,
       no como contenido— y sus fotos caen en el contenedor padre, que las
       reagrupa a lo ancho de la pantalla: una apaisada, o dos verticales.

   Misma maqueta, dos repartos, sin duplicar una sola imagen.
   ========================================================================== */

.viajes-mosaico--fluido {
  --hueco: 10px;

  margin: 26px 0;
}

/* --- Escritorio y tableta: cada fila, su caja --- */

.viajes-mosaico--fluido > .viajes-mosaico__fila {
  display: flex;
  gap: var(--hueco);
  margin-bottom: var(--hueco);
}

.viajes-mosaico--fluido > .viajes-mosaico__fila:last-child {
  margin-bottom: 0;
}

/* La fila de UNA sola foto, con techo.

   Un tope de altura hace daño cuando la fila tiene más fotos: la que llega al
   tope deja de ser proporcional, las demás se estiran para igualar la altura
   y `object-fit: cover` las recorta. Pero en una fila de una no hay a quién
   estirar, así que aquí el tope es inofensivo — y es justo donde hace falta:
   sin él, una vertical sola llenaba los 1.340 px y se iba a 1.890 de alto. */
.viajes-mosaico--fluido > .viajes-mosaico__fila[data-fotos="1"] {
  justify-content: center;
}

.viajes-mosaico--fluido > .viajes-mosaico__fila[data-fotos="1"] .viajes-mosaico__pieza {
  max-width: calc(var(--ar, 1.5) * 560px);
}

/* El ancho se reparte en proporción a la forma de cada foto: así todas las de
   una fila acaban a la misma altura, sin recortes y sin huecos.

   El factor va multiplicado por 100 a propósito. Las proporciones entre fotos
   no cambian, pero se evita una regla de flexbox que se olvida fácil: cuando
   la suma de los factores de una fila es MENOR QUE 1, el navegador reparte
   sólo esa fracción del hueco. Una fila con una sola vertical (0,76) se
   quedaba a 1.017 px de 1.340. */
.viajes-mosaico--fluido .viajes-mosaico__pieza {
  flex: calc(var(--ar, 1.5) * 100) 1 0;
  min-width: 0;
  margin: 0;
  aspect-ratio: var(--ar, 1.5);
  overflow: hidden;
  border-radius: 2px;
}

.viajes-mosaico--fluido .viajes-mosaico__pieza img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform .4s ease;
}

.viajes-mosaico--fluido .viajes-mosaico__pieza:hover img {
  transform: scale(1.03);
}

@media (max-width: 1024px) {

  .viajes-mosaico--fluido {
    --hueco: 8px;
  }
}

/* --- Móvil: las filas se deshacen y las fotos se reagrupan --- */

@media (max-width: 767px) {

  .viajes-mosaico--fluido {
    --hueco: 6px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--hueco);
    margin: 18px 0;

    /* De borde a borde: el artículo tiene 20 px de margen y las fotos se los
       comen. */
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  /* Aquí está el truco: la fila deja de ser una caja, pero sus fotos siguen
     ahí y pasan a ser hijas del contenedor. */
  .viajes-mosaico--fluido > .viajes-mosaico__fila {
    display: contents;
  }

  /* Y aquí se decide el reparto del móvil. La base es proporcional a la forma
     por una altura de fila de 190 px: una apaisada pide 285 y no caben dos en
     375, así que va sola; una vertical pide 144 y caben dos.

     El factor va multiplicado por 100 a propósito: cuando la suma de los
     factores de una fila es MENOR QUE 1, el navegador reparte sólo esa
     fracción del hueco libre. Una vertical sola (0,76) se quedaba a 319 px de
     375, con banda gris a los lados. */
  .viajes-mosaico--fluido .viajes-mosaico__pieza {
    flex: calc(var(--ar, 1.5) * 100) 1 calc(var(--ar, 1.5) * 190px);
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   59. Boton "Ver mas fotos" de la galeria de la portada
   El comportamiento esta en inc-galeria.php. Aqui solo el aspecto.
   Se le da el mismo trato que a los botones del hero para que no parezca
   un anadido: misma familia, mismo radio, el rojo del sitio.
   -------------------------------------------------------------------------- */

.viajes-vermas {
  display: block;
  margin: 26px auto 0;
  padding: 13px 30px;
  border: 1px solid #cc2200;
  border-radius: 4px;
  background: transparent;
  color: #cc2200;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.viajes-vermas:hover,
.viajes-vermas:focus-visible {
  background: #cc2200;
  color: #fff;
}

.viajes-vermas:focus-visible {
  outline: 2px solid #cc2200;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .viajes-vermas { transition: none; }
}

@media (max-width: 767px) {
  .viajes-vermas {
    width: calc(100% - 48px);
    margin-top: 20px;
    padding: 14px 20px;
  }
}