/* =============================================================================
   Viajemos N.G — Rediseño «Claro Paisa»
   Capa visual sobre el tema Traveler. No sustituye estilos del motor de reservas:
   solo redefine color, tipografía, botones, formularios y tarjetas.

   Paleta, con su origen:
     #146C8C  azul      — el océano del logo
     #D6412B  rojo      — la franja del avión del logo (SOLO para urgencia)
     #0B1F2A  tinta     — texto principal
     #F7F9F8  neutro    — gris con sesgo verde, no gris puro
   ============================================================================= */

:root {
  --vng-blanco:     #FFFFFF;
  --vng-neutro:     #F7F9F8;
  --vng-neutro-2:   #EEF3F2;
  --vng-linea:      #E7ECEA;
  --vng-linea-2:    #D4DEDB;

  --vng-tinta:      #0B1F2A;
  --vng-tinta-2:    #5A6B72;
  --vng-tinta-3:    #93A1A6;

  --vng-azul:       #146C8C;
  --vng-azul-osc:   #0F5570;
  --vng-azul-claro: #E3EFF4;

  --vng-rojo:       #D6412B;   /* reservado: cupos por agotarse, avisos */
  --vng-verde:      #1F7A54;   /* reservado: confirmaciones */

  --vng-r-sm: 8px;
  --vng-r-md: 12px;
  --vng-r-lg: 16px;

  --vng-sombra:     0 1px 2px rgba(11, 31, 42, .06), 0 14px 30px -22px rgba(11, 31, 42, .5);
  --vng-sombra-alta:0 2px 6px rgba(11, 31, 42, .08), 0 22px 44px -24px rgba(11, 31, 42, .55);

  /* Poppins ya la carga el tema: se reutiliza en vez de traer otra familia.
     Caveat se conserva para los antetítulos, es parte de la voz de la marca. */
  --vng-fuente: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================ 1. Base tipográfica ============================ */

body {
  background: var(--vng-blanco);
  color: var(--vng-tinta);
  font-family: var(--vng-fuente);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.st-heading, .st-heading-section,
.elementor-heading-title {
  font-family: var(--vng-fuente);
  color: var(--vng-tinta);
  font-weight: 750;
  line-height: 1.15;
  text-wrap: balance;
}

/* La escala: el tracking se aprieta a medida que el texto crece */
h1, .st-heading { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);   letter-spacing: -.032em; }
h2             { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);  letter-spacing: -.024em; }
h3             { font-size: clamp(1.2rem, 1.08rem + .6vw, 1.5rem);  letter-spacing: -.018em; }
h4             { font-size: 1.12rem; letter-spacing: -.012em; }
h5, h6         { font-size: 1rem;    letter-spacing: -.006em; }

p { color: var(--vng-tinta-2); }

a { color: var(--vng-azul); text-decoration: none; }
a:hover { color: var(--vng-azul-osc); }

/* Foco visible: obligatorio para quien navega con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--vng-azul);
  outline-offset: 2px;
  border-radius: var(--vng-r-sm);
}

/* ============================ 2. Botones ============================ */

.btn,
.elementor-button,
button.btn,
input[type="submit"].btn {
  font-family: var(--vng-fuente);
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: -.005em;
  border-radius: 999px;
  padding: .78rem 1.4rem;
  border: 1px solid transparent;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}

/* La respuesta ocurre al presionar, no al soltar */
.btn:active,
.elementor-button:active { transform: scale(.975); }

.btn-primary,
.btn.btn-primary,
.elementor-button,
.st-btn-primary {
  background: var(--vng-azul);
  border-color: var(--vng-azul);
  color: var(--vng-blanco);
}
.btn-primary:hover,
.btn.btn-primary:hover,
.elementor-button:hover,
.st-btn-primary:hover {
  background: var(--vng-azul-osc);
  border-color: var(--vng-azul-osc);
  color: var(--vng-blanco);
}

.btn-default,
.btn-secondary {
  background: var(--vng-blanco);
  border-color: var(--vng-linea-2);
  color: var(--vng-tinta);
}
.btn-default:hover,
.btn-secondary:hover {
  background: var(--vng-neutro);
  border-color: var(--vng-tinta-3);
  color: var(--vng-tinta);
}

/* El rojo NO es un color de botón general: solo urgencia real */
.btn-danger,
.vng-urgente {
  background: var(--vng-rojo);
  border-color: var(--vng-rojo);
  color: var(--vng-blanco);
}

/* ============================ 3. Formularios ============================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  font-family: var(--vng-fuente);
  font-size: .95rem;
  color: var(--vng-tinta);
  background: var(--vng-blanco);
  border: 1px solid var(--vng-linea-2);
  border-radius: var(--vng-r-sm);
  padding: .68rem .85rem;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--vng-azul);
  box-shadow: 0 0 0 3px var(--vng-azul-claro);
  outline: none;
}
.form-control::placeholder { color: var(--vng-tinta-3); }

label,
.form-group > label {
  color: var(--vng-tinta);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: -.004em;
}

/* ============================ 4. Precio ============================ */
/* En esta dirección el precio es protagonista: se lee de un golpe. */

.price,
.price-wrapper {
  color: var(--vng-tinta);
  font-variant-numeric: tabular-nums;
}
.price .value,
.price-wrapper .text-lg {
  color: var(--vng-tinta);
  font-weight: 800;
  letter-spacing: -.022em;
}
.price .label,
.price-wrapper > *:not(.text-lg):not(.value) {
  color: var(--vng-tinta-3);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .01em;
}

/* ============================ 5. Tarjetas ============================ */

.st-border-radius { border-radius: var(--vng-r-md); }

