:root { --purple: #251069; --purple-2: #39207f; --purple-3: #4d2fbb; --ink: #34363d; --muted: #70727a; --line: #dfe1e7; --pale: #f3f5f8; --mint: #cdeee7; --green: #25866f; --orange: #f04b2d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin-top: 0; } .page-width { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.top-shell { min-height: 286px; color: #fff; background: linear-gradient(105deg, #261068 0%, #1c0d58 100%); box-shadow: 0 3px 6px rgba(0,0,0,.28); }.top-bar { display: flex; height: 61px; align-items: center; justify-content: space-between; }.brand { display: inline-flex; align-items: center; }.brand-logo { display: block; width: 148px; height: 32px; }.top-actions { display: flex; align-items: center; gap: 18px; }.top-actions a { color: #f6f4ff; font-size: 12px; font-weight: 650; white-space: nowrap; }.top-actions a:hover, .nav-bar a:hover { opacity: .8; }.top-actions .round-user { display: grid; width: 23px; height: 23px; place-items: center; color: #796d9f; border-radius: 50%; background: #d1ccdc; font-size: 12px; }.top-actions .menu-icon { font-size: 24px; }.top-actions .cart { display: inline-flex; align-items: center; gap: 6px; }.cart-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.top-actions .cart span { font-size: 12px; }
.nav-bar { display: flex; height: 53px; align-items: center; gap: 20px; overflow: hidden; }.nav-bar a { display: inline-flex; align-items: center; gap: 6px; color: #e6e2fb; font-size: 13px; font-weight: 700; white-space: nowrap; }.nav-bar a span { color: #c4beed; font-size: 16px; }.nav-bar .nav-pill { min-height: 36px; padding: 0 17px; border: 1px solid #8277b8; border-radius: 20px; }.nav-bar .sofia span { color: #fff; }.nav-bar .active { min-height: 36px; padding: 0 15px; color: #5135cd; border-radius: 22px; background: #fff; }.nav-bar .active span { color: #7250df; }.nav-bar .more { margin-left: auto; }
.search-area { padding-top: 4px; }.search-area h1 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.3px; }.search-row { --search-gap: 11px; --trip-column: 225px; --dates-column: 305px; --guest-column: 55px; --button-column: 125px; position: relative; display: grid; grid-template-columns: var(--trip-column) minmax(0, 1fr) minmax(0, 1fr) var(--dates-column) var(--guest-column) var(--button-column); gap: var(--search-gap); align-items: center; }.trip-type, .place-field, .date-field, .passengers { height: 55px; color: #55555b; border-radius: 7px; background: #fff; }.trip-type { display: flex; padding: 0 16px; align-items: center; justify-content: space-between; color: #f4f1ff; border: 1px solid #a095c8; background: rgba(96,75,157,.65); font-size: 14px; font-weight: 650; }.place-field { display: flex; min-width: 0; padding: 7px 14px; align-items: center; gap: 12px; }.place-field i { color: #4f4f56; font-size: 19px; font-style: normal; }.place-field span { display: grid; gap: 2px; min-width: 0; }.place-field small { color: #777983; font-size: 11px; }.place-field b { overflow: hidden; color: #5d5e64; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.destination b { color: #909098; }.destination i { color: #5d5e64; }.swap { position: absolute; z-index: 2; top: 10px; left: calc(var(--trip-column) + var(--search-gap) + ((100% - var(--trip-column) - var(--dates-column) - var(--guest-column) - var(--button-column) - 55px) / 2) - 17px); display: grid; width: 34px; height: 34px; margin: 0; place-items: center; color: #2d2d35; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 20px; }.date-field { display: flex; padding: 0 13px; align-items: center; justify-content: space-between; }.date-field span { display: flex; align-items: center; gap: 8px; color: #565861; font-size: 18px; }.date-field small { font-size: 13px; font-weight: 650; }.date-field em { width: 1px; height: 33px; background: #a0a0a3; }.passengers { display: flex; justify-content: center; align-items: center; gap: 6px; color: #45464e; font-size: 20px; }.passengers b { font-size: 14px; }.search-btn { display: grid; height: 48px; place-items: center; color: #fff; border-radius: 25px; background: var(--orange); box-shadow: 0 2px 4px rgba(49,13,47,.3); font-size: 14px; font-weight: 750; }.search-subrow { display: grid; margin-top: 11px; grid-template-columns: 1fr 305px 160px; align-items: center; }.add-stay { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 13px; }.add-stay strong { font-size: 13px; }.add-stay b { padding: 5px 8px; color: #196351; border-radius: 4px; background: #c8ebd8; font-size: 11px; }.toggle { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 12px; font-weight: 650; }.toggle i { width: 28px; height: 17px; border-radius: 20px; background: #e6e8e8; }.toggle i::after { content: ""; display: block; width: 13px; height: 13px; margin: 2px; border-radius: 50%; background: #fff; }.sofia-toggle { justify-self: end; }
.main-content { padding-top: 14px; }.promo-banner { position: relative; display: block; height: 340px; overflow: visible; border-radius: 11px; background: #f34e3c; }.promo-banner > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 11px; }.promo-copy { position: absolute; top: 36px; left: 55px; display: grid; color: #fff; line-height: .93; }.promo-copy strong { color: #92e9de; font-size: 30px; }.promo-copy > span { color: #8be2d8; font-size: 27px; }.promo-copy small { margin-top: 18px; font-size: 13px; }.promo-copy > b { display: flex; align-items: center; gap: 9px; font-size: 35px; letter-spacing: -.8px; }.promo-copy > b i { font-size: 12px; font-style: normal; line-height: 1.05; letter-spacing: 0; }.promo-copy em { display: block; width: 205px; margin-top: 20px; padding: 11px 20px; color: #33343a; border-radius: 20px; background: #fff; font-size: 13px; font-style: normal; font-weight: 800; line-height: .95; text-align: center; }.promo-app { position: absolute; top: 42px; right: 47px; display: flex; align-items: flex-start; gap: 10px; color: #fa553e; font-size: 43px; }.promo-app b { font-size: 22px; line-height: .9; }.banner-arrow { position: absolute; top: 50%; display: grid; width: 32px; height: 32px; place-items: center; color: #777b85; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.17); font-size: 30px; font-style: normal; line-height: 1; }.banner-arrow.left { left: -17px; }.banner-arrow.right { right: -17px; }.banner-dots { position: absolute; bottom: 69px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }.banner-dots > * { width: 6px; height: 6px; border-radius: 50%; background: #c6c6d3; }.banner-dots b { background: #5b49e0; }
.benefit-strip { position: relative; z-index: 3; display: grid; min-height: 99px; margin: -51px 20px 0; grid-template-columns: repeat(3, 1fr); gap: 19px; }.benefit-strip a { display: flex; padding: 16px 21px; align-items: center; gap: 17px; border: 1px solid #d9dce3; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(35,35,35,.03); }.benefit-icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; color: #27106c; font-size: 34px; }.benefit-strip p { display: grid; margin: 0; gap: 5px; }.benefit-strip b { color: #404149; font-size: 14px; }.benefit-strip small { color: #5d5e65; font-size: 12px; font-weight: 600; line-height: 1.2; }
.deal-section { margin-top: 36px; }.deal-section h2, .app-promo h2 { margin-bottom: 26px; color: #33353d; font-size: 29px; letter-spacing: -.55px; }.deal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.flight-card, .lodging-card { overflow: hidden; border: 1px solid #d8dbe2; border-radius: 21px; background: #fff; box-shadow: 0 1px 1px rgba(22,23,33,.02); }.flight-card { min-height: 236px; }.airline { display: flex; height: 50px; padding: 0 16px; align-items: center; gap: 5px; border-bottom: 1px solid #dfe2e8; color: #52545a; font-size: 12px; font-weight: 600; }.airline > b { margin-left: auto; padding: 5px 7px; color: #fff; border-radius: 4px; background: #35353a; font-size: 10px; }.airline i { font-size: 10px; }.klm { color: #5ab4e1; font-size: 22px; font-weight: 900; line-height: 1; }.air-canada { color: #f05243; font-size: 18px; font-weight: 800; }.ana { color: #6085a3; font-size: 10px; font-style: italic; font-weight: 800; }.flight-card h3 { height: 51px; margin: 0; padding: 16px; border-bottom: 1px solid #dfe2e8; color: #41434a; font-size: 14px; }.routes { display: grid; padding: 14px 15px 12px; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 1px solid #dfe2e8; color: #666971; font-size: 10px; font-weight: 750; }.routes span { white-space: nowrap; }.routes small { display: block; margin-top: 4px; color: #5b5d66; font-size: 10px; font-weight: 600; }.price { display: grid; padding: 13px 16px; gap: 4px; }.price small, .lodging-price small { color: #73767f; font-size: 11px; }.price b { color: #44464e; font-size: 18px; }
.carousel-section { margin-top: 46px; }.carousel-wrap { position: relative; }.circle-arrow { position: absolute; z-index: 3; top: 50%; display: grid; width: 32px; height: 32px; place-items: center; color: #888b91; border: 1px solid #e3e5e9; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); font-size: 26px; transform: translateY(-50%); }.circle-arrow.previous { left: -17px; }.circle-arrow.next { right: -17px; }.lodging-card { position: relative; min-height: 317px; border-radius: 19px; }.lodging-card > img { display: block; width: 100%; height: 148px; object-fit: cover; }.lodging-card.palace img { object-position: center; }.lodging-card.biltmore img { object-position: center 45%; }.lodging-card.relax img { object-position: center 58%; }.lodging-card.tokyo img { object-position: right center; }.reserve-label { position: absolute; top: 131px; left: 14px; padding: 4px 6px; color: #3d7068; border-radius: 3px; background: #c8ebe5; font-size: 10px; font-weight: 700; }.lodging-name { min-height: 76px; padding: 17px 16px 7px; border-bottom: 1px solid #dfe2e8; }.lodging-name h3 { margin: 0 0 4px; overflow: hidden; color: #404249; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.lodging-name p { margin: 0; color: #32343b; font-size: 13px; font-weight: 700; }.lodging-name p b, .lodging-name h3 > b { display: inline-block; padding: 3px 4px; color: #fff; border-radius: 3px; background: #2e917c; font-size: 10px; }.lodging-price { position: relative; display: grid; padding: 15px 16px 10px; gap: 4px; }.lodging-price > b { color: #3e4149; font-size: 17px; }.lodging-price del { color: #8a8c94; font-size: 11px; text-decoration-thickness: 1px; }.lodging-price > em:not(.saving) { position: absolute; right: 0; bottom: 28px; display: flex; overflow: hidden; border-radius: 13px 0 0 13px; font-style: normal; }.lodging-price em i, .lodging-price em strong { padding: 7px 9px; color: #fff; background: #ff7881; font-size: 11px; }.lodging-price em strong { background: #318d7e; }.lodging-price > p { margin: 4px 0 0; color: #666971; font-size: 10px; font-weight: 700; }.slider-dots { display: flex; margin-top: 13px; justify-content: center; gap: 5px; }.slider-dots > * { width: 5px; height: 5px; border-radius: 5px; background: #d9dce4; }.slider-dots b { width: 15px; background: #5034d0; }
.package-grid .lodging-card { min-height: 308px; }.package-card > img { height: 144px; }.package-card.cartagena img { object-position: center 57%; }.package-card.panama img { object-position: 74% center; }.package-card.mary img { object-position: 40% center; }.package-card.punta img { object-position: 61% center; }.black-label { position: absolute; left: 15px; padding: 5px 6px; color: #fff; border-radius: 3px; background: #343438; font-size: 10px; font-weight: 750; }.black-label.top { top: 14px; }.black-label.nights { top: 132px; }.package-card .lodging-name { min-height: 79px; padding-top: 14px; }.package-card .lodging-name p { overflow: hidden; color: #6d6f77; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.package-card .lodging-price { padding-top: 10px; }.saving { display: inline-block; justify-self: start; margin-bottom: 1px; padding: 4px; color: #367e70; border-radius: 3px; background: #cfede7; font-size: 10px; font-style: normal; font-weight: 750; }
.agent-row { display: grid; margin-top: 45px; grid-template-columns: 1fr 1fr; gap: 22px; }.agent-card, .sofia-card { display: flex; min-height: 177px; padding: 20px 32px; align-items: center; overflow: hidden; border-radius: 17px; background: #f0f2f4; }.agent-figure { position: relative; display: grid; width: 114px; height: 110px; flex: none; place-items: center; color: #323741; border-radius: 50% 50% 30% 30%; background: #dcd8ee; font-size: 70px; }.agent-figure i { position: absolute; top: 0; right: -6px; display: grid; width: 27px; height: 27px; place-items: center; color: #fff; border-radius: 50%; background: #5f3fc9; font-size: 16px; font-style: normal; }.agent-card p, .sofia-card p { display: grid; margin: 0 0 0 27px; gap: 7px; }.agent-card p > b, .sofia-card p > b { color: #45464b; font-size: 18px; }.agent-card p small, .sofia-card p small { color: #656870; font-size: 12px; line-height: 1.3; }.agent-card p em { justify-self: start; margin-top: 5px; padding: 8px 14px; color: #4d4e54; border: 1px solid #4f5158; border-radius: 19px; font-size: 11px; font-style: normal; font-weight: 700; }.sofia-card { color: #fff; background: linear-gradient(110deg, #2c146e, #6233dc); }.sofia-figure { display: grid; width: 125px; height: 116px; flex: none; place-items: center; color: #ffe2cf; border-radius: 10px 70px 25px 50px; background: #8161ea; font-size: 75px; }.sofia-card p > b, .sofia-card p small { color: #fff; }.sofia-card p em { justify-self: start; margin-top: 4px; padding: 9px 15px; color: #5e39d1; border-radius: 20px; background: #fff; font-size: 12px; font-style: normal; font-weight: 750; }
.app-promo { margin: 43px 0 35px; }.app-promo h2 { margin-bottom: 21px; font-size: 21px; }.app-promo > a { position: relative; display: flex; min-height: 128px; padding: 13px 145px; align-items: center; overflow: hidden; }.price-bubble { width: 91px; height: 91px; padding-top: 14px; flex: none; color: #fff; border: 3px solid #3e277f; border-radius: 50%; background: #ec6049; box-shadow: inset 0 0 0 4px #f6cc4d; font-size: 12px; font-weight: 700; line-height: .85; text-align: center; transform: rotate(-13deg); }.price-bubble b { font-size: 20px; }.app-promo p { display: grid; margin: 0 0 0 29px; gap: 10px; }.app-promo p b { color: #42434a; font-size: 24px; }.app-promo p small { color: #73757e; font-size: 12px; }.qr { position: absolute; right: 140px; display: grid; width: 79px; height: 79px; place-items: center; color: #111; border: 5px double #111; font-size: 48px; }.orange-shape { position: absolute; right: 0; width: 150px; height: 80px; background: #e85c4b; clip-path: polygon(24% 0,100% 0,100% 72%,51% 72%,34% 100%,0 100%); }
.newsletter { min-height: 204px; padding: 35px 20px; background: #f0f2f4; }.newsletter-inner { display: flex; width: min(650px, 100%); margin: auto; align-items: center; gap: 28px; }.mail-icon { position: relative; display: grid; width: 61px; height: 46px; flex: none; place-items: center; color: #37186d; border: 3px solid #37186d; font-size: 35px; line-height: 1; }.mail-icon i { position: absolute; top: -12px; right: -15px; display: grid; width: 25px; height: 25px; place-items: center; color: #fff; border-radius: 50%; background: #9b72c9; font-size: 14px; font-style: normal; }.newsletter h2 { margin: 0 0 8px; color: #404147; font-size: 18px; }.subscription { display: flex; gap: 15px; }.email-input { width: 308px; padding: 9px 12px; color: #9698a2; border: 1px solid #777a83; border-radius: 7px; background: #fff; font-size: 12px; font-style: italic; }.subscribe-btn { padding: 9px 15px; color: #5736d4; border: 1.5px solid #7453f1; border-radius: 20px; background: #fff; font-size: 12px; font-weight: 750; }.newsletter p { margin: 14px 0 0; color: #777a83; font-size: 10px; }.newsletter p a { color: #4f30c8; font-weight: 700; }
.footer { min-height: 590px; padding: 40px 0 25px; background: #f0f2f4; }.footer-content { border-top: 1px solid #e0e3e7; }.socials { display: flex; height: 82px; justify-content: center; align-items: center; gap: 23px; }.socials a { color: #787b80; font-size: 19px; }.footer-links { display: grid; padding-top: 22px; grid-template-columns: 1fr 1fr 1.15fr 1fr; gap: 48px; border-top: 1px solid #e2e4e7; }.footer-links div { display: grid; align-content: start; gap: 10px; }.footer-links h3 { margin: 0 0 2px; color: #4c4f55; font-size: 13px; }.footer-links a { color: #5d6066; font-size: 12px; font-weight: 600; line-height: 1.13; }.footer-links .country-label { margin-top: 14px; font-size: 11px; }.country-select { display: flex; min-height: 38px; padding: 0 10px; align-items: center; justify-content: space-between; border: 1px solid #9699a1; border-radius: 6px; background: #fff; }.certifications { display: flex; padding: 55px 0 42px; justify-content: center; gap: 195px; }.certifications span { display: grid; width: 72px; height: 49px; place-items: center; color: #176f97; border-top: 8px solid #87a9bb; border-bottom: 8px solid #87a9bb; font-size: 17px; font-weight: 900; }.certifications span:last-child { color: #2d5e9f; border-color: #6b8ab4; }.legal { display: grid; padding-top: 25px; grid-template-columns: 1.15fr 1fr; column-gap: 55px; border-top: 1px solid #e0e3e7; color: #777a80; font-size: 10px; line-height: 1.36; }.legal p { margin: 0 0 8px; }.legal p:last-child { grid-row: span 2; }
@media (max-width: 1300px) { .top-actions { gap: 12px; }.nav-bar { gap: 14px; }.nav-bar a { font-size: 12px; }.search-row { --trip-column: 205px; --dates-column: 260px; --guest-column: 50px; --button-column: 110px; }.benefit-strip { margin-inline: 16px; }.promo-copy { left: 42px; }.promo-app { right: 32px; }.app-promo > a { padding-inline: 90px; }.qr { right: 90px; } }
@media (max-width: 900px) { .top-shell { min-height: 257px; }.top-actions a:not(.menu-icon):not(.round-user) { display: none; }.nav-bar { overflow-x: auto; }.nav-bar .more { display: none; }.search-row { grid-template-columns: 1.3fr 1.5fr 1.5fr 1.5fr 48px 102px; }.swap { display: none; }.search-subrow { grid-template-columns: 1fr 1.5fr 80px; }.add-stay b { display: none; }.benefit-strip { grid-template-columns: 1fr; margin: 14px 0 0; gap: 9px; }.deal-section { margin-top: 33px; }.deal-grid { grid-template-columns: repeat(2, 1fr); }.lodging-grid .lodging-card:nth-child(n+3) { display: none; }.agent-row { grid-template-columns: 1fr; }.footer-links { grid-template-columns: 1fr 1fr; }.legal { grid-template-columns: 1fr; } }
@media (max-width: 620px) { body { font-size: 12px; }.page-width { width: min(100% - 28px, 520px); }.top-bar { height: 50px; }.brand-logo { width: 120px; height: auto; }.nav-bar { height: 45px; gap: 12px; }.nav-bar a { font-size: 11px; }.search-area { padding-top: 3px; }.search-area h1 { margin-bottom: 8px; font-size: 17px; }.search-row { grid-template-columns: 1fr 1fr; gap: 8px; }.place-field, .date-field { height: 47px; }.trip-type { height: 47px; }.swap { display: none; }.date-field { grid-column: 1 / -1; }.passengers { display: none; }.search-btn { height: 47px; }.search-subrow { margin-top: 9px; grid-template-columns: 1fr auto; }.toggle { display: none; }.sofia-toggle { display: flex; }.top-shell { min-height: 284px; }.promo-banner { height: 220px; }.promo-copy { top: 22px; left: 21px; }.promo-copy strong { font-size: 20px; }.promo-copy > span { font-size: 18px; }.promo-copy small { margin-top: 11px; }.promo-copy > b { font-size: 24px; }.promo-copy em { width: 142px; margin-top: 12px; padding: 7px; font-size: 9px; }.promo-app { top: 22px; right: 15px; font-size: 29px; }.promo-app b { font-size: 15px; }.banner-dots { bottom: 17px; }.benefit-strip { min-height: 0; }.benefit-strip a { padding: 12px; }.deal-section h2, .app-promo h2 { margin-bottom: 17px; font-size: 23px; }.deal-grid { gap: 10px; }.flight-card { min-height: 220px; }.flight-grid { grid-template-columns: 1fr; }.flight-grid .flight-card:nth-child(n+3) { display: none; }.lodging-card { min-height: 290px; }.lodging-card > img { height: 126px; }.lodging-grid { grid-template-columns: 1fr; }.lodging-grid .lodging-card:nth-child(n+2) { display: none; }.agent-card, .sofia-card { min-height: 150px; padding: 15px; }.agent-figure, .sofia-figure { width: 78px; height: 80px; font-size: 48px; }.agent-card p, .sofia-card p { margin-left: 16px; }.agent-card p > b, .sofia-card p > b { font-size: 15px; }.agent-card p small, .sofia-card p small { font-size: 10px; }.app-promo > a { min-height: 105px; padding: 8px; }.app-promo p { margin-left: 14px; }.app-promo p b { font-size: 15px; }.app-promo p small { font-size: 9px; }.price-bubble { width: 70px; height: 70px; font-size: 9px; }.price-bubble b { font-size: 15px; }.qr, .orange-shape { display: none; }.newsletter-inner { gap: 15px; }.mail-icon { width: 48px; height: 37px; font-size: 28px; }.subscription { display: grid; gap: 7px; }.email-input { width: 100%; }.subscribe-btn { justify-self: start; }.footer-links { grid-template-columns: 1fr; gap: 24px; }.certifications { gap: 50px; }.legal { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }