/* ===========================================================================
   Málaga Sightseeing · hoja de estilos global
   Snippet de WPCode, tipo CSS, ubicación «everywhere».

   Todas las clases propias van prefijadas con .mls- para no chocar con
   GeneratePress ni con GenerateBlocks. Los bloques del contenido NO llevan
   estilos propios: todo vive aquí, en un único sitio.

   La paleta sale del logotipo actual: azul mar y cielo, sol y arena.
   =========================================================================== */

/* --- Tipografías, alojadas en el propio dominio --------------------------
   Descargadas de Google Fonts y servidas desde wp-content/uploads/mls-fonts/.
   Así no se transfiere la IP del visitante a un tercero y se evita una
   conexión externa. La ruta es relativa para que siga valiendo tras migrar.

   Una sola familia, Outfit, para títulos y texto: la misma que
   welcometoseville.com (Eduardo, 20-10-2026). Antes eran Outfit en títulos e
   Outfit en el texto. Es variable: un fichero cubre todos los grosores, de 100
   a 900, y el navegador interpola el que haga falta.
   -------------------------------------------------------------------- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/mls-fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/uploads/mls-fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mls-mar: #176B74;
  --mls-mar-oscuro: #0F4D55;
  --mls-cielo: #5A96F0;          /* el azul del logo: decorativo, nunca texto sobre blanco */
  --mls-cielo-osc: #2F6FD0;
  --mls-sol: #FFCC00;            /* el amarillo del logo */
  --mls-agua: #8ACAC7;           /* el azul de la ola: decorativo, nunca texto */
  --mls-agua-suave: #F0F8F7;

  /* Ritmo vertical: toda la web separa con estas dos medidas. */
  --mls-sep: 22px;              /* entre tarjetas */
  --mls-sep-banda: 44px;        /* entre bandas a todo el ancho */
  --mls-pad-card: 30px 34px;    /* dentro de una tarjeta */
  --mls-tinta: #14222B;
  --mls-gris: #44545C;
  --mls-muted: #5C6970;
  --mls-arena: #F7F2E8;
  --mls-card: #FFFFFF;
  --mls-suave: #E4F2F1;
  --mls-linea: #E3DCCD;

  /* colores de categoría: solo para los bordes del calendario y las fichas */
  --mls-c-nature: #2E7D5B;
  --mls-c-villages: #C2603A;
  --mls-c-cities: #176B74;
  --mls-c-beyond: #6B4E9E;
}

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: Outfit, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: var(--mls-gris);
  background: var(--mls-arena);
}
h1, h2, h3, h4 { font-family: Outfit, system-ui, sans-serif; color: var(--mls-tinta); line-height: 1.18; }

/* Nada desborda a lo ancho. clip en vez de hidden: hidden convertiria el
   documento en un contenedor de scroll y romperia la barra lateral sticky. */
html, body { overflow-x: clip; max-width: 100%; }
/* La cabecera es fija: los anclajes no deben quedar debajo. */
html { scroll-padding-top: 92px; }
img, iframe, video, table { max-width: 100%; }
/* El carrusel de resenas de Trustindex si se desplaza, pero su gesto no debe
   arrastrar a la pagina. */
.ti-reviews-container-wrapper { overscroll-behavior-x: contain; }
/* El dedo en vertical mueve la página (lo hace el navegador, sin esperar al JS
   de Trustindex); en horizontal pasa opiniones. Ver 10-rendimiento.php. */
.ti-widget .ti-reviews-container { touch-action: pan-y pinch-zoom; }
/* En el móvil, una opinión por vez. Trustindex trae el HTML con las columnas del
   escritorio (ti-col-3) y las recalcula con JS; si ese cálculo no llega a correr,
   salían tres tarjetas de 90 px con el texto partido. Las flechas siguen pasando
   de una en una. */
@media (max-width: 600px) {
  .ti-widget .ti-widget-container .ti-review-item { flex: 0 0 100% !important; max-width: 100% !important; }
}
/* La línea de posición bajo las opiniones: la de Trustindex es gris de 3 px y no
   se ve, sobre todo en el fondo oscuro. Más gruesa y con el color de la marca,
   para que se entienda que hay más opiniones al lado. */
.ti-widget .ti-controls-line {
  height: 6px !important; width: 170px !important; border-radius: 999px !important;
  background: var(--mls-linea) !important;
}
.ti-widget .ti-controls-line .dot {
  height: 6px !important; border-radius: 999px !important; background: var(--mls-mar) !important;
}
.mls-why .ti-widget .ti-controls-line { background: rgba(255,255,255,.3) !important; }
.mls-why .ti-widget .ti-controls-line .dot { background: var(--mls-sol) !important; }
a { color: var(--mls-mar); text-decoration: none; }
a:hover { color: var(--mls-mar-oscuro); }

.mls-eyebrow {
  font-family: Outfit, sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--mls-mar);
  margin-bottom: 6px; display: block;
}
.mls-note { font-size: 13.5px; color: var(--mls-muted); margin-top: 8px; }
.mls-lead { font-size: 17px; max-width: 760px; }

.mls-card { background: var(--mls-card); border-radius: 24px; padding: var(--mls-pad-card); margin-bottom: var(--mls-sep); }
.mls-card > h2 { font-size: clamp(24px, 2.8vw, 30px); font-weight: 800; letter-spacing: -.4px; margin-bottom: 16px; }

.mls-btn {
  display: inline-block; background: var(--mls-mar); color: #fff;
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 15px;
  padding: 14px 30px; border-radius: 999px;
}
.mls-btn:hover { background: var(--mls-mar-oscuro); color: #fff; }
.mls-btn--ghost { background: transparent; color: var(--mls-mar); border: 2px solid var(--mls-mar); padding: 12px 28px; }
.mls-btn--mini { font-size: 13.5px; padding: 9px 18px; }
/* Sobre fondo oscuro (el bloque A de la ficha): contorno blanco. */
.mls-btn--claro { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .78); padding: 12px 28px; }
.mls-btn--claro:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
/* Al pulsar un botón el tema pone el texto en negro (a:focus, a:active), y en
   el móvil, donde no hay hover, se quedaba así: negro sobre el azul oscuro. */
.mls-btn:focus, .mls-btn:active { color: #fff; }
.mls-btn--ghost:focus:not(:hover), .mls-btn--ghost:active:not(:hover) { color: var(--mls-mar); }
.mls-btn--claro:focus, .mls-btn--claro:active,
.mls-home-hero .mls-btn--ghost:focus, .mls-home-hero .mls-btn--ghost:active { color: #fff; }
/* El botón que lleva de un widget de opiniones a la página con todas. */
.mls-masres { margin: 18px 0 0; text-align: center; }

.mls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mls-chip {
  background: var(--mls-suave); color: var(--mls-tinta); font-family: Outfit, sans-serif;
  font-size: 13px; font-weight: 700; border-radius: 999px; padding: 7px 15px;
}
.mls-chip--first { background: var(--mls-sol); }

/* --- Hero de la ficha, a todo el ancho antes del contenido ---------------- */
.mls-hero { padding: var(--mls-sep) 0 0; margin-bottom: var(--mls-sep); }
.mls-hero__inner {
  background: var(--mls-card); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; min-height: 420px;
}
.mls-hero__txt { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; }
.mls-hero h1 { font-size: clamp(29px, 3.5vw, 42px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 14px; }
.mls-hero__short { font-size: 16.5px; margin-bottom: 20px; }
.mls-hero__img { position: relative; }
.mls-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mls-hero .mls-pill { align-self: flex-start; }

.mls-crumbs { font-size: 13px; color: var(--mls-muted); margin-bottom: 14px; }
.mls-crumbs a { color: var(--mls-muted); text-decoration: underline; }
.mls-pill {
  display: inline-block; background: var(--mls-tinta); color: #fff; font-family: Outfit, sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  border-radius: 999px; padding: 5px 13px; margin-bottom: 14px;
}

/* --- Hero de la home, a ancho completo -------------------------------------
   La seccion se sale del contenedor hasta los bordes de la ventana; el texto
   vuelve a ir en un .grid-container, asi que queda alineado con el resto. */
.mls-home-hero {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: 0;
  margin-right: calc(50% - 50vw); margin-bottom: var(--mls-sep-banda);
  /* La foto ocupa todo el ancho, así que cuanto más ancha la pantalla, más
     zoom. El alto crece con el ancho para enseñar siempre la misma porción:
     de la chica a la plaza de toros, con poco cielo (Eduardo, 16-10-2026). */
  display: flex; align-items: center; min-height: clamp(560px, 46vw, 900px);
  background: #0E2430 center 88%/cover no-repeat; overflow: hidden;
  background-image: var(--mls-hero-lg);
}
/* El hero va pegado a la cabecera: el margen superior del main dejaba una
   raya de 4 px entre el menú y la foto. */
.site-main:has(> article .mls-home-hero) { margin-top: 0; }
/* El velo solo oscurece donde va el texto, a la izquierda. La chica que mira
   Málaga está a la derecha y ahí la foto queda limpia: es la imagen de la
   portada y tiene que verse. */
.mls-home-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,30,42,.80) 0%, rgba(10,30,42,.58) 32%, rgba(10,30,42,.12) 62%, rgba(10,30,42,0) 80%);
}
.mls-home-hero > .grid-container { position: relative; z-index: 2; width: 100%; }
/* El hero mide 100vw para que la foto llegue a los dos bordes, pero en Windows
   100vw incluye la barra de desplazamiento: el interior quedaba desplazado y,
   por debajo de 900 px, el texto del hero empezaba 7 px a la izquierda que el
   de las tarjetas. Ahora el interior mide lo mismo que el contenido de la
   página (100cqi del .entry-content) y va centrado, así que se alinea a
   cualquier ancho. Donde no hay unidades de contenedor se queda como estaba. */