.service-list-wrapper .item,
.st-list-service .item,
.multi-service-wrapper .item,
.item-service,
.st-loop-item {
  background: var(--vng-blanco);
  border-radius: var(--vng-r-md);
  border: 1px solid var(--vng-linea);
  box-shadow: var(--vng-sombra);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s cubic-bezier(.32, .72, 0, 1),
              border-color .2s ease;
}

/* El hover solo donde existe un puntero de verdad: en táctil se queda pegado */
@media (hover: hover) {
  .service-list-wrapper .item:hover,
  .st-list-service .item:hover,
  .multi-service-wrapper .item:hover,
  .item-service:hover,
  .st-loop-item:hover {
    box-shadow: var(--vng-sombra-alta);
    border-color: var(--vng-linea-2);
    transform: translateY(-2px);
  }
}

.item-testimonial {
  background: var(--vng-neutro);
  border: 1px solid var(--vng-linea);
  border-radius: var(--vng-r-md);
  box-shadow: none;
}

/* ============================ 6. Encabezados de sección ============================ */

.st-heading-section {
  color: var(--vng-tinta);
  letter-spacing: -.024em;
  font-weight: 750;
}
.st-heading-section small,
.st-heading-section .sub-heading {
  display: block;
  color: var(--vng-tinta-2);
  font-weight: 400;
  letter-spacing: 0;
  font-size: .95rem;
  margin-top: .4rem;
}

/* ============================ 7. Cabecera y menú ============================ */

.st-header-10,
.header-style-10,
#header.header-sticky-menu {
  background: var(--vng-blanco);
  border-bottom: 1px solid var(--vng-linea);
  box-shadow: none;
}

.menu-item > a,
#main-menu .menu-item > a {
  color: var(--vng-tinta);
  font-weight: 600;
  font-size: .93rem;
  letter-spacing: -.004em;
}
.menu-item > a:hover,
.menu-item.current-menu-item > a {
  color: var(--vng-azul);
}

.item-mega-menu .menu-item > a { font-weight: 500; }

/* ============================ 8. Página de tour ============================ */

.form-book-wrapper {
  background: var(--vng-blanco);
  border: 1px solid var(--vng-linea);
  border-radius: var(--vng-r-lg);
  box-shadow: var(--vng-sombra-alta);
}

.st-attributes .item,
.st-attributes li {
  color: var(--vng-tinta-2);
  font-size: .92rem;
}

/* ============================ 9. Pie ============================ */

footer,
.st-footer,
#footer {
  background: var(--vng-neutro);
  border-top: 1px solid var(--vng-linea);
  color: var(--vng-tinta-2);
}
footer a, .st-footer a, #footer a { color: var(--vng-tinta-2); }
footer a:hover, .st-footer a:hover, #footer a:hover { color: var(--vng-azul); }
footer h1, footer h2, footer h3, footer h4,
.st-footer h1, .st-footer h2, .st-footer h3, .st-footer h4 { color: var(--vng-tinta); }

/* ============================ 10. Utilidades del rediseño ============================ */

/* Etiqueta de escasez. Es el único uso legítimo del rojo de marca. */
.vng-cupos {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--vng-rojo);
  background: rgba(214, 65, 43, .08);
  border: 1px solid rgba(214, 65, 43, .22);
  border-radius: 999px;
  padding: .2rem .6rem;
}

.vng-wa {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #06301A !important;
  font-weight: 700;
}
.vng-wa:hover { background: #1FBA59 !important; border-color: #1FBA59 !important; }

/* ============================ 11. Portada: hero a sangre ====================
   El hero estaba PARTIDO: texto sobre blanco a la izquierda, foto a la derecha.
   Se rehace a sangre, con la estructura de la referencia que pidió el cliente:
   la foto ocupa todo, la marca en grande y translúcida atraviesa el centro, el
   titular y el CTA se anclan abajo a la izquierda y una ficha flotante entra
   por abajo a la derecha.

   Nada de esto toca la estructura de Elementor salvo un widget HTML nuevo
   (vnghero01) que aporta la marca y la ficha; el H1, el subtítulo y el botón
   siguen siendo los widgets de siempre. Reversible borrando este bloque.

   Los tres trozos y quién los pinta:
     ::before  la foto        (lo pone Elementor; aquí solo se reencuadra)
     ::after   el velo        (de este archivo)
     .vng-hero marca + ficha  (del widget vnghero01)
   ============================================================================ */

.elementor-element-1b40a4d6 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* El contenedor venía con align-items:center de Elementor y centraba la caja
     interna en vez de estirarla; sin esto el texto no llega abajo del todo. */
  align-items: stretch !important;
  background-color: #08171F !important;   /* lo que se ve si la foto no carga */
  min-height: clamp(34rem, 84svh, 52rem) !important;
  --min-height: clamp(34rem, 84svh, 52rem) !important;
}

/* --- La foto ---------------------------------------------------------------
   Elementor la pinta en ::before con un desplazamiento vertical de -800px que
   servía para el encuadre viejo. Aquí se reencuadra y se cambia por una copia
   comprimida: la original pesaba 1,4 MB y es lo primero que ve el visitante.
   image-set deja que el navegador coja el WebP y se quede en el JPG si no puede. */
.elementor-element-1b40a4d6::before {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: url("/wp-content/uploads/2026/09/hero-penol.jpg") !important;
  background-image: image-set(
      url("/wp-content/uploads/2026/09/hero-penol.webp") type("image/webp"),
      url("/wp-content/uploads/2026/09/hero-penol.jpg")  type("image/jpeg")) !important;
  background-position: 50% 48% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

/* --- El velo ---------------------------------------------------------------
   La foto del Peñol es verde brillante y muy detallada: sin velo ni el titular
   ni la marca translúcida se leen. Se oscurece arriba (para el menú), se deja
   respirar el centro y se carga abajo a la izquierda, que es donde va el texto. */
.elementor-element-1b40a4d6::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 18, 24, .46) 0%, rgba(4, 18, 24, .10) 26%,
                            rgba(4, 18, 24, .16) 52%, rgba(4, 18, 24, .78) 100%),
    linear-gradient(80deg, rgba(4, 18, 24, .52) 0%, rgba(4, 18, 24, .12) 46%, transparent 68%);
}

