/* ============================================================================
   Ficha de circuito — versión 2 de la maqueta (calendario en modal).
   Fuente: docs/maquetas/Ficha-Oporto-Lisboa-v2.html

   Dos reglas que no son cosmética y que ya han roto esto antes:

   1. TODO va prefijado. Las variables con --kv- y las clases con .kvf-, porque
      una de las páginas de la web incrusta Bootstrap 4 con su propio :root que
      redefine --orange. Sin prefijo, los colores de marca cambian solos.

   2. El CSS global de Kerala pinta `p{color:#333}` y colorea todos los enlaces.
      Como `.kv-ficha a` (0,2,0) le gana a `.kvf-reservar` (0,1,0), los botones
      que son <a> se escriben SIEMPRE como `.kv-ficha a.kvf-...`.
   ========================================================================= */

@font-face {
    font-family: 'TrendSansOne';
    src: url('/fonts/trend-sans-one.otf') format('opentype');
    font-display: swap;
}

.kv-ficha {
    --kv-naranja: #ff7300;
    --kv-naranja-h: #e56800;
    --kv-naranja-texto: #b34d00;
    --kv-naranja-suave: #fff4ec;
    --kv-azul: #1d83a7;
    --kv-azul-texto: #17708f;
    --kv-azul-suave: #eef7fa;
    --kv-crema: #faf7f3;
    --kv-beige: #fdf3e3;
    --kv-g50: #f8f9fa;
    --kv-g100: #f1f3f5;
    --kv-g200: #e9ecef;
    --kv-g300: #dee2e6;
    --kv-g400: #adb5bd;
    --kv-g600: #6c757d;
    --kv-g700: #495057;
    --kv-g800: #343a40;
    --kv-g900: #212529;
    --kv-verde: #1a7a4a;
    --kv-verde-bg: #e8f5ee;
    --kv-rojo: #b3261e;
    --kv-rojo-bg: #fdecea;
    --kv-r: 5px;
    --kv-rs: 4px;
    --kv-sh1: 0 1px 4px rgba(0, 0, 0, .07);
    /* OJO con la fuente de los titulares.
       La maqueta declara TrendSansOne, pero el navegador donde se diseñó no llega a cargarla
       (el .otf viene de otro dominio) y la dibuja con Open Sans. Lo que se aprobó mirando la
       maqueta es, por tanto, Open Sans: el título en minúsculas y a una sola línea.
       Con TrendSansOne de verdad el H1 sale ENTERO EN MAYÚSCULAS —la fuente no tiene caja
       baja—, ocupa casi el doble de ancho y empuja la caja del precio fuera de la fila.
       Además, en la web de hoy esa fuente solo se usa en piezas cortas y grandes
       (.circuits-by-destination-card .name, .sibling-card .name), nunca en titulares.
       Se deja disponible en --kv-marca por si se quiere para una pieza concreta. */
    --kv-marca: 'TrendSansOne', sans-serif;
    --kv-display: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --kv-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    font-family: var(--kv-sans);
    color: var(--kv-g900);
    background: var(--kv-crema);
    font-size: 15px;
    line-height: 1.6;
    padding: 26px 0 40px;
}

.kv-ficha *,
.kv-ficha *::before,
.kv-ficha *::after { box-sizing: border-box; }

.kv-ficha a { color: var(--kv-azul-texto); }
.kv-ficha a:hover { color: var(--kv-naranja-texto); }

/* Las celdas de rejilla no encogen por debajo de su contenido: sin esto la ficha
   arrastra la página a lo ancho en móvil. */
.kv-ficha .kvf-cols > *,
.kv-ficha .kvf-sec,
.kv-ficha .kvf-dos > *,
.kv-ficha .kvf-dest > article,
.kv-ficha .kvf-dest__c { min-width: 0; }

.kv-ficha .kvf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── hero ───────────────────────────────────────────────────────────────── */
/* La zona incluye la foto y las migas: en pantalla grande las migas se colocan encima de la
   foto, y en el teléfono salen a su propia barra debajo (ver el bloque de móvil). */
/* La foto arranca pegada al menú: el hueco blanco que quedaba encima era el padding superior
   de la ficha, y con la foto a todo el ancho se veía como una franja suelta. Solo se quita
   cuando hay foto; sin ella, el aire de arriba sigue haciendo falta. */
.kv-ficha:has(.kvf-hero) { padding-top: 0; }

/* La foto mide 100vw, y 100vw INCLUYE la barra de desplazamiento: sin recortar aquí, la página
   arrastra ~10 px de lado. `clip` recorta sin crear un contenedor de scroll, así que lo pegajoso
   de dentro (el menú de secciones) sigue funcionando. */
.main-content:has(.kv-ficha) { overflow-x: clip; }

/* LA FOTO VA DE BORDE A BORDE, como en la página de categoría.

   Antes vivía dentro del ancho de lectura (1.180 px), con franjas blancas a los lados y 290 px
   de alto: parecía una miniatura pegada encima de la web, y en pantallas grandes se quedaba
   perdida en el centro. La página de categoría —que es la referencia de estilo del sitio— usa
   400 px a todo el ancho, y así es como tiene que verse la ficha.

   `object-fit: cover` recorta pero NUNCA deforma: la foto conserva su proporción. */
.kv-ficha .kvf-hero-zona {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.kv-ficha .kvf-hero {
    position: relative;
    height: 400px;
    border-radius: 0;
    overflow: hidden;
}
.kv-ficha .kvf-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-ficha .kvf-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .04) 45%);
}
.kv-ficha .kvf-hero-zona:not(:has(.kvf-hero)) .kvf-migas {
    position: static;
    background: var(--kv-g50);
    color: var(--kv-g600);
    padding: 11px 15px;
    border-radius: var(--kv-r) var(--kv-r) 0 0;
}
.kv-ficha .kvf-hero-zona:not(:has(.kvf-hero)) .kvf-migas a { color: var(--kv-g600); }
/* Las migas van encima de la foto pero alineadas con el texto de la página, no pegadas al
   borde de la pantalla: la foto ocupa todo el ancho, la lectura no. */
.kv-ficha .kvf-migas {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1180px;
    padding: 0 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, .9);
    z-index: 2;
}
/* El botón de la galería, igual: dentro del ancho de lectura, no en la esquina de la pantalla. */
.kv-ficha .kvf-hero-zona { --kvf-borde: max(24px, calc(50vw - 566px)); }
.kv-ficha .kvf-migas a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.kv-ficha .kvf-migas a:hover { color: #fff; text-decoration: underline; }
.kv-ficha .kvf-migas i { opacity: .55; padding: 0 6px; font-style: normal; }
.kv-ficha .kvf-galeria {
    position: absolute;
    right: var(--kvf-borde, 18px);
    bottom: 16px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12px;
    font-family: var(--kv-sans);
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
}

/* ── cabecera ───────────────────────────────────────────────────────────── */
/* La foto ya no es la tapa de esta tarjeta: va a todo el ancho por encima. Así que la
   cabecera vuelve a ser una tarjeta entera, con su borde y sus cuatro esquinas. */
.kv-ficha .kvf-cab {
    background: #fff;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    margin-top: 22px;
    padding: 22px 26px 0;
    box-shadow: var(--kv-sh1);
}
.kv-ficha .kvf-cab__fila {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.kv-ficha .kvf-cab h1 {
    font-family: var(--kv-display);
    font-size: 28px;
    line-height: 1.22;
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--kv-g900);
}
.kv-ficha .kvf-sub { font-size: 14px; color: var(--kv-g600); margin: 0 0 12px; }
.kv-ficha .kvf-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.kv-ficha .kvf-chip {
    background: var(--kv-azul-suave);
    color: var(--kv-azul-texto);
    border: 1px solid #d6e9f0;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.kv-ficha .kvf-pvp {
    background: var(--kv-beige);
    border-radius: var(--kv-r);
    padding: 16px 20px;
    text-align: center;
    flex: none;
    min-width: 236px;
}
.kv-ficha .kvf-pvp__antes { font-size: 13px; color: var(--kv-g600); }
.kv-ficha .kvf-pvp__antes s { margin-right: 7px; }
.kv-ficha .kvf-dto {
    background: var(--kv-verde-bg);
    color: var(--kv-verde);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
}
.kv-ficha .kvf-pvp__cifra {
    font-size: 40px;
    font-weight: 700;
    color: var(--kv-naranja);
    line-height: 1.1;
}
.kv-ficha .kvf-pvp__pp { font-size: 12px; color: var(--kv-g700); }
.kv-ficha .kvf-promo {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0dfc4;
    font-size: 12px;
    color: var(--kv-verde);
    font-weight: 700;
}

/* ── barra de búsqueda ──────────────────────────────────────────────────── */
.kv-ficha .kvf-barra {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin: 20px -26px 0;
    padding: 17px 26px;
    background: var(--kv-g50);
    border-top: 1px solid var(--kv-g200);
    border-radius: 0 0 var(--kv-r) var(--kv-r);
}
.kv-ficha .kvf-campo {
    background: #fff;
    border: 1px solid var(--kv-g300);
    border-radius: var(--kv-rs);
    padding: 8px 13px;
    cursor: pointer;
    text-align: left;
    font-family: var(--kv-sans);
    width: 100%;
}
.kv-ficha .kvf-campo.es-activo { border-color: var(--kv-naranja); box-shadow: 0 0 0 3px rgba(255, 115, 0, .16); }
.kv-ficha .kvf-campo label { display: block; font-size: 11px; color: var(--kv-g600); margin-bottom: 2px; font-weight: 400; }
.kv-ficha .kvf-campo b { display: block; font-size: 15px; font-weight: 600; color: var(--kv-g900); }
.kv-ficha .kvf-buscar,
.kv-ficha a.kvf-buscar {
    background: var(--kv-naranja);
    color: #fff;
    border: 0;
    border-radius: var(--kv-rs);
    padding: 13px 28px;
    font-family: var(--kv-sans);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    height: 100%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kv-ficha .kvf-buscar:hover,
.kv-ficha a.kvf-buscar:hover { background: var(--kv-naranja-h); color: #fff; }

/* ── subnav ─────────────────────────────────────────────────────────────── */
.kv-ficha .kvf-subnav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    margin-top: 18px;
    padding: 0 8px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    box-shadow: var(--kv-sh1);
}
.kv-ficha .kvf-subnav a {
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kv-g700);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.kv-ficha .kvf-subnav a.es-activo { color: var(--kv-naranja); border-bottom-color: var(--kv-naranja); }

/* ── columnas y secciones ───────────────────────────────────────────────── */
.kv-ficha .kvf-cols {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    margin-top: 20px;
    align-items: start;
}
.kv-ficha .kvf-sec {
    background: #fff;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    box-shadow: var(--kv-sh1);
    margin-bottom: 20px;
    padding: 24px 26px;
}
.kv-ficha .kvf-sec > :is(h2, .kvf-h2) {
    font-family: var(--kv-display);
    font-size: 20px;
    line-height: 1.15;
    margin: 0 0 5px;
    font-weight: 600;
    color: var(--kv-g900);
}
.kv-ficha .kvf-sec > p.kvf-ay { font-size: 14px; color: var(--kv-g600); margin: 0 0 17px; }
.kv-ficha .kvf-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kv-ficha .kvf-subt { font-family: var(--kv-display); font-size: 16px; font-weight: 400; margin: 0 0 12px; }

/* itinerario */
.kv-ficha .kvf-dia { border-top: 1px solid var(--kv-g100); padding: 14px 0; }
.kv-ficha .kvf-dia:first-of-type { border-top: 0; padding-top: 0; }
.kv-ficha .kvf-dia h3 { font-size: 15px; margin: 0 0 4px; font-weight: 700; }
.kv-ficha .kvf-dia h3 em { font-style: normal; color: var(--kv-naranja); margin-right: 8px; }
.kv-ficha .kvf-dia p { margin: 0; font-size: 14px; color: var(--kv-g700); }

/* listas de incluye / no incluye */
.kv-ficha ul.kvf-lista { list-style: none; margin: 0; padding: 0; }
.kv-ficha ul.kvf-lista li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--kv-g700);
    margin-bottom: 10px;
}
.kv-ficha ul.kvf-lista svg { flex: none; margin-top: 4px; }
.kv-ficha ul.kvf-lista.es-si svg { color: var(--kv-verde); }
.kv-ficha ul.kvf-lista.es-no svg { color: var(--kv-g400); }

/* suplementos opcionales */
.kv-ficha .kvf-opc {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-rs);
    padding: 12px 15px;
    margin-bottom: 8px;
}
.kv-ficha .kvf-opc b { display: block; font-size: 14px; font-weight: 700; }
.kv-ficha .kvf-opc small { display: block; font-size: 12.5px; color: var(--kv-g600); }
.kv-ficha .kvf-opc span { font-weight: 700; color: var(--kv-naranja); white-space: nowrap; font-size: 15px; }

/* hoteles */
.kv-ficha .kvf-hotel {
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-rs);
    padding: 13px 16px;
    margin-bottom: 9px;
}
.kv-ficha .kvf-hotel.es-elegido { border-color: var(--kv-naranja); background: var(--kv-naranja-suave); }
.kv-ficha .kvf-hotel__t { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.kv-ficha .kvf-hotel__t b { font-weight: 700; font-size: 14.5px; }
.kv-ficha .kvf-hotel__t span { font-weight: 700; color: var(--kv-naranja); white-space: nowrap; }
.kv-ficha .kvf-hotel ul { list-style: none; margin: 7px 0 0; padding: 0; font-size: 13px; color: var(--kv-g700); }
.kv-ficha .kvf-hotel ul b { font-weight: 700; color: var(--kv-g800); }

/* tabla de precios */
.kv-ficha table.kvf-tp {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    overflow: hidden;
}
.kv-ficha table.kvf-tp th,
.kv-ficha table.kvf-tp td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--kv-g100); }
.kv-ficha table.kvf-tp th:first-child,
.kv-ficha table.kvf-tp td:first-child { text-align: left; }
.kv-ficha table.kvf-tp thead th { background: var(--kv-azul-suave); color: var(--kv-g800); font-size: 13px; font-weight: 700; }
.kv-ficha table.kvf-tp tbody tr:last-child td { border-bottom: 0; }
.kv-ficha table.kvf-tp td.kvf-p { font-weight: 700; color: var(--kv-naranja); }
.kv-ficha .kvf-auto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--kv-verde-bg);
    color: var(--kv-verde);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* orígenes */
