/**
 * Passerio · landing — o telemóvel (moldura genérica + a app V2 lá dentro)
 *
 * Dono: agente telemóvel. Tudo vive sob .phone-box / .pp-phone e usa classes pp-*; nada vaza.
 *
 * Fonte ÚNICA: a V2 (ramo diag/observability-gate, cópia em scratchpad/v2). Medidas, cores e
 * copy lidas de src/v2/v2.css, o CSS dos dias do Roteiro (src/v2, pasta do Roteiro), src/components/primitives/*.css e
 * src/components/sheets/BottomSheet.css, e conferidas contra as capturas reais (v2shots/ecras-*).
 * Cores: tokens da landing (= tokens V2); os poucos literais são os da própria V2 (chão dos
 * bilhetes, gradiente de recurso, paleta do mapa em mapaEstilo.js).
 *
 * Tipografia V2: Plus Jakarta Sans (títulos, nomes, preços, botões, tabs, kickers, horas) +
 * DM Sans (corpo e meta). Zero mono. Caixa normal; MAIÚSCULAS só em tags de 10px com +0.04em.
 *
 * Movimento: a norma da V2 à letra (slide entre abas 0,3 s, DragSheet 0,4 s, BottomSheet
 * 280/240 ms, blocos 0,34 s y+6, barra 0,5 s, agulha 2,4 s linear). Sem bounce, sem parallax,
 * sem crossfade inventado. prefers-reduced-motion desliga tudo (estados finais).
 *
 * Geometria: o telemóvel desenha-se a 414×868 (ecrã 390×844 + aro 12) e escala por scale3d(k) no
 * .pp-corpo (o JS escreve-o; a espessura escala também); o espaço é reservado pelo aspect-ratio da
 * .phone-box (CLS zero). No ecrã: barra de estado 42 (sobreposta), rodapé 54 + 16 de área segura.
 *
 * Corpo 3D (regras: .claude/skills/passerio-device-3d): .pp-cena (perspective) › .pp-rig ×3
 * (scroll › entrada › rato, um transform cada) › .pp-corpo › frente (.pp-phone, z = 0) + aro de
 * tiras .pp-aro + .pp-traseira. Nos .pp-rig e no .pp-corpo NUNCA: overflow, opacity < 1, filter,
 * clip-path, mask, isolation, contain (achatam o 3D). A sombra e o botão de pausa vivem fora dos rigs.
 * Literais do aro/traseira: a tinta do aparelho (#100D0A → #2a241d) e os seus brilhos metálicos.
 */

/* ═══════════════════ caixa (a página dá a largura) ═══════════════════ */
.phone-box {
  position: relative;
  aspect-ratio: 414 / 868;
}