/* El contenido siempre por encima del velo */
.elementor-element-1b40a4d6 > * { position: relative; z-index: 1; }

/* --- La caja del contenido ------------------------------------------------- */
.elementor-element-1b40a4d6 > .e-con-inner {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  /* Los dos van con !important: Elementor los escribe desde los ajustes del
     contenedor (flex_align_items: center) y si no, el titular queda centrado. */
  align-items: flex-start !important;
  justify-content: flex-end !important;   /* el texto se ancla abajo, como la referencia */
  gap: .9rem;
  width: 100%;
  min-height: inherit;
  box-sizing: border-box;
  text-align: left;
  padding: clamp(5rem, 12vw, 8rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.25rem);
}

.elementor-element-1b40a4d6 .elementor-heading-title,
.elementor-element-1b40a4d6 .elementor-widget-container { text-align: left !important; }

/* El subtítulo traía align-self:center propio y se quedaba descolgado del titular */
.elementor-element-1b40a4d6 > .e-con-inner > .elementor-widget {
  align-self: flex-start !important;
  margin-inline: 0 !important;
}

/* --- La marca en grande y la ficha ------------------------------------------
   El widget se saca del flujo para que no empuje al titular; solo la ficha
   vuelve a recibir clics. */
/* Las dos cajas que Elementor mete alrededor del HTML (el widget y su
   contenedor) desaparecen del layout con display:contents. Se intentó antes
   poner el widget en absolute con inset:0 y su caja medía 1200x0: la ficha
   entonces se colgaba de un borde a altura cero y se iba fuera de la pantalla.
   Así el que se posiciona es .vng-hero y no hay cajas intermedias que estorben. */
.elementor-element-vnghero01,
.elementor-element-vnghero01 > .elementor-widget-container { display: contents !important; }

.vng-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.vng-hero__marca {
  position: absolute;
  left: 50%;
  top: clamp(3rem, 8.5%, 5.5rem);
  transform: translateX(-50%);
  display: block;
  white-space: nowrap;
  font-family: var(--vng-fuente), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 15vw, 13rem);
  line-height: .85;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .30);
  user-select: none;
  pointer-events: none;
}

/* --- La ficha flotante ----------------------------------------------------- */
.vng-hero__ficha {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(2rem, 5vw, 3.25rem);
  width: min(21rem, 30vw);
  display: grid;
  gap: .6rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 26px 60px -26px rgba(4, 18, 24, .75);
  text-decoration: none !important;
  pointer-events: auto;
  transition: transform .25s ease, box-shadow .25s ease;
}
.vng-hero__ficha:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 70px -26px rgba(4, 18, 24, .8);
}
.vng-hero__ficha-eti {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--vng-tinta);
}
.vng-hero__ficha-eti i {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--vng-azul);
  flex: none;
}
.vng-hero__ficha-txt {
  font-size: .9rem;
  line-height: 1.45;
  color: var(--vng-tinta-2);
}
.vng-hero__ficha-foto {
  display: block;
  border-radius: .95rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.vng-hero__ficha-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 74%;   /* el encuadre alto caía en el cielo y la ficha se veía vacía */
  display: block;
}
.vng-hero__ficha-ir {
  font-weight: 700;
  font-size: .88rem;
  color: var(--vng-azul);
}
.vng-hero__ficha-ir::after { content: " →"; }

