/* ============================================================
   vivango — design system extraído dos artefatos (site/artefatos)
   Fonte base: Jost (mesma do vivango-sistema) + Caveat (acentos)
   ============================================================ */

:root {
    --font-primary: "Jost", sans-serif;
    --font-script: "Caveat", cursive;

    /* Tema (primária/secundária) — padrão dos artefatos; a API pode
       sobrescrever via <style> inline no layout (endpoint de tema) */
    --primary: #04B6B0;
    --secondary: #FC9D1B;

    --navy: #020E43;
    --dark: #051036;
    --ink: #193657;
    --gray: #606060;
    --gray-light: #9AA3B2;

    /* tons derivados do tema */
    --teal: var(--primary);
    --teal-dark: color-mix(in srgb, var(--primary) 78%, #3A4A52);
    --aqua: color-mix(in srgb, var(--primary) 50%, #C5FFF6);
    --primary-soft: color-mix(in srgb, var(--primary) 12%, #FFFFFF);
    --primary-deep: color-mix(in srgb, var(--primary) 55%, #013330);
    --orange: var(--secondary);
    --secondary-light: color-mix(in srgb, var(--secondary) 55%, #FFFFFF);

    /* base escura do hero: acompanha a primária do cliente, escurecida
       para garantir contraste do texto branco sobre a foto */
    --hero-dark: color-mix(in srgb, var(--primary) 55%, #071228);

    --bg: #F9FAFB;
    --white: #FFFFFF;
    --border: #E6E9F0;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 8px 30px rgba(2, 14, 67, 0.08);
    --shadow-soft: 0 4px 16px rgba(2, 14, 67, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------------- Scrollbar discreta na cor do cliente ----------------
   Fina, trilho invisível, polegar na primária com transparência (quase
   escondida; ganha presença no hover). A rolagem não muda. */

html {
    scrollbar-width: thin;                                            /* Firefox */
    scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent;
}

::-webkit-scrollbar { width: 7px; height: 7px; }                      /* Chrome/Edge/Safari */
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary) 60%, transparent);
}

::-webkit-scrollbar-corner { background: transparent; }

/* Transições suaves entre telas (View Transitions API + fallback):
   crossfade puro, sem movimento — leve para o usuário */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-fade-out .35s ease-in-out both; }
::view-transition-new(root) { animation: page-fade-in .45s ease-in-out both; }

@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }

body { animation: page-enter .5s ease-out both; }
body.is-leaving { opacity: 0; transition: opacity .3s ease-in-out; }

@keyframes page-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body, ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

body {
    font-family: var(--font-primary);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

.teal { color: var(--teal); font-weight: 600; }

.script {
    font-family: var(--font-script);
    font-weight: 600;
    color: var(--teal);
    font-size: 1.15em;
    position: relative;
}

.script--lg { font-size: 1.4em; }

/* ---------------- Botões ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    transition: filter .15s ease, transform .15s ease;
}

.btn:hover { filter: brightness(1.05); }

.btn--orange {
    background: linear-gradient(90deg, var(--secondary-light) 0%, var(--secondary) 100%);
    color: var(--white);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--secondary) 35%, transparent);
}

.btn--teal {
    background: var(--teal-dark);
    color: var(--white);
    border-radius: 10px;
}

.btn--outline {
    border: 1px solid var(--teal);
    color: var(--teal);
    border-radius: 10px;
    background: var(--white);
}

.btn--sm { padding: 9px 18px; font-size: 13.5px; }
.btn--xs { padding: 6px 12px; font-size: 12px; }
.btn--block { width: 100%; }
.btn__arrow { font-size: 17px; }

/* ---------------- Hero + Header ---------------- */

.hero {
    position: relative;
    color: var(--white);
    overflow: hidden;
    background: var(--hero-dark);
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: url('/img/hero-cairu.png') center 30% / cover no-repeat;
}

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* fade na tonalidade da marca do cliente (deriva de --primary via --hero-dark) */
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--hero-dark) 92%, transparent) 0%,
            color-mix(in srgb, var(--hero-dark) 55%, transparent) 45%,
            color-mix(in srgb, var(--hero-dark) 15%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--hero-dark) 55%, transparent) 0%,
            color-mix(in srgb, var(--hero-dark) 5%, transparent) 100%);
}