.kv-ficha .kvf-origenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kv-ficha .kvf-origenes div {
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-rs);
    padding: 10px 13px;
    font-size: 14px;
}
.kv-ficha .kvf-origenes b { display: block; font-weight: 700; }
.kv-ficha .kvf-origenes small { color: var(--kv-g600); font-size: 12px; }

/* qué visitas */
.kv-ficha .kvf-dest { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kv-ficha .kvf-dest article {
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    overflow: hidden;
    background: #fff;
    display: grid;
    grid-template-columns: 112px 1fr;
}
.kv-ficha .kvf-dest img { width: 112px; height: 100%; min-height: 128px; object-fit: cover; display: block; }
.kv-ficha .kvf-dest__c { padding: 13px 15px; }
.kv-ficha .kvf-dest h3 {
    font-family: var(--kv-display);
    font-size: 16px;
    margin: 0 0 5px;
    font-weight: 400;
    color: var(--kv-azul-texto);
}
.kv-ficha .kvf-dest p { margin: 0; font-size: 13.5px; color: var(--kv-g700); line-height: 1.55; }
.kv-ficha .kvf-dia-et {
    display: inline-block;
    background: var(--kv-g50);
    border: 1px solid var(--kv-g200);
    border-radius: 3px;
    padding: 1px 8px;
    font-size: 11px;
    color: var(--kv-g600);
    font-weight: 700;
    margin-bottom: 6px;
}

/* condiciones */
.kv-ficha .kvf-cond { border: 1px solid var(--kv-g200); border-radius: var(--kv-r); padding: 18px 20px; }
.kv-ficha .kvf-cond.es-rec { border-color: #c8e6d4; background: #f6fbf8; }
.kv-ficha .kvf-cond :is(h3, .kvf-h3) { font-family: var(--kv-display); font-size: 16px; margin: 0 0 3px; font-weight: 400; }
.kv-ficha .kvf-cond .kvf-et {
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 11px;
    display: inline-block;
    margin-bottom: 10px;
}
.kv-ficha .kvf-cond.es-rec .kvf-et { background: var(--kv-verde-bg); color: var(--kv-verde); }
.kv-ficha .kvf-cond.es-nr .kvf-et { background: var(--kv-rojo-bg); color: var(--kv-rojo); }
.kv-ficha .kvf-escala { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.kv-ficha .kvf-escala li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--kv-g100);
}
.kv-ficha .kvf-escala li:last-child { border-bottom: 0; }
.kv-ficha .kvf-escala b { font-weight: 700; white-space: nowrap; }

/* ── lateral ────────────────────────────────────────────────────────────── */
.kv-ficha .kvf-lateral { position: sticky; top: 74px; }
.kv-ficha .kvf-tarjeta {
    background: #fff;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    box-shadow: var(--kv-sh1);
    padding: 19px 20px;
    margin-bottom: 14px;
}
.kv-ficha .kvf-tarjeta :is(h3, .kvf-h3) { font-family: var(--kv-display); font-size: 17px; margin: 0 0 13px; font-weight: 400; }
.kv-ficha .kvf-tarjeta a.kvf-mas {
    display: block;
    margin-top: 11px;
    font-size: 12.5px;
    color: var(--kv-azul-texto);
    font-weight: 700;
    text-decoration: none;
}
.kv-ficha .kvf-venta { background: var(--kv-beige); border-color: #f0dfc4; }
.kv-ficha .kvf-venta__antes { font-size: 13px; color: var(--kv-g600); }
.kv-ficha .kvf-venta__antes s { margin-right: 7px; }
.kv-ficha .kvf-venta__cifra {
    font-size: 36px;
    font-weight: 700;
    color: var(--kv-naranja);
    line-height: 1.12;
}
.kv-ficha .kvf-venta__meta { font-size: 12.5px; color: var(--kv-g700); margin-bottom: 14px; }
.kv-ficha a.kvf-reservar-side {
    display: block;
    width: 100%;
    background: var(--kv-naranja);
    color: #fff;
    border: 0;
    border-radius: var(--kv-rs);
    padding: 14px 10px;
    font-family: var(--kv-sans);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.kv-ficha a.kvf-reservar-side:hover { background: var(--kv-naranja-h); color: #fff; }
.kv-ficha .kvf-otra { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 9px; }
.kv-ficha .kvf-otra b { font-size: 14px; font-weight: 700; }
.kv-ficha .kvf-otra a { font-size: 12.5px; font-weight: 700; text-decoration: none; }
.kv-ficha .kvf-filas { display: grid; gap: 7px; }
.kv-ficha .kvf-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid var(--kv-g200);
    border-radius: var(--kv-rs);
    padding: 9px 13px;
    cursor: pointer;
    font-family: var(--kv-sans);
    text-align: left;
    width: 100%;
}
.kv-ficha .kvf-fila:hover { border-color: var(--kv-naranja); }
.kv-ficha .kvf-fila.es-elegida { border-color: var(--kv-naranja); background: var(--kv-naranja-suave); }
.kv-ficha .kvf-fila b { display: block; font-size: 14px; font-weight: 700; color: var(--kv-g900); }
.kv-ficha .kvf-fila small { display: block; font-size: 11.5px; color: var(--kv-g600); }
.kv-ficha .kvf-fila span { font-weight: 700; color: var(--kv-naranja); white-space: nowrap; font-size: 14.5px; }
.kv-ficha .kvf-fila span.es-mejor { color: var(--kv-verde); }
.kv-ficha .kvf-conf { display: grid; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0dfc4; }
.kv-ficha .kvf-conf div { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--kv-g700); }
.kv-ficha .kvf-conf svg { flex: none; color: var(--kv-verde); margin-top: 3px; }

/* ── modal del calendario ───────────────────────────────────────────────── */
.kv-ficha .kvf-velo-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .42);
    z-index: 1060;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
    overflow: auto;
}
.kv-ficha .kvf-velo-modal.es-abierto { display: flex; }
.kv-ficha .kvf-modal {
    background: #fff;
    border-radius: var(--kv-r);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
}
.kv-ficha .kvf-modal__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--kv-g100);
}
.kv-ficha .kvf-modal__top :is(h2, .kvf-h2) { font-family: var(--kv-display); font-size: 21px; line-height: 1.15; margin: 0 0 3px; font-weight: 400; }
.kv-ficha .kvf-modal__top p { margin: 0; font-size: 13px; color: var(--kv-g600); }
.kv-ficha .kvf-cerrar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--kv-g300);
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    color: var(--kv-g700);
    flex: none;
    line-height: 1;
}
.kv-ficha .kvf-cerrar:hover { background: var(--kv-g100); }
.kv-ficha .kvf-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 22px 26px 10px; }
.kv-ficha .kvf-mes :is(h3, .kvf-h3) { text-align: center; font-family: var(--kv-display); font-size: 17px; font-weight: 400; margin: 0 0 14px; }
.kv-ficha .kvf-dows,
.kv-ficha .kvf-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kv-ficha .kvf-dows span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--kv-g600);
    padding-bottom: 6px;
}
.kv-ficha .kvf-d {
    border: 0;
    background: transparent;
    border-radius: var(--kv-rs);
    padding: 6px 2px;
    text-align: center;
    font-family: var(--kv-sans);
    font-size: 14px;
    color: var(--kv-g300);
    cursor: default;
    min-height: 46px;
}
.kv-ficha .kvf-d.es-hay { color: var(--kv-g900); font-weight: 700; cursor: pointer; }
.kv-ficha .kvf-d.es-hay:hover { background: var(--kv-naranja-suave); }
.kv-ficha .kvf-d.es-hay em {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--kv-naranja);
    margin-top: 1px;
}
.kv-ficha .kvf-d.es-hay em.es-mejor { color: var(--kv-verde); }
.kv-ficha .kvf-d.es-elegido { background: var(--kv-naranja); color: #fff; }
.kv-ficha .kvf-d.es-elegido em,
.kv-ficha .kvf-d.es-elegido em.es-mejor { color: #fff; }
.kv-ficha .kvf-modal__pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 26px 18px;
    border-top: 1px solid var(--kv-g100);
    background: var(--kv-g50);
}
.kv-ficha .kvf-ley { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kv-g700); }
.kv-ficha .kvf-ley i { width: 12px; height: 12px; border-radius: 3px; background: var(--kv-verde); display: inline-block; flex: none; }
.kv-ficha .kvf-nav { display: flex; gap: 8px; }
.kv-ficha .kvf-nav button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--kv-g300);
    background: #fff;
    cursor: pointer;
    color: var(--kv-g700);
    font-size: 15px;
    line-height: 1;
}
.kv-ficha .kvf-nav button:hover:not(:disabled) { background: var(--kv-g100); }
.kv-ficha .kvf-nav button:disabled { opacity: .4; cursor: default; }

/* ── pie de reserva ─────────────────────────────────────────────────────── */
.kv-ficha .kvf-pieres {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    box-shadow: 0 -3px 20px rgba(0, 0, 0, .10);
    margin-top: 6px;
    padding: 12px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.kv-ficha .kvf-pieres .kvf-izq b { font-size: 25px; color: var(--kv-naranja); font-weight: 700; }
.kv-ficha .kvf-pieres .kvf-izq span { display: block; font-size: 12px; color: var(--kv-g600); }
/* El selector lleva `a` Y `button` a proposito. «Ver precios» de la barra de abajo dejo de
   ser un enlace y paso a ser un boton -abre el calendario, no navega-, y con el selector solo
   para `a` se quedo SIN ESTILOS: una pastilla gris del navegador en vez del boton naranja. */
.kv-ficha a.kvf-reservar,
.kv-ficha button.kvf-reservar {
    background: var(--kv-naranja);
    color: #fff;
    border: 0;
    border-radius: var(--kv-rs);
    padding: 14px 38px;
    font-family: var(--kv-sans);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}
.kv-ficha a.kvf-reservar:hover,
.kv-ficha button.kvf-reservar:hover { background: var(--kv-naranja-h); color: #fff; }

/* Restos de la ficha antigua que no deben asomar bajo la nueva. */
.kv-ficha .table-footer-note { display: none; }

@media (max-width: 900px) {
    .kv-ficha .kvf-cols,
    .kv-ficha .kvf-dos,
    .kv-ficha .kvf-origenes,
    .kv-ficha .kvf-dest,
    .kv-ficha .kvf-meses { grid-template-columns: 1fr; }
    .kv-ficha .kvf-barra { grid-template-columns: 1fr; }
    .kv-ficha .kvf-pvp { width: 100%; }
    .kv-ficha .kvf-cab h1 { font-size: 21px; }
    .kv-ficha .kvf-sec { padding: 19px 16px; }
    .kv-ficha .kvf-velo-modal { padding: 16px 10px; }
    .kv-ficha .kvf-wrap { padding: 0 14px; }
    .kv-ficha .kvf-lateral { position: static; }
}

/* ── buscador de origen ─────────────────────────────────────────────────────
   Hay circuitos con más de cien ciudades de salida, así que el desplegable
   necesita búsqueda. Va anclado bajo la barra, dentro de la cabecera. */
.kv-ficha .kvf-cab { position: relative; }
/* Cuelga del campo «Sales desde», no de la banda: esta ocupa todo el ancho de la ventana y el
   panel se abria pegado al borde izquierdo, lejos del campo. */
.kv-ficha .kvf-origen-wrap { position: relative; display: flex; }
.kv-ficha .kvf-origen-wrap > .kvf-campo { flex: 1; }
.kv-ficha .kvf-origen-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    bottom: auto;
    min-width: min(380px, 92vw);
    z-index: 40;
    background: #fff;
    border: 1px solid var(--kv-g300);
    border-radius: var(--kv-r);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    padding: 12px;
    max-width: 520px;
}
.kv-ficha .kvf-origen-busca {
    width: 100%;
    border: 1px solid var(--kv-g300);
    border-radius: var(--kv-rs);
    padding: 9px 12px;
    font-family: var(--kv-sans);
    font-size: 14px;
    margin-bottom: 8px;
}
.kv-ficha .kvf-origen-busca:focus { outline: 0; border-color: var(--kv-naranja); }
.kv-ficha .kvf-origen-lista { max-height: 320px; overflow-y: auto; display: grid; gap: 3px; }
.kv-ficha .kvf-origen-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid transparent;
    border-radius: var(--kv-rs);
    padding: 8px 11px;
    cursor: pointer;
    font-family: var(--kv-sans);
}
.kv-ficha .kvf-origen-item:hover { background: var(--kv-g50); border-color: var(--kv-g200); }
.kv-ficha .kvf-origen-item.es-elegido { border-color: var(--kv-naranja); background: var(--kv-naranja-suave); }
.kv-ficha .kvf-origen-item b { display: block; font-size: 14px; font-weight: 700; color: var(--kv-g900); }
.kv-ficha .kvf-origen-item small { display: block; font-size: 12px; color: var(--kv-g600); }
.kv-ficha .kvf-origen-item em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--kv-naranja); white-space: nowrap; }
.kv-ficha .kvf-origen-vacio { margin: 10px 4px; font-size: 13.5px; color: var(--kv-g600); }

/* ── galería ────────────────────────────────────────────────────────────── */
.kv-ficha .kvf-galeria-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.kv-ficha .kvf-galeria-rejilla img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--kv-rs);
    display: block;
}

/* ── condiciones: el texto llega como HTML libre del panel ──────────────── */
.kv-ficha .kvf-cond__c { font-size: 13.5px; color: var(--kv-g700); line-height: 1.6; }
.kv-ficha .kvf-cond__c p { margin: 0 0 9px; color: var(--kv-g700); }
.kv-ficha .kvf-cond__c ul,
.kv-ficha .kvf-cond__c ol { margin: 0 0 9px; padding-left: 18px; }
.kv-ficha .kvf-cond__c li { margin-bottom: 5px; }
.kv-ficha .kvf-cond__c table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-ficha .kvf-cond__c td,
.kv-ficha .kvf-cond__c th { padding: 6px 8px; border-bottom: 1px solid var(--kv-g100); text-align: left; }

/* Sin esto, Alpine deja ver un instante todo lo que debería estar plegado. */
.kv-ficha [x-cloak] { display: none !important; }

