/* ============================================
   TOKN — Estilos globais
   Fonts e cores: ver help/fonts-e-cores.md
   ============================================ */

/* As fontes vivem em assets/css/fonts.css, servidas do próprio site.
   Havia aqui TTFs locais como rede de segurança para o Google Fonts
   falhar; deixaram de proteger de nada, porque agora o woff2 vem do
   mesmo servidor que o TTF viria. Ficavam 4,3 MB parados no repositório
   dos quais 4,15 MB só do Google Sans. */

/* ---------- Variáveis ---------- */
:root {
  /* Base (tema claro — default) */
  --color-background: #F5F5F5;
  --color-surface: #F8F9FA;
  /* Branco puro, propositadamente igual nos dois temas (texto sobre
     fundos de cor de marca, cartões sempre-brancos) — não é
     redefinida por tema. */
  --color-white: #FFFFFF;
  /* Era #1B1B1B (preto puro); pedido para suavizar toda a tinta
     principal do site para este cinza-escuro a 58% — mesmo valor do
     --color-muted (ver abaixo), por isso as duas tornam-se visualmente
     iguais onde apareçam lado a lado. */
  --color-primary: #1B1B1B; /* Grey 900 — tinta principal, contraste máximo */

  /* Cores de marca (cidades) */
  --color-tokyo: #563CF3;
  --color-osaka: #FF5A00;
  --color-kyoto: #E0002A; /* também cor de interação/hover */
  --color-nara: #5DB82A;

  /* Fundos suaves = tom 200 da escala tonal oficial de cada cidade
     (sólidos, já não derivados por opacidade da cor 500) */
  --color-tokyo-soft: #B1A5F9;
  --color-osaka-soft: #FFB38A;
  --color-kyoto-soft: #F18A9D;
  --color-nara-soft: #B4DE9D;

  /* Neutras / utilitárias */
  /* Mais escuro que --color-primary (0.58) desde que este deixou de
     ser preto puro, para o texto "muted" continuar a distinguir-se.
     Opacidade 1 = teto: é o preto puro que --color-primary era antes. */
  --color-muted: #777777; /* Grey 700 — secundário */
  --color-faint: #9E9E9E; /* Grey 500 — terciário */
  --color-border: #D6D6D6; /* Grey 300 */
  --color-hairline: #E4E4E4; /* Grey 200 */
  --color-glass: rgba(245, 245, 245, 0.72);

  /* Layout */
  --page-margin: 50px;
  --grid-columns: 24;
  --grid-gutter: 20px;

  /* Espaçamentos verticais fluidos (escalam entre 640px e 1920px) */
  --space-section: clamp(64px, calc(43px + 3.3vw), 106px);
  --space-block: clamp(32px, calc(22px + 1.6vw), 52px);
  --space-element: clamp(16px, calc(12px + 0.63vw), 24px);

  /* Fonts */
  --font-serif: "Instrument Serif", serif;
  --font-sans: "Google Sans Flex", sans-serif;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip; /* os dots da esfera podem espreitar além da margem */
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-primary);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

/* Páginas com hero em ecrã inteiro (ex.: .hero-replica). O header
   deixa de ocupar espaço em fluxo (position:fixed, flutua por cima)
   para a hero preencher o ecrã desde o topo sem nenhuma faixa própria
   atrás da navbar. */
body.hero-fullbleed {
  background-color: var(--color-white);
}

body.hero-fullbleed .site-header {
  position: fixed;
  left: 0;
  right: 0;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Grid (24 colunas, margem de página 50px) ---------- */
.container {
  padding-inline: var(--page-margin);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
}

/* Spans: .col-1 … .col-24 */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }
.col-13 { grid-column-end: span 13; }
.col-14 { grid-column-end: span 14; }
.col-15 { grid-column-end: span 15; }
.col-16 { grid-column-end: span 16; }
.col-17 { grid-column-end: span 17; }
.col-18 { grid-column-end: span 18; }
.col-19 { grid-column-end: span 19; }
.col-20 { grid-column-end: span 20; }
.col-21 { grid-column-end: span 21; }
.col-22 { grid-column-end: span 22; }
.col-23 { grid-column-end: span 23; }
.col-24 { grid-column-end: span 24; }

/* Offsets: .start-1 … .start-24 (coluna inicial) */
.start-1  { grid-column-start: 1; }
.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }
.start-13 { grid-column-start: 13; }
.start-14 { grid-column-start: 14; }
.start-15 { grid-column-start: 15; }
.start-16 { grid-column-start: 16; }
.start-17 { grid-column-start: 17; }
.start-18 { grid-column-start: 18; }
.start-19 { grid-column-start: 19; }
.start-20 { grid-column-start: 20; }
.start-21 { grid-column-start: 21; }
.start-22 { grid-column-start: 22; }
.start-23 { grid-column-start: 23; }
.start-24 { grid-column-start: 24; }

/* Tablet: 12 colunas */
@media (max-width: 1023px) {
  :root {
    --grid-columns: 12;
  }
  .grid > [class*="col-"] { grid-column: span 12; }
  .col-1, .col-2  { grid-column: span 2; }
  .col-3, .col-4  { grid-column: span 4; }
  .col-5, .col-6  { grid-column: span 6; }
  .col-7, .col-8  { grid-column: span 8; }
  .col-9, .col-10 { grid-column: span 10; }
}

/* Mobile: coluna única, margem reduzida */
@media (max-width: 639px) {
  :root {
    --page-margin: 20px;
    --grid-columns: 4;
    --grid-gutter: 12px;
  }
  .grid > [class*="col-"] { grid-column: 1 / -1; }
}

/* ---------- Header / Navbar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px var(--page-margin);
  max-width: 1920px;
  margin-inline: auto;
}

/* Só as formas pintadas do logo apanham o rato — o resto do SVG é
   transparente e, escalado na animação, criaria uma área de clique
   invisível muito maior do que o alvo visível. */
.site-logo {
  pointer-events: none;
}

.site-logo .logo-circle,
.site-logo .logo-letters {
  pointer-events: auto;
}

.site-logo img,
.logo-svg {
  height: 42px;
  width: auto;
  aspect-ratio: 1464.29 / 1080;
  display: block;
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cápsula branca com os links de navegação */
.nav-pill {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 12px;
}

.nav-pill a {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-primary);
  border-radius: 999px;
  transition: color 0.2s ease;
}

.nav-pill a:hover {
  color: var(--color-kyoto);
}

/* Efeito "text roll": texto duplicado, cópia escondida abaixo;
   no hover o wrapper .translate sobe (animado com GSAP no main.js) */
.roll > span {
  display: block;
  overflow: hidden;
}

.roll .translate {
  display: block;
  position: relative;
}

.roll .translate > span {
  display: block;
}

.roll .translate > span:last-child {
  position: absolute;
  top: 100%;
  left: 0;
}

/* Ícones Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

/* Ícone embutido numa linha de texto (links "Ler mais", botões
   "+ Adicionar", etc.): escala com o texto à volta e assenta na
   baseline ótica; as margens dão o respiro que antes era um espaço. */
.msi-inline {
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.35em;
  margin-left: 0.15em;
}

.msi-inline:first-child {
  margin-left: 0;
  margin-right: 0.15em;
}

/* Ícone sozinho num botão de navegação (setas do calendário) */
.msi-nav {
  font-size: 16px;
  line-height: 1;
  display: block;
}

/* Ícone do × de remover pill (cabe na caixa de 16px do botão) */
.msi-close {
  font-size: 12px;
  line-height: 1;
  display: block;
}

/* Botão circular (conta / login) */
.nav-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.nav-circle:hover {
  color: var(--color-kyoto);
}

/* Botão CTA (navbar e conteúdo) */
.nav-cta,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 48px;
  background: var(--color-kyoto);
  color: var(--color-white);
  border: none; /* <button> tem stroke nativo do browser; <a> nunca teve */
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: opacity 0.2s ease;
}

.nav-cta:hover,
.btn-primary:hover {
  opacity: 0.85;
}

/* ---------- Navbar responsiva ---------- */
/* Hambúrguer: círculo igual ao .nav-circle, barras em CSS puro.
   Escondido no desktop; visível abaixo de 1024px. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-primary);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease;
}

/* Aberto: as duas barras formam um X */
body.menu-open .nav-toggle span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

body.menu-open .nav-toggle span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Menu em ecrã inteiro (fica por baixo do header sticky, z-index 100) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-block);
  padding: 96px var(--page-margin) 48px;
  background: var(--color-background);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
}