.header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 64px;
    padding-top: 30px;
    padding-bottom: 10px;
}

.header__logo img { height: 34px; width: auto; }

.header__nav {
    display: flex;
    gap: 44px;
    margin: 0 auto;
    font-weight: 500;
    font-size: 16px;
}

.header__nav a { opacity: .95; }
.header__nav a:hover { opacity: 1; text-shadow: 0 0 12px rgba(255,255,255,.4); }

.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 30px;
    padding-bottom: 120px;
}

.hero--compact .hero__content {
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 100px;
}

.hero__lettering img { width: 440px; max-width: 90vw; height: auto; }
.hero--compact .hero__lettering img { width: 320px; }

/* Fallback tipográfico quando o cliente não tem arte de lettering (spec 0003) */
.hero__title {
    font-size: 58px;
    font-weight: 700;
    line-height: 1.05;
    max-width: 480px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero--compact .hero__title { font-size: 42px; text-align: center; }

.hero__subtitle {
    margin-top: 16px;
    letter-spacing: 10px;
    font-size: 14px;
    font-weight: 500;
}

.hero--compact .hero__subtitle { text-align: center; }

.hero__card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 30px;
    width: 360px;
    flex-shrink: 0;
}

.hero__card h3 { font-size: 21px; margin-bottom: 12px; line-height: 1.3; }
.hero__card p { font-size: 14px; line-height: 1.55; opacity: .9; margin-bottom: 20px; }
.hero__card .btn { width: 100%; margin-bottom: 20px; }

.hero__checklist { list-style: none; font-size: 13.5px; display: grid; gap: 10px; }
.hero__checklist li::before { content: '✓  '; color: var(--aqua); font-weight: 700; }

.hero__wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%;
    height: 90px;
    z-index: 2;
}

/* ---------------- Seções da home ---------------- */

.page { padding-bottom: 90px; }

.section { padding-top: 56px; }

.section__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--navy);
}

.section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.section .section__title { margin-bottom: 0; }
.section > .section__title { margin-bottom: 32px; }

.carousel-nav { display: flex; gap: 10px; }

.carousel-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--teal-dark);
    color: var(--white);
    font-size: 20px;
    display: grid;
    place-items: center;
    transition: filter .15s;
}

.carousel-btn:hover { filter: brightness(1.1); }

/* Destinos */

.dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72px;
    margin-bottom: 48px;
    position: relative;
}

.dest-card {
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.dest-card__overlay {
    padding: 22px;
    color: var(--white);
    width: 100%;
    background: linear-gradient(180deg, rgba(2,14,67,0) 0%, rgba(2,14,67,.82) 85%);
}

.dest-card__overlay h3 { font-size: 20px; margin-bottom: 8px; }
.dest-card__overlay p { font-size: 13px; line-height: 1.5; opacity: .92; }

/* Faixa de features */

.features {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 26px 30px;
}

.feature { display: flex; gap: 14px; align-items: flex-start; }

.feature__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 19px;
    flex-shrink: 0;
}

