/* ========================================================================== El checkout como página propia. Sin menú de destinos, sin buscador, sin circuitos relacionados: en el paso de pagar cada enlace de salida es una venta menos. Lo único que se queda es lo que da confianza y el recordatorio de qué se está comprando. ========================================================================== */ /* La tipografía del checkout va en SUS bloques, no en el . Puesta en el body pisaba la del sitio (Montserrat 14 px) y se colaba en la cabecera: con Open Sans 15 px los teléfonos ya no cabían en los 162 px de `.phone-container` y se partían en dos líneas. El menú y el pie tienen que quedarse exactamente como en el resto de la web. */ .kvc { margin: 0; background: var(--kv-g50, #f7f6f4); } .kvc-seguridad, .kvc-viaje, .kvc-main, .kvc-pie { color: var(--kv-g900, #1c1c1c); font-family: var(--kv-sans, "Open Sans", system-ui, sans-serif); font-size: 15px; line-height: 1.55; } .kvc * { box-sizing: border-box; } /* ── cabecera ─────────────────────────────────────────────────────────── */ .kvc-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; background: #fff; border-bottom: 1px solid var(--kv-g200, #e6e3df); } .kvc-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--kv-g900, #1c1c1c); font-size: 19px; } .kvc-logo img { height: 34px; width: auto; } .kvc-logo b { color: var(--kv-naranja, #ff7300); font-weight: 700; } .kvc-cab__d { display: flex; align-items: center; gap: 16px; } /* El candado no es decoración: en un checkout es de lo poco que sostiene la confianza de quien va a meter una tarjeta. */ .kvc-seguro { font-size: 13px; font-weight: 600; color: var(--kv-verde, #0a7a35); white-space: nowrap; } .kvc-seguro::before { content: "🔒 "; } .kvc-tel { font-weight: 700; color: var(--kv-azul, #1d83a7); text-decoration: none; white-space: nowrap; } /* ── qué estás comprando ──────────────────────────────────────────────── */ .kvc-viaje { background: #fff; border-bottom: 1px solid var(--kv-g200, #e6e3df); } .kvc-viaje__in { max-width: 1180px; margin: 0 auto; padding: 14px 22px; display: flex; gap: 16px; align-items: center; } .kvc-viaje__img { width: 92px; height: 66px; object-fit: cover; border-radius: var(--kv-rs, 6px); flex: 0 0 auto; } .kvc-viaje__t { min-width: 0; } .kvc-viaje__t h1 { margin: 2px 0 3px; font-size: 19px; line-height: 1.25; font-weight: 700; } .kvc-viaje__t p { margin: 0; font-size: 13px; color: var(--kv-g600, #6b6b6b); } .kvc-volver { font-size: 13px; color: var(--kv-azul, #1d83a7); text-decoration: none; font-weight: 600; } .kvc-volver:hover { text-decoration: underline; } /* ── el proceso ───────────────────────────────────────────────────────── */ .kvc-main { max-width: 1180px; margin: 0 auto; padding: 22px 0 40px; } /* ── pie ──────────────────────────────────────────────────────────────── */ .kvc-pie { padding: 22px; text-align: center; font-size: 13px; color: var(--kv-g600, #6b6b6b); border-top: 1px solid var(--kv-g200, #e6e3df); background: #fff; } .kvc-pie p { margin: 0 0 5px; } .kvc-pie a { color: var(--kv-g700, #444); } /* La nota de pago seguro va bajo el proceso y alineada con el, no suelta al borde. */ .kvc-pie__n { max-width: 1180px; margin: 0 auto 26px; padding: 0 22px; text-align: center; font-size: 12px; color: var(--kv-g500, #8a8a8a); } /* ── teléfono ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .kvc-cab { padding: 10px 14px; } .kvc-logo { font-size: 17px; } .kvc-logo img { height: 28px; } .kvc-seguro { font-size: 12px; } .kvc-viaje__in { padding: 12px 14px; gap: 12px; } .kvc-viaje__img { width: 66px; height: 50px; } .kvc-viaje__t h1 { font-size: 16px; } .kvc-main { padding: 14px 0 30px; } /* El wizard trae su propio ancho pensado para ir dentro de la ficha; aquí manda la página y tiene que caber en la pantalla sin arrastrar de lado. */ .kvc .kw-wrap { padding: 0 14px; max-width: 100%; } .kvc .kw-wrap > * { min-width: 0; max-width: 100%; } } /* ── banda de reserva segura ────────────────────────────────────────────── Va bajo el menu del sitio y alineada con el contenido, no pegada al borde. */ .kvc-seguridad { background: #fff; border-bottom: 1px solid var(--kv-g200, #e6e3df); } .kvc-seguridad__in { max-width: 1180px; margin: 0 auto; padding: 7px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } @media (max-width: 900px) { .kvc-seguridad__in { padding: 7px 14px; } .kvc-seguridad .kvc-seguro { font-size: 11.5px; } } /* ── hueco para la cabecera fija de movil ───────────────────────────────── En movil el sitio pinta una barra `navbar-fixed-top` de 46 px. Sin dejarle el hueco, se come la banda de «Reserva segura» y el titulo del viaje. */ .kvc--barra-fija { padding-top: 46px; } /* ── WhatsApp: en la cabecera, no flotando ──────────────────────────────── Las dos reglas viven aqui y en kv-ficha-v5.css porque son las dos paginas del proceso de compra. En el resto del sitio el boton flotante sigue igual. */ .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; } /* Fuera el flotante en el checkout: se sentaba encima de las tarjetas de fecha. */ @media (max-width: 900px) { body.kvc .wa-container, body.kvc .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; }