/* Sem scroll da página com o menu aberto */
body.menu-open {
  overflow: hidden;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}

.mobile-menu-nav a,
.mobile-menu-footer a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.mobile-menu-nav a:hover,
.mobile-menu-footer a:hover {
  color: var(--color-kyoto);
}

.mobile-menu-footer {
  display: flex;
  gap: 32px;
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-element);
}

/* Tablet e mobile: colapsa a pill e o círculo da conta no hambúrguer;
   o CTA mantém-se visível */
@media (max-width: 1023px) {
  .nav-pill,
  .nav-circle {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Com menos elementos, o header abre: logo à esquerda, controlos à direita */
  .site-header {
    justify-content: space-between;
  }
}

/* Desktop: o menu mobile nunca aparece */
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

/* Baseado em help/canvas-particles/src/style.css (CodePen da
   GreenSock). Altura fica em 100vh tal e qual (o script dimensiona o
   canvas a innerHeight, não à altura da secção — mexer nisso desviava
   a resolução do canvas do seu tamanho em CSS). */
.hero-replica {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: var(--color-white);
}

.hero-replica canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Nódoa branca por trás do texto — separa-o das bolas da animação
   sem parar de as deixar ver à volta. Entre o canvas (z:0) e o
   conteúdo (z:1). */
.hero-replica-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, var(--color-white) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0) 72%);
}

/* Nota discreta sobre o clique para pausar a animação (ver
   assets/js/hero-particles.js, listener "pointerup" no canvas).
   pointer-events:none para o clique passar sempre para o canvas por
   baixo, mesmo se calhar mesmo em cima do texto. */
.hero-replica-hint {
  position: absolute;
  z-index: 1;
  right: var(--page-margin);
  bottom: 24px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-faint);
  pointer-events: none;
}

.hero-replica-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1160px;
  padding-inline: var(--page-margin);
  text-align: center;
}

.hero-replica-content .text-display {
  /* Equilibra a quebra entre linhas (evita uma linha cheia + resto
     apertado) em vez de depender de um <br> fixo, que partia em 3
     linhas em ecrãs mais estreitos que a frase inteira. */
  text-wrap: balance;
  /* Preto sólido, não var(--color-primary) (mais claro no site em
     geral) — as palavras .hl-osaka/.hl-tokyo mantêm a cor de marca
     porque essas regras são mais específicas e ganham à herança. */
  color: #1B1B1B;
}

/* .hero-ctas normalmente tem margin-top próprio (para quando segue
   texto solto noutras páginas) — aqui já há o gap do flex acima, as
   duas margens juntas é que davam aquele espaço enorme. */
.hero-replica-content .hero-ctas {
  margin-top: 0;
}

/* .btn-outline sozinho (fundo transparente, contorno muito subtil)
   ficava quase invisível sobre o branco — ganha o mesmo fundo claro
   da nav-pill da navbar. Sem stroke a aparecer no hover (só escurece
   um pouco, como o btn-primary). */
.hero-replica-content .btn-outline {
  background: var(--color-surface);
  border-color: var(--color-border); /* mesmo contorno fixo da nav-pill */
}

.hero-replica-content .btn-outline:hover {
  border-color: var(--color-border); /* fica igual, não muda no hover */
  opacity: 0.85;
}

/* Palavras-chave da headline nas cores da marca (à Stripe) */
.hl-tokyo { color: var(--color-tokyo); }
.hl-osaka { color: var(--color-osaka); }
.hl-kyoto { color: var(--color-kyoto); }

/* Par de CTAs: primário + link fantasma */
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: var(--space-block);
}

.btn-ghost {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-ghost::after {
  /* Ligadura Material Symbols: o nome do ícone vira o glifo */
  content: "arrow_forward";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.35em;
  margin-left: 0.15em;
}

.btn-ghost:hover {
  color: var(--color-kyoto);
}

.hero-content .text-body-large {
  color: var(--color-muted);
  max-width: 52ch;
  /* Ligeiramente maior que o body-large normal — é a entrada do site */
  font-size: clamp(14px, calc(12.5px + 0.24vw), 17px);
}

/* ---------- Secção Cidades (drift orbital ao scroll) ----------
   Faixa roxa com fundo inclinado (à Stripe) e grelha estática dos
   4 cards brancos. Sem pin, sem scrub — só scroll normal e um hover

.city-card-name,

/* Tablet: 2×2 */
@media (min-width: 640px) and (max-width: 1023px) {
  .cities-grid .city-card {
    grid-column: span 6;
  }
}

@media (max-width: 639px) {
  .trust-bar {
    flex-direction: column;
    gap: var(--space-element);
  }
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot-tokyo { background: var(--color-tokyo); }
.dot-osaka { background: var(--color-osaka); }
.dot-kyoto { background: var(--color-kyoto); }
.dot-nara  { background: var(--color-nara); }

/* Desktop: os cartões ganham rotações leves e sobreposição subtil */
@media (min-width: 1024px) {
  .demo-board {
    gap: 32px;
    align-items: flex-start;
  }

  .demo-card {
    max-width: 360px;
  }

  .demo-exp    { transform: rotate(-1.5deg); }
  .demo-budget { transform: rotate(1deg) translateY(24px); }
  .demo-itin   { transform: rotate(2deg); }
}

/* Tablet: os 3 passos lado a lado (a regra geral fazia cada col-8
   ocupar 8 de 12 colunas — ficavam empilhados a 2/3 da largura) */
@media (min-width: 640px) and (max-width: 1023px) {
  .steps-grid .step {
    grid-column: span 4;
  }
}

/* ---------- CTA final ---------- */
.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-block);
  text-align: center;
  padding-block: var(--space-section);
}

/* ---------- Footer ----------
   Bloco escuro (tinta da marca) a fechar a página; o botão kyoto e a
   newsletter ganham destaque máximo sobre este fundo. */
.site-footer {
  background: #1B1B1B;
  color: #f5f5f5;
  padding-block: var(--space-section) var(--space-block);
}

.footer-top {
  row-gap: var(--space-block);
}

.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-newsletter .text-body {
  color: #A2A2A2;
  max-width: 44ch;
}

/* Input pill + botão, lado a lado */
.footer-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  max-width: 420px;
}

.footer-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: 1px solid #3E3E3E;
  border-radius: 999px;
  background: #141414;
  color: #f5f5f5;
  appearance: none;
}

.footer-form input::placeholder {
  color: #777777;
}

/* Tirar o contorno do sistema é só metade: sem nada no lugar, quem
   navega por teclado não vê onde está. A borda acende.
   Cor fixa e clara, não a variável do tema: o rodapé é um bloco escuro
   igual nos dois temas, e a tinta do tema claro seria quase invisível
   sobre este fundo. */
.footer-form input:focus {
  outline: none;
  border-color: #f5f5f5;
}

.footer-form-msg {
  color: #A2A2A2;
  min-height: 1.5em; /* reserva a linha: a mensagem não empurra o layout */
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col .text-label {
  color: #777777;
  margin-bottom: 6px;
}

.footer-col a {
  text-decoration: none;
  color: #f5f5f5;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--color-kyoto);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-element);
  margin-top: var(--space-section);
  padding-top: var(--space-element);
  border-top: 1px solid #2F2F2F;
  color: #A2A2A2;
}

.footer-bottom a {
  color: inherit;
}

/* Tablet: newsletter em cima, colunas lado a lado por baixo */
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-top .footer-newsletter {
    grid-column: 1 / -1;
  }

  .footer-top .footer-col {
    grid-column: span 4;
  }
}

/* Mobile: tudo empilhado (o grid geral já trata), colunas com respiro */
@media (max-width: 639px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Input e botão empilhados — lado a lado não cabem aos 320-375px */
  .footer-form {
    flex-direction: column;
  }

  .footer-form .btn-primary {
    width: 100%;
  }
}

/* ---------- Página de Experiências ---------- */
.exp-hero {
  padding-block: var(--space-section) var(--space-block);
}

.exp-hero .text-body-large {
  color: var(--color-muted);
  max-width: 60ch;
  margin-top: var(--space-element);
}

.exp-hero a {
  color: var(--color-kyoto);
}

.exp-browser {
  padding-block: 0 var(--space-section);
}

/* Filtros: duas filas de chips (cidades e tipos) */
.exp-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-block);
}

.exp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exp-filter {
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  appearance: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.exp-filter:hover {
  border-color: var(--color-primary);
}

.exp-filter.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-background);
}