@media (max-width: 900px) {
    /* EL DESPLEGABLE DE CIUDADES, COMO HOJA INFERIOR.
       Estaba pegado por debajo del campo con position:absolute, asi que en el telefono se abria
       a 977 px cuando la pantalla acaba en 844: pulsabas «Sales desde» y no pasaba nada visible.
       Parecia que el buscador no funcionaba, y lo que fallaba es que nadie lo veia.
       Como hoja inferior siempre esta a la vista, y el teclado no la tapa. */
    .kv-ficha .kvf-origen-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        max-width: none;
        min-width: 0;
        max-height: 72vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 34px rgba(0, 0, 0, .22);
        z-index: 1060;   /* por encima del pie fijo, que esta en 1040 */
    }
    .kv-ficha .kvf-origen-lista { max-height: 52vh; overflow-y: auto; }
    .kv-ficha .kvf-origen-item { padding: 14px 12px; }   /* dedo, no raton */
}

/* ── preguntas frecuentes ───────────────────────────────────────────────────
   Con <details>: se pliega sin JavaScript y el navegador ya sabe hacerlo
   accesible con teclado. */
.kv-ficha .kvf-faq { border-top: 1px solid var(--kv-g100); }
.kv-ficha .kvf-faq details { border-bottom: 1px solid var(--kv-g100); }
.kv-ficha .kvf-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 34px 14px 0;
    font-size: 14.5px;
    font-weight: 700;
    position: relative;
}
.kv-ficha .kvf-faq summary::-webkit-details-marker { display: none; }
.kv-ficha .kvf-faq summary::after {
    content: '+';
    position: absolute;
    right: 6px;
    top: 12px;
    font-size: 19px;
    font-weight: 400;
    color: var(--kv-naranja);
}
.kv-ficha .kvf-faq details[open] summary::after { content: '\2212'; }
.kv-ficha .kvf-faq summary:hover { color: var(--kv-naranja-texto); }
.kv-ficha .kvf-faq p { margin: 0 0 15px; font-size: 14px; color: var(--kv-g700); max-width: 78ch; }

/* ── otros viajes ───────────────────────────────────────────────────────────
   No es relleno: es el enlazado interno que hace que Google llegue a las
   fichas sueltas en vez de quedarse en las páginas de categoría. */
.kv-ficha .kvf-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kv-ficha a.kvf-rel__a {
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: block;
}
.kv-ficha a.kvf-rel__a:hover { border-color: var(--kv-naranja); color: inherit; }
.kv-ficha .kvf-rel img { width: 100%; height: 124px; object-fit: cover; display: block; }
.kv-ficha .kvf-rel__c { padding: 13px 15px; }
.kv-ficha .kvf-rel :is(h3, .kvf-h3) {
    font-family: var(--kv-display);
    font-size: 15.5px;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--kv-azul-texto);
}
.kv-ficha .kvf-rel small { display: block; font-size: 12.5px; color: var(--kv-g600); margin-bottom: 9px; }
.kv-ficha .kvf-rel__pr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    color: var(--kv-g600);
}
.kv-ficha .kvf-rel__pr b { font-size: 19px; font-weight: 700; color: var(--kv-naranja); }
@media (max-width: 1100px) { .kv-ficha .kvf-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .kv-ficha .kvf-rel { grid-template-columns: 1fr; } }

/* Los destinos van con tope: hay circuitos con 49 y la sección se comería la página. */
.kv-ficha .kvf-vermas {
    display: inline-block;
    margin-top: 14px;
    background: none;
    border: 1px solid var(--kv-g300);
    border-radius: var(--kv-rs);
    padding: 9px 18px;
    font-family: var(--kv-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kv-g700);
    cursor: pointer;
}
.kv-ficha .kvf-vermas:hover { border-color: var(--kv-naranja); color: var(--kv-naranja-texto); }

/* ══ MÓVIL ══════════════════════════════════════════════════════════════════
   Fuente: docs/maquetas/Movil-Oporto-v2.html

   En el teléfono el calendario NO es un cuadro centrado: es una hoja que sube
   desde abajo, con UN mes a la vez y un botón de confirmar. Un modal centrado
   con dos meses no cabe, y elegir sin confirmar es demasiado fácil de tocar
   sin querer con el pulgar. */