/* --- Titular, subtítulo y CTA ---------------------------------------------- */
.elementor-element-1b40a4d6 .elementor-element-6cd7667 .elementor-heading-title {
  color: #FFFFFF !important;
  font-family: var(--vng-fuente) !important;
  font-weight: 800 !important;
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.038em !important;
  text-shadow: 0 2px 26px rgba(4, 18, 24, .55);
  text-wrap: balance;
  max-width: 14ch;
}
.elementor-element-1b40a4d6 .elementor-element-ce9de8c .elementor-heading-title {
  color: #FFFFFF !important;
  font-weight: 500;
  font-size: clamp(1rem, .95rem + .4vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: -.004em;
  text-shadow: 0 1px 14px rgba(4, 18, 24, .75);
  max-width: 42ch;
}
.elementor-element-1b40a4d6 .elementor-element-5f92e6f6 { align-self: flex-start; margin-top: .5rem; }
.elementor-element-1b40a4d6 .elementor-element-5f92e6f6 .elementor-button {
  padding: 1rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 34px -14px rgba(4, 18, 24, .7);
}

/* --- Que el texto no se meta debajo de la ficha ----------------------------- */
@media (min-width: 900px) {
  .elementor-element-1b40a4d6 .elementor-element-6cd7667,
  .elementor-element-1b40a4d6 .elementor-element-ce9de8c {
    max-width: min(34rem, 56%);
  }
}

/* --- Móvil -----------------------------------------------------------------
   Debajo de 900px no hay sitio para la ficha flotando encima del texto: entra
   en el flujo, al final, y se vuelve horizontal. La marca se queda arriba pero
   más pequeña y más tenue, para que no pelee con el titular. */
@media (max-width: 899px) {

  .elementor-element-1b40a4d6 {
    min-height: clamp(34rem, 86svh, 44rem) !important;
    --min-height: clamp(34rem, 86svh, 44rem) !important;
  }

  /* La copia de 1100px basta para una pantalla de teléfono y pesa la cuarta parte */
  .elementor-element-1b40a4d6::before {
    background-image: url("/wp-content/uploads/2026/09/hero-penol-movil.jpg") !important;
    background-image: image-set(
        url("/wp-content/uploads/2026/09/hero-penol-movil.webp") type("image/webp"),
        url("/wp-content/uploads/2026/09/hero-penol-movil.jpg")  type("image/jpeg")) !important;
    background-position: 42% 45% !important;
  }

  .elementor-element-1b40a4d6::after {
    background:
      linear-gradient(180deg, rgba(4, 18, 24, .50) 0%, rgba(4, 18, 24, .18) 24%,
                              rgba(4, 18, 24, .40) 58%, rgba(4, 18, 24, .86) 100%);
  }

  .elementor-element-1b40a4d6 > .e-con-inner {
    padding: clamp(4.5rem, 20vw, 7rem) 1.25rem 1.75rem;
    gap: .75rem;
  }

  /* .vng-hero vuelve al flujo y se va al final: en el DOM está primero. */
  .vng-hero {
    position: static;
    inset: auto;
    order: 9;
    width: 100%;
    pointer-events: auto;
    margin-top: 1.1rem;
  }

  .vng-hero__marca {
    font-size: clamp(2.6rem, 13.5vw, 4.5rem);
    top: clamp(2.75rem, 9vw, 4rem);
    color: rgba(255, 255, 255, .26);
  }

  .vng-hero__ficha {
    position: static;
    width: 100%;
    grid-template-columns: 5.5rem 1fr;
    grid-template-areas:
      "foto eti"
      "foto txt"
      "foto ir";
    align-items: center;
    column-gap: .85rem;
    row-gap: .2rem;
    padding: .8rem;
    border-radius: 1.1rem;
  }
  /* OJO: aquí NO puede quedar aspect-ratio. La foto ocupa las tres filas con
     align-self:stretch, así que su alto lo marca el texto (~142px); con una
     proporción 1/1 el ancho se iba a 142px, se salía de su columna de 76px y
     tapaba el título de la ficha. Sin proporción, manda la columna. */
  .vng-hero__ficha-foto {
    grid-area: foto;
    aspect-ratio: auto;
    height: 100%;
    border-radius: .8rem;
    align-self: stretch;
  }
  .vng-hero__ficha-eti  { grid-area: eti; font-size: .95rem; }
  .vng-hero__ficha-txt  { grid-area: txt; font-size: .8rem; line-height: 1.4; }
  .vng-hero__ficha-ir   { grid-area: ir;  font-size: .82rem; }

  .elementor-element-1b40a4d6 .elementor-element-6cd7667 .elementor-heading-title { max-width: 12ch; }
  .elementor-element-1b40a4d6 .elementor-element-5f92e6f6 { width: 100%; }
  .elementor-element-1b40a4d6 .elementor-element-5f92e6f6 .elementor-button { width: 100%; justify-content: center; }
}

/* En pantallas muy estrechas la palabra no cabe: se recorta el tamaño otra vez */
@media (max-width: 420px) {
  .vng-hero__marca { font-size: clamp(2.1rem, 13vw, 3.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .vng-hero__ficha { transition: none; }
  .vng-hero__ficha:hover { transform: none; }
}

/* ============================ 12. «Claro Paisa»: reemplazo de la paleta vieja ==========
   El tema traía verde #6FAE6E, naranja #DF5334 y turquesa #36BCA1. La dirección C
   unifica todo en el azul del océano del logo, y deja el rojo SOLO para escasez. */

/* --- Antetítulos manuscritos: se conserva la Caveat, cambia el color ---
   Son los cuatro antetítulos de sección. El H1 del hero (6cd7667) también es
   Caveat pero se queda en blanco: va sobre la foto. */
.elementor-element-f2eddd0 .elementor-heading-title,
.elementor-element-1b938103 .elementor-heading-title,
.elementor-element-66f8e355 .elementor-heading-title,
.elementor-element-40259394 .elementor-heading-title {
  color: var(--vng-azul) !important;
}

/* --- Texto justificado: abría ríos entre palabras. A bandera izquierda. --- */
.elementor-element-80990ea,
.elementor-element-80990ea *,
.elementor-widget-text-editor p[style*="justify"],
.elementor-widget-text-editor [style*="text-align: justify"] {
  text-align: left !important;
  hyphens: none;
}

/* --- Enlaces «VER TODOS…»: del naranja al azul, y con más presencia --- */
.elementor-element-2ac33caa .elementor-heading-title,
.elementor-element-2ac33caa .elementor-heading-title a,
.elementor-element-3f6deabb .elementor-heading-title,
.elementor-element-3f6deabb .elementor-heading-title a {
  color: var(--vng-azul) !important;
  font-weight: 650;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 2px solid var(--vng-azul-claro);
  padding-bottom: .3rem;
  transition: border-color .18s ease;
}
.elementor-element-2ac33caa .elementor-heading-title a:hover,
.elementor-element-3f6deabb .elementor-heading-title a:hover {
  border-bottom-color: var(--vng-azul);
}

/* El tema pinta además un punteado naranja bajo estos enlaces, que duplica el
   subrayado de arriba y es el último resto de la paleta vieja. Fuera. */
.elementor-element-2ac33caa .elementor-widget-container,
.elementor-element-3f6deabb .elementor-widget-container {
  border-bottom: none !important;
}

/* --- El bloque verde pasa a neutro claro con texto en tinta --- */
.elementor-element-515f6b02 {
  background-color: var(--vng-neutro) !important;
  border-block: 1px solid var(--vng-linea);
}
.elementor-element-515f6b02 .elementor-heading-title,
.elementor-element-515f6b02 h1,
.elementor-element-515f6b02 h2,
.elementor-element-515f6b02 h3 {
  color: var(--vng-tinta) !important;
}
.elementor-element-515f6b02 p,
.elementor-element-515f6b02 .elementor-widget-text-editor,
.elementor-element-515f6b02 .elementor-widget-text-editor * {
  color: var(--vng-tinta-2) !important;
  /* el texto venía justificado y abría ríos entre palabras */
  text-align: left !important;
  hyphens: none;
}
/* el antetítulo de ese bloque sí mantiene el acento */
.elementor-element-515f6b02 .elementor-widget-heading:first-of-type .elementor-heading-title {
  color: var(--vng-azul) !important;
}

/* --- Botones de Elementor: azul de marca, no verde ni rojo --- */
.elementor-button,
.elementor-button-link,
a.elementor-button {
  background-color: var(--vng-azul) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 650;
  letter-spacing: -.005em;
}
.elementor-button:hover,
a.elementor-button:hover {
  background-color: var(--vng-azul-osc) !important;
}

/* Excepción: los CTA de WhatsApp mantienen el verde de WhatsApp, que es
   reconocible y funciona como señal, no como color de marca. */
.elementor-element-5f92e6f6 .elementor-button,
a[href*="wa.me"].elementor-button,
a[href*="api.whatsapp"].elementor-button {
  background-color: #1F9D55 !important;
  color: #FFFFFF !important;
}
.elementor-element-5f92e6f6 .elementor-button:hover,
a[href*="wa.me"].elementor-button:hover { background-color: #178044 !important; }

/* --- Tarjeta de tour, con las proporciones de la maqueta «Claro Paisa» ---
   El tema las servía de 590×786: dos por fila y altísimas. La maqueta las tiene
   compactas y de tres en tres, con la foto arriba y el precio abajo. */

.st-list-service .services-item,
.st-list-service .swiper-slide { height: auto; }

.st-list-service .item.service-border {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--vng-linea);
  border-radius: var(--vng-r-md);
  box-shadow: var(--vng-sombra);
  overflow: hidden;
}

/* La foto manda arriba, con proporción fija para que las tres cuadren */
.st-list-service .featured-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex: 0 0 auto;
}
.st-list-service .featured-image img,
.st-list-service .featured-image a {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-list-service .content-item {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.1rem 1.15rem;
  flex: 1;
}

.st-list-service .content-item .title,
.st-list-service h3.title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--vng-tinta);
}

/* La descripción se recorta a tres líneas: en la maqueta es un apoyo, no el
   cuerpo del texto. Antes salía el contenido entero y estiraba la tarjeta. */
.st-list-service .st-tour--description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--vng-tinta-2);
  margin: 0;
}