.entry-content { container-type: inline-size; }
.mls-home-hero > .grid-container { width: 100cqi; max-width: 100cqi; margin-inline: auto; padding-inline: 0; box-sizing: border-box; }
.mls-home-hero__txt { max-width: 40em; padding: 64px 0; }
.mls-home-hero__eb {
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 12.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--mls-sol);
  margin: 0 0 14px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.mls-home-hero h1 {
  font-size: clamp(31px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.6px;
  line-height: 1.05; margin: 0 0 18px; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}
.mls-home-hero__s {
  font-size: 19px; line-height: 1.6; color: #fff; margin: 0 0 28px; max-width: 34em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.mls-home-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
/* Sin negrita en el hero: con letra pequeña sobre la foto se lee peor (Eduardo, 20-10-2026). */
.mls-home-hero__ctas .mls-btn { font-weight: 500; }
.mls-home-hero .mls-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .72); background: rgba(0, 0, 0, .24); }
.mls-home-hero .mls-btn--ghost:hover { background: rgba(0, 0, 0, .44); border-color: #fff; color: #fff; }
/* Las marcas de confianza, con un check: con forma de pildora parecian botones. */
.mls-home-hero__tr { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.mls-home-hero__tr li {
  font-size: 13.5px; font-weight: 400; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
/* La insignia mide 64 px una vez cargada: se reserva su hueco para que el
   rótulo de debajo no salte cuando aparece. */
.mls-home-hero__res { margin-top: 18px; }
.mls-home-hero__ti { min-height: 64px; }
/* Trustindex centra la insignia; aquí va alineada a la izquierda, con el texto del hero. */
.mls-home-hero__res .ti-widget { text-align: left !important; }
.mls-home-hero__res .ti-widget-container { margin-left: 0 !important; margin-right: auto !important; }
.mls-home-hero__resl { font-size: 12.5px; color: rgba(255,255,255,.8); margin: 6px 0 0; }
.mls-home-hero__tr li::before { content: "\2713"; color: var(--mls-sol); font-weight: 800; margin-right: 8px; }
@media (max-width: 900px) {
  /* En vertical el texto ocupaba toda la foto y la chica quedaba detrás del
     párrafo. Ahora la foto va arriba, limpia y encuadrada en ella, y el texto
     debajo sobre el mismo azul noche en el que se funde la imagen. */
  /* La foto se recorta por arriba: se queda un cuarto del cielo fuera, y así
     el texto sube y los dos botones caben en la primera pantalla. */
  .mls-home-hero {
    --mls-hero-foto: clamp(210px, 60vw, 400px);
    --mls-hero-esc: calc(var(--mls-hero-foto) * 1.34);
    display: block; min-height: 0; padding-top: calc(var(--mls-hero-foto) - 56px);
    background-color: #0E2430; background-repeat: no-repeat; background-image: var(--mls-hero-sm);
    background-size: auto var(--mls-hero-esc);
    background-position: 72% calc(var(--mls-hero-foto) - var(--mls-hero-esc));
  }
  .mls-home-hero::after {
    background: linear-gradient(180deg, rgba(14,36,48,0) 0, rgba(14,36,48,0) calc(var(--mls-hero-foto) - 150px),
      #0E2430 calc(var(--mls-hero-foto) - 4px), #0E2430 100%);
  }
  .mls-home-hero__txt { padding: 0 0 32px; }
  .mls-home-hero__eb { margin-bottom: 8px; }
  .mls-home-hero h1 { margin-bottom: 12px; }
  .mls-home-hero__s { font-size: 16.5px; line-height: 1.5; margin-bottom: 20px; }
  .mls-home-hero__ctas { flex-direction: column; }
  .mls-home-hero__ctas .mls-btn { text-align: center; }
  .mls-home-hero__tr { flex-direction: column; gap: 7px; }
}

/* --- La ficha usa el esqueleto del tema ----------------------------------
   Contenido 70 % y barra lateral 30 %, como SevillaQR. Antes se pintaba un
   grid propio que se abria DENTRO del articulo, debajo del hero: por eso el
   hero y las tarjetas no tenian el mismo ancho. */
.single-tour .site-content { gap: 34px; }
.single-tour .content-area { width: 70%; }
.single-tour .is-right-sidebar { width: 30%; }
.single-tour #right-sidebar .inside-right-sidebar { position: sticky; top: 96px; padding: 0; }

/* --- Barra lateral de reserva -------------------------------------------- */
.mls-reserva { background: var(--mls-card); border-radius: 22px; overflow: hidden; scroll-margin-top: 90px; }
.mls-reserva__hd { padding: 20px 22px 14px; text-align: center; }
.mls-reserva__hd h2 { font-size: 20px; font-weight: 800; margin: 0; }
.mls-reserva__pvp { font-family: Outfit, sans-serif; font-size: 15px; color: var(--mls-gris); margin: 12px 0 0; }
.mls-reserva__pvp strong { font-size: 32px; font-weight: 800; color: var(--mls-tinta); margin-right: 5px; }
.mls-reserva__nota { font-size: 13px; color: var(--mls-muted); margin: 4px 0 0; }
.mls-reserva__tranq { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--mls-gris); }
.mls-reserva .load-turitop { margin: 0 18px; }
.mls-reserva__ft { padding: 16px 22px 22px; }
/* La letra pequeña bajo el calendario: los dos párrafos con el mismo cuerpo y
   la misma alineación (antes uno a 12,5 px a la izquierda y otro a 12 px centrado). */
.mls-reserva__pie, .mls-reserva__legal { font-size: 12.5px; line-height: 1.55; color: var(--mls-muted); margin: 0; text-align: center; }
.mls-reserva__legal { margin-top: 10px; }

/* --- El calendario de reservas dentro de una página ----------------------
   No es la barra lateral de la ficha: aquí van dos, uno por sentido, en una
   rejilla que se apila en el móvil. */
.mls-reservas2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: var(--mls-sep) 0 0; }
.mls-reservabox {
  background: var(--mls-card); border: 1px solid var(--mls-linea);
  border-radius: 20px; padding: 20px 18px 8px; min-width: 0;
}
.mls-reservabox__t {
  font-family: Outfit, sans-serif; font-size: 17px; font-weight: 800;
  color: var(--mls-tinta); margin: 0 0 12px;
}
.mls-reservabox .load-turitop { margin: 0 -6px; }

/* --- Relacionados, a todo el ancho --------------------------------------- */
.mls-mas { padding: var(--mls-sep-banda) 0 0; }
.mls-mas h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; margin-bottom: 16px; }
.mls-mas__todas { text-align: center; margin-top: 22px; }
.mls-mas__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

/* --- Bloque A ------------------------------------------------------------ */
.mls-why { background: var(--mls-mar-oscuro); border-radius: 24px; padding: var(--mls-pad-card); color: #DCE8EE; margin-bottom: var(--mls-sep); }
.mls-why h2 { color: #fff; font-size: 23px; font-weight: 800; margin-bottom: 16px; }
.mls-why h2 em { font-style: normal; color: var(--mls-sol); }
.mls-why ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 14.5px; margin: 0; padding: 0; }
.mls-why li { padding-left: 26px; position: relative; }
.mls-why li::before { content: "✓"; position: absolute; left: 0; color: var(--mls-sol); font-weight: 700; }
.mls-why__reviews { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); font-size: 13.5px; }
.mls-why__reviews .mls-label { display: block; color: #fff; font-weight: 600; margin-bottom: 8px; }

/* --- Galería ------------------------------------------------------------- */
.mls-gal img:hover { filter: brightness(1.04); }

/* --- Visor de la galeria -------------------------------------------------- */
.mls-lb {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: rgba(10, 30, 42, .92);
  align-items: center; justify-content: center;
  padding: 16px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left));
}
.mls-lb[open], .mls-lb.is-open { display: flex; }
.mls-lb__img { max-width: 100%; max-height: 82vh; border-radius: 16px; display: block; object-fit: contain; }

/* Las flechas llevan el amarillo de la marca: sobre un fondo oscuro, un
   circulo translucido apenas se distinguia y la gente no las encontraba. */
.mls-lb__btn {
  position: absolute; background: var(--mls-sol); color: var(--mls-tinta); border: 0;
  width: 50px; height: 50px; border-radius: 999px; cursor: pointer;
  font-size: 26px; line-height: 50px; text-align: center; padding: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .14s, background .14s;
}
.mls-lb__btn:hover, .mls-lb__btn:focus-visible { background: #FFD633; transform: scale(1.07); }
.mls-lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mls-lb__cerrar { top: calc(14px + env(safe-area-inset-top)); right: 14px; font-size: 30px; }
.mls-lb__ant { left: 14px; top: 50%; margin-top: -25px; }
.mls-lb__sig { right: 14px; top: 50%; margin-top: -25px; }
@media (max-width: 600px) {
  .mls-lb__img { max-height: 70vh; }
  
}

/* --- Calendario de Turitop en ventana emergente ---------------------------- */
.mls-tt {
  position: fixed; inset: 0; z-index: 130; display: none;
  background: rgba(10, 30, 42, .88);
  align-items: center; justify-content: center; padding: 16px;
}
.mls-tt.is-open { display: flex; }
.mls-tt__caja {
  position: relative; background: #fff; border-radius: 20px; overflow: hidden;
  width: 100%; max-width: 440px; height: min(760px, 92vh);
  box-shadow: 0 24px 60px rgba(10, 30, 42, .4);
}
.mls-tt__iframe { width: 100%; height: 100%; border: 0; display: block; }
.mls-tt__cerrar {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20, 34, 43, .08); color: var(--mls-tinta);
  font-size: 22px; line-height: 36px; text-align: center; padding: 0;
}
.mls-tt__cerrar:hover { background: rgba(20, 34, 43, .18); }
.mls-tt__cargando {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: Outfit, sans-serif; font-size: 14px; color: var(--mls-muted); background: #fff;
}
@media (max-width: 600px) {
  .mls-tt { padding: 0; align-items: stretch; }
  .mls-tt__caja { max-width: none; height: 100%; border-radius: 0; }
}
body.mls-sin-scroll { overflow: hidden; }
/* Con el visor o el calendario abiertos, el boton fijo del movil estorba. */
body.mls-sin-scroll .mls-mcta { display: none; }