/* Grelha de cards (3 por fila no desktop; o grid geral trata o resto) */
.exp-grid {
  row-gap: var(--grid-gutter);
}

.exp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.exp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(27, 27, 27, 0.10);
}

.exp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Chip da cidade nas cores da marca */
.exp-chip {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.exp-chip-tokyo { background: var(--color-tokyo-soft); color: var(--color-tokyo); }
.exp-chip-osaka { background: var(--color-osaka-soft); color: var(--color-osaka); }
.exp-chip-kyoto { background: var(--color-kyoto-soft); color: var(--color-kyoto); }
.exp-chip-nara  { background: var(--color-nara-soft);  color: var(--color-nara); }

.exp-type {
  color: var(--color-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

.exp-note {
  color: var(--color-faint);
}

.exp-price {
  margin-top: auto; /* alinha preços e ações pela base do card */
}

.exp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--color-hairline);
}

.exp-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.exp-link:hover {
  color: var(--color-kyoto);
}

/* Botão adicionar (inerte até haver contas) */
/* Adicionar/remover do plano — usado em experiencias.html, no onboarding
   e por consequência no dashboard, que lê o mesmo PlanStore (localStorage) */
.exp-add {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  appearance: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.exp-add:hover {
  border-color: var(--color-primary);
}

.exp-add.is-added {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-background);
}

/* Cards bloqueados: o build-up para o Unlocked */
.exp-card-locked {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  border-style: dashed;
  background: var(--color-hairline);
  color: var(--color-faint);
}

.exp-lock {
  font-size: 28px;
}

/* Card final de conversão */
.exp-card-cta {
  justify-content: center;
  background: var(--color-tokyo);
  border: none;
  color: var(--color-white);
}

.exp-card-cta .text-body {
  color: rgba(255, 255, 255, 0.78);
}

.exp-card-cta .btn-primary {
  width: max-content;
  margin-top: 10px;
}

.exp-empty {
  grid-column: 1 / -1;
  color: var(--color-muted);
}

/* Tablet: 2 por fila */
@media (min-width: 640px) and (max-width: 1023px) {
  .exp-grid .exp-card {
    grid-column: span 6;
  }
}

/* ---------- Página de Essenciais (timeline da preparação) ----------
   Linha vertical com fases coloridas pelas 4 cores da marca; cada item
   é um bloco editorial com check (guardado em localStorage — mais
   tarde sincroniza com a conta e alimenta o dashboard). */
.ess {
  padding-block: 0 var(--space-section);
}

.ess-note {
  color: var(--color-faint);
  margin-bottom: var(--space-block);
}

/* Quatro caixas grandes, uma por fase, 2×2 no desktop.
   A ordem de leitura (Z) preserva a cronologia. */
.ess-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
  counter-reset: fase;
}

@media (min-width: 1024px) {
  .ess-timeline {
    grid-template-columns: 1fr 1fr;
  }
}

/* Caixa de fase: superfície com a cor da cidade como acento no topo */
.ess-phase {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-top: 4px solid var(--phase-color, var(--color-primary));
  border-radius: 20px;
  padding: 28px;
}

.ess-phase-tokyo { --phase-color: var(--color-tokyo); }
.ess-phase-osaka { --phase-color: var(--color-osaka); }
.ess-phase-kyoto { --phase-color: var(--color-kyoto); }
.ess-phase-nara  { --phase-color: var(--color-nara); }

/* Cabeçalho da fase: número ordinal na cor da fase + progresso à direita.
   (o número substitui o ponto — a barra do topo já dá a cor; dois
   acentos iguais eram redundância visual) */
.ess-phase > .text-h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ess-phase > .text-h3::before {
  counter-increment: fase;
  content: counter(fase, decimal-leading-zero);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--phase-color);
  flex: none;
}

/* Progresso da fase (preenchido pelo essentials.js) */
.ess-progress {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-faint);
  font-variant-numeric: tabular-nums; /* 1/4 → 2/4 sem saltos */
}

.ess-items {
  list-style: none;
  margin-top: var(--space-element);
}

/* Item: check + bloco editorial */
.ess-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: var(--space-element);
  border-top: 1px solid var(--color-hairline);
}

.ess-item .text-body {
  color: var(--color-muted);
  max-width: 62ch;
  margin-top: 4px;
}

.ess-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-kyoto);
  text-decoration: none;
}

.ess-link:hover {
  text-decoration: underline;
}

/* O check: círculo vazio que enche ao marcar.
   Visualmente 26px; a área de clique real estende-se a 44px
   (alvo de toque mínimo recomendado) via pseudo-elemento. */
.ess-check {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  appearance: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ess-check::before {
  content: "";
  position: absolute;
  inset: -9px; /* 26 + 2×9 = 44px de alvo */
}

.ess-check:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-hairline);
}

.ess-item.done .ess-check {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.ess-item.done .ess-check::after {
  content: "check";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  display: block;
  color: var(--color-background);
  font-size: 16px;
  line-height: 23px; /* interior do círculo de 26px com borda de 1.5px */
  text-align: center;
}

/* Item tratado: risca o título e esbate o bloco, sem o esconder */
.ess-item.done .ess-body {
  opacity: 0.55;
}

.ess-item.done .text-h5 {
  text-decoration: line-through;
  text-decoration-color: var(--color-faint);
  text-decoration-thickness: 1px;
}

.ess-disclaimer {
  color: var(--color-faint);
  margin-top: var(--space-block);
}

.ess-cta {
  margin-top: var(--space-element);
}

/* ---------- Página Sobre ---------- */
.about-insight {
  padding-block: var(--space-block) var(--space-section);
  border-bottom: 1px solid var(--color-hairline);
}

.about-insight .text-h2 {
  max-width: 24ch;
}

.about-solution {
  padding-block: var(--space-section);
}

.about-solution .grid {
  row-gap: var(--space-block);
}

.about-solution .text-h3 {
  margin-bottom: var(--space-element);
}

.about-solution .text-body-large {
  color: var(--color-muted);
}

.about-not-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  color: var(--color-muted);
}

.about-not-list li {
  position: relative;
  padding-left: 26px;
}

.about-not-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-faint);
}

.about-cities {
  padding-block: 0 var(--space-section);
}

.about-cities .text-h2 {
  margin-bottom: var(--space-block);
}

.about-cities-grid {
  row-gap: var(--grid-gutter);
}

/* Cartão com acento de cor no topo — mesma técnica dos .ess-phase */
.trait-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-top: 4px solid var(--trait-color, var(--color-primary));
  border-radius: 20px;
  padding: 28px;
}

.trait-card-tokyo { --trait-color: var(--color-tokyo); }
.trait-card-osaka { --trait-color: var(--color-osaka); }
.trait-card-kyoto { --trait-color: var(--color-kyoto); }
.trait-card-nara  { --trait-color: var(--color-nara); }

.trait-card .text-h4 {
  margin-bottom: 8px;
}

.trait-card .text-body {
  color: var(--color-muted);
}

.about-name {
  padding-block: 0 var(--space-section);
}

.about-name .text-h2 {
  margin-bottom: var(--space-block);
}

.about-name-item {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-element);
}

.about-name-item .text-h5 {
  margin-bottom: 8px;
}

.about-name-item .text-body {
  color: var(--color-muted);
}

/* ---------- Página de FAQ ---------- */
.faq {
  padding-block: 0 var(--space-section);
}

.faq-list {
  border-top: 1px solid var(--color-hairline);
}

.faq-item {
  border-bottom: 1px solid var(--color-hairline);
}

/* Remove o triângulo nativo do <details> — o "+" próprio substitui-o */
.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-element);
  padding-block: var(--space-element);
  cursor: pointer;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.faq-icon::before {
  width: 16px;
  height: 1.5px;
}

.faq-icon::after {
  width: 1.5px;
  height: 16px;
}

/* Aberto: o "+" roda 45º e vira "×" */
.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.faq-answer {
  color: var(--color-muted);
  max-width: 65ch;
  padding-bottom: var(--space-element);
}

/* ---------- Começa já (onboarding interativo) ---------- */

/* Layout dividido à Klarna: formulário à esquerda, arte à direita */
.ob-layout {
  display: flex;
  min-height: 100vh;
}

.ob {
  flex: 1 1 480px;
  max-width: 640px;
  padding: var(--space-section) var(--page-margin);
  margin-inline: auto;
}

/* Painel de arte: kanjis das 4 cidades (.ob-art-kanji-*, mais abaixo)
   sobre uma mancha gradiente — mesma linguagem do .city-card-kanji,
   sem depender de fotos */