@media (max-width: 900px) {
    .kv-ficha .kvf-velo-modal {
        padding: 0;
        align-items: flex-end;
        background: rgba(20, 18, 16, .42);
    }
    .kv-ficha .kvf-modal {
        max-width: none;
        max-height: 88vh;
        border-radius: 14px 14px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .kv-ficha .kvf-tirador {
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: var(--kv-g300);
        margin: 9px auto 0;
        flex: none;
    }
    .kv-ficha .kvf-modal__top { padding: 10px 16px 12px; }
    .kv-ficha .kvf-modal__top :is(h2, .kvf-h2) { font-size: 17px; }
    .kv-ficha .kvf-modal__top p { font-size: 11.5px; }
    .kv-ficha .kvf-meses { padding: 6px 12px 12px; overflow-y: auto; gap: 0; }
    .kv-ficha .kvf-mes :is(h3, .kvf-h3) { font-size: 16px; margin-bottom: 10px; }
    .kv-ficha .kvf-d { font-size: 13px; min-height: 44px; padding: 5px 1px; }
    .kv-ficha .kvf-d.es-hay em { font-size: 10px; }
    .kv-ficha .kvf-dows span { font-size: 9.5px; }
    .kv-ficha .kvf-modal__pie { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 16px 14px; }
    .kv-ficha .kvf-modal__pie .kvf-nav { display: none; }
    .kv-ficha .kvf-hoja-mes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 11px 16px 3px;
    }
    .kv-ficha .kvf-hoja-mes b { font-family: var(--kv-display); font-size: 16px; font-weight: 400; }
    .kv-ficha .kvf-confirmar {
        width: 100%;
        background: var(--kv-naranja);
        color: #fff;
        border: 0;
        border-radius: var(--kv-rs);
        padding: 13px;
        font-family: var(--kv-sans);
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
    }

    /* En el teléfono la foto se ve ENTERA: las imágenes de cabecera de Kerala llevan el
       nombre del circuito escrito dentro, y recortarlas a una altura fija parte ese texto
       por la mitad ("ERALA VIAJES / O/LISBOA"). Con altura automática no se corta nada. */
    /* LA FOTO, A SANGRE.
       La ficha vive dentro del .container de Bootstrap, que ya trae su propio margen lateral, y
       encima el .kvf-wrap ponia otros 14 px. Sumados dejaban la foto flotando en el centro con
       franjas blancas a los lados: parecia un recuadro pegado encima de la web en vez de ser la
       web. En el telefono la foto tiene que llegar de borde a borde.
       El calculo saca el bloque de su contenedor sea cual sea el margen que tenga encima. */
    .kv-ficha .kvf-hero-zona {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .kv-ficha .kvf-hero {
        height: 240px;          /* alta de verdad: es la foto del viaje, no una miniatura */
        border-radius: 0;
    }
    .kv-ficha .kvf-hero img { height: 100%; object-fit: cover; }
    .kv-ficha .kvf-velo { display: none; }

    /* Las migas vuelven a su sitio dentro del ancho de lectura. */
    .kv-ficha .kvf-hero-zona .kvf-migas { padding-left: 14px; padding-right: 14px; }

    /* LA CABECERA DEJA DE SER UNA TARJETA.
       Con borde, esquinas redondeadas y sombra, el titulo y el precio quedaban dentro de una
       caja blanca flotando sobre el fondo: de ahi la sensacion de recuadro pegado encima de la
       web. En el telefono el contenido tiene que ir sobre la pagina, sin marco. */
    .kv-ficha .kvf-cab {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 16px 0 0;
    }

    /* El boton de las fotos, fuera de encima de la imagen: en 390 px tapa la foto y compite con
       el titulo. Se baja a la barra de migas, que es donde no estorba. */
    .kv-ficha .kvf-galeria {
        position: static;
        display: inline-block;
        margin: 8px 0 0;
        background: var(--kv-g100, #f1f1f1);
        color: var(--kv-g700, #444);
    }

    /* FUERA LAS CAJAS.
       El .kvf-wrap ponia 14 px a cada lado y cada bloque llevaba su borde y sus esquinas
       redondeadas, asi que el contenido se leia como una pila de tarjetas flotando sobre la
       pagina. En el telefono los bloques van de borde a borde, con el aire por dentro y una
       linea fina separandolos: es lo que hace que se lea como una pagina y no como un widget
       incrustado. */
    .kv-ficha .kvf-wrap { padding: 0; }
    .kv-ficha .kvf-cab,
    .kv-ficha .kvf-sec,
    .kv-ficha .kvf-tarjeta {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
        padding-left: 16px;
        padding-right: 16px;
    }
    .kv-ficha .kvf-migas { padding-left: 16px; padding-right: 16px; }


    /* Y las migas salen de encima de la foto a su propia barra: sobre una imagen clara no
       se leen, y en 390 px no caben en una línea. Con desplazamiento lateral se ven todas. */
    .kv-ficha .kvf-migas {
        position: static;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 11px 15px;
        font-size: 12px;
        color: var(--kv-g600);
        background: #fff;
        white-space: nowrap;
        overflow-x: auto;
        border-bottom: 1px solid var(--kv-g100);
    }
    .kv-ficha .kvf-migas a { color: var(--kv-g600); }
    .kv-ficha .kvf-migas a:hover { color: var(--kv-naranja-texto); }
    .kv-ficha .kvf-migas span { font-weight: 700; color: var(--kv-g900); }
    .kv-ficha .kvf-migas i { padding: 0; }
    .kv-ficha .kvf-galeria { bottom: auto; top: 12px; right: 12px; }

    /* La tarjeta de venta sube justo debajo del título. Al final de una página de 8.000 px
       el precio y el botón no los ve nadie. */
    .kv-ficha .kvf-cols { display: flex; flex-direction: column; }
    .kv-ficha .kvf-lateral { order: -1; }

    /* Dentro de la página de verdad —no de la vista previa suelta— la columna principal se
       estiraba a 594 px en una pantalla de 390 y arrastraba la página a lo ancho. El ancho se
       fija a mano en vez de confiar en el estirado del flex, y cada sección se queda con su
       propio desplazamiento lateral: así una tabla de precios ancha se desplaza dentro de su
       recuadro en vez de romper la página entera. */
    .kv-ficha .kvf-cols > main,
    .kv-ficha .kvf-lateral {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }
    .kv-ficha .kvf-sec,
    .kv-ficha .kvf-tarjeta {
        max-width: 100%;
        overflow-x: auto;
    }
    .kv-ficha .kvf-cab { border-left: 0; border-right: 0; border-radius: 0; padding: 18px 16px 0; }
    .kv-ficha .kvf-barra { margin: 16px -16px 0; padding: 14px 16px; }
    .kv-ficha .kvf-cab h1 { font-size: 21px; }
    .kv-ficha .kvf-venta__cifra { font-size: 32px; }
    /* EL PRECIO, ARRIBA Y GRANDE.
       Estaba oculto en el telefono con el argumento de que se repetia mas abajo. Pero abajo lo
       que hay es un boton que pone «Ver precio», y el pie fijo ya solo lleva el boton de
       reservar: el resultado era una ficha de viaje donde al abrirla no se veia lo que cuesta.
       Va debajo del titulo, alineado a la izquierda y en grande, que es lo primero que se busca. */
    .kv-ficha .kvf-cab__fila { flex-direction: column; align-items: stretch; }
    .kv-ficha .kvf-pvp {
        display: block;
        text-align: left;
        margin: 14px 0 0;
    }
    .kv-ficha .kvf-pvp__cifra { font-size: 34px; line-height: 1.05; }
    .kv-ficha .kvf-pvp__pp { font-size: 12px; }

    /* La barra de reserva fija abajo es la única acción visible al hacer scroll. */
    .kv-ficha .kvf-pieres {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        /* Los bajos de la pantalla ya estan ocupados: el boton de WhatsApp vive en la esquina
           izquierda y el del chat en la derecha, los dos flotando por encima. Sin dejarles su
           hueco, se comian el precio y la mitad del boton de reservar. */
        padding: 8px 78px 8px 90px;
        gap: 10px;
        z-index: 1040;
        flex-wrap: nowrap;
    }
    /* Y solo lleva el boton. Con el precio al lado se iba a 156 px de alto -casi una quinta
       parte de la pantalla- para repetir una cifra que ya esta arriba en la cabecera y en la
       barra de seleccion. Con el boton solo son 69 px y se lee lo que hay que hacer. */
    .kv-ficha .kvf-pieres .kvf-izq { display: none; }
    .kv-ficha .kvf-pieres a.kvf-reservar,
    .kv-ficha .kvf-pieres button.kvf-reservar {
        flex: 1;
        text-align: center;
        padding: 12px 10px;
    }
    .kv-ficha .kvf-pieres .kvf-izq b { font-size: 20px; }
    .kv-ficha .kvf-pieres .kvf-izq span { font-size: 11px; }
    .kv-ficha a.kvf-reservar,
    .kv-ficha button.kvf-reservar { padding: 12px 18px; font-size: 14.5px; white-space: nowrap; }
    /* Hueco para que la barra fija no tape el final de la página. */
    .kv-ficha { padding-bottom: 88px; }
}

/* Avisos del campo de suplementos: no son suplementos, son cosas que hay que saber.
   Van debajo y en tono menor, no como fila de precio. */
.kv-ficha .kvf-avisos {
    margin-top: 14px;
    padding: 13px 16px;
    background: var(--kv-g50);
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-rs);
}
.kv-ficha .kvf-avisos p { margin: 0 0 9px; font-size: 13px; line-height: 1.55; color: var(--kv-g700); }
.kv-ficha .kvf-avisos p:last-child { margin-bottom: 0; }

/* Aviso de que la ciudad elegida no hace todas las salidas del viaje. Informa, no se disculpa:
   ahorra al cliente elegir un día que desde su ciudad no se opera. */
.kv-ficha .kvf-aviso-origen {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--kv-aviso-fondo, #fff6e8);
    border: 1px solid var(--kv-aviso-borde, #f0ddc0);
    color: var(--kv-texto, #333);
    font-size: 13px;
    line-height: 1.45;
}


/* Destino sin foto: la tarjeta es solo texto, no una caja gris esperando una imagen que no
   existe. Con la mitad del catalogo sin foto de destino, esos huecos vacios se leian como una
   pagina rota. */
.kv-ficha .kvf-dest article.es-sin-foto {
    grid-template-columns: 1fr;
    min-height: 0;
}
.kv-ficha .kvf-dest article.es-sin-foto .kvf-dest__c { padding: 14px 16px; }


/* ══════════════════════════════════════════════════════════════════════════
   V5 · docs/maquetas/Ficha-Oporto-Lisboa-v5.html

   Tres cambios de fondo respecto a la anterior:

   1. LA FOTO, LIMPIA. A todo el ancho, sin velo y sin texto encima. Una foto con
      letras encima solo funciona si la foto acompana; con 5.000 circuitos, no
      acompana casi nunca.
   2. EL TITULO EN SU BANDA, con el «desde» a la derecha. Antes iba dentro de la
      misma tarjeta que el buscador y competian entre ellos.
   3. EL BUSCADOR EN BANDA GRIS Y CAJA NARANJA. Separar «esto es el viaje» de
      «elige tu salida» es lo que hace que se vea.

   Y la caja se ensancha: 1.320 px en vez de 1.170. Con el lateral de 340 px, el
   contenido pasa de 718 a 900 px, que es lo que necesita el itinerario a dos
   columnas para no ir apretado.
   ══════════════════════════════════════════════════════════════════════════ */

/* La ficha se sale del .container de Bootstrap (1170) para tener su propio ancho.
   El margen calculado la saca sea cual sea el contenedor que la envuelva. */
.kv-ficha {
    --kvf-ancho: 1320px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 0;
    background: #fff;
}

/* Cada banda ocupa todo el ancho; lo que se alinea es su interior. */
.kv-ficha .kvf-in,
.kv-ficha .kvf-wrap {
    max-width: var(--kvf-ancho);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── 1. la foto ─────────────────────────────────────────────────────────── */
.kv-ficha .kvf-hero {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
}
.kv-ficha .kvf-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-ficha .kvf-velo { display: none; }
.kv-ficha .kvf-galeria { right: 26px; bottom: 20px; }

/* ── 2. banda blanca: titulo y precio desde ─────────────────────────────── */
.kv-ficha .kvf-titulo { background: #fff; padding: 26px 0 24px; }
.kv-ficha .kvf-titulo .kvf-in {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}
.kv-ficha .kvf-titulo__t { min-width: 0; flex: 1 1 460px; }
.kv-ficha .kvf-titulo h1 { font-size: 31px; line-height: 1.2; margin: 0 0 7px; }
.kv-ficha .kvf-titulo .kvf-sub { font-size: 14.5px; color: var(--kv-g600); margin: 0 0 3px; }
.kv-ficha .kvf-sal { font-size: 14.5px; color: var(--kv-g600); margin: 0 0 13px; }
.kv-ficha .kvf-titulo .kvf-chips { margin: 0; }

.kv-ficha .kvf-desde { text-align: right; flex: none; min-width: 190px; }
.kv-ficha .kvf-desde__et { font-size: 13px; color: var(--kv-naranja); margin-bottom: -2px; }
.kv-ficha .kvf-desde__cifra { font-size: 42px; font-weight: 700; color: var(--kv-naranja); line-height: 1.08; }
.kv-ficha .kvf-desde__antes { font-size: 13px; color: var(--kv-g600); }
.kv-ficha .kvf-desde__antes s { margin-right: 6px; }
.kv-ficha .kvf-desde__pp { font-size: 13px; color: var(--kv-g600); }
.kv-ficha .kvf-desde .kvf-promo {
    display: block; margin-top: 8px; font-size: 12px;
    color: var(--kv-verde); font-weight: 700;
}

/* ── 3. banda gris: migas y buscador ────────────────────────────────────── */
.kv-ficha .kvf-banda {
    background: var(--kv-g50);
    border-top: 1px solid var(--kv-g200);
    border-bottom: 1px solid var(--kv-g200);
    padding: 22px 0 26px;
    position: relative;
}
.kv-ficha .kvf-banda .kvf-migas {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--kv-g600);
    margin: 0 0 18px;
}
.kv-ficha .kvf-banda .kvf-migas a { color: var(--kv-g600); text-decoration: none; }
.kv-ficha .kvf-banda .kvf-migas a:hover { color: var(--kv-naranja-texto); }
.kv-ficha .kvf-banda .kvf-migas b { font-weight: 700; color: var(--kv-g900); }
.kv-ficha .kvf-banda .kvf-migas i { opacity: .5; padding: 0; font-style: normal; }

/* El buscador, en caja naranja: es la accion de la pagina. */
.kv-ficha .kvf-barra {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    margin: 0;
    padding: 14px;
    background: var(--kv-naranja);
    border-radius: var(--kv-r);
    border: 0;
}
.kv-ficha .kvf-barra .kvf-campo {
    border: 0;
    border-radius: var(--kv-rs);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}
.kv-ficha .kvf-barra .kvf-campo.es-activo { box-shadow: none; border: 0; }
.kv-ficha .kvf-barra .kvf-buscar {
    background: #111;
    border-radius: var(--kv-rs);
    padding: 13px 30px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 14px;
    height: 100%;
}
.kv-ficha .kvf-barra .kvf-buscar:hover { background: #000; }

.kv-ficha .kvf-banda .kvf-aviso-origen { margin: 12px 0 0; }
.kv-ficha .kvf-banda .kvf-origen-panel { left: 0; right: auto; max-width: 520px; }

/* ── 4. el contenido, sin cajas ─────────────────────────────────────────── */
.kv-ficha .kvf-wrap { padding-top: 0; }
.kv-ficha .kvf-subnav {
    position: sticky; top: 0; z-index: 20;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--kv-g200);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    display: flex; gap: 26px; overflow-x: auto;
}
.kv-ficha .kvf-subnav a {
    padding: 14px 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
}
.kv-ficha .kvf-subnav a.es-activo {
    color: var(--kv-naranja);
    background: none;
    border-bottom-color: var(--kv-naranja);
}

.kv-ficha .kvf-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 34px;
    margin-top: 4px;
    align-items: start;
}
.kv-ficha .kvf-sec {
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--kv-g200);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 30px 0 32px;
}
.kv-ficha .kvf-sec:last-child { border-bottom: 0; }

.kv-ficha .kvf-lateral { position: sticky; top: 74px; }

/* ── movil ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kv-ficha .kvf-in,
    .kv-ficha .kvf-wrap { padding: 0 14px; }
    .kv-ficha .kvf-hero { height: 240px; }
    .kv-ficha .kvf-titulo { padding: 18px 0 16px; }
    .kv-ficha .kvf-titulo h1 { font-size: 21px; }
    .kv-ficha .kvf-titulo .kvf-in { gap: 14px; }
    .kv-ficha .kvf-desde { text-align: left; min-width: 0; }
    .kv-ficha .kvf-desde__cifra { font-size: 32px; }
    .kv-ficha .kvf-banda { padding: 16px 0 18px; }
    .kv-ficha .kvf-barra { grid-template-columns: 1fr; }
    .kv-ficha .kvf-cols { grid-template-columns: minmax(0, 1fr); }
    .kv-ficha .kvf-sec { padding: 19px 0 20px; }
    .kv-ficha .kvf-lateral { position: static; }
    .kv-ficha .kvf-banda .kvf-origen-panel { left: 14px; right: 14px; max-width: none; width: auto; }
}

/* ── remates: herencias que había que cortar ─────────────────────────────── */

/* El título vivía dentro de .kvf-cab y de ahí sacaba su tipo y su color. Fuera de esa
   tarjeta, el h1 del sitio lo pintaba en azul y con otra tipografía. */
.kv-ficha .kvf-titulo h1 {
    font-family: var(--kv-display);
    font-weight: 600;
    color: var(--kv-g900);
    line-height: 1.2;
    margin: 0 0 7px;
}

/* Las migas venían con fondo negro y letra blanca porque iban ENCIMA de la foto. En la
   banda gris eso deja una barra negra atravesada. */
.kv-ficha .kvf-banda .kvf-migas {
    background: transparent;
    border-radius: 0;
    top: auto;
    left: auto;
}
.kv-ficha .kvf-banda .kvf-migas span { color: var(--kv-g600); }


/* ══════════════════════════════════════════════════════════════════════════
   V5 · MÓVIL — docs/maquetas/Movil-Oporto-v2.html

   En el telefono la maqueta NO es el escritorio apilado: es otra composicion.
   Lo que cambia, y por que:

   1. LA FOTO baja a 175 px. A 240 se comia media pantalla antes de decir de que
      viaje hablamos.
   2. EL BUSCADOR ANTES QUE LAS MIGAS, y sin caja naranja: campos blancos
      apilados sobre banda gris. La caja naranja a pantalla completa es un
      bloque de color que tapa el contenido.
   3. LA TARJETA DE VENTA SUBE del lateral a justo debajo de las migas. Es la
      unica forma de que el precio y el boton de reservar se vean sin arrastrar.
   4. LAS SECCIONES SE PLIEGAN. Con las nueve abiertas la pagina medía 14.724 px
      de alto: nadie llega al final, y las de abajo no existen.
   5. FUERA EL MENU PEGAJOSO de secciones: con acordeones no hace falta y roba
      una franja de pantalla en cada scroll.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* 1 · la foto */
    .kv-ficha .kvf-hero { height: 175px; }
    .kv-ficha .kvf-galeria { right: 12px; bottom: 10px; font-size: 11px; padding: 6px 12px; }

    /* el titulo, mas apretado */
    .kv-ficha .kvf-titulo { padding: 15px 0 0; }
    .kv-ficha .kvf-titulo .kvf-in { display: block; }
    .kv-ficha .kvf-titulo h1 { font-size: 21px; line-height: 1.25; margin: 0 0 5px; }
    .kv-ficha .kvf-titulo .kvf-sub { font-size: 13px; margin: 0 0 11px; }
    .kv-ficha .kvf-sal { font-size: 13px; margin: 0 0 11px; }
    .kv-ficha .kvf-titulo .kvf-chips { margin-bottom: 14px; }

    /* El «desde» de la banda blanca sobra en movil: el precio ya va en la
       tarjeta de venta y en la barra de abajo. Tres veces el mismo numero. */
    .kv-ficha .kvf-desde { display: none; }

    /* 2 · buscador antes que migas, y sin naranja */
    /* El flex va en .kvf-in, que es el padre REAL de las migas y el buscador.
       Puesto en .kvf-banda no reordenaba nada: son nietos, no hijos. */
    .kv-ficha .kvf-banda { padding: 0; border-top: 0; }
    .kv-ficha .kvf-banda .kvf-in { display: flex; flex-direction: column; padding: 0; }
    .kv-ficha .kvf-banda .kvf-barra { order: 1; }
    .kv-ficha .kvf-banda .kvf-migas { order: 2; }
    .kv-ficha .kvf-banda .kvf-aviso-origen { order: 3; padding: 0 14px; }
    .kv-ficha .kvf-banda .kvf-origen-panel { order: 4; }

    .kv-ficha .kvf-barra {
        display: block;
        background: var(--kv-g50);
        border-top: 1px solid var(--kv-g200);
        border-bottom: 1px solid var(--kv-g200);
        border-radius: 0;
        padding: 13px 14px;
        margin: 0;
    }
    .kv-ficha .kvf-barra .kvf-campo {
        width: 100%;
        background: #fff;
        border: 1px solid var(--kv-g300);
        border-radius: var(--kv-rs);
        padding: 8px 12px;
        margin-bottom: 8px;
        display: block;
    }
    .kv-ficha .kvf-barra .kvf-campo.es-activo {
        border-color: var(--kv-naranja);
        box-shadow: 0 0 0 3px rgba(255, 115, 0, .16);
    }
    .kv-ficha .kvf-barra .kvf-campo label { font-size: 11px; }
    .kv-ficha .kvf-barra .kvf-campo b { font-size: 15px; }
    /* El boton SI va aqui. Lo habia quitado por decision propia -«la accion vive en la
       tarjeta y en la barra de abajo»-, pero la maqueta lo lleva: en
       Ficha-Oporto-Lisboa-v5.html la rejilla pasa a una columna en movil y el boton se
       apila debajo de los tres campos, a todo el ancho. Sin el, los tres campos se quedan
       sin nada que cierre la accion y parecen un formulario a medias. */
    .kv-ficha .kvf-barra .kvf-buscar,
    .kv-ficha .kvf-barra a.kvf-buscar {
        display: block;
        width: 100%;
        margin: 2px 0 0;
        padding: 13px 16px;
        text-align: center;
    }

    .kv-ficha .kvf-banda .kvf-migas {
        margin: 0;
        padding: 11px 14px;
        border-bottom: 1px solid var(--kv-g100);
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: 12px;
    }

    /* 3 · la tarjeta de venta, arriba del todo del contenido */
    .kv-ficha .kvf-cols { display: flex; flex-direction: column; gap: 0; }
    .kv-ficha .kvf-lateral { order: -1; position: static; margin: 15px 0 0; }

    /* 5 · fuera el menu de secciones */
    .kv-ficha .kvf-subnav { display: none; }

    /* 4 · secciones plegables (el plegado lo enciende el script, ver la ficha) */
    .kv-ficha .kvf-sec { padding: 0; border-bottom: 0; border-top: 1px solid var(--kv-g200); }
    .kv-ficha .kvf-sec > :is(h2, .kvf-h2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 15px 0;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
    }
    .kv-ficha .kvf-sec.es-plegable > :is(h2, .kvf-h2)::after {
        content: '+';
        color: var(--kv-naranja);
        font-size: 19px;
        font-weight: 400;
        line-height: 1;
    }
    .kv-ficha .kvf-sec.es-plegable.es-abierta > :is(h2, .kvf-h2)::after { content: '\2212'; }
    .kv-ficha .kvf-sec__cuerpo { padding-bottom: 16px; }
    .kv-ficha .kvf-sec.es-plegable:not(.es-abierta) .kvf-sec__cuerpo { display: none; }
    .kv-ficha .kvf-sec > p.kvf-ay { margin-top: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   V5 · EL OFICIO: tipografia, pesos y aire

   LA CAUSA DE CASI TODO: los <section> de la ficha se estaban pintando con
   `display: inline` —algo del CSS del sitio los redefine—. En un elemento en
   linea el padding vertical NO EMPUJA NADA, asi que los 26 px de la banda del
   titulo no existian y el titulo quedaba pegado a la foto. Y al ser inline,
   heredaba ademas la negrita y el azul del contenedor: por eso «6 dias y 5
   noches» y «Salida el…» salian en negrita cuando en la maqueta van finos.
   ══════════════════════════════════════════════════════════════════════════ */

.kv-ficha .kvf-titulo,
.kv-ficha .kvf-banda { display: block; }

/* Se corta la herencia de peso y color de una vez. */
.kv-ficha .kvf-titulo,
.kv-ficha .kvf-banda { font-weight: 400; color: var(--kv-g900); }

/* ── la banda del titulo ─────────────────────────────────────────────────── */
.kv-ficha .kvf-titulo { padding: 30px 0 26px; }

.kv-ficha .kvf-titulo h1 {
    font-size: 31px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.01em;
    margin: 0 0 9px;
    color: var(--kv-g900);
}

/* Finos y grises, como en la maqueta. Antes iban en negrita y pesaban mas que el titulo. */
.kv-ficha .kvf-titulo .kvf-sub,
.kv-ficha .kvf-sal {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--kv-g600);
    line-height: 1.5;
    margin: 0 0 2px;
}
.kv-ficha .kvf-sal { margin-bottom: 16px; }

/* Las pastillas: pequenas, con aire entre ellas y separadas del texto de arriba. */
.kv-ficha .kvf-titulo .kvf-chips { gap: 8px; margin: 0; }
.kv-ficha .kvf-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    line-height: 1.5;
}

/* ── el precio ───────────────────────────────────────────────────────────── */
.kv-ficha .kvf-desde { padding-top: 4px; }
.kv-ficha .kvf-desde__et {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kv-naranja-texto);
    margin-bottom: 1px;
}
.kv-ficha .kvf-desde__cifra {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.kv-ficha .kvf-desde__antes { font-size: 13px; margin-top: 3px; }
.kv-ficha .kvf-desde__pp { font-size: 13px; color: var(--kv-g600); margin-top: 1px; }
/* La linea de promocion, separada por un filo: pegada al precio parecia parte de la cifra. */
.kv-ficha .kvf-desde .kvf-promo {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--kv-g200);
    font-size: 12.5px;
    line-height: 1.45;
}

/* ── migas, un punto mas pequenas ────────────────────────────────────────── */
.kv-ficha .kvf-banda .kvf-migas { font-size: 12.5px; margin-bottom: 16px; }

/* ── el menu de secciones y el itinerario: un punto MAS grandes ──────────── */
.kv-ficha .kvf-subnav { gap: 28px; }
.kv-ficha .kvf-subnav a { font-size: 15px; padding: 15px 0; }

.kv-ficha .kvf-sec > :is(h2, .kvf-h2) { font-size: 23px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.kv-ficha .kvf-sec > p.kvf-ay { font-size: 14.5px; margin: 0 0 18px; }
.kv-ficha .kvf-dia h3 { font-size: 15.5px; margin: 0 0 5px; }
.kv-ficha .kvf-dia p { font-size: 14.5px; line-height: 1.65; }
.kv-ficha .kvf-dia { padding: 15px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   EL BOTON DE WHATSAPP TAPABA EL PRECIO

   El boton flotante del sitio se sienta abajo a la izquierda, justo donde la
   ficha pone la barra de reservar con el precio. En la ficha se sube por encima
   de esa barra y se queda solo con el icono: se sigue viendo, y deja de tapar
   lo que el cliente ha venido a mirar.
   ══════════════════════════════════════════════════════════════════════════ */
/* En ESCRITORIO se reduce a icono y se sube por encima de la barra de reservar. */
@media (min-width: 901px) {
    body:has(.kv-ficha) .wa-container:not(.wa-container__small) { bottom: 88px; }
    body:has(.kv-ficha) .wa-button .wa-label { display: none; }
    body:has(.kv-ficha) .wa-button {
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* En MOVIL solo se sube. El boton ya viene redondo del sitio (.wa-button__small) con su
   propio tamano y centrado; tocarle el ancho y el alto descuadraba el icono dentro del
   circulo —salia pegado a una esquina—. */
@media (max-width: 900px) {
    body:has(.kv-ficha) .wa-container,
    body:has(.kv-ficha) .wa-container__small { bottom: 84px; }
}


/* ── WhatsApp: en la cabecera, no flotando (mismo criterio que el checkout) ──
   En movil el boton flotante tapaba las tarjetas de fecha y el precio de la
   barra de reservar. El acceso pasa a la cabecera fija, que esta siempre a mano.
   En el resto del sitio el flotante sigue como estaba. */
.kv-cab-acciones {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-top: 9px;
}
.kv-cab-wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #25d366; cursor: pointer; flex: none;
}
.kv-cab-wa svg { display: block; }
.kv-cab-tel { cursor: pointer; display: inline-flex; align-items: center; }

@media (max-width: 900px) {
    body:has(.kv-ficha) .wa-container,
    body:has(.kv-ficha) .wa-container__small { display: none; }
}

/* Los iconos no pueden morir en el borde de la pantalla: la columna de Bootstrap se sale
   15 px del viewport por su gutter negativo y el telefono quedaba cortado. */
.kv-cab-acciones { padding-right: 22px; gap: 12px; }

/* El icono oficial de WhatsApp ya viene con su circulo verde: ponerle otro fondo detras lo
   dejaba con un halo. Aqui solo se coloca. */
.kv-cab-wa {
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
}
.kv-cab-wa img { display: block; width: 30px; height: 30px; }
.kv-cab-acciones { padding-right: 22px; }


/* ── WhatsApp de la cabecera: centrado y simetrico ────────────────────────
   Medido contra la hamburguesa, que es su pareja al otro lado de la barra:

       hamburguesa: 9 px del borde izquierdo · centro vertical 23
       whatsapp:   45 px del borde derecho   · centro vertical 15   ← mal

   Estaba 8 px alto (por un `margin-top` puesto a ojo) y a 45 px del borde en
   vez de a 9. Ahora se centra con la altura real de la barra —46 px— y se le da
   el mismo margen que a la hamburguesa. El tamano tambien se iguala al de ella
   para que pesen lo mismo a cada lado. */
.kv-cab-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 46px;
    margin: 0;
    padding: 0 9px 0 0;
    gap: 0;
}
.kv-cab-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border-radius: 0;
    flex: none;
}
.kv-cab-wa img { display: block; width: 32px; height: 32px; }


/* ── WhatsApp de la cabecera · POSICION DEFINITIVA ────────────────────────
   Las reglas de `.kv-cab-acciones` de mas arriba estaban MUERTAS: al dejar solo
   WhatsApp quite ese envoltorio, asi que el icono cuelga directo de la columna
   de Bootstrap (`.col-xs-3`, float:left, 15 px de padding).

   Medido: la caja de contenido de esa columna va de 315 a 390, y la barra mide
   46 px de alto. Para que quede simetrico con la hamburguesa —9 px del borde y
   centrado en la barra— el icono necesita:

       margin-left: auto   →  pegado a la derecha de su columna
       margin-right: 9px   →  el mismo margen que la hamburguesa
       margin-top: 6px     →  (46 - 34) / 2, centrado de verdad
*/
.kv-cab-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 6px 9px 0 auto;
    background: none;
    border-radius: 0;
    padding: 0;
}
.kv-cab-wa img { display: block; width: 32px; height: 32px; }

/* ── Selector de viajeros ─────────────────────────────────────────────────
   Antes era un texto fijo que ademas no coincidia con lo que hacia el checkout.
   Se abre bajo el campo, como el de origen. */
.kv-ficha .kvf-pax-wrap { position: relative; }

.kv-ficha .kvf-pax-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 280px;
    z-index: 30;
    background: #fff;
    border: 1px solid var(--kv-g300);
    border-radius: var(--kv-r);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    padding: 14px;
}
.kv-ficha .kvf-pax-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kv-g100);
}
.kv-ficha .kvf-pax-fila:last-of-type { border-bottom: 0; }
.kv-ficha .kvf-pax-fila b { display: block; font-size: 14px; color: var(--kv-g900); }
.kv-ficha .kvf-pax-fila small { display: block; font-size: 12px; color: var(--kv-g600); margin-top: 1px; }