/* ═══════════════════ corpo 3D (a página pede poses por PasserioPhone.pose) ═══════════════════ */
.pp-cena {                      /* a câmara; a opacidade da entrada vive AQUI (fora do contexto 3D) */
  position: absolute; inset: 0;
  perspective: none;            /* o JS põe ~3× a altura mostrada só enquanto o telemóvel roda */
  perspective-origin: 50% 50%;
  pointer-events: none;
}
.pp-rig {                       /* um transform por camada: scroll › entrada › rato */
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.pp-corpo {
  position: absolute; left: 0; top: 0;
  width: 414px; height: 868px;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
}
.pp-cena.is-mexe .pp-rig { will-change: transform; }

/* aro: tiras tangentes ao contorno (4 rectas + 8 por canto; 6 no ecrã estreito), face voltada para fora.
   90deg = da frente (x = 0) para trás: chanfro claro, banda tinta, chanfro claro */
.pp-aro {
  position: absolute; left: 0; top: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(90deg,
    #8a7e70 0, #4a4036 1.6px, #241e18 3.4px, #1b1612 18%, #2e271f 42%, #2a241d 52%, var(--sand-900, #100D0A) 74%,
    #1f1a14 calc(100% - 3.4px), #40372e calc(100% - 1.6px), #6e6357 100%);
}
.pp-cena.is-repouso .pp-aro,     /* de frente está de perfil (invisível): sem camadas compostas à toa */
.pp-cena.is-fora .pp-aro,
.pp-cena.is-fora .pp-traseira { display: none; }
.pp-aro > b {                   /* a luz: a opacidade vem do JS (difusa + especular com o ângulo) */
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg,
    rgba(255, 244, 228, .95) 0, rgba(255, 244, 228, .55) 12%, rgba(255, 244, 228, .38) 50%,
    rgba(255, 244, 228, .30) 85%, rgba(255, 244, 228, .7) 100%);
}
.pp-aro--botao {
  background: linear-gradient(90deg, #4d443a 0, #2b241d 18%, #1f1a14 50%, #2b241d 82%, #4d443a 100%);
  border-radius: 1px;
}
.pp-tampa {                     /* a espessura do botão vista de frente */
  position: absolute; left: 0; top: 0;
  background: linear-gradient(90deg, #15110d, #3a3129);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* traseira: vidro fosco tinta com ilha de câmara; só existe no DOM visível acima de 60° */
.pp-traseira {
  position: absolute; inset: 0; border-radius: 56px;
  background:
    radial-gradient(120% 70% at 30% 10%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(160deg, #2a241d 0%, #17130f 55%, var(--sand-900, #100D0A) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.pp-traseira[hidden] { display: none; }
.pp-camara {                    /* genérica: uma pílula vertical com duas lentes (nada de quadrado com 3 lentes) */
  position: absolute; left: 30px; top: 30px; width: 76px; height: 148px; border-radius: 38px;
  background: linear-gradient(150deg, #2e2720, #15110d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05);
}
.pp-camara i {
  position: absolute; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #3a4a5c 0, #0b0e12 38%, #050505 60%, #221c16 64%, #0e0b09 100%);
  box-shadow: 0 0 0 3px #1c1712, 0 0 0 4px rgba(255, 255, 255, .06);
}
.pp-camara i:nth-child(1) { left: 11px; top: 11px; }
.pp-camara i:nth-child(2) { left: 11px; top: 83px; }
/* sombra de contacto: 2D, fora dos rigs, só gradientes (sem filter: blur) e mexida só por transform/opacity */
.pp-sombra { position: absolute; pointer-events: none; }
.pp-cena.is-mexe .pp-sombra { will-change: transform, opacity; }
.pp-sombra--halo {
  left: -12%; right: -12%; top: 8%; bottom: -8%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sand-900) 20%, transparent), color-mix(in srgb, var(--sand-900) 9%, transparent) 55%, transparent);
}
.pp-sombra--chao {
  left: 6%; right: 6%; top: 95.5%; height: 8%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sand-900) 38%, transparent), color-mix(in srgb, var(--sand-900) 16%, transparent) 50%, transparent);
}

/* ═══════════════════ moldura (genérica, sem marca) ═══════════════════ */
.pp-phone {
  --pp-diz: var(--font-serif, 'Plus Jakarta Sans', system-ui, sans-serif);
  --pp-explica: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  --pp-ease: cubic-bezier(.32, .72, 0, 1);          /* DragSheet / slide da V2 */
  --pp-nav: 70px;                                   /* rodapé 54 + área segura 16 */
  --pp-luz-06: color-mix(in srgb, #fff 6%, transparent);
  --pp-luz-10: color-mix(in srgb, #fff 10%, transparent);
  --pp-luz-60: color-mix(in srgb, #fff 60%, transparent);

  position: absolute; left: 0; top: 0;
  width: 414px; height: 868px;
  margin: 0; padding: 0; box-sizing: border-box;
  /* a FACE DA FRENTE do corpo 3D: plano z = 0 (nítida em repouso), costas escondidas */
  transform: translateZ(0);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 56px;
  background: linear-gradient(145deg, var(--sand-800) 0%, var(--sand-900) 42%, var(--sand-900) 70%, var(--sand-800) 100%);
  /* só o anel de metal visto de frente; a sombra projectada é a .pp-sombra (rodava com o plano) */
  box-shadow:
    inset 0 0 0 1.5px var(--pp-luz-10),
    inset 0 0 0 4px var(--sand-900);
  /* isolar da página */
  font-family: var(--pp-explica);
  font-size: 14px; font-weight: 400; font-style: normal;
  line-height: normal; letter-spacing: normal;
  text-align: left; text-transform: none;
  color: var(--sand-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.pp-phone *,
.pp-phone *::before,
.pp-phone *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pp-phone svg { display: block; flex-shrink: 0; overflow: visible; }

/* ecrã: raio 44 = 56 − 12 */
.pp-phone .pp-ecra {
  position: absolute; left: 12px; top: 12px;
  width: 390px; height: 844px;
  border-radius: 44px; overflow: hidden;
  clip-path: inset(0 round 44px);
  background: var(--sand-50);
  isolation: isolate;
}
.pp-phone .pp-furo {
  position: absolute; top: 15px; left: 50%;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--sand-900);
  box-shadow: inset 0 0 0 2px var(--sand-800), 0 0 0 1px var(--pp-luz-06);
  z-index: 96;
}
.pp-phone .pp-casa {
  position: absolute; bottom: 7px; left: 50%;
  width: 120px; height: 4px; margin-left: -60px; border-radius: 2px;
  background: var(--sand-900); z-index: 95;
}
.pp-phone .pp-vidro {
  position: absolute; left: 12px; top: 12px; width: 390px; height: 844px; border-radius: 44px;
  background: linear-gradient(115deg, var(--pp-luz-10) 0%, var(--pp-luz-06) 16%, transparent 38%);
  overflow: hidden;           /* é uma folha plana dentro da frente: aqui o recorte não achata nada */
  z-index: 97;
}
/* reflexo dinâmico: uma faixa de luz que atravessa o vidro com o ângulo (só transform/opacity, JS);
   de frente fica a 0, para o ecrã em repouso ser igual ao da moldura 2D */
.pp-phone .pp-vidro > i {
  position: absolute; left: 0; top: -30%;
  width: 46%; height: 160%;
  background: linear-gradient(90deg,
    transparent 0%, color-mix(in srgb, #fff 5%, transparent) 30%, color-mix(in srgb, #fff 15%, transparent) 48%,
    color-mix(in srgb, #fff 19%, transparent) 52%, color-mix(in srgb, #fff 6%, transparent) 68%, transparent 100%);
  opacity: 0;
}
.pp-cena.is-mexe .pp-vidro > i { will-change: transform, opacity; }
/* barra de estado «10:08» — sobreposta; clareia com o fundo escuro da folha de exportar */
.pp-phone .pp-estado {
  position: absolute; left: 0; right: 0; top: 0; height: 42px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px 0 32px;
  color: var(--sand-900); z-index: 90;
  transition: color .2s ease;
}
.pp-phone[data-exportar="1"] .pp-estado,
.pp-phone[data-folha="1"] .pp-estado { color: var(--sand-50); }
.pp-phone .pp-hora { font-family: var(--pp-diz); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pp-phone .pp-icones { display: flex; align-items: center; gap: 6px; }

.pp-phone .pp-app { position: absolute; inset: 0; overflow: hidden; }

/* ═══════════════════ primitivas (DS V2) ═══════════════════ */
.pp-phone .pp-d { font-family: var(--pp-diz); }
.pp-phone .pp-tn { font-variant-numeric: tabular-nums; }
.pp-phone .pp-i { display: block; }

/* Btn · 12/600 caixa normal (Btn.css) */
.pp-phone .pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 12px;
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; letter-spacing: 0;
  white-space: nowrap; line-height: 1;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.pp-phone .pp-btn--lg { height: 48px; padding: 0 26px; }
.pp-phone .pp-btn--md { height: 40px; padding: 0 20px; }
.pp-phone .pp-btn--sm { height: 32px; padding: 0 14px; }
.pp-phone .pp-btn--xs { height: 26px; padding: 0 11px; }
.pp-phone .pp-btn--full { display: flex; width: 100%; }
.pp-phone .pp-btn--pri { background: var(--clay); border-color: var(--clay); color: var(--sand-50); }
.pp-phone .pp-btn--sec { background: var(--card); border-color: var(--btn-border-neutral); color: var(--sand-600); }
.pp-phone .pp-btn--des { background: var(--card); border: 1.5px dashed var(--clay-border); color: var(--clay-text); }
.pp-phone .pp-btn--off,
.pp-phone .pp-btn--pri.is-off { background: var(--btn-off-bg); border-color: var(--btn-off-border); color: var(--btn-off-text); }
/* o toque da demo: na V2 o press muda só a cor (v2.css:2809; DS: hover/press = cor, fundo, borda) */
.pp-phone .pp-btn--pri.is-premido,
.pp-phone .pp-bola.is-premido { background: var(--clay-press); border-color: var(--clay-press); }
.pp-phone .pp-btn--sec.is-premido,
.pp-phone .pp-ib.is-premido,
.pp-phone .pp-voltar.is-premido { background: var(--btn-hover-bg-neutral); }
.pp-phone .pp-enviar.is-premido { background: var(--sand-800); }

/* IconBtn · 40 / 32 (IconBtn.css) */
.pp-phone .pp-ib {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid transparent; background: var(--card);
}
.pp-phone .pp-ib--sm { width: 32px; height: 32px; }
.pp-phone .pp-ib--edit { border-color: var(--btn-border-neutral); color: var(--sand-600); }
.pp-phone .pp-ib--del { border-color: var(--clay-border); color: var(--clay-text); }
.pp-phone .pp-ib--mapa { border-color: var(--iconbtn-mapa-border); color: var(--ink); }
.pp-phone .pp-ib--peso { background: var(--sand-900); border-color: var(--sand-900); color: var(--sand-50); }

/* Tabs · segment (rail + aba branca) */
.pp-phone .pp-seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--tabs-rail-bg); border: 1px solid var(--tabs-rail-border); border-radius: 12px;
}
.pp-phone .pp-seg-t {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 9px;
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--tabs-text-inactive); white-space: nowrap;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}
.pp-phone .pp-seg-t.is-on {
  background: var(--card); border-color: var(--sand-200);
  box-shadow: 0 1px 3px rgba(16, 13, 10, .10); color: var(--sand-900);
}
/* Tabs · card (os filtros: Todos · Dia 1…, Tudo 3…) */
.pp-phone .pp-chips { display: flex; gap: 8px; }
.pp-phone .pp-chips--wrap { flex-wrap: wrap; }
.pp-phone .pp-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 15px; border: 1px solid var(--btn-border-neutral); border-radius: 12px;
  background: var(--card); color: var(--sand-600);
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.pp-phone .pp-chip.is-on { background: var(--sand-900); border-color: var(--sand-900); color: var(--sand-50); }
.pp-phone .pp-chip-n {
  font-size: 10px; font-weight: 600; border-radius: 99px; padding: 1px 6px;
  background: var(--btn-ghost-hover-bg); color: var(--tabs-text-inactive); font-variant-numeric: tabular-nums;
}
.pp-phone .pp-chip.is-on .pp-chip-n { background: rgba(251, 249, 245, .14); color: var(--decor); }

/* Tag estática · 10/600 maiúsculas +0.04em */
.pp-phone .pp-tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--pp-diz); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; padding: 4px 7px; white-space: nowrap; line-height: 1.2;
}
.pp-phone .pp-tag--ochre { color: var(--ochre-text); background: var(--ochre-tag-bg); }
.pp-phone .pp-tag--moss { color: var(--moss-deep); background: var(--moss-bg); }

/* Agulha · DS §04/§06: aro sand-600 1.6px, agulha clay 35°, a rodar 2.4 s linear */
.pp-phone .pp-agulha {
  position: relative; display: inline-block; flex-shrink: 0;
  border: 1.6px solid currentColor; border-radius: 50%; color: var(--sand-600);
}
.pp-phone .pp-agulha-rot { position: absolute; inset: 0; }
.pp-phone .pp-ag-16 { width: 16px; height: 16px; }
.pp-phone .pp-ag-16 .pp-agulha-n { height: 5.6px; }
.pp-phone .pp-ag-24 { width: 24px; height: 24px; }
.pp-phone .pp-ag-24 .pp-agulha-n { height: 8.4px; }
.pp-phone .pp-agulha-rot.is-gira { animation: pp-spin 2.4s linear infinite; }
.pp-phone .pp-agulha-n {
  position: absolute; top: 50%; left: 50%; width: 1.6px;
  background: var(--clay);
  transform: translate(-50%, -100%) rotate(35deg); transform-origin: bottom;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ═══════════════════ HOME · «Minhas viagens» ═══════════════════ */
.pp-phone .pp-vista { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; }
.pp-phone[data-vista="home"] .pp-home,
.pp-phone[data-vista="ws"] .pp-ws { visibility: visible; }
.pp-phone .pp-home { background: var(--sand-50); }
.pp-phone .pp-home-topo {
  flex: none; display: flex; align-items: center;
  padding: 58px 20px 16px;                 /* 42 de barra de estado + 16 */
  background: var(--card); border-bottom: 1px solid var(--hairline);
}
.pp-phone .pp-logo { height: 30px; width: auto; }
.pp-phone .pp-home-corpo { flex: 1; padding: 20px 16px 24px; }
.pp-phone .pp-home-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pp-phone .pp-home-tit { font-family: var(--pp-diz); font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: -.012em; color: var(--sand-900); }
.pp-phone .pp-home-lista { display: flex; flex-direction: column; gap: 12px; }
.pp-phone .pp-hc {
  padding: 16px; background: var(--card);
  border: 1px solid var(--sand-200); border-radius: 16px; box-shadow: var(--shadow-solto);
  transition: border-color 120ms ease-out, opacity 120ms ease-out;
}
.pp-phone .pp-hc.is-activa { border-color: var(--clay-border); }
.pp-phone .pp-hc-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 18px; }
.pp-phone .pp-selo {
  font-family: var(--pp-diz); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px; line-height: 1.2;
}
.pp-phone .pp-selo--curso { background: var(--moss-bg); color: var(--moss-deep); }
.pp-phone .pp-selo--vazia { color: var(--sand-500); border: 1px solid var(--hairline); }
.pp-phone .pp-selo--rascunho { background: var(--sand-100); color: var(--sand-700); }
.pp-phone .pp-hc-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.pp-phone .pp-hc-espera { margin-left: auto; display: inline-flex; opacity: 0; }
.pp-phone .pp-hc-nome { font-family: var(--pp-diz); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--sand-900); margin-bottom: 4px; }
.pp-phone .pp-hc-linha { font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--sand-700); }
.pp-phone .pp-hc-guard { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--sand-500); }
/* a abrir: contorno clay, agulha no canto, os outros em pausa (.5) */
.pp-phone .pp-home.is-a-abrir .pp-hc { opacity: .5; }
.pp-phone .pp-home.is-a-abrir .pp-hc.is-alvo { opacity: 1; border-color: var(--clay-border); }
.pp-phone .pp-home.is-a-abrir .pp-hc.is-alvo .pp-hc-espera { opacity: 1; transition: opacity 1ms linear 450ms; }

/* ═══════════════════ WORKSPACE · casco ═══════════════════ */
.pp-phone .pp-ws { background: var(--sand-50); }
.pp-phone .pp-ws-topo {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; gap: 8px;
  height: 115px; padding: 58px 20px 16px;   /* 42 + 16 · alto 73 como na V2 */
  background: var(--card); border-bottom: 1px solid var(--hairline);
}
.pp-phone .pp-voltar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -8px; color: var(--sand-800); border-radius: 50%; flex: none; }
.pp-phone .pp-ws-tit { flex: 1; min-width: 0; font-family: var(--pp-diz); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--sand-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-phone .pp-ws-acoes { display: flex; align-items: center; gap: 8px; }
.pp-phone .pp-partilhar { display: none; }
.pp-phone[data-aba="orcamento"] .pp-partilhar { display: inline-flex; }

/* as quatro superfícies; só a actual se vê (e a que sai, durante o slide) */
.pp-phone .pp-sups { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pp-phone .pp-sup { position: absolute; inset: 0; visibility: hidden; background: var(--sand-50); }
.pp-phone .pp-sup.is-atual,
.pp-phone .pp-sup.is-sai { visibility: inherit; }   /* inherit, não visible: um filho visible fura o pai escondido */

/* ── rodapé TripBottomNav · pele branca com o berço, 4 destinos + a bola ── */
.pp-phone .pp-nav {
  position: relative; z-index: 75; flex: none;
  height: var(--pp-nav); padding: 0 4px 16px;
  display: flex; align-items: stretch;
}
.pp-phone .pp-nav-pele {
  position: absolute; left: 0; top: 0; width: 390px; height: var(--pp-nav); z-index: -1;
  filter: drop-shadow(0 -14px 34px rgba(16, 13, 10, .26)) drop-shadow(0 -1px 2px rgba(16, 13, 10, .06));
}
.pp-phone .pp-nav-pele path { fill: var(--card); }
.pp-phone .pp-nav-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 2px 8px; color: var(--sand-600);
  transition: color .16s ease;
}
.pp-phone .pp-nav-btn svg { stroke-width: 2; }
.pp-phone .pp-nav-btn.is-on { color: var(--clay-text); }
.pp-phone .pp-nav-btn.is-on svg { stroke-width: 2.2; }
.pp-phone .pp-nav-ico { position: relative; display: flex; }
.pp-phone .pp-nav-rot { font-family: var(--pp-explica); font-size: 11px; font-weight: 500; line-height: 13px; }
.pp-phone .pp-nav-btn.is-on .pp-nav-rot { font-weight: 600; }
.pp-phone .pp-nav-conta {
  position: absolute; top: -4px; right: -9px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-diz); font-size: 10px; font-weight: 600; line-height: 1; color: #fff;
  background: var(--clay); border-radius: 8px; box-shadow: 0 0 0 2px var(--card);
  transition: opacity .16s ease, transform .16s ease;
}
.pp-phone .pp-nav-conta.is-fora { opacity: 0; transform: scale(.6); }
/* o ponto «há algo por gerar», só no Roteiro (TripBottomNav; 7 px clay) */
.pp-phone .pp-nav-ponto {
  position: absolute; top: -1px; right: -4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay); box-shadow: 0 0 0 2px var(--card); opacity: 0;
}
.pp-phone .pp-nav-ponto.is-on { opacity: 1; }
.pp-phone .pp-nav-slot { flex: none; display: flex; align-items: center; justify-content: center; }
.pp-phone .pp-bola {
  position: relative; top: -13px;
  width: 52px; height: 52px; margin: 0 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clay); color: #fff; border-radius: 50%;
  box-shadow: 0 10px 22px -8px rgba(216, 73, 44, .55), 0 0 0 6px var(--sand-50);
}