.ob-art {
  position: relative;
  flex: 1 1 40%;
  overflow: hidden;
  background: var(--color-primary);
}

.ob-art::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(135deg,
    var(--color-tokyo) 0%,
    var(--color-kyoto) 36%,
    var(--color-osaka) 68%,
    var(--color-nara) 100%);
  border-radius: 42% 58% 52% 48% / 55% 45% 60% 40%;
  filter: blur(110px);
  opacity: 0.55;
}

.ob-art-kanji {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  color: rgba(245, 245, 245, 0.9);
  mix-blend-mode: overlay;
  user-select: none;
}

.ob-art-kanji-tokyo { top: 8%; left: 12%; font-size: 220px; }
.ob-art-kanji-osaka { top: 38%; right: -4%; font-size: 180px; }
.ob-art-kanji-kyoto { bottom: 14%; left: 18%; font-size: 160px; }
.ob-art-kanji-nara  { bottom: -6%; right: 18%; font-size: 130px; }

@media (max-width: 1023px) {
  .ob-art {
    display: none;
  }
  .ob {
    margin-inline: auto;
  }
}

/* Barra de progresso à Wise: passos nomeados + linha que se preenche */
.ob-progress {
  margin-bottom: var(--space-block);
}

.ob-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ob-progress-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-faint);
  transition: color 0.2s ease;
}

.ob-progress-label.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.ob-progress-label.is-done {
  color: var(--color-kyoto);
}

.ob-progress-track {
  position: relative;
  height: 2px;
  background: var(--color-hairline);
  border-radius: 999px;
}

.ob-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-kyoto);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.ob-time {
  color: var(--color-faint);
  margin-top: 6px;
}

.ob-step[hidden] {
  display: none;
}

.ob-step > .text-body-large {
  color: var(--color-muted);
  margin-top: 4px;
}

.ob-essentials {
  list-style: none;
  margin-block: var(--space-block);
}

.ob-essentials .ess-item:first-child {
  border-top: none;
}

.ob-next {
  align-self: flex-start;
}

.ob-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ob-counter {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.ob-exp-grid {
  row-gap: var(--grid-gutter);
  margin-bottom: var(--space-block);
}

.ob-recap {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-block);
}

.ob-recap li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ob-final-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

/* Modal: limite do plano Grátis atingido — partilhado entre o onboarding
   e a página de Experiências (mesmo PlanStore, mesmo limite de 7) */
.ob-paywall {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-margin);
  background: rgba(27, 27, 27, 0.5);
}

/* Sem isto, o display:flex acima ganha ao [hidden] nativo do browser
   (regras de autor batem sempre as da user-agent, specificity à parte) —
   o modal ficava sempre visível, mesmo com o atributo hidden presente. */
.ob-paywall[hidden] {
  display: none;
}

.ob-paywall-card {
  max-width: 440px;
  padding: 40px;
  border-radius: 20px;
  background: var(--color-background);
}

.ob-paywall-card .text-body {
  color: var(--color-muted);
  margin: var(--space-element) 0 var(--space-block);
}

.ob-paywall-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ob-paywall-ctas .btn-primary {
  width: 100%;
}

.ob-paywall-ctas .btn-ghost {
  text-align: center;
}

@media (max-width: 639px) {
  .ob-paywall-card {
    padding: 28px;
  }
}

/* ---------- Dashboard (TOKN Unlocked) ----------
   Vive dentro do site normal (mesmo cabeçalho/rodapé de marketing).
   Estética "tonal" (à dashboard do Cursor): painéis e cartões são
   ilhas de tom — camadas translúcidas de --dash-tone sobre o fundo,
   sem bordas nem sombras; o aninhamento escurece sozinho porque as
   camadas se sobrepõem. Navegação por tabs (segmented control pill):
   Visão geral / Itinerário / Orçamento / Mapa, uma de cada vez, com
   o estado ativo persistido em localStorage. Tipografia toda em
   Google Sans Flex — a Instrument Serif só existe no h1 "Dashboard".
   As cores das cidades continuam funcionais (pills, barras, pins);
   o kyoto fica reservado a contagem decrescente e ações primárias. */
.dash {
  padding-block: 0 var(--space-section);
  /* Sistema de raios concêntricos: todos os cartões-folha partilham
     --dash-card-r; as molduras que os envolvem calculam o seu raio
     como inner + padding (nunca o mesmo raio dos dois — senão o canto
     exterior fica "esticado" em vez de correr paralelo ao interior). */
  --dash-card-r: 14px;
  --dash-section-pad: 22px;
  /* Camada tonal base e a variante mais forte (hover/estados). São
     translúcidas de propósito: um cartão dentro de uma secção soma
     as duas camadas e fica naturalmente um tom abaixo. */
  --dash-tone: rgba(27, 27, 27, 0.035);
  --dash-tone-strong: rgba(27, 27, 27, 0.07);
  /* A tinta do dashboard já esteve toda nivelada no Grey 500 (#9E9E9E),
     o que dava 2,5:1 sobre o fundo da página e pior dentro dos cartões:
     abaixo do mínimo legível de 4,5:1, e o dashboard é onde se lê tudo.
     Mantém-se a ideia de uma escala mais suave que a do resto do site,
     mas dentro do que se lê (achado P007).

     Contas feitas contra o PIOR fundo possível aqui, que é um cartão
     dentro de uma secção com a camada forte por cima: #D8D8D8 no claro
     e #444444 no escuro. Os três níveis passam: 12,1:1 / 7,5:1 / 5,2:1.

     O color explícito é necessário: sem ele, elementos sem cor própria
     herdavam o preto JÁ CALCULADO no body (a redefinição das variáveis
     não os apanha). */
  color: var(--color-primary);
  --color-primary: #1B1B1B; /* Grey 900, texto de leitura */
  --color-muted: #3E3E3E; /* Grey 800, secundário */
  --color-faint: #565656; /* Grey 700, terciário e rótulos */
}

/* Título à esquerda, tabs à direita, ambos na mesma linha */
.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-element);
}

.dash-title {
  margin-bottom: 0;
}

/* Tabs: segmented control tonal (pill dentro de pill — o chip ativo
   ganha a superfície clara; stadium-em-stadium é concêntrico por
   natureza). Mesmo desenho do alternador do calendário. */
.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  margin-bottom: 0;
  border-radius: 999px;
  background: var(--dash-tone);
}

.dash-tab {
  border: none;
  background: none;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Lado direito do cabeçalho: CTA vermelho separado + grupo das tabs */
.dash-header-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* CTA "Começa já" no dashboard: pill vermelha como o nav-cta que
   substitui, no tamanho do botão "Visão geral" */
.dash-tab-cta {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-kyoto);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.dash-tab-cta:hover {
  opacity: 0.85;
}

/* No dashboard o CTA da navbar dá lugar ao .dash-tab-cta acima */
body:has(.dash) .nav-cta {
  display: none;
}

.dash-tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
}

.dash-panel[hidden] {
  display: none;
}

/* Tab "Visão geral": resumo + itinerário + mapa empilhados */
.dash-stack {
  display: grid;
  gap: 16px;
}

.dash-section {
  padding: var(--dash-section-pad);
  /* outer = inner + padding — ver nota no .dash */
  border-radius: calc(var(--dash-card-r) + var(--dash-section-pad));
  background: var(--dash-tone);
}

/* Pill pequeno reutilizado nos cartões do Resumo — sempre à esquerda,
   sem sublinhado (o <button> herda text-align:center e o <a> herda
   sublinhado do browser por omissão, daí resetar os dois aqui). */
.dash-link-btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 8px;
  padding: 6px 13px;
  border: none;
  border-radius: 999px;
  background: var(--dash-tone);
  color: var(--color-muted);
  cursor: pointer;
  appearance: none;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-link-btn:hover {
  background: var(--dash-tone-strong);
  color: var(--color-primary);
  text-decoration: none;
}

/* Cartão base do dashboard — ilha tonal sem borda; dentro de uma
   .dash-section soma outra camada de tom e escurece sozinho */
.dash-card {
  padding: 18px 20px;
  border-radius: var(--dash-card-r);
  background: var(--dash-tone);
}

.dash-card .btn-primary {
  margin-top: 10px;
}

.dash-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dash-tile-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

/* Barra de progresso fina, reutilizada em vários painéis */
.dash-bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--dash-tone-strong);
  overflow: hidden;
}