.kv-ficha .kvf-pax-mas { display: flex; align-items: center; gap: 12px; flex: none; }
.kv-ficha .kvf-pax-mas button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--kv-g300);
    background: #fff;
    color: var(--kv-g700);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.kv-ficha .kvf-pax-mas button:hover:not(:disabled) { border-color: var(--kv-naranja); color: var(--kv-naranja); }
.kv-ficha .kvf-pax-mas button:disabled { opacity: .35; cursor: default; }
.kv-ficha .kvf-pax-mas > b { min-width: 18px; text-align: center; font-size: 15px; }

.kv-ficha .kvf-pax-listo {
    width: 100%;
    margin-top: 12px;
    background: var(--kv-naranja);
    color: #fff;
    border: 0;
    border-radius: var(--kv-rs);
    padding: 10px;
    font-family: var(--kv-sans);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.kv-ficha .kvf-pax-listo:hover { background: var(--kv-naranja-h); }

/* En movil, a lo ancho de la pantalla como el de origen. */
@media (max-width: 900px) {
    .kv-ficha .kvf-pax-panel { left: 0; right: 0; min-width: 0; }
}

/* La barra de abajo entra deslizando, no de golpe: aparecer de sopetón sobre el
   contenido que se está leyendo distrae más de lo que ayuda. */
.kv-ficha .kvf-pieres { transition: transform .22s ease, opacity .22s ease; }
.kv-ficha .kvf-pieres--entra { transform: translateY(100%); opacity: 0; }

/* Rótulos que separan las ciudades más vendidas del resto. */
.kv-ficha .kvf-origen-rotulo {
    margin: 12px 0 4px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--kv-g600);
}
.kv-ficha .kvf-origen-lista > div:first-child .kvf-origen-rotulo { margin-top: 4px; }

/* ══ CIRCUITO SIN PLAZAS ═══════════════════════════════════════════════════
   Ocupa el sitio del buscador naranja cuando no hay nada que reservar. La
   página se queda viva —tiene tráfico de buscadores y el circuito puede volver
   la temporada que viene—, pero sin prometer una reserva imposible. */
