/* Aba Viagem (prova de 22/10/2026), no jeito do Places: capa em foto inteira, cartões e telas próprias. Prefixo vg-;
   linhas, miniaturas e telas vêm do lugares.css. */

/* barra de abas só com texto e um fio embaixo da aba aberta, como no Places */
.abas svg{display:none}
.abas button{gap:0;font:400 13px/1 var(--c);letter-spacing:0;text-transform:none;color:var(--cinza)}
.abas button span{padding:6px 0;border-bottom:1px solid transparent}
.abas button[aria-current="page"] span{color:var(--tinta);border-bottom-color:var(--tinta)}

.vg-capa{position:relative;height:calc(100svh - var(--nav) - 150px);min-height:420px;max-height:720px;overflow:hidden;background:var(--tinta)}
.vg-capa img{width:100%;height:100%;object-fit:cover;display:block}
.vg-capa:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6))}
.vg-capa>.k{position:absolute;z-index:1;top:calc(18px + env(safe-area-inset-top));left:20px;right:20px;color:#F4EFE5;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.vg-capa-t{position:absolute;z-index:1;left:20px;right:20px;bottom:22px;color:#F4EFE5}
.vg-capa h1{margin:0;font:400 54px/.98 var(--d);letter-spacing:-.015em}
.vg-capa-t p{margin:10px 0 0;font-size:15px;opacity:.92}
.vg-capa.sem-foto{background:var(--areia)}
.vg-capa.sem-foto:after{display:none}
.vg-capa.sem-foto>.k,.vg-capa.sem-foto .vg-capa-t{color:var(--tinta);text-shadow:none}

/* mosaico da abertura, como os cards de carrossel da Fa.Away: margem creme, fio fino, canto reto */
.vg-mos{display:grid;gap:6px;padding:16px 16px 0}
.vg-mos img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.vg-mos.n2{grid-template-columns:1.05fr 1fr;grid-template-rows:minmax(130px,1fr) auto;height:min(470px,calc(100svh - var(--nav) - 220px));min-height:400px}
.vg-mos.n2 .f0{grid-row:1 / span 2}
.vg-mos.n1{grid-template-columns:1fr 1fr;min-height:300px}  /* uma foto: metade esquerda, texto ao lado (operador, 22/10) */
.vg-mos-tx{display:flex;flex-direction:column;justify-content:flex-end;padding:14px 4px 4px 10px;min-width:0}
.vg-mos.n0 .vg-mos-tx{padding:18px 4px 0}
.vg-mos-ic{color:var(--grafite);margin-bottom:10px}
.vg-mos-ic svg{width:20px;height:20px;stroke-width:1.3}
.vg-mos-tx .k{letter-spacing:.24em;font-size:10px}
.vg-mos-tx h1{margin:8px 0 10px;font:400 34px/1.02 var(--d);letter-spacing:-.01em;overflow-wrap:anywhere}
.vg-mos-tx p{margin:0 0 4px;font-size:14px;line-height:1.4;color:var(--grafite)}

/* o próximo passo: cartão que sobe sobre a capa */
.vg-agora{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;width:calc(100% - 32px);
  margin:20px 16px 0;padding:16px 16px 16px 18px;border-radius:14px;background:#FBF8F2;box-shadow:0 10px 30px rgba(46,46,45,.14);text-align:left}
.vg-agora .k{grid-column:1}
.vg-agora b{grid-column:1;font:400 22px/1.15 var(--d);margin-top:6px}
.vg-agora>span:not(.k){grid-column:1;font-size:14px;color:var(--grafite)}
.vg-agora>svg{grid-column:2;grid-row:1 / span 3;color:var(--cinza)}

.vg-sec{padding:26px 0 0}
.vg-sec>.k{padding:0 20px;margin-bottom:12px}
.vg-cidades{display:flex;gap:12px;overflow-x:auto;padding:0 20px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.vg-cidades::-webkit-scrollbar{display:none}
.vg-cidade{position:relative;flex:none;width:72%;max-width:300px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--tinta);scroll-snap-align:start;text-align:left}
.vg-cidade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vg-cidade:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.vg-cidade-t{position:absolute;z-index:1;left:16px;right:16px;bottom:16px;color:#F4EFE5}
.vg-cidade-t .k{color:#F4EFE5;opacity:.85}
.vg-cidade-t b{display:block;font:400 30px/1.05 var(--d);margin:6px 0 4px}
.vg-cidade-t>span:last-child{font-size:13px;opacity:.9}
.vg-cidade.sem-foto{background:var(--areia)}
.vg-cidade.sem-foto:after{display:none}
.vg-cidade.sem-foto .vg-cidade-t,.vg-cidade.sem-foto .vg-cidade-t .k{color:var(--tinta)}
.vg-grupo{padding:0 20px}
.vg-grupo .lg-linha .lg-mini svg{width:24px;height:24px}

/* telas */
.vg-tela-topo{padding:calc(70px + env(safe-area-inset-top)) 20px 10px}
.vg-tela-topo .k{color:var(--cinza)}
.vg-tela-topo h1{margin:8px 0 6px;font:400 38px/1.05 var(--d);letter-spacing:-.01em}
.vg-tela-topo p{margin:0;color:var(--grafite);font-size:15px}
.vg-tela .lg-folha{padding-bottom:60px}
.vg-sub{padding:0 20px;margin:26px 0 4px}
.vg-data{display:flex;flex-direction:column;align-items:center;line-height:1}
.vg-data b{font:400 26px/1 var(--d);color:var(--tinta)}
.vg-data i{font:500 10px/1 var(--m);font-style:normal;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.vg-atvs{list-style:none;margin:8px 20px 0;padding:0}
.vg-atvs li{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:18px 0;border-top:1px solid var(--linha)}
.vg-h{font:500 13px/1.6 var(--m);color:var(--grafite)}
.vg-atvs h3{margin:0 0 6px;font:400 21px/1.2 var(--d)}
.vg-atvs p{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--grafite)}
.vg-imp{padding:10px 12px;background:var(--areia);border-radius:8px;color:var(--tinta)!important}
.vg-voos{display:flex;flex-direction:column;gap:12px;padding:8px 20px 0}
.vg-voo{padding:16px;border:1px solid var(--linha);border-radius:14px;background:#FBF8F2}
.vg-trecho{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:10px 0 2px}
.vg-trecho div:last-child{text-align:right}
.vg-trecho b{display:block;font:400 28px/1 var(--d)}
.vg-trecho span{font-size:14px;color:var(--grafite)}
.vg-trecho i{color:var(--cinza)}
.vg-trecho i svg{transform:rotate(90deg)}
.vg-voo p{margin:8px 0 0;font-size:13px;color:var(--grafite)}
.vg-tr{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--linha)}
.vg-tr b{display:block;font:400 17px/1.25 var(--d)}
.vg-tr span{font-size:13px;color:var(--grafite)}
.vg-pais{padding:6px 20px 0}
.vg-pais h2{margin:18px 0 0;font:400 26px/1.1 var(--d)}
.vg-carta{padding:6px 20px 0}
.vg-carta p{margin:0 0 14px;font:400 19px/1.5 var(--d)}
.vg-assina{font-style:italic;color:var(--grafite)}
.vg-pessoa{margin:12px 20px 0;padding:16px;border-radius:14px;background:var(--areia)}
.vg-pessoa b{display:block;margin:6px 0 2px;font:400 22px/1.2 var(--d)}
.vg-pessoa p{margin:0;font-size:14px;color:var(--grafite)}
.vg-bts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vg-bt{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--tinta);color:var(--creme);
  text-decoration:none;font:700 13px/1 var(--c)}
.vg-bt svg{width:16px;height:16px}

/* capa ao abrir: creme, marca no alto, nome da viagem no meio; sobe inteira no toque */
.vg-abre{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(40px + env(safe-area-inset-top)) 28px calc(34px + env(safe-area-inset-bottom));background:var(--creme);cursor:pointer;
  transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .55s;outline:none}
.vg-abre.sai{transform:translateY(-100%);opacity:.6}
.vg-abre-logo{width:118px;height:auto}
.vg-abre-meio{text-align:center}
.vg-abre-meio .k{letter-spacing:.3em;font-size:10px}
.vg-abre-meio h1{margin:18px 0 0;font:300 64px/.98 var(--d);letter-spacing:-.02em}
.vg-abre-fio{display:block;width:44px;height:1px;margin:22px auto;background:var(--tinta);opacity:.5}
.vg-abre-meio p{margin:0 0 6px;font-size:15px;color:var(--grafite)}
.vg-abre-pe{font:500 10px/1 var(--m);letter-spacing:.24em;text-transform:uppercase;color:var(--cinza);animation:vg-pisca 2.4s ease-in-out infinite}
@keyframes vg-pisca{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.vg-abre{transition:none}.vg-abre-pe{animation:none}}

/* movimento (sentir.js; segunda rodada, 22/10: "não quero as imagens alternando", o movimento é rápido, de quadro e de
   rolagem). Telas entram pela direita e a de baixo recua um pouco, como no iPhone; abas trocam em fusão curta; cartões
   sobem ao aparecer; o que se toca afunda de leve; foto parada que se ajusta no quadro conforme a rolagem */
.lg-camada{background:transparent}
.lg-tela{animation:sv-entra .32s cubic-bezier(.32,.72,0,1) both;box-shadow:-8px 0 30px rgba(46,46,45,.12)}
.lg-tela.sv-sai{animation:sv-sai .24s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.lg-tela.sv-volta{animation:sv-volta .32s cubic-bezier(.32,.72,0,1) both}
.lg-tela.sv-atras{animation:sv-atras .32s cubic-bezier(.32,.72,0,1) both}
@keyframes sv-entra{from{transform:translateX(100%)}to{transform:none}}
@keyframes sv-sai{to{transform:translateX(100%)}}
@keyframes sv-atras{to{transform:translateX(-22%)}}
@keyframes sv-volta{from{transform:translateX(-22%)}to{transform:none}}
#paineis{transition:transform .32s cubic-bezier(.32,.72,0,1)}
html.sv-fundo #paineis{transform:translateX(-22%)}
/* foto no quadro: maior que a moldura, a rolagem corre a foto lá dentro (sentir.js escreve o transform) */
.vg-q{display:block;position:relative;overflow:hidden;background:var(--areia)}
.vg-q img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
[data-quadro]:not([data-quadro="topo"]){transform:scale(1.14);will-change:transform}
[data-quadro="topo"]{will-change:transform}
/* foto no alto que sobe mais devagar: o recorte esconde só embaixo, para a foto poder esticar para cima ao puxar */
.lg-cabeca,.vg-cabeca{clip-path:inset(-60vh 0 0 0)}
/* fio da aba aberta corre entre as abas (sentir.js); o sublinhado parado fica só sem :has */
.sv-fio{position:absolute;left:0;height:1px;background:var(--tinta);pointer-events:none;
  transition:transform .32s cubic-bezier(.32,.72,0,1),width .32s cubic-bezier(.32,.72,0,1)}
.abas:has(.sv-fio) button[aria-current="page"] span{border-bottom-color:transparent}
.painel:not([hidden]){animation:sv-aba .3s ease-out both}
@keyframes sv-aba{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sv-sob{opacity:0;transform:translateY(14px)}
.sv-ok{transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.8,.2,1)}
:where(.vg-cidade,.vg-lugar,.vg-bolinha,.vg-agora,.lg-linha,.lg-pilula,.vg-bt,.lg-acoes a,.lg-cartao,.abas button){transition:transform .12s ease-out}
:where(.vg-cidade,.vg-lugar,.vg-bolinha,.vg-agora,.lg-linha,.lg-pilula,.vg-bt,.lg-acoes a,.lg-cartao,.abas button):active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .lg-tela,.lg-tela.sv-sai,.lg-tela.sv-volta,.lg-tela.sv-atras,.painel:not([hidden]){animation:none}.sv-sob{opacity:1;transform:none}
  #paineis,.sv-fio{transition:none}html.sv-fundo #paineis{transform:none}[data-quadro]{transform:none!important}}

/* história da cidade na aba Lugares: quatro linhas, "Ler mais" abre */
.lg-historia{margin:0 0 16px}
.lg-hist-tx{position:relative;max-height:6.2em;overflow:hidden;transition:max-height .45s ease}
.lg-hist-tx:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;background:linear-gradient(rgba(244,239,229,0),var(--creme));transition:opacity .3s}
.lg-historia.aberta .lg-hist-tx{max-height:80em}
.lg-historia.aberta .lg-hist-tx:after{opacity:0}
.lg-hist-tx p{margin:0 0 10px;font:400 17px/1.55 var(--d);color:var(--tinta)}
.lg-mais{margin-top:6px;font:700 13px/1 var(--c);text-decoration:underline;text-underline-offset:3px;color:var(--tinta)}

/* lista de lugares: a linha abre a ficha; os atalhos embaixo levam direto à rota, ao site, à reserva (como a Menton) */
.lg-item{border-bottom:1px solid var(--linha)}
.lg-item .lg-linha{border-bottom:0;padding-bottom:8px}
.lg-rapido{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 0 14px 78px}
.lg-rapido a{display:inline-flex;align-items:center;gap:5px;min-height:28px;font:700 12px/1 var(--c);color:var(--tinta);text-decoration:none}
.lg-rapido a svg{width:15px;height:15px;color:var(--grafite)}
.lg-bloco p a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.vg-chega{display:block;font:500 10px/1.4 var(--m);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .lg-hist-tx,.lg-hist-tx:after,.sv-ok{transition:none}
  :where(.vg-cidade,.vg-lugar,.vg-bolinha,.vg-agora,.lg-linha,.lg-pilula,.vg-bt,.lg-acoes a,.lg-cartao,.abas button):active{transform:none}}

/* fotos da prova: paradas no mosaico, nos cartões e nas miniaturas; crédito na ficha e na tela de créditos */
.vg-mos .vg-q{min-height:0}
.vg-cidade .vg-q{position:absolute;inset:0}
.lg-credito{position:absolute;right:8px;top:calc(14px + env(safe-area-inset-top));max-width:62%;margin:0;padding:3px 7px;border-radius:6px;
  background:rgba(46,46,45,.55);color:#F4EFE5;font:400 10px/1.3 var(--c);text-align:right;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vg-creditos{display:inline;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.vg-cred{list-style:none;margin:8px 20px 0;padding:0}
.vg-cred li{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linha);font-size:13px;color:var(--grafite)}
.vg-cred img{width:52px;height:40px;object-fit:cover;border-radius:4px;flex:none}
.vg-cred a{color:var(--tinta)}
/* .lg-linha span (texto da linha) vencia .lg-mini e tirava o ícone do centro da caixa; vale também no ar */
.lg-linha .lg-mini{display:grid;place-items:center}

/* ── tipografia (22/10, pedido dele: "tipografia constante, com vários estilos que combinam") ──────────────────────────
   Três famílias, cada uma com um papel:
   Fraunces reta: títulos, em seis degraus (64, 44, 36, 28, 22, 19).
   Fraunces itálica: o acento, logo abaixo de um título (datas, subtítulo de tela, tipo do lugar, assinatura).
   Lato: leitura em 17, informação em 15 e 14, detalhe em 13, ação em 12 negrito.
   Mono em caixa espaçada: rótulos, sempre 11.
   Apoio passa de #9E9D98 (contraste 2,4) para #6E6C67 (4,6 no creme); texto sobre areia usa o grafite. */
:root{--cinza:#6E6C67;--t1:64px;--t2:44px;--t3:36px;--t4:28px;--t5:22px;--t6:19px}
.acento,.vg-abre-meio p:first-of-type,.vg-mos-tx p:first-of-type,.vg-tela-topo p,.lg-onde,.lg-topo p,.vg-assina{
  font-family:var(--d);font-style:italic;font-weight:400;letter-spacing:0}

/* capa: rótulo, título, fio, data em itálico, família em rótulo */
.vg-abre-meio .k{font-size:11px}
.vg-abre-meio h1{font-size:var(--t1)}
.vg-abre-meio p:first-of-type{font-size:20px;font-weight:300;color:var(--tinta);margin-bottom:12px}
.vg-abre-meio p+p{font:500 11px/1.2 var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}

/* títulos */
.lg-capa h1{font-size:var(--t2)}
.vg-tela-topo h1,.lg-corpo h1,.vg-mos-tx h1{font-size:var(--t3);line-height:1.04}
.vg-cidade-t b,.vg-trecho b,.vg-data b,.vg-pais h2{font-size:var(--t4)}
.vg-agora b,.vg-atvs h3,.vg-pessoa b,.lg-cidades button,.lg-cartao b{font-size:var(--t5)}
.lg-linha b,.vg-carta p,.vg-tr b{font-size:var(--t6);color:var(--tinta)}

/* acentos em itálico */
.vg-mos-tx p:first-of-type{font-size:17px;color:var(--tinta);margin-bottom:6px}
.vg-mos-tx p+p{font:400 14px/1.4 var(--c);color:var(--grafite)}
.vg-tela-topo p,.lg-onde,.lg-topo p{font-size:17px;color:var(--grafite)}
.vg-assina{font-size:var(--t6)}

/* leitura e informação */
.lg-texto,.lg-hist-tx p{font:400 17px/1.6 var(--c);color:var(--tinta)}
.lg-linha .cat,.vg-voo p,.vg-tr span,.vg-chega{font:400 13px/1.4 var(--c);letter-spacing:0;text-transform:none;color:var(--cinza)}
.vg-chega{margin-top:3px}

/* rótulos: mono 11 */
.k,.vg-mos-tx .k,.vg-abre-pe{font-size:11px}
.vg-abre-pe{color:var(--cinza)}
.lg-capa.sem-foto .k,.vg-pessoa .k,.vg-cidade.sem-foto .k{color:var(--grafite)}
.vg-data i{font-size:11px}
.vg-carta .vg-assina{font-style:italic;color:var(--grafite)}

/* ── segunda rodada (22/10, depois do iPhone dele) ───────────────────────────────────────────────────────────────────
   duas cidades lado a lado, sem rolagem: com dois cartões a rolagem lateral parecia corte errado */
.vg-cidades.n1,.vg-cidades.n2{display:grid;overflow:visible;scroll-snap-type:none}
.vg-cidades.n2{grid-template-columns:1fr 1fr;gap:10px}
.vg-cidades.n1 .vg-cidade,.vg-cidades.n2 .vg-cidade{width:auto;max-width:none}
.vg-cidades.n1 .vg-cidade{aspect-ratio:16/11}
.vg-cidades.n2 .vg-cidade{aspect-ratio:3/4}
.vg-cidades.n2 .vg-cidade-t{left:12px;right:12px;bottom:12px}
.vg-cidades.n2 .vg-cidade-t b{font-size:var(--t5)}

/* fileira longa de lugares com foto: com muitos, a rolagem para o lado mostra a intenção; o terceiro cartão aparece cortado */
.vg-sec-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 20px}
.vg-sec-topo h2{margin:0 0 12px;padding:0}
.vg-sec-topo>span{font-size:13px;color:var(--cinza)}
.vg-fila{display:flex;gap:12px;overflow-x:auto;padding:0 20px 6px;scroll-snap-type:x proximity;scroll-padding:0 20px;scrollbar-width:none;
  overscroll-behavior-x:contain;align-items:flex-start}
.vg-fila::-webkit-scrollbar{display:none}
.vg-lugar{flex:none;width:42%;max-width:190px;padding:0;text-align:left;scroll-snap-align:start;font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.vg-lugar-f{aspect-ratio:4/5;border-radius:12px;margin-bottom:10px}
.vg-lugar .k{display:block;margin-bottom:4px;font-size:10px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-lugar b{display:block;font:400 var(--t6)/1.15 var(--d);color:var(--tinta)}

/* foto no alto das telas; o título desce para baixo dela */
.vg-cabeca{position:relative;height:40vh;min-height:250px;max-height:380px;background:var(--areia)}
.vg-cabeca img{width:100%;height:100%;object-fit:cover;display:block}
.vg-tela.com-foto .vg-tela-topo{padding-top:22px}
.com-retrato .vg-cabeca img{object-position:50% 16%}
.vg-avatar{display:block;width:72px;height:72px;margin-bottom:12px;border-radius:50%;object-fit:cover}

/* bolinha da Flavia: acima da barra de abas, no canto; some na capa, nas telas por cima, no PDF e na aba Fá */
.vg-bolinha{position:fixed;z-index:60;right:max(16px,calc(50vw - var(--larg)/2 + 16px));bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom));
  width:58px;height:58px;padding:0;border:2px solid var(--creme);border-radius:50%;overflow:hidden;background:var(--areia);cursor:pointer;
  box-shadow:0 6px 22px rgba(46,46,45,.3);transition:opacity .2s,transform .25s cubic-bezier(.32,.72,0,1);animation:vg-bol .45s cubic-bezier(.32,.72,0,1) .5s both}
.vg-bolinha img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes vg-bol{from{opacity:0;transform:scale(.4)}}
html.lg-preso .vg-bolinha,html.sv-capa .vg-bolinha,
#app:has(#abas :is([data-aba="livro"],[data-aba="fa"])[aria-current="page"]) .vg-bolinha{opacity:0;transform:scale(.6);pointer-events:none}

/* gaveta que sobe de baixo, com o fundo escurecendo; fecha no toque fora, puxando para baixo ou no voltar */
.lg-tela.vg-gaveta{max-width:none;background:rgba(28,28,27,.38);box-shadow:none;animation:vg-escurece .22s ease-out both}
.lg-tela.vg-gaveta.sv-sai{animation:vg-clareia .24s ease-in both}
.vg-gaveta-folha{position:absolute;left:0;right:0;bottom:0;max-width:var(--larg);margin:0 auto;padding:10px 22px calc(28px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;background:var(--creme);text-align:center;box-shadow:0 -10px 40px rgba(0,0,0,.18);
  animation:vg-sobe .36s cubic-bezier(.32,.72,0,1) both;touch-action:none}
.vg-gaveta.sv-sai .vg-gaveta-folha{animation:vg-desce .24s cubic-bezier(.4,0,1,1) both}
.vg-gaveta-pega{display:block;width:38px;height:5px;margin:0 auto 18px;border-radius:3px;background:var(--linha)}
.vg-gaveta-foto{display:block;width:88px;height:88px;margin:0 auto 12px;border-radius:50%;object-fit:cover}
.vg-gaveta-folha .k{display:block;color:var(--cinza)}
.vg-gaveta-folha b{display:block;margin:6px 0 2px;font:400 var(--t4)/1.1 var(--d)}
.vg-gaveta .vg-bts{justify-content:center;margin-top:18px}
@keyframes vg-escurece{from{background:rgba(28,28,27,0)}}
@keyframes vg-clareia{to{background:rgba(28,28,27,0)}}
@keyframes vg-sobe{from{transform:translateY(100%)}}
@keyframes vg-desce{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.vg-bolinha,.lg-tela.vg-gaveta,.vg-gaveta-folha,.vg-gaveta.sv-sai .vg-gaveta-folha{animation:none}}
/* o fim de cada aba sobe acima da bolinha, para ela não cobrir a última linha (revisão DeepSeek, 22/10) */
#app:has(.vg-bolinha) :is(#p-viagem,#p-lugares,#p-guia){padding-bottom:78px}
.vg-gaveta-folha.parada{animation:none}

/* título do mosaico (22/10, print dele: "Val Thoren / s" numa tela estreita): a palavra não se parte no meio; o corpo
   desce com a largura da tela (o hífen automático partia "Tho-rens", saiu) */
.vg-mos-tx h1{font-size:min(var(--t3),8.4vw);overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual}

/* Tempo, preparo e atalho: informação discreta e controles nativos, sem animação nova (22/10). */
.vg-tempo,.vg-mos-tx p.vg-tempo,.lg-topo p.vg-tempo{margin:10px 0;font:400 13px/1.45 var(--c);font-style:normal;color:var(--grafite)}
.vg-tempo>span{display:block}
.vg-tempo>a{display:inline-block;margin-top:3px;font:400 11px/1.4 var(--c);color:var(--cinza);text-underline-offset:3px}
.vg-tela .lg-folha>p.vg-tempo{margin:8px 20px}
.vg-prev-linha{padding:0 0 12px 78px}
.vg-agora{display:block;padding:0;overflow:hidden}
.vg-agora-dia{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;width:100%;padding:16px 18px;text-align:left}
.vg-agora-dia>.k,.vg-agora-dia>b,.vg-agora-dia>.vg-agora-tx{grid-column:1}
.vg-agora-dia>.vg-agora-tx{font:400 14px/1.45 var(--c);color:var(--grafite)}
.vg-agora-dia>svg{grid-column:2;grid-row:1 / span 3;color:var(--cinza)}
.vg-agora .vg-agora-rota{margin:0 18px 16px;min-height:44px;background:var(--tinta);color:var(--creme)}
.vg-agora[hidden],.vg-tempo[hidden],.vg-tempo:empty,.vg-agora-rota[hidden]{display:none!important}
.vg-preparo{padding:8px 20px 20px}
.vg-preparo h2{margin:8px 0;font:400 var(--t4)/1.1 var(--d)}
.vg-preparo [data-conta]{margin:0 0 20px;color:var(--grafite);font:400 14px/1.4 var(--c)}
.vg-preparo fieldset{margin:18px 0 0;padding:0;border:0;min-width:0}
.vg-preparo legend{padding:0 0 8px;font:500 11px/1.4 var(--m);color:var(--cinza)}
.vg-preparo label,.vg-extra{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--linha);font:400 15px/1.4 var(--c)}
.vg-preparo input[type=checkbox]{flex:none;width:22px;height:22px;margin:0;accent-color:var(--tinta)}
.vg-preparo input:checked+span{text-decoration:line-through;color:var(--cinza)}
.vg-extra{margin-top:18px}
.vg-extra input[type=text]{width:100%;min-width:0;min-height:48px;padding:8px 0;border:0;background:transparent;color:var(--tinta);font:400 16px/1.4 var(--c)}
.vg-inicio{position:fixed;inset:auto 0 0;width:min(100%,var(--larg));max-width:100%;max-height:85svh;margin:0 auto;padding:24px 22px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:18px 18px 0 0;background:var(--creme);color:var(--tinta)}
.vg-inicio::backdrop{background:rgba(28,28,27,.38)}
.vg-inicio h2{margin:0 0 16px;font:400 var(--t4)/1.1 var(--d)}
.vg-inicio p,.vg-inicio li{font:400 15px/1.5 var(--c)}
.vg-inicio ol{margin:0 0 14px;padding-left:20px}
.vg-inicio li+li{margin-top:10px}
.vg-inicio .bt{min-height:44px;margin-top:10px}
.vg-preparo input:focus-visible,.vg-inicio button:focus-visible,.vg-agora-dia:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}