/* Fila de datos (duración, grupo): discreta y en una línea */
.st-list-service .fixed-bottoms {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding-top: .7rem;
  margin-top: auto;
  border-top: 1px solid var(--vng-linea);
  font-size: .82rem;
  color: var(--vng-tinta-3);
}
.st-list-service .fixed-bottoms i,
.st-list-service .fixed-bottoms [class*="icon"] { color: var(--vng-azul); }

/* Pie de la tarjeta: precio a la izquierda, botón a la derecha */
.st-list-service .section-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
}
/* El botón es un <a> sin clase que el tema pinta de #075E54, el verde de la
   paleta vieja. Se le da la forma y el azul del resto del sitio. */
.st-list-service .section-footer a,
.st-list-service .section-footer .btn,
.st-list-service .section-footer a[class*="btn"] {
  flex: 0 0 auto;
  padding: .62rem 1.2rem !important;
  font-size: .88rem !important;
  font-weight: 650;
  border-radius: 999px !important;
  background-color: var(--vng-azul) !important;
  border-color: var(--vng-azul) !important;
  color: #FFFFFF !important;
  white-space: nowrap;
}
.st-list-service .section-footer a:hover {
  background-color: var(--vng-azul-osc) !important;
}

/* El precio y el botón se estaban montando cuando la cifra es larga */
.st-list-service .section-footer > *:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

/* --- Tarjetas de tour: blancas, radio suave, sombra ligera --- */
.st-list-service .item,
.st-list-service .service-item,
.st-list-service article,
.service-list-wrapper .item {
  background: #FFFFFF;
  border: 1px solid var(--vng-linea);
  border-radius: var(--vng-r-md);
  box-shadow: var(--vng-sombra);
}

/* El precio manda en la tarjeta */
.st-list-service .price,
.st-list-service .price .value,
.st-list-service [class*="price"] {
  color: var(--vng-tinta);
  font-weight: 800;
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
}

/* --- Testimonios sobre neutro, sin caja pesada --- */
.elementor-element-7ed1d80e { background-color: var(--vng-neutro) !important; }

/* El carrusel de testimonios no recortaba sus diapositivas fuera de pantalla:
   se salían 799 px a la izquierda y provocaban scroll horizontal en toda la
   página. Se recorta en el contenedor del swiper, como corresponde. */
.swiper,
.swiper-container,
[class*="style-lib-slider"] .swiper-wrapper,
.elementor-element-7ed1d80e .swiper-wrapper { overflow: hidden; }

.elementor-element-7ed1d80e .swiper,
.elementor-element-7ed1d80e [class*="swiper"]:not(.swiper-slide) {
  overflow-x: hidden;
  max-width: 100%;
}

.elementor-element-7ed1d80e { overflow-x: clip; }