/* ═══════════════════ CONVERSA · a DragSheet por cima, pára em cima do rodapé ═══════════════════ */
.pp-phone .pp-conv {
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--pp-nav); z-index: 70;
  overflow: hidden; visibility: hidden;
  transition: visibility 0s linear .4s;
}
.pp-phone .pp-conv-scrim { position: absolute; inset: 0; background: rgba(16, 13, 10, .28); opacity: 0; transition: opacity .28s ease; }
.pp-phone .pp-conv-folha {
  position: absolute; left: 0; right: 0; top: 50px; bottom: 0;
  display: flex; flex-direction: column;
  background: var(--card); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px -18px rgba(16, 13, 10, .5);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .4s var(--pp-ease);
}
.pp-phone.is-conv .pp-conv { visibility: inherit; transition-delay: 0s; }
.pp-phone.is-conv .pp-conv-scrim { opacity: 1; }
.pp-phone.is-conv .pp-conv-folha { transform: none; }

.pp-phone .pp-pega { flex: none; height: 34px; display: flex; justify-content: center; padding-top: 14px; }
.pp-phone .pp-pega::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: #D4C8B0; }
.pp-phone .pp-conv-cab {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--hairline);
}
.pp-phone .pp-kicker { font-family: var(--pp-diz); font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--sand-700); }
.pp-phone .pp-kicker--clay { color: var(--clay-text); }

/* a fila das decisões (pele «facto») */
.pp-phone .pp-dec { flex: none; display: none; overflow: hidden; background: var(--card); border-bottom: 1px solid var(--hairline-alt); }
.pp-phone[data-conversa="2"] .pp-dec { display: block; }
.pp-phone .pp-dec-fila { display: flex; align-items: center; gap: 8px; width: max-content; padding: 10px 20px; }
.pp-phone .pp-dec-chip {
  flex: none; display: inline-flex; align-items: center; height: 30px;
  border-radius: 999px; background: var(--ink-bg); border: 1px solid var(--ink-border);
}
.pp-phone .pp-dec-rot { padding: 0 12px; font-family: var(--pp-explica); font-size: 12px; font-weight: 600; line-height: 1; color: var(--ink-text); white-space: nowrap; }
.pp-phone .pp-dec-x { display: grid; place-items: center; width: 24px; height: 24px; margin-right: 3px; color: var(--ink-500); }

.pp-phone .pp-conversa { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 20px; }
.pp-phone .pp-comeco { margin-top: 24px; display: none; }
.pp-phone[data-conversa="1"] .pp-comeco { display: block; }
.pp-phone .pp-comeco .pp-kicker { margin-bottom: 5px; }
.pp-phone .pp-comeco-tit { font-family: var(--pp-diz); font-weight: 600; font-size: 26px; letter-spacing: -.02em; line-height: 1.08; color: var(--sand-900); }
.pp-phone .pp-comeco-sub { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--sand-700); }
.pp-phone .pp-fluxo { display: flex; flex-direction: column; gap: 10px; }
.pp-phone .pp-bolha { max-width: 84%; padding: 12px 14px; border-radius: 15px; font-size: 13px; line-height: 1.5; }
.pp-phone .pp-bolha--eu { align-self: flex-end; background: var(--sand-900); color: var(--sand-50); border-top-right-radius: 5px; }
.pp-phone .pp-linha-bot { display: flex; align-items: flex-start; gap: 8px; }
.pp-phone .pp-bolha--bot { background: var(--card); border: 1px solid var(--sand-200); border-top-left-radius: 5px; color: #302A22; }
.pp-phone .pp-bolha--bot b { font-weight: 600; color: var(--sand-800); }
.pp-phone .pp-pensa { color: var(--sand-700); font-style: italic; }
.pp-phone .pp-avatar { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--sand-200); border-radius: 999px; background: var(--card); }
.pp-phone .pp-m { display: none; }
.pp-phone .pp-m.is-on { display: flex; }
.pp-phone .pp-m.pp-bolha--eu.is-on { display: block; }

/* barra do plano */
.pp-phone .pp-barra-plano {
  flex: none; display: none; align-items: center; gap: 12px;
  margin: 0 16px 16px; padding: 12px;
  background: var(--card); border: 1px solid var(--sand-200); border-radius: 16px; box-shadow: var(--shadow-solto);
}
.pp-phone[data-conversa="2"] .pp-barra-plano { display: flex; }
.pp-phone .pp-thumbs { display: flex; flex: none; }
.pp-phone .pp-thumbs .pp-thumb + .pp-thumb { margin-left: -10px; }
.pp-phone .pp-thumb { position: relative; overflow: hidden; width: 26px; height: 34px; border-radius: 5px; border: 1.5px solid var(--card); background: var(--sand-200) center / cover no-repeat; flex: none; box-shadow: 0 0 0 1px var(--sand-200); }
.pp-phone .pp-barra-txt { flex: 1; min-width: 0; }
.pp-phone .pp-barra-tit { display: block; font-family: var(--pp-diz); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--sand-900); line-height: 1.25; }
.pp-phone .pp-barra-sub { font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--sand-700); }