/* --- Acordeones ---------------------------------------------------------- */
.mls-acc details { border-bottom: 1px solid var(--mls-linea); }
.mls-acc details:first-of-type { border-top: 1px solid var(--mls-linea); }
.mls-acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 16px 0; font-family: Outfit, sans-serif; font-size: 16.5px; font-weight: 600; color: var(--mls-gris);
}
.mls-acc summary::-webkit-details-marker { display: none; }
.mls-acc summary::after {
  content: ""; flex: none; width: 27px; height: 27px; border-radius: 50%; transition: .2s;
  background: var(--mls-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231D5B79' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.mls-acc details[open] > summary { color: var(--mls-tinta); font-weight: 800; }
.mls-acc details[open] > summary::after {
  transform: rotate(180deg);
  background: var(--mls-mar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.mls-acc__body { padding: 0 0 18px; font-size: 15px; }
/* Las viñetas, a la altura del texto del desplegable: con el margen del tema
   (45 px) y el relleno quedaban 65 px metidas hacia dentro. */
.mls-acc__body ul:not([class]) { margin-left: 0; padding-left: 1.15em; }
/* Hora de vuelta por pueblo, dentro de «Disponibilidad y horarios». */
.mls-vuelta__h { font-size: 15px; font-weight: 800; margin: 18px 0 6px; }
.mls-vuelta__t { font-size: 14px; font-weight: 700; margin: 10px 0 4px; }
.mls-acc__body .mls-vuelta { margin: 0 0 8px; padding: 0; list-style: none; font-size: 14.5px; }
.mls-acc__body .mls-vuelta li { margin-bottom: 2px; }

/* --- Recogidas por pueblo ------------------------------------------------ */

/* --- Selector de formatos ------------------------------------------------ */
.mls-fmts { display: grid; gap: 12px; }
/* Título arriba y, debajo, los datos: con los dos en la misma fila, unos
   datos largos estrechaban el título hasta dejar una palabra por línea. */
.mls-fmt { border: 1px solid var(--mls-linea); border-radius: 18px; padding: 16px 18px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.mls-fmt--cur { border: 2px solid var(--mls-mar); background: #F4F9FB; }
.mls-fmt h3 { font-size: 16.5px; font-weight: 800; margin: 0; }
.mls-fmt__meta { font-size: 13px; color: var(--mls-muted); }

.mls-fmt p { grid-column: 1/-1; font-size: 14px; }
.mls-fmt__go { grid-column: 1/-1; justify-self: start; font-family: Outfit, sans-serif; font-weight: 800; font-size: 14px; color: #fff; background: var(--mls-mar); border-radius: 999px; padding: 8px 18px; }
.mls-fmt--cur .mls-fmt__go { background: transparent; color: var(--mls-mar); padding: 0; }
.mls-fmt__langs { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1/-1; }
.mls-fmt__langs a { font-family: Outfit, sans-serif; font-size: 13px; font-weight: 800; border: 1px solid var(--mls-mar); border-radius: 999px; padding: 5px 13px; }

/* Fila de idioma del selector: la etiqueta es nuestra y el botón lo pinta
   Turitop, porque es el que abre su ventana de reserva. */
.mls-fmt__langs { display: grid; gap: 8px; }
.mls-fmt__lang { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: var(--mls-card); border: 1px solid var(--mls-linea);
  border-radius: 14px; padding: 8px 10px 8px 14px; }
.mls-fmt__lang-name { font-family: Outfit, sans-serif; font-weight: 700; font-size: 14px; color: var(--mls-tinta); }
.mls-fmt__book { flex: none; background: var(--mls-mar); color: #fff; font-family: Outfit, sans-serif;
  font-weight: 800; font-size: 13px; border-radius: 999px; padding: 7px 18px; }
.mls-fmt__book:hover { background: var(--mls-mar-oscuro); color: #fff; }

/* --- Descripción --------------------------------------------------------- */
.mls-desc__lead { font-size: 17px; margin-bottom: 6px; }
.mls-desc__part { border-left: 2px solid var(--mls-sol); padding-left: 20px; margin-top: 24px; }
.mls-desc__part h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }

/* --- FAQs GEO ------------------------------------------------------------ */
.mls-geo { margin-top: 22px; }
.mls-geo > summary h3 { font-size: 19px; font-weight: 800; display: inline; }

/* --- Relacionados -------------------------------------------------------- */

/* --- Bloque B ------------------------------------------------------------ */
.mls-why2 { background: var(--mls-mar-oscuro); border-radius: 24px; padding: var(--mls-pad-card); text-align: center; color: #DCE8EE; margin-bottom: var(--mls-sep); }
.mls-why2 h2 { font-size: clamp(23px, 2.8vw, 29px); font-weight: 800; color: #fff; margin-bottom: 22px; }
.mls-why2 h2 em { font-style: normal; color: var(--mls-sol); }
.mls-why2__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.mls-why2__item { background: var(--mls-card); border-radius: 16px; padding: 18px 20px; }
.mls-why2__item h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; color: var(--mls-tinta); }
.mls-why2__item h3::before { content: "✓ "; color: var(--mls-mar); }
.mls-why2__item p { font-size: 13.5px; line-height: 1.6; color: var(--mls-gris); }

/* --- Bloque C ------------------------------------------------------------ */
.mls-contacto { padding: var(--mls-sep-banda) 0 calc(var(--mls-sep-banda) * 1.6); }
.mls-contacto__inner { background: var(--mls-card); border-radius: 28px; padding: 52px 24px; text-align: center; }
.mls-contacto h2 { font-size: clamp(25px, 3vw, 32px); font-weight: 800; margin-bottom: 12px; }
.mls-contacto h2 em { font-style: normal; color: var(--mls-mar); }
.mls-contacto p { max-width: 560px; margin: 0 auto 24px; }

/* --- Calendario por día (home) ------------------------------------------- */

/* --- Tarjetas de excursión (home) ---------------------------------------- */

/* --- Banda de recogidas (home) ------------------------------------------- */
.mls-pk { background: var(--mls-mar-oscuro); color: #DCE8EE; border-radius: 24px; padding: 32px 34px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
.mls-pk h2 { color: #fff; font-size: clamp(23px, 2.8vw, 29px); font-weight: 800; margin-bottom: 8px; }
.mls-pk h2 em { font-style: normal; color: var(--mls-sol); }

/* --- Cómo funciona (home) ------------------------------------------------ */

/* --- Página de puntos de recogida ---------------------------------------- */

/* --- Botón fijo del móvil ------------------------------------------------ */
.mls-mcta { display: none; }

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 900px) {
  .mls-hero__inner { grid-template-columns: 1fr; border-radius: 20px; min-height: 0; }
  .mls-hero__img { order: -1; }
  .mls-hero__img img { height: 230px; }
  .mls-hero__txt { padding: 26px 22px; }
  
  :root { --mls-sep: 16px; --mls-sep-banda: 32px; --mls-pad-card: 24px 22px; }
  .mls-card, .mls-why, .mls-why2, .mls-pk { border-radius: 20px; }
  .mls-why ul, .mls-why2__grid, .mls-cards, .mls-pk { grid-template-columns: 1fr; }
  .single-tour .content-area, .single-tour .is-right-sidebar { width: 100%; }
  .single-tour #right-sidebar .inside-right-sidebar { position: static; }
  
  .mls-contacto__inner { padding: 36px 22px; border-radius: 20px; }
  /* la tabla de recogidas se apila: en columnas se desborda */
  
  
  

  .mls-mcta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--mls-card); border-top: 1px solid var(--mls-linea);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .mls-mcta a {
    display: block; text-align: center; background: var(--mls-mar); color: #fff;
    font-family: Outfit, sans-serif; font-weight: 800; font-size: 16px; border-radius: 999px; padding: 13px;
  }
  .mls-mcta--hide { display: none; }
  body.single-tour { padding-bottom: 76px; }
}

/* --- Prosa de las páginas de texto (legales, about, cómo se reserva) ------ */
.mls-prosa p { margin-bottom: 14px; }
.mls-prosa p:last-child { margin-bottom: 0; }
.mls-prosa h3 {
  font-size: 18px; font-weight: 800; margin: 24px 0 10px;
}
.mls-prosa h3:first-child { margin-top: 0; }
.mls-prosa ul, .mls-prosa ol { margin: 0 0 14px; padding-left: 22px; }
.mls-prosa li { margin-bottom: 7px; }
.mls-prosa strong { color: var(--mls-tinta); font-weight: 700; }
/* Subrayado solo en los enlaces que van dentro del texto, que son los que no
   llevan clase. Con «.mls-prosa a» a secas se subrayaban también los botones,
   las tarjetas de excursión, las paradas del buscador y los círculos de
   destinos: todo lo que es un bloque entero enlazado salía con el texto
   subrayado, como si cada línea fuera un enlace distinto. */
.mls-prosa a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
.mls-prosa a:not([class]):hover { text-decoration-thickness: 2px; }
/* GeneratePress subraya todos los enlaces con una regla en línea. Los bloques
   enlazados no llevan subrayado nunca, ni dentro ni fuera de un texto. */
a.mls-acard__l, a.mls-acard__l *, a.mls-btn,
a.mls-busc__t, a.mls-busc__t *, a.mls-dest__i, a.mls-dest__i *, .mls-mas a, .mls-mas a * {
  text-decoration: none;
}

/* Ficha de datos identificativos: etiqueta a la izquierda, valor a la derecha. */
.mls-datos { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2px 18px; font-size: 15px; }
.mls-datos dt { font-family: Outfit, sans-serif; font-weight: 700; color: var(--mls-tinta); padding: 9px 0; border-top: 1px solid var(--mls-linea); }
.mls-datos dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--mls-linea); }
.mls-datos dt:first-of-type, .mls-datos dd:first-of-type { border-top: 0; }
@media (max-width: 600px) {
  .mls-datos { grid-template-columns: 1fr; gap: 0; }
  .mls-datos dt { padding-bottom: 0; }
  .mls-datos dd { padding-top: 2px; border-top: 0; }
}

/* Línea de «ver también» al pie de cada legal. */
.mls-vertambien { font-size: 13.5px; color: var(--mls-muted); margin-top: 22px; }
.mls-vertambien a { color: var(--mls-muted); text-decoration: underline; }

/* Pasos numerados (cómo funciona la reserva). */
.mls-pasos { counter-reset: paso; display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.mls-pasos li { counter-increment: paso; position: relative; padding-left: 48px; }
.mls-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 999px; background: var(--mls-suave);
  color: var(--mls-mar); font-family: Outfit, sans-serif; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.mls-pasos h3 { margin: 4px 0 4px; }

/* Aviso destacado dentro de una tarjeta. */
.mls-destacado {
  background: var(--mls-suave); border-radius: 16px; padding: 18px 20px;
  font-size: 15px; margin: 18px 0;
}
.mls-destacado:last-child { margin-bottom: 0; }

/* El enlace «ver en el mapa» de cada punto de recogida. */
.mls-maplink { font-size: 13.5px; color: var(--mls-mar); white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }

/* --- Mapa de destinos ------------------------------------------------------
   La silueta de la costa andaluza y del norte de África, con el Estrecho entre
   medias. El amarillo se reserva para el punto de origen: si la costa también
   fuera amarilla, el ojo no sabría dónde mirar. */
.mls-mapa { margin: 18px 0 0; }
/* Solo la silueta de la costa, sin manchas de tierra ni de mar: con dos zonas
   de color el mapa parecia un diagrama y costaba leer los puntos. */
/* Imagen fija, la misma en todas las pantallas y ajustada al ancho: sin
   desplazamiento lateral. En el móvil se amplía con los dedos. */
.mls-mapa__svg { width: 100%; height: auto; display: block; }
/* La tierra solo lleva relleno: el borde recto del poligono la hacia
   parecer una caja. La linea de costa se dibuja aparte. */
.mls-mapa__litoral { fill: none; stroke: var(--mls-agua); stroke-width: 3.5; stroke-linecap: round; }
.mls-mapa__linea { stroke: var(--mls-mar); stroke-width: 1.4; stroke-dasharray: 5 7; opacity: .45; }
.mls-mapa__d circle { fill: var(--mls-mar); }
/* Cada etiqueta, del color de su punto: los destinos en el verdeazul de la
   marca y el origen en un ambar oscuro, emparentado con el punto amarillo
   pero legible (5,9:1 sobre blanco; el amarillo da 1,7:1 y no valdria). */
.mls-mapa__d text {
  font-family: Outfit, sans-serif; font-size: 21px; font-weight: 800; fill: var(--mls-mar);
  paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round;
}
.mls-mapa__h { font-weight: 600; font-size: 17px; fill: var(--mls-muted); }
/* El origen. El amarillo esta en el punto y en la capsula de la etiqueta, que
   cuelga de el: asi se relaciona de un vistazo que de ahi salen las lineas.
   El texto va en tinta sobre el amarillo (8,9:1); en amarillo sobre blanco
   daria 1,7:1 y no se leeria. */
.mls-mapa__o circle { fill: var(--mls-sol); }
.mls-mapa__halo { fill: var(--mls-sol); opacity: .3; }
.mls-mapa__cuelga { stroke: var(--mls-sol); stroke-width: 5; stroke-linecap: round; }
.mls-mapa__capsula { fill: var(--mls-sol); }
.mls-mapa__o text {
  font-family: Outfit, sans-serif; font-size: 23px; font-weight: 800;
  fill: var(--mls-tinta);
}
.mls-mapa__o2 {
  font-family: Outfit, sans-serif; font-size: 17px; font-weight: 600; fill: #4A3A10;
}
.mls-mapa figcaption { font-size: 14px; color: var(--mls-muted); margin-top: 10px; line-height: 1.5; }
/* --- Un solo margen lateral para toda la web ------------------------------
   Cabecera, hero, contenido, relacionados, contacto y pie usan todos el
   .grid-container de GeneratePress. Poniendo aqui el margen, todos los bloques
   empiezan y acaban en la misma linea; antes cada uno llevaba el suyo y no
   coincidian. */
.grid-container { padding-left: clamp(16px, 3vw, 30px); padding-right: clamp(16px, 3vw, 30px); }

/* --- Iconos y adornos de marca --------------------------------------------
   Los iconos son SVG en linea con `currentColor`: heredan el color del sitio
   donde se ponen y no cuestan ninguna peticion. El sol y la ola son los dos
   dibujos de la marca. */
.mls-ico { display: inline-block; vertical-align: -.22em; flex: none; }
.mls-ico--cat {
  width: 34px; height: 34px; stroke-width: 1.5; padding: 5px;
  border-radius: 12px; background: var(--mls-suave); color: var(--mls-mar);
  box-sizing: content-box;
}
.mls-ico--nature   { color: var(--mls-c-nature);   background: #E7F2EC; }
.mls-ico--villages { color: var(--mls-c-villages); background: #FBEDE7; }
.mls-ico--cities   { color: var(--mls-c-cities);   background: var(--mls-suave); }
.mls-ico--beyond   { color: var(--mls-c-beyond);   background: #F0EBF8; }

/* Titulo de seccion con su icono delante. */
.mls-h2ico { display: flex; align-items: center; gap: 14px; }
.mls-h2ico .mls-ico--cat { margin-bottom: 0; }

/* El sol de la marca, suelto, como adorno. No compite con el texto. */
.mls-sol-adorno {
  position: absolute; pointer-events: none; color: var(--mls-sol);
  opacity: .5; width: 120px; height: 120px; line-height: 0;
}
.mls-card { position: relative; overflow: hidden; }
.mls-card > .mls-sol-adorno { top: -34px; right: -26px; transform: rotate(16deg); }
.mls-guia { position: relative; }
.mls-guia > .mls-sol-adorno { top: -56px; right: -30px; transform: rotate(14deg); opacity: .32; }
@media (max-width: 680px) { .mls-sol-adorno { display: none; } }

/* Un bloque con el fondo del agua, para romper tanto blanco. */

/* --- Cabecera del sitio ----------------------------------------------------
   Fija al hacer scroll: el menú y el logotipo acompañan al visitante durante
   toda la página, que es lo que hace que se note acabada. */
.site-header {
  background: var(--mls-card); position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(20, 34, 43, .07);
}
.site-header .inside-header {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 74px; padding-top: 0; padding-bottom: 0;
}
.site-logo { display: flex; align-items: center; margin: 0; padding: 0; }
/* El enlace del logotipo tiene la altura de la imagen, y en el teléfono esa
   imagen baja a 24 px: queda por debajo de lo que se puede tocar con el dedo
   sin fallar. Se le da alto mínimo al enlace, no a la imagen, así que se gana
   zona de toque sin que el logotipo cambie de tamaño. */
.site-logo > a { display: flex; align-items: center; min-height: 44px; }
.site-logo img, .site-logo .header-image { height: 44px; width: auto; max-width: none; display: block; }

/* --- Menú ------------------------------------------------------------------ */
.main-navigation { background: transparent; }
/* El selector de idioma es hermano del menu dentro de .inside-navigation:
   sin flex aqui, caia a una segunda linea y la cabecera salia a dos alturas. */
.main-navigation .inside-navigation {
  padding: 0; display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
}
.main-navigation .main-nav > ul { display: flex; align-items: center; gap: 26px; }
.main-navigation .main-nav > ul > li > a {
  font-family: Outfit, sans-serif; font-size: 15px; font-weight: 700;
  color: var(--mls-tinta); line-height: 1; padding: 10px 0;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a { color: var(--mls-mar); }

/* El desplegable es una tarjeta, no un bloque cuadrado. */
.main-navigation .main-nav ul ul {
  background: var(--mls-card); border: 1px solid var(--mls-linea);
  border-radius: 14px; box-shadow: 0 14px 30px rgba(20, 34, 43, .16);
  padding: 6px 0; width: 288px;
}
.main-navigation .main-nav ul ul li a {
  color: var(--mls-tinta); font-size: 14.5px; line-height: 1.35; padding: 10px 18px;
}
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  background: var(--mls-suave); color: var(--mls-mar-oscuro);
}
/* Solo las tres rayas: el tema le pone un fondo gris que se veía como un
   cuadrado sobre la barra blanca. */
.menu-toggle, button.menu-toggle:hover, button.menu-toggle:focus,
.main-navigation.toggled .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus { color: var(--mls-tinta); background: transparent; }

/* Entre 981 y 1.200 px la cabecera cabe en una línea, pero justa: el logotipo
   y el menú se aprietan para que el español, que es más largo, no se parta.
   Por debajo de 981 ya entra el botón de hamburguesa. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .site-logo img, .site-logo .header-image { height: 38px; }
  .main-navigation .inside-navigation { gap: 12px; }
  .main-navigation .main-nav > ul { gap: 16px; }
  .main-navigation .main-nav > ul > li > a { font-size: 14px; }
}

@media (max-width: 1100px) {
  .site-header .inside-header { min-height: 64px; }
  .site-logo img, .site-logo .header-image { height: 36px; }
  /* Desplegado ocupa toda la pantalla: una entrada por fila, con separador. */
  .main-navigation .main-nav > ul { display: block; gap: 0; }
  .main-navigation .main-nav > ul > li > a { padding: 17px 20px; font-size: 17px; line-height: 1.3; }
  .main-navigation .main-nav > ul > li + li { border-top: 1px solid var(--mls-linea); }
  .main-navigation .main-nav > ul > li.menu-item-has-children > a { padding-right: 60px; }
  .main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
    position: absolute; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; padding: 0 20px;
  }
  .main-navigation .main-nav ul ul {
    background: var(--mls-suave); border: 0; border-radius: 0;
    box-shadow: none; width: auto; padding: 4px 0 10px;
  }
  .main-navigation .main-nav ul ul li a { padding: 12px 20px 12px 36px; font-size: 15.5px; }
  .mls-lang__li { border-top: 1px solid var(--mls-linea); }
}

/* En el teléfono el logotipo es muy apaisado (8,75 a 1): a 36 px de alto mide
   315 de ancho y, con el botón del menú y los márgenes, pedía 402 px en una
   pantalla de 375. El botón caía a una segunda fila y la cabecera salía a doble
   altura. Se baja el logotipo por tramos para que quepan los dos en una línea
   hasta en una pantalla de 320. */
@media (max-width: 480px) {
  .site-logo img, .site-logo .header-image { height: 28px; }
}
@media (max-width: 380px) {
  .site-logo img, .site-logo .header-image { height: 24px; }
}

/* --- Cabecera de las páginas que no son ficha ----------------------------- */
.mls-pintro { padding: var(--mls-sep-banda) 0 var(--mls-sep); max-width: 820px; }
.mls-pintro h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.7px; margin-bottom: 14px; }
.mls-pintro .mls-lead { font-size: 18px; }

.mls-phero { position: relative; border-radius: 28px; overflow: hidden; margin: 0 0 var(--mls-sep); }
.mls-phero img { width: 100%; height: clamp(260px, 38vw, 420px); object-fit: cover; display: block; }
.mls-phero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 42, .18) 0%, rgba(10, 30, 42, .82) 78%);
}
.mls-phero__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px clamp(22px, 3vw, 42px); color: #fff; }
.mls-phero__txt h1 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.6px; margin-bottom: 10px; }
.mls-phero__short { color: #E8F0F7; font-size: 17px; max-width: 640px; }
.mls-phero .mls-crumbs, .mls-phero .mls-crumbs a { color: #C6D6DE; }
@media (max-width: 900px) {
  .mls-pintro { padding: 22px 0 20px; }
  .mls-phero { border-radius: 20px; }
  .mls-phero__txt { padding: 22px; }
}

.mls-cat--nature   { border-left-color: var(--mls-c-nature); }
.mls-cat--villages { border-left-color: var(--mls-c-villages); }
.mls-cat--cities   { border-left-color: var(--mls-c-cities); }
.mls-cat--beyond   { border-left-color: var(--mls-c-beyond); }

@media (max-width: 760px) {
  /* Cada fila pasa a ser una tarjeta con su etiqueta delante. */

}

/* --- Tarjetas de excursión ------------------------------------------------ */
.mls-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.mls-acard {
  background: var(--mls-card); border: 1px solid var(--mls-linea); border-radius: 18px;
  overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.mls-acard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 34, 43, .13); }
.mls-acard__l { display: flex; flex-direction: column; height: 100%; color: inherit; }
/* 3:2, la misma proporción que tienen todas las fotos de producto: se ven sin recorte. */
.mls-acard__ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mls-suave); position: relative; }
/* «Se agota antes» sobre la foto (excursiones con 'se_agota' en el catálogo). */
.mls-acard__agota {
  position: absolute; top: 12px; left: 12px; background: var(--mls-sol); color: var(--mls-tinta);
  font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(20, 34, 43, .25);
}
/* El aviso en la ficha: amarillo suave, que se vea sin parecer una alarma. */
.mls-agota {
  background: #FFF6D1; border-left: 5px solid var(--mls-sol); border-radius: 14px;
  padding: 14px 18px; font-size: 15px; line-height: 1.6; color: var(--mls-tinta); margin-bottom: var(--mls-sep);
}
.mls-agota strong { display: block; font-family: Outfit, sans-serif; font-weight: 800; margin-bottom: 2px; }
.mls-agota--corto { font-size: 13.5px; padding: 10px 14px; margin: 12px 0 0; text-align: left; }
.mls-comp__agota {
  display: inline-block; margin-top: 6px; background: var(--mls-sol); color: var(--mls-tinta);
  font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
}
.mls-acard__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mls-acard__ph--vacia {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--mls-suave), var(--mls-linea));
}
.mls-acard__in { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.mls-acard__m { font-size: 13px; font-weight: 600; color: var(--mls-muted); margin-bottom: 8px; }
.mls-acard__t {
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.25;
  color: var(--mls-tinta); margin-bottom: 10px;
}
.mls-acard__d { font-size: 14.5px; line-height: 1.6; color: var(--mls-gris); margin-bottom: 16px; }
/* Las localidades de recogida, en la propia tarjeta: es el dato que decide
   la compra y obligaba a entrar en la ficha para saberlo. */
.mls-acard__pk { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 14px; }
.mls-acard__pk-e {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mls-muted); margin-right: 2px;
}
.mls-pk-tag {
  background: var(--mls-agua-suave); border: 1px solid var(--mls-agua);
  color: var(--mls-mar-oscuro); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 600; line-height: 1.5;
}

