/* GoGoTrip. Identidade própria — nada aqui vem do César. Tudo por token: o tema escuro é uma segunda
   paleta escolhida, não um filtro por cima da clara. Contrastes conferidos para WCAG AA: texto 4.5:1,
   borda de controle e ícone 3:1. */

@layer tokens, base, components;

@layer tokens {
    :root {
        --canvas: #fbf7f1;
        --surface: #ffffff;
        --surface-sunken: #f4eee5;
        --ink: #1b1d28;
        --ink-muted: #5a5e70;
        --line: #e6dfd3;
        --line-control: #83879b;
        --accent: #c73a12;
        --accent-hover: #a82f0c;
        --accent-soft: #fde9e1;
        --accent-ink: #a82f0c;
        --on-accent: #ffffff;
        --brand: #e2471a;
        --on-brand: #ffffff;
        --good-bg: #e2f3e8;
        --good-ink: #14532d;
        --warn-bg: #fdf1cf;
        --warn-ink: #6b4a05;
        --danger: #b3261e;
        --danger-bg: #fcebe9;
        --focus: #1f4fd8;
        --shadow-1: 0 1px 2px rgb(27 29 40 / 6%), 0 4px 14px rgb(27 29 40 / 5%);
        --shadow-2: 0 2px 4px rgb(27 29 40 / 6%), 0 18px 48px rgb(27 29 40 / 11%);
        --radius-s: 10px;
        --radius-m: 16px;
        --radius-l: 26px;
        --text-xs: 0.8125rem;
        --text-s: 0.9375rem;
        --text-m: 1rem;
        --text-l: 1.1875rem;
        --text-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
        --text-hero: clamp(2.125rem, 1.2rem + 4.4vw, 3.75rem);
        --gutter: clamp(16px, 4vw, 40px);
        --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color-scheme: light;
    }

    /* O escuro entra por dois caminhos: o sistema (enquanto o visitante não escolheu o claro) e a
       escolha explícita, que vence o sistema nas duas direções. Os valores são os mesmos nos dois
       blocos — CSS não tem como compartilhá-los sem pré-processador; mexeu num, mexa no outro. */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --canvas: #12141c;
            --surface: #1b1e2a;
            --surface-sunken: #151823;
            --ink: #f2efe9;
            --ink-muted: #a9adbf;
            --line: #2b2f40;
            --line-control: #787d94;
            --accent: #ff8458;
            --accent-hover: #ff9c78;
            --accent-soft: #3a2019;
            --accent-ink: #ff9c78;
            --on-accent: #1d0d06;
            --brand: #ff8458;
            --on-brand: #1d0d06;
            --good-bg: #163324;
            --good-ink: #9fe3b8;
            --warn-bg: #3a2e0f;
            --warn-ink: #f5d98a;
            --danger: #ff8a80;
            --danger-bg: #3b1a18;
            --focus: #8fb0ff;
            --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
            --shadow-2: 0 18px 48px rgb(0 0 0 / 50%);
            color-scheme: dark;
        }
    }

    :root[data-theme="dark"] {
        --canvas: #12141c;
        --surface: #1b1e2a;
        --surface-sunken: #151823;
        --ink: #f2efe9;
        --ink-muted: #a9adbf;
        --line: #2b2f40;
        --line-control: #787d94;
        --accent: #ff8458;
        --accent-hover: #ff9c78;
        --accent-soft: #3a2019;
        --accent-ink: #ff9c78;
        --on-accent: #1d0d06;
        --brand: #ff8458;
        --on-brand: #1d0d06;
        --good-bg: #163324;
        --good-ink: #9fe3b8;
        --warn-bg: #3a2e0f;
        --warn-ink: #f5d98a;
        --danger: #ff8a80;
        --danger-bg: #3b1a18;
        --focus: #8fb0ff;
        --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
        --shadow-2: 0 18px 48px rgb(0 0 0 / 50%);
        color-scheme: dark;
    }
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: 88px;
        /* Rede de segurança na raiz: nenhuma página deste site pretende rolar na horizontal — só o que tem o
           próprio `overflow-x: auto` (tabela do backoffice, dia do mapa) pode, e isso continua funcionando porque
           é um scroller aninhado, independente deste. */
        overflow-x: hidden;
    }

    body {
        min-block-size: 100dvh;
        margin: 0;
        display: flex;
        flex-direction: column;
        color: var(--ink);
        background: var(--canvas);
        font: var(--text-m) / 1.55 var(--font);
        -webkit-font-smoothing: antialiased;
    }

    main { flex: 1; outline: none; }
    h1, h2, h3, p, ol, ul, fieldset { margin: 0; padding: 0; }
    ol, ul { list-style: none; }
    fieldset { min-inline-size: 0; border: 0; }
    legend { padding: 0; }
    img { max-inline-size: 100%; display: block; }
    button, input, textarea, select { font: inherit; color: inherit; }
    a { color: var(--accent-ink); }
    [hidden] { display: none !important; }

    :focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 2px;
        border-radius: 6px;
    }

    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .skip-link {
        position: absolute;
        inset-block-start: 8px;
        inset-inline-start: 8px;
        z-index: 20;
        padding: 10px 16px;
        border-radius: var(--radius-s);
        color: var(--on-accent);
        background: var(--accent);
        font-weight: 650;
        text-decoration: none;
        transform: translateY(-200%);
    }

    .skip-link:focus { transform: none; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer components {
    /* ---------- casca ---------- */
    .site-header {
        position: sticky;
        inset-block-start: 0;
        z-index: 10;
        border-block-end: 1px solid var(--line);
        background: color-mix(in srgb, var(--canvas) 88%, transparent);
        backdrop-filter: blur(12px);
    }

    .site-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        max-inline-size: 1120px;
        margin-inline: auto;
        padding: 12px var(--gutter);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--ink);
        font-size: var(--text-l);
        font-weight: 800;
        letter-spacing: -0.035em;
        text-decoration: none;
    }

    .brand-mark { flex: none; }
    /* O "qualquer lugar" é uma escolha, não um campo por preencher: tem a cor de escolha feita. */
    .sentence-input { max-inline-size: 100%; }
    /* O botão ganhou um rótulo mais longo ("Me surpreenda: montar roteiro"): em tela estreita ele quebra em
       duas linhas em vez de alargar o formulário — e a coluna do formulário nunca passa da tela. */
    .planner { grid-template-columns: minmax(0, 1fr); }
    .planner-submit .button { max-inline-size: 100%; white-space: normal; text-align: center; }
    #destination::placeholder { color: var(--accent-ink); opacity: 1; font-weight: 650; }
    .sentence-hint-open { margin-block-start: 8px; }
    .sentence-hint { max-inline-size: 60ch; color: var(--ink-muted); font-size: var(--text-s); }
    .brand-name-accent { color: var(--accent-ink); }

    /* O logo é um alvo de toque: 44 px de altura, mesmo com o desenho menor. */
    .brand { min-block-size: 44px; }

    /* As abas do site (Roteiro, Promoções…). No computador ficam ao lado da marca; no celular descem para uma linha própria,
       de ponta a ponta — marca + tema + idioma já ocupam os 320 px, e aba espremida ninguém acerta com o dedo. */
    .site-tabs { display: flex; gap: 4px; margin-inline-end: auto; }
    .site-tab { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink-muted); font-size: var(--text-s); font-weight: 650; text-decoration: none; }
    .site-tab:hover { color: var(--ink); background: var(--surface-sunken); }
    .site-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .site-tab[aria-current="page"] { color: var(--accent-ink, var(--ink)); background: var(--accent-soft, var(--surface-sunken)); }
    @media (max-width: 640px) {
        .site-header-inner { flex-wrap: wrap; }
        .site-tabs { order: 3; flex: 1 0 100%; margin: 0; padding-block-start: 4px; border-block-start: 1px solid var(--line); }
        .site-tab { flex: 1 1 0; justify-content: center; border-radius: var(--radius-s); }
    }

    .site-header-tools {
        display: flex;
        align-items: center;
        gap: 10px;
        min-inline-size: 0;
    }

    .theme-toggle {
        display: grid;
        flex: none;
        place-items: center;
        inline-size: 42px;
        block-size: 42px;
        border: 1px solid var(--line-control);
        border-radius: 50%;
        color: var(--ink);
        background: var(--surface);
        cursor: pointer;
        transition: border-color 120ms ease, transform 200ms ease;
    }

    .theme-toggle:hover { border-color: var(--ink); }
    .theme-toggle:active { transform: rotate(18deg); }

    /* O ícone mostra o DESTINO: lua no claro (vai escurecer), sol no escuro (vai clarear). A regra
       repete a lógica dos tokens — sistema enquanto não há escolha, escolha quando há. */
    .theme-icon-sun { display: none; }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
        :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
    }

    :root[data-theme="dark"] .theme-icon-moon { display: none; }
    :root[data-theme="dark"] .theme-icon-sun { display: block; }

    /* O seletor de idioma: dois links, o atual marcado por aria-current — e não só pela cor: ele
       ganha o fundo e o peso, e o leitor de tela o anuncia como "atual". */
    .languages {
        display: inline-flex;
        padding: 3px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        background: var(--surface);
    }

    .language {
        display: grid;
        place-items: center;
        min-inline-size: 40px;
        min-block-size: 34px;
        padding: 0 10px;
        border-radius: 999px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 650;
        letter-spacing: 0.04em;
        text-decoration: none;
    }

    .language:hover { color: var(--ink); }

    .language[aria-current="true"] {
        color: var(--on-accent);
        background: var(--accent);
    }

    /* Mais de dois idiomas: o seletor é um menu. O botão mostra a língua atual; a lista, o nome de cada uma por extenso. */
    .language-menu { position: relative; }
    .language-current {
        display: inline-flex; align-items: center; gap: 6px; min-block-size: 42px; padding: 0 12px;
        border: 1px solid var(--line-control); border-radius: 999px; background: var(--surface); color: var(--ink);
        font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.04em; cursor: pointer; list-style: none; user-select: none;
    }
    .language-current::-webkit-details-marker { display: none; }
    .language-current:hover { border-color: var(--accent); }
    .language-current:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .language-chevron { color: var(--ink-muted); transition: transform .15s; }
    .language-menu[open] .language-chevron { transform: rotate(180deg); }
    .language-menu[open] .language-current { border-color: var(--accent); }
    .language-list {
        position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 30;
        display: grid; min-inline-size: 184px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-m);
        background: var(--surface); box-shadow: 0 12px 32px rgb(0 0 0 / .16);
    }
    .language-option {
        display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 0 12px; border-radius: var(--radius-s);
        color: var(--ink); font-size: var(--text-s); font-weight: 500; text-decoration: none;
    }
    .language-option:hover { background: var(--surface-sunken); }
    .language-option:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
    .language-option[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
    .language-code { inline-size: 2.2ch; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--ink-muted); }
    .language-option[aria-current="true"] .language-code { color: inherit; }
    @media (prefers-reduced-motion: reduce) { .language-chevron { transition: none; } }

    /* Celular: o cabeçalho só aperta os espaços. Logo, tema e os dois idiomas cabem a 320 px. */
    @media (max-width: 560px) {
        .site-header-inner { gap: 8px; padding-inline: 12px; }
        .site-header-tools { gap: 6px; }
        .brand { gap: 8px; font-size: 1.0625rem; }
    }

    .site-footer {
        inline-size: 100%;
        max-inline-size: 1120px;
        margin-inline: auto;
        padding: 40px var(--gutter) 32px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .site-footer p { max-inline-size: 72ch; }
    .site-footer-small { margin-block-start: 12px; }

    .toast {
        position: fixed;
        inset-block-end: max(20px, env(safe-area-inset-bottom));
        inset-inline: 16px;
        z-index: 30;
        inline-size: fit-content;
        max-inline-size: min(520px, calc(100vw - 32px));
        margin-inline: auto;
        padding: 12px 18px;
        border-radius: var(--radius-m);
        color: var(--canvas);
        background: var(--ink);
        box-shadow: var(--shadow-2);
        font-size: var(--text-s);
        animation: rise 180ms ease-out;
    }

    .toast[data-tone="error"] {
        color: #ffffff;
        background: #9b1c14;
    }

    /* ---------- botões ---------- */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-block-size: 44px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: var(--text-s);
        font-weight: 650;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
    }

    .button:disabled { opacity: 0.55; cursor: default; }
    .button:active:not(:disabled) { transform: translateY(1px); }

    .button-primary { color: var(--on-accent); background: var(--accent); }
    .button-primary:hover:not(:disabled) { background: var(--accent-hover); }

    .button-quiet {
        border-color: var(--line-control);
        color: var(--ink);
        background: var(--surface);
    }

    .button-quiet:hover:not(:disabled) { border-color: var(--ink); }
    .button-danger { border-color: var(--danger); color: var(--danger); }
    .button-danger:hover:not(:disabled) { background: var(--danger-bg); }
    .button-small { min-block-size: 38px; padding: 0 16px; }
    .button-large { min-block-size: 56px; padding: 0 30px; font-size: var(--text-m); }

    .button-link {
        min-block-size: 32px;
        padding: 0;
        border-radius: 6px;
        color: var(--accent-ink);
        background: none;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .button-link-danger { color: var(--danger); }
    .button-icon { transition: transform 160ms ease; }
    .button:hover .button-icon { transform: translateX(3px); }

    .button.is-busy .button-icon {
        animation: spin 900ms linear infinite;
        transform-origin: center;
    }

    /* ---------- a dobra de cima ---------- */
    .hero {
        display: grid;
        gap: clamp(24px, 4vw, 40px);
        max-inline-size: 1120px;
        margin-inline: auto;
        padding: clamp(28px, 5vw, 64px) var(--gutter) 24px;
    }

    .hero-copy { max-inline-size: 760px; }

    .hero-title {
        font-size: var(--text-hero);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.035em;
        text-wrap: balance;
    }

    .hero-title-accent { color: var(--accent-ink); }

    .hero-lede {
        max-inline-size: 58ch;
        margin-block-start: 16px;
        color: var(--ink-muted);
        font-size: var(--text-l);
        text-wrap: pretty;
    }

    /* ---------- o formulário ---------- */
    .planner {
        display: grid;
        gap: 22px;
        padding: clamp(18px, 3vw, 32px);
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
        background: var(--surface);
        box-shadow: var(--shadow-2);
    }

    /* A frase: o básico da viagem lido como uma frase, e não como uma pilha de caixas. Os campos são
       controles nativos de verdade — só o desenho é de texto sublinhado. */
    .sentence {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px 12px;
        font-size: clamp(1.375rem, 1rem + 1.9vw, 2.125rem);
        font-weight: 650;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .sentence-tail {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px 12px;
    }

    .sentence-word { color: var(--ink-muted); font-weight: 500; }
    .sentence-end { align-self: flex-end; margin-inline-start: 2px; }
    .sentence-slot { display: inline-flex; align-items: baseline; max-inline-size: 100%; }

    .sentence-input,
    .sentence-select {
        max-inline-size: 100%;
        min-block-size: 48px;
        padding: 0 4px;
        border: 0;
        border-block-end: 3px solid var(--accent);
        border-radius: 6px 6px 0 0;
        color: var(--ink);
        background: transparent;
        font: inherit;
        transition: background 120ms ease, border-color 120ms ease;
    }

    .sentence-input::placeholder { color: var(--ink-muted); opacity: 0.75; font-weight: 500; }

    .sentence-input:hover,
    .sentence-select:hover,
    .sentence-input:focus-visible,
    .sentence-select:focus-visible { background: var(--accent-soft); }

    .sentence-input:focus-visible,
    .sentence-select:focus-visible { outline-offset: 3px; }

    .sentence-select { padding-inline-end: 2px; cursor: pointer; }
    /* Um seletor não quebra linha: a opção mais comprida (em alemão, sobretudo) passava da tela no celular. O teto é a
       largura da TELA, não a do pai — dentro da frase o pai é texto corrido e não tem largura definida. */
    .sentence-select { max-inline-size: calc(100vw - 48px); text-overflow: ellipsis; }

    /* O campo do tamanho do que está escrito nele — é o que faz a frase parecer frase. Onde o
       navegador ainda não sabe fazer isso, o seletor fica da largura da opção mais longa e o script
       ajusta o `size` dos campos de texto: mais largo, nunca quebrado. */
    @supports (field-sizing: content) {
        .sentence-select,
        .sentence-input[type="text"] { field-sizing: content; min-inline-size: 5ch; }
    }

    /* A lista do seletor abre com o fundo do sistema; sem isto o texto herdado some no tema escuro. */
    .sentence-select option { color: var(--ink); background: var(--surface); font-size: 1rem; font-weight: 400; }

    .sentence-date { font-size: 0.8em; }
    .has-error .sentence-input,
    .has-error .sentence-select { border-block-end-color: var(--danger); background: var(--danger-bg); }

    .sentence-errors { display: grid; gap: 4px; }
    .sentence-errors:not(:has(.field-error:not([hidden]))) { display: none; }
    .sentence-switch { justify-self: start; }

    /* "O resto já está preenchido": cada opcional é um cartão — ícone, o que é, e o valor atual. */
    .assume {
        display: grid;
        gap: 14px;
        padding-block-start: 18px;
        border-block-start: 1px solid var(--line);
    }

    .assume-lede { color: var(--ink); font-size: var(--text-m); font-weight: 650; }
    .assume-lede-hint { color: var(--ink-muted); font-weight: 400; }

    /* "dense" é o que faz o editor abrir na linha logo abaixo do cartão: ele vem depois do cartão no
       DOM e ocupa a linha inteira; os cartões seguintes voltam para preencher a linha de cima. */
    .tiles {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: row dense;
    }

    .tile {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        min-block-size: 68px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        color: var(--ink);
        background: var(--surface-sunken);
        font: inherit;
        text-align: start;
        cursor: pointer;
        transition: border-color 120ms ease, background 120ms ease, box-shadow 160ms ease, transform 120ms ease;
    }

    .tile:hover {
        border-color: var(--line-control);
        background: var(--surface);
        box-shadow: var(--shadow-1);
    }

    .tile:active { transform: scale(0.985); }

    .tile-icon {
        flex: none;
        inline-size: 36px;
        block-size: 36px;
        padding: 7px;
        border-radius: 11px;
        color: var(--ink-muted);
        background: var(--surface);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: color 120ms ease, background 120ms ease;
    }

    .tile:hover .tile-icon { background: var(--surface-sunken); }

    .tile-text { display: grid; flex: 1; min-inline-size: 0; gap: 1px; }

    .tile-label {
        color: var(--ink-muted);
        font-size: var(--text-xs);
        line-height: 1.3;
    }

    .tile-value {
        overflow: hidden;
        font-size: var(--text-s);
        font-weight: 650;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* O que ainda não foi dito é convite, não afirmação: mais claro e sem peso. */
    .tile-value.is-placeholder { color: var(--ink-muted); font-weight: 400; }

    /* O que a pessoa mudou fica marcado: o ícone acende. Não é só cor — o valor escrito também mudou. */
    .tile.is-changed .tile-icon,
    .tile.is-open .tile-icon { color: var(--accent-ink); background: var(--accent-soft); }

    .tile.is-changed { border-color: var(--line-control); background: var(--surface); }

    .tile.is-open {
        border-color: var(--accent);
        background: var(--surface);
        box-shadow: 0 0 0 1px var(--accent);
    }

    /* Interruptor: a bolinha desliza; o estado também está escrito no valor do cartão. */
    .tile-knob {
        position: relative;
        flex: none;
        inline-size: 40px;
        block-size: 24px;
        border-radius: 999px;
        background: var(--line-control);
        transition: background 160ms ease;
    }

    .tile-knob::after {
        position: absolute;
        inset-block-start: 3px;
        inset-inline-start: 3px;
        inline-size: 18px;
        block-size: 18px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
        content: "";
        transition: transform 160ms ease;
    }

    .tile-switch[aria-checked="true"] .tile-knob { background: var(--accent); }
    .tile-switch[aria-checked="true"] .tile-knob::after { transform: translateX(16px); }
    .tile-switch[aria-checked="true"] .tile-icon { color: var(--accent-ink); background: var(--accent-soft); }

    /* O editor: a linha inteira, logo abaixo do cartão, com a setinha apontando para quem o abriu. */
    .tile-panel {
        position: relative;
        display: grid;
        grid-column: 1 / -1;
        gap: 16px;
        margin-block: 4px 2px;
        padding: 18px;
        border: 1px solid var(--accent);
        border-radius: var(--radius-m);
        background: var(--surface);
        box-shadow: var(--shadow-1);
        animation: rise 180ms ease-out;
    }

    .tile-panel::before {
        position: absolute;
        inset-block-start: -7px;
        inset-inline-start: calc(var(--notch, 40px) - 7px);
        inline-size: 12px;
        block-size: 12px;
        border: solid var(--accent);
        border-width: 1px 0 0 1px;
        background: var(--surface);
        content: "";
        transform: rotate(45deg);
    }

    .tile-panel-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px 16px;
        padding-block-start: 12px;
        border-block-start: 1px solid var(--line);
    }

    .quick { display: flex; flex-wrap: wrap; gap: 6px; }

    .quick-pick {
        min-block-size: 34px;
        padding: 0 12px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        color: var(--ink);
        background: var(--surface);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        cursor: pointer;
    }

    .quick-pick:hover { border-color: var(--ink); }

    @media (max-width: 900px) {
        .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Celular: meia largura não comporta ícone + rótulo + interruptor — o interruptor passava por cima
       do rótulo. Os cartões de sim/não ocupam a linha inteira (o "dense" puxa o próximo cartão para
       o lado do anterior), e o valor quebra em duas linhas em vez de cortar no meio. */
    @media (max-width: 560px) {
        .tile-switch { grid-column: 1 / -1; }
        .tile { gap: 10px; padding: 10px 12px; }
        .tile-icon { inline-size: 32px; block-size: 32px; padding: 6px; }

        .tile-value {
            display: -webkit-box;
            white-space: normal;
            overflow-wrap: anywhere;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }
    }

    .button-accent { border-color: var(--accent); color: var(--accent-ink); }

    /* "Ajustar", na tela do roteiro. */
    .adjust {
        padding: 20px;
        border: 1px solid var(--accent);
        border-radius: var(--radius-m);
        background: var(--surface);
        box-shadow: var(--shadow-1);
        animation: rise 180ms ease-out;
    }

    /* Com o painel aberto o resumo deixa de ser fixo: fixo, ele cobria o título do painel — e quem
       está ajustando quer ver o formulário, não o total antigo. */
    .adjust { scroll-margin-block-start: 88px; }

    .adjust-form { display: grid; gap: 18px; }
    .adjust-title { font-size: var(--text-l); letter-spacing: -0.01em; }
    .adjust-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

    .planner-row {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
        align-items: start;
    }

    .planner-row-three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
    .planner-group { display: grid; gap: 12px; }

    .field { display: grid; gap: 6px; min-inline-size: 0; }
    .field-narrow { max-inline-size: 260px; }

    .field-label {
        color: var(--ink);
        font-size: var(--text-s);
        font-weight: 650;
    }

    .field-label-sub { color: var(--ink-muted); font-weight: 600; }

    .field-optional {
        margin-inline-start: 4px;
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: 400;
    }

    .field-input {
        inline-size: 100%;
        min-block-size: 50px;
        padding: 0 14px;
        border: 1px solid var(--line-control);
        border-radius: var(--radius-s);
        background: var(--surface);
        /* 16px: abaixo disso o iOS dá zoom na página ao focar o campo. */
        font-size: 1rem;
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }

    .field-input::placeholder { color: var(--ink-muted); opacity: 0.85; }
    .field-input:hover:not(:disabled) { border-color: var(--ink); }
    .field-input:focus-visible { outline-offset: 0; border-color: var(--focus); }

    .field-input:disabled {
        border-style: dashed;
        background: var(--surface-sunken);
    }

    .field-textarea { padding-block: 12px; resize: vertical; line-height: 1.45; }
    .field-affix { position: relative; }
    .field-affix .field-input { padding-inline-start: 44px; }

    .field-affix-text {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 14px;
        display: grid;
        place-items: center;
        color: var(--ink-muted);
        font-weight: 600;
        pointer-events: none;
    }

    .field-hint { color: var(--ink-muted); font-size: var(--text-xs); }

    .field-error,
    .form-error {
        display: flex;
        gap: 6px;
        color: var(--danger);
        font-size: var(--text-s);
        font-weight: 600;
    }

    .field-error::before { content: "↑"; }
    .has-error .field-input,
    .has-error .stepper { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }

    .form-error {
        padding: 12px 16px;
        border: 1px solid var(--danger);
        border-radius: var(--radius-s);
        background: var(--danger-bg);
    }

    .check {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-block-size: 44px;
        font-size: var(--text-s);
        cursor: pointer;
    }

    .check-inline { min-block-size: 36px; color: var(--ink-muted); }

    .check input {
        inline-size: 20px;
        block-size: 20px;
        accent-color: var(--accent);
    }

    .segmented {
        display: inline-grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        justify-self: start;
        max-inline-size: 100%;
        padding: 4px;
        border-radius: 999px;
        background: var(--surface-sunken);
    }

    .segmented-option { position: relative; cursor: pointer; }
    .segmented-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

    .segmented-option span {
        display: grid;
        place-items: center;
        min-block-size: 40px;
        padding: 0 18px;
        border-radius: 999px;
        color: var(--ink-muted);
        font-size: var(--text-s);
        font-weight: 600;
        white-space: nowrap;
    }

    .segmented-option input:checked + span {
        color: var(--ink);
        background: var(--surface);
        box-shadow: var(--shadow-1);
    }

    .segmented-option input:focus-visible + span,
    .choice input:focus-visible + .choice-body,
    .chip input:focus-visible + span {
        outline: 3px solid var(--focus);
        outline-offset: 2px;
    }

    .stepper {
        display: grid;
        grid-template-columns: 50px 1fr 50px;
        min-block-size: 50px;
        border: 1px solid var(--line-control);
        border-radius: var(--radius-s);
        overflow: hidden;
        background: var(--surface);
    }

    .stepper-button {
        border: 0;
        background: var(--surface-sunken);
        font-size: 1.375rem;
        line-height: 1;
        cursor: pointer;
    }

    .stepper-button:hover { background: var(--accent-soft); }
    .stepper-button:focus-visible { outline-offset: -3px; }

    .stepper-value {
        inline-size: 100%;
        border: 0;
        background: none;
        font-size: var(--text-l);
        font-weight: 650;
        text-align: center;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .stepper-value::-webkit-outer-spin-button,
    .stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .stepper-value:focus-visible { outline-offset: -3px; }

    .choices {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    }

    .choice { position: relative; cursor: pointer; }
    .choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

    .choice-body {
        display: grid;
        gap: 2px;
        block-size: 100%;
        padding: 12px 14px;
        border: 1px solid var(--line-control);
        border-radius: var(--radius-s);
        background: var(--surface);
        transition: border-color 120ms ease, background 120ms ease;
    }

    .choice-body small { color: var(--ink-muted); font-size: var(--text-xs); }
    .choice:hover .choice-body { border-color: var(--ink); }

    .choice input:checked + .choice-body {
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: 0 0 0 1px var(--accent);
    }

    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip { position: relative; cursor: pointer; }
    .chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

    .chip span {
        display: inline-flex;
        align-items: center;
        min-block-size: 40px;
        padding: 0 16px;
        border: 1px solid var(--line-control);
        border-radius: 999px;
        background: var(--surface);
        font-size: var(--text-s);
    }

    .chip:hover span { border-color: var(--ink); }

    /* O marcado não depende só da cor: ganha o ✓ na frente. */
    .chip input:checked + span {
        border-color: var(--accent);
        background: var(--accent-soft);
        font-weight: 650;
    }

    .chip input:checked + span::before { content: "✓"; margin-inline-end: 6px; }

    .more {
        border-block-start: 1px solid var(--line);
        padding-block-start: 6px;
    }

    .more[open] { display: grid; gap: 20px; }

    .more-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        min-block-size: 44px;
        padding-block: 10px;
        font-weight: 650;
        cursor: pointer;
    }

    .more-summary-hint { color: var(--ink-muted); font-size: var(--text-s); font-weight: 400; }

    .planner-submit {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 20px;
    }

    .planner-submit-note { color: var(--ink-muted); font-size: var(--text-s); }
    .planner-discover { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 10px; }

    /* "Pra onde eu vou com R$ X?" — os destinos lado a lado. */
    .discover { max-inline-size: 1180px; margin-inline: auto; padding: 24px 16px 64px; }
    .discover-head { display: grid; gap: 4px; justify-items: start; }
    .discover-title { margin: 0; font-size: var(--text-2xl, 2rem); line-height: 1.15; overflow-wrap: anywhere; }
    .discover-meta { margin: 0; color: var(--ink-muted); font-size: var(--text-s); max-inline-size: 78ch; }
    .discover-status { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius-s); background: var(--surface-sunken); font-size: var(--text-s); }
    .discover-status.is-working::before { content: ""; display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: 8px; border-radius: 50%; background: var(--accent); animation: discover-pulse 1.2s ease-in-out infinite; }
    @keyframes discover-pulse { 50% { opacity: .25; } }
    .discover-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block: 14px; }
    .discover-tools:empty { display: none; }
    .discover-options { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
    .discover-option { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-muted); font: inherit; font-size: var(--text-s); cursor: pointer; }
    .discover-option.is-active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
    .discover-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
    .discover-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m, 16px); background: var(--surface); }
    .discover-card.is-over { opacity: .92; }
    /* Sem foto a capa é só a faixa do selo: um retângulo vazio de 16:9 empurrava o preço para fora da tela. */
    .discover-cover { position: relative; min-block-size: 44px; background: var(--accent-soft); }
    .discover-cover.has-image { aspect-ratio: 16 / 9; }
    .discover-card.is-loading .discover-cover { aspect-ratio: 16 / 9; }
    .discover-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
    .discover-cover .discover-chip { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; }
    .discover-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
    .discover-place { margin: 0; font-size: var(--text-l, 1.25rem); overflow-wrap: anywhere; }
    .discover-reason { margin: 0; color: var(--ink-muted); font-size: var(--text-s); }
    .discover-facts { display: flex; flex-wrap: wrap; gap: 6px; }
    .discover-facts:empty { display: none; }
    .discover-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink); font-size: var(--text-xs); }
    .discover-chip.is-quoted { background: var(--good-bg); color: var(--good-ink); font-weight: 600; }
    .discover-chip.is-estimate { background: var(--surface); color: var(--ink-muted); border: 1px dashed var(--line); }
    .discover-chip.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
    .discover-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-block-start: 4px; }
    .discover-total-label { color: var(--ink-muted); font-size: var(--text-s); }
    .discover-total-value { font-size: var(--text-xl, 1.5rem); }
    .discover-verdict { margin: 0; font-size: var(--text-s); color: var(--good-ink); }
    .discover-verdict.is-tight { color: var(--warn-ink); }
    .discover-verdict.is-over { color: var(--danger); }
    .discover-bar { block-size: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
    .discover-bar-fill { block-size: 100%; border-radius: inherit; background: var(--good-ink); }
    .is-tight .discover-bar-fill { background: var(--warn-ink); }
    .is-over .discover-bar-fill { background: var(--danger); }
    .discover-lines { display: grid; gap: 2px; padding-block-start: 6px; border-block-start: 1px solid var(--line); font-size: var(--text-s); color: var(--ink-muted); }
    .discover-line { display: flex; justify-content: space-between; gap: 8px; }
    .discover-line-value { color: var(--ink); font-variant-numeric: tabular-nums; }
    .discover-note { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }
    .discover-go { margin-block-start: auto; }
    .discover-card.is-loading .discover-cover, .discover-card.is-loading .discover-body { animation: discover-pulse 1.4s ease-in-out infinite; }
    .discover-card.is-loading .discover-body { min-block-size: 220px; }
    @media (prefers-reduced-motion: reduce) { .discover-status.is-working::before, .discover-card.is-loading * { animation: none; } }

    .waitlist,
    .how,
    .error-page {
        max-inline-size: 1120px;
        margin-inline: auto;
        padding: 32px var(--gutter);
    }

    .waitlist {
        display: grid;
        gap: 12px;
        margin-block: 8px;
        padding: 24px var(--gutter);
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
        background: var(--surface);
        inline-size: calc(100% - 2 * var(--gutter));
        max-inline-size: calc(1120px - 2 * var(--gutter));
    }

    .waitlist-title, .how-title { font-size: var(--text-xl); letter-spacing: -0.02em; }
    .waitlist-form { display: flex; flex-wrap: wrap; gap: 10px; }
    .waitlist-form .field-input { flex: 1 1 240px; }
    .waitlist-done { color: var(--good-ink); font-weight: 650; }

    .how-steps {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        margin-block-start: 20px;
        counter-reset: step;
    }

    .how-steps li {
        display: grid;
        gap: 6px;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--surface);
        color: var(--ink-muted);
        font-size: var(--text-s);
        counter-increment: step;
    }

    .how-steps li::before {
        content: counter(step);
        display: grid;
        place-items: center;
        inline-size: 32px;
        block-size: 32px;
        border-radius: 50%;
        color: var(--accent-ink);
        background: var(--accent-soft);
        font-weight: 750;
    }

    .how-steps strong { color: var(--ink); font-size: var(--text-m); }

    .error-page { display: grid; gap: 20px; justify-items: start; padding-block: clamp(48px, 10vw, 120px); }

    /* ---------- o roteiro ---------- */
    .trip {
        display: grid;
        gap: 20px;
        max-inline-size: 820px;
        margin-inline: auto;
        padding: clamp(24px, 4vw, 48px) var(--gutter) 24px;
    }

    .trip-kicker {
        color: var(--accent-ink);
        font-size: var(--text-xs);
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .trip-title {
        margin-block: 4px 8px;
        font-size: var(--text-hero);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.035em;
        overflow-wrap: anywhere;
    }

    .trip-meta { color: var(--ink-muted); }

    .progress,
    .overview,
    .notice-card {
        padding: 16px 20px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--surface);
    }

    .progress { display: grid; gap: 10px; }

    .progress-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 12px;
        font-size: var(--text-s);
    }

    .progress-phase { font-weight: 650; }
    .progress-count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

    .progress-track {
        block-size: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--surface-sunken);
    }

    .progress-fill {
        block-size: 100%;
        inline-size: 4%;
        border-radius: inherit;
        background: var(--accent);
        transition: inline-size 600ms ease;
    }

    .progress-track.is-indeterminate .progress-fill {
        inline-size: 35%;
        animation: slide 1.4s ease-in-out infinite;
    }

    .notice-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 20px;
        border-color: var(--warn-ink);
        color: var(--warn-ink);
        background: var(--warn-bg);
    }

    .notice-card p { font-size: var(--text-s); }

    /* A visão geral: o total, para onde ele vai, e as ações. Não gruda — quem gruda é a faixa de dias. */
    .overview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 20px 32px;
        align-items: center;
        padding: 20px 24px;
        box-shadow: var(--shadow-1);
    }

    .overview-money { display: grid; gap: 2px; }
    .overview-label { color: var(--ink-muted); font-size: var(--text-xs); }

    .overview-value {
        font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.035em;
        line-height: 1.1;
    }

    .overview-per-person { font-size: var(--text-s); font-weight: 600; }
    .overview-per-person:empty, .overview-note:empty { display: none; }
    .overview-note { margin-block-start: 6px; color: var(--ink-muted); font-size: var(--text-xs); }
    .overview-note.is-over { color: var(--danger); font-weight: 650; }

    .split { display: grid; gap: 10px; }

    .split-row {
        display: grid;
        grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        font-size: var(--text-s);
    }

    .split-label { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
    .split-track { block-size: 8px; border-radius: 4px; background: var(--surface-sunken); }
    .split-fill { display: block; block-size: 100%; border-radius: 4px; background: var(--accent); }
    .split-value { font-variant-numeric: tabular-nums; font-weight: 650; text-align: end; }
    .split-percent { color: var(--ink-muted); font-weight: 400; }

    .overview-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        grid-column: 1 / -1;
        padding-block-start: 16px;
        border-block-start: 1px solid var(--line);
    }

    .export { position: relative; }

    .export-menu {
        position: absolute;
        inset-block-start: calc(100% + 8px);
        inset-inline-start: 0;
        z-index: 20;
        display: grid;
        gap: 2px;
        inline-size: min(340px, calc(100vw - 2 * var(--gutter) - 32px));
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--surface);
        box-shadow: var(--shadow-2, 0 12px 32px rgb(0 0 0 / 0.18));
    }

    .share-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-block-end: 6px; padding-block-end: 8px; border-block-end: 1px solid var(--line); }

    .share-mode {
        display: grid;
        gap: 2px;
        align-content: start;
        min-block-size: 64px;
        padding: 10px 12px;
        border: 1px solid var(--line-control);
        border-radius: var(--radius-s);
        color: var(--ink);
        background: var(--surface);
        font: inherit;
        font-size: var(--text-s);
        line-height: 1.25;
        text-align: start;
        cursor: pointer;
    }

    .share-mode span { color: var(--ink-muted); font-size: var(--text-xs); }
    /* A escolhida tem borda, fundo E peso: não depende só de cor. */
    .share-mode[aria-checked="true"] { border: 2px solid var(--accent); padding: 9px 11px; background: var(--accent-soft); }

    .share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }

    .share-item {
        display: grid;
        justify-items: center;
        gap: 6px;
        min-block-size: 76px;
        padding: 10px 4px;
        border-radius: var(--radius-s);
        color: var(--ink);
        font-size: var(--text-xs);
        font-weight: 600;
        text-decoration: none;
    }

    .share-item:hover, .share-item:focus-visible { background: var(--surface-sunken); }
    .share-letter { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
    .share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 6px; padding: 10px 8px 4px; border-block-start: 1px solid var(--line); }

    .export-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-block-size: 56px;
        padding: 8px;
        border-radius: var(--radius-s);
        color: var(--ink);
        text-decoration: none;
    }

    .export-item:hover, .export-item:focus-visible { background: var(--surface-sunken); }
    .export-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 10px; color: var(--accent-ink); background: var(--accent-soft); }
    .export-text { display: grid; line-height: 1.3; }
    .export-text span { color: var(--ink-muted); font-size: var(--text-xs); }
    .export-copy { justify-self: start; min-block-size: 40px; margin: 4px 8px 2px; font-size: var(--text-s); }

    .overview-discard { margin-inline-start: auto; }

    /* A faixa de dias: gruda sob o cabeçalho, rola de lado, marca o dia que está na tela. */
    .day-nav {
        position: sticky;
        inset-block-start: 64px;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-inline: -8px;
        padding: 8px;
        border-radius: var(--radius-m);
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(10px);
    }

    .day-nav-list {
        display: flex;
        flex: 1;
        gap: 6px;
        min-inline-size: 0;
        overflow-x: auto;
        scrollbar-width: none;
        position: relative;
    }

    .day-nav-list::-webkit-scrollbar { display: none; }

    .day-chip {
        display: grid;
        justify-items: center;
        min-inline-size: 52px;
        min-block-size: 48px;
        padding: 6px 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        color: var(--ink);
        background: var(--surface);
        line-height: 1.15;
        text-decoration: none;
        white-space: nowrap;
    }

    .day-chip-number { font-weight: 750; font-variant-numeric: tabular-nums; }
    .day-chip-date { color: var(--ink-muted); font-size: var(--text-xs); }
    .day-chip.is-free { border-style: dashed; background: transparent; }
    .day-chip.is-free .day-chip-number { color: var(--ink-muted); font-weight: 600; }
    .day-chip:hover { border-color: var(--line-control); }

    .day-chip[aria-current] { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
    .day-chip[aria-current] .day-chip-number, .day-chip[aria-current] .day-chip-date { color: inherit; }

    .day-nav-total { flex: none; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

    .view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 8px; }
    .view-title { font-size: var(--text-l); letter-spacing: -0.015em; }

    .view-toggle { display: inline-flex; max-inline-size: 100%; padding: 3px; border: 1px solid var(--line-control); border-radius: 999px; background: var(--surface); }

    .view-toggle button {
        min-block-size: 38px;
        padding-inline: 16px;
        border: 0;
        border-radius: 999px;
        color: var(--ink-muted);
        background: transparent;
        font: inherit;
        font-size: var(--text-s);
        font-weight: 650;
        cursor: pointer;
    }

    .view-toggle button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
    /* Tela estreita: "Übersicht Liste Karte" passava 32 px a 320 px. As abas dividem a largura que houver. */
    @media (max-width: 400px) { .view-toggle button { flex: 1 1 auto; min-inline-size: 0; padding-inline: 10px; } }

    /* Painel: a viagem inteira numa coluna enxuta, o trecho aberto ao lado. */
    .outline { display: grid; gap: 18px; align-content: start; }
    .outline-day { display: grid; gap: 6px; }

    /* O cabeçalho do dia ganhou clima e relógio: quando não cabe numa linha, QUEBRA entre os itens — nunca no
       meio de "Dia 2" nem da data. */
    .outline-day-number, .outline-day-date { white-space: nowrap; }

    .outline-day-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        padding-inline: 4px;
        font-size: var(--text-s);
        letter-spacing: 0;
    }

    .outline-day-date { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 500; }
    .outline-day-total { margin-inline-start: auto; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
    .outline-free { padding: 8px 12px; border: 1px dashed var(--line-control); border-radius: var(--radius-s); color: var(--ink-muted); font-size: var(--text-xs); }
    .outline-day.is-free .outline-day-number { color: var(--ink-muted); }
    .outline-list { display: grid; gap: 4px; }
    .outline-item { display: grid; gap: 8px; }
    /* Coluna explícita: sem ela o trecho aberto no celular alarga a lista além da tela. */
    .outline, .outline-day, .outline-list, .outline-item { grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }

    .outline-row {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        inline-size: 100%;
        min-block-size: 56px;
        padding: 8px 12px 8px 8px;
        border: 1px solid transparent;
        border-radius: var(--radius-s);
        color: var(--ink);
        background: transparent;
        font: inherit;
        text-align: start;
        cursor: pointer;
    }

    .outline-row:hover { background: var(--surface); border-color: var(--line); }
    .outline-row[aria-current] { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow-1); }

    .outline-icon {
        display: grid;
        place-items: center;
        inline-size: 36px;
        block-size: 36px;
        border-radius: 10px;
        color: var(--accent-ink);
        background: var(--accent-soft);
    }

    .outline-row.is-searching .outline-icon { animation: pulse 1.6s ease-in-out infinite; }
    .outline-text { display: grid; min-inline-size: 0; line-height: 1.25; }
    /* O nome inteiro, quebrando em linhas se preciso: reticências escondiam justamente o que distingue um passeio do outro. */
    .outline-name { font-size: var(--text-s); font-weight: 650; overflow-wrap: anywhere; }
    .outline-facts { overflow: hidden; color: var(--ink-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
    .outline-price { font-size: var(--text-s); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

    .detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-inline-size: 0; animation: rise 240ms ease-out both; }
    .detail-when { display: flex; align-items: baseline; gap: 10px; color: var(--ink-muted); font-size: var(--text-s); }
    .detail-when strong { color: var(--ink); font-size: var(--text-l); letter-spacing: -0.015em; }
    .hop.hop-inline { margin-inline-start: 0; padding: 10px 14px; border: 0; border-radius: var(--radius-s); background: var(--surface-sunken); font-size: var(--text-s); }
    .detail-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .pager-step {
        display: grid;
        gap: 2px;
        min-inline-size: 0;
        min-block-size: 56px;
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        color: var(--ink);
        background: var(--surface);
        font: inherit;
        text-align: start;
        cursor: pointer;
    }

    .pager-step:hover:not(:disabled) { border-color: var(--line-control); }
    .pager-step:disabled { opacity: 0.45; cursor: default; }
    .pager-forward { text-align: end; }
    .pager-label { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 600; }
    .pager-name { overflow: hidden; font-size: var(--text-s); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

    @media (min-width: 900px) {
        .trip.is-split { max-inline-size: 1180px; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); column-gap: 32px; }
        .trip.is-split > * { grid-column: 1 / -1; }
        .trip.is-split > .outline { grid-column: 1; }
        .trip.is-split > .days { grid-column: 2; }

        .trip.is-split > .outline {
            position: sticky;
            inset-block-start: 80px;
            max-block-size: calc(100dvh - 96px);
            overflow-y: auto;
            padding: 4px 8px 4px 0;
            scrollbar-width: thin;
        }

        .trip.is-split > .days { position: sticky; inset-block-start: 80px; align-self: start; }

        /* No painel o trecho tem a largura que a lista não dava: a foto cresce e o texto respira. */
        .detail .stop { grid-template-columns: 148px minmax(0, 1fr); gap: 24px; padding: 24px; }
        .detail .stop-thumb { inline-size: 148px; block-size: 148px; }
        .detail .stop-name { font-size: var(--text-xl); letter-spacing: -0.02em; }
        .detail .stop-text { font-size: var(--text-m); }
        .detail .stop-text.is-clamped { -webkit-line-clamp: 5; line-clamp: 5; }
    }

    @media (max-width: 899px) {
        .trip.is-split > .days { display: none; }
        .outline-item .detail { padding-block: 4px 12px; }
        /* No celular a própria lista é o anterior/próximo. */
        .outline-item .detail-when, .outline-item .detail-pager { display: none; }
    }

    /* Filho de grid não encolhe abaixo do próprio conteúdo sem isto — e a faixa de dias é larga. */
    .trip > *, .days > *, .day > * { min-inline-size: 0; }

    .days { display: grid; gap: 36px; }

    /* A âncora não pode parar debaixo do cabeçalho e da faixa de dias. */
    .day { display: grid; gap: 14px; scroll-margin-block-start: 148px; }

    .day-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding-block-end: 10px;
        border-block-end: 1px solid var(--line);
    }

    .day-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--text-l); letter-spacing: -0.015em; }
    .day-date { color: var(--ink-muted); font-size: var(--text-s); font-weight: 500; letter-spacing: 0; }
    .day-total { color: var(--ink-muted); font-size: var(--text-s); font-variant-numeric: tabular-nums; white-space: nowrap; }

    .day.is-free { gap: 8px; }
    .day.is-free .day-head { border-block-end: 0; padding-block-end: 0; }
    .day-free { color: var(--ink-muted); font-size: var(--text-s); }

    .day-stops { display: grid; }

    .hop {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-inline-start: 43px;
        padding: 10px 0 10px 18px;
        border-inline-start: 2px dotted var(--line-control);
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .hop svg { flex: none; }
    .hop-text { display: flex; flex-wrap: wrap; gap: 2px 8px; min-inline-size: 0; }
    .hop-main { color: var(--ink); font-weight: 650; }
    .hop-from { overflow-wrap: anywhere; }
    /* Primeiro translado do dia não tem cartão acima: o pontilhado começa do nada, então vira só margem. */
    .day-stops > .hop:first-child { padding-block-start: 0; }
    .outline-hop { display: flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: var(--text-xs); }

    .stop + .stop { margin-block-start: 12px; }

    .stop {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--surface);
        box-shadow: var(--shadow-1);
        animation: rise 320ms ease-out both;
    }

    .stop-thumb {
        display: block;
        inline-size: 88px;
        block-size: 88px;
        overflow: hidden;
        border-radius: var(--radius-s);
        background: var(--surface-sunken);
    }

    .stop-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    /* Carro e logo de locadora vêm recortados em fundo branco: inteiros e com respiro, nunca cortados. */
    .stop-thumb.is-contained { padding: 6px; background: #ffffff; }
    .stop-thumb.is-contained img { object-fit: contain; }
    .car-sheet { display: grid; gap: 6px; }
    .car-line { color: var(--ink-muted); font-size: var(--text-s); overflow-wrap: anywhere; }
    .car-specs { display: flex; flex-wrap: wrap; gap: 6px; }
    .is-zoomable { position: relative; cursor: zoom-in; }
    .is-zoomable:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }

    /* A lupa no canto diz que a foto abre; no toque (sem hover) ela fica sempre visível. */
    .zoom-hint {
        position: absolute;
        inset-block-end: 4px;
        inset-inline-end: 4px;
        display: grid;
        place-items: center;
        inline-size: 22px;
        block-size: 22px;
        border-radius: 50%;
        color: #ffffff;
        background: rgb(0 0 0 / 0.55);
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .is-zoomable:hover .zoom-hint, .is-zoomable:focus-visible .zoom-hint { opacity: 1; }
    @media (hover: none) { .zoom-hint { opacity: 1; } }
    .option-thumb .zoom-hint { inline-size: 18px; block-size: 18px; inset-block-end: 2px; inset-inline-end: 2px; }

    .lightbox {
        max-inline-size: 96vw;
        max-block-size: 96dvh;
        padding: 0;
        border: 0;
        overflow: visible;
        color: #ffffff;
        background: transparent;
    }

    .lightbox::backdrop { background: rgb(8 9 14 / 0.86); }
    .lightbox-figure { display: grid; justify-items: center; gap: 10px; margin: 0; }
    .lightbox-figure img { display: block; inline-size: auto; max-inline-size: 92vw; max-block-size: 80dvh; border-radius: var(--radius-m); background: #ffffff; object-fit: contain; }
    .lightbox-caption { max-inline-size: 92vw; font-weight: 650; text-align: center; }
    .lightbox-close { display: block; margin: 0 0 10px auto; color: #ffffff; border-color: rgb(255 255 255 / 0.5); background: rgb(0 0 0 / 0.4); }

    /* O comentário do viajante: recado de gente, não dado do fornecedor — por isso o fundo próprio e a barra lateral. */
    .note {
        display: grid;
        gap: 4px;
        margin-block-start: 6px;
        padding: 10px 12px;
        border-inline-start: 3px solid var(--accent);
        border-radius: 0 var(--radius-s) var(--radius-s) 0;
        background: var(--accent-soft);
    }

    .note-head { display: flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700; }
    .note-text { font-size: var(--text-s); overflow-wrap: anywhere; white-space: pre-line; }
    .note-action { justify-self: start; min-block-size: 32px; font-size: var(--text-xs); }

    .note-input {
        inline-size: 100%;
        min-block-size: 84px;
        padding: 10px 12px;
        border: 1px solid var(--line-control);
        border-radius: var(--radius-s);
        color: var(--ink);
        background: var(--surface);
        font: inherit;
        /* 16 px no mínimo: abaixo disso o iPhone dá zoom na página ao focar o campo. */
        font-size: max(1rem, 16px);
        resize: vertical;
    }

    .note-hint { color: var(--ink-muted); font-size: var(--text-xs); }
    .note-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .note-count { margin-inline-start: auto; color: var(--ink-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

    .stop.is-editing { grid-template-columns: minmax(0, 1fr); }
    .stop-form { margin-block-start: 0; gap: 12px; }
    .field-row { display: grid; gap: 4px; min-inline-size: 0; }
    .field-label { font-size: var(--text-xs); font-weight: 650; }
    .field-input { min-block-size: 44px; }
    input.field-input { min-block-size: 44px; block-size: 44px; resize: none; }
    .field-input[aria-invalid="true"] { border-color: var(--danger); }
    .field-error { color: var(--danger); font-size: var(--text-xs); font-weight: 600; }
    .field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
    .add-stop { justify-self: start; min-block-size: 40px; padding-inline: 4px; color: var(--accent-ink); font-size: var(--text-s); font-weight: 650; text-decoration: none; }
    .add-stop:hover { text-decoration: underline; }

    .backoffice { display: grid; gap: 16px; max-inline-size: 1180px; margin-inline: auto; padding: clamp(24px, 4vw, 48px) var(--gutter) 48px; }
    .backoffice > * { min-inline-size: 0; }
    .backoffice-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
    .backoffice-title { font-size: var(--text-xl); letter-spacing: -0.02em; }
    .backoffice-user { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: var(--text-s); }
    .backoffice-login { display: grid; gap: 16px; justify-items: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .backoffice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .backoffice-count { font-weight: 650; }
    .backoffice-filter { flex: 1 1 260px; max-inline-size: 420px; block-size: 44px; min-block-size: 44px; }
    /* Tabela é o único lugar do site que rola de lado — dentro do próprio quadro, nunca a página. */
    /* As áreas do backoffice (Roteiros, Promoções…): abas de verdade — links, cada uma na sua página. */
    .backoffice-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-block-end: 1px solid var(--line); }
    .backoffice-tab { padding: 10px 16px; border-block-end: 2px solid transparent; margin-block-end: -1px; color: var(--ink-muted); font-weight: 600; text-decoration: none; }
    .backoffice-tab:hover { color: var(--ink); }
    .backoffice-tab[aria-current="page"] { color: var(--accent-ink, var(--accent)); border-block-end-color: var(--accent); }
    .backoffice-section-title { margin-block-start: 12px; font-size: var(--text-l); letter-spacing: -0.01em; }
    .backoffice-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    .backoffice-error { color: var(--warn-ink); white-space: normal; max-inline-size: 320px; }
    .backoffice-table td.is-wrap { white-space: normal; min-inline-size: 220px; }

    /* A paginação da listagem: no pé da tabela, centrada; no celular os botões quebram de linha. */
    .backoffice-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-block-start: 16px; }
    .backoffice-page { padding-inline: 8px; font-size: var(--text-s); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
    .backoffice-pager .button:disabled { opacity: .45; cursor: default; }

    /* `contain: inline-size`: a largura da tabela lá dentro não conta para o layout de fora — só o conteúdo real
       (que cabe, ou rola) é o que existe para quem está de fora deste elemento. */
    .backoffice-table-wrap { overflow-x: auto; contain: inline-size; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .backoffice-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
    .backoffice-table th, .backoffice-table td { padding: 10px 14px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; white-space: nowrap; }
    .backoffice-table th { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; background: var(--surface-sunken); }
    .backoffice-table tr:last-child td { border-block-end: 0; }
    .backoffice-table .is-number { text-align: end; font-variant-numeric: tabular-nums; }
    .backoffice-sub { display: block; color: var(--ink-muted); font-size: var(--text-xs); }
    .backoffice-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-xs); color: var(--ink-muted); }

    /* "N fontes ▾": abre a linha de detalhe com cada URL em que a oferta foi vista. */
    .backoffice-expand { white-space: nowrap; }
    .backoffice-expand[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-ink, var(--accent)); }
    .backoffice-detail-row td { padding: 0; background: var(--surface-sunken); }
    .backoffice-detail-cell { padding: 10px 14px 14px 30px !important; }
    .backoffice-mini-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-xs); }
    .backoffice-mini-table th, .backoffice-mini-table td { padding: 6px 10px; border-block-end: 1px solid var(--line); text-align: start; white-space: nowrap; }
    .backoffice-mini-table th { color: var(--ink-muted); font-weight: 650; }
    .backoffice-mini-table tr:last-child td { border-block-end: 0; }
    .backoffice-mini-table td.is-wrap { white-space: normal; min-inline-size: 260px; overflow-wrap: anywhere; }

    /* Passagens: os números do índice. Primeiro o número, depois a legenda — é o que se olha antes de qualquer tabela. */
    .backoffice-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
    .backoffice-stat { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .backoffice-stat.is-warn { border-color: var(--warn-ink); background: var(--warn-bg); }
    .backoffice-stat-value { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .backoffice-stat-label { font-size: var(--text-s); font-weight: 600; }
    .backoffice-stat-note { color: var(--ink-muted); font-size: var(--text-xs); }
    .backoffice-stat.is-warn .backoffice-stat-note { color: var(--warn-ink); }

    /* A barrinha do dia na esteira: proporcional ao melhor dia da janela, para a esteira parada saltar aos olhos. */
    .backoffice-bar-cell { min-inline-size: 120px; block-size: 10px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
    .backoffice-bar-fill { display: block; block-size: 100%; border-radius: 999px; background: var(--line-control); }
    .backoffice-bar-fill.is-new { background: var(--accent); }
    .backoffice-table .is-warn { color: var(--warn-ink); }

    /* Como chegar: a linha de etapas. O fio liga os ícones; a travessia de água (a etapa com horário) ganha destaque. */
    .access { display: grid; gap: 10px; margin-block-start: 4px; }
    .access-summary { font-size: var(--text-s); }
    .access-summary span { color: var(--ink-muted); }
    .access-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: var(--radius-s); color: var(--ink); background: var(--surface-sunken); font-size: var(--text-s); }
    .access-alert.is-warn { border: 1px solid var(--warn-ink); color: var(--warn-ink); background: var(--warn-bg); font-weight: 600; }
    .access-alert p { flex: 1 1 240px; }
    .access-steps { display: grid; gap: 0; }
    .access-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-block-end: 14px; }
    .access-step:last-child { padding-block-end: 0; }
    .access-step:not(:last-child)::before { position: absolute; inset-block: 36px 0; inset-inline-start: 17px; inline-size: 2px; background: var(--line-control); content: ""; }
    .access-icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-muted); background: var(--surface); }
    .access-step.is-crossing .access-icon { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
    .access-body { display: grid; gap: 2px; min-inline-size: 0; padding-block-start: 6px; font-size: var(--text-s); }
    .access-route { overflow-wrap: anywhere; }
    .access-facts { color: var(--ink-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
    .access-times { inline-size: fit-content; padding: 1px 8px; border-radius: 999px; color: var(--warn-ink); background: var(--warn-bg); font-size: var(--text-xs); font-weight: 650; }
    .access-link { justify-self: start; color: var(--accent-ink); font-size: var(--text-xs); font-weight: 650; }

    .airport { display: grid; gap: 4px; }
    .airport-why { padding: 8px 12px; border-radius: var(--radius-s); color: var(--ink-muted); background: var(--surface-sunken); font-size: var(--text-s); }
    .airport-options { margin-block-start: 0; border-block-start: 0; }

    /* Páginas de conteúdo (destinos): texto para ler, largura de leitura, e um botão que leva ao formulário. */
    .guide { display: grid; gap: 32px; max-inline-size: 820px; margin-inline: auto; padding: clamp(24px, 4vw, 48px) var(--gutter) 48px; }
    .guide > * { min-inline-size: 0; }
    .crumbs { color: var(--ink-muted); font-size: var(--text-s); }
    .crumbs a { color: inherit; }
    .guide-head { display: grid; gap: 14px; justify-items: start; }
    .guide-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; overflow-wrap: anywhere; }
    .guide-lede { max-inline-size: 62ch; color: var(--ink-muted); font-size: var(--text-l); }
    /* Botão com o nome do destino pode ser longo: quebra em duas linhas em vez de alargar a página. */
    .guide .button { max-inline-size: 100%; white-space: normal; text-align: center; }
    .guide-h2 { margin-block-end: 12px; font-size: var(--text-xl); letter-spacing: -0.02em; }
    .guide-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
    .guide-facts > div { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .guide-facts dt { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; }
    .guide-facts dd { margin: 0; font-size: var(--text-s); }
    .guide-list { display: grid; gap: 8px; padding-inline-start: 20px; list-style: disc; }
    .guide-tip { margin-block-start: 16px; padding: 12px 14px; border-inline-start: 3px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--accent-soft); font-size: var(--text-s); }
    .guide-cta { display: grid; gap: 12px; justify-items: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .guide-cta p { max-inline-size: 66ch; color: var(--ink-muted); }
    .guide-links { display: flex; flex-wrap: wrap; gap: 8px 10px; }
    .guide-links a { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 14px; border: 1px solid var(--line-control); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: var(--text-s); font-weight: 600; text-decoration: none; }
    .guide-links a:hover { border-color: var(--accent); color: var(--accent-ink); }
    /* ── a aba Promoções ── */
    .deals-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .deals-field { display: grid; gap: 4px; min-inline-size: 0; }
    .deals-field .field-input { inline-size: 100%; min-block-size: 44px; }
    .deals-label { font-size: var(--text-xs); font-weight: 650; color: var(--ink-muted); }
    .deals-filter-actions { display: flex; gap: 8px; }
    .deals-filter-actions .button { min-block-size: 44px; }
    @media (max-width: 760px) { .deals-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    /* No celular o filtro não pode empurrar as ofertas para fora da primeira tela: duas colunas, botão ao lado do tipo. */
    @media (max-width: 760px) { .deals-filter { padding: 12px; gap: 10px; } .deals-filter-actions { grid-column: 1 / -1; } .deals-filter-actions .button { flex: 1 1 0; justify-content: center; } }
    .deal-what { font-size: var(--text-s); color: var(--ink-muted); overflow-wrap: anywhere; }
    .deals-count { font-weight: 650; }
    .deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
    .deal-card { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .deal-card:hover { border-color: var(--accent); }
    .deal-top { display: flex; flex-wrap: wrap; gap: 6px; }
    .deal-route { font-size: var(--text-l); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
    .deal-arrow { color: var(--ink-muted); }
    .deal-price { font-size: var(--text-s); color: var(--ink-muted); }
    .deal-price strong { font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .deal-facts { display: grid; gap: 2px; align-content: start; padding: 0; margin: 0; list-style: none; font-size: var(--text-s); color: var(--ink-muted); }
    .deal-deadline { color: var(--warn-ink); font-weight: 650; }
    .deal-source { font-size: var(--text-xs); color: var(--ink-muted); overflow-wrap: anywhere; }
    .deal-source { margin-block-start: auto; }
    .deal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .deal-actions .button { flex: 1 1 auto; justify-content: center; min-block-size: 44px; text-align: center; }
    .deals-empty { display: grid; gap: 10px; justify-items: start; padding: 28px; border: 1px dashed var(--line-control, var(--line)); border-radius: var(--radius-m); }
    .deals-empty-title { font-size: var(--text-l); font-weight: 650; }
    .deals-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
    .deals-page { font-size: var(--text-s); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
    .deals-disclaimer { font-size: var(--text-xs); color: var(--ink-muted); max-inline-size: 72ch; }

    .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
    .guide-card { display: grid; gap: 2px; min-block-size: 96px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--ink); background: var(--surface); text-decoration: none; }
    .guide-card:hover { border-color: var(--accent); }
    .guide-card-region, .guide-card-meta { color: var(--ink-muted); font-size: var(--text-xs); }
    .guide-card-name { font-size: var(--text-l); letter-spacing: -0.01em; }
    .faq-item { border-block-end: 1px solid var(--line); }
    .faq-item summary { min-block-size: 48px; padding-block: 12px; font-weight: 650; cursor: pointer; }
    .faq-item p { max-inline-size: 70ch; padding-block-end: 16px; color: var(--ink-muted); }
    .site-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--text-s); }
    .site-footer-links a { color: var(--ink-muted); }
    .site-footer-base { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-block-start: 12px; }
    .site-footer-base .site-footer-small { margin: 0; }
    .site-footer-contact { margin-inline-start: auto; font-size: var(--text-s); color: var(--ink-muted); }

    .choices-compact .choice-body { min-block-size: 0; padding-block: 8px; }

    /* Reorganizar: a mão avisa que dá para pegar; a linha azul diz ONDE vai cair. */
    .is-draggable { cursor: grab; }
    .is-draggable:active { cursor: grabbing; }
    .is-dragging { opacity: .35; }
    .is-drop-target { outline: 2px dashed color-mix(in oklab, var(--accent) 45%, transparent); outline-offset: 4px; border-radius: 12px; }
    .drop-marker { block-size: 3px; margin-block: 3px; border-radius: 3px; background: var(--accent); list-style: none; pointer-events: none; }
    .is-moving { cursor: progress; }
    .is-moving .outline-list, .is-moving .day-stops { opacity: .6; transition: opacity .15s; }
    .move-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-block-start: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
    .move-form select { inline-size: 100%; min-inline-size: 0; }
    @media (prefers-reduced-motion: reduce) { .is-moving .outline-list, .is-moving .day-stops { transition: none; } }

    /* Clima e datas: faixa calma — informa, não compete com o total. */
    .weather { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
    .weather-title { margin: 0; font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
    .weather-leg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .weather-leg + .weather-leg { padding-block-start: 14px; border-block-start: 1px solid var(--line); }
    .weather-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: var(--text-m); }
    .weather-head svg { color: var(--accent); flex: none; }
    .weather-range { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
    .weather-text { margin: 0; max-inline-size: 68ch; }
    .weather-note { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }
    .weather-holidays { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
    .badge-holiday { background: var(--warn-bg); color: var(--warn-ink); white-space: normal; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
    .day-weather { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
    /* Dia ainda sem previsão: o típico do período, mais apagado e com ≈ — diferente de propósito da previsão de verdade. */
    .day-weather.is-typical { opacity: .72; font-style: italic; }
    .day-weather-rain { color: var(--accent-ink, var(--ink)); }

    /* Mais de um destino: continua a frase — "Depois, [lugar] · [noites]" — em vez de virar formulário. */
    .stops { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-block-start: 12px; }
    .stops-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
    .stops-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-inline-size: 0; }
    .stops-row .stops-place { flex: 1 1 160px; min-inline-size: 0; max-inline-size: 320px; }
    .stops-row .stops-nights { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; }
    .stops-remove { flex: none; inline-size: 44px; block-size: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); font-size: 22px; line-height: 1; cursor: pointer; }
    .stops-remove:hover { background: var(--surface-sunken); color: var(--danger); }
    .stops-remove:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .stops-add { display: block; margin-block-start: 8px; margin-inline: 0 auto; text-align: start; }

    /* O mapa: ocupa o lugar do trecho aberto; no celular vem ANTES da lista (o mapa é o assunto). */
    .map-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-inline-size: 0; }
    .map-days { display: flex; gap: 6px; overflow-x: auto; padding-block: 2px; scrollbar-width: thin; }
    .map-day { flex: none; min-block-size: 36px; padding-inline: 14px; border: 1px solid var(--line-control); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-s); cursor: pointer; }
    .map-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
    .map-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .map-canvas { position: relative; block-size: min(64vh, 560px); min-block-size: 320px; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--surface-sunken); }
    .map-canvas.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--surface) 70%, transparent) 50%, transparent 70%); background-size: 200% 100%; animation: map-shimmer 1.2s linear infinite; }
    @keyframes map-shimmer { to { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) { .map-canvas.is-loading::after { animation: none; } }
    .map-pin { display: grid; place-items: center; inline-size: 28px; block-size: 28px; padding: 0; border: 2px solid var(--surface); border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--font); box-shadow: 0 2px 6px rgb(0 0 0 / .35); cursor: pointer; }
    .map-pin-lodging { background: var(--ink); color: var(--surface); inline-size: 32px; block-size: 32px; }
    .map-pin-airport { background: var(--surface); color: var(--ink); border-color: var(--ink); cursor: default; }
    .map-pin.is-selected { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 2; }
    .map-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .map-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .map-card-text { display: grid; gap: 2px; min-inline-size: 0; }
    .map-card-when, .map-card-price { font-size: var(--text-xs); color: var(--ink-muted); }
    .map-card-name { overflow-wrap: anywhere; }
    .map-note { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }
    @media (max-width: 899px) {
        .trip.is-split.is-map { display: grid; grid-template-columns: minmax(0, 1fr); }
        .trip.is-split.is-map > .days { display: block; order: 0; }
        .trip.is-split.is-map > .outline { order: 1; }
        .map-canvas { block-size: 52vh; }
    }

    /* Ir por terra num trecho de voo: o convite (ou a explicação) fica logo abaixo do nome. */
    .ground-note { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; font-size: var(--text-s); color: var(--ink-muted); }
    .ground-note svg { flex: none; margin-block-start: 2px; }
    .ground-note.is-warning { padding: 8px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); }
    .ground-open { text-align: start; white-space: normal; }
    .route-note { margin: 6px 0 0; font-size: var(--text-s); color: var(--ink-muted); }
    .option-risk { font-size: var(--text-xs); color: var(--warn-ink); }
    /* "É hora de comprar?": o veredito em palavras (nunca só na cor), a faixa, e o lastro. */
    .price-context { display: grid; gap: 2px; margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface-sunken); font-size: var(--text-s); }
    .price-context.is-cheap { background: var(--good-bg); color: var(--good-ink); }
    .price-context.is-expensive { background: var(--warn-bg); color: var(--warn-ink); }
    .price-context-verdict { font-weight: 650; }
    .price-context-basis { font-size: var(--text-xs); opacity: .85; }
    .split-note { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); display: grid; gap: 4px; }
    .split-note-text { margin: 0; font-size: var(--text-s); font-weight: 650; }
    .split-note-risk { margin: 0; font-size: var(--text-xs); }
    .origin-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-start: 6px; }
    .origin-switch-label { font-size: var(--text-s); color: var(--ink-muted); }
    .option-via { font-size: var(--text-xs); color: var(--ink-muted); }
    .ground-note.is-saving { padding: 8px 12px; border-radius: var(--radius-s); background: var(--good-bg); color: var(--good-ink); }
    .ground-note.is-saving .button-link { color: inherit; }
    .option-mode { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }

    /* Onde comer: a porta é discreta (um link com talher); o painel é uma lista de cartões enxutos. */
    .dining-open { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-size: var(--text-s); font-weight: 600; cursor: pointer; list-style: none; }
    .dining-open::-webkit-details-marker { display: none; }
    .dining-open:hover, .dining-open[aria-current="true"] { color: var(--accent); }
    .dining-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }
    .dining-fold { margin-block-start: 8px; }
    .dining-fold[open] > .dining-open { color: var(--accent); }
    .dining { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
    .dining-slot > .dining, .dining-fold > .dining { margin-block: 4px 12px; padding: 16px; }
    /* A nota com o número de avaliações que a sustenta: a estrela é enfeite, o número é o dado. */
    .dining-rating { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--text-s); font-weight: 650; font-variant-numeric: tabular-nums; }
    .dining-star { color: var(--accent); }
    .dining-reviews { font-weight: 400; color: var(--ink-muted); }
    .dining-source { margin-block-start: 4px; }
    .dining-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
    .dining-title { margin: 0; font-size: var(--text-l); letter-spacing: -0.01em; }
    .dining-near { font-size: var(--text-s); color: var(--ink-muted); overflow-wrap: anywhere; }
    .dining-filter { display: flex; flex-wrap: wrap; gap: 6px; }
    .dining-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
    .dining-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: var(--radius-m); background: var(--surface-sunken); }
    .dining-card.is-skeleton { min-block-size: 88px; background: linear-gradient(100deg, var(--surface-sunken) 30%, var(--surface) 50%, var(--surface-sunken) 70%); background-size: 200% 100%; animation: map-shimmer 1.2s linear infinite; }
    @media (prefers-reduced-motion: reduce) { .dining-card.is-skeleton { animation: none; } }
    .dining-thumb { inline-size: 64px; block-size: 64px; border-radius: var(--radius-s); overflow: hidden; background: var(--surface); }
    .dining-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
    .dining-thumb.is-empty { display: grid; place-items: center; color: var(--ink-muted); }
    .dining-add { color: var(--accent); border-color: var(--accent); }
    .dining-text { display: grid; gap: 2px; min-inline-size: 0; }
    .dining-name { overflow-wrap: anywhere; }
    .dining-facts, .dining-address { font-size: var(--text-xs); color: var(--ink-muted); overflow-wrap: anywhere; }
    .dining-summary { margin: 2px 0; font-size: var(--text-s); }
    .dining-side { display: grid; gap: 8px; justify-items: end; text-align: end; }
    .dining-price { font-size: var(--text-s); white-space: nowrap; }
    .dining-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    .dining-status, .dining-note { margin: 0; font-size: var(--text-s); color: var(--ink-muted); }
    .dining-note { font-size: var(--text-xs); }
    .map-pin-dining { inline-size: 24px; block-size: 24px; background: var(--surface); color: var(--accent); border-color: var(--accent); cursor: default; }
    @media (max-width: 560px) {
        .dining-card { grid-template-columns: 48px minmax(0, 1fr); }
        .dining-thumb { inline-size: 48px; block-size: 48px; }
        .dining-side { grid-column: 1 / -1; justify-items: stretch; text-align: start; }
        .dining-actions { justify-content: flex-start; }
    }

    /* O relógio do dia: a hora de cada trecho, o resumo no cabeçalho, a refeição como linha leve. */
    .outline-time { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
    .day-clock { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); }
    .day-clock.is-room { background: var(--good-bg); color: var(--good-ink); }
    .day-clock.is-over { background: var(--warn-bg); color: var(--warn-ink); }
    .day-advice { display: grid; gap: 8px; }
    .suggest { margin: 8px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-s); }
    .suggest-title, .rain-advice-text, .rain-advice-or { margin: 0 0 6px; font-size: var(--text-s); color: var(--ink-muted); }
    .suggest-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .suggest-text { display: grid; min-inline-size: 0; }
    .suggest-name { font-weight: 600; font-size: var(--text-s); overflow-wrap: anywhere; }
    .suggest-about { font-size: var(--text-xs); color: var(--ink-muted); }
    .suggest-row .button { flex: none; }
    .suggest-other { margin-block-start: 8px; font-size: var(--text-xs); }
    /* Os extras do dia: dois botões de verdade no fim do dia, iguais em todos os modos. */
    /* EM COLUNA, um por linha, cada um ocupando a largura inteira. Já foram lado a lado dividindo a
       linha, e dividir era a origem do defeito: em meia coluna "Onde comer" partia em duas linhas
       enquanto "Eventos" continuava inteiro, e nenhum ajuste de base resolvia sem espremer um dos
       dois. Empilhados não há o que dividir — cada botão tem a linha toda, os alvos de toque ficam
       largos e a leitura é de cima para baixo, como o resto do dia. */
    .day-extras { display: flex; flex-direction: column; gap: 8px; margin-block: 10px 4px; }
    .day-extras > * { min-inline-size: 0; }
    .extra-pill { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-s); font-weight: 650; line-height: 1.2; text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
    .extra-pill:hover { border-color: var(--accent); box-shadow: 0 1px 0 var(--line); }
    .extra-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .extra-pill.is-open, .extra-pill[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
    .extra-pill-icon { flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
    .extra-pill.is-open .extra-pill-icon, .extra-pill[aria-current="true"] .extra-pill-icon { background: var(--accent); color: var(--on-accent); }
    /* O rótulo NUNCA quebra: "Onde comer" em duas linhas lê como defeito, e era o que acontecia. É este `nowrap`
       que dá ao botão uma largura mínima de verdade — sem ele o flex esmaga o texto antes de deixar a barra
       empilhar, e nenhum ajuste de base resolve. Nada de `overflow: hidden` aqui: zeraria essa mínima e traria a
       quebra de volta por outro caminho. */
    .extra-pill-label { flex: 1; white-space: nowrap; }
    .extra-pill-count { flex: none; min-inline-size: 22px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); font-weight: 700; text-align: center; }
    /* A caixa da seta tem o tamanho do disco SEMPRE, aceso ou apagado: se ela crescesse ao abrir, o rótulo perderia
       largura e "Onde comer" quebrava em duas linhas — o botão mudava de forma no próprio clique. */
    .extra-pill-chevron { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; color: var(--ink-muted); transition: transform .15s, background-color .15s; }
    /* A seta aponta para onde o conteúdo vai aparecer. Só o botão que abre ABAIXO vira de cabeça para baixo ao
       abrir: no que abre ao lado, virar apontaria de volta para o botão — a lista está à direita, e continua lá
       enquanto estiver aberta. */
    .opens-below.is-open .extra-pill-chevron, .opens-below[aria-current="true"] .extra-pill-chevron { transform: rotate(180deg); color: inherit; }
    .opens-side.is-open .extra-pill-chevron, .opens-side[aria-current="true"] .extra-pill-chevron { color: inherit; }
    /* Ao passar o mouse, a seta anda um passo na direção em que a coisa abre. É a dica mais barata que existe: diz o
       que vai acontecer ANTES do clique, sem ocupar um pixel a mais do botão. */
    .opens-side:hover .extra-pill-chevron, .opens-side:focus-visible .extra-pill-chevron { transform: translateX(3px); }
    .opens-below:hover .extra-pill-chevron, .opens-below:focus-visible .extra-pill-chevron { transform: translateY(2px); }
    .opens-below.is-open:hover .extra-pill-chevron { transform: rotate(180deg) translateY(2px); }
    /* A cápsula continua inteira quando abre. Aqui já se achatou a borda direita para o botão virar "aba
       encostada" no painel ao lado — desenho que só fechava enquanto os dois dividiam a linha e o painel
       nascia colado. Ocupando a linha toda, não há nada encostado em lugar nenhum: o que se via era o
       final da pílula apagado, lido como corte. Quem diz qual está aberto é a cor e a seta, abaixo. */
    /* E a seta acende num disco: é o que distingue "este é o aberto" de "este é mais um botão" quando há vários
       dias na tela e só um painel à direita. */
    .opens-side.is-open .extra-pill-chevron, .opens-side[aria-current="true"] .extra-pill-chevron {
        background: var(--accent); color: var(--on-accent);
    }
    @media (prefers-reduced-motion: reduce) { .extra-pill, .extra-pill-chevron { transition: none; } }
    .day-extras > .dining { margin-block: 4px 12px; padding: 16px; }

    /* O painel de eventos: a hora à esquerda, como as paradas; o lastro em palavras (nunca só na cor) e quem disse. */
    .events-panel { padding: 4px 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
    .events-group { margin: 12px 0 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
    .events-list { display: grid; margin: 0; padding: 0; list-style: none; }
    .event-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; padding-block: 12px; border-block-end: 1px solid var(--line); }
    .events-list:last-of-type .event-row:last-child { border-block-end: 0; }
    /* A foto do evento (só os que vieram de um post têm). Entra numa coluna própria, entre a hora e o texto:
       a linha sem foto não muda de forma, porque a coluna só existe quando há imagem. */
    .event-row:has(.event-photo) { grid-template-columns: 3rem auto minmax(0, 1fr) auto; }
    .event-photo { margin: 0; inline-size: 68px; block-size: 68px; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
    .event-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
    /* O crédito fica com o resto do lastro: quem disse, quem fotografou. */
    .event-credit { color: var(--ink-muted); font-size: 0.8rem; }
    a.event-credit:hover { color: var(--ink); }
    /* No estreito a foto sai da linha e vira faixa acima do texto — 68px a menos de largura estrangulam o título. */
    @container (max-width: 380px) {
        .event-row:has(.event-photo) { grid-template-columns: 3rem minmax(0, 1fr); }
        .event-photo { grid-column: 1 / -1; inline-size: 100%; block-size: 120px; }
    }
    .event-when { padding-block-start: 1px; font-size: var(--text-s); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
    .event-when.is-none { color: var(--ink-muted); font-weight: 400; }
    .event-text { display: grid; gap: 2px; min-inline-size: 0; }
    .event-name { font-weight: 650; font-size: var(--text-s); overflow-wrap: anywhere; }
    .event-about { font-size: var(--text-xs); color: var(--ink-muted); overflow-wrap: anywhere; }
    .event-basis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-block-start: 2px; font-size: var(--text-xs); color: var(--ink-muted); }
    .event-proof { padding: 1px 8px; border-radius: 999px; font-weight: 650; }
    .event-proof.is-confirmed { background: var(--good-bg); color: var(--good-ink); }
    .event-proof.is-single { background: var(--warn-bg); color: var(--warn-ink); }
    /* O evento fixo da semana: nem confirmado nem duvidoso — é costume da cidade. Neutro, com o aviso em palavras. */
    .event-proof.is-recurring { background: var(--accent-soft); color: var(--accent-ink); }
    .event-sources { overflow-wrap: anywhere; }
    .event-link { color: var(--accent-ink); font-weight: 600; }
    .event-add { align-self: center; white-space: nowrap; }
    /* Estreito (o resumo à esquerda, o celular): o botão desce para baixo do texto, alinhado com ele. */
    @container (max-width: 380px) { .event-row { grid-template-columns: 3rem minmax(0, 1fr); } .event-add { grid-column: 2; justify-self: start; } }
    .events-panel { container-type: inline-size; }
    .events-note { margin: 10px 0 0; font-size: var(--text-xs); color: var(--ink-muted); }
    /* O que a tela diz sobre a busca de eventos: procurando, cedo demais, ou nada. Discreto — é contexto, não alerta. */
    /* O botão de eventos EM ESPERA: mesma forma e lugar do de verdade, tracejado e sem clique; três pontos andando. */
    .extra-pill.is-loading { cursor: default; border-style: dashed; border-color: var(--accent); background: transparent; color: var(--ink-muted); }
    .extra-pill.is-loading:hover { box-shadow: none; }
    .extra-pill.is-loading .extra-pill-icon { animation: events-pulse 1.4s ease-in-out infinite; }
    .extra-pill.is-loading .extra-pill-label { flex: 1; color: var(--ink); }
    .extra-pill-wait { flex: 1; min-inline-size: 0; font-size: var(--text-xs); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .extra-pill-dots { flex: none; display: inline-flex; gap: 3px; }
    .extra-pill-dots i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent); animation: events-dot 1.2s ease-in-out infinite; }
    .extra-pill-dots i:nth-child(2) { animation-delay: .2s; }
    .extra-pill-dots i:nth-child(3) { animation-delay: .4s; }
    @keyframes events-dot { 0%, 80%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
    @media (prefers-reduced-motion: reduce) { .extra-pill.is-loading .extra-pill-icon, .extra-pill-dots i { animation: none; opacity: .7; } }
    /* A linha de estado do primeiro dia: agora com corpo — fundo suave e borda, para não passar despercebida. */
    .events-status { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface-sunken); font-size: var(--text-xs); line-height: 1.45; color: var(--ink-muted); }
    .events-status.is-searching { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
    .events-status.is-searching::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); animation: events-pulse 1.2s ease-in-out infinite; }
    @keyframes events-pulse { 50% { opacity: .25; } }
    @media (prefers-reduced-motion: reduce) { .events-status.is-searching::before { animation: none; } }
    .rain-advice { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); }
    .rain-advice-text { color: inherit; font-weight: 600; }
    .rain-advice-or { margin-block-start: 8px; color: inherit; }
    .rain-advice-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .rain-advice-actions:empty { display: none; }
    .rain-advice .suggest-about { color: inherit; opacity: .85; }
    .clock-advice { margin: 6px 0 0; font-size: var(--text-s); color: var(--ink-muted); }
    .clock-advice .button-link { text-align: start; white-space: normal; }
    .clock-advice.is-over { padding: 10px 12px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); }
    .meal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; inline-size: 100%; min-block-size: 40px; padding: 6px 12px; border: 1px dashed var(--line-control); border-radius: var(--radius-m); background: transparent; color: var(--ink-muted); font: inherit; font-size: var(--text-s); text-align: start; cursor: pointer; }
    .meal-row:hover { border-color: var(--accent); color: var(--ink); }
    .meal-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .meal-row svg { flex: none; }
    .meal-row-text { font-variant-numeric: tabular-nums; }
    .meal-row-hint { margin-inline-start: auto; color: var(--accent); font-weight: 600; }
    .outline-meal { list-style: none; margin-block: 4px; }
    .day-stops > .meal-row { margin-block: 8px; }

    /* A cadeia do caminho: as pontas em destaque, as paradas do meio como etiquetas — quebra de linha à vontade. */
    .access-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; font-size: var(--text-s); }
    .access-chain-end { font-weight: 700; }
    .access-chain-stop { padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken); overflow-wrap: anywhere; }
    .access-chain-arrow { color: var(--ink-muted); }
    .access-proof { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--text-xs); }
    .access-proof.is-confirmed { background: var(--good-bg); color: var(--good-ink); }
    .access-unsure { margin: 2px 0 0; font-size: var(--text-xs); color: var(--warn-ink); }

    /* Antes de viajar: à vista, logo abaixo do total. Obrigatório em âmbar, resolvido esmaece, prazo vencido em destaque. */
    .requirements { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block: 16px; padding: 18px 20px; border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-l); background: var(--surface); }
    .requirements-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
    .requirements-title { margin: 0; font-size: var(--text-l); letter-spacing: -0.01em; }
    .requirements-progress { font-size: var(--text-s); font-weight: 650; color: var(--ink-muted); }
    .requirements-progress.is-done { color: var(--good-ink); }
    .requirements-toggle { margin-inline-start: auto; min-block-size: 32px; padding: 4px 12px; font-size: var(--text-xs); }
    .requirements-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .requirements-lede, .requirements-note { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); max-inline-size: 78ch; }
    .requirements-country-name { margin: 4px 0 0; font-size: var(--text-m); }
    .requirements-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
    .requirement { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius-m); background: var(--surface-sunken); }
    .requirement.is-required { background: var(--warn-bg); }
    .requirement-icon { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 999px; background: var(--surface); color: var(--ink-muted); }
    .requirement.is-required .requirement-icon { color: var(--warn-ink); }
    .requirement.is-not_required .requirement-icon { color: var(--good-ink); }
    .requirement-body { display: grid; gap: 3px; min-inline-size: 0; }
    .requirement-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
    .requirement-status { font-size: var(--text-xs); }
    .requirement-status.is-required { background: var(--warn-ink); color: var(--surface); }
    .requirement-status.is-not_required { background: var(--good-bg); color: var(--good-ink); }
    .requirement-detail { margin: 0; font-size: var(--text-s); overflow-wrap: anywhere; }
    .requirement-deadline { margin: 0; font-size: var(--text-s); font-weight: 650; }
    .requirement-deadline.is-late { padding: 6px 10px; border-radius: var(--radius-s); background: var(--danger-bg); color: var(--danger); }
    .requirement-unsure { margin: 0; font-size: var(--text-xs); color: var(--warn-ink); }
    .requirement.is-required .requirement-unsure { text-decoration: underline dotted; }
    .requirement-link { justify-self: start; font-size: var(--text-s); font-weight: 600; color: var(--accent); }
    @media (max-width: 560px) {
        .requirement { grid-template-columns: 28px minmax(0, 1fr); }
    }

    .stop-thumb-icon { display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-soft); }
    .stop.is-searching .stop-thumb { animation: pulse 1.6s ease-in-out infinite; }

    .stop-body { display: grid; gap: 6px; min-inline-size: 0; align-content: start; }
    .stop-kind { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
    .stop-name { font-size: var(--text-l); line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
    .stop-text { color: var(--ink-muted); font-size: var(--text-s); overflow-wrap: anywhere; }

    .stop-text.is-clamped {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .stop-more { justify-self: start; min-block-size: 32px; font-size: var(--text-xs); }

    .stop-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 16px;
        margin-block-start: 6px;
    }

    .stop-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-variant-numeric: tabular-nums; }
    .stop-price-value { font-size: var(--text-l); }
    .stop-price-note { color: var(--ink-muted); font-size: var(--text-xs); }

    .badge {
        padding: 2px 10px;
        border-radius: 999px;
        color: var(--ink-muted);
        background: var(--surface-sunken);
        font-size: var(--text-xs);
        font-weight: 600;
        white-space: nowrap;
    }

    /* A fonte da hospedagem: selo neutro com o nome escrito — sem cor de marca alheia, que brigaria com a nossa. */
    .badge-source { justify-self: start; inline-size: fit-content; border: 1px solid var(--line-control); color: var(--ink); background: transparent; }
    .badge-good { color: var(--good-ink); background: var(--good-bg); }
    .badge-warn { color: var(--warn-ink); background: var(--warn-bg); }

    .stop-options { margin-block-start: 6px; border-block-start: 1px solid var(--line); }

    .stop-options-summary {
        min-block-size: 44px;
        padding-block: 12px 8px;
        color: var(--accent-ink);
        font-size: var(--text-s);
        font-weight: 650;
        cursor: pointer;
    }

    .options { display: grid; gap: 8px; padding-block: 4px 8px; }

    /* Grade, não flex com quebra: foto | nome | preço | Escolher, sempre na mesma linha. Com quebra
       livre o botão caía sozinho para a linha de baixo assim que a foto roubava 64 px. */
    .option {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px 14px;
        align-items: center;
        padding: 12px 14px;
        border-radius: var(--radius-s);
        background: var(--surface-sunken);
    }

    .option:has(.option-thumb) { grid-template-columns: 64px minmax(0, 1fr) auto auto; }

    .option-thumb { flex: none; inline-size: 64px; block-size: 64px; overflow: hidden; border-radius: 10px; background: var(--surface); }
    .option-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    /* Logo de companhia/locadora: inteiro e com respiro, nunca cortado como foto. */
    .option-thumb.is-brand { padding: 8px; }
    .option-thumb.is-brand img { object-fit: contain; }
    .option-text { display: grid; gap: 2px; min-inline-size: 0; }
    .option-name { font-size: var(--text-s); font-weight: 600; overflow-wrap: anywhere; }
    .option-facts { color: var(--ink-muted); font-size: var(--text-xs); }
    .option-money { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }

    /* A diferença diz em palavras ("a menos" / "a mais"); a cor só reforça. */
    .delta { color: var(--ink-muted); font-size: var(--text-xs); }
    .delta.is-cheaper { color: var(--good-ink); font-weight: 650; }

    .stop-tools { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: var(--text-xs); }
    .stop-tools .button { min-block-size: 36px; color: var(--ink-muted); }
    .stop-tools .button-link-danger:hover { color: var(--danger); }

    .stop-skeleton {
        display: grid;
        gap: 10px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--surface);
    }

    .days:has(.stop-skeleton) { gap: 16px; }

    .stop-skeleton span {
        block-size: 14px;
        border-radius: 7px;
        background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--line) 50%, var(--surface-sunken) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.6s linear infinite;
    }

    .stop-skeleton span:nth-child(1) { inline-size: 55%; block-size: 18px; }
    .stop-skeleton span:nth-child(2) { inline-size: 80%; }
    .stop-skeleton span:nth-child(3) { inline-size: 35%; }

    @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes shimmer { to { background-position: -200% 0; } }
    @keyframes pulse { 50% { box-shadow: 0 0 0 8px var(--accent-soft); } }

    @keyframes slide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(300%); }
    }

    @media (max-width: 720px) {
        .overview { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    }

    @media (max-width: 560px) {
        .stop { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
        .stop-thumb { inline-size: 64px; block-size: 64px; }
        .hop { margin-inline-start: 31px; }
        .stop-foot .button { flex: 1 1 auto; }
        /* No celular o menu de exportar vira folha no pé da tela: largura toda, ao alcance do polegar,
           e não depende de onde o botão caiu na linha. */
        .export { position: static; }
        .export-menu {
            position: fixed;
            inset-block-start: auto;
            inset-block-end: max(12px, env(safe-area-inset-bottom));
            inset-inline: 12px;
            inline-size: auto;
            box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.3);
        }
        .option { grid-template-columns: minmax(0, 1fr) auto; }
        .option:has(.option-thumb) { grid-template-columns: 48px minmax(0, 1fr) auto; }
        .option-thumb { inline-size: 48px; block-size: 48px; }
        .option > .button { grid-column: 1 / -1; }
        .split-row { grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto; gap: 8px; }
        .split-percent { display: none; }
        .day-nav { margin-inline: -4px; padding: 6px 4px; }
        .overview-discard { margin-inline-start: 0; }
        .planner-submit .button { inline-size: 100%; }
        .segmented { inline-size: 100%; }
    }

    @media (forced-colors: active) {
        .choice input:checked + .choice-body,
        .chip input:checked + span,
        .segmented-option input:checked + span { outline: 2px solid Highlight; }
    }
}