.feature__icon--blue { background: #E3ECFF; }
.feature__icon--orange { background: #FFE9CC; }
.feature__icon--pink { background: #FFDFEA; }
.feature__icon--purple { background: #E8DEFF; }

.feature strong { display: block; color: var(--navy); font-size: 14.5px; margin-bottom: 4px; }
.feature p { font-size: 12.5px; color: var(--gray); line-height: 1.45; }

/* Cards de experiência / hotel (home) */

.card-row {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.card-row::-webkit-scrollbar { display: none; }

.exp-card, .hotel-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    min-width: 260px;
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
}

.hotel-card { min-width: 300px; width: 300px; }

.exp-card__media, .hotel-card__media { position: relative; height: 160px; }
.hotel-card__media { height: 180px; }

.exp-card__media img, .hotel-card__media img { width: 100%; height: 100%; object-fit: cover; }

.exp-card__local, .hotel-card__local {
    position: absolute;
    left: 12px; bottom: 12px;
    background: rgba(2, 14, 67, 0.75);
    color: var(--white);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
}

.hotel-card__local { left: auto; right: 12px; }

.exp-card__body, .hotel-card__body { padding: 16px; }

.exp-card__body h3, .hotel-card__body h3 {
    font-size: 15.5px;
    color: var(--navy);
    margin-bottom: 14px;
    line-height: 1.35;
    min-height: 42px;
}

.exp-card__foot, .hotel-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.exp-card__duration { font-size: 12.5px; color: var(--gray); }

.exp-card__price, .hotel-card__price { text-align: right; display: grid; }
.hotel-card__price { text-align: left; }

.exp-card__price small, .hotel-card__price small { font-size: 11px; color: var(--gray); }
.exp-card__price strong, .hotel-card__price strong { font-size: 18px; color: var(--navy); }

.hotel-card__rating { font-size: 14px; color: var(--navy); font-weight: 600; }

/* Seção vídeo */

.video-section {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
    padding-top: 80px;
}

.video-section__media { position: relative; cursor: pointer; }

.video-section__text p { color: var(--gray); font-size: 15px; line-height: 1.65; margin-top: 18px; }

/* Barra CTA final */

.cta-bar {
    margin-top: 90px;
    background: var(--navy);
    border-radius: 22px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 48px;
    color: var(--white);
    box-shadow: var(--shadow);
}

.cta-bar__title { display: grid; }
.cta-bar__title strong { font-size: 18px; }
.cta-bar__title .script { font-size: 24px; color: var(--aqua); }

.cta-bar__stats { display: flex; gap: 36px; margin-left: auto; font-size: 15px; }

/* ---------------- Layout do pacote ---------------- */

.pkg-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
    align-items: start;
    padding-top: 44px;
}

.pkg-main { min-width: 0; }

/* Passo */

.step { margin-bottom: 56px; }

.step__head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 26px;
}

.step__head-nav { margin-left: auto; }

.step__number {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.step__head h2 { color: var(--navy); font-size: 27px; margin-bottom: 6px; }
.step__head p { color: var(--gray); font-size: 14.5px; line-height: 1.5; }

/* Barra pessoas e período */

.period-bar {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px 8px;
}

.period-bar__field {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 0 26px;
}

.period-bar__field + .period-bar__field { border-left: 1px solid var(--border); }

.period-bar__icon { font-size: 20px; color: var(--gray); }

.period-bar__field label { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.period-bar__field strong { color: var(--teal); font-size: 14px; font-weight: 600; }

/* Transfer */

.transfer-meta {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 26px 0 20px;
}

.transfer-meta__date { display: flex; gap: 12px; align-items: center; }
.transfer-meta__date label { font-size: 13.5px; font-weight: 600; display: block; }
.transfer-meta__date strong { font-size: 13.5px; color: var(--gray); font-weight: 400; }

.transfer-meta__flight {
    border: 1px solid var(--teal);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--ink);
}

.transfer-meta .carousel-nav { margin-left: auto; }

.transfer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.transfer-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 2px solid transparent;
    box-shadow: var(--shadow-soft);
    padding: 22px;
    cursor: pointer;
}

.transfer-card.is-selected { border-color: var(--teal); }

.transfer-card img { height: 150px; object-fit: contain; margin: 0 auto 18px; }

.transfer-card h3 { color: var(--navy); font-size: 17px; margin-bottom: 10px; }

.transfer-card__times { font-size: 13.5px; color: var(--ink); margin-bottom: 8px; }
.transfer-card__route { font-size: 13px; color: var(--gray); margin-bottom: 16px; }

.transfer-card__foot { display: flex; align-items: flex-end; justify-content: space-between; }

.transfer-card__price strong { display: block; color: var(--teal); font-size: 21px; }
.transfer-card__price small { color: var(--gray); font-size: 12px; }

/* Filtros (chips) */

.filter-chips { display: flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }

.chip {
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13.5px;
    color: var(--ink);
    transition: all .15s;
}

.chip:hover { border-color: var(--teal); }
.chip.is-active { border-color: var(--teal); color: var(--teal); font-weight: 600; }

/* Cards de hospedagem (passo 3) */

.hotel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.hotel-row {
    background: var(--white);
    border-radius: var(--radius);
    border: 2px solid transparent;
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: 200px 1fr;
    overflow: hidden;
    cursor: pointer;
}

.hotel-row.is-selected { border-color: var(--teal); }

.hotel-row__media { position: relative; }
.hotel-row__media img { width: 100%; height: 100%; object-fit: cover; }

.hotel-row__local {
    position: absolute;
    left: 10px; top: 10px;
    background: var(--teal);
    color: var(--white);
    font-size: 10.5px;
    padding: 4px 10px;
    border-radius: 999px;
}

.hotel-row__check {
    position: absolute;
    left: 10px; bottom: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 13px;
}

.hotel-row__body { padding: 16px 18px; }

.hotel-row__title { display: flex; justify-content: space-between; align-items: flex-start; }
.hotel-row__title h3 { color: var(--navy); font-size: 15.5px; }
.hotel-row__fav { font-size: 17px; color: var(--gray-light); }

.hotel-row__rating { font-size: 12.5px; margin: 6px 0 10px; color: var(--ink); }
.hotel-row__rating small { color: var(--gray); }

.hotel-row__tags { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

.tag {
    background: var(--primary-soft);
    color: var(--teal-dark);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
}

.hotel-row__amenities {
    display: flex;
    gap: 14px;
    font-size: 10.5px;
    color: var(--gray);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.hotel-row__distance { font-size: 11.5px; color: var(--gray); margin-bottom: 14px; }

.hotel-row__foot { display: flex; align-items: flex-end; justify-content: space-between; }

.hotel-row__price small { display: block; font-size: 11px; color: var(--gray); }
.hotel-row__price strong { font-size: 17px; color: var(--navy); }

/* ---------------- Builder de experiências (passo 4) ---------------- */

.pkg-layout--wide { grid-template-columns: 1fr 280px; }

.exp-builder {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 22px;
    align-items: start;
}

.exp-filters {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 20px;
}

.exp-filters h3 { color: var(--navy); font-size: 16px; margin-bottom: 14px; }

.exp-filters__search {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 16px;
}

.exp-filters__search input { border: none; outline: none; width: 100%; font-size: 13px; }

.exp-filters__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin: 14px 0 8px;
}

.exp-filters__select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--gray);
    display: flex;
    justify-content: space-between;
}

.exp-filters__turnos { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-filters__turnos .chip { padding: 7px 12px; font-size: 12px; }

.exp-filters__range { font-size: 11.5px; color: var(--gray); display: flex; justify-content: space-between; flex-wrap: wrap; }

.exp-filters__slider {
    flex-basis: 100%;
    height: 4px;
    border-radius: 4px;
    background: var(--teal);
    margin-top: 10px;
    position: relative;
}

.exp-filters__slider i {
    position: absolute;
    right: 0; top: 50%;
    transform: translate(0, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--teal);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 1px var(--teal);
}

.exp-available { margin-top: 20px; display: grid; gap: 14px; }

/* Card mini de experiência */

.exp-mini {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    gap: 12px;
    cursor: grab;
}

.exp-mini__media { position: relative; width: 86px; flex-shrink: 0; }
.exp-mini__media img { width: 86px; height: 100px; object-fit: cover; border-radius: 10px; }

.badge {
    position: absolute;
    left: 5px; top: 5px;
    font-size: 8.5px;
    font-weight: 600;
    color: var(--white);
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Cores por key do contrato (badge.key) — fallback teal para keys novas do BO */
.badge { background: var(--teal-dark); }
.badge--imperdivel { background: #7EC820; }
.badge--mais-procurado { background: #14A4D8; }
.badge--romantico { background: #E23C6D; }
.badge--aventura { background: #FC7A1B; }
.badge--cultural { background: #6823FA; }
.badge--natureza { background: #2E9E5B; }

.exp-mini__body { min-width: 0; flex: 1; }
.exp-mini__body h4 { font-size: 12.5px; color: var(--navy); line-height: 1.3; margin-bottom: 6px; }

.exp-mini__body ul { list-style: none; display: grid; gap: 3px; }
.exp-mini__body li { font-size: 10.5px; color: var(--gray); }

.exp-mini__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0;
}

.exp-mini__price { text-align: right; }
.exp-mini__price small { display: block; font-size: 9.5px; color: var(--gray); }
.exp-mini__price strong { font-size: 13.5px; color: var(--navy); }

.exp-mini--board { flex-direction: column; }
.exp-mini--board .exp-mini__media { width: 100%; }
.exp-mini--board .exp-mini__media img { width: 100%; height: 90px; }
.exp-mini--board .exp-mini__price { text-align: left; margin-top: 8px; }

/* Board do roteiro */

.itinerary-board {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 20px;
}

.itinerary-board__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.itinerary-board__head h3 { color: var(--navy); font-size: 17px; }

.pill {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
}

.pill--teal { background: var(--primary-soft); color: var(--teal-dark); }
.pill--soft { background: #EDF1F7; color: var(--ink); }

.itinerary-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.itinerary-col {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 12px;
    align-content: start;
}

.itinerary-col__head { font-size: 12.5px; color: var(--navy); }
.itinerary-col__head small { color: var(--gray); }
.itinerary-col__summary { display: block; font-size: 10.5px; color: var(--gray); margin-top: 3px; }

.itinerary-notice {
    background: #F2F5F9;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    font-size: 11px;
    align-items: flex-start;
}

.itinerary-notice strong { display: block; color: var(--ink); font-size: 11.5px; }
.itinerary-notice small { display: block; color: var(--gray); font-size: 10px; margin-top: 2px; }

.itinerary-drop {
    border: 1.5px dashed var(--teal);
    border-radius: 10px;
    color: var(--teal);
    font-size: 11px;
    text-align: center;
    padding: 14px 8px;
}

/* Estados vazios e filtros indisponíveis (spec UI/UX 0002) */

.empty-state {
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 36px 24px;
    text-align: center;
    color: var(--gray);
}

.empty-state p { color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.empty-state small { font-size: 12.5px; }

.exp-filters__select.is-disabled { opacity: .5; cursor: not-allowed; }

select.exp-filters__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23606060' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
    color: var(--ink);
}

.exp-filters form { display: grid; }
.empty-state a { color: var(--teal); font-weight: 600; }
.exp-filters__label--soon small { color: var(--gray-light); font-weight: 400; font-size: 10.5px; }

/* ---------------- Resumo do pacote ---------------- */

.step__head--plain h2 { font-size: 30px; }

.summary-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 24px;
    margin-bottom: 40px;
}

.summary-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.summary-card__head h3 { color: var(--navy); font-size: 18px; }
.summary-card__head .btn { margin-left: auto; }

.summary-day {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}

.summary-day__label { font-size: 12px; display: grid; gap: 4px; justify-items: start; }
.summary-day__label strong { color: var(--navy); font-size: 14.5px; }
.summary-day__label small { color: var(--gray); line-height: 1.4; }

.summary-day__icon {
    width: 34px; height: 34px;
    background: var(--primary-soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.summary-day__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 20px;
    gap: 14px;
    align-items: start;
}

.summary-item { display: flex; gap: 10px; font-size: 11px; }

.summary-item img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.summary-item__icon {
    width: 64px; height: 64px;
    border-radius: 10px;
    background: #EDF1F7;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}

.summary-item strong { display: block; color: var(--navy); font-size: 12px; line-height: 1.35; margin-bottom: 3px; }
.summary-item small { display: block; color: var(--gray); font-size: 10.5px; line-height: 1.45; }

.summary-day__more { color: var(--gray-light); font-size: 16px; }

.summary-card__note {
    text-align: center;
    font-size: 11.5px;
    color: var(--gray);
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pkg-subtitle { color: var(--navy); font-size: 19px; margin-bottom: 16px; }

.summary-hotel {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;
    overflow: hidden;
    margin-bottom: 40px;
}

.summary-hotel > img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }

.summary-hotel__body { padding: 24px 24px 24px 0; }

.summary-hotel__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.summary-hotel__head h3 { color: var(--navy); font-size: 20px; }

.summary-hotel__rating { font-size: 13.5px; margin-bottom: 18px; }
.summary-hotel__rating small { color: var(--gray); }

.summary-hotel__meta { display: flex; gap: 22px; font-size: 13px; color: var(--ink); flex-wrap: wrap; }

.summary-transfers {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 24px;
    gap: 24px;
}

.summary-transfer { display: flex; gap: 16px; }
.summary-transfer + .summary-transfer { border-left: 1px solid var(--border); padding-left: 24px; }

.summary-transfer__icon {
    width: 84px; height: 84px;
    background: #EDF1F7;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 30px;
    flex-shrink: 0;
}

.summary-transfer > div { flex: 1; }
.summary-transfer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.summary-transfer strong { display: block; color: var(--navy); font-size: 15.5px; margin-bottom: 4px; }
.summary-transfer small { display: block; color: var(--gray); font-size: 12.5px; line-height: 1.6; }

/* ---------------- Sidebar do pacote ---------------- */

.pkg-sidebar {
    background: var(--white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 16px;
    position: sticky;
    top: 20px;
    font-size: 13px;
}

.pkg-sidebar__photo { border-radius: 12px; height: 120px; width: 100%; object-fit: cover; }

.pkg-sidebar__title { color: var(--navy); font-size: 18px; margin: 12px 0 6px; }

.pkg-sidebar__meta { display: flex; gap: 8px; color: var(--gray); font-size: 11.5px; margin-bottom: 14px; }

.pkg-sidebar__progress {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.pkg-sidebar__progress-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.pkg-sidebar__progress-label { color: var(--teal); font-weight: 600; font-size: 12px; }
.pkg-sidebar__progress-pct { color: var(--gray); font-size: 11px; }

.pkg-sidebar__bar { height: 5px; border-radius: 5px; background: #EDF1F7; overflow: hidden; }
.pkg-sidebar__bar i { display: block; height: 100%; background: var(--teal); border-radius: 5px; }

.pkg-sidebar__section { border-top: 1px solid var(--border); padding: 12px 0; }

.pkg-sidebar__section-head { display: flex; align-items: center; gap: 10px; }
.pkg-sidebar__section-head strong { color: var(--navy); font-size: 13px; flex: 1; }

.pkg-sidebar__icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
}

.pkg-sidebar__icon--teal { background: var(--primary-soft); }
.pkg-sidebar__icon--purple { background: #EDE7FF; }
.pkg-sidebar__icon--blue { background: #E3ECFF; }

.pkg-sidebar__chevron { color: var(--teal); font-size: 14px; }

.pkg-sidebar__price-teal { color: var(--teal); font-weight: 700; font-size: 13px; }

.pkg-sidebar__timeline { margin: 10px 0 0 14px; border-left: 1.5px solid var(--teal); display: grid; gap: 12px; padding-left: 16px; }

.pkg-sidebar__leg { display: flex; justify-content: space-between; gap: 8px; position: relative; }

.pkg-sidebar__leg::before {
    content: '';
    position: absolute;
    left: -21px; top: 4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

.pkg-sidebar__leg-info { display: grid; gap: 2px; }
.pkg-sidebar__leg-label { color: var(--teal); font-weight: 600; font-size: 11.5px; }
.pkg-sidebar__leg-title { color: var(--ink); font-size: 11.5px; }
.pkg-sidebar__leg-date { color: var(--gray); font-size: 10.5px; }

.pkg-sidebar__leg-price { text-align: right; flex-shrink: 0; }
.pkg-sidebar__leg-price strong { display: block; color: var(--navy); font-size: 12.5px; }
.pkg-sidebar__leg-price span { color: var(--gray); font-size: 10px; }

.pkg-sidebar__section-sub { margin: 8px 0 0 40px; color: var(--ink); font-size: 12px; line-height: 1.4; }
.pkg-sidebar__section-sub small { color: var(--gray); }
.pkg-sidebar__warn { color: #C77700; font-size: 11.5px; }

.pkg-sidebar__finance { border-top: 1px solid var(--border); padding: 12px 0; display: grid; gap: 10px; }
.pkg-sidebar__finance > strong { color: var(--navy); font-size: 13px; }

.pkg-sidebar__finance-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); }
.pkg-sidebar__finance-row strong { color: var(--navy); }
.pkg-sidebar__finance-row--teal strong { color: var(--teal); }

.pkg-sidebar__final { border-top: 1px solid var(--border); padding: 12px 0; }
.pkg-sidebar__final label { font-size: 12px; color: var(--ink); font-weight: 600; display: block; margin-bottom: 8px; }

.pkg-sidebar__input {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--teal);
    border-radius: 10px;
    overflow: hidden;
}

.pkg-sidebar__input span { padding: 10px 12px; background: #F2F5F9; color: var(--ink); font-weight: 600; font-size: 13px; }
.pkg-sidebar__input input { border: none; outline: none; padding: 10px 12px; width: 100%; font-size: 14px; }

.pkg-sidebar__secure { text-align: center; color: var(--gray); font-size: 11px; margin-top: 12px; }

/* ---------------- ConciergeIA ---------------- */

.concierge-fab {
    position: fixed;
    right: 28px; bottom: 28px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--aqua) 100%);
    color: var(--white);
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 45%, transparent);
    transition: transform .15s;
}

.concierge-fab:hover { transform: translateY(-2px); }
.concierge-fab__icon { font-size: 18px; }

.concierge[hidden], .modal[hidden], .concierge-fab[hidden] { display: none; }

.concierge {
    position: fixed;
    right: 28px; bottom: 28px;
    z-index: 70;
    width: 400px;
    max-width: calc(100vw - 40px);
    max-height: 640px;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(2, 14, 67, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px) scale(.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.concierge.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.concierge__header {
    background: linear-gradient(90deg, var(--primary-deep) 0%, var(--teal) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    font-size: 16px;
}

.concierge__avatar {
    width: 36px; height: 36px;
    background: var(--aqua);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.concierge__close { margin-left: auto; color: var(--white); font-size: 16px; }

.concierge__body {
    padding: 18px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    align-content: start;
    flex: 1;
    min-height: 320px;
}

.concierge__banner {
    background: var(--primary-deep);
    color: var(--white);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14.5px;
    justify-self: start;
}

.concierge__msg {
    background: #F2F5F9;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--ink);
    justify-self: start;
    max-width: 85%;
}

.concierge__msg--user {
    background: var(--primary-soft);
    justify-self: end;
}

.concierge__chips { display: flex; gap: 8px; flex-wrap: wrap; }

.concierge__chips .chip.is-active {
    background: var(--primary-deep);
    color: var(--white);
    border-color: var(--primary-deep);
}

.concierge-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    max-width: 92%;
}

.concierge-card img { height: 120px; width: 100%; object-fit: cover; }

.concierge-card__body { padding: 12px 14px; }
.concierge-card__body h4 { color: var(--navy); font-size: 14px; margin-bottom: 6px; }

.concierge-card__match {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

.concierge-card__body small { display: block; color: var(--gray); font-size: 11.5px; margin-bottom: 3px; }
.concierge-card__body small strong { color: var(--teal); font-size: 13px; }

.concierge-card__actions { display: flex; gap: 8px; margin-top: 10px; }

.concierge__footer {
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    padding: 12px 14px;
}

.concierge__footer input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    outline: none;
}

.concierge__send {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--primary-deep);
    color: var(--white);
    font-size: 15px;
}

/* ---------------- Modal finalizar ---------------- */

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }

.modal__backdrop { position: absolute; inset: 0; background: rgba(2, 14, 67, 0.55); }

.modal__dialog {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    width: 720px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 40px;
    text-align: center;
}

.modal__close { position: absolute; right: 22px; top: 20px; font-size: 18px; color: var(--ink); }

.modal__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--primary-soft);
    display: inline-grid;
    place-items: center;
    font-size: 26px;
    margin-bottom: 16px;
}

.modal__dialog h2 { color: var(--navy); font-size: 25px; margin-bottom: 8px; }
.modal__sub { color: var(--gray); font-size: 14px; margin-bottom: 26px; }

.modal__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

.option-card {
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 24px 20px;
    cursor: pointer;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.option-card.is-selected { border-color: var(--teal); }

.option-card__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--primary-soft);
    display: grid;
    place-items: center;
    font-size: 22px;
}

.option-card strong { color: var(--navy); font-size: 16px; display: flex; gap: 8px; align-items: center; }
.option-card p { color: var(--gray); font-size: 12.5px; line-height: 1.5; }

.option-card input { accent-color: var(--teal); width: 17px; height: 17px; margin-top: 6px; }

.modal__period {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    text-align: left;
    margin-bottom: 24px;
}

.modal__period > strong { color: var(--navy); font-size: 14.5px; }
.modal__period > p { color: var(--gray); font-size: 12.5px; margin: 4px 0 16px; }

.modal__dates { display: flex; gap: 16px; align-items: flex-end; }
.modal__dates label { font-size: 12px; color: var(--gray); display: block; margin-bottom: 6px; }
.modal__dates > div { flex: 1; }

.modal__date {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
}

.modal__arrow { padding-bottom: 12px; color: var(--gray); }

.modal__info {
    margin-top: 16px;
    background: var(--primary-soft);
    color: var(--teal-dark);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12.5px;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.modal__cancel { color: var(--teal); font-weight: 600; font-size: 14.5px; }

/* ---------------- Debug bar (dev/local, DEBUG_HTTP=true) ---------------- */

.debug-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: #0B1020;
    color: #C8D2E0;
    font-family: Consolas, monospace;
    font-size: 11.5px;
    border-top: 2px solid var(--teal);
    opacity: .95;
}

.debug-bar summary { padding: 6px 14px; cursor: pointer; list-style: none; }
.debug-bar summary strong { color: var(--aqua); }
.debug-bar table { width: 100%; border-collapse: collapse; }
.debug-bar th, .debug-bar td { text-align: left; padding: 4px 14px; border-top: 1px solid #232B45; }
.debug-bar__empty { padding: 6px 14px 10px; }

.debug-bar__chevron {
    color: var(--aqua);
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    transition: transform .15s ease;
    display: inline-block;
}

.debug-bar__chevron[aria-expanded="true"] { transform: rotate(90deg); }

.debug-bar__body pre {
    max-height: 320px;
    overflow: auto;
    background: #060A16;
    border-left: 3px solid var(--teal);
    padding: 10px 14px;
    margin: 0 14px 8px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #9FE8D8;
}

/* ---------------- Responsivo ---------------- */

@media (max-width: 1100px) {
    .pkg-layout, .pkg-layout--wide { grid-template-columns: 1fr; }
    .pkg-sidebar { position: static; }
    .exp-builder { grid-template-columns: 1fr; }
    .dest-grid { gap: 28px; }
}

@media (max-width: 820px) {
    .hero__content { flex-direction: column; align-items: flex-start; }
    .header__nav { display: none; }
    .dest-grid, .features, .transfer-grid, .hotel-grid,
    .itinerary-cols, .modal__options, .summary-transfers { grid-template-columns: 1fr; }
    .summary-day, .summary-hotel { grid-template-columns: 1fr; }
    .summary-day__items { grid-template-columns: 1fr; }
    .video-section { grid-template-columns: 1fr; }
    .cta-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
    .cta-bar__stats { margin-left: 0; }
    .period-bar { grid-template-columns: 1fr; gap: 16px; }
    .period-bar__field + .period-bar__field { border-left: none; }
}