.mls-acard__p {
  margin: auto 0 0; display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 13.5px; color: var(--mls-muted);
}
.mls-acard__pv { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mls-acard__pv strong { font-family: Outfit, sans-serif; font-size: 23px; font-weight: 800; color: var(--mls-tinta); }
.mls-acard__pv small { font-size: 12px; font-weight: 600; }
.mls-acard__pu { font-size: 13px; }
/* «Ver ficha» como botón amarillo: aunque toda la tarjeta enlaza, así se ve
   dónde pulsar (Eduardo, 20-10-2026). */
.mls-acard__cta {
  font-weight: 700; color: var(--mls-tinta); white-space: nowrap;
  background: #FFCC00; border-radius: 999px; padding: 7px 16px;
}
.mls-acard__cta::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .18s; }
.mls-acard:hover .mls-acard__cta::after { transform: translateX(4px); }

/* --- Formulario de contacto (Gravity Forms) ------------------------------- */
.gform_wrapper.gravity-theme .gform_fields { gap: 18px; }
.gform_wrapper.gravity-theme .gfield_label {
  font-family: Outfit, sans-serif; font-weight: 700; font-size: 15px;
  color: var(--mls-tinta); margin-bottom: 6px;
}
.gform_wrapper.gravity-theme .gfield_required,
.gform_wrapper.gravity-theme .gfield_required .gfield_required_text {
  color: var(--mls-muted); font-weight: 600; font-style: normal;
}
/* La descripcion del consentimiento no debe parecer otro campo de texto. */
.gform_wrapper.gravity-theme .gfield--type-consent .gfield_description {
  border: 0; background: transparent; padding: 0 0 8px; max-height: none; overflow: visible;
}
.gform_wrapper.gravity-theme .gfield_description {
  font-size: 13.5px; color: var(--mls-muted); padding-top: 4px;
}
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme textarea {
  font-family: Outfit, sans-serif; font-size: 16px; color: var(--mls-tinta);
  background: #fff; border: 1px solid var(--mls-linea); border-radius: 14px;
  padding: 12px 15px; width: 100%;
}
.gform_wrapper.gravity-theme input[type=text]:focus,
.gform_wrapper.gravity-theme input[type=email]:focus,
.gform_wrapper.gravity-theme textarea:focus {
  outline: none; border-color: var(--mls-mar); box-shadow: 0 0 0 3px rgba(29, 91, 121, .14);
}
.gform_wrapper.gravity-theme textarea { min-height: 150px; }
.gform_wrapper.gravity-theme .ginput_container_consent { display: flex; align-items: flex-start; gap: 10px; }
.gform_wrapper.gravity-theme .ginput_container_consent input { margin-top: 4px; }
.gform_wrapper.gravity-theme .gfield_consent_label { font-size: 15px; }
.gform_wrapper.gravity-theme .gform_footer { padding: 18px 0 0; margin: 0; }
.gform_wrapper.gravity-theme .gform_button {
  background: var(--mls-mar); color: #fff; border: 0; cursor: pointer;
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 15px;
  padding: 14px 30px; border-radius: 999px;
}
.gform_wrapper.gravity-theme .gform_button:hover { background: var(--mls-mar-oscuro); }
.gform_wrapper .gform_validation_errors,
.gform_wrapper.gravity-theme .gfield_validation_message {
  border-radius: 14px; font-size: 14.5px;
}
.gform_confirmation_wrapper {
  background: var(--mls-suave); border-radius: 16px; padding: 20px 22px; font-size: 15.5px;
}
.gform_confirmation_wrapper p { margin-bottom: 12px; }
.gform_confirmation_wrapper p:last-child { margin-bottom: 0; }
/* Tarjeta de aviso: el bloque «ya has reservado» del contacto. */
.mls-destacado--aviso { background: #FDF3E7; }
.mls-destacado--aviso h2 { font-size: 21px; }

/* --- Puntos de recogida por pueblo ---------------------------------------- */
.mls-pueblo { scroll-margin-top: 92px; }
.mls-puntos, .mls-lista-tours { list-style: none; padding-left: 0; }
.mls-puntos li, .mls-lista-tours li {
  padding-left: 24px; position: relative; margin-bottom: 8px;
}
/* Un punto dibujado, no un emoji: el emoji trunca el snippet al guardarlo. */
.mls-puntos li::before {
  content: ""; position: absolute; left: 3px; top: 10px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--mls-sol);
  box-shadow: 0 0 0 3px rgba(250, 200, 0, .25);
}
.mls-lista-tours li::before { content: "→"; position: absolute; left: 0; color: var(--mls-mar); font-weight: 700; }
/* Las fichas que todavía no existen se nombran, pero no enlazan a nada. */
.mls-pend { color: var(--mls-gris); }
.mls-destacado--no { background: #FDF3E7; }

/* --- Calendario en tabla compacta ----------------------------------------- */
/* El envoltorio que deja desplazar una tabla ancha a lo largo. Lo usan el
   calendario de la home y la matriz de la página de recogidas. */
.mls-tablawrap { overflow-x: auto; }

.mls-caltbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.mls-caltbl thead th {
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mls-muted); padding: 0 6px 10px;
  border-bottom: 1px solid var(--mls-linea); text-align: center;
}
.mls-caltbl thead th:first-child { text-align: left; }
.mls-caltbl__kw { text-transform: none; font-size: 13px; letter-spacing: .02em; color: var(--mls-tinta); }
.mls-caltbl__d--hoy { color: var(--mls-mar); }
.mls-caltbl tbody th {
  text-align: left; font-weight: 400; padding: 13px 14px 13px 12px;
  border-bottom: 1px solid var(--mls-linea); border-left: 3px solid var(--mls-linea);
}
.mls-caltbl tbody th a { font-family: Outfit, sans-serif; font-weight: 700; }
.mls-caltbl__pvp { display: block; font-size: 13px; color: var(--mls-muted); margin-top: 2px; }
.mls-caltbl td { border-bottom: 1px solid var(--mls-linea); text-align: center; padding: 13px 6px; }
.mls-caltbl .mls-si::before { content: "\25CF"; color: var(--mls-mar); font-size: 15px; }
.mls-caltbl .mls-no::before { content: "\00B7"; color: var(--mls-linea); font-size: 20px; }
/* Desde dónde sale: es lo que decide si la excursión le sirve a cada uno. */
.mls-caltbl__pk { display: block; font-size: 12.5px; line-height: 1.4; color: var(--mls-gris); margin-top: 3px; max-width: 30em; }
.mls-caltbl__cta { text-align: right; white-space: nowrap; }
.mls-caltbl__cta a { font-family: Outfit, sans-serif; font-weight: 700; font-size: 13.5px; }
.mls-caltbl tr.mls-cat--nature   th { border-left-color: var(--mls-c-nature); }
.mls-caltbl tr.mls-cat--villages th { border-left-color: var(--mls-c-villages); }
.mls-caltbl tr.mls-cat--cities   th { border-left-color: var(--mls-c-cities); }
.mls-caltbl tr.mls-cat--beyond   th { border-left-color: var(--mls-c-beyond); }
@media (max-width: 760px) {
  .mls-caltbl, .mls-caltbl tbody, .mls-caltbl tr { display: block; width: 100%; }
  .mls-caltbl thead { display: none; }
  .mls-caltbl tr { border: 1px solid var(--mls-linea); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
  .mls-caltbl tbody th { display: block; border: 0; padding: 0 0 10px; }
  .mls-caltbl td { display: inline-block; border: 0; width: auto; padding: 2px 10px 2px 0; font-size: 13px; }
  .mls-caltbl td::after { content: attr(data-th); margin-left: 4px; color: var(--mls-muted); }
  .mls-caltbl .mls-no { opacity: .35; }
  /* Tabla de traslados: el destino encima de sus tres precios. */
  .mls-tarifas td:first-child { display: block; padding: 0 0 6px; }
  .mls-tarifas td:first-child::after { content: none; }
  .mls-caltbl__cta { display: block; text-align: left; padding-top: 10px; }
  .mls-caltbl__cta::after { content: none; }
}

/* --- Bloque de la guía: portada a un lado, texto al otro ------------------- */
.mls-guia {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px;
  align-items: center; margin-top: 4px;
}
.mls-guia__img { margin: 0; }
.mls-guia__img img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20, 34, 43, .20);
  transform: rotate(-2deg);
}
.mls-guia__badge {
  display: inline-block; background: var(--mls-sol); color: var(--mls-tinta);
  font-family: Outfit, sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 14px; margin-bottom: 12px;
}
.mls-guia__lead { font-size: 16.5px; line-height: 1.65; margin-bottom: 18px; }
.mls-guia__txt .mls-note { margin-top: 12px; }
@media (max-width: 680px) {
  .mls-guia { grid-template-columns: 1fr; gap: 20px; justify-items: start; }
  .mls-guia__img { max-width: 170px; }
}