.dash-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* Espaçador invisível: ocupa exatamente o lugar de uma barra/legenda
   real, só para os 4 cartões do Resumo alinharem valor/barra/ação na
   mesma linha entre si (o Orçamento não tem barra própria — nenhum
   limite para mostrar — e os stats simples não têm legenda). */
.dash-bar-spacer {
  visibility: hidden;
}

/* ---------- Resumo ----------
   Tudo numa só linha no desktop: o cartão da viagem (dias) fica mais
   largo que os 3 stats, que ficam iguais entre si. */
.dash-overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 16px;
  /* sem margin-bottom: o espaçamento vertical vem do gap do .dash-stack */
}

/* Anatomia comum aos 4 cartões do Resumo: rótulo → valor grande →
   linha de apoio → barra → ação. Flex coluna com a ação empurrada
   para o fundo, para as pills alinharem na mesma linha nos 4 cartões
   independentemente da altura do conteúdo de cada um. */
.dash-overview-grid .dash-card {
  display: flex;
  flex-direction: column;
}

.dash-overview-grid .dash-link-btn,
.dash-overview-grid .dash-date-picker {
  margin-top: auto;
}

/* Espaço mínimo antes da ação, mesmo no cartão mais alto da linha
   (onde o margin-top:auto colapsa para zero) */
.dash-overview-grid .dash-bar,
.dash-overview-grid .dash-countdown-bar {
  margin-bottom: 10px;
}

.dash-stat-note {
  margin-bottom: 10px;
}

/* Sem gap próprio: o cartão da viagem usa exatamente os mesmos
   espaçamentos (margens de .dash-stat-value / .dash-stat-note / barra)
   dos outros três cartões, para o valor grande e a linha de apoio
   alinharem horizontalmente entre os 4. */
.dash-card-trip {
  display: flex;
  flex-direction: column;
}

.dash-countdown-num {
  font-weight: 500;
  color: var(--color-nara);
}

.dash-countdown-bar {
  height: 6px; /* mesma espessura das dash-bar dos outros cartões */
  margin-top: 8px; /* igual a .dash-bar, para as barras alinharem */
  border-radius: 999px;
  background: var(--dash-tone-strong);
  overflow: hidden;
}

.dash-countdown-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-nara);
  transition: width 0.3s ease;
}

.dash-trip-hint {
  color: var(--color-faint);
  margin-bottom: 4px;
}

/* Seletor de datas: pill-gatilho ("11 jan – 9 fev") + popover de
   calendário (mesmo desenho da grelha do Itinerário, mas com células
   simples clicáveis em vez de pills/experiências). */
.dash-date-picker {
  position: relative;
  display: inline-block;
}

.dash-date-caret {
  margin-left: 4px;
  font-size: 14px;
  line-height: 1;
  vertical-align: -0.25em;
  color: var(--color-faint);
}

.dash-date-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 40px rgba(27, 27, 27, 0.18);
}

.dash-date-popover .dash-cal-nav {
  margin-bottom: 10px;
}

.dash-date-popover .dash-cal-grid {
  /* Sem gap horizontal: o intervalo selecionado desenha uma banda
     rosa contínua em vez de quadrados soltos com frestas */
  row-gap: 2px;
  column-gap: 0;
}

.dash-picker-empty {
  aspect-ratio: 1;
}

.dash-picker-cell {
  position: relative;
  z-index: 0; /* cria stacking context para os pseudo-elementos abaixo */
  aspect-ratio: 1;
  border: none;
  background: none;
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-primary);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-picker-cell:hover {
  background: var(--color-hairline);
}

.dash-picker-cell.is-picker-range {
  background: var(--color-nara-soft);
  border-radius: 0;
}

/* Extremos do intervalo: círculo cheio desenhado no ::after (z -1,
   por cima do meio-fundo mas por baixo do número), em vez de background
   do botão — permite pôr a banda rosa a passar por trás do círculo. */
.dash-picker-cell.is-picker-selected {
  color: var(--color-white);
}

.dash-picker-cell.is-picker-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--color-nara);
}

/* Meio-fundo rosa (z -2, atrás do círculo): no início do intervalo só a
   metade direita, no fim só a esquerda — a banda entra "por baixo" do
   círculo em vez de parar com uma fresta antes dele. */
.dash-picker-cell.is-picker-start::before,
.dash-picker-cell.is-picker-end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-nara-soft);
}

.dash-picker-cell.is-picker-start::before {
  left: 50%;
}

.dash-picker-cell.is-picker-end::before {
  right: 50%;
}

/* Linha de segunda-feira (início de linha) ou domingo (fim de linha):
   arredonda o lado que dá para a margem da grelha, senão a banda
   parece cortada a direito onde a linha da grelha acaba (ver toda a
   nota em is-picker-row-start/end, no JS que gera as células). */
.dash-picker-cell.is-picker-row-start.is-picker-range,
.dash-picker-cell.is-picker-row-start.is-picker-start::before,
.dash-picker-cell.is-picker-row-start.is-picker-end::before {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.dash-picker-cell.is-picker-row-end.is-picker-range,
.dash-picker-cell.is-picker-row-end.is-picker-start::before,
.dash-picker-cell.is-picker-row-end.is-picker-end::before {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.dash-date-popover-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.dash-date-popover-actions .btn-outline,
.dash-date-popover-actions .btn-primary {
  height: 34px;
  padding: 0 16px;
  line-height: 1; /* remove qualquer influência da métrica da fonte na centragem vertical do texto */
  /* O popover vive DENTRO do .dash-card da viagem, por isso o Aplicar
     apanhava o margin-top:10px de .dash-card .btn-primary (pensado
     para os CTAs dos cartões do Resumo) e descia 5px em relação ao
     Cancelar — era este o desalinhamento "impossível de resolver". */
  margin: 0;
}

/* O .btn-outline global tem borda real (1px, dentro da caixa via
   border-box) enquanto o .btn-primary não tem borda nenhuma — um
   contorno fino ao lado de um botão sólido da mesma altura nominal
   tende a "ler" mais baixo (a moldura come a área visível do texto).
   Troca a borda por box-shadow inset, que não consome espaço da caixa:
   os dois ficam exatamente no mesmo plano vertical. */
/* Aplicar a verde, como o resto do seletor de datas (o .btn-primary
   global continua vermelho no resto do site) */
.dash-date-popover-actions .btn-primary {
  background: var(--color-nara);
}

.dash-date-popover-actions .btn-outline {
  border: none;
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.dash-date-popover-actions .btn-outline:hover {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.dash-date-popover-actions [disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 639px) {
  .dash-date-popover {
    left: auto;
    right: 0;
  }
}

.dash-stat {
  grid-column: span 1;
}

.dash-stat-label {
  color: var(--color-faint);
}

.dash-stat-value {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.dash-stat-of {
  color: var(--color-faint);
  font-size: 16px;
}

@media (max-width: 1023px) {
  .dash-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-card-trip {
    grid-column: span 2;
  }
}

@media (max-width: 639px) {
  .dash-overview-grid {
    grid-template-columns: 1fr;
  }

  .dash-card-trip {
    grid-column: span 1;
  }
}

/* ---------- Itinerário (kanban por cidade + calendário) ---------- */
/* Chip verde, na mesma linha do mês/toggle do calendário (dentro de
   .dash-cal-controls) — não é um separador solto, é a legenda da
   linha de controlos. */
.dash-panel-hint {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--dash-tone); /* mesmo cinzento das colunas do kanban */
  color: var(--color-muted);
}

.dash-day-empty {
  color: var(--color-faint);
}

/* Kanban: 4 colunas, uma por cidade — pool de experiências por agendar */
.dash-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.dash-kanban-col {
  padding: 14px;
  border-radius: var(--dash-card-r);
  background: var(--dash-tone);
  transition: background 0.15s ease;
}

.dash-kanban-col.is-dragover {
  background: var(--dash-tone-strong);
}

.dash-kanban-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--color-muted);
}

.dash-kanban-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px; /* garante área de largada mesmo vazia */
}

/* Pill arrastável — mesma linguagem de cor das cidades no resto do site */
.dash-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: grab;
  appearance: none;
}

.dash-pill:active {
  cursor: grabbing;
}

.dash-pill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Só as pills já agendadas no calendário têm este botão — é a única
   forma de as tirar de lá (clicar na pill em si já não desagenda). */
.dash-pill-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

.dash-pill-remove:hover {
  background: var(--color-hairline);
  color: var(--color-primary);
}

.dash-cal-pills .dash-pill-remove {
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: var(--color-muted); /* mais visível que o faint por omissão — quase invisível na pill pequena */
}

.dash-pill.is-selected {
  outline: 2px solid var(--color-kyoto);
  outline-offset: 1px;
}

/* Pills sempre a branco (o fundo base .dash-pill já é --color-surface):
   a cidade identifica-se pela bolinha, igual no kanban e no calendário
   — fundos coloridos por cidade criavam pills "invisíveis" quando a
   cor coincidia com a célula por baixo. */

/* Calendário */
/* Alternador "Mês completo" / "Só a viagem" — segmented control pill */
/* Linha de controlos do calendário: toggle de vista + (só no mês
   completo) navegação de mês, tudo encostado à direita — nunca
   centrado, para não competir visualmente com a grelha por baixo. */
.dash-cal-controls {
  display: flex;
  flex-wrap: wrap; /* era a única linha do dashboard sem isto, e a navegação
                      de mês saía do ecrã em telemóveis estreitos */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dash-cal-controls-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-cal-view-toggle {
  display: flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--dash-tone);
}

.dash-cal-view-btn {
  border: none;
  background: none;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dash-cal-view-btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
}

.dash-cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Vista "Mês completo": o mês fica centrado por cima da grelha, como
   a legenda da vista "Apenas viagem" — só que ladeado pelas setas. */
.dash-cal-nav-center {
  justify-content: center;
  margin-bottom: 12px;
}

/* Setas de navegação do mês reaproveitam o pill, mas sem o espaçamento
   pensado para os cartões do Resumo (aqui já estão centradas na linha) */
.dash-cal-nav .dash-link-btn {
  align-self: center;
  margin-top: 0;
}

.dash-cal-month {
  min-width: 12ch;
  text-align: center;
  text-transform: capitalize;
}

.dash-cal-grid {
  display: grid;
  /* minmax(0, 1fr), não só 1fr: impede que uma coluna com texto mais
     largo do que a coluna (ex.: cabeçalho da semana) force a grelha
     inteira a alargar e a sair da moldura do cartão. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.dash-cal-weekday {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
  color: var(--color-faint);
  padding-bottom: 6px;
}

.dash-cal-cell {
  min-height: 76px;
  padding: 6px;
  /* A última linha do calendário assenta nos cantos da .dash-section:
     tem de partilhar o raio dos restantes cartões-folha (ver .dash). */
  border-radius: var(--dash-card-r);
  background: var(--dash-tone);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.dash-cal-cell-empty {
  background: none;
}

.dash-cal-cell.is-trip-day {
  /* Green 50 da escala oficial (via -soft, que já traz o override
     escuro Green 900) */
  background: var(--color-nara-soft);
}

/* Dia fora do intervalo da viagem (só aparece na vista "Mês completo",
   com viagem já definida): visível para dar contexto do calendário
   real, mas sem aceitar arrastar/clicar — ver locked em dashboard.js. */
.dash-cal-cell.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.dash-cal-cell.is-dragover {
  /* Verde da marca (500), bem mais forte que o Green 200 do fundo
     dos dias da viagem — em vez do stroke preto de antes */
  box-shadow: inset 0 0 0 1.5px var(--color-nara);
}

.dash-cal-daynum {
  display: block;
  margin-left: 3px; /* o padding do cartão sozinho deixa o número colado ao canto arredondado */
  font-weight: 600;
  color: var(--color-faint);
}

.dash-cal-pills {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.dash-cal-pills .dash-pill {
  padding: 4px 8px;
}

/* × na cor da própria cidade (500) */
.dash-pill-tokyo .dash-pill-remove { color: var(--color-tokyo); }
.dash-pill-osaka .dash-pill-remove { color: var(--color-osaka); }
.dash-pill-kyoto .dash-pill-remove { color: var(--color-kyoto); }
.dash-pill-nara  .dash-pill-remove { color: var(--color-nara); }

/* Vista "só a viagem": mesmo mês/grelha/célula da vista completa, só
   sem cal-nav (não é paginável, mostra logo o(s) mês(es) da viagem);
   quando a viagem atravessa mais que um mês, cada bloco leva a sua
   própria legenda do mês por cima da grelha. */
.dash-cal-tripmonth + .dash-cal-tripmonth {
  margin-top: 20px;
}

.dash-cal-tripmonth-label {
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 12px;
}

/* Tablet/mobile: kanban desliza na horizontal (4 colunas não cabem) */
@media (max-width: 1023px) {
  .dash-kanban {
    grid-auto-flow: column;
    grid-auto-columns: min(70vw, 240px);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

@media (max-width: 639px) {
  .dash-cal-cell {
    min-height: 52px;
  }
}

/* ---------- Orçamento ---------- */
.dash-budget-total {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-budget-support {
  display: block;
  color: var(--color-faint);
}

/* Barra do orçamento alvo: verde enquanto o total cabe no alvo,
   vermelho quando o ultrapassa */
.dash-target-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-nara);
  transition: width 0.3s ease;
}

.dash-target-bar.is-over span {
  background: var(--color-kyoto);
}

/* Formulário de custos: grelha fluida de campos numéricos */
.dash-budget-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.dash-budget-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-budget-field input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  appearance: textfield;
}

.dash-budget-field input:focus {
  outline: none;
  border-color: var(--color-nara);
}

.dash-budget-days,
.dash-budget-travelers,
.dash-budget-events,
.dash-budget-dailies {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Lista de viajantes: chips com nome + × de remover */
.dash-travelers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-traveler-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: var(--dash-tone);
}

.dash-traveler-add .dash-link-btn {
  margin-top: 0; /* o margin-top:8px base desalinhava-o do input ao lado */
}

/* ---------- Orçamento: grelha, eventos, diários, por viajante ---------- */
/* Duas colunas no desktop, empilha no mobile */
.dash-budget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* Os cartões dentro da grelha dispensam o margin-bottom próprio */
.dash-budget-grid > .dash-card {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .dash-budget-grid {
    grid-template-columns: 1fr;
  }
}

.dash-budget-pertrav {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Linha de botões "adicionar" por tipo de evento */
.dash-event-addrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-event-addrow .dash-link-btn {
  margin-top: 0;
}

/* Lista de eventos: cada linha é um botão que abre o painel */
.dash-event-list {
  display: flex;
  flex-direction: column;
}

.dash-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 4px;
  border: none;
  border-top: 1px solid var(--color-hairline);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease;
}

.dash-event-row:hover {
  background: var(--dash-tone);
}

.dash-event-icon {
  font-size: 18px;
  color: var(--color-faint);
  flex-shrink: 0;
}

.dash-event-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-event-meta {
  color: var(--color-faint);
}

/* Diários: toggle + média €/pessoa/dia */
.dash-daily {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 8px;
  border-top: 1px solid var(--color-hairline);
}

.dash-daily-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.dash-daily-toggle input {
  accent-color: var(--color-nara);
}

.dash-daily-per {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-daily-per input {
  width: 110px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
}

.dash-daily-per input:disabled {
  opacity: 0.45;
}

.dash-daily-per input:focus {
  outline: none;
  border-color: var(--color-nara);
}

/* ---------- Avatares/iniciais nas pills ---------- */
.dash-avatars {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}

/* Os círculos nas pills do calendário: agora são .avatar com a cor de
   cada pessoa, em vez de um tom único com a inicial. */
.dash-avatars .avatar {
  /* Sobreposição à Google Calendar, com um aro da cor da pill a separar */
  margin-left: -5px;
  box-shadow: 0 0 0 1.5px var(--color-surface);
}

.dash-avatars .avatar:first-child {
  margin-left: 0;
}

/* O "+2" de quem não coube não é uma pessoa, é uma contagem: leva o tom
   neutro do painel e não uma cor de marca que fingisse ser alguém. */
.dash-avatar-extra {
  background: var(--dash-tone-strong);
  color: var(--color-primary);
  font-size: 8px;
}

/* ---------- Pills de eventos manuais no calendário ---------- */
.dash-pill-event {
  background: var(--color-surface);
}

.dash-pill-kindicon {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-faint);
}

/* ---------- Painel lateral de detalhe (drawer) ---------- */
.dash-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(27, 27, 27, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dash-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dash-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  box-shadow: -16px 0 48px rgba(27, 27, 27, 0.18);
  transform: translateX(105%);
  transition: transform 0.25s ease;
}

.dash-drawer.is-open {
  transform: none;
}

.dash-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-hairline);
}