/* entrada */
.pp-phone .pp-entrada {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 12px 14px 35px; border-top: 1px solid var(--hairline); background: #fff;
}
.pp-phone .pp-campo {
  position: relative; flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--btn-border-neutral); border-radius: 12px; background: var(--card);
  font-size: 13px; color: var(--sand-800); white-space: nowrap;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.pp-phone .pp-campo.com-foco { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.pp-phone .pp-campo-clip { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
.pp-phone .pp-campo-in { display: inline-flex; align-items: center; flex: none; }
.pp-phone .pp-ph { color: var(--sand-400); }
.pp-phone .pp-campo.tem-texto .pp-ph { display: none; }
.pp-phone .pp-cursor { display: none; width: 1.5px; height: 17px; margin-left: 1px; background: var(--clay); animation: pp-pisca 1s steps(1) infinite; }
.pp-phone .pp-campo.com-foco .pp-cursor { display: block; }
.pp-phone .pp-campo.com-foco:not(.tem-texto) .pp-ph { margin-left: -2px; }
@keyframes pp-pisca { 50% { opacity: 0; } }
.pp-phone .pp-enviar {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; background: var(--btn-off-bg); color: var(--btn-off-text);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.pp-phone .pp-enviar.is-on { background: var(--sand-900); color: var(--sand-50); }

/* ═══════════════════ VIAGEM · mapa-herói + fólio Onde·Quando·Quem·Quanto + «Gerar roteiro» ═══════════════════ */
.pp-phone .pp-vg-palco { position: absolute; left: 0; right: 0; top: 0; bottom: 93px; overflow: hidden; }
.pp-phone .pp-vg-mapa { position: absolute; left: 0; top: 0; width: 390px; height: 232px; background: var(--sand-50); }
.pp-phone .pp-vg-mapa > svg { position: absolute; inset: 0; }
.pp-phone .pp-escala {
  position: absolute; height: 4px;
  border: 2px solid var(--sand-900); border-top: 0;
}
.pp-phone .pp-escala span {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-family: var(--pp-diz); font-size: 10px; font-weight: 600; color: var(--sand-900); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}
.pp-phone .pp-vg-mapa .pp-escala { left: 16px; top: 184px; width: 42px; }   /* 1,000 km à escala do desenho (a 40,7° N) */
/* o fólio abre no scroll máximo (V2Plano.jsx:563-570): com dois destinos sobe acima da tira de 76 px e o Onde cabe
   inteiro, com «Keep the number of nights fixed» à vista (v2.css:1055-1059, 1092-1104) */
.pp-phone .pp-vg-folio {
  position: absolute; left: 0; right: 0; top: 24px; bottom: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 6px 16px 0; background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px -16px rgba(16, 13, 10, .45);
}
.pp-phone .pp-vg-pega { flex: none; height: 22px; margin: -6px 0; display: flex; align-items: center; justify-content: center; }
.pp-phone .pp-vg-pega::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: #D4C8B0; }
.pp-phone .pp-vg-abas { flex: none; display: flex; border-bottom: 1px solid var(--tabs-rail-border); padding-top: 4px; }
.pp-phone .pp-vg-aba {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 2px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; color: var(--sand-600); white-space: nowrap;
}
.pp-phone .pp-vg-aba.is-on { border-bottom-color: var(--clay); color: var(--sand-900); }
.pp-phone .pp-ok { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--moss); color: var(--card); flex: none; }
.pp-phone .pp-vg-onde { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; }
.pp-phone .pp-od { position: relative; }
.pp-phone .pp-od-pega { position: absolute; left: 9px; top: 50%; margin-top: -6px; display: flex; color: var(--sand-400); }
.pp-phone .pp-vg-fixo { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.pp-phone .pp-vg-fixo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-phone .pp-vg-fixo-tit { font-family: var(--pp-diz); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--sand-800); }
.pp-phone .pp-vg-fixo-sub { font-size: 11px; line-height: 1.4; color: var(--sand-700); }
.pp-phone .pp-toggle--off { background: var(--sand-200); }
.pp-phone .pp-toggle--off::after { right: auto; left: 3px; }
.pp-phone .pp-vg-acoes { flex: none; display: flex; gap: 8px; margin: 0 -16px; padding: 12px 16px 14px; background: #fff; }
.pp-phone .pp-vg-acoes .pp-btn--sec { flex: 1 1 auto; }
.pp-phone .is-nova .pp-vg-acoes { display: none; }
.pp-phone .pp-vg-seg { margin-bottom: 0; }
.pp-phone .pp-od {
  display: flex; align-items: center; gap: 14px; min-height: 55px; padding: 10px 12px 10px 25px;
  background: var(--card); border: 1px solid var(--sand-200); border-radius: 16px;
}
.pp-phone .pp-od-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.pp-phone .pp-od-tile--moss { background: var(--moss-bg); color: var(--moss); }
.pp-phone .pp-od-tile--clay { background: var(--clay-bg); color: var(--clay); }
.pp-phone .pp-od-txt { flex: 1; min-width: 0; }
.pp-phone .pp-od-nome { display: block; font-family: var(--pp-diz); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--sand-900); }
.pp-phone .pp-od-sub { display: block; font-size: 12px; line-height: 1.4; color: var(--sand-600); }
.pp-phone .pp-od-sub--moss { font-family: var(--pp-diz); font-weight: 600; color: var(--moss); font-size: 11px; }
.pp-phone .pp-od-volta { font-family: var(--pp-diz); font-size: 12px; font-weight: 600; color: var(--moss); }
.pp-phone .pp-stepper { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border: 1px solid var(--sand-200); border-radius: 999px; flex: none; }
.pp-phone .pp-step { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.pp-phone .pp-step--menos { border: 1px solid var(--btn-border-neutral); color: var(--sand-800); }
.pp-phone .pp-step--mais { background: var(--clay); color: var(--card); }
.pp-phone .pp-step-n { font-family: var(--pp-diz); font-size: 15px; font-weight: 600; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-step-u { font-size: 11px; color: var(--sand-700); margin-right: 4px; }
.pp-phone .pp-vg-vazia { display: none; }
.pp-phone .pp-od-mais { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--clay-bg); border: 1px solid var(--clay-tile-border); color: var(--clay-text); }
.pp-phone .pp-vg-add { margin-top: 20px; }
/* a viagem nova (ecras-nova-viagem.png): sem mapa desenhado, os vistos a cinzento, o CTA desligado */
.pp-phone .is-nova .pp-vg-onde[data-pp="onde"] { display: none; }
.pp-phone .is-nova .pp-vg-vazia { display: flex; }
.pp-phone .is-nova .pp-vg-mapa { background: var(--sand-100); }
.pp-phone .is-nova .pp-vg-mapa > * { visibility: hidden; }
.pp-phone .is-nova .pp-ok { background: var(--btn-off-text); }
.pp-phone .pp-vg-rodape {
  position: absolute; left: 0; right: 0; bottom: 0; height: 93px;
  padding: 16px 16px 29px; background: var(--sand-50); border-top: 1px solid var(--sand-200);
}

/* o que muda quando marcas «Já comprei» (a superfície ganha .is-comprado) */
.pp-phone .pp-sup:not(.is-comprado) .pp-so-1,
.pp-phone .pp-sup.is-comprado .pp-so-0 { display: none !important; }

/* ═══════════════════ ROTEIRO · lentes Construir · Mapa · Ler ═══════════════════ */
.pp-phone .pp-lentes { position: absolute; left: 0; right: 0; top: 0; height: 66px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--hairline); z-index: 2; }
.pp-phone .pp-lente { position: absolute; left: 0; right: 0; top: 66px; bottom: 0; visibility: hidden; }
.pp-phone .pp-lente.is-on { visibility: inherit; }
.pp-phone .pp-rolo { position: absolute; inset: 0; overflow: hidden; }

/* os dias do Roteiro · Construir (cartão do dia → itens) */
.pp-phone .pp-tl { padding: 16px 16px 29px; }
/* uma só espinha atrás de tudo (.tl-track/.tl-spine, Timeline.css:107-108): liga os nós das cidades, fechadas ou abertas */
.pp-phone .pp-tl-track { position: relative; margin-top: 10px; }
.pp-phone .pp-tl-track > .pp-spine { position: absolute; left: 15px; top: 6px; bottom: 26px; width: 2px; background: var(--spine); }
/* a secção da cidade: o banner e o corpo dos dias, que só existe aberta (os dias desmontam fechados, TimelineView.jsx:
   204); 20 entre secções, abertas ou fechadas (Timeline.css:33) */
.pp-phone .pp-sec + .pp-sec { margin-top: 20px; }
.pp-phone .pp-sec-corpo { display: none; }
.pp-phone .pp-sec.is-aberta .pp-sec-corpo { display: block; }
.pp-phone .pp-sec.is-aberta .pp-ch-chev svg { transform: rotate(180deg); }   /* a seta troca seca (TimelineView.jsx:97-99) */
.pp-phone .pp-ch { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.pp-phone .pp-ch-no { width: 32px; height: 32px; border-radius: 50%; background: var(--ochre-node); display: grid; place-items: center; flex: none; font-family: var(--pp-diz); font-size: 14px; font-weight: 600; color: var(--ochre-text); }
.pp-phone .pp-ch-banner { position: relative; flex: 1; min-width: 0; height: 96px; border-radius: 16px; overflow: hidden; }
.pp-phone .pp-ch-base { position: absolute; inset: 0; background: linear-gradient(135deg, #E7D9C2, #CBB489) center / cover no-repeat; }
/* as fotos da viagem (fotos/): enchem a caixa, sem crédito em cima (os créditos vivem no rodapé da página) */
.pp-phone .pp-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-phone .pp-ch-veu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 13, 10, .66) 40px, rgba(16, 13, 10, .04) 96px); }
.pp-phone .pp-ch-pe { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pp-phone .pp-ch-nome { display: block; font-family: var(--pp-diz); font-size: 20px; font-weight: 600; line-height: 1.05; color: var(--sand-50); text-shadow: 0 1px 8px rgba(16, 13, 10, .35); }
.pp-phone .pp-ch-datas { display: block; margin-top: 4px; font-family: var(--pp-diz); font-size: 12px; font-weight: 600; color: var(--sand-50); text-shadow: 0 1px 6px rgba(16, 13, 10, .35); white-space: nowrap; }
.pp-phone .pp-ch-lapis { background: rgba(251, 249, 245, .92); border-color: transparent; color: var(--sand-600); }
.pp-phone .pp-ch-chev { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: rgba(16, 13, 10, .32); display: grid; place-items: center; color: rgba(251, 249, 245, .95); }
.pp-phone .pp-dia { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; margin-top: 32px; padding: 8px 0; background: var(--sand-50); }
.pp-phone .pp-sec-corpo > .pp-dia-sec:first-child > .pp-dia { margin-top: 9px; }
.pp-phone .pp-dia-col { width: 32px; display: flex; justify-content: center; flex: none; }
.pp-phone .pp-dia-ponto { width: 11px; height: 11px; border-radius: 50%; background: var(--sand-900); border: 3px solid var(--sand-50); box-shadow: 0 0 0 1.5px var(--sand-900); }
.pp-phone .pp-dia-pil { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; background: var(--sand-900); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.pp-phone .pp-dia-n { font-family: var(--pp-diz); font-size: 13px; font-weight: 600; color: var(--sand-50); }
.pp-phone .pp-dia-d { font-family: var(--pp-diz); font-size: 10.5px; font-weight: 600; color: var(--decor); }
.pp-phone .pp-dia-r { margin-left: -4px; }
.pp-phone .pp-dia .pp-ib { margin-left: auto; }
/* a cidade na pastilha, em multi-cidade: o tom quente que a separa do dia (.tl-day-city, Timeline.css:475) */
.pp-phone .pp-dia-cidade { margin-right: -2px; font-family: var(--pp-diz); font-size: 13px; font-weight: 600; color: #E9B08F; }
/* o dia VAZIO: «+ Add» tracejado, o convite fala (.tl-dayadd--nome, Timeline.css:461-467) */
.pp-phone .pp-dia-add {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 9px;
  border: 1.5px dashed var(--sand-300); border-radius: var(--r-inner, 10px); background: var(--sand-50);
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; color: var(--sand-600);
}
.pp-phone .pp-bloco { position: relative; margin-top: 12px; padding-bottom: 2px; }
.pp-phone .pp-bl-cab { display: flex; align-items: center; gap: 10px; }
.pp-phone .pp-no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--sand-50); }
.pp-phone .pp-no svg { stroke-width: 2; }
.pp-phone .pp-no--ink { background: var(--ink); }
.pp-phone .pp-no--stay { background: var(--sand-800); }
.pp-phone .pp-no--ink500 { background: var(--ink-500); }
.pp-phone .pp-no--ochre { background: var(--ochre); }
.pp-phone .pp-no--moss { background: var(--moss-500); }
.pp-phone .pp-bkicker { font-family: var(--pp-diz); font-size: 11px; font-weight: 600; color: var(--sand-900); }
.pp-phone .pp-bl-acoes { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.pp-phone .pp-lixo { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--btn-border-neutral); background: var(--card); color: var(--sand-700); flex: none; }
.pp-phone .pp-relogio {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px;
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--ink-500); color: var(--ink-text); background: var(--ink-bg);
}
.pp-phone .pp-relogio--so { width: 32px; padding: 0; justify-content: center; border-color: var(--btn-border-neutral); color: var(--sand-700); background: var(--card); }
.pp-phone .pp-menu { color: var(--sand-600); }
.pp-phone .pp-bl-card { margin-top: 8px; position: relative; }
.pp-phone .pp-bl-card + .pp-bl-card { margin-top: 8px; }   /* 8 entre os segmentos de uma cadeia (Timeline.css:591) */
/* o envelope do bilhete (gram-card--bilhete, Timeline.css:1479-1491) */
.pp-phone .pp-env { background: #fff; border: 1px solid var(--sand-200); border-radius: 12px; padding: 12px 12px 15px; }
.pp-phone .pp-tags { display: flex; gap: 5px; margin-bottom: 12px; }   /* .gram-tags */
/* o rodapé (gram-foot2): a fila de dois e, por baixo, a porta de pagar; 16 do talão, 8 entre os dois */
.pp-phone .pp-env-botoes { display: flex; gap: 8px; margin-top: 16px; }
.pp-phone .pp-env-botoes .pp-btn { flex: 1 1 0; }
.pp-phone .pp-env .pp-env-pri { margin-top: 8px; }
/* o bilhete colorido: a cor é a posse (v2.css:2186-2285) */
.pp-phone .pp-bilhete { --fundo-atras: var(--card); position: relative; display: flex; flex-direction: column; border-radius: 14px; color: #fff; }
.pp-phone .pp-perna {
  position: relative; padding: 15px 18px 14px;
  --chao: var(--ink-300);
  background: linear-gradient(color-mix(in srgb, var(--chao) 46%, var(--ink-900)), color-mix(in srgb, var(--chao) 34%, var(--ink-900)));
}
.pp-phone .pp-perna[data-modo="comboio"] { --chao: var(--ochre-500); }
.pp-phone .pp-perna[data-modo="autocarro"] { --chao: var(--moss-500); }
.pp-phone .pp-perna[data-modo="estrada"] { --chao: var(--ameixa-500); }
.pp-phone .pp-perna:first-child { border-radius: 14px 14px 0 0; }
.pp-phone .pp-perna-cab { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; font-family: var(--pp-diz); font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .93); }
.pp-phone .pp-marca { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; flex: none; }
.pp-phone .pp-sentido { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); }
.pp-phone .pp-perna-voo { margin-left: auto; color: rgba(255, 255, 255, .78); font-weight: 650; white-space: nowrap; }
.pp-phone .pp-rota { display: grid; grid-template-columns: auto minmax(56px, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 6px; }
.pp-phone .pp-rota > * { min-width: 0; }
.pp-phone .pp-iata { font-family: var(--pp-explica); font-size: 19px; font-weight: 700; letter-spacing: -.012em; line-height: 1.1; white-space: nowrap; }
.pp-phone .pp-iata--m { font-size: 17px; }
.pp-phone .pp-iata--s { font-size: 15px; }
.pp-phone .pp-fim { text-align: right; }
.pp-phone .pp-liga { display: flex; align-items: center; gap: 5px; }
.pp-phone .pp-ponto { flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .88); }
.pp-phone .pp-fio { flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--chao) 42%, transparent); }
.pp-phone .pp-perna .pp-fio { background: rgba(255, 255, 255, .28); }
.pp-phone .pp-modo { color: #fff; flex: none; }
.pp-phone .pp-hora-b { font-family: var(--pp-diz); font-size: 13px; font-weight: 600; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-phone .pp-mais1 { font-size: 9px; font-weight: 700; line-height: 0; vertical-align: .45em; margin-left: 2px; opacity: .8; }   /* chega no dia seguinte */
.pp-phone .pp-meio { text-align: center; font-family: var(--pp-diz); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .9); white-space: nowrap; overflow: hidden; }
/* autocarro sem relógio (o Budget): a estimativa é a única coisa na 2.ª linha e ocupa as três colunas (v2.css:1825-1831) */
.pp-phone .pp-rota--sem-horas .pp-meio--cheio { grid-column: 1 / -1; overflow: visible; }
.pp-phone .pp-subs { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pp-phone .pp-cidade { font-family: var(--pp-diz); font-size: 10px; font-weight: 650; color: rgba(255, 255, 255, .88); line-height: 1.3; white-space: nowrap; }
.pp-phone .pp-cidade--so { margin-left: auto; }
.pp-phone .pp-corte { position: relative; z-index: 2; display: block; height: 0; border-top: 2px dashed color-mix(in srgb, var(--fundo-atras) 62%, transparent); }
.pp-phone .pp-corte::before,
.pp-phone .pp-corte::after { content: ''; position: absolute; top: 0; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--fundo-atras); }
.pp-phone .pp-corte::before { left: -8px; }
.pp-phone .pp-corte::after { right: -8px; }
.pp-phone .pp-talao {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 13px 18px 15px; border-radius: 0 0 14px 14px;
  background: color-mix(in srgb, var(--chao-fim, var(--ink-300)) 24%, var(--ink-900));
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.pp-phone .pp-bilhete[data-modo-fim="comboio"] .pp-talao { --chao-fim: var(--ochre-500); }
.pp-phone .pp-bilhete[data-modo-fim="autocarro"] .pp-talao { --chao-fim: var(--moss-500); }
.pp-phone .pp-talao-num { font-family: var(--pp-diz); font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .95); white-space: nowrap; }
.pp-phone .pp-talao-preco { font-family: var(--pp-diz); font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; }
.pp-phone .pp-talao-preco small { font-size: 12px; font-weight: 700; opacity: .85; margin-left: 1px; }
.pp-phone .pp-talao-preco small.pp-moeda-a { margin: 0 1px 0 0; }   /* o símbolo antes do número ($1,840) */
.pp-phone .pp-talao-parceiro { font-family: var(--pp-diz); font-size: 10px; font-weight: 600; color: var(--ochre-300); margin-left: auto; white-space: nowrap; }
/* o bilhete que ainda não é teu (branco, nos Guardados) */
.pp-phone .pp-bilhete--proposta { color: var(--sand-900); box-shadow: 0 0 0 1px var(--sand-200); }
.pp-phone .pp-bilhete--proposta .pp-perna { background: var(--card); }
.pp-phone .pp-bilhete--proposta .pp-perna-cab { color: var(--sand-700); }
.pp-phone .pp-bilhete--proposta .pp-sentido { color: var(--sand-900); }
.pp-phone .pp-bilhete--proposta .pp-perna-voo { color: var(--sand-700); }
.pp-phone .pp-bilhete--proposta .pp-marca { background: var(--sand-100); color: var(--sand-600); }
.pp-phone .pp-bilhete--proposta .pp-hora-b { color: var(--sand-900); }
.pp-phone .pp-bilhete--proposta .pp-cidade { color: var(--sand-600); }
.pp-phone .pp-bilhete--proposta .pp-meio { color: var(--sand-700); }
.pp-phone .pp-bilhete--proposta .pp-ponto { background: var(--sand-600); }
.pp-phone .pp-bilhete--proposta .pp-perna .pp-fio { background: var(--sand-300); }
.pp-phone .pp-bilhete--proposta .pp-modo { color: var(--sand-600); }
.pp-phone .pp-bilhete--proposta .pp-corte { border-top: 2px dashed var(--sand-200); }
.pp-phone .pp-bilhete--proposta .pp-corte::before,
.pp-phone .pp-bilhete--proposta .pp-corte::after { display: none; }
.pp-phone .pp-bilhete--proposta .pp-talao { background: var(--sand-100); border-top-color: var(--sand-200); }
.pp-phone .pp-bilhete--proposta .pp-talao-num { color: var(--sand-600); }
.pp-phone .pp-talao-conf { font-family: var(--pp-diz); font-size: 10px; font-weight: 600; color: var(--ochre-text); margin-left: auto; white-space: nowrap; }

/* «+ Ligar» */
.pp-phone .pp-ligar { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; height: 32px; padding-left: 4px; }
.pp-phone .pp-ligar-mais { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--btn-border-neutral); background: var(--card); display: grid; place-items: center; color: var(--sand-600); }
.pp-phone .pp-ligar span:last-child { font-family: var(--pp-diz); font-size: 12px; font-weight: 600; color: var(--sand-600); }
/* «Sem transporte entre os pontos» (tl-lig--sem, Timeline.css:489-503): bola de 20 sand-100 com a carinha sand-600 no
   eixo da espinha, o texto sans 11 / 500 sand-700, sem «+» e sem toque */