/* --- Selector de idioma ---------------------------------------------------- */
.mls-lang { display: flex; gap: 4px; align-items: center; }
.mls-lang__a {
  font-family: Outfit, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--mls-muted); border-radius: 999px; padding: 5px 10px; line-height: 1;
}
.mls-lang__a:hover { background: var(--mls-suave); color: var(--mls-mar); }
.mls-lang__a--act { background: var(--mls-suave); color: var(--mls-tinta); }
.mls-lang--cab { margin-left: 0; flex: none; }
.main-navigation .menu-bar-items { display: flex; align-items: center; }
.mls-lang__li { display: none; }
@media (max-width: 1100px) {
  /* En el móvil el menú se despliega entero y la barra no tiene sitio. */
  .mls-lang--cab { display: none; }
  .mls-lang__li { display: block; padding: 10px 20px; }
}

/* --- Recogidas · B, buscador por pueblo ------------------------------------ */
.mls-busc {
  background: var(--mls-agua-suave); border: 1px solid var(--mls-agua);
  border-radius: 20px; padding: 22px 24px;
}
.mls-busc__lb {
  display: block; font-family: Outfit, sans-serif; font-weight: 800; font-size: 16px;
  color: var(--mls-tinta); margin-bottom: 10px;
}
.mls-busc__sel {
  font-family: Outfit, sans-serif; font-size: 16px; color: var(--mls-tinta);
  background: #fff; border: 1px solid var(--mls-linea); border-radius: 14px;
  padding: 12px 15px; width: 100%; max-width: 340px;
}
.mls-busc__sel:focus { outline: none; border-color: var(--mls-mar); box-shadow: 0 0 0 3px rgba(23, 107, 116, .16); }
.mls-busc__r { margin-top: 20px; }
.mls-busc__r h3 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }

.mls-busc__h { font-size: 15px; font-weight: 800; margin: 18px 0 10px; }
/* Las excursiones del pueblo elegido, como tarjetas pulsables: en una lista
   separada por comas no se veia que cada nombre era un enlace. */
.mls-busc__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
/* Cada excursión con su foto: se reconoce antes por la imagen que por el nombre. */
.mls-busc__t {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--mls-linea); border-radius: 14px;
  padding: 8px 12px 8px 8px; color: var(--mls-tinta); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.mls-busc__tf { flex: none; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; background: var(--mls-suave); }
.mls-busc__tf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mls-busc__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mls-busc__nota { font-size: 13px; color: var(--mls-muted); margin: 10px 0 0; }
a.mls-busc__t:hover { border-color: var(--mls-mar); box-shadow: 0 6px 16px rgba(20, 34, 43, .10); color: var(--mls-tinta); }
.mls-busc__tn { font-family: Outfit, sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.mls-busc__tm { font-size: 12.5px; color: var(--mls-muted); }
.mls-busc__t--pend { opacity: .62; }

/* --- Recogidas · C, matriz excursión × pueblo ------------------------------ */
.mls-matriz { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mls-matriz thead th {
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 12px;
  color: var(--mls-muted); padding: 0 4px 10px; border-bottom: 1px solid var(--mls-linea);
  vertical-align: bottom; text-align: center;
}
.mls-matriz thead th:first-child { text-align: left; }
.mls-matriz thead th span { display: inline-block; white-space: nowrap; }
.mls-matriz tbody th {
  text-align: left; font-weight: 400; padding: 12px 14px 12px 12px;
  border-bottom: 1px solid var(--mls-linea); border-left: 3px solid var(--mls-linea);
}
.mls-matriz tbody th a { font-family: Outfit, sans-serif; font-weight: 700; }
.mls-matriz td { border-bottom: 1px solid var(--mls-linea); text-align: center; padding: 12px 4px; }
.mls-matriz .mls-si::before { content: "\2713"; color: var(--mls-mar); font-weight: 800; }
.mls-matriz .mls-no::before { content: "\2013"; color: var(--mls-linea); }
/* Solo algunos meses: la misma marca, a medias, y su leyenda debajo. */
.mls-matriz .mls-temp::before, .mls-matriz__ley .mls-temp::before { content: "\25D0"; color: var(--mls-mar); }
.mls-matriz__ley .mls-si::before { content: "\2713"; color: var(--mls-mar); font-weight: 800; }
.mls-matriz__ley { font-size: 13.5px; color: var(--mls-gris); margin: 12px 0 0; }
.mls-matriz__ley span { margin-left: 10px; }
.mls-matriz__ley span:first-child { margin-left: 0; }
.mls-matriz tr.mls-cat--nature   th { border-left-color: var(--mls-c-nature); }
.mls-matriz tr.mls-cat--villages th { border-left-color: var(--mls-c-villages); }
.mls-matriz tr.mls-cat--cities   th { border-left-color: var(--mls-c-cities); }
.mls-matriz tr.mls-cat--beyond   th { border-left-color: var(--mls-c-beyond); }
@media (max-width: 820px) {
  .mls-matriz thead th span { writing-mode: vertical-rl; transform: rotate(180deg); }
}
@media (max-width: 560px) {
  .mls-matriz, .mls-matriz tbody, .mls-matriz tr { display: block; width: 100%; }
  .mls-matriz thead { display: none; }
  .mls-matriz tr { border: 1px solid var(--mls-linea); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
  .mls-matriz tbody th { display: block; border: 0; padding: 0 0 10px; }
  .mls-matriz td { display: inline-block; border: 0; padding: 2px 10px 2px 0; font-size: 13px; }
  .mls-matriz td::after { content: attr(data-th); margin-left: 5px; color: var(--mls-muted); }
  .mls-matriz .mls-no { opacity: .4; }
}

/* Puntos y excursiones que Turitop solo ofrece algunos meses. */
.mls-temp-tag {
  display: inline-block; font-family: Outfit, sans-serif; font-size: 11.5px; font-weight: 700;
  color: #8A5A00; background: #FDF3E0; border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.mls-busc__tn + .mls-temp-tag { align-self: flex-start; }

/* El nombre con el que Google conoce el sitio: es lo que de verdad se busca. */
.mls-punto__lugar {
  display: inline-block; background: var(--mls-agua-suave); border-radius: 6px;
  padding: 1px 7px; font-size: 13.5px; color: var(--mls-gris);
}
/* Recogidas de la ficha: un bloque por localidad, en una sola columna. */
.mls-recog { display: grid; gap: 16px; }
.mls-recog__t {
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mls-mar); margin: 0 0 8px;
}
.mls-recog .mls-puntos { margin: 0; }
.mls-recog .mls-puntos li { margin-bottom: 10px; line-height: 1.45; }
.mls-recog .mls-puntos li:last-child { margin-bottom: 0; }
/* El nombre del punto en su línea; el sitio, la marca y el mapa debajo. */
.mls-recog .mls-puntos strong { display: block; }

/* --- Fotos de destino: círculos de sol -------------------------------------
   La foto va recortada en círculo y los rayos del sol de la marca asoman por
   el borde. Es el icono de la casa convertido en marco. */
.mls-dest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 18px; margin-top: 10px; }
@media (max-width: 860px) { .mls-dest { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mls-dest { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } }

.mls-dest__i { display: block; color: var(--mls-tinta); text-decoration: none; }
/* Sin rayos: el circulo solo. */
.mls-dest__ph { display: block; position: relative; width: 100%; aspect-ratio: 1; }
.mls-dest__ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%; background: var(--mls-suave);
  box-shadow: 0 8px 22px rgba(20, 34, 43, .18);
  transition: transform .2s, box-shadow .2s;
}
a.mls-dest__i:hover a.mls-dest__i:hover .mls-dest__ph img { transform: scale(1.04); box-shadow: 0 14px 30px rgba(20, 34, 43, .24); }
.mls-dest__n {
  display: block; text-align: center; margin-top: 6px;
  font-family: Outfit, sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.3;
}
a.mls-dest__i:hover .mls-dest__n { color: var(--mls-mar); }

/* --- Galería de la ficha: se adapta al número de fotos ---------------------
   Como en SevillaQR: nunca más de cuatro columnas, y con pocas fotos no se
   estiran hasta quedar desproporcionadas. El reparto se decide contando las
   fotos con `:has()`, sin tener que añadir ninguna clase desde PHP. */
.mls-gal { display: grid; gap: 12px; margin-bottom: var(--mls-sep); grid-template-columns: repeat(4, 1fr); }
/* Todas las miniaturas en 3:2, la proporción de las fotos de producto:
   se ven enteras, sin recorte, a cualquier ancho. */
.mls-gal img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; display: block; cursor: zoom-in; }

/* Una sola foto: a todo el ancho. */
.mls-gal:has(img:first-child:last-child) { grid-template-columns: 1fr; }
/* Dos. */
.mls-gal:has(img:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
/* Tres, y seis (3+3), y nueve. */
.mls-gal:has(img:nth-child(3):last-child),
.mls-gal:has(img:nth-child(6):last-child),
.mls-gal:has(img:nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
/* Cinco y siete: cuatro columnas dejarían una fila coja de una sola foto,
   así que mejor tres. */
.mls-gal:has(img:nth-child(5):last-child),
.mls-gal:has(img:nth-child(7):last-child) { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .mls-gal, .mls-gal:has(img:nth-child(3):last-child),
  .mls-gal:has(img:nth-child(5):last-child),
  .mls-gal:has(img:nth-child(6):last-child),
  .mls-gal:has(img:nth-child(7):last-child) { grid-template-columns: repeat(2, 1fr); }
  .mls-gal:has(img:first-child:last-child) { grid-template-columns: 1fr; }
}

/* --- Remate bajo los títulos de sección ------------------------------------
   Una raya corta en amarillo, no un subrayado completo: marca el inicio de
   cada bloque sin gritar. */
.mls-card > h2:not(.mls-h2ico)::after,
.mls-h2ico::after {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 999px;
  background: var(--mls-sol); margin-top: 12px;
}
.mls-h2ico { flex-wrap: wrap; }
.mls-h2ico::after { flex-basis: 100%; margin-left: 48px; }
.mls-why h2::after, .mls-why2 h2::after, .mls-contacto h2::after { display: none; }

/* Las barras de desplazamiento de las galerías y carruseles, con color. La del
   sistema es gris claro y sobre fondo claro no se ve: nadie descubre que hay
   más fotos a la derecha. */
.mls-cards, .mls-mas__g, .ti-reviews-container-wrapper {
  scrollbar-width: thin; scrollbar-color: var(--mls-mar) var(--mls-linea);
}
.mls-cards::-webkit-scrollbar, .mls-mas__g::-webkit-scrollbar,
.ti-reviews-container-wrapper::-webkit-scrollbar { height: 9px; }
.mls-cards::-webkit-scrollbar-track, .mls-mas__g::-webkit-scrollbar-track,
.ti-reviews-container-wrapper::-webkit-scrollbar-track {
  background: var(--mls-linea); border-radius: 999px;
}
.mls-cards::-webkit-scrollbar-thumb, .mls-mas__g::-webkit-scrollbar-thumb,
.ti-reviews-container-wrapper::-webkit-scrollbar-thumb {
  background: var(--mls-mar); border-radius: 999px;
}

/* El hueco del widget de opiniones mientras se carga: reserva alto para que
   el contenido de debajo no de un salto cuando llegue. */
.mls-ti { min-height: 420px; }
.mls-ti__esp {
  font-size: 14px; color: var(--mls-muted); text-align: center; padding: 40px 0;
}

/* --- Pie ----------------------------------------------------------------- */
.mls-pie {
  background: #10303F; color: #C6D6DE; margin-top: 10px;
  padding: 54px 0 34px;
  font-size: 14.5px; line-height: 1.7;
}
.mls-pie a { color: #E8F0F7; }
.mls-pie a:hover { color: #fff; text-decoration: underline; }
.mls-pie__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; }
.mls-pie__logo { display: block; height: 28px; width: auto; margin-bottom: 16px; }
.mls-pie__marca p { max-width: 330px; margin-bottom: 18px; }
.mls-pie__idiomas { display: flex; gap: 8px; }
.mls-pie__idioma {
  font-family: Outfit, sans-serif; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(232, 240, 247, .32); border-radius: 999px; padding: 5px 15px;
}
.mls-pie__idioma--act { background: rgba(232, 240, 247, .14); border-color: transparent; }
.mls-pie__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mls-pie__tit {
  display: block; font-family: Outfit, sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--mls-sol); margin-bottom: 12px;
}
.mls-pie__col ul { list-style: none; margin: 0; padding: 0; }
.mls-pie__col li { margin-bottom: 7px; }
/* Formas de pago: logos sobre fichas blancas, que es como se leen bien en el pie oscuro. */
.mls-pie__pago { margin: 28px 0 0; }
.mls-pie__logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mls-pie__logo-pago { background: #fff; border-radius: 8px; padding: 6px 10px; display: inline-flex; align-items: center; }
.mls-pie__logo-pago img { height: 26px; width: auto; max-width: none; display: block; }
.mls-pie__id {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(232, 240, 247, .16);
  font-size: 12.5px; line-height: 1.65; color: #9FB6C2; max-width: 980px;
}
.mls-pie__abajo {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 12.5px; color: #9FB6C2;
}
@media (max-width: 900px) {
  .mls-pie { padding-top: 40px; }
  .mls-pie__top { grid-template-columns: 1fr; gap: 30px; }
  .mls-pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 480px) {
  .mls-pie__cols { grid-template-columns: 1fr; }
}
/* El pie del tema se sustituye por el nuestro. */
.site-info { display: none; }

/* --- El contenedor del tema no debe competir con nuestras tarjetas -------
   GeneratePress pinta un fondo blanco con padding bajo todo el contenido.
   Sobre el, nuestras tarjetas blancas se funden en un unico lienzo y se
   pierden los bordes redondeados. En las fichas se deja ver el fondo arena. */
.single-tour .inside-article,
.single-tour .entry-content,
.page-template-mls .inside-article,
.page-template-mls .entry-content {
  background: transparent;
  box-shadow: none;
}
.single-tour .inside-article,
.single-tour .entry-content,
.page-template-mls .inside-article,
.page-template-mls .entry-content { padding: 0; }
.single-tour .site-content, .single-tour .content-area { background: transparent; }
.single-tour .entry-content > *:first-child { margin-top: 0; }

/* --- Herramientas: planificador, recogida cercana, comparador y test ------ */
.mls-herr__form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 18px; }
.mls-herr__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--mls-tinta); }
.mls-herr__form select, .mls-herr__form input { font: inherit; font-weight: 400; padding: 9px 12px; border: 1px solid var(--mls-linea); border-radius: 10px; background: #fff; min-width: 160px; }
.mls-herr__form .mls-btn { padding: 11px 24px; }
.mls-plan__dias { display: grid; gap: 10px; }
.mls-plan__dia { border: 1px solid var(--mls-linea); border-radius: 14px; padding: 12px 16px; }
.mls-plan__dia h3 { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.mls-plan__dia h3::first-letter { text-transform: uppercase; }
.mls-plan__dia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mls-plan__dia li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14.5px; }
.mls-plan__dia li a { font-weight: 700; }
.mls-plan__meta { color: var(--mls-muted); font-size: 13.5px; }
.mls-plan__nada { color: var(--mls-muted); font-size: 14px; margin: 0; }
.mls-plan__add { margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; border: 2px solid #FFCC00; background: #fff; color: var(--mls-tinta); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.mls-plan__add.is-on { background: #FFCC00; }
.mls-plan__res { margin-top: 18px; background: var(--mls-suave); border-radius: 16px; padding: 16px 20px; }
.mls-plan__res h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.mls-plan__res ul { margin: 0 0 10px; padding-left: 1.15em; }
.mls-plan__res .mls-plan__lista { list-style: none; padding: 0; display: grid; gap: 8px; }
.mls-plan__lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; background: #fff; border-radius: 12px; padding: 8px 12px; }
.mls-plan__book { font-size: 13.5px; font-weight: 700; background: #FFCC00; color: var(--mls-tinta); border-radius: 999px; padding: 6px 14px; text-decoration: none; white-space: nowrap; }
.mls-plan__una { font-size: 13.5px; color: var(--mls-gris); margin: 10px 0 0; }
.mls-plan__total { font-weight: 700; margin: 0 0 6px; }
.mls-plan__aviso { color: #8a4b00; font-size: 14px; margin: 6px 0 0; }
/* El botón de ubicación, en un recuadro como el del buscador de pueblos. */
.mls-cerca { background: #F0F8F7; border: 1px solid #8ACAC7; border-radius: 20px; padding: 22px 24px; margin-top: 14px; }
.mls-cerca .mls-herr__form { align-items: center; margin-bottom: 0; }
.mls-cerca__t { font-weight: 700; font-size: 14.5px; color: var(--mls-tinta); width: 100%; }
.mls-cerca__res:not(:empty) { margin-top: 16px; }
.mls-cerca .mls-note { margin: 12px 0 0; }
.mls-cerca__lista { margin: 0; padding-left: 1.3em; display: grid; gap: 12px; }
.mls-cerca__pueblo { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mls-mar); }
.mls-cerca__km { font-size: 13px; font-weight: 700; color: var(--mls-mar); }
.mls-cerca__tours { font-size: 13.5px; color: var(--mls-gris); margin-top: 2px; }
@media (max-width: 900px) {
  .mls-herr__form label, .mls-herr__form select, .mls-herr__form input, .mls-herr__form .mls-btn { width: 100%; }
  .mls-plan__add { margin-left: 0; }
}
.mls-comp__elige, .mls-quiz__preg fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.mls-comp__elige legend, .mls-quiz__preg legend { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; color: var(--mls-tinta); }
.mls-comp__elige { display: flex; flex-wrap: wrap; gap: 8px; }
.mls-comp__elige legend { width: 100%; }
.mls-comp__op, .mls-quiz__preg label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mls-linea); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; background: #fff; }
.mls-comp__op:has(input:checked), .mls-quiz__preg label:has(input:checked) { border-color: var(--mls-mar); background: var(--mls-suave); }
.mls-quiz__preg fieldset { display: flex; flex-wrap: wrap; gap: 8px; }
.mls-quiz__preg legend { width: 100%; }
/* La tabla del comparador se desplaza dentro de su caja en el móvil, nunca la página. */
.mls-comp__tabla { overflow-x: auto; }
.mls-comp__tabla table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.mls-comp__tabla th, .mls-comp__tabla td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--mls-linea); }
.mls-comp__tabla thead th { font-size: 15.5px; font-weight: 800; }
.mls-comp__tabla tbody th { font-weight: 700; color: var(--mls-gris); width: 24%; }
.mls-comp__ve { margin: 0; padding-left: 1.1em; }
.mls-comp__ve li { margin-bottom: 3px; }
.mls-quiz__res h3 { font-size: 17px; font-weight: 800; margin: 8px 0; }
.mls-quiz__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mls-quiz__lista li { border: 1px solid var(--mls-linea); border-radius: 12px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.mls-quiz__lista li.is-top { border-color: var(--mls-mar); }
.mls-quiz__lista a { font-weight: 700; }
.mls-quiz__tag { margin-left: auto; font-size: 12px; font-weight: 700; background: #FFCC00; border-radius: 999px; padding: 3px 10px; }
/* Bloque de la home que lleva a las herramientas. */
.mls-herrcta__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
a.mls-herrcta__i { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--mls-linea); border-radius: 16px; padding: 16px 18px; color: inherit; text-decoration: none; transition: border-color .18s; }
a.mls-herrcta__i:hover { border-color: var(--mls-mar); }
.mls-herrcta__i strong { color: var(--mls-mar); font-size: 16px; }
.mls-herrcta__i strong::after { content: " →"; }
.mls-herrcta__i span { font-size: 14px; color: var(--mls-gris); }
.mls-menu-plan > a { font-weight: 800 !important; border-top: 1px solid var(--mls-linea); }
.mls-mas__todas .mls-btn + .mls-btn { margin-left: 8px; }
.mls-mas__todas .mls-btn--claro { color: var(--mls-mar); border-color: var(--mls-mar); }
.mls-mas__todas .mls-btn--claro:hover { background: var(--mls-suave); color: var(--mls-mar); }
@media (max-width: 900px) { .mls-herrcta__g { grid-template-columns: 1fr; } .mls-mas__todas .mls-btn + .mls-btn { margin: 8px 0 0; } }
/* Opiniones propias, dentro del bloque «Por qué reservar». */
.mls-why__deja { margin: 14px 0 0; font-size: 14px; text-align: center; }
.mls-why__deja a { color: #fff; text-decoration: underline; }
.mls-resenas { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); }
.mls-resenas .mls-label { display: block; color: #fff; font-weight: 600; margin-bottom: 8px; font-size: 13.5px; }
.mls-resenas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mls-resena { background: var(--mls-card); color: var(--mls-tinta); border-radius: 14px; padding: 14px 16px; font-size: 14px; }
.mls-resena p { margin: 6px 0; }
.mls-resena__nota { color: #E0A800; letter-spacing: 2px; }
.mls-resena__firma { font-size: 12.5px; color: var(--mls-muted); }
/* El tiempo por meses de una ficha. */
.mls-clima { overflow-x: auto; }
.mls-clima table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 380px; }
.mls-clima th, .mls-clima td { padding: 6px 10px; border-bottom: 1px solid var(--mls-linea); text-align: left; }
.mls-clima thead th { font-size: 13px; color: var(--mls-gris); }
.mls-clima tr.is-calor td:first-of-type { color: #B4441B; font-weight: 700; }
.mls-plan__calor { font-size: 12.5px; font-weight: 700; color: #B4441B; }
/* Previsión de 7 días, en el desplegable «El tiempo». */
.mls-tiempo__h { font-size: 15px; font-weight: 800; margin: 6px 0 8px; }
.mls-prev { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mls-prev li { background: var(--mls-suave); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; text-align: center; }
.mls-prev__d { font-weight: 700; text-transform: capitalize; }
.mls-prev__i { font-size: 22px; line-height: 1.2; }
.mls-prev__t strong { font-size: 14.5px; }
.mls-prev__ll { font-size: 12px; color: var(--mls-mar); }
@media (max-width: 900px) { .mls-prev { grid-template-columns: repeat(4, 1fr); } }
/* Cabecera del comparador: foto, nombre y precio de cada excursión. */
.mls-comp__cab a { display: block; color: inherit; }
.mls-comp__cab img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 8px; }
.mls-comp__cab span { display: block; }
.mls-comp__cab small { display: block; font-size: 13px; font-weight: 600; color: var(--mls-mar); margin-top: 2px; }
/* Columnas iguales para cada excursión, sea cual sea su texto. */
.mls-comp__tabla table { table-layout: fixed; }
.mls-comp__tabla thead th:first-child { width: 22%; }
/* En el comparador, el botón ocupa su celda y puede partir línea: en el móvil se pisaban. */
.mls-comp__tabla td .mls-acard__cta { display: block; white-space: normal; text-align: center; padding: 8px 10px; }
.mls-comp__no { color: var(--mls-muted); font-size: 13px; }
.mls-comp__pueblo { margin: 4px 0 14px; }
/* Botón de enviar de los formularios (Gravity Forms), como el resto de botones de la web. */
.gform_wrapper .gform_footer .gform_button, .gform_wrapper input[type="submit"].gform_button {
  background: var(--mls-mar) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font-family: Outfit, sans-serif !important; font-weight: 800 !important; font-size: 15px !important; padding: 14px 30px !important; cursor: pointer;
}
.gform_wrapper .gform_footer .gform_button:hover { background: var(--mls-mar-oscuro) !important; }
/* Mientras el calendario espera, su hueco ya está reservado: al cargar no empuja nada. */
#reserva .load-turitop:empty { min-height: 640px; background: var(--mls-suave); border-radius: 14px; }
/* Buscar paradas por hotel o dirección. */
.mls-cerca__busca { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mls-cerca__busca input { flex: 1 1 260px; font: inherit; padding: 11px 14px; border: 1px solid var(--mls-linea); border-radius: 999px; background: #fff; }
.mls-cerca__o { font-size: 13.5px; color: var(--mls-muted); }
.mls-btn--sec { background: #fff !important; color: var(--mls-mar) !important; border: 2px solid var(--mls-mar); }
.mls-cerca__de { font-weight: 700; margin: 0 0 8px; }
/* Planificador: previsión, compartir y calendario. */
.mls-plan__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mls-plan__accion { font: inherit; font-size: 13.5px; font-weight: 700; background: #fff; color: var(--mls-mar); border: 2px solid var(--mls-mar); border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; }
.mls-plan__accion:hover { background: var(--mls-suave); }
.mls-plan__btns { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mls-plan__cal { font-size: 12.5px; font-weight: 700; color: var(--mls-mar); border: 1px solid var(--mls-mar); border-radius: 999px; padding: 5px 10px; text-decoration: none; white-space: nowrap; }
.mls-plan__cal:hover { background: var(--mls-suave); }