.kv-ficha .kvf-sinplazas {
    background: #fff7f0;
    border: 1px solid var(--kv-naranja, #ff7300);
    border-radius: var(--kv-r, 8px);
    padding: 20px 22px;
    margin: 18px 0 0;
    text-align: center;
}
.kv-ficha .kvf-sinplazas b {
    display: block;
    font-family: var(--kv-serif, 'Lora', serif);
    font-size: 19px;
    color: var(--kv-azul, #1d83a7);
    margin-bottom: 6px;
}
.kv-ficha .kvf-sinplazas span {
    display: block;
    font-size: 14px;
    color: var(--kv-g700, #444);
    margin-bottom: 14px;
}
.kv-ficha .kvf-sinplazas a {
    display: inline-block;
    background: var(--kv-naranja, #ff7300);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 24px;
    border-radius: var(--kv-rs, 4px);
}
@media (max-width: 900px) {
    .kv-ficha .kvf-sinplazas { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
    .kv-ficha .kvf-sinplazas b { font-size: 17px; }
}

/* ══ REPARTO POR HABITACIÓN ════════════════════════════════════════════════
   Una fila por habitación, para poder decir «2 en una y 3 en otra». */
.kv-ficha .kvf-pax-quita {
    background: none;
    border: 0;
    padding: 0 0 0 8px;
    font: inherit;
    font-size: 12px;
    color: var(--kv-g600, #6b6b6b);
    text-decoration: underline;
    cursor: pointer;
}
.kv-ficha .kvf-pax-quita:hover { color: var(--kv-naranja, #ff7300); }

.kv-ficha .kvf-pax-anade {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 10px;
    background: #fff;
    border: 1px dashed var(--kv-g300, #ced4da);
    border-radius: var(--kv-rs, 4px);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kv-azul, #1d83a7);
    cursor: pointer;
}
.kv-ficha .kvf-pax-anade:disabled {
    color: var(--kv-g500, #8a8a8a);
    font-weight: 400;
    cursor: default;
    border-style: solid;
    background: var(--kv-g50, #f7f6f4);
}
.kv-ficha .kvf-pax-nota {
    margin: 9px 0 0;
    font-size: 12px;
    color: var(--kv-g600, #6b6b6b);
    text-align: center;
}

/* ══ TEXTO LARGO RECORTADO ═════════════════════════════════════════════════
   La tabla de precios de algunos circuitos trae pantallas enteras de texto
   libre. Se recorta a la altura de unos cinco párrafos y se deja abrir, con
   un degradado abajo para que se vea que hay más. */
.kv-ficha .kvf-recorte {
    position: relative;
    max-height: 320px;
    overflow: hidden;
}
.kv-ficha .kvf-recorte::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none;
}
.kv-ficha .kvf-recorte.es-abierto {
    max-height: none;
    overflow: visible;
}
.kv-ficha .kvf-recorte.es-abierto::after { display: none; }

/* Las tarjetas de destino sin foto no deben fingir que la tienen. */
.kv-ficha .kvf-dest article img { display: block; }

/* ══ LA BARRA DE ABAJO, EN MÓVIL, CON EL PRECIO ════════════════════════════
   Estaba oculto para ahorrar alto, con el argumento de que la cifra ya salía
   arriba. Pero arriba deja de verse en cuanto se hace scroll —que es
   exactamente cuando aparece esta barra—, así que lo único que quedaba era un
   botón sin contexto. El precio es el dato que decide: vuelve.

   Se compensa el alto apretando la tipografía, no quitando información. */
@media (max-width: 900px) {
    .kv-ficha .kvf-pieres .kvf-izq {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
        padding-right: 10px;
    }
    .kv-ficha .kvf-pieres .kvf-izq b { font-size: 19px; line-height: 1.15; }
    .kv-ficha .kvf-pieres .kvf-izq span {
        font-size: 11px;
        line-height: 1.3;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .kv-ficha .kvf-pieres .kvf-pieres__ir {
        flex: 0 0 auto;
        width: auto;
        padding: 12px 18px;
        white-space: nowrap;
    }
    /* Con el precio al lado, la barra ya no necesita los huecos laterales que
       se dejaban para los flotantes. */
    .kv-ficha .kvf-pieres { padding: 8px 12px; gap: 8px; }
}

/* El enlace y el botón tienen que verse idénticos: son el mismo sitio de la
   barra, solo cambia a dónde llevan. */
.kv-ficha a.kvf-reservar.kvf-pieres__ir { text-align: center; }

/* ══ TABLA DE PRECIOS CALCULADA ════════════════════════════════════════════
   Sale de las salidas reales, así que tiene tantas filas como meses queden a
   la venta: puede ser una o pueden ser doce. Se deja rodar de lado en móvil
   en vez de apretar las columnas hasta que no se lean. */
.kv-ficha .kvf-tabla-envoltorio {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--kv-g200);
    border-radius: var(--kv-r);
}
.kv-ficha .kvf-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.kv-ficha .kvf-tabla th,
.kv-ficha .kvf-tabla td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--kv-g200);
    white-space: nowrap;
}
.kv-ficha .kvf-tabla thead th {
    background: var(--kv-g50);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--kv-g600);
}
.kv-ficha .kvf-tabla tbody tr:last-child th,
.kv-ficha .kvf-tabla tbody tr:last-child td { border-bottom: 0; }
.kv-ficha .kvf-tabla tbody tr:hover { background: #fffaf5; }

/* La primera columna es la fecha: el mes en negro y los días debajo, en gris.
   Apilados se leen de un vistazo; en una línea se convierten en una ristra. */
.kv-ficha .kvf-tabla tbody th {
    font-weight: 400;
    white-space: normal;
    min-width: 150px;
}
.kv-ficha .kvf-tabla tbody th b {
    display: block;
    font-weight: 700;
    color: var(--kv-g900);
}
.kv-ficha .kvf-tabla tbody th span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--kv-g600);
}
.kv-ficha .kvf-tabla td {
    font-weight: 700;
    color: var(--kv-naranja);
}
.kv-ficha .kvf-tabla .kvf-tabla-no { color: var(--kv-g400); font-weight: 400; }
.kv-ficha .kvf-tabla-nota { margin: 12px 0 0; }

/* El texto libre dentro del modal: no puede desbordarlo. */
.kv-ficha .kvf-modal__texto {
    padding: 4px 24px 26px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--kv-g700);
    overflow-x: auto;
}
.kv-ficha .kvf-modal__texto * { max-width: 100%; }
.kv-ficha .kvf-modal__texto table { width: 100%; border-collapse: collapse; }
.kv-ficha .kvf-modal__texto img { height: auto; }

@media (max-width: 900px) {
    .kv-ficha .kvf-tabla th,
    .kv-ficha .kvf-tabla td { padding: 10px 12px; font-size: 13.5px; }
    .kv-ficha .kvf-modal__texto { padding: 4px 16px 22px; font-size: 13.5px; }
}

/* ══ EL MODAL DE CONDICIONES, CON TOPE DE ALTO ═════════════════════════════
   En escritorio `.kvf-modal` no tenía límite de alto: le venía bien al
   calendario, que ocupa lo que ocupa, pero el texto de condiciones son
   PANTALLAS —3.236 px medidos en Oporto— y el modal crecía hasta salirse.

   Se limita el modal y scrollea SU CUERPO, no la página: así la cabecera con
   el título y la equis se quedan siempre a la vista. */
.kv-ficha .kvf-velo-modal .kvf-modal {
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
.kv-ficha .kvf-modal__top { flex: 0 0 auto; }
.kv-ficha .kvf-modal__texto {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ══ SELECTOR DE CATEGORÍA Y OCUPACIONES ═══════════════════════════════════
   Con más de una categoría de hotel, pastillas en vez de más columnas: tres
   ocupaciones por dos hoteles serían seis columnas de números y no se lee
   ninguna. */
.kv-ficha .kvf-tabla-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.kv-ficha .kvf-tabla-cats button {
    background: #fff;
    border: 1px solid var(--kv-g300);
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kv-g700);
    cursor: pointer;
}
.kv-ficha .kvf-tabla-cats button.es-elegida {
    background: var(--kv-naranja);
    border-color: var(--kv-naranja);
    color: #fff;
}

/* Las tres ocupaciones a la derecha, y la doble destacada: es la que compra
   nueve de cada diez, y es la que se compara entre webs. */
.kv-ficha .kvf-tabla thead th:not(:first-child),
.kv-ficha .kvf-tabla td { text-align: right; }
.kv-ficha .kvf-tabla td { color: var(--kv-g700); font-weight: 600; }
.kv-ficha .kvf-tabla td.es-destacado {
    color: var(--kv-naranja);
    font-weight: 700;
    font-size: 15.5px;
}

/* ══ EL MES, UNA SOLA VEZ ══════════════════════════════════════════════════
   `.kvf-hoja-mes` es la cabecera de «un mes cada vez» del móvil, donde el
   calendario no cabe a dos meses. En escritorio no tenía ninguna regla —sus
   estilos viven dentro del bloque de móvil— así que se pintaba igual, sin
   formato, repitiendo el mes que ya está sobre la rejilla. */
.kv-ficha .kvf-hoja-mes { display: none; }
@media (max-width: 900px) {
    .kv-ficha .kvf-hoja-mes { display: flex; }
}

/* ══ «TE FALTA LA CIUDAD» ══════════════════════════════════════════════════
   Va pegado al buscador, que es adonde se lleva al cliente. En naranja y no en
   rojo: no ha hecho nada mal, le falta un paso. */
.kv-ficha .kvf-falta {
    margin: 8px 0 0;
    padding: 10px 14px;
    background: #fff7f0;
    border: 1px solid var(--kv-naranja);
    border-radius: var(--kv-rs);
    font-size: 13.5px;
    font-weight: 600;
    color: #a33f00;
}
@media (max-width: 900px) {
    .kv-ficha .kvf-falta { margin: 0 14px; }
}

/* ══ EL PRECIO DE LA INDIVIDUAL, EN LA TARJETA DE CADA CATEGORÍA ═══════════
   Antes se pintaba un «+260 €» suelto que se leía como el coste de subir de
   categoría, cuando es lo que cuesta la habitación individual. Con la palabra
   delante no hay forma de confundirlo. */
.kv-ficha .kvf-hotel__ind {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12.5px;
    color: var(--kv-g600);
    white-space: nowrap;
}
.kv-ficha .kvf-hotel__ind b {
    font-size: 14px;
    font-weight: 700;
    color: var(--kv-naranja);
}
.kv-ficha .kvf-hotel__ind em {
    font-style: normal;
    font-weight: 600;
    color: var(--kv-g500);
}

/* ══ LOS HOTELES ESCRITOS A MANO ══════════════════════════════════════════
   5.493 circuitos los tienen escritos y hasta hoy no se veian. El campo trae
   seis formatos distintos -desde «Hotel 3*» hasta una tabla entera de Mapa
   Group- asi que los estilos tienen que aguantar los seis. */
.kv-ficha .kvf-hoteles-txt {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--kv-g700, #37404a);
    margin: 0 0 14px;
}
.kv-ficha .kvf-hoteles-txt b,
.kv-ficha .kvf-hoteles-txt strong {
    color: var(--kv-g900, #1a1a1a);
    font-weight: 700;
}
.kv-ficha .kvf-hoteles-txt ul { margin: 0 0 10px; padding-left: 20px; }
.kv-ficha .kvf-hoteles-txt li { margin-bottom: 5px; }
.kv-ficha .kvf-hoteles-txt p  { margin: 0 0 10px; }

/* La tabla del proveedor: legible, y que no arrastre la pagina a lo ancho. */
.kv-ficha .kvf-hoteles-txt table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin: 0 0 12px;
    -webkit-overflow-scrolling: touch;
}
.kv-ficha .kvf-hoteles-txt th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kv-g600, #5b6470);
    border-bottom: 2px solid var(--kv-g200, #e4e8ec);
    padding: 7px 10px 7px 0;
    white-space: nowrap;
}
.kv-ficha .kvf-hoteles-txt td {
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--kv-g200, #e4e8ec);
    vertical-align: top;
}
.kv-ficha .kvf-hoteles-txt tr > *:last-child { padding-right: 0; }

/* «Previstos», dicho claramente y no en letra pequeña escondida: el hotel de
   un circuito no esta garantizado y el cliente tiene que saberlo antes de
   pagar, no al recibir la documentacion. */
.kv-ficha .kvf-hoteles-nota {
    background: var(--kv-g100, #f4f6f8);
    border-radius: 8px;
    padding: 10px 13px;
    margin: 0 0 18px;
}

/* El CSS global de Kerala pinta de azul el texto de las tablas, asi que los
   nombres de hotel parecian enlaces que no llevan a ningun sitio. */
.kv-ficha .kvf-hoteles-txt td,
.kv-ficha .kvf-hoteles-txt th,
.kv-ficha .kvf-hoteles-txt li,
.kv-ficha .kvf-hoteles-txt p { color: inherit; }
.kv-ficha .kvf-hoteles-txt td { color: var(--kv-g900, #1a1a1a); }
.kv-ficha .kvf-hoteles-txt td:first-child { color: var(--kv-g600, #5b6470); white-space: nowrap; }

/* ══ HOTELES PREVISTOS, EN COLUMNAS POR CIUDAD ════════════════════════════
   Maqueta aprobada el 2026-09-11 (docs/maquetas/Hoteles-previstos-columnas.html).
   Ciudad arriba en azul, hoteles debajo, categoria en estrellas alineada a la
   derecha: en una lista larga tiene que caer siempre en el mismo sitio. */
.kv-ficha .kvf-hotlist { margin: 0 0 16px; }
.kv-ficha .kvf-hotlist__rej {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.kv-ficha .kvf-ciu {
    min-width: 0;
    border: 1px solid var(--kv-g200);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}
.kv-ficha .kvf-ciu__t {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kv-azul);
}
.kv-ficha .kvf-ciu ul { margin: 0; padding: 0; list-style: none; }
.kv-ficha .kvf-ciu li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-top: 1px solid var(--kv-g100);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--kv-g900);
}
.kv-ficha .kvf-ciu li:first-child { border-top: 0; padding-top: 0; }
.kv-ficha .kvf-ciu li span { min-width: 0; overflow-wrap: anywhere; }
.kv-ficha .kvf-est {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kv-naranja-texto);
    white-space: nowrap;
}
.kv-ficha .kvf-est i { font-style: normal; color: var(--kv-naranja); margin-left: 1px; }
.kv-ficha .kvf-ciu__mas { justify-content: flex-start; }
.kv-ficha .kvf-ciu__mas button,
.kv-ficha .kvf-hotlist__ver {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--kv-azul-texto);
    cursor: pointer;
}
.kv-ficha .kvf-hotlist__ver {
    margin-top: 14px;
    padding: 9px 16px;
    border: 1.5px solid var(--kv-azul);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
@media (max-width: 620px) {
    .kv-ficha .kvf-hotlist__rej { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .kv-ficha .kvf-ciu li { font-size: 14px; }
}


/* ── mosaico de fotos: fichas con galería grande (fotos:europamundo) ───────
   La principal a la izquierda y cuatro fotos de las ciudades a la derecha, dentro del ancho de
   lectura y con las esquinas redondeadas (maqueta Ficha-galeria-fotos-europamundo.html). Las
   alturas son fijas: la página no baila mientras cargan las fotos. Sin mosaico, la ficha sigue
   con la foto sola a todo el ancho: nada de esto se aplica. */
.kv-ficha:has(.kvf-mosaico) { padding-top: 16px; }
.kv-ficha .kvf-mosaico {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 230px 230px;
    gap: 8px;
    width: calc(100% - 48px);
    max-width: calc(var(--kvf-ancho, 1320px) - 48px);
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: var(--kv-g100, #f1f1f1);
}
.kv-ficha .kvf-mosaico > * { min-width: 0; }
.kv-ficha .kvf-mosaico picture,
.kv-ficha .kvf-hero picture { display: block; width: 100%; height: 100%; }
.kv-ficha .kvf-mosaico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.kv-ficha .kvf-mosaico__p { grid-row: 1 / 3; }
.kv-ficha .kvf-mosaico__ver {
    position: absolute;
    right: 14px;
    bottom: 14px;
    background: rgba(255, 255, 255, .94);
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    font-family: var(--kv-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kv-g900);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    cursor: pointer;
}
.kv-ficha .kvf-mosaico__ver:hover { background: #fff; }

/* el visor: fondo oscuro, la foto a lo que dé la pantalla, pie con la ciudad y el contador */
html.kvf-sin-scroll { overflow: hidden; }
.kv-ficha .kvf-visor {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(12, 14, 18, .94);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kv-ficha .kvf-visor__f {
    margin: 0;
    max-width: min(1400px, 92vw);
    max-height: 92vh;
    text-align: center;
}
.kv-ficha .kvf-visor__f img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}
.kv-ficha .kvf-visor__f figcaption {
    color: rgba(255, 255, 255, .85);
    font-family: var(--kv-sans);
    font-size: 14px;
    line-height: 1.4;
    margin-top: 12px;
}
.kv-ficha .kvf-visor__f figcaption b { color: rgba(255, 255, 255, .55); font-weight: 600; margin-left: 10px; }
.kv-ficha .kvf-visor__x,
.kv-ficha .kvf-visor__ant,
.kv-ficha .kvf-visor__sig {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}
.kv-ficha .kvf-visor__x:hover,
.kv-ficha .kvf-visor__ant:hover,
.kv-ficha .kvf-visor__sig:hover { background: rgba(255, 255, 255, .28); }
.kv-ficha .kvf-visor__x { top: 18px; right: 18px; }
.kv-ficha .kvf-visor__ant { left: 18px; top: 50%; transform: translateY(-50%); }
.kv-ficha .kvf-visor__sig { right: 18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) {
    /* en el teléfono, solo la principal, de borde a borde; el botón abre el visor con todas */
    .kv-ficha:has(.kvf-mosaico) { padding-top: 0; }
    .kv-ficha .kvf-mosaico {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 220px;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }
    .kv-ficha .kvf-mosaico picture.kvf-mosaico__s { display: none; }   /* más específico que «.kvf-mosaico picture» */
    .kv-ficha .kvf-mosaico__p { grid-row: auto; }
    .kv-ficha .kvf-mosaico__ver { right: 12px; bottom: 10px; font-size: 12px; padding: 7px 12px; }
    .kv-ficha .kvf-visor__ant,
    .kv-ficha .kvf-visor__sig { width: 38px; height: 38px; line-height: 38px; font-size: 24px; }
    .kv-ficha .kvf-visor__ant { left: 8px; }
    .kv-ficha .kvf-visor__sig { right: 8px; }
    .kv-ficha .kvf-visor__f img { max-height: 70vh; }
}


/* ── hoteles reales (circuit_hotel): foto, nombre con estrellas, dirección y mapa ─────── */
.kv-ficha .kvf-ciu li.kvf-hot { align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 7px 0; }
.kv-ficha .kvf-hot__f { flex: none; display: block; width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--kv-g100); }
.kv-ficha .kvf-hot__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-ficha .kvf-hot__d { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kv-ficha .kvf-hot__n { font-weight: 600; overflow-wrap: anywhere; }
.kv-ficha .kvf-hot__n .kvf-est { margin-left: 6px; }
.kv-ficha .kvf-hot small { font-size: 12.5px; line-height: 1.4; color: var(--kv-g600); overflow-wrap: anywhere; }
.kv-ficha .kvf-hot small a { color: var(--kv-azul-texto); text-decoration: none; font-weight: 600; }
.kv-ficha .kvf-hot small a:hover { text-decoration: underline; }


/* ── la ficha en el móvil (2026-09-11) ────────────────────────────────────── */
.kv-ficha .kvf-solo-movil { display: none; }
.kv-ficha .kvf-dest article { cursor: pointer; }
.kv-ficha .kvf-dest article:hover { border-color: var(--kv-g300, #d5dce2); }

/* visor de «qué visitas»: foto a la izquierda, texto a la derecha; en el móvil apilado */
.kv-ficha .kvf-vdest {
    position: relative;
    width: min(1040px, 94vw);
    max-height: 90vh;
    display: grid;
    grid-template-columns: 58% 42%;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.kv-ficha .kvf-vdest__f { background: #1f2933; min-height: 360px; }
.kv-ficha .kvf-vdest__f img { width: 100%; height: 100%; max-height: 90vh; object-fit: cover; display: block; }
.kv-ficha .kvf-vdest__t { padding: 26px 28px 28px; overflow: auto; max-height: 90vh; }
.kv-ficha .kvf-vdest__k { font-size: 12.5px; color: var(--kv-g600); margin-bottom: 6px; }
.kv-ficha .kvf-vdest__t :is(h3, .kvf-h3) { margin: 0 0 10px; font-size: 22px; line-height: 1.2; font-weight: 500; }
.kv-ficha .kvf-vdest__d { font-size: 14.5px; line-height: 1.6; color: var(--kv-g700); }
.kv-ficha .kvf-vdest__d p { margin: 0 0 10px; color: var(--kv-g700); }
.kv-ficha .kvf-vdest .kvf-visor__x { background: rgba(0, 0, 0, .45); top: 12px; right: 12px; }

@media (max-width: 900px) {
    /* 1 · cabeceras de sección: sin el prefijo del viaje, a 17 px */
    .kv-ficha .kvf-sec > :is(h2, .kvf-h2) { font-size: 17px; line-height: 1.3; }
    .kv-ficha .kvf-sec > :is(h2, .kvf-h2) .kvf-sec__pre { display: none; }
    .kv-ficha .kvf-sec > :is(h2, .kvf-h2) .kvf-sec__tx { display: block; flex: 1; min-width: 0; }
    .kv-ficha .kvf-sec > :is(h2, .kvf-h2) .kvf-sec__tx::first-letter { text-transform: uppercase; }

    /* 2 · el chat de HubSpot, por encima de la barra de precio */
    #hubspot-messages-iframe-container { bottom: 70px !important; }

    /* 3 · itinerario plegable */
    .kv-ficha .kvf-solo-movil { display: inline-block; margin-top: 12px; }
    .kv-ficha .kvf-dia { padding: 11px 0; }
    .kv-ficha .kvf-dia h3 {
        display: flex;
        justify-content: flex-start;   /* «Día N» y el título pegados a la izquierda; el + a la derecha */
        align-items: flex-start;
        gap: 8px;
        margin: 0;
        cursor: pointer;
        user-select: none;
    }
    .kv-ficha .kvf-dia h3 em { flex: none; }
    .kv-ficha .kvf-dia h3::after { content: '+'; color: var(--kv-naranja); font-size: 18px; line-height: 1.2; flex: none; margin-left: auto; }
    .kv-ficha .kvf-dia.es-abierto h3::after { content: '\2013'; }
    .kv-ficha .kvf-dia.es-abierto h3 { margin-bottom: 6px; }
    .kv-ficha .kvf-dia:not(.es-abierto) p { display: none; }
    .kv-ficha .kvf-dia.es-oculto { display: none; }

    /* 4 · visor de localidades a pantalla completa */
    .kv-ficha .kvf-visor--dest { padding: 0; }
    .kv-ficha .kvf-vdest {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 40vh minmax(0, 1fr);
    }
    .kv-ficha .kvf-vdest__f { min-height: 0; }
    .kv-ficha .kvf-vdest__f img { max-height: none; }
    .kv-ficha .kvf-vdest__t { max-height: none; padding: 16px 16px 90px; }
    .kv-ficha .kvf-vdest__t :is(h3, .kvf-h3) { font-size: 20px; }
    .kv-ficha .kvf-visor--dest .kvf-visor__ant,
    .kv-ficha .kvf-visor--dest .kvf-visor__sig { top: auto; bottom: 18px; transform: none; background: rgba(0, 0, 0, .55); }
}


/* ── hoteles previstos: ruta con espina (maqueta Claude Design 2a/2b/2c) ──── */
.kv-ficha .kvf-hot-res { margin: 0 0 14px; }
.kv-ficha .kvf-hot-res b { color: var(--kv-g900); font-weight: 600; }
.kv-ficha .kvf-espina { position: relative; padding-left: 26px; }
.kv-ficha .kvf-espina::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--kv-g200); }
.kv-ficha .kvf-espina--una { padding-left: 0; }
.kv-ficha .kvf-espina--una::before,
.kv-ficha .kvf-espina--una .kvf-par__pt { display: none; }
.kv-ficha .kvf-par { padding: 7px 0 8px; border-top: 1px solid var(--kv-g100); }
.kv-ficha .kvf-par:first-child { border-top: 0; padding-top: 0; }
.kv-ficha .kvf-par__cab { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 28px; }
.kv-ficha .kvf-par__pt { position: absolute; left: -25px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--kv-azul); background: #fff; }
.kv-ficha .kvf-par__cab b { font-size: 15.5px; font-weight: 700; color: var(--kv-azul-texto); }
.kv-ficha .kvf-par__cab i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kv-g600); }
.kv-ficha .kvf-par__cab small { margin-left: auto; font-size: 12.5px; color: var(--kv-g600); white-space: nowrap; }
.kv-ficha .kvf-par ul { list-style: none; margin: 2px 0 0; padding: 0; }
.kv-ficha .kvf-par li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 6px 0; }
.kv-ficha .kvf-par li + li { border-top: 1px solid var(--kv-g100); }
.kv-ficha .kvf-par li > div { min-width: 0; }
.kv-ficha .kvf-hot__n { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.kv-ficha .kvf-hot__n .kvf-est { margin-left: 7px; font-size: 11.5px; letter-spacing: 1px; color: var(--kv-naranja); }
.kv-ficha .kvf-par li small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--kv-g600); overflow-wrap: anywhere; }
.kv-ficha .kvf-hot__mapa,
.kv-ficha .kvf-par__mas { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--kv-azul-texto); cursor: pointer; white-space: nowrap; }
.kv-ficha .kvf-hot__mapa:hover,
.kv-ficha .kvf-par__mas:hover { text-decoration: underline; }
.kv-ficha .kvf-par__mas { white-space: normal; }
.kv-ficha .kvf-hot__mapa { flex: none; padding-top: 2px; }
.kv-ficha .kvf-par li.kvf-par__mas { border-top: 0; padding: 2px 0 4px; }
.kv-ficha .kvf-par li.es-alt { display: none; }
@media (min-width: 901px) {
    /* hasta 20 hoteles: todo abierto y sin botones de alternativos */
    .kv-ficha .kvf-espina--todo li.es-alt { display: flex; }
    .kv-ficha .kvf-espina--todo .kvf-par__mas { display: none; }
}

/* modal de mapa */
.kv-ficha .kvf-vmapa { position: relative; width: min(760px, 94vw); max-height: 92vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.kv-ficha .kvf-vmapa__cab { display: flex; gap: 14px; align-items: center; padding: 16px 18px 12px; }
.kv-ficha .kvf-vmapa__cab img,
.kv-ficha .kvf-vmapa__ico { flex: none; width: 96px; height: 72px; border-radius: 8px; object-fit: cover; }
.kv-ficha .kvf-vmapa__ico { display: flex; align-items: center; justify-content: center; background: var(--kv-g100); color: var(--kv-g300, #d5dce2); }
.kv-ficha .kvf-vmapa__t { min-width: 0; }
.kv-ficha .kvf-vmapa__t :is(h3, .kvf-h3) { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 500; }
.kv-ficha .kvf-vmapa__t .kvf-est { display: block; margin: 2px 0 0; font-size: 12px; letter-spacing: 1px; color: var(--kv-naranja); }
.kv-ficha .kvf-vmapa__t p { margin: 3px 0 0; font-size: 13.5px; color: var(--kv-g600); }
.kv-ficha .kvf-vmapa .kvf-visor__x { position: static; flex: none; margin-left: auto; align-self: flex-start; width: 34px; height: 34px; line-height: 34px; font-size: 20px; background: var(--kv-g100); color: var(--kv-g700); }
.kv-ficha .kvf-vmapa .kvf-visor__x:hover { background: var(--kv-g200); }
.kv-ficha .kvf-vmapa iframe { display: block; width: 100%; height: min(420px, 55vh); border: 0; }
.kv-ficha .kvf-vmapa__pie { margin: 0; padding: 10px 18px 14px; font-size: 12.5px; color: var(--kv-g600); }

@media (max-width: 900px) {
    .kv-ficha .kvf-espina { padding-left: 22px; }
    .kv-ficha .kvf-par__pt { left: -21px; }
    .kv-ficha .kvf-par__cab small { margin-left: 0; flex-basis: 100%; white-space: normal; }
    .kv-ficha .kvf-par li { flex-direction: column; gap: 4px; }
    .kv-ficha .kvf-hot__mapa { padding: 6px 0; }
    .kv-ficha .kvf-par.es-oculta { display: none; }
    .kv-ficha .kvf-visor--mapa { padding: 0; align-items: flex-end; }
    .kv-ficha .kvf-vmapa { width: 100vw; max-height: 94vh; border-radius: 14px 14px 0 0; }
    .kv-ficha .kvf-vmapa iframe { height: 52vh; }
}


/* con un visor o modal abierto, los widgets de chat se esconden aunque se vuelvan a montar solos */
html.kvf-sin-scroll #hubspot-messages-iframe-container,
html.kvf-sin-scroll .wa-container { visibility: hidden !important; }


/* ── espina v2: todos los previstos de cada parada en una línea, con el mismo peso ─────── */
.kv-ficha .kvf-par { padding: 8px 0 9px; }
.kv-ficha .kvf-par.es-oculta { display: none; }
.kv-ficha .kvf-par__hot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 3px 0 0; padding: 0; list-style: none; }
.kv-ficha .kvf-par__hot li { display: flex; align-items: baseline; padding: 0; border: 0; }
.kv-ficha .kvf-par__hot li + li::before { content: '·'; color: var(--kv-g300, #d5dce2); margin: 0 10px; }
.kv-ficha .kvf-hot__chip {
    background: none;
    border: 0;
    padding: 2px 0;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--kv-g900);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--kv-g300, #d5dce2);
    text-underline-offset: 3px;
}
.kv-ficha .kvf-hot__chip:hover { color: var(--kv-azul-texto); text-decoration-color: var(--kv-azul); }
.kv-ficha .kvf-hot__chip .kvf-est { margin-left: 5px; font-size: 11px; letter-spacing: 1px; color: var(--kv-naranja); text-decoration: none; display: inline-block; }
.kv-ficha .kvf-espina > .kvf-vermas { margin-top: 12px; }
@media (max-width: 900px) {
    /* en el móvil, un hotel por línea (en línea los separadores se quedaban sueltos al saltar) */
    .kv-ficha .kvf-par__hot { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 2px; }
    .kv-ficha .kvf-par__hot li + li::before { content: none; }
    .kv-ficha .kvf-hot__chip { padding: 3px 0; font-size: 14px; }
    .kv-ficha .kvf-par { padding: 7px 0 8px; }
}


/* ── espina v3: el artboard 1c de Claude Design, con sus medidas ───────────────────────── */
.kv-ficha .kvf-hot-res { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; font-size: 14px; color: #5a6772; }
.kv-ficha .kvf-hot-res b { color: #212529; font-weight: 600; }
.kv-ficha .kvf-hot-nota { margin: 0 0 18px; max-width: 640px; font-size: 13px; line-height: 1.55; color: #5a6772; }
.kv-ficha .kvf-hot-nota b { font-weight: 600; color: #212529; }
.kv-ficha .kvf-espina { padding: 0; }
.kv-ficha .kvf-espina::before { display: none; }
.kv-ficha .kvf-par { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; min-width: 0; padding: 0; border: 0; }
.kv-ficha .kvf-espina--una .kvf-par { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kv-ficha .kvf-par__l { position: relative; display: flex; justify-content: center; }
.kv-ficha .kvf-par__l i { display: block; width: 2px; height: 100%; background: #e6ebef; }
.kv-ficha .kvf-par__l b { position: absolute; top: 20px; width: 11px; height: 11px; border-radius: 999px; background: #fff; border: 2px solid #1d83a7; }
.kv-ficha .kvf-par__c { min-width: 0; }
.kv-ficha .kvf-par__cab {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 12px 0;
    background: none;
    border: 0;
    border-top: 1px solid #f4f6f8;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.kv-ficha .kvf-par:first-child .kvf-par__cab { border-top: 0; }
.kv-ficha .kvf-par__cab:hover { opacity: .72; }
.kv-ficha .kvf-par__t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kv-ficha .kvf-par__ciu { font-size: 16px; font-weight: 700; letter-spacing: .01em; color: #17708f; }
.kv-ficha .kvf-par__pais { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a97a1; }
.kv-ficha .kvf-par__meta { flex: none; font-size: 13px; color: #5a6772; white-space: nowrap; }
.kv-ficha .kvf-par__meta--m { display: none; }
.kv-ficha .kvf-par__sig { flex: none; width: 26px; height: 26px; border-radius: 999px; background: #f4f6f8; color: #37404a; font-size: 16px; line-height: 26px; text-align: center; }
.kv-ficha .kvf-par__lista { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 20px; }
.kv-ficha .kvf-par__lista--sola { gap: 16px; padding: 0; }
.kv-ficha .kvf-par__lista--sola .kvf-hot { padding-top: 14px; border-top: 1px solid #e6ebef; }
.kv-ficha .kvf-hot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; min-width: 0; padding: 0; border: 0; }
.kv-ficha .kvf-hot__d { min-width: 0; }
.kv-ficha .kvf-hot__n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 600; line-height: 1.35; }
.kv-ficha .kvf-hot__n .kvf-est { margin: 0; font-size: 11.5px; letter-spacing: 1.5px; color: #b34d00; white-space: nowrap; }
.kv-ficha .kvf-hot__dir { margin-top: 2px; font-size: 13px; line-height: 1.45; color: #5a6772; overflow-wrap: anywhere; }
.kv-ficha .kvf-hot__mapa { flex: none; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: #17708f; cursor: pointer; white-space: nowrap; }
.kv-ficha .kvf-hot__mapa:hover { color: #b34d00; text-decoration: underline; }
.kv-ficha .kvf-par__hot, .kv-ficha .kvf-hot__chip { display: none; }

@media (max-width: 900px) {
    .kv-ficha .kvf-hot-nota { margin-bottom: 12px; }
    .kv-ficha .kvf-par { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
    .kv-ficha .kvf-par__l b { width: 9px; height: 9px; }
    .kv-ficha .kvf-par__cab { gap: 10px; min-height: 48px; padding: 11px 0; }
    .kv-ficha .kvf-par__t { display: block; }
    .kv-ficha .kvf-par__ciu { display: block; font-size: 15px; }
    .kv-ficha .kvf-par__pais { display: none; }
    .kv-ficha .kvf-par__meta--d { display: none; }
    .kv-ficha .kvf-par__meta--m { display: block; margin-top: 1px; font-size: 12.5px; white-space: normal; }
    .kv-ficha .kvf-par__lista { padding-bottom: 16px; }
    .kv-ficha .kvf-hot { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .kv-ficha .kvf-hot__n { font-size: 14.5px; }
    .kv-ficha .kvf-hot__n .kvf-est { font-size: 11px; }
    .kv-ficha .kvf-hot__dir { font-size: 12.5px; }
    .kv-ficha .kvf-hot__mapa { margin-top: 4px; min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
}

/* pestañas de categoría de hotel (Hoteles previstos del panel) */
.kv-ficha .kvf-hotcats { margin-bottom: 16px; }
.kv-ficha .kvf-hotcats button small { font-weight: 600; opacity: .7; margin-left: 4px; }

/* ── refinado v4 (Hoteles-Refinado.dc.html): mismos huesos, menos ruido ─────────────────── */
/* (el H2 de hoteles ya no lleva el titulo delante: mismo peso que el resto) */
.kv-ficha .kvf-hot-res { gap: 4px 7px; align-items: baseline; margin-bottom: 0; font-size: 14px; }
.kv-ficha .kvf-hot-res__sep { font-style: normal; color: #c9d2da; }
.kv-ficha .kvf-hot-nota { margin: 7px 0 0; max-width: 62ch; font-size: 13px; color: #8a97a1; }
.kv-ficha .kvf-espina { padding-top: 20px; }
.kv-ficha .kvf-par__l b { width: 9px; height: 9px; top: 20px; background: #1d83a7; border: 0; }
.kv-ficha .kvf-par__cab { align-items: baseline; gap: 10px; padding: 13px 0; border-top: 0; border-bottom: 1px solid #e6ebef; }
.kv-ficha .kvf-par__t { gap: 10px; }
.kv-ficha .kvf-par__meta { font-size: 13.5px; }
.kv-ficha .kvf-par__sig { width: 28px; height: 28px; line-height: 26px; font-size: 15px; background: transparent; border: 1px solid #d5dce2; align-self: center; }
.kv-ficha .kvf-par__lista { gap: 2px; padding: 6px 0 22px; }
.kv-ficha .kvf-hot { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; }
.kv-ficha .kvf-hot__n { font-size: 15.5px; gap: 9px; }
.kv-ficha .kvf-hot__n .kvf-est { font-size: 11px; letter-spacing: 2px; color: #37404a; }
.kv-ficha .kvf-hot__dir { margin-top: 0; font-size: 13.5px; }
.kv-ficha .kvf-hot__mapa { align-self: flex-start; padding: 2px 0 0; white-space: normal; }
.kv-ficha .kvf-par__lista--sola { gap: 0; padding: 0; }
.kv-ficha .kvf-par__lista--sola .kvf-hot { border-top: 1px solid #e6ebef; padding: 12px 0; }
.kv-ficha .kvf-par__lista--sola .kvf-hot:first-child { border-top: 0; padding-top: 0; }
.kv-ficha .kvf-vmapa__cab { align-items: flex-start; gap: 13px; padding: 15px 16px 12px; }
.kv-ficha .kvf-vmapa__cab img, .kv-ficha .kvf-vmapa__ico { width: 112px; height: 84px; }
.kv-ficha .kvf-vmapa__t :is(h3, .kvf-h3) { display: inline; font-size: 17px; line-height: 1.25; }
.kv-ficha .kvf-vmapa__t .kvf-est { display: inline; margin: 0 0 0 8px; font-size: 11px; letter-spacing: 2px; color: #37404a; }
.kv-ficha .kvf-vmapa__t p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #5a6772; }
.kv-ficha .kvf-vmapa__meta { font-size: 12.5px; }
.kv-ficha .kvf-vmapa__meta b { color: #212529; font-weight: 600; }
.kv-ficha .kvf-vmapa iframe { border-top: 1px solid #e6ebef; }
@media (max-width: 900px) {
    .kv-ficha .kvf-par__cab { align-items: center; padding: 12px 0; }
    .kv-ficha .kvf-par__meta--m { font-size: 13px; }
    .kv-ficha .kvf-hot { padding: 10px 0; }
    .kv-ficha .kvf-hot__n { font-size: 15px; }
    .kv-ficha .kvf-hot__n .kvf-est { font-size: 10.5px; }
    .kv-ficha .kvf-hot__dir { font-size: 13px; }
    .kv-ficha .kvf-hot__mapa { margin-top: 0; }
    .kv-ficha .kvf-vmapa__cab img, .kv-ficha .kvf-vmapa__ico { width: 96px; height: 72px; }
}

/* ── modal con galería (Hoteles-galeria.html, turno 7) ─────────────────────────────────── */
.kv-ficha .kvf-vmapa { width: min(820px, 94vw); }
.kv-ficha .kvf-vmapa__asa { display: none; }
.kv-ficha .kvf-vmapa__cab { align-items: flex-start; gap: 16px; padding: 16px 18px 12px; }
.kv-ficha .kvf-vmapa__t :is(h3, .kvf-h3) { font-size: 19px; letter-spacing: -.01em; }
.kv-ficha .kvf-vmapa__t .kvf-est { font-size: 11.5px; margin-left: 9px; }
.kv-ficha .kvf-vmapa__t p { font-size: 13.5px; }
.kv-ficha .kvf-vmapa__meta { font-size: 12.5px; }
.kv-ficha .kvf-vmapa__tabs { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid #e6ebef; }
.kv-ficha .kvf-vmapa__tabs button { padding: 8px 3px 9px; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: 13px; font-weight: 600; color: #5a6772; cursor: pointer; }
.kv-ficha .kvf-vmapa__tabs button.es-activa { color: #212529; border-bottom-color: #1d83a7; }
.kv-ficha .kvf-vmapa__marco { position: relative; width: 100%; height: 400px; background: #111417; }
.kv-ficha .kvf-vmapa__marco picture, .kv-ficha .kvf-vmapa__marco img { display: block; width: 100%; height: 100%; }
.kv-ficha .kvf-vmapa__marco img { object-fit: cover; }
.kv-ficha .kvf-vmapa__fl { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #212529; font-size: 17px; line-height: 38px; text-align: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.kv-ficha .kvf-vmapa__fl--a { left: 14px; }
.kv-ficha .kvf-vmapa__fl--s { right: 14px; }
.kv-ficha .kvf-vmapa__cont { position: absolute; right: 14px; bottom: 13px; padding: 4px 11px; border-radius: 999px; background: rgba(12, 14, 18, .66); color: #fff; font-size: 12.5px; font-weight: 600; }
.kv-ficha .kvf-vmapa__puntos { display: none; }
.kv-ficha .kvf-vmapa__tira { display: flex; gap: 8px; padding: 11px 18px 13px; overflow-x: auto; }
.kv-ficha .kvf-vmapa__tira button { flex: none; width: 78px; height: 55px; padding: 0; border: 2px solid #e6ebef; border-radius: 8px; overflow: hidden; background: #f4f6f8; cursor: pointer; opacity: .6; }
.kv-ficha .kvf-vmapa__tira button.es-activa { border-color: #1d83a7; opacity: 1; }
.kv-ficha .kvf-vmapa__tira img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-ficha .kvf-vmapa iframe { height: 400px; border-top: 0; }
.kv-ficha .kvf-vmapa__pie { padding: 12px 18px 15px; border-top: 1px solid #f1f4f6; }
@media (max-width: 900px) {
    .kv-ficha .kvf-vmapa { border-radius: 16px 16px 0 0; }
    .kv-ficha .kvf-vmapa__asa { display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: #d5dce2; }
    .kv-ficha .kvf-vmapa__cab { gap: 12px; padding: 11px 16px; }
    .kv-ficha .kvf-vmapa__t :is(h3, .kvf-h3) { font-size: 17px; }
    .kv-ficha .kvf-vmapa .kvf-visor__x { width: 44px; height: 44px; line-height: 44px; font-size: 21px; }
    .kv-ficha .kvf-vmapa__tabs { gap: 22px; padding: 0 16px; }
    .kv-ficha .kvf-vmapa__tabs button { min-height: 44px; padding: 0 3px; }
    .kv-ficha .kvf-vmapa__marco { height: 244px; }
    .kv-ficha .kvf-vmapa__fl { width: 44px; height: 44px; line-height: 44px; font-size: 18px; background: rgba(255, 255, 255, .85); box-shadow: none; }
    .kv-ficha .kvf-vmapa__fl--a { left: 8px; }
    .kv-ficha .kvf-vmapa__fl--s { right: 8px; }
    .kv-ficha .kvf-vmapa__cont { display: none; }
    .kv-ficha .kvf-vmapa__puntos { position: absolute; left: 0; right: 0; bottom: 11px; display: flex; justify-content: center; gap: 7px; }
    .kv-ficha .kvf-vmapa__puntos i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .42); }
    .kv-ficha .kvf-vmapa__puntos i.es-activo { background: #fff; }
    .kv-ficha .kvf-vmapa__tira { padding: 11px 16px; }
    .kv-ficha .kvf-vmapa__tira button { width: 86px; height: 60px; }
    .kv-ficha .kvf-vmapa iframe { height: 244px; }
    .kv-ficha .kvf-vmapa__pie { padding: 12px 16px 20px; }
}

/* ── aire entre título y pastillas de categoría ──────────────────────────────────────────── */
.kv-ficha .kvf-tabla-cats { margin: 18px 0 20px; }
.kv-ficha .kvf-hotcats { margin: 16px 0 18px; }

/* ── tipografía unificada: 700 solo en cifras grandes y títulos; lo pequeño en 600 (la Open Sans Bold
      a 11-15 px cierra los ojos de la «e» y la «a») ─────────────────────────────────────────── */
.kv-ficha .kvf-fila b, .kv-ficha .kvf-fila span, .kv-ficha .kvf-fila small, .kv-ficha .kvf-fila em,
.kv-ficha .kvf-otra b, .kv-ficha .kvf-otra a,
.kv-ficha .kvf-opc b, .kv-ficha .kvf-opc span,
.kv-ficha .kvf-hotel__t b, .kv-ficha .kvf-hotel__t span, .kv-ficha .kvf-hotel ul b, .kv-ficha .kvf-hotel__ind b,
.kv-ficha table.kvf-tp thead th, .kv-ficha table.kvf-tp td.kvf-p,
.kv-ficha .kvf-tabla thead th, .kv-ficha .kvf-tabla tbody th b, .kv-ficha .kvf-tabla td, .kv-ficha .kvf-tabla td.es-destacado,
.kv-ficha .kvf-origenes b, .kv-ficha .kvf-escala b, .kv-ficha .kvf-origen-item b, .kv-ficha .kvf-origen-item em, .kv-ficha .kvf-origen-rotulo,
.kv-ficha .kvf-d.es-hay, .kv-ficha .kvf-d.es-hay em, .kv-ficha .kvf-dows span,
.kv-ficha .kvf-migas span, .kv-ficha .kvf-banda .kvf-migas b,
.kv-ficha .kvf-dia h3, .kv-ficha .kvf-dia-et, .kv-ficha .kvf-cond .kvf-et,
.kv-ficha .kvf-par__ciu, .kv-ficha .kvf-par__pais, .kv-ficha .kvf-ciu__t, .kv-ficha .kvf-est,
.kv-ficha .kvf-dto, .kv-ficha .kvf-promo, .kv-ficha .kvf-auto, .kv-ficha .kvf-pax-listo, .kv-ficha .kvf-sinplazas a,
.kv-ficha .kvf-tarjeta a.kvf-mas, .kv-ficha .kvf-vermas, .kv-ficha .kvf-faq summary, .kv-ficha .kvf-hoteles-txt strong,
.kv-ficha .kvf-lateral b, .kv-ficha .kvf-lateral strong, .kv-ficha .kvf-lateral small, .kv-ficha .kvf-lateral em { font-weight: 600; }
.kv-ficha .kvf-desde__cifra, .kv-ficha .kvf-pvp__cifra, .kv-ficha .kvf-venta__cifra, .kv-ficha .kvf-pieres .kvf-izq b, .kv-ficha .kvf-rel__pr b,
.kv-ficha button.kvf-reservar, .kv-ficha a.kvf-reservar-side { font-weight: 700; }

/* ── móvil: ficha de hotel a pantalla completa; flechas de localidades sobre la foto ────── */
@media (max-width: 900px) {
    .kv-ficha .kvf-visor--mapa { align-items: stretch; }
    .kv-ficha .kvf-vmapa { width: 100vw; max-height: none; min-height: 100dvh; border-radius: 0; }
    .kv-ficha .kvf-vmapa__asa { display: none; }
    .kv-ficha .kvf-vmapa__cab { padding: 14px 16px 10px; }
    .kv-ficha .kvf-vmapa__marco { height: min(300px, 64vw); }
    .kv-ficha .kvf-vmapa iframe { height: min(300px, 64vw); }
    .kv-ficha .kvf-visor--dest .kvf-visor__ant,
    .kv-ficha .kvf-visor--dest .kvf-visor__sig { top: 20vh; bottom: auto; transform: translateY(-50%); background: rgba(0, 0, 0, .45); }
    .kv-ficha .kvf-vdest__t { padding-bottom: 28px; }
}