.dash-drawer-kindchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
}

.dash-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  appearance: none;
}

.dash-drawer-close:hover {
  background: var(--dash-tone-strong);
  color: var(--color-primary);
}

.dash-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-drawer-title {
  margin: 0;
}

.dash-drawer-meta {
  display: flex;
  flex-direction: column;
}

.dash-drawer-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
  border-top: 1px solid var(--color-hairline);
}

.dash-drawer-meta-label {
  color: var(--color-faint);
  flex-shrink: 0;
}

.dash-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-hairline);
}

.dash-drawer-parts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-part-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.dash-part-row input {
  accent-color: var(--color-nara);
}

.dash-drawer-hint {
  color: var(--color-faint);
}

/* Perna de um voo: mini-fieldset com moldura tonal */
.dash-drawer-leg {
  border: 1px solid var(--color-hairline);
  border-radius: var(--dash-card-r);
  padding: 12px;
}

.dash-drawer-leg legend {
  padding-inline: 6px;
  color: var(--color-muted);
}

.dash-drawer-leg + .dash-drawer-leg {
  margin-top: 8px;
}

/* Selects e inputs de data/hora do painel herdam o estilo dos campos */
.dash-budget-field select,
.dash-budget-field input[type="date"],
.dash-budget-field input[type="time"],
.dash-budget-field input[type="datetime-local"],
.dash-budget-field input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  appearance: none;
}

.dash-budget-field select:focus,
.dash-budget-field input:focus {
  outline: none;
  border-color: var(--color-nara);
}

.dash-drawer-remove {
  align-self: flex-start;
  color: var(--color-kyoto);
}

/* ---------- Autenticação (entrar / registo / recuperação) ---------- */
.auth {
  padding-block: var(--space-block) var(--space-section);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-title {
  margin-bottom: var(--space-element);
}

.auth-card {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
}

/* Alternador Entrar/Criar conta — mesmo desenho tonal das tabs */
.auth-tabs {
  display: flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--dash-tone, rgba(27, 27, 27, 0.035));
}

/* O chip ativo do alternador usa --color-surface, que aqui é a cor do
   próprio cartão — passa a branco puro para não desaparecer */
.auth-tabs .dash-cal-view-btn.is-active {
  background: var(--color-white);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sub-formulários da vista de conta (mudar password/email) */
.auth-subform {
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field input,
.auth-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background);
  color: inherit;
  font: inherit;
}

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--color-nara);
}

.auth-submit {
  height: 44px;
  margin-top: 4px;
}

.auth-link {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
  appearance: none;
}

.auth-link:hover {
  color: var(--color-primary);
}

.auth-danger {
  color: var(--color-kyoto);
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
}

.auth-msg {
  padding: 10px 14px;
  border-radius: 10px;
}

.auth-msg.is-ok {
  background: var(--color-nara-soft);
}

.auth-msg.is-error {
  background: var(--color-kyoto-soft);
}

.auth-muted {
  color: var(--color-faint);
}

/* Conta de viagem (Blocos B/C): membros, lugares e convites dentro do
   cartão de conta — mesma separação visual dos sub-formulários */
.auth-trip-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
}

.auth-trip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.auth-trip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.auth-trip-row:last-child {
  border-bottom: none;
}

/* Os botões das linhas (remover/cancelar) não se esticam nem quebram */
.auth-trip-row .auth-link {
  align-self: center;
  flex-shrink: 0;
}

/* Página de aceitar convite: escolha de repartição (entrada tardia) */
/* ---------- Orçamento individual ---------- */
.dash-ind-pickrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* Reusa o desenho do alternador do calendário, mas com wrap para
   grupos grandes de viajantes */
.dash-ind-picker {
  flex-wrap: wrap;
}

.dash-ind-sectitle {
  display: block;
  margin-top: 12px;
}

.dash-ind-sectitle:first-child {
  margin-top: 0;
}

/* Linha clicável do detalhe (abre o painel do evento/experiência) */
.dash-ind-row {
  width: 100%;
  border: none;
  border-top: 1px solid var(--color-hairline);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease;
}

.dash-ind-row:hover {
  background: var(--dash-tone);
}

/* Custo por dia do itinerário */
.dash-budget-daylist {
  list-style: none;
}

.dash-budget-dayrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
  border-top: 1px solid var(--color-hairline);
}

.dash-budget-daylabel {
  text-transform: capitalize;
}

.dash-budget-cities-title {
  display: block;
  margin-bottom: 10px;
}

.dash-budget-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-budget-value {
  font-weight: 600;
}

.dash-budget-bar {
  height: 10px;
}

.dash-budget-bar-tokyo span { background: var(--color-tokyo); }
.dash-budget-bar-osaka span { background: var(--color-osaka); }
.dash-budget-bar-kyoto span { background: var(--color-kyoto); }
.dash-budget-bar-nara  span { background: var(--color-nara); }

.dash-budget-share {
  display: block;
  margin-top: 6px;
  color: var(--color-faint);
}

/* ---------- Mapa ---------- */
.dash-map-note {
  color: var(--color-faint);
  margin-bottom: var(--space-element);
}

.dash-map-card {
  position: relative; /* âncora para a dica de zoom flutuante */
  /* Sem isto, o Leaflet escapa: os controlos dele usam z-index:1000
     no CSS da própria biblioteca, e sem contexto de empilhamento
     próprio aqui (position + z-index juntos), esse 1000 competia
     direto com o resto da página — navbar (z-index:100) e popover do
     seletor de datas (z-index:20) perdiam sempre. */
  z-index: 0;
  padding: 0; /* o mapa preenche o cartão de margem a margem */
  overflow: hidden;
}

/* Dica de ctrl+scroll: flutua sobre os tiles, por isso leva fundo
   sólido próprio (não var(--dash-tone), que é translúcido e some
   contra o mapa) — sempre branco/escuro puro, independente do tema. */
.dash-map-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 400; /* acima do canvas do Leaflet (sibling sem z-index próprio) */
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  box-shadow: 0 4px 12px rgba(27, 27, 27, 0.18);
  pointer-events: none;
}

@media (max-width: 639px) {
  .dash-map-zoom-hint {
    display: none; /* sem scroll/ctrl em touch — a dica não se aplica */
  }
}

.dash-map-canvas {
  height: 480px;
  width: 100%;
  background: var(--color-hairline); /* visível enquanto os tiles carregam */
}

/* Pin do mapa: círculo colorido com contorno branco (Leaflet divIcon) */
.dash-map-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 4px rgba(27, 27, 27, 0.35);
}

/* Controlo de zoom do Leaflet, redesenhado para bater com os botões do
   resto do site (maior, redondos, sombra igual aos cartões) em vez
   dos quadrados pequenos por omissão da biblioteca. Tentativas
   anteriores usavam --dash-card-r (14px, pensado para cantos de
   cartão) e deixavam os dois botões colados — só as pontas de fora
   arredondadas, por isso pareciam sempre um retângulo/pílula, nunca
   dois círculos. Cada botão agora é 50% + tem a sua sombra própria,
   com um espaço entre os dois. */
.dash-map-card .leaflet-control-zoom {
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-map-card .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(27, 27, 27, 0.18);
}

/* !important a sério necessário aqui: o CSS do Leaflet tem
   .leaflet-bar a:first-child / :last-child a arredondar só 2 cantos
   de cada vez (4px), com a MESMA especificidade que esta regra — o
   empate deixava o resultado dependente da ordem interna do browser,
   dando uma curva OK de um lado e quase reta do outro. */
.dash-map-card .leaflet-control-zoom a,
.dash-map-card .leaflet-control-zoom a:first-child,
.dash-map-card .leaflet-control-zoom a:last-child {
  border-radius: 50% !important;
}

.dash-map-card .leaflet-control-zoom a:hover {
  /* Sólida, não var(--color-hairline) (translúcida) — o botão flutua
     sobre os tiles do mapa, por isso uma cor translúcida deixa-o
     parecer "apagado" em vez de realçado ao passar o rato. */
  background: var(--color-background);
}

/* ---------- Página de Preço ---------- */
.price {
  padding-block: 0 var(--space-section);
}

.price-grid {
  row-gap: var(--grid-gutter);
  margin-bottom: var(--space-section);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
}

/* Plano pago em destaque — mesma linguagem do card de conversão das Experiências */
.price-card-featured {
  background: var(--color-tokyo);
  border: none;
  color: var(--color-white);
}