.pp-phone .pp-ligar--sem { padding-left: 6px; gap: 14px; }
.pp-phone .pp-ligar-bola { width: 20px; height: 20px; border-radius: 50%; background: var(--sand-100); display: grid; place-items: center; color: var(--sand-600); flex: none; }
.pp-phone .pp-ligar-bola .pp-i { width: 13px; height: 13px; }
.pp-phone .pp-ligar--sem span:last-child { font-family: var(--pp-explica); font-size: 11px; font-weight: 500; color: var(--sand-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o cartão-base escolhido (hotel, experiência, lugar), anatomia «A» (Timeline.css:925-975): miniatura de 64 ao lado do
   texto, o valor encostado à direita por baixo, a fila das acções em baixo à direita; 12 de padding e de gap */
.pp-phone .pp-base { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--sand-200); border-radius: var(--r-card); }
.pp-phone .pp-base-linha { display: flex; align-items: center; gap: 12px; }
.pp-phone .pp-esc-mini { position: relative; overflow: hidden; width: 64px; height: 64px; border-radius: var(--r-inner); flex: none; align-self: flex-start; background: linear-gradient(135deg, #DDE6EC, #B4C9D8) center / cover no-repeat; }
.pp-phone .pp-base-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-phone .pp-base-nome { font-family: var(--pp-diz); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--sand-900); }
.pp-phone .pp-base-estrelas { margin-top: 4px; font-size: 11px; line-height: 1; letter-spacing: 2px; color: var(--ochre-filete); }
.pp-phone .pp-base-meta { margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--sand-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-phone .pp-base-valor { align-self: flex-end; display: flex; align-items: baseline; gap: 3px; margin-top: 8px; }
.pp-phone .pp-base-num { font-family: var(--pp-diz); font-size: 15px; font-weight: 600; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-base-uni,
.pp-phone .pp-base-de { font-size: 10px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-base-acoes { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.pp-phone .pp-estrelas { font-size: 11px; color: var(--ochre-filete); letter-spacing: 2px; line-height: 1; margin-top: 6px; }
.pp-phone .pp-desde { font-size: 10px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-valor { font-family: var(--pp-diz); font-size: 15px; font-weight: 600; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-valor--est { color: var(--ochre-text); }
.pp-phone .pp-uni { font-size: 10px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-nota-txt { padding: 14px 13px; background: #fff; border: 1px solid var(--sand-200); border-radius: 14px; font-size: 13px; color: var(--sand-800); }
/* a fila «Experiences» do convite (.tl-hr / .tl-rail / .tl-card, Timeline.css:806-914): a caixa sand-50 de raio 18, o
   cartão de 210 com a foto de 92, o coração, a nota moss, «from … · /person», «Choose» clay e os pontos */
.pp-phone .pp-hr { padding: 14px 0 12px; background: var(--sand-50); border: 1px solid var(--sand-200); border-radius: 18px; box-shadow: 0 14px 30px -24px rgba(16, 13, 10, .4); }
.pp-phone .pp-hr-fila { display: flex; gap: 12px; padding: 0 12px; overflow: hidden; }
.pp-phone .pp-hr-card { width: 210px; flex: none; background: #fff; border: 1px solid var(--sand-200); border-radius: 13px; overflow: hidden; }
.pp-phone .pp-hr-foto { position: relative; height: 92px; background: linear-gradient(135deg, #DDE6EC, #B4C9D8); }
.pp-phone .pp-hr-cor { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 249, 245, .92); color: var(--sand-800); }
.pp-phone .pp-hr-corpo { padding: 12px; }
.pp-phone .pp-hr-nome { font-family: var(--pp-diz); font-size: 14px; font-weight: 600; line-height: 1.15; color: var(--sand-900); }
.pp-phone .pp-hr-nota { margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--moss-500); }
.pp-phone .pp-hr-preco { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; }
.pp-phone .pp-hr-num { font-family: var(--pp-diz); font-size: 15px; font-weight: 600; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-hr-cta { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.pp-phone .pp-hr-pontos { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.pp-phone .pp-hr-pontos i { width: 5px; height: 5px; border-radius: 99px; background: var(--sand-300); }
.pp-phone .pp-hr-pontos i.is-on { width: 15px; background: var(--clay); }

/* ── lente Ler (V2RoteiroLer.jsx; folhaDoRoteiro.js): a folha de leitura, sem preços nem botões de comprar ── */
.pp-phone .pp-ler { padding: 20px 20px 32px; }
.pp-phone .pp-ler-marca { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-ler-logo { display: inline-flex; }
.pp-phone .pp-ler-tit1 { margin-top: 26px; font-family: var(--pp-diz); font-size: 27px; font-weight: 600; letter-spacing: -.012em; line-height: 1.12; color: var(--sand-900); }
.pp-phone .pp-ler-sub1 { margin-top: 4px; font-size: 12px; color: var(--sand-700); }
.pp-phone .pp-ler-exp { margin-top: 20px; }
.pp-phone .pp-ler-dia { margin-top: 30px; margin-bottom: 4px; font-family: var(--pp-diz); font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--sand-900); }
.pp-phone .pp-ler-bl { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.pp-phone .pp-ler-rot { display: flex; align-items: center; gap: 10px; font-family: var(--pp-diz); font-size: 11px; font-weight: 600; color: var(--sand-600); }
.pp-phone .pp-ler-linha { margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--sand-900); }
.pp-phone .pp-ler-it { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; margin-top: 10px; }   /* «10:30 am»; 12 na V2 (v2.css:2438) */
.pp-phone .pp-ler-h { color: var(--sand-400); }
.pp-phone .pp-ler-h b { display: block; font-family: var(--pp-diz); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-ler-h small { display: block; font-size: 10.5px; line-height: 1.4; color: var(--sand-700); font-variant-numeric: tabular-nums; }
.pp-phone .pp-ler-tit { display: block; font-size: 14px; line-height: 1.35; color: var(--sand-900); }
/* por baixo da rota, o operador (com a referência da compra) e a nota da perna (.v2rl-perna-op / -nota, v2.css:2452-2453) */
.pp-phone .pp-ler-op { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--sand-600); }
.pp-phone .pp-ler-nota { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; font-style: italic; color: var(--sand-700); }
/* a estimativa lê-se aberta: sem horas (o relógio apagado) e em itálico (v2.css:2448 e 2455-2457) */
.pp-phone .pp-ler-it--aberto .pp-ler-tit,
.pp-phone .pp-ler-it--aberto .pp-ler-op { font-style: italic; color: var(--sand-700); }
.pp-phone .pp-ler-it + .pp-ler-it { margin-top: 8px; }
/* um facto vazio («No travel between cities», «Checkout: …») e o rodapé da folha (.v2rl-valor--vazio, .v2rl-nota) */
.pp-phone .pp-ler-linha--vazio { color: var(--sand-700); }
.pp-phone .pp-ler-rodape { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--sand-200); }
.pp-phone .pp-ler-rodape p { font-size: 12px; line-height: 1.45; color: var(--sand-700); }
.pp-phone .pp-ler-rodape p + p { margin-top: 4px; }

/* ── lente Mapa ── */
.pp-phone .pp-rm { display: flex; flex-direction: column; height: 100%; }
.pp-phone .pp-rm-filtro { flex: none; padding: 12px 16px; overflow: hidden; background: var(--sand-50); border-bottom: 1px solid var(--hairline); }
.pp-phone .pp-rm-mapa { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--sand-50); }
.pp-phone .pp-rm-mapa > svg { position: absolute; left: 0; top: 0; }
.pp-phone .pp-rm-mapa .pp-escala { left: 16px; top: 28px; width: 38px; }   /* 2 km à escala do desenho da costa */
.pp-phone .pp-reenq { position: absolute; right: 16px; top: 16px; z-index: 3; box-shadow: 0 2px 12px -3px rgba(16, 13, 10, .45); border-color: var(--sand-200); color: var(--sand-800); }
.pp-phone .pp-gota { position: absolute; width: 32px; height: 40px; margin: -40px 0 0 -16px; transform-origin: 50% 100%; transition: transform .15s ease; }
.pp-phone .pp-gota svg.pp-gota-forma path { fill: currentColor; }
.pp-phone .pp-gota--transporte { color: var(--ink); }
.pp-phone .pp-gota--alojamento { color: var(--sand-800); }
.pp-phone .pp-gota--atividade { color: var(--ink-500); }
.pp-phone .pp-gota--lugar { color: var(--moss-500); }
.pp-phone .pp-gota-ico { position: absolute; left: 8px; top: 7px; color: var(--sand-50); }
.pp-phone .pp-gota-ico svg { stroke-width: 2; }
.pp-phone .pp-gota.is-tocado { transform: scale(1.0625); z-index: 2; }
.pp-phone .pp-gota.is-tocado .pp-gota-forma { filter: drop-shadow(0 3px 6px rgba(16, 13, 10, .35)); }
.pp-phone .pp-gota-halo {
  position: absolute; left: 50%; top: 100%; z-index: -1; width: 50px; height: 50px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--sand-800) 8%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sand-800) 22%, transparent);
  opacity: 0;                               /* só existe na gota tocada, sem transição (GotaDoPino.jsx:37-38) */
}
.pp-phone .pp-gota.is-tocado .pp-gota-halo { opacity: 1; }
.pp-phone .pp-gota.is-fora { visibility: hidden; }
.pp-phone .pp-postal {
  position: absolute; left: 16px; right: 16px; bottom: 29px; z-index: 4;
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--card); border: 1px solid var(--sand-200); border-radius: 16px;
  box-shadow: 0 22px 44px -20px rgba(16, 13, 10, .35);
  visibility: hidden;                       /* aparece seco, como o .v2rm-postal (v2.css:2559) */
}
.pp-phone .pp-postal.is-on { visibility: inherit; }
.pp-phone .pp-postal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-phone .pp-postal-nome { font-family: var(--pp-diz); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--sand-900); }
.pp-phone .pp-postal-sub { font-size: 11px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-postal-seta { color: var(--sand-400); transform: rotate(-90deg); }

/* ═══════════════════ ORÇAMENTO ═══════════════════ */
.pp-phone .pp-orc { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 29px; }
.pp-phone .pp-tot { padding: 16px; background: var(--card); border: 1px solid var(--sand-200); border-radius: 16px; }
.pp-phone .pp-tot-topo { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--pp-diz); font-size: 11px; font-weight: 600; color: var(--sand-400); }
.pp-phone .pp-tot-linha { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 12px; }
.pp-phone .pp-tot-num { font-family: var(--pp-diz); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-tot-sub { font-size: 13px; color: var(--sand-700); }
.pp-phone .pp-tot-nota { margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-perna-preco { margin-left: auto; font-family: var(--pp-diz); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-phone .pp-faixas { height: 10px; border-radius: 99px; overflow: hidden; background: var(--sand-200); }
/* a barra revela-se inteira (as duas faixas coladas) e a de tinta cresce 0,5 s ease quando confirmas (motion.css:52) */
.pp-phone .pp-faixas-in { display: flex; height: 100%; clip-path: inset(0 0 0 0); transition: clip-path .5s ease; }
.pp-phone .pp-faixas-in.is-vazia { clip-path: inset(0 100% 0 0); transition: none; }
.pp-phone .pp-faixa { height: 100%; }
/* a ida já comprada ($920 de ~$3,675); com a volta, $1,840. Só a mudança de valores anima, 0,25 s (OrcamentoEditor.css:63) */
.pp-phone .pp-faixa--facto { width: 25%; background: var(--ink); transition: width .25s ease; }
.pp-phone .is-comprado .pp-faixa--facto { width: 50.1%; }
.pp-phone .pp-faixa--est { flex: 1 1 auto; background: var(--ochre-200); }
.pp-phone .pp-oseg { padding: 3px; }
.pp-phone .pp-oseg .pp-seg-t { flex-direction: column; gap: 3px; padding: 8px 12px; }
.pp-phone .pp-oseg-rot { font-family: var(--pp-diz); font-size: 12px; font-weight: 600; }
.pp-phone .pp-oseg-val { font-family: var(--pp-diz); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-phone .pp-oseg-val--est { color: var(--ochre-text); }
.pp-phone .pp-olado { display: none; flex-direction: column; gap: 16px; }
.pp-phone .pp-olado.is-on { display: flex; }
.pp-phone .pp-ocard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sand-200); border-radius: 12px; overflow: hidden; }
.pp-phone .pp-ocard--est { border: 1.5px dashed var(--ochre-border); }
.pp-phone .pp-othumb { position: relative; height: 132px; background: linear-gradient(135deg, #E7D9C2, #CBB489) center / cover no-repeat; display: grid; place-items: center; color: rgba(251, 249, 245, .9); }
.pp-phone .pp-ocorpo { padding: 12px; }
.pp-phone .pp-onome { font-family: var(--pp-diz); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--sand-900); line-height: 1.15; }
.pp-phone .pp-ocorpo .pp-estrelas { margin-top: 6px; }
.pp-phone .pp-opreco { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.pp-phone .pp-orodape { padding: 12px; border-top: 1px solid var(--hairline); }
.pp-phone .pp-orodape--acoes { display: flex; gap: 8px; }
.pp-phone .pp-orodape--acoes .pp-btn { flex: 1 1 0; padding: 0 12px; }
.pp-phone .pp-ocorpo .pp-gfam { margin-top: 3px; }
.pp-phone .pp-oselo {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px; padding: 0 20px;
  border-radius: 12px; border: 1px solid var(--moss); background: var(--moss-bg); color: var(--moss-deep);
  font-family: var(--pp-diz); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.pp-phone .pp-oesp { padding: 12px 12px 0; }
.pp-phone .pp-oesp .pp-bilhete { margin-top: 0; }
.pp-phone .pp-oesp + .pp-orodape { border-top: 0; margin-top: 4px; }
.pp-phone .pp-add {
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px;
  border: 1.5px dashed var(--sand-300); border-radius: 12px; background: var(--sand-50);
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600; color: var(--sand-700);
}

/* ═══════════════════ GUARDADOS ═══════════════════ */
.pp-phone .pp-gd { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 29px; }
.pp-phone .pp-gd .pp-chips { margin-bottom: 8px; }
.pp-phone .pp-gcard { background: #fff; border: 1px solid var(--sand-200); border-radius: 16px; overflow: hidden; }
.pp-phone .pp-gcard--env { padding: 12px; }
.pp-phone .pp-gthumb { position: relative; height: 132px; background: linear-gradient(135deg, #E7D9C2, #CBB489) center / cover no-repeat; display: grid; place-items: center; color: rgba(251, 249, 245, .9); }
.pp-phone .pp-gcidade { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 5px; background: var(--clay-bg); color: var(--clay-text); font-family: var(--pp-diz); font-size: 12px; font-weight: 600; }
.pp-phone .pp-gcorpo { padding: 12px 12px 14px; }
.pp-phone .pp-gcorpo .pp-onome { font-size: 15px; }
.pp-phone .pp-nota10 { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--moss); }
.pp-phone .pp-gfam { margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--sand-600); }
.pp-phone .pp-gdesde { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; font-size: 12px; color: var(--sand-600); }
.pp-phone .pp-reservar { margin-top: 10px; font-family: var(--pp-diz); font-size: 13px; font-weight: 600; color: var(--clay-text); }
.pp-phone .pp-gacoes { display: flex; gap: 8px; }
.pp-phone .pp-gcard--env .pp-gacoes { margin-top: 12px; }
.pp-phone .pp-grodape { padding: 12px; border-top: 1px solid var(--hairline); }
.pp-phone .pp-gacoes .pp-btn--sec { flex: 1 1 auto; }
.pp-phone .pp-gacoes .pp-btn--des { flex: none; }
/* a experiência posta num dia: Tag clay «No roteiro · 31 jul» (Tag.css:45-50) e o «Tirar» fica */
.pp-phone .pp-tagc {
  display: none; align-items: center; align-self: center; margin-right: auto;
  padding: 3px 10px; border: 1px solid var(--clay-border); border-radius: 999px;
  background: var(--clay-50); color: var(--clay-text);
  font-family: var(--pp-diz); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; line-height: 1.4;
}
.pp-phone .pp-gcard.is-plano .pp-gpor { display: none; }
.pp-phone .pp-gcard.is-plano .pp-tagc { display: inline-flex; }

/* ═══════════════════ EXPORTAR · BottomSheet (280 ms a entrar, 240 a sair) ═══════════════════ */
.pp-phone .pp-exp { position: absolute; inset: 0; z-index: 80; visibility: hidden; transition: visibility 0s linear .24s; }
.pp-phone .pp-exp-scrim { position: absolute; inset: 0; background: rgba(16, 13, 10, .85); opacity: 0; transition: opacity .22s ease; }
.pp-phone .pp-exp-folha {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; padding: 0 0 14px;
  background: var(--sand-50); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .18);
  transform: translateY(100%);
  transition: transform .24s var(--pp-ease);
}
.pp-phone[data-exportar="1"] .pp-exp:not(.pp-cmp),
.pp-phone[data-folha="1"] .pp-cmp { visibility: visible; transition-delay: 0s; }
.pp-phone[data-exportar="1"] .pp-exp:not(.pp-cmp) .pp-exp-scrim,
.pp-phone[data-folha="1"] .pp-cmp .pp-exp-scrim { opacity: 1; transition-duration: .2s; }
.pp-phone[data-exportar="1"] .pp-exp:not(.pp-cmp) .pp-exp-folha,
.pp-phone[data-folha="1"] .pp-cmp .pp-exp-folha { transform: none; transition-duration: .28s; }
.pp-phone .pp-grab { flex: none; width: 36px; height: 4px; margin: 16px auto; border-radius: 2px; background: #D4C8B0; }
.pp-phone .pp-exp-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 20px 14px; }
.pp-phone .pp-exp-kicker { margin-top: 4px; font-family: var(--pp-diz); font-size: 11px; font-weight: 600; color: var(--clay-press); }
.pp-phone .pp-exp-tit { margin-top: 3px; font-family: var(--pp-diz); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: var(--sand-900); font-variant-numeric: tabular-nums; }
.pp-phone .pp-fechar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-100); color: var(--sand-800); flex: none; }
.pp-phone .pp-exp-bloco { padding: 0 20px 12px; }
.pp-phone .pp-exp-rot { margin-bottom: 8px; font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--sand-700); }
.pp-phone .pp-exp-refs { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.pp-phone .pp-exp-refs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-phone .pp-exp-refs-tit { font-size: 14px; color: var(--sand-800); }
.pp-phone .pp-exp-refs-sub { font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--sand-700); }
.pp-phone .pp-toggle { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--clay); flex: none; }
.pp-phone .pp-toggle::after { content: ''; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 13, 10, .2); }
.pp-phone .pp-exp-linha { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--hairline); transition: background-color 120ms ease-out; }
.pp-phone .pp-exp-linha:last-child { border-bottom: 0; }
.pp-phone .pp-exp-linha.is-premida { background: var(--sand-100); }
.pp-phone .pp-itile { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--sand-100); color: var(--sand-800); flex: none; }
.pp-phone .pp-exp-linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-phone .pp-exp-linha-tit { font-family: var(--pp-diz); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--sand-900); }
.pp-phone .pp-exp-linha-sub { font-size: 11px; font-weight: 500; color: var(--sand-700); }
.pp-phone .pp-exp-chev { color: var(--sand-400); transform: rotate(-90deg); }
.pp-phone .pp-exp-nota { padding: 12px 20px 8px; font-size: 11px; font-weight: 500; color: var(--sand-700); }

/* ═══════════════════ «Já comprei» · a folha que pede o que só tu sabes (V2Orcamento.jsx:560-700) ═══════════════════ */
.pp-phone .pp-cmp { z-index: 81; }
.pp-phone .pp-cmp .pp-exp-folha { padding-bottom: 30px; }
.pp-phone .pp-cmp-x { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 12px; }
.pp-phone .pp-cmp-lbl { margin-bottom: 6px; font-family: var(--pp-diz); font-size: 11px; font-weight: 600; color: var(--sand-700); }
.pp-phone .pp-cmp-input {
  min-height: 44px; padding: 0 13px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--spine); border-radius: 11px; background: var(--card);
  font-size: 13.5px; color: var(--sand-900);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.pp-phone .pp-cmp-input.com-foco { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.pp-phone .pp-cmp-moeda { font-size: 13px; color: var(--sand-700); }
.pp-phone .pp-cmp-ph { color: var(--sand-400); }
.pp-phone .pp-cmp-input.tem-texto .pp-cmp-ph { display: none; }
.pp-phone .pp-cmp-meta { margin: 6px 2px 0; font-size: 11px; font-weight: 500; color: var(--ochre-text); }
.pp-phone .pp-cmp-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; margin-top: 2px;
  border-radius: 12px; background: var(--clay); color: var(--sand-50);
  font-family: var(--pp-diz); font-size: 12px; font-weight: 600;
  transition: opacity 120ms ease-out, background-color 120ms ease-out;
}
.pp-phone .pp-cmp-cta.is-off { opacity: .45; }
.pp-phone .pp-cmp-cta.is-premido { background: var(--clay-press); }

/* ═══════════════════ toque fantasma (disco de 44px) ═══════════════════ */
.pp-phone .pp-toque {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: color-mix(in srgb, var(--sand-900) 16%, transparent); border: 1.5px solid var(--pp-luz-60);
  opacity: 0; z-index: 94;
}
.pp-phone .pp-toque i {
  position: absolute; inset: -1.5px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--sand-900) 32%, transparent); opacity: 0;
}

/* no hero em ação (ciclo) o dedo lê-se como numa gravação de ecrã: disco claro com aro branco e contorno escuro,
   visível tanto no branco da conversa como no escuro das folhas */
.pp-phone--ciclo .pp-toque {
  background: color-mix(in srgb, var(--sand-900) 32%, transparent);
  border: 2px solid color-mix(in srgb, #fff 85%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sand-900) 45%, transparent), 0 2px 10px color-mix(in srgb, var(--sand-900) 25%, transparent);
}

/* o véu da volta do ciclo (0,3 s + 0,3 s, WAAPI): tapa a app, não a barra de estado */
.pp-phone .pp-veu { position: absolute; inset: 0; z-index: 89; background: var(--sand-50); opacity: 0; pointer-events: none; }
/* os quatro cantos do ecrã (0×0): o getBoundingClientRect deles dá a pose 3D projetada (toque e peças) */
.pp-phone .pp-canto { position: absolute; width: 0; height: 0; pointer-events: none; }
.pp-phone .pp-canto[data-canto="0"] { left: 0; top: 0; }
.pp-phone .pp-canto[data-canto="1"] { left: 390px; top: 0; }
.pp-phone .pp-canto[data-canto="2"] { left: 390px; top: 844px; }
.pp-phone .pp-canto[data-canto="3"] { left: 0; top: 844px; }

/* ═══════════════════ estados congelados ═══════════════════ */
.pp-phone.pp-sem-trans,
.pp-phone.pp-sem-trans * { transition: none !important; }
.pp-phone.pp-parado .pp-agulha-rot.is-gira,
.pp-phone.pp-parado .pp-cursor { animation-play-state: paused; }

/* ═══════════════════ botão «Pausar animações» (fora da moldura) ═══════════════════ */
.phone-box .pp-pausa {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--btn-border-neutral); border-radius: 12px;
  background: var(--sand-50); color: var(--sand-600);
  font-family: var(--font-serif, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; white-space: nowrap; line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.phone-box .pp-pausa svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.phone-box .pp-pausa .pp-i-play { display: none; }
.phone-box .pp-pausa.is-pausado .pp-i-play { display: block; }
.phone-box .pp-pausa.is-pausado .pp-i-pausa { display: none; }
.phone-box .pp-pausa:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .phone-box .pp-pausa:hover { background: var(--btn-hover-bg-neutral); border-color: var(--btn-hover-border-neutral); color: var(--sand-900); }
}

/* ═══════════════════ reduced motion: tudo desligado, estados finais ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pp-phone *,
  .pp-phone *::before,
  .pp-phone *::after { animation: none !important; transition: none !important; }
  .pp-phone .pp-cursor { display: none !important; }
}