/* El distintivo de reCAPTCHA (lo trae Contact Form 7) es position:fixed y se
   coloca 186 px fuera del borde derecho, lo que provocaba scroll horizontal en
   toda la página. Se colapsa al icono: sigue visible y enlazando a Google,
   que es lo que exigen sus condiciones, pero ya no desborda. */
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  left: auto !important;
  right: 4px !important;
  transition: width .3s ease !important;
}
.grecaptcha-badge:hover { width: 256px !important; }
.item-testimonial {
  background: #FFFFFF;
  border: 1px solid var(--vng-linea);
  box-shadow: var(--vng-sombra);
}
.item-testimonial p,
.item-testimonial .content { color: var(--vng-tinta-2); font-style: normal; }

/* --- Estrellas de valoración: ámbar, no naranja de marca --- */
.item-testimonial .fa-star,
.item-testimonial [class*="star"] { color: #E8A33D; }

/* ============================ 13. Preferencias del sistema ============================ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root { --vng-tinta-2: #33424A; --vng-tinta-3: #5A6B72; --vng-linea: #B9C6C2; }
}


/* fotos-reales-portada */
/* Las fotos de viajeros vienen verticales del celular y estos espacios son anchos
   o cuadrados. Se recortan con object-fit en vez de deformarlas, y el encuadre se
   sube un poco para que el recorte no pase por encima de las caras. */
.elementor-element-b1d8fcc img,
.elementor-element-6b368356 img{aspect-ratio:4/3;object-fit:cover;object-position:center 28%;width:100%;height:auto;border-radius:10px}
.elementor-element-a756510 img,
.elementor-element-6c730526 img{aspect-ratio:1/1;object-fit:cover;object-position:center 26%;width:100%;height:auto;border-radius:10px}
@media(max-width:767px){
 .elementor-element-b1d8fcc img,
 .elementor-element-6b368356 img,
 .elementor-element-a756510 img,
 .elementor-element-6c730526 img{aspect-ratio:4/3}
}

/* tarjetas-imagen-completa */
/* La foto de la tarjeta quedaba con un marco blanco de 16px arriba y a los lados,
   y encajonada con object-fit:contain.
   El object-fit se corrige directo. El padding se cancela con un margen negativo
   del mismo tamaño.

   ACTUALIZADO 19/09/2026 — ya se sabe de dónde salía ese padding, que este
   comentario daba por inencontrable: está en el CSS del tema,
   themes/traveler/v3/css/main.css línea 12905:
       .services-item.item-elementor.grid-2 > .item .featured-image{
           padding:16px 16px 0 !important; overflow:hidden; margin:0; height:100% }
   No se podía tumbar porque se intentaba con un selector de menor especificidad
   (0,2,0 contra 0,4,2 del tema), no porque la regla no existiera.

   Si algún día se quiere quitar el truco del margen negativo, la forma limpia es
   `padding:0!important` usando ESE selector largo. Ojo antes de hacerlo: el
   margen negativo es también lo que hace que el <a> mida calc(100% + 32px), y el
   bloque de móvil cuenta con eso. Medir después en 1440px y en 390px.

   Segundo aviso: este selector alcanza también al <a class="login"> del corazón
   de favoritos (solo visible con sesión iniciada), no únicamente al de la foto.
   Hoy no se nota porque envuelve un div ya posicionado.

   Las esquinas las recorta la tarjeta, que ya tiene overflow:hidden. */
.services-item .featured-image > a,
.service-list-wrapper .featured-image > a{
 display:block;
 margin:-16px -16px 0!important;
 width:calc(100% + 32px)!important;
 max-width:none!important;
 border-radius:0!important;
 overflow:hidden}
.services-item .featured-image img,
.service-list-wrapper .featured-image img{
 width:100%!important;height:100%!important;
 object-fit:cover!important;object-position:center;
 border-radius:0!important;display:block}

/* La etiqueta y el corazón quedaban tapados por la foto al agrandarse. */
.services-item .featured-image{position:relative;z-index:0}
.services-item .featured-image .location-tour,
.services-item .featured-image [class*="label"],
.services-item .featured-image [class*="badge"],
.services-item .featured-image [class*="wishlist"]{z-index:3}

/* tarjetas-altura-pareja */
/* Las tarjetas quedaban de distinta altura porque el contenedor usa display:table,
   que no se estira con la fila. Se pasa a columna flexible y se le dice al pie
   —precio y botón— que se pegue abajo: así todas terminan a la misma altura
   aunque el título ocupe una o dos líneas.
   De paso se recorta el aire que quedaba entre la fila de datos y el precio. */
.row > [class*="col-"]:has(> .services-item){display:flex;flex-direction:column}
.row > [class*="col-"] > .services-item{flex:1 1 auto;display:flex;flex-direction:column;height:auto}
.services-item > .item{display:flex!important;flex-direction:column;flex:1 1 auto;height:auto}
.services-item .content-item{flex:1 1 auto;display:flex;flex-direction:column}
.services-item .section-footer{margin-top:auto!important}

.services-item .section-footer{padding-top:10px!important}
.services-item .fixed-bottoms{padding-top:8px!important}
.services-item .st-tour--description{margin-bottom:10px!important}
.services-item .title{margin-bottom:10px!important}


/* tarjetas-movil-horizontal ------------------------------------------------
   En teléfono las tarjetas de tour pasan a horizontal: foto a la izquierda,
   título + descripción + precio + botón a la derecha. Así entran tres en una
   sola pantalla en vez de una y media.

   Dos cosas que no son obvias y conviene no deshacer:

   1) .content-item es un contenedor flex (lo pone el bloque de arriba para
      igualar alturas). Un hijo DIRECTO de un flex no puede usar
      -webkit-line-clamp: el navegador lo convierte a «flow-root» y el recorte
      no ocurre, así que el texto quedaba cortado a media línea. Por eso el
      recorte se aplica al <a> del título y al <p> de la descripción, que sí
      son hijos normales.

   2) Los max-height son múltiplos exactos de line-height (36 = 2×18,
      48 = 3×16). Si se cambia el tamaño de letra hay que recalcularlos, o el
      corte vuelve a caer a mitad de renglón.                                */
@media (max-width: 767px){

  .services-item{margin-bottom:14px!important}
  .services-item > .item{flex-direction:row!important;align-items:stretch!important;height:172px!important}

  /* Foto: mancha izquierda a sangre. El margen negativo cancela el relleno de
     16px del tema, igual que en el bloque tarjetas-imagen-completa.          */
  .services-item .featured-image{width:38%!important;flex:0 0 38%!important;aspect-ratio:auto!important;align-self:stretch;overflow:hidden}
  .services-item .featured-image > a{margin:-16px 0 0 -16px!important;width:calc(100% + 16px)!important;height:calc(100% + 16px)!important}
  .services-item .featured-image img{height:100%!important;object-fit:cover!important}

  .services-item .content-item{flex:1 1 auto!important;padding:11px 13px!important;min-width:0;overflow:hidden}

  /* Título: dos renglones como máximo, terminando en puntos suspensivos. */
  .services-item .title{flex:0 0 auto!important;font-size:14.5px!important;line-height:18px!important;margin:0 0 5px!important;max-height:36px!important;overflow:hidden!important}
  .services-item .title a{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;line-height:18px!important}

  /* Descripción: tres renglones como máximo. */
  .services-item .st-tour--description{flex:0 0 auto!important;display:block!important;margin:0!important;max-height:48px!important;overflow:hidden!important}
  .services-item .st-tour--description p{margin:0!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-size:12px!important;line-height:16px!important}

  /* La fila de «Duracion / Grupos» no cabe en horizontal y se oculta. */
  .services-item .fixed-bottoms{display:none!important}

  /* Pie pegado abajo: precio a la izquierda, botón a la derecha. */
  .services-item .section-footer{flex:0 0 auto!important;margin:auto 0 0!important;padding:9px 0 0!important;border-top:1px solid rgba(0,0,0,.09)}
  .services-item .section-footer .st-price__wrapper{margin:0!important;padding:0!important;align-items:center!important;flex-wrap:nowrap!important;gap:6px}
  .services-item .section-footer .right{margin:0!important;padding:0!important}
  .services-item .section-footer .price--tour,
  .services-item .section-footer .price--tour *{font-size:16px!important;white-space:nowrap;line-height:1.2!important}
  .services-item .st-btn--book{margin:0!important;padding:0!important}
  .services-item .st-btn--book a{font-size:12.5px!important;padding:8px 14px!important;white-space:nowrap;line-height:1.1!important}


  /* La foto tenía ancho automático y sólo cubría 161 de los 177px de su caja:
     quedaba una franja blanca entre la foto y el texto. */
  .services-item .featured-image img{width:100%!important}

  /* La etiqueta de categoría (PUEBLITOS, DÍAS DE SOL, TOURS EN MEDELLÍN) sube
     casi al borde de la foto y se achica. El max-width la mantiene dentro de
     la imagen: «Tours en Medellín» a 14px medía 168px sobre una foto de 161. */
  .services-item .featured-image .st-location--style4{
    top:7px!important;left:7px!important;margin:0!important;
    font-size:10px!important;line-height:1.1!important;padding:4px 8px!important;
    max-width:calc(100% - 30px)!important;white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
  }
}


/* tarjetas-mascara-centrada ------------------------------------------------
   La miniatura que genera WordPress para las tarjetas es 450x300 (3:2). Al
   fijarle esa proporción a la máscara y decirle a la foto que la llene con
   object-fit:cover y object-position:center, todas las fotos quedan centradas
   en su recorte y todas las máscaras miden igual, venga la imagen que venga.
   (En teléfono manda el bloque tarjetas-movil-horizontal, que le da la altura
   completa de la tarjeta en vez de una proporción.)                         */
@media (min-width: 768px){
  /* CUIDADO: la proporción va en la FOTO, nunca en el enlace que la envuelve.
     Con aspect-ratio en el <a> y height:100% en la <img> se forma un bucle de
     tamaños: el enlace pide su alto a la foto y la foto se lo pide al enlace.
     El resultado fue una caja de 834px de alto que aplastó el título, el
     precio y el botón hasta dejarlos invisibles (19/09/2026). */
  .services-item .featured-image > a{display:block;overflow:hidden}
  .services-item .featured-image img{
    width:100%!important;height:auto!important;aspect-ratio:3/2!important;
    object-fit:cover!important;object-position:center center!important;
  }
}
@media (max-width: 767px){
  .services-item .featured-image img{object-position:center center!important}
}


/* interlineado-textos -------------------------------------------------------
   El tema trae 26px de interlineado sobre letra de 14px (1,86) y 16px de
   margen entre párrafos. Como cada renglón de las descripciones es un párrafo
   suelto, el resultado se leía a doble espacio. Se baja a 1,6 y se acorta el
   margen. No se toca el interlineado de menús ni botones.                    */
.st-description,
.st-description p,
.st-description li,
.st-overview,
.st-overview p,
.entry-content p,
.elementor-widget-text-editor p,
.st-faq p,
.tour-content p{line-height:1.6!important}

.st-description p,
.st-overview p,
.entry-content p{margin-bottom:8px!important}

.st-description ul,.st-description ol{margin-bottom:10px!important}
.st-description li{margin-bottom:4px!important}


/* tarjetas-desktop-altura-de-la-foto ---------------------------------------
   POR QUÉ EXISTE ESTE BLOQUE (19/09/2026):
   El tema trae, en themes/traveler/v3/css/main.css:
       .services-item.item-elementor.grid-2 > .item          { display: table }
       ... > .item .featured-image                           { height: 100%;
                                                               padding: 16px 16px 0 !important }
       ... > .item .featured-image a                         { height: 100% }
   Mientras .item era `display:table` ese 100% no resolvía contra nada y daba
   igual. El bloque tarjetas-altura-pareja lo cambió a `display:flex` en
   columna y entonces el 100% empezó a resolverse contra la tarjeta entera: la
   máscara de la foto pasó a medir lo mismo que la tarjeta (657px medidos),
   empujó .content-item justo por debajo del borde y el `overflow:hidden` de
   .item se comió título, descripción, precio y botón. En pantalla quedaba solo
   la foto y un hueco blanco de 401px.

   La altura la tiene que marcar la foto (aspect-ratio 3/2 del bloque
   tarjetas-mascara-centrada), nunca un porcentaje.

   En teléfono NO se toca: allí la tarjeta es horizontal de 172px y ese
   height:100% es justo lo que se quiere.
   (De paso: el `padding:16px 16px 0 !important` de esa misma regla del tema es
   el marco de 16px que el bloque tarjetas-imagen-completa cancela con margen
   negativo. Ya no es un misterio.)                                          */
@media (min-width: 768px){
  .services-item .featured-image,
  .services-item.item-elementor.grid-2 > .item .featured-image{
    height:auto!important;
    flex:0 0 auto!important;
  }
  .services-item .featured-image > a,
  .services-item.item-elementor.grid-2 > .item .featured-image a{
    height:auto!important;
  }
}

/* ============================ 22. Ficha del tour: salida a WhatsApp ==========
   Cuando alguien pulsa «Reservar por WhatsApp» se le abre el chat en otra
   pestaña. Si un bloqueador lo impide —o está en el navegador de dentro de
   Instagram— no se le saca de la página: se le deja este enlace debajo del
   botón para que entre a mano. Lo pinta viajemosng-reserva-whatsapp.php. */

.vng-wa-salida {
  margin: .85rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  text-align: center;
  color: var(--vng-tinta-2);
}
.vng-wa-salida a {
  color: var(--vng-azul);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El mismo aviso, cuando lo devuelve el servidor porque el script no llegó */
.message-wrapper-sendemail a {
  color: var(--vng-azul);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================ 23. «¿A dónde querés viajar?»: el aire ==========
   El enlace «VER TODOS LOS DESTINOS» colgaba de un margen superior de 84px y
   quedaba pegado al final de la sección (0px por debajo): mucho vacío encima,
   nada debajo, y el ojo lo lee como si se hubiera caído del bloque. Se reparte:
   menos aire arriba y algo de aire abajo, para que quede centrado en su hueco. */

.elementor-element-149a69a5 {
  margin-top: 36px !important;
  padding-bottom: 44px !important;
}

@media (max-width: 899px) {
  .elementor-element-149a69a5 {
    margin-top: 26px !important;
    padding-bottom: 32px !important;
  }
}

/* ============================ 24. Testimonios: el parpadeo de carga ==========
   Se veía UN testimonio a la izquierda y dos huecos en blanco al lado. No era
   el carrusel: era el momento ANTES de que Swiper arranque. Hasta que su JS
   corre, cada `.swiper-slide` mide el ancho entero del contenedor (1200px), así
   que solo cabe el primero y el resto de la fila queda vacía. En una conexión
   lenta eso dura segundos, y justo en el bloque que debería dar confianza.

   Aquí se le da de antemano el ancho que Swiper les pondrá después. SIN
   !important a propósito: en cuanto Swiper arranca escribe `width` en línea y
   ese gana, así que esto solo manda durante el parpadeo. */

.st-testimonial .swiper-wrapper { display: flex; }

.st-testimonial .swiper-slide {
  flex: 0 0 auto;
  width: calc((100% - 48px) / 3);   /* 3 por fila, con los 24px de separación */
}

@media (max-width: 1023px) {
  .st-testimonial .swiper-slide { width: 100%; }   /* 1 por fila, como el carrusel */
}

/* ============================ 25. «Desde» de la caja de reserva ==============
   La cabecera de la caja de reserva es salmón (#DF9682) y el «Desde» venía en
   --vng-tinta-3 (#93A1A6): contraste 1,12:1, o sea invisible. Se pasa a blanco,
   que es lo que pidió el cliente.

   Queda dicho para quien lea esto después: blanco sobre ese salmón da 2,38:1 y
   el mínimo de la norma para texto normal es 4,5:1. Se compensa subiendo peso y
   tamaño, que ayuda a la vista aunque no cambie la cifra. Si algún día se quiere
   que pase de verdad, hay dos caminos: dejar el «Desde» en tinta oscura
   (#0B1F2A sobre el salmón da 7,09:1) u oscurecer el salmón de la cabecera.

   El importe se queda en tinta oscura a propósito: en blanco bajaría de 7,09:1
   a 2,38:1 y sería un retroceso justo en el dato que más importa. */

#st-content-wrapper .form-book-wrapper .form-head .price .label,
.form-book-wrapper .form-head .price .label {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: .9rem;
  opacity: 1;
}

/* La barra fija del móvil tiene fondo claro, no salmón: ahí el blanco
   desaparecería. Ese «Desde» tenía 2,66:1 sobre blanco, que tampoco se leía
   bien; se baja a un gris que sí pasa (5,55:1). */
.hotel-target-book-mobile .price-wrapper,
.tel-target-book-mobile .price-wrapper {
  color: #5A6B72;
}