.price-badge {
  align-self: flex-start;
  padding: 5px 14px;
  margin-bottom: var(--space-element);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
}

.price-card-featured .text-h4 {
  color: var(--color-white);
}

.price-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: var(--space-element);
}

.price-value {
  font-family: var(--font-sans);
  font-size: clamp(36px, calc(30px + 1.6vw), 52px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
}

.price-period {
  color: var(--color-muted);
}

.price-card-featured .price-period {
  color: rgba(255, 255, 255, 0.78);
}

.price-tagline {
  margin-top: 10px;
  color: var(--color-muted);
}

.price-card-featured .price-tagline {
  color: rgba(255, 255, 255, 0.78);
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--space-block) 0;
  list-style: none;
}

.price-features li {
  position: relative;
  padding-left: 26px;
}

.price-features li::before {
  content: "check";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 15px;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--color-kyoto);
}

.price-card-featured .price-features li::before {
  color: var(--color-white);
}

.price-card > a {
  margin-top: auto;
  align-self: flex-start;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 48px;
  background: none;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  border-color: var(--color-primary);
}

.price-nl {
  margin-top: var(--space-element);
  color: rgba(255, 255, 255, 0.72);
}

.price-nl a {
  color: var(--color-white);
}

.price-notes {
  row-gap: var(--space-block);
  margin-bottom: var(--space-block);
}

.price-note h3 {
  margin-bottom: 8px;
}

.price-note .text-body {
  color: var(--color-muted);
}

.price-faq-link {
  color: var(--color-muted);
  text-align: center;
}

.price-faq-link a {
  color: var(--color-kyoto);
}

/* Tablet/mobile: cards e notas já empilham via .col-12/.col-8 (grid remap) */
@media (max-width: 639px) {
  .price-card {
    padding: 28px;
  }
}

/* ---------- Escala tipográfica ----------
   Tamanhos grandes (h1–h4) são fluidos: escalam continuamente
   entre 640px e 1920px de viewport, onde atingem o valor máximo
   definido em fonts-e-cores.md. Tamanhos pequenos ficam fixos
   para garantir legibilidade. */
/* Display: para heros e momentos de destaque — maior que o H1 */
.text-display {
  font-family: var(--font-serif);
  font-size: clamp(40px, calc(24px + 2.5vw), 72px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-family: var(--font-serif);
  font-size: clamp(22px, calc(19px + 0.47vw), 28px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.text-h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, calc(24px + 0.63vw), 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.text-h3 {
  font-family: var(--font-sans);
  font-size: clamp(22px, calc(19.5px + 0.39vw), 27px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.text-h4 {
  font-family: var(--font-sans);
  font-size: clamp(18px, calc(16.5px + 0.24vw), 21px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.text-h5 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.text-h6 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.text-body-large {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.text-body {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.text-caption {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.text-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Painel de administração ---------- */
/* Esta regra existia para o backoffice escapar à tinta esbatida do
   dashboard. Deixou de ser precisa quando o próprio .dash passou a ter
   contraste legível (P007), e os valores que tinha (#777777 e #9E9E9E)
   até eram piores do que os novos. Fica só a nota, para não voltar a
   ser reintroduzida por hábito. */

/* Os formulários do painel usam campos de texto longos, que o
   dashboard não tinha */
.dash-budget-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  resize: vertical;
}

.dash-budget-field textarea:focus {
  outline: none;
  border-color: var(--color-nara);
}

/* Formulário do painel: uma coluna, para os campos longos respirarem */
.dash-drawer .dash-budget-form {
  grid-template-columns: 1fr;
}

/* Aviso de remoção da conta de viagem (cloud-sync.js). Fixo em baixo
   para não empurrar o conteúdo nem depender do layout da página, já que
   pode aparecer em qualquer uma. Osaka suave: no sistema não é erro nem
   confirmação, é chamada de atenção. */
.cloud-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  background: var(--color-osaka-soft);
  color: var(--color-primary);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}

.cloud-notice p {
  margin: 0;
}

.cloud-notice-close {
  flex: none;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.cloud-notice-close:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .cloud-notice {
    animation: cloud-notice-in 220ms ease-out;
  }
}

@keyframes cloud-notice-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* ---------- Avatar: cor da marca + iniciais ---------- */
/* A tinta é fixa e NÃO usa as variáveis do tema. O fundo é uma cor da
   marca, igual nos dois temas, por isso uma tinta que virasse branca no
   modo escuro deitava abaixo o contraste calculado para cada tom. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--avatar-size, 32px);
  height: var(--avatar-size, 32px);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: calc(var(--avatar-size, 32px) * 0.38);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.avatar-dark {
  color: #1b1b1b;
}

.avatar-light {
  color: #ffffff;
}

/* Na navbar o avatar ocupa o círculo todo: a moldura e o fundo passam a
   ser dele, senão ficava um anel cinzento à volta da cor. */
.nav-circle-user {
  background: none;
  border-color: transparent;
  padding: 0;
  overflow: hidden;
}

/* O ícone genérico continua no HTML, só escondido: tirá-lo de lá deixava
   o efeito roll do main.js a animar um elemento fora da página, e o
   hover morria depois de sair da conta. */
.nav-circle-user > span:not(.avatar) {
  display: none;
}

/* O display precisa de vir daqui e não do .avatar: o .roll > span mete
   display:block e, com um seletor mais específico, ganhava à centragem
   por flex. Era isso que atirava as iniciais para o canto. */
.nav-circle-user .avatar {
  display: flex;
  --avatar-size: 100%;
  font-size: 15px;
}

.nav-circle-user:hover .avatar {
  outline: 2px solid var(--color-kyoto);
  outline-offset: -2px;
}

/* ---------- Escolher a cor do avatar ---------- */
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.avatar-swatch:hover {
  transform: scale(1.12);
}

/* O anel de selecionado fica por FORA da cor, com um vão do fundo pelo
   meio: por dentro comia a cor e nos tons claros nem se via. */
.avatar-swatch[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-background) inset;
}

.avatar-preview {
  --avatar-size: 56px;
}

/* Avatares pequenos dentro de texto e de fichas */
.avatar-mini {
  --avatar-size: 16px;
  font-size: 8px;
  font-weight: 600;
}

.avatar-chip {
  --avatar-size: 20px;
  font-size: 9px;
  font-weight: 600;
}

/* O botão do seletor individual passa a ter avatar e nome lado a lado
   (a ficha de viajante já é inline-flex mais acima). */
.dash-ind-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* O dia do calendário recebe foco por teclado (é a única via de agendar
   para quem não usa rato). Sem anel visível, a pessoa fica a navegar às
   cegas, que é meio caminho para não ser via nenhuma. */
.dash-cal-cell:focus-visible {
  outline: 2px solid var(--color-kyoto);
  outline-offset: -2px;
}

/* Texto só para leitores de ecrã: fica na página e é anunciado, mas não
   ocupa espaço nem se vê. Serve para dizer por palavras o que a
   interface só mostra por cor ou por forma, como os avatares de quem
   participa num custo (esses estão aria-hidden, por serem decorativos). */
.a11y-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Guia passo-a-passo de cada essencial: é o que o Unlocked acrescenta
   nesta página, por isso tem de se ler como conteúdo e não como nota de
   rodapé. Recuado e com uma linha à esquerda, para se perceber que
   pertence ao item de cima. */
.ess-steps {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--color-hairline);
}

.ess-steps-title {
  display: block;
  margin-bottom: 6px;
  color: var(--color-faint);
}

.ess-steps-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ess-steps-list li {
  padding-left: 2px;
}

/* Aviso de experiências do plano que não vieram do catálogo (falha de
   rede no arranque). Osaka suave, como o aviso de saída de conta: não é
   erro nem confirmação, é chamada de atenção. */
.dash-missing {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-osaka-soft);
  color: var(--color-primary);
}

/* ---------- Páginas legais (termos, privacidade, cookies) ---------- */
/* Coluna estreita: texto corrido lê-se mal em linhas largas, e estas
   páginas são só texto corrido. */
.legal {
  max-width: 68ch;
  padding-bottom: var(--space-section);
}

.legal h2 {
  margin-top: var(--space-block);
  margin-bottom: 8px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p {
  margin-bottom: 12px;
}

.legal ul {
  margin: 0 0 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal a {
  color: var(--color-kyoto);
}

/* Mensagem do checkout, por baixo do botão de compra */
.checkout-msg {
  margin-top: 10px;
  color: var(--color-muted);
}

.checkout-msg.is-error {
  color: var(--color-kyoto);
}